1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
| <template>
| <view class="full-page">
| <scroll-view enable-flex="true">
| <view class="list chuany-flex chuany-flex-direction chuany-align-center c-p-b-30"
| v-if="state.currentIdex==0">
| <view class="content c-p-b-18" v-for="(item,index) in list2" @click='toDetail' :key='item.id'>
| <view class="bgblue c-p-18 chuany-flex chuany-justify-between chuany-font34 chuany-text-bold">
| <text class=''>
| {{item.time}}
| </text>
| <text>
| 招{{item.zhaodao}}/{{item.peoplenum}}人
| </text>
| </view>
| <view class="c-p-18 chuany-font44 chuany-text-bold">
| {{item.name}}
| </view>
| <view class="chuany-flex c-p-l-18">
| <up-tag class='c-p-r-14' :text="item" plain v-for="(item,index) in item.tags" :key="index">
| </up-tag>
| </view>
| <view class="chuany-flex chuany-flex-direction">
| <text class='c-p-18'>
| 要求：{{item.yaoqiu}}
| </text>
| <text class='c-p-l-18 c-p-b-16'>
| 地址：{{item.adress}}
| </text>
| </view>
| <view class='chuany-flex chuany-justify-between c-p-l-18 c-p-r-18'>
| <view class="redcla">
| <text class="chuany-font40 chuany-text-bold">
| {{item.price}}
| </text>
| <text class='chuany-font20'>
| 元/小时
| </text>
| </view>
| <up-tag text="去抢活" type="warning" shape="circle"></up-tag>
| <!-- <up-tag text="去抢活" type="warning" shape="circle"></up-tag> -->
| </view>
| </view>
| </view>
| <view v-else>
| <up-empty mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
| </up-empty>
| </view>
| </scroll-view>
|
| </view>
| </template>
|
| <script setup>
| import {
| reactive,
| ref
| } from 'vue';
| let state = reactive({
| currentIdex: 0
| })
| // 创建响应式数据
| const list1 = reactive([{
| name: '新任务'
| },
| {
| name: '我的订单'
| },
| ]);
| const list2 = reactive([{
| id: 1,
| time: '明天 19:00-23:00',
| name: '临时工',
| tags: ['4小时', '可无经验', '手脚麻利'],
| adress: '武侯区桂溪街道4.0km',
| yaoqiu: '不限',
| price: 50,
| peoplenum: 3,
| zhaodao: 1
| },
| {
| id: 2,
| time: '明天 19:00-23:00',
| name: '临时工',
| tags: ['4小时', '可无经验', '手脚麻利'],
| adress: '武侯区桂溪街道4.0km',
| price: 50,
| yaoqiu: '不限',
| peoplenum: 3,
| zhaodao: 1
| },
| {
| id: 3,
| time: '今天 19:00-23:00',
| name: '包装工',
| tags: ['4小时', '可无经验', '手脚麻利'],
| adress: '武侯区桂溪街道4.0km',
| price: 50,
| yaoqiu: '男/18-55岁',
| peoplenum: 3,
| zhaodao: 1
| },
| ]);
| const click = () => {
|
| }
| const change = (e) => {
| state.currentIdex = e.index
| }
| const toDetail = (e) => {
| uni.navigateTo({
| url: '/pages/detail/detail'
| })
| }
| </script>
|
| <style lang='scss'>
| .list {
| background-color: #f3f4f6;
| }
|
| .content {
| height: 430rpx;
| width: 90%;
| background-color: #fff;
| border-radius: 20rpx;
| margin: 30rpx 30rpx 0 30rpx;
| }
|
| .bgblue {
| background-color: #4e96f5;
| border-radius: 20rpx 20rpx 0 0;
| color: #fff;
| }
|
| .redcla {
| color: #f05348;
| }
| </style>
|
|
