修改样式

pages/good/index.vue

@@ -1,306 +1,331 @@
-<template>
-	<view class="content">
-		<view class="one">
-			<view class="one_1">
-				<scroll-view scroll-y="true" class="scroll-view">
-					<view class="list-scroll-view">
-						<view class="list" :class="[active==index?'listActive':'']" v-for="(item,index) in typeList"
-							:key="index" @tap="toChange(index,item)">
-							<text>{{item.label}}</text>
-						</view>
-					</view>
-				</scroll-view>
-			</view>
-			<view class="one_2">
-				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
-					<view class="list-scroll-view">
-						<view class=" one_2_1">
-							<view class="list" v-for="(tag,index) in marketList" :key="index" @tap="toBuy(tag)">
-								<view class="img">
-									<image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''" mode="">
-									</image>
-								</view>
-								<view class="info">
-									<view class="name textOver">
-										<text>{{tag.name||'暂无'}}</text>
-									</view>
-									<view class="num">
-										<text>销量 {{tag.sell_num||'0'}}</text>
-									</view>
-								</view>
-							</view>
-						</view>
-						<view class="is_bottom" v-if="is_bottom">
-							<text>{{config.bottom_title}}</text>
-						</view>
-					</view>
-				</scroll-view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				config: {},
-				user: {},
-				active: '0',
-				typeList: [],
-				type: '',
-				// 商品列表
-				marketList: [],
-				total: 0,
-				page: 0,
-				skip: 0,
-				limit: 10,
-				// 数据是否触底
-				is_bottom: false,
-				scrollTop: 0,
-			}
-		},
-		onLoad: function() {
-			const that = this;
-			that.searchToken();
-			that.searchConfig();
-			that.search();
-		},
-		onPullDownRefresh: async function() {
-			const that = this;
-			that.clearPages();
-			await that.search();
-			uni.stopPullDownRefresh();
-		},
-		methods: {
-			searchToken() {
-				const that = this;
-				try {
-					const res = uni.getStorageSync('token');
-					if (res) that.$set(that, `user`, res);
-				} catch (e) {
-					uni.showToast({
-						title: err.errmsg,
-						icon: 'error',
-						duration: 2000
-					});
-				}
-			},
-			searchConfig() {
-				const that = this;
-				try {
-					const res = uni.getStorageSync('config');
-					if (res) that.$set(that, `config`, res);
-				} catch (e) {
-					uni.showToast({
-						title: err.errmsg,
-						icon: 'error',
-						duration: 2000
-					});
-				}
-			},
-			// 查询左侧一级列表
-			async search() {
-				const that = this;
-				let res;
-				res = await that.$api(`/DictData`, 'GET', {
-					is_use: '0',
-					type: 'goods_type'
-				})
-				if (res.errcode == '0') {
-					that.$set(that, `typeList`, res.data);
-					if (res.total > 0) {
-						that.$set(that, `type`, res.data[0].value);
-						that.searchMarket()
-					}
-				}
-			},
-			// 查询产品
-			async searchMarket(e) {
-				const that = this;
-				let info = {
-					skip: that.skip,
-					limit: that.limit,
-					type: that.type
-				}
-				const res = await that.$api(`/Good`, `GET`, {
-					...info,
-				})
-				if (res.errcode == '0') {
-					let list = [...that.marketList, ...res.data];
-					that.$set(that, `marketList`, list);
-					that.$set(that, `total`, res.total)
-				} else {
-					uni.showToast({
-						title: res.errmsg || '错误信息',
-						icon: 'none'
-					})
-				}
-			},
-			// 分页
-			toPage() {
-				const that = this;
-				let list = that.marketList;
-				let limit = that.limit;
-				if (that.total > list.length) {
-					uni.showLoading({
-						title: '加载中',
-						mask: true
-					})
-					let page = that.page + 1;
-					that.$set(that, `page`, page)
-					let skip = page * limit;
-					that.$set(that, `skip`, skip)
-					that.searchMarket();
-					uni.hideLoading();
-				} else that.$set(that, `is_bottom`, true)
-			},
-			// 触底
-			toScroll(e) {
-				const that = this;
-				let up = that.scrollTop;
-				that.$set(that, `scrollTop`, e.detail.scrollTop);
-				let num = Math.sign(up - e.detail.scrollTop);
-				if (num == 1) that.$set(that, `is_bottom`, false);
-			},
-			// 左侧一级选择
-			toChange(index, e) {
-				const that = this;
-				that.$set(that, `active`, index);
-				that.$set(that, `type`, e.value);
-				that.clearPage();
-				that.searchMarket();
-			},
-			// 清空列表
-			clearPage() {
-				const that = this;
-				that.$set(that, `marketList`, []);
-				that.$set(that, `skip`, 0)
-				that.$set(that, `limit`, 10)
-				that.$set(that, `page`, 0)
-			},
-			// 清空总信息
-			clearPages() {
-				const that = this;
-				that.$set(that, `marketList`, [])
-				that.$set(that, `typeList`, [])
-				that.$set(that, `active`, '0')
-				that.$set(that, `skip`, 0)
-				that.$set(that, `limit`, 10)
-				that.$set(that, `page`, 0)
-			},
-			// 购买
-			toBuy(e) {
-				const that = this;
-				uni.navigateTo({
-					url: `/pagesGoods/index/index?id=${e.id||e._id}`
-				})
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.content {
-
-		.one {
-			height: 100vh;
-			display: flex;
-			flex-direction: row;
-
-			.one_1 {
-				position: relative;
-				width: 25vw;
-				background-color: #fafafa;
-				display: flex;
-				flex-direction: column;
-
-				.list {
-					text-align: center;
-					padding: 2.5vw 0;
-					border-bottom: 1px solid var(--f1Color);
-
-					text {
-						font-size: var(--font14Size);
-					}
-				}
-
-				.listActive {
-					background-color: var(--fffColor);
-				}
-			}
-
-			.one_2 {
-				flex-grow: 1;
-				position: relative;
-				display: flex;
-				flex-direction: column;
-
-				.one_2_1 {
-					padding: 0 2vw;
-					width: 70vw;
-
-					.list {
-						display: flex;
-						width: 66vw;
-						margin: 0 0 2vw 0;
-						padding: 2vw;
-						box-shadow: 0 0 5px var(--f1Color);
-						border-radius: 5px;
-
-						.img {
-							width: 20vw;
-
-							.image {
-								width: 20vw;
-								height: 20vw;
-								border-radius: 5px;
-							}
-						}
-
-						.info {
-							width: 45vw;
-							padding: 0 0 0 2vw;
-
-							.name {
-								font-size: var(--font15Size);
-								margin: 0 0 1vw 0;
-							}
-
-							.num {
-								font-size: var(--font14Size);
-								color: var(--f85Color);
-								margin: 0 0 1vw 0;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.scroll-view {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-
-		.list-scroll-view {
-			display: flex;
-			flex-direction: column;
-		}
-	}
-
-	.is_bottom {
-		width: 100%;
-		text-align: center;
-
-		text {
-			padding: 2vw 0;
-			display: inline-block;
-			color: var(--f85Color);
-			font-size: var(--font14Size);
-		}
-	}
-</style>
+<template>
+	<view class="content">
+		<view class="one">
+			<view class="one_1">
+				<scroll-view scroll-y="true" class="scroll-view">
+					<view class="list-scroll-view">
+						<view class="list" :class="[active==index?'listActive':'']" v-for="(item,index) in typeList"
+							:key="index" @tap="toChange(index,item)">
+							<text>{{item.label}}</text>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+			<view class="one_2">
+				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
+					<view class="list-scroll-view">
+						<view class=" one_2_1">
+							<view class="list" v-for="(tag,index) in marketList" :key="index" @tap="toBuy(tag)">
+								<view class="img">
+									<image class="image" :src="tag.file&&tag.file.length>0?tag.file[0].url:''" mode="">
+									</image>
+								</view>
+								<view class="info">
+									<view class="name textOver">
+										<text>{{tag.name||'暂无'}}</text>
+									</view>
+									<view class="num">
+										<view class="left">￥{{tag.money||'暂无'}}</view>
+										<view class="right">销量 {{tag.sell_num||'0'}}</view>
+									</view>
+								</view>
+							</view>
+						</view>
+						<view class="is_bottom" v-if="is_bottom">
+							<text>{{config.bottom_title}}</text>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				config: {},
+				user: {},
+				active: '0',
+				typeList: [],
+				type: '',
+				// 商品列表
+				marketList: [],
+				total: 0,
+				page: 0,
+				skip: 0,
+				limit: 10,
+				// 数据是否触底
+				is_bottom: false,
+				scrollTop: 0,
+			}
+		},
+		onLoad: function() {
+			const that = this;
+			that.searchToken();
+			that.searchConfig();
+			that.search();
+		},
+		onPullDownRefresh: async function() {
+			const that = this;
+			that.clearPages();
+			await that.search();
+			uni.stopPullDownRefresh();
+		},
+		methods: {
+			searchToken() {
+				const that = this;
+				try {
+					const res = uni.getStorageSync('token');
+					if (res) that.$set(that, `user`, res);
+				} catch (e) {
+					uni.showToast({
+						title: err.errmsg,
+						icon: 'error',
+						duration: 2000
+					});
+				}
+			},
+			searchConfig() {
+				const that = this;
+				try {
+					const res = uni.getStorageSync('config');
+					if (res) that.$set(that, `config`, res);
+				} catch (e) {
+					uni.showToast({
+						title: err.errmsg,
+						icon: 'error',
+						duration: 2000
+					});
+				}
+			},
+			// 查询左侧一级列表
+			async search() {
+				const that = this;
+				let res;
+				res = await that.$api(`/DictData`, 'GET', {
+					is_use: '0',
+					type: 'goods_type'
+				})
+				if (res.errcode == '0') {
+					that.$set(that, `typeList`, res.data);
+					if (res.total > 0) {
+						that.$set(that, `type`, res.data[0].value);
+						that.searchMarket()
+					}
+				}
+			},
+			// 查询产品
+			async searchMarket(e) {
+				const that = this;
+				let info = {
+					skip: that.skip,
+					limit: that.limit,
+					type: that.type
+				}
+				const res = await that.$api(`/Good`, `GET`, {
+					...info,
+				})
+				if (res.errcode == '0') {
+					let list = [...that.marketList, ...res.data];
+					for (let val of list) {
+						const specs = await that.$api(`/Specs`, 'GET', {
+							goods: val._id
+						});
+						if (specs.errcode == 0) {
+							const arr = specs.data.sort((a, b) => {
+								return a.money - b.money
+							})
+							val.money = arr[0].money
+						}
+					}
+					that.$set(that, `marketList`, list);
+					that.$set(that, `total`, res.total)
+				} else {
+					uni.showToast({
+						title: res.errmsg || '错误信息',
+						icon: 'none'
+					})
+				}
+			},
+			// 分页
+			toPage() {
+				const that = this;
+				let list = that.marketList;
+				let limit = that.limit;
+				if (that.total > list.length) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+					let page = that.page + 1;
+					that.$set(that, `page`, page)
+					let skip = page * limit;
+					that.$set(that, `skip`, skip)
+					that.searchMarket();
+					uni.hideLoading();
+				} else that.$set(that, `is_bottom`, true)
+			},
+			// 触底
+			toScroll(e) {
+				const that = this;
+				let up = that.scrollTop;
+				that.$set(that, `scrollTop`, e.detail.scrollTop);
+				let num = Math.sign(up - e.detail.scrollTop);
+				if (num == 1) that.$set(that, `is_bottom`, false);
+			},
+			// 左侧一级选择
+			toChange(index, e) {
+				const that = this;
+				that.$set(that, `active`, index);
+				that.$set(that, `type`, e.value);
+				that.clearPage();
+				that.searchMarket();
+			},
+			// 清空列表
+			clearPage() {
+				const that = this;
+				that.$set(that, `marketList`, []);
+				that.$set(that, `skip`, 0)
+				that.$set(that, `limit`, 10)
+				that.$set(that, `page`, 0)
+			},
+			// 清空总信息
+			clearPages() {
+				const that = this;
+				that.$set(that, `marketList`, [])
+				that.$set(that, `typeList`, [])
+				that.$set(that, `active`, '0')
+				that.$set(that, `skip`, 0)
+				that.$set(that, `limit`, 10)
+				that.$set(that, `page`, 0)
+			},
+			// 购买
+			toBuy(e) {
+				const that = this;
+				uni.navigateTo({
+					url: `/pagesGoods/index/index?id=${e.id||e._id}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+
+		.one {
+			height: 100vh;
+			display: flex;
+			flex-direction: row;
+
+			.one_1 {
+				position: relative;
+				width: 25vw;
+				background-color: #fafafa;
+				display: flex;
+				flex-direction: column;
+
+				.list {
+					text-align: center;
+					padding: 2.5vw 0;
+					border-bottom: 1px solid var(--f1Color);
+
+					text {
+						font-size: var(--font14Size);
+					}
+				}
+
+				.listActive {
+					background-color: var(--fffColor);
+				}
+			}
+
+			.one_2 {
+				flex-grow: 1;
+				position: relative;
+				display: flex;
+				flex-direction: column;
+
+				.one_2_1 {
+					padding: 0 2vw;
+					width: 70vw;
+
+					.list {
+						display: flex;
+						width: 66vw;
+						margin: 0 0 2vw 0;
+						padding: 2vw;
+						box-shadow: 0 0 5px var(--f1Color);
+						border-radius: 5px;
+
+						.img {
+							width: 20vw;
+
+							.image {
+								width: 20vw;
+								height: 20vw;
+								border-radius: 5px;
+							}
+						}
+
+						.info {
+							display: flex;
+							flex-direction: column;
+							justify-content: space-evenly;
+							width: 45vw;
+							padding: 0 0 0 2vw;
+
+							.name {
+								font-size: var(--font15Size);
+								margin: 0 0 1vw 0;
+							}
+
+							.num {
+								display: flex;
+								justify-content: space-between;
+								margin: 1vw 0 0 0;
+
+								.left {
+									font-size: var(--font14Size);
+									color: var(--fF0Color);
+								}
+
+								.right {
+									font-size: var(--font12Size);
+									color: var(--f85Color);
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	.is_bottom {
+		width: 100%;
+		text-align: center;
+
+		text {
+			padding: 2vw 0;
+			display: inline-block;
+			color: var(--f85Color);
+			font-size: var(--font14Size);
+		}
+	}
+</style>

unpackage/dist/dev/mp-weixin/pages/good/index.wxss

@@ -51,6 +51,9 @@
   border-radius: 5px;
 }
 .content .one .one_2 .one_2_1 .list .info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
   width: 45vw;
   padding: 0 0 0 2vw;
 }
@@ -59,9 +62,17 @@
   margin: 0 0 1vw 0;
 }
 .content .one .one_2 .one_2_1 .list .info .num {
+  display: flex;
+  justify-content: space-between;
+  margin: 1vw 0 0 0;
+}
+.content .one .one_2 .one_2_1 .list .info .num .left {
   font-size: var(--font14Size);
+  color: var(--fF0Color);
+}
+.content .one .one_2 .one_2_1 .list .info .num .right {
+  font-size: var(--font12Size);
   color: var(--f85Color);
-  margin: 0 0 1vw 0;
 }
 .scroll-view {
   position: absolute;