From a987eccb27891bbfaae334b7fa0e892ee2640271 Mon Sep 17 00:00:00 2001
From: MrShi <1878285526@qq.com>
Date: 星期一, 20 四月 2026 17:20:13 +0800
Subject: [PATCH] 调接口加页面
---
small-program/pages/luggage-storage/luggage-storage.vue | 340 ++++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 280 insertions(+), 60 deletions(-)
diff --git a/small-program/pages/luggage-storage/luggage-storage.vue b/small-program/pages/luggage-storage/luggage-storage.vue
index 101c289..937f3dc 100644
--- a/small-program/pages/luggage-storage/luggage-storage.vue
+++ b/small-program/pages/luggage-storage/luggage-storage.vue
@@ -21,7 +21,7 @@
<image class="cell-icon" src="/static/icon/ic_store@2x.png" mode="widthFix"></image>
<view class="store-cell-copy">
<text class="cell-title">{{ selectedStore ? selectedStore.name : servicePointPlaceholder }}</text>
- <view class="store-cell-copy-addr" v-if="selectedStore">
+ <view class="store-cell-copy-addr1" v-if="selectedStore">
<image src="/static/icon/home_ic_location3@2x.png" mode="widthFix"></image>
<text class="store-cell-subtitle">{{ selectedStore.address }}</text>
</view>
@@ -33,22 +33,43 @@
</view>
<view v-else class="address-card section-card">
- <view class="address-row" @tap="openStorePopup">
+ <view class="address-row" @click="openStorePopup">
<view class="address-left">
<view class="address-badge send">瀵�</view>
<view class="address-copy">
- <text class="address-title">瀵勪欢鍦板潃</text>
- <text class="address-desc">璇烽�夋嫨瀵勪欢鏈嶅姟鐐�</text>
+ <text class="address-title" v-if="!sendStore">瀵勪欢鍦板潃</text>
+ <text class="address-desc" v-if="!sendStore">璇烽�夋嫨瀵勪欢鏈嶅姟鐐�</text>
+ <view v-if="sendStore" class="store-cell-copy-addr">
+ <text class="store-cell-title">{{ sendStore.name }}</text>
+ <view class="store-cell-subtitle-container">
+ <image src="/static/icon/home_ic_location3@2x.png" mode="widthFix"></image>
+ <text class="store-cell-subtitle">{{ sendStore.address }}</text>
+ </view>
+ </view>
</view>
</view>
<u-icon name="arrow-right" size="20" color="#222222"></u-icon>
</view>
- <view class="address-row no-border" @tap="openReceiveAddress">
+ <view class="address-row no-border" @click="openReceiveAddress">
<view class="address-left">
<view class="address-badge receive">鏀�</view>
<view class="address-copy">
- <text class="address-title">鍙栦欢鍦板潃</text>
- <text class="address-desc">璇烽�夋嫨鍙栦欢鏈嶅姟鐐规垨鑰呭叾浠栧湴鍧�</text>
+ <text class="address-title" v-if="!receiveStore && !receiveAddr">鍙栦欢鍦板潃</text>
+ <text class="address-desc" v-if="!receiveStore && !receiveAddr">璇烽�夋嫨鍙栦欢鏈嶅姟鐐规垨鑰呭叾浠栧湴鍧�</text>
+ <view v-if="receiveStore" class="store-cell-copy-addr">
+ <text class="store-cell-title">{{ receiveStore.name }}</text>
+ <view class="store-cell-subtitle-container">
+ <image src="/static/icon/home_ic_location3@2x.png" mode="widthFix"></image>
+ <text class="store-cell-subtitle">{{ receiveStore.address }}</text>
+ </view>
+ </view>
+ <view v-if="receiveAddr" class="store-cell-copy-addr">
+ <text class="store-cell-title">{{ receiveAddr.name }}</text>
+ <view class="store-cell-subtitle-container">
+ <image src="/static/icon/home_ic_location3@2x.png" mode="widthFix"></image>
+ <text class="store-cell-subtitle">{{ receiveAddr.addr }}</text>
+ </view>
+ </view>
</view>
</view>
<u-icon name="arrow-right" size="20" color="#222222"></u-icon>
@@ -159,7 +180,7 @@
</view>
</view>
- <view v-if="activeMode === 'city'" class="section-card service-time-card">
+ <view v-if="activeMode === 'city' && amountData" class="section-card service-time-card">
<view class="section-head">
<text class="section-title">鏈嶅姟鏃舵晥</text>
<text class="section-desc">锛堝繀閫夛級</text>
@@ -168,14 +189,14 @@
v-for="item in serviceTimes"
:key="item.id"
class="service-time-item"
- :class="{ active: selectedServiceTime === item.id }"
- @tap="selectedServiceTime = item.id"
+ :class="{ active: isUrgent === item.id }"
+ @tap="isUrgent = item.id"
>
<text class="service-time-name">
- <text>鏍囬�熻揪</text>
- <text>(棰勮6灏忔椂鍐呴�佽揪)</text>
+ <text>{{ item.name }}</text>
+ <text>(棰勮{{ item.serviceTime }}灏忔椂鍐呴�佽揪)</text>
</text>
- <text class="service-time-price">{{ item.price }}</text>
+ <text class="service-time-price">锟{ item.price }}</text>
</view>
</view>
@@ -187,9 +208,9 @@
<text class="unit-text">鍏�</text>
</view>
</view>
- <view v-if="insuranceFeeText" class="insurance-tip-row">
+ <view v-if="amountData" class="insurance-tip-row">
<text class="insurance-tip-label">鐗╁搧淇濊垂:</text>
- <text class="insurance-tip-value">{{ insuranceFeeText }}</text>
+ <text class="insurance-tip-value">锟{ amountData.insuranceFee }}</text>
</view>
</view>
@@ -206,7 +227,7 @@
<u-popup :show="showStorePopup" mode="bottom" round="24" :closeOnClickOverlay="true" @close="showStorePopup = false">
<view class="store-popup-wrap">
<view class="store-popup-head">
- <text class="store-popup-title">閫夋嫨鏈嶅姟鐐�</text>
+ <text class="store-popup-title">{{ storePopupType === 'receive' ? '閫夋嫨鍙栦欢鏈嶅姟鐐�' : (activeMode === 'city' ? '閫夋嫨瀵勪欢鏈嶅姟鐐�' : '閫夋嫨鏈嶅姟鐐�') }}</text>
<view class="store-popup-close" @tap="showStorePopup = false">
<u-icon name="close" size="28" color="#999999"></u-icon>
</view>
@@ -297,19 +318,21 @@
<text class="amount-row-value">{{ '锟�' + item.unitPrice }}</text>
</view>
</view>
- <view class="agreement-bar popup-agreement-bar">
- <image class="agreement-icon" src="/static/icon/ic_accept_sel@2x.png" mode="widthFix"></image>
+ <view class="agreement-bar popup-agreement-bar" @click="toggleAgreement">
+ <image class="agreement-icon" :src="agreementChecked ? '/static/icon/ic_accept_sel@2x.png' : '/static/icon/ic_accept@2x.png'" mode="widthFix" />
<text class="agreement-text">鎴戝凡闃呰骞跺悓鎰�</text>
- <text class="agreement-link">銆婄敤鎴锋湇鍔″崗璁��</text>
+ <text class="agreement-link" @tap="goRichText('protocol')">銆婄敤鎴锋湇鍔″崗璁��</text>
<text class="agreement-text">鍙�</text>
- <text class="agreement-link">銆婇殣绉佹斂绛栥��</text>
+ <text class="agreement-link" @tap="goRichText('privacy')">銆婇殣绉佹斂绛栥��</text>
</view>
<view class="bottom-action-row popup-action-row">
<view class="total-wrap">
<text class="total-label">鎬昏垂鐢�</text>
<text class="total-price">{{ amountData ? '锟�' + amountData.totalPrice : '锟�--' }}</text>
- <text class="detail-text">鏄庣粏</text>
- <u-icon name="arrow-up" size="13" color="#7B7F86"></u-icon>
+ <view @click="showAmountPopup = false">
+ <text class="detail-text">鏄庣粏</text>
+ <u-icon name="arrow-up" size="13" color="#7B7F86"></u-icon>
+ </view>
</view>
<view class="submit-btn active-submit-btn" @click="createOrder">绔嬪嵆涓嬪崟</view>
</view>
@@ -317,23 +340,33 @@
</u-popup>
<view class="bottom-bar">
- <view class="agreement-bar">
- <image class="agreement-icon" :src="agreementChecked ? '/static/icon/ic_accept_sel@2x.png' : '/static/icon/ic_accept@2x.png'" mode="widthFix"></image>
+ <view class="agreement-bar" @click="toggleAgreement">
+ <image class="agreement-icon" :src="agreementChecked ? '/static/icon/ic_accept_sel@2x.png' : '/static/icon/ic_accept@2x.png'" mode="widthFix" />
<text class="agreement-text">鎴戝凡闃呰骞跺悓鎰�</text>
- <text class="agreement-link">銆婄敤鎴锋湇鍔″崗璁��</text>
+ <text class="agreement-link" @tap="goRichText('protocol')">銆婄敤鎴锋湇鍔″崗璁��</text>
<text class="agreement-text">鍙�</text>
- <text class="agreement-link">銆婇殣绉佹斂绛栥��</text>
+ <text class="agreement-link" @tap="goRichText('privacy')">銆婇殣绉佹斂绛栥��</text>
</view>
<view class="bottom-action-row">
<view class="total-wrap">
<text class="total-label">鎬昏垂鐢�</text>
<text class="total-price">{{ amountData ? '锟�' + amountData.totalPrice : '锟�--' }}</text>
- <text class="detail-text detail-click" @tap.stop="openAmountPopup">鏄庣粏</text>
- <u-icon name="arrow-down" size="18" color="#999999"></u-icon>
+ <template v-if="amountData">
+ <text class="detail-text detail-click" @tap.stop="openAmountPopup">鏄庣粏</text>
+ <u-icon name="arrow-down" size="18" color="#999999"></u-icon>
+ </template>
</view>
<view class="submit-btn active-submit-btn" @click="createOrder">绔嬪嵆涓嬪崟</view>
</view>
</view>
+ <!-- 閫夋嫨鏈嶅姟鐐�/鍦板潃 -->
+ <u-action-sheet
+ :show="showReceiveAddress"
+ @close="showReceiveAddress = false"
+ @select="caozuo"
+ :actions="actions"
+ :round="15"
+ cancelText="鍙栨秷" />
</view>
</template>
@@ -360,7 +393,7 @@
tempSelectedGoodsIds: [1],
selectedGoodsIds: [1],
selectedLuggageId: 1,
- selectedServiceTime: 1,
+ isUrgent: 0,
form: {
receiver: '',
mobile: '',
@@ -374,13 +407,14 @@
},
amountData: null,
luggageTypes: [],
- serviceTimes: [
- { id: 1, name: '鏍囧噯杈�(棰勮6灏忔椂鍐呴�佽揪)', price: '锟�50' },
- { id: 2, name: '鎬ラ�熻揪(棰勮4灏忔椂鍐呴�佽揪)', price: '锟�70' }
- ],
+ serviceTimes: [],
storeList: [],
selectedStore: null,
+ sendStore: null,
+ receiveStore: null,
+ receiveAddr: null,
+ storePopupType: 'send',
storeForm: {
keyword: '',
page: 1,
@@ -388,13 +422,26 @@
},
goodsOptions: [],
- uploadedImages: []
+ uploadedImages: [],
+
+ showReceiveAddress: false,
+ actions: [
+ { name: '閫夋嫨鏈嶅姟鐐�' },
+ { name: '閫夋嫨鍦板潃绨�' }
+ ]
}
},
watch: {
'form.insurance': {
handler() {
this.calculateLocalPrice()
+ }
+ },
+ isUrgent: {
+ handler() {
+ if (this.activeMode === 'city') {
+ this.calculateRemotePrice()
+ }
}
}
},
@@ -412,12 +459,6 @@
.map(item => item.name)
return labels.join('銆�')
},
- insuranceFeeText() {
- if (!this.form.insurance) {
- return ''
- }
- return '+10'
- },
totalPriceText() {
return '锟�150.00'
}
@@ -426,8 +467,27 @@
this.getNearbyShopList()
this.getCategoryList()
this.getCitySizeList()
+
+ uni.$on('updateAddress', (data) => {
+ console.log(data)
+ this.receiveAddr = data
+ })
},
methods: {
+ caozuo(e) {
+ var that = this;
+ if (e.name === '閫夋嫨鏈嶅姟鐐�') {
+ that.storePopupType = 'receive'
+ that.receiveStore = null
+ that.showStorePopup = true
+ } else if (e.name === '閫夋嫨鍦板潃绨�') {
+ that.receiveAddr = null
+ uni.navigateTo({
+ url: '/pages/address/address?type=1'
+ })
+ }
+ that.showReceiveAddress = false
+ },
async uploadFiles(filePaths, maxCount = 9) {
if (!filePaths || filePaths.length === 0) {
return []
@@ -519,26 +579,63 @@
},
switchMode(mode) {
this.activeMode = mode
+ this.selectedStore = null
+ this.sendStore = null
+ this.receiveStore = null
+ this.receiveAddr = null
+ this.form.receiver = ''
+ this.form.mobile = ''
+ this.form.arriveTime = ''
+ this.form.pickupTime = ''
+ this.form.goodType = ''
+ this.form.goodTypeName = ''
+ this.form.insurance = ''
+ this.form.remark = ''
+ this.form.goodsImages = []
+ this.amountData = null
+ this.uploadedImages = []
+ this.luggageTypes.forEach(item => {
+ item.count = 0
+ })
+ },
+ toggleAgreement() {
+ this.agreementChecked = !this.agreementChecked
+ },
+ goRichText(type) {
+ uni.navigateTo({
+ url: '/pages/rich-text/rich-text?type=' + type
+ })
},
openReceiveAddress() {
- uni.showToast({
- title: '鍙栦欢鍦板潃寰呮帴鍏�',
- icon: 'none'
- })
+ this.showReceiveAddress = true
},
openAmountPopup() {
this.showAmountPopup = true
},
openStorePopup() {
+ this.storePopupType = 'send'
this.tempSelectedStoreId = null
this.showStorePopup = true
},
confirmStore() {
- this.selectedStore = this.storeList.find(item => item.active)
+ const selected = this.storeList.find(item => item.active)
+ if (this.storePopupType === 'send') {
+ this.sendStore = selected
+ } else if (this.storePopupType === 'receive') {
+ this.receiveStore = selected
+ this.receiveAddr = null
+ this.calculateRemotePrice()
+ } else {
+ this.selectedStore = selected
+ this.calculateLocalPrice()
+ }
this.showStorePopup = false
- this.calculateLocalPrice()
},
confirmGoods() {
+ if (!this.goodsOptions.find(item => item.active)) {
+ uni.showToast({ title: '璇烽�夋嫨鐗╁搧淇℃伅', icon: 'none' })
+ return
+ }
this.form.goodTypeName = this.goodsOptions.find(item => item.active)?.name || ''
this.form.goodType = this.goodsOptions.find(item => item.active)?.id || ''
this.showGoodsPopup = false
@@ -561,7 +658,12 @@
const day = String(date.getDate()).padStart(2, '0')
const hour = String(date.getHours()).padStart(2, '0')
const minute = String(date.getMinutes()).padStart(2, '0')
- this.form.pickupTime = `${year}-${month}-${day} ${hour}:${minute}`
+ const pickupTime = `${year}-${month}-${day} ${hour}:${minute}`
+ if (this.form.arriveTime && new Date(pickupTime) <= new Date(this.form.arriveTime)) {
+ uni.showToast({ title: '棰勮鍙栦欢鏃堕棿蹇呴』澶т簬棰勮鍒板簵鏃堕棿', icon: 'none' })
+ return
+ }
+ this.form.pickupTime = pickupTime
this.showPickupTimePicker = false
this.calculateLocalPrice()
},
@@ -616,6 +718,13 @@
this.calculateLocalPrice()
},
async calculateLocalPrice() {
+ if (this.activeMode === 'city') {
+ this.calculateRemotePrice()
+ } else {
+ this.calculateLocalPriceOnly()
+ }
+ },
+ async calculateLocalPriceOnly() {
if (!this.selectedStore || !this.form.arriveTime || !this.form.pickupTime) {
return
}
@@ -641,13 +750,85 @@
item.unitPrice = item.unitPrice / 100
})
res.data.totalPrice = res.data.totalPrice / 100
+ res.data.insuranceFee = res.data.insuranceFee / 100
+ this.amountData = res.data
+ }
+ },
+ async calculateRemotePrice() {
+ if (!this.sendStore || !this.form.arriveTime || !this.form.pickupTime) {
+ return
+ }
+ if (!this.receiveStore && !this.receiveAddr) {
+ return
+ }
+ const luggageList = this.luggageTypes
+ .filter(item => item.count > 0)
+ .map(item => ({
+ categoryId: item.id,
+ quantity: item.count
+ }))
+ if (luggageList.length === 0) {
+ return
+ }
+ let fromLat = ''
+ let fromLgt = ''
+ let toLat = ''
+ let toLgt = ''
+ if (this.sendStore) {
+ fromLat = this.sendStore.latitude
+ fromLgt = this.sendStore.longitude
+ }
+ if (this.receiveStore) {
+ toLat = this.receiveStore.latitude
+ toLgt = this.receiveStore.longitude
+ } else if (this.receiveAddr) {
+ toLat = this.receiveAddr.latitude
+ toLgt = this.receiveAddr.longitude
+ }
+ const res = await this.$u.api.calculateRemotePrice({
+ cityId: this.cityId,
+ fromLat: fromLat,
+ fromLgt: fromLgt,
+ toLat: toLat,
+ toLgt: toLgt,
+ urgent: this.isUrgent,
+ depositStartTime: this.form.arriveTime + ':00',
+ depositEndTime: this.form.pickupTime + ':00',
+ items: luggageList,
+ declaredAmount: this.form.insurance || 0
+ })
+ if (res.code === 200) {
+ res.data.itemList.forEach(item => {
+ item.unitPrice = item.unitPrice / 100
+ })
+ res.data.totalPrice = res.data.totalPrice / 100
+ res.data.insuranceFee = res.data.insuranceFee / 100
+ this.serviceTimes = [
+ { id: 0, name: '鏍囧噯杈�', serviceTime: res.data.standardHours, price: res.data.itemPrice / 100 },
+ { id: 1, name: '鎬ラ�熻揪', serviceTime: res.data.urgentHours, price: (res.data.urgentFee + res.data.itemPrice) / 100 }
+ ]
this.amountData = res.data
}
},
async createOrder() {
- if (!this.selectedStore) {
- uni.showToast({ title: '璇烽�夋嫨闂ㄥ簵', icon: 'none' })
+ if (!this.agreementChecked) {
+ uni.showToast({ title: '璇峰厛闃呰骞跺悓鎰忕敤鎴锋湇鍔″崗璁強闅愮鏀跨瓥', icon: 'none' })
return
+ }
+ if (this.activeMode === 'local') {
+ if (!this.selectedStore) {
+ uni.showToast({ title: '璇烽�夋嫨闂ㄥ簵', icon: 'none' })
+ return
+ }
+ } else {
+ if (!this.sendStore) {
+ uni.showToast({ title: '璇烽�夋嫨瀵勪欢鏈嶅姟鐐�', icon: 'none' })
+ return
+ }
+ if (!this.receiveStore && !this.receiveAddr) {
+ uni.showToast({ title: '璇烽�夋嫨鍙栦欢鍦板潃', icon: 'none' })
+ return
+ }
}
if (!this.form.arriveTime) {
uni.showToast({ title: '璇烽�夋嫨棰勮鍒板簵鏃堕棿', icon: 'none' })
@@ -655,6 +836,10 @@
}
if (!this.form.pickupTime) {
uni.showToast({ title: '璇烽�夋嫨棰勮鍙栦欢鏃堕棿', icon: 'none' })
+ return
+ }
+ if (new Date(this.form.pickupTime) <= new Date(this.form.arriveTime)) {
+ uni.showToast({ title: '棰勮鍙栦欢鏃堕棿蹇呴』澶т簬棰勮鍒板簵鏃堕棿', icon: 'none' })
return
}
const luggageList = this.luggageTypes
@@ -671,10 +856,9 @@
categoryId: item.categoryId,
quantity: item.quantity
}))
- const res = await this.$u.api.createOrder({
+ let orderParams = {
cityId: this.cityId,
declaredAmount: this.form.insurance || 0,
- depositShopId: this.selectedStore.id,
expectedDepositTime: this.form.arriveTime + ':00',
expectedTakeTime: this.form.pickupTime + ':00',
goodType: this.form.goodType,
@@ -683,25 +867,47 @@
remark: this.form.remark,
takePhone: this.form.mobile,
takeUser: this.form.receiver,
- type: this.activeMode === 'local' ? 0 : 1
- })
+ type: this.activeMode === 'local' ? 0 : 1,
+ isUrgent: this.isUrgent
+ }
+ if (this.activeMode === 'local') {
+ orderParams.depositShopId = this.selectedStore.id
+ } else {
+ orderParams.depositShopId = this.sendStore.id
+ orderParams.fromShopId = this.sendStore.id
+ if (this.receiveStore) {
+ orderParams.toType = 0
+ orderParams.toShopId = this.receiveStore.id
+ orderParams.takeLat = this.receiveStore.latitude
+ orderParams.takeLgt = this.receiveStore.longitude
+ orderParams.takeLocation = this.receiveStore.address
+ } else if (this.receiveAddr) {
+ orderParams.toType = 1
+ orderParams.toAddrId = this.receiveAddr.id
+ orderParams.takeLat = this.receiveAddr.latitude
+ orderParams.takeLgt = this.receiveAddr.longitude
+ orderParams.takeLocation = this.receiveAddr.addr
+ }
+ }
+ const res = await this.$u.api.createOrder(orderParams)
if (res.code === 200) {
- uni.showToast({ title: '涓嬪崟鎴愬姛', icon: 'success' })
if (res.data) {
- this.processPayment(res.data.response)
+ this.processPayment(res.data.response, res.data.orderId)
}
}
},
- processPayment(paymentData) {
+ processPayment(paymentData, orderId) {
uni.requestPayment({
provider: 'wxpay',
timeStamp: paymentData.timeStamp || '',
nonceStr: paymentData.nonceStr || '',
- package: paymentData.packageValue || '',
+ package: paymentData.package || '',
signType: paymentData.signType || 'MD5',
paySign: paymentData.paySign || '',
success: (res) => {
- uni.showToast({ title: '鏀粯鎴愬姛', icon: 'success' })
+ uni.navigateTo({
+ url: '/pages/payment-success/payment-success?orderId=' + orderId
+ });
},
fail: (err) => {
if (err.errMsg.includes('cancel')) {
@@ -982,8 +1188,8 @@
flex-direction: column;
justify-content: center;
}
-
- .store-cell-copy-addr {
+
+ .store-cell-copy-addr1 {
display: flex;
align-items: baseline;
image {
@@ -992,6 +1198,20 @@
margin-right: 4rpx;
}
}
+
+ .store-cell-copy-addr {
+ display: flex;
+ flex-direction: column;
+ .store-cell-subtitle-container {
+ display: flex;
+ align-items: center;
+ image {
+ width: 24rpx;
+ height: 24rpx;
+ margin-right: 4rpx;
+ }
+ }
+ }
.with-icon .cell-icon {
width: 40rpx;
--
Gitblit v1.9.3