免费试用

store/src/admin/official/pay.vue

@@ -1,195 +1,212 @@
 <template>
-	<div class="app-content">
-		<div class="banner-wrap">
-			<div class="banner-img">
-				<img :src="`${constant.imgUrl}/retail/official/pay-banner.png`" alt />
-				<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">
-				<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 v-if="$util.isEmpty(renewOption)" class="admin-button-com middle blue" @click="pageTo({
+  <div class="app-content">
+    <div class="banner-wrap">
+      <div class="banner-img">
+        <img :src="`${constant.imgUrl}/retail/official/pay-banner.png`" alt />
+        <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">
+        <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 v-if="$util.isEmpty(renewOption)" class="flex-center">
+        <span> </span>
+        <span class="app-price">
+          <span> </span>
+          <span class="app-size-40"> </span>
+        </span>
+      </div>
+
+      <div v-else class="flex-center">
+        <span>合计</span>
+        <span class="app-price">
+          <span>￥</span>
+          <span class="app-size-40">{{ detail.price }}</span>
+        </span>
+      </div>
+
+      <button
+        v-if="$util.isEmpty(renewOption)"
+        class="admin-button-com middle blue"
+        @click="pageTo({
 			url: '/admin/official/apply',type:2
-		})">免费试用</button>
-			<button v-else class="admin-button-com middle blue" @click="wxPay">支付</button>
-		</div>
-	</div>
+		})"
+      >免费试用</button>
+      <button v-else class="admin-button-com middle blue" @click="wxPay">支付</button>
+    </div>
+  </div>
 </template>
 
 <script>
-	// import { getShopUser } from '@/utils/auth'
-	import wexinPay from '@/utils/pay/wxPay'
-	import { getMealDet, renewWxPay } from '@/api/official'
-	export default {
-		name: 'pay-page',
-		data() {
-			return {
-				constant: this.$constant,
-				detail: {},
-				funcitonData: [],
-				renewOption: null
-			}
-		},
-		onLoad() {
-			// if (!this.$util.isLogin()) {
-			// 	getShopUser()
-			// 	return false
-			// }
-			// this.init()
-		},
-		methods: {
-			init() {
-				this.$util.getCheckLogin().then(res => {
-					if (res) {
-						this._getMealDet()
+// import { getShopUser } from '@/utils/auth'
+import wexinPay from "@/utils/pay/wxPay";
+import { getMealDet, renewWxPay } from "@/api/official";
+export default {
+  name: "pay-page",
+  data() {
+    return {
+      constant: this.$constant,
+      detail: {},
+      funcitonData: [],
+      renewOption: null
+    };
+  },
+  onLoad() {
+    // if (!this.$util.isLogin()) {
+    // 	getShopUser()
+    // 	return false
+    // }
+    // this.init()
+  },
+  methods: {
+    init() {
+      this.$util.getCheckLogin().then(res => {
+        if (res) {
+          this._getMealDet();
 
-						// 续费
-						// #ifdef H5
-						let renewOption = sessionStorage.getItem('renewOption')
-						if (renewOption) {
-							this.renewOption = JSON.parse(renewOption)
-						}
-						// #endif
-					}
-				})
-			},
-			_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({ id: this.detail.id, merchantId: this.renewOption.merchantId }).then(res => {
-					wexinPay(res.data, this.paySuccess, this.payFail)
-				})
-			},
-			// 支付成功
-			paySuccess() {
-				// alert('支付成功!')
-				this.$util.pageTo({
-					url: '/official/callback',
-					type: 2,
-					query: {
-						pagestatus: 1
-						// orderSn: this.option.orderSn,
-						// payDiscountPrice: res.data.discountAmount
-					}
-				})
-			},
-			payFail() {
-				this.$msg('支付失败，请重新支付！')
-			}
-		}
-	}
+          // 续费
+          // #ifdef H5
+          let renewOption = sessionStorage.getItem("renewOption");
+          if (renewOption) {
+            this.renewOption = JSON.parse(renewOption);
+          }
+          // #endif
+        }
+      });
+    },
+    _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({
+        id: this.detail.id,
+        merchantId: this.renewOption.merchantId
+      }).then(res => {
+        wexinPay(res.data, this.paySuccess, this.payFail);
+      });
+    },
+    // 支付成功
+    paySuccess() {
+      // alert('支付成功!')
+      this.$util.pageTo({
+        url: "/official/callback",
+        type: 2,
+        query: {
+          pagestatus: 1
+          // orderSn: this.option.orderSn,
+          // payDiscountPrice: res.data.discountAmount
+        }
+      });
+    },
+    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;
-				.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: calc(100% - 60px);
-		@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;
-		}
-	}
+.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;
+      .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: calc(100% - 60px);
+  @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>