|
|
@@ -1,129 +1,133 @@
|
|
|
<template>
|
|
|
<div class="app-delivery-module">
|
|
|
- <!-- 收花人 -->
|
|
|
- <div class="module-com">
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">收花人姓名</div>
|
|
|
- <input v-model="form.receiveUserName" placeholder-class="phcolor" placeholder-style="color:#ccc" @blur="onInputBlur" class="tui-input" name="receiveUserName" placeholder="请填写姓名" />
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">收花人电话</div>
|
|
|
- <input v-model="form.receiveMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" @blur="onInputBlur" class="tui-input" name="receiveMobile" placeholder="请填写电话" type="number" />
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
|
|
|
- <div class="tui-title">所在城市</div>
|
|
|
- <div class="tui-input" v-if="form.province || form.city" >{{ form.province + '-' + form.city }}</div>
|
|
|
- <div class="tui-placeholder" v-else>请选择</div>
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell v-if="hasMap == 0" class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">详细地址</view>
|
|
|
- <input v-model="form.address" placeholder-class="phcolor" class="tui-input" name="address" @input="modifyShow" placeholder="请填写地址" />
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell v-else class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
|
|
|
- <div class="tui-title">详细地址</div>
|
|
|
- <div class="tui-input" v-if="form.address">{{ form.address }}</div>
|
|
|
- <div class="tui-placeholder" v-else>请选择地址</div>
|
|
|
- </tui-list-cell>
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">门牌号</div>
|
|
|
- <input v-model="form.floor" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="floor" placeholder="楼号门牌号(选填)" @input="modifyShow" />
|
|
|
- </tui-list-cell>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="module-com">
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">贺卡内容</div>
|
|
|
- <textarea v-model="form.cardInfo" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input textarea-input" name="cardInfo" placeholder="请填写" :adjust-position="false" :cursor-spacing="0" :auto-height="false" :disable-default-padding="true" :show-confirm-bar="false" />
|
|
|
-
|
|
|
- </tui-list-cell>
|
|
|
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">派送方式</div>
|
|
|
- <div class="delivery-mode-wrapper">
|
|
|
- <switch :checked="form.anonymity == 1" @change="anonymityChange" color="#ff6b35" />
|
|
|
- <span v-if="form.anonymity == 0" class="mode-text normal">不匿名</span>
|
|
|
- <span v-else class="mode-text anonymous">要匿名</span>
|
|
|
- </div>
|
|
|
- </tui-list-cell>
|
|
|
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">备注内容</div>
|
|
|
- <textarea v-model="form.remark" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input textarea-input" name="remark" placeholder="选填,不要贺卡这里备注" :adjust-position="false" :cursor-spacing="0" :auto-height="false" :disable-default-padding="true" :show-confirm-bar="false" />
|
|
|
- </tui-list-cell>
|
|
|
- </div>
|
|
|
+ <div class="module-com">
|
|
|
|
|
|
- <!-- 订花人 -->
|
|
|
- <div class="module-com">
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
- <div class="tui-title">配送日期</div>
|
|
|
- <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
|
|
|
- <div v-if="form.reachDate">{{ form.reachDate }}</div>
|
|
|
- <div v-else>今天</div>
|
|
|
- </picker>
|
|
|
- </tui-list-cell>
|
|
|
-
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
- <div class="tui-title">配送时间</div>
|
|
|
- <picker mode="multiSelector" :value="form.reachPeriod" :range="timeOptions" @change="bindTimeChange">
|
|
|
- <view class="uni-input" style="width:450upx;">{{form.reachPeriod}}<text style="margin-left:10upx;">前</text></view>
|
|
|
- </picker>
|
|
|
- </tui-list-cell>
|
|
|
|
|
|
- <block v-if="openIntraCity == 0">
|
|
|
- <tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="openIntraCity == 2">
|
|
|
<view class="delivery-unavailable-notice">
|
|
|
- <view class="notice-icon">
|
|
|
- <text class="icon-text">!</text>
|
|
|
- </view>
|
|
|
- <view class="notice-content">
|
|
|
- <view class="notice-title">跑腿配送暂不可用</view>
|
|
|
- <view class="notice-desc">请选择其他配送方式下单</view>
|
|
|
- </view>
|
|
|
+ <view class="notice-icon">
|
|
|
+ <text class="icon-text">!</text>
|
|
|
+ </view>
|
|
|
+ <view class="notice-content">
|
|
|
+ <view class="notice-title">跑腿配送暂不可用</view>
|
|
|
+ <view class="notice-desc">请选择其他配送方式下单</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</tui-list-cell>
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
+
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">距离</view>
|
|
|
- <view class="tui-input" v-if="showDistance > 0">{{ showDistance }}公里</view>
|
|
|
- <view class="tui-input" v-else>0公里</view>
|
|
|
+ <div class="tui-title">收花人姓名</div>
|
|
|
+ <input v-model="form.receiveUserName" placeholder-class="phcolor" placeholder-style="color:#ccc" @blur="onInputBlur" class="tui-input" name="receiveUserName" placeholder="请填写姓名" />
|
|
|
</tui-list-cell>
|
|
|
<tui-list-cell class="line-cell" :hover="false">
|
|
|
- <view class="tui-title">跑腿费</view>
|
|
|
- <view class="tui-input">
|
|
|
- <text :class="isFreeDelivery ? 'delivery-price-free' : 'delivery-price-normal'">¥ {{ form.sendCost }}</text>
|
|
|
- <text v-if="isFreeDelivery" class="free-delivery-tag">【免跑腿费】</text>
|
|
|
- </view>
|
|
|
+ <div class="tui-title">收花人电话</div>
|
|
|
+ <input v-model="form.receiveMobile" placeholder-class="phcolor" placeholder-style="color:#ccc" @blur="onInputBlur" class="tui-input" name="receiveMobile" placeholder="请填写电话" type="number" />
|
|
|
</tui-list-cell>
|
|
|
-
|
|
|
- <!-- 跑腿平台报价列表 -->
|
|
|
- <tui-list-cell v-if="deliveryQuotes.length > 0" class="line-cell" :hover="false" :arrow="false">
|
|
|
- <view class="delivery-quotes-container">
|
|
|
- <view class="delivery-quotes-grid">
|
|
|
- <view
|
|
|
- v-for="(item, index) in deliveryQuotes"
|
|
|
- :key="index"
|
|
|
- class="delivery-quote-item"
|
|
|
- :class="{
|
|
|
- 'active': selectedDeliveryIndex === index,
|
|
|
- 'disabled': !item.isAble,
|
|
|
- 'fixed-width': deliveryQuotes.length <= 2
|
|
|
- }"
|
|
|
- @click="selectDelivery(item, index)"
|
|
|
- >
|
|
|
- <view class="platform-name">{{ item.displayName || item.name }}</view>
|
|
|
- <view class="platform-price">{{ item.priceText }}元</view>
|
|
|
- <view v-if="item.type" class="platform-type">{{ item.type }}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true" @click="openAddres">
|
|
|
+ <div class="tui-title">所在城市</div>
|
|
|
+ <div class="tui-input" v-if="form.province || form.city" >{{ form.province + '-' + form.city }}</div>
|
|
|
+ <div class="tui-placeholder" v-else>请选择</div>
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell v-if="hasMap == 0" class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">详细地址</view>
|
|
|
+ <input v-model="form.address" placeholder-class="phcolor" class="tui-input" name="address" @input="modifyShow" placeholder="请填写地址" />
|
|
|
</tui-list-cell>
|
|
|
- <tui-list-cell v-else-if="deliveryQuotesLoading" class="line-cell" :hover="false" :arrow="false">
|
|
|
- <view style="text-align: center; padding: 20rpx 0; color: #999;">正在获取报价...</view>
|
|
|
+ <tui-list-cell v-else class="line-cell" :hover="false" :arrow="true" @click="selRegionFn">
|
|
|
+ <div class="tui-title">详细地址</div>
|
|
|
+ <div class="tui-input" v-if="form.address">{{ form.address }}</div>
|
|
|
+ <div class="tui-placeholder" v-else>请选择地址</div>
|
|
|
</tui-list-cell>
|
|
|
- </block>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">门牌号</div>
|
|
|
+ <input v-model="form.floor" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input" name="floor" placeholder="楼号门牌号(选填)" @input="modifyShow" />
|
|
|
+ </tui-list-cell>
|
|
|
+ </div>
|
|
|
|
|
|
- </div>
|
|
|
+ <div class="module-com">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">贺卡内容</div>
|
|
|
+ <textarea v-model="form.cardInfo" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input textarea-input" name="cardInfo" placeholder="请填写" :adjust-position="false" :cursor-spacing="0" :auto-height="false" :disable-default-padding="true" :show-confirm-bar="false" />
|
|
|
+
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">派送方式</div>
|
|
|
+ <div class="delivery-mode-wrapper">
|
|
|
+ <switch :checked="form.anonymity == 1" @change="anonymityChange" color="#ff6b35" />
|
|
|
+ <span v-if="form.anonymity == 0" class="mode-text normal">不匿名</span>
|
|
|
+ <span v-else class="mode-text anonymous">要匿名</span>
|
|
|
+ </div>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">备注内容</div>
|
|
|
+ <textarea v-model="form.remark" placeholder-class="phcolor" placeholder-style="color:#ccc" class="tui-input textarea-input" name="remark" placeholder="选填,不要贺卡这里备注" :adjust-position="false" :cursor-spacing="0" :auto-height="false" :disable-default-padding="true" :show-confirm-bar="false" />
|
|
|
+ </tui-list-cell>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 订花人 -->
|
|
|
+ <div class="module-com">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="true">
|
|
|
+ <div class="tui-title">配送日期</div>
|
|
|
+ <picker mode="date" :value="form.reachDate" @change="selTimeFn" class="tui-input">
|
|
|
+ <div v-if="form.reachDate">{{ form.reachDate }}</div>
|
|
|
+ <div v-else>今天</div>
|
|
|
+ </picker>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <tui-list-cell class="line-cell" :hover="false" :arrow="false">
|
|
|
+ <div class="tui-title">配送时间</div>
|
|
|
+ <picker mode="multiSelector" :value="form.reachPeriod" :range="timeOptions" @change="bindTimeChange">
|
|
|
+ <view class="uni-input" style="width:450upx;">{{form.reachPeriod}}<text style="margin-left:10upx;">前</text></view>
|
|
|
+ </picker>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <block v-if="openIntraCity == 1">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">距离</view>
|
|
|
+ <view class="tui-input" v-if="showDistance > 0">{{ showDistance }}公里</view>
|
|
|
+ <view class="tui-input" v-else>0公里</view>
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <view class="tui-title">跑腿费</view>
|
|
|
+ <view class="tui-input">
|
|
|
+ <text :class="isFreeDelivery ? 'delivery-price-free' : 'delivery-price-normal'">¥ {{ form.sendCost }}</text>
|
|
|
+ <text v-if="isFreeDelivery" class="free-delivery-tag">【免跑腿费】</text>
|
|
|
+ </view>
|
|
|
+ </tui-list-cell>
|
|
|
+
|
|
|
+ <!-- 跑腿平台报价列表 -->
|
|
|
+ <tui-list-cell v-if="deliveryQuotes.length > 0" class="line-cell" :hover="false" :arrow="false">
|
|
|
+ <view class="delivery-quotes-container">
|
|
|
+ <view class="delivery-quotes-grid">
|
|
|
+ <view
|
|
|
+ v-for="(item, index) in deliveryQuotes"
|
|
|
+ :key="index"
|
|
|
+ class="delivery-quote-item"
|
|
|
+ :class="{
|
|
|
+ 'active': selectedDeliveryIndex === index,
|
|
|
+ 'disabled': !item.isAble,
|
|
|
+ 'fixed-width': deliveryQuotes.length <= 2
|
|
|
+ }"
|
|
|
+ @click="selectDelivery(item, index)"
|
|
|
+ >
|
|
|
+ <view class="platform-name">{{ item.displayName || item.name }}</view>
|
|
|
+ <view class="platform-price">{{ item.priceText }}元</view>
|
|
|
+ <view v-if="item.type" class="platform-type">{{ item.type }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell v-else-if="deliveryQuotesLoading" class="line-cell" :hover="false" :arrow="false">
|
|
|
+ <view style="text-align: center; padding: 20rpx 0; color: #999;">正在获取报价...</view>
|
|
|
+ </tui-list-cell>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
|
|
|
|
|
|
<!-- 省市联动 -->
|