Skip to content

S
shop-new
提交 3969dba8 authored 作者: 郑伟娜's avatar 郑伟娜
浏览文件
操作

新增保证金页面

上级 fd78f9c8
显示空白字符变更
内嵌 并排
正在显示 包含 489 行增加 和 12 行删除
src/api/securityFund.js 0 → 100644
浏览文件 @ 3969dba8
import request from '@/utils/request'
// 获取店铺信息
export const shopInfo = () => {
return request({
url: '/local/getShopInfo',
method: 'get'
})
}
\ No newline at end of file
src/views/system/asset/securityFund.vue
浏览文件 @ 3969dba8
<template> <template>
<div class="app-container securityFund"> <div class="securityFund">
<el-card class="box-card"> <el-card class="box-card">
<div class="header"> <div class="header">
<i class="el-icon-warning" style="color: #F1914E; "></i> <i class="el-icon-warning" style="color: #F1914E; "></i>
这里展示您保证金的交保、退保、补缴、扣除等记录，保证金并不是向云仓付费，而是作为专项资产在您的账户中。保证金余额不支持直接提现，当退出相应服务后可申请退还保证金！ 这里展示您保证金的交保、退保、补缴、扣除等记录，保证金并不是向云仓付费，而是作为专项资产在您的账户中。保证金余额不支持直接提现，当退出相应服务后可申请退还保证金！
</div> </div>
<div class="securityFund-title"> <div class="securityFund-title">
<i style="display: inline-block; width: 3px; height: 15px; background: #3AA0FF; margin-right: 5px;"></i> <i class="title-icon"></i>
保证金 保证金
</div> </div>
<div class="securityFund-content"> <div class="securityFund-content">
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;" v-if="isPay">
<span><i class="el-icon-success" style="color: #67c23a; font-size: 26px;"></i></span> <span><i class="el-icon-success" style="color: #67c23a; font-size: 26px;"></i></span>
<span style="margin: 0 20px 0 5px;">已缴纳保证金</span> <span style="margin: 0 20px 0 5px;">已缴纳保证金</span>
<span>合约期内保证金不能提现，合作到期后双方如终止合作则退还保证金。</span> <span>合约期内保证金不能提现，合作到期后双方如终止合作则退还保证金。</span>
</div> </div>
<div style="display: flex; align-items: center;" v-if="!isPay">
<span><i class="el-icon-error" style="color: red; font-size: 26px;"></i></span>
<span style="margin: 0 20px 0 5px;">未缴纳保证金</span>
<span>根据您的商品所在类目，需缴纳【5000.00元】保证金，您还未缴纳！保证金用于您的信用保障和消费者的权益保护，如果您有违约责任，平台将根据规定扣除您一定比例的保证金。</span>
</div>
<div style="display: flex; justify-content: space-between; margin-top: 50px;"> <div style="display: flex; justify-content: space-between; margin-top: 50px;">
<div style="width: 48%; text-align: center; border-right: 2px solid #E8E7E7;"> <div style="width: 33%; text-align: center; border-right: 2px solid #E8E7E7;">
<div>保证金金额</div> <div>保证金金额</div>
<div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥5000.00</div> <div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥5000.00</div>
</div> </div>
<div style="width: 48%; text-align: center; display: flex; justify-content: center; align-items: flex-end;"> <div style="width: 33%; text-align: center; border-right: 2px solid #E8E7E7;">
<div>冻结金额</div>
<div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥5000.00</div>
</div>
<div style="width: 33%; text-align: center; display: flex; justify-content: center; align-items: flex-end;">
<div> <div>
<div>初始应缴</div> <div>初始应缴</div>
<div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥5000.00</div> <div style="font-size: 30px; color: #3AA0FF; margin-top: 20px;">￥5000.00</div>
</div> </div>
<div style="padding: 6px 0 6px 10px;">【保证金额度说明】</div> <div style="padding: 6px 0 6px 10px; cursor: pointer;" class="desc" @click="limitDialog = true">【保证金额度说明】</div>
<div style="padding: 6px 0;">【保证金额度说明】</div> <div style="padding: 6px 0; cursor: pointer;" class="desc" @click="ruleDialog = true">【保证金扣减说明】</div>
</div>
</div>
<div style="text-align: center; margin-top: 50px; width: 100%;">
<el-button type="primary" size="mini" style="width: 80px;" @click="payDialog = true">充值</el-button>
<el-button size="mini" style="width: 80px;" @click="cancellationDialog = true">申请退保</el-button>
</div>
</div>
<div class="flowList">
<div>
<div class="flow-title">交易流水</div>
</div> </div>
<el-table
:data="tableData"
tooltip-effect="dark"
style="width: 100%; margin-top: 10px;"
>
<el-table-column
align="center"
label="流水单号"
>
<template slot-scope="scope">
{{scope.row.receipt_media}}
</template>
</el-table-column>
<el-table-column
align="center"
label="完成时间"
>
<template slot-scope="scope">
{{scope.row.month}}
</template>
</el-table-column>
<el-table-column
align="center"
label="变动类型"
>
<template slot-scope="scope">
<div>
{{scope.row.created_time}}
</div> </div>
<div style="text-align: center; margin-top: 50px; width: 96%;"> </template>
<el-button type="primary" size="mini" style="width: 80px;">充值</el-button> </el-table-column>
<el-button size="mini" style="width: 80px;">申请退保</el-button> <el-table-column
align="center"
prop="company_name"
label="变动金额"
>
</el-table-column>
<el-table-column
align="center"
prop="duty_paragraph"
label="变动说明"
>
</el-table-column>
</el-table>
<div class="footer_pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[20, 40, 60, 80, 100]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</div> </div>
</div> </div>
</el-card> </el-card>
<!-- 充值弹框 -->
<el-dialog
title="缴纳保证金"
:visible.sync="payDialog"
:destroy-on-close="true"
width="35%"
center
:close-on-click-modal="false"
append-to-body
>
<div>
<div class="header" style="text-align: center; font-size: 12px; line-height: 20px;">
根据您的商品所在类目，需缴纳5000.00元保证金，【不支持个人转账】
</div>
<el-form ref="payForm" :model="payForm" label-width="110px" style="margin-top: 20px;">
<el-form-item label="应缴纳额度：">
<el-input v-model="payForm.name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="缴纳方式：">
<el-radio v-model="payRadio" label="1">线下转账</el-radio>
<el-radio v-model="payRadio" label="2">支付宝</el-radio>
</el-form-item>
<div v-if="payRadio == 1">
<el-form-item label="开户名称：">
<el-input v-model="payForm.name" placeholder="北京胜天半子科技有限公司" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="开户银行：">
<el-input v-model="payForm.name" placeholder="招商银行北京分行丰台科技园支行" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="银行账号：">
<el-input v-model="payForm.name" placeholder="110945259110901" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="汇款凭证：">
<el-upload
class="avatar-uploader"
action=""
list-type="picture-card"
:http-request="uploadLogo"
:before-upload="beforeUpLogo"
:file-list="ruleFormdialogLogo"
:limit="2"
:on-exceed="limitCount1"
:before-remove="beforeRemoveLogo"
:on-remove="removeLogo"
:on-preview="handleMainImgLogo"
>
<i class="el-icon-plus"></i>
</el-upload>
<span>最多上传2张，支持png/jpg，大小不超过500KB</span>
</el-form-item>
<el-form-item label="汇款公户名称：">
<el-input v-model="payForm.name" placeholder=" 请输入您汇款的账户名称"></el-input>
</el-form-item>
</div>
<div v-if="payRadio == 2">
<el-form-item label="">
<div style="background: rgba(58, 160, 255, .05); padding: 20px;">
<div>温馨提示：</div>
<div>不支持信用卡方式充值</div>
</div>
</el-form-item>
</div>
</el-form>
<div style="text-align: right;">
<el-button type="primary" @click="onSubmit" v-if="payRadio == 1">提交</el-button>
<el-button type="primary" @click="onSubmit" v-if="payRadio == 2">立即付款</el-button>
</div>
</div>
</el-dialog>
<!-- 申请退保 -->
<el-dialog
title="申请退保"
:visible.sync="cancellationDialog"
:destroy-on-close="true"
width="38%"
center
:close-on-click-modal="false"
append-to-body
@close="isSubmit = false"
>
<div v-if="!isSubmit">
<div class="header" style="text-align: center; font-size: 12px; line-height: 20px;">
<div>合约期内保证金不能提现，合作到期后双方如终止合作则退还保证金。</div>
<div>如果您意向停止合作，可在线提交申请，退保后双方自动解约，您的店铺将被关闭，商品将被下架，请知悉！</div>
</div>
<el-form ref="cancellationForm" :model="cancellationForm" label-width="110px" style="margin-top: 20px;">
<el-form-item label="退保金额：">
<el-input v-model="cancellationForm.name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="退保至：">
<el-select v-model="cancellationForm.account" placeholder="请选择退保的账户" style="width: 100%;">
<el-option :label="item.label" :value="item.value" v-for="item in option" :key="item.value"/>
</el-select>
<div style="font-size: 12px; color: #FF4D4F;">选择您的提现账户，如果没有请在【资产】页面当中添加</div>
</el-form-item>
<el-form-item label="短信验证码：">
<el-input v-model="cancellationForm.name" style="width: 70%;" placeholder="请输入手机158****2563的验证码"></el-input>
<el-button @click="getCode">获取短信验证码</el-button>
</el-form-item>
</el-form>
<div style="text-align: right;">
<el-button type="primary" @click="submitCancellation">提交</el-button>
</div>
</div>
<!-- 提交成功提示 -->
<div style="text-align: center;" v-if="isSubmit">
<div><i class="el-icon-success" style="color: #67c23a; font-size: 34px;"></i></div>
<div style="margin: 10px 0 30px;">审请已提交，工作人员将与您联系，请注意来电</div>
<div style="background: rgba(58, 160, 255, .05); padding: 20px; line-height: 30px;">
<div>感谢您使用云仓！</div>
<div>您的退保申请已提交，工作人员将与您取得联系核实情况，大约需要1-3个工作日，请您耐心等待。</div>
<div>在此过程中请确保您的全部订单已发货、无售后订单、账户余额已全部提现！</div>
<div>如果您有其它的问题，可以拔打我们的服务电话与我们联系！</div>
<div>服务电话：<span style="color: #3AA0FF;">4000-188-199</span></div>
</div>
</div>
</el-dialog>
<!-- 保证金扣款说明 -->
<el-dialog
style="margin-top: 200px;"
title="扣减规则"
:visible.sync="ruleDialog"
:destroy-on-close="true"
width="35%"
center
:close-on-click-modal="false"
append-to-body
>
<div>
<div style="background: rgba(58, 160, 255, .05); padding: 20px; line-height: 24px;">
<div>1、订单延迟发货，延迟0-24小时不作处罚，延迟24-72小时，扣除该订单金额的10%作为处罚，超过72小时扣除50%作为处罚</div>
</div>
</div>
</el-dialog>
<!-- 保证金额度说明 -->
<el-dialog
style="margin-top: 200px;"
title="各类目保证金收取标准"
:visible.sync="limitDialog"
:destroy-on-close="true"
width="70%"
center
:close-on-click-modal="false"
append-to-body
>
<div>
<el-table
:data="tableData"
tooltip-effect="dark"
style="width: 100%; margin-top: 10px;"
>
<el-table-column
align="center"
label="序号"
width="55">
<template slot-scope="scope">
{{scope.$index + 1}}
</template>
</el-table-column>
<el-table-column
align="center"
label="一级类目"
>
<template slot-scope="scope">
{{scope.row.receipt_media}}
</template>
</el-table-column>
<el-table-column
align="center"
label="保证金额度（元）"
>
<template slot-scope="scope">
{{scope.row.month}}
</template>
</el-table-column>
<el-table-column
align="center"
label="额度说明"
>
<template slot-scope="scope">
<div>
{{scope.row.created_time}}
</div>
</template>
</el-table-column>
</el-table>
<div style="text-align: right; margin-top: 20px;">
<el-button type="primary" @click="limitDialog = false">确定</el-button>
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogVisibleLogo" class="dialog-img-spe">
<img width="100%" :src="dialogImageLogo" alt=""/>
</el-dialog>
</div> </div>
</template> </template>
<script>
import { upLoadImg } from '@/api/module/entry';
export default {
data() {
return {
payRadio: '1',
isPay: true,
isSubmit: false,
cancellationDialog: false,
ruleDialog: false,
limitDialog: false,
payDialog: false,
payForm: {},
cancellationForm: {},
currentPage: 1,
pageSize: 20,
total: 0,
tableData: [
{company_name: 11},
{company_name: 11},
{company_name: 11},
],
ruleFormdialogLogo: [], // 汇款凭证
dialogVisibleLogo: false,
dialogImageLogo: '',
option: [
{label: '工商银行', value: '1'}
]
}
},
methods: {
// 提交凭证
onSubmit() {
this.payDialog = false
},
// 获取短信验证码
getCode() {
},
// 申请退保
submitCancellation() {
this.isSubmit = true
},
// 商品主图 数量限制
limitCount1(files, fileList) {
this.$message({message: '最多上传2张图片', type: 'warning'});
},
// 顶部logo 大小格式样式校验
beforeUpLogo(file, fileList) {
if (file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
this.$message({
message: '上传图片格式只支持png/png格式',
type: "warning"
});
return false;
}
let isImgSize = (file.size / 1024 / 1024) > 2;
if (isImgSize) {
this.$message({
message: '上传图片大小不能超过2MB',
type: "warning"
});
return false;
}
// 图片宽高尺寸限制
// return new Promise(function (resolve, reject) {
// let _URL = window.URL || window.webkitURL;
// let img = new Image();
// img.onload = function () {
// // 图片是否是正方形 宽高比为 1
// let valid = img.width <= 108 && img.height <= 108;
// valid ? resolve() : reject();
// }
// img.src = _URL.createObjectURL(file);
// }).then(() => {
// return file;
// }, () => {
// this.$message({
// message: '界面logo最大尺寸为108*108像素，请重新选择!',
// type: 'warning'
// });
// return Promise.reject();
// });
},
getBase64(file) {
return new Promise(function (resolve, reject) {
let reader = new FileReader();
let imgResult = "";
reader.readAsDataURL(file);
reader.onload = function () {
imgResult = reader.result;
};
reader.onerror = function (error) {
reject(error);
};
reader.onloadend = function () {
resolve(imgResult);
};
});
},
// 上传顶部logo
uploadLogo(param) {
this.getBase64(param.file).then((res) => {
let result = res.split(",");
this.Base64img = result[1];
let data = {"image": this.Base64img}
upLoadImg(data).then(res => {
if (res && res.code == 1) {
this.ruleFormdialogLogo.push({'url': res.data.imageUrl})
this.$message({message: '上传成功', type: 'success'});
} else {
this.ruleFormdialogLogo = [];
this.$message({message: '上传失败，请重新上传', type: 'error'});
}
})
});
},
// 顶部logo 删除移除前
beforeRemoveLogo(file, fileList) {
if (file.status === "success") {
return new Promise((res, rej) => {
this.$confirm(`是否删除此图片`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return res();
}).catch(() => {
this.$message({
type: 'success',
message: '取消删除!'
});
return rej();
});
});
}
},
// 顶部logo删除
removeLogo(file) {
if (file.status === "success") {
for (let i = 0; i < this.ruleFormdialogLogo.length; i++) {
if (file.uid === this.ruleFormdialogLogo[i].uid) {
this.ruleFormdialogLogo.splice(i, 1);
}
}
this.$message({
type: 'success',
message: '删除成功!'
});
}
},
// 顶部logo 预览
handleMainImgLogo(file) {
this.dialogImageLogo = file.url;
this.dialogVisibleLogo = true;
},
handleSizeChange(val) {
this.pageSize = val
},
handleCurrentChange(val) {
this.currentPage = val
}
}
}
</script>
<style scoped> <style scoped>
.securityFund .header { .securityFund {
height: 100%;
overflow-y: auto;
}
.securityFund .box-card {
margin: 20px;
}
.header {
border: 1px solid #F1914E; border: 1px solid #F1914E;
background: #FFF5ED; background: #FFF5ED;
padding: 15px; padding: 10px;
font-size: 14px; font-size: 14px;
margin: 10px auto; margin: 10px auto;
} }
...@@ -56,6 +496,13 @@ ...@@ -56,6 +496,13 @@
padding-bottom: 10px; padding-bottom: 10px;
margin-top: 40px; margin-top: 40px;
} }
.title-icon {
display: inline-block;
width: 3px;
height: 15px;
background: #3AA0FF;
margin-right: 5px;
}
.securityFund-content { .securityFund-content {
background: #F8FBFD; background: #F8FBFD;
height: 300px; height: 300px;
...@@ -65,4 +512,25 @@ ...@@ -65,4 +512,25 @@
padding: 30px; padding: 30px;
margin-top: 30px; margin-top: 30px;
} }
.flowList {
margin-top: 20px;
}
.flow-title {
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
background: #3AA0FF;
border-radius: 2px;
display: inline-block;
color: #fff;
font-size: 14px;
}
.footer_pagination {
text-align: center;
margin-top: 20px;
}
.desc:hover {
color: #3AA0FF;
}
</style> </style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论