You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

374 lines
9.3 KiB
Vue

<template>
<view>
<scroll-view scroll-x class="bg-white nav text-center" style="margin-top: 20upx;">
<view class="flex text-center">
<view class="cu-item light flex-sub" :class="[TabCur==1?'bg-red cur text-white':'']" @tap="tabSelect"
:data-id="1">
未领用
</view>
<view class="cu-item light flex-sub" :class="[TabCur==2?'bg-red cur text-white':'']" @tap="tabSelect"
:data-id="2">
未使用
</view>
<view class="cu-item light flex-sub" :class="[TabCur==3?'bg-red cur text-white':'']" @tap="tabSelect"
:data-id="3">
已使用
</view>
</view>
</scroll-view>
<view class="bg-white" v-show="TabCur==1">
<view class="experience-title bg-gray">未领用优惠卷</view>
<view v-if="cardStoreProjectList.lengths==0">
<view class='empty cuIcon-info'></view>
<view class='empty-text text-gray'>暂无数据</view>
</view>
<view class="experience" v-for="(item,index) in cardStoreProjectLists" :key="index" @click="setTitle"
data-projectId="item.projectId" data-projectNum="item.projectNum" data-title="item.projectName">
<view class="experience-img">
<image src="../../../../../static/image/project-iocn.png"></image>
</view>
<view class="experience-content ">
<view class="experience-name ">{{item.courseProjectName}}</view>
<view class="experience-price">过期时间:
<text>{{item.courseStandardMoney}} >规则</text>
</view>
</view>
<view
style="line-height: 165rpx; font-size:40rpx ;border-left:rgb(137 137 137) dashed 2rpx;text-align: center;width: 20%; height: 135%; margin-top: -10px; "
@click="noselect()">
领用
</view>
</view>
</view>
<view class="bg-white" v-show="TabCur==2">
<view class="experience-title bg-gray">未使用优惠卷</view>
<view v-if="cardStoreProjectList.lengths==0">
<view class='empty cuIcon-info'></view>
<view class='empty-text text-gray'>暂无数据</view>
</view>
<view class="experience" v-for="(item,index) in cardStoreProjectLists" :key="index" @click="setTitle"
data-projectId="item.projectId" data-projectNum="item.projectNum" data-title="item.projectName">
<view class="experience-img">
<image src="../../../../../static/image/project-iocn.png"></image>
</view>
<view class="experience-content ">
<view class="experience-name ">{{item.courseProjectName}}</view>
<view class="experience-price">过期时间:
<text>{{item.courseStandardMoney}} >规则</text>
</view>
</view>
<view
style="border-left:rgb(137 137 137) dashed 2rpx;text-align: center;width: 20%; height: 135%; margin-top: -10px;display: flex;flex-direction: column;align-items:center; "
>
<view style="margin-top: 6px; font-size: 20px;">¥10元</view>
<view style="font-size: 6px;">优惠卷</view>
<view style="margin-top: 5px;background-color: antiquewhite; margin-top: 5px; width: 80%; background-color: antiquewhite;border-radius: 30px;">去使用</view>
</view>
</view>
</view>
<view class="bg-white" v-show="TabCur==3">
<view class="experience-title bg-gray">已使用优惠卷</view>
<view v-if="cardStoreProjectList.lengths==0">
<view class='empty cuIcon-info'></view>
<view class='empty-text text-gray'>暂无数据</view>
</view>
<view class="experience" v-for="(item,index) in cardStoreProjectLists" :key="index" @click="setTitle"
data-projectId="item.projectId" data-projectNum="item.projectNum" data-title="item.projectName">
<view class="experience-img">
<image src="../../../../../static/image/project-iocn.png"></image>
</view>
<view class="experience-content ">
<view class="experience-name ">{{item.courseProjectName}}</view>
<view class="experience-price">过期时间:
<text>{{item.courseStandardMoney}} >规则</text>
</view>
</view>
<view
style="border-left:rgb(137 137 137) dashed 2rpx;text-align: center;width: 20%; height: 135%; margin-top: -10px;display: flex;flex-direction: column;align-items:center;justify-content: center;">
<view style="margin-top: 6px; font-size: 20px;">10</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
reservationForm: {},
cardStoreProjectList: [],
cardStoreProjectLists: [{
courseProjectName: "满100减20",
courseStandardMoney: "2022-09-05"
},
{
courseProjectName: "满200减50",
courseStandardMoney: "2022-09-05"
},
],
pageInfo2: {
total: 0,
experiencelist: [],
},
pageInfo3: {
total: 0,
allStoreProjectList: [],
},
pageInfo4: {
total: 0,
subscribeList: [],
},
userInfo: null,
dotStyle: false,
cardCur: 1,
TabCur: 1,
// 轮播图
swiperList: [{
id: 1,
type: 'image',
url: "../../../../static/image/title.png"
}, ],
}
},
methods: {
noselect() {
this.TabCur = 2
console.log(this.TabCur)
},
cardSwiper(e) {
this.cardCur = e.detail.current
},
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id * 1;
this.projectPage()
},
setTitle() {},
projectPage() {
var that = this
let page = {
storeId: this.userInfo.storeId,
pageNum: 1,
pageSize: 100,
directConsumption: 1,
state: 1
}
var form = {
storeId: that.userInfo.storeId,
memberId: that.userInfo.id
}
var page1 = {
storeId: that.userInfo.storeId,
pageNum: 1,
pageSize: 100,
state: 1,
type: 1
}
if (this.TabCur == 1) {
that.$api.couAccountlist(form).then(res => {
if (res.code == '000000') {
res.rows.forEach(item => {
item.projectName = item.courseProjectName
item.priceMember = item.courseProjectMoney
})
that.cardStoreProjectList = res.rows
}
})
}
if (this.TabCur == 2) {
that.$api.projectPage(page1).then(res => {
if (res.code == '000000') {
res.pageInfo.experiencelist = res.pageInfo.list
that.pageInfo2 = res.pageInfo
} else {}
})
}
if (this.TabCur == 3) {
that.$api.projectPage(page).then(res => {
if (res.code == '000000') {
res.pageInfo.allStoreProjectList = res.pageInfo.list
that.pageInfo3 = res.pageInfo
} else {}
})
}
if (this.TabCur == 4) {
this.orderPage()
}
},
ondel(item, index) {
var page = {
id: item.id
}
this.$api.deleteOrder(page).then(res => {
if (res.code == '000000') {
this.orderPage();
} else if (res.code == '510002' || res.code == '502001') {} else {
uni.showModal({
title: '提示',
content: res.message,
showCancel: false,
success: function(res) {}
})
}
})
},
orderPage() {
var page = {
memberId: this.userInfo.id,
storeId: this.userInfo.storeId,
pageNum: 1,
pageSize: 50
}
this.$api.orderPage(page).then(res => {
if (res.code == '000000') {
res.pageInfo.list.forEach(item => {
item.editOrder = true
})
res.pageInfo.subscribeList = res.pageInfo.list
this.pageInfo4 = res.pageInfo
} else if (res.code == '510002' || res.code == '502001') {} else {
uni.showModal({
title: '提示',
content: res.message,
showCancel: false,
success: function(res) {}
})
}
})
}
},
onLoad: function(option) {
if (option.item != undefined) {
const item = JSON.parse(option.item);
this.reservationForm = item
}
},
onShow: function() {
this.userInfo = uni.getStorageSync('userInfo')
this.projectPage()
this.swiperList.reverse()
},
onPullDownRefresh: function() {
setTimeout(function() {
uni.redirectTo({
url: './reservation'
})
uni.showToast({
title: '刷新成功',
icon: 'success',
duration: 2000
});
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style>
.experience-title {
height: 100rpx;
text-align: center;
line-height: 100rpx;
font-size: 34rpx;
/* font-weight: 550; */
}
/* 推荐疗程 */
.experience {
width: 100%;
height: 165rpx;
display: flex;
/* align-items: center; */
border-bottom: 20upx solid #eee;
padding: 20rpx 15rpx;
}
.experience-img {
width: 135rpx;
padding: 10upx;
}
.experience-img image {
width: 110rpx;
height: 110rpx;
}
.experience-content {
width: 475rpx;
height: 110rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.experience-name {
height: 40rpx;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.experience-explain {
height: 36rpx;
font-size: 26rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #505050;
}
.experience-price {
height: 24rpx;
font-size: 26rpx;
margin-top: 12rpx;
}
.experience-price text {
color: #333333;
}
.experience-icon {
width: 30rpx;
display: flex;
align-items: center;
color: #ccc;
}
.subscribe {
width: 94%;
height: 200upx;
border: #dddddd 1upx solid;
box-shadow: 2upx 2upx 2upx #d0d0d0;
border-radius: 10upx;
margin: 20upx 3%;
padding: 20upx 0;
}
.subscribe-title {
padding-top: 10upx;
padding-left: 30upx;
font-size: 28upx;
font-weight: 700;
display: inline-block;
}
</style>