初始上传

addon/pc/source/os/pages/member/recharge_detail.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="box">
+    <div class="null-page" v-show="yes"></div>
+
+    <el-card class="box-card recharge-detail-wrap">
+      <div slot="header" class="clearfix">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item :to="{ path: '/member/account' }">账户余额</el-breadcrumb-item>
+          <el-breadcrumb-item :to="{ path: '/member/recharge_list' }">充值套餐列表</el-breadcrumb-item>
+          <el-breadcrumb-item>充值套餐详情</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+
+      <div class="recharge-detail" v-loading="loading">
+        <el-image :src="$img(rechargeInfo.cover_img)" fit="contain"></el-image>
+        <p class="recharge-money">
+          <span class="buy-price">￥{{ rechargeInfo.buy_price }}</span>
+          <span class="face-price">￥{{ rechargeInfo.face_value }}</span>
+        </p>
+        <p class="recharge-name">{{ rechargeInfo.recharge_name }}</p>
+        <p class="recharge-point">额外赠送：{{ rechargeInfo.point }}积分</p>
+        <p class="recharge-growth">额外赠送：{{ rechargeInfo.growth }}成长值</p>
+        <div class="recharge-btn">
+          <el-button @click="recharge">立即充值</el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+  import {rechargeDetail, recharge} from "@/api/member/account"
+  import {mapGetters} from 'vuex';
+
+  export default {
+    name: "recharge-detail",
+    layout: "member",
+    components: {},
+    data: () => {
+      return {
+        id: '',
+        rechargeInfo: {},
+        loading: true,
+        isSub: false,
+        yes: true
+      }
+    },
+    created() {
+      this.id = this.$route.query.id;
+      this.getRechargeInfo();
+    },
+    computed: {
+      ...mapGetters(['defaultGoodsImage'])
+    },
+    mounted() {
+      let self = this;
+      setTimeout(function () {
+        self.yes = false
+      }, 300)
+    },
+    methods: {
+      //获取详情
+      getRechargeInfo() {
+        rechargeDetail({
+          recharge_id: this.id
+        }).then(res => {
+          if (res.code == 0 && res.data) {
+            this.rechargeInfo = res.data;
+            if (res.data.cover_img == '') {
+              this.rechargeInfo.cover_img = this.defaultGoodsImage;
+            }
+          } else {
+            this.$message.warning(res.message)
+          }
+          this.loading = false
+        }).catch(err => {
+          this.loading = false
+        })
+      },
+      recharge() {
+        if (this.isSub) return
+        this.isSub = true
+
+        recharge({
+          recharge_id: this.id
+        }).then(res => {
+          if (res.data && res.code == 0) {
+            this.$router.push({path: '/pay', query: {code: res.data}});
+          } else {
+            this.$message.warning(res.message)
+          }
+          this.isSub = false
+        }).catch(err => {
+          this.isSub = false
+          this.$message.error(err.message)
+        })
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .box {
+    width: 100%;
+    position: relative;
+  }
+
+  .null-page {
+    width: 100%;
+    height: 730px;
+    background-color: #FFFFFF;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9;
+  }
+
+  .el-card.is-always-shadow,
+  .el-card.is-hover-shadow:focus,
+  .el-card.is-hover-shadow:hover {
+    box-shadow: unset;
+  }
+
+  .el-card {
+    border: 0;
+  }
+
+  .recharge-detail-wrap {
+  }
+
+  .recharge-detail {
+    width: 300px;
+
+    .recharge-money {
+      .buy-price {
+        font-size: 25px;
+        color: $base-color;
+        font-weight: 600;
+        margin-right: 10px;
+      }
+
+      .face-price {
+        text-decoration: line-through;
+        color: #898989;
+      }
+    }
+
+    .recharge-name {
+      margin: 10px 0;
+      font-size: 16px;
+    }
+
+    .recharge-btn {
+      margin-top: 30px;
+      text-align: center;
+
+      .el-button {
+        width: 300px;
+        background-color: $base-color;
+        color: #FFFFFF;
+      }
+    }
+  }
+</style>