124 lines
2.4 KiB
Vue
124 lines
2.4 KiB
Vue
<template>
|
|
<view class="flex-column-start order-list-container">
|
|
<tabs-list
|
|
:list="tabsList"
|
|
:isScroll="false"
|
|
:currentIndex="curTabIndex"
|
|
flexClass="flex-row-around"
|
|
@change="onTabChange"
|
|
/>
|
|
<view class="order-list-content">
|
|
<list-page-temp
|
|
:requestData="{ status: tabsList[curTabIndex].id }"
|
|
:getDataPromise="getMyServiceCouponList"
|
|
:reloadFlag="reloadFlag"
|
|
>
|
|
<template v-slot:item="{ data }">
|
|
<service-coupon-item
|
|
:data="data"
|
|
:showOptBtn="false"
|
|
:disabled="data.status === 3 || data.status === 4"
|
|
:showOrderBtn="data.status === 2"
|
|
@jumpToDetails="jumpToDetails"
|
|
>
|
|
<image
|
|
v-if="data.status === 3"
|
|
slot="status"
|
|
class="use-icon"
|
|
src="./static/coupon_used.png"
|
|
/>
|
|
</service-coupon-item>
|
|
</template>
|
|
</list-page-temp>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import TabsList from "@/components/TabsList.vue";
|
|
import ListPageTemp from "./ListPageTemp.vue";
|
|
import ServiceCouponItem from "@/components/coupon/ServiceCouponItem";
|
|
|
|
import { getMyServiceCouponList } from "@/api/coupon";
|
|
|
|
export default {
|
|
components: {
|
|
TabsList,
|
|
ListPageTemp,
|
|
ServiceCouponItem,
|
|
},
|
|
data() {
|
|
return {
|
|
curTabIndex: 0,
|
|
reloadFlag: 0,
|
|
};
|
|
},
|
|
computed: {
|
|
tabsList() {
|
|
return [
|
|
{
|
|
name: "待使用",
|
|
id: 2,
|
|
},
|
|
{
|
|
name: "已使用",
|
|
id: 3,
|
|
},
|
|
{
|
|
name: "已过期",
|
|
id: 4,
|
|
},
|
|
];
|
|
},
|
|
},
|
|
options: {
|
|
styleIsolation: "shared",
|
|
},
|
|
onShow() {
|
|
this.reloadFlag = Math.random();
|
|
},
|
|
methods: {
|
|
getMyServiceCouponList,
|
|
onTabChange(item, index) {
|
|
this.curTabIndex = index;
|
|
},
|
|
jumpToDetails(data) {
|
|
uni.navigateTo({
|
|
url: `/pages/client/service/details?id=${data.fuwuquan_id}`
|
|
})
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.order-list-container {
|
|
height: 100%;
|
|
align-items: stretch;
|
|
justify-content: flex-start;
|
|
|
|
::v-deep {
|
|
.list-wrapper {
|
|
padding: 0 100rpx;
|
|
}
|
|
}
|
|
|
|
.order-list-content {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
padding-left: 32rpx;
|
|
|
|
::v-deep {
|
|
.coupon-price {
|
|
color: $app_fc_alarm;
|
|
}
|
|
}
|
|
|
|
.use-icon {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|