yiliangyiyun-app/pages/grain_pulse/details.vue

<template>
	<view class="main_content">
		<view v-if='sitePhotoAddress.length>0' class='swiper'>
			<swiper class="screen-swiper header-swiper" ::class="dotStyle?'square-dot':'round-dot'"
				:indicator-dots="false" :circular="true"  interval="5000" 
				 :current="status" @change="topSwiperTab">
				<swiper-item class="swiper-item" v-for="(item,index) in sitePhotoAddress" :key="index"
					:class="status==index?'text-white':''" @click="preview(sitePhotoAddress,index)">
					<image  :src="item"></image>
					<!-- 	<view style='position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);'>11111</view> -->
				</swiper-item>
			</swiper>
			<view class="dots">
				<text class='Regular'>{{status+1}} / {{sitePhotoAddress.length}}</text>
			</view>
			<view class='functionality'>
				<image @click='show=true' class='jubao' src="../../static/img/liangmai/jubao.png" mode=""></image>
				<image @click='collect' class='collect' :src="companylist.collectionCompanyList.length>0?'../../static/img/liangmai/shoucang1.png':'../../static/img/liangmai/shoucang-2.png'" mode=""></image>
			</view>
		</view>
		<view class='company'>
			<view style='padding:21px;padding-bottom:0;'>
				<view style='font-size:24px;' class='Medium'>{{companylist.compName}}</view>
				<view style='margin-top:3px;' class='flex'>
					<view class='aptitude'>
						<image class='aptitudeImage' :src="aptiutudeStatus?'../../static/img/liangmai/bg_no_check.png':'../../static/img/liangmai/bg_check.png'" mode=""></image>
						<text class='aptitudeText Medium'>资质</text>
					</view>
					<view class='Regular' style='font-size:13px;'>主营：<text style='display:inline-block;margin:3px;' v-for='item in mainBusiness'> {{item}} </text></view>
				</view>
				<view style='margin:12.5px 0;' class='flex'>
					<view v-for='item in label' class="tag Regular">
						{{item}}
					</view>
				</view>
				
				
			</view>
			<view class="generalSituation">
				<view class="title Medium">企业概况</view>
				<view class="content Regular">
					{{companylist.companyContant}}
					</view>
			</view>
			<view class='contactWay'>
				<view class="title Medium">联系方式</view>
				<view class='contactWayContent'>
					<view class='flex linkman'>
						<view style='flex:1;' class='title Regular'>联系人</view>
						<view style='flex:3;'>
							<view class='Regular linkmanItem' v-for='item in companylist.settledCompanyContacts'>
								<view @click="contactUs(item)">
									{{item.contacts}} <image class="phone" src="../../static/img/liangmai/dianhau.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flex mailbox">
						<view style='flex:1;' class='title Regular'>邮箱</view>
						<view class='Regular' style='font-size:14px;flex:3;'>
							{{companylist.email}}
						</view>
					</view>
					<view v-show="companylist.fax" class="flex fax">
						<view style='flex:1;' class='title Regular'>传真</view>
						<view class='Regular' style='font-size:14px;flex:3;'>
							{{companylist.fax}}
						</view>
					</view>
					<view class="flex fax">
						<view style='flex:1;' class='title Regular'>地址</view>
						<view style='font-size:14px;flex:3;' class='Regular'>
							{{companylist.province}}{{companylist.city}}{{companylist.area}}{{companylist.detailedAddress}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-picker mode="selector" v-model="show"  @confirm='selecttype' :range="selector"></u-picker>
	</view>
	
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
	    components: {
	        
	    },
		data() {
			return {
				imagelist:[
					{url:'../../static/img/authentication/banklow(2).png'},
					{url:'../../static/img/authentication/banklow(2).png'},
					{url:'../../static/img/authentication/banklow(2).png'}
				],
				linkmanList:[
					{name:'廖经理',phone:'18513069273'},
					{name:'廖经理',phone:'18513069273'},
					{name:'廖经理',phone:'18513069273'},
					{name:'廖经理',phone:'18513069273'},
				],
				id:0,
				dotStyle: false,
				status: 0,
				companylist:{
					settledCompanyContacts:[]
				},
				show:false,
				mainBusiness:[],
				label:[],
				sitePhotoAddress:[],
				selector:['纠错','举报'],
				aptiutudeStatus:false,
				iscollect:false
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options){
			this.id=options.id
		},
		onShow(){
			var that=this
			this.$nextTick(function(){
				that.$api.doRequest('get','/settledCompanyInfo/getSettledCompanyInfo',{id:that.id,pcFlag:2}).then(res => {
				if(res.data.code==200){
					that.companylist=res.data.data
					that.mainBusiness=res.data.data.mainBusinessType.split(',')
					if(res.data.data.label){
						that.label=res.data.data.label.split(',')
					}
					that.sitePhotoAddress = []
					if(res.data.data.attachmentAddress){
						that.sitePhotoAddress.push(res.data.data.attachmentAddress)
					}
					if(res.data.data.sitePhotoAddress){
						var tmp=res.data.data.sitePhotoAddress.split(',')
						for(var i=0;i<tmp.length;i++){
							if(tmp[i] && tmp[i] != res.data.data.attachmentAddress){
								that.sitePhotoAddress.push(tmp[i])
							}
						}
						console.log("that.sitePhotoAddress",that.sitePhotoAddress)
					}
				}
			})
			})
			
		},
		methods: {
			preview(img,index){
				console.log("preview",img,index)
				uni.previewImage({
				    urls: img,
				    current:index
				});
			},
			contactUs(item) {
				const that = this
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber: item.contactsPhone, 
				
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
						that.contactUs()
					}
				  });		
			},
			topSwiperTab(e) {
				var that = this;
				this.status = Number(e.target.current);
			},
			collect(){
				var that=this
				if(this.companylist.collectionCompanyList.length>0){
					this.$api.doRequest('post','/settledCompanyInfo/api/collectionNot',{id:this.companylist.id,loginPhone:this.userInfo.phone}).then(res => {
						if(res.data.code==200){
								uni.showToast({
									title: '取消收藏',
									icon: 'none',
									duration: 2000
								})
							that.$api.doRequest('get','/settledCompanyInfo/getSettledCompanyInfo',{id:that.id,pcFlag:2}).then(res => {
								if(res.data.code==200){
									that.companylist=res.data.data
									that.mainBusiness=res.data.data.mainBusinessType.split(',')
									if(res.data.data.label){
										that.label=res.data.data.label.split(',')
									}
									that.sitePhotoAddress = []
									if(res.data.data.attachmentAddress){
										that.sitePhotoAddress.push(res.data.data.attachmentAddress)
									}
									if(res.data.data.sitePhotoAddress){
										var tmp=res.data.data.sitePhotoAddress.split(',')
										for(var i=0;i<tmp.length;i++){
											if(tmp[i] && tmp[i] != res.data.data.attachmentAddress){
												that.sitePhotoAddress.push(tmp[i])
											}
										}
									}
								}
							})
						}
					})
				}else{
					this.$api.doRequest('post','/settledCompanyInfo/api/collection',{id:this.companylist.id,compName:this.companylist.compName,loginPhone:this.userInfo.phone}).then(res => {
						if(res.data.code==200){
							uni.showToast({
								title: '收藏成功',
								icon: 'none',
								duration: 2000
							})
							that.$api.doRequest('get','/settledCompanyInfo/getSettledCompanyInfo',{id:that.id,pcFlag:2}).then(res => {
								if(res.data.code==200){
									that.companylist=res.data.data
									that.mainBusiness=res.data.data.mainBusinessType.split(',')
									if(res.data.data.label){
										that.label=res.data.data.label.split(',')
									}
									that.sitePhotoAddress = []
									if(res.data.data.attachmentAddress){
										that.sitePhotoAddress.push(res.data.data.attachmentAddress)
									}
									if(res.data.data.sitePhotoAddress){
										var tmp=res.data.data.sitePhotoAddress.split(',')
										for(var i=0;i<tmp.length;i++){
											if(tmp[i] && tmp[i] != res.data.data.attachmentAddress){
												that.sitePhotoAddress.push(tmp[i])
											}
										}
									}
								}
							})
						}
					})
				}	
			},
			selecttype(e){
				console.log(e)
				if(e[0]==1){
					uni.navigateTo({
						url:'/pages/grain_pulse/jubao?id='+this.companylist.id+'&compName='+this.companylist.compName
					})
				}else{
					uni.navigateTo({
						url:'/pages/grain_pulse/errorcorrection?id='+this.companylist.id+'&compName='+this.companylist.compName
					})
				}
			},
			jubao(){
				
			},
		}
	}
</script>

<style lang='scss' scoped>
	.main_content{
		margin-top: 30rpx;
	}
	/* 《--轮播 */
	.swiper{
		position:relative;
		height:281.5px;
	}
	.screen-swiper{
		height:281.5px;
	}
	.swiper .dots{
		position:absolute;
		bottom:53px;
		background: rgba(255, 255, 255, 0.4);
		border-radius: 0px 11px 11px 0px;
		width: 58.5px;
		height: 23px;
		line-height:23px;
		text-align:center;
		padding:3px;
		color:#FFFFFF;
	}
	.functionality{
		position: absolute;
		right:0;
		bottom:53px;
	}
	.jubao{
		width:22px;height:19px;
		margin-right:25px;
	}
	.collect{
		width:22px;height:22px;
		margin-right:19.5px;
	}
	/* 轮播--》 */
	/*《--公司 */
	.company{
		background: linear-gradient(180deg, #FFFFFF 0%, #F7F8FC 100%);
		height:550px;
		border-radius:20px;
		margin-top:-38px;
		position: relative;
		z-index: 3;
	}
	.aptitude,.aptitudeImage{
		width: 38px;
		height:20px;
	}
	.aptitude{
		position:relative;
		margin-right:5px;
	}
	.aptitudeText{
		color:#8B511E;
		position:absolute;
		left:0;
		width:40px;
		top:0;
		text-align:center;
		width:100%;
		line-height: 20px;
		font-size:11px;
		height:100%;
	}
	.tag{
		background:#F5F6F9;
		padding:2.5px 6.5px;
		border-radius:3px;
		font-size:11px;
		margin-right:11.5px;
	}
	.generalSituation{
		background:#fff;
		margin:9px;
		padding:12px;
		border-radius:10px;
		.title{
			font-size:16px;
			margin:0 0 9.5px;
		}
		.content{
			font-size:12px;
			color:#676E80;
		}
	}
	.contactWay{
		margin:9px;
		padding:11.5px 13px;
		background:#fff;
		border-radius:10px;
		>.title{
			font-size:16px;
			color:#333;
			margin-bottom:12px;
		}
		.contactWayContent{
			.linkman>.title,.mailbox>.title,.fax>.title,.address>.title{
				color:#676E80;
				font-size:14px;
			}
			.mailbox,.fax,.address{
				margin-bottom:10px;
			}
			.linkmanItem{
				margin-bottom:10px;
			}
			.phone{
				width:14px;height:14px;margin-left:6px;
			}
		}
	}
	/* 公司--》 */
</style>