|
@@ -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>
|