front-end/hdApp/src/admin/item/list2.vue

<template>
  <view class="app-content" style="background:white;">
		<view class="modern-tabs-container">
			<view class="modern-tabs">
				<view class="modern-tab" :class="{ 'active': globalLookStock === 0 }" @click="changeHasStock(0)">
					<view class="tab-content">
						<text class="tab-text">全部</text>
					</view>
				</view>
				<view class="modern-tab" :class="{ 'active': globalLookStock === 1 }" @click="changeHasStock(1)">
					<view class="tab-content">
						<text class="tab-text">有库存</text>
					</view>
				</view>
				<view class="modern-tab" :class="{ 'active': globalLookStock === 2 }" @click="changeHasStock(2)">
					<view class="tab-content">
						<text class="tab-text">没库存</text>
					</view>
				</view>
			</view>
		</view>
		<view class="billing_box_bg">
			<view class="input-wrap">
				<view style="padding:0upx 0upx 0upx 0upx;margin-right:8upx;" >
					<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 style="padding:0 0upx 0 8upx;" >
					<button class="admin-button-com middle blue" @click="pageTo({ url: '/admin/ptItem/itemList' })">添花材</button>
				</view>
			</view>

			<button class="admin-button-com middle blue" @click="refreshItem()" style="position: absolute;top:245upx;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.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>
									<!-- 下面这个key显示有问题，不要动，动了好像会有问题！！！！ -->
									<view class="item-row item-row--h260" :class="{ 'item-row--remark': productItem.itemRemark }" :key="productIndex">
										<ItemStock :info="productItem" @moreAction="moreAction" 
										@doPrintLabel="doPrintLabel" @cancelDiscountFn="cancelDiscountFn" @cancelFullOff="cancelFullOff"
										:ref="`productRef${productItem.id}`" @hideChangeFn="hideChangeFn" 
										@cancelPreSellFn="cancelPreSellFn" @breakSingleItem="breakSingleItem"
										@remarkCleared="syncItemRemark($event, '')">
										</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="moveLabelShow" @click="confirmToLosing" :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="digit" ref="input" style="width:61.8%;text-align:center;" v-model="moveNum" @focus="moveNum=''" :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="rightShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
			<view class="action-popup-container">
				<view class="action-button-item">
					<button class="action-button" @click="costChange()">成本变动记录</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="priceChange()">价格变动记录</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="varietyManage()">多颜色</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="copyCreate()">复制新建</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="editDesc()">图文介绍</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="shareItem()">分享到微信</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="getMyPoster()">生成海报</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="orderRecord()">下单记录</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="onStockChange()">路上库存变动</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="preSell()">预售</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="doWaste()">报损</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="doPart()">拆散</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="sendStock()">分配库存</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="delItem()">删除</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="addItemRemark()">增加备注</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="clearItemRemarkFn()">清除备注</button>
				</view>
				<view class="action-button-item">
					<button class="action-button" @click="moveToLose()">挪到处理区</button>
				</view>
				<view class="action-button-item cancel">
					<button class="action-button cancel" @click="closeRightShow()">取消</button>
				</view>
			</view>
		</uni-popup>

		<item-poster-popup ref="itemPosterPopup" :poster-url="posterUrl" @close="closePoster" @save="downloadPosterImg" />

		<modal-module :show="wasteShow" @click="wasteConfirm" :maskClosable="true" title="报损数量" padding="30rpx 30rpx" >
		<template v-slot:content>
			<view class="app-modal-input-wrap">
			<view class="inp-list-line">
			<view class="line-input">
			<input type="number" ref="input" style="width:61.8%;text-align:center;" @blur="wasteBlur" :focus="wasteFocus" v-model="wasteNum" :adjust-position="false" class="inp-input" />
			</view>
			</view>
		</view>
		</template>
			</modal-module>

		<modal-module :show="partShow" @click="partConfirm" :maskClosable="true" title="拆散数量" padding="30rpx 30rpx" >
		<template v-slot:content>
			<view class="app-modal-input-wrap">
			<view class="inp-list-line">
			<view class="line-input">
			<input type="number" ref="input" style="width:61.8%;text-align:center;" @blur="partBlur" :focus="partFocus" v-model="partNum" :adjust-position="false" class="inp-input" />
			</view>
			</view>
		</view>
		</template>
		</modal-module>

		<modal-module :show="remarkShow" @click="remarkConfirm" :maskClosable="true" title="花材备注" padding="30rpx 30rpx" >
		<template v-slot:content>
			<view class="app-modal-input-wrap">
			<view class="inp-list-line">
			<view class="line-input">
			<input type="text" style="width:90%;text-align:center;" @blur="remarkBlur" :focus="remarkFocus" v-model="remarkText" maxlength="200" :adjust-position="false" class="inp-input" placeholder="请输入备注" />
			</view>
			</view>
		</view>
		</template>
		</modal-module>

	</view>
</template>
<script>
import AppSearchModule from "@/components/module/app-search";
import AppWrapperEmpty from "@/components/app-wrapper-empty";
import ItemStock from "./components/item2";
import ItemPosterPopup from '@/components/item-poster-popup.vue'
import itemPosterMixin from "./mixins/itemPosterMixin";
import productMins from "@/mixins/product2";
import { mapGetters } from "vuex";
import { getWeixinId } from "@/api/invite";
import { print,cancelDiscountPrice,cancelPreSell,delStatusUpdate,cancelFullOffFn } from '@/api/product';
import { breakItem,changeFrontHide,applyAuth,changeHalf,moveToLosing,updateItemRemark,clearItemRemark } from '@/api/item'
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
import ModalModule from "@/components/plugin/modal"
import { partItem } from "@/api/part"
import { wastage } from "@/api/order"
export default {
	name: "list",
	components: {
		AppSearchModule,
		AppWrapperEmpty,
		ItemStock,
		ItemPosterPopup,
		uniPopup,
		ModalModule
	},
	mixins: [productMins, itemPosterMixin],
	data() {
		return {
			autoLoad: false,
			selectJobType: "stock",
			tabIndex: 0,
			getAppIdList:{},
			status:0,
			delStatus:0,
			printItemId:0,
			printType:0,
			printLabelShow:false,
			moveLabelShow:false,
			printNum:'',
			moveNum:'',
			printFocus:false,
			warning:0,
			currentInfo:{},
			wasteNum:'',
			wasteShow:false,
			wasteFocus:false,
			partNum:'',
			partShow:false,
			partFocus:false,
			remarkShow: false,
			remarkText: '',
			remarkFocus: false
		};
	},
	computed:{
		...mapGetters(["getMyShopInfo","getLoginInfo"]),
		...mapGetters({ loginInfo: "getLoginInfo",dictInfo:"getDictionariesInfo" })
	},
	onLoad() {
		this.initItem()
		let that = this
		getWeixinId().then(res => {
			that.getAppIdList = res.data
		})
	},
	methods: {
		doPart(){
			this.closeRightShow()
			this.partShow = true
			let that = this
			setTimeout(x => {
				this.$nextTick(() => {
					that.partFocus = true
				})
			}, 300)
		},
		partBlur(){
			this.partFocus = false
		},
		closePartPop(){
			this.partShow = false
			this.partFocus = false
			this.partNum = ''    
		},
		partConfirm(val){
			let that = this
			if (val.index == 0) {
				this.closePartPop()
				return
			}
			if(Number(that.partNum)<0){
				that.$msg('请填写数量')
				return false
			}
			let product = [{ productId:this.currentInfo.id,bigNum:that.partNum,smallNum:null,classId:0,itemId:this.currentInfo.itemId,ratio:this.currentInfo.ratio }]
			that.$util.confirmModal({content:'确认拆散？'},() => {
				partItem({product:JSON.stringify(product),remark:''}).then((res) => {
					if(res.code == 1){
						that.closePartPop()
						that.$msg('拆散成功')
					}
				})
			})
		},
		doWaste(){
			this.closeRightShow()
			this.wasteShow = true
			let that = this
			setTimeout(x => {
				this.$nextTick(() => {
					that.wasteFocus = true
				})
			}, 300)
		},
		wasteBlur(){
			this.wasteFocus = false
		},
		closeWastePop(){
			this.wasteShow = false
			this.wasteFocus = false
			this.wasteNum = ''    
		},
		wasteConfirm(val){
			let that = this
			if (val.index == 0) {
				this.closeWastePop()
				return
			}
			if(Number(that.wasteNum)<0){
				that.$msg('请填写数量')
				return false
			}
			let product = [{ productId:this.currentInfo.id,bigNum:that.wasteNum,smallNum:null,classId:0,itemId:this.currentInfo.itemId,ratio:this.currentInfo.ratio }]
			that.$util.confirmModal({content:'确认报损？'},() => {
				wastage({product:JSON.stringify(product),remark:''}).then((res) => {
					if(res.code == 1){
						that.closeWastePop()
						that.$msg('报损成功')
					}
				});
			})
		},
		moveToLose(){
			this.moveLabelShow = true
			this.moveNum = this.currentInfo.stock?parseFloat(this.currentInfo.stock):0
		},
		confirmToLosing(val){
			let that=this;
			if (val.index == 0) {
				that.moveLabelShow = false
				that.moveNum = ''
				return
			}
			that.$util.confirmModal({content:'确定挪动？'},() => {
				moveToLosing({id:this.currentInfo.id,num:that.moveNum}).then(res=>{
					if(res.code == 1){
						that.$msg(res.msg)
						that.moveLabelShow = false
						that.moveNum = ''
						that.closeRightShow()
					}
				})
			})
		},
		goSearchFn(){
			this.searchFn()			
		},
		changeHasStock(check){
			this.globalLookStock = check
			this.reGetGlobalProductList()
		},
		initItem(){
			this.globalRequestType = 'itemList'
			this.initData()
			uni.hideLoading()
		},
		refreshItem(){
			this.reGetGlobalProductList()
		},
		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
				}
			})
		},
		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)
					}
				})
			})
		},
		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})
		},
		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)
				}
			})
		},
		addItemRemark(){
			this.closeRightShow()
			this.remarkText = this.currentInfo.itemRemark || ''
			this.remarkShow = true
			let that = this
			setTimeout(() => {
				that.$nextTick(() => {
					that.remarkFocus = true
				})
			}, 300)
		},
		remarkBlur(){
			this.remarkFocus = false
		},
		closeRemarkPop(){
			this.remarkShow = false
			this.remarkFocus = false
			this.remarkText = ''
		},
		remarkConfirm(val){
			let that = this
			if (val.index == 0) {
				this.closeRemarkPop()
				return
			}
			const text = (that.remarkText || '').trim()
			if (!text) {
				that.$msg('请填写备注')
				return
			}
			updateItemRemark({ id: that.currentInfo.id, itemRemark: text }).then(res => {
				if (res.code == 1) {
					that.syncItemRemark(that.currentInfo.id, text)
					that.closeRemarkPop()
					that.$msg(res.msg || '保存成功')
				}
			})
		},
		clearItemRemarkFn(){
			let that = this
			this.closeRightShow()
			if (!that.currentInfo.itemRemark) {
				that.$msg('暂无备注')
				return
			}
			that.$util.confirmModal({ content: '确定清除备注？' }, () => {
				clearItemRemark({ id: that.currentInfo.id }).then(res => {
					if (res.code == 1) {
						that.syncItemRemark(that.currentInfo.id, '')
						that.$msg(res.msg || '清除成功')
					}
				})
			})
		},
		syncItemRemark(id, itemRemark){
			this.currentInfo.itemRemark = itemRemark
			if (!this.$util.isEmpty(this.globalItemData)) {
				this.globalItemData.forEach((item, index) => {
					if (item.id == id) {
						this.$set(this.globalItemData[index], 'itemRemark', itemRemark)
					}
				})
			}
		},
		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('pages/item/detail?shopId='+ that.loginInfo.shopId+'&id=0&ghsShopAdminId='+that.loginInfo.shopAdminId+'&id='+id)
			uni.navigateToMiniProgram({
				//姜枫-2021.04.13
				appId: that.getAppIdList.mall.miniAppId,
				path: 'pages/item/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.mall ? that.dictInfo.miniOriginalId.current.mall : ''
					if (sweixin) { //&& sweixin.nativeClient
						sweixin.launchMiniProgram({
							id: miniOriginalId,
							path: 'pages/item/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 {
			}
		},
		editDesc() {
			this.closeRightShow()
			this.pageTo({url: '/admin/item/picTextAdd-Edit?itemId='+this.currentInfo.id})
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/static/css/item-list-row.scss';

.app-content {
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}

.modern-tabs-container {
	flex-shrink: 0;
}

.billing_box_bg {
	flex: 1;
	display: flex;
	background:white;
	flex-direction: column;
	overflow: hidden;
	.input-wrap {
		flex-shrink: 0;
		display: flex;
		padding: 10upx 20upx 22upx 13upx;
		.search-bar {
			flex: 1;
		}
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		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;
      &: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 {
		flex: 1;
		box-sizing: border-box;
	}
	.item_list_bx {
		padding: 40upx 16upx;
	}
	.item_list_title {
		margin-bottom: 20upx;
		font-size: 30upx;
		font-weight: bold;
		color: #067a40;
	}
}
.class-popup-style{
	z-index:999999;
}

.action-popup-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24upx;
	padding: 50upx 40upx 60upx 40upx;
	max-height: 99vh;
	overflow-y: auto;
	width: 92vw;
	max-width: 650upx;
	margin: 0 auto;
}

.modern-tabs-container {
  padding: 0;
  background-color: #f8f9fa;
  width: 100%;
  flex-shrink: 0;
}

.modern-tabs {
  display: flex;
  background-color: #ffffff;
  padding: 6upx;
  box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.06);
  border: 2upx solid #f0f2f5;
  position: relative;
  z-index: 5;
  width: 100%;
}

.modern-tab {
  flex: 1;
  text-align: center;
  padding: 30upx 0;
  position: relative;
  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 12upx;
  margin: 0 2upx;
  background-color: #e2dfdf; /* 未选中态背景 */
  border: 2upx solid #f2f4f7; /* 未选中态边框 */
  box-shadow: none;
  
  .tab-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .tab-icon {
    font-size: 32upx;
    margin-bottom: 4upx;
    display: block;
    opacity: 0.85; /* 未选中态图标降低对比 */
  }
  
  &.active .tab-icon {
    filter: brightness(1.15);
    opacity: 1;
  }
  
  .tab-text {
    font-size: 30upx;
    color: #666;
    font-weight: 700;
  }
  
  &.active {
    background: #09C567;
    
    .tab-text {
      color: #ffffff;
      font-weight: 700;
      font-size: 30upx;
    }
  }
  
  /* H5 未选中态悬停效果（其它端不影响） */
  &:not(.active):hover {
    background-color: #f6f7f9;
    border-color: #e9ecef;
  }
}

.action-button-item {
	&.cancel {
		grid-column: 1 / -1;
		margin-top: 30upx;
	}
}

.action-button {
	width: 100%;
	height: 120upx;
	border: 2upx solid #d0d7de;
	border-radius: 16upx;
	background: #ffffff;
	color: #24292f;
	font-size: 34upx;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4upx 12upx rgba(0, 0, 0, 0.1);
	transition: all 0.15s ease;
	line-height: 1.2;
	
	&:active {
		background: #f6f8fa;
		transform: scale(0.96);
		border-color: #8c959f;
	}
	
	&.cancel {
		background: #f6f8fa;
		color: #656d76;
		border-color: #d0d7de;
		font-size: 32upx;
		
		&:active {
			background: #eaeef2;
			border-color: #8c959f;
		}
	}
}

</style>