FE_preschoolEdu_miniProgram/components/order/order.vue

<template>
	<view>
		<!-- 选择规格弹窗 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom" @change="change">
			<view class="goodsPopup">
				<view class="title">发送询价单给商家</view>
				<view class="tips">请填写您需要采购的数量及需求，方便商家更好地为你造型报价</view>
				
				<ul class="tab">
					<li v-for="(tab, i) in tabs" :key="i" :class="{active: curTab === tab.id}" @click="tabChange(tab)">{{ tab.name }}</li>
				</ul>
				
				<view class="content">
					<scroll-view v-if="!curTab" class="goods-wrap" scroll-y :show-scrollbar="false">
						<view class="goods" v-for="(item, i) in goods" :key="i">
							<view class="info">
								<view class="item">
									<view class="name">{{ item.prodName }}</view>
									<view class="meta">￥{{ item.price }}</view>
								</view>
								<view class="item">
									<view class="name">{{ item.skuName }}</view>
									<view class="meta">库存{{ item.stocks }}</view>
								</view>
							</view>
							
							<uni-number-box v-model.number="item.prodCount" :min="0" :max="item.stocks"></uni-number-box>
						</view>
					</scroll-view>
					<textarea v-else class="msg" v-model="remarks" placeholder="请输入"></textarea>
				</view>
				
				<view class="btns">
					<view class="btn" @click="procure(1)">个人采购</view>
					<view v-if="platformId === 5" class="btn" @click="procure(2)">组织采购</view>
					<view class="btn back" @click="back">返回</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="successDia" type="dialog">
			<uni-popup-dialog type="success" cancelText="返回" confirmText="查询询价采购单" title="提示" content="发送成功" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import { orderConfirm, orderSubmit } from '@/apis/modules/order.js'
	import { list } from '@/apis/modules/goods.js'
	export default {
		name:"order",
		// props: {
		// 	prodId: {
		// 		type: Number,
		// 	},
		// },
		data() {
			return {
				platformId: uni.getStorageSync('platformId'),
				shopId: '',
				tabs: [
					{
						id: 0,
						name: '按产品'
					},
					{
						id: 1,
						name: '留言商家'
					},
				],
				curTab: 0,
				goods: [],
				remarks: '',
				orderNumbers: '',
			};
		},
		onShow() {
			// this.getGoods()
		},
		methods: {
			// 获取商品列表
			async getGoods(shopId) {
				this.shopId = shopId
				const { data } = await list({
					shopId
				})
				data.map(e => e.prodCount = '')
				this.goods = data
			},
			change() {
				
			},
			// 返回
			back() {
				this.$refs.popup.close()
			},
			// tab切换
			tabChange(tab) {
				this.curTab = tab.id
			},
			// 采购
			async procure(type) {
				const { goods } = this
				const hadOrder = goods.find(e => e.prodCount) // 是否有输入采购数量（采购数量或者留言至少需要输一个才能采购）
				if (!hadOrder && !this.remarks) return this.$util.errMsg(`请输入采购数量或者留言信息！`)
				try {
					// 如果是采购，需要调两个接口，下面这个是采购的接口，第二个接口是需要传留言的接口；如果是留言的话就只需要调第二个接口
					if (hadOrder) {
						const data = goods.filter(e => e.prodCount).map(e => {
							return {
								prodCount: e.prodCount,
								prodId: e.prodId,
								shopId: this.shopId,
								skuId: e.skuId,
							}
						})
						
						await orderConfirm({
							orderItem: data
						})
					}
					
					// 留言
					const res = await orderSubmit({
						leaveAMessage: hadOrder ? false : true,
						orderShopParam: [
							{
								remarks: this.remarks,
								shopId: this.shopId
							}
						],
						orderType: type
					})
					this.orderNumbers = res.data.orderNumbers
					this.$refs.popup.close()
					this.$refs.successDia.open()
				} catch (e) {}
			},
			// 提示成功确认
			dialogConfirm() {
				this.$util.to(`/other/procureDetail/procureDetail?id=${this.orderNumbers}`)
			},
			// 提示成功返回
			dialogClose() {
				this.$refs.successDia.close()
			},
		}
	}
</script>

<style scoped lang="scss">
.goodsPopup {
	position: relative;
	padding: 30rpx;
	.title {
		font-size: 30rpx;
		color: #333;
	}
	.tips {
		margin: 20rpx 0 40rpx;
		font-size: 24rpx;
		color: #a0a0a0;
	}
	.content {
		height: 50vh;
	}
	.goods-wrap {
		height: 100%;
		margin-bottom: 100rpx;
	}
	.goods {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.info {
		display: inline-flex;
		margin-bottom: 20rpx;
		.item {
			margin-right: 20rpx;
			&:first-child {
				padding-right: 20rpx;
				border-right: 1px solid #e6e6e6;
			}
		}
		.name {
			margin-bottom: 10rpx;
			font-size: 26rpx;
			color: #333;
		}
		.meta {
			font-size: 24rpx;
			color: #9c9c9c;
		}
	}
	.msg {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		font-size: 24rpx;
		color: #333;
		border: 1px solid #dedede;
		border-radius: 4px;
		box-sizing: border-box;
	}
	.btns {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		.btn {
			width: 35%;
			padding: 15rpx 0;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			background-color: $uni-primary;
			border-radius: 20px;
		}
		.back {
			width: 20%;
			color: #333;
			background-color: #fff;
			border: 1px solid #ccc;
		}
	}
}
</style>