sunjianxi
2 years ago
parent
1b5d5a0509
commit
86037a4601
16 changed files with 3114 additions and 97 deletions
@ -0,0 +1,170 @@ |
||||
<template> |
||||
<view class="search-content"> |
||||
<view class="search-box"> |
||||
<view class="tab-content"> |
||||
<view :class="{ |
||||
'tab-item': true, |
||||
'tab-item-active': tabActive == item.active |
||||
}" v-for="(item, index) in tabList" :key="item.active" @click="handleClick(item.active)" style="display: flex;"> |
||||
<view> |
||||
{{item.name}} |
||||
</view> |
||||
<view style="margin-left: 10rpx;"> |
||||
{{item.num}} |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
|
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import VdatePicker from '@/components/u-view/v-date-picker/index.vue' |
||||
export default { |
||||
name: 'date-search', |
||||
components: { |
||||
VdatePicker |
||||
}, |
||||
props: { |
||||
tabList: { |
||||
type: Array, |
||||
default: () => ([]) |
||||
}, |
||||
tabActive: { |
||||
type: [Number, String], |
||||
default: 0 |
||||
}, |
||||
startDate: { |
||||
type: String, |
||||
default: '' |
||||
}, |
||||
endDate: { |
||||
type: String, |
||||
default: '' |
||||
} |
||||
}, |
||||
computed: { |
||||
start: { |
||||
get() { |
||||
return this.startDate |
||||
}, |
||||
set(value) { |
||||
this.$emit('update:startDate', value) |
||||
} |
||||
}, |
||||
end: { |
||||
get() { |
||||
return this.endDate |
||||
}, |
||||
set(value) { |
||||
this.$emit('update:endDate', value) |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
timeShow: false, |
||||
} |
||||
}, |
||||
methods: { |
||||
formatter(type, value) { |
||||
if (type === 'year') { |
||||
return `${value}年` |
||||
} |
||||
if (type === 'month') { |
||||
return `${value}月` |
||||
} |
||||
if (type === 'day') { |
||||
return `${value}日` |
||||
} |
||||
return value |
||||
}, |
||||
handleClick(active) { |
||||
if (this.tabActive != active) { |
||||
this.$emit('tabChange', active) |
||||
} |
||||
}, |
||||
handleOpenDate() { |
||||
this.timeShow = true |
||||
}, |
||||
getCurTimeForX() { |
||||
return (new Date()).getTime() |
||||
}, |
||||
getMinTimeForX() { |
||||
return this.$moment('2021-01-01').valueOf() |
||||
}, |
||||
formatTime(time) { |
||||
return this.$moment(time).format('YYYY-MM-DD') |
||||
}, |
||||
handleOpen(key) { |
||||
this.$nextTick(() => { |
||||
this[key] = true |
||||
}) |
||||
}, |
||||
handleClear(key) { |
||||
this[key] = '' |
||||
this.$nextTick(() => { |
||||
if (!this.endDate && !this.startDate) { |
||||
this.$emit('handleSearch') |
||||
} |
||||
}) |
||||
}, |
||||
changeDate(timeArr) { |
||||
const [start, end] = timeArr |
||||
this.start = start |
||||
this.end = end |
||||
this.timeShow = false |
||||
this.$nextTick(() => { |
||||
this.$emit('handleSearch') |
||||
}) |
||||
|
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.search-content { |
||||
padding-top: 12px; |
||||
font-size: 14px; |
||||
|
||||
.search-box { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
height: 27px; |
||||
} |
||||
|
||||
.tab-content { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
.tab-item { |
||||
border-radius: 4px; |
||||
padding: 4px 10px; |
||||
background: rgba(208, 222, 245, 1); |
||||
margin-right: 12px; |
||||
color: rgba(54, 63, 77, 1); |
||||
|
||||
&-active { |
||||
background: rgba(60, 109, 196, 1); |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
} |
||||
} |
||||
|
||||
.date-btn { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
&-icon { |
||||
width: 16px; |
||||
height: 16px; |
||||
margin-left: 5px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,534 @@ |
||||
<template> |
||||
<view id="page"> |
||||
<view class="Width100 Box BorderBox"> |
||||
<view class="Content BorderBox Width100"> |
||||
<top-title :is-show-left="false" :title="'农三轮'" :rightWidth='60' class="custom_bg"> |
||||
<template slot="right"> |
||||
<image :src="$.imgSrc + '/mine/plus.png'" mode="aspectFit" |
||||
@click="$.open('/pages/investigation/detail')" class="InlineBlock imgIcon"></image> |
||||
</template> |
||||
</top-title> |
||||
</view> |
||||
|
||||
<view class="query-form"> |
||||
<view class="search-box"> |
||||
<u-search placeholder="请输入名称" v-model="searchValue" actionText="" :showAction="false" |
||||
@search="handleSearch" @clear="handleSearch"></u-search> |
||||
</view> |
||||
<view class="tab"> |
||||
<view v-for="tabItem in tabList" :key="tabItem.active" :class="{ |
||||
'tab-item': true, |
||||
'active': tabItem.active == approve |
||||
}" @click="handleTabChange(tabItem.active)"> |
||||
<text>{{tabItem.name}}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="Content MarginAuto BorderBox"> |
||||
<dateSearch :tabList="approve == 1? tabTypeList1:tabTypeList2" :tabActive="classification" |
||||
:startDate.sync="startDate" :endDate.sync="endDate" @handleSearch="handleSearch" |
||||
@tabChange="queryTypeChange" /> |
||||
<no-data v-if="!list.length" /> |
||||
<view v-else class="List Width100 BorderBox"> |
||||
<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" v-for="item in list" |
||||
:key='item.id' @click='handleClick(item)' v-if="approve == 1"> |
||||
<image class="itemImg" :src="item.drivingImg ||require('./defaultImg.png')" mode="widthFix"> |
||||
</image> |
||||
<view class="right"> |
||||
<view class="title carNumber">{{ item.vehicleLicense }}</view> |
||||
<text class="title">{{ item.driverName }}</text> |
||||
<view class="type"> |
||||
<text>{{ vehicleTypeConvert(item.vehicleType) }}</text> |
||||
<text style="margin-right: 5rpx;">{{ item.streetCommunity || '--' }}</text> |
||||
<text>{{ item.villageCommunity || '--' }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" v-for="item in list" |
||||
:key='item.warningId' v-if="approve == 2" @click='handleWarningClick(item)'> |
||||
<image class="itemImg" :src="item.drivingImg ||require('./defaultImg.png')" mode="widthFix"> |
||||
</image> |
||||
<view class="right"> |
||||
<view class="title carNumber">{{ item.vehicleLicense }}</view> |
||||
<text class="title">{{ item.illegalActivities }}</text> |
||||
<view class="type" style="display: flex;justify-content: space-between;"> |
||||
<text>{{ item.driverName || '--' }}</text> |
||||
<text>{{ item.warningTimeFormat || '--' }}</text> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<u-loadmore :status="loadmorestatus" v-show="!isEmpty" /> |
||||
</view> |
||||
</view> |
||||
<Tabbar name="农三轮" v-if="tabbarShow"></Tabbar> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import NoData from "../../components/no-data.vue"; |
||||
import TopTitle from "../../components/top-title"; |
||||
import tabFun from '@/libs/function/tabbar.js' |
||||
import Tabbar from "../../components/tabbar.vue"; |
||||
import dateSearch from "./date-search.vue"; |
||||
export default { |
||||
// 组件 |
||||
components: { |
||||
NoData, |
||||
TopTitle, |
||||
Tabbar, |
||||
dateSearch |
||||
}, |
||||
data() { |
||||
return { |
||||
// 公用的js |
||||
list: [], |
||||
isEmpty: false, |
||||
isMore: true, |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
searchValue: '', |
||||
classification: '0', |
||||
approve: '1', |
||||
status: '60', |
||||
startDate: '', |
||||
endDate: '', |
||||
tabbarShow: true, |
||||
tabList: [{ |
||||
name: '信息登记', |
||||
active: '1', |
||||
}, |
||||
{ |
||||
name: '预警处理', |
||||
active: '2', |
||||
}, |
||||
], |
||||
tabTypeList1: [{ |
||||
name: '全部', |
||||
active: '0', |
||||
num: 0, |
||||
}, |
||||
{ |
||||
name: '已补录', |
||||
active: '1', |
||||
num: 0, |
||||
}, |
||||
{ |
||||
name: '未补录', |
||||
active: '2', |
||||
num: 0, |
||||
}, |
||||
], |
||||
tabTypeList2: [], |
||||
loadmorestatus: 'loading', |
||||
enumList: {} |
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/tricycle/getTricycleInfoEnumType", |
||||
"GET" |
||||
).then(res => { |
||||
this.enumList = res.result |
||||
}) |
||||
if (this.$.getData('userInfo').role.some(i => i == '中队民警农三轮')) { |
||||
this.tabTypeList2 = [{ |
||||
name: '未处理', |
||||
active: '0', |
||||
num: 0, |
||||
}, |
||||
{ |
||||
name: '已分配', |
||||
active: '1', |
||||
num: 0, |
||||
}, |
||||
{ |
||||
name: '已完成', |
||||
active: '2', |
||||
num: 0, |
||||
}, |
||||
] |
||||
} else if (this.$.getData('userInfo').role.some(i => i == '村干部农三轮')) { |
||||
this.tabTypeList2 = [{ |
||||
name: '未处理', |
||||
active: '0', |
||||
num: 0, |
||||
}, |
||||
{ |
||||
name: '已完成', |
||||
active: '2', |
||||
num: 0, |
||||
}, |
||||
] |
||||
} |
||||
}, |
||||
onShow() { |
||||
const approve = uni.getStorageSync('MySPtabIndex') |
||||
if (approve) { |
||||
this.approve = Number(approve) |
||||
uni.setStorageSync('MySPtabIndex', '') |
||||
} |
||||
uni.hideTabBar() //隐藏官方的tabBar |
||||
this.pageNum = 1 |
||||
this.list = []; |
||||
this.getList({}) |
||||
|
||||
// tabFun.tabbar() |
||||
// this.tabbarShow = false |
||||
// this.$nextTick(() => { |
||||
// this.tabbarShow = true |
||||
// }) |
||||
}, |
||||
// 计算属性 |
||||
computed: {}, |
||||
// 方法 |
||||
methods: { |
||||
//车辆种类转换 |
||||
vehicleTypeConvert(vehicleType) { |
||||
if (vehicleType) { |
||||
return this.enumList.vehicleTypeEnum.find(i => i.enumvalue === vehicleType)?.enumname |
||||
} else { |
||||
'--' |
||||
} |
||||
}, |
||||
handleSearch(keyWord) { |
||||
this.pageNum = 1 |
||||
this.list = [] |
||||
this.getList({ |
||||
keyWord |
||||
}) |
||||
}, |
||||
queryTypeChange(tabKey) { |
||||
if (this.classification != tabKey) { |
||||
this.classification = tabKey |
||||
this.pageNum = 1 |
||||
this.list = [] |
||||
this.getList({ |
||||
tabKey |
||||
}) |
||||
} |
||||
}, |
||||
handleTabChange(tabKey) { |
||||
if (this.approve != tabKey) { |
||||
this.classification = '0' |
||||
this.approve = tabKey |
||||
this.pageNum = 1 |
||||
this.list = [] |
||||
this.getList({}) |
||||
} |
||||
}, |
||||
getQueryStr(query) { |
||||
let myQuery = { |
||||
...query |
||||
} |
||||
if (myQuery.approve == 2) { |
||||
myQuery.startTime = this.startDate |
||||
myQuery.endTime = this.endDate |
||||
} |
||||
return Object.entries(myQuery).reduce((str, keyValue, index, self) => { |
||||
const [key, value] = keyValue |
||||
str += `${key}=${value}${index !== self.length - 1 ? '&' : ''}` |
||||
return str |
||||
}, '') |
||||
}, |
||||
getList({ |
||||
tabKey, |
||||
keyWord |
||||
}) { |
||||
this.loadmorestatus = 'loading' |
||||
this.isMore = true |
||||
//信息登记列表 |
||||
if (this.approve == 1) { |
||||
this.$request.globalRequest(`hiddenDanger/tricycle/getTricycleList`, { |
||||
nuserId: this.$.getData('token'), |
||||
status: tabKey || this.classification, |
||||
search: keyWord || '', |
||||
pageNum: this.pageNum, |
||||
pageSize: this.pageSize, |
||||
}, 'get').then(res => { |
||||
this.loadmorestatus = 'loadmore' |
||||
if (res.code === 200) { |
||||
if (res.result.total === 0) { |
||||
this.isEmpty = true; |
||||
} else { |
||||
this.isEmpty = false; |
||||
this.list.push(...res.result.list) |
||||
} |
||||
if (this.list.length >= res.result.total) { |
||||
this.loadmorestatus = 'nomore' |
||||
this.isMore = false |
||||
} |
||||
} else { |
||||
this.$.toast(res.message) |
||||
} |
||||
}).catch((err) => { |
||||
this.loadmorestatus = 'nomore' |
||||
uni.stopPullDownRefresh(); |
||||
}) |
||||
//查询各状态数量 |
||||
this.tabTypeList1.map(i => { |
||||
this.$request.globalRequest(`hiddenDanger/tricycle/getTricycleList`, { |
||||
nuserId: this.$.getData('token'), |
||||
status: i.active, |
||||
search: keyWord || '' |
||||
}, 'get').then(res => { |
||||
i.num = res.result.total |
||||
}) |
||||
}) |
||||
} else if (this.approve == 2) { |
||||
this.$request.globalRequest(`hiddenDanger/tricycle/getTricycleWarningList`, { |
||||
nuserId: this.$.getData('token'), |
||||
status: tabKey || this.classification, |
||||
search: keyWord || '', |
||||
pageNum: this.pageNum, |
||||
pageSize: this.pageSize, |
||||
}, 'get').then(res => { |
||||
this.loadmorestatus = 'loadmore' |
||||
if (res.code === 200) { |
||||
if (res.result.total === 0) { |
||||
this.isEmpty = true; |
||||
} else { |
||||
this.isEmpty = false; |
||||
this.list.push(...res.result.list) |
||||
} |
||||
if (this.list.length >= res.result.total) { |
||||
this.loadmorestatus = 'nomore' |
||||
this.isMore = false |
||||
} |
||||
} else { |
||||
this.$.toast(res.message) |
||||
} |
||||
}).catch((err) => { |
||||
this.loadmorestatus = 'nomore' |
||||
uni.stopPullDownRefresh(); |
||||
}) |
||||
//查询各状态数量 |
||||
this.tabTypeList2.map(i => { |
||||
this.$request.globalRequest(`hiddenDanger/tricycle/getTricycleWarningList`, { |
||||
nuserId: this.$.getData('token'), |
||||
status: i.active, |
||||
search: keyWord || '' |
||||
}, 'get').then(res => { |
||||
i.num = res.result.total |
||||
}) |
||||
}) |
||||
} |
||||
}, |
||||
handleClick(row) { |
||||
this.$.open("/pages/investigation/detail" + "?id=" + row.id); |
||||
}, |
||||
handleWarningClick(row) { |
||||
this.$.open("/pages/investigation/warningDetail" + "?warningId=" + row.warningId+ "&state=" + this.classification); |
||||
}, |
||||
// 跳转页面 |
||||
skipPage(even) { |
||||
// this.$.open(even) |
||||
}, |
||||
}, |
||||
onReady() {}, |
||||
// 页面卸载 |
||||
onUnload() { |
||||
|
||||
}, |
||||
// 触发下拉刷新 |
||||
onPullDownRefresh() { |
||||
this.pageNum = 1 |
||||
this.list = []; |
||||
this.getList({}) |
||||
}, |
||||
// 页面上拉触底事件的处理函数 |
||||
onReachBottom() { |
||||
if (this.isMore) { |
||||
this.pageNum++ |
||||
this.getList({}) |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
page { |
||||
background: #F6F8FA; |
||||
} |
||||
|
||||
.imgIcon { |
||||
width: 40rpx; |
||||
height: 100%; |
||||
} |
||||
|
||||
.imgIcon:nth-of-type(2) { |
||||
margin-left: 40rpx; |
||||
} |
||||
|
||||
.img { |
||||
width: 40rpx; |
||||
height: 40rpx; |
||||
margin-left: 30rpx; |
||||
} |
||||
|
||||
.trapezoidal { |
||||
position: relative; |
||||
display: inline-block; |
||||
min-width: 2em; |
||||
text-align: center; |
||||
padding: 3rpx 20rpx 3rpx 18rpx; |
||||
} |
||||
|
||||
.trapezoidal::before, |
||||
.trapezoidal::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0%; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 0rpx 0 0 0; |
||||
background: #FF1111; |
||||
z-index: -1; |
||||
transform-origin: bottom; |
||||
transform: skew(18deg); |
||||
border: 0rpx solid #333; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.trapezoidal::after { |
||||
left: auto; |
||||
right: 0; |
||||
transform: skew(-0deg); |
||||
border-radius: 0 0rpx 0 0; |
||||
background-color: #FF1111; |
||||
border-left: 0 none; |
||||
} |
||||
|
||||
.query-form { |
||||
|
||||
font-size: 16px; |
||||
height: 91px; |
||||
background: #ffffff; |
||||
box-shadow: 3px 0px 10px #ccc; |
||||
color: #666666; |
||||
position: sticky; |
||||
// top: var(--status-bar-height + 88rpx); |
||||
top: calc(var(--status-bar-height) + 88rpx); |
||||
z-index: 10; |
||||
|
||||
.tab { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-around; |
||||
|
||||
.tab-item { |
||||
position: relative; |
||||
height: 41px; |
||||
line-height: 41px; |
||||
padding: 0 30rpx 0 30rpx; |
||||
border-bottom: 3px solid #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
&.active { |
||||
color: rgb(60, 109, 195); |
||||
border-color: rgb(60, 109, 195); |
||||
} |
||||
|
||||
.number { |
||||
font-weight: bold; |
||||
font-size: 18px; |
||||
margin-left: 10rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.search-box { |
||||
padding: 10px 10px 3px; |
||||
} |
||||
} |
||||
|
||||
.query-form2 { |
||||
height: 146px; |
||||
|
||||
.date-content { |
||||
display: flex; |
||||
align-items: center; |
||||
padding: 15px 10px; |
||||
justify-content: space-between; |
||||
|
||||
.date-item { |
||||
display: flex; |
||||
align-items: center; |
||||
|
||||
&-label { |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
&-value { |
||||
width: 185rpx; |
||||
text-align: right; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.Box { |
||||
padding-top: var(--status-bar-height); |
||||
|
||||
.Content { |
||||
width: calc(100% - 48rpx); |
||||
padding-bottom: 88rpx; |
||||
} |
||||
|
||||
.Unit { |
||||
padding: 24rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
box-shadow: 1px 1px 3px #ccc; |
||||
|
||||
.trapezoidal { |
||||
position: absolute; |
||||
top: 0px; |
||||
right: 0px; |
||||
color: #ffffff; |
||||
font-size: 14px; |
||||
font-weight: normal; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.itemImg { |
||||
max-width: 132rpx; |
||||
max-height: 116rpx; |
||||
} |
||||
|
||||
.right { |
||||
flex: 1; |
||||
padding-left: 30rpx; |
||||
|
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.carNumber { |
||||
width: 250rpx; |
||||
float: left; |
||||
} |
||||
|
||||
.type { |
||||
font-size: 14px; |
||||
color: #666; |
||||
font-weight: normal; |
||||
|
||||
text { |
||||
margin-right: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,905 @@ |
||||
<template> |
||||
<view id="page"> |
||||
<view class="Width100 Box BorderBox"> |
||||
<view class="Content BorderBox Width100"> |
||||
<top-title @skipPage="$.back(1)" :isCuMethod="true" :is-show-left="true" title="三轮车信息登记" |
||||
:rightWidth='120' class="custom_bg"> |
||||
</top-title> |
||||
</view> |
||||
<view class="formBox"> |
||||
<uni-forms :modelValue="formData" border> |
||||
<view class="label-box"> |
||||
<view class="border"></view> 车辆信息 |
||||
</view> |
||||
<uni-forms-item label="车辆号牌" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.vehicleLicense" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="车辆类型" class="border-bottom" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
||||
@click="handleShowDrop('vehicleType') "> |
||||
<u-picker :show="pickerType == 'vehicleType'" :columns="[this.enumList.vehicleTypeEnum]" |
||||
@cancel="pickerType = ''" keyName='enumname' |
||||
@confirm="e=>handleSelect(e,'vehicleType')"></u-picker> |
||||
<view style="width:200rpx;min-height: 50rpx;" :class="formData.vehicleType?'':'gary'"> |
||||
{{editFlag?formData.vehicleType ||'请选择车辆类型':formData.vehicleType}} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="车辆颜色" class="border-bottom" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
||||
@click=" handleShowDrop('vehicleColor')"> |
||||
<u-picker :show="pickerType == 'vehicleColor'" :columns="[this.enumList.vehicleColorEnum]" |
||||
@cancel="pickerType = ''" keyName='enumname' :disabled="!editFlag" |
||||
@confirm="e=>handleSelect(e,'vehicleColor')"></u-picker> |
||||
<view :class="formData.vehicleColor?'':'gary'"> |
||||
{{editFlag?formData.vehicleColor ||'请选择车辆颜色':formData.vehicleColor}} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="车辆品牌" class="border-bottom"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入车辆品牌':''" v-model="formData.vehicleBrand" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="车架号" class="border-bottom" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入车架号':''" v-model="formData.vin" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<view class="label-box"> |
||||
<view class="border"></view> 驾驶人信息 |
||||
</view> |
||||
<uni-forms-item label="驾驶人" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入驾驶人姓名':''" v-model="formData.driverName" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="身份证号" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入驾驶人身份证号':''" v-model="formData.driverIdNumber" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="联系电话" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入驾驶人联系电话':''" v-model="formData.driverPhone" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="准驾车型" class="border-top"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
||||
@click="handleShowDrop('driverAuthorizedModel')"> |
||||
<u-picker :show="pickerType === 'driverAuthorizedModel'" |
||||
:columns="[this.enumList.getVehicleAuthorizedModelEnum]" @cancel="pickerType = ''" |
||||
keyName='enumname' :disabled="!editFlag" |
||||
@confirm="e=>handleSelect(e,'driverAuthorizedModel')"></u-picker> |
||||
<view :class="formData.driverAuthorizedModel?'':'gary'"> |
||||
{{editFlag?formData.driverAuthorizedModel || '请选择准驾车型':formData.driverAuthorizedModel}} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="街镇" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
||||
@click="handleShowDrop('streetCommunity')"> |
||||
<u-picker :show="pickerType === 'streetCommunity'" :columns="[this.streetCommunityByXq]" |
||||
@cancel="pickerType = ''" keyName='jdname' :disabled="!editFlag" |
||||
@confirm="e=>handleSelect(e,'streetCommunity')"></u-picker> |
||||
<view :class="formData.streetCommunity?'':'gary'"> |
||||
{{editFlag? formData.streetCommunity || '请选择街镇':formData.streetCommunity}} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="村社区" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
||||
@click="handleShowDrop('villageCommunity') "> |
||||
<u-picker :show="pickerType === 'villageCommunity'" :columns="[this.streetCommunityByJd]" |
||||
@cancel="pickerType = ''" keyName='sqname' :disabled="!editFlag" |
||||
@confirm="e=>handleSelect(e,'villageCommunity')"></u-picker> |
||||
<view :class="formData.villageCommunity?'':'gary'"> |
||||
{{editFlag? formData.villageCommunity || '请选择街镇':formData.villageCommunity}} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="村社区干部" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入村社区干部':''" v-model="formData.communityCadre" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<!-- <uni-forms-item label="村社区干部电话" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" placeholder="请输入村社区干部电话" v-model="formData.communityCadrePhone" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> --> |
||||
</uni-forms> |
||||
</view> |
||||
<view class="formBox"> |
||||
<uni-forms border> |
||||
<view class="label-box"> |
||||
<view class="border"></view> 其他信息 |
||||
</view> |
||||
<uni-forms-item label="保险购置情况" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
||||
@click=" handleShowDrop('vehicleInsurance')"> |
||||
<u-picker :show="pickerType === 'vehicleInsurance'" |
||||
:columns="[this.enumList.getVehicleInsuranceEnum]" @cancel="pickerType = ''" |
||||
keyName='enumname' :disabled="!editFlag" |
||||
@confirm="e=>handleSelect(e,'vehicleInsurance')"></u-picker> |
||||
<view :class="formData.vehicleInsurance?'':'gary'"> |
||||
{{editFlag?formData.vehicleInsurance ||'请选择保险购置情况':formData.vehicleInsurance}} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="车辆状态" class="border-top"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
||||
@click="handleShowDrop('vehicleStatus') "> |
||||
<u-picker :show="pickerType === 'vehicleStatus'" |
||||
:columns="[this.enumList.getVehicleStatusEnum]" @cancel="pickerType = ''" |
||||
keyName='enumname' :disabled="!editFlag" |
||||
@confirm="e=>handleSelect(e,'vehicleStatus')"></u-picker> |
||||
<view :class="formData.vehicleStatus?'':'gary'"> |
||||
{{editFlag?formData.vehicleStatus||'请选择车辆状态':formData.vehicleStatus}} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="录入人员" class="border-top"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<view> |
||||
{{formData.insertPersonnel}} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="录入时间" class="border-top"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
|
||||
<view class="Height100"> |
||||
{{ formData.insertTime }} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="详细地址" class="border-top" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入详细地址':''" v-model="formData.driverAddress" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<view class="detail-item"> |
||||
<uni-forms-item label="村干部见车主" label-position="top" label-width="100px" required /> |
||||
<locationUpload :disabled="!editFlag" :fileList="cadreDriverImg" |
||||
@afterRead="(e) => afterRead(e, 'cadreDriverImg')" |
||||
@delete="(e) => deletePic(e, 'cadreDriverImg')" name="1" :maxCount="1"></locationUpload> |
||||
</view> |
||||
<view class="detail-item"> |
||||
<uni-forms-item label="保证书" label-position="top" label-width="100px" required /> |
||||
<locationUpload :disabled="!editFlag" :fileList="guaranteeImg" |
||||
@afterRead="(e) => afterRead(e, 'guaranteeImg')" |
||||
@delete="(e) => deletePic(e, 'guaranteeImg')" name="1" :maxCount="1"></locationUpload> |
||||
</view> |
||||
<view class="detail-item"> |
||||
<uni-forms-item label="车主驾车" label-position="top" label-width="100px" required /> |
||||
<locationUpload :disabled="!editFlag" :fileList="drivingImg" |
||||
@afterRead="(e) => afterRead(e, 'drivingImg')" @delete="(e) => deletePic(e, 'drivingImg')" |
||||
name="1" :maxCount="1"></locationUpload> |
||||
</view> |
||||
<view class="detail-item"> |
||||
<uni-forms-item label="车主大头照" label-position="top" label-width="100px" required /> |
||||
<locationUpload :disabled="!editFlag" :fileList="driverImg" |
||||
@afterRead="(e) => afterRead(e, 'driverImg')" @delete="(e) => deletePic(e, 'driverImg')" |
||||
name="1" :maxCount="1"></locationUpload> |
||||
</view> |
||||
|
||||
</uni-forms> |
||||
</view> |
||||
<view class="bottom" v-if="!editFlag"> |
||||
<view class="trapezoidal min" @click="editFlag = true"> |
||||
<text>修改</text> |
||||
</view> |
||||
</view> |
||||
<view class="bottom" v-else-if="editFlag && !formData.vehicleId"> |
||||
<view class="trapezoidal min" @click="handleSave"> |
||||
<text>保存</text> |
||||
</view> |
||||
</view> |
||||
<three class="footer-buttons" :type="'view'" first-text="取消" next-text="确认" :second-primary="true" |
||||
@first="handleCancel" @last="handleSave" v-else /> |
||||
<view style="width: 100%;height: 100rpx;"></view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import NoData from "../../components/no-data.vue"; |
||||
import Tabbar from "../../components/tabbar.vue"; |
||||
import TopTitle from "../../components/top-title"; |
||||
import $ from "../../common/globalJs/globalJs"; |
||||
import taskInfo from "../../components/task-info.vue"; |
||||
import uploadFile from "../../components/upload-file.vue"; |
||||
import Three from "../../components/bottom-button/three.vue"; |
||||
import BottomButton from "../../components/bottom-button/three.vue"; |
||||
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'; |
||||
import locationUpload from '@/components/u-upload/index.js' |
||||
export default { |
||||
// 组件 |
||||
components: { |
||||
TopTitle, |
||||
NoData, |
||||
taskInfo, |
||||
uploadFile, |
||||
Three, |
||||
BottomButton, |
||||
locationUpload |
||||
}, |
||||
data() { |
||||
return { |
||||
editFlag: false, |
||||
$: this.$, |
||||
formData: { |
||||
cadreDriverImg: "", |
||||
communityCadre: "", |
||||
communityCadrePhone: '', |
||||
driverAddress: "", |
||||
driverAuthorizedModel: "", |
||||
driverIdNumber: "", |
||||
driverImg: "", |
||||
driverName: "", |
||||
driverPhone: "", |
||||
drivingImg: "", |
||||
guaranteeImg: "", |
||||
insertPersonnel: "", |
||||
insertTime: "", |
||||
streetCommunity: "", |
||||
vehicleBrand: "", |
||||
vehicleColor: "", |
||||
vehicleInsurance: "", |
||||
vehicleLicense: "", |
||||
vehicleStatus: "", |
||||
vehicleType: "", |
||||
villageCommunity: "", |
||||
vin: "" |
||||
}, |
||||
pickerType: '', |
||||
enumList: {}, |
||||
streetCommunityByXq: [], |
||||
streetCommunityByJd: [], |
||||
fileList: [], |
||||
cadreDriverImg: [], |
||||
guaranteeImg: [], |
||||
drivingImg: [], |
||||
driverImg: [], |
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
//字典枚举 |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/tricycle/getTricycleInfoEnumType", |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
this.enumList = res.result |
||||
//街镇 |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/config/getStreetCommunityByXq", |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
res.result.map(i => { |
||||
if (this.streetCommunityByXq.every(j => i.jdname != j.jdname)) { |
||||
this.streetCommunityByXq.push(i) |
||||
} |
||||
}) |
||||
if (e.id) { |
||||
this.getDetail(e.id); |
||||
} else { |
||||
this.editFlag = true |
||||
this.formData.insertTime = this.timestampToTime() |
||||
this.formData.insertPersonnel = this.$.getData('cusername') |
||||
} |
||||
}); |
||||
}); |
||||
//查询用户名称 |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/auth/getOperatorInformation", { |
||||
nuserid: this.$.getData('userInfo').username, |
||||
}, |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
if (res.code === 200) { |
||||
this.$.setData('cusername', res.result.cusername) |
||||
} |
||||
}); |
||||
}, |
||||
computed: { |
||||
|
||||
}, |
||||
onShow() { |
||||
|
||||
}, |
||||
methods: { |
||||
//取消 |
||||
handleCancel() { |
||||
this.editFlag = false |
||||
this.getDetail(this.formData.id) |
||||
}, |
||||
//保存 |
||||
handleSave() { |
||||
if (this.cadreDriverImg[0]?.url) { |
||||
this.formData.cadreDriverImg = this.cadreDriverImg[0]?.url; |
||||
}; |
||||
if (this.guaranteeImg[0]?.url) { |
||||
this.formData.guaranteeImg = this.guaranteeImg[0]?.url; |
||||
}; |
||||
if (this.drivingImg[0]?.url) { |
||||
this.formData.drivingImg = this.drivingImg[0]?.url; |
||||
}; |
||||
if (this.driverImg[0]?.url) { |
||||
this.formData.driverImg = this.driverImg[0]?.url; |
||||
}; |
||||
|
||||
const { |
||||
vehicleLicense, |
||||
vehicleType, |
||||
vehicleColor, |
||||
vin, |
||||
driverName, |
||||
driverIdNumber, |
||||
driverPhone, |
||||
streetCommunity, |
||||
villageCommunity, |
||||
communityCadre, |
||||
vehicleInsurance, |
||||
driverAddress, |
||||
cadreDriverImg, |
||||
guaranteeImg, |
||||
drivingImg, |
||||
driverImg, |
||||
driverAuthorizedModel, |
||||
vehicleStatus |
||||
} = this.formData; |
||||
|
||||
if (!vehicleLicense || !vehicleType || !vehicleColor || !vin || !driverName || !driverIdNumber || ! |
||||
driverPhone || |
||||
!streetCommunity || !villageCommunity || !communityCadre || !vehicleInsurance || !driverAddress || ! |
||||
cadreDriverImg || !guaranteeImg || !drivingImg || !driverImg) { |
||||
return this.$.toast("请输入完成表单必填项"); |
||||
} |
||||
|
||||
if (vehicleType) { |
||||
this.formData.vehicleType = this.enumList.vehicleTypeEnum?.find(i => i.enumname == |
||||
vehicleType)?.enumvalue |
||||
} |
||||
if (vehicleColor) { |
||||
this.formData.vehicleColor = this.enumList.vehicleColorEnum?.find(i => i.enumname == |
||||
vehicleColor)?.enumvalue |
||||
} |
||||
if (driverAuthorizedModel) { |
||||
this.formData.driverAuthorizedModel = this.enumList.getVehicleAuthorizedModelEnum?.find( |
||||
i => i.enumname == |
||||
driverAuthorizedModel)?.enumvalue |
||||
} |
||||
if (vehicleInsurance) { |
||||
this.formData.vehicleInsurance = this.enumList.getVehicleInsuranceEnum?.find(i => i |
||||
.enumname == |
||||
vehicleInsurance)?.enumvalue |
||||
} |
||||
if (vehicleStatus) { |
||||
this.formData.vehicleStatus = this.enumList.getVehicleStatusEnum?.find(i => i |
||||
.enumname == |
||||
vehicleStatus)?.enumvalue |
||||
} |
||||
let streetCommunityValue = '' |
||||
let villageCommunityValue = '' |
||||
|
||||
if (streetCommunity) { |
||||
streetCommunityValue = this.streetCommunityByXq?.find(i => i |
||||
.jdname == |
||||
streetCommunity).jdcode |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/config/getStreetCommunityByJq", { |
||||
jdcode: streetCommunityValue |
||||
}, |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
if (villageCommunity) { |
||||
villageCommunityValue = res.result?.find(i => i |
||||
.sqname == |
||||
villageCommunity).sqcode |
||||
} |
||||
|
||||
this.$request.globalRequest("/hiddenDanger/tricycle/saveTricycleInfo", { |
||||
...this.formData, |
||||
streetCommunity: streetCommunityValue, |
||||
villageCommunity: villageCommunityValue |
||||
}, |
||||
"POST" |
||||
) |
||||
.then((res) => { |
||||
this.editFlag = false |
||||
if (this.formData.vehicleId) { |
||||
uni.showToast({ |
||||
title: '修改成功' |
||||
}) |
||||
} else { |
||||
uni.showToast({ |
||||
title: '保存成功' |
||||
}) |
||||
setTimeout(() => { |
||||
this.$.back(1) |
||||
}, 500); |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
} |
||||
}, |
||||
getDetail(id) { |
||||
this.formData = {} |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/tricycle/getTricycleInfoBaseById", { |
||||
id |
||||
}, |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
if (res.code === 200) { |
||||
this.formData = res.result |
||||
if (res.result.cadreDriverImg) { |
||||
this.cadreDriverImg = [{ |
||||
url: res.result.cadreDriverImg, |
||||
name: '' |
||||
}] |
||||
} |
||||
if (res.result.guaranteeImg) { |
||||
this.guaranteeImg = [{ |
||||
url: res.result.guaranteeImg, |
||||
name: '' |
||||
}] |
||||
} |
||||
if (res.result.drivingImg) { |
||||
this.drivingImg = [{ |
||||
url: res.result.drivingImg, |
||||
name: '' |
||||
}] |
||||
} |
||||
if (res.result.driverImg) { |
||||
this.driverImg = [{ |
||||
url: res.result.driverImg, |
||||
name: '' |
||||
}] |
||||
} |
||||
|
||||
//字典回显 |
||||
const { |
||||
vehicleType, |
||||
vehicleColor, |
||||
driverAuthorizedModel, |
||||
vehicleInsurance, |
||||
vehicleStatus, |
||||
streetCommunity, |
||||
villageCommunity |
||||
} = this.formData |
||||
if (vehicleType) { |
||||
this.formData.vehicleType = this.enumList.vehicleTypeEnum?.find(i => i.enumvalue == |
||||
vehicleType)?.enumname |
||||
} |
||||
if (vehicleColor) { |
||||
this.formData.vehicleColor = this.enumList.vehicleColorEnum?.find(i => i.enumvalue == |
||||
vehicleColor)?.enumname |
||||
} |
||||
if (driverAuthorizedModel) { |
||||
this.formData.driverAuthorizedModel = this.enumList.getVehicleAuthorizedModelEnum |
||||
?.find( |
||||
i => i.enumvalue == |
||||
driverAuthorizedModel)?.enumname |
||||
} |
||||
if (vehicleInsurance) { |
||||
this.formData.vehicleInsurance = this.enumList.getVehicleInsuranceEnum?.find(i => i |
||||
.enumvalue == |
||||
vehicleInsurance)?.enumname |
||||
} |
||||
if (vehicleStatus) { |
||||
this.formData.vehicleStatus = this.enumList.getVehicleStatusEnum?.find(i => i |
||||
.enumvalue == |
||||
vehicleStatus)?.enumname |
||||
} |
||||
if (streetCommunity) { |
||||
this.formData.streetCommunity = this.streetCommunityByXq?.find(i => i |
||||
.jdcode == |
||||
streetCommunity).jdname |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/config/getStreetCommunityByJq", { |
||||
jdcode: streetCommunity |
||||
}, |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
this.streetCommunityByJd = res.result |
||||
if (villageCommunity) { |
||||
this.formData.villageCommunity = this.streetCommunityByJd?.find(i => i |
||||
.sqcode == |
||||
villageCommunity).sqname |
||||
} |
||||
}); |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
}); |
||||
}, |
||||
|
||||
timestampToTime() { |
||||
var date = new Date() |
||||
var Y = date.getFullYear() + '-'; |
||||
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; |
||||
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()); |
||||
return Y + M + D; // 返回格式：YYYY-MM-DD |
||||
}, |
||||
//下拉选择 |
||||
handleSelect(e, keyName) { |
||||
this.pickerType = 'keyName' |
||||
if (keyName == 'streetCommunity') { |
||||
if (this.formData.streetCommunity == e.value[0].jdname) { |
||||
return |
||||
} |
||||
this.formData.streetCommunity = e.value[0].jdname; |
||||
this.formData.villageCommunity = ''; |
||||
// 村镇 |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/config/getStreetCommunityByJq", { |
||||
jdcode: e.value[0].jdcode |
||||
}, |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
this.streetCommunityByJd = res.result |
||||
}); |
||||
} else if (keyName === 'villageCommunity') { |
||||
this.formData.villageCommunity = e.value[0].sqname; |
||||
} else { |
||||
this.formData[keyName] = e.value[0].enumname |
||||
} |
||||
}, |
||||
//显示下拉 |
||||
handleShowDrop(pickerType) { |
||||
if (!this.editFlag) { |
||||
return |
||||
} |
||||
this.pickerType = pickerType |
||||
}, |
||||
//获取随机id |
||||
uuid(len, binary) { |
||||
len = !len ? 36 : len; |
||||
binary = !binary ? 16 : binary; |
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" |
||||
.replace(/[xy]/g, function(c) { |
||||
var r = (Math.random() * binary) | 0, |
||||
v = c == "x" ? r : (r & 0x3) | 0x8; |
||||
return v.toString(binary); |
||||
}) |
||||
.substring(0, len); |
||||
}, |
||||
uploadFilePromise(event) { |
||||
return new Promise((resolve, reject) => { |
||||
let a = uni.uploadFile({ |
||||
url: this.$.baseUrl + "/hiddenDanger/ftp/uploadFileToFtp", // 仅为示例，非真实的接口地址 |
||||
filePath: event?.file.url, |
||||
name: "file", |
||||
formData: { |
||||
position: event.position, |
||||
longitude: event.longitude, |
||||
latitude: event.latitude |
||||
}, |
||||
success: (res) => { |
||||
resolve(res.data); |
||||
}, |
||||
}); |
||||
}); |
||||
}, |
||||
async afterRead(event, key) { |
||||
// console.log(key) |
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 |
||||
const id = this.uuid(); |
||||
this[key].push({ |
||||
id, |
||||
...event?.file, |
||||
status: "uploading", |
||||
message: "上传中", |
||||
}); |
||||
const result = await this.uploadFilePromise(event); |
||||
const resultInfo = JSON.parse(result); |
||||
const index = this[key]?.findIndex((v) => v.id === id); |
||||
if (resultInfo.code == 200) { |
||||
this[key].splice( |
||||
index, |
||||
1, |
||||
Object.assign(event?.file, { |
||||
status: "success", |
||||
message: "", |
||||
result: resultInfo, |
||||
url: resultInfo.result, |
||||
|
||||
}) |
||||
); |
||||
} else { |
||||
this.$.toast("上传失败"); |
||||
this[key].splice( |
||||
index, |
||||
1, |
||||
|
||||
); |
||||
} |
||||
}, |
||||
// 删除图片 |
||||
deletePic(event, keyName) { |
||||
if(!this.editFlag){ |
||||
return |
||||
} |
||||
this[keyName].splice(event.index, 1); |
||||
}, |
||||
}, |
||||
onReady() {}, |
||||
// 页面卸载 |
||||
onUnload() {}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
.footer-buttons{ |
||||
z-index: 3; |
||||
} |
||||
page { |
||||
background: #F6F8FA; |
||||
} |
||||
|
||||
|
||||
.query-form { |
||||
|
||||
font-size: 16px; |
||||
height: 44px; |
||||
background: #ffffff; |
||||
box-shadow: 3px 0px 10px #ccc; |
||||
color: #666666; |
||||
position: sticky; |
||||
// top: var(--status-bar-height + 88rpx); |
||||
top: calc(var(--status-bar-height) + 88rpx); |
||||
z-index: 10; |
||||
|
||||
.search-box { |
||||
padding: 10px 10px 3px; |
||||
} |
||||
} |
||||
|
||||
.formBox { |
||||
margin: 30rpx 20rpx; |
||||
border: 1px solid #e6e6e6; |
||||
background: #ffffff; |
||||
padding: 0 20rpx 20rpx; |
||||
box-sizing: border-box; |
||||
|
||||
/deep/ .uni-forms-item--border .uni-forms-item__content { |
||||
justify-content: flex-end; |
||||
text-align: right; |
||||
} |
||||
|
||||
.photo { |
||||
width: 100%; |
||||
|
||||
image { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.Box { |
||||
padding-top: var(--status-bar-height); |
||||
|
||||
.Content { |
||||
width: calc(100% - 48rpx); |
||||
padding-bottom: 88rpx; |
||||
} |
||||
|
||||
.Unit { |
||||
padding: 12rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
box-shadow: 1px 1px 3px #ccc; |
||||
|
||||
.trapezoidal { |
||||
position: absolute; |
||||
top: -0px; |
||||
right: 0px; |
||||
color: #ffffff; |
||||
font-size: 22rpx; |
||||
font-weight: normal; |
||||
z-index: 1; |
||||
} |
||||
|
||||
image { |
||||
width: 200rpx; |
||||
} |
||||
|
||||
.right { |
||||
flex: 1; |
||||
padding-left: 30rpx; |
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
width: 380rpx; |
||||
min-height: 80rpx; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
} |
||||
|
||||
.type { |
||||
font-size: 14px; |
||||
color: #666; |
||||
font-weight: normal; |
||||
|
||||
text { |
||||
margin-right: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.label-box { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 110rpx; |
||||
font-size: 30rpx; |
||||
font-weight: 600; |
||||
|
||||
.border { |
||||
background-color: #2663BF; |
||||
height: 35rpx; |
||||
width: 6rpx; |
||||
margin-right: 14rpx; |
||||
} |
||||
} |
||||
|
||||
.label-box2 { |
||||
height: 100rpx; |
||||
|
||||
|
||||
} |
||||
|
||||
.label-box-small { |
||||
font-size: 28rpx; |
||||
margin-top: -25rpx; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.border-bottom { |
||||
border-bottom: 1px #eee solid; |
||||
} |
||||
|
||||
.border-top { |
||||
border-top: 1px #eee solid; |
||||
} |
||||
|
||||
|
||||
/deep/ .uni-forms-item__label { |
||||
font-size: 28rpx; |
||||
height: auto; |
||||
margin-bottom: 20rpx; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
/deep/ .u-input { |
||||
background-color: #ffffff !important; |
||||
} |
||||
|
||||
.detail-item-flex { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.investigation-item-zl { |
||||
.uni-forms-item--border { |
||||
border: none; |
||||
} |
||||
|
||||
border-top: 1px solid #eee; |
||||
} |
||||
|
||||
.btn-right { |
||||
width: 100%; |
||||
text-align: right; |
||||
} |
||||
|
||||
.bottom { |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: calc(100% - 40rpx); |
||||
padding: 18rpx 20rpx; |
||||
height: 80rpx; |
||||
background: #FFFFFF; |
||||
border-top: 1px solid #cccccc; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
z-index: 3; |
||||
} |
||||
|
||||
.Img { |
||||
width: 512rpx; |
||||
height: 440rpx; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.trapezoidal { |
||||
position: relative; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex: 1; |
||||
width: 20%; |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
text-align: center; |
||||
border-radius: 10rpx; |
||||
line-height: 60rpx; |
||||
|
||||
&.primary { |
||||
background: #2663BF; |
||||
color: #fff; |
||||
|
||||
&::after, |
||||
&::before { |
||||
background: #2663BF; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.trapezoidal::before, |
||||
.trapezoidal::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 10rpx; |
||||
background: #E9EDF5; |
||||
z-index: -1; |
||||
transform-origin: bottom; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.trapezoidal::after { |
||||
left: auto; |
||||
right: 0; |
||||
border-radius: 10rpx; |
||||
background-color: #E9EDF5; |
||||
border-left: 0 none; |
||||
} |
||||
|
||||
.gary { |
||||
color: gray; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,665 @@ |
||||
<template> |
||||
<view id="page"> |
||||
<view class="Width100 Box BorderBox"> |
||||
<view class="Content BorderBox Width100"> |
||||
<top-title @skipPage="dealFlag?dealFlag = false: $.back(1)" :isCuMethod="true" :is-show-left="true" |
||||
:title="dealFlag?'处理': '预警处理'" :rightWidth='120' class="custom_bg"> |
||||
</top-title> |
||||
</view> |
||||
<view class="formBox" v-if="!dealFlag"> |
||||
<uni-forms :modelValue="formData" border> |
||||
<uni-forms-item label="抓拍时间"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.warningTimeFormat" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="问题描述"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" |
||||
v-model="formData.problemDescription" :disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="违法行为"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.illegalActivities" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="违法车辆"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.vehicleLicense" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="车主"> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" :placeholder="editFlag?'请输入车辆号牌':''" v-model="formData.driverName" |
||||
:disabled="!editFlag" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<image class="itemImg" :src="formData.illegalImg ||require('./defaultImg.png')" mode="widthFix"> |
||||
</view> |
||||
<view class="formBox" v-else> |
||||
<uni-forms :modelValue="formData" border> |
||||
<uni-forms-item label="处理类型" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; " |
||||
@click="handleTypeFlag = true "> |
||||
<view v-if="dealData.handleType"> |
||||
{{dealData.handleType}} |
||||
</view> |
||||
<view v-else class="gray"> |
||||
请选择处理类型 |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="处理结果" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<input type="text" placeholder="请填写处理结果" v-model="dealData.handleResult" /> |
||||
</view> |
||||
</uni-forms-item> |
||||
|
||||
<uni-forms-item label="照片" required> |
||||
<locationUpload :fileList="handleImg" @afterRead="(e) => afterRead(e, 'handleImg')" |
||||
@delete="(e) => deletePic(e, 'handleImg')" name="1" :maxCount="1"></locationUpload> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="处理人" required> |
||||
<view class="Height100"> |
||||
{{ dealData.handlePersonnel }} |
||||
</view> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="处理时间" required> |
||||
<view class="Height100 Flex Flex_end Flex_C_S-Center" style="line-height: 37px; "> |
||||
<view class="Height100"> |
||||
{{ dealData.handleTime }} |
||||
</view> |
||||
</view> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
</view> |
||||
<!-- 分配社区列表 --> |
||||
<u-picker :show="assignFlag" :columns="[squadronVillageList]" @cancel="assignFlag = false" keyName='sqname' |
||||
@confirm="assignTo"></u-picker> |
||||
<!-- 预警处理类型 --> |
||||
<u-picker :show="handleTypeFlag" :columns="[handleTypeEnum]" @cancel="handleTypeFlag = false" |
||||
keyName='sqname' @confirm="handleTypeSelect"></u-picker> |
||||
<three class="footer-buttons" :type="'view'" first-text="处理" next-text="分配" :second-primary="true" |
||||
@first="dealFlag = true" @last="assignFlag = true" v-if="propState!= '2'&& userFlag&&!dealFlag" /> |
||||
<view class="bottom" v-if="propState!= '2'&& !userFlag&&dealFlag"> |
||||
<view class="trapezoidal" @click="dealFlag = true" style="background: #2663BF;color: #fff;"> |
||||
<text>处理</text> |
||||
</view> |
||||
</view> |
||||
<view class="bottom" v-if="propState!= '2'&&dealFlag"> |
||||
<view class="trapezoidal" @click="handleDeal" style="background: #2663BF;color: #fff;"> |
||||
<text>处理</text> |
||||
</view> |
||||
</view> |
||||
|
||||
<view style="width: 100%;height: 100rpx;"></view> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import NoData from "../../components/no-data.vue"; |
||||
import Tabbar from "../../components/tabbar.vue"; |
||||
import TopTitle from "../../components/top-title"; |
||||
import $ from "../../common/globalJs/globalJs"; |
||||
import taskInfo from "../../components/task-info.vue"; |
||||
import uploadFile from "../../components/upload-file.vue"; |
||||
import Three from "../../components/bottom-button/three.vue"; |
||||
import BottomButton from "../../components/bottom-button/three.vue"; |
||||
import dayjs from '@/uni_modules/uview-ui/libs/util/dayjs.js'; |
||||
import locationUpload from '@/components/u-upload/index.js' |
||||
export default { |
||||
// 组件 |
||||
components: { |
||||
TopTitle, |
||||
NoData, |
||||
taskInfo, |
||||
uploadFile, |
||||
Three, |
||||
BottomButton, |
||||
locationUpload |
||||
}, |
||||
data() { |
||||
return { |
||||
editFlag: false, |
||||
$: this.$, |
||||
formData: { |
||||
communityCadre: "", |
||||
communityCadrePhone: '', |
||||
driverAddress: "", |
||||
driverAuthorizedModel: "", |
||||
driverIdNumber: "", |
||||
driverName: "", |
||||
driverPhone: "", |
||||
drivingImg: "", |
||||
insertPersonnel: "", |
||||
insertTime: "", |
||||
streetCommunity: "", |
||||
vehicleBrand: "", |
||||
vehicleColor: "", |
||||
vehicleInsurance: "", |
||||
vehicleLicense: "", |
||||
vehicleStatus: "", |
||||
vehicleType: "", |
||||
villageCommunity: "", |
||||
vin: "" |
||||
}, |
||||
enumList: {}, |
||||
streetCommunityByXq: [], |
||||
streetCommunityByJd: [], |
||||
|
||||
squadronVillageList: [], |
||||
assignFlag: false, |
||||
dealFlag: false, |
||||
userFlag: false, |
||||
handleTypeFlag: false, |
||||
dealData: { |
||||
// 预警主键 |
||||
"warningId": "", |
||||
// 处理类型 |
||||
"handleType": "", |
||||
// 处理结果 |
||||
"handleResult": "", |
||||
// 处理人 |
||||
"handlePersonnel": "", |
||||
// 处理时间 |
||||
"handleTime": "", |
||||
// 处理图片 |
||||
"handleImg": "" |
||||
}, |
||||
handleImg: [], |
||||
handleTypeEnum: [], |
||||
propState: '2' |
||||
} |
||||
}, |
||||
// 页面加载 |
||||
onLoad(e) { |
||||
if (this.$.getData('userInfo').role.some(i => i == '中队民警农三轮')) { |
||||
this.userFlag = true |
||||
} |
||||
if (e.warningId) { |
||||
console.log(e, 'warningIdwarningIdwarningIdwarningIdwarningIdwarningId') |
||||
this.getDetail(e.warningId); |
||||
} |
||||
if (this.propState) { |
||||
this.propState = this.propState |
||||
} |
||||
//查询用户名称 |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/auth/getOperatorInformation", { |
||||
nuserid: this.$.getData('userInfo').username, |
||||
}, |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
if (res.code === 200) { |
||||
this.$.setData('cusername', res.result.cusername) |
||||
} |
||||
}); |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/tricycle/getSquadronVillageList", { |
||||
nuserId: this.$.getData('userInfo').username, |
||||
}, |
||||
"GET" |
||||
).then(res => { |
||||
if (res.code == 200) { |
||||
this.squadronVillageList = res.result |
||||
} |
||||
}) |
||||
//预警处理类型 |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/tricycle/getHandleTypeEnum", { |
||||
nuserId: this.$.getData('userInfo').username, |
||||
}, |
||||
"GET" |
||||
).then(res => { |
||||
if (res.code == 200) { |
||||
this.handleTypeEnum = res.result |
||||
} |
||||
}) |
||||
this.dealData.handleTime = this.timestampToTime() |
||||
this.dealData.handlePersonnel = this.$.getData('cusername') |
||||
}, |
||||
methods: { |
||||
//取消 |
||||
handleCancel() { |
||||
this.editFlag = false |
||||
this.getDetail(this.formData.warningId) |
||||
}, |
||||
//选择处理类型 |
||||
handleTypeSelect(e) { |
||||
this.dealData.handleType = e.value[0] |
||||
this.handleTypeFlag = false |
||||
}, |
||||
//分配 |
||||
assignTo(e) { |
||||
if (e.value[0].sqcode) { |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/tricycle/submitDistributionStatus", { |
||||
warningId: this.formData.warningId, |
||||
sqCode: e.value[0].sqcode |
||||
}, |
||||
"GET" |
||||
).then(res => { |
||||
if (res.code == 200) { |
||||
this.$.toast(res.result); |
||||
setTimeout(() => { |
||||
this.assignFlag = false |
||||
this.$.back(1) |
||||
}, 500) |
||||
} |
||||
}) |
||||
} |
||||
}, |
||||
//处理 |
||||
handleDeal() { |
||||
const { |
||||
handleType, |
||||
handleResult, |
||||
handlePersonnel, |
||||
handleTime |
||||
} = this.dealData |
||||
let handleImg = '' |
||||
if (this.handleImg[0] && this.handleImg[0]?.url) { |
||||
handleImg = this.handleImg[0]?.url |
||||
} |
||||
|
||||
if (!handleType || !handleResult || !handlePersonnel || !handleTime | !handleImg) { |
||||
return this.$.toast("请输入完成表单必填项"); |
||||
} |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/tricycle/saveTricycleWarningHandle", { |
||||
"warningId": this.formData.warningId, |
||||
handleType, |
||||
handleResult, |
||||
handlePersonnel, |
||||
handleTime, |
||||
handleImg |
||||
}, |
||||
"POST" |
||||
).then(res => { |
||||
if (res.code == 200) { |
||||
this.$.toast(res.result); |
||||
setTimeout(() => { |
||||
this.$.back(2) |
||||
}, 500) |
||||
} |
||||
}) |
||||
}, |
||||
getDetail(warningId) { |
||||
this.formData = {} |
||||
this.$request |
||||
.globalRequest( |
||||
"/hiddenDanger/tricycle/getWarningDetails", { |
||||
warningId |
||||
}, |
||||
"GET" |
||||
) |
||||
.then((res) => { |
||||
if (res.code === 200) { |
||||
if (res.result[0]) { |
||||
this.formData = res.result[0] |
||||
} else { |
||||
this.$.toast("未查询到预警详情，请联系管理员") |
||||
} |
||||
} |
||||
}); |
||||
}, |
||||
|
||||
timestampToTime() { |
||||
var date = new Date() |
||||
var Y = date.getFullYear() + '-'; |
||||
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; |
||||
var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '; |
||||
var h = date.getHours(); |
||||
if (String(h).length < 2) { |
||||
h = '0' + String(h) |
||||
} |
||||
var m = date.getMinutes(); |
||||
if (String(m).length < 2) { |
||||
m = '0' + String(m) |
||||
} |
||||
var s = date.getSeconds(); |
||||
if (String(s).length < 2) { |
||||
s = '0' + String(s) |
||||
} |
||||
return Y + M + D + h + ':' + m + ':' + s; // 返回格式：YYYY-MM-DD |
||||
}, |
||||
|
||||
//获取随机id |
||||
uuid(len, binary) { |
||||
len = !len ? 36 : len; |
||||
binary = !binary ? 16 : binary; |
||||
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx" |
||||
.replace(/[xy]/g, function(c) { |
||||
var r = (Math.random() * binary) | 0, |
||||
v = c == "x" ? r : (r & 0x3) | 0x8; |
||||
return v.toString(binary); |
||||
}) |
||||
.substring(0, len); |
||||
}, |
||||
uploadFilePromise(event) { |
||||
return new Promise((resolve, reject) => { |
||||
let a = uni.uploadFile({ |
||||
url: this.$.baseUrl + "/hiddenDanger/ftp/uploadFileToFtp", // 仅为示例，非真实的接口地址 |
||||
filePath: event?.file.url, |
||||
name: "file", |
||||
formData: { |
||||
position: event.position, |
||||
longitude: event.longitude, |
||||
latitude: event.latitude |
||||
}, |
||||
success: (res) => { |
||||
resolve(res.data); |
||||
}, |
||||
}); |
||||
}); |
||||
}, |
||||
async afterRead(event, key) { |
||||
// console.log(key) |
||||
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式 |
||||
const id = this.uuid(); |
||||
this[key].push({ |
||||
id, |
||||
...event?.file, |
||||
status: "uploading", |
||||
message: "上传中", |
||||
}); |
||||
const result = await this.uploadFilePromise(event); |
||||
const resultInfo = JSON.parse(result); |
||||
const index = this[key]?.findIndex((v) => v.id === id); |
||||
if (resultInfo.code == 200) { |
||||
this[key].splice( |
||||
index, |
||||
1, |
||||
Object.assign(event?.file, { |
||||
status: "success", |
||||
message: "", |
||||
result: resultInfo, |
||||
url: resultInfo.result, |
||||
|
||||
}) |
||||
); |
||||
} else { |
||||
this.$.toast("上传失败"); |
||||
this[key].splice( |
||||
index, |
||||
1, |
||||
|
||||
); |
||||
} |
||||
}, |
||||
// 删除图片 |
||||
deletePic(event, keyName) { |
||||
if (!this.editFlag) { |
||||
return |
||||
} |
||||
this[keyName].splice(event.index, 1); |
||||
}, |
||||
}, |
||||
onReady() {}, |
||||
// 页面卸载 |
||||
onUnload() {}, |
||||
} |
||||
</script> |
||||
|
||||
<style> |
||||
</style> |
||||
<style lang="scss" scoped> |
||||
.itemImg { |
||||
max-width: 660rpx; |
||||
max-height: 580rpx; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.footer-buttons { |
||||
z-index: 3; |
||||
} |
||||
|
||||
page { |
||||
background: #F6F8FA; |
||||
} |
||||
|
||||
|
||||
.query-form { |
||||
|
||||
font-size: 16px; |
||||
height: 44px; |
||||
background: #ffffff; |
||||
box-shadow: 3px 0px 10px #ccc; |
||||
color: #666666; |
||||
position: sticky; |
||||
// top: var(--status-bar-height + 88rpx); |
||||
top: calc(var(--status-bar-height) + 88rpx); |
||||
z-index: 10; |
||||
|
||||
.search-box { |
||||
padding: 10px 10px 3px; |
||||
} |
||||
} |
||||
|
||||
.formBox { |
||||
margin: 30rpx 20rpx; |
||||
border: 1px solid #e6e6e6; |
||||
background: #ffffff; |
||||
padding: 0 20rpx 20rpx; |
||||
box-sizing: border-box; |
||||
|
||||
/deep/ .uni-forms-item--border .uni-forms-item__content { |
||||
justify-content: flex-end; |
||||
text-align: right; |
||||
} |
||||
|
||||
.photo { |
||||
width: 100%; |
||||
|
||||
image { |
||||
width: 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.Box { |
||||
padding-top: var(--status-bar-height); |
||||
|
||||
.Content { |
||||
width: calc(100% - 48rpx); |
||||
padding-bottom: 88rpx; |
||||
} |
||||
|
||||
.Unit { |
||||
padding: 12rpx; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
position: relative; |
||||
box-shadow: 1px 1px 3px #ccc; |
||||
|
||||
.trapezoidal { |
||||
position: absolute; |
||||
top: -0px; |
||||
right: 0px; |
||||
color: #ffffff; |
||||
font-size: 22rpx; |
||||
font-weight: normal; |
||||
z-index: 1; |
||||
} |
||||
|
||||
image { |
||||
width: 200rpx; |
||||
} |
||||
|
||||
.right { |
||||
flex: 1; |
||||
padding-left: 30rpx; |
||||
|
||||
.title { |
||||
font-size: 16px; |
||||
width: 380rpx; |
||||
min-height: 80rpx; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
display: -webkit-box; |
||||
-webkit-line-clamp: 2; |
||||
-webkit-box-orient: vertical; |
||||
} |
||||
|
||||
.type { |
||||
font-size: 14px; |
||||
color: #666; |
||||
font-weight: normal; |
||||
|
||||
text { |
||||
margin-right: 20rpx; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.label-box { |
||||
display: flex; |
||||
align-items: center; |
||||
height: 110rpx; |
||||
font-size: 30rpx; |
||||
font-weight: 600; |
||||
|
||||
.border { |
||||
background-color: #2663BF; |
||||
height: 35rpx; |
||||
width: 6rpx; |
||||
margin-right: 14rpx; |
||||
} |
||||
} |
||||
|
||||
.label-box2 { |
||||
height: 100rpx; |
||||
|
||||
|
||||
} |
||||
|
||||
.label-box-small { |
||||
font-size: 28rpx; |
||||
margin-top: -25rpx; |
||||
font-weight: 500; |
||||
} |
||||
|
||||
.border-bottom { |
||||
border-bottom: 1px #eee solid; |
||||
} |
||||
|
||||
.border-top { |
||||
border-top: 1px #eee solid; |
||||
} |
||||
|
||||
|
||||
/deep/ .uni-forms-item__label { |
||||
font-size: 28rpx; |
||||
height: auto; |
||||
margin-bottom: 20rpx; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
/deep/ .u-input { |
||||
background-color: #ffffff !important; |
||||
} |
||||
|
||||
.detail-item-flex { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
|
||||
.investigation-item-zl { |
||||
.uni-forms-item--border { |
||||
border: none; |
||||
} |
||||
|
||||
border-top: 1px solid #eee; |
||||
} |
||||
|
||||
.btn-right { |
||||
width: 100%; |
||||
text-align: right; |
||||
} |
||||
|
||||
.bottom { |
||||
position: fixed; |
||||
bottom: 0; |
||||
width: calc(100% - 40rpx); |
||||
padding: 18rpx 20rpx; |
||||
height: 80rpx; |
||||
background: #FFFFFF; |
||||
border-top: 1px solid #cccccc; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
z-index: 3; |
||||
} |
||||
|
||||
.Img { |
||||
width: 512rpx; |
||||
height: 440rpx; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.trapezoidal { |
||||
position: relative; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex: 1; |
||||
width: 20%; |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
text-align: center; |
||||
border-radius: 10rpx; |
||||
line-height: 60rpx; |
||||
|
||||
&.primary { |
||||
background: #2663BF; |
||||
color: #fff; |
||||
|
||||
&::after, |
||||
&::before { |
||||
background: #2663BF; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.trapezoidal::before, |
||||
.trapezoidal::after { |
||||
content: ''; |
||||
position: absolute; |
||||
top: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
border-radius: 10rpx; |
||||
background: #E9EDF5; |
||||
z-index: -1; |
||||
transform-origin: bottom; |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.trapezoidal::after { |
||||
left: auto; |
||||
right: 0; |
||||
border-radius: 10rpx; |
||||
background-color: #E9EDF5; |
||||
border-left: 0 none; |
||||
} |
||||
|
||||
.gray { |
||||
color: gray; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
Loading…
Reference in new issue