Merge pull request 'dengjie commit : 会员中心及其联系客服页面初步完成' (#11) from dengjie into dev

Reviewed-on: http://git.hchyun.com/feashow/pupil/pulls/11

components/myAvatar/myAvatar.vue

@@ -0,0 +1,32 @@
+<template>
+	<view class="my_avatar">
+		<view style="border: 1px solid #EEEEEE;border-radius: 50rpx;">
+			<u--image :src="avatar" width="100rpx" height="100rpx" :lazy-load="true" shape="circle">
+			</u--image>
+		</view>
+		<view style="margin-top: 10rpx;margin-bottom: 4rpx;">
+			<u--image v-if="show==false" :src="normal" width="84rpx" height="30rpx" :lazy-load="true">
+			</u--image>
+			<u--image v-else :src="VIP" width="84rpx" height="30rpx" :lazy-load="true">
+			</u--image>
+		</view>
+		<text>顾发航</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "myAvatar",
+		data() {
+			return {
+				avatar: '/static/my/avatar.png',
+				normal: '/static/my/wo_icon_pthy.png',
+				VIP: '/static/my/wo_icon_vip.png',
+			};
+		}
+	}
+</script>
+
+<style>
+
+</style>

components/myForm/myForm.vue

@@ -11,52 +11,20 @@
 				</u--input>
 			</u-form-item>
 		</u--form>
-		<u-button type="success" text="确定" color="#0EBB5B"></u-button>
 	</view>
 </template>
 
 <script>
 	export default {
+		name: "form",
 		data() {
 			return {
 
-			}
+			};
-		},
-		methods: {
-
 		}
 	}
 </script>
 
-<style lang="scss">
+<style>
-	.u-form {
-		margin-top: 20rpx;
-	}
 
-	.u-form-item__body__left {
-		width: auto !important;
-		color: #3E3E3E;
-		margin-left: 20rpx;
-		margin-right: 50rpx;
-	}
-
-	.u-form-item__body {
-		padding: 24rpx 0 !important;
-	}
-
-	.u-form-item__body__left__content__label {
-		font-size: 24rpx !important;
-	}
-
-	.u-form-item {
-		background-color: #fff;
-	}
-
-	.u-button {
-		width: 644rpx !important;
-		height: 86rpx !important;
-		background: #0EBB5B;
-		border-radius: 20rpx !important;
-		margin-top: 168rpx;
-	}
 </style>

pages.json

@@ -44,7 +44,7 @@
 			}
 		},
 		{
-			"path": "pages/news/news",
+			"path": "pages/report/news/news",
 			"style": {
 				"navigationBarTitleText": "行内新闻",
 				"navigationBarTextStyle": "white",
@@ -53,7 +53,7 @@
 			}
 
 		}, {
-			"path": "pages/certifiedCj/certifiedCj",
+			"path": "pages/report/certifiedCj/certifiedCj",
 			"style": {
 				"navigationBarTitleText": "认证厂家",
 				"navigationBarTextStyle": "white",
@@ -88,7 +88,7 @@
 			}
 
 		}, {
-			"path": "pages/bindCompony/bindCompony",
+			"path": "pages/my/bindCompony/bindCompony",
 			"style": {
 				"navigationBarTitleText": "绑定公司",
 				"navigationBarTextStyle": "white",
@@ -97,13 +97,21 @@
 			}
 
 		}, {
-			"path": "pages/browseHistory/browseHistory",
+			"path": "pages/my/browseHistory/browseHistory",
 			"style": {
 				"navigationBarTitleText": "浏览记录",
 				"navigationBarTextStyle": "white",
 				"navigationBarBackgroundColor": "#12CA64",
 				"enablePullDownRefresh": false
 			}
+		}, {
+			"path": "pages/my/memberCenter/memberCenter",
+			"style": {
+				"navigationBarTitleText": "会员中心",
+				"navigationBarTextStyle": "white",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": false
+			}
 		}
 	],
 	"tabBar": {

pages/my/bindCompony/bindCompony.vue

@@ -0,0 +1,29 @@
+<template>
+	<view>
+		<myForm></myForm>
+		<u-button type="success" text="确定" color="#0EBB5B"></u-button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss">
+	.u-button {
+		width: 644rpx !important;
+		height: 86rpx !important;
+		background: #0EBB5B;
+		border-radius: 20rpx !important;
+		margin-top: 168rpx;
+	}
+</style>

pages/my/memberCenter/memberCenter.vue

@@ -0,0 +1,91 @@
+<template>
+	<view>
+		<u-navbar :autoBack="true" title="会员中心"></u-navbar>
+		<u--image src="/static/my/wo_icon_hyzxbj.png" width="750rpx" height="349rpx" :lazy-load="true">
+		</u--image>
+		<myAvatar></myAvatar>
+		<myForm></myForm>
+		<view class="commitment">
+			{{commitment}}
+		</view>
+
+		<u-button type="success" text="升级VIP" color="#0EBB5B" @click="showModal()"></u-button>
+		<u-modal :show="showM" closeOnClickOverlay confirmText="确定" @confirm="confirm" @close="close">
+			<rich-text :nodes="content"></rich-text>
+		</u-modal>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				showM: false,
+				content: `请保持手机畅通<br>
+								客服会及时联系您`,
+
+				commitment: '承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置承诺声明预留文字位置'
+			}
+		},
+		methods: {
+			// 联系客服模态框
+			showModal() {
+				this.showM = true
+			},
+			confirm() {
+				this.showM = false
+			},
+			cancel() {
+				this.showM = false
+			},
+			close() {
+				this.showM = false
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.commitment {
+		font-size: 26rpx;
+		font-family: PingFangSC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #C8C8C8;
+		line-height: 28rpx;
+		margin: 40rpx 66rpx;
+	}
+
+	.u-button {
+		width: 644rpx !important;
+		height: 86rpx !important;
+		background: #0EBB5B;
+		border-radius: 20rpx !important;
+	}
+
+	.u-modal {
+		width: 472rpx !important;
+	}
+
+	.u-modal__content {
+		padding: 43rpx 104rpx !important;
+		text-indent: 14rpx;
+	}
+
+	.u-modal__content__text {
+		font-size: 32rpx !important;
+		font-weight: 400;
+		color: #252421 !important;
+	}
+
+	.u-modal__button-group__wrapper--hover {
+		background: #0EBB5B !important;
+	}
+
+	.u-modal__button-group__wrapper--confirm {
+		background: #0EBB5B;
+
+		.u-modal__button-group__wrapper__text {
+			color: #fff !important;
+		}
+	}
+</style>

pages/my/my.vue

@@ -4,31 +4,28 @@
 		<u-navbar :autoBack="false" title="我的"></u-navbar>
 		<u--image src="/static/my/wo_icon_bj1.png" width="750rpx" height="349rpx" :lazy-load="true">
 		</u--image>
-		<view class="my_avatar">
+		<myAvatar></myAvatar>
-			<view style="border: 1px solid #EEEEEE;border-radius: 50rpx;">
-				<u--image :src="avatar" width="100rpx" height="100rpx" :lazy-load="true" shape="circle">
-				</u--image>
-			</view>
-			<view style="margin-top: 10rpx;margin-bottom: 4rpx;">
-				<u--image v-if="show==false" :src="normal" width="84rpx" height="30rpx" :lazy-load="true">
-				</u--image>
-				<u--image v-else :src="VIP" width="84rpx" height="30rpx" :lazy-load="true">
-				</u--image>
-			</view>
-			<text>顾发航</text>
-		</view>
 		<view class="table">
 			<u-cell-group>
 				<u-cell size="large" title="绑定公司" icon="/static/my/wo_icon_bd.png" :isLink="true" value="未绑定公司"
 					@click="bindCompany()">
 				</u-cell>
-				<u-cell size="large" title="会员中心" icon="/static/my/wo_icon_hyzx.png" :isLink="true"></u-cell>
+				<u-cell size="large" title="会员中心" icon="/static/my/wo_icon_hyzx.png" :isLink="true"
+					@click="toMemberCenter()"></u-cell>
 				<u-cell size="large" title="浏览记录" icon="/static/my/wo_icon_lljl.png" :isLink="true"
 					@click="toBrowseHistory()"></u-cell>
 				<u-cell size="large" title="我的收藏" icon="/static/my/wo_icon_sc.png" :isLink="true"
 					@click="toMyCollect()"></u-cell>
-				<u-cell size="large" title="联系客服" icon="/static/my/wo_icon_lxkf.png" :isLink="true"></u-cell>
+				<u-cell size="large" title="联系客服" icon="/static/my/wo_icon_lxkf.png" :isLink="true"
+					@click="showModal()">
+				</u-cell>
 			</u-cell-group>
+
+
+			<u-modal :show="showM" showCancelButton closeOnClickOverlay confirmText="是" cancelText="否"
+				@confirm="confirm" @cancel="cancel" @close="close">
+				<rich-text :nodes="content"></rich-text>
+			</u-modal>
 		</view>
 
 	</view>
@@ -38,70 +35,65 @@
 		data() {
 			return {
 				show: false,
-				avatar: '/static/my/avatar.png',
+				showM: false,
-				normal: '/static/my/wo_icon_pthy.png',
+				content: `138 1222 222<br>
-				VIP: '/static/my/wo_icon_vip.png',
+								是否拨打客服电话`,
+
 			}
 		},
 		methods: {
 			//跳转到绑定公司页面
 			bindCompany() {
 				uni.navigateTo({
-					url: '/pages/bindCompony/bindCompony'
+					url: '/pages/my/bindCompony/bindCompony'
+				})
+			},
+			//跳转到会员中心页面
+			toMemberCenter() {
+				uni.navigateTo({
+					url: '/pages/my/memberCenter/memberCenter'
 				})
 			},
 			//跳转到浏览记录页面
 			toBrowseHistory() {
 				uni.navigateTo({
-					url: '/pages/browseHistory/browseHistory?id=' + 1
+					url: '/pages/my/browseHistory/browseHistory?id=' + 1
 				})
 			},
 			//跳转到我的收藏页面
 			toMyCollect() {
 				uni.navigateTo({
-					url: '/pages/browseHistory/browseHistory?id=' + 2
+					url: '/pages/my/browseHistory/browseHistory?id=' + 2
 				})
-			}
+			},
+			// 联系客服模态框
+			showModal() {
+				this.showM = true
+			},
+			confirm() {
+				this.showM = false
+				let phone = '‭1381222222‬'
+				uni.makePhoneCall({
+					phoneNumber: phone,
+					success: function() {
+						console.log('拨打电话成功');
+					},
+					fail() {
+						console.log('打电话失败了');
+					}
+				})
+			},
+			cancel() {
+				this.showM = false
+			},
+			close() {
+				this.showM = false
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
-	.u-status-bar {
-		background-color: transparent !important;
-	}
-
-	.u-navbar__content {
-		background-color: transparent !important;
-	}
-
-	.u-navbar__content__title {
-		color: #fff !important;
-	}
-
-	.uicon-arrow-left {
-		display: none !important;
-	}
-
-	.my_avatar {
-		position: absolute;
-		right: 325rpx;
-		top: 148rpx;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-
-
-		text {
-			font-size: 26rpx;
-			font-family: PingFangSC-Medium, PingFang SC;
-			font-weight: 500;
-			color: #FFFFFF;
-			line-height: 37rpx;
-
-		}
-	}
-
 	.table {
 		background-color: #fff;
 		margin-top: 50rpx;
@@ -135,4 +127,37 @@
 		font-size: 24rpx !important;
 		color: #CCCCCC !important;
 	}
+
+	.u-modal {
+		width: 472rpx !important;
+
+	}
+
+	.u-modal__button-group__wrapper--cancel {
+
+		background: #D8D8D8;
+
+		.u-modal__button-group__wrapper__text {
+			color: #fff !important;
+		}
+	}
+
+	.u-modal__content {
+		padding: 43rpx 104rpx !important;
+		text-indent: 25rpx;
+	}
+
+	.u-modal__content__text {
+		font-size: 32rpx !important;
+		font-weight: 400;
+		color: #252421 !important;
+	}
+
+	.u-modal__button-group__wrapper--confirm {
+		background: #0EBB5B;
+
+		.u-modal__button-group__wrapper__text {
+			color: #fff !important;
+		}
+	}
 </style>

pages/report/report.vue

@@ -70,11 +70,11 @@
 				//点击行内新闻时
 				if (listIndex == 0) {
 					uni.navigateTo({
-						url: '/pages/news/news'
+						url: '/pages/report/news/news'
 					})
 				} else if (listIndex == 2) {
 					uni.navigateTo({
-						url: '/pages/certifiedCj/certifiedCj'
+						url: '/pages/report/certifiedCj/certifiedCj'
 					})
 				}
 			},

static/styles/form.scss

@@ -0,0 +1,22 @@
+.u-form {
+		margin-top: 20rpx;
+	}
+
+	.u-form-item__body__left {
+		width: auto !important;
+		color: #3E3E3E;
+		margin-left: 20rpx;
+		margin-right: 50rpx;
+	}
+
+	.u-form-item__body {
+		padding: 24rpx 0 !important;
+	}
+
+	.u-form-item__body__left__content__label {
+		font-size: 24rpx !important;
+	}
+
+	.u-form-item {
+		background-color: #fff;
+	}

static/styles/myAvatar.scss

@@ -0,0 +1,35 @@
+.u-status-bar {
+		background-color: transparent !important;
+	}
+
+	.u-navbar__content {
+		background-color: transparent !important;
+	}
+
+	.u-navbar__content__title {
+		color: #fff !important;
+	}
+
+	.uicon-arrow-left {
+		// display: none !important;
+		color: #fff !important;
+	}
+
+	.my_avatar {
+		position: absolute;
+		right: 325rpx;
+		top: 148rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+
+
+		text {
+			font-size: 26rpx;
+			font-family: PingFangSC-Medium, PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
+			line-height: 37rpx;
+
+		}
+	}

uni.scss

@@ -14,6 +14,8 @@
 @import 'uview-ui/theme.scss';
 @import 'static/styles/products.scss';
 @import 'static/styles/news.scss';
+@import 'static/styles/myAvatar.scss';
+@import 'static/styles/form.scss';
 
 /* 颜色变量 */