refactor: 重构PC分享页面，优化布局展示，增加移动端二维码展示

buyer/src/config/index.js

@@ -19,5 +19,9 @@ module.exports = {
   aMapSwitch:false, //是否开启高德定位
   enableCDN: true, //生产环境 是否启用cdn加载 vue等js
   port: 10000, //端口
-  inputMaxLength:'140' //全局输入框默认最大输入长度字
+  inputMaxLength:'140', //全局输入框默认最大输入长度字
+
+
+  PC_DOMAIN: "https://pc-b2b2c.pickmall.cn", // PC端域名
+  WAP_DOMAIN: "https://m-b2b2c.pickmall.cn", // WAP端域名
 };

buyer/src/pages/home/memberCenter/Distribution.vue

@@ -226,7 +226,23 @@
         >
       </Alert>
     </div>
+    <!-- 分销资格被清退 -->
+    <div v-if="status === 4">
+      <Alert type="error">
+        您的分销资格已被清退。请联系管理员或进行申诉
 
+        <Button style="margin-left: 50px;" type="warning" @click="repaying">申诉</Button>
+      </Alert>
+    </div>
+    <!-- 分销申诉审核 -->
+    <div v-if="status === 5">
+      <Alert type="success">
+        您提交的申诉正在审核
+        <template slot="desc"
+        >提交认证申请后，工作人员将在三个工作日进行核对完成审核</template
+        >
+      </Alert>
+    </div>
     <Modal v-model="withdrawApplyModal" width="530">
       <p slot="header">
         <Icon type="edit"></Icon>
@@ -243,21 +259,39 @@
     </Modal>
     <Modal v-model="qrcodeShow" title="分销商品" width="800">
       <Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
-      <div style="width: 200px; height: 200px; border: 1px solid #eee">
+      <div class="qrcode">
+        <div style="width: 150px; height: 150px; border: 1px solid #eee">
           <vue-qr
             :text="qrcode"
             :callback="qrcodeData"
             :margin="0"
             colorDark="#000"
             colorLight="#fff"
-          :size="200"
+            :size="150"
           ></vue-qr>
+          <div class="qrcode-platform">PC端</div>
           <Button class="download-btn" type="success" @click="downloadQrcode"
           >下载二维码</Button
           >
         </div>
-      <div class="mt_10">
+        <div style="width: 150px; height: 150px; border: 1px solid #eee">
-        商品链接：<Input style="width: 400px" v-model="qrcode"></Input>
+          <vue-qr
+            :text="qrcodeH5"
+            :callback="qrcodeDataH5"
+            :margin="0"
+            colorDark="#000"
+            colorLight="#fff"
+            :size="150"
+          ></vue-qr>
+          <div class="qrcode-platform">移动应用端</div>
+          <Button class="download-btn" type="success" @click="downloadQrcodeH5"
+          >下载二维码</Button
+          >
+        </div>
+      </div>
+
+      <div class="mt_10" style="margin-top: 100px;">
+        商品链接：<Input style="width: 600px" v-model="qrcode"></Input>
       </div>
     </Modal>
   </div>
@@ -280,6 +314,7 @@ export default {
   components: { vueQr },
   data() {
     return {
+      config:require('@/config'),
       status: 0, // 申请状态，0为未申请 1 申请中 2 申请完成 3 功能暂未开启
       applyForm: {}, // 申请表单
       rules: {
@@ -364,8 +399,10 @@ export default {
         order: "desc",
       },
       qrcode: "", // 二维码
+      qrcodeH5:"",//H5二维码
       qrcodeShow: false, // 显示二维码
       base64Img: "", // base64编码
+      base64ImgH5: "", // base64H5编码
       goodsNameCurr: "", // 当前分销商品名称
     };
   },
@@ -406,6 +443,10 @@ export default {
       // 二维码base64地址
       this.base64Img = data64;
     },
+    qrcodeDataH5(data64) {
+      // 二维码H5端base64地址
+      this.base64ImgH5 = data64;
+    },
     downloadQrcode() {
       // 下载二维码
       let a = document.createElement("a"); // 生成一个a元素
@@ -414,6 +455,14 @@ export default {
       a.href = this.base64Img; // 将生成的URL设置为a.href属性
       a.dispatchEvent(event); // 触发a的单击事件
     },
+    downloadQrcodeH5(){
+      // 下载H5二维码
+      let a = document.createElement("a"); // 生成一个a元素
+      let event = new MouseEvent("click"); // 创建一个单击事件
+      a.download = this.goodsNameCurr || "photo";
+      a.href = this.base64ImgH5; // 将生成的URL设置为a.href属性
+      a.dispatchEvent(event); // 触发a的单击事件
+    },
     tabPaneChange(tab) {
       // tab栏切换
       if (tab === "goodsChecked") {
@@ -453,7 +502,8 @@ export default {
     },
     fenxiao(row) {
       // 分销商品
-      this.qrcode = `${location.origin}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
+      this.qrcode = `${this.config.PC_DOMAIN}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
+      this.qrcodeH5 = `${this.config.WAP_DOMAIN}/pages/product/goods?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
       this.goodsNameCurr = row.goodsName;
       this.qrcodeShow = true;
     },
@@ -469,18 +519,31 @@ export default {
         if (res.success) this.logData = res.result;
       });
     },
+    //申诉
+    repaying(){
+      applyDistribution().then((res) => {
+        this.applyLoading = false;
+        if (res.success) {
+          this.$Message.success("申诉已提交，请等待管理员审核");
+          // this.status = 1;
+        }
+      });
+    },
     distribution() {
       // 获取分销商信息
       distribution().then((res) => {
         if (res.result) {
           this.result = res.result;
           let type = res.result.distributionStatus;
-
           if (type === "PASS") {
             this.status = 2;
             this.getGoodsData();
-          } else if (type === "RETREAT" || type === "REFUSE") {
+          } else if ( type === "REFUSE") {
             this.status = 0;
+          } else if (type === "RETREAT") {
+            this.status = 4;
+          }else if (type === "APPEAL") {
+            this.status = 5;
           }else {
             this.status = 1;
           }
@@ -523,9 +586,11 @@ export default {
   }
 }
 .download-btn {
-  position: relative;
+  // position: relative;
-  top: -200px;
+  // top: -200px;
-  left: 200px;
+  // left: 200px;
+  margin-left: 25px;
+  margin-top: 5px
 }
 /deep/ .ivu-alert-message {
   p {
@@ -540,4 +605,15 @@ export default {
     margin: 6px 0;
   }
 }
+.qrcode{
+  display: flex;
+  justify-content: space-evenly;
+  padding-top: 10px
+
+}
+.qrcode-platform{
+  text-align: center;
+  font-size: 14px;
+  margin: 5px;
+}
 </style>