首页

components/index_nav.vue

@@ -1,13 +1,16 @@
 <template>
-	<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
+	<!-- <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
 		:autoplay="false" interval="5000" duration="500">
 		<swiper-item class="item">
-			<view class="card" v-for="(item,index) in swiperList" :key="index" @click="jump(item)">
-				<image :src="item.url" mode="aspectFill"></image>
-				{{item.name}}
-			</view>
+			
 		</swiper-item>
-	</swiper>
+	</swiper> -->
+	<view class="item">
+		<view class="card" v-for="(item,index) in swiperList" :key="index" @click="jump(item)">
+			<image :src="item.url" mode="aspectFill"></image>
+			{{item.name}}
+		</view>
+	</view>
 </template>
 
 <script>
@@ -18,43 +21,43 @@
 				dotStyle: true,
 				swiperList: [{
 						name: '店铺设置',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/shop.png'
 					},
 					{
 						name: '平台活动',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/activity.png'
 					},
 					{
-						name: '优惠券管理',
-						url: '/static/avatar_girl.png'
+						name: '优惠券',
+						url: '/static/index/coupon.png'
 					},
 					{
 						name: '退款管理',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/refund.png'
 					},
 					{
 						name: '审核查询',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/audit.png'
 					},
 					{
 						name: '商品管理',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/product.png'
 					},
 					{
 						name: '提现管理',
-						url: '/static/avatar_girl.png'
+					url: '/static/index/withdraw.png'
 					},
 					{
 						name: '秒杀活动',
-						url: '/static/avatar_girl.png'
+					url: '/static/index/seckill.png'
 					},
 					{
 						name: '客户评价',
-						url: '/static/avatar_girl.png'
+					url: '/static/index/evaluate.png'
 					},
 					{
 						name: '全部服务',
-						url: '/static/avatar_girl.png'
+					url: '/static/index/all.png'
 					},
 				]
 			}
@@ -81,27 +84,33 @@
 
 <style scoped lang="scss">
 	.item {
+		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
-		justify-content: space-around;
+		justify-content: space-between;
+		
 	}
 
 	.card {
 		width: 20%;
+		height: 96rpx;
 		display: flex;
 		flex-direction: column;
 		flex-wrap: wrap;
 		justify-content: center;
 		align-items: center;
-
-		// font-size: 20rpx;
+		font-size: 24rpx;
 		image {
-			width: 80rpx;
-			height: 80rpx;
+			width: 56rpx;
+			height: 56rpx;
+			margin-bottom: 4rpx;
 		}
 	}
+	.card:nth-child(-n+5){
+		margin-bottom: 40rpx;
+	}
 
-	/ddep/.uni-swiper-wrapper {
+	/deep/.uni-swiper-wrapper {
 		-webkit-transform: translate3d(0px, 0, 0);
 		-moz-transform: translate3d(0px, 0, 0);
 		-o-transform: translate(0px, 0px);

pages/index/full.vue

@@ -3,7 +3,7 @@
 		<view class="head">
 			<span class="cuIcon-back" @click="back"></span>
 			<view class="case">
-				客户评价
+				全部服务
 			</view>
 		</view>
 		<view class="function">
@@ -48,74 +48,74 @@
 			return {
 				store: [{
 						name: '商品管理',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/product.png'
 					},
 					{
-						name: '优惠券管理',
-						url: '/static/avatar_girl.png'
+						name: '优惠券',
+						url: '/static/index/coupon.png'
 					},
 					{
 						name: '拼团活动',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/group.png'
 					},
 					{
 						name: '客户评价',
-						url: '/static/avatar_girl.png'
+					url: '/static/index/evaluate.png'
 					},
 					{
 						name: '秒杀活动',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/seckill.png'
 					},
 					{
 						name: '店铺设置',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/shop.png'
 					},
 					{
-						name: '客户预约',
-						url: '/static/avatar_girl.png'
+						name: '平台活动',
+						url: '/static/index/activity.png'
 					},
 					{
 						name: '审核查询',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/audit.png'
 					},
 				],
 				order: [{
 						name: '订单管理',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/indent.png'
 					},
 					{
 						name: '核销记录',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/history.png'
 					},
 					{
 						name: '退款管理',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/refund.png'
 					},
 					{
 						name: '扫码核销',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/coupon.png'
 					},
 				],
 				finance: [{
 						name: '提现管理',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/with.png'
 					},
 					{
 						name: '收款核销',
-						url: '/static/avatar_girl.png'
+						url: '/static/index/collection.png'
 					},
 				]
 			}
 		},
 		methods: {
-			storeFunc(item){
-				if(item.name == '商品管理'){
+			storeFunc(item) {
+				if (item.name == '商品管理') {
 					uni.navigateTo({
-						url:'/pages/product/index'
+						url: '/pages/product/index'
 					})
-				}else if(item.name == '客户评价'){
+				} else if (item.name == '客户评价') {
 					uni.navigateTo({
-						url:'/pages/evaluate/evaluate'
+						url: '/pages/evaluate/evaluate'
 					})
 				}
 			},
@@ -151,37 +151,51 @@
 	.service {
 		width: 100%;
 		height: 100%;
+		background: #F7F8FC;
+
 		.head {
 			width: 100%;
+			height: 112rpx;
 			padding: 20rpx;
 			display: flex;
 			align-items: center;
-			background-color: #fff;
+			background: linear-gradient(180deg, #D6E9FF 0%, #FFFFFF 100%);
 			position: relative;
-		
+
 			.cuIcon-back {
 				font-size: 40rpx;
 				margin-right: 40rpx;
 			}
-		
-			.step {
+
+			.case {
 				position: absolute;
-				right: 20rpx;
+				left: 50%;
+				transform: translateX(-50%);
+				font-size: 36rpx;
+				font-weight: 500;
 			}
 		}
 
 		.function {
 			background-color: #fff;
-			padding: 24rpx;
+			padding-top: 12rpx;
 			margin-bottom: 20rpx;
 
 			.title {
-				margin-bottom: 30rpx;
+				padding: 0px 40rpx;
+				width: 100%;
+				height: 53rpx;
+				border-bottom: 1px solid #eee;
+				font-size: 28rpx;
+				font-weight: 600;
 			}
 
 			.fun_box {
 				display: flex;
+				// justify-content: space-between;
 				flex-wrap: wrap;
+				// gap: 40rpx; 
+				padding: 36rpx 40rpx;
 
 				.item {
 					width: 20%;
@@ -189,10 +203,11 @@
 					align-items: center;
 					flex-direction: column;
 					margin-bottom: 20rpx;
-
+					// margin-right: 40rpx;
+					font-size: 24rpx;
 					image {
-						width: 80rpx;
-						height: 80rpx;
+						width: 56rpx;
+						height: 56rpx;
 						margin-bottom: 10rpx;
 					}
 				}

pages/index/index.vue

@@ -2,38 +2,39 @@
 	<view class="index">
 		<view class="head">
 			<view class="header">
-				<view class="image">
-					<image src="/static/login3.png" mode=""></image>
-				</view>
+				<image src="/static/index/address.png" mode=""></image>
 				{{name}}
+				<image src="/static/index/down.png" mode=""></image>
+			</view>
+
+		</view>
+		<view class="data_box">
+			<view class="title">
+				今日概况
+				<image src="/static/index/today.png" mode=""></image>
 			</view>
-			<view class="data_box">
-				<view class="title">
-					今日概况
+			<view class="data">
+				<view class="item">
+					<span>{{numberOrders}}</span>订单
 				</view>
-				<view class="data">
-					<view class="item">
-						<span>{{num}}</span>订单
-					</view>
-					<view class="item">
-						<span>{{num}}</span>权益
-					</view>
-					<view class="item">
-						<span>{{num}}</span>新客
-					</view>
+				<view class="item">
+					<span>{{income}}</span>收益
+				</view>
+				<view class="item">
+					<span>{{newCustomer}}</span>新客
 				</view>
 			</view>
 		</view>
 		<view class="service">
 			<view class="main">
 				<view class="scan" @click="scan">
-					<image src="/static/avatar_boy.png" mode=""></image>扫码核销
+					<image src="/static/index/scan.png" mode=""></image>扫码核销
 				</view>
 				<view class="scan" @click="scanRecord">
-					<image src="/static/avatar_boy.png" mode=""></image>核销记录
+					<image src="/static/index/record.png" mode=""></image>核销记录
 				</view>
 				<view class="scan">
-					<image src="/static/avatar_boy.png" mode=""></image>售卖订单
+					<image src="/static/index/order.png" mode=""></image>售卖订单
 				</view>
 			</view>
 			<view class="other">
@@ -42,12 +43,25 @@
 		</view>
 		<view class="message">
 			<view class="title">
-				<image src="/static/avatar_girl.png" mode=""></image> 实时消息
+				实时消息
 			</view>
 			<view class="msg">
 				<view class="item" v-for="(item,index) in msg" :key="index">
-					<span>{{item.type}}</span>
-					{{item.msg}}
+					<view class="type">
+						<view class="img">
+							<image src="/static/index/deal.png" mode="" v-if="item.type=='交易信息'"></image>
+							<image src="/static/index/verify.png" mode="" v-if="item.type=='产品核销'"></image>
+							<image src="/static/index/client.png" mode="" v-if="item.type=='客户评价'"></image>
+							<image src="/static/index/system.png" mode="" v-if="item.type=='系统消息'"></image>
+							{{item.type}}
+						</view>
+						<view class="time">
+							{{item.time}}
+						</view>
+					</view>
+					<view class="details">
+						{{item.msg}}
+					</view>
 				</view>
 			</view>
 		</view>
@@ -62,6 +76,9 @@
 		},
 		data() {
 			return {
+				numberOrders: '', //订单
+				newCustomer: '', //新客
+				income: '', //收益
 				name: '滨海广场店',
 				num: 222,
 				list: [{
@@ -81,16 +98,24 @@
 					},
 				],
 				msg: [{
-						type: '核销订单',
-						msg: '全程1700公里，到家门口的时候，他说转他300块油费吧。'
+						type: '交易信息',
+						msg: '12:20 客户张先生已申请预约到店服务，预约时间12月13日 13时00分，请查收并做好相应准备。',
+						time: '2025-12-13 13:00:00'
+					},
+					{
+						type: '产品核销',
+						msg: '12:20 客户张先生已申请预约到店服务，预约时间12月13日 13时00分，请查收并做好相应准备。',
+						time: '2025-12-13 13:00:00'
 					},
 					{
-						type: '核销订单',
-						msg: '全程1700公里，到家门口的时候，他说转他300块油费吧。'
+						type: '客户评价',
+						msg: '12:20 客户张先生已申请预约到店服务，预约时间12月13日 13时00分，请查收并做好相应准备。',
+						time: '2025-12-13 13:00:00'
 					},
 					{
-						type: '核销订单',
-						msg: '全程1700公里，到家门口的时候，他说转他300块油费吧。'
+						type: '系统消息',
+						msg: '12:20 客户张先生已申请预约到店服务，预约时间12月13日 13时00分，请查收并做好相应准备。',
+						time: '2025-12-13 13:00:00'
 					},
 				]
 			}
@@ -107,20 +132,23 @@
 			//扫码核销
 			scan() {
 				uni.navigateTo({
-					url:'/pages/scan/scan'
+					url: '/pages/scan/scan'
 				})
 			},
-			scanRecord(){
+			scanRecord() {
 				uni.navigateTo({
-					url:'/pages/scan/record'
+					url: '/pages/scan/record'
 				})
 			},
-			gettodayData(){
-					this.$http.get("/merchant/app/home/todayData",{
-						merchantId:''
-					}).then(res=> {
-						console.log(res)
-					})
+			gettodayData() {
+				this.$http.get("/merchant/app/home/todayData?merchantId=" + '111', {}).then(res => {
+					console.log(res)
+					if (res.data.code == 200) {
+						this.income = res.data.result.income
+						this.newCustomer = res.data.result.newCustomer
+						this.numberOrders = res.data.result.numberOrders
+					}
+				})
 			}
 		},
 		mounted() {
@@ -131,102 +159,174 @@
 
 <style scoped lang="scss">
 	.index {
-		width: 100%;
-		height: 100%;
+		width: 100vw;
+		height: 94vh;
+		background: #F7F8FC;
 
 		.head {
-			background: #fff;
+			width: 100%;
+			height: 272rpx;
+			background: linear-gradient(90deg, #E6FFFF 0%, #CEF7FF 40%, #A3CEFE 73%, #BCD6FF 100%), linear-gradient(#F7F8FC 0%, rgba(247, 248, 252, 0) 100%, );
 			padding: 20rpx;
 
 			.header {
 				width: 100%;
+				height: 112rpx;
 				display: flex;
 				align-items: center;
+				padding: 0px 24rpx;
+				font-size: 32rpx;
+				font-weight: 600;
 
-				.image {
-					width: 80rpx;
-					height: 80rpx;
-					border-radius: 50%;
-					overflow: hidden;
-					margin-right: 20rpx;
+				image {
+					width: 48rpx;
+					height: 48rpx;
+					margin-right: 10rpx;
+				}
+
+				image:nth-child(2) {
+					width: 24rpx;
+					height: 24rpx;
+					margin-left: 10rpx;
 				}
 			}
+		}
+
+		.data_box {
+			width: 676rpx;
+			height: 196rpx;
+			margin: 20rpx auto;
+			margin-top: -141rpx;
+			background: linear-gradient(0, #FFFFFF 0%, #FFF4EA 100%);
+			box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
+			border-radius: 16rpx 16rpx 16rpx 16rpx;
 
-			.data_box {
-				margin-top: 30rpx;
+			.title {
+				display: flex;
+				align-items: center;
+				width: 100%;
+				height: 53rpx;
+				font-size: 28rpx;
+				font-weight: 600;
+				border-bottom: 1px solid #eeeeee;
+				padding: 12rpx 16rpx;
 
-				.title {
-					margin-bottom: 30rpx;
+				image {
+					width: 40rpx;
+					height: 40rpx;
+					margin-left: 10rpx;
 				}
+			}
 
-				.data {
+			.data {
+				display: flex;
+				justify-content: space-around;
+				align-items: center;
+				padding: 20rpx 0px;
+
+				.item {
 					display: flex;
+					flex-direction: column;
 					justify-content: space-around;
 					align-items: center;
+					font-size: 24rpx;
+					line-height: 28rpx;
+					color: #999999;
 
-					.item {
-						display: flex;
-						flex-direction: column;
-						justify-content: space-around;
-						align-items: center;
-
-						span {
-							font-weight: 600;
-							margin-bottom: 20rpx;
-						}
+					span {
+						color: #333;
+						font-size: 48rpx;
+						font-weight: 600;
+						line-height: 56rpx;
 					}
 				}
 			}
 		}
 
 		.service {
-			margin-top: 24rpx;
-			background: #fff;
-			padding: 24rpx;
+			width: 676rpx;
+			// height: 468rpx;
+			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
+			box-shadow: 0px 2rpx 8rpx 0px rgba(214, 225, 237, 0.1);
+			border-radius: 16rpx;
+			padding: 24rpx 18rpx;
+			margin: 0 auto;
 
 			.main {
 				display: flex;
 				justify-content: space-around;
+				margin-bottom: 40rpx;
 
 				.scan {
 					display: flex;
 					flex-direction: column;
+					font-size: 26rpx;
+					font-weight: 600;
 
 					image {
-						width: 100rpx;
-						height: 100rpx;
-						margin-bottom: 20rpx;
+						width: 106rpx;
+						height: 106rpx;
+						margin-bottom: 4rpx;
 					}
 				}
 			}
 		}
 
 		.message {
-			width: 96%;
-			padding: 20rpx;
+			width: 676rpx;
+			padding: 20rpx 16rpx;
 			margin: 20rpx auto 0px;
-			background-color: #fff;
+			background: linear-gradient(0, #FFFFFF 0%, #E2EFFF 100%);
+			border-radius: 16rpx;
 
 			.title {
+				width: 100%;
+				height: 53rpx;
 				display: flex;
 				align-items: center;
-
-				image {
-					width: 40rpx;
-					height: 40rpx;
-					margin-right: 20rpx;
-				}
+				margin-bottom: 20rpx;
 			}
 
 			.msg {
+				width: 100%;
+
 				.item {
-					// width: 80%;
+					width: 100%;
+					// height: 126rpx;
 					// margin: 20rpx auto;
-					padding: 20rpx;
 					border-bottom: 1px solid #dddddd;
+					margin-bottom: 20rpx;
 
-					span {
-						font-weight: 600;
+					.type {
+						width: 100%;
+						height: 38rpx;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						margin-bottom: 8rpx;
+
+						.img {
+							font-size: 26rpx;
+							font-weight: 600;
+							display: flex;
+							align-items: center;
+
+							image {
+								width: 30rpx;
+								height: 30rpx;
+								margin-right: 8rpx;
+							}
+						}
+
+						.time {
+							font-size: 22rpx;
+							color: #999999;
+						}
+					}
+					.details{
+						font-size: 22rpx;
+						color: #999999;
+						margin-bottom: 16rpx;
 					}
 				}
 			}