345 lines
9.9 KiB
Vue
345 lines
9.9 KiB
Vue
<template>
|
|
<page-meta :page-font-size="fontValue+'px'" :root-font-size="fontValue+'px'"></page-meta>
|
|
<view class="content">
|
|
<view class="top-wrapper">
|
|
<view style="padding: 5px 16px">
|
|
<view class="list">
|
|
<view class="list-item" :class="{ active: active == index }"
|
|
v-for="(item, index) in tabList"
|
|
:key="index"
|
|
@click="handleTab(index)"
|
|
>
|
|
<view style="padding: 0 2px;">
|
|
<text>{{ item.name }}</text>
|
|
<text v-if="item.num>0">{{ item.num }}</text>
|
|
</view>
|
|
<view v-if="active == index" class="line"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<scroll-view style="width: 100%;height: 80vh;" @scrolltolower="onScrollTolower" scroll-y="true">
|
|
<view class="item-list" v-for="(item, index) in tableList" :key="index" :style="{opacity:(active==1? '1':'0.5')}">
|
|
<view style="width: 100%;display: flex;padding: 10px;color: #666;position: relative;overflow: hidden;">
|
|
<view class="top-left">
|
|
<view :style="{color:(active==1? '#ff5614':'#ff6816')}">￥<text class="amount">{{item.couponAmount}}</text> </view>
|
|
<view class="btn" :style="{background:(active==1? '#ff5614':'#ff6816')}">餐券</view>
|
|
</view>
|
|
<view class="top-right">
|
|
<view style="font-size: 36rpx;font-weight: 600;margin-bottom: 10px;">{{item.couponName}}</view>
|
|
<view style="color: #999;">有效期：{{item.effectDateStart}} - {{item.effectDateEnd}}</view>
|
|
</view>
|
|
<view style="position: absolute;top:-10px;right:-10px;">
|
|
<image v-if="active==0" style="width: 120rpx;height: 120rpx;" src="../../../static/images/my/notTakeEffect.png"></image>
|
|
<image v-if="active==2" style="width: 140rpx;height: 140rpx;" src="../../../static/images/my/used.png"></image>
|
|
<image v-if="active==3" style="width: 180rpx;height: 120rpx;" src="../../../static/images/my/expired.png"></image>
|
|
<image v-if="active==4" style="width: 120rpx;height: 120rpx;" src="../../../static/images/my/cancellation.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="item-bottom">
|
|
<view> 限指定食堂可用 </view>
|
|
<view class="btn" @click="checkDetail(item)">详细信息</view>
|
|
</view>
|
|
</view>
|
|
<view style="margin: 20px 0" v-if="tableList.length > 0">
|
|
<u-loadmore :status="status" nomoreText="没有更多数据了" />
|
|
</view>
|
|
<view v-else class="flex justify-center align-center" style="height: 50vh">
|
|
<u-empty icon="../../../static/images/not_order.png" text="暂无数据" textColor="#999" />
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<u-popup :show="showDetail" mode="center" bgColor="transparent" @close="close" @open="open">
|
|
<!-- background: transparent;background-image: url('../../../static/images/index/noticeBg.png');background-repeat: no-repeat;background-size: 100% 100%; -->
|
|
<view style="width: 88vw;height: 70vh;background: #fff;">
|
|
<view style="width: 100%;text-align: center;height: 60px;line-height: 60px;font-weight: bold;color: #fe5907;">
|
|
￥<text style="font-size: 48rpx;">{{rowData.couponAmount}}</text>
|
|
</view>
|
|
<view style="width: 90%;margin: 0 auto;height: 35vh;display: flex;justify-content: center;">
|
|
<image :src="rowData.couponImgUrl" style="width: 100%;height: 100%;" mode="aspectFill"></image>
|
|
</view>
|
|
<view style="width: 90%;margin: 5px auto;padding: 10px;height: 18vh;display: flex;flex-direction: column;justify-content: center;overflow-y: auto;border-top: 1px solid #ccc;color: #000;">
|
|
<view style="margin-bottom: 10px;">食堂： {{rowData.canteenNameStr || '所有食堂可用'}}</view>
|
|
<view style="margin-bottom: 10px;">档口： {{rowData.shopstallNameStr || '该食堂所有档口'}}</view>
|
|
<view style="margin-bottom: 10px;">餐次： {{rowData.intervalNameStr || '该食堂档口所有餐次'}}</view>
|
|
</view>
|
|
<view style="width: 100%;height: 40px;display: flex;align-items: center;justify-content: center;">
|
|
<view style="width: 80%;height: 40px;line-height:40px;background:#FE7900;border-radius: 10px;text-align: center;color: #FFF;" @click="showDetail=false">关闭</view>
|
|
</view>
|
|
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import Tabs from '@/pages/components/Tabs.vue'
|
|
import { couponMobileGroupApi } from '@/api/mine/index'
|
|
|
|
export default {
|
|
components: { Tabs },
|
|
data() {
|
|
return {
|
|
fontValue:uni.getStorageSync('fontSize') || 8,
|
|
active: 0,
|
|
tabIndex: 0,
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
couponState:'1',
|
|
status: 'loadmore',
|
|
tabList: [{name:'待生效',num:0},{name:'未使用',num:0},{name:'已使用',num:0}, {name:'已过期',num:0},{name:'已作废',num:0}],
|
|
tableList: [],
|
|
showDetail:false,
|
|
rowData:{}
|
|
}
|
|
},
|
|
onLoad() {
|
|
},
|
|
onShow() {
|
|
this.pageNum=1
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
// 翻页
|
|
onScrollTolower(){
|
|
console.log(this.tableList.length)
|
|
if(this.total>this.tableList.length){
|
|
this.pageNum++
|
|
this.getList()
|
|
}
|
|
},
|
|
//获取订单列表
|
|
async getList() {
|
|
console.log('获取列表')
|
|
const params = {
|
|
custId: uni.getStorageSync('custId'),
|
|
current: this.pageNum,
|
|
size: this.pageSize,
|
|
couponState:this.couponState,
|
|
}
|
|
try {
|
|
const res = await couponMobileGroupApi(params)
|
|
console.log('?? ~ getList ~ res:', res)
|
|
if(res.data.notTakeEffect>0){
|
|
this.tabList[0].num = res.data.notTakeEffect
|
|
}
|
|
if(res.data.notUse>0){
|
|
this.tabList[1].num = res.data.notUse
|
|
}
|
|
if(res.data.used>0){
|
|
this.tabList[2].num = res.data.used
|
|
}
|
|
if(res.data.expired>0){
|
|
this.tabList[3].num = res.data.expired
|
|
}
|
|
if(res.data.cancellation>0){
|
|
this.tabList[4].num = res.data.cancellation
|
|
}
|
|
this.total = res.data.page.total;
|
|
if(this.pageNum==1){
|
|
this.tableList = res.data.page.records
|
|
}else{
|
|
this.tableList.push(...res.data.page.records)
|
|
}
|
|
this.status = this.total == this.tableList.length ? 'nomore' : 'loadmore'
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
},
|
|
//翻页
|
|
onReachBottom() {
|
|
console.log('?? ~ onReachBottom ~ ')
|
|
},
|
|
handleTab(index) {
|
|
this.active = index
|
|
this.changeTab(index)
|
|
},
|
|
changeTab(index) {
|
|
console.log('?? ~ changeTab ~ index:', index)
|
|
this.tabIndex = index;
|
|
if(index==1){
|
|
this.couponState="2"
|
|
}else if(index==2){
|
|
this.couponState="3"
|
|
}else if(index==3){
|
|
this.couponState="4"
|
|
}else if(index==4){
|
|
this.couponState="5"
|
|
}else{
|
|
this.couponState="1"
|
|
}
|
|
this.pageNum=1;
|
|
this.tableList=[]
|
|
this.getList()
|
|
},
|
|
checkDetail(item) {
|
|
console.log('跳转订单详情', item)
|
|
this.rowData = item
|
|
if(this.active==1){
|
|
this.showDetail = true
|
|
}
|
|
},
|
|
open() {
|
|
// console.log('open');
|
|
},
|
|
close() {
|
|
this.showDetail = false
|
|
// console.log('close');
|
|
}
|
|
},
|
|
// onUnload() {
|
|
// uni.switchTab({
|
|
// url: '/pages/index'
|
|
// })
|
|
// },
|
|
// onBackPress(e) {
|
|
// //e.from === 'backbutton' 说明如果点击的是物理返回键或导航栏的返回键就进行以下操作
|
|
// if (e.from === 'backbutton') {
|
|
// //返回值为true 时,表示不执行默认的返回（默认返回上一页），执行自定义的返回
|
|
// uni.switchTab({
|
|
// url: '/pages/index'
|
|
// })
|
|
// //如果要限制必须写成true
|
|
// return true;
|
|
// }
|
|
// },
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background: #f9fbff;
|
|
// height: 100%;
|
|
height: 95vh;
|
|
.top-wrapper {
|
|
// padding-top: 4vh;
|
|
width: 100vw;
|
|
background: #f9fbff;
|
|
height: 95vh;
|
|
}
|
|
|
|
.item-list {
|
|
padding: 8px;
|
|
background: #fff;
|
|
// opacity: 0.5;
|
|
// background: rgba(0,0,0,0.1);
|
|
border-radius: 8px;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
margin: 0 10px;
|
|
margin-top: 15px;
|
|
|
|
.top-left{
|
|
width: 20%;border-right: 1px solid #ccc;text-align: center;
|
|
display: flex;flex-direction: column;align-items: center;
|
|
.amount{
|
|
font-size: 48rpx;font-weight: 600;
|
|
}
|
|
.btn{
|
|
width: 50px;height: 20px;line-height: 20px;font-size: 12px;
|
|
text-align: center;border-radius: 10px;background-color: #666;color: #fff;
|
|
}
|
|
}
|
|
.top-right{
|
|
width: 80%;padding-left: 20px;
|
|
}
|
|
.item-bottom{
|
|
color: #666;font-size: 28rpx;
|
|
width: 100%;height: 40px;padding: 10px;display: flex;align-items: center;justify-content: space-between;
|
|
.btn{
|
|
font-size: 12px;padding: 8rpx 20rpx;display: flex;justify-content: center;align-items: center;
|
|
border-radius: 10px;background-color: #0b60ff;color: #fff;
|
|
}
|
|
}
|
|
// .order-source {
|
|
// margin-bottom: 12px;
|
|
// font-weight: 500;
|
|
// color: #0f274b;
|
|
// }
|
|
|
|
// .intervalName {
|
|
// font-size: 24rpx;
|
|
// text-align: center;
|
|
// margin-left: 10px;
|
|
// color: #ff6816;
|
|
// border-radius: 1px 1px 1px 1px;
|
|
// border: 1px solid #ff6816;
|
|
// padding: 0 4px;
|
|
// }
|
|
|
|
// .img-cont {
|
|
// width: 100%;
|
|
// margin: 5px;
|
|
// display: flex;
|
|
// justify-content: space-between;
|
|
// width: 100%;
|
|
// }
|
|
// .img {
|
|
// width: 28%;
|
|
// margin: 10rpx;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// align-items: center;
|
|
// view {
|
|
// margin-top: 8px;
|
|
// color: #0f274b;
|
|
// }
|
|
// }
|
|
// .price {
|
|
// width: 20%;
|
|
// display: flex;
|
|
// flex-direction: column;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// color: #0f274b;
|
|
// font-weight: 400;
|
|
// font-size: 24rpx;
|
|
// }
|
|
|
|
// .btn-cont {
|
|
// display: flex;
|
|
// justify-content: flex-end;
|
|
// margin-top: 10px;
|
|
// }
|
|
}
|
|
}
|
|
.list {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
|
|
.list-item {
|
|
|
|
font-weight: 700;
|
|
font-size: 28rpx;
|
|
color: rgba(15, 39, 75, 0.8);
|
|
margin-right: 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
}
|
|
.active {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #0f274b;
|
|
z-index: 9;
|
|
}
|
|
.line {
|
|
width: 36px;
|
|
height: 8px;
|
|
background: linear-gradient(90deg, #ff6816 0%, rgba(255, 104, 22, 0) 100%);
|
|
border-radius: 4px 4px 4px 4px;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
}
|
|
}
|
|
|
|
</style>
|