设置 联系客服 注销账号 修改密码 修改手机号 找回密码

assets/img/riFill-customer-service-2-fill 1.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" width="20" height="20" style="" filter="none">
+    
+    <g>
+    <path d="M28 10.667c1.473 0 2.667 1.194 2.667 2.667v0 5.333c0 1.473-1.194 2.667-2.667 2.667v0h-1.416c-0.686 5.289-5.163 9.333-10.584 9.333v0-2.667c4.418 0 8-3.582 8-8v0-8c0-4.418-3.582-8-8-8s-8 3.582-8 8v0 9.333h-4c-1.473 0-2.667-1.194-2.667-2.667v0-5.333c0-1.473 1.194-2.667 2.667-2.667v0h1.416c0.687-5.289 5.163-9.332 10.584-9.332s9.897 4.043 10.578 9.278l0.006 0.054h1.416zM10.347 21.047l1.413-2.261c1.199 0.762 2.66 1.215 4.227 1.215 0.005 0 0.009 0 0.014 0h-0.001c0.004 0 0.008 0 0.013 0 1.567 0 3.028-0.453 4.26-1.234l-0.032 0.019 1.413 2.261c-1.599 1.017-3.548 1.62-5.637 1.62-0.006 0-0.011 0-0.017 0h0.001c-0.005 0-0.011 0-0.016 0-2.089 0-4.038-0.604-5.68-1.646l0.043 0.026z" fill="rgba(255,255,255,1)"></path>
+    </g>
+  </svg>

pages.json

@@ -256,6 +256,54 @@
         		"navigationBarTitleText" : "",
         		"enablePullDownRefresh" : false
         	}
+        },
+        {
+        	"path" : "pages/businessHall/mine/setting",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/mine/contactService",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/mine/cancelAccount",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/mine/changePassword",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/mine/changePhone",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
+        },
+        {
+        	"path" : "pages/businessHall/mine/findBackPassword",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "",
+        		"enablePullDownRefresh" : false
+        	}
         }
        
     ],

pages/businessHall/mine/cancelAccount.vue

@@ -0,0 +1,130 @@
+<template>
+	<view>
+		<u-navbar title="注销账号" title-color="#101010"></u-navbar>
+		<view class="background">
+			<view class="main">
+				<view class="top">
+					<view class="img-box">
+						<image class="img" src="../../../assets/img/vessel.svg" mode=""></image>
+					</view>
+				</view>
+				<view class="content">
+					<p>我们很遗憾您做出注销帐号的决定，在决定注销前请您仔细阅读以下内容：</p>
+
+					<p>1.您应确保您有权决定该账户的注销事宜,不侵犯任何第三方的合法权益,如因此引发任何投诉争议,由您自行承担。</p>
+
+					<p>2.帐号注销后您无法再使用本产品的各项服务，您的个人信息及使用记录也将被清空。</p>
+					<p>3.如您已被国家机关调查或正处于诉讼、仲裁程序中，请注意，注销您的帐号并不代表此帐号注销前的帐号行为和相关责任得到豁免或减轻。</p>
+					</p>
+					<view class="notice">
+						注：本平台暂不提供线上注销账号功能，如您确有注销需求，可拨打客服电话沟通解决。
+					</view>
+
+				</view>
+
+
+			</view>
+		</view>
+		<!-- 底部 -->
+		<view class="bottom">
+			<button class="service">
+				<view>
+					<image class="img" src="@/assets/img/riFill-customer-service-2-fill 1.svg" mode=""></image>
+				</view>
+				客服电话（7:00-24:00）
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	.background {
+		position: relative;
+		height: 200px;
+		background: linear-gradient(180deg, rgba(255, 217, 217, 1) 0%, rgba(255, 217, 217, 0) 100%);
+
+		.main {
+			position: absolute;
+			top: 24rpx;
+			left: 32rpx;
+			right: 32rpx;
+			background-color: #fff;
+			border-radius: 8px;
+			overflow: hidden;
+
+			.top {
+				background: linear-gradient(180deg, rgba(255, 100, 106, 1) 0%, rgba(255, 161, 164, 1) 98%);
+				height: 204rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				.img-box {
+
+					.img {
+						width: 144rpx;
+						height: 144rpx;
+
+						// box-shadow: 0px 6px 10px 0px rgba(255,0,9,1);
+
+
+					}
+				}
+
+
+			}
+
+			.content {
+				padding: 32rpx;
+				line-height: 46rpx;
+				color: rgb(16,16,16);
+				p{
+					margin-bottom: 16rpx;
+				}
+				.notice{
+					font-weight: bold;
+				}
+			}
+
+		}
+	}
+
+	// 底部
+	.bottom {
+		background-color: #fff;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 24rpx 32rpx;
+
+		.service {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			color: rgba(255, 255, 255, 1);
+			font-size: 32rpx;
+			border-radius: 50px;
+			background: linear-gradient(-88.46deg, rgba(34, 109, 198, 1) 2.59%, rgba(9, 158, 237, 1) 97.02%);
+		}
+
+		.img {
+			width: 40rpx;
+			height: 40rpx;
+			vertical-align: middle;
+			margin-right: 16rpx;
+		}
+	}
+</style>

pages/businessHall/mine/changePassword.vue

@@ -0,0 +1,60 @@
+<template>
+	<view>
+		<u-navbar title="修改密码" title-color="#101010"></u-navbar>
+		<view class="main">
+			<view class="original-password">
+				<text>原密码	</text><u-input  v-model="password" style="padding: 0 0 0 20px" class="password-input" type="password"  placeholder="填写原密码" :password-icon="true" />
+			</view>
+			<view class="new-password">
+				<text>新密码</text><u-input  v-model="password" style="padding: 0 0 0 20px" class="password-input" type="password"  placeholder="创建6-16位组合新密码" :password-icon="true" />
+			</view>
+		</view>
+		<!-- 确认修改 -->
+		<button class="confirm">确认修改</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main{
+		background-color: #fff;
+		margin-top: 24rpx;
+		.original-password,.new-password{
+			line-height: 96rpx;
+			padding:0 32rpx;
+			display: flex;
+			align-items: center;
+			border-bottom: 1px solid rgba(221,221,221,1);
+			/deep/.u-input__input{
+				height: 96rpx;
+			}
+		}
+		text{
+			display: inline-block;
+			width: 128rpx;
+			color: rgba(51,51,51,1);
+			font-size: 32rpx;
+		}
+	}
+  // 确认修改
+  .confirm{
+	  border-radius: 8px;
+	  background-color: rgba(22,119,255,1);
+	  color: rgba(255,255,255,1);
+	  font-size: 32rpx;
+	  line-height: 88rpx;
+	  margin: 24rpx 32rpx;
+  }
+</style>

pages/businessHall/mine/changePhone.vue

@@ -0,0 +1,66 @@
+<template>
+	<view>
+		<u-navbar title="修改手机号" title-color="#101010"></u-navbar>
+		<view class="main">
+			<view class="original-password">
+				<text>新手机号</text><u-input  v-model="password" style="padding: 0 0 0 20px"  maxlength="11" type="number"  placeholder="请填写新手机号"  />
+			</view>
+			<view class="new-password">
+				<text>验证码</text><u-input  v-model="password" style="padding: 0 0 0 20px" maxlength="6" type="number"  placeholder="6位验证码"  /><text class="verification-code">获取验证码</text>
+			</view>
+		</view>
+		<!-- 确认修改 -->
+		<button class="confirm">确认修改</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main{
+		background-color: #fff;
+		margin-top: 24rpx;
+		.original-password,.new-password{
+			line-height: 96rpx;
+			padding:0 32rpx;
+			display: flex;
+			align-items: center;
+			border-bottom: 1px solid rgba(221,221,221,1);
+			/deep/.u-input__input{
+				height: 96rpx;
+			}
+			
+		}
+		text{
+			display: inline-block;
+			width: 128rpx;
+			color: rgba(51,51,51,1);
+			font-size: 32rpx;
+		}
+		.verification-code{
+			width: 160rpx;
+			color: rgba(22,119,255,1);
+			font-size: 32rpx;
+		}
+	}
+  // 确认修改
+  .confirm{
+	  border-radius: 8px;
+	  background-color: rgba(22,119,255,1);
+	  color: rgba(255,255,255,1);
+	  font-size: 32rpx;
+	  line-height: 88rpx;
+	  margin: 24rpx 32rpx;
+  }
+</style>

pages/businessHall/mine/contactService.vue

@@ -0,0 +1,119 @@
+<template>
+	<view>
+		<u-navbar title="联系客服"  title-color="#101010" ></u-navbar>
+		<view class="background">
+			<view class="common-problem">
+				<view class="headline">
+					常见问题
+				</view>
+				<!-- 标签 -->
+				<view class="tabs">
+					<u-tabs :list="list"  font-size="28" :is-scroll="false" :current="current" @change="change"></u-tabs>
+				</view>
+				<!-- 问题 -->
+				<view class="problems">
+					<u-collapse accordion="false">
+							<u-collapse-item :title="item.head" v-for="(item, index) in itemList" :open="item.open" :key="index">
+								{{item.body}}
+							</u-collapse-item>
+						</u-collapse>
+				</view>
+			</view>
+		</view>
+		<!-- 底部 -->
+		<view class="bottom">
+			<button class="service">
+				<view>
+					<image class="img" src="@/assets/img/riFill-customer-service-2-fill 1.svg" mode=""></image>
+				</view>
+				客服电话（7:00-24:00）
+			</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '软件使用'
+				}, {
+					name: '支付及退款'
+				}, {
+					name: '发票相关问题',
+					
+				}],
+				itemList: [{
+									head: "常见问题1",
+									body: "只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来",
+									open: true,
+									
+								},{
+									head: "常见问题2",
+									body: "学会欣赏，实际是一种积极生活的态度，是生活的调味品，会在欣赏中发现生活的美",
+									open: false,
+								},{
+									head: "常见问题3",
+									body: "但是据说雕刻大卫像所用的这块大理石，曾被多位雕刻家批评得一无是处，有些人认为这块大理石采凿得不好，有些人嫌它的纹路不够美",
+									open: false,
+								}],
+				current: 0
+			}
+		},
+		methods: {
+			change(index) {
+				this.current = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.background{
+		position: relative;
+		height: 200px;
+		background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
+		.common-problem{
+			position: absolute;
			top: 24rpx;
			left: 32rpx;
			right: 32rpx;
			background-color: #fff;
			border-radius: 8px;
			padding: 40rpx 32rpx;
			.headline{
+				color: rgba(16,16,16,1);
+				font-size: 36rpx;
+			}
+			// 标签
+			.tabs{
+				width: 524rpx;
+				border-top: 1px solid rgba(232,232,232,1);
+				margin-top: 28rpx;
+			}
+			.problems{
+				margin-top: 8rpx;
+			}
+		}
+	}
+  // 底部
+  .bottom{
+	  background-color: #fff;
+	  position: fixed;
+	  bottom: 0;
+	  left: 0;
+	  right: 0;
+	  padding: 24rpx 32rpx;
+	  
+	  .service{
+		  display: flex;
+		  justify-content: center;
+		  align-items: center;	
+		  
+		  color: rgba(255,255,255,1);
+		  font-size: 32rpx;
+		  border-radius: 50px;
+		  background: linear-gradient(-88.46deg, rgba(34,109,198,1) 2.59%,rgba(9,158,237,1) 97.02%);
+	  }
+	  .img{
+		  width: 40rpx;
+		  height: 40rpx;
+		  vertical-align: middle;
+		  margin-right: 16rpx;
+	  }
+  }
+</style>

pages/businessHall/mine/findBackPassword.vue

@@ -0,0 +1,69 @@
+<template>
+	<view>
+		<u-navbar title="找回密码" title-color="#101010"></u-navbar>
+		<view class="main">
+			<view class="original-password">
+				<text>手机号码</text><u-input  v-model="password" style="padding: 0 0 0 20px"  maxlength="11" type="number"  placeholder="请填写手机号"  />
+			</view>
+			<view class="new-password">
+				<text>验证码</text><u-input  v-model="password" style="padding: 0 0 0 20px" maxlength="6" type="number"  placeholder="6位验证码"  /><text class="verification-code">获取验证码</text>
+			</view>
+			<view class="new-password">
+				<text>新密码</text><u-input  v-model="password" style="padding: 0 0 0 20px" class="password-input" type="password"  placeholder="创建6-16位组合新密码" :password-icon="true" />
+			</view>
+		</view>
+		<!-- 确认修改 -->
+		<button class="confirm">提交</button>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.main{
+		background-color: #fff;
+		margin-top: 24rpx;
+		.original-password,.new-password{
+			line-height: 96rpx;
+			padding:0 32rpx;
+			display: flex;
+			align-items: center;
+			border-bottom: 1px solid rgba(221,221,221,1);
+			/deep/.u-input__input{
+				height: 96rpx;
+			}
+			
+		}
+		text{
+			display: inline-block;
+			width: 128rpx;
+			color: rgba(51,51,51,1);
+			font-size: 32rpx;
+		}
+		.verification-code{
+			width: 160rpx;
+			color: rgba(22,119,255,1);
+			font-size: 32rpx;
+		}
+	}
+  // 确认修改
+  .confirm{
+	  border-radius: 8px;
+	  background-color: rgba(22,119,255,1);
+	  color: rgba(255,255,255,1);
+	  font-size: 32rpx;
+	  line-height: 88rpx;
+	  margin: 24rpx 32rpx;
+  }
+</style>

pages/businessHall/mine/setting.vue

@@ -0,0 +1,49 @@
+<template>
+	<view>
+		<u-navbar title="设置"  title-color="#101010" ></u-navbar>
+		<u-cell-group>
+				<u-cell-item  title="个人信息" ></u-cell-item>
+				<u-cell-item  title="修改密码" ></u-cell-item>
+				<u-cell-item  title="修改手机号" value="15014040129" ></u-cell-item>
+				<u-cell-item  title="修改手机号" ></u-cell-item>
+			</u-cell-group>
+			
+			<view class="exit">
+				退出账号
+			</view>
+	</view>
+	
+	
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	/deep/.u-cell_title{
+		color: rgba(51,51,51,1);
+	}
+	/deep/.u-cell__value{
+		color: #777777;
+	};
+	
+	.exit{
+		background-color: #fff;
+		margin: 24rpx 0 0 0 ;
+		text-align: center;
+		line-height: 96rpx;
+		color: rgba(238,49,56,1);
+		font-size: 32rpx;
+	}
+
+</style>