gy-app-shop/pages/product/detail.vue

<template>
  <view class="container">
    <!-- 商品图片 -->
    <image 
      :src="productInfo.imageUrl" 
      mode="aspectFill"
      class="product-image"
			@click="lookPic(productInfo.imageUrl)"
    ></image>
		
		<!-- 分类标签 -->
		<view class="category-tags">
			<u-tag 
				v-if="categoryName" 
				:text="categoryName" 
				type="primary" 
				mode="light"
			></u-tag>
		</view>
    
    <!-- 商品信息 -->
    <view class="product-info">
      <view class="product-title">{{ productInfo.name }}</view>
      <view class="price-box">
        <text class="current-price">¥{{ (productInfo.price / 100).toFixed(2) }}</text>
        <text class="original-price">¥{{ (productInfo.listPrice / 100).toFixed(2) }}</text>
      </view>
      <view class="stock">库存: {{ productInfo.stock }}件</view>
      <view class="description">{{ productInfo.description || '' }}</view>
    </view>
    
    <!-- 底部购买按钮 -->
    <view class="btn-box">
      <!-- <button class="buy-button" @click="handleBuy">立即购买</button> -->
			<u-button type="primary" style="width: 680rpx;" :loading="buttonLoading" @click="handleBuy">立即购买</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productInfo: {
        id: '',
        name: '',
        price: 0,
        listPrice: 0,
        stock: 0,
        description: '',
        imageUrl: '',
				categoryId: ''
      },
			mall_product_category:[],
			buttonLoading:false,
    }
  },
	computed: {
		// 根据categoryId获取分类名称
		categoryName() {
			if (this.productInfo.categoryId!='' || !this.mall_product_category.length) return '';
			const category = this.mall_product_category.find(item => 
				item.dictValue == this.productInfo.categoryId
			);
			return category ? category.dictLabel : '';
		}
	},
  onLoad(option) {
		this.getDictDataList('mall_product_category');
    if (option.id) {
      this.getProductDetail(option.id)
    }
  },
  methods: {
		// 获取分类列表
		getDictDataList(type){
			this.$api.getDictList(type).then((res)=>{
				if(res.code===200){
					this[type] = res.data || [];
				}
			})
		},
    getProductDetail(id) {
			this.$api.productApi.getProductDetail(id).then((res)=>{
			  console.log("获取商品详情",res)
			  if(res.code == 200){
			    this.productInfo = res.data;
			  } else {
          uni.showToast({
            title: '获取商品详情失败',
            icon: 'none'
          })
        }
			}).catch((error)=>{
				uni.showToast({
				  title: '获取商品详情失败',
				  icon: 'none'
				})
			})
    },
		lookPic(url){
			uni.previewImage({
				current: '', // 当前显示图片的 http 链接
				urls: [url] // 需要预览的图片 http 链接列表
			});
		},
    handleBuy() {
      // 处理购买逻辑
      uni.showToast({
        title: '正在开发中...',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx; // 为底部按钮留出空间
}

.product-image {
  width: 100%;
  height: 750rpx;
  background-color: #fff;
}

.category-tags {
  padding: 16rpx 30rpx;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.product-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.product-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.price-box {
  display: flex;
  align-items: baseline;
  margin-bottom: 16rpx;
  
  .current-price {
    font-size: 40rpx;
    color: #ff5500;
    font-weight: bold;
    margin-right: 16rpx;
  }
  
  .original-price {
    font-size: 28rpx;
    color: #999;
    text-decoration: line-through;
  }
}

.stock {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 20rpx;
}

.description {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
}

.btn-box {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 120rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 999;
	button{
		width: 680rpx;
		height: 85rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

</style>