【优化】优化【我的服务卡】界面效果,调整为'正常', '过期', '作废', '已核销',同时优化查询及核销验证方法。

This commit is contained in:
大灰灰
2022-10-16 21:23:14 +08:00
parent 66b78954cf
commit d8d564e5dd
7 changed files with 168 additions and 35 deletions

View File

@@ -383,7 +383,9 @@ const install = (Vue, vm) => {
//获取个人服务订单列表
let getUserServicesPageList = (params, config = {}) => http.post('/Api/User/GetServicesPageList', params, { custom: { methodName: 'user.getServicesPageList', needToken: true } });
//获取服务卡下用户券列表
//获取单个服务订单
let getServicesById = (params, config = {}) => http.post('/Api/User/GetServicesById', params, { custom: { methodName: 'user.getServicesTickets', needToken: true } });
//获取单个服务订单下面服务券
let getServicesTickets = (params, config = {}) => http.post('/Api/User/GetServicesTickets', params, { custom: { methodName: 'user.getServicesTickets', needToken: true } });
@@ -598,6 +600,7 @@ const install = (Vue, vm) => {
getServiceDetail,
addServiceOrder,
getUserServicesPageList,
getServicesById,
getServicesTickets,
getverificationPageList,
serviceLogDelete,

View File

@@ -12,6 +12,9 @@
.top { color: #ff9900; font-size: 14px;
.big { font-size: 25px; font-weight: bold; margin-right: 5px; }
}
.topD { color: #82848a; font-size: 14px; text-decoration: line-through;
.big { font-size: 25px; font-weight: bold; margin-right: 5px; }
}
.type { font-size: 14px; color: #82848a; }
.date { margin-top: 5px; font-size: 10px; color: #82848a; }
}

View File

@@ -34,25 +34,33 @@
<view class="coreshop-text-gray coreshop-font-xs coreshop-flex coreshop-flex-nowrap coreshop-padding-10">
兑换级别
<view class="coreshop-width-fit-content coreshop-padding-right-5" v-if="info.allowedMemberships && info.allowedMemberships.length>0" v-for="(item, index) in info.allowedMemberships" :key="index">
<u-tag :text="item" mode="light" size="mini" class="coreshop-margin-right-5" />
<u-tag :text="item" mode="light" size="mini" class="coreshop-margin-right-5" />
</view>
</view>
<view class="coreshop-text-gray coreshop-font-xs coreshop-flex coreshop-flex-nowrap coreshop-padding-10">
兑换门店
<view class="coreshop-width-fit-content coreshop-padding-right-3" v-if="info.consumableStores && info.consumableStores.length>0" v-for="(item, index) in info.consumableStores" :key="index">
<view class="coreshop-width-fit-content coreshop-padding-right-3" v-if="info.consumableStores && info.consumableStores.length>0" v-for="(item, index) in info.consumableStores" :key="index">
<view class="coreshop-bg-orange-light sm coreshop-padding-4 coreshop-margin-right-5">{{item}}</view>
</view>
</view>
</view>
</view>
<view class="coreshop-padding-left-15 coreshop-padding-right-15 coreshop-padding-top-15">
<u-subsection :list="items" :current="current" :animation="true" @change="onClickItem" active-color="#ff9900"></u-subsection>
</view>
<view class="taobao">
<view class="ticket" :class="item.status==3?'grayscale':''" v-if="list.length" v-for="(item, index) in list" :key="index" @click="showQrcodeBox(index)">
<view class="ticket" :class="item.status==3?'grayscale':''" v-if="listData.length" v-for="(item, index) in listData" :key="index" @click="showQrcodeBox(index)">
<view class="left">
<view class="introduce">
<view class="top">
核销码
<text class="big">{{item.redeemCode}}</text>
<view class="top" v-if="current==0">
核销码<text class="big">{{item.redeemCode}}</text>
</view>
<view class="topD" v-if="current!=0">
核销码<text class="big">{{item.redeemCode}}</text>
</view>
<view class="type">{{item.validityType==1?'长期有效':'限时间段内消费'}}</view>
<view class="date u-line-1" v-if="item.validityStartTime && item.validityEndTime">{{item.validityStartTime}} {{item.validityEndTime}}</view>
@@ -77,16 +85,19 @@
<script>
import uQRCode from '@/common/utils/uqrcode.js'
export default {
computed: {
},
data() {
return {
items: ['正常', '过期', '作废', '已核销'],
current: 0,
page: 1,
limit: 10,
list: [],
listData: [],
serviceOrderId: '',
info: {},
show: false,
@@ -101,7 +112,8 @@
},
onLoad(e) {
this.serviceOrderId = e.id;
this.getServicesTickets()
this.getServicesById();
this.getServicesTickets();
},
onShow() {
},
@@ -111,10 +123,33 @@
}
},
methods: {
// tab点击切换
onClickItem(index) {
if (this.current !== index) {
this.current = index;
this.page = 1;
this.listData = [];
this.getServicesTickets();
}
},
getServicesById() {
let _this = this;
let data = {
id: this.serviceOrderId
}
this.$u.api.getServicesById(data).then(res => {
if (res.status) {
this.info = res.data;
} else {
_this.$u.toast(res.msg)
}
})
},
getServicesTickets() {
let _this = this;
let data = {
id: this.serviceOrderId,
status: this.current,
page: this.page,
limit: this.limit
}
@@ -122,11 +157,10 @@
this.$u.api.getServicesTickets(data).then(res => {
if (res.status) {
this.info = res.data.model;
let _list = res.data.list
this.list = [...this.list, ..._list]
let _list = res.data
this.listData = [...this.listData, ..._list]
if (res.data.count > _this.list.length) {
if (res.data.count > _this.listData.length) {
_this.page++
_this.status = 'loadmore'
} else {
@@ -141,8 +175,11 @@
this.show = false
},
showQrcodeBox(index) {
if (this.current != 0) {
return;
}
let _this = this;
var item = _this.list[index];
var item = _this.listData[index];
if (item.status == 0) {
_this.make(item.redeemCode);
_this.show = true;

View File

@@ -36,7 +36,7 @@
</view>
<view class="coreshop-flex">
<view class='coreshop-btn exchange' @click="goServicesUserDetail(item.serviceOrderId)">立即使用</view>
<view class='coreshop-btn exchange' @click="goServicesUserDetail(item.serviceOrderId)">查看详情</view>
</view>
</view>
</view>