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

<template>
  <view>
    <template v-if="userInfo && userInfo.userLevel < 3">
      <div class="ml-20 mt-20 text-main font-bold" v-if="!quoteExpiredAt || monthExpired">剩余报价次数:{{
          remainQuoteNum
        }}次
      </div>
      <div class="ml-20 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="100%">
      <p>请选择购买模式</p>
      <div class="flex justify-center items-center flex-col">
        <div class="p-20 rounded m-20 shadow flex flex-col justify-center items-center flex-1 w-100p"
             :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 w-100p"
             :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 flex-col justify-start items-start"
           v-if="userInfo.userLevel === 0 && buyQuoteMode !== 'single'">
        <p>您还未成为会员,仅能单次购买。</p>
        <div class="mt-25">
          <span>请</span>
          <span class="text-main font-bold pointer mx-15 text-35" style="text-decoration: underline"
                @click="toUpgrade">升级会员</span>
          <span> ，可享受优惠报价套餐。</span>
        </div>
      </div>
      <div class="mt-20 " v-if="!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: [],
      userInfo: null
    }
  },
  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/shop/pay?id=${data}`
      })
    },
    cancel() {
      this.dialogVisible = false
      vk.navigateBack()
    },
    toUpgrade() {
      this.dialogVisible = false
      uni.setStorageSync('user_tab', 4)
      vk.navigateTo({
        url: `/pages/user/user`
      })
    }
  },
  async mounted() {
    await this.getSingleQuoteAmount()
    await this.getMonthlyAmount()
    vk.userCenter.getCurrentUserInfo({
      success: async (data) => {
        this.userInfo = data.userInfo
        console.log(data.userInfo)
        if (this.amount) {
          const res = await vk.callFunction({
            url: 'client/user/kh/getUserQuoteNumList',
            data: {
              type: this.type,
              sheetId: this.id,
            },
          })
          if (!data.userInfo) this.remainQuoteNum = 0
          else this.remainQuoteNum = data.userInfo.remainQuoteNum
        } else {
          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(data.userInfo.userLevel) < 3) {
          uni.showModal({
            title: '提示',
            content: '您的报价次数已用完/已过期，是否立即购买？',
            success: res => {
              if (res.confirm) {
                this.dialogVisible = true
              }
              if (res.cancel) {
                vk.navigateBack()
              }
            }
          })
          // this.$confirm('您的报价次数已用完/已过期，是否立即购买？', '提示', {
          //   confirmButtonText: '确定',
          //   cancelButtonText: '取消',
          //   type: 'warning'
          // }).then(async () => {
          //   this.dialogVisible = true
          // }).catch(() => {
          //   vk.navigateBack()
          // })
        }
      }
    });
  },
  watch: {
    buyQuoteMode(val) {
      if (this.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>