436 lines
10 KiB
Vue
436 lines
10 KiB
Vue
<template>
|
|
<div class="photo">
|
|
<div class="header" :class="[isFixed ? 'header-active' : '']">
|
|
<div class="status-bar" :style="{height: statusBarHeight + 'px'}"></div>
|
|
<div class="nav-bar">
|
|
<image src="/static/img/left.png" @click="back"/>
|
|
<h2>随手拍</h2>
|
|
</div>
|
|
</div>
|
|
<div class="back-wrapper" @click="back" v-show="!isFixed" :style="{marginTop : statusBarHeight + 'px'}">
|
|
<image src="/static/img/left.png"/>
|
|
</div>
|
|
<div class="photo-header">
|
|
<image class="bg-img" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/photo-bg.png" />
|
|
<h2>随手拍</h2>
|
|
<p>将身边文明或不文明行为拍照上传即可获得积分奖励</p>
|
|
<image class="right-icon" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/right2.png" />
|
|
</div>
|
|
<div class="phone-wrapper">
|
|
<h2>我上传的</h2>
|
|
<div class="list">
|
|
<div class="item" v-for="(item, index) in list" :key="index" @click="preview(item.accessUrl)">
|
|
<image :src="item.accessUrl" mode="aspectFill" />
|
|
<span :class="'status-' + item.status">{{ mapStatus(item.status) }}</span>
|
|
<div class="bottom">
|
|
<i>{{ $dayjs(item.createTime).format('MM-DD HH:mm') }}</i>
|
|
<span v-if="item.integral > 0">积分+{{ item.integral }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<AiEmpty v-if="!list.length"></AiEmpty>
|
|
</div>
|
|
<div class="btn-wrapper">
|
|
<div class="top" @click="isChoose = !isChoose">
|
|
<i v-show="!isChoose"></i>
|
|
<image class="bg-img" v-show="isChoose" src="https://cdn.cunwuyun.cn/wxmp/tianfuxing/Selected.png" />
|
|
<span>同意将上传的内容公开分享到文明广场</span>
|
|
</div>
|
|
<div class="btn" @click="upload" hover-class="text-hover">拍照上传</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
name: 'PhotoReport',
|
|
appName: '随手拍',
|
|
customNavigation: true,
|
|
|
|
data () {
|
|
return {
|
|
isFixed: false,
|
|
statusBarHeight: 20,
|
|
list: [],
|
|
hideStatus: false,
|
|
pageShow: false,
|
|
current: 1,
|
|
isMore: false,
|
|
isChoose: true
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapState(['user', 'token'])
|
|
},
|
|
|
|
onLoad () {
|
|
this.$loading()
|
|
this.getList()
|
|
this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
|
|
},
|
|
methods: {
|
|
back () {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
})
|
|
},
|
|
|
|
preview (url) {
|
|
let imgs = this.list.map(v => v.accessUrl)
|
|
|
|
uni.previewImage({
|
|
urls: imgs,
|
|
current: url
|
|
})
|
|
},
|
|
|
|
mapStatus (status) {
|
|
return {
|
|
'0': '待审核',
|
|
'1': '审核通过',
|
|
'2': '审核拒绝'
|
|
}[status]
|
|
},
|
|
|
|
upload () {
|
|
this.imgList = []
|
|
this.hideStatus = false
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['compressed'],
|
|
sourceType: ['album', 'camera'],
|
|
success: (res) => {
|
|
if (res.tempFilePaths.length > 9) {
|
|
this.$toast(`图片不能超过9张`)
|
|
|
|
return false
|
|
}
|
|
|
|
this.$loading('上传中')
|
|
res.tempFilePaths.forEach((item, index) => {
|
|
if (index === res.tempFilePaths.length - 1) {
|
|
this.hideStatus = true
|
|
}
|
|
|
|
this.$nextTick(() => {
|
|
this.uploadFile(item, res.tempFilePaths.length)
|
|
})
|
|
})
|
|
},
|
|
})
|
|
},
|
|
|
|
uploadFile (img, total) {
|
|
uni.uploadFile({
|
|
url: this.$instance.defaults.baseURL + (process.env.NODE_ENV == 'production' ? '/api' : '') + '/file/add',
|
|
filePath: img,
|
|
name: 'file',
|
|
header: {
|
|
'Content-Type': 'multipart/form-data',
|
|
Authorization: uni.getStorageSync('token'),
|
|
},
|
|
success: (res) => {
|
|
const data = JSON.parse(res.data)
|
|
|
|
if (data.code === 0) {
|
|
this.imgList.push(data.data[0].split(';')[0])
|
|
} else {
|
|
this.$toast(data.msg)
|
|
}
|
|
},
|
|
complete: () => {
|
|
this.$nextTick(() => {
|
|
if (this.imgList.length === total && this.hideStatus) {
|
|
this.$instance.post(`/api/appwechatescalation/addOrUpdate`, {
|
|
type: 0,
|
|
listType: 0,
|
|
openStatus: this.isChoose ? 1 : 0,
|
|
openId: this.user.openId,
|
|
accessUrl: this.imgList[0]
|
|
}).then(res => {
|
|
if (res.code == 0) {
|
|
this.$dialog.alert({
|
|
title: '温馨提示',
|
|
content: '上传成功！请等待后台人员审核'
|
|
}).then(() => {
|
|
}).catch(() => {
|
|
})
|
|
this.isMore = false
|
|
this.current = 1
|
|
this.getList()
|
|
}
|
|
this.$hideLoading()
|
|
this.hideStatus = false
|
|
})
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
getList () {
|
|
if (this.isMore) return
|
|
|
|
this.$instance.post(`/api/appwechatescalation/list`, null, {
|
|
params: {
|
|
current: this.current,
|
|
size: 10,
|
|
listType: 0
|
|
}
|
|
}).then(res => {
|
|
if (res.code === 0) {
|
|
this.$hideLoading()
|
|
if (this.current > 1) {
|
|
this.list = [...this.list, ...res.data.records]
|
|
} else {
|
|
this.list = res.data.records
|
|
}
|
|
|
|
if (res.data.records.length < 10) {
|
|
this.isMore = true
|
|
|
|
return false
|
|
}
|
|
|
|
this.current = this.current + 1
|
|
} else {
|
|
this.isMore = true
|
|
}
|
|
}).catch(() => {
|
|
this.$hideLoading()
|
|
})
|
|
}
|
|
},
|
|
|
|
onPageScroll (params) {
|
|
this.isFixed = params.scrollTop > 60
|
|
},
|
|
|
|
onReachBottom () {
|
|
this.getList()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" socped>
|
|
.photo {
|
|
width: 100vw;
|
|
overflow-x: hidden;
|
|
padding-bottom: 200px;
|
|
|
|
.top {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 32px 20px;
|
|
|
|
image {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
i {
|
|
width: 32px;
|
|
height: 32px;
|
|
border: 1px solid #2D7DFF;
|
|
box-sizing: border-box;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
span {
|
|
font-size: 26px;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
div {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.btn {
|
|
background: #2D7DFF;
|
|
}
|
|
|
|
.back-wrapper {
|
|
position: fixed;
|
|
z-index: 11;
|
|
left: 20px;
|
|
top: 24px;
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
image {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
|
|
.header {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 0;
|
|
width: 100%;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
|
|
&.header-active {
|
|
z-index: 1111;
|
|
opacity: 1;
|
|
background: linear-gradient(180deg, #2D7DFF 0%, #2D7DFF 40%);
|
|
}
|
|
|
|
.nav-bar {
|
|
position: relative;
|
|
height: 88px;
|
|
line-height: 88px;
|
|
color: #fff;
|
|
font-size: 32px;
|
|
text-align: center;
|
|
|
|
image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 40px;
|
|
height: 40px;
|
|
padding: 24px 20px 0 20px;
|
|
box-sizing: content-box;
|
|
}
|
|
}
|
|
}
|
|
|
|
.photo-header {
|
|
position: relative;
|
|
height: 448px;
|
|
padding: 150px 48px 0;
|
|
|
|
.bg-img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 448px;
|
|
}
|
|
|
|
.right-icon {
|
|
position: absolute;
|
|
top: 105px;
|
|
right: 0;
|
|
z-index: 2;
|
|
width: 304px;
|
|
height: 240px;
|
|
}
|
|
|
|
h2 {
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-bottom: 16px;
|
|
font-weight: 700;
|
|
font-size: 64px;
|
|
color: #333333;
|
|
}
|
|
|
|
p {
|
|
z-index: 2;
|
|
width: 420px;
|
|
height: 80px;
|
|
line-height: 1.3;
|
|
font-size: 28px;
|
|
color: #658DC1;
|
|
}
|
|
}
|
|
|
|
.phone-wrapper {
|
|
margin-top: 26px;
|
|
padding: 0 32px;
|
|
|
|
& > h2 {
|
|
margin-bottom: 42px;
|
|
font-size: 34px;
|
|
font-weight: 600;
|
|
color: #333333;
|
|
}
|
|
|
|
.list {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
position: relative;
|
|
width: 336px;
|
|
height: 252px;
|
|
margin-bottom: 20px;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
|
|
& > span {
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 16px;
|
|
z-index: 2;
|
|
height: 48px;
|
|
line-height: 48px;
|
|
padding: 0 16px;
|
|
font-size: 26px;
|
|
text-align: center;
|
|
color: #FF883C;
|
|
background: rgba($color: #000000, $alpha: 0.8);
|
|
border-radius: 8px;
|
|
|
|
&.status-1 {
|
|
color: #3BBC37;
|
|
}
|
|
|
|
&.status-2 {
|
|
color: red;
|
|
}
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
position: absolute;
|
|
justify-content: space-between;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 2;
|
|
width: 100%;
|
|
height: 80px;
|
|
padding: 28px 16px 0;
|
|
background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 100%);
|
|
border-radius: 0 0 16px 16px;
|
|
text-align: center;
|
|
color: #FF883C;
|
|
border-radius: 8px;
|
|
|
|
i {
|
|
font-size: 26px;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
span {
|
|
font-size: 26px;
|
|
color: #FFB94C;
|
|
}
|
|
}
|
|
|
|
image {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|