1

pagesHome/order/detail.vue

@@ -9,7 +9,8 @@
 							<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
 								indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
 								<swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
-									<image class="image" :src="item.url" mode=""></image>
+									<image class="image" :src="item.url" mode="">
+									</image>
 								</swiper-item>
 							</swiper>
 						</view>
@@ -17,17 +18,17 @@
 							<view class="two_1">
 								<view class="money_1">
 									<text>¥</text>
-									<text>{{info.sell_money}}</text>
+									<text>{{specs&&specs.length>0?specs[0].sell_money:''}}</text>
 								</view>
 								<view class="money_2">
 									<text>¥</text>
-									<text>{{info.flow_money}}</text>
+									<text>{{specs&&specs.length>0?specs[0].flow_money:''}}</text>
 								</view>
 							</view>
 							<view class="two_2">{{info.name}}</view>
 							<view class="two_3">{{info.shot_brief}}</view>
 							<view class="two_4">
-								<text>运费{{info.freight}}元</text>
+								<text>运费{{specs&&specs.length>0?specs[0].freight:''}}元</text>
 								<text>{{info.send_time}}内发货</text>
 							</view>
 						</view>
@@ -43,10 +44,10 @@
 						</view>
 						<view class="four">
 							<view class="four_1">
-								<image class="image" :src="shop.file"></image>
+								<image class="image" :src="shop.logo&&shop.logo.length>0?shop.logo[0].url:''"></image>
 								<view class="other">
 									<view class="name">{{shop.name}}</view>
-									<view class="other_1"><text>宝贝数</text>{{shop.num}}</view>
+									<view class="other_1"><text>宝贝数</text>{{shop.num||0}}</view>
 								</view>
 							</view>
 							<view class="four_2">
@@ -92,11 +93,11 @@
 		<uni-popup ref="popup" background-color="#fff" type="bottom">
 			<view class="content">
 				<view class="one">
-					<image class="image" :src="info.file"></image>
+					<image class="image" :src="info.file&&info.file.length>0?info.file[0].url:''"></image>
 					<view class="other">
 						<view class="money">
 							<text>¥</text>
-							<text>{{info.sell_money}}</text>
+							<text>{{money}}</text>
 						</view>
 						<view class="other_1">
 							已选: <text>{{Selected}}</text>
@@ -107,15 +108,19 @@
 					</view>
 				</view>
 				<view class="two">
-					<view class="two_1">口味</view>
-					<view class="two_2"><text @click="toStyle" :style="{color:color,background:background}">{{info.specs.flavor}}</text></view>
+					<view class="two_1">规格</view>
+					<view class="two_2">
+						<text v-for="(item,index) in specs" :key="index" @click="toStyle(item,index)"
+							:class="{ 'style': isActive==index}">{{item.name}}</text>
+					</view>
 				</view>
 				<view class="thr">
-					<text>数量:</text>
+					<text>数量</text>
 					<view class="count">
-						<uni-number-box :disabled="disabled" v-model="info.specs.num" @change="toCount">
+						<uni-number-box :min="1" :max="max" :disabled="disabled" v-model="num" @change="toCount">
 						</uni-number-box>
 					</view>
+					<text>库存{{max}}</text>
 				</view>
 				<view @click="toBuy" class="button">{{type=='0'?'加入购物车':'立即购买'}}</view>
 			</view>
@@ -179,41 +184,11 @@
 					}
 				],
 				id: '',
-				bannerList: [ // 轮播图
-					{
-						url: require('@/static/test.png')
-					},
-					{
-						url: require('@/static/test.png')
-					},
-					{
-						url: require('@/static/test.png')
-					},
-					{
-						url: require('@/static/test.png')
-					},
-				],
+				bannerList: [],
 				// 详情
-				info: {
-					file: require('@/static/test.png'),
-					name: '大红门无淀粉果木熏火腿360g',
-					sell_money: 28.8,
-					flow_money: 35,
-					shot_brief: '果木熏制 传统技法',
-					freight: 8.00,
-					send_time: '24h',
-					specs: {
-						flavor: '果木熏火腿',
-						num: 1
-					},
-					brief: '简介',
-				},
-				shop: {
-					file: require('@/static/test.png'),
-					name: '官方自营店',
-					num: 2,
-					time: '2022-09-27'
-				},
+				info: {},
+				shop: {},
+				specs: [],
 				// 已选
 				Selected: '',
 				// 是否显示返回顶部
@@ -224,10 +199,14 @@
 				// 菜单显示
 				menu: false,
 				disabled: true,
-				background: '#f9f9f9',
-				color: '#000',
 				// 显示文字判断
-				type: '0'
+				type: '0',
+				// 选择规格
+				isActive: -1,
+				money: 0,
+				// 计数器
+				num: 1,
+				max: 0
 			};
 		},
 		onLoad: async function(e) {
@@ -265,16 +244,18 @@
 				that.$refs.popup.close()
 			},
 			// 修改样式
-			toStyle() {
+			toStyle(e, index) {
 				const that = this;
-				that.color = '#ffffff';
-				that.background = '#ff0000';
-				that.Selected = that.info.specs.flavor;
+				that.$set(that, `isActive`, index)
+				that.$set(that, `Selected`, e.name)
+				that.$set(that, `max`, e.num)
+				that.$set(that, `money`, e.sell_money)
 				that.disabled = false;
 			},
 			// 计数器
 			toCount(e) {
-				console.log(e);
+				const that = this;
+				that.num = e;
 			},
 			// 收藏
 			toCollect() {
@@ -328,11 +309,16 @@
 			},
 			async search() {
 				const that = this;
-				// let res = await that.$api(`/goods/${that.id}`, `GET`, {});
-				// if (res.errcode == '0') {
-				// 	that.$set(that, `info`, res.data)
-				// 	console.log(res.data);
-				// }
+				let res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
+					id: that.id
+				});
+				if (res.errcode == '0') {
+					that.$set(that, `info`, res.data.goods)
+					that.$set(that, `specs`, res.data.specs)
+					that.$set(that, `shop`, res.data.shop)
+					if (res.data.specs.length > 0) that.$set(that, `money`, res.data.specs[0].sell_money)
+					that.$set(that, `bannerList`, res.data.goods.file)
+				}
 			},
 		}
 	}
@@ -654,26 +640,33 @@
 				padding: 1vw;
 
 				text {
+					margin: 0 2vw 0 0;
 					padding: 1vw;
 					border-radius: 1vw;
 					background-color: var(--f9Color);
 				}
+
+				.style {
+					color: var(--mainColor);
+					background-color: var(--ff0Color);
+				}
 			}
 		}
 
 		.thr {
 			display: flex;
-			justify-content: space-between;
+			justify-content: flex-start;
 			margin: 0 2vw;
 			padding: 2vw 0;
 
 			text {
-				margin: 1vw 0 0 0;
+				margin: 0 2vw 0 0;
 			}
 
-			.count {
-				margin: 0 2vw;
-				flex-grow: 1;
+			text:last-child {
+				margin: 0 0 0 2vw;
+				font-size: var(--font12Size);
+				color: var(--f85Color);
 			}
 		}