fohow_wx/src/views/pay/PayIntegral.vue

<template>
  <div class="family-createOrder__page">
    <!-- 地址模块 -->
    <address-part
    :showIcon="showIcon"
    :addressDetail="addressDetail"
    :count="count"
    :isIntegral="isIntegral" />
    <!-- 商品模块 -->
    <div class="family-createOrder__product">
      <div class="product-top clearfix">
        <van-image class="product-img" fit="cover" :src="productDetail.img_thumb_url" />
        <div class="product-info">
          <p class="product-name">{{productDetail.title}}</p>
          <p class="product-dec">{{productDetail.sub_title}}</p>
          <p class="product-money">
            <span class="money-text">{{!userCheck.is_vip? productDetail.price : productDetail.vip_price}}</span> 积分
          </p>
        </div>
      </div>
    </div>
    <!-- 积分消耗 -->
    <div class="family-createOrder__integral">
      <p>积分消耗<span>{{!userCheck.is_vip? productDetail.price : productDetail.vip_price}} 积分</span></p>
    </div>

    <div class="family-createOrder__footer">
      <div class="pay-bottom1 clearfix">
        <van-button class="pay-btn" round type="primary" @click="postApi" :disabled="!userCheck.is_vip">{{userCheck.is_vip ? '确认兑换':'非会员不可兑换'}}</van-button>
        <div class="pay-sum"><span style="color:#4c4c4c">合计</span>: <span class="money-text">{{!userCheck.is_vip? productDetail.price : productDetail.vip_price}}</span> 积分</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { Image as VanImage, Divider, Cell, CellGroup } from 'vant'
import AddressPart from './components/Address'
import filters from '@/common/filter'
export default {
  name: 'payIntegral',
  data () {
    return {
      productId: Number(this.$route.params.product_id),
      addressId: Number(this.$route.query.address_id),
      count: 1,
      addressDetail: {},
      integralTotal: 0,
      isIntegral: true,
      showIcon: false
    }
  },
  computed: {
    ...mapGetters(['productDetail', 'userCheck']),
    isEnoughIntegral: function () {
      if (this.integralTotal >= this.productDetail.vip_price) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    postApi () {
      if (!this.isEnoughIntegral) {
        this.$dialog({
          title: '提示',
          message: '您的积分不足，请是否前往获得更多积分',
        }).then((action) => {
          if (action === 'confirm') {
            this.$router.push('/article')
          }
        })
        return
      }
      this.$post({
        url: 'v1/spirit/order/integral',
        data: {
          address_id: this.addressDetail.id || 0,
          quantity: this.count,
          product_id: this.productId
        }
      }).then((resp) => {
        if (resp) {
          this.$toast('兑换成功~')
          this.$router.replace(`/order/${resp.order_id}`)
        }
      })
    },
    getProductDetail () {
      this.$store.dispatch('getProductDetail', {id: this.productId})
    },
    getIntegralInfo () {
      this.$get({
        url: 'v1/user/mall/balance/info'
      }).then((resp) => {
        this.integralTotal = resp.total
      })
    },
    getAddressDefault () {
      this.$get({
        url: 'v1/user/address/default'
      }).then((resp) => {
        if (resp) {
          this.addressDetail = resp
        }
      })
    },
    getAddressDetail () {
      this.$get({
        url: `v1/address/${this.addressId}`
      }).then((resp) => {
        if (resp) {
          this.addressDetail = resp
        }
      })
    }
  },
  created () {
    Vue.use(VanImage).use(Divider).use(Cell).use(CellGroup)
    if (this.addressId) {
      this.getAddressDetail()
    } else {
      this.getAddressDefault()
    }
    this.getIntegralInfo()
    if (this.productDetail && !this.productDetail.id) {
      this.getProductDetail()
    }
  },
  watch: {
  },
  components: {
    AddressPart
  }
}
</script>

<style lang="less">
.family-createOrder {
  &__integral {
    box-sizing: border-box;
    padding: 0.28rem 0.2rem;
    background: #fff;
    margin-bottom: 0.3rem;
    font-size: .28rem;
    color: #4c4c4c;
    margin-top: .24rem;
    span {
      float: right;
      color: #f14f4f;
    }
  }
  &__footer {
    background: #fff;
    box-sizing: border-box;
    padding: 0.2rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;
    .pay-btn {
      height: 0.74rem;
      min-width: 2.62rem;
      background: #07c160;
      float: right;
      color: #fff;
      font-size: 0.28rem;
      margin-left: 0.4rem;
      border: 1px solid #07c160;
    }
    .pay-sum {
      color: #f47b7b;
      font-size: 0.28rem;
      float: right;
      margin-top: 0.2rem;
      .money-text {
        font-size: 0.34rem;
      }
    }
  }
}
</style>