front-end/hdApp/src/pagesOrder/select.vue

<template>
	<view class="billing_box_bg">
		<app-tabs
			:tabs="tabs"
			:currentTab="tabIndex"
			@change="change"
			itemWidth="50%"
		/>
		<view class="input-wrap">
			<app-search-module
				v-model="py"
				placeholder="请输入关键词，支持拼音首字母搜索"
				@search="searchFn"
			/>
		</view>
		<view class="scroll-middle_bx">
			<scroll-view
				scroll-y
				scroll-with-animation
				class="tab-view"
				:scroll-top="scrollTop"
			>
				<div
					v-for="(item, index) in filterProductInfo"
					:key="index"
					class="tab-bar-item"
					:class="[classIndex == index ? 'active' : '']"
					:data-current="index"
					@tap.stop="swichClass"
				>
					<text>{{ item.className || "" }}</text>
					<text class="tag" v-if=" getSelectClassById(item.classId).bigCount > 0 || getSelectClassById(item.classId).smallCount > 0">
						<text v-if="getSelectClassById(item.classId).bigCount > 0 || getSelectClassById(item.classId).smallCount > 0">
							{{ `${getSelectClassById(item.classId).bigCount}` }}
						</text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0">/</text>
						<text v-if="getSelectClassById(item.classId).smallCount > 0">{{getSelectClassById(item.classId).smallCount}}</text>
					</text>
				</div>
			</scroll-view>

			<scroll-view scroll-y class="right-box" v-if="tabIndex == 0" :scroll-into-view="scrollClassId">
				<!--内容部分 start -->
				<block v-if="!$util.isEmpty(filterProductInfo)">
					<view
						class="item_list_bx"
						v-for="(classItem, classIndex) in filterProductInfo"
						:key="classIndex"
						:id="`class_${classItem.classId}`"
					>
						<view class="item_list_title">
							{{ classItem.className }}
						</view>
						<template v-for="(productItem, productIndex) in classItem.child">
							<view
								:id="`class_${classItem.classId}_${productItem.id}`"
								:key="productIndex"
							>
								<Commondity
									:info="productItem"
									:bigCount="
										getSelectItemById(productItem.id, classItem.classId).bigCount
									"
									:smallCount="
										getSelectItemById(productItem.id, classItem.classId).smallCount
									"
									@customNum="customNum"
									@add="addEvent"
									@del="delEvent"
								></Commondity>
							</view>
							<!-- <Commondity
							:type="COMMODITY_TYPE.CHANGE"
							@customNum="customNum"
						></Commondity> -->
						</template>
					</view>
				</block>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(filterProductInfo)" />
				</block>
				<!--内容部分 end -->
			</scroll-view>
			<block v-else>
				<view style="width:100%">
					<AppWrapperEmpty title="敬请期待" :is-empty="true" />
				</view>
			</block>
		</view>
		<!-- :maskClosable="false" -->
		<modal-module :show="isModel" @cancel="modalCancel" @click="affirm" :title="customData.itemName" color="#333" :size="32" padding="30rpx 30rpx">
			<template slot="customContent">
				<view class="select-cmd_bx" v-if="customData">
					<view class="kc"> 库存{{ customData.stock }} </view>
					<view class="num_bx">
						<input v-model="customData.bigCount" focus type="number" >扎
<!--						<input v-model="customData.bigCount" :focus="isModel" @focus="allSelect" :selection-start="startIndex" :selection-end="endIndex" type="number" >扎-->
						<input v-model="customData.smallCount" type="number" style="margin-left:24upx" />支
					</view>
				</view>
			</template>
		</modal-module>

		<modal-module :show="showSubmitModel" @cancel="cancelEvent" @click="submitEvent" :title="confirmContent" color="#333" :size="32" padding="30rpx 30rpx" >
		</modal-module>

		<FooterCart :price="allPrice" :count="allCount" @confirm="confirmSelectEvent" ></FooterCart>
	</view>
</template>

<script>
import AppSearchModule from "@/components/module/app-search";
import AppTabs from "@/components/plugin/tabs";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import Commondity from "@/components/module/app-commodity";
import FooterCart from "@/components/module/app-footer-cart";
import ModalModule from "@/components/plugin/modal";

import { COMMODITY_TYPE } from "@/utils/declare";
import { chooseOrderProductApi } from "@/api/order/index";
import productMins from "@/mixins/product";
export default {
	name: "Billing", // 开单
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart
	},
	mixins: [productMins],
	data() {
		return {
			pageType: "order_change",
			COMMODITY_TYPE,
			tabIndex: 0,
			tabs: [
				{
					name: "花材"
				},
				{
					name: "商品"
				}
				// {
				//     name: '课程'
				// },
			],
			isModel: false,
			customData: {
				bigCount: 0,
				smallCount: 0
			},
			showSubmitModel: false
		};
	},
	computed: {
		confirmContent() {
			let content = "确认下一步？";
			if (this.hasNoStock) {
				content = "有花材库存不足，确认下一步？";
			}
			return content;
		}
	},
	onUnload() {
		this.resetSelectInfoByType(this.pageType);
	},

	methods: {
		//自定义数量
		customNum(info) {
			this.isModel = true;
			this.customData = info;
		},
		modalCancel() {
			this.isModel = false;
			this.customData = {};
		}, // 取消 确认
		affirm(val) {
			if (val.index === 0) {
				this.modalCancel();
			} else {
				const {
					bigCount,
					smallCount,
					bigNum,
					bigUnit,
					smallNum,
					smallUnit,
					ratio
				} = this.customData;
				const ratioNum = Number(ratio);

				//超过库存时 设置为库存最大值
				if (
					Number(bigCount) * ratioNum + Number(smallCount) >
					Number(bigNum) * ratioNum + Number(smallNum)
				) {
					uni.showToast({
						title: `库存只有${bigNum}${bigUnit}${smallNum}${smallUnit}`,
						icon: "none"
					});
					this.customData.bigCount = bigNum;
					this.customData.smallCount = smallNum;
				} else {
					this.updateItemEvent(this.customData);
					this.modalCancel();
				}
			}
		},
		cancelEvent() {
			this.showSubmitModel = false;
		},
		submitEvent(val) {
			if (val.index === 0) {
				this.cancelEvent();
			} else {
				console.log(444, this.selectList);
				uni.navigateBack({
					delta: 1
				});

				this.cancelEvent();
			}
		},
		async confirmSelectEvent() {
			try {
				if (this.selectList.length > 0) {
					const product = this.selectList.map(ele => {
						return {
							classId:ele.classId,
							productId: ele.id,
							bigNum: ele.bigCount,
							smallNum: ele.smallCount
						};
					});
					let params = {
						id: this.option.id,
						product: JSON.stringify(product)
					};
					await chooseOrderProductApi(params);
					this.$msg("修改成功");
					uni.navigateBack({
						delta: 1
					});
				} else {
					this.$msg("请选择花材");
				}
			} catch (error) {}
		},
		change(e) {
			if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
			}
		},
		scrollTop() {}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
	.input-wrap {
		padding: 22upx 20upx 22upx 30upx;
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		height: 100%;
		width: 170upx;
		flex-shrink: 0;
		background-color: #f0f2f6;
		.tab-bar-item {
			position: relative;
			width: 170upx;
			height: 90upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26upx;
			color: #444;
			font-weight: 400;
			.tag {
				display: flex;
				padding: 0 20upx;
				align-items: center;
				position: absolute;
				right: 0;
				top: 0;
				height: 32upx;
				background: #ff2842;
				border-radius: 16upx;
				color: #fff;
				font-size: 20upx;
			}
      &:last-child{
        margin-bottom: 110upx;
      }
		}

		.active {
			position: relative;
			color: $mainColor;
			font-size: 26upx;
			background: #fff;
		}

		.active::before {
			content: "";
			position: absolute;
			border-left: 8upx solid $mainColor;
			height: 100%;
			left: 0;
		}
	}
	.right-box {
		height: 100%;
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40upx 16upx;
    &:last-child{
      margin-bottom: 70upx;
    }
	}
	.item_list_title {
		margin-bottom: 20upx;
		font-size: 30upx;
		font-weight: bold;
		color: #067a40;
	}
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28upx;
			font-weight: 400;
			margin-bottom: 60upx;
			text-align: center;
			margin-top: 10upx;
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 80upx;
			& > input {
				width: 212upx;
				height: 80upx;
				border: 1px solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-right: 24upx;
			}
		}
	}
}
</style>