zc_saas_h5/pages2/order/confirm_list.vue

<template>
  <view class="confirms">
    <nav-bar title="确认订单"></nav-bar>
    <view class="contents">
      <!-- <view  > -->
      <view class="item">
        <view style="display: flex; justify-content: space-between">
          <image
            :src="$method.splitImgHost(detail.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">
              {{ detail.goodsName }}
            </view>
            <view class="priceTag"> ¥ {{ detail.standPrice }} </view>
            <view
              class="input_c"
              v-if="detail.templateType != null && detail.goodsType == 1"
            >
              <view
                v-if="detail.templateType == 'class'"
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  height: 56rpx;
                  padding: 8rpx;
                  border-radius: 8rpx;
                "
                @click="openPopup(0)"
              >
                <view style="color: #666666; font-size: 24rpx">{{
                  gradeIndex < 0 ? "选择班级" : gradeList[gradeIndex].className
                }}</view>
                <view
                  ><u-icon name="arrow-down" color="#999999" size="28"></u-icon
                ></view>
              </view>
              <view
                v-if="detail.templateType == 'apply'"
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  height: 56rpx;
                  padding: 8rpx;
                  border-radius: 8rpx;
                "
                @click="openPopup(1)"
              >
                <view style="color: #666666; font-size: 24rpx">{{
                  !applyAreas.areaName
                    ? "报考地区"
                    : examDate.examineName +
                      "-" +
                      applyAreas.areaName +
                      "-" +
                      applyAreas.cityName
                }}</view>
                <view
                  ><u-icon name="arrow-down" color="#999999" size="28"></u-icon
                ></view>
              </view>
            </view>
          </view>
        </view>
        <!-- <view v-if="detail.templateType!=null&&detail.goodsType==1">
						<u-line color="#D6D6DB" />
						<view v-if="detail.templateType=='class'" style="display: flex;justify-content: space-between;align-items: center;height: 80rpx;padding:16rpx;" @click="openPopup(0)">
							<view style="color: #666666;font-size: 24rpx;">{{gradeIndex < 0 ?'选择班级':gradeList[gradeIndex].className}}</view>
							<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
						</view>
						<view v-if="detail.templateType=='apply'"  style="display: flex;justify-content: space-between;align-items: center;height: 80rpx;padding:16rpx;" @click="openPopup(1)">
							<view style="color: #666666;font-size: 24rpx;" >{{!applyAreas.areaName?'报考地区':examDate.examineName+'-'+applyAreas.areaName+'-'+applyAreas.cityName}}</view>
							<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
						</view>
					</view> -->
      </view>
      <!-- </view> -->
    </view>
    <view class="bottomBox safeArea">
      <view class="sums">
        <text class="all_sum">订单金额：</text>
        <text class="priceTag">¥ {{ detail.standPrice }}</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="show" mode="bottom" border-radius="40">
      <view class="popup_box">
        <view class="check_head">
          <!-- <view class="line1"></view> -->
          <view class="grade">选择班级</view>
          <u-icon
            name="close"
            color="#CFCFCF"
            size="30"
            @click="closePop(0)"
          ></u-icon>
        </view>
        <!-- <u-line color="#D6D6DB" /> -->
        <view class="check_con">
          <scroll-view scroll-y="true" style="height: 580rpx">
            <view>
              <u-radio-group v-model="gradeValue" @change="radioGroupChange">
                <view
                  v-for="(item, index) in gradeList"
                  :key="index"
                  class="items_c"
                >
                  <view class="border_c">
                    <view>
                      <u-radio
                        shape="circle"
                        active-color="#FC3F3F"
                        :name="index"
                        :disabled="
                          item.studentNum > 0 &&
                          item.studentNum == item.studentUpper
                        "
                      >
                        <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 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(1)">确定</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import ClassTimeTip from "../../components/common/ClassTimeTip.vue";
import { mapGetters } from "vuex";
export default {
  components: { ClassTimeTip },
  data() {
    return {
      gradeValue: -1,
      gradeIndex: -1,
      id: 0,
      indicatorStyle: `height: 50px;`,
      showArea: true,
      show1: false,
      value1: "",
      show: false,
      detail: {},
      gradeList: [],
      provinceList: [],
      cityList: [],
      pAreaIndex: 0,
      cAreaIndex: 0,
      examine: [],
      examIndex: 0,
      applyAreas: {},
      examDate: {},
      applyObj: {
        applyAreasJson: null,
        examDateJson: null,
      },
      fromCart: "",
      isBK: "", //是不是补考商品
    };
  },
  onPullDownRefresh() {},
  onLoad(option) {
    this.id = option.id;
    this.isBK = option.isBK;
    if (option.fromCart) {
      this.fromCart = option.fromCart;
    }
    this.options = option;
    this.disCode ? this.getFxDetail() : this.getDetail();
  },
  onShow() {
    /* if(this.current === 2 && this.$method.isLogin()){
			this.$refs.refMy.init();
		} */
  },
  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);
          }
        }
      });
    },
    //弹出框确定
    okPopup(index) {
      if (index == 0) {
        if (!this.checkData()) {
          return;
        }
        this.gradeIndex = this.gradeValue;
        this.detail.gradObj = this.gradeList[this.gradeIndex];
        this.show = 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.detail.examDate = this.examDate;
        this.detail.applyAreas = this.applyAreas;
        this.show1 = false;
      }
    },
    checkAreaData() {
      if (this.examine.length == 0) {
        uni.showModal({
          title: "提示",
          content: "请选择考期",
          showCancel: false,
        });
        return false;
      }
      // if(this.provinceList.length==0){
      // 	uni.showModal({
      // 		title: "提示",
      // 		content: '请选择报考地区',
      // 		showCancel: false
      // 	})
      // 	return false
      // }
      // if(this.cityList.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.detail.templateType == "class" && this.detail.goodsType == 1) {
        if (this.gradeValue < 0) {
          uni.showModal({
            title: "提示",
            content: "请选择班级",
            showCancel: false,
          });
          return false;
        }
      } else if (
        this.detail.templateType == "apply" &&
        this.detail.goodsType == 1
      ) {
        // if(!this.applyObj.applyAreasJson){
        // 	uni.showModal({
        // 		title: "提示",
        // 		content: '请选择报考地区',
        // 		showCancel: false
        // 	})
        // 	return false
        // }
        /* if(!this.applyObj.examDateJson){
					uni.showModal({
						title: "提示",
						content: '请选择考期',
						showCancel: false
					})
					return false
				} */
      }
      return true;
    },
    radioGroupChange(e) {
      console.log(e);
    },
    goodsGradeList() {
      let self = this;
      this.$api.goodsGradeList({ goodsId: this.id }).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);
          } else {
            let isGradeFull = self.gradeList.every(
              (item) =>
                item.studentNum > 0 && item.studentNum == item.studentUpper
            );
            //所有班级都满了
            if (isGradeFull) {
              let item = {
                className: "系统分班",
                gradeId: 0,
              };
              self.gradeList.unshift(item);
            }
          }
        }
      });
    },
    goBuy() {
      if (!this.checkData()) {
        return;
      }
      let checkGoodsList = [];
      checkGoodsList.push(this.detail);
      this.$store.commit("setShoppingCartList", {
        shoppingCartList: checkGoodsList,
      });
      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() {
      let self = this;
      this.$api.commonGoodsDetail(this.id).then((res) => {
        if (res.data.code == 200) {
          self.detail = res.data.data;
          self.getExamine(self.detail.projectId);
        }
      });
    },
    getFxDetail() {
      let self = this;
      this.$api
        .fxGoodsDetail({
          goodsId: this.id,
          disCode: this.disCode,
        })
        .then((res) => {
          if (res.data.code == 200) {
            self.detail = res.data.data;
            self.getExamine(self.detail.projectId);
          }
        });
    },
    bindChangeE(e) {
      console.log(e.detail.value);
      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];
      }
    },
    openPopup(index) {
      if (index == 0) {
        this.show = true;
        this.goodsGradeList();
      } else {
        this.show1 = true;
        this.getProvinceList();
      }
    },
    closePop(index) {
      if (index == 0) {
        this.show = false;
      } else {
        this.show1 = false;
      }
    },
  },
  onReachBottom() {},
  computed: {
    ...mapGetters(["userInfo"]),
    disCode() {
      return this.options.distributionCode;
    },
  },
};
</script>
<style>
page {
  background-color: #fff;
}
</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: 16rpx;
  margin-bottom: 20rpx;
}
.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>