init
This commit is contained in:
298
components/myCoupon.vue
Normal file
298
components/myCoupon.vue
Normal file
@@ -0,0 +1,298 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user