cbz-sj/pages/mine/service/purOrder/list.vue

<template>
	<view class="content">
		<view class="tabs">
			<u-tabs :list="tabs" @click="changeTabs" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" lineColor="#506DFF" lineWidth="48rpx" lineHeight='8rpx' :scrollable="false"></u-tabs>
		</view>
		<view class="tabs2">
			<u-tabs :list="tabList" @click="changeTabs2" :activeStyle="activeStyle2" :inactiveStyle="inactiveStyle2"lineWidth="0" lineHeight='0' :scrollable="false"></u-tabs>
		</view>
		<view class="vflex" style="box-sizing: border-box;padding: 0 30rpx;">
			<block v-for="(item,index) in pageList" :key="index">
				<view class="box" @click="toDetail(item.id)">
					<view class="top hflex acenter jbetween">
						<view class="hflex acenter" v-if="item.tab == 1">
							<image src="/static/images/mine/orderType1.png" class="icon_type"></image>
							<view class="top_title">采购订单</view>
						</view>
						<view class="hflex acenter" v-if="item.tab == 2">
							<image src="/static/images/mine/orderType2.png" class="icon_type"></image>
							<view class="top_title">生产订单</view>
						</view>
						<view class="hflex acenter" v-if="item.tab == 3">
							<image src="/static/images/mine/orderType3.png" class="icon_type"></image>
							<view class="top_title">外协订单</view>
						</view>
						<view class="hflex acenter" v-if="item.tab == 4">
							<image src="/static/images/mine/orderType4.png" class="icon_type"></image>
							<view class="top_title">海运订单</view>
						</view>
						
						<view class="top_right1 hflex acenter jcenter" v-if="item.status == 1">未报价</view>
						<view class="top_right1 top_right2 hflex acenter jcenter" v-if="item.status == 2">已报价</view>
						<view class="top_right1 top_right3 hflex acenter jcenter" v-if="item.status == 3">已匹配</view>
					</view>
					<view class="center">
						<block v-for="(item2,index2) in item.items" :key="index2">
							<view class="items">
								<view class="items_name">{{item2.name}}</view>
								<view class="hflex acenter items_spec" v-if="item.tab != 4">
									<view>规格：{{item2.spec}} </view>
									<view style="padding-left: 20rpx;">采购数量：{{item2.number}}</view>
								</view>
								<view class="hflex acenter items_spec" v-else>
									<view>数量/吨位：{{item2.weight}} </view>
								</view>
							</view>
						</block>
					</view>
					<view class="bottom hflex acenter jbetween">
						<view class="bottom_left">{{item.create_time}}</view>
						<view class="hflex acenter" v-if="item.status != 3">
							<view class="btn1 hflex acenter jcenter" @click.stop="cancel(item.id)">取消订单</view>
							<view class="btn1 btn2 hflex acenter jcenter" @click.stop="edit(item.id)">编辑订单</view>
						</view>
						<view class="hflex" v-else>
							<view class="btn1 btn2 hflex acenter jcenter" @click.stop="remind(index)">提醒完成</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				tabs: [
					{
						name: '全部'
					},
					{
						name: '未报价'
					},
					{
						name: '已报价'
					},
					{
						name: '已匹配'
					}
				],
				activeStyle: {
					fontSize: '32rpx',
					color: '#222222',
				},
				inactiveStyle: {
					color: '#333333',
				},
				status: 0,
				tabList: [
					{
						name: '采购订单',
					},
					{
						name: '生产订单',
					},
					{
						name: '外协订单',
					},
					{
						name: '海运订单',
					}
				],
				activeStyle2: {
					width: '148rpx',
					height: '60rpx',
					borderRadius: '42rpx',
					fontSize: '26rpx',
					textAlign: 'center',
					lineHeight: '60rpx',
					background: '#E7EBF7',
					color: '#506DFF'
				},
				inactiveStyle2: {
					width: '148rpx',
					height: '60rpx',
					borderRadius: '42rpx',
					fontSize: '26rpx',
					textAlign: 'center',
					lineHeight: '60rpx',
					background: '#E9E9E9',
					color: '#333333',
				},
				tab: 1,
				page: 1,
				limit: 10,
				pageList: []
			}
		},
		onLoad() {
			that = this
		},
		onShow() {
			that.getList()
		},
		methods: {
			
			getList() {
				$api.req({
					url: '/data/api.business.Purchase/list',
					data: {
						page: that.page,
						limit: that.limit,
						status: that.status,
						tab: that.tab
					}
				}, function(res) {
					if(res.code == 1) {
						if(that.page == 1) {
							that.pageList = res.data.data
						} else {
							that.pageList = that.pageList.concat(res.data.data)
						}
						that.total = res.data.total
					}
				})
			},
			changeTabs(e) {
				that.status = e.index
				that.page = 1
				that.pageList = []
				that.getList()
			},
			changeTabs2(e) {
				that.tab = e.index + 1
				that.page = 1
				that.pageList = []
				that.getList()
			},
			cancel(id) {
				$api.req({
					url: '/data/api.business.Purchase/cancel',
					data: {
						tab:that.tab,
						id: id
					}
				}, function(res) {
					if(res.code == 1) {
						$api.info(res.info)
						setTimeout(()=>{
							that.getList()
						},1000)
					}
				})
			},
			edit(id) {
				var url = ''
				switch(that.tab) {
					case 1 :
						url = '/pages/release/purchase/purchase?id=' + id;
						break;
					case 2 :
						url = '/pages/release/production/production?id=' +id;
						break;
					case 3 :
						url = '/pages/release/waixie/waixie?id=' +id;
						break;
					case 4 :
						url = '/pages/release/ocean/ocean?id=' +id;
						break;
				}
				$api.jump(url + '&back=true')
			},
			remind(index) {
				var user_id = ""
				if(that.tab == 1) {
					for(var i=0;i<that.pageList[index].items.length;i++) {
						if (that.pageList[index].items[i].is_matched) {
							for(var j=0;j<that.pageList[index].items[i].offers.length;j++) {
								if (that.pageList[index].items[i].offer_id == that.pageList[index].items[i].offers[j].id) {
									user_id = that.pageList[index].items[i].offers[j].user_id
									$api.req({
										url: '/data/api.business.Purchase/reminder',
										data: {
											user_id: user_id
										}
									}, function(res) {
										if(res.code == 1) {
											$api.info('已发送提醒')
										}
									})
								}
							}
						}
					}
				} else {
					if (that.pageList[index].is_matched) {
						for(var j=0;j<that.pageList[index].offers.length;j++) {
							if (that.pageList[index].offer_id == that.pageList[index].offers[j].id) {
								user_id = that.pageList[index].offers[j].user_id
								$api.req({
									url: '/data/api.business.Purchase/reminder',
									data: {
										user_id: user_id
									}
								}, function(res) {
									if(res.code == 1) {
										$api.info('已发送提醒')
									}
								})
							}
						}
					}
				}
			},
			toDetail(id) {
				$api.jump('/pages/mine/service/purOrder/detail?id=' + id + '&tab=' + that.tab)
			},
			onReachBottom() {
				if (Number(that.page) * Number(that.limit) >= Number(that.total)) {
					$api.info("没有更多了")
				} else {
					that.page++
					that.getList()
				}
				
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F4F4F4;
		.tabs {
			width: 100%;
			height: 80rpx;
			background: #fff;
		}
		.tabs2 {
			padding: 24rpx 0 28rpx;
		}
		.box {
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 0 20rpx;
			.top {
				padding: 30rpx 0 0;
				.icon_type {
					width: 32rpx;
					height: 32rpx;
					margin-right: 12rpx;
				}
				.top_title {
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
					line-height: 42rpx;
				}
				.top_right1 {
					width: 96rpx;
					height: 40rpx;
					background: #FFF4E8;
					border-radius: 4rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #FBA94E;
				}
				.top_right2 {
					background: #E7EBF7;
					color: #506DFF;
				}
				.top_right3 {
					background: #E6F7E8;
					color: #4AB256;
				}
			}
			.center {
				width: 100%;
				
				.items {
					padding: 24rpx 0;
					border-bottom: 1rpx solid #F4F4F4;
					.items_name {
						font-size: 28rpx;
						font-weight: 400;
						color: #222222;
						line-height: 40rpx;
						padding-bottom: 16rpx;
					}
					.items_spec {
						width: max-content;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						box-sizing: border-box;
						padding: 6rpx 16rpx;
						background: #F4F4F4;
						border-radius: 8rpx;
					}
				}
			}
			.bottom {
				width: 100%;
				padding: 24rpx 0;
				.bottom_left {
					font-size: 24rpx;
					font-weight: 400;
					color: #777777;
					line-height: 30rpx;
				}
				.btn1 {
					width: 152rpx;
					height: 60rpx;
					border-radius: 32rpx;
					border: 1px solid #979797;
					font-size: 28rpx;
					font-weight: 400;
					color: #444444;
				}
				.btn2 {
					color: #506DFF;
					border: 1px solid #506DFF;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>