front-end/ghsApp/src/admin/item/selectList.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="globalPy" ref="globalSearchRef" placeholder="这里搜索" @input="globalSearch"/>
				</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>
				</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="120" @scrolltolower="globalScrollBottom">
					<block v-if="!$util.isEmpty(globalItemData)">
						<view class="item_list_bx selectAll">
							<view v-if="!$util.isEmpty(globalItemData)">
								<template v-for="(productItem, productIndex) in globalItemData">
									<view class="item_list_title" v-if="productItem.className && productItem.className!=''">{{ productItem.className }}</view>
									<view style="height:190upx">
										<ItemStock :info="productItem" :ref="`productRef${productItem.id}`">
										</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(globalItemData)" />
						</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="printBlur" :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;" :focus="breakFocus" v-model="breakNum" :adjust-position="false" class="inp-input" />
				</div>
			</div>
			</div>
		</template>
		</modal-module>

		<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>

		<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/selectItem";
import productMins from "@/mixins/product2";
import { mapGetters } from "vuex";
import { getWeixinId } from "@/api/invite";
import { print,cancelDiscountPrice,cancelPreSell,delStatusUpdate,cancelFullOffFn } from '@/api/product';
import { getHdPoster,getSkPoster,breakItem,changeFrontHide,applyAuth } 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.initItem()
		let that = this
		getWeixinId().then(res => {
			that.getAppIdList = res.data
		})
	},
	methods: {
		goSearchFn(){
			this.searchFn()			
		},
		initItem(){
			this.globalRequestType = 'itemList'
			this.initData()
			uni.hideLoading()
		},
		refreshItem(){
			uni.showLoading({mask:true})
			this.globalPy = ''
			this.initItem()
		},
		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)
					}
				})
			})
		},
		cancelFullOff(item){
			let that = this
			this.$util.confirmModal({content:'确认取消满减？'},() => {
				cancelFullOffFn({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+'&name='+this.currentInfo.name,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:'保存成功'})
						}
						});
					}
				}
			});
		},
		selectFlowerNumFn(){
			this.$refs.globalClassImgRef.open('top')
		},
		printBlur() {
			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})
		},
		ptAuth(){
			let that = this
			that.$util.confirmModal({content:'确认申请?'},() => {
				applyAuth({id:this.currentInfo.id}).then(res=>{
					if(res.code == 1){
						that.closeRightShow()
						that.$msg('已提交申请')
					}
				})
			})
		},
		delItem(){
			let that = this
			that.$util.confirmModal({content:'确认删除?'},() => {
				delStatusUpdate({id:this.currentInfo.id,delStatus:1}).then(res=>{
					if(res.code == 1){
						that.closeRightShow()
						that.$msg('删除成功')
					}
				})
			})
		},
		onStockChange(){
			this.closeRightShow()
			this.pageTo({url: '/pagesStorehouse/stockWarn/onStockChange?id='+this.currentInfo.id+'&name='+this.currentInfo.name})
		},
		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 {
			}
		}
	}
};
</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: 30upx;
		font-weight: 600;
		color: #3385FF;
	}
	.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>