feat：新增个人信息修改、任务组件位置调整、区域滚动组件

common/system_popup/system_popup.vue

@@ -1,6 +1,5 @@
 <template>
-	<view class="system_content column-c" :style="{paddingTop:`${$tools.topHeight()}px`}"
-		>
+	<view class="system_content column-c" :style="{paddingTop:`${$tools.topHeight()}px`}">
 		<view class="column justify-center avatar r-100">
 			<view class="avatar r-100" style="background-color: rgba(0, 0, 0, 0.1);"></view>
 			<view class="row-c avatar_name m-l20">
@@ -35,7 +34,7 @@
 					id: 2
 				}, {
 					icon: "/static/img/index/index-phone.png",
-					name: '手机号',
+					name: '修改手机号',
 					id: 3
 				}, {
 					icon: "/static/img/index/index-phone.png",
@@ -51,9 +50,14 @@
 			moveHandle() {
 				return false
 			},
-			onGoSetting(item){
+			onGoSetting(item) {
+				if (item.id == 1) {
+					return uni.navigateTo({
+						url: `/page_subpack/personal_details/personal_details?id=${item.id}&title=${item.name}`
+					})
+				}
 				uni.navigateTo({
-					url:`/page_subpack/system_setting/system_setting?id=${item.id}&title=${item.name}`
+					url: `/page_subpack/system_setting/system_setting?id=${item.id}&title=${item.name}`
 				})
 			}
 		}
@@ -77,10 +81,12 @@
 	.avatar_name {
 		position: absolute;
 	}
-	.system_item{
+
+	.system_item {
 		width: 315rpx;
 		margin-top: 50rpx;
-		image{
+
+		image {
 			width: 30rpx;
 			height: 32rpx;
 		}

common/task/task-item.vue

@@ -1,7 +1,8 @@
 <template>
 	<view>
 		<view class="task-body m-20">
-			<view class="row-c page-box-bg-fff m-b20 r-30 p-30 box-shadow-197" v-for="(item,index) in 10" :key="index">
+			<view class="row-c page-box-bg-fff m-b20 r-30 p-30 box-shadow-197" v-for="(item,index) in 10" :key="index"
+				@click="onTaskDetails(item)">
 				<image class="wh-80" :src="getLeftImg(leftImg)" mode=""></image>
 				<view class="flex m-l20">
 					<view class="row-justify-sb center flex">
@@ -91,6 +92,11 @@
 			getLeftImg() {
 				return `/static/img/task/${this.leftImg[this.leftImgStatus]}.png`
 			},
+			onTaskDetails(item) {
+				uni.navigateTo({
+					url: '/page_task/task_details/task_details'
+				})
+			}
 		}
 	}
 </script>
@@ -115,7 +121,7 @@
 	}
 
 	.right_button {
-		width: 150rpx;
+		width: 160rpx;
 	}
 
 	.placeholder {

components/en-from/en-input/index.vue

@@ -1,82 +1,80 @@
 <template>
-  <view class="en-box">
-    <input  class="en-input sys-size-32 text-color-12 sys-weight-600"
-            placeholder-class="sys-size-28 text-color-999 sys-weight-400"
-            :maxlength="maxlength"
-            :type="type"
-            :placeholder="placeholder ? placeholder : ''"
-            :disabled="!!disabled"
-            v-model="inputValue"
-            @blur="nameInput" @input="nameInput"
-    ></input>
-  </view>
+	<view class="en-box">
+		<input class="en-input sys-size-32 text-color-12 sys-weight-600"
+			placeholder-class="sys-size-28 text-color-999 sys-weight-400" :maxlength="maxlength" :type="type"
+			:focus="focus" :placeholder="placeholder ? placeholder : ''" :disabled="!!disabled" v-model="inputValue"
+			@blur="nameInput" @input="nameInput"></input>
+	</view>
 </template>
 
 <script>
-export default {
-  name:'en-input',
-  props: {
-    type: {
-      type: String,
-      default: 'text'
-    },
-    placeholder: {
-      type: String,
-      default: '请输入'
-    },
-    disabled: {
-      default: false
-    },
-    name: {
-      type: String,
-      default: 'text'
-    },
-    value: {
-      default: ''
-    },
-    maxlength:{
-      default:140
-    }
-  },
-  data() {
-    return {
-      inputValue: '',
-      showShake:false
-    };
-  },
-  watch: {
-    'value': function () {
-      if (this.inputValue !== this.value) {
-        this.inputValue = this.value
-      }
-    },
-    'inputValue': function () {
-      this.$emit('input', this.inputValue)
-    }
-  },
-  mounted() {
-    this.inputValue = this.value
-  },
-  methods: {
-    nameInput(e){
-      if(this.type==='nickname'){
-        this.inputValue = e.detail.value
-      }
+	export default {
+		name: 'en-input',
+		props: {
+			type: {
+				type: String,
+				default: 'text'
+			},
+			placeholder: {
+				type: String,
+				default: '请输入'
+			},
+			disabled: {
+				default: false
+			},
+			name: {
+				type: String,
+				default: 'text'
+			},
+			value: {
+				default: ''
+			},
+			maxlength: {
+				default: 140
+			},
+			focus: {
+				default: false
+			}
+		},
+		data() {
+			return {
+				inputValue: '',
+				showShake: false
+			};
+		},
+		watch: {
+			'value': function() {
+				if (this.inputValue !== this.value) {
+					this.inputValue = this.value
+				}
+			},
+			'inputValue': function() {
+				this.$emit('input', this.inputValue)
+			}
+		},
+		mounted() {
+			this.inputValue = this.value
+		},
+		methods: {
+			nameInput(e) {
+				if (this.type === 'nickname') {
+					this.inputValue = e.detail.value
+				}
 
-    },
-  }
-}
+			},
+		}
+	}
 </script>
 
 <style lang="scss">
-.en-input{
-  .en-input{
-    width: 100%;
-  }
-  .en-input-placeholder{
-    color: #999999;
-    font-size: 28rpx;
-  }
-}
+	.en-input {
+		.en-input {
+			width: 100%;
+		}
 
-</style>
+		.en-input-placeholder {
+			color: #999999;
+			font-size: 28rpx;
+		}
+	}
+</style>

page_subpack/gain_task/gain_task.vue

@@ -1,36 +0,0 @@
-<template>
-	<view class="total-page page_env page-box">
-		<Nav :title="'领取任务'" :genre="1" :fixedHeight="110"></Nav>
-		<view class="task-tabs task-tabs-width p-lr20 m-t30">
-			<!-- <TaskTab></TaskTab> -->
-		</view>
-		<!-- <EnButton is_both></EnButton> -->
-		<TaskItem :type="2"></TaskItem>
-	</view>
-</template>
-
-<script>
-	import TaskItem from "@/common/task/task-item.vue";
-	import TaskTab from "@/page_subpack/module/task_tab.vue";
-
-	export default {
-		components: {
-			TaskTab,
-			TaskItem
-		},
-		data() {
-			return {
-
-			}
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style>
-	.task-tabs-width {
-		width: calc(100% - 40rpx);
-	}
-</style>

page_subpack/module/task_tab.vue

@@ -1,150 +0,0 @@
-<template>
-	<view class="task-tab">
-		<scroll-view class="scroll-Y row" scroll-x="true">
-			<view class="column-c p-lr40" v-for="(item,index) in navList" :key="index" @click="setType(index)">
-				<image class="wh-60 r-circle" :class="index===current?'double-border':''" :src="item.icon" mode="">
-				</image>
-				<view class="m-t16 sys-size-24 text-center sys-weight-600" :class="{'default-text':index===current}">
-					{{item.name}}
-				</view>
-			</view>
-		</scroll-view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				current: 0,
-				navList: [{
-					name: '基础信息',
-					icon: '/static/img/task/task-all.png'
-				}, {
-					name: '资产/征信',
-					icon: '/static/img/task/task-repayment.png'
-				}, {
-					name: '跟进记录',
-					icon: '/static/img/task/task-business.png'
-				}, {
-					name: '审核进度',
-					icon: '/static/img/task/task-money.png'
-				}, ]
-			}
-		},
-		methods: {
-			setType(current) {
-				if (current !== this.current) {
-					this.current = current
-				}
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.task-tab {
-		padding: 34rpx 20rpx 20rpx 20rpx;
-		border-radius: 30rpx;
-		background: #fff;
-	}
-
-	.from-title {
-		// height: 90rpx;
-		// position: relative;
-		background: #fff;
-		// background: linear-gradient(180deg, rgba(255, 255, 255, 0.57) 0%, rgba(255, 255, 255, 0.86) 100%);
-
-		.title-bg {
-			position: absolute;
-			top: 0;
-			left: 0;
-			transition: .5s ease;
-			z-index: 1;
-			background-image: url("/static/img/test/tab-bg.png");
-			background-repeat: no-repeat;
-			background-size: 100% auto;
-			height: 103rpx;
-			width: 161rpx;
-			bottom: 0;
-
-			.bg-icon {
-				margin-top: 68rpx;
-				margin-left: 63rpx;
-				width: 45rpx;
-				height: 4rpx;
-			}
-		}
-
-		.title-bg-two {
-			left: 25%;
-			transition: .5s ease;
-		}
-
-		.title-bg-three {
-			left: 50%;
-			transition: .5s ease;
-		}
-
-		.title-bg-four {
-			left: 75%;
-			transition: .5s ease;
-		}
-
-		.title-list {
-			display: flex;
-			justify-content: space-between;
-			z-index: 2;
-			position: relative;
-
-			.title-text {
-				// width: 25%;
-				// height: 90rpx;
-				// line-height: 90rpx;
-				color: #444444;
-			}
-
-			.default-text {
-				color: #10B261;
-			}
-
-		}
-
-	}
-
-	.data-box {
-		margin-top: 20rpx;
-
-		.image {
-			width: 90vw;
-		}
-	}
-
-	.double-border {
-		// position: relative;
-		// width: 60rpx;
-		// height: 60rpx;
-		// background-color: #fff;
-		// border: 2px solid #0FB160;
-		// /* 外边框 */
-		// box-sizing: border-box;
-		// border: solid 2px #fff;
-		// outline: solid 2px #888;
-		// border-radius: 50%;
-		box-shadow: 0 0 0 6rpx #fff, 0 0 0 12rpx #10B261;
-	}
-
-	// .double-border::before {
-	// 	content: '';
-	// 	position: absolute;
-	// 	top: -5px;
-	// 	/* 调整边框的大小 */
-	// 	left: -5px;
-	// 	right: -5px;
-	// 	bottom: -5px;
-	// 	border: 1px solid #fff;
-	// 	/* 内边框 */
-	// 	pointer-events: none;
-	// 	/* 防止影响鼠标事件 */
-	// }
-</style>

page_subpack/personal_details/personal_details.vue

@@ -0,0 +1,140 @@
+<template>
+	<view class="total-page page-box size-28">
+		<Nav :type="1" :title="title" :is_fixed="true">
+			<view class="m-30 m-b20">
+				<view class="row-justify-sb sys-background-fff  center p-30 bor-bottom-1"
+					style="border-radius: 20rpx 20rpx 0 0;" hover-class="is-hovers">
+					<text class="size-28 text-color-666">头像</text>
+					<view class="row-c">
+						<image class="wh-80 r-100 m-r10" src="../../static/img/logo.png" mode=""></image>
+						<uni-icons type="forward" size="20" color="#999999"></uni-icons>
+					</view>
+				</view>
+				<view class="row-justify-sb sys-background-fff bor-bottom-1 center p-30" hover-class="is-hover_pass"
+					@click="onSetMessage(4,'修改昵称')">
+					<text class="size-28 text-color-666">昵称</text>
+					<view class="row-c line-34">
+						<text class="text-color-12">团子</text>
+						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
+					</view>
+				</view>
+				<view class="row-justify-sb sys-background-fff bor-bottom-1 center p-30" hover-class="is-hover_pass"
+					@click="onSetMessage(5,'修改姓名')">
+					<text class="size-28 text-color-666">姓名</text>
+					<view class="row-c line-34">
+						<text class="text-color-12">张杰</text>
+						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
+					</view>
+				</view>
+				<view class="row-justify-sb sys-background-fff center p-30" style="border-radius: 0 0 20rpx 20rpx;"
+					hover-class="is-hover_pass" @click="onSetMessage(3,'修改手机号')">
+					<text class="size-28 text-color-666">手机号</text>
+					<view class="row-c line-34">
+						<text class="text-color-12">123456797</text>
+						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
+					</view>
+				</view>
+			</view>
+			<view class=" m-lr30 r-20">
+				<view class="row-justify-sb sys-background-fff center p-30 r-20" hover-class="is-hover_pass"
+					@click="onSetMessage(2,'修改密码')">
+					<text class="size-28 text-color-666">密码</text>
+					<view class="row-c line-34">
+						<text class="text-color-12">去修改</text>
+						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
+					</view>
+				</view>
+			</view>
+		</Nav>
+	</view>
+</template>
+
+<script>
+	import EnInput from "@/components/en-from/en-input/index.vue";
+
+	export default {
+		components: {
+			EnInput
+		},
+		data() {
+			return {
+				id: 0,
+				title: '',
+				phoneShake: false,
+			}
+		},
+		onLoad(options) {
+			this.id = options.id
+			this.title = options.title
+		},
+		methods: {
+			onSubmit() {
+				this.phoneShake = true
+				setTimeout(() => {
+					this.phoneShake = false
+					this.passwordShake = false
+					this.codedShake = false
+				}, 500)
+			},
+			getVerifiedCode() {},
+			onSetMessage(id, name) {
+				uni.navigateTo({
+					url: `/page_subpack/system_setting/system_setting?id=${id}&title=${name}`
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.is-hovers {
+		background-color: #e5e5e5e5;
+	}
+
+	.is-hover_pass {
+		background-color: #e5e5e5e5;
+	}
+
+	.input-text {
+		display: block;
+		width: 120rpx;
+		text-align: right;
+	}
+
+	.input-item {
+		height: 96rpx;
+		padding: 28rpx 40rpx;
+		box-sizing: border-box;
+
+		.login-input {
+			width: 100%;
+		}
+	}
+
+	.input-item:last-child {
+		margin-top: 30rpx;
+	}
+
+	.input-send {
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+
+		.login-input {
+			width: calc(100% - 140rpx);
+		}
+
+		.login-send {
+			width: 140rpx;
+			text-align: center;
+		}
+	}
+
+	.input-but {
+		margin-top: 40rpx;
+		width: 100%;
+		height: 96rpx;
+		line-height: 96rpx;
+		text-align: center;
+	}
+</style>

page_subpack/system_setting/system_setting.vue

@@ -5,7 +5,7 @@
 				<view class="from-animation animate__animated animate__fadeIn" v-if="id == 2">
 					<view class="p-tb30 bor-bottom-1 row-c" :class="{'apply-shake':phoneShake}">
 						<text class="size-28 sys-weight-400 input-text">原密码</text>
-						<en-input type="number" class="m-l30" placeholder="请输入原密码" v-model="loginData.phone"
+						<en-input focus type="number" class="m-l30" placeholder="请输入原密码" v-model="loginData.phone"
 							maxlength="11"></en-input>
 					</view>
 					<view class="p-tb30 row-c">
@@ -22,7 +22,7 @@
 				<view class="from-animation animate__animated animate__fadeIn" v-if="id == 3">
 					<view class="p-tb30 bor-bottom-1 row-c" :class="{'apply-shake':phoneShake}">
 						<text class="size-28 sys-weight-400">手机号</text>
-						<en-input type="number" class="m-l30" placeholder="请输入手机号" v-model="loginData.phone"
+						<en-input focus type="number" class="m-l30" placeholder="请输入手机号" v-model="loginData.phone"
 							maxlength="11"></en-input>
 					</view>
 					<view class="p-tb30 row-c">
@@ -34,6 +34,16 @@
 						<!-- <view class="login-send text-color-dominant sys-size-28 sys-weight-400" v-else>s</view> -->
 					</view>
 				</view>
+				<view class="p-tb30 row-c" :class="{'apply-shake':phoneShake}" v-if="id == 4">
+					<text class="size-28 sys-weight-400">昵称</text>
+					<en-input focus class="m-l30" placeholder="请输入昵称" v-model="loginData.phone"
+						maxlength="11"></en-input>
+				</view>
+				<view class="p-tb30 row-c" :class="{'apply-shake':phoneShake}" v-if="id == 5">
+					<text class="size-28 sys-weight-400">姓名</text>
+					<en-input focus class="m-l30" placeholder="请输入姓名" v-model="loginData.phone"
+						maxlength="11"></en-input>
+				</view>
 			</view>
 			<EnButton :text="'保存'" :is_fixed="false" @onSubmit="onSubmit"></EnButton>
 		</Nav>
@@ -51,7 +61,9 @@
 			return {
 				id: 0,
 				title: '',
+				placeholder: '',
 				phoneShake: false,
+				loginData: {}
 			}
 		},
 		onLoad(options) {

page_task/gain_task/gain_task.vue

@@ -0,0 +1,64 @@
+<template>
+	<view class="total-page page-box">
+		<Nav :title="'领取任务'" :genre="1" :fixedHeight="110"></Nav>
+		<view class="task-tabs task-tabs-width m-t30">
+			<TaskImgTab></TaskImgTab>
+		</view>
+		<!-- <EnButton is_both></EnButton> -->
+		<EnScroll ref="scroll" :navHeight="110" class="main" @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
+			<TaskItem :type="2" is_bottom></TaskItem>
+		</EnScroll>
+	</view>
+</template>
+
+<script>
+	import TaskItem from "@/common/task/task-item.vue"
+	import TaskImgTab from "@/page_task/module/task_ima_tab.vue"
+
+	export default {
+		components: {
+			TaskImgTab,
+			TaskItem
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			// 下拉刷新
+			onRefresh() {
+				uni.showLoading({
+					title: '数据加载中'
+				})
+				setTimeout(() => {
+					uni.showToast({
+						title: '加载完成',
+						icon: 'none'
+					})
+					this.$refs.scroll.onEndPulling()
+				}, 1000)
+				console.log("下拉刷新");
+			},
+			// 滚动到底部
+			onScrollBottom() {
+				uni.showLoading({
+					title: '数据加载中'
+				})
+				setTimeout(() => {
+					uni.showToast({
+						title: '加载完成',
+						icon: 'none'
+					})
+				}, 1000)
+				console.log("到底部了");
+			},
+		}
+	}
+</script>
+
+<style>
+	.task-tabs-width {
+		width: calc(100% - 40rpx);
+	}
+</style>

page_task/module/task_ima_tab.vue

@@ -0,0 +1,75 @@
+<template>
+	<view class="task-tab">
+		<scroll-view class="scroll-Y row" scroll-x="true">
+			<view class="row-justify-sb center">
+				<view class="column-c tab-item p-lr30 p-t20" v-for="(item,index) in navList" :key="index"
+					@click="setType(index)">
+					<image class="wh-60 r-circle" :class="index===current?'double-border':''" :src="item.icon" mode="">
+					</image>
+					<view class="m-t16 sys-size-24 text-center sys-weight-600"
+						:class="{'default-text':index===current}">
+						{{item.name}}
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				current: 0,
+				navList: [{
+					name: '全部',
+					icon: '/static/img/task/task-all.png'
+				}, {
+					name: '资产/征信',
+					icon: '/static/img/task/task-repayment.png'
+				}, {
+					name: '跟进记录',
+					icon: '/static/img/task/task-business.png'
+				}, {
+					name: '审核进度',
+					icon: '/static/img/task/task-money.png'
+				}, ]
+			}
+		},
+		methods: {
+			setType(current) {
+				if (current !== this.current) {
+					this.current = current
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.task-tab {
+		width: calc(100% - 40rpx);
+		margin: 0 20rpx;
+		padding: 20rpx;
+		border-radius: 30rpx;
+		background: #fff;
+	}
+
+	.default-text {
+		color: #10B261;
+	}
+
+	.tab-item::after {
+		// content: '';
+		// position: absolute;
+		// width: 0;
+		// height: 0;
+		// border-left: 10px solid transparent;
+		// border-right: 10px solid transparent;
+		// border-top: 10px solid black;
+	}
+
+	.double-border {
+		box-shadow: 0 0 0 6rpx #fff, 0 0 0 12rpx #10B261;
+	}
+</style>

page_task/module/task_tab.vue

@@ -0,0 +1,155 @@
+<template>
+	<view class="page-box m-lr20">
+		<view class="from-title sys-radius-20">
+			<view class="title-list">
+				<view class="title-text  sys-size-28 text-center sys-weight-600" :class="{'default-text':type===1}"
+					@click="setType(1)">基础信息</view>
+				<view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===2}"
+					@click="setType(2)">资产/征信</view>
+				<view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===3}"
+					@click="setType(3)">跟进记录</view>
+				<view class="title-text sys-size-28 text-center sys-weight-600" :class="{'default-text':type===4}"
+					@click="setType(4)">审核进度</view>
+			</view>
+			<view class="title-bg"
+				:class="{'title-bg-two':type===2,'title-bg-three':type===3,'title-bg-four':type===4}">
+				<view class="bg-icon sys-background-dominant sys-radius-100"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import EnNav from "@/components/en-utils/en-nav/en-nav.vue";
+
+	export default {
+		components: {
+			EnNav
+		},
+		data() {
+			return {
+				type: 1,
+				list: [
+					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
+					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
+					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
+				],
+				options: {
+					effect: 'coverflow',
+					centeredSlides: true,
+					slidesPerView: 'auto',
+					coverflowEffect: {
+						rotate: 50,
+						stretch: 0,
+						depth: 100,
+						modifier: 1,
+						slideShadows: true,
+					},
+				},
+				slideCustomStyle: {
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'center',
+					borderRadius: '6rpx'
+				},
+			};
+		},
+		methods: {
+			setType(type) {
+				if (type !== this.type) {
+					this.type = type
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.page-box {
+		.top {
+			position: relative;
+			padding: 20rpx;
+
+			.top-img {
+				width: calc(100vw - 40rpx);
+			}
+
+			.top-status {
+				position: absolute;
+				top: 47rpx;
+				right: 54rpx;
+				width: 75rpx;
+			}
+		}
+
+		.from-title {
+			// margin: 20rpx 20rpx 34rpx 20rpx;
+			height: 90rpx;
+			position: relative;
+			background: linear-gradient(180deg, rgba(255, 255, 255, 0.57) 0%, rgba(255, 255, 255, 0.86) 100%);
+
+			.title-bg {
+				position: absolute;
+				top: 0;
+				left: 0;
+				transition: .5s ease;
+				z-index: 1;
+				background-image: url("/static/img/test/tab-bg.png");
+				background-repeat: no-repeat;
+				background-size: 100% 103rpx;
+				height: 103rpx;
+				width: 25%;
+
+				.bg-icon {
+					margin-top: 68rpx;
+					margin-left: 63rpx;
+					width: 45rpx;
+					height: 4rpx;
+				}
+			}
+
+			.title-bg-two {
+				left: 25%;
+				transition: .5s ease;
+			}
+
+			.title-bg-three {
+				left: 50%;
+				transition: .5s ease;
+			}
+
+			.title-bg-four {
+				left: 75%;
+				transition: .5s ease;
+			}
+
+			.title-list {
+				display: flex;
+				justify-content: space-between;
+				z-index: 2;
+				position: relative;
+
+				.title-text {
+					width: 25%;
+					height: 90rpx;
+					line-height: 90rpx;
+					color: #333333;
+				}
+
+				.default-text {
+					color: #10B261;
+				}
+
+			}
+
+		}
+
+		.data-box {
+			margin-top: 20rpx;
+
+			.image {
+				width: 90vw;
+			}
+		}
+	}
+</style>

page_task/task_details/task_details.vue

@@ -0,0 +1,91 @@
+<template>
+	<view class="total-page page-env-20 page-box">
+		<Nav :title="'任务详情'" :genre="1" :fixedHeight="135"></Nav>
+		<view class="task-tabs task-tabs-width m-t30">
+			<view class="m-lr20 m-b20 detail-bg">
+				<image class="detail-img" src="/static/img/task/details-bg.png" mode=""></image>
+				<view class="detail-content">
+					<view class="row-c top-titke">
+						<image class="wh-60 r-circle" src="../../static/img/logo.png" mode=""></image>
+						<text>张三</text>
+						<text>张三</text>
+						<text>张三</text>
+					</view>
+					<view class="row-justify-sb center buttom-titke" style="">
+						<image class="wh-60 r-circle" src="../../static/img/logo.png" mode=""></image>
+						<text>张三</text>
+						<text>张三</text>
+						<text>张三</text>
+					</view>
+				</view>
+			</view>
+			<TaskTab></TaskTab>
+			<view class="m-lr20 m-t20" style="width: 95vw;">
+				<z-swiper v-model="list" :options="{slidesPerView : 1,centeredSlides : true}">
+					<z-swiper-item :custom-style="{width:'90vw'}" v-for="(item,index) in list" :key="index">
+						<image class="image" style="width: 88vw;" :src="item" mode="aspectFill">
+						</image>
+					</z-swiper-item>
+				</z-swiper>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TaskItem from "@/common/task/task-item.vue"
+	import TaskTab from "@/page_task/module/task_tab.vue"
+
+	export default {
+		components: {
+			TaskTab,
+			TaskItem
+		},
+		data() {
+			return {
+				list: [
+					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
+					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
+					'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
+				],
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.detail-bg {
+		position: relative;
+	}
+
+	.detail-img {
+		width: 100%;
+		height: 220rpx;
+	}
+
+	.detail-content {
+		position: absolute;
+		top: 10rpx;
+		left: 20rpx;
+
+		.top-titke {
+			height: 75rpx;
+			line-height: 75rpx;
+			// background: red;
+		}
+
+		.buttom-titke {
+			flex: 1;
+			margin-top: 26rpx;
+			height: 90rpx;
+			width: 635rpx;
+			line-height: 90rpx;
+			background: #FFFFFF;
+			border-radius: 20rpx;
+			padding: 0 20rpx;
+		}
+	}
+</style>

pages.json

@@ -65,6 +65,27 @@
 	],
 	"subPackages": [{
 		"root": "page_subpack",
+		"pages": [{
+				"path": "system_setting/system_setting",
+				"style": {
+					"navigationBarTitleText": ""
+				}
+			},
+			{
+				"path": "message/message",
+				"style": {
+					"navigationBarTitleText": ""
+				}
+			},
+			{
+				"path": "personal_details/personal_details",
+				"style": {
+					"navigationBarTitleText": ""
+				}
+			}
+		]
+	}, {
+		"root": "page_task",
 		"pages": [{
 			"path": "gain_task/gain_task",
 			"style": {
@@ -72,14 +93,7 @@
 			}
 		},
 		{
-			"path" : "system_setting/system_setting",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
-			}
-		},
-		{
-			"path" : "message/message",
+			"path" : "task_details/task_details",
 			"style" : 
 			{
 				"navigationBarTitleText" : ""

pages/index/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="total-page page_env page-box">
+	<view class="total-page page-env-160 page-box">
 		<Nav :title="'工作台导航'" :back="false" :is_fixed="true" :opacity="scrollTop" :justify="'left'" :color="'#fff'">
 			<view class="p-20">
 				<IndexPersonal></IndexPersonal>

pages/index/module/index_column.vue

@@ -104,7 +104,7 @@
 		methods: {
 			onGetTask() {
 				uni.navigateTo({
-					url: "/page_subpack/gain_task/gain_task"
+					url: "/page_task/gain_task/gain_task"
 				})
 			},
 			onMessage() {

pages/loan/loan.vue

@@ -9,8 +9,9 @@
 					:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
 			</view>
 		</view>
-		<!-- <EnButton is_both></EnButton> -->
-		<TaskItem :type="1"></TaskItem>
+		<EnScroll ref="scroll" :navHeight="110" is_tabHeight @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
+			<TaskItem :type="3" is_bottom></TaskItem>
+		</EnScroll>
 		<Tab :tab-index="2"></Tab>
 	</view>
 
@@ -50,7 +51,33 @@
 			tabsChange(index) {
 				this.current = index;
 			},
-
+			// 下拉刷新
+			onRefresh() {
+				uni.showLoading({
+					title: '数据加载中'
+				})
+				setTimeout(() => {
+					uni.showToast({
+						title: '加载完成',
+						icon: 'none'
+					})
+					this.$refs.scroll.onEndPulling()
+				}, 1000)
+				console.log("下拉刷新");
+			},
+			// 滚动到底部
+			onScrollBottom() {
+				uni.showLoading({
+					title: '数据加载中'
+				})
+				setTimeout(() => {
+					uni.showToast({
+						title: '加载完成',
+						icon: 'none'
+					})
+				}, 1000)
+				console.log("到底部了");
+			},
 		},
 	}
 </script>

pages/task/task.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="total-page page-box page-env-160 scroll_content">
+	<view class="total-page page-box page-env-20 scroll_content">
 		<Nav :title="'任务'" :genre="1" :back="false" :fixedHeight="105"></Nav>
 		<view class="task-tabs" :style="{top:`${$tools.topHeight()}px`}">
 			<Search :placeholder="'贷款人姓名或电话'"></Search>
@@ -19,8 +19,7 @@
 			</swiper-item>
 		</swiper> -->
 		<!-- 不带Swiper -->
-		<EnScroll ref="scroll" :navHeight="105" is_tabHeight class="main" @onRefresh="onRefresh"
-			@onScrollBottom="onScrollBottom">
+		<EnScroll ref="scroll" :navHeight="105" is_tabHeight @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
 			<TaskItem :type="1" is_bottom></TaskItem>
 		</EnScroll>
 		<Tab :tab-index="1"></Tab>