app_tree_planting/pages/duty/publicactivity.vue
2023-03-03 19:29:04 +08:00

885 lines
21 KiB
Vue

<template>
<view class="page">
<view class="content">
<!-- <scroll-view scroll-y="true" style="height: 95%;padding-bottom: 150rpx;"> -->
<view class="base-person">
<view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">
<text>活动名称</text>
<text style="color: red;">*</text>
</view>
<input @input="inputName" :value="name" placeholder="请输入活动名称" class="item-content"
placeholder-class="item-input" style="text-align: right;" />
</view>
<view class="thick-divider"></view>
<view class="item-box">
<view class="item-title">
<text>开始时间</text>
<text style="color: red;">*</text>
</view>
<picker mode="date" :value="startTime" @change="bindStartChange">
<view class="item-content">{{startTime}}</view>
</picker>
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box">
<view class="item-title">
<text>结束时间</text>
<text style="color: red;">*</text>
</view>
<picker mode="date" :value="endTime" @change="bindEndChange">
<view class="item-content">{{endTime}}</view>
</picker>
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box" style="margin-top: 0px;">
<view class="item-title">
<text>参与人数</text>
<text style="color: red;">*</text>
</view>
<input placeholder-class="item-input" type="number" @input="inputJoinCount" :value="joinCount"
placeholder="请输入参与人数" class="item-content" style="text-align: right;" />
</view>
<view class="thick-divider"></view>
<view class="item-box-v">
<view class="title-icon" @click="chooseLoc">
<view>
<text>活动地址</text>
<text style="color: red;">*</text>
</view>
<image src="/static/images//ic_arrow_right.png" mode="scaleToFill" class="icon"></image>
</view>
<view class="item-content-bg" style="height: 400rpx;padding: 0rpx;">
<map :markers="covers" style="width: 100%;height:400rpx;" :latitude="lat"
:longitude="lng"></map>
</view>
</view>
<view class="item-box">
<view class="item-title">
<text>活动地址</text>
<text style="color: red;">*</text>
</view>
<input @input="inputAddress" :value="address" placeholder="请输入地址" class="item-content"
placeholder-class="item-input" style="text-align: right;" />
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box" style="margin-top: 0px;">
<view class="item-title">
<text>详细地址</text>
<text style="color: red;">*</text>
</view>
<input placeholder-class="item-input" @input="inputDetailAddress" :value="detailAddress"
placeholder="请输入详细地址" class="item-content" style="text-align: right;" />
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box">
<view class="item-title">
<text>活动地区</text>
<text style="color: red;">*</text>
</view>
<picker mode="selector" :value="areaName" @change="bindChangeArea" :range="areaList"
range-key="areaName">
<view class="item-content">{{areaName}}</view>
</picker>
</view>
<view class="thick-divider"></view>
<view class="item-box" style="margin-top: 0px;">
<view class="item-title">
<text>活动主题</text>
</view>
<input placeholder-class="item-input" @input="inputTheme" :value="activityTheme"
placeholder="请输入活动主题" class="item-content" style="text-align: right;" />
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box-v">
<view class="item-title">
<text>活动内容</text>
<text style="color: red;">*</text>
</view>
<view class="item-content-bg">
<textarea maxlength="300" @input="inputContent" :value="content" placeholder="请输入活动内容">
</textarea>
<text class="hint-num">{{content.length}}/300</text>
</view>
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box-v">
<view class="item-title">
<text>宣传图片</text>
<text style="color: red;">*</text>
</view>
<view class="item-content-img" style="background: #ffffff;">
<block v-for="(item,index) in photoList">
<image :src="item.src" @click="choseImg(item,index)" mode="scaleToFill" class="item-img">
</image>
<image src="/static/images/ic_del_icon.png" mode="scaleToFill" class="item-del"
v-if="item.id != '' " @click="delImg(item,index)"></image>
</block>
</view>
</view>
<view style="width: 90%;background: #f2f2f2;height: 1rpx;align-self: center;"></view>
<view class="item-box-v">
<view class="item-title">宣传视频</view>
<view class="item-content-bg" style="background: #ffffff;">
<image class="video-add" src="../../static/images/ic_add_video.png" @click="chooseVideo"
mode="scaleToFill" v-if="videoId==''"></image>
<view class="video-box" v-else >
<image @click="preV()" src="/static/images/ic_video_default.png" mode="center" class="video-default">
</image>
<image src="/static/images/ic_del_icon.png" mode="scaleToFill" @click="delVideo()"
class="del-video">
</image>
</view>
</view>
</view>
</view>
<!-- </scroll-view> -->
<view class="btn-box">
<view class="save-btn" @click="doSave">确认提交</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
name: "", //活动名称
joinCount: '', //参与人数
address: '', //活动地址
token: "",
id: '',
address: '', //活动地址
detailAddress: '', //详细地址
content: '', //活动内容
lat: 40.994496,
lng: 113.132171,
covers: [{
latitude: 40.994496,
longitude: 113.132171,
iconPath: '/static/images/ic_location_marker.png'
}],
photoList: [],
maxPhoto: 3,
imgUrl: this.$api.common.imgUrl,
tempPhoto: {
id: '',
src: '/static/images/ic_add_photo.png'
},
videoSrc: '',
videoId: '',
videoTempSrc: '',
activityTypeId: '', //活动类型
activityTypeName: '', //活动类型
startTime: '请选择开始时间',
endTime: '请选择结束时间',
area: {},
areaList: [],
areaName: '请选择活动地区',
activityTheme: '', //活动主题
}
},
onLoad(res) {
this.activityId = res.id;
this.activityTypeId = res.typeId;
this.activityTypeName = res.typeName;
this.token = getApp().globalData.token;
this.photoList.push(this.tempPhoto)
this.getAreaList()
},
methods: {
bindStartChange(e) {
this.startTime = e.detail.value;
},
bindEndChange(e) {
this.endTime = e.detail.value
},
bindChangeArea(e) {
var index = e.detail.value
this.area = this.areaList[index]
this.areaName = this.areaList[index].areaName
},
//活动名称
inputName(event) {
this.name = event.target.value
},
//参与人数
inputJoinCount(e) {
this.joinCount = e.target.value
},
//活动地址
inputAddress(e) {
this.address = e.target.value;
},
//详细地址
inputDetailAddress(e) {
this.detailAddress = e.target.value
},
//活动内容
inputContent(e) {
this.content = e.target.value;
},
//活动主题
inputTheme(e) {
this.activityTheme = e.target.value
},
//预览视频
preV() {
uni.navigateTo({
url: '/pages/duty/prevideo/prevideo?src=' + this.videoSrc
})
},
chooseLoc() {
var _self = this;
uni.chooseLocation({
latitude: _self.lat,
longitude: _self.lng,
success(res) {
console.log(res)
_self.address = res.name
_self.lat = res.latitude
_self.lng = res.longitude
_self.covers[0].latitude = res.latitude
_self.covers[0].longitude = res.longitude
}
})
},
getAreaList() {
var _self = this
_self.$app.request({
url: _self.$api.common.getAreaByPid + '110889',
method: 'GET',
dataType: 'json',
success: res => {
this.areaList = res
},
fail: res => {
uni.showToast({
icon: 'error',
title: "系统错误"
})
},
complete: res => {
uni.hideLoading()
}
});
},
delImg(item, index) {
var _self = this;
_self.photoList.splice(index, 1)
_self.photoList = _self.photoList
var isAdd = true;
for (var i = 0; i < _self.photoList.length; i++) {
if (_self.photoList[i].id == '') {
isAdd = false;
break;
}
}
if (isAdd) {
var temp = {
id: '',
src: '/static/images/ic_add_photo.png'
};
_self.photoList.push(temp);
}
_self.photoList = _self.photoList
},
delVideo() {
this.videoId = ''
this.videoSrc = ''
},
choseImg(item, index) {
var _self = this
if ('' == item.id) {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function(res) {
console.log(res)
uni.showLoading({
title: "图片上传中...",
})
var startIndex = res.tempFilePaths[0].lastIndexOf("/");
var fileName = res.tempFilePaths[0].substring(startIndex + 1, res.tempFilePaths[0]
.length);
uni.uploadFile({
url: _self.$api.common.doUploadImg,
filePath: res.tempFilePaths[0],
name: 'image',
formData: {
"image": fileName
},
header: {
"token": _self.token
},
success: res => {
if (res.statusCode == 200) {
uni.hideLoading()
var imgData = res.data;
var imgIdObj = JSON.parse(imgData);
var tempItem = {
id: imgIdObj.data,
src: _self.imgUrl + imgIdObj.data
}
//判断数量
if (_self.photoList.length == _self.maxPhoto) {
_self.photoList[_self.photoList.length - 1].id =
imgIdObj.data
_self.photoList[_self.photoList.length - 1].src = _self
.imgUrl + imgIdObj.data
} else {
_self.photoList.splice(0, 0, tempItem)
}
} else {
uni.hideLoading()
uni.showToast({
title: "上传失败,请重试",
duration: 1000
})
}
},
fail: (error) => {
uni.hideLoading()
uni.showToast({
title: "上传失败,请重试",
duration: 1000
})
}
});
}
});
}
},
chooseVideo() {
var _self = this
uni.chooseVideo({
count: 1, //默认9
sourceType: ['album'], //从相册选择
success(res) {
console.log(res)
uni.showLoading({
title: "视频上传中...",
})
var startIndex = res.tempFilePath.lastIndexOf("/");
var fileName = res.tempFilePath.substring(startIndex + 1, res.tempFilePath.length);
var tempPath = res.tempFilePath
uni.uploadFile({
url: _self.$api.common.doUploadVideo,
filePath: res.tempFilePath,
name: 'video',
formData: {
"video": fileName
},
header: {
"token": _self.token
},
success: res => {
if (res.statusCode == 200) {
uni.hideLoading()
var imgData = res.data;
var imgIdObj = JSON.parse(imgData);
_self.videoId = imgIdObj.data
_self.videoSrc = _self
.imgUrl + imgIdObj.data
_self.videoTempSrc = tempPath
} else {
uni.hideLoading()
uni.showToast({
title: "上传失败,请重试",
duration: 1000
})
}
},
fail: (error) => {
uni.hideLoading()
uni.showToast({
title: "上传失败,请重试",
duration: 1000
})
}
});
}
})
},
//校验参数
checkParams() {
if (this.name == "") {
uni.showToast({
icon: 'error',
title: "请输入活动名称"
})
return false;
}
if (this.startTime == '请选择开始时间') {
uni.showToast({
icon: 'error',
title: "请选择开始时间"
})
return false;
}
if (this.endTime == '请选择结束时间') {
uni.showToast({
icon: 'error',
title: "请选择结束时间"
})
return false;
}
if (this.joinCount == '') {
uni.showToast({
icon: 'error',
title: "请输入参与人数"
})
return false;
}
if (this.address == '') {
uni.showToast({
icon: 'error',
title: "请输入活动地址"
})
return false;
}
if (this.detailAddress == '') {
uni.showToast({
icon: 'error',
title: "请输入活动详细地址"
})
return false;
}
if (this.areaName == '请选择活动地区') {
uni.showToast({
icon: 'error',
title: "请选择活动地区"
})
return false;
}
if (this.content == '') {
uni.showToast({
icon: 'error',
title: "请输入活动内容"
})
return false;
}
if (this.photoList.length < 2) {
uni.showToast({
icon: 'error',
title: "请上传宣传图片"
})
return false;
}
return true;
},
doSave() {
var _self = this;
if (_self.checkParams()) {
uni.showLoading({
title: "提交中..."
})
var id = "";
if (_self.photoList.length >= 2) {
for (var i = 0; i < _self.photoList.length; i++) {
if (_self.photoList[i].id != '') {
id += _self.photoList[i].id + ","
}
}
}
//判断Id
if (id.lastIndexOf(',') == id.length - 1) {
var temp = id.substring(0, id.length - 1)
id = temp;
console.log(id)
}
var bean = {
activityType: _self.activityTypeName,
activityTypeId: _self.activityTypeId,
address: _self.address,
areaCode: _self.area.areaCode,
areaName: _self.area.areaName,
content: _self.content,
endTime: _self.endTime,
startTime: _self.startTime,
joinCount: _self.joinCount,
latitude: _self.lat,
longitude: _self.lng,
name: _self.name,
theme: _self.activityTheme,
videos: _self.videoId,
photo: id,
}
_self.$app.request({
url: _self.$api.duty.doSaveActivity,
method: 'POST',
dataType: 'json',
header: {
token: _self.token
},
data: bean,
success: res => {
console.log(res)
if (res.status) {
uni.hideLoading()
uni.showToast({
icon: 'error',
title: "系统错误"
})
} else {
if (res.msg) {
uni.showToast({
icon: 'error',
title: res.msg
})
} else {
uni.hideLoading()
uni.showToast({
icon: 'success',
title: "发布成功",
success() {
setTimeout(function() {
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length -
2]; // 前一个页面
beforePage.$vm.isRefresh = true;
uni.navigateBack()
}, 1000)
}
})
}
}
},
fail: res => {
uni.showToast({
icon: 'error',
title: "系统错误"
})
},
complete: res => {
uni.hideLoading()
}
});
}
}
}
}
</script>
<style lang="scss">
page {
height: 100%;
}
.page {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
background: white;
overflow-y: auto;
}
.content {
flex: 1;
width: 100%;
height: 100rpx;
display: flex;
flex-direction: column;
}
.base-person {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
font-size: 20rpx;
padding-bottom: 180rpx;
.thick-divider {
height: 15rpx;
background: #f2f2f2;
width: 100%;
}
.hint-txt {
padding: 10rpx 40rpx;
color: darkred;
font-size: 20rpx;
background: #f2f2f2;
}
.item-box-v {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 10rpx;
background: white;
align-items: flex-start;
width: 100%;
padding-bottom: 50rpx;
.item-title {
font-size: 28rpx;
padding: 10rpx 30rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
.xing {
color: red;
}
}
.item-content {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding: 10rpx 30rpx;
font-size: 28rpx;
line-height: 28rpx;
}
.item-content-bg {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 20rpx;
width: 85%;
background: #f3f3f3;
border-radius: 10rpx;
align-self: center;
height: 340rpx;
.video-add {
width: 100%;
height: 340rpx;
}
textarea {
font-size: 28rpx;
text-align: left;
width: 100%;
}
.hint-num {
align-self: flex-end;
}
}
.item-content-img {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
padding: 20rpx;
width: 85%;
background: #f3f3f3;
border-radius: 10rpx;
align-self: center;
.item-img {
width: 25%;
height: 140rpx;
padding: 10rpx 4rpx;
}
.item-del {
width: 40rpx;
height: 40rpx;
position: relative;
right: 25rpx;
top: 0rpx;
}
// .item-img:nth-of-type(n+2) {
// margin-left: 10rpx;
// }
textarea {
font-size: 28rpx;
text-align: left;
width: 100%;
}
.hint-num {
align-self: flex-end;
}
}
}
.item-box {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 10rpx;
background: white;
align-items: center;
width: 100%;
font-size: 28rpx;
.item-input {
font-size: 28rpx;
}
.item-title {
font-size: 28rpx;
flex: 0.5;
padding: 15rpx 30rpx;
}
.item-content {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
flex: 1.5;
padding: 15rpx 30rpx;
font-size: 28rpx;
line-height: 28rpx;
}
}
.item {
display: flex;
flex-direction: row;
margin: 20rpx;
justify-content: flex-start;
align-items: center;
width: 95%;
.item-title {
font-size: 25rpx;
width: 100%;
background: #e4f3f2;
padding: 10rpx;
}
.item-title-box {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background: #f2f2f2;
padding: 10rpx;
width: 100%;
.item-title-name {
font-size: 20rpx;
}
.item-title-del {
color: darkgreen;
}
}
input {
margin-top: 20rpx;
padding: 10rpx;
width: 95%;
font-size: 25rpx;
border: 1rpx #d3d3d3 solid;
}
}
}
.video-box {
width: 90%;
height: 350rpx;
position: relative;
top: 0rpx;
left: 0rpx;
.del-video {
width: 48rpx;
height: 48rpx;
position: absolute;
right: -16rpx;
top: -13rpx;
z-index: 9999;
}
.video-default {
width: 100%;
height: 350rpx;
}
}
.add-person {
color: green;
border: 1rpx #c28127 solid;
border-radius: 10rpx;
text-align: center;
align-self: flex-start;
margin-top: 10rpx;
border-radius: 10rpx;
width: 25%;
padding: 10rpx;
}
.btn-box {
width: 100%;
align-items: center;
display: flex;
flex-direction: row;
justify-content: center;
background: white;
bottom: 0;
position: fixed;
.save-btn {
color: white;
background-color: #8cc7b5;
width: 95%;
border-radius: 10rpx;
text-align: center;
align-self: center;
margin-top: 5rpx;
border-radius: 10rpx;
padding: 10rpx;
}
}
.type-change-box {
margin-top: 20rpx;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
}
.title-icon {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
font-size: 28rpx;
align-items: center;
padding: 10rpx 0rpx 10rpx 30rpx;
.icon {
width: 15rpx;
height: 20rpx;
margin-right: 90rpx;
}
}
</style>