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.
 
 
 
 
mianxueyoupin/pages/youquan.vue

330 lines
7.4 KiB

<template>
<view class="wanl-list youquan">
<!-- 导航条 -->
<view class="cu-custom" :style="{height:height + 'px' }">
<view class="cu-bar bg-bgcolor fixed" :style="{ height: height + 'px', paddingTop: top + 'px'}">
<!-- 1.1.9 升级 其他页面进入 -->
<view v-if="pagesNum > 1" class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
<!-- 直接进入 -->
<view v-else class="action" @tap="$wanlshop.on('/pages/index')"><text class="wlIcon-zhuye"></text></view>
<view class="search-form round" @tap="search()">
<text class="wlIcon-sousuo1 text-bold"></text>
<!-- <view class="searchinfo cu-tag round" v-if="category">
<text>类目:{{ category }}</text>
<text class="wlIcon-shanchu2"></text>
</view>
<view class="searchinfo cu-tag round text-df" v-else-if="params.search">
<text>{{ params.search }}</text>
<text class="wlIcon-shanchu2"></text>
</view> -->
<view>搜索商品</view>
</view>
<view class="action">
<image src="../static/images/img/fabu.png" mode="" @tap="$wanlshop.on('/pages/apps/find/user/add')"></image>
<image src="../static/images/img/user.png" style="margin-left:34rpx;" mode="" @tap="$wanlshop.on('/pages/apps/find/user')"></image>
</view>
</view>
</view>
<view class="conentContainer">
<image src="../static/images/img/youquan.png" mode="aspectFill" class="topPic"></image>
<view class="list" v-for="(item,index) in dataList" :key="index" @click="goDetails(item)">
<view class="title">
<view class="left">
<image src="../static/images/img/u1.png" mode=""></image>
<view class="name">
<text>{{item.user&&item.user.nickname}}</text>
<text class="time">{{item.createtime_text}}</text>
</view>
</view>
<view class="right" v-if="item.isFollow==1" @click.stop="followHandle(item)">
<image src="../static/images/img/dui.png" mode=""></image>
<text>已关注</text>
</view>
<view class="rightactive" v-else @click.stop="followHandle(item)">
<image src="../static/images/img/jia.png" mode=""></image>
<text>关注</text>
</view>
</view>
<view class="topic">
<u-parse :content="item.content"></u-parse>
</view>
<view class="pic">
<image :src="common.uploaddata.cdnurl+item.images[0]" mode="aspectFill"></image>
</view>
<view class="toolBox">
<view class="toolItem">
<image src="../static/images/img/fenx.png" mode="widthFix"></image>
<text>{{item.shares}}</text>
</view>
<view class="toolItem">
<image src="../static/images/img/xiaoxi.png" mode="widthFix"></image>
<text>{{item.comments}}</text>
</view>
<view class="toolItem" @click.stop="likeHandle(item)">
<image src="../static/images/img/dianzan.png" mode="widthFix" v-if="item.isLike==0"></image>
<image src="../static/images/img/dianzan1.png" mode="widthFix" v-if="item.isLike==1"></image>
<text>{{item.likes}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import {
mapState
} from 'vuex';
export default {
computed: {
...mapState(['common'])
},
data() {
return {
pagesNum:0,
pageIndex: 1,
height:0,
top:0,
total:0,
dataList:[]
};
},
onLoad(option) {
this.pagesNum = getCurrentPages().length; // 1.1.9 升级
console.log(this.$wanlshop.wanlsys())
this.height = this.$wanlshop.wanlsys().height
this.top = this.$wanlshop.wanlsys().top
},
methods: {
goDetails(item){
uni.navigateTo({
url:"/pages/youquanDetails?id="+item.id
})
},
// 点赞
likeHandle(item){
uni.request({
url: '/wanlshop/find/user/setFindUser',
method:"POST",
data:{
"id":item.id,
"type":"likes"
},
success: res => {
this.getList()
}
})
},
// 关注
followHandle(item){
uni.request({
url: '/wanlshop/find/user/setFindUser',
method:"POST",
data:{
"id":item.user_no,
"type":"follow"
},
success: res => {
this.getList()
}
})
},
// 获取列表
getList(){
uni.request({
url: '/wanlshop/find/find/getmingList',
data:{
current_page:this.pageIndex,
per_page:15,
},
success: res => {
this.dataList = res.data.data;
this.total = res.data.total
}
})
},
search() {
this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`,'fade-in',100);
},
},
onShow(){
this.getList()
},
onReachBottom(){
console.log('触底了!')
if(this.dataList.length<this.total){
this.pageIndex++;
uni.request({
url: '/wanlshop/find/find/getmingList',
data:{
current_page:this.pageIndex,
per_page:15,
},
success: res => {
this.dataList=this.dataList.concat(res.data.data)
}
})
}
}
};
</script>
<style>
page{
overflow: auto !important;
}
</style>
<style scoped lang="scss">
.youquan{
background-color: #F2F3F4;
min-height: calc(100vh);
overflow: auto;
.action{
&>image{
width: 44rpx;
height: 44rpx;
}
}
.conentContainer{
.topPic{
width:100%;
height:330rpx;
}
.list{
background: #fff;
margin: 20rpx 24rpx;
border-radius: 20rpx;
padding: 30rpx;
.title{
display: flex;
justify-content: space-between;
align-items: center;
.left{
display: flex;
align-items: center;
&>image{
width: 70rpx;
height: 70rpx;
border-radius: 50%;
}
.name{
margin-left:16rpx;
display: flex;
flex-direction: column;
text{
font-family: PingFang SC;
font-weight: 500;
font-size: 30rpx;
color: #333333;
}
.time{
margin-top:15rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 22rpx;
color: #666666;
}
}
}
.right{
padding:14rpx;
background: #E8E8E8;
border-radius: 25px;
display: flex;
align-items: center;
&>image{
width:19rpx;
height:13rpx;
}
&>text{
margin-left:7rpx;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 22rpx;
color: #333333;
}
}
.rightactive{
display: flex;
align-items: center;
padding:14rpx;
background: #EB6100;
border-radius: 25px;
&>image{
width:18rpx;
height:18rpx;
}
&>text{
margin-left:7rpx;
font-family: Source Han Sans SC;
font-weight: 400;
font-size: 22rpx;
color: #FFFFFF;
}
}
}
.topic{
font-family: PingFang SC;
font-weight: 500;
font-size: 26rpx;
color: #333333;
margin-top:27rpx;
}
.pic{
width:100%;
height: 330rpx;
background: #999999;
border-radius: 20rpx;
border: 1px solid #EAEAEA;
overflow: hidden;
margin-top:20rpx;
&>image{
width:100%;
height:100%;
}
}
.toolBox{
display: flex;
justify-content: space-between;
margin-top:20rpx;
padding: 0 20rpx;
.toolItem{
display: flex;
align-items: center;
&>image{
width: 28rpx;
height:auto;
}
&>text{
margin-left:13rpx;
font-family: PingFang SC;
font-weight: 500;
font-size: 26rpx;
color: #222222;
}
}
}
}
}
}
.cu-custom .search-form{
border: 3rpx solid #fe6600;
background-color: #fff;
}
.cu-tag:not([class*="bg"]):not([class*="line"]){
background-color: #f7f7f7;
}
</style>