Leadfyy.co
/
ec.uniapp-master
11
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://8.134.10.79:3000/Leadfyy.co/ec.uniapp-master

master
Enzo 4 years ago
parent
567277dc4c 26f72e559c
commit
b6dda03b5a
4 changed files with 853 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      pages.json
  2. 522
      pages/business/activity/add.vue
  3. 302
      pages/business/activity/list.vue
  4. 15
      pages/business/center/center.vue

14
pages.json
View File

@ -503,6 +503,20 @@
"navigationBarTitleText": "商家登录" ,
"navigationStyle":"custom"
}
},
{
"path": "pages/business/activity/add",
"style": {
"navigationBarTitleText": "新增活动" ,
"navigationStyle":"custom"
}
},
{
"path": "pages/business/activity/list",
"style": {
"navigationBarTitleText": "活动列表" ,
"navigationStyle":"custom"
}
}
],
"globalStyle": {

522
pages/business/activity/add.vue
View File

@ -0,0 +1,522 @@
<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>

302
pages/business/activity/list.vue
View File

@ -0,0 +1,302 @@
<template>
<view>
<lf-nav title="活动列表" :showIcon="true" bgColor="#fff" @changeHeight="e => nav_height = e"></lf-nav>
<view v-if="tab_list.length">
<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="tab_current" @change="tabChange"></u-tabs>
</view>
<swiper :style="{height: autoHeight}" :current="tab_current" @change="swiperChange">
<swiper-item v-for="(tab, tabIndex) in tab_list" :key="tabIndex">
<scroll-view :style="{height: autoHeight}" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="isRefresher"
@scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
<view class="scroll-content">
<view class="card" v-for="(item, index) in tab.list" :key="index" @click="goDetails(item)">
<view class="cover">
<image class="img" :src="item.image"></image>
<!-- TODO 活动标签 -->
<!-- <view class="label" :class="'theme-'+ (index+1)" v-if="item.is_expired==false && item.state =='待使用'">待使用</view>
<view class="label" :class="'theme-'+ (index+1)" v-if="item.is_expired==true">已过期</view>
<view class="label" :class="'theme-'+ (index+1)" v-if="item.is_expired==false">{{item.state}}</view> -->
<!-- <view class="label theme-1">{{ showLabel(item) }}</view> -->
</view>
<view class="info">
<view class="title">{{item.name}}</view>
<view class="date">{{item.created_at}}</view>
</view>
</view>
<!-- 空数据的情况 -->
<view class="loading-more">
<text v-if="tab.list.length"
:class="{'loading-more-text': tab.loadingClass}">{{ tab.loadingText }}</text>
<lf-nocontent v-else src="/static/images/empty.png"></lf-nocontent>
</view>
</view>
<view style="height: 30rpx;"></view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data(){
let _public = {
page: 1,
isPage: true,
loadingClass: true,
loadingText: '正在加载中'
}
return {
tab_current: 0,
tab_list: [{
name: '全部',
state: '',
list: [],
..._public
},{
name: '未开始',
state: 'nstart',
list: [],
..._public
},{
name: '进行中',
state: 'ing',
list: [],
..._public
},{
name: '已过期',
state: 'end',
list: [],
..._public
}],
scrollH: 0,
nav_height: 0,
isRefresher: true,
pageSize: 10,
token: '',
show_count: 0
}
},
computed: {
autoHeight(){
return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx)`;
},
showLabel(){
return function(item){
}
}
},
onLoad(){
this.token = this.$cookieStorage.get('store_token');
let info = uni.getSystemInfoSync();
this.scrollH = info.screenHeight;
this.getMyActivity()
},
onShow(){
this.show_count++;
if(this.show_count > 1){
let tab_item = this.tab_list[this.tab_current];
tab_item.page = 1;
tab_item.isPage = true;
tab_item.loadingClass = true;
tab_item.list = []
tab_item.loadingText = '正在加载中';
this.getMyActivity();
}
},
methods: {
goDetails(item) {
if(!item.is_between){
this.$url('/pages/business/activity/add?id='+ item.id);
}
// is_apply_expired: false // 活动报名结束
// is_between: false // 活动未开始，以此页面跳转可编辑
// is_between_apply: false // 活动报名期间
// is_start 活动是否开启
},
// 页面触底，加载下一页
onScrolltolower(){
let tab_item = this.tab_list[this.tab_current];
if(tab_item.isPage){
tab_item.page = tab_item.page + 1;
this.getMyActivity();
}
},
// 下拉刷新处理
refreshFn(options){
let tab_item = this.tab_list[this.tab_current];
tab_item.page = 1;
tab_item.isPage = true;
tab_item.loadingClass = true;
tab_item.list = []
tab_item.loadingText = '正在加载中';
this.getMyActivity(options);
},
// scroll-view 下拉刷新
onRefresherrefresh(){
this.isRefresher = true;
this.refreshFn({type: 'scrollRefresh'});
},
tabChange(event){
this.tab_current = event;
this.getMyActivity();
},
swiperChange(event){
this.tab_current = event.detail.current;
if (event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
this.getMyActivity();
},
getMyActivity(options = {}) {
let tab_item = this.tab_list[this.tab_current];
this.$http
.get({
api: 'api/supplier/activity',
data:{
status: tab_item.state,
page: tab_item.page,
page_size: this.pageSize
},
header: {
token: this.token
},
})
.then(res => {
if (res.data.code == 200) {
if (res.data.status) {
let isPage = res.data.next_page_url == null?false:true;
tab_item.isPage = isPage;
if(!isPage) {
tab_item.loadingClass = false;
tab_item.loadingText = '没有更多数据啦~';
}
if(options.type == 'pageRefresh') {
uni.stopPullDownRefresh();
}else if(options.type == 'scrollRefresh') {
this.isRefresher = false;
}
if(tab_item.page == 1) {
tab_item.list = res.data.data.data;
}else {
tab_item.list.push(...res.data.data.data);
}
console.log('数组列表',tab_item.list)
} else {
wx.showModal({
content: res.data.message || '请下拉页面刷新重试',
showCancel: false
});
}
} else {
wx.showModal({
content: res.data.message || '请下拉页面刷新重试',
showCancel: false
});
}
wx.hideLoading();
})
.catch(() => {
wx.hideLoading();
wx.showModal({
content: '请求失败',
showCancel: false
});
});
}
}
}
</script>
<style lang="scss" scoped="scoped">
.scroll-content{
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
.card{
width: 686rpx;
height: max-content;
background-color: #FFFFFF;
box-shadow: 1rpx 1rpx 6rpx 3rpx #e5e5e5;
margin-top: 30rpx;
border-radius: 20rpx;
overflow: hidden;
.cover{
width: 686rpx;
height: 300rpx;
position: relative;
.img{
width: 100%;
height: 100%;
background-color: #EEEEEE;
}
.label{
position: absolute;
top: 0;
left: 0;
width: 118rpx;
height: 57rpx;
border-radius: 20rpx 0rpx 20rpx 0rpx;
text-align: center;
line-height: 57rpx;
color: #FFFFFF;
font-size: 26rpx;
}
}
.info{
width: 686rpx;
height: max-content;
padding: 20rpx 30rpx;
box-sizing: border-box;
.title{
font-size: 28rpx;
color: #222222;
font-weight: bold;
}
.date{
margin-top: 20rpx;
font-size: 24rpx;
color: #555555;
}
}
}
}
.theme-1{
background-color: #15716E;
}
.theme-2{
background-color: #1789E4;
}
.theme-3{
background-color: #777777;
}
// tabs 样式修改
/deep/.u-scroll-box {
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
}
/deep/.u-scroll-box .u-tab-bar {
background-color: #15716E!important;
width: 80rpx!important;
position: absolute;
left: 0;
bottom: -12rpx;
}
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar {
background-color: #15716E!important;
width: 56rpx!important;
position: absolute;
height: 5rpx!important;
left: 8rpx;
bottom: -4rpx;
}
/deep/ .u-tab-item {
font-size: 28rpx!important;
}
</style>

15
pages/business/center/center.vue
View File

@ -96,6 +96,21 @@
</view>
</view>
</view>
<view class="card">
<view class="lf-row-between">
<view class="title">我的活动</view>
</view>
<view class="lf-flex lf-m-t-50">
<view class="item" :style="{width: 100 / 3 +'%'}" @click="$url('/pages/business/activity/add')">
<view class="lf-iconfont icon-bianji lf-font-60"></view>
<view>新增活动</view>
</view>
<view class="item" :style="{width: 100 / 3 +'%'}" @click="$url('/pages/business/activity/list')">
<view class="lf-iconfont icon-fabujilu lf-font-60"></view>
<view>活动列表</view>
</view>
</view>
</view>
</block>
</view>
</template>

Write Preview
Loading…
Cancel
Save