修改密码样式

weapp/src/packages/changePassword/index.jsx

@@ -8,6 +8,7 @@ import './index.scss'
 
 function Index() {
   const userInfo = Taro.getStorageSync('userInfo') || null;
+  const [phone, setPhone] = useState(userInfo.phone)
   const [password, setPassword] = useState('')
   const [password2, setPassword2] = useState('')
 
@@ -45,7 +46,7 @@ function Index() {
     <View className='page'>
       <View className='phone'>
         <View className='title'>手机号码：</View>
-        <Input />
+        <Input value={phone} disabled={true} />
       </View>
       <View className='pswd'>
         <View className='title'>新的密码：</View>

weapp/src/packages/changePassword/index.scss

@@ -1,6 +1,35 @@
-.page {
-  height: 100vh;
-  width: 100vw;
+page {
   background-color: #f6f6f6;
+  font-size: 28px;
 
+  .phone {
+    height: 96px;
+    background-color: #fff;
+    margin: 20px auto;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+
+    .title {
+      margin-left: 30px;
+    }
+  }
+
+  .pswd {
+    height: 96px;
+    background-color: #fff;
+    margin-bottom: 5px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+
+    .title {
+      margin-left: 30px;
+    }
+  }
+
+  .btn {
+    width: 70%;
+    margin: 80px auto;
+  }
 }

weapp/src/packages/changePassword/success/index.jsx

@@ -2,6 +2,8 @@ import React from 'react'
 import Taro from '@tarojs/taro'
 import { View, Image } from '@tarojs/components'
 import { AtButton } from 'taro-ui'
+import './index.scss'
+import successIcon from '../../../static/img/changePassword/success.svg'
 
 function Index() {
   function handleClick() {
@@ -10,8 +12,11 @@ function Index() {
 
   return (
     <View>
-      修改成功
-      <AtButton onClick={handleClick}>返回登录</AtButton>
+      <View className='box'>
+        <Image className='img' src={successIcon} />
+        <View className='text'>修改成功！</View>
+      </View>
+      <AtButton className='btn' type='primary' onClick={handleClick}>返回登录</AtButton>
     </View>
   )
 }

weapp/src/packages/changePassword/success/index.scss

@@ -0,0 +1,26 @@
+page {
+  background-color: #f6f6f6;
+
+  .box {
+    background-color: #fff;
+    height: 360px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .img {
+      width: 160px;
+      height: 160px;
+    }
+
+    .text {
+      margin-top: 32px;
+    }
+  }
+
+  .btn {
+    width: 70%;
+    margin: 80px auto;
+  }
+}

weapp/src/static/img/changePassword/success.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页_我的修改密码-1" transform="translate(-148.000000, -99.000000)">
+            <g id="5.反馈/6.Progress进度条/进度圈/成功" transform="translate(148.000000, 99.000000)">
+                <path d="M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z M40,4 C20.117749,4 4,20.117749 4,40 C4,59.882251 20.117749,76 40,76 C59.882251,76 76,59.882251 76,40 C76,20.117749 59.882251,4 40,4 Z" id="Progress" fill="#52C41A"></path>
+                <g id="check" transform="translate(14.000000, 15.000000)">
+                    <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="48" height="48"></rect>
+                    <path d="M42.75,8.90625 L39.4734375,8.90625 C39.0140625,8.90625 38.578125,9.1171875 38.296875,9.478125 L18.9703125,33.9609375 L9.703125,22.21875 C9.4171875,21.8578125 8.9859375,21.646875 8.5265625,21.646875 L5.25,21.646875 C4.9359375,21.646875 4.7625,22.0078125 4.9546875,22.2515625 L17.79375,38.5171875 C18.39375,39.2765625 19.546875,39.2765625 20.1515625,38.5171875 L43.0453125,9.50625 C43.2375,9.2671875 43.0640625,8.90625 42.75,8.90625 Z" id="路径" fill="#52C41A"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>