402 lines
8.9 KiB
Vue
402 lines
8.9 KiB
Vue
<template>
|
||
<view>
|
||
<up-popup :show="sku_noe" :round="10" @close="close" :safe-area-inset-bottom="true" mode="bottom">
|
||
<div>
|
||
<div class="head">
|
||
<div class="imgs" @click="preViewImg(chooseItem.face_img)">
|
||
<image :src="chooseItem.face_img" alt="" />
|
||
</div>
|
||
<div class="tites">
|
||
<div class="jiage">
|
||
<text class="icon">￥</text>
|
||
<text class="number">{{chooseItem.price}}</text>
|
||
</div>
|
||
<div class="szie">
|
||
剩余：<text>{{chooseItem.stock <= 0 ? 0 : chooseItem.stock}}</text>件
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stepper">
|
||
<div>购买数量</div>
|
||
<div>
|
||
<up-number-box
|
||
v-model="num"
|
||
disabledInput
|
||
bgColor="#f2f3f5"
|
||
:longPress="false"
|
||
@change="changeNum($event)">
|
||
</up-number-box>
|
||
</div>
|
||
</div>
|
||
|
||
<template v-if="!isNoStart">
|
||
<div class="foot_two" v-if="type == 0">
|
||
<div class="car" :class="chooseItem.stock <= 0 ? 'jin1' : ''" @click="chooseItem.stock > 0 ? hanlecart():''">
|
||
加入购物车</div>
|
||
<div class="group" :class="chooseItem.stock <= 0 ? 'jin' : ''" @click="chooseItem.stock > 0 ? hanleBuy() : ''">立即购买</div>
|
||
<!-- <button v-else class="group" :class="chooseItem.stock <= 0 ? 'jin' : ''" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber($event)">立即购买</button> -->
|
||
</div>
|
||
<div v-else class="foot_noe">
|
||
<div class="group" v-if="type == 1" :class="chooseItem.stock <= 0 ? 'jin':''"
|
||
@click="chooseItem.stock > 0 ? hanlecart() : ''">加入购物车</div>
|
||
<div class="group" v-else-if="type == 2" :class="chooseItem.stock <= 0 ? 'jin' : ''"
|
||
@click="chooseItem.stock > 0 ? 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 { post } from '@/api/request.js'
|
||
import { showToast, getUserPhone } from '@/components/common.js'
|
||
import { Style } from '@/utils/list.js'
|
||
|
||
export default {
|
||
props: {
|
||
sku_noe: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
type: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
source: {
|
||
type: String
|
||
},
|
||
SKU: {
|
||
type: Object,
|
||
default: () => {},
|
||
}
|
||
},
|
||
setup(props, { emit }) {
|
||
const data = reactive({
|
||
chooseItem: {}, // 选中规格
|
||
num: 1,
|
||
shop_goods_id: '',
|
||
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'),
|
||
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor
|
||
})
|
||
|
||
watch(
|
||
() => props.SKU,
|
||
(newProps) => {
|
||
data.chooseItem = newProps
|
||
data.shop_goods_id = newProps.id
|
||
}
|
||
)
|
||
|
||
watch(() => props.sku_one, (sku_one) => {
|
||
if (sku_one && 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') {
|
||
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) {
|
||
}
|
||
})
|
||
}
|
||
}
|
||
//清理数据
|
||
function close() {
|
||
data.num = 1
|
||
emit('close1', 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
|
||
})
|
||
}
|
||
|
||
const addToCart = () => {
|
||
post('/api/v1/carts', {
|
||
shop_goods_id: data.shop_goods_id,
|
||
shop_goods_sku_id: 0,
|
||
num: data.num,
|
||
shop_group_goods_id: 0,
|
||
}).then((res) => {
|
||
showToast('已加入购物车')
|
||
emit('getnum', true)
|
||
close()
|
||
}).catch((error) => {
|
||
showToast(error)
|
||
})
|
||
}
|
||
const toPay = () => {
|
||
const goods = [{
|
||
shop_goods_id: data.shop_goods_id,
|
||
shop_goods_sku_id: 0,
|
||
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 () => {
|
||
addToCart()
|
||
|
||
}
|
||
const hanleBuy = async () => {
|
||
toPay()
|
||
}
|
||
|
||
// 商品数量
|
||
function changeNum(e) {
|
||
data.num = e.value
|
||
}
|
||
// 授权手机号码
|
||
async function getPhoneNumber(e) {
|
||
if(e.detail.errMsg == 'getPhoneNumber:ok') {
|
||
await getUserPhone(e.detail).then((res) => {
|
||
data.is_authorized = 1
|
||
})
|
||
}
|
||
}
|
||
|
||
return {
|
||
...toRefs(data),
|
||
changeNum,
|
||
close,
|
||
preViewImg,
|
||
hanlecart,
|
||
hanleBuy,
|
||
remindUser,
|
||
setTimeIng,
|
||
getPhoneNumber
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.jin {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.jin1 {
|
||
border: 1px solid #aaa !important;
|
||
color: #aaa !important;
|
||
}
|
||
|
||
.foot_noe {
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
.group {
|
||
text-align: center;
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background: v-bind('Color');
|
||
color: #fff;
|
||
border-radius: 41rpx;
|
||
font-size: inherit;
|
||
}
|
||
}
|
||
|
||
.foot_two {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding: 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;
|
||
font-size: inherit;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.car {
|
||
width: 50%;
|
||
height: 70rpx;
|
||
border: 1px solid v-bind('Color');
|
||
color: v-bind('Color');
|
||
border-radius: 70rpx 0 0 70rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: 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;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|