feat: 新增地址，切换请求地址url，修改请求逻辑，修改u-tabs组件

guzijian
1 parent 7399632e
Showing 17 changed files with 727 additions and 564 deletions
garbage-removal/.env.preview
garbage-removal/.env.production
garbage-removal/src/App.vue
garbage-removal/src/apis/address.js
garbage-removal/src/apis/company.js
garbage-removal/src/apis/index.js
garbage-removal/src/apis/user.js
garbage-removal/src/pages.json
garbage-removal/src/pages/home/address/addSite.vue
garbage-removal/src/pages/home/address/index.vue
garbage-removal/src/pages/home/index.vue
garbage-removal/src/pages/login/code.vue
garbage-removal/src/pages/login/index.vue
garbage-removal/src/pages/order/swiper-list-item/index.vue
garbage-removal/src/stores/main.js
garbage-removal/src/utils/request/request.js
garbage-removal/src/uview-plus/components/u-tabs/u-tabs.vue
-VITE_BASE_URL=http://localhost:8820
+VITE_BASE_URL=http://localhost:8080/workflow
-VITE_STOMP_URL=http://localhost:8860/ws
+VITE_STOMP_URL=http://localhost:8080/ws
-VITE_BASE_URL=http://1.14.107.94:8820
-VITE_STOMP_URL=http://localhost:8860/ws
+# VITE_BASE_URL=http://1.14.107.94:8820
+# VITE_STOMP_URL=http://localhost:8860/ws
-<script>
-export default {
-  onLaunch: function () {
-    console.log('App Launch')
-  },
-  onShow: function () {
-    console.log('App Show')
-  },
-  onHide: function () {
-    console.log('App Hide')
-  },
-}
+<script setup>
+import { onLaunch } from "@dcloudio/uni-app";
+import { useMainStore } from "./stores/index.js";
+import { setRequestToken } from "./utils/request/request.js";
+const store = useMainStore();
+
+onLaunch(async () => {
+  console.log("store::==>", store);
+  if (store.token) {
+    setRequestToken(store.token);
+    // store.userInfo = (await getUserInfo()).data.data;
+    uni.switchTab({
+      url: "/pages/home/index",
+    });
+  } else {
+    uni.reLaunch({
+      url: "/pages/login/index",
+    });
+  }
+});
 </script>
 <style lang="scss">
@@ -17,18 +25,6 @@ export default {
 @import "./uview-plus/index.scss";
 @import "./static/icon/iconfont/iconfont.css";
-html {
-  font-family: '黑体';
-}
-
-.body {
-  font-family: '黑体';
-}
-
-.container {
-  font-family: '黑体';
-}
-
 page {
   box-sizing: border-box;
   min-height: 100%;
+
+import { request } from "@/utils/request";
+/**
+ * @method 新增用户地址
+ */
+export async function addAddress( params, config) {
+  return await request.post(
+    `/user/save/address`,
+    params,
+    config
+  );
+}
+/**
+ * @method 获取用户地址
+ */
+export async function queryAddress( type) {
+  return await request.get(
+    `/user/query/address/${type}`
+  );
+}
+/**
+ * @method 编辑用户地址
+ */
+export async function updateAddress( params,config) {
+   return await request.post(
+    `/user/update/address`,
+    params,
+    config
+  );
+}
+/**
+ * @method 编辑用户地址
+ */
+export async function deleteAddress( id) {
+   return await request.delete(
+    `/user/delete/address/${id}`
+  );
+}
+import { request } from "@/utils/request";
+
+/**
+ * @method 编辑用户地址
+ */
+export async function queryDisposalSiteList() {
+   return await request.get(
+    `/enterprise/list`
+  );
+}
-export * from "./user";
@@ -6,10 +6,7 @@ const prefix = &quot;/user&quot;;
 /**
  * @method 用户登录
  */
-export async function userLogin(
-  params,
-  config
-) {
+export async function userLogin( params, config) {
   return await request.post(
     `${prefix}/login`,
     params,
@@ -27,6 +24,8 @@ export async function getUserInfo(config) {
 /**
  * @method 发送验证码
  */
-export function sendCode() {
-  return request.get(`${prefix}/sendCode`);
+export async function sendCode(params) {
+  return await request.get(
+    `${prefix}/send/verify?tel=${params}`
+  );
 }
@@ -8,6 +8,17 @@
   },
 	"pages": [
 		{
+			"path": "pages/login/index",
+			"style": {
+				"navigationBarTitleText": "装饰装修垃圾智慧功能模块登录"
+			}
+		},{
+			"path": "pages/login/code",
+			"style": {
+				"navigationBarTitleText": "输入验证码"
+			}
+		},
+		{
 			"path": "pages/home/index",
 			"style": {
 				"navigationBarTitleText": "",
@@ -40,13 +51,17 @@
 		{
 			"path": "pages/home/address/index",
 			"style": {
-				"navigationBarTitleText": "清运地址"
+				"navigationBarTitleText": "清运地址",
+				"navigationBarTextStyle":"white",
+				"navigationBarBackgroundColor":"#53c21d"
 			}
 		},
 		{
 			"path": "pages/home/address/addSite",
 			"style": {
-				"navigationBarTitleText": "清运地址"
+				"navigationBarTitleText": "清运地址",
+				"navigationBarTextStyle":"white",
+				"navigationBarBackgroundColor":"#53c21d"
 			}
 		},{
 			"path": "pages/order/index",
@@ -60,17 +75,6 @@
 			"style": {
 				"navigationBarTitleText": ""
 			}
-		},
-		{
-			"path": "pages/login/index",
-			"style": {
-				"navigationBarTitleText": "装饰装修垃圾智慧功能模块登录"
-			}
-		},{
-			"path": "pages/login/code",
-			"style": {
-				"navigationBarTitleText": "装饰装修垃圾智慧功能模块登录"
-			}
 		}
 	],
 	"tabBar": {
@@ -9,8 +9,11 @@
 						placeholder="省市区县、乡镇等"></u--input>
 				</u-form-item>
 				<u-form-item :required="true" label="详细地址" prop="addressDetail" borderBottom>
-					<u--input border="none" type="text" v-model="addressInfo.addressDetail" placeholder-class="line"
-						placeholder="请填写收货人姓名详细地址"></u--input>
+					<view class="wrap-from-container-address-details" style="display: flex;">
+						<u--input border="none" type="text" v-model="addressInfo.addressDetail" placeholder-class="line"
+							placeholder="请填写详细地址"></u--input>
+						<u-icon name="map" size="40" @click="chooseAddressDetail"></u-icon>
+					</view>
 				</u-form-item>
 				<u-form-item :required="true" label="联系人" prop="contactPerson" borderBottom>
 					<u--input border="none" type="text" v-model="addressInfo.contactPerson" placeholder-class="line"
@@ -25,24 +28,31 @@
 		<view class="bottom">
 			<view class="default">
 				<view class="left">
-					<view class="set">设置默认地址</view>
+					<view class="set">当前选中地址</view>
 				</view>
 				<view class="right">
 					<u-switch v-model="addressInfo.defaultFlag" size="40" activeColor="#a9e08f"></u-switch>
 				</view>
 			</view>
 		</view>
-		<view class="submit-button" @click="submit">
-			<view class="add">新增地址</view>
+		<view class="submit-button">
+			<view v-if="addFlag" @click="submit" class="add">新增地址</view>
+			<view v-else class="update-box">
+				<view class="del" @click="handleDeleteClick">删除地址</view>
+				<view class="update" @click="handleUpdateClick">保存地址</view>
+			</view>
 		</view>
 	</view>
 </template>
 <script setup>
+import { addAddress, deleteAddress, updateAddress } from '@/apis/address.js';
+import { onLoad } from '@dcloudio/uni-app';
 import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
 import citySelect from './citySelect/u-city-select.vue';
 const { proxy } = getCurrentInstance();
 const cityPikerShowFlag = ref(false)
+const addFlag = ref(true)
 const addressInfo = reactive({
 	addressArea: "",
 	addressDetail: "",
@@ -84,23 +94,105 @@ const rules = reactive({
 		trigger: ['change', 'blur'],
 	}]
 })
+
 const showRegionPicker = () => {
 	cityPikerShowFlag.value = true;
 }
+
 const handleCityChange = (e) => {
 	addressInfo.addressArea = e.province.label + '-' + e.city.label + '-' + e.area.label;
 }
+
+const handleDeleteClick = () => {
+	uni.showModal({
+		title: '',
+		content: '是否确认删除这个地址',
+		success: function (res) {
+			if (res.confirm) {
+				deleteAddress(addressInfo.garAddressId).then(res => {
+					if (res.data.success) {
+						uni.$u.toast(res.data.msg)
+						jumpAddressList()
+					}
+				})
+			} else if (res.cancel) {
+			}
+		}
+	});
+
+}
+
+const handleUpdateClick = () => {
+	updateAddress(addressInfo).then(res => {
+		console.log(res);
+		uni.$u.toast(res.data.msg)
+		if (res.data.success) {
+			setTimeout(() => {
+				jumpAddressList();
+			}, 200);
+		}
+	})
+}
+
+const jumpAddressList = () => {
+	reset();
+	uni.$u.route({
+		type: 'navigateBack',
+		url: `pages/home/address/index`,
+	})
+}
+
 const submit = () => {
-	console.log(addressInfo);
 	proxy.$refs.addressFrom.validate().then(res => {
-		uni.$u.toast('新增成功')
+		addAddress(addressInfo).then(res => {
+			uni.$u.toast(res.data.msg)
+			if (res.data.success) {
+				setTimeout(() => {
+					jumpAddressList();
+				}, 200);
+			}
+		})
 	}).catch(errors => {
-		uni.$u.toast('校验失败')
+		uni.$u.toast('请填写正确信息！')
 	})
 }
+/**
+ * 打开地图选择地址
+ */
+const chooseAddressDetail = () => {
+	console.log("sss");
+	uni.chooseLocation({
+		success: function (res) {
+			addressInfo.addressDetail = res.address + res.name;
+		}
+	});
+}
+
 onMounted(() => {
 	proxy.$refs.addressFrom.setRules(rules)
 })
+
+onLoad((options) => {
+	if (options.addressObj) {
+		let addressObj = JSON.parse(options.addressObj);
+		addressInfo.addressArea = addressObj.garUserAddress;
+		addressInfo.contactPerson = addressObj.garUserContactName;
+		addressInfo.contactIphoneNumber = addressObj.garUserContactTel;
+		addressInfo.defaultFlag = addressObj.garUserDefault == 1 ? true : false;
+		addressInfo.addressDetail = addressObj.garRemark;
+		addressInfo.garAddressId = addressObj.garAddressId
+		addFlag.value = false;
+	}
+})
+const reset = () => {
+	addressInfo.addressArea = ''
+	addressInfo.contactPerson = ''
+	addressInfo.contactIphoneNumber = ''
+	addressInfo.defaultFlag = false
+	addressInfo.addressDetail = ''
+	addressInfo.garAddressId = ''
+	addFlag.value = true
+}
 </script>
 <style lang="scss" scoped>
@@ -110,7 +202,7 @@ onMounted(() =&gt; {
 	// background-color: $u-info-light;
 	height: 100%;
 	width: 100%;
-	background: linear-gradient(to bottom, $u-success-disabled, $u-info-light, $u-info-light, $u-info-light);
+	background: linear-gradient(to bottom, $u-success-dark, $u-info-light, $u-info-light, $u-info-light);
 	.wrap-from-container {
 		width: 100%;
@@ -148,21 +240,51 @@ onMounted(() =&gt; {
 	.submit-button {
 		display: flex;
-		justify-content: space-around;
 		width: 600rpx;
 		line-height: 100rpx;
 		position: absolute;
 		bottom: 30rpx;
 		left: 80rpx;
-		background-color: #a9e08f;
-		border-radius: 60rpx;
 		font-size: 30rpx;
+		color: #ffffff;
 		.add {
+			background-color: #a9e08f;
+			border-radius: 60rpx;
+			width: 100%;
 			display: flex;
 			align-items: center;
-			color: #ffffff;
+			justify-content: center;
+		}
+
+		.update-box {
+			width: 100%;
+			display: flex;
+			justify-content: space-around;
+
+			.del {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 60rpx;
+				background-color: $u-error-disabled;
+				margin-right: 30rpx;
+			}
+
+			.update {
+				width: 100%;
+				background-color: $u-success-dark;
+				border-radius: 60rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+
 		}
 	}
+
+
 }
 </style>
@@ -2,16 +2,18 @@
 	<view class="address-container">
 		<view class="address-box">
 			<view class="item" v-for="(res, index) in siteList" :key="res.id">
-				<view class="top">
-					<view class="name">{{ res.name }}</view>
-					<view class="phone">{{ res.phone }}</view>
+				<view class="top" @click="handleClickChangeCurrentAddress(res)">
+					<view class="name">{{ res.garUserContactName }}</view>
+					<view class="phone">{{ res.garUserContactTel }}</view>
 					<view class="tag">
-						<text v-if="res.tag" :class="{ red: res.tag == '默认' }">{{ res.tag }}</text>
+						<text v-if="res.garUserDefault == 1" :class="{ red: res.garUserDefault == 1 }">
+							{{ res.garUserDefault == 1 ? "当前选中" : "" }}
+						</text>
 					</view>
 				</view>
 				<view class="bottom">
-					广东省深圳市宝安区 自由路66号
-					<u-icon name="edit-pen" :size="40" color="#999999"></u-icon>
+					{{ res.garUserAddress + res.garRemark }}
+					<u-icon name="edit-pen" @click="handleUpdateAddress(res)" :size="40" color="#999999"></u-icon>
 				</view>
 			</view>
@@ -23,68 +25,44 @@
 </template>
 <script setup>
-import { onLoad } from '@dcloudio/uni-app';
+import { queryAddress, updateAddress } from "@/apis/address.js";
+import { onShow } from '@dcloudio/uni-app';
 import { ref } from 'vue';
 const siteList = ref([]);
+
+
+/**
+ * 初始话数据
+ */
 const getData = () => {
-	siteList.value = [
-		{
-			id: 1,
-			name: '游X',
-			phone: '183****5523',
-			tag: '默认',
-			site: '广东省深圳市宝安区 自由路66号'
-		},
-		{
-			id: 2,
-			name: '李XX',
-			phone: '183****5555',
-			tag: '',
-			site: '广东省深圳市宝安区 翻身路xx号'
-		},
-		{
-			id: 3,
-			name: '王YY',
-			phone: '153****5555',
-			tag: '',
-			site: '广东省深圳市宝安区 平安路13号'
-		},
-		{
-			id: 4,
-			name: '王YY',
-			phone: '153****5555',
-			tag: '',
-			site: '广东省深圳市宝安区 平安路13号'
-		},
-		{
-			id: 5,
-			name: '王YY',
-			phone: '153****5555',
-			tag: '',
-			site: '广东省深圳市宝安区 平安路13号'
-		},
-		{
-			id: 6,
-			name: '王YY',
-			phone: '153****5555',
-			tag: '',
-			site: '广东省深圳市宝安区 平安路13号'
-		},
-		{
-			id: 7,
-			name: '王YY',
-			phone: '153****5555',
-			tag: '',
-			site: '广东省深圳市宝安区 平安路13号'
-		},
-		{
-			id: 8,
-			name: '王YY',
-			phone: '153****5555',
-			tag: '',
-			site: '广东省深圳市宝安区 平安路13号'
-		}
-	];
+	queryAddress("ALL").then(res => {
+		siteList.value = res.data.data;
+	})
+}
+
+// 编辑地址
+const handleUpdateAddress = (res) => {
+	let addressObj = JSON.stringify(res);
+	uni.navigateTo({
+		url: `/pages/home/address/addSite?addressObj=${addressObj}`
+	});
+}
+
+const handleClickChangeCurrentAddress = (res) => {
+	if (res.garUserDefault == 1) {
+		return
+	}
+	updateAddress({
+		addressArea: res.garUserAddress,
+		contactPerson: res.garUserContactName,
+		contactIphoneNumber: res.garUserContactTel,
+		defaultFlag: true,
+		addressDetail: res.garRemark,
+		garAddressId: res.garAddressId
+	}).then(res => {
+		getData();
+		uni.$u.toast(res.data.msg)
+	})
 }
 const toAddSite = () => {
@@ -92,8 +70,9 @@ const toAddSite = () =&gt; {
 		url: '/pages/home/address/addSite'
 	});
 }
-onLoad(() => {
+onShow(() => {
 	getData();
+
 })
 </script>
@@ -101,7 +80,7 @@ onLoad(() =&gt; {
 .address-container {
 	height: 100%;
 	width: 100%;
-	background: linear-gradient(to bottom, $u-success-disabled, $u-info-light, $u-info-light, $u-info-light);
+	background: linear-gradient(to bottom, $u-success-dark, $u-info-light, $u-info-light, $u-info-light, $u-info-light, $u-info-light, #ffffff);
 	padding: 20rpx;
 	box-sizing: border-box;
 	display: flex;
@@ -138,7 +117,7 @@ onLoad(() =&gt; {
 					text {
 						display: block;
-						width: 60rpx;
+						width: auto;
 						height: 34rpx;
 						line-height: 34rpx;
 						color: #ffffff;
@@ -9,7 +9,7 @@
       }" class="top-address">
         <view class="address-icon-image"><u-icon name="map" color="#fff" size="28"></u-icon></view>
         <view class="address-text" @click="handleAddressInfo">
-          浙江省-宁波市-海曙区-鼓楼街道南站东xxxx
+          {{ userAddress ? userAddress : "请设置清运地址" }}
         </view>
         <view class="address-icon-label">
           <u-icon name="arrow-right" color="#fff" size="28"></u-icon>
@@ -88,7 +88,9 @@
 </template>
 <script setup >
-import { onLoad } from '@dcloudio/uni-app';
+import { queryAddress } from '@/apis/address.js';
+import { queryDisposalSiteList } from '@/apis/company.js';
+import { onLoad, onShow } from '@dcloudio/uni-app';
 import { ref } from 'vue';
 // 定义最大积分
 let maxScore = 5
@@ -104,6 +106,7 @@ const swiperImageList = ref([{
   image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
 }])
+const userAddress = ref()
 // 信息指南
@@ -133,26 +136,26 @@ const companyList = ref([
     remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
     tel: '18980249130',
   }
-  // , {
-  //   companyId: '2',
-  //   score: 4,
-  //   image: 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png',
-  //   companyName: '宁波垃圾回收公司',
-  //   startPrice: '500',
-  //   cleanNumber: '1996',
-  //   remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
-  //   tel: '18980249130',
-  // },
-  // {
-  //   companyId: '3',
-  //   score: 4,
-  //   image: 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png',
-  //   companyName: '宁波垃圾回收公司',
-  //   startPrice: '500',
-  //   cleanNumber: '1996',
-  //   remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
-  //   tel: '18980249130',
-  // },
+  , {
+    companyId: '2',
+    score: 4,
+    image: 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png',
+    companyName: '宁波垃圾回收公司',
+    startPrice: '500',
+    cleanNumber: '1996',
+    remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
+    tel: '18980249130',
+  },
+  {
+    companyId: '3',
+    score: 4,
+    image: 'https://ijry.github.io/uview-plus/h5/assets/logo-8d54bbeb.png',
+    companyName: '宁波垃圾回收公司',
+    startPrice: '500',
+    cleanNumber: '1996',
+    remark: '我司专业拆除清运，装修大件垃圾的环保科技企业。',
+    tel: '18980249130',
+  },
   // {
   //   companyId: '1',
   //   score: 4,
@@ -215,29 +218,36 @@ const handleSearchClick = () =&gt; {
  * 计算胶囊高度
  */
 onLoad(() => {
-  console.log("计算胶囊高度");
+  // 积分初始化
+  for (let index = 0; index < maxScore; index++) {
+    maxStar.value.push(index);
+  }
+
+  // 获取胶囊按钮信息（width、height、top等）
   try {
-    if (topMargin.value) {
-      console.log("计算完毕");
-    }
     const { height, top } = uni.getMenuButtonBoundingClientRect();
     topMargin.value = top + "px";
-    // 获取胶囊按钮信息（width、height、top等）
     lightHeight.value = height + 'px'
-    console.log("计算完毕");
   } catch (error) {
     topMargin.value = "60rpx";
     musicheadHeight.value = "40rpx"
     console.log("There is no menu because the current app is not a small program");
   }
-  // 初始化评分
+})
+onShow(() => {
+  // 初始化数据
   initData()
 })
-
 const initData = () => {
-  for (let index = 0; index < maxScore; index++) {
-    maxStar.value.push(index);
-  }
+  userAddress.value = null;
+  // 查询用户当前地址
+  queryAddress('CURRENT').then(res => {
+    userAddress.value = res.data.data[0].garUserAddress + res.data.data[0].garRemark
+  })
+  // 查询公司信息
+  queryDisposalSiteList().then(res => {
+    console.log("company====>", res);
+  })
 }
 </script>
@@ -284,6 +294,7 @@ const initData = () =&gt; {
       width: 525rpx;
       display: flex;
       align-items: center;
+      padding-left: 20rpx;
       color: white;
       font-size: 30rpx;
       font-family: '圆体', '黑体';
@@ -395,16 +406,16 @@ const initData = () =&gt; {
         }
         .company-list-content {
-          flex: 1;
+          flex: 1 0 auto;
+          height: 0;
           box-sizing: border-box;
           margin-top: 20rpx;
           flex-shrink: 0;
-          height: 0;
           margin-bottom: 20rpx;
           width: 100%;
           .company-list-content-box {
-            height: 99%;
+            height: 100%;
             width: 100%;
             box-sizing: border-box;
             overflow: scroll;
@@ -14,77 +14,94 @@
 	</view>
 </template>
-<script>
-export default {
-	data() {
-		return {
-			verifyFlag: false,
-			iphoneNumber: "",
-			startIphoneNumber: "",
-			maxlength: 4,
-			value: '',
-			second: 10,
-			show: false
-		};
-	},
-	computed: {},
-	onLoad(options) {
-		this.iphoneNumber = options.iphoneNumber;
-		this.startIphoneNumber = this.handleIphoneNumber("" + options.iphoneNumber);
-		this.getCaptcha(this.iphoneNumber)
-		let interval = setInterval(() => {
-			this.second--;
-			if (this.second <= 0) {
-				this.show = true;
-				if (this.value.length != 4) {
-					this.verifyFlag = true;
-				}
-				clearInterval(interval);
-			}
-		}, 1000);
-	},
-	methods: {
-		handleIphoneNumber(tel) {
-			return tel.replace(tel.substring(3, 7), "****");
-		},
-		getCaptcha(iphoneNumber) {
-			console.log("获取验证码:", iphoneNumber);
-		},
-		// 收不到验证码选择时的选择
-		noCaptcha() {
-			uni.showActionSheet({
-				itemList: ['重新获取验证码'],
-				success: function (res) {
-					this.getCaptcha(this.iphoneNumber)
-				},
-				fail: function (res) {
-
-				}
-			});
-		},
-		// 校验验证码
-		checkVerifyNum(code) {
+<script setup>
+import { sendCode, userLogin } from "@/apis/user.js";
+import { useMainStore } from '@/stores/index.js';
+import { setRequestToken } from '@/utils/request/request.js';
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+const store = useMainStore();
+const verifyFlag = ref(false)
+const iphoneNumber = ref("")
+const startIphoneNumber = ref("")
+const maxlength = ref(4)
+const value = ref("")
+const second = ref(10);
+const show = ref(false)
+onLoad((options) => {
+	iphoneNumber.value = options.iphoneNumber;
+	startIphoneNumber.value = handleIphoneNumber("" + options.iphoneNumber);
+	getCaptcha(iphoneNumber.value)
+	let interval = setInterval(() => {
+		second.value--;
+		if (second.value <= 0) {
+			show.value = true
+			clearInterval(interval);
+		}
+	}, 1000);
+})
+
+const handleIphoneNumber = (tel) => {
+	return tel.replace(tel.substring(3, 7), "****");
+}
+
+const getCaptcha = (iphoneNumber) => {
+	value.value = ''
+	second.value = 10
+	show.value = false;
+	let interval = setInterval(() => {
+		second.value--;
+		if (second.value <= 0) {
+			show.value = true
+			clearInterval(interval);
+		}
+	}, 1000);
+	sendCode(iphoneNumber).then(res => {
+		console.log(res);
+	})
+}
+// 收不到验证码选择时的选择
+const noCaptcha = () => {
+	uni.showActionSheet({
+		itemList: ['重新获取验证码'],
+		success: function (res) {
+			getCaptcha(iphoneNumber.value)
 		},
-		// change事件侦听
-		change(value) {
-			if (value.length != 4) {
-				this.verifyFlag = true;
-			}
-		},
-		// 输入完验证码最后一位执行
-		finish(value) {
-			if (value.length == 4) {
-				// TODO 到首页
-				this.verifyFlag = false;
-				this.$u.route({
-					type: "switchTab",
-					url: `pages/home/index`,
-				})
-			}
+		fail: function (res) {
+
 		}
+	});
+}
+
+// 校验验证码
+const checkVerifyNum = (code) => {
+	userLogin({ loginType: 0, tel: iphoneNumber.value, code: code }).then(res => {
+		// 登录成功
+		if (res.data.success) {
+			verifyFlag.value = false;
+			setRequestToken(res.data.data)
+			store.token = res.data.data
+			uni.$u.route({
+				type: "switchTab",
+				url: `pages/home/index`,
+			})
+		} else {
+			verifyFlag.value = true;
+		}
+	})
+}
+
+// change事件侦听
+const change = (value) => {
+}
+
+// 输入完验证码最后一位执行
+const finish = (value) => {
+	if (value.length == 4) {
+		checkVerifyNum(value);
 	}
-};
+}
 </script>
 <style lang="scss" scoped>
@@ -12,9 +12,12 @@
 		</view>
 		<view class="buttom">
 			<view class="loginType">
-				<view class="wechat item" @click="handleWeixinLogin">
-					<view class="icon"><u-icon size="40" name="weixin-fill" color="rgb(83,194,64)"></u-icon></view>
-					微信
+				<view class="wechat item">
+					<button class="box" open-type="getPhoneNumber" @getphonenumber="handleWeixinLogin">
+						<view class="icon"><u-icon size="60" name="weixin-fill" color="rgb(83,194,64)"></u-icon>
+						</view>
+						微信登录
+					</button>
 				</view>
 			</view>
 			<view class="hint">
@@ -27,10 +30,11 @@
 </template>
 <script>
+import { userLogin } from "@/apis/user.js";
 export default {
 	data() {
 		return {
-			tel: ''
+			tel: '18980249160'
 		}
 	},
 	computed: {
@@ -63,18 +67,17 @@ export default {
 		handleUserAgreement() {
 			console.log("user click agreement");
 		},
-		handleWeixinLogin() {
+		handleWeixinLogin(wxInfo) {
 			uni.login({
 				provider: 'weixin',
-				success: (res) => {
-					this.code = res.code;
-					console.log('code', res.code);
-					if (res.errMsg == 'login:ok') {
-						//TODO 获取code 携带code参数调用后端接口}
-
-					}
+				success: res => {
+					userLogin({ loginType: type, encryptedData: wxInfo.detail.encryptedData, iv: wxInfo.detail.iv, wxCode: res.code })
+						.then(res => {
+							console.log(res);
+						})
 				}
-			})
+
+			});
 		}
 	}
 }
@@ -110,7 +113,7 @@ export default {
 		.getCaptcha {
 			background-color: #5ac725;
-			color: $u-tips-color;
+			color: #ffffff;
 			border: none;
 			font-size: 30rpx;
 			padding: 12rpx 0;
@@ -135,12 +138,27 @@ export default {
 			justify-content: center;
 			.item {
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				color: $u-content-color;
-				font-size: 28rpx;
+				.box {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					color: $u-content-color;
+					justify-content: center;
+					font-size: 28rpx;
+					background-color: #ffffff00;
+					border-radius: 0 !important;
+					border: 0 solid #ffffff00 !important;
+					padding: 0 !important;
+					margin: 0 !important;
+
+					&::after {
+						border: none;
+					}
+
+				}
+
 			}
+
 		}
 		.hint {
 <template>
   <view class="content-container">
-    <z-paging ref="paging" v-model="dataList" @query="queryList">
+    <z-paging ref="paging" :fixed="false" v-model="dataList" @query="queryList">
       <empty-view slot:empty></empty-view>
-      <view class="item" v-for="(item, index) in dataList">
-        <view class="item-title">{{ item }}</view>
+      <view class="content-container-item-box" v-for="(item, index) in dataList">
+        <view class="content-container-item-box-title">{{ item }}</view>
       </view>
     </z-paging>
   </view>
@@ -23,6 +23,7 @@ const props = defineProps({
 const paging = ref(null)
 const dataList = ref([])
 const count = ref(0)
+const timer = ref()
 const queryList = (pageNo, pageSize) => {
   //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
   //这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
@@ -33,12 +34,13 @@ const queryList = (pageNo, pageSize) =&gt; {
     return
   }
   if (++count.value < 3) {
-
+    clearTimeout(timer.value)
+    timer.value = setTimeout(() => {
+      console.log("hhhh");
+      paging.value.complete([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+    }, 500);
   }
-  setInterval(() => {
-    paging.value.complete([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
-  }, 500);
-  paging.value.complete([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+
   // }).catch(res => {
   //   //如果请求失败写paging.value.complete(false)，会自动展示错误页面
   //   //注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
@@ -12,7 +12,7 @@ export const useMainStore = defineStore(
     persist: {
       enabled: true,
       H5Storage: localStorage,
-       // 调整为兼容多端的API
+      // 调整为兼容多端的API
       storage: {
         setItem(key, value) {
           uni.setStorageSync(key, value)
@@ -54,34 +54,32 @@ const instance = axios.create({
 });
 // 请求拦截器
 instance.interceptors.request.use((config) => {
-  console.log("请求拦截器", config);
-
   return config;
 });
 // 响应拦截器
 instance.interceptors.response.use((response) => {
-  console.log("响应拦截器", response);
   if (response.data.code != 200) {
     uni.showToast({
       title: response.data.message,
       icon: "none",
     });
     if (response.data.code == 401) {
-      uni.navigateTo({
-        url: "/pages/login/index",
-      });
+      reSetLoginStatus();
     }
   }
   return response;
-},(error) => {
+}, (error) => {
 	if (error.response.status) {
 		switch (error.response.status) {
-			case 401:
+      case 401:
+      case 403:
+        setRequestToken(null);
 				break;
 			default:
 				break;
 		}
-	}
+  }
+    uni.$u.toast("网络波动请再试~")
     return Promise.reject(error)
 });
 export default instance;
@@ -89,3 +87,10 @@ export default instance;
 export function setRequestToken(token) {
   instance.defaults.headers.common["Authorization"] = `${token}`;
 }
+
+const reSetLoginStatus = () => {
+  uni.navigateTo({
+      type: "reLaunch",
+      url: "/pages/login/index",
+    });
+}
@@ -3,34 +3,16 @@
 		<view class="u-tabs__wrapper">
 			<slot name="left" />
 			<view class="u-tabs__wrapper__scroll-view-wrapper">
-				<scroll-view
-					:scroll-x="scrollable"
-					:scroll-left="scrollLeft"
-					scroll-with-animation
-					class="u-tabs__wrapper__scroll-view"
-					:show-scrollbar="false"
-					ref="u-tabs__wrapper__scroll-view"
-				>
-					<view
-						class="u-tabs__wrapper__nav"
-						ref="u-tabs__wrapper__nav"
-					>
-						<view
-							class="u-tabs__wrapper__nav__item"
-							v-for="(item, index) in list"
-							:key="index"
-							@tap="clickHandler(item, index)"
-							:ref="`u-tabs__wrapper__nav__item-${index}`"
-							:style="[$u.addStyle(itemStyle), {flex: scrollable ? '' : 1}]"
-							:class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
-						>
-							<text
-								:class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
-								class="u-tabs__wrapper__nav__item__text"
-								:style="[textStyle(index)]"
-							>{{ item[keyName] }}</text>
-							<u-badge
-								:show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
+				<scroll-view :scroll-x="scrollable" :scroll-left="scrollLeft" scroll-with-animation
+					class="u-tabs__wrapper__scroll-view" :show-scrollbar="false" ref="u-tabs__wrapper__scroll-view">
+					<view class="u-tabs__wrapper__nav" ref="u-tabs__wrapper__nav">
+						<view class="u-tabs__wrapper__nav__item" v-for="(item, index) in list" :key="index"
+							@tap="clickHandler(item, index)" :ref="`u-tabs__wrapper__nav__item-${index}`"
+							:style="[$u.addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
+							:class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']">
+							<text :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
+								class="u-tabs__wrapper__nav__item__text" :style="[textStyle(index)]">{{ item[keyName] }}</text>
+							<u-badge :show="!!(item.badge && (item.badge.show || item.badge.isDot || item.badge.value))"
 								:isDot="item.badge && item.badge.isDot || propsBadge.isDot"
 								:value="item.badge && item.badge.value || propsBadge.value"
 								:max="item.badge && item.badge.max || propsBadge.max"
@@ -41,35 +23,26 @@
 								:shape="item.badge && item.badge.shape || propsBadge.shape"
 								:numberType="item.badge && item.badge.numberType || propsBadge.numberType"
 								:inverted="item.badge && item.badge.inverted || propsBadge.inverted"
-								customStyle="margin-left: 4px;"
-							></u-badge>
+								customStyle="margin-left: 4px;"></u-badge>
 						</view>
 						<!-- #ifdef APP-NVUE -->
-						<view
-							class="u-tabs__wrapper__nav__line"
-							ref="u-tabs__wrapper__nav__line"
-							:style="[{
-								width: $u.addUnit(lineWidth),
-								height: $u.addUnit(lineHeight),
-								background: lineColor,
-								backgroundSize: lineBgSize,
-							}]"
-						>
+						<view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line" :style="[{
+							width: $u.addUnit(lineWidth),
+							height: $u.addUnit(lineHeight),
+							background: lineColor,
+							backgroundSize: lineBgSize,
+						}]">
 						</view>
 						<!-- #endif -->
 						<!-- #ifndef APP-NVUE -->
-						<view
-							class="u-tabs__wrapper__nav__line"
-							ref="u-tabs__wrapper__nav__line"
-							:style="[{
-								width: $u.addUnit(lineWidth),
-								transform: `translate(${lineOffsetLeft}px)`,
-								transitionDuration: `${firstTime ? 0 : duration}ms`,
-								height: $u.addUnit(lineHeight),
-								background: lineColor,
-								backgroundSize: lineBgSize,
-							}]"
-						>
+						<view class="u-tabs__wrapper__nav__line" ref="u-tabs__wrapper__nav__line" :style="[{
+							width: $u.addUnit(lineWidth),
+							transform: `translate(${lineOffsetLeft}px)`,
+							transitionDuration: `${firstTime ? 0 : duration}ms`,
+							height: $u.addUnit(lineHeight),
+							background: lineColor,
+							backgroundSize: lineBgSize,
+						}]">
 						</view>
 						<!-- #endif -->
 					</view>
@@ -81,278 +54,268 @@
 </template>
 <script>
-	// #ifdef APP-NVUE
-	const animation = uni.requireNativePlugin('animation')
-	const dom = uni.requireNativePlugin('dom')
-	// #endif
-	import props from './props.js';
-	import mpMixin from '../../libs/mixin/mpMixin.js';
-	import mixin from '../../libs/mixin/mixin.js';
-	/**
-	 * Tabs 标签
-	 * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
-	 * @tutorial https://ijry.github.io/uview-plus/components/tabs.html
-	 * @property {String | Number}	duration			滑块移动一次所需的时间，单位秒（默认 200 ）
-	 * @property {String | Number}	swierWidth			swiper的宽度（默认 '750rpx' ）
-	 * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
-	 * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
-	 * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
-	 * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
-	 */
-	export default {
-		name: 'u-tabs',
-		mixins: [mpMixin, mixin, props],
-		data() {
-			return {
-				firstTime: true,
-				scrollLeft: 0,
-				scrollViewWidth: 0,
-				lineOffsetLeft: 0,
-				tabsRect: {
-					left: 0
-				},
-				innerCurrent: 0,
-				moving: false,
+// #ifdef APP-NVUE
+const animation = uni.requireNativePlugin('animation')
+const dom = uni.requireNativePlugin('dom')
+// #endif
+import mixin from '../../libs/mixin/mixin.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import props from './props.js';
+/**
+ * Tabs 标签
+ * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
+ * @tutorial https://ijry.github.io/uview-plus/components/tabs.html
+ * @property {String | Number}	duration			滑块移动一次所需的时间，单位秒（默认 200 ）
+ * @property {String | Number}	swierWidth			swiper的宽度（默认 '750rpx' ）
+ * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
+ * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
+ * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
+ * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+ */
+export default {
+	name: 'u-tabs',
+	mixins: [mpMixin, mixin, props],
+	data() {
+		return {
+			firstTime: true,
+			scrollLeft: 0,
+			scrollViewWidth: 0,
+			lineOffsetLeft: 0,
+			tabsRect: {
+				left: 0
+			},
+			innerCurrent: 0,
+			moving: false,
+		}
+	},
+	watch: {
+		current: {
+			immediate: true,
+			handler(newValue, oldValue) {
+				// 内外部值不相等时，才尝试移动滑块
+				if (newValue !== this.innerCurrent) {
+					this.innerCurrent = newValue
+					this.$nextTick(() => {
+						this.resize()
+					})
+				}
 			}
 		},
-		watch: {
-			current: {
-				immediate: true,
-				handler (newValue, oldValue) {
-					// 内外部值不相等时，才尝试移动滑块
-					if (newValue !== this.innerCurrent) {
-						this.innerCurrent = newValue
-						this.$nextTick(() => {
-							this.resize()
-						})
-					}
+		// list变化时，重新渲染list各项信息
+		list() {
+			this.$nextTick(() => {
+				this.resize()
+			})
+		}
+	},
+	computed: {
+		textStyle() {
+			return index => {
+				const style = {}
+				// 取当期是否激活的样式
+				const customeStyle = index === this.innerCurrent ? uni.$u.addStyle(this.activeStyle) : uni.$u
+					.addStyle(
+						this.inactiveStyle)
+				// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
+				if (this.list[index].disabled) {
+					style.color = '#c8c9cc'
 				}
-			},
-			// list变化时，重新渲染list各项信息
-			list() {
-				this.$nextTick(() => {
-					this.resize()
-				})
+				return uni.$u.deepMerge(customeStyle, style)
 			}
 		},
-		computed: {
-			textStyle() {
-				return index => {
-					const style = {}
-					// 取当期是否激活的样式
-					const customeStyle = index === this.innerCurrent ? uni.$u.addStyle(this.activeStyle) : uni.$u
-						.addStyle(
-							this.inactiveStyle)
-					// 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
-					if (this.list[index].disabled) {
-						style.color = '#c8c9cc'
-					}
-					return uni.$u.deepMerge(customeStyle, style)
-				}
-			},
-			propsBadge() {
-				return uni.$u.props.badge
+		propsBadge() {
+			return uni.$u.props.badge
+		}
+	},
+	async mounted() {
+		this.init()
+	},
+	emits: ['click', 'change'],
+	methods: {
+		setLineLeft() {
+			const tabItem = this.list[this.innerCurrent];
+			if (!tabItem) {
+				return;
+			}
+			// 获取滑块该移动的位置
+			let lineOffsetLeft = this.list
+				.slice(0, this.innerCurrent)
+				.reduce((total, curr) => total + curr.rect.width, 0);
+			// 获取下划线的数值px表示法
+			const lineWidth = uni.$u.getPx(this.lineWidth);
+			this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
+			// #ifdef APP-NVUE
+			// 第一次移动滑块，无需过渡时间
+			this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
+			// #endif
+
+			// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
+			// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
+			if (this.firstTime) {
+				setTimeout(() => {
+					this.firstTime = false
+				}, 10);
 			}
 		},
-		async mounted() {
-			this.init()
+		// nvue下设置滑块的位置
+		animation(x, duration = 0) {
+			// #ifdef APP-NVUE
+			const ref = this.$refs['u-tabs__wrapper__nav__line']
+			animation.transition(ref, {
+				styles: {
+					transform: `translateX(${x}px)`
+				},
+				duration
+			})
+			// #endif
 		},
-		emits: ['click', 'change'],
-		methods: {
-			setLineLeft() {
-				const tabItem = this.list[this.innerCurrent];
-				if (!tabItem) {
-					return;
-				}
-				// 获取滑块该移动的位置
-				let lineOffsetLeft = this.list
-					.slice(0, this.innerCurrent)
-					.reduce((total, curr) => total + curr.rect.width, 0);
-                // 获取下划线的数值px表示法
-				const lineWidth = uni.$u.getPx(this.lineWidth);
-				this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2
-				// #ifdef APP-NVUE
-				// 第一次移动滑块，无需过渡时间
-				this.animation(this.lineOffsetLeft, this.firstTime ? 0 : parseInt(this.duration))
-				// #endif
-
-				// 如果是第一次执行此方法，让滑块在初始化时，瞬间滑动到第一个tab item的中间
-				// 这里需要一个定时器，因为在非nvue下，是直接通过style绑定过渡时间，需要等其过渡完成后，再设置为false(非第一次移动滑块)
-				if (this.firstTime) {
-					setTimeout(() => {
-						this.firstTime = false
-					}, 10);
-				}
-			},
-			// nvue下设置滑块的位置
-			animation(x, duration = 0) {
-				// #ifdef APP-NVUE
-				const ref = this.$refs['u-tabs__wrapper__nav__line']
-				animation.transition(ref, {
-					styles: {
-						transform: `translateX(${x}px)`
-					},
-					duration
-				})
-				// #endif
-			},
-			// 点击某一个标签
-			clickHandler(item, index) {
-				// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
-				this.$emit('click', {
-					...item,
-					index
-				})
-				// 如果disabled状态，返回
-				if (item.disabled) return
-				this.innerCurrent = index
+		// 点击某一个标签
+		clickHandler(item, index) {
+			// 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
+			this.$emit('click', {
+				...item,
+				index
+			})
+			// 如果disabled状态，返回
+			if (item.disabled) return
+			this.innerCurrent = index
+			this.resize()
+			this.$emit('change', {
+				...item,
+				index
+			})
+		},
+		init() {
+			uni.$u.sleep().then(() => {
 				this.resize()
-				this.$emit('change', {
-					...item,
-					index
-				})
-			},
-			init() {
-				uni.$u.sleep().then(() => {
-					this.resize()
-				})
-			},
-			setScrollLeft() {
-				// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
-				const tabRect = this.list[this.innerCurrent]
-				// 累加得到当前item到左边的距离
-				const offsetLeft = this.list
-					.slice(0, this.innerCurrent)
-					.reduce((total, curr) => {
-						return total + curr.rect.width
-					}, 0)
-				// 此处为屏幕宽度
-				const windowWidth = uni.$u.sys().windowWidth
-				// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
-				let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
-					.right) / 2 + this.tabsRect.left / 2
-				// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
-				scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
-				this.scrollLeft = Math.max(0, scrollLeft)
-			},
-			// 获取所有标签的尺寸
-			resize() {
-				// 如果不存在list，则不处理
-				if(this.list.length === 0) {
-					return
-				}
-				Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
-					this.tabsRect = tabsRect
-					this.scrollViewWidth = 0
-					itemRect.map((item, index) => {
-						// 计算scroll-view的宽度，这里
-						this.scrollViewWidth += item.width
-						// 另外计算每一个item的中心点X轴坐标
-						this.list[index].rect = item
-					})
-					// 获取了tabs的尺寸之后，设置滑块的位置
-					this.setLineLeft()
-					this.setScrollLeft()
-				})
-			},
-			// 获取导航菜单的尺寸
-			getTabsRect() {
-				return new Promise(resolve => {
-					this.queryRect('u-tabs__wrapper__scroll-view').then(size => resolve(size))
-				})
-			},
-			// 获取所有标签的尺寸
-			getAllItemRect() {
-				return new Promise(resolve => {
-					const promiseAllArr = this.list.map((item, index) => this.queryRect(
-						`u-tabs__wrapper__nav__item-${index}`, true))
-					Promise.all(promiseAllArr).then(sizes => resolve(sizes))
-				})
-			},
-			// 获取各个标签的尺寸
-			queryRect(el, item) {
-				// #ifndef APP-NVUE
-				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
-				// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
-				return new Promise(resolve => {
-					this.$uGetRect(`.${el}`).then(size => {
-						resolve(size)
-					})
+			})
+		},
+		setScrollLeft() {
+			// 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+			const tabRect = this.list[this.innerCurrent]
+			// 累加得到当前item到左边的距离
+			const offsetLeft = this.list
+				.slice(0, this.innerCurrent)
+				.reduce((total, curr) => {
+					return total + curr.rect.width
+				}, 0)
+			// 此处为屏幕宽度
+			const windowWidth = uni.$u.sys().windowWidth
+			// 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
+			let scrollLeft = offsetLeft - (this.tabsRect.width - tabRect.rect.width) / 2 - (windowWidth - this.tabsRect
+				.right) / 2 + this.tabsRect.left / 2
+			// 这里做一个限制，限制scrollLeft的最大值为整个scroll-view宽度减去tabs组件的宽度
+			scrollLeft = Math.min(scrollLeft, this.scrollViewWidth - this.tabsRect.width)
+			this.scrollLeft = Math.max(0, scrollLeft)
+		},
+		// 获取所有标签的尺寸
+		resize() {
+			// 如果不存在list，则不处理
+			if (this.list.length === 0) {
+				return
+			}
+			Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+				this.tabsRect = tabsRect
+				this.scrollViewWidth = 0
+				itemRect.map((item, index) => {
+					// 计算scroll-view的宽度，这里
+					this.scrollViewWidth += item.width
+					// 另外计算每一个item的中心点X轴坐标
+					this.list[index].rect = item
 				})
-				// #endif
-
-				// #ifdef APP-NVUE
-				// nvue下，使用dom模块查询元素高度
-				// 返回一个promise，让调用此方法的主体能使用then回调
-				return new Promise(resolve => {
-					dom.getComponentRect(item ? this.$refs[el][0] : this.$refs[el], res => {
-						resolve(res.size)
-					})
+				// 获取了tabs的尺寸之后，设置滑块的位置
+				this.setLineLeft()
+				this.setScrollLeft()
+			})
+		},
+		// 获取导航菜单的尺寸
+		getTabsRect() {
+			return new Promise(resolve => {
+				this.queryRect('u-tabs__wrapper__scroll-view').then(size => resolve(size))
+			})
+		},
+		// 获取所有标签的尺寸
+		getAllItemRect() {
+			return new Promise(resolve => {
+				const promiseAllArr = this.list.map((item, index) => this.queryRect(
+					`u-tabs__wrapper__nav__item-${index}`, true))
+				Promise.all(promiseAllArr).then(sizes => resolve(sizes))
+			})
+		},
+		// 获取各个标签的尺寸
+		queryRect(el, item) {
+			// #ifndef APP-NVUE
+			// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://ijry.github.io/uview-plus/js/getRect.html
+			// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+			return new Promise(resolve => {
+				this.$uGetRect(`.${el}`).then(size => {
+					resolve(size)
 				})
-				// #endif
-			},
+			})
+			// #endif
 		},
-	}
+	},
+}
 </script>
 <style lang="scss" scoped>
-	@import "../../libs/css/components.scss";
+@import "../../libs/css/components.scss";
+
+.u-tabs {
-	.u-tabs {
+	&__wrapper {
+		@include flex;
+		align-items: center;
+
+		&__scroll-view-wrapper {
+			flex: 1;
+			/* #ifndef APP-NVUE */
+			overflow: auto hidden;
+			/* #endif */
+		}
-		&__wrapper {
+		&__scroll-view {
 			@include flex;
-			align-items: center;
+			flex: 1;
+		}
-			&__scroll-view-wrapper {
-				flex: 1;
-				/* #ifndef APP-NVUE */
-				overflow: auto hidden;
-				/* #endif */
-			}
+		&__nav {
+			@include flex;
+			position: relative;
-			&__scroll-view {
+			&__item {
+				padding: 0 11px;
 				@include flex;
-				flex: 1;
-			}
+				align-items: center;
+				justify-content: center;
-			&__nav {
-				@include flex;
-				position: relative;
+				&--disabled {
+					/* #ifndef APP-NVUE */
+					cursor: not-allowed;
+					/* #endif */
+				}
-				&__item {
-					padding: 0 11px;
-					@include flex;
-					align-items: center;
-					justify-content: center;
+				&__text {
+					font-size: 15px;
+					color: $u-content-color;
 					&--disabled {
-						/* #ifndef APP-NVUE */
-						cursor: not-allowed;
-						/* #endif */
-					}
-
-					&__text {
-						font-size: 15px;
-						color: $u-content-color;
-
-						&--disabled {
-							color: $u-disabled-color !important;
-						}
+						color: $u-disabled-color !important;
 					}
 				}
+			}
-				&__line {
-					height: 3px;
-					background: $u-primary;
-					width: 30px;
-					position: absolute;
-					bottom: 2px;
-					border-radius: 100px;
-					transition-property: transform;
-					transition-duration: 300ms;
-				}
+			&__line {
+				height: 3px;
+				background: $u-primary;
+				width: 30px;
+				position: absolute;
+				bottom: 2px;
+				border-radius: 100px;
+				transition-property: transform;
+				transition-duration: 300ms;
 			}
 		}
 	}
+}
 </style>