front-end/mallApp/src/pages/item/item.vue

<template>
	<view class="billing_box_bg">

		<view class="c_header fadeIn">
			<view class="header_inside">
				<image :src="shopImg"></image>
				<view class="shop_info">
					<view class="shop_title">{{shopName}}</view>
				</view>
			</view>
		</view>

		<view class="input-wrap" >
			<view class="search-bar">
				<app-search-module v-model="py" placeholder="这里搜索" @input="searchFn" />
			</view>
			<view class="buy-flower-container">
				<button class="buy-mall-btn" @click="buyHs()">
					<view class="btn-content">
						<text class="btn-text">买花束</text>
					</view>
				</button>
				<button @click="scanCode()" style="background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);border: none;">
					<view class="btn-content">
						<text class="btn-text">扫一扫</text>
					</view>
				</button>
			</view>
		</view>

		<view class="scroll-middle_bx">
			<scroll-view scroll-y scroll-with-animation class="tab-view">
				<div v-for="(item, index) in filterProductInfo" :key="index" class="tab-bar-item" :class="[classIndex == index ? 'active' : '']" :data-current="index" @tap.stop="swichClass(index)">
					<text v-if="item.classId=='-1' || item.classId=='-3' || item.classId=='-2'" style="color:red;font-weight:bold;text-align: center;">{{ item.className || "" }}</text>
					<text v-else style="text-align: center;">{{ item.className }}</text>
				</div>
				<view style="height:180upx"></view>
			</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">
				<!--内容部分 start -->
				<block v-if="!$util.isEmpty(filterProductInfo)">
					<view class="item_list_bx selectAll" v-for="(classItem, classIndex) in filterProductInfo" :key="classIndex" :id="`class_${classIndex}`">
						<view class="item_list_title">{{ classItem.className }}</view>
						<template v-for="(productItem, productIndex) in classItem.child">
							<view :class="[productItem.presell == 1 ? 'middle-box' : 'box']" :id="`class_${classItem.classId}_${productItem.id}`" :key="productIndex">
								<Commondity v-if="classItem.isActive"
									:info="productItem"
									:offVerifyRepertory="true"
									:bigCount="getSelectItemById(productItem.id, classItem.classId).bigCount"
									:smallCount="getSelectItemById(productItem.id, classItem.classId).smallCount"
									@customNum="customNum"
									@add="addEvent"
									@addOneEvent="addCustomNumEvent"
									@del="delEvent"
									@showBigCover="showBigCover"
									@goToSpecialVariety="goToSpecialVariety"
								></Commondity>
								<view v-if="productItem.presell && productItem.presell == 1" style="position:absolute;top:150upx;font-size:26upx;color:#3385ff;white-space: nowrap;text-overflow: hidden;">
									配送日：
									<block v-if="!$util.isEmpty(productItem.presellDateShow)">
										<text v-for="(dateItem, dateIndex) in productItem.presellDateShow" :key="dateIndex" style="">
											{{dateItem}}
											<text v-if="dateIndex!=productItem.presellDateShow.length-1">，</text>
										</text>
									</block>
								</view>
							</view>
						</template>
					</view>
				</block>
				<block v-else>
					<app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(filterProductInfo)"/>
				</block>
				<!--内容部分 end -->
			</scroll-view>
		</view>

		<modal-module :show="isModel" @cancel="modalCancel" @click="affirm" :title="customData.itemName" color="#333" :size="32" padding="30rpx 30rpx" >
			<template slot="customContent">
				<view class="select-cmd_bx" v-if="customData">
					<view class="kc">&nbsp;</view>
					<view class="num_bx">
						<input v-model="customData.bigCount" :focus="isFocus" type="number" placeholder="扎数" />
					</view>
				</view>
			</template>
		</modal-module>

		<FooterCart :price="allPrice" :count="allCount" @confirm="confirmSelectEvent" @showCartItem="showCartItem"></FooterCart>
    	<sel-popup :show="popupShow" :info="infoData" @close="hidePopup" />
		<app-activily-coupon :show.sync="isNewCustom" :info="newCustomGift" :ghsId="ghsId" />
		
		<view v-if="cartItemShow == true" style="position: fixed;z-index: 190;top: 0;left: 0;width: 100vw;height: 145vh;background: rgba(0, 0, 0, 0.6);color: #fff;" @click="hideCartItem()">
			<view style="position: fixed;bottom: 108upx;width:100vw;background-color:white;" @click.stop="">
				<view class="commodity-view">
					<view class="summary-bar">
						<button class="admin-button-com blue middle" style="border:none;" @click.stop="delMemory()">清空购物车</button>
						<button class="admin-button-com blue big" @click.stop="scanCode()" style="border:none;padding:22upx 34upx; display:flex; align-items:center;">
							<view class="btn-content">
								<text class="btn-text" style="font-size: 28upx;">扫一扫</text>
							</view>
						</button>
					</view>
					<view class="commodity-list">
						<view class="commodity-item" v-for="(item, index) in selectList" :key="index">
							<image class="item-icon" :src="item.cover" alt="" />
							<view class="item-info">
								<view class="info-line">
									<text class="item-name">{{ item.name }}</text>
									<view class="item-price">
										<text class="unit"></text>
										<view class="price">
											<view v-if="Number(item.skDiscountPrice) > 0">
												<text style="text-decoration:line-through;color:#A9A9A9;font-size:24upx;margin-left:10upx;font-weight:normal;margin-right:12upx;">¥{{ item.skPrice ? parseFloat(item.skPrice) : 0 }}</text>
												<text>¥{{ parseFloat(item.skDiscountPrice)}}</text>
											</view>
											<view v-else>
												¥{{ item.skPrice ? parseFloat(item.skPrice) : 0 }}
											</view>
										</view>
									</view>
								</view>
								<view class="limit-buy-tip" v-if="getLimitBuyWarn(item)">
									{{ getLimitBuyWarn(item) }}
								</view>
								<view style="text-align:right;">
									<view class="open-bx" >
										<i class="iconfont iconjian" @click.stop="delCurrent(item)" v-if="item.bigCount > 0 || item.smallCount > 0"></i>
										<text class="num" @click.stop="customUpdate(item)">
										<text v-if="item.bigCount > 0" style="font-weight:bold;color:#3385ff;">{{ item.bigCount }}</text>
										<text v-if="item.smallCount > 0"><text v-if="item.bigCount > 0">/</text>{{ item.smallCount }}</text>
										</text>
										<i class="iconfont iconzeng" @click.stop="addCurrent(item)"></i>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<wangCg :loginStyle.sync="globalLoginStyle" @loginSuccess="loginSuccess()"></wangCg>

	</view>
</template>

<script>
import { mapGetters } from 'vuex'
import AppTabs from "@/components/plugin/tabs";
import Commondity from "./components/subItem";
import wangCg from "@/components/wangCg";
import AppWrapperEmpty from "./components/app-wrapper-empty";
import GoodsCommondity from "@/components/item/module/app-goods-commodity";
import AppSearchModule from "@/components/item/module/app-search";
import FooterCart from "@/components/item/module/app-footer-cart";
import allMoreSelectInput from "@/components/item/module/allMoreSelectInput";
import AppActivilyCoupon from "@/components/item/module/app-activily-coupon";
import ModalModule from "@/components/item/plugin/modal";
import allMoreSelectInputMins from "@/mixins/allMoreSelectInput";
import productMins from "@/mixins/cgProduct";
import { COMMODITY_TYPE } from "@/utils/declare";
import { getInfo } from "@/api/shop";
import { getLimitBuyInfo } from "@/api/order";
export default {
	name: "item",
	components: {
		AppTabs,
		AppSearchModule,
		AppWrapperEmpty,
		Commondity,
		ModalModule,
		FooterCart,
		allMoreSelectInput,
		GoodsCommondity,
		wangCg,
		AppActivilyCoupon
	},
	props: {
		ghsShopAdminId:{
			type:Number,
			default: 0
		},
	},
	mixins: [productMins,allMoreSelectInputMins],
	data() {
		return {
			pageType: "cg",
			COMMODITY_TYPE,
			popupShow:false,
			isGhsProduct:true,
			isFocus: false,
			isModel: false,
			isSmallCount: false,
			customData: {
				bigCount: 0,
				smallCount: 0
			},
			showSubmitModel: false,
			hdShopAdminId:0,
			fromGhsId:0,
			myClass: 'fadeIn',
			shopId:0,
			infoData:{},
			xjData:{},
			xjDataInfo:{},
			shareDiscount:1,
			ghsId:0,
			newCustomGift:{xrFlAmount:0},
			isNewCustom:false,
			cartItemShow:false,
			limitBuyWarnList: [],
			shopName:'',
			shopImg:'',
			hdId:0,
			autoLoad:false
		};
	},
	onPullDownRefresh() {
		this.init().then(res => {
			uni.stopPullDownRefresh();
		});
	},
	computed: {
    	...mapGetters({ loginInfo:"getLoginInfo" })
	},
	watch: {
		loginInfo: {
			deep: true,
			handler: function(newVal) {
				if(!this.$util.isEmpty(newVal)){
					this.globalLoginStyle = 1
				}else{
					this.globalLoginStyle = 0
				}
			},
			immediate:true
		}
	},
  	onShareAppMessage(res) {
		return {
			title: '花材',
			desc: "",
			path: "pages/item/item?account="+this.option.account,
		}
	},
	onShow(){

		//登录状态
		if(!this.$util.isEmpty(this.loginInfo)){
			this.globalLoginStyle = 1
		}else{
			this.globalLoginStyle = 0
		}

		if(this.xjData.hasUpdate == 1){
			const list = this.selectList;
			this.customData = this.xjDataInfo
			if(this.xjData.cancel == 1){
				this.customData.bigCount = 0
				this.customData.smallCount = 0
				console.log('this.customData',this.customData)
				this.affirm({index:0})
			}else{
				//判断list有没有数据，没有需要初始化
				const list = this.selectList;
				let has = false
				for (let index = 0; index < list.length; index++) {
					const element = list[index];
					if (element.id == this.xjDataInfo.id && element.classId == this.xjDataInfo.classId) {
						has = true
					}
				}
				if(has == false){
					let params = { ...this.xjDataInfo, bigCount: null, smallCount: null, autoPrice: null, realityWeight: null, userPrice: null, }
					list.push(params);
					this.setSelectInfoByType({ type: this.pageType, info: list });
				}
				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 = (Number(this.xjData.stock) * Number(this.xjData.price)).toFixed(2)
				this.affirm({index:1})
			}
		}
		this.xjData = {}
	},
	methods: {
		showCartItem(){
			if(this.cartItemShow == true){
				this.cartItemShow = false
			}else{
				if(!this.$util.isEmpty(this.selectList)){
					if(this.cartItemShow == false){
						this.cartItemShow = true
					}
				}
			}
		},
		delMemory(){
			this.cartItemShow = false
			this.limitBuyWarnList = []
			this.removeMemory()
		},
		hideCartItem(){
			this.cartItemShow = false
		},
		getLimitBuyWarn(item) {
			const info = this.limitBuyWarnList.find(warnItem => warnItem.id == item.id)
			if (!info) {
				return ''
			}
			return `超出限购${info.currentBuyNum + info.exceedNum}份`
		},
		loginSuccess() {
			this.initData()
		},
		//去特殊品种页，如小菊等
		goToSpecialVariety(info){
			this.xjDataInfo = info
			if(info.stock <= 0){
				uni.showToast({title:"没有库存",icon:"none"})
			}else{
				this.$util.pageTo({url: "/pagesPurchase/xj",query: {stock:info.stock,price: info.price,ghsId:this.option.account}})
			}
		},
		showPopup() {
			this.popupShow = true;
		},
		hidePopup() {
			this.popupShow = false;
		},
		buyAlbum(){
			let account = this.option.account ? this.option.account : 0
			this.$util.pageTo({url: "/pages/home/mall?account="+account+'&hdId='+this.hdId,type:2})
		},
		buyHs(){
			let account = this.option.account ? this.option.account : 0
			this.$util.pageTo({url: "/pages/home/category?account="+account+'&hdId='+this.hdId,type:2})
		},
		showBigCover(item){
      		this.$util.pageTo({url: "/pages/item/detail?id="+item.id+"&account="+this.option.account+'&hdId='+this.hdId})
		},
		init(){
			this.init = false

			if(this.option.hdId && Number(this.option.hdId) > 0){
				this.hdId = this.option.hdId
			}

			const shopId = uni.getStorageSync('account')
			this.option.shopId = shopId
			getInfo({hdId:this.hdId}).then(res=>{
				if(res.code == 1){
					if(res.data.info && res.data.info.merchantName){
						let sjName = res.data.info.merchantName
						let shopName = res.data.info.shopName ? res.data.info.shopName : '首店'
						let name = shopName == '首店' ? sjName : sjName+' '+shopName
						this.shopName = name
						this.shopImg = res.data.info.avatar
					}
					if(res.data.hd && Number(res.data.hd.id) > 0){
						if(Number(this.hdId) == 0){
							this.hdId = res.data.hd.id
						}
					}

					//保存当前所在门店信息
					uni.setStorageSync('currentShop', res.data.info)
				}
			})
			this.initData()
		},
		scroll_detail(options){
			if(!uni.getStorageSync("resolve")){
				this.get_node_details(options)
			}
		},
		addCurrent(info){
			if(info.$orig){
				info = info.$orig
			}
			this.addEvent(info)
		},
		delCurrent(info){
			if(info.$orig){
				info = info.$orig
			}
			this.delEvent(info)
		},
		customUpdate(info){
			if(info.$orig){
				info = info.$orig
			}
			this.isModel = true;
			this.customData = info;
			this.$nextTick(()=>{
				this.customData.smallCount = this.customData.smallCount==0 ? null : this.customData.smallCount;
				this.customData.bigCount = this.customData.bigCount==0 ? null : this.customData.bigCount;
				this.isFocus = true;
			})
		},
		customNum(info) {
			this.isModel = true;
			this.customData = info;
			this.$nextTick(()=>{
				this.customData.smallCount = this.customData.smallCount==0 ? null : this.customData.smallCount;
				this.customData.bigCount = this.customData.bigCount==0 ? null : this.customData.bigCount;
				this.isFocus = true;
			})
		},
		goToCg() {
			this.$util.pageTo({ url: "/pagesClient/official/apply",query:{ghsShopAdminId:this.ghsShopAdminId,hdShopAdminId:this.hdShopAdminId,fromGhsId:this.fromGhsId},type:2})
		},
		// 拨打电话  wangn  2021-5-6
		toPhone(phone){
			uni.makePhoneCall({
				phoneNumber: phone
			});
		},
		modalCancel() {
			this.isModel = false;
			this.customData = {};
		}, // 取消 确认
		affirm(val) {
			this.isFocus = false;
			this.isFocusOne = false;
			this.$nextTick(()=>{
				//取消
				if (val.index === 0) {
					if(this.customData.bigCount>0 || this.customData.smallCount>0){
					}else{
						this.delAllEvent(this.customData)
					}
					this.modalCancel();
					return false
				}

				//二个都不是数值
				if(/(^[1-9]\d*$)/.test(this.customData.bigCount) == false && /(^[1-9]\d*$)/.test(this.customData.smallCount) == false){
					this.delAllEvent(this.customData)
					this.modalCancel();
					return;
				}

				if(/(^[1-9]\d*$)/.test(this.customData.bigCount)){
					if(this.customData.bigCount<=0){
						uni.showToast({title:"数量要大于0",icon:"none"})
						return;
					}
				}

				if(/(^[1-9]\d*$)/.test(this.customData.smallCount)){
					if(this.customData.smallCount<=0){
						uni.showToast({title:"数量要大于0",icon:"none"})
						return;
					}
				}

				const { bigCount,smallCount,bigNum,bigUnit,smallNum,smallUnit,ratio} = this.customData;
				const ratioNum = Number(ratio);
				//超过库存时 设置为库存最大值 1
				if (Number(bigCount) * ratioNum + Number(smallCount) > Number(bigNum) * ratioNum + Number(smallNum)) {
					uni.showToast({ title: '库存还剩'+bigNum, icon: "none" })
				} else {
					this.updateItemEvent(this.customData)
					this.modalCancel()
				}
			})
		},
		cancelEvent() {
			this.showSubmitModel = false;
		},
		submitEvent(val) {
			if (val.index === 0) {
				this.cancelEvent();
			} else {
				uni.navigateTo({
					url: "/admin/billing/affirm"
				});
				this.cancelEvent();
			}
		},
		confirmSelectGoodsEvent() {
			if (this.selectList.length > 0) {
				uni.navigateTo({
					url: "/admin/billing/affirmGoods"
				});
			} else {
				this.$msg("请选择花材");
			}
		},
		confirmSelectEvent() {
			if (this.selectList.length > 0) {
				//因历史遗留原因，打开花材页马上点花材出现数量0或null的情况，需要过滤 shish 20210716
				let selectList = this.selectList;
				let list = [];
				for (let i=0;i<selectList.length;i++){
					if(/(^[1-9]\d*$)/.test(selectList[i].bigCount) == false && /(^[1-9]\d*$)/.test(selectList[i].smallCount) == false){
						continue
					}
					list.push(selectList[i])
				}
				if(list.length <= 0){
					this.$msg("请选择花材")
					return
				}
				const ghsId = Number(this.option.account) || Number(uni.getStorageSync('account')) || 0
				if (!ghsId) {
					this.$msg("缺少店铺信息")
					return
				}
				let newList = list
					.filter(item => Number(item.limitBuy) > 0)
					.map(item => {
						return {
							id: item.id,
							bigCount: item.bigCount
						}
					})
				if (newList.length > 0) {
					getLimitBuyInfo({ ghsId, list: newList }).then(res => {
						const limitBuyInfo = Array.isArray(res.data) ? res.data : []
						const warnList = limitBuyInfo.filter(item => item.specialPrice === false && item.reachLimitBuyNum === true)
						if (warnList.length > 0) {
							this.limitBuyWarnList = warnList
							this.cartItemShow = true
							this.$msg("有花材超出限购")
							return
						}
						this.limitBuyWarnList = []
						this.setLimitBuyInfoByType({ type: this.pageType, info: limitBuyInfo });
					})
				} else {
					this.limitBuyWarnList = []
					this.setLimitBuyInfoByType({ type: this.pageType, info: [] });
				}
				this.setSelectInfoByType({ type: this.pageType, info: list });
				let account = this.option.account ? this.option.account : 0
				this.pageTo({url: '/pages/billing/affirmGhs?account='+account+'&hdId='+this.hdId,type:2})
			} else {
				this.$msg("请选择花材");
			}
		},
		change(e) {
			this.resetSelectInfoByType(this.pageType);
			this.resetLimitBuyInfoByType(this.pageType);
			if (this.tabIndex == e.index) {
				return false;
			} else {
				this.tabIndex = e.index;
			}
		},
		scanCode(){
			uni.scanCode({
				onlyFromCamera: false, // 可从相册识别
				scanType: ['barCode'],
				success: (res) => {
					const itemId = res.result

					let foundItem = null;
					for (let i = 0; i < this.productInfo.length; i++) {
						let classItem = this.productInfo[i];
						if (classItem.child) {
							for (let j = 0; j < classItem.child.length; j++) {
								let productItem = classItem.child[j];
								if (productItem.itemId == itemId) {
									foundItem = productItem;
									break;
								}
							}
						}
						if (foundItem) break;
					}

					if (foundItem) {
						const ratio = Number(foundItem.ratio);
						const selectItem = this.getSelectItemById(foundItem.id, foundItem.classId);
						const bigCount = selectItem ? (selectItem.bigCount || 0) : 0;
						const smallCount = selectItem ? (selectItem.smallCount || 0) : 0;

						if(foundItem.stock<=0){
							uni.showToast({title:'没有货了',icon:'none'})
							return
						}
						if (Number(bigCount) * ratio + Number(smallCount) > Number(foundItem.bigNum) * ratio + Number(foundItem.smallNum)) {
							this.$msg("库存只剩"+foundItem.bigNum);
							return
						}
						
						this.addEvent(foundItem);
						this.cartItemShow = true
					} else {
						this.$msg("未找到对应商品");
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.billing_box_bg {
	height: 100%;
	display: flex;
	flex-direction: column;
  .c_header{
    width: 100vw;
    padding: 0 15upx;
    box-sizing: border-box;
    background: linear-gradient(to bottom,#3385FF, #fff);

    &>.header_inside{
      position: relative;
      height: 124upx;
      margin-top: 15upx;
      background: #fff;
      box-shadow: 0upx 1px 21px 0upx rgba(161, 166, 173, 0.4);
      border-radius: 20upx;
      padding: 35upx 30upx 30upx 30upx;
      box-sizing: border-box;
      &>image{
        height: 60upx;
        width: 60upx;
        display: inline-block;
        border-radius: 10upx;
        background-color: #eee;
        vertical-align: top;
      }
      &>.shop_info{
        vertical-align: top;
        display: inline-block;
        height: 100%;
        margin-left: 20upx;
        &>.shop_title{
          margin-top:0upx;
          font-size:40upx;
          font-weight: 600;
          color: #060606;
		  width: 580upx;
		  overflow: hidden;
		  white-space: nowrap;

        }

      }

    }
  }
	.input-wrap {
		display: flex;
		padding: 22upx 20upx 22upx 30upx;
		align-items: center;
		.search-bar {
			flex: 1;
		}
	}

	.buy-flower-container {
		margin-left: 20upx;
		padding: 0;
		display: flex;
		gap: 10upx;
	}

	.buy-album-btn {
		position: relative;
		background: #e91e63;
		border: none;
		border-radius: 45upx;
		padding: 0;
		height: 80upx;
		min-width: 210upx;
		box-shadow: 0 8upx 20upx rgba(233, 30, 99, 0.3);
		overflow: hidden;

		&:active {
			box-shadow: 0 4upx 10upx rgba(233, 30, 99, 0.4);
		}
	}

	.buy-mall-btn {
		position: relative;
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
		border: none;
		padding: 0;
		height: 80upx;
		min-width: 180upx;
		box-shadow: 0 8upx 20upx rgba(165, 94, 234, 0.3);
		overflow: hidden;
		&:active {
			box-shadow: 0 4upx 10upx rgba(165, 94, 234, 0.4);
		}
	}

	.btn-content {
		display: flex;
		min-width: 130upx;
		align-items: center;
		justify-content: center;
		height: 100%;
		position: relative;
		z-index: 1;
		text-align: center;
		gap: 0;
	}



	.btn-text {
		color: white;
		font-size: 28upx;
		font-weight: bold;
		text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.2);
		text-align: center;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8upx;
	}

	.arrow-icon {
		width: 36upx;
		height: 32upx;
		margin-right: 16upx;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-shrink: 0;

		&::before {
			content: '';
			position: absolute;
			width: 30upx;
			height: 8upx;
			background: white;
			border-radius: 4upx;
		}

		&::after {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-left: 20upx solid white;
			border-top: 12upx solid transparent;
			border-bottom: 12upx solid transparent;
			right: -8upx;
		}
	}

	.sparkle-css {
		width: 16upx;
		height: 16upx;
		position: relative;
		animation: twinkle 1s infinite alternate;

		&::before {
			content: '';
			position: absolute;
			width: 2upx;
			height: 16upx;
			background: #fff;
			left: 7upx;
			top: 0;
			border-radius: 1upx;
		}

		&::after {
			content: '';
			position: absolute;
			width: 16upx;
			height: 2upx;
			background: #fff;
			top: 7upx;
			left: 0;
			border-radius: 1upx;
		}
	}





	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-6upx);
		}
		60% {
			transform: translateY(-3upx);
		}
	}

	@keyframes twinkle {
		0% {
			opacity: 0.5;
			transform: scale(0.8);
		}
		100% {
			opacity: 1;
			transform: scale(1.2);
		}
	}
	.scroll-middle_bx {
		flex: 1;
		display: flex;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}
	.tab-view {
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			color: transparent;
		}
		height: calc(100vh - 100upx);
		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 {
		height: 100%;
		flex: 1;
		box-sizing: border-box;
		padding-bottom:90upx;
	}
	.item_list_bx {
		padding: 40upx 16upx 20upx 16upx;
		&:last-child{
			margin-bottom:70upx;
		}
		.box{
			height: 185upx
		}
		.middle-box{
			height: 215upx;
			position:relative;
		}
		.big-box{
			height: 285upx
		}

	}
	.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: 480upx;
				height: 80upx;
				border: 1upx solid #dddddd;
				border-radius: 4upx;
				text-align: center;
				margin-left: 50upx;
				font-size: 40upx;
			}
		}
	}


  .fadeIn{
    height:160upx;
  }

}

.commodity-view {
	display: flex;
	flex-direction: column;
	.commodity-list {
		overflow:scroll;
		height:60vh;
		padding: 20upx;
		.commodity-item {
			display: flex;
			margin-bottom: 20upx;
			.item-icon {
				flex-shrink: 0;
				width: 140upx;
				height: 140upx;
			}
			.item-info {
				display: flex;
				flex-direction: column;
				justify-content: center;
				flex: 1;
				margin-left: 20upx;
				position: relative;
				.info-line {
					margin-bottom: 20upx;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					.item-name {
						color: #333333;
						font-size: 30upx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						width:400upx;
					}
					.item-price {
						color: #333;
						font-size: 22upx;
						.price {
							font-size: 32upx;
							font-weight: bold;
						}
					}

				}

				.limit-buy-tip {
					position: absolute;
					left: 0;
					top: 86upx;
					color: red;
					font-size: 24upx;
					text-align: left;
				}


	.open-bx {
		align-items: center;
		& .iconfont {
			color: #3385ff;
			font-size: 60upx;
		}


		& > .num {
			display: inline-block;
			width: 130upx;
			height:55upx;
			line-height:55upx;
			text-align:center;
			margin: 0 8upx;
			color: #868686;
			border-radius: 22upx;
			background-color: #f5f5f5;
			font-size: 28upx;
		}

	}

			}
		}
	}
	.summary-bar {
		padding: 0 20upx;
		height: 90upx;
		display: flex;

		align-items: center;
		justify-content: space-between;
		border-top: 1px solid #eeeeee;

		.describe-view {
			display: flex;

			align-items: center;
			color: #333;
			font-size: 24upx;
			.price {
				font-weight: bold;
				font-size: 36upx;
			}
		}
	}
}

</style>