156 lines
3.2 KiB
Vue
156 lines
3.2 KiB
Vue
<template>
|
|
<view class="container">
|
|
<my-header-card
|
|
:options="{
|
|
name: '积分锁客',
|
|
intro: '下单可获得积分，再次下单可使用积分抵扣',
|
|
icon: 'https://cashier-oss.oss-cn-beijing.aliyuncs.com/upload/4/11e5482336a94c2a91a10e2bf289126e.png'
|
|
}"
|
|
@load="(e) => (headHeight = e.height)"
|
|
></my-header-card>
|
|
<view class="content">
|
|
<setting ref="settingRef" name="setting" key="setting" v-if="tabsActive == 0" />
|
|
<productPage ref="productPageRef" name="productPage" key="productPage" v-if="tabsActive == 1" />
|
|
<record ref="recordRef" name="record" key="record" :top="headHeight + 54" v-if="tabsActive == 2" />
|
|
</view>
|
|
<view class="tab-wrap" :style="{ top: `${headHeight}px` }">
|
|
<view class="tab-list">
|
|
<view class="item" v-for="(item, index) in tabs" :class="{ active: tabsActive == index }" :key="item.value" @click="tabClickHandle(item, index)">
|
|
<text class="t">{{ item.label }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<my-footer-btn type="horizontal" showCancel @confirm="settingRef.submitHandle()" @cancel="backHandle" v-if="tabsActive == 0"></my-footer-btn>
|
|
<my-footer-btn confirmText="添加商品" type="horizontal" @confirm="toAddProduct" v-if="tabsActive == 1"></my-footer-btn>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
|
import setting from './components/setting.vue';
|
|
import productPage from './components/productPage.vue';
|
|
import record from './components/record.vue';
|
|
|
|
const settingRef = ref(null);
|
|
const productPageRef = ref(null);
|
|
const recordRef = ref(null);
|
|
|
|
const headHeight = ref(0);
|
|
const tabsActive = ref(2);
|
|
const tabs = ref([
|
|
{
|
|
value: 1,
|
|
label: '基础设置'
|
|
},
|
|
{
|
|
value: 2,
|
|
label: '商品设置'
|
|
},
|
|
{
|
|
value: 3,
|
|
label: '兑换记录'
|
|
},
|
|
{
|
|
value: 4,
|
|
label: '用户积分'
|
|
}
|
|
]);
|
|
|
|
function tabClickHandle(item, index) {
|
|
tabsActive.value = index;
|
|
}
|
|
|
|
function backHandle() {
|
|
uni.navigateBack();
|
|
}
|
|
|
|
function toAddProduct() {
|
|
uni.navigateTo({
|
|
url: '/pageMarket/points/addProduct'
|
|
});
|
|
}
|
|
|
|
onReachBottom(() => {
|
|
switch (tabsActive.value) {
|
|
case 0:
|
|
break;
|
|
case 1:
|
|
productPageRef.value.reachBottom();
|
|
break;
|
|
case 2:
|
|
recordRef.value.reachBottom();
|
|
break;
|
|
case 3:
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
|
|
onShow(() => {
|
|
switch (tabsActive.value) {
|
|
case 0:
|
|
break;
|
|
case 1:
|
|
productPageRef.value.pointsGoodsPageAjax(1);
|
|
break;
|
|
case 2:
|
|
recordRef.value.goodsRecordPageAjax(1);
|
|
break;
|
|
case 3:
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
page {
|
|
background-color: #f8f8f8;
|
|
}
|
|
</style>
|
|
<style scoped lang="scss">
|
|
$bgColor: #e6f0ff;
|
|
$primarColor: #318afe;
|
|
.content {
|
|
padding: calc(54px + 28upx) 28upx 28upx;
|
|
}
|
|
.tab-wrap {
|
|
height: 54px;
|
|
padding: 10px 14px;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
z-index: 999;
|
|
.tab-list {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
background-color: $bgColor;
|
|
padding: 6upx;
|
|
border-radius: 12upx;
|
|
.item {
|
|
flex: 1;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8upx;
|
|
.t {
|
|
color: $primarColor;
|
|
font-size: 28upx;
|
|
}
|
|
&.active {
|
|
background-color: $primarColor;
|
|
.t {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|