b2894lxlx/jjx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化页面UI

Browse Source
This commit is contained in:
gxwebsoft
2023-12-10 10:57:21 +08:00
parent 6c1591f26d
commit dcdb21d299
2 changed files with 279 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/self-support/companyQuote.vue
+51 -6
View File
@@ -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>
<view>备注: {{ item.remark }}</view> <view class="ml-35" v-else>
元/次
</view>
</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>
pages/index/self-support/productQuote.vue
+63 -19
View File
@@ -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>
<view>备注: {{ item.remark }}</view> <view class="ml-35" v-else>
元/次
</view>
</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 productList" :key="index"> <view v-for="(item, index) in productList" :key="index">
<el-form-item label="检测产品:" required> <el-form-item label="检测产品:" required>
@@ -73,8 +79,7 @@
</view> </view>
<view class="ml-20"> <view class="ml-20">
<el-button type="primary" plain @click.native="removeCompany(index)" <el-button type="primary" plain @click.native="removeCompany(index)"
class="ml-20" class="ml-20" :disabled="productList.length === 1">删除该对象
:disabled="productList.length === 1">删除该对象
</el-button> </el-button>
</view> </view>
</view> </view>
@@ -90,7 +95,8 @@
<view class="ml-35">客服联系方式: 0771-3923001</view> <view class="ml-35">客服联系方式: 0771-3923001</view>
</view> </view>
<view class="mt-40 flex justify-center items-center"> <view class="mt-40 flex justify-center items-center">
<el-button type="primary" :disabled="contentList.length === 0 || productList.length === 0 || !productList[0].name">立即支付 <el-button type="primary"
:disabled="contentList.length === 0 || productList.length === 0 || !productList[0].name">立即支付
</el-button> </el-button>
</view> </view>
</view> </view>
@@ -104,19 +110,16 @@ 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: {}, form: {},
configList: [], configList: [],
checkList: [], checkList: [],
contentList: [], contentList: [],
contentNameList: [], contentNameList: [],
productList: [ productList: [{
{
name: '', name: '',
code: '', code: '',
address: '', address: '',
@@ -126,15 +129,18 @@ export default {
requestName: '', requestName: '',
contactName: '', contactName: '',
contact: '', contact: '',
} }],
],
} }
}, },
methods: { methods: {
async getConfigList() { async getConfigList() {
const {rows} = await vk.callFunction({ const {
rows
} = await vk.callFunction({
url: 'client/coop/config/pub/getList', url: 'client/coop/config/pub/getList',
data: {type: 1} data: {
type: 1
}
}) })
if (rows) { if (rows) {
this.configList = rows.map(item => { this.configList = rows.map(item => {
@@ -187,3 +193,41 @@ 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>