mo-bai
4 years ago
15 changed files with 820 additions and 27 deletions
Split View
Diff Options
-
24apis/merchantApi.js
-
107components/qn-select/qn-select.vue
-
29enums/index.js
-
4env/index.js
-
10manifest.json
-
16pages.json
-
300pages/merchant-list/index.vue
-
298pages/merchant-setting/index.vue
-
21pages/mine/index.vue
-
BINstatic/imgs/merchant/apply-auditing-icon.png
-
BINstatic/imgs/merchant/apply-finished-icon.png
-
BINstatic/imgs/merchant/apply-reject-icon.png
-
BINstatic/imgs/merchant/error-icon.png
-
BINstatic/imgs/mine/merchant-icon.png
-
38utils/index.js
@ -0,0 +1,24 @@ |
|||
import http from '@/utils/http/index.js' |
|||
/** |
|||
* 获取特约商户列表 |
|||
* @param {any} data |
|||
* @returns |
|||
*/ |
|||
export function getMerchantList(data) { |
|||
return http.get({ |
|||
url: '/uec/get/supplier/apply/commercial/tenant/list', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
/** |
|||
* 申请特约商户 |
|||
* @param {any} data |
|||
* @returns |
|||
*/ |
|||
export function applyMerchant(data) { |
|||
return http.post({ |
|||
url: '/uec/submit/supplier/commercial/tenant/apply', |
|||
data |
|||
}) |
|||
} |
|||
@ -1,8 +1,8 @@ |
|||
/** |
|||
* @description 唯一环境变量 |
|||
*/ |
|||
// const env = 'test'
|
|||
const env = 'test' |
|||
// const env = 'dev'
|
|||
const env = 'production' |
|||
// const env = 'production'
|
|||
|
|||
export default env |
|||
@ -0,0 +1,300 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="特约商户列表"></uni-nav-bar> |
|||
<view class="flex-col group_3" v-for="merchant in merchantList" :key="merchant.enterpriseId"> |
|||
<view class="flex-col section_1"> |
|||
<view class="flex-row group_4 justify-between"> |
|||
<view class="flex-row"> |
|||
<text class="text_4">广西印刷有限公司</text> |
|||
<image v-if="showIcon(merchant.applymentState).img" :src="showIcon(merchant.applymentState).img" class="image_4" /> |
|||
</view> |
|||
<view v-if="showIcon(merchant.applymentState).text" class="button" @click="checkInfo(merchant)">{{ showIcon(merchant.applymentState).text }}</view> |
|||
</view> |
|||
<view class="flex-col group_5" v-if="infoShowStatus.indexOf(merchant.applymentState) < -1"> |
|||
<view class="top-section flex-col view_1"> |
|||
<view class="top-group flex-row"> |
|||
<view class="left-section"></view> |
|||
<text class="text_6">商户信息</text> |
|||
</view> |
|||
<view class="center-group flex-col view_4"> |
|||
<view class="flex-row"> |
|||
<text class="label">商户类型：</text> |
|||
<text class="value">{{ mallSupplierTypeMap[merchant.mallSupplierType] }}</text> |
|||
</view> |
|||
<view class="flex-row"> |
|||
<text class="label">客服电话</text> |
|||
<text class="value">{{ merchant.servicePhone }}</text> |
|||
</view> |
|||
<text class="text_12">商户资料：</text> |
|||
</view> |
|||
<view class="flex-row equal-division"> |
|||
<image @click="preview(merchant.businessLicenseImg)" :src="merchant.businessLicenseImg" class="equal-division-item image_5" /> |
|||
<image @click="preview(merchant.legalPersonIdCardFrontImg)" :src="merchant.legalPersonIdCardFrontImg" class="equal-division-item" /> |
|||
<image @click="preview(merchant.legalPersonIdCardBackImg)" :src="merchant.legalPersonIdCardBackImg" class="equal-division-item" /> |
|||
</view> |
|||
</view> |
|||
<view class="top-section flex-col"> |
|||
<view class="top-group flex-row"> |
|||
<view class="left-section"></view> |
|||
<text class="text_6">结算账户</text> |
|||
</view> |
|||
<view class="center-group flex-col" v-if="merchant.mallSupplierType == mallSupplierTypeEnum.PERSONAL"> |
|||
<view class="flex-row"> |
|||
<text class="label">账户类型：</text> |
|||
<text class="value">私账</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">账户名：</text> |
|||
<text class="value">{{ merchant.privateAccounts.accountName }}</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">对私账户：</text> |
|||
<text class="value">{{ merchant.privateAccounts.accountNumber }}</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">开户行：</text> |
|||
<text class="value">{{ merchant.privateAccounts.accountBank }}</text> |
|||
</view> |
|||
</view> |
|||
<view class="center-group flex-col" v-if="merchant.mallSupplierType == mallSupplierTypeEnum.ENTERPRISE"> |
|||
<view class="flex-row"> |
|||
<text class="label">账户类型：</text> |
|||
<text class="value">公账</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">账户名：</text> |
|||
<text class="value">{{ merchant.corporateAccount.accountName }}</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">对私账户：</text> |
|||
<text class="value">{{ merchant.corporateAccount.accountNumber }}</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">开户行：</text> |
|||
<text class="value">{{ merchant.corporateAccount.accountBank }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="top-section flex-col"> |
|||
<view class="top-group flex-row"> |
|||
<view class="left-section"></view> |
|||
<text class="text_6">法人信息</text> |
|||
</view> |
|||
<view class="center-group flex-col"> |
|||
<view class="flex-row"> |
|||
<text class="label">法人姓名：</text> |
|||
<text class="value">{{ merchant.legalPersonName }}</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">身份证号码：</text> |
|||
<text class="value">{{ merchant.legalPersonIdCardNo }}</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">手机号码：</text> |
|||
<text class="value">{{ merchant.legalPersonMobile }}</text> |
|||
</view> |
|||
<view class="flex-row top_16"> |
|||
<text class="label">邮箱：</text> |
|||
<text class="value">{{ merchant.contactEmail }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2, back } from '@/utils/hook.js' |
|||
import { getMerchantList } from '@/apis/merchantApi.js' |
|||
import { applyStatusEnum, mallSupplierTypeMap, mallSupplierTypeEnum } from '@/enums/index.js' |
|||
|
|||
// 信息展示状态 |
|||
const infoShowStatus = [ |
|||
applyStatusEnum.SUBMITTED, |
|||
applyStatusEnum.AUDITING, |
|||
applyStatusEnum.WAIT_VERIFY, |
|||
applyStatusEnum.WAIT_SIGN, |
|||
applyStatusEnum.WAIT_OPEN, |
|||
applyStatusEnum.FINISHED |
|||
] |
|||
export default { |
|||
data() { |
|||
return { |
|||
infoShowStatus: Object.freeze(infoShowStatus), |
|||
mallSupplierTypeMap: Object.freeze(mallSupplierTypeMap), |
|||
mallSupplierTypeEnum: Object.freeze(mallSupplierTypeEnum), |
|||
merchantList: [], |
|||
cache: {} |
|||
} |
|||
}, |
|||
onShow() { |
|||
getMerchantList({ type: 5 }).then((res) => { |
|||
if (res) { |
|||
this.merchantList = res |
|||
} |
|||
}) |
|||
}, |
|||
methods: { |
|||
go2, |
|||
back, |
|||
preview(url) { |
|||
uni.previewImage({ |
|||
current: url, |
|||
urls: [url] |
|||
}) |
|||
}, |
|||
showIcon(status) { |
|||
if (this.cache[status]) { |
|||
return this.cache[status] |
|||
} |
|||
/** |
|||
* @property {string} img - 图标 空就不展示 |
|||
* @property {string} text - 按钮文字 ，空就不展示 |
|||
*/ |
|||
let result = { |
|||
img: '', |
|||
text: '' |
|||
} |
|||
let infoMap = [applyStatusEnum.RE_SUBMIT, applyStatusEnum.REJECTED, applyStatusEnum.CANCELED] |
|||
if (status === applyStatusEnum.FINISHED) { |
|||
result.img = '/static/imgs/merchant/apply-finished-icon.png' |
|||
} else if (status === applyStatusEnum.WAIT_APPLY) { |
|||
result.text = '去申请' |
|||
} else if (infoMap.includes(status)) { |
|||
result.img = '/static/imgs/merchant/apply-reject-icon.png' |
|||
result.text = '查看' |
|||
} else { |
|||
result.img = '/static/imgs/merchant/apply-auditing-icon.png' |
|||
} |
|||
this.cache[status] = result |
|||
return result |
|||
}, |
|||
checkInfo(merchant) { |
|||
go2('merchant-setting', { info: JSON.stringify(merchant) }) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 750rpx; |
|||
} |
|||
.group_3 { |
|||
padding-bottom: 32rpx; |
|||
flex: 1 1 auto; |
|||
overflow-y: auto; |
|||
.section_1 { |
|||
background-color: rgb(255, 255, 255); |
|||
.group_4 { |
|||
padding: 23rpx 32rpx 22rpx; |
|||
border-bottom: solid 2rpx rgb(221, 221, 221); |
|||
.text_4 { |
|||
max-width: 370rpx; |
|||
color: rgb(0, 0, 0); |
|||
font-size: 30rpx; |
|||
font-weight: 600; |
|||
line-height: 42rpx; |
|||
white-space: wrap; |
|||
} |
|||
.image_4 { |
|||
margin-left: 16rpx; |
|||
width: 116rpx; |
|||
height: 32rpx; |
|||
} |
|||
.button { |
|||
width: 140rpx; |
|||
height: 56rpx; |
|||
background: #ffffff; |
|||
border: 1.2rpx solid rgba(0, 122, 255, 1); |
|||
border-radius: 40rpx; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 28rpx; |
|||
color: #007aff; |
|||
} |
|||
} |
|||
.group_5 { |
|||
padding: 19rpx 32rpx 36rpx; |
|||
.top-section { |
|||
margin-top: 20rpx; |
|||
padding: 24rpx 24rpx 30rpx; |
|||
background-color: rgb(247, 248, 250); |
|||
border-radius: 8rpx; |
|||
.top-group { |
|||
color: rgb(51, 51, 51); |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
line-height: 40rpx; |
|||
white-space: nowrap; |
|||
.left-section { |
|||
align-self: center; |
|||
background-color: rgb(173, 186, 201); |
|||
border-radius: 50%; |
|||
width: 10rpx; |
|||
height: 10rpx; |
|||
} |
|||
.text_6 { |
|||
margin-left: 6rpx; |
|||
} |
|||
} |
|||
.center-group { |
|||
margin-top: 20rpx; |
|||
padding: 0 18rpx; |
|||
.text_12 { |
|||
margin-top: 16rpx; |
|||
color: rgb(136, 136, 136); |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
.view_4 { |
|||
margin-top: 21rpx; |
|||
} |
|||
.equal-division { |
|||
margin-left: 18rpx; |
|||
margin-top: 15rpx; |
|||
align-self: flex-start; |
|||
.equal-division-item { |
|||
margin-left: 12rpx; |
|||
flex: 1 1 120rpx; |
|||
border-radius: 10rpx; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
} |
|||
.image_5 { |
|||
margin-left: 0; |
|||
} |
|||
} |
|||
} |
|||
.view_1 { |
|||
margin-top: 0; |
|||
} |
|||
} |
|||
} |
|||
.top_16 { |
|||
margin-top: 16rpx; |
|||
} |
|||
.label { |
|||
color: rgb(136, 136, 136); |
|||
font-size: 28rpx; |
|||
line-height: 40rpx; |
|||
white-space: nowrap; |
|||
width: 168rpx; |
|||
} |
|||
.value { |
|||
width: 430rpx; |
|||
color: rgb(51, 51, 51); |
|||
font-size: 28rpx; |
|||
font-weight: 500; |
|||
line-height: 40rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,298 @@ |
|||
<template> |
|||
<view class="content"> |
|||
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="特约商户设置"></uni-nav-bar> |
|||
<view class="justify-center section_1" v-show="auditDetail"> |
|||
<image src="/static/imgs/merchant/error-icon.png" class="image_4" /> |
|||
<text class="text_4">申请被驳回，{{ auditDetail }}</text> |
|||
</view> |
|||
<qn-form-item label="商户信息" type="title"></qn-form-item> |
|||
<qn-form-item label="商户名称"> |
|||
<text>{{ form.name }}</text> |
|||
</qn-form-item> |
|||
<qn-form-item label="商户类型" required> |
|||
<qn-select |
|||
contentStyle="background: none; padding: 0;text-align: right;" |
|||
:options="types" |
|||
v-model="form.mallSupplierType" |
|||
placeholder="请选择商户类型" |
|||
></qn-select> |
|||
</qn-form-item> |
|||
<qn-form-item label="客服电话" required> |
|||
<qn-easyinput :maxlength="11" v-model="form.servicePhone" :inputBorder="false" text="right" placeholder="请输入客服电话"></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="联系邮箱" required> |
|||
<qn-easyinput :maxlength="25" v-model="form.contactEmail" :inputBorder="false" text="right" placeholder="请输入联系邮箱"></qn-easyinput> |
|||
</qn-form-item> |
|||
<qn-form-item label="商户资料" size="large"> |
|||
<view class="flex-row img-area"> |
|||
<image v-for="(url, index) in imgs" :key="index" class="img" :src="url" @click="preview(url)"></image> |
|||
</view> |
|||
</qn-form-item> |
|||
<qn-form-item label="结算账户" type="title"></qn-form-item> |
|||
<qn-form-item label="账户类型"> |
|||
<text>{{ accountTypeName }}</text> |
|||
</qn-form-item> |
|||
<qn-form-item label="账户名"> |
|||
<text>{{ form.accountName }}</text> |
|||
</qn-form-item> |
|||
<qn-form-item label="账户号码"> |
|||
<text>{{ form.accountNumber }}</text> |
|||
</qn-form-item> |
|||
<qn-form-item label="开户行"> |
|||
<text>{{ form.accountBank }}</text> |
|||
</qn-form-item> |
|||
<qn-form-item label="法人信息" type="title"></qn-form-item> |
|||
<qn-form-item label="法人姓名"> |
|||
<text>{{ form.contactName }}</text> |
|||
</qn-form-item> |
|||
<qn-form-item label="法人身份证号"> |
|||
<text>{{ form.contactIdNumber }}</text> |
|||
</qn-form-item> |
|||
<qn-form-item label="法人手机号"> |
|||
<text>{{ form.mobilePhone }}</text> |
|||
</qn-form-item> |
|||
<qn-footer fixed height="120rpx"> |
|||
<view class="button-area"> |
|||
<view class="button button__cancel" @click="back"> |
|||
<text class="text">取消</text> |
|||
</view> |
|||
<view class="button button__submit" @click="apply"> |
|||
<text class="text" style="color: white">提交申请</text> |
|||
</view> |
|||
</view> |
|||
</qn-footer> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { go2, back } from '@/utils/hook.js' |
|||
import { applyMerchant } from '@/apis/merchantApi.js' |
|||
import { mallSupplierTypeEnum, applyStatusEnum } from '@/enums/index.js' |
|||
import { validateField } from '@/utils/index.js' |
|||
const types = [ |
|||
{ |
|||
label: '个体工商户', |
|||
value: mallSupplierTypeEnum.PERSONAL |
|||
}, |
|||
{ |
|||
label: '企业', |
|||
value: mallSupplierTypeEnum.ENTERPRISE |
|||
} |
|||
] |
|||
|
|||
const accountFields = [ |
|||
{ |
|||
label: '开户银行', |
|||
key: 'accountBank' |
|||
}, |
|||
{ |
|||
label: '开户名称', |
|||
key: 'accountName' |
|||
}, |
|||
{ |
|||
label: '银行账号', |
|||
key: 'accountNumber' |
|||
}, |
|||
{ |
|||
label: '开户银行省市编码', |
|||
key: 'bankAddressCode' |
|||
}, |
|||
{ |
|||
label: '开户银行联行号', |
|||
key: 'bankBranchId' |
|||
} |
|||
] |
|||
|
|||
const validateFields = [ |
|||
{ |
|||
name: 'contactEmail', |
|||
rules: [{ required: true, message: '请输入联系邮箱' }] |
|||
}, |
|||
{ |
|||
name: 'servicePhone', |
|||
rules: [ |
|||
{ required: true, message: '请输入客服电话' }, |
|||
{ type: 'phone', message: '请输入正确的手机号' } |
|||
] |
|||
} |
|||
] |
|||
export default { |
|||
data() { |
|||
return { |
|||
types: Object.freeze(types), |
|||
accountTypeName: '私账', |
|||
privateAccounts: {}, // 私账 |
|||
corporateAccount: {}, // 公账 |
|||
imgs: [], |
|||
auditDetail: '', |
|||
form: { |
|||
businessType: 0, // 业务类型 0 云工厂 1 纸通宝 |
|||
enterpriseId: null, |
|||
name: 'xxx', |
|||
mallSupplierType: null, |
|||
accountName: '', |
|||
accountNumber: '', |
|||
accountBank: '', |
|||
bankAddressCode: '', |
|||
bankBranchId: '', |
|||
servicePhone: '', |
|||
contactName: '', |
|||
contactIdNumber: '', |
|||
mobilePhone: '', |
|||
contactEmail: '' |
|||
} |
|||
} |
|||
}, |
|||
onLoad(option) { |
|||
if (!option.info) { |
|||
uni.showToast({ |
|||
title: '参数错误', |
|||
icon: 'none', |
|||
success: () => { |
|||
setTimeout(() => { |
|||
back() |
|||
}, 1500) |
|||
} |
|||
}) |
|||
} else { |
|||
let info = JSON.parse(option.info) |
|||
this.privateAccounts = info.privateAccounts |
|||
this.corporateAccount = info.corporateAccount |
|||
this.imgs.push(info.businessLicenseImg, info.legalPersonIdCardFrontImg, info.legalPersonIdCardBackImg) |
|||
let keys = Object.keys(this.form) |
|||
keys.forEach((key) => { |
|||
if (info[key] != undefined) { |
|||
this.form[key] = info[key] |
|||
} |
|||
}) |
|||
if (info.applymentState === applyStatusEnum.REJECTED) { |
|||
if (info.auditDetail) { |
|||
let reasons = info.auditDetail.map((item) => item.rejectReason) |
|||
this.auditDetail = reasons.join('，') |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
watch: { |
|||
'form.mallSupplierType': function (val) { |
|||
if (val === mallSupplierTypeEnum.PERSONAL) { |
|||
this.accountTypeName = '私账' |
|||
this.updateAccount(this.privateAccounts) |
|||
} else { |
|||
this.accountTypeName = '公账' |
|||
this.updateAccount(this.corporateAccount) |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
go2, |
|||
back, |
|||
preview(url) { |
|||
uni.previewImage({ |
|||
urls: this.imgs, |
|||
current: url |
|||
}) |
|||
}, |
|||
// 更新账户信息 |
|||
updateAccount(account) { |
|||
accountFields.forEach((item) => { |
|||
this.form[item.key] = account[item.key] |
|||
}) |
|||
}, |
|||
apply() { |
|||
for (let field of validateFields) { |
|||
const { name, rules } = field |
|||
const value = this.form[name] |
|||
const { isValid, msg } = validateField(value, rules) |
|||
if (!isValid) { |
|||
uni.showToast({ |
|||
title: msg, |
|||
icon: 'none' |
|||
}) |
|||
return false |
|||
} |
|||
} |
|||
applyMerchant(this.form).then((res) => { |
|||
if (res) { |
|||
uni.showToast({ |
|||
title: '申请成功', |
|||
icon: 'none', |
|||
success: () => { |
|||
setTimeout(() => { |
|||
back() |
|||
}, 1500) |
|||
} |
|||
}) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.content { |
|||
width: 750rpx; |
|||
.img-area { |
|||
width: 686rpx; |
|||
padding-bottom: 32rpx; |
|||
} |
|||
.img { |
|||
margin-left: 12rpx; |
|||
border-radius: 10rpx; |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
border: 1px solid #f7f8fa; |
|||
} |
|||
} |
|||
.section_1 { |
|||
width: 750rpx; |
|||
padding: 28rpx 32rpx; |
|||
color: rgb(0, 0, 0); |
|||
font-size: 32rpx; |
|||
font-weight: 500; |
|||
line-height: 45rpx; |
|||
white-space: pre-wrap; |
|||
background-color: rgb(255, 192, 195); |
|||
.image_4 { |
|||
margin: 4rpx 0; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
.text_4 { |
|||
width: 100%; |
|||
margin-left: 12rpx; |
|||
} |
|||
} |
|||
.button-area { |
|||
width: 750rpx; |
|||
padding: 0 32rpx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
.button { |
|||
flex-grow: 0; |
|||
flex-shrink: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
border-radius: 10rpx; |
|||
.text { |
|||
font-size: 30rpx; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
} |
|||
.button__cancel { |
|||
width: 270rpx; |
|||
height: 88rpx; |
|||
border: 2rpx solid #979797; |
|||
} |
|||
.button__submit { |
|||
width: 400rpx; |
|||
height: 88rpx; |
|||
background: #007aff; |
|||
} |
|||
} |
|||
</style> |
|||
| Before | After |
|---|---|
|
|
| Width: 100 | Height: 32 | Size: 4.7 KiB |
| Before | After |
|---|---|
|
|
| Width: 116 | Height: 32 | Size: 4.0 KiB |
| Before | After |
|---|---|
|
|
| Width: 100 | Height: 32 | Size: 4.4 KiB |
| Before | After |
|---|---|
|
|
| Width: 72 | Height: 72 | Size: 2.5 KiB |
| Before | After |
|---|---|
|
|
| Width: 68 | Height: 68 | Size: 7.8 KiB |
Write
Preview
Loading…
Cancel
Save