CommunityApp/pagesM/comps/dt_shop_car_goods.vue

<template>
  <view class="shop_car_goods_list">
    <view v-if="dataList.length>0" class="valid_goods_list">
      <view v-for="(item,idx) in dataList" :key="idx" class="goods_item">
        <view v-if="isEdit" @tap="tapDelCheck(item,idx)" class="operation">
          <image v-if="item.wxdelChecked" class="operation_icon" src="http://139.9.103.171:1888/img/image/selected_icon.png"></image>
          <image v-else class="operation_icon" src="http://139.9.103.171:1888/img/image/no_selected_icon.png"></image>
        </view>
        <view v-else @tap="tapCheck(item,idx)" class="operation">
          <image v-if="item.wxChecked" class="operation_icon" src="http://139.9.103.171:1888/img/image/selected_icon.png"></image>
          <image v-else class="operation_icon" src="http://139.9.103.171:1888/img/image/no_selected_icon.png"></image>
        </view>
        <view class="goods_image">
          <image class="goods_img" :src="item.skuThumbnail"></image>
          <view class="goods_left_count">剩余{{item.skuDetail.availableStock}}{{item.skuDetail.unit}}</view>
        </view>
        <view class="goods_info_operation">
          <view class="goods_title">{{ item.name }}</view>
          <view class="goods_sku">{{ item.specificationDesc }}</view>
          <view class="goods_active">
            <!-- <view v-for="(promo,pidx) in item.promotionNames" :key="pidx" class="active_item">特价抢购</view> -->
            <!-- <view class="active_item">1元换购</view> -->
            <!-- <view  class="active_item">包邮</view> -->
          </view>
          <view class="operation_number_select">
            <view class="price_number_select">
              <view class="number_select">
                <view class="number_change_less" @tap="tapPlus(item, -1, idx)">-</view>
                <input class="goods_number" type="number" :id="idx" :value="item.skuDetail.quantity" :data-item="item" :data-idx="idx" @blur="blurInputQuantity" @focus="focusInputQuantity" />
                <view class="number_change_add" @tap="tapPlus(item, 1, idx)">+</view>
              </view>
              <view class="goods_price">￥{{item.skuDetail.price}}</view>
            </view>
            <image @tap="tapRemove(item,idx)" class="delete" src="http://139.9.103.171:1888/img/image/delete.png"></image>
          </view>
        </view>
      </view>
    </view>
    <view v-if="invalidList.length>0" class="invalid_goods_list">
      <view class="invalid_wrap">
        <view class="invalid_text">失效商品</view>
        <view @tap="tapClearInvalid" class="invalid_delete_btn">清空失效商品</view>
      </view>
      <view v-for="(item,idx) in invalidList" :key="idx" class="goods_item">
        <view class="operation">
          <view class="goods_status">售罄</view>
        </view>
        <view class="goods_image">
          <image class="goods_img" :src="item.skuThumbnail"></image>
        </view>
        <view class="goods_info_operation">
          <view class="goods_title">{{ item.name }}</view>
          <view class="goods_sku">{{ item.specificationDesc }}</view>
          <view class="goods_price">￥{{ item.skuDetail.price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: () => []
    },
    invalidList: {
      type: Array,
      default: () => []
    },
    flag: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isClick: false
    }
  },
  methods: {

    tapDelCheck(item, idx) {
      if (this.flag) return
      let list = this.dataList.slice(0)
      item.wxdelChecked = !item.wxdelChecked
      let checkedNum = 0
      list.forEach((item) => {
        if (item.wxdelChecked) {
          checkedNum++
        }
      })
      
      list[idx] = item
      this.$emit('update:dataList', list)
      this.$emit('wxdelchecked', checkedNum)
    },

    tapCheck(item, idx) {
      console.log(this.flag);
      if (this.flag) return

      let totalPrice = 0
      let checkedNum = 0
      let list = this.dataList.slice(0)
      item.wxChecked = !item.wxChecked
      list[idx] = item

      list.forEach((item) => {
        if (item.wxChecked) {
          checkedNum++
          totalPrice += item.skuDetail.price * item.skuDetail.quantity
        }
      })
      this.$emit('update:dataList', list)
      this.$emit('wxchecked', totalPrice, checkedNum)
    },

    async tapPlus(item, delta, idx) {
      if (this.flag) {
        return
      }
      if (this.isClick) {
        return
      }
      this.isClick = true;
      let quantity = parseInt(parseInt(item.skuDetail.quantity) + delta)
      if (quantity < item.skuDetail.wholesalenumstart) {
        this.$dialog.toast('该商品起批量为' + item.skuDetail.wholesalenumstart)
        quantity = item.skuDetail.wholesalenumstart;
      }
      if (quantity == 0) {
        this.$dialog.toast('产品数量不能小于1');
      }
      if (quantity > item.skuDetail.availableStock) {
        this.$dialog.toast('最多只能买' + item.skuDetail.availableStock)
        quantity = item.skuDetail.availableStock;
      }


      if (quantity == item.skuDetail.quantity) {
        let list = this.dataList.slice(0)
        item.skuDetail.quantity = quantity;
        list[idx] = item;
        let { totalPrice, checkedNum } = this.calculationPrice(list)
        console.log(146, totalPrice, checkedNum)
        this.$emit('wxchecked', totalPrice, checkedNum)
        this.$emit('update:dataList', list)
        this.isClick = false;
        return
      }
      try {
        let resp = await this.$api.cartModify({
          _isReject: true,
          skuId: item.skuDetail.id,
          quantity: quantity
        })
      } catch (err) {
        if (err.errmsg) {
          this.$dialog.alert({
            content: err.errmsg
          })
        }
      } finally {
        let list = this.dataList.slice(0)
        item.skuDetail.quantity = quantity;
        list[idx] = item;
        let { totalPrice, checkedNum } = this.calculationPrice(list)
        console.log(169, totalPrice, checkedNum)
        this.$emit('wxchecked', totalPrice, checkedNum)
        this.$emit('update:dataList', list)
        this.isClick = false;
      }
    },

    calculationPrice(list) {

      let totalPrice = 0
      let checkedNum = 0
      list.forEach((item) => {
        if (item.wxChecked) {
          checkedNum++
          totalPrice += item.skuDetail.price * item.skuDetail.quantity
        }
      })
      return {
        totalPrice, checkedNum
      }
    },


    focusInputQuantity() {
      this.$emit('update:flag', true)
    },
    async blurInputQuantity(e) {
      let item = e.currentTarget.dataset.item;
      let idx = e.currentTarget.dataset.idx;
      let quantity = parseInt(e.detail.value) > 0 ? parseInt(e.detail.value) : 0;//输入值
      if (quantity < item.skuDetail.wholesalenumstart) {
        this.$dialog.toast('该商品起批量为' + item.skuDetail.wholesalenumstart)
        quantity = item.skuDetail.wholesalenumstart;
      } else if (quantity > item.skuDetail.availableStock) {
        this.$dialog.toast('最多只能买' + item.skuDetail.availableStock)
        quantity = item.skuDetail.availableStock;
      }

      if (item.skuDetail.quantity == quantity) {
        let list = this.dataList.slice(0)
        item.skuDetail.quantity = ''
        list[idx] = item;
        this.$emit('update:dataList', list)
        setTimeout(() => {
          item.skuDetail.quantity = quantity
          list[idx] = item;
          let { totalPrice, checkedNum } = this.calculationPrice(list)
          console.log(209, totalPrice, checkedNum)
          this.$emit('wxchecked', totalPrice, checkedNum)
          this.$emit('update:dataList', list)
          this.$emit('update:flag', false)
        }, 100)
        return
      }
      try {
        let resp = await this.$api.cartModify({
          _isReject: true,
          skuId: item.skuDetail.id,
          quantity: quantity
        })
      } catch (err) {
        if (err.errmsg) {
          this.$dialog.alert({
            content: err.errmsg
          })
        }
      } finally {
        let list = this.dataList.slice(0)
        item.skuDetail.quantity = quantity
        list[idx] = item;
        let { totalPrice, checkedNum } = this.calculationPrice(list)
        console.log(234, totalPrice, checkedNum)
        this.$emit('wxchecked', totalPrice, checkedNum)
        this.$emit('update:dataList', list)
        this.$emit('update:flag', false)
      }

    },


    async tapRemove(item, idx) {
      console.log(this.flag);
      if (this.flag) {
        return
      }
      let skuIds = []
      if (item.skuDetail.id) {
        skuIds.push(item.skuDetail.id)
      }
      let resp = await this.$api.cartRemoves({
        _isShowLoading: true,
        skuIds: skuIds
      })
      this.$dialog.success('删除成功')
      let list = this.dataList.slice(0)
      list.splice(idx, 1)

      let totalPrice = 0, 
        wxCheckedNum = 0, 
        wxDelCheckedNum = 0;
      list.forEach((item) => {
        if (item.wxdelChecked) {
          wxDelCheckedNum++
        }
        if(item.wxChecked){
          totalPrice += item.skuDetail.price * item.skuDetail.quantity
          wxCheckedNum++
        }
      })
      this.totalPrice = totalPrice
      let wxCheckAll = wxCheckedNum == list.length
      let wxDelCheckAll = wxDelCheckedNum == list.length
      this.$emit('delete',{
        totalPrice,
        wxCheckedNum,
        wxDelCheckedNum,
        wxCheckAll,
        wxDelCheckAll
      })
      this.$emit('update:dataList', list)
    },
    async tapClearInvalid() {
      if (this.flag) {
        return
      }
      // let resp = await this.$api
      // this.$dialog.success('清除成功')
      let skuIds = []
      let invalidList = this.invalidList.slice(0)
      invalidList.forEach((item) => {
        if (item.skuDetail.id) {
          skuIds.push(item.skuDetail.id)
        }
      })
      let resp = await this.$api.cartRemoves({
        _isShowLoading: true,
        skuIds: skuIds
      })
      this.$dialog.success('删除成功')
      this.$emit('update:invalidList', [])
    },
  }
};
</script>

<style lang="scss">
.valid_goods_list {
  .goods_item {
    display: flex;
    flex-direction: row;
    // align-items: center;
    border-top: 1upx solid #e5e5e5;
    padding: 30upx 0;
    background: #fff;
    .operation {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 180upx;
      width: 90upx;
      .operation_icon {
        width: 40upx;
        height: 40upx;
        padding: 20upx 0;
        margin: 0 auto;
      }
    }
    .goods_image {
      position: relative;
      width: 180upx;
      height: 180upx;
      .goods_img {
        width: 180upx;
        height: 180upx;
      }
      .goods_left_count {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 34upx;
        line-height: 34upx;
        text-align: center;
        background: rgba(0, 0, 0, 1);
        opacity: 0.5;
        color: #fff;
        font-size: 22upx;
      }
    }
    .goods_info_operation {
      margin-left: 20upx;
      margin-top: -10upx;
      flex: 1;
      .goods_title {
        color: #333333;
        font-size: 30upx;
      }
      .goods_sku {
        color: #999999;
        font-size: 26upx;
      }
      .goods_active {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10upx;
        .active_item {
          padding: 5upx 10upx;
          color: #ee1515;
          font-size: 18upx;
          margin-right: 20upx;
          position: relative;
          margin-bottom: 10upx;
        }
        .active_item::after {
          display: flex;
          box-sizing: border-box;
          align-items: center;
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 200%;
          height: 200%;
          transform: scale(0.5);
          transform-origin: 0 0;
          border: 1upx solid #ee1515;
          border-radius: 4upx;
          pointer-events: none;
        }
      }

      .operation_number_select {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 100upx;
        margin-top: 10upx;
        .price_number_select {
          .number_select {
            height: 50upx;
            border-radius: 6upx;
            border: 2upx solid #e5e5e5;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
            // min-width: 200upx;
            // max-width: 300upx;
            margin-bottom: 10upx;
            .number_change_less {
              width: 60upx;
              text-align: center;
              border-right: 2upx solid #e5e5e5;
              height: 100%;
              line-height: 50upx;
              font-size: 36upx;
            }
            .number_change_add {
              width: 60upx;
              text-align: center;
              border-left: 2upx solid #e5e5e5;
              height: 100%;
              line-height: 50upx;
              font-size: 36upx;
            }

            .goods_number {
              width: 60upx;
              padding: 0 10upx;
              text-align: center;
              font-size: 30upx;
              color: #353535;
            }
          }
          .goods_price {
            color: #ee1515;
            font-size: 30upx;
          }
        }

        .delete {
          width: 38upx;
          height: 38upx;
          padding: 30upx 40upx;
        }
      }
    }
  }
}
.invalid_goods_list {
  display: flex;
  flex-direction: column;
  margin-top: 20upx;
  .invalid_wrap {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20upx 30upx;
    background: #fff;
    .invalid_text {
      color: #333333;
      font-size: 28upx;
    }
    .invalid_delete_btn {
      color: #333333;
      font-size: 24upx;
      border: 2upx solid #999999;
      padding: 12upx 20upx;
      border-radius: 6upx;
    }
  }
  .goods_item {
    display: flex;
    flex-direction: row;
    border-top: 1upx solid #e5e5e5;
    padding: 30upx 0;
    position: relative;
    // background: rgba(255, 255, 255, 0.6);
    background: #ffffff;
    opacity: 0.6;
    .operation {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 180upx;
      width: 90upx;
      .goods_status {
        background: #ccc;
        border-radius: 15upx;
        width: 60upx;
        height: 30upx;
        line-height: 30upx;
        font-size: 22upx;
        color: #fff;
        text-align: center;
        margin: 0 auto;
      }
    }
    .goods_image {
      position: relative;
      width: 180upx;
      height: 180upx;
      .goods_img {
        width: 180upx;
        height: 180upx;
      }
    }
    .goods_info_operation {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 180upx;
      margin-left: 20upx;
      .goods_title {
        color: #999999;
        font-size: 30upx;
      }
      .goods_sku {
        color: #999999;
        font-size: 26upx;
      }
      .goods_price {
        color: #999999;
        font-size: 30upx;
      }
    }
    // .bg {
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   height: 240upx;
    //   width: 100%;
    //   background: rgba(255, 255, 255, 0.6);
    // }
  }
}
</style>