<template>
|
<view class="activity-container" :data-theme='theme()' :class="theme() || ''">
|
<form @submit="formSubmit" @reset="formReset">
|
<view class="activity-form p20 pb150">
|
<view class="form-section bg-white radius24">
|
<view class="form-item border-b-e">
|
<textarea class="ww100 f28 lh150" placeholder-class="grary9" style="height: 100rpx;"
|
v-model="formData.name" placeholder="请输入活动标题"></textarea>
|
</view>
|
<view class="form-item">
|
<view class="gray6 f26">请上传活动封面图和分享海报（非必传）</view>
|
<view class="gray9 pb20 pt10 f24">封面图建议尺寸750*350px，分享海报建议尺寸750*1250px</view>
|
<view class="d-b-c">
|
<view class="upload-btn d-c-c d-c pr flex-1 mr10" @click="openUpload('image')">
|
<template v-if="image_path!=''">
|
<image :src="image_path" mode="aspectFit"></image>
|
<view class="delete-img" @click.stop="deleteImg('image')">
|
<text class="iconfont icon-guanbi"></text>
|
</view>
|
</template>
|
<template v-else>
|
<view class="icon iconfont icon-xiangji f60"></view>
|
<view class="gray9">上传封面图</view>
|
</template>
|
</view>
|
<view class="upload-btn d-c-c d-c pr flex-1 ml10" @click="openUpload('pic')">
|
<template v-if="pic_path!=''">
|
<image :src="pic_path" mode="aspectFit"></image>
|
<view class="delete-img tc" @click.stop="deleteImg('pic')">
|
<text class="iconfont icon-guanbi"></text>
|
</view>
|
</template>
|
<template v-else>
|
<view class="icon iconfont icon-xiangji f60"></view>
|
<view class="gray9">上传分享海报</view>
|
</template>
|
</view>
|
</view>
|
</view>
|
<view class="form-item">
|
<textarea class="ww100 f28 lh150 p20 radius12 box-s-b" placeholder-class="grary9" style=" background-color: #f7f7f7;
|
height: 150rpx;" v-model="formData.describe" placeholder="请输入活动简介（选填）"></textarea>
|
</view>
|
</view>
|
<view class="form-section bg-white radius24">
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">活动分类</view>
|
<picker class="" value="" @change="changeCategory" :range="category" range-key='name' :value="category_index">
|
<view class="d-s-c">
|
<view class="make-item input-box flex-1">{{category[category_index].name|| '请选择'}}</view>
|
<view class="icon iconfont icon-jiantou f24"></view>
|
</view>
|
</picker>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">是否走访企业</view>
|
<switch style="transform: scale(0.7); margin-right: -20rpx;" :checked="is_checked_visit" @change="onChangeVisit" />
|
</view>
|
<view class="form-item d-b-c border-b-e" v-if="is_checked_visit">
|
<view class="item-title">被走访企业</view>
|
<view class="d-s-c" @click="selectSupplier('visit')">
|
<view class="make-item input-box flex-1">{{visit_supplier_name||'请选择'}}</view>
|
<view class="icon iconfont icon-jiantou f24"></view>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e" v-else>
|
<view class="item-title">提供场地企业</view>
|
<view class="d-s-c" @click="selectSupplier('space')">
|
<view class="make-item input-box flex-1">{{space_supplier_name||'请选择'}}</view>
|
<view class="icon iconfont icon-guanbi f24 ml10" @click.stop="cancelSpace" v-if="space_supplier_name"></view>
|
<view class="icon iconfont icon-jiantou f24" v-else></view>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">活动费用（元）</view>
|
<input type="number" v-model="formData.fee" class="tr flex-1" placeholder='请输入活动费用，0表示免费' />
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">活动名额（人）</view>
|
<input type="number" v-model="formData.limit_num" class="tr flex-1" placeholder='请输入活动名额，0表示不限制' />
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">报名开始时间</view>
|
<view class="d-s-c">
|
<uni-datetime-picker
|
type="datetime"
|
v-model="formData.register_start_time"
|
:border="false"
|
:clearIcon="false"
|
/>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">报名结束时间</view>
|
<view class="d-s-c">
|
<uni-datetime-picker
|
type="datetime"
|
v-model="formData.register_end_time"
|
:border="false"
|
:clearIcon="false"
|
/>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">活动开始时间</view>
|
<view class="d-s-c">
|
<uni-datetime-picker
|
type="datetime"
|
v-model="formData.activity_start_time"
|
:border="false"
|
:clearIcon="false"
|
/>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">活动结束时间</view>
|
<view class="d-s-c">
|
<uni-datetime-picker
|
type="datetime"
|
v-model="formData.activity_end_time"
|
:border="false"
|
:clearIcon="false"
|
/>
|
</view>
|
</view>
|
<view class="form-item border-b-e">
|
<view class="d-b-c">
|
<view class="item-title">活动限定范围（米）</view>
|
<input type="number" v-model="formData.radius" class="tr flex-1" placeholder='请输入活动费用，0表示免费' />
|
</view>
|
<view class="gray9 pt10">用户在限定范围内才能进行核销签到等操作，0为不限制</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">活动地址</view>
|
<view class="d-s-c flex-1" @click="chooseLocation">
|
<input type="text" v-model="address.location_address" class="tr flex-1" disabled placeholder='请选择活动地点' />
|
<text class="iconfont icon-jiantou f24"></text>
|
</view>
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">门牌号</view>
|
<input type="text" v-model="address.house_number" class="tr flex-1" placeholder='例：6栋201室' />
|
</view>
|
<view class="form-item d-b-c border-b-e">
|
<view class="item-title">联系电话</view>
|
<input type="text" v-model="address.phone" class="tr flex-1" placeholder='请输入活动联系电话' />
|
</view>
|
</view>
|
</view>
|
<view class="footer-btn p20 bg-white">
|
<button class="theme-btn" form-type="submit" type="default">提交</button>
|
</view>
|
</form>
|
<!-- 上传图片 -->
|
<Upload v-if="isupload" :type="upload_type" @getImgs="returnImgsFunc"></Upload>
|
<!-- 企业弹窗 -->
|
<Supplier :isOpenSupplier="open_supplier" @close="closeSupplierFunc"></Supplier>
|
</view>
|
</template>
|
|
<script>
|
import Upload from '@/components/upload/upload.vue';
|
import Supplier from './popup/supplier';
|
import uDatetimePicker from '@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker';
|
export default {
|
components: {
|
uDatetimePicker,
|
Upload,
|
Supplier
|
},
|
data() {
|
return {
|
loading: false,
|
/*是否上传图片*/
|
isupload: false,
|
image_path: '',
|
pic_path: '',
|
formData: {
|
name: '',
|
category_id: '',
|
image_id: '', // 封面
|
pic_id: '', // 分享海报
|
sort: 100,
|
is_visit: 0, // 是否需要走访企业
|
visit_supplier_id: '', // 被走访企业
|
space_supplier_id: '', // 提供场地企业
|
background_color: '',
|
status: 1,
|
content: '',
|
describe: '',
|
fee: 0,
|
limit_num: 0,
|
address: '',
|
longitude: '',
|
latitude: '',
|
phone: '',
|
register_start_time: '',
|
register_end_time: '',
|
activity_start_time: '',
|
activity_end_time: '',
|
radius: 0, // 活动限定范围，在范围内才能进行相关操作，如签到、下单
|
},
|
/*活动类别*/
|
category: [],
|
categoryForPicker: {},
|
category_index: '', // 选择的活动分类索引
|
upload_type: 'image', // 封面image 分享海报pic
|
open_supplier: false,
|
visit_supplier_name: '', // 走访企业
|
space_supplier_name: '', // 提供场地企业
|
supplier_type: 'visit',
|
is_checked_visit: false,
|
address: {}, // 临时获取的地址
|
location_address: '', // 从地图获取到的地址
|
};
|
},
|
created() {
|
this.getCategoryList();
|
},
|
methods: {
|
// 提交
|
formSubmit() {
|
let self = this;
|
let formData = this.formData;
|
formData.location_address = self.address.location_address;
|
formData.house_number = self.address.house_number;
|
formData.address = self.location_address + self.address.house_number;
|
formData.is_visit = self.is_checked_visit ? 1 : 0;
|
if (formData.name == '') {
|
uni.showToast({
|
title: '请输入活动标题',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.category_id == '') {
|
uni.showToast({
|
title: '请选择活动分类',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.is_visit && !formData.visit_supplier_id) {
|
uni.showToast({
|
title: '请选择被走访的企业',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.start_time == '') {
|
uni.showToast({
|
title: '请选择活动开始时间',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.end_time == '') {
|
uni.showToast({
|
title: '请选择活动结束时间',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
if (formData.location_address == '') {
|
uni.showToast({
|
title: '请选择活动地点',
|
duration: 1000,
|
icon: 'none'
|
});
|
return false;
|
}
|
// if (formData.phone == '') {
|
// uni.showToast({
|
// title: '请输入活动联系电话',
|
// duration: 1000,
|
// icon: 'none'
|
// });
|
// return false;
|
// }
|
// let reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
|
// if (!reg.test(formData.phone)) {
|
// uni.showToast({
|
// title: '联系电话格式不正确',
|
// duration: 1000,
|
// icon: 'none'
|
// });
|
// return false;
|
// }
|
uni.showLoading({
|
title: '正在提交',
|
mask: true
|
});
|
self._post('branch.admin.activity/add', {formData: JSON.stringify(formData)}, function(res) {
|
self.showSuccess(res.msg, function() {
|
self.gotoPage('/pages/branch/admin/activity/index')
|
}, null, function(){
|
uni.hideLoading();
|
});
|
});
|
},
|
|
/*上传*/
|
openUpload(t) {
|
this.upload_type = t;
|
this.isupload = true;
|
},
|
|
/*获取图片*/
|
returnImgsFunc(e) {
|
let self = this;
|
if (e != null) {
|
if (self.upload_type == 'image') {
|
this.formData.image_id = e[0].file_id;
|
this.image_path = e[0].file_path;
|
} else {
|
this.formData.pic_id = e[0].file_id;
|
this.pic_path = e[0].file_path;
|
}
|
}
|
this.isupload = false;
|
},
|
|
/*删除图片*/
|
deleteImg(n){
|
this[n + '_path'] = '';
|
this.formData[n + '_id'] = '';
|
},
|
|
/*获取活动类别*/
|
getCategoryList() {
|
let self = this;
|
self._get(
|
'branch.admin.category/lists', {},function(res) {
|
self.loading = false;
|
self.category = res.data.list;
|
// self.categoryForPicker = self.category.map(item => {
|
// return item.name;
|
// });
|
}
|
);
|
},
|
|
// 选择活动分类
|
changeCategory(e) {
|
this.category_index = e.target.value;
|
this.formData.category_id = this.category[this.category_index].category_id;
|
},
|
|
// 打开企业选择弹窗
|
selectSupplier(e) {
|
this.supplier_type = e;
|
this.open_supplier = true;
|
},
|
|
// 关闭企业选择弹窗
|
closeSupplierFunc(e) {
|
if (e != null) {
|
if (this.supplier_type == 'visit') {
|
this.formData.visit_supplier_id = e.shop_supplier_id;
|
this.visit_supplier_name = e.name;
|
} else {
|
this.formData.space_supplier_id = e.shop_supplier_id;
|
this.space_supplier_name = e.name;
|
}
|
}
|
this.open_supplier = false;
|
},
|
|
// 是否走访企业
|
onChangeVisit(e) {
|
this.is_checked_visit = e.target.value;
|
if (this.is_checked_visit) {
|
this.space_supplier_name = '';
|
this.formData.space_supplier_id = '';
|
} else {
|
this.visit_supplier_name = '';
|
this.formData.visit_supplier_id = '';
|
}
|
},
|
|
// 取消选择的提供场地企业
|
cancelSpace() {
|
this.formData.space_supplier_id = '';
|
this.space_supplier_name = '';
|
},
|
|
// 选择活动时间
|
changeTime(e) {
|
console.log(this.formData.start_time)
|
},
|
|
// 打开地图选择地址 by lyzflash
|
chooseLocation(n) {
|
let self=this;
|
uni.chooseLocation({
|
success: function (res) {
|
console.log(res)
|
self.formData.longitude=res.longitude;
|
self.formData.latitude=res.latitude;
|
self.location_address=res.address;
|
self.address.house_number=res.name;
|
// 整理地址
|
self.organizeLocationAddress();
|
},
|
fail:function () {
|
console.log('获取失败')
|
}
|
});
|
},
|
|
// 整理地址（分离省市区） by lyzflash
|
organizeLocationAddress() {
|
let self = this;
|
self._get('user.address/setLocationAddress', {
|
address: self.location_address
|
}, function(res) {
|
self.$set(self.address, 'location_address', res.data.short_address);
|
// self.province_id = res.data.cityCode[0];
|
// self.city_id = res.data.cityCode[1];
|
// self.region_id = res.data.cityCode[2];
|
self.region = res.data.region;
|
});
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.activity-form {
|
|
.form-section {
|
padding: 0 20rpx;
|
|
+ .form-section {
|
margin-top: 20rpx;
|
}
|
|
.form-item {
|
padding: 20rpx 0;
|
font-size: 26rpx;
|
|
.upload-btn {
|
height: 300rpx;
|
border-radius: 12rpx;
|
overflow: hidden;
|
border: 1rpx solid #eee;
|
|
image {
|
width: 360rpx;
|
height: 300rpx;
|
}
|
|
.delete-img {
|
position: absolute;
|
width: 50rpx;
|
height: 50rpx;
|
background: rgba(0,0,0,.5);
|
border-radius: 50rpx;
|
line-height: 50rpx;
|
right: 0;
|
top: 0;
|
}
|
}
|
}
|
}
|
|
}
|
.footer-btn {
|
position: fixed;
|
left: 0;
|
bottom: 0;
|
width: 100%;
|
box-sizing: border-box;
|
z-index: 9;
|
border-top: 1rpx solid #eeeeee;
|
}
|
</style>
|
