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">
				<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 class="tag-list">
					<view>
						距您14.6千米
					</view>
				</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'
	export default {
		mixins: [mixinsList],
		components : {
			commentList,
		},
		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
					}
				})
			},
		}
	}
</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;
			}
		}
		
		.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>