new_shop_app/pages/quote/index.vue

<template>
	<view style="padding: 100rpx 0;min-height: 100vh;">
		<view class="head">
			<view class="">
				<view class="" style="display: flex;justify-content: space-around;margin-top: 24rpx;color:#777777">
					<view :class="{act: tabIndex==1}" @click="changeTabs(1)">
						报价列表
					</view>
					<view :class="{act: tabIndex==2}" @click="changeTabs(2)">
						报价记录
					</view>
				</view>
				<view style="height: 8rpx;" />
				<view class="line" :style="{left:tabIndex==1?tabsLeft+'px':tabsRight+'px'}" />
			</view>
		</view>
		<view class="content">
			<u-loading-page v-if="loading" :loading="loading"></u-loading-page>
			<view v-else>
				<view class="card" v-for="(item,index) in lists" :key='index'>
					<view class="head">
					</view>
					<view class="card-content">
						<view class="card-content-l" style="width: 152rpx;height: 152rpx;">
							<image style="width: 152rpx;height: 152rpx;" :src="item.goods.imgs" mode=""></image>
							<view class="status">
								{{tabIndex==1?"未报价":"已报价" }}
							</view>
						</view>
						<view class="card-content-r">
							<view class="title ellipsis">
								{{item.goods.goods_name}}
							</view>
							<view class="need">
								需求量： {{item.need_num}}{{item.goods.unit_name}}
							</view>
							<view class="ipt">
								<u--input placeholder="输入报价数量" :readonly="tabIndex==2" v-model="item.nums"
									style="background-color:#F6F6F6;border: none;"></u--input>
								<view style="width: 10rpx;">

								</view>
								<u--input style="background-color: #F6F6F6;border: none;" placeholder="输入产品报价"
									@blur="priceBlur(index)" :readonly="tabIndex==2" v-model="item.price"></u--input>
							</view>
						</view>
						<view class="status-png" v-if="tabIndex==2">
							<image v-if="item.is_adopt==0" src="/static/images/dbj.png"
								style="width: 108rpx; height: 84rpx;">
							</image>
							<image v-else-if="item.is_adopt==1" src="/static/images/ybj.png"
								style="width: 108rpx; height: 84rpx;">
							</image>
							<image v-else-if="item.is_adopt==2" src="/static/images/ycn.png" style=" width: 108rpx;
								height: 84rpx;">
							</image>
							<image v-else src="/static/images/wcn.png" style="width: 108rpx; height: 84rpx;">
							</image>
						</view>
					</view>
					<view class="card-footer" v-if="item.nums && item.price">
						共{{item.nums}}{{item.unit_name}}&nbsp; &nbsp;合计:<text
							style="font-size: 28rpx;color: #FC452F;font-weight: 700;">￥{{(item.nums*item.price).toFixed(2)}}</text>
					</view>
					<u-line style="margin-top: 30rpx;" color="#F3F3F3"></u-line>
				</view>
				<u-empty v-if="lists.length==0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</u-empty>
			</view>

			<view class="submit-btn" v-if="tabIndex==1">
				<u-button shape='circle' color='#20B128' @click="submit" text="提交"></u-button>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		OpurchaseGoodsOfferApi,
		OpurchaseGoodsOfferListApi
	} from "@/api/supplier.js"

	export default {
		data() {
			return {
				tabIndex: 1,
				tabsLeft: 0,
				tabsRight: 0,
				loading: false,
				lists: [],
				date: "",
				ycn: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/739c3202405071458553459.png',
				wcj: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/04c2c202405071501462462.png',
				ybj: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/attach/274ad202405111523222891.png',
			}
		},
		methods: {
			navgo(url) {
				uni.navigateTo({
					url
				})
			},
			getTabsPosi() {
				const {
					windowWidth
				} = uni.getSystemInfoSync();
				this.tabsLeft = (((windowWidth / 2) - 26) / 2)
				this.tabsRight = (this.tabsLeft + (windowWidth / 2))
			},
			async getLists(type) {
				let that = this
				OpurchaseGoodsOfferListApi({
					type: type || this.tabIndex,
					date: this.date
				}).then(res => {
					this.lists = res.data.lists
					this.lists.forEach(item => {
						if (!(+item.nums)) {
							item.nums = ''
						}
						if (!(+item.price)) {
							item.price = ''
						}
					})
				})
				that.loading = true
				setTimeout(() => {
					that.loading = false
				}, 1000)
			},
			changeTabs(num) {
				let that = this
				this.tabIndex = num
				this.getLists()
			},
			priceBlur(i) {
				this.lists[i].price = (+this.lists[i].price).toFixed(2)
			},
			async submit() {
				let data =
					this.lists.filter(item => {
						return (+item.price && +item.nums)
					}).map(item => {
						return {
							id: item.id,
							nums: item.nums,
							price: item.price
						}
					})
				if (!data.length) return
				console.log(data)
				let res = await OpurchaseGoodsOfferApi({
					data: data
				})
				this.getLists(1)
			}
		},
		onLoad(option) {
			this.date = option.date
			this.getTabsPosi()
			this.getLists()
			// OpurchaseGoodsOfferListApi()

		}
	}
</script>


<style lang="scss">
	.head {
		padding: 20rpx;
		background-color: white;
		position: relative;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 10;

		.act {
			color: #20B128;
		}

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

	.content {
		padding: 20rpx;
		padding-bottom: 150rpx;

		.card {
			width: 710rpx;
			margin: 0 auto;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: white;



			.card-content {
				display: flex;
				position: relative;

				.card-content-l {
					margin-right: 20rpx;
					position: relative;

					.status {
						width: 152rpx;
						height: 40rpx;
						background-color: rgba(0, 0, 0, .3);
						text-align: center;
						color: white;
						font-size: 24rpx;
						line-height: 40rpx;
						position: absolute;
						bottom: 0;
					}
				}

				.card-content-r {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						font-size: 30rpx;
						width: 500rpx;
					}

					.need {
						color: #777777;
						font-size: 24rpx;
					}

					.ipt {
						display: flex;
						height: 56rpx;

					}
				}

				.status-png {
					position: absolute;
					right: 20rpx;
				}

			}

			.card-footer {
				margin-top: 30rpx;
				text-align: right;
				font-size: 28rpx;
				color: #060606;
			}
		}

		.submit-btn {
			position: fixed;
			bottom: 70rpx;
			width: 710rpx;
			margin: 0 auto;
		}
	}

	.ellipsis {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>