首页，更多列表，账单静态页面

pages.json

@@ -81,7 +81,7 @@
 				"navigationStyle": "custom"
 			}
 		},
-		
+
 		{
 			"path": "pages/house/stayCheck",
 			"style": {
@@ -117,11 +117,33 @@
 				"navigationStyle": "custom"
 			}
 		}
-		
+
 	],
 	"subPackages": [{
 			"root": "pagesHouse",
-			"pages": []
+			"pages": [{
+				"path": "home/index",
+				"style": {
+					"navigationBarTitleText": "首页",
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": true
+				}
+			},{
+				"path": "home/orderList",
+				"style": {
+					"navigationBarTitleText": "订单列表",
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": true
+				}
+			},
+			{
+				"path": "home/bill",
+				"style": {
+					"navigationBarTitleText": "交易账单",
+					"navigationStyle": "custom",
+					"enablePullDownRefresh": true
+				}
+			}]
 		},
 		{
 			"root": "pagesMy",
@@ -159,7 +181,7 @@
 						"navigationBarTitleText": "位置定位 ",
 						"enablePullDownRefresh": false
 					}
-				}, 
+				},
 				{
 					"path": "code/index",
 					"style": {

pages/login/index.vue

@@ -3,6 +3,7 @@
 		<view class="box">
 			<image src="https://i.ringzle.com/file/20240109/d6c4691423cf40c2bdf9210d389cdd1e.png"></image>
 			<view class="text">您好！欢迎使用<br>游嵊泗商家服务平台</view>
+			<view class="" @click="aa()">商户静态页面入口</view>
 			<view class="login">
 				<button open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">登录</button>
 			</view>
@@ -21,6 +22,11 @@
 			uni.clearStorageSync();
 		},
 		methods: {
+			aa(){
+				uni.reLaunch({
+					url:"/pagesHouse/home/index"
+				})
+			},
 			//获取手机号进行登录
 			decryptPhoneNumber(e){
 				if(e.detail.code) this.wxLogin(e.detail.code);

pagesHouse/home/bill.vue

@@ -0,0 +1,151 @@
+<template>
+	<view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
+		<c-nav-bar title="交易账单"></c-nav-bar>
+		<view class="query">
+			<u-icon @click="" name="calendar" label="自定义查询" labelPos="right" labelColor="#666" color="#666"
+				space="10px"></u-icon>
+		</view>
+		<view class="list" v-for="(item2,index2) in data" :key="index2" >
+			<view class="time">
+				<text>今日</text>
+				<text>{{new Date().Format('yyyy-MM-dd')}}</text>
+			</view>
+			<view class="money">
+				<view>
+					<text>收入金额</text>
+					<text class="in">+879.00</text>
+					<text>2笔</text>
+				</view>
+				<view>
+					<text>退款金额</text>
+					<text>879.00</text>
+					<text>2笔</text>
+				</view>
+			</view>
+			<view class="li" v-for="(item,index) in data" :key="index">
+				<view class="left">
+					<text>黄沙村渔家乐12客位</text>
+					<text>2024-02-23 09:12:34</text>
+				</view>
+				<view class="right">+12</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				h: uni.getSystemInfoSync().windowHeight - 87,
+				mt: uni.getSystemInfoSync().statusBarHeight + 44,
+				data: [4, 5],
+				name: '黄沙村渔家乐',
+				emg: 'https://i.ringzle.com/file/20240224/91173dde1cb44b139129e12ad4971f1d.png',
+				icons: ['https://i.ringzle.com/file/20240224/70ab9f9d1a144c95927dedc6e84bcce7.png',
+					'https://i.ringzle.com/file/20240224/3f990c250f444ac9a5d9f334f322c98e.png',
+					'https://i.ringzle.com/file/20240224/7ca1bfa6e348438e83edc5af0589f847.png'
+				]
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.page {
+		background: #F3F4F4;
+		padding-bottom: 40rpx;
+		box-sizing: border-box;
+
+		.query {
+			height: 100rpx;
+			display: flex;
+			align-items: center;
+			padding-left: 30rpx;
+			background-color: #fff;
+		}
+
+		.list {
+			width: calc(100% - 36rpx);
+			margin: 20rpx auto;
+			padding: 36rpx 24rpx;
+			background-color: #fff;
+			border-radius: 24rpx;
+
+			.time {
+				text {
+					&:first-child {
+						font-size: 40rpx;
+						font-weight: bold;
+						color: #666;
+						margin-right: 10rpx;
+					}
+				}
+
+				margin-bottom: 30rpx;
+			}
+
+			.money {
+				display: flex;
+				align-items: center;
+
+				&>view {
+					width: 50%;
+
+					text {
+						display: block;
+						font-weight: bold;
+
+						&:first-child {
+							color: #111;
+							font-size: 28rpx;
+						}
+
+						&:nth-child(2) {
+							font-size: 40rpx;
+							margin: 14rpx 0 16rpx;
+							color: ;
+						}
+
+						&:last-child {
+							color: #999;
+							font-size: 26rpx;
+							font-weight: inherit;
+						}
+					}
+
+					.in {
+						color: #FEA400;
+					}
+				}
+			}
+
+			.li {
+				display: flex;
+				justify-content: space-between;
+				padding: 30rpx 0;
+
+				.left {
+					text {
+						&:first-child {
+							font-size: 28rpx;
+							color: #111;
+							margin-bottom: 15rpx;
+						}
+
+						display: block;
+						color: #999;
+						font-size: 26rpx;
+					}
+				}
+
+				.right {
+					color: #FEA400;
+					font-size: 36rpx;
+					font-weight: bold;
+				}
+			}
+		}
+	}
+</style>

pagesHouse/home/index.vue

@@ -0,0 +1,310 @@
+<template>
+	<view class="page" :style="{'min-height':(h-th)+'px'}">
+		<u-navbar bgColor="transparent">
+			<view class="u-nav-slot" slot="left">
+				<text>{{name}}</text>
+			</view>
+		</u-navbar>
+		<view class="bg" :style="{'padding-top':(mt+10)+'px'}">
+			<view class="dataBox">
+				<view class="item">
+					<view>成交金额</view>
+					<view>￥<text>238</text></view>
+					<view>昨日¥900.78</view>
+				</view>
+				<view class="item">
+					<view>成交订单数</view>
+					<view>￥<text>238</text></view>
+					<view>昨日8</view>
+				</view>
+				<view class="item">
+					<view>退款金额</view>
+					<view>￥<text>238</text></view>
+					<view>昨日¥900.78</view>
+				</view>
+				<view class="item">
+					<view>退款订单数</view>
+					<view>￥<text>238</text></view>
+					<view>昨日8</view>
+				</view>
+				<view class="item">
+					<view>已购商品数量</view>
+					<view>￥<text>238</text></view>
+					<view>昨日78</view>
+				</view>
+			</view>
+			<view class="numberData">
+				<view>
+					<text>0</text>
+					<text>待付款</text>
+				</view>
+				<view>
+					<text>0</text>
+					<text>待使用</text>
+				</view>
+				<view>
+					<text>0</text>
+					<text>已完成</text>
+				</view>
+				<view>
+					<text>0</text>
+					<text>已取消</text>
+				</view>
+				<view>
+					<text>0</text>
+					<text>退款售后</text>
+				</view>
+			</view>
+			<view class="menus">
+				<view @click="toHref('/pagesHouse/home/bill')">
+					<image :src="icons[0]"></image>
+					<text>交易账单</text>
+				</view>
+				<view>
+					<image :src="icons[1]"></image>
+					<text>资金账单</text>
+				</view>
+				<view>
+					<image :src="icons[2]"></image>
+					<text>数据统计</text>
+				</view>
+			</view>
+		</view>
+		<view class="list">
+			<view class="tit">
+				<text>订单列表</text>
+				<text>{{new Date().Format('yyyy-MM-dd')}}</text>
+				<u-icon @click="more()" name="arrow-right" label="查看全部" labelPos="left" labelSize="13px" labelColor="#808080" color="#AAA"></u-icon>
+			</view>
+			<view class="li first">
+				<text>订单信息</text>
+				<text>销量</text>
+				<text>成交金额</text>
+			</view>
+			<view class="li" v-for="(item,index) in data" :key="index">
+				<view class="avatar">
+					<image :src="emg"></image>
+					<text>黄山村渔家乐12客位体验渔民出海</text>
+				</view>
+				<text>897</text>
+				<text>￥765</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				data: [1, 2, 3, 4, 5],
+				name: '黄沙村渔家乐',
+				emg: 'https://i.ringzle.com/file/20240224/91173dde1cb44b139129e12ad4971f1d.png',
+				icons: ['https://i.ringzle.com/file/20240224/70ab9f9d1a144c95927dedc6e84bcce7.png',
+					'https://i.ringzle.com/file/20240224/3f990c250f444ac9a5d9f334f322c98e.png',
+					'https://i.ringzle.com/file/20240224/7ca1bfa6e348438e83edc5af0589f847.png'
+				]
+			}
+		},
+		methods:{
+			toHref(url){
+				uni.redirectTo({
+					url:url
+				})
+			},
+			more(){
+				uni.navigateTo({
+					url:"/pagesHouse/home/orderList"
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.page {
+		background: #F3F4F4;
+		padding-bottom: 40rpx;
+		box-sizing: border-box;
+
+		.list {
+			width: calc(100% - 36rpx);
+			margin: 20rpx auto;
+			padding: 0 20rpx 6rpx;
+			background-color: #fff;
+			border-radius: 24rpx;
+
+			.tit {
+				padding: 40rpx 0;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				text {
+					&:first-child {
+						font-size: 32rpx;
+						color: #111;
+						font-weight: bold;
+					}
+
+					&:nth-child(2) {
+						margin-left: 17rpx;
+						color: #666666;
+						width: 100px;
+						flex: 1;
+					}
+				}
+			}
+
+			.li {
+				display: grid;
+				grid-template-columns: 60% 20% 20%;
+				align-items: center;
+				margin-bottom: 24rpx;
+				
+
+				text {
+					color: #333;
+					font-size: 26rpx;
+				}
+
+				.avatar {
+					display: flex;
+					align-items: center;
+					image {
+						width: 90rpx;
+						min-width: 90rpx;
+						height: 90rpx;
+						margin-right: 20rpx;
+					}
+
+					text {
+						width: 100px;
+						word-break: break-all;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+						font-size: 24rpx;
+						line-height: 33rpx;
+						/* 这里是超出几行省略 */
+						overflow: hidden;
+					}
+				}
+
+				&.first {
+					margin-bottom: 30rpx;
+
+					text {
+						color: #666;
+					}
+				}
+
+			}
+		}
+
+		.bg {
+			width: 100%;
+			height: auto;
+			padding: 0 18rpx;
+			background: url(https://i.ringzle.com/file/20240224/343febca7aa149c5aa0ee8c9365b2d3e.png) no-repeat;
+			background-size: 100% 100%;
+			box-sizing: border-box;
+
+
+
+			.menus {
+				display: flex;
+				justify-content: space-around;
+				height: 184rpx;
+				border-radius: 24rpx;
+				background-color: #fff;
+				color: #333;
+				align-items: center;
+
+
+				&>view {
+					image {
+						width: 64rpx;
+						height: 64rpx;
+						display: block;
+						margin: 0 auto 22rpx;
+					}
+
+					text {
+						font-size: 26rpx;
+					}
+				}
+			}
+
+			.numberData {
+				display: flex;
+				justify-content: space-around;
+				height: 150rpx;
+				border-radius: 24rpx;
+				background-color: #007A69;
+				color: #fff;
+				align-items: center;
+				margin: 20rpx 0;
+
+				&>view {
+
+					text {
+						display: block;
+						text-align: center;
+						font-size: 26rpx;
+						color: #F0F8F6;
+
+						&:first-child {
+							font-size: 36rpx;
+							color: #fff;
+							margin-bottom: 20rpx;
+						}
+					}
+				}
+			}
+
+			.dataBox {
+				padding: ;
+				display: grid;
+				/* 宽度平均分成4份 */
+				grid-template-columns: repeat(3, 1fr);
+				/* 高度平均分成3份 */
+				grid-template-rows: repeat(2, 1fr);
+				gap: 12rpx;
+
+				.item {
+					width: 230rpx;
+					height: 180rpx;
+					padding: 24rpx 0 0 18rpx;
+					border-radius: 16rpx;
+					background-color: rgba(255, 255, 255, .48);
+					color: #777;
+
+					&>view:nth-child(2) {
+						color: #111;
+
+						text {
+							font-size: 36rpx;
+							display: inline-block;
+							margin: 12rpx 0;
+							font-weight: bold;
+							margin-left: -4rpx;
+						}
+					}
+
+				}
+
+			}
+		}
+	}
+
+	/deep/.u-nav-slot {
+		&>text {
+			font-size: 36rpx;
+			font-family: PingFang SC, PingFang SC;
+			font-weight: bold;
+			color: #333;
+		}
+	}
+</style>

pagesHouse/home/orderList.vue

@@ -0,0 +1,122 @@
+<template>
+	<view class="page" :style="{'min-height':(h-th)+'px','padding-top':mt+'px'}">
+		<c-nav-bar title="订单列表"></c-nav-bar>
+		<view class="query">
+			<u-icon @click="" name="calendar" label="自定义查询" labelPos="right" labelColor="#666" color="#666" space="10px"></u-icon>
+		</view>
+		<view class="list">
+			<view class="time">
+				<text>{{new Date().Format('yyyy-MM-dd')}}</text>
+			</view>
+			<view class="content">
+				<view class="li first">
+					<text>订单信息</text>
+					<text>销量</text>
+					<text>成交金额</text>
+				</view>
+				<view class="li" v-for="(item,index) in data" :key="index">
+					<view class="avatar">
+						<image :src="emg"></image>
+						<text>黄山村渔家乐12客位体验渔民出海</text>
+					</view>
+					<text>897</text>
+					<text>￥765</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				h: uni.getSystemInfoSync().windowHeight - 87,
+				mt: uni.getSystemInfoSync().statusBarHeight + 44,
+				data: [1, 2, 3, 4, 5],
+				name: '黄沙村渔家乐',
+				emg: 'https://i.ringzle.com/file/20240224/91173dde1cb44b139129e12ad4971f1d.png',
+				icons: ['https://i.ringzle.com/file/20240224/70ab9f9d1a144c95927dedc6e84bcce7.png',
+					'https://i.ringzle.com/file/20240224/3f990c250f444ac9a5d9f334f322c98e.png',
+					'https://i.ringzle.com/file/20240224/7ca1bfa6e348438e83edc5af0589f847.png'
+				]
+			}
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.page {
+		background: #F3F4F4;
+		padding-bottom: 40rpx;
+		box-sizing: border-box;
+		.query{
+			height: 100rpx;
+			display: flex;
+			align-items: center;
+			padding-left: 30rpx;
+			background-color: #fff;
+		}
+		.list {
+			width: calc(100% - 36rpx);
+			margin: 20rpx auto;
+			padding: 0 0 6rpx;
+			.time {
+				margin: 24rpx 0;
+				color: #111;
+			}
+
+			.content {
+				background-color: #fff;
+				padding: 22rpx 20rpx 4rpx;
+				border-radius: 24rpx;
+				.li {
+					display: grid;
+					grid-template-columns: 60% 20% 20%;
+					align-items: center;
+					margin-bottom: 24rpx;
+
+
+					text {
+						color: #333;
+						font-size: 26rpx;
+					}
+
+					.avatar {
+						display: flex;
+						align-items: center;
+
+						image {
+							width: 90rpx;
+							min-width: 90rpx;
+							height: 90rpx;
+							margin-right: 20rpx;
+						}
+
+						text {
+							width: 100px;
+							word-break: break-all;
+							text-overflow: ellipsis;
+							display: -webkit-box;
+							-webkit-box-orient: vertical;
+							-webkit-line-clamp: 2;
+							font-size: 24rpx;
+							line-height: 33rpx;
+							/* 这里是超出几行省略 */
+							overflow: hidden;
+						}
+					}
+
+					&.first {
+						margin-bottom: 30rpx;
+
+						text {
+							color: #5A697C;
+						}
+					}
+
+				}
+			}
+		}
+	}
+</style>