添加注册页面，修改4G设备的添加页面

wechat/miniprogram/pages/add4G/index.js

@@ -1,11 +1,43 @@
 // miniprogram/pages/add4G/index.js
+
+const addOptions = {
+  "categoryId": 0,
+  "categoryName": "",
+  "createBy": "",
+  "createTime": "",
+  "delFlag": "",
+  "deviceId": 0,
+  "deviceName": "",
+  "deviceNum": "",
+  "deviceTemp": 0,
+  "firmwareVersion": "",
+  "groupId": 0,
+  "ownerId": "",
+  "params": {},
+  "remark": "",
+  "searchValue": "",
+  "updateBy": "",
+  "updateTime": ""
+}
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    imei:'',
+    remark:'',
+    deviceName:'',
+    firmwareVersion:'1.0',
+    show:false,//控制下拉列表的显示隐藏，false隐藏、true显示
+    selectData:[
+      { categoryId:1, categoryName:'WiFi通断器' },
+      { categoryId:2, categoryName:'智能灯' },
+      { categoryId:3, categoryName:'智能门锁' },
+      { categoryId:4, categoryName:'智能水阀' },
+      { categoryId:5, categoryName:'其它' },
+    ],//下拉列表的数据
+    selectedIndex:0//选择的下拉列表下标
   },
 
   /**
@@ -14,53 +46,88 @@ Page({
   onLoad: function (options) {
 
   },
-
-  /**
-   * 生命周期函数--监听页面初次渲染完成
-   */
-  onReady: function () {
-
+  selectTap(){
+    this.setData({
+      show: !this.data.show
+    });
+  },
+  optionTap(e){
+    const { index } = e.currentTarget.dataset;
+    this.setData({
+      selectedIndex:index,
+      show:false
+    })
+  },
+  scand(){
+    const that = this;
+    wx.scanCode({
+      scanType:['barCode', 'qrCode'],
+      success(res){
+        that.setData({
+          imei:res.result
+        })
+      }
+    })
+  },
+  inputRemark(e){
+    this.setData({
+      remark:e.detail.value
+    })
+  },
+  inputDeviceName(e){
+    this.setData({
+      deviceName:e.detail.value
+    })
+  },
+  inputImei(e){
+    this.setData({
+      imei:e.detail.value
+    })
   },
 
-  /**
-   * 生命周期函数--监听页面显示
-   */
-  onShow: function () {
+  submit(){
+    let imei = this.data.imei;
+    let remark = this.data.remark;
+    let deviceName = this.data.deviceName;
+    let firmwareVersion = this.data.firmwareVersion;
+    let selectedIndex = this.data.selectedIndex;
+    let selectData = this.data.selectData;
+    if ((imei.trim() === '') || (deviceName.trim() === '')) {
+      wx.showToast({
+        title: '输入必填数据',
+        icon:'error',
+        mask:true
+      })
+      return;
+    }else{
+      wx.showLoading({
+        title: '正在添加',
+      });
 
-  },
+      let options = addOptions;
+      options.firmwareVersion = firmwareVersion;
+      options.deviceNum = imei;
+      options.deviceName = deviceName;
+      options.remark = remark;
+      options.categoryId = selectData[selectedIndex].categoryId;
 
-  /**
-   * 生命周期函数--监听页面隐藏
-   */
-  onHide: function () {
-
-  },
-
-  /**
-   * 生命周期函数--监听页面卸载
-   */
-  onUnload: function () {
-
-  },
-
-  /**
-   * 页面相关事件处理函数--监听用户下拉动作
-   */
-  onPullDownRefresh: function () {
-
-  },
-
-  /**
-   * 页面上拉触底事件的处理函数
-   */
-  onReachBottom: function () {
-
-  },
-
-  /**
-   * 用户点击右上角分享
-   */
-  onShareAppMessage: function () {
+      wx.request({
+        url: 'http://localhost/dev-api/system/device',
+        method:'POST',
+        data:options,
+        header:{
+          "Authorization":wx.getStorageSync('token')
+        },
+        complete(){
+          wx.hideLoading();
+        },
+        success(res){
+          console.log(res);
+        }
+      })
+    }
 
+    
   }
+
 })

wechat/miniprogram/pages/add4G/index.wxml

@@ -2,16 +2,66 @@
 <view class="top">
   <image src="/icons/Internet.png"></image>
 </view>
-<view>
+
+<view class="biaodan">
   <view class="title">添加4G设备</view>
-  <label class='account'>
-    <text>IMEI：</text>
-    <input type='text' bind:input='inputIMEI' value='{{ imei }}' placeholder='请输入设备IMEI' />
-  </label>
+  <view class="item">
+    <view class="name">
+      <text class="flag">*</text>
+      <text>IMEI：</text>
+    </view>
+    <view class="input">
+      <input value="{{ imei }}" bindinput='inputImei' placeholder="请输入设备IMEI" />
+      <image src="/icons/scand.png" catchtap="scand"></image>
+    </view>
+  </view>
+  <view class="item">
+    <view class="name">
+      <text class="flag">*</text>
+      <text>设备名称：</text>
+    </view>
+    <view class="input">
+      <input value="{{ deviceName }}" type="text" bind:input="inputDeviceName" placeholder="请输入设备名称" />
+    </view>
+  </view>
+  <view class="item">
+    <view class="name">
+      <text>固件版本：</text>
+    </view>
+    <view>{{ firmwareVersion }}</view>
+  </view>
+  <view class="item">
+    <view class="name">
+      <text class="flag">*</text>
+      <text>设备分类：</text>
+    </view>
+    <view class="input" catchtap='selectTap'> 
+      <input placeholder="请选择" value='{{ selectData[selectedIndex].categoryName }}' disabled="true" />
+      <image src="/icons/down.png" class="{{ show && 'select_img_rotate' }}"></image>
+      <view class="select_box" style="height:{{ show?selectData.length*68:0 }}rpx">
+        <view class="select_item" 
+          wx:for="{{ selectData }}" wx:key='this' 
+          data-index='{{ index }}'
+          style='{{selectedIndex===index&&"background-color:skyblue;color:#fff"}}'
+          catchtap='optionTap'
+        >
+          {{ item.categoryName }}
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="item">
+    <view class="name">
+      <text>备注：</text>
+    </view>
+    <view class="input">
+      <input value="{{ remark }}" bindinput="inputRemark"/>
+    </view>
+  </view>
+
   <view class="btn">
-    <van-button block color="linear-gradient(to right, #4bb0ff, #6149f6)" round>
+    <van-button catchtap="submit" block color="linear-gradient(to right, #4bb0ff, #6149f6)" round>
       提 交
     </van-button>
   </view>
-
 </view>

wechat/miniprogram/pages/add4G/index.wxss

@@ -1,34 +1,74 @@
 /* miniprogram/pages/add4G/index.wxss */
-.top{
-  margin: 100rpx auto 30rpx;
+ .top{
+  margin: 60rpx auto 0rpx;
 }
 .title{
   font-size: 42rpx;
   text-align: center;
-  margin-bottom: 30rpx;
-}
-label{
-  display:flex;
-  align-items:center;
-  padding:30rpx 0;
-  border-bottom:2rpx solid #bfbfbf;
-}
-.icon{
-  width:40rpx;
-  height:40rpx;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-}
-input{
-  padding:15rpx 30rpx;
-  flex:1
-}
-.account{
-  width:80vw;
-  margin:0 auto;
+  margin-bottom: 45rpx;
 }
 .btn {
   margin: 60rpx auto;
   width: 50vw;
+} 
+
+
+.biaodan{
+  width: 90vw;
+  margin: 0 auto;
+  padding: 15rpx;
+}
+.item{
+  display: flex;
+  align-items: center;
+  margin: 30rpx auto;
+}
+.name{
+  width: 180rpx;
+  text-align: end;
+}
+.flag{
+  display:inline-block;
+  color:red;
+  width:32rpx;
+  text-align: center;
+}
+.input{
+  box-shadow: 0 0 3rpx 2rpx #bfbfbf;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+.input>input{
+  padding: 15rpx 30rpx;
+  flex: 1;
+}
+
+.input>image{
+  width: 60rpx;
+  height: 60rpx;
+  transition:transform 0.3s;
+}
+.input:hover{
+  box-shadow: 0 0 3rpx 2rpx blue;
+}
+.select_box{
+  position: absolute;
+  width: 100%;
+  top: 100%;
+  background-color: #ffffff;
+  box-shadow: 0 0 3rpx 2rpx #bfbfbf;
+  transition:height 0.3s;
+  box-sizing: border-box;
+  height: 0;
+  overflow-y: auto;
+  z-index: 99;
+}
+.select_item{
+  padding: 15rpx 30rpx;
+  /* box-shadow: 0 0 3rpx 2rpx #bfbfbf; */
+}
+.select_img_rotate{
+  transform:rotate(180deg); 
 }