store-new/pages/add-qrcode/add-qrcode.vue

<template>
	<view class="code_box">
		<view class="video_box">
			<video src="http://api.wd.cliu.cc/storage/video/d156c83e2f3c18ff3697e5d218c0e9df.mp4" controls
				poster="http://api.wd.cliu.cc/storage/video/video_cover.png"></video>
		</view>
		<view class="code_title">上传微信二维码名片，方便客户加你微信咨询购买</view>
		<image :src="imgUrl" class="code_img" @click="upLoadImg"></image>
		<view class="code_hint">点击二维码可重新上传</view>
		<view class="sub_box flexC">
			<view class="btn flexC" @click="uploadCode">确认提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: '/static/imgs/shop/upload_wx.png'
			};
		},
		methods: {
			upLoadImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						// const imgType = ['image/png', 'image/jpg', 'image/jpeg'];
						const tempFilePaths = res.tempFilePaths;
						// let type = res.tempFiles[0].type;
						// if (imgType.indexOf(type) === -1) {
						// 	uni.showModal({
						// 		content: '上传图片格式必须为: png或jpg格式',
						// 		showCancel: false
						// 	});
						// 	return false;
						// }
						this.imgUrl = tempFilePaths[0];
					}
				});
			},
			uploadCode() {
				if (this.imgUrl == '/static/imgs/shop/upload_wx.png') {
					uni.showModal({
						content: '请先上传微信二维码',
						showCancel: false
					});
					return false;
				}
				uni.showLoading({
					title: '提交中...'
				});
				uni.uploadFile({
					url: `${this.$config.redirect_uri}/api/store_goods/upload_wx_qr_code_img`,
					filePath: this.imgUrl,
					name: 'img',
					header: {
						Authorization: 'Bearer ' + uni.getStorageSync('token')
						// Authorization:
						// 'Bearer ' +
						// 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9hcGkuYXBwLmppdXdlaXl1bi5jblwvYXBpXC9sb2dpblwvZ2V0X3VzZXJfb3BlbmlkIiwiaWF0IjoxNjE3MTA1MTI5LCJleHAiOjE2MTc5NjkxMjksIm5iZiI6MTYxNzEwNTEyOSwianRpIjoidElBRHBwakZMUXVkSmtpSiIsInN1YiI6NDk0MjgsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ.g8YdgFXY_hzN308um5hWrKf7OPlo5Q9SVgwTjO_8Bdw'
					},
					success: res => {
						uni.hideLoading();
						let data = JSON.parse(res.data);
						uni.hideLoading();
						if (data.code == 200) {
							uni.setStorageSync('qrCode', data.data);
							uni.navigateBack({});
						} else {
							uni.showModal({
								content: res.data || '上传二维码失败，请重试',
								showCancel: false
							});
						}
					},
					fail: err => {
						uni.hideLoading();
						uni.showModal({
							content: '上传二维码失败，请重试',
							showCancel: false
						});
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.code_box {
		width: 690rpx;
		margin: 0 auto;
		text-align: center;

		.video_box {
			width: 690rpx;
			margin: 30rpx auto 0;
			height: 350rpx;
			border-radius: 24rpx;
			position: relative;

			.video_cover {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 999;
			}

			video {
				width: 690rpx;
				height: 350rpx;
				border-radius: 24rpx;
			}
		}

		.code_title {
			font-size: 30rpx;
			font-weight: bold;
			margin-top: 40rpx;
		}

		.code_img {
			width: 300rpx;
			height: 300rpx;
			margin: 54rpx 0;
		}

		.wx_img {
			width: 264rpx;
			height: 347rpx;
			margin: 54rpx 0;
		}

		.code_hint {
			color: $base-color;
			font-size: 28rpx;
			margin-bottom: 80rpx;
		}

		.sub_box {
			position: fixed;
			bottom: 0;
			left: 0;
			background: #fff;
			width: 100%;
			height: 100rpx;
			border-top: 2rpx solid #eeeeee;

			.btn {
				width: 690rpx;
				height: 88rpx;
				background: $base-line-bg;
				margin: 0 auto;
				border-radius: 44rpx;
				font-size: 32rpx;
				color: #fff;
				font-weight: bold;
				letter-spacing: 4rpx;
			}
		}
	}
</style>