feat：新增自提页面详情

shop/commodity/components/fillLogisticsInfo.vue

@@ -1,133 +1,140 @@
 <template>
-	<view class="logistics-information">
-		 <view class="logistics-information__text">填写物流信息</view>
-		 <view class="logistics-information__form">
-		 	<view class="form_item">
-				<view class="form_item--left">
-					物流单号
-				</view>
-				<view class="form_item--right">
-					<view class="upop">
-						<input type="text" class="title upop_input" placeholder="请手动输入或扫描二维码"/>
-						<image src="/static/images/new_ui/qcode.png" mode="" class="image-box" @click="handleQrcode"></image>
-					</view>
-				</view>
-			</view>
-		 	<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>
-		 </view>
-		 <popupSelectVue ref="popup" :value.sync="logisticsValue" @tabs="handleClick"/>
-	</view>
+  <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>
+    </view>
+    <popupSelectVue
+      ref="popup"
+      :value.sync="logisticsValue"
+      @tabs="handleClick"
+    />
+  </view>
 </template>
 
 <script>
-	import popupSelectVue from './popupSelect.vue';
-	export default {
-		components:{popupSelectVue},
-		data() {
-			return {
-				logisticsValue:"",//物流
-				logisticsLabel:""
-			}
-		},
-		methods: {
-			handleQrcode(){
-				console.log("")
-			},
-			handleSelect(){
-				this.$refs.popup.open()
-			},
-			handleClick({selected,item,index}){
-				this.logisticsValue = selected
-				this.logisticsLabel = item.text
-				console.log(selected,item,index)
-			}
-		},
-		computed:{
-			logistics(){
-				return this.logisticsLabel || "请选择物流公司"
-			}
-		}
-	}
+import popupSelectVue from "./popupSelect.vue";
+import reInputItemVue from "./reInputItem/reInputItem.vue";
+export default {
+  components: { popupSelectVue ,reInputItemVue},
+  data() {
+    return {
+      logisticsValue: "", //物流
+      logisticsLabel: "",
+    };
+  },
+  methods: {
+    handleQrcode() {
+      console.log("handleQrcode");
+    },
+	changeInput(val){
+		console.log(val,"物流单号")
+	},
+    handleSelect() {
+      this.$refs.popup.open();
+    },
+    handleClick({ selected, item, index }) {
+      this.logisticsValue = selected;
+      this.logisticsLabel = item.text;
+      console.log(selected, item, index);
+    },
+  },
+  computed: {
+    logistics() {
+      return this.logisticsLabel || "请选择物流公司";
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.logistics-information{
-	background: #FFFFFF;
-	 border-radius: 16rpx;
-    padding: 26rpx 21rpx 10rpx 32rpx;
-	  display: flex;
-	  flex-direction: column;
-	  &__text{
-        font-weight: 500;
+.logistics-information {
+  background: #ffffff;
+  border-radius: 16rpx;
+  padding: 26rpx 21rpx 10rpx 32rpx;
+  display: flex;
+  flex-direction: column;
+  &__text {
+    font-weight: 500;
+    font-size: 30rpx;
+    color: #333333;
+    margin-bottom: 10rpx;
+    user-select: none;
+  }
+  &__form {
+    .form_item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 100rpx;
+      border-bottom: 2rpx solid #e5e5e5;
+      &--left {
+        width: 120rpx;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
         font-size: 30rpx;
         color: #333333;
-	    margin-bottom:10rpx ;
-	    user-select: none;
-	  }
-	  &__form{
-		  .form_item{
-			  display: flex;
-			  align-items: center;
-			  justify-content: space-between;
-			  height: 100rpx;
-			  border-bottom: 2rpx solid  #E5E5E5;
-			  &--left{
-				  width: 120rpx;
-				  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;
-			  }
-		  }
-	  }
+        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/orderList/orderListCard.vue

@@ -77,15 +77,18 @@
 		 </view>
 		</view>
 	   <view class="order-list-btn">
-		<view v-if="itemProduct.status=='0'" class="btn-list" @click="handleSendOutGoods">
+		<view v-if="itemProduct.status=='0'" class="btn-list" @click="handleSendOutGoods(itemProduct,'sendGoods')">
 	    	立即发货
 	    </view>
-		<!-- <view  class="btn-list" @click="handleSendOutGoods">
+		<view  class="btn-list" @click="handleSendOutGoods(itemProduct,'delivered')">
 			已送达
 		</view>
-		<view  class="btn-list" @click="handleSendOutGoods">
+		<view  class="btn-list" @click="handleSendOutGoods(itemProduct,'logistics')">
 			查看物流
-		</view> -->
+		</view>
+		<view  class="btn-list" @click="handleSendOutGoods(itemProduct,'pickup')">
+			立即自提
+		</view>
 		</view>
 	</view>
 </template>
@@ -118,8 +121,8 @@
 			}
 		},
 		methods:{
-			handleSendOutGoods(){
-				this.$emit("handleSendOutGoods",this.item)
+			handleSendOutGoods(item,type){
+				this.$emit("handleSendOutGoods",item,type)
 			},
 			getDataFormatValue(data,type){
 				console.log(this.item,"item======item")

shop/commodity/components/reInputItem/reInputItem.vue

@@ -0,0 +1,101 @@
+
+<template>
+  <view class="form_item">
+    <view class="form_item--left">
+      {{ name }}
+    </view>
+    <view class="form_item--right">
+      <view class="upop">
+        <input
+          type="text"
+           class="title upop_input"
+		   v-model="valueData"
+          :placeholder="placeholder"
+		  @input="changeInput"
+        />
+		<slot name="next"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      default: "自提码",
+    },
+    placeholder: {
+      type: String,
+      default: "请输入自提码",
+    },
+  },
+  data() {
+    return {
+		valueData:""
+	};
+  },
+  methods:{
+	  changeInput(){
+		  this.$emit("change",this.valueData)
+	  }
+  }
+};
+</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 {
+    width: 120rpx;
+    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/shipmentGoodsCard.vue

@@ -1,7 +1,7 @@
 <template>
 	
 	<view class="card-wrapper">
-	   <view class="card-wrapper__text">发货商品</view>
+	   <view class="card-wrapper__text">{{title}}</view>
 	   <view class="card-wrapper__address">
 		   北京市通州区经开壹中心14号楼9层北京市通州区经开壹中心14号楼9层
 	   </view>
@@ -24,6 +24,12 @@
 
 <script>
 	export default {
+		props:{
+			title:{
+				type:String,
+				default:"发货商品"
+			}
+		},
 		data() {
 			return {
 				showDetailInfo:false,

shop/commodity/order.vue

@@ -1,18 +1,6 @@
 <template>
 	<view class="order">
-		<view class="order-header">
-			<view class="order-header-text">
-				<view class="order-header-text-neishi" @click="topgi">
-					<view class="order-header-text-icon">
-						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
-						</image>
-					</view>
-				</view>
-				<view class="order-header-text-title">
-					订单列表
-				</view>
-			</view>
-		</view>
+		<headersVue @headerJump="topgi" headerTitle="订单列表"/>
 		<view class="order-list-filter-wrapper">
 			<view class="order-search_customs">
 				<searchVue @search="search"></searchVue>
@@ -49,9 +37,10 @@
 	import tabsVue from '../components/tabs/tabs/tabs.vue'
 	import orderListCardVue from './components/orderList/orderListCard.vue'
 	import searchVue from './components/search/search.vue'
+	import headersVue from '../components/headers/headers.vue'
 	import {listData} from "./mockData.js"
 	export default {
-		components:{emptyDataVue,tabsVue,orderListCardVue,searchVue},
+		components:{emptyDataVue,tabsVue,orderListCardVue,searchVue,headersVue},
 		data() {
 			return {
 				listMock:[],
@@ -166,10 +155,19 @@
 			search(val){
 				console.log(val,"搜索")
 			},
-			handleSendOutGoods(v){
+			handleSendOutGoods(v,type){
 				console.log("發貨",v)
+				const url = {
+					"sendGoods":`./sendoutgoods?order_id=${v.order_id}&status=${v.status}&indexs=${this.indexs}&goodsCustomType=${type}`,//立即发货
+					"delivered":``,//已送达
+					"logistics":``,//查看物流
+					"pickup":`./sendoutgoods?order_id=${v.order_id}&status=${v.status}&indexs=${this.indexs}&goodsCustomType=${type}`,//立即自提
+				}
+				let redirectToUrl = url[type] || url["logistics"]
+				console.log(redirectToUrl,"redirectToUrl")
+				console.log(type,"type")
 				uni.redirectTo({
-					url: './sendoutgoods?order_id=' + v.order_id + "&status=" + v.status + "&indexs=" + this.indexs
+					url: redirectToUrl
 				});
 			},
 			// 正向订单列表
@@ -246,47 +244,6 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-
-		.order-header {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 111;
-			width: 100%;
-			// height: 176rpx;
-			background: #FFFFFF;
-			display: flex;
-			padding-left:20rpx;
-            white-space: nowrap;
-			.order-header-text {
-				width: 686rpx;
-				font-size: 36rpx;
-				font-weight: 500;
-				color: #333333;
-				display: flex;
-				// margin-top: 107rpx;
-				padding:30rpx 0 20rpx;
-				align-items: center;
-
-				.order-header-text-neishi {
-					width: 45rpx;
-					height: 45rpx;
-					margin-right: 17rpx;
-
-					.order-header-text-icon {
-						width: 36rpx;
-						height: 36rpx;
-						margin-top: 2rpx;
-
-						image {
-							width: 100%;
-							height: 100%;
-						}
-					}
-				}
-			}
-		}
-        
 		.order-nbeirong {
 			width: 686rpx;
 			height: 30rpx;

shop/commodity/sendoutgoods.vue

@@ -1,24 +1,14 @@
 <template>
 	<view class="order-send-out-goods">
-		<view class="order-send-out-goods-header">
-			<view class="order-send-out-goods-header-text">
-				<view class="order-send-out-goods-header-text-neishi" @click="topgi">
-					<view class="order-send-out-goods-header-text-neishi-icon">
-						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
-						</image>
-					</view>
-				</view>
-				<view class="order-send-out-goods-header-text-title">
-					发货
-				</view>
-			</view>
-		</view>
+		<headersVue @headerJump="topgi" :header-title="headerTitle"></headersVue>
 		<view class="order-send-out-goods__content">
-			<shipmentGoodsCardVue />
+			<shipmentGoodsCardVue :title="shipmentGoodsTitle"/>
 			<orderDetailSendCardVue class="custom_class"/>
-			<fillLogisticsInfoVue 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">发货</button>
+			  <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>
@@ -28,19 +18,27 @@
 	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},
+		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(){
@@ -64,49 +62,6 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		// 头部 start 
-		&-header {
-			position: fixed;
-			top: 0;
-			left: 0;
-			z-index: 111;
-			width: 100%;
-			// height: 176rpx;
-			background: #FFFFFF;
-			display: flex;
-			// justify-content: center;
-			// padding-left:20rpx;
-		    white-space: nowrap;
-			&-text {
-				width: 686rpx;
-				font-size: 36rpx;
-				font-weight: 500;
-				color: #333333;
-				display: flex;
-				// margin-top: 107rpx;
-				padding:30rpx 0 20rpx;
-				align-items: center;
-		
-				&-neishi {
-					width: 45rpx;
-					height: 45rpx;
-					margin-right: 17rpx;
-		
-					&-icon {
-						width: 36rpx;
-						height: 36rpx;
-						margin-top: 2rpx;
-		
-						image {
-							width: 100%;
-							height: 100%;
-						}
-					}
-				}
-			}
-		}
-	   // 头部 end
-	
 	&__content{
 		width: 100%;
 		margin: 130rpx 0 50rpx;
@@ -130,6 +85,11 @@
 	
 	}
 	
+	
+	.inputInfo{
+		margin-top:26rpx;
+		padding:0 26rpx;
+	}
 
 
 </style>

shop/components/headers/headers.vue

@@ -0,0 +1,81 @@
+<template>
+		<view class="common-header">
+			<view class="common-header-text">
+				<view class="common-header-text-neishi" @click="topgi">
+					<view class="common-header-text-neishi-icon">
+						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
+						</image>
+					</view>
+				</view>
+				<view class="common-header-text-title">
+					{{headerTitle}}
+				</view>
+			</view>
+		</view>
+</template>
+
+<script>
+	export default {
+		props:{
+			headerTitle:{
+				type:String,
+				default:"发货"
+			}
+		},
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			topgi(){
+				this.$emit("headerJump")
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+		// 头部 start 
+		.common-header {
+			position: fixed;
+			top: 0;
+			left: 0;
+			z-index: 111;
+			width: 100%;
+			// height: 176rpx;
+			background: #FFFFFF;
+			display: flex;
+			// justify-content: center;
+			padding-left:20rpx;
+		    white-space: nowrap;
+			&-text {
+				width: 686rpx;
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #333333;
+				display: flex;
+				// margin-top: 107rpx;
+				padding:30rpx 0 20rpx;
+				align-items: center;
+		
+				&-neishi {
+					width: 45rpx;
+					height: 45rpx;
+					margin-right: 10rpx;
+		
+					&-icon {
+						width: 36rpx;
+						height: 36rpx;
+						margin-top: 2rpx;
+		
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+				}
+			}
+		}
+	   // 头部 end
+</style>