<template>
	<view class="page1">
		<view class="top" ref="top">
			<view @tap="backPage" style="width: 80rpx;height: 80rpx;margin: 98rpx 0 0 30rpx;">
				<uni-icons type="left" color="#fff" size="27"></uni-icons>
			</view>
			<view class="top1">
				<text style="display: block;margin-top: 107rpx;color: #fff;">Ai入库</text>
			</view>
		</view>
		<view class="content">
			<view class="prompt">
				<view class="prompt-title">
					<view class="hello-right"></view>
					<view class="ai-bot"></view>
					<view class="hello-left">
						<text style="font-size: 40rpx;font-weight: 800;line-height: 56rpx;color: #fff;">Hi</text>
					</view>
				</view>
				<view class="prompt-title-text">
					<text>欢迎使用Ai助手，为了提高图片识别准确率，建议您按照以下要求上传图片：</text>
					<text>1.每张图片建议您裁剪到20个规格或以下</text>
					<text>2.确保最后一款商品规格截取完整</text>
					<text>3.每张图片输入对应的规格数量</text>
					<text>4.图片越清晰角度越正识别准确率越高,建议使用原相机拍照并在相册内截图后上传</text>
					<text>5.如果拍照后找不到所拍照片，打开微信的设置-通用-照片、视频里面的照片，点击开启后重启微信即可</text>
					<text>6.点击可查看<text @tap="goTutorial" style="color: blue;">使用教程</text></text>
				</view>
				<view class="prompt-title-img">
					<view class="img" v-for="(item,index) in imgList" :key="index">
						<image show-menu-by-longpress :src="item" @tap="showImage(item)"></image>
					</view>
				</view>
			</view>
			<view @tap="toggle"
				style="height: 98rpx;line-height: 98rpx;font-size: 34rpx;font-weight: bold;padding-left: 30rpx;position: relative;">
				上传图片
				<view class="title-line"></view>
				<view class="icon-upload">
					<uni-icons type="cloud-upload" color="#00BFFF" size="30"></uni-icons>
					<text style="font-size: 24rpx;float: left;font-weight: normal;">（←点击此处添加主图）</text>
				</view>
			</view>
			<view v-for="(item,index) in purchaseOcrPictureList" :key="index"
				style="display: flex;width: 100%;overflow: scroll;">
				<view class="content-list-img">
					<view class="del-icon" @tap="delImage(index)">
						<uni-icons type="trash" color="#00BFFF" size="20"></uni-icons>
					</view>
					<image show-menu-by-longpress :src="item.ocrPicture" @load='loadImg'
						@tap="showImage(item.ocrPicture)"></image>
					<uni-easyinput type='number' prefixIcon="compose" v-model='item.count' placeholder="请输入规格数量"
						@blur="numChange('zhu',item,index)"></uni-easyinput>
				</view>
				<view v-for="(items,indexs) in item.children" :key="indexs"
					style="width: 200rpx;height: 280rpx;position: relative;background: #fff;margin-left: 20rpx;border-radius: 10px;">
					<view class="del-icon" @tap="delSonImage(index,indexs)">
						<uni-icons type="trash" color="#00BFFF" size="20"></uni-icons>
					</view>
					<image show-menu-by-longpress :src="items.ocrPicture" @load='loadImg'
						@tap="showImage(items.ocrPicture)" style="width: 200rpx;height: 200rpx;padding: 5px;"></image>
					<uni-easyinput type='number' v-model='items.count' placeholder="子图规格数量"
						@blur="numChange('zi',item,index,items,indexs)"></uni-easyinput>
				</view>
				<view @tap="addSonImg(item.id)"
					style="width: 200rpx;height: 219rpx;background: rgba(255,255,255,0.4);margin: 0 20rpx;border-radius: 10px;font-size: 24rpx;color: #777;text-align: center;">
					<uni-icons type="plusempty" color="#777" size="80"></uni-icons>
					<view style="height: 30rpx;line-height: 30rpx;">点击添加子图</view>
				</view>
			</view>
			<view style="height:200rpx;"></view>
		</view>
		<view class="bottom-box" @tap="clickAiBtn">
			<view class="run-line"></view>
			<img class="bottom-img"
				src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/27e2655fe19f454d93970f968d91fbef.png" alt="" />
			<view class="bottom-btn">Ai识别</view>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" background-color="#fff">
			<view style="height:300rpx;">
				<view class="popup-photo" style="font-size: 28rpx;font-weight: 400;">提示：建议使用原相机拍照并在相册内截图后上传</view>
				<!-- <view @tap="upLoadImg('pai')" class="popup-photo">拍照</view> -->
				<view @tap="upLoadImg('xuan')" class="popup-photo">从相册选择</view>
				<view @tap="$refs.popup.close()" class="popup-photo"
					style="border-bottom:0;border-top:10px solid #eee;">取消</view>
			</view>
		</uni-popup>
		<!-- 打印选择框 -->
		<uni-popup ref="productDialog" background-color="#fff">
			<view class="popup-pay-content"
				:style="{background:'url('+purchaseOcrPictureList[0].ocrPicture+') no-repeat;background-size: 100%;'}">
				<view class="popup-pay-shili">
					<view class="popup-pay-title" style="margin-top: 50rpx;">
						<text>识别规则示例</text>
					</view>
					<view class="content-fur">
						<view>为了提高识别的准确率，请您找一款商品的一条规格信息作为AI识别的示例填入，图片中没有的信息不填</view>
						<!-- <view>
							<image :src="purchaseOcrPictureList[0].ocrPicture" style="width: 100%;height: 50rpx;background-size: 100%;background-repeat: no-repeat;"></image>
						</view> -->
					</view>
					<view style="height: 350rpx;">
						<view
							style="padding-left: 40rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
							<text style="display:inline-block;width:100rpx;font-size:22rpx;">
								货号:
							</text>
							<input v-model="productSn" disabled="true" @tap="clickInput('productSn')" type="text"
								placeholder="请输入货号"
								style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
						</view>
						<view
							style="padding-left: 20rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
							<text style="display:inline-block;width:100rpx;font-size:22rpx;">
								商品名:
							</text>
							<input v-model="productName" disabled="true" @tap="clickInput('productName')" type="text"
								placeholder="请输入商品名"
								style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
						</view>
						<view
							style="padding-left: 40rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
							<text style="display:inline-block;width:100rpx;font-size:22rpx;">
								采购价:
							</text>
							<input v-model="price" @focus="obtainPrice($event,'price')"
								@blur="changessPrice($event,'price')" type="digit" placeholder="请输入价格"
								style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
						</view>
						<view
							style="padding-left: 20rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
							<text style="display:inline-block;width:100rpx;font-size:22rpx;">
								数量:
							</text>
							<input v-model="productCount" @focus="obtainPrice($event,'productCount')"
								@blur="changessPrice($event)" type="digit" placeholder="请输入数量"
								style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
						</view>
						<view
							style="padding-left: 40rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
							<text style="display:inline-block;width:100rpx;font-size:22rpx;">
								颜色:
							</text>
							<input v-model="color" type="text" disabled="true" @tap="clickInput('color')"
								placeholder="请输入颜色"
								style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
						</view>
						<view
							style="padding-left: 20rpx;display: flex;height: 80rpx;width: 50%;line-height: 80rpx;margin-top: 20rpx;float: left;">
							<text style="display:inline-block;width:100rpx;font-size:22rpx;">
								尺码:
							</text>
							<input v-model="size" type="text" disabled="true" @tap="clickInput('size')"
								placeholder="请输入尺码"
								style="display: flex;height: 80rpx;width: 200rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
						</view>
					</view>

					<view class="popup-pay-container" @tap="identify">
						确认
					</view>
				</view>

			</view>
		</uni-popup>
		<!--  -->
		<uni-popup ref="tanDialog" background-color="#fff">
			<view class="popup-pay-content" style="width: 100%;height: 400rpx;">
				<view style="z-index: 99;background: #fff;border-top: 1px solid #eee;">

					<view class="popup-pay-title" style="margin-top: 50rpx;">
						<text>请输入{{name=='productSn'?'货号':name=='productName'?'商品名称':name=='price'?'价格':name=='productCount'?'数量':name=='color'?'颜色':name=='size'?'尺码':''}}</text>
					</view>
					<view style="height: 100rpx;">
						<view
							style="padding-left: 40rpx;display: flex;height: 80rpx;width: 90%;line-height: 80rpx;margin: 20rpx auto;">
							<text style="display:inline-block;width:100rpx;font-size:22rpx;">
								{{name=='productSn'?'货号':name=='productName'?'商品名称':name=='price'?'价格':name=='productCount'?'数量':name=='color'?'颜色':name=='size'?'尺码':''}}
							</text>
							<input v-model="nameText" ref="inputText" :focus="focus" type="text" placeholder="请输入"
								style="display: flex;height: 80rpx;width: 75%;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
						</view>
					</view>

					<view class="popup-pay-container" @tap="shurukuang"
						style="position: absolute;bottom: 10px;left: 5%;">
						确认
					</view>
				</view>

			</view>
		</uni-popup>
		<view v-if="isTake" style="position: fixed;width: 100%;height: 100%;z-index: 100;top: 0;">
			<camera device-position="back" output-dimension='max' @initdone='showBtn' flash="off"
				style="width: 100%; height: 100%;"></camera>
			<view style="width: 100%;height: 120rpx;position: fixed;bottom:200rpx;" v-if="isShow == true">
				<view @tap="takePhoto"
					style="width: 120rpx;height: 120rpx;border-radius: 120rpx;background: #fff;margin: 0 auto;border: 2px solid #eee;">
					<view
						style="width: 116rpx;height: 116rpx;border-radius: 116rpx;background: #fff;margin: 0 auto;border: 1px solid #fff;">
					</view>
				</view>
				<view @tap="isTake = false" style="position: absolute;top: 20rpx;left: 100rpx;">
					<uni-icons type="close" color="#777" size="40"></uni-icons>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				imgList: [
					'https://jewel-shop.oss-cn-beijing.aliyuncs.com/f51c446ef147437c9a8200ed2b43ec7f.jpg',
					'https://jewel-shop.oss-cn-beijing.aliyuncs.com/5444bab7df8d47e09c831c054b6e447b.jpg',
					'https://jewel-shop.oss-cn-beijing.aliyuncs.com/44e7ccc2fae74db593bd1a10f538e2de.jpg',
					'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2a55142e562b4ea480ce553c8b84d092.jpg'
				],
				isShow: false,
				focus: false,
				purchaseOcrPictureList: [],
				parentPicturePath: '',
				parentId: '',
				newSubmit: [],
				productSn: "",
				productName: "",
				price: "",
				productCount: "",
				color: "",
				size: "",
				keyBoardHeight: 0,
				name: '',
				nameText: '',
				isTake: false
			}
		},
		onShow() {
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {

				},
				fail() {
					this.tui.toast("您未授权，AI入库功能可能会出现错误")
				}
			})
		},
		onLoad() {

		},
		methods: {
			addSonImg(id) {
				this.parentId = id
				this.toggle()
			},
			splitData(str) {
				return str.split('/')[3].split('.')[0]
			},
			clickAiBtn() {
				this.newSubmit = []
				if (this.purchaseOcrPictureList.length == 0) {
					this.tui.toast("请选择要上传的图片")
					return
				}
				for (let i = 0; i < this.purchaseOcrPictureList.length; i++) {
					if (this.purchaseOcrPictureList[i].count == 0 || this.purchaseOcrPictureList[i].count == '') {
						this.tui.toast("请输入数量")
						return
					} else {
						let data = {
							ocrPicture: this.purchaseOcrPictureList[i].ocrPicture,
							count: this.purchaseOcrPictureList[i].count,
							parentPicturePath: '',
							ocrPictureOrder: i == 0 ? "" : i + 1
						}
						this.newSubmit.push(data)
						if (this.purchaseOcrPictureList[i].children.length > 0) {
							for (let m = 0; m < this.purchaseOcrPictureList[i].children.length; m++) {
								if (this.purchaseOcrPictureList[i].children[m].count == 0 || this.purchaseOcrPictureList[i]
									.children[m].count == '') {
									this.tui.toast("请输入子图片的规格数量")
									return
								} else {
									let data = {
										ocrPicture: this.purchaseOcrPictureList[i].children[m].ocrPicture,
										count: this.purchaseOcrPictureList[i].children[m].count,
										parentPicturePath: this.purchaseOcrPictureList[i].ocrPicture,
										ocrPictureOrder: i == 0 ? "" : (i + 1) + '-' + (m + 1)
									}
									this.newSubmit.push(data)
								}
							}
						}
					}
				}

				this.$refs.productDialog.open('bottom')
			},
			clickInput(name) {
				this.name = name
				if (this.name == 'productSn') {
					this.nameText = this.productSn
				} else if (this.name == 'productName') {
					this.nameText = this.productName
				} else if (this.name == 'price') {
					this.nameText = this.price
				} else if (this.name == 'productCount') {
					this.nameText = this.productCount
				} else if (this.name == 'color') {
					this.nameText = this.color
				} else if (this.name == 'size') {
					this.nameText = this.size
				}
				this.$refs.tanDialog.open('bottom');

				this.focus = false
				this.$nextTick(() => {
					this.focus = true
				})
				// this.focus = true
				// this.$refs.inputText.focus();
			},
			numChange(type, item, index, items, indexs) {
				if (type == 'zhu') {

					if (item.count > 20) {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '规格数不能超过20，例：“黑色M码”这种为一个规格，“黑色S码”或“白色L码”则为另外的规格，请以此种颜色+尺码组合为一种的方式来计数',
							success: function(res) {}
						});
						this.purchaseOcrPictureList[index].count = ''
					}
				} else if (type == 'zi') {
					if (items.count > 20) {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: '规格数不能超过20，例：“黑色M码”这种为一个规格，“黑色S码”或“白色L码”则为另外的规格，请以此种颜色+尺码组合为一种的方式来计数',
							success: function(res) {}
						});
						this.purchaseOcrPictureList[index].children[indexs].count = ''
					}
				}
			},
			shurukuang() {
				if (this.name == 'productSn') {
					this.productSn = this.nameText
				} else if (this.name == 'productName') {
					this.productName = this.nameText
				} else if (this.name == 'price') {
					this.price = this.nameText
				} else if (this.name == 'productCount') {
					this.productCount = this.nameText
				} else if (this.name == 'color') {
					this.color = this.nameText
				} else if (this.name == 'size') {
					this.size = this.nameText
				}
				this.name = ""
				this.nameText = ""
				this.$refs.tanDialog.close()
			},
			loadImg() {
				uni.hideLoading();
			},
			identify() {
				let num = 0
				if (this.productSn == "") {
					num += 1
				}
				if (this.productName == "") {
					num += 1
				}
				if (this.price == "") {
					num += 1
				}
				if (this.productCount == "") {
					num += 1
				}
				if (this.color == "") {
					num += 1
				}
				if (this.size == "") {
					num += 1
				}
				if (num == 6) {
					this.tui.toast("未输入规格信息")
					return
				} else {
					this.tui.request("/purchaseOcrPicture/batchSave", "POST", {
						orderId: "",
						purchaseOcrPictureList: this.newSubmit,
						purchaseOcrExample: {
							productSn: this.productSn,
							productName: this.productName,
							price: this.price,
							productCount: this.productCount == '' ? '均码' : this.productCount,
							color: this.color == '' ? '均色' : this.color,
							size: this.size
						}

					}, false, false).then((res) => {
						if (res.code == 200) {
							uni.navigateBack({
								delta: 1
							})

						} else {
							this.tui.toast(res.message)
						}
					}).catch((res) => {})
				}

			},
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			//点击图片放大
			showImage(img) {
				uni.previewImage({
					urls: [img],
					current: img
				})
			},
			toggle() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.$refs.popup.open('bottom')

					}
				});
			},
			showBtn() {
				this.isShow = true
				uni.hideLoading();
			},
			async upLoadImg(type) {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let that = this;
				if (type == 'ios') {
					uni.chooseMedia({
						count: 1,
						mediaType: ['image'],
						sourceType: ['camera', 'album'],
						camera: 'back',
						success(res) {
							that.upLoadFile(res.tempFiles[0].tempFilePath)
						},
						fail() {
							uni.hideLoading();
						}
					})
				} else if (type == 'pai') {
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							that.isTake = true
							uni.hideLoading();
						},
						fail() {
							that.tui.toast("您未授权，AI入库功能可能会出现错误")
						}
					})
				} else if (type == 'xuan') {
					uni.chooseMedia({
						count: 1,
						mediaType: ['image'],
						sourceType: ['album'],
						success(res1) {
							that.upLoadFile(res1.tempFiles[0].tempFilePath)
						},
						fail() {
							uni.hideLoading();
						}
					})
				}
				await this.$refs.popup.close()
				// uni.hideLoading();
			},
			async takePhoto() {
				let that = this;
				const ctx = uni.createCameraContext();
				await ctx.takePhoto({
					quality: 'high',
					success: (res) => {
						let ttt = that
						uni.saveImageToPhotosAlbum({
							filePath: res.tempImagePath,
							success: function() {
								ttt.cameraUpload()
							}
						});
					},
					fail(err) {
						that.isTake = false
					}
				});

			},
			obtainPrice(e, type, num) {
				this.linshiPrice = e.target.value
				if (type == 'price') {
					this.price = ''
				} else if (type == 'productCount') {
					this.productCount = ''
				}
			},
			changessPrice(e, type) {
				if (type == 'price') {
					if (this.linshiPrice == e.target.value) {
						this.price = e.target.value
					} else {
						if (e.target.value == '') {
							this.price = this.linshiPrice
						} else {
							this.price = e.target.value
						}

					}
				} else {
					if (this.linshiPrice == e.target.value) {
						this.productCount = e.target.value
					} else {
						if (e.target.value == '') {
							this.productCount = this.linshiPrice
						} else {
							this.productCount = e.target.value
						}

					}
				}

			},
			cameraUpload() {
				let that = this;
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album'],
					success(res1) {
						that.isTake = false
						that.upLoadFile(res1.tempFiles[0].tempFilePath)
					},
					fail() {
						that.isTake = false
						uni.hideLoading();
					},
					complete(res) {}
				})
			},
			async upLoadFile(path) {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				let hiver_token = uni.getStorageSync("hiver_token")
				await uni.uploadFile({
					url: that.tui.interfaceUrl() + '/upload/file',
					filePath: path,
					name: 'file',
					header: {
						"content-type": "multipart/form-data",
						'accessToken': hiver_token
					},
					formData: {},
					success: (uploadFileRes) => {

						let path = JSON.parse(uploadFileRes.data)

						if (that.parentId != '') {
							for (let i = 0; i < that.purchaseOcrPictureList
								.length; i++) {
								if (that.purchaseOcrPictureList[i].id ==
									that.parentId) {
									let data = {
										ocrPicture: path.result,
										count: '',
									}
									that.purchaseOcrPictureList[i].children
										.push(data)
								}
							}
						} else {
							let data = {
								ocrPicture: path.result,
								count: '',
								id: that.splitData(path.result),
								children: []
							}
							that.purchaseOcrPictureList.push(data)
						}


					},
					fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: JSON.stringify(err),
							icon: 'none'
						})
					}
				});
				await setTimeout(res => {
					that.parentId = ''
					// uni.hideLoading();
				}, 1000)
			},
			delImage(index) {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "确定删除吗？",
					success: function(res) {
						if (res.confirm) {
							that.purchaseOcrPictureList.splice(index, 1);
						}
					}
				})
			},
			getKeyBoardHeight(e) {
				this.keyBoardHeight = e.detail.height
			},
			delSonImage(index, indexs) {
				let that = this;

				uni.showModal({
					title: "提示",
					content: "确定删除该子图吗？",
					success: function(res) {
						if (res.confirm) {
							that.purchaseOcrPictureList[index].children.splice(indexs, 1);
						}
					}
				})
			},
			goTutorial() {
				uni.navigateTo({
					url: `/package2/other/tutorialList`
				})
			}
		}
	}
</script>

<style lang="scss">
	page,
	.page1 {
		background: #F1F5FB;
		font-size: 28rpx;
	}

	.top {
		width: 780rpx;
		height: 390rpx;
		opacity: 1;
		background: linear-gradient(90deg, #6484fa 0%, #66e8ff 100%);
		overflow: hidden;
	}

	.top1 {
		width: 780rpx;
		height: 390rpx;
		opacity: 1;
		text-align: center;
		font-weight: bold;
		font-size: 38rpx;
		display: block;
		background: linear-gradient(360deg, #FAF7F7 0%, rgba(255, 255, 255, 0) 100%);
		overflow: hidden;
	}

	.ai-bot {
		position: absolute;
		top: -8rpx;
		left: 10rpx;
		width: 70rpx;
		height: 60rpx;
		background-size: 100% !important;
		background: url(https://jewel-shop.oss-cn-beijing.aliyuncs.com/66dc640d9e8f4749a234d9ef2af1b257.png) no-repeat;
	}


	.hello-left {
		width: 102rpx;
		height: 56rpx;
		opacity: 1;
		margin-left: 100rpx;
		background: linear-gradient(127.96deg, #6585fa 0%, #6ad5fe 100%);
		border-radius: 3px;
		text-align: center;
		-webkit-transform: skewX(8deg);
		transform: skewX(-6deg);
	}

	.hello-right {
		position: absolute;
		left: 5px;
		bottom: 0rpx;
		width: 120rpx;
		height: 2px;
		opacity: 1;
		background: linear-gradient(180deg, #6585fa 0%, #6ad5fe 100%);
	}

	.image-box {
		width: 120rpx;
		height: 170rpx;
		display: block;
		overflow: hidden;
		float: left;
	}

	.image {
		width: 100rpx;
		height: 100rpx;
		margin: 35rpx 0 0 20rpx;
		font-size: 36rpx;
		background: #8470FF;
		border-radius: 50%;
		text-align: center;
		line-height: 100rpx;
		color: #fff;
	}

	.content-text {
		width: 400rpx;
		height: 200rpx;
		float: left;
		line-height: 50rpx;
		padding-left: 30rpx;
	}

	.text {
		color: #747474;
		font-size: 28rpx;
	}

	.content-btn {
		position: relative;
		width: 190rpx;
		height: 170rpx;
		float: left;
	}

	.btn {
		position: absolute;
		width: 120rpx;
		height: 60rpx;
		background: linear-gradient(90deg, #6691fb 0%, #6ad3fe 100%);
		color: #fff;
		border-radius: 6px;
		text-align: center;
		line-height: 60rpx;
		bottom: 20rpx;
		right: 20rpx;
	}

	@keyframes blinking {
		0% {
			opacity: 1;
		}

		50% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	.blink {
		position: absolute;
		top: 40rpx;
		right: 20rpx;
		animation: blinking 1s infinite;
	}

	.bottom-box {
		position: fixed;
		bottom: 100rpx;
		right: 0;
		left: 0;
		margin: auto;
		background: #fff;
		width: 255rpx;
		height: 85rpx;
		padding: 5rpx;
		z-index: 99;
		background: linear-gradient(90deg, #FFF0F5 0%, #BCD2EE 100%);
		border-radius: 80rpx;
		overflow: hidden;

		.bottom-img {
			width: 60rpx;
			height: 60rpx;
			background-size: 100%;
			margin: 10rpx;
			float: left;
			position: absolute;
			top: 0;
			bottom: 0;
		}
	}

	.btn-x {
		width: 2px;
		height: 40rpx;
		background: #fff;
		border-radius: 2rpx;
		position: absolute;
		top: 40rpx;
		left: 59rpx;
	}

	.btn-y {
		width: 40rpx;
		height: 2px;
		background: #fff;
		border-radius: 2rpx;
		position: absolute;
		top: 59rpx;
		left: 40rpx;
	}

	.prompt {
		background: #fff;
		width: 95%;
		height: auto;
		border-radius: 10px;
		margin: -150rpx auto 0;
		display: block;
		overflow: hidden;
	}

	.prompt-title {
		position: relative;
		width: 300rpx;
		margin: 40rpx 40rpx 20rpx 40rpx;
	}

	.prompt-title-text {
		display: flex;
		flex-direction: column;
		color: #777;
		font-size: 26rpx;
		width: 90%;
		margin: 0 auto;
		line-height: 40rpx;
	}

	.img {
		width: 23%;
		margin-left: 1.5%;
		height: 178rpx;
		border: 1px solid #eee;
		padding: 5px;
		float: left;
		border-radius: 10px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.prompt-title-img {
		width: 93%;
		height: 185rpx;
		margin: 20rpx auto;
	}

	.content-list-img {
		position: relative;
		width: 360rpx;
		margin-left: 1.5%;
		height: 400rpx;
		border: 1px solid #eee;
		background: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		margin-bottom: 40rpx;

		image {
			width: 360rpx;
			height: 80%;
			padding: 10px;
		}
	}

	.uni-easyinput {
		width: 100%;
		height: 20%;
		font-size: 36rpx;
		line-height: 40rpx;
		background: #F8FAFF;
		text-align: center;
		display: block;
		border: none;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.del-icon {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.icon-upload {
		position: absolute;
		top: 0;
		left: 190rpx;
		height: 100%;

		uni-icons {
			float: left;
		}
	}

	.title-line {
		width: 70px;
		height: 7px;
		position: absolute;
		bottom: 30rpx;
		left: 30rpx;
		background: rgba(0, 191, 255, 0.5);
	}

	.bottom-btn {
		width: 100%;
		height: 80rpx;
		padding-left: 100rpx;
		color: #777;
		line-height: 80rpx;
		font-weight: bold;
		position: absolute;
		top: 0;
		bottom: 40rpx;
		font-size: 34rpx;
	}

	.run-line {
		width: 200px;
		height: 200px;
		-webkit-animation: rotate2 2s linear infinite;
		animation: rotate2 3s linear infinite;
		-webkit-transform-origin: 50% 50%;
		z-index: -2;
		margin: -50% 0 0 -50%;
		background: linear-gradient(90deg, #FFF0F5 0%, #BCD2EE 100%);
	}

	@keyframes rotate2 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.popup-photo {
		height: 110rpx;
		line-height: 110rpx;
		text-align: center;
		font-size: 36rpx;
		font-weight: 800;
		border-bottom: 1px solid #eee;
	}

	.popup-pay-content {
		align-items: center;
		justify-content: center;
		// padding: 15px;
		width: 100%;
		height: 1300rpx;
		max-height: 1300rpx;
		// overflow: scroll;
		overflow: hidden;
		background-color: #fff;
	}

	.popup-pay-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		position: relative;
		border-bottom: 1px solid #eee;
		padding-bottom: 20rpx;
	}

	.popup-pay-container {
		margin: 40rpx auto 0;
		height: 100rpx;
		border-radius: 10px;
		background: #088FEB;
		line-height: 100rpx;
		text-align: center;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		color: #fff;
		width: 90%;
	}

	.checked {
		background: #60F3FF;
		color: #fff !important;
	}

	.content-fur {
		border-bottom: 1px solid #eee;
		display: flex;
		line-height: 50rpx;
		padding: 20rpx;
	}

	.content-low {
		width: auto;
		border: 1px solid #eee;
		display: inline-block;
		min-width: 90rpx;
		padding: 5rpx;
		font-size: 35rpx;
		text-align: center;
		color: #777;
		margin: 20rpx 0 0 20rpx;
	}

	.popup-pay-shili {
		height: 750rpx;
		margin-top: 550rpx;
		z-index: 99;
		background: #fff;
		border-top: 1px solid #eee;
	}

	@media screen and (min-width: 470px) {

		/* 适配宽度为375px及以上的屏幕 */
		.popup-pay-content {
			height: 1000rpx;
		}
		.popup-pay-shili{
			height: 750rpx;
			margin-top: 260rpx;
			z-index: 99;
			background: #fff;
			border-top: 1px solid #eee;
		}
	}
</style>