first commit
This commit is contained in:
144
pages/guide/detail.vue
Normal file
144
pages/guide/detail.vue
Normal file
@@ -0,0 +1,144 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user