meishidaQS/pages/index/Jiedanset.vue

<template>
	<view>
		<customNav :shownav="true" :title="$t('user.jiedanshezhi')" tinColor="#006AFF" jiantou="0" titledetl=''></customNav>
		<view style="width: 94%;margin-left: 3%;">
			<view class="contentInRowS contentItem" @click="setjiedanmoshi">
				<text class="titleText">{{$t('shouye.dangqianjdms')}}</text>
				<view>
					<text class="titleText">{{$t('shouye.jindanms')}}</text>
					<image class="imageSize" src="/static/imags/youjian@3x.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="contentInRowS contentItem" @click="setjiedanL">
				<text class="titleText">{{$t('shouye.tongshijdl')}}</text>
				<view>
					<text class="titleText">{{jiedanL}}</text>
					<image class="imageSize" src="/static/imags/youjian@3x.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="contentItem" >
				<view class="contentInRowS" style="padding-top: 12rpx;">
					<text class="titleText">{{$t('shouye.paidanshez')}}</text>
				</view>
				<view class="contentInRowS" style="padding-top: 12rpx;">
					<text class="ditileText">{{$t('shouye.changzhuqy')}}</text>
					<view>
						<text class="ditileText">{{$t('shouye.qushezhi')}}</text>
						<image class="imageSize" src="/static/imags/youjian@3x.png" mode="scaleToFill"></image>
					</view>
				</view>
				
				<view class="contentInRowS" style="padding-top: 12rpx;">
					<view class="contentColumn">
						<text class="ditileText">{{$t('shouye.zhidongjpd')}}</text>
						<text class="noteText">{{$t('shouye.zhidongjpdN')}}</text>
					</view>
					<view>
						<switch checked @change="switch1Change" />
					</view>
				</view>
			</view>
		</view>
		<popViewGG :tips="$t('shouye.tongshijdl')" :show="showpop" :maskClosable="true" :isCancel="true" @chooseCancel="chooseCancel">
			<picker-view :indicator-style="indicatorStyle" :value="pvalue" @change="bindChange" class="picker-view">
			    <picker-view-column>
			        <view class="item" v-for="(item,index) in range" :key="index">{{item}}</view>
			    </picker-view-column>
			</picker-view>
		</popViewGG>
		<popViewGG :tips="$t('shouye.shezhijdms')" :show="showjsms" :maskClosable="true" :isCancel="true" @chooseCancel="chooseCancel">
			<view style="width: 100%;background-color: whitesmoke;">
				<view class="">
					<view class="jiedanCententV">
						<view class="contentInRowS" style="margin-top: 10rpx;margin-bottom: 10rpx;">
							<text class="moshiTitle">近单模式</text>
							<view class="contentInRowC">
								<text style="font-size: 28rpx;color: #006AFF;padding-right: 20rpx;">当前模式</text>
								<image class="imageIcon" src="/static/imags/tuoyuanx@2x.png" mode="scaleToFill"></image>
							</view>
						</view>
						<view class="contentColumn">
							<text class="moshinote">推单范围3公里</text>
							<text style="width: 100%;height: 4rpx;background-color: darkgray;"></text>
							<text class="moshideatle">优先展示近单，可系统派单，同时接6-8单</text>
						</view>
						
					</view>
				</view>
			</view>
		</popViewGG>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showpop:false,
				showjsms:false,
				indicatorStyle: `height: 50px;`,
				range: ["1","2","3","4","5","6"],
				jiedanL:1,
				pvalue: [0]
			}
		},
		methods: {
			switch1Change: function (e) {
				console.log('switch1 发生 change 事件，携带值为', e.detail.value)
			},
			setjiedanL(){
				this.showpop = true;
			},
			setjiedanmoshi(){
				this.showjsms = true;
			},
			bindChange (e) {
				if(this.showpop==true){
					var val = e.detail.value[0];
					this.jiedanL=this.range[val];
				}
				
				
			},
			chooseCancel(i){
				this.showpop=false;
				this.showjsms = false;
			},
		},
	}
</script>

<style lang="scss">
	@import '@/common/common.scss';
	
	page{
		background-color: #F0F0F2;
	}
	.contentItem{
		padding: 20rpx;
		margin-top: 20rpx;
		background-color: white;
	}
	.imageSize{
		width: 26rpx;
		height: 26rpx;
	}
	.imageIcon{
		width: 40rpx;
		height: 40rpx;
	}
	.titleText{
		font-size: 30rpx;
		font-weight: bold;
	}
	.ditileText{
		font-size: 28rpx;
	}
	.noteText{
		font-size: 22rpx;
		color: darkgray;
	}
	
.picker-view {
	width: 750rpx;
	height: 300rpx;
	margin-top: 10rpx;
}
.item {
	line-height: 90rpx;
	text-align: center;
}

.jiedanCententV{
	width: auto;
	background-color: white;
	box-shadow: 0rpx 0rpx 10rpx 0rpx lightgray;
	padding: 20rpx;
	margin: 30rpx;
	border-radius: 10rpx;
	
}

.moshiTitle{
	font-size: 32rpx;
	font-weight: bold;
}
.moshinote{
	font-size: 30rpx;
	padding-bottom: 10rpx;
}
.moshideatle{
	font-size: 26rpx;
	color: darkgray;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
}

</style>