362 lines
7.8 KiB
Vue
362 lines
7.8 KiB
Vue
<template>
|
|
<view class="u-p-l-30 u-p-r-30 u-p-t-30 u-font-28 ">
|
|
<up-sticky offset-top="0">
|
|
<my-tabs v-model="myQuan.types.sel" :list="myQuan.types.list"></my-tabs>
|
|
</up-sticky>
|
|
<view class="u-m-t-32">
|
|
<template v-if="myQuan.types.sel==0">
|
|
<view class="" @click="changeFullReductionCouponSel(item)"
|
|
v-for="(item,index) in myQuan.res.fullReductionCoupon" :class="{filtergray:item.status}"
|
|
:key="index">
|
|
<view class="quan u-row-between u-flex u-col-center u-m-b-32 border-r-10 ">
|
|
<view class="sel u-abso" v-if="item.id==myQuan.fullReductionCouponSel.id ">
|
|
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
|
</view>
|
|
<view class="u-p-t-32 u-p-b-32 u-p-l-24 u-p-r-24">
|
|
<view class="u-flex">
|
|
<view class="hui">减</view>
|
|
<view class="u-m-l-18">{{item.name}}</view>
|
|
</view>
|
|
<view class=" u-m-t-20 u-flex">
|
|
<view>有效期:</view>
|
|
<view class="u-font-24 u-m-l-6"> {{item.endTime}}</view>
|
|
</view>
|
|
<view class="u-m-t-10 color-999 u-font-24">
|
|
{{ formatStr(item.useRestrictions)}}
|
|
</view>
|
|
</view>
|
|
<view class="right u-flex u-flex-col u-row-between">
|
|
<view class="u-flex u-row-center u-font-36 ">
|
|
￥{{item.discountAmount}}
|
|
</view>
|
|
<view class="u-flex u-font-24">
|
|
满{{item.fullAmount}}可用
|
|
</view>
|
|
<view class="u-flex ">
|
|
<view class="use-btn" @click.stop="toEmitChooseQuan(item)">去使用</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<template v-if="myQuan.res.fullReductionCoupon.length<=0&&myQuan.hasAjax">
|
|
<my-img-empty tips="暂无可用优惠券"></my-img-empty>
|
|
</template>
|
|
</template>
|
|
|
|
<template v-if="myQuan.types.sel==1">
|
|
<view class="" @click="changeProductCoupon(item)" v-for="(item,index) in myQuan.res.productCoupon"
|
|
:class="{filtergray:item.status}" :key="index">
|
|
<view class="quan goods u-row-between u-flex u-col-center u-m-b-32 border-r-10 ">
|
|
<view class="sel u-abso" v-if="item.checked">
|
|
<up-icon name="checkbox-mark" color="#fff"></up-icon>
|
|
</view>
|
|
<view class="u-p-t-32 u-p-b-32 u-p-l-24 u-p-r-24">
|
|
<view class="u-flex">
|
|
<up-image width="80rpx" height="80rpx" :src="item.productCover"></up-image>
|
|
<view class="u-m-l-18">{{item.productName}}</view>
|
|
</view>
|
|
<view class=" u-m-t-14 u-flex">
|
|
<view>有效期:</view>
|
|
<view class="u-font-24 u-m-l-6"> {{item.endTime}}</view>
|
|
</view>
|
|
<view class="u-m-t-10 color-999 u-font-24">
|
|
{{ formatStr(item.useRestrictions)}}
|
|
</view>
|
|
</view>
|
|
<view class="right u-flex u-flex-col u-col-bottom u-row-center">
|
|
<view class="u-flex ">
|
|
<view class="use-btn" @click.stop="toEmitChooseQuan(item)">去使用</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<template v-if="myQuan.res.productCoupon.length<=0&&myQuan.hasAjax">
|
|
<my-img-empty tips="暂无可用优惠券"></my-img-empty>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
</view>
|
|
|
|
<view :style="{height:safebottomHeight+'px'}"></view>
|
|
<view class="fixed-b u-flex gap-20 bottom safe-bottom border-top">
|
|
<up-button shape="circle" plain @click="back">
|
|
<view class="font-bold">取消</view>
|
|
</up-button>
|
|
<up-button shape="circle" type="primary" @click="toEmitChooseQuan()">
|
|
<view class="font-bold" >确定</view>
|
|
</up-button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
reactive,
|
|
watch,
|
|
computed,
|
|
onMounted
|
|
} from 'vue';
|
|
import color from '@/commons/color.js'
|
|
import {
|
|
getSafeBottomHeight
|
|
} from '@/commons/utils/safe-bottom.js'
|
|
import go from '@/commons/utils/go.js'
|
|
import {
|
|
onLoad,
|
|
onReady
|
|
} from '@dcloudio/uni-app'
|
|
import * as orderApi from '@/http/yskApi/order.js'
|
|
import {
|
|
$activateByOrderId
|
|
} from '@/http/yskApi/Instead.js'
|
|
function back(){
|
|
uni.navigateBack()
|
|
}
|
|
let order=ref({
|
|
|
|
})
|
|
const myQuan = reactive({
|
|
fullReductionCouponSel: {
|
|
id: ''
|
|
},
|
|
res: {
|
|
fullReductionCoupon: [],
|
|
productCoupon: []
|
|
},
|
|
types: {
|
|
list: ['满减券(单选)', '商品券(多选)'],
|
|
sel: 0
|
|
},
|
|
list: [],
|
|
sel: -1,
|
|
hasAjax: false
|
|
})
|
|
|
|
function changeProductCoupon(item) {
|
|
item.checked = !item.checked
|
|
}
|
|
|
|
function changeFullReductionCouponSel(item) {
|
|
myQuan.fullReductionCouponSel = item
|
|
}
|
|
|
|
function formatStr(str) {
|
|
return str.replaceAll('"', '')
|
|
}
|
|
|
|
function toUse(item) {
|
|
|
|
}
|
|
|
|
async function getQuan() {
|
|
order.value=await orderApi.tbOrderInfoDetail(option.orderId)
|
|
console.log(order.value);
|
|
const res = await $activateByOrderId(option)
|
|
res.fullReductionCoupon = res.fullReductionCoupon.filter((v) => !v.use)
|
|
res.productCoupon = res.productCoupon.filter((v) => !v.use).map(v => {
|
|
return {
|
|
...v,
|
|
checked: false
|
|
}
|
|
});
|
|
myQuan.res = res
|
|
myQuan.hasAjax = true;
|
|
}
|
|
const option = reactive({
|
|
orderId: '',
|
|
memberId: '',
|
|
payPrice:''
|
|
})
|
|
|
|
function toEmitChooseQuan(item){
|
|
let arr=[]
|
|
if(item){
|
|
arr=[item]
|
|
}else{
|
|
if(myQuan.fullReductionCouponSel.id){
|
|
arr.push(myQuan.fullReductionCouponSel)
|
|
}
|
|
const goodsQuan=myQuan.res.productCoupon.filter(v=>v.checked)
|
|
arr.push(...goodsQuan)
|
|
}
|
|
uni.$emit('choose-quan',arr)
|
|
back()
|
|
}
|
|
|
|
onLoad((opt) => {
|
|
Object.assign(option, opt)
|
|
getQuan()
|
|
})
|
|
let safebottomHeight = ref(0)
|
|
onReady(() => {
|
|
getSafeBottomHeight('bottom',0).then(height => {
|
|
safebottomHeight.value = height
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// $quan-color:rgb(233, 77, 60);
|
|
$quan-color: #318AFE;
|
|
|
|
.fixed-b {
|
|
position: fixed;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
right: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.bg-gray {
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.price1 {
|
|
color: rgb(255, 107, 0);
|
|
}
|
|
|
|
.payType {
|
|
.radio {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgb(255, 212, 0);
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 40rpx;
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
.active {
|
|
.radio {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-block {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: -30rpx;
|
|
display: block;
|
|
width: 12rpx;
|
|
top: 0;
|
|
background-color: rgb(255, 212, 0);
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.filtergray {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.radio {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgb(255, 255, 255);
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 40rpx;
|
|
|
|
&.active {}
|
|
}
|
|
|
|
.use-btn {
|
|
background-color: #fff;
|
|
border-radius: 100rpx;
|
|
padding: 4rpx 20rpx;
|
|
color: $quan-color;
|
|
}
|
|
|
|
.u-font-40 {
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.yilingqu {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
}
|
|
|
|
.lingqu {
|
|
position: absolute;
|
|
bottom: 20rpx;
|
|
right: 20rpx;
|
|
background-color: rgb(255, 207, 0);
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 100rpx;
|
|
}
|
|
|
|
.btn {
|
|
background-color: $my-main-color;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.hui {
|
|
// background-color: $quan-color;
|
|
background-image: linear-gradient(to right bottom,rgb(254,103,4),rgb(241,50,42));
|
|
padding: 4rpx 10rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.quan {
|
|
border: 1px solid rgb(238, 238, 238);
|
|
position: relative;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 0 5px #eee;
|
|
overflow: hidden;
|
|
|
|
.sel {
|
|
padding: 2rpx 4rpx;
|
|
position: absolute;
|
|
background-color: $quan-color;
|
|
left: 0;
|
|
top: 0;
|
|
border-radius: 0 0 24rpx 0;
|
|
}
|
|
|
|
.right {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 20rpx 24rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: $quan-color;
|
|
height: 100%;
|
|
}
|
|
|
|
&.goods {
|
|
.right {
|
|
background-color: #fff;
|
|
position: initial;
|
|
|
|
.use-btn {
|
|
padding: 10rpx 40rpx;
|
|
color: #fff;
|
|
background-color: $quan-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
padding: 30rpx 30rpx 80rpx 30rpx;
|
|
}
|
|
</style> |