<template>
<div>
<div class="order-tab">
<div class="order-tab-wrapper clearfix">
<nuxt-link class="fl tab" to="/mobile/center/vendor/btobapCheck" tag="div" >
B2B
</nuxt-link>
<div class="fl active tab">商城</div>
</div>
</div>
<div class="mobile-pay-center vendor-pay mobile-fix-content mobile-centerfix-content" :class="{'vendor-pay-record': switchType === 'record' && recordList.length}" id="mobileFixContent">
<!--<div class="mp-head" v-if="!fromUserPage">-->
<!--<span class="inline-block" :class="{'active': switchType === 'record'}" @click="setSwitchType('record')">交易记录</span>-->
<!--<span class="inline-block" :class="{'active': switchType === 'account'}" @click="setSwitchType('account')">收款账户</span>-->
<!--</div>-->
<!-- 账户信息start -->
<div class="mp-content" v-if="switchType == 'account'">
<!--<p class="mp-content-header">已设置的账户信息<span class="fr" @click="openAddAccount"><i class="iconfont icon-xinzeng"></i>新增账户</span></p>-->
<template v-if="accountList && accountList.length === 0">
<div class="new-account">
<div class="new-content-line">
<span class="inline-block"><i>*</i>开户名称：</span>
<input type="text" placeholder="请填写开户人姓名或企业名称" v-model="bankAccountObj.accountname" @blur="checkAccountname">
</div>
<div class="new-content-line">
<span class="inline-block"><i>*</i>银行账号：</span>
<input type="text" placeholder="请填写银行账号" v-model="bankAccountObj.number" @blur="checkNumber">
</div>
<div class="new-content-line">
<span class="inline-block"><i>*</i>开户银行：</span>
<input type="text" readonly placeholder="例如：中国银行" v-model="bankAccountObj.bankname" @click.stop="showNewSimilar = !showNewSimilar">
<ul v-if="showNewSimilar" class="similar">
<li class="text-ellipse" v-for="bank in bankList" @click.stop="setBankName(bank)">{{bank}}</li>
</ul>
</div>
<div class="new-content-line">
<span class="inline-block"><i>*</i>开户支行：</span>
<input type="text" placeholder="例如：侨香支行" v-model="bankAccountObj.branchname" @blur="checkBranchname">
</div>
<div class="am-btn-wrap">
<button @click="addAccount">确认</button>
</div>
<p class="am-remind-text clearfix">
<i class="fl">*声明:</i>
<span class="fr">
1. 此账户为卖家收款账户，请仔细核对信息内容，若由信息错误造成的损失，优软商城不承担赔偿责任。
<br/>
2. 卖家只能有唯一一个“使用中”的收款账户，新增账户审核通过后，原账户将自动失效。
<br/>
3. 如您的企业名称、开户银行及账号变更，您须在优软商城开展资金结算前进行更正，否则发生转账错误优软商城不承担赔偿责任。
<br/>
4. 更多的条款请阅读《优软商城代收代付协议》 。
</span>
</p>
</div>
</template>
<template v-else>
<ul class="mp-list">
<li v-for="account in accountList">
<div class="content-line">
<span class="inline-block title">开户名称：</span>
<span class="inline-block content text-ellipse">{{account.accountname}}</span>
</div>
<div class="content-line">
<span class="inline-block title">银行账户：</span>
<span class="inline-block content text-ellipse">{{account.number}}</span>
</div>
<div class="content-line">
<span class="inline-block title">开户银行：</span>
<span class="inline-block content text-ellipse">{{account.bankname}}</span>
</div>
<div class="content-line">
<span class="inline-block title">开户支行：</span>
<span class="inline-block content text-ellipse">{{account.branchname}}</span>
</div>
<div class="content-line">
<span class="inline-block title">状态：</span>
<span class="inline-block content text-ellipse">
{{account.status | bankStatusFilter}}
<i v-if="account.status == 101" class="iconfont icon-tixing"></i>
</span>
</div>
<div class="btn-wrap clearfix">
<a class="inline-block" @click="reuseAccount(account)"><i class="iconfont icon-gouxuan1"></i>重新使用</a><!-- v-if="account.status == 105"-->
<a class="inline-block" @click="deleteAccount(account)"><i class="iconfont icon-lajitong"></i>删除</a>
</div>
</li>
</ul>
<div class="com-btn-wrap mp-btn-wrap">
<button @click.stop="openAddAccount"><i class="iconfont icon-add"></i>新增账户</button>
</div>
</template>
</div>
<!-- 账户信息end -->
<!-- 交易记录start -->
<div class="mp-record" v-if="switchType == 'record'">
<div class="search-content">
<input type="text" placeholder="买家名称/订单号" v-model="filterParams.keyword" @keyup.13="filterRecord">
<span @click="filterRecord"><i class="iconfont icon-sousuo"></i></span>
</div>
<div class="filters-wrap">
<base-filter
v-for="filterOption in filterOptions"
:key="filterOption.selectOption"
:selectItems="filterOption.selectItems"
:defaultVal="filterOption.defaultVal"
:selectOption="filterOption.selectOption"
@selectAction="onSelectAction"
@valueAction="valueAction"
:title="filterOption.title"></base-filter>
</div>
<ul class="mp-list record-list mp-list-record" v-if="recordList.length">
<li v-for="record in recordList">
<div class="content-line">
<span class="inline-block title">订单号：</span>
<nuxt-link :to="`/mobile/order/details?uuid=${baseUtils.enidfilter(record.puid)}&type=saler`" class="inline-block content text-ellipse link">{{record.orderid}}</nuxt-link>
</div>
<div class="content-line">
<span class="inline-block title">金额：</span>
<span class="inline-block content text-ellipse">{{record.currencyName | currencyFilter}}{{record.total}}</span>
</div>
<div class="content-line">
<span class="inline-block title">买家：</span>
<span class="inline-block content text-ellipse">{{record.buyerentername || record.buyername}}</span>
</div>
<div class="content-line">
<span class="inline-block title">交易方式：</span>
<span class="inline-block content text-ellipse">{{record.type | payTypeFilter}}</span>
</div>
<div class="content-line">
<span class="inline-block title">时间：</span>
<span class="inline-block content text-ellipse">{{record.transferTime | time}}</span>
</div>
<div class="content-line">
<span class="inline-block title">状态：</span>
<span class="inline-block content text-ellipse">收款成功</span>
</div>
</li>
</ul>
<div class="fix-count-wrap" v-if="recordList.length">
<span class="content">已收总计：<span>{{currencySymbol | currencyFilter}} {{totalMoney}}</span></span>
<!--<span class="content">支出总计：<span>{{currencySymbol | currencyFilter}} 0</span></span>
<p>结余：{{currencySymbol | currencyFilter}} {{totalRecordPrice}} (共计{{recordList.length || 0}}笔交易)</p>-->
<p>结余：{{currencySymbol | currencyFilter}} {{totalMoney}} (共计{{recordData.data.data.data.totalElements || 0}}笔交易)</p>
</div>
</div>
<!-- 交易记录end -->
<!-- 新增账户弹框start -->
<modal-wrapper :noHeader="true" :showModal="showModal" @closeAction="showModal = false">
<div class="add-account-modal in-wrapper">
<div class="account-modal">
<p class="title">新增账户</p>
<div class="modal-content-line">
<span class="inline-block"><i>*</i>开户名称：</span>
<input type="text" placeholder="请填写开户人姓名或企业名称" v-model="bankAccountObj.accountname" @blur="checkAccountname">
</div>
<div class="modal-content-line">
<span class="inline-block"><i>*</i>银行账号：</span>
<input type="text" placeholder="请填写银行账号" v-model="bankAccountObj.number" @blur="checkNumber">
</div>
<div class="modal-content-line">
<span class="inline-block"><i>*</i>开户银行：</span>
<input type="text" readonly placeholder="例如：中国银行" v-model="bankAccountObj.bankname" @click.stop="showSimilar = !showSimilar">
<ul v-if="showSimilar" class="similar">
<li class="text-ellipse" v-for="bank in bankList" @click.stop="setBankName(bank)">{{bank}}</li>
</ul>
</div>
<div class="modal-content-line">
<span class="inline-block"><i>*</i>开户支行：</span>
<input type="text" placeholder="例如：侨香支行" v-model="bankAccountObj.branchname" @blur="checkBranchname">
</div>
<!--<div class="modal-content-line upload">
<span class="inline-block"><i>*</i>上传开户许可证：</span>
<input type="text" v-model="file.name" disabled>
<label class="upload-btn">选择文件
<input type="file" @change="onUpload($event)" accept="image/jpeg,image/jpg,image/png,.pdf">
</label>
</div>-->
<div class="am-btn-wrap">
<button @click="showModal = false">取消</button>
<button @click="addAccount">确认</button>
</div>
<p class="am-remind-text clearfix">
<i class="fl">*声明:</i>
<span class="fr">
1. 此账户为卖家收款账户，请仔细核对信息内容，若由信息错误造成的损失，优软商城不承担赔偿责任。
<br/>
2. 卖家只能有唯一一个“使用中”的收款账户，新增账户审核通过后，原账户将自动失效。
<br/>
3. 如您的企业名称、开户银行及账号变更，您须在优软商城开展资金结算前进行更正，否则发生转账错误优软商城不承担赔偿责任。
<br/>
4. 更多的条款请阅读《优软商城代收代付协议》 。
<!--<br/>
5. 附件仅支持JPG、PNG、PDF格式，大小超过3M。-->
</span>
</p>
</div>
</div>
</modal-wrapper>
<!-- 新增账户弹框end -->
<!-- 重新使用账户提示框start -->
<div class="mobile-modal reuse-account-modal" v-show="showReuseModal">
<div class="ra-remind">
<div class="header"><i class="iconfont icon-guanbi1" @click="showReuseModal = false"></i></div>
<div class="content"><i class="fa fa-exclamation-circle"></i>
<span>此操作会让使用中的收款账户失效，是否确定重新使用？</span>
</div>
<div class="footer">
<button @click="showReuseModal = false">取消</button>
<button @click="setDefaultAccount()">确认</button>
</div>
</div>
</div>
<!-- 重新使用账户提示框end -->
<remind-box :title="remindText" :timeoutCount="timeoutCount"></remind-box>
<pull-up :fixId="'mobileFixContent'" :searchMore="fetching" :allPage="allPage" :page="page" @pullUpAction="onPullUpAction"></pull-up>
<empty-status v-if="isEmpty" :text="暂无交易记录" :showLink="true"></empty-status>
</div>
</div>
</template>
<script>
import { RemindBox, PullUp, EmptyStatus } from '~components/mobile/common'
import { ModalWrapper, BaseFilter } from '~components/mobile/base'
import axios from '~plugins/axios'
export default {
layout: 'mobile',
middleware: 'authenticated',
data () {
return {
fromUserPage: false,
remindText: '',
timeoutCount: '',
page: 1,
count: 10,
accountList: [],
recordList: [],
switchType: 'record',
// 分页重置标志
isChange: false,
showModal: false,
bankList: [],
showSimilar: false,
showNewSimilar: false,
bankAccountObj: {
bankname: '',
branchname: '',
number: '',
accountname: '',
accountType: 'RECEIVE_TYPE'
},
validBankAccountObj: {
bankname: false,
branchname: false,
number: false,
accountname: false
},
filterParams: {
keyword: '',
fromDate: '',
toDate: '',
remitteeType: ''
},
currentId: '',
showReuseModal: false,
totalRecordPrice: 0,
file: '',
dateObj: {
fromDate: '',
toDate: ''
},
filterOptions: [
{
title: '交易方式',
selectOption: 'remitteeType',
selectItems: [{
key: '平台代付',
val: 'PLATFORMPAIDTOVENDOR'
}, {
key: '买家付款',
val: 'PAIDTOVENDOR'
}],
defaultVal: 'PLATFORMPAIDTOVENDOR'
},
// {
// title: '交易状态',
// selectOption: 'status',
// selectItems: [{key: '全部',
// val: 0
// }, {
// key: '已收款',
// val: 1
// }, {
// key: '待收款',
// val: 2
// }],
// defaultVal: 0
// },
{
title: '交易时间',
selectOption: 'date',
selectItems: [{
key: '30天',
val: 1
}, {
key: '90天',
val: 2
}, {
key: '180天',
val: 3
}, {
key: '自定义',
val: 4
}],
defaultVal: 1
}
],
totalMoney: 0,
fromDate: 0,
toDate: 0
}
},
components: {
RemindBox,
PullUp,
ModalWrapper,
EmptyStatus,
BaseFilter
},
async asyncData({route}) {
let { data } = await axios.get('/trade/transfer/vendor/bankTransfer/ledger?type=sup')
return {
totalMoney: data.code === 1 ? data.data : 0,
fromUserPage: Boolean(route.query.type),
switchType: route.query.switchType || 'record'
}
},
created () {
let currentTime = this.baseUtils.getClearDay(new Date())
let fromDate = currentTime - 29 * 24 * 60 * 60 * 1000
let toDate = currentTime + 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000
if (this.$route.query.type) {
this.$store.dispatch('payCenter/loadVendorAccount', {count: 10, page: 1, sorting: {num: 'ASC'}, type: 'sup'})
} else {
this.$store.dispatch('payCenter/loadVendorRecord', {count: 10, page: 1, sorting: {'transferTime': 'DESC'}, type: 'sup', fromDate: fromDate, toDate: toDate, remitteeType: 'PAIDTOPLATFORM'})
}
},
mounted () {
if (!this.bankList || !this.bankList.length) {
this.$http.get('/data/bank.json').then(res => {
this.bankList = res.data.list
})
}
},
watch: {
'vendorAccount': {
handler: function (val) {
if (val && val.content) {
if (this.isChange) {
this.accountList = []
this.isChange = false
}
this.accountList = [...this.accountList, ...val.content]
}
}
},
'vendorRecord': {
handler: function (val) {
if (val && val.content) {
if (this.isChange) {
this.recordList = []
this.isChange = false
this.totalRecordPrice = 0
}
// this.totalRecordPrice = this.baseUtils.priceFixed(this.totalRecordPrice + this.recordData.data.data.total)
this.recordList = [...this.recordList, ...val.content]
}
}
}
},
filters: {
bankStatusFilter: function (status) {
let result = '未知状态'
switch (status) {
case 101 :
result = '待审核'
break
case 104:
result = '使用中'
break
case 103:
result = '未通过'
break
case 105:
result = '已失效'
break
case 112:
result = '已删除'
break
}
return result
},
payTypeFilter: function (type) {
if (type === 'PAIDTOVENDOR') {
return '买家付款'
} else if (type === 'PLATFORMPAIDTOVENDOR') {
return '平台代付'
} else {
return '其他'
}
}
},
computed: {
accountData () {
return this.$store.state.payCenter.data.vendorAccount
},
recordData () {
return this.$store.state.payCenter.data.vendorRecord
},
vendorAccount () {
return this.accountData.data
},
vendorRecord () {
return this.recordData.data.data ? this.recordData.data.data.data : []
},
fetching () {
return this.switchType === 'account' ? this.accountData.fetching : this.recordData.fetching
},
allPage () {
return this.switchType === 'account' ? this.vendorAccount.totalPages : this.vendorRecord.totalPages
},
isEmpty () {
return (this.switchType === 'record' && this.recordList.length === 0)
},
currencySymbol () {
return this.recordList[0] ? this.recordList[0].currencyName : 'RMB'
}
},
methods: {
setRemindText: function (str) {
this.remindText = str
this.timeoutCount++
},
reloadList () {
if (this.switchType === 'account') {
this.$store.dispatch('payCenter/loadVendorAccount', {
count: this.count,
page: this.page,
sorting: {num: 'ASC'},
type: 'sup'
})
} else {
this.$store.dispatch('payCenter/loadVendorRecord', {
count: this.count,
page: this.page,
sorting: {'transferTime': 'DESC'},
type: 'sup',
fromDate: this.filterParams.fromDate || null,
toDate: this.filterParams.toDate || null,
keyword: this.filterParams.keyword || null,
remitteeType: this.filterParams.remitteeType || null
})
}
},
initList () {
this.isChange = true
this.page = 1
this.reloadList()
},
onPullUpAction () {
this.page++
this.reloadList()
},
setSwitchType (type) {
this.switchType = type
if (type === 'record') {
this.initFilterParams()
}
this.initList()
},
initFilterParams () {
this.filterParams = {
keyword: '',
fromDate: '',
toDate: '',
currencyName: '',
method: ''
}
},
filterRecord () {
this.isChange = true
this.page = 1
this.reloadList()
},
onSelectAction (selectObj) {
this.setSelect(selectObj.key, selectObj.value, true)
},
onValueAction (selectObj) {
this.setSelect(selectObj.key, selectObj.value, false)
},
setSelect (type, val, isReload) {
if (type === 'date') {
if (val) {
this.filterParams.fromDate = val.fromDate
this.filterParams.toDate = val.toDate
} else {
this.filterParams.fromDate = null
this.filterParams.toDate = null
}
} else {
this.filterParams[type] = val
}
isReload && this.filterRecord()
},
setDate (type) {
if (this.dateObj[type]) {
this.filterParams[type] = new Date(this.dateObj[type]).getTime() - 8 * 60 * 60 * 1000
if (this.filterParams.fromDate && this.filterParams.toDate && this.filterParams.fromDate > this.filterParams.toDate) {
if (type === 'fromDate') {
this.setRemindText('起始时间不能大于结束时间')
} else {
this.setRemindText('结束时间不能小于起始时间')
}
this.filterParams[type] = null
this.dateObj[type] = null
} else {
if (this.filterParams.fromDate && this.filterParams.toDate && this.filterParams.fromDate === this.filterParams.toDate) {
// 23:59:59
this.filterParams.toDate += 23 * 60 * 60 * 1000 + 59 * 60 * 1000 + 59 * 1000
}
this.filterRecord()
}
} else {
this.filterParams[type] = null
this.filterRecord()
}
},
reuseAccount (account) {
if (account.status !== 105) {
this.setRemindText(`该账户${this.$options.filters.bankStatusFilter(account.status)}`)
} else {
this.currentId = account.id
this.showReuseModal = true
}
},
setDefaultAccount () {
this.$http.get(`/trade/bankInfo/setDefaultAccount/${this.currentId}`).then(() => {
this.setRemindText('重新使用完成')
this.initList()
this.showReuseModal = false
})
},
deleteAccount (account) {
this.$http.delete(`/trade/bankInfo/delete/${account.id}`).then(res => {
if (res.data === 'success') {
this.setRemindText('删除成功')
this.initList()
}
})
},
initAccount () {
this.bankAccountObj = {
bankname: '',
branchname: '',
number: '',
accountname: '',
accountType: 'RECEIVE_TYPE'
}
this.validBankAccountObj = {
bankname: false,
branchname: false,
number: false,
accountname: false
}
this.file = ''
},
openAddAccount () {
if (!this.bankList || !this.bankList.length) {
this.$http.get('/data/bank.json').then(res => {
this.bankList = res.data.list
this.initAccount()
this.showModal = true
})
} else {
this.initAccount()
this.showModal = true
}
},
setBankName (name) {
this.bankAccountObj.bankname = name
this.showSimilar = false
this.showNewSimilar = false
this.validBankAccountObj.bankname = true
},
checkBranchname () {
this.validBankAccountObj.branchname = true
if (!(this.bankAccountObj.branchname && this.bankAccountObj.branchname.length)) {
this.setRemindText('开户支行不能为空')
this.validBankAccountObj.branchname = false
} else if (this.baseUtils.getRealLen(this.bankAccountObj.branchname) > 40) {
this.setRemindText('开户支行不能大于40字符')
this.validBankAccountObj.branchname = false
} else if (!/^[\u2E80-\u9FFF]+$/.test(this.bankAccountObj.branchname)) {
this.setRemindText('请输入正确的开户支行')
this.validBankAccountObj.branchname = false
}
},
checkNumber () {
this.validBankAccountObj.number = true
if (!(this.bankAccountObj.number && this.bankAccountObj.number.length)) {
this.validBankAccountObj.number = false
this.setRemindText('银行账号不能为空')
} else if (this.baseUtils.getRealLen(this.bankAccountObj.number) > 30) {
this.setRemindText('银行账号不能大于30字符')
this.validBankAccountObj.number = false
} else if (!/^[0-9]+$/.test(this.bankAccountObj.number)) {
this.setRemindText('请输入正确的银行账号')
this.validBankAccountObj.number = false
}
if (this.validBankAccountObj.number) {
this.$http.get('/trade/bankInfo/number/count', {params: {accountType: 'RECEIVE_TYPE', number: this.bankAccountObj.number, type:1063}}).then(res => {
if (res.data.success) {
if (res.data.data === 0) {
this.validBankAccountObj.number = true
} else {
this.validBankAccountObj.number = false
this.setRemindText('银行账号校验失败')
}
} else {
this.validBankAccountObj.number = false
this.setRemindText(res.data.message || '银行账号校验失败')
}
}, err => {
this.validBankAccountObj.number = false
this.setRemindText(err.response.data || '银行账号校验失败')
console.log(err)
})
}
},
checkAccountname () {
this.validBankAccountObj.accountname = true
if (!(this.bankAccountObj.accountname && this.bankAccountObj.accountname.length)) {
this.validBankAccountObj.accountname = false
this.setRemindText('账户名称不能为空')
} else if (this.baseUtils.getRealLen(this.bankAccountObj.accountname) > 100) {
this.setRemindText('账户名称不能大于100个字符')
this.validBankAccountObj.accountname = false
}
},
addAccount () {
if (!this.validBankAccountObj.bankname) {
this.setRemindText('请选择开户银行')
} else if (!this.validBankAccountObj.branchname) {
this.setRemindText('请填写正确的开户支行')
} else if (!this.validBankAccountObj.number) {
this.setRemindText('请填写正确的银行账号')
} else if (!this.validBankAccountObj.accountname) {
this.setRemindText('请填写正确的开户名称')
} else {
let param = new FormData()
// param.append('file', this.file, this.file.name)
param.append('bankInfo', JSON.stringify(this.bankAccountObj))
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
this.$http.post('/trade/bankInfo/save/enterprise?type=sup', param, config).then(res => {
if (res.data.id) {
this.setRemindText('新增账户成功')
this.initList()
this.initAccount()
this.showModal = false
} else {
this.setRemindText('新增账户失败')
}
}, err => {
this.setRemindText(err.response.data || '新增账户失败')
console.log(err)
})
}
},
onUpload (e) {
let file = e.target.files[0]
let arr = file.name.split('.')
let type = arr[arr.length - 1]
if ('pdf/png/jpg/jpeg'.indexOf(type.toLowerCase()) === -1) {
this.setRemindText('仅支持jpg/jpeg/png/pdf格式的文件')
} else if (file.size > 1024 * 1024 * 3) {
this.setRemindText('请勿大于3M')
} else {
this.file = file
}
}
}
}
</script>
<style lang="scss">
@import '~assets/scss/mobilePayCenter';
.order-tab {
background: #3f84f6;
padding-bottom: 0.2rem;
margin-top: 1.26rem;
.order-tab-wrapper {
border: solid 1px #ffffff;
width: 7.06rem;
margin: 0 auto;
border-radius: 0.04rem;
line-height: 0.72rem;
height: 0.72rem;
overflow: hidden;
div {
color: #ffffff;
font-size: 0.28rem;
text-align: center;
width: 50%;
&.active {
background-color: #ffffff;
color: #3f84f6;
}
}
}
}
.mobile-centerfix-content {
top: 2.185rem;
}
.new-account {
padding: .24rem;
background: #fff;
i {
font-style: normal;
color: #ff0000;
}
.new-content-line {
margin-bottom: .3rem;
position: relative;
span {
width: 2.5rem;
color: #226ce7;
font-size: .28rem;
text-align: right;
}
input[type='text'] {
width: 3.59rem;
height: .56rem;
font-size: .24rem;
border-radius: .04rem;
border: 1px solid #d2d2d2;
padding: 0 .2rem;
}
input[readonly] {
background: url('/images/mobile/select-arrow.png') no-repeat;
background-size: .24rem .15rem;
background-position: 3.1rem .2rem;
}
.similar {
position: absolute;
left: 2.5rem;
border: 1px solid $base-color;
border-radius: .04rem;
top: .56rem;
width: 3.59rem;
background: #fff;
z-index: 1;
max-height: 3.96rem;
overflow-y: auto;
li {
height: .66rem;
line-height: .66rem;
padding: 0 .19rem;
font-size: .24rem;
&:active, &:focus {
background: #f7f7f7;
}
}
}
}
.remind {
color: #666;
font-size: .24rem;
width: 3.59rem;
float: right;
margin-right: .44rem;
line-height: .37rem;
i {
margin-right: .05rem;
}
}
.am-btn-wrap {
margin-top: .74rem;
button {
width: 92%;
height: .77rem;
line-height: .77rem;
color: #fff;
font-size: .32rem;
border-radius: .08rem;
background: #bfbfbf;
&:last-child {
background: $base-color;
margin-left: .3rem;
}
}
}
}
.ra-remind {
width: 6.3rem;
height: 3.5rem;
position: absolute;
top: 50%;
left: 50%;
margin-top: -1.75rem;
margin-left: -3.15rem;
border-radius: .15rem;
.header {
height: .6rem;
line-height: .6rem;
background: #3976f4;
border-top-left-radius: .15rem;
border-top-right-radius: .15rem;
i {
font-size: .32rem;
color: #fff;
float: right;
margin-right: .28rem;
}
}
.content {
background: #fff;
padding: .53rem .77rem;
span {
font-size: .32rem;
}
i {
font-size: .44rem;
color: #3976f4;
float: left;
margin-right: .2rem;
}
}
.footer {
background: #fff;
padding-bottom: .37rem;
text-align: center;
border-bottom-left-radius: .15rem;
border-bottom-right-radius: .15rem;
margin-top: -0.05rem;
button {
width: 2.22rem;
height: .77rem;
line-height: .77rem;
color: #fff;
font-size: .32rem;
border-radius: .08rem;
background: #bfbfbf;
&:last-child {
background: $base-color;
margin-left: .3rem;
}
}
}
}
.record-list {
margin-bottom: 1.26rem
}
.upload {
input[disabled] {
background: #eee;
width: 2.18rem !important;
}
.upload-btn {
display: inline-block;
vertical-align: middle;
width: 1.2rem;
height: .56rem;
line-height: .56rem;
text-align: center;
color: #fff;
background: #fe9d03;
position: relative;
left: .2rem;
border-radius: .04rem;
font-size: .24rem;
font-weight: normal;
margin: 0;
input {
opacity: 0;
width: 1.2rem;
height: .56rem;
position: absolute;
top: 0;
}
}
}
.fix-count-wrap {
position: fixed;
bottom: .98rem;
height: 1.25rem;
text-align: right;
background: #fff;
border-radius: .02rem;
border-top: 1px solid #bfbfbf;
line-height: .62rem;
font-size: .28rem;
width: 100%;
padding-right: .3rem;
.content {
margin-left: .39rem;
&:first-child {
span {
color: #fd0303;
}
}
&:nth-of-type(2) {
span {
color: #15b262;
}
}
}
}
.mp-list .content-line .icon-tixing {
font-size: .32rem;
color: $base-color;
margin-left: .05rem;
}
.am-remind-text {
font-size: .26rem;
color: #999;
margin-top: .29rem;
padding: .45rem 0;
border-top: 1px solid #d2d2d2;
i {
color: #fd0303;
width: 12%;
}
.fr {
width: 88%;
}
}
.vendor-pay {
padding-bottom: 1rem;
.mobile-modal .mobile-modal-wrapper {
left: .2rem !important;
right: .2rem !important;
}
}
.vendor-pay-record {
/*bottom: 2.23rem !important;*/
padding-bottom: 1.25rem !important;
}
</style>