选择物流的方式

hdApp/src/admin/billing/components/affirm-sh-method-panel.vue

@@ -30,21 +30,25 @@
       </view>
     </tui-list-cell>
 
-    <block v-if="$util.isEmpty(wlList) && localForm.sendType == 3">
-      <tui-list-cell class="line-cell" :hover="false">
-        <view class="tui-title">配送物流</view>
-        <input type="text" placeholder="请填选物流" v-model="localForm.wlName" @focus="localForm.wlName=''" placeholder-class="tui-placeholder"/>
-      </tui-list-cell>
-    </block>
-    <block v-else>
-      <tui-list-cell class="line-cell" :arrow="true" v-if="localForm.sendType == 3">
-        <div class="tui-title">配送物流</div>
-        <picker mode="selector" :value="localForm.wlId" :range="wlList" range-key="name" @change="changeWlFn" class="tui-input">
-          <div v-if="localForm.wlId">{{ wlSelData.name }}</div>
-          <div class="tui-placeholder" v-else>请选择</div>
-        </picker>
-      </tui-list-cell>
-    </block>
+    <tui-list-cell class="line-cell" :hover="false" v-if="localForm.sendType == 3">
+      <view class="tui-title">配送物流</view>
+      <view class="wl-field-row">
+        <input
+          type="text"
+          placeholder="请填写物流"
+          v-model="localForm.wlName"
+          @focus="onWlNameFocus"
+          @input="onWlNameInput"
+          placeholder-class="tui-placeholder"
+          class="wl-name-input"
+        />
+        <button
+          v-if="wlList.length > 0"
+          class="admin-button-com middle wl-select-btn"
+          @click="openWlSelect"
+        >选择物流</button>
+      </view>
+    </tui-list-cell>
 
     <tui-list-cell class="line-cell" :hover="false" :arrow="false" v-if="showShMethodExtraFee">
       <view>
@@ -146,6 +150,27 @@
         <view class="policy-btn" @click="closeDeliveryPolicy">知道了</view>
       </view>
     </uni-popup>
+
+    <!-- 物流选择弹框：展示供货商配置的物流列表，选中后回填输入框 -->
+    <uni-popup ref="wlPopupRef" background-color="#fff" type="center" :animation="false" class="wl-popup-wrap">
+      <view class="wl-popup-content">
+        <view class="wl-popup-title">请选择物流</view>
+        <scroll-view scroll-y="true" class="wl-popup-scroll">
+          <view class="wl-popup-list">
+            <view v-for="(item, index) in wlList" :key="index" class="wl-popup-item">
+              <button
+                class="admin-button-com wl-option-btn"
+                @click.stop="selectWl(item)"
+                :class="{ selected: localForm.wlName === item.name }"
+              >{{ item.name }}</button>
+            </view>
+          </view>
+        </scroll-view>
+        <view class="wl-popup-footer">
+          <button class="admin-button-com big blue wl-popup-cancel-btn" @click="cancelWlSelect">取消</button>
+        </view>
+      </view>
+    </uni-popup>
   </view>
 </template>
 
@@ -454,12 +479,37 @@ export default {
       }
       this.localForm.packCost = 0
     },
-    changeWlFn(e) {
-      this.wlSelData = this.wlList[e.detail.value]
+    /** 聚焦物流输入框时清空，便于重新填写 */
+    onWlNameFocus() {
+      this.localForm.wlName = ""
+      this.localForm.wlId = 0
+      this.wlSelData = { id: 0, name: "" }
+    },
+    /** 手动输入物流名称时清除已选物流 id，避免与列表选项不一致 */
+    onWlNameInput() {
+      this.localForm.wlId = 0
+      this.wlSelData = { id: 0, name: "" }
+    },
+    /** 打开物流选择弹框 */
+    openWlSelect() {
+      if (!this.wlList.length) {
+        uni.showToast({ title: "暂无物流可选", icon: "none" })
+        return
+      }
+      this.$refs.wlPopupRef.open("center")
+    },
+    /** 弹框内选中物流后回填到输入框 */
+    selectWl(item) {
+      this.wlSelData = item || { id: 0, name: "" }
       this.localForm.wlId = this.wlSelData.id
       this.localForm.wlName = this.wlSelData.name
+      this.$refs.wlPopupRef.close()
       this.emitPanelChange()
     },
+    /** 关闭物流选择弹框 */
+    cancelWlSelect() {
+      this.$refs.wlPopupRef.close()
+    },
     getDeliveryQuotes() {
       this.deliveryQuotes = []
       this.selectedDeliveryIndex = -1
@@ -587,6 +637,88 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.wl-field-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.wl-name-input {
+  flex: 1;
+  min-width: 0;
+  text-align: left;
+}
+
+.wl-select-btn {
+  margin-left: 16upx;
+  flex-shrink: 0;
+}
+
+.wl-popup-content {
+  width: 680upx;
+  max-width: 90vw;
+  background: #fff;
+  border-radius: 20upx;
+  overflow: hidden;
+}
+
+.wl-popup-title {
+  padding: 30upx 30upx 10upx;
+  font-size: 30upx;
+  font-weight: bold;
+  color: #333;
+}
+
+.wl-popup-scroll {
+  max-height: 60vh;
+}
+
+.wl-popup-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  padding: 20upx 20upx 10upx;
+}
+
+.wl-popup-item {
+  margin-bottom: 20upx;
+  margin-right: 12upx;
+}
+
+.wl-option-btn {
+  min-width: 160upx;
+  padding: 0 27upx;
+  height: 80upx;
+  font-size: 32upx;
+  font-weight: bold;
+  border-radius: 16upx;
+  background: #f0f2f6;
+  color: #333;
+  border: 2upx solid #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.wl-option-btn.selected,
+.wl-option-btn:active {
+  background: #3385ff;
+  color: #fff;
+  border-color: #3385ff;
+}
+
+.wl-popup-footer {
+  padding: 10upx 0 30upx;
+  text-align: center;
+}
+
+.wl-popup-cancel-btn {
+  width: 210upx;
+}
+
 .delivery-quotes-container {
   width: 100%;
   margin-top: 20upx;
@@ -773,4 +905,7 @@ export default {
 .sh-method-btn--long {
   line-height: 32upx;
 }
+.wl-popup-wrap {
+  z-index: 99999;
+}
 </style>