瀏覽代碼

我的优惠卷

lilei 4 年之前
父節點
當前提交
ae50306dc5
共有 4 個文件被更改,包括 213 次插入1 次删除
  1. 13 1
      pages.json
  2. 61 0
      pages/coupon/couponTpl.vue
  3. 76 0
      pages/coupon/index/index.vue
  4. 63 0
      pages/userCenter/index.vue

+ 13 - 1
pages.json

@@ -17,7 +17,19 @@
 				"navigationBarTitleText": "网点列表"
 			}
 		}
-	],
+	    ,{
+            "path" : "pages/userCenter/index",
+            "style" : {
+				"navigationBarTitleText": "个人中心"
+			}
+        }
+        ,{
+            "path" : "pages/coupon/index/index",
+            "style" : {
+				"navigationBarTitleText": "我的优惠卷"
+			}
+        }
+    ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",

+ 61 - 0
pages/coupon/couponTpl.vue

@@ -0,0 +1,61 @@
+<template>
+	<view class="coupon-list">
+		<view class="coupon-box">
+			<view class="coupon-head">
+				<view class="coupon-title">
+					<view class="coupon-title-1">满100减50</view>
+					<view class="coupon-title-time">有效期至:2020-05-12</view>
+				</view>
+				<view class="coupon-price">
+					¥<text>100</text>
+				</view>
+			</view>
+			<view class="coupon-desc">
+				优惠卷使用说明
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		name: 'couponTpl'
+	}
+</script>
+
+<style lang="scss">
+	.coupon-list{
+		padding: 25rpx;
+	}
+	.coupon-box{
+		background: #FFFFFF;
+		border: 1rpx solid #eee;
+		border-radius: 10rpx;
+		box-shadow: 1rpx 1rpx 5rpx #eee;
+		.coupon-head{
+			display: flex;
+			align-items: center;
+			padding: 30rpx;
+			.coupon-title{
+				flex-grow: 1;
+				font-size: 32rpx;
+				.coupon-title-time{
+					color: #999999;
+					padding-top: 15rpx;
+				}
+			}
+			.coupon-price{
+				padding: 0 15rpx;
+				color: red;
+				text{
+					font-size: 60rpx;
+				}
+			}
+		}
+		.coupon-desc{
+			border-top: 1rpx dashed #eee;
+			padding: 20rpx;
+			color: #999;
+		}
+	}
+</style>

+ 76 - 0
pages/coupon/index/index.vue

@@ -0,0 +1,76 @@
+<template>
+	<view class="pages-content">
+		<view class="tabs">
+			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
+			 swiperWidth="750"></u-tabs-swiper>
+		</view>
+		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
+			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
+				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
+					<couponTpl></couponTpl>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+	import couponTpl from '@/pages/coupon/couponTpl.vue'
+	export default {
+		components: {
+			couponTpl
+		},
+		data() {
+			return {
+				list: [{
+					name: '未使用'
+				}, {
+					name: '已使用'
+				}, {
+					name: '已过期'
+				}],
+				// 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
+				current: 0, // tabs组件的current值,表示当前活动的tab选项
+				swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
+			};
+		},
+		methods: {
+			// tabs通知swiper切换
+			tabsChange(index) {
+				this.swiperCurrent = index;
+			},
+			// 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;
+				this.$refs.uTabs.setFinishCurrent(current);
+				this.swiperCurrent = current;
+				this.current = current;
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	page{
+		height: 100%;
+	}
+	.pages-content{
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		uni-swiper{
+			flex-grow: 1;
+		}
+	}
+</style>

+ 63 - 0
pages/userCenter/index.vue

@@ -0,0 +1,63 @@
+<template>
+	<view class="user-content">
+		<!-- 头部 -->
+		<view class="user-head">
+			<view class="user-photo">
+				<u-image width="90rpx" shape="circle" height="90rpx" :src="src"></u-image>
+			</view>
+			<view class="user-info">李磊</view>
+		</view>
+		<!-- 列表 -->
+		<view class="user-list">
+			<u-cell-group>
+				<u-cell-item icon="gift" index="0" @click="toPage" title="我的优惠卷"></u-cell-item>
+				<u-cell-item icon="order" index="1" title="我的订单"></u-cell-item>
+				<u-cell-item icon="file-text" index="2" title="服务协议"></u-cell-item>
+				<u-cell-item icon="info-circle" index="3" title="关于我们"></u-cell-item>
+			</u-cell-group>
+		</view>
+		<!-- 退出 -->
+		<view class="user-btn">
+			<u-button type="error" shape="circle">退出登录</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				src: 'https://cdn.uviewui.com/uview/example/fade.jpg'
+			};
+		},
+		methods:{
+			toPage(index){
+				let pageUrl=['/pages/coupon/index/index']
+				uni.navigateTo({
+					url: pageUrl[index]
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.user-content{
+		width: 100%;
+		.user-head{
+			display: flex;
+			align-items: center;
+			padding: 35rpx;
+			.user-info{
+				flex-grow: 1;
+				padding: 0 20rpx;
+			}
+		}
+		.user-list{
+			padding:0 20rpx;
+		}
+		.user-btn{
+			padding: 85rpx 100rpx;
+		}
+	}
+</style>