feature: many

App.vue

 <script>
 import { mapActions } from 'vuex'
+
 export default {
 	onLaunch: function() {
 		this.checkUpdate()
 		this.setSystemInfo()
+		this.setLocation()
+		this.setMenuButtonInfo()
 	},
 	
 	methods: {
-		...mapActions('systemInfo', ['setSystemInfo']),
+		...mapActions('systemInfo', ['setSystemInfo', 'setMenuButtonInfo']),
+		...mapActions('user', ['setLocation']),
 		// 检查更新
-		checkUpdate() {
-			const updateManager = uni.getUpdateManager()
-			// 请求完新版本信息的回调
-			// updateManager.onCheckForUpdate(res => {
-			// 	console.log(res.hasUpdate)
-			// })
-			updateManager.onUpdateReady(() => {
-				uni.showModal({
-					title: '是否更新',
-					content: '新版本已经准备好，是否重启应用？',
-					success: res => {
-						if(res.confirm) updateManager.applyUpdate()
-					}
+		checkUpdate() {
+			if (wx.canIUse('getUpdateManager')) {
+				const updateManager = uni.getUpdateManager()
+				// 请求完新版本信息的回调
+				// updateManager.onCheckForUpdate(res => {
+				// 	console.log(res.hasUpdate)
+				// })
+				updateManager.onUpdateReady(() => {
+					uni.showModal({
+						title: '是否更新',
+						content: '新版本已经准备好，是否重启应用？',
+						success: res => {
+							if(res.confirm) updateManager.applyUpdate()
+						}
+					})
 				})
-			})
-			// updateManager.applyUpdate()
-			updateManager.onUpdateFailed(() => {
-				this.$toast({title: "更新失败,请检查您的网络是否正常"})
-			})
+				// updateManager.applyUpdate()
+				updateManager.onUpdateFailed(() => {
+					this.$toast({title: "更新失败,请检查您的网络是否正常"})
+				})
+			}
 		}
 	}
 	

apis/user.js

 // 用户相关
 import { request } from "@/lib/service"
 import { baseUrl } from '@/config' // 将请求的baseUrl写这里，为了开发时调试请求地址
+const RSA = require('@/utils/wx_rsa.js')
+import { publicKey } from '@/config/index.js'
+/**
+ * @desc 检查登录态
+ */
+export function checkLogin() {
+	return request({
+		url: `${baseUrl}/wxxcx/getFwqTime.htm`,
+		method: 'post'
+	})
+}
+
+/**
+ * @desc 静默登录
+ * @param { Number } userPhone
+ * @param { String } time
+ */
+export function slelentLogin(userPhone, time) {
+	console.log(userPhone, time)
+	const encrypt_rsa = RSA.KEYUTIL.getKey(publicKey)
+	return request({
+		url: `${baseUrl}/wxxcx/silentLogin.htm`,
+		method: 'post',
+		data: {
+			un: RSA.hex2b64(encrypt_rsa.encrypt(userPhone)),
+			tm: RSA.hex2b64(encrypt_rsa.encrypt(time))
+		}
+	})
+}
 
 /**
  * @desc 登录

components/pull-list/index.vue

@@ -3,7 +3,7 @@
 	@refresherabort="refresherabort"
 	@refresherpulling="handlePulling" -->
 	<scroll-view
-		class="w-100 scroll-wrapper"
+		class="scroll-wrapper"
 		scroll-y
 		:refresher-enabled="refresherEnabled"
 		:refresher-threshold="threshold"
@@ -12,6 +12,9 @@
 		:refresher-triggered="refresherStatus"
 		@scrolltolower="scrolltolower"
 		@refresherrefresh="refresherrefresh"
+		
+		@refresherrestore="refresherrestore"
+		@refresherabort="refresherabort"
 	>
 		<slot />
 	</scroll-view>
@@ -34,11 +37,12 @@ export default {
 		},
 		refresherBg: { // 背景色
 			type: String,
-			default: "#FFF"
-		},
-		refresherStatus: { // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
-			type: Boolean,
-			default: false
+			default: "#000"
+		}
+	},
+	data() {
+		return {
+			refresherStatus: false  // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
 		}
 	},
 	methods: {
@@ -54,13 +58,17 @@ export default {
 		
 		// 下拉刷新被触发
 		refresherrefresh() {
+			this.refresherStatus = true
+			let timer = setTimeout(() => {
+				this.refresherStatus = false
+			}, 800)
 			this.$emit('refresh')
 		},
 		
 		// 下拉刷新被复位(不常用)
-		// refresherrestore() {
-		// 	console.log("下拉刷新被复位")
-		// },
+		refresherrestore() {
+			console.log("下拉刷新被复位")
+		},
 		
 		// 下拉刷新被中止(不常用)
 		// refresherabort() {

lib/service/index.js

 import  Toast from "../toast/index.js"
 import { isObeject, isFunction } from "@/utils/types.js"
-import Validator from "@/utils/validate.js"
+import Validator from "@/utils/validate.js"
+import { login_slilen } from '@/utils/modules/login.js'
+import store from '@/store/index.js'
 /**
  * @desc 请求 所有的状态码都在这里处理
  * @param { Object } options 参考uni.request参数说明
@@ -48,12 +50,13 @@ export function request (options) {
 								    msg: data.rep_msg
 								})
 								break;
-							case -3: 
-								return Toast({title: 'login', cb: () => {
-									uni.navigateTo({
-										url: '/pages/login/index.vue'
-									})
-								}})
+							case -3:
+								login_slilen() 
+								// return Toast({title: 'login', cb: () => {
+								// 	uni.navigateTo({
+								// 		url: '/pages/login/index.vue'
+								// 	})
+								// }})
 								break;
 							default:
 								Toast({title: data.rep_msg})
@@ -81,9 +84,10 @@ export function request (options) {
                 }
             },
             fail: err => {
-                if(err.errMsg.includes('request:fail ')) {
-                    Toast({title: err.errMsg})
-                }
+                // if(err.errMsg.includes('request:fail ')) {
+                //     Toast({title: err.errMsg})
+                // }
+				Toast({title: '网络开小差了,请检查网络!'})
                 options.errCb && typeof options.errCb === 'function' && options.errCb();
                 reject({
                     status: false,

manifest.json

@@ -57,7 +57,12 @@
             "postcss" : true,
             "minified" : true
         },
-        "usingComponents" : true
+        "usingComponents" : true,
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "使用该功能需要获取您的当前位置"
+            }
+        }
     },
     "mp-alipay" : {
         "usingComponents" : true

pages/goods/components/left-menuButton.vue

+<template>
+	<view class="menu-wrap" :style="menuSty">
+		<view class="menu-main p-2 flex j-between a-center w-100">
+			<view @click.stop="back">返回</view>
+			<view @click.stop="showMenu = !showMenu">菜单</view>
+		</view>
+		<view 
+			v-show="showMenu" 
+			class="mt-2 menu-item_wrap font-28"
+			:style="{ width: menuButtonInfo.width + 'px' }"
+		>
+			<view class="menu-item p-2" @click="handleMenu('index')">首页</view>
+			<view class="menu-item p-2" @click="handleMenu('index')">商品搜索</view>
+			<view class="menu-item p-2" @click="handleMenu('index')">订单列表</view>
+			<view class="menu-item p-2" @click="handleMenu('index')">购物车</view>
+			<view class="menu-item p-2" @click="handleMenu('index')">运单列表</view>
+			<view class="menu-item p-2" @click="handleMenu('index')">收藏列表</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+	data() {
+		return {
+			showMenu: false
+		}
+	},
+	computed: {
+		...mapState({
+			menuButtonInfo: state => state.systemInfo.menuButtonInfo,
+			systemInfo: state =>  state.systemInfo.systemInfo
+		}),
+		menuSty() {
+			const menuButtonInfo = this.menuButtonInfo
+			const systemInfo = this.systemInfo
+			const left = systemInfo.windowWidth - menuButtonInfo.right
+			const top = menuButtonInfo.bottom - menuButtonInfo.height
+			return `width: ${menuButtonInfo.width}px;height: ${menuButtonInfo.height}px;left: ${left}px;top: ${top}px;`
+		}
+	},
+	created() {
+		console.log(this.menuButtonInfo)
+		console.log(this.systemInfo)
+	},
+	methods: {
+		back() {
+			uni.navigateBack()
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.menu-wrap {
+	position: fixed;
+	z-index: 999;
+	border-radius: 48rpx;
+	border: 2rpx solid #fff;
+	background-color: red;
+	transform: scale(0.8);
+	.menu-main {
+		box-sizing: border-box;
+		height: 100%;
+	}
+	.menu-item_wrap {
+		position: relative;
+		background: #FFFFFF;
+		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(148, 148, 148, 0.21);
+		border-radius: 10rpx;
+		// margin-left: 30rpx;
+		&::before {
+			content: '';
+			position: absolute;
+			width: 0;
+			height: 0;
+			border-right: 15rpx solid transparent;
+			border-left: 15rpx solid transparent;
+			border-bottom: 15rpx solid #FFFFFF;
+			left: 75%;
+			transform: translateX(-75%);
+			top: -14rpx;
+			border-right-width: 8px;
+			border-right-style: solid;
+			border-right-color: transparent;
+			border-left-width: 8px;
+			border-left-style: solid;
+			border-left-color: transparent;
+			border-bottom-width: 8px;
+			border-bottom-style: solid;
+			border-bottom-color: #fff;
+		}
+		.menu-item {
+			border-bottom: 1rpx solid red;
+			&:last-child{
+				border-bottom: none;
+			}
+		}
+	}
+}
+
+</style>

pages/goods/detail.vue

 <template>
 	<view class="w-100">
+		<left-menu-button />
+		
 		<swiper
 			class="w-100"
 			:autoplay="true"
@@ -26,11 +28,12 @@
 </template>
 
 <script>
+import leftMenuButton from './components/left-menuButton.vue'
 import uParse from '@/components/parse/parse.vue'
 import { goodDetail } from '@/apis/goods.js'
 import { imgUrl } from '@/config/index.js'
 
-let goodsParams = {}
+let goodsParams = {} // goods_id  shop_id  agent_id
 export default {
 	data() {
 		return {
@@ -43,6 +46,7 @@ export default {
 		}
 	},
 	components: {
+		leftMenuButton,
 		uParse
 	},
 	onLoad(options) {

pages/home/components/goods-module.vue

@@ -3,11 +3,15 @@
 		<view class="font-bold font-36 p-2">{{title}}</view>
 		<view class="w-100 flex j-start a-center flex-wrap">
 			<view 
-				class="item mr-2"
-				v-for="item in list"
-				:key="item"
+				class="item ml-2 mb-2"
+				v-for="(item, index) in list"
+				:key="index"
+				@click="nav"
 			>
-				111
+				<image class="goods_cover w-100" :src="arr[item]" mode="aspectFit"></image>
+				<view>
+					<view @click.stop="purchase(index)">购物ICON</view>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -24,6 +28,21 @@ export default {
 			type: Array,
 			default: () => []
 		}
+	},
+	data() {
+		return {
+			arr: ['https://www.gelifood.com/upload/wxxcx_img/images/icon/dalian.png', 'https://www.gelifood.com/upload/wxxcx_img/images/icon/bijie.png']
+		}
+	},
+	methods: {
+		nav() {
+			uni.navigateTo({
+				url: `/pages/goods/detail?goods_id=9192&shop_id=101120&agent_id=0`
+			})
+		},
+		purchase(e) {
+			// this.$me
+		}
 	}
 }
 </script>
@@ -31,8 +50,11 @@ export default {
 <style lang="scss" scoped>
 .item {
 	box-sizing: border-box;
-	width: 320rpx;
+	width: 345rpx;
 	height: 375rpx;
 	border: 1rpx solid #ccc;
+	.goods_cover {
+		height: 300rpx;
+	}
 }
 </style>

pages/home/index.vue

@@ -51,7 +51,9 @@
 		<!-- <view class="test" @click="login">登录</view>
 		<!-- <city-picker @confirmCity="confirmCity"></city-picker> -->
 		<!-- <navigator url="/pages/goods/detail">详情页</navigator> -->
-		
+		<uni-popup type="bottom">
+			<view>{{select_goods.test}}</view>
+		</uni-popup>
 		<button type="default" open-type="share" id="share"></button>
 	</view>
 </template>
@@ -59,7 +61,8 @@
 <script>
 import searchBar from '@/components/search-bar/index.vue'
 import goodsModule from './components/goods-module.vue'
-	
+import uniPopup from '@/components/uni-popup/index.vue'
+
 import cityPicker from '@/components/city-picker/index.vue'
 import { mapState } from 'vuex'
 import { checkLogin } from '@/utils/common.js'
@@ -67,12 +70,14 @@ import { checkLogin } from '@/utils/common.js'
 export default {
 	data() {
 		return {
-			module1: [2,1,1]
+			module1: [2,1,1],
+			select_goods: null
 		}
 	},
 	components: {
 		searchBar,
 		goodsModule,
+		uniPopup,
 		
 		cityPicker
 	},
@@ -87,6 +92,10 @@ export default {
 		uni.setNavigationBarTitle({
 			title: '测试店铺'
 		})
+		uni.$on('purchase', e => {
+			console.log(e)
+		})
+		this.$once('hook:beforeDe')
 	},
 	
 	onShareAppMessage() {

pages/order/order-list.vue

@@ -2,34 +2,105 @@
 	<view class="w-100 order-wrap">
 		<!-- tabBar -->
 		<scroll-view class="tab-wrap w-100" scroll-x>
-			<view class="tab-item">全部</view>
-			<view class="tab-item">待付款</view>
-			<view class="tab-item">待收货</view>
-			<view class="tab-item">已收货</view>
-			<view class="tab-item">退货退款</view>
-			<view class="tab-item">交易关闭</view>
+			<view 
+				class="tab-item mx-3" 
+				v-for="(item, index) in list"
+				:key="index"
+				:class="current_tab === index ? 'tab_active' : ''"
+				@click="handleTab(index)"
+			>{{item.name}}</view>
 		</scroll-view>
+		
+		<view class="list-wrap">
+			<pull-list
+				refresherEnabled
+			></pull-list>
+		</view>
 	</view>
 </template>
 
 <script>
+import pullList from '@/components/pull-list/index.vue'
 export default {
+	data() {
+		return {
+			current_tab: 0,
+			list: [
+				{
+					name: '全部',
+					data: []
+				},
+				{
+					name: '待付款',
+					data: []
+				},
+				{
+					name: '待收货',
+					data: []
+				},
+				{
+					name: '已收货',
+					data: []
+				},
+				{
+					name: '退货退款',
+					data: []
+				},
+				{
+					name: '交易关闭',
+					data: []
+				}
+			]
+		}
+	},
+	components: {
+		pullList
+	},
 	onLoad(options) {
 		console.log(options)
+		const { id } = options
+		this.current_tab = Number(id) || 0
+	},
+	methods: {
+		handleTab(idx) {
+			if(idx === this.current_tab) return
+			this.current_tab = idx
+		}
 	}
 }
 </script>
 
 <style lang="scss" scoped>
 .order-wrap {
+	height: 100vh;
 	.tab-wrap {
 		height: 98rpx;
 		white-space:nowrap;
-		overflow: hidden;
 		.tab-item {
-			@include borderBox(20rpx, 20rpx);
+			height: 98rpx;
+			line-height: 98rpx;
+			position: relative;
 			display: inline-block;
 		}
+		.tab_active {
+			color: red;
+			&::after {
+				position: absolute;
+				left: 0;
+				bottom: 0;
+				content: "";
+				width: 100%;
+				height: 4rpx;
+				background-color: blue;
+			}
+		}
+	}
+	
+	.list-wrap {
+		width: 100%;
+		height: calc(100vh - 98rpx);
+		background-color: yellow;
+		overflow: hidden;
 	}
 }
 </style>

readme.md

@@ -20,6 +20,10 @@
 	```
 + 小程序和vue页面生命周期顺序
 	- created => onLoad => onShow => mounted => onReady => onUnload => destroyed
++ 关于zIndex层级<font color="red">为防止层级规范</font>
+	- 一般层级(普通层级，如展示一些普通信息) zIndex范围 1-98
+	- 当前页面最高层级，如遮罩 zIndex 99
+	- 仅次于小程序原生弹窗 zIndex 100
 
 #### 未完成
 + 请求状态码

store/index.js

@@ -4,10 +4,12 @@ Vue.use(Vuex)
 
 import user from './modules/user'
 import systemInfo from './modules/systemInfo'
+import cart from './modules/cart.js'
 
 export default new Vuex.Store({
 	modules: {
 		user,
-		systemInfo
+		systemInfo,
+		cart
 	}
 })

store/modules/systemInfo.js

 const state = {
-	systemInfo: null
+	systemInfo: null,
+	menuButtonInfo: null
 }
 
 const mutations = {
 	SETSYSTEMINFO(state, params){
 		state.systemInfo = params
+	},
+	SETMENUBUTTONINFO(state, params) {
+		state.menuButtonInfo = params
 	}
 }
 
 const actions = {
 	setSystemInfo: ({commit}) => {
 		commit('SETSYSTEMINFO', uni.getSystemInfoSync())
+	},
+	setMenuButtonInfo: ({commit}) => {
+		commit('SETMENUBUTTONINFO', uni.getMenuButtonBoundingClientRect())
 	}
 }
 

store/modules/user.js

@@ -4,7 +4,8 @@ import { getStorage, setStorage, removeStorage } from '@/lib/storage'
 const state = {
 	token: '111',
 	isOverdue: false, // 服务是否过期
-	userInfo: ''
+	userInfo: null,
+	location: {}
 }
 
 const mutations = {
@@ -25,6 +26,15 @@ const actions = {
 		commit('SETTOKEN', token)
 		setStorage('token',token)
 	},
+	setLocation: async ({state}) => {
+		uni.getLocation({
+			type: 'gcj02',
+			success: res => {
+				state.location.longitude =  res.longitude || null
+				state.location.latitude = res.latitude || null
+			}
+		})
+	},
 	setUserInfo: ({commit}, userInfo) => {
 		commit('SETUSERINFO', userInfo)
 		setStorage('userInfo',userInfo)

utils/modules/login.js

+import { checkLogin, slelentLogin } from '@/apis/user.js'
+import store from '@/store/index.js'
+
+export async function login_slilen() {
+	checkLogin()
+		.then(checkRes => {
+			console.log(checkRes)
+			if(checkRes.status) {
+				slelentLogin('13143340532', checkRes.res.time)
+					.then(res => {
+						store.state.user.userInfo = res.userInfo
+					})
+			}
+			
+		})
+}
\ No newline at end of file