feat:新增送货页面逻辑

shop/commodity/components/fillLogisticsInfo.vue

@@ -2,55 +2,39 @@
   <view class="logistics-information">
     <view class="logistics-information__text">填写物流信息</view>
     <view class="logistics-information__form">
-	  <reInputItemVue 
-	  placeholder="请手动输入或扫描二维码"
-	   name="物流单号"
-	   @change="changeInput"
-	   >
-		  <image
-		    slot="next"
-		    src="/static/images/new_ui/qcode.png"
-		    mode=""
-		    class="image-box"
-		    @click="handleQrcode"
-		  ></image>
-	  </reInputItemVue>
-      <view class="form_item">
-        <view class="form_item--left"> 物流公司 </view>
-        <view class="form_item--right">
-          <view class="upop" @click="handleSelect">
-            <view class="title xcv">{{ logistics }}</view>
-            <image src="/static/images/new_ui/arrow-right.png" mode=""></image>
-          </view>
-        </view>
-      </view>
+      <reInputItemVue
+        placeholder="请手动输入或扫描二维码"
+        name="物流单号"
+        @change="changeInput"
+      >
+        <image
+          slot="next"
+          src="/static/images/new_ui/qcode.png"
+          mode=""
+          class="image-box"
+          @click="handleQrcode"
+        ></image>
+      </reInputItemVue>
+      <popupSelectItemVue @click-tabs="handleClick"></popupSelectItemVue>
     </view>
-    <popupSelectVue
-      ref="popup"
-      :value.sync="logisticsValue"
-      @tabs="handleClick"
-    />
   </view>
 </template>
 
 <script>
-import popupSelectVue from "./popupSelect.vue";
 import reInputItemVue from "./reInputItem/reInputItem.vue";
+import popupSelectItemVue from "./popupSelectItem/popupSelectItem.vue";
 export default {
-  components: { popupSelectVue ,reInputItemVue},
+  components: { reInputItemVue, popupSelectItemVue },
   data() {
-    return {
-      logisticsValue: "", //物流
-      logisticsLabel: "",
-    };
+    return {};
   },
   methods: {
     handleQrcode() {
       console.log("handleQrcode");
     },
-	changeInput(val){
-		console.log(val,"物流单号")
-	},
+    changeInput(val) {
+      console.log(val, "物流单号");
+    },
     handleSelect() {
       this.$refs.popup.open();
     },

shop/commodity/components/popupSelectItem/popupSelectItem.vue

@@ -0,0 +1,144 @@
+<template>
+      <view class="form_item">
+        <view class="form_item--left"> {{name}} </view>
+        <view class="form_item--right">
+          <view class="upop" @click="handleSelect">
+            <view class="title xcv">{{ logistics }}</view>
+            <image src="/static/images/new_ui/arrow-right.png" mode=""></image>
+          </view>
+        </view>
+		<popupSelectVue
+		  ref="popup"
+		  :value.sync="logisticsValue"
+		  :selectData="selectData"
+		  @tabs="handleClick"
+		  :title="title"
+		  
+		/>
+      </view>
+</template>
+
+<script>
+	import popupSelectVue from '../popupSelect.vue';
+	export default {
+		components: { popupSelectVue },
+		props: {
+		  name: {
+		    type: String,
+		    default: "物流公司",
+		  },
+		  defaultLabel:{
+			  type: String,
+			  default: "请选择物流公司",
+		  },
+		  title: {
+		        type: String,
+		        default: "物流公司信息",
+		      },
+		      value: {
+		        type: [String, Number],
+		        default: "",
+		      },
+		  	selectData:{
+		  		type:Array,
+		  		default:()=>{
+		  			return [
+		    { value: 0, text: "顺丰速运", code: "SF" },
+		    { value: 1, text: "中通快递", code: "ZTO" },
+		    { value: 2, text: "韵达快递", code: "YUNDA" },
+		    { value: 3, text: "申通快递", code: "STO" },
+		    { value: 4, text: "EMS邮政", code: "EMS" },
+		    { value: 5, text: "圆通速递", code: "YTO" },
+		    { value: 6, text: "DHL国际", code: "DHL" },
+		    { value: 7, text: "京东物流", code: "JD" },
+		    { value: 8, text: "FedEx联邦", code: "FDX" },
+		    { value: 9, text: "UPS联合包裹", code: "UPS" },
+		    { value: 10, text: "德邦快递", code: "DEPPON" },
+		    { value: 11, text: "百世快递", code: "BEST" },
+		    { value: 12, text: "极兔速递", code: "J&T" },
+		    { value: 13, text: "TNT快递", code: "TNT" },
+		    { value: 14, text: "跨越速运", code: "KYE" }
+		  ]
+		  		}
+		  	}
+		},
+		data() {
+			return {
+				logisticsValue: "", //物流
+				logisticsLabel:""
+				
+			};
+		},
+		methods:{
+			handleClick({ selected, item, index }) {
+			  this.logisticsValue = selected;
+			  this.logisticsLabel = item.text;
+			  this.$emit("click-tabs",{ selected, item, index })
+			},
+			handleSelect() {
+			  this.$refs.popup.open();
+			},
+		},
+		computed: {
+		  logistics() {
+		    return this.logisticsLabel || this.defaultLabel;
+		  },
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+.form_item {
+  background: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100rpx;
+  // border-bottom: 2rpx solid #e5e5e5;
+  &--left {
+    max-width: 200rpx;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 30rpx;
+    color: #333333;
+    line-height: 30rpx;
+  }
+  &--right {
+    flex: 1;
+    padding-left: 50rpx;
+    padding-right: 12rpx;
+    text-align: right;
+    .title {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #999999;
+    }
+    .upop {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: flex-end;
+      image {
+        width: 30rpx;
+        height: 30rpx;
+        margin-left: 5rpx;
+      }
+      .image-box {
+        width: 40rpx;
+        height: 38rpx;
+      }
+    }
+    .upop_input {
+      padding: 15rpx 10rpx;
+      flex: 1;
+    }
+    .xcv {
+      flex: 1;
+    }
+  }
+  &:last-child {
+    border-bottom: none;
+  }
+}
+</style>

shop/commodity/components/reInputItem/reInputItem.vue

@@ -8,12 +8,12 @@
       <view class="upop">
         <input
           type="text"
-           class="title upop_input"
-		   v-model="valueData"
+          class="title upop_input"
+          v-model="valueData"
           :placeholder="placeholder"
-		  @input="changeInput"
+          @input="changeInput"
         />
-		<slot name="next"></slot>
+        <slot name="next"></slot>
       </view>
     </view>
   </view>
@@ -33,14 +33,14 @@ export default {
   },
   data() {
     return {
-		valueData:""
-	};
+      valueData: "",
+    };
+  },
+  methods: {
+    changeInput() {
+      this.$emit("change", this.valueData);
+    },
   },
-  methods:{
-	  changeInput(){
-		  this.$emit("change",this.valueData)
-	  }
-  }
 };
 </script>
 
@@ -53,7 +53,7 @@ export default {
   height: 100rpx;
   // border-bottom: 2rpx solid #e5e5e5;
   &--left {
-    width: 120rpx;
+    max-width: 200rpx;
     font-family: PingFangSC, PingFang SC;
     font-weight: 400;
     font-size: 30rpx;

shop/commodity/order.vue

@@ -159,8 +159,9 @@
 				console.log("發貨",v)
 				const url = {
 					"sendGoods":`./sendoutgoods?order_id=${v.order_id}&status=${v.status}&indexs=${this.indexs}&goodsCustomType=${type}`,//立即发货
-					"delivered":``,//已送达
+					"delivered":`./sendoutgoods?order_id=${v.order_id}&status=${v.status}&indexs=${this.indexs}&goodsCustomType=deliverGoods`,//已送达
 					"logistics":``,//查看物流
+					"deliverGoods":`./sendoutgoods?order_id=${v.order_id}&status=${v.status}&indexs=${this.indexs}&goodsCustomType=${type}`,//送貨
 					"pickup":`./sendoutgoods?order_id=${v.order_id}&status=${v.status}&indexs=${this.indexs}&goodsCustomType=${type}`,//立即自提
 				}
 				let redirectToUrl = url[type] || url["logistics"]

shop/commodity/sendoutgoods.vue

@@ -1,95 +1,157 @@
 <template>
-	<view class="order-send-out-goods">
-		<headersVue @headerJump="topgi" :header-title="headerTitle"></headersVue>
-		<view class="order-send-out-goods__content">
-			<shipmentGoodsCardVue :title="shipmentGoodsTitle"/>
-			<orderDetailSendCardVue class="custom_class"/>
-			<fillLogisticsInfoVue class="custom_class" v-if="goodsCustomType==='sendGoods'"/>
-			<reInputItemVue v-if="goodsCustomType==='pickup'" class="inputInfo" ></reInputItemVue>
-			<view class="btn-box">
-			  <button type="primary" class="send-goods" v-if="goodsCustomType==='sendGoods'">发货</button>
-			  <button type="primary" class="send-goods" v-if="goodsCustomType==='pickup'">自提</button>
-			</view>
-		</view>
-	</view>
+  <view class="order-send-out-goods">
+    <headersVue @headerJump="topgi" :header-title="headerTitle"></headersVue>
+    <view class="order-send-out-goods__content">
+      <shipmentGoodsCardVue :title="shipmentGoodsTitle" />
+      <orderDetailSendCardVue class="custom_class" />
+      <fillLogisticsInfoVue
+        class="custom_class"
+        v-if="goodsCustomType === 'sendGoods'"
+      />
+      <reInputItemVue
+        v-if="goodsCustomType === 'pickup'"
+        class="inputInfo"
+      ></reInputItemVue>
+	  <reInputItemVue
+	    v-if="goodsCustomType === 'pickup'"
+	    class="inputInfo"
+	  ></reInputItemVue>
+	  <popupSelectItemVue  
+	  v-if="goodsCustomType === 'deliverGoods'"
+	    class="inputInfo"
+		defaultLabel="请选择送货人员"
+		name="送货人员信息"
+		title="送货人员信息"
+		:selectData="selectData"
+		@click-tabs="clickTabs"
+		></popupSelectItemVue>
+      <view class="btn-box">
+        <button
+          type="primary"
+          class="send-goods"
+          v-if="goodsCustomType === 'sendGoods'"
+        >
+          发货
+        </button>
+        <button
+          type="primary"
+          class="send-goods"
+          v-if="goodsCustomType === 'pickup'"
+        >
+          自提
+        </button>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	import shipmentGoodsCardVue from './components/shipmentGoodsCard.vue'
-	import orderDetailSendCardVue from './components/orderDetailSendCard.vue'
-	import fillLogisticsInfoVue from './components/fillLogisticsInfo.vue'
-	import headersVue from '../components/headers/headers.vue'
-	import reInputItemVue from './components/reInputItem/reInputItem.vue'
-	export default {
-		components:{shipmentGoodsCardVue,orderDetailSendCardVue,fillLogisticsInfoVue,headersVue,reInputItemVue},
-		data() {
-			return {
-				indexs: '',
-				status: '',
-				order_id: '', //订单ID
-				headerTitle:"发货",
-				shipmentGoodsTitle:"发货商品",
-				goodsCustomType:"sendGoods"
-			}
-		},
-		onLoad(e) {
-			this.order_id = e.order_id
-			this.indexs = e.indexs
-			this.status = e.status
-			this.goodsCustomType = e.goodsCustomType
-			this.headerTitle = this.goodsCustomType==="sendGoods"?"发货":'自提'
-			this.shipmentGoodsTitle = this.goodsCustomType==="sendGoods"?"发货商品":'自提商品'
-		},
-		methods: {
-			topgi(){
-               uni.redirectTo({
-					url: './order?status=' + this.status + '&index=' + this.indexs
-					// url: './order'
-				});
-			}
-		}
+import shipmentGoodsCardVue from "./components/shipmentGoodsCard.vue";
+import orderDetailSendCardVue from "./components/orderDetailSendCard.vue";
+import fillLogisticsInfoVue from "./components/fillLogisticsInfo.vue";
+import headersVue from "../components/headers/headers.vue";
+import reInputItemVue from "./components/reInputItem/reInputItem.vue";
+import popupSelectItemVue from "./components/popupSelectItem/popupSelectItem.vue";
+export default {
+  components: {
+    shipmentGoodsCardVue,
+    orderDetailSendCardVue,
+    fillLogisticsInfoVue,
+    headersVue,
+    reInputItemVue,
+	popupSelectItemVue
+  },
+  data() {
+    return {
+		selectData:[
+  { value: 0, text: "张伟" },
+  { value: 1, text: "王芳" },
+  { value: 2, text: "李强" },
+  { value: 3, text: "刘洋" },
+  { value: 4, text: "陈静" },
+  { value: 5, text: "杨勇" },
+  { value: 6, text: "黄丽" },
+  { value: 7, text: "周杰" },
+  { value: 8, text: "徐敏" },
+  { value: 9, text: "吴涛" },
+  { value: 10, text: "孙莉" },
+  { value: 11, text: "马强" },
+  { value: 12, text: "胡月" },
+  { value: 13, text: "林浩" },
+  { value: 14, text: "何婷" }
+],
+      indexs: "",
+      status: "",
+      order_id: "", //订单ID
+      headerTitle: "发货",
+      shipmentGoodsTitle: "发货商品",
+      goodsCustomType: "sendGoods",
+      headerTitleMap: {
+        deliverGoods: "送货",
+        sendGoods: "发货",
+        pickup: "自提",
+      },
+      shipmentGoodsTitleMap: {
+        deliverGoods: "发货商品",
+        sendGoods: "发货商品",
+        pickup: "自提商品",
+      },
+    };
+  },
+  onLoad(e) {
+    this.order_id = e.order_id;
+    this.indexs = e.indexs;
+    this.status = e.status;
+    this.goodsCustomType = e.goodsCustomType;
+    this.headerTitle = this.headerTitleMap[this.goodsCustomType];
+    this.shipmentGoodsTitle = this.shipmentGoodsTitleMap[this.goodsCustomType];
+  },
+  methods: {
+    topgi() {
+      uni.redirectTo({
+        url: "./order?status=" + this.status + "&index=" + this.indexs,
+        // url: './order'
+      });
+    },
+	clickTabs({ selected, item, index }){
+		console.log("clickTabs", selected, item, index)
 	}
+  },
+};
 </script>
 <style>
-	page {
-		background-color: #F7F8FC;
-	}
+page {
+  background-color: #f7f8fc;
+}
 </style>
 <style scoped lang="scss">
-	.order-send-out-goods{
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-	&__content{
-		width: 100%;
-		margin: 130rpx 0 50rpx;
-		.btn-box{
-			width: 100%;
-			position: fixed;
-			
-           bottom:30rpx;
-		   .send-goods{
-			   margin:0 32rpx;
-		   }
-		}
-		
-	}
-	
-	.custom_class{
-		margin-top: 26rpx;
-	}
-	
-	
-	
-	}
-	
-	
-	.inputInfo{
-		margin-top:26rpx;
-		padding:0 26rpx;
-	}
+.order-send-out-goods {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  &__content {
+    width: 100%;
+    margin: 130rpx 0 50rpx;
+    .btn-box {
+      width: 100%;
+      position: fixed;
+
+      bottom: 30rpx;
+      .send-goods {
+        margin: 0 32rpx;
+      }
+    }
+  }
 
+  .custom_class {
+    margin-top: 26rpx;
+  }
+}
 
+.inputInfo {
+  margin-top: 26rpx;
+  padding: 0 26rpx;
+}
 </style>