zc_saas_h5/pages2/order/confirm_list.vue

<template>
  <view class="confirms">
    <nav-bar title="确认订单"></nav-bar>
    <view class="contents">
      <!-- <view  > -->
      <view v-for="(item, index) in goodsList" :key="item.id">
        <view class="item">
          <view style="display: flex; justify-content: space-between">
            <image
              :src="$method.splitImgHost(item.coverUrl)"
              style="height: 120rpx; width: 204rpx; border-radius: 16rpx"
            >
            </image>
            <view class="right_con" style="margin-left: 20rpx">
              <view style="color: #333333; font-size: 30rpx; font-weight: bold">
                {{ item.goodsName }}
                <text v-if="item.sevenYear"> ({{ item.sevenYear }}) </text>
              </view>
              <view class="priceTag"> ¥ {{ item.standPrice }} </view>
              <view
                class="input_c"
                v-if="item.templateType != null && item.goodsType == 1"
              >
                <view
                  v-if="item.templateType == 'class'"
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 56rpx;
                    padding: 8rpx;
                    border-radius: 8rpx;
                  "
                  @click="openPopup(0, item)"
                >
                  <view style="color: #666666; font-size: 24rpx">{{
                    item.gradObj ? item.gradObj.className : "选择班级"
                  }}</view>
                  <view
                    ><u-icon
                      name="arrow-down"
                      color="#999999"
                      size="28"
                    ></u-icon
                  ></view>
                </view>
                <view
                  v-if="item.templateType == 'apply'"
                  style="
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    height: 56rpx;
                    padding: 8rpx;
                    border-radius: 8rpx;
                  "
                  @click="openPopup(1, item)"
                >
                  <view
                    v-if="item.applyAreas"
                    style="color: #666666; font-size: 24rpx"
                    >{{
                      item.examDate.examineName +
                      "-" +
                      item.applyAreas.areaName +
                      "-" +
                      item.applyAreas.cityName
                    }}</view
                  >
                  <view v-else style="color: #666666; font-size: 24rpx">
                    报考地区
                  </view>
                  <view
                    ><u-icon
                      name="arrow-down"
                      color="#999999"
                      size="28"
                    ></u-icon
                  ></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- </view> -->
    </view>
    <view class="bottomBox safeArea">
      <view class="sums">
        <text class="all_sum">订单金额：</text>
        <text class="priceTag">¥ {{ totalPrice }}</text>
      </view>

      <view style="display: flex; color: #ffffff; align-items: center">
        <view class="btn2" :class="{ able: isAble() }" @click="goBuy()"
          >确认购买</view
        >
      </view>
    </view>
    <u-popup v-model="show1" mode="bottom" border-radius="40">
      <view class="popup_box">
        <view class="check_head">
          <view class="grade">选择考期/地区</view>
          <u-icon
            name="close"
            color="#CFCFCF"
            size="30"
            @click="closePop(1)"
          ></u-icon>
        </view>

        <view style="display: flex; height: 550rpx">
          <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">确定</view>
        </view>
      </view>
    </u-popup>
    <select-grade-box ref="grade" @submit="submitSelect" />
  </view>
</template>

<script>
import ClassTimeTip from "../../components/common/ClassTimeTip.vue";
import selectGradeBox from "@/components/common/selectGradeBox.vue";
import { mapGetters } from "vuex";
export default {
  components: { ClassTimeTip, selectGradeBox },
  data() {
    return {
      gradeValue: 0,
      gradeIndex: 0,
      id: 0,
      indicatorStyle: `height: 50px;`,
      showArea: true,
      show1: false,
      value: "",
      show: false,
      detail: {},
      provinceList: [],
      cityList: [],
      pAreaIndex: 0,
      cAreaIndex: 0,
      examine: [],
      examIndex: 0,
      applyAreas: {},
      examDate: {},
      applyObj: {
        applyAreasJson: null,
        examDateJson: null,
      },
      fromCart: "",
      isBK: "", //是不是补考商品
      goodsList: [],
      gradeListObj: {},
      activeItem: {},
    };
  },
  onPullDownRefresh() {},
  async onLoad(option) {
    this.id = option.id;
    this.isBK = option.isBK;
    if (option.fromCart) {
      this.fromCart = option.fromCart;
    }
    this.options = option;
    if (this.id) {
      this.goodsList = this.disCode
        ? await this.getFxDetail()
        : await this.getDetail();
    } else {
      this.goodsList = this.shoppingCartList;
    }
    this.goodsList.forEach((e, i) => {
      if (e.templateType == "class") {
        this.$set(e, "gradObj", {});
        this.goodsGradeList(e);
      }
    });
  },
  onShow() {},
  methods: {
    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);
          }
        }
      });
    },
    submitSelect(gradObj) {
      this.$set(this.activeItem, "gradObj", gradObj);
    },
    //弹出框确定
    okPopup(index) {
      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.activeItem.examDate = this.examDate;
      this.activeItem.applyAreas = this.applyAreas;
      this.show1 = false;
    },

    checkAreaData() {
      if (this.examine.length == 0) {
        uni.showModal({
          title: "提示",
          content: "请选择考期",
          showCancel: false,
        });
        return false;
      }
      return true;
    },
    isAble() {
      if (this.detail.templateType == "class" && this.detail.goodsType == 1) {
        if (this.gradeValue < 0) {
          return false;
        }
      } else if (
        this.detail.templateType == "apply" &&
        this.detail.goodsType == 1
      ) {
        /* if(!this.applyObj.examDateJson){
          uni.showModal({
            title: "提示",
            content: '请选择考期',
            showCancel: false
          })
          return false
        } */
      }
      return true;
    },
    checkData() {
      if (this.goodsList.length == 0) {
        uni.showModal({
          title: "提示",
          content: "请选择商品",
          showCancel: false,
        });
        return false;
      }
      return this.goodsList.some((item) => {
        if (item.templateType == "class" && item.goodsType == 1) {
          if (!item.gradObj.className) {
            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;
          // }
        }
        return true;
      });
    },
    radioGroupChange(e) {
      console.log(e);
    },
    goodsGradeList(item) {
      this.$api.goodsGradeList({ goodsId: item.goodsId }).then((res) => {
        let { code, rows } = res.data;
        if (code == 200) {
          let gradeList = rows;
          if (gradeList.length == 0) {
            gradeList.push({
              className: "系统分班",
              gradeId: 0,
            });
          } else {
            let isGradeFull = gradeList.every(
              (item) =>
                item.studentNum > 0 && item.studentNum == item.studentUpper
            );
            //所有班级都满了
            if (isGradeFull) {
              let item = {
                className: "系统分班",
                gradeId: 0,
              };
              gradeList.unshift(item);
            }
          }
          this.$set(item, "gradObj", gradeList[0]);
          this.gradeListObj[item.goodsId] = gradeList;
        }
      });
    },
    goBuy() {
      if (!this.checkData()) {
        return;
      }
      this.$store.commit("setShoppingCartList", {
        shoppingCartList: this.goodsList,
      });
      if (this.isBK == "1") {
        this.$navTo.togo("/pages2/order/confirm_pay", {
          isBK: "1",
          ...this.addParam(),
        });
      } else {
        this.$navTo.togo("/pages2/order/confirm_pay", {
          ...this.addParam(),
        });
      }
    },
    addParam() {
      let data = { fromCart: this.fromCart };
      if (this.disCode) {
        data.distributionCode = this.disCode;
      }
      if (this.options.linkCode) {
        data.linkCode = this.options.linkCode;
      }
      return data;
    },
    getDetail() {
      return this.$api.commonGoodsDetail(this.id).then((res) => {
        let { code, data } = res.data;
        if (code == 200) {
          this.detail = data;
          this.goodsList = [data];
          return Promise.resolve([data]);
        }
      });
    },
    getFxDetail() {
      return this.$api
        .fxGoodsDetail({
          goodsId: this.id,
          disCode: this.disCode,
        })
        .then((res) => {
          let { code, data } = res.data;
          if (code == 200) {
            this.goodsList = [data];
            // self.getExamine(self.detail.projectId);
            return Promise.resolve([data]);
          }
        });
    },
    bindChangeE(e) {
      console.log(e.detail.value);
      this.examIndex = e.detail.value[0];
    },
    bindChange(e) {
      const val = e.detail.value;
      if (this.pAreaIndex != val[0]) {
        this.pAreaIndex = val[0];
        this.getCityList(this.provinceList[this.pAreaIndex].areaId);
      }
      if (this.cAreaIndex != val[1]) {
        this.cAreaIndex = val[1];
      }
    },
    openPopup(index, item) {
      this.activeItem = item || {};
      if (index == 0) {

        this.$refs["grade"].open(
          this.gradeListObj[item.goodsId],
          item.gradObj.gradeId
        );
      } else {
        this.getExamine(100);
        this.getProvinceList();
        this.show1 = true;
      }
    },
    closePop(index) {
      if (index == 0) {
        this.show = false;
      } else {
        this.show1 = false;
      }
    },
  },
  onReachBottom() {},
  computed: {
    ...mapGetters(["userInfo", "shoppingCartList"]),
    disCode() {
      return this.options.distributionCode;
    },
    totalPrice() {
      return this.goodsList.reduce((a, b) => a + Number(b.standPrice), 0);
    },
  },
};
</script>
<style>
page {
  background-color: #eaeef1;
}
</style>
<style scoped lang="scss">
.confirms {
  width: 100%;
  height: 100vh;

  // background: #fff;
  .contents {
    padding: 32rpx 32rpx 132rpx 32rpx;
  }

  .right_con {
    width: 450rpx;
  }
}

.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: 232rpx;
  height: 92rpx;
  line-height: 92rpx;
  background: #fc3f3f;
  border-radius: 120rpx;
  color: #ffffff;
  text-align: center;
  font-size: 32rpx;
  font-weight: 500;
}

.confrim-btn {
  // border-top:1px solid #eee;
  height: 98rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.grade {
  // height: 23rpx;
  font-size: 32rpx;
  color: #222;
  // margin: 0 auto;
  // margin-top: 15rpx;
  font-weight: 500;
  text-align: center;
}

.line1 {
  width: 80rpx;
  height: 8rpx;
  background: #999999;
  border-radius: 4rpx;
  margin: 0 auto;
  margin-top: 15rpx;
}

.popup_box {
  height: 824rpx;
  box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
  border-radius: 28rpx 28rpx 0rpx 0rpx;

  .check_head {
    padding: 0rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 104rpx;
    background: #f2f2f2;
  }

  .items_c {
    padding: 0rpx 32rpx;
  }

  .border_c {
    display: flex;
    align-items: center;
    padding: 20rpx 0rpx;
    border-bottom: 1rpx solid #f2f2f2;
  }
}

.item {
  width: 100%;
  background: #ffffff;
  border-radius: 24rpx;
  margin-bottom: 20rpx;
  padding: 15rpx;
}

.priceTag {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fc3f3f;
  margin-top: 6rpx;
  margin-bottom: 16rpx;
}

.input_c {
  background: #f8f8f8;
}

.btn2 {
  width: 232rpx;
  height: 92rpx;
  background: #fc3f3f;
  border-radius: 120rpx;
  // width: 200rpx;
  // height: 64rpx;
  // background: linear-gradient(0deg, #015EEA, #00C0FA);
  text-align: center;
  line-height: 92rpx;

  &.able {
    opacity: 1;
  }
}

.bottomBox {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  height: 132rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: unset;
  box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.1);

  > view {
    margin: 0 30rpx;
  }

  .sums {
    display: flex;
  }

  .all_sum {
    font-size: 28rpx;
    font-weight: 500;
    color: #303030;
  }
}
</style>