添加部分页面

wechat/miniprogram/pages/4Gswitch/index.js

@@ -0,0 +1,141 @@
+// miniprogram/pages/4Gswitch/index.js
+
+const { requestApi } = require('../../API/request')
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    deviceInfo:{},
+    power:0,
+    info:{
+      name:"客厅1号",
+      imei:123478098765432345,
+      remark:"这是客厅1号的开关"
+    }
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    this.setNavigate();
+    this.getLastPageData();
+    console.log('options',options);
+  },
+
+  setNavigate(){
+    wx.setNavigationBarTitle({
+      title: '4G开关',
+    });
+    wx.setNavigationBarColor({
+      backgroundColor: '#4271f1',
+      frontColor: '#ffffff',
+    });
+  },
+
+  getLastPageData(){
+    const eventChannel = this.getOpenerEventChannel();
+    const that = this;
+    eventChannel.on('getDeviceInfo',async (data)=>{
+      const res = await requestApi(`/system/status/newByNum/${data.deviceNum}`,{ method:'GET' });
+      that.setData({
+        deviceInfo:JSON.parse(res.result).data,
+        power:JSON.parse(res.result).data.lightStatus
+      });
+      
+    })
+  },
+
+
+  async lightPower(){
+    let deviceInfo = this.data.deviceInfo;
+    if(deviceInfo.lightStatus === 1){
+      deviceInfo.lightStatus = 0;
+    }else if(deviceInfo.lightStatus === 0){
+      deviceInfo.lightStatus = 1;
+    }
+    const res = await requestApi('/system/status',{
+      method:'PUT',
+      body:deviceInfo,
+      json:true
+    })
+    if (res.result.code === 200) {
+      this.setData({ power:deviceInfo.lightStatus })
+    }
+  },
+
+  //打开分享的页面
+  isShared(options){
+    if (options.hasOwnProperty('deviceInfo')) {
+      const deviceInfo = JSON.parse(options.deviceInfo);
+      this.setData({
+        info:deviceInfo
+      })
+    }
+  },
+
+
+  lookDetail(e){
+    wx.navigateTo({
+      url: '/pages/deviceDetail/index',
+      success: (result) => {
+        result.eventChannel.emit('getDeviceInfo',e.currentTarget.dataset.info);
+      }
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function (e) {
+    console.log(e);
+    return {
+      title:"我分享了一个设备。",
+      path:`/pages/4Gswitch/index?deviceInfo=${JSON.stringify(e.target.dataset.info)}`,
+      imageUrl:'/icons/smart.jpg'
+    }
+  }
+})

wechat/miniprogram/pages/4Gswitch/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

wechat/miniprogram/pages/4Gswitch/index.wxml

@@ -0,0 +1,28 @@
+<!--miniprogram/pages/4Gswitch/index.wxml-->
+<view class="name">
+  {{ deviceInfo.deviceName }}
+</view>
+<view>
+  <view class="outside">
+    <view class="inside" bindtap="lightPower">
+      <image wx:if="{{ power === 0 }}" class="switch" src="/icons/switch_off.png"></image>
+      <image wx:if="{{ power === 1 }}" class="switch" src="/icons/switch_on.png"></image>
+    </view>
+  </view>
+  <view class="power">
+    <text>开关状态：</text>
+    <text wx:if="{{ power === 1 }}" style="color:#0000ff">开</text>
+    <text wx:if="{{ power === 0 }}" style="color:#ff0000">关</text>
+  </view>
+</view>
+<view class="bottom">
+  <view class="bottom-item">
+    <image src="/icons/share.png"></image>
+    <text>分享</text>
+    <button class="share" open-type="share" data-info = "{{ deviceInfo }}"></button>
+  </view>
+  <view class="bottom-item" bindtap="lookDetail" data-info="{{ deviceInfo }}">
+    <image src="/icons/detail.png"></image>
+    <text>详情</text>
+  </view>
+</view>

wechat/miniprogram/pages/4Gswitch/index.wxss

@@ -0,0 +1,78 @@
+/* miniprogram/pages/4Gswitch/index.wxss */
+page{
+  background-color: #ffffff;
+}
+.name{
+  width: 60%;
+  margin: 15vh auto 30rpx;
+  text-align: center;
+  font-size: 42rpx;
+}
+.outside{
+  margin: 50rpx auto;
+  width: 60vw;
+  height: 60vw;
+  border-radius: 50%;
+  background-color: #dadada;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* border: 1rpx solid #666; */
+}
+.inside{
+  width: 80%;
+  height: 80%;
+  border-radius: 50%;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0 0 8rpx #bfbfbf;
+}
+.inside:active{
+  transform: translateY(5rpx);
+}
+.switch{
+  width: 25%;
+  height: 25%;
+}
+.power{
+  width: 60%;
+  margin: 30rpx auto;
+  text-align: center;
+  font-size: larger;
+}
+.bottom{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+  height: 100rpx;
+  display: flex;
+}
+.bottom-item{
+  position: relative;
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #4271f1;
+  border: 1rpx solid #bfbfbf;
+  color: #ffffff;
+}
+.bottom-item>image{
+  width: 44rpx;
+  height: 44rpx;
+  margin: 0 10rpx;
+}
+.bottom-item:active{
+  background-color: #0044ff;
+}
+.share{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}