Skip to content

F
FuLiMini
Commit 488af975 by shibukun
Options

手噢耶动画

parent 57b9f144
Showing with 138 additions and 23 deletions
pages/home/home.vue
<template> <template>
<view class="layout"> <view class="layout">
<view class="header-cover" ref="headerCover" :style="'opacity:' + opacity">
<view class="header-cover-top">
<!-- <text v-if="isLogin" class="header-cover-name">你好，{{ name }}</text> -->
<!-- <text v-else class="header-cover-login" @click="goLogin()">请登录</text> -->
<text class="header-cover-integral">{{ integralCount }}</text>
<!-- <view class="integral-detail" @click="goIntegralDetail">积分明细 ></view> -->
</view>
</view>
<view class="header"> <view class="header">
<view class="header-top"> <view class="header-top">
<text v-if="isLogin" class="header-name">你好，{{ name }}</text>
<text v-else class="header-login" @click="goLogin()">请登录</text>
<view class="integral-detail" @click="goIntegralDetail">积分明细 ></view>
</view> </view>
<view class="header-center"> <view class="header-center">
<view class="header-integral">{{ integralCount }}</view> <view class="header-integral">{{ integralCount }}</view>
<view class="header-integral-tip">当前积分</view> <view class="header-integral-tip">当前积分</view>
</view> </view>
</view> </view>
<view class="list"> <text v-if="isLogin" class="header-name">你好，{{ name }}</text>
<text v-else class="header-login" @click="goLogin()">请登录</text>
<view class="integral-detail" @click="goIntegralDetail">积分明细 ></view>
<view class="list" ref="list">
<view class="item" v-for="(item, index) in brandList" :key="index" @click="goToGoodDetail(item.brandNo, item.name)"> <view class="item" v-for="(item, index) in brandList" :key="index" @click="goToGoodDetail(item.brandNo, item.name)">
<view class="item-layout"> <view class="item-layout">
<image class="icon" mode="aspectFill" :src="item.imgPath"></image> <image class="icon" mode="aspectFill" :src="item.imgPath"></image>
...@@ -36,7 +46,8 @@ export default { ...@@ -36,7 +46,8 @@ export default {
brandList: [], brandList: [],
page: 1, page: 1,
pageSize: 20, pageSize: 20,
isLogin: false isLogin: false,
opacity: 0
}; };
}, },
created() { created() {
...@@ -46,6 +57,16 @@ export default { ...@@ -46,6 +57,16 @@ export default {
console.log('onShow'); console.log('onShow');
this.getUserInfo(); this.getUserInfo();
}, },
onPageScroll(e) {
console.log(e)
this.opacity = e.scrollTop / 99
// const animation = uni.requireNativePlugin('animation')
// var top = this.$refs.headerCover
// animation.transition(top, {
// opacity: e.scrollTop / 99
// }, () => {})
},
methods: { methods: {
goLogin() { goLogin() {
this.$router.push('Login'); this.$router.push('Login');
...@@ -75,6 +96,34 @@ export default { ...@@ -75,6 +96,34 @@ export default {
.then(res => { .then(res => {
if (res.data.list.length > 0) { if (res.data.list.length > 0) {
this.brandList = this.brandList this.brandList = this.brandList
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list)
.concat(res.data.list); .concat(res.data.list);
this.page += 1; this.page += 1;
} }
...@@ -108,11 +157,55 @@ export default { ...@@ -108,11 +157,55 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
position: relative;
flex-direction: column; flex-direction: column;
.header-cover {
height: 100rpx;
width: 100%;
display: flex;
flex-direction: column;
// background: red;
background-image: url(../../static/home-header-bg.png);
background-size: cover;
position: fixed;
top: 0;
z-index: 999;
.header-cover-top {
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 30rpx;
margin-left: 30rpx;
// .header-cover-name {
// font-size: 24rpx;
// color: #ffffff;
// }
// .header-cover-login {
// font-size: 24rpx;
// color: #ffffff;
// text-decoration: underline;
// }
// .integral-detail {
// background-image: url(../../static/integral-detail-bg.png);
// width: 174rpx;
// height: 58rpx;
// font-size: 26rpx;
// color: #ffffff;
// line-height: 58rpx;
// text-align: center;
// background-size: 100% 100%;
// }
.header-cover-integral {
font-size: 34rpx;
font-weight: bolder;
color: #ffffff;
text-align: center;
}
}
}
.header { .header {
height: 350rpx; height: 350rpx;
width: 100%; width: 100%;
position: sticky;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-image: url(../../static/home-header-bg.png); background-image: url(../../static/home-header-bg.png);
...@@ -123,14 +216,40 @@ export default { ...@@ -123,14 +216,40 @@ export default {
justify-content: space-between; justify-content: space-between;
margin-top: 30rpx; margin-top: 30rpx;
margin-left: 30rpx; margin-left: 30rpx;
}
.header-center {
display: flex;
flex-direction: column;
align-items: center;
.header-integral {
font-size: 82rpx;
font-weight: bolder;
color: #ffffff;
margin-top: 15rpx;
}
.header-integral-tip {
font-size: 24rpx;
color: #ffffff;
}
}
}
.header-name { .header-name {
font-size: 24rpx; font-size: 24rpx;
color: #ffffff; color: #ffffff;
position: fixed;
top: 30rpx;
left: 30rpx;
z-index: 999;
} }
.header-login { .header-login {
font-size: 24rpx; font-size: 24rpx;
color: #ffffff; color: #ffffff;
text-decoration: underline; text-decoration: underline;
position: fixed;
top: 30rpx;
left: 30rpx;
z-index: 999;
} }
.integral-detail { .integral-detail {
background-image: url(../../static/integral-detail-bg.png); background-image: url(../../static/integral-detail-bg.png);
...@@ -141,23 +260,10 @@ export default { ...@@ -141,23 +260,10 @@ export default {
line-height: 58rpx; line-height: 58rpx;
text-align: center; text-align: center;
background-size: 100% 100%; background-size: 100% 100%;
} position: fixed;
} top: 20rpx;
.header-center { z-index: 999;
display: flex; right: 0;
flex-direction: column;
align-items: center;
.header-integral {
font-size: 82rpx;
font-weight: bolder;
color: #ffffff;
margin-top: 15rpx;
}
.header-integral-tip {
font-size: 24rpx;
color: #ffffff;
}
}
} }
.list { .list {
display: flex; display: flex;
......
pages/mine/mine.vue
...@@ -79,6 +79,15 @@ ...@@ -79,6 +79,15 @@
created() { created() {
this.getUserInfo() this.getUserInfo()
}, },
onShow() {
if (uni.getStorageSync('tokenArr').token == undefined) {
uni.switchTab({
url: '../home/home'
})
this.$router.push('Login')
} else {
}
},
methods: { methods: {
getUserInfo() { getUserInfo() {
this.$net.get('/staff/detail').then(res => { this.$net.get('/staff/detail').then(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 to comment