增加了续期的页面

ghsApp/src/admin/home/callback.vue

@@ -0,0 +1,39 @@
+<template>
+<!-- icondaizhifu -->
+	<appResult :title="'充值成功'">
+    <view class="yourAccount">你的账号已延长至</view>
+    <view class="dateLengthen">2021-05-14</view>
+		<button class="admin-button-com big" @click="back">返回管理中心</button>
+	</appResult>
+</template>
+
+<script>
+import appResult from "@/components/app-result";
+export default {
+	name: "BillingResult", // 开单结果
+	components: {
+		appResult
+	},
+  methods: {
+    back() {
+      this.pageTo({url:'/admin/home/me', type: 3})
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.admin-button-com {
+	margin-bottom: 20px;
+	width: 100%;
+}
+.yourAccount{
+  color: #666;
+  font-size: 28upx;
+}
+.dateLengthen{
+  color: #666;
+  font-size: 28upx;
+  margin: 20upx 0 50upx;
+}
+</style>

ghsApp/src/admin/home/me.vue

@@ -47,7 +47,7 @@
           <view
             @click="
               pageTo({
-                url: '/pagesClient/official/index',
+                url: '/pagesClient/official/renewal',
                 type: 2,
               })
             "

ghsApp/src/pages.json

@@ -14,6 +14,13 @@
 				"enablePullDownRefresh": true
 			}
 		},
+    {
+			"path": "admin/home/callback",
+			"style": {
+				"navigationBarTitleText": "",
+				"enablePullDownRefresh": true
+			}
+		},
 		{
 			"path": "admin/home/console",
 			"style": {
@@ -122,6 +129,12 @@
 						"navigationBarTitleText": "提交审核"
 					}
 				},
+        {
+					"path": "official/renewal",
+					"style": {
+						"navigationBarTitleText": "续期"
+					}
+				},
 				{
 					"path": "official/callback",
 					"style": {

ghsApp/src/pagesClient/official/renewal.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="app-content">
+    <div class="banner-wrap">
+      <div class="banner-img">
+        <img :src="`${constant.imgUrl}/retail/official/pay-banner.png`" mode="widthFix" />
+        <div class="meal-det">
+          <div class="meal-title">{{ detail.name }}</div>
+          <div class="meal-introduce">{{ detail.introduce }}</div>
+        </div>
+      </div>
+      <div class="flex-center-between app-size-28" style="margin-top:20rpx;">
+        <div>软件周期</div>
+        <div>1年</div>
+      </div>
+    </div>
+    <!-- list -->
+    <div class="module-wrap">
+      <div class="module-tit">主要功能</div>
+      <div class="module-det">
+        <div class="list-wrap">
+          <div class="list" v-for="(item, index) in funcitonData" :key="index">
+            <span :class="{ 'app-color-3' : !item.has}">{{ item.name }}</span>
+            <i class="iconfont" :class="[item.has ? 'icondagou' : 'iconguanbi']"></i>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- buttom -->
+    <div class="page-btn app-footer">
+      <div class="flex-center">
+        <span></span>
+        <span class="app-price">
+          <span></span>
+          <span class="app-size-40">{{ detail.price }}</span>
+        </span>
+      </div>
+      <button class="admin-button-com middle blue" @click="wxPay">续期</button>
+    </div>
+  </div>
+</template>
+<script>
+import wexinPay from "@/utils/pay/wxPay";
+import { getMealDet, renewWxPay } from "@/api/official";
+export default {
+  name: "pay-page",
+  data() {
+    return {
+      constant: this.$constant,
+      detail: {},
+      funcitonData: []
+    };
+  },
+  methods: {
+    init() {
+      this._getMealDet()
+    },
+    _getMealDet() {
+      getMealDet({ id: 1 }).then(res => {
+        if (this.$util.isEmpty(res.data)) {
+          return false;
+        }
+        this.detail = res.data.detail;
+        this.funcitonData = res.data.function;
+      });
+    },
+    wxPay() {
+      renewWxPay({setId: '1'}).then(res => {
+        wexinPay(res.data, this.paySuccess, this.payFail)
+      })
+    },
+    // 支付成功
+    paySuccess() {
+      this.$util.pageTo({
+        url: "/official/callback",
+        type: 2
+      });
+    },
+    payFail() {
+      this.$msg("支付失败");
+    }
+  }
+};
+</script>
+
+<style lang='scss' scoped>
+.app-content {
+  background-color: #fff;
+}
+.banner-wrap {
+  padding: 32px;
+  width: calc(100% - 64px);
+  border-bottom: 20px solid $backColor;
+  .banner-img {
+    width: 100%;
+    margin-bottom: 6px;
+    position: relative;
+    .meal-det {
+      position: absolute;
+      top: 40px;
+      left: 30px;
+      width: 60%;
+      color: #fff;
+      .meal-title {
+        font-size: 42px;
+        font-weight: 600;
+        margin-bottom: 28px;
+        letter-spacing: 8px;
+      }
+      .meal-introduce {
+        line-height: 40px;
+        letter-spacing: 2px;
+      }
+    }
+  }
+}
+// list
+.module-wrap {
+  padding: 40px 30px 0;
+  .module-tit {
+    font-size: 28px;
+    font-weight: 600;
+    margin-bottom: 24px;
+  }
+  .module-det {
+    .list-wrap {
+      border: 2px solid #f9f9f9;
+      border-top: none;
+      margin-bottom: 110rpx;
+      .list {
+        @include disFlex(center, space-between);
+        padding: 20px 26px;
+        border-top: 2px solid #f9f9f9;
+        &:nth-child(odd) {
+          background-color: #eee;
+        }
+        .iconfont {
+          font-size: 30px;
+        }
+        .icondagou {
+          color: $mainColor;
+        }
+        .iconguanbi {
+          font-size: 24px;
+          color: $fontColor3;
+        }
+      }
+    }
+  }
+}
+// button
+.page-btn {
+  width: 100vw;
+  @include disFlex(center, space-between);
+  padding: 0 30px;
+  .app-price {
+    margin-bottom: 8px;
+    margin-left: 4px;
+  }
+  .red {
+    width: 270px;
+  }
+  .admin-button-com {
+    width: 200px;
+    font-size: 32px;
+  }
+}
+</style>