460 lines
8.8 KiB
Vue
460 lines
8.8 KiB
Vue
<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> |