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" confirm-color='rgb(34, 197, 114)'></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: 44rpx;
		height: 44rpx;
		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: 22rpx;
				height: 22rpx;
				margin-left: 6px;
			}
		}
	}

	/* 公司--》 */
</style>