|
|
@@ -0,0 +1,495 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="home-warp" v-if="nextTip == 'one'">
|
|
|
+ <view class="bodyContent">
|
|
|
+ <view
|
|
|
+ class="deviceInfo"
|
|
|
+ v-if="clientId"
|
|
|
+ @click="scanCode"
|
|
|
+ :class="{ 'fade-in': showDeviceInfo }"
|
|
|
+ >
|
|
|
+ <image src="../../static/ln_small.png" alt=""></image>
|
|
|
+ <view class="deviceText">{{ clientId }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="wifiScan" @click="scanCode" v-if="!clientId">
|
|
|
+ <image src="../../static/wifiScan.png" alt=""></image>
|
|
|
+ <view class="wifiText" v-if="!clientId"
|
|
|
+ >点击扫一扫识别设备</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="clientInfo">
|
|
|
+ <view class="wifItem">
|
|
|
+ <text>设备名称</text>
|
|
|
+ <input v-model="devName" placeholder="请输入设备名称" />
|
|
|
+ </view>
|
|
|
+ <view class="wifItem" style="margin-top: 30rpx">
|
|
|
+ <text>安装位置</text>
|
|
|
+ <picker
|
|
|
+ @change="bindPickerChange"
|
|
|
+ :value="installPositionIndex"
|
|
|
+ :range="selectArray"
|
|
|
+ style="margin-left: auto"
|
|
|
+ >
|
|
|
+ <view class="uni-input">{{
|
|
|
+ selectArray[installPositionIndex]
|
|
|
+ }}</view>
|
|
|
+ </picker>
|
|
|
+
|
|
|
+ <image
|
|
|
+ src="../../static/rightArrow.png"
|
|
|
+ alt=""
|
|
|
+ @click="showPicker"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ <view class="wifItem" style="margin-top: 30rpx">
|
|
|
+ <text>安装方式</text>
|
|
|
+ <picker
|
|
|
+ @change="bindPickerChangeThree"
|
|
|
+ :value="mountPlainIndex"
|
|
|
+ :range="mountPlainArray"
|
|
|
+ style="margin-left: auto"
|
|
|
+ >
|
|
|
+ <view class="uni-input">{{
|
|
|
+ mountPlainArray[mountPlainIndex]
|
|
|
+ }}</view>
|
|
|
+ </picker>
|
|
|
+ <image
|
|
|
+ src="../../static/rightArrow.png"
|
|
|
+ alt=""
|
|
|
+ @click="showPicker"
|
|
|
+ ></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="bottom">
|
|
|
+ <view class="nextTip" @click="goNextTip">完成</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+const airkiss = requirePlugin("airkiss");
|
|
|
+export default {
|
|
|
+ name: "my",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ editFlag: false,
|
|
|
+ selectArray: ["卫生间", "客厅", "餐厅", "卧室"],
|
|
|
+ angleArray: ["0", "90", "180", "270"],
|
|
|
+ mountPlainArray: ["墙装", "顶装"],
|
|
|
+ installPositionIndex: 0,
|
|
|
+ northAngleIndex: 0,
|
|
|
+ mountPlainIndex: 0,
|
|
|
+ pickModel: false,
|
|
|
+ environmentJudge: true,
|
|
|
+ nextTip: "one",
|
|
|
+ // 设备信息参数
|
|
|
+ clientId: "",
|
|
|
+ userId: uni.getStorageSync("userId"),
|
|
|
+ devName: "",
|
|
|
+ width: "",
|
|
|
+ length: "",
|
|
|
+ height: "",
|
|
|
+ wifiName: "",
|
|
|
+ wifiPassword: "",
|
|
|
+ northAngle: "0",
|
|
|
+ mountPlain: "Wall",
|
|
|
+ installPosition: "Toilet",
|
|
|
+ xxStart: "",
|
|
|
+ xxEnd: "",
|
|
|
+ yyStart: "",
|
|
|
+ yyEnd: "",
|
|
|
+ zzStart: "",
|
|
|
+ zzEnd: "",
|
|
|
+ // statusLight: 1,
|
|
|
+ showDeviceInfo: false,
|
|
|
+ devInfo: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ clientId(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.showDeviceInfo = true;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.showDeviceInfo = false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ methods: {
|
|
|
+ scanCode() {
|
|
|
+ wx.scanCode({
|
|
|
+ success: (res) => {
|
|
|
+ this.clientId = res.result;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showPicker() {
|
|
|
+ this.pickModel = true;
|
|
|
+ },
|
|
|
+ bindPickerChange(e) {
|
|
|
+ this.installPositionIndex = e.detail.value;
|
|
|
+ if (this.installPositionIndex == "0") {
|
|
|
+ this.installPosition = "Toilet";
|
|
|
+ } else if (this.installPositionIndex == "1") {
|
|
|
+ this.installPosition = "LivingRoom";
|
|
|
+ } else if (this.installPositionIndex == "2") {
|
|
|
+ this.installPosition = "Restaurant";
|
|
|
+ } else if (this.installPositionIndex == "3") {
|
|
|
+ this.installPosition = "Bedroom";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bindPickerChangeTwo(e) {
|
|
|
+ this.northAngleIndex = e.detail.value;
|
|
|
+ this.northAngle = this.angleArray[e.detail.value];
|
|
|
+ },
|
|
|
+ bindPickerChangeThree(e) {
|
|
|
+ this.mountPlainIndex = e.detail.value;
|
|
|
+ this.mountPlain = this.mountPlainArray[e.detail.value];
|
|
|
+ if (this.mountPlainArray[e.detail.value] == "墙装") {
|
|
|
+ this.mountPlain = "Wall";
|
|
|
+ } else {
|
|
|
+ this.mountPlain = "Ceiling";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ goNextTip() {
|
|
|
+ if (!this.devName.length > 10) {
|
|
|
+ uni.showModal({
|
|
|
+ content: "设备名称过长！",
|
|
|
+ showCancel: 1500,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.clientId) {
|
|
|
+ uni.showModal({
|
|
|
+ content: "请先开始扫码！",
|
|
|
+ showCancel: 1500,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.devName) {
|
|
|
+ uni.showModal({
|
|
|
+ content: "请输入设备名称！",
|
|
|
+ showCancel: 1500,
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.bindDevice();
|
|
|
+ },
|
|
|
+ bindDevice() {
|
|
|
+ let deviceBandingParams = {
|
|
|
+ clientId: this.clientId,
|
|
|
+ userId: uni.getStorageSync("userId"),
|
|
|
+ devName: this.devName,
|
|
|
+ height: 0,
|
|
|
+ wifiName: this.wifiName,
|
|
|
+ wifiPassword: this.wifiPassword,
|
|
|
+ northAngle: 0,
|
|
|
+ mountPlain:
|
|
|
+ this.mountPlain == "" ? "mountPlain" : this.mountPlain,
|
|
|
+ installPosition: this.installPosition,
|
|
|
+ xxStart: 0,
|
|
|
+ xxEnd: 0,
|
|
|
+ yyStart: 0,
|
|
|
+ yyEnd: 0,
|
|
|
+ zzStart: 0,
|
|
|
+ zzEnd: 0,
|
|
|
+ // statusLight: this.statusLight,
|
|
|
+ };
|
|
|
+
|
|
|
+ if (this.editFlag) {
|
|
|
+ this.$http
|
|
|
+ .post("wap/device/updateDevice", deviceBandingParams, {
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/json;charset=UTF-8",
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "绑定成功",
|
|
|
+ icon: "success",
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ uni.setStorageSync("devId", res.data.data.devId);
|
|
|
+ uni.reLaunch({
|
|
|
+ url:
|
|
|
+ "/pagesA/roomSetting/roomSetting?devId=" +
|
|
|
+ res.data.data.devId +
|
|
|
+ "&clientId=" +
|
|
|
+ res.data.data.clientId,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.message,
|
|
|
+ icon: "none",
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$http
|
|
|
+ .post("wap/device/deviceBinding", deviceBandingParams, {
|
|
|
+ header: {
|
|
|
+ "Content-Type": "application/json;charset=UTF-8",
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ uni.showToast({
|
|
|
+ title: "绑定成功",
|
|
|
+ icon: "success",
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ uni.setStorageSync("devId", res.data.data.devId);
|
|
|
+ uni.reLaunch({
|
|
|
+ url:
|
|
|
+ "/pagesA/roomSetting/roomSetting?devId=" +
|
|
|
+ res.data.data.devId +
|
|
|
+ "&clientId=" +
|
|
|
+ res.data.data.clientId,
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ title: res.data.message,
|
|
|
+ icon: "none",
|
|
|
+ duration: 1500,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setDevInfo(devInfo) {
|
|
|
+ this.clientId = devInfo.clientId;
|
|
|
+ this.devName = devInfo.devName;
|
|
|
+ this.height = devInfo.height;
|
|
|
+ this.wifiName = devInfo.wifiName;
|
|
|
+ this.wifiPassword = devInfo.wifiPassword;
|
|
|
+ this.northAngle = devInfo.northAngle;
|
|
|
+ if (this.northAngle == 0) {
|
|
|
+ this.northAngleIndex = 0;
|
|
|
+ } else if (this.northAngle == 90) {
|
|
|
+ this.northAngleIndex = 1;
|
|
|
+ } else if (this.northAngle == 180) {
|
|
|
+ this.northAngleIndex = 2;
|
|
|
+ } else if (this.northAngle == 270) {
|
|
|
+ this.northAngleIndex = 3;
|
|
|
+ }
|
|
|
+ this.mountPlain = devInfo.mountPlain;
|
|
|
+ if (this.northAngle == "Wall") {
|
|
|
+ this.mountPlainIndex = 0;
|
|
|
+ } else if (this.northAngle == 90) {
|
|
|
+ this.mountPlainIndex = 1;
|
|
|
+ }
|
|
|
+ this.installPosition = devInfo.installPosition;
|
|
|
+
|
|
|
+ if (this.installPosition == "Toilet") {
|
|
|
+ this.installPositionIndex = 0;
|
|
|
+ } else if (this.installPosition == "LivingRoom") {
|
|
|
+ this.installPositionIndex = 1;
|
|
|
+ } else if (this.installPosition == "Restaurant") {
|
|
|
+ this.installPositionIndex = 2;
|
|
|
+ } else if (this.installPosition == "Bedroom") {
|
|
|
+ this.installPositionIndex = 3;
|
|
|
+ }
|
|
|
+ this.xxStart = devInfo.xxStart;
|
|
|
+ this.xxEnd = devInfo.xxEnd;
|
|
|
+ this.yyStart = devInfo.yyStart;
|
|
|
+ this.yyEnd = devInfo.yyEnd;
|
|
|
+ this.zzStart = devInfo.zzStart;
|
|
|
+ this.zzEnd = devInfo.zzEnd;
|
|
|
+ // this.statusLight = devInfo.statusLight;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (JSON.stringify(options) != "{}") {
|
|
|
+ this.devInfo = JSON.parse(options.devInfo);
|
|
|
+ this.setDevInfo(this.devInfo);
|
|
|
+ this.editFlag = true;
|
|
|
+ } else {
|
|
|
+ console.log("没有参数");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onUnload(options) {
|
|
|
+ airkiss.stopAirkiss();
|
|
|
+ },
|
|
|
+ onShow() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.home-warp {
|
|
|
+ position: relative;
|
|
|
+ height: 100vh;
|
|
|
+ background: linear-gradient(180deg, #faede2 0%, #f4f4f4 100%);
|
|
|
+ .bodyContent {
|
|
|
+ width: 700rpx;
|
|
|
+ height: 600rpx;
|
|
|
+ position: relative;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ padding-top: 30rpx;
|
|
|
+ .deviceInfo {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: absolute;
|
|
|
+ top: 24%;
|
|
|
+ left: 36%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ padding: 0 auto;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ width: 200rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ transition: all 0.8s ease;
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateY(20rpx);
|
|
|
+ image {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 200rpx;
|
|
|
+ }
|
|
|
+ .wifiText {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .deviceText {
|
|
|
+ text-align: center;
|
|
|
+ // margin-left: -10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .deviceInfo.fade-in {
|
|
|
+ opacity: 1;
|
|
|
+ transform: translateY(0);
|
|
|
+ }
|
|
|
+
|
|
|
+ .wifiScan {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 188rpx;
|
|
|
+ height: 188rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 30%;
|
|
|
+ left: 36%;
|
|
|
+ image {
|
|
|
+ width: 188rpx;
|
|
|
+ height: 188rpx;
|
|
|
+ }
|
|
|
+ .wifiText {
|
|
|
+ width: 208rpx;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ color: #95a4b3;
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wifItem {
|
|
|
+ width: 640rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ border-bottom: 2rpx solid #ebeff5;
|
|
|
+ padding-bottom: 38rpx;
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ text {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ color: #111111;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ margin-left: auto;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .refresh {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 50rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: #f3e2dd;
|
|
|
+ color: #151515;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 38rpx;
|
|
|
+ width: 240rpx;
|
|
|
+ height: 75rpx;
|
|
|
+ background: #f3e2dd;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 75rpx;
|
|
|
+ color: #111111;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .clientInfo {
|
|
|
+ width: 700rpx;
|
|
|
+ height: 180px;
|
|
|
+ margin: 20rpx auto 0 auto;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30rpx 30rpx;
|
|
|
+ .wifItem {
|
|
|
+ width: 640rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ display: flex;
|
|
|
+ border-bottom: 2rpx solid #ebeff5;
|
|
|
+ padding-bottom: 38rpx;
|
|
|
+ text {
|
|
|
+ margin-left: 20rpx;
|
|
|
+ color: #111111;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ input {
|
|
|
+ margin-left: auto;
|
|
|
+ // width: 70%;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ image {
|
|
|
+ width: 30rpx;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 750rpx;
|
|
|
+ height: 170rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0rpx 1.17rpx 0rpx #eaeaea inset;
|
|
|
+
|
|
|
+ .nextTip {
|
|
|
+ width: 675rpx;
|
|
|
+ height: 95rpx;
|
|
|
+ background: linear-gradient(97.91deg, #a27867 0%, #74483d 100%);
|
|
|
+ border-radius: 28rpx;
|
|
|
+ box-shadow: 0rpx 4.69rpx 18.75rpx rgba(72, 41, 29, 0.15),
|
|
|
+ 0rpx 9.38rpx 9.38rpx rgba(154, 132, 89, 0.2),
|
|
|
+ 0rpx -4.69rpx 28.13rpx 4.69rpx #a16647 inset;
|
|
|
+
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ margin: 30rpx auto;
|
|
|
+ line-height: 95rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
