首页添加扫码

zuoxiao

2024-07-05 d796875e4dee22341c48469973d03e1015db61e8

首页添加扫码

首页添加扫码

 images/scen_code.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8"?><svg width="16" height="16" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 15V6H15" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 42H6V33" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M42 33V42H33" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M33 6H42V15" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 24H38" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>

 pages/home/home.js

@@ -314,12 +314,24 @@
    const maskedPhoneNumber = phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
    return maskedPhoneNumber;
  },

  closeDialog() {
    this.setData({
      showErrorDialog:false
      showErrorDialog: false
    })
  },
  scenCode() {
    wx.scanCode({
      success(res) {
        console.log(res.result); // 当且仅当扫码为非微信二维码时，会返回result  
        // 如果扫码结果为URL，会自动尝试打开  
        // 如果扫码结果为微信小程序的码，会直接跳转到对应的小程序页面  
        // 如果扫码结果为公众号二维码，则会在手机上打开微信并跳转到对应的公众号  
      },
      fail(err) {
        console.error(err);
      }

    })
  }



})

 pages/home/home.json

@@ -6,6 +6,10 @@
    "t-dialog": "tdesign-miniprogram/dialog/dialog"
  },
  "navigationBarTitleText": "大禹节水",
  "navigationBarTextStyle": "white"

  "navigationBarTextStyle": "white",
  "permission": {  
    "scope.camera": {  
      "desc": "使用摄像头扫描二维码"
    } 
  }
}

 pages/home/home.wxml

@@ -1,5 +1,6 @@
<!--pages/home/home.wxml-->
<view class="base-wrapper">

  <view class="head-wrapper">
    <view class="head-top">
      <t-avatar class="avatar-example" image="{{image}}" size="120rpx" />
@@ -11,6 +12,7 @@
        <text class="unbind" bind:tap="feedBack">解绑</text>
        <text class="head-bottom" bind:tap="feedBack">联系客服</text>
      </view>
      <image class="scen-code" src="/images/scen_code.svg" bind:tap="scenCode"/>
    </view>
  </view>

@@ -47,7 +49,7 @@
      <view class="dot"></view>
    </view>
    <view class="scroll-bg">
      <view  wx:if="{{listData.length > 0}}" class="list-item" wx:for="{{listData}}" wx:for-item="item" wx:for-index="index">
      <view wx:if="{{listData.length > 0}}" class="list-item" wx:for="{{listData}}" wx:key="index">
        <view class="item-left">
          <!-- <image class="item-img" src="/images/pipeline.svg" /> -->
          <text>{{item.intakeNum}}</text>
@@ -64,6 +66,8 @@
      <text class="noMore-text">没有开泵记录</text>
    </view>
  </scroll-view>

  <t-dialog class="dialog" visible="{{showConfirm}}" content="确认关闭{{waterIntakeName}}吗？" confirm-btn="{{ { content: '确认', variant: 'base', theme: 'danger' } }}" close-on-overlay-click="false" cancel-btn="取消"  bind:confirm="confirmDialog" bind:cancel="closeDialog" />
  <t-dialog class="error-dialog"  title="关阀错误" visible="{{showErrorDialog}}" content="{{errorData}}" confirm-btn="{{ confirmBtn }}" bind:confirm="closeDialog" />

</view>

 pages/home/home.wxss

@@ -317,7 +317,17 @@
  /* background-color: #e0e0e0; */
}


.error-dialog{
  --td-dialog-title-color:red;
  --td-dialog-title-font-size:40rpx;
}

.scen-code{
  width: 40rpx;
  height: 40rpx;
  position: absolute; /* 添加这行 */
  top: 15rpx; /* 根据需要调整距离顶部的距离 */
  right: 30rpx; /* 根据需要调整距离右侧的距离 */

}