zh_order_food_xcx/pages-takeout/new-specs-info.vue

<template>
  <view class="flex-common-css iPhone-bottom box-border-box bgc-f">
    <newNav :leftShow="false" :textType='false' class="z-4" @navHeight='navHeight'>
      <view slot="leftContent" class="align-items-center nav-left-box pl-32 box-border-box">
        <view class="nav-left box-border-box b-rad-32 align-items-center flex-justify-space">
          <uni-icons type="left" size="25" :color="leftIconColor" @click="goBack"></uni-icons>
          <view class="align-items-center">
            <view class="hr mr-16"></view>
            <image class="fx-icon" src="/static/img/order-food/fx.png" mode=""></image>
          </view>
        </view>
      </view>
    </newNav>
    <image class="goods-img" :src="infoData.goods_image" mode="aspectFill"></image>
    <view class="image-box" :style="{height: `calc(41vh - ${newNavHeight}rpx)`}"></view>
    <view class="goods-name-box">
      <view class="goods-name b-rad-24-24-0-0 p-32-32-0 box-border-box bgc-f">
        <view class="fs-36 fw-600 fc-3">
          {{infoData.goods_name || ''}}
        </view>
        <view class="pt-20 fs-28 fc-6" v-if="infoData.goods_desc">
          {{infoData.goods_desc}}
        </view>
      </view>
    </view>
    <view class="scroll-view-css plr-32 box-border-box">
      <view class="b-t-eee ptb-30">
        <view class="mb-16" v-for="(item,i) in specsData" :key="i">
          <view class="fs-28 fc-7 mb-16">
            {{item.sku_name}}
          </view>
          <view class="align-items-center flex-wrap-wrap w-add-16">
            <view class="specs-item b-rad-12 align-items-center flex-justify-evenly mr-16 mb-16 plr-12 box-border-box"
              :class="spec_key.indexOf(info.spec_id)>=0?'s-item bgc-FAE9E9 b-FF3333':'n-item bgc-F5F5F5'"
              v-for="(info,index_two) in item.spec_list" :key="index_two" @click="selectSpec(item,info)">
              <view class="count-box b-rad-50 bgc-FE6B2C fs-22 fc-f text-align-center"
                v-if="item.affect_quantity === 1 && info.spec_num > 0">
                {{info.spec_num}}
              </view>
              <image v-if="spec_key.indexOf(info.spec_id)>=0 && info.spec_num > 0" class="set-num-img mr-30"
                src="@/static/img/order-food/reduce-img.png" @click.stop="setNum(item,info,0)" mode="">
              </image>
              <view class="align-items-center info-text">
                <view class="" :class="spec_key.indexOf(info.spec_id)>=0?'fc-FF3333':'fc-0'">
                  {{info.spec_name}}
                </view>
                <view class="" :class="spec_key.indexOf(info.spec_id)>=0?'fc-FF3333':'fc-0'"
                  v-if="info.spec_price && item.affect_quantity != 0">
                  ￥{{info.spec_price}}
                </view>
              </view>
              <image v-if="spec_key.indexOf(info.spec_id)>=0 && info.spec_num > 0" class="set-num-img ml-30"
                src="@/static/img/order-food/add-img.png" @click.stop="setNum(item,info,1)" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bot-box box-border-box">
      <view class="align-items-center flex-justify-space mb-20">
        <view class="">
          <view class="align-items-baseline">
            <view class="fs-32 fc-3 fw-600 mr-4">
              ￥
            </view>
            <view class="fs-48 fc-3 fw-600">
              {{total_price.toFixed(2)}}
            </view>
          </view>
          <view class="fs-24 fc-9">
            {{spec_text}}
          </view>
        </view>
        <view class="align-items-center">
          <image class="cz-img" src="@/static/img/order-food/reduce-img.png" mode="" @click="changeGoodsNum(0)"></image>
          <view class="plr-16 fs-32 fc-3 fw-400">
            {{postData.number}}
          </view>
          <image class="cz-img" src="@/static/img/order-food/add-img.png" mode="" @click="changeGoodsNum(1)">
          </image>
        </view>
      </view>
      <view class="but-box text-align-center fs-32 fc-f fw-600 b-rad-200" @click="addShoppingCart">
        加入购物车
      </view>
    </view>
  </view>
</template>

<script>
  import cartStore from '@/utils/cartStore.js';
  import {
    getGoodsGoodsSpec
  } from "@/api/goods.js"
  import {
    shoppingSave
  } from "@/api/shopping.js"
  import tools from "@/service/tools"
  export default {
    components: {},
    data() {
      return {
        infoData: {},
        newNavHeight: '',
        specsData: [],
        spec_key: [],
        total_price: 0,
        spec_text: '请选择规格',
        postData: {
          goods_id: '',
          category_id: '',
          goods_spec: [],
          number: 1
        }
      }
    },
    watch: {
      // 监听相关数据变化，自动计算总价和拼接规格文字
      'postData.goods_spec': {
        handler() {
          this.updatePriceAndText();
        },
        deep: true
      },
      'postData.number': {
        handler() {
          this.updatePriceAndText();
        }
      }
    },
    onLoad(data) {
      if (data) {
        this.postData.goods_id = data.goods_id
        this.postData.category_id = data.category_id
        cartStore.setShopId();
        this.getGoodsGoodsSpec(data.goods_id)
      }
    },
    mounted() {},
    methods: {
      // 添加商品数量
      changeGoodsNum(type) {
        if (type === 0) {
          // 减少数量
          if (this.postData.number > 1) {
            this.postData.number--;
          }
        } else {
          // 增加数量
          this.postData.number++;
        }
      },
      // 更新总价和规格文字
      updatePriceAndText() {
        let basePrice = 0; // 假设商品基础价格，可以从接口获取
        let specPrice = 0;
        let specArray = [];
        // 遍历所有规格组
        this.specsData.forEach(group => {
          group.spec_list.forEach(spec => {
            // 检查规格是否被选中
            if (this.spec_key.includes(spec.spec_id)) {
              // 获取规格数量
              let specNum = group.affect_quantity === 1 ? spec.spec_num : 1;
              // 累加价格
              specPrice += spec.spec_price * specNum;
              // 构建规格文字
              let specName = spec.spec_name;
              if (group.sku_type === 2 && specNum > 1) {
                // 多选且数量大于1，显示 ×数量
                specName += `×${specNum}`;
              }
              specArray.push(specName);
            }
          });
        });
        // 计算总价：基础价格 + 规格价格 × 商品数量
        this.total_price = (basePrice + specPrice) * this.postData.number;
        // 拼接规格文字
        if (specArray.length > 0) {
          this.spec_text = specArray.join('、');
        } else {
          this.spec_text = '请选择规格';
        }
        // this.$forceUpdate();
      },
      addShoppingCart() {
        // 构建商品对象
        const goodsData = {
          goods_id: this.postData.goods_id,
          goods_name: this.infoData.goods_name,
          goods_image: this.infoData.goods_image,
          category_id: this.postData.category_id,
          seckill_money: this.infoData.seckill_money || 0,
          price: this.infoData.price || 0,
          spec_type: 2, // 多规格商品
          goods_desc: this.infoData.goods_desc || ''
        };
        // 计算单价
        const unitPrice = this.total_price / this.postData.number;

        // 构建规格数组
        const specs = this.postData.goods_spec.map(spec => {
          return {
            id: spec.id,
            number: spec.number,
            // 这里需要从规格数据中获取规格名称和价格
            name: this.getSpecNameById(spec.id),
            price: this.getSpecPriceById(spec.id)
          };
        });

        // 添加到购物车
        const success = cartStore.addToCart(
          goodsData,
          specs,
          this.postData.number
        );

        if (success) {
          uni.showToast({
            title: '加入购物车成功',
            icon: 'success'
          });

          setTimeout(() => {
            // 返回时传递成功信息
            const eventChannel = this.getOpenerEventChannel();
            if (eventChannel) {
              eventChannel.emit('cartUpdated', {
                success: true
              });
            }
            uni.navigateBack({
              delta: 1
            });
          }, 1000);
        } else {
          uni.showToast({
            title: '加入购物车失败',
            icon: 'error'
          });
        }
      },
      getSpecNameById(specId) {
        // 根据规格ID获取规格名称
        for (let group of this.specsData) {
          for (let spec of group.spec_list) {
            if (spec.spec_id === specId) {
              return spec.spec_name;
            }
          }
        }
        return '';
      },
      getSpecPriceById(specId) {
        // 根据规格ID获取规格价格
        for (let group of this.specsData) {
          for (let spec of group.spec_list) {
            if (spec.spec_id === specId) {
              return spec.spec_price || 0;
            }
          }
        }
        return 0;
      },
      shoppingSave() {
        shoppingSave(this.postData).then((res) => {
          if (res.code === 1) {
            tools.success(res.msg)
            this.isAjax = false
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 1000)
          } else {
            this.isAjax = false
            tools.error(res.msg)
          }
        })
      },
      setNum(item, info, type) {
        if (type === 0) {
          info.spec_num -= 1;
          if (info.spec_num <= 0) {
            const infoKey = this.spec_key.indexOf(info.spec_id)
            if (infoKey != -1) {
              this.spec_key.splice(infoKey, 1)
              this.postData.goods_spec.splice(infoKey, 1)
            }
          }
        } else {
          info.spec_num += 1;
        }
        const targetSpec = this.postData.goods_spec.find(e => e.id === info.spec_id);
        if (targetSpec) {
          targetSpec.number = info.spec_num;
        }
        this.$forceUpdate();
      },
      getGoodsGoodsSpec(goods_id) {
        getGoodsGoodsSpec({
          goods_id: goods_id
        }).then((res) => {
          if (res.code * 1 === 1) {
            this.specsData = res.data.sku
            this.infoData = res.data.goods
            this.addSpecNum()
          }
        })
      },
      addSpecNum() {
        this.specsData.forEach((v, k) => {
          if (v.affect_quantity === 1) {
            v.spec_list.forEach(spec => {
              spec.spec_num = 0;
            });
          } else {
            this.addSpec(v.spec_list[0])
          }
        })
      },
      navHeight(e) {
        this.newNavHeight = e
      },
      goBack() {
        uni.navigateBack({
          delta: 1
        })
      },
      selectSpec(item, info) {
        let specKey = this.spec_key.indexOf(info.spec_id)
        if (item.sku_type === 1) {
          //单选
          item.spec_list.forEach((e, i) => {
            let infoKey = this.spec_key.indexOf(e.spec_id)
            if (infoKey >= 0) {
              this.spec_key.splice(infoKey, 1)
              this.postData.goods_spec.splice(infoKey, 1)
            }
          })
          this.addSpec(info)

        } else {
          //多选
          if (specKey < 0) {
            if (info.spec_num === 0) {
              info.spec_num += 1
              this.addSpec(info)
            }
          }
        }
      },
      addSpec(info) {
        this.spec_key.push(info.spec_id);
        this.postData.goods_spec.push({
          id: info.spec_id,
          number: info.spec_num || 1
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .nav-left-box {
    width: 100%;
    height: 100%;
  }

  .nav-left {
    width: 174rpx;
    height: 100%;
    background: rgba(255, 255, 255, 0.45);
    border: 1rpx solid #E3E6EB;
    padding: 0 20rpx 0 14rpx;
  }

  .goods-img {
    width: 100%;
    height: 41vh;
    position: absolute;
    top: 0;
    left: 0;
  }

  .fx-icon {
    width: 48rpx;
    height: 48rpx;
  }

  .hr {
    width: 1rpx;
    height: 36rpx;
    background: #e7e7e7;
  }

  .goods-name-box {
    position: relative;
  }

  .goods-name {
    width: 100%;
    position: relative;
    top: -32rpx;
    left: 0;
  }

  .bot-box {
    padding: 20rpx 32rpx 12rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
  }

  .cz-img {
    width: 44rpx;
    height: 44rpx;
  }

  .but-box {
    width: 100%;
    height: 96rpx;
    line-height: 96rpx;
    background: linear-gradient(270deg, #FF3333 0%, #FE6122 100%);
  }

  .specs-item {
    position: relative;
    min-width: 218rpx;
    height: 72rpx;
  }

  .w-add-16 {
    width: calc(100% + 22rpx);
  }

  .item-box {
    position: relative;
  }

  .count-box {
    width: 28rpx;
    height: 28rpx;
    line-height: 28rpx;
    position: absolute;
    right: -8rpx;
    top: -8rpx;
  }

  .set-num-img {
    width: 44rpx;
    height: 44rpx;
  }
</style>