美化页面UI
This commit is contained in:
gxwebsoft
@@ -7,11 +7,11 @@
|
|||||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||||
<view class="bg-white p-40">
|
<view class="bg-white p-40">
|
||||||
<view v-for="(item, index) in configList" :key="index"
|
<view v-for="(item, index) in configList" :key="index"
|
||||||
class="my-20 flex flex-col justify-start items-start">
|
class="server-item my-20 flex flex-col justify-start items-start">
|
||||||
<el-checkbox @change="changeCheck(index)">
|
<el-checkbox @change="changeCheck(index)">
|
||||||
<view class="flex flex-col justify-start items-start">
|
<view class="flex flex-col justify-start items-start">
|
||||||
<view class="flex justify-start items-center text-35 mb-20">
|
<view class="flex justify-start items-center text-35 mb-20">
|
||||||
<text>服务内容:{{ item.name }}</text>
|
<view class="name">{{ item.name }}</view>
|
||||||
<view class="ml-35">
|
<view class="ml-35">
|
||||||
<text>业务编号:</text>
|
<text>业务编号:</text>
|
||||||
<text v-if="item.contentIndex !== null">{{
|
<text v-if="item.contentIndex !== null">{{
|
||||||
@@ -19,21 +19,27 @@
|
|||||||
}}
|
}}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex justify-start items-center">
|
<view class="server-item-content">
|
||||||
<text class="ml-35">服务服务项目:</text>
|
<text class="ml-35">服务服务项目:</text>
|
||||||
<el-select v-model="configList[index].contentIndex" clearable>
|
<el-select v-model="configList[index].contentIndex" clearable>
|
||||||
<el-option v-for="(content, contentIndex) in item.contents" :key="contentIndex"
|
<el-option v-for="(content, contentIndex) in item.contents" :key="contentIndex"
|
||||||
:label="content.title" :value="contentIndex"/>
|
:label="content.title" :value="contentIndex"/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</view>
|
</view>
|
||||||
<text class="ml-35" v-if="item.contentIndex !== null">
|
<view class="ml-35" v-if="item.contentIndex !== null">
|
||||||
{{ item.contents[item.contentIndex].amount }}元/次
|
{{ item.contents[item.contentIndex].amount }}元/次
|
||||||
</text>
|
</view>
|
||||||
|
<view class="ml-35" v-else>
|
||||||
|
元/次
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view>备注: {{ item.remark }}</view>
|
<view class="remark">备注: {{ item.remark }}</view>
|
||||||
</view>
|
</view>
|
||||||
</el-checkbox>
|
</el-checkbox>
|
||||||
</view>
|
</view>
|
||||||
|
<gap height="20"></gap>
|
||||||
|
<el-divider content-position="center"><span class="divider-title">请您要选择的产品</span></el-divider>
|
||||||
|
<gap height="30"></gap>
|
||||||
<el-form ref="form" :model="form" label-width="200px">
|
<el-form ref="form" :model="form" label-width="200px">
|
||||||
<view v-for="(item, index) in companyList" :key="index">
|
<view v-for="(item, index) in companyList" :key="index">
|
||||||
<el-form-item label="考察对象(个人/企业全称):" required>
|
<el-form-item label="考察对象(个人/企业全称):" required>
|
||||||
@@ -204,3 +210,42 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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;
|
||||||
|
}
|
||||||
|
.remark{
|
||||||
|
color: #999999;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.divider-title{
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,189 +1,233 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<top-bar></top-bar>
|
<top-bar></top-bar>
|
||||||
<common-header></common-header>
|
<common-header></common-header>
|
||||||
<category-bar></category-bar>
|
<category-bar></category-bar>
|
||||||
<view class="w-1200 m-a">
|
<view class="w-1200 m-a">
|
||||||
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
<u-swiper :list="list" :height="380" borderRadius="0"></u-swiper>
|
||||||
<view class="bg-white p-40">
|
<view class="bg-white p-40">
|
||||||
<view v-for="(item, index) in configList" :key="index"
|
<view v-for="(item, index) in configList" :key="index"
|
||||||
class="my-20 flex flex-col justify-start items-start">
|
class="server-item my-20 flex flex-col justify-start items-start">
|
||||||
<el-checkbox @change="changeCheck(index)">
|
<el-checkbox @change="changeCheck(index)">
|
||||||
<view class="flex flex-col justify-start items-start">
|
<view class="flex flex-col justify-start items-start">
|
||||||
<view class="flex justify-start items-center text-35 mb-20">
|
<view class="flex justify-start items-center text-35 mb-20">
|
||||||
<text>服务内容:{{ item.name }}</text>
|
<view class="name">{{ item.name }}</view>
|
||||||
<view class="ml-35">
|
<view class="ml-35">
|
||||||
<text>业务编号:</text>
|
<text>业务编号:</text>
|
||||||
<text v-if="item.contentIndex !== null">{{
|
<text v-if="item.contentIndex !== null">{{
|
||||||
item.contents[item.contentIndex].code
|
item.contents[item.contentIndex].code
|
||||||
}}
|
}}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex justify-start items-center">
|
<view class="server-item-content">
|
||||||
<text class="ml-35">服务服务项目:</text>
|
<text class="ml-35">服务服务项目:</text>
|
||||||
<el-select v-model="configList[index].contentIndex" clearable>
|
<el-select v-model="configList[index].contentIndex" clearable>
|
||||||
<el-option v-for="(content, contentIndex) in item.contents" :key="contentIndex"
|
<el-option v-for="(content, contentIndex) in item.contents" :key="contentIndex"
|
||||||
:label="content.title" :value="contentIndex"/>
|
:label="content.title" :value="contentIndex" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</view>
|
</view>
|
||||||
<text class="ml-35" v-if="item.contentIndex !== null">
|
<view class="ml-35" v-if="item.contentIndex !== null">
|
||||||
{{ item.contents[item.contentIndex].amount }}元/次
|
{{ item.contents[item.contentIndex].amount }}元/次
|
||||||
</text>
|
</view>
|
||||||
</view>
|
<view class="ml-35" v-else>
|
||||||
<view>备注: {{ item.remark }}</view>
|
元/次
|
||||||
</view>
|
</view>
|
||||||
</el-checkbox>
|
</view>
|
||||||
</view>
|
<view class="remark">备注: {{ item.remark }}</view>
|
||||||
<el-form ref="form" :model="form" label-width="200px">
|
</view>
|
||||||
<view v-for="(item, index) in productList" :key="index">
|
</el-checkbox>
|
||||||
<el-form-item label="检测产品:" required>
|
</view>
|
||||||
<el-input v-model="productList[index].name"/>
|
<gap height="20"></gap>
|
||||||
</el-form-item>
|
<el-divider content-position="center"><span class="divider-title">请您要选择的产品</span></el-divider>
|
||||||
<el-form-item label="检测内容">
|
<gap height="30"></gap>
|
||||||
{{ contentNameList.join() }}
|
<el-form ref="form" :model="form" label-width="200px">
|
||||||
</el-form-item>
|
<view v-for="(item, index) in productList" :key="index">
|
||||||
<el-form-item label="取样所在地">
|
<el-form-item label="检测产品:" required>
|
||||||
<el-input v-model="productList[index].address"/>
|
<el-input v-model="productList[index].name" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="接收文件电子邮箱:">
|
<el-form-item label="检测内容">
|
||||||
<el-input v-model="productList[index].email"/>
|
{{ contentNameList.join() }}
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="接收文件微信:">
|
<el-form-item label="取样所在地">
|
||||||
<el-input v-model="productList[index].wechat"/>
|
<el-input v-model="productList[index].address" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="接收文件寄件地址">
|
<el-form-item label="接收文件电子邮箱:">
|
||||||
<el-input v-model="productList[index].receiveAddress"/>
|
<el-input v-model="productList[index].email" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="申请人:">
|
<el-form-item label="接收文件微信:">
|
||||||
<el-input v-model="productList[index].requestName"/>
|
<el-input v-model="productList[index].wechat" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="联系人:">
|
<el-form-item label="接收文件寄件地址">
|
||||||
<el-input v-model="productList[index].contactName"/>
|
<el-input v-model="productList[index].receiveAddress" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="联系方式:">
|
<el-form-item label="申请人:">
|
||||||
<el-input v-model="productList[index].contact"/>
|
<el-input v-model="productList[index].requestName" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="本次服务费用小计:">
|
<el-form-item label="联系人:">
|
||||||
<view class="flex justify-between items-start mb-20 w-100p">
|
<el-input v-model="productList[index].contactName" />
|
||||||
<view class="flex justify-start items-center">
|
</el-form-item>
|
||||||
<el-input v-model="amount" disabled/>
|
<el-form-item label="联系方式:">
|
||||||
<view class="ml-20">
|
<el-input v-model="productList[index].contact" />
|
||||||
<el-button type="primary" @click.native="addCompany">增加考察对象
|
</el-form-item>
|
||||||
</el-button>
|
<el-form-item label="本次服务费用小计:">
|
||||||
</view>
|
<view class="flex justify-between items-start mb-20 w-100p">
|
||||||
<view class="ml-20">
|
<view class="flex justify-start items-center">
|
||||||
<el-button type="primary" plain @click.native="removeCompany(index)"
|
<el-input v-model="amount" disabled />
|
||||||
class="ml-20"
|
<view class="ml-20">
|
||||||
:disabled="productList.length === 1">删除该对象
|
<el-button type="primary" @click.native="addCompany">增加考察对象
|
||||||
</el-button>
|
</el-button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="ml-20">
|
||||||
</view>
|
<el-button type="primary" plain @click.native="removeCompany(index)"
|
||||||
</el-form-item>
|
class="ml-20" :disabled="productList.length === 1">删除该对象
|
||||||
</view>
|
</el-button>
|
||||||
</el-form>
|
</view>
|
||||||
<view class="mt-40 flex justify-center items-center">
|
</view>
|
||||||
<view class="flex justify-center items-center">
|
</view>
|
||||||
<text>总价:</text>
|
</el-form-item>
|
||||||
<text class="text-main font-bold text-35">{{ totalAmount }}元</text>
|
</view>
|
||||||
</view>
|
</el-form>
|
||||||
<view class="ml-35">客服联系方式: 0771-3923001</view>
|
<view class="mt-40 flex justify-center items-center">
|
||||||
</view>
|
<view class="flex justify-center items-center">
|
||||||
<view class="mt-40 flex justify-center items-center">
|
<text>总价:</text>
|
||||||
<el-button type="primary" :disabled="contentList.length === 0 || productList.length === 0 || !productList[0].name">立即支付
|
<text class="text-main font-bold text-35">{{ totalAmount }}元</text>
|
||||||
</el-button>
|
</view>
|
||||||
</view>
|
<view class="ml-35">客服联系方式: 0771-3923001</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="mt-40 flex justify-center items-center">
|
||||||
<common-footer></common-footer>
|
<el-button type="primary"
|
||||||
</view>
|
:disabled="contentList.length === 0 || productList.length === 0 || !productList[0].name">立即支付
|
||||||
|
</el-button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<common-footer></common-footer>
|
||||||
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: "productQuote",
|
name: "productQuote",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list: [
|
list: [{
|
||||||
{
|
image: '/static/images/selfSupport/swiper.jpg',
|
||||||
image: '/static/images/selfSupport/swiper.jpg',
|
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
}, ],
|
||||||
},
|
form: {},
|
||||||
],
|
configList: [],
|
||||||
form: {},
|
checkList: [],
|
||||||
configList: [],
|
contentList: [],
|
||||||
checkList: [],
|
contentNameList: [],
|
||||||
contentList: [],
|
productList: [{
|
||||||
contentNameList: [],
|
name: '',
|
||||||
productList: [
|
code: '',
|
||||||
{
|
address: '',
|
||||||
name: '',
|
email: '',
|
||||||
code: '',
|
wechat: '',
|
||||||
address: '',
|
receiveAddress: '',
|
||||||
email: '',
|
requestName: '',
|
||||||
wechat: '',
|
contactName: '',
|
||||||
receiveAddress: '',
|
contact: '',
|
||||||
requestName: '',
|
}],
|
||||||
contactName: '',
|
}
|
||||||
contact: '',
|
},
|
||||||
}
|
methods: {
|
||||||
],
|
async getConfigList() {
|
||||||
}
|
const {
|
||||||
},
|
rows
|
||||||
methods: {
|
} = await vk.callFunction({
|
||||||
async getConfigList() {
|
url: 'client/coop/config/pub/getList',
|
||||||
const {rows} = await vk.callFunction({
|
data: {
|
||||||
url: 'client/coop/config/pub/getList',
|
type: 1
|
||||||
data: {type: 1}
|
}
|
||||||
})
|
})
|
||||||
if (rows) {
|
if (rows) {
|
||||||
this.configList = rows.map(item => {
|
this.configList = rows.map(item => {
|
||||||
item.contentIndex = null
|
item.contentIndex = null
|
||||||
return item
|
return item
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
changeCheck(itemIndex) {
|
changeCheck(itemIndex) {
|
||||||
const index = this.contentList.indexOf(itemIndex)
|
const index = this.contentList.indexOf(itemIndex)
|
||||||
if (index === -1) {
|
if (index === -1) {
|
||||||
this.contentList.push(itemIndex)
|
this.contentList.push(itemIndex)
|
||||||
} else {
|
} else {
|
||||||
this.contentList.splice(index, 1)
|
this.contentList.splice(index, 1)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
addCompany() {
|
addCompany() {
|
||||||
this.productList.push({
|
this.productList.push({
|
||||||
name: '',
|
name: '',
|
||||||
code: '',
|
code: '',
|
||||||
address: '',
|
address: '',
|
||||||
email: '',
|
email: '',
|
||||||
wechat: '',
|
wechat: '',
|
||||||
receiveAddress: '',
|
receiveAddress: '',
|
||||||
requestName: '',
|
requestName: '',
|
||||||
contactName: '',
|
contactName: '',
|
||||||
contact: '',
|
contact: '',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
removeCompany() {
|
removeCompany() {
|
||||||
this.productList.splice(index, 1)
|
this.productList.splice(index, 1)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onLoad() {
|
onLoad() {
|
||||||
this.getConfigList()
|
this.getConfigList()
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
amount() {
|
amount() {
|
||||||
let tmpAmount = 0
|
let tmpAmount = 0
|
||||||
this.configList.forEach((item, index) => {
|
this.configList.forEach((item, index) => {
|
||||||
if (this.contentList.indexOf(index) !== -1 && item.contentIndex !== null) {
|
if (this.contentList.indexOf(index) !== -1 && item.contentIndex !== null) {
|
||||||
tmpAmount += parseFloat(item.contents[item.contentIndex].amount)
|
tmpAmount += parseFloat(item.contents[item.contentIndex].amount)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
return tmpAmount
|
return tmpAmount
|
||||||
},
|
},
|
||||||
totalAmount() {
|
totalAmount() {
|
||||||
return this.amount * this.productList.length
|
return this.amount * this.productList.length
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</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;
|
||||||
|
}
|
||||||
|
.remark{
|
||||||
|
color: #999999;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.divider-title{
|
||||||
|
font-size: 17px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user