k94314517
2025-07-18 f93f455134ff234be9d257c0f432c8052f1c32cd
small-program/pages/freight/freight.vue
@@ -6,51 +6,54 @@
               <view class="list-item-label-x"></view>
               <text>车辆及路线</text>
            </view>
            <view class="list-item-row">
            <view class="list-item-row" @click="show = true">
               <view class="list-item-row-label">车辆类型<b>*</b></view>
               <view class="list-item-row-val">
                  <text>请选择</text>
                  <text :style="{ color: form.categoryName ? '#111111' : '' }">{{form.categoryName ? form.categoryName : '请选择'}}</text>
                  <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
               </view>
            </view>
            <view class="list-item-row">
            <view class="list-item-row" @click="show3 = true">
               <view class="list-item-row-label">货车型号<b>*</b></view>
               <view class="list-item-row-val">
                  <text>请选择</text>
                  <text :style="{ color: form.carUnit ? '#111111' : '' }">{{form.carUnit ? form.carUnit : '请选择'}}</text>
                  <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
               </view>
            </view>
            <view class="list-item-row">
            <view class="list-item-row" @click="show2 = true">
               <view class="list-item-row-label">用车时间<b>*</b></view>
               <view class="list-item-row-val">
                  <text>请选择</text>
                  <text :style="{ color: form.startDate ? '#111111' : '' }">{{form.startDate ? form.startDate + ' 至 ' + form.endDate + ' (' + form.priceNum1 + '天) ' : '请选择'}}</text>
                  <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
               </view>
            </view>
            <view class="list-item-row">
               <view class="list-item-row-label">
                  运货地址<b>*</b>
                  <view class="list-item-row-label-add">+增加途经点</view>
                  <view class="list-item-row-label-add" @click="addAddr">+增加途经点</view>
               </view>
               <view class="address">
                  <view class="address-item">
                  <view class="address-item" @click="selectAddress(2)">
                     <view class="address-item-img">
                        <image src="/static/icon/ic_qidian@2x.png" mode="widthFix"></image>
                        <text>请选择起点</text>
                        <text :style="{color: form.location ? '#111111' : ''}">{{form.location ? form.location : '请选择起点'}}</text>
                     </view>
                     <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
                  </view>
                  <view class="address-item">
                  <view class="address-item" v-for="(item, index) in form.wayInfoDTOList" :key="index" @click="selectAddress(4, index)">
                     <view class="address-item-img">
                        <image src="/static/icon/ic_jingguo@2x.png" mode="widthFix"></image>
                        <text>请选择途经地点</text>
                        <text :style="{color: item.location ? '#111111' : ''}">{{item.location ? item.location : '请选择途经地点'}}</text>
                     </view>
                     <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
                     <view style="display: flex; align-items: center; flex-shrink: 0;">
                        <image src="/static/icon/ic_delete@2x.png" style="margin-right: 22rpx; width: 32rpx; height: 32rpx;" @click.stop="form.wayInfoDTOList.splice(index, 1)" mode="widthFix"></image>
                        <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
                     </view>
                  </view>
                  <view class="address-item">
                  <view class="address-item" @click="selectAddress(3)">
                     <view class="address-item-img">
                        <image src="/static/icon/ic_zhongdian@2x.png" mode="widthFix"></image>
                        <text>请选择终点</text>
                        <text :style="{color: form.locationEnd ? '#111111' : ''}">{{form.locationEnd ? form.locationEnd : '请选择终点'}}</text>
                     </view>
                     <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
                  </view>
@@ -62,49 +65,50 @@
               <view class="list-item-label-x"></view>
               <text>需求</text>
            </view>
            <view class="list-item-row">
            <view class="list-item-row" @click="show1 = true">
               <view class="list-item-row-label">运输品种<b>*</b></view>
               <view class="list-item-row-val">
                  <text>请选择</text>
                  <text :style="{ color: form.transportTypeName ? '#111111' : '' }">{{form.transportTypeName ? form.transportTypeName : '请选择'}}</text>
                  <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
               </view>
            </view>
            <view class="list-item-row">
               <view class="list-item-row-label">用车数量<b>*</b></view>
               <view class="list-item-row-val">
                  <text>请选择</text>
                  <u-icon name="arrow-right" color="#111111" size="16"></u-icon>
                  <input type="number" v-model="form.priceNum2" disabled placeholder="1" />
                  <text>辆</text>
               </view>
            </view>
            <view class="list-item-row">
               <view class="list-item-row-label">运输重量/数量<b>*</b></view>
               <view class="list-item-row-val">
                  <input type="text" placeholder="请输入" />
                  <text>个</text>
                  <input type="text" v-model="form.transportNum" placeholder="请输入" />
                  <text @click="show4 = true">{{form.transportUnit}}</text>
                  <u-icon name="arrow-down" color="#111111" size="16"></u-icon>
               </view>
            </view>
            <view class="list-item-row">
            <view class="list-item-row" v-if="viewStatus">
               <view class="list-item-row-label">需求补充</view>
               <view class="list-item-row-val">
                  <textarea cols="30" rows="10" placeholder="请输入" maxlength="200"></textarea>
                  <textarea cols="30" v-model="form.supplement" rows="10" placeholder="请输入" maxlength="200"></textarea>
               </view>
            </view>
            <view class="list-item-row">
            <view class="list-item-row" v-if="viewStatus">
               <view class="list-item-row-label">图片</view>
               <view class="list-item-row-upload">
                  <view class="upload-item">
                     <image src="/static/logo.png" mode="widthFix"></image>
                  <view class="upload-item" v-for="(item, index) in form.multifileList" :key="index">
                     <image :src="item.url" mode="widthFix"></image>
                     <image class="upload-item-dele" @click="form.multifileList.splice(index, 1)" src="/static/icon/ic_delete1@2x.png" mode="widthFix"></image>
                  </view>
                  <view class="upload-item">
                  <view class="upload-item" @click="uploadImg">
                     <u-icon name="plus" color="#999999" size="24"></u-icon>
                     <text>点击上传</text>
                  </view>
               </view>
            </view>
            <view class="list-item-zk">
               <text>补充需求</text>
               <u-icon name="arrow-down" color="#00BC12" size="16"></u-icon>
            <view class="list-item-zk" @click="viewStatus = !viewStatus">
               <text>{{viewStatus ? '收起' : '补充需求'}}</text>
               <u-icon :name="viewStatus ? 'arrow-up' : 'arrow-down'" color="#00BC12" size="16"></u-icon>
            </view>
         </view>
         <view class="list-item">
@@ -113,21 +117,39 @@
               <text>费用</text>
            </view>
            <view class="list-item-cate">
               <view class="list-item-cate-item active">按天付费</view>
               <view class="list-item-cate-item">按次付费</view>
               <view :class="item.id === form.carType ? 'list-item-cate-item active' : 'list-item-cate-item'" v-for="(item, index) in ff" :key="index" @click="form.carType = item.id">按天付费</view>
            </view>
            <view class="list-item-row">
               <view class="list-item-row-label">天数</view>
               <view class="list-item-row-val">
                  <input type="text" placeholder="请输入" />
                  <input type="number" v-model="form.priceNum1" disabled placeholder="请输入" />
                  <text>天</text>
               </view>
            </view>
            <view class="list-item-row">
               <view class="list-item-row-label">费用标准<b>*</b></view>
               <view class="list-item-row-val">
                  <input type="text" placeholder="请输入" />
                  <text>元/辆*天</text>
                  <input type="number" @blur="getPrice" v-model="form.price" placeholder="请输入" />
                  <text>{{form.priceUnit}}</text>
               </view>
            </view>
         </view>
         <view class="list-item">
            <view class="list-item-label">
               <view class="list-item-label-x"></view>
               <text>联系人信息</text>
               <text class="list-item-label-info">默认发单方联系方式,可修改联系人</text>
            </view>
            <view class="list-item-row">
               <view class="list-item-row-label">联系人姓名</view>
               <view class="list-item-row-val">
                  <input type="text" v-model="form.linkName" placeholder="请补充" />
               </view>
            </view>
            <view class="list-item-row">
               <view class="list-item-row-label">联系电话<b>*</b></view>
               <view class="list-item-row-val">
                  <input type="text" v-model="form.linkPhone" maxlength="11" placeholder="请补充" />
               </view>
            </view>
         </view>
@@ -137,27 +159,296 @@
         <view class="footer-price">
            <view class="footer-price-info">预估总费用</view>
            <view class="footer-price-num">
               <text>0</text>
               <text>{{totalPrice || 0}}</text>
               <text>元</text>
            </view>
         </view>
         <view class="footer-bottom">
            <div class="footer-bottom-btn">
            <div class="footer-bottom-btn" @click="submit">
               <text>立即下单</text>
               <text>(服务完成后付款)</text>
            </div>
         </view>
         <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
      </view>
      <!-- 选择车辆类型 -->
      <u-picker
         :show="show"
         :columns="car"
         confirmColor="#00BC12"
         keyName="name"
         @confirm="confirmCategary"
         @cancel="show = false"/>
      <!-- 选择品种 -->
      <u-picker
         :show="show1"
         :columns="variety"
         confirmColor="#00BC12"
         keyName="name"
         @confirm="confirmVariety"
         @cancel="show1 = false"/>
      <!-- 货车型号 -->
      <u-picker
         :show="show3"
         :columns="carArr"
         confirmColor="#00BC12"
         @confirm="confirmCarArr"
         @cancel="show3 = false"/>
      <!-- 单位 -->
      <u-picker
         :show="show4"
         :columns="dw"
         confirmColor="#00BC12"
         @confirm="confirmDw"
         @cancel="show4 = false"/>
      <!-- 选择日期范围 -->
      <u-calendar
         :show="show2"
         color="#00BC12"
         mode="range"
         @close="show2 = false"
         @confirm="confirmDate" />
   </view>
</template>
<script>
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState(['userInfo']),
         totalPrice() {
            return this.form.estimatedAccount / 100
         }
      },
      data() {
         return {
            show: false,
            show1: false,
            show2: false,
            show3: false,
            show4: false,
            form: {
               startDate: '',
               endDate: '',
               lat: '',
               lgt: '',
               location: '',
               latEnd: '',
               lgtEnd: '',
               locationEnd: '',
               carUnit: '',
               categoryId: '',
               categoryName: '',
               wayInfoDTOList: [],
               priceNum1: '',
               priceNum2: 1,
               transportNum: '',
               transportTypeId: '',
               transportTypeName: '',
               carType: 0,
               supplement: '',
               multifileList: [],
               priceUnit: '元/天',
               linkName: '',
               linkPhone: '',
               price: '',
               type: 1,
               transportUnit: '个',
               estimatedAccount: ''
            },
            car: [],
            variety: [],
            ff: [
               { name: '按天付费', id: 0 },
               { name: '按次付费', id: 1 }
            ],
            dw: [['个', '斤']],
            carArr: [],
            viewStatus: false
         };
      },
      watch: {
         'form.carType': {
            handler(news, olds) {
               if (news === 0) {
                  this.form.priceUnit = '元/天'
               } else if (news === 1) {
                  this.form.priceUnit = '元/次'
               }
            }
         }
      },
      onLoad() {
         const res = uni.getStorageSync('carData');
         this.form.linkPhone = this.userInfo.telephone
         this.form.startDate = res.startDate
         this.form.endDate = res.endDate
         this.form.lat = res.lat
         this.form.lgt = res.lgt
         this.form.priceNum1 = res.days
         this.form.categoryId = res.categoryId
         this.form.categoryName = res.categoryName
         this.form.location = res.location
         this.form.latEnd = res.latEnd
         this.form.lgtEnd = res.lgtEnd
         this.form.locationEnd = res.locationEnd
         this.form.wayInfoDTOList = res.wayInfoDTOList
         uni.removeStorageSync('carData');
         this.getCategoryLists()
      },
      methods: {
         confirmDw(e) {
            this.form.transportUnit = e.value[0]
            this.show4 = false
         },
         // 提交订单
         submit() {
            if (!this.form.transportTypeName) {
               return uni.showToast({ title: '请选择运输品种', icon: 'none' })
            }
            if (!this.form.priceNum2) {
               return uni.showToast({ title: '请输入用车数量', icon: 'none' })
            }
            if (!this.form.transportNum) {
               return uni.showToast({ title: '请输入运输重量/数量', icon: 'none' })
            }
            if (!this.form.price) {
               return uni.showToast({ title: '请输入费用标准', icon: 'none' })
            }
            if (!this.form.linkPhone) {
               return uni.showToast({ title: '请输入联系电话', icon: 'none' })
            }
            this.$u.api.release({
               ...this.form,
               price: Number(this.form.price) * 100,
               wayInfoDTOList: [
                  {
                     lat: this.form.lat,
                     lgt: this.form.lgt,
                     location: this.form.location
                  },
                  ...this.form.wayInfoDTOList,
                  {
                     lat: this.form.latEnd,
                     lgt: this.form.lgtEnd,
                     location: this.form.locationEnd
                  }
               ]
            }).then(res => {
               if (res.code == 200) {
                  uni.navigateTo({
                     url: `/pages/success/success?orderId=${res.data.id}`
                  })
               }
            })
         },
         uploadImg() {
            uni.chooseImage({
               success: (chooseImageRes) => {
                  const tempFilePaths = chooseImageRes.tempFilePaths;
                  uni.uploadFile({
                     url: this.$baseUrl + '/web/public/upload',
                     filePath: tempFilePaths[0],
                     name: 'file',
                     formData: {
                        'folder': 'orders'
                     },
                     success: (uploadFileRes) => {
                        const res = JSON.parse(uploadFileRes.data)
                        this.form.multifileList.push({
                           fileurl: res.data.imgaddr,
                           name: res.data.originname,
                           url: res.data.url,
                           type: 0
                        })
                     }
                  });
               }
            });
         },
         // 计算金额
         getPrice() {
            if (this.form.price && this.form.priceNum1 && this.form.priceNum2) {
               this.$u.api.getTotal({
                  price: Number(this.form.price) * 100,
                  priceUnit: this.form.priceUnit,
                  priceNum1: this.form.priceNum1,
                  priceNum2: this.form.priceNum2,
                  type: 1
               }).then(res => {
                  this.form.estimatedAccount = res.data
               })
            }
         },
         getCategoryLists() {
            this.$u.api.getCategoryList({ type: 1 })
               .then(res => {
                  this.car = [res.data]
                  res.data.forEach(item => {
                     if (item.id === this.form.categoryId) {
                        this.carArr = [item.detailList]
                     }
                  })
               })
            this.$u.api.getCategoryList({ type: 0 })
               .then(res => {
                  this.variety = [res.data]
               })
         },
         confirmCategary(e) {
            this.form.categoryId = e.value[0].id
            this.form.categoryName = e.value[0].name
            this.carArr = [e.value[0].detailList]
            this.form.carUnit = ''
            this.show = false
         },
         confirmVariety(e) {
            this.form.transportTypeId = e.value[0].id
            this.form.transportTypeName = e.value[0].name
            this.show1 = false
         },
         confirmCarArr(e) {
            this.form.carUnit = e.value[0]
            this.show3 = false
         },
         confirmDate(e) {
            this.form.startDate = e[0]
            this.form.endDate = e[e.length - 1]
            this.form.priceNum1 = e.length;
            this.show2 = false
         },
         addAddr() {
            this.form.wayInfoDTOList.push({
               lat: '',
               lgt: '',
               location: ''
            })
         },
         selectAddress(type, index) {
            uni.chooseLocation({
               success: (res) => {
                  if ([2].includes(type)) {
                     this.form.latitude = res.latitude
                     this.form.longitude = res.longitude
                     this.form.address = res.address
                  } else if (type === 3) {
                     this.form.locationEnd = res.address
                     this.form.latEnd = res.latitude
                     this.form.lgtEnd = res.longitude
                  } else if (type === 4) {
                     this.form.wayInfoDTOList[0].lat = res.latitude
                     this.form.wayInfoDTOList[0].lgt = res.longitude
                     this.form.wayInfoDTOList[0].location = res.address
                  }
               }
            });
         },
      }
   }
</script>
@@ -323,6 +614,12 @@
                  border-radius: 4rpx;
                  margin-right: 20rpx;
               }
               .list-item-label-info {
                  font-weight: 400;
                  font-size: 26rpx;
                  color: #999999;
                  margin-left: 26rpx;
               }
            }
            .list-item-zk {
               width: 100%;
@@ -354,7 +651,9 @@
                  margin-top: 20rpx;
                  .address-item {
                     width: 100%;
                     height: 100rpx;
                     // height: 100rpx;
                     padding: 30rpx 0;
                     box-sizing: border-box;
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
@@ -524,6 +823,7 @@
                     border-radius: 8rpx;
                     margin-right: 20rpx;
                     border: 2rpx solid #EEEEEE;
                     position: relative;
                     &:last-child {
                        margin: 0 !important;
                     }
@@ -535,6 +835,14 @@
                        font-size: 26rpx;
                        color: #666666;
                        margin-top: 16rpx;
                     }
                     .upload-item-dele {
                        position: absolute;
                        top: -20rpx;
                        right: -20rpx;
                        width: 40rpx;
                        height: 40rpx;
                        z-index: 9;
                     }
                  }
               }
@@ -549,7 +857,7 @@
                     flex-shrink: 0;
                     font-weight: 400;
                     font-size: 30rpx;
                     color: #111111;
                     color: #999999;
                  }
                  input {
                     width: 100%;