销售端生成收集手机号二维码接口

src/api/qw/companyCustomer.js

@@ -201,3 +201,20 @@ export function getShareMaterialWxCode(shareMaterialId) {
     method: 'get'
   });
 }
+
+// 获取分享素材列表（用于生成收集手机号二维码）
+export function getShareMaterialList() {
+  return request({
+    url: '/qw/companyCustomer/getShareMaterialList',
+    method: 'get'
+  });
+}
+
+// 生成收集手机号二维码
+export function createPhoneQRCode(materialId) {
+  return request({
+    url: '/qw/companyCustomer/createPhoneQRCode',
+    method: 'post',
+    data: { materialId: materialId }
+  });
+}

src/views/qw/companyCustomer/index.vue

@@ -266,8 +266,11 @@
       </el-col>
       <el-col :span="1.5">
         <el-button type="primary" plain size="mini" @click="handleShareMaterial"
-          >分享素材</el-button
-        >
+          >分享素材</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button type="success" plain icon="el-icon-share" size="mini" @click="handleGeneratePhoneQrCode"
+        >生成收集手机号二维码</el-button>
       </el-col>
       <right-toolbar
         :showSearch.sync="showSearch"
@@ -1603,6 +1606,103 @@
         <el-button type="primary" @click="submitTemplateForm">确 定</el-button>
       </div>
     </el-dialog>
+
+    <!-- ========== 生成收集手机号二维码 - 素材列表弹窗 ========== -->
+    <el-dialog
+      title="选择分享素材"
+      :visible.sync="phoneMaterialListDialogVisible"
+      width="800px"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="resetPhoneMaterialList"
+    >
+      <el-input
+        v-model="phoneMaterialSearchKeyword"
+        placeholder="请输入素材名称搜索"
+        size="small"
+        clearable
+        style="width: 300px; margin-bottom: 15px;"
+        @input="filterPhoneMaterialList"
+      />
+      <el-table
+        v-loading="phoneMaterialListLoading"
+        :data="phoneFilteredMaterialList"
+        border
+        highlight-current-row
+        @current-change="handlePhoneMaterialSelection"
+        style="width: 100%"
+      >
+        <el-table-column type="index" width="50" label="序号" align="center" />
+        <el-table-column label="素材名称" prop="materialName" min-width="120" />
+        <el-table-column label="类型" prop="type" width="100" align="center">
+          <template slot-scope="scope">
+            <el-tag :type="scope.row.type === 1 ? 'primary' : 'success'">
+              {{ scope.row.type === 1 ? '图文' : '视频' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="素材预览" prop="coverImgUrl" width="120" align="center">
+          <template slot-scope="scope">
+            <el-image
+              v-if="scope.row.coverImgUrl"
+              :src="scope.row.coverImgUrl"
+              style="width: 60px; height: 60px; object-fit: cover; border-radius: 4px;"
+              :preview-src-list="[scope.row.coverImgUrl]"
+            />
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="素材地址" prop="materialUrl" show-overflow-tooltip min-width="150">
+          <template slot-scope="scope">
+            <a :href="scope.row.materialUrl" target="_blank" v-if="scope.row.materialUrl">
+              查看素材
+            </a>
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <!-- 隐藏 id 不展示 -->
+      </el-table>
+      <p style="color: #909399; font-size: 13px; margin-top: 10px;">
+        当前选中：{{ selectedPhoneMaterialId ? getPhoneMaterialName(selectedPhoneMaterialId) : '未选择' }}
+      </p>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="phoneMaterialListDialogVisible = false">取 消</el-button>
+        <el-button
+          type="primary"
+          :disabled="!selectedPhoneMaterialId"
+          @click="confirmGeneratePhoneQrCode"
+        >确认选定素材生成二维码</el-button>
+      </div>
+    </el-dialog>
+
+    <!-- ========== 生成收集手机号二维码 - 二维码展示弹窗 ========== -->
+    <el-dialog
+      title="收集手机号二维码"
+      :visible.sync="phoneQrCodeDialogVisible"
+      width="450px"
+      append-to-body
+      :close-on-click-modal="false"
+      @close="onPhoneQrCodeDialogClose"
+    >
+      <div style="text-align: center; padding-bottom: 15px;">
+        <img
+          v-if="phoneQrCodeImage"
+          :src="phoneQrCodeImage"
+          style="width: 100%; max-width: 300px;"
+        />
+        <div v-else style="text-align: center; padding: 30px;">
+          生成二维码中...
+        </div>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="phoneQrCodeDialogVisible = false">关 闭</el-button>
+        <el-button
+          type="primary"
+          @click="downloadPhoneQrCode"
+          :disabled="!phoneQrCodeImage"
+        >下载二维码</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
@@ -1628,6 +1728,8 @@ import {
   getScrmPrescribeInfo,
   importCustomer,
   getShareMaterialWxCode,
+  getShareMaterialList,
+  createPhoneQRCode,
 } from "@/api/qw/companyCustomer";
 import { treeselect } from "@/api/company/companyDept";
 import { parseTime } from "@/utils/common";
@@ -1971,6 +2073,16 @@ export default {
 
       shareMaterialWxCodeForm:{open: false, title: "素材分享二维码"},
       shareMaterialWxCodeImage: null,
+
+      // ========== 生成收集手机号二维码相关 ==========
+      phoneMaterialListDialogVisible: false,   // 素材列表弹窗
+      phoneMaterialListLoading: false,
+      phoneMaterialList: [],                    // 原始素材列表
+      phoneFilteredMaterialList: [],            // 过滤后的列表
+      phoneMaterialSearchKeyword: '',           // 搜索关键词
+      selectedPhoneMaterialId: null,            // 选中的素材ID
+      phoneQrCodeDialogVisible: false,          // 二维码展示弹窗
+      phoneQrCodeImage: null,                   // 二维码图片URL
     };
   },
   created() {
@@ -2018,23 +2130,23 @@ export default {
       })
     },
 
-    generateShareMaterialWxCode(shareMaterialId) { 
+    generateShareMaterialWxCode(shareMaterialId) {
       let loadingRock = this.$loading({
         lock: true,
         text: '生成二维码中~~请不要刷新页面！！',
         spinner: 'el-icon-loading',
         background: 'rgba(0, 0, 0, 0.7)'
       });
-      getShareMaterialWxCode(shareMaterialId).then(response => { 
+      getShareMaterialWxCode(shareMaterialId).then(response => {
         this.shareMaterialCancel();
         this.shareMaterialWxCodeImage = response.url;
         this.shareMaterialWxCodeForm.open = true;
         loadingRock.close();
-      }).finally(res => { 
+      }).finally(res => {
         loadingRock.close();
       })
     },
-    shareMaterialCancel() { 
+    shareMaterialCancel() {
       this.shareMaterial.open = false;
       this.shareMaterialForm = { shareMaterialId: null, type: null, url: null };
       this.$refs.shareMaterialForm.resetFields();
@@ -3208,6 +3320,123 @@ export default {
       }
       return { justifyContent: "space-between" }; // 两张时分散对齐
     },
+
+    // ================== 生成收集手机号二维码相关方法 ==================
+
+    /** 打开素材列表弹窗 */
+    handleGeneratePhoneQrCode() {
+      this.phoneMaterialListDialogVisible = true;
+      this.phoneMaterialListLoading = true;
+      this.selectedPhoneMaterialId = null;
+      this.phoneMaterialSearchKeyword = '';
+      this.phoneFilteredMaterialList = [];
+
+      getShareMaterialList()
+        .then(response => {
+          this.phoneMaterialList = response.data || [];
+          this.phoneFilteredMaterialList = [...this.phoneMaterialList];
+        })
+        .catch(error => {
+          this.$message.error(error.msg || '获取素材列表失败');
+        })
+        .finally(() => {
+          this.phoneMaterialListLoading = false;
+        });
+    },
+
+    /** 过滤素材列表（模糊搜索） */
+    filterPhoneMaterialList() {
+      const keyword = this.phoneMaterialSearchKeyword.trim().toLowerCase();
+      if (!keyword) {
+        this.phoneFilteredMaterialList = [...this.phoneMaterialList];
+      } else {
+        this.phoneFilteredMaterialList = this.phoneMaterialList.filter(item =>
+          item.materialName && item.materialName.toLowerCase().includes(keyword)
+        );
+      }
+    },
+
+    /** 选中素材（单选） */
+    handlePhoneMaterialSelection(row) {
+      if (row) {
+        this.selectedPhoneMaterialId = row.id;
+      } else {
+        this.selectedPhoneMaterialId = null;
+      }
+    },
+
+    /** 根据ID获取素材名称（显示选中状态） */
+    getPhoneMaterialName(id) {
+      const item = this.phoneMaterialList.find(d => d.id === id);
+      return item ? item.materialName : '';
+    },
+
+    /** 确认生成二维码 */
+    confirmGeneratePhoneQrCode() {
+      if (!this.selectedPhoneMaterialId) {
+        this.$message.warning('请先选择素材');
+        return;
+      }
+
+      // 关闭素材列表弹窗
+      this.phoneMaterialListDialogVisible = false;
+
+      // 打开二维码展示弹窗，显示加载状态
+      this.phoneQrCodeImage = null;
+      this.phoneQrCodeDialogVisible = true;
+
+      const loading = this.$loading({
+        lock: true,
+        text: '正在生成二维码...',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+
+      createPhoneQRCode(this.selectedPhoneMaterialId)
+        .then(response => {
+          // 假设后端返回数据中有 url 字段
+          if (response.url) {
+            this.phoneQrCodeImage = response.url;
+          } else {
+            this.$message.error('获取二维码失败：返回数据无效');
+            this.phoneQrCodeDialogVisible = false;
+          }
+        })
+        .catch(error => {
+          this.$message.error(error.msg || error.message || '生成二维码失败');
+          this.phoneQrCodeDialogVisible = false;
+        })
+        .finally(() => {
+          loading.close();
+        });
+    },
+
+    /** 下载二维码 */
+    downloadPhoneQrCode() {
+      if (!this.phoneQrCodeImage) {
+        this.$message.warning('二维码尚未生成');
+        return;
+      }
+      const link = document.createElement('a');
+      link.href = this.phoneQrCodeImage;
+      link.download = `收集手机号二维码_${new Date().getTime()}.png`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    },
+
+    /** 关闭二维码弹窗时的回调（可选） */
+    onPhoneQrCodeDialogClose() {
+      // 可在此刷新列表或其他操作
+    },
+
+    /** 重置素材列表弹窗状态 */
+    resetPhoneMaterialList() {
+      this.phoneMaterialSearchKeyword = '';
+      this.selectedPhoneMaterialId = null;
+      this.phoneFilteredMaterialList = [];
+      this.phoneMaterialList = [];
+    }
   },
 };
 </script>