Commit e57bfc44deefb01e68a22368e714ef367d6ba80c
1 parent
ee10e78b
车辆信息优化
Showing
11 changed files
with
1079 additions
and
113 deletions
garbage-removal/src/apis/carinfo.js
| @@ -4,7 +4,7 @@ import { request } from "@/utils/request"; | @@ -4,7 +4,7 @@ import { request } from "@/utils/request"; | ||
| 4 | */ | 4 | */ |
| 5 | export async function queryCarList(params) { | 5 | export async function queryCarList(params) { |
| 6 | return await request.get( | 6 | return await request.get( |
| 7 | - `/unit/carInfo/list`, | 7 | + `/unit/carInfo/list/group/by/carType`, |
| 8 | {params:params} | 8 | {params:params} |
| 9 | ); | 9 | ); |
| 10 | } | 10 | } |
garbage-removal/src/pages/home-info/clean/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <view class="mask-box"> | ||
| 3 | - <address-popup ref="addressPopupRef" @currentChange="currentChange"></address-popup> | ||
| 4 | - <liu-delivery-time :isMask="true" :change="changeTime" ref="chooseTime" title="请选择预约时间"> | ||
| 5 | - </liu-delivery-time> | ||
| 6 | - </view> | ||
| 7 | - <view class="company-clean-container"> | ||
| 8 | - <view class="company-clean-container-box"> | ||
| 9 | - <view class="company-clean-container-header"> | ||
| 10 | - <view class="company-clean-container-header-address"> | ||
| 11 | - {{ userAddress.garUserAddress }}{{ userAddress.garRemark }} | ||
| 12 | - </view> | ||
| 13 | - <view class="company-clean-container-header-base-info"> | ||
| 14 | - <view class="company-clean-container-header-base-info-left"> | ||
| 15 | - {{ userAddress.garUserContactName }} {{ userAddress.garUserContactTel }} | 2 | + <view id="ccccccccccccc"> |
| 3 | + <scroll-view :scroll-top="scrollTop" scroll-y="true"> | ||
| 4 | + <view class="mask-box"> | ||
| 5 | + <address-popup ref="addressPopupRef" @currentChange="currentChange"></address-popup> | ||
| 6 | + <liu-delivery-time :isMask="true" :change="changeTime" ref="chooseTime" title="请选择预约时间"> | ||
| 7 | + </liu-delivery-time> | ||
| 8 | + </view> | ||
| 9 | + <view class="company-clean-container"> | ||
| 10 | + | ||
| 11 | + <view class="company-clean-container-box"> | ||
| 12 | + <view class="company-clean-container-header"> | ||
| 13 | + <view class="company-clean-container-header-address"> | ||
| 14 | + {{ userAddress.garUserAddress }}{{ userAddress.garRemark }} | ||
| 16 | </view> | 15 | </view> |
| 17 | - <view class="company-clean-container-header-base-info-right"> | ||
| 18 | - <view class="company-clean-container-header-base-info-right-icon"> | ||
| 19 | - <image width="35" height="35" :src="changeAddressUrl" @click="handlerChooseAddress"></image> | 16 | + <view class="company-clean-container-header-base-info"> |
| 17 | + <view class="company-clean-container-header-base-info-left"> | ||
| 18 | + {{ userAddress.garUserContactName }} {{ userAddress.garUserContactTel }} | ||
| 19 | + </view> | ||
| 20 | + <view class="company-clean-container-header-base-info-right"> | ||
| 21 | + <view class="company-clean-container-header-base-info-right-icon"> | ||
| 22 | + <image width="35" height="35" :src="changeAddressUrl" @click="handlerChooseAddress"></image> | ||
| 23 | + </view> | ||
| 20 | </view> | 24 | </view> |
| 21 | </view> | 25 | </view> |
| 22 | - </view> | ||
| 23 | - <view @click.stop="handleTimeChoose" class="company-clean-container-header-reservation"> | ||
| 24 | - <view class="company-clean-container-header-reservation-left"> | ||
| 25 | - <text style="color: red;">*</text> <u-icon name="calendar" size="40"></u-icon>预约时间 | ||
| 26 | - </view> | ||
| 27 | - <view class="company-clean-container-header-reservation-right"> | ||
| 28 | - <text style="margin-right: 10rpx;">{{ dayTime ? dayTime : "请选择时间" }}</text> <u-icon name="arrow-right" | ||
| 29 | - size="25"></u-icon> | 26 | + <view @click.stop="handleTimeChoose" class="company-clean-container-header-reservation"> |
| 27 | + <view class="company-clean-container-header-reservation-left"> | ||
| 28 | + <text style="color: red;">*</text> <u-icon name="calendar" size="40"></u-icon>预约时间 | ||
| 29 | + </view> | ||
| 30 | + <view class="company-clean-container-header-reservation-right"> | ||
| 31 | + <text style="margin-right: 10rpx;">{{ dayTime ? dayTime : "请选择时间" }}</text> <u-icon name="arrow-right" | ||
| 32 | + size="25"></u-icon> | ||
| 33 | + </view> | ||
| 30 | </view> | 34 | </view> |
| 31 | </view> | 35 | </view> |
| 32 | - </view> | ||
| 33 | - | ||
| 34 | - <view class="company-clean-container-car-main"> | ||
| 35 | - <view class="company-clean-container-car-main-content"> | ||
| 36 | - <view class="company-clean-container-car-main-content-type"> | ||
| 37 | - <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 38 | - <text style="color: red;">*</text>选择车型: {{carName}} | 36 | + |
| 37 | + <view class="company-clean-container-car-main"> | ||
| 38 | + <view class="company-clean-container-car-main-content"> | ||
| 39 | + <view class="company-clean-container-car-main-content-type"> | ||
| 40 | + <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 41 | + <text style="color: red;">*</text>选择车型: {{carName}} | ||
| 42 | + </view> | ||
| 39 | </view> | 43 | </view> |
| 40 | - </view> | ||
| 41 | 44 | ||
| 42 | - <view> | ||
| 43 | - <swiper :class="swiperClass" @change="onChangeSwiper" indicator-dots circular="true" easing-function="linear" duration="2000"> | ||
| 44 | - <swiper-item v-for="(car,index) in garCarInfoList" :key="index" > | ||
| 45 | - <view><image :src="combinationImagePath(car)" mode ="widthFix"></image></view> | ||
| 46 | - <view><text style="color:#909399;font-size: 14px;">{{car.remark}}</text></view> | ||
| 47 | - </swiper-item> | ||
| 48 | - </swiper> | ||
| 49 | - </view> | ||
| 50 | - | ||
| 51 | - <view class="company-clean-container-car-main-content-type"> | ||
| 52 | - <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 53 | - <text style="color: red;">*</text>车辆容积: | 45 | + <view> |
| 46 | + <swiper :class="swiperClass" @change="onChangeSwiper" indicator-dots circular="true" easing-function="linear" duration="2000"> | ||
| 47 | + <swiper-item v-for="(car,index) in garCarInfoList" :key="index" > | ||
| 48 | + <view><image :src="combinationImagePath(car)" mode ="widthFix"></image></view> | ||
| 49 | + <view><text style="color:#909399;font-size: 14px;">{{car.remark}}</text></view> | ||
| 50 | + </swiper-item> | ||
| 51 | + </swiper> | ||
| 54 | </view> | 52 | </view> |
| 55 | - <view style=" width:100%;display:flex; color:#909399; align-items: center;"> | ||
| 56 | - <text>{{containerVolume}} 方</text> | 53 | + |
| 54 | + <view class="company-clean-container-car-main-content-type"> | ||
| 55 | + <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 56 | + <text style="color: red;">*</text>车辆容积: | ||
| 57 | + </view> | ||
| 58 | + <view style=" width:100%;display:flex; color:#909399; align-items: center;"> | ||
| 59 | + <text>{{containerVolume}} 方</text> | ||
| 60 | + </view> | ||
| 57 | </view> | 61 | </view> |
| 58 | - </view> | ||
| 59 | 62 | ||
| 60 | - <view class="company-clean-container-car-main-content-type"> | ||
| 61 | - <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 62 | - <text style="color: red;">*</text>添加车辆数量: | ||
| 63 | - </view> | ||
| 64 | - <view style=" width:100%;display:flex; color:#909399; align-items: center;"> | ||
| 65 | - <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100" :disabledInput="true" v-model="carNumber[swiperIndex]" @change="numberBoxChange"></u-number-box> | 63 | + <view class="company-clean-container-car-main-content-type"> |
| 64 | + <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 65 | + <text style="color: red;">*</text>添加车辆数量: | ||
| 66 | + </view> | ||
| 67 | + <view style=" width:100%;display:flex; color:#909399; align-items: center;"> | ||
| 68 | + <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100" :disabledInput="true" v-model="carNumber[swiperIndex]" @change="numberBoxChange"></u-number-box> | ||
| 69 | + </view> | ||
| 66 | </view> | 70 | </view> |
| 67 | - </view> | ||
| 68 | - | ||
| 69 | - <view class="company-clean-container-car-main-content-type"> | ||
| 70 | - <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 71 | - <text style="color: red;">*</text>垃圾类型: | 71 | + |
| 72 | + <view class="company-clean-container-car-main-content-type" > | ||
| 73 | + <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 74 | + <text style="color: red;">*</text>预估费用: | ||
| 75 | + </view> | ||
| 76 | + <view style=" width:100%;display:flex; color:#909399; align-items: center;"> | ||
| 77 | + <u-number-box :min="0" :max="999999" integer buttonSize="46" :inputWidth="100" :adjust-position="false" :cursor-spacing="0" v-model="paramFrom.garEstimatedCost"></u-number-box> | ||
| 78 | + </view> | ||
| 72 | </view> | 79 | </view> |
| 73 | - <view style=" width:100%;display:flex; color:#909399; align-items: center;"> | ||
| 74 | - <myPiker :parentValue="paramFrom.garbageType" :title="'垃圾类型'" @change="handlePickerGarbageTypeConfirm" | ||
| 75 | - :array="garbageTypeList"> | ||
| 76 | - </myPiker> | 80 | + |
| 81 | + <view class="company-clean-container-car-main-content-type"> | ||
| 82 | + <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 83 | + <text style="color: red;">*</text>垃圾类型: | ||
| 84 | + </view> | ||
| 85 | + <view style=" width:100%;display:flex; color:#909399; align-items: center;"> | ||
| 86 | + <myPiker :parentValue="paramFrom.garbageType" :title="'垃圾类型'" @change="handlePickerGarbageTypeConfirm" | ||
| 87 | + :array="garbageTypeList"> | ||
| 88 | + </myPiker> | ||
| 89 | + </view> | ||
| 77 | </view> | 90 | </view> |
| 78 | - </view> | ||
| 79 | - <view class="company-clean-container-car-main-content-type"> | ||
| 80 | - <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 81 | - <text style="color: red;">*</text>进入地下车库: | 91 | + |
| 92 | + | ||
| 93 | + <view class="company-clean-container-car-main-content-type"> | ||
| 94 | + <view class="company-clean-container-car-main-content-type-price-area"> | ||
| 95 | + <text style="color: red;">*</text>进入地下车库: | ||
| 96 | + </view> | ||
| 97 | + <view style="width:100%;display: flex;justify-content: flex-start;align-items: center; "> | ||
| 98 | + <view style="display: flex; align-items: center;"> | ||
| 99 | + <up-radio-group shape="square" size="34" v-model="paramFrom.garInCarStore" placement="row" | ||
| 100 | + @change="handleInCarClick"> | ||
| 101 | + <up-radio activeColor="#19a97c" labelSize="32" iconSize="30" :customStyle="{ marginRight: '30rpx' }" label="需要" | ||
| 102 | + :name="true"> | ||
| 103 | + </up-radio> | ||
| 104 | + <up-radio activeColor="#19a97c" labelSize="32" iconSize="30" :customStyle="{ marginRight: '30rp' }" label="不需要" | ||
| 105 | + :name="false"> | ||
| 106 | + </up-radio> | ||
| 107 | + </up-radio-group> | ||
| 108 | + </view> | ||
| 109 | + </view> | ||
| 82 | </view> | 110 | </view> |
| 83 | - <view style="width:100%;display: flex;justify-content: flex-start;align-items: center; "> | ||
| 84 | - <view style="display: flex; align-items: center;"> | ||
| 85 | - <up-radio-group shape="square" size="34" v-model="paramFrom.garInCarStore" placement="row" | ||
| 86 | - @change="handleInCarClick"> | ||
| 87 | - <up-radio activeColor="#19a97c" labelSize="32" iconSize="30" :customStyle="{ marginRight: '30rpx' }" label="需要" | ||
| 88 | - :name="true"> | ||
| 89 | - </up-radio> | ||
| 90 | - <up-radio activeColor="#19a97c" labelSize="32" iconSize="30" :customStyle="{ marginRight: '30rp' }" label="不需要" | ||
| 91 | - :name="false"> | ||
| 92 | - </up-radio> | ||
| 93 | - </up-radio-group> | 111 | + <view v-if="paramFrom.garInCarStore" class="company-in-car-store-box-info"> |
| 112 | + <view class="company-clean-container-site-image-info-input-remark-box"> | ||
| 113 | + <u--textarea v-model="paramFrom.remark" placeholder="请填写限制高度(米)"></u--textarea> | ||
| 94 | </view> | 114 | </view> |
| 115 | + <!-- <view class="company-clean-container-car-main-content-remark" style="margin-top: 20rpx; font-size: 23rpx;"> | ||
| 116 | + 提示:需要进入车库需要写车辆限高,部门车库限高2.3m,如果装修垃圾在车库,要考虑车辆是否能进入。 | ||
| 117 | + </view> --> | ||
| 95 | </view> | 118 | </view> |
| 96 | - </view> | ||
| 97 | - <view v-if="paramFrom.garInCarStore" class="company-in-car-store-box-info"> | ||
| 98 | - <view class="company-clean-container-site-image-info-input-remark-box"> | ||
| 99 | - <u--textarea v-model="paramFrom.remark" placeholder="请填写限制高度(米)"></u--textarea> | 119 | + <view class="company-clean-container-car-main-content-prompt"> |
| 120 | + 温馨提示:垃圾类型不符合,企业有权拒绝清运。 | ||
| 100 | </view> | 121 | </view> |
| 101 | - <!-- <view class="company-clean-container-car-main-content-remark" style="margin-top: 20rpx; font-size: 23rpx;"> | ||
| 102 | - 提示:需要进入车库需要写车辆限高,部门车库限高2.3m,如果装修垃圾在车库,要考虑车辆是否能进入。 | ||
| 103 | - </view> --> | ||
| 104 | </view> | 122 | </view> |
| 105 | - <view class="company-clean-container-car-main-content-prompt"> | ||
| 106 | - 温馨提示:垃圾类型不符合,企业有权拒绝清运。 | ||
| 107 | - </view> | ||
| 108 | - </view> | ||
| 109 | - </view> | ||
| 110 | - <view class="company-clean-container-site-image-info"> | ||
| 111 | - <view class="company-clean-container-site-image-info-remark"> | ||
| 112 | - <text style="color: red;">*</text>请上传垃圾量照片(至少1张,最多5张),照片须看清全貌。 | ||
| 113 | - </view> | ||
| 114 | - <view class="company-clean-container-site-image-info-img"> | ||
| 115 | - <u-upload width="200" height="150" :fileList="fileList" @afterRead="afterRead" :deletable="deletable" | ||
| 116 | - @delete="deletePic" name="5" multiple :maxCount="5" :previewFullImage="true"></u-upload> | ||
| 117 | </view> | 123 | </view> |
| 118 | - </view> | ||
| 119 | - <view class="company-clean-container-site-image-info-sure-button"> | ||
| 120 | - <view class="company-clean-container-site-image-info-sure-button-radio"> | ||
| 121 | - <view @click="changeAgree"> | ||
| 122 | - <u-checkbox-group v-model="paramFrom.sureReadFlag" placement="row"> | ||
| 123 | - <u-checkbox activeColor="#19a97c" :customStyle="{ marginBottom: '0px', marginTop: '1px' }" size="30" | ||
| 124 | - labelSize="28" shape="square" :key="0" :name="true" :labelDisabled="true" iconSize="28" | ||
| 125 | - labelColor="#909399"></u-checkbox> | ||
| 126 | - </u-checkbox-group> | 124 | + <view class="company-clean-container-site-image-info"> |
| 125 | + <view class="company-clean-container-site-image-info-remark"> | ||
| 126 | + <text style="color: red;">*</text>请上传垃圾量照片(至少1张,最多5张),照片须看清全貌。 | ||
| 127 | + </view> | ||
| 128 | + <view class="company-clean-container-site-image-info-img"> | ||
| 129 | + <u-upload width="200" height="150" :fileList="fileList" @afterRead="afterRead" :deletable="deletable" | ||
| 130 | + @delete="deletePic" name="5" multiple :maxCount="5" :previewFullImage="true"></u-upload> | ||
| 127 | </view> | 131 | </view> |
| 128 | - <view> | ||
| 129 | - 本人已确认信息真实有效,并承担相应法律责任。 | 132 | + </view> |
| 133 | + <view class="company-clean-container-site-image-info-sure-button"> | ||
| 134 | + <view class="company-clean-container-site-image-info-sure-button-radio"> | ||
| 135 | + <view @click="changeAgree"> | ||
| 136 | + <u-checkbox-group v-model="paramFrom.sureReadFlag" placement="row"> | ||
| 137 | + <u-checkbox activeColor="#19a97c" :customStyle="{ marginBottom: '0px', marginTop: '1px' }" size="30" | ||
| 138 | + labelSize="28" shape="square" :key="0" :name="true" :labelDisabled="true" iconSize="28" | ||
| 139 | + labelColor="#909399"></u-checkbox> | ||
| 140 | + </u-checkbox-group> | ||
| 141 | + </view> | ||
| 142 | + <view> | ||
| 143 | + 本人完全同意<text class="link">《装修垃圾收运意向协议》</text>且已确认信息真实有效,并承担相应法律责任。 | ||
| 144 | + </view> | ||
| 130 | </view> | 145 | </view> |
| 131 | </view> | 146 | </view> |
| 132 | </view> | 147 | </view> |
| 133 | - </view> | 148 | + |
| 134 | <view class="company-clean-bottom" style="z-index: 10074;"> | 149 | <view class="company-clean-bottom" style="z-index: 10074;"> |
| 135 | <view class="company-clean-bottom-box"> | 150 | <view class="company-clean-bottom-box"> |
| 136 | <view class="company-clean-bottom-left"> | 151 | <view class="company-clean-bottom-left"> |
| @@ -149,10 +164,12 @@ | @@ -149,10 +164,12 @@ | ||
| 149 | 164 | ||
| 150 | 165 | ||
| 151 | 166 | ||
| 152 | - <view v-if="!carPopupShowFlag" ref="movableAreaElement"> | 167 | + <view v-if="!carPopupShowFlag" ref="movableAreaElement" > |
| 153 | <uni-fab horizontal="right" vertical="bottom" popMenu="false" @fabClick="handleContactClick(tel)"></uni-fab> | 168 | <uni-fab horizontal="right" vertical="bottom" popMenu="false" @fabClick="handleContactClick(tel)"></uni-fab> |
| 154 | </view> | 169 | </view> |
| 155 | </view> | 170 | </view> |
| 171 | +</scroll-view> | ||
| 172 | +</view> | ||
| 156 | </template> | 173 | </template> |
| 157 | 174 | ||
| 158 | <script setup> | 175 | <script setup> |
| @@ -183,6 +200,7 @@ const garbageTypeShowFlag = ref(false) | @@ -183,6 +200,7 @@ const garbageTypeShowFlag = ref(false) | ||
| 183 | const carPopupShowFlag = ref(false) | 200 | const carPopupShowFlag = ref(false) |
| 184 | const addressPopupRef = ref(null); | 201 | const addressPopupRef = ref(null); |
| 185 | const swiperClass=ref("swiperHeight1") | 202 | const swiperClass=ref("swiperHeight1") |
| 203 | +const pageStyle=ref("") | ||
| 186 | const userAddress = ref({ | 204 | const userAddress = ref({ |
| 187 | garUserContactName: "", | 205 | garUserContactName: "", |
| 188 | garUserContactTel: "", | 206 | garUserContactTel: "", |
| @@ -200,8 +218,9 @@ const garCarLabelInfoNow = ref() | @@ -200,8 +218,9 @@ const garCarLabelInfoNow = ref() | ||
| 200 | const swiperIndex =ref(0) | 218 | const swiperIndex =ref(0) |
| 201 | const containerVolume=ref("") | 219 | const containerVolume=ref("") |
| 202 | const carNumber=ref([]); | 220 | const carNumber=ref([]); |
| 221 | +const scrollTop=ref(0) | ||
| 203 | // 车辆数量 | 222 | // 车辆数量 |
| 204 | -const garCarNumberCount = ref() | 223 | +const garCarNumberCount = ref() |
| 205 | const garbageTypeList = ref(["装修垃圾", "建筑垃圾"]) | 224 | const garbageTypeList = ref(["装修垃圾", "建筑垃圾"]) |
| 206 | const paramFrom = ref({ | 225 | const paramFrom = ref({ |
| 207 | carNumber: 0, | 226 | carNumber: 0, |
| @@ -210,8 +229,10 @@ const paramFrom = ref({ | @@ -210,8 +229,10 @@ const paramFrom = ref({ | ||
| 210 | carType: "", | 229 | carType: "", |
| 211 | garbageType: "装修垃圾", | 230 | garbageType: "装修垃圾", |
| 212 | garInCarStore: false, | 231 | garInCarStore: false, |
| 232 | + garEstimatedCost:"" | ||
| 213 | }) | 233 | }) |
| 214 | const dayTime = ref() | 234 | const dayTime = ref() |
| 235 | +const dayTimeType =ref() | ||
| 215 | 236 | ||
| 216 | const chooseTime = ref() | 237 | const chooseTime = ref() |
| 217 | const fileList = ref([ | 238 | const fileList = ref([ |
| @@ -227,6 +248,19 @@ const handleTimeChoose = () => { | @@ -227,6 +248,19 @@ const handleTimeChoose = () => { | ||
| 227 | 248 | ||
| 228 | const changeTime = (e) => { | 249 | const changeTime = (e) => { |
| 229 | dayTime.value = e.value | 250 | dayTime.value = e.value |
| 251 | + | ||
| 252 | + if(e.startHour=="00:00" || e.startHour=="01:00" || e.startHour=="02:00" || e.startHour=="03:00" ||e.startHour=="04:00" || e.startHour=="05:00" | ||
| 253 | + || e.startHour=="06:00" || e.startHour=="22:00" ||e.startHour=="23:00"){ | ||
| 254 | + dayTimeType.value = "2207"; | ||
| 255 | + | ||
| 256 | + }else{ | ||
| 257 | + dayTimeType.value = ""; | ||
| 258 | + if( swiperClass.value == "swiperHeight3"){ | ||
| 259 | + jumpPrompt("中大型车辆只能选择22:00-07:00时间段") | ||
| 260 | + } | ||
| 261 | + } | ||
| 262 | + | ||
| 263 | + | ||
| 230 | } | 264 | } |
| 231 | const changeAgree = (e) => { | 265 | const changeAgree = (e) => { |
| 232 | // paramFrom.value.sureReadFlag = e | 266 | // paramFrom.value.sureReadFlag = e |
| @@ -246,6 +280,12 @@ const onChangeSwiper=(e)=>{ | @@ -246,6 +280,12 @@ const onChangeSwiper=(e)=>{ | ||
| 246 | swiperClass.value = "swiperHeight2"; | 280 | swiperClass.value = "swiperHeight2"; |
| 247 | }else{ | 281 | }else{ |
| 248 | swiperClass.value = "swiperHeight3"; | 282 | swiperClass.value = "swiperHeight3"; |
| 283 | + | ||
| 284 | + if(dayTimeType.value == '2207'){ | ||
| 285 | + | ||
| 286 | + }else if((dayTime.value != null && dayTime.value != "" && dayTime.value != undefined) && garCarInfoList.value[e.detail.current].containerVolume && parseFloat(garCarInfoList.value[e.detail.current].containerVolume) >= 8){ | ||
| 287 | + jumpPrompt("中大型车辆只能选择22:00-07:00时间段") | ||
| 288 | + } | ||
| 249 | } | 289 | } |
| 250 | 290 | ||
| 251 | 291 | ||
| @@ -386,6 +426,26 @@ const handleOderSure = async () => { | @@ -386,6 +426,26 @@ const handleOderSure = async () => { | ||
| 386 | 426 | ||
| 387 | } | 427 | } |
| 388 | 428 | ||
| 429 | + if(dayTime.value != null && dayTime.value != "" && dayTime.value != undefined){ | ||
| 430 | + if(dayTimeType.value != '2207' ){ | ||
| 431 | + let length = garCarInfos.length; | ||
| 432 | + for (let index = 0; index <length; index++) { | ||
| 433 | + | ||
| 434 | + if(garCarInfos[index].containerVolume && parseFloat(garCarInfos[index].containerVolume) >=8){ | ||
| 435 | + jumpPrompt("中大型车辆只能选择22:00-07:00时间段"); | ||
| 436 | + return; | ||
| 437 | + } | ||
| 438 | + | ||
| 439 | + } | ||
| 440 | + } | ||
| 441 | + } | ||
| 442 | + | ||
| 443 | + if(paramFrom.value.garEstimatedCost<0){ | ||
| 444 | + jumpPrompt("预估费用必须大于0"); | ||
| 445 | + return; | ||
| 446 | + } | ||
| 447 | + | ||
| 448 | + | ||
| 389 | let params = { | 449 | let params = { |
| 390 | /** | 450 | /** |
| 391 | * 订单地址 | 451 | * 订单地址 |
| @@ -443,7 +503,8 @@ const handleOderSure = async () => { | @@ -443,7 +503,8 @@ const handleOderSure = async () => { | ||
| 443 | garLongitude: userAddress.value.garLongitude, | 503 | garLongitude: userAddress.value.garLongitude, |
| 444 | garLatitude: userAddress.value.garLatitude, | 504 | garLatitude: userAddress.value.garLatitude, |
| 445 | garCoordinate: userAddress.value.garCoordinate, | 505 | garCoordinate: userAddress.value.garCoordinate, |
| 446 | - garInCarStore: paramFrom.value.garInCarStore | 506 | + garInCarStore: paramFrom.value.garInCarStore, |
| 507 | + garEstimatedCost:paramFrom.value.garEstimatedCost | ||
| 447 | } | 508 | } |
| 448 | if (!validateParams(params)) { | 509 | if (!validateParams(params)) { |
| 449 | console.log("未通过", params); | 510 | console.log("未通过", params); |
| @@ -566,6 +627,16 @@ const validateImage = (fileList) => { | @@ -566,6 +627,16 @@ const validateImage = (fileList) => { | ||
| 566 | return true; | 627 | return true; |
| 567 | } | 628 | } |
| 568 | 629 | ||
| 630 | +const garEstimatedCostFocusFun=()=>{ | ||
| 631 | + //pageStyle.value="height:2000px"; | ||
| 632 | + scrollTop.value=11900 | ||
| 633 | + console.log(scrollTop.value); | ||
| 634 | + | ||
| 635 | +} | ||
| 636 | + | ||
| 637 | +const garEstimatedCostBlurFun=()=>{ | ||
| 638 | + pageStyle.value=""; | ||
| 639 | +} | ||
| 569 | 640 | ||
| 570 | // 开始执行一次 | 641 | // 开始执行一次 |
| 571 | watch(carPopupShowFlag, (val) => { | 642 | watch(carPopupShowFlag, (val) => { |
| @@ -579,6 +650,7 @@ watch(carPopupShowFlag, (val) => { | @@ -579,6 +650,7 @@ watch(carPopupShowFlag, (val) => { | ||
| 579 | immediate: true | 650 | immediate: true |
| 580 | }) | 651 | }) |
| 581 | 652 | ||
| 653 | + | ||
| 582 | </script> | 654 | </script> |
| 583 | 655 | ||
| 584 | <style lang="scss" scoped> | 656 | <style lang="scss" scoped> |
| @@ -587,6 +659,9 @@ $custom-page-padding: 20rpx; | @@ -587,6 +659,9 @@ $custom-page-padding: 20rpx; | ||
| 587 | $custom-border-radio: 20rpx; | 659 | $custom-border-radio: 20rpx; |
| 588 | $custom-bottom-height: 200rpx; | 660 | $custom-bottom-height: 200rpx; |
| 589 | 661 | ||
| 662 | +.link { | ||
| 663 | + color: blue; | ||
| 664 | + } | ||
| 590 | 665 | ||
| 591 | .swiperHeight1{ | 666 | .swiperHeight1{ |
| 592 | height: 280px; | 667 | height: 280px; |
garbage-removal/src/pages/order-info/order-other/detail/index.vue
| @@ -162,6 +162,14 @@ | @@ -162,6 +162,14 @@ | ||
| 162 | {{ dataGram.garOrderContactName }} | 162 | {{ dataGram.garOrderContactName }} |
| 163 | </view> | 163 | </view> |
| 164 | </view> | 164 | </view> |
| 165 | + | ||
| 166 | + <view class="order-detail-container-header-item"> | ||
| 167 | + <text class="order-detail-container-header-title">预估费用:</text> | ||
| 168 | + <view class="order-detail-container-header-content"> | ||
| 169 | + {{ dataGram.garEstimatedCost }} | ||
| 170 | + </view> | ||
| 171 | + </view> | ||
| 172 | + | ||
| 165 | <view class="order-detail-container-header-item"> | 173 | <view class="order-detail-container-header-item"> |
| 166 | <text class="order-detail-container-header-title">备注:</text> | 174 | <text class="order-detail-container-header-title">备注:</text> |
| 167 | <view class="order-detail-container-header-content"> | 175 | <view class="order-detail-container-header-content"> |
| @@ -625,6 +633,35 @@ const submitUpdateCarInfo = () => { | @@ -625,6 +633,35 @@ const submitUpdateCarInfo = () => { | ||
| 625 | garCarInfoList: garCarInfos, | 633 | garCarInfoList: garCarInfos, |
| 626 | updated: true | 634 | updated: true |
| 627 | } | 635 | } |
| 636 | + if(dataGram.value.garOrderAgreementTime){ | ||
| 637 | + let index = dataGram.value.garOrderAgreementTime.indexOf(' ')+1; | ||
| 638 | + if(index > 0){ | ||
| 639 | + let val = dataGram.value.garOrderAgreementTime.substring(index,dataGram.value.garOrderAgreementTime.length); | ||
| 640 | + | ||
| 641 | + | ||
| 642 | + if(val == "07:00-08:00" || val == "08:00-09:00"|| val == "09:00-10:00" || val == "10:00-11:00" || val == "11:00-12:00"|| val == "12:00-13:00" || val == "13:00-14:00" | ||
| 643 | + || val == "14:00-15:00" || val == "15:00-16:00"|| val == "16:00-17:00"|| val == "17:00-18:00" || val == "18:00-19:00"|| val == "19:00-20:00"|| val == "20:00-21:00" | ||
| 644 | + || val == "21:00-22:00"){ | ||
| 645 | + let size = garCarInfos.length; | ||
| 646 | + for (let index = 0; index < size; index++) { | ||
| 647 | + if((garCarInfos[index].containerVolume=="8" || parseInt(garCarInfos[index].containerVolume) >=8) && garCarInfos[index].garOrderCarNumber > 0){ | ||
| 648 | + console.log(garCarInfos[index]); | ||
| 649 | + | ||
| 650 | + jumpPrompt("中大型车辆只能选择22:00-07:00时间段"); | ||
| 651 | + return; | ||
| 652 | + } | ||
| 653 | + | ||
| 654 | + } | ||
| 655 | + } | ||
| 656 | + | ||
| 657 | + } | ||
| 658 | + | ||
| 659 | + } | ||
| 660 | + console.log(dataGram.value.garOrderAgreementTime ); | ||
| 661 | + console.log(garCarInfos); | ||
| 662 | + console.log("=================================>"); | ||
| 663 | + | ||
| 664 | + | ||
| 628 | updateOrder(data).then(res => { | 665 | updateOrder(data).then(res => { |
| 629 | if (res.data.code == 200) { | 666 | if (res.data.code == 200) { |
| 630 | uni.$u.toast("车辆信息修改成功") | 667 | uni.$u.toast("车辆信息修改成功") |
| @@ -638,6 +675,21 @@ const submitUpdateCarInfo = () => { | @@ -638,6 +675,21 @@ const submitUpdateCarInfo = () => { | ||
| 638 | }) | 675 | }) |
| 639 | } | 676 | } |
| 640 | 677 | ||
| 678 | + | ||
| 679 | + | ||
| 680 | +const jumpPrompt = (msg) => { | ||
| 681 | + uni.showModal({ | ||
| 682 | + title: '提示', | ||
| 683 | + content: msg, | ||
| 684 | + showCancel: false, | ||
| 685 | + success: function (res) { | ||
| 686 | + if (res.confirm) { | ||
| 687 | + } else if (res.cancel) { | ||
| 688 | + } | ||
| 689 | + } | ||
| 690 | + }); | ||
| 691 | +} | ||
| 692 | + | ||
| 641 | /** | 693 | /** |
| 642 | * 初始化信息 | 694 | * 初始化信息 |
| 643 | */ | 695 | */ |
garbage-removal/src/uni_modules/zjy-easyinput/changelog.md
0 → 100644
garbage-removal/src/uni_modules/zjy-easyinput/components/htmlservice/server/data/uni_vue_tag.json.patch
0 → 100644
No preview for this file type
garbage-removal/src/uni_modules/zjy-easyinput/components/package-lock.json.patch
0 → 100644
No preview for this file type
garbage-removal/src/uni_modules/zjy-easyinput/components/styleservice/data/app-uvue-css.json.patch
0 → 100644
No preview for this file type
garbage-removal/src/uni_modules/zjy-easyinput/components/zjy-easyinput/common.js
0 → 100644
| 1 | +/** | ||
| 2 | + * @desc 函数防抖 | ||
| 3 | + * @param func 目标函数 | ||
| 4 | + * @param wait 延迟执行毫秒数 | ||
| 5 | + * @param immediate true - 立即执行, false - 延迟执行 | ||
| 6 | + */ | ||
| 7 | +export const debounce = function(func, wait = 1000, immediate = true) { | ||
| 8 | + let timer; | ||
| 9 | + console.log(1); | ||
| 10 | + return function() { | ||
| 11 | + console.log(123); | ||
| 12 | + let context = this, | ||
| 13 | + args = arguments; | ||
| 14 | + if (timer) clearTimeout(timer); | ||
| 15 | + if (immediate) { | ||
| 16 | + let callNow = !timer; | ||
| 17 | + timer = setTimeout(() => { | ||
| 18 | + timer = null; | ||
| 19 | + }, wait); | ||
| 20 | + if (callNow) func.apply(context, args); | ||
| 21 | + } else { | ||
| 22 | + timer = setTimeout(() => { | ||
| 23 | + func.apply(context, args); | ||
| 24 | + }, wait) | ||
| 25 | + } | ||
| 26 | + } | ||
| 27 | +} | ||
| 28 | +/** | ||
| 29 | + * @desc 函数节流 | ||
| 30 | + * @param func 函数 | ||
| 31 | + * @param wait 延迟执行毫秒数 | ||
| 32 | + * @param type 1 使用表时间戳,在时间段开始的时候触发 2 使用表定时器,在时间段结束的时候触发 | ||
| 33 | + */ | ||
| 34 | +export const throttle = (func, wait = 1000, type = 1) => { | ||
| 35 | + let previous = 0; | ||
| 36 | + let timeout; | ||
| 37 | + return function() { | ||
| 38 | + let context = this; | ||
| 39 | + let args = arguments; | ||
| 40 | + if (type === 1) { | ||
| 41 | + let now = Date.now(); | ||
| 42 | + | ||
| 43 | + if (now - previous > wait) { | ||
| 44 | + func.apply(context, args); | ||
| 45 | + previous = now; | ||
| 46 | + } | ||
| 47 | + } else if (type === 2) { | ||
| 48 | + if (!timeout) { | ||
| 49 | + timeout = setTimeout(() => { | ||
| 50 | + timeout = null; | ||
| 51 | + func.apply(context, args) | ||
| 52 | + }, wait) | ||
| 53 | + } | ||
| 54 | + } | ||
| 55 | + } | ||
| 56 | +} |
garbage-removal/src/uni_modules/zjy-easyinput/components/zjy-easyinput/zjy-easyinput.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="uni-easyinput" :class="{ 'uni-easyinput-error': msg }" :style="boxStyle"> | ||
| 3 | + <view class="uni-easyinput__content" :class="inputContentClass" :style="inputContentStyle"> | ||
| 4 | + <template v-if="buttonInfo&&buttonInfo.position=='left'"> | ||
| 5 | + <button :type="buttonInfo.type?buttonInfo.type:'default'" | ||
| 6 | + class="buttonInfo" | ||
| 7 | + @click="onClickButton">{{buttonInfo.title}}</button> | ||
| 8 | + </template> | ||
| 9 | + <uni-icons v-if="prefixIcon" class="content-clear-icon" :type="prefixIcon" color="#c0c4cc" @click="onClickIcon('prefix')" size="22"></uni-icons> | ||
| 10 | + <textarea | ||
| 11 | + v-if="type === 'textarea'" | ||
| 12 | + class="uni-easyinput__content-textarea" | ||
| 13 | + :class="{ 'input-padding': inputBorder }" | ||
| 14 | + :name="name" | ||
| 15 | + :value="val" | ||
| 16 | + :placeholder="placeholder" | ||
| 17 | + :placeholderStyle="placeholderStyle" | ||
| 18 | + :disabled="disabled" | ||
| 19 | + placeholder-class="uni-easyinput__placeholder-class" | ||
| 20 | + :maxlength="inputMaxlength" | ||
| 21 | + :focus="focused" | ||
| 22 | + :autoHeight="autoHeight" | ||
| 23 | + :cursor-spacing="cursorSpacing" | ||
| 24 | + @input="onInput" | ||
| 25 | + @blur="_Blur" | ||
| 26 | + @focus="_Focus" | ||
| 27 | + @confirm="onConfirm" | ||
| 28 | + @keyboardheightchange="onkeyboardheightchange" | ||
| 29 | + ></textarea> | ||
| 30 | + <input | ||
| 31 | + v-else | ||
| 32 | + :type="type === 'password' ? 'text' : type" | ||
| 33 | + class="uni-easyinput__content-input" | ||
| 34 | + :style="inputStyle" | ||
| 35 | + :name="name" | ||
| 36 | + :value="val" | ||
| 37 | + :password="!showPassword && type === 'password'" | ||
| 38 | + :placeholder="placeholder" | ||
| 39 | + :placeholderStyle="placeholderStyle" | ||
| 40 | + placeholder-class="uni-easyinput__placeholder-class" | ||
| 41 | + :disabled="disabled" | ||
| 42 | + :maxlength="inputMaxlength" | ||
| 43 | + :focus="focused" | ||
| 44 | + :confirmType="confirmType" | ||
| 45 | + :cursor-spacing="cursorSpacing" | ||
| 46 | + @focus="_Focus" | ||
| 47 | + @blur="_Blur" | ||
| 48 | + @input="onInput" | ||
| 49 | + @confirm="onConfirm" | ||
| 50 | + @keyboardheightchange="onkeyboardheightchange" | ||
| 51 | + /> | ||
| 52 | + <template v-if="type === 'password' && passwordIcon"> | ||
| 53 | + <!-- 开启密码时显示小眼睛 --> | ||
| 54 | + <uni-icons | ||
| 55 | + v-if="isVal" | ||
| 56 | + class="content-clear-icon" | ||
| 57 | + :class="{ 'is-textarea-icon': type === 'textarea' }" | ||
| 58 | + :type="showPassword ? 'eye-slash-filled' : 'eye-filled'" | ||
| 59 | + :size="22" | ||
| 60 | + :color="focusShow ? primaryColor : '#c0c4cc'" | ||
| 61 | + @click="onEyes" | ||
| 62 | + ></uni-icons> | ||
| 63 | + </template> | ||
| 64 | + <template v-else-if="suffixIcon"> | ||
| 65 | + <uni-icons v-if="suffixIcon" class="content-clear-icon" :type="suffixIcon" color="#c0c4cc" @click="onClickIcon('suffix')" size="22"></uni-icons> | ||
| 66 | + </template> | ||
| 67 | + <template v-if="buttonInfo&&(buttonInfo.position=='right'||!buttonInfo.position)"> | ||
| 68 | + <button :type="buttonInfo.type?buttonInfo.type:'default'" | ||
| 69 | + class="buttonInfo" | ||
| 70 | + @click="onClickButton">{{buttonInfo.title}}</button> | ||
| 71 | + </template> | ||
| 72 | + <template v-else> | ||
| 73 | + <uni-icons | ||
| 74 | + v-if="clearable && isVal && !disabled && type !== 'textarea'" | ||
| 75 | + class="content-clear-icon" | ||
| 76 | + :class="{ 'is-textarea-icon': type === 'textarea' }" | ||
| 77 | + type="clear" | ||
| 78 | + :size="clearSize" | ||
| 79 | + :color="msg ? '#dd524d' : focusShow ? primaryColor : '#c0c4cc'" | ||
| 80 | + @click="onClear" | ||
| 81 | + ></uni-icons> | ||
| 82 | + </template> | ||
| 83 | + <slot name="right"></slot> | ||
| 84 | + </view> | ||
| 85 | + </view> | ||
| 86 | +</template> | ||
| 87 | + | ||
| 88 | +<script> | ||
| 89 | +/** | ||
| 90 | + * Easyinput 输入框 | ||
| 91 | + * @description 此组件可以实现表单的输入与校验,包括 "text" 和 "textarea" 类型。 | ||
| 92 | + * @tutorial https://ext.dcloud.net.cn/plugin?id=3455 | ||
| 93 | + * @property {String} value 输入内容 | ||
| 94 | + * @property {String } type 输入框的类型(默认text) password/text/textarea/.. | ||
| 95 | + * @value text 文本输入键盘 | ||
| 96 | + * @value textarea 多行文本输入键盘 | ||
| 97 | + * @value password 密码输入键盘 | ||
| 98 | + * @value number 数字输入键盘,注意iOS上app-vue弹出的数字键盘并非9宫格方式 | ||
| 99 | + * @value idcard 身份证输入键盘,信、支付宝、百度、QQ小程序 | ||
| 100 | + * @value digit 带小数点的数字键盘 ,App的nvue页面、微信、支付宝、百度、头条、QQ小程序支持 | ||
| 101 | + * @property {Boolean} clearable 是否显示右侧清空内容的图标控件,点击可清空输入框内容(默认true) | ||
| 102 | + * @property {Boolean} autoHeight 是否自动增高输入区域,type为textarea时有效(默认true) | ||
| 103 | + * @property {String } placeholder 输入框的提示文字 | ||
| 104 | + * @property {String } placeholderStyle placeholder的样式(内联样式,字符串),如"color: #ddd" | ||
| 105 | + * @property {Boolean} focus 是否自动获得焦点(默认false) | ||
| 106 | + * @property {Boolean} disabled 是否禁用(默认false) | ||
| 107 | + * @property {Number } maxlength 最大输入长度,设置为 -1 的时候不限制最大长度(默认140) | ||
| 108 | + * @property {String } confirmType 设置键盘右下角按钮的文字,仅在type="text"时生效(默认done) | ||
| 109 | + * @property {Number } clearSize 清除图标的大小,单位px(默认15) | ||
| 110 | + * @property {String} prefixIcon 输入框头部图标 | ||
| 111 | + * @property {String} suffixIcon 输入框尾部图标 | ||
| 112 | + * @property {String} primaryColor 设置主题色(默认#2979ff) | ||
| 113 | + * @property {Boolean} trim 是否自动去除两端的空格 | ||
| 114 | + * @property {Boolean} cursorSpacing 指定光标与键盘的距离,单位 px | ||
| 115 | + * @value both 去除两端空格 | ||
| 116 | + * @value left 去除左侧空格 | ||
| 117 | + * @value right 去除右侧空格 | ||
| 118 | + * @value start 去除左侧空格 | ||
| 119 | + * @value end 去除右侧空格 | ||
| 120 | + * @value all 去除全部空格 | ||
| 121 | + * @value none 不去除空格 | ||
| 122 | + * @property {Boolean} inputBorder 是否显示input输入框的边框(默认true) | ||
| 123 | + * @property {Boolean} passwordIcon type=password时是否显示小眼睛图标 | ||
| 124 | + * @property {Object} styles 自定义颜色 | ||
| 125 | + * @event {Function} input 输入框内容发生变化时触发 | ||
| 126 | + * @event {Function} focus 输入框获得焦点时触发 | ||
| 127 | + * @event {Function} blur 输入框失去焦点时触发 | ||
| 128 | + * @event {Function} confirm 点击完成按钮时触发 | ||
| 129 | + * @event {Function} iconClick 点击图标时触发 | ||
| 130 | + * @example <uni-easyinput v-model="mobile"></uni-easyinput> | ||
| 131 | + */ | ||
| 132 | +function obj2strClass(obj) { | ||
| 133 | + let classess = ''; | ||
| 134 | + for (let key in obj) { | ||
| 135 | + const val = obj[key]; | ||
| 136 | + if (val) { | ||
| 137 | + classess += `${key} `; | ||
| 138 | + } | ||
| 139 | + } | ||
| 140 | + return classess; | ||
| 141 | +} | ||
| 142 | + | ||
| 143 | +function obj2strStyle(obj) { | ||
| 144 | + let style = ''; | ||
| 145 | + for (let key in obj) { | ||
| 146 | + const val = obj[key]; | ||
| 147 | + style += `${key}:${val};`; | ||
| 148 | + } | ||
| 149 | + return style; | ||
| 150 | +} | ||
| 151 | +export default { | ||
| 152 | + name: 'uni-easyinput', | ||
| 153 | + emits: ['click', 'iconClick', 'update:modelValue', 'input', 'focus', 'blur', 'confirm', 'clear', 'eyes', 'change', 'keyboardheightchange', 'clickButton'], | ||
| 154 | + model: { | ||
| 155 | + prop: 'modelValue', | ||
| 156 | + event: 'update:modelValue' | ||
| 157 | + }, | ||
| 158 | + options: { | ||
| 159 | + virtualHost: true | ||
| 160 | + }, | ||
| 161 | + inject: { | ||
| 162 | + form: { | ||
| 163 | + from: 'uniForm', | ||
| 164 | + default: null | ||
| 165 | + }, | ||
| 166 | + formItem: { | ||
| 167 | + from: 'uniFormItem', | ||
| 168 | + default: null | ||
| 169 | + } | ||
| 170 | + }, | ||
| 171 | + props: { | ||
| 172 | + name: String, | ||
| 173 | + value: [Number, String], | ||
| 174 | + modelValue: [Number, String], | ||
| 175 | + type: { | ||
| 176 | + type: String, | ||
| 177 | + default: 'text' | ||
| 178 | + }, | ||
| 179 | + clearable: { | ||
| 180 | + type: Boolean, | ||
| 181 | + default: true | ||
| 182 | + }, | ||
| 183 | + autoHeight: { | ||
| 184 | + type: Boolean, | ||
| 185 | + default: false | ||
| 186 | + }, | ||
| 187 | + placeholder: { | ||
| 188 | + type: String, | ||
| 189 | + default: ' ' | ||
| 190 | + }, | ||
| 191 | + placeholderStyle: String, | ||
| 192 | + focus: { | ||
| 193 | + type: Boolean, | ||
| 194 | + default: false | ||
| 195 | + }, | ||
| 196 | + disabled: { | ||
| 197 | + type: Boolean, | ||
| 198 | + default: false | ||
| 199 | + }, | ||
| 200 | + maxlength: { | ||
| 201 | + type: [Number, String], | ||
| 202 | + default: 140 | ||
| 203 | + }, | ||
| 204 | + confirmType: { | ||
| 205 | + type: String, | ||
| 206 | + default: 'done' | ||
| 207 | + }, | ||
| 208 | + clearSize: { | ||
| 209 | + type: [Number, String], | ||
| 210 | + default: 24 | ||
| 211 | + }, | ||
| 212 | + inputBorder: { | ||
| 213 | + type: Boolean, | ||
| 214 | + default: true | ||
| 215 | + }, | ||
| 216 | + prefixIcon: { | ||
| 217 | + type: String, | ||
| 218 | + default: '' | ||
| 219 | + }, | ||
| 220 | + suffixIcon: { | ||
| 221 | + type: String, | ||
| 222 | + default: '' | ||
| 223 | + }, | ||
| 224 | + buttonInfo: { | ||
| 225 | + type: [Boolean, Object], | ||
| 226 | + default: false | ||
| 227 | + }, | ||
| 228 | + buttonInfoSize: { | ||
| 229 | + type: String, | ||
| 230 | + default: 'mini' | ||
| 231 | + }, | ||
| 232 | + trim: { | ||
| 233 | + type: [Boolean, String], | ||
| 234 | + default: false | ||
| 235 | + }, | ||
| 236 | + cursorSpacing: { | ||
| 237 | + type: Number, | ||
| 238 | + default: 0 | ||
| 239 | + }, | ||
| 240 | + passwordIcon: { | ||
| 241 | + type: Boolean, | ||
| 242 | + default: true | ||
| 243 | + }, | ||
| 244 | + primaryColor: { | ||
| 245 | + type: String, | ||
| 246 | + default: '#2979ff' | ||
| 247 | + }, | ||
| 248 | + styles: { | ||
| 249 | + type: Object, | ||
| 250 | + default() { | ||
| 251 | + return { | ||
| 252 | + color: '#333', | ||
| 253 | + backgroundColor: '#fff', | ||
| 254 | + disableColor: '#F7F6F6', | ||
| 255 | + borderColor: '#e5e5e5' | ||
| 256 | + }; | ||
| 257 | + } | ||
| 258 | + }, | ||
| 259 | + errorMessage: { | ||
| 260 | + type: [String, Boolean], | ||
| 261 | + default: '' | ||
| 262 | + } | ||
| 263 | + }, | ||
| 264 | + data() { | ||
| 265 | + return { | ||
| 266 | + focused: false, | ||
| 267 | + val: '', | ||
| 268 | + showMsg: '', | ||
| 269 | + border: false, | ||
| 270 | + isFirstBorder: false, | ||
| 271 | + showClearIcon: false, | ||
| 272 | + showPassword: false, | ||
| 273 | + focusShow: false, | ||
| 274 | + localMsg: '', | ||
| 275 | + isEnter: false // 用于判断当前是否是使用回车操作 | ||
| 276 | + }; | ||
| 277 | + }, | ||
| 278 | + computed: { | ||
| 279 | + // 输入框内是否有值 | ||
| 280 | + isVal() { | ||
| 281 | + const val = this.val; | ||
| 282 | + // fixed by mehaotian 处理值为0的情况,字符串0不在处理范围 | ||
| 283 | + if (val || val === 0) { | ||
| 284 | + return true; | ||
| 285 | + } | ||
| 286 | + return false; | ||
| 287 | + }, | ||
| 288 | + | ||
| 289 | + msg() { | ||
| 290 | + // console.log('computed', this.form, this.formItem); | ||
| 291 | + // if (this.form) { | ||
| 292 | + // return this.errorMessage || this.formItem.errMsg; | ||
| 293 | + // } | ||
| 294 | + // TODO 处理头条 formItem 中 errMsg 不更新的问题 | ||
| 295 | + return this.localMsg || this.errorMessage; | ||
| 296 | + }, | ||
| 297 | + // 因为uniapp的input组件的maxlength组件必须要数值,这里转为数值,用户可以传入字符串数值 | ||
| 298 | + inputMaxlength() { | ||
| 299 | + return Number(this.maxlength); | ||
| 300 | + }, | ||
| 301 | + | ||
| 302 | + // 处理外层样式的style | ||
| 303 | + boxStyle() { | ||
| 304 | + return `color:${this.inputBorder && this.msg ? '#e43d33' : this.styles.color};`; | ||
| 305 | + }, | ||
| 306 | + // input 内容的类和样式处理 | ||
| 307 | + inputContentClass() { | ||
| 308 | + return obj2strClass({ | ||
| 309 | + 'is-input-border': this.inputBorder, | ||
| 310 | + 'is-input-error-border': this.inputBorder && this.msg, | ||
| 311 | + 'is-textarea': this.type === 'textarea', | ||
| 312 | + 'is-disabled': this.disabled, | ||
| 313 | + 'is-focused': this.focusShow | ||
| 314 | + }); | ||
| 315 | + }, | ||
| 316 | + inputContentStyle() { | ||
| 317 | + const focusColor = this.focusShow ? this.primaryColor : this.styles.borderColor; | ||
| 318 | + const borderColor = this.inputBorder && this.msg ? '#dd524d' : focusColor; | ||
| 319 | + return obj2strStyle({ | ||
| 320 | + 'border-color': borderColor || '#e5e5e5', | ||
| 321 | + 'background-color': this.disabled ? this.styles.disableColor : this.styles.backgroundColor | ||
| 322 | + }); | ||
| 323 | + }, | ||
| 324 | + // input右侧样式 | ||
| 325 | + inputStyle() { | ||
| 326 | + const paddingRight = this.type === 'password' || this.clearable || this.prefixIcon ? '' : '10px'; | ||
| 327 | + return obj2strStyle({ | ||
| 328 | + 'padding-right': paddingRight, | ||
| 329 | + 'padding-left': this.prefixIcon ? '' : '10px' | ||
| 330 | + }); | ||
| 331 | + } | ||
| 332 | + }, | ||
| 333 | + watch: { | ||
| 334 | + value(newVal) { | ||
| 335 | + this.val = newVal; | ||
| 336 | + }, | ||
| 337 | + modelValue(newVal) { | ||
| 338 | + this.val = newVal; | ||
| 339 | + }, | ||
| 340 | + focus(newVal) { | ||
| 341 | + this.$nextTick(() => { | ||
| 342 | + this.focused = this.focus; | ||
| 343 | + this.focusShow = this.focus; | ||
| 344 | + }); | ||
| 345 | + } | ||
| 346 | + }, | ||
| 347 | + created() { | ||
| 348 | + this.init(); | ||
| 349 | + // TODO 处理头条vue3 computed 不监听 inject 更改的问题(formItem.errMsg) | ||
| 350 | + if (this.form && this.formItem) { | ||
| 351 | + this.$watch('formItem.errMsg', newVal => { | ||
| 352 | + this.localMsg = newVal; | ||
| 353 | + }); | ||
| 354 | + } | ||
| 355 | + }, | ||
| 356 | + mounted() { | ||
| 357 | + this.$nextTick(() => { | ||
| 358 | + this.focused = this.focus; | ||
| 359 | + this.focusShow = this.focus; | ||
| 360 | + }); | ||
| 361 | + }, | ||
| 362 | + methods: { | ||
| 363 | + /** | ||
| 364 | + * 初始化变量值 | ||
| 365 | + */ | ||
| 366 | + init() { | ||
| 367 | + if (this.value || this.value === 0) { | ||
| 368 | + this.val = this.value; | ||
| 369 | + } else if (this.modelValue || this.modelValue === 0 || this.modelValue === '') { | ||
| 370 | + this.val = this.modelValue; | ||
| 371 | + } else { | ||
| 372 | + this.val = null; | ||
| 373 | + } | ||
| 374 | + }, | ||
| 375 | + | ||
| 376 | + /** | ||
| 377 | + * 点击图标时触发 | ||
| 378 | + * @param {Object} type | ||
| 379 | + */ | ||
| 380 | + onClickIcon(type) { | ||
| 381 | + this.$emit('iconClick', type); | ||
| 382 | + }, | ||
| 383 | + | ||
| 384 | + /** | ||
| 385 | + * 点击图标时触发 | ||
| 386 | + * @param {Object} type | ||
| 387 | + */ | ||
| 388 | + onClickButton(type) { | ||
| 389 | + this.$emit('clickButton', type); | ||
| 390 | + }, | ||
| 391 | + | ||
| 392 | + /** | ||
| 393 | + * 显示隐藏内容,密码框时生效 | ||
| 394 | + */ | ||
| 395 | + onEyes() { | ||
| 396 | + this.showPassword = !this.showPassword; | ||
| 397 | + this.$emit('eyes', this.showPassword); | ||
| 398 | + }, | ||
| 399 | + | ||
| 400 | + /** | ||
| 401 | + * 输入时触发 | ||
| 402 | + * @param {Object} event | ||
| 403 | + */ | ||
| 404 | + onInput(event) { | ||
| 405 | + let value = event.detail.value; | ||
| 406 | + // 判断是否去除空格 | ||
| 407 | + if (this.trim) { | ||
| 408 | + if (typeof this.trim === 'boolean' && this.trim) { | ||
| 409 | + value = this.trimStr(value); | ||
| 410 | + } | ||
| 411 | + if (typeof this.trim === 'string') { | ||
| 412 | + value = this.trimStr(value, this.trim); | ||
| 413 | + } | ||
| 414 | + } | ||
| 415 | + if (this.errMsg) this.errMsg = ''; | ||
| 416 | + this.val = value; | ||
| 417 | + // TODO 兼容 vue2 | ||
| 418 | + this.$emit('input', value); | ||
| 419 | + // TODO 兼容 vue3 | ||
| 420 | + this.$emit('update:modelValue', value); | ||
| 421 | + }, | ||
| 422 | + | ||
| 423 | + /** | ||
| 424 | + * 外部调用方法 | ||
| 425 | + * 获取焦点时触发 | ||
| 426 | + * @param {Object} event | ||
| 427 | + */ | ||
| 428 | + onFocus() { | ||
| 429 | + this.$nextTick(() => { | ||
| 430 | + this.focused = true; | ||
| 431 | + }); | ||
| 432 | + this.$emit('focus', null); | ||
| 433 | + }, | ||
| 434 | + | ||
| 435 | + _Focus(event) { | ||
| 436 | + this.focusShow = true; | ||
| 437 | + this.$emit('focus', event); | ||
| 438 | + }, | ||
| 439 | + | ||
| 440 | + /** | ||
| 441 | + * 外部调用方法 | ||
| 442 | + * 失去焦点时触发 | ||
| 443 | + * @param {Object} event | ||
| 444 | + */ | ||
| 445 | + onBlur() { | ||
| 446 | + this.focused = false; | ||
| 447 | + this.$emit('focus', null); | ||
| 448 | + }, | ||
| 449 | + _Blur(event) { | ||
| 450 | + let value = event.detail.value; | ||
| 451 | + this.focusShow = false; | ||
| 452 | + this.$emit('blur', event); | ||
| 453 | + // 根据类型返回值,在event中获取的值理论上讲都是string | ||
| 454 | + if (this.isEnter === false) { | ||
| 455 | + this.$emit('change', this.val); | ||
| 456 | + } | ||
| 457 | + // 失去焦点时参与表单校验 | ||
| 458 | + if (this.form && this.formItem) { | ||
| 459 | + const { validateTrigger } = this.form; | ||
| 460 | + if (validateTrigger === 'blur') { | ||
| 461 | + this.formItem.onFieldChange(); | ||
| 462 | + } | ||
| 463 | + } | ||
| 464 | + }, | ||
| 465 | + | ||
| 466 | + /** | ||
| 467 | + * 按下键盘的发送键 | ||
| 468 | + * @param {Object} e | ||
| 469 | + */ | ||
| 470 | + onConfirm(e) { | ||
| 471 | + this.$emit('confirm', this.val); | ||
| 472 | + this.isEnter = true; | ||
| 473 | + this.$emit('change', this.val); | ||
| 474 | + this.$nextTick(() => { | ||
| 475 | + this.isEnter = false; | ||
| 476 | + }); | ||
| 477 | + }, | ||
| 478 | + | ||
| 479 | + /** | ||
| 480 | + * 清理内容 | ||
| 481 | + * @param {Object} event | ||
| 482 | + */ | ||
| 483 | + onClear(event) { | ||
| 484 | + this.val = ''; | ||
| 485 | + // TODO 兼容 vue2 | ||
| 486 | + this.$emit('input', ''); | ||
| 487 | + // TODO 兼容 vue2 | ||
| 488 | + // TODO 兼容 vue3 | ||
| 489 | + this.$emit('update:modelValue', ''); | ||
| 490 | + // 点击叉号触发 | ||
| 491 | + this.$emit('clear'); | ||
| 492 | + }, | ||
| 493 | + | ||
| 494 | + /** | ||
| 495 | + * 键盘高度发生变化的时候触发此事件 | ||
| 496 | + * 兼容性:微信小程序2.7.0+、App 3.1.0+ | ||
| 497 | + * @param {Object} event | ||
| 498 | + */ | ||
| 499 | + onkeyboardheightchange(event) { | ||
| 500 | + this.$emit("keyboardheightchange",event); | ||
| 501 | + }, | ||
| 502 | + | ||
| 503 | + /** | ||
| 504 | + * 去除空格 | ||
| 505 | + */ | ||
| 506 | + trimStr(str, pos = 'both') { | ||
| 507 | + if (pos === 'both') { | ||
| 508 | + return str.trim(); | ||
| 509 | + } else if (pos === 'left') { | ||
| 510 | + return str.trimLeft(); | ||
| 511 | + } else if (pos === 'right') { | ||
| 512 | + return str.trimRight(); | ||
| 513 | + } else if (pos === 'start') { | ||
| 514 | + return str.trimStart(); | ||
| 515 | + } else if (pos === 'end') { | ||
| 516 | + return str.trimEnd(); | ||
| 517 | + } else if (pos === 'all') { | ||
| 518 | + return str.replace(/\s+/g, ''); | ||
| 519 | + } else if (pos === 'none') { | ||
| 520 | + return str; | ||
| 521 | + } | ||
| 522 | + return str; | ||
| 523 | + } | ||
| 524 | + } | ||
| 525 | +}; | ||
| 526 | +</script> | ||
| 527 | + | ||
| 528 | +<style lang="scss" scoped> | ||
| 529 | +$uni-error: #e43d33; | ||
| 530 | +$uni-border-1: #dcdfe6 !default; | ||
| 531 | + | ||
| 532 | +.uni-easyinput { | ||
| 533 | + /* #ifndef APP-NVUE */ | ||
| 534 | + width: 100%; | ||
| 535 | + /* #endif */ | ||
| 536 | + flex: 1; | ||
| 537 | + position: relative; | ||
| 538 | + text-align: left; | ||
| 539 | + color: #333; | ||
| 540 | + font-size: 14px; | ||
| 541 | +} | ||
| 542 | + | ||
| 543 | +.uni-easyinput__content { | ||
| 544 | + flex: 1; | ||
| 545 | + /* #ifndef APP-NVUE */ | ||
| 546 | + width: 100%; | ||
| 547 | + display: flex; | ||
| 548 | + box-sizing: border-box; | ||
| 549 | + // min-height: 36px; | ||
| 550 | + /* #endif */ | ||
| 551 | + flex-direction: row; | ||
| 552 | + align-items: center; | ||
| 553 | + // 处理border动画刚开始显示黑色的问题 | ||
| 554 | + border-color: #fff; | ||
| 555 | + transition-property: border-color; | ||
| 556 | + transition-duration: 0.3s; | ||
| 557 | +} | ||
| 558 | + | ||
| 559 | +.uni-easyinput__content-input { | ||
| 560 | + /* #ifndef APP-NVUE */ | ||
| 561 | + width: auto; | ||
| 562 | + /* #endif */ | ||
| 563 | + position: relative; | ||
| 564 | + overflow: hidden; | ||
| 565 | + flex: 1; | ||
| 566 | + line-height: 1; | ||
| 567 | + font-size: 14px; | ||
| 568 | + height: 35px; | ||
| 569 | + // min-height: 36px; | ||
| 570 | +} | ||
| 571 | + | ||
| 572 | +.uni-easyinput__placeholder-class { | ||
| 573 | + color: #999; | ||
| 574 | + font-size: 12px; | ||
| 575 | + // font-weight: 200; | ||
| 576 | +} | ||
| 577 | + | ||
| 578 | +.is-textarea { | ||
| 579 | + align-items: flex-start; | ||
| 580 | +} | ||
| 581 | + | ||
| 582 | +.is-textarea-icon { | ||
| 583 | + margin-top: 5px; | ||
| 584 | +} | ||
| 585 | + | ||
| 586 | +.uni-easyinput__content-textarea { | ||
| 587 | + position: relative; | ||
| 588 | + overflow: hidden; | ||
| 589 | + flex: 1; | ||
| 590 | + line-height: 1.5; | ||
| 591 | + font-size: 14px; | ||
| 592 | + margin: 6px; | ||
| 593 | + margin-left: 0; | ||
| 594 | + height: 80px; | ||
| 595 | + min-height: 80px; | ||
| 596 | + /* #ifndef APP-NVUE */ | ||
| 597 | + min-height: 80px; | ||
| 598 | + width: auto; | ||
| 599 | + /* #endif */ | ||
| 600 | +} | ||
| 601 | + | ||
| 602 | +.input-padding { | ||
| 603 | + padding-left: 10px; | ||
| 604 | +} | ||
| 605 | + | ||
| 606 | +.content-clear-icon { | ||
| 607 | + padding: 0 5px; | ||
| 608 | +} | ||
| 609 | + | ||
| 610 | +.label-icon { | ||
| 611 | + margin-right: 5px; | ||
| 612 | + margin-top: -1px; | ||
| 613 | +} | ||
| 614 | + | ||
| 615 | +// 显示边框 | ||
| 616 | +.is-input-border { | ||
| 617 | + /* #ifndef APP-NVUE */ | ||
| 618 | + display: flex; | ||
| 619 | + box-sizing: border-box; | ||
| 620 | + /* #endif */ | ||
| 621 | + flex-direction: row; | ||
| 622 | + align-items: center; | ||
| 623 | + border: 1px solid $uni-border-1; | ||
| 624 | + border-radius: 4px; | ||
| 625 | + /* #ifdef MP-ALIPAY */ | ||
| 626 | + overflow: hidden; | ||
| 627 | + /* #endif */ | ||
| 628 | +} | ||
| 629 | + | ||
| 630 | +.uni-error-message { | ||
| 631 | + position: absolute; | ||
| 632 | + bottom: -17px; | ||
| 633 | + left: 0; | ||
| 634 | + line-height: 12px; | ||
| 635 | + color: $uni-error; | ||
| 636 | + font-size: 12px; | ||
| 637 | + text-align: left; | ||
| 638 | +} | ||
| 639 | + | ||
| 640 | +.uni-error-msg--boeder { | ||
| 641 | + position: relative; | ||
| 642 | + bottom: 0; | ||
| 643 | + line-height: 22px; | ||
| 644 | +} | ||
| 645 | + | ||
| 646 | +.is-input-error-border { | ||
| 647 | + border-color: $uni-error; | ||
| 648 | + | ||
| 649 | + .uni-easyinput__placeholder-class { | ||
| 650 | + color: mix(#fff, $uni-error, 50%); | ||
| 651 | + } | ||
| 652 | +} | ||
| 653 | + | ||
| 654 | +.uni-easyinput--border { | ||
| 655 | + margin-bottom: 0; | ||
| 656 | + padding: 10px 15px; | ||
| 657 | + // padding-bottom: 0; | ||
| 658 | + border-top: 1px #eee solid; | ||
| 659 | +} | ||
| 660 | + | ||
| 661 | +.uni-easyinput-error { | ||
| 662 | + padding-bottom: 0; | ||
| 663 | +} | ||
| 664 | + | ||
| 665 | +.is-first-border { | ||
| 666 | + /* #ifndef APP-NVUE */ | ||
| 667 | + border: none; | ||
| 668 | + /* #endif */ | ||
| 669 | + /* #ifdef APP-NVUE */ | ||
| 670 | + border-width: 0; | ||
| 671 | + /* #endif */ | ||
| 672 | +} | ||
| 673 | + | ||
| 674 | +.is-disabled { | ||
| 675 | + background-color: #f7f6f6; | ||
| 676 | + color: #d5d5d5; | ||
| 677 | + | ||
| 678 | + .uni-easyinput__placeholder-class { | ||
| 679 | + color: #d5d5d5; | ||
| 680 | + font-size: 12px; | ||
| 681 | + } | ||
| 682 | +} | ||
| 683 | +</style> | ||
| 684 | +<style scoped> | ||
| 685 | + | ||
| 686 | + | ||
| 687 | +/deep/ .buttonInfo{ | ||
| 688 | + font-size: 14px; | ||
| 689 | +} | ||
| 690 | +</style> |
garbage-removal/src/uni_modules/zjy-easyinput/package.json
0 → 100644
| 1 | +{ | ||
| 2 | + "id": "zjy-easyinput", | ||
| 3 | + "displayName": "zjy-easyinput 增强输入框", | ||
| 4 | + "version": "1.2.1", | ||
| 5 | + "description": "Easyinput 组件是对原生input组件的增强", | ||
| 6 | + "keywords": [ | ||
| 7 | + "uni-ui", | ||
| 8 | + "uniui", | ||
| 9 | + "input", | ||
| 10 | + "zjy-easyinput", | ||
| 11 | + "输入框" | ||
| 12 | +], | ||
| 13 | + "repository": "https://github.com/dcloudio/uni-ui", | ||
| 14 | + "engines": { | ||
| 15 | + "HBuilderX": "" | ||
| 16 | + }, | ||
| 17 | + "directories": { | ||
| 18 | + "example": "../../temps/example_temps" | ||
| 19 | + }, | ||
| 20 | +"dcloudext": { | ||
| 21 | + "sale": { | ||
| 22 | + "regular": { | ||
| 23 | + "price": "0.00" | ||
| 24 | + }, | ||
| 25 | + "sourcecode": { | ||
| 26 | + "price": "0.00" | ||
| 27 | + } | ||
| 28 | + }, | ||
| 29 | + "contact": { | ||
| 30 | + "qq": "" | ||
| 31 | + }, | ||
| 32 | + "declaration": { | ||
| 33 | + "ads": "无", | ||
| 34 | + "data": "无", | ||
| 35 | + "permissions": "无" | ||
| 36 | + }, | ||
| 37 | + "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui", | ||
| 38 | + "type": "component-vue" | ||
| 39 | + }, | ||
| 40 | + "uni_modules": { | ||
| 41 | + "dependencies": [ | ||
| 42 | + "uni-scss", | ||
| 43 | + "uni-icons" | ||
| 44 | + ], | ||
| 45 | + "encrypt": [], | ||
| 46 | + "platforms": { | ||
| 47 | + "cloud": { | ||
| 48 | + "tcb": "y", | ||
| 49 | + "aliyun": "y" | ||
| 50 | + }, | ||
| 51 | + "client": { | ||
| 52 | + "App": { | ||
| 53 | + "app-vue": "y", | ||
| 54 | + "app-nvue": "y" | ||
| 55 | + }, | ||
| 56 | + "H5-mobile": { | ||
| 57 | + "Safari": "y", | ||
| 58 | + "Android Browser": "y", | ||
| 59 | + "微信浏览器(Android)": "y", | ||
| 60 | + "QQ浏览器(Android)": "y" | ||
| 61 | + }, | ||
| 62 | + "H5-pc": { | ||
| 63 | + "Chrome": "y", | ||
| 64 | + "IE": "y", | ||
| 65 | + "Edge": "y", | ||
| 66 | + "Firefox": "y", | ||
| 67 | + "Safari": "y" | ||
| 68 | + }, | ||
| 69 | + "小程序": { | ||
| 70 | + "微信": "y", | ||
| 71 | + "阿里": "y", | ||
| 72 | + "百度": "y", | ||
| 73 | + "字节跳动": "y", | ||
| 74 | + "QQ": "y" | ||
| 75 | + }, | ||
| 76 | + "快应用": { | ||
| 77 | + "华为": "u", | ||
| 78 | + "联盟": "u" | ||
| 79 | + }, | ||
| 80 | + "Vue": { | ||
| 81 | + "vue2": "y", | ||
| 82 | + "vue3": "y" | ||
| 83 | + } | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | + } | ||
| 87 | +} | ||
| 0 | \ No newline at end of file | 88 | \ No newline at end of file |