You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
684 lines
25 KiB
684 lines
25 KiB
1 week ago
|
<template>
|
||
|
|
<div class="main-content12">
|
||
|
|
<div class="pageheader">
|
||
|
|
<div class="pageheader-title">
|
||
|
|
<h3>收款列表</h3>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="button-group">
|
||
|
|
<GuipButton :key="item.type" v-for="item in addablePays" :btnstyle="{ width: '150px', height: '33px' }" @click="showAddPaymentMethodDialog(item.type, item.type_desc)">添加{{ item.type_desc }}</GuipButton>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 支付宝 -->
|
||
|
|
<div class="register-wrap">
|
||
|
|
<div class="step3-wrap">
|
||
|
|
<div class="step3-top flex-common">
|
||
|
|
<h3 class="flex gap8">
|
||
|
|
<img src="@/assets/register/zhifubao.svg" alt="">
|
||
|
|
支付宝收款</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex-common table-wrap">
|
||
|
|
<el-form>
|
||
|
|
<GuipTable :border="true" :tableData="payList[3]" :loading="tableLoading">
|
||
|
|
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
|
||
|
|
<el-table-column prop="account" label="账号"></el-table-column>
|
||
|
|
<el-table-column prop="expires_time" label="有效期" min-width="30px"></el-table-column>
|
||
|
|
<el-table-column prop="is_auto_refund" fixed="right" label="授权平台退款" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
|
||
|
|
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
|
||
|
|
<!-- 传入的modelvalue 为数字 0 或者 1 -->
|
||
|
|
<GuipSwitch :modelValue="scope.row.is_auto_refund" active-value="1" inactive-value="0" @change="updateAutoRefund(scope.row)"></GuipSwitch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
|
||
|
|
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
|
||
|
|
<!-- 传入的modelvalue 为数字 0 或者 1 -->
|
||
|
|
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" fixed="right" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
<el-button @click="handleClick(scope.row)" type="text">设置</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</GuipTable>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 微信 -->
|
||
|
|
<div class="register-wrap">
|
||
|
|
<div class="step3-wrap">
|
||
|
|
<div class="step3-top flex-common">
|
||
|
|
<h3 class="flex gap8">
|
||
|
|
<img src="@/assets/register/weixin.svg" alt="">
|
||
|
|
微信收款</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex-common table-wrap">
|
||
|
|
<el-form>
|
||
|
|
<GuipTable :border="true" :tableData="payList[2]" :loading="tableLoading">
|
||
|
|
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
|
||
|
|
<el-table-column prop="account" label="账号"></el-table-column>
|
||
|
|
<el-table-column prop="expires_time" label="有效期" min-width="30px"></el-table-column>
|
||
|
|
<el-table-column prop="is_auto_refund" fixed="right" label="授权平台退款" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
|
||
|
|
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
|
||
|
|
<!-- 传入的modelvalue 为数字 0 或者 1 -->
|
||
|
|
<GuipSwitch :modelValue="scope.row.is_auto_refund" active-value="1" inactive-value="0" @change="updateAutoRefund(scope.row)"></GuipSwitch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
|
||
|
|
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
|
||
|
|
<!-- 传入的modelvalue 为数字 0 或者 1 -->
|
||
|
|
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" fixed="right" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
<el-button @click="handleClick(scope.row)" type="text">设置</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</GuipTable>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 淘宝 -->
|
||
|
|
<div class="register-wrap">
|
||
|
|
<div class="step3-wrap">
|
||
|
|
<div class="step3-top flex-common">
|
||
|
|
<h3 class="flex gap8">
|
||
|
|
<img src="@/assets/register/taobao.svg" alt="">
|
||
|
|
淘宝/天猫店铺</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex-common table-wrap">
|
||
|
|
<el-form>
|
||
|
|
<GuipTable :border="true" :tableData="payList[0]" :loading="tableLoading">
|
||
|
|
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
|
||
|
|
<el-table-column prop="account" label="账号"></el-table-column>
|
||
|
|
<el-table-column prop="expires_time" label="有效期" min-width="50px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.is_expired==true" class="red">授权过期</span>
|
||
|
|
<span v-else>{{ scope.row.expires_time }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
|
||
|
|
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
|
||
|
|
<!-- 传入的modelvalue 为数字 0 或者 1 -->
|
||
|
|
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" fixed="right" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
<el-button @click="handleClick(scope.row)" type="text">设置</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</GuipTable>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- 拼多多 -->
|
||
|
|
<div class="register-wrap">
|
||
|
|
<div class="step3-wrap">
|
||
|
|
<div class="step3-top flex-common">
|
||
|
|
<h3 class="flex gap8">
|
||
|
|
<img src="@/assets/register/pinduoduo.svg" alt="">
|
||
|
|
拼多多店铺</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex-common table-wrap">
|
||
|
|
<el-form>
|
||
|
|
<GuipTable :border="true" :tableData="payList[11]" :loading="tableLoading">
|
||
|
|
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
|
||
|
|
<el-table-column prop="account" label="账号"></el-table-column>
|
||
|
|
<el-table-column prop="expires_time" label="有效期" min-width="50px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.is_expired==true" class="red">授权过期</span>
|
||
|
|
<span v-else>{{ scope.row.expires_time }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
|
||
|
|
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
|
||
|
|
<!-- 传入的modelvalue 为数字 0 或者 1 -->
|
||
|
|
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" fixed="right" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
<el-button @click="handleClick(scope.row)" type="text">设置</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</GuipTable>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 京东 -->
|
||
|
|
<div class="register-wrap">
|
||
|
|
<div class="step3-wrap">
|
||
|
|
<div class="step3-top flex-common">
|
||
|
|
<h3 class="flex gap8">
|
||
|
|
<img src="@/assets/register/jingdong.svg" alt="">
|
||
|
|
京东店铺</h3>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex-common table-wrap">
|
||
|
|
<el-form>
|
||
|
|
<GuipTable :border="true" :tableData="payList[4]" :loading="tableLoading">
|
||
|
|
<el-table-column prop="short_name" fixed="left" label="公司简称"></el-table-column>
|
||
|
|
<el-table-column prop="account" label="账号"></el-table-column>
|
||
|
|
<el-table-column prop="expires_time" label="有效期" min-width="50px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<span v-if="scope.row.is_expired==true" class="red">授权过期</span>
|
||
|
|
<span v-else>{{ scope.row.expires_time }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="status" fixed="right" label="启用状态" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<!-- :active-value="1" :inactive-value="0"（关闭） 加冒号表示数字格式 -->
|
||
|
|
<!-- active-value="1" inactive-value="0"（关闭） 不加冒号表示字符串 -->
|
||
|
|
<!-- 传入的modelvalue 为数字 0 或者 1 -->
|
||
|
|
<GuipSwitch :modelValue="scope.row.status" active-value="1" inactive-value="0" @change="updatePayStatus(scope.row)"></GuipSwitch>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" fixed="right" min-width="30px">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div class="flex">
|
||
|
|
<el-button @click="handleClick(scope.row)" type="text">设置</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</GuipTable>
|
||
|
|
</el-form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<GuipDialog :dialogVisible="addPayDialogVisible" :title="addPayTitle" :show-close-button="false"
|
||
|
|
:show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
|
||
|
|
@close="handleClose" @dialogVisibleChange="dialogVisibleChange">
|
||
|
|
<!-- 自定义内容 -->
|
||
|
|
<div>
|
||
|
|
<div class="beforeNotice" v-if="addPayType==0">
|
||
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
|
||
|
|
<p class="mt12 flex">
|
||
|
|
请确保使用要添加的淘宝主账号登录并授权
|
||
|
|
</p>
|
||
|
|
<p class="mt10 flex">
|
||
|
|
如未购买＂快乐帮手＂服务或已过期，会跳转到购买服务页面
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="beforeNotice" v-else-if="addPayType==2">
|
||
|
|
<h4 class="flex"> <img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 前期准备事项</h4>
|
||
|
|
<p class="">1.申请公司微信支付。<img src="@/assets/site/form_qua_ic.svg" alt=""> 指南 </p>
|
||
|
|
<p class="mt12 flex">
|
||
|
|
<a href="https://pay.weixin.qq.com/"
|
||
|
|
class="flex" target="_blank">
|
||
|
|
<img src="@/assets/site/form_linkActive.svg" alt="">前往微信商户平台</a>
|
||
|
|
</p>
|
||
|
|
<p class="mt10 flex">
|
||
|
|
登录微信商户平台，在产品中心开通Native支付，如需使用微信版，开通JSAPI支付。
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<p>这是一个自定义内容的弹框。</p>
|
||
|
|
</div>
|
||
|
|
</GuipDialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import GuipButton from '@/components/GuipButton.vue';
|
||
|
|
// import GuipFormItem from '@/components/GuipFormItem.vue';
|
||
|
|
// import GuipInput from '@/components/GuipInput.vue';
|
||
|
|
// import GuipRadio from '@/components/GuipRadio.vue';
|
||
|
|
// import GuipSelect from '@/components/GuipSelect.vue';
|
||
|
|
import GuipSwitch from '@/components/GuipSwitch.vue';
|
||
|
|
import GuipDialog from '@/components/GuipDialog.vue';
|
||
|
|
// import PaymentMethod from '@/components/paymentMethod.vue';
|
||
|
|
// import DomainModal from '@/components/domainModal.vue';
|
||
|
|
// import CustomDropdown from '@/components/CustomDropdown.vue';
|
||
|
|
// import SvgIcon from '@/components/SvgIcon.vue';
|
||
|
|
import GuipTable from '@/components/GuipTable.vue';
|
||
|
|
// import GuipToolTip from '@/components/GuipToolTip.vue';
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
GuipButton,
|
||
|
|
// GuipFormItem,
|
||
|
|
// GuipInput,
|
||
|
|
// GuipRadio,
|
||
|
|
// GuipSelect,
|
||
|
|
// SvgIcon,
|
||
|
|
GuipSwitch,
|
||
|
|
GuipDialog,
|
||
|
|
// PaymentMethod,
|
||
|
|
// DomainModal,
|
||
|
|
// CustomDropdown,
|
||
|
|
GuipTable,
|
||
|
|
// GuipToolTip
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
// AUTH
|
||
|
|
token: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTAwNTM3MjQsIm5iZiI6MTc1MDA1MzcyNCwiZXhwIjoxNzUyNjQ1NzI0LCJ1c2VyIjoic3VidXNlciIsImxvZ2luX3R5cGUiOjAsImFpZCI6IjEifQ.xyIqBLelB-k6jCifgRevBJTyg_Qrm6m1e4OcHhOpepU',
|
||
|
|
addablePays: [],
|
||
|
|
payList: [],
|
||
|
|
tableLoading: false,
|
||
|
|
addPayDialogVisible: false,
|
||
|
|
showCancelButton: true, // 控制是否显示取消按钮
|
||
|
|
showCloseButton: true, // 控制是否显示关闭按钮
|
||
|
|
addPayTitle: '',
|
||
|
|
addPayType: '',
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.getAddablePays()
|
||
|
|
this.getPayList()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 获取可添加的收款方式
|
||
|
|
getAddablePays() {
|
||
|
|
this.$http('POST', '/agentnew/ajax_get_addable_pays', {
|
||
|
|
gid: this.gid,
|
||
|
|
},{
|
||
|
|
headers:{
|
||
|
|
'Auth': this.token
|
||
|
|
}
|
||
|
|
}).then(response => {
|
||
|
|
this.tableLoading = false
|
||
|
|
this.$nextTick(() => {
|
||
|
|
this.addablePays = response.data
|
||
|
|
console.log(this.addablePays)
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取支付列表
|
||
|
|
getPayList() {
|
||
|
|
this.tableLoading = true
|
||
|
|
const that = this
|
||
|
|
that.payList = []
|
||
|
|
this.$http('POST', '/agentnew/ajax_get_pay_list', {
|
||
|
|
gid: this.gid,
|
||
|
|
},{
|
||
|
|
headers:{
|
||
|
|
'Auth': this.token
|
||
|
|
}
|
||
|
|
}).then(response => {
|
||
|
|
this.tableLoading = false
|
||
|
|
this.$nextTick(() => {
|
||
|
|
that.payList = response.data.paylist
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
updatePayStatus(row) {
|
||
|
|
this.$http('POST', '/agentnew/ajax_update_pay_status', {
|
||
|
|
payid: row.payid,
|
||
|
|
status: row.status==1 ? 0 : 1,
|
||
|
|
}, {
|
||
|
|
headers: {
|
||
|
|
'Auth': this.token
|
||
|
|
}
|
||
|
|
}).then(response => {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
if (response.status) {
|
||
|
|
this.$Message.success(response.info);
|
||
|
|
} else {
|
||
|
|
this.$Message.error(response.info);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
updateAutoRefund(row) {
|
||
|
|
this.$http('POST', '/agentnew/ajax_setting_auto_refund', {
|
||
|
|
payid: row.payid,
|
||
|
|
status: row.status==1 ? 0 : 1,
|
||
|
|
}, {
|
||
|
|
headers: {
|
||
|
|
'Auth': this.token
|
||
|
|
}
|
||
|
|
}).then(response => {
|
||
|
|
this.$nextTick(() => {
|
||
|
|
if (response.status) {
|
||
|
|
this.$Message.success(response.info);
|
||
|
|
} else {
|
||
|
|
this.$Message.error(response.info);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}).catch(error => {
|
||
|
|
console.error(error, 'error')
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
// 弹框相关方法---start
|
||
|
|
showAddPaymentMethodDialog(type, type_desc) {
|
||
|
|
console.log(type, 'type');
|
||
|
|
this.addPayDialogVisible = true;
|
||
|
|
this.addPayTitle = '添加' + type_desc;
|
||
|
|
this.addPayType = type;
|
||
|
|
},
|
||
|
|
// 确认按钮事件
|
||
|
|
handleConfirm() {
|
||
|
|
this.$message.success('点击了确认按钮');
|
||
|
|
this.addPayDialogVisible = false;
|
||
|
|
},
|
||
|
|
// 取消按钮事件
|
||
|
|
handleCancel() {
|
||
|
|
this.$message.warning('点击了取消按钮');
|
||
|
|
this.addPayDialogVisible = false;
|
||
|
|
},
|
||
|
|
// 关闭弹框事件
|
||
|
|
handleClose() {
|
||
|
|
this.$message.info('弹框已关闭');
|
||
|
|
this.addPayDialogVisible = false;
|
||
|
|
},
|
||
|
|
dialogVisibleChange(data) {
|
||
|
|
console.log(data, 'data098908090');
|
||
|
|
},
|
||
|
|
// 弹框相关方法---end
|
||
|
|
},
|
||
|
|
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.pageheader {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pageheader-title {
|
||
|
|
flex: 1;
|
||
|
|
min-width: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pageheader-title h3 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: bold;
|
||
|
|
line-height: normal;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: #1E2226;
|
||
|
|
margin-top:8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.button-group {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 3px;
|
||
|
|
}
|
||
|
|
.red {
|
||
|
|
color:#FF4D4F !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table {
|
||
|
|
min-height: auto !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.beforeNotice {
|
||
|
|
|
||
|
|
h4 {
|
||
|
|
margin: 0;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
margin-bottom: 18px;
|
||
|
|
text-align: left;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 20px 14px;
|
||
|
|
border-radius: 4px;
|
||
|
|
/* middle/middle_blue_1 */
|
||
|
|
background: #F2F7FF;
|
||
|
|
/* middle/middle_blue_3 */
|
||
|
|
border: 1px solid #BFDAFF;
|
||
|
|
|
||
|
|
div {
|
||
|
|
margin-top: 2px;
|
||
|
|
padding-left: 23px;
|
||
|
|
|
||
|
|
p {
|
||
|
|
color: #8A9099;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
p {
|
||
|
|
color: #1E2226;
|
||
|
|
|
||
|
|
i {
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
display: flex;
|
||
|
|
align-items: stretch;
|
||
|
|
|
||
|
|
b {
|
||
|
|
font-weight: normal;
|
||
|
|
color: #8A9099;
|
||
|
|
display: inline-flex;
|
||
|
|
|
||
|
|
img {
|
||
|
|
margin-left: 4px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
text-decoration: none;
|
||
|
|
color: #006AFF;
|
||
|
|
margin-right: 10px;
|
||
|
|
|
||
|
|
img {
|
||
|
|
margin-left: 12px;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
::v-deep .custom-popover {
|
||
|
|
position: fixed !important;
|
||
|
|
// max-height: 290px;
|
||
|
|
// overflow-y: auto;
|
||
|
|
margin-top: 0 !important;
|
||
|
|
margin-left: 0 !important;
|
||
|
|
transform: none !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.register-wrap {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.custom-icon {
|
||
|
|
width: 24px;
|
||
|
|
height: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.register-top {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
// height: 72px;
|
||
|
|
align-items: center;
|
||
|
|
padding: 20px 40px 20px 110px;
|
||
|
|
background: linear-gradient(270deg, #F6EEF7 3%, #EDE9FB 97%);
|
||
|
|
color: #23242B;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
line-height: 32px;
|
||
|
|
|
||
|
|
.register-top-left {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.register-top-left img {
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.step3-wrap {
|
||
|
|
flex: 1;
|
||
|
|
|
||
|
|
.step3-top {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding-bottom: 0;
|
||
|
|
align-items: end;
|
||
|
|
h3{
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.table-wrap {
|
||
|
|
span {
|
||
|
|
color: #1E2226;
|
||
|
|
}
|
||
|
|
|
||
|
|
.edit_icon {
|
||
|
|
display: none;
|
||
|
|
transition: all .3s;
|
||
|
|
margin-left: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-table__row:hover {
|
||
|
|
.edit_icon {
|
||
|
|
display: block;
|
||
|
|
transition: all .3s;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.green,
|
||
|
|
.blue {
|
||
|
|
width: 80px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
color: #0DAF49 !important;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
/* 基本 */
|
||
|
|
width: 80px;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: rgba(239, 255, 224, 0.5);
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: 1px solid rgba(0, 194, 97, 0.6);
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.blue {
|
||
|
|
background: #F2F7FF;
|
||
|
|
border: 1px solid #BFDAFF;
|
||
|
|
color: #006AFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.step-wrap {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 24px 0 0 0;
|
||
|
|
|
||
|
|
.step-item {
|
||
|
|
align-items: center;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
span {
|
||
|
|
color: #1E2226;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.custom-icon {
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.checked span {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #006AFF !important;
|
||
|
|
transition: all .3s;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.success span {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: normal;
|
||
|
|
color: #006AFF !important;
|
||
|
|
transition: all .3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-line {
|
||
|
|
flex: 1;
|
||
|
|
margin: 0 32px;
|
||
|
|
border-bottom: 1px solid #DFE2E6;
|
||
|
|
}
|
||
|
|
|
||
|
|
.step_active-line {
|
||
|
|
transition: all .3s;
|
||
|
|
border-bottom: 1px solid #006AFF;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.step-desc {
|
||
|
|
padding-top: 6px;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding-bottom: 24px;
|
||
|
|
color: #8A9099;
|
||
|
|
|
||
|
|
span {
|
||
|
|
padding-left: 36px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|