547 lines
14 KiB
Vue
547 lines
14 KiB
Vue
<template>
|
||
<view class="container">
|
||
<view class="containertop">
|
||
<view class="containertopbox">
|
||
<view class="containertopboxone flex-start">
|
||
<view>可使用红包</view>
|
||
<text>{{totalnumber}}张</text>
|
||
</view>
|
||
<view class="containertopboxitem flex-start" v-for="(item,index) in 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'">
|
||
{{item.status == 0 ? '兑换积分':'已过期'}}
|
||
</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 orderlist" :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">
|
||
<u-icon v-if="item1.id == item1id" name="checkmark-circle" color="#F1CB66"
|
||
size="45"></u-icon>
|
||
<text v-else class="theretext"></text>
|
||
<view :class="item1.id == item1id?'c':'b'">
|
||
<text :class="item1.id == item1id?'c':'b'"
|
||
style="font-size:20rpx ;">¥</text>{{item1.couponsPrice}}/张
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
totalnumber: '',
|
||
list: [],
|
||
orderlist: [{
|
||
listdata: {},
|
||
}], //获取优惠券参数列表
|
||
item1id: '',
|
||
form: {
|
||
page: 1, //页数
|
||
size: 10, //页容量
|
||
status: 'loadmore'
|
||
},
|
||
orderfood: '', //等于0扫码点餐下单
|
||
amount: '' //下单金额传来的值
|
||
};
|
||
},
|
||
onLoad(e) {
|
||
try {
|
||
this.orderfood = e.orderfood //等于0扫码点餐下单
|
||
this.amount = e.amount
|
||
} catch (e) {
|
||
//TODO handle the exception
|
||
}
|
||
},
|
||
onShow() {
|
||
this.ordermineCouponsthis()
|
||
this.ordergetYhqParass()
|
||
},
|
||
methods: {
|
||
clickicon(e) { //团购优惠卷
|
||
this.item1id = e.id
|
||
e.clickiconone = 1
|
||
let data = e
|
||
if (this.orderfood == 0) { //等于0扫码点餐下单
|
||
if (this.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.orderfood == 0) { //等于0扫码点餐下单
|
||
if (this.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.orderlist = res.data
|
||
for (let i = 0; i <= res.data.length; i++) {
|
||
this.orderfindCouponses(i, this.orderlist[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.orderlist[i].listdata = res.data.list
|
||
console.log(this.orderlist)
|
||
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
|
||
})
|
||
try {
|
||
this.totalnumber = res.data.total
|
||
this.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> |