530 lines
19 KiB
Vue
530 lines
19 KiB
Vue
<template>
|
|
<view>
|
|
<u-sticky offset-top="0" customNavHeight="0">
|
|
<!-- 顶部 -->
|
|
<uititle title="检测产品"></uititle>
|
|
</u-sticky>
|
|
<view class="p-30">
|
|
<view class="flex justify-end items-center text-main pointer my-20 " @click="demoDownload">示例下载</view>
|
|
<view v-for="(item, index) in configList" :key="index"
|
|
class="server-item my-20" :class="{'text-main': contentList.includes(index)}">
|
|
<u-checkbox-group>
|
|
<u-checkbox @change="changeCheck(index, item.name)">
|
|
</u-checkbox>
|
|
<view class="flex flex-col justify-start items-start ml-15">
|
|
<view class="flex flex-col justify-start items-start text-30 mb-20">
|
|
<view class="font-bold">{{ item.name }}</view>
|
|
<view class="mt-15">
|
|
<text>业务编号:</text>
|
|
<text v-if="item.contentIndex !== null">{{
|
|
item.contents[item.contentIndex].code
|
|
}}
|
|
</text>
|
|
</view>
|
|
<view class="server-item-content">
|
|
<text class="mr-15">服务服务项目:</text>
|
|
<u-icon v-if="configList[index].contentIndex === null"
|
|
label="点击选择"
|
|
name="arrow-down" label-pos="left" @click="selectContent(index)"/>
|
|
<view class="flex flex-col justify-start items-start text-25" v-else>
|
|
<text class="my-10">{{ item.contents[item.contentIndex].title }}</text>
|
|
<text>{{ item.contents[item.contentIndex].amountList[item.amountIndex].title }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<text class="mt-15">金额:</text>
|
|
<view class="mt-15" v-if="configList[index].contentIndex !== null">
|
|
{{
|
|
item.contents[item.contentIndex].amountList[item.amountIndex].amount
|
|
}}元/次
|
|
</view>
|
|
<view class="mt-15" v-else>
|
|
元/次
|
|
</view>
|
|
</view>
|
|
<text class="remark text-25 my-15">备注: {{ item.remark }}</text>
|
|
<u-button type="primary" size="small"
|
|
@click="addToAmountList(index, configList[index].contentIndex, item.amountIndex)"
|
|
:disabled="item.amountIndex === null">
|
|
添加
|
|
</u-button>
|
|
</view>
|
|
</u-checkbox-group>
|
|
</view>
|
|
|
|
<view class="card">
|
|
<u-form ref="form" :model="form" label-width="180rpx">
|
|
<view v-for="(item, companyIndex) in productList" :key="companyIndex">
|
|
<u-form-item label="检测产品" required>
|
|
<u-input v-model="productList[companyIndex].name"/>
|
|
</u-form-item>
|
|
<u-form-item label="检测内容" required>
|
|
{{ contentNameList.join() }}
|
|
</u-form-item>
|
|
<u-form-item label="取样所在地" required @click.native="showAddress(companyIndex)">
|
|
<u-input v-model="productList[companyIndex].region" readonly placeholder="点击选择区域"
|
|
style="pointer-events:none"/>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="取样详细地址:" required>
|
|
<u-input v-model="productList[companyIndex].address" placeholder="请输入详细地址"/>
|
|
</u-form-item>
|
|
<view class="ml-20">
|
|
<u-button type="primary" size="mini" plain @click.native="removeCompany(companyIndex)"
|
|
:disabled="productList.length === 1">删除该对象
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
<u-divider/>
|
|
<u-form-item label="本次服务费用小计:">
|
|
<view class="flex justify-between items-start mb-20 w-100p">
|
|
<view class="flex justify-end items-center">
|
|
<text>￥{{ amount ? amount.toFixed(2) : 0 }}</text>
|
|
<view class="ml-20">
|
|
<u-button type="primary" size="mini" @click.native="addCompany">增加考察对象
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="接收文件电子邮箱:" required>
|
|
<u-input v-model="email"/>
|
|
</u-form-item>
|
|
<u-form-item label="接收文件微信:" required>
|
|
<u-input v-model="wechat"/>
|
|
</u-form-item>
|
|
<u-form-item label="接收文件寄件地址" required @click.native="showReceiveAddress">
|
|
<u-input v-model="region" readonly placeholder="点击选择区域" style="pointer-events:none"/>
|
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
|
</u-form-item>
|
|
<u-form-item label="详细地址:" required>
|
|
<u-input v-model="receiveAddress" placeholder="请输入详细地址"/>
|
|
</u-form-item>
|
|
<p class="text-main text-25 text-center" style="margin-bottom: 80rpx">接收文件电子邮箱/ 接收文件微信/
|
|
接收文件寄件地址,以上三项选填一项即可</p>
|
|
<u-form-item label="申请人:" required>
|
|
<u-input v-model="requestName"/>
|
|
</u-form-item>
|
|
<u-form-item label="业务联系人:" required>
|
|
<u-input v-model="contactName"/>
|
|
</u-form-item>
|
|
<u-form-item label="业务咨询联系方式:" required>
|
|
<u-input v-model="contact"/>
|
|
</u-form-item>
|
|
<u-form-item label="备注:">
|
|
<u-input v-model="remark"/>
|
|
</u-form-item>
|
|
<view class="mt-20">
|
|
<view>已选项目:</view>
|
|
<view v-for="(item, index) in amountList" :key="index" class="mt-20 flex justify-start items-center">
|
|
<view>
|
|
<u-button type="primary" size="small" @click="removeFromAmountList(index)">删除</u-button>
|
|
</view>
|
|
<view class="ml-20 text-25" v-if="configList[item.index]">
|
|
<text>{{ configList[item.index].name }} --</text>
|
|
<text>{{ configList[item.index].contents[item.contentIndex].title }} --</text>
|
|
<text>{{
|
|
configList[item.index].contents[item.contentIndex].amountList[item.amountIndex].title
|
|
}},{{ configList[item.index].contents[item.contentIndex].amountList[item.amountIndex].amount }}元
|
|
</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="mt-40 flex justify-center items-center text-25">
|
|
<view class="flex justify-center items-center">
|
|
<text>总价:</text>
|
|
<text class="text-main font-bold text-35">{{ totalAmount }}元</text>
|
|
</view>
|
|
<view class="ml-35">客服联系方式: 400-686-5559</view>
|
|
</view>
|
|
<view class="flex justify-start items-center text-25 mt-40">
|
|
<el-checkbox v-model="agree">我已阅读并同意</el-checkbox>
|
|
<span class="text-main font-bold" @click="show = true">《金久信自营交易协议》</span>
|
|
</view>
|
|
<view class="mt-40 flex justify-center items-center text-25">
|
|
<u-button type="primary" @click="newOrder"
|
|
:disabled="productList.length === 0 || !productList[0].name || !agree">
|
|
立即支付
|
|
</u-button>
|
|
</view>
|
|
</u-form>
|
|
</view>
|
|
</view>
|
|
<AddressSelect ref="AddressSelect" @confirm="regionConfirm"/>
|
|
<AddressSelect ref="ReceiveAddress" @confirm="regionReceiveConfirm"/>
|
|
<!-- <u-picker :show="showPicker" :columns="amountItemList" keyName="title"-->
|
|
<!-- @cancel="showPicker = false" @close="showPicker = false" closeOnClickOverlay-->
|
|
<!-- @confirm="confirm"></u-picker>-->
|
|
<u-popup closeable :show="showPicker"
|
|
round="10"
|
|
mode="center"
|
|
:custom-style="{width: '80%'}"
|
|
@close="showPicker = false">
|
|
<view style="height: 60vh; overflow-y: scroll">
|
|
<view class="flex flex-col p-20 border-bottom" v-for="(item, index) in amountItemList[0]" :key="index">
|
|
<text class="font-bold text-30">{{ item.title }}</text>
|
|
<view class="border rounded p-20 my-15 flex justify-between items-center"
|
|
:class="[amountList.find(amount => amount.index === index && amount.contentIndex === amountIndex) ? 'amount-active' : '']"
|
|
@click="confirm({indexs: [index, amountIndex]})"
|
|
v-for="(amount, amountIndex) in item.amountList" :key="amountIndex">
|
|
<text>{{ amount.title }}</text>
|
|
<text class="text-24"
|
|
v-if="amountList.find(amount => amount.index === index && amount.contentIndex === amountIndex)">已选择
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<u-popup closeable :show="show"
|
|
round="10"
|
|
mode="center"
|
|
:custom-style="{width: '80%'}"
|
|
@close="show = false">
|
|
<view style="height: 60vh; overflow-y: scroll" class="p-25">
|
|
<u-parse :content="agreement"></u-parse>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uititle from "@/components/common/title.vue";
|
|
import AddressSelect from "@/components/AddressSelect.vue";
|
|
|
|
export default {
|
|
name: "companyQuote",
|
|
components: {AddressSelect, uititle},
|
|
data() {
|
|
return {
|
|
form: {},
|
|
configList: [],
|
|
checkList: [],
|
|
contentList: [],
|
|
addressIndex: [[null, null, null]],
|
|
addressDetail: '',
|
|
receiveAddressIndex: [null, null, null],
|
|
receiveAddressDetail: '',
|
|
clickedCompanyIndex: null,
|
|
productList: [
|
|
{
|
|
name: '',
|
|
code: '',
|
|
addressRegion: {
|
|
province: null,
|
|
city: null,
|
|
area: null,
|
|
},
|
|
address: '',
|
|
region: '',
|
|
}
|
|
],
|
|
email: '',
|
|
wechat: '',
|
|
receiveAddressRegion: {
|
|
province: null,
|
|
city: null,
|
|
area: null,
|
|
},
|
|
receiveAddress: '',
|
|
requestName: '',
|
|
contactName: '',
|
|
contact: '',
|
|
remark: '',
|
|
agreement: '',
|
|
agree: false,
|
|
showPicker: false,
|
|
amountList: [],
|
|
amountItemList: [],
|
|
selectedAmountList: [],
|
|
contentNameList: [],
|
|
clickedContentIndex: 0,
|
|
region: '',
|
|
show: false,
|
|
}
|
|
},
|
|
methods: {
|
|
async getConfigList() {
|
|
const {rows} = await vk.callFunction({
|
|
url: 'client/coop/config/pub/getList',
|
|
data: {type: 1}
|
|
})
|
|
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.productList.push({
|
|
name: '',
|
|
code: '',
|
|
addressRegion: {
|
|
province: null,
|
|
city: null,
|
|
area: null,
|
|
},
|
|
region: ''
|
|
})
|
|
},
|
|
removeCompany(index) {
|
|
if (this.productList.length === 1) return
|
|
this.productList.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(amount._index)
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|
|
// })
|
|
if (this.amountList.length === 0) return this.$message({
|
|
message: '请至少选择一项服务',
|
|
type: 'error'
|
|
})
|
|
if (!this.email && !this.wechat && !this.receiveAddressRegion.province) return this.$message({
|
|
message: '请选择接收文件地址/微信/邮箱',
|
|
type: 'error'
|
|
})
|
|
for (let i = 0; i < this.productList.length; i++) {
|
|
if (!this.productList[i].name) return this.$message({
|
|
message: '请填写考察产品名称',
|
|
type: 'error'
|
|
})
|
|
if (!this.productList[i].address) return this.$message({
|
|
type: 'error',
|
|
message: '请填写产品取样地址',
|
|
})
|
|
if (!this.productList[i].addressRegion.province) 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: '请填写联系人电话',
|
|
})
|
|
const {data} = await vk.callFunction({
|
|
url: 'client/selfSupport/kh/addOrder',
|
|
title: '提交中...',
|
|
data: {
|
|
type: 1,
|
|
amountList: this.amountList.map(item => `${item.contentIndexVal},${item.amountIndexVal}`),
|
|
contentList: this.productList,
|
|
receiveAddressRegion: this.receiveAddressRegion,
|
|
email: this.email,
|
|
wechat: this.wechat,
|
|
receiveAddress: this.receiveAddress,
|
|
requestName: this.requestName,
|
|
contactName: this.contactName,
|
|
contact: this.contact,
|
|
remark: this.remark,
|
|
}
|
|
})
|
|
vk.navigateTo({
|
|
url: `/pages/shop/pay?id=${data}`
|
|
})
|
|
},
|
|
showAgreement() {
|
|
this.$confirm(`<div style="width: 95vw">${this.agreement}</div>`, '金久信自营交易协议', {
|
|
cancelButtonText: '关闭',
|
|
showConfirmButton: false,
|
|
dangerouslyUseHTMLString: true,
|
|
})
|
|
},
|
|
async getAgreement() {
|
|
const res = await vk.callFunction({
|
|
url: 'client/dict/pub/getDetail',
|
|
data: {
|
|
id: '65885d4c09664c1c8d8e8476'
|
|
},
|
|
})
|
|
this.agreement = res.content
|
|
},
|
|
confirm({indexs}) {
|
|
if (this.amountList.find(amount => amount.index === indexs[0] && amount.contentIndex === indexs[1])) return
|
|
uni.showToast({
|
|
title: '已选择',
|
|
icon: 'none'
|
|
})
|
|
this.configList[this.clickedContentIndex].contentIndex = indexs[0]
|
|
this.configList[this.clickedContentIndex].amountIndex = indexs[1]
|
|
this.showPicker = false
|
|
console.log(this.configList)
|
|
},
|
|
selectContent(index) {
|
|
console.log(this.configList[index].contents)
|
|
this.clickedContentIndex = index
|
|
this.amountItemList = [this.configList[index].contents, this.configList[index].contents[0].amountList]
|
|
this.showPicker = true
|
|
},
|
|
showAddress(index) {
|
|
this.clickedCompanyIndex = index
|
|
this.$refs.AddressSelect.open(this.productList[index].addressRegion);
|
|
},
|
|
regionConfirm({province, city, area}) {
|
|
this.productList[this.clickedCompanyIndex].addressRegion = {province, city, area}
|
|
this.productList[this.clickedCompanyIndex].region = `${province.name} ${city.name} ${area.name}`
|
|
},
|
|
showReceiveAddress() {
|
|
this.$refs.ReceiveAddress.open(this.receiveAddress);
|
|
},
|
|
regionReceiveConfirm({province, city, area}) {
|
|
this.receiveAddressRegion = {province, city, area}
|
|
this.region = `${province.name} ${city.name} ${area.name}`
|
|
},
|
|
addToAmountList(index, contentIndex, amountIndex) {
|
|
this.amountList.push({
|
|
index,
|
|
contentIndex,
|
|
amountIndex,
|
|
contentIndexVal: this.configList[index].contents[contentIndex]._index,
|
|
amountIndexVal: this.configList[index].contents[contentIndex].amountList[amountIndex]._index,
|
|
amount: this.configList[index].contents[contentIndex].amountList[amountIndex].amount
|
|
})
|
|
this.configList[index].contentIndex = null
|
|
this.configList[index].amountIndex = null
|
|
},
|
|
removeFromAmountList(index) {
|
|
this.amountList.splice(index, 1)
|
|
},
|
|
demoDownload() {
|
|
vk.callFunction({
|
|
url: 'client/dict/pub/getDetail',
|
|
data: {
|
|
id: '6588648da7c432e4a360bb34'
|
|
},
|
|
success: res => {
|
|
window.location.href = res.content
|
|
// window.open(res.content)
|
|
}
|
|
})
|
|
}
|
|
},
|
|
onLoad() {
|
|
const userInfo = vk.getStorageSync('uni_id_user_info')
|
|
// console.log('userInfo', 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
|
|
} else {
|
|
this.requestName = userInfo.person.personName
|
|
this.contactName = userInfo.person.personName
|
|
this.contact = userInfo.person.personName
|
|
this.email = userInfo.person.mobile
|
|
}
|
|
this.getAgreement()
|
|
this.getConfigList()
|
|
},
|
|
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)
|
|
// }
|
|
// })
|
|
// }
|
|
// })
|
|
// })
|
|
this.amountList.forEach(item => {
|
|
tmpAmount += item.amount
|
|
})
|
|
return tmpAmount
|
|
},
|
|
totalAmount() {
|
|
return this.amount * this.productList.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 {
|
|
align-items: center;
|
|
margin-top: 15rpx;
|
|
display: inline-block;
|
|
word-break: break-all;
|
|
white-space: normal;
|
|
width: 600rpx !important;
|
|
}
|
|
|
|
.remark {
|
|
color: #999999;
|
|
font-weight: normal;
|
|
display: inline-block;
|
|
width: 600rpx !important;
|
|
word-break: break-all;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
.divider-title {
|
|
font-size: 17px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.amount-active {
|
|
background-color: #fdd7d6;
|
|
border-color: #a92924;
|
|
color: #a92924
|
|
}
|
|
</style> |