|
@@ -1,241 +0,0 @@
|
|
|
-<route lang="json5">
|
|
|
-{
|
|
|
- style: {
|
|
|
- navigationBarTitleText: '',
|
|
|
- navigationBarBackgroundColor: '#fff',
|
|
|
- },
|
|
|
-}
|
|
|
-</route>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import TiltedButton from '@/components/tilted-button.vue'
|
|
|
-import Product from '../components/product.vue'
|
|
|
-import { useRouter } from '../../../../core/utils/router'
|
|
|
-import { getProduct, productPlacing } from '../../../../core/libs/requests'
|
|
|
-import { requestToast } from '../../../../core/utils/common'
|
|
|
-import { useUserStore } from '../../../../store'
|
|
|
-import { storeToRefs } from 'pinia'
|
|
|
-import BottomAppBar from '@/components/bottom-app-bar.vue'
|
|
|
-import { usePermissions } from '../../../../composables/permissions'
|
|
|
-import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'
|
|
|
-
|
|
|
-const userStore = useUserStore()
|
|
|
-const router = useRouter()
|
|
|
-
|
|
|
-const { userInfo } = storeToRefs(userStore)
|
|
|
-const { clickByPermission } = usePermissions()
|
|
|
-const id = ref()
|
|
|
-const show = ref(false)
|
|
|
-const a = ref(1)
|
|
|
-const item = ref()
|
|
|
-const type = ref<'add2Cart' | 'orderNow'>()
|
|
|
-const { data, run: setData } = useRequest(() => getProduct(id.value))
|
|
|
-
|
|
|
-const handleConfirm = async () => {
|
|
|
- if (type.value === 'orderNow') {
|
|
|
- const body = {
|
|
|
- isShoppingCart: 0,
|
|
|
- userId: userInfo.value.userId,
|
|
|
- item: item.value,
|
|
|
- list: [
|
|
|
- {
|
|
|
- productId: id.value,
|
|
|
- points: data.value.showFavourable ? data.value.favourablePoints : data.value.points,
|
|
|
- nums: 1,
|
|
|
- productName: data.value.prodcutName,
|
|
|
- orderImgUrl: data.value.productCoverImgUrl,
|
|
|
- vendorId: data.value.vendorId,
|
|
|
- },
|
|
|
- ],
|
|
|
- couponList: [],
|
|
|
- }
|
|
|
- const { data: res, code, msg } = await requestToast(() => productPlacing(body))
|
|
|
- if (code !== 0) {
|
|
|
- await uni.showToast({
|
|
|
- title: msg,
|
|
|
- icon: 'none',
|
|
|
- })
|
|
|
- } else {
|
|
|
- await router.push(`/pages/home/mall/confirm-order/index?data=${JSON.stringify(body)}`)
|
|
|
- }
|
|
|
- // router.push(`/pages/home/mall/confirm-order/index?data=${JSON.stringify(res)}`)
|
|
|
- }
|
|
|
-}
|
|
|
-onLoad(async (query: { id: string; title: string; item: string }) => {
|
|
|
- id.value = query.id
|
|
|
- item.value = query.item
|
|
|
- uni.setNavigationBarTitle({ title: query.title })
|
|
|
- await setData()
|
|
|
-})
|
|
|
-onShareAppMessage(() => ({
|
|
|
- title: data.value?.prodcutName,
|
|
|
-}))
|
|
|
-onShareTimeline(() => ({
|
|
|
- title: data.value?.prodcutName,
|
|
|
-}))
|
|
|
-</script>
|
|
|
-
|
|
|
-<template>
|
|
|
- <!-- <view class="flex-grow flex flex-col">
|
|
|
- <div class="aspect-[1.34/1] relative">
|
|
|
- <div class="absolute aspect-[1.26/1] top-0 w-full">
|
|
|
- <wd-img width="100%" height="100%" :src="data?.productCoverImgUrl" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="relative flex-1 bg-white p-4 flex flex-col gap-4 rounded-tl-2xl rounded-tr-2xl">
|
|
|
- <div class="flex items-center gap-1">
|
|
|
- <div class="text-[#ef4343] text-[26px] font-normal font-['D-DIN_Exp'] leading-normal">
|
|
|
- {{ data?.points }}
|
|
|
- </div>
|
|
|
- <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-[34px]">
|
|
|
- 积分
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="w-[66px] text-black/30 text-xs font-normal font-['PingFang_SC'] line-through leading-normal"
|
|
|
- >
|
|
|
- ¥{{ data?.productPrice }}
|
|
|
- </div>
|
|
|
- <div class="flex-1"></div>
|
|
|
- <div class="text-[#999999] text-xs font-normal font-['PingFang_SC'] leading-[10.18px]">
|
|
|
- 已售{{ data?.exchangeCount || 0 }}件
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="h-4 text-black text-xl font-normal font-['PingFang_SC'] leading-[10.18px]">
|
|
|
- {{ data?.prodcutName }}
|
|
|
- </div>
|
|
|
- <div class="h-0.25 bg-[#f6f6f6]"></div>
|
|
|
- <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
|
|
|
- 积分兑换说明:
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="w-[346px] h-[95px] text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[23px]"
|
|
|
- >
|
|
|
- · 不限制兑换个数
|
|
|
- <br />
|
|
|
- · 兑换后不支持退换货,如有问题可联系官方客户
|
|
|
- <br />
|
|
|
- · 规格:件
|
|
|
- <br />
|
|
|
- · 配送方式:到店自取
|
|
|
- </div>
|
|
|
- <div class="mx--4 h-2.5 bg-neutral-100"></div>
|
|
|
- <wd-divider>
|
|
|
- <div
|
|
|
- class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
|
|
|
- >
|
|
|
- 商品详情
|
|
|
- </div>
|
|
|
- </wd-divider>
|
|
|
- <wd-img width="100%" mode="widthFix" :src="data?.productDetailsImgUrl"></wd-img>
|
|
|
- </div>
|
|
|
- </view> -->
|
|
|
- <div class="flex-grow flex flex-col">
|
|
|
- <div class="aspect-[1.34/1] relative">
|
|
|
- <div class="absolute aspect-[1.26/1] top-0 w-full">
|
|
|
- <!-- <wd-img width="100%" height="100%" :src="data?.productDetailsImgUrl" />-->
|
|
|
- <swiper>
|
|
|
-<!-- <template v-for="(it, index) in data?.productDetailsImgUrl?.split(',')" :key="index">-->
|
|
|
-<!-- <swiper-item>-->
|
|
|
-<!-- <wd-img width="100%" height="100%" mode="aspectFill" :src="it" />-->
|
|
|
-<!-- </swiper-item>-->
|
|
|
-<!-- </template>-->
|
|
|
- <wd-swiper
|
|
|
- custom-class="rounded-1xl overflow-hidden aspect-[1.29/1]"
|
|
|
- width="100%"
|
|
|
- height="100%"
|
|
|
- :list="data?.productDetailsImgUrl?.split(',')"
|
|
|
- autoplay
|
|
|
- v-model:current="current"
|
|
|
- :indicator="{ type: 'dots-bar' } as any"
|
|
|
- @click="handleClick"
|
|
|
- ></wd-swiper>
|
|
|
- </swiper>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="relative flex-1 bg-white p-7 flex flex-col gap-6 rounded-tl-2xl rounded-tr-2xl">
|
|
|
- <div
|
|
|
- v-if="String(data?.needPoints) === '1'"
|
|
|
- class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-4"
|
|
|
- >
|
|
|
- <span style="color: red;">{{ data?.points }}</span> 折
|
|
|
- </div>
|
|
|
- <div class="flex">
|
|
|
- <div class="text-black text-xl font-normal font-['PingFang_SC'] leading-[10.18px]">
|
|
|
- {{ data?.prodcutName }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="h-0.25 bg-[#f6f6f6]"></div>
|
|
|
- <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
|
|
|
- 兑换说明:
|
|
|
- </div>
|
|
|
- <div class="text-black/60 text-sm font-normal font-['PingFang_SC'] whitespace-pre-wrap">
|
|
|
- {{ data?.exchangeDesc }}
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- <div-->
|
|
|
- <!-- class="text-justify text-black/40 text-base font-normal font-['PingFang_SC'] leading-relaxed"-->
|
|
|
- <!-- v-html="data?.contentDesc"-->
|
|
|
- <!-- ></div>-->
|
|
|
- <div class="mx--4 h-2.5 bg-neutral-100"></div>
|
|
|
- <wd-divider>
|
|
|
- <div
|
|
|
- class="text-center text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
|
|
|
- >
|
|
|
- 商品详情
|
|
|
- </div>
|
|
|
- </wd-divider>
|
|
|
- <mpHtml :content="data?.contentDesc"></mpHtml>
|
|
|
- </div>
|
|
|
-
|
|
|
- <BottomAppBar fixed placeholder v-if="String(data?.needPoints) !== '1'">
|
|
|
- <div
|
|
|
- class="bg-white/90 backdrop-blur-[20px] flex px-10 py-2.5 border-t-1 border-t-solid border-t-[#ececec]"
|
|
|
- >
|
|
|
- <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN_Exp'] leading-normal">
|
|
|
- <!-- {{ data?.points }}-->
|
|
|
- {{ data?.showFavourable ? data?.favourablePoints : data?.points }}
|
|
|
- </div>
|
|
|
- <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-[34px]">
|
|
|
- 积分
|
|
|
- </div>
|
|
|
- <div class="flex-1"></div>
|
|
|
- <div
|
|
|
- @click="
|
|
|
- clickByPermission('mallExchange', () => {
|
|
|
- show = true
|
|
|
- type = 'orderNow'
|
|
|
- })
|
|
|
- "
|
|
|
- >
|
|
|
- <TiltedButton size="large">立即兑换</TiltedButton>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </BottomAppBar>
|
|
|
- <wd-action-sheet v-model="show">
|
|
|
- <view class="px-7 py-11">
|
|
|
- <div class="flex gap-3 mb-13.5">
|
|
|
- <div class="w-[110px] h-[110px] bg-[#f6f6f6] rounded-2xl">
|
|
|
- <wd-img width="100%" height="100%" :src="data?.productCoverImgUrl"></wd-img>
|
|
|
- </div>
|
|
|
- <div class="flex flex-col justify-between flex-1">
|
|
|
- <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
|
|
|
- {{ data?.prodcutName }}
|
|
|
- </div>
|
|
|
- <div class="flex items-center">
|
|
|
- <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN_Exp'] leading-normal">
|
|
|
- {{ data?.showFavourable ? data?.favourablePoints : data?.points }}
|
|
|
- </div>
|
|
|
- <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
|
|
|
- 积分
|
|
|
- </div>
|
|
|
- <div class="flex-1"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <wd-button block :round="false" @click="handleConfirm">确认</wd-button>
|
|
|
- </view>
|
|
|
- </wd-action-sheet>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<style scoped lang="scss"></style>
|