You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
345 lines
8.2 KiB
345 lines
8.2 KiB
<template> |
|
<view class="list-page" :style="{padding:'20rpx',marginBottom:'100rpx'}"> |
|
<u-form |
|
labelPosition="left" |
|
:model="model1" |
|
:rules="rules" |
|
ref="form1" |
|
labelWidth="200rpx" |
|
:labelStyle="{ |
|
fontSize:'32rpx', |
|
fontWeight:'400', |
|
color:'#020b18', |
|
lineHeight:'50rpx', |
|
}" |
|
> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="事件类型" |
|
prop="userInfo.name" |
|
borderBottom |
|
ref="item1" |
|
> |
|
<u-input |
|
fontSize="28" |
|
placeholder="请选择" |
|
v-model="model1.userInfo.name" |
|
border="none" |
|
></u-input> |
|
</u-form-item> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="手机号" |
|
prop="userInfo.name" |
|
borderBottom |
|
ref="item1" |
|
> |
|
<u-input |
|
fontSize="28" |
|
placeholder="请输入" |
|
v-model="model1.userInfo.name" |
|
border="none" |
|
></u-input> |
|
</u-form-item> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
label="事件地址" |
|
prop="userInfo.name" |
|
borderBottom |
|
ref="item1" |
|
> |
|
<u-input |
|
fontSize="28" |
|
placeholder="请选择" |
|
v-model="model1.userInfo.name" |
|
border="none" |
|
></u-input> |
|
</u-form-item> |
|
<u-form-item |
|
:custom-style="{ |
|
padding:'34rpx 0' |
|
}" |
|
prop="userInfo.name" |
|
ref="item1" |
|
> |
|
<view class="label-title">文字说明</view> |
|
|
|
<view class="tag-group row"> |
|
<view class="tag-container" v-for="(item,index) in tags"> |
|
<view class="tag border-box" :class="{checked:item.checked}" @click="checkboxClick(index)"> |
|
{{ item.name }} |
|
</view> |
|
</view> |
|
</view> |
|
<u-textarea |
|
border="none" |
|
placeholder="请描述您遇到的问题" |
|
height="220" |
|
:custom-style="{ |
|
backgroundColor:'#FAFAFA', |
|
padding:'8rpx 20rpx' |
|
}" |
|
></u-textarea> |
|
</u-form-item> |
|
|
|
<u-form-item |
|
:custom-style="{ |
|
padding:'0 0 34rpx 0' |
|
}" |
|
prop="userInfo.name" |
|
ref="item1" |
|
> |
|
<view class="upload-container row"> |
|
<view class="row"> |
|
<view class="label-title">上传照片或视频</view> |
|
<view class="label-desc">(非必填)</view> |
|
</view> |
|
<view class="upload-item"> |
|
<view class="upload"> |
|
<u-upload |
|
width="160" |
|
height="160" |
|
:fileList="fileList1" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
></u-upload> |
|
</view> |
|
<view class="title">上传照片</view> |
|
</view> |
|
<view class="upload-item"> |
|
<view class="upload"> |
|
<u-upload |
|
width="160" |
|
height="160" |
|
:fileList="fileList1" |
|
name="1" |
|
multiple |
|
:maxCount="10" |
|
uploadIcon="plus" |
|
></u-upload> |
|
</view> |
|
<view class="title">上传视频</view> |
|
</view> |
|
|
|
</view> |
|
</u-form-item> |
|
</u-form> |
|
</view> |
|
<view class="foot-button border-box"> |
|
<u-button |
|
type="primary" |
|
text="保存" |
|
shape="circle" |
|
:custom-style="{ |
|
color:'#020B18', |
|
backgroundColor:'#FF9545', |
|
border:'none', |
|
fontSize:'36', |
|
fontWeight:'400', |
|
height:'80rpx' |
|
}" |
|
></u-button> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import api from '@/utils/functions.js'; |
|
import MzCard from "@/components/MzCard/index.vue"; |
|
|
|
|
|
export default { |
|
components:{ |
|
MzCard |
|
}, |
|
data: { |
|
tags:[ |
|
{ |
|
checked:true, |
|
name:'红绿灯故障' |
|
},{ |
|
checked:false, |
|
name:'存在安全隐患' |
|
},{ |
|
checked:false, |
|
name:'公共设施损坏了' |
|
},{ |
|
checked:false, |
|
name:'环境污染污水' |
|
}, |
|
], |
|
fileList1:[], |
|
model1: { |
|
userInfo: { |
|
name: '', |
|
sex: 1, |
|
}, |
|
}, |
|
rules: { |
|
'userInfo.name': { |
|
type: 'string', |
|
required: true, |
|
message: '请填写姓名', |
|
trigger: ['blur', 'change'] |
|
}, |
|
'userInfo.sex': { |
|
type: 'string', |
|
max: 1, |
|
required: true, |
|
message: '请选择男或女', |
|
trigger: ['blur', 'change'] |
|
}, |
|
}, |
|
sexList:[ |
|
{ |
|
id:1, |
|
name: '男', |
|
disabled: false, |
|
}, |
|
{ |
|
i:2, |
|
name: '女', |
|
disabled: false, |
|
}, |
|
], |
|
list1: [ |
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|
], |
|
title: '暖新人', |
|
loading: true, |
|
staticImage: { |
|
hiImage: imghost + '/index-user-title-hi.png', |
|
dogImage: imghost + '/index-user-title-dog.png', |
|
couponsImage: imghost + '/index-user-coupons-background.png', |
|
indexButtonGroup: [{ |
|
image: imghost + '/index-five-1.png', |
|
url: '/pages/Authentication/index', |
|
title:'丰行侠认证' |
|
},{ |
|
image: imghost + '/index-five-2.png', |
|
url: '/pages/Index/index', |
|
title:'顾问认证' |
|
},{ |
|
image: imghost + '/index-five-3.png', |
|
url: '/pages/Index/index', |
|
title:'线索上传' |
|
},{ |
|
image: imghost + '/index-five-4.png', |
|
url: '/pages/Index/index', |
|
title:'社区顾问库' |
|
},{ |
|
image: imghost + '/index-five-5.png', |
|
url: '/pages/Index/index', |
|
title:'暖新服务' |
|
}, |
|
], |
|
wallpaperBgImage: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|
bg: imghost + '/BG.png', |
|
}, |
|
indexBanner: [ |
|
{ |
|
image: imghost + '/banner.png', |
|
url: '', |
|
} |
|
], |
|
user: { |
|
avatar: imghost + '/banner.png', |
|
nickname: '清晨的风', |
|
coupons: 221, |
|
id: 88685 |
|
}, |
|
isTop: false, |
|
pagePadding: 100, |
|
userInfo: {}, |
|
userExtends: {}, |
|
size:{ |
|
height:0 |
|
} |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
onReady() { |
|
let that = this; |
|
let info = uni.createSelectorQuery().in(this).select('.foot-button'); |
|
info.boundingClientRect(function (data) { |
|
that.size.height = data.height; |
|
console.log('height',that.size.height) |
|
}).exec(function (res) {}); |
|
}, |
|
methods: { |
|
checkboxClick(index){ |
|
console.log(index) |
|
this.tags[index].checked = !this.tags[index].checked; |
|
}, |
|
userCouponsPage() { |
|
wx.navigateTo({ |
|
url: '/pages/UserCoupons/index' |
|
}) |
|
}, |
|
navTo(url) { |
|
wx.navigateTo({ |
|
url: url |
|
}) |
|
}, |
|
updateUserInfo() { |
|
if (this.userInfo) { |
|
this.user.id = this.userInfo.id |
|
this.user.nickname = this.userInfo.name |
|
this.user.avatar = this.userInfo.avatar |
|
} |
|
if (this.userExtends) { |
|
this.user.coupons = this.userExtends.coupon_count |
|
} |
|
} |
|
}, |
|
onPageScroll(res) { |
|
if (res.scrollTop <= 20) { |
|
uni.$emit('isTop', true); |
|
} else { |
|
uni.$emit('isTop', false); |
|
} |
|
|
|
}, |
|
created() { |
|
this.pagePadding = (api.navHeight().navPaddingTop + |
|
api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
}, |
|
mounted() { |
|
|
|
}, |
|
updated() { |
|
|
|
}, |
|
watch: { |
|
"$store.state.userInfo": { |
|
handler(newVal, oldVal) { |
|
this.userInfo = newVal; |
|
this.updateUserInfo(); |
|
} |
|
}, |
|
"$store.state.userExtends": { |
|
handler(newVal, oldVal) { |
|
this.userExtends = newVal; |
|
this.updateUserInfo(); |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |