designer-hub/packages/app/src/pages/home/mall/detail/index.vue

<route lang="json5">
{
style: {
navigationBarTitleText: '品质商城',
navigationBarBackgroundColor: '#fff',
},
}
</route>

<script setup lang="ts">
import {useRouter} from '../../../../core/utils/router'
import {createProductItemBuy, 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 ButtonEvo from '@/components/button-evo.vue'
import {usePermissions} from '../../../../composables/permissions'
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html.vue'

const {clickByPermission} = usePermissions()
const userStore = useUserStore()
const router = useRouter()
const {userInfo} = storeToRefs(userStore)
const id = ref()
const show = ref(false)
const nums = ref(1)
const type = ref<'add2Cart' | 'orderNow'>()
const {data, run: setData} = useRequest(() => getProduct(id.value))

const handleConfirm = async () => {
  // 积分
  const points = data.value?.showFavourable ? data.value?.favourablePoints : data.value?.points
  if (type.value === 'orderNow') {
    const body = {
      isShoppingCart: 0,
      userId: userInfo.value.userId,
      item: 3,
      list: [
        {
          productId: id.value,
          points,
          nums: nums.value,
          productName: data.value.prodcutName,
          orderImgUrl: data.value.productCoverImgUrl,
          vendorId: data.value.vendorId,
        },
      ],
      couponList: [],
    }
    const {data: res, code} = await requestToast(() => productPlacing(body))
    if (code !== 0) return
    await router.push(`/pages/home/mall/confirm-order/index?data=${JSON.stringify(body)}`)
  }
  if (type.value === 'add2Cart') {
    await requestToast(
      () =>
        createProductItemBuy({
          doList: [
            {
              userId: userInfo.value.userId,
              productId: data.value?.productId || '',
              points,
              nums: nums.value,
            },
          ],
        }),
      {success: true, successTitle: '加入购物车成功'},
    )
    show.value = false
  }
}
onLoad(async (query: { id: string }) => {
  id.value = query.id
  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">
        <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>
        </swiper>
      </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-end gap-1">
        <div class="text-[#ef4343] text-[26px] font-normal font-['D-DIN_Exp'] leading-[20px]">
          <!-- 1000 -->
          {{ data?.showFavourable ? data?.favourablePoints : data?.points }}
        </div>
        <template v-if="String(data?.needPoints) === '0'">
          <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-4">积分</div>
        </template>
        <template v-if="String(data?.needPoints) === '1'">
          <div class="text-black/60 text-base font-normal font-['PingFang_SC'] leading-4">
            折（积分结算）
          </div>
        </template>
        <div
          v-if="Number(data?.productPrice)"
          class="w-[66px] text-black/30 text-xs font-normal font-['PingFang_SC'] leading-3"
        >
          <!-- ¥60 -->
          <span style="text-decoration: line-through;">¥{{ data?.productPrice }}</span>
        </div>
        <div class="flex-1"></div>
        <template v-if="String(data?.needPoints) !== '1'">
          <div class="text-[#999999] text-xs font-normal font-['PingFang_SC']">
            {{ data?.isRestrict === 0 ? '不限库存' : `库存：${data?.productRepertory || 0}` }}
          </div>
        </template>
      </div>
      <div class="text-black text-xl font-normal font-['PingFang_SC']">
        <!-- 阿芙佳朵 -->
        {{ 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="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-[23px]">
        {{ data?.exchangeDesc }}
        <!--        · 不限制兑换个数-->
        <!--        <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>
      <mpHtml :content="data?.contentDesc"></mpHtml>
    </div>
    <template v-if="String(data?.needPoints) === '0'">
      <BottomAppBar fixed placeholder>
        <div class="h-[63px] bg-white backdrop-blur-[20px] flex items-center justify-between gap-2">
          <div class="flex-1">
            <ButtonEvo
              block
              color="white"
              location="right"
              @click="((show = true), (type = 'add2Cart'))"
            >
              <span class="text-black/80">加入购物车</span>
            </ButtonEvo>
          </div>
          <div class="flex-1">
            <ButtonEvo
              block
              size="lg"
              @click="
                clickByPermission('mallExchange', () => {
                  show = true
                  type = 'orderNow'
                })
              "
            >
              立即兑换
            </ButtonEvo>
          </div>
        </div>
      </BottomAppBar>
    </template>
    <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-end gap-1">
              <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN_Exp'] leading-4">
                <!--                {{ data?.points }}-->
                {{ data?.showFavourable ? data?.favourablePoints : data?.points }}
              </div>
              <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-3">
                积分
              </div>
              <div class="flex-1"></div>
              <wd-input-number
                v-model="nums"
                :max="data?.isRestrict === 1 && data?.purchaseLimit
    ? Math.min(data?.purchaseQuantity, data?.productRepertory)
    : data?.isRestrict === 1 && !data?.purchaseLimit
    ? data?.productRepertory
    : data?.isRestrict === 2 && data?.purchaseLimit
    ? data?.purchaseQuantity
    : 100"
              />
            </div>
          </div>
        </div>
        <wd-button block :round="false" @click="handleConfirm">确认</wd-button>
      </view>
    </wd-action-sheet>
  </view>
</template>

<style scoped lang="scss"></style>