静态页面

App.vue

@@ -38,7 +38,7 @@
 </script>
 
 <style lang="scss">
-	// @import '@/static/icon/iconfont.css';
+	@import '@/static/icon/iconfont.css';
 	@import '@/static/style/common.scss';
 
 	/*每个页面公共css */

apis/login.js

@@ -0,0 +1,10 @@
+import request from "@/request"
+import config from "@/config"
+
+// 获取用户信息
+export const getUserInfo = (data) => {
+	return request.get({
+		url: '/apiCustomer/giftCardUser/getUserInfo',
+		data: data
+	})
+}

pages.json

@@ -14,21 +14,24 @@
 			"path": "pages/statistics/index",
 			"style": {
 				"navigationBarTitleText": "统计",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/news/index",
 			"style": {
 				"navigationBarTitleText": "消息",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path": "pages/my/index",
 			"style": {
 				"navigationBarTitleText": "我的",
-				"enablePullDownRefresh": false
+				"enablePullDownRefresh": false,
+				"navigationStyle": "custom"
 			}
 		}
 	],
@@ -40,6 +43,39 @@
 				"navigationStyle": "custom",
 				"navigationBarTitleText": "确认充值"
 			}
+		},{
+			"path": "mallSuccess/index",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "充值成功"
+			}
+		}]
+	},{
+		"root": "pages/login",
+		"pages": [{
+			"path": "index",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "登录"
+			}
+		}]
+	},{
+		"root": "pages/system",
+		"pages": [{
+			"path": "index",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "系统消息"
+			}
+		}]
+	},{
+		"root": "pages/accountRecharge",
+		"pages": [{
+			"path": "index",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTitleText": "账户充值记录"
+			}
 		}]
 	}],
 	"globalStyle": {
@@ -49,29 +85,29 @@
 		"backgroundColor": "#F8F8F8"
 	},
 	"tabBar": {
-		"color": "#7A7E83",
-		"selectedColor": "#3cc51f",
+		"color": "#86899B",
+		"selectedColor": "#FB692A",
 		"borderStyle": "black",
 		"backgroundColor": "#ffffff",
 		"list": [{
 			"pagePath": "pages/gallery/index",
-			"iconPath": "",
-			"selectedIconPath": "",
+			"iconPath": "/static/image/ic_home.png",
+			"selectedIconPath": "/static/image/ic_home_selected.png",
 			"text": "工作台"
 		}, {
 			"pagePath": "pages/statistics/index",
-			"iconPath": "",
-			"selectedIconPath": "",
+			"iconPath": "/static/image/ic_dingdan.png",
+			"selectedIconPath": "/static/image/ic_dingdan_selected.png",
 			"text": "统计"
 		}, {
 			"pagePath": "pages/news/index",
-			"iconPath": "",
-			"selectedIconPath": "",
+			"iconPath": "/static/image/ic_product.png",
+			"selectedIconPath": "/static/image/ic_product_selected.png",
 			"text": "消息"
 		}, {
 			"pagePath": "pages/my/index",
-			"iconPath": "",
-			"selectedIconPath": "",
+			"iconPath": "/static/image/ic_zhidan.png",
+			"selectedIconPath": "/static/image/ic_zhidan_selected.png",
 			"text": "我的"
 		}]
 	},

pages/accountRecharge/index.vue

@@ -0,0 +1,110 @@
+<template>
+    <view class="account">
+        <view class="search flex aic">
+            <u-search placeholder="请输入充值账户" searchIconColor="#2A200A" placeholderColor="#959AA3" bgColor="#F2F3F7" v-model="searchValue" :showAction="false" maxlength="30" height="60rpx" @search="searchMobile"></u-search>
+            <view class="date flex aic">
+                <text>日期</text>
+                <re-icon name="icon-xiala" :customStyle="{ fontSize: '10rpx',marginLeft:'10rpx'}"></re-icon>
+            </view>
+        </view>
+        <view class="tabulation">
+            <mescroll-body height="100%" ref="mescrollRef" bottom="200" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
+                <view class="list">
+                    <view class="list-item">
+                        <view class="top flex aic jcsb">
+                            <text class="word">充值游戏币</text>
+                            <text class="money">+3456</text>
+                        </view>
+                        <view class="btom flex-column">
+                            <text>充值账户：178 8394 2382</text>
+                            <text>充值账户：178 8394 2382</text>
+                            <text>充值账户：178 8394 2382</text>
+                            <text>充值账户：178 8394 2382</text>
+                            <text>充值账户：178 8394 2382</text>
+                            <text>充值账户：178 8394 2382</text>
+                        </view>
+                    </view>
+                </view>
+                <no-data :statusType="2" :top="0" tipsText="暂无数据"></no-data>
+            </mescroll-body>
+        </view>
+    </view>
+</template>
+<script>
+import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js"
+import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue'
+export default {
+    components:{
+        MescrollBody
+    },
+    data(){
+        return{
+            searchValue:''
+        }
+    },
+    mixins: [MescrollMixin],
+
+}
+</script>
+<style lang="scss" scoped>
+    .account{
+        height: 100%;
+        background: #fff;
+        display: flex;
+        flex-direction: column;
+        .search{
+            padding: 12rpx 24rpx;
+            .date{
+                width: 112rpx;
+                height: 48rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            
+        }
+        .tabulation{
+            // flex-grow: 1;
+            width: 100%;
+            height: calc(100% - 43.6rpx);
+            overflow: hidden;
+            background: linear-gradient(360deg,#FFFFFF 60%, #FF911A 100%);
+            padding: 24rpx 20rpx;
+            .list{
+                height: 100%;
+                background: #FFFFFF;
+                border-radius: 16rpx;
+                padding: 32rpx;
+                .list-item{
+                    margin-bottom: 56rpx;
+                    .top{
+                        font-size: 32rpx;
+                        .word{
+                            font-weight: 500;
+                            color: #000000;
+                        }
+                        .money{
+                            font-weight: bold;
+                            color: #EF3B24;
+                        }
+                    }
+                    .btom{
+                        margin-top: 24rpx;
+                        text{
+                            font-weight: 400;
+                            font-size: 28rpx;
+                            color: #7a7a7a;
+                            margin-bottom: 16rpx;
+                        }
+                        text:nth-last-child(1){
+                            margin-bottom: 0;
+                        }
+                    }
+                }
+                .list-item:nth-last-child(1){
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+</style>

pages/gallery/index.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="gallery" :style="{background:'url('+ bannerImage +')#ffffff'}">
-		<view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" noPlaceholder></nav-bar></view>
+		<view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
 		<view class="logo"><re-image imgSrc="/retail/main/img_logo.png" width="300" height="56"></re-image></view>
 		<view class="content">
 			<view class="news">
@@ -32,12 +32,12 @@
 					</view>
 				</view>
 			</view>
-			<div class="list-title-wrapper flex jcsb aic">
-				<div class="list-title flex aic">
+			<view class="list-title-wrapper flex jcsb aic">
+				<view class="list-title flex aic">
 					<span class="title-line"></span>
 					套餐充值
-				</div>
-				<div class="timer">
+				</view>
+				<view class="timer">
 					赠送游戏币倒计时
 					<span>
 						<span class="lb" id="day">2</span>
@@ -47,11 +47,50 @@
 						<span class="lb" id="mins">56</span>
 						分
 					</span>
-				</div>
-			</div>
-			<div class="list-wrapper"></div>
+				</view>
+			</view>
+			<view class="list-wrapper">
+				<view class="list-item">
+					<view class="item-wrapper">
+						<view class="sub-title ${item.subTitle ? 'show' : ''}">2</view>
+						<view class="big">
+							<view class="">
+								<view class="flex jcsb aic">
+									<view>
+										<span class="strong">122</span><span class="strong-text">游戏币</span>
+									</view>
+									<view>
+										<span class="symbol">¥</span>
+										<span class="list-price">23</span>
+									</view>
+								</view>
+								<view class="original">¥344</view>
+							</view>
+							<view class="msg flex jcsb aic">
+								<view class="msg-left">
+									<span class="zeng ">赠</span>
+									<span class="og"><span class="num">233</span>游戏币</span>
+									<!-- <span class="og">
+										<span class="">+</span>
+										<span class="">2M</span>
+									</span> -->
+									<span class="og red">
+										<span class=""
+											style="margin-left:2px">+</span>
+										<view class="red-box">
+											<re-image width="30" imgSrc="/retail/main/ic_putonghb.png"></re-image>
+											<span>红包机会x2</span>
+										</view>
+									</span>
+								</view>
+								<span class="time-text">23天有效</span>
+								<view class="pay-btn" @click="toMall">去充值</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
 		</view>
-
 	</view>
 </template>
 
@@ -72,18 +111,22 @@
 			return {
 				bannerImage: defaultConfig.ossImgUrl + '/retail/main/img_bgtop.png',
 				title: 'Hello',
-				navBarHeight:uni.getStorageSync('navBarHeight')
+				navBarHeight: uni.getStorageSync('navBarHeight')
 			}
 		},
 		onLoad() {
 
 		},
-		
-		methods: {
 
+		methods: {
+			toMall(){
+				uni.navigateTo({
+					url: '/pages/mall/mallRecharge/index'
+				})
+			}
 		},
 		mounted() {
-			
+
 		},
 	}
 </script>
@@ -104,7 +147,7 @@
 		}
 
 		.content {
-			padding: 32rpx;
+			padding: 0 32rpx;
 
 			.news {
 				background: #FFFFFF;
@@ -171,8 +214,10 @@
 				}
 
 			}
+
 			.list-title-wrapper {
 				margin-top: 48rpx;
+
 				.list-title {
 					color: #363531;
 					font-weight: bold;
@@ -186,9 +231,11 @@
 						margin-right: 20rpx;
 					}
 				}
-				.timer{
+
+				.timer {
 					font-size: 24rpx;
-					.lb{
+
+					.lb {
 						display: inline-block;
 						vertical-align: top;
 						width: 32rpx;
@@ -199,6 +246,163 @@
 						line-height: 32rpx;
 						border-radius: 6rpx;
 						margin: 0 2rpx;
+						font-weight: bold;
+					}
+				}
+			}
+
+			.list-wrapper {
+				margin-top: 40rpx;
+
+				.list-item {
+					margin-bottom: 20rpx;
+					position: relative;
+
+					.pay-btn {
+						background: linear-gradient(140deg, #FF8500 0%, #FFA600 100%);
+						border-radius: 48rpx;
+						color: #fff;
+						width: 168rpx;
+						height: 64rpx;
+						text-align: center;
+						font-weight: 600;
+						font-size: 28rpx;
+						color: #FFFFFF;
+						line-height: 64rpx;
+					}
+
+					.item-wrapper {
+						background-color: #F6F6F6;
+						border: 4rpx solid #F6F6F6;
+						border-radius: 24rpx;
+						padding: 40rpx 40rpx 24rpx;
+						position: relative;
+						border: 2rpx solid #FFB74E;
+
+						.sub-title {
+							position: absolute;
+							z-index: 10;
+							left: -2rpx;
+							top: -2rpx;
+							padding: 6rpx 16rpx;
+							font-size: 24rpx;
+							color: #fff;
+							line-height: 11rpx;
+							background: #FF6400;
+							border-radius: 24rpx 0rpx 24rpx 0rpx;
+						}
+
+
+						.big {
+							font-size: 24rpx;
+							color: #281A13;
+							font-weight: bold;
+
+							.symbol {
+								color: #2C2B28;
+								font-weight: bold;
+								font-size: 32rpx;
+							}
+
+							.list-price {
+								color: #2C2B28;
+								font-weight: bold;
+								font-size: 48rpx;
+							}
+
+							.strong {
+								font-size: 48rpx;
+								line-height: 58rpx;
+								color: #2C2B28;
+								font-weight: bold;
+								margin-right: 8rpx;
+							}
+							.original{
+								font-weight: bold;
+								font-size: 20rpx;
+								color: #898989;
+								line-height: 24rpx;
+								text-decoration-line: line-through;
+								text-align: right;
+							}
+
+							.strong-text {
+								font-size: 24rpx;
+								color: #564C47;
+								line-height: 28rpx;
+								font-weight: normal;
+							}
+
+							.msg {
+								margin-top: 4rpx;
+								font-size: 32rpx;
+								color: #2C2B28;
+
+								.msg-left {
+									width: calc(100% - 150rpx);
+									display: flex;
+									align-items: center;
+									white-space: nowrap;
+									overflow: hidden;
+									font-weight: normal;
+									font-size: 24rpx;
+									.num{
+
+									}
+								}
+
+								.og {
+									color: #FF7C00;
+									font-weight: bold;
+								}
+
+								.red {
+									display: flex;
+									align-items: center;
+
+									.red-box {
+										display: flex;
+										align-items: center;
+									}
+								}
+
+								.time-text {
+									position: absolute;
+									right: 0;
+									top: 0;
+									font-size: 24rpx;
+									color: #564C47;
+									// font-weight: normal;
+									z-index: 200;
+									background: #E5F1FF;
+									border-radius: 0rpx 20rpx 0rpx 20rpx;
+									padding: 6rpx 14rpx;
+								}
+
+								.zeng {
+									flex-shrink: 0;
+									object-fit: contain;
+									display: inline-block;
+									background-color: #5CB020;
+									width: 40rpx;
+									height: 32rpx;
+									line-height: 32rpx;
+									color: #fff;
+									font-size: 24rpx;
+									border-radius: 8rpx;
+									text-align: center;
+									margin-right: 6rpx;
+									// font-weight: normal;
+								}
+							}
+						}
+
+						.sm {
+							font-size: 28rpx;
+							margin-top: 16rpx;
+							color: #74706D;
+							padding-right: 20rpx;
+						}
 					}
 				}
 			}

pages/login/index.vue

@@ -0,0 +1,176 @@
+<template>
+    <view class="login" :style="{background:'url('+ bannerImage +')'}">
+        <view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
+        <view class="logo"><re-image imgSrc="/retail/login/img_logo_login.png" width="442" height="130"></re-image></view>
+        <view class="content">
+            <view class="form">
+                <view class="input-wrapper">
+                    <view class="label">手机号码</view>
+                    <view class="input-box flex aic"><u-input maxlength="11"  v-model="phone" fontSize="32rpx"
+                        border="none" type="text" placeholder="请输入手机号" ></u-input></view>
+                </view>
+                <view class="input-wrapper">
+                    <view class="label">验证码</view>
+                    <view class="input-box flex aic">
+                        <u-input maxlength="6" v-model="code" fontSize="30rpx" border="none" type="text" placeholder="请输入验证码"></u-input>
+                        <u-code change-text="重新获取(Xs)" startText="获取验证码" endText="重新获取" @end="end" @start="start" ref="uCode"
+                            @change="codeChange"></u-code>
+                        <view :class="{'getting': getCoding}" class="get-code-btn" @tap="getCode">{{tips}}</view>
+                    </view>
+                </view>
+				<view class="btn">
+					<u-button>登录</u-button>
+				</view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+	import {
+		toRpx
+	} from '@/utils/calculate.js'
+	import defaultConfig from '@/config/default.js'
+    import {
+		navigateTo,
+		phoneValidate,
+		filterPhone,
+		openFilterPhone
+	} from '@/utils/utils.js'
+	export default {
+		components: {},
+		computed: {
+			statusBarHeight() {
+				return this.$store.state.info.systemInfo?.statusBarHeight
+			},
+		},
+		data() {
+			return {
+				bannerImage: defaultConfig.ossImgUrl + '/retail/login/login-bg.png',
+				navBarHeight: uni.getStorageSync('navBarHeight'),
+                phone:'',
+                code:'',
+                tips:'',
+				getCoding: false,
+			}
+		},
+		onLoad() {
+
+		},
+        computed:{
+            canClick() {
+				return this.phone.length && this.code.length
+			},
+			ftPhone() {
+				return (v) => {
+					return filterPhone(v)
+				}
+			}
+        },
+		methods: {
+            bindPhone() {
+				console.log('绑定成功')
+			},
+			codeChange(text) {
+				this.tips = text;
+			},
+			getCode() {
+				if (!this.phone) {
+					uni.showToast({
+						title: '请先输入手机号',
+						icon: 'none'
+					})
+					return
+				}
+				if (!phoneValidate(openFilterPhone(this.phone))) {
+					uni.showToast({
+						title: '手机号格式不正确',
+						icon: 'none'
+					})
+					return
+				}
+				if (this.$refs.uCode.canGetCode) {
+					// 模拟向后端请求验证码
+					uni.showLoading({
+						title: '正在获取验证码',
+						icon: 'none'
+					})
+					setTimeout(() => {
+						uni.hideLoading();
+						// 这里此提示会被this.start()方法中的提示覆盖
+						uni.$u.toast('验证码已发送');
+						// 通知验证码组件内部开始倒计时
+						this.$refs.uCode.start();
+					}, 1000);
+				}
+			},
+			end() {
+				this.getCoding = false
+			},
+			start() {
+				this.getCoding = true
+			}
+		},
+		mounted() {
+
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.login {
+		background-repeat: no-repeat !important;
+		background-size: 100% auto !important;
+		width: 100%;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		flex-direction: column;
+        .logo{
+            padding: 48rpx 0 0 48rpx;
+        }
+        .content{
+            flex-grow: 1;
+            padding: 58rpx 32rpx 92rpx;
+            .form{
+				height: 100%;
+                background: #fff;
+                padding: 40rpx 32rpx;
+                border-radius: 24rpx;
+                .input-wrapper {
+                    background:#fff;
+                    padding-bottom: 22rpx;
+                    font-size: 36rpx;
+                    margin-bottom: 50rpx;
+                    .label{
+                        font-weight: 500;
+                        font-size: 32rpx;
+                        color: #171717;
+						margin-bottom: 20rpx;
+                    }
+					.input-box{
+						color: #171717;
+						height: 84rpx;
+						background: #F3F7FF;
+						border-radius: 42rpx;
+						padding: 0 32rpx;
+						font-size: 28rpx
+					}
+                    .icon-pad {
+                        padding: 10rpx;
+                    }
+                    
+                }
+				.btn{
+					margin-top: 127rpx;
+					button{
+						color: #fff;
+						background: linear-gradient( 140deg, #FF8500 0%, #FFA600 100%);
+						border-radius: 48rpx;
+					}
+				}
+            }
+            
+        }
+    }
+</style>

pages/mall/mallRecharge/index.vue

@@ -3,7 +3,11 @@
 	<view class="mall-recharge">
 		<view class="white-box">
 			<view class="account-text">充值账号</view>
-			<u-input class="account-name" v-model="phone" type="text" placeholder="请输入手机号" :customStyle="{ padding: '0'}" clearable></u-input>
+			<u-input class="account-name" v-model="phone" type="text" maxlength="11" placeholder="请输入手机号" fontSize="56rpx" :customStyle="{ padding: '0'}" clearable></u-input>
+		</view>
+		<view v-if="phone" class="tip flex aic">
+			<re-image imgSrc="/retail/mall/ic_tip.png" width="28" height="28"></re-image>
+			<text>请确认账户是否正确无误</text>
 		</view>
 		<view class="list-title flex aic">
 			<span class="title-line"></span>
@@ -18,7 +22,7 @@
 					</view>
 					<view>
 						<span class="price-text">¥</span>
-						<span class="price-num"></span>
+						<span class="price-num">23</span>
 					</view>
 				</view>
 				<view class="info-msg flex jcsb aic">
@@ -133,10 +137,19 @@
 			}
 
 			.account-name {
-				// color: #2C2B28;
-				// font-weight: bold;
-				// font-size: 28rpx;
-				// line-height: 32rpx;
+				color: #2C2B28;
+				font-weight: bold;
+				font-size: 56rpx;
+				line-height: 32rpx;
+			}
+		}
+		.tip{
+			font-size: 24rpx;
+			color: #8B8B8B;
+			margin-top: 16rpx;
+			margin-left: 46rpx;
+			text{
+				margin-left: 6rpx;
 			}
 		}
 		.list-title {
@@ -169,6 +182,7 @@
 
 				.yxb-num {
 					font-size: 48rpx;
+					margin-right: 8rpx;
 				}
 
 				.yxb-text {

pages/mall/mallSuccess/index.vue

@@ -0,0 +1,102 @@
+<template>
+    <view class="success">
+        <!-- <view class="bgc"></view> -->
+        <view class="content">
+                    <view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
+
+            <view class="sur flex-column aic">
+                <re-image imgSrc="/retail/mall/img_quancoin.png" width="240" height="240"></re-image>
+                <view class="texts flex-column">
+                    <text class="suce-text">充值成功</text>
+                    <text>支付金额：</text>
+                    <text>购买游戏币：</text>
+                </view>
+                <view class="btns">
+                    <u-button class="order" @click="toOrder">查看订单</u-button>
+                    <u-button class="home" @click="toHome">返回首页</u-button>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    },
+    methods: {
+        // 返回订单
+        toOrder(){
+            uni.navigateTo({
+                url: '/pages/mall/mallRecharge/index'
+            })
+        },
+        toHome(){
+            uni.switchTab({
+                url: '/pages/gallery/index'
+            })
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+.success{
+    width: 100%;
+    position: relative;
+    .bgc{
+        // position: absolute;
+       
+    }
+    .content{
+        // z-index: 9;
+         width: 100%;
+        height: 544rpx;
+        background: linear-gradient( 180deg, #FFF4D6 0%, rgba(255,251,193,0.62) 40%, rgba(255,221,202,0.32) 100%);
+        padding: 32rpx;
+        .sur{
+            width: 100%;
+            padding: 56rpx 0 64rpx;
+            background: #FFFFFF;
+            border-radius: 24rpx;
+            .texts{
+                margin-top: 48rpx;
+                font-weight: 500;
+                font-size: 28rpx;
+                color: #2C2B28;
+                .suce-text{
+                    font-weight: bold;
+                    font-size: 40rpx;
+                    text-align: center;
+                    margin-bottom: 32rpx;
+                }
+            }
+            .btns{
+                margin-top: 64rpx;
+                button{
+                    width: 414rpx;
+                    height: 96rpx;
+                }
+                .order{
+                    background: linear-gradient( 140deg, #FF8500 0%, #FFA600 100%);
+                    border-radius: 48rpx;
+                    font-weight: bold;
+                    font-size: 40rpx;
+                    color: #FFFFFF;
+                    margin-bottom: 32rpx;
+                }
+                .home{
+                    background: #FFFFFF;
+                    border-radius: 48rpx;
+                    border: 2rpx solid #9FA2B2;
+                    font-weight: 500;
+                    font-size: 40rpx;
+                    color: #2C2B28;
+                }
+            }
+        }
+    }
+}
+    
+</style>

pages/my/index.vue

@@ -1,9 +1,192 @@
 <template>
-	<div>我的</div>
+	<view class="my" :style="{background:'url('+ bannerImage +')'}">
+		<view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
+		<view class="content">
+			<view class="news flex jcsb">
+				<view class="info flex">
+					<view style="width:128rpx;height:128rpx"><image class="img" :src="avatar" @tap="chooseImage"></image></view>
+					<view class="info-text flex-column jcsa">
+						<view class="info-top flex aic">
+							<view class="name">王安安</view>
+							<view class="level flex aic">
+								<re-image imgSrc="/retail/main/ic_chuji.png" width="54" height="60"></re-image>
+								<view class="level-text">初级</view>
+							</view>
+						</view>
+						<view class="phone">13630639549</view>
+					</view>
+				</view>
+				<re-image imgSrc="/retail/my/ic_more.png" width="24" height="24" class="more"></re-image>
+			</view>
+			<view class="menu">
+				<view class="menu-item item-one">
+					<view class="item-left flex aic jcsb" @click="toAccount">
+						<view class="flex aic">
+							<re-image imgSrc="/retail/my/ic_jilu.png" width="48" height="48"></re-image>
+							<text>账户充值记录</text>
+						</view>
+						<re-image imgSrc="/retail/my/ic_more.png" width="24" height="24"></re-image>
+					</view>
+				</view>
+				<view class="menu-item">
+					<view class="item-left flex aic jcsb">
+						<view class="flex aic">
+							<re-image imgSrc="/retail/my/ic_kefu.png" width="48" height="48"></re-image>
+							<text>联系客服</text>
+						</view>
+						<re-image imgSrc="/retail/my/ic_more.png" width="24" height="24"></re-image>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
+	import {
+		toRpx
+	} from '@/utils/calculate.js'
+	import defaultConfig from '@/config/default.js'
+
+	export default {
+		components: {},
+		computed: {
+			statusBarHeight() {
+				return this.$store.state.info.systemInfo?.statusBarHeight
+			},
+		},
+		data() {
+			return {
+				bannerImage: defaultConfig.ossImgUrl + '/retail/my/img_myBgc.png',
+				avatar: '../../static/image/img_touxiang.png',
+				navBarHeight: uni.getStorageSync('navBarHeight')
+			}
+		},
+		onLoad() {
+
+		},
+
+		methods: {
+			toAccount(){
+				uni.navigateTo({
+					url: '/pages/accountRecharge/index'
+				})
+			},
+			chooseImage() {
+				var that = this;
+				uni.chooseImage({
+					count: 1, // 默认9
+					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+					success: function (res) {
+						// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
+						that.avatar  =  res.tempFilePaths[0];
+					}
+				});
+			},
+		},
+		mounted() {
+
+		},
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.my {
+		background-repeat: no-repeat !important;
+		background-size: contain !important;
+		// background-position: top;
+		width: 100%;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		.content{
+			padding: 0 32rpx;
+			.news {
+				.info {
+					.img{
+						flex-shrink: 0;
+						width: 128rpx;
+						height: 128rpx;
+						border-radius: 8rpx;
+					}
+					.info-text {
+						margin: 8rpx 0 20rpx 36rpx;
+						.info-top {
+							.name {
+								font-weight: 500;
+								font-size: 32rpx;
+								color: #363531;
+							}
+
+							.level {
+								margin-left: 12rpx;
+
+								.level-text {
+									width: 105.9rpx;
+									height: 47rpx;
+									padding: 0 16rpx 0 26rpx;
+									background: linear-gradient(130deg, #FFB873 0%, #FEC287 0%, #E69349 100%);
+									border-radius: 0rpx 18rpx 18rpx 0rpx;
+									font-weight: 500;
+									font-size: 24rpx;
+									color: #FFFFFF;
+									line-height: 47rpx;
+									margin-left: -16rpx;
+									// text-align: left;
+								}
+							}
+						}
+
+					}
+
+					.phone {
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #363531;
+					}
+				}
+				.more{
+					margin-top: 26rpx;
+				}
+
+				.news-total {
+					margin-top: 44rpx;
+
+					.item-num {
+						font-weight: bold;
+						font-size: 40rpx;
+						color: #363531;
+					}
+
+					.orange {
+						color: #FF6400;
+					}
+
+					.item-text {
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #9598A6;
+					}
+				}
+
+			}
+			.menu{
+				margin-top: 32rpx;
+				background: #fff;
+				border-radius: 16rpx;
+				.menu-item{
+					padding: 32rpx 28rpx 32rpx 24rpx;
+					.item-left{
+						text{
+							margin-left: 20rpx;
+						}
+					}
+				}
+				.item-one{
+					border-bottom: 2rpx solid #F0F2F4;
+				}
+			}
+		}
+	}
 </style>

pages/news/index.vue

@@ -8,7 +8,7 @@
 						<view class="name">充值信息</view>
 						<view class="text ellipsis-2">消息内容文本文本文本文本文本文本文本文本</view>
 					</view>
-					<view class="news-detail">
+					<view class="news-detail" @click="toDetail">
 						<view class="txt">查看详情</view>
 						<re-image imgSrc="/retail/mall/icon_more.png" width="24" height="24"></re-image>
 					</view>
@@ -19,6 +19,20 @@
 </template>
 
 <script>
+export default{
+	data(){
+		return{
+
+		}
+	},
+	methods: {
+		toDetail(){
+			uni.navigateTo({
+				url:'/pages/system/index'
+			})
+		}
+	},
+}
 </script>
 
 <style lang="scss" scoped>

pages/order/index.vue

@@ -1,9 +0,0 @@
-<template>
-	<div>消息</div>
-</template>
-
-<script>
-</script>
-
-<style>
-</style>

pages/statistics/index.vue

@@ -1,9 +1,301 @@
 <template>
-	<div>统计</div>
+	<view class="statistics" :style="{background:'url('+ bannerImage +')'}">
+		<view><nav-bar title="none" icon="none" background="transparent" border-color="transparent"
+				></nav-bar></view>
+		<view class="logo"><re-image imgSrc="/retail/main/img_logo.png" width="300" height="56"></re-image></view>
+		<view class="content">
+			<view class="news">
+				<view class="info flex">
+					<re-image imgSrc="/" width="104" height="104"></re-image>
+					<view class="info-text flex-column jcsa">
+						<view class="info-top flex">
+							<view class="name">王安安</view>
+							<view class="level flex aic">
+								<re-image imgSrc="/retail/main/ic_chuji.png" width="40" height="44"></re-image>
+								<view class="level-text">初级</view>
+							</view>
+						</view>
+						<view class="phone">13630639549</view>
+					</view>
+				</view>
+				<view class="news-total flex jcsa">
+					<view class="total-item">
+						<view class="item-num">156</view>
+						<view class="item-text">总销订单</view>
+					</view>
+					<view class="total-item">
+						<view class="item-num">156</view>
+						<view class="item-text">总销游戏币</view>
+					</view>
+					<view class="total-item">
+						<view class="item-num orange">¥156</view>
+						<view class="item-text">预估总收益</view>
+					</view>
+				</view>
+			</view>
+			<view class="performance">
+				<view class="per-top flex jcsb">
+					<view class="left flex">
+						<re-image width="40" height="40" imgSrc="/retail/statistics/ic_yeji.png"></re-image><text style="margin-left: 16rpx">分销业绩</text>
+					</view>
+					<view class="right flex aic" @click="show = true">
+						<text>{{date}}</text><re-icon name="icon-xiala" :customStyle="{ fontSize: '10rpx',marginLeft:'10rpx'}"></re-icon>
+					</view>
+				</view>
+				<view class="per-con flex">
+					<view class="con-item flex">
+						<re-image imgSrc="/retail/statistics/ic_dell.png" width="56" height="56"></re-image>
+						<view class="con-new">
+							<view class="new-text">总销订单</view>
+							<view class="new-num">25</view>
+						</view>
+					</view>
+					<view class="con-item flex">
+						<re-image imgSrc="/retail/statistics/ic_youxibi.png" width="56" height="56"></re-image>
+						<view class="con-new">
+							<view class="new-text">总销游戏币</view>
+							<view class="new-num">25</view>
+						</view>
+					</view>
+					<view class="con-item con-btom flex">
+						<re-image imgSrc="/retail/statistics/ic_money.png" width="56" height="56"></re-image>
+						<view class="con-new">
+							<view class="new-text">总充值金额</view>
+							<view class="new-num"><text style="font-size:24rpx">¥</text>25</view>
+						</view>
+					</view>
+					<view class="con-item con-btom flex">
+						<re-image imgSrc="/retail/statistics/ic_money.png" width="56" height="56"></re-image>
+						<view class="con-new">
+							<view class="new-text">预估总收益</view>
+							<view class="new-num"><text style="font-size:24rpx">¥</text>25</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="grade">
+				<view class="per-top flex jcsb">
+					<view class="left flex aic">
+						<re-image width="40" height="40" imgSrc="/retail/statistics/ic_yeji.png"></re-image><text style="margin-left: 16rpx">分销等级说明</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-picker ref="uPicker" :show="show" :columns="columns" keyName="label" :closeOnClickOverlay="true" @confirm="confirm" @change="changeHandler" @close="show = false" @cancel="show = false"></u-picker>
+	</view>
 </template>
 
 <script>
+	import {
+		toRpx
+	} from '@/utils/calculate.js'
+	import defaultConfig from '@/config/default.js'
+
+	export default {
+		components: {},
+		computed: {
+			statusBarHeight() {
+				return this.$store.state.info.systemInfo?.statusBarHeight
+			},
+		},
+		data() {
+			return {
+				show:false,
+				date:'今日',
+				columns:[
+					[{
+						label:'昨日',
+						id:1
+					},{
+						label:'今日',
+						id:2
+					},{
+						label:'近一周',
+						id:3,
+					},{
+						label:'近一月',
+						id:4,
+					},{
+						label:'近一年',
+						id:5,
+					}]
+				],
+				bannerImage: defaultConfig.ossImgUrl + '/retail/main/img_bgtop.png',
+				navBarHeight: uni.getStorageSync('navBarHeight')
+			}
+		},
+		onLoad() {
+
+		},
+
+		methods: {
+			changeHandler(e) {
+				console.log(e,'e');
+                const {
+                    columnIndex,
+                    value,
+                    values, // values为当前变化列的数组内容
+                    index,
+					// 微信小程序无法将picker实例传出来，只能通过ref操作
+                    picker = this.$refs.uPicker
+                } = e
+                // 当第一列值发生变化时，变化第二列(后一列)对应的选项
+                // if (columnIndex === 0) {
+                //     // picker为选择器this实例，变化第二列对应的选项
+                //     picker.setColumnValues(1, this.columnData[index])
+                // }
+            },
+			// 回调参数为包含columnIndex、value、values
+			confirm(e) {
+                console.log('confirm', e)
+                this.show = false
+				this.date = e.value[0].label
+			}
+		},
+		mounted() {
+
+		},
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.statistics {
+		background-repeat: no-repeat !important;
+		background-size: contain !important;
+		// background-position: top;
+		width: 100%;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+
+		.logo {
+			margin-top: 16rpx;
+			margin-left: 24rpx;
+		}
+
+		.content {
+			padding: 0 32rpx;
+
+			.news {
+				background: #FFFFFF;
+				box-shadow: 0rpx 6rpx 16rpx 0rpx #E3E6F2;
+				border-radius: 24rpx;
+				margin-top: 48rpx;
+				padding: 40rpx;
+
+				.info {
+					.info-text {
+						.info-top {
+							.name {
+								font-weight: 500;
+								font-size: 32rpx;
+								color: #363531;
+							}
+
+							.level {
+								margin-left: 12rpx;
+
+								.level-text {
+									width: 80rpx;
+									height: 36rpx;
+									padding: 6rpx 12rpx 6rpx 20rpx;
+									background: linear-gradient(130deg, #FFB873 0%, #FEC287 0%, #E69349 100%);
+									border-radius: 0rpx 18rpx 18rpx 0rpx;
+									font-weight: 500;
+									font-size: 24rpx;
+									color: #FFFFFF;
+									line-height: 24rpx;
+									margin-left: -12rpx;
+									// text-align: left;
+								}
+							}
+						}
+
+					}
+
+					.phone {
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #989897;
+					}
+				}
+
+				.news-total {
+					margin-top: 44rpx;
+
+					.item-num {
+						font-weight: bold;
+						font-size: 40rpx;
+						color: #363531;
+					}
+
+					.orange {
+						color: #FF6400;
+					}
+
+					.item-text {
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #9598A6;
+					}
+				}
+
+			}
+			.performance{
+				background: #fff;
+				padding: 32rpx 32rpx 52rpx;
+				box-shadow: 0rpx 4rpx 12rpx 0rpx #EBECF1;
+				border-radius: 24rpx;
+				margin-top: 22rpx;
+				.per-top{
+					
+					.right{
+						// width: 112rpx;
+						// height: 48rpx;
+						background: #FFD370;
+						border-radius: 8rpx;
+						font-weight: 500;
+						font-size: 28rpx;
+						color: #2A200A;
+						line-height: 48rpx;
+						padding: 0 16rpx;
+						white-space: nowrap;
+					}
+				}
+				.per-con{
+					margin-top: 44rpx;
+					flex-wrap: wrap;
+					.con-item{
+						
+						width: 50%;
+						.con-new{
+							margin-left: 20rpx;
+							.new-text{
+								font-weight: 400;
+								font-size: 28rpx;
+								color: #9598A6;
+							}
+							.new-num{
+								margin-top: 20rpx;
+								font-weight: bold;
+								font-size: 40rpx;
+								color: #363531;
+								line-height: 40rpx;
+							}
+						}
+					}
+					.con-btom{
+						margin-top: 44rpx;
+					}
+				}
+			}
+			.grade{
+				padding: 32rpx;
+				background: linear-gradient( 135deg, #FFDFDF 0%, #FFE4A4 100%);
+				border-radius: 24rpx;
+				margin-top: 22rpx;
+			}
+		}
+
+	}
 </style>

pages/system/index.vue

@@ -0,0 +1,40 @@
+<template>
+    <view class="system">
+        <view><nav-bar title="none" icon="none" background="transparent" border-color="transparent" ></nav-bar></view>
+        <view class="content">
+            <view class="title bold">系统消息文本(取前10字)</view>
+            <view class="time">2024-12-31 12:09</view>
+            <view class="text">系统消息文本文本文本文本文本文本文本文本</view>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    data(){
+        return{
+
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+    .system{
+        background: #fff;
+        height: 100%;
+        .content{
+            .title{
+                font-size: 32rpx;
+            }
+            padding: 32rpx 48rpx;
+            .time{
+                margin: 20rpx 0;
+                font-weight: 500;
+                font-size: 26rpx;
+                color: #989897;
+            }
+            .text{
+                font-size: 28rpx;
+            }
+        }
+    }
+</style>

plugins/uview-ui/components/u-picker/u-picker.vue

@@ -119,6 +119,7 @@ export default {
 		},
 		// 关闭选择器
 		closeHandler() {
+			console.log(this.closeOnClickOverlay,555);
 			if (this.closeOnClickOverlay) {
 				this.$emit('close')
 			}

plugins/uview-ui/components/u-search/props.js

@@ -0,0 +1,118 @@
+export default {
+    props: {
+        // 搜索框形状，round-圆形，square-方形
+        shape: {
+            type: String,
+            default: uni.$u.props.search.shape
+        },
+        // 搜索框背景色，默认值#f2f2f2
+        bgColor: {
+            type: String,
+            default: uni.$u.props.search.bgColor
+        },
+        // 占位提示文字
+        placeholder: {
+            type: String,
+            default: uni.$u.props.search.placeholder
+        },
+        // 是否启用清除控件
+        clearabled: {
+            type: Boolean,
+            default: uni.$u.props.search.clearabled
+        },
+        // 是否自动聚焦
+        focus: {
+            type: Boolean,
+            default: uni.$u.props.search.focus
+        },
+        // 是否在搜索框右侧显示取消按钮
+        showAction: {
+            type: Boolean,
+            default: uni.$u.props.search.showAction
+        },
+        // 右边控件的样式
+        actionStyle: {
+            type: Object,
+            default: uni.$u.props.search.actionStyle
+        },
+        // 取消按钮文字
+        actionText: {
+            type: String,
+            default: uni.$u.props.search.actionText
+        },
+        // 输入框内容对齐方式，可选值为 left|center|right
+        inputAlign: {
+            type: String,
+            default: uni.$u.props.search.inputAlign
+        },
+        // input输入框的样式，可以定义文字颜色，大小等，对象形式
+        inputStyle: {
+            type: Object,
+            default: uni.$u.props.search.inputStyle
+        },
+        // 是否启用输入框
+        disabled: {
+            type: Boolean,
+            default: uni.$u.props.search.disabled
+        },
+        // 边框颜色
+        borderColor: {
+            type: String,
+            default: uni.$u.props.search.borderColor
+        },
+        // 搜索图标的颜色，默认同输入框字体颜色
+        searchIconColor: {
+            type: String,
+            default: uni.$u.props.search.searchIconColor
+        },
+        // 输入框字体颜色
+        color: {
+            type: String,
+            default: uni.$u.props.search.color
+        },
+        // placeholder的颜色
+        placeholderColor: {
+            type: String,
+            default: uni.$u.props.search.placeholderColor
+        },
+        // 左边输入框的图标，可以为uView图标名称或图片路径
+        searchIcon: {
+            type: String,
+            default: uni.$u.props.search.searchIcon
+        },
+        searchIconSize: {
+            type: [Number, String],
+            default: uni.$u.props.search.searchIconSize
+        },
+        // 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"、"30px 20px"等写法
+        margin: {
+            type: String,
+            default: uni.$u.props.search.margin
+        },
+        // 开启showAction时，是否在input获取焦点时才显示
+        animation: {
+            type: Boolean,
+            default: uni.$u.props.search.animation
+        },
+        // 输入框的初始化内容
+        value: {
+            type: String,
+            default: uni.$u.props.search.value
+        },
+        // 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档)
+        maxlength: {
+            type: [String, Number],
+            default: uni.$u.props.search.maxlength
+        },
+        // 搜索框高度，单位px
+        height: {
+            type: [String, Number],
+            default: uni.$u.props.search.height
+        },
+        // 搜索框左侧文本
+        label: {
+            type: [String, Number, null],
+            default: uni.$u.props.search.label
+        }
+    }
+}

plugins/uview-ui/components/u-search/u-search.vue

@@ -0,0 +1,303 @@
+<template>
+	<view
+	    class="u-search"
+	    @tap="clickHandler"
+	    :style="[{
+			margin: margin,
+		}, $u.addStyle(customStyle)]"
+	>
+		<view
+		    class="u-search__content"
+		    :style="{
+				backgroundColor: bgColor,
+				borderRadius: shape == 'round' ? '100px' : '4px',
+				borderColor: borderColor,
+			}"
+		>
+			<template v-if="$slots.label || label !== null">
+				<slot name="label">
+					<text class="u-search__content__label">{{ label }}</text>
+				</slot>
+			</template>
+			<view class="u-search__content__icon">
+				<u-icon
+					@tap="clickIcon"
+				    :size="searchIconSize"
+				    :name="searchIcon"
+				    :color="searchIconColor ? searchIconColor : color"
+				></u-icon>
+			</view>
+			<input
+			    confirm-type="search"
+			    @blur="blur"
+			    :value="value"
+			    @confirm="search"
+			    @input="inputChange"
+			    :disabled="disabled"
+			    @focus="getFocus"
+			    :focus="focus"
+			    :maxlength="maxlength"
+			    placeholder-class="u-search__content__input--placeholder"
+			    :placeholder="placeholder"
+			    :placeholder-style="`color: ${placeholderColor}`"
+			    class="u-search__content__input"
+			    type="text"
+			    :style="[{
+					textAlign: inputAlign,
+					color: color,
+					backgroundColor: bgColor,
+					height: $u.addUnit(height)
+				}, inputStyle]"
+			/>
+			<view
+			    class="u-search__content__icon u-search__content__close"
+			    v-if="keyword && clearabled && focused"
+			    @tap="clear"
+			>
+				<u-icon
+				    name="close"
+				    size="11"
+				    color="#ffffff"
+					customStyle="line-height: 12px"
+				></u-icon>
+			</view>
+		</view>
+		<text
+		    :style="[actionStyle]"
+		    class="u-search__action"
+		    :class="[(showActionBtn || show) && 'u-search__action--active']"
+		    @tap.stop.prevent="custom"
+		>{{ actionText }}</text>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';
+
+	/**
+	 * search 搜索框
+	 * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
+	 * @tutorial https://www.uviewui.com/components/search.html
+	 * @property {String}			shape				搜索框形状，round-圆形，square-方形（默认 'round' ）
+	 * @property {String}			bgColor				搜索框背景颜色（默认 '#f2f2f2' ）
+	 * @property {String}			placeholder			占位文字内容（默认 '请输入关键字' ）
+	 * @property {Boolean}			clearabled			是否启用清除控件（默认 true ）
+	 * @property {Boolean}			focus				是否自动获得焦点（默认 false ）
+	 * @property {Boolean}			showAction			是否显示右侧控件（默认 true ）
+	 * @property {Object}			actionStyle			右侧控件的样式，对象形式
+	 * @property {String}			actionText			右侧控件文字（默认 '搜索' ）
+	 * @property {String}			inputAlign			输入框内容水平对齐方式 （默认 'left' ）
+	 * @property {Object}			inputStyle			自定义输入框样式，对象形式
+	 * @property {Boolean}			disabled			是否启用输入框（默认 false ）
+	 * @property {String}			borderColor			边框颜色，配置了颜色，才会有边框 (默认 'transparent' )
+	 * @property {String}			searchIconColor		搜索图标的颜色，默认同输入框字体颜色 (默认 '#909399' )
+	 * @property {Number | String}	searchIconSize 搜索图标的字体，默认22
+	 * @property {String}			color				输入框字体颜色（默认 '#606266' ）
+	 * @property {String}			placeholderColor	placeholder的颜色（默认 '#909399' ）
+	 * @property {String}			searchIcon			输入框左边的图标，可以为uView图标名称或图片路径  (默认 'search' )
+	 * @property {String}			margin				组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"   (默认 '0' )
+	 * @property {Boolean} 			animation			是否开启动画，见上方说明（默认 false ）
+	 * @property {String}			value				输入框初始值
+	 * @property {String | Number}	maxlength			输入框最大能输入的长度，-1为不限制长度  (默认 '-1' )
+	 * @property {String | Number}	height				输入框高度，单位px（默认 64 ）
+	 * @property {String | Number}	label				搜索框左边显示内容
+	 * @property {Object}			customStyle			定义需要用到的外部样式
+	 *
+	 * @event {Function} change 输入框内容发生变化时触发
+	 * @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
+	 * @event {Function} custom 用户点击右侧控件时触发
+	 * @event {Function} clear 用户点击清除按钮时触发
+	 * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
+	 */
+	export default {
+		name: "u-search",
+		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
+		data() {
+			return {
+				keyword: '',
+				showClear: false, // 是否显示右边的清除图标
+				show: false,
+				// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
+				focused: this.focus
+				// 绑定输入框的值
+				// inputValue: this.value
+			};
+		},
+		watch: {
+			keyword(nVal) {
+				// 双向绑定值，让v-model绑定的值双向变化
+				this.$emit('input', nVal);
+				// 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择
+				this.$emit('change', nVal);
+			},
+			value: {
+				immediate: true,
+				handler(nVal) {
+					this.keyword = nVal;
+				}
+			}
+		},
+		computed: {
+			showActionBtn() {
+				return !this.animation && this.showAction
+			}
+		},
+		methods: {
+			// 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化
+			inputChange(e) {
+				this.keyword = e.detail.value;
+			},
+			// 清空输入
+			// 也可以作为用户通过this.$refs形式调用清空输入框内容
+			clear() {
+				this.keyword = '';
+				// 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)
+				this.$nextTick(() => {
+					this.$emit('clear');
+				})
+			},
+			// 确定搜索
+			search(e) {
+				this.$emit('search', e.detail.value);
+				try {
+					// 收起键盘
+					uni.hideKeyboard();
+				} catch (e) {}
+			},
+			// 点击右边自定义按钮的事件
+			custom() {
+				this.$emit('custom', this.keyword);
+				try {
+					// 收起键盘
+					uni.hideKeyboard();
+				} catch (e) {}
+			},
+			// 获取焦点
+			getFocus() {
+				this.focused = true;
+				// 开启右侧搜索按钮展开的动画效果
+				if (this.animation && this.showAction) this.show = true;
+				this.$emit('focus', this.keyword);
+			},
+			// 失去焦点
+			blur() {
+				// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+				// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+				setTimeout(() => {
+					this.focused = false;
+				}, 100)
+				this.show = false;
+				this.$emit('blur', this.keyword);
+			},
+			// 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页
+			clickHandler() {
+				if (this.disabled) this.$emit('click');
+			},
+			// 点击左边图标
+			clickIcon() {
+				this.$emit('clickIcon');
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+$u-search-content-padding: 0 10px !default;
+$u-search-label-color: $u-main-color !default;
+$u-search-label-font-size: 14px !default;
+$u-search-label-margin: 0 4px !default;
+$u-search-close-size: 20px !default;
+$u-search-close-radius: 100px !default;
+$u-search-close-bgColor: #C6C7CB !default;
+$u-search-close-transform: scale(0.82) !default;
+$u-search-input-font-size: 14px !default;
+$u-search-input-margin: 0 5px !default;
+$u-search-input-color: $u-main-color !default;
+$u-search-input-placeholder-color: $u-tips-color !default;
+$u-search-action-font-size: 14px !default;
+$u-search-action-color: $u-main-color !default;
+$u-search-action-width: 0 !default;
+$u-search-action-active-width: 40px !default;
+$u-search-action-margin-left: 5px !default;
+
+/* #ifdef H5 */
+// iOS15在H5下，hx的某些版本，input type=search时，会多了一个搜索图标，进行移除
+[type="search"]::-webkit-search-decoration {
+    display: none;
+}
+/* #endif */
+
+.u-search {
+	@include flex(row);
+	align-items: center;
+	flex: 1;
+
+	&__content {
+		@include flex;
+		align-items: center;
+		padding: $u-search-content-padding;
+		flex: 1;
+		justify-content: space-between;
+		border-width: 1px;
+		border-color: transparent;
+		border-style: solid;
+		overflow: hidden;
+
+		&__icon {
+			@include flex;
+			align-items: center;
+		}
+
+		&__label {
+			color: $u-search-label-color;
+			font-size: $u-search-label-font-size;
+			margin: $u-search-label-margin;
+		}
+
+		&__close {
+			width: $u-search-close-size;
+			height: $u-search-close-size;
+			border-top-left-radius: $u-search-close-radius;
+			border-top-right-radius: $u-search-close-radius;
+			border-bottom-left-radius: $u-search-close-radius;
+			border-bottom-right-radius: $u-search-close-radius;
+			background-color: $u-search-close-bgColor;
+			@include flex(row);
+			align-items: center;
+			justify-content: center;
+			transform: $u-search-close-transform;
+		}
+
+		&__input {
+			flex: 1;
+			font-size: $u-search-input-font-size;
+			line-height: 1;
+			margin: $u-search-input-margin;
+			color: $u-search-input-color;
+
+			&--placeholder {
+				color: $u-search-input-placeholder-color;
+			}
+		}
+	}
+
+	&__action {
+		font-size: $u-search-action-font-size;
+		color: $u-search-action-color;
+		width: $u-search-action-width;
+		overflow: hidden;
+		transition-property: width;
+		transition-duration: 0.3s;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		/* #endif */
+		text-align: center;
+
+		&--active {
+			width: $u-search-action-active-width;
+			margin-left: $u-search-action-margin-left;
+		}
+	}
+}
+</style>

static/icon/iconfont.css

@@ -1,23 +1,26 @@
 @font-face {
-    font-family: "iconfont"; /* Project id 4445709 */
-    src: url('https://at.alicdn.com/t/c/font_4445709_hvd2q8eqjq.woff2?t=1709023180531') format('woff2'),
-         url('https://at.alicdn.com/t/c/font_4445709_hvd2q8eqjq.woff?t=1709023180531') format('woff'),
-         url('https://at.alicdn.com/t/c/font_4445709_hvd2q8eqjq.ttf?t=1709023180531') format('truetype');
-  }
-  
-  .iconfont {
-    font-family: "iconfont" !important;
-    font-size: 16px;
-    font-style: normal;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  .icon-fanhui:before {
-    content: "\e67e";
-  }
-  
-  .icon-home:before {
-    content: "\e6fe";
-  }
-  
+  font-family: "iconfont"; /* Project id 4445709 */
+  src: url('https://at.alicdn.com/t/c/font_4445709_z7vmalg5tt.woff2?t=1709103603163') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4445709_z7vmalg5tt.woff?t=1709103603163') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4445709_z7vmalg5tt.ttf?t=1709103603163') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-xiala:before {
+  content: "\e618";
+}
+
+.icon-fanhui:before {
+  content: "\e67e";
+}
+
+.icon-home:before {
+  content: "\e6fe";
+}

store/modules/emptyStatus.js

@@ -1,31 +1,30 @@
 // 空状态图片地址
 export default {
 	state: {
-		status: [
-			{
+		status: [{
 				url: '/noData/no-data-1.png',
 				name: '暂无订单',
 				desc: '我的团购订单',
 				type: 1
 			},
-      {
-      	url: '/noData/no-data-3.png',
-      	name: '暂无记录',
+			{
+				url: '/noData/no-data-3.png',
+				name: '暂无记录',
 				desc: '提现记录',
-      	type: 3
-      },
-      {
-      	url: '/noData/no-data-4.png',
-      	name: '暂无记录',
+				type: 3
+			},
+			{
+				url: '/noData/no-data-4.png',
+				name: '暂无记录',
 				desc: '钱包零钱',
-      	type: 4
-      },
-      {
-      	url: '/noData/no-data-6.png',
-      	name: '暂无商品',
+				type: 4
+			},
+			{
+				url: '/noData/no-data-6.png',
+				name: '暂无商品',
 				desc: '团购大厅',
-      	type: 6
-      },
+				type: 6
+			},
 			{
 				url: '/noData/no-data-7.png',
 				name: '购物车空空如也',
@@ -42,4 +41,4 @@ export default {
 	},
 	mutations: {},
 	actions: {}
-}
+}

unpackage/dist/dev/mp-weixin/app.json

@@ -9,7 +9,26 @@
     {
       "root": "pages/mall",
       "pages": [
-        "mallRecharge/index"
+        "mallRecharge/index",
+        "mallSuccess/index"
+      ]
+    },
+    {
+      "root": "pages/login",
+      "pages": [
+        "index"
+      ]
+    },
+    {
+      "root": "pages/system",
+      "pages": [
+        "index"
+      ]
+    },
+    {
+      "root": "pages/accountRecharge",
+      "pages": [
+        "index"
       ]
     }
   ],
@@ -20,33 +39,33 @@
     "backgroundColor": "#F8F8F8"
   },
   "tabBar": {
-    "color": "#7A7E83",
-    "selectedColor": "#3cc51f",
+    "color": "#86899B",
+    "selectedColor": "#FB692A",
     "borderStyle": "black",
     "backgroundColor": "#ffffff",
     "list": [
       {
         "pagePath": "pages/gallery/index",
-        "iconPath": "",
-        "selectedIconPath": "",
+        "iconPath": "/static/image/ic_home.png",
+        "selectedIconPath": "/static/image/ic_home_selected.png",
         "text": "工作台"
       },
       {
         "pagePath": "pages/statistics/index",
-        "iconPath": "",
-        "selectedIconPath": "",
+        "iconPath": "/static/image/ic_dingdan.png",
+        "selectedIconPath": "/static/image/ic_dingdan_selected.png",
         "text": "统计"
       },
       {
         "pagePath": "pages/news/index",
-        "iconPath": "",
-        "selectedIconPath": "",
+        "iconPath": "/static/image/ic_product.png",
+        "selectedIconPath": "/static/image/ic_product_selected.png",
         "text": "消息"
       },
       {
         "pagePath": "pages/my/index",
-        "iconPath": "",
-        "selectedIconPath": "",
+        "iconPath": "/static/image/ic_zhidan.png",
+        "selectedIconPath": "/static/image/ic_zhidan_selected.png",
         "text": "我的"
       }
     ]

unpackage/dist/dev/mp-weixin/project.private.config.json

@@ -4,6 +4,13 @@
     "miniprogram": {
       "list": [
         {
+          "name": "登录",
+          "pathName": "pages/login/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
           "name": "pages/mall/mallRecharge/index",
           "pathName": "pages/mall/mallRecharge/index",
           "query": "",

utils/utils.js

@@ -327,4 +327,21 @@ export function rce(arg1, arg2) {
 
 //   } catch (e) { }
 //   return t
-// }
+// }
+
+// 手机号码分割过滤
+export const filterPhone = (phone, formart = " ") => {
+	let phoneCopy = phone
+	if (phone.length === 3 || phone.length === 8) {
+		phoneCopy += formart
+	}
+	if (phone.length === 11) { // 处理复制的号码
+		const mobileReg = /(?=(\d{4})+$)/g
+		phoneCopy = phone.replace(mobileReg, formart)
+	}
+	return phoneCopy
+}
+// 解除手机分割-只支持空格拆分
+export const openFilterPhone = (phone) => {
+	return phone.replace(/\s/g, "")
+}