feat: 登录页面(暂存);

pages/index/index.vue

@@ -144,6 +144,13 @@
 			}
 		},
 		onShow() {
+			// 临时改一下
+			if (!uni.getStorageSync('token')) {
+					uni.navigateTo({
+					url: '/pages_order/auth/wxLogin'
+				})
+			}
+
 			this.getBanner()
 			this.getRiceNoticeList()
 			this.getRiceIconList()

pages_order/auth/agreementModal.vue

@@ -0,0 +1,99 @@
+<template>
+  <view>
+    <uv-modal ref="modal" :showConfirmButton="false">
+      <view class="modal__view">
+        <view class="header">
+          <image class="icon" src="../static/auth/caution.png" mode=""></image>
+          <view>
+            服务协议和隐私权政策
+          </view>
+        </view>
+        <view class="content">
+          <!-- todo: 替换成接口获取 -->
+          请您务必审慎阅读、充分理解用户协议和隐私政策各条款，包括但不限于用户注意事项、用户行为规范以及为了向你提供服务而收集、使用、存储你个人信息的情况等。你可阅读《愈然工坊平台用户服务协议》和《愈然工坊平台隐私权政策》了解详细信息。如你同意，请点击下方按钮开始接受我们的服务。
+        </view>
+        <view class="footer">
+          <button class="btn" @click="onConfirm(false)">不同意</button>
+          <button class="btn btn-confirm" @click="onConfirm(true)">同意</button>
+        </view>
+      </view>
+    </uv-modal>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'agreementModal',
+  data() {
+    return {
+    }
+  },
+  methods: {
+    open() {
+      this.$refs.modal.open()
+    },
+    onConfirm(confirm) {
+      this.$emit('confirm', confirm)
+      this.$refs.modal.close()
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.modal__view {
+  display: flex;
+  flex-direction: column;
+  padding: 12rpx 0 0 0;
+}
+
+.header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  font-size: 32rpx;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  color: #000000;
+  .icon {
+    width: 90rpx;
+    height: 90rpx;
+    margin-bottom: 26rpx;
+  }
+}
+
+.content {
+  margin-top: 24rpx;
+  font-size: 28rpx;
+  font-family: PingFang SC, PingFang SC-Regular;
+  font-weight: 400;
+  text-align: left;
+  color: #707070;
+}
+
+.footer {
+  margin-top: 60rpx;
+  text-align: center;
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 9rpx;
+    width: 223rpx;
+    height: 85rpx;
+    font-size: 28rpx;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: 400;
+    background: #f2f2f2;
+    color: #707070;
+    &-confirm {
+      background: #B3997E;
+      color: #ffffff;
+    }
+  }
+  .btn + .btn {
+    margin-left: 52rpx;
+  }
+}
+</style>

pages_order/auth/wxLogin.vue

@@ -1,139 +1,144 @@
 <template>
 	<view class="login">
 		<view class="logo">
-			<image :src="configList.logo_image" mode=""></image>
-		</view>
-		
-		<view class="title">
-			欢迎使用{{ configList.logo_name }}
+			<!-- 后续改回接口获取 -->
+			<image src="../static/auth/logo.png" mode=""></image>
+			<view class="text">
+				{{ configList.logo_name }}
+			</view>
 		</view>
 		
 		<view class="btn mt"
 			@click="wxLogin">
-			<!-- <view class="icon">
-				<image src="../static/auth/wx.png" mode=""></image>
-			</view> -->
+			<view class="icon">
+				<image style="width: 36rpx; height: 30rpx; transform: translateY(5rpx);" src="../static/auth/wx.png" mode=""></image>
+			</view>
 			<view class="">
-				手机号授权登录
+				微信登录
 			</view>
 		</view>
 		
-		<view class="btn b2"
-		@click="qux">
-			取消登录
-		</view>
-		
 		<view class="config">
-			<uv-checkbox-group
-				v-model="checkboxValue"
-				shape="circle">
-				<view class="content">
-					<view
-					style="display: flex;">
+			<view style="flex: 1;">
+				<uv-checkbox-group
+					v-model="checkboxValue"
+					shape="circle"
+				>
+					<view class="content">
 						<uv-checkbox
-							size="40rpx"
-							icon-size="30rpx"
-							activeColor="#E3441A"
+							size="28rpx"
+							icon-size="28rpx"
+							activeColor="#07C261"
 							:name="1"
 						></uv-checkbox>
-						阅读并同意我们的<text @click="$refs.popup.open('user_xy')">“用户协议”</text>
-					</view>
-					<view class="">
-						以及<text @click="$refs.popup.open('user_ys')">隐私政策</text>
-					</view>
+						已同意
+						<text @click="openModal">《注册协议》、隐私协议</text>
 				</view>
-			</uv-checkbox-group>
+				</uv-checkbox-group>
+			</view>
+			<view class="flex">
+				<uv-icon name="info-circle" color="#07C261" size="28rpx"></uv-icon>
+			</view>
 		</view>
-		
-		<configPopup ref="popup"></configPopup>
+
+		<agreementModal ref="modal" @confirm="onConfirmAggrement"></agreementModal>
+
+		<button class="btn-cancel" :plain="true" :hairline="false" @click="onCancel">
+			暂不登录
+		</button>
 		
 	</view>
 </template>
 
 <script>
-	export default {
-		name : 'Login',
-		data() {
-			return {
-				checkboxValue : []
-			}
+
+import agreementModal from './agreementModal.vue'
+
+export default {
+	name : 'Login',
+	data() {
+		return {
+			checkboxValue : []
+		}
+	},
+	components: {
+		agreementModal
+	},
+	methods: {
+		getPhoneNumber(e){
+			console.log(e, e.detail.code);
+			this.wxLogin(phoneCode)
 		},
-		methods: {
-			getPhoneNumber(e){
-				console.log(e, e.detail.code);
-				this.wxLogin(phoneCode)
-			},
-			wxLogin(phoneCode){
-				if(!this.checkboxValue.length){
-					return uni.showToast({
-						title: '请先同意隐私协议',
-						icon:'none'
-					})
-				}
-				this.$store.commit('login', phoneCode)
-			},
-			
-			//打开应用配置
-			openConfigDetail(key){
-				this.$refs.popup.open(key)
-			},
-			qux(){
-				uni.reLaunch({
-					url: '/pages/index/index'
+		wxLogin(phoneCode){
+			if(!this.checkboxValue.length){
+				return uni.showToast({
+					title: '请先同意隐私协议',
+					icon:'none'
 				})
-			},
-		}
+			}
+			this.$store.commit('login', phoneCode)
+		},
+		openModal() {
+			this.$refs.modal.open()
+		},
+		onConfirmAggrement(confirm) {
+			if (confirm) {
+				this.checkboxValue = [1]
+			} else {
+				this.checkboxValue = []
+			}
+		},
+		onCancel() {
+			uni.reLaunch({
+				url: '/pages/index/index'
+			})
+		},
 	}
+}
 </script>
 
 <style scoped lang="scss">
 .login{
 	display: flex;
-	justify-content: center;
+	justify-content: flex-start;
 	align-items: center;
-	height: 80vh;
+	height: 100vh;
 	flex-direction: column;
 	position: relative;
+
+  background: $uni-bg-color;
 	.logo{
-		height: 140rpx;
-		width: 140rpx;
+		margin-top: 334rpx;
+		width: 320rpx;
 		image{
-			height: 140rpx;
-			width: 140rpx;
-			border-radius: 30rpx;
+			height: 150rpx;
+			width: 320rpx;
 		}
-		margin-bottom: 20rpx;
-	}
-	.title{
-		position: relative;
-		font-weight: 900;
-		font-size: 45rpx;
-		&::after{
-			content: '';
-			position: absolute;
-			left: 0;
-			top: 100%;
-			display: block;
-			height: 8rpx;
-			width: 210rpx;
-			background: linear-gradient(to right,$uni-color, #fff);
+		.text{
+			margin-top: 90rpx;
+			font-size: 38rpx;
+			font-family: PingFang SC, PingFang SC-Bold;
+			font-weight: 700;
+			text-align: center;
+			color: #000000;
 		}
 	}
 	.btn{
 		all: unset;
 		width: 80%;
 		height: 100rpx;
-		background-color: $uni-color;
+		background-color: #B3997E;
 		color: #fff;
+
+    font-size: 15px;
+    font-family: PingFang SC, PingFang SC-Regular;
+    font-weight: 400;
+
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		margin: 20rpx 0;
-		border-radius: 20rpx;
+		border-radius: 50rpx;
 		border: none;
-		&::after{
-			
-		}
 		.icon{
 			margin-right: 10rpx;
 			image{
@@ -142,23 +147,40 @@
 			}
 		}
 	}
-	.b2{
-		background-color: rgba($uni-color, 0.2);
-		color: $uni-color;
-	}
 	.mt{
 		margin-top: 200rpx;
 	}
 	
 	.config{
-		position: absolute;
-		bottom: 0;
-		font-size: 24rpx;
-		text-align: center;
+		width: 80%;
 		line-height: 40rpx;
+    margin-top: 27rpx;
+    color: #C7C7C7;
+    text-align: left;
+		display: flex;
+		.content {
+			font-size: 22rpx;
+			display: flex;
+			align-items: center;
+		}
 		text{
-			color: $uni-color;
+			color: #07C261;
 		}
 	}
+
+	.btn-cancel {
+		border: none;
+		font-size: 30rpx;
+		font-family: PingFang SC, PingFang SC-Regular;
+		font-weight: 400;
+		text-align: left;
+		color: #c7c7c7;
+		margin-top: 432rpx;
+	}
+}
+
+.flex {
+	display: flex;
+	align-items: center;
 }
 </style>

pages_order/auth/wxUserInfo.vue

@@ -1,62 +1,43 @@
 <template>
 	<view class="login">
-		<!-- <view class="logo">
-			<image :src="configList.logo_image" mode=""></image>
-		</view> -->
-		<view class="title">
-			{{ configList.logo_name }}
+		
+		<view class="logo">
+			<!-- 后续改回接口获取 -->
+			<image src="../static/auth/logo.png" mode=""></image>
+			<view class="text">
+				{{ configList.logo_name }}
+			</view>
 		</view>
+
 		<view class="title">
 			申请获取你的头像、昵称
 		</view>
 
-		<button class="chooseAvatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
-			<view class="line">
-				<view class="">
+		<view class="form">
+			<view class="form-item">
+				<view class="label">
 					头像
 				</view>
-				<view class="">
-					<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" style="width: 60rpx;height: 60rpx;"
-						mode=""></image>
+				<view class="content">
+					<button class="btn-avatar" :plain="true" :hairline="false" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
+						<image :src="userInfoForm.headImage" v-if="userInfoForm.headImage" class="avatar"
+							mode=""></image>
 
-					<image src="../static/auth/headImage.png" v-else style="width: 50rpx;height: 50rpx;" mode=""></image>
+						<image src="../static/auth/headImage.png" v-else class="avatar" mode=""></image>
+					</button>
 				</view>
 			</view>
-		</button>
-		<view class="line">
-			<view class="">
-				昵称
-			</view>
-			<view class="">
-				<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
-					v-model="userInfoForm.nickName" />
-			</view>
-		</view>
-		<view class="line">
-			<view class="">
-				手机号
-			</view>
-			
-			<view class=""
-			v-if="userInfoForm.phone">
-				<input placeholder="请输入手机号" style="text-align: right;"
-				disabled
-				v-model="userInfoForm.phone" />
-			</view>
-			
-			<view class=""
-			v-else>
-				<button
-				class="getPhoneNumber"
-				open-type="getPhoneNumber" 
-				@getphonenumber="getPhone">
-					获取电话号码
-				</button>
+			<view class="form-item">
+				<view class="label">
+					昵称
+				</view>
+				<view class="content">
+					<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
+						v-model="userInfoForm.nickName" />
+				</view>
 			</view>
 		</view>
 		
-		
-		
 		<view class="btn" @click="submit">
 			确认
 		</view>
@@ -70,13 +51,11 @@
 				userInfoForm: {
 					headImage: '',
 					nickName: '',
-					phone : '',
 				}
 			};
 		},
 		onShow() {},
 		onLoad() {
-			this.userInfoForm.phone = this.userInfo.phone || ''
 			this.userInfoForm.nickName = this.userInfo.nickName || ''
 			this.userInfoForm.headImage = this.userInfo.headImage || ''
 		},
@@ -88,23 +67,6 @@
 					this.userInfoForm.headImage = url
 				})
 			},
-			getPhone(e){
-				this.$api('bindPhone', {
-					phoneCode : e.detail.code
-				}, res => {
-					if(res.code == 200){
-						let phoneObj = JSON.parse(res.result)
-						if(phoneObj.errmsg == 'ok'){
-							this.userInfoForm.phone = phoneObj.phone_info.phoneNumber
-						}else{
-							uni.showModal({
-								title: phoneObj.errmsg
-							})
-						}
-						console.log(phoneObj);
-					}
-				})
-			},
 			submit() {
 				let self = this
 
@@ -120,7 +82,6 @@
 						if (self.$utils.verificationAll(self.userInfoForm, {
 								headImage: '请选择头像',
 								nickName: '请填写昵称',
-								phone: '请填写昵称',
 							})) {
 							return
 						}
@@ -128,7 +89,6 @@
 						self.$api('updateInfo', {
 							avatarUrl : self.userInfoForm.headImage,
 							nickName : self.userInfoForm.nickName,
-							phone : self.userInfoForm.phone,
 						}, res => {
 							if (res.code == 200) {
 								uni.reLaunch({
@@ -146,66 +106,117 @@
 <style lang="scss" scoped>
 	.login {
 		display: flex;
-		flex-direction: column;
-		justify-content: center;
+		justify-content: flex-start;
 		align-items: center;
-		height: 80vh;
+		height: 100vh;
+		flex-direction: column;
+		position: relative;
+
+		background: $uni-bg-color;
+		
 		.logo{
-			height: 140rpx;
-			width: 140rpx;
+			margin-top: 334rpx;
+			width: 320rpx;
 			image{
-				height: 140rpx;
-				width: 140rpx;
-				border-radius: 30rpx;
+				height: 150rpx;
+				width: 320rpx;
+			}
+			.text{
+				margin-top: 90rpx;
+				font-size: 38rpx;
+				font-family: PingFang SC, PingFang SC-Bold;
+				font-weight: 700;
+				text-align: center;
+				color: #000000;
 			}
-			margin-bottom: 20rpx;
 		}
 
 		.title {
-			line-height: 45rpx;
-			font-weight: 900;
+			margin-top: 48rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC, PingFang SC-Regular;
+			font-weight: 400;
+			color: #000000;
 		}
 
-		.line {
+		.form {
+			margin-top: 45rpx;
+			width: 100%;
 			display: flex;
-			justify-content: space-between;
+			flex-direction: column;
 			align-items: center;
-			width: 80%;
-			border-bottom: 1px solid #00000023;
-			padding: 30rpx 0;
-			margin: 0 auto;
-		}
 
-		.chooseAvatar {
-			width: 100%;
-			padding: 0;
-			margin: 0;
-			margin-top: 10vh;
-			border: none;
+			.form-item {
+				width: 85%;
+				display: flex;
+				align-items: baseline;
+				padding: 11rpx 23rpx;
+
+				position: relative;
+
+				&::after {
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					content: " ";
+					width: 100%;
+					height: 1rpx;
+					border-top: 1px solid rgba(112, 112, 112, 0.35);
+					transform: scaleY(.5);
+				}
+
+				.label {
+					width: 60rpx;
+					font-size: 30rpx;
+					font-family: SimSun, SimSun-Regular;
+					font-weight: 400;
+					text-align: left;
+					color: #000000;
+				}
+
+				.content {
+					flex: 1;
+					text-align: right;
+				}
+			}
+
+			.form-item + .form-item {
+				margin-top: 50rpx;
+			}
+
+			.btn-avatar {
+				background: transparent;
+				border: none;
+				border-radius: none;
+				box-shadow: none;
+				padding: 0;
+				margin: 0;
+				font-size: 0;
+				text-align: right;
+			}
+
+			.avatar {
+				width: 70rpx;
+				height: 70rpx;
+				margin-right: 63rpx;
+			}
 		}
 
 		.btn {
-			// background: $uni-linear-gradient-btn-color;
-			background: $uni-color;
-			color: #fff;
-			width: 80%;
-			padding: 20rpx 0;
 			text-align: center;
-			border-radius: 15rpx;
-			margin-top: 10vh;
-		}
-		.getPhoneNumber{
-			// all: unset;
+			margin-top: 155rpx;
+				
+			width: 80%;
+			height: 100rpx;
+			border-radius: 50rpx;
+			background-color: #B3997E;
+			color: #fff;
+			
 			display: flex;
 			justify-content: center;
 			align-items: center;
-			// background: $uni-linear-gradient-btn-color;
-			background: $uni-color;
-			color: #fff;
-			width: 200rpx;
-			height: 60rpx;
-			border-radius: 30rpx;
-			font-size: 24rpx;
+			border-radius: 50rpx;
+			border: none;
 		}
 	}
 </style>

store/store.js

@@ -29,6 +29,10 @@ const store = new Vuex.Store({
 						configList[n.keyName + '_keyValue'] = n.keyValue;
 					});
 				}
+
+				// 临时改一下，后续改回接口获取
+				configList['logo_name'] = '愈然工坊'
+
 				state.configList = configList
 				uni.$emit('initConfig', state.configList)
 			})
@@ -65,7 +69,11 @@ const store = new Vuex.Store({
 						uni.hideLoading()
 
 						if (res.code != 200) {
-							return
+							// 接口一直返回找不到openid，临时放行
+							res.result = {
+								userInfo: {},
+							}
+							// return
 						}
 
 						state.userInfo = res.result.userInfo