修改

pagesGoods/index/index.vue

@@ -51,12 +51,54 @@
 						<scroll-view scroll-y="true" class="scroll-view">
 							<view class="list-scroll-view">
 								<view class="one">
+									<view class="one_1">
+										<view class="l">
+											<image class="image"
+												:src="specInfo&&specInfo.file.length>0?specInfo.file[0].url:''"
+												mode="aspectFill"></image>
+										</view>
+										<view class="r">
+											<view class="money">
+												<text class="money_1"><text>¥</text>{{specInfo.money}}</text>
+											</view>
+											<view class="other_1">
+												<text>已选：</text>
+												<text>{{specInfo.name||'暂无'}}</text>
+											</view>
+											<view class="other_1">
+												<text>库存：</text>
+												<text>{{specInfo.num||'0'}}</text>
+											</view>
+										</view>
+									</view>
+									<view class="one_2">
+										<view class="one_2_1">
+											规格
+										</view>
+										<view class="one_2_2">
+											<view v-for="(item,index) in specList" :key="index" @tap="toSpecs(item)">
+												<text>{{item.name}}</text>
+											</view>
+										</view>
+									</view>
+									<view class="one_3">
+										<view class="one_3_1">
+											<text>数量</text>
+										</view>
+										<view class="one_3_1">
+											<uni-number-box v-model="buy_num" @change="toCount" :min="1"
+												:max="specsInfo.num" />
+										</view>
+										<view class="one_3_1">
+											<text>库存{{specsInfo.num||0}}</text>
+										</view>
+									</view>
 								</view>
 							</view>
 						</scroll-view>
 					</view>
 					<view class="info_2">
-						<button @tap="toMarket">加入购物车</button>
+						<button class="button" @tap="toMarket">加入购物车</button>
 					</view>
 				</view>
 			</view>
@@ -80,6 +122,11 @@
 				popupShow: '1',
 				// 规格数组
 				specList: [],
+				specInfo: {},
+				// 规格信息
+				is_specs: 0,
+				// 购买数量
+				buy_num: 1,
 				// 底部商品导航
 				options: [{
 						icon: 'shop',
@@ -133,8 +180,11 @@
 						let data = arr.data.sort((a, b) => {
 							return a.money - b.money
 						})
-						if (data) res.data.money = data[0].money
-						that.$set(that, `specList`, data);
+						if (data) {
+							res.data.money = data[0].money
+							that.$set(that, `specInfo`, data[0]);
+							that.$set(that, `specList`, data);
+						}
 						that.$set(that, `info`, res.data);
 						that.$set(that, `fileList`, res.data.file);
 					}
@@ -144,18 +194,25 @@
 				})
 				if (res.errcode == '0') that.$set(that.options[1], `info`, res.data);
 			},
+			// 点击店铺或者购物车
 			onClick(e) {
 				uni.showToast({
 					title: `点击${e.content.text}`,
 					icon: 'none'
 				})
 			},
+			// 加入购物车
 			buttonClick(e) {
 				const that = this;
 				that.$set(that, `popupShow`, '1')
 				that.$refs.popup.open();
 			},
-			// 关闭弹框
+			// 加入购物车
+			async toMarket(e) {},
+			// 加数量
+			async toCount(e) {},
+			// 选择规格
+			async toSpecs(e) {},
 			toClose() {
 				const that = this;
 				that.$refs.popup.close();
@@ -274,4 +331,158 @@
 			flex-direction: column;
 		}
 	}
+
+	.uni-popup {
+		z-index: 9999 !important;
+	}
+
+	.popup {
+		display: flex;
+		flex-direction: column;
+		width: 100vw;
+		height: 60vh;
+
+		.close {
+			text-align: right;
+			padding: 2vw;
+		}
+
+		.specs_1 {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			height: 54vh;
+
+			.info_1 {
+				position: relative;
+				flex-grow: 1;
+
+				.one {
+					.one_1 {
+						display: flex;
+						margin: 0 0 2vw 0;
+						padding: 0 0 2vw 0;
+						border-bottom: 0.5vw solid var(--f9Color);
+
+						.l {
+							width: 25vw;
+							height: 25vw;
+
+							.image {
+								width: 100%;
+								height: 100%;
+								border-radius: 5px;
+							}
+						}
+
+						.r {
+							width: 70vw;
+							padding: 0 0 0 2vw;
+
+							.money {
+								margin: 0 0 2vw 0;
+
+								.money_1 {
+									font-size: var(--font20Size);
+									color: var(--fF0Color);
+									padding: 0 2vw 0 0;
+
+									text {
+										font-size: var(--font14Size);
+									}
+								}
+							}
+
+							.other_1 {
+								font-size: var(--font15Size);
+								color: var(--f85Color);
+
+								text:last-child {
+									color: var(--f00Color);
+								}
+							}
+						}
+					}
+
+					.one_2 {
+						margin: 0 0 2vw 0;
+						border-bottom: 0.5vw solid var(--f9Color);
+
+						.one_2_1 {
+							font-size: 14px;
+							margin: 0 0 2vw 0;
+						}
+
+						.one_2_2 {
+							display: flex;
+							flex-wrap: wrap;
+
+							.list {
+								background-color: #F5F5F5;
+								margin: 0 2vw 2vw 0;
+								padding: 0.5vw 1vw;
+								border-radius: 5px;
+
+								text {
+									font-size: 14px;
+									color: var(--f00Color);
+								}
+							}
+
+							.huilist {
+								background-color: #DCDCDC;
+
+								text {
+									color: var(--f85Color);
+								}
+							}
+
+							.redlist {
+								background-color: var(--fF0Color);
+
+								text {
+									color: #ffffff;
+								}
+							}
+
+							.huiilist {
+								background-color: #808080;
+
+								text {
+									color: #cccccc;
+								}
+							}
+						}
+					}
+
+					.one_3 {
+						display: flex;
+
+						.one_3_1 {
+							margin: 0 2vw 0 0;
+
+							text {
+								font-size: 14px;
+								color: var(--f85Color);
+							}
+
+							.limit {
+								color: var(--fF0Color);
+								padding: 0 0 0 2vw;
+							}
+						}
+					}
+				}
+			}
+
+			.info_2 {
+				border-bottom: 0.5vw solid var(--f9Color);
+
+				.button {
+					background-color: var(--f3CColor);
+					color: var(--mainColor);
+				}
+			}
+		}
+	}
 </style>

unpackage/dist/dev/mp-weixin/pagesGoods/index/index.js

@@ -102,6 +102,9 @@ try {
     },
     uniPopup: function() {
       return __webpack_require__.e(/*! import() | uni_modules/uni-popup/components/uni-popup/uni-popup */ "uni_modules/uni-popup/components/uni-popup/uni-popup").then(__webpack_require__.bind(null, /*! @/uni_modules/uni-popup/components/uni-popup/uni-popup.vue */ 307))
+    },
+    uniNumberBox: function() {
+      return __webpack_require__.e(/*! import() | uni_modules/uni-number-box/components/uni-number-box/uni-number-box */ "uni_modules/uni-number-box/components/uni-number-box/uni-number-box").then(__webpack_require__.bind(null, /*! @/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue */ 275))
     }
   }
 } catch (e) {
@@ -224,6 +227,48 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
+//
 var _default =
 {
   data: function data() {
@@ -240,6 +285,11 @@ var _default =
       popupShow: '1',
       // 规格数组
       specList: [],
+      specInfo: {},
+      // 规格信息
+      is_specs: 0,
+      // 购买数量
+      buy_num: 1,
       // 底部商品导航
       options: [{
         icon: 'shop',
@@ -293,8 +343,11 @@ var _default =
                   data = arr.data.sort(function (a, b) {
                     return a.money - b.money;
                   });
-                  if (data) res.data.money = data[0].money;
-                  that.$set(that, "specList", data);
+                  if (data) {
+                    res.data.money = data[0].money;
+                    that.$set(that, "specInfo", data[0]);
+                    that.$set(that, "specList", data);
+                  }
                   that.$set(that, "info", res.data);
                   that.$set(that, "fileList", res.data.file);
                 }case 9:_context2.next = 11;return (
@@ -304,18 +357,25 @@ var _default =
 
                 if (res.errcode == '0') that.$set(that.options[1], "info", res.data);case 13:case "end":return _context2.stop();}}}, _callee2);}))();
     },
+    // 点击店铺或者购物车
     onClick: function onClick(e) {
       uni.showToast({
         title: "\u70B9\u51FB".concat(e.content.text),
         icon: 'none' });
 
     },
+    // 加入购物车
     buttonClick: function buttonClick(e) {
       var that = this;
       that.$set(that, "popupShow", '1');
       that.$refs.popup.open();
     },
-    // 关闭弹框
+    // 加入购物车
+    toMarket: function toMarket(e) {return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee3() {return _regenerator.default.wrap(function _callee3$(_context3) {while (1) {switch (_context3.prev = _context3.next) {case 0:case "end":return _context3.stop();}}}, _callee3);}))();},
+    // 加数量
+    toCount: function toCount(e) {return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee4() {return _regenerator.default.wrap(function _callee4$(_context4) {while (1) {switch (_context4.prev = _context4.next) {case 0:case "end":return _context4.stop();}}}, _callee4);}))();},
+    // 选择规格
+    toSpecs: function toSpecs(e) {return _asyncToGenerator( /*#__PURE__*/_regenerator.default.mark(function _callee5() {return _regenerator.default.wrap(function _callee5$(_context5) {while (1) {switch (_context5.prev = _context5.next) {case 0:case "end":return _context5.stop();}}}, _callee5);}))();},
     toClose: function toClose() {
       var that = this;
       that.$refs.popup.close();

unpackage/dist/dev/mp-weixin/pagesGoods/index/index.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "商品详情",
   "usingComponents": {
     "uni-goods-nav": "/uni_modules/uni-goods-nav/components/uni-goods-nav/uni-goods-nav",
-    "uni-popup": "/uni_modules/uni-popup/components/uni-popup/uni-popup"
+    "uni-popup": "/uni_modules/uni-popup/components/uni-popup/uni-popup",
+    "uni-number-box": "/uni_modules/uni-number-box/components/uni-number-box/uni-number-box"
   }
 }

unpackage/dist/dev/mp-weixin/pagesGoods/index/index.wxss

@@ -89,4 +89,125 @@
   display: flex;
   flex-direction: column;
 }
+.uni-popup {
+  z-index: 9999 !important;
+}
+.popup {
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 60vh;
+}
+.popup .close {
+  text-align: right;
+  padding: 2vw;
+}
+.popup .specs_1 {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 54vh;
+}
+.popup .specs_1 .info_1 {
+  position: relative;
+  flex-grow: 1;
+}
+.popup .specs_1 .info_1 .one .one_1 {
+  display: flex;
+  margin: 0 0 2vw 0;
+  padding: 0 0 2vw 0;
+  border-bottom: 0.5vw solid var(--f9Color);
+}
+.popup .specs_1 .info_1 .one .one_1 .l {
+  width: 25vw;
+  height: 25vw;
+}
+.popup .specs_1 .info_1 .one .one_1 .l .image {
+  width: 100%;
+  height: 100%;
+  border-radius: 5px;
+}
+.popup .specs_1 .info_1 .one .one_1 .r {
+  width: 70vw;
+  padding: 0 0 0 2vw;
+}
+.popup .specs_1 .info_1 .one .one_1 .r .money {
+  margin: 0 0 2vw 0;
+}
+.popup .specs_1 .info_1 .one .one_1 .r .money .money_1 {
+  font-size: var(--font20Size);
+  color: var(--fF0Color);
+  padding: 0 2vw 0 0;
+}
+.popup .specs_1 .info_1 .one .one_1 .r .money .money_1 text {
+  font-size: var(--font14Size);
+}
+.popup .specs_1 .info_1 .one .one_1 .r .other_1 {
+  font-size: var(--font15Size);
+  color: var(--f85Color);
+}
+.popup .specs_1 .info_1 .one .one_1 .r .other_1 text:last-child {
+  color: var(--f00Color);
+}
+.popup .specs_1 .info_1 .one .one_2 {
+  margin: 0 0 2vw 0;
+  border-bottom: 0.5vw solid var(--f9Color);
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_1 {
+  font-size: 14px;
+  margin: 0 0 2vw 0;
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 {
+  display: flex;
+  flex-wrap: wrap;
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 .list {
+  background-color: #F5F5F5;
+  margin: 0 2vw 2vw 0;
+  padding: 0.5vw 1vw;
+  border-radius: 5px;
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 .list text {
+  font-size: 14px;
+  color: var(--f00Color);
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 .huilist {
+  background-color: #DCDCDC;
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 .huilist text {
+  color: var(--f85Color);
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 .redlist {
+  background-color: var(--fF0Color);
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 .redlist text {
+  color: #ffffff;
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 .huiilist {
+  background-color: #808080;
+}
+.popup .specs_1 .info_1 .one .one_2 .one_2_2 .huiilist text {
+  color: #cccccc;
+}
+.popup .specs_1 .info_1 .one .one_3 {
+  display: flex;
+}
+.popup .specs_1 .info_1 .one .one_3 .one_3_1 {
+  margin: 0 2vw 0 0;
+}
+.popup .specs_1 .info_1 .one .one_3 .one_3_1 text {
+  font-size: 14px;
+  color: var(--f85Color);
+}
+.popup .specs_1 .info_1 .one .one_3 .one_3_1 .limit {
+  color: var(--fF0Color);
+  padding: 0 0 0 2vw;
+}
+.popup .specs_1 .info_2 {
+  border-bottom: 0.5vw solid var(--f9Color);
+}
+.popup .specs_1 .info_2 .button {
+  background-color: var(--f3CColor);
+  color: var(--mainColor);
+}