Skip to content

html / h5wandahuijia

Go to a project
Commit b0c19e39 by mamingqun
Options

修改

parent af04d525
Showing with 739 additions and 716 deletions
src/components/Description.vue
<template>
<div class="mainBox">
<!-- <div class="topBox5686"></div> -->
<div class="goHome" @click="goHome"></div>
<div class="contentWrap">
<div class="contentBox" v-if="ruleInfo">
<div class="shuomingTitle"></div>
<div class="text1" v-html="ruleInfo.zhuti">
<!-- <p>以“春节回家”为主题方向，有奖征集与万达人和万达粉丝们春节回家过年相关的摄影作品。</p>
<div class="mainBox">
<!-- <div class="topBox5686"></div> -->
<div class="goHome" @click="goHome"></div>
<div class="contentWrap">
<div class="contentBox" v-if="ruleInfo">
<div class="shuomingTitle"></div>
<div class="text1">
<div class="top"></div>
<div class="middle" v-html="ruleInfo.zhuti"></div>
<div class="bottom"></div>
<!-- <p>以“春节回家”为主题方向，有奖征集与万达人和万达粉丝们春节回家过年相关的摄影作品。</p>
<p>反映春运返乡道路上的艰难与劳顿，回家后的放松与惬意，亲人团聚时刻的幸福和笑脸，传递亲人、爱人、朋友、同窗、战友等不同情感的动人瞬间和情感故事。</p>
<p>投稿作品要求立意鲜明、形象生动、情感真切，有较强的视觉表现力。</p>-->
</div>
<div class="text5">
<div class="title"></div>
<div v-html="ruleInfo.cansai">
<!-- <p>参赛作品征集时间
<p>投稿作品要求立意鲜明、形象生动、情感真切，有较强的视觉表现力。</p>-->
</div>
<div class="text5">
<div class="title"></div>
<div v-html="ruleInfo.cansai">
<!-- <p>参赛作品征集时间
<br>2019年1月28日（小年）至2019年2月25日（正月廿一）
</p>
<p>入围作品公布时间
......@@ -25,18 +28,18 @@
<p>投稿及评选说明
<br>投稿者将作品上传至该平台即可参赛。
<br>鼓励投稿作品为新近拍摄，每位投稿者上传作品件数不限，单幅及组照（至少5张单幅作品构成的系列作品）均算作1件。
</p>-->
</div>
</div>
<div class="text2">
<div class="bar3" v-for="(item, index) in ruleInfo.jiangpin" :key="index">
<div class="rank">
<span>{{item.name}}</span>
<span>{{item.num}}名</span>
</div>
<div class="prize lightBlue">{{item.prize}}</div>
</div>
<!-- <div class="bar3">
</p>-->
</div>
</div>
<div class="text2">
<div class="bar3" v-for="(item, index) in ruleInfo.jiangpin" :key="index">
<div class="rank">
<span>{{item.name}}</span>
<span>{{item.num}}名</span>
</div>
<div class="prize lightBlue">{{item.prize}}</div>
</div>
<!-- <div class="bar3">
<div class="rank">
<span>金奖</span>
<span>1名</span>
......@@ -63,14 +66,14 @@
<span>10名</span>
</div>
<div class="prize lightBlue">万达影院电影票2张</div>
</div>-->
</div>
<!-- <div class="text3">
</div>-->
</div>
<!-- <div class="text3">
<p>征稿时间：2019.1.1-2019.1.1</p>
<p>评选时间：2019.1.1-2019.1.1</p>
<p>获奖公示：2019.1.1</p>
</div>-->
<!-- <div class="text4">
</div>-->
<!-- <div class="text4">
<div class="title"></div>
<div class="dunk">
<div class="dunkTitle">拍摄万达建筑影像</div>
......@@ -88,11 +91,11 @@
<div class="dunkTitle">征集与万达相关的老照片</div>
<p>万达集团成立这30年来，一张张万达老照片记录了时代的轨迹，见证了城市的发展，万达陪你一起看见光阴的故事。拿出你手中珍藏的老照片，让我们知道你与万达不得不说的故事。</p>
</div>
</div>-->
<div class="text6">
<div class="title"></div>
<div v-html="ruleInfo.xize">
<!-- <p>1、中国各省、市、自治区（含港、澳、台地区）摄影人均可投稿。</p>
</div>-->
<div class="text6">
<div class="title"></div>
<div v-html="ruleInfo.xize">
<!-- <p>1、中国各省、市、自治区（含港、澳、台地区）摄影人均可投稿。</p>
<p>2、鼓励投稿者提交新近拍摄的作品。单幅、组照均可（组照不少于5张的单幅图片组成，并标明序号，并附文字说明），单幅及组照按1件计算。投稿作品需为jpg格式，单张照片宽度需大于1000px,文件大小不超过2M。</p>
<p>3、投稿者应实名投稿。</p>
<p>4、本次征集谢绝电脑创意作品，不得对原始图像进行任何足以影响其真实性判断的改动。</p>
......@@ -100,288 +103,309 @@
<p>6、投稿者应保证其为所投送作品的作者，并对该作品的整体及局部均拥有独立、完整、明确、无争议的著作权；投稿者还应保证其所投送的作品不侵犯第三人的包括著作权、肖像权、名誉权、隐私权等在内的合法权益。投稿者应承担由其稿件及投稿行为所引发的一切后果与责任。</p>
<p>7、本次摄影征集活动不收投稿费，不退稿。</p>
<p>8、对于所有入选作品，主办、承办方有权在著作权存续期内，以复制、发行、展览、放映、信息网络传播等方式用于非商业性的宣传，并不再支付稿酬。</p>
<p>9、本征稿启事解释权属于主办单位。凡投稿者，即视为其已同意本征稿启事之所有规定。</p> -->
</div>
</div>
</div>
<p>9、本征稿启事解释权属于主办单位。凡投稿者，即视为其已同意本征稿启事之所有规定。</p>-->
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import store from '../modules/store/index';
export default {
computed: {
ruleInfo() {
if (store.state.publicActiveInfo) {
return store.state.publicActiveInfo.rule
} else {
return null
}
}
},
methods: {
goHome() {
this.$router.push({ path: '/' });
}
},
store
computed: {
ruleInfo() {
if (store.state.publicActiveInfo) {
return store.state.publicActiveInfo.rule
} else {
return null
}
}
},
methods: {
goHome() {
this.$router.push({ path: '/' });
}
},
store
}
</script>
<style lang="scss" >
.dingwei {
position: relative;
top: -10px;
position: relative;
top: -10px;
}
.margintop30 {
padding-top: 25px;
padding-top: 25px;
}
.mainBox {
width: 100%;
background: white;
font-size: 28px;
padding-bottom: 1px;
.goHome {
width: 56px;
height: 56px;
background: url("~@/pages/index/assets/images/colse1.png") no-repeat;
background-size: contain;
position: absolute;
top: 60px;
right: 40px;
}
.lightBlue {
color: #4f7bc5;
width: 100%;
background: white;
font-size: 28px;
padding-bottom: 1px;
.goHome {
width: 56px;
height: 56px;
background: url("~@/pages/index/assets/images/colse1.png") no-repeat;
background-size: contain;
position: absolute;
top: 60px;
right: 40px;
}
.lightBlue {
color: #4f7bc5;
}
.black {
color: black;
font-weight: bold;
}
.topBox5686 {
height: 310px;
background: url("~@/pages/index/assets/images/indexBanner.jpg") no-repeat;
background-size: 100% auto;
position: relative;
}
.contentWrap {
background: linear-gradient(#ddf2fd, white 40%);
}
.contentBox {
padding-left: 44px;
padding-right: 44px;
padding-top: 38px;
padding-bottom: 40px;
// background: url("~@/pages/index/assets/images/shuoming/bglogo.png")
// no-repeat top 1% right;
// background-size: 31% auto;
.shuomingTitle {
height: 82px;
background: url("~@/pages/index/assets/images/shuoming/shuodongshuoming.png")
no-repeat center;
background-size: auto 100%;
margin-bottom: 38px;
}
.black {
color: black;
font-weight: bold;
}
.text1 {
// height: 555px;
// background: url("~@/pages/index/assets/images/shuoming/text1.png") no-repeat center;
background-size: 100% auto;
// padding-left: 40px;
// padding-right: 40px;
padding-top: 55px;
margin-bottom: 47px;
.top {
background: url("~@/pages/index/assets/images/shuoming/topBar.png")
no-repeat center bottom;
background-size: contain;
height: 60px;
}
.topBox5686 {
height: 310px;
background: url("~@/pages/index/assets/images/indexBanner.jpg")
no-repeat;
background-size: 100% auto;
.middle {
background: url("~@/pages/index/assets/images/shuoming/middleBar.png")
repeat-y center;
background-size: contain;
padding-left: 40px;
padding-right: 40px;
padding-top: 30px;
}
.bottom {
background: url("~@/pages/index/assets/images/shuoming/bottomBar.png")
no-repeat center top;
height: 60px;
background-size: contain;
position: relative;
top: -10px;
}
p {
line-height: 48px;
text-indent: 2em;
text-align: justify;
margin-bottom: 8px;
}
}
.contentWrap {
background: linear-gradient(#ddf2fd, white 40%);
p {
line-height: 42px;
text-indent: 2em;
text-align: justify;
}
.contentBox {
padding-left: 44px;
padding-right: 44px;
padding-top: 38px;
padding-bottom: 40px;
// background: url("~@/pages/index/assets/images/shuoming/bglogo.png")
// no-repeat top 1% right;
// background-size: 31% auto;
.shuomingTitle {
height: 82px;
background: url("~@/pages/index/assets/images/shuoming/shuodongshuoming.png")
no-repeat center;
background-size: auto 100%;
margin-bottom: 38px;
.text2 {
height: 484px;
background: url("~@/pages/index/assets/images/shuoming/text2.png")
no-repeat center;
background-size: 100% auto;
padding-left: 40px;
padding-right: 40px;
padding-top: 70px;
padding-bottom: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 45px;
.bar1 {
width: 100%;
height: 72px;
line-height: 72px;
background: linear-gradient(#c7e3f0 40%, #b2cfec);
border-radius: 14px;
padding-left: 37px;
}
.bar2 {
width: 260px;
height: 126px;
background: linear-gradient(#c7e3f0 40%, #b2cfec);
border-radius: 14px;
padding-left: 22px;
padding-right: 22px;
padding-top: 25px;
.rank {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.text1 {
height: 555px;
background: url("~@/pages/index/assets/images/shuoming/text1.png")
no-repeat center;
background-size: 100% auto;
padding-left: 40px;
padding-right: 40px;
padding-top: 55px;
margin-bottom: 47px;
p {
line-height: 48px;
text-indent: 2em;
text-align: justify;
margin-bottom: 8px;
}
.prize {
padding-top: 20px;
text-align: right;
}
p {
line-height: 42px;
text-indent: 2em;
text-align: justify;
}
.bar3 {
width: 560px;
height: 75px;
background: linear-gradient(#c7e3f0 40%, #b2cfec);
border-radius: 14px;
padding-left: 22px;
padding-right: 22px;
// padding-top: 25px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.rank {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 240px;
// background: red;
}
.text2 {
height: 484px;
background: url("~@/pages/index/assets/images/shuoming/text2.png")
no-repeat center;
background-size: 100% auto;
padding-left: 40px;
padding-right: 40px;
padding-top: 70px;
padding-bottom: 30px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 45px;
.bar1 {
width: 100%;
height: 72px;
line-height: 72px;
background: linear-gradient(#c7e3f0 40%, #b2cfec);
border-radius: 14px;
padding-left: 37px;
}
.bar2 {
width: 260px;
height: 126px;
background: linear-gradient(#c7e3f0 40%, #b2cfec);
border-radius: 14px;
padding-left: 22px;
padding-right: 22px;
padding-top: 25px;
.rank {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.prize {
padding-top: 20px;
text-align: right;
}
}
.bar3 {
width: 560px;
height: 75px;
background: linear-gradient(#c7e3f0 40%, #b2cfec);
border-radius: 14px;
padding-left: 22px;
padding-right: 22px;
// padding-top: 25px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.rank {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 210px;
// background: red;
}
.prize {
// padding-top: 20px;
text-align: right;
}
}
.prize {
// padding-top: 20px;
text-align: right;
}
}
}
.text3 {
height: 225px;
background: url("~@/pages/index/assets/images/shuoming/shijian.png")
no-repeat center;
background-size: 100% auto;
padding-left: 30px;
padding-top: 65px;
margin-bottom: 50px;
}
.text3 {
height: 225px;
background: url("~@/pages/index/assets/images/shuoming/shijian.png")
no-repeat center;
background-size: 100% auto;
padding-left: 30px;
padding-top: 65px;
margin-bottom: 50px;
}
.text4 {
margin-bottom: 60px;
.title {
height: 36px;
background: url("~@/pages/index/assets/images/shuoming/zhenggao.png")
no-repeat left;
background-size: auto 100%;
margin-bottom: 35px;
}
.sub {
margin-bottom: 20px;
}
.dunk {
background: #dfeefa;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 22px;
margin-bottom: 20px;
.dunkTitle {
color: #656d72;
font-size: 31px;
font-weight: bold;
margin-bottom: 20px;
padding-left: 30px;
background: url("~@/pages/index/assets/images/shuoming/point.png")
no-repeat left center;
background-size: auto 70%;
margin-left: 10px;
}
p {
padding-left: 33px;
padding-right: 33px;
text-indent: 0;
}
}
.text4 {
margin-bottom: 60px;
.title {
height: 36px;
background: url("~@/pages/index/assets/images/shuoming/zhenggao.png")
no-repeat left;
background-size: auto 100%;
margin-bottom: 35px;
}
.sub {
margin-bottom: 20px;
}
.dunk {
background: #dfeefa;
border-radius: 10px;
padding-top: 25px;
padding-bottom: 22px;
margin-bottom: 20px;
.dunkTitle {
color: #656d72;
font-size: 31px;
font-weight: bold;
margin-bottom: 20px;
padding-left: 30px;
background: url("~@/pages/index/assets/images/shuoming/point.png")
no-repeat left center;
background-size: auto 70%;
margin-left: 10px;
}
.text5 {
margin-bottom: 46px;
.title {
height: 36px;
background: url("~@/pages/index/assets/images/shuoming/guize.png")
no-repeat left;
background-size: auto 100%;
margin-bottom: 35px;
}
p {
margin-bottom: 24px;
text-indent: 0;
padding-left: 30px;
background: url("~@/pages/index/assets/images/shuoming/point.png")
no-repeat left top 5px;
background-size: auto 23px;
}
p {
padding-left: 33px;
padding-right: 33px;
text-indent: 0;
}
}
}
.text6 {
.title {
height: 36px;
background: url("~@/pages/index/assets/images/shuoming/banquan.png")
no-repeat left;
background-size: auto 100%;
margin-bottom: 35px;
}
p {
text-indent: 0;
padding-left: 30px;
margin-bottom: 30px;
// line-height: 50px;
}
}
.text5 {
margin-bottom: 46px;
.title {
height: 36px;
background: url("~@/pages/index/assets/images/shuoming/guize.png")
no-repeat left;
background-size: auto 100%;
margin-bottom: 35px;
}
p {
margin-bottom: 24px;
text-indent: 0;
padding-left: 30px;
background: url("~@/pages/index/assets/images/shuoming/point.png")
no-repeat left top 5px;
background-size: auto 23px;
}
}
.text6 {
.title {
height: 36px;
background: url("~@/pages/index/assets/images/shuoming/banquan.png")
no-repeat left;
background-size: auto 100%;
margin-bottom: 35px;
}
p {
text-indent: 0;
padding-left: 30px;
margin-bottom: 30px;
// line-height: 50px;
}
}
}
}
</style>
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/pages/index/Shouye.vue
......@@ -204,7 +204,7 @@ export default {
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) => {
axios.get('http://wanda-qj.iyunfish.com/wandah5/activity/info').then((result) => {
console.log('活动的data')
......
src/pages/user/User.vue
<template>
<section class="bigWrap">
<div class="topInof">
<div class="goHome">
<a :href="indexHref"></a>
</div>
<div class="left">
<div class="imageBox">
<img :src="avatar" alt>
</div>
<div class="userName">{{nickname}}</div>
</div>
<div class="right">
<div class="item dianzanshu">
<div class="imageBox"></div>
<div class="text">{{point_num}}赞</div>
</div>
<div class="item dizhi">
<div class="imageBox"></div>
<div class="text">实名认证</div>
<router-link tag="a" :to="{path:'/address'}"></router-link>
</div>
</div>
<section class="bigWrap">
<div class="topInof">
<div class="goHome">
<a :href="indexHref"></a>
</div>
<div class="left">
<div class="imageBox">
<img :src="avatar" alt>
</div>
<div class="contentBox">
<div class="subcontent" ref="userBox" v-if="userList.length">
<vue-waterfall-easy
ref="lastContent"
v-if="userList"
:loadingDotStyle="userdot"
:imgsArr="userList"
@scrollReachBottom="getUserImgList"
>
<div class="img-info" slot-scope="props">
<Cardcommon :dataV="props.value" cartType="userCenter"></Cardcommon>
</div>
<!-- <div slot="waterfall-over">没有更多了123~</div> -->
</vue-waterfall-easy>
<!-- <div class="allLoaded" v-if="userAllLoaded">没有更多了~</div> -->
</div>
<div v-else class="subcontent" ref="userBox">
<p class="kong">还没有上传过作品</p>
</div>
<div class="userName">{{nickname}}</div>
</div>
<div class="right">
<div class="item dianzanshu">
<div class="imageBox"></div>
<div class="text">{{point_num}}赞</div>
</div>
</section>
<div class="item dizhi">
<div class="imageBox"></div>
<div class="text">实名认证</div>
<router-link tag="a" :to="{path:'/address'}"></router-link>
</div>
</div>
</div>
<div class="contentBox">
<div class="subcontent" ref="userBox" v-if="userList.length">
<vue-waterfall-easy
ref="lastContent"
v-if="userList"
:loadingDotStyle="userdot"
:imgsArr="userList"
@scrollReachBottom="getUserImgList"
>
<div class="img-info" slot-scope="props">
<Cardcommon :dataV="props.value" cartType="userCenter"></Cardcommon>
</div>
<!-- <div slot="waterfall-over">没有更多了123~</div> -->
</vue-waterfall-easy>
<!-- <div class="allLoaded" v-if="userAllLoaded">没有更多了~</div> -->
</div>
<div v-else class="subcontent" ref="userBox">
<p class="kong">还没有上传过作品</p>
</div>
</div>
</section>
</template>
<script>
......@@ -64,417 +64,415 @@ import $ from 'jquery';
export default {
data() {
return {
avatar: '',
nickname: '',
point_num: '',
userList: '',
userPage: 1,
userAllLoaded: false,
userdot: { backgroundColor: 'transparent' },
indexHref: ''
};
data() {
return {
avatar: '',
nickname: '',
point_num: '',
userList: '',
userPage: 1,
userAllLoaded: false,
userdot: { backgroundColor: 'transparent' },
indexHref: ''
};
},
store,
created() {
var _this = this
axios.get('http://wanda-qj.iyunfish.com/wandah5/activity/info').then((result) => {
var type = result.data.data.system_type;
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);
axios.defaults.headers.common['systemtype'] = type;
$('title').text(result.data.data.title);
store.commit('getPublicActiveInfo');
store.commit('getPublicShareInfo');
_this.getUserInfo();
_this.getUserImgList();
_this.indexHref = window.windowIndexHref;
this.getWeixinPowerShare();
}).catch((err) => {
console.log(err);
});
},
mounted() {
// this.getWeixinPowerShare();
$eventbus.$on('dianzanle', data => {
this.tongbudianzan(this.userList, data);
});
$eventbus.$on('detelItem', () => {
this.getUserInfo();
this.userList = false;
this.userAllLoaded = false;
this.userPage = 1;
this.getUserImgList();
})
},
activated() {
setTimeout(() => {
this.getWeixinPowerShare();
}, 400);
},
methods: {
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;
this.getUserInfo();
}
},
store,
created() {
var _this = this
axios.get('http://wanda-qj.iyunfish.com/wandah5/activity/info').then((result) => {
var type = result.data.data.system_type;
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);
axios.defaults.headers.common['systemtype'] = type;
$('title').text(result.data.data.title);
store.commit('getPublicActiveInfo');
store.commit('getPublicShareInfo');
_this.getUserInfo();
_this.getUserImgList();
_this.indexHref = window.windowIndexHref;
this.getWeixinPowerShare();
}).catch((err) => {
console.log(err);
});
getUserInfo() {
axios.get('/contest/user/info').then(res => {
this.avatar = res.data.data.avatar;
this.nickname = res.data.data.nickname;
this.point_num = res.data.data.point_num;
});
},
mounted() {
// this.getWeixinPowerShare();
$eventbus.$on('dianzanle', data => {
this.tongbudianzan(this.userList, data);
});
$eventbus.$on('detelItem', () => {
this.getUserInfo();
this.userList = false;
this.userAllLoaded = false;
this.userPage = 1;
this.getUserImgList();
getUserImgList() {
axios
.get('/contest/user/image/list', {
params: {
page: this.userPage
}
})
.then(res => {
var arr = res.data.data.data;
var newArr = this.addSrc(arr);
if (arr.length === 0) {
return;
}
if (arr.length < res.data.data.size) {
this.userAllLoaded = true;
this.userdot = { backgroundColor: 'transparent' };
}
if (this.userList) {
this.userList = this.userList.concat(newArr);
} else {
this.userList = newArr;
}
this.userPage++;
});
},
activated() {
setTimeout(() => {
this.getWeixinPowerShare();
}, 400);
addSrc(arr) {
arr.forEach(ele => {
ele['src'] = ele.image;
});
return arr;
},
methods: {
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;
this.getUserInfo();
}
},
getUserInfo() {
axios.get('/contest/user/info').then(res => {
this.avatar = res.data.data.avatar;
this.nickname = res.data.data.nickname;
this.point_num = res.data.data.point_num;
});
},
getUserImgList() {
axios
.get('/contest/user/image/list', {
params: {
page: this.userPage
}
})
.then(res => {
var arr = res.data.data.data;
var newArr = this.addSrc(arr);
if (arr.length === 0) {
return;
}
if (arr.length < res.data.data.size) {
this.userAllLoaded = true;
this.userdot = { backgroundColor: 'transparent' };
}
if (this.userList) {
this.userList = this.userList.concat(newArr);
} else {
this.userList = newArr;
}
this.userPage++;
});
},
addSrc(arr) {
arr.forEach(ele => {
ele['src'] = ele.image;
});
return arr;
},
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: 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);
});
},
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];
}
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"}
}
});
return id;
},
hiddenBar() {
document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
// WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
// WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
// WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
});
},
},
components: {
Cardcommon,
vueWaterfallEasy
// // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
wx.updateAppMessageShareData(
{
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);
});
},
beforeRouteLeave(to, from, next) {
try {
this.userBox = this.$refs.userBox.getElementsByClassName('vue-waterfall-easy-scroll')[0];
let userY = this.userBox.scrollTop;
store.commit('changeUserBoxScrollY', userY);
} catch (error) {
console.log(error);
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];
}
});
next();
return id;
},
hiddenBar() {
document.addEventListener("WeixinJSBridgeReady", function onBridgeReady() {
WeixinJSBridge.call("hideToolbar"); // 隐藏底部状态栏
// WeixinJSBridge.call("hideOptionMenu"); // 隐藏右上角的三个点的选项
// WeixinJSBridge.call("showToolbar"); // 显示底部状态栏
// WeixinJSBridge.call("showOptionMenu"); // 显示右上角的三个点的选项
});
},
activated() {
try {
this.userBox.scrollTop = this.$store.state.userBoxScroll;
} catch (error) { }
},
components: {
Cardcommon,
vueWaterfallEasy
},
beforeRouteLeave(to, from, next) {
try {
this.userBox = this.$refs.userBox.getElementsByClassName('vue-waterfall-easy-scroll')[0];
let userY = this.userBox.scrollTop;
store.commit('changeUserBoxScrollY', userY);
} catch (error) {
console.log(error);
}
next();
},
activated() {
try {
this.userBox.scrollTop = this.$store.state.userBoxScroll;
} catch (error) { }
}
};
</script>
<style lang="scss" scoped>
.bigWrap {
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
display: flex;
flex-direction: column;
}
.topInof {
height: 300px;
background: url("~@/pages/user/assets/images/topbg.png") no-repeat;
height: 300px;
background: url("~@/pages/user/assets/images/topbg.png") no-repeat;
background-size: 100% auto;
background-position: center;
position: relative;
.goHome {
width: 40px;
height: 40px;
background: url("~@/pages/user/assets/images/gohome.png") no-repeat;
background-size: 100% auto;
background-position: center;
position: relative;
.goHome {
width: 40px;
height: 40px;
background: url("~@/pages/user/assets/images/gohome.png") no-repeat;
background-size: 100% auto;
position: absolute;
left: 15px;
top: 15px;
a {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
position: absolute;
left: 15px;
top: 15px;
a {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.left {
position: absolute;
left: 50px;
top: 30px;
width: 230px;
// background: green;
.imageBox {
width: 144px;
height: 144px;
border-radius: 50%;
margin: 24px auto;
// background: yellow;
img {
width: 100%;
border-radius: 50%;
}
}
.userName {
color: white;
text-align: center;
font-size: 38px;
}
}
.right {
width: 424px;
height: 68px;
display: flex;
flex-direction: row;
justify-content: space-between;
position: absolute;
top: 93px;
left: 278px;
.item {
min-width: 193px;
height: 68px;
border-radius: 5px;
background-color: #d9d6d3;
font-size: 26px;
padding-left: 22px;
padding-right: 22px;
}
.left {
.dizhi {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
a {
display: block;
position: absolute;
left: 50px;
top: 30px;
width: 230px;
// background: green;
.imageBox {
width: 144px;
height: 144px;
border-radius: 50%;
margin: 24px auto;
// background: yellow;
img {
width: 100%;
border-radius: 50%;
}
}
.userName {
color: white;
text-align: center;
font-size: 38px;
}
}
.right {
width: 424px;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.imageBox {
height: 34px;
width: 34px;
background: url("~@/pages/user/assets/images/address.png") no-repeat;
background-size: 100% auto;
}
.text {
height: 68px;
display: flex;
flex-direction: row;
justify-content: space-between;
position: absolute;
top: 93px;
left: 278px;
.item {
min-width: 193px;
height: 68px;
border-radius: 5px;
background-color: #d9d6d3;
font-size: 26px;
padding-left: 22px;
padding-right: 22px;
}
line-height: 70px;
color: white;
}
}
.dizhi {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
a {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.imageBox {
height: 34px;
width: 34px;
background: url("~@/pages/user/assets/images/address.png")
no-repeat;
background-size: 100% auto;
}
.text {
height: 68px;
line-height: 70px;
color: white;
}
}
.dianzanshu {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
.dianzanshu {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
.imageBox {
height: 34px;
width: 34px;
background: url("~@/pages/user/assets/images/xinwhite.png")
no-repeat;
background-size: 100% auto;
}
.text {
width: 110px;
height: 68px;
line-height: 68px;
color: white;
text-align: center;
// background-color: green;
}
}
.imageBox {
height: 34px;
width: 34px;
background: url("~@/pages/user/assets/images/xinwhite.png") no-repeat;
background-size: 100% auto;
}
.text {
width: 110px;
height: 68px;
line-height: 68px;
color: white;
text-align: center;
// background-color: green;
}
}
}
}
.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;
}
.contentBox {
flex: 1;
background: #f5f5f5;
overflow: hidden;
.subcontent {
height: 100%;
overflow: scroll;
.kong {
height: 300px;
line-height: 300px;
color: gray;
font-size: 30px;
text-align: center;
}
flex: 1;
background: #f5f5f5;
overflow: hidden;
.wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
.subcontent {
height: 100%;
overflow: scroll;
.kong {
height: 300px;
line-height: 300px;
color: gray;
font-size: 30px;
text-align: center;
}
padding-left: 15px;
padding-right: 15px;
justify-content: space-between;
margin: 0 auto;
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-left: 15px;
padding-right: 15px;
justify-content: space-between;
margin: 0 auto;
}
}
}
</style>
\ No newline at end of file
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