修改分销中展示问题

master
lemon橪 2022-07-08 18:52:03 +08:00
parent f3ef286aa7
commit 954cd1cda9
2 changed files with 403 additions and 263 deletions

View File

@ -1,190 +1,293 @@
<template>
<div class='wrapper'>
<card _Title='我的分销'/>
<!-- 分销申请 -->
<div v-if="status === 0">
<Alert type="warning">分销商申请</Alert>
<Form ref="form" :model="applyForm" :rules="rules">
<FormItem label="姓名" prop="name">
<Input v-model="applyForm.name"></Input>
</FormItem>
<FormItem label="身份证号" prop="idNumber">
<Input v-model="applyForm.idNumber"></Input>
</FormItem>
<FormItem label="银行开户行" prop="settlementBankBranchName">
<Input v-model="applyForm.settlementBankBranchName"></Input>
</FormItem>
<FormItem label="银行开户名" prop="settlementBankAccountName">
<Input v-model="applyForm.settlementBankAccountName"></Input>
</FormItem>
<FormItem label="银行账号" prop="settlementBankAccountNum">
<Input v-model="applyForm.settlementBankAccountNum"></Input>
</FormItem>
<div class="wrapper">
<card _Title="我的分销" />
<!-- 分销申请 -->
<FormItem>
<Button type="primary" :loading="applyLoading" @click="apply"></Button>
</FormItem>
</Form>
</div>
<!-- 分销审核 -->
<div v-if="status === 1">
<Alert type="success">
您提交的信息正在审核
<template slot="desc">提交认证申请后工作人员将在三个工作日进行核对完成审核</template>
</Alert>
</div>
<!-- 分销提现商品订单 -->
<div v-if="status === 2">
<div class="box">
<div class="mb_20 account-price">
<span class="subTips">可提现金额</span>
<span class="fontsize_48 global_color">{{ result.canRebate | unitPrice }}</span>
<span class="subTips">冻结金额</span>
<span class="">{{ result.commissionFrozen | unitPrice }}</span>
<Button type="primary" size="small" class="ml_20" @click="withdrawApplyModal = true">申请提现</Button>
</div>
</div>
<Tabs :value="tabName" @on-click="tabPaneChange">
<TabPane label="已选商品" name="goodsChecked">
<Table stripe :columns="goodsColumns" :data="goodsData.records">
<template slot-scope="{ row }" slot="name">
<div class="goods-msg" @click="linkTo(`/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`)"><img style="vertical-align:top;" :src="row.thumbnail" width="60" height="60" alt="">&nbsp; {{row.goodsName}}</div>
</template>
<template slot-scope="{ row }" slot="price">
<span> {{ row.price | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="commission">
<span> {{ row.commission | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="action">
<Button type="success" size="small" style="margin-right: 5px" @click="fenxiao(row)"></Button>
<Button type="error" size="small" @click="selectGoods(row.id, false)">取消选择</Button>
</template>
</Table>
<div class="page-size">
<Page
:current="params.pageNumber"
:total="goodsData.total"
:page-size="params.pageSize"
@on-change="changePage"
size="small"
show-total
show-elevator
></Page>
</div>
</TabPane>
<TabPane label="未选商品" name="goodsUncheck">
<Table stripe :columns="goodsColumns" :data="goodsData.records">
<template slot-scope="{ row }" slot="name">
<div class="goods-msg" @click="linkTo(`/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`)"><img style="vertical-align:top;" :src="row.thumbnail" width="60" height="60" alt="">&nbsp; {{row.goodsName}}</div>
</template>
<template slot-scope="{ row }" slot="price">
<span> {{ row.price | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="commission">
<span> {{ row.commission | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="action">
<Button type="primary" size="small" style="margin-right: 5px" @click="selectGoods(row.id, true)">选择商品</Button>
</template>
</Table>
<div class="page-size">
<Page
:current="params.pageNumber"
:total="goodsData.total"
:page-size="params.pageSize"
@on-change="changePage"
size="small"
show-total
show-elevator
></Page>
</div>
</TabPane>
<TabPane label="提现记录" name="log">
<Table stripe :columns="logColumns" :data="logData.records">
<template slot-scope="{ row }" slot="sn">
<span>{{row.sn}}</span>
</template>
<template slot-scope="{ row }" slot="time">
<span>{{row.createTime}}</span>
</template>
<template slot-scope="{ row }" slot="price">
<span v-if="row.distributionCashStatus == 'REFUSE'" style="color: green"> +{{ row.price | unitPrice }}</span>
<span v-else style="color: red"> -{{ row.price | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="status">
<span> {{row.distributionCashStatus == "APPLY" ? "待处理" : row.distributionCashStatus == "PASS" ? "通过" : "拒绝"}}</span>
</template>
</Table>
<div class="page-size">
<Page
:current="logParams.pageNumber"
:total="logData.total"
:page-size="logParams.pageSize"
@on-change="changePageLog"
size="small"
show-total
show-elevator
></Page>
</div>
</TabPane>
</Tabs>
</div>
<!-- 未开放 -->
<div v-if="status === 3">
<Alert type="error">
分销功能暂未开启
<template slot="desc">提交认证申请后工作人员将在三个工作日进行核对完成审核</template>
</Alert>
</div>
<div v-if="status === 0">
<Alert type="warning">分销商申请</Alert>
<Form ref="form" :model="applyForm" :rules="rules">
<FormItem label="姓名" prop="name">
<Input v-model="applyForm.name"></Input>
</FormItem>
<FormItem label="身份证号" prop="idNumber">
<Input v-model="applyForm.idNumber"></Input>
</FormItem>
<FormItem label="银行开户行" prop="settlementBankBranchName">
<Input v-model="applyForm.settlementBankBranchName"></Input>
</FormItem>
<FormItem label="银行开户名" prop="settlementBankAccountName">
<Input v-model="applyForm.settlementBankAccountName"></Input>
</FormItem>
<FormItem label="银行账号" prop="settlementBankAccountNum">
<Input v-model="applyForm.settlementBankAccountNum"></Input>
</FormItem>
<Modal v-model="withdrawApplyModal" width="530">
<p slot="header">
<Icon type="edit"></Icon>
<span>提现金额</span>
</p>
<div>
<Input
v-model="withdrawPrice"
size="large"
number
maxlength="9"
><span slot="append"></span></Input>
</div>
<div slot="footer" style="text-align: center">
<Button type="primary" size="large" @click="withdraw"></Button>
</div>
</Modal>
<Modal v-model="qrcodeShow" title="分销商品" width="800">
<Alert type="warning">
下载二维码或者复制链接分享商品
</Alert>
<div style="width:200px;height:200px;border:1px solid #eee;">
<vue-qr :text="qrcode" :callback="qrcodeData" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
<Button class="download-btn" type="success" @click="downloadQrcode"></Button>
</div>
<div class="mt_10">商品链接<Input style="width:400px" v-model="qrcode"></Input></div>
</Modal>
<FormItem>
<Button type="primary" :loading="applyLoading" @click="apply"
>提交申请</Button
>
</FormItem>
</Form>
</div>
<!-- 分销审核 -->
<div v-if="status === 1">
<Alert type="success">
您提交的信息正在审核
<template slot="desc"
>提交认证申请后工作人员将在三个工作日进行核对完成审核</template
>
</Alert>
</div>
<!-- 分销提现商品订单 -->
<div v-if="status === 2">
<div class="tips">
<p>分销下线付款之后会生成分销订单</p>
<p>
冻结金额用户提现金额即为冻结金额审核通过后扣除冻结金额审核拒绝之后冻结金额返回可提现金额
</p>
<p>可提现金额分销订单佣金T+1解冻后可变为可提现金额</p>
</div>
<div class="box">
<div class="mb_20 account-price">
<span class="subTips">可提现金额</span>
<span class="fontsize_48 global_color"
>{{ result.canRebate | unitPrice }}</span
>
<span class="subTips">冻结金额</span>
<span class="">{{ result.commissionFrozen | unitPrice }}</span>
<span class="subTips">返利总金额</span>
<span class="">{{ result.rebateTotal | unitPrice }}</span>
<Button
type="primary"
size="small"
class="ml_20"
@click="withdrawApplyModal = true"
>申请提现</Button
>
</div>
</div>
<Tabs :value="tabName" @on-click="tabPaneChange">
<TabPane label="已选商品" name="goodsChecked">
<Table stripe :columns="goodsColumns" :data="goodsData.records">
<template slot-scope="{ row }" slot="name">
<div
class="goods-msg"
@click="
linkTo(
`/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`
)
"
>
<img
style="vertical-align: top"
:src="row.thumbnail"
width="60"
height="60"
alt=""
/>&nbsp; {{ row.goodsName }}
</div>
</template>
<template slot-scope="{ row }" slot="price">
<span> {{ row.price | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="commission">
<span> {{ row.commission | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="action">
<Button
type="success"
size="small"
style="margin-right: 5px"
@click="fenxiao(row)"
>分销商品</Button
>
<Button
type="error"
size="small"
@click="selectGoods(row.id, false)"
>取消选择</Button
>
</template>
</Table>
<div class="page-size">
<Page
:current="params.pageNumber"
:total="goodsData.total"
:page-size="params.pageSize"
@on-change="changePage"
size="small"
show-total
show-elevator
></Page>
</div>
</TabPane>
<TabPane label="未选商品" name="goodsUncheck">
<Table stripe :columns="goodsColumns" :data="goodsData.records">
<template slot-scope="{ row }" slot="name">
<div
class="goods-msg"
@click="
linkTo(
`/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}`
)
"
>
<img
style="vertical-align: top"
:src="row.thumbnail"
width="60"
height="60"
alt=""
/>&nbsp; {{ row.goodsName }}
</div>
</template>
<template slot-scope="{ row }" slot="price">
<span> {{ row.price | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="commission">
<span> {{ row.commission | unitPrice }}</span>
</template>
<template slot-scope="{ row }" slot="action">
<Button
type="primary"
size="small"
style="margin-right: 5px"
@click="selectGoods(row.id, true)"
>选择商品</Button
>
</template>
</Table>
<div class="page-size">
<Page
:current="params.pageNumber"
:total="goodsData.total"
:page-size="params.pageSize"
@on-change="changePage"
size="small"
show-total
show-elevator
></Page>
</div>
</TabPane>
<TabPane label="提现记录" name="log">
<Table stripe :columns="logColumns" :data="logData.records">
<template slot-scope="{ row }" slot="sn">
<span>{{ row.sn }}</span>
</template>
<template slot-scope="{ row }" slot="time">
<span>{{ row.createTime }}</span>
</template>
<template slot-scope="{ row }" slot="price">
<span
v-if="row.distributionCashStatus == 'VIA_AUDITING'"
style="color: green"
>
+{{ row.price | unitPrice }}</span
>
<span v-else style="color: red">
-{{ row.price | unitPrice }}</span
>
</template>
<template slot-scope="{ row }" slot="status">
<span>
{{
row.distributionCashStatus == "APPLY"
? "待处理"
: row.distributionCashStatus == "VIA_AUDITING"
? "通过"
: "拒绝"
}}</span
>
</template>
</Table>
<div class="page-size">
<Page
:current="logParams.pageNumber"
:total="logData.total"
:page-size="logParams.pageSize"
@on-change="changePageLog"
size="small"
show-total
show-elevator
></Page>
</div>
</TabPane>
</Tabs>
</div>
<!-- 未开放 -->
<div v-if="status === 3">
<Alert type="error">
分销功能暂未开启
<template slot="desc"
>提交认证申请后工作人员将在三个工作日进行核对完成审核</template
>
</Alert>
</div>
<Modal v-model="withdrawApplyModal" width="530">
<p slot="header">
<Icon type="edit"></Icon>
<span>提现金额</span>
</p>
<div>
<Input v-model="withdrawPrice" size="large" number maxlength="9"
><span slot="append"></span></Input
>
</div>
<div slot="footer" style="text-align: center">
<Button type="primary" size="large" @click="withdraw"></Button>
</div>
</Modal>
<Modal v-model="qrcodeShow" title="分销商品" width="800">
<Alert type="warning"> 下载二维码或者复制链接分享商品 </Alert>
<div style="width: 200px; height: 200px; border: 1px solid #eee">
<vue-qr
:text="qrcode"
:callback="qrcodeData"
:margin="0"
colorDark="#000"
colorLight="#fff"
:size="200"
></vue-qr>
<Button class="download-btn" type="success" @click="downloadQrcode"
>下载二维码</Button
>
</div>
<div class="mt_10">
商品链接<Input style="width: 400px" v-model="qrcode"></Input>
</div>
</Modal>
</div>
</template>
<script>
import {distribution, applyDistribution, distCash, distCashHistory, getDistGoodsList, selectDistGoods} from '@/api/member.js'
import { IDCard } from '@/plugins/RegExp.js';
import {checkBankno} from '@/plugins/Foundation'
import vueQr from 'vue-qr';
import {
distribution,
applyDistribution,
distCash,
distCashHistory,
getDistGoodsList,
selectDistGoods,
} from "@/api/member.js";
import { IDCard } from "@/plugins/RegExp.js";
import { checkBankno } from "@/plugins/Foundation";
import vueQr from "vue-qr";
export default {
name: 'Distribution',
name: "Distribution",
components: { vueQr },
data () {
data() {
return {
status: 0, // 0 1 2 3
applyForm: {}, //
rules: { //
name: [{required: true, message: '请输入真实姓名'}],
rules: {
//
name: [{ required: true, message: "请输入真实姓名" }],
idNumber: [
{required: true, message: '请输入身份证号'},
{pattern: IDCard, message: '请输入正确的身份证号'}
{ required: true, message: "请输入身份证号" },
{ pattern: IDCard, message: "请输入正确的身份证号" },
],
settlementBankBranchName: [
{
@ -193,7 +296,6 @@ export default {
//
trigger: "blur",
},
],
settlementBankAccountName: [
{
@ -221,7 +323,7 @@ export default {
},
],
},
tabName: 'goodsChecked', // tab
tabName: "goodsChecked", // tab
result: {}, //
applyLoading: false, //
goodsLoading: false, //
@ -229,136 +331,155 @@ export default {
withdrawPrice: 0, //
goodsData: {}, //
logData: {}, //
goodsColumns: [ //
{title: '商品名称', slot: 'name', width: 400},
{title: '商品价格', slot: 'price'},
{title: '佣金', slot: 'commission'},
{title: '操作', slot: 'action', minWidth: 120}
goodsColumns: [
//
{ title: "商品名称", slot: "name", width: 400 },
{ title: "商品价格", slot: "price" },
{ title: "佣金", slot: "commission" },
{ title: "操作", slot: "action", minWidth: 120 },
],
logColumns: [ //
{title: '编号', slot: 'sn'},
{title: '申请时间', slot: 'time'},
{title: '提现金额', slot: 'price'},
{title: '提现状态', slot: 'status'}
logColumns: [
//
{ title: "编号", slot: "sn" },
{ title: "申请时间", slot: "time" },
{ title: "提现金额", slot: "price" },
{ title: "提现状态", slot: "status" },
],
params: { //
params: {
//
pageNumber: 1,
pageSize: 20,
checked: true
checked: true,
},
orderParams: { //
orderParams: {
//
pageNumber: 1,
pageSize: 20
pageSize: 20,
},
logParams: { //
logParams: {
//
pageNumber: 1,
pageSize: 20
pageSize: 20,
sort: "createTime",
order: "desc",
},
qrcode: '', //
qrcode: "", //
qrcodeShow: false, //
base64Img: '', // base64
goodsNameCurr: ''//
}
base64Img: "", // base64
goodsNameCurr: "", //
};
},
mounted () {
this.distribution()
mounted() {
this.distribution();
},
methods: {
apply () { //
this.$refs.form.validate(valid => {
apply() {
//
this.$refs.form.validate((valid) => {
if (valid) {
this.applyLoading = true
applyDistribution(this.form).then(res => {
this.applyLoading = false
this.applyLoading = true;
applyDistribution(this.form).then((res) => {
this.applyLoading = false;
if (res.success) {
this.$Message.success('申请已提交,请等待管理员审核')
this.$Message.success("申请已提交,请等待管理员审核");
this.status = 1;
}
})
});
}
})
});
},
withdraw () { //
distCash({price: this.withdrawPrice}).then(res => {
this.withdrawApplyModal = false
withdraw() {
//
distCash({ price: this.withdrawPrice }).then((res) => {
this.withdrawApplyModal = false;
this.price = 0;
if (res.success) {
this.$Message.success('申请已提交,请等待审核')
this.distribution()
this.getLog()
this.$Message.success("申请已提交,请等待审核");
this.distribution();
this.getLog();
} else {
this.$Message.error(res.message)
this.$Message.error(res.message);
}
})
});
},
qrcodeData (data64) { // base64
this.base64Img = data64
qrcodeData(data64) {
// base64
this.base64Img = data64;
},
downloadQrcode () { //
let a = document.createElement('a'); // a
let event = new MouseEvent('click'); //
a.download = this.goodsNameCurr || 'photo'
downloadQrcode() {
//
let a = document.createElement("a"); // a
let event = new MouseEvent("click"); //
a.download = this.goodsNameCurr || "photo";
a.href = this.base64Img; // URLa.href
a.dispatchEvent(event); // a
},
tabPaneChange (tab) { // tab
if (tab === 'goodsChecked') {
tabPaneChange(tab) {
// tab
if (tab === "goodsChecked") {
this.params.checked = true;
this.params.pageNUmber = 1
this.getGoodsData()
} else if (tab === 'goodsUncheck') {
this.params.checked = false
this.getGoodsData()
} else if (tab === 'log') {
this.logParams.pageNumber = 1
this.getLog()
this.params.pageNUmber = 1;
this.getGoodsData();
} else if (tab === "goodsUncheck") {
this.params.checked = false;
this.getGoodsData();
} else if (tab === "log") {
this.logParams.pageNumber = 1;
this.getLog();
}
},
changePage (val) { //
changePage(val) {
//
this.params.pageNumber = val;
this.getGoodsData()
this.getGoodsData();
},
changePageLog (val) { //
changePageLog(val) {
//
this.logParams.pageNumber = val;
this.getLog()
this.getLog();
},
selectGoods (id, checked) { //
selectGoods(id, checked) {
//
let params = {
distributionGoodsId: id,
checked: checked
}
selectDistGoods(params).then(res => {
checked: checked,
};
selectDistGoods(params).then((res) => {
if (res.success) {
this.$Message.success('操作成功!')
this.getGoodsData()
this.$Message.success("操作成功!");
this.getGoodsData();
}
})
});
},
fenxiao (row) { //
this.qrcode = `${location.origin}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`
this.goodsNameCurr = row.goodsName
fenxiao(row) {
//
this.qrcode = `${location.origin}/goodsDetail?skuId=${row.skuId}&goodsId=${row.goodsId}&distributionId=${this.result.id}`;
this.goodsNameCurr = row.goodsName;
this.qrcodeShow = true;
},
getGoodsData () { //
getDistGoodsList(this.params).then(res => {
if (res.success) this.goodsData = res.result
})
getGoodsData() {
//
getDistGoodsList(this.params).then((res) => {
if (res.success) this.goodsData = res.result;
});
},
getLog () { //
distCashHistory(this.logParams).then(res => {
if (res.success) this.logData = res.result
})
getLog() {
//
distCashHistory(this.logParams).then((res) => {
if (res.success) this.logData = res.result;
});
},
distribution () { //
distribution() {
//
distribution().then((res) => {
if (res.result) {
this.result = res.result;
let type = res.result.distributionStatus;
if (type === 'PASS') {
if (type === "PASS") {
this.status = 2;
this.getGoodsData()
} else if (type === 'RETREAT' || type === 'REFUSE') {
this.getGoodsData();
} else if (type === "RETREAT" || type === "REFUSE") {
this.status = 0;
} else {
this.status = 1;
@ -367,15 +488,15 @@ export default {
this.status = 3;
} else {
//
this.status = 0
this.status = 0;
}
});
}
}
}
},
},
};
</script>
<style scoped lang='scss'>
<style scoped lang="scss">
.box {
margin: 20px 0;
}
@ -392,11 +513,11 @@ export default {
.fontsize_48 {
font-size: 48px;
}
.goods-msg{
.goods-msg {
display: flex;
align-items: center;
padding: 3px;
&:hover{
&:hover {
color: $theme_color;
cursor: pointer;
}
@ -406,4 +527,17 @@ export default {
top: -200px;
left: 200px;
}
/depp/ .ivu-alert-message {
p {
margin: 4px 0;
}
}
.tips{
background:#f7f7f7;
padding: 16px;
border-radius: .4em;
>p{
margin: 6px 0;
}
}
</style>

View File

@ -99,6 +99,12 @@ export default {
width: 180,
sortable: false,
},
{
title: "解冻日期T+1",
key: "settleCycle",
width: 180,
sortable: false,
},
],
data: [], //
total: 0, //