chenrui vor 4 Jahren
Ursprung
Commit
364fb51762

+ 54 - 12
pages/index/index.vue

@@ -3,7 +3,14 @@
 		<!-- 筛选弹框 -->
 		<search-modal v-if="openScreen" :visible="openScreen" :defaultParams="searchForm" @refresh="refresh" @close="openScreen=false"></search-modal>
 		<view class="homePage-head">
-			<text class="homePage-tit">交易记录</text>
+			<view class="head-con">
+				<text class="homePage-tit">交易记录</text>
+				<view class="total-con">
+					总计:
+					<text class="goleNum">150</text>
+					<image src="/static/ledou.png" class="ld-icon"></image>
+				</view>
+			</view>
 			<image class="filter-icon" src="@/static/filter.png" @tap="openScreen=true"></image>
 		</view>
 		<scroll-view class="scroll-con" scroll-y @scrolltolower="onreachBottom">
@@ -29,20 +36,19 @@
 					<view class="cell-item-c handle-con">
 						<view class="cell-item-label">操作</view>
 						<view class="cell-item-main">
-							<u-button type="primary" size="mini" v-if="item.state" class="handle-btn" @click="revokeFun(item)">撤销单据</u-button>
+							<u-button size="mini" v-if="item.state" class="handle-btn" hover-class="none" :custom-style="customBtnStyle" @click="revokeFun(item)">撤销单据</u-button>
 							<text v-else style="color: #909399;">单据已撤销</text>
 						</view>
 					</view>
 				</view>
 			</view>
-			<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list"></u-empty>
+			<u-empty class="nodata" :text="noDataText" v-if="listdata.length==0 && status!='loading'" mode="list" :margin-top="300"></u-empty>
 			<view class="loadmore">
 				<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
 			</view>
 		</scroll-view>
 	</view>
 </template>
-
 <script>
 	import searchModal from './searchModal.vue'
 	export default {
@@ -67,6 +73,11 @@
 					endDate: '',  //  创建时间默认筛选近7天
 					account: ''  //  支付账户
 				},
+				customBtnStyle: {  //  撤销单据  自定义按钮样式
+					borderColor: '#07c160',
+					backgroundColor: '#07c160',
+					color: '#fff'
+				}
 			}
 		},
 		onShow() {
@@ -135,9 +146,10 @@
 <style lang="scss">
 	.homePage-container {
 		width: 100%;
-		padding-top: 84rpx;
+		padding-top: 102rpx;
 		// 筛选菜单
 		.homePage-head{
+			font-size: 30rpx;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
@@ -145,13 +157,39 @@
 			top: 0;
 			left: 0;
 			z-index: 9;
-			padding: 20rpx 30rpx;
+			padding: 26rpx 30rpx;
 			background-color: #fff;
 			box-shadow: 0rpx 0rpx 14rpx rgba(0,0,0,.05);
 			width: 100%;
+			border-top: 10rpx solid #f8f8f8;
+			.head-con{
+				flex-grow: 1;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.homePage-tit{
+					color: #040301;
+				}
+				.total-con{
+					color: #040301;
+					.goleNum{
+						color: #eb0000;
+						font-size: 30rpx;
+						font-weight: bold;
+					}
+					.ld-icon{
+						width: 30rpx;
+						height: 30rpx;
+						margin: 0 0 0 10rpx;
+						vertical-align: middle;
+					}
+				}
+			}
 			.filter-icon{
+				flex-shrink: 0;
 				width: 36rpx;
 				height: 36rpx;
+				padding-left: 20rpx;
 			}
 		}
 		//  列表
@@ -161,18 +199,19 @@
 		}
 		//  列表样式
 		.cell-item-con{
-			padding: 0 30rpx;
 			margin-top: 10rpx;
 			.cell-item{
 				background-color: #fff;
 				color: #606266;
-				padding: 20rpx 30rpx 14rpx;
+				padding: 0 30rpx;
 				margin-bottom: 20rpx;
 				border-radius: 16rpx;
+				font-size: 28rpx;
 				.cell-item-c{
 					display: flex;
 					justify-content: space-between;
-					padding: 10rpx 0;
+					padding: 18rpx 0;
+					border-bottom: 1rpx solid #f2f2f2;
 					.cell-item-label{
 						flex-shrink: 0;
 						width: 200rpx;
@@ -195,12 +234,15 @@
 					.red {
 						color: red;
 					}
+					&:last-child{
+						border: none;
+					}
 				}
 				.handle-con{
 					align-items: center;
-					border-top: 1rpx solid #f8f8f8;
-					margin-top: 10rpx;
-					padding-top: 18rpx;
+					// margin-top: 10rpx;
+					// padding-top: 18rpx;
+					// padding: 0;
 				}
 			}
 		}

+ 8 - 9
pages/index/searchModal.vue

@@ -11,8 +11,8 @@
 				<u-form-item label="支付账号" prop="storeName" class="form-item"><u-input v-model="form.storeName" :maxlength="30" placeholder="请输入支付账号" /></u-form-item>
 			</u-form>
 			<view class="uni-list-btns">
-				<button type="primary" class="handle-btn search-btn" @click="handleSearch">查询</button>
-				<button type="info" class="handle-btn" @click="resetForm">重置</button>
+				<u-button class="handle-btn search-btn" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
+				<u-button class="handle-btn" size="medium" hover-class="none" @click="resetForm">重置</u-button>
 			</view>
 		</u-popup>
 		<!-- 时间选择器 -->
@@ -61,6 +61,11 @@ export default {
 	},
 	data() {
 		return {
+			customBtnStyle: {  //  自定义按钮样式
+				borderColor: '#07c160',
+				backgroundColor: '#07c160',
+				color: '#fff'
+			},
 			isShow: this.visible, // 显示隐藏
 			showPicker: false, // 是否显示时间弹窗
 			form: {
@@ -132,7 +137,7 @@ export default {
 .search-popup {
 	.search-title {
 		text-align: center;
-		padding: 22upx;
+		padding: 18upx 22upx;
 		color: #333;
 		border-bottom: 1px solid #eee;
 	}
@@ -159,9 +164,6 @@ export default {
 			width: 88%;
 			vertical-align: top;
 		}
-		.close-circle{
-			
-		}
 	}
 	.uni-list {
 		margin: 20upx;
@@ -188,9 +190,6 @@ export default {
 			width: 100%;
 			flex: 1;
 		}
-		.search-btn{
-			background-color: #007aff;
-		}
 	}
 }
 .date-picker {

BIN
static/filter.png


Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 1
static/iconfont/iconfont.css


BIN
static/iconfont/iconfont.ttf


BIN
static/ledou.png


BIN
static/tabbar/record-active.png


BIN
static/tabbar/record.png


BIN
static/tabbar/user-active.png


BIN
static/tabbar/user.png


Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.