修改订单详情订单列表价格展示，增加会员价
This commit is contained in:
@@ -1,22 +1,355 @@
|
||||
<template>
|
||||
<view>
|
||||
|
||||
<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>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
<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 {
|
||||
$activateByOrderId
|
||||
} from '@/http/yskApi/Instead.js'
|
||||
function back(){
|
||||
uni.navigateBack()
|
||||
}
|
||||
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() {
|
||||
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: '',
|
||||
})
|
||||
|
||||
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>
|
||||
<style lang="scss" scoped>
|
||||
// $quan-color:rgb(233, 77, 60);
|
||||
$quan-color: #318AFE;
|
||||
|
||||
</style>
|
||||
.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>
|
||||
Reference in New Issue
Block a user