Shuixiang
4 years ago
27 changed files with 1436 additions and 215 deletions
-
90common/styles/iconfont.css
-
2components/lf-shopGoodsCard/lf-shopGoodsCard.vue
-
14pages.json
-
36pages/aboutpay/confirmcash.vue
-
522pages/business/activity/add.vue
-
302pages/business/activity/list.vue
-
36pages/business/balance/balance.vue
-
77pages/business/center/center.vue
-
2pages/business/payment/money.vue
-
2pages/business/withdrawal/withdrawal.vue
-
3pages/discover/discover.vue
-
24pages/discover/discoverdetails.vue
-
2pages/discover/publish.vue
-
11pages/index/activity/detail.vue
-
5pages/index/activity/hot.vue
-
6pages/index/index/index.vue
-
17pages/order/confirm/confirm.vue
-
24pages/order/index/onlineorder.vue
-
75pages/order/newdetail/newdetail.vue
-
23pages/shop/goodsdetail.vue
-
135pages/shop/seckillList.vue
-
38pages/store/cart/cart.vue
-
2pages/user/member/code.vue
-
25pages/user/my/center.vue
-
2pages/user/my/myEventRegistrationList.vue
-
14pages/user/my/myregister.vue
-
16pages/user/my/vipinfo.vue
@ -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> |
||||
@ -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="#0E2F9E" 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: #0E2F9E; |
||||
|
} |
||||
|
.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: #0E2F9E!important; |
||||
|
width: 80rpx!important; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
bottom: -12rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/.special_tab .u-tabs .u-scroll-box .u-tab-bar { |
||||
|
background-color: #0E2F9E!important; |
||||
|
width: 56rpx!important; |
||||
|
position: absolute; |
||||
|
height: 5rpx!important; |
||||
|
left: 8rpx; |
||||
|
bottom: -4rpx; |
||||
|
} |
||||
|
|
||||
|
/deep/ .u-tab-item { |
||||
|
font-size: 28rpx!important; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue