<template>
<view>
<view class="content-header">
<view class="header">
<view class="top-header">
<view class="search">
<view class="search-content acea-row row-middle">
<text class="iconfont icon-sousuo"></text>
<input v-model="where.keyword" confirm-type="search" placeholder="请输入关键字" class="input" />
<view class="search_btn">
<image src="@/static/images/serchbtn.png" mode="aspectFit" @click="handleSearch">
</image>
</view>
</view>
</view>
</view>
<view class="recom">
<view class="recom_bnt">
<rudon-rowMenuDotDotDot :localdata="options" @change="menuAction($event)"
style="color: #000000;">
<view class="" style="color: #F84221;">
{{this.recomname}}
</view>
<view class="recom_sym">
<image src='@/static/images/arrow-bottom.png' mode="aspectFit"></image>
</view>
</rudon-rowMenuDotDotDot>
</view>
</view>
</view>
<view class="type_switch">
<view class="recom_mend" v-for="(item,i) in options" :key="i" :class="i==num?'tradcolor':''"
@click="btntap(i)">
{{item.text}}
<view :class="i==num?'tradline':''"></view>
</view>
</view>
</view>
<view class="list">
<view class="item" v-for='(item,index) in datatlist' :key='index' @click="shopping(item)">
<image class="shopimg" :src="item.image[0]" mode="aspectFit"></image>
<view class="item_text">
<span v-if='item.resale_type==1'>调货</span>
<span v-else>打折</span>
{{item.title}}
</view>
<view class="item_prices">
<span>￥</span>{{item.total_price}}
</view>
<view class="item_name">
<image class="avater" :src="item.mer_avatar" mode="aspectFit"></image>
<view class="item_name_text">
{{item.mer_name}}
</view>
</view>
</view>
</view>
<view class="tardimg_add" @click="open">
<!-- <img src="@/static/images/trad-add.png" mode="widthFix" alt=""> -->
<image src="@/static/images/trad-add.png" mode="aspectFit"></image>
</view>
<release :isShow='visible' :bottom='true' @close="closeMadle" @cancel="cancel" @confirm="confirm"
style="z-index: 999999!important;"></release>
<view class="empty_wrapper" v-if="emptyShow">
<u-empty :show="emptyShow" mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
</view>
<u-loadmore :status="status" v-if="datatlist.length>0"/>
</view>
</template>
<script>
import {
getCommunityList,
getCommunitygetOrderList
} from '@/api/trading-floor.js'
import {
data,
methods
} from '../../../uni_modules/uview-ui/libs/mixin/mixin'
import release from '@/components/release/release.vue';
import emptyPage from '@/components/emptyPage.vue';
export default {
components: {
release,
emptyPage
},
data() {
return {
status: 'loadmore',
where: {
page: 1,
limit: 10,
is_type: 3,
keyword: '',
},
visible: false,
num: 0,
options: [{
value: '0',
text: '推荐'
},
{
value: '1',
text: '调货'
},
{
value: '2',
text: '打折专区'
}
],
datatlist: [],
recomname: '',
emptyShow: false,
}
},
onLoad() {
this.getlist()
},
onReachBottom() {
if (this.status == 'nomore') return;
this.status = 'loading';
this.where.page = ++this.where.page;
this.getlist(this.num)
},
methods: {
//选择 打折 调货
btntap(index) {
this.num = index
this.getlist()
},
//商品详情
shopping(item) {
let data = {
type: item.resale_type,
id: item.community_id
}
uni.navigateTo({
url: '/pages/trading_hall/product_details/index?key=' + encodeURIComponent(JSON.stringify(
data))
})
},
//控制 发布弹窗
open() {
this.visible = true
},
//查询
handleSearch() {
if (this.num == 0) {
this.where.resale_type = ''
} else if (this.num == 1) {
this.where.resale_type = 1
} else {
this.where.resale_type = 2
}
getCommunityList(this.where).then(res => {
if (res.status == 200) {
this.datatlist.push(...res.data.list)
if (res.data.list.length < this.where.limit) this.status = 'nomore'
if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
}
})
},
//列表
getlist(index) {
if (this.num == 0) {
this.where.resale_type = ''
this.datatlist=[]
} else if (this.num == 1) {
this.where.resale_type = 1
this.datatlist=[]
} else {
this.where.resale_type = 2
this.datatlist=[]
}
getCommunityList(this.where).then(res => {
if (res.status == 200) {
this.datatlist.push(...res.data.list)
if (res.data.list.length < this.where.limit) this.status = 'nomore'
if (this.where.page == 1 && res.data.list.length <= 0) this.emptyShow = true
}
})
},
closeMadle() {
this.visible = false
},
confirm() {
// 这里调用接口执行点击确定后的操作并关闭弹窗
console.log('点击了确认按钮')
this.visible = false
},
cancel() {
// 点击了取消按钮直接关闭弹窗
console.log('点击了取消按钮')
this.visible = false
},
menuAction(action, rowId) {
// console.log(action);
// 忽略初始化时的传入的空操作
this.num = action
this.getlist(action)
if (action === '') {
this.recomname = this.options[0].text
} else {
this.recomname = this.options[action].text
}
},
}
}
</script>
<style lang="scss" scoped>
.content-header {
position: absolute;
position: fixed;
top: 0;
z-index: 8888;
}
.header {
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
background-color: #fff;
.top-header {
width: 80%;
.search {
padding: 17rpx 30rpx;
.search-content {
width: 100%;
height: 60rpx;
padding-left: 30rpx;
border-radius: 30rpx;
background-color: #F5F5F5;
font-size: 26rpx;
}
.iconfont {
margin-right: 10rpx;
font-size: 26rpx;
color: #999999;
}
.input-placeholder {
font-size: 26rpx;
color: #999999;
}
.input {
flex: 1;
}
.search_btn {
width: 98rpx;
height: 60rpx;
margin-left: 20rpx;
image {
width: 100%;
height: 100%;
}
}
}
}
.recom {
width: 200rpx;
margin-right: 39rpx;
height: 60rpx;
text-align: center;
border-radius: 30px;
border: 1px solid #F84221;
display: flex;
justify-content: center;
align-items: center;
.recom_bnt {
font-size: 32rpx;
font-family: 'PingFang SC';
font-weight: 400;
.recom_sym {
width: 28rpx;
height: 28rpx;
margin-left: 0rpx;
image {
width: 28rpx;
height: 28rpx;
margin-left: 10rpx;
}
}
}
}
}
.type_switch {
display: flex;
justify-content: space-around;
padding-top: 17rpx;
font-size: 32rpx;
background-color: #fff;
font-weight: 500;
color: #999999;
padding-bottom: 10rpx;
.tradcolor {
color: #F84221;
}
.tradline {
width: 26rpx;
height: 4rpx;
opacity: 1;
background-color: #F84221;
margin: 0 auto;
}
}
.tardimg_add {
position: absolute;
bottom: 193rpx;
right: 0rpx;
position: fixed;
width: 176rpx;
height: 176rpx;
image {
width: 100%;
width: 100%;
}
}
.list {
width: 694.74rpx;
margin: 0 auto;
display: flex;
margin-bottom: 21rpx;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
margin-top: 170rpx;
.item {
width: 336rpx;
height: 561rpx;
background-color: #fff;
margin-top: 21rpx;
border-radius: 14rpx 14rpx 0 0;
.shopimg {
width: 336rpx;
height: 314rpx
}
.item_text {
width: 100%;
padding-left: 25rpx;
padding-right: 25rpx;
margin-top: 19rpx;
margin-bottom: 20rpx;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
span {
height: 35rpx;
width: 100%;
padding: 3px;
margin: 2px;
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
border-radius: 7px 0px 7px 0px;
font-weight: 400;
color: #FFFFFF;
font-size: 25rpx;
margin-right: 15rpx;
}
}
.item_prices {
font-size: 18px;
color: #F84221;
padding-left: 15px;
padding-bottom: 18rpx;
border-bottom: 1px solid #707070;
}
.item_name {
width: 100%;
padding-left: 15rpx;
display: flex;
font-size: 28rpx;
font-family: 'PingFang SC';
font-weight: 400;
color: #333333;
.avater {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
margin-top: 19rpx;
margin-right: 10rpx;
image {
width: 100%;
height: 100%;
display: block;
}
}
.item_name_text {
margin-top: 30rpx;
}
}
}
}
</style>