123

src/components/goodsItem/IndexSkuDialog.vue

@@ -1,274 +1,327 @@
 <template>
-    <div class="check_sku">
-        <el-dialog
-            title="选择规格"
-            :visible.sync="skuModal"
-            width="680px"
-            class="appoint-modal"
-            :close-on-click-modal="false"
-            :close-on-press-escape="false"
-            :before-close="cancel"
-        >
-            <div v-loading="loading" class="contents">
-                <div class="lines"></div>
-                <div v-if="Object.keys(skuItem).length" class="pop_prices">
-                    <div class="lefts">
-						<img :src="$tools.splitImgHost(skuItem.coverUrl)" class="imgs" />
-					</div>
-					<div class="rights">
-						<div class="goods_titles">{{ skuItem.goodsName }}</div>
-						<div class="goods_price">￥{{ skuItem.standPrice }}</div>
-					</div>
-                </div>
-				
-                <div class="check_con">
-					<div v-for="(item, index) in specList" :key="index" class="check_items">
-						<div class="grades">{{ item.name }}</div>
-						<div class="mains">
-							<div class="grade_names">
-								<div class="course_items" v-for="(child, c_index) in item.specAttrList" :key="c_index" :class="{'nactive': child.check }"
-									@click="selectSku(child, index)">
-									{{ child.name }}
-								</div>
-							</div>
-						</div>
-					</div>
+  <div class="check_sku">
+    <el-dialog
+      title="选择需要购买的课程"
+      :visible.sync="skuModal"
+      width="680px"
+      class="appoint-modal"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :before-close="cancel"
+    >
+      <div v-loading="loading" class="contents">
+        <!-- <div v-if="Object.keys(skuItem).length" class="pop_prices">
+          <div class="lefts">
+            <img :src="$tools.splitImgHost(skuItem.coverUrl)" class="imgs" />
+          </div>
+          <div class="rights">
+            <div class="goods_titles">{{ skuItem.goodsName }}</div>
+            <div class="goods_price">￥{{ skuItem.standPrice }}</div>
+          </div>
+        </div> -->
+
+        <div class="check_con">
+          <div
+            v-for="(item, index) in specList"
+            :key="index"
+            class="check_items"
+          >
+            <div class="grades">{{ item.name }}</div>
+            <div class="mains" v-if="index == 0">
+              <div class="grade_names">
+                <div
+                  class="course_items"
+                  v-for="(child, c_index) in item.specAttrList"
+                  :key="c_index"
+                  :class="{ nactive: child.check }"
+                  @click="selectSku(child, index)"
+                >
+                  {{ child.name }}
                 </div>
+              </div>
             </div>
-            <span slot="footer" class="dialog-footer">
-                <el-button type="primary" size="small" :disabled="Object.keys(skuItem).length == 0 || specList.length != isCheckSku" @click="confirms()">确 定</el-button>
-            </span>
-        </el-dialog>
-    </div>
+            <div v-if="index == 1">
+              <el-checkbox-group v-model="checkedCities">
+                <el-checkbox v-for="city in cities" :label="city" :key="city">
+                  <div style="width: 100%">{{ city }}</div>
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          size="small"
+          :disabled="
+            Object.keys(skuItem).length == 0 || specList.length != isCheckSku
+          "
+          @click="confirms()"
+          >确 定</el-button
+        >
+      </span>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
 export default {
-    name: 'checkSku',
-    props: {
-        skuModal: {
-            type: Boolean,
-            default: false,
-        },
-        specTemplateId: {
-            type: [String, Number],
-            default: ''
-        },
-        isCarOrBuy: {
-            type: Number,
-            default: 1
-        }
+  name: "checkSku",
+  props: {
+    skuModal: {
+      type: Boolean,
+      default: false,
     },
-    data() {
-        return {
-            loading: false,
-            skuItem: {},
-			specList: [], // 规格列表
-        }
+    specTemplateId: {
+      type: [String, Number],
+      default: "",
+    },
+    isCarOrBuy: {
+      type: Number,
+      default: 1,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      skuItem: {},
+      specList: [], // 规格列表
+      checkedCities: "",
+      cities: ["上海", "北京", "广州", "深圳"],
+    };
+  },
+  watch: {
+    skuModal(newV, oldV) {
+      if (newV) {
+        this.getSpecDetail();
+      }
     },
-    watch: {
-        skuModal(newV, oldV) {
-            if (newV) {
-                this.getSpecDetail()
+  },
+  computed: {
+    isCheckSku() {
+      let checkCout = 0;
+      this.specList.forEach((item, index) => {
+        if (item.specAttrList && item.specAttrList.length) {
+          item.specAttrList.forEach((child, c_index) => {
+            if (child.check) {
+              checkCout++;
             }
+          });
         }
+      });
+      return checkCout;
     },
-    computed: {
-        isCheckSku() {
-			let checkCout = 0
-			this.specList.forEach((item, index) => {
-				if (item.specAttrList && item.specAttrList.length) {
-					item.specAttrList.forEach((child, c_index) => {
-						if (child.check) {
-							checkCout++
-						}
-					})
-				}
-				
-			})
-			return checkCout
-		},
+  },
+  methods: {
+    cancel() {
+      this.skuItem = {};
+      this.$emit("update:skuModal", false);
     },
-    methods: {
-        cancel() {
-            this.skuItem = {}
-            this.$emit('update:skuModal', false)
-        },
-        getSpecDetail() {
-			// || 35
-            this.loading = true
-			this.$axios({
-				url: `/app/common/spec/${this.specTemplateId}`,
-				method: 'get',
-				noToken: true
-			}).then((res) => {
-                this.loading = false
-				if (res.code == 200) {
-					let data = res.data
-					if (data) {
-						this.specList = data && (data.specList || [])
-						this.specList.forEach((item, index) => {
-							item.specAttrList.forEach((child, i_index) => {
-								this.$set(this.specList[index].specAttrList[i_index], 'check', false)
-							})
-						})
-					}
-				}
-			}).catch(() => {
-                this.loading = false
-            })
-		},
-        selectSku(item, index) {
-			this.specList[index].specAttrList.forEach((i_item, i_index) => {
-				if (item.specAttributeId == i_item.specAttributeId) {
-					this.$set(this.specList[index].specAttrList[i_index], 'check', true)
-				} else {
-					this.$set(this.specList[index].specAttrList[i_index], 'check', false)
-				}
-			})
-			// console.log('this.specList', this.specList, this.isCheckSku)
-			if (this.specList.length == this.isCheckSku) {
-				let specAttrIds = []
-				this.specList.forEach((item) => {
-					let result = item.specAttrList.find(e => e.check)
-					if (result) {
-						specAttrIds.push(result.specAttributeId)
-					}
-				})
-				this.getGoodsInfos(specAttrIds)
-			}
+    getSpecDetail() {
+      // || 35
+      this.loading = true;
+      this.$axios({
+        url: `/app/common/spec/${this.specTemplateId}`,
+        method: "get",
+        noToken: true,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.code == 200) {
+            let data = res.data;
+            if (data) {
+              this.specList = data && (data.specList || []);
+              this.specList.forEach((item, index) => {
+                item.specAttrList.forEach((child, i_index) => {
+                  this.$set(
+                    this.specList[index].specAttrList[i_index],
+                    "check",
+                    false
+                  );
+                });
+              });
+            }
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+    selectSku(item, index) {
+      this.specList[index].specAttrList.forEach((i_item, i_index) => {
+        if (item.specAttributeId == i_item.specAttributeId) {
+          this.$set(this.specList[index].specAttrList[i_index], "check", true);
+        } else {
+          this.$set(this.specList[index].specAttrList[i_index], "check", false);
+        }
+      });
+      // console.log('this.specList', this.specList, this.isCheckSku)
+      if (this.specList.length == this.isCheckSku) {
+        let specAttrIds = [];
+        this.specList.forEach((item) => {
+          let result = item.specAttrList.find((e) => e.check);
+          if (result) {
+            specAttrIds.push(result.specAttributeId);
+          }
+        });
+        this.getGoodsInfos(specAttrIds);
+      }
+    },
+    // 获取规格属性值对应的商品信息
+    getGoodsInfos(specAttrIds) {
+      this.loading = true;
+      this.$axios({
+        url: "/app/common/attr/goods",
+        method: "get",
+        params: {
+          specTemplateId: this.specTemplateId,
+          specAttrIds: specAttrIds.join(","),
         },
-        // 获取规格属性值对应的商品信息
-		getGoodsInfos(specAttrIds) {
-            this.loading = true
-			this.$axios({
-				url: '/app/common/attr/goods',
-				method: 'get',
-				params: {
-					specTemplateId: this.specTemplateId,
-					specAttrIds: specAttrIds.join(',')
-				},
-				noToken: true
-			}).then((res) => {
-                this.loading = false
-				if (res.code == 200) {
-					this.skuItem = res.data || {}
-				} else {
-					this.skuItem = {}
-					this.$message.warning('商品已下架, 请重新选择')
-				}
-			}).catch((err) => {
-                this.loading = false
-				this.skuItem = {}
-				this.$message.warning('商品已下架, 请重新选择')
-            })
-		},
-        confirms() {
-            if (this.specList.length != this.isCheckSku) {
-				this.$message.warning('请先选择所有的规格')
-				return
-			}
-			if (this.skuItem.goodsStatus == 0) {
-				this.$message.warning('商品已下架, 请重新选择')
-				return
-			}
+        noToken: true,
+      })
+        .then((res) => {
+          this.loading = false;
+          if (res.code == 200) {
+            this.skuItem = res.data || {};
+          } else {
+            this.skuItem = {};
+            this.$message.warning("商品已下架, 请重新选择");
+          }
+        })
+        .catch((err) => {
+          this.loading = false;
+          this.skuItem = {};
+          this.$message.warning("商品已下架, 请重新选择");
+        });
+    },
+    confirms() {
+      if (this.specList.length != this.isCheckSku) {
+        this.$message.warning("请先选择所有的规格");
+        return;
+      }
+      if (this.skuItem.goodsStatus == 0) {
+        this.$message.warning("商品已下架, 请重新选择");
+        return;
+      }
 
-			let sysTime = this.$tools.timest()
-			if (sysTime <= this.skuItem.validityStartTime || sysTime >= this.skuItem.validityEndTime) {
-				this.$message.warning('商品不在有效期, 请重新选择')
-				return
-			}
+      let sysTime = this.$tools.timest();
+      if (
+        sysTime <= this.skuItem.validityStartTime ||
+        sysTime >= this.skuItem.validityEndTime
+      ) {
+        this.$message.warning("商品不在有效期, 请重新选择");
+        return;
+      }
 
-            if (this.isCarOrBuy == 1) { // 加入购物车
-			// console.log('this.skuItem.goodsId', this.skuItem.goodsId)
-                this.$emit('toShopCart', this.skuItem.goodsId)
-			} else {
-				this.$emit('togoBuy', this.skuItem)
-			}
-            this.cancel()
-        },
+      if (this.isCarOrBuy == 1) {
+        // 加入购物车
+        // console.log('this.skuItem.goodsId', this.skuItem.goodsId)
+        this.$emit("toShopCart", this.skuItem.goodsId);
+      } else {
+        this.$emit("togoBuy", this.skuItem);
+      }
+      this.cancel();
     },
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.appoint-modal {
+  /deep/ {
+    .el-dialog__header {
+      padding: 20px 28px;
+      border-bottom: 1px solid #d9d9d9;
+      .el-dialog__title {
+        color: #222222;
+        font-size: 20px;
+      }
+    }
+    .el-checkbox {
+      width: 100%;
+	  height: 44px;
+	  background: #F8F8F8;
+	  margin-bottom: 16px;
+	  line-height: 44px;
+	  padding: 0 28px 0 16px;
+	  box-sizing: border-box;
+	  color: #222222;
+	  border-radius: 8px;
+    }
+  }
+}
 .contents {
+  width: 100%;
+  padding: 0 8px;
+  .pop_prices {
     width: 100%;
-	.pop_prices {
-		width: 100%;
-		min-height: 80px;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin: 0px 0px 8px 0px;
-		.imgs {
-			width: 136px;
-			height: 80px;
-			border-radius: 8px;
-			margin-right: 16px;
-		}
-		.rights {
-			width: 100%;
-			min-height: 80px;
-		}
-		.goods_titles {
-			font-size: 16px;
-			font-weight: 500;
-			color: #222222;
-		}
-		.goods_price {
-			font-size: 16px;
-			font-weight: 500;
-			color: #FC3F3F;
-			margin-top: 14px;	
-		}
-	}
-	.lines {
-		width: 100%;
-		height: 1px;
-		background: #F0F0F0;
-        margin-bottom: 20px;
-	}
-	.check_con {
-		width: 100%;
-		// height: 500px;
-		// overflow-y: auto;
-		.check_items {
-			width: 100%;
-		}
-		.grades {
-			font-size: 14px;
-			color: #606266;
-			margin-bottom: 16px;
-            margin-top: 32px;
-		}
-		.mains {
-			width: 100%;
-			max-height: 200px;
-			overflow-y: auto;
-		}
-		.grade_names {
-			width: 100%;
-			display: flex;
-			flex-wrap: wrap;
-		}
-		.course_items {
-			// min-width: 190px;
-            padding: 13px 16px;
-            border-radius: 8px;
-            margin-right: 16px;
-            margin-bottom: 16px;
-            background: #F8F8F8;
-            font-size: 14px;
-            font-weight: 500;
-            color: #222222;
-            text-align: center;
-            cursor: pointer;
-            &.nactive {
-                background: #D5E4FF;
-                color: #3F8DFD;
-            }
-		}
-	}
+    min-height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0px 0px 8px 0px;
+    .imgs {
+      width: 136px;
+      height: 80px;
+      border-radius: 8px;
+      margin-right: 16px;
+    }
+    .rights {
+      width: 100%;
+      min-height: 80px;
+    }
+    .goods_titles {
+      font-size: 16px;
+      font-weight: 500;
+      color: #222222;
+    }
+    .goods_price {
+      font-size: 16px;
+      font-weight: 500;
+      color: #fc3f3f;
+      margin-top: 14px;
+    }
+  }
+  .check_con {
+    width: 100%;
+    // height: 500px;
+    // overflow-y: auto;
+    .check_items {
+      width: 100%;
+      margin-bottom: 32px;
+    }
+    .grades {
+      font-size: 16px;
+      color: #606266;
+      margin-bottom: 16px;
+      //   margin-top: 32px;
+    }
+    .mains {
+      width: 100%;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .grade_names {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .course_items {
+      padding: 10px 16px;
+      border-radius: 8px;
+      margin-right: 16px;
+      background: #f8f8f8;
+      font-size: 14px;
+      font-weight: 500;
+      color: #222222;
+      text-align: center;
+      cursor: pointer;
+      &.nactive {
+        background: #ebf2ff;
+        color: #3f8dfd;
+      }
+    }
+  }
 }
 </style>