BiKing/components/contract-set/contract-set.vue

<template>
	<uni-popup ref="popupRef" type="top">
		<view class="set-box" :style="{'top':contractTop + 'px'}">
			<view class="set-foot"></view>
			<view class="set-item" @click.stop="setInfo(1)">
				<text class="set-item-icon iconfont">&#xe629;</text>
				<text class="">偏好设置</text>
			</view>
			<view class="set-item" @click.stop="setInfo(2)">
				<text class="set-item-icon iconfont">&#xe6c1;</text>
				<text class="">合约计算器</text>
			</view>
		</view>

	</uni-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "contract-set",

		data() {
			return {
				contractTop: 0
			};
		},
		computed: {
			...mapGetters([
				"navBarHeight"
			])
		},
		watch: {
			navBarHeight: {
				handler(newH) {
					this.contractTop = newH + uni.upx2px(78)
				},
				immediate: true
			}
		},
		mounted() {
			// this.$refs.popupRef.open()
			// this.open()
		},
		methods: {
			open(val) {
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			},
			close() {
				this.$refs.popupRef.close()
			},
			setInfo(type) {
				this.close();
				this.$emit('confirm', type)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.set-box {
		min-width: 200rpx;
		background-color: #fff;
		position: absolute;
		right: 0;
		border-radius: 10rpx;
		padding-top: 20rpx;
		.set-foot {
			width: 0px;
			height: 0px;
			border: 12rpx solid transparent;
			border-top-color: #fff;
			transform: rotate(180deg);
			position: absolute;
			right: 20rpx;
			top: -20rpx;
		}

		// <view class="set-item">
		// 	<text class="set-item-icon iconfont">&#xe629;</text>
		// 	<text class="iconfont">偏好设置</text>
		// </view>
		.set-item {
			display: flex;
			padding: 20rpx;
			display: flex;
			align-items: center;
			font-size: 26rpx;
			&:nth-child(n - 1){
				border-bottom: 1rpx solid $border-color2;
			}
			.set-item-icon {
				font-size: 30rpx;
				margin-right: 16rpx;
			}
		}

	}
</style>