xiaoxin hace 3 años
padre
commit
da21cf6321

+ 18 - 0
pages.json

@@ -197,6 +197,24 @@
 					"navigationBarTitleText": "维修记录",
 					"navigationBarTitleText": "维修记录",
 					"enablePullDownRefresh": false
 					"enablePullDownRefresh": false
 				}
 				}
+			}, {
+				"path": "transferOrder/transferOrder",
+				"style": {
+					"navigationBarTitleText": "转单审核",
+					"enablePullDownRefresh": false
+				}
+			}, {
+				"path": "help/help",
+				"style": {
+					"navigationBarTitleText": "协作审核",
+					"enablePullDownRefresh": false
+				}
+			}, {
+				"path": "helpPeople/helpPeople",
+				"style": {
+					"navigationBarTitleText": "协作人",
+					"enablePullDownRefresh": false
+				}
 			}]
 			}]
 		},
 		},
 		{
 		{

+ 9 - 5
pagesRepairs/box/box.vue

@@ -45,7 +45,7 @@ export default {
 		Tabbar
 		Tabbar
 	},
 	},
 	mounted() {
 	mounted() {
-		this.list = this.workerList
+		this.list = this.adminList
 		this.show = this.list[0].show
 		this.show = this.list[0].show
 		uni.setNavigationBarTitle({
 		uni.setNavigationBarTitle({
 			title: this.list[0].text
 			title: this.list[0].text
@@ -128,22 +128,26 @@ export default {
 			adminList: [
 			adminList: [
 				{
 				{
 					text: '首页',
 					text: '首页',
-					icon: 'home',
+					imgUrl: '../../static/images/repairsImg/home.png',
+					imgUrlActive: '../../static/images/repairsImg/home-active.png',
 					show: 'home'
 					show: 'home'
 				},
 				},
 				{
 				{
 					text: '工单管理',
 					text: '工单管理',
-					icon: 'list-dot',
+					imgUrl: '../../static/images/repairsImg/management.png',
+					imgUrlActive: '../../static/images/repairsImg/management-active.png',
 					show: 'management'
 					show: 'management'
 				},
 				},
 				{
 				{
 					text: '待处理池',
 					text: '待处理池',
-					icon: 'warning',
+					imgUrl: '../../static/images/repairsImg/myRepairs.png',
+					imgUrlActive: '../../static/images/repairsImg/myRepairs-active.png',
 					show: 'pending'
 					show: 'pending'
 				},
 				},
 				{
 				{
 					text: '通讯录',
 					text: '通讯录',
-					icon: 'phone',
+					imgUrl: '../../static/images/repairsImg/addressBook.png',
+					imgUrlActive: '../../static/images/repairsImg/addressBook-active.png',
 					show: 'addressBook'
 					show: 'addressBook'
 				}
 				}
 			]
 			]

+ 137 - 0
pagesRepairs/help/help.vue

@@ -0,0 +1,137 @@
+<template>
+	<view class="container">
+		<view class="title">协作对象</view>
+
+		<view class="box" @click="handleHelpPeople">
+			<img src="../../static/images/repairsImg/peoples.png" />
+			<view class="box_info">张三、李四、王麻子</view>
+			<img class="img" src="../../static/images/repairsImg/right.png" />
+		</view>
+
+		<view class="title">转单语音说明</view>
+
+		<!-- 录音区域 -->
+		<view class="voice">
+			<view class="voice_box">
+				<img src="../../static/images/repairsImg/voice.png" />
+			</view>
+			点击录音
+		</view>
+
+		<view class="title">备注</view>
+
+		<view class="textarea">
+			<textarea placeholder-style="color:#CCCCCC" placeholder="请输入协作说明"></textarea>
+		</view>
+
+		<view class="btn">确认</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {}
+	},
+	methods: {
+		handleHelpPeople() {
+			uni.navigateTo({
+				url: '/pagesRepairs/helpPeople/helpPeople'
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	box-sizing: border-box;
+	padding: 0 30rpx;
+
+	.title {
+		display: flex;
+		align-items: center;
+		height: 107rpx;
+		font-size: 36rpx;
+		font-weight: bold;
+	}
+
+	.box {
+		display: flex;
+		align-items: center;
+		height: 94rpx;
+		font-size: 32rpx;
+		border-radius: 10rpx;
+		border: 1rpx solid #cccccc;
+
+		.box_info {
+			flex: 1;
+		}
+
+		img {
+			margin: 0 14rpx 0 30rpx;
+			width: 48rpx;
+			height: 48rpx;
+		}
+
+		.img {
+			width: 40rpx;
+			height: 40rpx;
+		}
+	}
+
+	.voice {
+		display: flex;
+		align-items: center;
+		height: 94rpx;
+		font-size: 32rpx;
+		color: #cccccc;
+		border-radius: 10rpx;
+		border: 1rpx solid #cccccc;
+
+		.voice_box {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin: 0 38rpx 0 33rpx;
+			width: 101rpx;
+			height: 47rpx;
+			border-radius: 33rpx;
+			box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);
+
+			img {
+				width: 33rpx;
+				height: 33rpx;
+			}
+		}
+	}
+
+	.textarea {
+		height: 310rpx;
+		border-radius: 10rpx;
+		border: 1rpx solid #cccccc;
+
+		textarea {
+			box-sizing: border-box;
+			padding: 25rpx 35rpx;
+			width: 100%;
+			font-size: 32rpx;
+		}
+	}
+
+	.btn {
+		position: absolute;
+		bottom: 66rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin: auto;
+		width: 690rpx;
+		height: 100rpx;
+		color: #fff;
+		font-size: 32rpx;
+		border-radius: 12rpx;
+		background-color: #6fb6b8;
+	}
+}
+</style>

+ 212 - 0
pagesRepairs/helpPeople/helpPeople.vue

@@ -0,0 +1,212 @@
+<template>
+	<view class="container">
+		<!-- 输入框区域 -->
+		<view class="search">
+			<img src="../../static/images/repairsImg/search.png" />
+
+			<input type="text" placeholder="请输入搜索内容" />
+		</view>
+
+		<!-- 协作人区域 -->
+		<view class="body">
+			<!-- 每一个协作人区域 -->
+			<view class="body_item" v-for="item in list" :key="item.id" @click="change(item)">
+				<radio color="#6FB6B8" :checked="item.checked" />
+				<img src="../../static/images/repairsImg/photo.png" />
+				<view class="item_info">
+					<view class="info_msg">
+						{{ item.name }}
+						<view class="msg_work">{{ item.work }}</view>
+					</view>
+					<view class="info_phone">{{ item.phone }}</view>
+				</view>
+				<view class="item_type color_type" v-if="item.type === 1">接单中</view>
+				<view class="item_type color_type2" v-if="item.type === 2">订单饱和</view>
+				<view class="item_type color_type3" v-if="item.type === 3">停止接单</view>
+			</view>
+		</view>
+
+		<view class="btn" v-if="checkList.length">确认派单</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			list: [
+				{
+					id: 1,
+					name: '张三',
+					phone: '13659856958',
+					work: '电工',
+					type: 1,
+					checked: false
+				},
+				{
+					id: 2,
+					name: '李四',
+					phone: '13659856958',
+					work: '电工',
+					type: 2,
+					checked: false
+				},
+				{
+					id: 3,
+					name: '张三',
+					phone: '13659856958',
+					work: '电工',
+					type: 3,
+					checked: false
+				},
+				{
+					id: 4,
+					name: '张三',
+					phone: '13659856958',
+					work: '电工',
+					type: 1,
+					checked: false
+				},
+				{
+					id: 5,
+					name: '李四',
+					phone: '13659856958',
+					work: '电工',
+					type: 2,
+					checked: false
+				},
+				{
+					id: 6,
+					name: '张三',
+					phone: '13659856958',
+					work: '电工',
+					type: 3,
+					checked: false
+				}
+			],
+			checkList: []
+		}
+	},
+	methods: {
+		change(item) {
+			item.checked = !item.checked
+			let temList = []
+			this.list.forEach((item) => {
+				if (item.checked) {
+					temList.push(item.id)
+				}
+			})
+			// console.log(temList)
+			this.checkList = temList
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	.search {
+		display: flex;
+		align-items: center;
+		margin: 30rpx auto 30rpx;
+		width: 690rpx;
+		height: 80rpx;
+		border-radius: 4rpx;
+		background-color: #f2f2f2;
+
+		img {
+			margin: 0 20rpx;
+			width: 40rpx;
+			height: 40rpx;
+		}
+
+		input {
+			flex: 1;
+			padding: 10rpx;
+		}
+	}
+
+	.body {
+		height: 810rpx;
+		border-top: 1rpx solid #e5e5e5;
+		overflow-y: auto;
+
+		.body_item {
+			display: flex;
+			align-items: center;
+			padding: 0 30rpx;
+			height: 162rpx;
+			border-bottom: 1rpx solid #e5e5e5;
+
+			img {
+				margin: 0 24rpx 0 27rpx;
+				width: 82rpx;
+				height: 82rpx;
+				border-radius: 50%;
+			}
+
+			.item_info {
+				display: flex;
+				flex-direction: column;
+
+				.info_msg {
+					display: flex;
+					align-items: center;
+					font-size: 32rpx;
+					font-weight: bold;
+
+					.msg_work {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						margin-left: 13rpx;
+						padding: 0 10rpx;
+						height: 32rpx;
+						color: #6fb6b8;
+						font-size: 24rpx;
+						font-weight: 400;
+						border-radius: 7rpx;
+						border: 1rpx solid #6fb6b8;
+					}
+				}
+
+				.info_phone {
+					margin-top: 10rpx;
+					color: #808080;
+					font-size: 28rpx;
+				}
+			}
+
+			.item_type {
+				margin-left: auto;
+				font-size: 24rpx;
+			}
+
+			.color_type {
+				color: #6fb6b8;
+			}
+			.color_type2 {
+				color: #1e7dfb;
+			}
+			.color_type3 {
+				color: #ff5733;
+			}
+		}
+	}
+
+	.btn {
+		position: absolute;
+		bottom: 66rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin: 0 30rpx;
+		width: 690rpx;
+		height: 100rpx;
+		color: #fff;
+		font-size: 32rpx;
+		border-radius: 12rpx;
+		background-color: #6fb6b8;
+	}
+}
+</style>

+ 75 - 2
pagesRepairs/home/home.vue

@@ -1,9 +1,9 @@
 <template>
 <template>
 	<view class="container">
 	<view class="container">
-		<view class="top_bg"></view>
+		<view class="top_bg" @click="permission = !permission"></view>
 
 
 		<!-- 状态统计区域 -->
 		<!-- 状态统计区域 -->
-		<view class="top_types">
+		<view class="top_types" v-if="!permission">
 			<view class="types_box">
 			<view class="types_box">
 				<view class="box_num">100</view>
 				<view class="box_num">100</view>
 				<view class="box_info">工单数</view>
 				<view class="box_info">工单数</view>
@@ -23,6 +23,31 @@
 			</view>
 			</view>
 		</view>
 		</view>
 
 
+		<view class="top_types2" v-else>
+			<view class="top">
+				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#6FB6B8"></uni-segmented-control>
+			</view>
+			<view class="bottom">
+				<view class="bottom_box">
+					<view class="box_num">100</view>
+					<view class="box_info">工单数</view>
+				</view>
+
+				<view class="bottom_box">
+					<view class="box_num">10</view>
+					<view class="box_info">处理中</view>
+				</view>
+				<view class="bottom_box">
+					<view class="box_num">50</view>
+					<view class="box_info">已完成</view>
+				</view>
+				<view class="bottom_box">
+					<view class="box_num">60</view>
+					<view class="box_info">已超时</view>
+				</view>
+			</view>
+		</view>
+
 		<!-- 排班区域 -->
 		<!-- 排班区域 -->
 		<view class="watch">
 		<view class="watch">
 			<view class="watch_title">
 			<view class="watch_title">
@@ -74,6 +99,9 @@
 export default {
 export default {
 	data() {
 	data() {
 		return {
 		return {
+			permission: true,
+			items: ['团队数据统计', '个人数据统计'],
+			current: 0,
 			chartData: {
 			chartData: {
 				categories: ['张三', '李四', '王五', '老六', '刘八'],
 				categories: ['张三', '李四', '王五', '老六', '刘八'],
 				series: [
 				series: [
@@ -161,6 +189,12 @@ export default {
 			uni.navigateTo({
 			uni.navigateTo({
 				url: '/pagesRepairs/message/message'
 				url: '/pagesRepairs/message/message'
 			})
 			})
+		},
+		onClickItem(e) {
+			if (this.current != e.currentIndex) {
+				this.current = e.currentIndex
+				console.log(this.current)
+			}
 		}
 		}
 	}
 	}
 }
 }
@@ -205,6 +239,45 @@ export default {
 		}
 		}
 	}
 	}
 
 
+	.top_types2 {
+		box-sizing: border-box;
+		margin: auto;
+		margin-top: -100rpx;
+		padding: 0 30rpx;
+		width: 690rpx;
+		height: 282rpx;
+		border-radius: 10rpx;
+		box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);
+		background-color: #fff;
+
+		.top {
+			height: 112rpx;
+			border-bottom: 1rpx solid #e6e6e6;
+		}
+
+		.bottom {
+			display: flex;
+			justify-content: space-evenly;
+			height: 170rpx;
+
+			.bottom_box {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				.box_num {
+					font-size: 46rpx;
+					color: #ff5733;
+				}
+				.box_info {
+					margin-top: 10rpx;
+					font-size: 34rpx;
+				}
+			}
+		}
+	}
+
 	.watch {
 	.watch {
 		box-sizing: border-box;
 		box-sizing: border-box;
 		margin: 20rpx auto;
 		margin: 20rpx auto;

+ 181 - 17
pagesRepairs/management/management.vue

@@ -1,9 +1,9 @@
 <template>
 <template>
 	<view class="container">
 	<view class="container">
-		<view class="top_bg"></view>
+		<view class="top_bg" @click="permission = !permission"></view>
 
 
 		<!-- 状态统计区域 -->
 		<!-- 状态统计区域 -->
-		<view class="top_types">
+		<view class="top_types" v-if="!permission">
 			<view class="types_box">
 			<view class="types_box">
 				<view class="box_num">100</view>
 				<view class="box_num">100</view>
 				<view class="box_info">待接单</view>
 				<view class="box_info">待接单</view>
@@ -23,8 +23,41 @@
 			</view>
 			</view>
 		</view>
 		</view>
 
 
+		<view class="top_types2" v-else>
+			<view class="top">
+				<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text" activeColor="#6FB6B8"></uni-segmented-control>
+			</view>
+			<view class="bottom">
+				<view class="bottom_box">
+					<view class="box_num">100</view>
+					<view class="box_info">工单数</view>
+				</view>
+
+				<view class="bottom_box">
+					<view class="box_num">10</view>
+					<view class="box_info">处理中</view>
+				</view>
+				<view class="bottom_box">
+					<view class="box_num">50</view>
+					<view class="box_info">已完成</view>
+				</view>
+				<view class="bottom_box">
+					<view class="box_num">60</view>
+					<view class="box_info">已超时</view>
+				</view>
+				<view class="bottom_box">
+					<view class="box_num">60</view>
+					<view class="box_info">已完成</view>
+				</view>
+				<view class="bottom_box">
+					<view class="box_num">60</view>
+					<view class="box_info">已关单</view>
+				</view>
+			</view>
+		</view>
+
 		<!-- 订单列表区域 -->
 		<!-- 订单列表区域 -->
-		<view class="body">
+		<view class="body" :class="{ body2: permission }">
 			<!-- 每一个订单区域 -->
 			<!-- 每一个订单区域 -->
 			<view class="body_item" v-for="item in dataList" :key="item.id">
 			<view class="body_item" v-for="item in dataList" :key="item.id">
 				<!-- 工单编号 -->
 				<!-- 工单编号 -->
@@ -43,6 +76,9 @@
 					<view class="time_type color_type" v-if="item.type === 2">维修中</view>
 					<view class="time_type color_type" v-if="item.type === 2">维修中</view>
 
 
 					<view class="time_type color_type2" v-if="item.type === 3">待审核</view>
 					<view class="time_type color_type2" v-if="item.type === 3">待审核</view>
+					<view class="time_type color_type3" v-if="item.type === 4">已完成</view>
+					<view class="time_type" v-if="item.type === 5">待确认</view>
+					<view class="time_type color_type4" v-if="item.type === 6">已关单</view>
 				</view>
 				</view>
 
 
 				<!-- 报修姓名 -->
 				<!-- 报修姓名 -->
@@ -91,7 +127,7 @@
 				</view>
 				</view>
 
 
 				<!-- 维修师傅 -->
 				<!-- 维修师傅 -->
-				<view class="item_time" v-if="item.type === 2 || item.type === 3">
+				<view class="item_time" v-if="item.type === 2 || item.type === 3 || item.type === 4 || item.type === 6">
 					<view class="time_msg">
 					<view class="time_msg">
 						维修师傅:
 						维修师傅:
 						<text>{{ item.workerName }}</text>
 						<text>{{ item.workerName }}</text>
@@ -99,7 +135,7 @@
 				</view>
 				</view>
 
 
 				<!-- 师傅电话 -->
 				<!-- 师傅电话 -->
-				<view class="item_box" v-if="item.type === 2 || item.type === 3">
+				<view class="item_box" v-if="item.type === 2 || item.type === 3 || item.type === 4 || item.type === 6">
 					<view class="box_key">师傅电话:</view>
 					<view class="box_key">师傅电话:</view>
 					<view class="box_value phone">
 					<view class="box_value phone">
 						{{ item.workerPhone }}
 						{{ item.workerPhone }}
@@ -108,7 +144,7 @@
 				</view>
 				</view>
 
 
 				<!-- 维修费用 -->
 				<!-- 维修费用 -->
-				<view class="item_box" v-if="item.type === 3">
+				<view class="item_box" v-if="item.type === 3 || item.type === 4">
 					<view class="box_key">维修费用:</view>
 					<view class="box_key">维修费用:</view>
 					<view class="box_value2 phone" @click="checkFeeDetail">
 					<view class="box_value2 phone" @click="checkFeeDetail">
 						{{ item.money }}元
 						{{ item.money }}元
@@ -117,15 +153,20 @@
 				</view>
 				</view>
 
 
 				<!-- 按钮区域 -->
 				<!-- 按钮区域 -->
-				<view class="item_btn" v-if="item.type !== 3">
-					<img v-if="item.type !== 3" src="../../static/images/repairsImg/close.png" @click="handleClose" />
-					<img class="img" src="../../static/images/repairsImg/help.png" v-if="item.type === 1" />
+				<view class="item_btn">
+					<img v-if="item.type < 3" src="../../static/images/repairsImg/close.png" @click="handleClose" />
+					<img class="img" src="../../static/images/repairsImg/help.png" v-if="item.type === 1 && !permission" @click="handleHelp" />
+					<view class="btn_box type" v-if="item.type < 3 && permission">延时</view>
 					<view class="btn_box type" v-if="item.type === 1">接单</view>
 					<view class="btn_box type" v-if="item.type === 1">接单</view>
-					<view class="btn_box type2" v-if="item.type === 1">转单</view>
+					<view class="btn_box type2" v-if="item.type === 1 && !permission" @click="handleTransferOrder">转单</view>
+					<view class="btn_box type2" v-if="item.type === 1 && permission">派单</view>
 					<view class="btn_box type" v-if="item.type === 2" @click="handleOffer">报价</view>
 					<view class="btn_box type" v-if="item.type === 2" @click="handleOffer">报价</view>
 					<view class="btn_box type2" v-if="item.type === 2" @click="handleFinish">维修完成</view>
 					<view class="btn_box type2" v-if="item.type === 2" @click="handleFinish">维修完成</view>
+
+					<view class="btn_box type" v-if="item.type === 3 && permission">审核</view>
+					<view class="btn_box type" v-if="item.type === 5">改价</view>
+					<view class="btn_box type2" v-if="item.type === 5">留言</view>
 				</view>
 				</view>
-				<view class="item_btn2" v-else></view>
 
 
 				<!-- 关闭按钮弹窗 -->
 				<!-- 关闭按钮弹窗 -->
 				<uni-popup ref="popup_close" :is-mask-click="false">
 				<uni-popup ref="popup_close" :is-mask-click="false">
@@ -148,9 +189,13 @@
 export default {
 export default {
 	data() {
 	data() {
 		return {
 		return {
+			permission: true,
+			items: ['团队工单', '个人工单'],
+			current: 0,
 			activeIndex: 1,
 			activeIndex: 1,
 			// type为 1 是 待接单,type为 2 是维修中,
 			// type为 1 是 待接单,type为 2 是维修中,
-			// type为 3 是 待审核
+			// type为 3 是 待审核,type为 4 是已完成,
+			// type为 5 是 待确认,type为 6 是已关单,
 			dataList: [
 			dataList: [
 				{
 				{
 					id: 1,
 					id: 1,
@@ -198,6 +243,57 @@ export default {
 					workerName: '老张',
 					workerName: '老张',
 					workerPhone: '13659585689',
 					workerPhone: '13659585689',
 					money: 50
 					money: 50
+				},
+				{
+					id: 4,
+					order: '956262219626262',
+					overtime: false,
+					time: '2023.07.05  09:25:26',
+					type: 4,
+					name: '李四',
+					phone: '13659585689',
+					area: '行政楼',
+					address: '3楼309',
+					goods: '电脑',
+					description: '电脑坏了',
+					img: '',
+					workerName: '老张',
+					workerPhone: '13659585689',
+					money: 50
+				},
+				{
+					id: 5,
+					order: '956262219626262',
+					overtime: false,
+					time: '2023.07.05  09:25:26',
+					type: 5,
+					name: '李四',
+					phone: '13659585689',
+					area: '行政楼',
+					address: '3楼309',
+					goods: '电脑',
+					description: '电脑坏了',
+					img: '',
+					workerName: '老张',
+					workerPhone: '13659585689',
+					money: 50
+				},
+				{
+					id: 6,
+					order: '956262219626262',
+					overtime: false,
+					time: '2023.07.05  09:25:26',
+					type: 6,
+					name: '李四',
+					phone: '13659585689',
+					area: '行政楼',
+					address: '3楼309',
+					goods: '电脑',
+					description: '电脑坏了',
+					img: '',
+					workerName: '老张',
+					workerPhone: '13659585689',
+					money: 50
 				}
 				}
 			]
 			]
 		}
 		}
@@ -218,6 +314,22 @@ export default {
 			uni.navigateTo({
 			uni.navigateTo({
 				url: '/pagesRepairs/repairRecord/repairRecord'
 				url: '/pagesRepairs/repairRecord/repairRecord'
 			})
 			})
+		},
+		handleTransferOrder() {
+			uni.navigateTo({
+				url: '/pagesRepairs/transferOrder/transferOrder'
+			})
+		},
+		handleHelp() {
+			uni.navigateTo({
+				url: '/pagesRepairs/help/help'
+			})
+		},
+		onClickItem(e) {
+			if (this.current != e.currentIndex) {
+				this.current = e.currentIndex
+				console.log(this.current)
+			}
 		}
 		}
 	}
 	}
 }
 }
@@ -261,6 +373,46 @@ export default {
 		}
 		}
 	}
 	}
 
 
+	.top_types2 {
+		box-sizing: border-box;
+		margin: auto;
+		margin-top: -100rpx;
+		padding: 0 30rpx;
+		width: 690rpx;
+		height: 402rpx;
+		border-radius: 10rpx;
+		box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);
+		background-color: #fff;
+
+		.top {
+			height: 112rpx;
+			border-bottom: 1rpx solid #e6e6e6;
+		}
+
+		.bottom {
+			display: flex;
+			flex-wrap: wrap;
+			justify-content: space-evenly;
+			height: 290rpx;
+
+			.bottom_box {
+				width: 25%;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+				.box_num {
+					font-size: 46rpx;
+					color: #ff5733;
+				}
+				.box_info {
+					margin-top: 10rpx;
+					font-size: 34rpx;
+				}
+			}
+		}
+	}
+
 	.body {
 	.body {
 		box-sizing: border-box;
 		box-sizing: border-box;
 		padding: 0 30rpx 30rpx 30rpx;
 		padding: 0 30rpx 30rpx 30rpx;
@@ -328,6 +480,12 @@ export default {
 				.color_type2 {
 				.color_type2 {
 					color: #d43030;
 					color: #d43030;
 				}
 				}
+				.color_type3 {
+					color: #6fb6b8;
+				}
+				.color_type4 {
+					color: #a6a6a6;
+				}
 			}
 			}
 
 
 			.item_box {
 			.item_box {
@@ -391,10 +549,12 @@ export default {
 				align-items: center;
 				align-items: center;
 				justify-content: flex-end;
 				justify-content: flex-end;
 				padding: 0 30rpx;
 				padding: 0 30rpx;
-				height: 153rpx;
+				line-height: 153rpx;
 
 
 				img {
 				img {
 					margin-right: auto;
 					margin-right: auto;
+					margin-top: 45rpx;
+					margin-bottom: 40rpx;
 					width: 56rpx;
 					width: 56rpx;
 					height: 56rpx;
 					height: 56rpx;
 				}
 				}
@@ -402,6 +562,8 @@ export default {
 				.img {
 				.img {
 					margin-right: auto;
 					margin-right: auto;
 					margin-left: -55rpx;
 					margin-left: -55rpx;
+					margin-top: 45rpx;
+					margin-bottom: 40rpx;
 					width: 62rpx;
 					width: 62rpx;
 					height: 62rpx;
 					height: 62rpx;
 				}
 				}
@@ -411,6 +573,8 @@ export default {
 					justify-content: center;
 					justify-content: center;
 					align-items: center;
 					align-items: center;
 					margin-left: 16rpx;
 					margin-left: 16rpx;
+					margin-top: 45rpx;
+					margin-bottom: 40rpx;
 					width: 174rpx;
 					width: 174rpx;
 					height: 68rpx;
 					height: 68rpx;
 					font-size: 28rpx;
 					font-size: 28rpx;
@@ -429,10 +593,6 @@ export default {
 				}
 				}
 			}
 			}
 
 
-			.item_btn2 {
-				height: 50rpx;
-			}
-
 			.popup_close {
 			.popup_close {
 				width: 690rpx;
 				width: 690rpx;
 				border-radius: 19rpx;
 				border-radius: 19rpx;
@@ -485,5 +645,9 @@ export default {
 			}
 			}
 		}
 		}
 	}
 	}
+
+	.body2 {
+		height: calc(100vh - 555rpx);
+	}
 }
 }
 </style>
 </style>

+ 341 - 3
pagesRepairs/pending/pending.vue

@@ -1,13 +1,157 @@
 <template>
 <template>
 	<view class="container">
 	<view class="container">
-		<view class="">待处理池</view>
+		<view class="top_bg" @click="permission = !permission"></view>
+		<view class="body">
+			<!-- 每一个订单区域 -->
+			<view class="body_item" v-for="item in dataList" :key="item.id">
+				<!-- 工单编号 -->
+				<view class="item_title">
+					<img src="../../static/images/repairsImg/order.png" />
+					<view class="title_info">工单编号:{{ item.order }}</view>
+				</view>
+				<!-- 报修时间 -->
+				<view class="item_time">
+					<view class="time_msg">
+						报修时间:
+						<text>{{ item.time }}</text>
+					</view>
+					<view class="time_type">待接单</view>
+				</view>
+
+				<!-- 报修姓名 -->
+				<view class="item_box">
+					<view class="box_key">报修姓名:</view>
+					<view class="box_value">{{ item.name }}</view>
+				</view>
+
+				<!-- 报修电话 -->
+				<view class="item_box">
+					<view class="box_key">报修电话:</view>
+					<view class="box_value phone">
+						{{ item.phone }}
+						<img src="../../static/images/repairsImg/phone.png" />
+					</view>
+				</view>
+
+				<!-- 报修区域 -->
+				<view class="item_box">
+					<view class="box_key">报修区域:</view>
+					<view class="box_value">{{ item.area }}</view>
+				</view>
+
+				<!-- 详细地址 -->
+				<view class="item_box">
+					<view class="box_key">详细地址:</view>
+					<view class="box_value">{{ item.address }}</view>
+				</view>
+
+				<!-- 报修物品 -->
+				<view class="item_box">
+					<view class="box_key">报修物品:</view>
+					<view class="box_value">{{ item.goods }}</view>
+				</view>
+
+				<!-- 故障描述 -->
+				<view class="item_box">
+					<view class="box_key">故障描述:</view>
+					<view class="box_value">{{ item.description }}</view>
+				</view>
+
+				<!-- 上传图片 -->
+				<view class="item_img">
+					<view class="img_key">上传图片:</view>
+					<view class="img_value"></view>
+				</view>
+
+				<!-- 按钮区域 -->
+				<view class="item_btn">
+					<img src="../../static/images/repairsImg/close.png" @click="handleClose" />
+					<view class="btn_box type" v-if="permission">延时</view>
+					<view class="btn_box type">接单</view>
+					<view class="btn_box type2" v-if="permission">派单</view>
+				</view>
+
+				<!-- 关闭按钮弹窗 -->
+				<uni-popup ref="popup_close" :is-mask-click="false">
+					<view class="popup_close">
+						<view :class="{ active: activeIndex === 1 }" class="close_box radius" @click="handleChangeItem(1)">重复报单</view>
+						<view :class="{ active: activeIndex === 2 }" class="close_box" @click="handleChangeItem(2)">不属于维修范围</view>
+						<view :class="{ active: activeIndex === 3 }" class="close_box" @click="handleChangeItem(3)">已维修完成</view>
+						<view class="close_btn">
+							<view class="btn_box cancel" @click="$refs.popup_close[0].close()">取消</view>
+							<view class="btn_box confirm" @click="$refs.popup_close[0].close()">确定</view>
+						</view>
+					</view>
+				</uni-popup>
+			</view>
+		</view>
 	</view>
 	</view>
 </template>
 </template>
 
 
 <script>
 <script>
 export default {
 export default {
 	data() {
 	data() {
-		return {}
+		return {
+			permission: true,
+			activeIndex: 1,
+			dataList: [
+				{
+					id: 1,
+					order: '656262219626262',
+					overtime: true,
+					time: '2023.07.05  09:25:26',
+					type: 1,
+					name: '张三',
+					phone: '13659585689',
+					area: '行政楼',
+					address: '3楼309',
+					goods: '电脑',
+					description: '水龙头坏了',
+					img: ''
+				},
+				{
+					id: 2,
+					order: '956262219626262',
+					overtime: false,
+					time: '2023.07.05  09:25:26',
+					type: 2,
+					name: '李四',
+					phone: '13659585689',
+					area: '行政楼',
+					address: '3楼309',
+					goods: '电脑',
+					description: '电脑坏了',
+					img: '',
+					workerName: '老张',
+					workerPhone: '13659585689'
+				},
+				{
+					id: 3,
+					order: '956262219626262',
+					overtime: false,
+					time: '2023.07.05  09:25:26',
+					type: 3,
+					name: '李四',
+					phone: '13659585689',
+					area: '行政楼',
+					address: '3楼309',
+					goods: '电脑',
+					description: '电脑坏了',
+					img: '',
+					workerName: '老张',
+					workerPhone: '13659585689',
+					money: 50
+				}
+			]
+		}
+	},
+	methods: {
+		handleClose() {
+			this.$refs.popup_close[0].open('center')
+		},
+		handleChangeItem(val) {
+			this.activeIndex = val
+		}
 	}
 	}
 }
 }
 </script>
 </script>
@@ -16,6 +160,200 @@ export default {
 .container {
 .container {
 	width: 100vw;
 	width: 100vw;
 	height: calc(100vh - 102rpx);
 	height: calc(100vh - 102rpx);
-	background-color: salmon;
+
+	.top_bg {
+		height: 165rpx;
+		background-color: #6fb6b8;
+	}
+
+	.body {
+		box-sizing: border-box;
+		margin: auto;
+		margin-top: -100rpx;
+		padding: 2rpx;
+		width: 690rpx;
+		height: calc(100vh - 170rpx);
+		border-radius: 11rpx 11rpx 0 0;
+		background-color: #fff;
+		overflow-y: auto;
+
+		.body_item {
+			margin-bottom: 20rpx;
+			border-radius: 11rpx;
+			box-shadow: 0 0 8rpx #d9d9d9;
+
+			.item_title {
+				display: flex;
+				align-items: center;
+				padding: 0 30rpx;
+				height: 87rpx;
+				border-bottom: 1rpx solid #e6e6e6;
+
+				img {
+					width: 30rpx;
+					height: 30rpx;
+				}
+
+				.title_info {
+					margin: 0 21rpx 0 13rpx;
+					font-size: 28rpx;
+				}
+			}
+
+			.item_time {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 0 30rpx;
+				height: 79rpx;
+
+				.time_msg {
+					font-size: 28rpx;
+					color: #808080;
+
+					text {
+						color: #000000;
+					}
+				}
+
+				.time_type {
+					font-size: 32rpx;
+					color: #ff5733;
+				}
+			}
+
+			.item_box {
+				display: flex;
+				padding: 0 30rpx;
+				height: 60rpx;
+				font-size: 28rpx;
+
+				.box_key {
+					color: #808080;
+				}
+
+				.box_value {
+					display: flex;
+
+					img {
+						margin-top: 5rpx;
+						margin-left: 10rpx;
+						width: 28rpx;
+						height: 28rpx;
+					}
+				}
+
+				.phone {
+					color: #6fb6b8;
+				}
+			}
+
+			.item_img {
+				display: flex;
+				align-items: center;
+				padding: 0 30rpx;
+				height: 120rpx;
+				color: #808080;
+				font-size: 28rpx;
+
+				.img_key {
+				}
+
+				.img_value {
+					width: 120rpx;
+					height: 120rpx;
+					border-radius: 14rpx;
+					background-color: salmon;
+				}
+			}
+
+			.item_btn {
+				display: flex;
+				align-items: center;
+				justify-content: flex-end;
+				padding: 0 30rpx;
+				height: 153rpx;
+
+				img {
+					margin-right: auto;
+					width: 56rpx;
+					height: 56rpx;
+				}
+
+				.btn_box {
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					margin-left: 16rpx;
+					width: 174rpx;
+					height: 68rpx;
+					font-size: 28rpx;
+					border-radius: 11rpx;
+				}
+
+				.type {
+					color: #fff;
+					background-color: #6fb6b8;
+				}
+
+				.type2 {
+					color: #6fb6b8;
+					background-color: #fff;
+					border: 1rpx solid #6fb6b8;
+				}
+			}
+
+			.popup_close {
+				width: 690rpx;
+				border-radius: 19rpx;
+				background-color: #fff;
+
+				.close_box {
+					height: 100rpx;
+					line-height: 100rpx;
+					text-align: center;
+					font-size: 32rpx;
+					border: 1rpx solid #e6e6e6;
+				}
+
+				.radius {
+					border-radius: 19rpx 19rpx 0 0;
+				}
+
+				.active {
+					color: #fff;
+					background-color: #6fb6b8;
+				}
+
+				.close_btn {
+					display: flex;
+					align-items: center;
+					justify-content: space-evenly;
+					margin-top: 100rpx;
+					height: 121rpx;
+
+					.btn_box {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						width: 203rpx;
+						height: 72rpx;
+						border-radius: 9rpx;
+						font-size: 32rpx;
+					}
+
+					.cancel {
+						background-color: #e5e5e5;
+						color: #6fb6b8;
+					}
+
+					.confirm {
+						background-color: #6fb6b8;
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
 }
 }
 </style>
 </style>

+ 133 - 1
pagesRepairs/repairRecord/repairRecord.vue

@@ -47,6 +47,49 @@
 			<view>合计费用</view>
 			<view>合计费用</view>
 			<view>10元</view>
 			<view>10元</view>
 		</view>
 		</view>
+
+		<view class="title">维修师傅</view>
+
+		<view class="box">
+			<img src="../../static/images/repairsImg/people.png" />
+			张三
+		</view>
+
+		<view class="title">手机</view>
+
+		<view class="box">
+			<img src="../../static/images/repairsImg/phone2.png" />
+			13659854589
+		</view>
+
+		<view class="title">现场拍照</view>
+
+		<uni-file-picker
+			ref="filePicker"
+			limit="3"
+			v-model="imgList"
+			fileMediatype="image"
+			:image-styles="imageStyles"
+			mode="grid"
+			@select="select"
+			@delete="handleDelete"
+		></uni-file-picker>
+
+		<view class="btn">确认提交</view>
+
+		<!-- 用于图片压缩的canvas画布 -->
+		<canvas
+			:style="{
+				width: cw + 'px',
+				height: cw + 'px',
+				position: 'absolute',
+				zIndex: -1,
+				left: '-10000rpx',
+				top: '-10000rpx'
+			}"
+			canvas-id="zipCanvas"
+		></canvas>
+		<!--画布结束-->
 	</view>
 	</view>
 </template>
 </template>
 
 
@@ -55,7 +98,24 @@ export default {
 	data() {
 	data() {
 		return {
 		return {
 			single: '',
 			single: '',
-			count: 6
+			count: 6,
+			// 显示的图片数据
+			imgList: [],
+			// 上传的图片数据
+			subImgList: [],
+			// 图片上传框的样式
+			imageStyles: {
+				width: 60,
+				height: 60,
+				border: {
+					color: '#ccc',
+					width: 1,
+					style: 'dashed',
+					radius: '9px'
+				}
+			},
+			//画板边长默认是屏幕宽度,正方形画布
+			cw: uni.getSystemInfoSync().windowWidth
 		}
 		}
 	},
 	},
 	methods: {
 	methods: {
@@ -64,6 +124,51 @@ export default {
 			uni.navigateTo({
 			uni.navigateTo({
 				url: '/pagesRepairs/addGoods/addGoods'
 				url: '/pagesRepairs/addGoods/addGoods'
 			})
 			})
+		},
+		// 选择图片回调
+		select(e) {
+			console.log(e)
+			e.tempFiles.forEach((item) => {
+				//这里的id和页面中写的html代码的canvas的id要一致
+				let canvasId = 'zipCanvas'
+				//原图的路径
+				let imagePath = item.path
+				//大小限制1024kb
+				let limitSize = 1024
+				//初始绘画区域是画布自身的宽度也就是屏幕宽度
+				let drawWidth = uni.getSystemInfoSync().windowWidth
+
+				getLessLimitSizeImage(canvasId, imagePath, limitSize, drawWidth, (resPath) => {
+					uni.showLoading({
+						title: '上传中'
+					})
+					uni.uploadFile({
+						url: `https://jiangxih3cpartner.com/reporting/file/fileUpDown`,
+						filePath: resPath,
+						name: 'file',
+						success: (uploadFileRes) => {
+							subImgList.value.push(JSON.parse(uploadFileRes.data).data.join())
+							imgList.value.push({
+								url: item.path,
+								name: ''
+							})
+							uni.hideLoading()
+						},
+						fail: () => {
+							uni.showToast({
+								title: '上传失败',
+								icon: 'error'
+							})
+						}
+					})
+				})
+			})
+		},
+		handleDelete(e) {
+			// console.log(e);
+			const num = imgList.value.findIndex((v) => v.url === e.tempFilePath)
+			subImgList.value.splice(num, 1)
+			imgList.value.splice(num, 1)
 		}
 		}
 	}
 	}
 }
 }
@@ -178,5 +283,32 @@ export default {
 		font-weight: bold;
 		font-weight: bold;
 		border-bottom: 1rpx solid #e5e5e5;
 		border-bottom: 1rpx solid #e5e5e5;
 	}
 	}
+
+	.box {
+		display: flex;
+		align-items: center;
+		height: 94rpx;
+		font-size: 32rpx;
+		border-radius: 10rpx;
+		border: 1rpx solid #cccccc;
+
+		img {
+			margin: 0 14rpx 0 30rpx;
+			width: 40rpx;
+			height: 40rpx;
+		}
+	}
+
+	.btn {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin: 65rpx 0 60rpx;
+		height: 100rpx;
+		color: #fff;
+		font-size: 32rpx;
+		border-radius: 12rpx;
+		background-color: #6fb6b8;
+	}
 }
 }
 </style>
 </style>

+ 0 - 4
pagesRepairs/selectArea/selectArea.vue

@@ -100,10 +100,6 @@ export default {
 		.body_right {
 		.body_right {
 			box-sizing: border-box;
 			box-sizing: border-box;
 			padding: 30rpx 40rpx;
 			padding: 30rpx 40rpx;
-			// display: grid;
-			// grid-template-columns: repeat(4, 1fr);
-			// grid-auto-rows: 50rpx;
-			// gap: 30rpx 28rpx;
 			width: 552rpx;
 			width: 552rpx;
 			overflow-y: auto;
 			overflow-y: auto;
 
 

+ 98 - 0
pagesRepairs/transferOrder/transferOrder.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="container">
+		<view class="title">转单语音说明</view>
+
+		<!-- 录音区域 -->
+		<view class="voice">
+			<view class="voice_box">
+				<img src="../../static/images/repairsImg/voice.png" />
+			</view>
+			点击录音
+		</view>
+
+		<view class="title">备注</view>
+
+		<view class="textarea">
+			<textarea placeholder-style="color:#CCCCCC" placeholder="请输入转单说明"></textarea>
+		</view>
+
+		<view class="btn">确认</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+	box-sizing: border-box;
+	padding: 0 30rpx;
+
+	.title {
+		display: flex;
+		align-items: center;
+		height: 107rpx;
+		font-size: 36rpx;
+		font-weight: bold;
+	}
+
+	.voice {
+		display: flex;
+		align-items: center;
+		height: 94rpx;
+		font-size: 32rpx;
+		color: #cccccc;
+		border-radius: 10rpx;
+		border: 1rpx solid #cccccc;
+
+		.voice_box {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			margin: 0 38rpx 0 33rpx;
+			width: 101rpx;
+			height: 47rpx;
+			border-radius: 33rpx;
+			box-shadow: 0px 0px 4rpx rgba(0, 0, 0, 0.25);
+
+			img {
+				width: 33rpx;
+				height: 33rpx;
+			}
+		}
+	}
+
+	.textarea {
+		height: 310rpx;
+		border-radius: 10rpx;
+		border: 1rpx solid #cccccc;
+
+		textarea {
+			box-sizing: border-box;
+			padding: 25rpx 35rpx;
+			width: 100%;
+			font-size: 32rpx;
+		}
+	}
+
+	.btn {
+		position: absolute;
+		bottom: 66rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin: auto;
+		width: 690rpx;
+		height: 100rpx;
+		color: #fff;
+		font-size: 32rpx;
+		border-radius: 12rpx;
+		background-color: #6fb6b8;
+	}
+}
+</style>

BIN
static/images/repairsImg/addressBook-active.png


BIN
static/images/repairsImg/addressBook.png


BIN
static/images/repairsImg/peoples.png


BIN
static/images/repairsImg/photo.png


+ 131 - 120
uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue

@@ -1,145 +1,156 @@
 <template>
 <template>
-	<view :class="[styleType === 'text'?'segmented-control--text' : 'segmented-control--button' ]"
-		:style="{ borderColor: styleType === 'text' ? '' : activeColor }" class="segmented-control">
-		<view v-for="(item, index) in values" :class="[ styleType === 'text' ? '': 'segmented-control__item--button',
-		index === currentIndex&&styleType === 'button' ? 'segmented-control__item--button--active': '',
-		index === 0&&styleType === 'button' ? 'segmented-control__item--button--first': '',
-			index === values.length - 1&&styleType === 'button' ? 'segmented-control__item--button--last': '' ]" :key="index"
-			:style="{ backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',borderColor: index === currentIndex&&styleType === 'text'||styleType === 'button'?activeColor:'transparent' }"
-			class="segmented-control__item" @click="_onClick(index)">
+	<view
+		:class="[styleType === 'text' ? 'segmented-control--text' : 'segmented-control--button']"
+		:style="{ borderColor: styleType === 'text' ? '' : activeColor }"
+		class="segmented-control"
+	>
+		<view
+			v-for="(item, index) in values"
+			:class="[
+				styleType === 'text' ? '' : 'segmented-control__item--button',
+				index === currentIndex && styleType === 'button' ? 'segmented-control__item--button--active' : '',
+				index === 0 && styleType === 'button' ? 'segmented-control__item--button--first' : '',
+				index === values.length - 1 && styleType === 'button' ? 'segmented-control__item--button--last' : ''
+			]"
+			:key="index"
+			:style="{
+				backgroundColor: index === currentIndex && styleType === 'button' ? activeColor : '',
+				borderColor: (index === currentIndex && styleType === 'text') || styleType === 'button' ? activeColor : 'transparent'
+			}"
+			class="segmented-control__item"
+			@click="_onClick(index)"
+		>
 			<view>
 			<view>
-				<text :style="{color:
-				    index === currentIndex
-				      ? styleType === 'text'
-				        ? activeColor
-				        : '#fff'
-				      : styleType === 'text'
-				        ? '#000'
-				        : activeColor}" class="segmented-control__text" :class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text': ''">{{ item }}</text>
+				<text
+					:style="{ color: index === currentIndex ? (styleType === 'text' ? activeColor : '#fff') : styleType === 'text' ? '#000' : activeColor }"
+					class="segmented-control__text"
+					:class="styleType === 'text' && index === currentIndex ? 'segmented-control__item--text' : ''"
+				>
+					{{ item }}
+				</text>
 			</view>
 			</view>
-
 		</view>
 		</view>
 	</view>
 	</view>
 </template>
 </template>
 
 
 <script>
 <script>
-	/**
-	 * SegmentedControl 分段器
-	 * @description 用作不同视图的显示
-	 * @tutorial https://ext.dcloud.net.cn/plugin?id=54
-	 * @property {Number} current 当前选中的tab索引值,从0计数
-	 * @property {String} styleType = [button|text] 分段器样式类型
-	 * 	@value button 按钮类型
-	 * 	@value text 文字类型
-	 * @property {String} activeColor 选中的标签背景色与边框颜色
-	 * @property {Array} values 选项数组
-	 * @event {Function} clickItem 组件触发点击事件时触发,e={currentIndex}
-	 */
+/**
+ * SegmentedControl 分段器
+ * @description 用作不同视图的显示
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=54
+ * @property {Number} current 当前选中的tab索引值,从0计数
+ * @property {String} styleType = [button|text] 分段器样式类型
+ * 	@value button 按钮类型
+ * 	@value text 文字类型
+ * @property {String} activeColor 选中的标签背景色与边框颜色
+ * @property {Array} values 选项数组
+ * @event {Function} clickItem 组件触发点击事件时触发,e={currentIndex}
+ */
 
 
-	export default {
-		name: 'UniSegmentedControl',
-		emits: ['clickItem'],
-		props: {
-			current: {
-				type: Number,
-				default: 0
-			},
-			values: {
-				type: Array,
-				default () {
-					return []
-				}
-			},
-			activeColor: {
-				type: String,
-				default: '#2979FF'
-			},
-			styleType: {
-				type: String,
-				default: 'button'
-			}
-		},
-		data() {
-			return {
-				currentIndex: 0
-			}
+export default {
+	name: 'UniSegmentedControl',
+	emits: ['clickItem'],
+	props: {
+		current: {
+			type: Number,
+			default: 0
 		},
 		},
-		watch: {
-			current(val) {
-				if (val !== this.currentIndex) {
-					this.currentIndex = val
-				}
+		values: {
+			type: Array,
+			default() {
+				return []
 			}
 			}
 		},
 		},
-		created() {
-			this.currentIndex = this.current
+		activeColor: {
+			type: String,
+			default: '#2979FF'
 		},
 		},
-		methods: {
-			_onClick(index) {
-				if (this.currentIndex !== index) {
-					this.currentIndex = index
-					this.$emit('clickItem', {
-						currentIndex: index
-					})
-				}
+		styleType: {
+			type: String,
+			default: 'button'
+		}
+	},
+	data() {
+		return {
+			currentIndex: 0
+		}
+	},
+	watch: {
+		current(val) {
+			if (val !== this.currentIndex) {
+				this.currentIndex = val
+			}
+		}
+	},
+	created() {
+		this.currentIndex = this.current
+	},
+	methods: {
+		_onClick(index) {
+			if (this.currentIndex !== index) {
+				this.currentIndex = index
+				this.$emit('clickItem', {
+					currentIndex: index
+				})
 			}
 			}
 		}
 		}
 	}
 	}
+}
 </script>
 </script>
 
 
-<style lang="scss" >
-	.segmented-control {
-		/* #ifndef APP-NVUE */
-		display: flex;
-		box-sizing: border-box;
-		/* #endif */
-		flex-direction: row;
-		height: 36px;
-		overflow: hidden;
-		/* #ifdef H5 */
-		cursor: pointer;
-		/* #endif */
-	}
+<style lang="scss">
+.segmented-control {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	box-sizing: border-box;
+	/* #endif */
+	flex-direction: row;
+	height: 100%;
+	overflow: hidden;
+	/* #ifdef H5 */
+	cursor: pointer;
+	/* #endif */
+}
 
 
-	.segmented-control__item {
-		/* #ifndef APP-NVUE */
-		display: inline-flex;
-		box-sizing: border-box;
-		/* #endif */
-		position: relative;
-		flex: 1;
-		justify-content: center;
-		align-items: center;
-	}
+.segmented-control__item {
+	/* #ifndef APP-NVUE */
+	display: inline-flex;
+	box-sizing: border-box;
+	/* #endif */
+	position: relative;
+	flex: 1;
+	justify-content: center;
+	align-items: center;
+}
 
 
-	.segmented-control__item--button {
-		border-style: solid;
-		border-top-width: 1px;
-		border-bottom-width: 1px;
-		border-right-width: 1px;
-		border-left-width: 0;
-	}
+.segmented-control__item--button {
+	border-style: solid;
+	border-top-width: 1px;
+	border-bottom-width: 1px;
+	border-right-width: 1px;
+	border-left-width: 0;
+}
 
 
-	.segmented-control__item--button--first {
-		border-left-width: 1px;
-		border-top-left-radius: 5px;
-		border-bottom-left-radius: 5px;
-	}
+.segmented-control__item--button--first {
+	border-left-width: 1px;
+	border-top-left-radius: 5px;
+	border-bottom-left-radius: 5px;
+}
 
 
-	.segmented-control__item--button--last {
-		border-top-right-radius: 5px;
-		border-bottom-right-radius: 5px;
-	}
+.segmented-control__item--button--last {
+	border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
 
 
-	.segmented-control__item--text {
-		border-bottom-style: solid;
-		border-bottom-width: 2px;
-		padding: 6px 0;
-	}
+.segmented-control__item--text {
+	border-bottom-style: solid;
+	border-bottom-width: 2px;
+	padding: 6px 0;
+}
 
 
-	.segmented-control__text {
-		font-size: 14px;
-		line-height: 20px;
-		text-align: center;
-	}
+.segmented-control__text {
+	font-size: 14px;
+	line-height: 20px;
+	text-align: center;
+}
 </style>
 </style>