xmhjc-applet/pages/home/base/tabs-column.vue

<template>
	<view class="avw">
		<view style="position: relative;overflow: hidden;" class="height1">
			<v-tabs-column :height="tabheight" :tabs="tabs" :is-tabbar="false" position="left" active-color="#3296FA" inactive-color="#1F1F1F"
			 bg-color="rgb(247,247,247)" :newCurrent='current' active-bg-color="rgb(255,255,255)" v-model="current" padding="30rpx 20rpx" bold="bold"
			 @change="changeTab">
				<view :style="{backgroundColor:'white',height:tabheight,overflow:'scroll'}" class="p" v-for="(item,index) in list" :key="index" v-show="index==current">
					<view>
						<appitem ref="appitem" :curNowdata="curNowdata" :openType="openType" :current='current' :listdata="item"></appitem>
					</view>
				</view>
			</v-tabs-column>
		</view>
		<view v-if="openType == 'commodity'" class="btnbox">
            <view @click="getType()" class="btn">
                确定
            </view>
        </view>
	</view>
</template>

<script>
import appitem from './appitem.vue'
export default {
	props:{
		openType:{
			type: String,
			default: '',
		},
		tabsList:{
			type:Array,
			default:[]
		},
		tabsItem:{
			type:Array,
			default:[]
		},
		curNowdata:{
			type:Object
		}
	},
	watch:{
		tabsList:{
			immediate: true,
			handler(val) {
				if (val && val.length>0) {
					this.list = val
					let current = this.list.findIndex(v => {
						return v?.check == true
					})
					if (current > 0) {
						this.changeTab(current)
					}
				}
				
			}
    	},
		tabsItem:{
			immediate: true,
			handler(val) {
				this.tabs = val
			}
    	}
	},
data() {
return {
	list: [],
	current: 0,
	tabs: [],
	tabheight:"calc(100vh - 222rpx)"
}
},
components: {
appitem,
},
onLoad(e) {

},
onShow() {

},

methods: {
	changeTab(index) {
		console.log(index);
		this.current = index;

		let curNowdata = uni.getStorageSync('curNowdata')
		if (curNowdata&&curNowdata!='') {

			curNowdata = JSON.parse(curNowdata)
			curNowdata['curNowid'] = this.tabsList[index].id

			uni.setStorageSync('curNowdata',JSON.stringify(curNowdata) );
		}
		
	},
	getType(){
		//获取商品类型
		console.log(this.$refs.appitem[this.current]);
	},
}
}
</script>

<style lang="scss">
	.height1{
		height: calc(100% - 326rpx);
	}
	
	.avw {
		width: 100%;
		height: 100%;
		background-color: rgb(255, 255, 255);

		.headSearch {
			background-color: #FFFFFF;
			width: 100%;
		}
	}
	.btnbox{
		position: fixed;
		bottom: 20rpx;
		left:24rpx;
	}
	.btn{
		width: 702rpx;
		height: 80rpx;
		background: #46A6FF;
		border-radius: 64rpx 64rpx 64rpx 64rpx;
		opacity: 1;

		font-size: 28rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}

</style>