fix:基本

build/utils.js

@@ -60,11 +60,11 @@ exports.cssLoaders = function (options) {
     postcss: generateLoaders(),
     less: generateLoaders('less', {
       modifyVars: {
-        'button-info-border-color': '#00c4b8',
-        'button-info-background-color': '#00c4b8',
-        'checkbox-checked-icon-color': '#00c4b8',
-        'radio-checked-icon-color': '#00c4b8',
-        'tabs-default-color': '#00c4b8',
+        'button-info-border-color': '#0c2469',
+        'button-info-background-color': '#0c2469',
+        'checkbox-checked-icon-color': '#0c2469',
+        'radio-checked-icon-color': '#0c2469',
+        'tabs-default-color': '#0c2469',
       }
     }),
     sass: generateLoaders('sass', { indentedSyntax: true }),

src/pages/addressbook.vue

@@ -1,320 +1,342 @@
 <template>
-	<div class="content">
+  <div class="content">
+    <!-- table切换 -->
+    <div class="tab">
+      <div>
+        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
+        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
+          收件人
+        </p>
+      </div>
+    </div>
+    <!-- 寄件人 -->
+    <div v-if="index == 1">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLink(item)">
+              <p>寄</p>
+              <div :id="'copytkl' + item.id">
+                <p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p @click="linkEdit(item.id)">
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p
+                :id="'fz' + item.id"
+                @click="copyLink(item.id)"
+                data-clipboard-action="copy"
+                :data-clipboard-target="'#copytkl' + item.id"
+              >
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button @click="link(1)" type="info" color="#0c2469"
+          >添加寄件人</van-button
+        >
+      </div>
+    </div>
 
-		<!-- table切换 -->
-		<div class="tab">
-			<div>
-				<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
-				<p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">收件人</p>
-			</div>
-		</div>
-		<!-- 寄件人 -->
-		<div v-if="index == 1">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLink(item)">
-							<p>寄</p>
-							<div :id="'copytkl' + item.id">
-								<p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p @click="linkEdit(item.id)">
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
-								:data-clipboard-target="'#copytkl' + item.id">
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
-			</div>
-		</div>
-
-		<!-- 收件人 -->
-		<div v-if="index == 2">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLinkSj(item)">
-							<p style="background: #fa9c22;">收</p>
-							<div :id="'copytkl' + item.id">
-								<p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p @click="linkEdit(item.id)">
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
-								:data-clipboard-target="'#copytkl' + item.id">
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
-			</div>
-		</div>
-	</div>
+    <!-- 收件人 -->
+    <div v-if="index == 2">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLinkSj(item)">
+              <p style="background: #fa9c22;">收</p>
+              <div :id="'copytkl' + item.id">
+                <p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p @click="linkEdit(item.id)">
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p
+                :id="'fz' + item.id"
+                @click="copyLink(item.id)"
+                data-clipboard-action="copy"
+                :data-clipboard-target="'#copytkl' + item.id"
+              >
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button type="info" @click="link(2)" color="#fa9c22"
+          >添加收件人</van-button
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
+import { Toast, Dialog } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "地址簿",
-			index: 1,
-			userId: '',
-			addressList: []
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem("userId");
-		//获取参数
-		this.index = this.$route.query.active
-		this.getData();
-	},
-	methods: {
-		//复制
-		copyLink(id) {
-			let _this = this;
-			let clipboard = new this.clipboard("#fz" + id);
-			clipboard.on('success', function () {
-				//window.console.log('00')
-			});
-			clipboard.on('error', function () {
-				_this.$toast("复制失败")
-			});
-		},
-		tab(obj) {
-			this.index = obj
-			this.getData()
-		},
-		link(obj) {
-			this.$router.push({ path: "/Newaddress", query: { type: obj } })
-		},
-		getData() {
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			this.$http.post(this.$store.state.host + "/personal/getAddressList.do", { userId: this.userId, type: this.index }, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						this.addressList = res.body.addressList
-					}
-					Toast.clear()
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
-			Toast.clear()
-		},
-		del(id) {
-			Dialog.confirm({ title: '', message: '确定删除吗', })
-				.then(() => {
-					Toast.loading({
-						message: '删除中...',
-						forbidClick: true,
-						duration: 0
-					});
-					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
-						.then(res => {
-							//发送成功
-							if (res.body.msg == 'success') {
-								this.getData()
-							} else {
-								Toast("删除失败!")
-							}
-							Toast.clear()
-						}, res => {
-							//发送失败
-							Toast("网络错误!")
-						})
-					Toast.clear()
-				})
-				.catch(() => {
-					//  on cancel 
-				})
-		},
-		//跳去编辑页
-		linkEdit(id) {
-			this.$router.push({ path: "/Editaddress", query: { id: id } })
-		},
-		adressLink(item) {
-			let jjInfo = {}
-			jjInfo.jjname = item.name + ' ' + item.phone
-			jjInfo.jjadd = item.provinceAndCity + ' ' + item.address
-			jjInfo.sender = item.name
-			jjInfo.senderPhone = item.phone
-			jjInfo.senderMobile = item.telPhone
-			jjInfo.sendAddr = item.provinceAndCity
-			jjInfo.sendAddress = item.address
-			this.$store.commit("getJjInfo", jjInfo)
-			this.$router.push({ path: "/Express" })
-		},
-		adressLinkSj(item) {
-			let sjInfo = {}
-			sjInfo.sjname = item.name + ' ' + item.phone
-			sjInfo.sjadd = item.provinceAndCity + ' ' + item.address
-			sjInfo.receiver = item.name
-			sjInfo.receiverPhone = item.phone
-			sjInfo.receiveMobile = item.telPhone
-			sjInfo.receiveAddr = item.provinceAndCity
-			sjInfo.receiveAddress = item.address
-			this.$store.commit("getSjInfo", sjInfo)
-			this.$router.push({ path: "/Express" })
-		}
-	},
-	computed: {
-
-	}
-}
+  data() {
+    return {
+      titlename: "地址簿",
+      index: 1,
+      userId: "",
+      addressList: []
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    //获取参数
+    this.index = this.$route.query.active;
+    this.getData();
+  },
+  methods: {
+    //复制
+    copyLink(id) {
+      let _this = this;
+      let clipboard = new this.clipboard("#fz" + id);
+      clipboard.on("success", function() {
+        //window.console.log('00')
+      });
+      clipboard.on("error", function() {
+        _this.$toast("复制失败");
+      });
+    },
+    tab(obj) {
+      this.index = obj;
+      this.getData();
+    },
+    link(obj) {
+      this.$router.push({ path: "/Newaddress", query: { type: obj } });
+    },
+    getData() {
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/getAddressList.do",
+          { userId: this.userId, type: this.index },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              this.addressList = res.body.addressList;
+            }
+            Toast.clear();
+          },
+          res => {
+            //发送失败
+            Toast("网络错误!");
+          }
+        );
+      Toast.clear();
+    },
+    del(id) {
+      Dialog.confirm({ title: "", message: "确定删除吗" })
+        .then(() => {
+          Toast.loading({
+            message: "删除中...",
+            forbidClick: true,
+            duration: 0
+          });
+          this.$http
+            .post(
+              this.$store.state.host + "/personal/deleteAddressInfoById.do",
+              { id: id },
+              { emulateJSON: true }
+            )
+            .then(
+              res => {
+                //发送成功
+                if (res.body.msg == "success") {
+                  this.getData();
+                } else {
+                  Toast("删除失败!");
+                }
+                Toast.clear();
+              },
+              res => {
+                //发送失败
+                Toast("网络错误!");
+              }
+            );
+          Toast.clear();
+        })
+        .catch(() => {
+          //  on cancel
+        });
+    },
+    //跳去编辑页
+    linkEdit(id) {
+      this.$router.push({ path: "/Editaddress", query: { id: id } });
+    },
+    adressLink(item) {
+      let jjInfo = {};
+      jjInfo.jjname = item.name + " " + item.phone;
+      jjInfo.jjadd = item.provinceAndCity + " " + item.address;
+      jjInfo.sender = item.name;
+      jjInfo.senderPhone = item.phone;
+      jjInfo.senderMobile = item.telPhone;
+      jjInfo.sendAddr = item.provinceAndCity;
+      jjInfo.sendAddress = item.address;
+      this.$store.commit("getJjInfo", jjInfo);
+      this.$router.push({ path: "/Express" });
+    },
+    adressLinkSj(item) {
+      let sjInfo = {};
+      sjInfo.sjname = item.name + " " + item.phone;
+      sjInfo.sjadd = item.provinceAndCity + " " + item.address;
+      sjInfo.receiver = item.name;
+      sjInfo.receiverPhone = item.phone;
+      sjInfo.receiveMobile = item.telPhone;
+      sjInfo.receiveAddr = item.provinceAndCity;
+      sjInfo.receiveAddress = item.address;
+      this.$store.commit("getSjInfo", sjInfo);
+      this.$router.push({ path: "/Express" });
+    }
+  },
+  computed: {}
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	.tab {
-		font-size: .36rem;
-		color: #00c4b8;
-		padding: .33rem;
-
-		div {
-			display: flex;
-			border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-
-			p {
-				flex: 1;
-				padding: .1rem 0rem;
-			}
-
-			p.active {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-
-	}
-
-	.jjinfo {
-		font-size: .36rem;
-		color: #999999;
-		padding: .0rem .33rem 0.33rem;
-		word-break: break-word;
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.33rem;
 
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
 
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-				flex-wrap: wrap;
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
 
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem .2rem;
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
 
-					//width: 6rem;
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
+  .jjinfo {
+    font-size: 0.36rem;
+    color: #999999;
+    padding: 0rem 0.33rem 0.33rem;
+    word-break: break-word;
 
-					div {
-						//font-weight: bold;
-						max-width: 5.2rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
 
-						p:nth-of-type(1) {
-							font-size: .3rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        flex-wrap: wrap;
 
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem 0.2rem;
 
-				.cz {
-					border-top: .01rem solid #ededed;
-					width: 100%;
-					display: flex;
-					flex-direction: row-reverse;
-					font-size: .24rem;
-					color: #999999;
-					padding-top: .2rem;
+          //width: 6rem;
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
 
-					p {
-						margin-left: .2rem;
+          div {
+            //font-weight: bold;
+            max-width: 5.2rem;
 
-						img {
-							width: .22rem;
-							height: .24rem;
-						}
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
 
-						span {
-							position: relative;
-							top: -.01rem;
-						}
-					}
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
 
-				}
-			}
-		}
+        .cz {
+          border-top: 0.01rem solid #ededed;
+          width: 100%;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 0.24rem;
+          color: #999999;
+          padding-top: 0.2rem;
 
-	}
+          p {
+            margin-left: 0.2rem;
 
+            img {
+              width: 0.22rem;
+              height: 0.24rem;
+            }
 
+            span {
+              position: relative;
+              top: -0.01rem;
+            }
+          }
+        }
+      }
+    }
+  }
 
-	.btn-jj {
-		padding: .33rem;
+  .btn-jj {
+    padding: 0.33rem;
 
-		button {
-			width: 100%;
-		}
-	}
+    button {
+      width: 100%;
+    }
+  }
 }
 </style>

src/pages/cityaddressbook.vue

@@ -1,317 +1,339 @@
 <template>
-	<div class="content">
+  <div class="content">
+    <!-- table切换 -->
+    <div class="tab">
+      <div>
+        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
+        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
+          收件人
+        </p>
+      </div>
+    </div>
+    <!-- 寄件人 -->
+    <div v-if="index == 1">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLink(item)">
+              <p>寄</p>
+              <div :id="'copytkl' + item.id">
+                <p>{{ item.name }} {{ item.phone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p @click="linkEdit(item.id)">
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p
+                :id="'fz' + item.id"
+                @click="copyLink(item.id)"
+                data-clipboard-action="copy"
+                :data-clipboard-target="'#copytkl' + item.id"
+              >
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button @click="link(1)" type="info" color="#0c2469"
+          >添加寄件人</van-button
+        >
+      </div>
+    </div>
 
-		<!-- table切换 -->
-		<div class="tab">
-			<div>
-				<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
-				<p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">收件人</p>
-			</div>
-		</div>
-		<!-- 寄件人 -->
-		<div v-if="index == 1">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLink(item)">
-							<p>寄</p>
-							<div :id="'copytkl' + item.id">
-								<p>{{ item.name }} {{ item.phone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p @click="linkEdit(item.id)">
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
-								:data-clipboard-target="'#copytkl' + item.id">
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
-			</div>
-		</div>
-
-		<!-- 收件人 -->
-		<div v-if="index == 2">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLinkSj(item)">
-							<p style="background: #fa9c22;">收</p>
-							<div :id="'copytkl' + item.id">
-								<p>{{ item.name }} {{ item.phone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p @click="linkEdit(item.id)">
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
-								:data-clipboard-target="'#copytkl' + item.id">
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
-			</div>
-		</div>
-	</div>
+    <!-- 收件人 -->
+    <div v-if="index == 2">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLinkSj(item)">
+              <p style="background: #fa9c22;">收</p>
+              <div :id="'copytkl' + item.id">
+                <p>{{ item.name }} {{ item.phone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p @click="linkEdit(item.id)">
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p
+                :id="'fz' + item.id"
+                @click="copyLink(item.id)"
+                data-clipboard-action="copy"
+                :data-clipboard-target="'#copytkl' + item.id"
+              >
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button type="info" @click="link(2)" color="#fa9c22"
+          >添加收件人</van-button
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
+import { Toast, Dialog } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "地址簿",
-			index: 1,
-			userId: '',
-			addressList: []
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem("userId");
-		//获取参数
-		this.index = this.$route.query.active
-		this.getData();
-	},
-	methods: {
-		//复制
-		copyLink(id) {
-			let _this = this;
-			let clipboard = new this.clipboard("#fz" + id);
-			clipboard.on('success', function () {
-				//window.console.log('00')
-			});
-			clipboard.on('error', function () {
-				_this.$toast("复制失败")
-			});
-		},
-		tab(obj) {
-			this.index = obj
-			this.getData()
-		},
-		link(obj) {
-			this.$router.push({ path: "/Newaddress", query: { type: obj } })
-		},
-		getData() {
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			this.$http.post(this.$store.state.host + "/personal/getAddressList.do", { userId: this.userId, type: this.index }, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						this.addressList = res.body.addressList
-					}
-					Toast.clear()
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
-			Toast.clear()
-		},
-		del(id) {
-			Dialog.confirm({ title: '', message: '确定删除吗', })
-				.then(() => {
-					Toast.loading({
-						message: '删除中...',
-						forbidClick: true,
-						duration: 0
-					});
-					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
-						.then(res => {
-							//发送成功
-							if (res.body.msg == 'success') {
-								this.getData()
-							} else {
-								Toast("删除失败!")
-							}
-							Toast.clear()
-						}, res => {
-							//发送失败
-							Toast("网络错误!")
-						})
-					Toast.clear()
-				})
-				.catch(() => {
-					//  on cancel 
-				})
-		},
-		//跳去编辑页
-		linkEdit(id) {
-			this.$router.push({ path: "/Editaddress", query: { id: id } })
-		},
-		adressLink(item) {
-			let jjInfo = {}
-			jjInfo.jjname = item.name + ' ' + item.phone
-			jjInfo.jjadd = item.provinceAndCity + ' ' + item.address
-			jjInfo.sender = item.name
-			jjInfo.senderPhone = item.phone
-			jjInfo.sendAddr = item.provinceAndCity
-			jjInfo.sendAddress = item.address
-			this.$store.commit("getJjInfo", jjInfo)
-			this.$router.push({ path: "/Cityexpress" })
-		},
-		adressLinkSj(item) {
-			let sjInfo = {}
-			sjInfo.sjname = item.name + ' ' + item.phone
-			sjInfo.sjadd = item.provinceAndCity + ' ' + item.address
-			sjInfo.receiver = item.name
-			sjInfo.receiverPhone = item.phone
-			sjInfo.receiveAddr = item.provinceAndCity
-			sjInfo.receiveAddress = item.address
-			this.$store.commit("getSjInfo", sjInfo)
-			this.$router.push({ path: "/Cityexpress" })
-		}
-	},
-	computed: {
-
-	}
-}
+  data() {
+    return {
+      titlename: "地址簿",
+      index: 1,
+      userId: "",
+      addressList: []
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    //获取参数
+    this.index = this.$route.query.active;
+    this.getData();
+  },
+  methods: {
+    //复制
+    copyLink(id) {
+      let _this = this;
+      let clipboard = new this.clipboard("#fz" + id);
+      clipboard.on("success", function() {
+        //window.console.log('00')
+      });
+      clipboard.on("error", function() {
+        _this.$toast("复制失败");
+      });
+    },
+    tab(obj) {
+      this.index = obj;
+      this.getData();
+    },
+    link(obj) {
+      this.$router.push({ path: "/Newaddress", query: { type: obj } });
+    },
+    getData() {
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/getAddressList.do",
+          { userId: this.userId, type: this.index },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              this.addressList = res.body.addressList;
+            }
+            Toast.clear();
+          },
+          res => {
+            //发送失败
+            Toast("网络错误!");
+          }
+        );
+      Toast.clear();
+    },
+    del(id) {
+      Dialog.confirm({ title: "", message: "确定删除吗" })
+        .then(() => {
+          Toast.loading({
+            message: "删除中...",
+            forbidClick: true,
+            duration: 0
+          });
+          this.$http
+            .post(
+              this.$store.state.host + "/personal/deleteAddressInfoById.do",
+              { id: id },
+              { emulateJSON: true }
+            )
+            .then(
+              res => {
+                //发送成功
+                if (res.body.msg == "success") {
+                  this.getData();
+                } else {
+                  Toast("删除失败!");
+                }
+                Toast.clear();
+              },
+              res => {
+                //发送失败
+                Toast("网络错误!");
+              }
+            );
+          Toast.clear();
+        })
+        .catch(() => {
+          //  on cancel
+        });
+    },
+    //跳去编辑页
+    linkEdit(id) {
+      this.$router.push({ path: "/Editaddress", query: { id: id } });
+    },
+    adressLink(item) {
+      let jjInfo = {};
+      jjInfo.jjname = item.name + " " + item.phone;
+      jjInfo.jjadd = item.provinceAndCity + " " + item.address;
+      jjInfo.sender = item.name;
+      jjInfo.senderPhone = item.phone;
+      jjInfo.sendAddr = item.provinceAndCity;
+      jjInfo.sendAddress = item.address;
+      this.$store.commit("getJjInfo", jjInfo);
+      this.$router.push({ path: "/Cityexpress" });
+    },
+    adressLinkSj(item) {
+      let sjInfo = {};
+      sjInfo.sjname = item.name + " " + item.phone;
+      sjInfo.sjadd = item.provinceAndCity + " " + item.address;
+      sjInfo.receiver = item.name;
+      sjInfo.receiverPhone = item.phone;
+      sjInfo.receiveAddr = item.provinceAndCity;
+      sjInfo.receiveAddress = item.address;
+      this.$store.commit("getSjInfo", sjInfo);
+      this.$router.push({ path: "/Cityexpress" });
+    }
+  },
+  computed: {}
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	.tab {
-		font-size: .36rem;
-		color: #00c4b8;
-		padding: .33rem;
-
-		div {
-			display: flex;
-			border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-
-			p {
-				flex: 1;
-				padding: .1rem 0rem;
-			}
-
-			p.active {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-
-	}
-
-	.jjinfo {
-		font-size: .36rem;
-		color: #999999;
-		padding: .0rem .33rem 0.33rem;
-		word-break: break-word;
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.33rem;
 
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
 
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-				flex-wrap: wrap;
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
 
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem .2rem;
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
 
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
+  .jjinfo {
+    font-size: 0.36rem;
+    color: #999999;
+    padding: 0rem 0.33rem 0.33rem;
+    word-break: break-word;
 
-					div {
-						//font-weight: bold;
-						max-width: 5.2rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
 
-						p:nth-of-type(1) {
-							font-size: .3rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        flex-wrap: wrap;
 
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem 0.2rem;
 
-				.cz {
-					border-top: .01rem solid #ededed;
-					width: 100%;
-					display: flex;
-					flex-direction: row-reverse;
-					font-size: .24rem;
-					color: #999999;
-					padding-top: .2rem;
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
 
-					p {
-						margin-left: .2rem;
+          div {
+            //font-weight: bold;
+            max-width: 5.2rem;
 
-						img {
-							width: .22rem;
-							height: .24rem;
-						}
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
 
-						span {
-							position: relative;
-							top: -.01rem;
-						}
-					}
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
 
-				}
-			}
-		}
+        .cz {
+          border-top: 0.01rem solid #ededed;
+          width: 100%;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 0.24rem;
+          color: #999999;
+          padding-top: 0.2rem;
 
-	}
+          p {
+            margin-left: 0.2rem;
 
+            img {
+              width: 0.22rem;
+              height: 0.24rem;
+            }
 
+            span {
+              position: relative;
+              top: -0.01rem;
+            }
+          }
+        }
+      }
+    }
+  }
 
-	.btn-jj {
-		padding: .33rem;
+  .btn-jj {
+    padding: 0.33rem;
 
-		button {
-			width: 100%;
-		}
-	}
+    button {
+      width: 100%;
+    }
+  }
 }
 </style>

src/pages/editaddress.vue

@@ -1,229 +1,311 @@
 <template>
-	<div class="content">
-
-		<div class="form">
-			<van-cell-group inset>
-				<van-field style="height: auto;" v-model="message" rows="1" label="识别" type="textarea"
-					placeholder="请粘贴,点击识别(姓名、手机号、省、市、区、详细地址间请输入空格)" />
-			</van-cell-group>
-			<div style="background-color: white;width: 100%;height: .8rem;padding-top: .2rem;">
-				<!-- <van-uploader :after-read="afterRead" style="width: 18%;height: .6rem;float: left;">
-					<van-button color="#00c4b8" block type="info" size="small">图片识别</van-button>
+  <div class="content">
+    <div class="form">
+      <van-cell-group inset>
+        <van-field
+          style="height: auto;"
+          v-model="message"
+          rows="1"
+          label="识别"
+          type="textarea"
+          placeholder="请粘贴,点击识别(姓名、手机号、省、市、区、详细地址间请输入空格)"
+        />
+      </van-cell-group>
+      <div
+        style="background-color: white;width: 100%;height: .8rem;padding-top: .2rem;"
+      >
+        <!-- <van-uploader :after-read="afterRead" style="width: 18%;height: .6rem;float: left;">
+					<van-button color="#0c2469" block type="info" size="small">图片识别</van-button>
 				</van-uploader> -->
-				<van-button @click="shibie()" style="width: 15%;height: .6rem;float: right; margin-right: .2rem;"
-					color="#00c4b8" block type="info" size="small">识别</van-button>
-			</div>
-		</div>
-		<div class="form">
-			<van-form @submit="onSubmit">
-				<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false }]" />
-				<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"
-					:rules="[{ required: false }]" />
+        <van-button
+          @click="shibie()"
+          style="width: 15%;height: .6rem;float: right; margin-right: .2rem;"
+          color="#0c2469"
+          block
+          type="info"
+          size="small"
+          >识别</van-button
+        >
+      </div>
+    </div>
+    <div class="form">
+      <van-form @submit="onSubmit">
+        <van-field
+          v-model="name"
+          name="姓名"
+          label="姓名"
+          placeholder="请输入姓名"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          v-model="phone"
+          maxlength="11"
+          type="number"
+          name="手机"
+          label="手机"
+          placeholder="请输入手机"
+          :rules="[{ required: false }]"
+        />
 
-				<!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
+        <!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
 					@click="areashow = true" :rules="[{ required: false }]" /> -->
-				<van-field readonly clickable name="area" :value="province" label="省" placeholder="自动识别"
-					@click="areashow = true" :rules="[{ required: false }]" />
-				<van-field readonly clickable name="area" :value="city" label="市" placeholder="自动识别"
-					@click="areashow = true" :rules="[{ required: false }]" />
-				<van-field readonly clickable name="area" :value="district" label="区" placeholder="自动识别"
-					@click="areashow = true" :rules="[{ required: false }]" />
-				<van-field readonly clickable name="area" :value="town" label="镇" placeholder="自动识别"
-					@click="areashow = true" :rules="[{ required: false }]" />
-				<van-field v-model="address" name="详细地址" maxlength="50" label="详细地址" placeholder="请输入详细地址"
-					:rules="[{ required: false }]" />
-				<div style="margin-top: 16px;">
-					<van-button color="#00c4b8" block type="info" native-type="submit"
-						:disabled="disabled">确定</van-button>
-				</div>
-			</van-form>
-		</div>
-	</div>
+        <van-field
+          readonly
+          clickable
+          name="area"
+          :value="province"
+          label="省"
+          placeholder="自动识别"
+          @click="areashow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          readonly
+          clickable
+          name="area"
+          :value="city"
+          label="市"
+          placeholder="自动识别"
+          @click="areashow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          readonly
+          clickable
+          name="area"
+          :value="district"
+          label="区"
+          placeholder="自动识别"
+          @click="areashow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          readonly
+          clickable
+          name="area"
+          :value="town"
+          label="镇"
+          placeholder="自动识别"
+          @click="areashow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          v-model="address"
+          name="详细地址"
+          maxlength="50"
+          label="详细地址"
+          placeholder="请输入详细地址"
+          :rules="[{ required: false }]"
+        />
+        <div style="margin-top: 16px;">
+          <van-button
+            color="#0c2469"
+            block
+            type="info"
+            native-type="submit"
+            :disabled="disabled"
+            >确定</van-button
+          >
+        </div>
+      </van-form>
+    </div>
+  </div>
 </template>
 
 <script>
-import areaList from "@/script/areas.js"
-import { Toast } from 'vant'
-import { findUserAddressInfoById, editUserAddressInfoById, spiltAddress } from '../api/addressBoook'
+import areaList from "@/script/areas.js";
+import { Toast } from "vant";
+import {
+  findUserAddressInfoById,
+  editUserAddressInfoById,
+  spiltAddress
+} from "../api/addressBoook";
 export default {
-	data() {
-		return {
-			titlename: "编辑地址",
-			name: "",
-			phone: "",
-			telPhone: "",
-			province: "",//省
-			city: "",//市
-			district: '',//区
-			town: '',//镇
-			address: "",//详细地址
-			areashow: false,
-			id: '',
-			disabled: false,
-			message: '',
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.id = this.$route.query.id
-		this.getData()
-	},
-	methods: {
-		// 获取信息
-		async getData() {
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			const res = await findUserAddressInfoById({ id: this.id })
-			if (res.msg == 'success') {
-				this.name = res.userAddressInfoById.addresseeName
-				this.phone = res.userAddressInfoById.addresseePhone
-				this.province = res.userAddressInfoById.addresseeProvince
-				this.city = res.userAddressInfoById.addresseeCity
-				this.district = res.userAddressInfoById.addresseeCounty
-				this.town = res.userAddressInfoById.addresseeTown
-				this.address = res.userAddressInfoById.addresseeAddrInfo
-			} else {
-				Toast("网络错误!")
-			}
-			Toast.clear()
-		},
-		// 图片识别
-		afterRead(file) {
-			// console.log(encodeURIComponent(file.content))
-			// return;
-			this.$http.post(this.$store.state.host + "/solic/getAddressFromText", {
-				type: 3,
-				textStr: encodeURIComponent(file.content)
-			}, {
-				emulateJSON: true
-			})
-				.then(res => {
-					//发送成功
-					res.body.words_result.forEach((v, i) => {
-						this.message += v.words + " "
-					})
-				}, res => {
-					//发送失败
-					Toast('识别错误')
-				})
-			//console.log(file)
-		},
-		// 识别
-		async shibie() {
-			if (this.message == '') {
-				Toast('请粘贴地址')
-				return
-			}
-			const res = await spiltAddress({ address: this.message })
-			if (res.prov) {
-				this.province = res.prov
-				this.city = res.city
-				this.district = res.district
-				this.town = res.town
-				this.address = res.addr_info
-				this.name = res.per
-				this.phone = res.tel
-			} else {
-				Toast('请求失败')
-			}
-			console.log(res, 'res')
-		},
-		// 提交
-		async onSubmit() {
-
-			if (this.name == '' || this.name == undefined) {
-				Toast('请输入姓名')
-				return
-			}
+  data() {
+    return {
+      titlename: "编辑地址",
+      name: "",
+      phone: "",
+      telPhone: "",
+      province: "", //省
+      city: "", //市
+      district: "", //区
+      town: "", //镇
+      address: "", //详细地址
+      areashow: false,
+      id: "",
+      disabled: false,
+      message: ""
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.id = this.$route.query.id;
+    this.getData();
+  },
+  methods: {
+    // 获取信息
+    async getData() {
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      const res = await findUserAddressInfoById({ id: this.id });
+      if (res.msg == "success") {
+        this.name = res.userAddressInfoById.addresseeName;
+        this.phone = res.userAddressInfoById.addresseePhone;
+        this.province = res.userAddressInfoById.addresseeProvince;
+        this.city = res.userAddressInfoById.addresseeCity;
+        this.district = res.userAddressInfoById.addresseeCounty;
+        this.town = res.userAddressInfoById.addresseeTown;
+        this.address = res.userAddressInfoById.addresseeAddrInfo;
+      } else {
+        Toast("网络错误!");
+      }
+      Toast.clear();
+    },
+    // 图片识别
+    afterRead(file) {
+      // console.log(encodeURIComponent(file.content))
+      // return;
+      this.$http
+        .post(
+          this.$store.state.host + "/solic/getAddressFromText",
+          {
+            type: 3,
+            textStr: encodeURIComponent(file.content)
+          },
+          {
+            emulateJSON: true
+          }
+        )
+        .then(
+          res => {
+            //发送成功
+            res.body.words_result.forEach((v, i) => {
+              this.message += v.words + " ";
+            });
+          },
+          res => {
+            //发送失败
+            Toast("识别错误");
+          }
+        );
+      //console.log(file)
+    },
+    // 识别
+    async shibie() {
+      if (this.message == "") {
+        Toast("请粘贴地址");
+        return;
+      }
+      const res = await spiltAddress({ address: this.message });
+      if (res.prov) {
+        this.province = res.prov;
+        this.city = res.city;
+        this.district = res.district;
+        this.town = res.town;
+        this.address = res.addr_info;
+        this.name = res.per;
+        this.phone = res.tel;
+      } else {
+        Toast("请求失败");
+      }
+      console.log(res, "res");
+    },
+    // 提交
+    async onSubmit() {
+      if (this.name == "" || this.name == undefined) {
+        Toast("请输入姓名");
+        return;
+      }
 
-			if (this.phone == '' || this.phone == undefined) {
-				Toast('请填写手机号')
-				return
-			}
+      if (this.phone == "" || this.phone == undefined) {
+        Toast("请填写手机号");
+        return;
+      }
 
-			if (this.phone != '' && this.phone != undefined) {
-				let regPhone = new RegExp(this.$store.state.regPhone)
-				if (!regPhone.test(this.phone)) {
-					Toast('手机号格式不正确')
-					return
-				}
-			}
+      if (this.phone != "" && this.phone != undefined) {
+        let regPhone = new RegExp(this.$store.state.regPhone);
+        if (!regPhone.test(this.phone)) {
+          Toast("手机号格式不正确");
+          return;
+        }
+      }
 
-			if (this.province == '' || this.province == undefined) {
-				Toast('请输入省')
-				return
-			}
-			if (this.city == '' || this.city == undefined) {
-				Toast('请输入市')
-				return
-			}
-			if (this.district == '' || this.district == undefined) {
-				Toast('请输入区')
-				return
-			}
-			if (this.city == '' || this.city == undefined) {
-				Toast('请输入镇')
-				return
-			}
+      if (this.province == "" || this.province == undefined) {
+        Toast("请输入省");
+        return;
+      }
+      if (this.city == "" || this.city == undefined) {
+        Toast("请输入市");
+        return;
+      }
+      if (this.district == "" || this.district == undefined) {
+        Toast("请输入区");
+        return;
+      }
+      if (this.city == "" || this.city == undefined) {
+        Toast("请输入镇");
+        return;
+      }
 
-			if (this.address == '' || this.address == undefined) {
-				Toast('请输入详细地址')
-				return
-			}
+      if (this.address == "" || this.address == undefined) {
+        Toast("请输入详细地址");
+        return;
+      }
 
-			this.disabled = true;
-			let parmas = {
-				addresseeName: this.name,
-				addresseePhone: this.phone,
-				id: this.id,
-				addresseeProvince: this.province,
-				addresseeCity: this.city,
-				addresseeCounty: this.district,
-				addresseeTown: this.town,
-				addresseeAddrInfo: this.address,
-				addresseeAddress: this.message,
-			}
-			const res = await editUserAddressInfoById({ ...parmas })
-			if (res.msg == 'success') {
-				Toast("保存成功");
-				this.$router.push('/Myaddressbook')
-			} else {
-				Toast('保存失败')
-			}
-			this.disabled = false;
-		},
-		onConfirm3(e) {//确定
-			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-			this.areashow = false
-			console.log(e)
-		},
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+      this.disabled = true;
+      let parmas = {
+        addresseeName: this.name,
+        addresseePhone: this.phone,
+        id: this.id,
+        addresseeProvince: this.province,
+        addresseeCity: this.city,
+        addresseeCounty: this.district,
+        addresseeTown: this.town,
+        addresseeAddrInfo: this.address,
+        addresseeAddress: this.message
+      };
+      const res = await editUserAddressInfoById({ ...parmas });
+      if (res.msg == "success") {
+        Toast("保存成功");
+        this.$router.push("/Myaddressbook");
+      } else {
+        Toast("保存失败");
+      }
+      this.disabled = false;
+    },
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	/deep/ .van-field--min-height .van-field__control {
-		min-height: 72px;
-	}
-
-	.form {
-		padding: .3rem;
+  /deep/ .van-field--min-height .van-field__control {
+    min-height: 72px;
+  }
 
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
+  .form {
+    padding: 0.3rem;
 
-		}
-	}
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
 }
 </style>

src/pages/expressExpress.vue

@@ -1,182 +1,183 @@
 <template>
-    <div>
-        <div class="content">
-            <div class="jjlist">
-                <div class="listinfo">
-                    <div class="list_top">
-                        <div class="list_top_left">
-                            <img src="../assets/images/ad_icon1.png" alt="">
-                            <div>
-                                <p>寄件号：{{ ObjectVlaue.dispatchNo }}</p>
-                                <p>收件人：{{ ObjectVlaue.recipient }} </p>
-                                <p>手机号：{{ ObjectVlaue.phone }}</p>
-                                <p>创建时间&nbsp：{{ ObjectVlaue.recordDate }}</p>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="info">
-                <p>部门：{{ ObjectVlaue.departmentId }}</p>
+  <div>
+    <div class="content">
+      <div class="jjlist">
+        <div class="listinfo">
+          <div class="list_top">
+            <div class="list_top_left">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <div>
+                <p>寄件号：{{ ObjectVlaue.dispatchNo }}</p>
                 <p>收件人：{{ ObjectVlaue.recipient }}</p>
                 <p>手机号：{{ ObjectVlaue.phone }}</p>
-                <p>创建时间：{{ ObjectVlaue.recordDate }}</p>
-                <p>快件类型：{{ ObjectVlaue.expressType === 1 ? '文件' : '物品' }}</p>
-                <p>座位：{{ ObjectVlaue.sendSeat }}</p>
-                <p>备注：{{ ObjectVlaue.remark == '' ? '无' : ObjectVlaue.remark }}</p>
+                <p>创建时间&nbsp：{{ ObjectVlaue.recordDate }}</p>
+              </div>
             </div>
-
+          </div>
         </div>
+      </div>
+      <div class="info">
+        <p>部门：{{ ObjectVlaue.departmentId }}</p>
+        <p>收件人：{{ ObjectVlaue.recipient }}</p>
+        <p>手机号：{{ ObjectVlaue.phone }}</p>
+        <p>创建时间：{{ ObjectVlaue.recordDate }}</p>
+        <p>快件类型：{{ ObjectVlaue.expressType === 1 ? "文件" : "物品" }}</p>
+        <p>座位：{{ ObjectVlaue.sendSeat }}</p>
+        <p>备注：{{ ObjectVlaue.remark == "" ? "无" : ObjectVlaue.remark }}</p>
+      </div>
     </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
-import { getExpressById } from '../api/index'
+import { Toast, Dialog } from "vant";
+import { getExpressById } from "../api/index";
 export default {
-    data() {
-        return {
-            titlename: "查快递",
-            item: {},
-            mailDetail: {},//传过来的数据
-            id: '',
-            ObjectVlaue: {}
-        }
-    },
-    created: function () {
-        this.mailDetail = this.$route.query.item
-        this.id = this.mailDetail.id
-        console.log(this.mailDetail, ' this.mailDetail')
-    },
-    mounted() {
-        this.getFindWithoutInfoById()
-    },
-    methods: {
-        async getFindWithoutInfoById() {
-            const res = await getExpressById({ id: this.id }, { emulateJSON: true, loading: true, message: '加载中...' })
-            this.ObjectVlaue = res.expressInfoById
-            console.log(res)
-        },
+  data() {
+    return {
+      titlename: "查快递",
+      item: {},
+      mailDetail: {}, //传过来的数据
+      id: "",
+      ObjectVlaue: {}
+    };
+  },
+  created: function() {
+    this.mailDetail = this.$route.query.item;
+    this.id = this.mailDetail.id;
+    console.log(this.mailDetail, " this.mailDetail");
+  },
+  mounted() {
+    this.getFindWithoutInfoById();
+  },
+  methods: {
+    async getFindWithoutInfoById() {
+      const res = await getExpressById(
+        { id: this.id },
+        { emulateJSON: true, loading: true, message: "加载中..." }
+      );
+      this.ObjectVlaue = res.expressInfoById;
+      console.log(res);
     }
-}
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
-    padding: .2rem .33rem;
-    font-size: .3rem;
-
-    >p {
-        font-size: .3rem;
-        text-align: center;
-        margin-bottom: .2rem;
+  padding: 0.2rem 0.33rem;
+  font-size: 0.3rem;
+
+  > p {
+    font-size: 0.3rem;
+    text-align: center;
+    margin-bottom: 0.2rem;
+  }
+
+  .info {
+    padding: 0.4rem;
+    background: white;
+    line-height: 200%;
+    color: #666666;
+
+    .pjinfo {
+      margin-top: 0.1rem;
+      border-top: 0.01rem solid #f0efef;
+      padding-top: 0.1rem;
     }
+  }
+
+  .jjlist {
+    font-size: 0.3rem;
+    color: #999999;
+
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+      position: relative;
+
+      .list_top {
+        display: flex;
+        justify-content: space-between;
+
+        .list_top_left {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          img {
+            display: inline-block;
+            width: 0.9rem;
+            height: 0.9rem;
+            position: relative;
+            top: -0.1rem;
+          }
 
-    .info {
-        padding: .4rem;
-        background: white;
-        line-height: 200%;
-        color: #666666;
-
-        .pjinfo {
-            margin-top: .1rem;
-            border-top: .01rem solid #f0efef;
-            padding-top: .1rem;
-        }
-    }
+          div {
+            margin-left: 0.2rem;
+            display: inline-block;
+            line-height: 150%;
 
-    .jjlist {
-        font-size: .3rem;
-        color: #999999;
+            p:nth-of-type(1) {
+              font-weight: bold;
+              color: #333;
+            }
 
-        .listinfo {
-            background: white;
-            padding: .33rem .33rem .2rem;
-            border-radius: .05rem;
-            margin-bottom: .2rem;
-            position: relative;
+            p:nth-of-type(2) {
+              color: #333;
+            }
 
-            .list_top {
-                display: flex;
-                justify-content: space-between;
-
-                .list_top_left {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-
-                    img {
-                        display: inline-block;
-                        width: .9rem;
-                        height: .9rem;
-                        position: relative;
-                        top: -.1rem;
-                    }
-
-                    div {
-                        margin-left: .2rem;
-                        display: inline-block;
-                        line-height: 150%;
-
-                        p:nth-of-type(1) {
-                            font-weight: bold;
-                            color: #333;
-                        }
-
-                        p:nth-of-type(2) {
-                            color: #333;
-                        }
-
-                        p:nth-of-type(3) {
-                            color: #333;
-                        }
-
-                        p:nth-of-type(4) {
-                            font-size: .22rem;
-                            color: #333;
-                        }
-                    }
-                }
-
-                >p {
-                    font-size: .24rem;
-                    color: #f5693d;
-                    font-weight: bold;
-                }
+            p:nth-of-type(3) {
+              color: #333;
             }
 
-            .fast {
-                //background: url(../assets/images/status.png) no-repeat center;
-                background-color: #00c4b8;
-                background-size: 100% 100%;
-                color: white;
-                position: absolute;
-                bottom: 0px;
-                right: 0px;
-                width: 1.1rem;
-                height: .5rem;
-                text-align: center;
-                line-height: .5rem;
-                font-size: .2rem;
+            p:nth-of-type(4) {
+              font-size: 0.22rem;
+              color: #333;
             }
+          }
+        }
 
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
         }
+      }
+
+      .fast {
+        //background: url(../assets/images/status.png) no-repeat center;
+        background-color: #0c2469;
+        background-size: 100% 100%;
+        color: white;
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        width: 1.1rem;
+        height: 0.5rem;
+        text-align: center;
+        line-height: 0.5rem;
+        font-size: 0.2rem;
+      }
     }
+  }
 }
 
 /deep/ .van-nav-bar__content {
-    .van-nav-bar__title {
-        font-size: 16px;
-    }
+  .van-nav-bar__title {
+    font-size: 16px;
+  }
 }
 
 /deep/.van-icon-arrow-left::before {
-    color: #333;
-    font-size: 16px;
+  color: #333;
+  font-size: 16px;
 }
 
 /deep/.van-nav-bar__text {
-    color: #333 !important;
-    font-size: 16px;
+  color: #333 !important;
+  font-size: 16px;
 }
 </style>

src/pages/foreignaddress.vue

@@ -1,183 +1,229 @@
 <template>
-	<div class="content">
-		<div class="form">
-			<van-form @submit="onSubmit">
-				<van-field oninput="value=value.replace(/[^\w\.\s/]/ig,'')" v-model="personName" name="姓名" label="姓名"
-					placeholder="请用英文输入姓名" />
-				<van-field v-model="emailAddress" name="邮箱" label="邮箱" placeholder="请用英文输入邮箱" />
-				<van-field oninput="value=value.replace(/[^\w\.\s/]/ig,'')" v-model="countryCode" name="国家编码"
-					label="国家编码" placeholder="请用英文输入国家编码" />
-				<van-field oninput="value=value.replace(/[^\w\.\s/]/ig,'')" v-model="city" name="州/城市" label="州/城市"
-					placeholder="请用英文输入州/城市" />
-				<van-field oninput="value=value.replace(/[^\w\.\s/]/ig,'')" v-model="phone" type="number" name="电话"
-					label="电话" placeholder="请输入电话" />
-				<!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" /> -->
-				<van-field oninput="value=value.replace(/[^\w\.\s/]/ig,'')" v-model="postalCode" name="邮编" label="邮编"
-					placeholder="请用输入邮编" />
-				<van-field oninput="value=value.replace(/[^\w\.\s/]/ig,'')" v-model="address" name="详细地址" label="详细地址"
-					placeholder="请用英文输入详细地址" />
-				<van-field oninput="value=value.replace(/[^\w\.\s/]/ig,'')" v-model="companyName" name="公司名称"
-					label="公司名称" placeholder="请用英文输入公司名称 如SF EXPRESS CO,LTD" />
-				<div style="margin-top: 16px;">
-					<van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				</div>
-			</van-form>
-			<!-- 城市选择 -->
-			<van-popup v-model="areashow" position="bottom">
-				<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-			</van-popup>
-		</div>
-	</div>
+  <div class="content">
+    <div class="form">
+      <van-form @submit="onSubmit">
+        <van-field
+          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
+          v-model="personName"
+          name="姓名"
+          label="姓名"
+          placeholder="请用英文输入姓名"
+        />
+        <van-field
+          v-model="emailAddress"
+          name="邮箱"
+          label="邮箱"
+          placeholder="请用英文输入邮箱"
+        />
+        <van-field
+          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
+          v-model="countryCode"
+          name="国家编码"
+          label="国家编码"
+          placeholder="请用英文输入国家编码"
+        />
+        <van-field
+          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
+          v-model="city"
+          name="州/城市"
+          label="州/城市"
+          placeholder="请用英文输入州/城市"
+        />
+        <van-field
+          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
+          v-model="phone"
+          type="number"
+          name="电话"
+          label="电话"
+          placeholder="请输入电话"
+        />
+        <!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" /> -->
+        <van-field
+          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
+          v-model="postalCode"
+          name="邮编"
+          label="邮编"
+          placeholder="请用输入邮编"
+        />
+        <van-field
+          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
+          v-model="address"
+          name="详细地址"
+          label="详细地址"
+          placeholder="请用英文输入详细地址"
+        />
+        <van-field
+          oninput="value=value.replace(/[^\w\.\s/]/ig,'')"
+          v-model="companyName"
+          name="公司名称"
+          label="公司名称"
+          placeholder="请用英文输入公司名称 如SF EXPRESS CO,LTD"
+        />
+        <div style="margin-top: 16px;">
+          <van-button color="#0c2469" block type="info" native-type="submit"
+            >确定</van-button
+          >
+        </div>
+      </van-form>
+      <!-- 城市选择 -->
+      <van-popup v-model="areashow" position="bottom">
+        <van-area
+          :area-list="areaList"
+          @confirm="onConfirm3"
+          @cancel="areashow = false"
+        />
+      </van-popup>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
-import areaList from "@/script/areas.js"
+import { Toast, Dialog } from "vant";
+import areaList from "@/script/areas.js";
 export default {
-	data() {
-		return {
-			titlename: "寄件人",
-			personName: "",
-			countryCode: "",
-			emailAddress: "",
-			postalCode: "",
-			companyName: "",
-			phone: "",
-			city: "",
-			address: "",
-			areashow: false,
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.titlename = this.$route.query.active
-		if (this.titlename == 1) {
-			this.titlename = "寄件人地址"
-			if (JSON.stringify(this.$store.state.foreignJjInfo) != '{}') {
-				this.personName = this.$store.state.foreignJjInfo.personName
-				this.countryCode = this.$store.state.foreignJjInfo.countryCode
-				this.emailAddress = this.$store.state.foreignJjInfo.emailAddress
-				this.postalCode = this.$store.state.foreignJjInfo.postalCode
-				this.companyName = this.$store.state.foreignJjInfo.companyName
-				this.phone = this.$store.state.foreignJjInfo.phone
-				this.address = this.$store.state.foreignJjInfo.address
-				this.city = this.$store.state.foreignJjInfo.city
-			}
-		}
-		if (this.titlename == 2) {
-			this.titlename = "收件人地址"
-			console.log(this.$store.state.foreignSjInfo)
-			if (JSON.stringify(this.$store.state.foreignSjInfo) != '{}') {
-				this.personName = this.$store.state.foreignSjInfo.personName
-				this.countryCode = this.$store.state.foreignSjInfo.countryCode
-				this.emailAddress = this.$store.state.foreignSjInfo.emailAddress
-				this.postalCode = this.$store.state.foreignSjInfo.postalCode
-				this.companyName = this.$store.state.foreignSjInfo.companyName
-				this.phone = this.$store.state.foreignSjInfo.phone
-				this.address = this.$store.state.foreignSjInfo.address
-				this.city = this.$store.state.foreignSjInfo.city
-			}
-		}
-	},
-	methods: {
-		//确定
-		onSubmit() {
-			if (this.personName == '' || this.personName == undefined) {
-				Toast('请用英文输入姓名');
-				return;
-			}
+  data() {
+    return {
+      titlename: "寄件人",
+      personName: "",
+      countryCode: "",
+      emailAddress: "",
+      postalCode: "",
+      companyName: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.titlename = this.$route.query.active;
+    if (this.titlename == 1) {
+      this.titlename = "寄件人地址";
+      if (JSON.stringify(this.$store.state.foreignJjInfo) != "{}") {
+        this.personName = this.$store.state.foreignJjInfo.personName;
+        this.countryCode = this.$store.state.foreignJjInfo.countryCode;
+        this.emailAddress = this.$store.state.foreignJjInfo.emailAddress;
+        this.postalCode = this.$store.state.foreignJjInfo.postalCode;
+        this.companyName = this.$store.state.foreignJjInfo.companyName;
+        this.phone = this.$store.state.foreignJjInfo.phone;
+        this.address = this.$store.state.foreignJjInfo.address;
+        this.city = this.$store.state.foreignJjInfo.city;
+      }
+    }
+    if (this.titlename == 2) {
+      this.titlename = "收件人地址";
+      console.log(this.$store.state.foreignSjInfo);
+      if (JSON.stringify(this.$store.state.foreignSjInfo) != "{}") {
+        this.personName = this.$store.state.foreignSjInfo.personName;
+        this.countryCode = this.$store.state.foreignSjInfo.countryCode;
+        this.emailAddress = this.$store.state.foreignSjInfo.emailAddress;
+        this.postalCode = this.$store.state.foreignSjInfo.postalCode;
+        this.companyName = this.$store.state.foreignSjInfo.companyName;
+        this.phone = this.$store.state.foreignSjInfo.phone;
+        this.address = this.$store.state.foreignSjInfo.address;
+        this.city = this.$store.state.foreignSjInfo.city;
+      }
+    }
+  },
+  methods: {
+    //确定
+    onSubmit() {
+      if (this.personName == "" || this.personName == undefined) {
+        Toast("请用英文输入姓名");
+        return;
+      }
 
-			if (this.emailAddress == '' || this.emailAddress == undefined) {
-				Toast('请用英文输入邮箱');
-				return;
-			}
+      if (this.emailAddress == "" || this.emailAddress == undefined) {
+        Toast("请用英文输入邮箱");
+        return;
+      }
 
-			if (this.countryCode == '' || this.countryCode == undefined) {
-				Toast('请用英文输入国家编号');
-				return;
-			}
+      if (this.countryCode == "" || this.countryCode == undefined) {
+        Toast("请用英文输入国家编号");
+        return;
+      }
 
-			if (this.city == '' || this.city == undefined) {
-				Toast('请用英文输入州/城市');
-				return;
-			}
+      if (this.city == "" || this.city == undefined) {
+        Toast("请用英文输入州/城市");
+        return;
+      }
 
-			if (this.phone == '' || this.phone == undefined) {
-				Toast('请输入电话');
-				return;
-			}
+      if (this.phone == "" || this.phone == undefined) {
+        Toast("请输入电话");
+        return;
+      }
 
-			if (this.postalCode == '' || this.postalCode == undefined) {
-				Toast('请输入邮编');
-				return;
-			}
+      if (this.postalCode == "" || this.postalCode == undefined) {
+        Toast("请输入邮编");
+        return;
+      }
 
-			if (this.address == '' || this.address == undefined) {
-				Toast('请用英文输入详细地址');
-				return;
-			}
+      if (this.address == "" || this.address == undefined) {
+        Toast("请用英文输入详细地址");
+        return;
+      }
 
-			if (this.companyName == '' || this.companyName == undefined) {
-				Toast('请用英文输入公司名称');
-				return;
-			}
+      if (this.companyName == "" || this.companyName == undefined) {
+        Toast("请用英文输入公司名称");
+        return;
+      }
 
-			if (this.$route.query.active == 1) {
-				let foreignJjInfo = {};
-				foreignJjInfo.jjname = this.personName + ' ' + this.phone
-				foreignJjInfo.jjadd = this.countryCode + ' ' + this.address
-				foreignJjInfo.personName = this.personName;
-				foreignJjInfo.emailAddress = this.emailAddress;
-				foreignJjInfo.countryCode = this.countryCode;
-				foreignJjInfo.city = this.city;
-				foreignJjInfo.phone = this.phone;
-				foreignJjInfo.postalCode = this.postalCode;
-				foreignJjInfo.address = this.address;
-				foreignJjInfo.companyName = this.companyName;
-				this.$store.commit("getForeignJjInfo", foreignJjInfo);
-			} else if (this.$route.query.active == 2) {
-				let foreignSjInfo = {};
-				foreignSjInfo.sjname = this.personName + ' ' + this.phone
-				foreignSjInfo.sjadd = this.countryCode + ' ' + this.address
-				foreignSjInfo.personName = this.personName;
-				foreignSjInfo.emailAddress = this.emailAddress;
-				foreignSjInfo.countryCode = this.countryCode;
-				foreignSjInfo.city = this.city;
-				foreignSjInfo.phone = this.phone;
-				foreignSjInfo.postalCode = this.postalCode;
-				foreignSjInfo.address = this.address;
-				foreignSjInfo.companyName = this.companyName;
-				this.$store.commit("getForeignSjInfo", foreignSjInfo);
-			}
+      if (this.$route.query.active == 1) {
+        let foreignJjInfo = {};
+        foreignJjInfo.jjname = this.personName + " " + this.phone;
+        foreignJjInfo.jjadd = this.countryCode + " " + this.address;
+        foreignJjInfo.personName = this.personName;
+        foreignJjInfo.emailAddress = this.emailAddress;
+        foreignJjInfo.countryCode = this.countryCode;
+        foreignJjInfo.city = this.city;
+        foreignJjInfo.phone = this.phone;
+        foreignJjInfo.postalCode = this.postalCode;
+        foreignJjInfo.address = this.address;
+        foreignJjInfo.companyName = this.companyName;
+        this.$store.commit("getForeignJjInfo", foreignJjInfo);
+      } else if (this.$route.query.active == 2) {
+        let foreignSjInfo = {};
+        foreignSjInfo.sjname = this.personName + " " + this.phone;
+        foreignSjInfo.sjadd = this.countryCode + " " + this.address;
+        foreignSjInfo.personName = this.personName;
+        foreignSjInfo.emailAddress = this.emailAddress;
+        foreignSjInfo.countryCode = this.countryCode;
+        foreignSjInfo.city = this.city;
+        foreignSjInfo.phone = this.phone;
+        foreignSjInfo.postalCode = this.postalCode;
+        foreignSjInfo.address = this.address;
+        foreignSjInfo.companyName = this.companyName;
+        this.$store.commit("getForeignSjInfo", foreignSjInfo);
+      }
 
-			this.$router.push({ path: "/Foreignexpress" })
-		},
-		onConfirm3(e) {//确定
-			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-			this.areashow = false
-			console.log(e)
-		},
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+      this.$router.push({ path: "/Foreignexpress" });
+    },
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
+  .form {
+    padding: 0.3rem;
 
-	.form {
-		padding: .3rem;
-
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
-
-		}
-	}
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
 }
 </style>

src/pages/forgetpassword.vue

@@ -1,133 +1,140 @@
 <template>
-	<div class="content">
-
-		<div class="login">
-			<!-- <div class="item">
+  <div class="content">
+    <div class="login">
+      <!-- <div class="item">
 				<van-cell-group>
 			       <van-field v-model="name"  placeholder="请输入用户名或邮箱" />
 			    </van-cell-group>
 			</div> -->
-			<div class="item">
-				<van-cell-group>
-					<van-field v-model="password" type="password" placeholder="请输入密码" />
-				</van-cell-group>
-			</div>
-			<div class="item">
-				<van-cell-group>
-					<van-field v-model="confirmPassword" type="password" placeholder="请再次输入密码" />
-				</van-cell-group>
-			</div>
-			<div class="btn">
-				<van-button type="primary" @click="save()" color="#00c4b8">保存</van-button>
-			</div>
-			<!-- <div class="register">
+      <div class="item">
+        <van-cell-group>
+          <van-field
+            v-model="password"
+            type="password"
+            placeholder="请输入密码"
+          />
+        </van-cell-group>
+      </div>
+      <div class="item">
+        <van-cell-group>
+          <van-field
+            v-model="confirmPassword"
+            type="password"
+            placeholder="请再次输入密码"
+          />
+        </van-cell-group>
+      </div>
+      <div class="btn">
+        <van-button type="primary" @click="save()" color="#0c2469"
+          >保存</van-button
+        >
+      </div>
+      <!-- <div class="register">
 				<router-link to="">新用户注册</router-link>
 				<router-link to="">忘记密码</router-link>
 			</div> -->
-		</div>
-	</div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { forgetPassword } from '../api/index'
-import { Toast, Dialog } from 'vant'
+import { forgetPassword } from "../api/index";
+import { Toast, Dialog } from "vant";
 export default {
+  data() {
+    return {
+      titlename: "修改密码",
+      name: "",
+      password: "",
+      confirmPassword: "",
+      yzm: "",
+      userId: ""
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+  },
+  methods: {
+    async save() {
+      if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(this.confirmPassword)) {
+        Toast("密码需包含大小写字母及数字，长度至少为8位!");
+        return;
+      }
+      if (this.password == "" || this.password == undefined) {
+        Toast("请输入密码！");
+        return;
+      }
+      if (this.confirmPassword == "" || this.confirmPassword == undefined) {
+        Toast("请再次输入密码！");
+        return;
+      }
+      if (this.confirmPassword != this.password) {
+        Toast("两次输入密码不相同！");
+        return;
+      }
 
-	data() {
-		return {
-			titlename: "修改密码",
-			name: "",
-			password: "",
-			confirmPassword: "",
-			yzm: "",
-			userId: "",
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem('userId');
-	},
-	methods: {
-		async save() {
-			if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(this.confirmPassword)) {  
-				Toast('密码需包含大小写字母及数字，长度至少为8位!');
-				return;
-			}
-			if (this.password == '' || this.password == undefined) {
-				Toast('请输入密码！');
-				return;
-			}
-			if (this.confirmPassword == '' || this.confirmPassword == undefined) {
-				Toast('请再次输入密码！');
-				return;
-			}
-			if (this.confirmPassword != this.password) {
-				Toast('两次输入密码不相同！');
-				return;
-			}
-
-			const res = await forgetPassword({ userId: this.userId, password: this.password })
-			if (res.msg == 'success') {
-				localStorage.removeItem("userId");
-				this.$router.push({ path: '/' });
-				Toast('修改成功')
-			} else {
-				Toast('修改失败')
-			}
-
-
-		}
-
-
-	}
-}
+      const res = await forgetPassword({
+        userId: this.userId,
+        password: this.password
+      });
+      if (res.msg == "success") {
+        localStorage.removeItem("userId");
+        this.$router.push({ path: "/" });
+        Toast("修改成功");
+      } else {
+        Toast("修改失败");
+      }
+    }
+  }
+};
 </script>
 <style scoped lang="less">
 .content {
-	.loginimg {
-		width: 3.48rem;
-		margin: 0 auto;
-		display: block;
-		padding: 2.15rem .8rem;
-	}
+  .loginimg {
+    width: 3.48rem;
+    margin: 0 auto;
+    display: block;
+    padding: 2.15rem 0.8rem;
+  }
 
-	.login {
-		width: 5.8rem;
-		margin: 0.3rem auto 0px;
+  .login {
+    width: 5.8rem;
+    margin: 0.3rem auto 0px;
 
-		.item {
-			border: .01rem solid #bfbfbf;
-			border-radius: .1rem;
-			margin-bottom: .3rem;
-			background: white;
-			overflow: hidden;
-			color: #999999;
-		}
+    .item {
+      border: 0.01rem solid #bfbfbf;
+      border-radius: 0.1rem;
+      margin-bottom: 0.3rem;
+      background: white;
+      overflow: hidden;
+      color: #999999;
+    }
 
-		.item:nth-of-type(3) {
-			margin-bottom: .2rem;
-		}
+    .item:nth-of-type(3) {
+      margin-bottom: 0.2rem;
+    }
 
-		.btn {
-			button {
-				width: 100%;
-			}
-		}
+    .btn {
+      button {
+        width: 100%;
+      }
+    }
 
-		.register {
-			font-size: .24rem;
-			display: flex;
-			justify-content: space-between;
-			margin-top: .2rem;
+    .register {
+      font-size: 0.24rem;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 0.2rem;
 
-			a {
-				color: #999999;
-			}
+      a {
+        color: #999999;
+      }
 
-			a:nth-of-type(1) {
-				color: #02bfb3;
-			}
-		}
-	}
+      a:nth-of-type(1) {
+        color: #02bfb3;
+      }
+    }
+  }
 }
 </style>

src/pages/hkaddress.vue

@@ -1,177 +1,223 @@
 <template>
-	<div class="content">
-
-		<div class="form">
-			<van-form @submit="onSubmit"><!--oninput="value=value.replace(/[^\w\.\s/]/ig,'')"-->
-				<van-field v-model="personName" name="姓名" label="姓名" placeholder="请输入姓名" />
-				<van-field v-model="emailAddress" name="邮箱" label="邮箱" placeholder="请输入邮箱" />
-				<van-field v-model="countryCode" name="国家编码" label="国家编码" placeholder="请用输入国家编码" />
-				<van-field v-model="city" name="州/城市" label="州/城市" placeholder="请输入州/城市" />
-				<van-field v-model="phone" type="number" name="电话" label="电话" placeholder="请输入电话" />
-				<!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" /> -->
-				<van-field v-model="postalCode" name="邮编" label="邮编" placeholder="请输入邮编" />
-				<van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址" />
-				<van-field v-model="companyName" name="公司名称" label="公司名称" placeholder="请输入公司名称 如SF EXPRESS CO,LTD" />
-				<div style="margin-top: 16px;">
-					<van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				</div>
-			</van-form>
-			<!-- 城市选择 -->
-			<van-popup v-model="areashow" position="bottom">
-				<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-			</van-popup>
-		</div>
-	</div>
+  <div class="content">
+    <div class="form">
+      <van-form @submit="onSubmit"
+        ><!--oninput="value=value.replace(/[^\w\.\s/]/ig,'')"-->
+        <van-field
+          v-model="personName"
+          name="姓名"
+          label="姓名"
+          placeholder="请输入姓名"
+        />
+        <van-field
+          v-model="emailAddress"
+          name="邮箱"
+          label="邮箱"
+          placeholder="请输入邮箱"
+        />
+        <van-field
+          v-model="countryCode"
+          name="国家编码"
+          label="国家编码"
+          placeholder="请用输入国家编码"
+        />
+        <van-field
+          v-model="city"
+          name="州/城市"
+          label="州/城市"
+          placeholder="请输入州/城市"
+        />
+        <van-field
+          v-model="phone"
+          type="number"
+          name="电话"
+          label="电话"
+          placeholder="请输入电话"
+        />
+        <!-- <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" /> -->
+        <van-field
+          v-model="postalCode"
+          name="邮编"
+          label="邮编"
+          placeholder="请输入邮编"
+        />
+        <van-field
+          v-model="address"
+          name="详细地址"
+          label="详细地址"
+          placeholder="请输入详细地址"
+        />
+        <van-field
+          v-model="companyName"
+          name="公司名称"
+          label="公司名称"
+          placeholder="请输入公司名称 如SF EXPRESS CO,LTD"
+        />
+        <div style="margin-top: 16px;">
+          <van-button color="#0c2469" block type="info" native-type="submit"
+            >确定</van-button
+          >
+        </div>
+      </van-form>
+      <!-- 城市选择 -->
+      <van-popup v-model="areashow" position="bottom">
+        <van-area
+          :area-list="areaList"
+          @confirm="onConfirm3"
+          @cancel="areashow = false"
+        />
+      </van-popup>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
-import areaList from "@/script/areas.js"
+import { Toast, Dialog } from "vant";
+import areaList from "@/script/areas.js";
 export default {
-	data() {
-		return {
-			titlename: "寄件人",
-			personName: "",
-			countryCode: "",
-			emailAddress: "",
-			postalCode: "",
-			companyName: "",
-			phone: "",
-			city: "",
-			address: "",
-			areashow: false,
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.titlename = this.$route.query.active
-		if (this.titlename == 1) {
-			this.titlename = "寄件人地址"
-			if (JSON.stringify(this.$store.state.hkJjInfo) != '{}') {
-				this.personName = this.$store.state.hkJjInfo.personName
-				this.countryCode = this.$store.state.hkJjInfo.countryCode
-				this.emailAddress = this.$store.state.hkJjInfo.emailAddress
-				this.postalCode = this.$store.state.hkJjInfo.postalCode
-				this.companyName = this.$store.state.hkJjInfo.companyName
-				this.phone = this.$store.state.hkJjInfo.phone
-				this.address = this.$store.state.hkJjInfo.address
-				this.city = this.$store.state.hkJjInfo.city
-			}
-		}
-		if (this.titlename == 2) {
-			this.titlename = "收件人地址"
-			console.log(this.$store.state.hkSjInfo)
-			if (JSON.stringify(this.$store.state.hkSjInfo) != '{}') {
-				this.personName = this.$store.state.hkSjInfo.personName
-				this.countryCode = this.$store.state.hkSjInfo.countryCode
-				this.emailAddress = this.$store.state.hkSjInfo.emailAddress
-				this.postalCode = this.$store.state.hkSjInfo.postalCode
-				this.companyName = this.$store.state.hkSjInfo.companyName
-				this.phone = this.$store.state.hkSjInfo.phone
-				this.address = this.$store.state.hkSjInfo.address
-				this.city = this.$store.state.hkSjInfo.city
-			}
-		}
-	},
-	methods: {
-		//确定
-		onSubmit() {
-			if (this.personName == '' || this.personName == undefined) {
-				Toast('请用英文输入姓名');
-				return;
-			}
+  data() {
+    return {
+      titlename: "寄件人",
+      personName: "",
+      countryCode: "",
+      emailAddress: "",
+      postalCode: "",
+      companyName: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.titlename = this.$route.query.active;
+    if (this.titlename == 1) {
+      this.titlename = "寄件人地址";
+      if (JSON.stringify(this.$store.state.hkJjInfo) != "{}") {
+        this.personName = this.$store.state.hkJjInfo.personName;
+        this.countryCode = this.$store.state.hkJjInfo.countryCode;
+        this.emailAddress = this.$store.state.hkJjInfo.emailAddress;
+        this.postalCode = this.$store.state.hkJjInfo.postalCode;
+        this.companyName = this.$store.state.hkJjInfo.companyName;
+        this.phone = this.$store.state.hkJjInfo.phone;
+        this.address = this.$store.state.hkJjInfo.address;
+        this.city = this.$store.state.hkJjInfo.city;
+      }
+    }
+    if (this.titlename == 2) {
+      this.titlename = "收件人地址";
+      console.log(this.$store.state.hkSjInfo);
+      if (JSON.stringify(this.$store.state.hkSjInfo) != "{}") {
+        this.personName = this.$store.state.hkSjInfo.personName;
+        this.countryCode = this.$store.state.hkSjInfo.countryCode;
+        this.emailAddress = this.$store.state.hkSjInfo.emailAddress;
+        this.postalCode = this.$store.state.hkSjInfo.postalCode;
+        this.companyName = this.$store.state.hkSjInfo.companyName;
+        this.phone = this.$store.state.hkSjInfo.phone;
+        this.address = this.$store.state.hkSjInfo.address;
+        this.city = this.$store.state.hkSjInfo.city;
+      }
+    }
+  },
+  methods: {
+    //确定
+    onSubmit() {
+      if (this.personName == "" || this.personName == undefined) {
+        Toast("请用英文输入姓名");
+        return;
+      }
 
-			if (this.emailAddress == '' || this.emailAddress == undefined) {
-				Toast('请用英文输入邮箱');
-				return;
-			}
+      if (this.emailAddress == "" || this.emailAddress == undefined) {
+        Toast("请用英文输入邮箱");
+        return;
+      }
 
-			if (this.countryCode == '' || this.countryCode == undefined) {
-				Toast('请用英文输入国家编号');
-				return;
-			}
+      if (this.countryCode == "" || this.countryCode == undefined) {
+        Toast("请用英文输入国家编号");
+        return;
+      }
 
-			if (this.city == '' || this.city == undefined) {
-				Toast('请用英文输入州/城市');
-				return;
-			}
+      if (this.city == "" || this.city == undefined) {
+        Toast("请用英文输入州/城市");
+        return;
+      }
 
-			if (this.phone == '' || this.phone == undefined) {
-				Toast('请输入电话');
-				return;
-			}
+      if (this.phone == "" || this.phone == undefined) {
+        Toast("请输入电话");
+        return;
+      }
 
-			if (this.postalCode == '' || this.postalCode == undefined) {
-				Toast('请输入邮编');
-				return;
-			}
+      if (this.postalCode == "" || this.postalCode == undefined) {
+        Toast("请输入邮编");
+        return;
+      }
 
-			if (this.address == '' || this.address == undefined) {
-				Toast('请用英文输入详细地址');
-				return;
-			}
+      if (this.address == "" || this.address == undefined) {
+        Toast("请用英文输入详细地址");
+        return;
+      }
 
-			if (this.companyName == '' || this.companyName == undefined) {
-				Toast('请用英文输入公司名称');
-				return;
-			}
+      if (this.companyName == "" || this.companyName == undefined) {
+        Toast("请用英文输入公司名称");
+        return;
+      }
 
-			if (this.$route.query.active == 1) {
-				let hkJjInfo = {};
-				hkJjInfo.jjname = this.personName + ' ' + this.phone
-				hkJjInfo.jjadd = this.countryCode + ' ' + this.address
-				hkJjInfo.personName = this.personName;
-				hkJjInfo.emailAddress = this.emailAddress;
-				hkJjInfo.countryCode = this.countryCode;
-				hkJjInfo.city = this.city;
-				hkJjInfo.phone = this.phone;
-				hkJjInfo.postalCode = this.postalCode;
-				hkJjInfo.address = this.address;
-				hkJjInfo.companyName = this.companyName;
-				this.$store.commit("getHkJjInfo", hkJjInfo);
-			} else if (this.$route.query.active == 2) {
-				let hkSjInfo = {};
-				hkSjInfo.sjname = this.personName + ' ' + this.phone
-				hkSjInfo.sjadd = this.countryCode + ' ' + this.address
-				hkSjInfo.personName = this.personName;
-				hkSjInfo.emailAddress = this.emailAddress;
-				hkSjInfo.countryCode = this.countryCode;
-				hkSjInfo.city = this.city;
-				hkSjInfo.phone = this.phone;
-				hkSjInfo.postalCode = this.postalCode;
-				hkSjInfo.address = this.address;
-				hkSjInfo.companyName = this.companyName;
-				this.$store.commit("getHkSjInfo", hkSjInfo);
-			}
+      if (this.$route.query.active == 1) {
+        let hkJjInfo = {};
+        hkJjInfo.jjname = this.personName + " " + this.phone;
+        hkJjInfo.jjadd = this.countryCode + " " + this.address;
+        hkJjInfo.personName = this.personName;
+        hkJjInfo.emailAddress = this.emailAddress;
+        hkJjInfo.countryCode = this.countryCode;
+        hkJjInfo.city = this.city;
+        hkJjInfo.phone = this.phone;
+        hkJjInfo.postalCode = this.postalCode;
+        hkJjInfo.address = this.address;
+        hkJjInfo.companyName = this.companyName;
+        this.$store.commit("getHkJjInfo", hkJjInfo);
+      } else if (this.$route.query.active == 2) {
+        let hkSjInfo = {};
+        hkSjInfo.sjname = this.personName + " " + this.phone;
+        hkSjInfo.sjadd = this.countryCode + " " + this.address;
+        hkSjInfo.personName = this.personName;
+        hkSjInfo.emailAddress = this.emailAddress;
+        hkSjInfo.countryCode = this.countryCode;
+        hkSjInfo.city = this.city;
+        hkSjInfo.phone = this.phone;
+        hkSjInfo.postalCode = this.postalCode;
+        hkSjInfo.address = this.address;
+        hkSjInfo.companyName = this.companyName;
+        this.$store.commit("getHkSjInfo", hkSjInfo);
+      }
 
-			this.$router.push({ path: "/Hkexpress" })
-		},
-		onConfirm3(e) {//确定
-			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-			this.areashow = false
-			console.log(e)
-		},
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+      this.$router.push({ path: "/Hkexpress" });
+    },
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
+  .form {
+    padding: 0.3rem;
 
-	.form {
-		padding: .3rem;
-
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
-
-		}
-	}
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
 }
 </style>

src/pages/inaddressbook.vue

@@ -1,15 +1,14 @@
 <template>
-	<div class="content">
-
-		<!-- table切换 -->
-		<div class="tab">
-			<div>
-				<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">内部收件人</p>
-				<!-- <p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p> -->
-			</div>
-		</div>
-		<!-- 寄件人 -->
-		<!-- <div v-if="index==1">
+  <div class="content">
+    <!-- table切换 -->
+    <div class="tab">
+      <div>
+        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">内部收件人</p>
+        <!-- <p @click="tab(2)" :class="[index==2?'active':'']" class="">收件人</p> -->
+      </div>
+    </div>
+    <!-- 寄件人 -->
+    <!-- <div v-if="index==1">
 			<div class="jjinfo" v-for="item in addressList">
 				<div>
 					<div class="jj">
@@ -37,281 +36,296 @@
 					</div>
 				</div>			
 			</div> -->
-		<!-- 寄件 -->
-		<!-- <div class="btn-jj">
-				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
+    <!-- 寄件 -->
+    <!-- <div class="btn-jj">
+				<van-button @click="link(1)" type="info" color="#0c2469">添加寄件人</van-button>
 			</div>
 		</div> -->
 
-		<!-- 收件人 -->
-		<div v-if="index == 3">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLinkSj(item)">
-							<p style="background: #fa9c22;">收</p>
-							<div :id="'copytkl' + item.id">
-								<p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<!-- <p @click="linkEdit(item.id)">
+    <!-- 收件人 -->
+    <div v-if="index == 3">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLinkSj(item)">
+              <p style="background: #fa9c22;">收</p>
+              <div :id="'copytkl' + item.id">
+                <p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <!-- <p @click="linkEdit(item.id)">
 								<img src="../assets/images/whrite.png" alt="">
 								<span>编辑</span>
 							</p> -->
-							<p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
-								:data-clipboard-target="'#copytkl' + item.id">
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button type="info" @click="link(3)" color="#00c4b8">添加收件人</van-button>
-			</div>
-		</div>
-	</div>
+              <p
+                :id="'fz' + item.id"
+                @click="copyLink(item.id)"
+                data-clipboard-action="copy"
+                :data-clipboard-target="'#copytkl' + item.id"
+              >
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button type="info" @click="link(3)" color="#0c2469"
+          >添加收件人</van-button
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
+import { Toast, Dialog } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "地址簿",
-			index: 3,
-			userId: '',
-			addressList: []
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem("userId");
-		//获取参数
-		this.index = this.$route.query.active
-		this.getData();
-	},
-	methods: {
-		//复制
-		copyLink(id) {
-			let _this = this;
-			let clipboard = new this.clipboard("#fz" + id);
-			clipboard.on('success', function () {
-				//window.console.log('00')
-			});
-			clipboard.on('error', function () {
-				_this.$toast("复制失败")
-			});
-		},
-		tab(obj) {
-			this.index = obj
-			this.getData()
-		},
-		link(obj) {
-			this.$router.push({ path: "/InNewaddress", query: { type: obj } })
-		},
-		getData() {
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			this.$http.post(this.$store.state.host + "/personal/getAddressList.do", { userId: this.userId, type: this.index }, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						this.addressList = res.body.addressList
-					}
-					Toast.clear()
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
-			Toast.clear()
-		},
-		del(id) {
-			Dialog.confirm({ title: '', message: '确定删除吗', })
-				.then(() => {
-					Toast.loading({
-						message: '删除中...',
-						forbidClick: true,
-						duration: 0
-					});
-					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
-						.then(res => {
-							//发送成功
-							if (res.body.msg == 'success') {
-								this.getData()
-							} else {
-								Toast("删除失败!")
-							}
-							Toast.clear()
-						}, res => {
-							//发送失败
-							Toast("网络错误!")
-						})
-					Toast.clear()
-				})
-				.catch(() => {
-					//  on cancel 
-				})
-		},
-		//跳去编辑页
-		linkEdit(id) {
-			this.$router.push({ path: "/Editaddress", query: { id: id } })
-		},
-		adressLink(item) {
-			let jjInfo = {}
-			jjInfo.jjname = item.name + ' ' + item.phone
-			jjInfo.jjadd = item.provinceAndCity + ' ' + item.address
-			jjInfo.sender = item.name
-			jjInfo.senderPhone = item.phone
-			jjInfo.sendAddr = item.provinceAndCity
-			jjInfo.sendAddress = item.address
-			this.$store.commit("getJjInfo", jjInfo)
-			this.$router.push({ path: "/Express" })
-		},
-		adressLinkSj(item) {
-			let sjInfo = {}
-			sjInfo.sjname = item.name + ' ' + item.phone
-			sjInfo.sjadd = item.provinceAndCity + ' ' + item.address
-			sjInfo.receiver = item.name
-			sjInfo.receiverPhone = item.phone
-			sjInfo.receiveMobile = item.telPhone
-			sjInfo.receiveAddr = item.provinceAndCity
-			sjInfo.receiveAddress = item.address
-			this.$store.commit("getSjInfo3", sjInfo)
-			this.$router.push({ path: "/Inexpress" })
-		}
-	},
-	computed: {
-
-	}
-}
+  data() {
+    return {
+      titlename: "地址簿",
+      index: 3,
+      userId: "",
+      addressList: []
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    //获取参数
+    this.index = this.$route.query.active;
+    this.getData();
+  },
+  methods: {
+    //复制
+    copyLink(id) {
+      let _this = this;
+      let clipboard = new this.clipboard("#fz" + id);
+      clipboard.on("success", function() {
+        //window.console.log('00')
+      });
+      clipboard.on("error", function() {
+        _this.$toast("复制失败");
+      });
+    },
+    tab(obj) {
+      this.index = obj;
+      this.getData();
+    },
+    link(obj) {
+      this.$router.push({ path: "/InNewaddress", query: { type: obj } });
+    },
+    getData() {
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/getAddressList.do",
+          { userId: this.userId, type: this.index },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              this.addressList = res.body.addressList;
+            }
+            Toast.clear();
+          },
+          res => {
+            //发送失败
+            Toast("网络错误!");
+          }
+        );
+      Toast.clear();
+    },
+    del(id) {
+      Dialog.confirm({ title: "", message: "确定删除吗" })
+        .then(() => {
+          Toast.loading({
+            message: "删除中...",
+            forbidClick: true,
+            duration: 0
+          });
+          this.$http
+            .post(
+              this.$store.state.host + "/personal/deleteAddressInfoById.do",
+              { id: id },
+              { emulateJSON: true }
+            )
+            .then(
+              res => {
+                //发送成功
+                if (res.body.msg == "success") {
+                  this.getData();
+                } else {
+                  Toast("删除失败!");
+                }
+                Toast.clear();
+              },
+              res => {
+                //发送失败
+                Toast("网络错误!");
+              }
+            );
+          Toast.clear();
+        })
+        .catch(() => {
+          //  on cancel
+        });
+    },
+    //跳去编辑页
+    linkEdit(id) {
+      this.$router.push({ path: "/Editaddress", query: { id: id } });
+    },
+    adressLink(item) {
+      let jjInfo = {};
+      jjInfo.jjname = item.name + " " + item.phone;
+      jjInfo.jjadd = item.provinceAndCity + " " + item.address;
+      jjInfo.sender = item.name;
+      jjInfo.senderPhone = item.phone;
+      jjInfo.sendAddr = item.provinceAndCity;
+      jjInfo.sendAddress = item.address;
+      this.$store.commit("getJjInfo", jjInfo);
+      this.$router.push({ path: "/Express" });
+    },
+    adressLinkSj(item) {
+      let sjInfo = {};
+      sjInfo.sjname = item.name + " " + item.phone;
+      sjInfo.sjadd = item.provinceAndCity + " " + item.address;
+      sjInfo.receiver = item.name;
+      sjInfo.receiverPhone = item.phone;
+      sjInfo.receiveMobile = item.telPhone;
+      sjInfo.receiveAddr = item.provinceAndCity;
+      sjInfo.receiveAddress = item.address;
+      this.$store.commit("getSjInfo3", sjInfo);
+      this.$router.push({ path: "/Inexpress" });
+    }
+  },
+  computed: {}
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	.tab {
-		font-size: .36rem;
-		color: #00c4b8;
-		padding: .33rem;
-
-		div {
-			display: flex;
-			border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-
-			p {
-				flex: 1;
-				padding: .1rem 0rem;
-			}
-
-			p.active {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-
-	}
-
-	.jjinfo {
-		font-size: .36rem;
-		color: #999999;
-		padding: .0rem .33rem 0.33rem;
-		word-break: break-word;
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.33rem;
 
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
 
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-				flex-wrap: wrap;
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
 
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem .2rem;
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
 
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
+  .jjinfo {
+    font-size: 0.36rem;
+    color: #999999;
+    padding: 0rem 0.33rem 0.33rem;
+    word-break: break-word;
 
-					div {
-						//font-weight: bold;
-						max-width: 5.2rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
 
-						p:nth-of-type(1) {
-							font-size: .3rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        flex-wrap: wrap;
 
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem 0.2rem;
 
-				.cz {
-					border-top: .01rem solid #ededed;
-					width: 100%;
-					display: flex;
-					flex-direction: row-reverse;
-					font-size: .24rem;
-					color: #999999;
-					padding-top: .2rem;
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
 
-					p {
-						margin-left: .2rem;
+          div {
+            //font-weight: bold;
+            max-width: 5.2rem;
 
-						img {
-							width: .22rem;
-							height: .24rem;
-						}
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
 
-						span {
-							position: relative;
-							top: -.01rem;
-						}
-					}
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
 
-				}
-			}
-		}
+        .cz {
+          border-top: 0.01rem solid #ededed;
+          width: 100%;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 0.24rem;
+          color: #999999;
+          padding-top: 0.2rem;
 
-	}
+          p {
+            margin-left: 0.2rem;
 
+            img {
+              width: 0.22rem;
+              height: 0.24rem;
+            }
 
+            span {
+              position: relative;
+              top: -0.01rem;
+            }
+          }
+        }
+      }
+    }
+  }
 
-	.btn-jj {
-		padding: .33rem;
+  .btn-jj {
+    padding: 0.33rem;
 
-		button {
-			width: 100%;
-		}
-	}
+    button {
+      width: 100%;
+    }
+  }
 }
 </style>

src/pages/innewaddress.vue

@@ -1,181 +1,262 @@
 <template>
-	<div class="content">
-
-		<div class="form">
-			<van-form @submit="onSubmit">
-				<form action="/">
-					<van-search shape="round" v-model="dsname" show-action placeholder="请输入搜索关键词" @search="onSearch"
-						@cancel="onCancel" />
-				</form>
-				<van-field readonly v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" @click="dsnameshow = true"
-					:rules="[{ required: false }]" />
-				<van-field readonly v-model="phone" maxlength="11" type="number" name="手机" label="手机"
-					placeholder="请输入手机" @click="dsnameshow = true" :rules="[{ required: false }]" />
-				<van-field readonly v-model="telPhone" maxlength="20" type="text" name="座机" label="座机"
-					placeholder="请输入座机" @click="dsnameshow = true" :rules="[{ required: false }]" />
-				<van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
-					@click="areashow = true" :rules="[{ required: false }]" />
-				<van-field readonly v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"
-					@click="dsnameshow = true" :rules="[{ required: false }]" />
-				<div style="margin-top: 16px;">
-					<van-button color="#00c4b8" block type="info" native-type="submit"
-						:disabled="disabled">确定</van-button>
-				</div>
-			</van-form>
-			<!-- 代收人列表 -->
-			<van-popup v-model="dsnameshow" position="bottom">
-				<van-picker title="内部收件人" show-toolbar :columns="dsList" value-key="text" @confirm="onConfirmDs"
-					@cancel="dsnameshow = false" />
-			</van-popup>
-			<!-- 城市选择 -->
-			<van-popup v-model="areashow" position="bottom">
-				<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-			</van-popup>
-		</div>
-	</div>
+  <div class="content">
+    <div class="form">
+      <van-form @submit="onSubmit">
+        <form action="/">
+          <van-search
+            shape="round"
+            v-model="dsname"
+            show-action
+            placeholder="请输入搜索关键词"
+            @search="onSearch"
+            @cancel="onCancel"
+          />
+        </form>
+        <van-field
+          readonly
+          v-model="name"
+          name="姓名"
+          label="姓名"
+          placeholder="请输入姓名"
+          @click="dsnameshow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          readonly
+          v-model="phone"
+          maxlength="11"
+          type="number"
+          name="手机"
+          label="手机"
+          placeholder="请输入手机"
+          @click="dsnameshow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          readonly
+          v-model="telPhone"
+          maxlength="20"
+          type="text"
+          name="座机"
+          label="座机"
+          placeholder="请输入座机"
+          @click="dsnameshow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          readonly
+          clickable
+          name="area"
+          :value="city"
+          label="省市区"
+          placeholder="请选择省市区"
+          @click="areashow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          readonly
+          v-model="address"
+          name="详细地址"
+          label="详细地址"
+          placeholder="请输入详细地址"
+          @click="dsnameshow = true"
+          :rules="[{ required: false }]"
+        />
+        <div style="margin-top: 16px;">
+          <van-button
+            color="#0c2469"
+            block
+            type="info"
+            native-type="submit"
+            :disabled="disabled"
+            >确定</van-button
+          >
+        </div>
+      </van-form>
+      <!-- 代收人列表 -->
+      <van-popup v-model="dsnameshow" position="bottom">
+        <van-picker
+          title="内部收件人"
+          show-toolbar
+          :columns="dsList"
+          value-key="text"
+          @confirm="onConfirmDs"
+          @cancel="dsnameshow = false"
+        />
+      </van-popup>
+      <!-- 城市选择 -->
+      <van-popup v-model="areashow" position="bottom">
+        <van-area
+          :area-list="areaList"
+          @confirm="onConfirm3"
+          @cancel="areashow = false"
+        />
+      </van-popup>
+    </div>
+  </div>
 </template>
 
 <script>
-import areaList from "@/script/areas.js"
-import { Toast } from 'vant'
+import areaList from "@/script/areas.js";
+import { Toast } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "添加内部收件人",
-			name: "",
-			phone: "",
-			telPhone: "",
-			city: "",
-			address: "",
-			areashow: false,
-			type: '',
-			disabled: false,
-			dsList: [],//代收人列表
-			dsnameshow: false,
-			dsname: '',
-			userId: ''
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.type = this.$route.query.type
-		//代收人列表
-		this.findCollectAgentList()
-		this.userId = localStorage.getItem("userId");
-	},
-	methods: {
-		//代收人搜索
-		onSearch() {
-			this.$http.post(this.$store.state.host + "/sendMail/searchInnerContactsList.do", {
-				userId: this.userId, name: this.dsname
-			}, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						this.dsList = res.body.list
-						for (var i = 0; i < this.dsList.length; i++) {
-							this.dsList[i].text = this.dsList[i].name + ' ' + this.dsList[i].telephone + ' ' + this.dsList[i].phone
-						}
-						this.dsnameshow = true
-					}
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
-		},
-		//搜索取消
-		onCancel() {
-			this.findCollectAgentList()
-		},
-		onConfirmDs(e) {//确定
-			if (e != undefined) {
-				this.name = e.name
-				this.phone = e.phone
-				this.telPhone = e.telephone
-				this.address = e.address
-				this.city = e.province + ' ' + e.area + ' ' + e.city
-			}
-			this.dsnameshow = false
-		},
-		onSubmit() {
-
-			if (this.name == '' || this.name == undefined) {
-				Toast('请输入姓名')
-				return
-			}
-
-			if (this.phone == '' || this.phone == undefined) {
-				Toast('请填写手机号')
-				return
-			}
+  data() {
+    return {
+      titlename: "添加内部收件人",
+      name: "",
+      phone: "",
+      telPhone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      type: "",
+      disabled: false,
+      dsList: [], //代收人列表
+      dsnameshow: false,
+      dsname: "",
+      userId: ""
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.type = this.$route.query.type;
+    //代收人列表
+    this.findCollectAgentList();
+    this.userId = localStorage.getItem("userId");
+  },
+  methods: {
+    //代收人搜索
+    onSearch() {
+      this.$http
+        .post(
+          this.$store.state.host + "/sendMail/searchInnerContactsList.do",
+          {
+            userId: this.userId,
+            name: this.dsname
+          },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              this.dsList = res.body.list;
+              for (var i = 0; i < this.dsList.length; i++) {
+                this.dsList[i].text =
+                  this.dsList[i].name +
+                  " " +
+                  this.dsList[i].telephone +
+                  " " +
+                  this.dsList[i].phone;
+              }
+              this.dsnameshow = true;
+            }
+          },
+          res => {
+            //发送失败
+            Toast("网络错误!");
+          }
+        );
+    },
+    //搜索取消
+    onCancel() {
+      this.findCollectAgentList();
+    },
+    onConfirmDs(e) {
+      //确定
+      if (e != undefined) {
+        this.name = e.name;
+        this.phone = e.phone;
+        this.telPhone = e.telephone;
+        this.address = e.address;
+        this.city = e.province + " " + e.area + " " + e.city;
+      }
+      this.dsnameshow = false;
+    },
+    onSubmit() {
+      if (this.name == "" || this.name == undefined) {
+        Toast("请输入姓名");
+        return;
+      }
 
-			if (this.city == '' || this.city == undefined) {
-				Toast('请选择省市区')
-				return
-			}
+      if (this.phone == "" || this.phone == undefined) {
+        Toast("请填写手机号");
+        return;
+      }
 
-			if (this.address == '' || this.address == undefined) {
-				Toast('请输入详细地址')
-				return
-			}
+      if (this.city == "" || this.city == undefined) {
+        Toast("请选择省市区");
+        return;
+      }
 
+      if (this.address == "" || this.address == undefined) {
+        Toast("请输入详细地址");
+        return;
+      }
 
-			this.disabled = true;
+      this.disabled = true;
 
-			this.$http.post(this.$store.state.host + "/personal/saveAddressInfo.do", {
-				userId: this.userId,
-				name: this.name,
-				phone: this.phone,
-				telPhone: this.telPhone,
-				provinceAndCity: this.city,
-				address: this.address,
-				type: this.type
-			}, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						Toast("保存成功");
-						let that = this;
-						setTimeout(function () {
-							that.$router.back()
-						}, 500)
-					} else {
-						Toast("保存失败");
-					}
-					this.disabled = false;
-				}, res => {
-					//发送失败
-					Toast("网络错误");
-					this.disabled = false;
-				})
-			this.disabled = false;
-		},
-		onConfirm3(e) {//确定
-			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-			this.areashow = false
-			console.log(e)
-		},
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/saveAddressInfo.do",
+          {
+            userId: this.userId,
+            name: this.name,
+            phone: this.phone,
+            telPhone: this.telPhone,
+            provinceAndCity: this.city,
+            address: this.address,
+            type: this.type
+          },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              Toast("保存成功");
+              let that = this;
+              setTimeout(function() {
+                that.$router.back();
+              }, 500);
+            } else {
+              Toast("保存失败");
+            }
+            this.disabled = false;
+          },
+          res => {
+            //发送失败
+            Toast("网络错误");
+            this.disabled = false;
+          }
+        );
+      this.disabled = false;
+    },
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
+  .form {
+    padding: 0.3rem;
 
-	.form {
-		padding: .3rem;
-
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
-
-		}
-	}
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
 }
 </style>

src/pages/login.vue

@@ -1,139 +1,149 @@
 <template>
-	<div class="content">
-		<img class="loginimg" src="../assets/images/login.png" alt="">
-		<div class="login">
-			<div class="item">
-				<van-cell-group>
-					<van-field v-model="name" placeholder="请输入登录名" />
-				</van-cell-group>
-			</div>
-			<div class="item">
-				<van-cell-group>
-					<van-field v-model="password" type="password" placeholder="请输入密码" />
-				</van-cell-group>
-			</div>
-			<!-- <div class="item">
+  <div class="content">
+    <img class="loginimg" src="../assets/images/login.png" alt="" />
+    <div class="login">
+      <div class="item">
+        <van-cell-group>
+          <van-field v-model="name" placeholder="请输入登录名" />
+        </van-cell-group>
+      </div>
+      <div class="item">
+        <van-cell-group>
+          <van-field
+            v-model="password"
+            type="password"
+            placeholder="请输入密码"
+          />
+        </van-cell-group>
+      </div>
+      <!-- <div class="item">
 				<van-cell-group>
 			       <van-field v-model="yzm" type="number"  placeholder="请输入验证码" />
 			    </van-cell-group>
 			</div> -->
-			<div class="btn">
-				<van-button type="primary" color="#00c4b8" @click="login">登录</van-button>
-			</div>
-			<div class="register">
-				<!-- <router-link to="">新用户注册</router-link>
+      <div class="btn">
+        <van-button type="primary" color="#0c2469" @click="login"
+          >登录</van-button
+        >
+      </div>
+      <div class="register">
+        <!-- <router-link to="">新用户注册</router-link>
 				<router-link to="/Forgetpassword">忘记密码</router-link> -->
-			</div>
-			<div style="font-size: 10px;text-align: center;padding-top: 1.625rem;">
-				<a style="color: black" href="https://beian.miit.gov.cn">沪ICP备2021029008号-1</a>
-			</div>
-		</div>
-	</div>
+      </div>
+      <div style="font-size: 10px;text-align: center;padding-top: 1.625rem;">
+        <a style="color: black" href="https://beian.miit.gov.cn"
+          >沪ICP备2021029008号-1</a
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
-
 <script>
-import { employee_login } from '../api/index'
-import { Toast, Dialog } from 'vant'
+import { employee_login } from "../api/index";
+import { Toast, Dialog } from "vant";
 export default {
-	data() {
-		return {
-			name: "",
-			password: "",
-			yzm: ""
-		}
-	},
-	created: function () {
-		if (localStorage.getItem('name') != null) {
-			this.name = localStorage.getItem('name')
-		}
-		if (localStorage.getItem('password') != null) {
-			this.password = localStorage.getItem('password')
-		}
-	},
-	methods: {
-		//登录
-		async login() {
-			if (this.name == '' || this.name == undefined) {
-				Toast('请输入登录名');
-				return;
-			}
-			if (this.password == '' || this.password == undefined) {
-				Toast('请输入登录名');
-				return;
-			}
-			const regex = /[\u0000-\u0008\u000B-\u001F\u007F-\u009F\u200B-\u200F\u202A-\u202E\u2028\u2029\uFEFF]/g;
-			this.password =	this.password.replaceAll(regex,'')
-			this.name = this.name.replaceAll(regex,'')
-              
-			// this.$http.post(this.$store.state.host + "/appSysUser/employee_login", { account: this.name, password: this.password }, { emulateJSON: true })
-			const res = await employee_login({ account: this.name, password: this.password }, { emulateJSON: true })
-			console.log("=====", res)
-			//发送成功
-			if (res.result == 'success') {
-				//localStorage
-				localStorage.setItem("userId", res.userId);
-				localStorage.setItem("roomId", res.roomId);
-				localStorage.setItem("accountType", res.accountType);
-				localStorage.setItem("name", this.name);
-				localStorage.setItem("password", this.password);
-				this.$router.push({ path: '/' });
-			} else {
-				Toast(res.message);
-			}
-		}
-	}
-}
+  data() {
+    return {
+      name: "",
+      password: "",
+      yzm: ""
+    };
+  },
+  created: function() {
+    if (localStorage.getItem("name") != null) {
+      this.name = localStorage.getItem("name");
+    }
+    if (localStorage.getItem("password") != null) {
+      this.password = localStorage.getItem("password");
+    }
+  },
+  methods: {
+    //登录
+    async login() {
+      if (this.name == "" || this.name == undefined) {
+        Toast("请输入登录名");
+        return;
+      }
+      if (this.password == "" || this.password == undefined) {
+        Toast("请输入登录名");
+        return;
+      }
+      const regex = /[\u0000-\u0008\u000B-\u001F\u007F-\u009F\u200B-\u200F\u202A-\u202E\u2028\u2029\uFEFF]/g;
+      this.password = this.password.replaceAll(regex, "");
+      this.name = this.name.replaceAll(regex, "");
+
+      // this.$http.post(this.$store.state.host + "/appSysUser/employee_login", { account: this.name, password: this.password }, { emulateJSON: true })
+      const res = await employee_login(
+        { account: this.name, password: this.password },
+        { emulateJSON: true }
+      );
+      console.log("=====", res);
+      //发送成功
+      if (res.result == "success") {
+        //localStorage
+        localStorage.setItem("userId", res.userId);
+        localStorage.setItem("roomId", res.roomId);
+        localStorage.setItem("accountType", res.accountType);
+        localStorage.setItem("name", this.name);
+        localStorage.setItem("password", this.password);
+        this.$router.push({ path: "/" });
+      } else {
+        Toast(res.message);
+      }
+    }
+  }
+};
 </script>
 <style scoped lang="less">
 .content {
-	height: 100vh;
+  height: 100vh;
 
-	.loginimg {
-		width: 3.48rem;
-		margin: 0 auto;
-		display: block;
-		padding: 2.15rem .8rem;
-	}
+  .loginimg {
+    width: 3.48rem;
+    margin: 0 auto;
+    display: block;
+    padding: 2.15rem 0.8rem;
+  }
 
-	.login {
-		width: 5.8rem;
-		margin: 0 auto;
+  .login {
+    width: 5.8rem;
+    margin: 0 auto;
 
-		.item {
-			border: .01rem solid #bfbfbf;
-			border-radius: .1rem;
-			margin-bottom: .5rem;
-			background: white;
-			overflow: hidden;
-			color: #999999;
-		}
+    .item {
+      border: 0.01rem solid #bfbfbf;
+      border-radius: 0.1rem;
+      margin-bottom: 0.5rem;
+      background: white;
+      overflow: hidden;
+      color: #999999;
+    }
 
-		.item:nth-of-type(3) {
-			margin-bottom: .2rem;
-		}
+    .item:nth-of-type(3) {
+      margin-bottom: 0.2rem;
+    }
 
-		.btn {
-			button {
-				width: 100%;
-			}
-		}
+    .btn {
+      button {
+        width: 100%;
+      }
+    }
 
-		.register {
-			font-size: .24rem;
-			display: flex;
-			justify-content: space-between;
-			//margin-top: .2rem;
-			margin-bottom: .2rem;
+    .register {
+      font-size: 0.24rem;
+      display: flex;
+      justify-content: space-between;
+      //margin-top: .2rem;
+      margin-bottom: 0.2rem;
 
-			a {
-				color: #999999;
-			}
+      a {
+        color: #999999;
+      }
 
-			a:nth-of-type(1) {
-				color: #02bfb3;
-			}
-		}
-	}
+      a:nth-of-type(1) {
+        color: #02bfb3;
+      }
+    }
+  }
 }
 </style>

src/pages/logisticslist.vue

@@ -1,169 +1,179 @@
 <template>
-	<div>
-		<div class="content">
-			<van-tabs v-model="index" @click="tab">
-				<van-tab title="外部件" :name="1">
-				</van-tab>
-				<van-tab title="内部件" :name="2">
-				</van-tab>
-			</van-tabs>
-
-			<!-- 订单列表 -->
-			<div class="batch_box" @scroll.passive="getScroll($event)"
-				style=" height: calc(100vh - 44px);overflow-y: auto;">
-				<van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
-					<div class="jjlist" v-for="item in mailList">
-						<div class="listinfo" @click="mailDetail(item)">
-							<div class="list_top">
-								<img src="../assets/images/ad_icon1.png" alt="">
-								<div>
-									<p>{{ item.type == 1 ? '快递单号' : '快件单号' }} ：{{ item.orderId }}</p>
-									<p>收件人：{{ item.name }} </p>
-									<p>手机号：{{ item.phone }} </p>
-									<p v-if="item.type == 1">地&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp址：{{ item.province
-										}} {{ item.city }} {{
-											item.county }}
-									</p>
-								</div>
-							</div>
-						</div>
-					</div>
-					<template v-if="!refreshLoading && mailList.length > 0">
-						<div class="bottom_text" v-if="loading">
-							加载中...
-						</div>
-						<div class="bottom_text" v-else-if="noData">
-							已经到底啦...
-						</div>
-					</template>
-					<template v-if="mailList.length === 0">
-						<div class="bottom_text">数据为空！</div>
-					</template>
-				</van-pull-refresh>
-			</div>
-		</div>
-	</div>
+  <div>
+    <div class="content">
+      <van-tabs v-model="index" @click="tab">
+        <van-tab title="外部件" :name="1"> </van-tab>
+        <van-tab title="内部件" :name="2"> </van-tab>
+      </van-tabs>
+
+      <!-- 订单列表 -->
+      <div
+        class="batch_box"
+        @scroll.passive="getScroll($event)"
+        style=" height: calc(100vh - 44px);overflow-y: auto;"
+      >
+        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
+          <div class="jjlist" v-for="item in mailList">
+            <div class="listinfo" @click="mailDetail(item)">
+              <div class="list_top">
+                <img src="../assets/images/ad_icon1.png" alt="" />
+                <div>
+                  <p>
+                    {{ item.type == 1 ? "快递单号" : "快件单号" }} ：{{
+                      item.orderId
+                    }}
+                  </p>
+                  <p>收件人：{{ item.name }}</p>
+                  <p>手机号：{{ item.phone }}</p>
+                  <p v-if="item.type == 1">
+                    地&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp址：{{
+                      item.province
+                    }}
+                    {{ item.city }} {{ item.county }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <template v-if="!refreshLoading && mailList.length > 0">
+            <div class="bottom_text" v-if="loading">
+              加载中...
+            </div>
+            <div class="bottom_text" v-else-if="noData">
+              已经到底啦...
+            </div>
+          </template>
+          <template v-if="mailList.length === 0">
+            <div class="bottom_text">数据为空！</div>
+          </template>
+        </van-pull-refresh>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
-import { getListByUser } from '../api/index'
+import { Toast, Dialog } from "vant";
+import { getListByUser } from "../api/index";
 export default {
-	data() {
-		return {
-			titlename: "我的寄件",
-			expressType: '外部件',
-			userId: '',
-			mailList: [],
-			index: 1,
-			time: 1,
-			value: "",
-			timevalue: "请选择日期范围",
-			showPicker: false,
-			showPickertype: "year-month",
-			minDate: new Date(2022, 0, 1),
-			maxDate: new Date(),
-			startTime: '',
-			endTime: '',
-			pageSize: {
-				page: 1,
-				limit: 10
-			},
-			refreshLoading: false, // 刷新loading
-			noData: false, // 没有更多数据
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem("userId");
-		this.getmailList();
-	},
-	methods: {
-		// 刷新	
-		async onRefresh() {
-			this.pageSize.page = 1;
-			this.pageSize.limit = 10;
-			this.refreshLoading = true;
-			await this.getmailList(true)
-			this.refreshLoading = false
-		},
-		// 滚动事件
-		getScroll(event) {
-			let scrollBottom =
-				event.target.scrollHeight -
-				event.target.scrollTop -
-				event.target.clientHeight;
-			// 距离底部20px以内 && 还有数据 && 没有正在加载中
-			if (scrollBottom <= 20 && !this.noData && !this.loading) {
-				this.pageSize.page += 1;
-				this.getmailList();
-			}
-		},
-		// 获取数据
-		async getmailList(isClear) {
-			this.loading = true
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			let parmas = {
-				expressNo: this.value,
-				startTime: this.startTime,
-				endTime: this.endTime,
-				type: this.index,
-
-			}
-			const res = await getListByUser({ ...this.pageSize, ...parmas })
-			let expressListA = res.data
-			Toast.clear()
-
-			if (isClear) {
-				this.mailList = expressListA
-			} else {
-				this.mailList.push(...expressListA)
-			}
-
-			this.loading = false
-			if (this.pageSize.page * this.pageSize.limit >= res.count) {
-				this.noData = true;
-			} else {
-				this.noData = false;
-			}
-		},
-
-		//寄件详情
-		mailDetail(item) {
-			this.$router.push({ path: '/MailInfo', query: { mailDetail: item } })
-		},
-
-		//寄件查询
-		tab(obj) {//外部件、内部件切换
-			this.index = obj
-			if (this.index == 1) {
-				this.expressType = '外部件'
-			}
-			if (this.index == 2) {
-				this.expressType = '内部件'
-			}
-			this.mailList = []
-			this.pageSize = {
-				page: 1,
-				limit: 10
-			}
-			this.getmailList();
-		},
-		changetime(obj) {//选择按月份、按天数
-			this.time = obj
-			this.timevalue = "请选择"
-			if (obj == 1) {//按月份时间选择器为年-月
-				this.showPickertype = "year-month"
-			}
-			if (obj == 2) {//按天时间选择器为年-月-日
-				this.showPickertype = "date"
-			}
-		},
-		/* onConfirm(value){//时间确定
+  data() {
+    return {
+      titlename: "我的寄件",
+      expressType: "外部件",
+      userId: "",
+      mailList: [],
+      index: 1,
+      time: 1,
+      value: "",
+      timevalue: "请选择日期范围",
+      showPicker: false,
+      showPickertype: "year-month",
+      minDate: new Date(2022, 0, 1),
+      maxDate: new Date(),
+      startTime: "",
+      endTime: "",
+      pageSize: {
+        page: 1,
+        limit: 10
+      },
+      refreshLoading: false, // 刷新loading
+      noData: false // 没有更多数据
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    this.getmailList();
+  },
+  methods: {
+    // 刷新
+    async onRefresh() {
+      this.pageSize.page = 1;
+      this.pageSize.limit = 10;
+      this.refreshLoading = true;
+      await this.getmailList(true);
+      this.refreshLoading = false;
+    },
+    // 滚动事件
+    getScroll(event) {
+      let scrollBottom =
+        event.target.scrollHeight -
+        event.target.scrollTop -
+        event.target.clientHeight;
+      // 距离底部20px以内 && 还有数据 && 没有正在加载中
+      if (scrollBottom <= 20 && !this.noData && !this.loading) {
+        this.pageSize.page += 1;
+        this.getmailList();
+      }
+    },
+    // 获取数据
+    async getmailList(isClear) {
+      this.loading = true;
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      let parmas = {
+        expressNo: this.value,
+        startTime: this.startTime,
+        endTime: this.endTime,
+        type: this.index
+      };
+      const res = await getListByUser({ ...this.pageSize, ...parmas });
+      let expressListA = res.data;
+      Toast.clear();
+
+      if (isClear) {
+        this.mailList = expressListA;
+      } else {
+        this.mailList.push(...expressListA);
+      }
+
+      this.loading = false;
+      if (this.pageSize.page * this.pageSize.limit >= res.count) {
+        this.noData = true;
+      } else {
+        this.noData = false;
+      }
+    },
+
+    //寄件详情
+    mailDetail(item) {
+      this.$router.push({ path: "/MailInfo", query: { mailDetail: item } });
+    },
+
+    //寄件查询
+    tab(obj) {
+      //外部件、内部件切换
+      this.index = obj;
+      if (this.index == 1) {
+        this.expressType = "外部件";
+      }
+      if (this.index == 2) {
+        this.expressType = "内部件";
+      }
+      this.mailList = [];
+      this.pageSize = {
+        page: 1,
+        limit: 10
+      };
+      this.getmailList();
+    },
+    changetime(obj) {
+      //选择按月份、按天数
+      this.time = obj;
+      this.timevalue = "请选择";
+      if (obj == 1) {
+        //按月份时间选择器为年-月
+        this.showPickertype = "year-month";
+      }
+      if (obj == 2) {
+        //按天时间选择器为年-月-日
+        this.showPickertype = "date";
+      }
+    },
+    /* onConfirm(value){//时间确定
 			let year,month,day
 			let date=new Date(value)
 			year=date.getFullYear()
@@ -178,305 +188,306 @@ export default {
 			}
 			this.showPicker=false
 		}, */
-		onConfirm(values) {//时间确定
-			const [start, end] = values;
-			this.showPicker = false;
-			this.startTime = this.formatDate(start);
-			this.endTime = this.formatDate(end);
-			this.timevalue = this.startTime + '~' + this.endTime;
-			this.getmailList();
-		},
-		formatDate(date) {
-			let year, month, day
-			year = date.getFullYear()
-			month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
-			day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
-			return (year + '-' + month + '-' + day)
-		}
-
-	},
-	computed: {
-
-	}
-}
+    onConfirm(values) {
+      //时间确定
+      const [start, end] = values;
+      this.showPicker = false;
+      this.startTime = this.formatDate(start);
+      this.endTime = this.formatDate(end);
+      this.timevalue = this.startTime + "~" + this.endTime;
+      this.getmailList();
+    },
+    formatDate(date) {
+      let year, month, day;
+      year = date.getFullYear();
+      month =
+        date.getMonth() + 1 > 9
+          ? date.getMonth() + 1
+          : "0" + (date.getMonth() + 1);
+      day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
+      return year + "-" + month + "-" + day;
+    }
+  },
+  computed: {}
+};
 </script>
 
 <style lang="less" scoped="">
+/deep/.van-tabs__line {
+  background-color: #0c2469;
+}
 .content {
-	font-size: .3rem;
-	width: 100vw;
-	//padding: .33rem;
-	// padding: .33rem .33rem 1.2rem;
-
-	/deep/.van-search {
-		padding: 0px;
-		margin-bottom: .3rem;
-
-		.van-search__content {
-			background: white;
-		}
-	}
-
-	.tab {
-		height: 40px;
-		font-size: .36rem;
-		color: #00c4b8;
-		// padding-bottom: .3rem;
-		background: white;
-
-		div {
-			display: flex;
-			// border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-
-			p {
-				flex: 1;
-				padding: .15rem 0rem;
-			}
-
-			p.active {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-	}
-
-	.jjlist {
-		font-size: .3rem;
-		color: #999999;
-
-		.listinfo {
-			background: white;
-			padding: .33rem .33rem .2rem;
-			border-radius: .05rem;
-			margin-bottom: .2rem;
-			position: relative;
-
-			.list_top {
-				display: flex;
-				justify-content: flex-start;
-				align-items: center;
-
-
-				img {
-					margin: 0 0.2rem;
-					width: .9rem;
-					height: .9rem;
-				}
-
-				div {
-					margin-left: .2rem;
-					display: inline-block;
-					line-height: 150%;
-
-					p:nth-of-type(1) {
-						font-weight: bold;
-						color: #333;
-					}
-
-					p:nth-of-type(2) {
-						color: #333;
-					}
-
-					p:nth-of-type(3) {
-						color: #333;
-					}
-
-					p:nth-of-type(4) {
-						font-size: .22rem;
-						color: #333;
-
-						span {
-							width: .37rem;
-							height: .37rem;
-							color: white;
-							border-radius: 50%;
-							background: #cc9a09;
-							display: inline-block;
-							text-align: center;
-							line-height: .37rem;
-							margin-right: .1rem;
-						}
-					}
-
-
-				}
-
-				// }
-
-				>p {
-					font-size: .24rem;
-					color: #f5693d;
-					font-weight: bold;
-				}
-			}
-
-			.list_bot {
-				text-align: right;
-				border-top: .01rem solid #ededed;
-				padding-top: .2rem;
-
-				p {
-					display: inline-block;
-					font-size: .24rem;
-					padding: .16rem .4rem;
-					border-radius: .05rem;
-				}
-
-				p:nth-of-type(1) {
-					border: .01rem solid #263fbf;
-					color: #263fbf;
-				}
-
-				p:nth-of-type(2) {
-					border: .01rem solid #408cc7;
-					color: #408cc7;
-				}
-
-				p:nth-of-type(3) {
-					border: .01rem solid #d5a43c;
-					color: #d5a43c;
-				}
-
-				p:nth-of-type(4) {
-					border: .01rem solid #e24444;
-					color: #e24444;
-				}
-			}
-
-			.fast {
-				background: url(../assets/images/status.png) no-repeat center;
-				background-size: 100% 100%;
-				color: white;
-				position: absolute;
-				bottom: 0px;
-				right: 0px;
-				width: 1rem;
-				height: .4rem;
-				text-align: center;
-				line-height: .4rem;
-				font-size: .2rem;
-			}
-		}
-	}
-
-	.change {
-		color: #00c4b8;
-		margin-bottom: .3rem;
-		padding: 0rem .3rem;
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		background: white;
-		padding-bottom: .3rem;
-
-		.datapicker {
-			color: #9f9d9d;
-			font-size: .3rem;
-
-			p:after {
-				content: "";
-				display: inline-block;
-				margin-left: .1rem;
-				width: .15rem;
-				height: .15rem;
-				border-right: .05rem solid #9f9d9d;
-				border-bottom: .05rem solid #9f9d9d;
-				transform: rotate(45deg);
-				position: relative;
-				top: -.05rem;
-			}
-		}
-
-		.time {
-			width: 2rem;
-			display: flex;
-			border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-			font-size: .26rem;
-
-			p {
-				flex: 1;
-				padding: .1rem 0rem;
-			}
-
-			p.timeactive {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-	}
-
-	.logistics {
-		background: white;
-		border-radius: .1rem;
-		padding: .15rem;
-		margin-bottom: .3rem;
-
-		.logistics_top {
-			display: flex;
-			align-items: center;
-
-			img {
-				width: 12px;
-				height: 14px;
-				margin-left: .1rem;
-			}
-		}
-
-		.logistics_center {
-			padding: .3rem .6rem;
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			font-size: .26rem;
-			color: #9f9d9d;
-
-			div:nth-of-type(1) {
-				text-align: center;
-
-				p:nth-of-type(1) {
-					font-size: .36rem;
-					font-weight: bold;
-					color: #333;
-					margin-bottom: .2rem;
-				}
-			}
-
-			div:nth-of-type(2) {
-				text-align: center;
-				color: #333;
-				font-weight: bold;
-			}
-
-			div:nth-of-type(3) {
-				text-align: center;
-
-				p:nth-of-type(1) {
-					font-size: .36rem;
-					font-weight: bold;
-					color: #333;
-					margin-bottom: .2rem;
-				}
-			}
-		}
-
-		.logistics_bottom {
-			color: #9f9d9d;
-			font-size: .26rem;
-
-			p {
-				padding-top: .1rem;
-			}
-		}
-	}
+  font-size: 0.3rem;
+  width: 100vw;
+  //padding: .33rem;
+  // padding: .33rem .33rem 1.2rem;
+
+  /deep/.van-search {
+    padding: 0px;
+    margin-bottom: 0.3rem;
+
+    .van-search__content {
+      background: white;
+    }
+  }
+
+  .tab {
+    height: 40px;
+    font-size: 0.36rem;
+    color: #0c2469;
+    // padding-bottom: .3rem;
+    background: white;
+
+    div {
+      display: flex;
+      // border: .01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
+
+      p {
+        flex: 1;
+        padding: 0.15rem 0rem;
+      }
+
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
+
+  .jjlist {
+    font-size: 0.3rem;
+    color: #999999;
+
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+      position: relative;
+
+      .list_top {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        img {
+          margin: 0 0.2rem;
+          width: 0.9rem;
+          height: 0.9rem;
+        }
+
+        div {
+          margin-left: 0.2rem;
+          display: inline-block;
+          line-height: 150%;
+
+          p:nth-of-type(1) {
+            font-weight: bold;
+            color: #333;
+          }
+
+          p:nth-of-type(2) {
+            color: #333;
+          }
+
+          p:nth-of-type(3) {
+            color: #333;
+          }
+
+          p:nth-of-type(4) {
+            font-size: 0.22rem;
+            color: #333;
+
+            span {
+              width: 0.37rem;
+              height: 0.37rem;
+              color: white;
+              border-radius: 50%;
+              background: #cc9a09;
+              display: inline-block;
+              text-align: center;
+              line-height: 0.37rem;
+              margin-right: 0.1rem;
+            }
+          }
+        }
+
+        // }
+
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
+        }
+      }
+
+      .list_bot {
+        text-align: right;
+        border-top: 0.01rem solid #ededed;
+        padding-top: 0.2rem;
+
+        p {
+          display: inline-block;
+          font-size: 0.24rem;
+          padding: 0.16rem 0.4rem;
+          border-radius: 0.05rem;
+        }
+
+        p:nth-of-type(1) {
+          border: 0.01rem solid #263fbf;
+          color: #263fbf;
+        }
+
+        p:nth-of-type(2) {
+          border: 0.01rem solid #408cc7;
+          color: #408cc7;
+        }
+
+        p:nth-of-type(3) {
+          border: 0.01rem solid #d5a43c;
+          color: #d5a43c;
+        }
+
+        p:nth-of-type(4) {
+          border: 0.01rem solid #e24444;
+          color: #e24444;
+        }
+      }
+
+      .fast {
+        background: url(../assets/images/status.png) no-repeat center;
+        background-size: 100% 100%;
+        color: white;
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        width: 1rem;
+        height: 0.4rem;
+        text-align: center;
+        line-height: 0.4rem;
+        font-size: 0.2rem;
+      }
+    }
+  }
+
+  .change {
+    color: #0c2469;
+    margin-bottom: 0.3rem;
+    padding: 0rem 0.3rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: white;
+    padding-bottom: 0.3rem;
+
+    .datapicker {
+      color: #9f9d9d;
+      font-size: 0.3rem;
+
+      p:after {
+        content: "";
+        display: inline-block;
+        margin-left: 0.1rem;
+        width: 0.15rem;
+        height: 0.15rem;
+        border-right: 0.05rem solid #9f9d9d;
+        border-bottom: 0.05rem solid #9f9d9d;
+        transform: rotate(45deg);
+        position: relative;
+        top: -0.05rem;
+      }
+    }
+
+    .time {
+      width: 2rem;
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
+      font-size: 0.26rem;
+
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
+
+      p.timeactive {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
+
+  .logistics {
+    background: white;
+    border-radius: 0.1rem;
+    padding: 0.15rem;
+    margin-bottom: 0.3rem;
+
+    .logistics_top {
+      display: flex;
+      align-items: center;
+
+      img {
+        width: 12px;
+        height: 14px;
+        margin-left: 0.1rem;
+      }
+    }
+
+    .logistics_center {
+      padding: 0.3rem 0.6rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 0.26rem;
+      color: #9f9d9d;
+
+      div:nth-of-type(1) {
+        text-align: center;
+
+        p:nth-of-type(1) {
+          font-size: 0.36rem;
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 0.2rem;
+        }
+      }
+
+      div:nth-of-type(2) {
+        text-align: center;
+        color: #333;
+        font-weight: bold;
+      }
+
+      div:nth-of-type(3) {
+        text-align: center;
+
+        p:nth-of-type(1) {
+          font-size: 0.36rem;
+          font-weight: bold;
+          color: #333;
+          margin-bottom: 0.2rem;
+        }
+      }
+    }
+
+    .logistics_bottom {
+      color: #9f9d9d;
+      font-size: 0.26rem;
+
+      p {
+        padding-top: 0.1rem;
+      }
+    }
+  }
 }
 
 .bottom_text {
-	color: #969799;
-	text-align: center;
-	padding-top: 10px;
+  color: #969799;
+  text-align: center;
+  padding-top: 10px;
 }
 </style>

src/pages/mailInfo.vue

@@ -1,220 +1,242 @@
 <template>
-	<div>
-		<div class="content">
-			<div class="jjlist">
-				<div class="listinfo">
-					<div class="list_top">
-						<div class="list_top_left">
-							<img src="../assets/images/ad_icon1.png" alt="">
-
-							<div v-if="mailDetail.type == 1">
-								<p>快递单号：{{ ObjectVlaue.withoutOrder }}</p>
-								<p>收件人：{{ ObjectVlaue.addresseeName }} </p>
-								<p>手机号：{{ ObjectVlaue.addresseePhone }} </p>
-
-								<p>地&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp址：{{ ObjectVlaue.addresseeProvince }} {{
-									ObjectVlaue.addresseeCity
-								}} {{ ObjectVlaue.addresseeCounty }}</p>
-							</div>
-							<div v-if="mailDetail.type == 2">
-								<p>快递单号：{{ ObjectVlaue.inside_num }}</p>
-								<p>收件人：{{ ObjectVlaue.addressee_name }}</p>
-								<p>手机号：{{ ObjectVlaue.addressee_phone }}</p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 外部 -->
-			<div class="info" v-if="mailDetail.type == 1">
-				<img style="margin: 0 auto;display: block;" id="barcode" />
-				<p>寄件人姓名：{{ ObjectVlaue.sendName }}</p>
-				<p>寄件人手机号：{{ ObjectVlaue.sendPhone }}</p>
-				<p>收件人姓名：{{ ObjectVlaue.addresseeName }}</p>
-				<p>收件人手机：{{ ObjectVlaue.addresseePhone }}</p>
-				<!-- <p>部门：{{ ObjectVlaue.sendDeptName }}</p> -->
-				<p>快件类型：{{ ObjectVlaue.expressType === 1 ? '文件' : '物品' }}</p>
-				<p>数量(件数)：{{ ObjectVlaue.expressNum }}</p>
-				<p>重量(KG)：{{ ObjectVlaue.expressWeight }}</p>
-				<p>省：{{ ObjectVlaue.addresseeProvince }}</p>
-				<p>市：{{ ObjectVlaue.addresseeCity }}</p>
-				<p>区：{{ ObjectVlaue.addresseeCounty }}</p>
-				<p>财务核销码：{{ ObjectVlaue.verificationCode == '' ? '无' : ObjectVlaue.verificationCode }}</p>
-				<p>备注：{{ ObjectVlaue.expressRemark == '' ? "无" : ObjectVlaue.expressRemark }}</p>
-			</div>
-			<div class="info" v-if="mailDetail.type == '2'">
-				<img style="margin: 0 auto;display: block;" id="barcode" />
-				<p>部门：{{ ObjectVlaue.addressee_dept_name }}</p>
-				<p>收件人：{{ ObjectVlaue.addressee_name }}</p>
-				<p>收件人手机：{{ ObjectVlaue.addressee_phone }}</p>
-				<p>数量(件数)：{{ ObjectVlaue.express_num }}</p>
-				<p>重量(KG)：{{ ObjectVlaue.express_weight }}</p>
-				<!-- <p>创建时间:{{ ObjectVlaue.create_time }}</p> -->
-				<p>快件类型：{{ ObjectVlaue.express_type === 1 ? '文件' : '物品' }}</p>
-				<p>座位：{{ ObjectVlaue.addressee_seat_no }}</p>
-				<p>备注：{{ ObjectVlaue.express_remark == '' ? "无" : ObjectVlaue.express_remark }}</p>
-			</div>
-		</div>
-	</div>
+  <div>
+    <div class="content">
+      <div class="jjlist">
+        <div class="listinfo">
+          <div class="list_top">
+            <div class="list_top_left">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+
+              <div v-if="mailDetail.type == 1">
+                <p>快递单号：{{ ObjectVlaue.withoutOrder }}</p>
+                <p>收件人：{{ ObjectVlaue.addresseeName }}</p>
+                <p>手机号：{{ ObjectVlaue.addresseePhone }}</p>
+
+                <p>
+                  地&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp址：{{
+                    ObjectVlaue.addresseeProvince
+                  }}
+                  {{ ObjectVlaue.addresseeCity }}
+                  {{ ObjectVlaue.addresseeCounty }}
+                </p>
+              </div>
+              <div v-if="mailDetail.type == 2">
+                <p>快递单号：{{ ObjectVlaue.inside_num }}</p>
+                <p>收件人：{{ ObjectVlaue.addressee_name }}</p>
+                <p>手机号：{{ ObjectVlaue.addressee_phone }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 外部 -->
+      <div class="info" v-if="mailDetail.type == 1">
+        <img style="margin: 0 auto;display: block;" id="barcode" />
+        <p>寄件人姓名：{{ ObjectVlaue.sendName }}</p>
+        <p>寄件人手机号：{{ ObjectVlaue.sendPhone }}</p>
+        <p>收件人姓名：{{ ObjectVlaue.addresseeName }}</p>
+        <p>收件人手机：{{ ObjectVlaue.addresseePhone }}</p>
+        <!-- <p>部门：{{ ObjectVlaue.sendDeptName }}</p> -->
+        <p>快件类型：{{ ObjectVlaue.expressType === 1 ? "文件" : "物品" }}</p>
+        <p>数量(件数)：{{ ObjectVlaue.expressNum }}</p>
+        <p>重量(KG)：{{ ObjectVlaue.expressWeight }}</p>
+        <p>省：{{ ObjectVlaue.addresseeProvince }}</p>
+        <p>市：{{ ObjectVlaue.addresseeCity }}</p>
+        <p>区：{{ ObjectVlaue.addresseeCounty }}</p>
+        <p>
+          财务核销码：{{
+            ObjectVlaue.verificationCode == ""
+              ? "无"
+              : ObjectVlaue.verificationCode
+          }}
+        </p>
+        <p>
+          备注：{{
+            ObjectVlaue.expressRemark == "" ? "无" : ObjectVlaue.expressRemark
+          }}
+        </p>
+      </div>
+      <div class="info" v-if="mailDetail.type == '2'">
+        <img style="margin: 0 auto;display: block;" id="barcode" />
+        <p>部门：{{ ObjectVlaue.addressee_dept_name }}</p>
+        <p>收件人：{{ ObjectVlaue.addressee_name }}</p>
+        <p>收件人手机：{{ ObjectVlaue.addressee_phone }}</p>
+        <p>数量(件数)：{{ ObjectVlaue.express_num }}</p>
+        <p>重量(KG)：{{ ObjectVlaue.express_weight }}</p>
+        <!-- <p>创建时间:{{ ObjectVlaue.create_time }}</p> -->
+        <p>快件类型：{{ ObjectVlaue.express_type === 1 ? "文件" : "物品" }}</p>
+        <p>座位：{{ ObjectVlaue.addressee_seat_no }}</p>
+        <p>
+          备注：{{
+            ObjectVlaue.express_remark == "" ? "无" : ObjectVlaue.express_remark
+          }}
+        </p>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
-import { findWithoutInfoById, findInsideInfoById } from '../api/index'
+import { Toast, Dialog } from "vant";
+import { findWithoutInfoById, findInsideInfoById } from "../api/index";
 export default {
-	data() {
-		return {
-			titlename: "查快递",
-			item: {},
-			mailDetail: {},//传过来的数据
-			id: '',
-			ObjectVlaue: {}
-		}
-	},
-	created: function () {
-		this.mailDetail = this.$route.query.mailDetail
-		this.id = this.mailDetail.id
-	},
-	mounted() {
-
-		if (this.mailDetail.type === '1') {
-			// 外部
-			this.getFindWithoutInfoById()
-		} else if (this.mailDetail.type === '2') {
-			this.getFindInsideInfoById()
-		}
-	},
-	methods: {
-		async getFindWithoutInfoById() {
-			const res = await findWithoutInfoById({ id: this.id }, { emulateJSON: true, loading: true, message: '加载中...' })
-			this.ObjectVlaue = res.floorInfoById
-			console.log(res)
-		},
-		async getFindInsideInfoById() {
-			const res = await findInsideInfoById({ id: this.id }, { emulateJSON: true, loading: true, message: '加载中...' })
-			this.ObjectVlaue = res.floorInfoById
-			console.log(res)
-		}
-	}
-}
+  data() {
+    return {
+      titlename: "查快递",
+      item: {},
+      mailDetail: {}, //传过来的数据
+      id: "",
+      ObjectVlaue: {}
+    };
+  },
+  created: function() {
+    this.mailDetail = this.$route.query.mailDetail;
+    this.id = this.mailDetail.id;
+  },
+  mounted() {
+    if (this.mailDetail.type === "1") {
+      // 外部
+      this.getFindWithoutInfoById();
+    } else if (this.mailDetail.type === "2") {
+      this.getFindInsideInfoById();
+    }
+  },
+  methods: {
+    async getFindWithoutInfoById() {
+      const res = await findWithoutInfoById(
+        { id: this.id },
+        { emulateJSON: true, loading: true, message: "加载中..." }
+      );
+      this.ObjectVlaue = res.floorInfoById;
+      console.log(res);
+    },
+    async getFindInsideInfoById() {
+      const res = await findInsideInfoById(
+        { id: this.id },
+        { emulateJSON: true, loading: true, message: "加载中..." }
+      );
+      this.ObjectVlaue = res.floorInfoById;
+      console.log(res);
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	padding: .2rem .33rem;
-	font-size: .3rem;
-
-	>p {
-		font-size: .3rem;
-		text-align: center;
-		margin-bottom: .2rem;
-	}
-
-	.info {
-		padding: .4rem;
-		background: white;
-		line-height: 200%;
-		color: #666666;
-
-		.pjinfo {
-			margin-top: .1rem;
-			border-top: .01rem solid #f0efef;
-			padding-top: .1rem;
-		}
-	}
-
-	.jjlist {
-		font-size: .3rem;
-		color: #999999;
-
-		.listinfo {
-			background: white;
-			padding: .33rem .33rem .2rem;
-			border-radius: .05rem;
-			margin-bottom: .2rem;
-			position: relative;
-
-			.list_top {
-				display: flex;
-				justify-content: space-between;
-
-				.list_top_left {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
-
-					img {
-						display: inline-block;
-						width: .9rem;
-						height: .9rem;
-						position: relative;
-						top: -.1rem;
-					}
-
-					div {
-						margin-left: .2rem;
-						display: inline-block;
-						line-height: 150%;
-
-						p:nth-of-type(1) {
-							font-weight: bold;
-							color: #333;
-						}
-
-						p:nth-of-type(2) {
-							color: #333;
-						}
-
-						p:nth-of-type(3) {
-							color: #333;
-						}
-
-						p:nth-of-type(4) {
-							font-size: .22rem;
-							color: #333;
-						}
-					}
-				}
-
-				>p {
-					font-size: .24rem;
-					color: #f5693d;
-					font-weight: bold;
-				}
-			}
-
-			.fast {
-				//background: url(../assets/images/status.png) no-repeat center;
-				background-color: #00c4b8;
-				background-size: 100% 100%;
-				color: white;
-				position: absolute;
-				bottom: 0px;
-				right: 0px;
-				width: 1.1rem;
-				height: .5rem;
-				text-align: center;
-				line-height: .5rem;
-				font-size: .2rem;
-			}
-
-		}
-	}
+  padding: 0.2rem 0.33rem;
+  font-size: 0.3rem;
+
+  > p {
+    font-size: 0.3rem;
+    text-align: center;
+    margin-bottom: 0.2rem;
+  }
+
+  .info {
+    padding: 0.4rem;
+    background: white;
+    line-height: 200%;
+    color: #666666;
+
+    .pjinfo {
+      margin-top: 0.1rem;
+      border-top: 0.01rem solid #f0efef;
+      padding-top: 0.1rem;
+    }
+  }
+
+  .jjlist {
+    font-size: 0.3rem;
+    color: #999999;
+
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+      position: relative;
+
+      .list_top {
+        display: flex;
+        justify-content: space-between;
+
+        .list_top_left {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          img {
+            display: inline-block;
+            width: 0.9rem;
+            height: 0.9rem;
+            position: relative;
+            top: -0.1rem;
+          }
+
+          div {
+            margin-left: 0.2rem;
+            display: inline-block;
+            line-height: 150%;
+
+            p:nth-of-type(1) {
+              font-weight: bold;
+              color: #333;
+            }
+
+            p:nth-of-type(2) {
+              color: #333;
+            }
+
+            p:nth-of-type(3) {
+              color: #333;
+            }
+
+            p:nth-of-type(4) {
+              font-size: 0.22rem;
+              color: #333;
+            }
+          }
+        }
+
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
+        }
+      }
+
+      .fast {
+        //background: url(../assets/images/status.png) no-repeat center;
+        background-color: #0c2469;
+        background-size: 100% 100%;
+        color: white;
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        width: 1.1rem;
+        height: 0.5rem;
+        text-align: center;
+        line-height: 0.5rem;
+        font-size: 0.2rem;
+      }
+    }
+  }
 }
 
 /deep/ .van-nav-bar__content {
-	.van-nav-bar__title {
-		font-size: 16px;
-	}
+  .van-nav-bar__title {
+    font-size: 16px;
+  }
 }
 
 /deep/.van-icon-arrow-left::before {
-	color: #333;
-	font-size: 16px;
+  color: #333;
+  font-size: 16px;
 }
 
 /deep/.van-nav-bar__text {
-	color: #333 !important;
-	font-size: 16px;
+  color: #333 !important;
+  font-size: 16px;
 }
 </style>

src/pages/multipleaddressbook.vue

@@ -1,334 +1,355 @@
 <template>
-	<div class="content">
+  <div class="content">
+    <!-- table切换 -->
+    <div class="tab">
+      <div>
+        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
+        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
+          收件人
+        </p>
+      </div>
+    </div>
+    <!-- 寄件人 -->
+    <div v-if="index == 1">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLink(item)">
+              <p>寄</p>
+              <div :id="'copytkl' + item.id">
+                <p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p @click="linkEdit(item.id)">
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p
+                :id="'fz' + item.id"
+                @click="copyLink(item.id)"
+                data-clipboard-action="copy"
+                :data-clipboard-target="'#copytkl' + item.id"
+              >
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button @click="link(1)" type="info" color="#0c2469"
+          >添加寄件人</van-button
+        >
+      </div>
+    </div>
 
-		<!-- table切换 -->
-		<div class="tab">
-			<div>
-				<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
-				<p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">收件人</p>
-			</div>
-		</div>
-		<!-- 寄件人 -->
-		<div v-if="index == 1">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLink(item)">
-							<p>寄</p>
-							<div :id="'copytkl' + item.id">
-								<p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p @click="linkEdit(item.id)">
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
-								:data-clipboard-target="'#copytkl' + item.id">
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
-			</div>
-		</div>
-
-		<!-- 收件人 -->
-		<div v-if="index == 2">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLinkSj(item)">
-							<p style="background: #fa9c22;">收</p>
-							<div :id="'copytkl' + item.id">
-								<p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p @click="linkEdit(item.id)">
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
-								:data-clipboard-target="'#copytkl' + item.id">
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
-			</div>
-		</div>
-	</div>
+    <!-- 收件人 -->
+    <div v-if="index == 2">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLinkSj(item)">
+              <p style="background: #fa9c22;">收</p>
+              <div :id="'copytkl' + item.id">
+                <p>{{ item.name }} {{ item.phone }} {{ item.telPhone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p @click="linkEdit(item.id)">
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p
+                :id="'fz' + item.id"
+                @click="copyLink(item.id)"
+                data-clipboard-action="copy"
+                :data-clipboard-target="'#copytkl' + item.id"
+              >
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button type="info" @click="link(2)" color="#fa9c22"
+          >添加收件人</van-button
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
+import { Toast, Dialog } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "地址簿",
-			index: 1,
-			userId: '',
-			addressList: []
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem("userId")
-		//获取参数
-		this.index = this.$route.query.active
-		this.getData();
-	},
-	methods: {
-		//复制
-		copyLink(id) {
-			let _this = this;
-			let clipboard = new this.clipboard("#fz" + id);
-			clipboard.on('success', function () {
-				//window.console.log('00')
-			});
-			clipboard.on('error', function () {
-				_this.$toast("复制失败")
-			});
-		},
-		tab(obj) {
-			this.index = obj
-			this.getData()
-		},
-		link(obj) {
-			this.$router.push({ path: "/Newaddress", query: { type: obj } })
-		},
-		getData() {
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			this.$http.post(this.$store.state.host + "/personal/getAddressList.do", { userId: this.userId, type: this.index }, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						this.addressList = res.body.addressList
-					}
-					Toast.clear()
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
-			Toast.clear()
-		},
-		del(id) {
-			Dialog.confirm({ title: '', message: '确定删除吗', })
-				.then(() => {
-					Toast.loading({
-						message: '删除中...',
-						forbidClick: true,
-						duration: 0
-					});
-					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
-						.then(res => {
-							//发送成功
-							if (res.body.msg == 'success') {
-								this.getData()
-							} else {
-								Toast("删除失败!")
-							}
-							Toast.clear()
-						}, res => {
-							//发送失败
-							Toast("网络错误!")
-						})
-					Toast.clear()
-				})
-				.catch(() => {
-					//  on cancel 
-				})
-		},
-		//跳去编辑页
-		linkEdit(id) {
-			this.$router.push({ path: "/Editaddress", query: { id: id } })
-		},
-		adressLink(item) {
-			let jjInfo = {}
-			jjInfo.jjname = item.name + ' ' + item.phone
-			jjInfo.jjadd = item.provinceAndCity + ' ' + item.address
-			jjInfo.sender = item.name
-			jjInfo.senderPhone = item.phone
-			jjInfo.senderMobile = item.telPhone
-			jjInfo.sendAddr = item.provinceAndCity
-			jjInfo.sendAddress = item.address
-			this.$store.commit("getJjInfo", jjInfo)
-			this.$router.push({ path: "/MultipleExpress" })
-		},
-		adressLinkSj(items) {
-			let sjInfo = {}
-			sjInfo.sjname = items.name + ' ' + items.phone
-			sjInfo.sjadd = items.provinceAndCity + ' ' + items.address
-			sjInfo.receiver = items.name
-			sjInfo.receiverPhone = items.phone
-			sjInfo.receiveMobile = items.telPhone
-			sjInfo.receiveAddr = items.provinceAndCity
-			sjInfo.receiveAddress = items.address
-			sjInfo.itemType = '物品'
-			sjInfo.weight = '1'
-			sjInfo.itemNum = '1'
-			sjInfo.wpinfo = '物品-1kg'
-
-
-			//判断数组中是否有一条数据的地址相同
-			let someResult = this.$store.state.sjList.some(function (item) {
-				return item.receiveAddress == sjInfo.receiveAddress;
-			});
-			if (someResult) {
-				Toast("您已添加过该收件人!")
-				return;
-			}
+  data() {
+    return {
+      titlename: "地址簿",
+      index: 1,
+      userId: "",
+      addressList: []
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    //获取参数
+    this.index = this.$route.query.active;
+    this.getData();
+  },
+  methods: {
+    //复制
+    copyLink(id) {
+      let _this = this;
+      let clipboard = new this.clipboard("#fz" + id);
+      clipboard.on("success", function() {
+        //window.console.log('00')
+      });
+      clipboard.on("error", function() {
+        _this.$toast("复制失败");
+      });
+    },
+    tab(obj) {
+      this.index = obj;
+      this.getData();
+    },
+    link(obj) {
+      this.$router.push({ path: "/Newaddress", query: { type: obj } });
+    },
+    getData() {
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/getAddressList.do",
+          { userId: this.userId, type: this.index },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              this.addressList = res.body.addressList;
+            }
+            Toast.clear();
+          },
+          res => {
+            //发送失败
+            Toast("网络错误!");
+          }
+        );
+      Toast.clear();
+    },
+    del(id) {
+      Dialog.confirm({ title: "", message: "确定删除吗" })
+        .then(() => {
+          Toast.loading({
+            message: "删除中...",
+            forbidClick: true,
+            duration: 0
+          });
+          this.$http
+            .post(
+              this.$store.state.host + "/personal/deleteAddressInfoById.do",
+              { id: id },
+              { emulateJSON: true }
+            )
+            .then(
+              res => {
+                //发送成功
+                if (res.body.msg == "success") {
+                  this.getData();
+                } else {
+                  Toast("删除失败!");
+                }
+                Toast.clear();
+              },
+              res => {
+                //发送失败
+                Toast("网络错误!");
+              }
+            );
+          Toast.clear();
+        })
+        .catch(() => {
+          //  on cancel
+        });
+    },
+    //跳去编辑页
+    linkEdit(id) {
+      this.$router.push({ path: "/Editaddress", query: { id: id } });
+    },
+    adressLink(item) {
+      let jjInfo = {};
+      jjInfo.jjname = item.name + " " + item.phone;
+      jjInfo.jjadd = item.provinceAndCity + " " + item.address;
+      jjInfo.sender = item.name;
+      jjInfo.senderPhone = item.phone;
+      jjInfo.senderMobile = item.telPhone;
+      jjInfo.sendAddr = item.provinceAndCity;
+      jjInfo.sendAddress = item.address;
+      this.$store.commit("getJjInfo", jjInfo);
+      this.$router.push({ path: "/MultipleExpress" });
+    },
+    adressLinkSj(items) {
+      let sjInfo = {};
+      sjInfo.sjname = items.name + " " + items.phone;
+      sjInfo.sjadd = items.provinceAndCity + " " + items.address;
+      sjInfo.receiver = items.name;
+      sjInfo.receiverPhone = items.phone;
+      sjInfo.receiveMobile = items.telPhone;
+      sjInfo.receiveAddr = items.provinceAndCity;
+      sjInfo.receiveAddress = items.address;
+      sjInfo.itemType = "物品";
+      sjInfo.weight = "1";
+      sjInfo.itemNum = "1";
+      sjInfo.wpinfo = "物品-1kg";
 
-			this.$store.state.sjList.push(sjInfo)
-			this.$router.push({ path: "/MultipleExpress" })
-		}
-	},
-	computed: {
+      //判断数组中是否有一条数据的地址相同
+      let someResult = this.$store.state.sjList.some(function(item) {
+        return item.receiveAddress == sjInfo.receiveAddress;
+      });
+      if (someResult) {
+        Toast("您已添加过该收件人!");
+        return;
+      }
 
-	}
-}
+      this.$store.state.sjList.push(sjInfo);
+      this.$router.push({ path: "/MultipleExpress" });
+    }
+  },
+  computed: {}
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	.tab {
-		font-size: .36rem;
-		color: #00c4b8;
-		padding: .33rem;
-
-		div {
-			display: flex;
-			border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-
-			p {
-				flex: 1;
-				padding: .1rem 0rem;
-			}
-
-			p.active {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-
-	}
-
-	.jjinfo {
-		font-size: .36rem;
-		color: #999999;
-		padding: .0rem .33rem 0.33rem;
-		word-break: break-word;
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.33rem;
 
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
 
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-				flex-wrap: wrap;
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
 
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem .2rem;
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
 
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
+  .jjinfo {
+    font-size: 0.36rem;
+    color: #999999;
+    padding: 0rem 0.33rem 0.33rem;
+    word-break: break-word;
 
-					div {
-						//font-weight: bold;
-						max-width: 5.2rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
 
-						p:nth-of-type(1) {
-							font-size: .3rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        flex-wrap: wrap;
 
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem 0.2rem;
 
-				.cz {
-					border-top: .01rem solid #ededed;
-					width: 100%;
-					display: flex;
-					flex-direction: row-reverse;
-					font-size: .24rem;
-					color: #999999;
-					padding-top: .2rem;
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
 
-					p {
-						margin-left: .2rem;
+          div {
+            //font-weight: bold;
+            max-width: 5.2rem;
 
-						img {
-							width: .22rem;
-							height: .24rem;
-						}
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
 
-						span {
-							position: relative;
-							top: -.01rem;
-						}
-					}
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
 
-				}
-			}
-		}
+        .cz {
+          border-top: 0.01rem solid #ededed;
+          width: 100%;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 0.24rem;
+          color: #999999;
+          padding-top: 0.2rem;
 
-	}
+          p {
+            margin-left: 0.2rem;
 
+            img {
+              width: 0.22rem;
+              height: 0.24rem;
+            }
 
+            span {
+              position: relative;
+              top: -0.01rem;
+            }
+          }
+        }
+      }
+    }
+  }
 
-	.btn-jj {
-		padding: .33rem;
+  .btn-jj {
+    padding: 0.33rem;
 
-		button {
-			width: 100%;
-		}
-	}
+    button {
+      width: 100%;
+    }
+  }
 }
 </style>

src/pages/myaddressbook.vue

@@ -1,302 +1,293 @@
 <template>
-	<div class="content">
-		<!-- 收件人 -->
-		<div class="list">
-			<div class="jjinfo" v-for="item in addressList" :key="item.id">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="transmitMessage(item)">
-							<p style="background: #00c4b8;">收</p>
-							<div :id="'copytkl' + item.id">
-								<p>{{ item.addresseeName }} {{ item.addresseePhone }}</p>
-								<p>{{ item.addresseeProvince }}{{
-									item.addresseeCity }}{{ item.addresseeCounty }}{{
-										item.addresseeAddrInfo }} </p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p @click="linkEdit(item.id)">
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p :id="'fz' + item.id" @click="copyLink(item.id)" data-clipboard-action="copy"
-								:data-clipboard-target="'#copytkl' + item.id">
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- 寄件 -->
-		<div class="btn">
-			<van-button type="info" @click=" link(2)">添加收件人</van-button>
-		</div>
-
-	</div>
+  <div class="content">
+    <!-- 收件人 -->
+    <div class="list">
+      <div class="jjinfo" v-for="item in addressList" :key="item.id">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="transmitMessage(item)">
+              <p style="background: #0c2469;">收</p>
+              <div :id="'copytkl' + item.id">
+                <p>{{ item.addresseeName }} {{ item.addresseePhone }}</p>
+                <p>
+                  {{ item.addresseeProvince }}{{ item.addresseeCity
+                  }}{{ item.addresseeCounty }}{{ item.addresseeAddrInfo }}
+                </p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p @click="linkEdit(item.id)">
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p
+                :id="'fz' + item.id"
+                @click="copyLink(item.id)"
+                data-clipboard-action="copy"
+                :data-clipboard-target="'#copytkl' + item.id"
+              >
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 寄件 -->
+    <div class="btn">
+      <van-button type="info" @click="link(2)">添加收件人</van-button>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
-import { deleteUserAddressById, getUserAddressList } from '../api/addressBoook'
+import { Toast, Dialog } from "vant";
+import { deleteUserAddressById, getUserAddressList } from "../api/addressBoook";
 export default {
-	data() {
-		return {
-			titlename: "收件人地址簿",
-			index: 1,
-			userId: '',
-			addressList: [],
-			parmas: {
-				page: 1,
-				limit: 10
-			}
-		}
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem("userId")
-		//获取参数
-		this.index = this.$route.query.active
-		this.getData();
-	},
-	methods: {
-		//复制
-		copyLink(id) {
-			let _this = this;
-			let clipboard = new this.clipboard("#fz" + id);
-			clipboard.on('success', function () {
-				//window.console.log('00')
-				_this.$toast("复制成功")
-			});
-			clipboard.on('error', function () {
-				_this.$toast("复制失败")
-			});
-		},
-		tab(obj) {
-			this.index = obj
-			this.getData()
-		},
-		link(obj) {
-			this.$router.push({ path: "/Newaddress", query: { type: obj } })
-		},
-		// 获取数据
-		async getData() {
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			const res = await getUserAddressList({ ...this.parmas })
-			if (res.code == 0) {
-				this.addressList = res.data
-			} else {
-				Toast("网络错误!")
-			}
-			Toast.clear()
-			console.log(res, 'res')
-		},
-
-		// 删除
-		del(id) {
-			Dialog.confirm({ title: '', message: '确定删除吗', })
-				.then(async () => {
-					Toast.loading({
-						message: '删除中...',
-						forbidClick: true,
-						duration: 0
-					});
-					const res = await deleteUserAddressById({ id: id })
-					if (res.msg == 'success') {
-						this.getData()
-						Toast("删除成功!")
-					} else {
-						Toast("删除失败!")
-					}
-					Toast.clear()
-				})
-				.catch(() => {
-					//  on cancel 
-				})
-		},
-		//跳去编辑页
-		linkEdit(id) {
-			this.$router.push({ path: "/Editaddress", query: { id: id } })
-		},
-		transmitMessage(item) {
-			let transmitMessageVlaue = {}
-			transmitMessageVlaue.addresseeName = item.addresseeName
-			transmitMessageVlaue.addresseeAddress = item.addresseeAddress
-			transmitMessageVlaue.addresseePhone = item.addresseePhone
-			transmitMessageVlaue.createTime = item.createTime
-			transmitMessageVlaue.id = item.id
-			transmitMessageVlaue.userId = item.userId
-			transmitMessageVlaue.addresseeAddrInfo = item.addresseeAddrInfo
-			transmitMessageVlaue.addresseeCity = item.addresseeCity
-			transmitMessageVlaue.addresseeCounty = item.addresseeCounty
-			transmitMessageVlaue.addresseeProvince = item.addresseeProvince
-			transmitMessageVlaue.addresseeTown = item.addresseeTown
-			transmitMessageVlaue.sendNum = item.sendNum
-			transmitMessageVlaue.isAddressIdTransfer = true
-			this.$store.commit('getTransmitMessageVlaue', transmitMessageVlaue);
-			this.$router.push({ path: "/Express" })
-		},
-	},
-	computed: {
-
-	}
-}
+  data() {
+    return {
+      titlename: "收件人地址簿",
+      index: 1,
+      userId: "",
+      addressList: [],
+      parmas: {
+        page: 1,
+        limit: 10
+      }
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    //获取参数
+    this.index = this.$route.query.active;
+    this.getData();
+  },
+  methods: {
+    //复制
+    copyLink(id) {
+      let _this = this;
+      let clipboard = new this.clipboard("#fz" + id);
+      clipboard.on("success", function() {
+        //window.console.log('00')
+        _this.$toast("复制成功");
+      });
+      clipboard.on("error", function() {
+        _this.$toast("复制失败");
+      });
+    },
+    tab(obj) {
+      this.index = obj;
+      this.getData();
+    },
+    link(obj) {
+      this.$router.push({ path: "/Newaddress", query: { type: obj } });
+    },
+    // 获取数据
+    async getData() {
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      const res = await getUserAddressList({ ...this.parmas });
+      if (res.code == 0) {
+        this.addressList = res.data;
+      } else {
+        Toast("网络错误!");
+      }
+      Toast.clear();
+      console.log(res, "res");
+    },
+
+    // 删除
+    del(id) {
+      Dialog.confirm({ title: "", message: "确定删除吗" })
+        .then(async () => {
+          Toast.loading({
+            message: "删除中...",
+            forbidClick: true,
+            duration: 0
+          });
+          const res = await deleteUserAddressById({ id: id });
+          if (res.msg == "success") {
+            this.getData();
+            Toast("删除成功!");
+          } else {
+            Toast("删除失败!");
+          }
+          Toast.clear();
+        })
+        .catch(() => {
+          //  on cancel
+        });
+    },
+    //跳去编辑页
+    linkEdit(id) {
+      this.$router.push({ path: "/Editaddress", query: { id: id } });
+    },
+    transmitMessage(item) {
+      let transmitMessageVlaue = {};
+      transmitMessageVlaue.addresseeName = item.addresseeName;
+      transmitMessageVlaue.addresseeAddress = item.addresseeAddress;
+      transmitMessageVlaue.addresseePhone = item.addresseePhone;
+      transmitMessageVlaue.createTime = item.createTime;
+      transmitMessageVlaue.id = item.id;
+      transmitMessageVlaue.userId = item.userId;
+      transmitMessageVlaue.addresseeAddrInfo = item.addresseeAddrInfo;
+      transmitMessageVlaue.addresseeCity = item.addresseeCity;
+      transmitMessageVlaue.addresseeCounty = item.addresseeCounty;
+      transmitMessageVlaue.addresseeProvince = item.addresseeProvince;
+      transmitMessageVlaue.addresseeTown = item.addresseeTown;
+      transmitMessageVlaue.sendNum = item.sendNum;
+      transmitMessageVlaue.isAddressIdTransfer = true;
+      this.$store.commit("getTransmitMessageVlaue", transmitMessageVlaue);
+      this.$router.push({ path: "/Express" });
+    }
+  },
+  computed: {}
+};
 </script>
 
 <style scoped lang="less">
 .van-button--info {
-	background-color: #00c4b8;
-	color: #fff;
-	background-color: #00c4b8;
-	border: 1px solid #00c4b8;
+  background-color: #0c2469;
+  color: #fff;
+  background-color: #0c2469;
+  border: 1px solid #0c2469;
 }
 
-
 .content {
-	height: 100vh;
-	width: 100vw;
-	display: flex;
-	flex-direction: column;
-	overflow: hidden;
-
-	.list {
-		flex: auto;
-		overflow: hidden;
-		overflow-y: auto;
-		padding: 15px .33rem 0px;
-
-	}
-
-	.btn {
-		// height: 100vh;
-		width: 100vw;
-		display: flex;
-
-		// padding: .0rem .33rem 0.33rem;
-
-		button {
-			width: 100%;
-			margin: .33rem;
-		}
-
-	}
-
-	.tab {
-		font-size: .36rem;
-		color: #00c4b8;
-
-
-		div {
-			display: flex;
-			border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-
-			p {
-				flex: 1;
-				padding: .1rem 0rem;
-			}
-
-			p.active {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-
-	}
-
-	.jjinfo {
-		font-size: .36rem;
-		color: #999999;
-		padding: .0rem .0rem 0.33rem;
-		word-break: break-word;
-
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
-
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-				flex-wrap: wrap;
-
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem .2rem;
-
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
-
-					div {
-						//font-weight: bold;
-						max-width: 5.2rem;
-
-						p:nth-of-type(1) {
-							font-size: .3rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
-
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
-
-				.cz {
-					border-top: .01rem solid #ededed;
-					width: 100%;
-					display: flex;
-					flex-direction: row-reverse;
-					font-size: .24rem;
-					color: #999999;
-					padding-top: .2rem;
-
-					p {
-						margin-left: .2rem;
-
-						img {
-							width: .22rem;
-							height: .24rem;
-						}
-
-						span {
-							position: relative;
-							top: -.01rem;
-						}
-					}
-
-				}
-			}
-		}
-
-	}
-
-
-
-
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  .list {
+    flex: auto;
+    overflow: hidden;
+    overflow-y: auto;
+    padding: 15px 0.33rem 0px;
+  }
+
+  .btn {
+    // height: 100vh;
+    width: 100vw;
+    display: flex;
+
+    // padding: .0rem .33rem 0.33rem;
+
+    button {
+      width: 100%;
+      margin: 0.33rem;
+    }
+  }
+
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
+
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
+
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
+
+  .jjinfo {
+    font-size: 0.36rem;
+    color: #999999;
+    padding: 0rem 0rem 0.33rem;
+    word-break: break-word;
+
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
+
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        flex-wrap: wrap;
+
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem 0.2rem;
+
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
+
+          div {
+            //font-weight: bold;
+            max-width: 5.2rem;
+
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
+
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
+
+        .cz {
+          border-top: 0.01rem solid #ededed;
+          width: 100%;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 0.24rem;
+          color: #999999;
+          padding-top: 0.2rem;
+
+          p {
+            margin-left: 0.2rem;
+
+            img {
+              width: 0.22rem;
+              height: 0.24rem;
+            }
+
+            span {
+              position: relative;
+              top: -0.01rem;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>

src/pages/myexpress.vue

@@ -1,192 +1,192 @@
 <template>
-	<div>
-
-		<!-- table切换 -->
-		<div class="tab">
-			<div>
-				<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
-				<p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">收件人</p>
-			</div>
-		</div>
-		<!-- 内容 -->
-		<div class="content">
-			<div v-if="index == 1">
-				<div class="list">
-					<div class="list_top">
-						<p>派单号 213213213</p>
-						<p>2021-02-12 10:30</p>
-					</div>
-					<div class="list_bottom">
-						<div class="list_bottom_left">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-						<div class="list_bottom_mid">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<span></span>
-							<p>已签收</p>
-						</div>
-						<div class="list_bottom_right">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-					</div>
-				</div>
-				<div class="list">
-					<div class="list_top">
-						<p>派单号 213213213</p>
-						<p>2021-02-12 10:30</p>
-					</div>
-					<div class="list_bottom">
-						<div class="list_bottom_left">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-						<div class="list_bottom_mid">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<span></span>
-							<p>已签收</p>
-						</div>
-						<div class="list_bottom_right">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div v-if="index == 2">
-				<div class="list">
-					<div class="list_top">
-						<p>派单号 213213213</p>
-						<p>2021-02-12 10:30</p>
-					</div>
-					<div class="list_bottom">
-						<div class="list_bottom_left">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-						<div class="list_bottom_mid">
-							<img src="../assets/images/ad_icon1.png" alt="">
-							<span></span>
-							<p>已签收</p>
-						</div>
-						<div class="list_bottom_right">
-							<p>王守业</p>
-							<p>19898765765</p>
-						</div>
-					</div>
-				</div>
-			</div>
-
-		</div>
-	</div>
+  <div>
+    <!-- table切换 -->
+    <div class="tab">
+      <div>
+        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
+        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
+          收件人
+        </p>
+      </div>
+    </div>
+    <!-- 内容 -->
+    <div class="content">
+      <div v-if="index == 1">
+        <div class="list">
+          <div class="list_top">
+            <p>派单号 213213213</p>
+            <p>2021-02-12 10:30</p>
+          </div>
+          <div class="list_bottom">
+            <div class="list_bottom_left">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+            <div class="list_bottom_mid">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <span></span>
+              <p>已签收</p>
+            </div>
+            <div class="list_bottom_right">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+          </div>
+        </div>
+        <div class="list">
+          <div class="list_top">
+            <p>派单号 213213213</p>
+            <p>2021-02-12 10:30</p>
+          </div>
+          <div class="list_bottom">
+            <div class="list_bottom_left">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+            <div class="list_bottom_mid">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <span></span>
+              <p>已签收</p>
+            </div>
+            <div class="list_bottom_right">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="index == 2">
+        <div class="list">
+          <div class="list_top">
+            <p>派单号 213213213</p>
+            <p>2021-02-12 10:30</p>
+          </div>
+          <div class="list_bottom">
+            <div class="list_bottom_left">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+            <div class="list_bottom_mid">
+              <img src="../assets/images/ad_icon1.png" alt="" />
+              <span></span>
+              <p>已签收</p>
+            </div>
+            <div class="list_bottom_right">
+              <p>王守业</p>
+              <p>19898765765</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-	data() {
-		return {
-			titlename: "我的快件",
-			index: 1,
-		}
-	},
-	methods: {
-		tab(obj) {
-			this.index = obj
-		}
-	}
-}
+  data() {
+    return {
+      titlename: "我的快件",
+      index: 1
+    };
+  },
+  methods: {
+    tab(obj) {
+      this.index = obj;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .tab {
-	font-size: .36rem;
-	color: #8c8c8c;
-	background: white;
-
-	div {
-		display: flex;
-		text-align: center;
-		border-radius: .05rem;
-		justify-content: center;
-
-		p {
-			padding: .2rem .3rem;
-			margin: 0px .4rem;
-		}
-
-		p.active {
-			color: #00c4b8;
-			border-bottom: .02rem solid #00c4b8;
-		}
-	}
+  font-size: 0.36rem;
+  color: #8c8c8c;
+  background: white;
+
+  div {
+    display: flex;
+    text-align: center;
+    border-radius: 0.05rem;
+    justify-content: center;
+
+    p {
+      padding: 0.2rem 0.3rem;
+      margin: 0px 0.4rem;
+    }
+
+    p.active {
+      color: #0c2469;
+      border-bottom: 0.02rem solid #0c2469;
+    }
+  }
 }
 
 .content {
-	padding: .33rem;
-
-	.list {
-		background: white;
-		font-size: .3rem;
-		color: #333;
-		padding: .2rem .4rem;
-		margin-bottom: .2rem;
-
-		.list_top {
-			font-size: .24rem;
-			color: #999;
-			display: flex;
-			justify-content: space-between;
-			margin-bottom: .3rem;
-		}
-
-		.list_bottom {
-			display: flex;
-			justify-content: space-between;
-
-			.list_bottom_left {
-				text-align: center;
-				padding-top: .3rem;
-
-				p:nth-of-type(2) {
-					font-size: .24rem;
-					margin-top: .2rem;
-				}
-			}
-
-			.list_bottom_mid {
-				text-align: center;
-
-				img {
-					width: .6rem;
-					height: .6rem;
-				}
-
-				span {
-					display: block;
-					width: 2rem;
-					height: .05rem;
-					border-radius: 50%;
-					background: #00c4b8;
-					margin: .15rem 0rem;
-				}
-
-				p {
-					color: #f5693d;
-					font-size: .26rem;
-				}
-			}
-
-			.list_bottom_right {
-				padding-top: .3rem;
-				text-align: center;
-
-				p:nth-of-type(2) {
-					font-size: .24rem;
-					margin-top: .2rem;
-				}
-			}
-		}
-	}
+  padding: 0.33rem;
+
+  .list {
+    background: white;
+    font-size: 0.3rem;
+    color: #333;
+    padding: 0.2rem 0.4rem;
+    margin-bottom: 0.2rem;
+
+    .list_top {
+      font-size: 0.24rem;
+      color: #999;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 0.3rem;
+    }
+
+    .list_bottom {
+      display: flex;
+      justify-content: space-between;
+
+      .list_bottom_left {
+        text-align: center;
+        padding-top: 0.3rem;
+
+        p:nth-of-type(2) {
+          font-size: 0.24rem;
+          margin-top: 0.2rem;
+        }
+      }
+
+      .list_bottom_mid {
+        text-align: center;
+
+        img {
+          width: 0.6rem;
+          height: 0.6rem;
+        }
+
+        span {
+          display: block;
+          width: 2rem;
+          height: 0.05rem;
+          border-radius: 50%;
+          background: #0c2469;
+          margin: 0.15rem 0rem;
+        }
+
+        p {
+          color: #f5693d;
+          font-size: 0.26rem;
+        }
+      }
+
+      .list_bottom_right {
+        padding-top: 0.3rem;
+        text-align: center;
+
+        p:nth-of-type(2) {
+          font-size: 0.24rem;
+          margin-top: 0.2rem;
+        }
+      }
+    }
+  }
 }
 </style>

src/pages/newaddress.vue

@@ -1,215 +1,285 @@
 <template>
-	<div class="content">
-
-		<div class="form">
-			<van-cell-group inset>
-				<van-field style="height: auto;" v-model="message" rows="1" label="识别" type="textarea"
-					placeholder="请粘贴,点击识别(姓名、手机号、省、市、区、详细地址间请输入空格)" />
-			</van-cell-group>
-			<div style="background-color: white;width: 100%;height: .8rem;padding-top: .2rem;">
-				<!-- <van-uploader :after-read="afterRead" style="width: 18%;height: .6rem;float: left;">
-					<van-button color="#00c4b8" block type="info" size="small">图片识别</van-button>
+  <div class="content">
+    <div class="form">
+      <van-cell-group inset>
+        <van-field
+          style="height: auto;"
+          v-model="message"
+          rows="1"
+          label="识别"
+          type="textarea"
+          placeholder="请粘贴,点击识别(姓名、手机号、省、市、区、详细地址间请输入空格)"
+        />
+      </van-cell-group>
+      <div
+        style="background-color: white;width: 100%;height: .8rem;padding-top: .2rem;"
+      >
+        <!-- <van-uploader :after-read="afterRead" style="width: 18%;height: .6rem;float: left;">
+					<van-button color="#0c2469" block type="info" size="small">图片识别</van-button>
 				</van-uploader> -->
-				<van-button @click="shibie()" style="width: 15%;height: .6rem;float: right; margin-right: .2rem;"
-					color="#00c4b8" block type="info" size="small">识别</van-button>
-			</div>
-		</div>
-		<div class="form">
-			<van-form @submit="onSubmit">
-				<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false }]" />
-				<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"
-					:rules="[{ required: false }]" />
+        <van-button
+          @click="shibie()"
+          style="width: 15%;height: .6rem;float: right; margin-right: .2rem;"
+          color="#0c2469"
+          block
+          type="info"
+          size="small"
+          >识别</van-button
+        >
+      </div>
+    </div>
+    <div class="form">
+      <van-form @submit="onSubmit">
+        <van-field
+          v-model="name"
+          name="姓名"
+          label="姓名"
+          placeholder="请输入姓名"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          v-model="phone"
+          maxlength="11"
+          type="number"
+          name="手机"
+          label="手机"
+          placeholder="请输入手机"
+          :rules="[{ required: false }]"
+        />
 
-				<van-field readonly clickable name="picker" :value="province" label="省" placeholder="自动识别"
-					@click="showPickerA = true" />
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="province"
+          label="省"
+          placeholder="自动识别"
+          @click="showPickerA = true"
+        />
 
-				<van-field readonly clickable name="picker" :value="city" label="市" placeholder="自动识别"
-					@click="showPickerB = true" />
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="city"
+          label="市"
+          placeholder="自动识别"
+          @click="showPickerB = true"
+        />
 
-				<van-field readonly clickable name="picker" :value="district" label="区" placeholder="自动识别"
-					@click="showPickerC = true" />
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="district"
+          label="区"
+          placeholder="自动识别"
+          @click="showPickerC = true"
+        />
 
-				<van-field readonly clickable name="picker" :value="town" label="镇" placeholder="自动识别"
-					@click="showPickerC = true" />
-				<van-field v-model="address" maxlength="50" name="详细地址" label="详细地址" placeholder="请输入详细地址"
-					:rules="[{ required: false }]" />
-				<div style="margin-top: 16px;">
-					<van-button color="#00c4b8" block type="info" native-type="submit" :disabled="disabled">确定
-					</van-button>
-				</div>
-			</van-form>
-		</div>
-	</div>
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="town"
+          label="镇"
+          placeholder="自动识别"
+          @click="showPickerC = true"
+        />
+        <van-field
+          v-model="address"
+          maxlength="50"
+          name="详细地址"
+          label="详细地址"
+          placeholder="请输入详细地址"
+          :rules="[{ required: false }]"
+        />
+        <div style="margin-top: 16px;">
+          <van-button
+            color="#0c2469"
+            block
+            type="info"
+            native-type="submit"
+            :disabled="disabled"
+            >确定
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+  </div>
 </template>
 
 <script>
-import areaList from "@/script/areas.js"
-import { saveAddress, listByParent, spiltAddress } from '../api/addressBoook'
-import {
-	Toast
-} from 'vant'
+import areaList from "@/script/areas.js";
+import { saveAddress, listByParent, spiltAddress } from "../api/addressBoook";
+import { Toast } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "寄件人",
-			name: "",
-			phone: "",
-			telPhone: "",
-			city: "",
-			address: "",//地址详情
-			areashow: false,
-			type: '',
-			disabled: false,
-			userId: '',
-			message: '', //自动识别
-			province: '',// 省
-			city: '',// 市
-			district: '',// 区
-			town: '',//镇
-		}
-	},
-	setup() {
-		this.afterRead = (file) => {
-			// 此时可以自行将文件上传至服务器
-			console.log(file);
-		};
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem('userId');
-		this.type = this.$route.query.type
-		if (this.type == 1) {
-			this.titlename = "新建寄件人地址"
-		}
-		if (this.type == 2) {
-			this.titlename = "新建收件人地址"
-		}
-	},
-
-	methods: {
-		afterRead(file) {
-			this.$http.post(this.$store.state.host + "/solic/getAddressFromText", {
-				type: 3,
-				textStr: encodeURIComponent(file.content)
-			}, {
-				emulateJSON: true
-			})
-				.then(res => {
-					//发送成功
-					res.body.words_result.forEach((v, i) => {
-						this.message += v.words + " "
-					})
-				}, res => {
-					//发送失败
-					Toast('识别错误')
-				})
-		},
-		//识别
-		async shibie() {
-			if (this.message == '') {
-				Toast('请粘贴地址')
-				return
-			}
-			const res = await spiltAddress({ address: this.message })
-			if (res.prov) {
-				this.province = res.prov
-				this.city = res.city
-				this.district = res.district
-				this.town = res.town
-				this.address = res.addr_info
-				this.name = res.per
-				this.phone = res.tel
-			} else {
-				Toast('请求失败')
-			}
-			console.log(res, 'res')
-		},
+  data() {
+    return {
+      titlename: "寄件人",
+      name: "",
+      phone: "",
+      telPhone: "",
+      city: "",
+      address: "", //地址详情
+      areashow: false,
+      type: "",
+      disabled: false,
+      userId: "",
+      message: "", //自动识别
+      province: "", // 省
+      city: "", // 市
+      district: "", // 区
+      town: "" //镇
+    };
+  },
+  setup() {
+    this.afterRead = file => {
+      // 此时可以自行将文件上传至服务器
+      console.log(file);
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    this.type = this.$route.query.type;
+    if (this.type == 1) {
+      this.titlename = "新建寄件人地址";
+    }
+    if (this.type == 2) {
+      this.titlename = "新建收件人地址";
+    }
+  },
 
-		async onSubmit() {
-			if (this.name == '' || this.name == undefined) {
-				Toast('请输入姓名')
-				return
-			}
+  methods: {
+    afterRead(file) {
+      this.$http
+        .post(
+          this.$store.state.host + "/solic/getAddressFromText",
+          {
+            type: 3,
+            textStr: encodeURIComponent(file.content)
+          },
+          {
+            emulateJSON: true
+          }
+        )
+        .then(
+          res => {
+            //发送成功
+            res.body.words_result.forEach((v, i) => {
+              this.message += v.words + " ";
+            });
+          },
+          res => {
+            //发送失败
+            Toast("识别错误");
+          }
+        );
+    },
+    //识别
+    async shibie() {
+      if (this.message == "") {
+        Toast("请粘贴地址");
+        return;
+      }
+      const res = await spiltAddress({ address: this.message });
+      if (res.prov) {
+        this.province = res.prov;
+        this.city = res.city;
+        this.district = res.district;
+        this.town = res.town;
+        this.address = res.addr_info;
+        this.name = res.per;
+        this.phone = res.tel;
+      } else {
+        Toast("请求失败");
+      }
+      console.log(res, "res");
+    },
 
-			if (this.phone == '' || this.phone == undefined) {
-				Toast('请填写手机号或者座机号')
-				return
-			}
+    async onSubmit() {
+      if (this.name == "" || this.name == undefined) {
+        Toast("请输入姓名");
+        return;
+      }
 
-			if (this.phone != '' && this.phone != undefined) {
-				let regPhone = new RegExp(this.$store.state.regPhone)
-				if (!regPhone.test(this.phone)) {
-					Toast('手机号格式不正确')
-					return
-				}
-			}
+      if (this.phone == "" || this.phone == undefined) {
+        Toast("请填写手机号或者座机号");
+        return;
+      }
 
-			if (this.province == '' || this.province == undefined) {
-				Toast('请输入省')
-				return
-			}
-			if (this.city == '' || this.city == undefined) {
-				Toast('请输入市')
-				return
-			}
-			if (this.district == '' || this.district == undefined) {
-				Toast('请输入区')
-				return
-			}
-			if (this.city == '' || this.city == undefined) {
-				Toast('请输入镇')
-				return
-			}
-			if (this.address == '' || this.address == undefined) {
-				Toast('请输入详细地址')
-				return
-			}
+      if (this.phone != "" && this.phone != undefined) {
+        let regPhone = new RegExp(this.$store.state.regPhone);
+        if (!regPhone.test(this.phone)) {
+          Toast("手机号格式不正确");
+          return;
+        }
+      }
 
-			this.disabled = true;
-			let parmas = {
-				addresseeName: this.name,
-				addresseePhone: this.phone,
-				addresseeProvince: this.province,
-				addresseeCounty: this.district,
-				addresseeCity: this.city,
-				addresseeTown: this.town,
-				addresseeAddrInfo: this.address,
-				addresseeAddress: this.message,
-			}
-			const res = await saveAddress({ ...parmas })
-			if (res.msg == 'success') {
-				Toast("保存成功");
-				this.$router.push('/Myaddressbook')
-			} else {
-				Toast("保存失败");
-			}
+      if (this.province == "" || this.province == undefined) {
+        Toast("请输入省");
+        return;
+      }
+      if (this.city == "" || this.city == undefined) {
+        Toast("请输入市");
+        return;
+      }
+      if (this.district == "" || this.district == undefined) {
+        Toast("请输入区");
+        return;
+      }
+      if (this.city == "" || this.city == undefined) {
+        Toast("请输入镇");
+        return;
+      }
+      if (this.address == "" || this.address == undefined) {
+        Toast("请输入详细地址");
+        return;
+      }
 
-		},
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+      this.disabled = true;
+      let parmas = {
+        addresseeName: this.name,
+        addresseePhone: this.phone,
+        addresseeProvince: this.province,
+        addresseeCounty: this.district,
+        addresseeCity: this.city,
+        addresseeTown: this.town,
+        addresseeAddrInfo: this.address,
+        addresseeAddress: this.message
+      };
+      const res = await saveAddress({ ...parmas });
+      if (res.msg == "success") {
+        Toast("保存成功");
+        this.$router.push("/Myaddressbook");
+      } else {
+        Toast("保存失败");
+      }
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
+  .form {
+    padding: 0.3rem;
 
-	.form {
-		padding: .3rem;
-
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
-
-		}
-	}
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
 }
 
 /deep/ .van-field--min-height .van-field__control {
-	min-height: 72px;
+  min-height: 72px;
 }
 </style>

src/pages/personinfomation.vue

@@ -1,131 +1,166 @@
 <template>
-	<div>
+  <div>
+    <!-- 表单 -->
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="user.name"
+        class="m"
+        name="NAME"
+        label="中文名"
+        placeholder="请填写中文名"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.email"
+        class="m"
+        name="EMAIL"
+        label="邮箱地址"
+        placeholder="请填写邮箱地址"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.phone"
+        class="m"
+        type="number"
+        name="PHONE"
+        label="手机号"
+        placeholder="请填写手机号"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.company"
+        class="m"
+        readonly
+        label="公司"
+        placeholder="公司"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.departmentName"
+        readonly
+        class="m"
+        label="部门"
+        placeholder="请选择部门"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.seatNo"
+        readonly
+        label="座位"
+        placeholder="请填写座位"
+        :rules="[{ required: false }]"
+      />
 
-		<!-- 表单 -->
-		<van-form @submit="onSubmit">
-			<van-field v-model="user.name" class="m" name="NAME" label="中文名" placeholder="请填写中文名"
-				:rules="[{ required: false }]" />
-			<van-field v-model="user.email" class="m" name="EMAIL" label="邮箱地址" placeholder="请填写邮箱地址"
-				:rules="[{ required: false }]" />
-			<van-field v-model="user.phone" class="m" type="number" name="PHONE" label="手机号" placeholder="请填写手机号"
-				:rules="[{ required: false }]" />
-			<van-field v-model="user.company" class="m" readonly label="公司" placeholder="公司"
-				:rules="[{ required: false }]" />
-			<van-field v-model="user.departmentName" readonly class="m" label="部门" placeholder="请选择部门"
-				:rules="[{ required: false }]" />
-			<van-field v-model="user.seatNo" readonly label="座位" placeholder="请填写座位" :rules="[{ required: false }]" />
-
-			<!-- <van-field v-model="user.englishName" type="" name="英文名" label="英文名" placeholder="请填写英文名"
+      <!-- <van-field v-model="user.englishName" type="" name="英文名" label="英文名" placeholder="请填写英文名"
 				:rules="[{ required: false }]" /> -->
-			<!-- <van-field v-model="user.stationNum" type="" name="工号" label="工号" placeholder="请填写工号"
+      <!-- <van-field v-model="user.stationNum" type="" name="工号" label="工号" placeholder="请填写工号"
 				:rules="[{ required: false }]" /> -->
-			<!-- 弹窗物品类型 -->
-			<!-- <van-popup v-model="show" position="bottom">
+      <!-- 弹窗物品类型 -->
+      <!-- <van-popup v-model="show" position="bottom">
 				<van-picker title="选择部门" show-toolbar value-key="department" :columns="departmenList"
 					@confirm="onConfirm" @cancel="show = false" />
 			</van-popup> -->
-			<!--上司部门-->
-			<!-- <van-field v-model="user.leaderDepartment" readonly @click="show2 = true" class="m" type="" name="上司部门"
+      <!--上司部门-->
+      <!-- <van-field v-model="user.leaderDepartment" readonly @click="show2 = true" class="m" type="" name="上司部门"
 				label="上司部门" placeholder="请选择上司部门" :rules="[{ required: false }]" />
 			<van-popup v-model="show2" position="bottom">
 				<van-picker title="选择上司部门" show-toolbar value-key="department" :columns="departmenList"
 					@confirm="onConfirm2" @cancel="show2 = false" />
 			</van-popup> -->
-			<!--上司姓名-->
-			<!-- <van-field v-model="user.leaderName" readonly @click="show3 = true" class="m" type="" name="上司" label="上司"
+      <!--上司姓名-->
+      <!-- <van-field v-model="user.leaderName" readonly @click="show3 = true" class="m" type="" name="上司" label="上司"
 				placeholder="请选择上司" :rules="[{ required: false }]" />
 			<van-popup v-model="show3" position="bottom">
 				<van-picker title="选择上司" show-toolbar value-key="name" :columns="leaderList" @confirm="onConfirm3"
 					@cancel="show3 = false" />
 			</van-popup> -->
-			<!-- <van-field v-model="user.costCenterName" readonly class="m" type="" name="成本中心" label="成本中心"
+      <!-- <van-field v-model="user.costCenterName" readonly class="m" type="" name="成本中心" label="成本中心"
 				placeholder="请填写成本中心" :rules="[{ required: false }]" /> -->
-			<!-- <van-field v-model="user.build" type="" name="幢/座" label="幢/座" placeholder="请填写幢/座"
+      <!-- <van-field v-model="user.build" type="" name="幢/座" label="幢/座" placeholder="请填写幢/座"
 				:rules="[{ required: false }]" /> -->
-			<!-- <van-field v-model="user.floor" type="" name="楼层" label="楼层" placeholder="请填写楼层"
+      <!-- <van-field v-model="user.floor" type="" name="楼层" label="楼层" placeholder="请填写楼层"
 				:rules="[{ required: false }]" /> -->
-			<!-- <van-field v-model="user.remark" type="" name="备注" label="备注" placeholder="请填写备注"
+      <!-- <van-field v-model="user.remark" type="" name="备注" label="备注" placeholder="请填写备注"
 				:rules="[{ required: false }]" /> -->
-			<div style="margin: 16px;">
-				<van-button round block type="info" native-type="submit">保存</van-button>
-			</div>
-		</van-form>
-	</div>
+      <div style="margin: 16px;">
+        <van-button round block type="info" native-type="submit"
+          >保存</van-button
+        >
+      </div>
+    </van-form>
+  </div>
 </template>
 
 <script>
-import { Form, Toast, Field } from 'vant'
-import { getUserByUserId, UserUpdate } from '../api/index'
+import { Form, Toast, Field } from "vant";
+import { getUserByUserId, UserUpdate } from "../api/index";
 export default {
-	data() {
-		return {
-			titlename: "个人信息",
-			user: {},
-			userId: '',
-			departmenList: [],
-			leaderList: [],
-
-		}
-	},
-	created: function () {
-		this.getUserByUserIdAPI()
-	},
-	methods: {
-		// 获取信息 
-		async getUserByUserIdAPI() {
-			const res = await getUserByUserId({ id: localStorage.getItem("userId") })
-			this.user = res.userInfo
-			console.log(res, 'res')
-		},
-
+  data() {
+    return {
+      titlename: "个人信息",
+      user: {},
+      userId: "",
+      departmenList: [],
+      leaderList: []
+    };
+  },
+  created: function() {
+    this.getUserByUserIdAPI();
+  },
+  methods: {
+    // 获取信息
+    async getUserByUserIdAPI() {
+      const res = await getUserByUserId({ id: localStorage.getItem("userId") });
+      this.user = res.userInfo;
+      console.log(res, "res");
+    },
 
-		async onSubmit(value) {
-			const res = await UserUpdate({ ...value })
-			if (res.msg == 'success') {
-				Toast('修改成功')
-				this.$router.push('/My')
-			}
-			console.log(res)
-		},
-
-	}
-}
+    async onSubmit(value) {
+      const res = await UserUpdate({ ...value });
+      if (res.msg == "success") {
+        Toast("修改成功");
+        this.$router.push("/My");
+      }
+      console.log(res);
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
 /deep/.van-form {
-	.van-button--info {
-		background-color: #00c4b8;
-		border: 1px solid #00c4b8;
-		border-radius: 5px;
-	}
+  .van-button--info {
+    background-color: #0c2469;
+    border: 1px solid #0c2469;
+    border-radius: 5px;
+  }
 
-	.m .van-field__label::before {
-		content: "*";
-		color: red;
-	}
+  .m .van-field__label::before {
+    content: "*";
+    color: red;
+  }
 
-	.van-cell {
-		font-size: .26rem;
-	}
+  .van-cell {
+    font-size: 0.26rem;
+  }
 
-	.textarea {
-		font-size: .26rem;
-		padding: 10px 16px;
-		color: #646566;
+  .textarea {
+    font-size: 0.26rem;
+    padding: 10px 16px;
+    color: #646566;
 
-		textarea {
-			width: 98%;
-			height: 150px;
-			border-color: #e5e5e5;
-			color: #999999;
-			margin-top: 16px;
-			padding: 10px 1%;
-		}
-	}
+    textarea {
+      width: 98%;
+      height: 150px;
+      border-color: #e5e5e5;
+      color: #999999;
+      margin-top: 16px;
+      padding: 10px 1%;
+    }
+  }
 }
 
 /deep/.van-field__control {
-	text-align: right;
+  text-align: right;
 }
 </style>

src/pages/sbxx.vue

@@ -1,181 +1,196 @@
 <template>
-	<div class="content">
-		<back :title="titlename"></back>
-		<!-- 快递公司 -->
-		<div class="kdshow">
-			<van-field readonly clickable name="picker" :value="value" label="报关方式" placeholder="请选择报关方式" @click="showPicker = true" />
-			<van-popup v-model="showPicker" position="bottom">
-			  <van-picker
-			    show-toolbar
-			    :columns="columns"
-			    @confirm="onConfirm"
-			    @cancel="showPicker = false"
-			  />
-			</van-popup>
-		</div>
-		<div class="addwp" v-show="wpshow">
-			<van-field readonly clickable name="picker" label="申报物品" placeholder="添加" @click="wpshowPicker=true"/>
-			<div class="wplist" v-for="(item,i) in wplist">
-				<p>申报物品:{{item}}</p>
-				<span @click="del(i)">删除</span>
-			</div>
-			
-		</div>
-		<!-- 寄件 -->
-		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">确定</van-button>
-		</div>
-		<van-popup v-model="wpshowPicker" position="center">
-		  <div class="wpcontent">
-			 <van-field clickable name="picker" label="申报物品" v-model.trim="wp" placeholder="请填写申报物品"/>
-			 <van-button type="info" color="#00c4b8" @click="add">确定</van-button>		 
-		  </div>
-		</van-popup>
-		
-	</div>	
+  <div class="content">
+    <back :title="titlename"></back>
+    <!-- 快递公司 -->
+    <div class="kdshow">
+      <van-field
+        readonly
+        clickable
+        name="picker"
+        :value="value"
+        label="报关方式"
+        placeholder="请选择报关方式"
+        @click="showPicker = true"
+      />
+      <van-popup v-model="showPicker" position="bottom">
+        <van-picker
+          show-toolbar
+          :columns="columns"
+          @confirm="onConfirm"
+          @cancel="showPicker = false"
+        />
+      </van-popup>
+    </div>
+    <div class="addwp" v-show="wpshow">
+      <van-field
+        readonly
+        clickable
+        name="picker"
+        label="申报物品"
+        placeholder="添加"
+        @click="wpshowPicker = true"
+      />
+      <div class="wplist" v-for="(item, i) in wplist">
+        <p>申报物品:{{ item }}</p>
+        <span @click="del(i)">删除</span>
+      </div>
+    </div>
+    <!-- 寄件 -->
+    <div class="btn-jj">
+      <van-button type="info" color="#0c2469">确定</van-button>
+    </div>
+    <van-popup v-model="wpshowPicker" position="center">
+      <div class="wpcontent">
+        <van-field
+          clickable
+          name="picker"
+          label="申报物品"
+          v-model.trim="wp"
+          placeholder="请填写申报物品"
+        />
+        <van-button type="info" color="#0c2469" @click="add">确定</van-button>
+      </div>
+    </van-popup>
+  </div>
 </template>
 
 <script>
-	import {Toast} from "vant"
-	import areaList from "@/script/areas.js"
-	export default{
-		data(){
-			return {
-				titlename:"申报信息",
-				showPicker:false,//快递
-				value:"",
-				columns:["非正式报关","正式报关"],
-				wpshow:false,
-				wpshowPicker:false,
-				wplist:[],
-				wp:""
-			}
-		},
-		created:function(){
-			this.isLogin();
-			//this.areaList=area.areaList
-		},
-		methods:{
-			// 选择快递公司
-			onConfirm(e){
-				this.value=e
-				this.showPicker=false
-				if(this.value=='正式报关'){
-					this.wpshow=true
-				}
-				else{
-					this.wpshow=false
-				}
-			},
-			add(){
-				if(this.wp==""){
-					Toast("请填写申报物品")
-					return false
-				}
-				this.wplist.push(this.wp)
-				console.log(this.wplist)
-				this.wp=""
-				this.wpshowPicker=false
-			},
-			del(i){
-				this.wplist.splice(i)
-			}
-		},
-		computed:{
-			areaList(){
-				return areaList
-			}
-		}
-	}
+import { Toast } from "vant";
+import areaList from "@/script/areas.js";
+export default {
+  data() {
+    return {
+      titlename: "申报信息",
+      showPicker: false, //快递
+      value: "",
+      columns: ["非正式报关", "正式报关"],
+      wpshow: false,
+      wpshowPicker: false,
+      wplist: [],
+      wp: ""
+    };
+  },
+  created: function() {
+    this.isLogin();
+    //this.areaList=area.areaList
+  },
+  methods: {
+    // 选择快递公司
+    onConfirm(e) {
+      this.value = e;
+      this.showPicker = false;
+      if (this.value == "正式报关") {
+        this.wpshow = true;
+      } else {
+        this.wpshow = false;
+      }
+    },
+    add() {
+      if (this.wp == "") {
+        Toast("请填写申报物品");
+        return false;
+      }
+      this.wplist.push(this.wp);
+      console.log(this.wplist);
+      this.wp = "";
+      this.wpshowPicker = false;
+    },
+    del(i) {
+      this.wplist.splice(i);
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.content{
-		
-		.kdshow{
-			font-size: .3rem;
-			padding: .3rem 0px;
-			width: 6.84rem;
-			background: white;
-			border-radius: .05rem;
-			margin: .2rem auto .2rem;
-			/deep/.van-cell{
-				padding: 0px .3rem;
-				overflow: unset;
-				input{
-					text-align: right;
-					height: .5rem;
-					padding-right: .25rem;
-				}
-			}
-			/deep/.van-cell::after{
-				content: "";
-				display: inline-block;
-				border-right: .01rem solid #b0b0b0;
-				border-bottom: .01rem solid #b0b0b0;
-				transform: rotate(-45deg);
-				left: unset;
-				position: absolute;
-				right: .3rem;
-				bottom: .15rem;
-				width: .2rem;
-				height: .2rem;
-			}
-		}
-		.addwp{
-			font-size: .3rem;
-			padding: .3rem 0px;
-			width: 6.84rem;
-			background: white;
-			border-radius: .05rem;
-			margin: 0rem auto .2rem;
-			.wplist{
-				padding: 0px .3rem;
-				display: flex;
-				justify-content: space-between;
-				color: #646566;
-				font-size: 14px;
-				margin-top: .2rem;
-				span{
-					color:#00c4b8
-				}
-			}
-			/deep/.van-cell{
-				padding: 0px .3rem;
-				overflow: unset;
-				input{
-					text-align: right;
-					height: .5rem;
-					//padding-right: .25rem;
-				}
-			}
-			.van-cell::after{
-				display: none;
-			}
-			
-		}
-		.btn-jj{
-			padding: .33rem;
-			font-size: .3rem;
-			button{
-				width: 100%;
-			}
-		}
-		.wpcontent{
-			width:6rem;
-			padding: .3rem;
-			text-align: center;
-			/deep/.van-cell{
-				input{
-					text-align: right;
-				}
-			}
-			button{
-				width: 60%;
-				height: 35px;
-				line-height: 35px;
-			}
-		}
-	}
-	
+.content {
+  .kdshow {
+    font-size: 0.3rem;
+    padding: 0.3rem 0px;
+    width: 6.84rem;
+    background: white;
+    border-radius: 0.05rem;
+    margin: 0.2rem auto 0.2rem;
+    /deep/.van-cell {
+      padding: 0px 0.3rem;
+      overflow: unset;
+      input {
+        text-align: right;
+        height: 0.5rem;
+        padding-right: 0.25rem;
+      }
+    }
+    /deep/.van-cell::after {
+      content: "";
+      display: inline-block;
+      border-right: 0.01rem solid #b0b0b0;
+      border-bottom: 0.01rem solid #b0b0b0;
+      transform: rotate(-45deg);
+      left: unset;
+      position: absolute;
+      right: 0.3rem;
+      bottom: 0.15rem;
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+  }
+  .addwp {
+    font-size: 0.3rem;
+    padding: 0.3rem 0px;
+    width: 6.84rem;
+    background: white;
+    border-radius: 0.05rem;
+    margin: 0rem auto 0.2rem;
+    .wplist {
+      padding: 0px 0.3rem;
+      display: flex;
+      justify-content: space-between;
+      color: #646566;
+      font-size: 14px;
+      margin-top: 0.2rem;
+      span {
+        color: #0c2469;
+      }
+    }
+    /deep/.van-cell {
+      padding: 0px 0.3rem;
+      overflow: unset;
+      input {
+        text-align: right;
+        height: 0.5rem;
+        //padding-right: .25rem;
+      }
+    }
+    .van-cell::after {
+      display: none;
+    }
+  }
+  .btn-jj {
+    padding: 0.33rem;
+    font-size: 0.3rem;
+    button {
+      width: 100%;
+    }
+  }
+  .wpcontent {
+    width: 6rem;
+    padding: 0.3rem;
+    text-align: center;
+    /deep/.van-cell {
+      input {
+        text-align: right;
+      }
+    }
+    button {
+      width: 60%;
+      height: 35px;
+      line-height: 35px;
+    }
+  }
+}
 </style>

src/pages/search.vue

@@ -1,388 +1,385 @@
 <template>
-	<div>
-		<div class="content">
-			<!-- 收件 -->
-			<div class="batch_box" @scroll.passive="getScroll($event)" style=" height: calc(100vh );overflow-y: auto;">
-				<van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
-					<div class="sjlist" v-for="item in expressList">
-						<div class="listinfo">
-							<div class="list_top" @click="mailDetail(item)">
-								<div class="list_top_left">
-									<img src="../assets/images/ad_icon1.png" alt="">
-									<div>
-										<p>寄件号：{{ item.dispatchNo }}</p>
-										<p>手机号：{{ item.phone }}</p>
-										<p>收件人：{{ item.recipient }}</p>
-										<p>创建时间&nbsp：{{ item.recordDate }}</p>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<template v-if="!refreshLoading && expressList.length > 0">
-						<div class="bottom_text" v-if="loading">
-							加载中...
-						</div>
-						<div class="bottom_text" v-else-if="noData">
-							已经到底啦...
-						</div>
-					</template>
-					<template v-if="expressList.length === 0">
-						<div class="bottom_text">数据为空！</div>
-					</template>
-				</van-pull-refresh>
-			</div>
-		</div>
-	</div>
+  <div>
+    <div class="content">
+      <!-- 收件 -->
+      <div
+        class="batch_box"
+        @scroll.passive="getScroll($event)"
+        style=" height: calc(100vh );overflow-y: auto;"
+      >
+        <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
+          <div class="sjlist" v-for="item in expressList">
+            <div class="listinfo">
+              <div class="list_top" @click="mailDetail(item)">
+                <div class="list_top_left">
+                  <img src="../assets/images/ad_icon1.png" alt="" />
+                  <div>
+                    <p>寄件号：{{ item.dispatchNo }}</p>
+                    <p>手机号：{{ item.phone }}</p>
+                    <p>收件人：{{ item.recipient }}</p>
+                    <p>创建时间&nbsp：{{ item.recordDate }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <template v-if="!refreshLoading && expressList.length > 0">
+            <div class="bottom_text" v-if="loading">
+              加载中...
+            </div>
+            <div class="bottom_text" v-else-if="noData">
+              已经到底啦...
+            </div>
+          </template>
+          <template v-if="expressList.length === 0">
+            <div class="bottom_text">数据为空！</div>
+          </template>
+        </van-pull-refresh>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
-import { getExpressByUser } from '../api/index'
-import ScrollRefresh from '../components/ScrollRefresh.vue'
+import { Toast, Dialog } from "vant";
+import { getExpressByUser } from "../api/index";
+import ScrollRefresh from "../components/ScrollRefresh.vue";
 export default {
-	components: {
-		ScrollRefresh
-	},
-	data() {
-		return {
-			titlename: "我的收件",
-			expressList: [],
-			pageSize: {
-				page: 1,
-				limit: 10
-			},
-			refreshLoading: false, // 刷新loading
-			noData: false, // 没有更多数据
-		};
-	},
-	created: function () {
-		this.expressListAPI()
-
-	},
-	methods: {
-		// 刷新	
-		async onRefresh() {
-			this.pageSize.page = 1;
-			this.pageSize.limit = 10;
-			this.refreshLoading = true;
-			await this.expressListAPI(true)
-			this.refreshLoading = false
-		},
-		// 滚动事件
-		getScroll(event) {
-			let scrollBottom =
-				event.target.scrollHeight -
-				event.target.scrollTop -
-				event.target.clientHeight;
-			// 距离底部20px以内 && 还有数据 && 没有正在加载中
-			if (scrollBottom <= 20 && !this.noData && !this.loading) {
-				this.pageSize.page += 1;
-				this.expressListAPI();
-			}
-		},
-		// 获取数据
-		async expressListAPI(isClear) {
-			this.loading = true
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			const res = await getExpressByUser({ ...this.pageSize })
-			let expressListA = res.data
-			Toast.clear()
-
-			if (isClear) {
-				this.expressList = expressListA
-			} else {
-				this.expressList.push(...expressListA)
-			}
-
-			this.loading = false
-			if (this.pageSize.page * this.pageSize.limit >= res.count) {
-				this.noData = true;
-			} else {
-				this.noData = false;
-			}
-		},
-		mailDetail(item) {
-			console.log(item, 'item========')
-			this.$router.push({ path: '/ExpressExpress', query: { item: item } })
-		}
-
-	}
+  components: {
+    ScrollRefresh
+  },
+  data() {
+    return {
+      titlename: "我的收件",
+      expressList: [],
+      pageSize: {
+        page: 1,
+        limit: 10
+      },
+      refreshLoading: false, // 刷新loading
+      noData: false // 没有更多数据
+    };
+  },
+  created: function() {
+    this.expressListAPI();
+  },
+  methods: {
+    // 刷新
+    async onRefresh() {
+      this.pageSize.page = 1;
+      this.pageSize.limit = 10;
+      this.refreshLoading = true;
+      await this.expressListAPI(true);
+      this.refreshLoading = false;
+    },
+    // 滚动事件
+    getScroll(event) {
+      let scrollBottom =
+        event.target.scrollHeight -
+        event.target.scrollTop -
+        event.target.clientHeight;
+      // 距离底部20px以内 && 还有数据 && 没有正在加载中
+      if (scrollBottom <= 20 && !this.noData && !this.loading) {
+        this.pageSize.page += 1;
+        this.expressListAPI();
+      }
+    },
+    // 获取数据
+    async expressListAPI(isClear) {
+      this.loading = true;
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      const res = await getExpressByUser({ ...this.pageSize });
+      let expressListA = res.data;
+      Toast.clear();
+
+      if (isClear) {
+        this.expressList = expressListA;
+      } else {
+        this.expressList.push(...expressListA);
+      }
+
+      this.loading = false;
+      if (this.pageSize.page * this.pageSize.limit >= res.count) {
+        this.noData = true;
+      } else {
+        this.noData = false;
+      }
+    },
+    mailDetail(item) {
+      console.log(item, "item========");
+      this.$router.push({ path: "/ExpressExpress", query: { item: item } });
+    }
+  }
 };
 </script>
 
 <style lang="less" scoped>
 .whrite_add {
-	width: 6.6rem;
-	padding: .4rem .2rem;
-
-	/deep/.van-field__value {
-		input {
-			text-align: right;
-		}
-
-	}
-
-	/deep/.van-popup__close-icon--top-right {
-		top: 5px;
-		right: 10px;
-	}
+  width: 6.6rem;
+  padding: 0.4rem 0.2rem;
+
+  /deep/.van-field__value {
+    input {
+      text-align: right;
+    }
+  }
+
+  /deep/.van-popup__close-icon--top-right {
+    top: 5px;
+    right: 10px;
+  }
 }
 
 .content {
-
-
-	.tab {
-		font-size: .36rem;
-		color: #00c4b8;
-		padding: .2rem .0rem;
-
-		div {
-			display: flex;
-			border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-
-			p {
-				flex: 1;
-				padding: .1rem 0rem;
-
-			}
-
-			p.active {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-
-	}
-
-	.jjlist {
-		font-size: .3rem;
-		color: #999999;
-
-		.listinfo {
-			background: white;
-			padding: .33rem .33rem .2rem;
-			border-radius: .05rem;
-			margin-bottom: .2rem;
-			position: relative;
-
-			.list_top {
-				display: flex;
-				justify-content: space-between;
-
-				.list_top_left {
-					img {
-						display: inline-block;
-						width: .9rem;
-						height: .9rem;
-						position: relative;
-						top: -.3rem;
-					}
-
-					div {
-						width: 4rem;
-						margin-left: .2rem;
-						display: inline-block;
-						line-height: 150%;
-
-						p:nth-of-type(1) {
-							font-weight: bold;
-							color: #333;
-						}
-
-						p:nth-of-type(4) {
-							font-size: .24rem;
-							color: #333;
-
-							span {
-								width: .37rem;
-								height: .37rem;
-								color: white;
-								border-radius: 50%;
-								background: #cc9a09;
-								display: inline-block;
-								text-align: center;
-								line-height: .37rem;
-								margin-right: .1rem;
-							}
-						}
-
-						p:nth-of-type(4) {
-							font-size: .2rem;
-						}
-					}
-				}
-
-				>p {
-					font-size: .24rem;
-					color: #f5693d;
-					font-weight: bold;
-				}
-			}
-
-			.list_bot {
-				text-align: right;
-				border-top: .01rem solid #ededed;
-				padding-top: .2rem;
-
-				p {
-					display: inline-block;
-					font-size: .24rem;
-					padding: .16rem .4rem;
-					border-radius: .05rem;
-				}
-
-				p:nth-of-type(1) {
-					border: .01rem solid #263fbf;
-					color: #263fbf;
-				}
-
-				p:nth-of-type(2) {
-					border: .01rem solid #408cc7;
-					color: #408cc7;
-				}
-
-				p:nth-of-type(3) {
-					border: .01rem solid #d5a43c;
-					color: #d5a43c;
-				}
-
-				p:nth-of-type(4) {
-					border: .01rem solid #e24444;
-					color: #e24444;
-				}
-			}
-
-			.fast {
-				background: url(../assets/images/status.png) no-repeat center;
-				background-size: 100% 100%;
-				color: white;
-				position: absolute;
-				bottom: 0px;
-				right: 0px;
-				width: 1rem;
-				height: .4rem;
-				text-align: center;
-				line-height: .4rem;
-				font-size: .2rem;
-			}
-		}
-	}
-
-	.sjlist {
-		font-size: .3rem;
-		color: #999999;
-		padding: 0rem .33rem;
-
-		.listinfo {
-			background: white;
-			padding: .33rem .33rem .2rem;
-			border-radius: .05rem;
-			margin-bottom: .2rem;
-
-			.list_top {
-				display: flex;
-				justify-content: space-between;
-
-				.list_top_left {
-					img {
-						display: inline-block;
-						width: .9rem;
-						height: .9rem;
-						position: relative;
-						top: -.3rem;
-					}
-
-					div {
-						margin-left: .2rem;
-						display: inline-block;
-						line-height: 150%;
-
-						p:nth-of-type(1) {
-							font-weight: bold;
-							color: #333;
-						}
-
-						p:nth-of-type(2) {
-							color: #333;
-						}
-
-						p:nth-of-type(3) {
-							color: #333;
-						}
-
-						p:nth-of-type(4) {
-							font-size: .22rem;
-							color: #333;
-
-							span {
-								width: .37rem;
-								height: .37rem;
-								color: white;
-								border-radius: 50%;
-								background: #cc9a09;
-								display: inline-block;
-								text-align: center;
-								line-height: .37rem;
-								margin-right: .1rem;
-							}
-						}
-					}
-				}
-
-				>p {
-					font-size: .24rem;
-					color: #f5693d;
-					font-weight: bold;
-				}
-			}
-
-			.list_bot {
-				text-align: right;
-				border-top: .01rem solid #ededed;
-				padding-top: .2rem;
-
-				p {
-					display: inline-block;
-					font-size: .24rem;
-					padding: .16rem .4rem;
-					border-radius: .05rem;
-				}
-
-				p:nth-of-type(1) {
-					border: .01rem solid #263fbf;
-					color: #263fbf;
-				}
-
-				p:nth-of-type(2) {
-					border: .01rem solid #408cc7;
-					color: #408cc7;
-				}
-
-				p:nth-of-type(3) {
-					border: .01rem solid #d5a43c;
-					color: #d5a43c;
-				}
-
-				p:nth-of-type(4) {
-					border: .01rem solid #e24444;
-					color: #e24444;
-				}
-			}
-		}
-	}
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.2rem 0rem;
+
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
+
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
+
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
+
+  .jjlist {
+    font-size: 0.3rem;
+    color: #999999;
+
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+      position: relative;
+
+      .list_top {
+        display: flex;
+        justify-content: space-between;
+
+        .list_top_left {
+          img {
+            display: inline-block;
+            width: 0.9rem;
+            height: 0.9rem;
+            position: relative;
+            top: -0.3rem;
+          }
+
+          div {
+            width: 4rem;
+            margin-left: 0.2rem;
+            display: inline-block;
+            line-height: 150%;
+
+            p:nth-of-type(1) {
+              font-weight: bold;
+              color: #333;
+            }
+
+            p:nth-of-type(4) {
+              font-size: 0.24rem;
+              color: #333;
+
+              span {
+                width: 0.37rem;
+                height: 0.37rem;
+                color: white;
+                border-radius: 50%;
+                background: #cc9a09;
+                display: inline-block;
+                text-align: center;
+                line-height: 0.37rem;
+                margin-right: 0.1rem;
+              }
+            }
+
+            p:nth-of-type(4) {
+              font-size: 0.2rem;
+            }
+          }
+        }
+
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
+        }
+      }
+
+      .list_bot {
+        text-align: right;
+        border-top: 0.01rem solid #ededed;
+        padding-top: 0.2rem;
+
+        p {
+          display: inline-block;
+          font-size: 0.24rem;
+          padding: 0.16rem 0.4rem;
+          border-radius: 0.05rem;
+        }
+
+        p:nth-of-type(1) {
+          border: 0.01rem solid #263fbf;
+          color: #263fbf;
+        }
+
+        p:nth-of-type(2) {
+          border: 0.01rem solid #408cc7;
+          color: #408cc7;
+        }
+
+        p:nth-of-type(3) {
+          border: 0.01rem solid #d5a43c;
+          color: #d5a43c;
+        }
+
+        p:nth-of-type(4) {
+          border: 0.01rem solid #e24444;
+          color: #e24444;
+        }
+      }
+
+      .fast {
+        background: url(../assets/images/status.png) no-repeat center;
+        background-size: 100% 100%;
+        color: white;
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        width: 1rem;
+        height: 0.4rem;
+        text-align: center;
+        line-height: 0.4rem;
+        font-size: 0.2rem;
+      }
+    }
+  }
+
+  .sjlist {
+    font-size: 0.3rem;
+    color: #999999;
+    padding: 0rem 0.33rem;
+
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+
+      .list_top {
+        display: flex;
+        justify-content: space-between;
+
+        .list_top_left {
+          img {
+            display: inline-block;
+            width: 0.9rem;
+            height: 0.9rem;
+            position: relative;
+            top: -0.3rem;
+          }
+
+          div {
+            margin-left: 0.2rem;
+            display: inline-block;
+            line-height: 150%;
+
+            p:nth-of-type(1) {
+              font-weight: bold;
+              color: #333;
+            }
+
+            p:nth-of-type(2) {
+              color: #333;
+            }
+
+            p:nth-of-type(3) {
+              color: #333;
+            }
+
+            p:nth-of-type(4) {
+              font-size: 0.22rem;
+              color: #333;
+
+              span {
+                width: 0.37rem;
+                height: 0.37rem;
+                color: white;
+                border-radius: 50%;
+                background: #cc9a09;
+                display: inline-block;
+                text-align: center;
+                line-height: 0.37rem;
+                margin-right: 0.1rem;
+              }
+            }
+          }
+        }
+
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
+        }
+      }
+
+      .list_bot {
+        text-align: right;
+        border-top: 0.01rem solid #ededed;
+        padding-top: 0.2rem;
+
+        p {
+          display: inline-block;
+          font-size: 0.24rem;
+          padding: 0.16rem 0.4rem;
+          border-radius: 0.05rem;
+        }
+
+        p:nth-of-type(1) {
+          border: 0.01rem solid #263fbf;
+          color: #263fbf;
+        }
+
+        p:nth-of-type(2) {
+          border: 0.01rem solid #408cc7;
+          color: #408cc7;
+        }
+
+        p:nth-of-type(3) {
+          border: 0.01rem solid #d5a43c;
+          color: #d5a43c;
+        }
+
+        p:nth-of-type(4) {
+          border: 0.01rem solid #e24444;
+          color: #e24444;
+        }
+      }
+    }
+  }
 }
 
 .bottom_text {
-	font-size: 16px;
-	color: #969799;
-	text-align: center;
-	margin-top: 20px;
+  font-size: 16px;
+  color: #969799;
+  text-align: center;
+  margin-top: 20px;
 }
 </style>

src/pages/setting.vue

@@ -1,164 +1,169 @@
 <template>
-	<div class="body">
-		<!-- 选择类型 -->
-		<div class="list">
-			<router-link to="/Forgetpassword">
-				<span>修改密码</span>
-			</router-link>
-			<!-- <router-link to="">
+  <div class="body">
+    <!-- 选择类型 -->
+    <div class="list">
+      <router-link to="/Forgetpassword">
+        <span>修改密码</span>
+      </router-link>
+      <!-- <router-link to="">
 				<span>关于</span>
 			</router-link> -->
-			<router-link to="/Sytk">
-				<span>使用条款</span>
-			</router-link>
-
-		</div>
-		<div class="btn">
-			<van-button color="#00c4b8" @click="loginout">退出登录</van-button>
-		</div>
-
-	</div>
-
+      <router-link to="/Sytk">
+        <span>使用条款</span>
+      </router-link>
+    </div>
+    <div class="btn">
+      <van-button color="#0c2469" @click="loginout">退出登录</van-button>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-	data() {
-		return {
-			titlename: "设置",
-			userId: "",
-			user: []
-		};
-	},
-	created: function () {
-		this.isLogin();
-		this.userId = localStorage.getItem("userId");
-		//this.openid = '123'
-	},
-	methods: {
-		//跳转
-		getUser() {
-			this.$http.post(this.$store.state.host + "/interface/getUser", {
-				userId: this.userId
-			}, {
-				emulateJSON: true
-			})
-				.then(res => {
-					//发送成功
-					if (res.body.code == 0) {
-						this.user = res.body.userPd;
-						console.log(this.user);
-					}
-
-					//if()
-				}, res => {
-					//发送失败
-				})
-		},
-		//退出登录
-		loginout() {
-			localStorage.removeItem("userId");
-			localStorage.removeItem("openid");
-			this.$router.push('/Login')
-			// window.location.href = 'http://localhost:8081'
-			// window.location.href ='http://47.101.145.23/wuliu/';
-		}
-	}
+  data() {
+    return {
+      titlename: "设置",
+      userId: "",
+      user: []
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    //this.openid = '123'
+  },
+  methods: {
+    //跳转
+    getUser() {
+      this.$http
+        .post(
+          this.$store.state.host + "/interface/getUser",
+          {
+            userId: this.userId
+          },
+          {
+            emulateJSON: true
+          }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.code == 0) {
+              this.user = res.body.userPd;
+              console.log(this.user);
+            }
+
+            //if()
+          },
+          res => {
+            //发送失败
+          }
+        );
+    },
+    //退出登录
+    loginout() {
+      localStorage.removeItem("userId");
+      localStorage.removeItem("openid");
+      this.$router.push("/Login");
+      // window.location.href = 'http://localhost:8081'
+      // window.location.href ='http://47.101.145.23/wuliu/';
+    }
+  }
 };
 </script>
 
 <style lang="less" scoped>
 body {
-	background: #fbfbfb;
+  background: #fbfbfb;
 }
 
 .body {
-	.head {
-		padding: .43rem .38rem;
-		font-size: .24rem;
-		color: #999;
-		display: flex;
-		background: white;
-		flex-wrap: wrap;
-		position: relative;
-
-		img {
-			width: 1.48rem;
-			height: 1.48rem;
-			border-radius: 50%;
-			margin-right: .4rem;
-		}
-
-		div {
-			p:nth-of-type(1) {
-				font-size: .36rem;
-				font-weight: bold;
-				color: #333;
-				margin-bottom: .2rem;
-				padding-top: .3rem;
-			}
-		}
-
-		div:after {
-			content: "";
-			display: block;
-			width: .2rem;
-			height: .2rem;
-			border-left: .01rem solid #333;
-			border-top: .01rem solid #333;
-			transform: rotate(135deg);
-			position: absolute;
-			right: .38rem;
-			top: 1rem;
-		}
-	}
-
-	.list {
-		background: white;
-		margin-top: .36rem;
-		border-radius: .05rem;
-
-		a {
-			font-size: .3rem;
-			display: block;
-			color: #333;
-			padding: .3rem .4rem;
-			border-bottom: 1px solid #f4f3f3;
-			position: relative;
-
-			img {
-				width: .4rem;
-				height: .4rem;
-			}
-
-			span {
-				position: relative;
-				top: -.075rem;
-				margin-left: 0rem;
-			}
-		}
-
-		a:after {
-			content: "";
-			display: block;
-			width: .2rem;
-			height: .2rem;
-			border-left: .01rem solid #b8b8b8;
-			border-top: .01rem solid #b8b8b8;
-			transform: rotate(135deg);
-			position: absolute;
-			right: .4rem;
-			top: .4rem;
-		}
-	}
-
-	.btn {
-		padding: 0px .37rem;
-
-		button {
-			width: 100%;
-			color: white;
-		}
-	}
+  .head {
+    padding: 0.43rem 0.38rem;
+    font-size: 0.24rem;
+    color: #999;
+    display: flex;
+    background: white;
+    flex-wrap: wrap;
+    position: relative;
+
+    img {
+      width: 1.48rem;
+      height: 1.48rem;
+      border-radius: 50%;
+      margin-right: 0.4rem;
+    }
+
+    div {
+      p:nth-of-type(1) {
+        font-size: 0.36rem;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 0.2rem;
+        padding-top: 0.3rem;
+      }
+    }
+
+    div:after {
+      content: "";
+      display: block;
+      width: 0.2rem;
+      height: 0.2rem;
+      border-left: 0.01rem solid #333;
+      border-top: 0.01rem solid #333;
+      transform: rotate(135deg);
+      position: absolute;
+      right: 0.38rem;
+      top: 1rem;
+    }
+  }
+
+  .list {
+    background: white;
+    margin-top: 0.36rem;
+    border-radius: 0.05rem;
+
+    a {
+      font-size: 0.3rem;
+      display: block;
+      color: #333;
+      padding: 0.3rem 0.4rem;
+      border-bottom: 1px solid #f4f3f3;
+      position: relative;
+
+      img {
+        width: 0.4rem;
+        height: 0.4rem;
+      }
+
+      span {
+        position: relative;
+        top: -0.075rem;
+        margin-left: 0rem;
+      }
+    }
+
+    a:after {
+      content: "";
+      display: block;
+      width: 0.2rem;
+      height: 0.2rem;
+      border-left: 0.01rem solid #b8b8b8;
+      border-top: 0.01rem solid #b8b8b8;
+      transform: rotate(135deg);
+      position: absolute;
+      right: 0.4rem;
+      top: 0.4rem;
+    }
+  }
+
+  .btn {
+    padding: 0px 0.37rem;
+
+    button {
+      width: 100%;
+      color: white;
+    }
+  }
 }
 </style>

src/pages/suggest.vue

@@ -1,102 +1,118 @@
 <template>
-	<div>
-		<back :title="titlename"></back>
-		<div class="content">
-			<van-field v-model="suggestScene" name="建议场景" label="建议场景" placeholder="请输入建议场景" :rules="[{ required: false}]"/>
-			<textarea v-model="feedbackContent" cols="30" rows="10" placeholder="请输入意见建议"></textarea>
-			<van-button color="#00c4b8" @click="tj">提交</van-button>
-		</div>
-	</div>
+  <div>
+    <back :title="titlename"></back>
+    <div class="content">
+      <van-field
+        v-model="suggestScene"
+        name="建议场景"
+        label="建议场景"
+        placeholder="请输入建议场景"
+        :rules="[{ required: false }]"
+      />
+      <textarea
+        v-model="feedbackContent"
+        cols="30"
+        rows="10"
+        placeholder="请输入意见建议"
+      ></textarea>
+      <van-button color="#0c2469" @click="tj">提交</van-button>
+    </div>
+  </div>
 </template>
 
 <script>
-	import {
-		Toast,
-		Dialog
-	} from 'vant'
-	export default {
-		data() {
-			return {
-				titlename: "意见建议",
-				feedbackContent: "", //意见建议内容
-				userId:"",
-				mailRoomId:'',//收发室Id
-				feedbackPerson:'',//反馈人
-				expressNo:'1',//关联快递单号-选填
-				suggestScene:'',//建议场景：寄件、收件
-			}
-		},
-		created: function() {
-			this.isLogin();
-			this.userId = localStorage.getItem("userId");
-			this.mailRoomId = localStorage.getItem("roomId");
-		},
-		methods: {
-			//提交
-			tj() {
-				if(this.suggestScene == '' || this.suggestScene == undefined){
-					Toast('请输入建议场景');
-					return;
-				}
-				if(this.feedbackContent == '' || this.feedbackContent == undefined){
-					Toast('请输入意见建议');
-					return;
-				}
-				this.$http.post(this.$store.state.host + "/personal/userSubmitSuggest.do", {
-					userId:this.userId,
-					mailRoomId:this.mailRoomId,
-					expressNo:this.expressNo,
-					suggestScene:this.suggestScene,
-					feedbackContent:this.feedbackContent
-					}, {
-						emulateJSON: true
-					})
-					.then(res => {
-						//发送成功
-						if (res.body.msg == 'success') {
-							Toast("提交成功")
-							let that = this;
-							setTimeout(function() {
-								that.$router.push({
-									path: '/My'
-								})
-							}, 1000)
-						} else {
-							Toast("提交失败");
-							Toast.clear()
-						}
-					}, res => {
-						//发送失败
-						Toast("网络错误");
-					})
-				Toast.clear();
-			}
-		}
-	}
+import { Toast, Dialog } from "vant";
+export default {
+  data() {
+    return {
+      titlename: "意见建议",
+      feedbackContent: "", //意见建议内容
+      userId: "",
+      mailRoomId: "", //收发室Id
+      feedbackPerson: "", //反馈人
+      expressNo: "1", //关联快递单号-选填
+      suggestScene: "" //建议场景：寄件、收件
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    this.mailRoomId = localStorage.getItem("roomId");
+  },
+  methods: {
+    //提交
+    tj() {
+      if (this.suggestScene == "" || this.suggestScene == undefined) {
+        Toast("请输入建议场景");
+        return;
+      }
+      if (this.feedbackContent == "" || this.feedbackContent == undefined) {
+        Toast("请输入意见建议");
+        return;
+      }
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/userSubmitSuggest.do",
+          {
+            userId: this.userId,
+            mailRoomId: this.mailRoomId,
+            expressNo: this.expressNo,
+            suggestScene: this.suggestScene,
+            feedbackContent: this.feedbackContent
+          },
+          {
+            emulateJSON: true
+          }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              Toast("提交成功");
+              let that = this;
+              setTimeout(function() {
+                that.$router.push({
+                  path: "/My"
+                });
+              }, 1000);
+            } else {
+              Toast("提交失败");
+              Toast.clear();
+            }
+          },
+          res => {
+            //发送失败
+            Toast("网络错误");
+          }
+        );
+      Toast.clear();
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.content {
-		padding: .33rem;
-		font-size: .36rem;
+.content {
+  padding: 0.33rem;
+  font-size: 0.36rem;
 
-		.title {
-			font-weight: bold;
-			text-align: center;
-			margin-bottom: .2rem;
-		}
+  .title {
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 0.2rem;
+  }
 
-		textarea {
-			width: 96%;
-			padding: 2%;
-			border-color: #dedede;
-			font-size: .3rem;
-			margin-top: .3rem;
-		}
+  textarea {
+    width: 96%;
+    padding: 2%;
+    border-color: #dedede;
+    font-size: 0.3rem;
+    margin-top: 0.3rem;
+  }
 
-		button {
-			width: 100%;
-			margin-top: .3rem
-		}
-	}
+  button {
+    width: 100%;
+    margin-top: 0.3rem;
+  }
+}
 </style>

src/pages/suggestInfo.vue

@@ -1,85 +1,120 @@
 <template>
-	<div>
-		<back :title="titlename"></back>
-		<div class="content">
-			<van-field v-model="info.suggestScene" readonly name="建议场景" label="建议场景" placeholder="请输入建议场景" :rules="[{ required: false}]"/>
-			<van-field type="textarea" v-model="info.feedbackContent" readonly cols="30" rows="6" label="意见建议"  placeholder="" />
-			<van-field type="textarea" v-model="info.replyContent" readonly cols="30" rows="6" label="回复内容"  placeholder="" />
-			<!-- <textarea v-model="info.feedbackContent" readonly cols="30" rows="8" label="意见建议"  placeholder=""></textarea> -->
-			<!-- <textarea v-model="info.replyContent" readonly cols="30" rows="8" placeholder=""></textarea> -->
-			<van-field v-model="info.replyTime" readonly name="回复时间" label="回复时间" placeholder="" :rules="[{ required: false}]"/>
-			<!-- <van-button color="#00c4b8" @click="tj">提交</van-button> -->
-		</div>
-	</div>
+  <div>
+    <back :title="titlename"></back>
+    <div class="content">
+      <van-field
+        v-model="info.suggestScene"
+        readonly
+        name="建议场景"
+        label="建议场景"
+        placeholder="请输入建议场景"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        type="textarea"
+        v-model="info.feedbackContent"
+        readonly
+        cols="30"
+        rows="6"
+        label="意见建议"
+        placeholder=""
+      />
+      <van-field
+        type="textarea"
+        v-model="info.replyContent"
+        readonly
+        cols="30"
+        rows="6"
+        label="回复内容"
+        placeholder=""
+      />
+      <!-- <textarea v-model="info.feedbackContent" readonly cols="30" rows="8" label="意见建议"  placeholder=""></textarea> -->
+      <!-- <textarea v-model="info.replyContent" readonly cols="30" rows="8" placeholder=""></textarea> -->
+      <van-field
+        v-model="info.replyTime"
+        readonly
+        name="回复时间"
+        label="回复时间"
+        placeholder=""
+        :rules="[{ required: false }]"
+      />
+      <!-- <van-button color="#0c2469" @click="tj">提交</van-button> -->
+    </div>
+  </div>
 </template>
 
 <script>
-	import {
-		Toast,
-		Dialog
-	} from 'vant'
-	export default {
-		data() {
-			return {
-				titlename: "意见建议",
-				feedbackContent: "", //意见建议内容
-				userId:"",
-				mailRoomId:'',//收发室Id
-				feedbackPerson:'',//反馈人
-				expressNo:'1',//关联快递单号-选填
-				suggestScene:'',//建议场景：寄件、收件
-				id:'',
-				info:{},
-			}
-		},
-		created: function() {
-			this.isLogin();
-			this.userId = localStorage.getItem("userId");
-			this.mailRoomId = localStorage.getItem("roomId");
-			this.id = this.$route.query.id;
-			this.getSuggestDetail();
-		},
-		methods: {
-			//查看
-			getSuggestDetail(){
-				this.$http.post(this.$store.state.host+"/solic/getSuggestDetail.do",{
-					id:this.id
-				},{emulateJSON:true})
-					.then(res=>{
-						//发送成功
-						if(res.body.msg=='success'){
-							this.info = res.body.suggestInfo;
-						}
-				},res=>{
-						 //发送失败
-				})
-			},
-		}
-	}
+import { Toast, Dialog } from "vant";
+export default {
+  data() {
+    return {
+      titlename: "意见建议",
+      feedbackContent: "", //意见建议内容
+      userId: "",
+      mailRoomId: "", //收发室Id
+      feedbackPerson: "", //反馈人
+      expressNo: "1", //关联快递单号-选填
+      suggestScene: "", //建议场景：寄件、收件
+      id: "",
+      info: {}
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    this.mailRoomId = localStorage.getItem("roomId");
+    this.id = this.$route.query.id;
+    this.getSuggestDetail();
+  },
+  methods: {
+    //查看
+    getSuggestDetail() {
+      this.$http
+        .post(
+          this.$store.state.host + "/solic/getSuggestDetail.do",
+          {
+            id: this.id
+          },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              this.info = res.body.suggestInfo;
+            }
+          },
+          res => {
+            //发送失败
+          }
+        );
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.content {
-		padding: .33rem;
-		font-size: .36rem;
+.content {
+  padding: 0.33rem;
+  font-size: 0.36rem;
 
-		.title {
-			font-weight: bold;
-			text-align: center;
-			margin-bottom: .2rem;
-		}
+  .title {
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 0.2rem;
+  }
 
-		textarea {
-			width: 96%;
-			padding: 2%;
-			margin-top: .3rem;
-			border-color: #dedede;
-			font-size: .3rem;
-		}
+  textarea {
+    width: 96%;
+    padding: 2%;
+    margin-top: 0.3rem;
+    border-color: #dedede;
+    font-size: 0.3rem;
+  }
 
-		button {
-			width: 100%;
-			margin-top: .3rem
-		}
-	}
+  button {
+    width: 100%;
+    margin-top: 0.3rem;
+  }
+}
 </style>

src/pages/suggestList.vue

@@ -1,328 +1,334 @@
 <template>
-	<div>
-		<back :title="titlename"></back>
-		<div class="content">
-			<!-- 意见建议 -->
-			<div class="jjlist" v-for="item in suggestList">
-				<div class="listinfo">
-					<div class="list_top" @click="detail(item)">
-						<div class="list_top_left">
-							<!-- <img src="../assets/images/ad_icon1.png" alt=""> -->
-							<div>
-								<p>建议场景：  {{item.suggestScene}}</p>
-								<p>反馈状态： <template v-if="item.feedbackStatus==1">已回复</template>
-								<template v-if="item.feedbackStatus==2">未回复</template>
-								</p>
-								<p>反馈时间： {{item.feedbackTime}}</p>
-							</div>
-						</div>
-						<p>
-							<template v-if="item.readFlag==1 && item.feedbackStatus==1">待查看</template>
-							<template v-if="item.feedbackStatus==2">未回复</template>
-							<template v-if="item.readFlag==2">已查看</template>
-						</p>
-					</div>
-					<!-- <div class="list_bot">
+  <div>
+    <back :title="titlename"></back>
+    <div class="content">
+      <!-- 意见建议 -->
+      <div class="jjlist" v-for="item in suggestList">
+        <div class="listinfo">
+          <div class="list_top" @click="detail(item)">
+            <div class="list_top_left">
+              <!-- <img src="../assets/images/ad_icon1.png" alt=""> -->
+              <div>
+                <p>建议场景： {{ item.suggestScene }}</p>
+                <p>
+                  反馈状态：
+                  <template v-if="item.feedbackStatus == 1">已回复</template>
+                  <template v-if="item.feedbackStatus == 2">未回复</template>
+                </p>
+                <p>反馈时间： {{ item.feedbackTime }}</p>
+              </div>
+            </div>
+            <p>
+              <template v-if="item.readFlag == 1 && item.feedbackStatus == 1"
+                >待查看</template
+              >
+              <template v-if="item.feedbackStatus == 2">未回复</template>
+              <template v-if="item.readFlag == 2">已查看</template>
+            </p>
+          </div>
+          <!-- <div class="list_bot">
 						<p>拒收</p>
 						<p>代收</p>
 						<p>延迟</p>
 						<p>签收</p>
 					</div> -->
-				</div>
-			</div>
-			<van-button color="#00c4b8" @click="tj">意见建议</van-button>
-		</div>
-		
-		
-		<!-- 底部 -->
-		<!-- <tabbar></tabbar> -->
-	</div>
+        </div>
+      </div>
+      <van-button color="#0c2469" @click="tj">意见建议</van-button>
+    </div>
+
+    <!-- 底部 -->
+    <!-- <tabbar></tabbar> -->
+  </div>
 </template>
 
 <script>
-import {Toast,Dialog} from 'vant'
+import { Toast, Dialog } from "vant";
 export default {
-    data() {
-      return {
-		titlename:"意见建议",
-		userId:'',
-		suggestList:[],//建议列表
-      };
+  data() {
+    return {
+      titlename: "意见建议",
+      userId: "",
+      suggestList: [] //建议列表
+    };
+  },
+  created: function() {
+    this.isLogin();
+    this.userId = localStorage.getItem("userId");
+    this.getSuggestList();
+  },
+  methods: {
+    //跳转
+    getSuggestList() {
+      this.$http
+        .post(
+          this.$store.state.host + "/solic/getSuggestList.do",
+          {
+            userId: this.userId
+          },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              this.suggestList = res.body.suggestList;
+            }
+          },
+          res => {
+            //发送失败
+          }
+        );
     },
-    created:function(){
-		this.isLogin();
-		this.userId = localStorage.getItem("userId");
-		this.getSuggestList();
+
+    //详情
+    detail(item) {
+      if (item.feedbackStatus == 1) {
+        this.$router.push({ path: "/SuggestInfo", query: { id: item.id } });
+      }
     },
-    methods:{
-		//跳转
-		getSuggestList(){
-			this.$http.post(this.$store.state.host+"/solic/getSuggestList.do",{
-				userId:this.userId
-			},{emulateJSON:true})
-				.then(res=>{
-					//发送成功
-					if(res.body.msg=='success'){
-						this.suggestList = res.body.suggestList;
-					}
-			},res=>{
-					 //发送失败
-			})
-		},
-		
-		//详情
-		detail(item){		
-			if(item.feedbackStatus==1){
-				this.$router.push({path:'/SuggestInfo',query:{id:item.id}})
-			}
-		},
-		tj(){
-			this.$router.push({path:'/Suggest',query:{}})
-		}
-	  
+    tj() {
+      this.$router.push({ path: "/Suggest", query: {} });
     }
-  };
+  }
+};
 </script>
 
 <style lang="less" scoped>
-	.whrite_add{
-		width: 6.6rem;
-		padding: .4rem .2rem;
-		/deep/.van-field__value{
-			input{
-				text-align: right;
-			}
-			
-		}
-		/deep/.van-popup__close-icon--top-right{
-			top: 5px;
-			right: 10px;
-		}
-	}
-  .content{
-	  padding: 0.2rem .33rem 1.2rem;
-	  .tab{
-	  	font-size: .36rem;
-	  	color: #00c4b8;
-	  	padding: .2rem .0rem;			
-	  	div{
-	  		display: flex;
-	  		border: .01rem solid #00c4b8;
-	  		text-align: center;			
-	  		border-radius: .05rem;
-	  		p{
-	  			flex: 1;
-	  			padding: .1rem 0rem;
-	  							
-	  		}
-	  		p.active{
-	  			background: #00c4b8;
-	  			color: white;
-	  		}
-	  	}
-	  	
-	  }
-	  .jjlist{
-		  font-size: .3rem;
-		  color: #999999;
-		  .listinfo{
-			  background: white;
-			  padding: .33rem .33rem .2rem;
-			  border-radius: .05rem;
-			  margin-bottom: .2rem;
-			  position: relative;
-			  .list_top{
-				  display: flex;
-				  justify-content: space-between;
-				  .list_top_left{				  			  
-					  img{
-						  display: inline-block;
-						  width: .9rem;
-						  height: .9rem;
-						  position: relative;
-						  top:-.3rem;
-					  }
-					  div{
-						 width: 4rem;	
-						 margin-left: .2rem;
-						 display: inline-block;
-						 line-height: 150%;
-						p:nth-of-type(1){
-							font-size: .3rem;
-							font-weight: bold;
-							color: #333;
-						}
-						p:nth-of-type(2){
-							font-size: .24rem;
-							color: #333;
-							span{
-								width: .37rem;
-								height: .37rem;
-								color: white;
-								border-radius: 50%;
-								background: #cc9a09;
-								display: inline-block;
-								text-align: center;
-								line-height: .37rem;
-								margin-right: .1rem;
-							}
-						}
-                        p:nth-of-type(3){
-							font-size: .24rem;
-							color: #333;
-							span{
-								width: .37rem;
-								height: .37rem;
-								color: white;
-								border-radius: 50%;
-								background: #cc9a09;
-								display: inline-block;
-								text-align: center;
-								line-height: .37rem;
-								margin-right: .1rem;
-							}
-						}
-                        p:nth-of-type(4){
-							font-size: .2rem;
-						}												  
-					  }
-				  }
-				  >p{
-					  font-size: .24rem;
-					  color: #f5693d;
-					  font-weight: bold;
-				  }
-			  }
-			  .list_bot{
-				  text-align: right;
-				  border-top: .01rem solid #ededed;
-				  padding-top: .2rem;
-				  p{
-					  display: inline-block;
-					  font-size: .24rem;
-					  padding: .16rem .4rem;
-					  border-radius: .05rem;
-				  }
-				  p:nth-of-type(1){
-					  border:.01rem solid #263fbf;
-					  color: #263fbf;
-				  }
-				  p:nth-of-type(2){
-				  	border:.01rem solid #408cc7;
-				  	color: #408cc7;				  
-				  }
-				  p:nth-of-type(3){
-				  	border:.01rem solid #d5a43c;
-				  	color: #d5a43c;				  
-				  }
-				  p:nth-of-type(4){
-				  	border:.01rem solid #e24444;
-				  	color: #e24444;				  
-				  }
-			  }
-			  .fast{
-				  background: url(../assets/images/status.png) no-repeat center;
-				  background-size: 100% 100%;
-				  color: white;
-				  position: absolute;
-				  bottom: 0px;
-				  right: 0px;
-				  width: 1rem;
-				  height: .4rem;
-				  text-align: center;
-				  line-height: .4rem;
-				  font-size: .2rem;
-			  }
-		  }
-	  }
-	  button {
-	  	width: 100%;
-	  	margin-top: .3rem
-	  }
-	  .sjlist{
-	  		  font-size: .3rem;
-	  		  color: #999999;
-	  		  .listinfo{
-	  			  background: white;
-	  			  padding: .33rem .33rem .2rem;
-	  			  border-radius: .05rem;
-	  			  margin-bottom: .2rem;
-	  			  .list_top{
-	  				  display: flex;
-	  				  justify-content: space-between;
-	  				  .list_top_left{				  			  
-	  					  img{
-	  						  display: inline-block;
-	  						  width: .9rem;
-	  						  height: .9rem;
-	  						  position: relative;
-	  						  top:-.3rem;
-	  					  }
-	  					  div{
-	  						 width: 4rem;	
-	  						 margin-left: .2rem;
-	  						 display: inline-block;
-	  						 line-height: 150%;
-	  						p:nth-of-type(1){
-	  							font-size: .3rem;
-	  							font-weight: bold;
-	  							color: #333;
-	  						}
-	                    p:nth-of-type(3){
-	  							font-size: .24rem;
-	  							color: #333;
-	  							span{
-	  								width: .37rem;
-	  								height: .37rem;
-	  								color: white;
-	  								border-radius: 50%;
-	  								background: #cc9a09;
-	  								display: inline-block;
-	  								text-align: center;
-	  								line-height: .37rem;
-	  								margin-right: .1rem;
-	  							}
-	  						}
-	                    p:nth-of-type(4){
-	  							font-size: .2rem;
-	  						}												  
-	  					  }
-	  				  }
-	  				  >p{
-	  					  font-size: .24rem;
-	  					  color: #f5693d;
-	  					  font-weight: bold;
-	  				  }
-	  			  }
-	  			  .list_bot{
-	  				  text-align: right;
-	  				  border-top: .01rem solid #ededed;
-	  				  padding-top: .2rem;
-	  				  p{
-	  					  display: inline-block;
-	  					  font-size: .24rem;
-	  					  padding: .16rem .4rem;
-	  					  border-radius: .05rem;
-	  				  }
-	  				  p:nth-of-type(1){
-	  					  border:.01rem solid #263fbf;
-	  					  color: #263fbf;
-	  				  }
-	  				  p:nth-of-type(2){
-	  				  	border:.01rem solid #408cc7;
-	  				  	color: #408cc7;				  
-	  				  }
-	  				  p:nth-of-type(3){
-	  				  	border:.01rem solid #d5a43c;
-	  				  	color: #d5a43c;				  
-	  				  }
-	  				  p:nth-of-type(4){
-	  				  	border:.01rem solid #e24444;
-	  				  	color: #e24444;				  
-	  				  }
-	  			  }
-	  		  }
-	  }
-	  
+.whrite_add {
+  width: 6.6rem;
+  padding: 0.4rem 0.2rem;
+  /deep/.van-field__value {
+    input {
+      text-align: right;
+    }
+  }
+  /deep/.van-popup__close-icon--top-right {
+    top: 5px;
+    right: 10px;
+  }
+}
+.content {
+  padding: 0.2rem 0.33rem 1.2rem;
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.2rem 0rem;
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
+  .jjlist {
+    font-size: 0.3rem;
+    color: #999999;
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+      position: relative;
+      .list_top {
+        display: flex;
+        justify-content: space-between;
+        .list_top_left {
+          img {
+            display: inline-block;
+            width: 0.9rem;
+            height: 0.9rem;
+            position: relative;
+            top: -0.3rem;
+          }
+          div {
+            width: 4rem;
+            margin-left: 0.2rem;
+            display: inline-block;
+            line-height: 150%;
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              font-weight: bold;
+              color: #333;
+            }
+            p:nth-of-type(2) {
+              font-size: 0.24rem;
+              color: #333;
+              span {
+                width: 0.37rem;
+                height: 0.37rem;
+                color: white;
+                border-radius: 50%;
+                background: #cc9a09;
+                display: inline-block;
+                text-align: center;
+                line-height: 0.37rem;
+                margin-right: 0.1rem;
+              }
+            }
+            p:nth-of-type(3) {
+              font-size: 0.24rem;
+              color: #333;
+              span {
+                width: 0.37rem;
+                height: 0.37rem;
+                color: white;
+                border-radius: 50%;
+                background: #cc9a09;
+                display: inline-block;
+                text-align: center;
+                line-height: 0.37rem;
+                margin-right: 0.1rem;
+              }
+            }
+            p:nth-of-type(4) {
+              font-size: 0.2rem;
+            }
+          }
+        }
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
+        }
+      }
+      .list_bot {
+        text-align: right;
+        border-top: 0.01rem solid #ededed;
+        padding-top: 0.2rem;
+        p {
+          display: inline-block;
+          font-size: 0.24rem;
+          padding: 0.16rem 0.4rem;
+          border-radius: 0.05rem;
+        }
+        p:nth-of-type(1) {
+          border: 0.01rem solid #263fbf;
+          color: #263fbf;
+        }
+        p:nth-of-type(2) {
+          border: 0.01rem solid #408cc7;
+          color: #408cc7;
+        }
+        p:nth-of-type(3) {
+          border: 0.01rem solid #d5a43c;
+          color: #d5a43c;
+        }
+        p:nth-of-type(4) {
+          border: 0.01rem solid #e24444;
+          color: #e24444;
+        }
+      }
+      .fast {
+        background: url(../assets/images/status.png) no-repeat center;
+        background-size: 100% 100%;
+        color: white;
+        position: absolute;
+        bottom: 0px;
+        right: 0px;
+        width: 1rem;
+        height: 0.4rem;
+        text-align: center;
+        line-height: 0.4rem;
+        font-size: 0.2rem;
+      }
+    }
+  }
+  button {
+    width: 100%;
+    margin-top: 0.3rem;
+  }
+  .sjlist {
+    font-size: 0.3rem;
+    color: #999999;
+    .listinfo {
+      background: white;
+      padding: 0.33rem 0.33rem 0.2rem;
+      border-radius: 0.05rem;
+      margin-bottom: 0.2rem;
+      .list_top {
+        display: flex;
+        justify-content: space-between;
+        .list_top_left {
+          img {
+            display: inline-block;
+            width: 0.9rem;
+            height: 0.9rem;
+            position: relative;
+            top: -0.3rem;
+          }
+          div {
+            width: 4rem;
+            margin-left: 0.2rem;
+            display: inline-block;
+            line-height: 150%;
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              font-weight: bold;
+              color: #333;
+            }
+            p:nth-of-type(3) {
+              font-size: 0.24rem;
+              color: #333;
+              span {
+                width: 0.37rem;
+                height: 0.37rem;
+                color: white;
+                border-radius: 50%;
+                background: #cc9a09;
+                display: inline-block;
+                text-align: center;
+                line-height: 0.37rem;
+                margin-right: 0.1rem;
+              }
+            }
+            p:nth-of-type(4) {
+              font-size: 0.2rem;
+            }
+          }
+        }
+        > p {
+          font-size: 0.24rem;
+          color: #f5693d;
+          font-weight: bold;
+        }
+      }
+      .list_bot {
+        text-align: right;
+        border-top: 0.01rem solid #ededed;
+        padding-top: 0.2rem;
+        p {
+          display: inline-block;
+          font-size: 0.24rem;
+          padding: 0.16rem 0.4rem;
+          border-radius: 0.05rem;
+        }
+        p:nth-of-type(1) {
+          border: 0.01rem solid #263fbf;
+          color: #263fbf;
+        }
+        p:nth-of-type(2) {
+          border: 0.01rem solid #408cc7;
+          color: #408cc7;
+        }
+        p:nth-of-type(3) {
+          border: 0.01rem solid #d5a43c;
+          color: #d5a43c;
+        }
+        p:nth-of-type(4) {
+          border: 0.01rem solid #e24444;
+          color: #e24444;
+        }
+      }
+    }
   }
+}
 </style>

src/pages/time.vue

@@ -1,235 +1,256 @@
 <template>
-	<div class="bg" style="">
-		<back :title="titlename"></back>
-		<div class="content">
-			<div  class="add">
-				<van-field v-model="jjadd" type="text" name="寄" label="寄" placeholder="选择寄件城市" />
-				<van-field v-model="sjadd" class="shou" type="text" name="收" label="收" placeholder="选择收件城市" />
-			</div>
-			<div class="kdshow">
-				<van-field readonly clickable name="picker" :value="value" label="快递公司" placeholder="请选择快递公司" @click="showPicker = true" />
-				<van-popup v-model="showPicker" position="bottom">
-				  <van-picker
-				    show-toolbar
-				    :columns="columns"
-				    @confirm="onConfirm"
-				    @cancel="showPicker = false"
-				  />
-				</van-popup>
-			</div>
-			<div class="steps">
-				<van-field name="stepper" label="物品重量(KG)">
-				  <template #input>
-				    <van-stepper v-model="stepper" />
-				  </template>
-				</van-field>
-			</div>
-			<div class="price">
-				<p>12<span>元</span></p>
-				<p>运费预估</p>
-			</div>
-			<p style="font-size: .24rem;color: #999;margin: .2rem 0rem 1rem;">此价格为官方指导价，不包含增值服务费</p>
-			<div class="btn">
-				<van-button color="#00c4b8">立即寄件</van-button>
-			</div>
-		</div>
-	</div>
+  <div class="bg" style="">
+    <back :title="titlename"></back>
+    <div class="content">
+      <div class="add">
+        <van-field
+          v-model="jjadd"
+          type="text"
+          name="寄"
+          label="寄"
+          placeholder="选择寄件城市"
+        />
+        <van-field
+          v-model="sjadd"
+          class="shou"
+          type="text"
+          name="收"
+          label="收"
+          placeholder="选择收件城市"
+        />
+      </div>
+      <div class="kdshow">
+        <van-field
+          readonly
+          clickable
+          name="picker"
+          :value="value"
+          label="快递公司"
+          placeholder="请选择快递公司"
+          @click="showPicker = true"
+        />
+        <van-popup v-model="showPicker" position="bottom">
+          <van-picker
+            show-toolbar
+            :columns="columns"
+            @confirm="onConfirm"
+            @cancel="showPicker = false"
+          />
+        </van-popup>
+      </div>
+      <div class="steps">
+        <van-field name="stepper" label="物品重量(KG)">
+          <template #input>
+            <van-stepper v-model="stepper" />
+          </template>
+        </van-field>
+      </div>
+      <div class="price">
+        <p>12<span>元</span></p>
+        <p>运费预估</p>
+      </div>
+      <p style="font-size: .24rem;color: #999;margin: .2rem 0rem 1rem;">
+        此价格为官方指导价，不包含增值服务费
+      </p>
+      <div class="btn">
+        <van-button color="#0c2469">立即寄件</van-button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				titlename: "运费时效",
-				jjadd:"",
-				sjadd:"",
-				stepper: 1,
-				showPicker:false,
-				value:"",
-				columns:["顺丰快递","中通快递","圆通快递"],
-			}
-		},
-		methods:{
-			// 选择快递公司
-			onConfirm(e){
-				this.value=e
-				this.showPicker=false
-			}
-		}
-	}
+export default {
+  data() {
+    return {
+      titlename: "运费时效",
+      jjadd: "",
+      sjadd: "",
+      stepper: 1,
+      showPicker: false,
+      value: "",
+      columns: ["顺丰快递", "中通快递", "圆通快递"]
+    };
+  },
+  methods: {
+    // 选择快递公司
+    onConfirm(e) {
+      this.value = e;
+      this.showPicker = false;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
-	.bg{
-		background: url(../assets/images/bg.png) no-repeat bottom;
-		background-size: 100%;
-		min-height: 100vh;
-	}
-	.content {
-		padding: .2rem .33rem;
-		font-size: .3rem;
-		border-radius: .05rem;
-		.add{
-			/deep/.shou{
-				div:nth-of-type(1){
-					span{
-						background:#fa9c22 !important
-					}
-				}
-			}
-			>div:nth-of-type(1){
-				border-bottom: .01rem solid #ededed;
-			}
-			>div:nth-of-type(2){
-				
-			}
-			/deep/.van-field{
-				padding: .3rem 16px;
-				.van-field__label{
-					width: auto;
-					span{
-						width:.5rem;
-						height: .5rem;
-						border-radius: 50%;
-						color: white;
-						display: inline-block;
-						text-align: center;
-						line-height: .5rem;
-					}
-				}
-				.van-field__value{
-					.van-field__body{
-						input{
-							height: .5rem;
-						}
-					}
-				}
-				div:nth-of-type(1){
-					span{
-						background:#00c4b8
-					}
-				}
-				
-			}
-			/deep/.van-field:after{
-				content: "";
-				display: inline-block;
-				border-right: .01rem solid #b0b0b0;
-				border-bottom: .01rem solid #b0b0b0;
-				transform: rotate(-45deg);
-				left: unset;
-				position: absolute;
-				right: 16px;
-				bottom: .45rem;
-				width: .2rem;
-				height: .2rem;
-			}
-		}
-	    .steps{
-			margin-top: .2rem;
-			border-radius: .05rem;
-			padding: .3rem 0rem;
-			background: white;
-			/deep/.van-field{
-				display: block;
-				overflow: unset;
-				padding: 0rem 16px;
-				.van-field__label{
-					width: 100%;
-					text-align: center;
-					color: #999999;
-					font-size: .3rem;
-					font-weight: bold;
-				}
-				.van-field__value{
-					margin-top: .4rem;
-					.van-field__body{
-						.van-field__control--custom{
-							.van-stepper{
-								margin: 0 auto;
-								.van-stepper__minus{
-									border-radius: 50%;
-									color: #006094;
-									background: white;
-									border: .01rem solid #dcdcdc;
-									width: .38rem;
-									height: .38rem;
-								}
-								input{
-									color: #172880;
-									font-size: .54rem;
-									background: white;
-									width: 2rem;
-								}
-								.van-stepper__plus{
-									border-radius: 50%;
-									color: #006094;
-									background: white;
-									border: .01rem solid #dcdcdc;
-									width: .38rem;
-									height: .38rem;
-								}
-							}
-						}
-					}
-				}
-			}
-		}
-	    .price{
-			font-size: .3rem;
-			padding: .3rem 16px;
-			background: white;
-			border-radius: .05rem;
-			margin-top: .2rem;
-			text-align: center;
-			p:nth-of-type(1){
-				color: #172880;
-				font-size: .54rem;
-				margin-bottom: .2rem;
-				span{
-					font-size: .3rem;
-					color: #999
-				}
-			}
-			p:nth-of-type(2){
-				color: #999999;
-				font-size: .24rem;
-			}
-		}
-		.btn{
-			margin-top: .2rem;
-			/deep/.van-button{				
-				width:100%
-			}
-		}
-		.kdshow{
-			font-size: .3rem;
-			padding: .3rem 16px;
-			background: white;
-			border-radius: .05rem;
-			margin-top: .2rem;
-			/deep/.van-cell{
-				padding: 0px;
-				overflow: unset;
-				input{
-					text-align: right;
-					height: .5rem;
-					padding-right: .25rem;
-				}
-			}
-			/deep/.van-cell::after{
-				content: "";
-				display: inline-block;
-				border-right: .01rem solid #b0b0b0;
-				border-bottom: .01rem solid #b0b0b0;
-				transform: rotate(-45deg);
-				left: unset;
-				position: absolute;
-				right: 0px;
-				bottom: .15rem;
-				width: .2rem;
-				height: .2rem;
-			}
-		}
-	}
+.bg {
+  background: url(../assets/images/bg.png) no-repeat bottom;
+  background-size: 100%;
+  min-height: 100vh;
+}
+.content {
+  padding: 0.2rem 0.33rem;
+  font-size: 0.3rem;
+  border-radius: 0.05rem;
+  .add {
+    /deep/.shou {
+      div:nth-of-type(1) {
+        span {
+          background: #fa9c22 !important;
+        }
+      }
+    }
+    > div:nth-of-type(1) {
+      border-bottom: 0.01rem solid #ededed;
+    }
+    > div:nth-of-type(2) {
+    }
+    /deep/.van-field {
+      padding: 0.3rem 16px;
+      .van-field__label {
+        width: auto;
+        span {
+          width: 0.5rem;
+          height: 0.5rem;
+          border-radius: 50%;
+          color: white;
+          display: inline-block;
+          text-align: center;
+          line-height: 0.5rem;
+        }
+      }
+      .van-field__value {
+        .van-field__body {
+          input {
+            height: 0.5rem;
+          }
+        }
+      }
+      div:nth-of-type(1) {
+        span {
+          background: #0c2469;
+        }
+      }
+    }
+    /deep/.van-field:after {
+      content: "";
+      display: inline-block;
+      border-right: 0.01rem solid #b0b0b0;
+      border-bottom: 0.01rem solid #b0b0b0;
+      transform: rotate(-45deg);
+      left: unset;
+      position: absolute;
+      right: 16px;
+      bottom: 0.45rem;
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+  }
+  .steps {
+    margin-top: 0.2rem;
+    border-radius: 0.05rem;
+    padding: 0.3rem 0rem;
+    background: white;
+    /deep/.van-field {
+      display: block;
+      overflow: unset;
+      padding: 0rem 16px;
+      .van-field__label {
+        width: 100%;
+        text-align: center;
+        color: #999999;
+        font-size: 0.3rem;
+        font-weight: bold;
+      }
+      .van-field__value {
+        margin-top: 0.4rem;
+        .van-field__body {
+          .van-field__control--custom {
+            .van-stepper {
+              margin: 0 auto;
+              .van-stepper__minus {
+                border-radius: 50%;
+                color: #006094;
+                background: white;
+                border: 0.01rem solid #dcdcdc;
+                width: 0.38rem;
+                height: 0.38rem;
+              }
+              input {
+                color: #172880;
+                font-size: 0.54rem;
+                background: white;
+                width: 2rem;
+              }
+              .van-stepper__plus {
+                border-radius: 50%;
+                color: #006094;
+                background: white;
+                border: 0.01rem solid #dcdcdc;
+                width: 0.38rem;
+                height: 0.38rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .price {
+    font-size: 0.3rem;
+    padding: 0.3rem 16px;
+    background: white;
+    border-radius: 0.05rem;
+    margin-top: 0.2rem;
+    text-align: center;
+    p:nth-of-type(1) {
+      color: #172880;
+      font-size: 0.54rem;
+      margin-bottom: 0.2rem;
+      span {
+        font-size: 0.3rem;
+        color: #999;
+      }
+    }
+    p:nth-of-type(2) {
+      color: #999999;
+      font-size: 0.24rem;
+    }
+  }
+  .btn {
+    margin-top: 0.2rem;
+    /deep/.van-button {
+      width: 100%;
+    }
+  }
+  .kdshow {
+    font-size: 0.3rem;
+    padding: 0.3rem 16px;
+    background: white;
+    border-radius: 0.05rem;
+    margin-top: 0.2rem;
+    /deep/.van-cell {
+      padding: 0px;
+      overflow: unset;
+      input {
+        text-align: right;
+        height: 0.5rem;
+        padding-right: 0.25rem;
+      }
+    }
+    /deep/.van-cell::after {
+      content: "";
+      display: inline-block;
+      border-right: 0.01rem solid #b0b0b0;
+      border-bottom: 0.01rem solid #b0b0b0;
+      transform: rotate(-45deg);
+      left: unset;
+      position: absolute;
+      right: 0px;
+      bottom: 0.15rem;
+      width: 0.2rem;
+      height: 0.2rem;
+    }
+  }
+}
 </style>

src/pages/wxsm.vue

@@ -1,65 +1,66 @@
 <template>
-	<div class="content">
-		<back :title="titlename"></back>
-		<div class="body">
-			<div class="dh">
-				<p>快递单号：<span>123224443</span><span style="color: #00c4b8;padding-left: .1rem;">复制单号</span></p>
-			</div>			
-			<div class="qrcode" ref="qrCodeUrl"></div>		
-		</div>
-	</div>
+  <div class="content">
+    <back :title="titlename"></back>
+    <div class="body">
+      <div class="dh">
+        <p>
+          快递单号：<span>123224443</span
+          ><span style="color: #0c2469;padding-left: .1rem;">复制单号</span>
+        </p>
+      </div>
+      <div class="qrcode" ref="qrCodeUrl"></div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import QRCode from 'qrcodejs2'
-	export default{
-		data(){
-			return{
-				titlename:"扫码"
-			}
-		},
-		created:function(){
-			this.isLogin();
-		},
-		methods:{
-			 creatQrCode() {
-			        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
-			            text: 'www.baidu.com', // 需要转换为二维码的内容
-			            width: 150,
-			            height: 150,
-			            colorDark: '#000000',
-			            colorLight: '#ffffff',
-			            correctLevel: QRCode.CorrectLevel.H
-			        })
-			 },
-		},
-		mounted:function(){
-			this.creatQrCode()
-		}
-	}
+import QRCode from "qrcodejs2";
+export default {
+  data() {
+    return {
+      titlename: "扫码"
+    };
+  },
+  created: function() {
+    this.isLogin();
+  },
+  methods: {
+    creatQrCode() {
+      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
+        text: "www.baidu.com", // 需要转换为二维码的内容
+        width: 150,
+        height: 150,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H
+      });
+    }
+  },
+  mounted: function() {
+    this.creatQrCode();
+  }
+};
 </script>
 <style scoped lang="less">
-	.content{
-		.body{
-			font-size: .3rem;
-			padding: .37rem;
-			.dh{
-				background: white;
-				padding-top: .3rem;
-				text-align: center;
-			}
-			/deep/.qrcode{
-				background: white;
-			    display: inline-block;
-				width: 100%;
-				text-align: center;
-				padding: .3rem 0rem;
-			    img{
-			       margin: 0 auto; 
-			        
-			    }
-			}
-		}
-		
-	}
+.content {
+  .body {
+    font-size: 0.3rem;
+    padding: 0.37rem;
+    .dh {
+      background: white;
+      padding-top: 0.3rem;
+      text-align: center;
+    }
+    /deep/.qrcode {
+      background: white;
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+      padding: 0.3rem 0rem;
+      img {
+        margin: 0 auto;
+      }
+    }
+  }
+}
 </style>

src/pages_bak/addressbook.vue

@@ -1,289 +1,304 @@
 <template>
-	<div class="content">
-		<!-- table切换 -->
-		<div class="tab">
-			<div>
-				<p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
-				<p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">收件人</p>
-			</div>
-		</div>
-		<!-- 寄件人 -->
-		<div v-if="index == 1">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLink(item)">
-							<p>寄</p>
-							<div>
-								<p>{{ item.name }} {{ item.phone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p>
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p>
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button @click="link(1)" type="info" color="#00c4b8">添加寄件人</van-button>
-			</div>
-		</div>
+  <div class="content">
+    <!-- table切换 -->
+    <div class="tab">
+      <div>
+        <p @click="tab(1)" :class="[index == 1 ? 'active' : '']">寄件人</p>
+        <p @click="tab(2)" :class="[index == 2 ? 'active' : '']" class="">
+          收件人
+        </p>
+      </div>
+    </div>
+    <!-- 寄件人 -->
+    <div v-if="index == 1">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLink(item)">
+              <p>寄</p>
+              <div>
+                <p>{{ item.name }} {{ item.phone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p>
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p>
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button @click="link(1)" type="info" color="#0c2469"
+          >添加寄件人</van-button
+        >
+      </div>
+    </div>
 
-		<!-- 收件人 -->
-		<div v-if="index == 2">
-			<div class="jjinfo" v-for="item in addressList">
-				<div>
-					<div class="jj">
-						<div class="jjaddress" @click="adressLinkSj(item)">
-							<p style="background: #fa9c22;">收</p>
-							<div>
-								<p>{{ item.name }} {{ item.phone }}</p>
-								<p>{{ item.provinceAndCity }} {{ item.address }}</p>
-							</div>
-						</div>
-						<div class="cz">
-							<p @click="del(item.id)">
-								<img src="../assets/images/del.png" alt="">
-								<span>删除</span>
-							</p>
-							<p>
-								<img src="../assets/images/whrite.png" alt="">
-								<span>编辑</span>
-							</p>
-							<p>
-								<img src="../assets/images/copy.png" alt="">
-								<span>复制</span>
-							</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			<!-- 寄件 -->
-			<div class="btn-jj">
-				<van-button type="info" @click="link(2)" color="#fa9c22">添加收件人</van-button>
-			</div>
-		</div>
-	</div>
+    <!-- 收件人 -->
+    <div v-if="index == 2">
+      <div class="jjinfo" v-for="item in addressList">
+        <div>
+          <div class="jj">
+            <div class="jjaddress" @click="adressLinkSj(item)">
+              <p style="background: #fa9c22;">收</p>
+              <div>
+                <p>{{ item.name }} {{ item.phone }}</p>
+                <p>{{ item.provinceAndCity }} {{ item.address }}</p>
+              </div>
+            </div>
+            <div class="cz">
+              <p @click="del(item.id)">
+                <img src="../assets/images/del.png" alt="" />
+                <span>删除</span>
+              </p>
+              <p>
+                <img src="../assets/images/whrite.png" alt="" />
+                <span>编辑</span>
+              </p>
+              <p>
+                <img src="../assets/images/copy.png" alt="" />
+                <span>复制</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 寄件 -->
+      <div class="btn-jj">
+        <van-button type="info" @click="link(2)" color="#fa9c22"
+          >添加收件人</van-button
+        >
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
-import { Toast, Dialog } from 'vant'
+import { Toast, Dialog } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "地址簿",
-			index: 1,
-			openid: '',
-			addressList: []
-		}
-	},
-	created: function () {
-		this.openid = this.$store.state.openId
-		//获取参数
-		this.index = this.$route.query.active
-		this.getData();
-	},
-	methods: {
-		tab(obj) {
-			this.index = obj
-			this.getData()
-		},
-		link(obj) {
-			this.$router.push({ path: "/Newaddress", query: { type: obj } })
-		},
-		getData() {
-			Toast.loading({
-				message: '加载中...',
-				forbidClick: true,
-				duration: 0
-			});
-			this.$http.post(this.$store.state.host + "/personal/getAddressList.do", { user_id: this.openid, type: this.index }, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						this.addressList = res.body.addressList
-					}
-					Toast.clear()
-				}, res => {
-					//发送失败
-					Toast("网络错误!")
-				})
-			Toast.clear()
-		},
-		del(id) {
-			Dialog.confirm({ title: '', message: '确定删除吗', })
-				.then(() => {
-					Toast.loading({
-						message: '删除中...',
-						forbidClick: true,
-						duration: 0
-					});
-					this.$http.post(this.$store.state.host + "/personal/deleteAddressInfoById.do", { id: id }, { emulateJSON: true })
-						.then(res => {
-							//发送成功
-							if (res.body.msg == 'success') {
-								this.getData()
-							} else {
-								Toast("删除失败!")
-							}
-							Toast.clear()
-						}, res => {
-							//发送失败
-							Toast("网络错误!")
-						})
-					Toast.clear()
-				})
-				.catch(() => {
-					//  on cancel 
-				})
-		},
-		adressLink(item) {
-			let jjInfo = {}
-			jjInfo.jjname = item.name + ' ' + item.phone
-			jjInfo.jjadd = item.provinceAndCity + ' ' + item.address
-			this.$store.commit("getJjInfo", jjInfo)
-			this.$router.push({ path: "/Express" })
-		},
-		adressLinkSj(item) {
-			let sjInfo = {}
-			sjInfo.jjname = item.name + ' ' + item.phone
-			sjInfo.jjadd = item.provinceAndCity + ' ' + item.address
-			this.$store.commit("getSjInfo", sjInfo)
-			this.$router.push({ path: "/Express" })
-		}
-	},
-	computed: {
-
-	}
-}
+  data() {
+    return {
+      titlename: "地址簿",
+      index: 1,
+      openid: "",
+      addressList: []
+    };
+  },
+  created: function() {
+    this.openid = this.$store.state.openId;
+    //获取参数
+    this.index = this.$route.query.active;
+    this.getData();
+  },
+  methods: {
+    tab(obj) {
+      this.index = obj;
+      this.getData();
+    },
+    link(obj) {
+      this.$router.push({ path: "/Newaddress", query: { type: obj } });
+    },
+    getData() {
+      Toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+        duration: 0
+      });
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/getAddressList.do",
+          { user_id: this.openid, type: this.index },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              this.addressList = res.body.addressList;
+            }
+            Toast.clear();
+          },
+          res => {
+            //发送失败
+            Toast("网络错误!");
+          }
+        );
+      Toast.clear();
+    },
+    del(id) {
+      Dialog.confirm({ title: "", message: "确定删除吗" })
+        .then(() => {
+          Toast.loading({
+            message: "删除中...",
+            forbidClick: true,
+            duration: 0
+          });
+          this.$http
+            .post(
+              this.$store.state.host + "/personal/deleteAddressInfoById.do",
+              { id: id },
+              { emulateJSON: true }
+            )
+            .then(
+              res => {
+                //发送成功
+                if (res.body.msg == "success") {
+                  this.getData();
+                } else {
+                  Toast("删除失败!");
+                }
+                Toast.clear();
+              },
+              res => {
+                //发送失败
+                Toast("网络错误!");
+              }
+            );
+          Toast.clear();
+        })
+        .catch(() => {
+          //  on cancel
+        });
+    },
+    adressLink(item) {
+      let jjInfo = {};
+      jjInfo.jjname = item.name + " " + item.phone;
+      jjInfo.jjadd = item.provinceAndCity + " " + item.address;
+      this.$store.commit("getJjInfo", jjInfo);
+      this.$router.push({ path: "/Express" });
+    },
+    adressLinkSj(item) {
+      let sjInfo = {};
+      sjInfo.jjname = item.name + " " + item.phone;
+      sjInfo.jjadd = item.provinceAndCity + " " + item.address;
+      this.$store.commit("getSjInfo", sjInfo);
+      this.$router.push({ path: "/Express" });
+    }
+  },
+  computed: {}
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	.tab {
-		font-size: .36rem;
-		color: #00c4b8;
-		padding: .33rem;
-
-		div {
-			display: flex;
-			border: .01rem solid #00c4b8;
-			text-align: center;
-			border-radius: .05rem;
-
-			p {
-				flex: 1;
-				padding: .1rem 0rem;
-			}
-
-			p.active {
-				background: #00c4b8;
-				color: white;
-			}
-		}
-
-	}
-
-	.jjinfo {
-		font-size: .36rem;
-		color: #999999;
-		padding: .0rem .33rem 0.33rem;
+  .tab {
+    font-size: 0.36rem;
+    color: #0c2469;
+    padding: 0.33rem;
 
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
+    div {
+      display: flex;
+      border: 0.01rem solid #0c2469;
+      text-align: center;
+      border-radius: 0.05rem;
 
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-				flex-wrap: wrap;
+      p {
+        flex: 1;
+        padding: 0.1rem 0rem;
+      }
 
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem .2rem;
+      p.active {
+        background: #0c2469;
+        color: white;
+      }
+    }
+  }
 
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
+  .jjinfo {
+    font-size: 0.36rem;
+    color: #999999;
+    padding: 0rem 0.33rem 0.33rem;
 
-					div {
-						//font-weight: bold;
-						max-width: 4.2rem;
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
 
-						p:nth-of-type(1) {
-							font-size: .3rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+        flex-wrap: wrap;
 
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem 0.2rem;
 
-				.cz {
-					border-top: .01rem solid #ededed;
-					width: 100%;
-					display: flex;
-					flex-direction: row-reverse;
-					font-size: .24rem;
-					color: #999999;
-					padding-top: .2rem;
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
 
-					p {
-						margin-left: .2rem;
+          div {
+            //font-weight: bold;
+            max-width: 4.2rem;
 
-						img {
-							width: .22rem;
-							height: .24rem;
-						}
+            p:nth-of-type(1) {
+              font-size: 0.3rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
 
-						span {
-							position: relative;
-							top: -.01rem;
-						}
-					}
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
 
-				}
-			}
-		}
+        .cz {
+          border-top: 0.01rem solid #ededed;
+          width: 100%;
+          display: flex;
+          flex-direction: row-reverse;
+          font-size: 0.24rem;
+          color: #999999;
+          padding-top: 0.2rem;
 
-	}
+          p {
+            margin-left: 0.2rem;
 
+            img {
+              width: 0.22rem;
+              height: 0.24rem;
+            }
 
+            span {
+              position: relative;
+              top: -0.01rem;
+            }
+          }
+        }
+      }
+    }
+  }
 
-	.btn-jj {
-		padding: .33rem;
+  .btn-jj {
+    padding: 0.33rem;
 
-		button {
-			width: 100%;
-		}
-	}
+    button {
+      width: 100%;
+    }
+  }
 }
 </style>

src/pages_bak/cityexpress.vue

@@ -1,432 +1,494 @@
 <template>
-	<div class="content">
-
-		<!-- 寄件地址 -->
-		<div class="jjinfo">
-			<div>
-				<div class="jj">
-					<div class="jjaddress">
-						<p>寄</p>
-						<div>
-							<p v-if="jjname == '' || jjname == ' '">寄件地址</p>
-							<p v-else>{{ jjname }}</p>
-							<p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">填写寄件地址</p>
-							<p v-else @click="addtype(1)">{{ jjadd }}</p>
-						</div>
-					</div>
-					<div class="dzb">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-				<div class="jj" style="border-top:.01rem solid #ededed">
-					<div class="jjaddress">
-						<p style="background: #fa9c22;">收</p>
-						<div>
-							<p v-if="sjname == '' || sjname == ' '">寄件地址</p>
-							<p v-else>{{ sjname }}</p>
-							<p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">填写收件地址</p>
-							<p v-else @click="addtype(2)">{{ sjadd }}</p>
-						</div>
-					</div>
-					<div class="dzb">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-			</div>
-
-		</div>
-		<!-- 取件时长 -->
-		<div class="bz">
-			<div>
-				<van-field v-model="time" name="取件时长" label="取件时长" @click="timeshow = true" placeholder="请选择" />
-			</div>
-		</div>
-		<!-- 寄件属性 -->
-		<div class="choose">
-			<div>
-				<div class="type_wp">
-					<div>
-						<p>物品类型</p>
-						<p v-if="wptype == ''" @click="wpshow = true">请选择</p>
-						<p v-else @click="wpshow = true">{{ wptype }}</p>
-					</div>
-					<div>
-						<p>重量</p>
-						<p>一件</p>
-					</div>
-				</div>
-				<div class="type_price">
-					<div>
-						<p>付款方式</p>
-						<p v-if="pricetype == ''" @click="priceshow = true">请选择</p>
-						<p v-else @click="priceshow = true">{{ pricetype }}</p>
-					</div>
-					<div>
-						<p>声明价值</p>
-						<p>0元</p>
-					</div>
-				</div>
-			</div>
-		</div>
-
-		<!-- 我同意 -->
-		<div class="check">
-			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
-		</div>
-		<!-- 寄件 -->
-		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">立即寄件</van-button>
-		</div>
-		<!-- 弹窗物品类型 -->
-		<van-popup v-model="wpshow" position="bottom">
-			<van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow = false" />
-		</van-popup>
-		<!-- 弹窗付款方式 -->
-		<van-popup v-model="priceshow" position="bottom">
-			<van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2"
-				@cancel="priceshow = false" />
-		</van-popup>
-		<!-- 填写地址 -->
-		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{ title }}</p>
-				<van-form @submit="onSubmit">
-					<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" />
-					<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机" />
-					<van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
-						@click="areashow = true" />
-					<van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址" />
-					<div style="margin-top: 16px;">
-						<van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-					</div>
-				</van-form>
-			</div>
-		</van-popup>
-		<!-- 城市选择 -->
-		<van-popup v-model="areashow" position="bottom">
-			<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-		</van-popup>
-		<!-- 取件时长 -->
-		<van-popup v-model="timeshow" position="bottom">
-			<van-picker title="取件时长" show-toolbar :columns="timelist" @confirm="onConfirm4" @cancel="timeshow = false" />
-		</van-popup>
-	</div>
+  <div class="content">
+    <!-- 寄件地址 -->
+    <div class="jjinfo">
+      <div>
+        <div class="jj">
+          <div class="jjaddress">
+            <p>寄</p>
+            <div>
+              <p v-if="jjname == '' || jjname == ' '">寄件地址</p>
+              <p v-else>{{ jjname }}</p>
+              <p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">
+                填写寄件地址
+              </p>
+              <p v-else @click="addtype(1)">{{ jjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+        <div class="jj" style="border-top:.01rem solid #ededed">
+          <div class="jjaddress">
+            <p style="background: #fa9c22;">收</p>
+            <div>
+              <p v-if="sjname == '' || sjname == ' '">寄件地址</p>
+              <p v-else>{{ sjname }}</p>
+              <p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">
+                填写收件地址
+              </p>
+              <p v-else @click="addtype(2)">{{ sjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 取件时长 -->
+    <div class="bz">
+      <div>
+        <van-field
+          v-model="time"
+          name="取件时长"
+          label="取件时长"
+          @click="timeshow = true"
+          placeholder="请选择"
+        />
+      </div>
+    </div>
+    <!-- 寄件属性 -->
+    <div class="choose">
+      <div>
+        <div class="type_wp">
+          <div>
+            <p>物品类型</p>
+            <p v-if="wptype == ''" @click="wpshow = true">请选择</p>
+            <p v-else @click="wpshow = true">{{ wptype }}</p>
+          </div>
+          <div>
+            <p>重量</p>
+            <p>一件</p>
+          </div>
+        </div>
+        <div class="type_price">
+          <div>
+            <p>付款方式</p>
+            <p v-if="pricetype == ''" @click="priceshow = true">请选择</p>
+            <p v-else @click="priceshow = true">{{ pricetype }}</p>
+          </div>
+          <div>
+            <p>声明价值</p>
+            <p>0元</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 我同意 -->
+    <div class="check">
+      <van-checkbox icon-size=".24rem" v-model="check" shape=""
+        >我同意《电子运单契约条款》</van-checkbox
+      >
+    </div>
+    <!-- 寄件 -->
+    <div class="btn-jj">
+      <van-button type="info" color="#0c2469">立即寄件</van-button>
+    </div>
+    <!-- 弹窗物品类型 -->
+    <van-popup v-model="wpshow" position="bottom">
+      <van-picker
+        title="物品类型"
+        show-toolbar
+        :columns="wplist"
+        @confirm="onConfirm1"
+        @cancel="wpshow = false"
+      />
+    </van-popup>
+    <!-- 弹窗付款方式 -->
+    <van-popup v-model="priceshow" position="bottom">
+      <van-picker
+        title="付款方式"
+        show-toolbar
+        :columns="pricelist"
+        @confirm="onConfirm2"
+        @cancel="priceshow = false"
+      />
+    </van-popup>
+    <!-- 填写地址 -->
+    <van-popup
+      round
+      v-model="addshow"
+      class="whrite_add"
+      closeable
+      closed="close"
+    >
+      <div>
+        <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">
+          {{ title }}
+        </p>
+        <van-form @submit="onSubmit">
+          <van-field
+            v-model="name"
+            name="姓名"
+            label="姓名"
+            placeholder="请输入姓名"
+          />
+          <van-field
+            v-model="phone"
+            maxlength="11"
+            type="number"
+            name="手机"
+            label="手机"
+            placeholder="请输入手机"
+          />
+          <van-field
+            readonly
+            clickable
+            name="area"
+            :value="city"
+            label="省市区"
+            placeholder="请选择省市区"
+            @click="areashow = true"
+          />
+          <van-field
+            v-model="address"
+            name="详细地址"
+            label="详细地址"
+            placeholder="请输入详细地址"
+          />
+          <div style="margin-top: 16px;">
+            <van-button color="#0c2469" block type="info" native-type="submit"
+              >确定</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </van-popup>
+    <!-- 城市选择 -->
+    <van-popup v-model="areashow" position="bottom">
+      <van-area
+        :area-list="areaList"
+        @confirm="onConfirm3"
+        @cancel="areashow = false"
+      />
+    </van-popup>
+    <!-- 取件时长 -->
+    <van-popup v-model="timeshow" position="bottom">
+      <van-picker
+        title="取件时长"
+        show-toolbar
+        :columns="timelist"
+        @confirm="onConfirm4"
+        @cancel="timeshow = false"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script>
-import areaList from "@/script/areas.js"
+import areaList from "@/script/areas.js";
 export default {
-	data() {
-		return {
-			titlename: "同城急送",
-			wptype: "",//物品类型
-			wpshow: false,//物品类型弹窗显示
-			wplist: ["物品1", "物品二"],
-			pricetype: "",//付款类型
-			priceshow: false,//付款类型弹窗显示
-			pricelist: ["月结", "日结", "到付"],
-			addshow: false,
-			name: "",
-			phone: "",
-			city: "",
-			address: "",
-			areashow: false,
-			index: "",
-			title: "",
-			jjname: "",
-			jjadd: "",
-			sjname: "",
-			sjadd: "",
-			check: false,
-			time: "",
-			timeshow: false,
-			timelist: ["一小时内", "一天内"]
-		}
-	},
-	created: function () {
-		//this.areaList=area.areaList
-	},
-	methods: {
-		// 选择物品确定
-		onConfirm1(e) {//确定
-			this.wptype = e
-			this.wpshow = false
-			console.log(e)
-		},
-		// 选择付款方式确定
-		onConfirm2(e) {//确定
-			this.pricetype = e
-			this.priceshow = false
-			console.log(e)
-		},
-		// 填写地址确定
-		onConfirm3(e) {//确定
-			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-			this.areashow = false
-			console.log(e)
-		},
-		// 取件时长
-		onConfirm4(e) {//确定
-
-			this.time = e
-
-			this.timeshow = false
-
-			console.log(e)
-
-		},
-
-		// 寄件地址1与收件地址2
-		addtype(obj) {
-			this.index = obj
-			if (obj == 1) {
-				this.title = "寄件地址"
-			}
-			if (obj == 2) {
-				this.title = "收件地址"
-			}
-			this.addshow = true
-		},
-		// 填写地址确定
-		onSubmit() {
-			if (this.index == 1) {
-				this.jjname = this.name + ' ' + this.phone
-				this.jjadd = this.city + ' ' + this.address
-			}
-			if (this.index == 2) {
-				this.sjname = this.name + ' ' + this.phone
-				this.sjadd = this.city + ' ' + this.address
-			}
-			this.addshow = false
-			this.name = ""
-			this.phone = ""
-			this.city = ""
-			this.address = ""
-		},
-		close() {
-			this.name = ""
-			this.phone = ""
-			this.city = ""
-			this.address = ""
-		},
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+  data() {
+    return {
+      titlename: "同城急送",
+      wptype: "", //物品类型
+      wpshow: false, //物品类型弹窗显示
+      wplist: ["物品1", "物品二"],
+      pricetype: "", //付款类型
+      priceshow: false, //付款类型弹窗显示
+      pricelist: ["月结", "日结", "到付"],
+      addshow: false,
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      index: "",
+      title: "",
+      jjname: "",
+      jjadd: "",
+      sjname: "",
+      sjadd: "",
+      check: false,
+      time: "",
+      timeshow: false,
+      timelist: ["一小时内", "一天内"]
+    };
+  },
+  created: function() {
+    //this.areaList=area.areaList
+  },
+  methods: {
+    // 选择物品确定
+    onConfirm1(e) {
+      //确定
+      this.wptype = e;
+      this.wpshow = false;
+      console.log(e);
+    },
+    // 选择付款方式确定
+    onConfirm2(e) {
+      //确定
+      this.pricetype = e;
+      this.priceshow = false;
+      console.log(e);
+    },
+    // 填写地址确定
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    },
+    // 取件时长
+    onConfirm4(e) {
+      //确定
+
+      this.time = e;
+
+      this.timeshow = false;
+
+      console.log(e);
+    },
+
+    // 寄件地址1与收件地址2
+    addtype(obj) {
+      this.index = obj;
+      if (obj == 1) {
+        this.title = "寄件地址";
+      }
+      if (obj == 2) {
+        this.title = "收件地址";
+      }
+      this.addshow = true;
+    },
+    // 填写地址确定
+    onSubmit() {
+      if (this.index == 1) {
+        this.jjname = this.name + " " + this.phone;
+        this.jjadd = this.city + " " + this.address;
+      }
+      if (this.index == 2) {
+        this.sjname = this.name + " " + this.phone;
+        this.sjadd = this.city + " " + this.address;
+      }
+      this.addshow = false;
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    close() {
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	.jjinfo {
-		font-size: .24rem;
-		color: #999999;
-		padding: .33rem;
-
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
-
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem;
-
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
-
-					div {
-						//font-weight: bold;
-						max-width: 4.2rem;
-
-						p:nth-of-type(1) {
-							font-size: .24rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
-
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
-
-				.dzb {
-					text-align: center;
-					border-left: .01rem solid #ededed;
-					padding-left: .3rem;
-
-					img {
-						width: .39rem;
-						height: .42rem;
-						padding-top: .2rem;
-					}
-
-					p {
-						font-size: .2rem;
-					}
-
-				}
-			}
-		}
-
-	}
-
-	.choose {
-		font-size: .3rem;
-		color: #999999;
-		font-weight: bold;
-		padding: 0.33rem .33rem;
-
-		>div {
-			background: white;
-
-			padding: .3rem .3rem;
-			border-radius: .05rem;
-
-			.type_wp {
-				display: flex;
-				justify-content: center;
-
-				div {
-					flex: 1;
-					text-align: center;
-
-					p:nth-of-type(2) {
-						color: #333;
-						margin-top: .2rem;
-						font-size: .36rem;
-						//position: relative;
-					}
-
-				}
-
-				div:nth-of-type(1) {
-					border-right: .01rem solid #ededed;
-
-					p:nth-of-type(2):after {
-						content: "";
-						display: inline-block;
-						width: .15rem;
-						height: .15rem;
-						border-bottom: .01rem solid #999;
-						border-right: .01rem solid #999;
-						transform: rotate(45deg);
-						margin-left: .15rem;
-						position: relative;
-						top: -.08rem;
-					}
-				}
-			}
-
-			.type_price {
-				display: flex;
-				justify-content: center;
-				border-top: .01rem solid #ededed;
-				margin-top: .3rem;
-				padding-top: .3rem;
-
-				div {
-					flex: 1;
-					text-align: center;
-
-					p:nth-of-type(2) {
-						color: #333;
-						margin-top: .2rem;
-						font-size: .36rem;
-					}
-				}
-
-				div:nth-of-type(1) {
-					border-right: .01rem solid #ededed;
-
-					p:nth-of-type(2):after {
-						content: "";
-						display: inline-block;
-						width: .15rem;
-						height: .15rem;
-						border-bottom: .01rem solid #999;
-						border-right: .01rem solid #999;
-						transform: rotate(45deg);
-						margin-left: .15rem;
-						position: relative;
-						top: -.08rem;
-					}
-				}
-			}
-		}
-
-	}
-
-	.bz {
-		padding: 0rem .33rem;
-		font-size: .3rem;
-
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
-
-		}
-	}
-
-	.check {
-		font-size: .24rem;
-
-		text-align: center;
-
-		/deep/.van-checkbox {
-			justify-content: center;
-
-			.van-checkbox__label {
-				color: #999;
-			}
-		}
-	}
-
-	.btn-jj {
-		padding: .33rem;
-
-		button {
-			width: 100%;
-		}
-	}
+  .jjinfo {
+    font-size: 0.24rem;
+    color: #999999;
+    padding: 0.33rem;
+
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
+
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem;
+
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
+
+          div {
+            //font-weight: bold;
+            max-width: 4.2rem;
+
+            p:nth-of-type(1) {
+              font-size: 0.24rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
+
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
+
+        .dzb {
+          text-align: center;
+          border-left: 0.01rem solid #ededed;
+          padding-left: 0.3rem;
+
+          img {
+            width: 0.39rem;
+            height: 0.42rem;
+            padding-top: 0.2rem;
+          }
+
+          p {
+            font-size: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+
+  .choose {
+    font-size: 0.3rem;
+    color: #999999;
+    font-weight: bold;
+    padding: 0.33rem 0.33rem;
+
+    > div {
+      background: white;
+
+      padding: 0.3rem 0.3rem;
+      border-radius: 0.05rem;
+
+      .type_wp {
+        display: flex;
+        justify-content: center;
+
+        div {
+          flex: 1;
+          text-align: center;
+
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+            //position: relative;
+          }
+        }
+
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+
+      .type_price {
+        display: flex;
+        justify-content: center;
+        border-top: 0.01rem solid #ededed;
+        margin-top: 0.3rem;
+        padding-top: 0.3rem;
+
+        div {
+          flex: 1;
+          text-align: center;
+
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+          }
+        }
+
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+    }
+  }
+
+  .bz {
+    padding: 0rem 0.33rem;
+    font-size: 0.3rem;
+
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
+
+  .check {
+    font-size: 0.24rem;
+
+    text-align: center;
+
+    /deep/.van-checkbox {
+      justify-content: center;
+
+      .van-checkbox__label {
+        color: #999;
+      }
+    }
+  }
+
+  .btn-jj {
+    padding: 0.33rem;
+
+    button {
+      width: 100%;
+    }
+  }
 }
 
 .whrite_add {
-	width: 6.6rem;
-	padding: .4rem .2rem;
-
-	/deep/.van-field__value {
-		input {
-			text-align: right;
-		}
-
-	}
-
-	/deep/.van-popup__close-icon--top-right {
-		top: 5px;
-		right: 10px;
-	}
+  width: 6.6rem;
+  padding: 0.4rem 0.2rem;
+
+  /deep/.van-field__value {
+    input {
+      text-align: right;
+    }
+  }
+
+  /deep/.van-popup__close-icon--top-right {
+    top: 5px;
+    right: 10px;
+  }
 }
 </style>

src/pages_bak/express.vue

@@ -1,473 +1,528 @@
 <template>
-	<div class="content">
-
-		<!-- 寄件地址 -->
-		<div class="jjinfo">
-			<div>
-				<div class="jj">
-					<div class="jjaddress">
-						<p>寄</p>
-						<div>
-							<p v-if="jjname == '' || jjname == ' '">寄件地址</p>
-							<p v-else>{{ jjname }}</p>
-							<p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">填写寄件地址</p>
-							<p v-else @click="addtype(1)">{{ jjadd }}</p>
-						</div>
-					</div>
-					<div class="dzb" @click="link(1)">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-				<div class="jj" style="border-top:.01rem solid #ededed">
-					<div class="jjaddress">
-						<p style="background: #fa9c22;">收</p>
-						<div>
-							<p v-if="sjname == '' || sjname == ' '">收件地址</p>
-							<p v-else>{{ sjname }}</p>
-							<p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">填写收件地址</p>
-							<p v-else @click="addtype(2)">{{ sjadd }}</p>
-						</div>
-					</div>
-					<div class="dzb" @click="link(2)">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-			</div>
-
-		</div>
-		<!-- 寄件属性 -->
-		<div class="choose">
-			<div>
-				<div class="type_wp">
-					<div>
-						<p>物品类型</p>
-						<p v-if="wptype == ''" @click="wpshow = true">请选择</p>
-						<p v-else @click="wpshow = true">{{ wptype }}</p>
-					</div>
-					<div>
-						<p>重量(公斤)</p>
-						<p>
-							<van-field name="stepper" style="padding: 0px;">
-								<template #input>
-									<van-stepper v-model="stepper"></van-stepper>
-								</template>
-							</van-field>
-						</p>
-					</div>
-				</div>
-				<div class="type_price">
-					<div>
-						<p>付款方式</p>
-						<p v-if="pricetype == ''" @click="priceshow = true">请选择</p>
-						<p v-else @click="priceshow = true">{{ pricetype }}</p>
-					</div>
-					<div>
-						<p>声明价值</p>
-						<p>0元</p>
-					</div>
-				</div>
-			</div>
-		</div>
-		<!-- 备注 -->
-		<div class="bz">
-			<div>
-				<van-field v-model="bz" name="备注" label="备注" placeholder="包装运输等要求" />
-			</div>
-		</div>
-		<!-- 我同意 -->
-		<div class="check">
-			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
-		</div>
-		<!-- 寄件 -->
-		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">立即寄件</van-button>
-		</div>
-		<!-- 弹窗物品类型 -->
-		<van-popup v-model="wpshow" position="bottom">
-			<van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow = false" />
-		</van-popup>
-		<!-- 弹窗付款方式 -->
-		<van-popup v-model="priceshow" position="bottom">
-			<van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2"
-				@cancel="priceshow = false" />
-		</van-popup>
-		<!-- 填写地址 -->
-		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{ title }}</p>
-				<van-form @submit="onSubmit">
-					<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false }]" />
-					<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"
-						:rules="[{ required: false }]" />
-					<van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
-						@click="areashow = true" :rules="[{ required: false }]" />
-					<van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"
-						:rules="[{ required: false }]" />
-					<div style="margin-top: 16px;">
-						<van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-					</div>
-				</van-form>
-			</div>
-
-		</van-popup>
-		<!-- 城市选择 -->
-		<van-popup v-model="areashow" position="bottom">
-			<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-		</van-popup>
-	</div>
+  <div class="content">
+    <!-- 寄件地址 -->
+    <div class="jjinfo">
+      <div>
+        <div class="jj">
+          <div class="jjaddress">
+            <p>寄</p>
+            <div>
+              <p v-if="jjname == '' || jjname == ' '">寄件地址</p>
+              <p v-else>{{ jjname }}</p>
+              <p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">
+                填写寄件地址
+              </p>
+              <p v-else @click="addtype(1)">{{ jjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb" @click="link(1)">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+        <div class="jj" style="border-top:.01rem solid #ededed">
+          <div class="jjaddress">
+            <p style="background: #fa9c22;">收</p>
+            <div>
+              <p v-if="sjname == '' || sjname == ' '">收件地址</p>
+              <p v-else>{{ sjname }}</p>
+              <p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">
+                填写收件地址
+              </p>
+              <p v-else @click="addtype(2)">{{ sjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb" @click="link(2)">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 寄件属性 -->
+    <div class="choose">
+      <div>
+        <div class="type_wp">
+          <div>
+            <p>物品类型</p>
+            <p v-if="wptype == ''" @click="wpshow = true">请选择</p>
+            <p v-else @click="wpshow = true">{{ wptype }}</p>
+          </div>
+          <div>
+            <p>重量(公斤)</p>
+            <p>
+              <van-field name="stepper" style="padding: 0px;">
+                <template #input>
+                  <van-stepper v-model="stepper"></van-stepper>
+                </template>
+              </van-field>
+            </p>
+          </div>
+        </div>
+        <div class="type_price">
+          <div>
+            <p>付款方式</p>
+            <p v-if="pricetype == ''" @click="priceshow = true">请选择</p>
+            <p v-else @click="priceshow = true">{{ pricetype }}</p>
+          </div>
+          <div>
+            <p>声明价值</p>
+            <p>0元</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 备注 -->
+    <div class="bz">
+      <div>
+        <van-field
+          v-model="bz"
+          name="备注"
+          label="备注"
+          placeholder="包装运输等要求"
+        />
+      </div>
+    </div>
+    <!-- 我同意 -->
+    <div class="check">
+      <van-checkbox icon-size=".24rem" v-model="check" shape=""
+        >我同意《电子运单契约条款》</van-checkbox
+      >
+    </div>
+    <!-- 寄件 -->
+    <div class="btn-jj">
+      <van-button type="info" color="#0c2469">立即寄件</van-button>
+    </div>
+    <!-- 弹窗物品类型 -->
+    <van-popup v-model="wpshow" position="bottom">
+      <van-picker
+        title="物品类型"
+        show-toolbar
+        :columns="wplist"
+        @confirm="onConfirm1"
+        @cancel="wpshow = false"
+      />
+    </van-popup>
+    <!-- 弹窗付款方式 -->
+    <van-popup v-model="priceshow" position="bottom">
+      <van-picker
+        title="付款方式"
+        show-toolbar
+        :columns="pricelist"
+        @confirm="onConfirm2"
+        @cancel="priceshow = false"
+      />
+    </van-popup>
+    <!-- 填写地址 -->
+    <van-popup
+      round
+      v-model="addshow"
+      class="whrite_add"
+      closeable
+      closed="close"
+    >
+      <div>
+        <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">
+          {{ title }}
+        </p>
+        <van-form @submit="onSubmit">
+          <van-field
+            v-model="name"
+            name="姓名"
+            label="姓名"
+            placeholder="请输入姓名"
+            :rules="[{ required: false }]"
+          />
+          <van-field
+            v-model="phone"
+            maxlength="11"
+            type="number"
+            name="手机"
+            label="手机"
+            placeholder="请输入手机"
+            :rules="[{ required: false }]"
+          />
+          <van-field
+            readonly
+            clickable
+            name="area"
+            :value="city"
+            label="省市区"
+            placeholder="请选择省市区"
+            @click="areashow = true"
+            :rules="[{ required: false }]"
+          />
+          <van-field
+            v-model="address"
+            name="详细地址"
+            label="详细地址"
+            placeholder="请输入详细地址"
+            :rules="[{ required: false }]"
+          />
+          <div style="margin-top: 16px;">
+            <van-button color="#0c2469" block type="info" native-type="submit"
+              >确定</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </van-popup>
+    <!-- 城市选择 -->
+    <van-popup v-model="areashow" position="bottom">
+      <van-area
+        :area-list="areaList"
+        @confirm="onConfirm3"
+        @cancel="areashow = false"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script>
-import areaList from "@/script/areas.js"
-import { Stepper, Toast } from 'vant';
+import areaList from "@/script/areas.js";
+import { Stepper, Toast } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "寄件",
-			wptype: "",//物品类型
-			wpshow: false,//物品类型弹窗显示
-			wplist: ["日用品", "食品", "文件", "衣物", "数码产品", "其他"],
-			pricetype: "",//付款类型
-			stepper: '',
-			priceshow: false,//付款类型弹窗显示
-			pricelist: ["月结", "日结", "到付"],
-			addshow: false,
-			name: "",
-			phone: "",
-			city: "",
-			address: "",
-			areashow: false,
-			index: "",
-			title: "",
-			jjname: "",
-			jjadd: "",
-			sjname: "",
-			sjadd: "",
-			bz: "",
-			check: false,
-			openid: ''
-		}
-	},
-	created: function () {
-		this.openid = this.$store.state.openId
-
-		//寄件地址
-		if (JSON.stringify(this.$store.state.jjInfo) != '{}') {
-			this.jjname = this.$store.state.jjInfo.jjname
-			this.jjadd = this.$store.state.jjInfo.jjadd
-		}
-
-		//收件地址
-		if (JSON.stringify(this.$store.state.sjInfo) != '{}') {
-			this.sjname = this.$store.state.sjInfo.jjname
-			this.sjadd = this.$store.state.sjInfo.jjadd
-		}
-
-	},
-	methods: {
-		// 选择物品确定
-		onConfirm1(e) {//确定
-			this.wptype = e
-			this.wpshow = false
-			console.log(e)
-		},
-		// 选择付款方式确定
-		onConfirm2(e) {//确定
-			this.pricetype = e
-			this.priceshow = false
-			console.log(e)
-		},
-		// 填写地址确定
-		onConfirm3(e) {//确定
-			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-			this.areashow = false
-			console.log(e)
-		},
-		// 寄件地址1与收件地址2
-		addtype(obj) {
-			this.index = obj
-			if (obj == 1) {
-				this.title = "寄件地址"
-			}
-			if (obj == 2) {
-				this.title = "收件地址"
-			}
-			this.addshow = true
-		},
-		// 填写地址确定
-		onSubmit() {
-			if (this.name == '' || this.name == undefined) {
-				Toast('请填写姓名')
-				return
-			}
-			if (this.phone == '' || this.phone == undefined) {
-				Toast('请填写手机')
-				return
-			}
-			let regPhone = new RegExp(this.$store.state.regPhone)
-			if (!regPhone.test(this.phone)) {
-				Toast('手机号格式不正确')
-				return
-			}
-			if (this.city == '' || this.city == undefined) {
-				Toast('请选择省市区')
-				return
-			}
-			if (this.address == '' || this.address == undefined) {
-				Toast('请填写详细地址')
-				return
-			}
-			if (this.index == 1) {
-				this.jjname = this.name + ' ' + this.phone
-				this.jjadd = this.city + ' ' + this.address
-				let jjInfo = {}
-				jjInfo.jjname = this.jjname
-				jjInfo.jjadd = this.jjadd
-				this.$store.commit("getJjInfo", jjInfo)
-			}
-			if (this.index == 2) {
-				this.sjname = this.name + ' ' + this.phone
-				this.sjadd = this.city + ' ' + this.address
-				let sjInfo = {}
-				sjInfo.sjname = this.sjname
-				sjInfo.jjadd = this.sjadd
-				this.$store.commit("getSjInfo", sjInfo)
-			}
-
-			this.addshow = false
-			this.name = ""
-			this.phone = ""
-			this.city = ""
-			this.address = ""
-		},
-		close() {
-			this.name = ""
-			this.phone = ""
-			this.city = ""
-			this.address = ""
-		},
-		// 地址簿跳转
-		link(obj) {
-			this.$router.push({ path: '/Addressbook', query: { active: obj } })
-		}
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+  data() {
+    return {
+      titlename: "寄件",
+      wptype: "", //物品类型
+      wpshow: false, //物品类型弹窗显示
+      wplist: ["日用品", "食品", "文件", "衣物", "数码产品", "其他"],
+      pricetype: "", //付款类型
+      stepper: "",
+      priceshow: false, //付款类型弹窗显示
+      pricelist: ["月结", "日结", "到付"],
+      addshow: false,
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      index: "",
+      title: "",
+      jjname: "",
+      jjadd: "",
+      sjname: "",
+      sjadd: "",
+      bz: "",
+      check: false,
+      openid: ""
+    };
+  },
+  created: function() {
+    this.openid = this.$store.state.openId;
+
+    //寄件地址
+    if (JSON.stringify(this.$store.state.jjInfo) != "{}") {
+      this.jjname = this.$store.state.jjInfo.jjname;
+      this.jjadd = this.$store.state.jjInfo.jjadd;
+    }
+
+    //收件地址
+    if (JSON.stringify(this.$store.state.sjInfo) != "{}") {
+      this.sjname = this.$store.state.sjInfo.jjname;
+      this.sjadd = this.$store.state.sjInfo.jjadd;
+    }
+  },
+  methods: {
+    // 选择物品确定
+    onConfirm1(e) {
+      //确定
+      this.wptype = e;
+      this.wpshow = false;
+      console.log(e);
+    },
+    // 选择付款方式确定
+    onConfirm2(e) {
+      //确定
+      this.pricetype = e;
+      this.priceshow = false;
+      console.log(e);
+    },
+    // 填写地址确定
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    },
+    // 寄件地址1与收件地址2
+    addtype(obj) {
+      this.index = obj;
+      if (obj == 1) {
+        this.title = "寄件地址";
+      }
+      if (obj == 2) {
+        this.title = "收件地址";
+      }
+      this.addshow = true;
+    },
+    // 填写地址确定
+    onSubmit() {
+      if (this.name == "" || this.name == undefined) {
+        Toast("请填写姓名");
+        return;
+      }
+      if (this.phone == "" || this.phone == undefined) {
+        Toast("请填写手机");
+        return;
+      }
+      let regPhone = new RegExp(this.$store.state.regPhone);
+      if (!regPhone.test(this.phone)) {
+        Toast("手机号格式不正确");
+        return;
+      }
+      if (this.city == "" || this.city == undefined) {
+        Toast("请选择省市区");
+        return;
+      }
+      if (this.address == "" || this.address == undefined) {
+        Toast("请填写详细地址");
+        return;
+      }
+      if (this.index == 1) {
+        this.jjname = this.name + " " + this.phone;
+        this.jjadd = this.city + " " + this.address;
+        let jjInfo = {};
+        jjInfo.jjname = this.jjname;
+        jjInfo.jjadd = this.jjadd;
+        this.$store.commit("getJjInfo", jjInfo);
+      }
+      if (this.index == 2) {
+        this.sjname = this.name + " " + this.phone;
+        this.sjadd = this.city + " " + this.address;
+        let sjInfo = {};
+        sjInfo.sjname = this.sjname;
+        sjInfo.jjadd = this.sjadd;
+        this.$store.commit("getSjInfo", sjInfo);
+      }
+
+      this.addshow = false;
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    close() {
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    // 地址簿跳转
+    link(obj) {
+      this.$router.push({ path: "/Addressbook", query: { active: obj } });
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	.jjinfo {
-		font-size: .24rem;
-		color: #999999;
-		padding: .33rem;
-
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
-
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem;
-
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
-
-					div {
-						//font-weight: bold;
-						max-width: 4.2rem;
-
-						p:nth-of-type(1) {
-							font-size: .24rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
-
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
-
-				.dzb {
-					text-align: center;
-					border-left: .01rem solid #ededed;
-					padding-left: .3rem;
-
-					img {
-						width: .39rem;
-						height: .42rem;
-						padding-top: .2rem;
-					}
-
-					p {
-						font-size: .2rem;
-					}
-
-				}
-			}
-		}
-
-	}
-
-	.choose {
-		font-size: .3rem;
-		color: #999999;
-		font-weight: bold;
-		padding: 0rem .33rem;
-
-		>div {
-			background: white;
-
-			padding: .3rem .3rem;
-			border-radius: .05rem;
-
-			.type_wp {
-				display: flex;
-				justify-content: center;
-
-				div {
-					flex: 1;
-					text-align: center;
-
-					p:nth-of-type(2) {
-						color: #333;
-						margin-top: .2rem;
-						font-size: .36rem;
-						//position: relative;
-					}
-
-				}
-
-				div:nth-of-type(1) {
-					border-right: .01rem solid #ededed;
-
-					p:nth-of-type(2):after {
-						content: "";
-						display: inline-block;
-						width: .15rem;
-						height: .15rem;
-						border-bottom: .01rem solid #999;
-						border-right: .01rem solid #999;
-						transform: rotate(45deg);
-						margin-left: .15rem;
-						position: relative;
-						top: -.08rem;
-					}
-				}
-			}
-
-			.type_price {
-				display: flex;
-				justify-content: center;
-				border-top: .01rem solid #ededed;
-				margin-top: .3rem;
-				padding-top: .3rem;
-
-				div {
-					flex: 1;
-					text-align: center;
-
-					p:nth-of-type(2) {
-						color: #333;
-						margin-top: .2rem;
-						font-size: .36rem;
-					}
-				}
-
-				div:nth-of-type(1) {
-					border-right: .01rem solid #ededed;
-
-					p:nth-of-type(2):after {
-						content: "";
-						display: inline-block;
-						width: .15rem;
-						height: .15rem;
-						border-bottom: .01rem solid #999;
-						border-right: .01rem solid #999;
-						transform: rotate(45deg);
-						margin-left: .15rem;
-						position: relative;
-						top: -.08rem;
-					}
-				}
-			}
-		}
-
-	}
-
-	.bz {
-		padding: .33rem;
-		font-size: .3rem;
-
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
-
-		}
-	}
-
-	.check {
-		font-size: .24rem;
-
-		text-align: center;
-
-		/deep/.van-checkbox {
-			justify-content: center;
-
-			.van-checkbox__label {
-				color: #999;
-			}
-		}
-	}
-
-	.btn-jj {
-		padding: .33rem;
-
-		button {
-			width: 100%;
-		}
-	}
+  .jjinfo {
+    font-size: 0.24rem;
+    color: #999999;
+    padding: 0.33rem;
+
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
+
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem;
+
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
+
+          div {
+            //font-weight: bold;
+            max-width: 4.2rem;
+
+            p:nth-of-type(1) {
+              font-size: 0.24rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
+
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
+
+        .dzb {
+          text-align: center;
+          border-left: 0.01rem solid #ededed;
+          padding-left: 0.3rem;
+
+          img {
+            width: 0.39rem;
+            height: 0.42rem;
+            padding-top: 0.2rem;
+          }
+
+          p {
+            font-size: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+
+  .choose {
+    font-size: 0.3rem;
+    color: #999999;
+    font-weight: bold;
+    padding: 0rem 0.33rem;
+
+    > div {
+      background: white;
+
+      padding: 0.3rem 0.3rem;
+      border-radius: 0.05rem;
+
+      .type_wp {
+        display: flex;
+        justify-content: center;
+
+        div {
+          flex: 1;
+          text-align: center;
+
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+            //position: relative;
+          }
+        }
+
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+
+      .type_price {
+        display: flex;
+        justify-content: center;
+        border-top: 0.01rem solid #ededed;
+        margin-top: 0.3rem;
+        padding-top: 0.3rem;
+
+        div {
+          flex: 1;
+          text-align: center;
+
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+          }
+        }
+
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+    }
+  }
+
+  .bz {
+    padding: 0.33rem;
+    font-size: 0.3rem;
+
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
+
+  .check {
+    font-size: 0.24rem;
+
+    text-align: center;
+
+    /deep/.van-checkbox {
+      justify-content: center;
+
+      .van-checkbox__label {
+        color: #999;
+      }
+    }
+  }
+
+  .btn-jj {
+    padding: 0.33rem;
+
+    button {
+      width: 100%;
+    }
+  }
 }
 
 .whrite_add {
-	width: 6.6rem;
-	padding: .4rem .2rem;
-
-	/deep/.van-field__value {
-		input {
-			text-align: right;
-		}
-
-	}
-
-	/deep/.van-popup__close-icon--top-right {
-		top: 5px;
-		right: 10px;
-	}
+  width: 6.6rem;
+  padding: 0.4rem 0.2rem;
+
+  /deep/.van-field__value {
+    input {
+      text-align: right;
+    }
+  }
+
+  /deep/.van-popup__close-icon--top-right {
+    top: 5px;
+    right: 10px;
+  }
 }
 </style>

src/pages_bak/inexpress.vue

@@ -1,369 +1,422 @@
 <template>
-	<div class="content">
-
-		<!-- 寄件地址 -->
-		<div class="jjinfo">
-			<div>
-				<div class="jj">
-					<div class="jjaddress">
-						<p>寄</p>
-						<div>
-							<p v-if="jjname == '' || jjname == ' '">寄件地址</p>
-							<p v-else>{{ jjname }}</p>
-							<p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">填写寄件地址</p>
-							<p v-else @click="addtype(1)">{{ jjadd }}</p>
-						</div>
-					</div>
-					<div class="dzb">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-				<div class="jj" style="border-top:.01rem solid #ededed">
-					<div class="jjaddress">
-						<p style="background: #fa9c22;">收</p>
-						<div>
-							<p v-if="sjname == '' || sjname == ' '">寄件地址</p>
-							<p v-else>{{ sjname }}</p>
-							<p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">填写收件地址</p>
-							<p v-else @click="addtype(2)">{{ sjadd }}</p>
-						</div>
-					</div>
-					<div class="dzb">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-			</div>
-
-		</div>
-		<!-- 寄件属性 -->
-		<div class="choose">
-			<div>
-				<div class="type_wp">
-					<div>
-						<p>物品类型</p>
-						<p v-if="wptype == ''" @click="wpshow = true">请选择</p>
-						<p v-else @click="wpshow = true">{{ wptype }}</p>
-					</div>
-					<div>
-						<p>重量</p>
-						<p>一件</p>
-					</div>
-				</div>
-			</div>
-		</div>
-		<!-- 备注 -->
-		<div class="bz">
-			<div>
-				<van-field v-model="bz" name="备注" label="备注" placeholder="包装运输等要求" />
-			</div>
-		</div>
-		<!-- 我同意 -->
-		<div class="check">
-			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
-		</div>
-		<!-- 寄件 -->
-		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">立即寄件</van-button>
-		</div>
-		<!-- 弹窗物品类型 -->
-		<van-popup v-model="wpshow" position="bottom">
-			<van-picker title="物品类型" show-toolbar :columns="wplist" @confirm="onConfirm1" @cancel="wpshow = false" />
-		</van-popup>
-		<!-- 弹窗付款方式 -->
-		<van-popup v-model="priceshow" position="bottom">
-			<van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2"
-				@cancel="priceshow = false" />
-		</van-popup>
-		<!-- 填写地址 -->
-		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{ title }}</p>
-				<van-form @submit="onSubmit">
-					<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" />
-					<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机" />
-					<van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
-						@click="areashow = true" />
-					<van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址" />
-					<div style="margin-top: 16px;">
-						<van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-					</div>
-				</van-form>
-			</div>
-
-		</van-popup>
-		<!-- 城市选择 -->
-		<van-popup v-model="areashow" position="bottom">
-			<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-		</van-popup>
-	</div>
+  <div class="content">
+    <!-- 寄件地址 -->
+    <div class="jjinfo">
+      <div>
+        <div class="jj">
+          <div class="jjaddress">
+            <p>寄</p>
+            <div>
+              <p v-if="jjname == '' || jjname == ' '">寄件地址</p>
+              <p v-else>{{ jjname }}</p>
+              <p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">
+                填写寄件地址
+              </p>
+              <p v-else @click="addtype(1)">{{ jjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+        <div class="jj" style="border-top:.01rem solid #ededed">
+          <div class="jjaddress">
+            <p style="background: #fa9c22;">收</p>
+            <div>
+              <p v-if="sjname == '' || sjname == ' '">寄件地址</p>
+              <p v-else>{{ sjname }}</p>
+              <p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">
+                填写收件地址
+              </p>
+              <p v-else @click="addtype(2)">{{ sjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 寄件属性 -->
+    <div class="choose">
+      <div>
+        <div class="type_wp">
+          <div>
+            <p>物品类型</p>
+            <p v-if="wptype == ''" @click="wpshow = true">请选择</p>
+            <p v-else @click="wpshow = true">{{ wptype }}</p>
+          </div>
+          <div>
+            <p>重量</p>
+            <p>一件</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 备注 -->
+    <div class="bz">
+      <div>
+        <van-field
+          v-model="bz"
+          name="备注"
+          label="备注"
+          placeholder="包装运输等要求"
+        />
+      </div>
+    </div>
+    <!-- 我同意 -->
+    <div class="check">
+      <van-checkbox icon-size=".24rem" v-model="check" shape=""
+        >我同意《电子运单契约条款》</van-checkbox
+      >
+    </div>
+    <!-- 寄件 -->
+    <div class="btn-jj">
+      <van-button type="info" color="#0c2469">立即寄件</van-button>
+    </div>
+    <!-- 弹窗物品类型 -->
+    <van-popup v-model="wpshow" position="bottom">
+      <van-picker
+        title="物品类型"
+        show-toolbar
+        :columns="wplist"
+        @confirm="onConfirm1"
+        @cancel="wpshow = false"
+      />
+    </van-popup>
+    <!-- 弹窗付款方式 -->
+    <van-popup v-model="priceshow" position="bottom">
+      <van-picker
+        title="付款方式"
+        show-toolbar
+        :columns="pricelist"
+        @confirm="onConfirm2"
+        @cancel="priceshow = false"
+      />
+    </van-popup>
+    <!-- 填写地址 -->
+    <van-popup
+      round
+      v-model="addshow"
+      class="whrite_add"
+      closeable
+      closed="close"
+    >
+      <div>
+        <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">
+          {{ title }}
+        </p>
+        <van-form @submit="onSubmit">
+          <van-field
+            v-model="name"
+            name="姓名"
+            label="姓名"
+            placeholder="请输入姓名"
+          />
+          <van-field
+            v-model="phone"
+            maxlength="11"
+            type="number"
+            name="手机"
+            label="手机"
+            placeholder="请输入手机"
+          />
+          <van-field
+            readonly
+            clickable
+            name="area"
+            :value="city"
+            label="省市区"
+            placeholder="请选择省市区"
+            @click="areashow = true"
+          />
+          <van-field
+            v-model="address"
+            name="详细地址"
+            label="详细地址"
+            placeholder="请输入详细地址"
+          />
+          <div style="margin-top: 16px;">
+            <van-button color="#0c2469" block type="info" native-type="submit"
+              >确定</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </van-popup>
+    <!-- 城市选择 -->
+    <van-popup v-model="areashow" position="bottom">
+      <van-area
+        :area-list="areaList"
+        @confirm="onConfirm3"
+        @cancel="areashow = false"
+      />
+    </van-popup>
+  </div>
 </template>
 
 <script>
-import areaList from "@/script/areas.js"
+import areaList from "@/script/areas.js";
 export default {
-	data() {
-		return {
-			titlename: "内部件",
-			wptype: "",//物品类型
-			wpshow: false,//物品类型弹窗显示
-			wplist: ["物品1", "物品二"],
-			pricetype: "",//付款类型
-			priceshow: false,//付款类型弹窗显示
-			pricelist: ["月结", "日结", "到付"],
-			addshow: false,
-			name: "",
-			phone: "",
-			city: "",
-			address: "",
-			areashow: false,
-			index: "",
-			title: "",
-			jjname: "",
-			jjadd: "",
-			sjname: "",
-			sjadd: "",
-			bz: "",
-			check: false
-		}
-	},
-	created: function () {
-		//this.areaList=area.areaList
-	},
-	methods: {
-		// 选择物品确定
-		onConfirm1(e) {//确定
-			this.wptype = e
-			this.wpshow = false
-			console.log(e)
-		},
-		// 选择付款方式确定
-		onConfirm2(e) {//确定
-			this.pricetype = e
-			this.priceshow = false
-			console.log(e)
-		},
-		// 填写地址确定
-		onConfirm3(e) {//确定
-			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-			this.areashow = false
-			console.log(e)
-		},
-		// 寄件地址1与收件地址2
-		addtype(obj) {
-			this.index = obj
-			if (obj == 1) {
-				this.title = "寄件地址"
-			}
-			if (obj == 2) {
-				this.title = "收件地址"
-			}
-			this.addshow = true
-		},
-		// 填写地址确定
-		onSubmit() {
-			if (this.index == 1) {
-				this.jjname = this.name + ' ' + this.phone
-				this.jjadd = this.city + ' ' + this.address
-			}
-			if (this.index == 2) {
-				this.sjname = this.name + ' ' + this.phone
-				this.sjadd = this.city + ' ' + this.address
-			}
-			this.addshow = false
-			this.name = ""
-			this.phone = ""
-			this.city = ""
-			this.address = ""
-		},
-		close() {
-			this.name = ""
-			this.phone = ""
-			this.city = ""
-			this.address = ""
-		},
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+  data() {
+    return {
+      titlename: "内部件",
+      wptype: "", //物品类型
+      wpshow: false, //物品类型弹窗显示
+      wplist: ["物品1", "物品二"],
+      pricetype: "", //付款类型
+      priceshow: false, //付款类型弹窗显示
+      pricelist: ["月结", "日结", "到付"],
+      addshow: false,
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      index: "",
+      title: "",
+      jjname: "",
+      jjadd: "",
+      sjname: "",
+      sjadd: "",
+      bz: "",
+      check: false
+    };
+  },
+  created: function() {
+    //this.areaList=area.areaList
+  },
+  methods: {
+    // 选择物品确定
+    onConfirm1(e) {
+      //确定
+      this.wptype = e;
+      this.wpshow = false;
+      console.log(e);
+    },
+    // 选择付款方式确定
+    onConfirm2(e) {
+      //确定
+      this.pricetype = e;
+      this.priceshow = false;
+      console.log(e);
+    },
+    // 填写地址确定
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    },
+    // 寄件地址1与收件地址2
+    addtype(obj) {
+      this.index = obj;
+      if (obj == 1) {
+        this.title = "寄件地址";
+      }
+      if (obj == 2) {
+        this.title = "收件地址";
+      }
+      this.addshow = true;
+    },
+    // 填写地址确定
+    onSubmit() {
+      if (this.index == 1) {
+        this.jjname = this.name + " " + this.phone;
+        this.jjadd = this.city + " " + this.address;
+      }
+      if (this.index == 2) {
+        this.sjname = this.name + " " + this.phone;
+        this.sjadd = this.city + " " + this.address;
+      }
+      this.addshow = false;
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    close() {
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
-	.jjinfo {
-		font-size: .24rem;
-		color: #999999;
-		padding: .33rem;
-
-		>div {
-			background: white;
-			border-radius: .05rem;
-			padding: .1rem .3rem;
-
-			.jj {
-				display: flex;
-				justify-content: space-between;
-				padding: .2rem 0rem;
-
-				.jjaddress {
-					display: flex;
-					padding: .1rem 0rem;
-
-					>p {
-						font-size: .24rem;
-						font-weight: bold;
-						display: inline-block;
-						width: .5rem;
-						height: .5rem;
-						background: #00c4b8;
-						text-align: center;
-						line-height: .5rem;
-						color: white;
-						border-radius: 50%;
-						margin-right: .3rem;
-					}
-
-					div {
-						//font-weight: bold;
-						max-width: 4.2rem;
-
-						p:nth-of-type(1) {
-							font-size: .24rem;
-							color: #333;
-							margin-bottom: .2rem;
-						}
-
-						p:nth-of-type(2) {
-							font-size: .3rem;
-						}
-					}
-				}
-
-				.dzb {
-					text-align: center;
-					border-left: .01rem solid #ededed;
-					padding-left: .3rem;
-
-					img {
-						width: .39rem;
-						height: .42rem;
-						padding-top: .2rem;
-					}
-
-					p {
-						font-size: .2rem;
-					}
-
-				}
-			}
-		}
-
-	}
-
-	.choose {
-		font-size: .3rem;
-		color: #999999;
-		font-weight: bold;
-		padding: 0rem .33rem;
-
-		>div {
-			background: white;
-
-			padding: .3rem .3rem;
-			border-radius: .05rem;
-
-			.type_wp {
-				display: flex;
-				justify-content: center;
-
-				div {
-					flex: 1;
-					text-align: center;
-
-					p:nth-of-type(2) {
-						color: #333;
-						margin-top: .2rem;
-						font-size: .36rem;
-						//position: relative;
-					}
-
-				}
-
-				div:nth-of-type(1) {
-					border-right: .01rem solid #ededed;
-
-					p:nth-of-type(2):after {
-						content: "";
-						display: inline-block;
-						width: .15rem;
-						height: .15rem;
-						border-bottom: .01rem solid #999;
-						border-right: .01rem solid #999;
-						transform: rotate(45deg);
-						margin-left: .15rem;
-						position: relative;
-						top: -.08rem;
-					}
-				}
-			}
-
-		}
-
-	}
-
-	.bz {
-		padding: .33rem;
-		font-size: .3rem;
-
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
-
-		}
-	}
-
-	.check {
-		font-size: .24rem;
-
-		text-align: center;
-
-		/deep/.van-checkbox {
-			justify-content: center;
-
-			.van-checkbox__label {
-				color: #999;
-			}
-		}
-	}
-
-	.btn-jj {
-		padding: .33rem;
-
-		button {
-			width: 100%;
-		}
-	}
+  .jjinfo {
+    font-size: 0.24rem;
+    color: #999999;
+    padding: 0.33rem;
+
+    > div {
+      background: white;
+      border-radius: 0.05rem;
+      padding: 0.1rem 0.3rem;
+
+      .jj {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem 0rem;
+
+        .jjaddress {
+          display: flex;
+          padding: 0.1rem 0rem;
+
+          > p {
+            font-size: 0.24rem;
+            font-weight: bold;
+            display: inline-block;
+            width: 0.5rem;
+            height: 0.5rem;
+            background: #0c2469;
+            text-align: center;
+            line-height: 0.5rem;
+            color: white;
+            border-radius: 50%;
+            margin-right: 0.3rem;
+          }
+
+          div {
+            //font-weight: bold;
+            max-width: 4.2rem;
+
+            p:nth-of-type(1) {
+              font-size: 0.24rem;
+              color: #333;
+              margin-bottom: 0.2rem;
+            }
+
+            p:nth-of-type(2) {
+              font-size: 0.3rem;
+            }
+          }
+        }
+
+        .dzb {
+          text-align: center;
+          border-left: 0.01rem solid #ededed;
+          padding-left: 0.3rem;
+
+          img {
+            width: 0.39rem;
+            height: 0.42rem;
+            padding-top: 0.2rem;
+          }
+
+          p {
+            font-size: 0.2rem;
+          }
+        }
+      }
+    }
+  }
+
+  .choose {
+    font-size: 0.3rem;
+    color: #999999;
+    font-weight: bold;
+    padding: 0rem 0.33rem;
+
+    > div {
+      background: white;
+
+      padding: 0.3rem 0.3rem;
+      border-radius: 0.05rem;
+
+      .type_wp {
+        display: flex;
+        justify-content: center;
+
+        div {
+          flex: 1;
+          text-align: center;
+
+          p:nth-of-type(2) {
+            color: #333;
+            margin-top: 0.2rem;
+            font-size: 0.36rem;
+            //position: relative;
+          }
+        }
+
+        div:nth-of-type(1) {
+          border-right: 0.01rem solid #ededed;
+
+          p:nth-of-type(2):after {
+            content: "";
+            display: inline-block;
+            width: 0.15rem;
+            height: 0.15rem;
+            border-bottom: 0.01rem solid #999;
+            border-right: 0.01rem solid #999;
+            transform: rotate(45deg);
+            margin-left: 0.15rem;
+            position: relative;
+            top: -0.08rem;
+          }
+        }
+      }
+    }
+  }
+
+  .bz {
+    padding: 0.33rem;
+    font-size: 0.3rem;
+
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
+
+  .check {
+    font-size: 0.24rem;
+
+    text-align: center;
+
+    /deep/.van-checkbox {
+      justify-content: center;
+
+      .van-checkbox__label {
+        color: #999;
+      }
+    }
+  }
+
+  .btn-jj {
+    padding: 0.33rem;
+
+    button {
+      width: 100%;
+    }
+  }
 }
 
 .whrite_add {
-	width: 6.6rem;
-	padding: .4rem .2rem;
-
-	/deep/.van-field__value {
-		input {
-			text-align: right;
-		}
-
-	}
-
-	/deep/.van-popup__close-icon--top-right {
-		top: 5px;
-		right: 10px;
-	}
+  width: 6.6rem;
+  padding: 0.4rem 0.2rem;
+
+  /deep/.van-field__value {
+    input {
+      text-align: right;
+    }
+  }
+
+  /deep/.van-popup__close-icon--top-right {
+    top: 5px;
+    right: 10px;
+  }
 }
 </style>

src/pages_bak/multipleexpress.vue

@@ -1,472 +1,530 @@
-<template>
-	<div class="content">
-		<back :title="titlename"></back>
-		<!-- 寄件地址 -->
-		<div class="jjinfo">
-			<div>
-				<div class="jj">
-					<div class="jjaddress">
-						<p>寄</p>
-						<div>
-							<p v-if="jjname==''||jjname==' '">寄件地址</p>
-							<p v-else>{{jjname}}</p>
-							<p v-if="jjadd==''||jjadd==' '" @click="addtype(1)">填写寄件地址</p>
-							<p v-else @click="addtype(1)">{{jjadd}}</p>
-						</div>
-					</div>
-					<div class="dzb" @click="link(1)">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>				
-				</div>
-			</div>			
-		</div>
-		<!-- 寄件地址 -->
-		<div class="sjinfo">
-			<div>			
-				<div class="sj">
-					<div class="sjaddress">
-						<p style="background: #fa9c22;">收</p>
-						<div>
-							<p v-if="sjname==''||sjname==' '">寄件地址</p>
-							<p v-else>{{sjname}}</p>
-							<p v-if="sjadd==''||sjadd==' '" @click="addtype(2)">填写收件地址</p>
-							<p v-else @click="addtype(2)">{{sjadd}}</p>
-						</div>
-					</div>
-					<div class="dzb" @click="link(2)">
-						<img src="../assets/images/addlist.png" alt="">
-						<p>地址簿</p>
-					</div>
-				</div>
-				<div class="sj" style="border-top:.01rem solid #ededed">
-					<div class="sjaddress">
-						<van-field v-model="wpinfo" name="物品信息" label="物品信息" placeholder="请填写"/>
-					</div>
-					<div class="dzb cz">
-						<div>
-							<img src="../assets/images/whrite.png" alt="">
-							<p>编辑</p>
-						</div>
-						<div>
-							<img src="../assets/images/del.png" alt="">
-							<p>删除</p>
-						</div>
-					</div>
-				</div>
-			</div>
-			
-		</div>
-		<!-- 寄件属性 -->
-		<div class="choose">
-			<div>
-				<div class="type_wp">
-					<div>
-						<p>付款方式</p>
-					    <p v-if="pricetype==''" @click="priceshow=true">请选择</p>
-						<p v-else @click="priceshow=true">{{pricetype}}</p>
-					</div>
-					<div>
-						<p>声明价值</p>
-						<p>0元</p>
-					</div>
-				</div>
-			</div>			
-		</div>
-		<!-- 我同意 -->
-		<div class="check">
-			<van-checkbox icon-size=".24rem" v-model="check" shape="">我同意《电子运单契约条款》</van-checkbox>
-		</div>
-		<!-- 寄件 -->
-		<div class="btn-jj">
-			<van-button type="info" color="#00c4b8">立即寄件</van-button>
-		</div>
-		<!-- 弹窗付款方式 -->
-		<van-popup v-model="priceshow" position="bottom">
-		  <van-picker title="付款方式" show-toolbar :columns="pricelist" @confirm="onConfirm2" @cancel="priceshow=false"/>
-		</van-popup>
-		<!-- 填写地址 -->
-		<van-popup round v-model="addshow" class="whrite_add" closeable closed="close">
-			<div>
-				<p style="font-size: 16px;text-align: center;margin-bottom: 16px;">{{title}}</p>
-				<van-form @submit="onSubmit">
-				  <van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名"/>
-				  <van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"/>
-				  <van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区" @click="areashow = true" />
-				  <van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"/>
-				  <div style="margin-top: 16px;">
-				    <van-button color="#00c4b8" block type="info" native-type="submit">确定</van-button>
-				  </div>
-				</van-form>
-			</div>
-		  
-		</van-popup>
-		<!-- 城市选择 -->
-		<van-popup v-model="areashow" position="bottom">
-		  <van-area
-		    :area-list="areaList"
-		    @confirm="onConfirm3"
-		    @cancel="areashow = false"
-		  />
-		</van-popup>
-	</div>	
+<template>
+  <div class="content">
+    <back :title="titlename"></back>
+    <!-- 寄件地址 -->
+    <div class="jjinfo">
+      <div>
+        <div class="jj">
+          <div class="jjaddress">
+            <p>寄</p>
+            <div>
+              <p v-if="jjname == '' || jjname == ' '">寄件地址</p>
+              <p v-else>{{ jjname }}</p>
+              <p v-if="jjadd == '' || jjadd == ' '" @click="addtype(1)">
+                填写寄件地址
+              </p>
+              <p v-else @click="addtype(1)">{{ jjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb" @click="link(1)">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 寄件地址 -->
+    <div class="sjinfo">
+      <div>
+        <div class="sj">
+          <div class="sjaddress">
+            <p style="background: #fa9c22;">收</p>
+            <div>
+              <p v-if="sjname == '' || sjname == ' '">寄件地址</p>
+              <p v-else>{{ sjname }}</p>
+              <p v-if="sjadd == '' || sjadd == ' '" @click="addtype(2)">
+                填写收件地址
+              </p>
+              <p v-else @click="addtype(2)">{{ sjadd }}</p>
+            </div>
+          </div>
+          <div class="dzb" @click="link(2)">
+            <img src="../assets/images/addlist.png" alt="" />
+            <p>地址簿</p>
+          </div>
+        </div>
+        <div class="sj" style="border-top:.01rem solid #ededed">
+          <div class="sjaddress">
+            <van-field
+              v-model="wpinfo"
+              name="物品信息"
+              label="物品信息"
+              placeholder="请填写"
+            />
+          </div>
+          <div class="dzb cz">
+            <div>
+              <img src="../assets/images/whrite.png" alt="" />
+              <p>编辑</p>
+            </div>
+            <div>
+              <img src="../assets/images/del.png" alt="" />
+              <p>删除</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 寄件属性 -->
+    <div class="choose">
+      <div>
+        <div class="type_wp">
+          <div>
+            <p>付款方式</p>
+            <p v-if="pricetype == ''" @click="priceshow = true">请选择</p>
+            <p v-else @click="priceshow = true">{{ pricetype }}</p>
+          </div>
+          <div>
+            <p>声明价值</p>
+            <p>0元</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 我同意 -->
+    <div class="check">
+      <van-checkbox icon-size=".24rem" v-model="check" shape=""
+        >我同意《电子运单契约条款》</van-checkbox
+      >
+    </div>
+    <!-- 寄件 -->
+    <div class="btn-jj">
+      <van-button type="info" color="#0c2469">立即寄件</van-button>
+    </div>
+    <!-- 弹窗付款方式 -->
+    <van-popup v-model="priceshow" position="bottom">
+      <van-picker
+        title="付款方式"
+        show-toolbar
+        :columns="pricelist"
+        @confirm="onConfirm2"
+        @cancel="priceshow = false"
+      />
+    </van-popup>
+    <!-- 填写地址 -->
+    <van-popup
+      round
+      v-model="addshow"
+      class="whrite_add"
+      closeable
+      closed="close"
+    >
+      <div>
+        <p style="font-size: 16px;text-align: center;margin-bottom: 16px;">
+          {{ title }}
+        </p>
+        <van-form @submit="onSubmit">
+          <van-field
+            v-model="name"
+            name="姓名"
+            label="姓名"
+            placeholder="请输入姓名"
+          />
+          <van-field
+            v-model="phone"
+            maxlength="11"
+            type="number"
+            name="手机"
+            label="手机"
+            placeholder="请输入手机"
+          />
+          <van-field
+            readonly
+            clickable
+            name="area"
+            :value="city"
+            label="省市区"
+            placeholder="请选择省市区"
+            @click="areashow = true"
+          />
+          <van-field
+            v-model="address"
+            name="详细地址"
+            label="详细地址"
+            placeholder="请输入详细地址"
+          />
+          <div style="margin-top: 16px;">
+            <van-button color="#0c2469" block type="info" native-type="submit"
+              >确定</van-button
+            >
+          </div>
+        </van-form>
+      </div>
+    </van-popup>
+    <!-- 城市选择 -->
+    <van-popup v-model="areashow" position="bottom">
+      <van-area
+        :area-list="areaList"
+        @confirm="onConfirm3"
+        @cancel="areashow = false"
+      />
+    </van-popup>
+  </div>
 </template>
 
-<script>
-	import areaList from "@/script/areas.js"
-	export default{
-		data(){
-			return {
-				titlename:"批量寄",
-				pricetype:"",//付款类型
-				priceshow:false,//付款类型弹窗显示
-				pricelist:["月结","日结","到付"],
-				addshow:false,
-				name:"",
-				phone:"",
-				city:"",
-				address:"",
-				areashow:false,
-				index:"",
-				title:"",
-				jjname:"",
-				jjadd:"",
-				sjname:"",
-				sjadd:"",
-				check:false,
-				wpinfo:"",//物品信息
-			}
-		},
-		created:function(){
-			//this.areaList=area.areaList
-		},
-		methods:{
-			// 选择物品确定
-			onConfirm1(e){//确定
-				this.wptype=e
-				this.wpshow=false
-				console.log(e)
-			},
-			// 选择付款方式确定
-			onConfirm2(e){//确定
-				this.pricetype=e
-				this.priceshow=false
-				console.log(e)
-			},
-			// 填写地址确定
-			onConfirm3(e){//确定
-				this.city=e[0].name+' '+e[1].name+' '+e[2].name
-				this.areashow=false
-				console.log(e)
-			},
-			// 寄件地址1与收件地址2
-			addtype(obj){
-				this.index=obj
-				if(obj==1){
-					this.title="寄件地址"
-				}
-				if(obj==2){
-					this.title="收件地址"
-				}
-				this.addshow=true
-			},
-			// 填写地址确定
-			onSubmit(){
-				if(this.index==1){
-					this.jjname=this.name+' '+this.phone
-					this.jjadd=this.city+' '+this.address
-				}
-				if(this.index==2){
-					this.sjname=this.name+' '+this.phone
                    this.sjadd=this.city+' '+this.address
-				}
-				this.addshow=false
-				this.name=""
-				this.phone=""
-				this.city=""
-				this.address=""
-			},
-			close(){
-				this.name=""
-				this.phone=""
-				this.city=""
-				this.address=""
-			},
-			// 地址簿跳转
-			link(obj){
-				this.$router.push({path:'/Addressbook',query:{active:obj}})
-			}
-		},
-		computed:{
-			areaList(){
-				return areaList
-			}
-		}
-	}
+<script>
+import areaList from "@/script/areas.js";
+export default {
+  data() {
+    return {
+      titlename: "批量寄",
+      pricetype: "", //付款类型
+      priceshow: false, //付款类型弹窗显示
+      pricelist: ["月结", "日结", "到付"],
+      addshow: false,
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      index: "",
+      title: "",
+      jjname: "",
+      jjadd: "",
+      sjname: "",
+      sjadd: "",
+      check: false,
+      wpinfo: "" //物品信息
+    };
+  },
+  created: function() {
+    //this.areaList=area.areaList
+  },
+  methods: {
+    // 选择物品确定
+    onConfirm1(e) {
+      //确定
+      this.wptype = e;
+      this.wpshow = false;
+      console.log(e);
+    },
+    // 选择付款方式确定
+    onConfirm2(e) {
+      //确定
+      this.pricetype = e;
+      this.priceshow = false;
+      console.log(e);
+    },
+    // 填写地址确定
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    },
+    // 寄件地址1与收件地址2
+    addtype(obj) {
+      this.index = obj;
+      if (obj == 1) {
+        this.title = "寄件地址";
+      }
+      if (obj == 2) {
+        this.title = "收件地址";
+      }
+      this.addshow = true;
+    },
+    // 填写地址确定
+    onSubmit() {
+      if (this.index == 1) {
+        this.jjname = this.name + " " + this.phone;
+        this.jjadd = this.city + " " + this.address;
+      }
+      if (this.index == 2) {
+        this.sjname = this.name + " " + this.phone;
+        this.sjadd = this.city + " " + this.address;
+      }
+      this.addshow = false;
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    close() {
+      this.name = "";
+      this.phone = "";
+      this.city = "";
+      this.address = "";
+    },
+    // 地址簿跳转
+    link(obj) {
+      this.$router.push({ path: "/Addressbook", query: { active: obj } });
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
-<style scoped lang="less">
-	.content{
-		.jjinfo{
-			font-size: .24rem;
-			color: #999999;
-			padding: .33rem;
-			>div{
-				background: white;
-				border-radius: .05rem;
-				padding: .1rem .2rem;
-				.jj{
-					display: flex;
-					justify-content: space-between;
-					padding: .2rem 0rem;
-					.jjaddress{
-						display: flex;
-						padding: .1rem 0rem;
-						width: 4.8rem;
-						>p{
-							font-size: .24rem;
-							font-weight: bold;
-							display: inline-block;
-							width:.5rem;
-							height: .5rem;
-							background: #00c4b8;
-							text-align: center;
-							line-height: .5rem;
-							color: white;
-							border-radius: 50%;
-							margin-right: .3rem;
-						}
-						div{
-							//font-weight: bold;
-							max-width: 4.2rem;
-							p:nth-of-type(1){
-								font-size: .24rem;
-								color: #333;
-								margin-bottom: .2rem;
-							}
-							p:nth-of-type(2){
-								font-size: .24rem;
-							}
-						}
-					}
-					.dzb{
-						text-align: center;
-						border-left: .01rem solid #ededed;
-						min-width: 1.4rem;
-						img{
-							width:.39rem;
-							height: .42rem;
-							padding-top: .2rem;
-						}
-						p{
-							font-size: .2rem;
-						}
-						
-					}
-				}
-		    }
-		
-		}
-		.sjinfo{
-			font-size: .24rem;
-			color: #999999;
-			padding: 0rem .33rem .33rem .33rem;
			>div{
                background: white;
                border-radius: .05rem;
                padding: .1rem .2rem;
-				.sj{
-					display: flex;
-					justify-content: space-between;
-					padding: .2rem 0rem;
-					.sjaddress{
-						display: flex;
-						padding: .1rem 0rem;
-						width: 4.8rem;
-						/deep/.van-field{
-							padding: 0rem;
-
-							.van-field__value{
-								input{
-									text-align: right;
-									padding: 0rem;
-								}
-								
-							}
-						}
-						>p{
-							font-size: .24rem;
-							font-weight: bold;
-							display: inline-block;
-							width:.5rem;
-							height: .5rem;
-							background: #00c4b8;
-							text-align: center;
-							line-height: .5rem;
-							color: white;
-							border-radius: 50%;
-							margin-right: .2rem;
-						}
-						div{
-							//font-weight: bold;
-							width: 4.8rem;
-							p:nth-of-type(1){
-								font-size: .24rem;
-								color: #333;
-								margin-bottom: .2rem;
-							}
-							p:nth-of-type(2){
-								font-size: .24rem;
-							}
-						}
-					}
-					.dzb{
-						text-align: center;
-						border-left: .01rem solid #ededed;
-						//padding-left: .3rem;
-						min-width: 1.4rem;
-						>img{
-							width:.39rem;
-							height: .42rem;
-							padding-top: .2rem;
-						}
-						>p{
-							font-size: .2rem;
-						}
-						
-					}
-					.cz{
-						display: flex;
-						justify-content: center;
-						padding-left: 0rem;
-						div{
-							text-align: center;
-							padding: 0rem .05rem 0rem;
-							img{
-								width: .26rem;
-								height: .26rem;
-							}
-							p {
-								font-size:.1rem;
-								color: #999999;
-								
-							}
-						}
-					}
-				}
-						
-			}				
-		}
-		.choose{
-			font-size: .3rem;
-			color: #999999;
-			font-weight: bold;
-			padding: 0rem .33rem;
-			>div{
-				background: white;
-				
-				padding: .3rem .3rem;
-				border-radius: .05rem;
-				.type_wp{
-					display: flex;
-					justify-content: center;
-					div{
-						flex: 1;
-						text-align: center;
-						p:nth-of-type(2){
-							color: #333;
-							margin-top: .2rem;
-							font-size: .36rem;
-							//position: relative;
-						}
-						
-					} 
-					div:nth-of-type(1){
-						border-right: .01rem solid #ededed;
-						p:nth-of-type(2):after{
-							content: "";
-							display: inline-block;
-							width: .15rem;
-							height: .15rem;
-							border-bottom: .01rem solid #999;
-							border-right: .01rem solid #999;
-							transform: rotate(45deg);
-							margin-left: .15rem;
-							position: relative;
-							top: -.08rem;
-						}
-					}
-				}
-				.type_price{
-					display: flex;
-					justify-content: center;
-					border-top: .01rem solid #ededed;
-					margin-top: .3rem;
-					padding-top: .3rem;
-					div{
-						flex: 1;
-						text-align: center;
-						p:nth-of-type(2){
-							color: #333;
-							margin-top: .2rem;
-							font-size: .36rem;
-						}
-					}
-					div:nth-of-type(1){
-						border-right: .01rem solid #ededed;
-						p:nth-of-type(2):after{
-							content: "";
-							display: inline-block;
-							width: .15rem;
-							height: .15rem;
-							border-bottom: .01rem solid #999;
-							border-right: .01rem solid #999;
-							transform: rotate(45deg);
-							margin-left: .15rem;
-							position: relative;
-							top: -.08rem;
-						}
-					}
-				}
-			}
-			
-		}
-	    .bz{
-			padding: .33rem;
-		    font-size: .3rem;
-			/deep/.van-field__value{
-				input{
-					text-align: right;
-				}
-				
-			}
-		}
-		.check{
-			font-size: .24rem;
-			
-			text-align: center;
-			
-			/deep/.van-checkbox{
-				justify-content: center;
-				.van-checkbox__label{
-					color: #999;
-				}
-			}
-		}
-		.btn-jj{
-			padding: .33rem;
-			button{
-				width: 100%;
-			}
-		}
-	}
-	.whrite_add{
-		width: 6.6rem;
-		padding: .4rem .2rem;
-		/deep/.van-field__value{
-			input{
-				text-align: right;
-			}
-			
-		}
-		/deep/.van-popup__close-icon--top-right{
-			top: 5px;
-			right: 10px;
-		}
+<style scoped lang="less">
+.content{
+	.jjinfo{
+		font-size: .24rem;
+		color: #999999;
+		padding: .33rem;
+		>div{
+			background: white;
+			border-radius: .05rem;
+			padding: .1rem .2rem;
+			.jj{
+				display: flex;
+				justify-content: space-between;
+				padding: .2rem 0rem;
+				.jjaddress{
+					display: flex;
+					padding: .1rem 0rem;
+					width: 4.8rem;
+					>p{
+						font-size: .24rem;
+						font-weight: bold;
+						display: inline-block;
+						width:.5rem;
+						height: .5re#0c2469;
+						background: #0c2469;
+						text-align: center;
+						line-height: .5rem;
+						color: white;
+						border-radius: 50%;
+						margin-right: .3rem;
+					}
+					div{
+						//font-weight: bold;
+						max-width: 4.2rem;
+						p:nth-of-type(1){
+							font-size: .24rem;
+							color: #333;
+							margin-bottom: .2rem;
+						}
+						p:nth-of-type(2){
+							font-size: .24rem;
+						}
+					}
+				}
+				.dzb{
+					text-align: center;
+					border-left: .01rem solid #ededed;
+					min-width: 1.4rem;
+					img{
+						width:.39rem;
+						height: .42rem;
+						padding-top: .2rem;
+					}
+					p{
+						font-size: .2rem;
+					}
+
+				}
+			}
+	    }
+
+	}
+	.sjinfo{
+		font-size: .24rem;
+		color: #999999;
+		padding: 0rem .33rem .33rem .33rem;
+		>div{
+               background: white;
+               border-radius: .05rem;
+               padding: .1rem .2rem;
+			.sj{
+				display: flex;
+				justify-content: space-between;
+				padding: .2rem 0rem;
+				.sjaddress{
+					display: flex;
+					padding: .1rem 0rem;
+					width: 4.8rem;
+					/deep/.van-field{
+						padding: 0rem;
+
+						.van-field__value{
+							input{
+								text-align: right;
+								padding: 0rem;
+							}
+
+						}
+					}
+					>p{
+						font-size: #0c2469;
+						font-weight: bold;
+						display: inline-block;
+						width:.5rem;
+						height: .5rem;
+						background: #0c2469;
+						text-align: center;
+						line-height: .5rem;
+						color: white;
+						border-radius: 50%;
+						margin-right: .2rem;
+					}
+					div{
+						//font-weight: bold;
+						width: 4.8rem;
+						p:nth-of-type(1){
+							font-size: .24rem;
+							color: #333;
+							margin-bottom: .2rem;
+						}
+						p:nth-of-type(2){
+							font-size: .24rem;
+						}
+					}
+				}
+				.dzb{
+					text-align: center;
+					border-left: .01rem solid #ededed;
+					//padding-left: .3rem;
+					min-width: 1.4rem;
+					>img{
+						width:.39rem;
+						height: .42rem;
+						padding-top: .2rem;
+					}
+					>p{
+						font-size: .2rem;
+					}
+
+				}
+				.cz{
+					display: flex;
+					justify-content: center;
+					padding-left: 0rem;
+					div{
+						text-align: center;
+						padding: 0rem .05rem 0rem;
+						img{
+							width: .26rem;
+							height: .26rem;
+						}
+						p {
+							font-size:.1rem;
+							color: #999999;
+
+						}
+					}
+				}
+			}
+
+		}
+	}
+	.choose{
+		font-size: .3rem;
+		color: #999999;
+		font-weight: bold;
+		padding: 0rem .33rem;
+		>div{
+			background: white;
+
+			padding: .3rem .3rem;
+			border-radius: .05rem;
+			.type_wp{
+				display: flex;
+				justify-content: center;
+				div{
+					flex: 1;
+					text-align: center;
+					p:nth-of-type(2){
+						color: #333;
+						margin-top: .2rem;
+						font-size: .36rem;
+						//position: relative;
+					}
+
+				}
+				div:nth-of-type(1){
+					border-right: .01rem solid #ededed;
+					p:nth-of-type(2):after{
+						content: "";
+						display: inline-block;
+						width: .15rem;
+						height: .15rem;
+						border-bottom: .01rem solid #999;
+						border-right: .01rem solid #999;
+						transform: rotate(45deg);
+						margin-left: .15rem;
+						position: relative;
+						top: -.08rem;
+					}
+				}
+			}
+			.type_price{
+				display: flex;
+				justify-content: center;
+				border-top: .01rem solid #ededed;
+				margin-top: .3rem;
+				padding-top: .3rem;
+				div{
+					flex: 1;
+					text-align: center;
+					p:nth-of-type(2){
+						color: #333;
+						margin-top: .2rem;
+						font-size: .36rem;
+					}
+				}
+				div:nth-of-type(1){
+					border-right: .01rem solid #ededed;
+					p:nth-of-type(2):after{
+						content: "";
+						display: inline-block;
+						width: .15rem;
+						height: .15rem;
+						border-bottom: .01rem solid #999;
+						border-right: .01rem solid #999;
+						transform: rotate(45deg);
+						margin-left: .15rem;
+						position: relative;
+						top: -.08rem;
+					}
+				}
+			}
+		}
+
+	}
+    .bz{
+		padding: .33rem;
+	    font-size: .3rem;
+		/deep/.van-field__value{
+			input{
+				text-align: right;
+			}
+
+		}
+	}
+	.check{
+		font-size: .24rem;
+
+		text-align: center;
+
+		/deep/.van-checkbox{
+			justify-content: center;
+			.van-checkbox__label{
+				color: #999;
+			}
+		}
+	}
+	.btn-jj{
+		padding: .33rem;
+		button{
+			width: 100%;
+		}
+	}
+}
+.whrite_add{
+	width: 6.6rem;
+	padding: .4rem .2rem;
+	/deep/.van-field__value{
+		input{
+			text-align: right;
+		}
+
+	}
+	/deep/.van-popup__close-icon--top-right{
+		top: 5px;
+		right: 10px;
 	}
+}
 </style>

src/pages_bak/newaddress.vue

@@ -1,137 +1,181 @@
 <template>
-	<div class="content">
-
-		<div class="form">
-			<van-form @submit="onSubmit">
-				<van-field v-model="name" name="姓名" label="姓名" placeholder="请输入姓名" :rules="[{ required: false }]" />
-				<van-field v-model="phone" maxlength="11" type="number" name="手机" label="手机" placeholder="请输入手机"
-					:rules="[{ required: false }]" />
-				<van-field readonly clickable name="area" :value="city" label="省市区" placeholder="请选择省市区"
-					@click="areashow = true" :rules="[{ required: false }]" />
-				<van-field v-model="address" name="详细地址" label="详细地址" placeholder="请输入详细地址"
-					:rules="[{ required: false }]" />
-				<div style="margin-top: 16px;">
-					<van-button color="#00c4b8" block type="info" native-type="submit"
-						:disabled="disabled">确定</van-button>
-				</div>
-			</van-form>
-			<!-- 城市选择 -->
-			<van-popup v-model="areashow" position="bottom">
-				<van-area :area-list="areaList" @confirm="onConfirm3" @cancel="areashow = false" />
-			</van-popup>
-		</div>
-	</div>
+  <div class="content">
+    <div class="form">
+      <van-form @submit="onSubmit">
+        <van-field
+          v-model="name"
+          name="姓名"
+          label="姓名"
+          placeholder="请输入姓名"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          v-model="phone"
+          maxlength="11"
+          type="number"
+          name="手机"
+          label="手机"
+          placeholder="请输入手机"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          readonly
+          clickable
+          name="area"
+          :value="city"
+          label="省市区"
+          placeholder="请选择省市区"
+          @click="areashow = true"
+          :rules="[{ required: false }]"
+        />
+        <van-field
+          v-model="address"
+          name="详细地址"
+          label="详细地址"
+          placeholder="请输入详细地址"
+          :rules="[{ required: false }]"
+        />
+        <div style="margin-top: 16px;">
+          <van-button
+            color="#0c2469"
+            block
+            type="info"
+            native-type="submit"
+            :disabled="disabled"
+            >确定</van-button
+          >
+        </div>
+      </van-form>
+      <!-- 城市选择 -->
+      <van-popup v-model="areashow" position="bottom">
+        <van-area
+          :area-list="areaList"
+          @confirm="onConfirm3"
+          @cancel="areashow = false"
+        />
+      </van-popup>
+    </div>
+  </div>
 </template>
 
 <script>
-import areaList from "@/script/areas.js"
-import { Toast } from 'vant'
+import areaList from "@/script/areas.js";
+import { Toast } from "vant";
 export default {
-	data() {
-		return {
-			titlename: "寄件人",
-			name: "",
-			phone: "",
-			city: "",
-			address: "",
-			areashow: false,
-			type: '',
-			disabled: false
-		}
-	},
-	created: function () {
-		this.type = this.$route.query.type
-		if (this.type == 1) {
-			this.titlename = "新建寄件人地址"
-		}
-		if (this.type == 2) {
-			this.titlename = "新建收件人地址"
-		}
-	},
-	methods: {
-		onSubmit() {
-
-			if (this.name == '' || this.name == undefined) {
-				Toast('请输入姓名')
-				return
-			}
+  data() {
+    return {
+      titlename: "寄件人",
+      name: "",
+      phone: "",
+      city: "",
+      address: "",
+      areashow: false,
+      type: "",
+      disabled: false
+    };
+  },
+  created: function() {
+    this.type = this.$route.query.type;
+    if (this.type == 1) {
+      this.titlename = "新建寄件人地址";
+    }
+    if (this.type == 2) {
+      this.titlename = "新建收件人地址";
+    }
+  },
+  methods: {
+    onSubmit() {
+      if (this.name == "" || this.name == undefined) {
+        Toast("请输入姓名");
+        return;
+      }
 
-			if (this.phone == '' || this.phone == undefined) {
-				Toast('请填写手机号')
-				return
-			}
+      if (this.phone == "" || this.phone == undefined) {
+        Toast("请填写手机号");
+        return;
+      }
 
-			let regPhone = new RegExp(this.$store.state.regPhone)
-			if (!regPhone.test(this.phone)) {
-				Toast('手机号格式不正确')
-				return
-			}
+      let regPhone = new RegExp(this.$store.state.regPhone);
+      if (!regPhone.test(this.phone)) {
+        Toast("手机号格式不正确");
+        return;
+      }
 
-			if (this.city == '' || this.city == undefined) {
-				Toast('请选择省市区')
-				return
-			}
+      if (this.city == "" || this.city == undefined) {
+        Toast("请选择省市区");
+        return;
+      }
 
-			if (this.address == '' || this.address == undefined) {
-				Toast('请输入详细地址')
-				return
-			}
+      if (this.address == "" || this.address == undefined) {
+        Toast("请输入详细地址");
+        return;
+      }
 
-			this.disabled = true;
+      this.disabled = true;
 
-			this.$http.post(this.$store.state.host + "/personal/saveAddressInfo.do", {
-				user_id: this.openid,
-				name: this.name,
-				phone: this.phone,
-				provinceAndCity: this.city,
-				address: this.address,
-				type: this.type
-			}, { emulateJSON: true })
-				.then(res => {
-					//发送成功
-					if (res.body.msg == 'success') {
-						Toast("保存成功");
-						let that = this;
-						setTimeout(function () {
-							that.$router.push({ path: '/Addressbook', query: { active: that.type } })
-						}, 500)
-					} else {
-						Toast("保存失败");
-					}
-					this.disabled = false;
-				}, res => {
-					//发送失败
-					Toast("网络错误");
-					this.disabled = false;
-				})
-			this.disabled = false;
-		},
-		onConfirm3(e) {//确定
-			this.city = e[0].name + ' ' + e[1].name + ' ' + e[2].name
-			this.areashow = false
-			console.log(e)
-		},
-	},
-	computed: {
-		areaList() {
-			return areaList
-		}
-	}
-}
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/saveAddressInfo.do",
+          {
+            user_id: this.openid,
+            name: this.name,
+            phone: this.phone,
+            provinceAndCity: this.city,
+            address: this.address,
+            type: this.type
+          },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              Toast("保存成功");
+              let that = this;
+              setTimeout(function() {
+                that.$router.push({
+                  path: "/Addressbook",
+                  query: { active: that.type }
+                });
+              }, 500);
+            } else {
+              Toast("保存失败");
+            }
+            this.disabled = false;
+          },
+          res => {
+            //发送失败
+            Toast("网络错误");
+            this.disabled = false;
+          }
+        );
+      this.disabled = false;
+    },
+    onConfirm3(e) {
+      //确定
+      this.city = e[0].name + " " + e[1].name + " " + e[2].name;
+      this.areashow = false;
+      console.log(e);
+    }
+  },
+  computed: {
+    areaList() {
+      return areaList;
+    }
+  }
+};
 </script>
 
 <style scoped lang="less">
 .content {
+  .form {
+    padding: 0.3rem;
 
-	.form {
-		padding: .3rem;
-
-		/deep/.van-field__value {
-			input {
-				text-align: right;
-			}
-
-		}
-	}
+    /deep/.van-field__value {
+      input {
+        text-align: right;
+      }
+    }
+  }
 }
 </style>

src/pages_bak/personinfomation.vue

@@ -1,170 +1,273 @@
 <template>
-	<div>
-		<back :title="titlename"></back>
-		<!-- 表单 -->
-		<van-form @submit="onSubmit">
-		  <van-field v-model="user.name" class="m" name="中文名" label="中文名" placeholder="请填写中文名" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.englishName" type="" name="英文名" label="英文名" placeholder="请填写英文名" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.email" class="m" type="" name="邮箱地址" label="邮箱地址" placeholder="请填写邮箱地址" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.phone" class="m" type="number" name="手机号" label="手机号" placeholder="请填写手机号" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.stationNum" type="" name="工号" label="工号" placeholder="请填写工号" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.company" class="m" type="" name="公司" label="公司" placeholder="请填写公司" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.department" class="m" type="" name="部门" label="部门" placeholder="请填写部门" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.costCenterName" class="m" type="" name="成本中心" label="成本中心" placeholder="请填写成本中心" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.build" type="" name="幢/座" label="部门" placeholder="请填写部门" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.floor" type="" name="楼层" label="楼层" placeholder="请填写楼层" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.seat" type="" name="座位" label="座位" placeholder="请填写座位" :rules="[{ required: false}]"/>
-		  <van-field v-model="user.remark" type="" name="备注" label="备注" placeholder="请填写备注" :rules="[{ required: false}]"/>
-		  <div style="margin: 16px;">
-		    <van-button round block type="info" native-type="submit">保存</van-button>
-		  </div>
-		</van-form>
-	</div>
+  <div>
+    <back :title="titlename"></back>
+    <!-- 表单 -->
+    <van-form @submit="onSubmit">
+      <van-field
+        v-model="user.name"
+        class="m"
+        name="中文名"
+        label="中文名"
+        placeholder="请填写中文名"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.englishName"
+        type=""
+        name="英文名"
+        label="英文名"
+        placeholder="请填写英文名"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.email"
+        class="m"
+        type=""
+        name="邮箱地址"
+        label="邮箱地址"
+        placeholder="请填写邮箱地址"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.phone"
+        class="m"
+        type="number"
+        name="手机号"
+        label="手机号"
+        placeholder="请填写手机号"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.stationNum"
+        type=""
+        name="工号"
+        label="工号"
+        placeholder="请填写工号"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.company"
+        class="m"
+        type=""
+        name="公司"
+        label="公司"
+        placeholder="请填写公司"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.department"
+        class="m"
+        type=""
+        name="部门"
+        label="部门"
+        placeholder="请填写部门"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.costCenterName"
+        class="m"
+        type=""
+        name="成本中心"
+        label="成本中心"
+        placeholder="请填写成本中心"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.build"
+        type=""
+        name="幢/座"
+        label="部门"
+        placeholder="请填写部门"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.floor"
+        type=""
+        name="楼层"
+        label="楼层"
+        placeholder="请填写楼层"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.seat"
+        type=""
+        name="座位"
+        label="座位"
+        placeholder="请填写座位"
+        :rules="[{ required: false }]"
+      />
+      <van-field
+        v-model="user.remark"
+        type=""
+        name="备注"
+        label="备注"
+        placeholder="请填写备注"
+        :rules="[{ required: false }]"
+      />
+      <div style="margin: 16px;">
+        <van-button round block type="info" native-type="submit"
+          >保存</van-button
+        >
+      </div>
+    </van-form>
+  </div>
 </template>
 
 <script>
-	import { Form,Toast,Field } from 'vant'
-	export default{
-		data(){
-			return {
-				titlename:"个人信息",
-				user:{},
-			}		
-		},
-		created:function() {
-			this.openid = this.$store.state.openId
-			console.log(this.openid)
-			//this.openid = '123'
-			this.getUser();
-		},
-		methods:{
-			onSubmit(){
-				if(this.user.name == '' || this.user.name == undefined){
-					Toast('请填写中文名')
-					return
-				}
-				
-				if(this.user.englishName == undefined){
-					this.user.englishName = ''
-				}
-				
-				if(this.user.email == '' || this.user.email == undefined){
-					Toast('请填写邮箱地址')
-					return
-				}
-				
-				let regEmail = new RegExp(this.$store.state.regEmail)
-				if(!regEmail.test(this.user.email)){
-					Toast('邮箱格式不正确')
-					return
-				}
-				
-				if(this.user.phone == '' || this.user.phone == undefined){
-					Toast('请填写手机号')
-					return
-				}
-				
-				let regPhone = new RegExp(this.$store.state.regPhone)
-				if(!regPhone.test(this.user.phone)){
-					Toast('手机号格式不正确')
-					return
-				}
-				
-				if(this.user.stationNum == undefined){
-					this.user.stationNum = ''
-				}
-				
-				if(this.user.company == '' || this.user.company == undefined){
-					Toast('请填写公司')
-					return
-				}
-				
-				if(this.user.department == '' || this.user.department == undefined){
-					Toast('请填写部门')
-					return
-				}
-				
-				if(this.user.costCenterName == '' || this.user.costCenterName == undefined){
-					Toast('请填写成本中心')
-					return
-				}
-				
-				if(this.user.build == undefined){
-					this.user.build = ''
-				}
-				
-				if(this.user.floor == undefined){
-					this.user.floor = ''
-				}
-				
-				if(this.user.seat == undefined){
-					this.user.seat = ''
-				}
-				
-				if(this.user.remark == undefined){
-					this.user.remark = ''
-				}
-				
-				this.$http.post(this.$store.state.host+"/personal/savePersonalInfo.do",{user_id:this.openid,
-				name:this.user.name,
-				englishName:this.user.englishName,
-				email:this.user.email,
-				phone:this.user.phone,
-				stationNum:this.user.stationNum,
-				company:this.user.company,
-				department:this.user.department,
-				costCenterName:this.user.costCenterName,
-				build:this.user.build,
-				floor:this.user.floor,
-				seat:this.user.seat,
-				remark:this.user.remark
-				},{emulateJSON:true})
-					.then(res=>{
-					    //发送成功
-					    if(res.body.msg=='success'){
-							Toast("保存成功");
-							let that = this;
-							setTimeout(function(){
-								that.$router.push({path:'/My'})
-							},500)
-					    }
-				},res=>{
-					     //发送失败
-				})
-			}
-		}
-	}
+import { Form, Toast, Field } from "vant";
+export default {
+  data() {
+    return {
+      titlename: "个人信息",
+      user: {}
+    };
+  },
+  created: function() {
+    this.openid = this.$store.state.openId;
+    console.log(this.openid);
+    //this.openid = '123'
+    this.getUser();
+  },
+  methods: {
+    onSubmit() {
+      if (this.user.name == "" || this.user.name == undefined) {
+        Toast("请填写中文名");
+        return;
+      }
+
+      if (this.user.englishName == undefined) {
+        this.user.englishName = "";
+      }
+
+      if (this.user.email == "" || this.user.email == undefined) {
+        Toast("请填写邮箱地址");
+        return;
+      }
+
+      let regEmail = new RegExp(this.$store.state.regEmail);
+      if (!regEmail.test(this.user.email)) {
+        Toast("邮箱格式不正确");
+        return;
+      }
+
+      if (this.user.phone == "" || this.user.phone == undefined) {
+        Toast("请填写手机号");
+        return;
+      }
+
+      let regPhone = new RegExp(this.$store.state.regPhone);
+      if (!regPhone.test(this.user.phone)) {
+        Toast("手机号格式不正确");
+        return;
+      }
+
+      if (this.user.stationNum == undefined) {
+        this.user.stationNum = "";
+      }
+
+      if (this.user.company == "" || this.user.company == undefined) {
+        Toast("请填写公司");
+        return;
+      }
+
+      if (this.user.department == "" || this.user.department == undefined) {
+        Toast("请填写部门");
+        return;
+      }
+
+      if (
+        this.user.costCenterName == "" ||
+        this.user.costCenterName == undefined
+      ) {
+        Toast("请填写成本中心");
+        return;
+      }
+
+      if (this.user.build == undefined) {
+        this.user.build = "";
+      }
+
+      if (this.user.floor == undefined) {
+        this.user.floor = "";
+      }
+
+      if (this.user.seat == undefined) {
+        this.user.seat = "";
+      }
+
+      if (this.user.remark == undefined) {
+        this.user.remark = "";
+      }
+
+      this.$http
+        .post(
+          this.$store.state.host + "/personal/savePersonalInfo.do",
+          {
+            user_id: this.openid,
+            name: this.user.name,
+            englishName: this.user.englishName,
+            email: this.user.email,
+            phone: this.user.phone,
+            stationNum: this.user.stationNum,
+            company: this.user.company,
+            department: this.user.department,
+            costCenterName: this.user.costCenterName,
+            build: this.user.build,
+            floor: this.user.floor,
+            seat: this.user.seat,
+            remark: this.user.remark
+          },
+          { emulateJSON: true }
+        )
+        .then(
+          res => {
+            //发送成功
+            if (res.body.msg == "success") {
+              Toast("保存成功");
+              let that = this;
+              setTimeout(function() {
+                that.$router.push({ path: "/My" });
+              }, 500);
+            }
+          },
+          res => {
+            //发送失败
+          }
+        );
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
-	/deep/.van-form{
-	  .van-button--info{
-	    background-color: #00c4b8;
-	    border: 1px solid #00c4b8;
-	    border-radius: 5px;
-	  }
-	  .m .van-field__label::before{
-		  content:"*";
-		  color: red;
-	  }
-	  .van-cell{
-	    font-size: .26rem;
-	    }
-	  .textarea{
-	    font-size: .26rem;
-	    padding: 10px 16px;
-	    color: #646566;
-	    textarea{
-	      width: 98%;
-	      height: 150px;
-	      border-color: #e5e5e5;
-	      color: #999999;
-	      margin-top: 16px;
-	      padding: 10px 1%;
-	    }
-	  }
-	}
-	/deep/.van-field__control{
-	  text-align: right;
-	}
+/deep/.van-form {
+  .van-button--info {
+    background-color: #0c2469;
+    border: 1px solid #0c2469;
+    border-radius: 5px;
+  }
+  .m .van-field__label::before {
+    content: "*";
+    color: red;
+  }
+  .van-cell {
+    font-size: 0.26rem;
+  }
+  .textarea {
+    font-size: 0.26rem;
+    padding: 10px 16px;
+    color: #646566;
+    textarea {
+      width: 98%;
+      height: 150px;
+      border-color: #e5e5e5;
+      color: #999999;
+      margin-top: 16px;
+      padding: 10px 1%;
+    }
+  }
+}
+/deep/.van-field__control {
+  text-align: right;
+}
 </style>