cbz/page_index/pages/purchase/purchase.vue

<template>
	<view class="content">
		<u-navbar title=" " @leftClick="leftClick" :placeholder="true" :autoBack="true">
			<view slot="center" class="hflex nav">
				<view class="nav_item" :class="nav_index == 1 ? 'nav_active' : ''" @click="changeNav(nav_index)">采购订单</view>
				<view class="nav_item" :class="nav_index == 2 ? 'nav_active' : ''" @click="changeNav(nav_index)">接单需求</view>
			</view>
		</u-navbar>
		<view class="" v-if="nav_index == 1">
			<view class="tabs">
				<u-tabs :list="tabs" :scrollable="false" :activeStyle="{color: '#506DFF'}" lineColor="#506DFF" @click="changeTabs"></u-tabs>
			</view>
			<view class="box1">
				<view class="box1_top hflex acenter">
					<view class="top_item" :class="sort_index == 1 ? 'top_active' : ''" @click="changeSort(sort_index)">按照距离</view>
					<view class="top_item" :class="sort_index == 2 ? 'top_active' : ''" @click="changeSort(sort_index)">价格高低</view>
				</view>
				<block v-for="(item,index) in pageList" :key="index">
					<view class="order_box">
						<view class="order_top hflex acenter">
							<image src="/static/images/comment/order_type1.png"  v-if="item.type == 0" class="order_img"></image>
							<image src="/static/images/comment/order_type2.png"  v-if="item.type == 1" class="order_img"></image>
							<image src="/static/images/comment/order_type3.png"  v-if="item.type == 2" class="order_img"></image>
							<image src="/static/images/comment/order_type4.png"  v-if="item.type == 3" class="order_img"></image>
							<view class="order_title">{{item.name}}</view>
						</view>
						<view class="">
							<block v-for="(item2,inx) in item.order" :key="inx">
								<view class="order_item">
									<view class="item_name">{{item2.name}}</view>
									<view class="hflex acenter ">
										<view class="text_style1 padR-20" >规格：{{item2.norm}}</view>
										<view class="text_style1">数量：{{item2.num}}</view>
									</view>
								</view>
							</block>
						</view>
						<view class="hflex acenter jbetween order_bottom">
							<view class="text_style1">发布于{{item.date}}</view>
							<view class="more" @click="toDetail(item.index)">查看更多 》</view>
						</view>
					</view>
				</block>
			</view>
			
		</view>
		<view class="box2" v-if="nav_index == 2">
			<view class="search">
				<u-input v-model="serach_value" type="text" border="none" placeholder="大家都在搜" shape="circle"
					prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399">
				</u-input>
			</view>
			<block v-for="(item,index) in pageList2" :key="index">
				<view class="box hflex" @click="toDetail2(item.id)">
					<image :src="item.avatar"  mode="aspectFill" class="item_avatar"></image>
					<view class="vflex" style="margin-left: 20rpx;">
						<view class="item_name">{{item.name}}</view>
						<view class="hflex acenter cell">
							<u-icon name="phone-fill" color="#b8b8b8" size="14"></u-icon>
							<view class="text_style1" style="padding-left: 16rpx;">{{item.phone}}</view>
						</view>
						<view class="hflex astart cell">
							<u-icon name="map-fill" color="#b8b8b8" size="14"></u-icon>
							<view class="text_style1" style="padding-left: 16rpx;">{{item.address}}</view>
						</view>
					</view>
				</view>
			</block>
			<view class="add">
				<image src="/static/images/comment/add.png" class="add_img" @click="release"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				nav_index: 1,
				tabs: [
					{
						index: 0,
						name: '采购订单',
					},
					{
						index: 1,
						name: '生产订单',
					},
					{
						index: 2,
						name: '外协订单',
					},
					{
						index: 3,
						name: '海运订单',
					}
				],
				sort_index: 1,
				pageList: [
					{
						index: 1,
						type: 0,
						name: '福建船舶有限公司',
						order: [
							{
								id: 1,
								name: '聚酰胺/非离子表面活性剂Lutensol XP',
								norm: '15kg/桶',
								num: '10桶'
							},
							{
								id: 2,
								name: '聚酰胺/非离子表面活性剂Lutensol XP',
								norm: '15kg/桶',
								num: '10桶'
							}
						],
						date: '2022-11-14 12:34'
					},
					{
						index: 2,
						type: 1,
						name: '福建船舶有限公司',
						order: [
							{
								id: 1,
								name: '聚酰胺/非离子表面活性剂Lutensol XP',
								norm: '15kg/桶',
								num: '10桶'
							},
							{
								id: 2,
								name: '聚酰胺/非离子表面活性剂Lutensol XP',
								norm: '15kg/桶',
								num: '10桶'
							}
						],
						date: '2022-11-14 12:34'
					},
					{
						index: 3,
						type: 2,
						name: '福建船舶有限公司',
						order: [
							{
								id: 1,
								name: '聚酰胺/非离子表面活性剂Lutensol XP',
								norm: '15kg/桶',
								num: '10桶'
							},
							{
								id: 2,
								name: '聚酰胺/非离子表面活性剂Lutensol XP',
								norm: '15kg/桶',
								num: '10桶'
							}
						],
						date: '2022-11-14 12:34'
					},
					{
						index: 4,
						type: 3,
						name: '福建船舶有限公司',
						order: [
							{
								id: 1,
								name: '聚酰胺/非离子表面活性剂Lutensol XP',
								norm: '15kg/桶',
								num: '10桶'
							},
							{
								id: 2,
								name: '聚酰胺/非离子表面活性剂Lutensol XP',
								norm: '15kg/桶',
								num: '10桶'
							}
						],
						date: '2022-11-14 12:34'
					}
				],
				pageList2: [
					{
						id: 1,
						avatar: '/static/images/mine/avatar1.jpg',
						name: '张美华',
						phone: '189235767865',
						address: '山东省济南市历下区历元大街188号解放军家 属院东省济南市'
					}
				],
				
			}
		},
		onLoad() {
			that = this
			that.getList()
		},
		methods: {
			// 返回
			leftClick() {
				console.log('返回');
				$api.jump(-1)
			},
			getList() {
				$api.req({
					url: '/data/api.auth.Offer/purchase_order'
				}, function(res) {
					if(res.code == 1) {
						that.pageList = res.data
					}
				})
			},
			// 切换导航栏
			changeNav(index) {
				if (index == 1) {
					that.nav_index = 2
				} else {
					that.nav_index = 1
				}
			},
			// 切换tabs
			changeTabs(e) {
				console.log(e);
			},
			// 切换排序
			changeSort(index) {
				if (index == 1) {
					that.sort_index = 2
				} else {
					that.sort_index = 1
				}
			},
			// 查看订单详情
			toDetail(id) {
				$api.jump('/page_index/pages/purchase/orderDetail?id=' + id)
			},
			// 发布
			release() {
				$api.jump('/page_index/pages/purchase/release')
			},
			// 查看接单详情
			toDetail2(id) {
				$api.jump('/page_index/pages/purchase/receivingDetail?id=' + id)
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content::v-deep {
		background: #F4F4F4;
		.nav {
			width: 350rpx;
			height: 60rpx;
			background: #F4F4F4;
			border-radius: 30rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #020202;
			.nav_item {
				width: 50%;
				height: 60rpx;
				background: #F4F4F4;
				border-radius: 15px;
				text-align: center;
				line-height: 60rpx;
			}
			.nav_active {
				background: #506DFF;
				color: #FFFFFF;
			}
		}
		.tabs {
			width: 100%;
			background-color: #fff;
			height: 80rpx;
		}
		.box1 {
			width: 100%;
			margin-top: 20rpx;
			background: linear-gradient(180deg, #FFFFFF 0%, #F4F4F4 100%);
			border-radius: 40rpx 40rpx 0px 0px;
			box-sizing: border-box;
			padding: 28rpx 30rpx 72rpx;
			.box1_top {
				width: 100%;
				margin-bottom: 8rpx;
				.top_item {
					width: 152rpx;
					height: 52rpx;
					background: #EDEDED;
					border-radius: 26rpx;
					margin-right: 28rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #666666;
					text-align: center;
					line-height: 52rpx;
				}
				.top_active {
					color: #516EFE;
					background: #EDF2FE;
					border-radius: 26rpx;
					border: 1px solid #506DFF;
				}
			}
			.order_box {
				width: 100%;
				margin: 20rpx 0 ;
				background: #FFFFFF;
				border-radius: 10px;
				box-sizing: border-box;
				padding: 28rpx 20rpx;
				.order_top {
					width: 100%;
					
					/* .order_type {
						width: 108rpx;
						height: 36rpx;
						text-align: center;
						line-height: 36rpx;
						font-size: 20rpx;
						color: #fff;
						margin-right: 5rpx;
						border-radius: 4rpx;
					}
					.type1 {
						background-color: #506dff;
					} */
					.order_img {
						width: 108rpx;
						height: 36rpx;
						margin-right: 5rpx;
					}
					.order_title {
						font-size: 32rpx;
						font-weight: 500;
						color: #222222;
					}
				}
				.order_item {
					width: 100%;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #F4F4F4;
				}
				.item_name {
					font-size: 28rpx;
					font-weight: 400;
					color: #222222;
					padding: 20rpx 0;
				}
				
				.order_bottom {
					width: 100%;
					padding: 20rpx 0 0;
					.more {
						// width: 140rpx;
						// height: 48rpx;
						box-sizing: border-box;
						padding: 10rpx 20rpx;
						border-radius: 24rpx;
						border: 1px solid #979797;
						font-size: 20rpx;
						font-weight: 400;
						color: #888888;
					}
				}
			}
			
		}
		.padR-20 {
			padding-right: 20rpx;
		}
		.text_style1 {
			font-size: 24rpx;
			font-weight: 400;
			color: #888888;
		}
		.box2 {
			width: 100%;
			box-sizing: border-box;
			padding: 0 30rpx;
			.search {
				width: 100%;
				margin: 20rpx 0 4rpx;
				.u-input {
					background-color: #fff !important;
					padding: 20rpx 30rpx !important;
				}
			}
			.box {
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 24rpx 20rpx;
				border-radius: 20rpx;
				margin: 20rpx 0;
				.item_avatar {
					width: 84rpx;
					height: 84rpx;
					border-radius: 50%;
				}
				.cell {
					margin-top: 20rpx;
				}
				.item_name {
					font-size: 30rpx;
					font-weight: 500;
					color: #222222;
				}
			}
			.add {
				position: fixed;
				right: 30rpx;
				bottom: 186rpx;
				z-index: 99;
				.add_img {
					width: 96rpx;
					height: 96rpx;
				}
			}
		}
	}
</style>