| | |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="order-page__tabs" :style="{ top: navHeight + 'px' }"> |
| | | <view class="order-page__search" :style="{ top: navHeight + 'px' }"> |
| | | <view class="order-page__search-box"> |
| | | <u-icon name="search" color="#999999" size="28"></u-icon> |
| | | <input class="order-page__search-input" v-model="searchKeyword" placeholder="输入姓名、电话、订单编号搜索" placeholder-class="order-page__search-placeholder" @confirm="searchOrder" /> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="order-page__tabs" :style="{ top: (navHeight + 44) + 'px' }"> |
| | | <view v-for="tab in displayTabs" :key="tab.value" class="order-page__tab" :class="{ 'order-page__tab--active': activeTab === tab.value }" @click="activeTab = tab.value"> |
| | | <text class="order-page__tab-text">{{ tab.label }}</text> |
| | | <view v-if="activeTab === tab.value" class="order-page__tab-line"></view> |
| | | </view> |
| | | </view> |
| | | |
| | | <scroll-view class="order-page__body" scroll-y :style="bodyStyle"> |
| | | <scroll-view class="order-page__body" scroll-y :style="bodyStyle" @scrolltolower="handleScrollToLower"> |
| | | <view class="order-page__list"> |
| | | <view v-for="(item, index) in orders" :key="item.id" class="order-card" @click="goToOrderDetail(item, index)"> |
| | | <view class="order-card__head"> |
| | |
| | | <view class="order-card__route-item"> |
| | | <view class="order-card__point order-card__point--pickup">取</view> |
| | | <view class="order-card__route-texts"> |
| | | <text class="order-card__route-title">{{ item.takeName }}</text> |
| | | <text class="order-card__route-desc">{{ item.takeAddress }}</text> |
| | | <text class="order-card__route-title">{{ item.depositShopName }}</text> |
| | | <text class="order-card__route-desc">{{ item.depositShopAddress }}</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="order-card__route-item order-card__route-item--delivery"> |
| | | <view class="order-card__point order-card__point--delivery">送</view> |
| | | <view class="order-card__route-texts"> |
| | | <text class="order-card__route-title">{{ item.depositShopName }}</text> |
| | | <text class="order-card__route-desc">{{ item.depositShopAddress }}</text> |
| | | <text class="order-card__route-title">{{ item.takeName }}</text> |
| | | <text class="order-card__route-desc">{{ item.takeAddress }}</text> |
| | | </view> |
| | | </view> |
| | | |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { chooseImageWithNotice, getLocationWithNotice } from '@/utils/utils' |
| | | |
| | | export default { |
| | | data() { |
| | | return { |
| | | statusBarHeight: 0, |
| | | navHeight: 0, |
| | | activeTab: null, |
| | | searchKeyword: '', |
| | | tabs: [ |
| | | { label: '全部', value: null }, |
| | | { label: '待取货', value: 3 }, |
| | |
| | | |
| | | bodyStyle() { |
| | | return { |
| | | marginTop: this.navHeight + uni.upx2px(88) + 'px', |
| | | height: `calc(100vh - ${this.navHeight + uni.upx2px(88)}px)` |
| | | marginTop: this.navHeight + uni.upx2px(88) + uni.upx2px(88) + 'px', |
| | | height: `calc(100vh - ${this.navHeight + uni.upx2px(88) + uni.upx2px(72)}px)` |
| | | } |
| | | }, |
| | | photoPopupTitle() { |
| | |
| | | onShow() { |
| | | this.getActiveOrderCount() |
| | | }, |
| | | onReachBottom() { |
| | | if (!this.hasMore || this.loading) return |
| | | this.page++ |
| | | this.getOrderList() |
| | | }, |
| | | watch: { |
| | | activeTab() { |
| | | this.page = 1 |
| | |
| | | } |
| | | }, |
| | | methods: { |
| | | handleScrollToLower() { |
| | | if (!this.hasMore || this.loading) return |
| | | this.page++ |
| | | this.getOrderList() |
| | | }, |
| | | searchOrder() { |
| | | this.page = 1 |
| | | this.hasMore = true |
| | | this.orders = [] |
| | | this.getOrderList() |
| | | }, |
| | | getActiveOrderCount() { |
| | | this.$u.api.activeOrderCount().then(res => { |
| | | if (res.code === 200) { |
| | |
| | | 2: '待接单', |
| | | 3: '待取货', |
| | | 4: '配送中', |
| | | 5: '已完成', |
| | | 5: '已送达', |
| | | 7: '已完成', |
| | | 99: '已取消' |
| | | } |
| | |
| | | }, |
| | | getOrderList() { |
| | | if (this.loading) return |
| | | console.log({ |
| | | status: this.activeTab, |
| | | keyword: this.searchKeyword |
| | | }) |
| | | this.loading = true |
| | | this.$u.api.orderPage({ |
| | | capacity: 10, |
| | | page: this.page, |
| | | model: { |
| | | status: this.activeTab |
| | | status: this.activeTab, |
| | | keyword: this.searchKeyword |
| | | } |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | const list = res.data.records || [] |
| | | console.log(list) |
| | | if (this.page === 1) { |
| | | this.orders = list |
| | | } else { |
| | |
| | | this.showQRPopup = true |
| | | }, |
| | | handlePhotoPickup(item) { |
| | | this.selectedOrder = item |
| | | this.photoPopupMode = 'pickup' |
| | | this.uploadedPhotos = [] |
| | | this.photoRemark = '' |
| | | this.showPhotoPopup = true |
| | | this.checkOperationRadius(item.id, 'pickup') |
| | | }, |
| | | handlePhotoDeliver(item) { |
| | | this.selectedOrder = item |
| | | this.photoPopupMode = 'deliver' |
| | | this.uploadedPhotos = [] |
| | | this.photoRemark = '' |
| | | this.showPhotoPopup = true |
| | | this.checkOperationRadius(item.id, 'deliver') |
| | | }, |
| | | checkOperationRadius(orderId, mode) { |
| | | getLocationWithNotice({ |
| | | type: 'gcj02', |
| | | success: (res) => { |
| | | this.$u.api.checkDriverOperationRadius({ |
| | | lat: res.latitude, |
| | | lng: res.longitude, |
| | | orderId: orderId |
| | | }).then(apiRes => { |
| | | if (apiRes.code === 200) { |
| | | console.log(apiRes.data) |
| | | if (apiRes.data === true) { |
| | | this.selectedOrder = { id: orderId } |
| | | this.photoPopupMode = mode |
| | | this.uploadedPhotos = [] |
| | | this.photoRemark = '' |
| | | this.showPhotoPopup = true |
| | | } else { |
| | | uni.showToast({ |
| | | title: '您当前位置与收货地址距离超出范围,请在地址附近重新拍照', |
| | | icon: 'none' |
| | | }) |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | fail: () => { |
| | | uni.showToast({ |
| | | title: '无法获取您的位置信息,请前往设置开启定位权限', |
| | | icon: 'none' |
| | | }) |
| | | } |
| | | }).catch(() => {}) |
| | | }, |
| | | closePhotoPopup() { |
| | | this.showPhotoPopup = false |
| | |
| | | uni.showToast({ title: '最多上传3张照片', icon: 'none' }) |
| | | return |
| | | } |
| | | uni.chooseImage({ |
| | | chooseImageWithNotice({ |
| | | count: 3 - this.uploadedPhotos.length, |
| | | sourceType: ['camera', 'album'], |
| | | success: (res) => { |
| | | this.uploadedPhotos = [...this.uploadedPhotos, ...res.tempFilePaths] |
| | | } |
| | | }) |
| | | }).catch(() => {}) |
| | | }, |
| | | deletePhoto(index) { |
| | | this.uploadedPhotos.splice(index, 1) |
| | | }, |
| | | submitPhotoPopup() { |
| | | submitPhotoPopup() { |
| | | if (this.uploadedPhotos.length === 0) { |
| | | uni.showToast({ title: '请上传照片', icon: 'none' }) |
| | | return |
| | | } |
| | | uni.showLoading({ title: '上传中...' }) |
| | | getLocationWithNotice({ |
| | | type: 'gcj02', |
| | | success: (locationRes) => { |
| | | this.doUploadPhotos(locationRes.latitude, locationRes.longitude) |
| | | }, |
| | | fail: () => { |
| | | this.doUploadPhotos(null, null) |
| | | } |
| | | }).catch(() => { |
| | | this.doUploadPhotos(null, null) |
| | | }) |
| | | }, |
| | | |
| | | doUploadPhotos(latitude, longitude) { |
| | | const uploadTasks = this.uploadedPhotos.map(path => { |
| | | return new Promise((resolve, reject) => { |
| | | const formData = { folder: 'orders' } |
| | | if (latitude && longitude) { |
| | | formData.latitude = latitude |
| | | formData.longitude = longitude |
| | | } |
| | | console.log('formData:', formData) |
| | | uni.uploadFile({ |
| | | url: this.$baseUrl + 'web/public/upload', |
| | | filePath: path, |
| | | name: 'file', |
| | | formData: { |
| | | folder: 'order' |
| | | }, |
| | | formData: formData, |
| | | success: (uploadRes) => { |
| | | const data = JSON.parse(uploadRes.data) |
| | | if (data.code === 200) { |
| | |
| | | images: images.map(img => img.imgaddr), |
| | | orderId: this.selectedOrder.id, |
| | | remark: this.photoRemark |
| | | } |
| | | if (latitude && longitude) { |
| | | params.latitude = latitude |
| | | params.longitude = longitude |
| | | } |
| | | return this.$u.api[api](params) |
| | | }).then(res => { |
| | |
| | | font-size: 38rpx; |
| | | font-weight: 700; |
| | | color: #ffffff; |
| | | } |
| | | |
| | | &__search { |
| | | position: fixed; |
| | | left: 0; |
| | | right: 0; |
| | | z-index: 10; |
| | | height: 88rpx; |
| | | padding: 8rpx 30rpx; |
| | | box-sizing: border-box; |
| | | display: flex; |
| | | align-items: center; |
| | | background: #ffffff; |
| | | } |
| | | |
| | | &__search-box { |
| | | width: 100%; |
| | | height: 72rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | padding: 0 24rpx; |
| | | background: #EEEEEE; |
| | | border-radius: 16rpx; |
| | | } |
| | | |
| | | &__search-input { |
| | | flex: 1; |
| | | height: 72rpx; |
| | | margin-left: 12rpx; |
| | | color: #333333; |
| | | font-weight: 400; |
| | | font-size: 26rpx; |
| | | } |
| | | |
| | | &__search-placeholder { |
| | | font-size: 28rpx; |
| | | color: #999999; |
| | | } |
| | | |
| | | &__tabs { |
| | |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | background: #f5f7fb; |
| | | border-radius: 16rpx; |
| | | |
| | | image { |