4dkankan_official/src/page/introtow/index.vue

<template>
  <div class="introduce-layout">
    <div class="introduce-bg">
      <div class="introduce-con" :style="{marginLeft:(split + 37)+'px'}">
        <div class="info">
          <p>设备ID：{{detail.childName}}</p>
        </div>
        <div class="c-dec">
          剩余点数：<span>{{detail.balance}}</span>
        </div>
        <div class="c-detail">
          <span>点数构成：{{detail.spaceContent}}</span>
        </div>
      </div>
    </div>
    <div class="plate02">
      <div>
        <div class="intro-title">
          <img src="@/assets/images/introduce-line.png" alt="">
          <p>点数充值，记录您的美好空间</p>
          <img src="@/assets/images/introduce-line1.png" alt="">

        </div>
        <p class="intro-sub">购买立即生效，拍摄安心存放</p>
        <ul class="intro-type">
          <li v-for="(item,i) in type" :key="i">
            <p class="point">{{item.capacity}}</p>
            <p class="price"><i>￥</i><span>{{item.price}}</span></p>
            <div class="btn" @click="buy(item)">立即购买</div>
          </li>
        </ul>
        <ul class="qa-con">
          <li v-for="(item,i) in qa" :key="i">
            <p>{{item.q}}</p>
            <p v-html="item.a"></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  data () {
    let type = [
      {
        capacity: '600点',
        price: '600'
      },
      {
        capacity: '800点',
        price: '800'
      },
      {
        capacity: '1000点',
        price: '1000'
      }
    ]

    let qa = [
      {
        q: '为什么需要点数充值？',
        a: '当您的基础点数不足99点时，最新拍摄的场景将无法生成，通过购买点数则可以计算存储更多场景。'
      }, {
        q: '点数充值之后还可以退款吗？',
        a: '不可以，因为点数充值之后，相应点数会立即到账生效，所以不接受中途退款，敬请谅解。'
      }, {
        q: '删除场景后会返还点数吗？',
        a: '点数充值没有有效期，所以消费后代表永久记录您的美好空间，删除场景后不会返还。'
      }, {
        q: '点数不足还可继续拍摄上传吗？',
        a: '点数不足时，不影响设备正常的拍摄，但会无法上传计算，这时只能进行删除操作；直到您的点数满足消费，此时您才可以将拍摄的场景上传计算，随之可查看、编辑和分享。'
      }
    ]
    return {
      type,
      qa,
      detail: ''
    }
  },
  computed: {
    ...mapState({
      split: state => state.ui.navDivision,
      info: state => state.user.info,
      token: state => state.user.token
    })
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    buy (item) {
      this.$toast.showPointRecharge(item, this.detail.childName, this.detail.id)
    },
    async getDetail () {
      let {id} = this.$route.params
      let params = {
        childName: id
      }
      let result = await this.$http({
        method: 'post',
        data: params,
        headers: {
          token: this.token
        },
        url: '/user/camera/detail'
      })
      let data = result.data
      if (data.code !== 0) {
        return this.$toast.show('error', '获取设备详情失败')
      }
      this.detail = data.data
    }
  }
}
</script>

<style lang="scss" scoped>
@import './style.scss';
</style>