xnzt/xnzt-h5/pages/index/tradeList/index.vue

345 lines
7.0 KiB
Vue
Raw Normal View History

2024-11-11 10:27:27 +08:00
<template>
<!-- 我要买卖 -->
<view class="container">
<view class="banner">
<image src="@/static/images/index/b4.png" mode="aspectFill"></image>
</view>
<view class="bottom">
<view class="titles u-flex u-col-center u-row-between">
<view class="i" :class="{on:type==1}" @click="changeType(1)">
求购信息
</view>
<!-- <view class="i" :class="{on:type==2}" @click="changeType(2)">
我要卖
</view> -->
<view class="i" @click="$pageTo('/pages/index/tradeList/sellList?type=1')">
我要买
</view>
<view class="i" @click="$pageTo('/pages/index/tradeList/sellList?type=0')">
我要卖
</view>
</view>
<view class="screens u-flex u-col-center u-row-between">
<view class="i">
<picker :value="address" :range="list2" @change="addrChange" @cancel="addrCancel">
<view class="picker u-flex u-col-center u-row-center">
<text v-if="address">{{address}}</text>
<text v-else>全国</text>
<image src="@/static/images/index/xia.png" mode="aspectFill"></image>
</view>
</picker>
</view>
<view class="i">
<picker :value="goodsType" :range="list1" range-key='name' @change="typeChange" @cancel="classCancel">
<view class="picker u-flex u-col-center u-row-center">
<text v-if="goodsType">{{list1[goodsType-1].name}}</text>
<text v-else>请选择</text>
<image src="@/static/images/index/xia.png" mode="aspectFill"></image>
</view>
</picker>
</view>
</view>
<view class="list">
<view class="item u-flex u-col-top u-row-center" v-for="(item,index) in list" :key="index"
@click="$pageTo('/pages/index/tradeList/sellDetail?id='+item.id +'&type=1&add=true')">
<view class="l">
<view class="title u-l-1">
{{item.goodsName}}
</view>
<view class="name">
{{item.typeName}}
</view>
</view>
<view class="r">
销售数量{{item.quantity}}{{item.measureUnit}}
</view>
</view>
<view class="nolist" v-if="nolist">
暂无信息
</view>
</view>
</view>
<view class="right right2" @click="$pageTo('/pages/index/tradeList/sell?type=1')">
<uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
<text>我要买</text>
</view>
<view class="right" @click="$pageTo('/pages/index/tradeList/sell?type=0')">
<uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
<text>我要卖</text>
</view>
</view>
</template>
<script>
import {commodityCategory,addSales} from '@/api/home.js'
import {
listSalesDemandLish
} from "@/api/lef/demandPublish.js";
import {demandList} from '@/api/home.js'
export default {
data() {
return {
nolist: '',
goodsType: "",
address: "",
addressIndex: -1,
classname: "",
classIndex: -1,
type: 1,
list: [],
list1: [],
list2: ['宜都市', '枝江市', '当阳市', '远安县', '兴山县', '秭归县', '长阳土家族自治县', '五峰土家族自治县', '夷陵区', '西陵区', '伍家岗区', '点军区',
'猇亭区', '其他'
],
}
},
onLoad() {
this.getData()
this.getList()
},
onReachBottom() {
if (this.page < this.total) {
this.page++
this.getList()
} else {
uni.showToast({
title: '没有了',
icon: "none",
duration: 1500
});
}
},
methods: {
gotoDetail(id) {
uni.navigateTo({
url: `/pages/index/needList/needDetails?id=${id}&type=${this.type}`
})
},
getList(callback) {
console.log('this.address', this.address, this.page)
addSales({
goodsType: this.goodsType,
address: this.address,
pageSize: 10000,
page: this.page
}).then((res) => {
if (res.code == 200) {
if (this.page == 1) {
this.list = [];
}
this.list = this.list.concat(res.rows)
if (res.rows.length < this.pageSize) {
// this.showNoData = true;
}
} else {
uni.showToast({
title: res.msg,
icon: "none",
duration: 1500
});
}
}).finally(() => {
callback && callback();
});
},
typeChange(e) {
let index = e.detail.value
this.goodsType = this.list1[index].id
this.page = 1
this.list = []
this.getList()
},
addrChange(e) {
let index = e.detail.value
this.address = this.list2[index]
this.page = 1
this.list = []
this.getList()
},
getData() {
commodityCategory().then(res => {
if (res.code == 200) {
this.list1 = res.data
} else {
uni.showToast({
title: res.msg,
icon: "none",
duration: 1500
});
}
})
},
addrCancel() {
this.address = ''
this.page = 1
this.list = []
this.getList()
},
classCancel() {
this.goodsType = ''
this.page = 1
this.list = []
this.getList()
},
}
}
</script>
<style lang="scss" scoped>
$color: #4892FD;
.right {
position: fixed;
bottom: 100rpx;
right: 30rpx;
width: 110rpx;
height: 110rpx;
border-radius: 50%;
background-color: $color;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
text-align: center;
justify-content: center;
text {
color: #fff;
font-size: 24rpx;
}
}
.right2 {
bottom: 220rpx;
background-color: #ffba00;
}
.container {
.banner {
width: 100%;
height: 320rpx;
margin-bottom: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.bottom {
padding: 30rpx;
background-color: #fff;
width: 100%;
.screens {
height: 80rpx;
line-height: 80rpx;
.i {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
.picker {
text {
color: #666;
font-size: 24rpx;
margin-right: 10rpx;
}
image {
width: 32rpx;
height: 32rpx;
}
}
}
}
.titles {
border-bottom: 2rpx solid #eee;
.i {
flex: 1;
text-align: center;
font-size: 28rpx;
color: #666;
position: relative;
height: 80rpx;
line-height: 80rpx;
}
.on {
font-size: 32rpx;
color: #333;
&::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
margin-left: -30rpx;
width: 60rpx;
height: 10rpx;
border-radius: 5rpx;
background-color: $color;
}
}
}
}
.list {
width: 100%;
.item {
border-bottom: 2rpx solid #eee;
padding: 25rpx 0;
&:last-child {
border-bottom: 0;
}
.l {
flex: 1;
width: 1rpx;
margin-right: 20rpx;
.title {
font-size: 32rpx;
font-weight: bold;
color: #333333;
line-height: 50rpx;
height: 50rpx;
}
.name {
margin-top: 20rpx;
font-size: 26rpx;
font-weight: 500;
color: #777777;
line-height: 40rpx;
height: 40rpx;
}
}
.r {
font-size: 26rpx;
font-weight: 500;
color: #0D0D0D;
line-height: 80rpx;
height: 80rpx;
}
}
}
}
</style>