pref: update QRCode show modal

pages/createFile/createFile.wxml

@@ -19,7 +19,7 @@
       <view class="form-item username ittflex-jcb">
         <view class="label ittflex-jcs">姓名:</view>
         <view class="actions file-input">
-          <input bindinput="bindUserNameInput" class="weui-input"  placeholder="请输入" 	placeholder-style="text-align: right;font-size:26rpx;color:#999;"/>
+          <input bindinput="bindUserNameInput" maxlength="6" class="weui-input"  placeholder="请输入" 	placeholder-style="text-align: right;font-size:26rpx;color:#999;"/>
         </view>
       </view>
       <view class="form-item sex ittflex-jcs">

pages/createFile/createFile.wxss

@@ -86,11 +86,11 @@
 }
 
 .readio-item-active {
-  border-color: #1890FF;
+  border-color: var(--maincolor);
 }
 
 .readio-item-active .in-cricle {
-  background: #1890FF;
+  background: var(--maincolor);
 }
 
 .actions-bothday {

pages/handleFile/handleFile.wxml

@@ -19,7 +19,7 @@
           <view class="fu-bottom fu-date">{{item.birthDay}}</view>
         </view>
         <view class="f-qrcode ittflex">
-          <image class="qrcode-item" src="../../imaes/erweima@2x.png"></image>
+          <!-- <image class="qrcode-item" src="../../imaes/erweima@2x.png"></image> -->
         </view>
       </view>
     </view>

pages/index/index.js

@@ -16,7 +16,8 @@ Page({
     scanTimer: null,
     baseStr: 'data:image/jpg;base64,',
     QRCodeBase64: '',
-    qrcodeDialog: false
+    qrcodeDialog: false,
+    qrUserName: ''
   },
   
   onShow () {
@@ -162,6 +163,10 @@ Page({
   handleShowQRCode (e) {
     var that = this
     var id = e.currentTarget.dataset.id
+    var realname = e.currentTarget.dataset.realname
+    this.setData({
+      qrUserName: realname
+    })
     wx.showLoading({
       title: '生成中...'
     })

pages/index/index.wxml

@@ -55,7 +55,7 @@
                 </view>
                 <view class="p-date">{{item.birthDay}}</view>
               </view>
-              <view class="qrcode" data-id="{{item.documentId}}"  bindtap="handleShowQRCode">
+              <view class="qrcode" data-realname="{{item.realName}}" data-id="{{item.documentId}}"  bindtap="handleShowQRCode">
                 <image class="qrcode-item" src="../../imaes/erweima@2x.png"></image>
               </view>
             </view>
@@ -69,9 +69,16 @@
   <view class="index-banner" bindtap="handlActions">
     <image class="index-img" src="../../imaes/index.jpg"></image>
   </view>
-  <view class="my-dialog" wx:if="{{qrcodeDialog}}" bindtap="handleCloseQRCode">
+  <view class="my-dialog" wx:if="{{qrcodeDialog}}">
     <view class="qr-content">
-      <image class="qr-content" src="{{QRCodeBase64}}"></image>
+      <view class="qr-title">{{qrUserName}}的二维码</view>
+      <image class="qr-content-img" src="{{QRCodeBase64}}"></image>
+      <view class="qr-close">
+        <view class="ver-line"></view>
+        <view class="qe-close-icon ittflex" bindtap="handleCloseQRCode">
+          <van-icon name="cross" color="#fff" size="25" />
+        </view>
+      </view>
     </view>
   </view>
 </view>

pages/index/index.wxss

@@ -289,12 +289,51 @@
   height: 100%;
   position: absolute;
   top: 0;
-  background-color: rgba(0,0,0,0.3);
+  background-color: rgba(0,0,0,0.7);
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
 }
 .qr-content {
-  width: 500rpx;
-  height: 500rpx;
+  width: 520rpx;
+  height: 490rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  margin-top: 320rpx;
+  position: relative;
+}
+.qr-title {
+  padding: 30rpx 0;
+  text-align: center;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333333;
+}
+.qr-content-img {
+  width: 360rpx;
+  height: 360rpx;
+  margin-left: calc(50% - 180rpx);
+}
+.qr-close {
+  width: 70rpx;
+  height: 126rpx;
+  position: absolute;
+  left: calc(50% - 35rpx);
+  bottom: -125rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.ver-line {
+  width: 4rpx;
+  height: 56rpx;
+  background-color: #fff;
+}
+.qe-close-icon {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-sizing: border-box;
 }

pages/myFile/myFile.js

@@ -10,7 +10,8 @@ Page({
     hasNext: false,
     fileList: [],
     baseStr: 'data:image/jpg;base64,',
-    QRCodeBase64: ''
+    QRCodeBase64: '',
+    qrUserName: ''
   },
 
   /**
@@ -93,6 +94,10 @@ Page({
   handleShowQRCode (e) {
     var that = this
     var id = e.currentTarget.dataset.id
+    var realname = e.currentTarget.dataset.realname
+    this.setData({
+      qrUserName: realname
+    })
     wx.showLoading({
       title: '生成中...'
     })

pages/myFile/myFile.wxml

@@ -21,7 +21,7 @@
               </view>
               <view class="fu-bottom fu-date">{{item.birthDay}}</view>
             </view>
-            <view class="f-qrcode ittflex" data-id="{{item.documentId}}" bindtap="handleShowQRCode">
+            <view class="f-qrcode ittflex" data-realname="{{item.realName}}" data-id="{{item.documentId}}" bindtap="handleShowQRCode">
               <image class="qrcode-item" src="../../imaes/erweima@2x.png"></image>
             </view>
           </view>
@@ -36,10 +36,17 @@
         <view class="handle-btn itt-btn" bindtap="handleAddFile">新建档案</view>
       </view>
     </view>
-  <view class="my-dialog" wx:if="{{qrcodeDialog}}" bindtap="handleCloseQRCode">
-    <view class="qr-content">
-      <image class="qr-content" src="{{QRCodeBase64}}"></image>
+    <view class="my-dialog" wx:if="{{qrcodeDialog}}">
+      <view class="qr-content">
+        <view class="qr-title">{{qrUserName}}的二维码</view>
+        <image class="qr-content-img" src="{{QRCodeBase64}}"></image>
+        <view class="qr-close">
+          <view class="ver-line"></view>
+          <view class="qe-close-icon ittflex" bindtap="handleCloseQRCode">
+            <van-icon name="cross" color="#fff" size="25" />
+          </view>
+        </view>
+      </view>
     </view>
-  </view>
 </view>
 

pages/myFile/myFile.wxss

@@ -144,12 +144,51 @@
   height: 100%;
   position: absolute;
   top: 0;
-  background-color: rgba(0,0,0,0.3);
+  background-color: rgba(0,0,0,0.7);
   display: flex;
   justify-content: center;
-  align-items: center;
+  align-items: flex-start;
 }
 .qr-content {
-  width: 500rpx;
-  height: 500rpx;
+  width: 520rpx;
+  height: 490rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  margin-top: 320rpx;
+  position: relative;
+}
+.qr-title {
+  padding: 30rpx 0;
+  text-align: center;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #333333;
+}
+.qr-content-img {
+  width: 360rpx;
+  height: 360rpx;
+  margin-left: calc(50% - 180rpx);
+}
+.qr-close {
+  width: 70rpx;
+  height: 126rpx;
+  position: absolute;
+  left: calc(50% - 35rpx);
+  bottom: -125rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.ver-line {
+  width: 4rpx;
+  height: 56rpx;
+  background-color: #fff;
+}
+.qe-close-icon {
+  width: 70rpx;
+  height: 70rpx;
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-sizing: border-box;
 }