refactor：优惠券页面

myPages/coupon/index.rpx.scss

@@ -1,150 +1,3 @@
-/* 服务订单内容*/
-.service-order-tab-bar {
-    background: #fff;
-    display: flex;
-    justify-content: space-around;
-    height: 50px;
-    background-color: #f5f5f5;
-
-    .service-order-tab-item {
-        flex: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 16px;
-        color: #333;
-        line-height: 26px;
-    }
-
-
-    .underline {
-        border-bottom: 2px solid #FFE05C;
-    }
+.page{
+  background: #F7F7F7;
 }
-
-.bg-img {
-    background-image: url('/static/coupon/u210.png');
-    background-repeat: repeat;
-    height: 94px;
-    margin: 12px;
-}
-
-.bg-img1 {
-    background-image: url('/static/coupon/u211.png');
-    background-repeat: repeat;
-    height: 94px;
-    margin: 12px;
-}
-
-.service-order {
-    // background: #fff;
-}
-
-/* 门店列表 */
-.store-wrap {
-    border-radius: 2px;
-    padding-bottom: 12px;
-    padding-left: 12px;
-    padding-right: 12px;
-
-    .row-list {
-        .store-content {
-            display: flex;
-            align-items: center;
-            height: 94px;
-            color: #333333;
-
-            .h-left-content {
-                width: 26%;
-                text-align: center;
-
-                .h-text {
-                    width: 100%;
-                    font-weight: 400;
-                    line-height: 18px;
-                    font-size: 12px;
-
-                    .money {
-                        font-size: 18px;
-                        font-weight: bold;
-                        line-height: 26px;
-                    }
-                }
-            }
-
-            .h-center-content {
-                width: 50%;
-                padding-left: 12px;
-
-                .title {
-                    width: 100%;
-                    color: #999999;
-                    font-size: 12px;
-                    line-height: 18px;
-
-                    .h-value {
-                        font-size: 18px;
-                        line-height: 32px;
-                        color: #333333;
-                    }
-                }
-            }
-
-            .h-right-content {
-                width: 24%;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background-image: url('/static/coupon/u2102.png');
-                height: 94px;
-
-                .h-btn-value-use {
-                    background: #FFE05C;
-                    color: #333333;
-                    height: 30px;
-                    width: 80px;
-                    text-align: center;
-                    line-height: 30px;
-                    border-radius: 15px;
-                    font-size: 14px;
-                }
-
-                .h-btn-value-receive {
-                    background: #93D21A;
-                    color: #fff;
-                    height: 30px;
-                    width: 80px;
-                    text-align: center;
-                    line-height: 30px;
-                    border-radius: 15px;
-                }
-
-                .h-btn-img {
-                    display: flex;
-                    align-items: center;
-
-                    image {
-                        height: 68px;
-                        width: 68px;
-                    }
-                }
-            }
-        }
-
-    }
-
-}
-
-/* 产品订单 */
-.product-order {
-    margin-top: 12px;
-}
-
-/* 底部 */
-.footer {
-    margin-top: 30px;
-    height: 120px;
-    font-size: 12px;
-    text-align: center;
-    color: #666;
-}

myPages/coupon/index.vue

@@ -1,71 +1,29 @@
 <template>
-    <view class="order-content-wrap">
+    <view class="page">
+        <u-sticky>
+            <View class=" tabs">
+                <u-tabs :list="tabList" :scrollable="false"
+                        lineWidth="30"
+                        lineColor="#FFE05C"
+                        :activeStyle="{
+            					color: '#333333',
+            					fontWeight: 'bold',
+            					transform: 'scale(1.05)'
+       							 }"
+                        :current="tabIndex" @click="clickTab"></u-tabs>
+            </View>
+        </u-sticky>
 
-        <!-- 导航-->
-        <view class="service-order-tab-bar">
-            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab1' }"
-                @click="changeServiceTab('orderTab1')">
-                <text :class="{ underline: currentServiceTab === 'orderTab1' }">可使用</text>
-            </view>
-            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab2' }"
-                @click="changeServiceTab('orderTab2')">
-                <text :class="{ underline: currentServiceTab === 'orderTab2' }">已使用</text>
-            </view>
-            <view class="service-order-tab-item" :class="{ active: currentServiceTab === 'orderTab3' }"
-                @click="changeServiceTab('orderTab3')">
-                <text :class="{ underline: currentServiceTab === 'orderTab3' }">已过期</text>
-            </view>
-        </view>
-
-        <view class="custom-line"></view>
-        <!-- 当前订单-->
-        <view class="service-order">
-
-            <!-- 门店列表 -->
-            <view v-if="countsList.length > 0" v-for="(item, index) in countsList" 
-                class="store-wrap  bg-img">
-                <view class="row-list">
-                    <view class="store-content">
-                        <view class="h-left-content">
-                            <view class="h-text">
-                                <view class="money">￥{{ item.discountsPrice }}</view>
-                                <view class="desc">{{ item.name }}</view>
-                            </view>
-                        </view>
-                        <view class="h-center-content">
-                            <view class="title">
-                                <text class="h-value">门店通用</text>
-                            </view>
-                            <view class="title">
-                                使用平台：<text v-if="item.strategyType == '0'">全平台</text>
-                                <text v-else-if="item.strategyType == '1'">个人优惠卷</text>
-                            </view>
-                            <view class="title">
-                                有效时间：{{ this.dateFormat(item.startTime) }}~{{ this.dateFormat(item.endTime) }}
-                            </view>
-                        </view>
-                        <view class="h-right-content">
-                            <view class="h-btn">
-                                <view @click="gotoUseCoupon()" v-if="item.state == 0" class="h-btn-value-use">立即使用</view>
-                                <!-- <view @click="gotoReceiveCoupon()" v-else-if="index == 1" class="h-btn-value-receive">立即领取</view> -->
-                                <view v-else-if="item.state == 1" class="h-btn-img">
-                                    <image src="../../static/coupon/u2109.png" mode=""></image>
-                                </view>
-                                <view v-else class="h-btn-img">
-                                    <image src="../../static/coupon/u2108.png" mode=""></image>
-                                </view>
-                            </view>
-                        </view>
+        <!-- 订单列表 -->
+        <view :style="{'height':windowHeight}" >
+            <swiper :style="{'height':windowHeight}" :current="tabIndex" @change="swiperChange">
+                <swiper-item class="swiperItem" v-for="(item,index) in tabList" :key="index" >
+                    <view>
+                        <mescroll-item ref="MescrollItem" :i="index"  :index="tabIndex" :tabs="tabList" :height="windowHeight">
+                        </mescroll-item>
                     </view>
-                </view>
-            </view>
-            <view v-else class="footer">
-                <view class="">---暂无数据---</view>
-            </view>
-
-            <view v-if="countsList.length > 0" class="footer">
-                <view class="">---到底了---</view>
-            </view>
+                </swiper-item>
+            </swiper>
         </view>
 
     </view>
@@ -73,38 +31,44 @@
 
 <script>
 
+    import MescrollItem from "./module/mescrollUni-item.vue";
 export default {
+    components: {
+        MescrollItem
+    },
     data() {
         return {
-            currentServiceTab: 'orderTab1', // 当前选中的 Tab
-            reqParm: {
-                auth: true,
-                type: 0 // 我的优惠卷列表（0未使用， 1已使用， 2已过期 null查询全部）
-            },
-            countsList: []
+            windowHeight:'',
+            tabIndex:0,
+            tabList: [{
+                name: '可使用'
+            }, {
+                name: '已使用'
+            }, {
+                name: '已过期'
+            }],
         };
     },
     onLoad() {
-
+        let sysInfo = uni.getSystemInfoSync()
+        this.windowHeight =sysInfo.windowHeight-44+'px'//除标题栏栏外的屏幕可用高度
     },
     methods: {
-        // 切换菜单
-        changeServiceTab(tab) {
-            if (tab == 'orderTab1') { //全部
-                this.reqParm.type = '0';
-            } else if (tab == 'orderTab2') {
-                this.reqParm.type = '1';
-            } else if (tab == 'orderTab3') {
-                this.reqParm.type = '2';
-            }
-
 
+        clickTab(e){
+            this.tabIndex = e.index
+        },
+        swiperChange(e){
+            this.tabIndex = e.detail.current
+            // if (this.$refs.MescrollItem[e.detail.current].orderList.length>0){
+            // 	this.$refs.MescrollItem[e.detail.current].downCallback()
+            // }
         },
     }
 }
 </script>
 
 <style scoped lang="scss">
-@import '/common/css/common.css';
+@import '../../common/css/common.css';
 @import './index.rpx.scss';
 </style>

myPages/coupon/module/index.rpx.css

@@ -0,0 +1,79 @@
+.row-list{
+    width: 686rpx;
+    height: 188rpx;
+    margin-top: 24rpx;
+    background-image: url('/static/coupon/u210.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.listBackground{
+    background-image: url('/static/coupon/u211.png');
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.h-text{
+    width: 200rpx;
+    height: 188rpx;
+}
+.h-center-content{
+    width: 298rpx;
+    height: 188rpx;
+}
+.h-right-content{
+    width: 188rpx;
+    height: 188rpx;
+}
+.money{
+    height: 52rpx;
+    font-size: 36rpx;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #333333;
+    line-height: 52rpx;
+    text-align: center;
+}
+.desc{
+    height: 36rpx;
+    font-size: 20rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 36rpx;
+    text-align: center;
+}
+.h-value{
+    font-size: 28rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+    line-height: 44rpx;
+    margin-top: 24rpx;
+    margin-left: 24rpx;
+}
+.title{
+    font-size: 20rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 36rpx;
+    margin-left: 24rpx;
+}
+.h-btn-value-use{
+    width: 156rpx;
+    height: 64rpx;
+    background: #93D21A;
+    border-radius: 32rpx;
+
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 64rpx;
+    text-align: center;
+}
+.h-btn-img{
+    width: 136rpx;
+    height: 136rpx;
+}

myPages/coupon/module/mescrollUni-item.vue

@@ -0,0 +1,184 @@
+<template>
+	<!--
+    swiper中的transfrom会使fixed失效,此时用height固定高度;
+    swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不能用mescroll-body
+    -->
+	<!-- ref动态生成: 字节跳动小程序编辑器不支持一个页面存在相同的ref (如不考虑字节跳动小程序可固定值为 ref="mescrollRef") -->
+	<!-- top的高度等于悬浮菜单tabs的高度 -->
+	<mescroll-uni :ref="'mescrollRef' + i" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
+		:up="upOption" @up="upCallback" @emptyclick="emptyClick">
+
+		<view class="flex-row justify-center">
+
+			<view class="flex-col">
+
+				<view  class="row-list flex-row justify-start" :class="item.state == '0'?'':'listBackground'" v-for="(item,index) in list" :key="index" >
+
+					<view class="h-text flex-col justify-center ">
+						<view class="money">
+							<text>￥{{item.discountsPrice}}</text>
+						</view>
+						<view class="desc">
+							<text>{{item.name}}</text>
+						</view>
+					</view>
+
+					<view class="h-center-content flex-col ">
+						<view class="h-value">
+							<text>门店通用</text>
+						</view>
+						<view class="title">
+							使用平台：<text v-if="item.strategyType == '0'">全平台</text>
+							<text v-else-if="item.strategyType == '1'">个人优惠卷</text>
+						</view>
+						<view class="title">
+							使用次数：{{item.degree}}
+						</view>
+						<view class="title">
+							到期时间：{{item.endTime.substring(0,10)}}
+						</view>
+					</view>
+
+					<view class="h-right-content flex-col justify-center ">
+							<view v-if="item.state == 0" ></view>
+<!--							<view @click="gotoUseCoupon(item)" v-if="item.state == 0" class="h-btn-value-use">立即使用</view>-->
+							<!-- <view @click="gotoReceiveCoupon()" v-else-if="index == 1" class="h-btn-value-receive">立即领取</view> -->
+							<view v-else-if="item.state == 1" class="h-btn-img">
+								<image class="h-btn-img" src="/static/coupon/u2109.png" mode=""></image>
+							</view>
+							<view v-else class="h-btn-img">
+								<image class="h-btn-img" src="/static/coupon/u2108.png" mode=""></image>
+							</view>
+					</view>
+
+				</view>
+			</view>
+
+
+
+
+		</view>
+
+	</mescroll-uni>
+</template>
+
+<script>
+import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"
+export default {
+	mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
+	components: {
+	},
+
+	data() {
+		return {
+			downOption: {
+				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
+			},
+			upOption: {
+				auto: false, // 不自动加载
+				// page: {
+				// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
+				// 	size: 10 // 每页数据的数量
+				// },
+				noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
+				empty: {
+					icon: '/static/imageIcon/empty.png',
+					tip: '暂无内容', // 提示
+					// btnText: '去看看'
+				},
+				textNoMore: '没有更多了'
+			},
+			list: [],
+		}
+	},
+	props: {
+		i: Number, // 每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+		index: { // 当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
+			type: Number,
+			default() {
+				return 0
+			}
+		},
+		dataTime: {
+			type: String,
+			default() {
+				return ''
+			}
+		},
+
+		tabs: { // 为了请求数据,演示用,可根据自己的项目判断是否要传
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		height: [Number, String], // mescroll的高度
+
+	},
+	watch: {
+
+	},
+
+	created() {
+	},
+
+	methods: {
+
+
+
+		/*下拉刷新的回调 */
+		downCallback() {
+			// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
+			// loadSwiper();
+			// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
+			this.mescroll.resetUpScroll()
+		},
+		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+		upCallback(page) {
+
+			//联网加载数据
+			let httpData = {
+				pageNum: page.num,
+				pageSize: 10,
+				type: this.index
+			}
+
+			this.$api.getMyCouponList(httpData).then((res) => {
+				//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
+				this.mescroll.endSuccess(res.data.rows.length, res.data.rows.length === 10);
+				//设置列表数据
+				if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
+				this.list = this.list.concat(res.data.rows); //追加新数据
+				console.log(this.list)
+			}).catch((err) => {
+				//联网失败, 结束加载
+				this.mescroll.endErr();
+			})
+
+
+		},
+
+		//点击空布局按钮的回调
+		emptyClick() {
+			uni.showToast({
+				title: '点击了按钮,具体逻辑自行实现'
+			})
+		},
+		// 搜索
+		doSearch() {
+			this.list = []; // 先清空列表,显示加载进度
+			this.mescroll.resetUpScroll();
+		},
+
+		gotoUseCoupon(item){
+			console.log(item)
+		}
+
+	}
+}
+</script>
+<style>
+@import '/common/css/common.css';
+@import './index.rpx.css';
+</style>

myPages/rechargeRecord/index.vue

@@ -72,6 +72,6 @@
     };
 </script>
 <style lang="scss" scoped>
-    @import '/common/css/common.css';
+    @import '../../common/css/common.css';
     @import './index.rpx.css';
 </style>

myPages/rechargeRecord/module/mescrollUni-item.vue

@@ -107,7 +107,7 @@
 
 				</view>
 			</view>
-		</view>>
+		</view>
 	</mescroll-uni>
 </template>