H5-Merchant/pages/onlineproductselection/onlineDetail.vue

<template>
  <view class="product-detail-page">
    <view class="headers">
      <headersVue headerTitle="商品详情" @headerJump="headerJump"></headersVue>
    </view>
    <view class="product-image-container" v-if="productDetailObj.spuId_info">
      <image
      v-if="!isError && productDetailObj.spuId_info.cover_url"
        :src="productDetailObj.spuId_info.cover_url"
        mode="scaleToFill"
         @error="handleError"
        class="product-image"
      ></image>
       <image
        src="/static/images/new_ui/kongtu.png"
        mode="scaleToFill"
       class="product-image"
        v-else
      />
    </view>
    <ProductInfo :product="productDetailObj" :skuId_info="skuId_info"/>
    <ProductSpec :product="productDetailObj" :skuId_info="skuId_info"/>
    <DeliveryInfo :delivery="productDetailObj" :skuId_info="skuId_info"/>
    <view class="merchant-code-container">
      <view class="label">商户编码</view>
      <view class="value">{{ productDetailObj.spuId_info && productDetailObj.spuId_info.spu_id }}</view>
    </view>
    <RichTextDetail :productDetail="productDetail" />
  </view>
</template>

<script>
import ProductInfo from "./components/detail/ProductInfo.vue";
import ProductSpec from "./components/detail/ProductSpec.vue";
import DeliveryInfo from "./components/detail/DeliveryInfo.vue";
import RichTextDetail from "./components/detail/RichTextDetail.vue";
import headersVue from "../../shop/components/headers/headers.vue";
import {productDetailApi} from "@/commit/product.js"
export default {
  components: {
    ProductInfo,
    ProductSpec,
    DeliveryInfo,
    RichTextDetail,
    headersVue,
  },
  data() {
    return {
      productDetailObj:{},
      productDetail: "", // 这里需要根据实际富文本数据格式填充，例如从接口获取
isError:false,
skuId_info:{}
    };
  },
  async onLoad(options) {
    this.spu_id = options.spu_id;
    await this.getProductDetail(this.spu_id);
  },
  methods: {
    handleError(){
      this.isError = true;
    },
    headerJump() {
      uni.redirectTo({ url: "./onlineproductselection" });
    },
    async getProductDetail(spu_id) {
      uni.showLoading({
        title: '加载中',
        mask: true
      })
      try {
        const res = await productDetailApi({spu_id:spu_id || this.spu_id})
        if(res.data.status == 200){
          this.productDetailObj = res.data.data || {}
          this.productDetail =  this.productDetailObj.spuId_info.detail
          this.skuId_info = this.productDetailObj.skuId_info[0] || {}
        }
         uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
      }
    },
  },
};
</script>
<style>
page {
  background-color: #f7f8fc;
}
</style>
<style lang="scss" scoped>
.product-detail-page {
  height: 100%;
  padding: 0 26rpx 40rpx;
  .headers {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100rpx;
    box-sizing: border-box;
    z-index: 666;
  }
}
.product-image-container {
  width: 100%;
  margin-bottom: 30rpx;
  border-radius: 10rpx;
  // border: 2rpx solid red;
  overflow: hidden;
  margin-top: 120rpx;
  background: #fff;
}
.product-image {
  width: 100%;
}
.merchant-code-container {
  background-color: #ffffff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.label {
  font-size: 28rpx;
  color: #666666;
  margin-bottom: 10rpx;
}
.value {
  font-size: 30rpx;
  color: #333333;
}
</style>