页面更新

pages.json

@@ -63,6 +63,13 @@
         	{
         		"navigationBarTitleText" : "照片详情"
         	}
+        },
+        {
+        	"path" : "pages/user/account/logout",
+        	"style" : 
+        	{
+        		"navigationBarTitleText" : "注销账号"
+        	}
         }
        
     ],

pages/user/account/index.vue

@@ -87,7 +87,7 @@
 			
 		</view>	
 		
-		<view class="form" style="margin-top: 20rpx;">
+		<view class="form" style="margin-top: 20rpx;" @click="logout">
 			<!--input box start-->
 						    <view class='input_box'>
 						      <view class='i_box_1'>注销账号</view>
@@ -247,7 +247,13 @@
 				_this.btn_disabled = false; 
 				
 			},
-			
+			//注销
+			logout()
+			{
+				uni.navigateTo({
+					url:'/pages/user/account/logout'
+				})
+			},
 			
 		}
 	}

pages/user/account/logout.vue

@@ -0,0 +1,126 @@
+<template>
+	<view class="container">
+		<u-parse :content="content" :tagStyle="style"></u-parse>
+		
+		<view class="btnBox" @click="logout">
+			确认注销
+		</view>	
+		
+		<u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
+		            <view class="popupBox">
+		                <view class="popupTop">
+							提醒
+						</view>
+						<view class="popupDesc">
+							是否确认注销账号？
+						</view>
+						<view class="popupBtn">
+							<view class="sbtnBox a1">取消</view>
+							<view class="sbtnBox a2">确认</view>
+						</view>
+		            </view>
+		</u-popup>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				content: `<h3>你正在申请注销合成照相馆的账号</h3>
+						 <p>1.账户注销后该账户账户下的全部数据将被删除，包括但不限于面部档案，写真等</p>
+						 <p>2.正在创建或已付费但未生成完毕的内容，都将马上停止并销毁。</p>
+						 <p>3.已支付但未交付的内容不能退款</p>
+						 <p>4.请知悉以上内容。</p>`,
+				style: {
+							// 字符串的形式
+							h3:'font-weight: 400;font-size: 32rpx;color: #333333;line-height: 46rpx;',
+							p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 40rpx;',
+							span: 'font-size: 24rpx'
+					 },
+				//弹窗
+				show: false,	
+			}
+		},
+		methods: {
+			logout(){
+				 this.show = true;
+			},
+			
+			open() {
+			   console.log('open');
+			},
+			close() {
+			   this.show = false;
+
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+.container{padding: 20rpx 20rpx; height: auto; background-color: #F5F6FB;}
+.btnBox{
+	width: 400rpx;
+	height: 88rpx;
+	border-radius: 44rpx;
+	border: 2rpx solid #9B75FF;
+	font-weight: 700;
+	font-size: 30rpx;
+	line-height: 88rpx;
+	text-align: center;
+	color: #9B75FF;
+	margin: 20rpx auto;
+
+}
+.popupBox{
+	width: 600rpx;
+	height: 320rpx;
+	border-radius: 24rpx;
+	background-color: #FFFFFF;
+}
+.popupTop{
+	width: 600rpx;
+	height: 140rpx;
+	background: linear-gradient(to bottom, #D3D5FF 30%, #FFFFFF 70%);
+	border-radius: 24rpx 24rpx 0rpx 0rpx;
+	line-height: 140rpx;
+	text-align: center;
+	font-weight: 700;
+	font-size: 30rpx;
+	color: #333333;
+}
+.popupDesc{
+	width: 100%;
+	font-weight: 400;
+	font-size: 28rpx;
+	color: #555555;
+	line-height: 40rpx;
+	text-align: center;
+}
+.popupBtn{ width: 100%; height: auto;
+    display: flex; flex-wrap: wrap;
+	justify-content: space-around; /* 使子元素在容器中均匀分布 */
+	align-items: center; /* 如果需要垂直居中子元素 */
+}
+.sbtnBox{
+	margin-top: 30rpx;
+	width: 226rpx;
+	height: 80rpx;
+	font-weight: 700;
+	font-size: 30rpx;
+	line-height: 80rpx;
+	border: 2rpx solid #4D94FF;
+	text-align: center;
+	border-radius: 44rpx;
+}
+
+.a1{
+	background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
+	color:#7A74F0;
+}
+.a2{
+	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
+	color:#FFFFFF;
+}
+</style>