579 lines
23 KiB
Vue
579 lines
23 KiB
Vue
<template>
|
|
<view>
|
|
<top-bar></top-bar>
|
|
<common-header></common-header>
|
|
<category-bar></category-bar>
|
|
<view class="w-1200 m-a">
|
|
<common-swiper page="self-support-company-swiper"/>
|
|
<view class="flex justify-end items-center text-main pointer my-20 " @click="demoDownload">示例下载</view>
|
|
<view class="bg-white p-40">
|
|
<view v-for="(item, index) in configList" :key="index"
|
|
class="server-item my-20 flex flex-col justify-start items-start">
|
|
<el-checkbox @change="changeCheck(index, item.name)">
|
|
<view class="flex flex-col justify-start items-start">
|
|
<view class="flex justify-start items-center text-35 mb-20">
|
|
<view class="name">{{ item.name }}</view>
|
|
<view class="ml-15">
|
|
<text>业务编号:</text>
|
|
<text v-if="item.contentIndex !== null">{{
|
|
item.contents[item.contentIndex].code
|
|
}}
|
|
</text>
|
|
</view>
|
|
<view class="server-item-content">
|
|
<text class="ml-15">服务项目:</text>
|
|
<el-select v-model="configList[index].contentIndex" clearable
|
|
:disabled="!contentList.includes(index)">
|
|
<el-option v-for="(content, contentIndex) in item.contents" :key="contentIndex"
|
|
:label="content.title" :value="contentIndex"/>
|
|
</el-select>
|
|
<template v-if="item.contentIndex !== null">
|
|
<el-select v-model="configList[index].amountIndex"
|
|
clearable class="ml-15">
|
|
<el-option
|
|
v-for="(amount, amountIndex) in item.contents[item.contentIndex].amountList"
|
|
:key="amountIndex"
|
|
:label="amount.title" :value="amountIndex"/>
|
|
</el-select>
|
|
</template>
|
|
</view>
|
|
<text>金额:</text>
|
|
<view class="ml-15" v-if="item.contentIndex !== null && item.amountIndex!== null">
|
|
{{ item.contents[item.contentIndex].amountList[item.amountIndex].amount }}元/次
|
|
</view>
|
|
<view class="ml-15" v-else>
|
|
元/次
|
|
</view>
|
|
</view>
|
|
<view class="remark">备注: {{ item.remark }}</view>
|
|
</view>
|
|
</el-checkbox>
|
|
</view>
|
|
<el-form ref="form" :model="form" label-width="200px">
|
|
<view v-for="(item, companyIndex) in companyList" :key="companyIndex">
|
|
<el-divider>{{ item.name }}</el-divider>
|
|
<el-form-item label="考察对象类型:" required>
|
|
<el-select v-model="companyList[companyIndex].type" placeholder="请选择考察对象类型">
|
|
<el-option label="企业" value="企业"></el-option>
|
|
<el-option label="个人" value="个人"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="`考察对象(${item.type}全称):`" required>
|
|
<el-input v-model="companyList[companyIndex].name"/>
|
|
</el-form-item>
|
|
<template v-if="item.type === '个人'">
|
|
<el-form-item label="考察对象(个人身份证): " required>
|
|
<el-input v-model="companyList[companyIndex].code"/>
|
|
</el-form-item>
|
|
<el-form-item label="考察对象所在地:" required>
|
|
<el-row :gutter="10">
|
|
<el-col :span="4">
|
|
<el-select v-model="addressIndex[companyIndex][0]" placeholder="请选择省">
|
|
<el-option v-for="(item, index) in provinceData" :key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-select v-model="addressIndex[companyIndex][1]" placeholder="请选择市"
|
|
:disabled="addressIndex[companyIndex].length === 0">
|
|
<template v-if="addressIndex[companyIndex][0] !== null">
|
|
<el-option v-for="(item, index) in cityData[addressIndex[companyIndex][0]]"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</template>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-select v-model="addressIndex[companyIndex][2]" placeholder="请选择区"
|
|
:disabled="addressIndex[companyIndex].length === 1">
|
|
<template
|
|
v-if="addressIndex[companyIndex][0] !== null && addressIndex[companyIndex][1] !== null">
|
|
<el-option
|
|
v-for="(item, index) in areaData[addressIndex[companyIndex][0]][addressIndex[companyIndex][1]]"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</template>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="11">
|
|
<el-input v-model="companyList[companyIndex].address" placeholder="请输入详细地址"/>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item label="本次服务费用小计:">
|
|
<view class="flex justify-between items-start mb-20 w-100p">
|
|
<view class="flex justify-start items-center">
|
|
<el-input v-model="amount" disabled/>
|
|
<view class="ml-20">
|
|
<el-button type="primary" plain @click.native="removeCompany(companyIndex)"
|
|
class="ml-20"
|
|
:disabled="companyList.length === 1">删除该对象
|
|
</el-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</el-form-item>
|
|
|
|
</view>
|
|
<el-divider/>
|
|
<el-button type="primary" @click.native="addCompany">增加考察对象
|
|
</el-button>
|
|
<el-form-item label="接收文件电子邮箱:" required>
|
|
<el-input v-model="email"/>
|
|
</el-form-item>
|
|
<el-form-item label="接收文件微信:" required>
|
|
<el-input v-model="wechat"/>
|
|
</el-form-item>
|
|
<el-form-item label="接收文件寄件地址" required>
|
|
<el-row :gutter="10">
|
|
<el-col :span="4">
|
|
<el-select v-model="receiveAddressIndex[0]" placeholder="请选择省">
|
|
<el-option v-for="(item, index) in provinceData" :key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-select v-model="receiveAddressIndex[1]" placeholder="请选择市"
|
|
:disabled="receiveAddressIndex.length === 0">
|
|
<template v-if="receiveAddressIndex[0] !== null">
|
|
<el-option
|
|
v-for="(item, index) in cityData[receiveAddressIndex[0]]"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</template>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="4">
|
|
<el-select v-model="receiveAddressIndex[2]" placeholder="请选择区"
|
|
:disabled="receiveAddressIndex.length === 1">
|
|
<template
|
|
v-if="receiveAddressIndex[0] !== null && receiveAddressIndex[1] !== null">
|
|
<el-option
|
|
v-for="(item, index) in areaData[receiveAddressIndex[0]][receiveAddressIndex[1]]"
|
|
:key="index"
|
|
:label="item.name"
|
|
:value="index">
|
|
</el-option>
|
|
</template>
|
|
</el-select>
|
|
</el-col>
|
|
<el-col :span="11">
|
|
<el-input v-model="receiveAddress"
|
|
placeholder="请输入详细地址"/>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form-item>
|
|
<p class="text-main text-25 text-center" style="margin-bottom: 80rpx">接收文件电子邮箱/ 接收文件微信/
|
|
接收文件寄件地址,以上三项选填一项即可</p>
|
|
<el-row :gutter="10">
|
|
<el-col :span="8" class="flex justify-start items-center">
|
|
<el-form-item label="申请人:" required>
|
|
<el-input v-model="requestName"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8" class="flex justify-start items-center">
|
|
<el-form-item label="业务联系人:" required>
|
|
<el-input v-model="contactName"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8" class="flex justify-start items-center">
|
|
<el-form-item label="业务咨询联系方式:" required>
|
|
<el-input v-model="contact"/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<!-- <el-col :span="8" class="flex justify-start items-center">-->
|
|
<!-- <el-form-item label="业务联系人:" required>-->
|
|
<!-- <el-select v-model="contactName" placeholder="点击选择业务联系人"-->
|
|
<!-- class="w-100p" @change="selectContact">-->
|
|
<!-- <el-option-->
|
|
<!-- v-for="(item, index) in contactList"-->
|
|
<!-- :key="index"-->
|
|
<!-- :label="item.name"-->
|
|
<!-- :value="item.name">-->
|
|
<!-- </el-option>-->
|
|
<!-- <view slot="empty" class="text-gray pointer p-20">-->
|
|
<!-- <text>无业务联系人,请到</text>-->
|
|
<!-- <text class="text-main mx-15" @click="navTo">个人中心</text>-->
|
|
<!-- <text>添加</text>-->
|
|
<!-- </view>-->
|
|
<!-- </el-select>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-col>-->
|
|
<!-- <el-col :span="8" class="flex justify-start items-center">-->
|
|
<!-- <el-form-item label="业务咨询联系方式:" required>-->
|
|
<!-- <el-input v-model="contact" type="number" disabled/>-->
|
|
<!-- </el-form-item>-->
|
|
<!-- </el-col>-->
|
|
</el-row>
|
|
<!-- <el-form-item label="联系方式:" required>-->
|
|
<!-- <el-input v-model="contact" disabled/>-->
|
|
<!-- </el-form-item>-->
|
|
</el-form>
|
|
<view class="mt-40 flex justify-center items-center">
|
|
<view class="flex justify-center items-center">
|
|
<text>总价:</text>
|
|
<text class="text-main font-bold text-35">{{ totalAmount }}元</text>
|
|
</view>
|
|
<view class="ml-35">客服联系方式: 0771-3923001</view>
|
|
</view>
|
|
<view class="flex justify-start items-center">
|
|
<el-checkbox v-model="agree">我已阅读并同意</el-checkbox>
|
|
<span class="text-main pointer font-bold" @click="showAgreement">《金久信自营交易协议》</span>
|
|
</view>
|
|
<view class="mt-40 flex justify-center items-center">
|
|
<el-button type="primary" @click="newOrder"
|
|
:disabled="companyList.length === 0 || !companyList[0].name || !agree">
|
|
立即支付
|
|
</el-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<gap/>
|
|
<common-footer></common-footer>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
|
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
|
import areas from "@/uni_modules/vk-uview-ui/libs/address/areas.json";
|
|
import Gap from "../../../components/gap/gap.vue";
|
|
|
|
export default {
|
|
name: "companyQuote",
|
|
components: {Gap},
|
|
data() {
|
|
return {
|
|
provinceData: provinces,
|
|
cityData: citys,
|
|
areaData: areas,
|
|
form: {},
|
|
configList: [],
|
|
checkList: [],
|
|
contentList: [],
|
|
contentNameList: [],
|
|
addressIndex: [[null, null, null]],
|
|
addressDetail: '',
|
|
receiveAddressIndex: [null, null, null],
|
|
receiveAddressDetail: '',
|
|
companyList: [
|
|
{
|
|
name: '',
|
|
code: '',
|
|
type: '企业',
|
|
addressRegion: {
|
|
province: null,
|
|
city: null,
|
|
area: null,
|
|
},
|
|
address: '',
|
|
}
|
|
],
|
|
email: '',
|
|
wechat: '',
|
|
receiveAddressRegion: {
|
|
province: null,
|
|
city: null,
|
|
area: null,
|
|
},
|
|
receiveAddress: '',
|
|
requestName: '',
|
|
contactName: '',
|
|
contact: '',
|
|
agreement: '',
|
|
agree: false,
|
|
contactList: []
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
async getConfigList() {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/coop/config/pub/getList',
|
|
data: {type: 0}
|
|
})
|
|
if (rows) {
|
|
this.configList = rows.map(item => {
|
|
item.contentIndex = null
|
|
item.amountIndex = null
|
|
return item
|
|
})
|
|
}
|
|
},
|
|
changeCheck(itemIndex, name) {
|
|
const index = this.contentList.indexOf(itemIndex)
|
|
if (index === -1) {
|
|
this.contentList.push(itemIndex)
|
|
this.contentNameList.push(name)
|
|
} else {
|
|
this.contentList.splice(index, 1)
|
|
this.contentNameList.splice(index, 1)
|
|
this.configList[itemIndex].contentIndex = null
|
|
this.configList[itemIndex].amountIndex = null
|
|
}
|
|
},
|
|
addCompany() {
|
|
this.companyList.push({
|
|
name: '',
|
|
code: '',
|
|
type: '企业',
|
|
addressRegion: {
|
|
province: null,
|
|
city: null,
|
|
area: null,
|
|
},
|
|
})
|
|
this.addressIndex.push([null, null, null])
|
|
this.receiveAddressIndex.push([null, null, null])
|
|
},
|
|
removeCompany(index) {
|
|
this.companyList.splice(index, 1)
|
|
this.addressIndex.splice(index, 1)
|
|
this.receiveAddressIndex.splice(index, 1)
|
|
},
|
|
async newOrder() {
|
|
const amountList = []
|
|
this.configList.forEach(item => {
|
|
item.contents.forEach((content, contentIndex) => {
|
|
if (contentIndex === item.contentIndex && content.amountList.length > 0) {
|
|
content.amountList.forEach((amount, amountIndex) => {
|
|
if (amountIndex === item.amountIndex) {
|
|
amountList.push(`${content._index},${amount._index}`)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
if (amountList.length === 0) return this.$message({
|
|
message: '请至少选择一项服务',
|
|
type: 'error'
|
|
})
|
|
// if (this.addressIndex[0][2] === null) return this.$message({
|
|
// message: '请选择地址',
|
|
// type: 'error'
|
|
// })
|
|
if (!this.email && !this.wechat && this.receiveAddressIndex[0][2] === null) return this.$message({
|
|
message: '请选择接收文件地址/微信/邮箱',
|
|
type: 'error'
|
|
})
|
|
this.companyList.forEach((item, index) => {
|
|
if (this.addressIndex[index][2]) {
|
|
const companyProvince = this.provinceData[this.addressIndex[index][0]]
|
|
const companyCity = this.cityData[this.addressIndex[index][0]][this.addressIndex[index][1]]
|
|
const companyArea = this.areaData[this.addressIndex[index][0]][this.addressIndex[index][1]][this.addressIndex[index][2]]
|
|
this.companyList[index].addressRegion = {
|
|
province: {code: companyProvince.code, name: companyProvince.name},
|
|
city: {code: companyCity.code, name: companyCity.name},
|
|
area: {code: companyArea.code, name: companyArea.name},
|
|
}
|
|
}
|
|
})
|
|
for (let i = 0; i < this.companyList.length; i++) {
|
|
if (!this.companyList[i].name) return this.$message({
|
|
message: '请填写考察对象名称',
|
|
type: 'error'
|
|
})
|
|
if (this.companyList[i].type === '个人') {
|
|
if (!this.companyList[i].code) return this.$message({
|
|
type: 'error',
|
|
message: '请填写考察个人身份证号',
|
|
})
|
|
if (!this.companyList[i].address) return this.$message({
|
|
type: 'error',
|
|
message: '请填写个人地址',
|
|
})
|
|
if (this.addressIndex[i][2] === null) return this.$message({
|
|
type: 'error',
|
|
message: '请填写个人地址',
|
|
})
|
|
}
|
|
}
|
|
if (!this.requestName) return this.$message({
|
|
type: 'error',
|
|
message: '请填写申请人',
|
|
})
|
|
if (!this.contactName) return this.$message({
|
|
type: 'error',
|
|
message: '请填写业务联系人姓名',
|
|
})
|
|
if (!this.contact) return this.$message({
|
|
type: 'error',
|
|
message: '请填写联系人电话',
|
|
})
|
|
if (this.receiveAddressIndex.length > 0 && this.receiveAddressIndex[2] !== null) {
|
|
const province = this.provinceData[this.receiveAddressIndex[0]]
|
|
const city = this.cityData[this.receiveAddressIndex[0]][this.receiveAddressIndex[1]]
|
|
const area = this.areaData[this.receiveAddressIndex[0]][this.receiveAddressIndex[1]][this.receiveAddressIndex[2]]
|
|
this.receiveAddressRegion = {
|
|
province: {code: province.code, name: province.name},
|
|
city: {code: city.code, name: city.name},
|
|
area: {code: area.code, name: area.name},
|
|
}
|
|
}
|
|
const {data} = await vk.callFunction({
|
|
url: 'client/selfSupport/kh/addOrder',
|
|
title: '提交中...',
|
|
data: {
|
|
type: 0,
|
|
amountList,
|
|
contentList: this.companyList,
|
|
receiveAddressRegion: this.receiveAddressRegion,
|
|
email: this.email,
|
|
wechat: this.wechat,
|
|
receiveAddress: this.receiveAddress,
|
|
requestName: this.requestName,
|
|
contactName: this.contactName,
|
|
contact: this.contact,
|
|
}
|
|
})
|
|
vk.navigateTo({
|
|
url: `/pages/index/shop/pay?id=${data}`
|
|
})
|
|
},
|
|
showAgreement() {
|
|
this.$confirm(this.agreement, '金久信自营交易协议', {
|
|
cancelButtonText: '关闭',
|
|
showConfirmButton: false,
|
|
dangerouslyUseHTMLString: true,
|
|
})
|
|
},
|
|
async getAgreement() {
|
|
const res = await vk.callFunction({
|
|
url: 'client/dict/pub/getDetail',
|
|
data: {
|
|
id: '65885d4c09664c1c8d8e8476'
|
|
},
|
|
})
|
|
this.agreement = res.content
|
|
},
|
|
demoDownload() {
|
|
vk.callFunction({
|
|
url: 'client/dict/pub/getDetail',
|
|
data: {
|
|
id: '6588642a99c624e89199fbb4'
|
|
},
|
|
success: res => {
|
|
window.open(res.content)
|
|
}
|
|
})
|
|
},
|
|
async getContactList() {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/businessContact/kh/getList',
|
|
})
|
|
this.contactList = rows
|
|
},
|
|
navTo() {
|
|
vk.navigateTo({url: '/pages/user/user?menu=business-contact'})
|
|
},
|
|
selectContact(name) {
|
|
const contact = this.contactList.find(item => item.name === name)
|
|
this.contact = contact.phone
|
|
}
|
|
},
|
|
onLoad() {
|
|
const userInfo = vk.getVuex('$user.userInfo')
|
|
if (parseInt(userInfo.accountType) === 2) {
|
|
this.email = userInfo.company.contactEmail
|
|
this.requestName = userInfo.manager.personName
|
|
this.contactName = userInfo.manager.personName
|
|
this.contact = userInfo.company.mobile
|
|
if (userInfo.company && userInfo.company.addressRegion) {
|
|
this.receiveAddressIndex[0] = this.provinceData.findIndex(item => item.name === userInfo.company.addressRegion.province.name)
|
|
this.receiveAddressIndex[1] = this.cityData[this.receiveAddressIndex[0]].findIndex(item => item.name === userInfo.company.addressRegion.city.name)
|
|
this.receiveAddressIndex[2] = this.areaData[this.receiveAddressIndex[0]][this.receiveAddressIndex[1]].findIndex(item => item.name === userInfo.company.addressRegion.area.name)
|
|
}
|
|
if (userInfo.company.addressDetail) this.receiveAddress = userInfo.company.addressDetail
|
|
} else {
|
|
if (userInfo.businessCard && userInfo.businessCard.email) this.email = userInfo.businessCard.email
|
|
this.requestName = userInfo.person.personName
|
|
this.contactName = userInfo.person.personName
|
|
this.contact = userInfo.person.mobile
|
|
if (userInfo.person && userInfo.person.addressRegion) {
|
|
this.receiveAddressIndex[0] = this.provinceData.findIndex(item => item.name === userInfo.person.addressRegion.province.name)
|
|
this.receiveAddressIndex[1] = this.cityData[this.receiveAddressIndex[0]].findIndex(item => item.name === userInfo.person.addressRegion.city.name)
|
|
this.receiveAddressIndex[2] = this.areaData[this.receiveAddressIndex[0]][this.receiveAddressIndex[1]].findIndex(item => item.name === userInfo.person.addressRegion.area.name)
|
|
}
|
|
if (userInfo.person.addressDetail) this.receiveAddress = userInfo.person.addressDetail
|
|
}
|
|
this.getAgreement()
|
|
this.getConfigList()
|
|
// this.getContactList()
|
|
},
|
|
computed: {
|
|
amount() {
|
|
let tmpAmount = 0
|
|
this.configList.forEach(item => {
|
|
item.contents.forEach((content, contentIndex) => {
|
|
if (contentIndex === item.contentIndex && content.amountList.length > 0) {
|
|
content.amountList.forEach((amount, amountIndex) => {
|
|
if (amountIndex === item.amountIndex) {
|
|
tmpAmount += parseFloat(amount.amount)
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
return tmpAmount
|
|
},
|
|
totalAmount() {
|
|
return this.amount * this.companyList.length
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.server-item {
|
|
background-color: #fbf8f8;
|
|
border: 2px solid #fbebf1;
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
|
|
.items-center {
|
|
width: 1100px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex: 1;
|
|
|
|
view {
|
|
width: 300px;
|
|
}
|
|
|
|
.ml-35 {
|
|
font-weight: normal;
|
|
font-size: 13px;
|
|
}
|
|
}
|
|
|
|
.server-item-content {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 600px !important;
|
|
}
|
|
|
|
.remark {
|
|
color: #999999;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.divider-title {
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
}
|
|
</style> |