细节优化

pages.json

@@ -277,6 +277,13 @@
 						"navigationBarTitleText": "绑定用户",
 						"enablePullDownRefresh" : false
 					}
+				},
+				{
+					"path": "cardPackageRecord/index",
+					"style": {
+						"navigationBarTitleText": "我的卡包",
+						"enablePullDownRefresh" : false
+					}
 				}
 			]
 		}

pages/my/myInfo.vue

@@ -120,7 +120,7 @@
 							</view>
 							
 						</view>
-						<view v-if="monthlyCard.status || secondaryCard.status" class="flex-3">
+						<view v-if="monthlyCard.status || secondaryCard.status" class="flex-3" @tap="onNavByPath('cardPackageRecord')">
 							<text class="text-2">权益会员专享</text>
                             <view class="flex-1 flex-col">
                             	<view v-if="secondaryCard.status" class="flex-row-center">
@@ -566,7 +566,8 @@ import moment from "../../common/moment";
 					equityDetail:"/setting/rule/rule?keyData=user_equity_details",
 					levelDetail:"/setting/levelDetail/index",
 					dataStatistics: "/setting/dataStatistics/index",
-					activity:"/pages/activity/index"
+					activity:"/pages/activity/index",
+					cardPackageRecord: '/setting/cardPackageRecord/index'
 				},
 				list:'',
 				consumerMemberStatus:false,

setting/cardPackageRecord/index.vue

+<template>
+	<view class="order-record">
+		<view class="content-box">
+			<view class="list-content">
+				<view v-for="(item,index) in secondaryCardList" :key="index" class="relative list-item" @tap="onNavToOrderInfo(item)">
+					<image class="card-bg" :src="cardBg" mode="widthFix"></image>
+					<view class="absolute flex-row-center">
+						<view class="part-avatar">
+							<image :src="cardIcon" mode="widthFix"></image>
+						</view>
+						<view class="flex-col">
+							<text class="text-bold text-lg text-2 text-pink">{{item.confName}}</text>
+							<text class="text-2">可使用{{item.number}}次</text>
+							<view class="flex-row-center">
+								<text class="text-gray">过期时间:</text>
+								<text class="text-gray">{{item.expirationDate}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				
+				<view v-for="(item,index) in monthlyCardList" :key="index" class="relative list-item" @tap="onNavToOrderInfo(item)">
+					<image class="card-bg" :src="cardBg" mode="widthFix"></image>
+					<view class="absolute flex-row-center">
+						<view class="part-avatar">
+							<image :src="cardIcon" mode="widthFix"></image>
+						</view>
+						<view class="flex-col">
+							<text class="text-bold text-lg text-2 text-pink">{{item.confName}}</text>
+							<text v-if="item.freeDuration" class="text-2">今日可使用{{item.freeDuration}}小时</text>
+							<text v-else class="text-2">今日已使用</text>
+							<view class="flex-row-center">
+								<text class="text-gray">过期时间:</text>
+								<text class="text-gray">{{item.expirationDate}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+				
+			</view>
+		</view>
+		<view v-if=" monthlyCardList.length == 0 && secondaryCardList.length == 0" class="empty-box">
+			<u-empty text="暂无数据" textColor='#C1C1C1' width="120" :icon="listBlankImage">
+			</u-empty>
+		</view>
+	</view>
+</template>
+
+<script>
+	import config from "@/config/index.config"
+	import {
+		getUserInfo
+	} from "@/api/index.js"
+	import {
+		getDictItem
+	} from "@/utils/tools.js"
+
+	export default {
+		data() {
+			return {
+				status: 'nomore ',
+				loadingText: '努力加载中',
+				loadmoreText: '上划加载',
+				nomoreText: '到底啦',
+				statusIndex: 0,
+				list: [],
+				statusList: [{
+						label: "全部",
+						value: "",
+					},
+					{
+						label: "已预约",
+						value: "0",
+					},
+					{
+						label: "使用中",
+						value: "1",
+					},
+					{
+						label: "已完成",
+						value: "2",
+					},
+					{
+						label: "退单",
+						value: "3",
+					}
+				],
+				queryParams: {
+					pageNum: 1,
+					pageSize: 100
+				},
+				loginStatus: true,
+				orderStatusEnum: {},
+				payTypeEnum: {
+					1: "微信支付",
+					2: "支付宝支付",
+					3: "余额支付"
+				},
+				payStatus: {
+					expenditure: '-',
+					income: '+'
+				},
+				listBlankImage: config.assetsPath + '/no_data_icon.png',
+				cardIcon:config.assetsPath + '/num_card.png',
+				cardBg:config.assetsPath + '/vip/equity_bg.png',
+				monthlyCardList:[],
+				secondaryCardList:[],
+			};
+		},
+		onLoad() {
+            this.onGetDicts()
+		},
+		methods: {
+			onGetDicts() {
+				let dicts = []
+				if (uni.getStorageSync('dicts')) {
+					dicts = JSON.parse(uni.getStorageSync('dicts'))
+					this.orderStatusEnum = getDictItem(dicts, "store_order_status");
+					this.onLoading()
+				} else {
+					dictList().then(res => {
+						dicts = res.data.data;
+						uni.setStorageSync('dicts', JSON.stringify(res.data.data))
+						this.orderStatusEnum = getDictItem(dicts, "store_order_status");
+						this.onLoading()
+					})
+				}
+			},
+			onLoading() {
+				uni.showLoading({
+					title: '加载中'
+				})
+				getUserInfo().then(res => {
+					uni.hideLoading()
+					if (res.data.code == 200) {
+						 if(res.data.data.secondaryCardList && res.data.data.secondaryCardList.length){
+							 this.secondaryCardList = res.data.data.secondaryCardList;
+						 }
+						 if(res.data.data.secondaryCardList && res.data.data.secondaryCardList.length){
+						 	 this.monthlyCardList = res.data.data.monthlyCardList;
+						 }
+					}
+				})
+			}
+		}
+	}
+</script>
+<style>
+	page {
+		background-color: #f1f1f1;
+	}
+</style>
+<style lang="scss" scoped>
+	.order-record {
+		display: flex;
+		flex-direction: column;
+
+		.content-box {
+			display: flex;
+			flex-direction: column;
+
+			.list-content {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.list-item {
+					display: flex;
+					flex-direction: column;
+					width: 94%;
+					border-radius: 20upx;
+					margin-top: 30upx;
+					.card-bg{
+						width: 100%;
+					}
+					.absolute{
+						display: flex;
+						align-items: center;
+						.part-avatar{
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							width: 160upx;
+							margin: 0 12upx;
+							image{
+								width: 64%;
+							}
+						}
+						.text-2{
+							color: #666666;
+							margin-bottom: 20upx;
+						}
+					}
+					.part-1 {
+						display: flex;
+
+						.flex-row {
+							display: flex;
+							flex-direction: row;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file