h5-elab-open-ownerUnion/components/subComponents/dmSureSubmitPicker.vue

<template>
	<dm-pop-view ref='popView' :title="title" :isShowClose="false" :isShowConfirm="false" :maskTapHide='maskTapHide'>
		<view class="content" :style="`height: ${showType==4? '720rpx': '526rpx'}`">
			<view class="typeA-content" v-if="showType == 1">
				<view class="btnA" :style="`background-color: ${themeColor}`" @click="sureAction">提交</view>
				
				<view class="btnB" @click="cancelAction">不提交</view>
			</view>
			
			<view class="typeB-content" v-if="showType == 2">
				<view class="typeB-top">
					<view class="typeB-top-btn" v-for="(item, index) in updataList" :key="index" @click="updataAction(index)">
						<view class="circle" :style="`border: 20rpx solid ${themeColor};`" v-if="item.isSelect"></view>
						<view class="circle" style="background-color: #F1F5F9;" v-else></view>
						<view class="name">
							{{item.title}}
						</view>
					</view>
					
				</view>
				
				<view class="btnA" :style="`background-color: ${themeColor}; margin-top: 70rpx`" @click="sureUpdataAction">确定</view>
				
			</view>
			
			<view class="typeC-content" v-if="showType == 3">
				
				<view class="typeC-title">等级说明</view>
				<view class="typeC-list">
					<view class="typeC-Detail">
						<view class="top-left" :style="`color: ${fuzhuColor}`">{{showLevel}}</view>
						<view class="top-left-des">意向等级</view>
					</view>
					
					<view class="typeC-Detail">
						<view class="top-left" style="color: #666666">{{ypkScoreLevel || '-'}}</view>
						<view class="top-left-des">意向等级</view>
					</view>
				</view>
				
				<view class="btnA" :style="`background-color: ${themeColor}; margin-top: 50rpx`" @click="knowAction">知道了</view>
			</view>
			
			<view class="typeD-content" v-if="showType == 4">
				
				<view class="top-level" :style="`color: ${fuzhuColor}`">{{showScore}}</view>
				<view class="top-des">把控值</view>
				<view class="level-des">分值说明</view>
				
				<text class="score-des-text">
					{{type4Content}}
				</text>
				
				<view class="btnA" :style="`background-color: ${themeColor}; margin-top: 100rpx`" @click="knowAction">知道了</view>
			</view>
			
		</view>
	</dm-pop-view>
</template>

<script>
	import dmPopView from './dmPopView.vue'
	
	let app = getApp();
	export default {
		props: {
			maskTapHide: {
				type: Boolean,
				default: true
			},
			title: String,
			showType: {
				type: Number,
				default:() => {
					return 1
				}
			},
			type4Content: String,
			showLevel: String,
			showScore: String,
			ypkScoreLevel: String,
		},
		data() {
			return {
				themeColor: null,
				fuzhuColor: null,
				themeColor50: null,
				themeColor25: null,
				fuzhuColor50: null,
				updataList: [
					{title: '更新', isSelect: true},
					{title: '不更新', isSelect: false}
				],
				selectIdx: 0,
				
			}
		},
		mounted() {
			this.themeColor = app.globalData.themeColor
			this.themeColor50 = app.globalData.themeColor50
			this.themeColor25 = app.globalData.themeColor25
			this.fuzhuColor = app.globalData.fuzhuColor
			this.fuzhuColor50 = app.globalData.fuzhuColor50
			
		},
		methods: {
			show() {
				this.$refs.popView.show()
			},
			knowAction(){
				this.$refs.popView.hide()
				this.$refs.popView.hide()
			},
			sureAction() {
				this.$emit('submitPickerSure')
			},
			cancelAction() {
				this.$emit('submitPickerCancel')
				this.$refs.popView.hide()
			},
			updataAction(idx) {
				this.selectIdx = idx
				this.updataList.forEach((item, index) => {
					item.isSelect = index == idx ? true : false
				})
			},
			sureUpdataAction() {
				this.$emit('sureUpdataAction', this.selectIdx)
				this.$refs.popView.hide()
			},
			
		},
		components: {
			dmPopView
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 526rpx;
		font-family: Verdana;
		text-align: center;
		
		.typeA-content {
			width: 100%;	
		}
		
		.typeB-content {
			width: 100%;	
		}
		
		.typeC-content {
			width: 100%;
			.typeC-title {
				color: #333333;
				font-size: 28rpx;
			}
			.typeC-list {
				margin-top: 100rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
			}
			.typeC-Detail {
				width: 40%;
				
				.top-left {
					font-size: 92rpx;
					font-weight: bold;
					font-family: DIN Alternate;
					height: 106rpx;
					line-height: 106rpx;
				}
				
				.top-left-des {
					color: #606060;
					font-size: 20rpx;
				}
			}
		}
		
		.typeD-content {
			width: 100%;
			
			.top-level {
				font-size: 92rpx;
				font-weight: bold;
				font-family: DIN Alternate;
			}
			
			.top-des {
				color: #606060;
				font-size: 20rpx;
			}
			
			.level-des {
				color: #333333;
				font-size: 28rpx;
				margin-top: 60rpx;
			}
			
			
			.score-des-text {
				font-size: 28rpx;
				color: #333333;
			}
			
		}
		
		.typeB-top {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			margin-top: 198rpx;
			
			.typeB-top-btn {
				width: 100rpx;
				height: 100rpx;
				.circle {
					margin-left: 14rpx;
					width: 72rpx;
					height: 72rpx;
					border-radius: 36rpx;
					box-sizing: border-box;
				}
				
				.name {
					margin-top: 16rpx;
					font-size: 28rpx;
					color: #666666;
				}
			}
			
			
		}
		
		.btnA {
			width: 260rpx;
			height: 84rpx;
			border-radius: 42rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 84rpx;
			margin-left: 246rpx;
			margin-top: 30%;
		}
		
		.btnB {
			margin-top: 40rpx;
			width: 260rpx;
			height: 84rpx;
			border-radius: 42rpx;
			font-size: 32rpx;
			color: #666666;
			line-height: 84rpx;
			margin-left: 246rpx;
		}
		
	}
</style>