feat: 多规格选择

src/axios.js

@@ -4,9 +4,9 @@ import { Message } from 'element-ui'
 // export const BASE_URL = 'https://api.xyyxt.net'   //release
 // export const BASE_URL = 'http://42.192.164.187:19005'    //test
 // export const BASE_URL = 'https://test.xyyxt.net'   //预发布
-// export const BASE_URL = 'http://192.168.1.7:5055'    //dev
+export const BASE_URL = 'http://192.168.1.7:5055'    //dev
 // export const BASE_URL = 'http://192.168.1.24:5055'    //dev
-export const BASE_URL = 'http://120.79.166.78:19012'    //测试-外网
+// export const BASE_URL = 'http://120.79.166.78:19012'    //测试-外网
 // export const BASE_URL = 'http://42.192.164.187:19005'    //test
 // export const BASE_URL = 'http://192.168.1.222:5055'    //测试
 export const tenantId = '867735392558919680'

src/components/goodsItem/IndexSkuDialog.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="check_sku">
+        <el-dialog
+            title="选择规格"
+            :visible.sync="skuModal"
+            width="452px"
+            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="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>
+            <span slot="footer" class="dialog-footer">
+                <el-button type="primary" size="small" @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
+        }
+    },
+    data() {
+        return {
+            loading: false,
+            skuItem: {},
+			specList: [], // 规格列表
+        }
+    },
+    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
+		},
+    },
+    methods: {
+        cancel() {
+            this.skuItem = {}
+            this.$emit('update:skuModal', false)
+        },
+        getSpecDetail() {
+			// || 35
+            this.loading = true
+			this.$axios({
+				url: `/app/common/spec/${this.specTemplateId || 35}`,
+				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)
+							})
+						})
+					}
+                    console.log('this.specList :', this.specList )
+				}
+			}).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 || 35,
+					specAttrIds: specAttrIds.join(',')
+				},
+				noToken: true
+			}).then((res) => {
+                this.loading = false
+				if (res.code == 200) {
+					this.skuItem = res.data || {}
+				}
+			}).catch((err) => {
+                this.loading = false
+            })
+		},
+        confirms() {
+            if (this.specList.length != this.isCheckSku) {
+				this.$message.warning('请先选择所有的规格')
+				return
+			}
+            if (this.isCarOrBuy == 1) { // 加入购物车
+                this.$emit('toShopCart')
+			} else {
+				this.$emit('togoBuy')
+			}
+            this.cancel()
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.contents {
+    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;
+		}
+		.grade_names {
+			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;
+            }
+		}
+	}
+}
+</style>

src/components/goodsItem/index.vue

@@ -30,16 +30,19 @@
     </div>
 
     <BuyCourseModal ref="selectClassModal"></BuyCourseModal>
+    <index-sku-dialog :skuModal.sync="skuModal" :specTemplateId="item.specTemplateId" :isCarOrBuy="isCarOrBuy"
+      @toShopCart='getAddCar' @togoBuy="toPayment"></index-sku-dialog>
   </div>
 </template>
 
 <script>
 import { mapGetters, mapMutations } from "vuex";
 import BuyCourseModal from "@/components/buyCourseModal/index";
+import IndexSkuDialog from './IndexSkuDialog.vue'
 export default {
   name: "courseItem",
   components: {
-    BuyCourseModal,
+    BuyCourseModal, IndexSkuDialog
   },
   computed: {
     ...mapGetters(["userInfo"]),
@@ -48,6 +51,8 @@ export default {
   data() {
     return {
       selectClassModal: false,
+      skuModal: false,
+      isCarOrBuy: 1, // 1加入购物车 2立即购买
     };
   },
   mounted() {},
@@ -79,8 +84,6 @@ export default {
     },
 
     buyNow(item) {
-      console.log('加入购物车---000',this.$route)
-      console.log(item);
       if (!this.$tools.isLogin()) {
         this.setCurrentRouter(this.$route);
         this.$router.push({
@@ -88,8 +91,16 @@ export default {
         });
         return;
       }
-
-      this.getGoodsDetail(item.goodsId).then((res) => {
+      // 判断有没有规格选择
+			if (this.item.specTemplateId) {
+				this.isCarOrBuy = 2
+				this.skuModal = true
+				return
+			}
+      this.toPayment()
+    },
+    toPayment() {
+      this.getGoodsDetail(this.item.goodsId).then((res) => {
         if (res.templateType) {
           if (res.goodsType === 1) {
             this.$refs.selectClassModal.showModal(res);
@@ -116,13 +127,21 @@ export default {
         }
       });
     },
-
     /**
      * 加入购物车
      */
     addCart(item) {
+      // 判断有没有规格选择
+			if (this.item.specTemplateId) {
+				this.isCarOrBuy = 1
+				this.skuModal = true
+				return
+			}
+      this.getAddCar() 
+    },
+    getAddCar() {
       this.$request
-        .addCart({ goodsId: item.goodsId })
+        .addCart({ goodsId: this.item.goodsId })
         .then((res) => {
           if (res) {
             this.getCartCount();

src/pages/goods-detail/bank-detail.vue

@@ -1043,6 +1043,9 @@
 
     <ToolBar></ToolBar>
     <Footer></Footer>
+    <!-- 规格选择 -->
+    <index-sku-dialog :skuModal.sync="skuModal" :specTemplateId="goodsDetail.specTemplateId" :isCarOrBuy="isCarOrBuy"
+      @toShopCart='getAddCar' @togoBuy="toPayment"></index-sku-dialog>
   </div>
 </template>
 
@@ -1051,6 +1054,7 @@ import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
 import GoodsItem from "@/components/goodsItem/index";
+import IndexSkuDialog from '@/components/goodsItem/IndexSkuDialog.vue'
 import { mapMutations } from "vuex";
 export default {
   name: "GoodsDetail",
@@ -1059,6 +1063,7 @@ export default {
     Header,
     ToolBar,
     GoodsItem,
+    IndexSkuDialog,
   },
   data() {
     return {
@@ -1106,6 +1111,8 @@ export default {
         "Z",
       ],
       recommendList: [],
+      skuModal: false,
+      isCarOrBuy: 1, // 1加入购物车 2立即购买
     };
   },
   computed: {
@@ -1755,6 +1762,16 @@ export default {
         });
         return;
       }
+      // 判断有没有规格选择
+      if (this.goodsDetail.specTemplateId) {
+        this.isCarOrBuy = 2
+        this.skuModal = true
+        return
+      }
+
+      this.toPayment()
+    },
+    toPayment() {
       let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
       localStorage.setItem("checkGoodsList", JSON.stringify(selectGoodsList));
       this.$router.push({
@@ -1769,6 +1786,16 @@ export default {
         });
         return;
       }
+      // 判断有没有规格选择
+			if (this.goodsDetail.specTemplateId) {
+				this.isCarOrBuy = 1
+				this.skuModal = true
+				return
+			}
+
+      this.getAddCar()
+    },
+    getAddCar() {
       this.$request
         .addCart({ goodsId: this.goodsId })
         .then((res) => {

src/pages/goods-detail/course-detail.vue

@@ -493,6 +493,9 @@
 
     <ToolBar></ToolBar>
     <Footer></Footer>
+    <!-- 规格选择 -->
+    <index-sku-dialog :skuModal.sync="skuModal" :specTemplateId="goodsDetail.specTemplateId" :isCarOrBuy="isCarOrBuy"
+      @toShopCart='getAddCar' @togoBuy="toPayment"></index-sku-dialog>
   </div>
 </template>
 
@@ -501,6 +504,7 @@ import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
 import GoodsItem from "@/components/goodsItem/index";
+import IndexSkuDialog from '@/components/goodsItem/IndexSkuDialog.vue'
 import { mapMutations } from "vuex";
 export default {
   name: "GoodsDetail",
@@ -509,6 +513,7 @@ export default {
     Header,
     ToolBar,
     GoodsItem,
+    IndexSkuDialog,
   },
   data() {
     return {
@@ -589,6 +594,8 @@ export default {
       freeMenuList: [], //赠送题卷列表
       teaIndex: 0,
       States: {0: 0},
+      skuModal: false,
+      isCarOrBuy: 1, // 1加入购物车 2立即购买
     };
   },
   beforeDestroy() {
@@ -684,6 +691,7 @@ export default {
      获取推荐列表
      */
     getRecommend() {
+      // /app/common/activity/recommend/list
       this.$request
         .appCommonActivityRecommendList({
           businessId: this.goodsDetail.businessId,
@@ -1381,7 +1389,24 @@ export default {
     },
     buyNow() {
       if (this.$tools.isLogin()) {
-        if (this.goodsDetail.templateType) {
+        // 判断有没有规格选择
+        if (this.goodsDetail.specTemplateId) {
+          this.isCarOrBuy = 2
+          this.skuModal = true
+          return
+        }
+
+        this.toPayment()
+      } else {
+        this.setCurrentRouter(this.$route);
+        this.$router.push({
+          path: "/login",
+        });
+        return;
+      }
+    },
+    toPayment() {
+      if (this.goodsDetail.templateType) {
           this.selectClassModal = true;
         } else {
           let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
@@ -1423,13 +1448,6 @@ export default {
             path: "/payment",
           });
         }
-      } else {
-        this.setCurrentRouter(this.$route);
-        this.$router.push({
-          path: "/login",
-        });
-        return;
-      }
     },
     pay() {
       if (
@@ -1508,8 +1526,17 @@ export default {
         });
         return;
       }
-      this.$request
-        .addCart({ goodsId: status ? goodsId : this.goodsId })
+      // 判断有没有规格选择
+			if (this.goodsDetail.specTemplateId) {
+				this.isCarOrBuy = 1
+				this.skuModal = true
+				return
+			}
+
+      this.getAddCar()
+    },
+    getAddCar() {
+      this.$request.addCart({ goodsId: this.goodsId })
         .then((res) => {
           this.getCartCount();
           this.$message({

src/pages/goods-detail/live-detail.vue

@@ -536,6 +536,9 @@
 
     <ToolBar></ToolBar>
     <Footer></Footer>
+    <!-- 规格选择 -->
+    <index-sku-dialog :skuModal.sync="skuModal" :specTemplateId="goodsDetail.specTemplateId" :isCarOrBuy="isCarOrBuy"
+      @toShopCart='getAddCar' @togoBuy="toPayment"></index-sku-dialog>
   </div>
 </template>
 
@@ -544,6 +547,7 @@ import Footer from "@/components/footer/index";
 import Header from "@/components/header/index";
 import ToolBar from "@/components/toolbar/index";
 import GoodsItem from "@/components/goodsItem/index";
+import IndexSkuDialog from '@/components/goodsItem/IndexSkuDialog.vue'
 import { mapMutations } from "vuex";
 export default {
   name: "GoodsDetail",
@@ -552,6 +556,7 @@ export default {
     Header,
     ToolBar,
     GoodsItem,
+    IndexSkuDialog,
   },
   data() {
     return {
@@ -629,6 +634,8 @@ export default {
       needOpen: true, //是否需要一进来展开第一章节
       menuIndex: [], //需要展开的章节索引值
       freeMenuList: [], //赠送题卷列表
+      skuModal: false,
+      isCarOrBuy: 1, // 1加入购物车 2立即购买
     };
   },
   mounted() {
@@ -1396,7 +1403,24 @@ export default {
     },
     buyNow() {
       if (this.$tools.isLogin()) {
-        let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
+        // 判断有没有规格选择
+        if (this.goodsDetail.specTemplateId) {
+          this.isCarOrBuy = 2
+          this.skuModal = true
+          return
+        }
+        
+        this.toPayment()
+      } else {
+        this.setCurrentRouter(this.$route);
+        this.$router.push({
+          path: "/login",
+        });
+        return;
+      }
+    },
+    toPayment() {
+      let selectGoodsList = JSON.parse(JSON.stringify([this.goodsDetail]));
         selectGoodsList.forEach((item) => {
           if (item.goodsType == 1) {
             if (item.templateType == "class") {
@@ -1429,13 +1453,6 @@ export default {
         this.$router.push({
           path: "/payment",
         });
-      } else {
-        this.setCurrentRouter(this.$route);
-        this.$router.push({
-          path: "/login",
-        });
-        return;
-      }
     },
     pay() {
       if (
@@ -1514,8 +1531,16 @@ export default {
         });
         return;
       }
-      this.$request
-        .addCart({ goodsId: status ? goodsId : this.goodsId })
+      // 判断有没有规格选择
+			if (this.goodsDetail.specTemplateId) {
+				this.isCarOrBuy = 1
+				this.skuModal = true
+				return
+			}
+      this.getAddCar()
+    },
+    getAddCar() {
+      this.$request.addCart({ goodsId: this.goodsId })
         .then((res) => {
           this.getCartCount();
           this.$message({

src/pages/home/index.vue

@@ -530,10 +530,10 @@
           </p>
           <ul v-else class="list clearfix">
             <template v-for="(item, index) in goodsList2">
+              <!-- @click="goodsDetail(item, 2)" -->
               <li
                 class="bank-item"
                 :key="index"
-                @click="goodsDetail(item, 2)"
               >
                 <GoodsItem :item="item"></GoodsItem>
               </li>