guzijian / garbage-removal · Commits

Commit 6dcb91e50d136eab2ef4871f5bc58ac24f8f8bd4

Authored by guzijian
1 parent 20ee764d

feat:完善公司界面

Inline Side-by-side
Showing 10 changed files with 1154 additions and 203 deletions
garbage-removal/src/App.vue
  View file @6dcb91e
... ... @@ -32,11 +32,13 @@ html {
32 32 page {
33 33 box-sizing: border-box;
34 34 min-height: 100%;
  35 + height: 100%;
35 36 // border-top: 1rpx solid transparent;
36 37 // border-bottom: 1rpx solid transparent;
37 38 background-color: $u-info-light;
38 39 padding-bottom: 0;
39 40 padding-bottom: constant(safe-area-inset-bottom);
40 41 padding-bottom: env(safe-area-inset-bottom);
  42 + font-family: '黑体'
41 43 }
42 44 </style>
... ...
garbage-removal/src/pages.json
  View file @6dcb91e
... ... @@ -10,7 +10,31 @@
10 10 {
11 11 "path": "pages/home/index",
12 12 "style": {
13   - "navigationBarTitleText": ""
  13 + "navigationBarTitleText": "",
  14 + /** h5*/
  15 + // "navigationBarBackgroundColor": "transparent",
  16 + /** 小程序*/
  17 + "navigationStyle":"custom",
  18 + "navigationBarBackgroundColorr":"#ffffff00"
  19 + /** App */
  20 + // "app-plus": {
  21 + // "titleNView": {
  22 + // "type": "float",
  23 + // "titleText": ""
  24 + // }
  25 + // }
  26 + }
  27 + },
  28 + {
  29 + "path": "pages/home/clean/company-detail/index",
  30 + "style": {
  31 + "navigationBarTitleText": "公司信息"
  32 + }
  33 + },
  34 + {
  35 + "path": "pages/home/clean/index",
  36 + "style": {
  37 + "navigationBarTitleText": "装修垃圾"
14 38 }
15 39 },
16 40 {
... ...
garbage-removal/src/pages/home/address/addSite.vue
  View file @6dcb91e
... ... @@ -108,11 +108,8 @@ onMounted(() =&gt; {
108 108 box-sizing: border-box;
109 109 padding: 15rpx;
110 110 // background-color: $u-info-light;
111   - position: fixed;
112   - top: 0;
113   - bottom: 0;
114   - left: 0;
115   - right: 0;
  111 + height: 100%;
  112 + width: 100%;
116 113 background: linear-gradient(to bottom, $u-success-disabled, $u-info-light, $u-info-light, $u-info-light);
117 114  
118 115 .wrap-from-container {
... ...
garbage-removal/src/pages/home/address/index.vue
  View file @6dcb91e
... ... @@ -14,11 +14,11 @@
14 14 <u-icon name="edit-pen" :size="40" color="#999999"></u-icon>
15 15 </view>
16 16 </view>
17   - <view class="addSite" @tap="toAddSite">
18   - <view class="add">添加地址</view>
19   - </view>
20   - </view>
21 17  
  18 + </view>
  19 + <view class="addSite" @tap="toAddSite">
  20 + <view class="add">添加地址</view>
  21 + </view>
22 22 </view>
23 23 </template>
24 24  
... ... @@ -99,22 +99,18 @@ onLoad(() =&gt; {
99 99  
100 100 <style lang="scss" scoped>
101 101 .address-container {
102   - position: fixed;
103   - top: 0;
104   - left: 0;
105   - right: 0;
106   - bottom: 0;
107 102 height: 100%;
108   - width: 750rpx;
  103 + width: 100%;
109 104 background: linear-gradient(to bottom, $u-success-disabled, $u-info-light, $u-info-light, $u-info-light);
110   -
111 105 padding: 20rpx;
112 106 box-sizing: border-box;
  107 + display: flex;
  108 + justify-content: center;
113 109  
114 110 .address-box {
115 111 height: calc(100% - 130rpx);
116 112 width: 100%;
117   - overflow-x: scroll;
  113 + overflow-y: scroll;
118 114 box-sizing: border-box;
119 115  
120 116 .item {
... ... @@ -127,7 +123,8 @@ onLoad(() =&gt; {
127 123 .top {
128 124 display: flex;
129 125 font-weight: bold;
130   - font-size: 34rpx;
  126 + font-size: 30rpx;
  127 + color: $u-main-color;
131 128  
132 129 .phone {
133 130 margin-left: 60rpx;
... ... @@ -167,27 +164,27 @@ onLoad(() =&gt; {
167 164 }
168 165 }
169 166  
170   - .addSite {
171   - // position: absolute;
  167 +
  168 + }
  169 +
  170 + .addSite {
  171 + position: absolute;
  172 + display: flex;
  173 + justify-content: center;
  174 + align-content: center;
  175 + width: 600rpx;
  176 + line-height: 100rpx;
  177 + position: absolute;
  178 + bottom: 30rpx;
  179 + background-color: green;
  180 + border-radius: 60rpx;
  181 + font-size: 30rpx;
  182 +
  183 + .add {
172 184 display: flex;
173   - justify-content: space-around;
174   - width: 600rpx;
175   - line-height: 100rpx;
176   - position: absolute;
177   - bottom: 30rpx;
178   - left: 80rpx;
179   - background-color: green;
180   - border-radius: 60rpx;
181   - font-size: 30rpx;
182   -
183   - .add {
184   - display: flex;
185   - align-items: center;
186   - color: #ffffff;
187   - }
  185 + align-items: center;
  186 + color: #ffffff;
188 187 }
189 188 }
190   -
191   -
192 189 }
193 190 </style>
... ...
garbage-removal/src/pages/home/clean/company-detail/index.vue 0 → 100644
  View file @6dcb91e
  1 +<template>
  2 + <view class="company-container">
  3 + <view class="company-content-box">
  4 + <view class="company-content-header">
  5 + <view class="company-content-left">
  6 + <image class="company-content-left-image" src="https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png" />
  7 + </view>
  8 + <view class="company-content-right">
  9 + <view class="company-content-right-name">
  10 + 宁波垃圾回收公司
  11 + </view>
  12 + <view class="company-content-right-area">
  13 + 注册区划：海曙区
  14 + </view>
  15 + </view>
  16 + </view>
  17 + <view class="company-content-base-data">
  18 + <view class="company-content-base-data-title">
  19 + 基础信息
  20 + </view>
  21 + <view class="company-content-base-data-info">
  22 + <view class="company-content-base-data-info-item" v-for="(item, index) in baseDataList" :key="index">
  23 + <view class="company-content-base-data-info-item-label">
  24 + {{ item.label }}:
  25 + </view>
  26 + <view class="company-content-base-data-info-item-txt">
  27 + {{ item.value }}
  28 + </view>
  29 + </view>
  30 + </view>
  31 + </view>
  32 + <view class="company-content-car-info">
  33 + <view class="company-content-car-info-title">核准车辆信息</view>
  34 + <view class="company-content-car-info-sub-title">车牌号（车型）</view>
  35 + <view class="company-content-car-info-car-list">
  36 + <view v-for="item in baseDataList" class="company-content-car-info-car-list-item">
  37 + 浙B5S785<text class="car-type">(自卸车)</text>
  38 + </view>
  39 + </view>
  40 + <view class="company-content-remark">
  41 + 核准说明：以上为市容环境卫生主管部门核准信息
  42 + </view>
  43 + </view>
  44 + <view class="company-content-server">
  45 + <view class="company-content-server-title">企业服务承诺</view>
  46 + <view class="company-content-server-detail">
  47 + <view class="company-content-server-detail-info-item" v-for="(item, index) in serverData" :key="index">
  48 + <view class="company-content-server-detail-info-item-label">
  49 + {{ item.label }}:
  50 + </view>
  51 + <view class="company-content-server-detail-info-item-txt">
  52 + {{ item.value }}
  53 + </view>
  54 + </view>
  55 + </view>
  56 + <view class="company-content-remark">
  57 + 价格说明：实际成交由实际产生的费用为准
  58 + </view>
  59 + </view>
  60 + <view class="company-content-server-define">
  61 + <view class="company-content-server-define-title">
  62 + 服务承诺说明:
  63 + </view>
  64 + <view class="company-content-server-define-txt">
  65 + 以上信息为企业自行承诺服务信息，由企业负责解释说明，本平台不负责核实。
  66 + </view>
  67 + </view>
  68 + </view>
  69 + <view class="company-bottom-button">
  70 + <view class="company-bottom-button-left" @click="handleContactClick(tel)">
  71 + <u-icon name="server-fill" :size="50"></u-icon>
  72 + <view class="company-bottom-button-left-txt">
  73 + 联系公司
  74 + </view>
  75 + </view>
  76 + <view class="company-bottom-button-right">
  77 + <u-button icon="car-fill" :custom-style="customStyle" @click="handleCleanGarbage(companyId)" type="success"
  78 + :hairline="true" size="normal" shape="circle" text="垃圾清运"></u-button>
  79 + </view>
  80 + </view>
  81 + </view>
  82 +</template>
  83 +
  84 +<script setup>
  85 +import { onLoad } from '@dcloudio/uni-app';
  86 +import { onMounted, ref } from 'vue';
  87 +const baseDataList = ref([{ label: '法人' }, { label: '负责人' }, { label: '业务联系电话' }, { label: '道路运输许可证' }, { label: '核准有效期' }, { label: '注册地址' }]);
  88 +const baseData = ref({
  89 + legalEntity: '王波',
  90 + leader: '王波',
  91 + contact: '18985336652',
  92 + allowCertificate: "无",
  93 + validTime: '2020-10-20至2024-10-19',
  94 + signAddress: '浙江省宁波市清洲区复明街道会展路128号017幢7-32-3'
  95 +})
  96 +const customStyle = ref({
  97 + fontSize: '30rpx',
  98 + lineHeight: '30rpx'
  99 +})
  100 +const companyId = ref()
  101 +const tel = ref()
  102 +const handleCleanGarbage = (companyId) => {
  103 + console.log("垃圾清运");
  104 + uni.$u.route({
  105 + url: `pages/home/clean/index?companyId=${companyId}`,
  106 + })
  107 +}
  108 +
  109 +const serverData = ref([
  110 + {
  111 + label: '清运区域',
  112 + value: '郑海区,江北区,奉化区,北仑区,海曙区,清洲区'
  113 + }, {
  114 + label: '垃圾类型',
  115 + value: '装修垃圾'
  116 + }, {
  117 + label: '服务价格区间',
  118 + value: '￥400-600'
  119 + }
  120 +])
  121 +/**
  122 + * 拨打电话回调
  123 + */
  124 +const handleContactClick = (val) => {
  125 + console.log("拨打电话");
  126 + uni.makePhoneCall({ phoneNumber: val }).then(res => {
  127 + console.log(res);
  128 + }).catch(err => { });
  129 +}
  130 +onLoad((options) => {
  131 + console.log(options.companyId);
  132 + companyId.value = options.companyId
  133 + tel.value = options.tel
  134 +})
  135 +onMounted(() => {
  136 + initData();
  137 +})
  138 +const initData = () => {
  139 + baseDataList.value[0].value = baseData.value.legalEntity
  140 + baseDataList.value[1].value = baseData.value.leader
  141 + baseDataList.value[2].value = baseData.value.contact
  142 + baseDataList.value[3].value = baseData.value.allowCertificate
  143 + baseDataList.value[4].value = baseData.value.validTime
  144 + baseDataList.value[5].value = baseData.value.signAddress
  145 +}
  146 +</script>
  147 +
  148 +<style lang="scss" scoped>
  149 +$custom-page-padding: 30rpx;
  150 +$custom-card-padding: 20rpx;
  151 +$custom-card-title: 40rpx;
  152 +$custom-card-remark-size: 20rpx;
  153 +$custom-card-remark-color: $u-main-color;
  154 +$custom-card-border-radio: 20rpx;
  155 +$custom-card-back-color: #ffffff;
  156 +$custom-card-margin-bottom: 20rpx;
  157 +$custom-txt-line-height: 100rpx;
  158 +$custom-bottom-height: 200rpx;
  159 +
  160 +
  161 +
  162 +.company-container {
  163 + height: 100%;
  164 + width: 100%;
  165 + background-color: $u-info-light;
  166 + box-sizing: border-box;
  167 + overflow-y: scroll;
  168 +
  169 + .company-content-box {
  170 + width: 100%;
  171 + height: 100%;
  172 + padding: $custom-page-padding;
  173 + box-sizing: border-box;
  174 +
  175 + .company-content-header {
  176 + display: flex;
  177 + padding: $custom-card-padding;
  178 + box-sizing: border-box;
  179 + background-color: $custom-card-back-color;
  180 + border-radius: $custom-card-border-radio;
  181 + margin-bottom: $custom-card-margin-bottom;
  182 +
  183 +
  184 + .company-content-left {
  185 + width: 151rpx;
  186 + height: 151rpx;
  187 + border-radius: $custom-card-border-radio;
  188 + border: 1px solid #9a9998;
  189 + margin-right: 20rpx;
  190 +
  191 + .company-content-left-image {
  192 + width: 150rpx;
  193 + height: 150rpx;
  194 + box-sizing: border-box;
  195 + object-fit: cover;
  196 + border-radius: $custom-card-border-radio;
  197 + }
  198 + }
  199 +
  200 + .company-content-right {
  201 + width: 100%;
  202 + display: flex;
  203 + flex-direction: column;
  204 + justify-content: space-around;
  205 + align-items: left;
  206 + box-sizing: border-box;
  207 +
  208 + .company-content-right-name {
  209 + font-size: 35rpx;
  210 + font-weight: bold;
  211 + }
  212 +
  213 + .company-content-right-area {
  214 + font-size: 25rpx;
  215 + color: $u-info;
  216 + }
  217 + }
  218 +
  219 + }
  220 +
  221 + .company-content-base-data {
  222 + width: 100%;
  223 + background-color: $custom-card-back-color;
  224 + border-radius: $custom-card-border-radio;
  225 + margin-bottom: $custom-card-margin-bottom;
  226 + padding: $custom-card-padding;
  227 + box-sizing: border-box;
  228 +
  229 + .company-content-base-data-title {
  230 + font-size: $custom-card-title;
  231 + font-weight: bold;
  232 + }
  233 +
  234 + .company-content-base-data-info {
  235 + display: flex;
  236 + flex-direction: column;
  237 + text-align: left;
  238 +
  239 +
  240 + .company-content-base-data-info-item {
  241 + display: flex;
  242 + box-sizing: border-box;
  243 + border-bottom: 2rpx solid $u-info-light;
  244 + justify-content: flex-start;
  245 + align-items: center;
  246 +
  247 + .company-content-base-data-info-item-label {
  248 + box-sizing: border-box;
  249 + margin-right: 15rpx;
  250 + color: $u-info;
  251 + white-space: nowrap;
  252 + line-height: $custom-txt-line-height;
  253 + display: flex;
  254 + justify-content: flex-end;
  255 + align-items: flex-end;
  256 + font-size: 30rpx;
  257 + }
  258 +
  259 + .company-content-base-data-info-item-txt {
  260 + font-size: 29rpx;
  261 + }
  262 + }
  263 + }
  264 +
  265 + }
  266 +
  267 + .company-content-car-info {
  268 + border-radius: $custom-card-border-radio;
  269 + background-color: $custom-card-back-color;
  270 + margin-bottom: $custom-card-margin-bottom;
  271 + padding: $custom-card-padding;
  272 + width: 100%;
  273 + box-sizing: border-box;
  274 +
  275 + .company-content-car-info-title {
  276 + font-size: $custom-card-title;
  277 + font-weight: bold;
  278 + }
  279 +
  280 + .company-content-car-info-sub-title {
  281 + font-size: 25rpx;
  282 + line-height: $custom-txt-line-height;
  283 + box-sizing: border-box;
  284 + color: $u-info;
  285 + }
  286 +
  287 + .company-content-car-info-car-list {
  288 + line-height: $custom-txt-line-height;
  289 + box-sizing: border-box;
  290 + max-height: 300rpx;
  291 + width: 100%;
  292 + overflow-y: auto;
  293 +
  294 +
  295 + .company-content-car-info-car-list-item {
  296 + font-size: 30rpx;
  297 + border-bottom: 2rpx solid $u-info-light;
  298 +
  299 + .car-type {
  300 + color: $u-info;
  301 + }
  302 + }
  303 + }
  304 +
  305 +
  306 + }
  307 +
  308 + .company-content-remark {
  309 + font-size: $custom-card-remark-size;
  310 + color: $custom-card-remark-color;
  311 + line-height: 80rpx;
  312 + box-sizing: border-box;
  313 + display: flex;
  314 + align-items: center;
  315 + justify-content: center;
  316 +
  317 + }
  318 +
  319 + .company-content-server {
  320 + width: 100%;
  321 + border-radius: $custom-card-border-radio;
  322 + background-color: $custom-card-back-color;
  323 + padding: $custom-card-padding;
  324 + margin-bottom: $custom-card-margin-bottom;
  325 + box-sizing: border-box;
  326 +
  327 + .company-content-server-title {
  328 + font-size: $custom-card-title;
  329 + font-weight: bold;
  330 + }
  331 +
  332 + .company-content-server-detail {
  333 + display: flex;
  334 + flex-direction: column;
  335 + justify-content: center;
  336 +
  337 + .company-content-server-detail-info-item {
  338 + display: flex;
  339 + box-sizing: border-box;
  340 + border-bottom: 2rpx solid $u-info-light;
  341 + justify-content: flex-start;
  342 + align-items: center;
  343 +
  344 + .company-content-server-detail-info-item-label {
  345 + box-sizing: border-box;
  346 + margin-right: 15rpx;
  347 + color: $u-info;
  348 + white-space: nowrap;
  349 + line-height: $custom-txt-line-height;
  350 + display: flex;
  351 + justify-content: flex-end;
  352 + align-items: flex-end;
  353 + font-size: 28rpx;
  354 + }
  355 +
  356 + .company-content-server-detail-info-item-txt {
  357 + font-size: 28rpx;
  358 + }
  359 + }
  360 + }
  361 + }
  362 +
  363 + .company-content-server-define {
  364 + font-size: 30rpx;
  365 + color: $u-info;
  366 + padding-bottom: $custom-bottom-height;
  367 + width: 100%;
  368 +
  369 + .company-content-server-define-title {
  370 + line-height: 80rpx;
  371 + }
  372 +
  373 + .company-content-server-define-txt {}
  374 + }
  375 + }
  376 +
  377 + .company-bottom-button {
  378 + position: absolute;
  379 + bottom: 0;
  380 + left: 0;
  381 + width: 100%;
  382 + height: $custom-bottom-height;
  383 + background-color: #ffffff;
  384 + display: flex;
  385 + box-sizing: border-box;
  386 + padding: 50rpx;
  387 + justify-content: space-between;
  388 + align-items: center;
  389 +
  390 + .company-bottom-button-left {
  391 + flex: 1;
  392 + display: flex;
  393 + justify-content: center;
  394 + align-items: center;
  395 + font-weight: bold;
  396 + font-size: 40rpx;
  397 + box-sizing: border-box;
  398 +
  399 + .company-bottom-button-left-txt {
  400 + margin-left: 10rpx;
  401 + }
  402 + }
  403 +
  404 + .company-bottom-button-right {
  405 + flex: 1;
  406 + margin-left: 10rpx;
  407 + box-sizing: border-box;
  408 +
  409 +
  410 +
  411 + .company-bottom-button-right-clean {}
  412 + }
  413 + }
  414 +}
  415 +</style>
... ...
garbage-removal/src/pages/home/clean/index.vue 0 → 100644
  View file @6dcb91e
  1 +<template>
  2 + <view class="company-clean-container">
  3 + <view class="company-clean-container-header">
  4 + <view class="company-clean-container-header-address">
  5 + 宁波市海曙区昱湖街道上海
  6 + </view>
  7 + <view class="company-clean-container-header-base-info">
  8 + 李云龙 189802245165
  9 + </view>
  10 + <view class="company-clean-container-header-reservation">
  11 + <view class="company-clean-container-header-reservation-left">
  12 + <u-icon name="calendar" size="40"></u-icon>
  13 + 预约时间
  14 + </view>
  15 + <view class="company-clean-container-header-reservation-right" @click="handleTimeChoose">
  16 + <text style="margin-right: 10rpx;">请选择时间</text> <u-icon name="arrow-right" size="25"></u-icon>
  17 + </view>
  18 + </view>
  19 +
  20 + </view>
  21 + <view class="company-clean-container-car-main">
  22 + <view class="company-clean-container-car-main-title">
  23 + 自卸车
  24 + </view>
  25 + <view class="company-clean-container-car-main-content">
  26 + <view class="company-clean-container-car-main-content-img">
  27 + <image class="company-clean-container-car-main-content-img" />
  28 + </view>
  29 + <view class="company-clean-container-car-main-content-remark">
  30 + 箱体长4.2m宽1.1，高0.7，最多课容纳约110袋袋装修垃圾（75cm*45每袋）
  31 + </view>
  32 + <view class="company-clean-container-car-main-content-type">
  33 + <view class="company-clean-container-car-main-content-type-choose">
  34 + <text style="margin-right: 10rpx;">6方车</text>
  35 + <u-icon name="arrow-down" size="30" color="#ffffff"></u-icon>
  36 + </view>
  37 + <view class="company-clean-container-car-main-content-type-price-area">
  38 + $5000元/车
  39 + </view>
  40 + </view>
  41 + <view class="company-clean-container-car-main-content-number">
  42 + <view class="company-clean-container-car-main-content-number-txt">
  43 + 添加车辆数量
  44 + </view>
  45 + <view class="company-clean-container-car-main-content-number-button">
  46 + <u-number-box :min="1" integer buttonSize="46" v-model="paramFrom.carNumber"></u-number-box>
  47 + </view>
  48 + </view>
  49 + <view class="company-clean-container-car-main-content-prompt">
  50 + 温馨提示：垃圾类型不符合，有权拒绝清运。
  51 + </view>
  52 + </view>
  53 + </view>
  54 +
  55 + <view class="company-clean-container-site-image-info">
  56 + <view class="company-clean-container-site-image-info-remark">
  57 + <text style="color: red;">*</text>现场照片（最多上传10张）
  58 + </view>
  59 + <view class="company-clean-container-site-image-info-img">
  60 + <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="10"
  61 + :previewFullImage="true"></u-upload>
  62 + </view>
  63 + <view class="company-clean-container-site-image-info-input-remark">
  64 + 填写备注
  65 + </view>
  66 + <view class="company-clean-container-site-image-info-input-remark-box">
  67 + <u--textarea v-model="paramFrom.remark" placeholder="请输入内容"></u--textarea>
  68 + </view>
  69 + </view>
  70 + <view class="company-clean-container-site-image-info-sure-button">
  71 + <u-radio-group v-model="paramFrom.sureReadFlag">
  72 + <u-radio :labelDisabled="true" label="本人已确认信息真实有效，并将上述信息告知市容环境卫生主管部门。"></u-radio>
  73 + </u-radio-group>
  74 + </view>
  75 + </view>
  76 +</template>
  77 +
  78 +<script setup>
  79 +import { onLoad } from '@dcloudio/uni-app';
  80 +import { ref } from 'vue';
  81 +const companyId = ref()
  82 +
  83 +const paramFrom = ref({
  84 + carNumber: 0,
  85 + remark: "",
  86 + sureReadFlag: false
  87 +})
  88 +
  89 +const fileList = ref([{
  90 +
  91 +}])
  92 +
  93 +const handleTimeChoose = () => {
  94 + console.log("选择时间");
  95 +}
  96 +onLoad((options) => {
  97 + console.log(options.companyId);
  98 + companyId.value = options.companyId;
  99 +})
  100 +
  101 +// 删除图片
  102 +const deletePic = (event) => {
  103 + fileList.value.splice(event.index, 1);
  104 +};
  105 +
  106 +// 新增图片
  107 +const afterRead = async (event) => {
  108 + // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  109 + let lists = [].concat(event.file);
  110 + let fileListLen = fileList.value.length;
  111 + lists.map((item) => {
  112 + fileList.value.push({
  113 + ...item,
  114 + status: 'uploading',
  115 + message: '上传中',
  116 + });
  117 + });
  118 + for (let i = 0; i < lists.length; i++) {
  119 + const result = await uploadFilePromise(lists[i].url);
  120 + let item = fileList.value[fileListLen];
  121 + fileList.value.splice(fileListLen, 1, {
  122 + ...item,
  123 + status: 'success',
  124 + message: '',
  125 + url: result,
  126 + });
  127 + fileListLen++;
  128 + }
  129 +};
  130 +
  131 +const uploadFilePromise = (url) => {
  132 + return new Promise((resolve, reject) => {
  133 + let a = uni.uploadFile({
  134 + url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
  135 + filePath: url,
  136 + name: 'file',
  137 + formData: {
  138 + user: 'test',
  139 + },
  140 + success: (res) => {
  141 + setTimeout(() => {
  142 + resolve(res.data.data);
  143 + }, 1000);
  144 + },
  145 + });
  146 + });
  147 +};
  148 +
  149 +
  150 +</script>
  151 +
  152 +<style lang="scss" scoped>
  153 +$custom-marin-bottom: 20rpx;
  154 +$custom-page-padding: 20rpx;
  155 +$custom-border-radio: 20rpx;
  156 +
  157 +.company-clean-container {
  158 + height: 100%;
  159 + width: 100%;
  160 + background-color: $u-info-light;
  161 + padding: $custom-page-padding;
  162 + box-sizing: border-box;
  163 +
  164 + .company-clean-container-header {
  165 + padding: $custom-page-padding;
  166 + box-sizing: border-box;
  167 + background-color: #ffffff;
  168 + border-radius: $custom-border-radio;
  169 + margin-bottom: $custom-marin-bottom;
  170 +
  171 + .company-clean-container-header-address {
  172 + font-size: 30rpx;
  173 + font-weight: bold;
  174 + color: $u-main-color;
  175 + }
  176 +
  177 + .company-clean-container-header-base-info {
  178 + font-size: 25rpx;
  179 + color: $u-info;
  180 + line-height: 80rpx;
  181 + }
  182 +
  183 + .company-clean-container-header-reservation {
  184 + display: flex;
  185 + justify-content: space-between;
  186 + font-size: 25rpx;
  187 +
  188 +
  189 + .company-clean-container-header-reservation-left {
  190 + display: flex;
  191 + align-items: center;
  192 + color: $u-content-color;
  193 + }
  194 +
  195 + .company-clean-container-header-reservation-right {
  196 + display: flex;
  197 + align-items: center;
  198 + color: $u-content-color;
  199 + }
  200 + }
  201 +
  202 +
  203 + }
  204 +
  205 + .company-clean-container-car-main {
  206 + padding: $custom-page-padding;
  207 + border-radius: $custom-border-radio;
  208 + box-sizing: border-box;
  209 + background-color: #ffffff;
  210 + margin-bottom: $custom-marin-bottom;
  211 +
  212 + .company-clean-container-car-main-title {
  213 + font-size: 30rpx;
  214 + font-weight: bold;
  215 + color: green;
  216 + display: flex;
  217 + justify-content: center;
  218 + }
  219 +
  220 + .company-clean-container-car-main-content {
  221 + width: 100%;
  222 + display: flex;
  223 + flex-direction: column;
  224 + justify-content: center;
  225 +
  226 + .company-clean-container-car-main-content-img {
  227 + width: 600rpx;
  228 + height: 400rpx;
  229 +
  230 + .company-clean-container-car-main-content-img {
  231 + width: 600rpx;
  232 + height: 400rpx;
  233 + }
  234 + }
  235 +
  236 + .company-clean-container-car-main-content-remark {
  237 + color: $u-tips-color;
  238 + font-size: 23rpx;
  239 + line-height: 30rpx;
  240 + padding: $custom-page-padding;
  241 + background-color: $u-info-light;
  242 + word-break: break-all;
  243 + }
  244 +
  245 + .company-clean-container-car-main-content-type {
  246 + margin-top: $custom-marin-bottom;
  247 + margin-bottom: $custom-marin-bottom;
  248 + display: flex;
  249 + justify-content: space-between;
  250 + border-radius: $custom-border-radio;
  251 + background-color: $u-info-light;
  252 + box-sizing: border-box;
  253 + font-size: 30rpx;
  254 +
  255 + .company-clean-container-car-main-content-type-choose {
  256 + width: 230rpx;
  257 + color: #ffffff;
  258 + display: flex;
  259 + justify-content: center;
  260 + align-items: center;
  261 + background-color: green;
  262 + padding: 30rpx $custom-page-padding 30rpx $custom-page-padding;
  263 + box-sizing: border-box;
  264 + border-radius: $custom-border-radio 0 0 $custom-border-radio;
  265 + }
  266 +
  267 + .company-clean-container-car-main-content-type-price-area {
  268 + width: 100%;
  269 + display: flex;
  270 + justify-content: flex-end;
  271 + align-items: center;
  272 + box-sizing: border-box;
  273 + color: $u-tips-color;
  274 + padding-right: $custom-page-padding;
  275 + }
  276 + }
  277 +
  278 + .company-clean-container-car-main-content-number {
  279 + display: flex;
  280 + justify-content: space-between;
  281 + font-size: 28rpx;
  282 + color: $u-tips-color;
  283 + font-weight: small;
  284 + align-items: center;
  285 +
  286 + .company-clean-container-car-main-content-number-txt {
  287 + line-height: 80rpx;
  288 + }
  289 +
  290 + .company-clean-container-car-main-content-number-button {}
  291 + }
  292 + }
  293 +
  294 +
  295 + }
  296 +
  297 + .company-clean-container-car-main-content-prompt {
  298 + color: $u-tips-color;
  299 + font-size: 23rpx;
  300 + line-height: 30rpx;
  301 + padding: $custom-page-padding;
  302 + word-break: break-all;
  303 + text-align: center;
  304 + }
  305 +
  306 + .company-clean-container-site-image-info {
  307 + padding: $custom-page-padding;
  308 + background-color: #ffffff;
  309 + border-radius: $custom-border-radio;
  310 + color: $u-info;
  311 + font-size: 28rpx;
  312 +
  313 + .company-clean-container-site-image-info-remark {
  314 + line-height: 80rpx;
  315 +
  316 + }
  317 +
  318 + .company-clean-container-site-image-info-img {}
  319 +
  320 + .company-clean-container-site-image-info-input-remark {
  321 + line-height: 80rpx;
  322 + }
  323 +
  324 + .company-clean-container-site-image-info-input-remark-box {}
  325 + }
  326 +
  327 +
  328 +
  329 + .company-clean-container-site-image-info-sure-button {}
  330 +}
  331 +</style>
... ...
garbage-removal/src/pages/home/index.vue
  View file @6dcb91e
... ... @@ -3,9 +3,11 @@
3 3  
4 4 <view class="top-swiper-image-scroll">
5 5 <u-swiper :list="swiperImageList" keyName="image" :autoplay="true" circular></u-swiper>
6   - <view class="top-address">
  6 + <view :style="{
  7 + 'height': lightHeight, 'line-height': lightHeight,
  8 + 'top': topMargin
  9 + }" class="top-address">
7 10 <view class="address-icon-image"><u-icon name="map" color="#fff" size="28"></u-icon></view>
8   -
9 11 <view class="address-text" @click="handleAddressInfo">
10 12 浙江省-宁波市-海曙区-鼓楼街道南站东xxxx
11 13 </view>
... ... @@ -37,21 +39,44 @@
37 39 </view>
38 40 </view>
39 41 <view class="company-list-content">
40   - <view class="company-list-item">
41   - <view class="company-list-item-main">
42   - <view class="company-list-item-main-left">
43   - 我是图片
  42 + <view class="company-list-content-box">
  43 + <view class="company-list-item" v-for="item in companyList" :key="item.companyId">
  44 + <view class="company-list-item-main">
  45 + <view class="company-list-item-main-left">
  46 + <image class="company-list-item-main-left-img" :src="item.image" />
  47 + </view>
  48 + <view class="company-list-item-main-right" @click="handleDetailClick(item.companyId, item.tel)">
  49 + <view class="company-list-item-main-right-name">
  50 + {{ item.companyName }}
  51 + </view>
  52 + <view class="company-list-item-main-right-score">
  53 + <text class="company-list-item-main-right-text">评分:</text>
  54 + <view class="company-list-item-main-right-score-start">
  55 + <u-icon v-for="todo in maxStar" :name="item.score > todo ? 'star-fill' : 'star'" color="#f9ae3d"
  56 + size="28"></u-icon>
  57 + </view>
  58 + <text class="company-list-item-main-right-text" style="color: #fd5d00;">5分</text>
  59 + </view>
  60 + <view class="company-list-item-main-right-price-number">
  61 + <view class="company-list-item-main-right-price">￥{{ item.startPrice }}起</view>
  62 + <view class="company-list-item-main-right-number">
  63 + 清运数：<text class="company-list-item-main-right-number-text">{{ item.cleanNumber }}</text>
  64 + </view>
  65 + </view>
  66 + <view class="company-list-item-main-right-remark">
  67 + {{ item.remark }}
  68 + </view>
  69 + </view>
44 70 </view>
45   - <view class="company-list-item-main-right">
46   - 我是描述
47   - </view>
48   - </view>
49   - <view class="company-list-item-bottom">
50   - <view class="company-list-item-bottom-contact-company">
51   - 联系公司
52   - </view>
53   - <view class="company-list-item-bottom-button-clean">
54   - 垃圾清运
  71 + <view class="company-list-item-bottom">
  72 + <view class="company-list-item-bottom-contact-company">
  73 + <u-button @click="handleContactClick(item.tel)" color="#a9e08f" size="normal" type="success"
  74 + :hairline="true" shape="circle" text="联系公司"></u-button>
  75 + </view>
  76 + <view class="company-list-item-bottom-button-clean">
  77 + <u-button @click="handleCleanGarbage(item.companyId)" type="success" :hairline="true" size="normal"
  78 + shape="circle" text="垃圾清运"></u-button>
  79 + </view>
55 80 </view>
56 81 </view>
57 82 </view>
... ... @@ -59,13 +84,18 @@
59 84 </view>
60 85 </view>
61 86 </view>
62   -
63 87 </view>
64 88 </template>
65 89  
66 90 <script setup >
  91 +import { onLoad } from '@dcloudio/uni-app';
67 92 import { ref } from 'vue';
68   -// const { proxy } = getCurrentInstance();
  93 +// 定义最大积分
  94 +let maxScore = 5
  95 +const maxStar = ref([])
  96 +const lightHeight = ref();//胶囊按钮信息
  97 +const topMargin = ref(null);//状态栏高度
  98 +const musicheadHeight = ref();
69 99 const swiperImageList = ref([{
70 100 image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
71 101 }, {
... ... @@ -74,17 +104,9 @@ const swiperImageList = ref([{
74 104 image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
75 105 }])
76 106  
77   -/**
78   - * 跳转地址
79   - */
80   -function handleAddressInfo() {
81   - uni.$u.route({
82   - url: `pages/home/address/index`,
83   - })
84   -}
85   -const handleSearchClick = () => {
86   - console.log("search");
87   -}
  107 +
  108 +
  109 +// 信息指南
88 110 const infoBoxList = ref([{
89 111 icon: 'iconfont icon-wenjianziliao',
90 112 text: '用户指南'
... ... @@ -98,26 +120,147 @@ const infoBoxList = ref([{
98 120 icon: 'iconfont icon-zhengce',
99 121 text: '政策法规'
100 122 },])
  123 +
  124 +//公司列表
  125 +const companyList = ref([
  126 + {
  127 + companyId: '1',
  128 + score: 4,
  129 + image: 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png',
  130 + companyName: '宁波垃圾回收公司',
  131 + startPrice: '500',
  132 + cleanNumber: '1996',
  133 + remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
  134 + tel: '18980249130',
  135 + }
  136 + // , {
  137 + // companyId: '2',
  138 + // score: 4,
  139 + // image: 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png',
  140 + // companyName: '宁波垃圾回收公司',
  141 + // startPrice: '500',
  142 + // cleanNumber: '1996',
  143 + // remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
  144 + // tel: '18980249130',
  145 + // },
  146 + // {
  147 + // companyId: '3',
  148 + // score: 4,
  149 + // image: 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png',
  150 + // companyName: '宁波垃圾回收公司',
  151 + // startPrice: '500',
  152 + // cleanNumber: '1996',
  153 + // remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
  154 + // tel: '18980249130',
  155 + // },
  156 + // {
  157 + // companyId: '1',
  158 + // score: 4,
  159 + // image: 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png',
  160 + // companyName: '宁波垃圾回收公司',
  161 + // startPrice: '500',
  162 + // cleanNumber: '1996',
  163 + // remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
  164 + // tel: '18980249130',
  165 + // }
  166 +])
  167 +
  168 +
  169 +/**
  170 + * 拨打电话回调
  171 + */
  172 +const handleContactClick = (val) => {
  173 + console.log("拨打电话");
  174 + uni.makePhoneCall({ phoneNumber: val }).then(res => {
  175 + console.log(res);
  176 + }).catch(err => { });
  177 +}
  178 +
  179 +/**
  180 + * 跳转地址
  181 + */
  182 +function handleAddressInfo() {
  183 + uni.$u.route({
  184 + url: `pages/home/address/index`,
  185 + })
  186 +}
  187 +
  188 +/**
  189 + * 公司详情
  190 + */
  191 +function handleDetailClick(companyId, tel) {
  192 + uni.$u.route({
  193 + url: `pages/home/clean/company-detail/index?companyId=${companyId}&tel=${tel}`,
  194 + })
  195 +}
  196 +
  197 +/**
  198 + * 清运跳转
  199 + */
  200 +const handleCleanGarbage = (companyId) => {
  201 + console.log("垃圾清运");
  202 + uni.$u.route({
  203 + url: `pages/home/clean/index?companyId=${companyId}`,
  204 + })
  205 +}
  206 +
  207 +/**
  208 + * 搜索
  209 + */
  210 +const handleSearchClick = () => {
  211 + console.log("search");
  212 +}
  213 +
  214 +/**
  215 + * 计算胶囊高度
  216 + */
  217 +onLoad(() => {
  218 + console.log("计算胶囊高度");
  219 + try {
  220 + if (topMargin.value) {
  221 + console.log("计算完毕");
  222 + }
  223 + const { height, top } = uni.getMenuButtonBoundingClientRect();
  224 + topMargin.value = top + "px";
  225 + // 获取胶囊按钮信息（width、height、top等）
  226 + lightHeight.value = height + 'px'
  227 + console.log("计算完毕");
  228 + } catch (error) {
  229 + topMargin.value = "60rpx";
  230 + musicheadHeight.value = "40rpx"
  231 + console.log("There is no menu because the current app is not a small program");
  232 + }
  233 + // 初始化评分
  234 + initData()
  235 +})
  236 +
  237 +const initData = () => {
  238 + for (let index = 0; index < maxScore; index++) {
  239 + maxStar.value.push(index);
  240 + }
  241 +}
101 242 </script>
102 243  
103 244 <style lang="scss" scoped>
104 245 .home-container {
105   - position: fixed;
106   - top: 0;
107   - bottom: 0;
108   - left: 0;
109   - right: 0;
110   - background: linear-gradient(to bottom, $u-info-light, white);
  246 + // position: fixed;
  247 + // top: 0;
  248 + // bottom: 0;
  249 + // left: 0;
  250 + // right: 0;
  251 + background: linear-gradient(to bottom, $u-info-light, $u-info-light);
111 252 box-sizing: border-box;
112   - padding: 15rpx;
  253 + display: flex;
  254 + flex-direction: column;
  255 + font-family: '黑体', '圆体';
113 256 // position: relative;
114   - // width: 750rpx;
115   - // height: 100%;
  257 + width: 100%;
  258 + height: 100%;
116 259  
117 260  
118 261 .top-swiper-image-scroll {
119   - width: 750rpx;
120   - height: 300rpx;
  262 + width: 100%;
  263 + height: 400rpx;
121 264 box-sizing: border-box;
122 265 z-index: 100;
123 266 position: absolute;
... ... @@ -125,27 +268,24 @@ const infoBoxList = ref([{
125 268 left: 0;
126 269  
127 270 ::v-deep .u-swiper {
128   - height: 300rpx !important;
  271 + height: 400rpx !important;
129 272  
130 273 .u-swiper__wrapper {
131   - height: 300rpx !important;
  274 + height: 400rpx !important;
132 275 }
133 276  
134 277 .u-swiper__wrapper__item__wrapper__image {
135   - height: 300rpx !important;
  278 + height: 400rpx !important;
136 279 }
137 280 }
138 281  
139 282 .top-address {
140 283 position: absolute;
141   - top: 25rpx;
142   - left: 25rpx;
143 284 width: 525rpx;
144 285 display: flex;
145 286 align-items: center;
146   -
147 287 color: white;
148   - font-size: 25rpx;
  288 + font-size: 30rpx;
149 289 font-family: '圆体', '黑体';
150 290 box-sizing: border-box;
151 291  
... ... @@ -167,12 +307,15 @@ const infoBoxList = ref([{
167 307 }
168 308  
169 309 .company-box {
170   - position: relative;
  310 + // position: relative;
171 311 width: 100%;
172 312 z-index: 200;
173 313 box-sizing: border-box;
174   - padding: 15rpx;
175   - top: 250rpx;
  314 + padding: 30rpx;
  315 + margin-top: 330rpx;
  316 + flex: 1;
  317 + display: flex;
  318 + flex-direction: column;
176 319  
177 320 .info-box {
178 321 background-color: #ffffff;
... ... @@ -183,6 +326,7 @@ const infoBoxList = ref([{
183 326 padding: 40rpx;
184 327 align-items: center;
185 328 font-size: 25rpx;
  329 + color: $u-main-color;
186 330  
187 331 .info-box-item {
188 332 flex: 1;
... ... @@ -194,10 +338,11 @@ const infoBoxList = ref([{
194 338 display: flex;
195 339 justify-content: center;
196 340 align-items: center;
  341 + margin-bottom: 10rpx;
  342 + box-sizing: border-box;
197 343 }
198 344  
199 345 .info-box-item-text {
200   - // font-size: small;
201 346 font-weight: small;
202 347 display: flex;
203 348 align-items: center;
... ... @@ -210,6 +355,9 @@ const infoBoxList = ref([{
210 355 margin-top: 20rpx;
211 356 width: 100%;
212 357 box-sizing: border-box;
  358 + flex: 1;
  359 + display: flex;
  360 + flex-direction: column;
213 361  
214 362 .company-label-info {
215 363 line-height: 60rpx;
... ... @@ -226,7 +374,9 @@ const infoBoxList = ref([{
226 374 padding: 30rpx;
227 375 box-sizing: border-box;
228 376 border-radius: 15rpx;
229   - overflow-y: auto;
  377 + flex: 1;
  378 + display: flex;
  379 + flex-direction: column;
230 380  
231 381 .company-list-header {
232 382 display: flex;
... ... @@ -245,19 +395,115 @@ const infoBoxList = ref([{
245 395 }
246 396  
247 397 .company-list-content {
248   - .company-list-item {
249   - .company-list-item-main {
250   - .company-list-item-main-left {}
251   -
252   - .company-list-item-main-right {}
253   - }
254   -
255   - .company-list-item-bottom {
256   - .company-list-item-bottom-contact-company {}
257   -
258   - .company-list-item-bottom-button-clean {}
  398 + flex: 1;
  399 + box-sizing: border-box;
  400 + margin-top: 20rpx;
  401 + flex-shrink: 0;
  402 + height: 0;
  403 + margin-bottom: 20rpx;
  404 + width: 100%;
  405 +
  406 + .company-list-content-box {
  407 + height: 99%;
  408 + width: 100%;
  409 + box-sizing: border-box;
  410 + overflow: scroll;
  411 +
  412 + .company-list-item {
  413 + width: 100%;
  414 + margin-bottom: 20rpx;
  415 +
  416 + .company-list-item-main {
  417 + display: flex;
  418 + box-sizing: border-box;
  419 +
  420 + .company-list-item-main-left {
  421 + margin-right: 20rpx;
  422 +
  423 + .company-list-item-main-left-img {
  424 + width: 200rpx;
  425 + height: 200rpx;
  426 + border-radius: 20rpx;
  427 + }
  428 + }
  429 +
  430 + .company-list-item-main-right {
  431 + display: flex;
  432 + flex-direction: column;
  433 + flex-wrap: wrap;
  434 + color: $u-info;
  435 + line-height: 50rpx;
  436 + font-size: 25rpx;
  437 +
  438 + .company-list-item-main-right-name {
  439 + font-weight: bold;
  440 + color: black;
  441 + font-size: 35rpx;
  442 + }
  443 +
  444 + .company-list-item-main-right-score {
  445 + display: flex;
  446 + font-size: small;
  447 +
  448 + .company-list-item-main-right-text {
  449 + text-align: center;
  450 + margin-right: 10rpx;
  451 + box-sizing: border-box;
  452 + }
  453 +
  454 + .company-list-item-main-right-score-start {
  455 + display: flex;
  456 + align-items: center;
  457 + margin-right: 10rpx;
  458 + box-sizing: border-box;
  459 + }
  460 + }
  461 +
  462 + .company-list-item-main-right-price-number {
  463 + display: flex;
  464 + justify-content: space-around;
  465 + align-items: center;
  466 +
  467 + .company-list-item-main-right-price {
  468 + color: red;
  469 + }
  470 +
  471 + .company-list-item-main-right-number {
  472 + font-size: small;
  473 +
  474 + .company-list-item-main-right-number-text {
  475 + color: $u-main-color;
  476 + }
  477 + }
  478 + }
  479 +
  480 + .company-list-item-main-right-remark {
  481 + font-size: 25rpx;
  482 + line-height: 40rpx;
  483 + }
  484 + }
  485 + }
  486 +
  487 + .company-list-item-bottom {
  488 + display: flex;
  489 + justify-content: space-around;
  490 + margin-top: 20rpx;
  491 +
  492 + .company-list-item-bottom-contact-company {
  493 + flex: 1;
  494 + margin-right: 10rpx;
  495 + box-sizing: border-box;
  496 + }
  497 +
  498 + .company-list-item-bottom-button-clean {
  499 + flex: 1;
  500 + margin-left: 10rpx;
  501 + box-sizing: border-box;
  502 + }
  503 + }
259 504 }
260 505 }
  506 +
261 507 }
262 508 }
263 509 }
... ...
garbage-removal/src/uview-plus/components/u-button/u-button.vue
  View file @6dcb91e
1 1 <template>
2 2 <!-- #ifndef APP-NVUE -->
3   - <button
4   - :hover-start-time="Number(hoverStartTime)"
5   - :hover-stay-time="Number(hoverStayTime)"
6   - :form-type="formType"
7   - :open-type="openType"
8   - :app-parameter="appParameter"
9   - :hover-stop-propagation="hoverStopPropagation"
10   - :send-message-title="sendMessageTitle"
11   - :send-message-path="sendMessagePath"
12   - :lang="lang"
13   - :data-name="dataName"
14   - :session-from="sessionFrom"
15   - :send-message-img="sendMessageImg"
16   - :show-message-card="showMessageCard"
17   - @getphonenumber="getphonenumber"
18   - @getuserinfo="getuserinfo"
19   - @error="error"
20   - @opensetting="opensetting"
21   - @launchapp="launchapp"
22   - :hover-class="!disabled && !loading ? 'u-button--active' : ''"
23   - class="u-button u-reset-button"
24   - :style="[baseColor, $u.addStyle(customStyle)]"
25   - @tap="clickHandler"
26   - :class="bemClass"
27   - >
  3 + <button :hover-start-time="Number(hoverStartTime)" :hover-stay-time="Number(hoverStayTime)" :form-type="formType"
  4 + :open-type="openType" :app-parameter="appParameter" :hover-stop-propagation="hoverStopPropagation"
  5 + :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath" :lang="lang" :data-name="dataName"
  6 + :session-from="sessionFrom" :send-message-img="sendMessageImg" :show-message-card="showMessageCard"
  7 + @getphonenumber="getphonenumber" @getuserinfo="getuserinfo" @error="error" @opensetting="opensetting"
  8 + @launchapp="launchapp" :hover-class="!disabled && !loading ? 'u-button--active' : ''"
  9 + class="u-button u-reset-button" :style="[baseColor, $u.addStyle(customStyle)]" @tap="clickHandler"
  10 + :class="bemClass">
28 11 <template v-if="loading">
29   - <u-loading-icon
30   - :mode="loadingMode"
31   - :size="loadingSize * 1.15"
32   - :color="loadingColor"
33   - ></u-loading-icon>
34   - <text
35   - class="u-button__loading-text"
36   - :style="[{ fontSize: textSize + 'px' }]"
37   - >{{ loadingText || text }}</text
38   - >
  12 + <u-loading-icon :mode="loadingMode" :size="loadingSize * 1.15" :color="loadingColor"></u-loading-icon>
  13 + <text class="u-button__loading-text" :style="[{ fontSize: textSize + 'px' }]">{{ loadingText || text }}</text>
39 14 </template>
40 15 <template v-else>
41   - <u-icon
42   - v-if="icon"
43   - :name="icon"
44   - :color="iconColorCom"
45   - :size="textSize * 1.35"
46   - :customStyle="{ marginRight: '2px' }"
47   - ></u-icon>
  16 + <u-icon v-if="icon" :name="icon" :color="iconColorCom" :size="(textSize * 1.4) + 'px'"
  17 + :customStyle="{ marginRight: '2px' }"></u-icon>
48 18 <slot>
49   - <text
50   - class="u-button__text"
51   - :style="[{ fontSize: textSize + 'px' }]"
52   - >{{ text }}</text
53   - >
  19 + <text class="u-button__text" :style="[{ fontSize: textSize + 'px' }]">{{ text }}</text>
54 20 </slot>
55 21 </template>
56 22 </button>
57 23 <!-- #endif -->
58 24  
59 25 <!-- #ifdef APP-NVUE -->
60   - <view
61   - :hover-start-time="Number(hoverStartTime)"
62   - :hover-stay-time="Number(hoverStayTime)"
63   - class="u-button"
64   - :hover-class="
65   - !disabled && !loading && !color && (plain || type === 'info')
66   - ? 'u-button--active--plain'
67   - : !disabled && !loading && !plain
68   - ? 'u-button--active'
69   - : ''
70   - "
71   - @tap="clickHandler"
72   - :class="bemClass"
73   - :style="[baseColor, $u.addStyle(customStyle)]"
74   - >
  26 + <view :hover-start-time="Number(hoverStartTime)" :hover-stay-time="Number(hoverStayTime)" class="u-button" :hover-class="!disabled && !loading && !color && (plain || type === 'info')
  27 + ? 'u-button--active--plain'
  28 + : !disabled && !loading && !plain
  29 + ? 'u-button--active'
  30 + : ''
  31 + " @tap="clickHandler" :class="bemClass" :style="[baseColor, $u.addStyle(customStyle)]">
75 32 <template v-if="loading">
76   - <u-loading-icon
77   - :mode="loadingMode"
78   - :size="loadingSize * 1.15"
79   - :color="loadingColor"
80   - ></u-loading-icon>
81   - <text
82   - class="u-button__loading-text"
83   - :style="[nvueTextStyle]"
84   - :class="[plain && `u-button__text--plain--${type}`]"
85   - >{{ loadingText || text }}</text
86   - >
  33 + <u-loading-icon :mode="loadingMode" :size="loadingSize * 1.15" :color="loadingColor"></u-loading-icon>
  34 + <text class="u-button__loading-text" :style="[nvueTextStyle]"
  35 + :class="[plain && `u-button__text--plain--${type}`]">{{ loadingText || text }}</text>
87 36 </template>
88 37 <template v-else>
89   - <u-icon
90   - v-if="icon"
91   - :name="icon"
92   - :color="iconColorCom"
93   - :size="textSize * 1.35"
94   - ></u-icon>
95   - <text
96   - class="u-button__text"
97   - :style="[
98   - {
99   - marginLeft: icon ? '2px' : 0,
100   - },
101   - nvueTextStyle,
102   - ]"
103   - :class="[plain && `u-button__text--plain--${type}`]"
104   - >{{ text }}</text
105   - >
  38 + <u-icon v-if="icon" :name="icon" :color="iconColorCom" :size="textSize * 1.35"></u-icon>
  39 + <text class="u-button__text" :style="[
  40 + {
  41 + marginLeft: icon ? '2px' : 0,
  42 + },
  43 + nvueTextStyle,
  44 + ]" :class="[plain && `u-button__text--plain--${type}`]">{{ text }}</text>
106 45 </template>
107 46 </view>
108 47 <!-- #endif -->
... ... @@ -110,9 +49,9 @@
110 49  
111 50 <script>
112 51 import button from "../../libs/mixin/button.js";
113   -import openType from "../../libs/mixin/openType.js";
114   -import mpMixin from '../../libs/mixin/mpMixin.js';
115 52 import mixin from '../../libs/mixin/mixin.js';
  53 +import mpMixin from '../../libs/mixin/mpMixin.js';
  54 +import openType from "../../libs/mixin/openType.js";
116 55 import props from "./props.js";
117 56 /**
118 57 * button 按钮
... ... @@ -202,8 +141,8 @@ export default {
202 141 iconColorCom() {
203 142 // 如果是镂空状态，设置了color就用color值，否则使用主题颜色，
204 143 // u-icon的color能接受一个主题颜色的值
205   - if (this.iconColor) return this.iconColor;
206   - if (this.plain) {
  144 + if (this.iconColor) return this.iconColor;
  145 + if (this.plain) {
207 146 return this.color ? this.color : this.type;
208 147 } else {
209 148 return this.type === "info" ? "#000000" : "#ffffff";
... ... @@ -262,16 +201,16 @@ export default {
262 201 return fontSize;
263 202 },
264 203 },
265   - emits: ['click', 'getphonenumber', 'getuserinfo',
266   - 'error', 'opensetting', 'launchapp'],
  204 + emits: ['click', 'getphonenumber', 'getuserinfo',
  205 + 'error', 'opensetting', 'launchapp'],
267 206 methods: {
268 207 clickHandler() {
269 208 // 非禁止并且非加载中，才能点击
270 209 if (!this.disabled && !this.loading) {
271   - // 进行节流控制，每this.throttle毫秒内，只在开始处执行
272   - uni.$u.throttle(() => {
273   - this.$emit("click");
274   - }, this.throttleTime);
  210 + // 进行节流控制，每this.throttle毫秒内，只在开始处执行
  211 + uni.$u.throttle(() => {
  212 + this.$emit("click");
  213 + }, this.throttleTime);
275 214 }
276 215 },
277 216 // 下面为对接uniapp官方按钮开放能力事件回调的对接
... ...
garbage-removal/src/uview-plus/components/u-form-item/u-form-item.vue
  View file @6dcb91e
... ... @@ -79,7 +79,7 @@ export default {
79 79 // 提示文本的样式
80 80 labelStyle: {},
81 81 // 提示文本的宽度
82   - labelWidth: 120,
  82 + labelWidth: 140,
83 83 // 错误提示方式
84 84 errorType: 'message'
85 85 }
... ...
garbage-removal/src/uview-plus/libs/config/props/form.js
  View file @6dcb91e
... ... @@ -15,7 +15,7 @@ export default {
15 15 errorType: 'message',
16 16 borderBottom: true,
17 17 labelPosition: 'left',
18   - labelWidth: 45,
  18 + labelWidth: 140,
19 19 labelAlign: 'left',
20 20 labelStyle: () => ({})
21 21 }
... ...