designer-hub/packages/app/src/pages-sub/home/spread/product-detail/index.vue

<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-sub/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: decodeURIComponent(query.title) })
  await setData()
})
onShareAppMessage(() => ({
  title: data.value?.prodcutName,
  imageUrl: data.value?.productCoverImgUrl,
}))
onShareTimeline(() => ({
  title: data.value?.prodcutName,
  imageUrl: data.value?.productCoverImgUrl,
}))
</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 py-2.5 border-t-1 border-t-solid border-t-[#ececec]"
      >
        <div class="flex items-center gap-2">
          <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-[14px] pt-5px font-normal font-['PingFang_SC'] leading-[34px]"
          >
            积分
          </div>
        </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>