商品下架页面完成/重新封装请求

src/apis/merchant.ts

@@ -1,9 +1,12 @@
-import { defHttp } from '~/utils/http'
+import { defHttp} from '~/utils/http'
 import type {MerchantCategoryModel, MerchantDetailModel, StoreParams, StoreResult} from "~/apis/model/storeModel";
 import type {PageModel} from "~/apis/model/pageModel";
 import type {ZibubaojianResult} from "~/apis/model/zibubaojian.model";
 import type {VipAreaResult} from "~/apis/model/vip-area.model";
 
+import {detailHttp} from '~/utils/http'
+
+
 enum API {
     GET_SELECT_MERCHANT = '/gateway/wares_service/waresServiceMerchant/selectMerchant',
     GET_SELECT_MERCHANT_SORT = '/gateway/wares_service/waresServiceMerchant/selectMerchantSort',
@@ -79,7 +82,7 @@ export function getProductList(id: string,page=1,limit=10): Promise<ZibubaojianR
  * @param id
  */
 export function getProductDetail(id: string) {
-    return defHttp.get({
+    return detailHttp.get({
         url: API.GET_PRODUCT_DETAIL + `/${id}`,
     })
 }

src/apis/model/product.model.ts

@@ -54,7 +54,7 @@ export interface IProductDetail {
     // 现价销售价格
     salePrice: number
     // 原价
-    price: number
+    price: string
     // 分销URL
     spreadUrl: string
     // 商品图
@@ -100,6 +100,12 @@ export interface HomeProduct {
         getEndTime: string
     }[]
 }
+//抖音商品状态+商品详情
+export interface DyProductDetailsModel{
+    status:number
+    message:string
+    data:DyProductDetailModel
+}
 
 /**
  * 抖音商品详情
@@ -268,7 +274,12 @@ export type PDDProductDetailModel = {
     yanglao: string//养老金
     pddlink: PddLink//链接
 }
-
+//附加状态
+export type  PDDProductDetailModels= {
+    message:string
+    status:number
+    data:PDDProductDetailModel
+}
 export type PddLink = {
     mobile_url: string
     url: string
@@ -319,6 +330,13 @@ export type VipProductModel = {
     price: string
 }
 
+//唯品会商品状态+商品详情
+export interface VipProductResults{
+    status:number
+    message:string
+    data:VipProductResult
+} 
+
 export interface VipProductResult {
     returnCode: string
     result: Array<VipProductDetailModel>
@@ -327,13 +345,16 @@ export interface VipProductResult {
     wphlink: WphlinkModel
 }
 
+
 export interface WphlinkModel {
     url: string
     longUrl: string
     ulUrl: string
     vipQuickAppUrl: string
 }
-
+/**
+ * 唯品会商品详情
+ */
 export interface VipProductDetailModel {
     // 商品原价
     marketPrice: string
@@ -414,6 +435,13 @@ export interface PrepayInfoModel {
     isPrepay: string
 }
 
+//苏宁商品状态+商品详情
+export interface SuNingProductDetailsModel {
+    status:number
+    data:SuNingProductDetailModel
+    message:string
+} 
+
 /**
  * 苏宁商品详情
  */
@@ -470,7 +498,11 @@ export type SuNingProductModel = {
  * 淘宝商品详情
  */
 export interface TaobaoProductDetailModel {
-    waresDetail: TaobaoWaresDetail
+    status:number
+    message:string
+    data: {
+        waresDetail:TaobaoWaresDetail
+    }
 }
 
 export interface TaobaoWaresDetail {
@@ -519,6 +551,11 @@ export type TaobaoProductThirdPartyWaresModel = {
     coupon_share_url: string
 }
 
+export interface JdgProductDetailModel{
+    status:number
+    message:string
+    data:JdProductDetailModel[]
+}
 export interface JdProductDetailModel {
     // 京东商品原标题
     goodsName: string

src/apis/product.ts

@@ -1,12 +1,13 @@
-import {defHttp} from "~/utils/http";
+import {defHttp, detailHttp} from "~/utils/http";
 import type {
     DyLiveModel, DyLiveProductModel, DyProductDetailModel,
+    DyProductDetailsModel,
     DyProductModel, JdProductDetailModel,
-    JdProductModel, PDDProductDetailModel, PDDProductModel, ProductDetailModel,
+    JdProductModel, JdgProductDetailModel, PDDProductDetailModel, PDDProductDetailModels, PDDProductModel, ProductDetailModel,
     ProductParams,
     SearchProductParams,
-    SearchProductResult, SuNingProductDetailModel, SuNingProductModel, TaobaoProductDetailModel,
-    TaobaoProductResult, VipProductModel, VipProductParams, VipProductResult
+    SearchProductResult, SuNingProductDetailModel, SuNingProductDetailsModel, SuNingProductModel, TaobaoProductDetailModel,
+    TaobaoProductResult, VipProductModel, VipProductParams, VipProductResult, VipProductResults
 } from "~/apis/model/product.model";
 import {resolveUnref} from "@vueuse/core";
 
@@ -123,8 +124,8 @@ export function searchProductList(params: SearchProductParams): Promise<SearchPr
  * 京东商品详情
  * @param skuId
  */
-export  function getJdProductDetail(skuId: string): Promise<Array<JdProductDetailModel>> {
-    return defHttp.get({
+export  function getJdProductDetail(skuId: string): Promise<JdgProductDetailModel> {
+    return detailHttp.get({
         url: API.JD_DETAIL,
         data: {
             skuId
@@ -187,8 +188,8 @@ export function searchVipProduct(params: ProductParams): Promise<Array<VipProduc
  * 唯品商品详情
  * @param params
  */
-export function getVipProductDetail(goodsId: string): Promise<VipProductResult> {
-    return defHttp.get({
+export function getVipProductDetail(goodsId: string): Promise<VipProductResults> {
+    return detailHttp.get({
         url: API.VIP_DETAIL,
         data: {
             goodsId
@@ -197,8 +198,8 @@ export function getVipProductDetail(goodsId: string): Promise<VipProductResult>
     })
 }
 
-export function getSuProductDetail(id: string): Promise<SuNingProductDetailModel> {
-    return defHttp.get({
+export function getSuProductDetail(id: string): Promise<SuNingProductDetailsModel> {
+    return detailHttp.get({
         url: `${API.SU_DETAIL}/${id}`,
 
     })
@@ -231,7 +232,7 @@ export function searchSuProduct(params: ProductParams): Promise<Array<SuNingProd
 }
 
 export function getTaobaoProductDetail(id: string): Promise<TaobaoProductDetailModel> {
-    return defHttp.post({
+    return detailHttp.post({
         url: API.TAOBAO_DETAIL,
         data: {
             id
@@ -276,8 +277,8 @@ export function getPddProductList(params: ProductParams): Promise<Array<PDDProdu
  * 拼多多商品详情
  * @param goodsId
  */
-export function getPddProductDetail(goodsId: string): Promise<PDDProductDetailModel> {
-    return defHttp.get({
+export function getPddProductDetail(goodsId: string): Promise<PDDProductDetailModels> {
+    return detailHttp.get({
         url: API.PDD_DETAIL,
         data: {
             goodsId
@@ -349,8 +350,8 @@ export function searchDyProduct(params: ProductParams):Promise<Array<DyProductMo
  * 抖音商品详情
  * @param goodsId
  */
-export function getDyProductDetail(goodsId: string): Promise<DyProductDetailModel> {
-    return defHttp.get({
+export function getDyProductDetail(goodsId: string): Promise<DyProductDetailsModel> {
+    return detailHttp.get({
         url: API.DY_DETAIL,
         data: {
             goodsId

src/components/CXBBackTop/CXBBackTop.vue

@@ -40,7 +40,7 @@ const scrollToTop = function () {
   border-radius: 50%;
   z-index: 999;
   right: 15px;
-  bottom: 60px;
+  bottom: 20%;
 }
 .backTopImg{
   width: 40px;

src/pages/order_addcart/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import {getRecommendList ,getProductDetail} from "~/apis/merchant";
+import { getRecommendList, getProductDetail } from "~/apis/merchant";
 import MerchantProductCard from "~/pages/store/home/components/MerchantProductCard.vue";
-import {deleteCartItem, getCartCount, getCartList,xcxBanding} from "~/apis/user";
-import type {ShoppingResult} from "~/apis/model/shopping.model";
+import { deleteCartItem, getCartCount, getCartList, xcxBanding } from "~/apis/user";
+import type { ShoppingResult } from "~/apis/model/shopping.model";
 import FPrice from "~/components/FPrice/FPrice.vue";
 import FButton from "~/components/FButton/FButton.vue";
 import CXBYaojinTag from "~/components/CXBYaojinTag/CXBYaojinTag.vue";
@@ -12,12 +12,12 @@ import {
   SuNingProductModel,
   TaobaoProductThirdPartyWaresModel, VipProductModel
 } from "~/apis/model/product.model";
-import {DcProductModel} from "~/apis/model/dacang.model";
-import {createShopping , changeProdoctSku} from "~/apis/order.api";
-import {encodeBase64} from "~/utils/http/helper";
-import {CDN_URL} from "~/config/app";
-import {uniq} from "lodash-es";
-import {cartChange} from "~/apis/order.api";
+import { DcProductModel } from "~/apis/model/dacang.model";
+import { createShopping, changeProdoctSku } from "~/apis/order.api";
+import { encodeBase64 } from "~/utils/http/helper";
+import { CDN_URL } from "~/config/app";
+import { uniq } from "lodash-es";
+import { cartChange } from "~/apis/order.api";
 import type CXBBackTop from "~/components/CXBBackTop/CXBBackTop.vue";
 import CXBSkuPopup from "~/components/CXBSkuPopup/CXBSkuPopup.vue";
 const gouwucheImage = CDN_URL + '/static/assets/gouwuche.png'
@@ -38,7 +38,7 @@ const state = reactive({
   selectAllIndeterminate: false,
 
   cart_id: [],
-  changeSkuCart_id:'0',
+  changeSkuCart_id: '0',
   isManage: true,
 
   currentType: '',
@@ -46,6 +46,11 @@ const state = reactive({
   isShowSku: false,
   cartNum: 1,
   currentSku: {},
+  //新增
+  shareImage: '',
+  isRelation: '',
+  shareId: '',
+  status:'',
 })
 
 const detail: any = ref(null)
@@ -57,7 +62,7 @@ function onSelectedSku(item) {
 
 function handleCreateShopping() {
   // console.log(state.flag)
-  console.log(state.currentSku.unique,'切换sku展示的商品',state)
+  console.log(state.currentSku.unique, '切换sku展示的商品', state)
   changeProdoctSku(
     // product_attr_unique: JSON.stringify(state.currentSku),
     // detail.value.unique
@@ -101,7 +106,7 @@ function handleCountChange(val) {
   // console.log(val)
   // detail.value.
   // if (val > 0) {
-    state.cartNum = val
+  state.cartNum = val
   // }
 }
 
@@ -269,13 +274,13 @@ function shopCheck(shopItem) {
 
 function handleShopTitleClick(shopItem) {
   if (shopItem.allCheck) {
-        shopItem.list.forEach((good, index) => {
-          good.check = true
-        })
+    shopItem.list.forEach((good, index) => {
+      good.check = true
+    })
   } else {
-        shopItem.list.forEach((good, index) => {
-          good.check = false
-        })
+    shopItem.list.forEach((good, index) => {
+      good.check = false
+    })
   }
 }
 function cartAllCheck(type: 'single' | 'all') {
@@ -458,13 +463,13 @@ function handleDelete() {
 
 
 function handleProductItemClick(
-    item:
-        JdProductModel
-        & DcProductModel
-        & DyProductModel
-        & SuNingProductModel
-        & TaobaoProductThirdPartyWaresModel
-        & VipProductModel
+  item:
+    JdProductModel
+    & DcProductModel
+    & DyProductModel
+    & SuNingProductModel
+    & TaobaoProductThirdPartyWaresModel
+    & VipProductModel
 ) {
   // function navigateToDetail(params) {
   //   let otherDetailUrl = `/pages/store/product/other`
@@ -495,83 +500,76 @@ function handleNumberChange(num, goodItem) {
 const headerClass = ref('')
 onPageScroll((page) => {
   // console.log('滚轮事件触发了',page.scrollTop.toFixed());
-  
+
   // console.log(page.scrollTop.toFixed(),'距离顶部的距离')
   Scroll_X.value = Number(page.scrollTop.toFixed())
-  if (page.scrollTop >= 76 ) {
+  if (page.scrollTop >= 76) {
     headerClass.value = 'bg-white !text-gray-900'
   } else {
     headerClass.value = ''
   }
 })
-const openTestLog1 = (a)=>{
-  console.log('商品的id',a.product_id)
+const openTestLog1 = (a) => {
+  console.log('商品的id', a.product_id)
   console.log('测试点击sku，多规模');
   state.isShowSku = true
-  
+
 }
 
 function openTestLog(element) {
   state.isShowSku = true
   state.changeSkuCart_id = element.cart_id
-console.log('用户点击sku,展示商品id和购物车id',element.product_id,element.cart_id)
-getProductDetail(element.product_id).then(res => {
-  console.log(res.sku,'点击sku，展示返回的res')
-  detail.value = res
-  // console.log(detail.value,'点击sku获取的商品信息，存储的detail')
-  state.shareImage = detail.value.image
-  if (res && res.mer_id && res.mer_id === '148') {
-    if (detail.value && detail.value.price ) {
-      detail.value.price = detail.value.price * 30
+  console.log('用户点击sku,展示商品id和购物车id', element.product_id, element.cart_id)
+  getProductDetail(element.product_id).then(res => {
+    console.log(res.data, '点击sku，展示返回的res')
+    detail.value = res.data
+    // console.log(detail.value,'点击sku获取的商品信息，存储的detail')
+    state.shareImage = detail.value.image
+    if (res && res.mer_id && res.mer_id === '148') {
+      if (detail.value && detail.value.price) {
+        detail.value.price = detail.value.price * 30
+      }
+    }
+    state.isRelation = res.isRelation
+    if (res.merchant_type == 2) {
+      xcxBanding({
+        mer_id: res.mer_id,
+        share_id: state.shareId
+      }).then(res => {
+        console.info(res)
+      })
     }
-  }
-  state.isRelation = res.isRelation
-  if (res.merchant_type == 2) {
-    xcxBanding({
-      mer_id: res.mer_id,
-      share_id: state.shareId
-    }).then(res => {
-      console.info(res)
-    })
-  }
 
-  // if (detail.value.mer_id === '148') {
-  // }
-  uni.hideLoading()
-}).catch(error => {
-  // console.log(error)
-  uni.showToast({
-    icon: "none",
-    title: error
-  }).then( () => {
-    setTimeout(() => {
-      uni.navigateBack()
-    }, 500)
+    // if (detail.value.mer_id === '148') {
+    // }
+    uni.hideLoading()
+  }).catch(error => {
+    // console.log(error)
+    uni.showToast({
+      icon: "none",
+      title: error
+    }).then(() => {
+      setTimeout(() => {
+        uni.navigateBack()
+      }, 500)
+    })
   })
-})
 }
-const closeTestLog = ()=>{
+const closeTestLog = () => {
   console.log('测试点击sku，多规模');
 
 }
 </script>
 <template>
   <div class="">
-    <div
-        v-if="hasShopping"
-        class="bg-white h-10 fixed top-0 w-full z-1 flex justify-end "
-    >
+    <div v-if="hasShopping" class="bg-white h-10 fixed top-0 w-full z-1 flex justify-end ">
       <div class="pr-3">
-        <FButton size="small"
-                 @click="handleManageCart"
-        >
-          <div>{{ state.isManage ? '管理' : '完成'}}</div>
+        <FButton size="small" @click="handleManageCart">
+          <div>{{ state.isManage ? '管理' : '完成' }}</div>
         </FButton>
       </div>
     </div>
-    <div
-        v-if="!hasShopping"
-        class="flex flex-col justify-center items-center bg-white rounded-lg gap-3 text-xs py-8">
+    <div v-if="!hasShopping" class="flex flex-col justify-center items-center bg-white rounded-lg gap-3 text-xs py-8">
       <div>
         <image :src="gouwucheImage" mode="widthFix" class="w-20 h-20"></image>
       </div>
@@ -581,66 +579,42 @@ const closeTestLog = ()=>{
     </div>
     <div v-else class="mt-10">
 
-      <div
-          v-if="shopping && shopping.list"
-          class="flex flex-col gap-4 p-3"
-      >
-        <div
-            v-for="(shopItem, index) in shopping.list"
-            :key="index"
-            class="bg-white rounded-lg  "
-        >
-          <div
-              class="f-hairline-bottom flex  items-center font-bold p-3"
-          >
+      <div v-if="shopping && shopping.list" class="flex flex-col gap-4 p-3">
+        <div v-for="(shopItem, index) in shopping.list" :key="index" class="bg-white rounded-lg  ">
+          <div class="f-hairline-bottom flex  items-center font-bold p-3">
             <div @tap.stop="handleShopTitleClick(shopItem)">
 
-            <nut-checkbox v-model="shopItem.allCheck"
-                          @change="(checked) => shopCheck( shopItem)"
-                          label="全选"
-                          class="!text-primary"
-            >
-              {{ shopItem.mer_name }}
-            </nut-checkbox>
+              <nut-checkbox v-model="shopItem.allCheck" @change="(checked) => shopCheck(shopItem)" label="全选"
+                class="!text-primary">
+                {{ shopItem.mer_name }}
+              </nut-checkbox>
             </div>
 
           </div>
-          <div v-for="(goodItem, goodIndex) in shopItem.list"
-               :key="goodIndex"
-               class="flex f-hairline-bottom p-3 gap-2"
-          >
+          <div v-for="(goodItem, goodIndex) in shopItem.list" :key="goodIndex" class="flex f-hairline-bottom p-3 gap-2">
             <div class="flex">
-              <nut-checkbox v-model="goodItem.check"
-                            @change="handleGoodsItemCheck"
-                            label="单选"
-                            class="!text-primary"
-              ></nut-checkbox>
-              <image
-                  @click="handleProductItemClick(goodItem)"
-                  :src="goodItem.product.image"
-                  mode="aspectFill" class="w-18 h-18 rounded"
-              ></image>
+              <nut-checkbox v-model="goodItem.check" @change="handleGoodsItemCheck" label="单选"
+                class="!text-primary"></nut-checkbox>
+              <image @click="handleProductItemClick(goodItem)" :src="goodItem.product.image" mode="aspectFill"
+                class="w-18 h-18 rounded"></image>
             </div>
 
             <div class="flex flex-col gap-1 w-full">
-              <div
-                  @click="handleProductItemClick(goodItem)"
-                  class="text-overflow line-clamp-2 text-xs">{{ goodItem.product.store_name }}</div>
+              <div @click="handleProductItemClick(goodItem)" class="text-overflow line-clamp-2 text-xs">{{
+                goodItem.product.store_name }}</div>
               <div class="flex flex-col justify-start gap-1">
-                <div
-                    class="text-[10px] text-gray min-w-5  p-1  items-center flex skushadow" v-if="goodItem.productAttr.sku" @click="openTestLog(goodItem)">
-                  {{ goodItem.productAttr.sku +' V'}}
+                <div class="text-[10px] text-gray min-w-5  p-1  items-center flex skushadow"
+                  v-if="goodItem.productAttr.sku" @click="openTestLog(goodItem)">
+                  {{ goodItem.productAttr.sku + ' V' }}
                 </div>
                 <div class="flex">
-                  <CXBYaojinTag :amount="goodItem.yanglao"/>
+                  <CXBYaojinTag :amount="goodItem.yanglao" />
 
                 </div>
               </div>
               <div class="flex  justify-between ">
-                <FPrice :price="goodItem.productAttr.price"
-                        ex-class="font-bold text-dark"
-                />
-                <nut-input-number v-model="goodItem.cart_num" @change="(num) => handleNumberChange(num, goodItem)"/>
+                <FPrice :price="goodItem.productAttr.price" ex-class="font-bold text-dark" />
+                <nut-input-number v-model="goodItem.cart_num" @change="(num) => handleNumberChange(num, goodItem)" />
               </div>
             </div>
           </div>
@@ -649,7 +623,7 @@ const closeTestLog = ()=>{
       </div>
     </div>
 
-    <CXBBackTop :Scroll_X="Scroll_X"/>
+    <CXBBackTop :Scroll_X="Scroll_X" />
     <div class="pb-12">
       <div class="flex flex-row justify-center items-center gap-3 font-bold text-sm p-3 ">
         <image :src="like_adorn_220628Image" mode="widthFix" class="w-6 h-6"></image>
@@ -661,17 +635,13 @@ const closeTestLog = ()=>{
 
       <div class="pb-3 px-3" v-if="state.recommendList">
         <grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10px" main-axis-gap="10px">
-          <div v-for="(item, index) in state.recommendList"
-               :key="index"
-               @click="handleProductItemClick(item)"
-          >
+          <div v-for="(item, index) in state.recommendList" :key="index" @click="handleProductItemClick(item)">
             <MerchantProductCard :item="item" />
 
           </div>
         </grid-view>
 
-        <div class=" flex justify-center items-center text-[12px] text-gray-500"
-        >
+        <div class=" flex justify-center items-center text-[12px] text-gray-500">
           <div v-if="state.status === 'loading'">
             加载中...
           </div>
@@ -683,21 +653,12 @@ const closeTestLog = ()=>{
       </div>
     </div>
   </div>
-  <CXBSkuPopup 
-  v-model:show="state.isShowSku"
-      :detail="detail"
-      @selected:item="onSelectedSku"
-      @submit="handleCreateShopping"
-      @count-change="handleCountChange"
-  />
-  <div v-if="hasShopping"
-       class="fixed bottom-0 w-full z-3">
+  <CXBSkuPopup v-model:show="state.isShowSku" :detail="detail" @selected:item="onSelectedSku"
+    @submit="handleCreateShopping" @count-change="handleCountChange" />
+  <div v-if="hasShopping" class="fixed bottom-0 w-full z-3">
     <div class="bg-white h-10 flex justify-between" v-if="shopping && shopping.list">
       <div class="flex justify-center items-center gap-2 pl-3" @tap.stop="handleSelectAll">
-        <nut-checkbox v-model="isAllSelect"
-                      label="全选"
-                      class="!text-primary"
-        >全选
+        <nut-checkbox v-model="isAllSelect" label="全选" class="!text-primary">全选
         </nut-checkbox>
         <div class="text-xs text-gray">共 {{ state.totalCartCount }} 件</div>
       </div>
@@ -708,12 +669,9 @@ const closeTestLog = ()=>{
           <FPrice :price="state.totalPrice"></FPrice>
           <!--          {{totalCartInfo.totalPrice}}-->
         </div>
-        <FButton
-            @click="handleSubmit"
-            size="small"
-            :exClass="['rounded-full','!text-[14px]', 'text-white', 'bg-primary', 'w-full']"
-        >
-          {{ state.isManage? '去结算' : '删除'}}
+        <FButton @click="handleSubmit" size="small"
+          :exClass="['rounded-full', '!text-[14px]', 'text-white', 'bg-primary', 'w-full']">
+          {{ state.isManage ? '去结算' : '删除' }}
         </FButton>
       </div>
     </div>
@@ -723,7 +681,8 @@ const closeTestLog = ()=>{
 page {
   background-color: #f8f8f8;
 }
-.skushadow{
+
+.skushadow {
   background-color: rgb(240, 240, 240);
   border-radius: 10px;
 }

src/pages/sold-out/sold-out.vue

@@ -0,0 +1,121 @@
+<script setup lang='ts'>
+import { ref, reactive, defineProps } from 'vue'
+import { getRecommendList } from '~/apis/merchant'
+import { DcProductModel } from '~/apis/model/dacang.model'
+import { DyProductModel, JdProductModel, SuNingProductModel, TaobaoProductThirdPartyWaresModel, VipProductModel } from '~/apis/model/product.model'
+import MerchantProductCard from "~/pages/store/home/components/MerchantProductCard.vue";
+let state=reactive({
+  recommendList:[]
+})
+
+onLoad((options: any) => {
+  YouLike()
+  uni.hideLoading()
+
+})
+
+
+//猜你喜欢
+function YouLike() {
+  getRecommendList({
+    page: 1,
+    limit: 10
+  }).then(res => {
+    state.recommendList = res.list
+    console.log(state.recommendList);
+    
+  })
+}
+
+function handleProductItemClick(
+  item:
+    JdProductModel
+    & DcProductModel
+    & DyProductModel
+    & SuNingProductModel
+    & TaobaoProductThirdPartyWaresModel
+    & VipProductModel
+) {
+  // function navigateToDetail(params) {
+  //   let otherDetailUrl = `/pages/store/product/other`
+  //   return uni.navigateTo({
+  //     url: `${otherDetailUrl}?params=${params}`
+  //   })
+  // }
+  // 大仓
+  uni.navigateTo({
+    url: `/pages/store/product/detail?id=${item.product_id}`
+  })
+}
+
+
+
+</script>
+
+<template>
+  <div class="box-out">
+    <div class="flex-box pb-3 px-3 ">
+      <div class="img-div">
+        <image lazy-load src="../../../static/icon/商品下架不存在@3x.png" mode="widthFix" class=" top-0 right-0 sold-out ">
+        </image>
+      </div>
+      <div class="out-conter">该商品下架不存在</div>
+    </div>
+
+  </div>
+  <div class="flex flex-col pb-safe gap-3">
+      <div class="p-3 bg-white">
+        <div
+            class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-600 before:rounded relative inline-block">
+          <div class="pl-2">
+            猜你喜欢
+          </div>
+        </div>
+      </div>
+      <div class="pb-3 px-3" v-if="state.recommendList.length!=0">
+        <grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10px" main-axis-gap="10px">
+          <div v-for="(item, index) in state.recommendList"
+               :key="index"
+               @click="handleProductItemClick(item)"
+          >
+            <MerchantProductCard :item="item"/>
+
+          </div>
+        </grid-view>
+      </div>
+
+    </div>
+</template>
+
+
+<style scoped>
+.box-out {
+  background: #f8f8f8;
+  height: 200px;
+}
+
+.flex-box {
+  background: #ffffff;
+  box-shadow: 3px;
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.img-div {
+  width: 100%;
+
+}
+
+.sold-out {
+  display: block;
+  width: 120px;
+  height: 120px;
+  margin: 0 auto;
+}
+
+.out-conter {
+  text-align: center;
+}
+</style>

src/pages/store/product/detail.vue

@@ -1,24 +1,24 @@
 <script lang="ts" setup>
 import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
-import {getProductDetail, getRecommendList} from "~/apis/merchant";
+import { getProductDetail, getRecommendList } from "~/apis/merchant";
 import MerchantProductCard from "~/pages/store/home/components/MerchantProductCard.vue";
 import FCell from "~/components/FCell/FCell.vue";
-import type {SkuModel} from "~/apis/model/product.model";
+import type { SkuModel } from "~/apis/model/product.model";
 import CXBSkuPopup from "~/components/CXBSkuPopup/CXBSkuPopup.vue";
 import CXBBackTop from '~/components/CXBBackTop/CXBBackTop.vue';
-import {createShopping} from "~/apis/order.api";
-import {getAgentInfo, getCartCount, relation, removeMyRelation, xcxBanding} from "~/apis/user";
+import { createShopping } from "~/apis/order.api";
+import { getAgentInfo, getCartCount, relation, removeMyRelation, xcxBanding } from "~/apis/user";
 import {
   DyProductModel,
   JdProductModel,
   SuNingProductModel,
   TaobaoProductThirdPartyWaresModel, VipProductModel
 } from "~/apis/model/product.model";
-import {DcProductModel} from "~/apis/model/dacang.model";
-import {CDN_URL} from "~/config/app";
+import { DcProductModel } from "~/apis/model/dacang.model";
+import { CDN_URL } from "~/config/app";
 import dayjs from "dayjs";
-import {getShareId} from "~/apis/product";
-import {debounce} from "lodash-es";
+import { getShareId } from "~/apis/product";
+import { debounce } from "lodash-es";
 
 const usePageStore = usePageStoreWidthOut()
 
@@ -54,9 +54,9 @@ const state = reactive({
   goods: {
     price: '4599.00',
     imagePath:
-        '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
+      '//img14.360buyimg.com/n4/jfs/t1/215845/12/3788/221990/618a5c4dEc71cb4c7/7bd6eb8d17830991.jpg'
   },
-//1表示立即购买;2表示加入购物车,3表示立即兑换
+  //1表示立即购买;2表示加入购物车,3表示立即兑换
   flag: '1',
   isNew: '0',
   cartNum: 1,
@@ -64,7 +64,7 @@ const state = reactive({
   shareImage: '',
 })
 const detail: any = ref(null)
-
+let isShow = ref(false)
 onShow(() => {
   uni.showLoading({
     title: '数据加载中',
@@ -87,10 +87,16 @@ uni.showShareMenu({
   menus: ['shareAppMessage', 'shareTimeline']
 })
 onLoad((option: any) => {
+  uni.showLoading({
+    title: '数据加载中',
+    icon: 'none'
+  })
+  console.log(option);
   // const id = '4858'
   state.id = option.id
   // state.id = 4858
   const fromShareId = option.shareID
+  // console.log(fromShareId);
   // console.log(fromShareId + '---share_id...')
   // if (state.shareId) {
   if (fromShareId) {
@@ -108,45 +114,58 @@ onLoad((option: any) => {
     state.recommendList = res.list
   })
 
-  getShareId({ pid: state.id, type: 1}).then(res => {
+  getShareId({ pid: state.id, type: 1 }).then(res => {
     state.shareId = res.share_id
     userStore.setRedirectPage(`/pages/store/product/detail?id=${state.id}&from=share&shareID=${state.shareId}`, 'page')
 
   })
 
+
+
 })
 
 function loadProductDetail() {
 
   getProductDetail(state.id).then(res => {
-    // console.log(res)
-    detail.value = res
-
-    state.shareImage = detail.value.image
-    if (res && res.mer_id && res.mer_id === '148') {
-      if (detail.value && detail.value.price ) {
-        detail.value.price = detail.value.price * 30
+    // console.log('我是res.message', res.message)
+    // console.log(res);
+    if (res.status === 200) {
+      detail.value = res.data
+
+      state.shareImage = detail.value.image
+      if (res && res.mer_id && res.mer_id === '148') {
+        if (detail.value && detail.value.price) {
+          detail.value.price = detail.value.price * 30
+        }
       }
-    }
-    state.isRelation = res.isRelation
-    if (res.merchant_type == 2) {
-      xcxBanding({
-        mer_id: res.mer_id,
-        share_id: state.shareId
-      }).then(res => {
-        console.info(res)
+      state.isRelation = res.isRelation
+      if (res.merchant_type == 2) {
+        xcxBanding({
+          mer_id: res.mer_id,
+          share_id: state.shareId
+        }).then(res => {
+          console.info(res)
+        })
+      }
+
+      // if (detail.value.mer_id === '148') {
+      // }
+      uni.hideLoading()
+    } else {
+      isShow.value = true
+      uni.setNavigationBarTitle({
+        title: '商品下架不存在'
       })
+      uni.hideLoading()
+
     }
 
-    // if (detail.value.mer_id === '148') {
-    // }
-    uni.hideLoading()
   }).catch(error => {
     // console.log(error)
     uni.showToast({
       icon: "none",
       title: error
-    }).then( () => {
+    }).then(() => {
       setTimeout(() => {
         uni.navigateBack()
       }, 500)
@@ -201,7 +220,7 @@ onShareTimeline(() => {
 
   return {
     title: `${detail.value.store_name}`,
-    imageUrl:  state.shareImage,
+    imageUrl: state.shareImage,
     query: `id=${state.id}&from=share&shareID=${state.shareId}`
   }
 
@@ -290,7 +309,7 @@ function handleCreateShopping() {
     // product_attr_unique: JSON.stringify(state.currentSku),
     product_attr_unique: state.currentSku.unique,
     cart_num: state.cartNum,
-    is_new: (state.flag === '1' || state.flag === '3') ? '1': '0'
+    is_new: (state.flag === '1' || state.flag === '3') ? '1' : '0'
   }).then(res => {
     // console.log(res)
     if (res.cart_id) {
@@ -316,7 +335,7 @@ function handleCreateShopping() {
         title: error,
         icon: 'none'
       })
-    } else if (error === '库存不足')  {
+    } else if (error === '库存不足') {
       return uni.showToast({
         title: error,
         icon: 'none'
@@ -335,7 +354,7 @@ function handleCreateShopping() {
  *
  * @param flag //1表示立即购买;2表示加入购物车,3表示立即兑换
  */
-function handleOrderConfirm(flag: '1' | '2'| '3') {
+function handleOrderConfirm(flag: '1' | '2' | '3') {
   debounce(() => {
     if (!userStore.uid) {
       return uni.showToast({
@@ -350,7 +369,7 @@ function handleOrderConfirm(flag: '1' | '2'| '3') {
 
       })
     }
-  }, 150,  {
+  }, 150, {
     'leading': true,
     'trailing': false
   })
@@ -368,17 +387,17 @@ function handleCountChange(val) {
   // console.log(val)
   // detail.value.
   // if (val > 0) {
-    state.cartNum = val
+  state.cartNum = val
   // }
 }
 function handleProductItemClick(
-    item:
-        JdProductModel
-        & DcProductModel
-        & DyProductModel
-        & SuNingProductModel
-        & TaobaoProductThirdPartyWaresModel
-        & VipProductModel
+  item:
+    JdProductModel
+    & DcProductModel
+    & DyProductModel
+    & SuNingProductModel
+    & TaobaoProductThirdPartyWaresModel
+    & VipProductModel
 ) {
   // function navigateToDetail(params) {
   //   let otherDetailUrl = `/pages/store/product/other`
@@ -421,7 +440,7 @@ function handleRelation() {
 
 function handleRemoveRelation() {
   // console.log('on....')
-  removeMyRelation({type: 1, type_id: state.id}).then(res => {
+  removeMyRelation({ type: 1, type_id: state.id }).then(res => {
     // isCare.value = false
     state.isRelation = false
 
@@ -464,10 +483,10 @@ let Scroll_X = ref(0)
 const headerClass = ref('')
 onPageScroll((page) => {
   // console.log('滚轮事件触发了',page.scrollTop.toFixed());
-  
+
   // console.log(page.scrollTop.toFixed(),'距离顶部的距离')
   Scroll_X.value = Number(page.scrollTop.toFixed())
-  if (page.scrollTop >= 76 ) {
+  if (page.scrollTop >= 76) {
     headerClass.value = 'bg-white !text-gray-900'
   } else {
     headerClass.value = ''
@@ -476,27 +495,21 @@ onPageScroll((page) => {
 </script>
 
 <template>
+  <!-- 商品上架状态 -->
   <div class="flex flex-col gap-3 pb-20" v-if="detail">
-    <CXBBackTop :Scroll_X="Scroll_X"/>
+    <CXBBackTop :Scroll_X="Scroll_X" />
     <div class="bg-white ">
       <div class="w-screen h-94">
-        <swiper
-            v-if="detail && detail.slider_image"
-            :indicator-dots="state.indicatorDots"
-            indicator-active-color="#e93323"
-            :autoplay="state.autoplay"
-            :circular="state.circular"
-            :interval="state.interval"
-            :duration="state.duration"
-            class="w-full h-94"
-        >
+        <swiper v-if="detail && detail.slider_image" :indicator-dots="state.indicatorDots"
+          indicator-active-color="#e93323" :autoplay="state.autoplay" :circular="state.circular"
+          :interval="state.interval" :duration="state.duration" class="w-full h-94">
           <swiper-item v-for="(item, index) in detail.slider_image" :key="index">
-            <image :src="item" @tap="previewImage(index)" class="!w-full !h-full" mode="aspectFill"/>
+            <image :src="item" @tap="previewImage(index)" class="!w-full !h-full" mode="aspectFill" />
           </swiper-item>
         </swiper>
       </div>
       <div class="bg-gradient-to-r from-[#fe7577] to-[#fe0032] h-20 mt-3 flex items-center p-3 justify-between"
-           v-if="detail.seckill == 1">
+        v-if="detail.seckill == 1">
         <div class="flex flex-col">
           <div class="flex gap-2 items-center text-white">
             <div class="text-[30px] font-bold">
@@ -505,16 +518,15 @@ onPageScroll((page) => {
             <image :src="miaoshaIcon" mode="widthFix" class="w-10"></image>
           </div>
           <div class="text-white text-xs">
-            即将恢复原价 ￥{{detail.ot_price}}
+            即将恢复原价 ￥{{ detail.ot_price }}
           </div>
         </div>
         <div class="flex flex-col items-center gap-2 justify-center">
           <image :src="xiaoshimiaoshaIcon" class="w-17 h-4" model="widthFix"></image>
           <div class="text-white " v-if="detail.seckill_s == 1">
-            <div class="text-xs"
-                 >
-            距秒杀结束</div>
-            <nut-countdown :end-time="new Date(detail.seckill_date_end).getTime() + 60 * 1000" ></nut-countdown>
+            <div class="text-xs">
+              距秒杀结束</div>
+            <nut-countdown :end-time="new Date(detail.seckill_date_end).getTime() + 60 * 1000"></nut-countdown>
           </div>
           <div class="text-white" v-if="detail.seckill_s == 2">
             <div class="">
@@ -527,18 +539,14 @@ onPageScroll((page) => {
         </div>
 
       </div>
-      <div class="bg-black bg-op-30 fixed top-3  rounded-full right-3 h-6 w-6 flex flex-col justify-center items-center z-10"
-           @click="toggleRelation"
-      >
-        <div class="h4 w-4"
-             :class="state.isRelation ? 'bg-primary i-tabler-star-filled' : 'i-tabler-star text-white'"
-
-        ></div>
+      <div
+        class="bg-black bg-op-30 fixed top-3  rounded-full right-3 h-6 w-6 flex flex-col justify-center items-center z-10"
+        @click="toggleRelation">
+        <div class="h4 w-4" :class="state.isRelation ? 'bg-primary i-tabler-star-filled' : 'i-tabler-star text-white'">
+        </div>
       </div>
 
-      <div
-          class="flex flex-col p-3 gap-3"
-      >
+      <div class="flex flex-col p-3 gap-3">
         <div class="flex flex-row  items-center text-[#FE0032] font-bold text-lg gap-2">
           <div v-if="is148Merchant && detail.price" class="flex justify-end items-end gap-2">
             <div class="!text-[24px]">{{ Number.parseFloat(detail.price).toFixed(2) }} </div>
@@ -549,18 +557,14 @@ onPageScroll((page) => {
               ￥ {{ detail.price }}
             </div>
           </div>
-          <div
-              v-if="!is148Merchant"
-              class="line-through text-xs font-bold flex text-gray-600"
-          >
+          <div v-if="!is148Merchant" class="line-through text-xs font-bold flex text-gray-600">
             原价 ¥ {{ detail.ot_price }}
           </div>
         </div>
-        <div
-            v-if="!is148Merchant"
-            class="border border-solid border-1 border-red rounded flex text-xs items-center text-[#FE0032] w-fit">
-          <image src="https://cdn.bjtdba.com/vod/image/2023-09-15/20230915160858609.png"
-                 mode="widthFix" class="!w-8 h-4"></image>
+        <div v-if="!is148Merchant"
+          class="border border-solid border-1 border-red rounded flex text-xs items-center text-[#FE0032] w-fit">
+          <image src="https://cdn.bjtdba.com/vod/image/2023-09-15/20230915160858609.png" mode="widthFix" class="!w-8 h-4">
+          </image>
           <div class="px-2 flex items-center jusitify-center" v-if="detail.yanglao">
             <div>
               养老金 ¥{{ detail.yanglao }}
@@ -570,16 +574,14 @@ onPageScroll((page) => {
 
         <div class="flex flex-col gap-2">
           <div class="flex font-bold flex items-center gap-1" v-if="detail && detail.store_name">
-           <div class="flex bg-primary text-white rounded text-[10px] text-center">
-             <div class=" h-4 w-4 ">仓</div></div>
+            <div class="flex bg-primary text-white rounded text-[10px] text-center">
+              <div class=" h-4 w-4 ">仓</div>
+            </div>
             <div class=" justify-center items-center" v-html="detail.store_name">
             </div>
           </div>
-          <div
-              v-if="detail.store_info"
-              class="text-gray-600 text-sm w-fit px-1"
-               :class="is148Merchant ? 'border border-solid border-gray' : ''"
-          >
+          <div v-if="detail.store_info" class="text-gray-600 text-sm w-fit px-1"
+            :class="is148Merchant ? 'border border-solid border-gray' : ''">
             {{ detail.store_info }}
           </div>
         </div>
@@ -587,11 +589,11 @@ onPageScroll((page) => {
         <div class="flex gap-3 text-[12px]">
           <div>分享：</div>
           <div class="flex-1  items-center flex  ">
-              <button open-type="share" class="flex gap-2 w-1/2 text-[12px]">
+            <button open-type="share" class="flex gap-2 w-1/2 text-[12px]">
 
               <image :src="wx_shareImg" mode="widthFix" class="w-5 h-5"></image>
               <div>微信</div>
-              </button>
+            </button>
 
             <div class="flex gap-2 w-1/2" @click="shareShowTips = true">
               <image :src="pyqImg" mode="widthFix" class="w-5 h-5"></image>
@@ -603,29 +605,24 @@ onPageScroll((page) => {
       </div>
     </div>
 
-    <FCell
-        arrow
-        @tap="state.isShowSku = !state.isShowSku"
-    >
+    <FCell arrow @tap="state.isShowSku = !state.isShowSku">
       <template #title>
         <div class="flex items-center" v-if="state.currentSku">
           <div class="font-bold">规格：</div>
-<!--          <div v-for="(key, index) in Object.keys(detail.sku)"-->
-<!--               :key="index"-->
-<!--               class="pl-2 text-sm"-->
-<!--          >-->
-<!--            {{ key }}-->
-<!--          </div>-->
-          {{state.currentSku.sku}}
+          <!--          <div v-for="(key, index) in Object.keys(detail.sku)"-->
+          <!--               :key="index"-->
+          <!--               class="pl-2 text-sm"-->
+          <!--          >-->
+          <!--            {{ key }}-->
+          <!--          </div>-->
+          {{ state.currentSku.sku }}
         </div>
 
       </template>
     </FCell>
 
     <!-- 店铺信息 -->
-    <div
-        @tap="handleShowMerchant(detail.mer_id)"
-        class="flex gap-3 p-3 bg-white">
+    <div @tap="handleShowMerchant(detail.mer_id)" class="flex gap-3 p-3 bg-white">
       <div v-if="detail && detail.merchant">
         <image :src="detail.merchant.mer_avatar" mode="widthFix" class=" h-12 w-12"></image>
       </div>
@@ -634,9 +631,7 @@ onPageScroll((page) => {
           <div>{{ detail.merchant.mer_name }}</div>
           <div class="i-tabler-chevron-right text-gray"></div>
         </div>
-        <div
-            class="border border-solid border-red text-red text-xs px-1 rounded-full w-fit"
-        >
+        <div class="border border-solid border-red text-red text-xs px-1 rounded-full w-fit">
           进入店铺
         </div>
       </div>
@@ -645,26 +640,19 @@ onPageScroll((page) => {
     <div class="flex flex-col bg-white">
       <div class="p-3">
         <div
-            class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-600 before:rounded relative inline-block">
+          class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-600 before:rounded relative inline-block">
           <div class="pl-2">
             为你推荐
           </div>
         </div>
       </div>
       <div class="pb-3">
-        <scroll-view
-            class=" whitespace-nowrap  w-screen  text-white text-sm"
-            :scroll-with-animation="true"
-            :scroll-x="true"
-            :show-scrollbar="false"
-        >
+        <scroll-view class=" whitespace-nowrap  w-screen  text-white text-sm" :scroll-with-animation="true"
+          :scroll-x="true" :show-scrollbar="false">
           <div class="pl-3" v-if="detail && detail.merchant">
-            <div v-for="(item, index) in detail.merchant.recommend"
-                 :key="index"
-                 @click="handleProductItemClick(item)"
-                 class="flex inline-flex items-center justify-center relative "
-            >
-              <MerchantProductCard :item="item" exClass="w-40 border border-solid border-gray-200 mr-3"/>
+            <div v-for="(item, index) in detail.merchant.recommend" :key="index" @click="handleProductItemClick(item)"
+              class="flex inline-flex items-center justify-center relative ">
+              <MerchantProductCard :item="item" exClass="w-40 border border-solid border-gray-200 mr-3" />
             </div>
 
           </div>
@@ -676,7 +664,7 @@ onPageScroll((page) => {
     <div class="flex flex-col justify-center bg-white">
       <div class="p-3">
         <div
-            class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-800 before:rounded relative inline-block">
+          class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-800 before:rounded relative inline-block">
           <div class="pl-2">
             图文详情
           </div>
@@ -694,7 +682,7 @@ onPageScroll((page) => {
     <div class="flex flex-col pb-safe gap-3">
       <div class="p-3 bg-white">
         <div
-            class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-600 before:rounded relative inline-block">
+          class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-600 before:rounded relative inline-block">
           <div class="pl-2">
             猜你喜欢
           </div>
@@ -702,11 +690,8 @@ onPageScroll((page) => {
       </div>
       <div class="pb-3 px-3" v-if="state.recommendList">
         <grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10px" main-axis-gap="10px">
-          <div v-for="(item, index) in state.recommendList"
-               :key="index"
-               @click="handleProductItemClick(item)"
-          >
-            <MerchantProductCard :item="item"/>
+          <div v-for="(item, index) in state.recommendList" :key="index" @click="handleProductItemClick(item)">
+            <MerchantProductCard :item="item" />
 
           </div>
         </grid-view>
@@ -715,57 +700,75 @@ onPageScroll((page) => {
     </div>
 
   </div>
-  <div class="fixed bottom-0 w-screen pb-safe bg-white">
+  <!-- 商品下架 -->
+  <div class="relative w-screen " v-if="isShow">
+    <CXBBackTop :Scroll_X="Scroll_X" />
+    <div class="box-out">
+      <div class="flex-box pb-3 px-3 ">
+        <div class="img-div">
+          <image lazy-load src="../../../static/icon/商品下架不存在@3x.png" mode="widthFix" class=" top-0 right-0 sold-out ">
+          </image>
+        </div>
+        <div class="out-conter">该商品下架不存在</div>
+      </div>
+
+    </div>
+    <div class="flex flex-col pb-safe gap-3">
+      <div class="p-3 bg-white">
+        <div
+          class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-600 before:rounded relative inline-block">
+          <div class="pl-2">
+            猜你喜欢
+          </div>
+        </div>
+      </div>
+      <div class="pb-3 px-3" v-if="state.recommendList.length != 0">
+        <grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10px" main-axis-gap="10px">
+          <div v-for="(item, index) in state.recommendList" :key="index" @click="handleProductItemClick(item)">
+            <MerchantProductCard :item="item" />
+
+          </div>
+        </grid-view>
+      </div>
+
+    </div>
+  </div>
+  <!-- 底部栏 -->
+  <div class="fixed bottom-0 w-screen pb-safe bg-white" v-if="detail">
     <div class="flex flex-row justify-between py-2 ">
       <div class=" flex justify-around">
-        <div
-            @tap="handleShowMerchant(detail.mer_id)"
-            class="flex flex-col justify-center items-center pl-4"
-        >
-<!--          <div class="i-tabler-building-store"></div>-->
+        <div @tap="handleShowMerchant(detail.mer_id)" class="flex flex-col justify-center items-center pl-4">
+          <!--          <div class="i-tabler-building-store"></div>-->
           <image :src="shangpinxiangqing_dianpu" mode="widthFix" class="w-6 h-6"></image>
           <div class="text-[11px]">店铺</div>
         </div>
 
-        <div
-            @tap="handleShowCustomer"
-            class="flex flex-col justify-center items-center pl-4">
-<!--          <div class="i-tabler-headset"></div>-->
+        <div @tap="handleShowCustomer" class="flex flex-col justify-center items-center pl-4">
+          <!--          <div class="i-tabler-headset"></div>-->
           <image :src="shangpinxiangqing_kefu" mode="widthFix" class="w-6 h-6"></image>
 
           <div class="text-[11px]">客服</div>
         </div>
-        <div
-            @tap="handleShowShopCart"
-            class="flex flex-col justify-center items-center pl-4 relative">
-          <div class="bg-primary rounded-full w-3 h-3 text-[9px] text-white justify-center items-center absolute top--1 right--1 text-center"
-               v-if="state.cartCount"
-          >
-            {{state.cartCount}}
+        <div @tap="handleShowShopCart" class="flex flex-col justify-center items-center pl-4 relative">
+          <div
+            class="bg-primary rounded-full w-3 h-3 text-[9px] text-white justify-center items-center absolute top--1 right--1 text-center"
+            v-if="state.cartCount">
+            {{ state.cartCount }}
           </div>
           <image :src="shangpinxiangqing_gouwuche" mode="widthFix" class="w-6 h-6"></image>
 
-<!--          <div class="i-tabler-shopping-cart"></div>-->
+          <!--          <div class="i-tabler-shopping-cart"></div>-->
           <div class="text-[11px]">购物车</div>
         </div>
       </div>
       <div class="flex flex-row text-sm text-white gap-2 pr-3">
-        <div
-            @tap="handleAddCart"
-            v-if="!is148Merchant"
-            class="bg-[#FFA319] rounded-full w-25 flex justify-center items-center h-9">
+        <div @tap="handleAddCart" v-if="!is148Merchant"
+          class="bg-[#FFA319] rounded-full w-25 flex justify-center items-center h-9">
           加入购物车
         </div>
-        <div
-            class="bg-[#F94032] rounded-full w-25 flex justify-center items-center h-9"
-        >
-          <div v-if="is148Merchant"
-               @click="handleOrderConfirm('3')"
-          >立即兑换</div>
-          <div
-              v-else
-              @click="handleOrderConfirm('1')"
-          >立即购买</div>
+        <div class="bg-[#F94032] rounded-full w-25 flex justify-center items-center h-9">
+          <div v-if="is148Merchant" @click="handleOrderConfirm('3')">立即兑换</div>
+          <div v-else @click="handleOrderConfirm('1')">立即购买</div>
         </div>
       </div>
     </div>
@@ -773,73 +776,97 @@ onPageScroll((page) => {
 
   </div>
 
-  <CXBSkuPopup
-      v-model:show="state.isShowSku"
-      :detail="detail"
-      @selected:item="onSelectedSku"
-      @submit="handleCreateShopping"
-      @count-change="handleCountChange"
-  />
-<!--  <nut-sku-->
-<!--      v-model:visible="state.isShowSku"-->
-<!--      :goods="state.goods"-->
-<!--      @selectSku="selectSku"-->
-<!--  >-->
-<!--    &lt;!&ndash; 商品展示区，价格区域 &ndash;&gt;-->
-<!--    <template #sku-header-price>-->
-<!--      <div>-->
-<!--        <nut-price :price="goods.price" :needSymbol="true" :thousands="false"> </nut-price>-->
-<!--        <span class="tag"></span>-->
-<!--      </div>-->
-<!--    </template>-->
-<!--  </nut-sku>-->
+  <CXBSkuPopup v-model:show="state.isShowSku" :detail="detail" @selected:item="onSelectedSku"
+    @submit="handleCreateShopping" @count-change="handleCountChange" />
+  <!--  <nut-sku-->
+  <!--      v-model:visible="state.isShowSku"-->
+  <!--      :goods="state.goods"-->
+  <!--      @selectSku="selectSku"-->
+  <!--  >-->
+  <!--    &lt;!&ndash; 商品展示区，价格区域 &ndash;&gt;-->
+  <!--    <template #sku-header-price>-->
+  <!--      <div>-->
+  <!--        <nut-price :price="goods.price" :needSymbol="true" :thousands="false"> </nut-price>-->
+  <!--        <span class="tag"></span>-->
+  <!--      </div>-->
+  <!--    </template>-->
+  <!--  </nut-sku>-->
 
 
   <nut-overlay v-model:visible="shareShowTips" :lock-scroll="true">
-        <image src="https://cdn.bjtdba.com/vod/image/2023-09-16/20230916194347287.png"
-               mode="widthFix" class="absolute top-0 right-0"
-        ></image>
-
-<!--    <div class="flex flex-col justify-center items-center w-full h-full"-->
-<!--    >-->
-<!--      <div class="bg-white">-->
-<!--        <image :src="currentItem.image_fake" mode="widthFix" class="w-60"></image>-->
-<!--        <div class="bg-white p-3 flex justify-around gap-3">-->
-<!--          <div class="flex flex-col text-[12px] justify-center items-center" @tap.stop="shareImage">-->
-<!--            <image :src="wechatImg" mode="widthFix" class="w-8 h-8"></image>-->
-<!--            <div>微信</div>-->
-<!--          </div>-->
-<!--          <div class="flex flex-col text-[12px] justify-center items-center" @tap.stop="shareImage">-->
-<!--            <image :src="pyqImg" mode="widthFix" class="w-8 h-8"></image>-->
-<!--            <div>朋友圈</div>-->
-<!--          </div>-->
-<!--          <div class="flex flex-col text-[12px] justify-center items-center" @tap.stop="shareImage">-->
-<!--            <image :src="bctpImg" mode="widthFix" class="w-8 h-8"></image>-->
-<!--            <div>保存图片</div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </div>-->
-
-<!--    </div>-->
+    <image :lazy-load="true" src="https://cdn.bjtdba.com/vod/image/2023-09-16/20230916194347287.png" mode="widthFix"
+      class="absolute top-0 right-0"></image>
+
+    <!--    <div class="flex flex-col justify-center items-center w-full h-full"-->
+    <!--    >-->
+    <!--      <div class="bg-white">-->
+    <!--        <image :src="currentItem.image_fake" mode="widthFix" class="w-60"></image>-->
+    <!--        <div class="bg-white p-3 flex justify-around gap-3">-->
+    <!--          <div class="flex flex-col text-[12px] justify-center items-center" @tap.stop="shareImage">-->
+    <!--            <image :src="wechatImg" mode="widthFix" class="w-8 h-8"></image>-->
+    <!--            <div>微信</div>-->
+    <!--          </div>-->
+    <!--          <div class="flex flex-col text-[12px] justify-center items-center" @tap.stop="shareImage">-->
+    <!--            <image :src="pyqImg" mode="widthFix" class="w-8 h-8"></image>-->
+    <!--            <div>朋友圈</div>-->
+    <!--          </div>-->
+    <!--          <div class="flex flex-col text-[12px] justify-center items-center" @tap.stop="shareImage">-->
+    <!--            <image :src="bctpImg" mode="widthFix" class="w-8 h-8"></image>-->
+    <!--            <div>保存图片</div>-->
+    <!--          </div>-->
+    <!--        </div>-->
+    <!--      </div>-->
+
+    <!--    </div>-->
   </nut-overlay>
 </template>
 <style>
 page {
   background-color: #f8f8f8;
 }
- button {
-   margin: 0;
-   padding: 0;
-   outline: none;
-   border-radius: 0;
-   background-color: transparent;
-   line-height: inherit;
- }
+
+button {
+  margin: 0;
+  padding: 0;
+  outline: none;
+  border-radius: 0;
+  background-color: transparent;
+  line-height: inherit;
+}
 
 button::after {
   border: none;
 }
 
+.box-out {
+  background: #f8f8f8;
+  height: 200px;
+}
+
+.flex-box {
+  background: #ffffff;
+  box-shadow: 3px;
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
+
+.img-div {
+  width: 100%;
+
+}
+
+.sold-out {
+  display: block;
+  width: 120px;
+  height: 120px;
+  margin: 0 auto;
+}
+
+.out-conter {
+  text-align: center;
+}
 </style>
 <route lang="yaml">
 style:

src/pages/store/product/other.vue

@@ -9,27 +9,37 @@ import {
   getVipProductDetail
 } from "~/apis/product";
 import CXBBasePage from "~/components/CXBBasePage/CXBBasePage.vue";
+import MerchantProductCard from "~/pages/store/home/components/MerchantProductCard.vue";
 import type {
+  DyProductModel,
   IProductDetail,
   JdProductDetailModel,
+  JdProductModel,
+  SuNingProductModel,
   TaobaoProductThirdPartyWaresModel,
-  TaobaoWaresDetail
+  TaobaoWaresDetail,
+  VipProductModel
 } from "~/apis/model/product.model";
 import FPrice from "~/components/FPrice/FPrice.vue";
 import FButton from "~/components/FButton/FButton.vue";
 import CXBButton from "~/components/CXBButton/CXBButton.vue";
 import CXBBackTop from "~/components/CXBBackTop/CXBBackTop.vue";
-import {debounce, merge} from "lodash-es";
+import { debounce, merge } from "lodash-es";
 
-import {useDebounceFn} from '@vueuse/core';
+import { useDebounceFn } from '@vueuse/core';
 
 import dayjs from "dayjs";
-import {decodeBase64} from "~/utils/http/helper";
-import {CDN_URL} from "~/config/app";
+import { decodeBase64 } from "~/utils/http/helper";
+import { CDN_URL } from "~/config/app";
+import { getRecommendList } from "~/apis/merchant";
+import type { DcProductModel } from "~/apis/model/dacang.model";
 
 const discount_coupon_bg_220804Image = CDN_URL + '/static/assets/discount_coupon_bg_220804.png'
 const productId = ref('')
-//
+//推荐商品列表
+let skuInfo = reactive({
+  recommendList: []
+})
 
 const userStore = useUserStore()
 const isSubmit = ref(false)
@@ -55,149 +65,238 @@ const state = reactive({
   data: {},
   shareId: ''
 })
+const isShow = ref(false)
 const detail = ref<IProductDetail>()
+const detailclone = ref<IProductDetail>()
 onLoad((options: any) => {
 
   const data: Partial<IProductDetail> = JSON.parse(decodeBase64(options.params))
-  // console.log(data)
-  mergeProductDetail(data)
+  console.log('我是options数据', data)
+
   // if (options.platform && options.id) {
   uni.showLoading({
     title: '数据加载中',
     icon: 'none'
   })
+  mergeProductDetail(data)
   loadProductDetail(data)
   // }
 })
+
 onShow(() => {
   isSubmit.value = false
 })
 
+//猜你喜欢
+function YouLike() {
+  getRecommendList({
+    page: 1,
+    limit: 10
+  }).then(res => {
+    skuInfo.recommendList = res.list
+    console.log(skuInfo.recommendList);
 
+  })
+}
 
 function mergeProductDetail(data: Partial<IProductDetail> = {}) {
-  detail.value = merge(detail.value, data)
+  detailclone.value = merge(detailclone.value, data)
+
+}
+function mergeProductDetailclone(data: Partial<IProductDetail> = {}) {
+  detail.value = merge(detailclone.value, data)
+  console.log(detail.value);
+
 }
 
 function loadProductDetail(product: Partial<IProductDetail>) {
-  // console.log('产品id')
-  // console.log(product.id)
+  // console.log('产品id')  // console.log(product.id)
+
   // 京东
   if (product.platform == 6) {
     getJdProductDetail(product.id).then(res => {
-      const jdProduct = res[0]
-      // console.log(jdProduct)
-      mergeProductDetail({
-        images: jdProduct.detail,
-        coupon: {
-          amount: jdProduct.couMoney
-        },
-        ...jdProduct
-      })
+      console.log(res);
+      let { data, status } = res
+      if (status === 200) {
+        const jdProduct = data[0]
+        // console.log(jdProduct)
+        mergeProductDetailclone({
+          images: jdProduct.detail,
+          coupon: {
+            amount: jdProduct.couMoney
+          },
+          ...jdProduct
+        })
 
-      uni.hideLoading()
+        uni.hideLoading()
+      } else {
+        isShow.value = true
+        uni.setNavigationBarTitle({
+          title: '商品下架不存在'
+        })
+        YouLike()
+        uni.hideLoading()
+      }
     })
   }
-  // 淘宝
+  // 淘宝 *
   if (product.platform === 5) {
     getTaobaoProductDetail(product.id).then(res => {
-      const product = res.waresDetail
-      mergeProductDetail({
-        images: product.small_images,
-        coupon: {
-          startTime: product.couponStartTime,
-          endTime: product.couponEndTime
-        },
-        ...product
-      })
-      uni.hideLoading()
+      // console.log('taobao>>>',res);
+      let { status, data } = res
+      if (status === 200) {
+        const product = data.waresDetail
+        mergeProductDetailclone({
+          images: product.small_images,
+          coupon: {
+            startTime: product.couponStartTime,
+            endTime: product.couponEndTime
+          },
+          ...product
+        })
+        uni.hideLoading()
+      } else {
+
+        isShow.value = true
+        uni.setNavigationBarTitle({
+          title: '商品下架不存在'
+        })
+        YouLike()
+        uni.hideLoading()
+      }
+
 
     })
   }
 
-  // 拼多多
+  // 拼多多 *
   if (product.platform == 1) {
     getPddProductDetail(product.id).then(res => {
+      // console.log(res);
+      let { status, data } = res
       // detail.value = res
-      mergeProductDetail({
-        spreadUrl: res.pddlink.url,
-        images: res.goods_gallery_urls,
-        featured: res.goods_gallery_urls,
-        mallName: res.mall_name,
-        ...res
-        // allowance:
-      })
-
-      if (res.coupon_start_time > 0) {
-        mergeProductDetail({
-          coupon: {
-            // amount: (res.extra_coupon_amount / 100).toString(),
-            startTime: dayjs.unix(res.coupon_start_time).format('YYYY-MM-DD'),
-            endTime: dayjs.unix(res.coupon_end_time).format('YYYY-MM-DD')
-          },
+      if (status !== 200) {
+        isShow.value = true
+        uni.setNavigationBarTitle({
+          title: '商品下架不存在'
         })
+        YouLike()
+        uni.hideLoading()
       } else {
-        mergeProductDetail({
-          coupon: null
+        mergeProductDetailclone({
+          spreadUrl: data.pddlink.url,
+          images: data.goods_gallery_urls,
+          featured: data.goods_gallery_urls,
+          mallName: data.mall_name,
+          ...data
+          // allowance:
         })
+
+        if (data.coupon_start_time > 0) {
+          mergeProductDetailclone({
+            coupon: {
+              // amount: (res.extra_coupon_amount / 100).toString(),
+              startTime: dayjs.unix(data.coupon_start_time).format('YYYY-MM-DD'),
+              endTime: dayjs.unix(data.coupon_end_time).format('YYYY-MM-DD')
+            },
+          })
+        } else {
+          mergeProductDetailclone({
+            coupon: null
+          })
+        }
+
+        uni.hideLoading()
       }
 
-      uni.hideLoading()
 
     })
   }
 
-  // 唯品会
+  // 唯品会 *
   if (product.platform == 2) {
     getVipProductDetail(product.id).then(res => {
       // console.log(res.result[0])
-      const product = res.result[0]
-      // detail.value = product
-      mergeProductDetail({
-        featured: product.goodsCarouselPictures,
-        images: product.goodsDetailPictures,
-        mallName: '唯品自营',
-        ...product,
-        ...res
-      })
-      if (product.couponInfo) {
-        mergeProductDetail({
-          coupon: {
-            amount: product.couponInfo.activedAmount,
-            startTime: product.couponInfo.useBeginTime,
-            endTime: product.couponInfo.useEndTime
-          }
+      let { data, status } = res
+      if (status === 200) {
+        const product = data.result[0]
+        // detail.value = product
+        mergeProductDetailclone({
+          featured: product.goodsCarouselPictures,
+          images: product.goodsDetailPictures,
+          mallName: '唯品自营',
+          ...product,
+          ...res
+        })
+        if (product.couponInfo) {
+          mergeProductDetailclone({
+            coupon: {
+              amount: product.couponInfo.activedAmount,
+              startTime: product.couponInfo.useBeginTime,
+              endTime: product.couponInfo.useEndTime
+            }
+          })
+        }
+
+        uni.hideLoading()
+      } else {
+        isShow.value = true
+        uni.setNavigationBarTitle({
+          title: '商品下架不存在'
         })
+        YouLike()
+        uni.hideLoading()
       }
 
-      uni.hideLoading()
 
     })
   }
-  // 苏宁
+  // 苏宁 *
   if (product.platform == 3) {
     getSuProductDetail(product.id).then(res => {
       // const product = res
-      mergeProductDetail({
-        images: res.detail,
-        ...res
-      })
+      let { status, data } = res
+      if (status === 200) {
+        mergeProductDetailclone({
+          images: data.detail,
+          ...data
+        })
 
-      uni.hideLoading()
+        uni.hideLoading()
+
+      } else {
+        isShow.value = true
+        uni.setNavigationBarTitle({
+          title: '商品下架不存在'
+        })
+        YouLike()
+        uni.hideLoading()
+      }
 
     })
   }
-  // 抖音
+  // 抖音 *
   if (product.platform == 9) {
     getDyProductDetail(product.id).then(res => {
       console.log(res)
-      mergeProductDetail({
-        mallName: res.shopName,
-        images: res.imgs,
-        ...res
-      })
+      let { status, data } = res
+      if (status === 200) {
+        mergeProductDetailclone({
+          mallName: data.shopName,
+          images: data.imgs,
+          ...data
+        })
+
+        uni.hideLoading()
+      } else {
+        isShow.value = true
+        uni.setNavigationBarTitle({
+          title: '商品下架不存在'
+        })
+        YouLike()
+        uni.hideLoading()
+      }
 
-      uni.hideLoading()
 
     })
 
@@ -271,39 +370,39 @@ function handleBuyNow() {
       // console.log(detail.value.pddlink)
       // console.log(pddWx)
     } else {
-/*      let platformName = ''
-      let clipboardData = ''
-      if (detail.value?.platform == 5) {
-        platformName = '淘宝'
-        clipboardData = detail.value?.spreadUrl
-      }
-      if (detail.value?.platform == 9) {
-        platformName = '抖音'
-        clipboardData = detail.value?.dyZlink
-      }
-      if (detail.value?.platform == 2) {
-        platformName = '唯品会'
-        clipboardData = detail.value?.destUrl
-      }
-      if (detail.value?.platform == 3) {
-        platformName = '苏宁易购'
-        clipboardData = detail.value?.productUrlWap
-      }
-      return uni.setClipboardData({
-        data: clipboardData,
-        success(res) {
-          return uni.showToast({
-            title: `链接已复制，去【${platformName}】打开即可。`,
-            icon: 'none'
-          })
-        },
-        fail(res) {
-          return uni.showToast({
-            title: '请更新隐私协议',
-            icon: 'none'
-          })
-        }
-      })*/
+      /*      let platformName = ''
+            let clipboardData = ''
+            if (detail.value?.platform == 5) {
+              platformName = '淘宝'
+              clipboardData = detail.value?.spreadUrl
+            }
+            if (detail.value?.platform == 9) {
+              platformName = '抖音'
+              clipboardData = detail.value?.dyZlink
+            }
+            if (detail.value?.platform == 2) {
+              platformName = '唯品会'
+              clipboardData = detail.value?.destUrl
+            }
+            if (detail.value?.platform == 3) {
+              platformName = '苏宁易购'
+              clipboardData = detail.value?.productUrlWap
+            }
+            return uni.setClipboardData({
+              data: clipboardData,
+              success(res) {
+                return uni.showToast({
+                  title: `链接已复制，去【${platformName}】打开即可。`,
+                  icon: 'none'
+                })
+              },
+              fail(res) {
+                return uni.showToast({
+                  title: '请更新隐私协议',
+                  icon: 'none'
+                })
+              }
+            })*/
 
       // }
       return uni.showToast({
@@ -370,7 +469,7 @@ function handleBuyNow() {
 
     return {
       title: `${detail.value.store_name}`,
-      imageUrl:  state.shareImage,
+      imageUrl: state.shareImage,
       query: `id=${state.id}&from=share&shareID=${state.shareId}`
     }
 
@@ -385,16 +484,38 @@ const hasCoupon = computed(() => {
   return detail.value?.coupon && detail.value?.coupon.startTime
 })
 
+//跳转大仓商品详情
+function handleProductItemClick(
+  item:
+    JdProductModel
+    & DcProductModel
+    & DyProductModel
+    & SuNingProductModel
+    & TaobaoProductThirdPartyWaresModel
+    & VipProductModel
+) {
+  // function navigateToDetail(params) {
+  //   let otherDetailUrl = `/pages/store/product/other`
+  //   return uni.navigateTo({
+  //     url: `${otherDetailUrl}?params=${params}`
+  //   })
+  // }
+  // 大仓
+  uni.navigateTo({
+    url: `/pages/store/product/detail?id=${item.product_id}`
+  })
+}
+
 // 距离顶部距离
 let Scroll_X = ref(0)
 
 const headerClass = ref('')
 onPageScroll((page) => {
   // console.log('滚轮事件触发了',page.scrollTop.toFixed());
-  
+
   // console.log(page.scrollTop.toFixed(),'距离顶部的距离')
   Scroll_X.value = Number(page.scrollTop.toFixed())
-  if (page.scrollTop >= 76 ) {
+  if (page.scrollTop >= 76) {
     headerClass.value = 'bg-white !text-gray-900'
   } else {
     headerClass.value = ''
@@ -404,53 +525,29 @@ onPageScroll((page) => {
 <template>
   <CXBBasePage>
     <div class="relative w-screen " v-if="detail">
-      <swiper
-          v-if="detail.featured"
-          :indicator-dots="false"
-          :circular="true"
-          :autoplay="true"
-          :interval="5000"
-          :duration="500"
-          class="h-95"
-      >
-        <swiper-item
-            v-for="(item, index) in detail.featured"
-            :key="index"
-        >
-          <image
-              :key="index"
-              :src="item"
-              mode="aspectFill" class="h-full w-full"
-          />
+      <swiper v-if="detail.featured" :indicator-dots="false" :circular="true" :autoplay="true" :interval="5000"
+        :duration="500" class="h-95">
+        <swiper-item v-for="(item, index) in detail.featured" :key="index">
+          <image :key="index" :src="item" mode="aspectFill" class="h-full w-full" />
         </swiper-item>
       </swiper>
-      <CXBBackTop :Scroll_X="Scroll_X"/>
+      <CXBBackTop :Scroll_X="Scroll_X" />
       <div>
         <div class="relative p-3 bg-white">
           <div class="flex gap-2 items-end">
             <FPrice v-if="detail && detail.salePrice" :price="detail.salePrice" need-symbol :size="'large'"
-                    ex-class="!text-[24px]"/>
+              ex-class="!text-[24px]" />
             <FPrice v-if="detail && detail.price" :price="detail.price" :ex-class="'!text-gray'" need-symbol
-                    strike-through/>
+              strike-through />
           </div>
 
           <div class="font-bold py-2">{{ detail.title }}</div>
         </div>
 
-        <div class="relative"
-             v-if="hasCoupon"
-
-        >
-          <div
-              class="px-3 relative"
-              @tap="handleBuyNow"
-          >
-            <image :src="discount_coupon_bg_220804Image"
-                   mode="widthFix"
-                   class="w-full"
-            ></image>
-            <div class="absolute top-2 left-15 h-full w-fit text-white"
-            >
+        <div class="relative" v-if="hasCoupon">
+          <div class="px-3 relative" @tap="handleBuyNow">
+            <image lazy-load :src="discount_coupon_bg_220804Image" mode="widthFix" class="w-full"></image>
+            <div class="absolute top-2 left-15 h-full w-fit text-white">
               <div class=" inline-flex justify-center items-end w-full py-2">
                 <div class="text-[28px]">{{ detail.coupon.amount }}</div>
                 元代金劵
@@ -466,12 +563,8 @@ onPageScroll((page) => {
             {{ detail.mallName }}
           </div>
           <!--          <mpHtml :content=""></mpHtml>-->
-          <image v-for="(imgItem, index) in detail.images"
-                 :key="index"
-                 mode="widthFix"
-                 :src="imgItem"
-                 class="w-full h-full"
-          ></image>
+          <image v-for="(imgItem, index) in detail.images" :key="index" mode="widthFix" :src="imgItem"
+            class="w-full h-full"></image>
         </div>
       </div>
       <div class="fixed bottom-0  w-full h-15 shadow">
@@ -479,7 +572,7 @@ onPageScroll((page) => {
           <div class="flex justify-between items-center p-3">
             <div class="inline-flex items-center">
               <div class="text-sm">预估养老金</div>
-              <FPrice :price="detail.yanglao || detail.commission" need-symbol ex-class="text-[20px] font-bold"/>
+              <FPrice :price="detail.yanglao || detail.commission" need-symbol ex-class="text-[20px] font-bold" />
             </div>
             <div>
               <nut-button type="primary" @tap="handleBuyNow" :disabled="isSubmit">
@@ -490,10 +583,73 @@ onPageScroll((page) => {
         </div>
       </div>
     </div>
+    <div class="relative w-screen " v-if="isShow">
+      <CXBBackTop :Scroll_X="Scroll_X" />
+      <div class="box-out">
+        <div class="flex-box pb-3 px-3 ">
+          <div class="img-div">
+            <image lazy-load src="../../../static/icon/商品下架不存在@3x.png" mode="widthFix" class=" top-0 right-0 sold-out ">
+            </image>
+          </div>
+          <div class="out-conter">该商品下架不存在</div>
+        </div>
+
+      </div>
+      <div class="flex flex-col pb-safe gap-3">
+        <div class="p-3 bg-white">
+          <div
+            class="before:content-[''] before:block before:absolute before:w-1 before:h-full before:bg-gradient-to-b from-red-500 to-red-600 before:rounded relative inline-block">
+            <div class="pl-2">
+              猜你喜欢
+            </div>
+          </div>
+        </div>
+        <div class="pb-3 px-3" v-if="skuInfo.recommendList.length != 0">
+          <grid-view type="masonry" cross-axis-count="2" cross-axis-gap="10px" main-axis-gap="10px">
+            <div v-for="(item, index) in skuInfo.recommendList" :key="index" @click="handleProductItemClick(item)">
+              <MerchantProductCard :item="item" />
 
+            </div>
+          </grid-view>
+        </div>
+
+      </div>
+    </div>
   </CXBBasePage>
+
+  <!-- 下架 -->
 </template>
+<style scoped>
+.box-out {
+  background: #f8f8f8;
+  height: 200px;
+}
+
+.flex-box {
+  background: #ffffff;
+  box-shadow: 3px;
+  height: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+}
 
+.img-div {
+  width: 100%;
+
+}
+
+.sold-out {
+  display: block;
+  width: 120px;
+  height: 120px;
+  margin: 0 auto;
+}
+
+.out-conter {
+  text-align: center;
+}
+</style>
 <route lang="yaml">
 style:
   navigationBarTitleText: 商品详情

src/utils/http/detailhttp.ts

@@ -0,0 +1,111 @@
+import { cloneDeep } from 'lodash-es'
+import { joinTimestamp } from './helper'
+import { checkStatus } from './checkStatus'
+import type { RequestOptions, Result } from './types'
+import { isString } from '~/utils/is'
+import { getToken } from '~/utils/auth'
+import { RequestEnum, ResultEnum } from '~/enums/httpEnum'
+import { setObjToUrlParams } from '~/utils'
+
+// const { showNotify } = usePageStoreWidthOut()
+
+type UniRequestOptions = UniApp.RequestOptions & { params?: any }
+
+export interface CreateRequestOptions extends UniRequestOptions {
+    authenticationScheme?: string
+    authenticationHeader: string
+    urlPrefix?: string
+    requestOptions?: RequestOptions
+}
+
+export class vRequest {
+    private readonly options: CreateRequestOptions
+
+    constructor(options: CreateRequestOptions) {
+        this.options = options
+    }
+
+    request<T = any>(config: UniRequestOptions, options?: RequestOptions): Promise<T> {
+        const configTemp: CreateRequestOptions = cloneDeep(Object.assign({}, this.options, config))
+        const optionsTemp: RequestOptions = Object.assign({}, this.options.requestOptions, options)
+
+        const {
+            urlPrefix, apiUrl, joinPrefix, joinTime = true, withToken, joinParamsToUrl,
+            isReturnNativeResponse, isTransformResponse,
+        } = optionsTemp
+
+        // token header
+        const token = getToken()
+        if (token && withToken !== false) {
+            // jwt token
+            Object.assign(configTemp.header, {
+                [configTemp.authenticationHeader]: configTemp.authenticationScheme
+                    ? `${configTemp.authenticationScheme} ${token}`
+                    : token,
+            })
+        }
+
+        // add prefix
+        if (joinPrefix)
+            configTemp.url = `${urlPrefix}${configTemp.url}`
+
+        const params = configTemp.params || {}
+        if (params) {
+            if (configTemp.method?.toUpperCase() === RequestEnum.GET) {
+                // add timestamp avoid cache
+                if (!isString(params)) {
+                    configTemp.params = Object.assign(params || {}, joinTimestamp(joinTime, false))
+                    if (joinParamsToUrl && configTemp.params) {
+                        configTemp.url = setObjToUrlParams(
+                            configTemp.url,
+                            Object.assign({}, configTemp.params, configTemp.data))
+                        configTemp.params = undefined
+                    }
+                }
+                else {
+                    // compatible with restful style
+                    configTemp.url = `${config.url + params}${joinTimestamp(joinTime, true)}`
+                    configTemp.params = undefined
+                }
+            }
+        }
+
+        if (apiUrl && isString(apiUrl))
+            configTemp.url = `${apiUrl}${configTemp.url}`
+
+        return new Promise((resolve, reject) => {
+            uni.request({
+                url: configTemp.url,
+                data: configTemp.data || {},
+                method: configTemp.method?.toUpperCase() as UniApp.RequestOptions['method'],
+                header: configTemp.header || {},
+                success: (res) => {
+                    // console.log('我是商品res啊', res);
+
+                    resolve(res.data as any)
+
+                },
+                fail: (e) => {
+                    reject(e.errMsg)
+                },
+                complete() { },
+            })
+        })
+    }
+
+    post<T = any>(config: UniRequestOptions, options?: RequestOptions): Promise<T> {
+        return this.request({ ...config, method: 'POST' }, options)
+    }
+
+    get<T = any>(config: UniRequestOptions, options?: RequestOptions): Promise<T> {
+        return this.request({ ...config, method: 'GET' }, options)
+    }
+
+    put<T = any>(config: UniRequestOptions, options?: RequestOptions): Promise<T> {
+        return this.request({ ...config, method: 'PUT' }, options)
+    }
+
+    delete<T = any>(config: UniRequestOptions, options?: RequestOptions): Promise<T> {
+        return this.request({ ...config, method: 'DELETE' }, options)
+    }
+}

src/utils/http/http.ts

@@ -80,6 +80,8 @@ export class VRequest {
                 method: configTemp.method?.toUpperCase() as UniApp.RequestOptions['method'],
                 header: configTemp.header || {},
                 success: (res) => {
+                    // console.log('我是res数据',res);
+                    
                     const data = res.data as Result
                     const _message: string = data?.message ?? ''
                     if (res.statusCode && res.statusCode !== 200) {

src/utils/http/index.ts

@@ -1,4 +1,5 @@
 import { VRequest } from './http'
+import { vRequest } from './detailhttp'
 import { deepMerge } from '~/utils'
 import { ContentTypeEnum } from '~/enums/httpEnum'
 
@@ -41,6 +42,45 @@ function createRequest(options?: any) {
 
 export const defHttp = createRequest()
 
+
+//商品下架
+function onRequest(options?: any) {
+    return new vRequest(deepMerge(
+        {
+            url: '',
+            timeout: 5 * 1000,
+            authenticationScheme: 'Bearer',
+            authenticationHeader: 'X-Token',
+            // authenticationHeader: 'Authorization',
+            // authenticationScheme: '',
+
+            header: { 'Content-Type': ContentTypeEnum.JSON },
+            // 配置项，下面的选项都可以在独立的接口请求中覆盖
+            requestOptions: {
+                urlPrefix: '',
+                joinPrefix: false,
+                // 接口地址
+                apiUrl,
+                // 消息提示类型
+                errorMessageMode: 'message',
+                // 请求参数拼接到url
+                joinParamsToUrl: true,
+                //  是否加入时间戳
+                joinTime: true,
+                // 请求头是否携带token
+                withToken: true,
+                // 是否返回原生响应头 比如：需要获取响应头时使用该属性
+                isReturnNativeResponse: false,
+                // 需要对返回数据进行处理
+                isTransformResponse: true,
+            },
+        },
+        options || {},
+    ))
+}
+
+export const detailHttp = onRequest()
+
 // other api url
 // export const otherHttp = createRequest({
 //   requestOptions: {