|
|
@@ -0,0 +1,462 @@
|
|
|
+<template>
|
|
|
+ <view class="app-main app-content">
|
|
|
+ <view class="express-form-container">
|
|
|
+ <!-- 订单信息显示 -->
|
|
|
+ <view class="order-info-section" v-if="orderInfo">
|
|
|
+ <view class="section-title">
|
|
|
+ 订单信息
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">下单客户：</text>
|
|
|
+ <text class="value">{{ orderInfo.customName }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">下单手机：</text>
|
|
|
+ <text class="value">{{ orderInfo.bookMobile }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">订单编号：</text>
|
|
|
+ <text class="value">{{ orderInfo.orderSn }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">收货姓名：</text>
|
|
|
+ <text class="value">{{ expressForm.user_name }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">手机号码：</text>
|
|
|
+ <text class="value">{{ expressForm.c }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text class="label">详细地址：</text>
|
|
|
+ <view class="value-container">
|
|
|
+ <text class="value">{{orderInfo.address}}{{orderInfo.floor}}</text>
|
|
|
+ <view v-if="orderInfo.fullAddress!=orderInfo.showAddress && orderInfo.showAddress!=''" class="secondary-address">
|
|
|
+ <text style="color:#a7a0a0;">{{ orderInfo.showAddress }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 包裹信息 -->
|
|
|
+ <view class="form-section">
|
|
|
+ <view class="section-title">商品信息</view>
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="item-label">商品数量</text>
|
|
|
+ <view class="item-value">
|
|
|
+ <input class="item-input" type="number" v-model="expressForm.packageNum" placeholder="请输入包裹数量" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-item required">
|
|
|
+ <text class="item-label">商品重量</text>
|
|
|
+ <view class="item-value">
|
|
|
+ <input class="item-input" type="digit" v-model="expressForm.weight" placeholder="公斤" @focus="expressForm.weight=''" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-item">
|
|
|
+ <text class="item-label">配送费用</text>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="fee-text">¥{{ deliveryFee }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <view class="button-section">
|
|
|
+ <button class="express-button query-button" @click="queryDeliveryFee">
|
|
|
+ 查运费
|
|
|
+ </button>
|
|
|
+ <button class="express-button submit-button" @click="submitExpress">
|
|
|
+ 提交
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getStoreFee, createExpressOrder } from '@/api/shop-express'
|
|
|
+import { getDetail } from '@/api/order'
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'ExpressCreate',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderId: '',
|
|
|
+ isNew: 0, // 0: 重新配送, 1: 首次配送
|
|
|
+ orderInfo: null,
|
|
|
+ // 配送表单数据
|
|
|
+ expressForm: {
|
|
|
+ packageNum: 1,
|
|
|
+ price: 0,
|
|
|
+ weight:'',
|
|
|
+ user_name: '',
|
|
|
+ user_phone: '',
|
|
|
+ user_lng: 0,
|
|
|
+ user_lat: 0,
|
|
|
+ user_address: '',
|
|
|
+ note: ''
|
|
|
+ },
|
|
|
+ cargo: {
|
|
|
+ name: '',
|
|
|
+ price: 0,
|
|
|
+ type: 0,
|
|
|
+ num: 0,
|
|
|
+ },
|
|
|
+ // 配送费用
|
|
|
+ deliveryFee: 0,
|
|
|
+ refreshPage:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ if (options.orderId) {
|
|
|
+ this.orderId = options.orderId
|
|
|
+ this.isNew = options.isNew
|
|
|
+ }
|
|
|
+
|
|
|
+ //返回上一页时刷新
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ let prevPage = pages[ pages.length - 2 ];
|
|
|
+ prevPage.$vm.refreshPage = 1
|
|
|
+
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if(this.orderId){
|
|
|
+ this.getOrderDetail()
|
|
|
+ } else {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getOrderDetail()
|
|
|
+ }, 100)
|
|
|
+ }
|
|
|
+
|
|
|
+ if(this.refreshPage == 1){
|
|
|
+ this.getOrderDetail()
|
|
|
+ this.refreshPage = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(){},
|
|
|
+ /**
|
|
|
+ * 跳转到修改订单页面
|
|
|
+ */
|
|
|
+ goToModifyPage() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/admin/order/modify?id=${this.orderId}`
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 获取订单详情
|
|
|
+ */
|
|
|
+ async getOrderDetail() {
|
|
|
+ const res = await getDetail({ id: this.orderId })
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.orderInfo = res.data
|
|
|
+ this.expressForm.weight = res.data.weight?parseFloat(res.data.weight):0
|
|
|
+ this.expressForm.price = res.data.prePrice || 0
|
|
|
+ // 自动填充收货信息
|
|
|
+ this.expressForm.user_name = res.data.receiveUserName || res.data.bookName || ''
|
|
|
+ this.expressForm.user_phone = res.data.receiveMobile || res.data.bookMobile || ''
|
|
|
+ this.expressForm.user_address = res.data.dist + res.data.address + res.data.floor
|
|
|
+ this.expressForm.user_lng = res.data.long || 0
|
|
|
+ this.expressForm.user_lat = res.data.lat || 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询配送运费
|
|
|
+ */
|
|
|
+ async queryDeliveryFee() {
|
|
|
+ // 验证必填字段
|
|
|
+ if (!this.expressForm.weight || Number(this.expressForm.weight) <= 0) {
|
|
|
+ this.$msg('请输入重量')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.expressForm.user_name) {
|
|
|
+ this.$msg('收货人姓名不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.expressForm.user_phone) {
|
|
|
+ this.$msg('收货人手机号不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.expressForm.user_address) {
|
|
|
+ this.$msg('收货地址不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const data = {
|
|
|
+ orderId: this.orderId,
|
|
|
+ price: this.expressForm.price,
|
|
|
+ weight: Number(this.expressForm.weight),
|
|
|
+ packageNum: this.expressForm.packageNum,
|
|
|
+ user_name: this.expressForm.user_name,
|
|
|
+ user_phone: this.expressForm.user_phone,
|
|
|
+ user_address: this.expressForm.user_address,
|
|
|
+ user_lng: this.expressForm.user_lng,
|
|
|
+ user_lat: this.expressForm.user_lat
|
|
|
+ }
|
|
|
+ const res = await getStoreFee(data)
|
|
|
+ if (res.code === 1) {
|
|
|
+ const deliveryFee = res.data.est_fee || '0'
|
|
|
+ this.deliveryFee = deliveryFee/100.0
|
|
|
+ this.$msg('运费查询成功')
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 提交配送订单
|
|
|
+ */
|
|
|
+ async submitExpress() {
|
|
|
+ // 验证必填字段
|
|
|
+ if (!this.expressForm.weight || Number(this.expressForm.weight) <= 0) {
|
|
|
+ this.$msg('请输入重量')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.expressForm.user_name) {
|
|
|
+ this.$msg('收货人姓名不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.expressForm.user_phone) {
|
|
|
+ this.$msg('收货人手机号不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (!this.expressForm.user_address) {
|
|
|
+ this.$msg('收货地址不能为空')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.$util.confirmModal({content: '确认呼叫跑腿？'}, async () => {
|
|
|
+ const data = {
|
|
|
+ orderId: this.orderId,
|
|
|
+ weight: Number(this.expressForm.weight),
|
|
|
+ packageNum: this.expressForm.packageNum,
|
|
|
+ user_name: this.expressForm.user_name,
|
|
|
+ user_phone: this.expressForm.user_phone,
|
|
|
+ user_address: this.expressForm.user_address,
|
|
|
+ user_lng: this.expressForm.user_lng,
|
|
|
+ user_lat: this.expressForm.user_lat,
|
|
|
+ note: this.expressForm.note,
|
|
|
+ isNew: this.isNew
|
|
|
+ }
|
|
|
+ const res = await createExpressOrder(data)
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.$msg('提交成功')
|
|
|
+ // 返回订单列表页面
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.navigateBack()
|
|
|
+ }, 1500)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ padding: 20upx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.express-form-container {
|
|
|
+ max-width: 750upx;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+.order-info-section {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12upx;
|
|
|
+ padding: 30upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .label {
|
|
|
+ width: 150upx;
|
|
|
+ color: #666;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-container {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ color: black;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ .secondary-address {
|
|
|
+ margin-top: 10upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-section {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12upx;
|
|
|
+ padding: 30upx;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+ padding-bottom: 20upx;
|
|
|
+ border-bottom: 2upx solid #eee;
|
|
|
+}
|
|
|
+
|
|
|
+.section-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+ padding-bottom: 20upx;
|
|
|
+ border-bottom: 2upx solid #eee;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.form-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 20upx;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.required .item-label::after {
|
|
|
+ content: '*';
|
|
|
+ color: #ff4d4f;
|
|
|
+ margin-left: 4upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ width: 140upx;
|
|
|
+ color: #333;
|
|
|
+ font-size: 28upx;
|
|
|
+ padding-top: 16upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 80upx;
|
|
|
+
|
|
|
+ .fee-text {
|
|
|
+ color: #ff2842;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36upx;
|
|
|
+ line-height: 80upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-input {
|
|
|
+ width: 100%;
|
|
|
+ height: 80upx;
|
|
|
+ line-height: 80upx;
|
|
|
+ border: 2upx solid #eee;
|
|
|
+ border-radius: 8upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #007aff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-textarea {
|
|
|
+ flex: 1;
|
|
|
+ max-height: 150upx;
|
|
|
+ min-height: 80upx;
|
|
|
+ border: 2upx solid #eee;
|
|
|
+ border-radius: 8upx;
|
|
|
+ padding: 20upx;
|
|
|
+ font-size: 28upx;
|
|
|
+ background: #fff;
|
|
|
+
|
|
|
+ &.large {
|
|
|
+ min-height: 160upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:focus {
|
|
|
+ border-color: #007aff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.fee-display {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 30upx;
|
|
|
+ background: #f0f9ff;
|
|
|
+ border-radius: 12upx;
|
|
|
+ border: 1upx solid #09C567;
|
|
|
+
|
|
|
+ .fee-label {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #333;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .fee-amount {
|
|
|
+ font-size: 36upx;
|
|
|
+ color: #ff4d4f;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 20upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.button-section {
|
|
|
+ margin-top: 40upx;
|
|
|
+ display: flex;
|
|
|
+ gap: 20upx;
|
|
|
+}
|
|
|
+
|
|
|
+.express-button {
|
|
|
+ flex: 1;
|
|
|
+ height: 88upx;
|
|
|
+ line-height: 88upx;
|
|
|
+ border-radius: 12upx;
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &.query-button {
|
|
|
+ background: #f0f9ff;
|
|
|
+ color: #09C567;
|
|
|
+ border: 2upx solid #09C567;
|
|
|
+
|
|
|
+ &:disabled {
|
|
|
+ background: #f5f5f5;
|
|
|
+ color: #ccc;
|
|
|
+ border-color: #ddd;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.submit-button {
|
|
|
+ background: #09C567;
|
|
|
+ color: white;
|
|
|
+
|
|
|
+ &:disabled {
|
|
|
+ background: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
