universal-wechat-uniapp-241007/pages_order/work/workDetail.vue

<template>
	<view class="page">
		<navbar title="详情" leftClick @leftClick="$utils.navigateBack" />
		
		<view class="box">
			<view class="title">
				{{ detail.title }}
			</view>
			
			<view class="price">
				{{ detail.minPrice }}
				<!-- <text>-{{ detail.maxPrice }}元</text> -->
			</view>
		
			<view class="line">
				<!-- <view>
					<image src="../static/work/address.png" mode=""></image>
					{{ detail.workAge }}
				</view> -->
				<view>
					<!-- <image src="../static/work/g.png" mode=""></image> -->
					工龄：{{ detail.workYear }}
				</view>
				<view>
					<!-- <image src="../static/work/x.png" mode=""></image> -->
					<!-- {{ detail.school }} -->
					该职位位于{{ $dayjs(detail.createTime).format('YYYY-MM-DD') }}
				</view>
			</view>
			
			<!-- <view class="line">
				该职位位于{{ $dayjs(detail.createTime).format('YYYY-MM-DD') }}
			</view> -->
			
			<!-- <view class="userHead">
				<userHead :headImage="detail.headImage"
				:name="detail.name" :phoneCall="detail.phone"/>
			</view> -->
			
			
			
			<view class="info">
				<view class="title2">
					<text>职位要求</text>
				</view>
				
				<view 
				class="text" 
				v-html="detail.school">
				</view>
			</view>
			
			<!-- 工作地址地图卡片 -->
			<view class="address-section" v-if="detail.latitude && detail.longitude">
				<view class="title2">
					工作地址
				</view>
				<mapCard 
					:latitude="detail.latitude"
					:longitude="detail.longitude"
					:address-name="detail.address"
					:address-detail="detail.addressDetail"
					@mapClick="onMapClick"
				/>
			</view>
			
			<!-- 备用地址显示（当没有经纬度时） -->
			<view class="address" v-else>
				<view class="title2">
					工作地址
				</view>
				<view class="line"
				style="justify-content: space-between;">
					{{ detail.address }}
					<uv-icon 
					size="30rpx"
					color="666"
					name="arrow-right"
					></uv-icon>
				</view>
			</view>
			
			<view class="info">
				<view class="title2">
					<text>职位详情</text>
					
					<view>
						<uv-icon
						size="30rpx"
						color="666"
						name="star"
						></uv-icon>
						收藏
					</view>
				</view>
				
				<view class="tag-list">
					<view v-for="(t, i) in detail.iconText && detail.iconText.split('、')">
						{{ t }}
					</view>
				</view>
				
				<view 
				class="text" 
				v-html="detail.jobDetails">
				</view>
				<!-- <view 
				class="text">
					<uv-parse :content="detail.workDetail"></uv-parse>
				</view> -->
			</view>
			
		</view>
		
		<commentList
		@getData="getData"
		:list="list"
		:params="params"
		/>
	</view>
</template>

<script>
	import mixinsList from '@/mixins/list.js'
	import commentList from '../components/list/comment/commentList.vue'
	import mapCard from '@/components/base/mapCard.vue'
	export default {
		mixins: [mixinsList],
		components : {
			commentList,
			mapCard,
		},
		data() {
			return {
				id : 0,
				detail : {},
				collectionFlag : false,
				mixinsListApi : 'getCommentPage',
				params : {
					type : '2',
					orderId : '',
					name : '',
				},
			}
		},
		onLoad(options) {
			this.id = options.id
			
			
			this.queryParams.type = this.params.type
			this.queryParams.orderId = options.id
			
			this.params.orderId = options.id
			
			// 设置分享路径
			this.share.path = '/pages_order/work/workDetail?id=' + this.id
		},
		onPullDownRefresh() {
			this.getDetail()
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail(){
				let data = {
					id : this.id
				}
				if(uni.getStorageSync('token')){
					data.token = uni.getStorageSync('token')
				}
				this.$api('getJobDetail', data, res => {
					if(res.code == 200){
						
						this.params.name = res.result.title
						
						this.detail = res.result
						this.detail.jobDetails = this.$utils.stringFormatHtml(res.result.jobDetails)
						this.collectionFlag = res.result.collectionFlag
						
						// 设置分享信息
						this.share.title = res.result.title
					}
				})
			},
			
			// 地图点击事件处理
			onMapClick(mapData) {
				console.log('工作地址地图点击:', mapData);
			}
		}
	}
</script>

<style scoped lang="scss">
.page{
	.box{
		padding: 30rpx;
		background-color: #fff;
		.title{
			font-size: 34rpx;
			font-weight: 900;
			padding-bottom: 20rpx;
		}
		.title2{
			margin: 20rpx 0;
			font-size: 28rpx;
			font-weight: 900;
			display: flex;
			justify-content: space-between;
			align-items: center;
			view{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
		.price{
			font-size: 30rpx;
			font-weight: 900;
			color: $uni-color;
		}
		.line{
			display: flex;
			font-size: 24rpx;
			color: #666666;
			margin-top: 30rpx;
			image{
				width: 30rpx;
				height: 30rpx;
			}
			&>view{
				margin-right: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		.userHead{
			padding: 50rpx 0;
			border-bottom: 1px solid #00000011;
		}
		
		.address{
			padding: 30rpx 0;
			.line{
				margin-top: 20rpx;
			}
		}
		
		.address-section{
			padding: 30rpx 0;
		}
		
		.info{
			margin: 20rpx 0;
			.text{
				font-size: 24rpx;
				color: #666666;
				line-height: 44rpx;
			}
		}
	}
}
.tag-list{
	display: flex;
	flex-wrap: wrap;
}
.tag-list > view{
	margin: 10rpx;
	padding: 10rpx;
	background-color: #EFF2F1;
	font-size: 24rpx;
	border-radius: 10rpx;
}
</style>