front-end/ghsApp/src/admin/item/list.vue

<template>
  <view class="app-content" style="background:white;">
		<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 v-model="py" placeholder="输拼音首字母也可以搜" @input="searchFn"/>
				</view>
				<view style="padding:0 0upx 0 20upx;" >
					<button class="admin-button-com middle blue" @click="pageTo({ url: '/admin/ptItem/itemList' })">添花材</button>
				</view>
			</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 globalClassItemList" :key="index" class="tab-bar-item" :class="[classIndex == index ? 'active' : '']" :data-current="index" @tap.stop="swichClass(index)">
						<text style="text-align: center;">{{ item.className || "" }}</text>
					</div>
				</scroll-view>
					<scroll-view scroll-y class="right-box" :scroll-into-view="scroll_into_view" scroll-with-animation="true"
							@scroll="scroll_detail" lower-threshold="100" @scrolltolower="scroll_bottom">

					<block v-if="!$util.isEmpty(globalClassItemList)">
						<view class="item_list_bx selectAll" v-for="(classItem, classIndex) in globalClassItemList" :key="classIndex" :id="`class_${classIndex}`">
							<view class="item_list_title"> {{ classItem.className }}</view>
							<view v-if="classItem.child && !$util.isEmpty(classItem.child)">
								<template v-for="(productItem, productIndex) in classItem.child">
									<view style="height:255upx" :id="`class_${classIndex}`" :key="productIndex">
										<ItemStock v-if="classItem.isActive" :info="productItem" @moreAction="moreAction" 
										@doPrintLabel="doPrintLabel" @cancelDiscountFn="cancelDiscountFn" 
										:ref="`productRef${productItem.id}`" @hideChangeFn="hideChangeFn" 
										@cancelPreSellFn="cancelPreSellFn" @breakSingleItem="breakSingleItem">
										</ItemStock>
									</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>
						<view style="width:100%">
							<app-wrapper-empty  title="加载中" :is-empty="$util.isEmpty(globalClassItemList)" />
						</view>
					</block>
				</scroll-view>
			</view>
		</view>

		<modal-module :show="printLabelShow" @click="dialogInputConfirm" :maskClosable="true" title="数量" padding="30rpx 30rpx" >
		<template v-slot:content>
			<div class="app-modal-input-wrap">
			<div class="inp-list-line">
				<div class="line-input">
				<input type="number" ref="input" style="width:61.8%;text-align:center;" @blur="blur" :focus="printFocus" v-model="printNum" :adjust-position="false" class="inp-input" />
				</div>
			</div>
			</div>
		</template>
		</modal-module>

		<modal-module :show="breakShow" @click="breakConfirm" :maskClosable="true" title="拆散数量" padding="30rpx 30rpx" >
		<template v-slot:content>
			<div class="app-modal-input-wrap">
			<div class="inp-list-line">
				<div class="line-input">
				<input type="number" ref="input" style="width:61.8%;text-align:center;" @blur="blur" :focus="breakFocus" v-model="breakNum" :adjust-position="false" class="inp-input" />
				</div>
			</div>
			</div>
		</template>
		</modal-module>
		<uni-popup ref="selectFlowerNumRef" 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 globalClassItemList" :key="index" @tap.stop="changeClass(index)" style="margin-bottom:20upx;margin-left:3upx;">
				<image :src="item.classCover" 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.className}}</view>
				</view>

			</view>
		</uni-popup>

		<uni-popup ref="rightShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
			<view style="display:flex;width:100vw;padding:20upx 20upx 40upx 20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
				<view style="width:100vw;"><button @click="costChange()">成本变动记录</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="priceChange()">价格变动记录</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="varietyManage()">多颜色</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="preSell()">预售</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="orderRecord()">下单记录</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="copyCreate()">复制新建</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="shareItem()">分享</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="getHdPosterFn()">分享海报（花店）</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="getSkPosterFn()">分享海报（个人）</button></view>
				<view style="width:100vw;margin-top:8upx;"><button @click="sendStock()">分配库存</button></view>
				<view style="width:100vw;margin-top:30upx;"><button @click="closeRightShow()">取消</button></view>
			</view>
		</uni-popup>

		<uni-popup ref="posterShow" background-color="#fff" type="center" :animation="true" class="class-popup-style">
			<view style="display:flex;width:100vw;padding:20upx 20upx 40upx 20upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
				<text style="position:absolute;right:50upx;top:10upx;font-size:70upx;" @click="closePoster()">×</text>
				<view style="width:100%;text-align:center;margin-top:75upx;">
					<image style="width:70%;margin:0 auto;border:1upx solid #CCCCCC;" :src="posterUrl" mode="widthFix"></image>
				</view>
				<view style="width:100%;margin-top:65upx;text-align:center;">
					<button class="admin-button-com big blue" style="width:300upx;" @click="downloadImg">保存图片</button>
				</view>
			</view>
		</uni-popup>

	</view>
</template>
<script>
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ItemStock from "./components/item";
import productMins from "@/mixins/product";
import { mapGetters } from "vuex";
import { getWeixinId } from "@/api/invite/index";
import { print,cancelDiscountPrice,cancelPreSell } from '@/api/product';
import { getHdPoster,getSkPoster,breakItem,changeFrontHide } from '@/api/item'
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
import ModalModule from "@/components/plugin/modal"
export default {
	name: "list",
	components: {
		AppSearchModule,
		AppWrapperEmpty,
		ItemStock,
		uniPopup,
		ModalModule
	},
	mixins: [productMins],
	data() {
		return {
			autoLoad: false,
			selectJobType: "stock",
			tabIndex: 0,
			getAppIdList:{},
			status:0,
			delStatus:0,
			printItemId:0,
			printType:0,
			printLabelShow:false,
			printNum:'',
			printFocus:false,
			warning:0,
			currentInfo:{},
			posterUrl:'',
			breakNum:'',
			breakFocus:false,
			breakShow:false
		};
	},
	computed:{
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
		...mapGetters({ loginInfo: "getLoginInfo",dictInfo:"getDictionariesInfo" })
	},
	onLoad() {
		this.shopId = this.getMyShopInfo.id;
		let type = '';
		if(this.option.delStatus){
			this.delStatus = this.option.delStatus
		}
		let requestType = this.option.warning && this.option.warning == 1 ? 'warning' : 'itemList'
		this.initData({ type, shopId: this.shopId,status:this.status,delStatus:this.delStatus,requestType:requestType})
		let that = this
		getWeixinId().then(res => {
			that.getAppIdList = res.data
		})
	},
	methods: {
		hideChangeFn(item,status){
			let that = this
			changeFrontHide({id:item.id,status:status}).then(res=>{
				if(res.code == 1){
					that.$refs[`productRef${item.id}`][0].frontHide = status
				}
			})
		},
		breakSingleItem(item){
			let that = this
			this.breakNum = 1
			that.$util.confirmModal({content:'确定拆1份？'},() => {
				that.breakAction()
			})
		},
		breakMore(){
			this.closeRightShow()
			this.breakShow = true
			this.breakNum = null
			setTimeout(x => {
				this.$nextTick(() => this.setBreakFocus())
			}, 200)
		},
		breakAction(){
			let that = this
			breakItem({breakNum:that.breakNum,id:that.currentInfo.id}).then(res=>{
				if(res.code == 1){
					that.breakShow = false
					that.breakFocus = false
					that.$msg(res.msg)
				}
			})
		},
		breakConfirm(val){
			let that=this;
			if (val.index == 0) {
				that.breakShow = false
				that.breakFocus = false
				return false
			}
			if (this.breakNum == null) {
				that.$msg('请填写数量')
				that.breakFocus = true
				return false
			}
			if (Number(this.breakNum) <= 0) {
				that.$msg('数量不能小于1')
				that.breakFocus = true
				return false
			}
			that.$util.confirmModal({content:'确认拆'+that.breakNum+'份？'},() => {
				that.breakAction()
			})
		},
		setBreakFocus(){
			this.breakFocus = true
		},
		cancelPreSellFn(item){
			let that = this
			this.$util.confirmModal({content:'确认取消预售？'},() => {
				cancelPreSell({id:item.id}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
					}
				})
			})
		},
		cancelDiscountFn(item){
			let that = this
			this.$util.confirmModal({content:'确认取消特价？'},() => {
				cancelDiscountPrice({id:item.id}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
					}
				})
			})
		},
		closePoster(){
			this.$refs.posterShow.close()
		},
		getHdPosterFn(){
			this.closeRightShow()
			let that = this
			uni.showLoading({mask:true})
			getHdPoster({id:this.currentInfo.id}).then(res=>{
				uni.hideLoading()
				if(res.code == 1){
					that.posterUrl = res.data.imgUrl
					that.$refs.posterShow.open('top')
				}
			})
		},
		getSkPosterFn(){
			this.closeRightShow()
			let that = this
			uni.showLoading({mask:true})
			getSkPoster({id:this.currentInfo.id}).then(res=>{
				uni.hideLoading()
				if(res.code == 1){
					that.posterUrl = res.data.imgUrl
					that.$refs.posterShow.open('top')
				}
			})
		},
		sendStock(){
			this.pageTo({url: '/admin/item/sendStock?id='+this.currentInfo.id+'&price='+this.currentInfo.price+'&stock='+this.currentInfo.stock,type:2})
		},
		downloadImg(){
			let that = this
			uni.downloadFile({
				url: this.posterUrl,
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success: function (data) {
							that.$refs.posterShow.close()
							uni.showToast({title:'保存成功'})
						}
						});
					}
				}
			});
		},
		changeClass(index){
			this.$refs.selectFlowerNumRef.close()
			this.swichClass(index)
		},
		selectFlowerNumFn(){
			this.$refs.selectFlowerNumRef.open('top')
		},
		blur() {
			this.printFocus = false
		},
		doPrintLabel(id,type){
			this.printItemId = id
			this.printType = type
			this.printLabelShow = true
			this.printNum = null
			setTimeout(x => {
				this.$nextTick(() => this.setFocus())
			}, 200)
		},
		setFocus() {
			this.printFocus = true
		},
		dialogInputConfirm(val) {
			let that=this;
			if (val.index == 0) {
				that.printLabelShow = false
				that.printFocus = false
				return
			}
			let currentNum = this.printNum
			let itemId = this.printItemId
			if (currentNum == null) {
				that.$msg('请填写数量')
				that.printFocus = true
				return
			}
			if (currentNum <= 0) {
				that.$msg('数量不能小于1')
				that.printFocus = true
				return
			}
			if (itemId == 0) {
				that.$msg('打印的花材id出错')
				that.printLabelShow = false
				that.printFocus = false
				return
			}
			print({id:itemId,num:currentNum,type:this.printType}).then(res=>{
				if(res.code == 1){
					that.printLabelShow = false
					that.printFocus = false
					uni.showToast({ title: '操作成功', duration: 1500 })
				} else if(res.code == 0){
					that.printLabelShow = false
					that.printFocus = false
					that.$msg(res.msg)
				}
			})
		},
		closeRightShow(){
			this.$refs.rightShowMore.close()
		},
		costChange(){
			this.closeRightShow()
			this.pageTo({url: '/admin/changePrice/costChangeList?id='+this.currentInfo.id})
		},
		priceChange(){
			this.closeRightShow()
			this.pageTo({url: '/admin/changePrice/changeList?id='+this.currentInfo.id})
		},
		varietyManage(){
			this.closeRightShow()
			this.pageTo({url: "/admin/item/xjSelect?itemId="+this.currentInfo.id})
		},
		copyCreate(){
			this.closeRightShow()
			this.pageTo({url: '/admin/item/copy?id='+this.currentInfo.id})
		},
		orderRecord(){
			this.closeRightShow()
			this.pageTo({url: "/admin/order/itemOrder?productId="+this.currentInfo.id})
		},
		preSell(){
			this.closeRightShow()
			this.pageTo({url: "/admin/item/presell?id="+this.currentInfo.id})
		},
		moreAction(item){
			this.currentInfo = item
			this.$refs.rightShowMore.open('top')
		},
		shareItem() {
			let that = this
			let id = this.currentInfo.id
			this.closeRightShow()
			// #ifdef MP-WEIXIN
			console.log('admin/ghsProduct/detail?shopId='+ that.loginInfo.shopId+'&id=0&ghsShopAdminId='+that.loginInfo.shopAdminId+'&id='+id)
			uni.navigateToMiniProgram({
				//姜枫-2021.04.13
				appId: that.getAppIdList.hd.miniAppId,
				path: 'admin/ghsProduct/detail?shopId='+ that.loginInfo.shopId+'&ghsShopAdminId='+that.loginInfo.shopAdminId+'&id='+id,
				//develop 开发版 trial 体验版 release 正式版
				envVersion: process.env.NODE_ENV === 'development' ? 'develop' : 'release',
				extraData: {
					'shopId': that.loginInfo.shopId,
					'id': 0,
					'name':'',
				},
				success (res) {
				}
			})
			// #endif
			// #ifdef APP-PLUS
			if(plus.runtime.isApplicationExist({pname:'com.tencent.mm',action:'weixin://'})){
				var sweixin
				plus.share.getServices(function(s){
					for (var i = 0; i < s.length; i++) {
						var t = s[i];
						if (t.id == 'weixin') {
							sweixin = t;
						}
					}
            		let miniOriginalId = that.dictInfo.miniOriginalId && that.dictInfo.miniOriginalId.current && that.dictInfo.miniOriginalId.current.hd ? that.dictInfo.miniOriginalId.current.hd : ''
					if (sweixin) { //&& sweixin.nativeClient
						sweixin.launchMiniProgram({
							id: miniOriginalId,
							path: 'admin/ghsProduct/detail?shopId='+ that.loginInfo.shopId+'&ghsShopAdminId='+that.loginInfo.shopAdminId+'&id='+id,
							type: 0
						});
					} else {
						that.$msg('没有找到微信服务');
						return false;
					}
				}, function(e){
					that.$msg("没有找到微信服务哦")
					//that.$msg("获取微信失败：" + e.message)
					//console.log(JSON.stringify(e));
				});
			}else{
				this.$msg("即将跳转小程序，请安装微信")
				return false
			}
			// #endif
		},
		affirm(val) {
			if (val.index === 0) {
				this.modalCancel();
			} else {
			}
		},
		scrollTop() {},
		initProductInfo() {
			this.globalClassItemListContrapose = [];
			this.page = 1;
			this.isMore = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	background:white;
	flex-direction: column;
	.input-wrap {
		display: flex;
		padding: 22upx 20upx 22upx 13upx;
		.search-bar {
			flex: 1;
		}
		.city-select {
			display: flex;
			flex-shrink: 0;
			align-items: center;
			margin-right: 15upx;
			margin-left: 45upx;
			background-color: #ffff;
			.iconfont {
				margin-left: 20upx;
				font-size: 30upx;
			}
		}
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		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;
	}
	.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: 60upx;
			text-align: center;
			margin-top: 10upx;
		}
		& .num_bx {
			display: flex;
			align-items: center;
			margin-bottom: 80upx;
			& > input {
				width: 212upx;
				height: 80upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-right: 24upx;
			}
		}
	}
}
.class-popup-style{
	z-index:999999;
}
</style>