property/property_ui/manage/pages/community/sqmoneydetail.vue

<template>
	<view class="mdetail">
		<uni-data-picker :map="map" :readonly='readonly' :localdata="assetTree" v-model="datainfo.assetId" >
		</uni-data-picker>
		<!-- <view class="mdtit">车辆资产 / {{datainfo.assetName}}</view> -->
		<view class="mdbox">
			<image :src="yy_code" class="code"></image>
			<view class="down flexcc" @click="getDown">
				<image :src="downico"></image>保存二维码至手机
			</view>
			<image :src="line" class="line mb20"></image>
			<view class="mdlist flex mb14"><view class="tit">资产名称：</view>{{datainfo.equipmentName}}</view>
			<view class="mdlist flex mb14"><view class="tit">资产编号：</view>{{datainfo.equipmentNumber}}</view>
			<view class="mdlist flex mb14"><view class="tit">资产型号：</view>{{datainfo.equipmentModel}}</view>
			<view class="mdlist flex mb14"><view class="tit">存放位置或使用位置：</view>{{datainfo.equipmentLocation}}</view>
			<view class="mdlist flex mb14"><view class="tit">购买价格：</view>{{datainfo.equipmentPrice}}
				<!-- <view class="coby">复制</view> -->
			</view>
			<view class="mdlist flex mb14"><view class="tit">购买时间：</view>{{datainfo.purchaseDate}}</view>
			<view class="mdlist flex mb14"><view class="tit">资产状态：</view>{{kaType(datainfo.equipmentStatus,sbztList)}}</view>
			<view class="mdlist flex mb14"><view class="tit">用途描述：</view>{{datainfo.equipmentPurpose}}</view>
			<view class="mdlist flex mb14"><view class="tit">车牌号：</view>{{datainfo.plateNumber}}</view>
			<view class="mdlist flex mb14"><view class="tit">备注信息：</view>{{datainfo.remark}}</view>
			<view class="mdlist flex mb14"><view class="tit">设备封面：</view>
				<view class="imgs">
					<block v-if="fmphofile&&fmphofile.length">
						<view class="img" v-for="(ite,idx) in fmphofile" :key="idx" @click="getPreview(idx,fmphofile)">
							<image :src="baseUrl+ite" class="pimg"></image>
						</view>
					</block>
				</view>
			</view>
			<view class="mdlist flex mb14"><view class="tit">设备图片：</view>
				<view class="imgs">
					<block v-if="phofile&&phofile.length">
						<view class="img" v-for="(ite,idx) in phofile" :key="idx" @click="getPreview(idx,phofile)">
							<image :src="baseUrl+ite" class="pimg"></image>
						</view>
					</block>
				</view>
			</view>

			<view class="flex1"></view>
			<view class="rhbtn mb12 mt30" v-if="pfrom=='list'&&checkPermi(['wuYe:assets:edit'])" @click="getput">修改</view>
			<view class="time">最近更新时间：2025-03-03  17:35:56</view>
		</view>
	<loading></loading>	
	</view>
</template>

<script>
	import config from '@/config'
	const baseUrl = config.baseUrl;
	import {selectDictValue} from "@/utils/common.js"
	import {getDictionaryFn} from "@/api/system/user.js"
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import {assetsDet,assetTypeTree} from "@/api/work/manage.js"
	import QR from "@/utils/wxqrcode.js" // 二维码生成器 
	export default{
		components:{},
		data(){
			return{
				downico:require('@/manage/static/community/downico.png'),
				line:require('@/manage/static/community/line.png'),
				id:'',
				datainfo:{},
				pfrom:"",
				sbztList:[],
				baseUrl:config.baseUrl,
				readonly:true,
				fmphofile:[],
				phofile:[],
				assetTree:[],
				map:{text:'label',value:'id'},
				yy_code:'',
			}
		},
		onLoad: function(e) {
			this.id=e.id;
			if(e.from){
				this.pfrom=e.from
			}
			this.init()
			this.getDetailFn()
		},
		methods:{
			checkPermi, checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			init(){
				assetTypeTree().then(res=>{
					if(res.code==200){
						this.assetTree=res.data;
					}
				})
				//设备状态
				getDictionaryFn('shebei_status').then(res=>{
					if(res.code==200){
						if(res.data){
							this.sbztList = res.data.map(v => {
								return {
									dictLabel: v.dictLabel,
									dictValue: v.dictValue
								}
							})
						}
					}
				})	
			},
			getDown(urls){
				// var url=this.baseUrl+urls
				var imgbase64url=this.yy_code;
				// #ifdef H5
					var fileName =  `/code${new Date().getTime()}.png`;
					var arr = imgbase64url.split(','),
					        mime = arr[0].match(/:(.*?);/)[1],
					        bstr = atob(arr[1]),
					        n = bstr.length,
					        u8arr = new Uint8Array(n);
					while (n--) {
					    u8arr[n] = bstr.charCodeAt(n);
					}
					var blob = new Blob([u8arr], { type: mime });
										
					// 创建一个下载链接
					var a = document.createElement('a');
					a.download = fileName; // 设置下载文件名
					a.href = URL.createObjectURL(blob); // 将Blob对象转换为URL
					a.style.display = 'none'; // 隐藏下载链接
					document.body.appendChild(a); // 将下载链接添加到文档中
										
					// 模拟点击下载链接
					a.click();
										
					// 清理
					URL.revokeObjectURL(a.href); // 释放URL对象
					document.body.removeChild(a); // 移除下载链接
				// #endif
				// #ifdef MP-WEIXIN
					let base64 = imgbase64url.replace(/^data:image\/\w+;base64,/, ""); //图片替换
					let filePath = wx.env.USER_DATA_PATH + `/qrcode_id_${new Date().getTime()}.png`;
					uni.getFileSystemManager().writeFile({
						filePath: filePath, //创建一个临时文件名
						data: base64, //写入的文本或二进制数据
						encoding: 'base64', //写入当前文件的字符编码
						success: (res) => {
							uni.saveImageToPhotosAlbum({
								filePath: filePath,
								success: () => {
									uni.showToast({
										title: "图片保存成功，请到手机相册查看",
										icon: "none",
										duration: 5000
									})
								},
								fail: (err) => {
									console.log(err);
									uni.showToast({
										title: '图片保存失败',
										icon: "none",
										duration: 5000
									})
								}
							})
						},
						fail: (err) => {
							console.log(err)
						}
					})
					// #endif
					// #ifdef APP-PLUS
					const bitmap = new plus.nativeObj.Bitmap("test");
					bitmap.loadBase64Data(imgbase64url, function () {
						const url = `_doc/qrcode_id_${new Date().getTime()}.png`; // url为时间戳命名方式
						bitmap.save(url, {
							overwrite: true,  // 是否覆盖
							// quality: 'quality'  // 图片清晰度
						}, (i) => {
							uni.saveImageToPhotosAlbum({
								filePath: url,
								success: function () {
									uni.showToast({
										title: "图片保存成功，请到手机相册查看",
										position: "center",
										icon: "none",
									})
									bitmap.clear()
								}
							});
						}, (e) => {
							uni.showToast({
								title: '图片保存失败',
								icon: 'none'
							})
							bitmap.clear()
						});
					}, (e) => {
						bitmap.clear()
					});
					// #endif
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			getDetailFn(){
				var that=this;
				assetsDet(this.id).then(res=>{
					if(res.code==200){
						this.datainfo=res.data;
						var url=this.baseUrl+`/manage/pages/community/sqmoneydetail?id=${this.id}`
						this.yy_code = QR.createQrCodeImg(url, {
								size: parseInt(240),//二维码大小 
								typeNumber:10
						})
						if(res.data.equipmentCoverPhoto){
							this.fmphofile=res.data.equipmentCoverPhoto.split(',')
						}
						if(res.data.equipmentPhotos){
							this.phofile=res.data.equipmentPhotos.split(',')
						}
					}
				})
			},
			getput(){
				this.$tab.navigateTo("/manage/pages/community/sqmoneyadd?id="+this.id)
			},
		}
	}
</script>
<style>
	page{background: #F3F3F0;}
</style>
<style lang="scss" scoped>
.mdetail /deep/ .input-value-border{border: none !important;font-weight: bold;font-size: 34rpx;color: #161616;padding: 16rpx 6rpx;}
.mdetail{background: linear-gradient(180deg, #CCDDFF 0%, #F3F3F0 100%) no-repeat;min-height: 100vh;background-position: top;background-size: 100% 578rpx;padding: 32rpx 30rpx 26rpx;position: relative;display: flex;flex-direction: column;}
// .mdtit{font-weight: bold;font-size: 34rpx;color: #161616;padding: 16rpx 6rpx;}
.mdbox{width: 100%;background: #FFFFFF;border-radius: 20rpx;flex: 1;padding: 84rpx 24rpx 80rpx;box-sizing: border-box;display: flex;flex-direction: column;
	.code{width: 222rpx;height: 222rpx;margin: 0 auto 20rpx;display: block;}
	.down{font-weight: 500;font-size: 24rpx;color: #161616;margin-bottom: 54rpx;
		image{width: 18rpx;height: 20rpx;margin-right: 10rpx;}
	}
	.line{width: 100%;height: 14rpx;}
	.mdlist{font-weight: bold;font-size: 26rpx;color: #272727;
		.tit{font-weight: 500;color: #AAAAAA;flex: 0 0 auto;}
		.coby{font-weight: 500;margin-left: 18rpx;flex: 0 0 auto;font-size: 24rpx;color: #0256FD;}
	}
	.time{font-weight: 500;font-size: 24rpx;color: #AAAAAA;text-align: center;}
	.imgs{display: flex;align-items: center;flex-wrap: wrap;
		.img{width: 142rpx;height:142rpx;border-radius: 20rpx;margin: 0 28rpx 20rpx 0;position: relative;
		&:nth-of-type(4n){margin-right: 0;}
		}
		.pimg{width: 100%;height: 100%;border-radius: 20rpx;}

	}
}

</style>