@ -0,0 +1,207 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<loginPage v-if="type == 1" @goLogin="goLogin" @backPage="backPage"></loginPage>
|
||||||
|
<loginPopup v-if="type == 2" :show='show' @loginShow="loginShow" @empower="empower" @goLogin="goLogin">
|
||||||
|
</loginPopup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import loginPopup from './loginPopup.vue'
|
||||||
|
import loginPage from './loginPage.vue'
|
||||||
|
// #ifdef H5
|
||||||
|
import ap from "@/uni_modules/alipayjsapi/alipayjsapi.js"
|
||||||
|
// #endif
|
||||||
|
export default {
|
||||||
|
name: "login",
|
||||||
|
components: {
|
||||||
|
loginPopup,
|
||||||
|
loginPage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
title: "Hello",
|
||||||
|
disabled: false,
|
||||||
|
show: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
type: Number,
|
||||||
|
// show: Boolean,
|
||||||
|
wcCode: String,
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (this.wcCode) {
|
||||||
|
this.actionLogin(this.wcCode, '', 1);
|
||||||
|
} else {
|
||||||
|
// 验证是否需要登录
|
||||||
|
if (this.type == 2) {
|
||||||
|
this.isLogin()
|
||||||
|
}
|
||||||
|
// #ifdef H5
|
||||||
|
// 如果是支付宝h5自动完成登陆
|
||||||
|
if (this.type == 0) {
|
||||||
|
if (this.$utils.isInAliBrowser() || this.$utils.isInWeChatBrowser()) {
|
||||||
|
this.login()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async login({
|
||||||
|
phone_code
|
||||||
|
} = {}) {
|
||||||
|
this.disabled = true;
|
||||||
|
let that = this
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
uni.login({
|
||||||
|
provider: "weixin", //使用微信登录
|
||||||
|
// onlyAuthorize: '',
|
||||||
|
success: (loginRes) => {
|
||||||
|
this.actionLogin(loginRes.code, phone_code);
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
uni.$u.toast(res.errMsg);
|
||||||
|
this.disabled = false;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
my.getAuthCode({
|
||||||
|
scopes: 'auth_user',
|
||||||
|
success: (loginRes) => {
|
||||||
|
if (loginRes.authCode) {
|
||||||
|
this.actionLogin(loginRes.authCode);
|
||||||
|
} else {
|
||||||
|
// uni.$u.toast(loginRes.errMsg ? loginRes.errMsg : '登录失败');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (res) => {
|
||||||
|
uni.$u.toast(res.errMsg);
|
||||||
|
this.disabled = false;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
//#ifdef H5
|
||||||
|
// 支付宝h5登陆
|
||||||
|
if (this.$utils.isInAliBrowser()) {
|
||||||
|
const res = await this.$api.common.aliH5();
|
||||||
|
// 获取微信应用的 appid
|
||||||
|
const appid = res.data.appid;
|
||||||
|
ap.getAuthCode({
|
||||||
|
appId: appid,
|
||||||
|
scopes: ['auth_base'],
|
||||||
|
}, function(res) {
|
||||||
|
console.log(res, 'resresres')
|
||||||
|
if (res.authCode) {
|
||||||
|
that.actionLogin(res.authCode, '', 2);
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: res.errorDesc || res.errorMessage
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
|
||||||
|
} else if (this.$utils.isInWeChatBrowser()) {
|
||||||
|
let redirect_uri = window.location.href;
|
||||||
|
var fruits = redirect_uri.split("?");
|
||||||
|
redirect_uri = encodeURIComponent(fruits[0]);
|
||||||
|
const res = await this.$api.user.wxH5Login({
|
||||||
|
redirect_uri
|
||||||
|
});
|
||||||
|
console.log(res,'res')
|
||||||
|
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//#endif
|
||||||
|
|
||||||
|
},
|
||||||
|
// 验证是否已经登陆
|
||||||
|
async isLogin() {
|
||||||
|
const res = await this.$api.user.isLogin();
|
||||||
|
if (res.data.is_login > 0) {
|
||||||
|
this.$emit('isLogin')
|
||||||
|
} else {
|
||||||
|
this.show = true;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async actionLogin(code, phone_code = "", origin_h5 = 0) {
|
||||||
|
const foke_parent_user = uni.getStorageSync('distributor_id') || 0
|
||||||
|
try {
|
||||||
|
const res = await this.$api.user.login({
|
||||||
|
code,
|
||||||
|
foke_parent_user,
|
||||||
|
phone_code,
|
||||||
|
origin_h5
|
||||||
|
});
|
||||||
|
uni.hideLoading();
|
||||||
|
if (!res.code) {
|
||||||
|
let {
|
||||||
|
token,
|
||||||
|
user_info,
|
||||||
|
store_id
|
||||||
|
} = res.data;
|
||||||
|
uni.setStorageSync("token_" + store_id, token);
|
||||||
|
uni.setStorageSync("user_info", user_info);
|
||||||
|
if (this.type != 0) {
|
||||||
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
title: "登录成功",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
foke_parent_user && this.initDistributor(foke_parent_user)
|
||||||
|
this.backPage()
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
uni.$u.toast(res.message);
|
||||||
|
} catch (e) {
|
||||||
|
uni.hideLoading();
|
||||||
|
throw new Error(e);
|
||||||
|
}
|
||||||
|
this.disabled = false;
|
||||||
|
},
|
||||||
|
loginShow(e) {
|
||||||
|
// this.$emit('loginShow', e);
|
||||||
|
this.show = e
|
||||||
|
},
|
||||||
|
empower(e) {
|
||||||
|
this.login()
|
||||||
|
},
|
||||||
|
goLogin(e, params) {
|
||||||
|
this.login(params)
|
||||||
|
},
|
||||||
|
|
||||||
|
backPage() {
|
||||||
|
if (this.type == 0) {
|
||||||
|
this.$emit('isLogin')
|
||||||
|
} else if (this.type != 2) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const backPage = uni.getStorageSync("backPage")
|
||||||
|
if (backPage) {
|
||||||
|
if (backPage.includes('login/login')) {
|
||||||
|
this.$utils.toUrl("/pages/index/index", "redirectTo");
|
||||||
|
} else {
|
||||||
|
this.$utils.toUrl(backPage);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$utils.toUrl("/pages/index/index", "redirectTo");
|
||||||
|
}
|
||||||
|
// this.$emit('loginShow', false);
|
||||||
|
}, 200);
|
||||||
|
} else {
|
||||||
|
this.$emit('isLogin')
|
||||||
|
this.loginShow(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -0,0 +1,119 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view style="padding: 10rpx 20rpx;background: #F0F0F0;display: flex;flex-wrap: wrap;">
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(1)">1</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(2)">2</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(3)">3</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(4)">4</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(5)">5</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(6)">6</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(7)">7</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(8)">8</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(9)">9</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick('.')">.</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="btnClick(0)">0</view>
|
||||||
|
</view>
|
||||||
|
<view class="btn-box">
|
||||||
|
<view class="click-effect btn-item" @click="backspace" style="background: #ccc;">
|
||||||
|
<u-icon name="backspace" color="#333" size="70rpx"></u-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'keyword',
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
btnClick(e) {
|
||||||
|
this.$emit('change', e)
|
||||||
|
},
|
||||||
|
backspace() {
|
||||||
|
this.$emit('backspace')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReachBottom() { },
|
||||||
|
onPullDownRefresh() { },
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.btn-box {
|
||||||
|
width: 33.33%;
|
||||||
|
padding: 10rpx;
|
||||||
|
}
|
||||||
|
.btn-item {
|
||||||
|
background: #FFF;
|
||||||
|
line-height: 110rpx;
|
||||||
|
height: 110rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 46rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.click-effect {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.click-effect:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: transform 0.15s, opacity 0.15s, background-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.click-effect:active:after {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate(-50%, -50%) scale(2);
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tabbar-page page-box" >
|
||||||
|
<view style="position: relative;display: flex;align-items: center;height: 100vh;">
|
||||||
|
<view style="display: flex;flex-direction: column;align-items: center;width: 100%;">
|
||||||
|
<view>
|
||||||
|
<image style="width: 200rpx;height: 200rpx;border-radius: 20rpx;" :src="storeDetail.logo_url"></image>
|
||||||
|
</view>
|
||||||
|
<view style="margin-top: 20rpx;">
|
||||||
|
{{ storeDetail.name }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import theTabBar from "@/components/the/the-tabbar";
|
||||||
|
import logins from '@/components/login/logins.vue'
|
||||||
|
export default {
|
||||||
|
mixins: [],
|
||||||
|
components: {
|
||||||
|
theTabBar,
|
||||||
|
logins
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
card: null,
|
||||||
|
vip_user: null,
|
||||||
|
from: {
|
||||||
|
sex: `MALE`
|
||||||
|
},
|
||||||
|
show_birthday: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(opt) {
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
async onPullDownRefresh() {},
|
||||||
|
//发送给朋友
|
||||||
|
onShareAppMessage(res) {},
|
||||||
|
onReachBottom() {},
|
||||||
|
onPullDownRefresh() {},
|
||||||
|
methods: {
|
||||||
|
async getData() {
|
||||||
|
try {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '加载中'
|
||||||
|
})
|
||||||
|
const res = await this.$api.common.getAliCard();
|
||||||
|
uni.hideLoading()
|
||||||
|
this.card = res.data.card
|
||||||
|
if (res.data.card && res.data.card.create_user_link) {
|
||||||
|
location.href = res.data.card.create_user_link
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// throw new Error(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// #ifndef H5
|
||||||
|
.content {
|
||||||
|
padding-top: calc(44px + var(--status-bar-height));
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
</style>
|
||||||
@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<view class="tabbar-page page-box" style="display: flex;align-items: center;justify-content: center;height: 100vh;">
|
||||||
|
<template v-if="code == 0">
|
||||||
|
<view>
|
||||||
|
<u-icon name="checkbox-mark" color="#19be6b" size="100"></u-icon>
|
||||||
|
<view style="text-align: center;font-size: 46rpx;color: #000;margin-top: 40rpx;">
|
||||||
|
开卡成功
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-if="code == 1">
|
||||||
|
<view>
|
||||||
|
<u-icon name="close-circle-fill" color="#fa3534" size="100"></u-icon>
|
||||||
|
<view style="text-align: center;font-size: 46rpx;color: red;margin-top: 40rpx;">
|
||||||
|
开卡失败
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import theTabBar from "@/components/the/the-tabbar";
|
||||||
|
import logins from '@/components/login/logins.vue'
|
||||||
|
export default {
|
||||||
|
mixins: [],
|
||||||
|
components: {
|
||||||
|
theTabBar,
|
||||||
|
logins
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
code: -1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(opt) {
|
||||||
|
this.code = opt.code
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
async onPullDownRefresh() {},
|
||||||
|
//发送给朋友
|
||||||
|
onShareAppMessage(res) {},
|
||||||
|
onReachBottom() {},
|
||||||
|
onPullDownRefresh() {},
|
||||||
|
methods: {
|
||||||
|
isLogin() {
|
||||||
|
|
||||||
|
},
|
||||||
|
async getData() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
// #ifndef H5
|
||||||
|
.content {
|
||||||
|
padding-top: calc(44px + var(--status-bar-height));
|
||||||
|
}
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
</style>
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<u-popup :show="show" @close="close" mode="center" round="20rpx" :closeable="true">
|
||||||
|
<view style="width: 600rpx;height: 60vh;background: #FFF;border-radius: 20rpx;overflow: hidden;overflow-y: scroll;">
|
||||||
|
<view v-if="goods && goods.id > 0">
|
||||||
|
<pageBanner :goods="goods"></pageBanner>
|
||||||
|
<pageInfo :goods="goods"></pageInfo>
|
||||||
|
<view class="Pbox" style="margin-top: 20rpx;">
|
||||||
|
<pageDetail v-if="goods" class="mb" :goods="goods"></pageDetail>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view v-else style="display: flex;align-items: center;justify-content: center;height: 100%;">
|
||||||
|
<u-loading-icon></u-loading-icon>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</u-popup>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import pageBanner from "./page-banner";
|
||||||
|
import pageInfo from "./page-info.vue";
|
||||||
|
import pageDetail from "./page-detail";
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
goods_id: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
pageBanner,
|
||||||
|
pageInfo,
|
||||||
|
pageDetail
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
goods: null,
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getGoods()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
close() {
|
||||||
|
this.$emit('close')
|
||||||
|
},
|
||||||
|
// 选择规格
|
||||||
|
async getGoods() {
|
||||||
|
this.goods = {};
|
||||||
|
const res = await this.$api.common.goodsInfo({
|
||||||
|
id: this.goods_id
|
||||||
|
});
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.goods = res.data
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: res.msg
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,188 @@
|
|||||||
|
<template>
|
||||||
|
<view class="banner" v-if="goods && goods.goods_pic && goods.goods_pic.length">
|
||||||
|
<swiper :current="current" :indicator-dots="false" @change="(e) => (current = e.detail.current)">
|
||||||
|
<template v-if="goods.video_url">
|
||||||
|
<swiper-item>
|
||||||
|
<video id="myVideo" :autoplay="true" :muted="true" :show-mute-btn="true" class="banner-image" :src="goods.video_url"></video>
|
||||||
|
</swiper-item>
|
||||||
|
</template>
|
||||||
|
<swiper-item v-for="(item, index) of goods.goods_pic" :key="index">
|
||||||
|
<image class="banner-image" :src="item.pic_url" mode="aspectFill"></image>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
<div class="banner-info-1" :class="goods.video_url && current == 0 ? 'banner-info-top' : 'banner-info-2'">
|
||||||
|
<view>
|
||||||
|
<template v-if="goods.video_url">
|
||||||
|
<view @click="current = 0" class="banner-item" :class="current > 0 ? '' : 'active-banner'">
|
||||||
|
视频
|
||||||
|
</view>
|
||||||
|
<view @click="current = 1" class="banner-item" :class="current > 0 ? 'active-banner' : ''">
|
||||||
|
图集
|
||||||
|
<template v-if="current > 0">
|
||||||
|
{{ current }}/{{ goods.goods_pic && goods.goods_pic.length }}
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<view class="banner-item active-banner">
|
||||||
|
图集 {{ current + 1 }}/{{ goods.goods_pic && goods.goods_pic.length }}
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</div>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ["goods"],
|
||||||
|
|
||||||
|
data: () => {
|
||||||
|
return {
|
||||||
|
current: 0,
|
||||||
|
videoContext: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
getPrice() {
|
||||||
|
return (price = "0.00") => {
|
||||||
|
return price.split(".");
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// setTimeout(() => {
|
||||||
|
// this.videoContext = uni.createVideoContext('myVideo')
|
||||||
|
// }, 500)
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// current(value) {
|
||||||
|
// let videoContext = uni.createVideoContext('myVideo')
|
||||||
|
// console.log(videoContext, 'videoContext')
|
||||||
|
// videoContext.pause()
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
previewPics(current) {
|
||||||
|
let urls = this.goods.goods_pic.map((el) => el.pic_url);
|
||||||
|
uni.previewImage({
|
||||||
|
current,
|
||||||
|
urls,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.banner {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
swiper,
|
||||||
|
swiper-item,
|
||||||
|
.banner-image {
|
||||||
|
height: 500rpx;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-image {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.banner-info-1 {
|
||||||
|
|
||||||
|
}
|
||||||
|
.banner-info-2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 20rpx;
|
||||||
|
}
|
||||||
|
.banner-info-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
top: 20rpx;
|
||||||
|
}
|
||||||
|
.banner-info-1 > view {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
.banner-item {
|
||||||
|
padding: 4rpx 20rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
.active-banner {
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.banner-info {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
bottom: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 220rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 32px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 24rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-num {
|
||||||
|
bottom: 34rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 126rpx;
|
||||||
|
height: 38rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 32px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 22rpx;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-det {
|
||||||
|
padding-right: 15rpx;
|
||||||
|
font-size: 22rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// .banner-det {
|
||||||
|
// position: absolute;
|
||||||
|
// right: 0;
|
||||||
|
// left: 0;
|
||||||
|
// margin: 0 auto;
|
||||||
|
// bottom: 34rpx;
|
||||||
|
// display: flex;
|
||||||
|
// align-items: center;
|
||||||
|
// justify-content: center;
|
||||||
|
// width: 252rpx;
|
||||||
|
// height: 38rpx;
|
||||||
|
// background: rgba(0, 0, 0, 0.3);
|
||||||
|
// border-radius: 32px;
|
||||||
|
// color: #fff;
|
||||||
|
// font-size: 24rpx;
|
||||||
|
// }
|
||||||
|
</style>
|
||||||
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<view class="details">
|
||||||
|
<!-- <view class="title">
|
||||||
|
<view class="line"></view>
|
||||||
|
<view class="con">详情</view>
|
||||||
|
<view class="line"></view>
|
||||||
|
</view> -->
|
||||||
|
<u-transition show>
|
||||||
|
<u-parse :content="detail"></u-parse>
|
||||||
|
</u-transition>
|
||||||
|
<!-- #ifdef MP-ALIPAY -->
|
||||||
|
<view class="line-box"></view>
|
||||||
|
<!-- #endif -->
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: ["goods"],
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
detail: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.detail = this.getDetail()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getDetail() {
|
||||||
|
return this.formatRichText(this.goods.detail || "");
|
||||||
|
},
|
||||||
|
formatRichText: (html) => {
|
||||||
|
let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
|
||||||
|
match = match
|
||||||
|
.replace(/style="[^"]+"/gi, "")
|
||||||
|
.replace(/style='[^']+'/gi, "");
|
||||||
|
match = match
|
||||||
|
.replace(/width="[^"]+"/gi, "")
|
||||||
|
.replace(/width='[^']+'/gi, "");
|
||||||
|
match = match
|
||||||
|
.replace(/height="[^"]+"/gi, "")
|
||||||
|
.replace(/height='[^']+'/gi, "");
|
||||||
|
return match;
|
||||||
|
});
|
||||||
|
newContent = newContent.replace(
|
||||||
|
/style="[^"]+"/gi,
|
||||||
|
function(match, capture) {
|
||||||
|
match = match
|
||||||
|
.replace(/width:[^;]+;/gi, "max-width:100%;")
|
||||||
|
.replace(/width:[^;]+;/gi, "max-width:100%;");
|
||||||
|
return match;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
newContent = newContent.replace(/<br[^>]*\/>/gi, "");
|
||||||
|
newContent = newContent.replace(
|
||||||
|
/\<img/gi,
|
||||||
|
'<img style="display:block;max-width:100%;height:auto"'
|
||||||
|
);
|
||||||
|
return newContent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.details {
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 90rpx;
|
||||||
|
background: #f6f6f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
position: relative;
|
||||||
|
padding: 0 30rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 2rpx;
|
||||||
|
background: #cecece;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line-box {
|
||||||
|
height: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,244 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<!-- <view @click="check()">
|
||||||
|
校验
|
||||||
|
</view> -->
|
||||||
|
<view v-for="(item, index) of list" :key="index">
|
||||||
|
<view class="m-tit" :class="{ stars: item.is_nes == 1 }">{{ item.name }}</view>
|
||||||
|
<view class="skuList">
|
||||||
|
<view class="item"
|
||||||
|
:class="{ checked: selectThe[item.id] && selectThe[item.id].includes(JSON.stringify(e)) }"
|
||||||
|
@click="checked(item.id, e, item.is_mul)" v-for="e of item.group">
|
||||||
|
{{ e.name }}
|
||||||
|
|
||||||
|
<view class="price" v-if="e.price">
|
||||||
|
{{ e.price }} 元
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
small_goods: {
|
||||||
|
type: Array,
|
||||||
|
default: () => ([])
|
||||||
|
},
|
||||||
|
smallPrice: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selectThe: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
selectThe() {
|
||||||
|
this.$emit("update:smallPrice", Object.values(this.selectThe).flat(Infinity).reduce((price, item) => {
|
||||||
|
return price += JSON.parse(item).price
|
||||||
|
}, 0))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
selectIDS() {
|
||||||
|
|
||||||
|
function fromEntries(entries) {
|
||||||
|
if (!Array.isArray(entries)) {
|
||||||
|
throw new TypeError('Argument should be an array');
|
||||||
|
}
|
||||||
|
|
||||||
|
var result = {};
|
||||||
|
|
||||||
|
for (var i = 0; i < entries.length; i++) {
|
||||||
|
var entry = entries[i];
|
||||||
|
|
||||||
|
if (!Array.isArray(entry) || entry.length !== 2) {
|
||||||
|
throw new TypeError('Each entry should be an array with two elements');
|
||||||
|
}
|
||||||
|
|
||||||
|
var key = entry[0];
|
||||||
|
var value = entry[1];
|
||||||
|
|
||||||
|
result[key] = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
|
||||||
|
let arr = []
|
||||||
|
arr = fromEntries(Object.entries(this.selectThe).filter(([key, val]) => Boolean(val)))
|
||||||
|
|
||||||
|
return Object.values(arr).map(({
|
||||||
|
id
|
||||||
|
}) => id)
|
||||||
|
},
|
||||||
|
selectPrice() {
|
||||||
|
let price = 0
|
||||||
|
|
||||||
|
for (const smallMaterial of Object.values(this.selectThe)) {
|
||||||
|
if (!smallMaterial) continue
|
||||||
|
price += smallMaterial.price
|
||||||
|
}
|
||||||
|
|
||||||
|
return price
|
||||||
|
},
|
||||||
|
list() {
|
||||||
|
return this.small_goods.map(item => ({
|
||||||
|
...item,
|
||||||
|
group: JSON.parse(item.group)
|
||||||
|
}))
|
||||||
|
},
|
||||||
|
dataMap() {
|
||||||
|
return this.small_goods.reduce((obj, item) => {
|
||||||
|
obj[item.id] = item
|
||||||
|
return obj
|
||||||
|
}, {})
|
||||||
|
},
|
||||||
|
priceAll() {
|
||||||
|
this.$emit("update:smallPrice", Object.values(this.selectThe).flat(Infinity).reduce((price, item) => {
|
||||||
|
return price += JSON.parse(item).price
|
||||||
|
}, 0))
|
||||||
|
return Object.values(this.selectThe).flat(Infinity).reduce((price, item) => {
|
||||||
|
return price += JSON.parse(item).price
|
||||||
|
}, 0)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
checked(id, e, is_mul) {
|
||||||
|
if (this.selectThe[id] && this.selectThe[id].includes(JSON.stringify(e))) {
|
||||||
|
const index = this.selectThe[id].findIndex(item => item === JSON.stringify(e))
|
||||||
|
this.selectThe[id].splice(index, 1)
|
||||||
|
} else {
|
||||||
|
// 单选
|
||||||
|
if (is_mul != 1) {
|
||||||
|
console.log("单选");
|
||||||
|
this.selectThe[id] = []
|
||||||
|
console.log(this.selectThe[id]);
|
||||||
|
} else {
|
||||||
|
this.selectThe[id] = this.selectThe[id] || []
|
||||||
|
}
|
||||||
|
this.selectThe[id].push(JSON.stringify(e))
|
||||||
|
console.log(this.selectThe[id]);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selectThe = JSON.parse(JSON.stringify(this.selectThe))
|
||||||
|
},
|
||||||
|
check() {
|
||||||
|
console.log(Object.entries(this.dataMap));
|
||||||
|
for (const [key, val] of Object.entries(this.dataMap)) {
|
||||||
|
if (val.is_nes == 1) {
|
||||||
|
if (Array.isArray(this.selectThe[key])) {
|
||||||
|
if (this.selectThe[key].length === 0) {
|
||||||
|
console.log("请选择" + val.name);
|
||||||
|
uni.$u.toast("请选择" + val.name);
|
||||||
|
|
||||||
|
this.$emit("select", [null, false])
|
||||||
|
return [null, false]
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.log("请选择" + val.name);
|
||||||
|
uni.$u.toast("请选择" + val.name);
|
||||||
|
this.$emit("select", [null, false])
|
||||||
|
return [null, false]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
this.$emit("select", [this.selectThe, false])
|
||||||
|
const result = Object.entries(this.selectThe).reduce((arr, [key, val], index) => {
|
||||||
|
arr[index] = {
|
||||||
|
"id": key,
|
||||||
|
"name": this.dataMap[key].name,
|
||||||
|
"group_item": val.map(item => JSON.parse(item))
|
||||||
|
}
|
||||||
|
|
||||||
|
return arr
|
||||||
|
}, [])
|
||||||
|
return [result, true]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.m-tit {
|
||||||
|
padding: 30rpx 0 0;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #262626;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stars {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "*";
|
||||||
|
color: #f0250e;
|
||||||
|
|
||||||
|
padding-left: 4px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.skuList {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
position: relative;
|
||||||
|
margin: 24rpx 24rpx 0 0;
|
||||||
|
padding: 14rpx 24rpx;
|
||||||
|
|
||||||
|
border-radius: 100rpx;
|
||||||
|
background: #f2f1f2;
|
||||||
|
color: #262626;
|
||||||
|
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.price {
|
||||||
|
// background-color: red;
|
||||||
|
margin-left: 12rpx;
|
||||||
|
border-left: 2px solid #ffffff;
|
||||||
|
|
||||||
|
// margin: -14rpx -18rpx;
|
||||||
|
padding-left: 12rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.disabled {
|
||||||
|
color: #8c8c8c;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: 20rpx;
|
||||||
|
top: 50%;
|
||||||
|
right: 20rpx;
|
||||||
|
height: 1px;
|
||||||
|
background: #8c8c8c;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.checked {
|
||||||
|
background: #fbeceb;
|
||||||
|
color: #f0250e;
|
||||||
|
|
||||||
|
// .price {
|
||||||
|
// background-color: red;
|
||||||
|
// padding: 14rpx 28rpx;
|
||||||
|
// margin-left: 10px;
|
||||||
|
// color: white;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Loading…
Reference in New Issue