更换WIFI

components/replaceNetwork_2/replaceNetwork_2.js

@@ -0,0 +1,56 @@
+const app = getApp();
+
+Component({
+    properties: {
+        ssid: {
+            type: String,
+            value: ""
+        }
+    },
+
+    data: {
+        type: true,
+
+        ssid: "",
+        password: ""
+    },
+  
+    // 生命周期方法
+    lifetimes: {
+        attached() {
+            
+        },
+        detached() {
+            
+        }
+    },
+  
+    // 组件的方法
+    methods: {
+        setWiFiName() {
+            this.setData({
+                ssid: this.properties.ssid,
+                type: true,
+            })
+        },
+
+        passwordInput(e) {
+            this.setData({
+                password: e.detail.value
+            })
+        },
+
+        inputTypeChange() {
+            this.setData({
+                type: !this.data.type
+            })
+        },
+
+        setWifiPWD() {
+            this.triggerEvent('wifiEvent', {
+                status: true,
+                data: this.data.password
+            });
+        }
+    }
+});

components/replaceNetwork_2/replaceNetwork_2.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

components/replaceNetwork_2/replaceNetwork_2.wxml

@@ -0,0 +1,36 @@
+<view class="replaceNetwork2">
+    <view class="title">输入Wi-Fi密码</view>
+    <view class="form">
+        <view>
+            <view>
+                <image src="/images/replaceNetwork/wifiPwd.png" />
+            </view>
+            <view>{{ssid}}</view>
+        </view>
+        <view>
+            <view>密码</view>
+            <view>
+                <block wx:if="{{type}}">
+                    <input 
+                        password="{{true}}" 
+                        value="{{password}}"
+                        bindinput="passwordInput"
+                        placeholder="输入您的wi-fi密码" 
+                        placeholder-class="placeholderClass" />
+                </block>
+                <block wx:else>
+                    <input 
+                        password="{{false}}" 
+                        value="{{password}}"
+                        bindinput="passwordInput"
+                        placeholder="输入您的wi-fi密码" 
+                        placeholder-class="placeholderClass" />
+                </block>
+            </view>
+            <view bind:tap="inputTypeChange">
+                <image src="/images/replaceNetwork/{{type ? 'open' : 'close'}}.png" />
+            </view>
+        </view>
+    </view>
+    <view class="btn" bind:tap="setWifiPWD">连接</view>
+</view>

components/replaceNetwork_2/replaceNetwork_2.wxss

@@ -0,0 +1,95 @@
+.replaceNetwork2 {
+    width: 100%;
+    height: 100%;
+    padding: 60rpx 30rpx 0;
+    box-sizing: border-box;
+}
+
+.title {
+    color: #252535;
+    width: 100%;
+    height: 48rpx;
+    font-size: 48rpx;
+    font-weight: bold;
+    line-height: 48rpx;
+    margin-bottom: 48rpx;
+}
+
+.form {
+    width: 100%;
+	margin-bottom: 64rpx;
+}
+
+.form>view {
+	width: 100%;
+	height: 96rpx;
+	display: flex;
+	flex-wrap: nowrap;
+	align-items: center;
+	padding: 0 24rpx;
+	box-sizing: border-box;
+	border-radius: 16rpx;
+	background-color: #F6F6F6;
+}
+
+.form>view:first-of-type {
+	margin-bottom: 32rpx;
+}
+
+.form>view>view:nth-of-type(1) {
+	color: #252535;
+	width: 100rpx;
+	height: 96rpx;
+	line-height: 96rpx;
+	font-size: 32rpx;
+	font-weight: bold;
+}
+
+.form>view:first-of-type>view:nth-of-type(1) {
+	padding: 24rpx 45rpx 24rpx 7rpx;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+}
+
+.form>view>view:nth-of-type(2) {
+	color: #252535;
+	flex: 1;
+	width: 0;
+	height: 96rpx;
+	font-size: 32rpx;
+	line-height: 96rpx;
+}
+
+.form>view>view:nth-of-type(2) input {
+	color: #252535;
+	width: 100%;
+	height: 96rpx;
+	font-size: 32rpx;
+	line-height: 96rpx;
+}
+
+.placeholderClass {
+	color: #B6B6B6;
+	height: 96rpx;
+	font-size: 32rpx;
+	line-height: 96rpx;
+}
+
+.form>view>view:nth-of-type(3) {
+	width: 56rpx;
+	height: 56rpx;
+}
+
+.btn {
+	color: #FFFFFF;
+	width: 580rpx;
+	height: 88rpx;
+	font-size: 32rpx;
+	font-weight: bold;
+	line-height: 88rpx;
+	margin: 0 auto;
+	text-align: center;
+	border-radius: 44rpx;
+	background-color: #1385FA;
+}