ProAdvanced/pages/fc-page/fc-list/fc-list.vue

<template>
	<view>

		<uni-nav-bar id="nav-bar" status-bar="true" backgroundColor="rgba(255, 255,255, 255)" @clickLeft="onBack()"
		 @clickRight="onDownLoad()" fixed="true">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>
			<view slot="middle" class="uni-navbar__header-container">
				<view class="uni-navbar__header-container-inner">
					<view>
						<text>我的游戏</text>
					</view>
					<view class="flex align-center text-13px margin-left-sm" @click="togglePopup('top', 'popup')">
						<image class="b-down-arrow" src="../../../static/down-arrow@2x.png"></image>
					</view>
				</view>

			</view>
			<view slot="right">
				<view class="flex align-center text-13px" style="margin-right: 20rpx;">
					<image class="png-more" style="width: 50rpx;height: 40rpx;" src="../../../static/download@2x.png"></image>
				</view>
			</view>
		</uni-nav-bar>

		<view style="position: relative;" v-for="(item, index) in FCList" :key="index" :data-id="index">
			<view class="fc-list-container">
				<view class="fc-list-body">
					<view class="flex">
						<image class="data-png-64" :src="item.gamePicture"></image>
						<view style="display: flex;flex-direction: column;">
							<text class="cont">{{item.gameName}}</text>
							<view style="padding-left: 5px;">
								<text class="cont-blue">{{item.suffix}}</text>
								<text class="cont-blue">{{item.type}}</text>
							</view>
						</view>
					</view>
					<view class="fc-list-start-button">
						启动
					</view>
				</view>
			</view>
			<uni-swipe-action :options="options1" style="border: 1rpx solid #000000; z-index: 10000;">
				<view style="height: 200rpx;"></view>
			</uni-swipe-action>

		</view>
		<uni-popup :show="showpopup" type="top" @change="changePopup">
			<view style="display: flex;justify-content: center;" @click="changePopup({
				show: false
			})">
				<view class="popup-content" @click.stop="clear">
					<view class="popup-item " v-for="(item, index) in popupList" :key="index" :data-id="index" :class="index == popupList.length-1?'':'solid-bottom'">
						<view style="padding: 10px; " :class="index == 0?'make-text-bPurple':''">{{item.name}}</view>
					</view>
					<view class="triangle"></view>
				</view>

			</view>

		</uni-popup>
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action.vue';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'

	export default {
		components: {
			uniSwipeAction,
			uniNavBar,
			uniPopup
		},
		data() {
			return {
				isOpened: false,
				options1: [{
					text: '删除',
					bShowDeleteIcon: true,
					style: {
						backgroundColor: 'rgb(255,58,49)'
					}
				}],
				showpopup: false,
				showtip: false,
				showimage: false,
				showshare: false,
				type: '',
				list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
				popupList: [{
					id: 0,
					name: "全部游戏",
					type: 0,
				}, {
					id: 0,
					name: "FC",
					type: 0,
				}, {
					id: 0,
					name: "MD",
					type: 0,
				}, {
					id: 0,
					name: "GBA",
					type: 0,
				}, {
					id: 0,
					name: "PS",
					type: 0,
				}, {
					id: 0,
					name: "GBC",
					type: 0,
				}, {
					id: 0,
					name: "MAME",
					type: 0,
				}, {
					id: 0,
					name: "NDS",
					type: 0,
				}],
				content: '顶部弹 popup',
				//我的fc游戏列表
				FCList: []
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.isOpened = true
			})

			this.onGetStoreFCList();
		},
		methods: {
			clear() {},
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			onDownLoad() {

			},

			bindClick(e) {
				console.log(e)
				uni.showToast({
					title: `点击了${e.content.text}按钮`,
					icon: 'none'
				})
			},
			setOpened() {
				this.isOpened = !this.isOpened
			},
			change(e) {
				this.isOpened = e
			},
			togglePopup(type, open) {
				this['show' + open] = true
			},
			cancelPopup(type) {
				this['show' + type] = false
			},
			changePopup(e) {
				console.log('是否打开:' + e.show)
				if (!e.show) {
					this.showpopup = false
					this.showtip = false
					this.showimage = false
					this.showshare = false
				}
			},
			onGetStoreFCList() {
				//todo 下载完成,设置记录数据到本地，

				//#ifdef H5
				this.FCList = uni.getStorageSync("FCList");
				//#endif

				//#ifdef APP-PLUS
				this.FCList = plus.storage.getItem("FCList");
				//#endif
			}
		}
	}
</script>

<style>
	.uni-navbar__header-container {
		flex: 1;
	}

	.uni-navbar__header-container-inner {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		align-items: center;
		justify-content: center;
		font-size: 15px;
	}

	.fc-list-container {
		position: absolute;
		width: 100%;
		background-color: #FFFFFF;
	}

	.fc-list-body {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 200rpx;
		margin: 0 20px;
		border-bottom: 1rpx solid #eee;
	}

	.fc-list-start-button {
		width: 60px;
		height: 36px;
		font-size: 16px;
		line-height: 36px;
		background-color: #F5E003;
		text-align: center;
		border-radius: 12rpx;
	}


	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 28rpx;
		line-height: inherit;
	}

	/* #endif */


	.cont {
		height: 45px;
		line-height: 45px;
		padding: 0 15px;
		position: relative;
		background-color: #fff;
		font-size: 15px;
		/* border-bottom-color: #F5F5F5; */
		/* border-bottom-width: 1px; */
		/* border-bottom-style: solid; */
	}

	.cont-blue {
		height: 20px;
		line-height: 20px;
		padding: 0 10px;
		position: relative;
		color: #2B95FF;
		font-size: 15px;
		/* border-bottom-color: #F5F5F5; */
		/* border-bottom-width: 1px; */
		/* border-bottom-style: solid; */
	}


	.popup-content {
		background-color: #fff;
		padding: 5px;
		font-size: 14px;
		width: 250rpx;
		/* border: 1rpx solid #007AFF; */
		margin-top: 70px;
		position: relative;
		border-radius: 12rpx;
	}

	/* clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域 */
	.triangle {
		display: block;
		height: 20px;
		width: 20px;
		background-color: inherit;
		border: inherit;
		position: absolute;
		top: -5px;
		left: calc(50% - 10px);
		// ---关键代码 start---
		clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
		transform: rotate(135deg);
		// ---end---
		border-radius: 0 0 0 2px;
	}

	.popup-item {
		align-items: center;
		text-align: center;
	}
</style>