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 ? '￥' + 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",
		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 that = this
				uni.showModal({
					title: '提示',
					content: '是否提交采购咨询？',
					async success(res) {
						if (res.confirm) {
							const { goods } = that
							const hadOrder = goods.find(e => e.prodCount) // 是否有输入采购数量（采购数量或者留言至少需要输一个才能采购）
							if (!hadOrder && !that.remarks) return that.$util.errMsg(`请输入采购数量或者留言信息！`)
							try {
								// 如果是采购，需要调两个接口，下面这个是采购的接口，第二个接口是需要传留言的接口；如果是留言的话就只需要调第二个接口
								if (hadOrder) {
									const data = goods.filter(e => e.prodCount).map(e => {
										return {
											prodCount: e.prodCount,
											prodId: e.prodId,
											shopId: that.shopId,
											skuId: e.skuId,
										}
									})
									
									await orderConfirm({
										orderItem: data
									})
								}
								
								// 留言
								const res = await orderSubmit({
									leaveAMessage: hadOrder ? false : true,
									orderShopParam: [
										{
											remarks: that.remarks,
											shopId: that.shopId
										}
									],
									orderType: type
								})
								that.orderNumbers = res.data.orderNumbers
								that.$refs.popup.close()
								that.$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>