yd_qycpfb/jp-mobile/pages/product/productInfo.vue

<template>
	<view>
		<view class="overlay" v-if="showfx" @click="showwx">
			<image style="height: 100%;width: 100%;" src="/static/img/zz.png"></image>
		</view>
		
		
		<view :class="['custom-header', { 'is-back': isBack }, bgColor]">
			<view class="back-container" @click="handleBack">
			  <view class="back-text">返回</view>
			</view>
			<view class="content-container">
			  <view class="content-text">{{title}}</view>
			</view>
		  </view>

			
		<!-- <swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="3000" :duration="800">
		  <swiper-item v-for="(item, index) in swiperList" :key="index">
		    <image :src="item.url" class="swiper-item"></image>
		  </swiper-item>
		</swiper> -->
		
		<form class="cu-list menu">
			
			<view class="titlebg2">
				<view class="titlet1" ></view>
				<view class="titlet2" >发布企业</view>								
			</view>
			
			<view class="show1">
				
				<view class="textbg">
					<view class="text1">
						 企业名称
					</view>
					<view class="text2" >
						 {{inputForm.des5}}
					</view>				
				</view>
				
				<view class="textbg">
					<view class="text1">
						 供需类型
					</view>
					<view class="text2" :class="inputForm.des1 === '需' ? 'text33' : 'text44'" >
						 {{inputForm.des1}}
					</view>				
				</view>
				
				<view class="textbg">
					<view class="text1">
						 发布时间
					</view>
					<view class="text2" >
						 {{inputForm.updateDate}}
					</view>				
				</view>
			</view>

			<view class="titlebg2">
				<view class="titlet1" ></view>
				<view class="titlet2" >供需基本信息</view>								
			</view>
			
			
			<view class="textbg">
				<view class="text12">
					 {{t1}}
				</view>
				<view class="text22">
					 {{inputForm.des2}}
				</view>				
			</view>
			
			<view class="textbg">
				<view class="text12">
					 {{t2}}
				</view>
				<view class="text22">
					 {{inputForm.des3}}
				</view>				
			</view>
			
			<view class="textbg">
				<view class="text12">
					 {{t3}}
				</view>
				<view class="text221">
					 {{inputForm.des4}}
				</view>				
			</view>
			
			<view style="height: 30rpx;background-color: white;"></view>
			
			<view class="titlebg2" v-if="swiperList.length>0" >
				<view class="titlet1" ></view>
				<view class="titlet2" >图文详情</view>								
			</view>
			
			<view v-for="(item, index) in swiperList" :key="index" style="width: 100%;">
				<image :src="item.url"  mode="widthFix" style="width: 100%;" >					
				</image>
			</view>
			

					
			
			<view style="height: 40rpx;"></view>


			<view class="padding-xl" v-if="isadmin&&inputForm.des6=='1'">
				<button @click="sharezz" class="cu-btn block bg-blue margin-tb-sm lg">分享此企业账号</button>
			</view>
		</form>
	</view>
</template>

<script>
	import loginService from '@/api/auth/loginService.js'
	import { wxShare } from "@/common/wxutils.js";
	export default {
		onShow() {
			//this.$auth.checkLogin()
		},
		data() {
			return {
				title: '产品供需详情',
				isBack: true, // 是否显示返回按钮
			    backText: '返回', // 返回按钮的文本
			    bgColor: 'bg-blue', // 背景颜色
				autoUpload: false,
				swiperList: [],
				inputForm: {
					id: '',
					name: '',
					industry: '',
					des1: '',
					des2: '',
					des3: '',
					des4: '',
					des5: '',					
					des6: '',
					des7: '',
					des8: '',
					des9: '',
					updateDate: '',
				},
				t1: '产品名称',
				t2: '产品产能',
				t3: '详细描述',
				text1:'',
				text2:'',
				parkList: [],
				ischeck: false,
				isLogin:"",
				username:"",
				isadmin:false,
				lyIndex: '',
				showLYList: [],
				showfx:false,
			}
		},
		created() {
		},
		mounted() {
			
		},
		onLoad(query) {
			this.isLogin=this.$auth.checkisLogin();
			this.username=this.$auth.getUserInfo();
			if(this.username!=undefined&&this.username!=''&&this.username!=null&&this.isLogin!=null){
				if(this.username.loginName=='admin'){
					this.isadmin=true;
				}
			}
			
			if (query && query.ischeck) {
				this.ischeck = true
			}
			if (query && query.id && !query.ischeck) {
				this.title = "修改企业信息";
			}
			this.getComById(query)
			

			
		},
		methods: {
			getParkList(query) {
				loginService.list({
					current: 1,
					size: 1000000,
				}).then(({
					data
				}) => {
					this.parkList = data.records.map((item) => {
						return {
							label: item.buildingName,
							value: item.id
						}
					})
					this.showLYList = this.parkList.map(item => item.label)
					if (query && query.id) {
						loginService.queryByIdPro(query.id).then(({
							data
						}) => {
							this.inputForm = this.recover(this.inputForm, data)
							this.lyIndex = this.parkList.findIndex(item => item.value == this.inputForm.des1)
							console.log(this.lyIndex, '=====================>lyIndex')
						}).catch((e) => {
						
						})
						
					}
				}).catch(e => {
					console.log(e)
				})
			},
			
			handleBack() {
			      // 返回逻辑，比如跳转至上一页
				  this.$router.go(-1);
			      console.log('返回按钮被点击');
			},
			showwx() {
			     this.showfx=false;
			},
			
			getComById(query) {
				loginService.queryByIdPro(query.id).then(({
					data
				}) => {
					//未登录
					// if(this.isLogin==null){
					// 	console.log('未登录')
					// 	//不做处理后台已做处理
						
						if(data.des1=='1'){
							data.des1="供"
						}else{
							data.des1="需"
						}
						this.setData(data);						
					// }else{
					// 	this.setData(data);
					// }
					
				}).catch((e) => {
				
				})
			},
			
			
			//账号分享
			sharezz(){
				var that=this;
				setTimeout(function() {
				  that.showfx=true;
				  console.log("1"+ this.showfx);
				}, 500); // 2000毫秒后执行
				
				loginService.getloginstr(this.inputForm.phone).then(({
					data
				}) => {
					//未登录
					if(data.Id=='0'){
						uni.showModal({
							title: '您无权限分享账号，请联系管!',
							showCancel: true,
							success: (res) => {
								
							}
						});
												
					}else{
						
						this.weixin(data);
						
						// const textArea = document.createElement("textarea");
						// textArea.value = 'https://miniapp.huidutech.com.cn/yd_qycpfbH5/#/pages/index/index?loginid='+data.Id;
						// document.body.appendChild(textArea);
						// textArea.focus();
						// textArea.select();
						// try {
						//   document.execCommand('copy');
						//   uni.showModal({
						//   	title: '已将登录链接复制到剪切板，直接打开微信好友粘贴分享！',
						//   	showCancel: true,
						//   	success: (res) => {
						  		
						//   	}
						//   });
						// } catch (err) {
						//   console.error('Could not copy text', err);
						//   uni.showModal({
						//   	title: '当前不支持分享功能!',
						//   	showCancel: true,
						//   	success: (res) => {
						  		
						//   	}
						//   });
						// } finally { 
						//   document.body.removeChild(textArea); 
						// }
					}
					
				}).catch((e) => {
				
				})
				
				
				

				
				  
				
				
				
				
			},
			
			
			    async weixin(data) {
					

			      try {

			        if ( data) {
			          //微信加签
			          var obj = {
			            appId: data.appid,
			            nonceStr: data.nonceStr,
			            signature: data.signature,
			            timestamp: data.timestamp,
						Id: data.Id,
			          }
			          //分享数据，这段主要是为了在hash模式下分享出去的链接不被浏览器截取，保证完全把链接分享出去（link的链接可以自己拼，无须与当前页面的后缀参数之类的内容完全一致）
			          let shareData = {
			            title: '‘都企供需’线上平台',
			            desc: '点击直接登录',
			            imgUrl: 'https://miniapp.huidutech.com.cn/yd_qycpfbH5/static/img/titlebg.jpg',
			            link: 'https://miniapp.huidutech.com.cn/yd_qycpfbH5/#/pages/index/index?loginid='+data.Id + "&t=" + data.timestamp + "&Content=1", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致																		
						
			          };

			          //引用
			          wxShare(obj, shareData);
					  
			        } else {
					  uni.showModal({
					  	title: '获取sdk参数失败!',
					  	showCancel: true,
					  	success: (res) => {
					  		
					  	}
					  });
			        }
			      } catch (err) {
			        //
			      } finally {
			        //
			      }
			    },
			
			
			setData(data){
				this.inputForm = this.recover(this.inputForm, data)
				
				
				if(this.inputForm.des1=='供'){
					this.t1='可供产品';
					this.t2= '可供数量';
				}else{
					this.t1='需求名称';
					this.t2= '需求数量';
				}
				
				
				let pics=this.inputForm.des6.split(",");
				console.log(pics)
				pics.forEach(item => {
					if(item!=''){
						this.swiperList.push({
							'url': "http://47.97.69.114:8089/yd_qycpfbWeb/"+item,
						})
					}
					
				})
				
				console.log(this.swiperList)

			},
			
			goToCompany(companyName) {
				  //https://www.qcc.com/web/search?key=
					
				  window.open("https://www.qcc.com/web/search?key="+companyName);
			      //window.location.href = `https://www.qcc.com/company/${encodeURIComponent(companyName)}`;
			},
			
			call1(){
				
				// uni.navigateTo({
				// 	url: '/pages/index/AudioToWord'
				// })
				
				// uni.navigateTo({
				// 	url: '/pages/comList/comList'
				// })
				
				//未登录
				if(this.isLogin==null){
					uni.showModal({
						title: '您还未登录，是否跳转登录页面？',
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								
								uni.reLaunch({
									url: '/pages/login/login'
								})
								
							}
						}
					});
				}else{
					window.location.href = 'tel:'+this.inputForm.phone;
				}
								
			},
			
			call2(){
				//未登录
				if(this.isLogin==null){
					uni.showModal({
						title: '您还未登录，是否跳转登录页面？',
						showCancel: true,
						success: (res) => {
							if (res.confirm) {
								
								uni.reLaunch({
									url: '/pages/login/login'
								})
								
							}
						}
					});
				}else{
					window.location.href = 'tel:'+this.inputForm.bz6;
				}
			},
			





			
		}
	}
</script>
<style>
	/* .file-title) {
	    font-size: 17px !important;
	} */
	input,textarea{
		color: #8799a3;
	}
	
	.swiper {
		width: 750rpx;
		height: 310rpx;
	}
	
	.swiper-item {
		width: 750rpx;
		height: 310rpx;
		background-color: aliceblue;
	}
	.show1{
		background-color: #2752eb;
		padding-left: 8rpx;
	}
	.textbg{
		display: flex;
		background-color: white;
		padding-top: 29rpx;
	}
	.text1{
		width: 200rpx;
		margin-left: 30rpx;
		color: #333333;
		font-size: 30rpx;
	}
	.text12{
		width: 200rpx;
		margin-left: 30rpx;
		color: #000000;
		font-size: 29rpx;
	}
		
	.text2{
		flex: 1;
		color: #000000;
		font-size: 30rpx;
		padding-bottom: 2rpx;
	}
	
	.text33{
		flex: 1;
		color: #FF4500;
		font-size: 30rpx;
		padding-bottom: 2rpx;
	}
	
	.text44{
		flex: 1;
		color: #2E8B57;
		font-size: 30rpx;
		padding-bottom: 2rpx;
		
	}
	
	.text22{
		flex: 1;
		color: #666666;
		font-size: 29rpx;
		padding-bottom: 2rpx;
	}
	
	.text221{
		flex: 1;
		color: #666666;
		font-size: 29rpx;
		padding-right:15rpx ;
		padding-bottom: 2rpx;
	}
	.text3{
		display: flex;
		color: #000000;
	}
	.phone{
		display: flex;
		color: #1E8AD7;
		padding-left: 5rpx;
		padding-right: 5rpx;
		font-size: 30rpx;
		align-items: center
	}
	.phoneimg{
		margin-left: 10rpx;
		width: 35rpx;
		height: 35rpx;
	}
	.titlebg2{
		display: flex;
		background-color: white;
		padding-left: 22rpx;
		padding-top: 35rpx;
		padding-bottom: 25rpx;
		margin-bottom: 2rpx;
	}
	.titlet1{
		width: 7rpx;
		margin-top: 7rpx;
		margin-bottom: 7rpx;
		background-color: #2752eb;
		margin-right: 8rpx;
	}
	.titlet2{
		font-weight: 800;
		color: #2752eb;
	}
	.overlay{
	  position: fixed; /* 固定定位，覆盖整个页面 */
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
	  z-index: 1000; /* 确保遮罩在页面内容之上 */
	}
	
	
	.custom-header {
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  padding: 10px;
	  width: 100%;
	}
	
	.is-back {
	  position: relative;
	}
	
	.back-container {
	  position: absolute;
	  left: 10px;
	  cursor: pointer;
	}
	
	.back-text {
	  color: white; /* 返回按钮文本颜色 */
	}
	
	.content-container {
	  flex: 1;
	  text-align: center;
	}
	
	.content-text {
	  color: white; /* 标题文本颜色 */
	  font-weight: bold;
	}
	
	/* 背景颜色 */
	.bg-blue {
	  background-color: #4285f4; /* 假设这是一个蓝色背景 */
	}
</style>