|
|
@@ -0,0 +1,191 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <div class="d-flex justify-space-between color-666">
|
|
|
+ <div class="color-primary" style="font-size: 25px;">积分兑换</div>
|
|
|
+ <div>
|
|
|
+ <span class="cursor-pointer active" @click="router.push('/recruit/personal/personalCenter/wallet')">当前账户积分：{{ point }}</span>
|
|
|
+ <span class="septal-line"></span>
|
|
|
+ <span class="cursor-pointer active">兑换记录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="goods-box mt-5">
|
|
|
+ <v-card v-for="val in dataList" :key="val.id" class="goods-box-item" elevation="2" @click="handleShowDetail(val)">
|
|
|
+ <v-img :src="val.url" width="100%" height="68%"></v-img>
|
|
|
+ <div class="pa-3">
|
|
|
+ <p class="ellipsis color-333">{{ val.name }}</p>
|
|
|
+ <div class="mt-1">
|
|
|
+ <div class="font-size-15 color-666">
|
|
|
+ 消耗积分
|
|
|
+ <span class="color-primary font-size-20">{{ val.point }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </v-card>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <CtDialog :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="router.push('/recruit/personal/personalCenter/memberBenefits/taskCenter')">
|
|
|
+ 积分不足，快去赚取积分吧
|
|
|
+ </div>
|
|
|
+ </CtDialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+defineOptions({ name: 'mall-point-exchange'})
|
|
|
+import { ref } from 'vue'
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+import { redeemSubmit } from '@/api/mall/index.js'
|
|
|
+import { useUserStore } from '@/store/user'
|
|
|
+import { getDict } from '@/hooks/web/useDictionaries'
|
|
|
+import { checkPersonBaseInfo } from '@/utils/check'
|
|
|
+import dialogExtend from '@/plugins/dialogExtend'
|
|
|
+import Snackbar from '@/plugins/snackbar'
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+
|
|
|
+const emit = defineEmits(['login'])
|
|
|
+defineProps({
|
|
|
+ point: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+// 数据
|
|
|
+const dataList = ref([
|
|
|
+ { name: '房券-高端酒店房券', point: 12000, url: 'https://minio.menduner.com/dev/menduner/hotalRoomVoucher.png', type: 1 },
|
|
|
+ { name: '门墩儿酒店英语学习年卡', point: 8000, url: 'https://minio.citupro.com/dev/menduner/englishCourses.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 }
|
|
|
+])
|
|
|
+
|
|
|
+const CtFormRef = ref()
|
|
|
+const formItems = ref({
|
|
|
+ options: [
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'contactName',
|
|
|
+ value: null,
|
|
|
+ default: localStorage.getItem('baseInfo') ? JSON.parse(localStorage.getItem('baseInfo')).name : '',
|
|
|
+ hide: false,
|
|
|
+ label: '收货人姓名 *',
|
|
|
+ rules: [v => !!v || '请输入收货人姓名'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'text',
|
|
|
+ key: 'contactPhone',
|
|
|
+ value: null,
|
|
|
+ default: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')).phone : '',
|
|
|
+ label: '收货人联系电话 *',
|
|
|
+ outlined: true,
|
|
|
+ rules: [v => !!v || '请填写收货人联系电话']
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'cascade',
|
|
|
+ key: 'address',
|
|
|
+ value: [],
|
|
|
+ default: [],
|
|
|
+ label: '收货地址',
|
|
|
+ itemText: 'name',
|
|
|
+ itemValue: 'id',
|
|
|
+ required: true,
|
|
|
+ clearable: false,
|
|
|
+ disabled: true,
|
|
|
+ emitPath: true,
|
|
|
+ items: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'textarea',
|
|
|
+ key: 'contactAddress',
|
|
|
+ value: '',
|
|
|
+ default: null,
|
|
|
+ hide: false,
|
|
|
+ label: '收货详细地址 *',
|
|
|
+ rules: [ v => !!v || '请填写收货详细地址' ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+})
|
|
|
+// 期望城市、其它感兴趣的城市
|
|
|
+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
|
|
|
+ e.value = e.default
|
|
|
+ })
|
|
|
+ showDetail.value = true
|
|
|
+}
|
|
|
+
|
|
|
+// 兑换提交
|
|
|
+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 : '--'
|
|
|
+ await redeemSubmit(obj)
|
|
|
+ Snackbar.success('提交成功')
|
|
|
+ showDetail.value = false
|
|
|
+ detailItem.value = {}
|
|
|
+ await useUserStore().getUserAccountInfo()
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.active:hover {
|
|
|
+ color: var(--v-primary-base) !important;
|
|
|
+}
|
|
|
+.goods-box {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ &-item {
|
|
|
+ height: 380px;
|
|
|
+ width: calc((100% - 48px) / 5);
|
|
|
+ margin: 0 12px 12px 0;
|
|
|
+ &:nth-child(5n) {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
