zc_saas_h5/pages4/shopping/shoppingCart.vue

<template>
  <view>
    <nav-logo title="购物车"></nav-logo>
    <view v-show="isLogin">
      <view v-if="!list.length"
        ><u-empty text="购物车为空" margin-top="500" mode="car"></u-empty
      ></view>
      <view v-else>
        <view class="shop_list">
          <uni-swipe-action>
            <u-checkbox-group @change="checkboxGroupChange" placement="column">
              <view>
                <!-- :show="item.show" -->
                <uni-swipe-action-item
                  :autoClose="false"
                  @change="swipeChange($event, item)"
                  v-for="(item, index) in list"
                  :key="index"
                >
                  <view class="goods-item">
                    <view class="item-wrap">
                      <view class="goods-msg">
                        <u-checkbox
                          :disabled="item.disabled"
                          style="width: 100%"
                          v-model="item.checked"
                          @change="checkboxChange"
                          shape="circle"
                          :name="item.id"
                        >
                          <view class="flex">
                            <view class="goods-img">
                              <image
                                :src="$method.splitImgHost(item.coverUrl, true)"
                              ></image>
                            </view>
                            <view class="flex__auto">
                              <view class="goods-title">{{
                                item.goodsName
                              }}</view>
                              <view class="priceTag"
                                >¥ {{ item.standPrice }}</view
                              >
                              <view
                                class="priceTag"
                                v-if="item.goodsStatus == 0"
                                >该商品已下架</view
                              >
                            </view>
                          </view>
                        </u-checkbox>
                      </view>
                      <view
                        class="goods-select"
                        v-if="
                          item.templateType != null &&
                          item.goodsType == 1 &&
                          !item.disabled
                        "
                      >
                        <u-line color="#D6D6DB" />
                        <view
                          class="goods-select__type"
                          v-if="item.templateType == 'class'"
                          @click="openPopup(0, item, index)"
                        >
                          <view style="color: #666666; font-size: 24rpx">{{
                            !item.gradObj && !item.gradObj.className
                              ? "选择班级"
                              : item.gradObj.className
                          }}</view>
                          <view>
                            <u-icon
                              name="arrow-right"
                              color="#999999"
                              size="28"
                            >
                            </u-icon>
                          </view>
                        </view>
                        <view
                          class="goods-select__type"
                          v-if="item.sevenYear"
                          @click="openPopup(2, item, index)"
                        >
                          <view
                            style="color: #666666; font-size: 24rpx"
                            v-if="
                              item.selectYearList && item.selectYearList.length
                            "
                          >
                            {{ item.selectYearList.toString() }}
                          </view>
                          <view v-else style="color: #666666; font-size: 24rpx">
                            选择年份
                          </view>
                          <view>
                            <u-icon
                              name="arrow-right"
                              color="#999999"
                              size="28"
                            >
                            </u-icon>
                          </view>
                        </view>
                        <view
                          v-if="item.gradObj.gradeId"
                          style="padding: 0 100rpx 0 15rpx"
                        >
                          <Class-time-tip
                            :classInfo="item.gradObj"
                          ></Class-time-tip>
                        </view>
                        <view
                          class="goods-select__type"
                          v-if="item.templateType == 'apply'"
                          @click="openPopup(1, item, index)"
                        >
                          <view style="color: #666666; font-size: 24rpx">
                            {{
                              !item.applyAreas.areaName
                                ? "报考地区"
                                : item.examDate.examineName +
                                  "-" +
                                  item.applyAreas.areaName +
                                  "-" +
                                  item.applyAreas.cityName
                            }}
                          </view>
                          <view
                            ><u-icon
                              name="arrow-right"
                              color="#999999"
                              size="28"
                            ></u-icon
                          ></view>
                        </view>
                      </view>
                    </view>
                  </view>
                  <template v-slot:right>
                    <view class="operate" @click="delItem(item)">
                      <view><text>删除</text></view>
                    </view>
                  </template>
                </uni-swipe-action-item>
              </view>
            </u-checkbox-group>
          </uni-swipe-action>
        </view>
      </view>
      <u-popup v-model="show" mode="bottom" border-radius="40">
        <view class="popup_box">
          <view style="margin-bottom: 20rpx">
            <view class="line1"></view>
            <view class="grade">选择班级</view>
          </view>
          <u-line color="#D6D6DB" />
          <view>
            <scroll-view scroll-y="true" style="height: 536rpx">
              <view>
                <u-radio-group v-model="gradeValue">
                  <view v-for="(item, index) in gradeList" :key="index">
                    <view
                      style="display: flex; align-items: center; padding: 20rpx"
                    >
                      <view>
                        <u-radio shape="circle" :name="index">
                          <view
                            :class="
                              index == gradeValue
                                ? 'white-box blue-box'
                                : 'white-box'
                            "
                          >
                            <view>
                              <view class="blackTxt">{{ item.className }}</view>
                              <Class-time-tip
                                :classInfo="item"
                              ></Class-time-tip>
                            </view>
                          </view>
                        </u-radio>
                      </view>
                    </view>
                  </view>
                </u-radio-group>
              </view>
            </scroll-view>
          </view>
          <view class="confrim-btn"
            ><view class="okBtn" @click="okPopup(0)">确定</view></view
          >
        </view>
      </u-popup>
      <u-popup v-model="show1" mode="bottom" border-radius="40">
        <view class="popup_box">
          <view style="margin-bottom: 20rpx">
            <view class="line1"></view>
            <view class="grade">选择考期/地区</view>
          </view>
          <u-line color="#D6D6DB" />
          <view style="display: flex; height: 536rpx">
            <view style="width: 50%">
              <view class="topTxt">考期</view>
              <view>
                <picker-view
                  :indicator-style="indicatorStyle"
                  :value="value"
                  @change="bindChangeE"
                  class="picker-view"
                >
                  <picker-view-column>
                    <view
                      class="picker-item"
                      v-for="(item, index) in examine"
                      :key="index"
                      >{{ item.examineName }}</view
                    >
                  </picker-view-column>
                </picker-view>
              </view>
            </view>
            <view style="width: 50%">
              <view class="topTxt">地区</view>
              <view>
                <picker-view
                  :indicator-style="indicatorStyle"
                  :value="value"
                  @change="bindChange"
                  class="picker-view"
                >
                  <picker-view-column>
                    <view
                      class="picker-item"
                      v-for="(item, index) in provinceList"
                      :key="index"
                      >{{ item.areaName }}</view
                    >
                  </picker-view-column>
                  <picker-view-column>
                    <view
                      class="picker-item"
                      v-for="(item, index) in cityList"
                      :key="index"
                      >{{ item.areaName }}</view
                    >
                  </picker-view-column>
                </picker-view>
              </view>
            </view>
          </view>
          <view class="confrim-btn"
            ><view class="okBtn" @click="okPopup(1)">确定</view></view
          >
        </view>
      </u-popup>
      <u-popup v-model="show2" mode="bottom" border-radius="40">
        <view class="popup_box" style="height: 400rpx">
          <view style="margin-bottom: 20rpx">
            <view class="line1"></view>
            <view class="grade">选择年份</view>
          </view>
          <u-line color="#D6D6DB" />
          <view>
            <scroll-view scroll-y="true" style="height: 236rpx">
              <view style="padding: 16rpx 30rpx">
                <u-checkbox-group :wrap="true">
                  <u-checkbox
                    shape="circle"
                    v-for="(item, index) in yearList"
                    :key="index"
                    v-model="item.checked"
                    :name="item.name"
                  >
                    {{ item.name }}
                  </u-checkbox>
                </u-checkbox-group>
              </view>
            </scroll-view>
          </view>
          <view class="confrim-btn"
            ><view class="okBtn" @click="okPopup(2)">确定</view></view
          >
        </view>
      </u-popup>
    </view>
    <view v-show="!isLogin">
      <view
        style="
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-top: 40%;
          font-size: 32rpx;
        "
      >
        <view style="color: #999999">您还没有登录哦~</view>
        <view style="margin-top: 30rpx"
          ><u-button type="primary" @click="login">去登录</u-button></view
        >
      </view>
    </view>

    <view class="bottomBox" v-if="!hideBuyState">
      <view class="bottons_all">
        <view class="check_alls">
          <u-checkbox
            label="all"
            name="all"
            shape="circle"
            @change="checkboxAllChange"
            v-model="allChecked"
          ></u-checkbox>
          <text class="checkall">全选</text>
          <!-- <text class="rmb">￥</text> -->
          <view class="all_sum">结算：</view>
          <view class="priceTag">¥ {{ toFixed(totalPrice) }}</view>
        </view>
        <view style="display: flex; align-items: center">
          <!-- <view style="color: #999999;margin-right: 8rpx;">合计</view> -->
          <view
            style="display: flex; color: #ffffff; align-items: center"
            @click="goBuy()"
          >
            <view class="btn2">结算</view>
            <!-- <u-icon name="arrow-right" color="#fff" size="30"></u-icon> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import ClassTimeTip from "../../components/common/ClassTimeTip.vue";
import navLogo from "../../components/nav-bar/nav-logo.vue";
export default {
  data() {
    return {
      gradeValue: -1,
      isLogin: false,
      checkboxValue1: [],
      list: [],
      value: "",
      show: false,
      show1: false,
      show2: false,
      allChecked: false,
      isOld: false,
      gradeList: [],
      examine: [],
      provinceList: [],
      cityList: [],
      detail: {},
      detailIndex: -1,
      yearList: [],
      applyObj: {
        applyAreasJson: null,
        examDateJson: null,
      },
      pAreaIndex: 0,
      cAreaIndex: 0,
      examIndex: 0,
      current: 3,
      indicatorStyle: `height: 50px;`,
    };
  },
  computed: {
    ...mapGetters(["userInfo", "hideBuyState", "config"]),
    totalPrice() {
      let price = 0;
      this.checkList.forEach((e) => {
        let multiple = e.selectYearList?.length || 1;
        price += e.standPrice * multiple;
      });
      return price;
    },
    canCheckList() {
      return this.list.filter((e) => e.status == 1 && e.goodsStatus == 1);
    },
    checkList() {
      return this.canCheckList.filter((e) => e.checked == true);
    },
    selectGreadeId() {
      if (this.detail.gradObj) {
        return this.detail.gradObj.gradeId;
      }
      return "";
    },
  },
  onLoad(option) {
    // console.log(option,987)
  },
  onShow() {
    this.isLogin = this.$method.isLogin();
    if (this.isLogin) {
      if (uni.getStorageSync("updateCart") || !this.isOld) {
        this.isOld = true;
        this.cartList();
        uni.removeStorageSync("updateCart"); //消费购物车刷新事件
      }
    }
  },
  methods: {
    toFixed(num) {
      return num.toFixed(2);
    },
    bindChangeE(e) {
      this.examIndex = e.detail.value[0];
    },
    bindChange(e) {
      const val = e.detail.value;
      if (this.pAreaIndex != e.detail.value[0]) {
        this.pAreaIndex = e.detail.value[0];
        this.getCityList(this.provinceList[this.pAreaIndex].areaId);
      }
      if (this.cAreaIndex != e.detail.value[1]) {
        this.cAreaIndex = e.detail.value[1];
      }
    },
    checkAreaData() {
      if (this.examine.length == 0) {
        uni.showModal({
          title: "提示",
          content: "请选择考期",
          showCancel: false,
        });
        return false;
      }
      return true;
    },
    checkData() {
      if (this.detail.templateType == "class") {
        if (this.gradeValue < 0) {
          uni.showModal({
            title: "提示",
            content: "请选择班级",
            showCancel: false,
          });
          return false;
        }
      } else if (this.detail.templateType == "apply") {
        if (!this.applyObj.examDateJson) {
          uni.showModal({
            title: "提示",
            content: "请选择考期",
            showCancel: false,
          });
          return false;
        }
      }
      return true;
    },
    //弹出框确定
    okPopup(index) {
      if (index == 0) {
        if (!this.checkData()) {
          return;
        }
        this.gradeIndex = this.gradeValue;
        this.list[this.detailIndex].gradObj = this.gradeList[this.gradeIndex]; //商品赋值选中班级
        // this.$set(
        //   this.list[this.detailIndex],
        //   "gradObj",
        //   this.gradeList[this.gradeIndex]
        // );
        this.show = false;
      } else if (index == 2) {
        this.$set(
          this.detail,
          "selectYearList",
          this.yearList.filter((e) => e.checked).map((e) => e.name)
        );
        this.show2 = false;
      } else {
        if (!this.checkAreaData()) {
          return;
        }
        this.examDate = this.examine[this.examIndex];
        let pData = this.provinceList[this.pAreaIndex];
        let cData = this.cityList[this.cAreaIndex];
        this.applyAreas = {
          areaName: pData.areaName,
          areaId: pData.areaId,
          cityId: cData.areaId,
          cityName: cData.areaName,
        };
        //	this.applyObj.applyAreasJson = JSON.stringify(this.applyAreas)
        //	this.applyObj.examDateJson = JSON.stringify(this.examDate)
        this.list[this.detailIndex].examDate = this.examDate; //商品赋值选中考期地区
        this.list[this.detailIndex].applyAreas = this.applyAreas; //商品赋值选中考期地区
        this.show1 = false;
      }
    },
    getExamine(id) {
      let self = this;
      this.$api.getExamine({ projectId: id }).then((res) => {
        if (res.data.code == 200) {
          self.examine = res.data.rows;
        }
      });
    },
    getCityList(id) {
      let self = this;
      this.$api.getCityList({ parentId: id }).then((res) => {
        if (res.data.code == 200) {
          self.cityList = res.data.rows;
        }
      });
    },
    getProvinceList() {
      let self = this;
      if (self.provinceList.length > 0) {
        return;
      }
      this.$api.getProvinceList().then((res) => {
        if (res.data.code == 200) {
          self.provinceList = res.data.rows;
          if (self.provinceList.length > 0) {
            self.getCityList(self.provinceList[0].areaId);
          }
        }
      });
    },
    goodsGradeList(goodsId) {
      let self = this;
      this.$api.goodsGradeList({ goodsId: goodsId }).then((res) => {
        if (res.data.code == 200) {
          self.gradeList = res.data.rows;
          if (self.gradeList.length == 0) {
            let item = {
              className: "系统分班",
              gradeId: 0,
            };
            self.gradeList.push(item);
          }
          this.gradeValue = self.gradeList.findIndex(
            (e) => e.gradeId == this.selectGreadeId
          );
        }
      });
    },
    openPopup(index, item, itemIndex) {
      this.detail = item;
      this.detailIndex = itemIndex;
      if (index == 0) {
        this.show = true;
        this.goodsGradeList(item.goodsId);
      } else if (index == 2) {
        this.show2 = true;
        let selectYearList = item.selectYearList || "";
        this.yearList = item.sevenYear.split(",").map((e) => {
          return {
            name: e,
            checked: selectYearList.includes(e),
          };
        });
      } else {
        this.applyObj = {
          applyAreasJson: null,
          examDateJson: null,
        };
        this.pAreaIndex = 0;
        this.cAreaIndex = 0;
        this.examIndex = 0;
        this.show1 = true;
        this.getProvinceList();
        this.getExamine(item.projectId);
      }
    },
    checkboxGroupChange(e) {
      this.allChecked = this.canCheckList.length === this.checkList.length;
    },
    checkboxChange(e) {
      this.updateCartCheckStatus([e.name], e.value);
    },
    login() {
      uni.navigateTo({ url: "/pages4/login/login" });
    },
    cartList() {
      let self = this;
      this.$api.cartList().then((res) => {
        let { code, rows } = res.data;
        if (code == 200) {
          for (const item of rows) {
            let {
              choiceStatus,
              goodsStatus,
              status,
              gradeList,
              templateType,
              goodsType,
            } = item;
            item.gradObj = {};
            item.show = false;
            item.applyAreas = {};
            item.examDate = {};
            if (status != 1 || goodsStatus != 1) {
              item.disabled = true;
            } else {
              item.disabled = false;
              item.checked = choiceStatus == 1;
              if (templateType === "class" && goodsType == 1) {
                // 无返回就默认系统分班
                if (!gradeList || gradeList.length === 0) {
                  gradeList = [
                    {
                      className: "系统分班",
                      gradeId: 0,
                    },
                  ];
                  item.gradeList = gradeList;
                }
                item.gradObj = gradeList[0];
              }
            }
          }
          self.list = res.data.rows;
          this.checkboxGroupChange();
        }
      });
    },
    updateCartCheckStatus(ids, check) {
      let data = {
        ids,
        choiceStatus: check ? 1 : 0,
      };
      this.$api.updateCartCheckStatus(data).then((res) => {});
    },
    delItem(item) {
      let self = this;
      this.$api.deleteCart(item.id).then((res) => {
        if (res.data.code == 200) {
          self.cartList();
        }
      });
    },
    swipeChange(e, item) {
      item.show = e;
    },
    goBuy() {
      if (this.checkList.length == 0) {
        uni.showModal({
          title: "提示",
          content: "请选择商品",
          showCancel: false,
        });
        return;
      }
      for (const item of this.checkList) {
        if (item.templateType == "class" && item.goodsType == 1) {
          if (!item.gradObj.className) {
            uni.showModal({
              title: "提示",
              content: "请选择班级",
              showCancel: false,
            });
            return false;
          }
          if (!item.selectYearList) {
            uni.showModal({
              title: "提示",
              content: "请选择年份",
              showCancel: false,
            });
            return false;
          }
        }
        if (item.templateType == "apply" && item.goodsType == 1) {
          // if (!item.applyAreas.areaName) {
          // 	uni.showModal({
          // 		title: '提示',
          // 		content: '请选择报考地区',
          // 		showCancel: false
          // 	});
          // 	return false;
          // }
        }
      }
      this.$store.commit("setShoppingCartList", {
        shoppingCartList: this.checkList,
      });
      this.$navTo.togo("/pages2/order/confirm_pay?fromCart=true");
    },
    checkboxAllChange(n) {
      let ids = [];
      this.canCheckList.forEach((e) => {
        e.checked = n.value;
        ids.push(e.id);
      });
      this.updateCartCheckStatus(ids, n.value);
    },
  },
  components: { ClassTimeTip, navLogo },
};
</script>
<style>
page {
  background-color: #eaeef1;
}
</style>
<style scoped lang="scss">
.shop_list {
  padding: 16rpx 16rpx 180rpx 16rpx;
  // padding-bottom: 98rpx;
}
.operate {
  background-color: #ff3b30;
  color: #ffffff;
  border-top-right-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
  margin-bottom: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
}
.picker-item {
  height: 50px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.picker-view {
  width: 100%;
  height: 420rpx;
  text-align: center;
}
.topTxt {
  font-size: 30rpx;
  color: #666666;
  text-align: center;
  padding: 20rpx 0;
}
.blackTxt {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.blue-box {
  background: #ebf5ff;
}
.white-box {
  width: 646rpx;
  border-radius: 24rpx;
  align-items: center;
  display: flex;
  padding-left: 15rpx;
}
.okBtn {
  width: 200rpx;
  height: 64rpx;
  background: linear-gradient(0deg, #015eea, #00c0fa);
  border-radius: 32rpx;
  color: #ffffff;
  text-align: center;
  line-height: 64rpx;
}
.confrim-btn {
  border-top: 1px solid #eeeeee;
  height: 98rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grade {
  height: 23rpx;
  font-size: 24rpx;
  color: #999999;
  margin: 0 auto;
  margin-top: 15rpx;
  text-align: center;
}
.line1 {
  width: 80rpx;
  height: 8rpx;
  background: #999999;
  border-radius: 4rpx;
  margin: 0 auto;
  margin-top: 15rpx;
}
.popup_box {
  height: 700rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  border-radius: 32rpx 32rpx 0rpx 0rpx;
}

.goods-item {
  width: 100%;
  background: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 12rpx;
  padding: 15rpx 0;
  display: flex;

  .item-wrap {
    width: 100%;
    .goods-msg {
      padding: 0rpx 0rpx 0rpx 22rpx;
      display: flex;
      align-items: center;

      .flex {
        display: flex;
        padding-bottom: 15rpx;
        width: 630rpx;

        .goods-img {
          overflow: hidden;
          width: 204rpx;
          height: 120rpx;
          border-radius: 22rpx;
          margin-left: 22rpx;
          margin-right: 24rpx;
          image {
            display: block;
            // width: 278rpx;
            // height: 156rpx;
            width: 100%;
            height: 100%;
          }
        }

        &__auto {
          flex: 1;

          .goods-title {
            color: #333333;
            font-size: 28rpx;
            font-weight: bold;
            text-align: right;
            width: 378rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .priceTag {
            font-size: 32rpx;
            font-family: PingFang SC;
            font-weight: bold;
            color: #fc3f3f;
            display: flex;
            // flex-direction: row-reverse;
            margin-right: 8rpx;
            margin-top: 25rpx;
          }
        }
      }
    }

    .goods-select {
      &__type {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50rpx;
        padding: 0 15rpx;
      }
    }
  }
}

.btn2 {
  font-size: 32rpx;
  font-weight: 500;
  color: #ffffff;
  margin-right: 8rpx;
  width: 232rpx;
  height: 92rpx;
  line-height: 92rpx;
  text-align: center;
  background: #fc3f3f;
  border-radius: 120rpx;
}
.bottomBox {
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  left: 0;
  height: 132rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32rpx;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  .bottons_all {
    // width: 674rpx;
    // height: 104rpx;
    // background: #007AFF;
    // border-radius: 52rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // padding: 0rpx 26rpx 0rpx 23rpx;
  }
  .priceTag {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fc3f3f;
    display: flex;
    flex-direction: row-reverse;
    margin-right: 20rpx;
  }
  .check_alls {
    display: flex;
    align-items: center;
    color: #969696;
    // .rmb {
    // 	// margin-right: 9rpx;
    // 	// margin-left: 35rpx;
    // 	// font-size: 20rpx;
    // 	// position: relative;
    // 	// top: -14rpx;
    // 	// left: 0rpx;
    // }
  }
  .all_sum {
    font-size: 28rpx;
    font-weight: 800;
    color: #303030;
    margin-left: 35rpx;
  }
  .checkall {
    font-weight: 500;
    color: #969696;
    font-size: 28rpx;
  }
}
.half_circle {
  position: fixed;
  bottom: 0rpx;
  width: 100%;
  left: 0;
  height: 20rpx;
  border: 1rpx solid;
  display: flex;
  justify-content: center;
  .bulge {
    width: 110rpx;
    height: 55rpx;
    border-radius: 55px 55px 0px 0px;
    background-color: #fff;
  }
}
</style>