menduner/src/views/pointsExchange/exchange.vue

<!-- 积分兑换 -->
<template>
  <div class="listBox">
    <div v-for="(item, index) in dataList" :key="'exchange' + index">
      <div class="cursor-pointer mx-5 mb-4" style="width: 180px;" @click="handleShowDetail(item)">
        <v-img width="180" height="180" :src="item.url"></v-img>
        <div class="ellipsis mt-2" style="font-size: 14px;">{{ item.name }}</div>
        <div class="ellipsis mt-1" style="font-size: 13px;">消耗积分<span class="ml-1" style="color: var(--v-primary-base)">{{ item.point }}</span></div>
      </div>
    </div>
  </div>

  <Dialog :visible="showDetail" titleClass="text-h6" :footer="point >= detailItem?.point" :widthType="3" title="详情说明" @submit="handleSubmit" @close="showDetail = false">
    <div class="color-primary font-size-20">{{ detailItem.name }}</div>
    <div class="tips">
      <div>使用说明：积分一经兑换概不退回，敬请谅解。</div>
    </div>
    <div class="d-flex align-center my-5">
      <div class="mr-1">消耗积分</div>
      <div class="color-primary">{{ detailItem.point }}</div>
    </div>
    <div v-if="point >= detailItem.point">
      <div class="color-666 mb-5 mt-10">{{ detailItem?.type  ? '收货人信息填写' : '联系电话填写' }}</div>
      <CtForm ref="CtFormRef" :items="formItems"></CtForm>
    </div>
    <div v-if="point < detailItem.point" class="text-end color-error font-size-14 cursor-pointer text-decoration-underline" @click="emit('toTaskCenter')">积分不足，快去赚取积分吧</div>
  </Dialog>

  <Loading :visible="loading" />
</template>

<script setup>
defineOptions({name: 'mall-exchange'})
import { ref } from 'vue'
import { getToken } from '@/utils/auth'
import Dialog from '@/components/CtDialog'
import Snackbar from '@/plugins/snackbar'
import { redeemSubmit } from '@/api/pointsExchange'
import { useUserStore } from '@/store/user'
import { getDict } from '@/hooks/web/useDictionaries'
import { checkPersonBaseInfo } from '@/utils/check'
import dialogExtend from '@/plugins/dialogExtend'

const emit = defineEmits(['login', 'toTaskCenter'])
defineProps({
  point: {
    type: Number,
    default: 0
  }
})

const CtFormRef = ref()
const formItems = ref({
  options: [
    {
      type: 'text',
      key: 'contactName',
      value: localStorage.getItem('baseInfo') ? JSON.parse(localStorage.getItem('baseInfo')).name : '',
      hide: false,
      label: '收货人姓名 *',
      rules: [v => !!v || '请输入收货人姓名'],
    },
    {
      type: 'text',
      key: 'contactPhone',
      value: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')).phone : '',
      label: '收货人联系电话 *',
      outlined: true,
      rules: [v => !!v || '请填写收货人联系电话']
    },
    {
      type: 'cascade',
      key: 'address',
      value: [],
      label: '收货地址',
      itemText: 'name',
      itemValue: 'name',
      required: true,
      clearable: false,
      emitPath: true,
      items: []
    },
    {
      type: 'textarea',
      key: 'contactAddress',
      value: '',
      hide: false,
      label: '收货详细地址 *',
      rules: [ v => !!v || '请填写收货详细地址' ]
    }
  ]
})

// 数据
const dataList = ref([
  { name: '房券-高端酒店房券', point: 12000, url: 'https://minio.menduner.com/dev/menduner/hotalRoomVoucher.png', type: 1 },
  { name: '门墩儿酒店英语学习年卡', point: 8000, url: 'https://minio.menduner.com/dev/153f0e8f5b36490a121882bce86f56fb7d56048e4b19eefdb4963084499b6e55.jpg', type: 0 },
  { name: '红酒-经典年份葡萄酒', point: 5000, url: 'https://minio.menduner.com/dev/menduner/redWine.png', type: 1 },
  { name: '瑞幸咖啡券-瑞幸咖啡精致享受券', point: 2000, url: 'https://minio.menduner.com/dev/menduner/coffee.png', type: 0 },
  { name: '减压捏捏乐', point: 500, url: 'https://minio.menduner.com/dev/menduner/pinchMusic.png', type: 1 }
])

// 期望城市、其它感兴趣的城市
getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
  data = data?.length && data || []
  formItems.value.options.find(e => e.key === 'address').items = data
})

// 详情说明弹窗
const showDetail = ref(false)
const detailItem = ref({})
const handleShowDetail = (item) =>{
  if (!getToken()) {
    Snackbar.warning('请先登录')
    emit('login')
    return
  }
  if (!checkPersonBaseInfo()) { // 强制填写个人信息
    dialogExtend('necessaryInfoDialog').then(() => {
      handleShowDetail()
    })
    return
  }
  detailItem.value = item
  formItems.value.options.forEach(e => {
    if (e.key !== 'contactPhone') e.hide = item.type ? false : true
  })
  showDetail.value = true
}

// 兑换提交
const loading = ref(false)
const handleSubmit = async () =>{
  const { valid } = await CtFormRef.value.formRef.validate()
  if (!valid) return
  const obj = {
    ...detailItem.value
  }
  formItems.value.options.forEach(e => {
    if (!e.hide) obj[e.key] = e.value
  })
  if (obj.type && (!obj.address || !obj.address.length)) return Snackbar.warning('请选择收货地址')
  if (obj.type) obj.contactAddress = obj.address.join('') + obj.contactAddress
  delete obj.address 
  if (!obj.contactName) obj.contactName = localStorage.getItem('baseInfo') ? JSON.parse(localStorage.getItem('baseInfo')).name : '--'

  loading.value = true
  try {
    await redeemSubmit(obj)
    Snackbar.success('提交成功')
    showDetail.value = false
    detailItem.value = {}
    await useUserStore().getUserAccountInfo()
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.listBox {
  display: flex;
  flex-wrap: wrap;
}
.ellipsis {
  width: 100%;
}
.tips {
  margin-top: 20px;
  padding: 12px 20px;
  border-radius: 5px;
  background-color: var(--default-bgc);
  // width: 400px;
  div {
    font-size: 15px;
    margin-bottom: 4px;
  }
  span {
    display: inline-block;
    font-size: 14px;
    margin-bottom: 20px;
  }
}
</style>