feat: 优化获取验证码界面，优化工具类方法，优化u-message-input在ios端输入问题

guzijian
1 parent 98c47411
Showing 15 changed files with 856 additions and 394 deletions
garbage-removal/.env.production
garbage-removal/src/App.vue
garbage-removal/src/apis/user.js
garbage-removal/src/components/uni-combox/index.vue
garbage-removal/src/pages/home/clean/index.vue
garbage-removal/src/pages/home/index.vue
garbage-removal/src/pages/login/code.vue
garbage-removal/src/pages/login/index.vue
garbage-removal/src/pages/order/detail/index.vue
garbage-removal/src/pages/order/upload/index.vue
garbage-removal/src/pages/wode/index.vue
garbage-removal/src/static/image/logo-1.png
garbage-removal/src/static/image/logo.png
garbage-removal/src/utils/request/request.js
garbage-removal/src/uview-plus/components/u-message-input/u-message-input.vue
-# VITE_BASE_URL=http://1.14.107.94:8820
+VITE_BASE_URL=http://101.95.0.106:10001/workflow
 # VITE_BASE_FILE_UPLOAD_PREFIX=/common/upload
 # VITE_STOMP_URL=http://localhost:8860/ws
@@ -8,14 +8,9 @@ onLaunch(async () =&gt; {
   console.log("onLaunch");
   if (store.token) {
     setRequestToken(store.token);
-    // store.userInfo = (await getUserInfo()).data.data;
     uni.switchTab({
       url: "/pages/home/index",
     });
-  } else {
-    uni.reLaunch({
-      url: "/pages/login/index",
-    });
   }
 });
 </script>
@@ -15,6 +15,16 @@ export async function userLogin( params, config) {
 }
 /**
+ * @method 退出登录
+ */
+export async function loginOut( params, config) {
+  return await request.post(
+    `${prefix}/logout`,
+  );
+}
+
+
+/**
  * @method 获取用户信息
  */
 export async function getUserInfo(config) {
+<template>
+	<view class="uni-combox" :class="border ? '' : 'uni-combox__no-border'">
+		<view v-if="label" class="uni-combox__label" :style="labelStyle">
+			<text>{{ label }}</text>
+		</view>
+		<view class="uni-combox__input-box">
+			<input class="uni-combox__input" type="text" :placeholder="placeholder" placeholder-class="uni-combox__input-plac"
+				v-model="inputVal" @input="onInput" @focus="onFocus" @blur="onBlur" />
+			<uni-icons :type="showSelector ? 'top' : 'bottom'" size="14" color="#999" @click="toggleSelector">
+			</uni-icons>
+		</view>
+		<view class="uni-combox__selector" v-if="showSelector">
+			<view class="uni-popper__arrow"></view>
+			<scroll-view scroll-y="true" class="uni-combox__selector-scroll">
+				<view class="uni-combox__selector-empty" v-if="filterCandidatesLength === 0">
+					<text>{{ emptyTips }}</text>
+				</view>
+				<view class="uni-combox__selector-item" v-for="(item, index) in filterCandidates" :key="index"
+					@click="onSelectorClick(index)">
+					<text>{{ item }}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * Combox 组合输入框
+ * @description 组合输入框一般用于既可以输入也可以选择的场景
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=1261
+ * @property {String} label 左侧文字
+ * @property {String} labelWidth 左侧内容宽度
+ * @property {String} placeholder 输入框占位符
+ * @property {Array} candidates 候选项列表
+ * @property {String} emptyTips 筛选结果为空时显示的文字
+ * @property {String} value 组合框的值
+ */
+export default {
+	name: 'uniCombox',
+	emits: ['input', 'update:modelValue'],
+	props: {
+		border: {
+			type: Boolean,
+			default: true
+		},
+		label: {
+			type: String,
+			default: ''
+		},
+		labelWidth: {
+			type: String,
+			default: 'auto'
+		},
+		placeholder: {
+			type: String,
+			default: ''
+		},
+		candidates: {
+			type: Array,
+			default() {
+				return []
+			}
+		},
+		emptyTips: {
+			type: String,
+			default: '无匹配项'
+		},
+		// #ifndef VUE3
+		value: {
+			type: [String, Number],
+			default: ''
+		},
+		// #endif
+		// #ifdef VUE3
+		modelValue: {
+			type: [String, Number],
+			default: ''
+		},
+		// #endif
+	},
+	data() {
+		return {
+			showSelector: false,
+			inputVal: ''
+		}
+	},
+	computed: {
+		labelStyle() {
+			if (this.labelWidth === 'auto') {
+				return ""
+			}
+			return `width: ${this.labelWidth}`
+		},
+		filterCandidates() {
+			return this.candidates.filter((item) => {
+				return item.toString().indexOf(this.inputVal) > -1
+			})
+		},
+		filterCandidatesLength() {
+			return this.filterCandidates.length
+		}
+	},
+	watch: {
+		// #ifndef VUE3
+		value: {
+			handler(newVal) {
+				this.inputVal = newVal
+			},
+			immediate: true
+		},
+		// #endif
+		// #ifdef VUE3
+		modelValue: {
+			handler(newVal) {
+				this.inputVal = newVal
+			},
+			immediate: true
+		},
+		// #endif
+	},
+	methods: {
+		toggleSelector() {
+			this.showSelector = !this.showSelector
+		},
+		onFocus() {
+			this.showSelector = true
+		},
+		onBlur() {
+			setTimeout(() => {
+				this.showSelector = false
+			}, 153)
+		},
+		onSelectorClick(index) {
+			this.inputVal = this.filterCandidates[index]
+			this.showSelector = false
+			this.$emit('input', this.inputVal)
+			this.$emit('update:modelValue', this.inputVal)
+		},
+		onInput() {
+			setTimeout(() => {
+				this.$emit('input', this.inputVal)
+				this.$emit('update:modelValue', this.inputVal)
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.uni-combox {
+	font-size: 14px;
+	border: 1px solid #DCDFE6;
+	border-radius: 4px;
+	padding: 6px 10px;
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	// height: 40px;
+	flex-direction: row;
+	align-items: center;
+	// border-bottom: solid 1px #DDDDDD;
+	color: $u-info;
+}
+
+.uni-combox__label {
+	font-size: 16px;
+	line-height: 22px;
+	padding-right: 10px;
+	color: #999999;
+}
+
+.uni-combox__input-box {
+	position: relative;
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	flex: 1;
+	flex-direction: row;
+	align-items: center;
+}
+
+.uni-combox__input {
+	flex: 1;
+	font-size: 14px;
+	height: 22px;
+	line-height: 22px;
+	color: $u-info;
+}
+
+.uni-combox__input-plac {
+	font-size: 14px;
+	color: #999;
+}
+
+.uni-combox__selector {
+	/* #ifndef APP-NVUE */
+	box-sizing: border-box;
+	/* #endif */
+	position: absolute;
+	top: calc(100% + 12px);
+	left: 0;
+	width: 100%;
+	background-color: #FFFFFF;
+	border: 1px solid #EBEEF5;
+	border-radius: 6px;
+	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+	z-index: 2;
+	padding: 4px 0;
+}
+
+.uni-combox__selector-scroll {
+	/* #ifndef APP-NVUE */
+	max-height: 200px;
+	box-sizing: border-box;
+	/* #endif */
+}
+
+.uni-combox__selector-empty,
+.uni-combox__selector-item {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	cursor: pointer;
+	/* #endif */
+	line-height: 36px;
+	font-size: 14px;
+	text-align: center;
+	// border-bottom: solid 1px #DDDDDD;
+	padding: 0px 10px;
+}
+
+.uni-combox__selector-item:hover {
+	background-color: #f9f9f9;
+}
+
+.uni-combox__selector-empty:last-child,
+.uni-combox__selector-item:last-child {
+	/* #ifndef APP-NVUE */
+	border-bottom: none;
+	/* #endif */
+}
+
+// picker 弹出层通用的指示小三角
+.uni-popper__arrow,
+.uni-popper__arrow::after {
+	position: absolute;
+	display: block;
+	width: 0;
+	height: 0;
+	border-color: transparent;
+	border-style: solid;
+	border-width: 6px;
+}
+
+.uni-popper__arrow {
+	filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
+	top: -6px;
+	left: 10%;
+	margin-right: 3px;
+	border-top-width: 0;
+	border-bottom-color: #EBEEF5;
+}
+
+.uni-popper__arrow::after {
+	content: " ";
+	top: 1px;
+	margin-left: -6px;
+	border-top-width: 0;
+	border-bottom-color: #fff;
+}
+
+.uni-combox__no-border {
+	border: none;
+}
+</style>
@@ -3,15 +3,14 @@
     <view class="company-clean-container-box">
       <view class="company-clean-container-header">
         <view class="company-clean-container-header-address">
-          {{ userAddress.garUserAddress + userAddress.garRemark }}
+          {{ userAddress.garUserAddress }}{{ userAddress.garRemark }}
         </view>
         <view class="company-clean-container-header-base-info">
           {{ userAddress.garUserContactName }} {{ userAddress.garUserContactTel }}
         </view>
         <view class="company-clean-container-header-reservation">
           <view class="company-clean-container-header-reservation-left">
-            <u-icon name="calendar" size="40"></u-icon>
-            预约时间
+            <text style="color: red;">*</text> <u-icon name="calendar" size="40"></u-icon>预约时间
           </view>
           <view class="company-clean-container-header-reservation-right">
             <text style="margin-right: 10rpx;" @click="handleTimeChoose">{{ dayTime ? dayTime : "请选择时间" }}</text> <u-icon
@@ -21,28 +20,31 @@
         </view>
       </view>
       <view class="company-clean-container-car-main">
-        <view class="company-clean-container-car-main-title">
+        <!-- <view class="company-clean-container-car-main-title">
           自卸车
-        </view>
+        </view> -->
         <view class="company-clean-container-car-main-content">
-          <view class="company-clean-container-car-main-content-img">
+          <view class="company-clean-container-car-main-content-type">
+            <text class="company-clean-container-car-main-content-type-price-area"><text
+                style="color: red;">*</text>垃圾类型:</text>
+            <uni-combox label="" :candidates="garbageTypeList" placeholder="请选择垃圾类型"
+              v-model="paramFrom.garbageType"></uni-combox>
+          </view>
+          <!-- <view class="company-clean-container-car-main-content-img">
             <image class="company-clean-container-car-main-content-img" />
           </view>
           <view class="company-clean-container-car-main-content-remark">
             箱体长4.2m宽1.1，高0.7，最多课容纳约110袋袋装修垃圾（75cm*45每袋）
-          </view>
+          </view> -->
           <view class="company-clean-container-car-main-content-type">
-            <view class="company-clean-container-car-main-content-type-choose">
-              <text style="margin-right: 10rpx;">6方车</text>
-              <u-icon name="arrow-down" size="30" color="#ffffff"></u-icon>
-            </view>
-            <view class="company-clean-container-car-main-content-type-price-area">
-              车
-            </view>
+            <text class="company-clean-container-car-main-content-type-price-area"><text
+                style="color: red;">*</text>车辆类型:</text>
+            <uni-combox label="" :candidates="candidates" placeholder="请选择运输车辆类型"
+              v-model="paramFrom.carType"></uni-combox>
           </view>
           <view class="company-clean-container-car-main-content-number">
             <view class="company-clean-container-car-main-content-number-txt">
-              添加车辆数量
+              <text style="color: red;">*</text>添加车辆数量
             </view>
             <view class="company-clean-container-car-main-content-number-button">
               <u-number-box :min="1" integer buttonSize="46" v-model="paramFrom.carNumber"></u-number-box>
@@ -72,8 +74,8 @@
       <view class="company-clean-container-site-image-info-sure-button">
         <view class="company-clean-container-site-image-info-sure-button-radio">
           <u-radio-group v-model="paramFrom.sureReadFlag">
-            <u-radio activeColor="#a9e08f" size="27" labelSize="25" :labelDisabled="true" labelColor="#909399"
-              label=""></u-radio>本人已确认信息真实有效，并将上述信息告知市容环境卫生主管部门。
+            <u-radio activeColor="#a9e08f" size="27" labelSize="25" :name="true" :labelDisabled="true"
+              labelColor="#909399" label=""></u-radio>本人已确认信息真实有效，并将上述信息告知市容环境卫生主管部门。
           </u-radio-group>
         </view>
       </view>
@@ -103,6 +105,7 @@ import { queryCarList } from &#39;@/apis/carinfo.js&#39;;
 import { uploadFilePromise } from '@/apis/common.js';
 import { saveOrder } from '@/apis/order.js';
 import liuDeliveryTime from "@/components/liu-delivery-time/liu-delivery-time.vue";
+import uniCombox from "@/components/uni-combox/index.vue";
 import { onLoad } from '@dcloudio/uni-app';
 import { getCurrentInstance, onMounted, ref } from 'vue';
 const { proxy } = getCurrentInstance();
@@ -111,18 +114,25 @@ const y = ref()
 const movableAreaElement = ref()
 const companyObj = ref()
 const tel = ref()
-const userAddress = ref()
-const carList = ref();
+const userAddress = ref({
+  garUserContactName: "",
+  garUserContactTel: "",
+  garRemark: "",
+  garUserAddress: ""
+})
+const garbageTypeList = ref(["建筑垃圾", "装修垃圾"])
 const paramFrom = ref({
-  carNumber: 0,
+  carNumber: 1,
   remark: "",
-  sureReadFlag: false
+  sureReadFlag: false,
+  carType: "",
+  garbageType: "装修垃圾"
 })
 const dayTime = ref()
 const chooseTime = ref()
 const fileList = ref([])
-
+const candidates = ref([])
 const handleTimeChoose = () => {
   chooseTime.value.open();
 }
@@ -135,12 +145,12 @@ const changeTime = (e) =&gt; {
  */
 onLoad((options) => {
   companyObj.value = JSON.parse(options.companyObj);
-  console.log(companyObj.value);
   tel.value = options.tel;
   userAddress.value = JSON.parse(options.userAddress);
-  queryCarList({ companyId: companyObj.value.id }.then(res => {
-    carList.value = res.data.rows
-  }))
+  queryCarList({ companyId: companyObj.value.id }).then(res => {
+    candidates.value = res.data.rows.map(item => item.carType)
+    console.log(candidates.value);
+  })
 })
 /**
@@ -188,14 +198,13 @@ const afterRead = async (event) =&gt; {
  * 处理车子数量
  */
 const handleCarInfo = () => {
-  console.log("车子数量");
+
 }
 /**
  * 处理下单
  */
 const handleOderSure = () => {
-  console.log("下单了", companyObj.value);
   let params = {
     /**
      * 订单地址
@@ -211,11 +220,13 @@ const handleOderSure = () =&gt; {
      * 订单姓名
      */
     garOrderContactName: userAddress.value.garUserContactName,
+    garOrderCarNumber: paramFrom.value.carNumber,
+    garOrderCarType: paramFrom.value.carType,
     /**
      * 垃圾类型
      */
-    garOrderTrashType: "建筑垃圾",
+    garOrderTrashType: paramFrom.value.garbageType,
     /**
      * 订单人电话
@@ -254,7 +265,6 @@ const handleOderSure = () =&gt; {
     return;
   }
   saveOrder(params).then(res => {
-    console.log(res);
     // TODO 订单详情
     if (res.data.success) {
       uni.$u.route({
@@ -284,6 +294,73 @@ onMounted(() =&gt; {
 })
 const validateParams = (params) => {
+  if (!paramFrom.value.sureReadFlag) {
+    jumpPrompt('请勾选"本人已确认信息真实有效，并将上诉信息告知市容环境卫生主管部门"')
+    return false;
+  }
+  for (const key in params) {
+    if (!params[key] && key != "garRemark") {
+      switch (key) {
+        case "garOrderAgreementTime":
+          jumpPrompt('请选择预约时间')
+          break;
+        case "garOrderTrashType":
+          jumpPrompt('请选择垃圾类型')
+          break;
+        case "garOrderCarType":
+          jumpPrompt('请选择车辆类型')
+          break;
+      }
+      return false;
+    }
+    console.log("key:", key, key == "imageUrls");
+    if (key == "imageUrls") {
+      if (params[key].length == 0) {
+        jumpPrompt('请上传现场图片')
+        return false;
+      }
+      if (!validateImage(params[key])) {
+        uni.$u.toast('请等待图片上传完毕')
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+const jumpPrompt = (msg) => {
+  uni.showModal({
+    title: '提示',
+    content: msg,
+    showCancel: false,
+    success: function (res) {
+      if (res.confirm) {
+      } else if (res.cancel) {
+      }
+    }
+  });
+}
+const validateImage = (fileList) => {
+  console.log(fileList);
+
+  for (let index = 0; index < fileList.length; index++) {
+    const str = fileList[index];
+    // #ifdef H5
+    if (str.startsWith("blob")) {
+      return false;
+    }
+    // #endif
+    // #ifdef MP-WEIXIN
+    if (uni.$u.test.contains(str, "/tmp/")) {
+      return false;
+    }
+    // #endif
+
+  }
+  //
+  // #ifdef
+
   return true;
 }
@@ -396,30 +473,15 @@ $custom-bottom-height: 200rpx;
           display: flex;
           justify-content: space-between;
           border-radius: $custom-border-radio;
-          background-color: $u-info-light;
+          // background-color: $u-info-light;
           box-sizing: border-box;
-          font-size: 30rpx;
-
-          .company-clean-container-car-main-content-type-choose {
-            width: 230rpx;
-            color: #ffffff;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: #a9e08f;
-            padding: 30rpx $custom-page-padding 30rpx $custom-page-padding;
-            box-sizing: border-box;
-            border-radius: $custom-border-radio 0 0 $custom-border-radio;
-          }
           .company-clean-container-car-main-content-type-price-area {
-            width: 100%;
             display: flex;
-            justify-content: flex-end;
+            justify-content: flex-start;
             align-items: center;
-            box-sizing: border-box;
-            color: $u-tips-color;
-            padding-right: $custom-page-padding;
+            color: $u-info;
+            white-space: nowrap;
           }
         }
@@ -28,7 +28,7 @@
       <view class="company-container">
         <span class="company-label-info">可进行垃圾清运单位</span>
-        <view class="company-list-box">
+        <view class="company-list-box" v-if="addressInfo">
           <view class="company-list-header">
             <view class="company-list-header-left">
               综合排序
@@ -85,12 +85,26 @@
                   </view>
                 </view>
               </z-paging>
-
             </view>
           </view>
         </view>
+        <view class="company-empty" v-else @click="handleCleanClick">
+          <view class="empty-text-title">
+            请先添加地址
+          </view>
+          <view class="empty-text-content">
+            房屋装饰装修过程中产生的砖瓦、木材、熟料等废弃物
+          </view>
+          <view class="empty-text-box">
+            <view class="empty-text-box-button">
+              立即清运
+            </view>
+          </view>
+        </view>
+
       </view>
     </view>
+
   </view>
 </template>
@@ -107,8 +121,6 @@ const topMargin = ref(null);//状态栏高度
 const musicheadHeight = ref();
 const paging = ref(null)
 const swiperImageList = ref([{
-  image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-}, {
   image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
 }, {
   image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
@@ -154,7 +166,21 @@ function handleAddressInfo() {
     url: `pages/home/address/index`,
   })
 }
-
+const handleCleanClick = () => {
+  uni.showModal({
+    title: '',
+    content: '请先添加清运地址',
+    success: function (res) {
+      if (res.confirm) {
+        uni.$u.route({
+          url: `pages/home/address/index`,
+        })
+      } else if (res.cancel) {
+        console.log('用户点击取消');
+      }
+    }
+  });
+}
 /**
  * 公司详情
  */
@@ -209,7 +235,7 @@ const initData = () =&gt; {
   userAddress.value = null;
   // 查询用户当前地址
   queryAddress('CURRENT').then(res => {
-    if (res.data.data instanceof Array) {
+    if (res.data.data && res.data.data[0]) {
       addressInfo.value = res.data.data[0].garUserAddress + res.data.data[0].garRemark
       userAddress.value = JSON.stringify(res.data.data[0] ? res.data.data[0] : {});
     }
@@ -345,6 +371,45 @@ const queryList = (pageNo, pageSize) =&gt; {
         font-size: 30rpx;
         width: 100%;
         color: $u-info-dark;
+
+      }
+
+      .company-empty {
+        width: 100%;
+        height: 300rpx;
+        box-sizing: border-box;
+        border-radius: 20rpx;
+        background: linear-gradient(to bottom, $u-primary, $u-primary-disabled);
+        // background-image: url("https://cdn.uviewui.com/uview/swiper/swiper2.png");
+        color: #ffffff;
+        background-size: 100% 100%;
+        padding: 20rpx;
+
+        .empty-text-title {
+          font-size: 30rpx;
+          line-height: 60rpx;
+        }
+
+        .empty-text-content {
+          font-size: small;
+          width: 60%;
+          line-height: 40rpx;
+        }
+
+        .empty-text-box {
+          // width: 0%;
+          display: flex;
+
+          .empty-text-box-button {
+            margin-top: 20rpx;
+            padding: 15rpx 30rpx 15rpx 30rpx;
+            white-space: nowrap;
+            box-sizing: border-box;
+            border-radius: 50rpx;
+            background-color: orange;
+            font-size: 25rpx;
+          }
+        }
       }
       .company-list-box {
@@ -485,5 +550,6 @@ const queryList = (pageNo, pageSize) =&gt; {
       }
     }
   }
+
 }
 </style>
@@ -3,7 +3,7 @@
 		<view class="key-input">
 			<view class="title">输入验证码</view>
 			<view class="tips">验证码已发送至 +{{ startIphoneNumber }}</view>
-			<u-message-input :focus="true" :value="value" @change="change" @finish="finish" mode="bottomLine"
+			<u-message-input :value="value" :focus="true" @change="change" @finish="finish" mode="bottomLine"
 				:maxlength="maxlength"></u-message-input>
 			<text v-if="verifyFlag" class="error">验证码错误，请重新输入</text>
 			<view class="captcha">
@@ -18,7 +18,8 @@
 import { sendCode, userLogin } from "@/apis/user.js";
 import { useMainStore } from '@/stores/index.js';
 import { onLoad } from "@dcloudio/uni-app";
-import { ref } from "vue";
+import { getCurrentInstance, ref } from "vue";
+const { proxy } = getCurrentInstance();
 const store = useMainStore();
 const verifyFlag = ref(false)
 const iphoneNumber = ref("")
@@ -32,15 +33,7 @@ onLoad((options) =&gt; {
 	iphoneNumber.value = options.iphoneNumber;
 	startIphoneNumber.value = handleIphoneNumber("" + options.iphoneNumber);
 	getCaptcha(iphoneNumber.value)
-	let interval = setInterval(() => {
-		second.value--;
-		if (second.value <= 0) {
-			show.value = true
-			clearInterval(interval);
-		}
-	}, 1000);
 })
-
 const handleIphoneNumber = (tel) => {
 	return tel.replace(tel.substring(3, 7), "****");
 }
@@ -49,6 +42,9 @@ const getCaptcha = (iphoneNumber) =&gt; {
 	value.value = ''
 	second.value = 10
 	show.value = false;
+	sendCode(iphoneNumber).then(res => {
+		proxy.$u.toast(res.data.data)
+	})
 	let interval = setInterval(() => {
 		second.value--;
 		if (second.value <= 0) {
@@ -56,9 +52,7 @@ const getCaptcha = (iphoneNumber) =&gt; {
 			clearInterval(interval);
 		}
 	}, 1000);
-	sendCode(iphoneNumber).then(res => {
-		console.log(res);
-	})
+
 }
 // 收不到验证码选择时的选择
 const noCaptcha = () => {
@@ -80,7 +74,7 @@ const checkVerifyNum = (code) =&gt; {
 		if (res.data.success) {
 			verifyFlag.value = false;
 			store.tempToken = res.data.data
-			uni.$u.route({
+			proxy.$u.route({
 				url: `pages/wode/choose/index`,
 			})
 		} else {
@@ -91,6 +85,7 @@ const checkVerifyNum = (code) =&gt; {
 // change事件侦听
 const change = (value) => {
+	// console.log("value:", value);
 }
 // 输入完验证码最后一位执行
@@ -115,6 +110,8 @@ const finish = (value) =&gt; {
 .key-input {
 	padding: 30rpx 0;
+	-webkit-user-select: text !important;
+
 	text {
 		display: none;
 	}
@@ -34,7 +34,7 @@ import { userLogin } from &quot;@/apis/user.js&quot;;
 export default {
 	data() {
 		return {
-			tel: '18980249160'
+			tel: '18977778888'
 		}
 	},
 	computed: {
@@ -27,7 +27,6 @@
             {{ dataGram.garOrderAddress + dataGram.garOrderAddressDetails }}
           </view>
         </view>
-
         <view class="order-detail-container-header-item">
           <text class="order-detail-container-header-title">现场图片：</text>
           <view class="order-detail-container-header-content">
@@ -42,13 +41,19 @@
           </view>
         </view>
         <view class="order-detail-container-header-item">
+          <text class="order-detail-container-header-title">车辆类型：</text>
+          <view class="order-detail-container-header-content">
+            {{ dataGram.garOrderCarType }}
+          </view>
+        </view>
+        <view class="order-detail-container-header-item">
           <text class="order-detail-container-header-title">垃圾类型：</text>
           <view class="order-detail-container-header-content">
             {{ dataGram.garOrderTrashType }}
           </view>
         </view>
         <view class="order-detail-container-header-item">
-          <text class="order-detail-container-header-title">订单号：</text>
+          <text class="order-detail-container-header-title">派单号：</text>
           <view class="order-detail-container-header-content">
             {{ orderId }}
           </view>
@@ -75,7 +80,7 @@
           <text class="order-detail-container-header-title">联系电话：</text>
           <view class="order-detail-container-header-content">
             {{ dataGram.garOrderContactTel }}
-            <u-icon name="phone" size="28" @click="handleContactClick(dataGram.garOrderCompanyTel)"></u-icon>
+            <u-icon name="phone" size="28" @click="handleContactClick(dataGram.garOrderContactTel)"></u-icon>
           </view>
         </view>
         <view class="order-detail-container-header-item">
@@ -96,35 +101,42 @@
         <view class="order-detail-container-header-card-title">
           处理信息
         </view>
-        <view class="order-detail-container-header-item">
-          <text class="order-detail-container-header-title">负责人：</text>
-          <view class="order-detail-container-header-content">
-            {{ dataGram.garOrderHandlerId }}
+        <view v-if="dataGram.garOrderHandlerId" style="width: 100%;">
+          <view class="order-detail-container-header-item">
+            <text class="order-detail-container-header-title">负责人：</text>
+            <view class="order-detail-container-header-content">
+              {{ dataGram.garOrderHandleName }}
+            </view>
           </view>
-        </view>
-        <view class="order-detail-container-header-item">
-          <text class="order-detail-container-header-title">装车照片：</text>
-          <view class="order-detail-container-header-content">
-            <u-upload :fileList="putOnImages" name="3" multiple :maxCount="20" :previewFullImage="true"
-              :isReadOnly="true"></u-upload>
+          <view class="order-detail-container-header-item">
+            <text class="order-detail-container-header-title">联系方式：</text>
+            <view class="order-detail-container-header-content">
+              {{ dataGram.garOrderHandleTel }}
+            </view>
           </view>
-        </view>
-        <view class="order-detail-container-header-item">
-          <text class="order-detail-container-header-title">卸车照片：</text>
-          <view class="order-detail-container-header-content">
-            <u-upload :fileList="putDownImages" name="3" multiple :maxCount="20" :previewFullImage="true"
-              :isReadOnly="true"></u-upload>
+          <view class="order-detail-container-header-item">
+            <text class="order-detail-container-header-title">装车照片：</text>
+            <view class="order-detail-container-header-content">
+              <u-upload :fileList="putOnImages" name="3" multiple :maxCount="20" :previewFullImage="true"
+                :isReadOnly="true"></u-upload>
+            </view>
           </view>
-        </view>
-        <!-- <view class="order-detail-container-header-item">
-          <text class="order-detail-container-header-title">备注：</text>
-          <view class="order-detail-container-header-content">
-            {{ dataGram.garRemark }}
+          <view class="order-detail-container-header-item">
+            <text class="order-detail-container-header-title">卸车照片：</text>
+            <view class="order-detail-container-header-content">
+              <u-upload :fileList="putDownImages" name="3" multiple :maxCount="20" :previewFullImage="true"
+                :isReadOnly="true"></u-upload>
+            </view>
           </view>
-        </view> -->
+        </view>
+        <view v-else class="empty-image"
+          style="width: 100%; display: flex; justify-content: center; align-items: center;">
+          <image class="image-style" style="width: 200rpx; height: 200rpx;" :src="emptyBase64Image"></image>
+        </view>
       </view>
     </view>
-    <view class="space-box"></view>
+    <!-- 占位符 -->
+    <view class="space-box">{{ spaceStr }}</view>
     <view class="order-detail-bottom">
       <view class="order-detail-bottom-box">
         <view class="order-detail-bottom-left">
@@ -135,8 +147,8 @@
         <view class="order-detail-bottom-right">
           <u-button @click="handleOrder(orderId)" v-if="dataGram.garOrderHandlerStatus == 0 && dataGram.handleFlag"
             shape="circle" color="#a9e08f" text="处理派单"></u-button>
-          <u-button @click="handleUploadImage(orderId)" v-if="dataGram.garOrderHandlerStatus == 1" shape="circle"
-            color="#a9e08f" text="上传照片"></u-button>
+          <u-button @click="handleUploadImage(orderId)" v-if="dataGram.garOrderHandlerStatus == 1 && dataGram.handleFlag"
+            shape="circle" color="#a9e08f" text="上传照片"></u-button>
           <u-button @click="handleEvaluate(orderId)" v-if="dataGram.garEvaluateFlag == 0" shape="circle" color="#a9e08f"
             text="去评价"></u-button>
         </view>
@@ -147,6 +159,7 @@
 <script setup>
 import { queryOrderDetail, updateOrder } from "@/apis/order.js";
+import zStatic from '@/components/z-paging/js/z-paging-static';
 import { onLoad, onShow } from '@dcloudio/uni-app';
 import { ref } from 'vue';
 const dataGram = ref();
@@ -154,11 +167,14 @@ const orderId = ref(null)
 const currentImages = ref([])
 const putOnImages = ref([])
 const putDownImages = ref([])
+const emptyBase64Image = ref(zStatic.base64Empty)
+const spaceStr = ref("")
 /**
  * 初始化信息
  */
 onLoad((options) => {
   orderId.value = options.orderId
+  console.log(emptyBase64Image.value);
 })
 const handleOrderDetail = (orderId) => {
   queryOrderDetail(orderId).then(res => {
@@ -209,7 +225,7 @@ const handleEvaluate = (orderId) =&gt; [
 const handleOrder = (orderId) => {
   updateOrder({ garOrderId: orderId, handleType: 0 }).then(res => {
     if (res.data.success) {
-      uni.$u.toast("派单状态已被改变")
+      uni.$u.toast(res.data.data)
       handleOrderDetail(orderId)
     }
   })
@@ -257,6 +273,7 @@ $custom-bottom-height: 200rpx;
   background-color: $u-info-light;
   box-sizing: border-box;
   overflow-y: scroll;
+  background: linear-gradient(to bottom, $u-success-dark, $u-info-light, $u-info-light, $u-info-light);
   .order-detail-container-box {
@@ -264,7 +281,6 @@ $custom-bottom-height: 200rpx;
     width: 100%;
     padding: $custom-page-padding;
     box-sizing: border-box;
-    background: linear-gradient(to bottom, $u-success-dark, $u-info-light, $u-info-light, $u-info-light);
     .order-detail-top {
       @include card();
@@ -312,6 +328,7 @@ $custom-bottom-height: 200rpx;
   .space-box {
     padding-bottom: $custom-bottom-height;
+    margin-bottom: 40rpx;
   }
@@ -98,12 +98,25 @@ const handleSubmit = (id, type) =&gt; {
 }
 const validateImage = () => {
+
   for (let index = 0; index < fileList.value.length; index++) {
     const str = fileList.value[index].url;
+    // #ifdef H5
     if (str.startsWith("blob")) {
       return false;
     }
+    // #endif
+
+    // #ifdef MP-WEIXIN
+    if (uni.$u.test.contains(str, "/tmp/")) {
+      return false;
+    }
+    // #endif
+
   }
+  //
+  // #ifdef
+
   return true;
 }
@@ -18,42 +18,61 @@
     <view class="u-m-t-20">
       <u-cell-group>
-        <u-cell icon="map" title="地址管理"></u-cell>
+        <u-cell icon="map" @click="handleAddressManager" title="地址管理"></u-cell>
       </u-cell-group>
     </view>
     <view class="u-m-t-20">
-      <u-cell-group>
+      <!-- <u-cell-group>
         <u-cell icon="star" title="收藏"></u-cell>
         <u-cell icon="photo" title="相册"></u-cell>
         <u-cell icon="coupon" title="卡券"></u-cell>
         <u-cell icon="heart" title="关注"></u-cell>
-      </u-cell-group>
+      </u-cell-group> -->
     </view>
-    <view class="u-m-t-20">
+    <view class="u-m-t-40">
       <u-cell-group>
-        <u-cell icon="setting" title="设置"></u-cell>
+        <u-cell icon="setting" @click="handleLoginOut" title="退出登录"></u-cell>
       </u-cell-group>
     </view>
   </view>
 </template>
-<script>
+<script setup>
+import { loginOut } from "@/apis/user";
 import headImg from "@/static/image/st_pic.png";
-export default {
-  data() {
-    return {
-      pic: headImg,
-      show: true
+import { useMainStore } from "@/stores/index";
+import { ref } from "vue";
+const store = useMainStore();
+const pic = ref(headImg)
+const show = ref(true)
+const handleAddressManager = () => {
+  uni.$u.route({
+    url: `pages/home/address/index`,
+  })
+}
+const handleLoginOut = () => {
+  uni.showModal({
+    title: '提示',
+    content: '确定要退出码',
+    success: function (res) {
+      if (res.confirm) {
+        loginOut().then(res => {
+          if (res.data.success) {
+            store.token = null;
+            uni.$u.toast("已退出")
+            uni.$u.route({
+              type: "reLaunch",
+              url: "pages/login/index"
+            })
+          }
+        })
+      } else if (res.cancel) {
+        console.log('用户点击取消');
+      }
     }
-  },
-  onLoad() {
-
-  },
-  methods: {
-
-  }
+  });
 }
 </script>
@@ -95,7 +95,7 @@ const reSetLoginStatus = () =&gt; {
     title: "登录已过期，请重新登录！",
     icon: "none",
   });
-  uni.navigateTo({
+  uni.reLaunch({
     url: "/pages/login/index",
   })
   return
 <template>
 	<view class="u-char-box">
 		<view class="u-char-flex">
-			<input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength" class="u-input" @input="getVal"/>
+			<input :disabled="disabledKeyboard" :value="valueModel" type="number" :focus="focus" :maxlength="maxlength"
+				class="u-input" @input="getVal" />
 			<view v-for="(item, index) in loopCharArr" :key="index">
 				<view :class="[breathe && charArrLength == index ? 'u-breathe' : '', 'u-char-item',
 				charArrLength === index && mode == 'box' ? 'u-box-active' : '',
 				mode === 'box' ? 'u-box' : '']" :style="{
-					fontWeight: bold ? 'bold' : 'normal',
-					fontSize: fontSize + 'rpx',
-					width: width + 'rpx',
-					height: width + 'rpx',
-					color: inactiveColor,
-					borderColor: charArrLength === index && mode == 'box' ? activeColor : inactiveColor
-				}">
+	fontWeight: bold ? 'bold' : 'normal',
+	fontSize: fontSize + 'rpx',
+	width: width + 'rpx',
+	height: width + 'rpx',
+	color: inactiveColor,
+	borderColor: charArrLength === index && mode == 'box' ? activeColor : inactiveColor
+}">
 					<view class="u-placeholder-line" :style="{
-							display: charArrLength === index ? 'block' : 'none',
-							height: width * 0.5 +'rpx'
-						}"
-						v-if="mode !== 'middleLine'"
-					></view>
-					<view v-if="mode === 'middleLine' && charArrLength <= index" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
-					 class="u-middle-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
-					<view v-if="mode === 'bottomLine'" :class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-bottom-line-active' : '']"
-					 class="u-bottom-line" :style="{height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor}"></view>
-					<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : ''}}</block>
+						display: charArrLength === index ? 'block' : 'none',
+						height: width * 0.5 + 'rpx'
+					}" v-if="mode !== 'middleLine'"></view>
+					<view v-if="mode === 'middleLine' && charArrLength <= index"
+						:class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-middle-line-active' : '']"
+						class="u-middle-line"
+						:style="{ height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor }">
+					</view>
+					<view v-if="mode === 'bottomLine'"
+						:class="[breathe && charArrLength == index ? 'u-breathe' : '', charArrLength === index ? 'u-bottom-line-active' : '']"
+						class="u-bottom-line"
+						:style="{ height: bold ? '4px' : '2px', background: charArrLength === index ? activeColor : inactiveColor }">
+					</view>
+					<block v-if="!dotFill"> {{ charArr[index] ? charArr[index] : '' }}</block>
 					<block v-else>
-						<text class="u-dot">{{ charArr[index] ? '●' : ''}}</text>
+						<text class="u-dot">{{ charArr[index] ? '●' : '' }}</text>
 					</block>
 				</view>
 			</view>
@@ -34,285 +39,287 @@
 </template>
 <script>
-	/**
-	 * messageInput 验证码输入框
-	 * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
-	 * @tutorial https://www.uviewui.com/components/messageInput.html
-	 * @property {String Number} maxlength 输入字符个数（默认4）
-	 * @property {Boolean} dot-fill 是否用圆点填充（默认false）
-	 * @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
-	 * @property {String Number} value 预置值
-	 * @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
-	 * @property {Boolean} focus 是否自动获取焦点（默认false）
-	 * @property {Boolean} bold 字体和输入横线是否加粗（默认true）
-	 * @property {String Number} font-size 字体大小，单位rpx（默认60）
-	 * @property {String} active-color 当前激活输入框的样式（默认#2979ff）
-	 * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266）
-	 * @property {String | Number} width 输入框宽度，单位rpx，高等于宽（默认80）
-	 * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
-	 * @event {Function} change 输入内容发生改变时触发，具体见官网说明
-	 * @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
-	 * @example <u-message-input mode="bottomLine"></u-message-input>
-	 */
-	export default {
-		name: "u-message-input",
-		props: {
-			// 最大输入长度
-			maxlength: {
-				type: [Number, String],
-				default: 4
-			},
-			// 是否用圆点填充
-			dotFill: {
-				type: Boolean,
-				default: false
-			},
-			// 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
-			mode: {
-				type: String,
-				default: "box"
-			},
-			// 预置值
-			modelValue: {
-				type: [String, Number],
-				default: ''
-			},
-			// 当前激活输入item，是否带有呼吸效果
-			breathe: {
-				type: Boolean,
-				default: true
-			},
-			// 是否自动获取焦点
-			focus: {
-				type: Boolean,
-				default: false
-			},
-			// 字体是否加粗
-			bold: {
-				type: Boolean,
-				default: false
-			},
-			// 字体大小
-			fontSize: {
-				type: [String, Number],
-				default: 60
-			},
-			// 激活样式
-			activeColor: {
-				type: String,
-				default: '#2979ff'
-			},
-			// 未激活的样式
-			inactiveColor: {
-				type: String,
-				default: '#606266'
-			},
-			// 输入框的大小，单位rpx，宽等于高
-			width: {
-				type: [Number, String],
-				default: '80'
-			},
-			// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
-			disabledKeyboard: {
-				type: Boolean,
-				default: false
-			}
+/**
+ * messageInput 验证码输入框
+ * @description 该组件一般用于验证用户短信验证码的场景，也可以结合uView的键盘组件使用
+ * @tutorial https://www.uviewui.com/components/messageInput.html
+ * @property {String Number} maxlength 输入字符个数（默认4）
+ * @property {Boolean} dot-fill 是否用圆点填充（默认false）
+ * @property {String} mode 模式选择，见上方"基本使用"说明（默认box）
+ * @property {String Number} value 预置值
+ * @property {Boolean} breathe 是否开启呼吸效果，见上方说明（默认true）
+ * @property {Boolean} focus 是否自动获取焦点（默认false）
+ * @property {Boolean} bold 字体和输入横线是否加粗（默认true）
+ * @property {String Number} font-size 字体大小，单位rpx（默认60）
+ * @property {String} active-color 当前激活输入框的样式（默认#2979ff）
+ * @property {String} inactive-color 非激活输入框的样式，文字颜色同此值（默认#606266）
+ * @property {String | Number} width 输入框宽度，单位rpx，高等于宽（默认80）
+ * @property {Boolean} disabled-keyboard 禁止点击输入框唤起系统键盘（默认false）
+ * @event {Function} change 输入内容发生改变时触发，具体见官网说明
+ * @event {Function} finish 输入字符个数达maxlength值时触发，见官网说明
+ * @example <u-message-input mode="bottomLine"></u-message-input>
+ */
+export default {
+	name: "u-message-input",
+	props: {
+		// 最大输入长度
+		maxlength: {
+			type: [Number, String],
+			default: 4
+		},
+		// 是否用圆点填充
+		dotFill: {
+			type: Boolean,
+			default: false
+		},
+		// 显示模式，box-盒子模式，bottomLine-横线在底部模式，middleLine-横线在中部模式
+		mode: {
+			type: String,
+			default: "box"
+		},
+		// 预置值
+		modelValue: {
+			type: [String, Number],
+			default: ''
+		},
+		// 当前激活输入item，是否带有呼吸效果
+		breathe: {
+			type: Boolean,
+			default: true
+		},
+		// 是否自动获取焦点
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		// 字体是否加粗
+		bold: {
+			type: Boolean,
+			default: false
+		},
+		// 字体大小
+		fontSize: {
+			type: [String, Number],
+			default: 60
+		},
+		// 激活样式
+		activeColor: {
+			type: String,
+			default: '#2979ff'
 		},
-		watch: {
-			// maxlength: {
-			// 	// 此值设置为true，会在组件加载后无需maxlength变化就会执行一次本监听函数，无需再created生命周期中处理
-			// 	immediate: true,
-			// 	handler(val) {
-			// 		this.maxlength = Number(val);
-			// 	}
-			// }, 
-			modelValue: {
-				immediate: true,
-				handler(val) {
-					// 转为字符串
-					val = String(val);
-					// 超出部分截掉
-					this.valueModel = val.substring(0, this.maxlength);
-				}
-			},
+		// 未激活的样式
+		inactiveColor: {
+			type: String,
+			default: '#606266'
 		},
-		data() {
-			return {
-				valueModel: ""
+		// 输入框的大小，单位rpx，宽等于高
+		width: {
+			type: [Number, String],
+			default: '80'
+		},
+		// 是否隐藏原生键盘，如果想用自定义键盘的话，需设置此参数为true
+		disabledKeyboard: {
+			type: Boolean,
+			default: false
+		}
+	},
+	watch: {
+		// maxlength: {
+		// 	// 此值设置为true，会在组件加载后无需maxlength变化就会执行一次本监听函数，无需再created生命周期中处理
+		// 	immediate: true,
+		// 	handler(val) {
+		// 		this.maxlength = Number(val);
+		// 	}
+		// },
+		modelValue: {
+			immediate: true,
+			handler(val) {
+				// 转为字符串
+				val = String(val);
+				// 超出部分截掉
+				this.valueModel = val.substring(0, this.maxlength);
 			}
 		},
-		emits: ['change', 'finish'],
-		computed: {
-			// 是否显示呼吸灯效果
-			animationClass() {
-				return (index) => {
-					if (this.breathe && this.charArr.length == index) return 'u-breathe';
-					else return '';
-				}
-			},
-			// 用于显示字符
-			charArr() {
-				return this.valueModel.split('');
-			},
-			charArrLength() {
-				return this.charArr.length;
-			},
-			// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
-			loopCharArr() {
-				return new Array(this.maxlength);
+	},
+	data() {
+		return {
+			valueModel: ""
+		}
+	},
+	emits: ['change', 'finish'],
+	computed: {
+		// 是否显示呼吸灯效果
+		animationClass() {
+			return (index) => {
+				if (this.breathe && this.charArr.length == index) return 'u-breathe';
+				else return '';
 			}
 		},
-		methods: {
-			getVal(e) {
-				let {
-					value
-				} = e.detail
-				this.valueModel = value;
-				// 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值
-				if (String(value).length > this.maxlength) return;
-				// 未达到maxlength之前，发送change事件，达到后发送finish事件
-				this.$emit('change', value);
-				if (String(value).length == this.maxlength) {
-					this.$emit('finish', value);
-				}
+		// 用于显示字符
+		charArr() {
+			return this.valueModel.split('');
+		},
+		charArrLength() {
+			return this.charArr.length;
+		},
+		// 根据长度，循环输入框的个数，因为头条小程序数值不能用于v-for
+		loopCharArr() {
+			return new Array(this.maxlength);
+		}
+	},
+	methods: {
+		getVal(e) {
+			let {
+				value
+			} = e.detail
+			this.valueModel = value;
+			// 判断长度是否超出了maxlength值，理论上不会发生，因为input组件设置了maxlength属性值
+			if (String(value).length > this.maxlength) return;
+			// 未达到maxlength之前，发送change事件，达到后发送finish事件
+			this.$emit('change', value);
+			if (String(value).length == this.maxlength) {
+				this.$emit('finish', value);
 			}
 		}
 	}
+}
 </script>
 <style scoped lang="scss">
-	// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
-	@mixin vue-flex($direction: row) {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		flex-direction: $direction;
-		/* #endif */
-	}
-
-	@keyframes breathe {
-		0% {
-			opacity: 0.3;
-		}
+// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
+@mixin vue-flex($direction: row) {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	flex-direction: $direction;
+	/* #endif */
+}
-		50% {
-			opacity: 1;
-		}
-
-		100% {
-			opacity: 0.3;
-		}
+@keyframes breathe {
+	0% {
+		opacity: 0.3;
 	}
-	.u-char-box {
-		text-align: center;
+	50% {
+		opacity: 1;
 	}
-	.u-char-flex {
-		@include vue-flex;
-		justify-content: center;
-		flex-wrap: wrap;
-		position: relative;
+	100% {
+		opacity: 0.3;
 	}
+}
-	.u-input {
-		position: absolute;
-		top: 0;
-		left: -100%;
-		width: 200%;
-		height: 100%;
-		text-align: left;
-		z-index: 9;
-		opacity: 0;
-		background: none;
-	}
+.u-char-box {
+	text-align: center;
+}
-	.u-char-item {
-		position: relative;
-		width: 90rpx;
-		height: 90rpx;
-		margin: 10rpx 10rpx;
-		font-size: 60rpx;
-		font-weight: bold;
-		color: $u-main-color;
-		line-height: 90rpx;
-		@include vue-flex;
-		justify-content: center;
-		align-items: center;
-	}
+.u-char-flex {
+	@include vue-flex;
+	justify-content: center;
+	flex-wrap: wrap;
+	position: relative;
+	-webkit-user-select: text !important;
+}
-	.u-middle-line {
-		border: none;
-	}
+.u-input {
+	position: absolute;
+	top: 0;
+	left: -100%;
+	width: 200%;
+	height: 100%;
+	text-align: left;
+	z-index: 9;
+	opacity: 0;
+	background: none;
+	-webkit-user-select: text !important;
+}
-	.u-box {
-		box-sizing: border-box;
-		border: 2rpx solid #cccccc;
-		border-radius: 6rpx;
-	}
+.u-char-item {
+	position: relative;
+	width: 90rpx;
+	height: 90rpx;
+	margin: 10rpx 10rpx;
+	font-size: 60rpx;
+	font-weight: bold;
+	color: $u-main-color;
+	line-height: 90rpx;
+	@include vue-flex;
+	justify-content: center;
+	align-items: center;
+}
-	.u-box-active {
-		overflow: hidden;
-		animation-timing-function: ease-in-out;
-		animation-duration: 1500ms;
-		animation-iteration-count: infinite;
-		animation-direction: alternate;
-		border: 2rpx solid $u-primary;
-	}
+.u-middle-line {
+	border: none;
+}
-	.u-middle-line-active {
-		background: $u-primary;
-	}
+.u-box {
+	box-sizing: border-box;
+	border: 2rpx solid #cccccc;
+	border-radius: 6rpx;
+}
-	.u-breathe {
-		animation: breathe 2s infinite ease;
-	}
+.u-box-active {
+	overflow: hidden;
+	animation-timing-function: ease-in-out;
+	animation-duration: 1500ms;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	border: 2rpx solid $u-primary;
+}
-	.u-placeholder-line {
-		/* #ifndef APP-NVUE */
-		display: none;
-		/* #endif */
-		position: absolute;
-		left: 50%;
-		top: 50%;
-		transform: translate(-50%, -50%);
-		width: 2rpx;
-		height: 40rpx;
-		background: #333333;
-		animation: twinkling 1.5s infinite ease;
-	}
+.u-middle-line-active {
+	background: $u-primary;
+}
-	.u-animation-breathe {
-		animation-name: breathe;
-	}
+.u-breathe {
+	animation: breathe 2s infinite ease;
+}
-	.u-dot {
-		font-size: 34rpx;
-		line-height: 34rpx;
-	}
+.u-placeholder-line {
+	/* #ifndef APP-NVUE */
+	display: none;
+	/* #endif */
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: 2rpx;
+	height: 40rpx;
+	background: #333333;
+	animation: twinkling 1.5s infinite ease;
+}
-	.u-middle-line {
-		height: 4px;
-		background: #000000;
-		width: 80%;
-		position: absolute;
-		border-radius: 2px;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
+.u-animation-breathe {
+	animation-name: breathe;
+}
-	.u-bottom-line-active {
-		background: $u-primary;
-	}
+.u-dot {
+	font-size: 34rpx;
+	line-height: 34rpx;
+}
-	.u-bottom-line {
-		height: 4px;
-		background: #000000;
-		width: 80%;
-		position: absolute;
-		border-radius: 2px;
-		bottom: 0;
-		left: 50%;
-		transform: translate(-50%);
-	}
+.u-middle-line {
+	height: 4px;
+	background: #000000;
+	width: 80%;
+	position: absolute;
+	border-radius: 2px;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.u-bottom-line-active {
+	background: $u-primary;
+}
+
+.u-bottom-line {
+	height: 4px;
+	background: #000000;
+	width: 80%;
+	position: absolute;
+	border-radius: 2px;
+	bottom: 0;
+	left: 50%;
+	transform: translate(-50%);
+}
 </style>