完善了免费续期页面

hdApp/src/admin/recharge/rechargeSuccess.vue

@@ -0,0 +1,95 @@
+<template>
+  <view class="app-content">
+    <view class="billing_box_bg">
+      <view class="top-view"> </view>
+      <view class="result-view">
+        <view :class="['iconfont', 'iconchenggong']"></view>
+        <view class="result-title">充值成功</view>
+        <view class="account">你的账号已延长至</view>
+        <view class="account">{{deadline}}</view>
+        <view
+          class="close_btn"
+          @click="goClose"
+        >关闭</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { rechargeRenewPay } from '@/api/recharge'
+export default {
+  name: "AppResult",
+  data () {
+    return {
+      deadline: ''
+    }
+  },
+  methods: {
+    goClose () {
+
+    },
+    getData () {
+      rechargeRenewPay().then(res => {
+        console.log(res)
+        this.deadline = res.data.deadline
+      }).catch(err => { console.log(err) })
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.billing_box_bg {
+  position: relative;
+  padding: 60px 30px;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f5f5;
+  .top-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 299px;
+    background: #3385ff;
+    border-radius: 0px 0px 83px 83px;
+  }
+  .result-view {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 70px;
+    width: 100%;
+    background: #ffffff;
+    border-radius: 20px;
+    z-index: 1;
+    .iconchenggong {
+      font-size: 170px;
+      color: $mainColor1;
+    }
+    .result-title {
+      margin: 50px 0 30px;
+      font-size: 32px;
+      font-weight: 700;
+    }
+    .close_btn {
+      line-height: 88upx;
+      text-align: center;
+      width: 550upx;
+      height: 88upx;
+      border: 1px solid #dddddd;
+      border-radius: 8px;
+      font-size: 32upx;
+      color: #666;
+      margin-top: 40upx;
+    }
+    .account {
+      font-size: 32upx;
+      color: #999;
+      margin-top: 20upx;
+    }
+  }
+}
+</style>

hdApp/src/admin/recharge/renew.vue

@@ -2,21 +2,32 @@
   <div class="app-content">
     <div class="recharge_box">
       <view class="renew">
-        续费3980/年<text class="toBuy">去购买</text>
+        续费{{initData.renew}}/年<text class="toBuy">去购买</text>
       </view>
       <view class="voucher">
-        充值<text style="color: #FF3C00;"> 5980 元</text>，免费使用一年
+        充值<text style="color: #FF3C00;">&nbsp;{{initData.recharge}}元&nbsp;</text>，免费使用一年
+      </view>
+      <view
+        class="immediately"
+        @click="onceRecharge"
+      >立即充值</view>
+      <view class="use">本次充值仅限在<text style="color: #666;">&nbsp;{{initData.shopName}}&nbsp;</text>门店使用</view>
+      <view class="use use_margin"><text style="color: #666;">{{initData.userNum}}</text> 已充值</view>
+      <view class="user_avator">
+        <image src="https://img.huaml.com/recharge/has_recharge.png"></image>
       </view>
-      <view class="immediately"></view>
     </div>
   </div>
 </template>
 
 <script>
+import { rechargeRenew, rechargeRenewPay } from '@/api/recharge'
+import wexinPay from "@/utils/pay/wxPay";
 export default {
   name: 'recharge-renew',
   data () {
     return {
+      initData: {}
     }
   },
   onLoad () {
@@ -26,8 +37,26 @@ export default {
       this._getDet()
     },
     _getDet () {
-
-    }
+      rechargeRenew().then(res => {
+        console.log(res)
+        this.initData = res.data
+      }).catch(err => { console.log(err) })
+    },
+    // 立即充值
+    onceRecharge () {
+      rechargeRenewPay().then(res => {
+        console.log(res)
+        wexinPay(res.data, this.getSuccess, this.getError)
+      }).catch(err => { console.log(err) })
+    },
+    getSuccess () {
+      uni.navigateTo({
+        url: '/admin/recharge/rechargeSuccess'
+      })
+    },
+    getError () {
+      this.$msg("支付失败!");
+    },
   }
 }
 </script>
@@ -37,7 +66,7 @@ export default {
   padding-top: 1px;
   width: 100vw;
   height: 100vh;
-  background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2687368603,3794114719&fm=26&gp=0.jpg);
+  background: url(https://img.huaml.com/recharge/free_renew.png);
   background-size: 100% 100%;
   position: relative;
   .recharge_box {
@@ -77,6 +106,36 @@ export default {
       font-weight: 700;
       margin-top: 70upx;
       text-align: center;
+      white-space: pre-wrap;
+    }
+    & > .immediately {
+      width: 520px;
+      height: 88px;
+      line-height: 88upx;
+      background: linear-gradient(0deg, #fe921e 0%, #ffd21f 100%);
+      border-radius: 44px;
+      margin: 40upx auto 0;
+      font-size: 32upx;
+      text-align: center;
+      color: #fff;
+    }
+    & > .use {
+      color: #999999;
+      font-size: 26upx;
+      text-align: center;
+      margin-top: 20upx;
+    }
+    & > .use_margin {
+      margin-top: 80upx;
+    }
+    & > .user_avator {
+      text-align: center;
+      margin-top: 20upx;
+      & > image {
+        width: 285upx;
+        height: 49upx;
+        margin: 0 auto;
+      }
     }
   }
 }

hdApp/src/api/recharge/index.js

@@ -8,4 +8,19 @@ export const rechargeBalance = data => {
 //充值记录
 export const rechargeList = data => {
 	return https.get('/recharge/list', data)
+}
+
+// 活动页
+export const rechargeRenew = data => {
+	return https.get('/recharge/renew', data)
+}
+
+// 活动页
+export const rechargeRenewPay = data => {
+	return https.get('/recharge/renew-pay', data)
+}
+
+// 活动页  
+export const rechargeRenewSuccess = data => {
+	return https.get('/recharge/renew-success', data)
 }

hdApp/src/pages.json

@@ -407,6 +407,12 @@
 					"style": {
 						"navigationBarTitleText": "免费续期"
 					}
+				},
+        {
+					"path": "rechargeSuccess",
+					"style": {
+						"navigationBarTitleText": "免费续期"
+					}
 				}
 			]
 		},