首页,我的 写扫码点餐之前提交1.0.0
This commit is contained in:
wwz
655
pages/index/coupons/index.vue
Normal file
655
pages/index/coupons/index.vue
Normal file
@@ -0,0 +1,655 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user