store-shop-uniapp/components/activities/combinedSales.vue

<template>
  <view class="group-list" v-if="selectComposeData && selectComposeData.length > 0">
    <view class="group-warp">
      <view class="title">
        <label>
          <image class="title-img" src="../../static/images/combinationIcon.png" alt="组合销售" mode="widthFix"></image>
        </label>
        <view class="price-text">
          组合价：¥{{composePrice}}
        </view>
      </view>
      <view>
        <scroll-view class="tabs-nav" scroll-x="true">
          <view class="ul">
            <view v-for="(item,index) in selectComposeData" :key="index" class="li" :class="tabIndex===index && 'on'" @click="tabChange(index)">
              {{ item.composeName }}</view>
          </view>
        </scroll-view>
        <view class="tabs-item" v-for="(item,index) in selectComposeData" :key="index" :class="tabIndex===index && 'on'">
          <swiper class="swiper pro-box" :indicator-dots="false" :autoplay="true" :display-multiple-items="item.composeProductInfoList.length < 3?item.composeProductInfoList.length:3" @change="swiperChange" :disable-touch="item.composeProductInfoList.length <= 3">
            <swiper-item class="pro-item-warp" v-for="(itemJ,indexJ) in item.composeProductInfoList" :key="indexJ" >
              <view class="pro-item-inner">
                <view class="pro-item">
                  <view class="pro-item-img">
                    <image class="img" :src="itemJ.productImage"></image>
                  </view>
                  <view class="pro-item-info">
                    <h3 class="name">
                      {{itemJ.productName}}
                    </h3>
                    <view class="sku" @click.stop="changeSkuItemValue(itemJ, indexJ)">
                      <view class="text">{{itemJ.skuItem.skuName}}</view>
                    </view>
                  </view>
                </view>
              </view>
            </swiper-item>
          </swiper>
          <view class="swiper-dots" v-if='item.composeProductInfoList.length > 3'>
            <text :class="{'dot-active':swiperCurrent === index,'dot': true}"
                  v-for="(dot, index) in item.composeProductInfoList.length - 2"
                  :key="index"
            ></text>
          </view>
        </view>
        <view class="btn-buy" @click="doBuy">立即购买</view>
      </view>
    </view>
    <!-- 商品详情 -->
    <u-popup v-model="goodsDetailShowFlag" mode="bottom" border-radius="14">
      <view class="goosDetailshow-box">
        <view class="detailImg-box flex-row-plus">
          <image class="detailImg" :src="selectedSku.image"></image>
          <view class="flex-column-plus mar-left-40">
            <view class="font-color-C5AA7B">
              <label class="fs24">¥</label>
              <label class="fs36 mar-left-10"
                     v-text="getPrice(selectedSku)"></label>
            </view>
            <label class="fs24 font-color-999 mar-top-20">库存 {{selectedSku.stockNumber}} 件</label>
            <label class="fs24 mar-top-20">已选</label>
          </view>
        </view>
        <view class="color-box flex-column-plus">
          <view v-for="(attritem,index) in skuProData.names" :key="index" class="skuStyle">
            <label class="fs24 font-color-999">{{attritem.skuName}}</label>
            <view class="colorName-box">
              <view class="pad-bot-30" v-for="(attrRes, resIndex) in attritem.values" :key="resIndex">
                <view class="colorName"
                      :class="{'colorName-on' : getselectedAttrVal(attritem.nameCode) == attrRes.valueCode}"
                      @click="nameCodeValueCodeClick(attritem.nameCode, attrRes.valueCode, true)">
                  {{attrRes.skuValue}}
                </view>
              </view>
            </view>
          </view>
        </view>
        <!--        <view class="goodsNum-box flex-row-plus flex-sp-between" :class="{'bottom-line' :supportHuabei}">-->
        <!--          <label class="font-color-999 fs24">数量</label>-->
        <!--          <view class="goodsNum">-->
        <!--            <text class="subtract" @click="updateNumSub()">-</text>-->
        <!--            <text class="goodsNumber" v-model="buyNum">{{buyNum}}</text>-->
        <!--            <text class="add" @click.stop="-->
        <!--            ()">+</text>-->
        <!--          </view>-->
        <!--        </view>-->
        <view class="goosDetailbut-box flex-items-plus">
          <!--          <button type="default" @click="goodsDateils(shopId,productId,skuId)" >查看详情</button>-->
          <button type="default" class="submitBtn" @click="submitBtn()">确认</button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import NET from "../../utils/request";
import API from "../../config/api";

export default {
  name: "combinedSales",
  props: {
    pid: {
      type: String,
      default: ''
    },
    productData: {
      type: Object,
      default: ()=>{}
    }
  },
  data () {
    return {
      skuShowFalg: false,
      tabIndex: 0,
      swiperCurrent: 0,
      selectComposeData: [],
      curProIndex: 0,
      selectedSku: [],
      selectedAttr: [],
      skuProData: {},
      goodsDetailShowFlag: false,
      composePrice: 0
    }
  },
  mounted() {
    this.getSelectCompose()
  },
  methods:{
    // 切换套餐
    tabChange(index){
      this.tabIndex = index
      this.calculatePrice()
    },
    // 滑动回调方法
    swiperChange(e) {
      this.swiperCurrent = e.detail.current;
    },
    // 获取组合销售数据
    getSelectCompose() {
      NET.request(API.selectCompose, {
            productId: this.pid
          },
          "GET").then(res => {
        this.selectComposeData = res.data
        for(let i=0;i< this.selectComposeData.length;i++) {
          let proList = this.selectComposeData[i].composeProductInfoList
          for (let j = 0; j < proList.length; j++) {
            proList[j].skuItem = proList[j].composeSkuInfoList[0]
          }
        }
        this.calculatePrice()
      }).catch(res => {

      })
    },
    // 更换商品样式
    changeSkuItemValue(item,index) {
      this.curProIndex = index
      uni.showLoading({
        title: '加载中...'
      })
      NET.request(API.QueryProductDetail, {
            shopId: this.productData.shopId,
            productId: item.productId,
            skuId: item.skuItem.skuId,
            terminal: 1
          },
          "GET").then(res => {
        uni.hideLoading()
        this.skuProData = res.data
        // console.log(this.skuProData,'this.skuProData', res.data)
        //如果是单款式商品，需要特殊处理productData.names
        const mapKeys = Object.keys(this.skuProData.map)
        if (mapKeys.length === 1 && mapKeys[0] === '单款项') {
          this.skuProData.names[0].values.push({
            skuValue: '单款项',
            valueCode: '单款项'
          })
        }

        //如果sku的图像为空，设置为商品的图像
        for (var key in this.skuProData.map) {
          let skuImage = this.skuProData.map[key].image
          if (!skuImage) {
            this.skuProData.map[key].image = this.skuProData.images[0]
          }
        }
        this.goodsDetailShowFlag = true
        this.selectBySkuId(item.skuItem.skuId)
      }).catch(res => {
        uni.hideLoading()
      })
    },
    selectBySkuId(skuId) {
      if (skuId) {
        let mapinfo = this.skuProData.map
        let flag = true
        for (var key in mapinfo) {
          if (parseInt(mapinfo[key].skuId) === parseInt(skuId)) {
            flag = false
            this.selectedSku = mapinfo[key]
            // 选中sku对应的规格
            const valueCodeList = key.split(',')
            this.selectedAttr = []
            this.skuProData.names.forEach(attr => {
              for (var index in attr.values) {
                let valueCode = attr.values[index].valueCode
                if (valueCodeList.includes(valueCode)) {
                  this.nameCodeValueCodeClick(attr.nameCode, valueCode, false)
                  break
                }
              }
            })
            break
          }
        }
        // 匹配不上就赋值第一个
        if(flag){
          for (var key in mapinfo) {
            console.log(key,'key')
            this.selectedSku = mapinfo[key]
            break
          }
        }
      }
    },
    nameCodeValueCodeClick(nameCode, valueCode, reSelectSku) {
      this.selectedAttr[nameCode] = valueCode
      console.log(this.selectedAttr, 'this.selectedAttr')
      if (reSelectSku) {
        let attrList = []
        for (var key in this.selectedAttr) {
          attrList.push(this.selectedAttr[key])
        }
        const attrkey = attrList.join(',')
        let mapinfo = this.skuProData.map
        for (var key in mapinfo) {
          if (attrkey === key) {
            this.selectedSku = mapinfo[key]
          }
        }
      }
      this.$forceUpdate(); // 重绘
    },
    // 提交更换商品规格
    submitBtn() {
      console.log(this.selectedSku,'this.selectedSku')
      const curPro = this.selectComposeData[this.tabIndex].composeProductInfoList[this.curProIndex]
      for(let i=0;i<curPro.composeSkuInfoList.length;i++){
        if(curPro.composeSkuInfoList[i].skuId === this.selectedSku.skuId){
          this.selectedSku.skuName = curPro.composeSkuInfoList[i].skuName
        }
      }
      curPro.skuItem = this.selectedSku
      this.calculatePrice()
      this.goodsDetailShowFlag = false
    },
    // 计算组合价
    calculatePrice(){
      const proList = this.selectComposeData[this.tabIndex].composeProductInfoList,composeType= this.selectComposeData[this.tabIndex].composeType,promote= this.selectComposeData[this.tabIndex].promote
      let total = 0
      for(let i=0;i<proList.length;i++){
        total += this.getPrice(proList[i].skuItem)
      }
      switch (composeType){
        case 1:
          this.composePrice = promote.toFixed(2)
          break
        case 2:
          this.composePrice = (total - promote).toFixed(2)
          break
        case 3:
          this.composePrice = parseFloat(total * promote / 10).toFixed(2)
          break
      }
      console.log(total, this.composePrice, 'total')
    },
    // 根据活动显示不同价格
    getPrice(item){
      // 所属活动 0-常规商品 1-拼团活动 2-秒杀活动 3-限时折扣活动 4-平台秒杀 5-平台折扣 6-定价捆绑 7-组合捆绑 8-场景营销 9-会员价
      if(item.activityType){
        if(item.activityType === 0 || item.activityType === 6 || item.activityType === 7){
          return item.price
        } else {
          return item.originalPrice
        }
      } else {
        return item.price
      }
    },
    // 立即购买
    doBuy(){
      let addCart = []
      let shopObj = {}
      shopObj["shopId"] = this.productData.shopId
      shopObj["composeId"] = this.selectComposeData[this.tabIndex].composeId
      shopObj["skus"] = []
      let proList = this.selectComposeData[this.tabIndex].composeProductInfoList
      let len2 = proList.length
      for (let j = 0; j < len2; j++) {
        let skusObj = {}
        skusObj["number"] = 1
        skusObj["skuId"] = proList[j].skuItem.skuId
        shopObj.skus.push(skusObj)
      }
      addCart.push(shopObj)
      uni.setStorageSync('skuItemDTOList', addCart)
      uni.navigateTo({
        url: '../../pages_category_page1/orderModule/orderConfirm?type=2'
      })
    },
    getselectedAttrVal(item){
      return this.selectedAttr[item]
    }
  }
}
</script>

<style lang="scss" scoped>
.group-list{
  padding: 10upx 20upx 60upx;
  border-top: 12upx solid #F8F8F8;
  .group-warp{
    height: 680upx;

    background: #333333;
    box-shadow: 0 20upx 30upx rgba(0, 0, 0, 0.3);
    opacity: 1;
    border-radius: 20upx;
  }
  .title{
    display: flex;
    align-items:center;
    position: relative;
    justify-content: space-between;
    padding: 32upx 0 20upx 30upx;
    .title-img{
      width: 203upx;
    }
    .price-text{
      padding: 0 34upx;
      margin-right: 10upx;
      height: 50upx;
      background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
      box-shadow: 0 6upx 12upx rgba(233, 0, 0, 0.3);
      border-radius: 26upx;
      font-size: 24upx;
      color: #fff;
      text-align: center;
      line-height: 50upx;
      margin-left: 20upx;
      .swiper{
        height: 50upx;
      }
    }
  }
  .tabs-nav{
    padding: 0 10upx;
    margin-bottom: 20upx;
    .ul{
      display: flex;
      .li{
        //flex: 1 0 auto;
        text-align: center;
        font-size: 26rpx;
        color: #999;
        position: relative;
        padding: 12px 40px;
        word-break: keep-all;
        &:first-child{
          margin-left: 0;
        }
        &.on{
          color: #FFEBC4;
          &:after{
            content: '';
            width: 100%;
            height: 2rpx;
            background: #FFEBC4;
            position: absolute;
            left: 0;
            bottom: 0;
          }
        }
      }
    }
  }
  .tabs-item{
    display: none;
    &.on{
      display: block;
    }
  }
  .pro-box{
    height: 318upx;
    padding: 0 2upx 20upx;
    .pro-item-inner{
      padding: 0 8upx;
      display: flex;
      justify-content: center;
    }
    .pro-item{
      width: 219upx;
      background: #FFFFFF;
      padding: 10upx;
      height: 318upx;
      .pro-item-img{
        width: 100%;
        height: 160upx;
        .img{
          width: 100%;
          height: 100%;
          object-fit: contain;

        }
      }
      .pro-item-info{
        .name{
          font-size: 24upx;
          line-height: 34upx;
          color: #333333;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          text-align: center;
          font-weight: normal;
          margin: 8upx 0 26upx;
        }
        .sku{
          width: 180upx;
          height: 50upx;
          margin: 0 auto;
          line-height: 50upx;
          border: 2upx solid #E4E5E6;
          background: url("../../static/images/arrow-suk-select.png") no-repeat right center / 60upx 60upx;
          .text{
            font-size: 24upx;
            color: #999;
            padding-left: 20upx;
            width: 126px;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .swiper-dots{
    display: flex;
    justify-content: center;
    .dot{
      display: block;
      width: 24upx;
      height: 4upx;
      background: #FFFFFF;
      opacity: 0.5;
      border-radius: 2upx;
      margin: 0 20upx;
      &.dot-active{
        opacity: 1;
      }
    }
  }
}
.btn-buy{
  width: 688upx;
  height: 84upx;
  //border: 2upx solid rgba(0, 0, 0, 0);
  background: linear-gradient(88deg, #C5AA7B 0%, #FFEBC4 100%);
  font-size: 28upx;
  color: #333;
  line-height: 84upx;
  margin: 30upx auto 0;
  text-align: center;
}

.goosDetailshow-box {
  .detailImg-box {
    margin-top: 30rpx;
    margin-left: 30rpx;
    border-radius: 10rpx;
    border-bottom: 1rpx solid #EDEDED;
    padding-bottom: 20rpx;
    width: 690rpx;

    .detailImg {
      width: 180rpx;
      height: 180rpx;
    }
  }

  .color-box {
    padding: 30rpx 30rpx;
    border-bottom: 1rpx solid #EDEDED;
    width: 690rpx;
    .skuStyle{
      padding: 20rpx 0;
    }

    .skuStyle:nth-child(2) {
      border-top: 1px solid #F3F4F5;
    }

    .colorName-box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 30rpx;
      margin-left: -30rpx;

      .colorName-on {
        background-color: #FFE5D0;
        color: #C5AA7B;
        margin-left: 30rpx;
        padding: 10rpx 32rpx;
        border-radius: 28rpx;
        border: 1rpx solid #C5AA7B;
        font-size: 26rpx;
        text-align: center;
        z-index: 1;
      }

      .colorName {
        background-color: #F5F5F5;
        margin-left: 30rpx;
        padding: 10rpx 32rpx;
        border-radius: 28rpx;
        font-size: 26rpx;
        z-index: 2;
      }
    }

  }

  .modelNum-box {
    padding: 30rpx 30rpx;
    border-bottom: 1rpx solid #EDEDED;
    width: 690rpx;

    .modelNumName-box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-top: 30rpx;
      margin-left: -30rpx;

      .modelNumName-on {
        background-color: #FFE4D0;
        color: #C5AA7B;
        margin-left: 30rpx;
        padding: 10rpx 32rpx;
        border-radius: 28rpx;
        border: 1rpx solid #C5AA7B;
        font-size: 26rpx;
        text-align: center;
      }

      .modelNumName {
        background-color: #F5F5F5;
        margin-left: 30rpx;
        padding: 10rpx 32rpx;
        border-radius: 28rpx;
        font-size: 26rpx;
      }
    }
  }

  .goodsNum-box {
    padding: 30rpx 30rpx;
    width: 690rpx;
    padding-bottom: 140rpx;

    .goodsNumber {
      text-align: center;
      border: 1rpx solid #999999;
      padding: 3rpx 20rpx;
    }

    .subtract {
      border: 1rpx solid #999999;
      padding: 3rpx 20rpx;
      margin-right: -1rpx;
    }

    .add {
      border: 1rpx solid #999999;
      padding: 3rpx 20rpx;
      margin-left: -1rpx;
    }
  }

  .goosDetailbut-box {
    .joinShopCartBut {
      width: 343rpx;
      height: 80rpx;
      background-color: #FFC300;
      color: #FFFEFE;
      font-size: 28rpx;
      line-height: 80rpx;
      text-align: center;
      margin-left: 30rpx;
    }

    .buyNowBut {
      width: 343rpx;
      height: 80rpx;
      border-radius: 0 40rpx 40rpx 0;
      background-color: #FF6F00;
      color: #FFFEFE;
      font-size: 28rpx;
      line-height: 80rpx;
      text-align: center;
    }
  }
  .submitBtn {
    width: 342rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-size: 28rpx;
    border: 1px solid;
    border-radius: 0;
    color: #FFEBC4;
    background: #333333;
    margin: 20rpx 0;
  }
}
</style>