上传

components/list/activity/activityItem.vue

@@ -14,12 +14,11 @@
 			<view class="browse">
 				{{ item.isComment }}条评论
 			</view>
-			<view class="phone"
-			v-if="item.phone"
-			@click.stop="callPhone">
-				<image src="/static/image/home/phone.png" mode=""></image>
-				联系{{ ta[item.sex] }}
-			</view>
+			
+			<callPhone
+			style="margin-left: auto;"
+			:phone="item.phone" 
+			:sexName="item.sex"/>
 		</view>
 	</view>
 </template>
@@ -44,11 +43,6 @@
 			}
 		},
 		methods: {
-			callPhone(){
-				uni.makePhoneCall({
-					phoneNumber: this.item.phone,
-				})
-			},
 		},
 	}
 </script>
@@ -71,17 +65,6 @@
 				color: rgb(132, 132, 132);
 			}
 
-			.phone{
-				background-color: rgba($uni-color, 0.2);
-				color: $uni-color;
-				padding: 8rpx 16rpx;
-				border-radius: 10rpx;
-				margin-left: auto;
-				image{
-					width: 20rpx;
-					height: 20rpx;
-				}
-			}
 		}
 	}
 </style>

components/list/dynamic/dynamicItem.vue

@@ -12,22 +12,15 @@
 			<view class="browse">
 				{{ item.isComment }}条评论
 			</view>
-			<view class="phone"
-			v-if="item.phone"
-			@click.stop="callPhone">
-				<image src="/static/image/home/phone.png" mode=""></image>
-				联系{{ ta[item.sex] }}
-			</view>
+			<callPhone :phone="item.phone" :sexName="item.sex"/>
 		</view>
 	</view>
 </template>
 
 <script>
-	import mixinsSex from '@/mixins/sex.js'
 	import userHeadItem from '@/components/list/dynamic/userHeadItem.vue'
 	import daynamicInfo from '@/components/list/dynamic/daynamicInfo.vue'
 	export default {
-		mixins: [mixinsSex],
 		components : {
 			userHeadItem,
 			daynamicInfo,
@@ -40,11 +33,6 @@
 			}
 		},
 		methods: {
-			callPhone(){
-				uni.makePhoneCall({
-					phoneNumber: this.item.phone
-				})
-			},
 		},
 	}
 </script>
@@ -66,18 +54,6 @@
 				margin: 0rpx 30rpx;
 				color: rgb(132, 132, 132);
 			}
-
-			.phone{
-				background-color: rgba($uni-color, 0.2);
-				color: $uni-color;
-				padding: 8rpx 16rpx;
-				border-radius: 10rpx;
-				margin-left: auto;
-				image{
-					width: 20rpx;
-					height: 20rpx;
-				}
-			}
 		}
 	}
 </style>

components/user/callPhone.vue

@@ -0,0 +1,41 @@
+<template>
+	<view class="phone" v-if="phone" @click.stop="callPhone">
+		<image src="/static/image/home/phone.png" mode="widthFix"></image>
+		联系{{ title || ta[sexName] }}
+	</view>
+</template>
+
+<script>
+	import mixinsSex from '@/mixins/sex.js'
+	export default {
+		mixins: [mixinsSex],
+		props: ['phone', 'title', 'sexName'],
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			callPhone(){
+				uni.makePhoneCall({
+					phoneNumber: this.phone
+				})
+			},
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.phone {
+		background-color: rgba($uni-color, 0.2);
+		color: $uni-color;
+		padding: 8rpx 16rpx;
+		border-radius: 10rpx;
+		margin-left: auto;
+
+		image {
+			width: 20rpx;
+			height: 20rpx;
+		}
+	}
+</style>

main.js

@@ -16,14 +16,17 @@ import './utils/index.js'
 
 
 
+
 //组件注册
 import configPopup from '@/components/config/configPopup.vue'
 import navbar from '@/components/base/navbar.vue'
 import tabbar from '@/components/base/tabbar.vue'
+import callPhone from '@/components/user/callPhone.vue'
 
 Vue.component('configPopup',configPopup)
 Vue.component('navbar', navbar)
 Vue.component('tabbar', tabbar)
+Vue.component('callPhone', callPhone)
 
 
 const app = new Vue({

pages_order/activity/activityDetail.vue

@@ -7,7 +7,7 @@
 			<userHeadItem :item="detail"/>
 			
 			<!-- 活动 -->
-			<activityInfo :item="item"/>
+			<activityInfo :item="detail"/>
 			
 			<daynamicInfo :item="detail"/>
 			
@@ -26,12 +26,10 @@
 					导航
 				</view> -->
 				
-				<view class="phone"
-				v-if="detail.phone"
-				@click.stop="callPhone">
-					<image src="/static/image/home/phone.png" mode=""></image>
-					联系{{ ta[detail.sex] }}
-				</view>
+				<callPhone 
+				style="margin-left: auto;"
+				:phone="detail.phone" 
+				:sexName="detail.sex"/>
 			</view>
 		</view>
 
@@ -115,17 +113,6 @@
 					}
 				})
 			},
-			callPhone(){
-				uni.makePhoneCall({
-					phoneNumber: this.detail.phone,
-					success() {
-						console.log('安卓拨打成功');
-					},
-					fail() {
-						console.log('安卓拨打失败');
-					}
-				})
-			},
 		}
 	}
 </script>
@@ -153,18 +140,6 @@
 					display: flex;
 					align-items: center;
 				}
-				
-				.phone{
-					background-color: rgba($uni-color, 0.2);
-					color: $uni-color;
-					padding: 8rpx 16rpx;
-					border-radius: 10rpx;
-					margin-left: auto;
-					image{
-						width: 20rpx;
-						height: 20rpx;
-					}
-				}
 			}
 		}
 		

pages_order/car/carListDetail.vue

@@ -29,12 +29,10 @@
 					{{ $dayjs(detail.createTime).format('YYYY-MM-DD') }}
 				</view>
 				
-				<view class="phone"
-				v-if="detail.phone"
-				@click.stop="callPhone">
-					<image src="/static/image/home/phone.png" mode=""></image>
-					联系司机
-				</view>
+				<callPhone
+				style="margin-left: auto;"
+				:phone="detail.phone" 
+				title="司机"/>
 			</view>
 			
 		</view>

pages_order/components/list/cart/cartItem.vue

@@ -21,12 +21,10 @@
 					{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
 				</view>
 				
-				<view class="phone"
-				v-if="item.phone"
-				@click.stop="callPhone">
-					<image src="/static/image/home/phone.png" mode=""></image>
-					联系司机
-				</view>
+				<callPhone
+				style="margin-left: auto;"
+				:phone="item.phone" 
+				title="司机"/>
 			</view>
 		</view>
 	</view>

pages_order/components/list/workList/workItem.vue

@@ -40,11 +40,10 @@
 				<!-- 09月23日  16：20 -->
 				{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
 			</view>
-			<view class="phone"
-			@click.stop="callPhone">
-				<image src="/static/image/home/phone.png" mode=""></image>
-				联系老板
-			</view>
+			<callPhone
+			style="margin-left: auto;"
+			:phone="item.phone" 
+			title="老板"/>
 		</view>
 	</view>
 </template>

pages_order/post/postDetail.vue

@@ -23,12 +23,10 @@
 					导航
 				</view> -->
 				
-				<view class="phone"
-				v-if="detail.phone"
-				@click.stop="callPhone">
-					<image src="/static/image/home/phone.png" mode=""></image>
-					联系{{ ta[detail.sex] }}
-				</view>
+				<callPhone
+				style="margin-left: auto;"
+				:phone="item.phone" 
+				:sexName="item.sex"/>
 			</view>
 		</view>