Skip to content

html / h5wandahuijia

Go to a project
Commit 8a4e8f68 by mamingqun
Options

替换分享图为活的

parent 28ec100f
Showing with 1093 additions and 1301 deletions
dist15.16.zip 0 → 100644
File added
src/modules/js/api.js
import store from '../store';
// // api地址
// var server = 'http://web-comment.canskj.cn/new';
// var extra = '8';
// api地址
var server = 'http://web-comment.canskj.cn/new';
var extra = '8';
// //包装的地址
// var wrapHref = 'http://web-comment.canskj.cn/home/contest/h5/8';
//包装的地址
var wrapHref = 'http://web-comment.canskj.cn/home/contest/h5/8';
// //首页地址
// var indexHref = 'http://web-comment.iyunfish.cn/home/contest/h5/8';
// // 个人中心地址
// var userCenterHref = 'http://web-comment.iyunfish.cn/home/contest/h5/newuser/8';
//首页地址
var indexHref = 'http://web-comment.iyunfish.cn/home/contest/h5/8';
// 个人中心地址
var userCenterHref = 'http://web-comment.iyunfish.cn/home/contest/h5/newuser/8';
// var shareImg = 'http://web-comment.iyunfish.cn/home/contest/h5/static/share1.jpg';
var shareImg = 'http://web-comment.iyunfish.cn/home/contest/h5/static/share1.jpg';
// api地址
var server = 'http://wanda-qj.iyunfish.com/new';
var extra = '8';
// // api地址
// var server = 'http://wanda-qj.iyunfish.com/new';
// var extra = '8';
//包装的地址
var wrapHref = 'http://wanda-qj.maxrocky.com/home/contest/h5/8';
// //包装的地址
// var wrapHref = 'http://wanda-qj.maxrocky.com/home/contest/h5/8';
//首页地址
var indexHref = 'http://wanda-qj.iyunfish.com/home/contest/h5/8';
// 个人中心地址
var userCenterHref = 'http://wanda-qj.iyunfish.com/home/contest/h5/newuser/8';
// //首页地址
// var indexHref = 'http://wanda-qj.iyunfish.com/home/contest/h5/8';
// // 个人中心地址
// var userCenterHref = 'http://wanda-qj.iyunfish.com/home/contest/h5/newuser/8';
var shareImg = 'http://wanda-qj.iyunfish.com/home/contest/h5/static/share1.jpg';
// var shareImg = 'http://wanda-qj.iyunfish.com/home/contest/h5/static/share1.jpg';
export default{
......
src/modules/store/index.js
......@@ -38,7 +38,7 @@ export default new Vuex.Store({
state.ruweiBoxScroll = num;
},
getPublicActiveInfo(state,num){
axios.get('http://web-comment.canskj.cn/wandah5/activity/info').then((result) => {
axios.get('/wandah5/activity/info').then((result) => {
state.publicActiveInfo = result.data.data
// axios.defaults.headers.common['systemtype'] =state.publicActiveInfo.system_type;
......@@ -49,7 +49,7 @@ export default new Vuex.Store({
});
},
getPublicShareInfo(state,num){
axios.get('http://web-comment.canskj.cn/wandah5/share/info').then((result) => {
axios.get('/wandah5/share/info').then((result) => {
state.publicShareInfo = result.data.data
}).catch((err) => {
console.log(err);
......
src/pages/index/Shouye.vue
<template>
<div id="app1">
<div class="topBox5686">
<div class="activityButton" @click="activityOnoff"></div>
<img v-if="bannerImg" :src="bannerImg" alt>
<div id="app1">
<div class="topBox5686">
<div class="activityButton" @click="activityOnoff"></div>
<img v-if="bannerImg" :src="bannerImg" alt>
</div>
<div class="middlebox">
<div class="tabBoxWrap">
<div class="tabBox">
<ul class="tab">
<li :class="['subtab',tabActive === 1? 'active': '']" @click="changeTab(1)">最新照片</li>
<li :class="['subtab',tabActive === 2? 'active': '']" @click="changeTab(2)">人气榜</li>
<li
v-if="ruwei"
:class="['subtab',tabActive === 4? 'active': '']"
@click="changeTab(4)"
>入围作品</li>
<li
v-if="isAward"
:class="['subtab',tabActive === 3? 'active': '']"
@click="changeTab(3)"
>获奖名单</li>
</ul>
</div>
<div class="middlebox">
<div class="tabBoxWrap">
<div class="tabBox">
<ul class="tab">
<li
:class="['subtab',tabActive === 1? 'active': '']"
@click="changeTab(1)"
>最新照片</li>
<li
:class="['subtab',tabActive === 2? 'active': '']"
@click="changeTab(2)"
>人气榜</li>
<li
v-if="ruwei"
:class="['subtab',tabActive === 4? 'active': '']"
@click="changeTab(4)"
>入围作品</li>
<li
v-if="isAward"
:class="['subtab',tabActive === 3? 'active': '']"
@click="changeTab(3)"
>获奖名单</li>
</ul>
</div>
<!-- <TypeBox v-show="tabActive === 1" boxType="last" :activeNum="lastPhotoTypeActive"></TypeBox> -->
<!-- <TypeBox v-show="tabActive === 2" boxType="renqi" :activeNum="renqiPhotoTypeActive"></TypeBox> -->
</div>
<!-- 最新作品 -->
<div class="contentBox zuixinpaihang">
<div class="subContent" id="lastBox" ref="lastBox" v-if="tabActive === 1">
<vue-waterfall-easy
ref="lastContent"
v-if="zuixin"
:loadingDotStyle="lastdot"
:imgsArr="zuixin"
@scrollReachBottom="getLastList(lastPhotoTypeActive)"
>
<div class="img-info" slot-scope="props">
<Cardcommon :dataV="props.value"></Cardcommon>
</div>
<div slot="waterfall-over">没有更多了~</div>
</vue-waterfall-easy>
<!-- <div class="allLoaded" v-if="lastAllLoaded">没有更多了~</div> -->
</div>
</div>
<!-- 人气榜 -->
<div
class="contentBox renqipaihang"
id="renqibangdan"
ref="renqiBox"
v-if="tabActive === 2"
>
<vue-waterfall-easy
v-if="renqi"
:loadingDotStyle="renqidot"
:imgsArr="renqi"
@scrollReachBottom="getRenqiList(renqiPhotoTypeActive)"
>
<div class="img-info" slot-scope="props">
<Cardcommon :xuhao="true" :dataV="props.value"></Cardcommon>
</div>
</vue-waterfall-easy>
<!-- <div class="allLoaded" v-if="renqiAllLoaded">没有更多了~</div> -->
<!-- <TypeBox v-show="tabActive === 1" boxType="last" :activeNum="lastPhotoTypeActive"></TypeBox> -->
<!-- <TypeBox v-show="tabActive === 2" boxType="renqi" :activeNum="renqiPhotoTypeActive"></TypeBox> -->
</div>
<!-- 最新作品 -->
<div class="contentBox zuixinpaihang">
<div class="subContent" id="lastBox" ref="lastBox" v-if="tabActive === 1">
<vue-waterfall-easy
ref="lastContent"
v-if="zuixin"
:loadingDotStyle="lastdot"
:imgsArr="zuixin"
@scrollReachBottom="getLastList(lastPhotoTypeActive)"
>
<div class="img-info" slot-scope="props">
<Cardcommon :dataV="props.value"></Cardcommon>
</div>
<!-- 获奖作品 -->
<div class="contentBox" v-if="tabActive === 3" ref="prizeBox" id="prizeContent">
<!-- <div class="contentBox" ref="prizeBox" id="prizeContent"> -->
<div class="subContent">
<PrizeBox :huojiang="huojiang" :time="currentTime"></PrizeBox>
<div class="prizeWrap" v-if="huojiang">
<!-- <div class="prizeWrap"> -->
<CardPrize
v-for="(item, index) in huojingTitle"
:key="index"
:title="item.title"
:dataArr="huojiang"
:type="item.award"
></CardPrize>
<div class="wangqi" @click="wangqizuopin">
<span class="qita">其他获奖作品
<div id="trangle"></div>
</span>
</div>
</div>
</div>
<div slot="waterfall-over">没有更多了~</div>
</vue-waterfall-easy>
<!-- <div class="allLoaded" v-if="lastAllLoaded">没有更多了~</div> -->
</div>
</div>
<!-- 人气榜 -->
<div class="contentBox renqipaihang" id="renqibangdan" ref="renqiBox" v-if="tabActive === 2">
<vue-waterfall-easy
v-if="renqi"
:loadingDotStyle="renqidot"
:imgsArr="renqi"
@scrollReachBottom="getRenqiList(renqiPhotoTypeActive)"
>
<div class="img-info" slot-scope="props">
<Cardcommon :xuhao="true" :dataV="props.value"></Cardcommon>
</div>
</vue-waterfall-easy>
<!-- <div class="allLoaded" v-if="renqiAllLoaded">没有更多了~</div> -->
</div>
<!-- 获奖作品 -->
<div class="contentBox" v-if="tabActive === 3" ref="prizeBox" id="prizeContent">
<!-- <div class="contentBox" ref="prizeBox" id="prizeContent"> -->
<div class="subContent">
<PrizeBox :huojiang="huojiang" :time="currentTime"></PrizeBox>
<div class="prizeWrap" v-if="huojiang">
<!-- <div class="prizeWrap"> -->
<CardPrize
v-for="(item, index) in huojingTitle"
:key="index"
:title="item.title"
:dataArr="huojiang"
:type="item.award"
></CardPrize>
<div class="wangqi" @click="wangqizuopin">
<span class="qita">
其他获奖作品
<div id="trangle"></div>
</span>
</div>
<!-- 入围奖 -->
<div class="contentBox ruweipaihang ruweijiang" ref="ruweiBox" v-if="tabActive === 4">
<!-- <div class="subContent" id="ruweijiangBox" ref="ruweijiangBox">
</div>
</div>
</div>
<!-- 入围奖 -->
<div class="contentBox ruweipaihang ruweijiang" ref="ruweiBox" v-if="tabActive === 4">
<!-- <div class="subContent" id="ruweijiangBox" ref="ruweijiangBox">
<vue-waterfall-easy
ref="lastContent"
v-if="ruwei"
......@@ -105,19 +95,19 @@
</div>
<div slot="waterfall-over">没有更多了~</div>
</vue-waterfall-easy>
</div>-->
<ruwei></ruwei>
</div>
</div>
<div class="joinus" v-show="tabActive === 1 || tabActive === 2">
<div @click="goImgup">我要参与</div>
</div>
<div class="wangqiList"></div>
<a v-show="tabActive !== 3" :href="userCenter" class="user"></a>
<mt-actionsheet :actions="wangqiTitle" v-model="wangqiList"></mt-actionsheet>
<Fuceng v-if="fucengButton=== 'close'?false:true"></Fuceng>
<!-- <Fuceng></Fuceng> -->
</div>-->
<ruwei></ruwei>
</div>
</div>
<div class="joinus" v-show="tabActive === 1 || tabActive === 2">
<div @click="goImgup">我要参与</div>
</div>
<div class="wangqiList"></div>
<a v-show="tabActive !== 3" :href="userCenter" class="user"></a>
<mt-actionsheet :actions="wangqiTitle" v-model="wangqiList"></mt-actionsheet>
<Fuceng v-if="fucengButton=== 'close'?false:true"></Fuceng>
<!-- <Fuceng></Fuceng> -->
</div>
</template>
<script>
......@@ -144,1202 +134,1093 @@ import api from '@/modules/js/api.js';
import tools from '@/modules/js/tools';
export default {
data() {
return {
activityButton: false,
tabActive: 1,
// 最新作品的数据
zuixin: null,
lastPage: 1,
lastAllLoaded: false,
// 人气榜的数据
renqi: null,
renqiPage: 1,
renqiAllLoaded: false,
// 获奖作品
huojiang: null,
huojingTitle: null,
lastdot: { backgroundColor: 'blue' },
renqidot: { backgroundColor: 'blue' },
ruweidot: { backgroundColor: 'blue' },
wangqiList: false,
currentTime: null,
wangqiTitleList: null,
isAward: false,
bannerHeight: 200,
bannerLock: true,
isTop: false,
isBottom: true,
currentRenqiHour: '',
lastPhotoTypeActive: 0,
renqiPhotoTypeActive: 0,
userCenter: '',
fucengButton: 'open',
//入围作品
ruwei: '',
ruweiPage: 1,
ruweiPhotoTypeActive: 0,
// 用户信息
realName: null,
phoneNumber: null,
detailAddress: null
};
data() {
return {
activityButton: false,
tabActive: 1,
// 最新作品的数据
zuixin: null,
lastPage: 1,
lastAllLoaded: false,
// 人气榜的数据
renqi: null,
renqiPage: 1,
renqiAllLoaded: false,
// 获奖作品
huojiang: null,
huojingTitle: null,
lastdot: { backgroundColor: 'blue' },
renqidot: { backgroundColor: 'blue' },
ruweidot: { backgroundColor: 'blue' },
wangqiList: false,
currentTime: null,
wangqiTitleList: null,
isAward: false,
bannerHeight: 200,
bannerLock: true,
isTop: false,
isBottom: true,
currentRenqiHour: '',
lastPhotoTypeActive: 0,
renqiPhotoTypeActive: 0,
userCenter: '',
fucengButton: 'open',
//入围作品
ruwei: '',
ruweiPage: 1,
ruweiPhotoTypeActive: 0,
// 用户信息
realName: null,
phoneNumber: null,
detailAddress: null
};
},
computed: {
wangqiTitle() {
if (this.wangqiTitleList) {
var arr = [];
this.wangqiTitleList.forEach(ele => {
var obj = {
name: ele.title,
method: this.wangqizuopinClose(ele.activity_id)
};
arr.push(obj);
});
return arr;
}
},
computed: {
wangqiTitle() {
if (this.wangqiTitleList) {
var arr = [];
this.wangqiTitleList.forEach(ele => {
var obj = {
name: ele.title,
method: this.wangqizuopinClose(ele.activity_id)
};
arr.push(obj);
});
return arr;
}
},
bannerImg() {
if (store.state.publicActiveInfo) {
return store.state.publicActiveInfo.banner
} else {
return null
}
bannerImg() {
if (store.state.publicActiveInfo) {
return store.state.publicActiveInfo.banner
} else {
return null
}
}
},
created() {
var _this = this;
//http://web-comment.canskj.cn/wandah5/activity/info
//http://wanda-qj.iyunfish.com/wandah5/activity/info
axios.get('http://web-comment.canskj.cn/wandah5/activity/info').then((result) => {
console.log('活动的data')
console.log(result.data.data)
window.windowIndexHref = result.data.data.indexHref
window.windowUserCenterHref = result.data.data.userCenterHref
window.windowWrapHref = result.data.data.weapHref
console.log(window.windowIndexHref);
console.log(window.windowUserCenterHref);
console.log(window.windowWrapHref);
var type = result.data.data.system_type;
axios.defaults.headers.common['systemtype'] = type;
$('title').text(result.data.data.title);
store.commit('getPublicActiveInfo');
store.commit('getPublicShareInfo');
_this.judgeShare();
_this.getIsAward();
// _this.getActiveInfo();
_this.getLastList();
// _this.getRenqiList();
//在getActiveInfo里请求了
_this.getPrizeList();
_this.userCenter = window.windowUserCenterHref
_this.getUserInfo();
_this.getRuweiList();
_this.getWeixinPowerShare();
// 请求入围信息，提前加载入围的信息防止入围公告闪烁
store.commit('getRuweiInfo');
}).catch((err) => {
console.log(err);
});
_this.fucengButton = localStorage.getItem("fucengButton") ? 'close' : 'open';
},
mounted() {
// MessageBox('提示', '“眼遇丹寨万人长桌宴摄影大赛”已经截止，谢谢大家关注');
$eventbus.$on('dianzanle', data => {
this.tongbudianzan(this.zuixin, data);
this.tongbudianzan(this.renqi, data);
this.tongbudianzan(this.huojiang, data);
});
this.watchEventBus();
setTimeout(() => {
console.log('this.$store.state.publicShareInfo')
console.log( this.$store.state.publicShareInfo.image )
}, 1000);
},
activated() {
setTimeout(() => {
this.getWeixinPowerShare();
}, 400);
},
methods: {
getUserInfo() {
axios.get('/contest/user/info').then(res => {
this.realName = res.data.data.real_name.trim();
this.phoneNumber = res.data.data.mobile.trim();
this.detailAddress = res.data.data.address.trim();
this.userId = res.data.data.id;
});
},
getActiveInfo() {
axios.get('/contest/activity').then(res => {
if (res.data.code === 0) {
store.commit('changeActiveInfo', res.data.data);
// this.getPrizeList();
}
});
},
created() {
var _this = this;
axios.get('http://web-comment.canskj.cn/wandah5/activity/info').then((result) => {
console.log('活动的data');
console.log(result.data.data);
window.windowIndexHref = result.data.data.indexHref
window.windowUserCenterHref = result.data.data.userCenterHref
window.windowWrapHref = result.data.data.weapHref
console.log(window.windowIndexHref);
console.log(window.windowUserCenterHref);
console.log(window.windowWrapHref);
var type = result.data.data.system_type;
axios.defaults.headers.common['systemtype'] = type;
$('title').text(result.data.data.title);
store.commit('getPublicActiveInfo');
store.commit('getPublicShareInfo');
_this.judgeShare();
_this.getIsAward();
// _this.getActiveInfo();
_this.getLastList();
// _this.getRenqiList();
//在getActiveInfo里请求了
_this.getPrizeList();
_this.userCenter = window.windowUserCenterHref
_this.getUserInfo();
_this.getRuweiList();
_this.getWeixinPowerShare();
// 请求入围信息，提前加载入围的信息防止入围公告闪烁
store.commit('getRuweiInfo');
}).catch((err) => {
console.log(err);
});
_this.fucengButton = localStorage.getItem("fucengButton") ? 'close' : 'open';
getIsAward() {
axios.get('/contest/isaward').then(res => {
this.isAward = res.data.data.is_award;
});
},
mounted() {
// MessageBox('提示', '“眼遇丹寨万人长桌宴摄影大赛”已经截止，谢谢大家关注');
$eventbus.$on('dianzanle', data => {
this.tongbudianzan(this.zuixin, data);
this.tongbudianzan(this.renqi, data);
this.tongbudianzan(this.huojiang, data);
});
this.watchEventBus();
// setTimeout(() => {
// this.watchScroll(1);
// this.bannerHeight = $('.topBox5686').height();
// }, 200);
tongbudianzan(arr, data) {
var ele = arr.find(value => {
return value.id === data.id;
});
if (ele) {
ele.point_num += data.is_point ? 1 : -1;
ele.is_point = data.is_point;
}
},
activated() {
setTimeout(() => {
this.getWeixinPowerShare();
}, 400);
activityOnoff() {
// this.activityButton = !this.activityButton;
this.$router.push({ name: 'Description' });
},
methods: {
getUserInfo() {
axios.get('/contest/user/info').then(res => {
this.realName = res.data.data.real_name.trim();
this.phoneNumber = res.data.data.mobile.trim();
this.detailAddress = res.data.data.address.trim();
this.userId = res.data.data.id;
});
},
getActiveInfo() {
axios.get('/contest/activity').then(res => {
if (res.data.code === 0) {
store.commit('changeActiveInfo', res.data.data);
// this.getPrizeList();
}
});
},
getIsAward() {
axios.get('/contest/isaward').then(res => {
this.isAward = res.data.data.is_award;
});
},
tongbudianzan(arr, data) {
var ele = arr.find(value => {
return value.id === data.id;
});
if (ele) {
ele.point_num += data.is_point ? 1 : -1;
ele.is_point = data.is_point;
}
},
activityOnoff() {
// this.activityButton = !this.activityButton;
this.$router.push({ name: 'Description' });
},
changeTab(num) {
var _this = this;
// setTimeout(() => {
// this.watchScroll(num);
// },200);
changeTab(num) {
var _this = this;
try {
if (num === 1 || num === 3) {
this.renqiBox = this.$refs.renqiBox.getElementsByClassName(
'vue-waterfall-easy-scroll'
)[0];
let renqiY = this.renqiBox.scrollTop;
store.commit('changeRenQiBoxScrollY', renqiY);
}
} catch (error) {
console.log(error);
}
this.tabActive = num;
try {
if (num === 2) {
this.$nextTick(() => {
try {
if (num === 1 || num === 3) {
this.renqiBox = this.$refs.renqiBox.getElementsByClassName(
'vue-waterfall-easy-scroll'
)[0];
let renqiY = this.renqiBox.scrollTop;
store.commit('changeRenQiBoxScrollY', renqiY);
}
} catch (error) {
console.log(error);
}
this.tabActive = num;
this.$refs.renqiBox.getElementsByClassName(
'vue-waterfall-easy-scroll'
)[0].scrollTop = this.$store.state.renqiBoxScroll;
try {
if (num === 2) {
this.$nextTick(() => {
try {
this.$refs.renqiBox.getElementsByClassName(
'vue-waterfall-easy-scroll'
)[0].scrollTop = this.$store.state.renqiBoxScroll;
} catch (error) {
console.log(error);
}
});
}
} catch (error) {
console.log(error);
console.log(error);
}
});
}
} catch (error) {
console.log(error);
}
// 点击tab获取数据
try {
if (num === 2) {
this.getRenqiList();
} else if (num === 1) {
this.getLastList();
} else if (num === 4) {
} else {
this.getPrizeList();
}
} catch (error) {
// 点击tab获取数据
try {
if (num === 2) {
this.getRenqiList();
} else if (num === 1) {
this.getLastList();
} else if (num === 4) {
} else {
this.getPrizeList();
}
} catch (error) {
}
},
getLastList(type) {
var photoType = type || 0;
// var photoType = 1;
axios
.get('/contest/image/list', {
params: {
page: this.lastPage,
type: photoType
}
})
.then(res => {
// console.log('res');
// console.log(res);
var arr = res.data.data.data;
var newArr = this.addSrc(arr);
var totalPage = Math.ceil(
res.data.data.count / res.data.data.size
);
if (arr.length === 0) {
return;
}
if (Number(res.data.data.page) === Number(totalPage)) {
this.lastAllLoaded = true;
this.lastdot = { backgroundColor: 'transparent' };
}
if (this.zuixin) {
this.zuixin = this.zuixin.concat(newArr);
} else {
this.zuixin = newArr;
}
this.lastPage++;
});
},
addSrc(arr) {
arr.forEach(ele => {
ele['src'] = ele.image;
});
return arr;
},
getRenqiList(type) {
var photoType = type || 0;
axios
.get('/contest/rank/list', {
params: {
page: this.renqiPage,
hour: this.currentRenqiHour,
type: photoType
}
})
.then(res => {
// console.log(res.data.data);
var arr = res.data.data.data;
var hour = res.data.data.hour;
// 修复点击tab加载清空数组的问题
if (this.renqi && hour !== this.currentRenqiHour) {
this.renqiPage = 1;
this.renqi = null;
this.getRenqiList();
return
}
if (hour === -1) {
hour = hour + 1;
}
var page = Number(res.data.data.page);
var newArr = this.addSrc(arr);
if (arr.length === 0) {
return;
}
if (arr.length < res.data.data.size) {
this.renqiAllLoaded = true;
this.renqidot = { backgroundColor: 'transparent' };
}
if (this.renqi && hour === this.currentRenqiHour) {
this.renqi = this.renqi.concat(newArr);
this.renqiPage = page + 1;
} else {
this.renqi = newArr;
this.currentRenqiHour = hour;
this.renqiPage = page + 1;
}
// this.renqiPage++;
});
},
getPrizeList() {
axios.get('/contest/award/list/time').then(res => {
// console.log('prizeList');
// console.log(res);
this.huojiang = res.data.data.data;
this.huojingTitle = res.data.data.title;
this.currentTime = res.data.data.time;
this.wangqiTitleList = res.data.data.activity;
});
},
getRuweiList(type) {
var photoType = type || 0;
// var photoType = 1;
axios
.get('/contest/selected/list', {
params: {
page: this.ruweiPage,
type: photoType
}
})
.then(res => {
var arr = res.data.data.data;
var newArr = this.addSrc(arr);
var totalPage = Math.ceil(
res.data.data.count / res.data.data.size
);
// if (arr.length === 0) {
// return;
// }
// if (Number(res.data.data.page) === Number(totalPage)) {
// this.lastAllLoaded = true;
// this.ruweidot = { backgroundColor: 'transparent' };
// setTimeout(() => {
// Toast({
// message: '没有更多'
// });
// }, 2000);
// }
if (res.data.data.data.length === 0) {
this.lastAllLoaded = true;
this.ruweidot = { backgroundColor: 'transparent' };
// Toast({
// message: '没有更多'
// });
return
}
if (this.ruwei) {
this.ruwei = this.ruwei.concat(newArr);
} else {
this.ruwei = newArr;
}
this.ruweiPage++;
});
},
getshareId(str) {
var arr = str.split('?');
var newArr = arr[1].split('&');
var id = null;
newArr.forEach(ele => {
if (ele.includes('shareId')) {
id = ele.match(/\d+/g)[0];
}
});
}
},
getLastList(type) {
var photoType = type || 0;
// var photoType = 1;
axios
.get('/contest/image/list', {
params: {
page: this.lastPage,
type: photoType
}
})
.then(res => {
// console.log('res');
// console.log(res);
var arr = res.data.data.data;
var newArr = this.addSrc(arr);
var totalPage = Math.ceil(
res.data.data.count / res.data.data.size
);
if (arr.length === 0) {
return;
}
if (Number(res.data.data.page) === Number(totalPage)) {
this.lastAllLoaded = true;
this.lastdot = { backgroundColor: 'transparent' };
}
if (this.zuixin) {
this.zuixin = this.zuixin.concat(newArr);
} else {
this.zuixin = newArr;
}
this.lastPage++;
});
},
addSrc(arr) {
arr.forEach(ele => {
ele['src'] = ele.image;
});
return arr;
},
getRenqiList(type) {
var photoType = type || 0;
axios
.get('/contest/rank/list', {
params: {
page: this.renqiPage,
hour: this.currentRenqiHour,
type: photoType
}
})
.then(res => {
// console.log(res.data.data);
var arr = res.data.data.data;
var hour = res.data.data.hour;
// 修复点击tab加载清空数组的问题
if (this.renqi && hour !== this.currentRenqiHour) {
this.renqiPage = 1;
this.renqi = null;
this.getRenqiList();
return
}
if (hour === -1) {
hour = hour + 1;
}
var page = Number(res.data.data.page);
var newArr = this.addSrc(arr);
if (arr.length === 0) {
return;
}
if (arr.length < res.data.data.size) {
this.renqiAllLoaded = true;
this.renqidot = { backgroundColor: 'transparent' };
}
if (this.renqi && hour === this.currentRenqiHour) {
this.renqi = this.renqi.concat(newArr);
this.renqiPage = page + 1;
} else {
this.renqi = newArr;
this.currentRenqiHour = hour;
this.renqiPage = page + 1;
}
// this.renqiPage++;
});
},
getPrizeList() {
axios.get('/contest/award/list/time').then(res => {
// console.log('prizeList');
// console.log(res);
this.huojiang = res.data.data.data;
this.huojingTitle = res.data.data.title;
this.currentTime = res.data.data.time;
this.wangqiTitleList = res.data.data.activity;
});
},
getRuweiList(type) {
var photoType = type || 0;
// var photoType = 1;
axios
.get('/contest/selected/list', {
params: {
page: this.ruweiPage,
type: photoType
}
})
.then(res => {
var arr = res.data.data.data;
var newArr = this.addSrc(arr);
var totalPage = Math.ceil(
res.data.data.count / res.data.data.size
);
if (res.data.data.data.length === 0) {
this.lastAllLoaded = true;
this.ruweidot = { backgroundColor: 'transparent' };
// Toast({
// message: '没有更多'
// });
return
}
if (this.ruwei) {
this.ruwei = this.ruwei.concat(newArr);
} else {
this.ruwei = newArr;
}
this.ruweiPage++;
});
},
getshareId(str) {
var arr = str.split('?');
var newArr = arr[1].split('&');
var id = null;
newArr.forEach(ele => {
if (ele.includes('shareId')) {
id = ele.match(/\d+/g)[0];
}
});
return id;
},
judgeShare() {
if (location.href.includes('shareId')) {
// 用是否有shareId 来判断是不是分享出去的链接
var id = this.getshareId(location.href);
this.$router.push({ path: 'detail', query: { id: id } });
} else {
}
},
getWeixinPowerShare() {
var _this = this;
axios
.get('/contest/wechat/info', {
params: {
url: encodeURIComponent(location.href.split('#')[0]),
type: 1
}
})
.then(res => {
var res = res.data.data;
var listArr = [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
];
wx.config({
debug: false, // 开启调试模式,
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: listArr
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: listArr,
success: function (res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
// var data1 = {
// title: '春节回家，拍照有奖', // 分享标题
// link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: api.shareImg, // 分享图标
// success: function () { }
// }
// wx.onMenuShareTimeline(tar.shapeShareTimeline(data1));
// // // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
// var data2 = {
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// // link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: api.shareImg, // 分享图标
// type: '', // 分享类型,music、video或link，不填默认为link
// dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
// success: function () {
// // 用户点击了分享后执行的回调函数
// }
// }
// wx.onMenuShareAppMessage(tar.shapeShareAppMessage(data2));
// // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.updateAppMessageShareData(
{
// title: _this.$randomText() , // 分享标题
title: tools.randomShareTitle(), // 分享标题
desc: tools.randomShareDesc(), // 分享描述
link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg // 分享图标
},
function (res) {
//这里是回调函数
}
);
// // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.updateTimelineShareData(
{
title: tools.randomShareTitle(), // 分享标题
link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg // 分享图标
},
function (res) {
//这里是回调函数
}
);
// // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareTimeline({
// title: '春节回家，拍照有奖', // 分享标题
// link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: api.shareImg, // 分享图标
// success: function () { }
// });
// // // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareAppMessage({
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: api.shareImg, // 分享图标
// type: '', // 分享类型,music、video或link，不填默认为link
// dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
// success: function () {
// // 用户点击了分享后执行的回调函数
// }
// });
// // // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareQQ({
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// link: window.windowWrapHref, // 分享链接
// imgUrl: api.shareImg, // 分享图标
// success: function () {
// // 用户确认分享后执行的回调函数
// },
// cancel: function () {
// // 用户取消分享后执行的回调函数
// }
// });
// // // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
// wx.onMenuShareWeibo({
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// link: window.windowWrapHref, // 分享链接
// imgUrl: api.shareImg, // 分享图标
// success: function () {
// // 用户确认分享后执行的回调函数
// },
// cancel: function () {
// // 用户取消分享后执行的回调函数
// }
// });
// // // 获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareQZone({
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// link: window.windowWrapHref, // 分享链接
// imgUrl: api.shareImg, // 分享图标
// success: function () {
// // 用户确认分享后执行的回调函数
// },
// cancel: function () {
// // 用户取消分享后执行的回调函数
// }
// });
});
wx.error(function (res) {
// console.log('微信错误');
// console.log(res);
});
})
.catch(err => {
// console.log('请求的错误');
// console.log(err);
});
},
wangqizuopin() {
this.wangqiList = true;
},
wangqizuopinClose(num) {
this.wangqiList = false;
var key = num;
var _this = this;
$('#prizeContent').animate({ scrollTop: 2 }, 'slow');
return function () {
axios.get('/contest/award/list/time', {
params: {
activity_id: key
}
}).then(res => {
_this.huojiang = res.data.data.data;
_this.huojingTitle = res.data.data.title;
_this.currentTime = res.data.data.time;
_this.wangqiTitleList = res.data.data.activity;
});
};
},
bannnerUp() {
if (!this.isTop) {
$('.topBox5686').animate({ height: 30 }, 'fast');
this.isTop = true;
}
},
bannnerDown() {
if (this.isTop) {
$('.topBox5686').animate({ height: this.bannerHeight }, 'slow');
this.isTop = false;
}
},
watchScroll(num) {
var _this = this;
if (num === 1) {
$('.zuixinpaihang .vue-waterfall-easy-scroll').on('scroll', function (e) {
if (!_this.isTop) {
_this.bannnerUp();
}
if ($(this).scrollTop() === 0) {
_this.bannnerDown();
}
})
} else if (num === 2) {
$('.renqipaihang .vue-waterfall-easy-scroll').on('scroll', function (e) {
if (!_this.isTop) {
_this.bannnerUp();
}
if ($(this).scrollTop() === 0) {
_this.bannnerDown();
}
})
} else if (num === 3) {
$('#prizeContent').on('scroll', function (e) {
if (!_this.isTop) {
_this.bannnerUp();
}
if ($(this).scrollTop() === 0) {
_this.bannnerDown();
}
})
}
},
watchEventBus() {
$eventbus.$on('changePhotoType', (data) => {
if (data.type === 'last') {
this.lastPhotoTypeActive = data.num;
this.lastPage = 1;
this.zuixin = null;
this.getLastList(this.lastPhotoTypeActive);
} else if (data.type === 'renqi') {
this.renqiPhotoTypeActive = data.num;
this.renqi = null;
this.renqiPage = 1;
this.getRenqiList(this.renqiPhotoTypeActive);
}
})
$eventbus.$on('closeFuceng', () => {
this.fucengButton = 'close';
localStorage.setItem("fucengButton", 'close');
})
},
goImgup() {
if (this.realName && this.phoneNumber && this.detailAddress) {
this.$router.push({ path: '/imgup' });
} else {
// Toast({
// message: '请您认真填写参赛信息 若您最终获奖 我们将第一时间与您联系 便于发奖。'
// });
// setTimeout(() => {
this.$router.push({ path: '/address', query: { plan: 'isIndex' } });
// }, 2000);
}
},
hiddenBar() {
document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
// WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
// WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
// WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
return id;
},
judgeShare() {
if (location.href.includes('shareId')) {
// 用是否有shareId 来判断是不是分享出去的链接
var id = this.getshareId(location.href);
this.$router.push({ path: 'detail', query: { id: id } });
} else {
}
},
getWeixinPowerShare() {
var _this = this;
axios
.get('/contest/wechat/info', {
params: {
url: encodeURIComponent(location.href.split('#')[0]),
type: 1
}
})
.then(res => {
var res = res.data.data;
var listArr = [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
];
wx.config({
debug: false, // 开启调试模式,
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature, // 必填，签名，见附录1
jsApiList: listArr
});
wx.ready(() => {
wx.checkJsApi({
jsApiList: listArr,
success: function (res) {
// 以键值对的形式返回，可用的api值true，不可用为false
// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
},
// // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.updateAppMessageShareData(
{
// title: _this.$randomText() , // 分享标题
title: tools.randomShareTitle(), // 分享标题
desc: tools.randomShareDesc(), // 分享描述
link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: this.$store.state.publicShareInfo.image // 分享图标
},
function (res) {
//这里是回调函数
}
);
// // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.updateTimelineShareData(
{
title: tools.randomShareTitle(), // 分享标题
link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: this.$store.state.publicShareInfo.image // 分享图标
},
function (res) {
//这里是回调函数
}
);
});
wx.error(function (res) {
// console.log('微信错误');
// console.log(res);
});
})
.catch(err => {
// console.log('请求的错误');
// console.log(err);
});
},
components: {
Cardcommon,
CardPrize,
vueWaterfallEasy,
PrizeBox,
TypeBox,
Fuceng,
ruwei
wangqizuopin() {
this.wangqiList = true;
},
beforeRouteLeave(to, from, next) {
try {
this.lastContant = this.$refs.lastBox.getElementsByClassName(
'vue-waterfall-easy-scroll'
)[0];
let lastY = this.lastContant.scrollTop;
store.commit('changeLastBoxScrollY', lastY);
} catch (error) {
// console.log(error);
wangqizuopinClose(num) {
this.wangqiList = false;
var key = num;
var _this = this;
$('#prizeContent').animate({ scrollTop: 2 }, 'slow');
return function () {
axios.get('/contest/award/list/time', {
params: {
activity_id: key
}
}).then(res => {
_this.huojiang = res.data.data.data;
_this.huojingTitle = res.data.data.title;
_this.currentTime = res.data.data.time;
_this.wangqiTitleList = res.data.data.activity;
});
};
},
bannnerUp() {
if (!this.isTop) {
$('.topBox5686').animate({ height: 30 }, 'fast');
this.isTop = true;
}
},
bannnerDown() {
if (this.isTop) {
$('.topBox5686').animate({ height: this.bannerHeight }, 'slow');
this.isTop = false;
}
},
watchScroll(num) {
var _this = this;
if (num === 1) {
$('.zuixinpaihang .vue-waterfall-easy-scroll').on('scroll', function (e) {
if (!_this.isTop) {
_this.bannnerUp();
}
if ($(this).scrollTop() === 0) {
_this.bannnerDown();
}
})
} else if (num === 2) {
$('.renqipaihang .vue-waterfall-easy-scroll').on('scroll', function (e) {
if (!_this.isTop) {
_this.bannnerUp();
}
if ($(this).scrollTop() === 0) {
_this.bannnerDown();
}
})
} else if (num === 3) {
$('#prizeContent').on('scroll', function (e) {
if (!_this.isTop) {
_this.bannnerUp();
}
if ($(this).scrollTop() === 0) {
_this.bannnerDown();
}
})
}
},
watchEventBus() {
$eventbus.$on('changePhotoType', (data) => {
if (data.type === 'last') {
this.lastPhotoTypeActive = data.num;
this.lastPage = 1;
this.zuixin = null;
this.getLastList(this.lastPhotoTypeActive);
} else if (data.type === 'renqi') {
this.renqiPhotoTypeActive = data.num;
this.renqi = null;
this.renqiPage = 1;
this.getRenqiList(this.renqiPhotoTypeActive);
}
})
try {
var renqiY = $('#renqibangdan .vue-waterfall-easy-scroll').scrollTop();
store.commit('changeRenQiBoxScrollY', renqiY);
} catch (error) {
// console.log(error);
}
$eventbus.$on('closeFuceng', () => {
this.fucengButton = 'close';
localStorage.setItem("fucengButton", 'close');
})
},
goImgup() {
if (this.realName && this.phoneNumber && this.detailAddress) {
this.$router.push({ path: '/imgup' });
} else {
// Toast({
// message: '请您认真填写参赛信息 若您最终获奖 我们将第一时间与您联系 便于发奖。'
// });
// setTimeout(() => {
this.$router.push({ path: '/address', query: { plan: 'isIndex' } });
// }, 2000);
}
},
hiddenBar() {
document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
// WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
// WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
// WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
});
},
},
components: {
Cardcommon,
CardPrize,
vueWaterfallEasy,
PrizeBox,
TypeBox,
Fuceng,
ruwei
},
beforeRouteLeave(to, from, next) {
try {
this.lastContant = this.$refs.lastBox.getElementsByClassName(
'vue-waterfall-easy-scroll'
)[0];
let lastY = this.lastContant.scrollTop;
store.commit('changeLastBoxScrollY', lastY);
} catch (error) {
// console.log(error);
}
try {
// huojiang
let huojiangY = this.$refs.prizeBox.scrollTop;
store.commit('changeHuojingBoxScrollY', huojiangY);
} catch (error) {
// console.log(error);
}
try {
var renqiY = $('#renqibangdan .vue-waterfall-easy-scroll').scrollTop();
store.commit('changeRenQiBoxScrollY', renqiY);
} catch (error) {
// console.log(error);
}
try {
// var ruweiY = $('.ruweijiang .vue-waterfall-easy-scroll').scrollTop();
var ruweiY = this.$refs.ruweiBox.scrollTop;
store.commit('changeRuweiBoxScrollY', ruweiY);
} catch (error) {
try {
// huojiang
let huojiangY = this.$refs.prizeBox.scrollTop;
store.commit('changeHuojingBoxScrollY', huojiangY);
} catch (error) {
// console.log(error);
}
}
try {
// var ruweiY = $('.ruweijiang .vue-waterfall-easy-scroll').scrollTop();
var ruweiY = this.$refs.ruweiBox.scrollTop;
store.commit('changeRuweiBoxScrollY', ruweiY);
} catch (error) {
next();
},
activated() {
try {
this.lastContant.scrollTop = this.$store.state.lastBoxScroll;
}
} catch (error) { }
next();
},
activated() {
try {
this.lastContant.scrollTop = this.$store.state.lastBoxScroll;
try {
var y = this.$store.state.renqiBoxScroll;
$('#renqibangdan .vue-waterfall-easy-scroll').scrollTop(y);
} catch (error) { }
} catch (error) {
try {
var y = this.$store.state.renqiBoxScroll;
$('#renqibangdan .vue-waterfall-easy-scroll').scrollTop(y);
}
} catch (error) {
try {
this.$refs.prizeBox.scrollTop = this.$store.state.huojiangBoxScroll;
} catch (error) {
}
}
try {
this.$refs.prizeBox.scrollTop = this.$store.state.huojiangBoxScroll;
} catch (error) {
try {
var ys = this.$store.state.ruweiBoxScroll;
// var ruweiY = $('.ruweijiang .vue-waterfall-easy-scroll').scrollTop(ys);
this.$refs.ruweiBox.scrollTop = ys;
} catch (error) {
}
try {
var ys = this.$store.state.ruweiBoxScroll;
// var ruweiY = $('.ruweijiang .vue-waterfall-easy-scroll').scrollTop(ys);
this.$refs.ruweiBox.scrollTop = ys;
} catch (error) {
}
}
}
};
</script>
<style lang="scss" scoped>
#app1 {
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
display: flex;
flex-direction: column;
}
.topBox5686 {
// height: 400px;
height: 310px;
// background: url("~@/pages/index/assets/images/indexBanner.jpg") no-repeat;
background-size: 100% auto;
position: relative;
overflow: hidden;
img {
width: 100%;
height: auto;
}
// height: 400px;
height: 310px;
// background: url("~@/pages/index/assets/images/indexBanner.jpg") no-repeat;
background-size: 100% auto;
position: relative;
overflow: hidden;
img {
width: 100%;
height: auto;
}
.activityButton {
width: 170px;
height: 53px;
position: absolute;
right: 0px;
top: 20px;
background: url("~@/pages/index/assets/images/shuoming3.png") no-repeat
right;
background-size: contain;
}
.activityButton {
width: 170px;
height: 53px;
position: absolute;
right: 0px;
top: 20px;
background: url("~@/pages/index/assets/images/shuoming3.png") no-repeat
right;
background-size: contain;
}
}
.introduce {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($color: #000000, $alpha: 0.7);
background: url("~@/pages/index/assets/images/mohu.png") no-repeat;
background-size: 100% 300%;
color: white;
z-index: 10000;
.contentBox {
// position: absolute;
// top: 50%;
// left: 50%;
// width: 100%;
// transform: translate(-50%, -52%);
padding-left: 20px;
padding-right: 20px;
padding-top: 90px;
background: yellow;
.title {
text-align: center;
font-size: 65px;
margin-bottom: 68px;
position: relative;
}
.subTitle {
font-size: 38px;
text-align: center;
margin-bottom: 60px;
position: relative;
}
.prizeBox {
position: relative;
font-size: 32px;
height: 700px;
overflow-y: scroll;
p {
margin-bottom: 18px;
}
p:first-child {
margin-bottom: 25px;
// font-size: 38px;
}
}
.about {
font-size: 27px;
margin-bottom: 110px;
.aboutTitle {
display: inline-block;
text-align: center;
background: #204b8b;
border-radius: 12%/50%;
width: 240px;
height: 58px;
line-height: 62px;
font-size: 25px;
margin-bottom: 40px;
}
p {
margin-bottom: 30px;
color: #d1d0cf;
line-height: 40px;
}
}
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba($color: #000000, $alpha: 0.7);
background: url("~@/pages/index/assets/images/mohu.png") no-repeat;
background-size: 100% 300%;
color: white;
z-index: 10000;
.contentBox {
// position: absolute;
// top: 50%;
// left: 50%;
// width: 100%;
// transform: translate(-50%, -52%);
padding-left: 20px;
padding-right: 20px;
padding-top: 90px;
background: yellow;
.title {
text-align: center;
font-size: 65px;
margin-bottom: 68px;
position: relative;
}
.subTitle {
font-size: 38px;
text-align: center;
margin-bottom: 60px;
position: relative;
}
.prizeBox {
position: relative;
font-size: 32px;
height: 700px;
overflow-y: scroll;
p {
margin-bottom: 18px;
}
p:first-child {
margin-bottom: 25px;
// font-size: 38px;
}
}
.about {
font-size: 27px;
margin-bottom: 110px;
.aboutTitle {
display: inline-block;
text-align: center;
background: #204b8b;
border-radius: 12%/50%;
width: 240px;
height: 58px;
line-height: 62px;
font-size: 25px;
margin-bottom: 40px;
}
p {
margin-bottom: 30px;
color: #d1d0cf;
line-height: 40px;
}
}
}
.newContant {
width: 612px;
height: 1020px;
background: url("~@/pages/index/assets/images/shuoming1.png") no-repeat;
background-size: 100% auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.title {
font-size: 35px;
color: black;
margin-top: 55px;
margin-bottom: 40px;
font-weight: bold;
}
.newContant {
width: 612px;
height: 1020px;
background: url("~@/pages/index/assets/images/shuoming1.png") no-repeat;
background-size: 100% auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.title {
font-size: 35px;
color: black;
margin-top: 55px;
margin-bottom: 40px;
font-weight: bold;
}
.jiachu {
color: black;
font-weight: bold;
}
.jiachu {
color: black;
font-weight: bold;
}
p {
font-size: 24px;
line-height: 34px;
color: #5c5c5c;
}
p {
font-size: 24px;
line-height: 34px;
color: #5c5c5c;
}
.marginBottom20 {
margin-bottom: 20px;
}
.marginBottom20 {
margin-bottom: 20px;
}
.last {
// text-align: center;
margin-top: 30px;
}
.last {
// text-align: center;
margin-top: 30px;
}
.newWrap {
width: 530px;
height: 920px;
margin: 50px auto 0;
// background: blue;
overflow-y: scroll;
box-sizing: border-box;
padding-left: 30px;
padding-right: 30px;
text-align: justify;
}
.newWrap {
width: 530px;
height: 920px;
margin: 50px auto 0;
// background: blue;
overflow-y: scroll;
box-sizing: border-box;
padding-left: 30px;
padding-right: 30px;
text-align: justify;
}
.closeBox {
// width: 100%;
position: absolute;
top: -85px;
right: -40px;
// background: green;
.jieshi {
color: #d1d0cf;
text-align: center;
font-size: 25px;
margin-bottom: 56px;
}
.close {
width: 80px;
height: 80px;
// margin: 0 auto;
background: url("~@/pages/index/assets/images/colse.png")
no-repeat;
background-size: 100% 100%;
}
}
.closeBox {
// width: 100%;
position: absolute;
top: -85px;
right: -40px;
// background: green;
.jieshi {
color: #d1d0cf;
text-align: center;
font-size: 25px;
margin-bottom: 56px;
}
.close {
width: 80px;
height: 80px;
// margin: 0 auto;
background: url("~@/pages/index/assets/images/colse.png") no-repeat;
background-size: 100% 100%;
}
}
}
}
.zuixinpaihang,
.renqipaihang,
.ruweipaihang {
// padding-top: 170px !important;
padding-top: 103px !important;
// padding-top: 170px !important;
padding-top: 103px !important;
}
#prizeContent {
padding-top: 90px !important;
padding-top: 90px !important;
}
.middlebox {
flex: 1;
background: #f0f0f0;
flex: 1;
background: #f0f0f0;
position: relative;
.tabBoxWrap {
position: absolute;
// top: -35px;
z-index: 100;
width: 100%;
// background: red;
// height: 200px;
}
.tabBox {
// width: 92%;
height: 91px;
background: white;
// border-radius: 15px;
margin: 0 auto;
// background: url("~@/pages/index/assets/images/yun.png") no-repeat bottom;
background-size: 100% auto;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
.tab {
width: 100%;
display: flex;
flex-direction: row;
// padding-left: 108px;
// padding-right: 108px;
// padding-bottom: 20px;
position: absolute;
bottom: 0;
border-bottom: 1px solid rgb(214, 203, 203);
li {
flex: 1;
// border-right: 2px solid #e6e6e6;
color: #999999;
font-size: 27px;
height: 91px;
line-height: 91px;
text-align: center;
position: relative;
}
.tabBoxWrap {
.subtab::before {
content: "";
position: absolute;
// top: -35px;
z-index: 100;
width: 100%;
// background: red;
// height: 200px;
}
.tabBox {
// width: 92%;
height: 91px;
background: white;
// border-radius: 15px;
margin: 0 auto;
// background: url("~@/pages/index/assets/images/yun.png") no-repeat bottom;
background-size: 100% auto;
left: 0;
top: 50%;
height: 50%;
border-right: 3px solid #e6e6e6;
transform: translate(0, -50%);
}
.active {
// color: #2156a5;
color: #000000;
font-weight: bold;
font-size: 34px;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.active::after {
content: "";
display: block;
width: 28px;
border-bottom: 6px solid #000000;
position: absolute;
bottom: 0px;
left: 50%;
transform: translate(-50%, 0);
}
.tab {
width: 100%;
display: flex;
flex-direction: row;
// padding-left: 108px;
// padding-right: 108px;
// padding-bottom: 20px;
position: absolute;
bottom: 0;
border-bottom: 1px solid rgb(214, 203, 203);
li {
flex: 1;
// border-right: 2px solid #e6e6e6;
color: #999999;
font-size: 27px;
height: 91px;
line-height: 91px;
text-align: center;
position: relative;
}
li:last-child {
border: none;
}
}
}
.subtab::before {
content: "";
position: absolute;
left: 0;
top: 50%;
height: 50%;
border-right: 3px solid #e6e6e6;
transform: translate(0, -50%);
}
.contentBox {
// height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 80px;
overflow: scroll;
.active {
// color: #2156a5;
color: #000000;
font-weight: bold;
font-size: 34px;
position: relative;
}
.active::after {
content: "";
display: block;
width: 28px;
border-bottom: 6px solid #000000;
position: absolute;
bottom: 0px;
left: 50%;
transform: translate(-50%, 0);
}
.subContent {
height: 100%;
// background: yellow;
.wrap {
display: flex;
flex-direction: row;
// // flex-direction: column;
flex-wrap: wrap;
li:last-child {
border: none;
}
}
}
padding-left: 15px;
padding-right: 15px;
// justify-content: space-between;
margin: 0 auto;
}
.contentBox {
// height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-top: 80px;
overflow: scroll;
.subContent {
height: 100%;
// background: yellow;
.wrap {
display: flex;
flex-direction: row;
// // flex-direction: column;
flex-wrap: wrap;
padding-left: 15px;
padding-right: 15px;
// justify-content: space-between;
margin: 0 auto;
}
.prizeWrap {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 30px;
.wangqi {
width: 100%;
height: 90px;
line-height: 90px;
text-align: center;
color: white;
background: #2358a7;
font-size: 33px;
margin-top: 60px;
position: relative;
bottom: -3px;
position: relative;
.qita {
position: relative;
.prizeWrap {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 30px;
.wangqi {
width: 100%;
height: 90px;
line-height: 90px;
text-align: center;
color: white;
background: #2358a7;
font-size: 33px;
margin-top: 60px;
position: relative;
bottom: -3px;
position: relative;
.qita {
position: relative;
#trangle {
height: 0;
width: 0;
border-right: 12px solid transparent;
border-bottom: 12px solid white;
border-left: 12px solid transparent;
position: absolute;
top: 46%;
right: -30px;
}
}
}
#trangle {
height: 0;
width: 0;
border-right: 12px solid transparent;
border-bottom: 12px solid white;
border-left: 12px solid transparent;
position: absolute;
top: 46%;
right: -30px;
}
}
}
}
}
}
}
.joinus {
height: 90px;
line-height: 90px;
background: #2156a5;
font-size: 35px;
text-align: center;
height: 90px;
line-height: 90px;
background: #2156a5;
font-size: 35px;
text-align: center;
color: white;
a {
color: white;
a {
color: white;
display: block;
width: 100%;
height: 100%;
}
display: block;
width: 100%;
height: 100%;
}
}
.user {
width: 102px;
height: 103px;
position: absolute;
bottom: 100px;
right: 25px;
background: url("~@/pages/index/assets/images/user.png") no-repeat;
background-size: 100% auto;
width: 102px;
height: 103px;
position: absolute;
bottom: 100px;
right: 25px;
background: url("~@/pages/index/assets/images/user.png") no-repeat;
background-size: 100% auto;
}
.list-finished,
.loading-more {
width: 100%;
padding: 20px 10px;
vertical-align: middle;
text-align: center;
color: #999;
font-size: 12px;
line-height: 20px;
box-sizing: border-box;
width: 100%;
padding: 20px 10px;
vertical-align: middle;
text-align: center;
color: #999;
font-size: 12px;
line-height: 20px;
box-sizing: border-box;
}
.list-finished span,
.loading-more span {
display: inline-block;
margin-top: 10px;
width: 30px;
height: 30px;
background: url("~@/pages/index/assets/images/loader.gif") no-repeat 50%;
background-size: 30px 30px;
display: inline-block;
margin-top: 10px;
width: 30px;
height: 30px;
background: url("~@/pages/index/assets/images/loader.gif") no-repeat 50%;
background-size: 30px 30px;
}
.allLoaded {
font-size: 30px;
color: #cccccc;
text-align: center;
box-sizing: content-box;
padding: 20px;
font-size: 30px;
color: #cccccc;
text-align: center;
box-sizing: content-box;
padding: 20px;
}
.rightToLeft-enter-active,
.rightToLeft-leave-active {
transition: all 0.3s;
transition: all 0.3s;
}
.rightToLeft-enter, .rightToLeft-leave-to /* .fade-leave-active below version 2.1.8 */ {
transform: translate(100%, 0);
transform: translate(100%, 0);
}
.wangqiList {
position: absolute;
left: 0;
top: 0;
bottom: 0;
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.choiceBoxWrap {
overflow: scroll;
.choiceBox {
width: 980px;
height: 95px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
// background: red;
li {
width: 148px;
height: 56px;
line-height: 56px;
text-align: center;
font-size: 28px;
border: 2px solid black;
border-radius: 14px;
}
overflow: scroll;
.choiceBox {
width: 980px;
height: 95px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
// background: red;
li {
width: 148px;
height: 56px;
line-height: 56px;
text-align: center;
font-size: 28px;
border: 2px solid black;
border-radius: 14px;
}
li.active {
border: none;
color: white;
background: #2156a5;
}
li.active {
border: none;
color: white;
background: #2156a5;
}
}
}
.img-wraper img {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
</style>
src/pages/user/User.vue
......@@ -80,7 +80,7 @@ export default {
created() {
var _this = this
axios.get('http://web-comment.canskj.cn/wandah5/activity/info').then((result) => {
axios.get('http://wanda-qj.iyunfish.com/wandah5/activity/info').then((result) => {
var type = result.data.data.system_type;
console.log('活动的data');
......@@ -224,39 +224,13 @@ export default {
}
});
// // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
// var data1 = {
// title: '春节回家，拍照有奖', // 分享标题
// link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: api.shareImg, // 分享图标
// success: function () { }
// }
// wx.onMenuShareTimeline(tar.shapeShareTimeline(data1));
// // // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
// var data2 = {
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// // link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: api.shareImg, // 分享图标
// type: '', // 分享类型,music、video或link，不填默认为link
// dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
// success: function () {
// // 用户点击了分享后执行的回调函数
// }
// }
// wx.onMenuShareAppMessage(tar.shapeShareAppMessage(data2));
// // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.updateAppMessageShareData(
{
title: tools.randomShareTitle(), // 分享标题
desc: tools.randomShareDesc(), // 分享描述
link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg // 分享图标
imgUrl: this.$store.state.publicShareInfo.image // 分享图标
},
function (res) {
//这里是回调函数
......@@ -268,75 +242,12 @@ export default {
{
title: tools.randomShareTitle(), // 分享标题
link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg // 分享图标
imgUrl: this.$store.state.publicShareInfo.image // 分享图标
},
function (res) {
//这里是回调函数
}
);
// // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareTimeline({
// title: '春节回家，拍照有奖', // 分享标题
// link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: api.shareImg, // 分享图标
// success: function() {}
// });
// // // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareAppMessage({
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// link: window.windowWrapHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
// imgUrl: api.shareImg, // 分享图标
// type: '', // 分享类型,music、video或link，不填默认为link
// dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
// success: function() {
// // 用户点击了分享后执行的回调函数
// }
// });
// // // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareQQ({
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// link: window.windowWrapHref, // 分享链接
// imgUrl: api.shareImg, // 分享图标
// success: function() {
// // 用户确认分享后执行的回调函数
// },
// cancel: function() {
// // 用户取消分享后执行的回调函数
// }
// });
// // // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
// wx.onMenuShareWeibo({
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// link: window.windowWrapHref, // 分享链接
// imgUrl: api.shareImg, // 分享图标
// success: function() {
// // 用户确认分享后执行的回调函数
// },
// cancel: function() {
// // 用户取消分享后执行的回调函数
// }
// });
// // // 获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
// wx.onMenuShareQZone({
// title: '春节回家，拍照有奖', // 分享标题
// desc: _this.$randomText(), // 分享描述
// link: window.windowWrapHref, // 分享链接
// imgUrl: api.shareImg, // 分享图标
// success: function() {
// // 用户确认分享后执行的回调函数
// },
// cancel: function() {
// // 用户取消分享后执行的回调函数
// }
// });
});
wx.error(function (res) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment