feat: 登录页面(暂存);

api/model/login.js

@@ -5,14 +5,14 @@
 const api = {
 	// 微信登录接口
 	wxLogin: {
-		url: '/login_common/appletLogin',
+		url: '/login/login',
 		method: 'GET', 
 		limit : 500,
 		showLoading : true,
 	},
 	// 获取绑定手机号码
 	bindPhone: {
-		url: '/login_common/bindPhone',
+		url: '/login/bindPhone',
 		method: 'GET',
 		auth: true,
 	},

config.js

@@ -15,7 +15,7 @@ const config = {
 		baseUrl: 'http://h5.xzaiyp.top/jewelry-admin',
 	},
 	prod: {
-		baseUrl: 'https://jewelry-admin.hhlm1688.com/jewelry-admin',
+		baseUrl: 'http://augcl.natapp1.cc/massage-admin/massage',
 	}
 }
 

manifest.json

@@ -52,9 +52,10 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx28679cb649907e7e",
+        "appid" : "wx77ba4c7131677a74",
         "setting" : {
-            "urlCheck" : false
+            "urlCheck" : false,
+            "minified" : true
         },
         "usingComponents" : true,
         "permission" : {},

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">
+				<uv-icon name="weixin-fill" color="#ffffff" size="36rpx"></uv-icon>
+			</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,73 @@
 <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>
+						<view v-else class="avatar" style="background-color: #C7C7C7; border-radius: 50%;">
+							<uv-icon name="account-fill" color="#ffffff" size="70rpx"></uv-icon>
+						</view>
+						
+					</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 class="form-item">
+				<view class="label">
+					昵称
+				</view>
+				<view class="content">
+					<input type="nickname" placeholder="请输入昵称" style="text-align: right;" id="nickName"
+						placeholder-class="uni-placeholder"
+						v-model="userInfoForm.nickName" 
+					/>
+				</view>
 			</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 v-if="userInfoForm.phone" 
+						placeholder-class="uni-placeholder"
+						placeholder="请输入手机号" 
+						style="text-align: right;"
+						disabled
+						v-model="userInfoForm.phone" 
+					/>
+					<view v-else>
+						<button
+						 :plain="true" :hairline="false"
+							class="btn-phone"
+							open-type="getPhoneNumber" 
+							@getphonenumber="getPhone"
+						>
+							获取电话号码
+						</button>
+					</view>
+				</view>
 			</view>
 		</view>
 		
-		
-		
 		<view class="btn" @click="submit">
 			确认
 		</view>
@@ -120,7 +131,7 @@
 						if (self.$utils.verificationAll(self.userInfoForm, {
 								headImage: '请选择头像',
 								nickName: '请填写昵称',
-								phone: '请填写昵称',
+								phone: '请填写手机号',
 							})) {
 							return
 						}
@@ -146,66 +157,130 @@
 <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: 90rpx;
+					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 {
+				display: inline-block;
+				width: 70rpx;
+				height: 70rpx;
+				margin-right: 63rpx;
+			}
+
+			.btn-phone {
+				border: none;
+				border-radius: 0;
+				padding: 7rpx;
+				margin: 0;
+				text-align: right;
+				color: #C7C7C7;
+				font-size: 30rpx;
+				line-height: 1;
+			}
+
 		}
 
 		.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>
+</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)
 			})

uni.scss

@@ -93,4 +93,11 @@ $uni-font-size-paragraph:15px;
 	color: $uni-color;
 	text-align: center;
 	font-size: 28rpx;
+}
+
+
+					
+.uni-placeholder {
+	color: #C7C7C7;
+	font-size: 30rpx;
 }