weapp-v1/pages/upload/upload.vue

<template>
	<view class="upload">
		<custom-nav :title="pageTitle"></custom-nav>
		<custom-toast ref="toast"></custom-toast>

		<view v-if="loading" class="loading">
			<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/loading.png" mode=""></image>
			<image class="rotate" src="../../static/icon/loadingcenter.png" mode=""></image>
			<text>{{ progress }}%</text>
			<view>{{ loadingText }}</view>
		</view>

		<view class="success" v-if="gotScore" :class="gotScore ? 'showbg' : ''">
			<view class="success_con">
				<view class="userinfo">
					<image :src="avatarUrl" class="photo"></image>
					<view class="nickname">“{{ nickname }}”</view>
				</view>
				<!-- <image src="https://api.jiuweiyun.cn/public/uploads/icon/bingo.gif" mode="widthFix" class="level_score_bg"></image> -->
				<image src="https://api.jiuweiyun.cn/public/uploads/icon/gold_new.gif" mode="widthFix" class="level_score_bg"></image>
				<view class="upload_success_box">
					<!-- <view class="level_score">恭喜获得{{ gotScore }}学分{{ riseNumber > 0 ? `,上升${riseNumber}名` : '' }}</view> -->
					<view class="level_score">恭喜获得{{ gotScore }}学分{{ riseNumber > 0 ? `,上升${riseNumber}名` : '' }}</view>
					<view class="goon_box">
						<view class="goon" @tap="goon">继续获得</view>
						<view class="goon save" @tap="toRank">查看排行榜</view>
					</view>
				</view>
			</view>
		</view>

		<view v-if="repair" class="repair">
			<image src="https://api.jiuweiyun.cn/public/uploads/weapp/icon/repair.png" mode=""></image>
			<view class="text">
				预计维护时间至 {{ userServerInfo.repair_end | getYear }} 年 {{ userServerInfo.repair_end | getMonth }} 月 {{ userServerInfo.repair_end | getDate }} 日
				{{ userServerInfo.repair_end | getHousr }} 时 {{ userServerInfo.repair_end | getMinute }} 分结束
			</view>
		</view>
		<view v-else class="content">
			<view class="header" style="margin-top: 10rpx;">
				<view class="header_con">
					<view>
						<text>请填写零售数量</text>
						<text class="small">（单位：套)</text>
					</view>
					<!-- <view class="how" @click="skipHow">如何操作</view> -->
				</view>
			</view>
			<view class="top">
				<view v-for="(item, i) in formList" :key="i" class="upload_item_parent">
					<view  class="upload_item col_inp">
						<view>{{ item.name }}：</view>
						<view class="input" style="color: #333;">
							<input type="number" placeholder="请输入零售数量" v-model="item.input"
								placeholder-style="color:#999;font-weight:normal;font-size:28rpx;">
						</view>
					</view>
				</view>
				<view class="upload_item_parent">
					<view  class="upload_item col_inp">
						<view>零售总额：</view>
						<view class="input">
							<text style="color: #FB231F;">¥</text>
							<input type="number" placeholder="请输入零售总额" v-model="money" @input="handleInput"
								@focus="money===0?money='':''"
								placeholder-style="color:#999;font-weight:normal;font-size:28rpx;">
						</view>
					</view>
				</view>
			</view>
			<view class="header">请上传收款截图</view>
			<view class="bot">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img choose" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
						<image :src="imgList[index]" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
					</view>
					<view class="choose" @tap="ChooseImage" v-if="imgList.length === 0">
						<view class="upload_img" />
						<text>点击添加图片,只能上传一张</text>
					</view>
				</view>
			</view>
			<view class="submit" v-if="!gotScore" @tap="$noMultipleClicks(upload)">提交</view>
			<!-- <view class="howupload" @tap="tohowupload">如何上传 <text class="cuIcon-question"></text></view>
			<view class="example" @tap="previewExample">
				<image src="../../static/icon/example.png" mode="aspectFit"></image>
			</view> -->

			<view class="poster" v-if="posterShow">
				<view class="poster_con flexCC">
					<image src="../../static/icon/close.png" @click="posterShow = false" class="close"></image>
					<view class="canvas">
						<canvas canvas-id="canvas" id="canvas"></canvas>
						<image :src="poster" @longpress="saveImg"></image>
					</view>
					<view class="save_img">长按图片保存</view>
				</view>
			</view>
		</view>
		<canvas canvas-id= "canvas"></canvas>
	</view>
</template>

<script>
import { api_upload, UploadNew } from '../../api.js';
import UploadNum from '../../components/upload-num.vue';
import { mapState } from 'vuex';
export default {
	components: {
		UploadNum
	},
	data() {
		return {
			pageTitle: '图片上传',
			noClick:true,
			// input1: 0,
			// input2: 0,
			// input3: 0,
			// input4: 0,
			formList: [
				{
					name: '精装版',
					input: '',
				},
				{
					name: '简约版',
					input: '',
				},
				{
					name: '高腰版',
					input: '',
				},
				{
					name: '纯棉版',
					input: '',
				},
				
				{
					name: '青春版',
					input: '',
				},
				
			],
			imgList: [],
			gotScore: 0, //获得分数
			moveIndex: 0,
			loading: false,
			progress: 0,
			loadingText: '',
			riseNumber: 0, //上升名次
			money: '',
			sizeToggle: {
				input1: false,
				input2: false,
				input3: false,
				input4: false,
				input5: false
			},
			sizeType: {
				input1: [['', '', 0]],
				input2: [['', '', 0]],
				input3: [['', '', 0]],
				input4: [['', '', 0]],
				input5: [['', '', 0]]
			},
			posterShow: false, //是否显示海报
			poster: '', //海报图片
			canvasWidth: '',
			canvasHeight: '',
			photo: '', //海报头像
			nickname: '', //用户昵称
			avatarUrl: '', //用户头像
			timer: null //出现分享弹窗定时器
		};
	},
	filters: {
		sizeName(key) {
			let out;
			switch (key) {
				case 'input1':
					out = '精装版';
					break;
				case 'input2':
					out = '简约版';
					break;
				case 'input3':
					out = '高腰版';
					break;
				case 'input4':
					out = '纯棉版';
					break;
				case 'input5':
					out = '青春版';
					break;
			}
			return out;
		},
		sizeNum(arr) {
			let a1 = arr.map(item => item[2]);
			let a = Array.prototype.concat.apply([], a1);
			return a.reduce((a, b) => Number(a) + Number(b), 0);
		}
	},
	computed: {
		...mapState(['userWeixinInfo']),
		userServerInfo() {
			return this.$store.state.userServerInfo;
		},
		repair() {
			return +new Date() / 1000 > this.userServerInfo.repair_start && +new Date() / 1000 < this.userServerInfo.repair_end;
		}
	},
	onLoad() {
		const that = this;
		wx.getSystemInfo({
			success: res => {
				that.model = res.model;
				that.canvasWidth = res.windowWidth / 375;
				that.canvasHeight = res.windowHeight;
			}
		});
		//测试海报
		// let _this = this;
		// let nickname = _this.userWeixinInfo.nickName;
		// _this.nickname = nickname.length > 8 ? nickname.slice(0, 8) : nickname;
		// _this.avatarUrl = _this.userWeixinInfo.avatarUrl;
		// _this.gotScore = 100;
		// _this.riseNumber = 15;
		// _this.getPoster();
		// _this.posterShow = true;
	},
	beforeDestroy() {
		clearInterval(this.timer);
	},
	methods: {
		//获取海报头像和背景
		getPoster() {
			let _this = this;
			uni.downloadFile({
				url: _this.avatarUrl,
				success: ({ statusCode, tempFilePath }) => {
					if (statusCode === 200) {
						this.photo = tempFilePath;
					}
				},
				fail: e => {
					uni.showModal({
						content: JSON.stringify(e),
						showCancel: false
					});
				},
				complete: () => {
					uni.getImageInfo({
						src: 'https://api.jiuweiyun.cn/public/uploads/icon/poster_new.png',
						// src: 'https://api.jiuweiyun.cn/public/uploads/icon/poster_new_one.png',
						success: res => {
							this.drawPoster(res.path);
						},
						fail: err => {
							uni.showModal({
								content: '获取背景图失败',
								showCancel: false,
								success: res => {
									if (res.confirm) {
										this.getPoster();
									}
								}
							});
						}
					});
				}
			});
		},
		///绘制海报
		drawPoster(posterBg) {
			let _this = this;
			uni.showLoading({
				title: '图片加载中...'
			});
			let ctx = uni.createCanvasContext('canvas');
			let rpx = _this.canvasWidth;
			ctx.drawImage(posterBg, 0, 0, 270 * rpx, 450 * rpx);

			ctx.font = 'italic bold 28px Microsoft YaHei';
			ctx.setFillStyle('#fff');
			ctx.textAlign = 'center';
			ctx.fillText(_this.gotScore, uni.upx2px(250), uni.upx2px(432));
			// ctx.fillText(_this.gotScore, uni.upx2px(195), uni.upx2px(450));

			ctx.font = 'italic bold 18px 微软雅黑';
			ctx.setFillStyle('#fff');
			ctx.textAlign = 'center';
			ctx.fillText(_this.riseNumber, uni.upx2px(270), uni.upx2px(467));

			ctx.beginPath(); //开始一个新的路径
			ctx.setLineWidth(2); //设置线条的宽度
			ctx.setStrokeStyle('#EF0A16'); //设置线条的样式
			ctx.setFillStyle('#EF0A16'); //设置填充的样式s
			ctx.font = 'noraml bold 18px 微软雅黑';
			ctx.textAlign = 'center';
			ctx.fillText(_this.nickname, uni.upx2px(270), uni.upx2px(360));
			// ctx.fillText('面朝大海,春暖花开', uni.upx2px(270), uni.upx2px(360));
			ctx.moveTo(uni.upx2px(175), uni.upx2px(375)); //设置线条的起始路径坐标
			ctx.lineTo(uni.upx2px(365), uni.upx2px(375)); //设置线条的终点路径坐标
			ctx.stroke(); //对当前路径进行描边
			ctx.closePath(); //关闭当前路径

			// //绘制红色圆形
			// ctx.save();
			// ctx.arc(uni.upx2px(117) / 2 + uni.upx2px(214), uni.upx2px(117) / 2 + uni.upx2px(202), uni.upx2px(117) / 2, 0, Math.PI * 2, false);
			// ctx.setFillStyle('#EF0A16');
			// ctx.fill();
			// ctx.clip();

			// ctx.beginPath();
			// ctx.arc(uni.upx2px(110) / 2 + uni.upx2px(218), uni.upx2px(110) / 2 + uni.upx2px(205), uni.upx2px(110) / 2, 0, Math.PI * 2, false); // 画一个圆形裁剪区域
			// ctx.clip(); // 裁剪
			// ctx.drawImage(_this.photo, uni.upx2px(218), uni.upx2px(205), uni.upx2px(110), uni.upx2px(110));
			// ctx.restore(); //恢复之前保存的绘图上下文
			// ctx.closePath();

			ctx.beginPath();
			ctx.arc((55 * rpx) / 2 + 110 * rpx, (55 * rpx) / 2 + 104 * rpx, (55 * rpx) / 2, 0, Math.PI * 2, false); // 画一个圆形裁剪区域
			ctx.clip(); // 裁剪
			ctx.drawImage(_this.photo, 110 * rpx, 104 * rpx, 55 * rpx, 55 * rpx);
			ctx.restore(); //恢复之前保存的绘图上下文

			setTimeout(res => {
				ctx.draw(false, () => {
					uni.canvasToTempFilePath({
						width: 270 * rpx,
						height: 450 * rpx,
						canvasId: 'canvas',
						success: res => {
							this.poster = res.tempFilePath;
						}
					});
				});
				uni.hideLoading();
			}, 1000);
		},
		/*保存图片到相册*/
		saveImg() {
			uni.showLoading({
				title: '保存中...'
			});
			uni.saveImageToPhotosAlbum({
				filePath: this.poster,
				success: res => {
					uni.showModal({
						content: '图片保存成功！',
						showCancel: false
					});
				},
				fail: err => {
					if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
						uni.showModal({
							title: '提示',
							content: '您好,请先授权，再保存此图片。',
							showCancel: false,
							success: res => {
								if (res.confirm) {
									uni.openSetting({
										success(settingdata) {
											console.log(settingdata);
											if (settingdata.authSetting['scope.writePhotosAlbum']) {
												uni.showModal({
													content: '请重新长按保存图片',
													showCancel: false
												});
											} else {
												uni.showModal({
													content: '您拒绝了保存到相册权限',
													showCancel: false
												});
											}
										},
										fail: err => {
											uni.showModal({
												content: '手动打开相册权限失败',
												showCancel: false
											});
										}
									});
								}
							}
						});
					}
				},
				complete() {
					uni.hideLoading();
				}
			});
		},
		skipHow() {
			uni.navigateTo({
				url: '../howOpera/howOpera'
			});
		},
		audioPlay() {
			const innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.src = 'https://api.jiuweiyun.cn/public/uploads/icon/empty.mp3';
			innerAudioContext.play();
		},
		deleteSizeItem(sk, bi) {
			this.sizeType[sk].splice(bi, 1);
		},
		addSizeItem(sk) {
			this.sizeType[sk].push(['', '', 0]);
		},
		inputCounter(k, i, vi, v) {
			let arr = Object.assign([], this.sizeType[k]);
			arr[i][vi] = v;
			this.$set(this.sizeType, k, arr);
		},
		previewExample() {
			uni.compressImage({
				src: '../../static/icon/example.png',
				quality: 100,
				success: ({ tempFilePath }) => {
					uni.previewImage({
						urls: [tempFilePath]
					});
				}
			});
		},
		goon() {
			this.gotScore = 0;
			this.clear();
		},
		toRank() {
			uni.toRank = true;
			uni.navigateBack();
		},
		showModal(content) {
			uni.showModal({
				title: '上传失败',
				content,
				cancelText: '取消',
				confirmText: '重新上传',
				success: res => {
					if (res.cancel) {
						this.clear();
					}
					if (res.confirm) {
						this.clear();
						this.ChooseImage();
					}
				}
			});
		},
		showModalSuc(content) {
			uni.showModal({
				title: '上传成功',
				showCancel: false,
				content,
				success: res => {
					if (res.confirm) {
						this.clear();
					}
				}
			});
		},
		handleInput(e) {
			this.money = e.target.value.replace(/\D/g, '').replace(/^0{1,}/g, '');
		},
		upload() {
			const hard = this.formList[0].input?this.formList[0].input: 0,
				simple = this.formList[1].input?this.formList[1].input: 0,
				old = this.formList[2].input?this.formList[2].input: 0,
				new_old = this.formList[3].input?this.formList[3].input: 0,
				youth = this.formList[4].input?this.formList[4].input: 0
				console.log(hard,
				simple,
				old,
				new_old,
				youth)
			if (!hard && !simple && !old && !new_old && !youth ) {
				uni.showToast({ title: '请填写零售数量', icon: 'none' })
				return
			}
			// const rule = /^[0-9]+.?[0-9]*$/
			// console.log(2222, rule.test(simple))
			// if (rule.test(hard) || rule.test(simple) || rule.test(old) || rule.test(new_old) || rule.test(youth) ) {
			// 	uni.showToast({ title: '零售数量只能是数字类型', icon: 'none' })
			// 	return
			// }
			if (!this.money) {
				uni.showToast({ title: '请填写零售总额', icon: 'none' })
				return
			}
			// if (rule.test(this.money) == false) {
			// 	uni.showToast({ title: '零售总额只能是数字类型', icon: 'none' })
			// 	return
			// }
			if (this.imgList.length == 0) {
				uni.showToast({ title: '请上传图片', icon: 'none' })
				return
			}
			uni.showLoading({
				title: '上传中...',
				mask: true
			})
			this.$ajax.upload(UploadNew, 'img', this.imgList[0], {
				hard,
				simple,
				old,
				new_old,
				youth,
				season: this.userServerInfo.season,
				money: this.money
			}).then(([ , { data: res }]) => {
				uni.hideLoading()
				if (typeof res === 'string') {
					res = JSON.parse(res)
				}
				if (res.code == 200) {
					uni.showModal({
						title: '上传成功',
						showCancel: false,
						success: res => {
							if (res.confirm) {
								this.clear()
							}
						}
					})
				} else {
					uni.showModal({
						title: '上传失败',
						showCancel: false,
						content: res.message
					})
				}
			})
		},
		clear() {
			// this.input1 = 0
			// this.input2 = 0
			// this.input3 = 0
			// this.input4 = 0
			// this.$refs.counter1.inputValue = 0
			// this.$refs.counter2.inputValue = 0
			// this.$refs.counter3.inputValue = 0
			// this.$refs.counter4.inputValue = 0
			this.formList = [
				{
					name: '精装版',
					input: '',
				},
				{
					name: '简约版',
					input: '',
				},
				{
					name: '高腰版',
					input: '',
				},
				{
					name: '纯棉版',
					input: '',
				},
				
				{
					name: '青春版',
					input: '',
				},
				
			],
			this.money = ''
			this.imgList = [];
		},
		ChooseImage() {
			const self = this
			    uni.chooseImage({  
                    count: 1,  
                    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有  
                    sourceType: ['album'], //从相册选择  
                    success: function (res) {  
                        console.log('选择图片结果');  
                        console.log(res);  
                        self.frontPath = res.tempFilePaths[0];  
                        uni.compressImage({  
                            src: self.frontPath,  
                            quality: 50,
                            width: 'auto',  
                            height: 'auto',  
                            success: compressRes => {  
                                self.frontPath = compressRes.tempFilePath;  
                                console.log('压缩图片结果');  
                                console.log(compressRes);
								self.imgList = [compressRes.tempFilePath]
							}
							
						})
					}
				})
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '删除',
				content: '确定删除这张截图嘛？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},
		tohowupload() {
			uni.navigateTo({
				url: '../howupload/howupload'
			});
			uni.navigateTo({
				url: '../../packone/pages/howupload/howupload'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.poster {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 9999;
	.poster_con {
		width: 90%;
		margin: 0 auto;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.canvas {
			width: 540rpx;
			height: 900rpx;
			border-radius: 24rpx;
			position: relative;
			#canvas {
				width: 540rpx;
				height: 900rpx;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
			image {
				width: 540rpx;
				height: 900rpx;
			}
		}
		.close {
			position: absolute;
			top: 12vh;
			right: 42rpx;
			color: #dedede;
			width: 50rpx;
			height: 50rpx;
			z-index: 999;
		}
		.save_img {
			color: #fff;
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			margin-top: 20rpx;
		}
	}
}
// .poster {
// 	width: 100vw;
// 	height: 100vh;
// 	position: fixed;
// 	top: 0;
// 	left: 0;
// 	background-color: rgba(0, 0, 0, 0.7);
// 	z-index: 9999;
// 	.poster_con {
// 		width: 220;
// 		height: 100vh;
// 		.canvas {
// 			width: 100vw;
// 			height: 100vh;
// 			position: relative;
// 			#canvas {
// 				position: absolute;
// 				top: 0;
// 				left: 0;
// 				z-index: 9999;
// 				// opacity: 0;
// 			}
// 			// image {
// 			// 	width: 100%;
// 			// 	height: 100%;
// 			// 	border-radius: 24rpx;
// 			// 	z-index: 99999;
// 			// }
// 		}
// 	}
// 	.iconfont {
// 		position: absolute;
// 		top: 3vh;
// 		right: 25rpx;
// 		color: #dedede;
// 		font-size: 60rpx;
// 		z-index: 999;
// 	}
// 	.sub_btn {
// 		margin-top: 76rpx;
// 	}
// }
.upload {
	@include page();
	overflow: hidden;
	background: $custom-nav-borderbot-color;
	.header {
		line-height: 70rpx;
		// line-height: 90rpx;
		padding: 0 48rpx;
		color: #2a2a2a;
		font-size: 36rpx;
		background-color: #eeeeee;
		border-bottom: 1px solid #eeeeee;
		font-weight: bolder;
		.header_con {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.how {
				width: 134rpx;
				height: 58rpx;
				background: #fb6342;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 28rpx;
				font-weight: normal;
				border-radius: 8rpx;
			}
		}
		.small {
			font-size: 28rpx;
		}
	}
	.repair {
		image {
			width: 100%;
			height: 600rpx;
			margin-top: 140rpx;
		}
		view {
			font-size: 30rpx;
			font-weight: bold;
			text-align: center;
			line-height: 50rpx;
			text-shadow: 2rpx #1cbbb4;
		}
	}
	.loading {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.6);
		text {
			width: 150rpx;
			height: 150rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fa6342;
			font-size: 60rpx;
			border-radius: 50%;
			background: #ffffff;
		}
		image {
			top: 50%;
			left: 50%;
			width: 400rpx;
			height: 400rpx;
			position: absolute;
			margin-top: -200rpx;
			margin-left: -200rpx;
			&.rotate {
				animation: loading 4s infinite;
			}
		}
		view {
			top: 30%;
			left: 50%;
			width: 100%;
			color: #fa6342;
			font-size: 42rpx;
			text-align: center;
			position: absolute;
			transform: translateX(-50%);
		}
	}
	.content {
		margin-top: $custom-nav-borderbot-height;
		position: relative;
		display: flex;
		flex-direction: column;
		.example {
			flex: 1;
			background: #ffffff;
			overflow-y: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.connect {
			width: 16rpx;
			height: 112rpx;
			position: absolute;
			top: 278rpx;
			&.left {
				left: 91rpx;
			}
			&.right {
				right: 91rpx;
			}
		}
		.top {
			box-sizing: border-box;
			.upload_item_parent {
				margin-bottom: 20rpx;
			}
			.col_inp {
				view,
				input {
					font-size: 28rpx;
					font-weight: bold;
				}
			
				.input {
					display: flex;
					align-items: center;
					color: #FB231F;
					width: 78%;
					input {
						margin-left: 10rpx;
					}
				}
			}
			.upload_item {
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-bottom: 1px solid #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.upload_type_name {
					color: #333333;
					font-size: 28rpx;
					font-weight: bolder;
					width: 95rpx;
					text-align: left;
				}
				.upload_controls {
					flex: 1;
					overflow: hidden;
					margin-left: 22rpx;
					margin-right: 30rpx;
				}
				&:nth-last-of-type(1) {
					border-bottom: none;
				}
				.upload_delete_btn_box {
					width: 40rpx;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.upload_delete_btn {
						width: 30rpx;
						height: 30rpx;
						background-image: url(../../static/icon/delete.png);
						background-size: 100% 100%;
					}
				}
				.upload_add_btn {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: #fb6342;
					position: relative;
					&::after {
						content: '';
						display: block;
						width: 20rpx;
						height: 4rpx;
						background-color: #ffffff;
						border-radius: 4rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-top: -2rpx;
						margin-left: -10rpx;
					}
					&::before {
						content: '';
						display: block;
						width: 4rpx;
						height: 20rpx;
						background-color: #ffffff;
						border-radius: 20rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						margin-top: -10rpx;
						margin-left: -2rpx;
					}
				}
			}
			// .upload_item {
			// 	width: 100%;
			// 	margin-bottom: 20rpx;
			// 	&:nth-last-of-type(1) {
			// 		margin-bottom: 0;
			// 	}
			// 	.upload_header {
			// 		width: 100%;
			// 		background-color: #FFFFFF;
			// 		height: 94rpx;
			// 		display: flex;
			// 		align-items: center;
			// 		justify-content: space-between;
			// 		padding: 0 30rpx;
			// 		box-sizing: border-box;
			// 	}
			// 	.upload_title {
			// 		color: #333333;
			// 		font-size: 28rpx;
			// 	}
			// 	.upload_num {
			// 		color: #333333;
			// 		font-size: 28rpx;
			// 		.num_spec {
			// 			color: #FB6342;
			// 			margin-right: 10rpx;
			// 		}
			// 	}
			// 	.upload_right {
			// 		display: flex;
			// 		align-items: center;
			// 	}
			// 	.upload_btn {
			// 		height: 42rpx;
			// 		line-height: 42rpx;
			// 		border-radius: 42rpx;
			// 		width: 136rpx;
			// 		background-color: #FB6342;
			// 		color: #FFFFFF;
			// 		font-size: 24rpx;
			// 		text-align: center;
			// 		margin-right: 30rpx;
			// 	}
			// 	.upload_up_arrow {
			// 		&::after{
			// 			transform: rotate(270deg) !important;
			// 		}
			// 	}
			// 	.upload_arrow {
			// 		&::after {
			// 			content: "";
			// 			display: block;
			// 			width: 28rpx;
			// 			height: 28rpx;
			// 			background-image: url(../../static/icon/arrow.png);
			// 			background-size: 100% 100%;
			// 			background-repeat: no-repeat;
			// 			transform: rotate(90deg);
			// 		}
			// 	}
			// }
			.top-item {
				font-size: 30rpx;
				color: #333333;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #ffffff;
				margin-bottom: 12rpx;
				height: 90rpx;
				padding: 0 35rpx;
				box-sizing: border-box;
			}
		}
		.bot {
			height: 240rpx;
			box-sizing: border-box;
			padding: 0 30rpx;
			color: rgba(178, 178, 178, 1);
			.grid {
				width: 100%;
				height: 100%;
			}
			.choose {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				color: #ff7e00;
				font-size: 30rpx;
				padding-bottom: 0 !important;
				background: #ffffff;
				margin: 0 !important;
			}
			.upload_img {
				width: 128rpx;
				height: 128rpx;
				margin-bottom: 12rpx;
				background-image: url(../../static/new/upload.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
		.submit {
			width: calc(100% - 60rpx);
			height: 70rpx;
			margin: 30rpx auto 10rpx;
			background: rgba(250, 99, 66, 1);
			border-radius: 35rpx;
			color: #ffffff;
			font-size: 32rpx;
			line-height: 70rpx;
			text-align: center;
			padding: 0 30rpx;
		}
		.howupload {
			font-size: 24rpx;
			line-height: 84rpx;
			text-align: center;
			font-weight: bold;
			color: rgba(243, 67, 54, 1);
			text {
				margin-left: 9rpx;
			}
		}
	}
	.success {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.85);
		z-index: 3;
		.success_con {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.userinfo {
				position: absolute;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				top: 178rpx;
				z-index: 888;
				.photo {
					width: 148rpx;
					height: 148rpx;
					border-radius: 50%;
					border: 2rpx solid #faf0a9;
					margin-bottom: 30rpx;
				}
				.nickname {
					background: #fa3033;
					border-radius: 44rpx;
					border: 4rpx solid #faf0a9;
					padding: 10rpx 30rpx;
					color: #faf0a9;
					font-size: 40rpx;
					font-weight: bold;
				}
			}
			.level_score_bg {
				width: 100%;
				height: 100%;
				margin-top: 50rpx;
			}
			.upload_success_box {
				position: absolute;
				bottom: 308rpx;
				.level_score {
					font-size: 36rpx;
					color: #ffffff;
					font-weight: bolder;
					min-width: 450rpx;
					text-align: center;
					// margin-boottom:50rpx;
					// margin: -88rpx auto 100rpx auto;
				}
				.user-name {
					width: 100%;
					text-align: center;
					color: #ffec34;
					font-size: 36rpx;
					margin: 40rpx auto;
				}
				// .goon_box {
				// 				display: flex;
				// 				justify-content: center;
				// 				align-items: center;
				// 					margin-top:85rpx;
				// 				.goon {
				// 					width: 300rpx;
				// 					height: 70rpx;
				// 					line-height: 70rpx;
				// 					text-align: center;
				// 					background: #fa6342;
				// 					font-size: 32rpx;
				// 					color: #ffffff;
				// 					border-radius: 35rpx;
				// 					&.rank {
				// 						color: #fa6342;
				// 						background: #ffffff;
				// 						border: 1rpx solid #fa6342;
				// 						margin-left: 60rpx;
				// 					}
				// 				}
				// 			}
				.goon_box {
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 70rpx;
					.goon,
					.save {
						width: 300rpx;
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						font-size: 32rpx;
						border-radius: 44rpx;
						&.rank {
							color: #fa6342;
							background: #ffffff;
							border: 1rpx solid #fa6342;
							margin-left: 60rpx;
						}
					}
					.goon {
						background: #fff;
						color: #fe0000;
						margin-right: 22rpx;
					}
					.save {
						background: linear-gradient(90deg, #f97c55 0%, #f44545 100%);
						color: #ffffff;
					}
				}
			}
		}
		.animation {
			width: 66rpx;
			height: 66rpx;
			position: absolute;
			margin-left: -33rpx;
			top: -66rpx;
			left: 50%;
			&.drop {
				animation: monkey-drop 0.2s linear;
				animation-fill-mode: forwards;
			}
		}
		&::before {
			content: '';
			display: block;
			width: 100%;
			height: 653rpx;
			position: absolute;
			left: 0;
			right: 0;
			top: 105rpx;
			background-image: url(https://api.jiuweiyun.cn/public/uploads/icon/light.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}
	}
}
@keyframes unload-ok-bg {
	0% {
		background: rgba(0, 0, 0, 0);
	}
	100% {
		background: rgba(0, 0, 0, 0.3);
	}
}
@keyframes monkey-drop {
	0% {
		top: -66rpx;
		display: block;
	}
	100% {
		top: 470rpx;
		display: none;
	}
}
@keyframes loading {
	0% {
		transform: rotateZ(0deg);
	}
	100% {
		transform: rotateZ(360deg);
	}
}
</style>