zhwl-miniapp/pages/guide/detail.vue

<template>
    <view class="waper" :style="'padding-bottom: ' + windowBottom + 'px'">
        <u-navbar :autoBack="true" left-icon-color="#fff" :placeholder="true" bgColor="transparent">
        	<view slot='center' style="font-size: 36rpx; font-weight: 500; color: #fff;">导游详情</view>
        </u-navbar>
        <view class="banner"></view>
        <view class="waper_box" v-if="detail">
			<view class="card">
				<view class="img">
					<image :src="$utils.setImgUrl(detail.image.split(',')[0])" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="title">
						<view class="name">{{detail.name}}</view>
						<view class="gender gender1" v-if="detail.gender == 1">
							<u-icon name="woman" color="#FF607D" size="28rpx"></u-icon>
						</view>
						<view class="gender gender2" v-if="detail.gender == 0">
							<u-icon name="man" color="#5599FA" size="28rpx"></u-icon>
						</view>
					</view>
					<view class="tags">
						<view v-if="detail.label" class="tag" v-for="(item, index) in getLabelList(detail.label)" :key="index">{{item}}</view>
					</view>
					<!-- <view class="code">导游证号：{{detail.tourGuideIdNumber}}</view> -->
				</view>
				<view class="label" v-if="getLavel(detail.grade)">{{getLavel(detail.grade)}}</view>
			</view>
			<view class="abstract">
				<view class="title">导游简介</view>
				<view class="describe">{{detail.introduction}}</view>
			</view>
			<view class="abstract">
				<view class="title">导游公告</view>
				<view class="describe">{{detail.guideNoticeContent}}</view>
			</view>
            <view class="btn" v-if="detail.phone" @click="callTel">立即咨询</view>
        </view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            detail: null,
            windowBottom: 0,
			gradeList: []
        }
    },
    async onLoad (options) {
        this.windowBottom = this.$safeAreaBottom + uni.upx2px(152);
		this.common();
		this.detail = JSON.parse(options.detail);
    },
    methods: {
        callTel () {
            uni.makePhoneCall({ phoneNumber: this.detail.phone });
        },
		async common() {
			const params = {
				dictType: 'custom_guide_grade'
			}
			let info = await this.$http.common(params)
			if (info.code === 200) {
				this.gradeList = info.data
			} else {
				uni.$u.toast(info.msg);
			}
		},
		getLabelList(m) {
			let arr = []
			if (m) {
				arr = m.split('，').slice(0, 3);
			}
			return arr;
		},
		getLavel(e) {
			let f = this.gradeList.find(m => m.dictValue == e)
			if (f) {
				return f.dictLabel;
			}
			return null;
		}
	}
}
</script>

<style lang="scss">
.waper{ position: relative; }
.banner{ width: 100%; height: 700rpx; background: linear-gradient( 180deg, #03AE80 0%, rgba(3,174,128,0) 100%); position: absolute; left: 0; top: 0; }
.waper_box{
    width: 100%; box-sizing: border-box; padding: 32rpx; position: relative; z-index: 3;
	.card {
		width: 686rpx; height: 204rpx; background: #FFFFFF; border-radius: 10rpx; box-sizing: border-box; display: flex; align-items: center; padding: 32rpx; background-color: #fff; position: relative;
		.img{
			width: 140rpx; height: 140rpx; margin-right: 24px; display: flex; align-items: center; border-radius: 50%; overflow: hidden;
			image{ width: 100%; }
		}
		.info{
			flex: 1;
			.title{
				display: flex; align-items: center;
				.name {
					font-weight: bold; font-size: 32rpx; color: #333333; margin-right: 12rpx;
				}
				.gender {
					width: 36rpx; height: 36rpx; border-radius: 18rpx; position: relative;
					/deep/.u-icon {
						position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
					}
				}
				.gender1 { background-color: rgba(255,96,125,0.2); }
				.gender2 { background-color: rgba(85,153,250,0.2); }
			}
			.tags {
				height: 38rpx; margin-top: 11rpx; display: flex; align-items: center;
				.tag {
					border-radius: 2rpx; font-weight: 500; font-size: 22rpx; line-height: 26rpx; padding: 4rpx 8rpx; margin-right: 12rpx;
					&:nth-child(1) { background: rgba(255,169,27,0.1); color: #FFA91B; }
					&:nth-child(2) { background: rgba(5,175,129,0.1); color: #05AF81; }
					&:nth-child(3) { background: rgba(85,153,250,0.1); color: #5599FA; }
				}
			}
			.code {
				font-size: 24rpx; color: #999999; line-height: 33rpx; margin-top: 14rpx;
			}
		}
		.label {
			position: absolute; right: 0; top: 0; height: 45rpx; line-height: 45rpx; background: #05AF81; border-radius: 0rpx 10rpx 0rpx 20rpx; padding: 0 12rpx; font-size: 24rpx; color: #FFFFFF;
		}
	}
	.abstract {
		margin-top: 20rpx; padding: 32rpx; background: #FFFFFF; border-radius: 10rpx;
		.title {
			font-weight: bold; font-size: 32rpx; color: #333333;
		}
		.describe {
			margin-top: 20rpx; font-size: 28rpx; color: #666666; line-height: 50rpx;
		}
	}
    .btn{ width: 100%; margin-top: 32rpx; height: 96rpx; text-align: center; line-height: 96rpx; background: #03AE80; border-radius: 64rpx; color: #fff; font-size: 32rpx; }
}
</style>