655 lines
16 KiB
Vue
655 lines
16 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="containertop">
|
||
<view class="containertopbox">
|
||
<view class="containertopboxone flex-start">
|
||
<view>可使用红包</view>
|
||
<text>{{viewlist.totalnumber}}张</text>
|
||
</view>
|
||
<view class="containertopboxitem flex-start" v-for="(item,index) in viewlist.list" :key="index"
|
||
@click="clickiconone(item)">
|
||
<view class="containertopboxitemleft flex-colum"
|
||
:class="item.status == 0?'':'containertopboxitemlefts'">
|
||
<view class="containertopboxitemleft_one"
|
||
:class="item.status == 0?'':'containertopboxitemleft_ones'">
|
||
<text style="font-size: 28rpx;">￥</text>
|
||
<text>{{item.couponsAmount || 0}}</text>
|
||
</view>
|
||
<view class="containertopboxitemleft_tow"
|
||
:class="item.status == 0?'':'containertopboxitemleft_tows'">
|
||
优惠券(元)
|
||
</view>
|
||
</view>
|
||
<view class="containertopboxitemright">
|
||
<view class="containertopboxitemright_one">
|
||
无门槛使用
|
||
</view>
|
||
<view class="containertopboxitemright_tow">
|
||
通用红包券
|
||
</view>
|
||
<view class="containertopboxitemright_there">
|
||
有效期至：{{$u.timeFormat(item.endTime, 'yyyy/mm/dd') || '0'}}
|
||
</view>
|
||
<view
|
||
:class="item.status == 0?'containertopboxitemright_four':'containertopboxitemright_fours'">
|
||
<text v-if="onLoaddata.orderfood">
|
||
{{item.status == 0 ? '去使用':'无法使用'}}
|
||
</text>
|
||
<text v-else>
|
||
{{item.status == 0 ? '兑换积分':'已过期'}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<navigator url="/pages/user/coupon" hover-class="navigator-hover"
|
||
style="margin-top: 20rpx;font-weight: 400;font-size: 28rpx;text-align: center; width: 100%;">
|
||
查看更多
|
||
</navigator>
|
||
</view>
|
||
<view class="containerbottom">
|
||
<view class="containerbottomtop">
|
||
<view class="containerbottomtoptopbox flex-start">
|
||
<view>可购买红包</view>
|
||
<text>（根据您的订单金额推荐更适合您的优惠力度）</text>
|
||
</view>
|
||
</view>
|
||
<view class="containerbottombox_bottom">
|
||
<view class="containerbottombox_bottomone">
|
||
购买省钱包，本单立减
|
||
</view>
|
||
<view v-for="(item,index) in orderview.list" :key="index">
|
||
<view class="containerbottombox_bottomtow">
|
||
{{item.name}}
|
||
</view>
|
||
<view class="containerbottombox_bottombox flex-start" v-for="(item1,index1) in item.listdata"
|
||
:key="index1" @click="clickicon(item1)">
|
||
<view class="containerbottombox_bottomthere">
|
||
<view class="containerbottombox_bottomthere_topitem">
|
||
<view class="onecontainerbottombox_bottomthere_topitem">
|
||
<view class="containerbottombox_bottomthere_topitemone">
|
||
通用红包
|
||
</view>
|
||
<view class="containerbottombox_bottomthere_topitemtow flex-center">
|
||
<view class="a">
|
||
¥
|
||
</view>
|
||
<view class="b">
|
||
{{item1.couponsAmount}}
|
||
</view>
|
||
<view class="c">
|
||
无门槛
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="towcontainerbottombox_bottomthere_topitem">
|
||
有效期：{{$u.timeFormat(item1.updateTime, 'yyyy/mm/dd') || '0'}}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="therecontainerbottombox_bottomthere_topitem flex-around">
|
||
<up-icon v-if="item1.id == couponid" name="checkmark-circle" color="#F1CB66"
|
||
size="45"></up-icon>
|
||
<text v-else class="theretext"></text>
|
||
<view :class="item1.id == couponid?'c':'b'">
|
||
<text :class="item1.id == couponid?'c':'b'"
|
||
style="font-size:20rpx ;">¥</text>{{item1.couponsPrice}}/张
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
computed,
|
||
reactive,
|
||
onBeforeUnmount,
|
||
onMounted,
|
||
} from "vue";
|
||
import {
|
||
onLoad,
|
||
onReady,
|
||
onShow,
|
||
onReachBottom,
|
||
onPageScroll
|
||
} from '@dcloudio/uni-app'
|
||
import Nav from '@/components/CustomNavbar.vue'; //导航栏
|
||
import {
|
||
APIordergetYhqPara,
|
||
APIorderfindCoupons,
|
||
APIordermineCoupons
|
||
} from "@/common/api/index/coupons.js"
|
||
import {
|
||
useNavbarStore
|
||
} from '@/stores/navbarStore';
|
||
const store = useNavbarStore();
|
||
// 数据
|
||
const viewlist = reactive({
|
||
list: [],
|
||
totalnumber: ''
|
||
})
|
||
const orderview = reactive({
|
||
list: [],
|
||
listdata: []
|
||
})
|
||
const couponid = ref('')
|
||
const form = reactive({
|
||
page: 1, //页数
|
||
size: 10, //页容量
|
||
status: 'loadmore'
|
||
})
|
||
const onLoaddata = reactive({
|
||
orderfood: '', //等于0扫码点餐下单
|
||
amount: '' //下单金额传来的值
|
||
})
|
||
//团购优惠卷
|
||
const clickicon = (e) => {
|
||
couponid.value = e.id
|
||
e.clickiconone = 1
|
||
let data = e
|
||
if (onLoaddata.orderfood == 0) { //等于0扫码点餐下单
|
||
if (onLoaddata.amount > e.couponsAmount) {
|
||
uni.$emit('emitclickorderfood', e)
|
||
uni.navigateBack()
|
||
} else {
|
||
uni.showToast({
|
||
title: '优惠券面值大于支付金额',
|
||
icon: "none",
|
||
})
|
||
}
|
||
}
|
||
}
|
||
//自己优惠劵处理
|
||
const clickiconone = (e) => {
|
||
e.clickiconone = 0
|
||
let data = e
|
||
if (onLoaddata.orderfood == 0) { //等于0扫码点餐下单
|
||
if (onLoaddata.amount > e.couponsAmount) {
|
||
uni.$emit('emitclickorderfood', data)
|
||
uni.navigateBack()
|
||
} else {
|
||
uni.showToast({
|
||
title: '优惠券面值大于支付金额',
|
||
icon: "none",
|
||
})
|
||
}
|
||
}
|
||
}
|
||
//类型列表
|
||
const ordergetYhqParass = async () => {
|
||
let res = await APIordergetYhqPara()
|
||
try {
|
||
orderview.list = res
|
||
for (let i = 0; i <= res.length; i++) {
|
||
orderfindCouponses(i, orderview.list[i].name);
|
||
}
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
|
||
//系统优惠券列表
|
||
const orderfindCouponses = async (i, name) => {
|
||
let res = await APIorderfindCoupons({
|
||
page: 1,
|
||
size: 10,
|
||
type: name
|
||
})
|
||
orderview.list[i].orderview.listdata = res.list
|
||
console.log(orderview.list)
|
||
}
|
||
const ordermineCouponsthis = async () => {
|
||
let res = await APIordermineCoupons({
|
||
userId: uni.getStorageSync('userInfo').id,
|
||
status: 0,
|
||
page: form.page,
|
||
size: form.size,
|
||
orderId: ''
|
||
})
|
||
try {
|
||
viewlist.totalnumber = res.total
|
||
viewlist.list = res.list.slice(0, 2)
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
}
|
||
onLoad((e) => {
|
||
try {
|
||
onLoaddata.orderfood = e.orderfood //等于0扫码点餐下单
|
||
onLoaddata.amount = e.amount
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
})
|
||
onShow(() => {
|
||
try {
|
||
ordermineCouponsthis()
|
||
ordergetYhqParass()
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
})
|
||
// export default {
|
||
// methods: {
|
||
// clickicon(e) { //团购优惠卷
|
||
// this.couponid = e.id
|
||
// e.clickiconone = 1
|
||
// let data = e
|
||
// if (this.onLoaddata.orderfood == 0) { //等于0扫码点餐下单
|
||
// if (this.onLoaddata.amount > e.couponsAmount) {
|
||
// uni.$emit('emitclickorderfood', e)
|
||
// uni.navigateBack()
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: '优惠券面值大于支付金额',
|
||
// icon: "none",
|
||
// })
|
||
// }
|
||
// }
|
||
// },
|
||
// clickiconone(e) { //自己优惠劵处理
|
||
// e.clickiconone = 0
|
||
// let data = e
|
||
// if (this.onLoaddata.orderfood == 0) { //等于0扫码点餐下单
|
||
// if (this.onLoaddata.amount > e.couponsAmount) {
|
||
// uni.$emit('emitclickorderfood', data)
|
||
// uni.navigateBack()
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: '优惠券面值大于支付金额',
|
||
// icon: "none",
|
||
// })
|
||
// }
|
||
// }
|
||
// },
|
||
// async ordergetYhqParass() { //类型列表
|
||
// let res = await this.api.ordergetYhqPara()
|
||
// try {
|
||
// this.orderview.list = res
|
||
// for (let i = 0; i <= res.length; i++) {
|
||
// this.orderfindCouponses(i, this.orderview.list[i].name);
|
||
// }
|
||
// } catch (e) {
|
||
// //TODO handle the exception
|
||
// }
|
||
// },
|
||
// async orderfindCouponses(i, name) {
|
||
// let res = await this.api.orderfindCoupons({
|
||
// page: 1,
|
||
// size: 10,
|
||
// type: name
|
||
// })
|
||
// this.orderview.list[i].orderview.listdata = res.list
|
||
// console.log(this.orderview.list)
|
||
// this.$forceUpdate();
|
||
// },
|
||
// async ordermineCouponsthis() {
|
||
// let res = await this.api.ordermineCoupons({
|
||
// userId: uni.cache.get('userInfo').id,
|
||
// status: 0,
|
||
// page: this.form.page,
|
||
// size: this.form.size,
|
||
// orderId: ''
|
||
// })
|
||
// try {
|
||
// this.viewlist.totalnumber = res.total
|
||
// this.viewlist.list = res.list.slice(0, 2)
|
||
// } catch (e) {
|
||
// //TODO handle the exception
|
||
// }
|
||
// },
|
||
// }
|
||
// };
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.container {
|
||
.containertop {
|
||
padding: 48rpx 32rpx;
|
||
|
||
.containertopbox {
|
||
.containertopboxone {
|
||
view {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
text {
|
||
margin-left: 12rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
|
||
.containertopboxitem {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.containertopboxitemleft {
|
||
position: relative;
|
||
width: 182rpx;
|
||
height: 192rpx;
|
||
background: #F1CB66;
|
||
border-radius: 18rpx 0rpx 0rpx 18rpx;
|
||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||
|
||
::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0rpx;
|
||
left: 166rpx;
|
||
background: #f9f9f9;
|
||
display: inline-block;
|
||
width: 32rpx;
|
||
height: 16rpx;
|
||
border-radius: 0 0 32rpx 32rpx;
|
||
z-index: 999;
|
||
}
|
||
|
||
::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0rpx;
|
||
left: 166rpx;
|
||
background: #f9f9f9;
|
||
display: inline-block;
|
||
width: 32rpx;
|
||
height: 16rpx;
|
||
line-height: 32rpx;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
|
||
z-index: 999;
|
||
|
||
}
|
||
|
||
.containertopboxitemleft_one {
|
||
text {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 60rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
.containertopboxitemleft_ones {
|
||
text {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.containertopboxitemleft_tow {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.containertopboxitemleft_tows {
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.containertopboxitemlefts {
|
||
background: #F7F7F7;
|
||
}
|
||
|
||
.containertopboxitemright {
|
||
position: relative;
|
||
padding: 0 32rpx;
|
||
flex: auto;
|
||
height: 192rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||
border-radius: 0rpx 18rpx 18rpx 0rpx;
|
||
|
||
.containertopboxitemright_one {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
padding: 12rpx 0;
|
||
border-bottom: 1rpx dotted #707070;
|
||
}
|
||
|
||
.containertopboxitemright_tow {
|
||
margin-top: 14rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.containertopboxitemright_there {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
.containertopboxitemright_four {
|
||
position: absolute;
|
||
right: 32rpx;
|
||
top: 50%;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #FFFFFF;
|
||
padding: 0 14rpx;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
background: #FE665E;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
}
|
||
|
||
.containertopboxitemright_fours {
|
||
position: absolute;
|
||
right: 32rpx;
|
||
top: 50%;
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
padding: 0 14rpx;
|
||
height: 48rpx;
|
||
line-height: 48rpx;
|
||
text-align: center;
|
||
background: #F7F7F7;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.containerbottom {
|
||
.containerbottomtop {
|
||
padding: 0 32rpx;
|
||
|
||
.containerbottomtoptopbox {
|
||
view {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
text {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.containerbottombox_bottom {
|
||
margin-top: 16rpx;
|
||
width: 100%;
|
||
background: #FFFFFF;
|
||
border-radius: 42rpx 0rpx 0rpx 42rpx;
|
||
|
||
// overflow-x: auto;
|
||
.containerbottombox_bottomone {
|
||
padding: 20rpx 64rpx 0 64rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.containerbottombox_bottomtow {
|
||
margin-top: 16rpx;
|
||
padding: 0 64rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.containerbottombox_bottombox {
|
||
padding-left: 34rpx;
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
flex-wrap: nowrap;
|
||
|
||
.containerbottombox_bottomthere:nth-child(1) {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.containerbottombox_bottomthere {
|
||
margin-top: 16rpx;
|
||
margin-left: 46rpx;
|
||
|
||
.containerbottombox_bottomthere_topitem {
|
||
width: 236rpx;
|
||
border-radius: 24rpx 24rpx 24rpx 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
background: #fd5977;
|
||
|
||
.towcontainerbottombox_bottomthere_topitem {
|
||
padding: 20rpx 0 16rpx 0;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.onecontainerbottombox_bottomthere_topitem::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -6rpx;
|
||
width: 100%;
|
||
height: 20rpx;
|
||
background: #fef7f5;
|
||
left: 0;
|
||
z-index: 1;
|
||
border-radius: 0 0 50% 50%;
|
||
}
|
||
|
||
.onecontainerbottombox_bottomthere_topitem {
|
||
position: relative;
|
||
background: #fef7f5;
|
||
width: 100%;
|
||
z-index: 99;
|
||
|
||
.containerbottombox_bottomthere_topitemone {
|
||
width: 136rpx;
|
||
height: 40rpx;
|
||
background: #F1CB66;
|
||
text-align: center;
|
||
border-radius: 0rpx 0rpx 20rpx 20rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
margin: auto;
|
||
}
|
||
|
||
.containerbottombox_bottomthere_topitemtow {
|
||
align-items: baseline;
|
||
width: 100%;
|
||
|
||
.a {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 40rpx;
|
||
color: #FF4C11;
|
||
}
|
||
|
||
.b {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 70rpx;
|
||
color: #FF4C11;
|
||
}
|
||
|
||
.c {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #FF4C11;
|
||
}
|
||
}
|
||
|
||
.containerbottombox_bottomthere_topitemthere {
|
||
position: relative;
|
||
height: 50rpx;
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 20rpx;
|
||
color: #FFFFFF;
|
||
width: 100%;
|
||
z-index: 9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.therecontainerbottombox_bottomthere_topitem {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
|
||
.theretext {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background: #FFFFFF;
|
||
border: 2rpx solid #E8E8E8;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.c {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #FF4C11;
|
||
}
|
||
|
||
.b {
|
||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style> |