123

api/index.js

@@ -51,3 +51,12 @@ export function gglist(data) {
 		data
 	});
 }
+
+// 公告詳情
+export function gginfo(data) {
+	return request({
+		url: '/index/gginfo',
+		method: 'get',
+		data
+	});
+}

pages.json

@@ -22,6 +22,12 @@
 				"navigationBarTitleText": "公告詳情"
 			}
 		},
+		{
+			"path": "pages/index/rg",
+			"style": {
+				"navigationBarTitleText": "新幣認購"
+			}
+		},
 		{
 			"path": "pages/index/kf",
 			"style": {

pages/index/ggDetail.vue

@@ -1,18 +1,53 @@
 <template>
-	<view class="content"></view>
+	<view class="content">
+		<view class="title">{{ info.title }}</view>
+		<view class="main" v-html="info.content"></view>
+	</view>
 </template>
 
 <script>
+import { gginfo } from '@/api/index.js';
+import { mapState, mapMutations } from 'vuex';
 export default {
 	data() {
-		return {};
+		return {
+			id: '',
+			info: ''
+		};
 	},
-	onLoad() {},
-	onShow() {},
-	onReachBottom() {},
-	onReady() {},
-	methods: {}
+	computed: {
+		...mapState(['baseURL'])
+	},
+	onLoad(opt) {
+		this.id = opt.id;
+	},
+	onShow() {
+		this.loadData();
+	},
+	methods: {
+		loadData() {
+			gginfo({ id: this.id }).then(({ data }) => {
+				this.info = data;
+			});
+		}
+	}
 };
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+page,
+.content {
+	min-height: 100%;
+	height: auto;
+	background: #fff;
+}
+.title {
+	padding: 0 40rpx;
+	font-size: 40rpx;
+	font-weight: bold;
+	color: #fcd535;
+}
+.main {
+	padding: 20rpx 40rpx;
+}
+</style>

pages/index/gglist.vue

@@ -1,8 +1,12 @@
 <template>
 	<view class="content">
-		<view class="list" v-for="(item, index) in listInfo">
+		<view class="list" v-for="(item, index) in listInfo" @click="navTo('/pages/index/ggDetail?id=' + item.id)">
 			<view class="icon"><image src="../../static/img/gglist.png" mode=""></image></view>
-			<view class="main"></view>
+			<view class="main">
+				<view class="main-title">{{ item.title }}</view>
+				<view class="main-info clamp2" v-html="item.content"></view>
+				<view class="main-time">{{ item.addtime }}</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -25,6 +29,11 @@ export default {
 			gglist({ page: 1, limit: 1000 }).then(e => {
 				obj.listInfo = e.data;
 			});
+		},
+		navTo(url) {
+			uni.navigateTo({
+				url
+			});
 		}
 	}
 };
@@ -35,5 +44,36 @@ page,
 .content {
 	min-height: 100%;
 	height: auto;
+	background: #fff;
+}
+.list {
+	margin-top: 20rpx;
+	padding: 0 40rpx;
+	display: flex;
+	align-items: flex-start;
+	.icon {
+		padding-top: 10rpx;
+		flex-shrink: 0;
+		width: 68rpx;
+		height: 50rpx;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.main {
+		margin-left: 10rpx;
+		.main-title {
+			font-size: 32rpx;
+			color: #707a8a;
+		}
+		.main-info {
+			color: #707a8a;
+		}
+		.main-time {
+			font-size: 24rpx;
+			color: #707a8a;
+		}
+	}
 }
 </style>

pages/index/index.vue

@@ -10,12 +10,12 @@
 		</swiper>
 		<!-- 轮播图 end -->
 		<!-- 通告欄 start -->
-		<u-notice-bar type="none" :more-icon="true" mode="vertical" :list="list" @click="navto()" @getMore="navto('/pages/index/gglist')"></u-notice-bar>
+		<u-notice-bar type="none" :more-icon="true" mode="vertical" :list="list" @click="goDetail" @getMore="navto('/pages/index/gglist')"></u-notice-bar>
 		<!-- 通告欄 end -->
 		<!-- 功能盒 start -->
 		<view class="gnh-wrap">
 			<view class="gnh-top flex">
-				<view class="top-item flex">
+				<view class="top-item flex" @click="navto('/pages/index/rg')">
 					<image src="../../static/icon/gn-1.png" mode="" class=""></image>
 					<view class="">認購</view>
 				</view>
@@ -125,6 +125,11 @@ export default {
 				});
 			}
 		},
+		goDetail(e) {
+			uni.navigateTo({
+				url: '/pages/index/ggDetail?id=' + this.listInfo[e].id
+			});
+		},
 		getgg() {
 			const obj = this;
 			gglist({ page: 1, limit: 1000 }).then(e => {

pages/index/rg.vue

@@ -0,0 +1,28 @@
+<template>
+	<view class="content">
+		<view class="top"><image src="../../static/img/rg.png" mode=""></image></view>
+		<view class="main" v-for="(item, index) in 10"></view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {};
+	},
+	onLoad() {},
+	onShow() {},
+	methods: {}
+};
+</script>
+
+<style lang="scss">
+.top {
+	width: 750rpx;
+	height: 750rpx;
+	image {
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>