refactor：我的页面

otherPages/storeService/index.vue

@@ -1,28 +1,24 @@
 <template>
     <view class="content">
         <view>
-            <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
-                @scrolltolower="lower" @scroll="scroll">
-                <view class="box_4">
-                    <view class="group_1">
-                        <view class="text-group_2">
-                            <text lines="1" class="text_3">服务对象</text>
-                            <text lines="1" class="text_4">请选择服务对象</text>
-                        </view>
-                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
+            <view class="box_4">
+                <view class="group_1">
+                    <view class="text-group_2">
+                        <text lines="1" class="text_3">服务对象</text>
+                        <text lines="1" class="text_4">请选择服务对象</text>
                     </view>
-                    <view class="group_2"></view>
-                    <view class="group_1">
-                        <view class="text-group_2">
-                            <text lines="1" class="text_3">服务类型</text>
-                            <text lines="1" class="text_4">请选择服务类型</text>
-                        </view>
-                        <u-icon name="arrow-right" color="#666" size="18"></u-icon>
+                    <u-icon name="arrow-right" color="#666" size="18"></u-icon>
+                </view>
+                <view class="group_2"></view>
+                <view class="group_1">
+                    <view class="text-group_2">
+                        <text lines="1" class="text_3">服务类型</text>
+                        <text lines="1" class="text_4">请选择服务类型</text>
                     </view>
-                    <view class="group_2"></view>
+                    <u-icon name="arrow-right" color="#666" size="18"></u-icon>
                 </view>
-            </scroll-view>
-
+                <view class="group_2"></view>
+            </view>
             <view class="tabBarLineHeight"></view>
             <view class="tabBarView">
                 <view class="submitButton">提交</view>
@@ -32,24 +28,24 @@
 </template>
 
 <script>
-import tabBar from "../../components/tabBar/tabBar";
-export default {
-    components: {
-        tabBar
-    },
-    data() {
-        return {
-            title: 'Hello',
-            tabIndex: 3
-        }
-    },
-    onLoad() {
+	import tabBar from "../../components/tabBar/tabBar";
+	export default {
+		components: {
+			tabBar
+		},
+		data() {
+			return {
+				title: 'Hello',
+				tabIndex: 3
+			}
+		},
+		onLoad() {
 
-    },
-    methods: {
+		},
+		methods: {
 
-    }
-}
+		}
+	}
 </script>
 
 <style scoped lang="scss">

pages.json

@@ -37,7 +37,7 @@
 		{
 			"path": "pages/my/index",
 			"style": {
-				"navigationBarTitleText": "我的"
+				"navigationStyle": "custom"
 			}
 		}
 	],

pages/my/index.rpx.css

@@ -0,0 +1,94 @@
+.page{
+    background: #F7F7F7;
+    position: relative;
+    width: 750rpx;
+    height: 1650rpx;
+}
+
+.tabBarLineHeight{
+    height: 138rpx;
+}
+.tabBarView{
+    position: fixed;
+    bottom: 0;
+}
+.backImage{
+    width: 750rpx;
+    height: 520rpx;
+}
+.content{
+    position: absolute;
+    top: 138rpx;
+    width: 750rpx;
+    padding: 0 34rpx;
+}
+.userInfo{
+    width: 686rpx;
+    height: 152rpx;
+}
+.sudoku{
+    width: 686rpx;
+    height: 270rpx;
+    margin-top: 40rpx;
+    border-radius: 15rpx;
+    background: #FFFFFF;
+}
+
+.group{
+    width: 686rpx;
+    margin-top: 40rpx;
+    border-radius: 15rpx;
+    background: #FFFFFF;
+    padding: 20rpx 0;
+}
+.userPhoto{
+    width: 152rpx;
+    height: 152rpx;
+    border-radius: 76rpx;
+}
+.userTitle{
+    margin-left: 24rpx;
+}
+.nickName{
+    font-size: 32rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+    line-height: 48rpx;
+}
+.xinxTitle{
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #333333;
+    line-height: 40rpx;
+}
+.balance-name{
+    height: 48rpx;
+    font-size: 32rpx;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+    line-height: 48rpx;
+    margin-top: 20rpx;
+    margin-left: 32rpx;
+}
+.name{
+    font-size: 24rpx;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #999999;
+    line-height: 40rpx;
+    text-align: center;
+}
+.num{
+    font-size: 36rpx;
+    font-family: DINAlternate-Bold, DINAlternate;
+    font-weight: bold;
+    color: #333333;
+    line-height: 52rpx;
+    text-align: center;
+}
+.balance{
+    margin-top: 16rpx;
+}

pages/my/index.rpx.scss

@@ -1,199 +0,0 @@
-.tabBarLineHeight{
-    height: 138rpx;
-}
-.tabBarView {
-    position: fixed;
-    bottom: 0;
-}
-
-.content-wrap {
-	background: rgb(255, 255, 255);
-}
-
-/* 头部内容 */
-.head-wrap {
-	height: 1200rpx;
-	position: relative;
-
-	.head-bg {
-		height: 680rpx;
-		// background: #FFE05C;
-	}
-
-	.content {
-		// background: #fff;
-		position: absolute;
-		top:6%;
-		left: 20rpx;
-		right: 12rpx;
-		border-radius: 6px;
-
-		.user-info {
-			margin: 0 auto;
-			margin-bottom: 68rpx;
-			display: flex;
-			align-items: center;
-
-			.user-head {
-				margin-right: 12rpx;
-
-				image {
-					border-radius: 76rpx;
-					height: 152rpx;
-					width: 152rpx;
-				}
-			}
-
-			.h-content {
-				.user-name {
-					margin-top: 12rpx;
-					font-size: 32rpx;
-					font-weight: 600;
-					height: 60rpx;
-				}
-
-				.user-desc {
-					height: 60rpx;
-					font-size: 12px;
-					color: #333333;
-					display: flex;
-				}
-			}
-
-		}
-
-		/* 钱包 */
-		.balance-info {
-            width: 100%;
-			background: #fff;
-			border-radius: 20rpx;
-			padding-bottom: 40rpx;
-
-			.balance-name {
-				padding-left: 24rpx;
-				padding-top: 20rpx;
-				font-family: PingFangSC-Medium, PingFang SC;
-				font-weight: 600;
-				color: #333333;
-				line-height: 48rpx;
-				font-size: 16px;
-			}
-
-			.h-content {
-				display: flex;
-				justify-content: space-around; // 平均分布
-				justify-content: center;
-
-				.button-wrap {
-					flex: 1;
-					display: flex;
-					align-items: center;
-					justify-content: center;
-					margin-top: 20rpx;
-					margin-bottom: 36rpx;
-					padding-bottom: 28rpx;
-
-					.btn {
-						padding-left: 24rpx;
-						padding-right: 24rpx;
-						height: 72rpx;
-						border-radius: 36rpx;
-
-						.icon {
-							display: flex;
-							padding-right: 12rpx;
-							align-items: center;
-							justify-content: center;
-
-							image {
-								height: 28rpx;
-								width: 28rpx;
-							}
-						}
-					}
-
-					.h-name {
-						padding-top: 8rpx;
-						font-size: 11px;
-						text-align: center;
-
-						.name {
-							color: #999999;
-						}
-
-						.num {
-							line-height: 76rpx;
-							font-size: 18px;
-						}
-					}
-				}
-			}
-
-		}
-
-		/* 导航菜单 */
-		.nav-bar {
-			background: #fff;
-			border-radius: 20rpx;
-			margin-top: 24rpx;
-
-			/* 商店信息 */
-			.nav-content {
-				padding-top: 20rpx;
-				padding-bottom: 12rpx;
-
-				.nav-info {
-					display: flex;
-					align-items: center;
-
-					.logo {
-						display: flex;
-						width: 12%;
-						justify-content: center;
-						text-align: center;
-						align-items: center;
-
-						image {
-							width: 52rpx;
-							height: 52rpx;
-						}
-					}
-
-					.nav-desc {
-						width: 78%;
-						display: flex;
-						line-height: 30rpx;
-
-						.nav-name {
-							font-size: 16px;
-							width: 60%;
-						}
-
-						.change-store {
-							text-align: right;
-							width: 40%;
-							font-size: 12px;
-							color: #666;
-						}
-					}
-
-					.arrow-right {
-						width: 2%;
-						text-align: right;
-						margin: 0 auto;
-						cursor: pointer;
-						padding-top: 6rpx;
-
-						image {
-							width: 18rpx;
-							height: 18rpx;
-						}
-					}
-				}
-			}
-		}
-	}
-
-
-
-}

pages/my/index.vue

@@ -1,259 +1,92 @@
 <template>
-	<view class="content-wrap">
-		<view class="head-wrap">
-			<view class="content-info">
-				<!-- 轮播图 -->
-				<view class="head-bg">
-					<u-swiper :list="bannerList" :height="340"></u-swiper>
-				</view>
-				<view class="content">
-					<!-- 用户信息 -->
-					<view @click="perfectUserInfo()" class="user-info">
-						<view class="user-head">
-							<image v-if="userInfo.selfPhotoUrl" :src="userInfo.selfPhotoUrl" mode=""></image>
-							<image v-else src="../../static/logo.png" mode=""></image>
-						</view>
-						<view class="h-content">
-							<view class="user-name">
-								<text>HI,亲爱的{{ userInfo.ncikName }}</text>
-							</view>
-							<view class="user-desc">
-								<view class="h-text">
-									<text>你当前的个人资料尚不完善</text>
-									<text>去完善</text>
-								</view>
-								<view class="h-arrow">
-									<u-icon name="arrow-right" color="#333333" size="16"></u-icon>
-								</view>
-							</view>
+	<view class="page" >
+		<view class="backImage">
+			<image class="backImage" src="/static/me/u655.png"></image>
+		</view>
+
+		<view class="content">
+
+				<view class="userInfo flex-row">
+					<view class="userPhoto">
+						<image class="userPhoto" src="/static/logo.png"></image>
+					</view>
+					<view class="userTitle flex-col justify-center">
+						<text class="nickName">用户昵称</text>
+						<view class="flex-row">
+							<text class="xinxTitle">啊擦黄寺大街快乐崇拜哈少得可怜</text>
+							<u-icon name="arrow-right" color="#333333" size="16"></u-icon>
 						</view>
 					</view>
+				</view>
 
-					<view class="balance-info">
-						<view class="balance-name">
-							<text>我的资产</text>
-						</view>
-						<view class="h-content">
-							<view class="button-wrap">
-								<view @click="gotoRechargeService()" class="btn">
-									<view class="icon">
-										<u-icon name="/static/me/u701.png" color="red" size="30"></u-icon>
-									</view>
-									<view class="h-name">
-										<view class="name">
-											余额
-										</view>
-										<view class="num">
-											￥{{ userInfo.balance }}
-										</view>
-									</view>
-								</view>
-							</view>
-							<view class="button-wrap">
-								<view @click="gotoIntgral" class="btn">
-									<view class="icon">
-										<u-icon name="/static/me/u680.png" color="red" size="30"></u-icon>
-									</view>
-									<view class="h-name">
-										<view class="name">
-											积分
-										</view>
-										<view class="num">
-											{{ userInfo.integral }}
-										</view>
-									</view>
-								</view>
+				<view class="sudoku flex-col">
+					<view class="balance-name">
+						<text>我的资产</text>
+					</view>
+					<view class="balance flex-row justify-around">
+						<view @click="goRecharge">
+							<view class="icon flex-row justify-center">
+								<u-icon name="/static/me/u701.png" color="red" size="30"></u-icon>
 							</view>
-							<view class="button-wrap">
-								<view @click="gotoCoupon" class="btn">
-									<view class="icon">
-										<u-icon name="/static/me/u687.png" color="red" size="30"></u-icon>
-									</view>
-									<view class="h-name">
-										<view class="name">
-											优惠券
-										</view>
-										<view class="num">
-											{{ userInfo.coupon }}
-										</view>
-									</view>
-								</view>
+							<view class="name">
+								余额
 							</view>
-							<view class="button-wrap">
-								<view class="btn">
-									<view class="icon">
-										<u-icon name="/static/me/u694.png" color="red" size="30"></u-icon>
-									</view>
-									<view class="h-name">
-										<view class="name">
-											电子币
-										</view>
-										<view class="num">
-											{{ userInfo.electronicCurrency }}
-										</view>
-									</view>
-								</view>
+							<view class="num">
+								<text>￥{{userInfo.balance || 0}}</text>
 							</view>
 						</view>
-					</view>
-
-					<view class="nav-bar">
-						<view class="nav-content">
-							<view class="nav-info">
-								<view class="logo">
-									<image src="../../static/me/u1796.png" mode=""></image>
-								</view>
-								<view class="nav-desc">
-									<view class="nav-name">
-										<view class="">贡献奖励记录</view>
-									</view>
-									<view class="change-store"></view>
-								</view>
-								<view class="arrow-right">
-									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
-								</view>
+						<view>
+							<view class="icon flex-row justify-center">
+								<u-icon name="/static/me/u680.png" color="red" size="30"></u-icon>
 							</view>
-						</view>
-						<view class="custom-line"></view>
-						<view @click="gotoRealNameAuth()" class="nav-content">
-							<view class="nav-info">
-								<view class="logo">
-									<image src="../../static/me/u1803.png" mode=""></image>
-								</view>
-								<view class="nav-desc">
-									<view class="nav-name">
-										<view class="">实名认证</view>
-									</view>
-									<view class="change-store">
-										<text v-if="userInfo.isAttestation">已认证</text>
-										<text v-else>未实名认证，去认证</text>
-									</view>
-								</view>
-								<view class="arrow-right">
-									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
-								</view>
+							<view class="name">
+								积分
 							</view>
-						</view>
-						<view class="custom-line"></view>
-						<view @click="gotoServiceObjectMgt()" class="nav-content">
-							<view class="nav-info">
-								<view class="logo">
-									<image src="../../static/me/u1812.png" mode=""></image>
-								</view>
-								<view class="nav-desc">
-									<view class="nav-name">
-										<view class="">服务对象管理</view>
-
-									</view>
-									<view class="change-store"></view>
-								</view>
-								<view class="arrow-right">
-									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
-								</view>
+							<view class="num">
+								<text>{{userInfo.integral|| 0}}</text>
 							</view>
 						</view>
-						<view class="custom-line"></view>
-						<view class="nav-content">
-							<view @click="gotoSystemSwitch()" class="nav-info">
-								<view class="logo">
-									<image src="../../static/me/u1833.png" mode=""></image>
-								</view>
-								<view class="nav-desc">
-									<view class="nav-name">
-										<view class="">新老系统切换</view>
-
-									</view>
-									<view class="change-store"></view>
-								</view>
-								<view class="arrow-right">
-									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
-								</view>
+						<view @click="goCoupon">
+							<view class="icon flex-row justify-center">
+								<u-icon name="/static/me/u687.png" color="red" size="30"></u-icon>
 							</view>
-						</view>
-						<view class="custom-line"></view>
-						<view @click="gotoRechargeService()" class="nav-content">
-							<view class="nav-info">
-								<view class="logo">
-									<image src="../../static/me/u826.png" mode=""></image>
-								</view>
-								<view class="nav-desc">
-									<view class="nav-name">
-										<view class="">储值服务</view>
-									</view>
-									<view class="change-store"></view>
-								</view>
-								<view class="arrow-right">
-									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
-								</view>
+							<view class="name">
+								优惠券
 							</view>
-						</view>
-					</view>
-
-					<view class="nav-bar">
-						<view @click="aboutOur()" class="nav-content">
-							<view class="nav-info">
-								<view class="logo">
-									<image src="../../static/me/u1829.png" mode=""></image>
-								</view>
-								<view class="nav-desc">
-									<view class="nav-name">
-										<view class="">关于我们</view>
-									</view>
-									<view class="change-store"></view>
-								</view>
-								<view class="arrow-right">
-									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
-								</view>
+							<view class="num">
+								<text>{{userInfo.coupon || 0}}</text>
 							</view>
 						</view>
-						<view class="custom-line"></view>
-						<view @click="perfectUserInfo()" class="nav-content">
-							<view class="nav-info">
-								<view class="logo">
-									<image src="../../static/me/u10.png" mode=""></image>
-								</view>
-								<view class="nav-desc">
-									<view class="nav-name">
-										<view class="">个人信息</view>
-									</view>
-									<view class="change-store"></view>
-								</view>
-								<view class="arrow-right">
-									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
-								</view>
+						<view>
+							<view class="icon flex-row justify-center">
+								<u-icon name="/static/me/u694.png" color="red" size="30"></u-icon>
 							</view>
-						</view>
-						<view class="custom-line"></view>
-						<view @click="gotoSetting()" class="nav-content">
-							<view class="nav-info">
-								<view class="logo">
-									<image src="../../static/me/u101.png" mode=""></image>
-								</view>
-								<view class="nav-desc">
-									<view class="nav-name">
-										<view class="">设置</view>
-									</view>
-									<view class="change-store"></view>
-								</view>
-								<view class="arrow-right">
-									<u-icon name="arrow-right" color="#666" size="18"></u-icon>
-									<!-- <image src="../../static/index/u10.png" mode=""></image> -->
-								</view>
+							<view class="name">
+								电子币
+							</view>
+							<view class="num">
+								<text>{{userInfo.electronicCurrency || 0}}</text>
 							</view>
 						</view>
-
 					</view>
+
 				</view>
-			</view>
+
+				<view class="group">
+					<uni-list>
+						<uni-list-item :to="item.to" :title="item.title" showArrow :thumb="item.thumb" thumb-size="sm" :rightText="item.rightText"  v-for="(item,index) in group1" :key="index" />
+					</uni-list>
+				</view>
+
+				<view class="group">
+					<uni-list>
+						<uni-list-item :to="item.to" :title="item.title" showArrow :thumb="item.thumb" thumb-size="sm"  v-for="(item,index) in group2" :key="index" />
+					</uni-list>
+				</view>
+
+				<view class="tabBarLineHeight"></view>
+
 		</view>
-		<view class="tabBarLineHeight"></view>
 		<view class="tabBarView">
 			<tab-bar :tabIndex="tabIndex"></tab-bar>
 		</view>
@@ -268,145 +101,68 @@ export default {
 	},
 	data() {
 		return {
+			group1:[
+				{thumb:'/static/me/u1796.png',title:'贡献奖励记录',url:'',rightText:'',to:''},
+				{thumb:'/static/me/u1803.png',title:'实名认证',url:'',rightText:'',to:''},
+				{thumb:'/static/me/u1812.png',title:'服务对象管理',url:'',rightText:'',to:''},
+				{thumb:'/static/me/u1833.png',title:'新老系统切换',url:'',rightText:'',to:''},
+				{thumb:'/static/me/u826.png',title:'储值服务',url:'',rightText:'',to:'/myPages/recharge/index'}
+
+
+			],
+			group2:[
+				{thumb:'/static/me/u1829.png',title:'关于我们',url:'',rightText:'',to:''},
+				{thumb:'/static/me/u10.png',title:'个人信息',url:'',rightText:'',to:''},
+				{thumb:'/static/me/u101.png',title:'设置',url:'',rightText:'',to:''}
+			],
+			height:'',
 			title: 'Hello',
 			tabIndex: 4,
 			bannerList: [
 				'/static/me/u655.png',
 			],
-			userInfo: {
-				selfPhotoUrl: null
-			}
+			userInfo: {}
 		}
 	},
-	mounted() {
-		this.pageTop();
-		// 用户信息
-		try {
-			const value = uni.getStorageSync('userInfo');
-			if (value) {
-				this.userInfo = value
-			}
-		} catch (e) {
-			// error
-		}
-		console.log(this.userInfo, '11111111111111111111111');
-	},
+
 	// 分享到朋友圈
 	onShareTimeline() { },
 	// 分享到用户
 	onShareAppMessage(OBJECT) { },
-	onLoad() { },
+	onLoad() {
+		uni.hideTabBar({
+			animation:false
+		})
+		let sysInfo = uni.getSystemInfoSync()
+		this.height = sysInfo.screenHeight +'px'
+
+		this.userInfo = uni.getStorageSync('userInfo')
+
+		if (this.userInfo.isAttestation){
+			this.group1[1].rightText = '已认证'
+		}else {
+			this.group1[1].rightText = '未实名认证，去认证'
+		}
+	},
 	methods: {
-		// 页面内容置顶
-		pageTop() {
-			uni.pageScrollTo({
-				scrollTop: 0,
-				duration: 100, // scroll animation duration in milliseconds
-				success: function () {
-					console.log('Scrolled to the top successfully');
-				},
-				fail: function (err) {
-					console.log('Failed to scroll to the top', err);
-				}
-			});
-		},
-		// 保存微信用户信息
-		saveWechatUserInfo() {
-			let that = this;
-			// 保存用户信息
-			saveWechatUser(null, { data: this.userInfo }).then((res) => {
-				console.log(res.data);
-			}).catch(() => {
-				uni.showToast({
-					title: "操作失败"
-				})
-			})
-		},
-		// 积分详细页面
-		gotoIntgral() {
-			uni.$u.route({
-				url: '/pages/integral/integral',
-				params: {
-					name: 'lisa'
-				}
-			})
-		},
-		/* 用户信息 */
-		perfectUserInfo() {
-			uni.navigateTo({
-				url: '/pages/me/user-info',
-				params: {
-					name: 'lisa'
-				}
-			})
-		},
-		// 关于我们
-		aboutOur() {
-			uni.navigateTo({
-				url: '/pages/me/about-our',
-				params: {
-					name: 'lisa'
-				}
-			})
-		},
-		// 设置
-		gotoSetting() {
-			uni.navigateTo({
-				url: '/pages/setting/setting',
-				params: {
-					name: 'lisa'
-				}
-			})
-		},
-		// 服务对象管理
-		gotoServiceObjectMgt() {
-			uni.navigateTo({
-				url: '/pages/me/service-object-mgt',
-				params: {
-					name: 'lisa'
-				}
-			})
-		},
-		// 储值服务
-		gotoRechargeService() {
-			uni.navigateTo({
-				url: '/myPages/recharge/index'
 
-			})
-		},
-		// 去实名认证
-		gotoRealNameAuth() {
-			let that = this;
-			console.log(that.userInfo.id)
+		goRecharge(){
 			uni.navigateTo({
-				url: '/pages/me/real-name-auth',
+				url:'/myPages/recharge/index'
 			})
 		},
-		// 去优惠劵页面
-		gotoCoupon() {
+
+		goCoupon(){
 			uni.navigateTo({
-				url: '/myPages/coupon/index',
+				url:'/myPages/coupon/index'
 			})
-		},
-		// 去新老系统切换
-		gotoSystemSwitch() {
-			if (this.$isDataEmpty(this.userInfo.createWay)) {
-				uni.navigateTo({
-					url: '/pages/system/system-switch',
-					params: {}
-				})
-			}
-			if (this.userInfo.createWay == 1) { // 判断是否同步过老系统
-				uni.showToast({
-					title: "你已经同步过，无需重复操作"
-				})
-			}
-		},
+		}
 	}
 }
 </script>
 
-<style scoped lang="scss" >
-@import '/common/css/common.css';
-@import './index.rpx.scss';
+<style>
+
+	@import '/common/css/common.css';
+	@import './index.rpx.css';
 </style>