Client-Teapay/src/pages/account/consignment.vue

<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="Tab_con flex_r flex_ac flex_jb">
			<view class="tab_list flex_r flex_ac" :class="current == item.status ? 'active' : ''" v-for="(item,index) in TabList" :key="index" @tap="SetCurrent(item.status)">{{item.title}}</view>
		</view>
		<!-- 顶部导航-end -->
		
		<!-- 寄卖列表 -->
		<view class="con">
			<view class="goods flex_c" v-for="(item,index) in goods" :key="index" @tap="navToSpeedUp(item,index)">
				<view class="flex_r">
					<image class="goods_img" :src="item.original_img" mode=""></image>
					<view class="goods_info flex_c flex_jc">
						<view class="goods_name ellipsis">{{item.goods_name}}</view>
						<view class="period">寄卖数量：{{item.surplus_num}}套</view>
					</view>
					<view class="goods_status flex_grow flex_r flex_je" :class="item.status === 0 ? 'g_color' : item.status == 1 ? 'g_color' : item.status == 2 ? 'y_color' : 'r_color'">
						{{item.status === 0 ? '寄卖中' : item.status == 1 ? '寄卖成功' : item.status == 2 ? '寄卖失败' : '寄卖转邮递'}}
					</view>
				</view>
				<view class="goods_time">{{$day(item.start_sell_time*1000).format("YYYY-MM-DD HH:mm:ss")}}</view>
			</view>
		</view>
		<!-- 寄卖列表-end -->
		<not-goods v-if="haveGoods" textStr="暂无寄卖信息"></not-goods>
	</view>
</template>

<script>
let page = 1;
import { post } from "@/request/api.js";
import notGoods from '@/components/not-goods/index.vue'
	export default {
		components:{
			notGoods,
		},
		data() {
			return {
				current: 0,
				TabList:[
					{title:'全部',status:0},
					{title:'寄卖中',status:1},
					{title:'寄卖成功',status:2},
					{title:'寄卖失败',status:3},
				],
				goods: [],
				haveGoods: false, // 是否有商品
				selectIndex:'',
				isShow:false ,// 是否显示地址
				DefaultAddress:'' ,// 地址
				pay_way:0 // 操作-0：再次寄卖；1：收货
			};
		},
		onLoad(){
			// this.loadAddress()
		},
		onShow(options){
			page = 1;
			this.goods = []
			this.loadData()
		},
		methods:{
			tabsChange(index){
				this.current = index
			},
			loadData(){
				let that = this;
				let data = {
					type: this.current,
					page: page
				}
                post("v1/goods/consignment",data).then(res => {
                    if(res.code === 0){
                        let obj = res.data.data.data
                        if(obj.length>0){
							obj.forEach(e => {
                                that.goods.push(e)
							});
                        }else{
                            if(page == 1){
                                that.haveGoods = true
                                page = -1
                            }else{
                                page = -1
                                that.$toast('暂无更多')
                            }
                        }
                    }else{
                        if(page == 1){
                            that.haveGoods = true
                            page = -1
                        }else{
                            page = -1
                            that.$toast('暂无更多')
                        }
                    }
                })
			},
			// 修改
			SetCurrent(i){
				this.current = i;
				this.haveGoods = false;
				page = 1;
				this.goods = []
				this.loadData()
			},
			// 跳转加速
			navToSpeedUp(item,index){
				this.goto("/pages/speed-up/index",{id:item.id})
			}
		},
		onShareAppMessage() {
			let userinfo = uni.getStorageSync('userinfo');
			var path = '/pages/account/consignment';
			if (userinfo.invite) path = '/pages/account/consignment?invite=' + userinfo.invite;
		    var title = `让数字经济赋能美好生活！`;
		    return {
		        title: title,
		        path: path
		    }
		},
		//页面上拉触底事件的处理函数
		onReachBottom() {
			if (page != -1) {
				var that = this;
				setTimeout(function () {
					++page;
					that.loadData();
				}, 800);
			}
		},
		onUnload(){
			// #ifdef  H5 || APP-PLUS
			this.goto("/pages/my/index");
			// #endif
			// #ifdef  MP-WEIXIN
			// uni.switchTab({
			// 	url: "/pages/my/index"
			// });
			// #endif
		},
	}
</script>

<style lang="scss">
// 页面配置
page{background: #F4F4F4;}
// 页面配置-end

// 顶部列表
.tab_list{height: 100%;box-sizing: border-box;font-size: 30rpx;color:#808080;}
.Tab_con{width: 100%;height: 92rpx;background: #fff;padding:0 30rpx;box-sizing: border-box;}

.active{color: #1BBD89;border-bottom: 6rpx solid #1BBD89;}
// 顶部列表-end

// 寄卖列表
.goods_info{width: 300rpx;overflow: hidden;}
.period{font-size: 26rpx;color:#5D5C5C;margin-top: 24rpx;}
.goods_status{font-size: 30rpx;font-family: "SourceHanSansCN-Medium";}
.goods_time{font-size: 22rpx;color: #808080;line-height: 1;margin-top: 20rpx;}
.con{width: 100%;overflow: hidden;padding:30rpx 30rpx 0;box-sizing: border-box;}
.goods_img{width: 150rpx;height: 138.8rpx;margin-right: 36rpx;border-radius: 8rpx;}
.goods_name{width: 100%;overflow: hidden;font-size: 32rpx;color: #373636;font-family: "SourceHanSansCN-Medium";}
.goods{width: 100%;overflow: hidden;padding:24rpx 20rpx;box-sizing: border-box;background: #fff;border-radius: 12rpx;margin-bottom: 30rpx;}
// 寄卖列表-end

// 状态颜色
.g_color{color: #1BBD89 !important;}
.y_color{color: #FD9F33 !important;}
.r_color{color: #EC421A !important;}
// 状态颜色-end


// 兑换弹窗
.frist_list{width: 50%;overflow: hidden;}
.frist_text{font-size: 28rpx;color:#302F2F;}
.frist_img{width: 35rpx;height: 35rpx;margin-right: 32rpx;}
.frist_info{width: 100%;overflow: hidden;align-items: initial;}
.closePopup{width: 42rpx;height: 42rpx;position: absolute;right: 0;top: -65rpx;}
.const_info{width: 100%;overflow: hidden;padding:30rpx 50rpx;box-sizing: border-box;}
.const_con{width: 689rpx;border-radius: 10rpx;background: #fff;position: relative;padding-bottom: 20rpx;}
.const_head{width: 100%;height: 97rpx;border-bottom:3rpx solid rgba(0,0,0,.15);font-size: 40rpx;color:#1BBD89;font-family: "SourceHanSansCN-Medium";}
.conversion{width: 269rpx;height: 68rpx;background: #1BBE8A;font-family: "SourceHanSansCN-Medium";color:#fff;font-size: 32rpx;border-radius: 34rpx;margin: 40rpx auto 0;}
// 兑换弹窗-end

// 收货地址
.user_phone{font-size: 26rpx;color:#222;}
.set_text{font-size: 24rpx;color:#868686;}
.set_img{width: 24rpx;height: 24rpx;margin-right: 9rpx;}
.add_address{width: 100%;overflow: hidden;height: 109rpx;}
.add_icon{width: 60rpx;height: 60rpx;margin-bottom: 12rpx;}
.user_name{font-size:32rpx;color:#000;margin-right: 46rpx;}
.add_name{width: 448rpx;overflow: hidden;font-size: 24rpx;color:#868686;}
.add_text{font-size: 24rpx;color:#868686;font-family: "SourceHanSansCN-Normal";}
.address{width: 100%;overflow: hidden;padding:28rpx;box-sizing: border-box;background: #fff;border-radius: 12rpx;background: #f4f4f4;}
// 收货地址-end
</style>