fix: 弹窗滚动问题和购买选班级问题

src/components/goodsItem/IndexSkuDialog.vue

@@ -3,7 +3,7 @@
         <el-dialog
             title="选择规格"
             :visible.sync="skuModal"
-            width="452px"
+            width="680px"
             class="appoint-modal"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
@@ -24,10 +24,12 @@
                 <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 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>
@@ -153,12 +155,12 @@ export default {
 					this.skuItem = res.data || {}
 				} else {
 					this.skuItem = {}
-					this.$message.warning('该规格属性下没有设置商品')
+					this.$message.warning('商品已下架, 请重新选择')
 				}
 			}).catch((err) => {
                 this.loading = false
 				this.skuItem = {}
-				this.$message.warning('该规格属性下没有设置商品')
+				this.$message.warning('商品已下架, 请重新选择')
             })
 		},
         confirms() {
@@ -170,7 +172,7 @@ export default {
 				this.$message.warning('商品已下架, 请重新选择')
 				return
 			}
-			
+
 			let sysTime = this.$tools.timest()
 			if (sysTime <= this.skuItem.validityStartTime || sysTime >= this.skuItem.validityEndTime) {
 				this.$message.warning('商品不在有效期, 请重新选择')
@@ -240,7 +242,13 @@ export default {
 			margin-bottom: 16px;
             margin-top: 32px;
 		}
+		.mains {
+			width: 100%;
+			max-height: 200px;
+			overflow-y: auto;
+		}
 		.grade_names {
+			width: 100%;
 			display: flex;
 			flex-wrap: wrap;
 		}

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

@@ -417,6 +417,7 @@
       width="800px"
       class="select-class"
       :visible.sync="selectClassModal"
+      :before-close="cancelClassModal"
     >
       <div class="select-class__content">
         <div
@@ -430,7 +431,7 @@
             v-model="gradeId"
             placeholder="请选择班级"
             size="small"
-            @click.native="selectClick(goodsDetail, 'class')"
+            @click.native="selectClick(goodsDetail, 'class', goodsId)"
           >
             <el-option
               v-for="item in gradeList"
@@ -1324,12 +1325,17 @@ export default {
         chapter.list = res.data;
       });
     },
-    selectClick(goodsDetail, type) {
+    cancelClassModal() {
+      this.selectClassModal = false
+      this.goodsId = this.$route.params.goodsId
+    },
+    selectClick(goodsDetail, type, goodsId) {
       if (type == "class") {
         //选择班级
         if (!this.gradeList.length) {
+          // goodsDetail.goodsId
           this.$request
-            .goodsGradeList({ goodsId: goodsDetail.goodsId })
+            .goodsGradeList({ goodsId: goodsId })
             .then((res) => {
               this.gradeList = res.rows;
               if (this.gradeList.length == 0) {
@@ -1408,6 +1414,7 @@ export default {
     },
     togoBuy(skuItem) {
       this.toPayment(skuItem)
+      this.goodsId = skuItem.goodsId
     },
     toPayment(goodsDetail) {
       if (this.goodsDetail.templateType) {

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

@@ -460,6 +460,7 @@
       width="800px"
       class="select-class"
       :visible.sync="selectClassModal"
+      :before-close="cancelClassModal"
     >
       <div class="select-class__content">
         <div
@@ -473,7 +474,7 @@
             v-model="gradeId"
             placeholder="请选择班级"
             size="small"
-            @click.native="selectClick(goodsDetail, 'class')"
+            @click.native="selectClick(goodsDetail, 'class', goodsId)"
           >
             <el-option
               v-for="item in gradeList"
@@ -1338,12 +1339,17 @@ export default {
         chapter.list = res.data;
       });
     },
-    selectClick(goodsDetail, type) {
+    cancelClassModal() {
+      this.selectClassModal = false
+      this.goodsId = this.$route.params.goodsId
+    },
+    selectClick(goodsDetail, type, goodsId) {
       if (type == "class") {
-        //选择班级
+        //选择班级  
+        // 之前的传参：goodsId:goodsDetail.goodsId
         if (!this.gradeList.length) {
           this.$request
-            .goodsGradeList({ goodsId: goodsDetail.goodsId })
+            .goodsGradeList({ goodsId: goodsId })
             .then((res) => {
               this.gradeList = res.rows;
               if (this.gradeList.length == 0) {
@@ -1422,6 +1428,7 @@ export default {
     },
     togoBuy(skuItem) {
       this.toPayment(skuItem)
+      this.goodsId = skuItem.goodsId
     },
     toPayment(goodsDetail) {
       let selectGoodsList = JSON.parse(JSON.stringify([goodsDetail]));

src/pages/goodsTopic/components/buyDialog.vue

@@ -3,7 +3,7 @@
         <el-dialog
             :title="titles"
             :visible.sync="buyModal"
-            width="452px"
+            width="680px"
             class="appoint-modal"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
@@ -11,16 +11,18 @@
         >
             <div v-loading="loading" class="contentts">
                 <div class="pop_prices">
-                    <span v-if="skuItem.standPrice || skuItem.standPrice == 0" class="price">￥ {{ skuItem.standPrice || 0 }}</span>
-                    <span v-if="skuItem.linePrice" class="lin_price">￥ {{ skuItem.linePrice }}</span>
+                    <span v-if="skuItem.standPrice || skuItem.standPrice == 0" class="price">￥{{ skuItem.standPrice || 0 }}</span>
+                    <span v-if="skuItem.linePrice" class="lin_price">￥{{ skuItem.linePrice }}</span>
                 </div>
                 <div v-if="courseSku.length" class="checks">
                     请在下方
                     <span>选择科目：</span>
                 </div>
-                <div v-if="courseSku.length" class="check_con">
-                    <div class="course_items" v-for="(item, index) in courseSku" :key="index" :class="{nactive: skuIndex == index}" @click="selectSku(item, index)">
-                        {{ item.goodsName }}
+                <div v-if="courseSku.length" class="mains">
+                    <div class="check_con">
+                        <div class="course_items" v-for="(item, index) in courseSku" :key="index" :class="{nactive: skuIndex == index}" @click="selectSku(item, index)">
+                            {{ item.goodsName }}
+                        </div>
                     </div>
                 </div>
                 <div v-else class="nodata">暂无科目选择</div>
@@ -191,12 +193,17 @@ export default {
             color: #409EFF;
         }
     }
+    .mains {
+        width: 100%;
+        height: 230px;
+        overflow-y: auto;
+    }
     .check_con {
         width: 100%;
         display: flex;
         flex-wrap: wrap;
         .course_items {
-            min-width: 190px;
+            // min-width: 190px;
             padding: 13px 16px;
             border-radius: 8px;
             margin-right: 16px;