wx/pages/shopp/components/commodityDetails.vue

<template>
  <view class="box">
    <!-- 图片 -->
    <view class="image">
      <image src="../../../static/logo.png"></image>
    </view>
    <!-- 我的 -->
    <view class="my">
      <view class="my-h">{{ data.goodsName }}</view>
      <view class="my-box">
        <view class="my-box-textone">
          <text style="color: #ff9932">￥{{ data.goodsPrice }}.00</text>
          /个
        </view>
        <view class="my-box-texttow">已售0</view>
      </view>
    </view>
    <!-- 选择规格 -->
    <view class="specification">
      <view class="specification-h">
        <view class="specification-h-text">选择规格</view>
        <view class="specification-h-box">水票组合套餐</view>
      </view>
      <view class="specification-button">1(￥1.00)</view>
    </view>
    <!-- 商品详情 -->
    <view class="particulars">
      <view class="particulars-h">商品详情</view>
      <view class="particulars-list">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</view>
    </view>
    <!-- 加入购物车 -->
    <view class="navigation">
      <view class="navigation-box">
        <view class=""><uni-icons type="contact" size="35"></uni-icons></view>
        <view class="">首页</view>
      </view>
      <view class="navigation-box">
        <view class=""><uni-icons type="contact" size="35"></uni-icons></view>
        <view class="">分享</view>
      </view>
      <view class="navigation-buttom">
        <text @click="handleClick('textone')" :class="{ active: selectedButton === 'textone' }" class="navigation-buttom-textone">加入购物车</text>
        <text @click="handleClick('texttow')" :class="{ active: selectedButton === 'texttow' }" class="navigation-buttom-texttow">立即购买</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { APIparticulars } from '@/api/commodity/index.js';

// 定义状态变量来跟踪哪个按钮被选中
const selectedButton = ref('texttow');
// 商品详情
const data = ref([]);
const id = ref();

// 处理点击事件，切换选中的按钮
const handleClick = (buttonType) => {
  if (buttonType === 'textone') {
    selectedButton.value = 'textone';
  } else if (buttonType === 'texttow') {
    selectedButton.value = 'texttow';
    uni.navigateTo({
      url: `/pages/shopp/components/orderForm?name=${data.value.goodsName}&price=${data.value.goodsPrice}`
    });
  }
};
// 获取商品详情列表
const particulars = async () => {
  const res = await APIparticulars(id.value);
  data.value = res.data;
  console.log(res);
};
onLoad((option) => {
  id.value = option.id;
  particulars();
});
</script>

<style lang="scss" scoped>
.image {
  width: 92%;
  margin: 0 auto;
  image {
    width: 100%;
    height: 30rem;
  }
}
.my {
  width: 92%;
  margin: 0.8rem auto;
  background-color: #fff;
  border-radius: 1rem;
  display: flow-root;
  .my-h {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.8rem;
    margin-left: 0.8rem;
    margin-bottom: 1rem;
  }
  .my-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0.8rem;
    margin-bottom: 1rem;
    .my-box-textone {
      font-size: 1rem;
    }
    .my-box-texttow {
      margin-right: 0.8rem;
      font-size: 0.9rem;
      color: #989fbc;
    }
  }
}
.specification {
  width: 92%;
  margin: 0 auto 0.8rem;
  background-color: #fff;
  display: flow-root;
  border-radius: 1rem;
  .specification-h {
    display: flex;
    align-items: center;
    .specification-h-text {
      font-size: 1.1rem;
      font-weight: 700;
      margin-top: 0.8rem;
      margin-left: 0.8rem;
      margin-bottom: 1rem;
    }
    .specification-h-box {
      font-weight: 700;
      background-color: #fff0eb;
      color: #ff9d60;
      margin-left: 0.4rem;
      padding: 0.1rem 0.3rem;
    }
  }
  .specification-button {
    width: 90%;
    font-weight: 700;
    border: 1px solid #e4e6eb;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    text-align: center;
    margin: 1rem auto;
  }
}
.particulars {
  width: 92%;
  margin: 0 auto 5rem;
  background-color: #fff;
  border-radius: 1rem;
  display: flow-root;
  .particulars-h {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.8rem;
    margin-left: 0.8rem;
    margin-bottom: 1rem;
  }
  .particulars-list {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.8rem 0.8rem;
  }
}
.navigation {
  position: fixed;
  bottom: 0;
  z-index: 10;
  height: 4rem;
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .navigation-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .navigation-buttom {
    background-color: #fff;
    // border-radius: 1.5rem;
    .navigation-buttom-textone {
      font-weight: 700;
      color: #00ba26;
      padding: 0.5rem 0.8rem;
      border-radius: 1.5rem 0rem 0rem 1.5rem;
      border: 1px solid #00ba26;
      border-right: none;
    }
    .navigation-buttom-texttow {
      font-weight: 700;
      color: #00ba26;
      padding: 0.5rem 0.8rem;
      border-radius: 0rem 1.5rem 1.5rem 0rem;
      border: 1px solid #00ba26;
      border-left: none;
    }
    .active {
      background-color: #00ba26;
      color: #fff;
    }
  }
}
</style>