372 lines
7.5 KiB
Vue
372 lines
7.5 KiB
Vue
<!--
|
|
* @Date: 2023-06-30 09:27:33
|
|
* @LastEditTime: 2023-12-21 11:05:07
|
|
* @Description: content
|
|
-->
|
|
<template>
|
|
<view class="content">
|
|
<uni-nav-bar left-icon="left" color="#000000" backgroundColor="transparent" :fixed="true" :statusBar="true"
|
|
:border="false" @clickLeft="$c.back">
|
|
<view style="width: 100%; font-size: 32rpx; display: flex; align-items: center; justify-content: center; font-weight: 600;">
|
|
优惠券
|
|
</view>
|
|
|
|
</uni-nav-bar>
|
|
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
|
|
@up="getList">
|
|
<view class="tab-list">
|
|
<view @click="tabChange(i)" v-for="(item, i) in tabList" :key="i" class="tab-list-item"
|
|
:class="{ active: tabCur == i }">
|
|
{{ item.title }}
|
|
<view v-if="tabCur == i" class="arrow"></view>
|
|
</view>
|
|
</view>
|
|
<view class="list-item common_bg" v-for="(item, i) in listData" :key="i"
|
|
:class="{ dis: tabList[tabCur].type1 == 2 }">
|
|
<view class="money">
|
|
¥
|
|
<text>{{ Number(item.price) }}</text>
|
|
</view>
|
|
<view class="info">
|
|
<view class="title">满{{ item.manPrice }}减{{ item.price }}</view>
|
|
|
|
<view class="time">{{ item.endTime }}到期</view>
|
|
</view>
|
|
<view v-if="tabList[tabCur].type1 == 1" @click="toUse(item)" class="btn">
|
|
去使用
|
|
</view>
|
|
<view v-if="tabList[tabCur].type1 == 2" class="btn">
|
|
{{ item.mark }}
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getUsedCouponList } from '@/common/server/coupon.js';
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
optData: '',
|
|
tabList: [{
|
|
id: 0,
|
|
title: '可使用',
|
|
type1: 1
|
|
},
|
|
{
|
|
id: 0,
|
|
title: '不可用',
|
|
type1: 2
|
|
}
|
|
],
|
|
tabCur: 0,
|
|
downOption: {
|
|
auto: false //是否在初始化完毕之后自动执行一次下拉刷新
|
|
},
|
|
|
|
// 上拉加载的配置
|
|
upOption: {
|
|
page: {
|
|
size: 10 // 每页数据的数量,默认10
|
|
}
|
|
},
|
|
listData: [],
|
|
pageType: 1
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
this.optData = options
|
|
|
|
if (options.type) {
|
|
this.pageType = options.type
|
|
}
|
|
|
|
// setTimeout(() => {
|
|
// this.listData = [
|
|
// {
|
|
// price: '23',
|
|
// man_price: '23',
|
|
// end_time: '2333-23-23 23:23:23',
|
|
// type1: 1,
|
|
// mark: '使用'
|
|
// },
|
|
// {
|
|
// price: '23',
|
|
// man_price: '23',
|
|
// end_time: '2333-23-23 23:23:23',
|
|
// type1: 2,
|
|
// mark: '使用'
|
|
// }
|
|
// ]
|
|
// }, 1000)
|
|
},
|
|
|
|
methods: {
|
|
toUse(item) {
|
|
if (this.pageType == 1) {
|
|
this.$customRouter.navigateTo('/pages/shouye/index', {}, 'switchTab');
|
|
}
|
|
|
|
if (this.pageType == 2) {
|
|
uni.$emit('chooseCoupon', item)
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
}
|
|
},
|
|
|
|
tabChange(i) {
|
|
this.tabCur = i
|
|
|
|
this.listData = []
|
|
this.mescroll.resetUpScroll()
|
|
this.mescroll.scrollTo(0, 0)
|
|
},
|
|
|
|
async getList({
|
|
num,
|
|
size
|
|
}) {
|
|
let data = {
|
|
page: num,
|
|
type: this.pageType,
|
|
type1: this.tabList[this.tabCur].type1,
|
|
status: this.tabList[this.tabCur].id
|
|
}
|
|
|
|
if (this.pageType == 2) {
|
|
data.total_price = this.optData.total_price
|
|
}
|
|
|
|
const res = await getUsedCouponList(data);
|
|
if (res.status == 1) {
|
|
if (num == 1) {
|
|
this.listData = []
|
|
}
|
|
|
|
this.listData = this.listData.concat(res.data.data)
|
|
|
|
console.log(this.listData)
|
|
this.mescroll.endByPage(res.data.data.length, res.data.last_page)
|
|
}
|
|
},
|
|
|
|
back() {
|
|
uni.navigateBack()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.content {
|
|
padding: 0 0 30rpx;
|
|
background: linear-gradient(180deg, #5FCDFF 0%, #F5F5F5 100%);
|
|
min-height: 100vh;
|
|
|
|
.tab-list {
|
|
display: flex;
|
|
padding: 30rpx;
|
|
|
|
.tab-list-item {
|
|
margin-right: 40rpx;
|
|
position: relative;
|
|
padding: 16rpx 18rpx;
|
|
font-size: 20rpx;
|
|
// font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
border-radius: 8rpx;
|
|
color: #cccccc;
|
|
|
|
// .arrow {
|
|
// position: absolute;
|
|
// left: 50%;
|
|
// bottom: -14rpx;
|
|
// transform: translateX(-50%);
|
|
|
|
// width: 18rpx;
|
|
// height: 8rpx;
|
|
// background: #333333;
|
|
// border-radius: 28rpx;
|
|
// }
|
|
|
|
&.active {
|
|
font-size: 20rpx;
|
|
color: #333333;
|
|
background-color: #E6F791;
|
|
}
|
|
}
|
|
}
|
|
|
|
.list-item {
|
|
width: 710rpx;
|
|
box-sizing: border-box;
|
|
padding: 40rpx 30rpx 40rpx 10rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 auto 20rpx;
|
|
background: url($imgurl+'my/coupon.png') no-repeat 0 0 / 100% 100%;
|
|
|
|
.money {
|
|
width: 160rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
font-size: 26rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #F39205;
|
|
|
|
text {
|
|
font-weight: 400;
|
|
font-size: 70rpx;
|
|
color: #F39205;
|
|
}
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 1rpx;
|
|
height: 116rpx;
|
|
background: #666666;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
padding-left: 20rpx;
|
|
|
|
.title {
|
|
font-size: 25rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
.time {
|
|
margin-top: 20rpx;
|
|
|
|
font-size: 16rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #8A8A8A;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
width: 108rpx;
|
|
height: 56rpx;
|
|
background: #E6F791;
|
|
border-radius: 16rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 20rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
|
|
&.dis {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
}
|
|
|
|
// .coupon {
|
|
// width: 690rpx;
|
|
// margin: 30rpx auto 0;
|
|
// display: flex;
|
|
// align-items: center;
|
|
// position: relative;
|
|
// padding: 20rpx 0;
|
|
|
|
// &.dis {
|
|
// filter: grayscale(1);
|
|
// }
|
|
|
|
// .tag {
|
|
// position: absolute;
|
|
// left: 0;
|
|
// top: 0;
|
|
// border-radius: 20rpx 0 20rpx 0;
|
|
// overflow: hidden;
|
|
// background: linear-gradient(0deg, #85b9ff 0%, #b01bff 100%);
|
|
// height: 36rpx;
|
|
// padding: 0 10rpx;
|
|
// display: flex;
|
|
// align-items: center;
|
|
|
|
// font-size: 22rpx;
|
|
// font-family: Source Han Sans CN;
|
|
// font-weight: 400;
|
|
// color: #ffffff;
|
|
// }
|
|
|
|
// .coupon-l {
|
|
// width: 198rpx;
|
|
// height: 146rpx;
|
|
// display: flex;
|
|
// justify-content: center;
|
|
// align-items: center;
|
|
// border-right: 1rpx dashed #eeeeee;
|
|
|
|
// font-size: 24rpx;
|
|
// font-family: Source Han Sans CN;
|
|
// font-weight: 500;
|
|
// color: #ffffff;
|
|
|
|
// text {
|
|
// font-size: 40rpx;
|
|
// }
|
|
// }
|
|
|
|
// .coupon-info {
|
|
// width: 360rpx;
|
|
// box-sizing: border-box;
|
|
// padding-left: 20rpx;
|
|
|
|
// .rule {
|
|
// font-size: 28rpx;
|
|
// font-family: Source Han Sans CN;
|
|
// font-weight: 500;
|
|
// color: #ffffff;
|
|
// }
|
|
|
|
// .time {
|
|
// margin-top: 20rpx;
|
|
|
|
// font-size: 24rpx;
|
|
// font-family: Source Han Sans CN;
|
|
// font-weight: 400;
|
|
// color: #ffffff;
|
|
// }
|
|
// }
|
|
|
|
// .coupon-r {
|
|
// flex: 1;
|
|
// text-align: center;
|
|
|
|
// font-size: 28rpx;
|
|
// font-family: Source Han Sans CN;
|
|
// font-weight: 500;
|
|
// color: #ffffff;
|
|
// }
|
|
// }
|
|
}
|
|
</style> |