From 92aaeeae67aa4c1251efb3d5139a330bbc8171ee Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期四, 15 五月 2025 11:30:17 +0800
Subject: [PATCH] 首页视频及样式
---
pages.json | 14 +
App.vue | 17 ++
pages/tabbar/index/home.vue | 400 ++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 429 insertions(+), 2 deletions(-)
diff --git a/App.vue b/App.vue
index cb6fe29..cd1aa8d 100644
--- a/App.vue
+++ b/App.vue
@@ -250,4 +250,21 @@
.flex1 {
flex: 1; //蹇呴』鐖剁骇璁剧疆flex
}
+
+ /* 鍦ㄧ嚎閾炬帴鏈嶅姟浠呬緵骞冲彴浣撻獙鍜岃皟璇曚娇鐢紝骞冲彴涓嶆壙璇烘湇鍔＄殑绋冲畾鎬э紝浼佷笟瀹㈡埛闇�涓嬭浇瀛椾綋鍖呰嚜琛屽彂甯冧娇鐢ㄥ苟鍋氬ソ澶囦唤銆� */
+ @font-face {
+ font-family: 'iconfont'; /* Project id 4921691 */
+ src:
+ url('//at.alicdn.com/t/c/font_4921691_eb4ujoqj71a.woff2?t=1747275566974') format('woff2'),
+ url('//at.alicdn.com/t/c/font_4921691_eb4ujoqj71a.woff?t=1747275566974') format('woff'),
+ url('//at.alicdn.com/t/c/font_4921691_eb4ujoqj71a.ttf?t=1747275566974') format('truetype');
+ }
+ .iconfont {
+ /* font-family闇�瑕佸拰鑷畾涔夌殑鐩稿悓 */
+ font-family: "iconfont" !important;
+ font-size: 2em;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ }
</style>
diff --git a/pages.json b/pages.json
index 5f2b301..fdd962e 100644
--- a/pages.json
+++ b/pages.json
@@ -4,7 +4,16 @@
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
},
"pages": [
-
+ // 绗竴涓氨鏄椤�
+ {
+ "path" : "pages/tabbar/index/home",
+ "style" :
+ {
+ // "navigationBarTitleText" : "瑙嗛",
+ "enablePullDownRefresh" : false,
+ "navigationStyle": "custom"
+ }
+ },
{
"path": "pages/tabbar/home/index",
"style": {
@@ -93,6 +102,7 @@
"navigationBarTitleText": "涓撻"
}
}
+
],
"subPackages": [
@@ -825,7 +835,7 @@
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
- "pagePath": "pages/tabbar/home/index",
+ "pagePath": "pages/tabbar/index/home",
"iconPath": "static/tabbar/home.png",
"selectedIconPath": "static/tabbar/home-s.png",
"text": "棣栭〉"
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
new file mode 100644
index 0000000..b8f2587
--- /dev/null
+++ b/pages/tabbar/index/home.vue
@@ -0,0 +1,400 @@
+<template>
+ <view class="video-container">
+ <!-- 瑙嗛鍒楄〃 -->
+ <swiper
+ class="video-swiper"
+ vertical
+ circular
+ :current="currentIndex"
+ @change="onSwiperChange"
+ >
+ <swiper-item v-for="(item, index) in videoList" :key="item.id">
+ <video
+ :id="'video'+index"
+ :src="item.url"
+ :autoplay="currentIndex === index"
+ :controls="false"
+ :loop="true"
+ :object-fit="item.objectFit"
+ class="video-item"
+ @play="onPlay(index)"
+ @pause="onPause(index)"
+ @ended="onEnded(index)"
+ ></video>
+
+ <!-- 鎮寕鍟嗗搧閾炬帴灞� -->
+ <view class="goods-link-warp">
+ <view class="goods-link">
+ <view class="goods-container">
+ <!-- 鍟嗗搧鍥剧墖 -->
+ <image class="goods-image" :src="item.goods.image" mode="aspectFill"></image>
+
+ <!-- 鍟嗗搧淇℃伅 -->
+ <view class="goods-info">
+ <text class="goods-name">{{item.goods.name}}</text>
+ <view class="price-section">
+ <text class="current-price">楼{{item.goods.price}}</text>
+ <text class="original-price" v-if="item.goods.originalPrice">楼{{item.goods.originalPrice}}</text>
+ </view>
+ <text class="sales-count">{{item.goods.sales}}浜哄凡璐�</text>
+ </view>
+
+ <!-- 璐拱鎸夐挳 -->
+ <view class="buy-button">
+ <text>璐拱</text>
+ </view>
+ </view>
+ </view>
+ </view>
+
+
+ <!-- 瑙嗛淇℃伅灞� -->
+ <view class="video-info">
+ <view>
+ <text class="video-author">@{{item.author}}</text>
+ </view>
+ <view style="width: 100%;word-wrap: break-word;white-space: normal;overflow-wrap: break-word;">
+ <text class="video-title">{{item.title}}</text>
+ <text class="video-tag" v-for="(tag, index) in item.tags" :key="tag">#{{tag}}</text>
+ </view>
+ </view>
+
+ <!-- 鍙充晶浜掑姩鎸夐挳 -->
+ <view class="action-buttons">
+ <view class="avatar-container">
+ <image class="avatar" :src="item.authorAvatar" mode="aspectFill"></image>
+ <!-- 鍏虫敞鍥炬爣 - 浣跨敤缁濆瀹氫綅 -->
+ <view class="follow-icon">
+ <text class="iconfont"></text>
+ </view>
+ </view>
+ <view class="action-item" @click="toggleCollect(item)">
+ <!-- <image :src="item.isCollected ? '/static/collected.png' : '/static/collect.png'"></image> -->
+ <text class="iconfont" v-if="item.collected"></text>
+ <text class="iconfont" v-else></text>
+ <text style="font-size: 10px;font-weight: lighter;">{{item.collectCount}}</text>
+ </view>
+ <view class="action-item" @click="showComments(item)">
+ <text class="iconfont"></text>
+ <text style="font-size: 10px;font-weight: lighter;">{{item.commentCount}}</text>
+ </view>
+ </view>
+ </swiper-item>
+ </swiper>
+ </view>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ isFullScreen: false,
+ windowHeight: 0,
+ currentIndex: 0, // 褰撳墠鎾斁鐨勮棰戠储寮�
+ videoList: [
+ {
+ url: 'http://vjs.zencdn.net/v/oceans.mp4',
+ objectFit: 'contain',
+ title: '鎴戜簡涓�',
+ author: 'xp',
+ authorAvatar: 'https://picsum.photos/200/200?random=2',
+ collected: true,
+ commentCount: 12,
+ collectCount: 45,
+ tags: ["浜斾竴", "鐖辩編椋�", "澹ぇ澶�熷害鍜岀矇绾㈣壊鐨勬仮澶嶉�熷害鐨勫彛琚嬬┖绌�"],
+ goods: {
+ name: '鎺ㄦ祦',
+ price: '10',
+ originalPrice: '48.9',
+ sales: 1988,
+ image: 'https://picsum.photos/200/200?random=2'
+ }
+ },
+ {
+ url: 'https://videos.pexels.com/video-files/30900524/13210612_1080_1920_30fps.mp4',
+ objectFit: 'cover',
+ title: '鎴戜簡涓�',
+ author: 'xp',
+ authorAvatar: 'https://picsum.photos/200/200?random=2',
+ collected: false,
+ commentCount: 6,
+ collectCount: 45,
+ tags: ["鎴戝枩娆�"],
+ goods: {
+ name: '鎺ㄦ祦',
+ price: '10',
+ originalPrice: '48.9',
+ sales: 1988,
+ image: 'https://picsum.photos/200/200?random=2'
+ }
+ },
+ ], // 瑙嗛鍒楄〃鏁版嵁
+ videoContexts: [], // 瑙嗛涓婁笅鏂囧璞￠泦鍚�
+ loading: false, // 鏄惁姝ｅ湪鍔犺浇
+ page: 1, // 褰撳墠椤电爜
+ pageSize: 10 // 姣忛〉鏁伴噺
+ }
+ },
+ onLoad() {
+ // this.loadVideos();
+ },
+ onReady() {
+ // 鍒濆鍖栬棰戜笂涓嬫枃
+ this.initVideoContexts();
+ },
+ methods: {
+ // 鍒濆鍖栬棰戜笂涓嬫枃
+ initVideoContexts() {
+ this.videoContexts = this.videoList.map((_, index) => {
+ let videoContent = uni.createVideoContext(`video${index}`, this);
+ // videoContent.requestFullScreen({ direction: 0 });
+ return videoContent;
+ });
+ },
+
+ // 鍔犺浇瑙嗛鏁版嵁
+ async loadVideos() {
+ if (this.loading) return;
+ this.loading = true;
+
+ try {
+ const res = await uni.request({
+ url: 'https://your-api.com/videos',
+ data: {
+ page: this.page,
+ pageSize: this.pageSize
+ }
+ });
+
+ if (this.page === 1) {
+ this.videoList = res.data.list;
+ } else {
+ this.videoList = [...this.videoList, ...res.data.list];
+ }
+
+ this.page++;
+ this.$nextTick(() => {
+ this.initVideoContexts();
+ });
+ } catch (e) {
+ console.error('鍔犺浇瑙嗛澶辫触', e);
+ } finally {
+ this.loading = false;
+ }
+ },
+
+ // 婊戝姩鍒囨崲瑙嗛
+ onSwiperChange(e) {
+ const oldIndex = this.currentIndex;
+ this.currentIndex = e.detail.current;
+
+ // 鏆傚仠涓婁竴涓棰�
+ if (this.videoContexts[oldIndex]) {
+ this.videoContexts[oldIndex].pause();
+ }
+
+ // 鎾斁褰撳墠瑙嗛
+ if (this.videoContexts[this.currentIndex]) {
+ this.videoContexts[this.currentIndex].play();
+ }
+ },
+
+ // 鐐硅禐/鍙栨秷鐐硅禐
+ toggleLike(item) {
+ item.isLiked = !item.isLiked;
+ item.likeCount += item.isLiked ? 1 : -1;
+
+ uni.request({
+ url: `https://your-api.com/video/${item.id}/like`,
+ method: item.isLiked ? 'POST' : 'DELETE'
+ });
+ },
+
+ // 瑙嗛鎾斁浜嬩欢
+ onPlay(index) {
+ console.log(`瑙嗛 ${index} 寮�濮嬫挱鏀綻);
+ },
+
+ // 瑙嗛鏆傚仠浜嬩欢
+ onPause(index) {
+ console.log(`瑙嗛 ${index} 鏆傚仠`);
+ },
+
+ // 瑙嗛缁撴潫浜嬩欢
+ onEnded(index) {
+ console.log(`瑙嗛 ${index} 鎾斁缁撴潫`);
+ // 鑷姩鎾斁涓嬩竴涓紙濡傛灉涓嶅湪鏈�鍚庝竴涓級
+ if (index < this.videoList.length - 1) {
+ this.currentIndex = index + 1;
+ }
+ }
+ }
+}
+</script>
+
+<style scoped>
+ .video-container {
+ width: 100%;
+ height: 100vh;
+ background-color: #000;
+ }
+
+ .video-swiper {
+ width: 100%;
+ height: 100%;
+ }
+
+ .video-item {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .video-info {
+ width: 70%;
+ position: absolute;
+ bottom: 50px;
+ left: 20px;
+ color: #f8f8f8;
+ z-index: 10;
+ letter-spacing: 1px;
+ }
+
+ .action-buttons {
+ position: absolute;
+ right: 20px;
+ bottom: 150px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ z-index: 10;
+ }
+
+ .action-item {
+ margin-bottom: 18px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #fff;
+ }
+ .avatar-container {
+ margin-bottom: 27px;
+ position: relative; /* 涓虹粷瀵瑰畾浣嶇殑瀛愬厓绱犳彁渚涘畾浣嶄笂涓嬫枃 */
+ width: 40px;
+ height: 40px;
+ display: inline-block; /* 浣垮鍣ㄦ牴鎹唴瀹硅皟鏁村ぇ灏� */
+ }
+ .avatar {
+ border: 2px solid #FFFFFF;
+ box-sizing: border-box;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%; /* 鍏抽敭灞炴�э紝璁剧疆涓�50%鍗冲彲瀹炵幇鍦嗗舰 */
+ overflow: hidden; /* 纭繚鍥剧墖涓嶄細瓒呭嚭鍦嗗舰杈圭晫 */
+ display: block;
+ }
+ .follow-icon {
+ position: absolute;
+ bottom: 0; /* 瀹氫綅鍒板簳閮� */
+ left: 50%; /* 姘村钩灞呬腑寮�濮嬩綅缃� */
+ transform: translate(-50%, 50%); /* 姘村钩灞呬腑骞跺悜涓嬬Щ鍔�50% */
+
+ width: 18px; /* 鍥炬爣澶у皬 */
+ height: 18px;
+ background-color: #FF5A5F; /* 鍥炬爣鑳屾櫙鑹� */
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 杞诲井闃村奖 */
+ }
+ .video-tag {
+ margin-left: 5px;
+ font-weight: bold;
+ color: #eeeeee;
+ }
+ .video-author {
+ font-size: 1.2em;
+ }
+ /* 鍟嗗搧閾炬帴鎮寕灞傛牱寮� */
+ .goods-link-warp {
+ position: absolute;
+ bottom: 100px;
+ left: 20px;
+ color: #f8f8f8;
+ z-index: 10;
+ }
+ .goods-link {
+ position: relative;
+ margin: 20rpx 0;
+ padding: 12rpx;
+ background-color: rgba(255, 255, 255, 0.9);
+ border-radius: 12rpx;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+ }
+
+ .goods-container {
+ display: flex;
+ align-items: center;
+ }
+
+ .goods-image {
+ width: 120rpx;
+ height: 120rpx;
+ border-radius: 8rpx;
+ margin-right: 20rpx;
+ }
+
+ .goods-info {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .goods-name {
+ font-size: 28rpx;
+ color: #333;
+ font-weight: bold;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ margin-bottom: 8rpx;
+ }
+
+ .price-section {
+ display: flex;
+ align-items: center;
+ margin-bottom: 6rpx;
+ }
+
+ .current-price {
+ font-size: 32rpx;
+ color: #ff2e4d;
+ font-weight: bold;
+ margin-right: 12rpx;
+ }
+
+ .original-price {
+ font-size: 24rpx;
+ color: #999;
+ text-decoration: line-through;
+ }
+
+ .sales-count {
+ font-size: 22rpx;
+ color: #999;
+ }
+
+ .buy-button {
+ background: linear-gradient(to right, #ff5a5f, #ff2e4d);
+ color: white;
+ padding: 10rpx 24rpx;
+ border-radius: 20rpx;
+ font-size: 26rpx;
+ font-weight: bold;
+ }
+
+</style>
\ No newline at end of file
--
Gitblit v1.8.0