guzijian / garbage-removal · Commits

Commit b4a8b373bff8e4a464e4da9f44a67d8987e0f297

Authored by guzijian
1 parent eca2e4d3

feat: 自定义标题栏，新增载重

Inline Side-by-side
Showing 13 changed files with 453 additions and 138 deletions
garbage-removal/src/apis/order.js
  View file @b4a8b37
... ... @@ -98,3 +98,14 @@ export async function scanDetail(askId) {
98 98 export async function createHandlerQrCode(orderId) {
99 99 return await request.get(`/order/handler/qrCode/${orderId}`);
100 100 }
  101 +
  102 +export async function queryOrderMessageCount() {
  103 + return await request.get(`/order/query/message/count`);
  104 +}
  105 +
  106 +export async function queryOrderMessageList(pageNo,pageSize) {
  107 + return await request.get(`/order/query/message/list/${pageNo}/${pageSize}`);
  108 +}
  109 +export async function readMessage(data) {
  110 + return await request.put(`/order/read/message`,data);
  111 +}
... ...
garbage-removal/src/pages.json
  View file @b4a8b37
... ... @@ -118,6 +118,14 @@
118 118 "navigationBarBackgroundColor": "#19a97c",
119 119 "enablePullDownRefresh": false
120 120 }
  121 + },{
  122 + "path": "pages/order/other-home/user-message/index",
  123 + "style": {
  124 + "navigationBarTitleText": "消息列表",
  125 + "navigationBarTextStyle": "white",
  126 + "navigationBarBackgroundColor": "#19a97c",
  127 + "enablePullDownRefresh": false
  128 + }
121 129 },
122 130 {
123 131 "path": "pages/home/clean/company-detail/index",
... ... @@ -160,9 +168,8 @@
160 168 },{
161 169 "path": "pages/order/index",
162 170 "style": {
163   - "navigationBarTitleText": "订单详情",
164   - "navigationBarTextStyle":"white",
165   - "navigationBarBackgroundColor":"#19a97c",
  171 + "navigationBarTitleText": "",
  172 + "navigationStyle":"custom",
166 173 "enablePullDownRefresh": false
167 174 }
168 175 },{
... ...
garbage-removal/src/pages/home/clean/index.vue
  View file @b4a8b37
... ... @@ -70,15 +70,6 @@
70 70 type="text" placeholder-class="line" readonly />
71 71 </view>
72 72 </view>
73   - <!-- <view v-if="paramFrom.carType" class="company-clean-container-car-main-content-type">
74   - <view class="company-clean-container-car-main-content-type-price-area">
75   - <text style="color: red;">*</text>协商车辆:
76   - </view>
77   - <view class="company-clean-container-car-main-content-number-button">
78   - <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100"
79   - v-model="garCarInfoList[paramFrom.carType].garOrderCarNumber"></u-number-box>
80   - </view>
81   - </view> -->
82 73 <view class="company-clean-container-car-main-content">
83 74 <view v-if="paramFrom.carType" class="company-clean-container-car-main-content-type">
84 75 <view class="company-clean-container-car-main-content-type-price-area">
... ... @@ -117,7 +108,7 @@
117 108 </view>
118 109 <view class="company-clean-container-site-image-info-img">
119 110 <u-upload width="200" height="150" :fileList="fileList" @afterRead="afterRead" :deletable="deletable"
120   - @delete="deletePic" name="3" multiple :maxCount="10" :previewFullImage="true"></u-upload>
  111 + @delete="deletePic" name="10" multiple :maxCount="10" :previewFullImage="true"></u-upload>
121 112 </view>
122 113 <view class="company-in-car-store-box">
123 114 <view class="company-in-car-store-box-content"
... ...
garbage-removal/src/pages/order/driver-home/index.vue
  View file @b4a8b37
1 1 <template>
2   - <z-paging-swiper>
3   - <template v-slot:top>
4   - <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
5   - :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
6   - ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
7   - </template>
8   - <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
9   - <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
10   - <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
11   - </swiper-item>
12   - </swiper>
13   - </z-paging-swiper>
  2 + <view class="order-container">
  3 + <z-paging-swiper>
  4 + <template v-slot:top>
  5 + <view class="header-box" :style="{
  6 + 'height': lightHeight, 'line-height': lightHeight,
  7 + 'padding-top': topMargin
  8 + }">
  9 + <view class="header-box-title">
  10 + {{ title }}
  11 + </view>
  12 + </view>
  13 + <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
  14 + :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
  15 + ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
  16 + </template>
  17 + <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
  18 + <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
  19 + <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
  20 + </swiper-item>
  21 + </swiper>
  22 + </z-paging-swiper>
  23 + </view>
14 24 </template>
15 25 <script setup>
  26 +import { onLoad } from '@dcloudio/uni-app';
16 27 import { ref } from 'vue';
17 28 import swiperListItem from './swiper-list-item/index.vue';
18 29 const list = ref([{ name: '待清运' }, { name: '清运中' }, { name: '全部' }, { name: '已完成' }])
19 30 const current = ref(0);
20 31 const swiperCurrent = ref(0)
21 32 const uTabsElement = ref()
  33 +const topMargin = ref()
  34 +const lightHeight = ref()
  35 +const title = ref('订单列表')
22 36 const tabsChange = (el) => {
23 37 swiperCurrent.value = Number(el.index)
24 38 }
... ... @@ -29,10 +43,46 @@ const animationfinish = (e) =&gt; {
29 43 const translation = (e) => {
30 44 uTabsElement.value.setDx(e.detail.dx)
31 45 }
  46 +onLoad(() => {
  47 + try {
  48 + const { height, top } = uni.getMenuButtonBoundingClientRect();
  49 + topMargin.value = top + 'px';
  50 + lightHeight.value = height + 'px';
  51 + } catch (error) {
  52 + topMargin.value = '60rpx';
  53 + lightHeight.value = '80rpx'
  54 + console.log('There is no menu because the current app is not a small program');
  55 + }
  56 +})
32 57 </script>
33 58 <style lang="scss" scoped>
34   -.swiper {
  59 +.order-container {
35 60 height: 100%;
36   - background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  61 + width: 100%;
  62 + display: flex;
  63 + flex-direction: column;
  64 + background: #19a97c;
  65 + box-sizing: border-box;
  66 +
  67 + .header-box {
  68 + width: 100%;
  69 + color: white;
  70 + display: flex;
  71 + justify-content: center;
  72 + align-items: center;
  73 + /* 分散对齐，自动调整间距 */
  74 +
  75 + .header-box-title {
  76 + font-size: 35rpx;
  77 + font-weight: bold;
  78 + text-align: center;
  79 + }
  80 +
  81 + }
  82 +
  83 + .swiper {
  84 + height: 100%;
  85 + background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  86 + }
37 87 }
38 88 </style>
... ...
garbage-removal/src/pages/order/handler-home/index.vue
  View file @b4a8b37
1 1 <template>
2   - <z-paging-swiper>
3   - <template v-slot:top>
4   - <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
5   - :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
6   - ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
7   - </template>
8   - <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
9   - <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
10   - <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
11   - </swiper-item>
12   - </swiper>
13   - </z-paging-swiper>
  2 + <view class="order-container">
  3 + <z-paging-swiper>
  4 + <template v-slot:top>
  5 + <view class="header-box" :style="{
  6 + 'height': lightHeight, 'line-height': lightHeight,
  7 + 'padding-top': topMargin
  8 + }
  9 + ">
  10 + <view class="header-box-title">
  11 + {{ title }}
  12 + </view>
  13 + </view>
  14 + <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
  15 + :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
  16 + ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
  17 + </template>
  18 + <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
  19 + <swiper-item class="swiper-item" v-for="( item, index ) in list " :key="index">
  20 + <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
  21 + </swiper-item>
  22 + </swiper>
  23 + </z-paging-swiper>
  24 +
  25 + </view>
14 26 <view class="scan-box">
15 27 <view class="scan-btn">
16 28 <view class="scan-icon">
... ... @@ -22,74 +34,104 @@
22 34  
23 35 <script setup>
24 36 import { checkCode } from '@/apis/order.js';
  37 +import { onLoad } from '@dcloudio/uni-app';
25 38 import { ref } from 'vue';
26 39 import swiperListItem from './swiper-list-item/index.vue';
27 40 const list = ref([{ name: '处理中' }, { name: '已完成' }])
28 41 const current = ref(0);
29 42 const swiperCurrent = ref(0);
30 43 const uTabsElement = ref();
31   -uni.setNavigationBarTitle({
32   - title: "处置场所"
33   -})
  44 +const title = ref('处置场所');
  45 +const topMargin = ref();
  46 +const lightHeight = ref();
34 47 const tabsChange = (el) => {
35 48 swiperCurrent.value = Number(el.index)
36 49 }
  50 +
37 51 const animationfinish = (e) => {
38 52 current.value = e.detail.current
39 53 swiperCurrent.value = e.detail.current
40 54 }
  55 +
41 56 const translation = (e) => {
42 57 uTabsElement.value.setDx(e.detail.dx)
43 58 }
  59 +
44 60 const handleScan = () => {
45   - // 调用uniapi开启二维码扫描
46   - // 允许从相机和相册扫码
47   - checkCode("1789622015702335490,1730466747975798786,956117").then(res => {
48   - console.log(res);
49   - if (res.data.code == 200) {
50   - uni.$u.route({
51   - url: `pages/order/handler-home/scan-detail/index`,
52   - params: {
53   - data: encodeURIComponent(JSON.stringify(res.data.data))
  61 + uni.scanCode({
  62 + success: function (res) {
  63 + console.log('条码类型：' + res.scanType);
  64 + console.log('条码内容：' + res.result);
  65 + try {
  66 + if (res.scanType == "QR_CODE") {
  67 + checkCode(res.result).then(res => {
  68 + console.log(res);
  69 + if (res.data.code == 200) {
  70 + uni.$u.route({
  71 + url: `pages/order/handler-home/scan-detail/index`,
  72 + params: {
  73 + data: encodeURIComponent(JSON.stringify(res.data.data))
  74 + }
  75 + })
  76 + return
  77 + }
  78 + uni.$u.toast(res.data.msg);
  79 + })
54 80 }
55   - })
56   - return
  81 + } catch (error) {
  82 + uni.$u.toast("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
  83 + }
57 84 }
58   - uni.$u.toast(res.data.msg);
59   - })
60   - // uni.scanCode({
61   - // success: function (res) {
62   - // console.log('条码类型：' + res.scanType);
63   - // console.log('条码内容：' + res.result);
64   - // try {
65   - // if (res.scanType == "QR_CODE") {
66   - // checkCode(res.result).then(res => {
67   - // console.log(res);
68   - // if (res.data.code == 200) {
69   - // uni.$u.route({
70   - // url: `pages/order/handler-home/scan-detail/index`,
71   - // params: {
72   - // data: encodeURIComponent(JSON.stringify(res.data.data))
73   - // }
74   - // })
75   - // return
76   - // }
77   - // uni.$u.toast(res.data.msg);
78   - // })
79   - // }
80   - // } catch (error) {
81   - // uni.$u.toast("无法确认当前二维码趟次，请扫描正在进行的运输趟次");
82   - // }
83   -
84   - // }
85   - // });
86   -
  85 + });
87 86 }
  87 +
  88 +
  89 +onLoad(() => {
  90 + try {
  91 + const { height, top } = uni.getMenuButtonBoundingClientRect();
  92 + topMargin.value = top + 'px';
  93 + lightHeight.value = height + 'px';
  94 + } catch (error) {
  95 + topMargin.value = '60rpx';
  96 + lightHeight.value = '60rpx'
  97 + console.log('There is no menu because the current app is not a small program');
  98 + }
  99 +})
88 100 </script>
89 101 <style lang="scss" scoped>
90   -.swiper {
  102 +.order-container {
  103 + width: 100%;
91 104 height: 100%;
92   - background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  105 + background: #19a97c;
  106 + box-sizing: border-box;
  107 + display: flex;
  108 + flex-direction: column;
  109 +
  110 + .header-box {
  111 + width: 100%;
  112 + color: white;
  113 + display: flex;
  114 + justify-content: center;
  115 + align-items: center;
  116 +
  117 + .header-box-title {
  118 + font-size: 35rpx;
  119 + font-weight: bold;
  120 + display: flex;
  121 + justify-content: center;
  122 + align-items: center;
  123 + }
  124 +
  125 + }
  126 +
  127 +
  128 + .swiper {
  129 + height: 100%;
  130 + // height: 300px;
  131 + background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  132 + }
  133 +
  134 +
93 135 }
94 136  
95 137 .scan-box {
... ...
garbage-removal/src/pages/order/handler-home/scan-detail/index.vue
  View file @b4a8b37
... ... @@ -58,19 +58,27 @@
58 58 {{ details.garHandlerCarCode }}
59 59 </view>
60 60 </view>
  61 + <view class="scan-car-num">
  62 + <view class="scan-car-num-label">
  63 + 车辆载重
  64 + </view>
  65 + <view class="scan-car-num-content">
  66 + <up-input placeholder="单位吨 1.5 标识1.5吨" border="surround" v-model="details.garCarryingWeight"
  67 + @change="handlerInputChange"></up-input>
  68 + </view>
  69 + </view>
61 70 <view class="scan-upload-fill-image-box">
62 71 <view class="scan-upload-fill-image-label">
63 72 <view>
64 73 全景照片
65 74 </view>
66 75 <view v-if="isDeletable">
67   - {{ fileList.length }}/3
  76 + {{ fileList.length }}/{{ maxCount }}
68 77 </view>
69 78 </view>
70   - <view class="scan-upload-fill-image-btn">
71   - <u-upload :deletable="isDeletable" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3"
72   - multiple :maxCount="isDeletable ? 3 : fileList.length" :previewFullImage="true" width="200"
73   - height="150"></u-upload>
  79 + <view class="scan-upload-fill-image-btn" v-if="maxCount">
  80 + <u-upload width="200" height="150" :deletable="isDeletable" :fileList="fileList" @afterRead="afterRead"
  81 + @delete="deletePic" name="3" multiple :maxCount="maxCount" :previewFullImage="true"></u-upload>
74 82 </view>
75 83 </view>
76 84 </view>
... ... @@ -86,10 +94,11 @@
86 94 import { uploadFilePromise } from '@/apis/common.js';
87 95 import { askTransport, scanDetail } from '@/apis/order.js';
88 96 import { onLoad } from '@dcloudio/uni-app';
89   -import { ref } from 'vue';
90   -const details = ref({})
91   -const fileList = ref([])
92   -const isDeletable = ref(false)
  97 +import { computed, ref } from 'vue';
  98 +const details = ref({});
  99 +const fileList = ref([]);
  100 +const isDeletable = ref(false);
  101 +const maxCount = computed(() => isDeletable.value ? 3 : fileList.value.length);
93 102 // 删除图片
94 103 const deletePic = (event) => {
95 104 fileList.value.splice(event.index, 1);
... ... @@ -121,7 +130,9 @@ const afterRead = async (event) =&gt; {
121 130 fileListLen++;
122 131 }
123 132 };
124   -
  133 +const handlerInputChange = (val) => {
  134 + console.log(val);
  135 +}
125 136 const handlerSubmit = async () => {
126 137 // 校验参数
127 138 let params = {
... ... @@ -140,9 +151,9 @@ const handlerSubmit = async () =&gt; {
140 151 uni.$u.toast("当前趟次记录失败")
141 152 })
142 153 // 返回上级
143   - // uni.navigateBack({
144   - // delta: 1
145   - // })
  154 + uni.navigateBack({
  155 + delta: 1
  156 + });
146 157 }
147 158 }
148 159  
... ... @@ -170,21 +181,21 @@ const validateImage = (fillImageList) =&gt; {
170 181 for (let index = 0; index < fillImageList.length; index++) {
171 182 const str = fillImageList[index];
172 183 if (!str.startsWith("/profile/upload")) {
173   - uni.$u.toast("请等待图片上传~")
  184 + uni.$u.toast("请等待图片上传~");
174 185 return false;
175 186 }
176 187 }
177 188 return true;
178 189 }
179   - uni.$u.toast("请上传图片~")
  190 + uni.$u.toast("请上传图片~");
180 191 return false;
181 192 }
182 193  
183 194 onLoad((options) => {
184 195 if (options.data) {
185   - details.value = JSON.parse(decodeURIComponent(options.data))
186   - isDeletable.value = true
187   - isNew.value = true
  196 + details.value = JSON.parse(decodeURIComponent(options.data));
  197 + isDeletable.value = true;
  198 + isNew.value = true;
188 199 }
189 200 if (options.garAskId) {
190 201 // TODO query
... ... @@ -285,9 +296,7 @@ $l-h-8: 80rpx;
285 296 justify-content: space-between;
286 297 }
287 298  
288   - .scan-upload-fill-image-btn {
289   - u-upload {}
290   - }
  299 + .scan-upload-fill-image-btn {}
291 300 }
292 301 }
293 302  
... ...
garbage-removal/src/pages/order/handler-home/swiper-list-item/index.vue
  View file @b4a8b37
1 1 <template>
2 2 <view class="content-container">
3   - <z-paging ref="paging" :fixed="false" v-model="dataList" :auto="false" @query="queryList">
  3 + <z-paging ref="paging" :fixed="false" v-model="dataList" height="100%" :auto="false" @query="queryList">
4 4 <empty-view slot:empty></empty-view>
5 5 <view class="page-box">
6 6 <view class="order" v-for="(item, index) in dataList" :key="index">
... ...
garbage-removal/src/pages/order/handler-home/transport-detail/index.vue
  View file @b4a8b37
... ... @@ -53,9 +53,18 @@
53 53 <up-image :show-loading="true" :src="item.fillImage" width="80rpx" height="80rpx"></up-image>
54 54 </view>
55 55 <view style="display: flex;align-items: center;width: 100%;justify-content: center;">
56   - <text style=" transform: rotateY(180deg);">
57   - <up-icon name="car-fill" size="40" color="#19a97c"></up-icon></text>
58   - <text style="margin-left:15rpx;font-size: 25rpx;">{{ item.garHandlerCarCode }}</text>
  56 + <view style="display: flex;justify-content: center;align-items: center;font-size: 25rpx;">
  57 + <view style="margin-right: 4rpx;">
  58 + 载重
  59 + </view>
  60 + <view>{{ item.garCarryingWeight }}</view>
  61 + </view>
  62 + </view>
  63 + <view style="display: flex;align-items: center;width: 100%;justify-content: center;">
  64 + <view style=" transform: rotateY(180deg);">
  65 + <up-icon name="car-fill" size="40" color="#19a97c"></up-icon>
  66 + </view>
  67 + <view style="margin-left:15rpx;font-size: 25rpx;">{{ item.garHandlerCarCode }}</view>
59 68 </view>
60 69 <view style="display: flex; align-items: center;width: 150rpx; justify-content: flex-end;"
61 70 @click="goTransportDetail(item)">
... ...
garbage-removal/src/pages/order/index.vue
  View file @b4a8b37
... ... @@ -16,6 +16,11 @@ const userType = computed(() =&gt; mainStore.userType)
16 16 console.log(userType.value);
17 17 </script>
18 18 <style lang="scss" scoped>
  19 +.container {
  20 + width: 100%;
  21 + height: 100%;
  22 +}
  23 +
19 24 ::v-deep .u-tabs__wrapper__scroll-view {
20 25 background-color: #19a97c;
21 26 }
... ...
garbage-removal/src/pages/order/other-home/index.vue
  View file @b4a8b37
1 1 <template>
2   - <z-paging-swiper>
3   - <template v-slot:top>
4   - <u-tabs lineWidth="40" lineColor="#ffffff" lineHeight="6"
5   - :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
6   - ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
7   - </template>
8   - <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
9   - <swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
10   - <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
11   - </swiper-item>
12   - </swiper>
13   - </z-paging-swiper>
  2 + <view class="order-container">
  3 + <z-paging-swiper>
  4 + <template v-slot:top>
  5 + <view class="header-box" :style="{
  6 + 'height': lightHeight, 'line-height': lightHeight,
  7 + 'padding-top': topMargin
  8 + }
  9 + ">
  10 + <view class="header-box-left-message" v-if="userType == '用户'" @click="handlerMessageClick">
  11 + <u-icon name="bell-fill" size="32" color="#ffffff" @click="goBack"></u-icon>
  12 + <up-badge :type="type" max="99" :value="messageCount"></up-badge>
  13 + </view>
  14 + <view class="header-box-left-message" v-else>
  15 + &nbsp;
  16 + </view>
  17 + <view class="header-box-title">
  18 + {{ title }}
  19 + </view>
  20 + </view>
  21 + <u-tabs lineWidth=" 40" lineColor="#ffffff" lineHeight="6"
  22 + :activeStyle="{ 'color': '#ffffff', 'font-weight': 'bolder' }" :inactiveStyle="{ color: '#ffffff' }"
  23 + ref="uTabsElement" :list="list" :current="current" @change="tabsChange" :scrollable="false"></u-tabs>
  24 + </template>
  25 + <swiper class="swiper" :current="swiperCurrent" @translation="translation" @animationfinish="animationfinish">
  26 + <swiper-item class="swiper-item" v-for="( item, index ) in list " :key="index">
  27 + <swiper-list-item :tabIndex="index" :currentIndex="swiperCurrent"></swiper-list-item>
  28 + </swiper-item>
  29 + </swiper>
  30 + </z-paging-swiper>
  31 + </view>
  32 +
14 33 </template>
15 34 <script setup>
16   -import { ref } from 'vue';
  35 +import { queryOrderMessageCount } from '@/apis/order.js';
  36 +import { useMainStore } from '@/stores/index.js';
  37 +import { onLoad, onShow } from '@dcloudio/uni-app';
  38 +import { computed, ref } from 'vue';
17 39 import swiperListItem from './swiper-list-item/index.vue';
  40 +const store = useMainStore();
18 41 const list = ref([{ name: '待清运' }, { name: '清运中' }, { name: '全部' }, { name: '已完成' }])
19 42 const current = ref(0);
  43 +const userType = computed(() => store.userType)
20 44 const swiperCurrent = ref(0)
21 45 const uTabsElement = ref()
  46 +const topMargin = ref()
  47 +const lightHeight = ref()
  48 +const messageCount = ref(0)
  49 +const title = ref("订单列表")
22 50 const tabsChange = (el) => {
23 51 swiperCurrent.value = Number(el.index)
24 52 }
... ... @@ -29,10 +57,67 @@ const animationfinish = (e) =&gt; {
29 57 const translation = (e) => {
30 58 uTabsElement.value.setDx(e.detail.dx)
31 59 }
  60 +const handlerMessageClick = () => {
  61 + uni.$u.route("pages/order/other-home/user-message/index")
  62 +}
  63 +onLoad(() => {
  64 + try {
  65 + const { height, top } = uni.getMenuButtonBoundingClientRect();
  66 + topMargin.value = top + "px";
  67 + lightHeight.value = height + 'px';
  68 + } catch (error) {
  69 + topMargin.value = "60rpx";
  70 + lightHeight.value = "60rpx"
  71 + console.log("There is no menu because the current app is not a small program");
  72 + }
  73 +})
  74 +onShow(() => {
  75 + if (userType.value == '用户') {
  76 + queryOrderMessageCount().then(res => {
  77 + messageCount.value = res.data.data
  78 + })
  79 + }
  80 +})
32 81 </script>
33 82 <style lang="scss" scoped>
34   -.swiper {
  83 +.order-container {
35 84 height: 100%;
36   - background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  85 + width: 100%;
  86 + display: flex;
  87 + flex-direction: column;
  88 + background: #19a97c;
  89 + box-sizing: border-box;
  90 +
  91 + .header-box {
  92 + width: 100%;
  93 + color: white;
  94 + display: flex;
  95 + justify-content: flex-start;
  96 + align-items: center;
  97 + /* 分散对齐，自动调整间距 */
  98 +
  99 + .header-box-left-message {
  100 + width: 150rpx;
  101 + display: flex;
  102 + justify-content: center;
  103 + align-items: center;
  104 + }
  105 +
  106 + .header-box-title {
  107 + font-size: 35rpx;
  108 + font-weight: bold;
  109 + width: 600rpx;
  110 + text-align: center;
  111 + // 向左偏移75rpx
  112 + margin-left: -75rpx;
  113 +
  114 + }
  115 +
  116 + }
  117 +
  118 + .swiper {
  119 + height: 100%;
  120 + background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  121 + }
37 122 }
38 123 </style>
... ...
garbage-removal/src/pages/order/other-home/user-message/index.vue 0 → 100644
  View file @b4a8b37
  1 +<template>
  2 + <view class="message-container">
  3 + <view class="message-header-box" v-if="messageList.length">
  4 + <view class="message-header-box-btn">
  5 + <u-button color="#19a97c" size="mini" @click="handlerReadAllClick">全部删除</u-button>
  6 + </view>
  7 + </view>
  8 + <z-paging ref="paging" v-model="messageList" :fixed="false" @query="queryList">
  9 + <empty-view slot:empty></empty-view>
  10 + <view class="message-list-item" v-for="(item, index) in messageList" :key="item.id">
  11 + <view class="message-list-item-main">
  12 + <view class="message-list-item-main-content">
  13 + {{ item.garContent }}
  14 + </view>
  15 + <u-icon name="close-circle" @click="handlerReadClick(item.garId)" color="red"></u-icon>
  16 + </view>
  17 + </view>
  18 + </z-paging>
  19 + </view>
  20 +</template>
  21 +
  22 +<script setup>
  23 +import { queryOrderMessageList, readMessage } from '@/apis/order.js';
  24 +import { onLoad } from '@dcloudio/uni-app';
  25 +import { ref } from 'vue';
  26 +const paging = ref(null)
  27 +const messageList = ref([])
  28 +const handlerReadClick = (msgId) => {
  29 + if (msgId) {
  30 + // 提示确认删除
  31 + uni.showModal({
  32 + title: '提示',
  33 + content: '确定删除吗？',
  34 + success: function (res) {
  35 + if (res.confirm) {
  36 + readMessage([msgId]).then(res => {
  37 + paging.value.reload();
  38 + })
  39 + } else if (res.cancel) {
  40 + console.log('用户点击取消');
  41 + }
  42 + }
  43 + })
  44 + }
  45 +}
  46 +
  47 +const handlerReadAllClick = () => {
  48 + // 提示确认删除
  49 + uni.showModal({
  50 + title: '提示',
  51 + content: '确定删除吗？',
  52 + success: function (res) {
  53 + if (res.confirm) {
  54 + let msgIds = messageList.value.map(item => item.garId);
  55 + readMessage(msgIds).then(res => {
  56 + paging.value.reload();
  57 + })
  58 + } else if (res.cancel) {
  59 + console.log('用户点击取消');
  60 + }
  61 + }
  62 + })
  63 +}
  64 +const initMessageList = () => {
  65 + setTimeout(() => {
  66 + paging.value.reload();
  67 + }, 0);
  68 +}
  69 +
  70 +const queryList = (pageNo, pageSize) => {
  71 +
  72 + // 查询公司信息
  73 + queryOrderMessageList(pageNo, pageSize).then(res => {
  74 + paging.value.complete(res.data.data.list);
  75 + })
  76 +}
  77 +onLoad(() => {
  78 + initMessageList();
  79 +})
  80 +</script>
  81 +
  82 +<style lang="scss" scoped>
  83 +.message-container {
  84 + width: 100%;
  85 + height: 100%;
  86 + box-sizing: border-box;
  87 + background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  88 +
  89 + .message-list-item {
  90 + line-height: 80rpx;
  91 + padding: 20rpx;
  92 + box-sizing: border-box;
  93 +
  94 +
  95 + .message-list-item-main {
  96 + display: flex;
  97 + justify-content: space-between;
  98 + align-items: center;
  99 +
  100 + .message-list-item-main-content {}
  101 + }
  102 + }
  103 +
  104 + .message-header-box {
  105 + box-sizing: border-box;
  106 + height: 80rpx;
  107 + width: 100%;
  108 + display: flex;
  109 + justify-content: flex-end;
  110 + align-items: center;
  111 + right: 40rpx;
  112 +
  113 + .message-header-box-btn {}
  114 + }
  115 +}
  116 +</style>
... ...
garbage-removal/src/pages/wode/choose/index.vue
  View file @b4a8b37
... ... @@ -13,9 +13,6 @@
13 13 <view v-if="item.company" class="choose-tyep-item-text-right-compay">
14 14 {{ item.company }}
15 15 </view>
16   - <view class="choose-tyep-item-text-right-info">
17   - {{ item.info }}
18   - </view>
19 16 <view class="choose-type-item-text-right-label">
20 17 {{ item.label }}
21 18 </view>
... ... @@ -236,18 +233,13 @@ onLoad((options) =&gt; {
236 233 justify-content: space-around;
237 234 color: white;
238 235  
239   - .choose-tyep-item-text-right-info {
240   - font-size: 28rpx;
241   - }
242   -
243 236 .choose-tyep-item-text-right-compay {
244 237 font-weight: bolder;
245   - line-height: 35rpx;
246 238 font-size: 32rpx;
247 239 }
248 240  
249 241 .choose-type-item-text-right-label {
250   - font-size: 23rpx;
  242 + font-size: 30rpx;
251 243 padding: 8rpx 15rpx;
252 244 border-radius: 5rpx;
253 245 color: $u-info-dark;
... ...
garbage-removal/src/pages/wode/index.vue
  View file @b4a8b37
... ... @@ -80,17 +80,15 @@ const handleLoginOut = () =&gt; {
80 80 </script>
81 81  
82 82 <style lang="scss" scoped>
83   -page {
84   - background-color: #19a97c;
85   -}
  83 +page {}
86 84  
87 85 .wode-container {
88 86 height: 100%;
89 87 box-sizing: border-box;
90   - background: linear-gradient(to bottom, #19a97c, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  88 + background: linear-gradient(to bottom, #19a97c, #22cf98, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color, $u-bg-color);
  89 + padding-top: 100rpx;
91 90  
92 91 .head-top-box {
93   - margin-top: 100rpx;
94 92 display: flex;
95 93 align-items: center;
96 94  
... ...