580 lines
14 KiB
Vue
580 lines
14 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.use}" :key="index">
|
||
<view class="quan u-row-between u-flex u-col-center u-m-b-32 border-r-10 ">
|
||
<view class="no-use" v-if="!item.use">
|
||
<image class="img" src="/pagesOrder/static/image/no-use.svg" mode=""></image>
|
||
</view>
|
||
<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 left">
|
||
<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"> {{dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||
</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.use}" :key="index">
|
||
<view class="quan goods u-row-between u-flex u-col-center u-m-b-32 border-r-10 u-relative">
|
||
<view class="no-use" v-if="!item.use">
|
||
<image class="img" src="/pagesOrder/static/image/no-use.svg" mode=""></image>
|
||
</view>
|
||
<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 left">
|
||
<view class="u-flex">
|
||
<up-image width="80rpx" height="80rpx" :src="item.productCover"></up-image>
|
||
<view class="u-m-l-18">
|
||
<view class="u-m-l-18">{{item.productName}}</view>
|
||
<view class="u-m-l-18 u-m-t-10 u-font-24 color-666">x{{item.num}}</view>
|
||
</view>
|
||
</view>
|
||
<view class=" u-m-t-14 u-flex">
|
||
<view>有效期:</view>
|
||
<view class="u-font-24 u-m-l-6"> {{dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss') }}
|
||
</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 u-row-center w-full">
|
||
<view class="color-red font-bold u-m-b-24 ">￥{{item.discountAmount}}</view>
|
||
</view> -->
|
||
<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 bottom safe-bottom border-top">
|
||
|
||
<view class="u-m-b-32 u-flex u-row-between u-p-t-10">
|
||
<view class="u-flex">
|
||
<text>抵扣金额：</text>
|
||
<text class="color-red">￥</text>
|
||
<text class="color-red">{{discountAmount}}</text>
|
||
</view>
|
||
<view class="u-flex u-relative">
|
||
<text>支付金额：</text>
|
||
<text class="color-red">￥</text>
|
||
<text class="color-red">{{payPrice }}</text>
|
||
<view class="u-absolute u-flex u-row-between" style="bottom: 100%;right: 0;"
|
||
v-if="payPrice*1!=option.orderPrice*1">
|
||
<view class="u-flex line-th color-999">
|
||
<text class="">￥</text>
|
||
<text class="">{{option.orderPrice}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="u-flex gap-20">
|
||
<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>
|
||
|
||
<up-modal :title="modal.title" :content="modal.content" :show="modal.clear" :confirmText="modal.confirmText"
|
||
:cancelText="modal.cancelText" showCancelButton closeOnClickOverlay @confirm="confirmModelConfirm"
|
||
@cancel="confirmModelCancel" @close="setModalShow('clear',false)" width="300px" />
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
watch,
|
||
computed,
|
||
onMounted
|
||
} from 'vue';
|
||
import color from '@/commons/color.js'
|
||
import dayjs from 'dayjs';
|
||
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'
|
||
import infoBox from '@/commons/utils/infoBox.js'
|
||
import {
|
||
queryAllShopUser
|
||
} from '@/http/yskApi/shop-user.js'
|
||
import {
|
||
returnNewGoodsList,
|
||
returnCoupCanUse,
|
||
returnCouponAllPrice,
|
||
returnProductCoupon,
|
||
returnCanUseFullReductionCoupon
|
||
} from '../quan_util.js'
|
||
|
||
const modal = reactive({
|
||
title: '提示',
|
||
cancelText: '取消',
|
||
confirmText: '确定',
|
||
content: '',
|
||
key: '',
|
||
clear: false,
|
||
data: ''
|
||
})
|
||
|
||
function confirmModelCancel() {
|
||
setModalShow('clear', false, '')
|
||
}
|
||
async function confirmModelConfirm() {
|
||
if (modal.key == 'clear') {
|
||
myQuan.fullReductionCouponSel = {
|
||
id: ''
|
||
}
|
||
const item = modal.data
|
||
item.checked = !item.checked
|
||
const CheckedArr = myQuan.res.productCoupon.filter(v => v.checked)
|
||
const noCheckedArr = myQuan.res.productCoupon.filter(v => !v.checked)
|
||
noCheckedArr.map(v => {
|
||
console.log(returnCoupCanUse(canDikouGoodsArr, v, CheckedArr));
|
||
v.use = returnCoupCanUse(canDikouGoodsArr, v, CheckedArr)
|
||
})
|
||
setModalShow('clear', false, '')
|
||
}
|
||
}
|
||
|
||
function setModalShow(key = 'show', show = true, data) {
|
||
modal.key = key
|
||
modal[key] = show
|
||
modal.data = data
|
||
}
|
||
|
||
|
||
|
||
function back() {
|
||
uni.navigateBack()
|
||
}
|
||
let order = ref({
|
||
|
||
})
|
||
let canDikouGoodsArr = []
|
||
const myQuan = reactive({
|
||
fullReductionCouponSel: {
|
||
id: ''
|
||
},
|
||
res: {
|
||
fullReductionCoupon: [],
|
||
productCoupon: []
|
||
},
|
||
types: {
|
||
list: ['满减券(单选)', '商品券(多选)'],
|
||
sel: 0
|
||
},
|
||
list: [],
|
||
sel: -1,
|
||
hasAjax: false
|
||
})
|
||
|
||
function changeProductCoupon(item) {
|
||
if (!item.use) {
|
||
return
|
||
}
|
||
if (myQuan.fullReductionCouponSel.id && !item.checked) {
|
||
const goodsQuan = myQuan.res.productCoupon.filter(v => v.checked)
|
||
const fullReductionCoupon = myQuan.fullReductionCouponSel.id ? [myQuan.fullReductionCouponSel] : []
|
||
let coupArr = [...goodsQuan, item]
|
||
const payPrice = option.orderPrice - returnCouponAllPrice(coupArr, canDikouGoodsArr, user.value)
|
||
if (payPrice<=0) {
|
||
modal.content = '选择该商品券后支付金额将为0，继续选择将取消选择的满减券'
|
||
modal.cancelText = '取消'
|
||
modal.confirmText = '继续选择'
|
||
setModalShow('clear', true, item)
|
||
return
|
||
}
|
||
if (myQuan.fullReductionCouponSel.fullAmount > payPrice) {
|
||
modal.content = '选择该商品券后将不满足选择抵扣券的最低满减需求，继续选择将取消选择的满减券'
|
||
modal.cancelText = '取消'
|
||
modal.confirmText = '继续选择'
|
||
setModalShow('clear', true, item)
|
||
return
|
||
}
|
||
}
|
||
|
||
item.checked = !item.checked
|
||
const CheckedArr = myQuan.res.productCoupon.filter(v => v.checked)
|
||
if (CheckedArr.length <= 0) {
|
||
return myQuan.res.productCoupon.map(v => {
|
||
v.use = true
|
||
})
|
||
}
|
||
const noCheckedArr = myQuan.res.productCoupon.filter(v => !v.checked)
|
||
noCheckedArr.map(v => {
|
||
console.log(returnCoupCanUse(canDikouGoodsArr, v, CheckedArr));
|
||
v.use = returnCoupCanUse(canDikouGoodsArr, v, CheckedArr)
|
||
})
|
||
|
||
|
||
}
|
||
|
||
function changeFullReductionCouponSel(item) {
|
||
if (!item.use) {
|
||
return
|
||
}
|
||
console.log(item);
|
||
if (item.id == myQuan.fullReductionCouponSel.id) {
|
||
myQuan.fullReductionCouponSel = {
|
||
id: ''
|
||
}
|
||
} else {
|
||
myQuan.fullReductionCouponSel = item
|
||
}
|
||
myQuan.res.fullReductionCoupon = returnCanUseFullReductionCoupon($fullReductionCoupon, payPrice.value, myQuan
|
||
.fullReductionCouponSel)
|
||
}
|
||
|
||
function formatStr(str) {
|
||
console.log(str);
|
||
if(!str){
|
||
return ''
|
||
}
|
||
const reg=/^[,]+|[,]+$/g;
|
||
return `${str}`.replace(reg, '')
|
||
}
|
||
|
||
function toUse(item) {
|
||
|
||
}
|
||
let user = reactive({
|
||
isVip: false
|
||
})
|
||
|
||
let $fullReductionCoupon = []
|
||
let $productCoupon = []
|
||
async function getQuan() {
|
||
order.value = await orderApi.tbOrderInfoDetail(option.orderId)
|
||
if (order.value.memberId) {
|
||
const userRes = await queryAllShopUser({
|
||
id: order.value.memberId
|
||
})
|
||
if (userRes.content[0]) {
|
||
user.value = userRes.content[0]
|
||
}
|
||
}
|
||
|
||
console.log(order.value);
|
||
const res = await $activateByOrderId({
|
||
orderId: option.orderId,
|
||
memberId: option.memberId
|
||
})
|
||
canDikouGoodsArr = returnNewGoodsList(order.value.detailList || [])
|
||
res.fullReductionCoupon = res.fullReductionCoupon.map((v) => {
|
||
if(option.orderPrice<=0){
|
||
return {...v,use:false}
|
||
}else{
|
||
return{
|
||
...v,
|
||
use:v.use && option.orderPrice * 1 >= v
|
||
.fullAmount * 1
|
||
}
|
||
}
|
||
|
||
})
|
||
res.productCoupon = res.productCoupon.map(v => {
|
||
const calcCoup = returnProductCoupon(v, canDikouGoodsArr, user.value)
|
||
return {
|
||
...calcCoup,
|
||
checked: false,
|
||
use:option.orderPrice<=0?false:v.use
|
||
}
|
||
}).filter((v) => v.use);
|
||
$fullReductionCoupon = res.fullReductionCoupon
|
||
$productCoupon = res.productCoupon
|
||
myQuan.res = res
|
||
myQuan.hasAjax = true;
|
||
}
|
||
const option = reactive({
|
||
orderId: '',
|
||
memberId: '',
|
||
orderPrice: 0
|
||
})
|
||
|
||
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()
|
||
}
|
||
const discountAmount = computed(() => {
|
||
const goodsQuan = myQuan.res.productCoupon.filter(v => v.checked)
|
||
const fullReductionCoupon = myQuan.fullReductionCouponSel.id ? [myQuan.fullReductionCouponSel] : []
|
||
let coupArr = [...fullReductionCoupon, ...goodsQuan]
|
||
return returnCouponAllPrice(coupArr, canDikouGoodsArr, user.value)
|
||
})
|
||
const payPrice = computed(() => {
|
||
const pay = option.orderPrice - discountAmount.value
|
||
return (pay < 0 ? 0 : pay).toFixed(2)
|
||
})
|
||
watch(() => myQuan.types.sel, (newval) => {
|
||
if (newval == 0) {
|
||
myQuan.res.fullReductionCoupon = returnCanUseFullReductionCoupon($fullReductionCoupon, payPrice.value,
|
||
myQuan.fullReductionCouponSel)
|
||
}
|
||
if (newval == 1) {
|
||
|
||
}
|
||
})
|
||
onLoad((opt) => {
|
||
Object.assign(option, opt)
|
||
getQuan()
|
||
})
|
||
let safebottomHeight = ref(0)
|
||
onReady(() => {
|
||
getSafeBottomHeight('bottom', 0).then(height => {
|
||
console.log(height);
|
||
safebottomHeight.value = height
|
||
})
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// $quan-color:rgb(233, 77, 60);
|
||
$quan-color: #318AFE;
|
||
|
||
.no-use {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.img {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
.left{
|
||
max-width: 70%;
|
||
}
|
||
.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> |