weapp-online/pages/military_order/military_order.vue

<template>
	<!-- 军令状 -->
	<view class="pledge">
		<image :src="imgUrl" class="pledgeBg" @longpress="downLoad == true ? downloadImg() : ''"></image>
		<view class="pop" v-if="popShow">
			<view class="pop_con">
				<view class="pop_title">承诺书</view>
				<view class="promise_info">
					<view class="flexV">
						<text>每周零售产品套数：</text>
						<input type="number" v-model="count" />
					</view>
					<view class="flexV">
						<text>自愿发红包金额：</text>
						<input type="number" v-model="sum" />
					</view>
				</view>
				<view class="promise_btn" @click="subPromise">提交承诺</view>
			</view>
		</view>
	</view>
</template>

<script>
import { subPromise, promiseBook } from '../../api/promise.js';
export default {
	data() {
		return {
			count: '', //产品套数
			sum: '', //红包金额
			popShow: false, //是否显示承诺弹窗
			userInfo: {}, //用户信息
			imgUrl: '../../static/imgs/pledge.png', //军令状背景图
			downLoad: false //是否长按下载图片
		};
	},
	onShow() {
		if (!uni.getStorageSync('userInfo')) {
			uni.redirectTo({
				url: '../index/index'
			});
			return false;
		}
		this.userInfo = uni.getStorageSync('userInfo');
		this.getPromie();
	},
	methods: {
		// 获取承诺书
		getPromie() {
			promiseBook()
				.then(res => {
					if (res.code != 200) {
						uni.showModal({
							content: res.message,
							showCancel: false
						});
						return false;
					}
					if (res.code == 200 && res.data.img) {
						this.imgUrl = res.data.img;
						this.downLoad = true;
					} else {
						this.popShow = true;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		//下载图片
		async downloadImg() {
			console.log(this.imgUrl);
			await uni.showLoading({
				title: '下载中'
			});
			// 1.将远程文件下载到小程序的内存中,tempFilePath
			const result1 = await uni.downloadFile({
				url: this.imgUrl
			});
			console.log(result1);
			const { tempFilePath } = result1[1];
			// 2.将小程序内存中的临时文件下载到本地上
			const result2 = await uni.saveImageToPhotosAlbum({
				filePath: tempFilePath,
				success: () => {
					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.showToast({
													title: '请重新保存图片',
													icon: 'none'
												});
											} else {
												uni.showToast({
													title: '获取权限失败',
													icon: 'none'
												});
											}
										},
										fail: err => {
											console.log(err);
										}
									});
								}
							}
						});
					} else {
						uni.showModal({
							content: '下载失败',
							showCancel: false
						});
					}
				},
				complete() {
					uni.hideLoading();
				}
			});
		},
		/*
		 *提交承诺
		 * @params promise_num 产品的件数
		 * @params gift_money 红包金额
		 */
		subPromise() {
			if (!this.count) {
				uni.showModal({
					content: '请输入产品套数',
					showCancel: false
				});
				return false;
			}
			if (!this.sum) {
				uni.showModal({
					content: '请输入红包金额',
					showCancel: false
				});
				return false;
			}
			subPromise({ promise_num: this.count, gift_money: this.sum }).then(res => {
				console.log(res);
				if (res.code == 200) {
					this.imgUrl = res.data.img;
					this.popShow = false;
				} else {
					uni.showModal({
						content: res.message,
						showCancel: false
					});
				}
			});
		}
	}
};
</script>
<style>
page {
	width: 100%;
	min-height: 100%;
}
</style>
<style lang="scss">
.pledge {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	position: relative;
	.pop {
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
		width: 100vw;
		background-color: rgba($color: #000000, $alpha: 0.4);
		.pop_con {
			padding: 0 30rpx;
			box-sizing: border-box;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: #fff;
			z-index: 999;
			width: 600rpx;
			margin: 0 auto;
			height: 450rpx;
			border-radius: 15rpx;
			color: #000;
			.pop_title {
				font-size: 32rpx;
				text-align: center;
				padding: 25rpx 0;
				font-weight: bold;
			}
			.promise_info {
				> view {
					margin-top: 20rpx;
					padding: 15rpx 0;
					text {
						width: 288rpx;
						text-align: right;
					}
				}
				input {
					width: 200rpx;
					border: 1rpx solid #cccccc;
					border-radius: 8rpx;
					padding: 10rpx;
				}
			}
			.promise_btn {
				width: 400rpx;
				height: 66rpx;
				line-height: 66rpx;
				margin: 35rpx auto 0;
				color: #fff;
				background-color: #fc1304;
				border-radius: 44rpx;
				text-align: center;
			}
		}
	}
	.pledgeBg {
		height: 100%;
		width: 100%;
	}
	// .pledge_con {
	// 	color: #fff;
	// 	view {
	// 		position: absolute;
	// 		bottom: 28vh;
	// 		right: 28vw;
	// 	}
	// 	.money {
	// 		bottom: 21vh;
	// 		right: 33vw;
	// 	}
	// 	.name {
	// 		bottom: 14vh;
	// 		right: 28vw;
	// 	}
	// 	.year {
	// 		bottom: 6vh;
	// 		right: 41vw;
	// 	}
	// 	.month {
	// 		bottom: 6vh;
	// 		right: 30vw;
	// 	}
	// 	.day {
	// 		bottom: 6vh;
	// 		right: 19vw;
	// 	}
	// 	.share {
	// 		bottom: 4vh;
	// 		left: 7vw;
	// 		display: flex;
	// 		align-items: center;
	// 		image {
	// 			height: 64rpx;
	// 			width: 64rpx;
	// 		}
	// 		text {
	// 			color: #e6a805;
	// 			font-size: 28rpx;
	// 			margin-left: 11rpx;
	// 			font-weight: bold;
	// 		}
	// 	}
	// }
}
</style>