wx-qhb/pages/cart/cart.vue

<template>
  <!-- 购物车 -->
  <view class="page" @click="num = ''">
    <u-navbar :safeAreaInsetTop="true" :placeholder="true">
      <view class="u-nav-slot" slot="left">
        <view class="">
          <text class="shopcart">{{ i18n.Shopping }}</text>
          <text class="sum">({{ goodsNum }})</text>
        </view>
      </view>
      <view class="u-nav-slot" slot="right">
        <view class="u-flex">
          <text @click="admin" v-if="success">{{ i18n.manage }}</text>
          <text @click="admin" v-else>{{ i18n.complete }}</text>
          <view class="" style="width: 200rpx"></view>
        </view>
      </view>
    </u-navbar>
    <u-checkbox-group
      v-model="checkboxValue1"
      placement="column"
      @change="checkboxChange"
    >
      <view class="box" v-for="(item, idx) in goodsList" :key="idx">
        <view class="item">
          <view class="shopname u-flex">
            <image
              src="/static/mine/354.png"
              class="circle"
              mode="scaleToFill"
              @click="shopSelectAll(item.goods)"
              v-if="shop(item.goods)"
            />
            <image
              src="/static/mine/353.png"
              class="circle"
              mode="scaleToFill"
              @click="shopSelectAll(item.goods)"
              v-else
            />

            <image
              :src="item.image"
              style="width: 28rpx; height: 28rpx"
              mode=""
            ></image>
            <text>{{ item.merchant_name }}</text>
            <image
              src="/static/express/next1.png"
              style="width: 32rpx; height: 32rpx"
              mode=""
            ></image>
          </view>
          <u-swipe-action>
            <view
              class="u-flex"
              style="margin-top: 30rpx; width: 100%"
              v-for="(chid, index) in item.goods"
              :key="index"
            >
              <u-swipe-action-item
                ref="show"
                :options="options2"
                @click="followOrdelete"
                :autoClose="true"
                :name="chid.cart.id"
                :disabled="chid.status == 'down'"
              >
                <!-- 				<view class="" style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 100;background-color: rgba(255, 255, 255, 0.5);"></view> -->
                <u-checkbox
                  shape="circle"
                  :customStyle="{ marginBottom: '8px' }"
                  :name="chid.cart.id"
                  activeColor="#F83224"
                  :disabled="chid.status == 'down'"
                >
                </u-checkbox>
                <view
                  class=""
                  style="
                    position: relative;
                    width: 172rpx;
                    height: 172rpx;
                    border-radius: 16rpx;
                  "
                >
                  <image
                    :src="chid.sku_item[0].image"
                    style="width: 172rpx; height: 172rpx; border-radius: 20rpx"
                    mode=""
                  >
                  </image>
                  <view class="down" v-if="chid.status == 'down'">
                    <view class="sold"> {{i18n.offtheshelves}} </view>
                  </view>
                </view>
                <view
                  class="good"
                  style="flex: 1; margin-left: 10rpx; width: 65%"
                >
                  <view class="goodname">{{ chid.name_cn }}</view>
                  <view class="goods" v-if="chid.sku_item.length > 0">{{
                    chid.sku_item[0].item
                  }}</view>
                  <view class="" style="margin-top: 21rpx">
                    <view
                      class="goodtab"
                      v-for="itemLabel in chid.label_arr"
                      :key="itemLabel.id"
                    >
                      {{ itemLabel.name_cn }}
                    </view>
                  </view>
                  <view
                    class="u-flex u-row-between"
                    style="width: 100%; margin-top: 20rpx"
                  >
                    <view class="" v-if="chid.sku_item.length > 0">
                      <text class="money">¥</text>
                      <text class="money" style="font-size: 30rpx">{{
                        chid.sku_item[0].discount_price.split(".")[0]
                      }}</text>
                      <text class="money"
                        >.{{
                          chid.sku_item[0].discount_price.split(".")[1]
                        }}</text
                      >
                      <text class="weight"
                        >{{ chid.sku_item[0].weight }}kg</text
                      >
                    </view>
                    <view class="aaaaaa">
                      <!-- <view class="delect" v-if='dele'>{{i18n.delete}}</view> -->
                      <view class="" v-if="num == chid.cart.id && success">
                        <!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
                        <u-number-box
                          v-model="chid.cart.goods_num"
                          @change="addOrReduce"
                        >
                          <view slot="minus" class="minus">
                            <u-icon
                              name="minus"
                              color="#B5B5B5"
                              size="12"
                            ></u-icon>
                          </view>
                          <text
                            slot="input"
                            style="
                              width: 50px;
                              text-align: center;
                              font-size: 20rpx;
                            "
                            class="input"
                            >{{ chid.cart.goods_num }}</text
                          >
                          <view slot="plus" class="plus">
                            <u-icon
                              name="plus"
                              color="#B5B5B5"
                              size="12"
                            ></u-icon>
                          </view>
                        </u-number-box>
                      </view>
                      <view
                        class="num"
                        v-if="
                          num != chid.cart.id &&
                          success &&
                          chid.status == 'normal'
                        "
                        @click.stop="num = chid.cart.id"
                      >
                        x{{ chid.cart.goods_num }}
                      </view>
                      <view
                        v-if="success && chid.status == 'down'"
                        class="del"
                        @click="
                          followOrdelete({
                            index: 1,
                            name: chid.cart.id,
                          })
                        "
                        >{{i18n.delete}}</view
                      >
                    </view>
                    <view
                      v-if="success == false"
                      class="icon delete-1"
                      @click="
                        followOrdelete({
                          index: 1,
                          name: chid.cart.id,
                        })
                      "
                    >
                      <u-icon name="trash" color="#fff" size="20"></u-icon>
                    </view>
                  </view>
                </view>
              </u-swipe-action-item>
            </view>
          </u-swipe-action>
        </view>
      </view>
    </u-checkbox-group>
    <u-toast ref="uToast"></u-toast>
    <view class="" style="height: 260rpx"></view>
    <view class="back-top" @click="backTop">
      <image
        class="back-icon"
        src="../../static/mine/355.png"
        mode="scaleToFill"
      />
      <text class="back-text">{{i18n.top}}</text>
    </view>
    <kj-tabbar
      ref="tabbar1"
      :value1="3"
      :success="success"
      @allSelect="allSelect"
      :goodsWeight="goodsWeight"
      :goodsPrice="String(goodsPrice.toFixed(2))"
      :goodsList="goodsList"
      :checkboxValue1="checkboxValue1"
      @selectDelete="selectDelete"
    ></kj-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dele: true,
      success: true,
      shopitem: -1,
      checkboxValue1: [], //商品数组
      value: 0,
      all: [], //全选数组
      goodsList: [],
      selectall: -1,
      goodsNum: 0, //购物车商品数量
      num: false,
      goodsWeight: 0, //商品重量
      goodsPrice: 0, //商品价格
      tabarheight: "",
      removeProducts: 0, //已下架的商品数量
    };
  },
  watch: {},
  computed: {
    i18n() {
      return this.$t("index");
    },
	options2(){
		var options = [
			{
			  text: this.i18n.Shiftfocus,
			  style: {
			    backgroundColor: "#FFB115",
			  },
			},
			{
			  text: this.i18n.delete,
			  style: {
			    backgroundColor: "#F83224",
			  },
			}
		]
		return options
	}
  },
  onLoad() {
    const systemInfo = wx.getSystemInfoSync();
    const tab =
      systemInfo.screenHeight -
      systemInfo.safeArea.bottom +
      systemInfo.statusBarHeight;
    this.tabarheight = tab;
  },
  onShow() {
    this.goodsNum = 0; //购物车商品数量
    this.goodsWeight = 0; //商品重量
    this.goodsPrice = 0; //商品价格
    this.checkboxValue1 = [];
    this.getShopCarList();
  },
  methods: {
    //返回顶部
    backTop() {
      uni.pageScrollTo({
        scrollTop: 0, // 滚动到页面的目标位置  这个是滚动到顶部, 0
        duration: 300, // 滚动动画的时长
      });
    },
    //商品下架之后的商品字体颜色
    getFontColor(status) {
      if (status == "down") {
        return "color:rgba(51, 51, 51, .6)";
      }
    },

    //关注商品 or 删除商品
    followOrdelete(e) {
      //关注商品
      if (e.index == 0) {
        this.goodsList.map((item) => {
          item.goods.map((items) => {
            if (e.name == items.cart.id) {
              console.log(items);
              uni.$u.http
                .post(`/api/interest/follow`, {
                  interest_type: 0,
                  interest_id: items.merchant_goods.id,
                })
                .then((res) => {
                  this.$refs.show.forEach((item) => item.closeHandler(true));
                  console.log(res);
                  uni.showToast({
                    title: "关注成功",
                    icon: "none",
                  });
                });
            }
          });
        });
      } else {
        //删除商品
        this.goodsList.map((item) => {
          item.goods.map((items) => {
            if (e.name == items.cart.id) {
              uni.$u.http
                .delete(`/api/cart?ids=${items.cart.id}`)
                .then((res) => {
                  this.$refs.uToast.show({
                    type: "default",
                    title: this.i18n.defaultTheme,
                    message: this.i18n.successfullydelete,
                  });
                  //删除后关闭滑动打开的单元格
                  this.$refs.show.forEach((item) => item.closeHandler(true));
                  this.getShopCarList();
                });
            }
          });
        });
      }
    },

    //多选删除
    selectDelete() {
      let goodsIdList = []; //筛选选中的商品id
      this.goodsList.map((item) => {
        item.goods.map((items) => {
          if (this.checkboxValue1.indexOf(items.cart.id) >= 0) {
            goodsIdList.push(items.cart.id);
          }
        });
      });
      uni.$u.http
        .delete(`/api/cart`, {
          ids: goodsIdList.join(","),
        })
        .then((res) => {
          this.$refs.uToast.show({
            type: "default",
            title: this.i18n.defaultTheme,
            message: this.i18n.successfullydelete,
          });
          this.checkboxValue1 = [];
          this.getShopCarList();
        });
    },

    shop(value) {
      let num = 0;
      value.map((item) => {
        if (this.checkboxValue1.indexOf(item.cart.id) >= 0) {
          num++;
        }
      });
      return num;
    },

    //获取排除下架的商品之后的商品数量
    getNormalGoodsNum(value) {
      let num = 0;
      value.map((item) => {
        if (item.status != "down") {
          num++;
        }
      });
      return num;
    },

    //修改购物车商品数量
    addOrReduce(n) {
      console.log(n);
      uni.$u.http
        .post(`/api/cart/num/${this.num}`, {
          goods_num: n.value,
          type: "",
        })
        .then((res) => {
          this.goodsPrice = 0;
          this.goodsWeight = 0;
          this.goodsList.map((item) => {
            item.goods.map((items) => {
              //判断是否有商品已被选中
              if (
                this.checkboxValue1.indexOf(items.cart.id) != -1 &&
                items.status != "down"
              ) {
                this.goodsWeight +=
                  items.sku_item[0].weight * items.cart.goods_num;
                this.goodsPrice +=
                  Number(items.sku_item[0].discount_price) *
                  items.cart.goods_num;
              }
            });
          });
        });
    },

    //店铺商品全选
    shopSelectAll(value) {
      this.goodsPrice = 0;
      this.goodsWeight = 0;
      //先判断存放选中的数组有没有选中的数据
      if (this.checkboxValue1.length == 0) {
        //没有数据则直接将选中店铺中的商品存入数组
        value.map((item) => {
          //商品下架不得选中
          if (item.status != "down") {
            this.checkboxValue1.push(item.cart.id);
          }
        });
      } else {
        if (
          this.shop(value) > 0 &&
          this.shop(value) == this.getNormalGoodsNum(value)
        ) {
          value.map((item) => {
            //先判断选中的商品数组中该店铺商品是否已被选中，已被选中则取消选中
            if (this.checkboxValue1.indexOf(item.cart.id) >= 0) {
              this.checkboxValue1.splice(
                this.checkboxValue1.indexOf(item.cart.id),
                1
              );
            }
          });
        } else if (
          (this.shop(value) > 0 &&
            this.shop(value) != this.getNormalGoodsNum(value)) ||
          this.shop(value) == 0
        ) {
          value.map((item) => {
            //先判断选中的商品数组中该店铺商品是否已被选中，未被选中则推入选中状态，商品下架不得选中
            if (
              this.checkboxValue1.indexOf(item.cart.id) == -1 &&
              item.status != "down"
            ) {
              this.checkboxValue1.push(item.cart.id);
            }
          });
        }
      }
      if (this.checkboxValue1.length == this.goodsNum - this.removeProducts) {
        this.$refs.tabbar1.cancelAll();
      } else {
        this.$refs.tabbar1.cancelAll(this.i18n.Cancel);
      }

      //将选中的商品价格相加
      this.goodsList.map((item) => {
        item.goods.map((items) => {
          if (this.checkboxValue1.indexOf(items.cart.id) > -1) {
            this.goodsWeight += items.sku_item[0].weight * items.cart.goods_num;
            this.goodsPrice +=
              Number(items.sku_item[0].discount_price) * items.cart.goods_num;
          }
        });
      });
      this.shop(value);
    },
    admin() {
      console.log(this.checkboxValue1);
      this.success = !this.success;
    },
    valChange(e) {
      console.log("当前值为: " + e.value);
    },
    //全选
    checkAll(e) {
      console.log("all", e);
    },
    //购物车单选
    checkboxChange(n) {
      console.log(n);
      //首先将价格和商品重量重置
      this.goodsWeight = 0;
      this.goodsPrice = 0;
      this.checkboxValue1 = n;
      this.goodsList.map((item) => {
        item.goods.map((items) => {
          if (n.indexOf(items.cart.id) > -1) {
            this.goodsWeight += items.sku_item[0].weight * items.cart.goods_num;
            this.goodsPrice +=
              Number(items.sku_item[0].discount_price) * items.cart.goods_num;
          }
        });
      });
      //判断是否全部选中
      if (
        this.checkboxValue1.length == this.goodsNum - this.removeProducts &&
        this.goodsNum != 0
      ) {
        this.$refs.tabbar1.cancelAll();
      } else if (
        this.checkboxValue1.length <
        this.goodsNum - this.removeProducts
      ) {
        this.$refs.tabbar1.cancelAll(this.i18n.Cancel);
      }
    },
    //购物车全选
    allSelect() {
      const all = this.$refs.tabbar1.cancelAll(this.i18n.selectall);
      if (
        this.checkboxValue1.length == this.goodsNum - this.removeProducts &&
        all.length == 0
      ) {
        return;
      }
      //判断是否已经全选，如已全选，则取消全选
      if (this.checkboxValue1.length == this.goodsNum - this.removeProducts) {
        this.checkboxValue1 = [];
        this.goodsPrice = 0;
        this.goodsWeight = 0;
      } else {
        this.goodsList.map((item) => {
          item.goods.map((items) => {
            //判断是否有商品已被选中
            if (
              this.checkboxValue1.indexOf(items.cart.id) == -1 &&
              items.status != "down"
            ) {
              this.checkboxValue1.push(items.cart.id);
              this.goodsWeight +=
                items.sku_item[0].weight * items.cart.goods_num;
              this.goodsPrice +=
                Number(items.sku_item[0].discount_price) * items.cart.goods_num;
            }
          });
        });
      }
    },
    //获取购物车数据
    getShopCarList() {
      this.goodsNum = 0;
      uni.$u.http.get(`/api/cart`).then((res) => {
        this.goodsList = res.data;
        //循环店铺，获取购物车商品数量
        this.goodsList.map((item) => {
          this.goodsNum += item.goods.length;
          item.goods.map((items) => {
            if (items.status == "down") {
              this.removeProducts++;
            }
          });
        });
      });
    },
  },
  // mounted() {
  //   this.getShopCarList();
  // },
};
</script>

<style lang="scss" scoped>
.page {
  position: relative;

  .back-top {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 88rpx;
    height: 88rpx;
    background-color: #fff;
    border-radius: 50%;
    bottom: 280rpx;
    right: 20rpx;
    z-index: 1000;

    .back-icon {
      width: 32rpx;
      height: 30rpx;
    }

    .back-text {
      font-size: 20rpx;
      color: #555;
    }
  }
}

.sold {
  width: 108rpx;
  height: 36rpx;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 18rpx;
  // padding: 0 14rpx;
  text-align: center;
  box-sizing: border-box;
  line-height: 36rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #ffffff;
  font-style: normal;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -18rpx;
  margin-left: -54rpx;
}

.delect {
  // width: 68rpx;
  height: 44rpx;
  line-height: 44rpx;
  border-radius: 22rpx;
  border: 1rpx solid #ff1515;
  padding: 0 14rpx;
  box-sizing: border-box;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 20rpx;
  color: #ff1515;
  text-align: center;
  font-style: normal;
}

.allweight {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #333333;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.sum {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #333333;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.summon {
  font-family: JDZhengHT, JDZhengHT;
  font-weight: 400;
  font-size: 24rpx;
  color: #ff1515;
  line-height: 30rpx;
  text-align: left;
  font-style: normal;
}

.settle {
  width: 176rpx;
  height: 68rpx;
  background: #f83224;
  border-radius: 38rpx;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 28rpx;
  color: #ffffff;
  line-height: 68rpx;
  text-align: center;
  font-style: normal;
  margin-left: 20rpx;
}

.icon {
  width: 40rpx;
  height: 40rpx;
  background: #f83224;
  border-radius: 12rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dle {
  width: 136rpx;
  height: 60rpx;
  border-radius: 38rpx;
  border: 1rpx solid #979797;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 26rpx;
  color: #333333;
  line-height: 60rpx;
  text-align: center;
  font-style: normal;
}

::v-deep .u-swipe-action-item__content {
  flex-direction: row !important;
}

::v-deep .u-swipe-action-item__right__button__wrapper {
  width: 32px;
  word-wrap: break-word;
  font-size: 20rpx !important;
}

::v-deep .u-swipe-action-item__right__button__wrapper__text {
  word-wrap: break-word;
}

::v-deep .u-swipe-action-item {
  width: 100% !important;
}

::v-deep .u-swipe-action-item__right {
  top: 2rpx !important;
  right: 2rpx !important;
  bottom: 2rpx !important;
}

.bottom {
  width: 750rpx;
  height: 100rpx;
  background: #ffffff;
  padding: 0 24rpx;
  box-sizing: border-box;
}

.num {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  border: 1rpx solid rgba(151, 151, 151, 0.4);
  font-family: HarmonyOS_Sans;
  font-size: 20rpx;
  color: #222222;
  line-height: 40rpx;
  text-align: center;
  font-style: normal;
}

.del {
  width: 68rpx;
  height: 44rpx;
  text-align: center;
  line-height: 44rpx;
  border: 2rpx solid #f83224;
  color: #f83224;
  font-size: 20rpx;
  border-radius: 22rpx;
}

.box {
  padding: 0rpx 24rpx 20rpx;
  margin-top: 20rpx;
  box-sizing: border-box;

  .item {
    padding: 36rpx 20rpx;
    box-sizing: border-box;
    width: 702rpx;
    // height: 556rpx;
    background: #ffffff;
    border-radius: 16rpx;

    .money {
      font-family: HarmonyOS_Sans_Medium;
      font-size: 20rpx;
      color: #ff1515;
      line-height: 26rpx;
      text-align: left;
      font-style: normal;
    }

    .weight {
      font-family: SFPro, SFPro;
      font-weight: 400;
      font-size: 20rpx;
      color: #333333;
      line-height: 24rpx;
      text-align: left;
      font-style: normal;
      margin-left: 12rpx;
    }

    .goodtab {
      // width: 96rpx;
      height: 32rpx;
      border-radius: 4rpx;
      border: 1rpx solid #ff1515;
      padding: 2rpx 8rpx;
      box-sizing: border-box;
      text-align: center;
      line-height: 32rpx;
      display: inline;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #ff1515;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
      margin-right: 6rpx;
    }

    .goods {
      // width: 284rpx;
      height: 40rpx;
      background: #f4f4f4;
      border-radius: 8rpx;
      display: inline;
      text-align: center;
      line-height: 40rpx;
      margin-top: 20rpx;
      padding: 6rpx 12rpx;
      box-sizing: border-box;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #555555;
      line-height: 28rpx;
      text-align: left;
      font-style: normal;
    }

    .goodname {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
      width: 100%;
    }

    .shopname {
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 26rpx;
      color: #333333;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;

      .circle {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
    }
  }
}

.shopcart {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 36rpx;
  color: #222222;
  line-height: 50rpx;
  text-align: right;
  font-style: normal;
}

.sum {
  font-family: HarmonyOS_Sans;
  font-size: 22rpx;
  color: #333333;
  line-height: 32rpx;
  text-align: left;
  font-style: normal;
}

.down {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #c7c7c7;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  z-index: 10000;
  border-radius: 20rpx;
}
</style>