瀏覽代碼

地址添加坐标字段

忆雪 1 年之前
父節點
當前提交
2a55019cc4

+ 349 - 319
src/pageMerchant/mineModule/certification/storeInformation.vue

@@ -1,319 +1,349 @@
-<template>
-  <view class="container">
-    <view class="top-box">
-      为了方便我们与您尽快联系达成合作,请如实填写以下资料,谢谢您的支持与配合
-    </view>
-
-    <u-form :model="storeInfo" ref="uForm" labelPosition="left" :rules="rules" labelWidth="80">
-      <view class="content-box">
-        <view class="content-item">
-          <u-form-item prop="legalRepresentativeName" required label="姓名" right>
-            <view class="item-r">
-              <u--input placeholder="请输入负责人名称" border="surround" v-model="storeInfo.legalRepresentativeName"></u--input>
-            </view>
-          </u-form-item>
-        </view>
-        <view class="content-item">
-          <u-form-item prop="mobileNumber" required label="手机号码" right>
-            <view class="item-r">
-              <u--input placeholder="请输入手机号码" border="surround" v-model="storeInfo.mobileNumber"></u--input>
-            </view>
-          </u-form-item>
-        </view>
-
-        <view class="content-item">
-          <u-form-item prop="email" required label="电子邮箱" right>
-            <view class="item-r">
-              <u--input placeholder="请输入您的邮箱" border="surround" v-model="storeInfo.email"></u--input>
-            </view>
-          </u-form-item>
-        </view>
-      </view>
-      <view class="content-box">
-        <view class="content-item">
-          <u-form-item prop="storeName" required label="店铺名称" right>
-            <view class="item-r">
-              <u--input placeholder="请输入店铺名称" border="surround" v-model="storeInfo.storeName"></u--input>
-            </view>
-          </u-form-item>
-        </view>
-        <view class="content-item">
-          <u-form-item prop="storeAddress" required label="所在地区" right>
-            <view class="item-r">
-              <u--input placeholder="请选择所在地区" border="surround" v-model="storeInfo.storeAddress"
-                @focus="handlerChange"></u--input>
-            </view>
-            <view class="icon-right-box">
-              <u-icon name="arrow-right" color="#c5c5c5" size="20"></u-icon>
-            </view>
-          </u-form-item>
-        </view>
-        <view class="content-item">
-          <u-form-item prop="storeAddressDetail" required label="详细地址" right>
-            <view class="item-r">
-              <u--input placeholder="请输入门店详细地址" border="surround" v-model="storeInfo.storeAddressDetail"></u--input>
-            </view>
-          </u-form-item>
-        </view>
-      </view>
-
-      <view class="content-box">
-        <u-form-item prop="storeImage">
-          <imgs-upload @update="fileList" :value="1"></imgs-upload>
-          <p class="upload-text">店铺门面图(需要包含完整牌匾)</p>
-        </u-form-item>
-      </view>
-
-      <view class="content-box">
-        <u-form-item prop="storeInnerImage">
-          <imgs-upload @update="fileList" :value="2"></imgs-upload>
-          <p class="upload-text">店内真实环境图</p>
-        </u-form-item>
-      </view>
-    </u-form>
-    <button class="btn" @click="handlerSkipNext">下一步</button>
-
-    <!-- 地区 -->
-    <u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
-      @cancel="show = false"></u-picker>
-  </view>
-</template>
-
-<script>
-  import ImgsUpload from './components/ImgsUpload.vue';
-  // 导入城市js文件
-  import cityData from '@/utils/city';
-
-  export default {
-    components: {
-      ImgsUpload,
-    },
-    data() {
-      return {
-        storeInfo: {
-          storeAddress: '',
-          storeAddressDetail: '',
-          legalRepresentativeName: '',
-          mobileNumber: '',
-          storeName: '',
-          storeImage: '',
-          storeInnerImage: '',
-          email: ""
-        },
-        rules: {
-          legalRepresentativeName: {
-            type: 'string',
-            required: true,
-            message: '请输入负责人名称',
-            trigger: ['blur', 'change'],
-          },
-          storeName: {
-            type: 'string',
-            required: true,
-            message: '请输入店铺名',
-            trigger: ['blur', 'change'],
-          },
-          storeAddressDetail: {
-            type: 'string',
-            required: true,
-            message: '请输入详细地址',
-            trigger: ['blur', 'change'],
-          },
-          mobileNumber: [{
-              required: true,
-              message: '请输入手机号码',
-              trigger: ['blur', 'change'],
-            },
-            {
-              validator: (rule, value, callback) => {
-                return uni.$u.test.mobile(value);
-              },
-              message: '手机号码不正确',
-              trigger: ['change', 'blur'],
-            },
-          ],
-          email: [{
-              required: true,
-              message: '请输入您的邮箱',
-              trigger: ['blur', 'change'],
-            },
-            {
-              validator: (rule, value, callback) => {
-                return uni.$u.test.email(value);
-              },
-              message: '您输入的邮箱不正确',
-              trigger: ['change', 'blur'],
-            },
-          ],
-          storeAddress: [{
-            required: true,
-            message: '请选择所在地区',
-            trigger: ['change'],
-          }, ],
-        },
-        show: false, //显示选择器
-        // 打开选择器显示默认城市
-        cityList: [],
-        cityLevel1: [],
-        cityLevel2: [],
-        cityLevel3: [],
-      };
-    },
-    onReady() {
-      //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
-      this.$refs.uForm.setRules(this.rules);
-    },
-    onShow() {
-      this.initCityData();
-    },
-    methods: {
-      initCityData() {
-        // 遍历城市js
-        cityData.forEach((item1, index1) => {
-          let temp2 = [];
-          this.cityLevel1.push(item1.provinceName);
-
-          let temp4 = [];
-          let temp3 = [];
-          // 遍历市
-          item1.cities.forEach((item2, index2) => {
-            temp2.push(item2.cityName);
-            // 遍历区
-            item2.counties.forEach((item3, index3) => {
-              temp3.push(item3.countyName);
-            });
-            temp4[index2] = temp3;
-            temp3 = [];
-          });
-          this.cityLevel3[index1] = temp4;
-          this.cityLevel2[index1] = temp2;
-        });
-        // 选择器默认城市
-        this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
-      },
-      // 选中时执行
-      changeHandler(e) {
-        const {
-          columnIndex,
-          index,
-          indexs,
-          value,
-          values,
-          // 微信小程序无法将picker实例传出来,只能通过ref操作
-          picker = this.$refs.uPicker,
-        } = e;
-        if (columnIndex === 0) {
-          // 选择第一列数据时 设置第二列关联数据
-          picker.setColumnValues(1, this.cityLevel2[index]);
-          // 设置第三列关联数据
-          picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
-        } else if (columnIndex === 1) {
-          // 选择第二列数据时 设置第三列关联数据
-          picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
-        }
-      },
-      // 单击确认按钮时执行
-      confirm(e) {
-        this.storeInfo.storeAddress = e.value.join('');
-        // 隐藏城市选择器
-        this.show = false;
-      },
-      handlerChange() {
-        this.show = true;
-      },
-      handlerSkipNext() {
-        this.$refs.uForm.validate().then(res => {
-          this.$store.commit('SET_STOREINFO', this.storeInfo);
-          setTimeout(() => {
-            uni.navigateTo({
-              url: '/pageMerchant/mineModule/certification/corporateInformation',
-            });
-          }, 1500);
-        });
-      },
-      // 图片
-      fileList(val, data) {
-        if (data == 1) {
-          this.storeInfo.storeImage = val[0];
-        } else if (data == 2) {
-          this.storeInfo.storeInnerImage = val[0];
-        }
-      },
-    },
-  };
-</script>
-
-<style lang="scss" scoped>
-  .container {
-    background-color: #f7f7f7 !important;
-    padding-bottom: 40rpx;
-
-    .top-box {
-      color: #666666;
-      font-size: 26rpx;
-      text-align: center;
-      padding: 20rpx 40rpx;
-      background-color: #fff;
-    }
-
-    .content-box {
-      padding: 20rpx 40rpx;
-      background-color: #fff;
-      margin: 10rpx 0;
-
-      .content-item {
-        position: relative;
-
-        .item-r {
-          background-color: #f7f7f7;
-          border-radius: 20rpx;
-          display: flex;
-
-          .data_select {
-            width: 90%;
-          }
-
-          ::v-deep .u-form-item {
-            width: 100%;
-          }
-
-          ::v-deep .u-form-item__body {
-            padding: 0;
-          }
-        }
-
-        .icon-right-box {
-          position: absolute;
-          right: 15rpx;
-          top: 40rpx;
-        }
-      }
-
-      .upload-text {
-        text-align: center;
-        color: #666666;
-        font-size: 28rpx;
-        margin-top: 20rpx;
-      }
-    }
-
-    .btn {
-      background-color: #5992bb !important;
-      color: #fff;
-      font-size: 32rpx;
-      border-radius: 40rpx;
-      margin-top: 100rpx;
-      margin-bottom: 100rpx;
-      width: 95%;
-    }
-  }
-
-  ::v-deep .uni-select {
-    border: none !important;
-  }
-
-  ::v-deep .uni-select__input-placeholder {
-    font-size: 28rpx !important;
-    color: #cbced4 !important;
-  }
-</style>
+<template>
+	<view class="container">
+		<view class="top-box">
+			为了方便我们与您尽快联系达成合作,请如实填写以下资料,谢谢您的支持与配合
+		</view>
+
+		<u-form :model="storeInfo" ref="uForm" labelPosition="left" :rules="rules" labelWidth="80">
+			<view class="content-box">
+				<view class="content-item">
+					<u-form-item prop="legalRepresentativeName" required label="姓名" right>
+						<view class="item-r">
+							<u--input placeholder="请输入负责人名称" border="surround"
+								v-model="storeInfo.legalRepresentativeName"></u--input>
+						</view>
+					</u-form-item>
+				</view>
+				<view class="content-item">
+					<u-form-item prop="mobileNumber" required label="手机号码" right>
+						<view class="item-r">
+							<u--input placeholder="请输入手机号码" border="surround"
+								v-model="storeInfo.mobileNumber"></u--input>
+						</view>
+					</u-form-item>
+				</view>
+
+				<view class="content-item">
+					<u-form-item prop="email" required label="电子邮箱" right>
+						<view class="item-r">
+							<u--input placeholder="请输入您的邮箱" border="surround" v-model="storeInfo.email"></u--input>
+						</view>
+					</u-form-item>
+				</view>
+			</view>
+			<view class="content-box">
+				<view class="content-item">
+					<u-form-item prop="storeName" required label="店铺名称" right>
+						<view class="item-r">
+							<u--input placeholder="请输入店铺名称" border="surround" v-model="storeInfo.storeName"></u--input>
+						</view>
+					</u-form-item>
+				</view>
+				<view class="content-item">
+					<u-form-item prop="storeAddress" required label="所在地区" right>
+						<view class="item-r">
+							<u--input placeholder="请选择所在地区" border="surround" v-model="storeInfo.storeAddress"
+								@focus="handlerChange"></u--input>
+						</view>
+						<view class="icon-right-box">
+							<u-icon name="arrow-right" color="#c5c5c5" size="20"></u-icon>
+						</view>
+					</u-form-item>
+				</view>
+				<view class="content-item">
+					<u-form-item prop="storeAddressDetail" required label="详细地址" right>
+						<!-- <view class="item-r">
+              <u--input placeholder="请输入门店详细地址" border="surround" v-model="storeInfo.storeAddressDetail"></u--input>
+            </view> -->
+						<view class="item-r" @click.stop="manualGetLocation">
+							<u--input placeholder="请选择详细地址" border="surround"
+								v-model="storeInfo.storeAddressDetail"></u--input>
+						</view>
+						<view class="icon-right-box">
+							<u-icon name="arrow-down-fill" color="#333333" size="20"></u-icon>
+						</view>
+					</u-form-item>
+				</view>
+			</view>
+
+			<view class="content-box">
+				<u-form-item prop="storeImage">
+					<imgs-upload @update="fileList" :value="1"></imgs-upload>
+					<p class="upload-text">店铺门面图(需要包含完整牌匾)</p>
+				</u-form-item>
+			</view>
+
+			<view class="content-box">
+				<u-form-item prop="storeInnerImage">
+					<imgs-upload @update="fileList" :value="2"></imgs-upload>
+					<p class="upload-text">店内真实环境图</p>
+				</u-form-item>
+			</view>
+		</u-form>
+		<button class="btn" @click="handlerSkipNext">下一步</button>
+
+		<!-- 地区 -->
+		<u-picker :show="show" ref="uPicker" :columns="cityList" @confirm="confirm" @change="changeHandler"
+			@cancel="show = false"></u-picker>
+	</view>
+</template>
+
+<script>
+	import ImgsUpload from './components/ImgsUpload.vue';
+	// 导入城市js文件
+	import cityData from '@/utils/city';
+
+	export default {
+		components: {
+			ImgsUpload,
+		},
+		data() {
+			return {
+				storeInfo: {
+					storeAddress: '',
+					storeAddressDetail: '',
+					legalRepresentativeName: '',
+					mobileNumber: '',
+					storeName: '',
+					storeImage: '',
+					storeInnerImage: '',
+					email: "",
+					longitude: '',
+					latitude: ''
+
+				},
+				rules: {
+					legalRepresentativeName: {
+						type: 'string',
+						required: true,
+						message: '请输入负责人名称',
+						trigger: ['blur', 'change'],
+					},
+					storeName: {
+						type: 'string',
+						required: true,
+						message: '请输入店铺名',
+						trigger: ['blur', 'change'],
+					},
+					storeAddressDetail: {
+						type: 'string',
+						required: true,
+						message: '请输入详细地址',
+						trigger: ['blur', 'change'],
+					},
+					mobileNumber: [{
+							required: true,
+							message: '请输入手机号码',
+							trigger: ['blur', 'change'],
+						},
+						{
+							validator: (rule, value, callback) => {
+								return uni.$u.test.mobile(value);
+							},
+							message: '手机号码不正确',
+							trigger: ['change', 'blur'],
+						},
+					],
+					email: [{
+							required: true,
+							message: '请输入您的邮箱',
+							trigger: ['blur', 'change'],
+						},
+						{
+							validator: (rule, value, callback) => {
+								return uni.$u.test.email(value);
+							},
+							message: '您输入的邮箱不正确',
+							trigger: ['change', 'blur'],
+						},
+					],
+					storeAddress: [{
+						required: true,
+						message: '请选择所在地区',
+						trigger: ['change'],
+					}, ],
+				},
+				show: false, //显示选择器
+				// 打开选择器显示默认城市
+				cityList: [],
+				cityLevel1: [],
+				cityLevel2: [],
+				cityLevel3: [],
+			};
+		},
+		onReady() {
+			//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
+			this.$refs.uForm.setRules(this.rules);
+		},
+		onShow() {
+			this.initCityData();
+		},
+		methods: {
+			// 手动选择城市
+			manualGetLocation() {
+				uni.chooseLocation({
+					success: res => {
+						console.log(res, "点击获取的")
+						let {
+							longitude,
+							latitude
+						} = res;
+						console.log(this.stereInfo, "this")
+						this.storeInfo.longitude = longitude.toFixed(5);
+						this.storeInfo.latitude = latitude.toFixed(5);
+						this.storeInfo.storeAddressDetail = res.address
+
+					},
+					fail: err => {},
+				});
+			},
+			initCityData() {
+				// 遍历城市js
+				cityData.forEach((item1, index1) => {
+					let temp2 = [];
+					this.cityLevel1.push(item1.provinceName);
+
+					let temp4 = [];
+					let temp3 = [];
+					// 遍历市
+					item1.cities.forEach((item2, index2) => {
+						temp2.push(item2.cityName);
+						// 遍历区
+						item2.counties.forEach((item3, index3) => {
+							temp3.push(item3.countyName);
+						});
+						temp4[index2] = temp3;
+						temp3 = [];
+					});
+					this.cityLevel3[index1] = temp4;
+					this.cityLevel2[index1] = temp2;
+				});
+				// 选择器默认城市
+				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
+			},
+			// 选中时执行
+			changeHandler(e) {
+				const {
+					columnIndex,
+					index,
+					indexs,
+					value,
+					values,
+					// 微信小程序无法将picker实例传出来,只能通过ref操作
+					picker = this.$refs.uPicker,
+				} = e;
+				if (columnIndex === 0) {
+					// 选择第一列数据时 设置第二列关联数据
+					picker.setColumnValues(1, this.cityLevel2[index]);
+					// 设置第三列关联数据
+					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
+				} else if (columnIndex === 1) {
+					// 选择第二列数据时 设置第三列关联数据
+					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
+				}
+			},
+			// 单击确认按钮时执行
+			confirm(e) {
+				this.storeInfo.storeAddress = e.value.join('');
+				// 隐藏城市选择器
+				this.show = false;
+			},
+			handlerChange() {
+				this.show = true;
+			},
+			handlerSkipNext() {
+				this.$refs.uForm.validate().then(res => {
+					this.$store.commit('SET_STOREINFO', this.storeInfo);
+					setTimeout(() => {
+						uni.navigateTo({
+							url: '/pageMerchant/mineModule/certification/corporateInformation',
+						});
+					}, 1500);
+				});
+			},
+			// 图片
+			fileList(val, data) {
+				if (data == 1) {
+					this.storeInfo.storeImage = val[0];
+				} else if (data == 2) {
+					this.storeInfo.storeInnerImage = val[0];
+				}
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		background-color: #f7f7f7 !important;
+		padding-bottom: 40rpx;
+
+		.top-box {
+			color: #666666;
+			font-size: 26rpx;
+			text-align: center;
+			padding: 20rpx 40rpx;
+			background-color: #fff;
+		}
+
+		.content-box {
+			padding: 20rpx 40rpx;
+			background-color: #fff;
+			margin: 10rpx 0;
+
+			.content-item {
+				position: relative;
+
+				.item-r {
+					background-color: #f7f7f7;
+					border-radius: 20rpx;
+					display: flex;
+
+					.data_select {
+						width: 90%;
+					}
+
+					::v-deep .u-form-item {
+						width: 100%;
+					}
+
+					::v-deep .u-form-item__body {
+						padding: 0;
+					}
+				}
+
+				.icon-right-box {
+					position: absolute;
+					right: 15rpx;
+					top: 40rpx;
+				}
+			}
+
+			.upload-text {
+				text-align: center;
+				color: #666666;
+				font-size: 28rpx;
+				margin-top: 20rpx;
+			}
+		}
+
+		.btn {
+			background-color: #5992bb !important;
+			color: #fff;
+			font-size: 32rpx;
+			border-radius: 40rpx;
+			margin-top: 100rpx;
+			margin-bottom: 100rpx;
+			width: 95%;
+		}
+	}
+
+	::v-deep .uni-select {
+		border: none !important;
+	}
+
+	::v-deep .uni-select__input-placeholder {
+		font-size: 28rpx !important;
+		color: #cbced4 !important;
+	}
+</style>

+ 2 - 1
src/pageMerchant/tabbar/mine.vue

@@ -150,7 +150,8 @@
           {
             id: '3',
             name: '资质信息',
-            url: '/pageMerchant/mineModule/openStoreAppealDetail',
+            // url: '/pageMerchant/mineModule/openStoreAppealDetail',
+			url: '/pageMerchant/mineModule/certification/storeInformation',
           },
         ],
 

+ 7 - 0
src/pages.json

@@ -99,6 +99,13 @@
 						"navigationBarTitleText": "结算订单"
 					}
 				},
+				{
+					"path" : "marketer/submitOrder",
+					"style" : 
+					{
+						"navigationBarTitleText" : "提交订单"
+					}
+				},
 				{
 					"path": "marketer/settleStatus",
 					"style": {

+ 4 - 4
src/pages/tabbar/home.vue

@@ -2,7 +2,7 @@
   <view class="container">
     <view class="container-top-box">
       <view class="top-title">
-        <view class="address" @click.stop="manualGetLocation">
+       <view class="address" @click.stop="manualGetLocation">
           <span>{{ nowAddress }}</span>
           <u-icon name="arrow-down-fill" color="#333333" size="16"></u-icon>
         </view>
@@ -156,10 +156,10 @@ export default {
     },
   },
   onShow() {
-    console.log('首页执行了没有', this.invitationCode);
+
     // 如果 invitationCode 存在且不等于特殊值时执行代码
     if (this.invitationCode) {
-      console.log('存在邀请码');
+      
       let params = {
         userId: this.invitationCode,
         targetId: this.userId,
@@ -177,7 +177,7 @@ export default {
       });
       this.$store.commit('SET_INVITATIONCODE', '');
     } else {
-      console.log('执行了一次');
+    
     }
   },
   mounted() {

+ 24 - 19
src/pagesHome/marketer/settleOrder.vue

@@ -208,25 +208,30 @@
 			//   })
 			// },
 			// 结算按钮
-			handlerSettleBtn() {
-				let params = {
-					payType: '2',
-					cartIds: [],
-					merchantId: this.init_list.merchantDTO.id
-				}
-				this.init_list.cartItems.map(rs => {
-					params.cartIds.push(rs.goodsId)
-				})
-				generateOrder(params).then(res => {
-					if (res.code === 'OK') {
-						this.handlerCallOrderBack(res.data.order.id)
-					} else {
-						uni.showToast({
-							title: res.msg,
-						})
-						return
-					}
-				})
+			handlerSettleBtn() {
+				
+				uni.navigateTo({
+					url: '/pagesHome/marketer/submitOrder'
+				})
+				
+				// let params = {
+				// 	payType: '2',
+				// 	cartIds: [],
+				// 	merchantId: this.init_list.merchantDTO.id
+				// }
+				// this.init_list.cartItems.map(rs => {
+				// 	params.cartIds.push(rs.goodsId)
+				// })
+				// generateOrder(params).then(res => {
+				// 	if (res.code === 'OK') {
+				// 		this.handlerCallOrderBack(res.data.order.id)
+				// 	} else {
+				// 		uni.showToast({
+				// 			title: res.msg,
+				// 		})
+				// 		return
+				// 	}
+				// })
 			},
 			// 支付回调
 			handlerCallOrderBack(id) {

+ 447 - 0
src/pagesHome/marketer/submitOrder.vue

@@ -0,0 +1,447 @@
+<template>
+	<view class="submit">
+		<view class="address-box">
+			<view class="left">
+				<view class="info">
+					<u-icon name="phone" size="22"></u-icon>
+					<view class="name">姓名</view>
+					<view class="phone">电话</view>
+				</view>
+				<view class="address">
+					<u-icon name="map" size="22"></u-icon>
+					<view class="address-text">地址</view>
+				</view>
+			</view>
+			<view class="right">
+				<u-icon name="arrow-right" color="#999999" size="40"></u-icon>
+			</view>
+		</view>
+
+		<view class="order-container">
+			<view class="order-header">
+				<text class="title">订单详情</text>
+			</view>
+			<view class="order-items">
+				<!-- 商品列表 -->
+				<view class="order-item" v-for="(item, index) in items" :key="index">
+					<image slot="icon" src="@/static/tools.jpg" style="width: 50px; height: 50px" />
+					<view class="item-details">
+						<view class="item-name">{{ item.name }}</view>
+						<view class="item-quantity">数量: {{ item.quantity }}</view>
+						<view class="item-price">价格: ${{ item.price }}</view>
+					</view>
+				</view>
+			</view>
+			<view class="order-footer">
+				<!-- 订单备注 -->
+				<view class="remark" @click="showRemarkModal">
+					<text>订单备注:</text>
+					<text>{{ remark ? remark : '无备注' }}</text>
+					<!-- <u-icon name="arrow-right" color="#999999" size="14"></u-icon> -->
+				</view>
+			</view>
+			<!-- 弹出的备注输入框 -->
+			<!-- <view class="modal" v-show="showModal">
+				<view class="modal-content">
+					<textarea v-model="inputRemark" placeholder="订单备注"></textarea>
+					<button @click="saveRemark">保存</button>
+				</view>
+			</view> -->
+		</view>
+		<!-- 服务内容 -->
+		<view class="container">
+			<!-- 服务内容部分 -->
+			<view class="title">服务流程</view>
+			<!-- 流程页面部分 -->
+			<view class="process">
+				<view v-for="(item, index) in processList" :key="index" class="process-item">
+					<view class="item-header">
+						<image class="item-icon" src="@/static/order/pathliuchen.png"></image>
+						<text>{{ item }}</text>
+					</view>
+					<image v-if="index !== processList.length - 1" class="arrow-icon"
+						src="@/static/order/pathliuchenjiantou.png"></image>
+				</view>
+			</view>
+		</view>
+
+		<!-- 订单总计 -->
+		<view class="container">
+			<!-- 服务内容部分 -->
+			<view class="title">订单总计</view>
+
+			<!-- 商品总价 -->
+			<u-cell size="large" title="商品总计" value="28	"></u-cell>
+			<!-- 下拉框组件 -->
+			<u-collapse @click="toggleCollapse">
+				<u-collapse-item title="优惠卷">
+					下拉框内容
+				</u-collapse-item>
+			</u-collapse>
+			<!-- 合计与价格 -->
+			<u-cell size="large" title="合计" value="99"></u-cell>
+		</view>
+		<!-- 支付方式 -->
+		<view class="message-box">
+			<view class="message-item">
+				<view class="item-left"> 支付方式 </view>
+				<view class="item-right flex-end">
+					<span>在线支付</span>
+					<image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
+				</view>
+			</view>
+		</view>
+
+		<!-- 购买须知 -->
+		<view class="message-box">
+			<view class="message-name"> 购买须知 </view>
+			<view class="message-text" style="text-indent:32.4px;">
+				洗车机常见的类型有高压洗车机和无水洗车机两种,高压洗车机可以配有不同的喷嘴,可实现不同场景下的清洗需求。
+				无水洗车机则是一种更为环保的洗车方式,它可以用高科技的化学技术在不用水的情况下清洗车辆。因此,
+				在购买洗车机时需要根据自己的实际需求进行选择
+			</view>
+		</view>
+		
+		<view class="btn-box">
+			<view class="btn" @click="handlerSettleBtn">
+				立即支付
+			</view>
+		</view>
+		
+	</view>
+
+
+
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				processList: ['线上订单', '预约时间', '到店核销', '完成离店'],
+				items: [{
+						name: '商品1',
+						quantity: 1,
+						price: 10,
+
+					},
+					{
+						name: '商品2',
+						quantity: 2,
+						price: 20,
+
+					}
+				],
+				remark: '', // 订单备注
+				inputRemark: '', // 弹框中的备注输入
+				showModal: false, // 是否显示弹框
+				// showCollapse: false,
+				totalPrice: 100 // 替换为您的商品总价
+			}
+		},
+		methods: {
+			toggleCollapse() {
+				this.showCollapse = !this.showCollapse;
+			},
+			// 点击订单备注显示弹框
+			showRemarkModal() {
+				this.inputRemark = this.remark; // 将订单备注传入弹框输入框
+				this.showModal = true; // 显示弹框
+			},
+			// 保存备注
+			saveRemark() {
+				this.remark = this.inputRemark; // 更新订单备注
+				this.showModal = false; // 关闭弹框
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.submit {
+		padding: 16px;
+		background-color: rgb(249, 249, 249);
+
+	}
+
+	.address-box {
+		display: flex;
+		justify-content: space-between;
+		padding: 5px 10px;
+		border-radius: 10px;
+		background-color: #ffffff;
+		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+
+		.left {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+
+			.info {
+				display: flex;
+				align-items: center;
+
+				.icon {
+					width: 30px;
+					height: 30px;
+					margin-right: 10px;
+				}
+
+				.name {
+					font-weight: bold;
+					font-size: 16px;
+					margin-left: 10px;
+				}
+
+				.phone {
+					font-size: 14px;
+					margin-left: 10px;
+				}
+			}
+
+			.address {
+				display: flex;
+				align-items: center;
+				margin-top: 10px;
+
+				.icon {
+					margin-right: 10px;
+				}
+
+				.address-text {
+					font-size: 14px;
+					margin-left: 10px;
+				}
+			}
+		}
+
+		.right {
+			display: block;
+			text-align: right;
+			align-self: center;
+			/* 垂直居中 */
+		}
+	}
+
+	.order-container {
+		margin-top: 20px;
+		border-radius: 10px;
+		background-color: #ffffff;
+		padding: 20px;
+		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+
+		.order-header {
+			margin-bottom: 20px;
+
+			.title {
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+		}
+
+		.order-items {
+			margin-bottom: 20px;
+
+			.order-item {
+				display: flex;
+				align-items: flex-start;
+				margin-bottom: 10px;
+
+				image {
+					height: auto;
+					margin-right: 10px;
+				}
+
+				.item-details {
+					flex-grow: 1;
+
+					.item-name {
+						font-size: 16px;
+						font-weight: bold;
+					}
+
+					.item-quantity,
+					.item-price {
+						font-size: 14px;
+						color: #666666;
+					}
+				}
+			}
+		}
+
+		.order-footer {
+			.remark {
+				cursor: pointer;
+			}
+		}
+
+		.modal {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background-color: rgba(0, 0, 0, 0.5);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			.modal-content {
+				background-color: #ffffff;
+				padding: 20px;
+				border-radius: 10px;
+
+				textarea {
+					width: 100%;
+					height: 100px;
+					border-radius: 5px;
+					border: 1px solid #ccc;
+					resize: none;
+					margin-bottom: 10px;
+				}
+
+				button {
+					width: 100%;
+					padding: 10px;
+					background-color: #007bff;
+					color: #ffffff;
+					border: none;
+					border-radius: 5px;
+					cursor: pointer;
+				}
+			}
+		}
+
+	}
+
+	.container {
+		margin-top: 20px;
+		border-radius: 10px;
+		padding: 10px;
+		border-radius: 10px;
+		background-color: #ffffff;
+		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+
+		.title {
+			font-size: 32rpx;
+			font-weight: bold;
+			margin-bottom: 10px;
+		}
+
+	}
+
+
+	.process {
+		display: flex;
+		justify-content: space-between; // 子元素水平分布
+		flex-grow: 1;
+
+		.process-item {
+			display: flex;
+			align-items: center;
+			flex-grow: 1;
+
+			/* 使所有子元素等比例宽度 */
+			.item-header {
+				display: flex; // 子元素采用 Flex 布局
+				flex-direction: column;
+				align-items: center;
+				flex-grow: 1;
+
+				.item-icon {
+					width: 40px; // 设置图标宽度
+					height: 40px; // 设置图标高度
+					margin-right: 10px; // 设置图标与文字之间的间距
+				}
+			}
+
+			.arrow-icon {
+				width: 20px; // 设置箭头图标宽度
+				height: 20px; // 设置箭头图标高度
+			}
+		}
+
+	}
+
+	// .arrow-icon,
+	// .process .item-header .item-icon,
+	// .process .arrow-icon {
+	// 	width: 20px;
+	// 	height: 20px;
+	// 	margin-right: 5px;
+	// }
+
+	// .process .process-item {
+	// 	display: flex;
+	// 	align-items: center;
+	// }
+
+	.item-header .item-icon {
+		margin-right: 5px; // 调整图标与文字之间的间距
+	}
+
+	.process .process-item:last-child .arrow-icon {
+		display: none; // 最后一个标题后面不显示箭头图标
+	}
+
+	.message-box {
+		border-radius: 10px;
+		padding: 10px;
+		border-radius: 10px;
+		background-color: #ffffff;
+		margin-top: 20rpx;
+		box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
+
+
+		.message-item {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.item-left {
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+
+			.item-right {
+				width: 60%;
+				align-items: center;
+				display: flex;
+				justify-content: flex-end;
+
+				.right-img {
+					width: 50rpx;
+					height: 50rpx;
+					margin-left: 20rpx;
+				}
+			}
+		}
+
+		.message-name {
+			font-size: 32rpx;
+			font-weight: bold;
+		}
+
+		.message-text {
+			margin-top: 20rpx;
+			color: #bcbfc3;
+		}
+	}
+	.btn-box {
+		width: 100%;
+		margin-top: 20px;
+		margin-bottom: 30px;
+	
+		.btn {
+			width: 90%;
+			// background: linear-gradient(to right, #1d4350, #a43931);
+			background-color: #007bff;
+			color: #fff;
+			border-radius: 40rpx;
+			text-align: center;
+			font-size: 32rpx;
+			padding: 20rpx;
+		}
+	}
+	
+</style>

二進制
src/static/order/pathliuchen.png


二進制
src/static/order/pathliuchenjiantou.png