商品详情

src/addon/shop/api/goods.ts

@@ -31,8 +31,8 @@ export function getGoodsPages(params: Record<string, any>) {
 /**
  * 获取商品详情
  */
-export function getGoodsDetail(params: Record<string, any>) {
-    return request.get(`shop/goods/detail`, params)
+export function getGoodsDetail(productNo: any) {
+    return request.get(`product/miniProduct/getProductDetail/${productNo}`)
 }
 
 /**

src/addon/shop/components/diy/shop-goods-detail-attr/index.vue

@@ -1,17 +1,50 @@
 <template>
-    <view :style="warpCss" class="overflow-hidden">
-        <view class="goods-sku card-template" v-if="diyComponent.goods && diyComponent.goods.attr_format && Object.keys(diyComponent.goods.attr_format).length">
-            <view class="title mb-[30rpx]">商品属性</view>
-            <view>
-                <template v-for="(item,index) in diyComponent.goods.attr_format" :key="index">
-                    <view v-if="index < 4 || isAttrFormatShow" class="card-template-item">
-                        <text class="text-[26rpx] leading-[30rpx] w-[160rpx] font-400 shrink-0 text-[var(--text-color-light9)]">{{ item.attr_value_name }}</text>
-                        <view class="text-[#333] box-border value-wid text-[26rpx] leading-[30rpx] font-400 pl-[20rpx]">{{ Array.isArray(item.attr_child_value_name) ? item.attr_child_value_name.join(',') : item.attr_child_value_name }}</view>
-                    </view>
-                </template>
-                <view v-if="diyComponent.goods.attr_format.length > 4" class="flex-center" @click="isAttrFormatShow = !isAttrFormatShow">
-                    <text class="text-[24rpx] mr-[10rpx]">{{ !isAttrFormatShow ? '展开' : '收起' }}</text>
-                    <text class="nc-iconfont !text-[22rpx]" :class="{'nc-icon-xiaV6xx': !isAttrFormatShow, 'nc-icon-shangV6xx-1': isAttrFormatShow}"></text>
+    <view :style="warpCss" class="overflow-hidden"
+        v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
+        <view class="card-template overflow-hidden">
+            <view class="title">售后服务说明</view>
+            <view v-if="diyStore.mode == 'decorate'">
+                <view class="u-content">
+                    <view class="service1">原厂正品保证承诺：</view>
+                    <view>(1)...</view>
+                </view>
+            </view>
+            <view class="u-content" v-else>
+                <view class="service1">原厂正品保证承诺：</view>
+                <view>(1)所有商品均为符合国家有关商品质量的技术标准、服务标准、环保标准的原厂正品。</view>
+                <view>(2)所有商品保证是全新的货物，且来源于中华人民共和国或与中华人民共和国有正常贸易往来的国家或地区。</view>
+                <view>(3)所有商品均为自营，不涉及任何第三方店铺，充分保证产品来源，保证质量。</view>
+                <view>(4)所有商品均为原厂正品，如有假货，假一罚十。</view>
+                <view>(5)所有产品均严格按照国家三包标准执行。</view>
+                <view>(6)保证所售商品开具机打发票或电子发票。</view>
+                <view class="service1">厂家服务：</view>
+                <view>
+                    本商品质保周期均为厂商对外公布的质保期或优易365对客户承诺的质保期为准。在此时间范围内可提交维修申请，具体请以厂家服务为准。
+                    如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！
+                </view>
+                <view>全国统一售后及服务电话：400-111-0027</view>
+                <view>(注:如优易365在商品介绍中有售后保障的说明,则此商品按照说明执行售后保障服务。)</view>
+                <view class="service1">服务承诺：</view>
+                <view>平台销售并发货的商品，均由平台提供发票和相应的售后服务。请您放心购买！</view>
+                <view>优易365确保客户收到的货物与商城图片、产地、附件说明完全一致。均为原厂正货！并且保证与当时市场上同样主流新品一致。</view>
+                <view class="service1">无忧退货：</view>
+                <view>
+                    客户购买商品7日内（含7日，自客户收到商品之日起计算），在保证商品完好的前提下，可无理由退货。（部分商品除外，详情请见各商品细则）
+                </view>
+                <view>• 购买运费如何收取？</view>
+                <view class="service2">
+                    单笔订单金额(不含运费)满88元免邮费；不满88元，每单收取10元运费。（港澳台地区需满500元免邮费；不满500元，每单收取30元运费)
+                </view>
+                <view>• 使用什么快递发货?</view>
+                <view class="service2">默认使用顺丰快递发货(个别商品使用其他快递）</view>
+                <view class="service2">配送范围覆盖全国大部分地区(港澳台地区除外）。</view>
+                <view>• 如何申请退货?</view>
+                <view class="service2">1.自收到商品之日起30日内，顾客可申请无忧退货，退款将原路返还，不同的银行处理时间不同，预计1-5个工作日到账；</view>
+                <view class="service2">2.内裤和食品等特殊商品无质量问题不支持退货；</view>
+                <view>3.退货流程：</view>
+                <view class="service2">确认收货-申请退货-客服审核通过-用户寄回商品-仓库签收验货-退款审核-退款完成；</view>
+                <view>
+                    4.因优品汇产生的退货，如质量问题，退货邮费由优品汇承担，退款完成后会以现金券的形式报销。因客户个人原因产生的退货，购买和寄回运费由客户个人承担。
                 </view>
             </view>
         </view>
@@ -19,31 +52,22 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick } from 'vue';
+import { computed, watch, onMounted, nextTick } from 'vue';
 import { img } from '@/utils/common';
 import useDiyStore from '@/app/stores/diy';
 import useGoodsDetailStore from '@/addon/shop/stores/goodsDetail'
 
 const props = defineProps(['component', 'index', 'value']);
 const diyStore = useDiyStore();
-const emits = defineEmits(['update:componentIsShow']);
-
+const emits = defineEmits(['update:componentIsShow']); //商品数据加载完成之后触发
 const diyComponent = computed(() => {
     if (diyStore.mode == 'decorate') {
         const obj = {
             goods: {
-                attr_format: [
-                    {
-                       attr_value_name: '颜色',
-                        attr_child_value_name: '红色,蓝色,灰色'
-                    },{
-                        attr_value_name: '尺寸',
-                        attr_child_value_name: '大,中,小'
-                    }
-                ]
+                goods_desc: '这里展示商品详情内容'
             }
         }
-        return Object.assign({},obj,diyStore.value[props.index]);
+        return Object.assign({}, obj, diyStore.value[props.index]);
     } else {
         return Object.assign({}, props.component, useGoodsDetailStore().goodsDetail);
     }
@@ -52,11 +76,11 @@ const diyComponent = computed(() => {
 const warpCss = computed(() => {
     let style = '';
     style += 'position:relative;';
-    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${ diyComponent.value.componentGradientAngle },${ diyComponent.value.componentStartBgColor },${ diyComponent.value.componentEndBgColor });`;
+    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
     else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
 
     if (diyComponent.value.componentBgUrl) {
-        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
+        style += `background-image:url('${img(diyComponent.value.componentBgUrl)}');`;
         style += 'background-size: cover;background-repeat: no-repeat;';
     }
 
@@ -67,16 +91,14 @@ const warpCss = computed(() => {
     return style;
 })
 
-const isAttrFormatShow = ref(false); //控制属性是否展开
-
 onMounted(() => {
     // 装修模式下刷新
     if (diyStore.mode == 'decorate') {
         watch(
             () => diyComponent.value,
             (newValue, oldValue) => {
-                if (newValue && newValue.componentName == 'ShopGoodsDetailAttr') {
-                    nextTick(() => {})
+                if (newValue && newValue.componentName == 'ShopGoodsDetailDesc') {
+                    nextTick(() => { })
                 }
             }
         )
@@ -84,14 +106,12 @@ onMounted(() => {
         watch(
             () => diyComponent.value,
             (newValue, oldValue) => {
-                if (newValue && newValue.componentName == 'ShopGoodsDetailAttr') {
-                    nextTick(() => {
-                        if (diyComponent.value.goods && Object.keys(diyComponent.value.goods).length && diyComponent.value.goods.attr_format && Object.keys(diyComponent.value.goods.attr_format).length && diyComponent.value.isShow) {
-                            emits('update:componentIsShow', true)
-                        }else{
-                            emits('update:componentIsShow', false)
-                        }
-                    })
+                if (newValue && newValue.componentName == 'ShopGoodsDetailDesc') {
+                    if (!diyComponent.value.isShow) {
+                        emits('update:componentIsShow', false)
+                    } else {
+                        emits('update:componentIsShow', true)
+                    }
                 }
             },
             { immediate: true }
@@ -100,11 +120,30 @@ onMounted(() => {
 });
 </script>
 <style lang="scss" scoped>
-.card-template{
+.card-template {
     background-color: transparent !important;
     border-radius: 0 !important;
-}
-.goods-sku .value-wid {
-    width: calc(100% - 160rpx);
+    padding: 30rpx 0 0;
+
+    .title {
+        padding: 0 24rpx;
+    }
+
+    .u-content {
+        padding: 0 24rpx;
+
+        view {
+            margin-bottom: 10rpx;
+            font-size: 28rpx;
+        }
+
+        .service1 {
+            font-weight: 600;
+        }
+
+        .service2 {
+            color: #999999;
+        }
+    }
 }
 </style>

src/addon/shop/components/diy/shop-goods-detail-basic-info/index.vue

@@ -1,692 +1,576 @@
 <template>
-    <view :style="warpCss" class="overflow-hidden relative" v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
-        <!-- 自定义头部 -->
-        <view class="flex items-center left-0 right-0 z-10 bg-transparent detail-head" :class="{'!bg-[#fff]' :detailHeadBgChange, 'fixed': diyStore.mode != 'decorate', 'absolute': diyStore.mode == 'decorate'}" :style="navbarInnerStyle">
-            <view class="flex-center h-[60rpx] rounded-[30rpx] box-border arrow-left px-[40rpx] leading-[1]" :style="navbarInnerArrowStyle">
-                <text class="nc-iconfont nc-icon-zuoV6xx text-[18px]" @click="backToPrevious()"></text>
-                <text class="w-[2rpx] h-[26rpx] bg-[#999] mx-[14rpx]"></text>
-                <text class="nc-iconfont nc-icon-liebiao-xiV6xx1 text-[16px]" @click="topNav = true"></text>
-            </view>
-            <view class="ml-auto !pt-[12rpx] !pb-[8rpx] p-[10rpx] arrow-left rounded-full box-border nc-iconfont nc-icon-fenxiangV6xx font-bold text-[#303133] text-[36rpx]"
-                :class="{'border-[#d8d8d8]': detailHeadBgChange}" @click="openShareFn"></view>
-        </view>
-        <view class="fixed top-0 left-0 right-0 bottom-0 z-100 bg-transparent" @click="topNav = false" v-if="topNav">
-            <view class="search-box w-[202rpx] bg-[#fff] rounded-[12rpx] relative" :style="fixedInnerStyle">
-                <view class="px-[20rpx] flex-center" @click="redirect(item.url)" v-for="(item,index) in menuContents" :key="index">
-                    <text class="text-[30rpx] mr-[10rpx]" :class="item.iconfont"></text>
-                    <text class="pl-[14rpx] py-[20rpx] flex-1 text-[24rpx] text-[#333] border-0 border-[#ddd] border-b-[1rpx] border-solid">{{ item.name }}</text>
-                </view>
-            </view>
-        </view>
-
-        <view class="w-full relative overflow-hidden" :style="mediumCss">
-            <view class="absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
-                :class="{'translate-x-0':switchMedia === 'img','translate-x-full':switchMedia != 'img'}">
-                <view class="swiper-box">
-                    <u-swiper :list="diyComponent.goods.goods_image"
-                                @change="swiperChangeFn"
-                                :indicator="(diyComponent.goods.goods_image.length != 1 || diyStore.mode == 'decorate') && diyComponent.medium.indicator"
-                                :indicatorStyle="{'bottom': '70rpx'}" :autoplay="switchMedia === 'img'?true:false"
-                                :height="swiperImageHeight" radius="0" @click="swiperClick"></u-swiper>
-                </view>
-            </view>
-            <view @touchmove.stop.prevent class="media-mode absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform"
-                :class="{'translate-x-0':switchMedia === 'video','-translate-x-full':switchMedia != 'video'}" :style="{background: 'url(' + img(diyComponent.goods.goods_cover_thumb_mid) + ') left bottom / cover no-repeat'}">
-                <view :style="goodsVideoHeight">
-                    <video id="goodsVideo" class="w-full h-full" :src="img(diyComponent.goods.goods_video)" :poster="img(diyComponent.goods.goods_cover_thumb_mid)" objectFit="cover" play-btn-position="center"></video>
-                </view>
-            </view>
-            <!-- 切换视频、图片 -->
-            <view class="media-mode bg-[rgb(0,0,0,.5)] flex items-center rounded-[50rpx] p-[4rpx] absolute bottom-[130rpx] right-[20rpx] text-center leading-[46rpx]" v-if="diyComponent.goods.goods_video != ''">
-                <text class="tab-item" :class="{ '!bg-[#fff] !text-[#666]': switchMedia == 'video' }" @click="switchMedia = 'video'">视频</text>
-                <view class="tab-item flex items-center" :class="{ '!bg-[#fff] !text-[#666]': switchMedia == 'img' }" @click="(switchMedia = 'img'), videoContext.pause()">
-                    <text class="mr-[4rpx]">图片</text>
-                    <text v-if="switchMedia == 'img' && diyComponent?.goods?.goods_image?.length > 1">{{swiperCurrentIndex}}/{{diyComponent.goods.goods_image.length}}</text>
-                </view>
-            </view>
-        </view>
-        <view v-if="priceType != 'original_price'"
-      class="relative flex items-center justify-between !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]"
-      :style="marketGoodCss">
-            <view class="text-[#fff] leading-[normal]">
-                <text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]" v-if="priceType == 'newcomer_price'">新人价</text>
-                <text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]" v-else-if="priceType == 'discount_price'">折扣价</text>
-                <text class="text-[26rpx] mr-[10rpx] font-500 leading-[36rpx]" v-else-if="priceType == 'member_price'">会员价</text>
-                <view class="inline-block mr-[14rpx] relative top-[2rpx]">
-                    <text class="text-[32rpx] price-font mr-[4rpx]">￥</text>
-                    <text class="text-[48rpx] -mb-[4rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
-                    <text class="text-[32rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
-                </view>
-                <view class="inline-block" v-if="priceType">
-                       <!--  #ifdef H5 -->
-                    <text class="text-[26rpx] leading-[36rpx] mr-[6rpx] relative -top-[1rpx]" v-if="diyComponent.price">售价</text>
-                       <!--  #endif -->
-                     <!--  #ifndef  H5 -->
-                     <text class="text-[26rpx] leading-[36rpx] mr-[6rpx]" v-if="diyComponent.price">售价</text>
-                        <!--  #endif -->
-                    <text class="text-[30rpx] relative top-[1rpx] price-font leading-[36rpx]">￥{{ diyComponent.price }}</text>
-                </view>
-            </view>
-            <view v-if="priceType == 'discount_price'" class="flex flex-col text-[#fff] items-end h-[59rpx] justify-between">
-                <image class="h-[28rpx] w-[auto] mr-[2rpx]" :src="img('addon/shop/detail/discount_price.png')" mode="heightFix" />
-                <view class="flex items-center text-[24rpx] -mb-[10rpx] overflow-hidden h-[28rpx]">
-                    <text class="mr-[4rpx] whitespace-nowrap">距结束</text>
-                    <up-count-down class="text-[#fff] text-[28rpx]" :time="discountTime" format="DD:HH:mm:ss" @change="onChange">
-                        <view class="flex">
-                            <view class="text-[24rpx] flex items-center" v-if="timeData.days>0">
-                                <text>{{ timeData.days }}</text>
-                                <text class="ml-[4rpx] text-[20rpx]">天</text>
-                            </view>
-                            <view class="text-[24rpx] flex items-center">
-                                <text class="min-w-[30rpx] text-center" v-if="timeData.hours">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</text>
-                                <text class="min-w-[30rpx] text-center" v-else>00</text>
-                                <text class="text-[20rpx]">时</text>
-                            </view>
-                            <view class="text-[24rpx] flex items-center">
-                                <text class="min-w-[30rpx] text-center">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</text>
-                                <text class="text-[20rpx]">分</text>
-                            </view>
-                            <view class="text-[24rpx] flex items-center">
-                                <text class="min-w-[30rpx] text-center">{{ timeData.seconds < 10 ? '0' + timeData.seconds : timeData.seconds }}</text>
-                                <text class="text-[20rpx]">秒</text>
-                            </view>
-                        </view>
-                    </up-count-down>
-                </view>
-            </view>
-        </view>
-        <view class="overflow-hidden -mt-[34rpx] relative" :style="ordinaryGoodCss">
-            <view class="detail-title relative px-[30rpx]"
-                    :class="{'pt-[40rpx]': priceType != 'original_price','pt-[30rpx]': priceType == 'original_price'}">
-                <view class="text-[var(--price-text-color)] flex items-baseline mb-[12rpx]" v-if="priceType == 'original_price'">
-                    <view class="inline-block goods-price-time">
-                        <text class="price-font text-[32rpx]">￥</text>
-                        <text class="price-font text-[48rpx]">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
-                        <text class="price-font text-[32rpx] mr-[10rpx]">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
+	<view :style="warpCss" class="overflow-hidden relative"
+		v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
+		<!-- 自定义头部 -->
+		<view class="flex items-center left-0 right-0 z-10 bg-transparent detail-head"
+			:class="{'!bg-[#fff]' :detailHeadBgChange, 'fixed': diyStore.mode != 'decorate', 'absolute': diyStore.mode == 'decorate'}"
+			:style="navbarInnerStyle">
+			<view class="flex-center h-[60rpx] rounded-[30rpx] box-border arrow-left px-[40rpx] leading-[1]"
+				:style="navbarInnerArrowStyle">
+				<text class="nc-iconfont nc-icon-zuoV6xx text-[18px]" @click="backToPrevious()"></text>
+				<text class="w-[2rpx] h-[26rpx] bg-[#999] mx-[14rpx]"></text>
+				<text class="nc-iconfont nc-icon-liebiao-xiV6xx1 text-[16px]" @click="topNav = true"></text>
+			</view>
+		</view>
+		<view class="fixed top-0 left-0 right-0 bottom-0 z-100 bg-transparent" @click="topNav = false" v-if="topNav">
+			<view class="search-box w-[202rpx] bg-[#fff] rounded-[12rpx] relative" :style="fixedInnerStyle">
+				<view class="px-[20rpx] flex-center" @click="redirect(item.url)" v-for="(item,index) in menuContents"
+					:key="index">
+					<text class="text-[30rpx] mr-[10rpx]" :class="item.iconfont"></text>
+					<text
+						class="pl-[14rpx] py-[20rpx] flex-1 text-[24rpx] text-[#333] border-0 border-[#ddd] border-b-[1rpx] border-solid">{{ item.name }}</text>
+				</view>
+			</view>
+		</view>
+		<view class="w-full relative overflow-hidden" :style="mediumCss">
+			<view class="absolute top-0 left-0 w-full h-full transition-transform duration-300 ease-linear transform translate-x-0">
+				<view class="swiper-box">
+					<u-swiper :list="diyComponent.goods.goods_image" @change="swiperChangeFn"
+						:indicator="(diyComponent.goods.goods_image.length != 1 || diyStore.mode == 'decorate') && diyComponent.medium.indicator"
+						:indicatorStyle="{'bottom': '70rpx'}" :autoplay="true"
+						:height="swiperImageHeight" radius="0" @click="swiperClick"></u-swiper>
+				</view>
+			</view>
+			<!-- 切换视频、图片 -->
+			<view
+				class="media-mode bg-[rgb(0,0,0,.5)] flex items-center rounded-[50rpx] p-[2rpx] absolute bottom-[130rpx] right-[20rpx] text-center leading-[46rpx]"
+			>
+				<view class="tab-item flex items-center !bg-[#fff] !text-[#666]">
+					<text
+						v-if="diyComponent?.goods?.goods_image?.length > 1">{{swiperCurrentIndex}}/{{diyComponent.goods.goods_image.length}}</text>
+				</view>
+			</view>
+		</view>
+		<view
+			class="relative flex items-center justify-between !bg-cover box-border pb-[26rpx] h-[136rpx] px-[30rpx]"
+			:style="marketGoodCss">
+			<view class="text-[#fff] leading-[normal]">
+				<view class="inline-block mr-[14rpx] relative top-[2rpx]">
+					<text class="text-[32rpx] price-font mr-[4rpx]">￥</text>
+					<text
+						class="text-[48rpx] -mb-[4rpx] price-font">{{ parseFloat(goodsPrice).toFixed(2).split('.')[0] }}</text>
+					<text class="text-[32rpx] price-font">.{{ parseFloat(goodsPrice).toFixed(2).split('.')[1] }}</text>
+				</view>
+				<view class="inline-block">
+					<text
+						class="text-[30rpx] relative top-[1rpx] price-font leading-[36rpx] line-through">￥{{ diyComponent.marketPrice || '0.00' }}</text>
+				</view>
+			</view>
+		</view>
+		<view class="overflow-hidden -mt-[34rpx] relative" :style="ordinaryGoodCss">
+			<view class="detail-title relative px-[30rpx] pt-[30rpx]">
+				<view class="font-medium text-[30rpx] multi-hidden leading-[40rpx]"
+					:style="{'color': diyComponent.goodsInfo.titleColor}">
+					<view class="brand-tag middle" v-if="diyComponent.goods.goods_brand"
+						:style="diyGoods.baseTagStyle(diyComponent?.goods?.goods_brand)">
+						{{ diyComponent?.goods?.goods_brand?.brand_name }}</view>
+					{{ diyComponent.goods.goods_name }}
+				</view>
+				<view class="flex justify-between items-start mt-[24rpx]">
+					<view class="text-[24rpx] leading-[34rpx]" 
+						:style="{'color': diyComponent.goodsInfo.saleInfoColor}" v-if="saleInfo.includes('stock')">
+						<text class="whitespace-nowrap mr-[4rpx]">库存:</text>
+						<text>{{ diyComponent.allStock }}</text>
+						<text>{{ diyComponent.goods.unit }}</text>
+					</view>
+					<view class="text-[24rpx] leading-[34rpx]" v-if="saleInfo.includes('sales')" :style="{'color': diyComponent.goodsInfo.saleInfoColor}">
+                        <text class="mx-[2rpx]"> {{ diyComponent.isCustomize == 1 ? '可定制' : '不可定制' }}</text>
                     </view>
-                </view>
-                <view class="font-medium text-[30rpx] multi-hidden leading-[40rpx]" :style="{'color': diyComponent.goodsInfo.titleColor}">
-                    <view class="brand-tag middle" v-if="diyComponent.goods.goods_brand" :style="diyGoods.baseTagStyle(diyComponent?.goods?.goods_brand)">{{ diyComponent?.goods?.goods_brand?.brand_name }}</view>
-                    {{ diyComponent.goods.goods_name }}
-                </view>
-                <view v-if="diyComponent.goods.sub_title" class="text-[26rpx] my-[16rpx] leading-[33rpx]" :style="{'color': diyComponent.goodsInfo.subTitleColor}">
-                    {{diyComponent.goods.sub_title}}
-                </view>
-                
-                <view class="flex flex-wrap mt-[16rpx]" v-if="diyComponent.label_info && diyComponent.label_info.length">
-                    <template v-for="item in diyComponent.label_info" :key="item.label_id">
-                        <image class="img-tag middle" v-if="item.style_type == 'icon' && item.icon" :src="img(item.icon)" mode="heightFix"  @error="diyGoods.error(item,'icon')" />
-                        <view class="base-tag middle" v-else-if="item.style_type == 'diy' || !item.icon" :style="diyGoods.baseTagStyle(item)">{{ item.label_name }}</view>
-                    </template>
-                </view>
-                <view class="flex justify-between items-start mt-[24rpx]">
-                    <view class="text-[24rpx] leading-[34rpx]" v-if="diyComponent.market_price && parseFloat(diyComponent.market_price) && saleInfo.includes('underlined_price')"  :style="{'color': diyComponent.goodsInfo.saleInfoColor}">
-                        <text class="whitespace-nowrap mr-[4rpx]">划线价:</text>
-                        <text class="line-through">￥{{ diyComponent.market_price }}</text>
+					<view class="text-[24rpx] leading-[34rpx]" v-if="saleInfo.includes('underlined_price')"  :style="{'color': diyComponent.goodsInfo.saleInfoColor}">
+                        <text class="whitespace-nowrap mr-[4rpx]">起订:</text>
+                        <text>{{ diyComponent.minOrderQuantity }}</text>
+						<text>{{ diyComponent.goods.unit }}</text>
                     </view>
-                    <view class="text-[24rpx] leading-[34rpx]" v-if="saleInfo.includes('stock')" :style="{'color': diyComponent.goodsInfo.saleInfoColor}">
-                        <text class="whitespace-nowrap mr-[4rpx]">库存:</text>
-                        <text>{{ diyComponent.stock }}</text>
-                        <text>{{ diyComponent.goods.unit }}</text>
-                    </view>
-                    <view class="text-[24rpx] leading-[34rpx] flex items-baseline" v-if="saleInfo.includes('sales')" :style="{'color': diyComponent.goodsInfo.saleInfoColor}">
-                        <text class="whitespace-nowrap mr-[4rpx]">销量:</text>
-                        <text class="mx-[2rpx]">{{ diyComponent.goods.sale_num }}</text>
-                        <text>{{ diyComponent.goods.unit }}</text>
-                    </view>
-                </view>
-            </view>
-        </view>
-        <!-- 装修时，防止点击 -->
-        <view v-if="diyStore.mode == 'decorate'" class="absolute z-10 top-0 right-0 bottom-0 left-0"></view>
-    </view>
+				</view>
+			</view>
+		</view>
+		<!-- 装修时，防止点击 -->
+		<view v-if="diyStore.mode == 'decorate'" class="absolute z-10 top-0 right-0 bottom-0 left-0"></view>
+	</view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
-import { onPageScroll } from '@dcloudio/uni-app'
-import { redirect, img, getToken } from '@/utils/common';
-import useDiyStore from '@/app/stores/diy';
-import useSystemStore from '@/stores/system'
-import { useGoods } from '@/addon/shop/hooks/useGoods'
-import useGoodsDetailStore from '@/addon/shop/stores/goodsDetail';
-
-const props = defineProps(['component', 'index', 'value', 'global']);
-const diyStore = useDiyStore();
-const emits = defineEmits(['loadingFn', 'update:componentIsShow']); //商品数据加载完成之后触发
-const topNav = ref(false);
-const switchMedia: any = ref('img');
-const swiperCurrentIndex = ref(1); // 轮播图当前索引
-const videoContext: any = ref(null)
-const discountTime = ref(0)
-const swiperImageHeight = ref('100vw') // 轮播图高度
-const diyGoods = useGoods();
-
-const diyComponent = computed(() => {
-    if (diyStore.mode == 'decorate') {
-        const obj = {
-            price: 50,
-            goods:{
-                goods_image: [img('static/resource/images/diy/shop_default.jpg')],
-                goods_name: '商品名称',
-                sub_title: '商品副标题',
-                unit: '件',
-                sale_num: '50'
-            },
-            market_price: '100.00',
-            stock: 80,
-            goods_video: '',
-        }
-        return Object.assign({},obj,diyStore.value[props.index]);
-    } else {
-        return Object.assign({}, props.component, useGoodsDetailStore().goodsDetail);
-    }
-})
-const saleInfo = ref([])
-const diyGlobal = computed(() => {
-    return props.global;
-})
-
-const warpCss = computed(() => {
-    let style = '';
-    style += 'position:relative;';
-    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${ diyComponent.value.componentGradientAngle },${ diyComponent.value.componentStartBgColor },${ diyComponent.value.componentEndBgColor });`;
-    else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
-
-    if (diyComponent.value.componentBgUrl) {
-        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
-        style += 'background-size: cover;background-repeat: no-repeat;';
-    }
-
-    if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
-    if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
-    if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
-    if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
-    return style;
-})
-
-/************ 自定义头部-start ****************/
-const systemStore = useSystemStore()
-let platform = systemStore.systemInfo.platform;
-
-// 导航栏内部盒子的样式
-const navbarInnerStyle = computed(() => {
-    let style = '';
-    // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
-    // #ifdef MP
-    let rightButtonWidth = systemStore.menuButtonInfo.width ? systemStore.menuButtonInfo.width * 2 + 'rpx' : '70rpx';
-    style += 'height:' + systemStore.menuButtonInfo.height + 'px;';
-    style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
-    style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
-    style += 'padding-top:' + systemStore.menuButtonInfo.top + 'px;';
-    style += 'padding-bottom: 8px;';
-
-    style += 'font-size: 32rpx;';
-    if (platform === 'ios') {
-        // 苹果(iOS)设备
-        style += 'font-weight: 500;';
-    } else if (platform === 'android') {
-        // 安卓(Android)设备
-        style += 'font-size: 36rpx;';
-    }
-    // #endif
-
-    // #ifdef H5
-    style += 'height: 100rpx;';
-    style += 'padding-right: 30rpx;';
-    style += 'padding-left: 30rpx;';
-
-    style += 'font-size: 32rpx;';
-    if (platform === 'ios') {
-        // 苹果(iOS)设备
-        style += 'font-weight: 500;';
-    } else if (platform === 'android') {
-        // 安卓(Android)设备
-        style += 'font-size: 36rpx;';
-    }
-    // #endif
-    
-   // #ifdef APP-PLUS
-   style += 'height: 80rpx;';
-   style += 'padding-right: 30rpx;';
-   style += 'padding-left: 30rpx;';
-   style += 'padding-top:' + systemStore.systemInfo.statusBarHeight + 'px;';
-   // #endif
-    
-    return style;
-})
-
-// 导航栏内部盒子的样式
-const navbarInnerArrowStyle = computed(() => {
-    let style = '';
-    // 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
-    // #ifdef MP
-    style += 'position: absolute;';
-    style += 'left:calc( 100vw - ' + systemStore.menuButtonInfo.right + 'px);';
-    if (platform === 'ios') {
-        // 苹果(iOS)设备
-        style += 'font-weight: 700;';
-    } else if (platform === 'android') {
-        // 安卓(Android)设备
-    }
-    // #endif
-    return style;
-})
-
-// 导航栏头部卡片样式
-const fixedInnerStyle = computed(() => {
-    let style = '';
-    // #ifdef MP
-    style += 'top:' + (systemStore.menuButtonInfo.height + systemStore.menuButtonInfo.top + 8) + 'px;';
-    style += 'left:calc( 100vw - ' + systemStore.menuButtonInfo.right + 'px);';
-    // #endif
-    // #ifdef H5
-    style += 'top: 100rpx;';
-    style += 'left: 30rpx;';
-    // #endif
-    // #ifdef APP-PLUS
-    style += 'top:' + (systemStore.systemInfo.statusBarHeight + uni.upx2px(100)) + 'px;';
-    style += 'left: 30rpx;';
-    // #endif
-    return style;
-})
-
-// 头部滚动
-const instance = getCurrentInstance();
-let swiperHeight = 0
-let detailHead = 0
-
-const detailHeadBgChange = ref(false)
-onPageScroll((e) => {
-    if (swiperHeight == 0 || detailHead == 0) return;
-    let height = swiperHeight - detailHead - 20;
-    detailHeadBgChange.value = false;
-    if (e.scrollTop >= height) {
-        detailHeadBgChange.value = true;
-    }
-})
-/************ 自定义头部-end ****************/
-
-/************* 分享海报-start **************/
-const openShareFn = () => {
-    useGoodsDetailStore().setGoodsDetail({isOpenSharePoster: true});
-}
-/************* 分享海报-end **************/
-
-// 菜单列表
-const menuList = {
-   index: {
-        name: '首页',
-        iconfont: 'nc-iconfont nc-icon-shouyeV6xx11',
-        url: { url: '/addon/shop/pages/index', mode: 'reLaunch' }
-   },
-   search: {
-        name: '搜索',
-        iconfont: 'nc-iconfont nc-icon-sousuo-duanV6xx1',
-        url: { url: '/addon/shop/pages/goods/search' }
-   },
-   cart: {
-        name: '购物车',
-        iconfont: 'nc-iconfont nc-icon-gouwucheV6xx1',
-        url: { url: '/addon/shop/pages/goods/cart' }
-   },
-   member: {
-        name: '个人中心',
-        iconfont: 'nc-iconfont nc-icon-a-wodeV6xx-36',
-        url: { url: '/addon/shop/pages/member/index' }
-   },
-   collect: {
-        name: '我的收藏',
-        iconfont: 'nc-iconfont nc-icon-guanzhuV6xx',
-        url: { url: '/addon/shop/pages/goods/collect' }
-   },
-   goods_list: {
-        name: '商品列表',
-        iconfont: 'iconfont icona-yingyongliebiaoV6xx-32',
-        url: { url: '/addon/shop/pages/goods/list' }
-   },
-   goods_category: {
-        name: '商品分类',
-        iconfont: 'nc-iconfont nc-icon-shangpinfenlei',
-        url: { url: '/addon/shop/pages/goods/category' }
-   }
-}
-
-const menuContents = computed(() => {
-    const list = []
-    let menu = typeof diyComponent.value.menuContent == 'object' ? diyComponent.value.menuContent : diyComponent.value.menuContent.split(',')
-    menu.forEach((item: any) => {
-        if (menuList[item]) {
-            list.push(menuList[item])
-        }
-    })
-    return list
-})
-
-// 图片轮播change事件
-const swiperChangeFn = (e: any) => { 
-    swiperCurrentIndex.value = e.current + 1;
-}
-
-// 价格类型
-//''=>原价，新人价=>newcomer_price，discount_price=>折扣价，member_price=>会员价
-const priceType = computed(() => {
-    let type = "";
-    if (diyStore.mode != 'decorate') {
-        if (diyGlobal.value.goodsParameter.type == 'newcomer_discount' && diyComponent.value.newcomer_price) {
-            type = 'newcomer_price'
-        } else if (diyComponent.value.show_type == 'original_price' && diyComponent.value.priceRegion.showWay == 'fixed') {
-            type = ''
-        } else {
-            type = diyComponent.value.show_type
-        }
-    } else if (diyComponent.value.priceRegion.showWay == 'normal') {
-        type = 'original_price'
-    }
-    return type;
-})
-
-// 商品价格
-const goodsPrice = computed(() => {
-    let price = "0.00";
-    if (diyStore.mode != 'decorate') {
-        if (diyGlobal.value.goodsParameter.type == 'newcomer_discount' && diyComponent.value.newcomer_price) {
-            price = diyComponent.value.newcomer_price
-        } else {
-            price = diyComponent.value.show_price
-        }
-    } else {
-        price = '100.00' // 装修模式
-    }
-    return price;
-})
-
-// 普通商品样式
-const ordinaryGoodCss = computed(() => {
-    let style = "";
-    
-    if (diyComponent.value.goodsInfo.startBgColor && diyComponent.value.goodsInfo.endBgColor) style += `background:linear-gradient(180deg,${diyComponent.value.goodsInfo.startBgColor} 85% ,${diyComponent.value.goodsInfo.endBgColor} 100%);`;
-    else style += 'background-color:' + (diyComponent.value.goodsInfo.startBgColor || diyComponent.value.goodsInfo.endBgColor) + ';';
-
-    if (diyComponent.value.goodsInfo.topMargin) style += 'margin-top:' + diyComponent.value.goodsInfo.topMargin * 2 + 'rpx;';
-    if (diyComponent.value.goodsInfo.aboutMargin){
-        style += 'margin-left:' + diyComponent.value.goodsInfo.aboutMargin * 2 + 'rpx;';
-        style += 'margin-right:' + diyComponent.value.goodsInfo.aboutMargin * 2 + 'rpx;';
-    }
-
-    if (diyComponent.value.goodsInfo.topRounded) style += 'border-top-left-radius:' + diyComponent.value.goodsInfo.topRounded * 2 + 'rpx;';
-    if (diyComponent.value.goodsInfo.topRounded) style += 'border-top-right-radius:' + diyComponent.value.goodsInfo.topRounded * 2 + 'rpx;';
-    if (diyComponent.value.goodsInfo.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.goodsInfo.bottomRounded * 2 + 'rpx;';
-    if (diyComponent.value.goodsInfo.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.goodsInfo.bottomRounded * 2 + 'rpx;';
-    return style;
-})
-
-// 价格模块样式
-const marketGoodCss = computed(() => {
-    let style = "";
-
-    let typeArr = ['newcomer_price','discount_price','member_price']
-    let imgVal = typeArr.indexOf(priceType.value) != -1 ? diyComponent.value.priceRegion.marketingBgImg : diyComponent.value.priceRegion.bgImg;
-    style += `background: url(${ img(imgVal) }) no-repeat;`;
-
-    if (diyComponent.value.goodsInfo.priceBgColor) {
-        style += `background-color: ${ diyComponent.value.goodsInfo.priceBgColor };`;
-    }
-
-    if (diyComponent.value.goodsInfo.priceTopMargin) style += 'margin-top:' + diyComponent.value.goodsInfo.priceTopMargin * 2 + 'rpx;';
-    if (diyComponent.value.goodsInfo.priceAboutMargin){
-        style += 'margin-left:' + diyComponent.value.goodsInfo.priceAboutMargin * 2 + 'rpx;';
-        style += 'margin-right:' + diyComponent.value.goodsInfo.priceAboutMargin * 2 + 'rpx;';
-    }
-
-    if (diyComponent.value.goodsInfo.priceTopRounded) style += 'border-top-left-radius:' + diyComponent.value.goodsInfo.priceTopRounded * 2 + 'rpx;';
-    if (diyComponent.value.goodsInfo.priceTopRounded) style += 'border-top-right-radius:' + diyComponent.value.goodsInfo.priceTopRounded * 2 + 'rpx;';
-    if (diyComponent.value.goodsInfo.priceBottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.goodsInfo.priceBottomRounded * 2 + 'rpx;';
-    if (diyComponent.value.goodsInfo.priceBottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.goodsInfo.priceBottomRounded * 2 + 'rpx;';
-    return style;
-})
-
-const goodsVideoHeight = computed(() => {
-    // 这个主要是解决微信小程序的视频播放被商品信息模块遮挡的问题，如果商品信息模块的margin-top是负值，对应的视频高度也需要减去这个负值，但如果是正值就无需处理
-    let style = "";
-    let height = 0;
-    // #ifdef MP
-    if (priceType.value != 'original_price') {
-        height = diyComponent.value.goodsInfo.priceTopMargin * 2;
-    } else {
-        height = diyComponent.value.goodsInfo.topMargin * 2;
-    }
-    height = height > 0? 0 : height;
-    style = `height:calc(100% - ${Math.abs(height)}rpx);`;
-    // #endif
-    // #ifdef H5
-    style = `height: 100%;`;
-    // #endif
-    return style;
-})
-
-const mediumCss = computed(() => {
-    let style = "";
-    if (diyComponent.value.medium.type == 'height_adaptive') {
-        style += `height:${swiperImageHeight.value};`;
-    } else {
-        style += 'height:100vw;';
-    }
-    return style;
-})
-
-const timeData = ref({});
-// 定义 onChange 方法
-const onChange = (e) => {
-    timeData.value = e;
-};
-
-const swiperClick = (index: any) => {
-    if (typeof index == 'number') imgListPreview(diyComponent.value.goods.goods_image, index)
-}
-
-//预览图片
-const imgListPreview = (item: any, index: any) => {
-    if (Array.isArray(item)) {
-        if (!item.length) return false
-        var urlList = item;
-        uni.previewImage({
-            indicator: "number",
-            current: index,
-            loop: true,
-            urls: urlList
-        })
-    } else {
-        if (item === '') return false
-        var urlList = []
-        urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
-        uni.previewImage({
-            indicator: "number",
-            loop: true,
-            urls: urlList
-        })
-    }
-
-}
-
-// 返回上一页
-const backToPrevious = () => {
-    if (getCurrentPages().length > 1) {
-        uni.navigateBack({
-            delta: 1
-        });
-    } else {
-        redirect({
-            url: '/addon/shop/pages/index',
-            mode: 'reLaunch'
-        });
-    }
-}
-
-const initFn = () => {
-    if (diyComponent.value?.goods.goods_video != '') {
-        switchMedia.value = 'video'
-        videoContext.value = uni.createVideoContext('goodsVideo');
-    }
-    saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');
-
-    // 折扣信息
-    if (Object.keys(diyComponent.value?.goods).length && diyGlobal.value.goodsParameter.type == 'discount' && diyComponent.value?.goods.is_discount && Object.keys(diyComponent.value?.discount_info).length) {
-        let now = new Date();
-        let timestamp: any = now.getTime();
-        discountTime.value = diyComponent.value?.discount_info.active.end_time * 1000 - timestamp.toFixed(0)
-    }else{
-        let now = new Date();
-        let timestamp: any = now.getTime();
-        if (diyComponent.value && diyComponent.value?.discount_info && diyComponent.value?.discount_info.active && diyComponent.value?.discount_info.active.end_time) {
-            discountTime.value = diyComponent.value?.discount_info.active.end_time * 1000 - timestamp.toFixed(0) 
-        } 
-    }
-
-    setTimeout(() => {
-        const query = uni.createSelectorQuery().in(instance);
-        query.select('.swiper-box').boundingClientRect((data: any) => {
-            swiperHeight = data ? data.height : 0;
-        }).exec();
-        query.select('.detail-head').boundingClientRect((data: any) => {
-            if (data) {
-                detailHead = data.height ? data.height : 0;
-            }
-        }).exec();
-    }, 400)
-
-    // 轮播图高度
-    if (diyComponent.value.medium.type == 'height_adaptive') {
-        const screenWidth = uni.getSystemInfoSync().screenWidth
-        swiperImageHeight.value = (screenWidth * diyComponent.value.goods.image_size.height / diyComponent.value.goods.image_size.width) * 2 + 'rpx'
-    } else {
-        swiperImageHeight.value = '100vw'
-    }
-}
-
-onMounted(() => {
-    saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');
-    // 装修模式下刷新
-    if (diyStore.mode == 'decorate') {
-        watch(
-            () => diyComponent.value,
-            (newValue, oldValue) => {
-                if (newValue && newValue.componentName == 'ShopGoodsDetailBasicInfo') {
-                    nextTick(() => {
-                        saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');
-                    })
-                }
-            }
-        )
-    } else {
-        initFn()
-        watch(
-            () => diyComponent.value,
-            (newValue, oldValue) => {
-                if (newValue && newValue.componentName == 'ShopGoodsDetailBasicInfo') {
-                    emits('update:componentIsShow', true)
-                }       
-            },
-            { immediate: true }
-        )
-    }
-});
+	import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
+	import { onPageScroll } from '@dcloudio/uni-app'
+	import { redirect, img, getToken } from '@/utils/common';
+	import useDiyStore from '@/app/stores/diy';
+	import useSystemStore from '@/stores/system'
+	import { useGoods } from '@/addon/shop/hooks/useGoods'
+	import useGoodsDetailStore from '@/addon/shop/stores/goodsDetail';
+
+	const props = defineProps(['component', 'index', 'value', 'global']);
+	const diyStore = useDiyStore();
+	const emits = defineEmits(['loadingFn', 'update:componentIsShow']); //商品数据加载完成之后触发
+	const topNav = ref(false);
+	const switchMedia : any = ref('img');
+	const swiperCurrentIndex = ref(1); // 轮播图当前索引
+	const videoContext : any = ref(null)
+	const discountTime = ref(0)
+	const swiperImageHeight = ref('100vw') // 轮播图高度
+	const diyGoods = useGoods();
+
+	const diyComponent = computed(() => {
+		if (diyStore.mode == 'decorate') {
+			const obj = {
+				price: 50,
+				goods: {
+					goods_image: [img('static/resource/images/diy/shop_default.jpg')],
+					goods_name: '商品名称',
+					sub_title: '商品副标题',
+					unit: '件',
+					sale_num: '50'
+				},
+				market_price: '100.00',
+				stock: 80,
+			}
+			return Object.assign({}, obj, diyStore.value[props.index]);
+		} else {
+			return Object.assign({}, props.component, useGoodsDetailStore().goodsDetail);
+		}
+	})
+	const saleInfo = ref<any>([])
+	const diyGlobal = computed(() => {
+		return props.global;
+	})
+
+	const warpCss = computed(() => {
+		let style = '';
+		style += 'position:relative;';
+		if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+		else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
+
+		if (diyComponent.value.componentBgUrl) {
+			style += `background-image:url('${img(diyComponent.value.componentBgUrl)}');`;
+			style += 'background-size: cover;background-repeat: no-repeat;';
+		}
+
+		if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+	/************ 自定义头部-start ****************/
+	const systemStore = useSystemStore()
+	let platform = systemStore.systemInfo.platform;
+
+	// 导航栏内部盒子的样式
+	const navbarInnerStyle = computed(() => {
+		let style = '';
+		// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+		// #ifdef MP
+		let rightButtonWidth = systemStore.menuButtonInfo.width ? systemStore.menuButtonInfo.width * 2 + 'rpx' : '70rpx';
+		style += 'height:' + systemStore.menuButtonInfo.height + 'px;';
+		style += 'padding-right:calc(' + rightButtonWidth + ' + 30rpx);';
+		style += 'padding-left:calc(' + rightButtonWidth + ' + 30rpx);';
+		style += 'padding-top:' + systemStore.menuButtonInfo.top + 'px;';
+		style += 'padding-bottom: 8px;';
+
+		style += 'font-size: 32rpx;';
+		if (platform === 'ios') {
+			// 苹果(iOS)设备
+			style += 'font-weight: 500;';
+		} else if (platform === 'android') {
+			// 安卓(Android)设备
+			style += 'font-size: 36rpx;';
+		}
+		// #endif
+
+		// #ifdef H5
+		style += 'height: 100rpx;';
+		style += 'padding-right: 30rpx;';
+		style += 'padding-left: 30rpx;';
+
+		style += 'font-size: 32rpx;';
+		if (platform === 'ios') {
+			// 苹果(iOS)设备
+			style += 'font-weight: 500;';
+		} else if (platform === 'android') {
+			// 安卓(Android)设备
+			style += 'font-size: 36rpx;';
+		}
+		// #endif
+
+		// #ifdef APP-PLUS
+		style += 'height: 80rpx;';
+		style += 'padding-right: 30rpx;';
+		style += 'padding-left: 30rpx;';
+		style += 'padding-top:' + systemStore.systemInfo.statusBarHeight + 'px;';
+		// #endif
+
+		return style;
+	})
+
+	// 导航栏内部盒子的样式
+	const navbarInnerArrowStyle = computed(() => {
+		let style = '';
+		// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
+		// #ifdef MP
+		style += 'position: absolute;';
+		style += 'left:calc( 100vw - ' + systemStore.menuButtonInfo.right + 'px);';
+		if (platform === 'ios') {
+			// 苹果(iOS)设备
+			style += 'font-weight: 700;';
+		} else if (platform === 'android') {
+			// 安卓(Android)设备
+		}
+		// #endif
+		return style;
+	})
+
+	// 导航栏头部卡片样式
+	const fixedInnerStyle = computed(() => {
+		let style = '';
+		// #ifdef MP
+		style += 'top:' + (systemStore.menuButtonInfo.height + systemStore.menuButtonInfo.top + 8) + 'px;';
+		style += 'left:calc( 100vw - ' + systemStore.menuButtonInfo.right + 'px);';
+		// #endif
+		// #ifdef H5
+		style += 'top: 100rpx;';
+		style += 'left: 30rpx;';
+		// #endif
+		// #ifdef APP-PLUS
+		style += 'top:' + (systemStore.systemInfo.statusBarHeight + uni.upx2px(100)) + 'px;';
+		style += 'left: 30rpx;';
+		// #endif
+		return style;
+	})
+
+	// 头部滚动
+	const instance = getCurrentInstance();
+	let swiperHeight = 0
+	let detailHead = 0
+
+	const detailHeadBgChange = ref(false)
+	onPageScroll((e) => {
+		if (swiperHeight == 0 || detailHead == 0) return;
+		let height = swiperHeight - detailHead - 20;
+		detailHeadBgChange.value = false;
+		if (e.scrollTop >= height) {
+			detailHeadBgChange.value = true;
+		}
+	})
+	/************ 自定义头部-end ****************/
+	/************* 分享海报-end **************/
+
+	// 菜单列表
+	const menuList:any = {
+		index: {
+			name: '首页',
+			iconfont: 'nc-iconfont nc-icon-shouyeV6xx11',
+			url: { url: '/addon/shop/pages/index', mode: 'reLaunch' }
+		},
+		search: {
+			name: '搜索',
+			iconfont: 'nc-iconfont nc-icon-sousuo-duanV6xx1',
+			url: { url: '/addon/shop/pages/goods/search' }
+		},
+		cart: {
+			name: '购物车',
+			iconfont: 'nc-iconfont nc-icon-gouwucheV6xx1',
+			url: { url: '/addon/shop/pages/goods/cart' }
+		},
+		member: {
+			name: '个人中心',
+			iconfont: 'nc-iconfont nc-icon-a-wodeV6xx-36',
+			url: { url: '/addon/shop/pages/member/index' }
+		},
+		collect: {
+			name: '我的收藏',
+			iconfont: 'nc-iconfont nc-icon-guanzhuV6xx',
+			url: { url: '/addon/shop/pages/goods/collect' }
+		},
+		goods_list: {
+			name: '商品列表',
+			iconfont: 'iconfont icona-yingyongliebiaoV6xx-32',
+			url: { url: '/addon/shop/pages/goods/list' }
+		},
+		goods_category: {
+			name: '商品分类',
+			iconfont: 'nc-iconfont nc-icon-shangpinfenlei',
+			url: { url: '/addon/shop/pages/goods/category' }
+		}
+	}
+
+	const menuContents = computed(() => {
+		const list:any = []
+		let menu = typeof diyComponent.value.menuContent == 'object' ? diyComponent.value.menuContent : diyComponent.value.menuContent.split(',')
+		menu.forEach((item : any) => {
+			if (menuList[item]) {
+				list.push(menuList[item])
+			}
+		})
+		return list
+	})
+
+	// 图片轮播change事件
+	const swiperChangeFn = (e : any) => {
+		swiperCurrentIndex.value = e.current + 1;
+	}
+
+
+	// 商品价格
+	const goodsPrice = computed(() => {
+		let price = "0.00";
+		if (diyStore.mode != 'decorate') {
+            price = diyComponent.value.memberPrice || '0.00'
+		} else {
+			price = '100.00' // 装修模式
+		}
+		return price;
+	})
+
+	// 普通商品样式
+	const ordinaryGoodCss = computed(() => {
+		let style = "";
+
+		if (diyComponent.value.goodsInfo.startBgColor && diyComponent.value.goodsInfo.endBgColor) style += `background:linear-gradient(180deg,${diyComponent.value.goodsInfo.startBgColor} 85% ,${diyComponent.value.goodsInfo.endBgColor} 100%);`;
+		else style += 'background-color:' + (diyComponent.value.goodsInfo.startBgColor || diyComponent.value.goodsInfo.endBgColor) + ';';
+
+		if (diyComponent.value.goodsInfo.topMargin) style += 'margin-top:' + diyComponent.value.goodsInfo.topMargin * 2 + 'rpx;';
+		if (diyComponent.value.goodsInfo.aboutMargin) {
+			style += 'margin-left:' + diyComponent.value.goodsInfo.aboutMargin * 2 + 'rpx;';
+			style += 'margin-right:' + diyComponent.value.goodsInfo.aboutMargin * 2 + 'rpx;';
+		}
+
+		if (diyComponent.value.goodsInfo.topRounded) style += 'border-top-left-radius:' + diyComponent.value.goodsInfo.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.goodsInfo.topRounded) style += 'border-top-right-radius:' + diyComponent.value.goodsInfo.topRounded * 2 + 'rpx;';
+		if (diyComponent.value.goodsInfo.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.goodsInfo.bottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.goodsInfo.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.goodsInfo.bottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+	// 价格模块样式
+	const marketGoodCss = computed(() => {
+		let style = "";
+		let imgVal = diyComponent.value.priceRegion.marketingBgImg;
+		style += `background: url(${img(imgVal)}) no-repeat;`;
+
+		if (diyComponent.value.goodsInfo.priceBgColor) {
+			style += `background-color: ${diyComponent.value.goodsInfo.priceBgColor};`;
+		}
+
+		if (diyComponent.value.goodsInfo.priceTopMargin) style += 'margin-top:' + diyComponent.value.goodsInfo.priceTopMargin * 2 + 'rpx;';
+		if (diyComponent.value.goodsInfo.priceAboutMargin) {
+			style += 'margin-left:' + diyComponent.value.goodsInfo.priceAboutMargin * 2 + 'rpx;';
+			style += 'margin-right:' + diyComponent.value.goodsInfo.priceAboutMargin * 2 + 'rpx;';
+		}
+
+		if (diyComponent.value.goodsInfo.priceTopRounded) style += 'border-top-left-radius:' + diyComponent.value.goodsInfo.priceTopRounded * 2 + 'rpx;';
+		if (diyComponent.value.goodsInfo.priceTopRounded) style += 'border-top-right-radius:' + diyComponent.value.goodsInfo.priceTopRounded * 2 + 'rpx;';
+		if (diyComponent.value.goodsInfo.priceBottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.goodsInfo.priceBottomRounded * 2 + 'rpx;';
+		if (diyComponent.value.goodsInfo.priceBottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.goodsInfo.priceBottomRounded * 2 + 'rpx;';
+		return style;
+	})
+
+
+	const mediumCss = computed(() => {
+		let style = "";
+		if (diyComponent.value.medium.type == 'height_adaptive') {
+			style += `height:${swiperImageHeight.value};`;
+		} else {
+			style += 'height:100vw;';
+		}
+		return style;
+	})
+
+
+	const swiperClick = (index : any) => {
+		if (typeof index == 'number') imgListPreview(diyComponent.value.goods.goods_image, index)
+	}
+
+	//预览图片
+	const imgListPreview = (item : any, index : any) => {
+		if (Array.isArray(item)) {
+			if (!item.length) return false
+			var urlList = item;
+			uni.previewImage({
+				indicator: "number",
+				current: index,
+				loop: true,
+				urls: urlList
+			})
+		} else {
+			if (item === '') return false
+			var urlList = []
+			urlList.push(img(item))  //push中的参数为 :src="item.img_url" 中的图片地址
+			uni.previewImage({
+				indicator: "number",
+				loop: true,
+				urls: urlList
+			})
+		}
+
+	}
+
+	// 返回上一页
+	const backToPrevious = () => {
+		if (getCurrentPages().length > 1) {
+			uni.navigateBack({
+				delta: 1
+			});
+		} else {
+			redirect({
+				url: '/addon/shop/pages/index',
+				mode: 'reLaunch'
+			});
+		}
+	}
+
+	const initFn = () => {
+		saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');
+
+		setTimeout(() => {
+			const query = uni.createSelectorQuery().in(instance);
+			query.select('.swiper-box').boundingClientRect((data : any) => {
+				swiperHeight = data ? data.height : 0;
+			}).exec();
+			query.select('.detail-head').boundingClientRect((data : any) => {
+				if (data) {
+					detailHead = data.height ? data.height : 0;
+				}
+			}).exec();
+		}, 400)
+
+		// 轮播图高度
+		if (diyComponent.value.medium.type == 'height_adaptive') {
+			const screenWidth = uni.getSystemInfoSync().screenWidth
+			swiperImageHeight.value = (screenWidth * diyComponent.value.goods.image_size.height / diyComponent.value.goods.image_size.width) * 2 + 'rpx'
+		} else {
+			swiperImageHeight.value = '100vw'
+		}
+	}
+
+	onMounted(() => {
+		saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');
+		// 装修模式下刷新
+		if (diyStore.mode == 'decorate') {
+			watch(
+				() => diyComponent.value,
+				(newValue, oldValue) => {
+					if (newValue && newValue.componentName == 'ShopGoodsDetailBasicInfo') {
+						nextTick(() => {
+							saleInfo.value = (typeof diyComponent.value?.saleInfo == 'object') ? diyComponent.value?.saleInfo : diyComponent.value?.saleInfo.split(',');
+						})
+					}
+				}
+			)
+		} else {
+			initFn()
+			watch(
+				() => diyComponent.value,
+				(newValue, oldValue) => {
+					if (newValue && newValue.componentName == 'ShopGoodsDetailBasicInfo') {
+						emits('update:componentIsShow', true)
+					}
+				},
+				{ immediate: true }
+			)
+		}
+	});
 </script>
 <style lang="scss" scoped>
-.arrow-left {
-    // background: rgba(153, 153, 153, 0.1);
-    background: rgba(255, 255, 255, 0.6);
-    border: 1rpx solid rgba(0, 0, 0, 0.1);
-}
-.media-mode {
-    .tab-item {
-        color: #fff;
-        font-size: 24rpx;
-        line-height: 46rpx;
-        border-radius: 50rpx;
-        padding: 0 20rpx;
-        display: inline-block;
-    }
-}
-.brand-tag {
-  position: relative;
-  top: -2rpx;
-  display: inline;
-  line-height: 38rpx;
-  padding: 4rpx 8rpx;
-  border-radius: 4rpx;
-  margin-right: 8rpx;
-  background: red;
-  vertical-align: middle;
-  font-size: 18rpx;
-  color: #fff;
-  border: 2rpx solid transparent;
-
-  &.middle {
-    padding: 4rpx 8rpx;
-    border-radius: 8rpx;
-    font-size: 20rpx;
-    margin-right: 6rpx;
-  }
-}
-.base-tag {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 34rpx;
-  font-size: 18rpx;
-  padding: 0 8rpx;
-  color: #333;
-  border-radius: 4rpx;
-  background-color: #fff;
-  margin-right: 8rpx;
-  box-sizing: border-box;
-  margin-top: 8rpx;
-  border: 2rpx solid transparent;
-
-  &.middle {
-    height: 40rpx;
-    padding: 0 12rpx;
-    border-radius: 8rpx;
-    font-size: 20rpx;
-    margin-right: 16rpx;
-  }
-}
-.img-tag {
-  display: block;
-  height: 34rpx;
-  width: auto;
-  border-radius: 4rpx;
-  margin-right: 14rpx;
-  box-sizing: border-box;
-  margin-top: 8rpx;
-
-  &.middle {
-    height: 38rpx;
-    border-radius: 8rpx;
-    margin-right: 16rpx;
-  }
-}
-.goods-video-height{
-   height: 100%; 
-}
-:deep(.uni-video-bar) {
-    bottom: 34rpx !important;
-}
-
-:deep(.uni-video-cover) {
-    background: none;
-}
-
-:deep(.uni-video-cover-duration) {
-    display: none;
-}
-
-:deep(.uni-video-cover-play-button) {
-    border-radius: 50%;
-    border: 4rpx solid #fff;
-    width: 120rpx;
-    height: 120rpx;
-    background-size: 30%;
-}
-</style>
+	.arrow-left {
+		// background: rgba(153, 153, 153, 0.1);
+		background: rgba(255, 255, 255, 0.6);
+		border: 1rpx solid rgba(0, 0, 0, 0.1);
+	}
+
+	.media-mode {
+		.tab-item {
+			color: #fff;
+			font-size: 24rpx;
+			line-height: 46rpx;
+			border-radius: 50rpx;
+			padding: 0 20rpx;
+			display: inline-block;
+		}
+	}
+
+	.brand-tag {
+		position: relative;
+		top: -2rpx;
+		display: inline;
+		line-height: 38rpx;
+		padding: 4rpx 8rpx;
+		border-radius: 4rpx;
+		margin-right: 8rpx;
+		background: red;
+		vertical-align: middle;
+		font-size: 18rpx;
+		color: #fff;
+		border: 2rpx solid transparent;
+
+		&.middle {
+			padding: 4rpx 8rpx;
+			border-radius: 8rpx;
+			font-size: 20rpx;
+			margin-right: 6rpx;
+		}
+	}
+
+	.base-tag {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 34rpx;
+		font-size: 18rpx;
+		padding: 0 8rpx;
+		color: #333;
+		border-radius: 4rpx;
+		background-color: #fff;
+		margin-right: 8rpx;
+		box-sizing: border-box;
+		margin-top: 8rpx;
+		border: 2rpx solid transparent;
+
+		&.middle {
+			height: 40rpx;
+			padding: 0 12rpx;
+			border-radius: 8rpx;
+			font-size: 20rpx;
+			margin-right: 16rpx;
+		}
+	}
+
+	.img-tag {
+		display: block;
+		height: 34rpx;
+		width: auto;
+		border-radius: 4rpx;
+		margin-right: 14rpx;
+		box-sizing: border-box;
+		margin-top: 8rpx;
+
+		&.middle {
+			height: 38rpx;
+			border-radius: 8rpx;
+			margin-right: 16rpx;
+		}
+	}
+
+	.goods-video-height {
+		height: 100%;
+	}
+
+	:deep(.uni-video-bar) {
+		bottom: 34rpx !important;
+	}
+
+	:deep(.uni-video-cover) {
+		background: none;
+	}
+
+	:deep(.uni-video-cover-duration) {
+		display: none;
+	}
+
+	:deep(.uni-video-cover-play-button) {
+		border-radius: 50%;
+		border: 4rpx solid #fff;
+		width: 120rpx;
+		height: 120rpx;
+		background-size: 30%;
+	}
+</style>

src/addon/shop/components/diy/shop-goods-detail-bottom/index.vue

@@ -1,79 +1,47 @@
 <template>
-    <view class="overflow-hidden relative" v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
+    <view class="overflow-hidden relative"
+        v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
         <view v-if="diyStore.mode != 'decorate'" class="tab-bar-placeholder"></view>
-        <view :style="warpCss" class="border-[0] border-t-[2rpx] border-solid border-[#f5f5f5] w-[100%] flex justify-between pl-[32rpx] pr-[4rpx] box-border tab-bar z-10 items-center" :class="{'fixed left-0 bottom-0': diyStore.mode != 'decorate'}">
+        <view :style="warpCss"
+            class="border-[0] border-t-[2rpx] border-solid border-[#f5f5f5] w-[100%] flex justify-between pl-[32rpx] pr-[4rpx] box-border tab-bar z-10 items-center"
+            :class="{ 'fixed left-0 bottom-0': diyStore.mode != 'decorate' }">
             <view class="flex items-center">
-                <view v-if="menuContent.includes('index')" class="flex flex-col justify-center items-center mr-[38rpx]" @click="redirect({ url: '/addon/shop/pages/index', mode: 'reLaunch' })">
+                <view v-if="menuContent.includes('index')" class="flex flex-col justify-center items-center mr-[38rpx]"
+                    @click="redirect({ url: '/', mode: 'reLaunch' })">
                     <view class="nc-iconfont nc-icon-shouyeV6xx11 text-[36rpx]"></view>
                     <text class="text-[20rpx] mt-[10rpx]">首页</text>
                 </view>
-                <view v-if="menuContent.includes('service')" class="flex flex-col justify-center items-center mr-[38rpx]" @click="redirect({ url: '/app/pages/member/contact' })">
-                    <text class="nc-iconfont text-[36rpx] nc-icon-kefuV6xx-1 text-[#303133]"></text>
-                    <text class="text-[20rpx] mt-[10rpx]">客服</text>
-                </view>
-                <view v-if="menuContent.includes('cart')" class="flex flex-col justify-center items-center mr-[38rpx]" @click="redirect({ url: '/addon/shop/pages/goods/cart'})">
+                <view v-if="menuContent.includes('cart')" class="flex flex-col justify-center items-center mr-[38rpx]"
+                    @click="redirect({ url: '/addon/shop/pages/goods/cart' })">
                     <view class="iconfont icongouwuche2 text-[38rpx]"></view>
                     <text class="text-[20rpx] mt-[10rpx]">购物车</text>
                 </view>
-                <view v-if="menuContent.includes('collect')" class="flex flex-col justify-center items-center mr-[38rpx]" @click="collectFn">
-                    <text class="nc-iconfont text-[36rpx]" :class="{'text-[#ff0000] nc-icon-xihuanV6mm': isCollect, 'text-[#303133] nc-icon-guanzhuV6xx' : !isCollect}"></text>
+                <view v-if="menuContent.includes('collect')"
+                    class="flex flex-col justify-center items-center mr-[38rpx]" @click="collectFn">
+                    <text class="nc-iconfont text-[36rpx]"
+                        :class="{ 'text-[#ff0000] nc-icon-xihuanV6mm': isCollect, 'text-[#303133] nc-icon-guanzhuV6xx': !isCollect }"></text>
                     <text class="text-[20rpx] mt-[10rpx]">收藏</text>
                 </view>
-                <view v-if="menuContent.includes('share')" class="flex flex-col justify-center items-center mr-[38rpx]"  @click="openShareFn">
-                    <text class="nc-iconfont text-[36rpx] nc-icon-fenxiangV6xx text-[#303133]"></text>
-                    <text class="text-[20rpx] mt-[10rpx]">分享</text>
-                </view>
-                <!-- #ifdef MP-WEIXIN -->
-                <!-- <view>
-                    <nc-contact
-                        :send-message-title="sendMessageTitle"
-                        :send-message-path="sendMessagePath"
-                        :send-message-img="sendMessageImg">
-                        <view class="flex flex-col justify-center items-center mr-[38rpx]">
-                            <text class="nc-iconfont nc-icon-kefuV6xx-1 text-[36rpx]"></text>
-                            <text class="text-[20rpx] mt-[10rpx]">客服</text>
-                        </view>
-                    </nc-contact>
-                </view> -->
-                <!-- #endif -->
             </view>
-            <view class="flex flex-1" v-if="diyComponent.goods.status == 1">
-                <button v-if="diyComponent.goods.is_gift"
-                        class="!w-[420rpx] flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border"
-                >商品为赠品不可购买</button>
-                <template v-else-if="maxBuy > 0 || maxBuy == -1">
-                    <button
-                        v-if="diyGlobal?.goodsParameter?.type != 'newcomer_discount' && (diyComponent.goods.goods_type == 'real' || (diyComponent.goods.goods_type == 'virtual' && diyComponent.goods.virtual_receive_type != 'verify')) && diyComponent.cartIsShow"
-                        class="flex-1 !h-[70rpx] font-500 text-[26rpx] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border" @click="buyFn('join_cart')" :style="cartBtnStyle">
-                        {{ diyComponent.cartName }}
-                    </button>
-                    <button
-                        v-if="isShowSingleSku"
-                        class="flex-1 !h-[70rpx] font-500 text-[26rpx] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border" :style="buyBtnStyle"
-                        @click="buyFn('buy_now')">{{ diyComponent.buyName }}
-                    </button>
-                    <button v-else
-                            :style="{ width : (diyComponent.goods.goods_type == 'real' || (diyComponent.goods.goods_type == 'virtual' && diyComponent.goods.virtual_receive_type != 'verify')) ?  '200rpx' : '400rpx' + '!important'  }"
-                            class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
-                    >已售罄</button>
-                </template>
-                <button v-else-if="maxBuy == 0"
-                        :style="{ width : '420rpx' + '!important'  }"
-                        class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border"
-                >已达限购数量</button>
+            <view class="flex flex-1" v-if="diyComponent.productStatus == 1">
+                <button v-if="diyComponent.allStock > 0"
+                    class="flex-1 !h-[70rpx] font-500 text-[26rpx] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
+                    @click="buyFn('join_cart')" :style="cartBtnStyle">
+                    {{ diyComponent.cartName }}
+                </button>
+                <button v-else :style="{ width: false ? '200rpx' : '400rpx' + '!important' }"
+                    class="flex-1 !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border">已售罄</button>
             </view>
             <template v-else-if="diyStore.mode == 'decorate'">
                 <button v-if="diyComponent.cartIsShow"
-                    class="flex-1 !h-[70rpx] font-500 text-[26rpx] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border" :style="cartBtnStyle">
+                    class="flex-1 !h-[70rpx] font-500 text-[26rpx] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border"
+                    :style="cartBtnStyle">
                     {{ diyComponent.cartName }}
                 </button>
-                <button
-                    class="flex-1 !h-[70rpx] font-500 text-[26rpx] !m-0 !mr-[16rpx] leading-[70rpx] rounded-full remove-border" :style="buyBtnStyle"
-                    @click="buyFn('buy_now')">{{ diyComponent.buyName }}
-                </button>
             </template>
             <view class="flex flex-1" v-else>
-                <button class="w-[100%] !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">该商品已下架</button>
+                <button
+                    class="w-[100%] !h-[70rpx] font-500 text-[26rpx] !text-[#fff] !bg-[#ccc] !m-0 leading-[70rpx] rounded-full remove-border">该商品已下架</button>
             </view>
         </view>
         <!-- 装修时，防止点击 -->
@@ -107,7 +75,7 @@ const diyComponent = computed(() => {
                 sow_show_list: ''
             }
         }
-        return Object.assign({},obj,diyStore.value[props.index]);
+        return Object.assign({}, obj, diyStore.value[props.index]);
     } else {
         return Object.assign({}, props.component, useGoodsDetailStore().goodsDetail);
     }
@@ -119,11 +87,11 @@ const diyGlobal = computed(() => {
 
 const warpCss = computed(() => {
     let style = '';
-    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${ diyComponent.value.componentGradientAngle },${ diyComponent.value.componentStartBgColor },${ diyComponent.value.componentEndBgColor });`;
+    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
     else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
 
     if (diyComponent.value.componentBgUrl) {
-        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
+        style += `background-image:url('${img(diyComponent.value.componentBgUrl)}');`;
         style += 'background-size: cover;background-repeat: no-repeat;';
     }
 
@@ -134,30 +102,13 @@ const warpCss = computed(() => {
     return style;
 })
 
-// 立即购买按钮
-const buyBtnStyle = computed(() => {
-    let style = '';
-    if (diyComponent.value.buyStyle.startColor && diyComponent.value.buyStyle.endColor) style += `background:linear-gradient(${ diyComponent.value.buyStyle.gradientAngle },${ diyComponent.value.buyStyle.startColor },${ diyComponent.value.buyStyle.endColor });`;
-    else style += 'background-color:' + (diyComponent.value.buyStyle.startColor || diyComponent.value.buyStyle.endColor) + ';';
-
-    if (diyComponent.value.buyStyle.textColor) style += 'color:' + diyComponent.value.buyStyle.textColor+';';
-    if (diyComponent.value.buyStyle.fontSize) style += 'font-size:' + diyComponent.value.buyStyle.fontSize * 2 + 'rpx;';
-
-    if (diyComponent.value.goods.goods_type == 'real' || (diyComponent.value.goods.goods_type == 'virtual' && diyComponent.value.goods.virtual_receive_type != 'verify')){
-        style += 'width:200rpx !important;';
-    }else{
-        style += 'width:400rpx !important;';
-    }
-    return style;
-})
-
 // 加入购物车按钮
 const cartBtnStyle = computed(() => {
     let style = '';
-    if (diyComponent.value.cartStyle.startColor && diyComponent.value.cartStyle.endColor) style += `background:linear-gradient(${ diyComponent.value.cartStyle.gradientAngle }, ${ diyComponent.value.cartStyle.startColor },${ diyComponent.value.cartStyle.endColor });`;
+    if (diyComponent.value.cartStyle.startColor && diyComponent.value.cartStyle.endColor) style += `background:linear-gradient(${diyComponent.value.cartStyle.gradientAngle}, ${diyComponent.value.cartStyle.startColor},${diyComponent.value.cartStyle.endColor});`;
     else style += 'background-color:' + (diyComponent.value.cartStyle.startColor || diyComponent.value.cartStyle.endColor) + ';';
 
-    if (diyComponent.value.cartStyle.textColor) style += 'color:' + diyComponent.value.cartStyle.textColor+';';
+    if (diyComponent.value.cartStyle.textColor) style += 'color:' + diyComponent.value.cartStyle.textColor + ';';
     if (diyComponent.value.cartStyle.fontSize) style += 'font-size:' + diyComponent.value.cartStyle.fontSize * 2 + 'rpx;';
     return style;
 })
@@ -233,7 +184,7 @@ const isShowSingleSku = computed(() => {
 })
 
 const buyFn = (type: any) => {
-    useGoodsDetailStore().setGoodsDetail({isOpenSkuBuy: true, skuBuyType: type});
+    useGoodsDetailStore().setGoodsDetail({ isOpenSkuBuy: true, skuBuyType: type });
 }
 
 onMounted(() => {
@@ -254,7 +205,7 @@ onMounted(() => {
         watch(
             () => diyComponent.value,
             (newValue, oldValue) => {
-                
+
             }
         )
         watch(
@@ -273,7 +224,7 @@ onMounted(() => {
     goodsMaxBuy(diyComponent.value);
 });
 
-const menuContent = ref([])
+const menuContent = ref<any>([])
 const initFn = () => {
     isCollect.value = diyComponent.value.goods.is_collect;
     sendMessageTitle.value = diyComponent.value.goods.goods_name
@@ -281,16 +232,10 @@ const initFn = () => {
     if (diyComponent.value.type) {
         sendMessagePath.value += '&type=' + diyComponent.value.type;
     }
-    sendMessageImg.value = img(diyComponent.value.goods.goods_cover_thumb_mid) 
+    sendMessageImg.value = img(diyComponent.value.goods.goods_cover_thumb_mid)
     menuContent.value = (typeof diyComponent.value?.menuContent == 'object') ? diyComponent.value?.menuContent : diyComponent.value?.menuContent.split(',');
 }
 
-/************* 分享海报-start **************/
-const openShareFn = () => {
-    useGoodsDetailStore().setGoodsDetail({isOpenSharePoster: true});
-}
-/************* 分享海报-end **************/
-
 const refresh = () => {
     menuContent.value = (typeof diyComponent.value?.menuContent == 'object') ? diyComponent.value?.menuContent : diyComponent.value?.menuContent.split(',');
 }
@@ -300,6 +245,7 @@ const refresh = () => {
     padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx);
     padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx);
 }
+
 .tab-bar {
     padding-top: 16rpx;
     padding-bottom: calc(constant(safe-area-inset-bottom) + 16rpx);

src/addon/shop/components/diy/shop-goods-detail-evaluate/index.vue

@@ -1,35 +1,10 @@
 <template>
     <view :style="warpCss" class="overflow-hidden" v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
-        <view v-if="diyComponent.evaluate_is_show" class="card-template">
-            <view class="flex items-center justify-between min-h-[40rpx]" :class="{'mb-[30rpx]': evaluate && evaluate.list && evaluate.list.length}">
+        <view  class="card-template">
+            <view class="flex items-center justify-between min-h-[40rpx]">
                 <text class="title !mb-[0]">宝贝评价({{ evaluate.count }})</text>
-                <view v-if="evaluate.count" class="h-[40rpx] flex items-center" @click="toLink(diyComponent.goods_id)">
-                    <text class="text-[24rpx] text-[var(--text-color-light9)]">查看全部</text>
-                    <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light9)]"></text>
-                </view>
                 <text v-if="!evaluate.count" class="text-[24rpx] text-[var(--text-color-light6)]">暂无评价</text>
             </view>
-            <view>
-                <view :class="{'pb-[34rpx]': index != (evaluate.list.length-1)}" v-for="(item, index) in evaluate.list" :key="index">
-                    <view class="flex items-center w-full">
-                        <u-avatar :default-url="img('static/resource/images/default_headimg.png')" :src="img(item.member_head)" :size="'50rpx'" leftIcon="none" />
-                        <text class="ml-[10rpx] text-[28rpx] text-[#333]">{{ item.member_name }}</text>
-                    </view>
-                    <view class="flex justify-between w-full mt-[16rpx]">
-                        <view class="flex-1 w-[540rpx] text-[26rpx] text-[#333] max-h-[72rpx] leading-[36rpx] multi-hidden mr-[50rpx]">{{ item.content }}</view>
-                        <view class="w-[80rpx] shrink-0">
-                            <u--image v-if="item.image_mid && item.image_mid.length" width="80rpx"
-                                        height="80rpx" radius="var(--goods-rounded-mid)"
-                                        :src="img(item.image_mid[0])" model="aspectFill"
-                                        @click="imgListPreview(item.images[0])">
-                                <template #error>
-                                    <u-icon name="photo" color="#999" size="50"></u-icon>
-                                </template>
-                            </u--image>
-                        </view>
-                    </view>
-                </view>
-            </view>
         </view>
     </view>
 </template>
@@ -76,7 +51,7 @@ const warpCss = computed(() => {
 })
 
 // 获取评价
-const evaluate = ref({
+const evaluate = ref<any>({
     count: 0
 })
 
@@ -150,7 +125,7 @@ onMounted(() => {
             { immediate: true }
         )
         // 获取评价
-        getEvaluateListFn();
+        // getEvaluateListFn();
     }
 });
 </script>

src/addon/shop/components/diy/shop-goods-detail-purchase-service/index.vue

@@ -1,321 +1,182 @@
 <template>
     <!-- 商品服务 -->
-    <view :style="warpCss" class="overflow-hidden relative" v-if="diyComponent && diyComponent.goods && Object.keys(diyComponent.goods).length">
+    <!--  -->
+    <view :style="warpCss" class="overflow-hidden relative" v-if="
+        diyComponent &&
+        diyComponent.goods &&
+        Object.keys(diyComponent.goods).length
+    ">
         <view class="card-template" v-if="serviceConfig && serviceConfig.length && isShowTemplate">
-            <view @click="servicesDataShow = !servicesDataShow" v-if="diyComponent.service && diyComponent.service.length && serviceConfig.includes('goods_service')" class="card-template-item">
-                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">服务</text>
-                <view class="text-[#343434] text-[26rpx] leading-[30rpx] font-400 truncate ml-auto">{{ diyComponent.service[0].service_name }}</view>
-                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+            <view v-if=" serviceConfig.includes('goods_service')" class="card-template-item">
+                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">商品编号</text>
+                <view class="diyComponenttext-[#343434] text-[26rpx] leading-[30rpx] font-400 truncate ml-auto">
+                    {{ diyComponent.productNo }}</view>
             </view>
-            <view @click="buyFn" v-if="diyComponent.goodsSpec && diyComponent.goodsSpec.length && serviceConfig.includes('spec_select')" class="card-template-item">
-                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">已选</text>
-                <view class="ml-auto text-right truncate flex-1 text-[#343434] text-[26rpx] leading-[30rpx] font-400">{{ diyComponent.sku_spec_format }}</view>
-                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
+            <view class="card-template-item"
+                v-if=" serviceConfig.includes('delivery_info')">
+                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">规格/型号</text>
+                <view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
+                    {{ diyComponent.specificationsCode }}</view>
             </view>
-            <view class="card-template-item" @click="distributionDataOpen"
-                    v-if="diyComponent.goods.goods_type == 'real'&&diyComponent.goods.delivery_type_list&&diyComponent.goods.delivery_type_list.length && serviceConfig.includes('delivery_info')">
-                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0">配送</text>
-                <view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">{{ diyComponent.goods.delivery_type_list[selectDeliveryType].name }}</view>
-                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
-            </view>
-            <view @click="couponListShow = true" v-if="couponList.length && serviceConfig.includes('coupons')" class="card-template-item">
-                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">领券</text>
-                <view class="ml-auto flex-1 flex-nowrap flex items-center overflow-hidden h-[44rpx] content-between">
-                    <template v-for="(item, index) in couponList" :key="index">
-                        <text v-if="index < 3"
-                                class="tag-item whitespace-nowrap border-[2rpx] px-[6rpx] h-[40rpx] border-solid border-[var(--primary-color)] text-[var(--primary-color)] mt-[4rpx]"
-                                :class="{'mr-[12rpx]': couponList.length != (index+1) && index < 2, 'ml-auto': index == 0}">{{ item.title }}</text>
-                    </template>
-                </view>
-                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
-            </view>
-            <view class="card-template-item" @click="manjianOpenFn" v-if="Object.keys(manjianData).length && serviceConfig.includes('activity')">
-                <text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">优惠</text>
-                <view class="ml-auto flex-1 flex-nowrap flex items-center overflow-hidden h-[44rpx] justify-end">
-                    <view class="bg-[var(--primary-color-light)] text-[var(--primary-color)] rounded-[6rpx]	text-[22rpx] flex items-center justify-center w-[86rpx] h-[34rpx] mr-[6rpx]">满减送</view>
-                    <view class="truncate max-w-[430rpx] text-[26rpx]">{{ manjianData.name }}</view>
-                </view>
-                <text class="nc-iconfont nc-icon-youV6xx text-[26rpx] text-[var(--text-color-light6)] ml-[8rpx]"></text>
-            </view>
-        </view>
-        <!-- 服务 -->
-        <view @touchmove.prevent.stop>
-            <u-popup class="popup-type" :show="servicesDataShow" @close="servicesDataShow = false">
-                <view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
-                    <view class="title">商品服务</view>
-                    <scroll-view class="h-[520rpx]" scroll-y="true">
-                        <view class="pl-[22rpx] pb-[28rpx] pr-[37rpx]">
-                            <view class="flex mb-[28rpx]" v-for="(item, index) in diyComponent.service">
-                                <image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]" :src="img(item.image || 'addon/shop/icon_service.png')" mode="aspectFit" />
-                                <view class="flex-1">
-                                    <view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[12rpx]">{{ item.service_name }}</view>
-                                    <view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)]">{{ item.desc }}</view>
-                                </view>
-                            </view>
-                        </view>
-                    </scroll-view>
-                </view>
-            </u-popup>
-        </view>
-        <!-- 配送 -->
-        <view @touchmove.prevent.stop>
-            <u-popup class="popup-type" :show="distributionDataShow" @close="distributionDataShow = false">
-                <view class="min-h-[360rpx] popup-common" @touchmove.prevent.stop>
-                    <view class="title">配送方式</view>
-                    <scroll-view class="h-[520rpx]" scroll-y="true">
-                        <view class="px-[var(--popup-sidebar-m)]">
-                            <view class="flex mb-[40rpx]" v-for="(item, index) in diyComponent.goods.delivery_type_list" @click="distributionListFn(item,index)">
-                                <image class="mt-[4rpx] w-[32rpx] h-[32rpx] mr-[14rpx]" :src="img('addon/shop/icon_service.png')" mode="aspectFit" />
-                                <view class="flex-1">
-                                    <view class="text-[30rpx] leading-[36rpx] text-[#333] mb-[8rpx]">{{ item.name }}</view>
-                                    <view class="text-[24rpx] leading-[36rpx] text-[var(--text-color-light9)]">{{ item.desc }}</view>
-                                </view>
-                            </view>
-                        </view>
-                    </scroll-view>
-                </view>
-            </u-popup>
+            <view v-if="serviceConfig.includes('coupons')"
+				class="card-template-item">
+				<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">UPC(69)条码</text>
+				<view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
+                    {{ diyComponent.upcBarcode || '-' }}</view>
+			</view>
+            <view v-if="serviceConfig.includes('activity')"
+				class="card-template-item">
+				<text class="text-[#333] text-[26rpx] leading-[30rpx] font-400 shrink-0 mr-[20rpx]">供货时间</text>
+				<view class="ml-auto flex items-center text-[#343434] text-[26rpx] leading-[30rpx] font-400">
+                    {{ diyComponent.deliveryTime || '-' }}</view>
+			</view>
         </view>
-        <!-- 优惠券 -->
-        <view @touchmove.prevent.stop>
-            <u-popup class="popup-type" :show="couponListShow" @close="couponListShow = false">
-                <view class="min-h-[480rpx] popup-common" @touchmove.prevent.stop>
-                    <view class="title">优惠券</view>
-                    <scroll-view class="h-[520rpx]" scroll-y="true">
-                        <view class="px-[32rpx]">
-                            <view class="mb-[30rpx] flex items-center border-[2rpx] border-solid border-[rgba(0,0,0,.1)] rounded-[var(--rounded-small)]"
-                                v-for="(item, index) in couponList" :key="index">
-                                <view class="flex flex-col items-center my-[20rpx] w-[200rpx] border-0 border-r-[2rpx] border-dashed border-[rgba(0,0,0,.1)]">
-                                    <view class="text-xs price-font">
-                                        <text class="text-[28rpx]">￥</text>
-                                        <text class="text-[48rpx]">{{ Number(item.price) }}</text>
-                                    </view>
-                                    <text class="text-xs mt-[12rpx]">{{ Number(item.min_condition_money) ? ('满' + Number(item.min_condition_money) + '元可用') : '无门槛' }}</text>
-                                </view>
-                                <view class="ml-[20rpx] flex-1 flex flex-col py-[20rpx]">
-                                    <text class="text-xs font-500">{{ item.title }}</text>
-                                    <text class="text-xs text-[var(--text-color-light6)] mt-[12rpx]">{{ item.valid_type == 1 && ('领取之日起' + item.length + '天内有效') || item.valid_type == 2 && ('领取之日起至' + item.valid_end_time) }}</text>
-                                </view>
-                                <text v-if="item.btnType === 'collecting'" class="bg-[var(--primary-color)] mr-[20rpx] w-[106rpx] box-border text-center text-[#fff] h-[50rpx] text-[22rpx] px-[20rpx] leading-[50rpx] rounded-[100rpx]" @click="getCouponFn(item, index)">领取</text>
-                                <text v-else class="!bg-[var(--primary-help-color4)] mr-[20rpx] text-[#fff] mr-[20rpx] h-[50rpx] text-[22rpx] px-[20rpx] leading-[50rpx] rounded-[100rpx]">{{ item.btnType === 'collected' ? '已领完' : '已领取' }}</text>
-                            </view>
-                        </view>
-                    </scroll-view>
-                    <view class="btn-wrap">
-                        <button class="primary-btn-bg btn" @click="couponListShow = false">确定</button>
-                    </view>
-                </view>
-            </u-popup>
-        </view>
-        <ns-goods-manjian ref="manjianShowRef"></ns-goods-manjian>
-        <!-- 装修时，防止点击 -->
-        <view v-if="diyStore.mode == 'decorate'" class="absolute z-10 top-0 right-0 bottom-0 left-0"></view>
     </view>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, onMounted, nextTick } from 'vue';
-import { img } from '@/utils/common';
-import useDiyStore from '@/app/stores/diy';
-import { getShopCouponList, getCoupon } from '@/addon/shop/api/coupon';
-import { useLogin } from '@/hooks/useLogin'
-import useMemberStore from '@/stores/member'
-import { getManjian } from '@/addon/shop/api/goods';
-import nsGoodsManjian from '@/addon/shop/components/ns-goods-manjian/ns-goods-manjian.vue';
-import useGoodsDetailStore from '@/addon/shop/stores/goodsDetail'
+import { ref, computed, watch, onMounted, nextTick } from "vue";
+import { img } from "@/utils/common";
+import useDiyStore from "@/app/stores/diy";
+import useGoodsDetailStore from "@/addon/shop/stores/goodsDetail";
 
-const props = defineProps(['component', 'index', 'value', 'global']);
+const props = defineProps(["component", "index", "value", "global"]);
 const diyStore = useDiyStore();
-const emits = defineEmits(['update:componentIsShow']); //商品数据加载完成之后触发
-
-const servicesDataShow = ref<boolean>(false)
-const distributionDataShow = ref<boolean>(false) //配送
-const couponListShow = ref<boolean>(false) //优惠券
-const manjianShowRef: any = ref(null); //满减送
+const emits = defineEmits(["update:componentIsShow"]); //商品数据加载完成之后触发
 
-// 会员信息
-const memberStore = useMemberStore()
-const userInfo = computed(() => memberStore.info)
+onMounted(() => {
+    refresh();
+    isGoodsPropertyTemp();
+    // 装修模式下刷新
+    if (diyStore.mode == "decorate") {
+        watch(
+            () => diyComponent.value,
+            (newValue, oldValue) => {
+                if (
+                    newValue &&
+                    newValue.componentName == "ShopGoodsDetailPurchaseService"
+                ) {
+                    nextTick(() => {
+                        refresh();
+                    });
+                }
+            }
+        );
+    } else {
+        watch(
+            () => diyComponent.value,
+            (newValue, oldValue) => {
+                if (
+                    newValue &&
+                    newValue.componentName == "ShopGoodsDetailPurchaseService"
+                ) {
+                    emits("update:componentIsShow", isShowTemplate.value);
+                }
+            },
+            { immediate: true }
+        );
+    }
+});
 
 const diyComponent = computed(() => {
-    if (diyStore.mode == 'decorate') {
+    if (diyStore.mode == "decorate") {
         const obj = {
-            service: [{service_name: '24小时配送'}],
+            service: [{ service_name: "24小时配送" }],
             goods: {
                 delivery_type_list: [
                     {
-                        name: '物流配送'
-                    }
-                ]
+                        name: "物流配送",
+                    },
+                ],
             },
-            goodsSpec: ['红色', '小'],
-            sku_spec_format: '红色,小',
-        }
+            goodsSpec: ["红色", "小"],
+            sku_spec_format: "红色,小",
+            productNo:'000051164',
+            specificationsCode:'柯尼卡美能达TN328C',
+            upcBarcode:'xxxxxxxxx',
+            deliveryTime:'2026-01-01'
+        };
         return Object.assign({}, obj, diyStore.value[props.index]);
     } else {
-        return Object.assign({}, props.component, useGoodsDetailStore().goodsDetail);
+        return Object.assign(
+            {},
+            props.component,
+            useGoodsDetailStore().goodsDetail
+        );
     }
-})
+});
 
 const warpCss = computed(() => {
-    let style = '';
-    style += 'position:relative;';
-    if (diyComponent.value.componentStartBgColor && diyComponent.value.componentEndBgColor) style += `background:linear-gradient(${ diyComponent.value.componentGradientAngle },${ diyComponent.value.componentStartBgColor },${ diyComponent.value.componentEndBgColor });`;
-    else style += 'background-color:' + (diyComponent.value.componentStartBgColor || diyComponent.value.componentEndBgColor) + ';';
+    let style = "";
+    style += "position:relative;";
+    if (
+        diyComponent.value.componentStartBgColor &&
+        diyComponent.value.componentEndBgColor
+    )
+        style += `background:linear-gradient(${diyComponent.value.componentGradientAngle},${diyComponent.value.componentStartBgColor},${diyComponent.value.componentEndBgColor});`;
+    else
+        style +=
+            "background-color:" +
+            (diyComponent.value.componentStartBgColor ||
+                diyComponent.value.componentEndBgColor) +
+            ";";
 
     if (diyComponent.value.componentBgUrl) {
-        style += `background-image:url('${ img(diyComponent.value.componentBgUrl) }');`;
-        style += 'background-size: cover;background-repeat: no-repeat;';
+        style += `background-image:url('${img(
+            diyComponent.value.componentBgUrl
+        )}');`;
+        style += "background-size: cover;background-repeat: no-repeat;";
     }
 
-    if (diyComponent.value.topRounded) style += 'border-top-left-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
-    if (diyComponent.value.topRounded) style += 'border-top-right-radius:' + diyComponent.value.topRounded * 2 + 'rpx;';
-    if (diyComponent.value.bottomRounded) style += 'border-bottom-left-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
-    if (diyComponent.value.bottomRounded) style += 'border-bottom-right-radius:' + diyComponent.value.bottomRounded * 2 + 'rpx;';
+    if (diyComponent.value.topRounded)
+        style +=
+            "border-top-left-radius:" + diyComponent.value.topRounded * 2 + "rpx;";
+    if (diyComponent.value.topRounded)
+        style +=
+            "border-top-right-radius:" + diyComponent.value.topRounded * 2 + "rpx;";
+    if (diyComponent.value.bottomRounded)
+        style +=
+            "border-bottom-left-radius:" +
+            diyComponent.value.bottomRounded * 2 +
+            "rpx;";
+    if (diyComponent.value.bottomRounded)
+        style +=
+            "border-bottom-right-radius:" +
+            diyComponent.value.bottomRounded * 2 +
+            "rpx;";
     return style;
-})
+});
 
 // 判断商品属性模块是否展示
 const isShowTemplate = ref(false);
 const isGoodsPropertyTemp = () => {
     isShowTemplate.value = false;
     if (
-        (diyComponent.value.service && diyComponent.value.service.length && serviceConfig.value.includes('goods_service')) ||
-        (diyComponent.value.goodsSpec && diyComponent.value.goodsSpec.length && serviceConfig.value.includes('spec_select')) ||
-        (diyComponent.value.goods.goods_type == 'real' && diyComponent.value.goods.delivery_type_list && diyComponent.value.goods.delivery_type_list.length && serviceConfig.value.includes('delivery_info')) || 
-        (couponList.value && couponList.value.length && serviceConfig.value.includes('coupons')) || 
-        (Object.keys(manjianData.value).length && serviceConfig.value.includes('activity')) || diyStore.mode == 'decorate'
-        ) {
+        (diyComponent.value.productNo &&
+            serviceConfig.value.includes("goods_service")) ||
+        (diyComponent.value.goodsSpec &&
+            diyComponent.value.goodsSpec.length &&
+            serviceConfig.value.includes("spec_select")) ||
+        (diyComponent.value.goods.goods_type == "real" &&
+            diyComponent.value.goods.delivery_type_list &&
+            diyComponent.value.goods.delivery_type_list.length &&
+            serviceConfig.value.includes("delivery_info"))
+    ) {
         isShowTemplate.value = true;
     }
-    emits('update:componentIsShow', isShowTemplate.value)
-}
-
-// 优惠券
-const couponList = ref([]);
-const getShopCouponListFn = () => {
-    getShopCouponList({
-        category_id: diyComponent.value?.goods?.goods_category || '',
-        goods_id: diyComponent.value.goods_id || ''
-    }).then((res: any) => {
-        couponList.value = res.data.data.map((el: any) => {
-            if (el.sum_count != -1 && el.receive_count === el.sum_count) {
-                el.btnType = 'collected'//已领完
-            }
-            if (!userInfo.value) {
-                el.btnType = 'collecting'//领用
-            } else {
-                if (el.is_receive && el.limit_count === el.member_receive_count) {
-                    el.btnType = 'using'//去使用
-                } else {
-                    el.btnType = 'collecting'//领用
-                }
-            }
-            return el
-        });
-        isGoodsPropertyTemp()
-    })
-}
-
-// 领取优惠券
-const getCouponFn = (data: any, index: any) => {
-    // 检测是否登录
-    if (!userInfo.value) {
-        useLogin().setLoginBack({
-            url: '/addon/shop/pages/goods/detail',
-            param: { sku_id: diyComponent.value.sku_id, type: diyComponent.value.type }
-        })
-        return false
-    }
-    getCoupon({
-        coupon_id: data.id || '',
-        number: 1,
-    }).then(res => {
-        getShopCouponListFn();
-    })
-}
-
-const manjianOpenFn = () => {
-    manjianShowRef.value.open(manjianData.value);
-}
-
-// 获取满减信息
-let manjianData = ref({})
-const getManjianInfo = () => {
-    getManjian({
-        goods_id: diyComponent.value.goods_id || '',
-        sku_id: diyComponent.value.sku_id || ''
-    }).then((res: any) => {
-        if (Object.keys(res.data).length) {
-            manjianData.value.condition_type = res.data.condition_type;
-            manjianData.value.rule_json = res.data.rule_json;
-            manjianData.value.name = res.data.manjian_name;
-        }
-        isGoodsPropertyTemp()
-    })
-}
-
-/************ 选择配送方式-start ****************/
-const selectDeliveryType = ref(0);
-const distributionDataOpen = (() => {
-    distributionDataShow.value = true;
-});
-const distributionListFn = ((data: any, index: any) => {
-    selectDeliveryType.value = index;
-    distributionDataShow.value = false;
-    uni.setStorageSync('distributionType', data.name);
-});
-/************ 选择配送方式-end ****************/
-
-const buyFn = (type: any) => {
-    useGoodsDetailStore().setGoodsDetail({isOpenSkuBuy: true, skuBuyType: type});
-}
-
-onMounted(() => {
-    refresh()
-    // 装修模式下刷新
-    if (diyStore.mode == 'decorate') {
-        couponList.value = [
-            { title: '满20减5' },
-            { title: '满10减2' }
-        ]
-        manjianData.value = {
-            name: '满100送积分'
-        }
-        isGoodsPropertyTemp()
-        watch(
-            () => diyComponent.value,
-            (newValue, oldValue) => {
-                if (newValue && newValue.componentName == 'ShopGoodsDetailPurchaseService') {
-                    nextTick(() => {
-                        refresh()
-                    })
-                }
-            }
-        )
-    } else {
-        // 获取优惠券列表
-        getShopCouponListFn();
-        getManjianInfo();
-        watch(
-            () => diyComponent.value,
-            (newValue, oldValue) => {
-                if (newValue && newValue.componentName == 'ShopGoodsDetailPurchaseService') {
-                    emits('update:componentIsShow', isShowTemplate.value)
-                }
-            },
-            { immediate: true }
-        )
-    }
-});
-
-const serviceConfig = ref([])
-const refresh = () =>{
-    serviceConfig.value = (typeof diyComponent.value?.serviceConfig == 'object') ? diyComponent.value?.serviceConfig : diyComponent.value?.serviceConfig.split(',');
-}
+    emits("update:componentIsShow", isShowTemplate.value);
+};
+
+const serviceConfig = ref<any>([]);
+const refresh = () => {
+    serviceConfig.value =
+        typeof diyComponent.value?.serviceConfig == "object"
+            ? diyComponent.value?.serviceConfig
+            : diyComponent.value?.serviceConfig.split(",");
+};
 </script>
 <style lang="scss" scoped>
-.card-template{
+.card-template {
     background-color: transparent !important;
     border-radius: 0 !important;
 }

src/addon/shop/hooks/useDiyGoodsDetail.ts

@@ -27,9 +27,7 @@ export function useDiyGoodsDetail(params: any = {}) {
 
     // 商品详情参数
     const goodsDetailParameter: any = reactive({
-        goods_id: '',
-        sku_id: '',
-        type: ''  // 来源营销活动类型，例如：discount：限时折扣，newcomer_discount：新人价
+        goodsId: '',
     });
 
     const getLoading = () => {
@@ -49,7 +47,7 @@ export function useDiyGoodsDetail(params: any = {}) {
     const pageStyle = () => {
         let style = '';
         if (data.value.global.pageStartBgColor) {
-            if (data.value.global.pageStartBgColor && data.value.global.pageEndBgColor) style += `background:linear-gradient(${ data.value.global.pageGradientAngle },${ data.value.global.pageStartBgColor },${ data.value.global.pageEndBgColor });`;
+            if (data.value.global.pageStartBgColor && data.value.global.pageEndBgColor) style += `background:linear-gradient(${data.value.global.pageGradientAngle},${data.value.global.pageStartBgColor},${data.value.global.pageEndBgColor});`;
             else style += 'background-color:' + data.value.global.pageStartBgColor + ';';
         }
         if (data.value.global.bottomTabBar && data.value.global.bottomTabBar.isShow) {
@@ -58,11 +56,11 @@ export function useDiyGoodsDetail(params: any = {}) {
             style += 'min-height:calc(100vh);';
         }
         if (data.value.global.bgUrl) {
-            style += `background-image:url('${ img(data.value.global.bgUrl) }');`;
+            style += `background-image:url('${img(data.value.global.bgUrl)}');`;
         }
 
         if (data.value.global.bgHeightScale) {
-            style += `background-size: 100% ${ data.value.global.bgHeightScale }%;`;
+            style += `background-size: 100% ${data.value.global.bgHeightScale}%;`;
         }
         return style;
     };
@@ -83,9 +81,7 @@ export function useDiyGoodsDetail(params: any = {}) {
             }
             // #endif
 
-            goodsDetailParameter.goods_id = option.goods_id || '';
-            goodsDetailParameter.sku_id = option.sku_id || '';
-            goodsDetailParameter.type = option.type || '';
+            goodsDetailParameter.goodsId = option.goodsId || '';
 
             id.value = option.id || '';
             if (name.value == '') name.value = option.name || '';
@@ -112,7 +108,7 @@ export function useDiyGoodsDetail(params: any = {}) {
             // 装修模式
             if (diyStore.mode == 'decorate') {
                 diyStore.init();
-            } else if(id.value){
+            } else if (id.value) {
                 // 用于商品详情页预览
                 getDiyInfo({
                     id: id.value,
@@ -129,46 +125,51 @@ export function useDiyGoodsDetail(params: any = {}) {
                 })
 
             } else {
-                getGoodsDetail({
-                    goods_id: goodsDetailParameter.goods_id || '',
-                    sku_id: goodsDetailParameter.sku_id || '',
-                    type: goodsDetailParameter.type || ''  // 来源营销活动类型，例如：discount：限时折扣，newcomer_discount：新人价
-                }).then((res: any) => {
-                    if (!res.data.goods || JSON.stringify(res.data) === '[]') {
-                        let goBackParameter = {
-                            url: '/addon/shop/pages/index',
-                            title: '找不到该商品',
-                            mode: 'reLaunch'
-                        };
-                        goback(goBackParameter)
-                        return false
-                    }
-
-                    Object.assign(requestData, res.data.diy_detail_info);
-                    handleComponentDataFn()
-                    // 商品详情数据处理
-                    diyData.global.goodsParameter = {}
-                    diyData.global.goodsParameter.goods_id = goodsDetailParameter.goods_id
-                    diyData.global.goodsParameter.sku_id = goodsDetailParameter.sku_id
-                    diyData.global.goodsParameter.type = goodsDetailParameter.type
-                    // 组装商品组件数据
-                    assembleGoodsDetailData(diyData, res.data)
-
-                    // 商品分享
-                    requestData.share = {
-                        title: res.data.goods.goods_name,
-                        desc: res.data.goods.sub_title,
-                        url: res.data.goods.goods_cover_thumb_mid
-                    }
-
-                    loading.value = false;
-                    if (callback) callback(requestData)
+                getGoodsDetail(goodsDetailParameter.goodsId).then((res1: any) => {
+                    getDiyInfo({
+                        type: 3
+                    }).then((res2: any) => {
+                        Object.assign(requestData, res2.data);
+                        handleComponentDataFn()
+                        loading.value = false;
+                        // 组装商品组件数据
+                        assembleGoodsDetailData(diyData, res1.data)
+                    })
+                    // if (!res.data.goods || JSON.stringify(res.data) === '[]') {
+                    //     let goBackParameter = {
+                    //         url: '/addon/shop/pages/index',
+                    //         title: '找不到该商品',
+                    //         mode: 'reLaunch'
+                    //     };
+                    //     goback(goBackParameter)
+                    //     return false
+                    // }
+
+                    // Object.assign(requestData, res.data.diy_detail_info);
+                    // handleComponentDataFn()
+                    // // 商品详情数据处理
+                    // diyData.global.goodsParameter = {}
+                    // diyData.global.goodsParameter.goods_id = goodsDetailParameter.goods_id
+                    // diyData.global.goodsParameter.sku_id = goodsDetailParameter.sku_id
+                    // diyData.global.goodsParameter.type = goodsDetailParameter.type
+                    // // 组装商品组件数据
+                    // assembleGoodsDetailData(diyData, res.data)
+
+                    // // 商品分享
+                    // requestData.share = {
+                    //     title: res.data.goods.goods_name,
+                    //     desc: res.data.goods.sub_title,
+                    //     url: res.data.goods.goods_cover_thumb_mid
+                    // }
+
+                    // loading.value = false;
+                    // if (callback) callback(requestData)
 
                 });
             }
         })
     }
-    
+
     // 处理组件数据
     const handleComponentDataFn = () => {
         if (requestData.value) {
@@ -176,26 +177,20 @@ export function useDiyGoodsDetail(params: any = {}) {
             diyData.title = requestData.title;
 
             let sources = JSON.parse(requestData.value); // todo diy的结构应该后台处理好，前端就不需要再转换了
-
             diyData.global = sources.global;
-            // 用于区分微页面之间弹窗的id
-            if (diyData.global.popWindow && diyData.global.popWindow.show) {
-                diyData.global.popWindow.id = requestData.id;
-            }
-            
             diyData.value = sources.value;
             diyData.value.forEach((item: any, index) => {
-
-                const detailComponent = ['ShopGoodsDetailBottom','ShopGoodsDetailDesc','ShopGoodsDetailAttr','ShopGoodsDetailEvaluate','ShopGoodsDetailSow','ShopGoodsDetailPurchaseService','ShopGoodsDetailBasicInfo']
-                if(detailComponent.indexOf(item.componentName) > -1){
-                    item.componentIsShow = false // 是否显示
-                }else{
-                    item.componentIsShow = true // 是否显示
-                }
+                item.componentIsShow = true // 是否显示
+                // const detailComponent = ['ShopGoodsDetailBottom','ShopGoodsDetailDesc','ShopGoodsDetailAttr','ShopGoodsDetailEvaluate','ShopGoodsDetailSow','ShopGoodsDetailPurchaseService','ShopGoodsDetailBasicInfo']
+                // if(detailComponent.indexOf(item.componentName) > -1){
+                //     item.componentIsShow = false // 是否显示
+                // }else{
+                //     item.componentIsShow = true // 是否显示
+                // }
 
                 item.pageStyle = '';
                 if (item.pageStartBgColor) {
-                    if (item.pageStartBgColor && item.pageEndBgColor) item.pageStyle += `background:linear-gradient(${ item.pageGradientAngle },${ item.pageStartBgColor },${ item.pageEndBgColor });`;
+                    if (item.pageStartBgColor && item.pageEndBgColor) item.pageStyle += `background:linear-gradient(${item.pageGradientAngle},${item.pageStartBgColor},${item.pageEndBgColor});`;
                     else item.pageStyle += 'background-color:' + item.pageStartBgColor + ';';
                 }
 
@@ -208,6 +203,7 @@ export function useDiyGoodsDetail(params: any = {}) {
                     item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';';
                 }
             });
+            console.log(diyData.value,'look')
 
             // 控制自定义头部是否出现 | 微信小程序
             isShowTopTabbar.value = diyData.value.some((item: any) => {
@@ -269,17 +265,27 @@ export function useDiyGoodsDetail(params: any = {}) {
 
     const assembleGoodsDetailData = (componentData: any, res: any) => {
         let data = deepClone(res)
-        data.goods.goods_image = data.goods.goods_image.split(',');
-        data.goods.goods_image.forEach((item: any, index: any) => {
-            data.goods.goods_image[index] = img(item);
-        })
-        data.goods.delivery_type_list = data.goods.delivery_type_list ? Object.values(data.goods.delivery_type_list) : []
+        data.goods = {
+            goods_image:['https://img1.yoe365.com/Photos/133337988754342006.jpg'],
+            goods_name:data.itemName,
+            sub_title:'',
+            unit:data.unitName,
+            sale_num:data.allStock,
+            goods_desc:data.pcDetail
+        }
+        // if(data.imageUrl){
+        //     data.goods.goods_image = data.imageUrl.split(',');
+        // }
+        // data.goods.goods_image.forEach((item: any, index: any) => {
+        //     data.goods.goods_image[index] = img(item);
+        // })
+        data.allStock = Number(data.totalInventory || 0) + Number(data.nowInventory || 0) + Number(data.virtualInventory || 0);
 
         if (getToken()) {
             // 我的足迹
-            myBrowseFn(data.goods.goods_id);
+            // myBrowseFn(data.goods.goods_id);
         }
-        
+
         uni.setNavigationBarTitle({
             title: data.goods.goods_name
         })
@@ -290,9 +296,9 @@ export function useDiyGoodsDetail(params: any = {}) {
 
         // 打开分享弹窗
         data.isOpenSharePoster = false
-        useGoodsDetailStore().setGoodsDetail(data,true)
+        useGoodsDetailStore().setGoodsDetail(data, true)
     }
-    
+
     // 我的足迹
     const myBrowseFn = (goods_id: any) => {
         browse({