|
|
@ -3,34 +3,46 @@ |
|
|
<view> |
|
|
<view> |
|
|
<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" :duration="duration" :indicator-dots="indicatorDots"> |
|
|
<swiper class="swiper-box" :autoplay="autoplay" :interval="interval" :duration="duration" :indicator-dots="indicatorDots"> |
|
|
<swiper-item v-for="(item, index) in banner" :key="index"> |
|
|
<swiper-item v-for="(item, index) in banner" :key="index"> |
|
|
<cover-image class="img" @click="linkTo(item)" :src="item.bannerImg"></cover-image> |
|
|
<image class="img" @click="linkTo(item)" :src="item.bannerImg"></image> |
|
|
</swiper-item> |
|
|
</swiper-item> |
|
|
</swiper> |
|
|
</swiper> |
|
|
</view> |
|
|
</view> |
|
|
|
|
|
|
|
|
<view> |
|
|
<view> |
|
|
<uni-list v-for="(item, index) in user" :key="index"> |
|
|
<uni-list v-for="(item, index) in userImgList" :key="index"> |
|
|
<uni-list-item v-bind:title="item" clickable @click="getUser(item)"></uni-list-item> |
|
|
<!-- 展示用户相关信息 --> |
|
|
|
|
|
<template> |
|
|
|
|
|
<image class="head" :src="item.img"></image> |
|
|
|
|
|
<view class="userName">{{item.username}}</view> |
|
|
|
|
|
</template> |
|
|
|
|
|
<!-- 展示用户对应三张图 --> |
|
|
|
|
|
<template> |
|
|
|
|
|
<view v-for="(pic,param) in item.imgList" :key="param"> |
|
|
|
|
|
<image class="threeImg" @click="linkTo(item)" :src="pic.imgUrl"></image> |
|
|
|
|
|
</view> |
|
|
|
|
|
</template> |
|
|
</uni-list> |
|
|
</uni-list> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</view> |
|
|
</template> |
|
|
</template> |
|
|
|
|
|
|
|
|
<script> |
|
|
<script> |
|
|
import {getBannerList} from '@/api/creator.js' |
|
|
import {getBannerList,getUserImgList} from '@/api/creator.js' |
|
|
export default { |
|
|
export default { |
|
|
data() { |
|
|
data() { |
|
|
return { |
|
|
return { |
|
|
banner: [], |
|
|
banner: [], |
|
|
|
|
|
userImgList:[], |
|
|
autoplay: true, |
|
|
autoplay: true, |
|
|
interval: 2000, |
|
|
interval: 2000, |
|
|
duration: 500, |
|
|
duration: 1000, |
|
|
indicatorDots: true, |
|
|
indicatorDots: true, |
|
|
user:['Kim','Jim','Bob'] |
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
onLoad() { |
|
|
onLoad() { |
|
|
this.getBanner(); |
|
|
this.getBanner(); |
|
|
|
|
|
this.getUserImgList(); |
|
|
}, |
|
|
}, |
|
|
methods: { |
|
|
methods: { |
|
|
linkTo(item){ |
|
|
linkTo(item){ |
|
|
@ -40,13 +52,15 @@ |
|
|
showCancel: false |
|
|
showCancel: false |
|
|
}); |
|
|
}); |
|
|
}, |
|
|
}, |
|
|
getUser(item){ |
|
|
|
|
|
|
|
|
getUserDetails(item){ |
|
|
|
|
|
//TODO 点击跳转对应用户详情页面 |
|
|
console.log(item); |
|
|
console.log(item); |
|
|
}, |
|
|
}, |
|
|
|
|
|
|
|
|
async getBanner(){ |
|
|
async getBanner(){ |
|
|
const res = await getBannerList() |
|
|
const res = await getBannerList() |
|
|
if(res.data.code === 200){ |
|
|
if(res.data.code === 200){ |
|
|
console.log('相應結果2',res); |
|
|
|
|
|
this.banner = res.data.data |
|
|
this.banner = res.data.data |
|
|
}else{ |
|
|
}else{ |
|
|
uni.showModal({ |
|
|
uni.showModal({ |
|
|
@ -54,7 +68,21 @@ |
|
|
showCancel: false |
|
|
showCancel: false |
|
|
}); |
|
|
}); |
|
|
} |
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
async getUserImgList(){ |
|
|
|
|
|
const res = await getUserImgList() |
|
|
|
|
|
if(res.data.code === 200){ |
|
|
|
|
|
this.userImgList = res.data.data |
|
|
|
|
|
console.log('userListImg',this.userImgList) |
|
|
|
|
|
}else{ |
|
|
|
|
|
uni.showModal({ |
|
|
|
|
|
content: '用户图片列表加载失败!', |
|
|
|
|
|
showCancel: false |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
@ -81,4 +109,27 @@ |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.head { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
width:80rpx; |
|
|
|
|
|
height:80rpx; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: flex-end; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.userName { |
|
|
|
|
|
flex: 1; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
margin-left: 100rpx; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
align-items: flex-end; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.threeImg { |
|
|
|
|
|
height:300rpx; |
|
|
|
|
|
width:200rpx; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
|