瀏覽代碼

地方特产详情

YY 2 年之前
父節點
當前提交
48e9befdca
共有 3 個文件被更改,包括 176 次插入2 次删除
  1. 5 0
      pages.json
  2. 163 0
      pagesHome/place/detail.vue
  3. 8 2
      pagesHome/place/index.vue

+ 5 - 0
pages.json

@@ -168,6 +168,11 @@
 					"style": {
 						"navigationBarTitleText": "地方特产"
 					}
+				},	{
+					"path": "place/detail",
+					"style": {
+						"navigationBarTitleText": "地方特产"
+					}
 				},
 				{
 					"path": "import/index",

+ 163 - 0
pagesHome/place/detail.vue

@@ -0,0 +1,163 @@
+<template>
+	<mobile-frame>
+		<view class="main">
+			<view class="one">
+				<image class="image" :src="oneUrl" mode=""></image>
+			</view>
+			<view class="two">
+				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+					<view class="list-scroll-view">
+						<view class="list" v-for="(item,index) in list" :key="index">
+							<image class="image" :src="item.url" mode=""></image>
+							<view class="name">
+								{{item.name}}
+							</view>
+							<view class="other">
+								<view class="money">
+									<text>¥</text>
+									<text>{{item.money}}</text>
+								</view>
+								<view class="btn">
+									<button type="default" size="mini">购买</button>
+								</view>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+	</mobile-frame>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				oneUrl: require('@/static/test.png'),
+				list: [ //
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+					{
+						url: require('@/static/test.png'),
+						name: '商品名称',
+						money: 100,
+					},
+				]
+			};
+		},
+		onShow: function() {},
+		methods: {
+			// 分页
+			toPage() {},
+			// 公共跳转
+			toCommon(route, e) {
+				uni.navigateTo({
+					url: `${route}?id=${e && e._id ? e._id : ''}`
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.main {
+		display: flex;
+		flex-direction: column;
+		width: 96vw;
+		height: 97.5vh;
+		padding: 2vw;
+		background-color: #0D2576;
+
+		.one {
+			margin: 0 0 2vw 0;
+
+			.image {
+				width: 100%;
+				height: 50vw;
+			}
+		}
+
+		.two {
+			position: relative;
+			flex-grow: 1;
+
+			.list {
+				margin: 0 2vw 2vw 0;
+				background-color: var(--fffColor);
+				padding: 2vw;
+				width: 43vw;
+				border-radius: 5px;
+
+				.image {
+					width: 100%;
+					height: 49vw;
+					margin: 0 0 1vw 0;
+				}
+
+				.name {
+					font-size: var(--font15Size);
+					margin: 0 0 2vw 0;
+				}
+
+				.other {
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+
+					.money {
+						color: var(--ff0Color);
+
+						text:nth-child(1) {
+							font-size: var(--font12Size);
+						}
+					}
+
+					.btn {
+						button {
+							border-radius: 25px;
+							color: var(--fffColor);
+							background-color: var(--ff0Color);
+							font-size: var(--font12Size);
+						}
+					}
+				}
+			}
+
+			.list:nth-child(2n) {
+				margin: 0 0 2vw 0;
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+		}
+	}
+</style>

+ 8 - 2
pagesHome/place/index.vue

@@ -7,7 +7,8 @@
 			<view class="two">
 				<scroll-view scroll-y="true" class="scroll-view">
 					<view class="list-scroll-view">
-						<view class="list" v-for="(item,index) in list" :key="index" :style="{background:item.bgColor}">
+						<view class="list" v-for="(item,index) in list" :key="index" :style="{background:item.bgColor}"
+							@click="toCommon('/pagesHome/place/detail')">
 							<view class="name">
 								<text>{{item.name}}</text>
 							</view>
@@ -220,7 +221,12 @@
 		},
 		onShow: function() {},
 		methods: {
-
+			// 公共跳转
+			toCommon(route, e) {
+				uni.navigateTo({
+					url: `${route}?id=${e && e._id ? e._id : ''}`
+				})
+			},
 		}
 	}
 </script>