You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
522 lines
14 KiB
522 lines
14 KiB
<template>
|
|
<view>
|
|
<lf-nav title="新增活动" :showIcon="true" bgColor="#f8f8f8"></lf-nav>
|
|
<view class="content">
|
|
<view class="list">
|
|
<view class="title">标题</view>
|
|
<input class="input" placeholder="请输入标题" v-model="title" />
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">副标题</view>
|
|
<input class="input" placeholder="请输入副标题" v-model="subtitle" />
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">活动开始时间</view>
|
|
<view class="select" @click="show_activity_startdate = true">
|
|
<text>{{ activity_startdate || '请选择' }}</text>
|
|
<text class="lf-iconfont icon-xiangxia"></text>
|
|
</view>
|
|
<u-picker v-model="show_activity_startdate"
|
|
mode="time" :params="params" :default-time="activity_startdate"
|
|
@confirm="selectDate($event, 'activity_startdate')">
|
|
</u-picker>
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">活动结束时间</view>
|
|
<view class="select" @click="show_activity_enddate = true">
|
|
<text>{{ activity_enddate || '请选择' }}</text>
|
|
<text class="lf-iconfont icon-xiangxia"></text>
|
|
</view>
|
|
<u-picker v-model="show_activity_enddate"
|
|
mode="time" :params="params"
|
|
@confirm="selectDate($event, 'activity_enddate')">
|
|
</u-picker>
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">报名开始时间</view>
|
|
<view class="select" @click="show_sign_start = true">
|
|
<text>{{ sign_startdate || '请选择' }}</text>
|
|
<text class="lf-iconfont icon-xiangxia"></text>
|
|
</view>
|
|
<u-picker v-model="show_sign_start"
|
|
mode="time" :params="params"
|
|
@confirm="selectDate($event, 'sign_startdate')">
|
|
</u-picker>
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">报名结束时间</view>
|
|
<view class="select" @click="show_sign_end = true">
|
|
<text>{{ sign_enddate || '请选择' }}</text>
|
|
<text class="lf-iconfont icon-xiangxia"></text>
|
|
</view>
|
|
<u-picker v-model="show_sign_end"
|
|
mode="time" :params="params"
|
|
@confirm="selectDate($event, 'sign_enddate')">
|
|
</u-picker>
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">谁可参与</view>
|
|
<view class="select" @click="show_levels = true">
|
|
<text>{{ (levels_list[levels_index] && levels_list[levels_index].name) || '请选择' }}</text>
|
|
<text class="lf-iconfont icon-xiangxia"></text>
|
|
</view>
|
|
<u-picker v-model="show_levels"
|
|
mode="selector"
|
|
:range="levels_list"
|
|
range-key="name"
|
|
@confirm="levelsConfirm">
|
|
</u-picker>
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">活动内容</view>
|
|
<input class="input" placeholder="请输入活动内容" v-model="activity_content" />
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">活动人数</view>
|
|
<input class="input" placeholder="请输入活动人数" v-model="activity_num" />
|
|
</view>
|
|
<view class="list">
|
|
<view class="title">活动规则</view>
|
|
<textarea class="textarea" placeholder="请输入活动规则内容" v-model="activity_rule"></textarea>
|
|
</view>
|
|
<!-- 上传图片 -->
|
|
<view class="list">
|
|
<view class="title">活动图片</view>
|
|
<view class="my-images">
|
|
<view class="my-image-item" @click="uploadImage" v-if="image_list.length < image_count">
|
|
<text class="lf-iconfont icon-jia my-image-item-after"></text>
|
|
</view>
|
|
<view class="my-image-item" v-for="(item, index) in image_list" :key="index" @click="lookImage(index)">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
<view class="remove-image" @click.stop="removeInage(index)">
|
|
<text class="lf-iconfont icon-shanchu"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class="buttom" hover-class="lf-opacity" @click="submit" v-if="id == 0">立即新增</button>
|
|
<view class="btn-box" v-else>
|
|
<view class="btn2" hover-class="lf-opacity" @click="submit">保持修改</view>
|
|
<view class="btn2"
|
|
style="background-color: #bd1a1a;"
|
|
hover-class="lf-opacity"
|
|
@click="deleteActivity">删除活动
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { config } from '@/common/js/utils.js';
|
|
|
|
export default {
|
|
data(){
|
|
return {
|
|
title: '', // 标题
|
|
subtitle: '', // 副标题
|
|
show_activity_startdate: false, // 活动开始时间
|
|
show_activity_enddate: false, // 活动开始时间
|
|
activity_startdate: '',
|
|
activity_enddate: '',
|
|
show_sign_start: false, // 报名时间
|
|
show_sign_end: false, // 报名时间
|
|
sign_startdate: '',
|
|
sign_enddate: '',
|
|
activity_content: '', // 活动内容
|
|
activity_num: '', // 活动人数
|
|
activity_rule: '', // 活动规则
|
|
image_list: [], // 刚上传的图片临时路径
|
|
image_count: 1, // 可上传多少张图
|
|
uploadImg: [], // 已经上传给后端的图片路径
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true
|
|
},
|
|
token: '',
|
|
levels_list: [], // 会员等级列表
|
|
show_levels: false, // 参与会员
|
|
levels_index: null,
|
|
id: 0, // 0表示创建活动，大于0 修改活动
|
|
user_level: null
|
|
}
|
|
},
|
|
onLoad(options){
|
|
this.token = this.$cookieStorage.get('store_token');
|
|
console.log("config", config);
|
|
this.getActivityLevels();
|
|
if(options.id){
|
|
this.id = Number(options.id);
|
|
this.getActivityDetail();
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取活动详情
|
|
getActivityDetail(){
|
|
uni.showLoading({
|
|
title: '正在获取信息'
|
|
})
|
|
this.$http.get({
|
|
api: 'api/supplier/activity/detail',
|
|
data: {
|
|
id: this.id
|
|
},
|
|
header: {
|
|
token: this.token
|
|
}
|
|
}).then(res => {
|
|
if(res.data.code == 200){
|
|
let data = res.data.data;
|
|
this.title = data.name;
|
|
this.subtitle = data.username;
|
|
this.activity_startdate = data.time_start;
|
|
this.activity_enddate = data.time_end;
|
|
this.sign_startdate = data.apply_start;
|
|
this.sign_enddate = data.apply_end;
|
|
this.activity_content = data.content;
|
|
this.activity_num = data.member_count;
|
|
this.activity_rule = data.rule;
|
|
this.image_list = [data.image];
|
|
this.uploadImg = [data.image];
|
|
if(data.user_level != 0){
|
|
this.user_level = data.user_level;
|
|
}
|
|
}else{
|
|
uni.showModal({
|
|
title: '',
|
|
content: '活动信息获取失败了，请离开此页面稍后再试！'
|
|
})
|
|
}
|
|
uni.hideLoading();
|
|
}).catch(err => uni.hideLoading())
|
|
},
|
|
// 删除活动
|
|
deleteActivity(){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您确定删除该活动吗？',
|
|
success: result => {
|
|
if(result.confirm){
|
|
this.$http.post({
|
|
api: 'api/supplier/activity/destroy',
|
|
data: {
|
|
id: this.id
|
|
},
|
|
header: {
|
|
token: this.token
|
|
}
|
|
}).then(res => {
|
|
if(res.data.code == 200){
|
|
this.$msg(res.data.data || '活动已删除').then(() => {
|
|
this.$toBack();
|
|
})
|
|
}else{
|
|
this.$msg(res.data.data || rea.data.message || '删除失败');
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// 获取会员等级列表
|
|
getActivityLevels(){
|
|
this.$http.get({
|
|
api: 'api/supplier/activity/levels',
|
|
header: {
|
|
token: this.token
|
|
}
|
|
}).then(res => {
|
|
let levels_list = res.data.data || [];
|
|
levels_list.unshift({
|
|
id: 0,
|
|
name: '不限会员等级'
|
|
});
|
|
this.levels_list = levels_list;
|
|
if(this.user_level != null){
|
|
levels_list.map((item, index) => {
|
|
if(item.id == this.user_level){
|
|
this.levels_index = index;
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 选择会员等级
|
|
levelsConfirm(event){
|
|
this.levels_index = event[0];
|
|
},
|
|
// 选择时间
|
|
selectDate(e, key){
|
|
this[key] = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
|
|
},
|
|
// 上传图片
|
|
uploadImage(){
|
|
let current_count = this.image_count - this.image_list.length;
|
|
if(current_count == 0) return;
|
|
uni.chooseImage({
|
|
count: current_count,
|
|
complete: result => {
|
|
if(result.errMsg == "chooseImage:fail cancel"){
|
|
return; // 取消选择图片
|
|
}
|
|
let tempFiles = result.tempFiles;
|
|
let image_list = [];
|
|
let overstep = false;
|
|
tempFiles.map(item => {
|
|
// 上传的图片需小于10MB
|
|
if(item.size < 10000000){
|
|
image_list.push(item.path);
|
|
}else{
|
|
overstep = true;
|
|
}
|
|
})
|
|
if(overstep){
|
|
uni.showModal({
|
|
title: '温馨提示',
|
|
content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
|
|
showCancel: false
|
|
})
|
|
}
|
|
this.image_list.push(...image_list);
|
|
}
|
|
})
|
|
},
|
|
// 将图片临时路径上传到后端，得到线上图片地址
|
|
uploadDiscover(img) {
|
|
return new Promise((resolve, reject) => {
|
|
uni.showLoading({
|
|
title: '正在上传中'
|
|
})
|
|
uni.uploadFile({
|
|
header: {
|
|
token: this.token
|
|
},
|
|
url: `${config.GLOBAL.baseUrl}api/supplier/upload_image`,
|
|
filePath: img,
|
|
fileType: 'image',
|
|
name: 'image',
|
|
success: res => {
|
|
var result = JSON.parse(res.data).data.url;
|
|
// this.uploadImg.push(result)
|
|
// console.log('上传后的图片路径',this.uploadImg)
|
|
uni.hideLoading();
|
|
resolve(result);
|
|
},
|
|
fail: err => {
|
|
console.log(err)
|
|
uni.hideLoading();
|
|
reject(err);
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 预览图片
|
|
lookImage(current){
|
|
if(this.image_list.length <= 0) return;
|
|
this.$u.throttle(() => {
|
|
uni.previewImage({
|
|
urls: this.image_list,
|
|
current: current
|
|
});
|
|
}, 500);
|
|
},
|
|
// 移除图片
|
|
removeInage(current){
|
|
this.image_list.splice(current, 1);
|
|
if(this.uploadImg.length){
|
|
this.uploadImg.splice(current, 1);
|
|
}
|
|
},
|
|
// 提交
|
|
submit(){
|
|
if(!this.title) return this.$msg('请输入标题');
|
|
if(!this.subtitle) return this.$msg('请输入副标题');
|
|
if(!this.activity_startdate) return this.$msg('未选择活动开始时间');
|
|
if(!this.activity_enddate) return this.$msg('未选择活动结束时间');
|
|
if(!this.sign_startdate) return this.$msg('未选择报名开始时间');
|
|
if(!this.sign_enddate) return this.$msg('未选择报名结束时间');
|
|
if(!this.activity_content) return this.$msg('请填写活动内容');
|
|
if(!this.activity_num) return this.$msg('请填写活动人数');
|
|
if(!this.activity_rule) return this.$msg('请填写活动规则');
|
|
if(!this.image_list.length) return this.$msg('请上传活动封面图');
|
|
|
|
if(this.uploadImg.length){
|
|
this.submitHttp();
|
|
}else{
|
|
this.uploadDiscover(this.image_list[0]).then(res => {
|
|
console.log("submit", res);
|
|
this.uploadImg = [res];
|
|
this.submitHttp();
|
|
})
|
|
}
|
|
},
|
|
submitHttp(){
|
|
uni.showLoading({
|
|
title: '正在提交中'
|
|
})
|
|
let par = {
|
|
id: this.id,
|
|
name: this.title,
|
|
username: this.subtitle,
|
|
member_count: this.activity_num,
|
|
image: this.uploadImg[0],
|
|
time_start: this.activity_startdate,
|
|
time_end: this.activity_enddate,
|
|
apply_start: this.sign_startdate,
|
|
apply_end: this.sign_enddate,
|
|
content: this.activity_content,
|
|
rule: this.activity_rule,
|
|
user_level: 0
|
|
}
|
|
if(this.levels_index != null){
|
|
par.user_level = this.levels_list[this.levels_index].id;
|
|
}
|
|
this.$http.post({
|
|
api: 'api/supplier/activity/store',
|
|
data: par,
|
|
header: {
|
|
token: this.token
|
|
}
|
|
}).then(res => {
|
|
console.log("``````", res);
|
|
if(res.data.code == 200){
|
|
this.$msg('操作成功', {icon: 'success'}).then(() => {
|
|
this.$toBack();
|
|
})
|
|
}else{
|
|
uni.showModal({
|
|
title: '',
|
|
content: res.data.message || '新增活动失败！',
|
|
showCancel: false
|
|
})
|
|
}
|
|
uni.hideLoading()
|
|
}).catch(err => uni.hideLoading())
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content{
|
|
padding: 30rpx 32rpx;
|
|
width: 750rpx;
|
|
height: max-content;
|
|
.list{
|
|
width: 100%;
|
|
padding-bottom: 60rpx;
|
|
.title{
|
|
font-size: 28rpx;
|
|
color: #222222;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.input{
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: rgba(14, 47, 158, 0.05);
|
|
border-radius: 5rpx;
|
|
padding: 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
.select{
|
|
width: 100%;
|
|
height: 80rpx;
|
|
padding: 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: rgba(14, 47, 158, 0.05);
|
|
border-radius: 5rpx;
|
|
border: 1rpx solid #0E2F9E;
|
|
font-size: 28rpx;
|
|
color: #0E2F9E;
|
|
}
|
|
.textarea{
|
|
width: 686rpx;
|
|
height: 283rpx;
|
|
background: rgba(14, 47, 158, 0.05);
|
|
border-radius: 5rpx;
|
|
padding: 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
}
|
|
|
|
.my-images{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 30rpx;
|
|
margin-bottom: 18rpx;
|
|
.my-image-item{
|
|
width: 220rpx;
|
|
height: 220rpx;
|
|
// background: #DDDDDD;
|
|
background-color: rgba(14, 47, 158, 0.05);
|
|
position: relative;
|
|
margin-right: 12rpx;
|
|
&:nth-child(3n){
|
|
margin-right: 0rpx;
|
|
}
|
|
&:nth-child(n+4){
|
|
margin-top: 12rpx;
|
|
}
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.remove-image{
|
|
position: absolute;
|
|
right: -4rpx;
|
|
top: -18rpx;
|
|
color: #e74c3c;
|
|
font-size: 40rpx;
|
|
padding: 8rpx;
|
|
}
|
|
}
|
|
.my-image-item-after{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 60rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.buttom{
|
|
width: 550rpx;
|
|
height: 100rpx;
|
|
background: #0D2E9A;
|
|
border-radius: 50rpx;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
.btn-box{
|
|
width: 100%;
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.btn2{
|
|
width: 48%;
|
|
height: 100%;
|
|
background-color: #0D2E9A;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|