front-end/hdApp/src/admin/billing/hs.vue

<template>
<view class="app-content">
	<view class="billing_box_bg">
		<view class="input-wrap" >
			<view style="padding:0upx 0upx 0upx 0upx;margin-right:15upx;" >
				<button class="admin-button-com middle blue" @click="selectFlowerNumFn()">图片分类</button>
			</view>
			<view class="search-bar">
				<app-search-module ref="globalSearchRef" v-model="globalPy" placeholder="这里搜索" @input="globalSearch" />
			</view>
			<view style="float:right;margin-left:15upx;">
				<button class="admin-button-com middle blue" @click="goItem()" style="margin-right:10upx;">花材</button>
				<button class="admin-button-com middle blue" @click="removeFromSave(option.customId)">清空购物车</button>
			</view>
		</view>

		<button class="admin-button-com middle blue" @click="confirmToSave" style="position: absolute;top:120upx;right:24upx;z-index:99;">选好了</button>

		<view class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view">
				<!--分类-->
				<div v-for="(item, index) in globalClassData" :key="index" class="tab-bar-item" :class="globalClassIndex == index ? 'active' : ''" :data-current="index" @tap.stop="globalSwitchClass(index,item)">
					<text style="text-align: center;">{{ item.categoryName || "" }}</text>
				</div>
				<view style="height: 120upx"></view>
			</scroll-view>
			<scroll-view scroll-y class="right-box" :scroll-top="globalScrollTopPlace" @scroll="globalGetScroll" 
			:scroll-into-view="scroll_into_view" scroll-with-animation="true" lower-threshold="100" @scrolltolower="globalScrollBottom">
				<!--花材列表-->
				<block v-if="!$util.isEmpty(globalItemData)">
					<view class="item_list_bx selectAll">
						<view v-if="!$util.isEmpty(globalItemData)">
							<template v-for="(productItem) in globalItemData">
								<view class="item_list_title" v-if="productItem.className && productItem.className!=''">{{ productItem.className }}</view>
								<view style="height: 175upx">
									<Commondity
										:globalCheckStock="true"
										:selectJobType="selectJobType"
										:info="productItem"
										@showAddModelFn="showAddModelFn"
										@replaceItemFn="replaceItemFn"
										@delProduct="delProduct"
									></Commondity>
								</view>
							</template>
						</view>
						<view v-else>
							<view style="height:260upx;text-align:center;color:#CCCCCC;position: relative;">
								<view style="position: absolute;margin:auto;top:130upx;left:0;right:0;bottom:0;">暂无花材</view>
							</view>
						</view>
					</view>
				</block>
				<block v-else>
					<app-wrapper-empty title="加载中" :is-empty="$util.isEmpty(globalItemData)" />
				</block>
			</scroll-view>

		</view>

		<modal-module :show="isAddModel" @cancel="addItemModelHidden" @click="confirmAddItemModel" :title="customData.name" color="#333" :size="32" padding="30rpx 30rpx" >
			<template slot="customContent">
				<view class="select-cmd_bx" v-if="customData">
					<view class="kc">
						<text>库存 {{ customData.stock?parseFloat(customData.stock):0 }}</text>
						<text style="margin-left:14upx;" v-if="customData.priceType == 1">¥{{ parseFloat(customData.price) }}</text>
						<text style="margin-left:14upx;" v-else>--</text>
					</view>
					<view class="num_bx">
						<input style="width:280upx" v-model="customData.userPrice" @focus="customData.userPrice = null" :class="[Number(customData.cost) > Number(customData.userPrice) ? 'warning-price' : '']"
						:disabled="false" type="digit" placeholder="单价" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;">元</text>
					</view>
					<view class="num_bx">

						<!-- #ifdef APP-PLUS -->
						<input style="width: 280upx" v-model="customData.bigCount" v-if="globalUnitType == 0" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 0">份</text>
						<input style="width: 280upx" v-model="customData.smallCount" v-if="globalUnitType == 1" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 1">{{customData.smallUnit}}</text>
						<!-- #endif -->

						<!-- #ifdef MP-WEIXIN -->
						<input style="width: 280upx" v-model="customData.bigCount" v-if="globalUnitType == 0" :focus="isAddInputFocus" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 0">份</text>
						<input style="width: 280upx" v-model="customData.smallCount" v-if="globalUnitType == 1" :focus="isAddInputFocus" type="number" />
						<text style="font-size:35upx;font-weight:bold;color:#666666;" v-if="globalUnitType == 1">{{customData.smallUnit}}</text>
						<!-- #endif -->

					</view>
					<view class="num_bx">
						<input style="width: 280upx;height:40upx;font-size:25upx;" v-model="customData.remark" type="text" placeholder="备注" />
					</view>
				</view>
			</template>
		</modal-module>

		<footer-cart :price="allPrice" :count="allCount" @confirm="confirmToSave" ></footer-cart>

		<uni-popup ref="globalClassImgRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
			<view style="display:flex;padding:20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
				<view v-for="(item, index) in globalClassData" :key="index" @tap.stop="globalChangeClass(index,item)" style="margin-bottom:20upx;margin-left:3upx;">
				<image :src="item.cover" style="width:120upx;height:120upx;border-radius:10upx;"></image>
				<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:120upx;text-align:center;">{{item.name}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</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/app-commodity2";
import FooterCart from "@/components/module/app-footer-cart";
import ModalModule from "@/components/plugin/modal";
import { COMMODITY_TYPE } from "@/utils/declare";
import hsMins from "@/mixins/hs";
import { mapGetters } from "vuex";
export default {
	name: "hs",
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart,
	},
	mixins: [hsMins],
	data() {
		return {
			COMMODITY_TYPE,
			isSmallCount:false,
			globalCheckStock:true,
			autoLoad: false,
			xjData:{},
			xjDataInfo:{},
		};
	},
	computed: {
		...mapGetters(["getLoginInfo"]),
	},
	onShow() {
	},
	onLoad () {
		if(this.option.customName){
			uni.setNavigationBarTitle({ title: this.option.customName })
		}
		if (this.option.customId){
			this.selectJobId = this.option.customId
			this.globalCustomId = this.option.customId
		}
		let book = this.option.book ? this.option.book : 0
		let getAll = this.option.getAll ? this.option.getAll : 0
		if(book == 0){
			this.globalRequestType = 'kd'
			this.initData()
		}else{
			this.globalCheckStock = false
			if(getAll == 1){
				this.globalRequestType = 'book'
			}else{
				this.globalRequestType = 'kd'
			}
			this.globalRequestType = 'book'
			this.initData()
		}
	},
	methods: {
		selectFlowerNumFn(){
			this.$msg('开发中')
			return false
			this.$refs.globalClassImgRef.open('top')
		},
		confirmToSave() {
			if(this.$util.isEmpty(this.selectList)){
				this.$msg('请选择花材')
				return false
			}
			if (this.$util.isEmpty(this.option.customId)){
				this.$msg("请选择客户")
				return
			}
			let customName = this.option.customName ? this.option.customName : '';
			let orderId = this.option.orderId  ? this.option.orderId : 0
			let book = this.option.book ? this.option.book : 0
			let customId = this.option.customId?this.option.customId:0
			let reduceStock = this.option.reduceStock?this.option.reduceStock:0
			this.$util.pageTo({ url: '/admin/billing/affirm?customId='+customId+'&customName='+customName+'&orderId='+orderId+'&book='+book+'&reduceStock='+reduceStock+'&fromType=hs',type:2})
		},
		goItem(){
			let customName = this.option.customName ? this.option.customName : '';
			let orderId = this.option.orderId  ? this.option.orderId : 0
			let book = this.option.book ? this.option.book : 0
			let customId = this.option.customId?this.option.customId:0
			let reduceStock = this.option.reduceStock?this.option.reduceStock:0
			this.$util.pageTo({url:'/admin/billing/index2?customId='+customId+'&customName='+customName+'&orderId='+orderId+'&book='+book+'&reduceStock='+reduceStock,type:2})
		}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	background: white;
	height: 100%;
	display: flex;
	flex-direction: column;
	.input-wrap {
		display: flex;
		padding: 22upx 20upx 22upx 13upx;
		.search-bar {
			flex: 1;
		}
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		position: relative;
		height: calc(100vh - 140upx);
		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: calc(100vh - 140upx);
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40upx 16upx;
		//padding: 0 16upx;
    &:last-child{
      margin-bottom: 70upx;
    }
	}
	.item_list_title {
		margin-bottom: 20upx;
		font-size: 24upx;
		font-weight: 600;
		color: #666666;
	}
	.select-cmd_bx {
		& .kc {
			color: #999999;
			font-size: 28upx;
			font-weight: 400;
			margin-bottom: 40upx;
			text-align: center;
			margin-top: 30upx;
			.unit_price{
				padding-right:25upx;
			}
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 40upx;
			padding-left:110upx;
			& > input {
				width: 212upx;
				height: 80upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-right: 24upx;
				font-size: 40upx;
			}
		}
	}
}
.class-popup-style{
	z-index:999999;
}
.warning-price{
	color:red;
	font-weight:bold;
}
</style>