py пре 2 година
родитељ
комит
6d72239847

+ 32 - 0
common/css/common.css

@@ -164,12 +164,18 @@ image {
 .fs-28{
 	font-size: 28rpx;
 }
+.fs-30{
+	font-size: 30rpx;
+}
 .fs-32{
 	font-size: 32rpx;
 }
 .fs-34{
 	font-size: 34rpx;
 }
+.fs-48{
+	font-size: 48rpx;
+}
 
 /* 字体下面横线 */
 .text-underline{
@@ -219,6 +225,9 @@ image {
 .fc-FF7F00{
 	color: #FF7F00;
 }
+.fc-41ABF5{
+	color: #41ABF5;
+}
 
 /* 背景颜色 */
 .bgc-f{
@@ -230,6 +239,16 @@ image {
 .bgc-9{
 	background-color: #999;
 }
+.bgc-41ABF5{
+	background-color: #41ABF5;
+}
+.bgc-FCE7E2{
+	background-color: #FCE7E2;
+}
+.bgc-E6E6E6{
+	background-color: #E6E6E6;
+}
+
 
 /* 圆角 */
 .b-rad-20{
@@ -266,12 +285,22 @@ image {
 .ml-10{
 	margin-left: 10rpx;
 }
+
+
+
+.mr-8{
+	margin-right: 8rpx;
+}
 .mr-12{
 	margin-right: 12rpx;
 }
 .mr-24{
 	margin-right: 24rpx;
 }
+
+
+
+
 .mb-4{
 	margin-bottom: 4rpx;
 }
@@ -281,6 +310,9 @@ image {
 .mb-12{
 	margin-bottom: 12rpx;
 }
+.mb-18{
+	margin-bottom: 18rpx;
+}
 .mb-20{
 	margin-bottom: 20rpx;
 }

+ 201 - 10
pages-my/my-ticket.vue

@@ -1,19 +1,210 @@
 <template>
-	<view class="">
-		
+	<view class="my-ticket flex-common-css">
+		<Nav title="我的优惠券" titleColor="#333" bgckgroundBox='#fff'></Nav>
+		<view class="tab-box flex-justify-around bgc-f ">
+			<view class="tab-but flex-1 flex-direction align-items-center" @click="tabStitle(index)"
+				v-for="(item, index) in tabList" :key="index">
+				<view class="fs-32 mb-18" :class="tabNum==index?'fc-41ABF5':'fc-3'">
+					{{item}}
+				</view>
+				<view v-show="tabNum==index" class="tab-hr bgc-41ABF5"></view>
+			</view>
+		</view>
+		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
+			<view class="list-box">
+				<view class="item-box display-flex mb-20" v-for="(item,index) in itemData" :key="index">
+					<view class="item-left flex-direction align-items-center flex-justify-center"
+						:class="item.type == 0?'bgc-FCE7E2':'bgc-E6E6E6'">
+						<view class="align-items-center">
+							<view class="fs-30 fw-600" :class="item.type == 0?'fc-FB3D03':'fc-9'">¥</view>
+							<view class="fs-48 fw-600" :class="item.type == 0?'fc-FB3D03':'fc-9'">10</view>
+						</view>
+						<view class="fs-24" :class="item.type == 0?'fc-6':'fc-9'">
+							满90元可用
+						</view>
+						<view class="ball"></view>
+						<view class="ball-two"></view>
+					</view>
+					<view class="item-hr" :class="item.type == 0?'':'item-hr-two'"></view>
+					<view class="item-right flex-1 bgc-f">
+						<view class="fs-28 mb-12 ticket-name text-overflow-ellipsis"
+							:class="item.type == 0?'fc-3':'fc-9'">
+							{{item.name}}
+						</view>
+						<view class="fs-24 fc-FB3D03 mb-12" v-if="item.type == 0">
+							仅剩时间:01:59:32
+						</view>
+						<view class="fs-24 fc-9 mb-12" v-else>
+							2024.05.08-2024.05.24
+						</view>
+						<view class="flex-justify-space">
+							<view class="fs-24" :class="item.type == 0?'fc-3':'fc-9'">
+								券类型:外卖券
+							</view>
+							<view class="align-items-center">
+								<view class="fs-24 fc-9">
+									规则
+								</view>
+								<image class="toRight" src="@/static/img/toRight.png" mode=""></image>
+							</view>
+						</view>
+						<view class="item-but fc-FB3D03" v-if="item.type == 0">
+							去使用
+						</view>
+						<image class="item-img" src="@/static/img/my/ysy.png" mode="" v-else-if="item.type == 1">
+						</image>
+						<image class="item-img" src="@/static/img/my/ysx.png" mode="" v-else></image>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+		<view class="bot-but flex-justify-center align-items-center bgc-f" @click="goToUrl(2)">
+			<view class="fc-41ABF5 fs-32 fw-600 mr-8">
+				去领券中心
+			</view>
+			<image class="toRight" src="@/static/img/my/to-right.png" mode=""></image>
+		</view>
 	</view>
 </template>
 
 <script>
-  export default {
-    components: {},
-    data() {
-      return {};
-    },
-    mounted() {},
-    methods: {},
-  }
+	export default {
+		components: {},
+		data() {
+			return {
+				tabList: ['待使用', '已使用', '已失效'],
+				tabNum: 0,
+				itemData: [{
+						type: 0,
+						name: '优惠券名称优惠券名称惠券名'
+					},
+					{
+						type: 0,
+						name: '优惠券名称'
+					}, {
+						type: 1,
+						name: '优惠券名称'
+					}, {
+						type: 2,
+						name: '优惠券名称优惠券名称惠券名'
+					},
+					{
+						type: 2,
+						name: '优惠券名称优惠券名称惠券名'
+					},
+					{
+						type: 2,
+						name: '优惠券名称优惠券名称惠券名'
+					}
+				]
+			};
+		},
+		mounted() {},
+		methods: {
+			tabStitle(index) {
+				this.tabNum = index
+			},
+			scrolltolower() {}
+		},
+	}
 </script>
 
 <style lang="scss" scoped>
+	.tab-box {
+		padding: 22rpx 0 4rpx 0;
+	}
+
+	.tab-hr {
+		width: 40rpx;
+		height: 4rpx;
+		border-radius: 2rpx;
+	}
+
+	.list-box {
+		padding: 24rpx 20rpx 4rpx;
+		box-sizing: border-box;
+	}
+
+	.item-hr {
+		width: 0px;
+		height: auto;
+		border-right: 1rpx dashed #FB7850;
+	}
+
+	.item-hr-two {
+		width: 0px;
+		height: auto;
+		border-right: 1rpx dashed #999;
+	}
+
+	.item-left {
+		width: 200rpx;
+		height: auto;
+		padding: 34rpx 36rpx 44rpx;
+		box-sizing: border-box;
+		position: relative;
+		border-radius: 20rpx 0 0 20rpx;
+	}
+
+	.ball {
+		width: 24rpx;
+		height: 24rpx;
+		border-radius: 50%;
+		position: absolute;
+		top: -12rpx;
+		right: -12rpx;
+		background: #F5F5F5;
+		z-index: 10;
+	}
+
+	.ball-two {
+		width: 24rpx;
+		height: 24rpx;
+		border-radius: 50%;
+		position: absolute;
+		background: #F5F5F5;
+		z-index: 10;
+		bottom: -12rpx;
+		right: -12rpx;
+	}
+
+	.item-right {
+		padding: 24rpx;
+		box-sizing: border-box;
+		border-radius: 0 20rpx 20rpx 0;
+		position: relative;
+	}
+
+	.ticket-name {
+		max-width: 280rpx;
+	}
+
+	.toRight {
+		width: 32rpx;
+		height: 32rpx;
+	}
+
+	.item-but {
+		width: 124rpx;
+		height: 52rpx;
+		text-align: center;
+		line-height: 52rpx;
+		border: 1rpx solid #FB3D03;
+		border-radius: 200rpx;
+		position: absolute;
+		bottom: 55%;
+		right: 24rpx;
+	}
+
+	.item-img {
+		width: 88rpx;
+		height: 88rpx;
+		position: absolute;
+		bottom: 40%;
+		right: 24rpx;
+	}
+
+	.bot-but {
+		padding: 22rpx 0;
+	}
 </style>

+ 27 - 0
pages-my/rule-info.vue

@@ -0,0 +1,27 @@
+<template>
+	<view class="flex-common-css">
+		<Nav title="规则详情" titleColor="#333" bgckgroundBox='#fff'></Nav>
+		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {};
+		},
+		onLoad(data) {},
+		mounted() {},
+		methods: {
+			scrolltolower() {
+				console.log('触底');
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

+ 27 - 0
pages-my/ticket-centre.vue

@@ -0,0 +1,27 @@
+<template>
+	<view class="flex-common-css">
+		<Nav title="" leftIconColor="#333" titleColor="#333"></Nav>
+		<scroll-view :scroll-y="true" class="scroll-view-css" @scrolltolower="scrolltolower">
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {},
+		data() {
+			return {};
+		},
+		onLoad(data) {},
+		mounted() {},
+		methods: {
+			scrolltolower() {
+				console.log('触底');
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

+ 1 - 1
pages.json

@@ -95,7 +95,7 @@
 		"current": 0,
 		"list": [{
 			"name": "列表调试",
-			"path": "pages/me/index",
+			"path": "pages-my/my-ticket",
 			"query": ""
 		}]
 	}

BIN
static/img/my/to-right.png


BIN
static/img/my/ysx.png


BIN
static/img/my/ysy.png