theluyuan/deming
2
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

gdpaoup

Browse Source
This commit is contained in:
Gdpao
2020-08-05 21:06:29 +08:00
parent a47238a7a4
commit c4c11781fb
15 changed files with 305 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
pageB/components/details/userinfo.vue
View File

@@ -1,27 +1,29 @@
<template>
<view class="userinfo">
<view class="user">
<view class="info">
<image></image>
<view>
<text>达人昵称</text>
<text>关注数量</text>
<view class="avatar">
<image :src="item.member_avatar"></image>
</view>
<view class="box">
<view class="name">{{ item.member_nickname }}</view>
<view class="num">
<text>粉丝数：{{ item.fans_num }}</text>
<text>评论数：{{ item.comment_num }}</text>
</view>
</view>
</view>
<view class="guanzhu">关注</view>
<view class="btn" :class="[ is_follow ? 'btn-follow' : 'btn-unfollow' ]" @click="following">{{ is_follow ? "已关注" : "关注" }}</view>
</view>
<view class="profile">个性签名</view>
<view class="profile" :class="{'u-line-2': is_open }" @click="openPro">
个性签名：{{ item.recommend ? item.recommend : "对方很懒没有留下任何东西~~" }}
</view>
</view>
</template>
<style lang="scss" scoped>
image{
background-color: #0f0;
}
.userinfo{
height: 261rpx;
width: 100%;
// height: 261rpx;
padding: 30rpx;
.user{
display: flex;
@@ -31,53 +33,92 @@ image{
.info{
display: flex;
align-items: center;
>image{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
.avatar {
&>image{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
}
}
>view{
margin-left: 40rpx;
.box {
display: flex;
height: 79rpx;
justify-content: space-between;
flex-direction: column;
>text:first-child{
height: 79rpx;
margin-left: 40rpx;
color: #333;
.name {
font-size: 28rpx;
color:#333;
}
>text:last-child{
.num {
font-size: 24rpx;
color: #333;
& > :first-child {
margin-right: 20rpx;
}
}
}
}
.guanzhu{
.btn{
width: 140rpx;
height: 60rpx;
font-size: 26rpx;
color:#fff;
line-height: 60rpx;
border-radius: 30rpx;
background-color: #FF780F;
text-align: center;
color:#fff;
border-radius: 30rpx;
}
.btn-follow {
background-color: #007AFF;
}
.btn-unfollow {
background-color: #FF780F;
}
}
.profile{
margin-top: 19rpx;
margin-top: 20rpx;
font-size: 24rpx;
color: #333;
margin-left: 14rpx;
line-height: 1.2;
}
}
</style>
<script>
export default {
name:"userinfo",
props: ["list"],
data(){
return {
item: {},
is_open: true,
is_follow: false,
}
},
watch: {
list(newVal, old) {
// console.log(newVal);
this.item = newVal;
this.is_follow = newVal.is_attention;
},
deep: true
},
methods: {
// 打开个性
openPro() {
this.is_open = !this.is_open;
},
// 关注
following() {
this.$u.api.attentionMember({
member_id: this.item.member_id
}).then(res => {
console.log(res);
if (res.errCode == 0) {
this.is_follow = !this.is_follow;
this.$u.toast(res.message);
} else {
this.$u.toast(res.message);
}
})
}
}
}

108
pageB/details/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<view class="details">
<view style="border-top: 1rpx solid #ececec;"></view>
<userinfo></userinfo>
<userinfo :list="userInfo"></userinfo>
<view style="border-top: 20rpx solid #ececec;"></view>
<u-tabs :is-scroll="false" bar-width="70" ref="tabs" :list="list" :current="num" :bar-style="{
'background-color':'#FF780F',
@@ -13,39 +13,15 @@
}"
:bold="false"
@change="dianji"
:show-bar="false"></u-tabs>
<swiper class="card" @change="dianji" :current="num">
<swiper-item>
<scroll-view style="width:100%;height:100%" scroll-y="true">
<view class="box">
<view class="list">
<view >
<videoItem v-for="item in 10" :key="index"></videoItem>
</view>
<view style="margin-left:20rpx">
<videoItem v-for="item in 10" :key="index"></videoItem>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<swiper-item>
<scroll-view style="width:100%;height:100%" scroll-y="true">
<view class="box">
<view class="list">
<view >
<zhiboItem v-for="item in 10" :key="index"></zhiboItem>
</view>
<view style="margin-left:20rpx">
<zhiboItem v-for="item in 10" :key="index"></zhiboItem>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
:show-bar="false">
</u-tabs>
<scroll-view class="scroll-box" scroll-y="true">
<view class="box">
<videoItem v-for="item in listInfo" :key="item.article_id" :item="item"
@getArticlelist="getArticlelist"></videoItem>
<view class="no-data" v-show="!listInfo && !page">暂无数据</view>
</view>
</scroll-view>
</view>
</template>
<style lang="scss" scoped>
@@ -61,39 +37,85 @@
display: flex;
}
}
.scroll-box {
// display: flex;
padding: 20rpx;
box-sizing: border-box;
.box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.no-data {
margin: 100rpx auto 0;
}
}
}
}
</style>
<script>
import videoItem from "@/components/index/video-item/index"
import zhiboItem from "@/components/index/zhibo-item/index"
import userinfo from "../components/details/userinfo"
import videoItem from "@/components/index/video-item/index"
export default {
name:"details",
// name:"details",
components:{
userinfo,
videoItem,
zhiboItem
videoItem
},
data(){
return {
list:[
{
name: '短视频'
}, {
name: '图文'
}, {
name: '短视频'
}
],
num:0
num: 0,
userInfo: {}, // 用户信息
listInfo: [], // 列表详情
member_id: 0,
page: 0,
}
},
onLoad(option) {
// console.log(option);
this.member_id = option.id;
this.getUserInfo(option.id);
this.getArticlelist();
},
methods:{
// 获取信息
getUserInfo(id) {
this.$u.post("MemberExpert/expertInfo",{member_id: id}).then(res => {
// console.log(res);
this.userInfo = res.data.info;
// console.log(this.userInfo);
})
},
// 获取列表
getArticlelist() {
this.$u.api.getArticlelist({
page: this.page,
is_video_img: this.num + 1,
member_id: this.member_id,
}).then(res => {
if (res.errCode == 0) {
// console.log(res);
this.listInfo = res.data.list;
console.log(this.listInfo);
} else {
console.log(res.message);
}
})
},
dianji(a){
console.log(a)
console.log(a);
if(typeof a == "object"){
this.num = a.detail.current
}else{
this.num = a
}
this.getArticlelist();
}
}
}

9
pageB/photo/index.vue
View File

@@ -14,7 +14,7 @@
<text>图片</text>
<view v-for="(item,index) in list.photo" :key="index" :style="{'background-color':index == swiper_id ? '#fff' : '#ede8e8'}"></view>
</view>
<view class="username">{{ list.member_nickname }}</view>
<view class="username">@{{ list.member_nickname }}</view>
<view class="title">{{ list.article_title }}</view>
<view class="info">{{ list.article_content }}</view>
<view class="box">
@@ -29,7 +29,7 @@
<text>评论</text>
<u-icon name="arrow-down" color="#333" size="28" @click="is_comment=false"></u-icon>
</view>
<scroll-view class="scroll-box" scroll-y="true" >
<scroll-view class="scroll-box" scroll-y="true" @scrolltolower="scrollBottom">
<block v-for="(item,index) in commentList" :key="index" v-if="commentList.length">
<view class="box">
<image :src="item.member_avatar" mode="aspectFill"></image>
@@ -373,6 +373,7 @@ export default {
return {
list:{},
swiper_id: "",
page: 1, //
cart_type: false, // 显示购物车
is_comment: false, // 显示评论
is_focus: false, // 聚焦
@@ -489,6 +490,10 @@ export default {
current: e.currentTarget.dataset.url,
})
},
// 评论滚动到底部
scrollBottom(e) {
console.log(e);
},
// 跳转到商品
gotoInfo(id) {
console.log(id);