From 34ad99da11a67ded026f3555c0d24cf962161cd3 Mon Sep 17 00:00:00 2001
From: Administrator <admin>
Date: Thu, 01 Jul 2021 11:59:36 +0800
Subject: [PATCH] 我的页面修改
---
pages/reported/reported.vue | 365 +++++++++++++++++++++++++++-------------------------
1 files changed, 189 insertions(+), 176 deletions(-)
diff --git a/pages/reported/reported.vue b/pages/reported/reported.vue
index e56b758..4256c84 100644
--- a/pages/reported/reported.vue
+++ b/pages/reported/reported.vue
@@ -2,7 +2,7 @@
<view class="policeDetails">
<!-- 自定义顶部导航栏 -->
<!-- <navBarTop :title="'我要报'"></navBarTop> -->
- <uni-nav-bar class="uni-nav-bar-info" :fixed="true" :status-bar="true" >
+ <uni-nav-bar class="uni-nav-bar-info" :fixed="true" :status-bar="true">
<view class="title" slot="default">{{title}}</view>
<view slot="left" class="uni-nav-bar-left" @click="goBack()">
<image :src="backImage"></image>
@@ -11,17 +11,18 @@
<view class="title-right">历史上报</view>
</view>
</uni-nav-bar>
- <view class="row address">
+ <!-- <view class="row address">
<view class="title">地址</view>
- <input v-model="place" placeholder="请输入地址"/>
- </view>
+ <input v-model="place" placeholder="请输入地址" />
+ </view> -->
<view class="time">
<view class="title">时间</view>
- <e-picker :showValue="date" fields="month" mode="dateTime" :style="{color:stimeColor}" class="select_time" @change="stimeChange">{{stime||'请选择时间'}}</e-picker>
+ <e-picker :showValue="date" fields="month" mode="dateTime" :style="{color:stimeColor}" class="select_time"
+ @change="stimeChange">{{stime||'请选择时间'}}</e-picker>
</view>
<view class="desc">
- <view class="title">备注</view>
- <textarea placeholder="请输入备注" v-model="result"></textarea>
+ <view class="title">描述</view>
+ <textarea placeholder="请输入描述" v-model="result"></textarea>
</view>
<view class="photo">
<view class="title">照片上传</view>
@@ -31,10 +32,14 @@
</view>
<seeImgs :imgs="imgs" :videos="[]" @del="delImg" :type="'imgs'"></seeImgs>
<view class="video">
- <view class="title">视频上传:</view>
+ <view class="title">视频上传</view>
<view class="main">
<image @tap="takeVideo" src="../../static/workbench/policeDerails/shiping11.png" mode=""></image>
</view>
+ </view>
+ <view class="row address">
+ <view class="title">地址</view>
+ <input v-model="place" placeholder="请输入地址" />
</view>
<seeImgs :imgs="[]" :videos="videos" @del="delVideo" :type="'videos'"></seeImgs>
<view class="form-btn">
@@ -46,40 +51,40 @@
<script>
import seeImgs from '../../components/seeImges/seeImges.vue';
import navBarTop from '../../components/nav-bar-top/nav-bar-top.vue';
- export default{
+ export default {
components: {
- navBarTop,seeImgs
+ navBarTop,
+ seeImgs
},
data() {
return {
datas: '',
- stime:'',
- date:'',
- stimeColor:"#808080",
- result:'',
- place:"",
+ stime: '',
+ date: '',
+ stimeColor: "#808080",
+ result: '',
+ place: "",
imgs: [],
videos: [],
- title:'事件上报',
- backImage:'../../static/images/nav/back02.png'
+ title: '事件上报',
+ backImage: '../../static/images/nav/back02.png'
}
},
methods: {
//返回上一页
- goBack(){
- uni.navigateBack({
- })
+ goBack() {
+ uni.navigateBack({})
},
-
+
//日期选择
stimeChange(e) {
- // this.stime = e.substr(0,e.length-3);
- this.showValue = e.substr(0,e.length-3),
- this.stime = e;
+ // this.stime = e.substr(0,e.length-3);
+ this.showValue = e.substr(0, e.length - 3),
+ this.stime = e;
//修改颜色
this.stimeColor = "#000000";
},
-
+
//上传
upData() {
console.log('开始上传');
@@ -87,12 +92,12 @@
sname: this.$store.state.puserName,
snumber: this.$store.state.puserID,
phone: this.$store.state.puserIphone,
- stime:this.stime,
- result:this.result,
- place:this.place,
- status:1,
- tpaddress:"",
- spaddress:""
+ stime: this.stime,
+ result: this.result,
+ place: this.place,
+ status: 1,
+ tpaddress: "",
+ spaddress: ""
};
if (this.imgs.length > 0) {
var i = this.imgs;
@@ -100,7 +105,7 @@
// console.log(i[k].src)
dataList.tpaddress += i[k].src + ','
}
- dataList.tpaddress = dataList.tpaddress.substring(0,dataList.tpaddress.length-1);
+ dataList.tpaddress = dataList.tpaddress.substring(0, dataList.tpaddress.length - 1);
}
if (this.videos.length > 0) {
var i = this.videos;
@@ -108,7 +113,7 @@
// console.log(i[k].src)
dataList.spaddress += i[k].src + ','
}
- dataList.spaddress = dataList.spaddress.substring(0,dataList.spaddress.length-1);
+ dataList.spaddress = dataList.spaddress.substring(0, dataList.spaddress.length - 1);
}
// console.log(dataList)
uni.showLoading({
@@ -116,7 +121,7 @@
mask: true
})
uni.request({
- url: this.$store.state.piAPI + 'feedback/feedback/saves',
+ url: this.$store.state.piAPI + 'feedback/feedback/saves',
data: dataList,
method: 'POST',
header: {
@@ -132,7 +137,7 @@
}
});
},
-
+
//图片上传
takePhoto() {
var that = this;
@@ -152,34 +157,34 @@
}
var tempFilePath = res.tempFilePaths;
// try {
- uni.showLoading({
- title: "上传中...",
- mask: true
- })
- var that = this;
- // 循环调用uni.uploadFile ，因微信小程序只支持单文件上传
- for (var i = 0; i < tempFilePath.length; i++) {
- uni.uploadFile({
- // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl', //仅为示例，非真实的接口地址
- url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
- filePath: tempFilePath[i],
- name: 'file',
- formData: {
- 'user': 'test' // 上传附带参数
- },
- success: (data) => {
- uni.showToast({
- title: '上传图片成功！',
- duration: 1000
- });
- // 根据接口具体返回格式 赋值具体对应url
- that.imgs.push({
- id: i,
- src: JSON.parse(data.data).data
- })
- }
- });
- }
+ uni.showLoading({
+ title: "上传中...",
+ mask: true
+ })
+ var that = this;
+ // 循环调用uni.uploadFile ，因微信小程序只支持单文件上传
+ for (var i = 0; i < tempFilePath.length; i++) {
+ uni.uploadFile({
+ // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl', //仅为示例，非真实的接口地址
+ url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
+ filePath: tempFilePath[i],
+ name: 'file',
+ formData: {
+ 'user': 'test' // 上传附带参数
+ },
+ success: (data) => {
+ uni.showToast({
+ title: '上传图片成功！',
+ duration: 1000
+ });
+ // 根据接口具体返回格式 赋值具体对应url
+ that.imgs.push({
+ id: i,
+ src: JSON.parse(data.data).data
+ })
+ }
+ });
+ }
}
});
},
@@ -197,30 +202,30 @@
success(res) {
var tempFilePath = res.tempFilePath;
// try {
- uni.showLoading({
- title: "上传中...",
- mask: true
- })
- uni.uploadFile({
- // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl',
- url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
- filePath: tempFilePath,
- name: 'file',
- formData: {
- 'user': 'test' // 上传附带参数
- },
- success: (data) => {
- uni.showToast({
- title: '上传视频成功！',
- duration: 1000
- });
- // 根据接口具体返回格式 赋值具体对应url
- that.videos.push({
- id: that.videos.length,
- src: JSON.parse(data.data).data
- })
- }
- });
+ uni.showLoading({
+ title: "上传中...",
+ mask: true
+ })
+ uni.uploadFile({
+ // url: 'https://web.byisf.com/api/blade-jfpts/depl/put-depl',
+ url: 'http://web.byisf.com:82/blade-jfpts/depl/put-depl',
+ filePath: tempFilePath,
+ name: 'file',
+ formData: {
+ 'user': 'test' // 上传附带参数
+ },
+ success: (data) => {
+ uni.showToast({
+ title: '上传视频成功！',
+ duration: 1000
+ });
+ // 根据接口具体返回格式 赋值具体对应url
+ that.videos.push({
+ id: that.videos.length,
+ src: JSON.parse(data.data).data
+ })
+ }
+ });
}
})
},
@@ -228,27 +233,32 @@
delVideo(index) {
this.videos.splice(index, 1);
},
+ },
+ mounted() {
+ //去除组件自带的导航条下划线
+ var dom = document.getElementsByClassName('uni-navbar--border');
+ dom[0].style.borderBottomStyle = 'none';
}
}
</script>
<style lang="scss">
-
+
.uni-nav-bar-info {
// font-weight: 550;
-
- .title{
+
+ .title {
position: fixed;
right: 42%;
font-weight: 550;
letter-spacing: 1px;
}
-
- .uni-nav-bar-left{
+
+ .uni-nav-bar-left {
display: flex;
justify-items: center;
-
- image{
+
+ image {
// background-color: #00BFFF;
margin-left: 1rem;
width: 1.6rem;
@@ -256,11 +266,11 @@
border-radius: 100px;
}
}
-
- .right{
+
+ .right {
display: flex;
-
- .title-right{
+
+ .title-right {
position: relative;
font-size: 0.7rem;
color: #808080;
@@ -268,132 +278,135 @@
top: 0.2rem;
}
}
-
-
+
+
}
-
-
+
+
.policeDetails {
- width: 92%;
+ width: 88%;
margin: 0 auto;
display: flex;
flex-direction: column;
-
- .address{
+
+ .address {
width: 100%;
height: 100rpx;
display: flex;
- align-items: center;
- border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
+ justify-content: center;
+ flex-direction: column;
+ // border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
// border-top: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
-
- .title{
- float: left;
+
+ .title {
font-size: 15px;
}
-
- input{
- margin-left: 20px;
+
+ input {
+ flex: 1;
font-size: 14px;
}
}
-
- .time{
+
+ .time {
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
// border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
-
- .title{
+
+ .title {
float: left;
font-size: 15px;
}
-
- .select_time{
+
+ .select_time {
margin-left: 20px;
font-size: 14px;
- }
- }
-
- .desc{
- width: 100%;
- height: 200rpx;
- display: flex;
- border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
-
- .title{
- height: 100rpx;
- line-height: 100rpx;
- float: left;
- font-size: 15px;
- }
-
- textarea{
- // background-color: #00BFFF;
- line-height: 1.5;
- height: 160rpx;
- font-size: 14px;
- position: relative;
- left: 20px;
- top: 28rpx;
}
}
- .photo{
+ .desc {
width: 100%;
- height: 120rpx;
+ height: 15rem;
display: flex;
- align-items: center;
-
- .title{
- font-size: 15px;
- float: left;
- }
-
- image{
- width: 60rpx;
- height: 60rpx;
- margin-left: 20px;
- }
- }
-
- .video{
- width: 100%;
- height: 120rpx;
- display: flex;
- align-items: center;
+ flex-direction: column;
border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
-
- .title{
+
+ .title {
+ height: 100rpx;
+ line-height: 100rpx;
+ font-size: 15px;
+ }
+
+ textarea {
+ // background-color: #00BFFF;
+ width: 100%;
+ border: 1px solid #808080;
+ line-height: 1.5;
+ font-size: 14px;
+ flex: 1;
+ padding-left: 0.2rem;
+ }
+ }
+
+ .photo {
+ width: 100%;
+ height: 120rpx;
+ display: flex;
+ align-items: center;
+
+ .title {
font-size: 15px;
float: left;
}
-
- image{
+
+ image {
width: 60rpx;
height: 60rpx;
margin-left: 20px;
}
}
-
- .form-btn{
+
+ .video {
+ width: 100%;
+ height: 120rpx;
+ display: flex;
+ align-items: center;
+ // border-bottom: 1px solid rgba($color: #f3f3f3, $alpha: 0.7);
+
+ .title {
+ font-size: 15px;
+ float: left;
+ }
+
+ image {
+ width: 60rpx;
+ height: 60rpx;
+ margin-left: 20px;
+ }
+ }
+
+ .form-btn {
margin-top: 2rem;
display: flex;
justify-content: center;
-
+
.butb {
margin-bottom: 4.5rem;
- width: 5.2rem;
- height: 5.2rem;
+ width: 100%;
+ height:3rem;
// border: 1px solid rgb(46, 118, 228);
- border-radius: 3rem;
+ border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
- background-image: linear-gradient(to bottom, #3CA7F4, #4D7CEE);
+ font-weight: 600;
+ font-size: 1.4rem;
+ letter-spacing: 10px;
+ background-image: linear-gradient(to bottom, #3CA7F4, #169BD5);
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3