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.data
|
|
for (let i = 0; i <= res.data.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.data.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.data.total
|
|
viewlist.list = res.data.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.data
|
|
// for (let i = 0; i <= res.data.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.data.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.data.total
|
|
// this.viewlist.list = res.data.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> |