From 44fe1eda9e4106ae105030fb548688812ba1d1e2 Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期五, 21 六月 2024 09:41:52 +0800
Subject: [PATCH] 文件上传完善
---
policy/components/mine.vue | 22 ++++++-
policy/reportPage/reportPage.vue | 2
policy/reportDetails/reportDetails.scss | 8 ++
policy/reportDetails/reportDetails.vue | 16 ++++-
static/policy/phone.png | 0
policy/components/upload.vue | 94 +++++++++++++++++++++++++++++++
static/policy/carmea.png | 0
static/policy/close.png | 0
static/policy/header.png | 0
9 files changed, 134 insertions(+), 8 deletions(-)
diff --git a/policy/components/mine.vue b/policy/components/mine.vue
index b2c0aa7..3f95cd8 100644
--- a/policy/components/mine.vue
+++ b/policy/components/mine.vue
@@ -2,7 +2,8 @@
<view class="page-mine-box">
<view class="top-box">
<view class="user-news">
- <u-avatar :src="src"></u-avatar>
+ <!-- <u-avatar :src="src"></u-avatar> -->
+ <image src="/static/policy/header.png" mode="widthFix"></image>
<view class="user-info">
<view class="user-name">
<view class="inckname">鍒樺皬闆�</view>
@@ -22,7 +23,8 @@
</view>
<view class="show-phone-number" @click="goChangePhone">
<view class="set-flex">
- <u-icon name="phone" size="22"></u-icon>
+ <!-- <u-icon name="phone" size="22"></u-icon> -->
+ <image src="/static/policy/phone.png" mode="widthFix"></image>
<text class="change" >淇敼鎵嬫満鍙�</text>
</view>
<u-icon name="arrow-right"></u-icon>
@@ -38,7 +40,7 @@
export default {
data(){
return {
- src: ''
+ src: '/static/policy/header.png'
}
},
methods: {
@@ -64,6 +66,12 @@
display: flex;
justify-content: flex-start;
align-items: center;
+ image{
+ width: 108rpx;
+ height: 108rpx;
+ background-color: white;
+ border-radius: 50%;
+ }
.user-info{
margin-left: 24rpx;
color: white;
@@ -71,6 +79,7 @@
display: flex;
justify-content: flex-start;
align-items: center;
+ margin-bottom: 24rpx;
.direc{
width: 2rpx ;
height: 20rpx;
@@ -112,6 +121,10 @@
margin-left: 20rpx;
color: #202D44FF;
}
+ image{
+ width: 44rpx;
+ height: 44rpx;
+ }
}
.logout{
text-align: center;
@@ -127,5 +140,8 @@
position: fixed;
bottom: 180rpx;
}
+ .inckname{
+ font-size: 36rpx;
+ }
}
</style>
\ No newline at end of file
diff --git a/policy/components/upload.vue b/policy/components/upload.vue
new file mode 100644
index 0000000..8538aa7
--- /dev/null
+++ b/policy/components/upload.vue
@@ -0,0 +1,94 @@
+<template>
+ <view>
+ <view class="grid-box">
+ <view class="image-box" v-for="(item,index) in imageList" :key="index">
+ <image :src="item" mode="aspectFit"></image>
+ <image src="/static/policy/close.png" mode="widthFix" @click="delImage(index)" class="close"></image>
+ </view>
+ <view class="cam-box" @click="upload" v-if="imageList.length < max">
+ <image src="/static/policy/carmea.png" mode="widthFix"></image>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default {
+ props: {
+ max: {
+ type: Number,
+ default: 9
+ },
+ maxSize: {
+ type: Number,
+ default: 2 * 1024 * 1024
+ }
+ },
+ data() {
+ return {
+ imageList: []
+ }
+ },
+ methods: {
+ upload() {
+ uni.chooseImage({
+ count: 9 - this.imageList.length,
+ success: val => {
+ const value = val.tempFiles.every(item => item.size < this.maxSize)
+ if(!value){
+ uni.showToast({
+ title: '鐓х墖灏哄杩囧ぇ',
+ icon: 'none'
+ })
+ return
+ }
+ this.imageList.push(val.tempFilePaths[0])
+ }
+ })
+ },
+ delImage(index) {
+ this.imageList.splice(index,1)
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .cam-box{
+ background-color: #F4F4F4;
+ border-radius: 10rpx;
+ width: 200rpx;
+ height: 200rpx;
+ text-align: center;
+ line-height: 200rpx;
+ image{
+ width: 28rpx;
+ height: 28rpx;
+ }
+ }
+ .grid-box{
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ grid-gap: 20rpx;
+ }
+ .image-box{
+ width: 200rpx;
+ height: 200rpx;
+ border-radius: 10rpx;
+ position: relative;
+ image{
+ width: 100%;
+ height: 100%;
+ border: 2rpx solid #F4F4F4;
+ border-radius: 10rpx;
+ }
+ .close{
+ width: 44rpx;
+ height: 44rpx;
+ position: absolute;
+ top: -20rpx;
+ right: -20rpx;
+ border: none;
+ }
+ }
+</style>
\ No newline at end of file
diff --git a/policy/reportDetails/reportDetails.scss b/policy/reportDetails/reportDetails.scss
index 3f70ea9..2b64e82 100644
--- a/policy/reportDetails/reportDetails.scss
+++ b/policy/reportDetails/reportDetails.scss
@@ -63,4 +63,12 @@
color: white;
padding: 20rpx 0;
}
+ }
+ .show-hint{
+ color: #FE7B32;
+ padding: 14rpx 16rpx;
+ font-size: 24rpx;
+ background: #fea0320d;
+ border-radius: 8rpx;
+ margin: 24rpx 0;
}
\ No newline at end of file
diff --git a/policy/reportDetails/reportDetails.vue b/policy/reportDetails/reportDetails.vue
index ad98574..cb8dd39 100644
--- a/policy/reportDetails/reportDetails.vue
+++ b/policy/reportDetails/reportDetails.vue
@@ -32,27 +32,34 @@
<view class="form-input">
<view class="form-input-item">
<view class="form-label require">鎵ф硶缁撴灉</view>
- <u-textarea count v-model="form.reasoon" maxlength="500"></u-textarea>
+ <u-textarea placeholder="璇疯緭鍏�..." count v-model="form.reasoon" maxlength="500"></u-textarea>
</view>
+
<view class="form-input-item">
<view class="form-label require">鎵ф硶鐓х墖</view>
<view>
- <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
- :maxCount="10"></u-upload>
+ <view class="show-hint">鍙笂浼�9寮犲浘锛屽崟寮犱笉寰楄秴杩�10m</view>
+ </view>
+ <view>
+ <uploadImage></uploadImage>
</view>
</view>
</view>
</view>
<view class="down">
<view class="button">
- 涓婃姤璁板綍
+ 涓婃姤缁撴灉
</view>
</view>
</view>
</template>
<script>
+ import uploadImage from '@/policy/components/upload.vue'
export default {
+ components: {
+ uploadImage
+ },
data() {
return {
form: {
@@ -106,6 +113,7 @@
});
})
},
+
}
}
</script>
diff --git a/policy/reportPage/reportPage.vue b/policy/reportPage/reportPage.vue
index 442e8fc..9e1e614 100644
--- a/policy/reportPage/reportPage.vue
+++ b/policy/reportPage/reportPage.vue
@@ -104,7 +104,7 @@
methods: {
goReport() {
uni.navigateTo({
- url: `/policy/reportRecord/reportRecord`
+ url: `/policy/reportDetails/reportDetails`
})
},
goRecord() {
diff --git a/static/policy/carmea.png b/static/policy/carmea.png
new file mode 100644
index 0000000..cafd461
--- /dev/null
+++ b/static/policy/carmea.png
Binary files differ
diff --git a/static/policy/close.png b/static/policy/close.png
new file mode 100644
index 0000000..941afc2
--- /dev/null
+++ b/static/policy/close.png
Binary files differ
diff --git a/static/policy/header.png b/static/policy/header.png
new file mode 100644
index 0000000..ae81df2
--- /dev/null
+++ b/static/policy/header.png
Binary files differ
diff --git a/static/policy/phone.png b/static/policy/phone.png
new file mode 100644
index 0000000..54bf9a9
--- /dev/null
+++ b/static/policy/phone.png
Binary files differ
--
Gitblit v1.9.1