uniapp drop-down box

<template>
	<view style="flex-direction: column;display: flex;justify-items: center;">
		<view
			style="position: fixed;width: 100%;height: 100%;background-color:#808080;opacity: 0.5;display: flex;justify-content: center;align-items: center;z-index: 999;"
			v-if="hastoken==false">
			<button @click="getCode" type="default"
				style="height: 80rpx;display: flex;align-items: center;justify-content: center;margin-top: 100upx;">
				<label style="opacity: 1;font-size: 35rpx;">
					{
   
   {btnTxt}}
				</label>
			</button>
		</view>
		<view style="flex-direction: row;display: flex;margin-top: 20rpx;">
			<view style="margin-left: 20rpx;"><text style="font-size: 45rpx;color: #808080;">选择课件：</text></view>
			<view>
			<picker style="width: 100%" @change="bindPickerChange" :value="index" :range="courseTypeList"
				:range-key="'name'">
				<view style="background-color: #FFFFFF;height: 60rpx;"><text
						style="font-size: 45rpx;color: #808080;">{
   
   {index==-1?'--请选择--':courseTypeList[index].name}}</text>
				</view>
			</picker>
			</view>
		</view>
		<view style="flex-direction:row;display: flex;margin-top: 20rpx;text-align: center;">
			<view style="width: 50%;"><image style="width: 300rpx;height:250rpx;" src="../../../static/news-2.jpg"></image></view>
		    <view style="width: 50%;"><image style="width: 300rpx;height:250rpx;" src="../../../static/news-3.jpg"></image></view>
				
		</view>
	
	
		<view style="flex-direction: column;display: flex;justify-items: center;text-align: center;font-size: 45rpx;"
		 v-for="(item, planIndex) in teachingPlanBuildList" :key="planIndex">
			<view style="margin-top: 20rpx;" @click="SearchPdf(item.domain+item.webPath)">
				<text style="font-size: 45rpx;">{
   
   {item.name}}</text>
				<text v-if="planIndex < 5" style="font-size: 35rpx;color: #808080;">[点击查看]</text>
				<text v-if="planIndex >= 5" style="font-size: 35rpx;color: #808080;">[会员专属]</text>
<!-- <image style="width: 40rpx;height:35rpx;" src="../../../static/shou.jpg"></image> -->
			</view>
		</view>

	</view>
	<!-- <navigator url="/pages/user/login/login">
      <button type="primary">登录</button>
    </navigator>
    <navigator url="/pages/user/register/register">
      <button type="primary">注册</button>
    </navigator>
    <navigator url="/pages/user/forgot/forgot">
      <button type="primary">忘记密码</button>
    </navigator>
    <navigator url="/pages/user/modify/modify">
      <button type="primary">修改密码</button>
    </navigator>
    <navigator url="/pages/user/info/info">
      <button type="primary">信息设置</button>
    </navigator> -->
	</view>
</template>

<script>
	import config from '@/common/config.js'
	export default {
		data() {
			return {
				index: -1,
				courseTypeList: [],
				teachingPlanBuildList: [],
				CourseTypeId: '',
				hastoken: false,
				btnTxt: '授权登录'
			}
		},
		mounted() {},
		created() {
			this.initData();
		},
		onTabItemTap(options) {

			this.initData();
		},
		onLoad(option) {

		},
		methods: {
			SearchPdf(weburl){
				// uni.showToast({
				// 	title:weburl,
				// 	duration:2000
				// })
				
				uni.redirectTo({
					url:'/pages/pdf/pdfview?url='+weburl
					// url: '/pages/pdf/pdfview?url=' + JSON.stringify(weburl)
				})
			},
			bindPickerChange(e) {
				// console.log('picker发送选择改变，携带值为', this.provinceList[e.detail.value]province_NAME);
				this.index = e.target.value;

				let course_name = this.courseTypeList[e.detail.value].name;
				this.CourseTypeId = this.courseTypeList[e.detail.value].id;
				// for (var p in this.provinceList) { //遍历json数组时，这么写p为索引，0,1


				// 	if (course_name == this.courseTypeList[p].name) {
				// 		this.addressData.provinceid = this.provinceList[p].province_ID;
				// 		this.PROVINCE_CODE = this.provinceList[p].province_CODE;
				// 		console.log(this.provinceList[p].province_ID + " :" + this.provinceList[p].province_NAME);
				// 	}
				// }
				this.GetTeachingPlanBuild()

			},
			GetCourseType() {
				var that = this
				uni.request({
					url: config.baseurl + "/API/GetCourseType",
					method: 'POST',
					dataType: 'json',
					data: {

					},
					headers: {
						'Content-Type': "application/json;charset=utf-8"
					},
					success: (res) => {
						try {

							that.courseTypeList = res.data.courseTypeList
							if(that.courseTypeList.length > 0){
								that.index = 0
								that.CourseTypeId = that.courseTypeList[that.index].id
								that.GetTeachingPlanBuild()
							}
							
						} catch (e) {



						}

					},
				})
			},
			GetTeachingPlanBuild() {
				var that = this
				if(that.CourseTypeId == '')
				{
					return
				}
				uni.showLoading({
					title: '加载中......'
				});
				uni.request({
					url: config.baseurl + "/API/GetTeachingPlanBuild",
					method: 'POST',
					dataType: 'json',
					data: {
						CourseTypeId: that.CourseTypeId
					},
					headers: {
						'Content-Type': "application/json;charset=utf-8"
					},
					success: (res) => {
						try {

							that.teachingPlanBuildList = res.data.teachingPlanBuildList
						} catch (e) {


							uni.hideLoading()
						}

					},
				})
				uni.hideLoading()
			},
			getCode() { // 非静默授权，第一次有弹框

				var return_url = config.request_code_url // 获取页面url
				var appid = config.appid
				this.code = this.getUrlCode() // 截取codeurlEncode
				var request_url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' +
					return_url + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect';
				//alert(request_url)
				if (JSON.stringify(this.code) == "{}") { // 如果没有code，则去请求

					window.location.href = request_url


				} else {
					//  alert('跳转登录页面'+JSON.stringify(this.code))
					uni.redirectTo({
						url: '/pages/user/login?code=' + JSON.stringify(this.code)
					})
				}
			},
			getUrlCode() { // 截取url中的code方法
				var url = location.search
				var theRequest = new Object()
				if (url.indexOf("?") != -1) {
					var str = url.substr(1)
					var strs = str.split("&");
					for (var i = 0; i < strs.length; i++) {
						theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
					}
				}
				return theRequest
			},
			initData() {
				var that = this
				this.GetCourseType()
				this.code = this.getUrlCode().code // 截取codeurlEncode
				if (typeof this.code != 'undefined') {
					uni.redirectTo({
						url: '/pages/user/login/login?code=' + JSON.stringify(this.code)
					})
				}
				// alert(this.code)
				this.btnTxt = '授权登录'
				var openID = uni.getStorageSync('openID');
				if (openID != '') {
					this.hastoken = true;

				} else {
					this.hastoken = false
					// this.getCode()
				}

			},


		}
	}
</script>

<style>
	button {
		margin-top: 40upx;
	}
</style>