298 lines
7.6 KiB
Vue
298 lines
7.6 KiB
Vue
|
<script setup>
|
||
|
|
// 引入
|
||
|
|
import { onShow,onLoad,onHide } from "@dcloudio/uni-app"
|
||
|
|
import {ref,onMounted,nextTick,reactive,watch} from "vue"
|
||
|
|
import myButton from "@/components/myButton.vue"
|
||
|
|
import { useStore } from '@/store'
|
||
|
|
import api from "@/api/index"
|
||
|
|
import goodsInfo from "@/components/goodsInfo.vue"
|
||
|
|
import emptyCard from "@/components/emptyCard.vue"
|
||
|
|
const store = useStore()
|
||
|
|
const props = defineProps(['coupon_show','coupon_list']);
|
||
|
|
const emits = defineEmits(['choosedOk'])
|
||
|
|
import utils from "@/utils/index.js"
|
||
|
|
onLoad((e) => {
|
||
|
|
styleObject.value.height = store.systemInfo.screenHeight/1.8+'px'
|
||
|
|
// console.log("组件:",props.goods_info)
|
||
|
|
// getList()
|
||
|
|
})
|
||
|
|
watch(
|
||
|
|
() => props.coupon_list,
|
||
|
|
(newVal, oldVal) => {
|
||
|
|
// info.value = newVal
|
||
|
|
list.value = newVal
|
||
|
|
console.log(newVal)
|
||
|
|
updateList()
|
||
|
|
}
|
||
|
|
)
|
||
|
|
watch(
|
||
|
|
()=>props.coupon_show,
|
||
|
|
(newVal, oldVal) => {
|
||
|
|
cart_popup.value.open('bottom')
|
||
|
|
})
|
||
|
|
//变量
|
||
|
|
const list = ref([])
|
||
|
|
const cart_popup = ref()
|
||
|
|
const styleObject = ref({
|
||
|
|
height: '0px',
|
||
|
|
})
|
||
|
|
const total_num = ref(1)
|
||
|
|
const current_ = ref(-1)
|
||
|
|
// 函数
|
||
|
|
function updateList(){
|
||
|
|
// console.log(list.value)
|
||
|
|
if(list.value && list.value.length>0) {
|
||
|
|
for(let item of list.value) {
|
||
|
|
// item.goods_image = item.goods.goods_image
|
||
|
|
// item.goods_name = item.goods.goods_name
|
||
|
|
// item.goods_id = item.goods.id
|
||
|
|
// item.sell_price = item.price * item.num
|
||
|
|
// item.single_price = item.price
|
||
|
|
// item.desc = item.spec.name+',￥'+item.spec.sell_price
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// async function getList() { // 获取购物车列表
|
||
|
|
// const res = await api.getCartList()
|
||
|
|
// if(res.code ===1) {
|
||
|
|
// list.value = res.data
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// function changeNumFunc(value){
|
||
|
|
// setTimeout(() => {
|
||
|
|
// // console.log(value,current_.value)
|
||
|
|
// if(value>0) {
|
||
|
|
// list.value[current_.value].num = value
|
||
|
|
// list.value[current_.value].sell_price = list.value[current_.value].single_price * value
|
||
|
|
// // list.value[current_.value].price = value
|
||
|
|
// // 修改订单
|
||
|
|
// emits('update_cart',[list.value[current_.value].id,list.value[current_.value].num])
|
||
|
|
// }
|
||
|
|
// else if(value<1) { // 删除购物车
|
||
|
|
// // total_num.value = 1
|
||
|
|
// emits('del_cart',[list.value[current_.value].id])
|
||
|
|
// }
|
||
|
|
// else{ // 超过库存
|
||
|
|
// }
|
||
|
|
// },0)
|
||
|
|
// }
|
||
|
|
// function lockItem(i) { // 锁定当前操作的索引
|
||
|
|
// current_.value = i
|
||
|
|
// }
|
||
|
|
async function toUseFunc(item,i) { // 选择优惠券
|
||
|
|
current_.value = i
|
||
|
|
// const res = await api.couponsCenterReceive({
|
||
|
|
// coupon_id:item.id
|
||
|
|
// })
|
||
|
|
// if(res.code === 1) {
|
||
|
|
// uni.showToast({
|
||
|
|
// title:"领取成功",
|
||
|
|
// icon:"success"
|
||
|
|
// })
|
||
|
|
// // getList()
|
||
|
|
// }
|
||
|
|
}
|
||
|
|
function ofunc() {
|
||
|
|
if(current_.value==-1) {
|
||
|
|
uni.showToast({
|
||
|
|
title:"请选择优惠券",
|
||
|
|
icon:"error"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
// console.log(list.value[current_.value])
|
||
|
|
cart_popup.value.close()
|
||
|
|
emits("choosedOk",list.value[current_.value])
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function timestampToDate(stamp) { // 时间戳转日期
|
||
|
|
var time = new Date(stamp);
|
||
|
|
var y = time.getFullYear();
|
||
|
|
var m = time.getMonth()+1;
|
||
|
|
var d = time.getDate();
|
||
|
|
const date = `${y}-${m}-${d}`
|
||
|
|
return date
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<template>
|
||
|
|
<view class="goodsCartBox">
|
||
|
|
<uni-popup ref="cart_popup" @change="change">
|
||
|
|
<view class="popup-content" :style="styleObject" >
|
||
|
|
<view class="pc-top">
|
||
|
|
<view class="pc-top-left">
|
||
|
|
优惠券
|
||
|
|
<!-- <text style="color: gray;">(共{{list.length}}件)</text> -->
|
||
|
|
</view>
|
||
|
|
<!-- <view class="pc-top-right" style="color: gray;" @click="clearFunc">
|
||
|
|
清空购物车
|
||
|
|
</view> -->
|
||
|
|
</view>
|
||
|
|
<view class="pc-content couponBox">
|
||
|
|
<!-- <view class="list-row" v-for="(item,i) in list" @tap="lockItem(i)">
|
||
|
|
<goodsInfo :type="2" :info="item" >
|
||
|
|
<template #btn>
|
||
|
|
<uni-number-box :value="item.num" @change="changeNumFunc" />
|
||
|
|
</template>
|
||
|
|
</goodsInfo>
|
||
|
|
</view> -->
|
||
|
|
<view class="c-part" v-if="list.length>0" @tap="toUseFunc(item,i)" v-for="(item,i) in list">
|
||
|
|
<view class="state-css small-text" v-if="item.bind_type == 1">
|
||
|
|
<!-- 已领取 -->
|
||
|
|
<!-- <image src="../../static/had.png" mode="widthFix"></image> -->
|
||
|
|
</view>
|
||
|
|
<view class="cp-row" style="padding-bottom: 0px;">
|
||
|
|
<view class="cpr-left">
|
||
|
|
{{item.coupon_name}}
|
||
|
|
</view>
|
||
|
|
<view class="cpr-right" style="color: red;">
|
||
|
|
￥<text class="big-text">{{item.money}}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="cp-row small-text" style="padding-top: 0px;">
|
||
|
|
<view class="cpr-left">
|
||
|
|
有效期至{{item.expire_time}}
|
||
|
|
</view>
|
||
|
|
<view class="cpr-right">
|
||
|
|
<text class="red-text">满{{item.num}}可用</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="line"></view>
|
||
|
|
<view class="cp-row small-text">
|
||
|
|
<view class="cpr-left">
|
||
|
|
指定商品可用
|
||
|
|
</view>
|
||
|
|
<view class="cpr-right">
|
||
|
|
<view class="checkBox-css">
|
||
|
|
<uni-icons v-if="current_ == i" type="checkmarkempty" size="20"></uni-icons>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<emptyCard v-else></emptyCard>
|
||
|
|
</view>
|
||
|
|
<view class="pc-bottom" style="padding: 40rpx 0 ;">
|
||
|
|
<!-- 按钮 -->
|
||
|
|
<myButton v-if="list.length>0" style="width: 100%;" class="op-right" :type="2" @tap="ofunc">
|
||
|
|
确认使用
|
||
|
|
</myButton>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</uni-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.checkBox-css{
|
||
|
|
width: 34rpx;
|
||
|
|
height: 34rpx;
|
||
|
|
border: 1px solid #cacaca;
|
||
|
|
}
|
||
|
|
/*
|
||
|
|
优惠券
|
||
|
|
*/
|
||
|
|
.hasDone{
|
||
|
|
background-color: #cccccc !important;
|
||
|
|
}
|
||
|
|
.state-css{
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
image{
|
||
|
|
width: 100rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.button-css{
|
||
|
|
background-color: red;
|
||
|
|
color: white;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
padding: 6rpx 20rpx;
|
||
|
|
}
|
||
|
|
.couponBox{
|
||
|
|
.c-part{
|
||
|
|
background-color: white;
|
||
|
|
margin: 20rpx;
|
||
|
|
border-radius: 5px;
|
||
|
|
.cp-row{
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 20rpx 30rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pc-bottom{
|
||
|
|
position: fixed;
|
||
|
|
width: 100%;
|
||
|
|
bottom: 20rpx;
|
||
|
|
}
|
||
|
|
.goodsCartBox{
|
||
|
|
.popup-content{
|
||
|
|
position: relative;
|
||
|
|
padding-top: 40rpx;
|
||
|
|
background-color: white;
|
||
|
|
border-radius: 10px 10px 0 0;
|
||
|
|
overflow: scroll;
|
||
|
|
background: #f2f2f2;
|
||
|
|
.pc-top{
|
||
|
|
position: fixed;
|
||
|
|
top:120rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 40rpx;
|
||
|
|
background-color: white;
|
||
|
|
z-index: 10;
|
||
|
|
border-bottom: 1px solid #eaeaea;
|
||
|
|
}
|
||
|
|
.pc-content{
|
||
|
|
.list-row{
|
||
|
|
padding: 20rpx;
|
||
|
|
}
|
||
|
|
margin-bottom: 240rpx;
|
||
|
|
margin-top: 100rpx;
|
||
|
|
}
|
||
|
|
.pc-row{
|
||
|
|
padding:0 40rpx;
|
||
|
|
padding-bottom: 40rpx;
|
||
|
|
.pcr-title{
|
||
|
|
color: gray;
|
||
|
|
font-size: 30rpx;
|
||
|
|
padding: 20rpx 0;
|
||
|
|
}
|
||
|
|
.pc-choose-card-box{
|
||
|
|
.pc-choose-card{
|
||
|
|
display: inline-block;
|
||
|
|
background: #f1f1f1;
|
||
|
|
margin-right: 20rpx;
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
padding: 10rpx 20rpx;
|
||
|
|
border-radius: 10rpx;
|
||
|
|
// font-weight: bolder;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.main-info{
|
||
|
|
display: flex;
|
||
|
|
// align-items:;
|
||
|
|
.pcr-left{
|
||
|
|
margin-right: 40rpx;
|
||
|
|
.pcrl-img-box{
|
||
|
|
border: 2rpx solid #dadada;
|
||
|
|
width: 180rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
image{
|
||
|
|
width: 180rpx;
|
||
|
|
height: 180rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.pcr-right{
|
||
|
|
.pcrr-row{
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|