578 lines
14 KiB
Vue
578 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<up-popup :show="sku_two" :round="10" @close="close" :safe-area-inset-bottom="true" mode="bottom" :lock-scroll="true" closeable>
|
||
<div class="whole">
|
||
<div class="head">
|
||
<div class="imgs" @click="preViewImg(initImg || SKU.face_img)">
|
||
<image :src="img_200 || SKU.face_img" alt="" :style="{width: imgWidth + 'rpx', height: imgWidth + 'rpx'}" />
|
||
</div>
|
||
<div class="tites">
|
||
<div class="jiage">
|
||
<text class="icon">￥</text>
|
||
<text class="number">{{chooseItem.price}}</text>
|
||
</div>
|
||
<div v-if="imgWidth == 200" class="szie">剩余：<text>{{chooseItem.stock <= 0 ? 0 : chooseItem.stock}}</text>件</div>
|
||
<div class="szie">选择：<text>{{skuName.join('-')}}</text></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 规格选项 -->
|
||
<view class="sku-list">
|
||
<view class="sku-list-item" v-for="(item, index) in specsList" :key="item.spec_id">
|
||
<view class="sku-list-item-name">{{item.spec_name }}</view>
|
||
<view class="sku-list-item-tag">
|
||
<view class="tag"
|
||
v-for="(it, i) in item.value"
|
||
:key="it.id"
|
||
@click="!it.show ? chooseSku(it, index, i) : ''"
|
||
:class="choose['v'+ (index + 1) +'_id'] == it.id ? 'choose' : it.show ? 'box' : '' ">
|
||
<image v-if="it.img" :src="it.img"></image>
|
||
<text>{{it.value}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<div class="stepper">
|
||
<div>购买数量</div>
|
||
<div>
|
||
<up-number-box
|
||
v-model="chooseItem.num"
|
||
:max="chooseItem.stock <= 0 ? 0 : chooseItem.stock"
|
||
disabledInput
|
||
bgColor="#f2f3f5"
|
||
:longPress="false"
|
||
@change="changeNum($event)">
|
||
</up-number-box>
|
||
</div>
|
||
</div>
|
||
|
||
<template v-if="!isNoStart">
|
||
<div v-if="type == 0" class="foot_two">
|
||
<div class="car" @click="hanlecart">加入购物车</div>
|
||
<div class="group" @click="hanleBuy">立即购买</div>
|
||
</div>
|
||
<div v-else class="foot_noe">
|
||
<div v-if="type == 1" class="group" @click="hanlecart">加入购物车</div>
|
||
<div v-else-if="type == 2" class="group" @click="hanleBuy">立即购买</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template v-else>
|
||
<view class="remind" :class="remind ? 'disabled' : ''" @click="remindUser">
|
||
<view v-if="!remind" class="topone">预约提醒</view>
|
||
<view v-else class="topone">已提醒</view>
|
||
<view class="bot">距开始{{days}}天{{hours}}：{{mins}}：{{seconds}}</view>
|
||
</view>
|
||
</template>
|
||
|
||
</div>
|
||
</up-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { ref, reactive, toRefs, watch } from 'vue'
|
||
import { get, post } from '@/api/request.js'
|
||
import { showToast, getUserPhone } from '@/components/common.js'
|
||
import { Style } from '@/utils/list.js'
|
||
|
||
export default {
|
||
props: {
|
||
sku_two: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
type: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
source: {
|
||
type: String
|
||
},
|
||
SKU: {
|
||
type: Object,
|
||
default: () => {}
|
||
}
|
||
},
|
||
setup(props, { emit }) {
|
||
const data = reactive({
|
||
specsList: [], // 重组规格数组
|
||
chooseItem: {
|
||
price: 0
|
||
}, // 选中规格
|
||
choose: {}, // 选中规格值id
|
||
chooseIndex: [], // 选中规格值index
|
||
skuName: [], // 规格名
|
||
sku_skuInfo: '',
|
||
initImg: '', // 图片选择显示
|
||
img_200: '',
|
||
shop_goods_id: 0,
|
||
shop_goods_sku_id: 0,
|
||
num: 1,
|
||
images: [],
|
||
imgWidth: 200,
|
||
remind: false,
|
||
isNoStart: false,
|
||
days: '00',
|
||
hours: '00',
|
||
mins: '00',
|
||
seconds: '00',
|
||
downFn: null,
|
||
is_authorized: uni.getStorageSync('is_authorized'),
|
||
Color: uni.getStorageSync('theme_color'),
|
||
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
||
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor
|
||
})
|
||
|
||
// 规格选择-主要逻辑
|
||
function chooseSku(curObj, index, i_index) {
|
||
if (curObj.img) {
|
||
data.initImg = curObj.img_800
|
||
data.img_200 = curObj.img
|
||
}
|
||
data.choose['v' + (index + 1) + '_id'] = data.specsList[index].value[i_index].id
|
||
data.skuName[index] = data.specsList[index].value[i_index].value
|
||
data.chooseIndex.push(index)
|
||
data.chooseIndex = Array.from(new Set(data.chooseIndex))
|
||
if(data.specsList.length - Object.keys(data.choose).length == 1) {
|
||
// 如果只有一个规格类未选中，则去判断未选中的这一项是否可选
|
||
data.specsList.forEach((req, i) => {
|
||
if(data.chooseIndex.indexOf(i) == -1) {
|
||
req.value.forEach((rej, j) => {
|
||
data.sku_skuInfo.forEach((ress, m) => {
|
||
let flag = [rej.id === ress['v'+(i+1)+'_id']]
|
||
for (const key in data.choose) {
|
||
flag.push(ress[key] == data.choose[key])
|
||
}
|
||
if(flag.findIndex(target=>target===false)==-1){
|
||
if(ress.stock <= 0 || ress.price == 0){
|
||
rej.show = true
|
||
} else {
|
||
rej.show = false
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
})
|
||
} else if(data.specsList.length == Object.keys(data.choose).length) {
|
||
for (const key in data.choose) {
|
||
let i = parseInt(key.substr(1, 1))
|
||
data.specsList[i-1].value.forEach((req) => {
|
||
data.sku_skuInfo.forEach((ress, m) => {
|
||
let flag = [req.id == ress['v'+i+'_id']]
|
||
for (const k in data.choose) {
|
||
let j = parseInt(k.substr(1, 1))
|
||
if(i != j) {
|
||
flag.push(ress[k] == data.choose[k])
|
||
}
|
||
}
|
||
if(flag.findIndex(target=>target===false)==-1){
|
||
if((ress.stock <= 0 || ress.price == 0)){
|
||
req.show = true
|
||
} else {
|
||
req.show = false
|
||
}
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
const hanlepanduan = () => {
|
||
if (data.chooseIndex.length != data.specsList.length) {
|
||
showToast('请选择完整规格')
|
||
return false
|
||
} else if (!data.chooseItem.num || data.chooseItem.num == 0) {
|
||
showToast('请添加商品数量')
|
||
return false
|
||
}
|
||
}
|
||
const addToCart = () => {
|
||
post('/api/v1/carts', {
|
||
shop_goods_id: data.chooseItem.shop_goods_id || data.shop_goods_id,
|
||
shop_goods_sku_id: data.chooseItem.id || data.shop_goods_sku_id,
|
||
num: data.chooseItem.num || data.num,
|
||
shop_group_goods_id: 0
|
||
}).then((res) => {
|
||
showToast('已加入购物车')
|
||
emit('getnum', data.skuName.join('-'), true)
|
||
close()
|
||
}).catch((error) => {
|
||
showToast(error)
|
||
})
|
||
}
|
||
|
||
const toPay = () => {
|
||
const goods = [
|
||
{
|
||
shop_goods_id: data.chooseItem.shop_goods_id || data.shop_goods_id,
|
||
shop_goods_sku_id: data.chooseItem.id || data.shop_goods_sku_id,
|
||
num: data.chooseItem.num || data.num,
|
||
shop_group_goods_id: 0
|
||
}
|
||
]
|
||
uni.setStorageSync('shopGoods', goods)
|
||
uni.navigateTo({
|
||
url: '/pages/pay/index?type=0&source=' + props.source
|
||
})
|
||
close()
|
||
}
|
||
const hanlecart = async () => {
|
||
if (hanlepanduan() == false) {
|
||
return
|
||
} else {
|
||
addToCart()
|
||
}
|
||
}
|
||
const hanleBuy = async () => {
|
||
if (hanlepanduan() == false) {
|
||
return
|
||
} else {
|
||
toPay()
|
||
}
|
||
}
|
||
//清理数据
|
||
function close() {
|
||
data.chooseItem.num = 1
|
||
data.num = 1
|
||
emit('close', false)
|
||
}
|
||
|
||
// 预览图片
|
||
const preViewImg = (img) => {
|
||
let img_preview_suffix = uni.getStorageSync('img_preview_suffix') || ''
|
||
let imurl = img + img_preview_suffix
|
||
if(img.indexOf('.gif') >= 0 || img.indexOf('.GIF') >= 0) {
|
||
imurl = img
|
||
}
|
||
uni.previewImage({
|
||
urls: [imurl],
|
||
current: 0
|
||
})
|
||
}
|
||
|
||
// 商品数量
|
||
function changeNum(e) {
|
||
data.chooseItem.num = e.value
|
||
data.num = e.value
|
||
}
|
||
watch(() => props.SKU, (newProps) => {
|
||
data.specsList = newProps.specs
|
||
data.sku_skuInfo = newProps.skus
|
||
data.chooseItem = newProps.skus[0]
|
||
// 在仅有一个规格的时候设置状态
|
||
if(data.specsList.length == 1) {
|
||
data.specsList[0].value.forEach((req, i) => {
|
||
data.sku_skuInfo.forEach((res, j) => {
|
||
if(req.id == res.v1_id && (res.price == 0 || res.stock <= 0)){
|
||
req.show = true
|
||
}
|
||
})
|
||
})
|
||
}
|
||
data.images = []
|
||
data.specsList[0].value.forEach((it) => {
|
||
if(it.img_800){
|
||
data.images.push(it.img_800)
|
||
}
|
||
})
|
||
})
|
||
|
||
watch(() => props.sku_two, (sku_two) => {
|
||
if(sku_two && props.SKU.isNoStart == 1) {
|
||
data.isNoStart = true
|
||
data.remind = props.SKU.remind
|
||
let st = new Date(props.SKU.sold_start_time.replace(/-/g, '/'))
|
||
let nt = new Date().getTime()
|
||
if(nt - st < 0) {
|
||
setTimeIng(st - nt)
|
||
} else {
|
||
data.isNoStart = false
|
||
}
|
||
}
|
||
})
|
||
|
||
function setTimeIng(backTime) {
|
||
data.downFn = setInterval(() => {
|
||
var d = Math.floor(backTime / (1000 * 60 * 60 * 24)); //计算天数
|
||
var h = Math.floor(backTime / (1000 * 60 * 60) % 24); //计算小时数
|
||
var m = Math.floor(backTime / (1000 * 60) % 60); //计算分钟数
|
||
var s = Math.floor(backTime / 1000 % 60); //计算秒数
|
||
if (backTime < 0) {
|
||
data.days = '00'
|
||
data.hours = '00'
|
||
data.mins = '00'
|
||
data.seconds = '00'
|
||
data.isNoStart = false
|
||
clearInterval(data.downFn)
|
||
} else {
|
||
data.days = d > 9 ? d : '0' + d
|
||
data.hours = h > 9 ? h : '0' + h
|
||
data.mins = m > 9 ? m : '0' + m
|
||
data.seconds = s > 9 ? s : '0' + s
|
||
}
|
||
backTime -= 1000
|
||
}, 1000)
|
||
}
|
||
|
||
function remindUser() {
|
||
if(!data.remind){
|
||
const tmplId = 'cnyYrkMecdOwoWdXW4DQgVa8xaB9_YdzbLbLeUGWMjE' // 这里填写你的模板ID
|
||
uni.requestSubscribeMessage({
|
||
tmplIds: [tmplId],
|
||
success(res) {
|
||
if (res[tmplId] === 'accept') {
|
||
post(`/api/v1/goods/remind/${props.SKU.id}`, {type: 0}).then((res) => {
|
||
uni.showToast({
|
||
title: '开启活动提醒，活动前3分钟通知你',
|
||
icon: 'none',
|
||
})
|
||
data.remind = true
|
||
emit('remind', true)
|
||
})
|
||
} else if (res[tmplId] == 'reject') {
|
||
//引导用户，手动引导用户点击按钮，去设置页开启，## Modals是自定义组件
|
||
uni.showModal({
|
||
title: '订阅消息',
|
||
content: '您当前拒绝接受消息通知，是否去开启',
|
||
confirmText: '开启授权',
|
||
confirmColor: '#345391',
|
||
cancelText: '仍然拒绝',
|
||
cancelColor: '#999999',
|
||
success(res) {
|
||
if (res.confirm) {
|
||
uni.openSetting({
|
||
success(res) {
|
||
},
|
||
fail(err) {
|
||
}
|
||
})
|
||
} else if (res.cancel) {
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
fail(res) {
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
// 授权手机号码
|
||
async function getPhoneNumber(e) {
|
||
if(e.detail.errMsg == 'getPhoneNumber:ok') {
|
||
await getUserPhone(e.detail).then((res) => {
|
||
data.is_authorized = 1
|
||
})
|
||
}
|
||
}
|
||
|
||
watch(() => data.choose, (newChoose) => {
|
||
// 判断选择规格值是否完整
|
||
if (Object.keys(newChoose).length != data.specsList.length) {
|
||
return
|
||
}
|
||
// 对比选中项
|
||
props.SKU.skus.forEach((sku, s_index) => {
|
||
let num = data.chooseItem.num
|
||
if (
|
||
sku.v1_id == newChoose.v1_id &&
|
||
sku.v2_id == newChoose.v2_id &&
|
||
sku.v3_id == newChoose.v3_id &&
|
||
sku.v4_id == newChoose.v4_id
|
||
) {
|
||
data.chooseItem = { ...sku }
|
||
if (num > 0) {
|
||
data.chooseItem.num = num < sku.stock ? num : sku.stock
|
||
} else if (sku.stock > 0) {
|
||
data.chooseItem.num = 1
|
||
} else {
|
||
data.chooseItem.num = 0
|
||
}
|
||
if (sku.pic_url === 'undefined') {
|
||
data.chooseItem.pic_url = props.skuInfo.face_img
|
||
}
|
||
}
|
||
})
|
||
},
|
||
{ deep: true }
|
||
)
|
||
|
||
return {
|
||
...toRefs(data),
|
||
changeNum,
|
||
close,
|
||
preViewImg,
|
||
chooseSku,
|
||
hanleBuy,
|
||
hanlecart,
|
||
remindUser,
|
||
setTimeIng,
|
||
getPhoneNumber
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.whole{
|
||
position: relative;
|
||
}
|
||
.sku-list-item {
|
||
margin-top: 20rpx;
|
||
}
|
||
.box {
|
||
opacity: 0.35;
|
||
}
|
||
.sku-list {
|
||
padding: 0 30rpx 30rpx 30rpx;
|
||
border-bottom: 2rpx solid #dbdbdb;
|
||
overflow-y: auto;
|
||
height: 500rpx;
|
||
box-sizing: border-box;
|
||
.sku-list-item {
|
||
.sku-list-item--name {
|
||
font-size: 26rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.sku-list-item-tag {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
font-size: 24rpx;
|
||
}
|
||
.tag {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #000;
|
||
background-color: #f4f4f4;
|
||
margin-right: 22rpx;
|
||
margin-top: 20rpx;
|
||
padding: 10rpx 18rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 6rpx;
|
||
image {
|
||
width: 35rpx;
|
||
height: 35rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
.choose {
|
||
background-color: v-bind('bgColor');
|
||
color: v-bind('Color');
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.foot_noe {
|
||
padding: 20rpx;
|
||
.group {
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: v-bind('Color');
|
||
color: #fff;
|
||
border-radius: 41rpx;
|
||
font-size: inherit;
|
||
box-sizing: content-box;
|
||
}
|
||
}
|
||
.foot_two {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 0rpx 20rpx 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
.group {
|
||
width: 50%;
|
||
height: 70rpx;
|
||
background: v-bind('Color');
|
||
color: #fff;
|
||
border-radius: 0 70rpx 70rpx 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.car {
|
||
width: 50%;
|
||
height: 70rpx;
|
||
border: 1px solid v-bind('Color');
|
||
color: v-bind('Color');
|
||
border-radius: 70rpx 0 0 70rpx;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.remind{
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 80rpx;
|
||
border-radius: 80rpx;
|
||
background: #32C55A;
|
||
color: #fff;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 94%;
|
||
margin: 0 0 10rpx 3%;
|
||
&.disabled{
|
||
opacity: 0.7;
|
||
}
|
||
.topone{
|
||
font-size: 28rpx;
|
||
}
|
||
.bot{
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
.stepper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 35rpx 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.head {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #eee;
|
||
.imgs {
|
||
margin-right: 20rpx;
|
||
}
|
||
.tites {
|
||
.szie {
|
||
color: #676767;
|
||
font-size: 28rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
.jiage {
|
||
color: v-bind('priceColor');
|
||
.icon {
|
||
font-size: 28rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
.number {
|
||
font-size: 40rpx;
|
||
transition: all 0.3s;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style> |