|
@@ -6,38 +6,153 @@
|
|
|
<view class="back-icon" @click="goBack">
|
|
|
<u-icon name="arrow-left" color="#fff" size="32"></u-icon>
|
|
|
</view>
|
|
|
- <view class="left-icon">132213</view>
|
|
|
+ <view class="left-icon">我的巡店</view>
|
|
|
+ <view class="right-icon">
|
|
|
+ <u-icon name="more-dot-fill" color="#fff" size="28"></u-icon>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</u-navbar>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <view class="myShopTour-con">
|
|
|
+ <u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
|
|
|
+ <swiper class="data-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
|
|
|
+ <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
|
|
|
+ <scroll-view scroll-y class="scroll-con" @scrolltolower="onreachBottom">
|
|
|
+ <view class="record-con">
|
|
|
+ <view class="record-item">
|
|
|
+ <view class="item-head"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-empty text="暂无数据" img-width="120" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty>
|
|
|
+ <u-loadmore bg-color="#f8f8f8" v-if="list.length < total || status == 'loading'" :status="status" class="loadmore" />
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default{
|
|
|
- data(){
|
|
|
- return{
|
|
|
- background: {
|
|
|
- // 渐变色
|
|
|
- backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
|
|
|
- },
|
|
|
- }
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ background: {
|
|
|
+ // 渐变色
|
|
|
+ backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
|
|
|
+ },
|
|
|
+ tabList: [ // tab切换 类型
|
|
|
+ { dispName: '全部', code:'' },
|
|
|
+ { dispName: '进行中', code:'1' },
|
|
|
+ { dispName: '已完成', code:'2' },
|
|
|
+ { dispName: '已过期', code:'3' }
|
|
|
+ ],
|
|
|
+ current: 0, // tabs组件的current值,表示当前活动的tab选项
|
|
|
+ swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
|
|
|
+ pageNo: 1, // 当前页码
|
|
|
+ pageSize: 15, // 一页多少条
|
|
|
+ total: 0, // 总条数
|
|
|
+ // status: 'loading', // 加载状态
|
|
|
+ status: 'loadmore', // 加载状态
|
|
|
+ noDataText: '暂无数据', // 列表数据为空时提示文字
|
|
|
+ list: [], // 数据列表
|
|
|
}
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.pageInit()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回
|
|
|
+ goBack() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pageInit(){
|
|
|
+ this.total = 0
|
|
|
+ this.pageNo = 1
|
|
|
+ },
|
|
|
+ // tabs通知swiper切换
|
|
|
+ tabsChange(index) {
|
|
|
+ this.swiperCurrent = index
|
|
|
+ this.list = []
|
|
|
+ this.status = "loading"
|
|
|
+ },
|
|
|
+ swiperChange(event){
|
|
|
+ this.list = []
|
|
|
+ this.status = "loading"
|
|
|
+ },
|
|
|
+ // swiper-item左右移动,通知tabs的滑块跟随移动
|
|
|
+ transition(e) {
|
|
|
+ let dx = e.detail.dx;
|
|
|
+ this.$refs.uTabs.setDx(dx);
|
|
|
+ },
|
|
|
+ // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
|
|
|
+ // swiper滑动结束,分别设置tabs和swiper的状态
|
|
|
+ animationfinish(e) {
|
|
|
+ let current = e.detail.current
|
|
|
+ if(current != this.current){
|
|
|
+ this.$refs.uTabs.setFinishCurrent(current)
|
|
|
+ this.swiperCurrent = current
|
|
|
+ this.current = current
|
|
|
+ this.pageInit()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // scroll-view到底部加载更多
|
|
|
+ onreachBottom() {
|
|
|
+ if(this.list.length < this.total){
|
|
|
+ this.pageNo += 1
|
|
|
+ this.pageInit()
|
|
|
+ }else{
|
|
|
+ this.status = "nomore"
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- page{
|
|
|
- background-color: #f8f8f8;
|
|
|
- height: calc(100vh - 44px);
|
|
|
+page {
|
|
|
+ background-color: #f8f8f8;
|
|
|
+ height: calc(100vh - 44px);
|
|
|
+}
|
|
|
+.myShopTour-wrap {
|
|
|
+ height: 100%;
|
|
|
+ /* 自定义导航栏样式 */
|
|
|
+ .slot-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /* 如果您想让slot内容占满整个导航栏的宽度 */
|
|
|
+ flex: 1;
|
|
|
+ /* 如果您想让slot内容与导航栏左右有空隙 */
|
|
|
+ padding: 0 30rpx;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 28upx;
|
|
|
+ .left-icon {
|
|
|
+ flex-grow: 1;
|
|
|
+ font-size: 32upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .right-icon {
|
|
|
+ padding-left: 50upx;
|
|
|
+ }
|
|
|
+ .uni-icons {
|
|
|
+ margin-right: 10upx;
|
|
|
+ }
|
|
|
}
|
|
|
- .myShopTour-wrap{
|
|
|
- height: 100%;
|
|
|
- .slot-wrap {
|
|
|
- width: 100%;
|
|
|
- color: #fff;
|
|
|
- .left-icon{
|
|
|
- text-align: center;
|
|
|
+ // 内容
|
|
|
+ .myShopTour-con{
|
|
|
+ .data-list{
|
|
|
+ height: calc(100vh - 84px);
|
|
|
+ .swiper-item{
|
|
|
+ .scroll-con{
|
|
|
+ height: 100%;
|
|
|
+ .loadmore{
|
|
|
+ padding: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</style>
|