fix:订单详情二维码样式修改

pages/order/order.js

@@ -1,7 +1,5 @@
-import {
-  drawById
-} from "../../utils/qrcode"
 import orderApi from '../../api/order'
+import drawQrcode from '../../utils/weapp.qrcode.js'
 // pages/order/order.js
 Page({
 
@@ -9,12 +7,12 @@ Page({
    * 页面的初始数据
    */
   data: {
-    orderId:0,
+    orderId: 0,
     order: {},
     //1显示订单详情，2显示确认支付，取消订单，3显示删除订单
     orderStatus: 1,
-    timer: {}
-
+    timer: {},
+    codeUrl: ''
   },
 
   /**
@@ -23,9 +21,11 @@ Page({
   onLoad: async function (options) {
     var orderId = options.id;
     this.setData({
-      orderId:orderId
+      orderId: orderId
     })
-    
+    let order = await orderApi.getOrderById(orderId);
+
+
 
   },
   //生成二维码
@@ -95,6 +95,16 @@ Page({
     })
 
   },
+  drawCode: function (writeOffCode) {
+    let width = this.rpxToPx(280);
+    drawQrcode({
+      width: width,
+      height: width,
+      canvasId: 'qrCode',
+      text: writeOffCode,
+
+    })
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -105,23 +115,24 @@ Page({
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow:async function () {
+  onShow: async function () {
     var orderId = this.data.orderId;
     let order = await orderApi.getOrderById(orderId);
     this.setData({
       order: order.info,
       orderStatus: order.info.status,
     })
-    
+
     if (order.info.status == 1) {
       this.createTimeClock()
     }
     if (order.info.status == 2) {
-      drawById.call(wx, "qrCode", {
-        text: order.info.writeOffCode, // 二维码内容
-      })
-
+      this.drawCode(order.info.writeOffCode)
     }
+
+  },
+  rpxToPx(data) {
+    return data / 750 * wx.getSystemInfoSync().windowWidth
   },
 
   /**

pages/order/order.scss

@@ -23,7 +23,7 @@
             height: 320rpx;
             border: 1px solid #ebeef5;
             margin: 20rpx auto;
-
+            position: relative;
             .canvas-code {
                 background-color: #fff;
                 width: 280rpx;
@@ -35,6 +35,18 @@
                 text-align: center;
                 margin: 30rpx auto;
             }
+            .refresh{
+                width: 280rpx;
+                height: 280rpx;
+                background-color: rgba(238, 238, 238, 0.95);
+                position: absolute;
+                top: 20rpx;
+                left: 20rpx;
+                font-size: 26px;
+                text-align: center;
+                color: rgb(92, 92, 92);
+                line-height: 280rpx;
+            }
         }
     }
 

pages/order/order.wxml

@@ -1,11 +1,19 @@
 <!-- pages/order/order.wxml -->
 <view class="container">
     <!-- 倒计时 -->
-    <view class="timer" wx:if="{{order.status==1}}">等待买家付款，剩余{{timer.minute}}分{{timer.second}}秒后自动关闭</view>
+    <view class="timer" wx:if="{{order.status==1}}">
+        等待买家付款，剩余{{timer.minute}}分{{timer.second}}秒后自动关闭
+    </view>
     <view class="code-info" wx:if="{{order.status==2}}">
         <view class="code card">
-            <canvas class="canvas-code" type="2d" id="qrCode" />
-            <view class="code-text f13 c-707070">进店请出示二维码进行核销</view>
+            <canvas class="canvas-code" style="width:280rpx;height:280rpx" canvas-id="qrCode" />
+            <view class="code-text f13 c-707070" wx:if="{{order.writeOffStatus==1}}">
+                进店请出示二维码进行核销
+            </view>
+            <view wx:if="{{order.writeOffStatus==2}}">
+                <view class="refresh">券码已使用</view>
+                <view class="code-text f13 c-707070">该券码已核销</view>
+            </view>
         </view>
     </view>
     <view class="order card">
@@ -35,8 +43,8 @@
         </view>
     </view>
     <view class="order-btn">
-        <view class="delete-btn" bindtap = "cancelOrder" wx:if="{{order.status==1}}">取消订单</view>
+        <view class="delete-btn" bindtap="cancelOrder" wx:if="{{order.status==1}}">取消订单</view>
         <view class="pay-btn" wx:if="{{order.status==1}}">确认支付</view>
-        <view class="delete-btn" bindtap = "deleteOrder" wx:if="{{order.status==3}}">删除订单</view>
+        <view class="delete-btn" bindtap="deleteOrder" wx:if="{{order.status==3}}">删除订单</view>
     </view>
 </view>

pages/order/order.wxss

@@ -23,6 +23,7 @@
   height: 320rpx;
   border: 1px solid #ebeef5;
   margin: 20rpx auto;
+  position: relative;
 }
 
 .container .code-info .code .canvas-code {
@@ -37,6 +38,19 @@
   margin: 30rpx auto;
 }
 
+.container .code-info .code .refresh {
+  width: 280rpx;
+  height: 280rpx;
+  background-color: rgba(238, 238, 238, 0.95);
+  position: absolute;
+  top: 20rpx;
+  left: 20rpx;
+  font-size: 26px;
+  text-align: center;
+  color: #5c5c5c;
+  line-height: 280rpx;
+}
+
 .container .order {
   margin-top: 20rpx;
   display: flex;