refactor: 重构PC分享页面，优化布局展示，增加移动端二维码展示
Chopper711
parent
4ef2496221
commit
f968f3d20d
|
|
@ -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端域名
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
商品链接：<Input style="width: 400px" v-model="qrcode"></Input>
|
||||
<div style="width: 150px; height: 150px; border: 1px solid #eee">
|
||||
<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;
|
||||
top: -200px;
|
||||
left: 200px;
|
||||
// position: relative;
|
||||
// top: -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue