lingrui-score/pages/home/home.vue

<template>
	<view class="tn-safe-area-inset-bottom">
		<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xl tn-margin">
			<view class="tn-flex justify-content-item">
				<view class="tn-bg-black tn-color-white tn-text-center"
					style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
					<text class="tn-icon-tag" style="font-size: 30rpx;"></text>
				</view>
				<view class="tn-text-lg tn-padding-right-xs tn-text-bold">
					<text>申请类型</text>
					<text style="color: #CC0033;margin-left: 5rpx;">*</text>
				</view>
			</view>
			<view @click="show = true" class="justify-content-item tn-text-df tn-color-grey">
				<text class="tn-padding-xs">{{thisType?thisType.name:'选择'}}</text>
				<text class="tn-icon-right"></text>
			</view>

		</view>
		<view class="tn-flex tn-flex-col-center" style="margin:0px 20px;color: #777777;">
			<div v-if="thisType">
				<text class="tn-icon-tip-fill"></text>
				<text style="margin-left: 10rpx;">{{thisType.desc}}</text>
			</div>
		</view>
		<tn-select v-model="show" mode="single" valueName="id" labelName="name" :list="typeList"
			@confirm="confirm"></tn-select>
		<view class="tn-flex tn-flex-row-between tn-flex-col-center  tn-margin">
			<view class="tn-flex justify-content-item">
				<view class="tn-bg-black tn-color-white tn-text-center"
					style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
					<text class="tn-icon-image" style="font-size: 30rpx;"></text>
				</view>
				<view class="tn-text-lg tn-padding-right-xs tn-text-bold">
					<text>图片上传</text>
					<text style="color: #CC0033;margin-left: 5rpx;">*</text>
				</view>
			</view>
		</view>
		<view class="tn-margin-left tn-padding-top-xs">
			<tn-image-upload-drag ref="imageUpload" :action="action" :width="236" :height="236" :fileList="fileList"
				:autoUpload="true" :maxCount="3" :showUploadList="true" :showProgress="false" name="file"
				:deleteable="true" :header="formData" :customBtn="false" @on-list-change="onListChange"
				:beforeUpload="beforeUpload" />
		</view>
		<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top tn-margin">
			<view class="tn-flex justify-content-item">
				<view class="tn-bg-black tn-color-white tn-text-center"
					style="border-radius: 100rpx;margin-right: 8rpx;width: 45rpx;height: 45rpx;line-height: 45rpx;">
					<text class="tn-icon-topics" style="font-size: 30rpx;"></text>
				</view>
				<view class="tn-text-lg tn-padding-right-xs tn-text-bold">
					<text>申请备注</text>
				</view>
			</view>
		</view>
		<view class="tn-margin tn-bg-gray--light tn-padding" style="border-radius: 10rpx;">
			<textarea v-model="desc" maxlength="500" placeholder="积分申请备注" placeholder-style="color:#AAAAAA"></textarea>
		</view>



		<!-- 悬浮按钮-->
		<view class="tn-flex tn-footerfixed">
			<view class="tn-flex-1 justify-content-item tn-margin-sm tn-text-center">
				<tn-button :disabled="disabled"  backgroundColor="#FFA726" padding="40rpx 0" width="60%" shadow fontBold @tap="submitDo">
					<text class="tn-color-white">提 交</text>
				</tn-button>
			</view>
		</view>
		<view class='tn-tabbar-height'></view>
	</view>
</template>

<script>
	import {
		scoreList,
		scoreAdd
	} from "@/utils/api";
	export default {
		data() {
			return {
				show: false,
				action: 'https://jf.hschool.com.cn/api/common/upload',
				formData: {
					Token: '',
				},
				desc: '',
				fileList: [],
				typeList: [],
				thisType: '',
				imgList:[],
				disabled:false
			}
		},
		mounted() {
			const user = uni.getStorageSync('user');
			this.formData.Token = user.token;
			this.getScoreList();
		},
		methods: {
			onListChange(lists) {
				console.log(lists);
				this.imgList=lists;
			},
			submitDo() {
				console.log(this.imgList);
				if(this.thisType==''){
					uni.showToast({
						title: '请选择申请类型！',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				if(this.imgList.length==0){
					uni.showToast({
						title: '请上传图片！',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.disabled=true;
				let mediaList = [];
				this.imgList.forEach(function(item, index) {
					mediaList.push(item.response.data.url);
				});
				var images = mediaList.join(",");
				scoreAdd({
						'score_event_id': this.thisType.id,
						'images': images,
						'desc': this.desc
					})
					.then(res => {
						console.log(res);
						if(res.code==1){
							uni.showToast({
								title: '提交成功！',
								icon: 'none',
								duration: 2000
							});
							this.desc='';
							this.thisType='';
							this.imgList=[];
							this.fileList=[];
							 this.$refs.imageUpload.clear();
						}else{
							this.disabled=false;
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
						//this.typeList = res.data.list;
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			getScoreList() {
				scoreList()
					.then(res => {
						console.log(res);
						this.typeList = res.data.list;
					})
					.catch(error => {
						uni.showToast({
							title: error,
							icon: 'none',
							duration: 2000
						});
					})
			},
			beforeUpload(e, list) {
				console.log(e);
			},
			confirm(d) {
				console.log(d);
				const result = this.typeList.find(item => item.id === d[0].value);
				this.thisType = result;
			},
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.template-index {
		max-height: 100vh;
	}

	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 底部tabbar假阴影 start*/
	.bg-tabbar-shadow {
		background-image: repeating-linear-gradient(to top, rgba(0, 0, 0, 0.1) 10rpx, #FFFFFF, #FFFFFF);
		position: fixed;
		bottom: 0;
		height: 450rpx;
		width: 100vw;
		z-index: -1;
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			margin-left: 30rpx;
			flex-basis: 5%;
		}

		&__search {
			flex-basis: 60%;
			width: 100%;
			height: 100%;

			&__box {
				width: 100%;
				height: 70%;
				padding: 10rpx 0;
				margin: 0 30rpx;
				border-radius: 60rpx 60rpx 0 60rpx;
				font-size: 24rpx;
			}

			&__icon {
				padding-right: 10rpx;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			&__text {
				// color: #AAAAAA;
			}
		}
	}

	.logo-image {
		width: 65rpx;
		height: 65rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 50%;
	}

	/* 自定义导航栏内容 end */


	/* 热门图片 start*/
	.image-tuniao1 {
		padding: 165rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-tuniao2 {
		padding: 75rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-tuniao3 {
		padding: 90rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	/* 胶囊banner*/
	.image-capsule {
		padding: 100rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-piccapsule {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 20rpx 20rpx 0 0;
	}

	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: transparent;

		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			font-size: 46rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			background-image: url(https://resource.tuniaokj.com/images/title_bg/title00.png);
			background-size: cover;
		}
	}

	/* 标题 end */

	/* 业务展示 start */
	.tn-info {

		&__container {
			margin-top: 10rpx;
			margin-bottom: 50rpx;
		}

		&__item {
			width: 47.7%;
			margin: 15rpx 0rpx 30rpx 0rpx;
			padding: 40rpx 30rpx;
			border-radius: 10rpx;


			position: relative;
			z-index: 1;

			&::after {
				content: " ";
				position: absolute;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				border-radius: inherit;
				opacity: 1;
				transform: scale(1, 1);
				background-size: 100% 100%;
				background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/2.png);
			}

			&__left {

				&--icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					font-size: 40rpx;
					margin-right: 20rpx;
					position: relative;
					z-index: 1;

					&::after {
						content: " ";
						position: absolute;
						z-index: -1;
						width: 100%;
						height: 100%;
						left: 0;
						bottom: 0;
						border-radius: inherit;
						opacity: 1;
						transform: scale(1, 1);
						background-size: 100% 100%;
						background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg5.png);
					}
				}

				&__content {
					font-size: 25rpx;

					&--data {
						color: rgba(255, 255, 255, 0.5);
						margin-top: 5rpx;
						// font-weight: bold;
					}
				}
			}

			&__right {
				&--icon {
					position: absolute;
					right: 0rpx;
					top: 50rpx;
					font-size: 100rpx;
					width: 108rpx;
					height: 108rpx;
					text-align: center;
					line-height: 60rpx;
					opacity: 0.15;
				}
			}

			&__bottom {
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.12);
				border-radius: 0 0 10rpx 10rpx;
				position: absolute;
				width: 85%;
				line-height: 15rpx;
				left: 50%;
				bottom: -15rpx;
				transform: translateX(-50%);
				z-index: -1;
				text-align: center;
			}
		}
	}

	.image-article {
		border-radius: 8rpx;
		width: 150rpx;
		height: 150rpx;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			padding: 0rpx 15rpx;
		}
	}
</style>