jjx-web-sign-only/components/quote-remain-num/quote-remain-num.vue

<template>
  <view>
    <template v-if="vk.getVuex('$user.userInfo.userLevel') < 3">
      <div class="mt-20 text-main font-bold" v-if="!quoteExpiredAt || monthExpired">剩余报价次数:{{
          remainQuoteNum
        }}次
      </div>
      <div class="mt-20 text-main font-bold" v-else-if="quoteExpiredAt && !monthExpired">
        报价包月过期时间:{{ dayjs(quoteExpiredAt).format('YYYY-MM-DD HH:mm:ss') }}
      </div>
    </template>
    <el-dialog title="报价次数" :visible.sync="dialogVisible" width="50%">
      <p>请选择购买模式</p>
      <div class="flex justify-center items-center">
        <div class="p-20 rounded m-20 shadow flex flex-col justify-center items-center flex-1 pointer"
             :class="[buyQuoteMode === 'single' ? 'buy-quote-mode-active' : '']"
             @click="buyQuoteMode = 'single'">
          <p>单次购买</p>
          <p>{{ amount ? amount : singleQuoteAmount }}元/次</p>
        </div>
        <div class="p-20 rounded m-20 shadow flex flex-col justify-center items-center flex-1 pointer"
             :class="[buyQuoteMode === item._id ? 'buy-quote-mode-active' : '']"
             :style="{cursor: 'not-allowed'}"
             @click="buyQuoteMode = item._id" v-for="(item, index) in monthlyQuoteAmountList" :key="index">
          <p>{{ item.name }}</p>
          <p>{{ item.amount }}元</p>
        </div>
      </div>
      <div class="mt-20 flex justify-start items-center"
           v-if="vk.getVuex('$user.userInfo.userLevel') === 0 && buyQuoteMode !== 'single'">
        <span>您还未成为会员,仅能单次购买。请</span>
        <span class="text-main font-bold pointer mx-15 text-35" style="text-decoration: underline"
              @click="toUpgrade">升级会员</span>
        <span> ，可享受优惠报价套餐。</span>
      </div>
      <div class="mt-20 " v-if="!vk.getVuex('$user.userInfo.quoteExpiredAt')">
        <span>剩余报价次数:</span>
        <span class="text-main font-bold text-35">{{ remainQuoteNum }}</span>
        <span>次</span>
      </div>
      <div class="mt-20 text-main font-bold" v-else>
        报价包月过期时间:{{ dayjs(quoteExpiredAt).format('YYYY-MM-DD') }}
      </div>
      <div class="mt-20 flex justify-center items-center">
        <el-button type="primary" :disabled="!buyQuoteMode || disabled" @click.native="doBuyQuote">确定
        </el-button>
        <el-button plain @click.native="cancel">取消</el-button>
      </div>
    </el-dialog>
  </view>
</template>

<script>
import dayjs from "dayjs";

export default {
  name: "quote-remain-num",
  props: {
    amount: Number,
    type: String,
    id: String,
  },
  data() {
    return {
      remainQuoteNum: '',
      quoteExpiredAt: null,
      dialogVisible: false,
      monthExpired: false,
      buyQuoteMode: null,
      disabled: false,
      singleQuoteAmount: 1,
      monthlyQuoteAmount: 10,
      monthlyQuoteAmountList: []
    }
  },
  methods: {
    dayjs,
    async getSingleQuoteAmount() {
      const res = await vk.callFunction({
        url: 'client/dict/pub/getDetail',
        data: {
          id: '6587b034466d41a591df881c'
        },
      })
      this.singleQuoteAmount = res.content
    },
    async getMonthlyAmount() {
      const {rows} = await vk.callFunction({
        url: 'client/quoteNumConfig/list/pub/list',
      })
      this.monthlyQuoteAmountList = rows
    },
    async doBuyQuote() {
      const {data} = await vk.callFunction({
        url: 'client/enquiry/quoteNum/kh/add',
        data: {
          buyQuoteMode: this.buyQuoteMode,
          type: this.type,
          id: this.id,
        },
      })
      this.dialogVisible = false
      vk.navigateTo({
        url: `/pages/index/shop/pay?id=${data}`
      })
    },
    cancel() {
      this.dialogVisible = false
      vk.navigateBack()
    },
    toUpgrade() {
      this.dialogVisible = false
      vk.navigateTo({
        url: `/pages/user/user?menu=equity`
      })
    }
  },
  async mounted() {
    await this.getSingleQuoteAmount()
    await this.getMonthlyAmount()
    vk.userCenter.getCurrentUserInfo({
      success: async (data) => {
        if (this.amount) {
          const res = await vk.callFunction({
            url: 'client/user/kh/getUserQuoteNumList',
            data: {
              type: this.type,
              sheetId: this.id,
            },
          })
          // if (!res.data) this.remainQuoteNum = 0
          // else this.remainQuoteNum = res.data.num
        }
        this.remainQuoteNum = data.userInfo.remainQuoteNum ? parseInt(data.userInfo.remainQuoteNum) : 0
        this.quoteExpiredAt = data.userInfo.quoteExpiredAt ? dayjs(data.userInfo.quoteExpiredAt).format('YYYY-MM-DD HH:mm:ss') : null
        this.monthExpired = dayjs(data.userInfo.quoteExpiredAt).isBefore(dayjs())
        if (this.remainQuoteNum === 0 && (!this.quoteExpiredAt || dayjs(this.quoteExpiredAt).isBefore(dayjs())) && parseInt(vk.getVuex('$user.userInfo.userLevel')) < 3) {
          this.$confirm('您的报价次数已用完/已过期，是否立即购买？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            closeOnClickModal: false,
            closeOnPressEscape: false,
          }).then(async () => {
            this.dialogVisible = true
          }).catch(() => {
            vk.navigateBack()
          })
        }
      }
    });
  },
  watch: {
    buyQuoteMode(val) {
      if (vk.getVuex('$user.userInfo.userLevel') === 0) {
        if (val === 'single') this.disabled = false
        else this.disabled = true
      }
    }
  }
}
</script>

<style scoped lang="scss">

.buy-quote-mode-active {
  border: 1px solid #a92924;
  background-color: #f1c7c7;
}
</style>