city-store-transfer/pages/detail/detail.vue

<template>
	<view class="detail" ref="viewref">
		<view class="swiper" v-if="search">
			<u-swiper :list="shopInfo.pics" height="500rpx" radius="0"></u-swiper>
		</view>
		<view class="sub-detail u-flex">
			<view class="title">
				{{shopInfo.tt}}
			</view>
			<view>
				<u-grid :col="3">
					<u-grid-item>
						<view class="grid-textup">{{shopInfo.zujin}}元/月</view>
						<view class="grid-text">租金</view>
					</u-grid-item>
					<u-grid-item v-if="type==1||type==2">
						<view class="grid-textup">{{shopInfo.zhuanrangfei}}万元</view>
						<view v-if="search" class="grid-text">转让费</view>
						<view v-else class="grid-text">预计投资</view>
					</u-grid-item>
					<u-grid-item>
						<view class="grid-textup">{{shopInfo.mianji}}m²</view>
						<view class="grid-text">面积</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<view class="bgc">

		</view>
		<view class="location-detail">
			<text>行业：{{shopInfo.trade1+'-'}}{{shopInfo.trade2}}</text>
			<text>区域：{{shopInfo.area1}}</text>
			<text v-if="search">地址：{{shopInfo.adress}}</text>
		</view>
		<view class="bgc">

		</view>
		<view class="seller-shop-detail">
			<view class="avator">
				<u-avatar :src="shopInfo.avatar"></u-avatar>
				<u-cell :title="shopInfo.lianxiren" :label="shopInfo.mobile" :border="false"></u-cell>
			</view>
			<u-divider :height="5"></u-divider>
			<u-cell title="店铺介绍" :label="shopInfo.content" label-style="color = #5D5D5D;font-size: 24rpx;"></u-cell>
		</view>

		<view class="bottom">
			<view class="bot-tab">
				<view class="tab-left">
					<view class="share" @click="share()">
						<button open-type="share" session-from="sessionFrom" class="service-btn">
							<image src="../../static/shoplist/share.png" style="width: 41rpx;height: 58rpx;"></image>
						</button>
					</view>
					<button open-type="contact" session-from="sessionFrom" class="service-btn">
						<image src="../../static/shoplist/service.png" style="width: 41rpx;height: 58rpx;margin-top: 11px;"></image>
					</button>
				</view>
				<view class="tab-right" @click="phonecall()">
					<view class="call">
						<text>打电话</text>
					</view>
				</view>
				<u-modal :show="showM" showCancelButton closeOnClickOverlay="false" confirmText="是" cancelText="否"
					@confirm="confirm" @cancel="cancel">
					<view>
						<!-- <view>{{shopInfo.mobile}}</view> -->
						<text>是否拨打该联系人电话?</text>
					</view>
				</u-modal>
			</view>
		</view>
		<view v-if="search" class="bug-figure">

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shopInfo: {},
				showM: false,
				search: true,
				type: ''
			}
		},
		onLoad: function(options) {
			console.log('detail', options);
			this.type = options.type
			if (options.search == "1") {
				this.search = false
			} else {
				this.search = true
			}
			//点击轮播图跳转详情, 传递的参数id, type
			if (options.id !== undefined && options.type !== undefined) {
				this.getDetail(options.type, options.id)
			}
		},
		methods: {
			phonecall() {
				this.showM = true
			},
			share() {
				console.log('分享');
			},
			getDetail(type, id) {
				this.$api.getShopDetail(type, id).then(res => {
					const data = res.data.data
					if (res.data.code == 1) {
						console.log('data.pics', data.pics);
						var arr = [];
						var arr1 = [];
						let obj = {}
						arr = data.pics.split(",")
						arr.map(item => {
							obj = this.$api.imgUrl + item
							arr1.push(obj)
						})
						data.pics = arr1
						console.log('arr', arr1);
						data.avatar = this.$api.imgUrl + data.avatar
						this.shopInfo = data
					}
				})
			},
			confirm() {
				this.showM = false
				let phone = this.shopInfo.mobile
				phone = phone.toString()
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			cancel() {
				this.showM = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F8F8F8;
	}



	.service-btn {
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.service-btn::after {
		border: none;
	}

	.sub-detail {
		margin: 30rpx 16rpx;
	}

	.bgc {
		background-color: #F8F8F8;
		height: 30rpx;
	}

	.detail {
		// background-color: #F8F8F8;
		height: 100%;
	}

	.bug-figure {
		height: 130rpx;
		background-color: #F8F8F8;
	}

	.title {
		font-size: 30rpx;
		font-weight: 500;
		background-color: #fff;
		margin-bottom: 50rpx;
	}

	.grid-textup {
		font-weight: 500;
		color: #CC3333;
		font-size: 30rpx;
	}

	.grid-text {
		color: #B3B3B3;
		font-size: 24rpx;
	}

	.location-detail {
		display: flex;
		// margin-top: 50rpx;
		background-color: #fff;
		flex-direction: column;
		padding-left: 16rpx;
		line-height: 33px;
		font-size: 15px;
	}

	.seller-shop-detail {
		/deep/ .u-divider {
			margin: 28rpx 0 0 0 !important;
		}
	}

	.avator {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 16rpx;
		margin-top: 28rpx;

		/deep/ .u-cell__body {
			padding: 0 12rpx !important;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		z-index: 100;
		// height: 100rpx;
		// bottom: calc(var(--window-bottom) + 20px);
	}

	.bot-tab {
		display: flex;
		// flex: 1;
		justify-content: space-evenly;
	}

	.tab-left {
		width: 50%;
		display: flex;
		justify-content: space-around;
		height: 50px;
	}


	.tab-right {
		width: 50%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: linear-gradient(to right, #E86262, #CC3333);
	}

	.share {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 50%;
	}

	.call {
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
</style>