web-zk-h5/components/cartBtmList.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="context">
      <view
        class="kuang"
        v-for="(item, index) in shopCarList"
        :key="item.specialArea"
      >
        
        <view
          v-for="(ctem, cndex) in item.shoppingCartList"
          :key="cndex"
          class="goodList"
        >
          <!-- <u-checkbox activeColor="red"
                            :name="ctem.shoppingId"></u-checkbox> -->
          <view class="goodList_i">
            <view class="goodList_it">
              <img :src="ctem.cover1" class="cover" alt="" />
              <view class="goodList_ir">
                <view class="tit1">
                  {{ ctem.waresName }}
                </view>
                <view class="goodList_ib">
                  <view class="tit2">
                    {{ ctem.waresPrice | numberToCurrency | isLocal }}
                  </view>
                  <view class="tit3"
                    >PV: {{ ctem.achieve | numberToCurrency | isLocal }}</view
                  >
                </view>
              </view>
            </view>
            <view
              v-for="(stem, sndex) in ctem.productParams"
              :key="sndex"
              class="product_i"
            >
              <img :src="stem.cover" alt="" />
              <view class="product_il">
                <view class="tit4"
                  >{{ stem.productName
                  }}{{
                    (stem.waresItemsParamsList.length > 0 &&
                      stem.waresItemsParamsList[0].specsName) ||
                    ""
                  }}</view
                >
                <!-- <view class="tit4"></view> -->
                <view class="tit5"
                  >x{{
                    (stem.waresItemsParamsList.length > 0 &&
                      stem.waresItemsParamsList[0].quantity) ||
                    ""
                  }}</view
                >
              </view>
            </view>
            <view class="goodsSet">
              <u-number-box
                :min="1"
                @change="changeCar($event, item, ctem)"
                v-model="ctem.number"
              ></u-number-box>
              <u-icon
                name="trash"
                @tap="delOne(ctem)"
                size="26"
                color="#BFBFBF"
              ></u-icon>
            </view>
          </view>
        </view>
        <!-- </u-checkbox-group> -->
      </view>
    </view>
    <view class="kong_t" v-show="cartEmpty">
      <img class="kong" src="@/static/images/kong.png" alt=""
    /></view>
    <view class="zhan"></view>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_l">
          <view class="footer_ll">
            <u-icon size="36" name="shopping-cart"> </u-icon>
            <view class="footer_lr">
              <view class="r1">{{
                totalPrice | numberToCurrency | isLocal
              }}</view>
              <view class="l1">PV:{{ totalAchive | numberToCurrency }}</view>
            </view>
          </view>
        </view>
        <view class="footer_r">
          <u-button
            type="success"
            class="uBtn"
            shape="circle"
            :loading="isLoading"
            :loadingText="'购买中'"
            @tap="goBuy"
            :disabled="submitDisabled"
            color="#005BAC"
            >{{ '去结算' }}
          </u-button>
        </view>
      </view>
    </view>
    <view class="pp">
      <u-popup
        :show="dialogVisible2"
        :closeable="true"
        :closeOnClickOverlay="false"
        mode="center"
        @close="dialogVisible2 = false"
      >
        <view class="popList">
          <u-checkbox-group
            v-model="allTable"
            placement="column"
            @change="handleSelectionChange"
          >
            <view class="popList_i" v-for="item in tableData" :key="item.pkId">
              <u-checkbox :name="item.pkId"> </u-checkbox>
              <view class="popList_ii">
                <img :src="item.cover1" alt="" />
                <view>
                  <view>{{ item.waresName }}</view>
                  <view>{{ item.waresCode }}</view>
                  <view>{{ item.waresPrice }}</view>
                  <!-- <view>{{ item.quantity }}</view> -->
                  <u-number-box v-model="item.quantity" :min="1"></u-number-box>
                </view>
              </view>
            </view>
          </u-checkbox-group>
          <view class="popBtm">
            <view>合计:{{ total | toThousandthAndKeepDecimal }}</view>
            <view class="que" @click="tableTrue">确定</view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
import * as api from "@/config/goods";

export default {
  data() {
    return {
      isSelectAll: [],
      shopCarList: [],
      isLoading: false,
      isTo: 0,
      goodsCheck: [],
      totalPrice: 0,
      totalAchive: 0,
      num: 0,
      pkCountry: 1,
      specialArea: 1,
      userInfo: {},
      tableData: [],
      dialogVisible2: false,
      selTable: [],
      allTable: [],
      total: "0.00",
      // show:false,
      // title:'提示',
      // content:'确认删除该商品？'
    };
  },
  computed: {
    submitDisabled() {
      if (this.goodsCheck[0]?.orderItemsParams) {
        return this.goodsCheck[0]?.orderItemsParams?.length === 0
      }
      return true
    },
    cartEmpty () {
      return this.shopCarList.length === 0 || this.shopCarList[0]?.shoppingCartList?.length === 0
    }
  },
  watch: {
    selTable: {
      handler(n, o) {
        let total = 0;
        n.forEach((item) => {
          total += Number(item.waresPrice) * item.quantity;
        });
        this.total = total;
      },
      deep: true,
    },
  },
  props: {
    areas: {
      type: Number | String,
      default: 1,
    },
  },
  onLoad(options) {
    // this.getCarList()
  },
  onShow() {
    // this.getCarList()
  },
  methods: {
    tableTrue() {
      if (this.selTable.length > 0) {
        let a = {
          specialArea: this.goodsCheck[0].specialArea,
          orderItemsParams: [],
        };
        a.orderItemsParams = this.selTable.map((item) => {
          return {
            waresCode: item.waresCode,
            quantity: item.quantity,
            waresItemsParamList: item.productGroup,
            energySilo: 1,
          };
        });
        a.orderItemsParams.forEach((item) => {
          item.waresItemsParamList = item.waresItemsParamList.map((ctem) => {
            return {
              pkWaresSpecsSku: ctem.pkSkuId,
              quantity: ctem.quantity,
            };
          });
        });
        api.energyShopSilo(a).then((res) => {
          if (res.code == 200) {
            this.dialogVisible2 = false;
            let shoppArr = this.goodsCheck[0].orderItemsParams.map((item) => {
              return item.shoppingId;
            });
            if (this.goodsCheck[0].specialArea == 1) {
              uni.navigateTo({
                url:
                  "/pages/regiest/index?specialArea=" +
                  this.goodsCheck[0].specialArea +
                  "&shoppArr=" +
                  JSON.stringify(shoppArr) +
                  "&selTable=" +
                  JSON.stringify(this.selTable),
              });
            } else if (this.goodsCheck[0].specialArea == 2) {
              uni.navigateTo({
                url:
                  "/pages/other/index?specialArea=" +
                  this.goodsCheck[0].specialArea +
                  "&shoppArr=" +
                  JSON.stringify(shoppArr) +
                  "&selTable=" +
                  JSON.stringify(this.selTable),
              });
            }
          }
        });
      } else {
        uni.showToast({
          title: "请选择赠品",
          icon: "none",
        });
      }
    },
    handleSelectionChange(val) {
      let arr = [];
      this.tableData.forEach((item) => {
        val.forEach((ctem) => {
          if (item.pkId == ctem) {
            arr.push(item);
          }
        });
      });
      this.selTable = arr;
    },
    selectAll(e) {
      let i = 0;
      // isSelected
      if (e.length > 0) {
        this.shopCarList.forEach((item) => {
          item.isSelected = true;
          item.shoppingCartList.forEach((ctem) => {
            ctem.isSelected = true;
            item.isSelect.push(ctem.shoppingId);
          });
        });
        this.shopCarList.forEach((item) => {
          if (item.isSelected) {
            i++;
          }
        });
        this.isTo = i;
        // this.checkArea()
      } else {
        this.shopCarList.forEach((item) => {
          item.isSelected = false;
          item.shoppingCartList.forEach((ctem) => {
            ctem.isSelected = false;
            item.isSelect = [];
          });
        });
        this.shopCarList.forEach((item) => {
          if (item.isSelected) {
            i++;
          }
        });
        this.isTo = i;
        // this.checkArea()
      }
    },
    delAll() {
      let arr = [];
      this.shopCarList.forEach((item) => {
        item.isSelect.forEach((ctem) => {
          arr.push({
            shoppingId: ctem,
          });
        });
      });
      api.batchDelShopping({ deleteList: arr }).then((res) => {
        this.getCarList();
        // this.getShoppingCount()
        uni.showToast({
          title: '删除成功',
          icon: "none",
          duration: 1500,
        });
      });
    },
    goBuy() {
      let shoppArr = this.goodsCheck[0].orderItemsParams.map((item) => {
        return item.shoppingId;
      });
      uni.setStorageSync("allGoods", JSON.stringify(shoppArr));
      if (
        this.goodsCheck[0].specialArea == 1 ||
        this.goodsCheck[0].specialArea == 24
      ) {
        let deleteList = [];
        shoppArr.forEach((item) => {
          deleteList.push({
            shoppingId: item,
          });
        });
        uni.navigateTo({
          url:
            "/pages/regiest/index?specialArea=" +
            this.goodsCheck[0].specialArea +
            "&shoppArr=" +
            JSON.stringify(shoppArr),
        });
      } else if (this.goodsCheck[0].specialArea == 21) {
        if (
          this.userInfo.registerShare == 0 ||
          this.userInfo.registerFans == 0
        ) {
          uni.navigateTo({
            url:
              "/pages/shareArea/haiShare?allData=" +
              JSON.stringify(this.goodsCheck[0].orderItemsParams),
          });
        } else {
          uni.setStorageSync(
            "haiConfirm",
            JSON.stringify(this.goodsCheck[0].orderItemsParams)
          );
          uni.navigateTo({
            url: "/pages/other/haiConfirm?shoppArr=" + JSON.stringify(shoppArr),
          });
        }
      } else if (this.goodsCheck[0].specialArea == 7) {
        uni.navigateTo({
          url:
            "/pages/hiFans/index?specialArea=" +
            this.goodsCheck[0].specialArea +
            "&shoppArr=" +
            JSON.stringify(shoppArr),
        });
      } else {
        if (this.goodsCheck[0].specialArea == 2) {
          let deleteList = [];
          shoppArr.forEach((item) => {
            deleteList.push({
              shoppingId: item,
            });
          });
          uni.navigateTo({
            url:
              "/pages/other/index?specialArea=" +
              this.goodsCheck[0].specialArea +
              "&shoppArr=" +
              JSON.stringify(shoppArr),
          });
        } else if (this.goodsCheck[0].specialArea == 30) {
          if (this.goodsCheck[0].orderItemsParams.length > 1) {
            uni.showToast({
              title: "续约专区每次只能购买一件商品",
              icon: "none",
            });
            return false;
          } else {
            let num = this.goodsCheck[0].orderItemsParams.some(
              (item) => item.quantity > 1
            );
            if (num) {
              uni.showToast({
                title: "续约专区每次只能购买一件商品",
                icon: "none",
              });
              return false;
            } else {
              uni.navigateTo({
                url:
                  "/pages/other/index?specialArea=" +
                  this.goodsCheck[0].specialArea +
                  "&shoppArr=" +
                  JSON.stringify(shoppArr),
              });
            }
          }
        } else if(this.goodsCheck[0].specialArea == 31){
          if (this.totalPrice < 1000) {
            uni.showToast({
              title: "购买商品总价格不能低于1000元",
              icon: "none",
              duration: 1500,
            });
          }else{
            uni.navigateTo({
            url:
              "/pages/other/index?specialArea=" +
              this.goodsCheck[0].specialArea +
              "&shoppArr=" +
              JSON.stringify(shoppArr),
          });
          }
        }else {
          uni.navigateTo({
            url:
              "/pages/other/index?specialArea=" +
              this.goodsCheck[0].specialArea +
              "&shoppArr=" +
              JSON.stringify(shoppArr),
          });
        }
      }
    },
    // 修改数量
    changeCar(e, item, ctem) {
      api
        .plusReduceShopping({
          shoppingId: ctem.shoppingId,
          number: e.value,
          specialArea: item.specialArea,
        })
        .then((res) => {
          if (res.code == 200) {
            this.dealData();
          } else {
            this.getCarList();
          }

          // this.getShoppingCount()
        });
    },
    // 计算价格
    checkPrice() {
      let totalPrice = 0;
      let totalAchive = 0;
      let num = 0;
      this.goodsCheck.forEach((item) => {
        item.orderItemsParams.forEach((ctem) => {
          totalPrice += parseFloat(ctem.waresPrice * ctem.quantity);
          totalAchive += parseFloat(ctem.achieve * ctem.quantity);
          num += ctem.quantity;
        });
      });
      // if (this.goodsCheck.length != 1) {
      this.totalPrice = totalPrice.toFixed(2);
      this.totalAchive = totalAchive.toFixed(2);
      this.num = num;
      // }
    },
    checkboxChange(e, item) {
      if (e.length > 0) {
        this.$set(item, "isSelected", true);
        this.$set(item, "isSelect", e);
        // this.checkArea()
      } else {
        this.$set(item, "isSelected", false);
        this.$set(item, "isSelect", e);
        // this.checkArea()
      }
      let i = 0;
      this.shopCarList.forEach((item) => {
        if (item.isSelected) {
          i++;
        }
      });
      this.isTo = i;
      let blin = true;
      this.shopCarList.forEach((item) => {
        if (item.isSelect.length != item.shoppingCartList.length) {
          blin = false;
        }
      });
      if (blin) {
        this.isSelectAll = [1];
      } else {
        this.isSelectAll = [];
      }
    },
    // 单删
    delOne(ctem) {
      let deleteList = [
        {
          shoppingId: ctem.shoppingId,
        },
      ];
      api.batchDelShopping({ deleteList: deleteList }).then((res) => {
        this.getCarList();
        // this.getShoppingCount()
        uni.showToast({
          title: '删除成功',
          icon: "none",
          duration: 1500,
        });
      });
    },
    getCarList(specialArea) {
      if (specialArea) {
        this.specialArea = specialArea;
        this.userInfo = uni.getStorageSync("User");
        if (this.specialArea == 1) {
          if (uni.getStorageSync("pkCountry")) {
            this.pkCountry = uni.getStorageSync("pkCountry");
          } else {
            this.pkCountry = this.userInfo.pkSettleCountry;
          }
        } else {
          this.pkCountry = this.userInfo.pkSettleCountry;
        }
      }
      api
        .getShopping({
          specialArea: this.specialArea,
          pkCountry: this.pkCountry,
        })
        .then((res) => {
          res.data.forEach((item) => {
            item.isSelected = false;
            item.isSelect = [];
            item.shoppingCartList.forEach((ctem) => {
              ctem.isSelected = false;
              ctem.waresItemsParamList = [];
              if (item.specialArea != 21) {
                ctem.productParams.forEach((stem) => {
                  if (stem.waresItemsParamsList.length > 0) {
                    stem.waresItemsParamsList[0].pkWaresSpecsSku =
                      stem.waresItemsParamsList[0].pkSkuId;
                    stem.waresItemsParamsList[0].productName = stem.productName;
                    ctem.waresItemsParamList.push(stem.waresItemsParamsList[0]);
                  }
                });
              } else {
              }
            });
          });
          this.shopCarList = res.data;
          this.goPay();
          this.dealData();
        });
    },
    goPay() {
      let arr = [];
      this.shopCarList.forEach((item) => {
        item.shoppingCartList.forEach((ctem) => {
          arr.push({
            specialArea: item.specialArea,
            orderItemsParams: [
              {
                waresCode: ctem.waresCode,
                waresName: ctem.waresName,
                achieve: ctem.achieve,
                shoppingId: ctem.shoppingId,
                waresPrice: ctem.waresPrice,
                cover1: ctem.cover1,
                source: ctem.source,
                quantity: ctem.number,
                waresItemsParamList: ctem.waresItemsParamList,
                waresSkuList: ctem.waresSkuList || [],
              },
            ],
          });
        });
      });
      const arrayHashmap = arr.reduce((obj, item) => {
        obj[item.specialArea]
          ? obj[item.specialArea].orderItemsParams.push(
              ...item.orderItemsParams
            )
          : (obj[item.specialArea] = item);
        return obj;
      }, {});
      this.goodsCheck = Object.values(arrayHashmap);

    },
    // 处理数据
    dealData() {
      let arr = [
        {
          specialArea: this.shopCarList[0].specialArea,
          orderItemsParams: [],
        },
      ];
      this.shopCarList[0].shoppingCartList.forEach((ctem) => {
        arr[0].orderItemsParams.push({
          waresCode: ctem.waresCode,
          waresName: ctem.waresName,
          shoppingId: ctem.shoppingId,
          achieve: ctem.achieve,
          waresPrice: ctem.waresPrice,
          cover1: ctem.cover1,
          source: ctem.source,
          quantity: ctem.number,
          waresItemsParamList: ctem.waresItemsParamList,
          waresSkuList: ctem.waresSkuList || [],
        });
      });
      this.goodsCheck = arr;
      this.checkPrice();
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
  height: 50vh;
  overflow-y: auto;
}

.context {
  // padding: 24rpx;
}

.kuang {
  // padding: 20rpx 40rpx;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5); // border-top: 20rpx solid #f6f5f3;
}

.kuang_t {
  border-bottom: 1px solid #eeeeee;
  padding: 40rpx 24rpx;
}

.goodList {
  display: flex;
  padding: 0 20rpx;
  border-bottom: 1px solid #eee;
}

.cover {
  width: 136rpx;
  height: 136rpx;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 10rpx;
}

.goodList_i {
  flex: 1;
}

.goodList_it {
  display: flex;
  padding: 20rpx 0;
  .goodList_ir {
    margin-left: 20rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .goodList_ib {
      display: flex;
      align-items: center;
      justify-content: space-between;
      img {
        width: 56rpx;
        height: 56rpx;
      }
    }
  }
}

.goodsSet {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26rpx 0;
}

.product_i {
  display: flex;
  align-items: center;
  background: #f6f6f6;
  padding: 15rpx;
  .product_il {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
    margin-left: 20rpx;
  }
  img {
    width: 50rpx;
    height: 50rpx;
    background: #ffffff;
    border: 1px solid #dddddd;
    border-radius: 10rpx;
  }
}

.tit1 {
  font-size: 28rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333333;
}

.tit2 {
  font-size: 36rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #f82c1a;
}

.tit3 {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.tit4 {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

.tit5 {
  font-size: 24rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}

.footer_f {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
}

.footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  background: #fff;
  .footer_l {
    display: flex;
    align-items: center;
    .footer_ll {
      position: relative;
      display: flex;
      align-items: center;
      .pop {
        position: absolute;
        top: -16rpx;
        right: -16rpx;
        width: 28rpx;
        height: 28rpx;
        line-height: 28rpx;
        background: #005BAC;
        box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        text-align: center;
        font-size: 22rpx;
        font-family: Arial;
        font-weight: bold;
        color: #f1f2f7;
      }
    }
  }
  .footer_lr {
    margin-left: 20rpx; // display: flex;
    // align-items: center;
  }
  .footer_r {
    // flex: 1;
    display: flex;
    align-items: center;
    font-size: 20rpx;
    font-weight: 500;
    color: #333333;
  }
}

.disFlex {
  display: flex;
  align-items: center;
}

.h1 {
  font-size: 10px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 20rpx;
}

.r1 {
  font-size: 36rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #f82c1a;
  margin-right: 20rpx;
}

.l1 {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
  margin-right: 20rpx;
}

.uBtn {
  padding: 20rpx 70rpx;
}

.zhan {
  height: 240rpx;
}

.deldel {
  color: #005BAC;
  margin-left: 20rpx;
}

.sel {
  position: relative;
}

.kong_t {
  text-align: center;
  padding-top: 20%;
}

.kong {
  width: 576rpx;
  height: 406rpx;
}
::v-deep .pp .u-popup__content {
  width: 80%;
  height: 60%;
  overflow-y: auto;
}
.popList {
  padding-top: 40rpx;
}
.popList_i {
  display: flex;
  align-items: center;
  padding: 0rpx 40rpx 0rpx 20rpx;
  margin-bottom: 40rpx;
  .popList_ii {
    display: flex;
    align-items: center;
  }
  img {
    width: 160rpx;
    height: 160rpx;
    border-radius: 8px;
    margin-right: 20rpx;
  }
}
.popBtm {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0px 2px 20px 0px rgba(204, 204, 204, 1);
  padding: 20rpx 40rpx;
  font-size: 14px;
  .que {
    background: #e03030;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    padding: 10rpx 20rpx;
  }
}
</style>