卡扣登记
This commit is contained in:
shijingjing
@@ -1,7 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AddGetway">
|
<div class="AddGetway">
|
||||||
<!-- <div class="tips">请确保以下信息全部由本人填写，本人对所填写内容的真实性和完整性负责</div> -->
|
|
||||||
|
|
||||||
<!-- 基本信息 -->
|
<!-- 基本信息 -->
|
||||||
<div class="title">基本信息</div>
|
<div class="title">基本信息</div>
|
||||||
<div class="form-item__group">
|
<div class="form-item__group">
|
||||||
@@ -286,16 +284,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="form-item form-item__imgs">
|
<div style="height: 200px;">
|
||||||
<div class="form-item__wrapper">
|
<NamePhone v-for="(item, index) in people" :key="index" ref="NamePhoneRef" :name.sync="item.name"
|
||||||
<div class="form-item__title">
|
:phone.sync="item.phone" :index="index" @delCountHandle="delCountHandle"/>
|
||||||
<i>*</i>
|
|
||||||
<h2>14天内是否接触新冠确诊或疑似患者</h2>
|
|
||||||
</div>
|
|
||||||
<div class="form-item__right">
|
|
||||||
<AiRadio style="width: 100%;" v-model="form.touchInFourteen" dict="epidemicTouchInFourteen"></AiRadio>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="addCount">
|
||||||
|
<u-button type="primary" @click="addCountHandle">继续添加</u-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@@ -316,7 +310,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapState} from 'vuex'
|
import {mapState} from 'vuex'
|
||||||
|
import NamePhone from './components/namePhone.vue'
|
||||||
export default {
|
export default {
|
||||||
appName: "添加返乡记录",
|
appName: "添加返乡记录",
|
||||||
data() {
|
data() {
|
||||||
@@ -364,10 +358,17 @@ export default {
|
|||||||
arr: [],
|
arr: [],
|
||||||
gridList: [[], [], []],
|
gridList: [[], [], []],
|
||||||
flag: false,
|
flag: false,
|
||||||
$areaId: ''
|
$areaId: '',
|
||||||
|
people: [{
|
||||||
|
name: '',
|
||||||
|
phone: '',
|
||||||
|
}]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
component: {
|
||||||
|
NamePhone,
|
||||||
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(['user'])
|
...mapState(['user'])
|
||||||
@@ -378,6 +379,17 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addCountHandle() {
|
||||||
|
this.people.push({
|
||||||
|
name: "",
|
||||||
|
phone: "",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
delCountHandle(index) {
|
||||||
|
this.people.splice(index, 1);
|
||||||
|
},
|
||||||
|
|
||||||
onDateChange(e) {
|
onDateChange(e) {
|
||||||
this.form.checkTime = `${e.year}-${e.month}-${e.day}`
|
this.form.checkTime = `${e.year}-${e.month}-${e.day}`
|
||||||
},
|
},
|
||||||
@@ -511,15 +523,6 @@ export default {
|
|||||||
.AddGetway {
|
.AddGetway {
|
||||||
padding-bottom: 140px;
|
padding-bottom: 140px;
|
||||||
|
|
||||||
// .tips {
|
|
||||||
// line-height: 1.3;
|
|
||||||
// padding: 32px 32px;
|
|
||||||
// color: #FF883C;
|
|
||||||
// font-size: 30px;
|
|
||||||
// text-align: justify;
|
|
||||||
// background: #FFF8F3;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
padding: 16px 32px 0 32px;
|
padding: 16px 32px 0 32px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
@@ -531,6 +534,14 @@ export default {
|
|||||||
.form-item__group {
|
.form-item__group {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
.addCount {
|
||||||
|
padding: 0 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
::v-deep .u-btn--primary {
|
||||||
|
border-radius: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.form-item {
|
.form-item {
|
||||||
|
|||||||
@@ -1,20 +1,196 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="AppGetwayRegister">
|
<div class="AppGetwayRegister">
|
||||||
<u-button type="primary" @click="$linkTo(`./AddGetway`)">按钮</u-button>
|
<div class="title">
|
||||||
|
<h2>全部记录</h2>
|
||||||
|
<div class="right">
|
||||||
|
<span>共</span>
|
||||||
|
<i>{{ total }}</i>
|
||||||
|
<span>条</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="home-list">
|
||||||
|
<div class="item" hover-class="bg-hover" @click="$linkTo(`./Detail?id=${item.id}`)"
|
||||||
|
v-for="(item, index) in list" :key="index">
|
||||||
|
<div class="item-top">
|
||||||
|
<h2>{{ item.name }}</h2>
|
||||||
|
<span v-if="item.status === '0'">有异常情况</span>
|
||||||
|
</div>
|
||||||
|
<p>{{ item.idNumber.replace(/^(\d{6})\d{8}(.{4}$)/g, `$1${Array(9).join('*')}$2`) }}</p>
|
||||||
|
<div class="item-info">
|
||||||
|
<div class="item-info__item">
|
||||||
|
<image src="/static/img/from-icon.png"/>
|
||||||
|
<span>{{ item.startAreaName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item-info__item">
|
||||||
|
<image src="/static/img/to-icon.png"/>
|
||||||
|
<span>{{ item.arriveAreaName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item-info__item">
|
||||||
|
<image src="/static/img/to-date.png"/>
|
||||||
|
<span>{{ item.arriveTime && item.arriveTime.substr(0, item.arriveTime.length - 3) }} 到达</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<AiEmpty v-if="list.length==0"/>
|
||||||
|
</div>
|
||||||
|
<div class="btn-wrapper">
|
||||||
|
<div class="btn" @click="toReport" hover-class="text-hover">添加卡口登记</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
|
name: "AppGetwayRegister",
|
||||||
appName: "卡口登记",
|
appName: "卡口登记",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
list: [],
|
||||||
|
current: 1,
|
||||||
|
total: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
this.$loading()
|
||||||
|
this.getList()
|
||||||
|
this.$dict.load('villageActivityStatus')
|
||||||
|
uni.$on('update', () => {
|
||||||
|
this.current = 1
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toReport() {
|
||||||
|
this.$linkTo('./AddGetway')
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
this.$instance.post(`/app/appepidemicbackhomerecord/list`, null, {
|
||||||
|
params: {
|
||||||
|
openId: this.user.openId,
|
||||||
|
current: this.current,
|
||||||
|
size: 15
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
uni.hideLoading()
|
||||||
|
if (res?.data) {
|
||||||
|
this.total = res.data.total
|
||||||
|
if (this.current > 1) {
|
||||||
|
this.list = [...this.list, ...res.data.records]
|
||||||
|
} else {
|
||||||
|
this.list = res.data.records
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
uni.hideLoading()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onReachBottom() {
|
||||||
|
this.current++
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" socped>
|
||||||
.AppGetwayRegister {}
|
.AppGetwayRegister {
|
||||||
|
padding: 0 0 150px 0;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
padding: 48px 32px 0 32px;
|
||||||
|
|
||||||
|
& > h2 {
|
||||||
|
font-size: 38px;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #666666;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #4181FF;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin: 0 32px 24px;
|
||||||
|
padding: 32px;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
.item-info {
|
||||||
|
.item-info__item {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
line-height: 1.3;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
flex: 1;
|
||||||
|
color: #333;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #333333;
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #FF4466;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 14px 0 20px;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,15 +1,356 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="DetailGetway"></div>
|
<div class="DetailGetway" v-if="pageShow">
|
||||||
|
<div class="detail-header">
|
||||||
|
<h2>{{ info.name }}的返乡登记信息</h2>
|
||||||
|
<div class="item-info">
|
||||||
|
<div class="item-info__item">
|
||||||
|
<image src="/static/img/from-icon.png"/>
|
||||||
|
<span>{{ info.startAreaName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item-info__item">
|
||||||
|
<image src="/static/img/to-icon.png"/>
|
||||||
|
<span>{{ info.arriveAreaName }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="item-info__item">
|
||||||
|
<image src="/static/img/to-date.png"/>
|
||||||
|
<span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }} 到达</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info">
|
||||||
|
<h2>基本信息</h2>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>姓名</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>身份证号</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.idNumber }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>手机号码</label>
|
||||||
|
</div>
|
||||||
|
<div class="right" @click="call(info.phone)" hover-class="text-hover">
|
||||||
|
<image src="https://cdn.cunwuyun.cn/dvcp/h5/common/phone.png"/>
|
||||||
|
<span style="color: #4181FF">{{ info.phone }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>人员类别</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span :style="{color: /[03]/.test(info.type) ? '#42D784' : '#FF4466'}">{{
|
||||||
|
$dict.getLabel('epidemicMemberType', info.type)
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info">
|
||||||
|
<h2>行程信息</h2>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>出行方式</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ $dict.getLabel('epidemicRecentTravel', info.travelType) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>出发时间</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.startTime && info.startTime.substr(0, info.startTime.length - 3) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>出发地区</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span :style="{color: info.denger == 1 ? '#FF4466' : '#333'}">{{ info.startAreaName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>出发地址</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.startAddress }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>到达时间</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.arriveTime && info.arriveTime.substr(0, info.arriveTime.length - 3) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>返乡地区</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.arriveAreaName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>返乡地址</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.arriveAddress }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>行程描述</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.description }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info">
|
||||||
|
<h2>核酸检测信息</h2>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>核酸检测日期</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span>{{ info.checkTime.split(' ')[0] }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>核酸检测结果</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span :style="{color: info.checkResult === '0' ? '#42D784' : '#FF4466'}">{{
|
||||||
|
$dict.getLabel('epidemicRecentTestResult', info.checkResult)
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item detail-info__item--img">
|
||||||
|
<div class="left" style="max-width: 100%;">
|
||||||
|
<label>本人健康码截图或核酸检测报告</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<image :src="item.url" @click="preview(item.url)" v-for="(item, index) in info.checkPhoto" :key="index"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info">
|
||||||
|
<h2>健康状况</h2>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>当前体温</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span :style="{color: info.temperature >= 37.3 ? '#FF4466' : '#42D784'}">{{ info.temperature }}℃</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>14天内是否接触新冠确诊或疑似患者</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span :style="{color: info.touchInFourteen === '0' ? '#42D784' : '#FF4466'}">{{
|
||||||
|
$dict.getLabel('epidemicTouchInFourteen', info.touchInFourteen)
|
||||||
|
}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="detail-info__item">
|
||||||
|
<div class="left">
|
||||||
|
<label>当前健康状况</label>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<span :style="{color: !info.isHealth ? '#42D784' : '#FF4466'}">{{ info.healthName }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
appName: "卡口登记详情"
|
appName: "卡口登记详情",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
info: {},
|
||||||
|
pageShow: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad(query) {
|
||||||
|
this.$loading()
|
||||||
|
this.$dict.load(['epidemicRecentHealth', 'epidemicRecentTravel', 'epidemicTouchInFourteen', 'epidemicMemberType', 'epidemicRecentTestResult']).then(() => {
|
||||||
|
this.getInfo(query.id)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
preview(url) {
|
||||||
|
uni.previewImage({
|
||||||
|
urls: this.info.checkPhoto.map(v => v.url),
|
||||||
|
current: url
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getInfo(id) {
|
||||||
|
this.$instance.post(`/app/appepidemicbackhomerecord/queryDetailById?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.info = res.data
|
||||||
|
this.info.checkPhoto = JSON.parse(res.data.checkPhoto)
|
||||||
|
let healthName = ''
|
||||||
|
this.info.isHealth = false
|
||||||
|
res.data.health.split(',').forEach(v => {
|
||||||
|
if (v > 0) {
|
||||||
|
this.info.isHealth = true
|
||||||
|
}
|
||||||
|
healthName = healthName + this.$dict.getLabel('epidemicRecentHealth', v)
|
||||||
|
})
|
||||||
|
this.info.healthName = healthName
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.pageShow = true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$hideLoading()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
call(phone) {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: phone
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
.DetailGetway {
|
.DetailGetway {
|
||||||
|
padding-bottom: 40px;
|
||||||
|
|
||||||
|
.detail-header {
|
||||||
|
padding: 32px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
margin-bottom: 32px;
|
||||||
|
color: #333333;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-info {
|
||||||
|
.item-info__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333;
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-info {
|
||||||
|
margin-top: 24px;
|
||||||
|
padding: 0 32px;
|
||||||
|
background: #fff;
|
||||||
|
|
||||||
|
& > h2 {
|
||||||
|
height: 116px;
|
||||||
|
line-height: 116px;
|
||||||
|
font-size: 38px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-info__item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 34px 0;
|
||||||
|
border-bottom: 1px solid #DDDDDD;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: flex;
|
||||||
|
line-height: 1.3;
|
||||||
|
max-width: 360px;
|
||||||
|
|
||||||
|
label {
|
||||||
|
position: relative;
|
||||||
|
color: #999999;
|
||||||
|
font-size: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
max-width: 450px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #333333;
|
||||||
|
font-size: 32px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-info__item--img {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
max-width: 100%;
|
||||||
|
margin-top: 34px;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 226px;
|
||||||
|
height: 226px;
|
||||||
|
margin: 0 9px 9px 0;
|
||||||
|
|
||||||
|
&:nth-of-type(3n) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div class="namePhone">
|
||||||
|
<u-form ref="uForm">
|
||||||
|
<u-form-item label="姓名" :rules="[{ required: true, message: '请输入姓名' }]">
|
||||||
|
<u-input v-model="_name" type="text" placeholder="请输入" maxLength="10" />
|
||||||
|
</u-form-item>
|
||||||
|
<u-form-item label="手机号" :rules="[{ required: true, message: '请输入手机号' }]">
|
||||||
|
<u-input v-model="_phone" type="number" placeholder="请输入" maxLength="11" />
|
||||||
|
</u-form-item>
|
||||||
|
</u-form>
|
||||||
|
<u-button type="warning" @click="removeMe">删除</u-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
name: Number,
|
||||||
|
phone: String,
|
||||||
|
index: Number,
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
_name: {
|
||||||
|
get() {
|
||||||
|
return this.name;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
this.$emit("update:name", val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
_phone: {
|
||||||
|
get() {
|
||||||
|
return this.phone;
|
||||||
|
},
|
||||||
|
set(val) {
|
||||||
|
this.$emit("update:phone", val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
username: "",
|
||||||
|
uaerphone: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
removeMe() {
|
||||||
|
this.$emit("delCountHandle", this.index);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.namePhone {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.uForm {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user