front-end/ghsApp/src/admin/billing/index2.vue

<template>
<view class="app-content">
	<view class="billing_box_bg">
		<view class="input-wrap" >
			<view style="padding:0upx 0upx 0upx 0upx;margin-right:10upx;" >
				<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;">
				<button class="admin-button-com middle blue" @click="removeFromSave(option.customId)">清除花材</button>
			</view>
		</view>

		<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.name || "" }}</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 class="item_list_title"></view>
						<view v-if="!$util.isEmpty(globalItemData)">
							<template v-for="(productItem, productIndex) in globalItemData">
								<view style="height: 175upx" :key="productIndex">
									<Commondity
										:globalCheckStock="true"
										:selectJobType="selectJobType"
										:info="productItem"
										@showAddModelFn="showAddModelFn"
										@replaceItemFn="replaceItemFn"
										@goToSpecialVariety="goToSpecialVariety"
										@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(globalClassItemList)" />
				</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 class="unit_price">库存 {{ parseFloat(customData.stock) }}</text>
						<text class="unit_price"> ¥{{ parseFloat(customData.price) }}</text>
						<text>{{customData.ratio}}{{customData.smallUnit}}/{{customData.bigUnit}}</text>
					</view>
					<view class="num_bx">
						<input style="width: 280upx" v-model="customData.userPrice" @focus="customData.userPrice = null" 
						: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">{{customData.bigUnit}}</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">{{customData.bigUnit}}</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 -->

						<image @click="switchGlobalUnitType" :src="`${constant.imgUrl}/icon/switch/switch128.png`" 
						style="width:86upx;height:86upx;position:absolute;top:300upx;right:40upx;" mode="widthFix"></image>

						<button class="admin-button-com mini-btn" @click="customData.userPrice=0.01;customData.bigCount=1" style="position:absolute;top:200upx;right:33upx;">赠送</button>

					</view>
				</view>
			</template>
		</modal-module>

		<FooterCart :price="allPrice" :count="allCount" @confirm="confirmToSave" ></FooterCart>

		<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/module/app-commodity2";
import FooterCart from "@/components/module/app-footer-cart";
import ModalModule from "@/components/plugin/modal";
import { COMMODITY_TYPE } from "@/utils/declare";
import productMins from "@/mixins/product2";
import { getClassRemind,hasClassRemind,getMenu } from "@/api/item-class";
import { delStatusUpdate } from '@/api/product';
import { mapGetters } from "vuex";
export default {
	name: "index",
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart,
	},
	mixins: [productMins],
	data() {
		return {
			COMMODITY_TYPE,
			isSmallCount:false,
			globalCheckStock:true,
			autoLoad: false,
			xjData:{},
			xjDataInfo:{},
		};
	},
	computed: {
		...mapGetters(["getLoginInfo"]),
	},
	onShow() {
		//小菊等多颜色
		if(this.xjData.hasUpdate == 1){
			this.customData = this.xjDataInfo
			if(this.xjData.cancel == 1){
				this.customData.bigCount = 0
				this.customData.smallCount = 0
				this.replaceItemFn(this.customData,1)
			}else{
				this.customData.bigCount = this.xjData.stock
				this.customData.smallCount = 0
				this.customData.bigPrice = this.xjData.price
				this.customData.price = this.xjData.price
				this.customData.itemPrice = this.xjData.price
				this.customData.userPrice = this.xjData.price
				this.confirmAddItemModel(this.customData)
			}
		}
		this.xjData = {}
	},
	onLoad () {
		let that = this
		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
		if(book == 0){
			this.globalRequestType = 'kd'
			this.initData()
		}else{
			this.globalCheckStock = false
			this.globalRequestType = 'book'
			this.initData()
		}
	},
	methods: {
		delProduct(info){
			let that = this
			that.$util.confirmModal({content:'确认删除?'},() => {
				delStatusUpdate({id:info.id,delStatus:1}).then(res=>{
					if(res.code == 1){
						that.$msg('删除成功')
					}
				})
			})
		},
		//小菊多颜色选择页
		goToSpecialVariety(info){
			this.xjDataInfo = info
			if(info.stock <= 0){
				uni.showToast({title:"没有库存",icon:"none"})
			}else{
				let userPrice = info.userPrice ? parseFloat(info.userPrice) : 0
				let price = info.price ? parseFloat(info.price) : 0
				this.$util.pageTo({url: "/admin/item/xj?stock="+info.stock+"&price="+price+"&customId="+this.option.customId+"&userPrice="+userPrice+"&productId="+info.id+"&ptItemId="+info.itemId})
			}
		},
		selectFlowerNumFn(){
			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
			this.$util.pageTo({ url: '/admin/billing/affirm',type:2,query: {customId:this.option.customId,customName:customName,orderId:orderId,book:book}})
		}
	}
};
</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;
}
</style>