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.
 
 
 
 

810 lines
19 KiB

<template>
<view class="body">
<mescroll-uni ref="mescrollRef" @down="downCallback" @up="getData" @init="mescrollInit" :up="upOption"
:down="downOption">
<view class="login_gray" v-if="!isLogin" @click="toUrlLogin"></view>
<image class="my_bg" src="/static/my_bg.png" mode="widthFix"></image>
<view class="my_con">
<view class="my_box" :style="'margin-top:' + statusBarHeight + 'px'">
<view class="my_head" :class="isIphoneX?'my_head2':''">
<!-- <navigator hover-class="none" url="/pages/my/set/index">
<image class="set_img" src="/static/set.png" mode="widthFix"></image>
</navigator> -->
<view class="my_head_box d_flex a_center" v-if="isLogin">
<image class="img" :src="loginInfo.ImgUrl" mode="widthFix"></image>
<view class="my_head_txt">
<view class="my_head_name" v-text="loginInfo.TrueName"></view>
<view class="my_head_job d_flex a_center">
<image class="phone_icon.png" src="/static/phone_icon.png"></image>
<view v-text="loginInfo.Phone"></view>
</view>
</view>
<view class="sign_in" @click="showClick">签到</view>
</view>
<view class="my_head_box d_flex a_center" v-else>
<image class="img" src="/static/header.png" mode="widthFix"></image>
<view class="my_head_txt">
<view class="my_head_name">登录</view>
<view class="my_head_job d_flex a_center">登录获取更多信息</view>
</view>
<view class="sign_in" @click="showClick">签到</view>
</view>
</view>
<view class="my_head_inner d_flex j_space_around a_center">
<navigator hover-class="none" url="/pages/my/myReservation/index" class="my_head_nav">
<image class="img img1" src="/static/reservation_icon.png" mode="widthFix"></image>
<view class="my_head_nav_txt">我的预约</view>
</navigator>
<navigator hover-class="none" url="/pages/my/myCollect/index" class="my_head_nav">
<image class="img img2" src="/static/collect_icon.png" mode="widthFix"></image>
<view class="my_head_nav_txt">我的收藏</view>
</navigator>
<navigator hover-class="none" url="/pages/my/myComment/index" class="my_head_nav">
<image class="img img3" src="/static/comment_icon.png" mode="widthFix"></image>
<view class="my_head_nav_txt">我的评论</view>
</navigator>
</view>
<!-- <navigator hover-class="none" :url="'/pages/my/myActivity/index?tabIndex=' + tabIndex" class="i1_head family_heiti d_flex j_between a_center">
<view class="i1_head_left">报名活动</view>
<view class="i1_head_right d_flex a_center">
<view class="more_txt">查看更多</view>
<image class="more_arrow" src="/static/more_arrow.png"></image>
</view>
</navigator>
<view class="tab_con2 d_flex j_between a_center">
<view v-for="(item, index) in tabs" :key="index" v-text="item.title" class="tab_nav" :class="tabIndex == index ? 'on' : ''" @click="tabClick(index)"></view>
</view>
<view class="activity_list" v-if="items.length>0">
<navigator hover-class="none" :url="'/pages/activity/detail/index?id=' + item.cgid" class="activity_nav" v-for="(item, index) in items" :key="index">
<view class="activity_nav_img">
<image class="img" :src="item.imgurl"></image>
<image v-if="item.isActivity == 1" class="activity_icon" src="/static/activity_icon1.png"></image>
<image v-else class="activity_icon" src="/static/activity_icon2.png"></image>
</view>
<view class="activity_nav_content">
<view class="activity_nav_title two_hidden" v-text="item.cgname"></view>
<view class="activity_nav_subtitle text_hidden" v-text="item.content2"></view>
<view class="activity_nav_time" v-text="item.startDate + ' - ' + item.endDate"></view>
<view class="activity_nav_label d_flex" v-if="item.dyw.length>0">
<view class="activity_nav_label_txt label2" v-for="(item2,index2) in item.dyw" :key="index2" v-text="item2" v-if="index2<3"></view>
</view>
</view>
</navigator>
</view>
<view class="no_data" v-else>
<text class=""> ~ 暂无相关数据 ~ </text>
</view> -->
<navigator hover-class="none"
:url="'/pages/my/myReservation/index?tabIndex=' + tabIndex2 + '&tabIndex3=' + tabIndex3"
class="i1_head family_heiti d_flex j_between a_center">
<view class="i1_head_left">场馆预约</view>
<view class="i1_head_right d_flex a_center">
<view class="more_txt">查看更多</view>
<image class="more_arrow" src="/static/more_arrow.png"></image>
</view>
</navigator>
<view class="tab_con2 d_flex j_space_around a_center">
<view v-for="(item, index) in tabs2" :key="index" v-text="item.title" class="tab_nav"
:class="tabIndex2 == index ? 'on' : ''" @click="tabClick2(index)"></view>
</view>
<view v-show="tabIndex2==1" class="tab_con3 d_flex j_space_around a_center">
<view v-for="(item, index) in tabs3" :key="index" v-text="item.title" class="tab_nav"
:class="tabIndex3 == index ? 'on' : ''" @click="tabClick3(index)"></view>
</view>
<view class="changguan_list" v-if="items2.length>0">
<navigator hover-class="none" :url="'/pages/changguan/detail/index?id=' + item.cgid"
class="changguan_nav" v-for="(item, index) in items2" :key="index">
<view class="changguan_inner">
<view class="changguan_nav_img">
<image class="img" :src="item.imgurl"></image>
</view>
<view class="changguan_nav_content">
<view class="changguan_nav_title font_bold text_hidden" v-text="item.cgname"></view>
<view class="changguan_nav_subtitle text_hidden" v-text="item.Author"></view>
<view class="changguan_nav_label d_flex">
<view v-for="(item2,index2) in item.Source" :key="index2"
class="changguan_nav_label_txt"
:class="[index2==0?'label1':'',index2==1?'label2':'',index2==2?'label3':'']"
v-text="item2"></view>
</view>
</view>
</view>
<view class="changguan_time d_flex a_center">
<image class="icon" src="/static/time_icon.png"></image>
<view class="">预约时间:<text v-text="item.startDate + ' - ' + item.endDate"></text></view>
</view>
</navigator>
</view>
<view class="no_data" v-else>
<text class="">~ 暂无相关数据 ~</text>
</view>
</view>
</view>
<view class="alert_con" v-if="isAlert">
<view class="alert_content">
<image class="qr_img" :src="qrImg"></image>
</view>
<image @click="closeClick" class="close_icon" src="/static/close_icon.png"></image>
</view>
</mescroll-uni>
<tabBar :info="info"></tabBar>
</view>
</template>
<script>
import tabBar from '@/components/html/tabBar.vue';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
export default {
mixins: [MescrollMixin],
components: {
tabBar
},
data() {
return {
info: {
ind: 2,
scr: false
},
isLogin: false,
mescroll: null,
downOption: {
use: true, //是否启用下拉刷新
auto: false //是否自动加载
},
upOption: {
use: false, //是否启用上拉加载更多
auto: false //是否自动加载
},
tabIndex: 0,
tabs: [{
title: '审核中'
},
{
title: '已入选'
},
{
title: '未入选'
}
],
tabIndex2: 0,
tabs2: [{
title: '个人'
},
{
title: '团队'
}
],
tabIndex3: 0,
tabs3: [{
title: '审核中'
},
{
title: '已通过'
},
{
title: '未通过'
}
],
items: [],
items2: [],
loginInfo: {},
qrImg: "",
isAlert: false,
isIphoneX: false
};
},
onLoad(options) {
let that = this;
const system = uni.getSystemInfoSync();
that.statusBarHeight = system.statusBarHeight + 5;
console.log(system)
if (system.model == "iPhone XR" || system.model == "iPhone X" || system.model == "iPhone XS") {
that.isIphoneX = true;
}
},
onReady() {},
onShow() {
if (this.$util.isLogin()) {
this.loginInfo = this.$util.getLoginInfo();
this.isLogin = true;
this.getData();
this.getChangGuan();
this.getQr();
} else {
this.isLogin = false;
}
},
methods: {
showClick(index) {
this.isAlert = true;
},
closeClick() {
this.isAlert = false;
},
getQr() {
let that = this;
that.$doPost('Server.aspx', {
mod: 'getQR'
})
.then(res => {
if (res.data.resultcode != 0) {
that.$util.showToast(res.data.msg);
return;
}
let body = res.data.data;
that.qrImg = body;
})
.catch(err => {
console.log('request fail', err);
});
},
toUrlLogin() {
let url = '/pages/tab/my/index';
url = encodeURIComponent(url);
uni.navigateTo({
url: '/pages/login/index?url=' + url
});
},
tabClick(e) {
this.tabIndex = e;
this.getData();
},
tabClick2(e) {
this.tabIndex2 = e;
this.getChangGuan();
},
tabClick3(e) {
this.tabIndex3 = e;
this.getChangGuan();
},
getChangGuan() {
let that = this;
let mod = "getMyCG";
let issh = "";
if (that.tabIndex2 == 1) {
mod = "getMyCGTeam";
issh = that.tabIndex3;
} else {
mod = "getMyCG";
issh = 1;
}
that.$doPost('Server.aspx', {
mod: mod,
page: 1,
pagesize: 4,
issh: issh
})
.then(res => {
if (res.data.resultcode != 0) {
that.$util.showToast(res.data.msg);
return;
}
let body = res.data.data;
body.filter(function(item, index) {
item.imgurl = that.baseImgUrl + item.imgurl;
item.startDate = that.$util.strDateFormat(item.startDate, "yyyy.MM.dd hh:mm");
item.endDate = that.$util.strDateFormat(item.endDate, "hh:mm");
if (item.Source) {
item.Source = item.Source.split("|");
}
})
that.items2 = body;
})
.catch(err => {
that.$util.showToast('网络错误,稍后重试');
console.log('request fail', err);
});
},
getData() {
let that = this;
that.$doPost('Server.aspx', {
mod: "getMyHD",
page: 1,
pagesize: 4,
issh: that.tabIndex
})
.then(res => {
if (res.data.resultcode != 0) {
that.$util.showToast(res.data.msg);
return;
}
let body = res.data.data;
body.filter(function(item, index) {
item.imgurl = that.baseImgUrl + item.imgurl;
if (!item.dyw) {
item.dyw = [];
} else {
item.dyw = item.dyw.split("|");
}
if (new Date() > that.$util.strDateFormat(item.endDate)) {
item.isActivity = 0;
} else {
item.isActivity = 1;
}
item.startDate = that.$util.strDateFormat(item.startDate, "yyyy.MM.dd");
item.endDate = that.$util.strDateFormat(item.endDate, "yyyy.MM.dd");
})
that.items = body;
})
.catch(err => {
that.$util.showToast('网络错误,稍后重试');
console.log('request fail', err);
});
},
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
downCallback(mescroll) {
setTimeout(function() {
mescroll.endSuccess(0);
}, 600);
}
}
};
</script>
<style lang="scss">
page,
.body {
background: #fff;
}
.login_gray {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1002;
background: transparent;
}
.my_bg {
width: 100vw;
height: 54vw;
}
.my_con {
position: absolute;
width: 100%;
z-index: 10;
left: 0;
top: 0;
}
.my_head {
width: 100%;
padding-top: 100upx;
}
.my_head2 {
padding-top: 130upx;
}
.my_box {
margin: 0 0 40upx 0;
overflow: hidden;
position: relative;
}
.my_box .set_img {
width: 48upx;
height: 48upx;
position: absolute;
top: 0;
right: 0;
padding: 30upx 20upx;
z-index: 10;
}
.my_head_box {
margin: 26upx 30upx 38upx 30upx;
position: relative;
}
.my_head_box .img {
width: 115upx;
height: 115upx;
box-sizing: border-box;
border: 4upx solid #fff;
border-radius: 50%;
}
.my_head_inner {
margin: 40upx 30upx 30upx 30upx;
height: 182upx;
background: #fff;
border-radius: 30upx;
box-shadow: 0px 7px 13px 0px rgba(145, 93, 93, 0.2);
}
.my_head_inner .my_head_nav {
font-size: 26upx;
line-height: 28upx;
color: #000000;
}
.my_head_inner .my_head_nav .img1 {
width: 51upx;
height: 48upx;
margin: auto;
}
.my_head_inner .my_head_nav .img2 {
width: 49upx;
height: 49upx;
margin: auto;
}
.my_head_inner .my_head_nav .img3 {
width: 57upx;
height: 49upx;
margin: auto;
}
.my_head_inner .my_head_nav .my_head_nav_txt {
white-space: nowrap;
margin-top: 20upx;
}
.my_head .my_head_txt {
color: #fff;
margin-left: 16upx;
}
.my_head .my_head_name {
font-size: 36upx;
line-height: 26upx;
padding-bottom: 16upx;
}
.my_head .my_head_job {
font-size: 26upx;
line-height: 28upx;
}
.my_head .phone_icon {
width: 15upx;
height: 24upx;
margin-right: 8upx;
}
/*标题*/
.i1_head {
padding: 30upx 0 0 0;
overflow: hidden;
background: #fff;
margin: 0 30upx;
}
.i1_head .i1_head_left {
color: #000000;
font-size: 36upx;
padding-left: 14upx;
position: relative;
}
.i1_head .i1_head_left::after {
width: 8upx;
height: 26upx;
background: #ffb155;
border-radius: 10upx;
content: '';
left: 0;
top: 50%;
transform: translateY(-50%);
position: absolute;
}
.i1_head .i1_head_right {
font-size: 24upx;
color: #888a87;
}
.i1_head .more_arrow {
width: 12upx;
height: 19upx;
margin-left: 8upx;
}
/*tab*/
.tab_con2 {
margin: 20upx 30upx 0 30upx;
}
.tab_con2 .tab_nav {
color: #999;
font-size: 30upx;
position: relative;
}
.tab_con2 .tab_nav::after {
width: 40upx;
height: 4upx;
background: #fff;
border-radius: 10upx;
content: '';
position: absolute;
left: 50%;
margin-left: -20upx;
bottom: -10upx;
}
.tab_con2 .tab_nav.on::after {
background: #ffb155;
}
.tab_con3 {
margin: 36upx 30upx 0 30upx;
}
.tab_con3 .tab_nav {
border: 1upx solid #e5e5e5;
border-radius: 10upx;
padding: 0 30upx;
height: 50upx;
line-height: 50upx;
text-align: center;
font-size: 28upx;
color: #999;
}
.tab_con3 .tab_nav.on {
border: 1upx solid #ffb155;
background: #ffb155;
color: #fff;
}
/*活动列表*/
.activity_list {
width: 100%;
overflow: hidden;
}
.activity_nav {
border-radius: 20upx;
box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
height: 224upx;
margin: 0 30upx 50upx 30upx;
position: relative;
z-index: 10;
}
.activity_nav:first-child {
margin-top: 50upx;
}
.activity_nav .activity_nav_img {
width: 302upx;
height: 100%;
border-top-left-radius: 20upx;
border-bottom-left-radius: 20upx;
float: left;
position: relative;
}
.activity_nav .activity_nav_img .img {
width: 100%;
height: 100%;
border-top-left-radius: 20upx;
border-bottom-left-radius: 20upx;
}
.activity_nav .activity_nav_img .activity_icon {
position: absolute;
width: 94upx;
height: 42upx;
left: 20upx;
top: -20upx;
z-index: 10;
}
.activity_nav .activity_nav_content {
width: calc(100% - 338upx);
margin-left: 20upx;
float: left;
padding-right: 16upx;
}
.activity_nav .activity_nav_title {
font-size: 30upx;
color: #3c3d3b;
margin-top: 10upx;
line-height: 40upx;
}
.activity_nav .activity_nav_subtitle {
color: #767676;
font-size: 24upx;
margin-top: 8upx;
margin-bottom: 8upx;
}
.activity_nav .activity_nav_time {
color: #767676;
font-size: 24upx;
}
.activity_nav .activity_nav_label {
margin-top: 10upx;
}
.activity_nav .activity_nav_label_txt {
padding: 0 10upx;
height: 34upx;
line-height: 34upx;
text-align: center;
font-size: 24upx;
color: #fff;
margin-right: 20upx;
}
.activity_nav .activity_nav_label_txt.label1 {
background: #f27491;
margin-right: 20upx;
}
.activity_nav .activity_nav_label_txt.label2 {
background: #eaa24e;
}
.activity_nav .activity_nav_label_txt:last-child {
margin-right: 0;
}
/*场馆列表*/
.changguan_list {
width: 100%;
overflow: hidden;
}
.changguan_nav {
margin: 0 30upx 50upx 30upx;
position: relative;
z-index: 10;
}
.changguan_nav .changguan_inner {
width: 100%;
overflow: hidden;
border-radius: 20upx;
box-shadow: 0px 5upx 15upx 0px rgba(0, 0, 0, 0.15);
height: 183upx;
}
.changguan_nav .changguan_time {
font-size: 24upx;
color: #999;
padding-top: 30upx;
padding-bottom: 14upx;
border-bottom: 1upx solid #f4f2f2;
}
.changguan_nav .changguan_time .icon {
width: 29upx;
height: 30upx;
margin-right: 10upx;
}
.changguan_nav:first-child {
margin-top: 50upx;
}
.changguan_nav .changguan_nav_img {
width: 302upx;
height: 100%;
border-top-left-radius: 20upx;
border-bottom-left-radius: 20upx;
float: left;
position: relative;
}
.changguan_nav .changguan_nav_img .img {
width: 100%;
height: 100%;
border-top-left-radius: 20upx;
border-bottom-left-radius: 20upx;
}
.changguan_nav .changguan_nav_content {
width: calc(100% - 338upx);
margin-left: 20upx;
float: left;
padding-right: 16upx;
}
.changguan_nav .changguan_nav_title {
font-size: 30upx;
color: #3c3d3b;
margin-top: 18upx;
line-height: 40upx;
}
.changguan_nav .changguan_nav_subtitle {
color: #767676;
font-size: 24upx;
margin-top: 18upx;
margin-bottom: 18upx;
}
.changguan_nav .changguan_nav_label {}
.changguan_nav .changguan_nav_label_txt {
width: calc((100% - 40upx) / 3);
height: 34upx;
line-height: 34upx;
text-align: center;
font-size: 24upx;
color: #fff;
}
.changguan_nav .changguan_nav_label_txt.label1 {
background: #fdf6e5;
color: #f4bd67;
margin-right: 20upx;
}
.changguan_nav .changguan_nav_label_txt.label2 {
background: #f2fcfe;
color: #80a9f4;
margin-right: 20upx;
}
.changguan_nav .changguan_nav_label_txt.label3 {
background: #f3f5f8;
color: #9f9d9d;
}
/*弹窗*/
.alert_con {
position: fixed;
left: 0;
top: 0;
z-index: 1002;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
}
.alert_con .alert_content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.alert_con .alert_content .qr_img {
width: 320upx;
height: 320upx;
border: 10upx solid #fff;
box-sizing: border-box;
}
.alert_con .close_icon {
width: 26upx;
height: 27upx;
padding: 20upx;
border-radius: 50%;
background: rgba(255, 255, 255, 1);
position: absolute;
right: 40upx;
top: 200upx;
z-index: 1003;
}
.sign_in {
position: absolute;
width: 100upx;
height: 52upx;
border: 2upx solid #fff;
color: #fff;
text-align: center;
line-height: 52upx;
box-sizing: border-box;
right: 30upx;
top: 40upx;
z-index: 10;
font-size: 28upx;
}
</style>