1.完成工会卡页面

pages.json

@@ -476,6 +476,19 @@
             }
             
         }
+        ,{
+            "path" : "pages/user/unionCard/unionCard",
+            "style" :                                                                                    
+            {
+                "enablePullDownRefresh": false,
+                "navigationBarTitleText": "工会卡",
+                "backgroundTextStyle": "light",
+                "navigationBarBackgroundColor": "#0083f5",
+                "backgroundColorTop": "#0083f5",
+                "navigationBarTextStyle": "white"
+            }
+            
+        }
     ],
 
 	"globalStyle": {

pages/tabBar/user/user.vue

@@ -101,7 +101,7 @@
 		</view>
 		
 		<view class="toolbar"  style="margin-top: 20px;">
-			<view class="title">我的操作</view>
+			<view class="title">我的</view>
 			<view class="list">
 				<view class="box" v-for="(row,index) in czList" :key="index" @tap="toPage(row.url,row.text)">
 					<view class="img">
@@ -210,11 +210,11 @@
 				],
 				//操作列表
 				czList: [
-					// {
-					// 	url: '../../login/updatePas/updatePas',
-					// 	text: '设置密码',
-					// 	img: '../../../static/img/pas.png'
-					// },
+					{
+						url: '../../user/unionCard/unionCard',
+						text: '工会卡',
+						img: '../../../static/img/pas.png'
+					},
 					{
 						url: '../../login/updatePas/resetPas',
 						text: '修改密码',

pages/user/unionCard/unionCard.vue

@@ -0,0 +1,143 @@
+<template>
+	<view>
+		<view class="leave_cont">
+			<view class="ul">
+				<view class="li">
+					<text class="font15 fcor333">开始时间</text>
+					<view class="flex1">
+						<picker mode="date" :value="start_date" :start="start_date" @change="bindDateChange">
+							<view class="date">{{start_date}}</view>
+						</picker>
+					</view>
+				</view>
+				<view class="li">
+					<text class="font15 fcor333">结束时间</text>
+					<view class="flex1">
+						<picker mode="date" :value="end_date" :start="end_date" @change="bindDateChange2">
+							<view class="date">{{end_date}}</view>
+						</picker>
+					</view>
+				</view>
+			</view>
+			<view class="btnw94">立即查询</view>
+			<view class="height30 backcorfff width100"></view>
+		</view>
+		<view class="width100 backcorfff mart10">
+			<view class="font13 fotct fcor666 paddtop15">账号余额(元)</view>
+			<view class="mart15 font16 fcor089 fotct ">￥<text class="font28">444.96</text></view>
+			<view class="font13 fotct fcor666 paddtop5 paddbotm10">31964698964646646646</view>
+		</view>
+		<view class="width100 backcorfff mart10">
+			<view class="width100 height50 bor-botm1 paddleft5 paddtright5">
+				<view class="width60 flleft fcor333 font14 text1">个人账户规帐(2020-09-1)</view>
+				<view class="width35 flright fcoreb5 font14 fotct">+102.54元</view>
+			</view>
+			<view class="width100 height50 bor-botm1 paddleft5 paddtright5">
+				<view class="width60 flleft fcor333 font14 text1">个人账户规帐(2020-09-1)</view>
+				<view class="width35 flright fcoreb5 font14 fotct">+102.54元</view>
+			</view>
+			<view class="width100 height50 bor-botm1 paddleft5 paddtright5">
+				<view class="width60 flleft fcor333 font14 text1">个人账户规帐(2020-09-1)</view>
+				<view class="width35 flright fcoreb5 font14 fotct">+102.54元</view>
+			</view>
+			<view class="width100 height50 bor-botm1 paddleft5 paddtright5">
+				<view class="width60 flleft fcor333 font14 text1">个人账户规帐(2020-09-1)</view>
+				<view class="width35 flright fcoreb5 font14 fotct">+102.54元</view>
+			</view>
+			<view class="width100 height50 bor-botm1 paddleft5 paddtright5">
+				<view class="width60 flleft fcor333 font14 text1">个人账户规帐(2020-09-1)</view>
+				<view class="width35 flright fcoreb5 font14 fotct">+102.54元</view>
+			</view>
+		</view>
+		<view class="height25 width100"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			const currentDate = this.getDate({
+				format: true
+			})
+			return {
+				start_date: currentDate,
+				end_date: currentDate,
+				other: '请输入'
+			}
+		},
+		methods: {
+			// 选择日期
+			bindDateChange: function(e) {
+				this.start_date = e.target.value
+
+			},
+			bindDateChange2: function(e) {
+				this.end_date = e.target.value;
+			},
+			// 获取当前时间
+			getDate(type) {
+				const date = new Date();
+				let year = date.getFullYear();
+				let month = date.getMonth() + 1;
+				let day = date.getDate();
+
+				if (type === 'start') {
+					year = year - 60;
+				} else if (type === 'end') {
+					year = year + 2;
+				}
+				month = month > 9 ? month : '0' + month;;
+				day = day > 9 ? day : '0' + day;
+				return `${year}-${month}-${day}`;
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		background-color: #F5F5F5;
+	}
+
+	.leave_cont {
+		background: #FFFFFF;
+	}
+
+	.leave_cont .ul {
+		padding-left: 30rpx;
+	}
+
+	.leave_cont .ul .li {
+		display: flex;
+		align-items: center;
+		border-bottom: 1px solid #efefef;
+	}
+
+	.leave_cont .ul .li text {
+		padding: 40rpx 0;
+	}
+
+	.leave_cont .ul .li .flex1 {
+		flex: 1;
+		text-align: right;
+		padding-right: 25rpx;
+		color: #999999;
+		font-size: 32rpx;
+	}
+
+	.date {
+		height: 42rpx;
+	}
+
+	.btnw94 {
+		width: 94%;
+		margin-left: 3%;
+		height: 45px;
+		line-height: 45px;
+		color: white;
+		text-align: center;
+		margin-top: 30px;
+		background-color: #0083f5;
+		border-radius: 25px;
+	}
+</style>

uni.scss

@@ -318,6 +318,10 @@ $uni-font-size-paragraph:30upx;
   margin-left: 20%;
 }
 
+.width35 {
+  width: 35%;
+}
+
 .width30 {
   width: 30%;
 }
@@ -326,6 +330,10 @@ $uni-font-size-paragraph:30upx;
   width: 20%;
 }
 
+.width25 {
+  width: 25%;
+}
+
 .width15 {
   width: 15%;
 }
@@ -558,6 +566,11 @@ $uni-font-size-paragraph:30upx;
   padding-left: 15px;
 }
 
+.paddtright5 {
+  padding-right: 5px;
+}
+
+
 .paddtright10 {
   padding-right: 10px;
 }