ProAdvanced/components/slambb-picker/slambb-picker-item.vue

<template>
	<view class="padding-sm">
		<view class="flex justify-between" style="position: relative;height: 100%; width: 100%;">
			<picker-view class="mpvue-picker-view " :value="leftValue" :style="[{'--multiple': rightVisible ? 1 : 2}]"
			 :indicator-style="indicatorStyle" @change="bindChange('left',$event)">
				<picker-view-column>
					<view class="item" v-for="(item,index) in currentItemobj.pickerLeftList" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
			<picker-view class="mpvue-picker-view " :value="rightValue" :style="[{'--multiple': rightVisible ? 1 : 2}]" v-if="rightVisible"
			 :indicator-style="indicatorStyle" @change="bindChange('right',$event)">
				<picker-view-column>
					<view class="item" v-for="(item,index) in currentItemobj.pickerRightList" :key="index">.{{item}}
					</view>
				</picker-view-column>
			</picker-view>
			<view v-if="currentItemobj.pickerUnit" class="picker-unit text-sm text-purple" style="z-index: 10;">{{currentItemobj.pickerUnit}}</view>
		</view>
	</view>
</template>

<script>
	export default {

		props: {
			leftList: Array,
			rightList: Array,
			showUnit: {
				type: String,
				default: ""
			},
			itemObj: Object,
			bDouble: true
		},
		data() {
			let LIndex = 0;
			let RIndex = 0;
			if (this.bDouble) {
				// console.log(this.itemObj.defaultValue);
				if(this.itemObj.defaultValue){
					var valueArr = this.itemObj.defaultValue.toString().split(".");
					for (let i = 0; i < this.itemObj.pickerLeftList.length; i++) {
						if (valueArr[0] == this.itemObj.pickerLeftList[i]) {
							LIndex = i;
							break;
						}
					}
					for (let i = 0; i < this.itemObj.pickerRightList.length; i++) {
						if (valueArr[1] == this.itemObj.pickerRightList[i]) {
							RIndex = i;
							break;
						}
					}
				}
				
			} else {
				for (let i = 0; i < this.itemObj.pickerLeftList.length; i++) {
					if (this.itemObj.defaultValue == this.itemObj.pickerLeftList[i]) {
						LIndex = i;
						break;
					}
				}


			}
			this.$emit("bindChangeItem", this.itemObj.defaultValue,LIndex);
			return {
				leftValue: [LIndex],
				rightValue: [RIndex],
				oldLeftValue: this.itemObj.pickerLeftList[LIndex],
				oldRightValue: this.itemObj.pickerRightList[RIndex],
				visible: true,
				rightVisible: this.bDouble,
				// indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
				indicatorStyle: `height:40px;`,
				currentItemobj: this.itemObj
			}
		},
		watch: {
			bDouble(val) {
				// console.log('watch bDouble:', val);
				this.rightVisible = val;
			},
			itemObj(val) {
				// 重新赋值
				// console.log('watch itemObj:', val);
				this.currentItemobj = val;
			}
		},

		methods: {
			bindChange: function(direction, e) {
				const val = e.detail.value
				if (direction == "left") {
					this.oldLeftValue = this.itemObj.pickerLeftList[val[0]];
				} else {
					// console.log(this.itemObj.pickerRightList[val[0]]);
					this.oldRightValue = this.itemObj.pickerRightList[val[0]];
				}
				// console.log("==",this.oldLeftValue,"==",this.oldRightValue);
				if (this.rightVisible) {
					this.$emit("bindChangeItem", this.oldLeftValue + (this.oldRightValue / 10),val[0]);
				} else {
					this.$emit("bindChangeItem", this.oldLeftValue,val[0]);
				}
			},
		}
	}
</script>

<style>
	/* picker */
	.mpvue-picker-view {
		width: calc(50% * var(--multiple) - 5px);
		height: calc(300px / var(--multiple));
		border-radius: 20px;
	}

	.item {
		text-align: center;
		width: calc(100% - 0px);
		background-color: rgba(255, 255, 255, 1);
		height: 88upx;
		line-height: 88upx;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 40upx;
		/* border-radius: 5px; */
		/* margin-top: 5px; */

	}

	.picker-unit {
		position: absolute;
		top: 0;
		right: 30rpx;
		/* left: 0; */
		bottom: 0;
		margin: auto;
		display: flex;
		align-items: center;
	}
</style>