扫码支付页面、商户、代理商户登录、商户、代理商户主页等页面跳转事件的添加及优化

agentApp/pages.json

@@ -62,14 +62,41 @@
 		    }
 		    
 		},
+		
 		{
 			"path" : "pages/payment/payment",
 			"style" : 
 			{
-				"navigationBarTitleText" : "",
-				"enablePullDownRefresh" : false
+				"navigationBarTitleText" : "扫码",
+				"navigationBarBackgroundColor": "#ededed",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		
+		{
+			"path" : "pages/merchant-login/index",
+			"style" :                                                                                    
+			{
+			    "navigationBarTitleText": "商户登录",
+				"navigationBarBackgroundColor": "#F52F3E",
+				"navigationBarTextStyle": "white"
+					
 			}
+			    
+		},
+		{
+			"path" : "pages/merchant-index/index",
+			"style" :                                                                                    
+			{
+			    "navigationBarTitleText": "商户主页",
+				"navigationBarBackgroundColor": "#F52F3E",
+				"navigationBarTextStyle": "white"
+					
+			}
+			    
 		}
+	
+		
 	],
 	
 	"globalStyle": {

agentApp/pages/allpages/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<view class="page">
 		<text>商户相关</text>
-		<button @click="goPage(0)">商户登录</button>
-		<button @click="goPage(0)">商户主页</button>
+		<button @click="goPage(4)">商户登录</button>
+		<button @click="goPage(5)">商户主页</button>
 		<text>用户相关</text>
 		<button @click="goPage(3)">用户支付页面</button>
 		<button @click="goPage(3)">用户支付页面2</button>
@@ -37,6 +37,16 @@
 						url: '/pages/payment/payment'
 					});
 					break;
+					case 4:
+					uni.navigateTo({
+						url: '/pages/merchant-login/index'
+					});
+					break;
+					case 5:
+					uni.navigateTo({
+						url: '/pages/merchant-index/index'
+					});
+					break;
 					default: 
 					uni.navigateTo({
 						url: '/pages/login/index'

agentApp/pages/merchant-index/index.vue

@@ -0,0 +1,315 @@
+<template>
+	<view class="app-container">
+		<view class="agent-content">
+			<view class="avatar-information">
+				<image style="width: 110rpx;height: 110rpx;" src="/static/index/head-sculpture.png" alt="" />
+				<view class="information-content">
+				    <view class="information-name">李姐烧烤</view>
+				    <view class="address-text">地址：广西南宁市江南区波尔多庄园2-109号商铺</view>
+				</view>
+			</view>
+			<view class="revenue-information">
+			    <view class="projected-revenue-content">
+			        <view class="projected-revenue-item">
+			        <view class="character-style">￥</view>
+			        <view class="character-price">394.00</view>
+			        </view>
+			        <view class="revenue-item-text">
+			        <view class="character-text">预计到账收益</view>
+			        <image class="help-icon" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/help-icon.png" />
+			        </view>
+			    </view>
+			    <view class="segmentation"></view>
+			    <view class="projected-revenue-content">
+			      <view class="projected-revenue-item">
+			      <view class="character-style">￥</view>
+			      <view class="character-price">5000.00</view>
+			      </view>
+			      <view class="revenue-item-text">
+			      <view class="character-text">总到账收益</view>
+			      <image class="help-icon" src="https://common-1257637852.cos.ap-guangzhou.myqcloud.com/paidui-pay/help-icon.png" />
+			      </view>
+			    </view>
+			</view>
+			  <view class="recent-orders-content">
+			    <view class="recent-orders-title">
+			      <image class="title-stlye"  src="/static/index/merchant-title-style.png" alt="" />
+			      <view class="title-text">最近订单</view>
+			    </view>
+			    <view class="ordering-information">
+			      <view class="order-number">订单编号 22398983498</view>
+			      <view class="ordering-information-item">
+			        <view class="ordering-pic">
+			          <image class="order-chart" src="/static/index/order-chart.png" alt=""  />
+			        </view>
+			        <view class="ordering-text">
+			          <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
+			          <view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
+			          <view class="order-time">订单时间：2023-10-24 20:39:56</view>
+			        </view>
+			      </view>
+			      <view class="order-status">
+			        <button class="refund-button">退款</button>
+			      </view>
+			      <view class="divider-style"></view>
+			    </view>
+			    <view class="ordering-information">
+			      <view class="order-number">订单编号 22398983498</view>
+			      <view class="ordering-information-item">
+			        <view class="ordering-pic">
+			          <image class="order-chart" src="/static/index/order-chart.png" alt=""  />
+			        </view>
+			        <view class="ordering-text">
+			          <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
+			          <view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
+			          <view class="order-time">订单时间：2023-10-24 20:39:56</view>
+			        </view>
+			      </view>
+			      <view class="order-status">
+			        <button class="refunded-button-style">已退款</button>
+			      </view>
+			      <view class="divider-style"></view>
+			    </view>
+				<view class="ordering-information">
+				  <view class="order-number">订单编号 22398983498</view>
+				  <view class="ordering-information-item">
+				    <view class="ordering-pic">
+				      <image class="order-chart" src="/static/index/order-chart.png" alt=""  />
+				    </view>
+				    <view class="ordering-text">
+				      <view class="ordering-text-title">李姐烧烤(普罗旺斯店)</view>
+				      <view class="amount-of-money">金额：<span class="price-style">￥450.00</span></view>
+				      <view class="order-time">订单时间：2023-10-24 20:39:56</view>
+				    </view>
+				  </view>
+				  <view class="order-status">
+				    <button class="refund-button">已退款</button>
+				  </view>
+				  <view class="divider-style"></view>
+				</view>
+			  
+			    </view>
+			  </view>
+	
+			</view>
+
+		</view>
+
+	</view>
+</template>
+
+
+<style lang="scss">
+.agent-content {
+	position: relative;
+	width: 100%;
+	height: 1500rpx;
+	padding-left: 30rpx;
+	padding-right: 30rpx;
+	background: url(../../static/index/merchant-index-bg.png) no-repeat top center;
+	background-size: 100% 100%;
+	box-sizing: border-box;
+	
+	.avatar-information{
+		display: flex;
+		justify-content: left;
+		align-items: center;
+		padding: 30rpx 0;
+		
+		.information-content{
+			margin-left: 30rpx;
+			
+			.information-name{
+				font-family: PingFangSC-Regular, sans-serif;
+				font-size: 32rpx;
+				color: #fff;
+				font-weight: bold;
+			}
+			.address-text {
+			    font-family: PingFangSC-Regular, sans-serif;
+			    font-size: 24rpx;
+			    color: #fff;
+			    margin-top: 15rpx;
+			}
+		}
+	}
+	.revenue-information{
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 200rpx;
+		background: url(../../static/index/income-bg.png) no-repeat center center;
+		background-size: cover;
+		padding: 0 60rpx;
+		
+		.projected-revenue-content {
+		    text-align: center;
+			.projected-revenue-item {
+			    display: flex;
+			    justify-content: left;
+			    align-items: baseline;
+				
+				.character-style {
+				    font-family: PingFangSC-Regular, sans-serif;
+				    font-size: 30rpx;
+				    color: #454545;
+				}
+				.character-price {
+				    font-family: "Din";
+				    font-size: 50rpx;
+				    color: #454545;
+				    font-weight: bold;
+				    margin-left: 10rpx;
+				}
+			}
+			.revenue-item-text {
+			    display: flex;
+			    justify-content: center;
+			    align-items: center;
+			    margin-top: 10rpx;
+			}
+			.character-text {
+			    font-family: PingFangSC-Regular, sans-serif;
+			    font-size: 28rpx;
+			    color: #454545;
+			    font-weight: bold;
+			}
+			image.help-icon {
+			    width: 30rpx;
+			    height: 30rpx;
+			    background-size: cover;
+			    margin-left: 10rpx;
+			}
+		}
+		.segmentation {
+		    width: 1rpx;
+		    height: 90rpx;
+		    background: #E6E3E3;
+		}
+		
+	}
+    .recent-orders-content {
+        background: #fff;
+        margin-top: -2rpx;
+		
+		.recent-orders-title {
+		    display: flex;
+		    justify-content: left;
+		    align-items: center;
+		    padding: 30rpx;
+			
+			image.title-stlye {
+			    width: 15rpx;
+			    height: 19rpx;
+			    background-size: cover;
+			    margin-right: 20rpx;
+			}
+			.title-text {
+			    font-family: PingFangSC-Regular, sans-serif;
+			    font-size: 30rpx;
+			    color: #454545;
+			    font-weight: bold;
+			}
+			
+		}
+		.ordering-information {
+		    padding-bottom: 30rpx;
+			
+			.order-number {
+			    font-family: PingFangSC-Regular, sans-serif;
+			    font-size: 26rpx;
+			    color: #454545;
+			    padding: 0 30rpx;
+			}
+			.ordering-information-item {
+			    display: flex;
+			    justify-content: left;
+			    align-items: center;
+			    padding: 30rpx;
+				
+				.ordering-pic {
+				    width: 120rpx;
+				    height: 120rpx;
+				    background-size: cover;
+				    border-radius: 15rpx;
+					
+					image.order-chart {
+					    width: 120rpx;
+					    height: 120rpx;
+					    background-size: cover;
+					    border-radius: 15rpx;
+					}
+				}
+				.ordering-text {
+				    margin-left: 30rpx;
+					
+					.ordering-text-title {
+					    font-family: PingFangSC-Regular, sans-serif;
+					    font-size: 30rpx;
+					    color: #454545;
+					}
+					.amount-of-money {
+					    font-family: PingFangSC-Regular, sans-serif;
+					    font-size: 24rpx;
+					    color: #999;
+					    padding: 10rpx 0;
+						
+						span.price-style {
+						    font-family: PingFangSC-Regular, sans-serif;
+						    font-size: 24rpx;
+						    color: #F52F3E;
+						}
+					}
+					.order-time {
+					    font-family: PingFangSC-Regular, sans-serif;
+					    font-size: 24rpx;
+					    color: #999;
+					}
+				}
+			}
+			.order-status {
+			    display: flex;
+			    justify-content: space-around;
+			    align-items: center;
+			    padding: 30rpx 0;
+			    border-top: 1rpx solid #eeeeee;
+				
+				button.refund-button {
+				    width: 120rpx;
+				    height: 48rpx;
+				    line-height: 44rpx;
+				    font-family: PingFangSC-Regular, sans-serif;
+				    font-size: 24rpx;
+				    color: #454545;
+				    border-color: #E5E5E5;
+				    background: #fff;
+				    border-radius: 100rpx;
+				    margin: 0;
+				    margin-left: 500rpx;
+				    border: 1rpx solid #E5E5E5;
+				}
+				
+				button.refunded-button-style {
+				    width: 130rpx;
+				    height: 48rpx;
+				    line-height: 44rpx;
+				    font-family: PingFangSC-Regular, sans-serif;
+				    font-size: 24rpx;
+				    color: #999 !important;
+				    background: #fff;
+				    border-radius: 100rpx;
+				    margin: 0;
+				    margin-left: 500rpx;
+				    border: 1rpx solid #E5E5E5;
+				}
+			}
+			.divider-style {
+			    width: 690rpx;
+			    height: 10rpx;
+			    background: #f7f7f7;
+			}
+		}
+		
+    }
+}
+</style>

agentApp/pages/merchant-login/index.vue

@@ -0,0 +1,148 @@
+<template>
+	<view class="app-container">
+		<view class="login-content">
+			<view class="login-font">
+				<image style="width: 364rpx;height: 200rpx;" src="/static/login/merchant-copy.png" alt="" />
+			</view>
+			<view class="login-main">
+				<view class="login-item">
+					<input type="text" class="log-phone" placeholder="请输入手机号"/>
+				</view>
+				<view class="login-item">
+					<input type="text" class="log-phone log-code" placeholder="请输入验证码"/>
+					<view class="getCode" @click="getCode">
+						获取验证码
+					</view>
+				</view>
+				<view class="login-btn">
+					<button size="default" type="default" @click="btnLogin"
+					style="color:#ffffff;backgroundColor:#F52F3E;borderColor:#F52F3EF;border-radius: 50rpx;height: 88rpx;line-height: 88rpx;" 
+						>登录</button>
+				</view>
+				<view class="login-sign">
+					<u-radio-group v-model="value">
+						<u-radio labelSize="13" size="20" label="我同意"></u-radio>
+					</u-radio-group>
+					<view class="log-link" @click="handlerApply">
+						《排队支付商户用户服务协议》
+					</view>
+					<view class="log-link" @click="handlerProtect">
+						《隐私保护协议》
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-toast ref="uToast"></u-toast>
+		<u-modal :show="show" @confirm="confirm" :title="title" :content='content'></u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				bgColor: '#bgColor',
+				value: 1,
+				show:false,
+				title:'',
+				content:''
+			};
+		},
+		methods: {
+			getCode() {
+				this.$refs.uToast.show({
+					message: '短信已发送'
+				})
+			},
+			handlerApply() {
+				this.show = true;
+				this.title = '排队支付代理用户服务协议';
+				this.content = '排队支付代理用户服务协议';
+			},
+			handlerProtect() {
+				this.show = true;
+				this.title = '隐私保护协议';
+				this.content = '隐私保护协议';
+			},
+			confirm() {
+				this.show = false;
+			},
+			btnLogin() {
+				uni.navigateTo({
+					url: '/pages/index/index'
+				});
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+.login-content {
+	width: 100%;
+	height: 1600rpx;
+	padding-left: 30rpx;
+	padding-right: 30rpx;
+	background: url(../../static/login/merchant-bg.png) no-repeat center center;
+	background-size: cover;
+	box-sizing: border-box;
+	
+	.login-font {
+		width: 364rpx;
+		height: 200rpx;
+		padding-top: 80rpx;
+	}
+	
+	.login-main {
+		margin-top: 120rpx;
+		
+		.login-item {
+			position: relative;
+			margin-top: 40rpx;
+			
+			.log-phone {
+				width: 100%;
+				height: 88rpx;
+				line-height: 88rpx;
+				padding-left: 50rpx;
+				border-radius: 44rpx;
+				border: none;
+				box-sizing: border-box;
+				background-color: #fff;
+				font-size: 16px;
+				color: #454545;
+			}
+			
+			.getCode {
+				position: absolute;
+				right: 50rpx;
+				top: 30rpx;
+				font-size: 12px;
+				color: #454545;
+				cursor: pointer;
+			}
+		}
+		
+		.login-btn {
+			margin-top: 80rpx;
+		}
+		
+		.login-sign {
+			display: flex;
+			justify-content: flex-start;
+			margin-top: 30rpx;
+			padding-left: 20rpx;
+			
+			.u-radio-group {
+				flex-grow: 0;
+				margin-right: 60rpx;
+			}
+			
+			.log-link {
+				height: 40rpx;
+				line-height: 40rpx;
+				font-size: 12px;
+			}
+		}
+	}
+}
+</style>

agentApp/pages/payment/payment.vue

@@ -1,7 +1,59 @@
 <template>
-	<view>
+	<view class="app-container" style="background-color: #ededed;">
+		<view class="pam-content">
+			<view class="pam-shop">
+				<view class="pam-mess">
+					<view class="picon">
+						<img src="../../static/page/people.png" style="width: 110rpx;height: 110rpx;" alt="" srcset="" />
+					</view>
+					<view class="pam-address">
+						<view class="pname">
+							付款给李姐烧烤(普罗旺斯店)
+						</view>
+						<view class="paddre">
+							广西南宁市江南区波尔多庄园2-109号商铺
+						</view>
+					</view>
+				</view>
+				<view class="pam-local">
+					<img src="../../static/page/location.png" style="width: 30rpx;height: 36rpx;" alt="" srcset="" />
+				</view>
 
 			</view>
+			<view class="pam-main">
+				<view class="pm-title">
+					付款金额(元)
+				</view>
+				<view class="pm-write">
+					<view class="font">
+						￥
+					</view>
+					<view class="num">
+						<input type="text" class="pr-num" placeholder="请输入金额" placeholder-style="color: #cfcfcf;" />
+					</view>
+				</view>
+				<view class="pfooter u-border-top">
+					向商家询问支付金额
+				</view>
+			</view>
+			<view class="pac-cont">
+				<view class="pac-left">
+					<view class="pcfont">
+						支付金额给商户
+					</view>
+					<view class="pcline">
+
+					</view>
+					<view class="pc-aplay">
+						支付宝支付
+					</view>
+				</view>
+				<view class="pac-link">
+					查看活动规则
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
@@ -17,6 +69,156 @@
 }
 </script>
 
-<style>
+<style lang="scss">
+.uni-page-body {
+	background: #ededed;
+}
+
+.pam-content {
+	padding-top: 100rpx;
+	padding-left: 30rpx;
+	padding-right: 30rpx;
+
+	.pam-shop {
+		display: flex;
+		justify-content: space-between;
+
+		.pam-mess {
+			display: flex;
+			height: 110rpx;
 
+			.picon {
+				width: 110rpx;
+				height: 110rpx;
+			}
+
+			.pam-address {
+				margin-left: 20rpx;
+
+				.pname {
+					margin-top: 15rpx;
+					color: #454545;
+					font-size: 16px;
+					line-height: 1.5;
+					font-weight: bold;
+				}
+
+				.paddre {
+					margin-top: 5rpx;
+					color: #666;
+					font-size: 12px;
+					line-height: 1.5;
+				}
+			}
+		}
+
+		.pam-local {
+			width: 30rpx;
+			height: 36rpx;
+			margin-top: 60rpx;
+		}
+	}
+
+	.pam-main {
+		margin-top: 97rpx;
+		padding-top: 30rpx;
+		height: 380rpx;
+		background: #fff;
+		box-sizing: border-box;
+
+		.pm-title {
+			padding-left: 40rpx;
+			color: #454545;
+			font-size: 15px;
+			line-height: 1.5;
+		}
+
+		.pfooter {
+			margin-top: 60rpx;
+			padding-left: 40rpx;
+			padding-top: 40rpx;
+			color: #666;
+			font-size: 12px;
+			line-height: 1.5;
+		}
+
+		.u-border-bottom,
+		.u-border-top {
+			border-color: #eee !important;
+		}
+
+		.pm-write {
+			display: flex;
+			height: 60rpx;
+			padding-left: 40rpx;
+			margin-top: 70rpx;
+
+			.font {
+				height: 60rpx;
+				line-height: 60rpx;
+				font-size: 15px;
+				color: #454545;
+				font-weight: bold;
+			}
+
+			.num {
+				margin-left: 20rpx;
+				line-height: 60rpx;
+				height: 60rpx;
+
+				.pr-num {
+					font-size: 30px;
+					line-height: 60rpx;
+					min-height: 60rpx;
+					height: 60rpx;
+					color: #454545;
+				}
+			}
+		}
+	}
+
+	.pac-cont {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 30rpx;
+
+		.pac-left {
+			display: flex;
+
+			.pcfont {
+				font-size: 12px;
+				color: #666;
+				height: 30rpx;
+				line-height: 30rpx;
+			}
+
+			.pcline {
+				height: 28rpx;
+				width: 2rpx;
+				margin-left: 20rpx;
+				background: #ccc;
+			}
+
+			.pc-aplay {
+				padding-left: 40rpx;
+				margin-left: 20rpx;
+				font-size: 12px;
+				height: 30rpx;
+				line-height: 30rpx;
+				color: #999;
+				background: url(../../static/page/aplay.png) no-repeat left center;
+				background-size: 30rpx 30rpx;
+			}
+		}
+
+		.pac-link {
+			color: #1783FF;
+			font-size: 12px;
+			height: 30rpx;
+			line-height: 30rpx;
+			cursor: pointer;
+		}
+	}
+}
 </style>