Browse Source

礼品卡

chenrui 4 years ago
parent
commit
8f47271de5

+ 9 - 0
pages.json

@@ -245,6 +245,15 @@
 					"navigationBarTitleText": "商品详情",
 					"enablePullDownRefresh": false
 				}
+			},
+			{
+			    "path" : "giftCard/giftCard",
+			    "style" :                                                                                    
+			    {
+			        "navigationBarTitleText": "我的礼品卡",
+			        "enablePullDownRefresh": false
+			    }
+			    
 			}
             ]
 	}],

+ 3 - 1
pages/userCenter/index.vue

@@ -28,6 +28,7 @@
 			<u-cell-group>
 				<u-cell-item v-if="hasLogin" icon="order" icon-size="38" :icon-style="{color:'#ff5500'}" index="0" @click="toPage" title="我的订单"></u-cell-item>
 				<u-cell-item v-if="hasLogin" icon="gift" icon-size="40" :icon-style="{color:'#aa55ff'}" index="5" @click="toPage" title="我的奖品"></u-cell-item>
+				<u-cell-item v-if="hasLogin" icon="coupon" icon-size="40" :icon-style="{color:'#f29100'}" index="6" @click="toPage" title="我的礼品卡"></u-cell-item>
 				<u-cell-item v-if="hasLogin" icon="list-dot" icon-size="36" :icon-style="{color:'#00aaff'}" index="1" @click="toPage" title="投递记录"></u-cell-item>
 				<u-cell-item icon="question-circle" icon-size="39" :icon-style="{color:'#19be6b'}" index="2" @click="toPage" title="常见问题"></u-cell-item>
 				<u-cell-item icon="phone" icon-size="40" :icon-style="{color:'#f00'}" @click="callPhone" title="联系客服"></u-cell-item>
@@ -91,7 +92,8 @@
 					'/pages/userCenter/question',
 					'/pages/agreement/agreement?fromPage=usercenter',
 					'/pages/userCenter/aboutUs',
-					'/pagesA/luckDraw/myJp?fromPage=usercenter'
+					'/pagesA/luckDraw/myJp?fromPage=usercenter',
+					'/pagesA/giftCard/giftCard'
 					]
 				uni.navigateTo({
 					url: pageUrl[index]

+ 210 - 0
pagesA/giftCard/giftCard.vue

@@ -0,0 +1,210 @@
+<template>
+	<view class="giftCard-wrap">
+		<image class="page-header" src="/static/giftcard/bg01.jpg"></image>
+		<view class="module-con">
+			<!-- 标题 -->
+			<view class="head-con">
+				<image class="tit-icon" src="/static/giftcard/tit-left.png"></image>
+				<text>礼品卡充值</text>
+				<image class="tit-icon" src="/static/giftcard/tit-right.png"></image>
+			</view>
+			<!-- 内容 -->
+			<view class="giftcard-content">
+				<image class="module-header-bg" src="/static/giftcard/module-header-bg.png"></image>
+				<view class="giftcard-main recharge-code">
+					<view class="inp-con">
+						<u-input v-model="rechargeCode" placeholder="请输入充值码" :maxlength="8" input-align="center" />
+					</view>
+					<u-button class="recharge-btn" shape="circle" :custom-style="customBtnStyle" hover-class="none" @click="messagePop=true">立即充值</u-button>
+				</view>
+				<image class="module-footer-bg" src="/static/giftcard/module-footer-bg.png"></image>
+			</view>
+		</view>
+		<view class="module-con">
+			<!-- 标题 -->
+			<view class="head-con">
+				<image class="tit-icon" src="/static/giftcard/tit-left.png"></image>
+				<text>使用规则</text>
+				<image class="tit-icon" src="/static/giftcard/tit-right.png"></image>
+			</view>
+			<!-- 内容 -->
+			<view class="giftcard-content rule-cont">
+				<image class="module-header-bg" src="/static/giftcard/module-header-bg.png"></image>
+				<view class="giftcard-main rule-con">
+					<view>1、礼品卡仅限在乐色管家助手小程序中使用;</view>
+					<view>2、礼品卡不记名、不挂失、不兑换现金;</view>
+					<view>3、礼品卡终生有效,充值成功后不支持退回;</view>
+					<view>4、最终解释权归陕西智享亿家环保科技有限公司所有。</view>
+				</view>
+				<image class="module-footer-bg" src="/static/giftcard/module-footer-bg.png"></image>
+				<!-- 背景图 -->
+				<image class="leaf-left-pic" src="/static/giftcard/leaf-left-pic.png"></image>
+				<image class="leaf-right-pic" src="/static/giftcard/leaf-right-pic.png"></image>
+				<image class="red-envelopes" src="/static/giftcard/red-envelopes.png"></image>
+			</view>
+		</view>
+		<image class="footer-bg" src="/static/giftcard/bg02.jpg"></image>
+		<!-- 充值成功提示 -->
+		<u-popup v-model="messagePop" mode="center" class="custom-pop" length="80%" border-radius="14" :mask-close-able="false">
+			<view class="custom-con">
+				<view class="pop-con">
+					<view>恭喜您,充值成功!</view>
+					<view>1000乐豆已计入您的乐豆余额。</view>
+				</view>
+				<view class="know-btn" @click="messagePop=false">我知道了</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{
+				rechargeCode: '',  //  充值码
+				customBtnStyle: {  //  自定义按钮样式
+					borderColor: '#01ad99',
+					backgroundColor: '#01ad99',
+					color: '#fff'
+				},
+				messagePop: false,  //  充值成功提示框
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.giftCard-wrap{
+		width: 100%;
+		background-color: #02c9b2;
+		.page-header{
+			display: block;
+			width: 100%;
+			height: 360rpx;
+		}
+		.module-con{
+			&:nth-child(2){
+				margin-bottom: 65rpx;
+			}
+			.head-con{
+				text-align: center;
+				.tit-icon{
+					display: inline-block;
+					width: 62rpx;
+					height: 41rpx;
+				}
+				text{
+					display: inline-block;
+					color: #fff;
+					font-size: 42rpx;
+					font-weight: bold;
+					margin: 0 20rpx;
+				}
+				.tit-icon{
+					display: inline-block;
+					vertical-align: middle;
+				}
+			}
+			.giftcard-content{
+				position: relative;
+				box-sizing: border-box;
+				padding: 0 18rpx;
+				margin-top: 38rpx;
+				.module-header-bg{
+					display: block;
+					width: 100%;
+					height: 47rpx;
+				}
+				.giftcard-main{
+					width: 92%;
+					box-sizing: border-box;
+					margin: -19rpx 4% 0;
+					padding: 0 37rpx;
+					background-color: #fff;
+					box-shadow: 0px 0px 12px rgba(0,0,0,0.35);
+				}
+				.module-footer-bg{
+					display: block;
+					width: 92%;
+					height: 34rpx;
+					margin: 0 4%;
+				}
+				.recharge-code{
+					padding-top: 100rpx;
+					padding-bottom: 100rpx;
+					.inp-con{
+						background: url(/static/giftcard/input-bg.png) no-repeat;
+						background-size: 100% 100%;
+						padding: 12rpx 0;
+					}
+					.recharge-btn{
+						display: block;
+						margin-top: 46rpx;
+					}
+				}
+				.rule-con{
+					font-size: 24rpx;
+					color: #464646;
+					line-height: 48rpx;
+					padding: 70rpx 37rpx;
+				}
+				.leaf-left-pic{
+					position: absolute;
+					bottom: 130rpx;
+					left: 0;
+					display: block;
+					width: 44rpx;
+					height: 69rpx;
+				}
+				.leaf-right-pic{
+					position: absolute;
+					bottom: -70rpx;
+					right: 0;
+					z-index: 1;
+					display: block;
+					width: 90rpx;
+					height: 97rpx;
+				}
+				.red-envelopes{
+					position: absolute;
+					bottom: 145rpx;
+					right: 0;
+					display: block;
+					width: 85rpx;
+					height: 123rpx;
+				}
+			}
+			.rule-cont{
+				margin-bottom: 16rpx;
+			}
+		}
+		.footer-bg{
+			z-index: 0;
+			display: block;
+			width: 100%;
+			height: 137rpx;
+		}
+		// 弹框样式
+		.custom-pop{
+			.custom-con{
+				text-align: center;
+				background: url(/static/giftcard/pop-bg.png) no-repeat;
+				background-size: 100% 100%;
+				font-size: 30rpx;
+				color: #5a5a5a;
+				line-height: 54rpx;
+				.pop-con{
+					padding: 195rpx 0 100rpx;
+				}
+				.know-btn{
+					color: #16d1bc;
+					padding: 20rpx 0;
+					border-top: 1rpx solid rgba(213,213,213,0.8);
+				}
+			}
+		}
+	}
+</style>

BIN
static/giftcard/bg01.jpg


BIN
static/giftcard/bg02.jpg


BIN
static/giftcard/input-bg.png


BIN
static/giftcard/leaf-left-pic.png


BIN
static/giftcard/leaf-right-pic.png


BIN
static/giftcard/module-footer-bg.png


BIN
static/giftcard/module-header-bg.png


BIN
static/giftcard/pop-bg.png


BIN
static/giftcard/red-envelopes.png


BIN
static/giftcard/tit-left.png


BIN
static/giftcard/tit-right.png