展开首页页面设计

main.js

@@ -6,7 +6,7 @@ import './uni.promisify.adaptor'
 Vue.config.productionTip = false
 App.mpType = 'app'
 const app = new Vue({
-  ...App
+	...App
 })
 app.$mount()
 // #endif
@@ -14,16 +14,25 @@ app.$mount()
 // #ifdef VUE3
 // 引入uview UI
 import uView from './uni_modules/vk-uview-ui'
-import { createPinia } from 'pinia'
-import { createSSRApp } from 'vue'
+import {
+	createPinia
+} from 'pinia'
+import {
+	createSSRApp
+} from 'vue'
+import {
+	useAuthStore
+} from '@/store/authStore'
 export function createApp() {
-  const app = createSSRApp(App)
-  const pinia = createPinia()
+	const app = createSSRApp(App)
+	const pinia = createPinia()
 	// 使用uView UI
 	app.use(uView)
 	app.use(pinia)
-  return {
-    app
-  }
+	const authStore = useAuthStore();
+	authStore.loadAuthToken();
+	return {
+		app
+	}
 }
 // #endif

pages/guide/guide/guide.vue

@@ -0,0 +1,19 @@
+<template>
+	<view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			};
+		}
+	}
+</script>
+
+<style lang="scss">
+
+</style>

pages/index/index.vue

@@ -8,6 +8,53 @@
 			</view>
 		</u-navbar>
 		<view class="page-content">
+			<swiper class="swiper" circular indicator-dots style="border-radius: 20rpx;overflow: hidden;height: 200px">
+				<swiper-item v-for="(data, index) in swiperList" style="width: 100%;height: 100%;" :key="index">
+					<view class="swiper-item" style="width: 100%;height: 100%;">
+						<image :src="data.tupian" mode="aspectFill" style="width: 100%;height: 100%;"></image>
+					</view>
+				</swiper-item>
+			</swiper>
+			<u-grid :col="4" :border="false" style="margin: 10rpx 0 ;">
+				<template v-for="(item,index) in navList" :key="index">
+					<u-grid-item bg-color="none" @click="jumpToPage(item)">
+						<image :src="`/static/index-icon/${item.image}.png`" style="height: 70rpx;width: 70rpx;">
+						</image>
+						<view class="grid-text">{{item.title}}</view>
+					</u-grid-item>
+				</template>
+			</u-grid>
+			<u-card padding="20" margin="30rpx 0rpx" border-radius="20" box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
+				<template v-slot:head>
+					<u-section title="今日热门" sub-title="查看更多" sub-color="#000000"></u-section>
+				</template>
+				<template v-slot:body>
+					<view>
+						123456
+					</view>
+				</template>
+			</u-card>
+			<u-card padding="20" margin="30rpx 0rpx" border-radius="20" box-shadow="0px 2px 5px rgba(0, 0, 0, 0.1)">
+				<template v-slot:head>
+					<u-section title="今日热门" sub-title="查看更多" sub-color="#000000"></u-section>
+				</template>
+				<template v-slot:body>
+					<view>
+						<view class="u-body-item u-flex u-border-bottom u-col-between u-p-t-0">
+							<view class="u-body-item-title u-line-2">瓶身描绘的牡丹一如你初妆，冉冉檀香透过窗心事我了然，宣纸上走笔至此搁一半</view>
+							<image
+								src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
+								mode="aspectFill"></image>
+						</view>
+						<view class="u-body-item u-flex u-row-between u-p-b-0">
+							<view class="u-body-item-title u-line-2">釉色渲染仕女图韵味被私藏，而你嫣然的一笑如含苞待放</view>
+							<image
+								src="https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg"
+								mode="aspectFill"></image>
+						</view>
+					</view>
+				</template>
+			</u-card>
 			<button @click="toPage">是否登录</button>
 		</view>
 	</view>
@@ -21,20 +68,114 @@
 		onReady,
 		onLoad
 	} from '@dcloudio/uni-app'
-	import { useAuthStore } from '@/store/authStore'
+	import {
+		useAuthStore
+	} from '@/store/authStore'
 	const authStore = useAuthStore()
 	// 屏幕状态栏高度
 	const statusBarHeight = ref(0)
 	// 顶部导航栏高度
 	const navBarHeight = ref(0)
+	// 是否登录
+	const isLogin = ref(true)
+	// 是否为会员，从缓存里拿取用户信息
+	// const userInfo = uni.getStorageSync("userinfo") || {}
+	// const isMember = userInfo?.isMember || false
+
+	// 首页-轮播图
+	const swiperList = ref([{
+			tupian: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.YKoZzgmubNBxQ8j-mmoTKAHaEK?rs=1&pid=ImgDetMain',
+			id: '01'
+		},
+		{
+			tupian: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
+			id: '02'
+		}
+	])
+	// 首页-导航栏
+	const navList = ref([{
+			id: 'notice',
+			title: '通知公告',
+			image: 'notice',
+			url: '/pages/notice/notice/notice',
+			toOtherApp: false,
+			otherAppId: '其他小程序的appid'
+		},
+		{
+			id: 'dynamic',
+			title: '协会动态',
+			image: 'dynamic',
+			url: '/pages/dynamic/dynamic/dynamic',
+			toOtherApp: false,
+			otherAppId: '其他小程序的appid'
+		},
+		{
+			id: 'guide',
+			title: '办事指引',
+			image: 'guide',
+			url: '/pages/guide/guide/guide',
+			toOtherApp: false,
+			otherAppId: '其他小程序的appid'
+		},
+		{
+			id: 'edu',
+			title: '继续教育',
+			image: 'edu',
+			url: '跳转页面的路径',
+			toOtherApp: true,
+			otherAppId: '其他小程序的appid'
+		},
+		{
+			id: 'level',
+			title: '水平认证',
+			image: 'level',
+			url: '跳转页面的路径',
+			toOtherApp: true,
+			otherAppId: '其他小程序的appid'
+		},
+		{
+			id: 'report',
+			title: '研究报告',
+			image: 'report',
+			url: '跳转页面的路径',
+			toOtherApp: true,
+			otherAppId: '其他小程序的appid'
+		},
+		{
+			id: 'index',
+			title: '经理人指数',
+			image: 'pay',
+			url: '跳转页面的路径',
+			toOtherApp: true,
+			otherAppId: '其他小程序的appid'
+		},
+		{
+			id: 'pay',
+			title: '会费缴交',
+			image: 'pay',
+			url: '跳转页面的路径',
+			toOtherApp: true,
+			otherAppId: '其他小程序的appid'
+		}
+	])
+
+	const jumpToPage = (data) => {
+		if(data.toOtherApp){
+			// 跳转其他小程序
+			console.log("跳转至其他小程序", data.otherAppId)
+			return
+		}
+		uni.navigateTo({
+			url: data.url
+		})
+	}
 	const toPage = () => {
-		if(!authStore.isAuthenticated){
+		if (!authStore.isAuthenticated) {
 			uni.navigateTo({
 				url: "/pages/login/login"
 			})
 			return
 		}
-		console.log("登陆了")
 	}
 	onReady(() => {
 		uni.getSystemInfo({
@@ -55,12 +196,38 @@
 
 <style lang="scss" scoped>
 	.container {
-		height: 100vh;
+		// height: 100vh;
 		width: 100vw;
 		background-color: $uni-bg-color;
 		padding: 0 20rpx;
 	}
-	.slot-wrap{
+
+	.slot-wrap {
 		padding-left: 20rpx;
 	}
+
+	.grid-text {
+		font-size: 28rpx;
+		margin-top: 4rpx;
+		color: $uni-text-color;
+	}
+
+	.u-card-wrap {
+		background-color: $u-bg-color;
+		padding: 1px;
+	}
+
+	.u-body-item {
+		font-size: 32rpx;
+		color: #333;
+		// padding: 20rpx 10rpx;
+	}
+
+	.u-body-item image {
+		width: 120rpx;
+		flex: 0 0 120rpx;
+		height: 120rpx;
+		border-radius: 8rpx;
+		margin-left: 12rpx;
+	}
 </style>

pages/login/login.vue

@@ -175,7 +175,14 @@
 				let checkUserBook = await this.checkUserBook()
 				if (!this.checkUserBook()) return;
 				console.log(this.phoneForm)
+				// 联调
+				// 1.登录 发送请求
+				// 2.保存 token
+				// 3.获取个人信息，保存个人新
 				this.useAuthStore.setAuthToken("test")
+				uni.setStorageSync("userinfo", {
+					userId:"2121"
+				})
 				uni.switchTab({
 					url: "/pages/index/index"
 				})
@@ -196,7 +203,15 @@
 				let checkUserBook = await this.checkUserBook()
 				if (!this.checkUserBook()) return;
 				console.log(this.usernameForm)
+				// 联调
+				// 1.登录 发送请求
+				// 2.保存 token
+				// 3.获取个人信息，保存个人新
 				this.useAuthStore.setAuthToken("test")
+				uni.setStorageSync("userinfo", {
+					userId:"2121",
+					isMember: true
+				})
 				uni.switchTab({
 					url: "/pages/index/index"
 				})
@@ -302,30 +317,33 @@
 				console.log(e, 123456)
 			},
 			getUserProfile() {
-				let that = this;
+				this.toPage("/pages/wxLogin/wxLogin")
+				// 用户微信登录
+				// let that = this;
 				// 推荐使用uni.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
 				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
-				uni.getUserProfile({
-					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-					success: (resp) => {
-						//登录远程服务器
-						if (that.loginCode) {
-							//登录远程服务器
-							console.log("登录远程服务器")
-							// that.loginByWeixin(resp)
-						} else {
-							uni.login({
-								success: function(resp) {
-									if (resp.code) {
-										that.code = resp.code
-										console.log(resp)
-										// that.loginByWeixin(resp)
-									}
-								}
-							});
-						}
-					}
-				})
+				// uni.getUserProfile({
+				// 	desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+				// 	success: (resp) => {
+				// 		//登录远程服务器
+				// 		console.log(resp)
+				// 		if (that.loginCode) {
+				// 			//登录远程服务器
+				// 			console.log("登录远程服务器")
+				// 			// that.loginByWeixin(resp)
+				// 		} else {
+				// 			uni.login({
+				// 				success: function(resp) {
+				// 					if (resp.code) {
+				// 						that.code = resp.code
+				// 						console.log(resp)
+				// 						// that.loginByWeixin(resp)
+				// 					}
+				// 				}
+				// 			});
+				// 		}
+				// 	}
+				// })
 			}
 		},
 		// 在组件销毁时清理定时器