zc_saas_h5/components/shopping/goodsInputItem.vue

<template>
	<view>
		<view v-if="detail.templateType!=null">
			<u-line color="#D6D6DB" />
			<view v-if="detail.templateType=='class'" style="display: flex;justify-content: space-between;align-items: center;height: 50rpx;" @click="openPopup(0)">
				<view style="color: #666666;font-size: 24rpx;">{{gradeIndex<0?'选择班级':gradeList[gradeIndex].className}}</view>
				<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
			</view>
			<view v-if="detail.templateType=='apply'"  style="display: flex;justify-content: space-between;align-items: center;height: 50rpx;" @click="openPopup(1)">
				<view style="color: #666666;font-size: 24rpx;" >{{gradeIndex<0?'报考地区':gradeList[gradeIndex].className}}</view>
				<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom"border-radius="40">
			<view class="popup_box">
				<view style="margin-bottom: 20rpx;">
					<view class="line1"></view>
					<view class="grade">选择班级</view>
				</view>
				<u-line color="#D6D6DB" />
				<view>
					<scroll-view scroll-y="true" style="height: 500rpx;">
						<view>
							<u-radio-group v-model="gradeValue" @change="radioGroupChange">
								<view v-for="(item, index) in gradeList" :key="index" >
									<view style="display: flex;align-items: center;padding: 20rpx;">
										<view>
											<u-radio
												shape="circle"
												:name="index"
											></u-radio>
										</view>
										<view :class="item.checked?'white-box blue-box':'white-box'" >
											<view>
												<view class="blackTxt">{{item.className}}</view>
												<view class="redTxt" v-if="item.classEndTime">有效期至：{{$method.timestampToTime(item.classEndTime)}}</view>
												<view class="redTxt" v-if="item.classEndTime">本班还剩{{$method.GetRTime(item.classEndTime)}}天将结束学习</view>
											</view>
										</view>
									</view>
								</view>
							</u-radio-group>
						</view>
					</scroll-view>
				</view>
				<view class="confrim-btn">
					<view class="okBtn" @click="okPopup(0)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show1" mode="bottom"border-radius="40">
			<view class="popup_box">
				<view style="margin-bottom: 20rpx;">
					<view class="line1"></view>
					<view class="grade">选择考期/地区</view>
				</view>
				<u-line color="#D6D6DB" />
				<view style="display: flex;height: 500rpx;">
					<view style="width: 50%;">
						<view class="topTxt">考期</view>
						<view>
							<picker-view  :indicator-style="indicatorStyle" :value="value" @change="bindChangeE" class="picker-view">
								<picker-view-column>
									<view class="picker-item" v-for="(item,index) in examine" :key="index">{{item.examineName}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
					<view style="width: 50%;">
						<view class="topTxt">地区</view>
						<view>
							<picker-view  :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
								<picker-view-column>
									<view class="picker-item" v-for="(item,index) in provinceList" :key="index">{{item.areaName}}</view>
								</picker-view-column>
								<picker-view-column>
									<view class="picker-item" v-for="(item,index) in cityList" :key="index">{{item.areaName}}</view>
								</picker-view-column>
							</picker-view>
						</view>
					</view>
				</view>
				<view class="confrim-btn">
					<view class="okBtn" @click="okPopup(1)">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	name: 'goodsInputItem',
	props: {
		detail: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			gradeValue:-1,
			gradeIndex:-1,
			show:false,
			show1:false,
			indicatorStyle: `height: 50px;`,
			gradeList:[],
			provinceList:[],
			cityList:[],
			pAreaIndex:0,
			cAreaIndex:0,
			examine:[],
			eAreaIndex:0,
			applyObj:{
				applyAreasJson:null,
				examDateJson:null
			}
	
		};
	},
	onLoad() {},
	created() {
		
	},
	mounted() {
		
	},
	methods: {
		openPopup(index){
			if(index==0){
				this.show = true
				this.goodsGradeList()
			}else{
				this.show1 = true
				this.getProvinceList()
			}
			
		},
		okPopup(index){
			if(index==0){
				if(!this.checkData()){
					return
				}
				this.gradeIndex = this.gradeValue
				this.show = false
			}else{
				let examDate = 
				this.show1 = false
			}
		},
		checkData(){
			if(this.detail.templateType=='class'){
				if(this.gradeValue<0){
					uni.showModal({
						title: "提示",
						content: '请选择班级',
						showCancel: false
					})
					return false
				}
			}
			else if(this.detail.templateType=='apply'){
				if(!this.applyObj.applyAreasJson){
					uni.showModal({
						title: "提示",
						content: '请选择报考地区',
						showCancel: false
					})
					return false
				}
				if(!this.applyObj.examDateJson){
					uni.showModal({
						title: "提示",
						content: '请选择考期',
						showCancel: false
					})
					return false
				}
			}
			return true;
		},
		bindChangeE(e){
			console.log(e.detail.value)
		},
		bindChange(e) {
			const val = e.detail.value
			if(this.pAreaIndex!=e.detail.value[0]){
				this.pAreaIndex = e.detail.value[0]
				this.getCityList(this.provinceList[this.pAreaIndex].areaId)
			}
			if(this.cAreaIndex!=e.detail.value[1]){
				this.cAreaIndex = e.detail.value[1]
			}
			
		},
		getExamine(id) {
			let self = this
			this.$api.getExamine({projectId:id}).then(res => {
				if(res.data.code==200){
					self.examine = res.data.rows
				}
			});
		},
		getCityList(id) {
			let self = this
			this.$api.getCityList({parentId:id}).then(res => {
				if(res.data.code==200){
					self.cityList = res.data.rows
				}
			});
		},
		getProvinceList() {
			let self = this
			if(self.provinceList.length>0){
				return
			}
			this.$api.getProvinceList().then(res => {
				if(res.data.code==200){
					self.provinceList = res.data.rows
					if(self.provinceList.length>0){
						self.getCityList(self.provinceList[0].areaId)
					}
					
				}
			});
		},
	},computed: { ...mapGetters([]) },
};
</script>

<style scoped>
	.icon_up{
		width: 24rpx;
		height: 24rpx;
	}
.title{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666666;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis; 
}
</style>