<template>
|
<view class="combo-page">
|
<view class="combo-toolbar">
|
<picker class="source-picker" mode="selector" :range="sourceOptions" :value="sourceIndex" @change="handleSourceChange">
|
<view class="source-picker__inner">
|
<text class="source-picker__text">{{ currentSource }}</text>
|
<image class="source-picker__icon" src="/static/icon/ar_drop@2x.png" mode="aspectFit"></image>
|
</view>
|
</picker>
|
<view class="search-box">
|
<image class="search-box__icon" src="/static/icon/ic_search@2x.png" mode="aspectFit"></image>
|
<input
|
v-model="keyword"
|
class="search-box__input"
|
type="text"
|
placeholder="搜索套餐名称"
|
placeholder-class="search-box__placeholder"
|
confirm-type="search"
|
@input="handleKeywordInput"
|
@confirm="handleKeywordConfirm"
|
/>
|
</view>
|
</view>
|
|
<view class="combo-tabs">
|
<view
|
v-for="item in tabs"
|
:key="item.value"
|
:class="activeTab === item.value ? 'combo-tabs__item active' : 'combo-tabs__item'"
|
@click="handleTabChange(item.value)"
|
>
|
{{ item.label }}
|
</view>
|
</view>
|
|
<view class="combo-list" v-if="list.length">
|
<view class="combo-card" v-for="item in list" :key="item.id">
|
<view class="combo-card__head">
|
<view class="combo-card__title u-line-1">{{ item.name || '-' }}</view>
|
<view :class="Number(item.status) === 0 ? 'combo-card__status is-normal' : 'combo-card__status is-invalid'">
|
{{ item.statusText }}
|
</view>
|
</view>
|
|
<view class="combo-card__info">适用范围：{{ item.scope }}</view>
|
<view class="combo-card__info">骑行限制：{{ item.limit }}</view>
|
<view class="combo-card__info">购买渠道：{{ item.source }}</view>
|
<view class="combo-card__info">购买时间：{{ item.buyTime }}</view>
|
|
<view class="combo-card__foot">
|
<view class="combo-card__date">有效期：{{ item.validDate }}</view>
|
<view class="combo-card__price">¥{{ item.price }}</view>
|
</view>
|
</view>
|
<view class="combo-list__tips" v-if="loading">加载中...</view>
|
<view class="combo-list__tips" v-else-if="finished">没有更多了</view>
|
</view>
|
|
<view class="combo-empty" v-else>
|
<text>{{ loading ? '加载中...' : '暂无套餐数据' }}</text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
onLoad() {
|
this.getList(true)
|
},
|
onPullDownRefresh() {
|
this.getList(true)
|
},
|
onReachBottom() {
|
if (!this.loading && !this.finished) {
|
this.getList()
|
}
|
},
|
data() {
|
return {
|
keyword: '',
|
keywordTimer: null,
|
sourceIndex: 0,
|
activeTab: 0,
|
page: 1,
|
capacity: 10,
|
loading: false,
|
finished: false,
|
sourceOptions: ['订单来源', '小程序端', '抖音端'],
|
tabs: [
|
{ label: '正常', value: 0 },
|
{ label: '作废', value: 1 }
|
],
|
list: []
|
};
|
},
|
computed: {
|
currentSource() {
|
return this.sourceOptions[this.sourceIndex] || this.sourceOptions[0]
|
}
|
},
|
beforeDestroy() {
|
if (this.keywordTimer) {
|
clearTimeout(this.keywordTimer)
|
this.keywordTimer = null
|
}
|
},
|
methods: {
|
handleSourceChange(event) {
|
this.sourceIndex = Number(event.detail.value)
|
this.getList(true)
|
},
|
handleKeywordInput() {
|
if (this.keywordTimer) {
|
clearTimeout(this.keywordTimer)
|
}
|
this.keywordTimer = setTimeout(() => {
|
this.getList(true)
|
}, 300)
|
},
|
handleKeywordConfirm() {
|
if (this.keywordTimer) {
|
clearTimeout(this.keywordTimer)
|
this.keywordTimer = null
|
}
|
this.getList(true)
|
},
|
handleTabChange(value) {
|
if (this.activeTab === value) {
|
return
|
}
|
this.activeTab = value
|
this.getList(true)
|
},
|
formatScope(item) {
|
const scopes = []
|
if (Number(item.iselecbike) === 1) {
|
scopes.push('电动车')
|
}
|
if (Number(item.isbike) === 1) {
|
scopes.push('自行车')
|
}
|
return scopes.length ? scopes.join(' | ') : '-'
|
},
|
formatLimit(limitType) {
|
return Number(limitType) === 1 ? '限制' : '不限'
|
},
|
formatChannel(channel) {
|
return Number(channel) === 1 ? '抖音团购' : '小程序端'
|
},
|
formatDateRange(start, end) {
|
if (!start && !end) {
|
return '-'
|
}
|
return `${start || '-'} 至 ${end || '-'}`
|
},
|
formatPrice(price) {
|
const value = Number(price)
|
if (Number.isNaN(value)) {
|
return '0.00'
|
}
|
return value.toFixed(2)
|
},
|
formatStatus(status) {
|
return Number(status) === 1 ? '作废' : '正常'
|
},
|
mapList(list) {
|
return (list || []).map((item, index) => ({
|
...item,
|
id: item.id || `${this.page}-${index}-${item.createDate || ''}`,
|
scope: this.formatScope(item),
|
limit: this.formatLimit(item.limitType),
|
source: this.formatChannel(item.channel),
|
buyTime: item.createDate || '-',
|
validDate: this.formatDateRange(item.useStartDate, item.useEndDate),
|
price: this.formatPrice(item.price),
|
statusText: this.formatStatus(item.status)
|
}))
|
},
|
async getList(reset = false) {
|
if (this.loading) {
|
return
|
}
|
|
if (reset) {
|
this.page = 1
|
this.finished = false
|
this.list = []
|
}
|
|
this.loading = true
|
try {
|
const model = {
|
status: this.activeTab
|
}
|
if (this.sourceIndex > 0) {
|
model.channel = this.sourceIndex - 1
|
}
|
if (this.keyword.trim()) {
|
model.name = this.keyword.trim()
|
}
|
|
const res = await this.$u.api.memberDiscountPage({
|
capacity: this.capacity,
|
page: this.page,
|
model
|
})
|
|
if (res.code === 200) {
|
const records = this.mapList(res.data.records)
|
this.list = reset ? records : this.list.concat(records)
|
this.finished = records.length < this.capacity
|
if (!this.finished) {
|
this.page += 1
|
}
|
}
|
} finally {
|
this.loading = false
|
uni.stopPullDownRefresh()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page {
|
background: #f6f6f6;
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.combo-page {
|
min-height: 100vh;
|
box-sizing: border-box;
|
}
|
|
.combo-toolbar {
|
display: flex;
|
align-items: center;
|
background-color: #ffffff;
|
padding: 12rpx 30rpx;
|
box-sizing: border-box;
|
position: sticky;
|
top: 0;
|
left: 0;
|
z-index: 9;
|
}
|
|
.source-picker {
|
width: 176rpx;
|
flex-shrink: 0;
|
margin-right: 16rpx;
|
}
|
|
.source-picker__inner {
|
height: 64rpx;
|
padding: 0 22rpx;
|
background: #F7F7F7;
|
border-radius: 36rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
box-sizing: border-box;
|
}
|
|
.source-picker__text {
|
font-size: 24rpx;
|
color: #666666;
|
}
|
|
.source-picker__icon {
|
width: 20rpx;
|
height: 12rpx;
|
margin-left: 12rpx;
|
}
|
|
.search-box {
|
flex: 1;
|
height: 64rpx;
|
padding: 0 22rpx;
|
background: #F7F7F7;
|
border-radius: 32rpx;
|
display: flex;
|
align-items: center;
|
box-sizing: border-box;
|
}
|
|
.search-box__icon {
|
width: 28rpx;
|
height: 28rpx;
|
margin-right: 12rpx;
|
flex-shrink: 0;
|
}
|
|
.search-box__input {
|
flex: 1;
|
height: 64rpx;
|
font-size: 24rpx;
|
color: #333333;
|
}
|
|
.search-box__placeholder {
|
color: #bdbdbd;
|
font-size: 24rpx;
|
}
|
|
.combo-tabs {
|
height: 88rpx;
|
background-color: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
position: sticky;
|
top: 88rpx;
|
left: 0;
|
z-index: 9;
|
}
|
|
.combo-tabs__item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
position: relative;
|
padding: 0 8rpx 16rpx;
|
font-size: 34rpx;
|
font-weight: 500;
|
color: #666666;
|
line-height: 1;
|
}
|
|
.combo-tabs__item.active {
|
color: #01b6ad;
|
font-weight: 600;
|
}
|
|
.combo-tabs__item.active::after {
|
content: '';
|
position: absolute;
|
left: 50%;
|
bottom: 0;
|
transform: translateX(-50%);
|
width: 52rpx;
|
height: 6rpx;
|
border-radius: 4rpx;
|
background: #01b6ad;
|
}
|
|
.combo-list {
|
display: flex;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
flex-direction: column;
|
}
|
|
.combo-list__tips {
|
padding: 20rpx 0 4rpx;
|
text-align: center;
|
font-size: 24rpx;
|
color: #999999;
|
}
|
|
.combo-card {
|
background: #ffffff;
|
border-radius: 20rpx;
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
|
overflow: hidden;
|
margin-top: 20rpx;
|
}
|
|
.combo-card:last-child {
|
margin-bottom: 0;
|
}
|
|
.combo-card__head {
|
padding: 28rpx 24rpx 0;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
}
|
|
.combo-card__title {
|
flex: 1;
|
font-size: 34rpx;
|
font-weight: 600;
|
color: #222222;
|
line-height: 48rpx;
|
padding-right: 20rpx;
|
}
|
|
.combo-card__status {
|
flex-shrink: 0;
|
font-size: 30rpx;
|
font-weight: 500;
|
line-height: 42rpx;
|
}
|
|
.combo-card__status.is-normal {
|
color: #16c7bd;
|
}
|
|
.combo-card__status.is-invalid {
|
color: #ff7a45;
|
}
|
|
.combo-card__info {
|
padding: 0 24rpx;
|
margin-top: 14rpx;
|
font-size: 28rpx;
|
color: #777777;
|
line-height: 40rpx;
|
}
|
|
.combo-card__foot {
|
margin-top: 24rpx;
|
padding: 24rpx;
|
border-top: 1rpx solid #f0f0f0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.combo-card__date {
|
flex: 1;
|
font-size: 28rpx;
|
color: #666666;
|
line-height: 40rpx;
|
padding-right: 20rpx;
|
}
|
|
.combo-card__price {
|
flex-shrink: 0;
|
font-size: 36rpx;
|
font-weight: 600;
|
color: #222222;
|
line-height: 1;
|
}
|
|
.combo-empty {
|
padding-top: 160rpx;
|
text-align: center;
|
font-size: 28rpx;
|
color: #999999;
|
}
|
</style>
|
