first
This commit is contained in:
580
pagesOrder/quan/quan.vue
Normal file
580
pagesOrder/quan/quan.vue
Normal file
@@ -0,0 +1,580 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user