BiKing/components/contract-set/preference.vue

<template>
	<uni-popup ref="popupRef" type="bottom">
		<view class="popups-box">
			<view class="popups-title">
				偏好设置-合约设置
				<text class="close-icon iconfont" @click.stop="close()">&#xeca0;</text>
			</view>
			<view class="set-hint">
				<text class="iconfont">&#xe8ec;</text>
				<text>开启订单确认功能后，每次提交订单</text>
			</view>
			<view class="set-list">
				<view class="set-item">
					<text class="set-item-text">限价下单二次确认</text>
					<u-switch :size="40" v-model="value1" activeColor="#05C175"></u-switch>
				</view>
				<view class="set-item">
					<text class="set-item-text">市价下单二次确认</text>
					<u-switch :size="40" v-model="value2" activeColor="#05C175"></u-switch>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

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

		data() {
			return {
				contractTop: 0,
				value1:'',
				value2:''
			};
		},
		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>
	.popups-box {
		width: 100%;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;

		.popups-title {
			text-align: center;
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			position: relative;
			font-size: 32rpx;
			font-weight: bold;
			border-radius: 40rpx 40rpx 0 0;

			.close-icon {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

	}
	.set-hint{
		width: 100%;
		padding: 30rpx $pages-padding;
		font-size: 24rpx;
		color: $Theme-Color;
		display: flex;
		align-items: center;
		.iconfont{
			margin-right: 10rpx;
		}
	}
	// <view class="set-item">
	// 	<text class="set-item-text">限价下单二次确认</text>
	// 	<u-switch :size="$createElement(0)"></u-switch>
	// </view>
	.set-list{
		
			width: 100%;
			padding: 0 $pages-padding;
	}
	.set-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 0;
		// 
		.set-item-text{
			font-size: 28rpx;
		}
	}
</style>