商品详情提供二维码扫码进入展示所有按钮

src/api/hisStore/storeProduct.js

@@ -73,6 +73,14 @@ export function bulkCopy(productId) {
   })
 }
 
+export function generateCode(data) {
+  return request({
+    url: '/store/store/storeProduct/getWxaCodeUnLimit',
+    method: 'get',
+    params: data
+  })
+}
+
 // 导出商品
 export function exportStoreProduct(query) {
   return request({

src/views/hisStore/storeProduct/indexZm.vue

@@ -362,10 +362,48 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['store:storeProduct:remove']"
           >删除</el-button>
+
+
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            v-if="scope.row.productCodeUrl == null"
+            @click.native="handleGenerateCode(scope.row)"
+          >生成二维码</el-button>
+
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            v-else
+            @click.native="handleCheckCode(scope.row)"
+          >查看二维码</el-button>
+
         </template>
       </el-table-column>
     </el-table>
 
+    <el-dialog
+      title="商品二维码"
+      :visible.sync="qrcodeDialogVisible"
+      width="500px"
+      :close-on-click-modal="true"
+      :show-close="true"
+      top="10vh"
+    >
+      <div class="qrcode-img-container">
+
+        <img
+          :src="currentQrcodeUrl"
+          alt="商品二维码"
+          class="qrcode-img"
+          @error="handleImgError"
+        >
+      </div>
+    </el-dialog>
+
+
     <pagination
       v-show="total>0"
       :total="total"
@@ -967,8 +1005,8 @@ import {
   addOrEdit,
   exportStoreProduct,
   importTemplate,
-  batchModify,bulkCopy
-} from "@/api/hisStore/storeProduct";
+  batchModify, bulkCopy, generateCode
+} from '@/api/hisStore/storeProduct'
 import { getAllStoreProductCategory } from "@/api/hisStore/storeProductCategory";
 import { getAllStoreProductRule } from "@/api/hisStore/storeProductRule";
 import { getAllShippingTemplates } from "@/api/hisStore/shippingTemplates";
@@ -1221,7 +1259,10 @@ export default {
         // storeId :[
         //   { required: true, message: "所属店铺不能为空", trigger: "blur"}
         // ],
-      }
+      },
+      qrcodeDialogVisible: false, // 弹窗显示状态：默认隐藏
+      currentQrcodeUrl: "", // 当前要展示的二维码地址
+      defaultImg: "https://via.placeholder.com/400x400?text=二维码加载失败", // 占位图
     };
   },
   created() {
@@ -1747,6 +1788,41 @@ export default {
         }
       });
     },
+
+
+    //生成二维码
+    handleGenerateCode(row){
+      this.$confirm('是否确认生成小程序二维码?', "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      }).then(() => {
+        generateCode({"productId":row.productId}).then(response=>{
+          if(response.code == 200){
+            console.info("返回路径：",response.data.productCodeUrl)
+            row.productCodeUrl = response.data.productCodeUrl
+          }
+        })
+      }).catch(() => {});
+    },
+    // 查看二维码图片
+    handleCheckCode(row) {
+      // 先校验图片地址是否存在
+      if (!row.productCodeUrl) {
+        this.$message.warning("二维码图片地址不存在，请稍后重试");
+        return;
+      }
+      console.info("返回路径：",row.productCodeUrl)
+      // 赋值当前图片地址 + 打开弹窗
+      this.currentQrcodeUrl = row.productCodeUrl;
+      this.qrcodeDialogVisible = true;
+      console.info("设置后弹窗状态：", this.qrcodeDialogVisible);
+    },
+    // 2. 图片加载失败：替换为占位图
+    handleImgError(e) {
+      e.target.src = this.defaultImg;
+    },
+
     /** 删除按钮操作 */
     handleDelete(row) {
       const productIds = row.productId || this.ids;