搜索页 / 任务详情页

.gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+unpackage
+.DS_Store
+dist
+*.local
+
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+package-lock.json

App.vue

@@ -18,4 +18,19 @@
 	@import "@/static/css/fui.css";
 	@import "@/static/css/flex.css";
 	@import "@/static/css/uflex.css";
+	page{
+		background: #fafafa;
+	}
+	.fiexd_box{
+		position: fixed;
+		bottom: var(--window-bottom);
+		bottom: calc(constant(safe-area-inset-bottom));
+		bottom: calc(env(safe-area-inset-bottom));
+		height: calc(env(safe-area-inset-bottom) + 100rpx);
+		padding-top: 16rpx;
+		background-color: #fff;
+		width: 100vw;
+		left: 0;
+		display: flex;
+	}
 </style>

components/bountyItem.vue

@@ -11,7 +11,7 @@
           <view class="text-32 text-500 text-070602 text">
             这是一条悬赏任务悬赏任务
           </view>
-          <view class="flex ai_center tips">
+          <view class="flex ai_center tips" v-if="showTags">
             <view class="tip_item top_color">顶</view>
             <view class="tip_item quick_color">快审</view>
             <view class="tip_item hot_color">热</view>
@@ -34,6 +34,12 @@
 
 <script>
 export default {
+  props:{
+	showTags:{
+		type:Boolean,
+		default:true
+	}  
+  },
   data() {
     return {};
   },

pages.json

@@ -201,7 +201,8 @@
 		{
 			"path": "pages/index/search",
 			"style": {
-				"navigationBarTitleText": "搜索"
+				"navigationBarTitleText": "搜索",
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/index/search.vue

@@ -1,25 +1,162 @@
 <template>
 	<view class="content">
-		搜索
+		<u-navbar
+			title="搜索"
+			:autoBack="true"
+			bgColor="transparent"
+			:placeholder="true"
+			:fixed="false"
+		>
+		</u-navbar>
+		<u-input placeholder="任务标题、用户ID、任务ID" fontSize="14" shape="circle"
+		 v-model="keyword" style="background-color: #fff;border: none;">
+			<u-icon
+			  size="20"
+			  color="#303030"
+			  slot="prefix"
+			  name="search"
+			></u-icon>
+			<template slot="suffix">
+				<u-button
+					@click="cancel"
+					text="取消"
+					type="primary"
+					size="mini"
+					style="width: 112rpx;height: 56rpx;font-size: 24rpx;"
+					shape="circle"
+				></u-button>
+			</template>
+		</u-input>
+		<template  v-if="!keyword && searchList.length == 0">
+			<view class="flex jc_between mgt-32 pdx-16">
+				<view class="text-28 text-500">搜索历史</view>
+				<u-icon
+				  size="18"
+				  color="#B9B9B9"
+				  name="trash"
+				  @click="delAllHistory"
+				></u-icon>
+			</view>
+			<view class="history_list pdx-16">
+				<view class="item" v-for="(item,index) in list">
+					<text @click="search(item)"> {{ item }}</text>
+					<u-icon
+					  size="12"
+					  @click="delHistory(item,index)"
+					  color="#e2dcdc"
+					  name="close"
+					  class="mgl-10"
+					></u-icon>
+				</view>
+			</view>
+		</template>
+		<u-empty
+				v-if="keyword && searchList.length == 0"
+				marginTop="107"
+		        mode="data"
+				text="您搜索的内容暂无"
+				icon="/static/image/index/search_empty.png"
+		>
+		</u-empty>
+		<view class="w flex1" v-if="searchList.length > 0">
+		  <scroll-view scroll-y class="scroll">
+		    <view v-for="item in 10" :key="item" class="bounty">
+		      <BountyItem class="mgb-10" :showTags="false"></BountyItem>
+		    </view>
+		    <view class="loading">上拉加载更多 ></view>
+		  </scroll-view>
+		</view>
 	</view>
 </template>
 
 <script>
+	import BountyItem from "components/bountyItem.vue";
 	export default {
+		components: { BountyItem },
 		data() {
 			return {
-				
+				list:[
+					'任务',
+					'微信运营端口',
+					'高效'
+				],
+				keyword:'',// 搜索关键词
+				searchList:[]
 			}
 		},
 		onLoad() {
 
 		},
 		methods: {
-
+			//搜索
+			search(item){
+				this.keyword = item
+				if(this.keyword == '任务'){
+					this.searchList = ['','','']
+				}
+			},
+			//取消
+			cancel(){
+				this.keyword = ''
+				this.searchList = []
+				// uni.navigateBack()
+			},
+			//删除单个历史
+			delHistory(item,index){
+				uni.showToast({
+					title:'删除成功',
+				})
+				this.list.splice(index,1)
+			},
+			//删除全部历史
+			delAllHistory(item){
+				uni.showModal({
+					title: '提示',
+					content: '是否确认删除全部搜索历史？',
+					success: function (res) {
+						if (res.confirm) {
+							console.log('用户点击确定');
+							uni.showToast({
+								title:'删除成功',
+							})
+							this.list = []
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
+			},
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-	
+	.content{
+		height: 568rpx;
+		padding: 32rpx;
+		background: linear-gradient(to bottom, #ffe3d1, #fafafa);
+		.history_list{
+			display: flex;
+			padding-top:24rpx;
+			gap: 20rpx;
+			.item{
+				display: flex;
+				height: 56rpx;
+				line-height: 56rpx;
+				background-color: #fff;
+				border-radius: 64rpx;
+				padding: 0 20rpx;
+				color: #7E7E7E;
+				font-size: 24rpx;
+			}
+		}
+		.loading {
+		  text-align: center;
+		  margin-top: 50rpx;
+		  padding-bottom: 86rpx;
+		  font-size: 20rpx;
+		  font-weight: 400;
+		  color: #c0c0c0;
+		}
+	}
 </style>

pages/index/taskDetails.vue

@@ -1,19 +1,75 @@
 <template>
 	<view class="content">
-		 <u-navbar
+		<u-navbar
 			title="任务详情"
 			:autoBack="true"
 			bgColor="transparent"
+			:placeholder="true"
+			:fixed="false"
 		>
 		</u-navbar>
-		<view class="box_title">
-			
+		<view class="box_title radio-24">
+			<view class="flex jc_between ">
+				<view class="flex">
+					<image class="w-88 h-88 radio-50" src="/static/logo.png" mode=""></image>
+					<view class="mgl-24">
+						<view class="text-28 line_1 w-360">这是一条悬赏标题</view>
+						<view class="text-22 text-7E7E7E mgt-8">任务编号：00003</view>
+					</view>
+				</view>
+				<view class="text-E02E24 text-600 text-32">
+					+3.02元
+				</view>
+			</view>
+			<view class="flex title_desc jc_between">
+				<view class="title_item">
+					<view class="title">5分钟</view>
+					<view class="desc">平均审核</view>
+				</view>
+				<view class="title_item">
+					<view class="title">1小时</view>
+					<view class="desc">做单限时</view>
+				</view>
+				<view class="title_item">
+					<view class="title">500</view>
+					<view class="desc">完成人数</view>
+				</view>
+				<view class="title_item">
+					<view class="title">300</view>
+					<view class="desc">剩余名额</view>
+				</view>
+			</view>
 		</view>
-		<view class="box_desc">
-			
+		<view class="box_desc radio-24">
+			<view class="text-28 text-500 mgb-16">任务描述</view>
+			<view class="text-7E7E7E text-24 lh-1_5">这是用户描述，这是用户描述这是用户描述这是用户描述
+			这是用户描述这是用户描述这是用户描述
+			这是用户描述，这是用户描述这是用户描述这是用户描述
+			这是用户描述这是用户描述这是用户描述</view>
 		</view>
-		<view class="box_step">
-			
+		<view class="box_step radio-24">
+			<view class="text-28 text-500 mgb-16">任务步骤</view>
+			<view class="mgb-40" v-for="(item,index) in steps">
+				<view class="flex"><view class="step_num mgr-16">{{ index + 1 }}</view>{{ item.title }}</view>
+				<image class="w-335 h-192 radio-24 mgt-20" src="/uni_modules/zmm-slider-verify/static/img/Verify.jpg" mode=""></image>
+			</view>
+		</view>
+		<view class="h-200"></view>
+		<view class="fixed_bottom fiexd_box pdx-28">
+			<view class="w-100">
+				<u-icon
+				  :label="collectStatus ?'已收藏':'收藏'"
+				  size="20"
+				  :color="collectStatus? '#FE6505' :'#D9D9D9'"
+				  name="star-fill"
+				  labelPos="bottom"
+				  label-size="12"
+				  :label-color="collectStatus? '#FE6505' :'#D9D9D9'"
+				  @click="collect"
+				></u-icon>
+			</view>
+			<u-button type="primary"  style="width: 592rpx;border-radius: 64rpx;" 
+			 @click="registration" text="我要报名"></u-button>
 		</view>
 	</view>
 </template>
@@ -22,13 +78,44 @@
 	export default {
 		data() {
 			return {
-				
+				collectStatus:true,
+				steps:[
+					{
+						title:'这是任务步骤1这是任务步骤1'
+					},
+					{
+						title:'这是任务步骤2'
+					},
+					{
+						title:'这是任务步骤3'
+					},
+					{
+						title:'这是任务步骤4'
+					},
+				]
 			}
 		},
 		onLoad() {
 
 		},
 		methods: {
+			// 收藏
+			collect(){
+				// 调用接口
+				uni.showToast({
+					title: this.collectStatus?'取消收藏':'已收藏'
+				})
+				this.collectStatus = !this.collectStatus
+			},
+			// 去报名
+			registration(){
+				uni.showToast({
+					title: '报名成功'
+				})
+				// uni.navigateTo({
+				// 	url:''
+				// })
+			},
 		}
 	}
 </script>
@@ -36,6 +123,62 @@
 <style scoped lang="scss">
 	.content{
 		height: 568rpx;
-		background: linear-gradient(to bottom, #ffe3d1, #ffffff);
+		padding: 32rpx;
+		background: linear-gradient(to bottom, #ffe3d1, #fafafa);
+		.box_title{
+			background-color: #ffffff;
+			width: 100%;
+			padding: 36rpx;
+			.title_desc{
+				margin-top: 48rpx;
+				.title_item{
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					position: relative;
+					justify-content: space-around;
+					height: 102rpx;
+					width: 172rpx;
+					.title{
+						 font-size: 32rpx;
+					}
+					.desc{
+						font-size: 24rpx;
+						color: #c8c9c6;
+					}
+				}
+				.title_item:not(:last-child)::after{
+					content: '';
+					position: absolute;
+					right: 0rpx;
+					top: 34rpx;
+					height: 40rpx;
+					width: 2rpx;
+					background: #eee;
+				}
+			}
+		}
+		.box_desc{
+			margin-top: 24rpx;
+			background-color: #ffffff;
+			padding: 32rpx;
+		}
+		.box_step{
+			padding: 32rpx;
+			margin-top: 24rpx;
+			background-color: #ffffff;
+			.step_num{
+				min-width: 32rpx;
+				max-width: 32rpx;
+				min-height: 32rpx;
+				max-height: 32rpx;
+				padding: 4rpx;
+				border-radius: 64rpx;
+				background: #FE6505;
+				color: #ffffff;
+				font-size: 24rpx;
+				text-align: center;
+			}
+		}
 	}
 </style>

static/css/fui.css

@@ -193,6 +193,9 @@ image {
 .text-da251c {
 	color: #DA251C;
 }
+.text-E02E24{
+	color: #E02E24;
+}
 .text-skyblue {
 	color: skyblue;
 }
@@ -2439,6 +2442,9 @@ image {
 .lh-1_4 {
 	line-height: 1.4;
 }
+.lh-1_5 {
+	line-height: 1.5;
+}
 .lh-1_6 {
 	line-height: 1.6;
 }

uni_modules/uview-ui/theme.scss

@@ -10,10 +10,14 @@ $u-border-color: #dadbde;
 $u-bg-color: #f3f4f6;
 $u-disabled-color: #c8c9cc;
 
-$u-primary: #3c9cff;
-$u-primary-dark: #398ade;
-$u-primary-disabled: #9acafc;
+$u-primary: #FE6505;
+$u-primary-dark: #fe6d0c;
+$u-primary-disabled: #fe9926;
 $u-primary-light: #ecf5ff;
+// $u-primary: #3c9cff;
+// $u-primary-dark: #398ade;
+// $u-primary-disabled: #9acafc;
+// $u-primary-light: #ecf5ff;
 
 $u-warning: #f9ae3d;
 $u-warning-dark: #f1a532;