第一次提交

components/tabBar/index.scss

@@ -0,0 +1,35 @@
+.tabBar_contaier {
+	background: #ffffff;
+	padding-bottom: constant(safe-area-inset-bottom);
+	padding-bottom: env(safe-area-inset-bottom);
+	padding-top: 26rpx;
+	.tabBar_item { 
+		image {
+			width: 50rpx;
+			height: 50rpx; 
+		}
+		.tabBar_item_text{
+			color: #CACACA;
+			font-size: 20rpx;
+			margin-top: 10rpx;
+		}
+		.select_tabBar_item_text{
+			color: #121836;
+		}
+	}
+	.tabBar_item:nth-child(3) {
+		width: 50rpx;
+		position: relative;
+		image {
+			position: absolute;
+			width: 150rpx;
+			height: 150rpx;
+			top: -60rpx;
+			padding: 10rpx;
+			// left: -10rpx;
+			background-color: #ffffff; 
+			border-radius: 50%;
+			
+		}
+	}
+}

components/tabBar/tabBar.vue

@@ -0,0 +1,102 @@
+<template>
+	<view class="tabBar_contaier flex around">
+		 <view @click="selectFn(item,index)" class="tabBar_item flex jc column ac" v-for="(item,index) in tabBarList " :key="index">
+			 <image :src="value==item.selectIndex?item.selectedIconPath:item.iconPath"></image>
+			 <view :class=" 'tabBar_item_text' + (value==item.selectIndex?' .select_tabBar_item_text':'') ">{{item.text}}</view>
+		 </view>
+	</view>
+</template>
+
+<script>
+	import station from '@/api/station.js'
+	export default {
+		name: "tabBar",
+		props:{
+			value:{
+				type:Number,
+				default:0
+			}
+		},
+		data() {
+			return {
+				tabBarList: [{
+					     "selectIndex":0,
+						"iconPath": require('../../static/home.png'),
+						"selectedIconPath": require('../../static/select-home.png'),
+						"text": "首页"
+					},
+					{
+						"selectIndex": 1,
+						"iconPath": require('../../static/ChargingStation.png'),
+						"selectedIconPath": require('../../static/select-ChargingStation.png'),
+						"text": "电站"
+					},
+					{
+						"selectIndex": 2,
+						"iconPath": require('../../static/Scan.png'),
+						"selectedIconPath": require('../../static/Scan.png'),
+						"text": " "
+					},
+					// {
+					// 	"selectIndex": 3,
+					// 	"iconPath": require('../../static/order.png'),
+					// 	"selectedIconPath": require('../../static/select-order.png'),
+					// 	"text": "订单"
+					// },
+					// {
+					// 	"selectIndex": 4,
+					// 	"iconPath": require('../../static/Personal.png'),
+					// 	"selectedIconPath": require('../../static/select-Personal.png'),
+					// 	"text": "我的"
+					// }
+				]
+			};
+		},
+		created() {
+			console.log(this.tool);
+		},
+		methods:{
+			async scanCode(){
+				let res = await this.tool.scanCode();
+				if(res.result){
+					 uni.navigateTo({
+					 	url:`/ChargingStation/pages/placeOrder/index?type=qrCode&id=${res.result}`
+					 })
+				} 
+			},
+			selectFn(e,index){
+				// if(index==2){
+				// 	const token = uni.getStorageSync('Authorization');
+				// 	if(!token){
+				// 		uni.showModal({
+				// 			title: '暂未登录',
+				// 			content: '是否去登陆',
+				// 			success: function(res) {
+				// 				if (res.confirm) {
+				// 					uni.redirectTo({
+				// 						url: '/pages/login/index',
+				// 						fail(e) {
+				// 							console.log(e)
+				// 						}
+				// 					})
+				// 				} else if (res.cancel) {
+				// 					console.log('用户点击取消');
+				// 				}
+				// 			}
+						
+				// 		});
+				// 		return
+				// 	}
+				// 	this.scanCode()
+				// }else{
+				// 	this.$emit('input',e.selectIndex);
+				// }
+					this.$emit('input',e.selectIndex);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	@import 'index.scss'
+</style>