xiamen-sb-uniapp/components/shopCar/shopCar.vue

<template>
  <view class="common-car">
    <view class="empty-shop-car" v-if="isEmpty">
      <image src="../../static/empty_shop_car.png" class="empty-shop-car-image" mode=""></image>
      <text>当前列表是空的</text>
      <view class="empty-shop-car-btn">
        <text>去逛逛</text>
      </view>
    </view>
    <view class="shop-car" v-else>

      <view class="store-box" v-for="(item,index) in datas" :key="index">

        <view class="goodsInfo">
          <!--					<image src="../../static/select.png" v-if="itemw.checked == 2" class="checked-image"
						mode="" @tap="goodsCheck(indexq,indexw,itemw.checked)"></image>
					<image src="../../static/not_select.png" v-else class="checked-image" mode=""
						@tap="goodsCheck(indexq,indexw,itemw.checked)"></image>-->
          <view class="goodsInfo-right">
            <image v-if="item.image" :src="$BaseTool.UserUtil.getFileUrl(item.image)" class="goods-image" mode=""></image>
            <image v-else :src="spare_default" class="goods-image" mode=""></image>
            <view class="goodsInfo-box">
              <view class="goods-box">
                <text class="goods-price">{{item.name}}</text>
                <view class="">
                  <button class="mini-btn" @click="deleteSpare(index)" type="default" size="mini">删除</button>
                </view>
              </view>
              <text class="spe">规格：{{item.remark}}</text>
              <view class="goods-box">
                <text class="goods-price">¥{{item.price}}</text>
                <view class="goods-num-box">
                  <view class="goods-image" @tap="sub(index,item.num)">
                    <text>-</text>
                  </view>
                  <view class="goods-num">
                    <input type="digit" v-model="item.num" />
                  </view>
                  <view class="goods-image" @tap="add(index,item.num)">
                    <text>+</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="statistics-box">
        <view class="statistics">
          <!--					<view class="statistics-left" v-if="statisticsIndex" @tap="allCheck">
						<image src="../../static/select.png"  class="checked-image" mode="" >
						</image>
						<text>全选</text>
					</view>
					<view class="statistics-left" v-else @tap="allCheck">
						<image src="../../static/not_select.png"  class="checked-image" mode="" >
						</image>
						<text>全选</text>
					</view>-->
          <view class="statistics-right" v-if="isCut" @tap="accounts">
            <text>总计：</text><text class="text-color">¥{{total}}</text>
            <view class="btn">
              <text>提交</text>
            </view>
          </view>
          <view class="statistics-right" v-else @tap="delect">
            <view class="btn">
              <text>删除</text>
            </view>
          </view>
        </view>
        <view class="gap"></view>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'commonCar',
  data() {
    return {
      isEmpty: true,
      iPhoneX: false,
      datas: [],
      spare_default: '/static/images/spare_default.png',
      statisticsIndex: false,
      total: 0,
      isCut: true
    }
  },
  mounted() {
    this.statistics()
  },
  watch: {
    datas: {
      //普通的watch监听
      handler(val, oldVal) {
        console.log('watch:          ')
        console.log('val:          ' + val)
        console.log('oldVal:          ' + oldVal)
        this.isEmpty = false
        this.statistics()
      },
      immediate: true,
      deep: true //true 深度监听
    }
  },
  props: {
    list: {
      type: [Object, Array],
      default: () => []
    }
  },
  created() {
    this.datas = this.list
    if (this.datas.length == 0) {
      this.isEmpty = true
      return
    }

    this.isEmpty = false
    // this.statistics()
    console.log('created:          ')
  },
  methods: {
    //备件选择
    goodsCheck(storeIndex, goodsIndex, goodsChecked) {
      if (goodsChecked == 1) {
        this.datas[storeIndex].goods[goodsIndex].checked = 2
      } else {
        this.datas[storeIndex].goods[goodsIndex].checked = 1
      }
      //判断是否该店铺全选
      let storeChecked = true
      this.datas[storeIndex].goods.map((item, index) => {
        if (item.checked == 1) {
          storeChecked = false
        }
      })
      if (storeChecked == false) {
        this.datas[storeIndex].checked = 1
      } else {
        this.datas[storeIndex].checked = 2
      }

      //判断是否全选
      let statisticsIndex = true
      this.datas.find((item, index) => {
        if (item.checked == 1) {
          statisticsIndex = false
        }
      })
      if (statisticsIndex == false) {
        this.statisticsIndex = false
      } else {
        this.statisticsIndex = true
      }

      this.statistics()
    },
    //店铺选择
    storeCheck(storeIndex, storeCheck) {
      if (storeCheck == 1) {
        this.datas[storeIndex].checked = 2
        this.datas[storeIndex].goods.find((item, index) => {
          item.checked = 2
        })
      } else {
        this.datas[storeIndex].checked = 1
        this.datas[storeIndex].goods.find((item, index) => {
          item.checked = 1
        })
      }
      //判断是否全选
      let statisticsIndex = true
      this.datas.find((item, index) => {
        if (item.checked == 1) {
          statisticsIndex = false
        }
      })
      if (statisticsIndex == false) {
        this.statisticsIndex = false
      } else {
        this.statisticsIndex = true
      }
      this.statistics()
    },
    // 删除备件
    deleteSpare(goodsIndex) {
      this.datas.splice(goodsIndex, 1)
    },
    //减少
    sub(goodsIndex, goodsnum) {
      if (goodsnum == 0) {
        return
      } else {
        this.datas[goodsIndex].num--
        this.datas[goodsIndex].num = this.datas[goodsIndex].num.toFixed(2)
      }
      this.statistics()
    },
    //增加
    add(goodsIndex, goodsnum) {
      this.datas[goodsIndex].num++
      this.datas[goodsIndex].num = this.datas[goodsIndex].num.toFixed(2)
      this.statistics()
    },
    //全选
    allCheck() {
      if (this.statisticsIndex) {
        this.datas.find((item, index) => {
          item.checked = 1
        })
        this.statisticsIndex = false
      } else {
        this.datas.find((item, index) => {
          item.checked = 2
        })
        this.statisticsIndex = true
      }
      this.statistics()
    },
    //更新数据
    setDatas(datas) {
      this.datas = datas
    },
    //统计
    statistics() {
      let total = 0
      this.datas.find((item, index) => {
        if (item.checked == 2) {
          total = total + item.price * item.num
        }
      })
      this.total = total.toFixed(2)
    },
    cut() {
      this.isCut = !this.isCut
      this.statisticsIndex = true
      this.allCheck()
    },
    accounts() {
      let judge = this.judgeSelect()
      if (judge) {
        this.$emit('accounts', this.datas)
      } else {
        uni.showToast({
          title: '您当前未选择任何备件,提交失败',
          icon: 'none'
        })
      }
    },
    delect() {
      let judge = this.judgeSelect()
      if (judge) {
        this.$emit('delect', this.datas)
      } else {
        uni.showToast({
          title: '您当前未选择任何备件,删除失败',
          icon: 'none'
        })
      }
    },
    judgeSelect() {
      let judge = false
      this.datas.find((item, index) => {
        if (item.checked == 2) {
          judge = true
        }
      })
      return judge
    }
  }
}
</script>

<style lang="scss" scoped>
.common-car {
  width: 750rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f5f5f5;
}

.empty-shop-car {
  //width: 750rpx;
  min-height: 680rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .empty-shop-car-image {
    width: 340rpx;
    height: 278rpx;
    margin-top: 102rpx;
  }

  text {
    margin-top: 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #666666;
  }

  .empty-shop-car-btn {
    width: 240rpx;
    height: 90rpx;
    background: #fbbc02;
    border-radius: 200rpx;
    margin-top: 40rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
    font-weight: 400;
    color: #313133;
  }
}

.shop-car {
  display: flex;
  flex-direction: column;
  align-items: center;

  .shop-car-header {
    width: 690rpx;
    height: 80rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;

    text {
      font-size: 28rpx;
      font-weight: 400;
      color: #313133;
    }
  }

  .store-box {
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;

    .store-header {
      width: 690rpx;
      height: 78rpx;
      padding: 0 30rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #313133;

      .checked-image {
        width: 36rpx;
        height: 36rpx;
      }

      text {
        font-size: 28rpx;
        font-weight: 400;
        color: #313133;
        margin-left: 20rpx;
      }

      .label {
        width: 14rpx;
        height: 24rpx;
        margin-left: 10rpx;
        margin-top: 5rpx;
      }
    }

    .goodsInfo {
      height: 246rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 2rpx solid #ededed;

      &:nth-last-child(1) {
        border: none;
      }

      .checked-image {
        width: 36rpx;
        height: 36rpx;
      }

      .goodsInfo-right {
        height: 246rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        border-radius: 11px;

        .goods-image {
          width: 160rpx;
          height: 160rpx;
          padding-left: 20rpx;
        }

        .goodsInfo-box {
          width: 500rpx;
          margin-left: 24rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .goods-name {
            width: 428rpx;
            font-size: 26rpx;
            font-weight: 400;
            color: #313133;
          }

          .spe {
            width: 480rpx;
            margin-top: 10rpx;
            font-size: 30rpx;
            font-weight: 400;
            color: #919298;
          }

          .goods-box {
            width: 480rpx;
            margin-top: 18rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            .goods-price {
              font-size: 36rpx;
              font-weight: 400;
              color: #313133;
            }

            .goods-num-box {
              width: 240rpx;
              height: 46rpx;
              display: flex;
              flex-direction: row;
              align-items: center;

              .goods-image {
                height: 24px;
                text-align: center;
                line-height: 44rpx;
                border: 1rpx solid #cfcfcf;
                font-size: 18px;
              }

              .goods-num {
                text-align: center;
                line-height: 44rpx;
                font-size: 33rpx;
                font-weight: 400;
                color: #666666;
                border-top: 1px solid #cfcfcf;
                border-bottom: 1px solid #cfcfcf;
              }
            }
          }
        }
      }
    }
  }

  .statistics-box {
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    position: fixed;
    bottom: 0;

    .statistics {
      width: 720rpx;
      padding: 0 0 0 30rpx;
      height: 98rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;

      .statistics-left {
        width: 120rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        image {
          width: 36rpx;
          height: 36rpx;
        }

        text {
          font-size: 30rpx;
          font-weight: 400;
          color: #313133;
        }
      }

      .statistics-right {
        width: 600rpx;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;

        .btn {
          width: 218rpx;
          height: 98rpx;
          background: #fbbc02;
          text-align: center;
          line-height: 98rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #313133;
          margin-left: 40rpx;
        }

        text {
          font-size: 30rpx;
          font-weight: 400;
          color: #313133;
        }

        .text-color {
          color: rgba(242, 18, 18, 1);
        }
      }
    }

    .gap {
      width: 750rpx;
      height: 40rpx;
    }
  }
}
</style>