You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
207 lines
7.1 KiB
207 lines
7.1 KiB
<template> |
|
<view class="app-wallpaper" :style="{ |
|
backgroundImage:'url('+staticImage.wallpaperBgImage+')' |
|
}"> |
|
<view class="index-banner" :style="{backgroundImage:'url('+staticImage.bannerBack+')'}"> |
|
<view class="index-banner-container" > |
|
<view class="" style="border:4rpx solid #3F3F3F;border-radius: 25rpx;overflow: hidden;"> |
|
<u-swiper height="600" :list="indexBanner"></u-swiper> |
|
</view> |
|
<!-- <image class="img" v-for="(item, index) in indexBanner" mode="widthFix" wx:key="index" :src="item.image" alt=""/>--> |
|
</view> |
|
</view> |
|
<view class="index-user-detail" :style="{backgroundImage:'url('+staticImage.indexUserBack+')'}" v-if="(userInfo.name)"> |
|
<view class="user-detail-container row"> |
|
<view class="user-avatar" @click="navTo('/pages/UserDetail/index',true)"> |
|
<u-avatar mode="widthFix" class="img" :src="user.avatar" size="75"></u-avatar> |
|
</view> |
|
<view class="user-content"> |
|
<view class="user-title-top row"> |
|
<u-image class="img" height="35" width="83" mode="heightFix" |
|
:src="staticImage.hiImage"></u-image> |
|
<view class="user-title-text" style="display: block;"> |
|
<!-- <view class="" style="color:#131313;font-size: 30rpx;max-width:200rpx;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">--> |
|
<!-- {{userInfo.name}}--> |
|
<!-- </view>--> |
|
<u-text :text="userInfo.name" lines="1" color="#131313" size="30rpx" custom-style="max-width:200rpx;max-height:30rpx;"></u-text> |
|
</view> |
|
</view> |
|
<view class="user-title-bottom"> |
|
<image class="img" mode="aspectFit" |
|
:src="staticImage.dogImage" alt=""/> |
|
<text class="user-title-idcard"> |
|
会员编号：{{ userInfo.id }} |
|
</text> |
|
</view> |
|
</view> |
|
<view class="user-coupons" :style="{backgroundImage:'url('+staticImage.couponsImage+')'}"> |
|
<view class="user-coupons-number" @click="navTo('/pages/UserCoupons/index',true)"> |
|
<view class="user-coupons-number-container"> |
|
{{ userExtends.coupon_count }} |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="index-button-group row"> |
|
<view class="index-button-detail col-6" v-for="(item, index) in staticImage.indexButtonGroup" wx:key="index"> |
|
<view class="index-button-detail-container row" style="position: relative;" :style="{ |
|
backgroundImage:'url('+item.backgroundImage+')' |
|
}" @click="navTo(item.url,true)"> |
|
<view class="img-gun" v-if="index===0||index===2" style="position:absolute;right:-50rpx;;z-index:1;" :style="{transform:(index===2)?'scaleX(-1)':'scaleX(1)',top:(index===2)?'75%':'10%'}"> |
|
<u-image width="120" height="30" mode="widthFix" class="img" |
|
:src="staticImage.indexGun"></u-image> |
|
</view> |
|
<view class="col-12"> |
|
<u-image width="180" mode="widthFix" class="img" custom-style="flex-direction: column-reverse;justify-content:center;" |
|
:src="item.serviceImage"></u-image> |
|
</view> |
|
<view class="col-12"> |
|
<u-image width="180" height="55" mode="widthFix" class="img" |
|
:src="item.buttonImage"></u-image> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import api from '@/utils/functions.js'; |
|
import log from "@/utils/log"; |
|
import {userDetail, userExtends} from "@/api/user"; |
|
import {getConfig} from "@/api/other"; |
|
import {UserCache} from "@/config/config"; |
|
|
|
export default { |
|
data: { |
|
title: 'Hello', |
|
loading: true, |
|
staticImage: { |
|
bannerBack:imghost + '/banner-backgrond.png', |
|
indexUserBack:imghost + '/index-user-banner-background.png', |
|
hiImage: imghost + '/index-user-title-hi.png', |
|
dogImage: imghost + '/index-user-title-dog.png', |
|
couponsImage: imghost + '/index-user-coupons-background.png', |
|
indexGun: imghost + '/index-gun.png', |
|
indexButtonGroup: [ |
|
{ |
|
backgroundImage: imghost + '/index-button-one.png', |
|
serviceImage: imghost + '/index-button-bg-one.png', |
|
buttonImage: imghost + '/index-button-bg-btn-one.png', |
|
url: '/pages/OrderPage/index?type=1' |
|
}, { |
|
backgroundImage: imghost + '/index-button-five.png', |
|
serviceImage: imghost + '/index-button-bg-five.png', |
|
buttonImage: imghost + '/index-button-bg-btn-five.png', |
|
url: '/pages/OrderPage/index?type=2' |
|
},{ |
|
backgroundImage: imghost + '/index-button-two.png', |
|
serviceImage: imghost + '/index-button-bg-two.png', |
|
buttonImage: imghost + '/index-button-bg-btn-two.png', |
|
url: '/pages/Card/index' |
|
}, { |
|
backgroundImage: imghost + '/index-button-three.png', |
|
serviceImage: imghost + '/index-button-bg-three.png', |
|
buttonImage: imghost + '/index-button-bg-btn-three.png', |
|
url: '/pages/Coupons/index' |
|
}, |
|
], |
|
wallpaperBgImage: imghost + '/background.png' |
|
}, |
|
indexBanner: [], |
|
user: {}, |
|
isTop: false, |
|
pagePadding: 100, |
|
userInfo: {}, |
|
userExtends: {}, |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
methods: { |
|
getHomeConfig(){ |
|
getConfig('banner').then(res => { |
|
this.indexBanner = res.data.banner; |
|
}) |
|
}, |
|
userCouponsPage() { |
|
uni.navigateTo({ |
|
url: '/pages/UserCoupons/index' |
|
}) |
|
}, |
|
navTo(url,token = false) { |
|
if (token) { |
|
if (uni.getStorageSync('token')) { |
|
uni.navigateTo({ |
|
url: url |
|
}) |
|
} else { |
|
uni.navigateTo({ |
|
url: '/pages/Login/index' |
|
}) |
|
} |
|
}else{ |
|
uni.navigateTo({ |
|
url: url |
|
}) |
|
} |
|
}, |
|
updateUserInfo() { |
|
if (this.userInfo) { |
|
this.user.id = this.userInfo.id |
|
this.user.nickname = this.userInfo.name |
|
this.user.avatar = this.userInfo.avatar |
|
this.user.coupon_count = this.userExtends.coupon_count |
|
} |
|
} |
|
}, |
|
onPageScroll(res) { |
|
if (res.scrollTop <= 20) { |
|
uni.$emit('isTop', true); |
|
} else { |
|
uni.$emit('isTop', false); |
|
} |
|
|
|
}, |
|
created() { |
|
this.pagePadding = (api.navHeight().navPaddingTop + |
|
api.navHeight().navHeight + (api.navHeight().headerPadding * 2)) |
|
}, |
|
mounted() { |
|
console.log('userInfo',this.$store.state.userInfo) |
|
this.userInfo = this.$store.state.userInfo; |
|
this.userExtends = this.$store.state.userExtends; |
|
this.getHomeConfig(); |
|
}, |
|
updated() { |
|
|
|
}, |
|
watch: { |
|
"$store.state.userInfo": { |
|
handler(newVal, oldVal) { |
|
this.userInfo = newVal; |
|
console.log('vuexUserInfo',this.userInfo); |
|
this.user.id = newVal.id |
|
this.user.nickname = newVal.name |
|
this.user.avatar = newVal.avatar |
|
|
|
} |
|
}, |
|
"$store.state.userExtends": { |
|
handler(newVal, oldVal) { |
|
this.userExtends = newVal; |
|
// this.updateUserInfo(); |
|
this.user.coupon_count = newVal.coupon_count |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |