bike/pages_admin/addcode.vue

<template>
	<view class="page">
		<u-navbar title="添加收款码" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='45'
			back-icon-color='#000'></u-navbar>
			<view class="img">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/u5PppHgzfFN8r8RN4pg3" mode="" v-if="userImgs==''" @click="btn()"></image>
				<image :src="userImgs" mode="" v-else  style="height: 413rpx;"></image>
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uFp9riSLtpmuq6gyKfdr" mode="" class="close" v-if="userImgs!=''" @click="userImgs=''"></image>
			</view>
			<view class="txt">
				请上传微信收款二维码
			</view>
			<view class="tips">
				<image src="https://lxnapi.ccttiot.com/bike/img/static/uNll6TfepDq2dsCsE8wL" mode=""></image>
				请上传图例中二维码收款中保存收款码的图片而非黄底截图二维码 
			</view>
			<view class="btn" @click="sub()">
				确认上传
			</view>
			<view class="txt2">
				上传成功后如需更换,请联系客服
			</view>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					bgc: {
						backgroundColor: "#fff",
					},
					imglist:[],
					token: '',
					upurl:'',
					userImgs:'',
					deptId:''
				}
			},
			onLoad(e) {
				this.getQiniuToken()
				console.log(e);
				this.deptId=e.deptId
			},
			methods:{
				sub(){
					if(this.userImgs==''){
						uni.showToast({
							title: '请上传收款码',
							icon: 'none',
							duration: 1000
						});
					}else{
						const encodedUserImgs = encodeURIComponent(this.userImgs);
						this.$u.post(`/appVerify/uploadPaymentCode?collectionCode=${encodedUserImgs}&deptId=${this.deptId}`)
						  .then((res) => {
						    if (res.code == 200) {
						      uni.navigateBack({
						        delta: 1
						      });
						    } else {
						      uni.showToast({
						        title: res.msg,
						        icon: 'none',
						        duration: 2000
						      });
						    }
						  });

					}
				},
				btn(){
					let _this=this
					let math='static/'+_this.$u.guid(20)
					uni.chooseMessageFile({
					  count: 1,
					  type: 'all',
					  success (res) {
					    // tempFilePath可以作为img标签的src属性显示图片
					    const tempFilePaths = res.tempFiles
						// let tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(tempFilePaths)
						// tempFilePaths.forEach(item=>{
						// 	// 上传图片到七牛云
							
						// })
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com', 
							name: 'file',
							filePath: tempFilePaths[0].path,
							formData: {
								token: _this.token, //后端返回的token
								key:'bike/img/'+math
							},
							success: function(res) {
								
								let str = JSON.parse(res.data)
								
								_this.userImgs = _this.upurl +'/'+ str.key
									console.log(_this.userImgs)
							}
						});
					  }
					})
					// uni.chooseFile({
					// 	success: (chooseImageRes) => {
					// 		let tempFilePaths = chooseImageRes.tempFilePaths;
					// 		console.log(tempFilePaths)
					// 		tempFilePaths.forEach(item=>{
					// 			// 上传图片到七牛云
					// 			wx.uploadFile({
					// 				url: 'https://saxn40pko.hn-bkt.clouddn.com', 
					// 				name: 'file',
					// 				filePath: item,
					// 				formData: {
					// 					token: _this.token, //后端返回的token
					// 					key:'yasiimg/web/'+math
					// 				},
					// 				success: function(res) {
								
					// 					let str = JSON.parse(res.data)
					// 					// console.log(str.key)
					// 					// _this.userImgs = 'https://file.langsi.online/' + str.key+'.pdf'
					// 					console.log(_this.userImgs)
					// 					_this.imglist.push(_this.userImgs)
					// 				}
					// 			});
					// 		})
							
							
					// 	}
					// });
				},
				// 获取上传七牛云token
				getQiniuToken() {
					console.log('diaou');
						this.$u.get("/common/qiniu/uploadInfo").then((res) => {
							if (res.code == 200) {
							this.token=res.token
							console.log(res,'resres');
							this.upurl=res.domain
							}
						});
					// this.$u.get('https://v2.ielts.langsi.online/file/getToken').then(res => {
					// 	console.log(res.data);
					// 	this.token = res.data.token
					// }).catch(err => {
					// 	console.log(err)
					// })
					
				},
			}
		}
</script>

<style lang="scss">
	.page{
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			
			margin: 0 auto;
			margin-top: 50rpx;
			width: 626rpx;
			height: 88rpx;
			background: #64B6A7;
			border-radius: 30rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.txt2{
			margin: 0 auto;
			margin-top: 20rpx;
			width: 626rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: red;
		}
		.img{
			position: relative;
			margin: 0 auto;
			
			margin-top: 200rpx;
			width: 300rpx;
			// height: 300rpx;
			image{
				width: 300rpx;
				height: 300rpx;
			}
			.close{
				background: #FFFFFF;
				// border-radius: 50%;
				position: absolute;
				right: 0;
				top: 0;
				width: 50rpx;
				height: 50rpx;
			}
		}
		.txt{
			margin-top: 20rpx;
			width: 100%;
			text-align: center;
			font-size: 30rpx;
			font-weight: 600;
		}
		.tips{
			margin-top: 40rpx;
			padding: 0 30rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: flex-end;
			image{
				width: 170rpx;
				height: 210rpx;
			}
		
			font-size: 28rpx;
			font-weight: 500;
			color: #000;
		}
	}
</style>