个人中心

2020-06-13 17:36:24 +08:00
parent ee119b3be5
commit c75af5b303
16 changed files with 575 additions and 11 deletions
--- a/pages/user/content.vue
+++ b/pages/user/content.vue
@@ -0,0 +1,109 @@
+<template>
+	<view class="content">
+		<view class="tab-swiper">
+			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" active-color="#FF780F" inactive-color="#333333" font-size="30" gutter="317" height="98" :show-bar="false" swiperWidth="750" :is-scroll=false></u-tabs-swiper>
+		</view>
+		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;" class="list">
+					<view v-for="(item, index) in 5" :key="index">
+						<ContentItem :cur="current" :delItem="showPopup"></ContentItem>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;" class="video-list">
+					<view v-for="(item, index) in 5" :key="index">
+						<ContentItem :cur="current" :delItem="showPopup"></ContentItem>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+		<u-popup v-model="show" mode="center">
+			<view class="close-popup">
+				<view class="tips">确定要删除该视频吗</view>
+				<view class="btn">
+					<view class="cancel" @click="show=false">取消</view>
+					<view class="confirm">确定</view>
+				</view>
+			</view>
+		</u-popup>
+	</view>
+</template>
+<script>
+import ContentItem from '@/components/content-item/index'
+export default {
+	data() {
+		return {
+			show: false,
+			current: 0,
+			swiperCurrent: 0,
+			list: [{
+				name: '图文'
+			}, {
+				name: '视频'
+			}],
+		}
+	},
+	components: {
+		ContentItem
+	},
+	methods: {
+		showPopup() {
+			this.show = true;
+		},
+		tabsChange(index) {
+			this.swiperCurrent = index;
+		},
+		animationfinish(e) {
+			let current = e.detail.current;
+			// this.$refs.uTabs.setFinishCurrent(current);
+			this.swiperCurrent = current;
+			this.current = current;
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.content {
+	min-height: calc(100vh - var(--window-top));
+	background-color: #ECECEC;
+	display: flex;
+	flex-direction: column;
+	> uni-swiper {
+		flex: 1;
+	}
+	.tab-swiper {
+		margin: 2rpx 0 20rpx 0;
+	}
+	.close-popup {
+		background:rgba(255,255,255,1);
+		border-radius: 10rpx;
+		.tips {
+			width: 420rpx;
+			font-size: 28rpx;
+			color: rgba(102,102,102,1);
+			text-align: center;
+			padding: 38rpx 0;
+		}
+		.btn {
+			width: 420rpx;
+			border-top: 2rpx #ECECEC solid;
+			display: flex;
+			> view {
+				font-size: 26rpx;
+				flex: 1;
+				line-height: 98rpx;
+				text-align: center;
+			}
+			.cancel {
+				color: #333333;
+				border-right: 2rpx #ECECEC solid;
+			}
+			.confirm {
+				color: #FF780F;
+			}
+		}
+	}
+}
+</style>