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 }}-{{ detail.maxPrice }}元
			</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 }}
				</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="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
		},
		onPullDownRefresh() {
			this.getDetail()
		},
		onShow() {
			this.getDetail()
		},
		onShareAppMessage(res) {
			return {
				title: this.detail.title,
				path: '/pages_order/work/workDetail?id=' + this.id
			}
		},
		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
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	.box{
		padding: 30rpx;
		background-color: #fff;
		.title{
			font-size: 34rpx;
			font-weight: 900;
			padding-bottom: 20rpx;
		}
		.title2{
			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{
			.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>