修改样式

pages/index/index.vue

@@ -1,168 +1,198 @@
 <template>
 	<view class="login-main">
-		<view class="login-main-content">
-			<image class="img" src="../../static/images/logo.png" mode=""></image>
+		<!-- Logo区域 -->
+		<view class="logo-wrap">
+			<image class="logo-img" src="../../static/images/logo.png" mode="aspectFit"></image>
+			<text class="logo-title">天枢云</text>
 		</view>
-		<view class="login-contont">
-			<view class="login-contont-info">
-				<h5>请确认以下信息并授权登录</h5>
-				<view class="text">获取您的信息（你的头像、信息等）</view>
+		<view>
+			<!-- 授权说明区域 -->
+			<view class="auth-info-wrap">
+				<text class="auth-title">请确认以下信息并授权登录</text>
+				<text class="auth-desc">获取您的信息(你的头像、信息等)</text>
 			</view>
-			<view class="login-contont-button">
-				<button class="btn" @click="login">授权登录</button>
+
+			<!-- 按钮区域 -->
+			<view class="btn-wrap">
+				<button class="auth-btn" @click="login">授权登录</button>
 			</view>
-			<view class="radio">
+
+			<!-- 协议单选框 -->
+			<view class="agreement-wrap">
 				<u-radio-group v-model="radiovalue">
-					<u-radio value="1" size="30" name="1" iconSize="25">
-						<text class="radioText">授权同意《用户服务协议》 和《隐私协议》</text></u-radio>
+					<u-radio value="1" size="30" name="1" iconSize="25" activeColor="#409EFF">
+						<text class="agreement-text">授权同意《用户服务协议》和《隐私协议》</text>
+					</u-radio>
 				</u-radio-group>
 			</view>
 		</view>
+
 	</view>
 </template>
 
 <script>
-	import ap from "../../static/zfb.js"
-	import {
-		requestConfig
-	} from "@/app.config.js";
-	export default {
-		data() {
-			return {
-				ap: ap,
-				radiovalue: 0,
-				shopId: "",
-				uid: "",
-				userInfo: {}
-			};
-		},
-		onLoad(options) {
-			this.shopId = options.shopId;
-			this.uid = options.uid || '';
-			let alipayuserinfo = localStorage.getItem("aliPayUserInfo")
-			let wechatuserinfo = localStorage.getItem("weChatUserInfo")
-			if (alipayuserinfo) {
-				this.zfbLink()
-			} else if (wechatuserinfo) {
-				this.wxLink()
+import ap from "../../static/zfb.js"
+import {
+	requestConfig
+} from "@/app.config.js";
+export default {
+	data() {
+		return {
+			ap: ap,
+			// 默认勾选协议，匹配参考图
+			radiovalue: 1,
+			shopId: "",
+			uid: "",
+			userInfo: {}
+		};
+	},
+	onLoad(options) {
+		this.shopId = options.shopId;
+		this.uid = options.uid || '';
+		let alipayuserinfo = localStorage.getItem("aliPayUserInfo")
+		let wechatuserinfo = localStorage.getItem("weChatUserInfo")
+		if (alipayuserinfo) {
+			this.zfbLink()
+		} else if (wechatuserinfo) {
+			this.wxLink()
+		}
+	},
+	methods: {
+		login() {
+			console.log(this.radiovalue);
+			var userAgent = window.navigator.userAgent.toUpperCase();
+			if (this.radiovalue == 1) {
+				if (userAgent.indexOf('MICROMESSENGER') > 0) {
+					this.wxLink()
+				}
+				if (userAgent.indexOf('ALIPAYCLIENT') > 0) {
+					this.zfbLink()
+				}
+			} else {
+				uni.$u.toast('请先同意用户授权！');
 			}
-
 		},
-		methods: {
-			login() {
-				console.log(this.radiovalue);
-				var userAgent = window.navigator.userAgent.toUpperCase();
-				console.log(this.radiovalue);
-				if (this.radiovalue == 1) {
-					if (userAgent.indexOf('MICROMESSENGER') > 0) {
-						this.wxLink()
-					}
-					if (userAgent.indexOf('ALIPAYCLIENT') > 0) {
-						this.zfbLink()
-					}
-				} else {
-					uni.$u.toast('请先同意用户授权！');
-				}
-
-			},
-			zfbLink() {
-				let url =
-					`${requestConfig.zfb_request_url}?app_id=${requestConfig.zfb_appid}
+		zfbLink() {
+			let url =
+				`${requestConfig.zfb_request_url}?app_id=${requestConfig.zfb_appid}
 					&scope=${requestConfig.zfb_scope}
 					&redirect_uri=${encodeURIComponent(requestConfig.zfb_redirect_uri)}
 					&state=STATE
 					&shopId=${this.shopId}
-					${this.uid?'&uid='+this.uid:''}
+					${this.uid ? '&uid=' + this.uid : ''}
 					&type=zfb`
-				console.log(url);
-				window.location = url;
-
-			},
-			wxLink() {
-				/*微信授权登录*/
-				let redirect_uri = encodeURIComponent(requestConfig.wx_redirect_uri + '?shopId=' + this.shopId + '&uid=' +
-					this.uid)
-				let url = `https://open.weixin.qq.com/connect/oauth2/authorize?
+			console.log(url);
+			window.location = url;
+		},
+		wxLink() {
+			/*微信授权登录*/
+			let redirect_uri = encodeURIComponent(requestConfig.wx_redirect_uri + '?shopId=' + this.shopId + '&uid=' +
+				this.uid)
+			let url = `https://open.weixin.qq.com/connect/oauth2/authorize?
 							appid=${requestConfig.wx_appid}
 							&redirect_uri=${redirect_uri}
 							&response_type=code
 							&scope=snsapi_userinfo
 							&state=STATE
 							#wechat_redirect`;
-				window.location = url;
-			},
-
+			window.location = url;
 		},
-	};
+	},
+};
 </script>
+
 <style scoped lang="scss">
-	.u-radio-group--row {
-		justify-content: center;
+/* 全局页面容器 */
+.login-main {
+	width: 100%;
+	min-height: 100vh;
+	background-color: #ffffff;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 0 40rpx;
+	box-sizing: border-box;
+	justify-content: space-around;
+}
+
+/* Logo区域 */
+.logo-wrap {
+	margin-top: 180rpx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 160rpx;
+
+	.logo-img {
+		width: 160rpx;
+		height: 160rpx;
+		margin-bottom: 30rpx;
 	}
 
-	.radioText {
+	.logo-title {
+		font-size: 48rpx;
 		font-weight: 500;
-		font-size: 24rpx;
-		color: #999999;
-		line-height: 34rpx;
-		text-align: left;
-		font-style: normal;
+		color: #333333;
+		line-height: 64rpx;
 	}
+}
 
-	.login-main {
-		background: url("../../static/images/back.png") no-repeat;
-		background-size: 100% 100%;
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-between;
-		align-items: center;
-		height: 100vh;
-	}
+/* 授权说明区域 */
+.auth-info-wrap {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 60rpx;
 
-	.login-contont-button {
-		.btn {
-			margin-top: 20px;
-			width: 90%;
-			height: 90rpx;
-			background: linear-gradient(275deg, #01cf6c 0%, #07e278 100%);
-			border-radius: 44rpx;
-			color: #fff;
-		}
+	.auth-title {
+		font-size: 32rpx;
+		font-weight: 500;
+		color: #333333;
+		line-height: 44rpx;
+		margin-bottom: 16rpx;
 	}
 
-	.login-contont {
-		width: 100%;
-		height: 50%;
-
-		.login-contont-info {
-			text-align: center;
-
-			.text {
-				margin-top: 10px;
-				font-weight: 500;
-				font-size: 28rpx;
-				color: #999999;
-				line-height: 40rpx;
-				font-style: normal;
-			}
-		}
+	.auth-desc {
+		font-size: 28rpx;
+		color: #999999;
+		line-height: 40rpx;
 	}
+}
 
-	.radio {
-		text-align: center;
-		margin-top: 10px;
-	}
+/* 按钮区域 */
+.btn-wrap {
+	width: 100%;
+	margin-bottom: 40rpx;
 
-	.login-main-content {
-		text-align: center;
-		padding-top: 100px;
+	.auth-btn {
 		width: 100%;
-		height: 50%;
+		height: 90rpx;
+		line-height: 90rpx;
+		background: linear-gradient(90deg, #66B1FF 0%, #1677FF 100%);
+		border-radius: 45rpx;
+		border: none;
+		color: #ffffff;
+		font-size: 32rpx;
+		font-weight: 500;
+		padding: 0;
+	}
+}
 
-		.img {
-			width: 100px;
-			height: 130px;
-		}
+/* 协议区域 */
+.agreement-wrap {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.agreement-text {
+		font-size: 28rpx;
+		color: #999999;
+		line-height: 40rpx;
 	}
+}
+
+/* 单选框样式适配 */
+.u-radio-group--row {
+	justify-content: center;
+}
 </style>

pages/index/pay-zfb.vue

@@ -1,47 +1,66 @@
 <template>
 	<view class="login-main">
-		<view style="width: 100%; height: 220px">
-			<view class="login-main-content">
-				<image class="img" :src="shopInfo.store_logo_url?shopInfo.store_logo_url:'/static/images/error.jpeg'">
-				</image>
-				<h4 class="shopName">{{shopInfo?shopInfo.store_name:""}}</h4>
+		<view style="width: 100%">
+			<view style="width: 100%;height: 270rpx;">
+				<image class="img" src="../../static/images/payBack.png" style="width: 100%;height: 100%;"></image>
 			</view>
 		</view>
+		<view class="main">
+			<view class="login-main-content">
+				<image class="img" :src="shopInfo.store_logo_url
+					? shopInfo.store_logo_url
+					: '/static/images/error.jpeg'
+					" mode=""></image>
+				<h4 class="shopName">
+					陕西天枢云 {{ shopInfo ? shopInfo.store_name : "" }}
+				</h4>
+			</view>
 
-		<view class="login-contont">
-			<view class="uInput">
+			<view class="login-contont">
+				<view class="uInput">
+					<u-input placeholder="请输入金额" border="bottom" :fontSize="40" type="digit"
+						@change="validateInput($event, 1)" v-model="price" :customStyle="inpustyle">
+						<span slot="prefix" style="font-size: 30px">￥</span>
+					</u-input>
+				</view>
+				<view class="login-contont-button">
+					<button class="btn" @click="Pay">立即支付</button>
+					<view style="padding: 0px 30rpx;">
+						<view style="margin-top: 66rpx;background: #FFF7F6;">
+							<u-cell-group :border="false">
+								<u-cell title="代金券折扣" value="可使用4个" :border="false"></u-cell>
+							</u-cell-group>
+						</view>
+
+						<view style="margin-top: 20rpx; font-size: 26rpx">
+							支付成功后，次日将有随机奖励红包以及店铺代金券，可抵现金花，AI天枢云小程序领取
+						</view>
+					</view>
 
-				<u-input placeholder="请输入金额" border="bottom" :fontSize="40" type="digit"
-					@change="validateInput($event,1)" v-model="price" :customStyle="inpustyle">
-					<span slot="prefix" style="font-size: 30px">￥</span>
-				</u-input>
-			</view>
-			<view class="login-contont-button">
-				<button class="btn" @click="Pay">立即支付</button>
-				<view style="margin-top: 20rpx; font-size: 26rpx">
-					支付成功后，次日有奖励红包，农商直采小程序领取
 				</view>
 			</view>
 		</view>
-
-		<u-popup :zIndex="200" :overlayStyle={zIndex:200} :show="showPhone" @close="close" @open="open"
+		<u-popup :zIndex="200" :overlayStyle="{ zIndex: 200 }" :show="showPhone" @close="close" @open="open"
 			:safeAreaInsetTop="true" round="20">
 			<view class="popup">
 				<view class="header">
 					<h4>绑定手机号</h4>
-					<p class="tip">提示:首次登陆请绑定于机号，连续奖励21次红包，最高可免单</p>
+					<p class="tip">注意：首次登录，需绑定手机号才可成功领取农商网红包</p>
 				</view>
 				<view class="main">
 					<view style="height: 70rpx">
 						<u--input placeholder="请输入手机号" type="number" border="surround" v-model="phone"
-							style="background: #F4F4F4;height:100%" />
+							style="background: #f4f4f4; height: 100%" />
 					</view>
-					<view style="margin-top: 20px;height: 70rpx">
+					<view style="margin-top: 20px; height: 70rpx">
 						<u--input placeholder="验证码" border="surround" v-model="yzm"
-							style="background: #F4F4F4;height:100%">
+							style="background: #f4f4f4; height: 100%">
 							<template slot="suffix">
 								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
-								<text class="yzm" @tap="getCode">{{tips?tips:'发送验证码'}}</text>
+								<!-- <u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button> -->
+								<text class="yzm" @tap="getCode">{{
+									tips ? tips : "发送验证码"
+								}}</text>
 							</template>
 						</u--input>
 					</view>
@@ -53,349 +72,361 @@
 		</u-popup>
 	</view>
 </template>
-
 <script>
-	import ap from "../../static/zfb.js"
-	import {
-		requestConfig
-	} from "@/app.config.js";
-	import axios from "axios";
-	export default {
-		data() {
-			return {
-				ap: ap,
-				showPhone: false,
-				requestConfig: requestConfig,
-				code: "",
-				appid: "",
-				value: "",
-				userInfo: {},
-				inpustyle: {
-					fontWeight: "bold",
-					fontSize: "40px",
-				},
-				phone: "",
-				yzm: "",
-				tips: null,
-				price: null,
-				shopId: "",
-				shopInfo: {},
-				zfbInfo: {},
-				shopId: "",
-				localUserInfo: {},
-				uid: ""
-
-			};
-		},
-		onLoad(options) {
-			console.log('options', options);
-			this.zfbInfo = options
-			this.uid = options.uid || ""
-			this.shopId = options.shopId
-			let info = localStorage.getItem('aliPayUserInfo');
-			this.localUserInfo = JSON.parse(info)
-			if (this.localUserInfo) {
-				this.vidTokenExist()
-			} else {
+import ap from "../../static/zfb.js"
+import {
+	requestConfig
+} from "@/app.config.js";
+import axios from "axios";
+export default {
+	data() {
+		return {
+			ap: ap,
+			showPhone: false,
+			requestConfig: requestConfig,
+			code: "",
+			appid: "",
+			value: "",
+			userInfo: {},
+			inpustyle: {
+				fontWeight: "bold",
+				fontSize: "40px",
+			},
+			phone: "",
+			yzm: "",
+			tips: null,
+			price: null,
+			shopId: "",
+			shopInfo: {},
+			zfbInfo: {},
+			shopId: "",
+			localUserInfo: {},
+			uid: ""
+
+		};
+	},
+	onLoad(options) {
+		console.log('options', options);
+		this.zfbInfo = options
+		this.uid = options.uid || ""
+		this.shopId = options.shopId
+		let info = localStorage.getItem('aliPayUserInfo');
+		this.localUserInfo = JSON.parse(info)
+		if (this.localUserInfo) {
+			this.vidTokenExist()
+		} else {
+			this.getShopInfo();
+			this.getInfo();
+		}
+	},
+	methods: {
+		async vidTokenExist() {
+			let res = await axios.get(
+				`${requestConfig.BaseUrl}user/app/v1/user/vidTokenExist`, {
+				headers: {
+					'token': `${this.localUserInfo.token}`
+				}
+			});
+			if (res.data.code == 200) {
+				this.userInfo = this.localUserInfo;
 				this.getShopInfo();
-				this.getInfo();
+			} else {
+				uni.$u.toast('登录已过期,请重新登录！');
+				localStorage.removeItem('aliPayUserInfo');
+				setTimeout(() => {
+					uni.redirectTo({
+						url: '/pages/index/index?shopId=' + this.shopId + '&uid=' + this.uid
+					})
+				}, 1000)
 			}
 		},
-		methods: {
-			async vidTokenExist() {
-				let res = await axios.get(
-					`${requestConfig.BaseUrl}user/app/v1/user/vidTokenExist`, {
-						headers: {
-							'token': `${this.localUserInfo.token}`
-						}
-					});
-				if (res.data.code == 200) {
-					this.userInfo = this.localUserInfo;
-					this.getShopInfo();
+
+		async getInfo() {
+			const res = await axios.post(
+				`${requestConfig.BaseUrl}user/app/v1/user/alipayLogin?code=${this.zfbInfo.auth_code}`
+			);
+			if (res.data.code == 200) {
+				this.userInfo = res.data.data;
+				localStorage.setItem('aliPayUserInfo', JSON.stringify(this.userInfo))
+				if (this.userInfo.bindPhoneStatus == 0) {
+					this.showPhone = true
 				} else {
-					uni.$u.toast('登录已过期,请重新登录！');
-					localStorage.removeItem('aliPayUserInfo');
-					setTimeout(() => {
-						uni.redirectTo({
-							url: '/pages/index/index?shopId=' + this.shopId + '&uid=' + this.uid
-						})
-					}, 1000)
+					this.showPhone = false
+					this.getShopInfo()
 				}
-			},
 
-			async getInfo() {
-				const res = await axios.post(
-					`${requestConfig.BaseUrl}user/app/v1/user/alipayLogin?code=${this.zfbInfo.auth_code}`
-				);
-				if (res.data.code == 200) {
-					this.userInfo = res.data.data;
-					localStorage.setItem('aliPayUserInfo', JSON.stringify(this.userInfo))
-					if (this.userInfo.bindPhoneStatus == 0) {
-						this.showPhone = true
-					} else {
-						this.showPhone = false
-						this.getShopInfo()
-					}
+			} else {
+				uni.$u.toast('获取登录信息失败！');
+			}
+		},
 
-				} else {
-					uni.$u.toast('获取登录信息失败！');
-				}
-			},
+		async Pay() {
+			uni.showLoading({
+				title: '支付中'
+			});
 
-			async Pay() {
-				uni.showLoading({
-					title: '支付中'
-				});
+			if (!this.price) {
+				uni.$u.toast('请输入支付金额！');
+			}
 
-				if (!this.price) {
-					uni.$u.toast('请输入支付金额！');
+			let res = await axios.get(`${requestConfig.BaseUrl}order/app/v1/buyer/order/createOfflineOrder
+						?shopId=${this.zfbInfo.shopId}&price=${this.price}${this.uid ? '&uid=' + this.uid : ''}`, {
+				headers: {
+					'token': `${this.userInfo.token}`
 				}
-
-				let res = await axios.get(`${requestConfig.BaseUrl}order/app/v1/buyer/order/createOfflineOrder
-						?shopId=${this.zfbInfo.shopId}&price=${this.price}${this.uid?'&uid='+this.uid:''}`, {
+			});
+			if (res.data.code == 200) {
+				let data = {
+					"orderId": res.data.data, //订单id
+					"orderType": 11, //订单类型  -1--其他 2-司机保证金 3-商品交易  11-线下交易
+					"payKinds": 1, //支付类型  0-微信  1-支付宝
+					"payMeth": 7 //5-微信小程序支付  6-微信H5支付 7-支付宝app支付
+				}
+				const pay = await axios.post(`${requestConfig.BaseUrl}order/app/v1/buyer/order/offlineOrderPay
+								`, data, {
 					headers: {
-						'token': `${this.userInfo.token}`
+						'Token': `${this.userInfo.token}`
 					}
 				});
-				if (res.data.code == 200) {
-					let data = {
-						"orderId": res.data.data, //订单id
-						"orderType": 11, //订单类型  -1--其他 2-司机保证金 3-商品交易  11-线下交易
-						"payKinds": 1, //支付类型  0-微信  1-支付宝
-						"payMeth": 7 //5-微信小程序支付  6-微信H5支付 7-支付宝app支付
-					}
-					const pay = await axios.post(`${requestConfig.BaseUrl}order/app/v1/buyer/order/offlineOrderPay
-								`, data, {
-						headers: {
-							'Token': `${this.userInfo.token}`
-						}
-					});
-					if (pay.data.code == 200) {
-						uni.hideLoading();
-						window.location.href =
-							// pay.data.data.result
-							`alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(pay.data.data.result)}`
-						// window.close(); // 关闭当前页面
-						// ap.popWindow()
-
-					} else {
-						uni.hideLoading();
-						uni.$u.toast(pay.data.msg);
-					}
+				if (pay.data.code == 200) {
+					uni.hideLoading();
+					window.location.href =
+						// pay.data.data.result
+						`alipays://platformapi/startapp?appId=20000067&url=${encodeURIComponent(pay.data.data.result)}`
+					// window.close(); // 关闭当前页面
+					// ap.popWindow()
+
 				} else {
-					uni.$u.toast('创建线下支付订单失败！');
+					uni.hideLoading();
+					uni.$u.toast(pay.data.msg);
 				}
+			} else {
+				uni.$u.toast('创建线下支付订单失败！');
+			}
 
 
 
 
-			},
-			validateInput(e, num) {
-				const inputTypeNum = /[^\d]/g //数字
-				switch (num) {
-					case 1:
-						//要写nextTick 不然无效 
-						this.$nextTick(() => {
-							this.listData.integral = e.replace(inputTypeNum, '');
-						})
-						break;
-				}
-			},
+		},
+		validateInput(e, num) {
+			const inputTypeNum = /[^\d]/g //数字
+			switch (num) {
+				case 1:
+					//要写nextTick 不然无效 
+					this.$nextTick(() => {
+						this.listData.integral = e.replace(inputTypeNum, '');
+					})
+					break;
+			}
+		},
 
-			async getShopInfo() {
-				let res = await axios.get(
-					`${requestConfig.BaseUrl}user/app/v1/store/getStoreInfoByScan?shopId=${this.zfbInfo.shopId}
-					${this.uid?'&uid='+this.uid:''}
+		async getShopInfo() {
+			let res = await axios.get(
+				`${requestConfig.BaseUrl}user/app/v1/store/getStoreInfoByScan?shopId=${this.zfbInfo.shopId}
+					${this.uid ? '&uid=' + this.uid : ''}
 					`, {
-						headers: {
-							'token': `${this.userInfo.token}`
-						}
-					});
-				if (res.data.code == 200) {
-					this.shopInfo = res.data.data
-				} else {
-					uni.$u.toast(res.data.msg);
+				headers: {
+					'token': `${this.userInfo.token}`
 				}
-			},
+			});
+			if (res.data.code == 200) {
+				this.shopInfo = res.data.data
+			} else {
+				uni.$u.toast(res.data.msg);
+			}
+		},
 
-			async submitOk() {
-				if (this.phone == "") {
-					uni.$u.toast('请输入手机号');
-				} else if (this.yzm == "") {
-					uni.$u.toast('请输入验证码');
-				}
-				const res = await axios.post(
-					`${requestConfig.BaseUrl}user/app/v1/user/bindPhone?
+		async submitOk() {
+			if (this.phone == "") {
+				uni.$u.toast('请输入手机号');
+			} else if (this.yzm == "") {
+				uni.$u.toast('请输入验证码');
+			}
+			const res = await axios.post(
+				`${requestConfig.BaseUrl}user/app/v1/user/bindPhone?
 					phone=${this.phone}
 					&code=${this.yzm}
 					&alipayUserId=${this.userInfo.alipayUserId}
 					`
-				);
-				if (res.data.code == 200) {
-					uni.$u.toast('绑定手机号成功');
-					this.userInfo = res.data.data
-					this.showPhone = false
-					this.getShopInfo()
+			);
+			if (res.data.code == 200) {
+				uni.$u.toast('绑定手机号成功');
+				this.userInfo = res.data.data
+				this.showPhone = false
+				this.getShopInfo()
 
-				}
+			}
 
-			},
-			codeChange(text) {
-				this.tips = text;
-			},
-			async getCode() {
-				if (this.$refs.uCode.canGetCode) {
-					const res = await axios.post(
-						`${requestConfig.BaseUrl}third/app/v1/third/getSMSCode?phone=${this.phone}`
-					);
-					uni.showLoading({
-						title: '正在获取验证码'
-					})
-					setTimeout(() => {
-						uni.hideLoading();
-						uni.$u.toast('验证码已发送');
-						this.$refs.uCode.start();
-					}, 2000);
-				} else {
-					uni.$u.toast('倒计时结束后再发送');
-				}
-			},
 		},
-	};
+		codeChange(text) {
+			this.tips = text;
+		},
+		async getCode() {
+			if (this.$refs.uCode.canGetCode) {
+				const res = await axios.post(
+					`${requestConfig.BaseUrl}third/app/v1/third/getSMSCode?phone=${this.phone}`
+				);
+				uni.showLoading({
+					title: '正在获取验证码'
+				})
+				setTimeout(() => {
+					uni.hideLoading();
+					uni.$u.toast('验证码已发送');
+					this.$refs.uCode.start();
+				}, 2000);
+			} else {
+				uni.$u.toast('倒计时结束后再发送');
+			}
+		},
+	},
+};
 </script>
 
-<style lang="scss">
-	.shopName {
-		font-weight: bold;
-		font-size: 36rpx;
-		color: #333333;
-	}
+<style lang="scss" scoped>
+::v-deep .u-cell__title {
+	flex: none !important;
+}
+
+.main {
+	width: 100%;
+	background: white;
+	height: calc(100% - 280rpx);
+	border-radius: 40rpx;
+}
+
+.shopName {
+	font-weight: bold;
+	font-size: 36rpx;
+	color: #333333;
+}
+
+/* 修改加载提示框的遮罩层 z-index */
+.uni-loading__mask {
+	z-index: 10076;
+}
+
+/* 修改加载提示框本身的 z-index */
+.uni-loading {
+	z-index: 10076;
+}
+
+.yzm {
+	font-weight: 500;
+	font-size: 28rpx;
+	color: #00d36d;
+}
+
+.popup {
+	height: 300px;
+	padding: 20px;
+
+	.footer {
+		margin-top: 150rpx;
 
-	/* 修改加载提示框的遮罩层 z-index */
-	.uni-loading__mask {
-		z-index: 10076;
-	}
-
-	/* 修改加载提示框本身的 z-index */
-	.uni-loading {
-		z-index: 10076;
+		.btn {
+			width: 100%;
+			background: linear-gradient(152deg, #6F9DFD 0%, #1B71F2 100%);
+			border-radius: 46rpx;
+			border: none;
+		}
 	}
 
-	.yzm {
-		font-weight: 500;
-		font-size: 28rpx;
-		color: #00D36D;
+	.main {
+		margin-top: 20rpx;
 	}
 
-	.popup {
-		height: 300px;
-		padding: 20px;
-
-		.footer {
-			margin-top: 150rpx;
-
-			.btn {
-				width: 100%;
-				background: linear-gradient(275deg, #01CF6C 0%, #07E278 100%);
-				border-radius: 46rpx;
-				border: none;
-
-			}
-
-		}
+	.header {
+		margin-bottom: 20rpx;
+		text-align: center;
 
-		.main {
+		.tip {
 			margin-top: 20rpx;
-		}
-
-		.header {
-			margin-bottom: 20rpx;
-			text-align: center;
-
-			.tip {
-				margin-top: 20rpx;
-				font-weight: 500;
-				font-size: 26rpx;
-				color: #FF8B2F;
-			}
+			font-weight: 500;
+			font-size: 26rpx;
+			color: #ff8b2f;
 		}
 	}
-
-	.u-radio-group--row {
-		justify-content: center;
+}
+
+.u-radio-group--row {
+	justify-content: center;
+}
+
+.radioText {
+	font-weight: 500;
+	font-size: 24rpx;
+	color: #999999;
+	line-height: 34rpx;
+	text-align: left;
+	font-style: normal;
+}
+
+.login-main {
+
+	background: url("../../static/images/payBack.png");
+	background-size: 100% 100%;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	/* justify-content: space-between; */
+	align-items: center;
+	height: 100vh;
+}
+
+.login-contont-button {
+	text-align: center;
+
+	.btn {
+		margin-top: 20px;
+		width: 95%;
+		height: 90rpx;
+		background: linear-gradient(152deg, #6F9DFD 0%, #1B71F2 100%);
+		border-radius: 44rpx;
+		color: #fff;
 	}
+}
 
-	.radioText {
-		font-weight: 500;
-		font-size: 24rpx;
-		color: #999999;
-		line-height: 34rpx;
-		text-align: left;
-		font-style: normal;
-	}
+.login-contont {
+	width: 100%;
+	height: 600rpx;
+	margin-top: 100rpx;
 
-	.login-main {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		/* justify-content: space-between; */
-		align-items: center;
-		height: 100vh;
+	.uInput {
+		padding: 10px 0px;
+		border-bottom: 0.5px solid #97979740;
 	}
 
-	.login-contont-button {
+	.login-contont-info {
 		text-align: center;
 
-		.btn {
-			margin-top: 20px;
-			width: 95%;
-			height: 90rpx;
-			background: linear-gradient(275deg, #01cf6c 0%, #07e278 100%);
-			border-radius: 44rpx;
-			color: #fff;
-		}
-	}
-
-	.login-contont {
-		width: 90%;
-		height: 50%;
-
-		.uInput {
-			padding: 10px 0px;
-			border-bottom: 0.5px solid #97979740;
-		}
-
-		.login-contont-info {
-			text-align: center;
-
-			.text {
-				margin-top: 10px;
-				font-weight: 500;
-				font-size: 28rpx;
-				color: #999999;
-				line-height: 40rpx;
-				font-style: normal;
-			}
+		.text {
+			margin-top: 10px;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #999999;
+			line-height: 40rpx;
+			font-style: normal;
 		}
 	}
-
-	.radio {
-		text-align: center;
-		margin-top: 10px;
-	}
-
-	.login-main-content {
-		background: url("../../static/images/payBack.png") no-repeat;
-		background-size: 100% 100%;
-		text-align: center;
-		width: 100%;
-		height: 120px;
-
-		.img {
-			margin-top: 70px;
-			width: 80px;
-			height: 80px;
-			border-radius: 50%;
-		}
+}
+
+.radio {
+	text-align: center;
+	margin-top: 10px;
+}
+
+.login-main-content {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 9px 26px;
+
+	.img {
+		// margin-top: 70px;
+		margin-right: 20rpx;
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 50%;
 	}
+}
 </style>

pages/index/pay.vue

@@ -1,426 +1,391 @@
-<template>
-	<view class="login-main">
-		<view style="width: 100%; height: 220px">
-			<view class="login-main-content">
-				<image class="img" :src="shopInfo.store_logo_url?shopInfo.store_logo_url:'/static/images/error.jpeg'"
-					mode=""></image>
-				<h4 class="shopName">{{shopInfo?shopInfo.store_name:""}}</h4>
-			</view>
-		</view>
-
-		<view class="login-contont">
-			<view class="uInput">
-
-				<u-input placeholder="请输入金额" border="bottom" :fontSize="40" type="digit"
-					@change="validateInput($event,1)" v-model="price" :customStyle="inpustyle">
-					<span slot="prefix" style="font-size: 30px">￥</span>
-				</u-input>
-			</view>
-			<view class="login-contont-button">
-				<button class="btn" @click="Pay">立即支付</button>
-				<view style="margin-top: 20rpx; font-size: 26rpx">
-					支付成功后，次日有奖励红包，农商直采小程序领取
-				</view>
-			</view>
-		</view>
-
-		<u-popup :zIndex="200" :overlayStyle={zIndex:200} :show="showPhone" @close="close" @open="open"
-			:safeAreaInsetTop="true" round="20">
-			<view class="popup">
-				<view class="header">
-					<h4>绑定手机号</h4>
-					<p class="tip">注意：首次登录，需绑定手机号才可成功领取农商网红包</p>
-				</view>
-				<view class="main">
-					<view style="height: 70rpx">
-						<u--input placeholder="请输入手机号" type="number" border="surround" v-model="phone"
-							style="background: #F4F4F4;height:100%" />
-					</view>
-					<view style="margin-top: 20px;height: 70rpx">
-						<u--input placeholder="验证码" border="surround" v-model="yzm"
-							style="background: #F4F4F4;height:100%">
-							<template slot="suffix">
-								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
-								<!-- <u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button> -->
-								<text class="yzm" @tap="getCode">{{tips?tips:'发送验证码'}}</text>
-							</template>
-						</u--input>
-					</view>
-				</view>
-				<view class="footer">
-					<u-button type="primary" class="btn" text="确定" @click="submitOk"></u-button>
-				</view>
-			</view>
-		</u-popup>
-	</view>
-</template>
+ 
 
 <script>
-	import {
-		requestConfig
-	} from "@/app.config.js";
-	import axios from "axios";
-	export default {
-		data() {
-			return {
-				showPhone: false,
-				requestConfig: requestConfig,
-				code: "",
-				appid: "",
-				value: "",
-				userInfo: {},
-				inpustyle: {
-					fontWeight: "bold",
-					fontSize: "40px",
+import { requestConfig } from "@/app.config.js";
+import axios from "axios";
+export default {
+	data() {
+		return {
+			showPhone: false,
+			requestConfig: requestConfig,
+			code: "",
+			appid: "",
+			value: "",
+			userInfo: {},
+			inpustyle: {
+				fontWeight: "bold",
+				fontSize: "40px",
+			},
+			phone: "",
+			yzm: "",
+			tips: null,
+			price: null,
+			shopId: "",
+			shopInfo: {},
+			localUserInfo: {},
+			uid: "",
+		};
+	},
+	onLoad(options) {
+		// this.shopId = options.shopId
+		// this.uid = options.uid || ''
+		// console.log(this.uid);
+		// let info = localStorage.getItem('weChatUserInfo');
+		// console.log(info);
+		// this.localUserInfo = JSON.parse(info)
+		// if (this.localUserInfo) {
+		// 	this.vidTokenExist()
+		// } else {
+		// 	this.getShopInfo();
+		// 	this.getInfo();
+		// }
+	},
+	methods: {
+		async vidTokenExist() {
+			let res = await axios.get(
+				`${requestConfig.BaseUrl}user/app/v1/user/vidTokenExist`,
+				{
+					headers: {
+						token: `${this.localUserInfo.token}`,
+					},
 				},
-				phone: "",
-				yzm: "",
-				tips: null,
-				price: null,
-				shopId: "",
-				shopInfo: {},
-				localUserInfo: {},
-				uid: ""
-
-			};
-		},
-		onLoad(options) {
-			this.shopId = options.shopId
-			this.uid = options.uid || ''
-			console.log(this.uid);
-			let info = localStorage.getItem('weChatUserInfo');
-			console.log(info);
-			this.localUserInfo = JSON.parse(info)
-			if (this.localUserInfo) {
-				this.vidTokenExist()
-			} else {
+			);
+			if (res.data.code == 200) {
+				this.userInfo = this.localUserInfo;
 				this.getShopInfo();
-				this.getInfo();
+			} else {
+				uni.$u.toast("登录已过期,请重新登录！");
+				localStorage.removeItem("weChatUserInfo");
+				setTimeout(() => {
+					uni.redirectTo({
+						url:
+							"/pages/index/index?shopId=" + this.shopId + "&uid=" + this.uid,
+					});
+				}, 1000);
 			}
 		},
-		methods: {
-			async vidTokenExist() {
-				let res = await axios.get(
-					`${requestConfig.BaseUrl}user/app/v1/user/vidTokenExist`, {
-						headers: {
-							'token': `${this.localUserInfo.token}`
-						}
-					});
-				if (res.data.code == 200) {
-					this.userInfo = this.localUserInfo;
-					this.getShopInfo();
-				} else {
-					uni.$u.toast('登录已过期,请重新登录！');
-					localStorage.removeItem('weChatUserInfo');
-					setTimeout(() => {
-						uni.redirectTo({
-							url: '/pages/index/index?shopId=' + this.shopId + '&uid=' + this.uid
-						})
-					}, 1000)
-				}
-			},
 
-			validateInput(e, num) {
-				const inputTypeNum = /[^\d]/g //数字
-				switch (num) {
-					case 1:
-						//要写nextTick 不然无效 
-						this.$nextTick(() => {
-							this.listData.integral = e.replace(inputTypeNum, '');
-						})
-						break;
-				}
-			},
-
-			async getShopInfo() {
-				let res = await axios.get(
-					`${requestConfig.BaseUrl}user/app/v1/store/getStoreInfoByScan?shopId=${this.shopId}${this.uid?'&uid='+this.uid:''}`, {
-						headers: {
-							'token': `${this.userInfo.token}`
-						}
+		validateInput(e, num) {
+			const inputTypeNum = /[^\d]/g; //数字
+			switch (num) {
+				case 1:
+					//要写nextTick 不然无效
+					this.$nextTick(() => {
+						this.listData.integral = e.replace(inputTypeNum, "");
 					});
-				if (res.data.code == 200) {
-					this.shopInfo = res.data.data
-				} else {
-					uni.$u.toast(res.data.msg);
-				}
-			},
+					break;
+			}
+		},
 
-			async submitOk() {
-				if (this.phone == "") {
-					uni.$u.toast('请输入手机号');
-				} else if (this.yzm == "") {
-					uni.$u.toast('请输入验证码');
-				}
+		async getShopInfo() {
+			let res = await axios.get(
+				`${requestConfig.BaseUrl}user/app/v1/store/getStoreInfoByScan?shopId=${this.shopId}${this.uid ? "&uid=" + this.uid : ""}`,
+				{
+					headers: {
+						token: `${this.userInfo.token}`,
+					},
+				},
+			);
+			if (res.data.code == 200) {
+				this.shopInfo = res.data.data;
+			} else {
+				uni.$u.toast(res.data.msg);
+			}
+		},
+
+		async submitOk() {
+			if (this.phone == "") {
+				uni.$u.toast("请输入手机号");
+			} else if (this.yzm == "") {
+				uni.$u.toast("请输入验证码");
+			}
+			const res = await axios.post(
+				`${requestConfig.BaseUrl}user/app/v1/user/bindPhone?mpOpenid=${this.userInfo.mpOpenid}&phone=${this.phone}&code=${this.yzm}&unionid=${this.userInfo.unionid}`,
+			);
+			if (res.data.code == 200) {
+				uni.$u.toast("绑定手机号成功");
+				this.userInfo = res.data.data;
+				this.showPhone = false;
+				this.getShopInfo();
+			} else {
+				uni.$u.toast("绑定手机号失败！");
+			}
+		},
+		codeChange(text) {
+			this.tips = text;
+		},
+		async getCode() {
+			if (this.$refs.uCode.canGetCode) {
 				const res = await axios.post(
-					`${requestConfig.BaseUrl}user/app/v1/user/bindPhone?mpOpenid=${this.userInfo.mpOpenid}&phone=${this.phone}&code=${this.yzm}&unionid=${this.userInfo.unionid}`
+					`${requestConfig.BaseUrl}third/app/v1/third/getSMSCode?phone=${this.phone}`,
 				);
-				if (res.data.code == 200) {
-					uni.$u.toast('绑定手机号成功');
-					this.userInfo = res.data.data
-					this.showPhone = false
-					this.getShopInfo()
-
-				} else {
-					uni.$u.toast('绑定手机号失败！');
-				}
-
-			},
-			codeChange(text) {
-				this.tips = text;
-			},
-			async getCode() {
-				if (this.$refs.uCode.canGetCode) {
-					const res = await axios.post(
-						`${requestConfig.BaseUrl}third/app/v1/third/getSMSCode?phone=${this.phone}`
-					);
-					uni.showLoading({
-						title: '正在获取验证码'
-					})
-					setTimeout(() => {
-						uni.hideLoading();
-						uni.$u.toast('验证码已发送');
-						this.$refs.uCode.start();
-					}, 2000);
-				} else {
-					uni.$u.toast('倒计时结束后再发送');
-				}
-			},
-			async Pay() {
 				uni.showLoading({
-					title: '支付中'
+					title: "正在获取验证码",
 				});
-				// uni.hideLoading();
-				// window.open(`${requestConfig.redirectOpen}pages/index/paySuccess`)
-
-				if (!this.price) {
-					uni.$u.toast('请输入支付金额！');
-				}
-				let res = await axios.get(`${requestConfig.BaseUrl}order/app/v1/buyer/order/createOfflineOrder
-					?shopId=${this.shopId}&price=${this.price}${this.uid?'&uid='+this.uid:''}`, {
+				setTimeout(() => {
+					uni.hideLoading();
+					uni.$u.toast("验证码已发送");
+					this.$refs.uCode.start();
+				}, 2000);
+			} else {
+				uni.$u.toast("倒计时结束后再发送");
+			}
+		},
+		async Pay() {
+			uni.showLoading({
+				title: "支付中",
+			});
+			// uni.hideLoading();
+			// window.open(`${requestConfig.redirectOpen}pages/index/paySuccess`)
+
+			if (!this.price) {
+				uni.$u.toast("请输入支付金额！");
+			}
+			let res = await axios.get(
+				`${requestConfig.BaseUrl}order/app/v1/buyer/order/createOfflineOrder
+					?shopId=${this.shopId}&price=${this.price}${this.uid ? "&uid=" + this.uid : ""}`,
+				{
 					headers: {
-						'token': `${this.userInfo.token}`
-					}
-				});
-				if (res.data.code == 200) {
-					//post请求
-					let data = {
-						"orderId": res.data.data, //订单id
-						"orderType": 11, //订单类型  -1--其他 2-司机保证金 3-商品交易  4-线下交易
-						"payKinds": 0, //支付类型  0-微信  1-支付宝
-						"payMeth": 6 //5-微信小程序支付  6-微信H5支付 7-支付宝app支付
-					}
-					const pay = await axios.post(`${requestConfig.BaseUrl}order/app/v1/buyer/order/offlineOrderPay
-						`, data, {
+						token: `${this.userInfo.token}`,
+					},
+				},
+			);
+			if (res.data.code == 200) {
+				//post请求
+				let data = {
+					orderId: res.data.data, //订单id
+					orderType: 11, //订单类型  -1--其他 2-司机保证金 3-商品交易  4-线下交易
+					payKinds: 0, //支付类型  0-微信  1-支付宝
+					payMeth: 6, //5-微信小程序支付  6-微信H5支付 7-支付宝app支付
+				};
+				const pay = await axios.post(
+					`${requestConfig.BaseUrl}order/app/v1/buyer/order/offlineOrderPay
+						`,
+					data,
+					{
 						headers: {
-							'Token': `${this.userInfo.token}`
-						}
-					});
-					if (pay.data.code == 200) {
-						let res = JSON.parse(pay.data.data.result)
-						console.log(res);
-						WeixinJSBridge.invoke(
-							"getBrandWCPayRequest", {
-								// 公众号名称，由商户传入
-								appId: res.appId,
-								// 时间戳，自1970年以来的秒数
-								timeStamp: res.timeStamp,
-								// 随机串
-								nonceStr: res.nonceStr,
-								package: res.package,
-								// 微信签名方式：
-								signType: res.signType,
-								// 微信签名
-								paySign: res.paySign,
-							},
-							function(res) {
-								if (res.err_msg == "get_brand_wcpay_request:ok") {
-									// 使用以上方式判断前端返回,
-									// 微信团队郑重提示：
-									uni.hideLoading();
-									window.location.href = requestConfig.redirectOpen
-									// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
-								} else {
-									uni.hideLoading();
-									uni.$u.toast('支付失败！');
-								}
+							Token: `${this.userInfo.token}`,
+						},
+					},
+				);
+				if (pay.data.code == 200) {
+					let res = JSON.parse(pay.data.data.result);
+					console.log(res);
+					WeixinJSBridge.invoke(
+						"getBrandWCPayRequest",
+						{
+							// 公众号名称，由商户传入
+							appId: res.appId,
+							// 时间戳，自1970年以来的秒数
+							timeStamp: res.timeStamp,
+							// 随机串
+							nonceStr: res.nonceStr,
+							package: res.package,
+							// 微信签名方式：
+							signType: res.signType,
+							// 微信签名
+							paySign: res.paySign,
+						},
+						function (res) {
+							if (res.err_msg == "get_brand_wcpay_request:ok") {
+								// 使用以上方式判断前端返回,
+								// 微信团队郑重提示：
+								uni.hideLoading();
+								window.location.href = requestConfig.redirectOpen;
+								// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+							} else {
+								uni.hideLoading();
+								uni.$u.toast("支付失败！");
 							}
-						);
-
-					} else {
-						uni.hideLoading();
-						uni.$u.toast('支付失败！');
-					}
+						},
+					);
 				} else {
-					uni.$u.toast('线下订单创建失败！');
+					uni.hideLoading();
+					uni.$u.toast("支付失败！");
 				}
-			},
-			async getInfo() {
-				let code = this.GetQueryString("code");
-				const res = await axios.post(
-					`${requestConfig.BaseUrl}user/app/v1/user/weChatH5Login?code=${code}`
-				);
-				if (res.data.code == 200) {
-					this.userInfo = res.data.data;
-					localStorage.setItem('weChatUserInfo', JSON.stringify(this.userInfo))
-					if (this.userInfo.bindPhoneStatus == 0) {
-						this.showPhone = true
-					} else {
-						this.showPhone = false
-						this.getShopInfo()
-					}
+			} else {
+				uni.$u.toast("线下订单创建失败！");
+			}
+		},
+		async getInfo() {
+			let code = this.GetQueryString("code");
+			const res = await axios.post(
+				`${requestConfig.BaseUrl}user/app/v1/user/weChatH5Login?code=${code}`,
+			);
+			if (res.data.code == 200) {
+				this.userInfo = res.data.data;
+				localStorage.setItem("weChatUserInfo", JSON.stringify(this.userInfo));
+				if (this.userInfo.bindPhoneStatus == 0) {
+					this.showPhone = true;
 				} else {
-					uni.$u.toast('获取微信登录信息失败,请重新登录！');
-					// localStorage.removeItem('weChatUserInfo');
-					// setTimeout(() => {
-					// 	uni.redirectTo({
-					// 		url: '/pages/index/index?shopId=' + this.shopId + '&uid=' + this.uid
-					// 	})
-					// }, 1000)
+					this.showPhone = false;
+					this.getShopInfo();
 				}
-			},
-			GetQueryString(name) {
-				var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
-				var r = window.location.search.substr(1).match(reg);
-				if (r != null) return unescape(r[2]);
-				return null;
-			},
+			} else {
+				uni.$u.toast("获取微信登录信息失败,请重新登录！");
+				// localStorage.removeItem('weChatUserInfo');
+				// setTimeout(() => {
+				// 	uni.redirectTo({
+				// 		url: '/pages/index/index?shopId=' + this.shopId + '&uid=' + this.uid
+				// 	})
+				// }, 1000)
+			}
 		},
-	};
+		GetQueryString(name) {
+			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+			var r = window.location.search.substr(1).match(reg);
+			if (r != null) return unescape(r[2]);
+			return null;
+		},
+	},
+};
 </script>
 
 <style lang="scss">
-	.shopName {
-		font-weight: bold;
-		font-size: 36rpx;
-		color: #333333;
-	}
+::v-deep .u-cell__title {
+	flex: none !important;
+}
+
+.main {
+	width: 100%;
+	background: white;
+	height: calc(100% - 280rpx);
+	border-radius: 40rpx;
+}
+
+.shopName {
+	font-weight: bold;
+	font-size: 36rpx;
+	color: #333333;
+}
+
+/* 修改加载提示框的遮罩层 z-index */
+.uni-loading__mask {
+	z-index: 10076;
+}
+
+/* 修改加载提示框本身的 z-index */
+.uni-loading {
+	z-index: 10076;
+}
+
+.yzm {
+	font-weight: 500;
+	font-size: 28rpx;
+	color: #00d36d;
+}
+
+.popup {
+	height: 300px;
+	padding: 20px;
+
+	.footer {
+		margin-top: 150rpx;
 
-	/* 修改加载提示框的遮罩层 z-index */
-	.uni-loading__mask {
-		z-index: 10076;
-	}
-
-	/* 修改加载提示框本身的 z-index */
-	.uni-loading {
-		z-index: 10076;
+		.btn {
+			width: 100%;
+			background: linear-gradient(152deg, #6F9DFD 0%, #1B71F2 100%);
+			border-radius: 46rpx;
+			border: none;
+		}
 	}
 
-	.yzm {
-		font-weight: 500;
-		font-size: 28rpx;
-		color: #00D36D;
+	.main {
+		margin-top: 20rpx;
 	}
 
-	.popup {
-		height: 300px;
-		padding: 20px;
-
-		.footer {
-			margin-top: 150rpx;
-
-			.btn {
-				width: 100%;
-				background: linear-gradient(275deg, #01CF6C 0%, #07E278 100%);
-				border-radius: 46rpx;
-				border: none;
-
-			}
-
-		}
+	.header {
+		margin-bottom: 20rpx;
+		text-align: center;
 
-		.main {
+		.tip {
 			margin-top: 20rpx;
-		}
-
-		.header {
-			margin-bottom: 20rpx;
-			text-align: center;
-
-			.tip {
-				margin-top: 20rpx;
-				font-weight: 500;
-				font-size: 26rpx;
-				color: #FF8B2F;
-			}
+			font-weight: 500;
+			font-size: 26rpx;
+			color: #ff8b2f;
 		}
 	}
-
-	.u-radio-group--row {
-		justify-content: center;
+}
+
+.u-radio-group--row {
+	justify-content: center;
+}
+
+.radioText {
+	font-weight: 500;
+	font-size: 24rpx;
+	color: #999999;
+	line-height: 34rpx;
+	text-align: left;
+	font-style: normal;
+}
+
+.login-main {
+
+	background: url("../../static/images/payBack.png");
+	background-size: 100% 100%;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	/* justify-content: space-between; */
+	align-items: center;
+	height: 100vh;
+}
+
+.login-contont-button {
+	text-align: center;
+
+	.btn {
+		margin-top: 20px;
+		width: 95%;
+		height: 90rpx;
+		background: linear-gradient(152deg, #6F9DFD 0%, #1B71F2 100%);
+		border-radius: 44rpx;
+		color: #fff;
 	}
+}
 
-	.radioText {
-		font-weight: 500;
-		font-size: 24rpx;
-		color: #999999;
-		line-height: 34rpx;
-		text-align: left;
-		font-style: normal;
-	}
+.login-contont {
+	width: 100%;
+	height: 600rpx;
+	margin-top: 100rpx;
 
-	.login-main {
-		width: 100%;
-		display: flex;
-		flex-direction: column;
-		/* justify-content: space-between; */
-		align-items: center;
-		height: 100vh;
+	.uInput {
+		padding: 10px 0px;
+		border-bottom: 0.5px solid #97979740;
 	}
 
-	.login-contont-button {
+	.login-contont-info {
 		text-align: center;
 
-		.btn {
-			margin-top: 20px;
-			width: 95%;
-			height: 90rpx;
-			background: linear-gradient(275deg, #01cf6c 0%, #07e278 100%);
-			border-radius: 44rpx;
-			color: #fff;
-		}
-	}
-
-	.login-contont {
-		width: 90%;
-		height: 50%;
-
-		.uInput {
-			padding: 10px 0px;
-			border-bottom: 0.5px solid #97979740;
-		}
-
-		.login-contont-info {
-			text-align: center;
-
-			.text {
-				margin-top: 10px;
-				font-weight: 500;
-				font-size: 28rpx;
-				color: #999999;
-				line-height: 40rpx;
-				font-style: normal;
-			}
+		.text {
+			margin-top: 10px;
+			font-weight: 500;
+			font-size: 28rpx;
+			color: #999999;
+			line-height: 40rpx;
+			font-style: normal;
 		}
 	}
-
-	.radio {
-		text-align: center;
-		margin-top: 10px;
-	}
-
-	.login-main-content {
-		background: url("../../static/images/payBack.png") no-repeat;
-		background-size: 100% 100%;
-		text-align: center;
-		width: 100%;
-		height: 120px;
-
-		.img {
-			margin-top: 70px;
-			width: 80px;
-			height: 80px;
-			border-radius: 50%;
-		}
+}
+
+.radio {
+	text-align: center;
+	margin-top: 10px;
+}
+
+.login-main-content {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 9px 26px;
+
+	.img {
+		// margin-top: 70px;
+		margin-right: 20rpx;
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 50%;
 	}
-</style>
+}
+</style>