Skip to content

html / wanda-ball

Go to a project
Commit 92d85059 by hank
Options

readme

parent e2a087b2
Showing with 5 additions and 1025 deletions
README.md
# wandasuinipai
# 万达小球童
> A Vue.js project
......@@ -9,7 +9,10 @@
npm install
# serve with hot reload at localhost:8080
npm run server
npm run dev
# build for test with minification
npm run buildtest
# build for production with minification
npm run build
......
src/pages/user/User以前.vue deleted 100644 → 0
<template>
<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>
</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>
import axios from 'axios';
import Cardcommon from '../../components/Cardcommon';
import vueWaterfallEasy from 'vue-waterfall-easy';
// import store from './store';
import store from '../../modules/store';
import { clearTimeout } from 'timers';
import wx from 'weixin-js-sdk';
import api from '@/modules/js/api.js';
export default {
data() {
return {
avatar:'',
nickname:'',
point_num:'',
userList: '',
userPage: 1,
userAllLoaded: false,
userdot:{ backgroundColor: 'transparent' },
indexHref: ''
};
},
store,
created(){
this.getUserInfo();
this.getUserImgList();
this.indexHref = api.indexHref;
},
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();
})
},
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 => {
// console.log(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' };
// console.log('this.$refs.waterfall',this.$refs.waterfall);
// this.$refs.waterfall.waterfallOver()
}
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: encodeURI(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: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg // 分享图标
},
function(res) {
//这里是回调函数
}
);
// // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.updateTimelineShareData(
{
title: '2019男篮世界杯小球童选拔', // 分享标题
link: api.indexHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg // 分享图标
},
function(res) {
//这里是回调函数
}
);
// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareTimeline({
title: '2019男篮世界杯小球童选拔', // 分享标题
link: api.indexHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg, // 分享图标
success: function() {}
});
// // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareAppMessage({
title: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户点击了分享后执行的回调函数
}
});
// // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareQQ({
title: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接
imgUrl: api.shareImg, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
wx.onMenuShareWeibo({
title: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接
imgUrl: api.shareImg, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// // 获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareQZone({
title: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接
imgUrl: api.shareImg, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
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];
}
});
return id;
},
},
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;
}
.topInof {
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;
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;
}
.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;
.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;
}
.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;
}
.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
src/pages/user/User最新.vue deleted 100644 → 0
<template>
<template>
<section class="bigWrap">
<div class="topInof">
<div class="goHome">
<a :href="indexHref"></a>
</div>
<div class="huzhaoIcon" @click = goHuzhao>
</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"><span class="bigFontSize">{{point_num}}</span>&nbsp;赞</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>
</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>
import axios from 'axios';
import Cardcommon from '../../components/Cardcommon';
import vueWaterfallEasy from 'vue-waterfall-easy';
// import store from './store';
import store from '../../modules/store';
import { clearTimeout } from 'timers';
import wx from 'weixin-js-sdk';
import api from '@/modules/js/api.js';
export default {
data() {
return {
avatar:'',
nickname:'',
point_num:'',
userList: '',
userPage: 1,
userAllLoaded: false,
userdot:{ backgroundColor: 'transparent' },
indexHref: ''
};
},
store,
created(){
this.getUserInfo();
this.getUserImgList();
this.indexHref = api.indexHref;
},
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();
})
},
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 => {
// console.log(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' };
// console.log('this.$refs.waterfall',this.$refs.waterfall);
// this.$refs.waterfall.waterfallOver()
}
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: encodeURI(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: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg // 分享图标
},
function(res) {
//这里是回调函数
}
);
// // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
wx.updateTimelineShareData(
{
title: '2019男篮世界杯小球童选拔', // 分享标题
link: api.indexHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg // 分享图标
},
function(res) {
//这里是回调函数
}
);
// 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareTimeline({
title: '2019男篮世界杯小球童选拔', // 分享标题
link: api.indexHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg, // 分享图标
success: function() {}
});
// // 获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareAppMessage({
title: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: api.shareImg, // 分享图标
type: '', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function() {
// 用户点击了分享后执行的回调函数
}
});
// // 获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareQQ({
title: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接
imgUrl: api.shareImg, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
wx.onMenuShareWeibo({
title: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接
imgUrl: api.shareImg, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
// // 获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
wx.onMenuShareQZone({
title: '2019男篮世界杯小球童选拔', // 分享标题
desc: _this.$randomText(), // 分享描述
link: api.indexHref, // 分享链接
imgUrl: api.shareImg, // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
},
cancel: function() {
// 用户取消分享后执行的回调函数
}
});
});
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];
}
});
return id;
},
goHuzhao(){
this.$router.push({ path: 'Huzhao' });
}
},
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;
}
.bigFontSize{
font-size: 34px;
}
.topInof {
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;
position: absolute;
left: 15px;
top: 15px;
a{
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
}
.huzhaoIcon{
width: 214px;
height: 113px;
background: url('~@/pages/user/assets/images/huzhaoiocon.png') no-repeat center;
background-size: 145% auto;
position: absolute;
top: 76px;
right: 20px;
}
.left {
position: absolute;
left: 0px;
top: 41px;
width: 230px;
// background: green;
.imageBox {
width: 113px;
height: 113px;
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: 204px;
height: 136px;
display: flex;
flex-direction: column;
justify-content: flex-start;
position: absolute;
top: 66px;
left: 208px;
// background: yellowgreen;
.item {
min-width: 193px;
height: 53px;
// border-radius: 5px;
// background-color: #d9d6d3;
font-size: 26px;
padding-left: 22px;
padding-right: 22px;
}
.dizhi {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
background: rgba(122,122,125,0.6);
border-radius: 40px;
font-size: 25px;
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: baseline;
align-items: center;
position: relative;
margin-bottom: 8px;
.imageBox {
height: 30px;
width: 30px;
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;
}
.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;
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-left: 15px;
padding-right: 15px;
justify-content: space-between;
margin: 0 auto;
}
}
}
</style>
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