purchase-let/pageQuota/quotation/index.vue

<template>
	<view class="content">
		<up-sticky bgColor="#fff">
			<view class="head">
				<up-search placeholder="请输入提货点名称" @search="searchKeyword" v-model="keyword"
					@custom="searchKeyword"></up-search>
				<view class="">
					<view class="" style="display: flex;justify-content: space-around;margin-top: 24rpx;color:#777777">
						<view :class="{act: tabIndex==1}" @click="tabIndex=1">
							订单列表
						</view>
						<view :class="{act: tabIndex==2}" @click="tabIndex=2">
							报价记录
						</view>
					</view>
					<view style="height: 8rpx;" />
					<view class="line" :style="{left:tabIndex==1?tabsLeft+'px':tabsRight+'px'}" />
				</view>
			</view>
		</up-sticky>
		<view class="card" v-for="item in 10">
			<view class="card-head">
				<text>PF171504442988969633</text>
				<text style="color:#20B128 ;">待报价</text>
				<text style="color:#FC452F ;">已成交</text>
				<text style="color:#777777 ;">未成交</text>
			</view>
			<view style="padding-right: 20rpx;">
				<view class="card-content">
					<image v-for="(item,index) in 10" style="width: 152rpx;height: 152rpx;margin-right: 20rpx;"
						src="../../static/logo.png" mode="">
					</image>
				</view>
			</view>

			<view class="total">
				<view style="display: flex;align-items: center;color: #777777;"
					@click="navgo('/pageQuota/quotation/detail')">
					共4件 <up-icon name="arrow-right"></up-icon>
				</view>
			</view>
			<view class="card-foot" v-if='false'>
				温馨提示：请于2024年05月20日前发货
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"

	const navgo = (url) => {
		uni.navigateTo({
			url
		})
	}


	// 搜索
	const keyword = ref('')
	const searchKeyword = () => {
		console.log("sousuo1")
	}
	// 搜索结束

	// tabsindex
	const tabIndex = ref(1)
	const {
		windowWidth
	} = uni.getSystemInfoSync();
	const tabsLeft = ref(((windowWidth / 2) - 26) / 2)
	const tabsRight = ref(tabsLeft.value + (windowWidth / 2))
	// tabsindex结束
</script>

<style lang="scss">
	.content {

		.head {
			padding: 20rpx;
			background-color: white;
			position: relative;

			.act {
				color: #20B128;
			}

			.line {
				width: 26px;
				height: 5rpx;
				background-color: #20B128;
				border-radius: 50rpx;
				position: absolute;
				transition: 300ms;
			}
		}

		.card {
			width: 710rpx;
			margin: 20rpx auto;
			background-color: white;
			box-sizing: border-box;
			border-radius: 16rpx 16rpx 0 0;
			position: relative;

			.card-head {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 12rpx;
			}

			.card-content {
				padding: 20rpx;
				overflow-x: auto;
				white-space: nowrap;
				padding-right: 152rpx;
			}

			.total {
				width: 152rpx;
				height: 160rpx;
				position: absolute;
				// border: 1px dashed black;
				display: flex;
				justify-content: space-around;
				align-items: center;
				top: 100rpx;
				right: 20rpx;
				background-color: white;
			}

			.card-foot {
				background-color: #FFF1EC;
				color: #FC452F;
				text-indent: 2em;
				font-size: 24rpx;
				height: 74rpx;
				line-height: 74rpx;

			}
		}
	}
</style>