zhwl-miniapp/pages/guide/detail.vue
2025-06-26 12:38:35 +08:00

144 lines
4.9 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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>