YZProjectCloud/yanzhu-ui-app/pages/listdeil/index.vue

<template>
	<view class="box">
		<navbar titlenav="任务详情"></navbar>
		<view class="centerbox">
			<view style="font-size: 18px;line-height: 50rpx;">
				<view style="display: flex;justify-content: space-between;">
					<view style="display: flex;">
						<view style="font-weight: 600;">
							测试工程师
						</view>
						<view style="margin-left: 20rpx;">
							日结
						</view>
					</view>
					<view>
						400/天
					</view>
				</view>
				<view>
					<text>
						公司地址
					</text>
					<text style="margin:0 20rpx;">
						经验不限
					</text>
					<text>
						本科
					</text>
				</view>
			</view>
			<view class="" style="display: flex;align-items: center;margin-top:40rpx;">
				<view class="">
					<u-avatar :src="avatarsrc"></u-avatar>
				</view>
				<view class=""
					style="display: flex;align-items: center;justify-content: space-between;flex: 1;margin-left: 10rpx;line-height: 40rpx;">
					<view class="" style="font-size: 14px;">
						<view class="">
							张先生
						</view>
						<view class="">
							<text>公司名称</text>
						</view>
					</view>
				</view>

			</view>
			<u-divider lineColor="#bbbbbb"></u-divider>
			<view>
				<view style="font-weight: 600;">
					职位详情页
				</view>
				<view v-for="(item, index) in radios" :key="index"
					style="margin: 20rpx 20rpx 0 0;display: inline-block;">
					<u-tag :text="item.lable" :name="index">
					</u-tag>
				</view>
			</view>
			<view style="margin: 40rpx 0;">
				<view class="">
					岗位职责：
				</view>
				<view class="">
					1、
				</view>
				<view class="">
					2、
				</view>
				<view class="">
					3、
				</view>
			</view>
			<view style="margin: 40rpx 0;">
				<view class="">
					任职要求：
				</view>
				<view class="">
					1、
				</view>
				<view class="">
					2、
				</view>
				<view class="">
					3、
				</view>
			</view>
		</view>
		<view style="height: 180rpx;">

		</view>
		<view style="position: fixed;bottom: 0;left: 0;width: 100%;padding: 40rpx;">
			<u-button text="一键投递" type="success" @click="communication()" shape="circle"></u-button>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="center">
			<view style="width: 500rpx;padding: 40rpx;">
				<text>拨打公司电话需要支付1元或xx金豆，确认继续沟通吗</text>
				
				<view class="" style="display: flex;margin-top: 30rpx;">
					<u-button text="取消" @click="show = false" style="width: 100rpx;"></u-button>
					<u-button type="primary" text="继续沟通" style="width: 150rpx;"></u-button>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				orderId: null,
				avatarsrc: '/static/nav.png',
				radios: [{
						lable: 'JAVA',
						checked: false
					},
					{
						lable: '软件测试',
						checked: false
					},
					{
						lable: '性能测试',
						checked: false
					}, {
						lable: 'C++',
						checked: false
					},
					{
						lable: 'Android/iOS测试经验',
						checked: false
					},
					{
						lable: '压力测试',
						checked: false
					}
				],
			};
		},
		onLoad(e) {
			this.orderId = e.id
		},
		methods: {
			//沟通
			communication() {
				this.show = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
		},
	}
</script>

<style lang="scss" scoped>
	.centerbox {
		margin: 40rpx;
	}
</style>