179 lines
3.4 KiB
Vue
179 lines
3.4 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view style="width: 100%; height: 44px;"></view>
|
||
<view class="top-heder">
|
||
<view class="t-left" @click="getback()">
|
||
<uni-icons type="left" size="18"></uni-icons>
|
||
</view>
|
||
<view class="t-title">
|
||
<text>选择检测项目</text>
|
||
</view>
|
||
<view class="t-you"></view>
|
||
</view>
|
||
<view class="cont_box">
|
||
|
||
<view class="title_">
|
||
可选检测项目：
|
||
</view>
|
||
<view class="box_">
|
||
<view class="box_button " :class="{ 'box_button_x' :selectProject.indexOf(item)>-1 }" v-for="item in inpectionProjects" @click="clickProject(item)">{{item.projectName}}</view>
|
||
</view>
|
||
|
||
<view class="title_">
|
||
已选检测项目：
|
||
</view>
|
||
<u-steps activeColor="#0D2E8D" direction="column">
|
||
<u-steps-item :iconSize="iconSize" v-for="item in selectProject" :title="item.projectName" >
|
||
</u-steps-item>
|
||
|
||
</u-steps>
|
||
|
||
|
||
|
||
</view>
|
||
|
||
|
||
|
||
<view class="dlanniu" @click="sureChoose()" >
|
||
<text>确定选择</text>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request';
|
||
export default {
|
||
data() {
|
||
return {
|
||
iconSize:130,
|
||
inpectionProjects:[],
|
||
selectProject:[]
|
||
}
|
||
},
|
||
onShow() {
|
||
this.getProjects()
|
||
|
||
},
|
||
methods: {
|
||
sureChoose(){
|
||
if(this.selectProject.length == 0){
|
||
uni.showToast({
|
||
title:'请选择项目！',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
uni.$emit('selectProject', this.selectProject);
|
||
this.getback()
|
||
},
|
||
getback(){
|
||
uni.navigateBack()
|
||
},
|
||
async getProjects(){
|
||
let res = await request({
|
||
url:'/inspection/dl-inspection-project/page',
|
||
method: 'get',
|
||
params:{
|
||
pageNo:1,
|
||
pageSize:100
|
||
}
|
||
|
||
})
|
||
this.inpectionProjects = res.data.records
|
||
},
|
||
clickProject(data){
|
||
let idx = this.selectProject.indexOf(data)
|
||
if(idx>-1){
|
||
// 如果元素存在于数组中，则使用splice方法来删除它
|
||
this.selectProject.splice(idx, 1);
|
||
}else{
|
||
this.selectProject.push(data)
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cont_box{
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
.title_{
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
.box_{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.box_button_x{
|
||
border-radius: 6px;
|
||
border: 1px solid #0D2E8D;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
padding: 5px 10px;
|
||
margin-right: 5px;
|
||
margin-bottom: 5px;
|
||
background: #0D2E8D;
|
||
color: #fff;
|
||
}
|
||
.box_button{
|
||
border-radius: 6px;
|
||
border: 1px solid #999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
padding: 5px 10px;
|
||
margin-right: 5px;
|
||
margin-bottom: 5px;
|
||
}
|
||
.dlanniu{
|
||
width: 80%;
|
||
height: 45px;
|
||
background: linear-gradient(180deg, #3F61C0 0%, #0D2E8D 100%);
|
||
border-radius: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 20px auto;
|
||
color: white;
|
||
}
|
||
.t-you{
|
||
height: 100%;
|
||
width: 20%;
|
||
}
|
||
.content {
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: calc(100vh);
|
||
background: white;
|
||
}
|
||
.top-heder{
|
||
width: 100%;
|
||
height: 46px;
|
||
background: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 5px 15px;
|
||
}
|
||
.t-title{
|
||
font-size: 17px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
}
|
||
.t-left{
|
||
width: 10%;
|
||
}
|
||
</style>
|