first commit
This commit is contained in:
PC-202306242200\Administrator
211
pages/index/index.vue
Normal file
211
pages/index/index.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :fixed="false" title="首页" leftIcon=" " :autoBack="false"></u-navbar>
|
||||
<view class="p-30">
|
||||
<u-swiper
|
||||
:list="banner"
|
||||
@click="bannerChange"
|
||||
keyName="cover"
|
||||
height="300rpx"
|
||||
:autoplay="false"
|
||||
radius="5"
|
||||
bgColor="#ffffff"
|
||||
indicator
|
||||
indicatorMode="line"
|
||||
circular
|
||||
></u-swiper>
|
||||
</view>
|
||||
<view class="home_tab">
|
||||
<navigator :url="item.url" class="home_tab_view" v-for="(item, index) in tab_list" :key="index">
|
||||
<image :src="item.img" class="shadow_img"></image>
|
||||
<view>{{ item.name }}</view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
<view class="home_notice">
|
||||
<view class="home_notice_title">
|
||||
<view>系统公告</view>
|
||||
<view style="font-size: 28rpx; display: flex; align-items: center" @click="changeTab">
|
||||
更多
|
||||
<u-icon name="arrow-right" color="#333" size="14"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<navigator :url="`/pages/article/detail?id=${item.id}`" class="home_notice_view" v-for="(item, index) in articleItems" :key="index" v-if="index <= 2">
|
||||
<view>{{ item.title }}</view>
|
||||
</navigator>
|
||||
</view>
|
||||
|
||||
<view style="height: 20rpx"></view>
|
||||
<view class="u-flex u-flex-x-center">
|
||||
<u--image :showLoading="true" src="/static/img/goods_hot_icon.png" width="308rpx" height="44rpx"></u--image>
|
||||
</view>
|
||||
<view style="height: 20rpx"></view>
|
||||
<view class="u-flex u-flex-wrap u-flex-between p-30">
|
||||
<navigator
|
||||
v-for="(item, index) in goodsItems"
|
||||
:key="index"
|
||||
:url="`/pages/goods/detail?id=${item.id}`"
|
||||
style="background-color: #ffffff; width: 335rpx; margin-bottom: 30rpx; border-radius: 10rpx"
|
||||
>
|
||||
<u--image width="335rpx" height="335rpx" :src="item.cover[0]" radius="6rpx"></u--image>
|
||||
<u-line></u-line>
|
||||
<view style="padding: 20rpx">
|
||||
<view style="color: #232323; font-size: 28rpx">{{ item.name }}</view>
|
||||
<view style="height: 10rpx"></view>
|
||||
<view class="u-flex u-flex-between u-flex-y-center">
|
||||
<view style="color: #ff1a1a; font-size: 28rpx">￥{{ item.current_price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
banner: [],
|
||||
tab_list: [
|
||||
{
|
||||
img: '/static/home/tab2.png',
|
||||
name: '资产包',
|
||||
url: '/pages/resourceBundle/resourceBundle'
|
||||
},
|
||||
{
|
||||
img: '/static/home/tab4.png',
|
||||
name: '账单',
|
||||
url: '/pages/wallet/list'
|
||||
},
|
||||
{
|
||||
img: '/static/home/tab3.png',
|
||||
name: '团队',
|
||||
url: '/pages/team/index'
|
||||
},
|
||||
// {
|
||||
// img: '/static/home/tab1.png',
|
||||
// name: '活动',
|
||||
// url: '/pages/activity/index'
|
||||
// }
|
||||
],
|
||||
articleItems: [],
|
||||
goodsItems: []
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.getAds();
|
||||
this.aryicleList();
|
||||
this.getGoodsItems()
|
||||
},
|
||||
methods: {
|
||||
getGoodsItems() {
|
||||
this.$http.get('/shop/v10/goods/items').then(({ data }) => {
|
||||
this.goodsItems = data;
|
||||
});
|
||||
},
|
||||
bannerChange(e) {
|
||||
if (!this.banner[e].path) {
|
||||
return;
|
||||
}
|
||||
uni.navigateTo({ url: this.banner[e].path });
|
||||
},
|
||||
getAds() {
|
||||
this.$http.get('/shop/v10/ads/items').then(({ data }) => {
|
||||
this.banner = data;
|
||||
});
|
||||
},
|
||||
// 公告
|
||||
aryicleList() {
|
||||
this.$http
|
||||
.get('/shop/v10/article/items', {
|
||||
page: 1,
|
||||
cid: 1
|
||||
})
|
||||
.then(({ data, success }) => {
|
||||
if (success) {
|
||||
this.articleItems = data.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
changeTab(){
|
||||
uni.switchTab({
|
||||
url:'/pages/article/index'
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.grid_flex {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.home_tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30rpx 80rpx;
|
||||
|
||||
&_view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 28rpx;
|
||||
letter-spacing: 10rpx;
|
||||
text-indent: 10rpx;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
view {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home_notice {
|
||||
background-color: #fff;
|
||||
border-radius: 25rpx;
|
||||
padding: 30rpx 40rpx;
|
||||
margin: 0 30rpx 15rpx;
|
||||
|
||||
&_title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1d65aa;
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&_view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
padding-bottom: 20rpx;
|
||||
padding-top: 20rpx;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
view {
|
||||
max-width: 600rpx;
|
||||
white-space: nowrap;
|
||||
/*超出的空白区域不换行*/
|
||||
overflow: hidden;
|
||||
/*超出隐藏*/
|
||||
text-overflow: ellipsis;
|
||||
/*文本超出显示省略号*/
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user