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.
533 lines
15 KiB
533 lines
15 KiB
<template> |
|
<view class="wallpaper-body"> |
|
<view class="head-background"> |
|
<image mode="widthFix" :src="staticImage.bg" class="img" width="100%"/> |
|
</view> |
|
<!-- 轮播开始--> |
|
<u-row :custom-style="{padding:'0 26rpx'}"> |
|
<u-col :span="12"> |
|
<u-swiper |
|
@click="bannerClick" |
|
:list="indexBanner" |
|
height="300" |
|
radius="20" |
|
></u-swiper> |
|
</u-col> |
|
</u-row> |
|
<!-- 轮播结束--> |
|
<!-- 最新资讯开始--> |
|
<u-cell-group :border="false"> |
|
<u-cell |
|
:rightIconStyle="{ |
|
fontSize:'28rpx' |
|
}" |
|
:center="true" |
|
:border="false" |
|
title="会员等级" |
|
value="查看更多" |
|
:clickable="false" |
|
:isLink="true" |
|
url="/pages/News/index" |
|
> |
|
<template v-slot:title> |
|
<view class="cell-container row"> |
|
<view class="cell-title"> |
|
最新资讯 |
|
</view> |
|
<view class="cell-border"></view> |
|
<view class="cell-title-desc col"> |
|
<u-notice-bar direction="column" custom-style="padding:0;" :text="newsLists" icon="" color="#333333" font-size="28" bg-color="transparent"></u-notice-bar> |
|
</view> |
|
</view> |
|
</template> |
|
</u-cell> |
|
</u-cell-group> |
|
<!-- 最新资讯结束--> |
|
<!-- 五个按钮组开始--> |
|
<u-row :custom-style="{padding:'0 26rpx'}"> |
|
<view class="index-five-button row" :style="{backgroundImage:'url('+staticImage.fiveBackground+')'}"> |
|
|
|
<view class="index-five-col col" v-for="item in staticImage.indexButtonGroup" @click="fiveButtonClick(item)"> |
|
<view class="button-img"> |
|
<u-image :src="item.image" width="75" height="75" :lazy-load="true" mode="heightFix"></u-image> |
|
</view> |
|
<view class="button-title">{{ item.title }}</view> |
|
</view> |
|
</view> |
|
</u-row> |
|
<!-- 五个按钮组结束--> |
|
<!-- 广告图开始--> |
|
<view class="index-ad-img" @click="navTo('/pages/Authentication/guide')"> |
|
<u-image class="img" width="100%" height="160" :src="staticImage.wallpaperBgImage" radius="20" mode="aspectFill"/> |
|
</view> |
|
<view class="index-ad-img" v-if="tips"> |
|
<view class="index-ad-desc row" style="justify-content: space-between;"> |
|
<view class="label"> |
|
<u-text text="温馨提示：" color="#AFB5BE" size="24"></u-text> |
|
</view> |
|
<view class="bar col" style="max-width:80%;"> |
|
<u-notice-bar |
|
custom-style="padding:0;" |
|
speed="50" |
|
:text="tips" |
|
icon="" |
|
color="#AFB5BE" font-size="24" bg-color="transparent"></u-notice-bar> |
|
</view> |
|
</view> |
|
</view> |
|
<!-- 广告图结束--> |
|
<!-- 关于我们开始--> |
|
<u-cell-group :border="false" :custom-style="{ |
|
marginTop:'48rpx' |
|
}"> |
|
<u-cell |
|
:rightIconStyle="{ |
|
fontSize:'28rpx' |
|
}" |
|
:center="true" |
|
:border="false" |
|
value="查看更多" |
|
:clickable="false" |
|
:isLink="true" |
|
@click="navTo('/pages/About/index')" |
|
> |
|
<template v-slot:title> |
|
<view class="cell-two-container row"> |
|
<view class="cell-border"></view> |
|
<view class="cell-title"> |
|
关于我们 |
|
</view> |
|
</view> |
|
</template> |
|
</u-cell> |
|
</u-cell-group> |
|
<u-row :custom-style="{padding:'0 26rpx'}"> |
|
<u-col :span="12"> |
|
<view class="about-us-content"> |
|
{{aboutUsDesc}} |
|
</view> |
|
</u-col> |
|
</u-row> |
|
<!--关于我们结束--> |
|
<!--暖新行动开始--> |
|
<u-cell-group :border="false" :custom-style="{ |
|
marginTop:'48rpx' |
|
}"> |
|
<u-cell |
|
:rightIconStyle="{ |
|
fontSize:'28rpx' |
|
}" |
|
:center="true" |
|
:border="false" |
|
value="查看更多" |
|
:clickable="false" |
|
:isLink="true" |
|
@click="activityMore" |
|
> |
|
<template v-slot:title> |
|
<view class="cell-two-container row"> |
|
<view class="cell-border"></view> |
|
<view class="cell-title"> |
|
暖新行动 |
|
</view> |
|
</view> |
|
</template> |
|
</u-cell> |
|
</u-cell-group> |
|
<u-row :custom-style="{padding:'0 26rpx',marginBottom:'16rpx'}" v-for="item in activity"> |
|
<u-col :span="12"> |
|
<view class="image-container"> |
|
<u-image :src="item.image" :lazy-load="true" width="100%" height="180"></u-image> |
|
<view class="img-title"> |
|
<u-text :lines="1" :text="item.title" size="28" color="#FFFFFF" class="img-title"></u-text> |
|
</view> |
|
</view> |
|
</u-col> |
|
</u-row> |
|
<!-- 暖新行动结束--> |
|
<!-- 暖新项目开始--> |
|
<u-cell-group :border="false" :custom-style="{ |
|
marginTop:'48rpx' |
|
}"> |
|
<u-cell |
|
:rightIconStyle="{ |
|
fontSize:'28rpx' |
|
}" |
|
:center="true" |
|
:border="false" |
|
title="会员等级" |
|
value="查看更多" |
|
:clickable="false" |
|
:isLink="true" |
|
@click="projectMore" |
|
> |
|
<template v-slot:title> |
|
<view class="cell-two-container row"> |
|
<view class="cell-border"></view> |
|
<view class="cell-title"> |
|
暖新项目 |
|
</view> |
|
</view> |
|
</template> |
|
</u-cell> |
|
</u-cell-group> |
|
<u-row :custom-style="{padding:'0 26rpx',marginBottom:'16rpx'}" v-for="item in project"> |
|
<u-col :span="12"> |
|
<view class="image-container"> |
|
<u-image :src="item.image" :lazy-load="true" width="100%" height="180"></u-image> |
|
<view class="img-title"> |
|
<u-text :lines="1" :text="item.title" size="28" color="#FFFFFF" class="img-title"></u-text> |
|
</view> |
|
</view> |
|
</u-col> |
|
</u-row> |
|
|
|
<!-- 暖新项目结束--> |
|
<!-- 最新兑换开始--> |
|
<u-cell-group :border="false" :custom-style="{ |
|
marginTop:'48rpx' |
|
}"> |
|
<u-cell |
|
:rightIconStyle="{ |
|
fontSize:'28rpx' |
|
}" |
|
:center="true" |
|
:border="false" |
|
title="会员等级" |
|
value="查看更多" |
|
:clickable="false" |
|
:isLink="true" |
|
@click="shopMore" |
|
> |
|
<template v-slot:title> |
|
<view class="cell-two-container row"> |
|
<view class="cell-border"></view> |
|
<view class="cell-title"> |
|
最新兑换 |
|
</view> |
|
</view> |
|
</template> |
|
</u-cell> |
|
</u-cell-group> |
|
<view class="border-box" :style="{padding:'0 26rpx',position:'relative',backgroundColor:'#f5f5f6',zIndex:1}"> |
|
<view class="shop-more"></view> |
|
<u-row gutter="20" :custom-style="{ |
|
// background:'linear-gradient(180deg, rgba(245, 245, 246, .5) 30%, rgba(245, 245, 246, 1) 100%);', |
|
flexWrap:'wrap', |
|
paddingBottom:'20rpx', |
|
position:'relative', |
|
zIndex:'3', |
|
backgroundColor:'transparent' |
|
}"> |
|
<u-col :span="6" v-for="(item,index) in goodsList" :custom-style="{marginBottom:'20rpx'}" @click="navTo('/pages/Goods/index?id='+item.id)"> |
|
<MzCard |
|
:title="item.name" |
|
:ext="item.coin_number+'币'" |
|
:is-content="false" |
|
:cover="item.cover" |
|
> |
|
<template #title> |
|
<u-text :text="item.name" color="#020B18" size="28" line-height="40" :lines="2"></u-text> |
|
</template> |
|
</MzCard> |
|
</u-col> |
|
|
|
</u-row> |
|
</view> |
|
</view> |
|
<u-notify ref="uNotify" message="Hi uview-plus"></u-notify> |
|
<!-- 最新兑换结束--> |
|
<u-modal :show="modalShow" :content="modalContent" @confirm="modalShow = false"></u-modal> |
|
<uv-popup ref="notDone" round="20" :safeAreaInsetBottom="false"> |
|
<view class="not-done-container" style="padding:0 100rpx;position: relative;"> |
|
<view class="not-done-icon"> |
|
<u-image mode="widthFix" height="400" width="400" :src="staticImage.popIcon"></u-image> |
|
</view> |
|
<view class="not-done-title" style="margin-bottom:74rpx;"> |
|
<u-text :text="modalContent" align="center" color="#020B18" size="28"></u-text> |
|
</view> |
|
<view class="not-done-btn" style="margin-bottom:60rpx;"> |
|
<u-button |
|
text="确定" |
|
color="#FF9545" |
|
shape="circle" |
|
custom-style="color:#020B18;font-size:36rpx;height:80rpx;max-width:320rpx;" |
|
@click="this.$refs.notDone.close();" |
|
></u-button> |
|
</view> |
|
</view> |
|
</uv-popup> |
|
|
|
</template> |
|
|
|
<script> |
|
import { |
|
imghost |
|
} from '@/config/host.js' |
|
import api from '@/utils/functions.js'; |
|
import MzCard from "@/components/MzCard/index.vue"; |
|
import {banner, indexGoods} from "@/api"; |
|
import {newInfo, systemConfig, webConfig} from "@/api/other"; |
|
|
|
|
|
export default { |
|
components:{ |
|
MzCard |
|
}, |
|
data: { |
|
modalShow:false, |
|
modalContent:'', |
|
list1: [ |
|
'https://cdn.uviewui.com/uview/swiper/swiper1.png', |
|
'https://cdn.uviewui.com/uview/swiper/swiper2.png', |
|
'https://cdn.uviewui.com/uview/swiper/swiper3.png', |
|
], |
|
title: '暖新人', |
|
loading: true, |
|
staticImage: { |
|
hiImage: imghost + '/index-user-title-hi.png', |
|
dogImage: imghost + '/index-user-title-dog.png', |
|
couponsImage: imghost + '/index-user-coupons-background.png', |
|
indexButtonGroup: [{ |
|
image: imghost + '/index-five-1.png', |
|
url: '/pages/Authentication/index', |
|
title:'丰行侠认证', |
|
disabled:false |
|
},{ |
|
image: imghost + '/index-five-2.png', |
|
url: '/pages/Consultant/index', |
|
title:'顾问认证', |
|
disabled:false |
|
},{ |
|
image: imghost + '/index-five-3.png', |
|
url: '/pages/Line/index', |
|
title:'线索上传', |
|
disabled:false |
|
},{ |
|
image: imghost + '/index-five-4.png', |
|
url: '/pages/ConsultantLib/index', |
|
title:'社区顾问库', |
|
disabled:false |
|
},{ |
|
image: imghost + '/index-five-5.png', |
|
url: '/pages/Service/index', |
|
title:'暖新服务', |
|
disabled:false |
|
}, |
|
], |
|
wallpaperBgImage: imghost+'/fxx-tip1.png', |
|
bg: imghost + '/BG.png', |
|
fiveBackground: imghost + '/five-button-background.png', |
|
popIcon:imghost+ '/not-done-icon.png', |
|
}, |
|
indexBanner: [], |
|
goodsList: [], |
|
user: { |
|
avatar: imghost + '/banner.png', |
|
nickname: '风', |
|
coupons: 221, |
|
id: 88685 |
|
}, |
|
isTop: false, |
|
pagePadding: 100, |
|
userInfo: {}, |
|
userExtends: {}, |
|
marginTop: 0, |
|
newsLists:['暖新人平台正式上线啦！','暖新人平台正式上线啦！'], |
|
aboutUsDesc:'', |
|
tips:'', |
|
activity:[], |
|
project:[], |
|
}, |
|
onLoad() { |
|
|
|
}, |
|
methods: { |
|
bannerClick(){ |
|
this.navTo('/pages/Pages/plan'); |
|
}, |
|
getNotify(){ |
|
this.modalContent = '暂未开启,敬请期待'; |
|
this.modalShow = true; |
|
}, |
|
fiveButtonClick(item){ |
|
if(item.disabled){ |
|
this.modalContent = '暂未开启,敬请期待'; |
|
this.$refs.notDone.open('center'); |
|
}else{ |
|
if(!uni.getStorageSync('token')){ |
|
wx.navigateTo({ |
|
url: '/pages/Login/index' |
|
}) |
|
return false; |
|
} |
|
// if(item.title === '线索上传'){ |
|
// if(!this.userInfo.fxx || this.userInfo.fxx.length === 0){ |
|
// this.$refs.uNotify.show({ |
|
// top: this.marginTop + 'px', |
|
// type: 'warning', |
|
// message: '您不是丰行侠,请点击首页丰行侠认证', |
|
// duration: 1000 * 3, |
|
// fontSize: 32, |
|
// safeAreaInsetTop: false |
|
// }) |
|
// return false; |
|
// |
|
// } |
|
// } |
|
if(item.title === '丰行侠认证'){ |
|
if(this.userInfo.fxx.number){ |
|
console.log(this.modalContent) |
|
this.modalContent = '您已经是丰行侠了,不用再认证了'; |
|
this.$refs.notDone.open('center'); |
|
return false; |
|
|
|
} |
|
} |
|
this.navTo(item.url,true) |
|
} |
|
}, |
|
userCouponsPage() { |
|
wx.navigateTo({ |
|
url: '/pages/UserCoupons/index' |
|
}) |
|
}, |
|
shopMore(){ |
|
uni.redirectTo({ |
|
url:'/pages/Index/index?footCheck=shop&tabCheck=item' |
|
}) |
|
}, |
|
activityMore(){ |
|
uni.redirectTo({ |
|
url:'/pages/Index/index?footCheck=activity&tabCheck=activity' |
|
}) |
|
}, |
|
projectMore(){ |
|
uni.redirectTo({ |
|
url:'/pages/Index/index?footCheck=activity&tabCheck=project' |
|
}) |
|
}, |
|
navTo(url,token = false) { |
|
if(token){ |
|
if(uni.getStorageSync('token')){ |
|
wx.navigateTo({ |
|
url: url |
|
}) |
|
}else{ |
|
wx.navigateTo({ |
|
url: '/pages/Login/index' |
|
}) |
|
} |
|
}else{ |
|
wx.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 |
|
} |
|
if (this.userExtends) { |
|
this.user.coupons = this.userExtends.coupon_count |
|
} |
|
}, |
|
getBanner(){ |
|
return banner({}).then(res => { |
|
this.indexBanner = res.data.banner; |
|
}) |
|
}, |
|
getGoods(){ |
|
return indexGoods({ |
|
page:1, |
|
limit:4 |
|
}).then(res => { |
|
this.goodsList = res.data; |
|
}) |
|
}, |
|
getWebConfig(){ |
|
webConfig({ |
|
type:'about_us_title' |
|
}).then(res => { |
|
this.aboutUsDesc = res.data.about_us_title; |
|
}); |
|
webConfig({ |
|
type:'tip' |
|
}).then(res => { |
|
this.tips = res.data.tip; |
|
}); |
|
systemConfig({ |
|
type:'action' |
|
}).then(res => { |
|
this.activity = [ |
|
{ |
|
title:res.data.title, |
|
image:res.data.image, |
|
}, |
|
{ |
|
title:res.data.title3, |
|
image:res.data.image3, |
|
}, |
|
]; |
|
this.project = [ |
|
{ |
|
title:res.data.title2, |
|
image:res.data.image2, |
|
}, |
|
{ |
|
title:res.data.title4, |
|
image:res.data.image4, |
|
}, |
|
]; |
|
}); |
|
return newInfo({}).then(res => { |
|
this.newsLists = res.data.title_list; |
|
}) |
|
}, |
|
openNotDone(){ |
|
this.modalContent = '暂未开启,敬请期待'; |
|
this.$refs.notDone.open('center'); |
|
}, |
|
}, |
|
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() { |
|
this.getBanner(); |
|
this.getGoods(); |
|
this.getWebConfig(); |
|
}, |
|
updated() { |
|
|
|
}, |
|
watch: { |
|
"$store.state.userInfo": { |
|
handler(newVal, oldVal) { |
|
this.userInfo = newVal; |
|
this.updateUserInfo(); |
|
} |
|
}, |
|
"$store.state.userExtends": { |
|
handler(newVal, oldVal) { |
|
this.userExtends = newVal; |
|
this.updateUserInfo(); |
|
} |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
@import './components/index.scss'; |
|
</style> |