1

src/views/JXSK/production/qrDetails/index.vue

@@ -1,10 +1,37 @@
 <template>
   <div style="width: 100vw; height: 100vh">
-    <div style="text-align: center; padding: 40px" class="bg">
+    <div style="text-align: center; padding: 20px" class="bg">
       <div class="title">嘉兴双拓科技</div>
-      <div class="btn" @click="printDialog = true">工单详情</div>
-      <div class="btn" @click="handleAdd" style="margin-top: 10vh">
-        添加售后
+      <div class="top">
+        <div class="t">
+          <div class="title1">产品信息</div>
+        </div>
+        <div class="b">
+          <div class="left">
+            <div ref="code" class="code"></div>
+          </div>
+          <div class="right">
+            <div>
+              {{ otherData.productName }}
+            </div>
+            <div>
+              {{ otherData.productSpec }}
+            </div>
+            <div>
+              {{ otherData.productSn }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="bottom">
+        <div class="btn" @click="printDialog = true">
+          <img src="@/assets/images/phone-btn2.png" alt="" class="img" />
+          <span> 工单详情</span>
+        </div>
+        <div class="btn" @click="handleAdd" style="margin-top: 30px">
+          <img src="@/assets/images/phone-btn1.png" alt="" class="img" />
+          <span> 售后申请 </span>
+        </div>
       </div>
     </div>
 
@@ -81,7 +108,7 @@
     </el-dialog>
 
     <el-dialog
-      title="售后"
+      title="售后申请"
       v-if="afterSalesDialog"
       v-model="afterSalesDialog"
       :width="width"
@@ -193,6 +220,7 @@ import TitleInfo from "@/components/TitleInfo/index.vue";
 import useUserStore from "@/store/modules/user";
 import request from "@/utils/request";
 import { ElMessage, ElMessageBox } from "element-plus";
+import QRCode from "qrcodejs2-fix";
 
 const userStore = useUserStore();
 const route = useRoute();
@@ -326,6 +354,22 @@ const uploadFile = async (file) => {
 const onPreviewFile = (file) => {
   window.open(file.raw.fileUrl, "_blank");
 };
+
+onMounted(() => {
+  nextTick(() => {
+    if (route.query && route.query.productSn) {
+      proxy.$refs.code.innerHTML = ""; //清除二维码方法一
+      new QRCode(proxy.$refs.code, {
+        text: route.query.productSn, //页面地址 ,如果页面需要参数传递请注意哈希模式#
+        width: 100,
+        height: 100,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+    }
+  });
+});
 </script>
 
 <style lang="scss" scoped>
@@ -335,21 +379,66 @@ const onPreviewFile = (file) => {
   background-size: cover;
 }
 .title {
-  font-size: 35px;
+  font-size: 48px;
   font-weight: 700;
   color: #fff;
-  margin: 20px 0 10vh 0;
+  margin: 10px 0 40px 0;
 }
-.btn {
-  width: 80vw;
-  height: 30vh;
-  text-align: center;
-  cursor: pointer;
-  line-height: 30vh;
-  border: 10px solid #fff;
-  color: #fff;
-  font-size: 25px;
-  font-weight: 700;
-  margin: 0 auto;
+.top {
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 5px;
+  padding: 10px;
+  .t {
+    .title1 {
+      font-size: 20px;
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 10px;
+      text-align: left;
+    }
+  }
+  .b {
+    padding-bottom: 10px;
+    display: flex;
+    // justify-content: space-between;
+    .left {
+      margin-right: 20px;
+      .code {
+        margin-left: 20px;
+      }
+    }
+    .right {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      text-align: left;
+    }
+  }
+}
+.bottom {
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 5px;
+  padding: 30px;
+  margin-top: 20px;
+  .btn {
+    height: 13vh;
+    text-align: center;
+    cursor: pointer;
+    line-height: 13vh;
+    color: #fff;
+    background-color: rgba(21, 73, 121, 1);
+    font-size: 25px;
+    font-weight: 700;
+    margin: 0 auto;
+    border-radius: 5px;
+    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.349019607843137);
+  }
+}
+.img {
+  width: 40px;
+  object-fit: contain;
+  vertical-align: middle;
+  margin-bottom: 5px;
+  margin-right: 10px;
 }
 </style>