123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- <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" @input="vailRcode" placeholder="请输入充值码(8位字母或数字)" :maxlength="8" input-align="center" />
- </view>
- <u-button class="recharge-btn" shape="circle" :custom-style="customBtnStyle" hover-class="none" @click="goRecharge">立即充值</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>{{ldNum}}乐豆已计入您的乐豆余额。</view>
- </view>
- <view class="know-btn" @click="toPage">我知道了</view>
- </view>
- </u-popup>
- </view>
- </template>
- <script>
- import { giftCardUseCard } from '@/api/coupon'
- export default{
- data(){
- return{
- rechargeCode: '', // 充值码
- customBtnStyle: { // 自定义按钮样式
- borderColor: '#01ad99',
- backgroundColor: '#01ad99',
- color: '#fff'
- },
- messagePop: false, // 充值成功提示框
- ldNum: 0 // 充值乐豆数
- }
- },
- onLoad() {
- this.messagePop = false
- this.ldNum = 0
- this.rechargeCode = ''
- },
- methods: {
- // 校验卡号输入,只能输入字母和数字
- vailRcode(event){
- console.log(event)
- this.rechargeCode = event.replace(/[^\w\.\/]/ig,'')
- },
- // 立即充值
- goRecharge(){
- if(!this.rechargeCode){
- uni.showToast({
- title:"请输入充值码",
- icon:"none"
- })
- return
- }
- giftCardUseCard({ sequence: this.rechargeCode }).then(res => {
- if(res.status == 200){
- this.ldNum = res.data
- this.messagePop = true
- }else{
- this.ldNum = 0
- this.messagePop = false
- }
- })
- },
- // 跳转
- toPage(){
- uni.navigateBack()
- }
- }
- }
- </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>
|