buddhism/page_user/luru/bind_mac.vue

<template>
  <view class="page">
    <view class="iptbox" @click="backpage()">
      <input
        v-model="mac"
        class="ips"
        disabled
        placeholder=" "
        placeholder-class="my-placeholder"
        style="margin-left: 32rpx"
        type="text"
      />
      <view class="iconfont icon-xiangyou1"></view>
    </view>

    <view class="iptbox">
      <view class="qrcode" @click="qrcode()">
        <image
          mode=""
          src="https://api.ccttiot.com/smartmeter/img/static/uy7BNwAMIKwvstqFnRhs"
        ></image>
      </view>
      <input
        v-model="sn"
        class="ips"
        placeholder="请扫描设备上的二维码"
        placeholder-class="my-placeholder"
        style="margin-left: 32rpx"
        type="text"
      />
    </view>
    <!--    <view class="iptbox" @click="kashow = true">-->
    <!--      <view v-if="kaname" class=""> 卡商：{{ kaname }}</view>-->
    <!--      <view v-else class=""> 请点击选择卡商</view>-->
    <!--    </view>-->
    <!--    <u-select v-model="kashow" :list="kalist" title="选择卡商" @confirm="confirmka"></u-select>-->
    <!--    <view class="iptbox" @click="show = true">-->
    <!--      <view v-if="hardwareInfo.version" class=""> 版本：{{ hardwareInfo.version }}</view>-->
    <!--      <view v-else class=""> 请点击选择版本</view>-->
    <!--    </view>-->
    <!--    <view v-if="hardwareInfo.version" class="tips">-->
    <!--      版本介绍：{{ hardwareInfo.instructions }}-->
    <!--    </view>-->
    <!--    <u-select v-model="show" :list="list" title="选择版本" @confirm="confirm"></u-select>-->

    <view class="imgs" style="margin-top: 30rpx">
      <image
        mode=""
        src="https://lxnapi.ccttiot.com/bike/img/static/u9wFJhLZGm7rboSDySV4"
        @click="qrcode()"
      ></image>
    </view>
    <view class="btn" @click="bind()"> 确认添加</view>
    <view class="bot_btn">
      <view class="btn1" @click="btnfh"> 返回</view>
      <view class="btn1" @click="goToControl"> 去控制台</view>
      <!--      <view class="btn1" @click="findDevice()"> 蓝牙链接</view>-->
      <!--      <view v-if="carstause" class="btn1" @click="ring()"> 响铃寻车</view>-->

      <view v-if="carstause" class="btn1" @click="open()"> 蓝牙开锁</view>
      <view v-if="carstause" class="btn1" @click="close()"> 蓝牙关锁</view>
      <!--      <view v-if="carstause" class="btn1" @click="shaoru"> 进入烧录</view>-->
      <!--      <view v-if="carstause" class="btn1" @click="reboot()"> 设备重启</view>-->
      <!--      <view v-if="isbands" class="btn1" @click="Binddevice()"> 接口响铃</view>-->
    </view>
    <u-mask :show="showbind" :z-index="100" />
    <view v-if="showbind" class="tip_box">
      <view v-if="showbind" class="top">
        <view class="tip"> 操作提示</view>

        <view class="ipt_box" style="justify-content: center">
          <view class="text" style="width: 80%; text-align: center">
            该mac号已有绑定sn码是否修改为当前sn码
          </view>
        </view>
      </view>
      <view class="bots">
        <view class="bot_left" @click="showbind = false"> 取消</view>
        <view class="bot_right" @click="changeBind()"> 确定</view>
      </view>
    </view>
    <!-- <view class="bot">
      <view class="btn">
        退款
      </view>
    </view> -->
  </view>
</template>

<script>
import { bstDevice } from "../../api/device/device";
import xBlufi from "../../components/blufi/xBlufi.js";

const app = getApp();

let _this = null;
export default {
  data() {
    return {
      devicesarr: [],
      devicesList: [
        // {name:'110000',
        // mac:'11111'}
      ],
      searching: false,
      texts: "正在扫描蓝牙设备...",
      btnflag: true,
      tishiflag: false,
      option: "",
      bluthlist: [], //蓝牙数组
      // status: 'loading',
      statusflag: false,
      Bluetoothmac: "",
      mac: "",
      ishave: false,
      ver_data: null,
      deviceInfoss: {},
      gps: {},
      isband: false,
      // status: false,
      deviceIds: "",
      name: "",
      orderinfo: {},
      dl: 0,
      czmoney: true,
      iscz: true,
      bgc: {
        backgroundColor: "#F7FAFE",
      },
      sn: "",
      carstause: false,
      isbands: false,
      show: false,
      list: [],
      hardwareInfo: {},
      showbind: false,
      deviceid: "",
      kalist: [],
      kashow: false,
      kaname: "",
      kaid: "",
    };
  },
  onLoad(e) {
    xBlufi.notifyStartDiscoverBle({
      isStart: true,
    });
    xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent);
    this.mac = e.mac;
    this.findDevice();
    this.isbands = false;
    this.carstause = false;
  },
  onShow() {
    this.getlist();
    this.getka();
  },
  watch: {},
  methods: {
    // 点击确认卡商
    confirmka(e) {
      this.kaname = e[0].label;
      this.kaid = e[0].value;
    },
    // 请求所有卡商
    getka() {
      this.$u.get(`/system/dict/data/type/device_sim_producer`).then((res) => {
        if (res.code === 200) {
          this.kalist = res.data.map((item) => ({
            value: item.dictValue,
            label: item.dictLabel,
          }));
        }
      });
    },

    btnfh() {
      uni.reLaunch({
        url: "/page_user/luru/index",
      });
    },
    btngx() {
      // this.$u.post('/app/device/ring?sn=' + this.sn).then((res) => {
      // 	if (res.code == 200) {
      //         uni.showToast({
      //         	title: res.msg,
      //         	icon: 'success',
      //         	duration: 2000
      //         })
      // 	} else {
      // 		uni.showToast({
      // 			title: res.msg,
      // 			icon: 'none',
      // 			duration: 3000
      // 		})
      // 	}
      // })
    },
    confirm(e) {
      // console.log(e);
      uni.setStorageSync("hardwareVersionId", e[0].value);
      this.hardwareVersionId = e[0].value;
      const hardwareVersionId = this.hardwareVersionId;
      if (hardwareVersionId) {
        const matchedVersion = this.Versionlist.find(
          (version) => version.id === hardwareVersionId,
        );
        if (matchedVersion) {
          this.hardwareInfo = matchedVersion;
        }
      }
    },
    getlist() {
      this.$u.get("/bst/hardwareVersion/all").then((res) => {
        if (res.code === 200) {
          this.Versionlist = res.data.filter((item) => item.parentId !== 0);
          const hardwareVersionId = uni.getStorageSync("hardwareVersionId");
          if (hardwareVersionId) {
            this.hardwareVersionId = hardwareVersionId;
            const matchedVersion = this.Versionlist.find(
              (version) => version.id === hardwareVersionId,
            );
            if (matchedVersion) {
              this.hardwareInfo = matchedVersion;
            }
          }
          this.list = res.data
            .filter((item) => item.parentId != 0) // 改用 != 兼容字符串 "0"
            .map((item) => ({
              value: item.id,
              label: item.version,
            }));
          console.log(JSON.stringify(this.list, null, 2));
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    send() {
      this.$u.post("/app/device/ring?sn=" + this.sn).then((res) => {
        if (res.code === 200) {
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 2000,
          });
        }
      });
    },
    changeBind() {
      this.$u
        .post(
          `/appVerify/updateSn?sn=` +
            this.sn +
            "&mac=" +
            this.mac +
            "&hardwareVersionId=" +
            this.hardwareVersionId,
        )
        .then((res) => {
          if (res.code === 200) {
            uni.showToast({
              title: "操作成功",
              icon: "none",
              duration: 2000,
            });
            setTimeout(() => {
              // uni.navigateBack({
              // 	delta: 1 // delta值为1时表示返回的页面层数
              // });
              uni.navigateTo({
                url: "/page_user/luru/controlDevice?sn=" + this.sn,
              });
            }, 2000);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000,
            });
          }
        });
    },
    backpage() {
      uni.navigateBack({
        delta: 1, // delta值为1时表示返回的页面层数
      });
    },

    goToControl() {
      uni.navigateTo({
        url: `/page_user/luru/controlDevice?mac=${encodeURIComponent(this.mac)}`,
      });
    },

    async bind() {
      try {
        // 1. 数据验证
        if (!this.sn || !this.mac) {
          throw new Error("SN码和MAC地址不能为空");
        }

        // 2. 准备请求数据
        const requestData = {
          sn: this.sn.trim(),
          mac: this.mac.trim(),
          hardwareVersionId: this.hardwareVersionId,
          simProducer: this.kaid,
        };

        console.log("绑定请求数据:", requestData);

        // 3. 显示加载状态
        uni.showLoading({
          title: "绑定中...",
          mask: true,
        });

        // 4. 发起绑定请求
        const res = await bstDevice(requestData);
        // 5. 处理响应
        if (res.code === 200) {
          uni.showToast({
            title: "绑定成功",
            icon: "success",
            duration: 2000,
          });

          // 延迟跳转，让用户看到成功提示
          setTimeout(() => {
            this.goToControl();
          }, 2000);
        } else {
          throw new Error(res.msg || "绑定失败");
        }
      } catch (error) {
        console.error("绑定出错:", error);
        uni.showToast({
          title: error.message,
          icon: "none",
          duration: 2000,
        });
      } finally {
        // uni.hideLoading()
      }
    },
    qrcode() {
      uni.scanCode({
        onlyFromCamera: true,
        scanType: ["qrCode"],
        success: (res) => {
          let sn = null;
          let queryParams = res.result.split("?")[1];
          if (queryParams) {
            let params = queryParams.split("&");
            params.forEach((param) => {
              let [key, value] = param.split("=");
              if (key === "s") {
                sn = value;
              }
            });
          }
          this.sn = sn;
          console.log(res.result);
          if (this.sn != "") {
          }
        },
        fail: (err) => {
          console.error("扫描失败：", err);
          uni.showToast({
            title: "扫描失败",
            icon: "none",
          });
        },
      });
    },
    findDevice() {
      // 使用 find 方法查找匹配的设备
      const matchedDevice = this.devicesarr.find((device) => {
        console.log(this.mac, "111");
        return device.name.slice(-12) == this.mac.slice(-12);
      });
      if (matchedDevice) {
        // 找到匹配的设备
        xBlufi.notifyStartDiscoverBle({
          isStart: false,
        });
        xBlufi.notifyConnectBle({
          isStart: true,
          deviceId: matchedDevice.deviceId,
          name: matchedDevice.name,
        });
        this.deviceid = matchedDevice.deviceId;
      } else {
        this.findDeviceTimer = setTimeout(this.findDevice.bind(this), 1000); // 使用 bind 保持 this 上下文
      }
    },
    // 获取附近蓝牙设备列表
    funListenDeviceMsgEvent: function (options) {
      switch (options.type) {
        case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED:
          if (!options.result) {
            this.carstause = false;
            console.log("断开断开");
          }
          break;
        case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
          if (options.result) {
            this.devicesarr = options.data;
          }
          break;
        case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
          console.log("连接回调：" + JSON.stringify(options));
          if (options.result == true) {
            this.carstause = true;
            xBlufi.notifyInitBleEsp32({
              deviceId: this.deviceid,
            });
          } else {
          }
          break;
        case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
          console.log("1收到设备发来的自定义数据结果：", options.data);
          break;
        case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_START:
          if (!options.result) {
            console.log("蓝牙未开启");
            return;
          } else {
          }
          break;
      }
    },
    // Binddevice() {
    // 	uni.showLoading({
    // 		title: '连接中..'
    // 	})
    // 	console.log("xBlufi", xBlufi.XMQTT_SYSTEM)
    // 	xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvent)
    // 	xBlufi.notifyStartDiscoverBle({
    // 		'isStart': true
    // 	})
    // 	// 两秒后停止蓝牙搜索
    // 	setTimeout(() => {
    // 		xBlufi.notifyStartDiscoverBle({
    // 			'isStart': false
    // 		})
    // 		setTimeout(() => {
    // 			uni.hideLoading()
    // 			if (this.devicesList.length == 0) {
    // 				uni.showToast({
    // 					title: '暂无发现对应设备,请靠近设备',
    // 					icon: 'none'
    // 				})
    // 			} else {
    // 				let uniqueDevicesList = Array.from(new Set(this.devicesList))
    // 				// 将去重后的数组重新赋值给 this.devicesList
    // 				this.devicesList = uniqueDevicesList
    // 				this.devicesList.forEach(device => {
    // 					// 从设备名称中提取 MAC 地址（假设 MAC 地址是设备名称的后6个字符）
    // 					let macFromName = device.name.substring(device.name.length - 12)
    // 					console.log(macFromName, 'macFromNamemacFromName')
    // 					// 与 this.mac 进行比较
    // 					if (macFromName == this.mac) {
    // 						// 如果相同，则将 this.ishave 设置为 true
    // 						console.log(device)
    // 						this.deviceInfoss = device
    // 						this.createBLEConnection(device)
    // 						console.log('对比正确1111111111')
    // 					} else {
    // 						console.log('对比错误')
    // 					}
    // 				})
    // 			}
    // 		}, 200)
    // 	}, 2000)
    // },
    reboot() {
      let vm = this; // 将外部的 this 绑定到 vm 上
      uni.getNetworkType({
        success(res) {
          if (res.networkType !== "none") {
            uni.getConnectedBluetoothDevices({
              success(res) {
                console.log("已连接的蓝牙设备信息：", res);
                xBlufi.notifySendCustomData({
                  customData: "11reboot",
                });
              },
              fail(err) {
                uni.hideLoading();
                console.error("获取已连接蓝牙设备信息失败：", err);
              },
            });
          } else {
            console.log("手机未连接网络");
          }
        },
      });
    },
    open() {
      xBlufi.notifySendCustomData({
        customData: "11open",
      });
      xBlufi.notifySendCustomData({
        customData: "open",
      });
      // let vm = this // 将外部的 this 绑定到 vm 上
      // uni.getNetworkType({
      //   success(res) {
      //     if (res.networkType !== 'none') {
      //       uni.getConnectedBluetoothDevices({
      //         success(res) {
      //           console.log('已连接的蓝牙设备信息：', res)

      //         },
      //         fail(err) {
      //           uni.hideLoading()
      //           console.error('获取已连接蓝牙设备信息失败：', err)
      //         },
      //       })
      //     } else {
      //       console.log('手机未连接网络')
      //     }
      //   },
      // })
    },
    shaoru() {
      let vm = this; // 将外部的 this 绑定到 vm 上
      uni.getNetworkType({
        success(res) {
          if (res.networkType !== "none") {
            uni.getConnectedBluetoothDevices({
              success(res) {
                console.log("已连接的蓝牙设备信息：", res);
                xBlufi.notifySendCustomData({
                  customData: "11resetGG",
                });
              },
              fail(err) {
                uni.hideLoading();
                console.error("获取已连接蓝牙设备信息失败：", err);
              },
            });
          } else {
            console.log("手机未连接网络");
          }
        },
      });
    },
    close() {
      xBlufi.notifySendCustomData({
        customData: "11close",
      });
      xBlufi.notifySendCustomData({
        customData: "close",
      });
      // let vm = this // 将外部的 this 绑定到 vm 上
      // uni.getNetworkType({
      //   success(res) {
      //     if (res.networkType !== 'none') {
      //       uni.getConnectedBluetoothDevices({
      //         success(res) {
      //           console.log('已连接的蓝牙设备信息：', res)
      //           xBlufi.notifySendCustomData({
      //             customData: '11close',
      //           })
      //         },
      //         fail(err) {
      //           uni.hideLoading()
      //           console.error('获取已连接蓝牙设备信息失败：', err)
      //         },
      //       })
      //     } else {
      //       console.log('手机未连接网络')
      //     }
      //   },
      // })
    },
    ring() {
      let vm = this; // 将外部的 this 绑定到 vm 上
      uni.getNetworkType({
        success(res) {
          if (res.networkType !== "none") {
            uni.getConnectedBluetoothDevices({
              success(res) {
                console.log("已连接的蓝牙设备信息：", res);
                xBlufi.notifySendCustomData({
                  customData: "11play1@",
                });
              },
              fail(err) {
                uni.hideLoading();
                console.error("获取已连接蓝牙设备信息失败：", err);
              },
            });
          } else {
            console.log("手机未连接网络");
          }
        },
      });
    },
    btnyc() {
      this.titleflag = false;
    },
    // 	// 解析自定义数据
    // 	funListenDeviceMsgEvent: function(options) {
    // 		switch (options.type) {
    // 			case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS:
    // 				if (options.result) {
    // 					this.devicesarr = options.data
    // 					// devicesarr.forEach(device => {
    // 					// 	this.devicesList.push(device)
    // 					// 	let uniqueDevicesList = Array.from(new Set(this.devicesList))
    // 					// 	// 将去重后的数组重新赋值给 this.devicesList
    // 					// 	this.devicesList = uniqueDevicesList
    // 					// })
    // 				}
    // 				break;

    // 			case xBlufi.XBLUFI_TYPE.TYPE_CONNECTED:
    // 				console.log("连接回调：" + JSON.stringify(options));
    // 				if (options.result) {
    // 					uni.hideLoading();
    // 					uni.showToast({
    // 						title: '连接成功',
    // 						icon: 'none'
    // 					}); {

    // 						xBlufi.notifyInitBleEsp32({
    // 							deviceId: options.data.deviceId
    // 						});

    // 						xBlufi.listenDeviceMsgEvent(true, this.funListenDeviceMsgEvents);

    // 						this.deviceIds = options.data.deviceId
    // 						this.name = options.data.name
    // 						// 连接成功绑定设备
    // 						// let params = {
    // 						// 	mac: this.Bluetoothmac,
    // 						// 	userId: this.$store.state.user.userId
    // 						// }
    // 						let systemInfo = uni.getSystemInfoSync();
    // 						if (systemInfo.platform === 'android') {
    // 							// 当前设备是 Android

    // 						} else if (systemInfo.platform === 'ios') {
    // 							// 当前设备是 iOS
    // 							// uni.navigateTo({
    // 							// 	url: '/pages/wifilist/index?deviceId=' + options
    // 							// 		.data.deviceId + '&name=' + options.data.name
    // 							// })
    // 						}
    // 					}
    // 				}

    // 				break;
    // 			case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:

    // 				// this.ver_data = this.parseCustomData(options.data)
    // 				if (options.data) {
    // 					this.carstause = true
    // 				}
    // 				// console.log("1收到设备发来的自定义数据结果：", this.ver_data);
    // 				break;
    // 			case xBlufi.XBLUFI_TYPE.TYPE_GET_DEVICE_LISTS_STOP:
    // 				if (options.result) {
    // 					let uniqueDevicesList = Array.from(new Set(this.devicesList));

    // 					// 过滤出名称字段的前五个字母为 "CTPOW" 的项
    // 					let filteredDevices = uniqueDevicesList.filter(device => device.name.substring(0, 4) ===
    // 						"BBLE");

    // 					// 将过滤后的数组重新赋值给 this.devicesList
    // 					this.devicesList = filteredDevices;

    // 					// console.log('蓝牙停止搜索ok',this.devicesList);
    // 				} else {
    // 					//蓝牙停止搜索失败
    // 					// console.log('蓝牙停止搜索失败');
    // 				}
    // 				this.searching = false
    // 				// _this.setData({
    // 				// 	searching: false
    // 				// });

    // 				break;
    // 		}
    // 	},

    //4、建立连接
    createBLEConnection(e) {
      console.log("调用了");
      xBlufi.notifyStartDiscoverBle({
        isStart: false,
      });
      console.log(e, "蓝牙信息");
      const deviceId = e.deviceId;
      // this.Bluetoothmac = e.localName.substring(5) //从第七位开始截取 只取后面的mac号
      // console.log(this.Bluetoothmac, '11111');
      let name = e.name;
      console.log("点击了，蓝牙准备连接的deviceId:" + e.deviceId);
      xBlufi.notifyConnectBle({
        isStart: true,
        deviceId: e.deviceId,
        name,
      });
      // for (var i = 0; i < this.devicesList.length; i++) {
      // 	if (e.deviceId === this.devicesList[i].deviceId) {

      // 		uni.showLoading({
      // 			title: '连接蓝牙设备中...'
      // 		});
      // 	}
      // }
    },
    // 点击重新搜索
    Search() {
      if (this.status) {
        xBlufi.notifyStartDiscoverBle({
          isStart: true,
        });
        // 重新搜索清空蓝牙数组
        this.bluthlist = [];
        this.devicesList = [];
        // 重新搜索
        // this.startBluetoothDevicesDiscovery()
        this.statusflag = true;
        this.status = false;
        this.texts = "正在扫描蓝牙设备...";
        setTimeout(() => {
          this.statusflag = false;
          this.status = true;
          if (this.searching) {
            xBlufi.notifyStartDiscoverBle({
              isStart: false,
            });
            // 判断是否存在浇花器设备
            if (this.devicesList.length == 0) {
              uni.showToast({
                title: "暂无发现对应设备,请靠近设备",
                icon: "none",
              });
            } else {
              this.texts = "扫描到以下设备，请点击连接！";
            }
          } else {
            xBlufi.notifyStartDiscoverBle({
              isStart: true,
            });
          }
        }, 2000);
      }
    },
    // funListenDeviceMsgEvents: function(options) {
    // 	let that = this;
    // 	switch (options.type) {
    // 		case xBlufi.XBLUFI_TYPE.TYPE_STATUS_CONNECTED: {
    // 			console.log('状态', options.result)
    // 			if (options.result == false) {
    // 				this.carstause = false
    // 				uni.showToast({
    // 					title: '设备断开链接，请重新点击蓝牙链接',
    // 					icon: 'none'
    // 				});
    // 				// uni.showModal({
    // 				// 	title: '很抱歉提醒你！',
    // 				// 	content: '小程序与设备异常断开',
    // 				// 	showCancel: false,
    // 				// 	success: function(res) {
    // 				// 		// uni.navigateBack({
    // 				// 		// 	url: '../search/search'
    // 				// 		// });
    // 				// 	}
    // 				// });
    // 				// this.statusflag = false
    // 				uni.hideLoading();
    // 			}
    // 		}
    // 		break;

    // 		case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_MY_DATA:
    // 			this.loadPercent = options.data;
    // 			this.loadText = '文件读取中'
    // 			console.log("文件读取中", options.data);
    // 			break;
    // 		case xBlufi.XBLUFI_TYPE.TYPE_RECIEVE_CUSTON_DATA:
    // 			// this.isband = true
    // 			// this.ver_data = this.parseCustomData(options.data)
    // 			console.log("1收到设备发来的自定义数据结果：", options.data);
    // 			if (options.data) {
    // 				this.carstause = true
    // 			}
    // 			break;

    // 		case xBlufi.XBLUFI_TYPE.TYPE_INIT_ESP32_RESULT:
    // 			uni.hideLoading();
    // 			if (options.result) {
    // 				console.log('初始化成功');
    // 			} else {
    // 				console.log('初始化失败');

    // 			}
    // 			break;
    // 	}
    // },
    // 点击隐藏没有设备提示
    btnhd() {
      this.tishiflag = false;
    },
  },
};
</script>

<style lang="scss">
page {
  overflow-x: hidden;
  background-color: #f3f3f3;
}

.page {
  padding-bottom: 250rpx;
  width: 750rpx;

  .tip_box {
    position: fixed;
    left: 72rpx;
    top: 628rpx;
    width: 610rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    z-index: 110;
    padding-bottom: 100rpx;

    .top {
      padding: 52rpx 38rpx 42rpx 36rpx;

      .ipt_box {
        margin-top: 22rpx;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;

        .text {
          width: 350rpx;
          font-weight: 400;
          font-size: 32rpx;
          color: #3d3d3d;
        }

        .ipt {
          padding: 10rpx 18rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 26rpx;
          width: 420rpx;
          height: 64rpx;
          border-radius: 0rpx 0rpx 0rpx 0rpx;
          border: 2rpx solid #979797;

          .input {
            width: 80%;
          }
        }
      }

      .tip {
        width: 100%;
        text-align: center;
        font-weight: 700;
        font-size: 32rpx;
        color: #3d3d3d;
      }

      .txt {
        margin-top: 32rpx;
        width: 100%;
        text-align: center;
        font-weight: 500;
        font-size: 32rpx;
        color: #3d3d3d;
      }
    }

    .bots {
      position: absolute;
      width: 610rpx;
      display: flex;
      flex-wrap: nowrap;
      bottom: -20rpx;

      .bot_left {
        border-radius: 0rpx 0rpx 0rpx 30rpx;
        width: 50%;
        height: 86rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 32rpx;
        color: #3d3d3d;
        background: #eeeeee;
      }

      .bot_right {
        border-radius: 0rpx 0rpx 30rpx 0rpx;
        width: 50%;
        height: 86rpx;
        background: #4c97e7;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-weight: 500;
        font-size: 32rpx;
      }
    }
  }

  .imgs {
    margin-top: 50rpx;
    width: 100%;
    display: flex;
    justify-content: center;

    image {
      width: 400rpx;
      height: 400rpx;
    }
  }

  .btn {
    margin: 160rpx auto;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 658rpx;
    height: 88rpx;
    background: #27c2fd;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
  }

  .tips {
    margin: 28rpx auto 0;
    width: 658rpx;
  }

  .iptbox {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 22rpx;
    margin: 28rpx auto 0;
    width: 658rpx;
    height: 88rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .qrcode {
      padding-right: 20rpx;
      border-right: 2rpx solid #d8d8d8;

      image {
        width: 54rpx;
        height: 54rpx;
      }
    }

    .ips {
      width: 630rpx;
    }

    image {
      width: 18rpx;
      height: 32rpx;
    }

    .my-placeholder {
      font-weight: 400;
      font-size: 32rpx;
      color: #808080;
    }
  }

  .bot_btn {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 40rpx 18rpx;
    width: 750rpx;
    // height: 330rpx;
    background: #fff;
    // background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
    box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0, 0, 0, 0.08);
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    .btn:nth-child(4n) {
      margin-right: 0;
    }

    .btn1 {
      margin-top: 10rpx;
      margin-right: 12rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 164rpx;
      height: 66rpx;
      background: #e2f2ff;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      border: 2rpx solid #4c97e7;
      font-weight: 400;
      font-size: 28rpx;
      color: #3d3d3d;
    }
  }
}
</style>