purchase-let/pageQuota/purchase_product_offer/index.vue

<template>
	<view>
		<view class="content">
			<up-transition :show="true" mode="slide-left">
				<view v-if="goodsList1.length>0">
					<view class="card" v-for="(item,index) in goodsList1" :key='index'>
						<view class="head">
							<!-- <text> {{orer_sn}}</text> -->
							<!-- <text style="color: #989898;">{{time}}</text> -->
						</view>
						<view class="card-content">
							<view class="card-content-l" style="width: 152rpx;height: 152rpx;">
								<image style="width: 152rpx;height: 152rpx;" :src="item.image" mode=""></image>
							</view>
							<view class="card-content-r">
								<view class="title ellipsis">
									{{item.store_name}}
								</view>
								<view>
									单位:{{item.unit_name}}
								</view>
								<view>
									规格:{{item.store_info}}
								</view>
								<view style="color: red;">
									需求量： {{item.need_num}}
								</view>
							</view>

						</view>

						<view class="card-footer">
							<up-button size="small" type="primary" shape="circle"
								@click="cancleOrder(item)" v-if="item.buyer_confirm==0">确认已采购</up-button>
								<up-button size="small" type="success" shape="circle"
								v-else disabled	>{{item.buyer_confirm_name}}</up-button>
						</view>
						<up-line style="margin-top: 30rpx;" color="#F3F3F3"></up-line>
					</view>
				</view>
				<up-empty @click='test2' v-else mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
				</up-empty>
				<!-- <button @click="test2">叫我按钮</button> -->
			</up-transition>
			<up-modal :show="show" title="采购确认" showCancelButton @cancel="show=false" @confirm="offerUpdate()">
				<up-form labelPosition="left">
					<up-form-item label="名称">
						<up-input v-model="formData.store_name" border="none"></up-input>
					</up-form-item>
					<up-form-item label="数量">
						<up-input v-model="formData.nums" border="none" @change='changeInputPrice'></up-input>
					</up-form-item>
					<up-form-item label="单价">
						<up-input v-model="formData.price" border="none" @change='changeInputPrice'></up-input>
					</up-form-item>
					<up-form-item label="总价">
						<up-input v-model="formData.total_price" border="none"></up-input>
					</up-form-item>
				</up-form>
			</up-modal>

		</view>
	</view>
</template>


<script setup>
	import {
		ref,
		reactive,
	} from "vue"
	import {
		purchaseProductOfferLists,
		purchaseProductOfferUpdate
	} from "@/api/purchase_product_offer.js"

	const test2 = () => {
		console.log("点解")
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	const show = ref(false)
	const formData = ref({
		"id": '',
		"store_name": '',
		'product_id': '',
		'nums': '',
		'price': '',
		'total_price':''
	})
	// tabsindex
	const tabIndex = ref(1)
	const {
		windowWidth
	} = uni.getSystemInfoSync();
	const tabsLeft = ref(((windowWidth / 2) - 26) / 2)
	const tabsRight = ref(tabsLeft.value + (windowWidth / 2))
	// tabsindex结束

	const priceBlur = (index, goodsList) => {
		goodsList[index].price = Number(goodsList[index].price).toFixed(2)
	}

	// 列表
	const showGoods = ref(false)
	const showGoods1 = ref(false)
	const goodsList = ref([])
	const goodsList1 = ref([])

	const getGoodsList = async () => {
		let res = await purchaseProductOfferLists({})
		goodsList1.value = res.data.lists
	}
	const cancleOrder = (item) => {
		show.value = true
		formData.value.store_name = item['store_name']
		formData.value.id = item['id']
		formData.value.nums = item['need_num']
		formData.value.product_id = item['product_id']
	}
	const offerUpdate = () => {
		purchaseProductOfferUpdate(formData.value).then(res=>{
				uni.$u.toast(res.msg);
				show.value=false
				getGoodsList()
		})
	}
 const changeInputPrice=(e)=>{
	 if(formData.value.nums>0 && formData.value.price>0){
		 formData.value.total_price=formData.value.nums*formData.value.price
	 }
 }
	getGoodsList()
</script>

<style lang="scss">
	.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;
		}
	}

	.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: 50rpx;
			width: 710rpx;
			margin: 0 auto;
		}
	}

	.detail {
		width: 88rpx;
		height: 88rpx;
		border-radius: 88rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: #50C758;
		color: white;
		position: absolute;
		bottom: 300rpx;
		right: 20rpx;
	}

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