Selaa lähdekoodia

feat:我的页面样式提交

xyh8905170 2 vuotta sitten
vanhempi
sitoutus
1ce7adc501

+ 0 - 6
App.vue

@@ -30,12 +30,6 @@
 
                 },
             })
-
-
-
-
-
-
 			console.log('App Launch')
 		},
 		onShow: function() {

+ 90 - 0
common/js/commonUtils.js

@@ -0,0 +1,90 @@
+// commonUtils.js
+const http = uni.$u.http
+
+// 判断数据是否为空
+function isDataEmpty(data) {
+  if (data === null || data === undefined) {
+    return true;
+  }
+  
+  if (typeof data === 'string' && data.trim() === '') {
+    return true;
+  }
+  
+  if (Array.isArray(data) && data.length === 0) {
+    return true;
+  }
+  
+  if (typeof data === 'object' && Object.keys(data).length === 0) {
+    return true;
+  }
+  
+  return false;
+}
+
+// 日期转换
+function formatDate(timestamp) {
+	const date = new Date(timestamp);
+	const year = date.getFullYear();
+	const month = (date.getMonth() + 1).toString().padStart(2, '0');
+	const day = date.getDate().toString().padStart(2, '0');
+	return `${year}-${month}-${day}`;
+}
+
+// 日期转换
+function dateFormatYmd(dateStr) { 
+	const timestamp = new Date(dateStr).getTime();
+	const date = new Date(timestamp);
+	const year = date.getFullYear();
+	const month = (date.getMonth() + 1).toString().padStart(2, '0');
+	const day = date.getDate().toString().padStart(2, '0');
+	return `${year}-${month}-${day}`;
+}
+
+// 获取服务器图片
+async function getImgUrlByOssId(ossId){ 
+	console.log(ossId)
+	if(ossId){
+		try {
+			const res = await uni.$u.http.get('/resource/oss/listByIds/'+ossId,{data: {auth: true}}); 
+			if(res.length > 0){
+				console.log(res[0].url);
+				const url = res[0].url;
+				return url.replace(/^http:/, "https:");
+			}
+		} catch (err) { 
+			await uni.showToast({ 
+				title: "操作失败" 
+			}); 
+		} 
+	}
+	return null;
+}
+
+// 刷新用户登录信息
+async function refreshUserLoginInfo(){ 
+	uni.$u.http.get('/member/wechat/getUserInfo',{data: {auth: true}}).then((res)=>{
+		// 数据获取token
+		this.$store.commit('updateLoginUserInfo', res);
+		console.log(this.$store.state.loginUserInfo)
+	}).catch(() =>{
+		uni.showToast({
+			title: "操作失败"
+		})
+	});
+}
+
+// 替换http为https
+function replaceHttpWithHttps(url){
+	return url.replace(/^http:/, "https:");
+}
+
+// 导出工具类方法
+export default {
+  isDataEmpty,
+  formatDate,
+  dateFormatYmd,
+  getImgUrlByOssId,
+  refreshUserLoginInfo,
+  replaceHttpWithHttps
+};

+ 1 - 0
main.js

@@ -3,6 +3,7 @@ import App from './App'
 import Vue from 'vue'
 import './uni.promisify.adaptor'
 import api from './common/js/api'
+
 import uView from "uview-ui";
 const baseUrl = 'https://jje.admin.xinyuekj.com.cn/';
 Vue.use(uView);

+ 7 - 0
myPages/recharge/index.css

@@ -0,0 +1,7 @@
+.tabBarLineHeight{
+    height: 138rpx;
+}
+.tabBarView{
+    position: fixed;
+    bottom: 0;
+}

+ 9 - 4
orderPages/goodsDetail/index.vue → myPages/recharge/index.vue

@@ -1,21 +1,26 @@
 <template>
 	<view class="content">
-		商品详情
+		储值
+
 	</view>
 </template>
 
 <script>
+	import tabBar from "../../components/tabBar/tabBar";
 	export default {
+		components:{
+			tabBar
+		},
 		data() {
 			return {
-				title: 'Hello'
 			}
 		},
 		onLoad() {
-
+			uni.hideTabBar({
+				animation:false
+			})
 		},
 		methods: {
-
 		}
 	}
 </script>

+ 0 - 0
orderPages/goodsDetail/index.rpx.css → orderDetail/index.rpx.css


+ 0 - 0
orderPages/orderDetail/index.vue → orderDetail/index.vue


+ 0 - 0
orderPages/orderDetail/index.rpx.css


+ 42 - 36
pages.json

@@ -3,7 +3,6 @@
 		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
 	},
 	"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
-
 		{
 			"path": "pages/login/login",
 			"style": {
@@ -11,7 +10,6 @@
 				"enablePullDownRefresh": false
 			}
 		},
-
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -29,7 +27,6 @@
 			"style": {
 				"navigationStyle": "custom"
 			}
-
 		},
 		{
 			"path": "pages/order/index",
@@ -43,66 +40,75 @@
 				"navigationBarTitleText": "我的"
 			}
 		}
-
-    ],
-
+	],
 	"subPackages": [
 		{
-		"root": "orderPages",
-		"pages": [{
-			"path": "orderDetail/index",
-			"style": {
-				"navigationBarTitleText": "订单详情",
-				"enablePullDownRefresh": false
-			}
-		}, {
-			"path": "goodsDetail/index",
-			"style": {
-				"navigationBarTitleText": "商品详情",
-				"enablePullDownRefresh": false
-			}
-		}]
-	},
+			"root": "orderPages",
+			"pages": [
+				{
+					"path": "orderDetail/index",
+					"style": {
+						"navigationBarTitleText": "订单详情",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
+					"path": "goodsDetail/index",
+					"style": {
+						"navigationBarTitleText": "商品详情",
+						"enablePullDownRefresh": false
+					}
+				}
+			]
+		},
+		{
+			"root": "myPages",
+			"pages": [
+				{
+					"path": "recharge/index",
+					"style": {
+						"navigationBarTitleText": "储值余额",
+						"enablePullDownRefresh": false
+					}
+				}
+			]
+		},
 		{
 			"root": "loginPages",
-			"pages": [{
-				"path": "bindAccount/index",
-				"style": {
-					"navigationBarTitleText": "绑定手机号",
-					"enablePullDownRefresh": false
+			"pages": [
+				{
+					"path": "bindAccount/index",
+					"style": {
+						"navigationBarTitleText": "绑定手机号",
+						"enablePullDownRefresh": false
+					}
 				}
-			}]
+			]
 		}
-
 	],
-
 	"tabBar": {
 		"color": "#282828",
 		"selectedColor": "#B22338",
 		"borderStyle": "white",
 		"backgroundColor": "#ffffff",
-		"list": [{
+		"list": [
+			{
 				"pagePath": "pages/index/index"
 			},
 			{
 				"pagePath": "pages/orderMeal/index"
-
 			},
 			{
 				"pagePath": "pages/qrCode/index"
-
 			},
 			{
 				"pagePath": "pages/order/index"
-
 			},
 			{
 				"pagePath": "pages/my/index"
-
 			}
 		]
 	},
-
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "加载中",
@@ -111,4 +117,4 @@
 		"titleNView": false
 	},
 	"uniIdRouter": {}
-}
+}

+ 0 - 111
pages/my/index.rpx.css

@@ -1,111 +0,0 @@
-.content-wrap {
-    background: #F9F9F9;
-    height: 100%;
-}
-
-.tabBarView {
-    position: fixed;
-    bottom: 0;
-}
-
-.head-wrap {
-    position: relative;
-    width: 750rpx;
-    height: 100%;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-}
-
-.content {
-    position: absolute;
-    top: 20%;
-    left: 34rpx;
-    right: 30rpx;
-    border-radius: 12rpx;
-}
-
-.user-info {
-    display: flex;
-    position: relative;
-    background-color: transparent;
-}
-
-.user-name {
-    height: 48rpx;
-    font-size: 32rpx;
-    font-weight: 500;
-    color: #333333;
-    line-height: 48rpx;
-}
-
-.user-desc {
-    height: 40rpx;
-    font-size: 24rpx;
-    font-weight: 400;
-    color: #333333;
-    line-height: 40rpx;
-}
-
-.head-right{
-transform: translateY(40rpx);
-}
-.user-head {
-    margin-right: 6px;
-    border-radius: 50%;
-    border: 6rpx solid rgba(184, 27, 27, 0);
-}
-
-.user-image {
-    width: 152rpx;
-    height: 152rpx;
-    box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(237, 86, 159, 0.1);
-    border: 2rpx solid #FFFFFF;
-    border-radius: 50%;
-}
-
-.balance-info {
-    width: 686rpx;
-    height: 268rpx;
-    background: #d11515;
-    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 224, 92, 0.05);
-    border-radius: 20rpx;
-    position: relative;
-    z-index: 2;
-}
-
-.balance-name {
-    font-size: 32rpx;
-    font-weight: 700;
-    color: #333333;
-    line-height: 48rpx;
-    position: absolute;
-    top: 30rpx;
-    left: 30rpx;
-}
-
-.h-content {
-    width: 100%;
-    margin: 24rpx;
-    display: flex;
-    justify-content: space-around;
-    position: absolute;
-    bottom: 10rpx;
-}
-
-.button-wrap{
-    display: flex;
-    justify-content: center;
-    align-items: center; 
-}
-.nav-bar{
-    width: 686rpx;
-    background: #FFFFFF;
-    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 224, 92, 0.05);
-    border-radius: 20rpx;
-    position: relative;
-}
-
-.nav-bar1{
-    
-}

+ 199 - 0
pages/my/index.rpx.scss

@@ -0,0 +1,199 @@
+.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;
+						}
+					}
+				}
+			}
+		}
+	}
+
+
+
+}

+ 174 - 39
pages/my/index.vue

@@ -4,23 +4,26 @@
 			<view class="content-info">
 				<!-- 轮播图 -->
 				<view class="head-bg">
-					<img src="/static/me/u655.png" style="height: 520rpx;width: 750rpx;" alt="">
+					<u-swiper :list="bannerList" :height="340"></u-swiper>
 				</view>
 				<view class="content">
 					<!-- 用户信息 -->
 					<view @click="perfectUserInfo()" class="user-info">
 						<view class="user-head">
-							<image class="user-image" v-if="userInfo.selfPhotoUrl" :src="userInfo.selfPhotoUrl" mode="">
-							</image>
-							<image class="user-image" v-else src="../../static/logo.png" mode=""></image>
+							<image v-if="userInfo.selfPhotoUrl" :src="userInfo.selfPhotoUrl" mode=""></image>
+							<image v-else src="../../static/logo.png" mode=""></image>
 						</view>
-						<view class="head-right">
+						<view class="h-content">
 							<view class="user-name">
-								<strong>HI,亲爱的{{ userInfo.ncikName }}</strong>
+								<text>HI,亲爱的{{ userInfo.ncikName }}</text>
 							</view>
 							<view class="user-desc">
 								<view class="h-text">
-									<view>你当前的个人资料尚不完善,去完善 <uni-icons type="right" size="15"></uni-icons></view>
+									<text>你当前的个人资料尚不完善</text>
+									<text>去完善</text>
+								</view>
+								<view class="h-arrow">
+									<u-icon name="arrow-right" color="#333333" size="16"></u-icon>
 								</view>
 							</view>
 						</view>
@@ -41,22 +44,22 @@
 											余额
 										</view>
 										<view class="num">
-											999
+											¥{{ userInfo.balance }}
 										</view>
 									</view>
 								</view>
 							</view>
 							<view class="button-wrap">
-								<view class="btn">
+								<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" style="font-size: 24rpx;">
+										<view class="name">
 											积分
 										</view>
 										<view class="num">
-											999
+											{{ userInfo.integral }}
 										</view>
 									</view>
 								</view>
@@ -71,7 +74,7 @@
 											优惠券
 										</view>
 										<view class="num">
-											999
+											{{ userInfo.coupon }}
 										</view>
 									</view>
 								</view>
@@ -86,7 +89,7 @@
 											电子币
 										</view>
 										<view class="num">
-											999
+											{{ userInfo.electronicCurrency }}
 										</view>
 									</view>
 								</view>
@@ -94,11 +97,11 @@
 						</view>
 					</view>
 
-					<view class="nav-bar1">
+					<view class="nav-bar">
 						<view class="nav-content">
 							<view class="nav-info">
 								<view class="logo">
-									<image src="../../static/me/u1796.png" style="transform: scale(.2);" mode=""></image>
+									<image src="../../static/me/u1796.png" mode=""></image>
 								</view>
 								<view class="nav-desc">
 									<view class="nav-name">
@@ -112,11 +115,11 @@
 								</view>
 							</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" style="transform: scale(.2);" mode=""></image>
+									<image src="../../static/me/u1803.png" mode=""></image>
 								</view>
 								<view class="nav-desc">
 									<view class="nav-name">
@@ -133,24 +136,26 @@
 								</view>
 							</view>
 						</view>
-
+						<view class="custom-line"></view>
 						<view @click="gotoServiceObjectMgt()" class="nav-content">
-							<view class="logo">
-								<image src="../../static/me/u1812.png" style="transform: scale(.2);" mode=""></image>
-							</view>
-							<view class="nav-desc">
-								<view class="nav-name">
-									<view class="">服务对象管理</view>
+							<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="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="custom-line"></view>
 						<view class="nav-content">
 							<view @click="gotoSystemSwitch()" class="nav-info">
 								<view class="logo">
@@ -189,7 +194,7 @@
 						</view>
 					</view>
 
-					<view class="nav-bar2">
+					<view class="nav-bar">
 						<view @click="aboutOur()" class="nav-content">
 							<view class="nav-info">
 								<view class="logo">
@@ -246,10 +251,9 @@
 
 					</view>
 				</view>
-
-
 			</view>
 		</view>
+		<view class="tabBarLineHeight"></view>
 		<view class="tabBarView">
 			<tab-bar :tabIndex="tabIndex"></tab-bar>
 		</view>
@@ -258,6 +262,7 @@
 
 <script >
 import tabBar from "../../components/tabBar/tabBar";
+import { saveWechatUser } from '../../api/login/login';
 export default {
 	components: {
 		tabBar
@@ -267,20 +272,150 @@ export default {
 			title: 'Hello',
 			tabIndex: 4,
 			bannerList: [
-				,
+				'/static/me/u655.png',
 			],
+			userInfo: {
+				selfPhotoUrl: null
+			}
 		}
 	},
-	onLoad() {
-
+	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() { },
 	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',
+				params: {
+					name: 'lisa'
+				}
+			})
+		},
+		// 去实名认证
+		gotoRealNameAuth() {
+			let that = this;
+			console.log(that.userInfo.id)
+			uni.navigateTo({
+				url: '/pages/me/real-name-auth',
+				params: {
+					userId: that.userInfo.id
+				}
+			})
+		},
+		// 去优惠劵页面
+		gotoCoupon() {
+			uni.navigateTo({
+				url: '/pages/coupon/coupon',
+				params: {
+					name: 'lisa'
+				}
+			})
+		},
+		// 去新老系统切换
+		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 >
+<style scoped lang="scss" >
 @import '/common/css/common.css';
-@import './index.rpx.css';
+@import './index.rpx.scss';
 </style>