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