Просмотр исходного кода

feat:新增部分交互逻辑

storeBelieveInLight 1 год назад
Родитель
Сommit
2d3d440c27

+ 162 - 12
shop/commodity/components/orderDetail/logisticInfocardJianjie.vue

@@ -1,20 +1,170 @@
1 1
 <template>
2
-	<view>
3
-		订单详情物流简洁卡片
4
-	</view>
2
+  <view class="details-back-url-card" @click="goToLogistic">
3
+    <view class="order-list-yi-bot-xiangxi custom_top" v-if="true">
4
+      <view class="order-list-yi-bot-xiangxier custom_center">
5
+        <view class="dot-line"></view>
6
+      </view>
7
+      <view class="order-list-yi-bot-xadasrfe">
8
+        <view class="order-list-yi-bot-xadasrfe-top"> 运输中 </view>
9
+		<view class="order-list-yi-bot-xadasrfe-bot custom-txt">
10
+		  <view class=""> 圆通快递 </view>
11
+		  <view class="" style="margin-left: 32rpx">
12
+		  YT1234567890987 
13
+		  </view>
14
+		</view>
15
+      </view>
16
+	  <uni-icons type="right" size="20" color="#333333" class="arrow_right_log"></uni-icons>
17
+    </view>
18
+    <view class="order-list-yi-bot-xiangxi">
19
+      <view class="order-list-yi-bot-xiangxier">
20
+        <image
21
+          src="https://cdn.bjtdba.com/vod/image/2022-08-13/20220813164638215.png"
22
+          mode="widthFix"
23
+        >
24
+        </image>
25
+      </view>
26
+      <view class="order-list-yi-bot-xadasrfe">
27
+        <view class="order-list-yi-bot-xadasrfe-top">
28
+          北京市通州区经开壹中心14号楼9层北京市通州区经开壹中心14号楼9层
29
+        </view>
30
+        <view class="order-list-yi-bot-xadasrfe-bot">
31
+          <view class=""> 郭郭备份 </view>
32
+          <view class="" style="margin-left: 32rpx">
33
+            {{ phone_user }}
34
+          </view>
35
+        </view>
36
+      </view>
37
+    </view>
38
+  </view>
5 39
 </template>
6 40
 
7 41
 <script>
8
-	//订单详情物流简洁卡片
9
-	export default {
10
-		data() {
11
-			return {
12
-				
13
-			};
14
-		}
15
-	}
42
+//订单详情物流简洁卡片user_phone
43
+import { MaskRules } from "@/utils/index.js";
44
+export default {
45
+  data() {
46
+    return {
47
+      user_phone: "18533332222"
48
+    };
49
+  },
50
+  methods:{
51
+	  goToLogistic(){
52
+		  console.log("去往物流信息")
53
+		  this.$emit("goToLogistic")
54
+		  // uni.redirectTo({
55
+		  // 	url: './order?status=' + this.status + '&index=' + this.indexs
56
+		  // 	// url: './order'
57
+		  // });
58
+	  }
59
+  },
60
+  computed: {
61
+    phone_user() {
62
+      return MaskRules.mobile(this.user_phone);
63
+    }
64
+  }
65
+};
16 66
 </script>
17 67
 
18
-<style lang="scss">
68
+<style lang="scss" scoped>
69
+.details-back-url-card {
70
+  width: calc(100% - 110rpx);
71
+  padding: 22rpx 26rpx 0rpx;
72
+  min-height: 176rpx;
73
+  background: #ffffff;
74
+  border-radius: 16rpx;
75
+  display: flex;
76
+  flex-direction: column;
77
+  justify-content: center;
19 78
 
79
+  .order-list-yi-bot-xiangxi {
80
+	position: relative;
81
+    display: flex;
82
+    align-items: flex-start;
83
+	&.custom_top{
84
+		padding-bottom:32rpx;
85
+	}
86
+    .arrow_right_log{
87
+		position: absolute;
88
+		width: 28rpx;
89
+		height: 28rpx;
90
+		right:0;
91
+		top:20rpx;
92
+	}
93
+    &::before {
94
+		content: "";
95
+		position: absolute;
96
+		width: 2rpx;
97
+		height: 73%;
98
+		background: #1f7cff;
99
+		left: 19rpx;
100
+		top: 30rpx;
101
+		z-index: 1;
102
+	}
103
+    &:last-child {
104
+      padding-bottom: 0rpx;
105
+      &::before {
106
+        display: none;
107
+      }
108
+    }
109
+    .order-list-yi-bot-xiangxier {
110
+      width: 38rpx;
111
+      height: 38rpx;
112
+      &.custom_center {
113
+        display: flex;
114
+        align-items: center;
115
+        justify-content: center;
116
+      }
117
+      image {
118
+        width: 100%;
119
+        height: 100%;
120
+		z-index: 2;
121
+      }
122
+      .dot-line {
123
+        width: 21rpx;
124
+        height: 21rpx;
125
+        border: 2rpx solid #1f7cff;
126
+        border-radius: 50%;
127
+		z-index: 2;
128
+      }
129
+    }
130
+
131
+    .order-list-yi-bot-xadasrfe {
132
+      width: 544rpx;
133
+      height: 100%;
134
+      margin-left: 16rpx;
135
+      display: flex;
136
+      flex-direction: column;
137
+      justify-content: space-between;
138
+      align-items: flex-start;
139
+	 &:last-child{
140
+		  padding-bottom:20rpx;
141
+	 }
142
+
143
+      .order-list-yi-bot-xadasrfe-top {
144
+        width: 100%;
145
+        font-size: 26rpx;
146
+        font-weight: 600;
147
+        color: #333333;
148
+        display: -webkit-box;
149
+        -webkit-box-orient: vertical;
150
+        -webkit-line-clamp: 2;
151
+        overflow: hidden;
152
+        padding-bottom: 5rpx;
153
+      }
154
+
155
+      .order-list-yi-bot-xadasrfe-bot {
156
+        font-size: 28rpx;
157
+        font-weight: 400;
158
+        color: #999999;
159
+        display: flex;
160
+		word-break: break-all;
161
+		&.custom-txt{
162
+			font-weight: 400;
163
+			font-size: 28rpx;
164
+			color: #333333;
165
+		}
166
+      }
167
+    }
168
+  }
169
+}
20 170
 </style>

+ 287 - 11
shop/commodity/components/orderDetail/orderCardDetailInfo.vue

@@ -1,20 +1,296 @@
1 1
 <template>
2
-	<view>
3
-		
4
-	</view>
2
+		<view class="details-xiangqing">
3
+			<view class="details-xiangqing-top">
4
+					<view class="details-xiangqing-top-let">
5
+						<image :src="orderProduct.mer_avatar" mode="widthFix"></image>
6
+					</view>
7
+					<view class="details-xiangqing-top-in">
8
+						{{orderProduct.mer_name}}
9
+					</view>
10
+					<view class="details-xiangqing-top-rigt">
11
+						  <uni-icons type="right" size="26" color="#999999" class="arrow_right_log"></uni-icons>
12
+						</image>
13
+					</view>
14
+				</view>
15
+							<view class="details-xiangqing-niri">
16
+				<view class="order-list-yi-in-neibu"  v-for="(item,index) in orderProduct.procductList" :key="index">
17
+					<view class="order-list-yi-in-neibu-left">
18
+						<view class="order-list-yi-in-neibu-left-img">
19
+							<image :src="item.image" mode="widthFix"></image>
20
+						</view>
21
+						<view class="order-list-yi-in-neibu-left-url">
22
+							<view class="order-list-yi-in-neibu-left-url-top">
23
+								{{item.store_name}}
24
+							</view>
25
+						</view>
26
+					</view>
27
+					<view class="order-list-yi-in-neibu-right">
28
+						<view class="order-list-yi-in-neibu-right-im">
29
+							¥{{item.pay_price}}
30
+						</view>
31
+						<view class="order-list-yi-in-neibu-right-in">
32
+							共{{item.cart_num}}件
33
+						</view>
34
+					</view>
35
+				</view>
36
+				
37
+				<view v-if="orderProduct.status=='0'" class="btn-cls" @click="sendGoods">
38
+					立即发货
39
+				</view>
40
+				<view class="details-xiangqing-shujussss">
41
+					<view class="details-xiangqing-shujussss-yis">
42
+						<view class="">
43
+							商品总额
44
+						</view>
45
+						<view class="">
46
+							+¥{{orderProduct.pay_price}}
47
+						</view>
48
+					</view>
49
+					<view class="details-xiangqing-shujussss-yis">
50
+						<view class="">
51
+							优惠金额
52
+						</view>
53
+						<view class="">
54
+							-¥0.00
55
+						</view>
56
+					</view>
57
+					<view class="details-xiangqing-shujussss-yis">
58
+						<view class="">
59
+							订单编号
60
+						</view>
61
+						<view class="" @click="handleCopy(orderProduct.order_id)">
62
+							{{orderProduct.order_id}} | 复制
63
+						</view>
64
+					</view>
65
+					<view class="details-xiangqing-shujussss-yis">
66
+						<view class="">
67
+							下单时间
68
+						</view>
69
+						<view class="">
70
+							{{orderProduct.pay_time}}
71
+						</view>
72
+					</view>
73
+					<view class="details-xiangqing-shujussss-yis">
74
+						<view class="">
75
+							支付方式
76
+						</view>
77
+						<view class="">
78
+							{{orderProduct.pay_type}}
79
+						</view>
80
+					</view>
81
+				</view>
82
+			</view>
83
+			</view>
5 84
 </template>
6 85
 
7 86
 <script>
8
-	//订单详情 卡片详细信息
9
-	export default {
10
-		data() {
11
-			return {
12
-				
13
-			};
14
-		}
87
+//订单详情 卡片详细信息
88
+import { copy } from "@/utils/index.js";
89
+export default {
90
+  data() {
91
+    return {
92
+      orderProduct: {
93
+        pay_type: "特殊商户积分",
94
+        mer_name: "北京众兴未来咨询管理有限公司",
95
+        mer_avatar:
96
+          "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png",
97
+        pay_time: "2022-05-01 14:00",
98
+        order_id: "3645657575757483757",
99
+        pay_price: "999.00",
100
+        status: "3",
101
+        procductList: [
102
+          {
103
+            pay_price: "88888",
104
+            cart_num: "10",
105
+            image:
106
+              "https://cdn.bjtdba.com/chuxubao/images/2025-02-10/8198d202502101042344757.png",
107
+            store_name: "三个苹果 纯天然浓缩果蔬汁清汁苹果汁…",
108
+          },
109
+        ],
110
+      },
111
+    };
112
+  },
113
+  
114
+  methods: {
115
+    handleCopy(val) {
116
+      copy(val);
117
+    },
118
+	sendGoods(){
119
+		
15 120
 	}
121
+  },
122
+};
16 123
 </script>
17 124
 
18
-<style lang="scss">
125
+<style lang="scss" scoped>
126
+.btn-cls {
127
+  margin-top: 26rpx;
128
+  width: 142rpx;
129
+  height: 58rpx;
130
+  border-radius: 30rpx;
131
+  border: 1rpx solid #999999;
132
+  font-size: 24rpx;
133
+  font-weight: 400;
134
+  color: #333333;
135
+  text-align: center;
136
+  line-height: 58rpx;
137
+}
138
+.details-xiangqing {
139
+  // width: 686rpx;
140
+  min-height: 719rpx;
141
+  background: #ffffff;
142
+  border-radius: 16px;
143
+  padding:0 20rpx;
144
+  display: flex;
145
+  flex-direction: column;
146
+  align-items: center;
147
+
148
+  .details-xiangqing-top {
149
+    width: 100%;
150
+    // height: 90rpx;
151
+    padding: 32rpx 0 32rpx 0;
152
+    border-bottom: 1rpx solid #e5e5e5;
153
+    display: flex;
154
+    align-items: center;
155
+    color: #333333;
156
+
157
+    .details-xiangqing-top-let {
158
+      width: 32rpx;
159
+      height: 32rpx;
160
+      font-size: 11rpx;
161
+      font-weight: 400;
162
+
163
+      image {
164
+        width: 100%;
165
+        height: 100%;
166
+      }
167
+    }
168
+
169
+    .details-xiangqing-top-in {
170
+      width: 364rpx;
171
+      font-size: 28rpx;
172
+      font-weight: 600;
173
+      overflow: hidden;
174
+      text-overflow: ellipsis;
175
+      white-space: nowrap;
176
+      margin-left: 6rpx;
177
+    }
178
+
179
+    .details-xiangqing-top-rigt {
180
+      width: 36rpx;
181
+      height: 36rpx;
182
+      margin-left: 8rpx;
183
+      .arrow_right_log {
184
+      }
185
+    }
186
+  }
187
+
188
+  .details-xiangqing-niri {
189
+    width: 634rpx;
190
+    // height: 548rpx;
191
+    margin: 26rpx 0 50rpx 0;
192
+    display: flex;
193
+    flex-direction: column;
194
+
195
+    // background-color: orangered;
196
+    .order-list-yi-in-neibu {
197
+      width: 634rpx;
198
+      height: 158rpx;
199
+      display: flex;
200
+      justify-content: space-between;
201
+      align-items: flex-start;
202
+      // background-color: aqua;
203
+      margin: 10rpx 0 10rpx 0;
204
+
205
+      .order-list-yi-in-neibu-left {
206
+        width: 474rpx;
207
+        height: 100%;
208
+        display: flex;
209
+        align-items: flex-start;
210
+        justify-content: space-between;
211
+
212
+        .order-list-yi-in-neibu-left-img {
213
+          width: 158rpx;
214
+          height: 158rpx;
215
+          overflow: hidden;
216
+
217
+          image {
218
+            width: 100%;
219
+            height: 100%;
220
+          }
221
+        }
222
+
223
+        .order-list-yi-in-neibu-left-url {
224
+          width: 290rpx;
225
+          display: flex;
226
+
227
+          .order-list-yi-in-neibu-left-url-top {
228
+            width: 100%;
229
+            font-weight: 400;
230
+            color: #333333;
231
+            font-size: 28rpx;
232
+            display: -webkit-box;
233
+            -webkit-box-orient: vertical;
234
+            -webkit-line-clamp: 2;
235
+            overflow: hidden;
236
+            justify-content: space-between;
237
+          }
238
+
239
+          .order-list-yi-in-neibu-left-url-top-bot {
240
+            width: 100%;
241
+            font-size: 24rpx;
242
+            font-weight: 400;
243
+            color: #666666;
244
+            display: inline-block;
245
+            overflow: hidden;
246
+            text-overflow: ellipsis;
247
+            white-space: nowrap;
248
+          }
249
+        }
250
+      }
251
+
252
+      .order-list-yi-in-neibu-right {
253
+        height: 73rpx;
254
+        font-size: 28rpx;
255
+        font-weight: 500;
256
+        color: #333333;
257
+        display: flex;
258
+        flex-direction: column;
259
+        justify-content: space-between;
260
+        align-items: flex-end;
261
+
262
+        .order-list-yi-in-neibu-right-im {
263
+          font-size: 28rpx;
264
+          font-weight: 500;
265
+          color: #333333;
266
+        }
267
+
268
+        .order-list-yi-in-neibu-right-in {
269
+          font-size: 24rpx;
270
+          font-weight: 400;
271
+          color: #666666;
272
+        }
273
+      }
274
+    }
275
+
276
+    .details-xiangqing-shujussss {
277
+      width: 634rpx;
278
+      height: 340rpx;
279
+      margin-top: 50rpx;
280
+      display: flex;
281
+      flex-direction: column;
282
+      justify-content: space-between;
19 283
 
284
+      .details-xiangqing-shujussss-yis {
285
+        width: 100%;
286
+        display: flex;
287
+        align-items: center;
288
+        justify-content: space-between;
289
+        font-size: 28rpx;
290
+        font-weight: 400;
291
+        color: #333333;
292
+      }
293
+    }
294
+  }
295
+}
20 296
 </style>

+ 202 - 676
shop/commodity/details.vue

@@ -1,685 +1,211 @@
1 1
 <template>
2
-	<view class="details">
3
-		<view class="details-header">
4
-			<view class="details-header-text">
5
-				<view class="details-header-text-neishi">
6
-					<view class="details-header-text-icon" @click="topgi">
7
-						<image src="https://cdn.bjtdba.com/vod/image/2022-08-11/20220811133828415.png" mode="widthFix">
8
-						</image>
9
-					</view>
10
-				</view>
11
-
12
-				<view class="details-header-text-title">
13
-					订单详情
14
-				</view>
15
-			</view>
16
-		</view>
17
-		<view class="details-back">
18
-			<image src="https://cdn.bjtdba.com/vod/image/2022-08-13/20220813171413571.png" mode="widthFix"></image>
19
-			<view class="details-back-biaohsi">
20
-				<view class="details-back-biaohsi-kuan">
21
-					<image src="https://cdn.bjtdba.com/vod/image/2022-08-15/20220815143421834.png" mode="widthFix">
22
-					</image>
23
-				</view>
24
-				<view class="details-back-biaohsi-zhuanbgtia">
25
-					<view class="details-back-biaohsi-zhuanbgtia-top">
26
-						{{orderList.status}}
27
-					</view>
28
-					<view class="details-back-biaohsi-zhuanbgtia-bot">
29
-						等待卖家付款
30
-					</view>
31
-				</view>
32
-			</view>
33
-			<view class="details-back-url">
34
-				<view class="order-list-yi-bot-xiangxi">
35
-					<view class="order-list-yi-bot-xiangxier">
36
-						<image src="https://cdn.bjtdba.com/vod/image/2022-08-13/20220813164638215.png" mode="widthFix">
37
-						</image>
38
-					</view>
39
-					<view class="order-list-yi-bot-xadasrfe">
40
-						<view class="order-list-yi-bot-xadasrfe-top">
41
-							{{orderList.user_address}}
42
-						</view>
43
-						<view class="order-list-yi-bot-xadasrfe-bot">
44
-							<view class="">
45
-								{{orderList.real_name}}
46
-							</view>
47
-							<view class="" style="margin-left: 32rpx;">
48
-								{{orderList.user_phone!=undefined?orderList.user_phone.substr(0, 3) + '****' + orderList.user_phone.substr(7):"..."}}
49
-							</view>
50
-						</view>
51
-					</view>
52
-				</view>
53
-			</view>
54
-		</view>
55
-		<!-- details-xiangqing -->
56
-		<view :class="orderList.status=='待发货'?downP:incrseP">
57
-			<view class="details-xiangqing-top">
58
-				<view class="details-xiangqing-top-let">
59
-					<image :src="orderList.mer_avatar" mode="widthFix"></image>
60
-				</view>
61
-				<view class="details-xiangqing-top-in">
62
-					{{orderList.mer_name}}
63
-				</view>
64
-				<view class="details-xiangqing-top-rigt">
65
-					<image src="https://cdn.bjtdba.com/vod/image/2022-08-15/20220815143434822.png" mode="widthFix">
66
-					</image>
67
-				</view>
68
-			</view>
69
-			<view class="details-xiangqing-niri">
70
-				<view class="order-list-yi-in-neibu"  v-for="(item,index) in orderList.procductList" :key="index">
71
-					<view class="order-list-yi-in-neibu-left">
72
-						<view class="order-list-yi-in-neibu-left-img">
73
-							<image :src="item.image" mode="widthFix"></image>
74
-						</view>
75
-						<view class="order-list-yi-in-neibu-left-url">
76
-							<view class="order-list-yi-in-neibu-left-url-top">
77
-								{{item.store_name}}
78
-							</view>
79
-						</view>
80
-					</view>
81
-					<view class="order-list-yi-in-neibu-right">
82
-						<view class="order-list-yi-in-neibu-right-im">
83
-							¥{{item.pay_price}}
84
-						</view>
85
-						<view class="order-list-yi-in-neibu-right-in">
86
-							共{{item.cart_num}}件
87
-						</view>
88
-					</view>
89
-				</view>
90
-				<view v-if="orderList.status=='待发货'?true:false"
91
-					style="margin-top: 26rpx; width: 142rpx;height: 58rpx;border-radius: 30rpx;border: 1rpx solid #999999;font-size: 24rpx;font-weight: 400;color: #333333;text-align: center;line-height: 58rpx;">
92
-					立即发货
93
-				</view>
94
-				<view class="details-xiangqing-shujussss">
95
-					<view class="details-xiangqing-shujussss-yis">
96
-						<view class="">
97
-							商品总额
98
-						</view>
99
-						<view class="">
100
-							+¥{{orderList.pay_price}}
101
-						</view>
102
-					</view>
103
-					<view class="details-xiangqing-shujussss-yis">
104
-						<view class="">
105
-							优惠金额
106
-						</view>
107
-						<view class="">
108
-							-¥0.00
109
-						</view>
110
-					</view>
111
-					<view class="details-xiangqing-shujussss-yis">
112
-						<view class="">
113
-							订单编号
114
-						</view>
115
-						<view class="" @click="copy(orderList.order_id)">
116
-							{{orderList.order_id}} | 复制
117
-						</view>
118
-					</view>
119
-					<view class="details-xiangqing-shujussss-yis">
120
-						<view class="">
121
-							下单时间
122
-						</view>
123
-						<view class="">
124
-							{{orderList.pay_time}}
125
-						</view>
126
-					</view>
127
-					<view class="details-xiangqing-shujussss-yis">
128
-						<view class="">
129
-							支付方式
130
-						</view>
131
-						<view class="">
132
-							{{orderList.pay_type}}
133
-						</view>
134
-					</view>
135
-				</view>
136
-			</view>
137
-		</view>
138
-	</view>
2
+  <view class="details">
3
+    <headersVue @headerJump="topgi" header-title="订单详情"></headersVue>
4
+    <view class="details-back">
5
+      <image
6
+        src="https://cdn.bjtdba.com/vod/image/2022-08-13/20220813171413571.png"
7
+        mode="widthFix"
8
+      ></image>
9
+      <view class="details-back-biaohsi">
10
+        <view class="details-back-biaohsi-kuan">
11
+          <image
12
+            src="https://cdn.bjtdba.com/vod/image/2022-08-15/20220815143421834.png"
13
+            mode="widthFix"
14
+          >
15
+          </image>
16
+        </view>
17
+        <view class="details-back-biaohsi-zhuanbgtia">
18
+          <view class="details-back-biaohsi-zhuanbgtia-top"> 待发货 </view>
19
+          <view class="details-back-biaohsi-zhuanbgtia-bot">
20
+            等待卖家付款
21
+          </view>
22
+        </view>
23
+      </view>
24
+      <logisticInfocardJianjieVue
25
+        @goToLogistic="goToLogistic"
26
+        class="logistic--wrapper"
27
+      />
28
+    </view>
29
+
30
+    <view class="order-detail-card">
31
+      <orderCardDetailInfoVue />
32
+     <deliverCardItemVue
33
+       class="inputInfo"
34
+       :isBottomMessage="true"
35
+       leftTitle="物流信息有误?"
36
+       rightTitle="更改物流信息"
37
+     />
38
+    </view>
39
+  </view>
139 40
 </template>
140 41
 
141 42
 <script>
142
-	import {
143
-		getOrderDetails
144
-	} from '@/commit/order.js'
145
-	export default {
146
-		data() {
147
-			return {
148
-				order_id: '', //订单ID
149
-				is_limin: true,
150
-				incrseP: 'details-xiangqing',
151
-				downP: 'details-xiangqingsssss',
152
-				orderList: [],
153
-				indexs: '',
154
-				status: ''
155
-			}
156
-		},
157
-		onLoad(e) {
158
-			this.order_id = e.order_id
159
-			this.indexs = e.indexs
160
-			this.status = e.status
161
-			this.getOrderDetails()
162
-		},
163
-		methods: {
164
-			copy(value) {
165
-				uni.setClipboardData({
166
-					data: value,
167
-					success: function() {
168
-						console.log('success');
169
-					}
170
-				})
171
-			},
172
-			// 订单详情页面
173
-			getOrderDetails() {
174
-				getOrderDetails({
175
-					order_id: this.order_id
176
-				}).then(res => {
177
-					if (res.data.status == 200) {
178
-						this.orderList = res.data.data.order
179
-					}
180
-				}, fail => {
181
-					console.log(fail)
182
-				})
183
-			},
184
-			topgi() {
185
-				uni.redirectTo({
186
-					url: './order?status=' + this.status + '&index=' + this.indexs
187
-					// url: './order'
188
-				});
189
-			}
190
-		}
191
-	}
43
+import { getOrderDetails } from "@/commit/order.js";
44
+import headersVue from "../components/headers/headers.vue";
45
+import logisticInfocardJianjieVue from "./components/orderDetail/logisticInfocardJianjie.vue";
46
+import { orderStatus } from "../commodity/orderUtil.js";
47
+import { toQueryString } from "@/utils/index.js";
48
+import deliverCardItemVue from "./components/changeDetailInfo/pendingReceiptGoodsModules/deliverCardItem.vue";
49
+import orderCardDetailInfoVue from "./components/orderDetail/orderCardDetailInfo.vue";
50
+export default {
51
+  components: {
52
+    headersVue,
53
+    //物流jianjiecard
54
+    logisticInfocardJianjieVue,
55
+    //产品信息
56
+    orderCardDetailInfoVue,
57
+	deliverCardItemVue
58
+  },
59
+  data() {
60
+    return {
61
+      order_id: "", //订单ID
62
+      is_limin: true,
63
+      orderList: [],
64
+      indexs: "",
65
+      status: ""
66
+    };
67
+  },
68
+  onLoad(e) {
69
+    this.order_id = e.order_id;
70
+    this.indexs = e.indexs;
71
+    this.status = e.status;
72
+    // this.getOrderDetails()
73
+  },
74
+  methods: {
75
+    goToLogistic() {
76
+      const obj = {
77
+        status: this.status,
78
+        index: this.indexs,
79
+        formType: "detail",
80
+        order_id: this.order_id
81
+      };
82
+      const urlParams = toQueryString(obj);
83
+      uni.redirectTo({
84
+        url: `./logisticsInformationDetail?${urlParams}`
85
+        // url: './order'
86
+      });
87
+    },
88
+    formDataItem(val, type = "status") {
89
+      if (type === "status") {
90
+        return orderStatus(val["status"]);
91
+      } else {
92
+        return val[type] || "";
93
+      }
94
+    },
95
+    copy(value) {
96
+      uni.setClipboardData({
97
+        data: value,
98
+        success: function () {
99
+          console.log("success");
100
+        }
101
+      });
102
+    },
103
+    // 订单详情页面
104
+    getOrderDetails() {
105
+      getOrderDetails({
106
+        order_id: this.order_id
107
+      }).then(
108
+        (res) => {
109
+          if (res.data.status == 200) {
110
+            this.orderList = res.data.data.order;
111
+          }
112
+        },
113
+        (fail) => {
114
+          console.log(fail);
115
+        }
116
+      );
117
+    },
118
+    topgi() {
119
+      uni.redirectTo({
120
+        url: "./order?status=" + this.status + "&index=" + this.indexs
121
+        // url: './order'
122
+      });
123
+    }
124
+  }
125
+};
192 126
 </script>
193 127
 
194 128
 <style>
195
-	page {
196
-		background-color: #F7F8FC;
197
-	}
129
+page {
130
+  background-color: #f7f8fc;
131
+}
198 132
 </style>
199 133
 <style lang="scss" scoped>
200
-	.details {
201
-		width: 100%;
202
-		height: 100%;
203
-		display: flex;
204
-		flex-direction: column;
205
-		align-items: center;
206
-
207
-		.details-header {
208
-			position: fixed;
209
-			top: 0;
210
-			left: 0;
211
-			z-index: 111;
212
-			width: 100%;
213
-			height: 176rpx;
214
-			background: #FFFFFF;
215
-			display: flex;
216
-			justify-content: center;
217
-
218
-			.details-header-text {
219
-				width: 686rpx;
220
-				font-size: 36rpx;
221
-				font-weight: 500;
222
-				color: #333333;
223
-				display: flex;
224
-				margin-top: 107rpx;
225
-				align-items: center;
226
-
227
-				.details-header-text-neishi {
228
-					width: 45rpx;
229
-					height: 45rpx;
230
-					margin-right: 17rpx;
231
-
232
-					.details-header-text-icon {
233
-						width: 36rpx;
234
-						height: 36rpx;
235
-						margin-top: 2rpx;
236
-
237
-						image {
238
-							width: 100%;
239
-							height: 100%;
240
-						}
241
-					}
242
-				}
243
-			}
244
-		}
245
-
246
-		.details-back {
247
-			width: 100%;
248
-			height: 277rpx;
249
-			margin-top: 176rpx;
250
-			display: flex;
251
-			justify-content: center;
252
-			position: relative;
253
-
254
-			image {
255
-				width: 100%;
256
-				height: 100%;
257
-			}
258
-
259
-			.details-back-biaohsi {
260
-				position: absolute;
261
-				height: 80rpx;
262
-				top: 55rpx;
263
-				left: 43rpx;
264
-				display: flex;
265
-				align-items: flex-start;
266
-
267
-				.details-back-biaohsi-kuan {
268
-					width: 38rpx;
269
-					height: 38rpx;
270
-					margin-top: 6rpx;
271
-
272
-					image {
273
-						width: 100%;
274
-						height: 100%;
275
-					}
276
-				}
277
-
278
-				.details-back-biaohsi-zhuanbgtia {
279
-					display: flex;
280
-					flex-direction: column;
281
-					justify-content: space-between;
282
-					align-items: flex-start;
283
-					margin-left: 8rpx;
284
-
285
-					.details-back-biaohsi-zhuanbgtia-top {
286
-						font-size: 36rpx;
287
-						font-weight: 600;
288
-						color: #FFFFFF;
289
-					}
290
-
291
-					.details-back-biaohsi-zhuanbgtia-bot {
292
-						font-size: 26rpx;
293
-						font-weight: 400;
294
-						color: #FFFFFF;
295
-					}
296
-				}
297
-			}
298
-
299
-			.details-back-url {
300
-				width: 686rpx;
301
-				height: 176rpx;
302
-				background: #FFFFFF;
303
-				border-radius: 16rpx;
304
-				position: absolute;
305
-				top: 189rpx;
306
-				display: flex;
307
-				align-items: center;
308
-				justify-content: center;
309
-
310
-				.order-list-yi-bot-xiangxi {
311
-					width: 634rpx;
312
-					height: 112rpx;
313
-					display: flex;
314
-					align-items: flex-start;
315
-
316
-					.order-list-yi-bot-xiangxier {
317
-						width: 38rpx;
318
-						height: 38rpx;
319
-
320
-						image {
321
-							width: 100%;
322
-							height: 100%;
323
-						}
324
-					}
325
-
326
-					.order-list-yi-bot-xadasrfe {
327
-						width: 544rpx;
328
-						height: 100%;
329
-						margin-left: 16rpx;
330
-						display: flex;
331
-						flex-direction: column;
332
-						justify-content: space-between;
333
-						align-items: flex-start;
334
-
335
-						.order-list-yi-bot-xadasrfe-top {
336
-							width: 100%;
337
-							font-size: 26rpx;
338
-							font-weight: 400;
339
-							color: #333333;
340
-							display: -webkit-box;
341
-							-webkit-box-orient: vertical;
342
-							-webkit-line-clamp: 2;
343
-							overflow: hidden;
344
-						}
345
-
346
-						.order-list-yi-bot-xadasrfe-bot {
347
-							font-size: 28rpx;
348
-							font-weight: 400;
349
-							color: #999999;
350
-							display: flex;
351
-						}
352
-					}
353
-				}
354
-			}
355
-		}
356
-
357
-		.details-xiangqing {
358
-			width: 686rpx;
359
-			// height: 719rpx;
360
-			background: #FFFFFF;
361
-			border-radius: 16px;
362
-			margin-top: 114rpx;
363
-			display: flex;
364
-			flex-direction: column;
365
-			align-items: center;
366
-			margin-bottom: 50rpx;
367
-
368
-			.details-xiangqing-top {
369
-				width: 100%;
370
-				// height: 90rpx;
371
-				padding: 32rpx 0 32rpx 0;
372
-				border-bottom: 1rpx solid #E5E5E5;
373
-				display: flex;
374
-				align-items: center;
375
-				color: #333333;
376
-
377
-				.details-xiangqing-top-let {
378
-					width: 32rpx;
379
-					height: 32rpx;
380
-					font-size: 11rpx;
381
-					font-weight: 400;
382
-					margin-left: 28rpx;
383
-
384
-					image {
385
-						width: 100%;
386
-						height: 100%;
387
-					}
388
-				}
389
-
390
-				.details-xiangqing-top-in {
391
-					width: 364rpx;
392
-					font-size: 28rpx;
393
-					font-weight: 600;
394
-					overflow: hidden;
395
-					text-overflow: ellipsis;
396
-					white-space: nowrap;
397
-					margin-left: 6rpx;
398
-				}
399
-
400
-				.details-xiangqing-top-rigt {
401
-					width: 36rpx;
402
-					height: 36rpx;
403
-					margin-left: 8rpx;
404
-
405
-					image {
406
-						width: 100%;
407
-						height: 100%;
408
-					}
409
-				}
410
-			}
411
-
412
-			.details-xiangqing-niri {
413
-				width: 634rpx;
414
-				// height: 548rpx;
415
-				margin: 26rpx 0 50rpx 0;
416
-				display: flex;
417
-				flex-direction: column;
418
-
419
-				// background-color: orangered;
420
-				.order-list-yi-in-neibu {
421
-					width: 634rpx;
422
-					height: 158rpx;
423
-					display: flex;
424
-					justify-content: space-between;
425
-					align-items: flex-start;
426
-					// background-color: aqua;
427
-					margin: 10rpx 0 10rpx 0;
428
-
429
-					.order-list-yi-in-neibu-left {
430
-						width: 474rpx;
431
-						height: 100%;
432
-						display: flex;
433
-						align-items: flex-start;
434
-						justify-content: space-between;
435
-
436
-						.order-list-yi-in-neibu-left-img {
437
-							width: 158rpx;
438
-							height: 158rpx;
439
-							overflow: hidden;
440
-
441
-							image {
442
-								width: 100%;
443
-								height: 100%;
444
-							}
445
-						}
446
-
447
-						.order-list-yi-in-neibu-left-url {
448
-							width: 290rpx;
449
-							display: flex;
450
-
451
-							.order-list-yi-in-neibu-left-url-top {
452
-								width: 100%;
453
-								font-weight: 400;
454
-								color: #333333;
455
-								font-size: 28rpx;
456
-								display: -webkit-box;
457
-								-webkit-box-orient: vertical;
458
-								-webkit-line-clamp: 2;
459
-								overflow: hidden;
460
-								justify-content: space-between;
461
-							}
462
-
463
-							.order-list-yi-in-neibu-left-url-top-bot {
464
-								width: 100%;
465
-								font-size: 24rpx;
466
-								font-weight: 400;
467
-								color: #666666;
468
-								display: inline-block;
469
-								overflow: hidden;
470
-								text-overflow: ellipsis;
471
-								white-space: nowrap;
472
-							}
473
-						}
474
-					}
475
-
476
-					.order-list-yi-in-neibu-right {
477
-						height: 73rpx;
478
-						font-size: 28rpx;
479
-						font-weight: 500;
480
-						color: #333333;
481
-						display: flex;
482
-						flex-direction: column;
483
-						justify-content: space-between;
484
-						align-items: flex-end;
485
-
486
-						.order-list-yi-in-neibu-right-im {
487
-							font-size: 28rpx;
488
-							font-weight: 500;
489
-							color: #333333;
490
-						}
491
-
492
-						.order-list-yi-in-neibu-right-in {
493
-							font-size: 24rpx;
494
-							font-weight: 400;
495
-							color: #666666;
496
-						}
497
-					}
498
-				}
499
-
500
-				.details-xiangqing-shujussss {
501
-					width: 634rpx;
502
-					height: 340rpx;
503
-					margin-top: 50rpx;
504
-					display: flex;
505
-					flex-direction: column;
506
-					justify-content: space-between;
507
-
508
-					.details-xiangqing-shujussss-yis {
509
-						width: 100%;
510
-						display: flex;
511
-						align-items: center;
512
-						justify-content: space-between;
513
-						font-size: 28rpx;
514
-						font-weight: 400;
515
-						color: #333333;
516
-					}
517
-				}
518
-			}
519
-		}
520
-
521
-		.details-xiangqingsssss {
522
-			width: 686rpx;
523
-			// height: 779rpx;
524
-			background: #FFFFFF;
525
-			border-radius: 16px;
526
-			margin-top: 114rpx;
527
-			display: flex;
528
-			flex-direction: column;
529
-			align-items: center;
530
-			margin-bottom: 50rpx;
531
-
532
-			.details-xiangqing-top {
533
-				width: 100%;
534
-				// height: 90rpx;
535
-				padding: 32rpx 0 32rpx 0;
536
-				border-bottom: 1rpx solid #E5E5E5;
537
-				display: flex;
538
-				align-items: center;
539
-				color: #333333;
540
-
541
-				.details-xiangqing-top-let {
542
-					width: 32rpx;
543
-					height: 32rpx;
544
-					font-size: 11rpx;
545
-					font-weight: 400;
546
-					margin-left: 28rpx;
547
-
548
-					image {
549
-						width: 100%;
550
-						height: 100%;
551
-					}
552
-				}
553
-
554
-				.details-xiangqing-top-in {
555
-					width: 364rpx;
556
-					font-size: 28rpx;
557
-					font-weight: 600;
558
-					overflow: hidden;
559
-					text-overflow: ellipsis;
560
-					white-space: nowrap;
561
-					margin-left: 6rpx;
562
-				}
563
-
564
-				.details-xiangqing-top-rigt {
565
-					width: 36rpx;
566
-					height: 36rpx;
567
-					margin-left: 8rpx;
568
-
569
-					image {
570
-						width: 100%;
571
-						height: 100%;
572
-					}
573
-				}
574
-			}
575
-
576
-			.details-xiangqing-niri {
577
-				width: 634rpx;
578
-				// height: 548rpx;
579
-				margin-top: 26rpx;
580
-				display: flex;
581
-				flex-direction: column;
582
-				align-items: flex-end;
583
-				margin: 26rpx 0 50rpx 0;
584
-
585
-				.order-list-yi-in-neibu {
586
-					width: 634rpx;
587
-					height: 158rpx;
588
-					display: flex;
589
-					justify-content: space-between;
590
-					align-items: flex-start;
591
-					margin: 10rpx 0 10rpx 0;
592
-
593
-					.order-list-yi-in-neibu-left {
594
-						width: 474rpx;
595
-						height: 100%;
596
-						display: flex;
597
-						align-items: flex-start;
598
-						justify-content: space-between;
599
-
600
-						.order-list-yi-in-neibu-left-img {
601
-							width: 158rpx;
602
-							height: 158rpx;
603
-							overflow: hidden;
604
-
605
-							image {
606
-								width: 100%;
607
-								height: 100%;
608
-							}
609
-						}
610
-
611
-						.order-list-yi-in-neibu-left-url {
612
-							width: 290rpx;
613
-							display: flex;
614
-
615
-							.order-list-yi-in-neibu-left-url-top {
616
-								width: 100%;
617
-								font-weight: 400;
618
-								color: #333333;
619
-								font-size: 28rpx;
620
-								display: -webkit-box;
621
-								-webkit-box-orient: vertical;
622
-								-webkit-line-clamp: 2;
623
-								overflow: hidden;
624
-								justify-content: space-between;
625
-							}
626
-
627
-							.order-list-yi-in-neibu-left-url-top-bot {
628
-								width: 100%;
629
-								font-size: 24rpx;
630
-								font-weight: 400;
631
-								color: #666666;
632
-								display: inline-block;
633
-								overflow: hidden;
634
-								text-overflow: ellipsis;
635
-								white-space: nowrap;
636
-							}
637
-						}
638
-					}
639
-
640
-					.order-list-yi-in-neibu-right {
641
-						height: 73rpx;
642
-						font-size: 28rpx;
643
-						font-weight: 500;
644
-						color: #333333;
645
-						display: flex;
646
-						flex-direction: column;
647
-						justify-content: space-between;
648
-						align-items: flex-end;
649
-
650
-						.order-list-yi-in-neibu-right-im {
651
-							font-size: 28rpx;
652
-							font-weight: 500;
653
-							color: #333333;
654
-						}
655
-
656
-						.order-list-yi-in-neibu-right-in {
657
-							font-size: 24rpx;
658
-							font-weight: 400;
659
-							color: #666666;
660
-						}
661
-					}
662
-				}
663
-
664
-				.details-xiangqing-shujussss {
665
-					width: 634rpx;
666
-					height: 340rpx;
667
-					margin-top: 50rpx;
668
-					display: flex;
669
-					flex-direction: column;
670
-					justify-content: space-between;
671
-
672
-					.details-xiangqing-shujussss-yis {
673
-						width: 100%;
674
-						display: flex;
675
-						align-items: center;
676
-						justify-content: space-between;
677
-						font-size: 28rpx;
678
-						font-weight: 400;
679
-						color: #333333;
680
-					}
681
-				}
682
-			}
683
-		}
684
-	}
685
-</style>
134
+.details {
135
+  width: 100%;
136
+  height: 100%;
137
+  display: flex;
138
+  flex-direction: column;
139
+  align-items: center;
140
+  overflow: hidden;
141
+
142
+  .details-back {
143
+    width: 100%;
144
+    height: 277rpx;
145
+    margin-top: 98rpx;
146
+    display: flex;
147
+    justify-content: center;
148
+    position: relative;
149
+    image {
150
+      width: 100%;
151
+      height: 100%;
152
+    }
153
+
154
+    .details-back-biaohsi {
155
+      position: absolute;
156
+      height: 80rpx;
157
+      top: 55rpx;
158
+      left: 43rpx;
159
+      display: flex;
160
+      align-items: flex-start;
161
+
162
+      .details-back-biaohsi-kuan {
163
+        width: 38rpx;
164
+        height: 38rpx;
165
+        margin-top: 6rpx;
166
+
167
+        image {
168
+          width: 100%;
169
+          height: 100%;
170
+        }
171
+      }
172
+
173
+      .details-back-biaohsi-zhuanbgtia {
174
+        display: flex;
175
+        flex-direction: column;
176
+        justify-content: space-between;
177
+        align-items: flex-start;
178
+        margin-left: 8rpx;
179
+
180
+        .details-back-biaohsi-zhuanbgtia-top {
181
+          font-size: 36rpx;
182
+          font-weight: 600;
183
+          color: #ffffff;
184
+        }
185
+
186
+        .details-back-biaohsi-zhuanbgtia-bot {
187
+          font-size: 26rpx;
188
+          font-weight: 400;
189
+          color: #ffffff;
190
+        }
191
+      }
192
+    }
193
+  }
194
+  .logistic--wrapper {
195
+    position: absolute;
196
+    top: 190rpx;
197
+  }
198
+  .order-detail-card {
199
+    height: calc(100% - 260rpx);
200
+    margin-top: 220rpx;
201
+    margin-bottom: 50rpx;
202
+    // border:2rpx solid #f00;
203
+
204
+    // overflow-y: auto;
205
+  }
206
+}
207
+.inputInfo{
208
+	padding:0 25rpx;
209
+	margin: 26rpx 0 0 ;
210
+}
211
+</style>

+ 42 - 15
shop/commodity/logisticsInformationDetail.vue

@@ -1,21 +1,48 @@
1 1
 <template>
2
-	
3
-	<view class="logistics-info-card">
4
-			 <headersVue @headerJump="topgi" header-title="选择送货人"></headersVue>
5
-	</view>
2
+  <view class="logistics-info-card">
3
+    <headersVue @headerJump="topgi" header-title="物流信息"></headersVue>
4
+    <view class="logistics-info-card-wrapper"></view>
5
+  </view>
6 6
 </template>
7 7
 
8 8
 <script>
9
-	import headersVue from "../components/headers/headers.vue";
10
-	export default {
11
-		data() {
12
-			return {
13
-				
14
-			};
15
-		}
16
-	}
9
+import headersVue from "../components/headers/headers.vue";
10
+import { toQueryString } from "@/utils/index.js";
11
+export default {
12
+  components: { headersVue },
13
+  data() {
14
+    return {
15
+      indexs: "",
16
+      status: "",
17
+      order_id: "", //订单ID
18
+      formType: ""
19
+    };
20
+  },
21
+  onLoad(e) {
22
+    this.order_id = e.order_id;
23
+    this.indexs = e.indexs;
24
+    this.status = e.status;
25
+    this.formType = e.formType || "";
26
+    // this.getOrderDetails()
27
+  },
28
+  methods: {
29
+    topgi() {
30
+      const obj = {
31
+        status: this.status,
32
+        index: this.indexs,
33
+        formType: this.formType,
34
+        order_id: this.order_id
35
+      };
36
+	  const params = toQueryString(obj);
37
+      const redirectUrl =
38
+        this.formType === "detail" ? `./details?` : `./order?`;
39
+      uni.redirectTo({
40
+        url: `${redirectUrl}${params}`
41
+        // url: './order'
42
+      });
43
+    }
44
+  }
45
+};
17 46
 </script>
18 47
 
19
-<style lang="scss">
20
-
21
-</style>
48
+<style lang="scss"></style>

+ 5 - 6
shop/commodity/order.vue

@@ -54,8 +54,6 @@
54 54
 				status: '', //0:待发货;1:待收货;2:待评价;3:已完成;4已申请退款;-1:已退款)5未支付WADDW
55 55
 				indexs: 0,
56 56
 				// sty: true,
57
-				incrseP: 'order-list-yi',
58
-				downP: 'order-list-yissss',
59 57
 				list: [],
60 58
 				num: [{
61 59
 						name: "全部",
@@ -131,7 +129,7 @@
131 129
 			let selectmerchant = uni.getStorageSync('selectmerchant')
132 130
 			this.mer_id = selectmerchant.merId
133 131
 			this.status = e.status //进入状态
134
-			this.indexs = e.index==null?0:Number(e.index)
132
+			this.indexs = e.index==null?0:e.index
135 133
 			this.listMock = listData || []
136 134
 			// this.orderList()
137 135
 		},
@@ -157,7 +155,7 @@
157 155
 				console.log(val,"搜索")
158 156
 			},
159 157
 			handleSendOutGoods(v,type){
160
-				console.log("發貨",v)
158
+				console.log("發貨",v,this.indexs)
161 159
 				const urlParams = {
162 160
 					order_id:v.order_id,
163 161
 					status:v.status,
@@ -170,9 +168,10 @@
170 168
 				const newUrl = {
171 169
 					"sendGoods":`./sendoutgoods?${url}`,//立即发货
172 170
 					"delivered":`./sendoutgoods?${url}`,//已送达
173
-					"logistics":``,//查看物流
171
+					"logistics":`./logisticsInformationDetail?${url}`,//查看物流
174 172
 					"deliverGoods":`./sendoutgoods?${url}`,//送貨
175 173
 					"pickup":`./sendoutgoods?${url}`,//立即自提
174
+					"detail":`./details?${url}`
176 175
 				}
177 176
 				let redirectToUrl = newUrl[type] || newUrl["logistics"]
178 177
 				console.log(redirectToUrl,"redirectToUrl")
@@ -295,4 +294,4 @@
295 294
 			}
296 295
 		}
297 296
 	}
298
-</style>
297
+</style>

+ 18 - 0
shop/commodity/orderUtil.js

@@ -0,0 +1,18 @@
1
+export const orderStatus = {
2
+    "1": "待付款",
3
+    "2": "待发货",
4
+    "3": "待收货",
5
+    "4": "待评价",
6
+    "5": "已完成",
7
+    "6": "已退款",
8
+    "7": "已删除",
9
+    "0": "全部"
10
+}
11
+
12
+export const logisticStatus = {
13
+	"1":"已发货",
14
+	"2":"已揽收",
15
+	"3":"运输中",
16
+	"4":"配送中",
17
+	"5":"已签收"
18
+}

+ 1 - 1
utils/index.js

@@ -3,7 +3,7 @@
3 3
  * @param {string} text 需要复制的文本
4 4
  * @returns {Promise<boolean>} 是否复制成功
5 5
  */
6
-function copyToClipboard(text) {
6
+export function copyToClipboard(text) {
7 7
 	// 现代浏览器方案 (推荐)
8 8
 	if (navigator.clipboard && window.isSecureContext) {
9 9
 		return navigator.clipboard.writeText(text)