页面编写

.gitignore

@@ -0,0 +1,27 @@
+.DS_Store
+node_modules/
+unpackage/
+dist/
+.history
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.project
+.idea
+.hbuilderx
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+apis/user.js.rej

apis/index.js

@@ -0,0 +1,40 @@
+import request from "@/request"
+import config from "@/config"
+
+// 获取视频分类列表
+export const getServerShipCategoryList = (data) => {
+    return request.post({
+        url: '/api/ship/serverShipVideo/getServerShipCategoryList',
+        data:data
+    })
+}
+
+// 获取视频节目分页
+export const getServerShipProgramPage = (data) => {
+    return request.post({
+        url: '/api/ship/serverShipVideo/getServerShipProgramPage',
+        data:data
+    })
+}
+
+// 查看视频列表
+export const getServerShipVideoList = (shipProgramId) => {
+    return request.post({
+        url: `/api/ship/serverShipVideo/getServerShipVideoList/${shipProgramId}`,
+    })
+}
+
+// 获取视频url
+export const getServerShipVideoUrl = (serverShipVideoId) => {
+    return request.post({
+        url: `/api/ship/serverShipVideo/getServerShipVideoUrl/${serverShipVideoId}`,
+    })
+}
+
+// 观看同步
+export const syncWatchHistory = (data) => {
+    return request.post({
+        url: `/api/ship/serverShipVideo/syncWatchHistory`,
+        data: data
+    })
+}

apis/login.js

@@ -0,0 +1,18 @@
+import request from "@/request"
+import config from "@/config"
+
+// 登录
+export const login = (data) => {
+    return request.post({
+        url: `/api/admin/login`,
+        data: data
+    })
+}
+
+// 登出
+export const logout = (data) => {
+    return request.post({
+        url: `/api/admin/logout`,
+        data: data
+    })
+}

apis/my.js

@@ -0,0 +1,18 @@
+import request from "@/request"
+import config from "@/config"
+
+// 查看个人信息
+export const getUserInfo = (data) => {
+    return request.post({
+        url: `/api/ship/serverShipVideo/getUserInfo`,
+        data: data
+    })
+}
+
+// 查看观看历史
+export const getServerWatchHistory = (data) => {
+    return request.post({
+        url: `/api/ship/serverShipVideo/getServerWatchHistory`,
+        data: data
+    })
+}

apis/video.js

@@ -0,0 +1,18 @@
+import request from "@/request"
+import config from "@/config"
+
+// 观看同步
+export const syncWatchHistory = (data) => {
+    return request.post({
+        url: `/api/ship/serverShipVideo/syncWatchHistory`,
+        data: data
+    })
+}
+
+// 购买船端视频
+export const buyShipVideo = (data) => {
+    return request.post({
+        url: `/api/ship/serverShipVideo/buyShipVideo`,
+        data: data
+    })
+}

components/video-player/video-player.vue

@@ -1,6 +1,6 @@
 <template>
     <view class="videoPlayer">
-        <video :id="videoId" ref="myVideo" class="video" height="100%" autoplay :loop="true" :src="videoUrl" :show-center-play-btn="false" :enable-play-gesture="true" :controls="controls" :vslide-gesture="true" :show-play-btn="false" :show-fullscreen-btn="false" @controlstoggle="controlstoggle($event)" @timeupdate="updateProgress" @play="play" @pause="pause" @fullscreenchange="onFullscreenChange" @click="togglePlay"></video>
+        <video :id="videoId" ref="myVideo" class="video" height="100%" :autoplay="autoplay" :loop="true" :src="videoUrl" :show-center-play-btn="false" :enable-play-gesture="true" :controls="controls" :vslide-gesture="true" :show-play-btn="false" :show-fullscreen-btn="false" @controlstoggle="controlstoggle($event)" @timeupdate="updateProgress" @play="play" @pause="pause" @fullscreenchange="onFullscreenChange" @click="togglePlay"></video>
         <view v-if="isPlay" class="play" @click="togglePlay"><image :src="imgsrc"></image></view>
     </view>
 </template>
@@ -10,7 +10,11 @@
 export default {
     props:{
         videoUrl: String,
-        videoId: String
+        videoId: String,
+        autoplay: {
+            type: Boolean,
+            default: true
+        }
     },
     data(){
         return{
@@ -39,7 +43,6 @@ export default {
         togglePlay() {
             
             var video = this.$refs.myVideo;
-            
             if (video.playing) {
                 this.isPlaying = true
                 video.pause();
@@ -82,10 +85,12 @@ export default {
         }
     },
     mounted(){
+        this.isFullscreen = uni.createVideoContext('myVideo')
         setTimeout(() => {
-            console.log(uni.createVideoContext('myVideo'),'video');
+            console.log(99);
+            // this.togglePlay()
         })
-        this.isFullscreen = uni.createVideoContext('myVideo')
+        
         
         // this.$refs.video.addEventListener('loadedmetadata', () => {
         //     this.updateProgress(); // 初始化时设置进度为0%  

config/index.js

@@ -6,6 +6,7 @@ const test = require("./modules/test.js")
 const prod = require("./modules/prod.js")
 // const pre = require("./modules/pre.js")
 const mock = require("./modules/mock.js")
+const debug = require("./modules/debug.js")
 const ENV = platform() === 'APP-PLUS' ? 'app' : getEnv()
 console.log('当前运行平台 :>>', platform())
 console.log("当前运行环境 :>>", ENV)
@@ -17,6 +18,10 @@ const BASE = {
 	prod,
 	// 测试
 	test,
+	// mock环境
+	mock,
+	// 开发环境
+	debug
 }
 
 module.exports = Object.assign(defaults, BASE[ENV])

config/modules/debug.js

@@ -0,0 +1,6 @@
+module.exports = {
+	env: 'debug',
+	baseUrl: 'http://debugapi.mstardance.com',
+	wapUrl: 'http://debugstar.mstardance.com/playVideo',
+	appid: 'wx6bf179cc7f0bd36d'
+}

config/modules/dev.js

@@ -2,7 +2,5 @@ module.exports = {
 	env: 'dev',
 	baseUrl: 'http://debugapi.mstardance.com',
 	wapUrl: 'http://debugstar.mstardance.com/playVideo',
-	buyerMock: '/', // 买家mock  /mock/23/
-	sellerMock: '/', // 卖家mock  /mock/25/
 	appid: 'wx6bf179cc7f0bd36d'
 }

config/modules/mock.js

@@ -1,8 +1,6 @@
 module.exports = {
 	env: 'mock',
-	buyerMock: '/mock/41/', // 买家mock  /mock/41/
-	sellerMock: '/mock/33/', // 卖家mock  /mock/25/
-	baseUrl: 'http://47.100.78.149:3000',
+	baseUrl: 'http://10.0.60.46:8989',
 	appid: 'wxd51ce33b1119f45d',
 	wapSrc: 'http://10.0.60.88:80/#/',
 }

manifest.json

@@ -70,6 +70,21 @@
     },
     "vueVersion" : "2",
     "h5" : {
+        "devServer" : {
+            "port" : 80,
+            "disableHostCheck" : true,
+            "proxy" : {
+                "/api" : {
+                    "target" : "http://10.0.60.53:8989",
+                    "changeOrigin" : true,
+                    "secure" : false,
+                    "pathRewrite" : {
+                        "/api" : "/"
+                    }
+                }
+            },
+            "https" : false
+        },
         "router" : {
             "base" : "/playVideo/"
         },

package.json

@@ -1,6 +1,26 @@
 {
 	"uni-app": {
 		"scripts": {
+			"mp-h5-mock": {
+				"title": "h5-mock",
+				"browser": "chrome",
+				"env": {
+					"UNI_PLATFORM": "h5"
+				},
+				"define": {
+					"MOCK": true
+				}
+			},
+			"mp-h5-debug": {
+				"title": "h5-debug",
+				"browser": "chrome",
+				"env": {
+					"UNI_PLATFORM": "h5"
+				},
+				"define": {
+					"DEBUG": true
+				}
+			},
 			"mp-h5-dev": {
 				"title": "h5-dev",
 				"browser": "chrome",

pages.json

@@ -27,6 +27,33 @@
 				"navigationStyle": "custom"
 			}
 		}]
+	},{
+		"root": "pages/login",
+		"pages": [{
+			"path": "/index",
+			"style": {
+				"navigationBarTitleText": "登录",
+				"navigationStyle": "custom"
+			}
+		}]
+	},{
+		"root": "pages/history",
+		"pages": [{
+			"path": "/index",
+			"style": {
+				"navigationBarTitleText": "观看历史",
+				"navigationStyle": "custom"
+			}
+		}]
+	},{
+		"root": "pages/search",
+		"pages": [{
+			"path": "/index",
+			"style": {
+				"navigationBarTitleText": "搜索",
+				"navigationStyle": "custom"
+			}
+		}]
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

pages/history/index.vue

@@ -0,0 +1,58 @@
+<template>
+    <view class="history">
+        <view class="list">
+            <view class="list_item flex" v-for="(item,index) in list" :key="index">
+                <image :src="item.thumbnail" mode="aspectFill" loading="lazy"></image>
+                <view class="innews">
+                    <text>{{item.title}}</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { getServerWatchHistory } from '@/apis/my'
+export default {
+    data(){
+        return{
+            list:[]
+        }
+    },
+    mounted() {
+        this.getHistoryList()
+    },
+    methods:{
+        async getHistoryList(){
+            const res = await getServerWatchHistory()
+            console.log(res,'res');
+            this.list = res
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+    .history{
+        height: 100%;
+        background: #fff;
+        .list{
+            padding: 20rpx;
+            .list_item{
+                padding: 20rpx;
+                image{
+                    object-fit: contain;
+                    width: 160rpx;
+                    height: 220rpx;
+                    margin-right: 30rpx;
+                }
+                .innews{
+                    padding: 40rpx 0;
+                    display: flex;
+                    flex-direction: column;
+                    // justify-content: space-around;
+                }
+            }
+        }
+    }
+</style>

pages/index/index.vue

@@ -1,57 +1,60 @@
 <template>
 	<view class="main">
-		<view class="search">
-			<text>亚太视频</text>
-			<u-search height="30" bgColor="#FFF" :showAction="false" placeholder="请输入剧名" searchIconColor="#000"></u-search>
-		</view>
-		<view class="playlets">
-			<view class="ranks">
-				<u-tabs :list="tabs" @click="click" :activeStyle="{
-					color: '#303133',
-					fontWeight: 'bold',
-					transform: 'scale(1.05)'
-				}"
-				:inactiveStyle="{
-					color: '#606266',
-					transform: 'scale(1)'
-				}"
-				itemStyle="padding-right: 15px; height: 34px;"></u-tabs>		
+		<view class="bg">
+			<view class="search">
+				<text>亚太视频</text>
+				<u-search height="30" bgColor="#FFF" :showAction="false" placeholder="请输入剧名"
+					searchIconColor="#000" v-model="keyword" @focus="toSearch"></u-search>
+				
 			</view>
-			<view class="rank_list">
-				<view class="list-item" v-for="(item,index) in list" :key="index">
-					<view class="cover">
-						<image class="cover_img" src=""></image>
-						<view :class="`grade${index}`" class="grade">{{index+1}}</view>
-						<view class="hot">
-							<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '24rpx'}"></pv-icon>
-							<text>12.8W</text>
+			<view class="playlets">
+				<view class="ranks">
+					<u-tabs :list="tabs" @click="click" :activeStyle="{
+						color: '#303133',
+						fontWeight: 'bold',
+						transform: 'scale(1.05)'
+					}" :inactiveStyle="{
+						color: '#606266',
+						transform: 'scale(1)'
+					}" itemStyle="padding-right: 15px; height: 34px;"></u-tabs>
+				</view>
+				<view class="rank_list">
+					<view class="list-item" v-for="(item,index) in list" :key="index" @click="toPlay(item.id)">
+						<view class="cover">
+							<image class="cover_img" src=""></image>
+							<view :class="`grade${index}`" class="grade">{{index+1}}</view>
+							<!-- <view class="hot">
+								<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '24rpx'}"></pv-icon>
+								<text>12.8W</text>
+							</view> -->
+						</view>
+						<view class="names">
+							<text>{{item.name}}</text>
+							<text class="ellipsis-2">{{item.description || '...'}}</text>
 						</view>
-					</view>
-					<view class="names">
-						<text>大夏第一赘婿</text>
-						<text>陈晓童瑶首搭守护小日子</text>
 					</view>
 				</view>
 			</view>
-		</view>
-		<view class="play_types">
-			<view class="type_item" v-for="(item,index) in typeLists" :key="index">
-				<view class="title">{{item.name}}</view>
-				<view class="watches">
-					<view class="watch-item" v-for="(wai,ind) in item.list" :key="ind">
-						<view class="cover">
-							<image class="cover_img" src=""></image>
-							<view class="uphot">
-								<text>更新至12集</text>
-								<view class="hot">
-									<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '26rpx'}"></pv-icon>
-									<text>12.8W</text>
+			<view class="play_types">
+				<view class="type_item" v-for="(item,index) in typeLists" :key="index">
+					<view class="title">{{item.name}}</view>
+					<view class="watches">
+						<view class="watch-item" v-for="(wai,ind) in item.list" :key="ind">
+							<view class="cover">
+								<image class="cover_img" src=""></image>
+								<view class="uphot">
+									<text>更新至12集</text>
+									<view class="hot">
+										<pv-icon name="icon-huomiao" color='#fff'
+											:customStyle="{ fontSize: '26rpx'}"></pv-icon>
+										<text>12.8W</text>
+									</view>
 								</view>
 							</view>
-						</view>
-						<view class="names">
-							<text>小日子</text>
-							<text>陈晓童瑶首搭守护小日子</text>
+							<view class="names">
+								<text>小日子</text>
+								<text>陈晓童瑶首搭守护小日子</text>
+							</view>
 						</view>
 					</view>
 				</view>
@@ -61,44 +64,48 @@
 </template>
 
 <script>
+	import {
+		getServerShipCategoryList,getServerShipProgramPage,getServerShipVideoList
+	} from '@/apis/index'
 	export default {
 		data() {
 			return {
-				tabs: [
-					{ name: '热剧榜' },
-					{ name: '男生榜' },
-					{ name: '女生榜' },
-				],
-				list:[
-					{
-						name:'大夏第一赘婿'
-					},
-					{
-						name:'永安梦'
-					},
-					{
-						name:'分手后回寒门'
-					},
-				],
-				typeLists:[
-					{
-						name:'都市逆袭',
-						list:[
-							{name:'小日子'},
-							{name:'永安梦'},
-							{name:'烈焰'},
-							{name:'目中无人'},
-						]
-					},
-					{
-						name:'现代言情',
-						list:[
-							{name:'小日子'},
-							{name:'永安梦'},
-							{name:'烈焰'},
-							{name:'目中无人'},
-						]
-					},
+				keyword:'',
+				tabs: [],
+				list: [],
+				typeLists: [
+					// {
+					// 	name: '都市逆袭',
+					// 	list: [{
+					// 			name: '小日子'
+					// 		},
+					// 		{
+					// 			name: '永安梦'
+					// 		},
+					// 		{
+					// 			name: '烈焰'
+					// 		},
+					// 		{
+					// 			name: '目中无人'
+					// 		},
+					// 	]
+					// },
+					// {
+					// 	name: '现代言情',
+					// 	list: [{
+					// 			name: '小日子'
+					// 		},
+					// 		{
+					// 			name: '永安梦'
+					// 		},
+					// 		{
+					// 			name: '烈焰'
+					// 		},
+					// 		{
+					// 			name: '目中无人'
+					// 		},
+					// 	]
+					// },
 				]
 			}
 		},
@@ -106,49 +113,101 @@
 
 		},
 		methods: {
-
-		}
+			// 跳转视频页面
+			toPlay(id){
+				uni.navigateTo({
+					url:'/pages/play/index?id='+ id,
+				})
+			},
+			// 获取视频分类列表
+			async getVideoList() {
+				const res = await getServerShipCategoryList()
+				this.tabs = res
+				this.getVideoPage(res[0].id)
+			},
+			// 获取视频节目分页
+			async getVideoPage(id) {
+				let params = {
+					orderByColumn: "",
+					orderByAsc: true,
+					pageIndex: 1,
+					pageSize: 10,
+					keyword: this.keyword,
+					shipCategoryId: id,
+				}
+				const res = await getServerShipProgramPage(params)
+				this.list = res.list
+				console.log(res);
+			},
+			// 跳转搜索页
+			toSearch(){
+				console.log(8899);
+				uni.navigateTo({
+					url:'/pages/search/index'
+				})
+			}
+			// async getList(id){
+			// 	const res = await getServerShipVideoList(id)
+			// 	console.log(res);
+			// }
+		},
+		mounted() {
+			this.getVideoList()
+			// this.getVideoPage()
+		},
 	}
 </script>
 
 <style lang="scss" scoped>
-	.main{
-		background: #3C7FFC;
+	.main {
 		padding-bottom: var(--window-bottom);
-		.search{
+		
+		.bg{
+			background: #3C7FFC;
+			
+		}
+		.search {
+			width: 100%;
 			height: 88rpx;
 			display: flex;
 			align-items: center;
 			padding: 0 24rpx;
-			text{
+			.search_accent{
+				flex: 1;
+			}
+			text {
 				color: #fff;
 				font-weight: bold;
 				margin-right: 44rpx;
 			}
 		}
-		.playlets{
-			background: linear-gradient( 180deg, #FFF6DE 0%, #FFFFFF 100%);
+
+		.playlets {
+			background: linear-gradient(180deg, #FFF6DE 0%, #FFFFFF 100%);
 			border-radius: 24rpx 24rpx 0 0;
 			padding: 22rpx 36rpx;
-			.ranks{
+
+			.ranks {
 				margin-bottom: 20rpx;
 			}
-			.rank_list{
+
+			.rank_list {
 				display: flex;
 				justify-content: space-between;
-				align-items: center;
-				
-				.list-item{
+				.list-item {
 					width: 216rpx;
-					.cover{
+
+					.cover {
 						position: relative;
-						.cover_img{
+
+						.cover_img {
 							width: 100%;
 							height: 276rpx;
 							border-radius: 16rpx;
 							background: #3C7FFC;
 						}
-						.grade{
+
+						.grade {
 							text-align: center;
 							line-height: 32rpx;
 							width: 28rpx;
@@ -161,20 +220,24 @@
 							top: 0;
 							right: 0;
 						}
-						.grade0{
-							background: linear-gradient( 90deg, #FFBB3E 0%, #FFCE1C 100%);
+
+						.grade0 {
+							background: linear-gradient(90deg, #FFBB3E 0%, #FFCE1C 100%);
 						}
-						.grade1{
-							background: linear-gradient( 90deg, #FFF2DA 0%, #FFDC5E 100%);
+
+						.grade1 {
+							background: linear-gradient(90deg, #FFF2DA 0%, #FFDC5E 100%);
 						}
-						.grade2{
-							background: linear-gradient( 90deg, #FFEBC6 0%, #FFF4CE 100%);
+
+						.grade2 {
+							background: linear-gradient(90deg, #FFEBC6 0%, #FFF4CE 100%);
 						}
-						.hot{
+
+						.hot {
 							position: absolute;
 							left: 12rpx;
 							bottom: 8rpx;
-							
+
 							text {
 								font-size: 24rpx;
 								color: #fff;
@@ -182,16 +245,20 @@
 							}
 						}
 					}
-					.names{
-						margin-top: 40rpx;
+
+					.names {
+						margin-top: 35rpx;
 						display: flex;
 						flex-direction: column;
-						text:nth-child(1){
+
+						text:nth-child(1) {
 							color: #2A2D32;
 							font-size: 28rpx;
 							font-weight: 500;
+							margin-bottom: 5rpx;
 						}
-						text:nth-child(2){
+
+						text:nth-child(2) {
 							color: #636267;
 							font-size: 24rpx;
 							font-weight: 400;
@@ -200,32 +267,39 @@
 				}
 			}
 		}
-		.play_types{
+
+		.play_types {
 			background: #fff;
 			padding: 32rpx 36rpx 0;
-			.type_item{
-				.title{
+
+			.type_item {
+				.title {
 					font-weight: bold;
 					font-size: 36rpx;
 					color: #2A2D32;
 					margin-bottom: 28rpx;
 				}
-				.watches{
+
+				.watches {
 					display: flex;
 					flex-wrap: wrap;
 					justify-content: space-between;
-					.watch-item{
+
+					.watch-item {
 						width: 336rpx;
 						margin-bottom: 40rpx;
-						.cover{
+
+						.cover {
 							position: relative;
-							.cover_img{
+
+							.cover_img {
 								width: 100%;
 								height: 216rpx;
 								border-radius: 16rpx;
 								background: #3C7FFC;
 							}
-							.uphot{
+
+							.uphot {
 								padding: 12rpx;
 								width: 100%;
 								position: absolute;
@@ -235,24 +309,25 @@
 								justify-content: space-between;
 								font-size: 24rpx;
 								color: #FFFFFF;
-								text{
 
-								}
-								.hot{
+								text {}
 
-								}
+								.hot {}
 							}
 						}
-						.names{
+
+						.names {
 							margin-top: 20rpx;
 							display: flex;
 							flex-direction: column;
-							text:nth-child(1){
+
+							text:nth-child(1) {
 								color: #2A2D32;
 								font-size: 28rpx;
 								font-weight: 500;
 							}
-							text:nth-child(2){
+
+							text:nth-child(2) {
 								color: #636267;
 								font-size: 24rpx;
 								font-weight: 400;
@@ -263,4 +338,4 @@
 			}
 		}
 	}
-</style>
+</style>

pages/login/index.vue

@@ -0,0 +1,107 @@
+<template>
+    <view class="login">
+        <view class="form">
+            <view class="input-wrapper">
+                <view class="label">账号</view>
+                <view class="input-box flex aic"><u-input v-model="username" fontSize="32rpx"
+                    border="none" type="text" placeholder="请输入账号" clearable></u-input></view>
+            </view>
+            <view class="input-wrapper">
+                <view class="label">密码</view>
+                <view class="input-box flex aic jcsb">
+                    <u-input :type="passwordType" v-model="password" fontSize="32rpx" border="none" placeholder="请输入密码"></u-input>
+                    <view v-if="password" class="eye-icon" @click="togglePassword">
+                        <pv-icon :name="icon" color="#bfbfbf" :customStyle="{ fontSize: '46rpx'}"></pv-icon>
+                    </view>
+                </view>
+            </view>
+            <view class="btn">
+                <u-button @click="toLogin()">登录</u-button>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { login } from '@/apis/login.js'
+export default {
+    data(){
+        return{
+            username:'',
+            password:'',
+            passwordType:'password',
+            icon:'icon-eye-off'
+        }
+    },
+    methods:{
+
+        togglePassword() {  
+            this.passwordType = this.passwordType === 'password' ? 'text' : 'password';  
+            this.icon = this.passwordType === 'password' ? 'icon-eye-off' : 'icon-eye-fill';  
+        },
+
+        // 登录
+        async toLogin () {
+            let params = {
+                username: this.username,
+                password: this.password
+            }
+            const res = await login(params)
+            const { token } = res
+            uni.setStorageSync('Authorization',token)
+            uni.setStorageSync('username',this.username)
+            uni.showToast({
+                title: '登录成功',
+                icon:'none'
+            });
+            uni.reLaunch({
+                url:'/pages/index/index'
+            })
+        }
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.login{
+    .form{
+        height: 100%;
+        background: #fff;
+        padding: 40rpx 32rpx;
+        border-radius: 24rpx;
+        .input-wrapper {
+            background:#fff;
+            padding-bottom: 22rpx;
+            font-size: 36rpx;
+            margin-bottom: 50rpx;
+            .label{
+                font-weight: 500;
+                font-size: 32rpx;
+                color: #171717;
+                margin-bottom: 20rpx;
+            }
+            .input-box{
+                color: #171717;
+                height: 84rpx;
+                background: #F3F7FF;
+                border-radius: 42rpx;
+                padding: 0 32rpx;
+                font-size: 28rpx
+            }
+            .icon-pad {
+                padding: 10rpx;
+            }
+            
+        }
+        .btn{
+            margin-top: 127rpx;
+            button{
+                color: #fff;
+                background: linear-gradient( 172deg, #216CFF 30%, #C7F0FF 100%);
+                border-radius: 48rpx;
+            }
+        }
+    }
+}
+    
+</style>

pages/my/index.vue

@@ -1,37 +1,83 @@
 <template>
     <view class="my">
-        <view class="news">
-            <view class="private">
-                <view class="avatar"><image></image></view>
-                <view class="info">
-                    <text>天天天</text>
-                    <text>156*****7654</text>
+        <view class="my_content">
+            <view class="news">
+                <view class="private">
+                    <!-- <view class="avatar"><image></image></view> -->
+                    <view class="info">
+                        <text>{{info.username}}</text>
+                        <!-- <text>156*****7654</text> -->
+                    </view>
                 </view>
+                <view class="right" @click="logOut"><pv-image imgSrc="/playVideo/video/ic_more_white.png" width="32" height="32"></pv-image></view>
             </view>
-            <pv-image imgSrc="/playVideo/video/ic_more_white.png" width="32" height="32"></pv-image>
-        </view>
-        <view class="menu">
-            <view class="menu_item">
-                <view class="name">
-                    <pv-image imgSrc="/playVideo/video/ic-jilu.png" width="48" height="48"></pv-image>
-                    <text>观看历史</text>
+            <view class="menu">
+                <view class="menu_item" @click="toHistory">
+                    <view class="name">
+                        <pv-image imgSrc="/playVideo/video/ic-jilu.png" width="48" height="48"></pv-image>
+                        <text>观看历史</text>
+                    </view>
+                    <pv-image imgSrc="/playVideo/video/ic_more_black.png" width="24" height="24"></pv-image>
                 </view>
-                <pv-image imgSrc="/playVideo/video/ic_more_black.png" width="24" height="24"></pv-image>
-            </view>
-            <view class="menu_item">
-                <view class="name">
-                    <pv-image imgSrc="/playVideo/video/ic-kefu.png" width="48" height="48"></pv-image>
-                    <text>联系客服</text>
+                <view class="menu_item">
+                    <view class="name">
+                        <pv-image imgSrc="/playVideo/video/ic-kefu.png" width="48" height="48"></pv-image>
+                        <text>联系客服</text>
+                    </view>
+                    <pv-image imgSrc="/playVideo/video/ic_more_black.png" width="24" height="24"></pv-image>
                 </view>
-                <pv-image imgSrc="/playVideo/video/ic_more_black.png" width="24" height="24"></pv-image>
             </view>
         </view>
+        
+        <u-popup :show="show" @close="close" safeAreaInsetBottom :round="8">
+            <view class="safe-area-inset-bottom">
+                <view class="login-out" @click="outLogin">退出登录</view>
+            </view>
+		</u-popup>
     </view>
 </template>
 
 <script>
+import { getUserInfo } from '@/apis/my'
+import { logout } from '@/apis/login'
 export default {
-    
+    data(){
+        return{
+            show:false,
+            info:{},
+        }
+    },
+    mounted() {
+        this.getInfo()
+    },
+    methods:{
+        toHistory(){
+            uni.navigateTo({
+                url:'/pages/history/index'
+            })
+        },
+        async getInfo(){
+            const res = await getUserInfo()
+            this.info = res
+            console.log(res,'res');
+        },
+        async outLogin(){
+            const res = await logout()
+            uni.removeStorageSync('Authorization')
+            uni.removeStorageSync('username')
+            uni.redirectTo({
+                url: '/pages/login/index'
+            })
+        },
+        logOut(){
+			this.show = true
+        },
+        close() {
+            this.show = false
+            // console.log('close');
+        }
+        
+    }
 }
 </script>
 
@@ -39,8 +85,11 @@ export default {
     .my{
         height: 100%;
         background: linear-gradient( 172deg, #216CFF 0%, #C7F0FF 36%, #E1FAFF 100%);
-        display: flex;
-        flex-direction: column;
+        .my_content{
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+        }
         .news{
             padding: 32rpx 32rpx 48rpx;
             display: flex;
@@ -67,6 +116,15 @@ export default {
                     justify-content: space-around;
                 }
             }
+            .right{
+                flex: 1;
+                display: flex;
+                justify-content: flex-end;
+                .more{
+                
+                    margin-top: 26rpx;
+                }
+            }
         }
         .menu{
             padding: 24rpx 32rpx;
@@ -92,5 +150,9 @@ export default {
                 border: none;
             }
         }
+        .login-out{
+			text-align: center;
+			margin: 40rpx 0;
+		}
     }
 </style>

pages/play/index.vue

@@ -1,11 +1,11 @@
 <template>
 	<view class="play">
-		<video-player :videoUrl="videoUrl"></video-player>
+		<video-player :videoUrl="watchVo.url"></video-player>
 		<view class="anthologys_detail">
 			<view class="anthology" @click="show = true">
 				<view class="ant">
 					<image :src="play_img" class="play"></image>
-					<text class="ant-text">大夏第一赘婿(1/94)</text>
+					<text class="ant-text">{{watchVo.programName}}(1/{{watchVo.programNum}})</text>
 				</view>
 				<view class="ant">
 					<text>选集</text>
@@ -13,20 +13,20 @@
 						:customStyle="{ fontSize: '32rpx',marginLeft:'8rpx'}"></pv-icon>
 				</view>
 			</view>
-			<view class="hot">
+			<!-- <view class="hot">
 				<pv-icon name="icon-huomiao" color='#fff' :customStyle="{ fontSize: '32rpx'}"></pv-icon>
 				<text>12.8W</text>
-			</view>
+			</view> -->
 
 		</view>
 		<u-popup :show="show" @close="close" @open="open" safeAreaInsetBottom :round="15">
 			<view class="opera">
 				<view class="opera-top">
 					<view class="title">
-						<image class="cover" :src="coverImg"></image>
+						<image class="cover" :src="watchVo.thumbnail"></image>
 						<view class="name">
-							<text>大夏第一赘婿</text>
-							<text>共94集·已完结</text>
+							<text>{{watchVo.programName}}</text>
+							<text>共{{watchVo.programNum}}集·已完结</text>
 						</view>
 					</view>
 					<view @click="close"><pv-icon name="icon-xiala"
@@ -34,24 +34,24 @@
 
 				</view>
 				<view class="serice">
-					<u-tabs :list="tabs" lineWidth="0" lineColor="#f56c6c" :activeStyle="{
+					<!-- <u-tabs :list="tabs" lineWidth="0" lineColor="#f56c6c" :activeStyle="{
                             color: '#62C5C6',
                             transform: 'scale(1)'
                         }" :inactiveStyle="{
                             color: '#000',
                             transform: 'scale(1)'
                         }" itemStyle="padding-left: 0px; padding-right: 20px; height: 34px;">
-					</u-tabs>
+					</u-tabs> -->
 					<view class="numbers">
 						<view class="num">
-							<view class="num_item num_item_select" v-for="(item,index) in list" :key="index">
-								<text class="num_text">{{item}}</text>
-								<view class="num_play">
+							<view class="num_item" :class="{num_item_select: item.sort == sort}" v-for="(item,index) in list" :key="index" @click="toPlay(item)">
+								<text class="num_text">{{item.sort}}</text>
+								<view v-if="item.sort === sort" class="num_play">
 									<view></view>
 									<view></view>
 									<view></view>
 								</view>
-								<view class="lock">
+								<view v-if="!item.isPay" class="lock">
 									<pv-icon name="icon-v-locked" color="#A37449"
 										:customStyle="{ fontSize: '20rpx',fontWeight: 'bold'}"></pv-icon>
 								</view>
@@ -61,16 +61,39 @@
 				</view>
 			</view>
 		</u-popup>
+		<u-popup :show="isPayShow" @open="openPlay" @close="closePlay" safeAreaInsetBottom :round="15">
+			<view class="pay_video">
+				<view class="tit flex aic">
+					<pv-icon name="icon-v-locked" color="#fff" :customStyle="{ fontSize: '30rpx',fontWeight: 'bold'}"></pv-icon>
+					<text class="tips">当前视频没有播放权限</text>
+				</view>
+				<view class="pays flex jcsa aic">
+					<view class="pay_item single" :class="{ pay_item_select: !type }" @click="changeType(type)">
+						<text>单集购买</text>
+					</view>
+					<view class="pay_item all" :class="{ pay_item_select: type }" @click="changeType(type)">
+						<text>整集购买</text>
+					</view>
+				</view>
+				<u-button class="btn" type="primary" shape="circle" @click="confirm">确认</u-button>
+			</view>
+		</u-popup>
 	</view>
 </template>
 
 <script>
 	import defaultConfig from '@/config/default.js'
-
+	import { getServerShipVideoUrl,getServerShipVideoList } from '@/apis/index'
+	import { buyShipVideo } from '@/apis/video'
 	export default {
 		data() {
 			return {
+				// id:'',
+				type: 0,
+				watchVo:{},
+				sort:0,
 				show: false,
+				isPayShow: false,
 				videoUrl: '/static/video/luo-sun.mp4', //路径
 				play_img: defaultConfig.ossImgUrl + '/playVideo/video/ic_search.png',
 				coverImg: 'https://obs-fanxing.obs.cn-east-3.myhuaweicloud.com/retail/main/img_bgtop.png',
@@ -79,19 +102,61 @@
 				}, {
 					name: '51-94'
 				}],
-				list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27,
-					28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50
-				]
+				list: [],
+				shipVideoId:'',
 			}
 		},
-		onReady:function(){},
+		onLoad(params){
+			let id = params.id
+			console.log(params,id,'id');
+			// this.getVideoUrl(id)
+			this.getVideoList(id)
+		},
 		methods: {
+			// 获取视频url
+			async toPlay(item){
+				if(item.sort === this.watchVo.sort) return
+				if(!item.isPay){
+					this.shipVideoId = item.id
+					this.isPayShow = true
+					return
+				}
+				const res = await getServerShipVideoUrl(item.id)
+
+				console.log(res);
+			},	
+			// 查看视频列表
+			async getVideoList(id){
+				const res = await getServerShipVideoList(id)
+				this.watchVo = res.serverVideoWatchVo
+				this.sort = res.serverVideoWatchVo.sort
+				this.list = res.videoVos
+			},	
+			
+			async confirm(){
+				let params = {
+					shipVideoId: this.shipVideoId,
+					type: this.type
+				}
+				const res = await buyShipVideo(params)
+				console.log(res);
+
+			},
+			
+			changeType(type){
+				type?this.type = 0:this.type = 1
+			},
 			open() {
-				// console.log('open');
 			},
 			close() {
 				this.show = false
-				// console.log('close');
+			},
+			closePlay() {
+				this.isPayShow = false
+				this.show = true
+			},
+			openPlay(){
+				this.show = false
 			}
 		}
 	}
@@ -155,7 +220,6 @@
 
 		.opera {
 			padding: 20rpx 30rpx;
-
 			.opera-top {
 				display: flex;
 				justify-content: space-between;
@@ -195,14 +259,17 @@
 				overflow: hidden;
 
 				.numbers {
-					height: 600rpx;
+					height: 500rpx;
 					overflow: scroll;
 
 					.num {
 						display: flex;
 						flex-wrap: wrap;
-
+						.num_item_select{
+							background: #E9F9F9 !important;
+						}
 						.num_item {
+							position: relative;
 							display: flex;
 							justify-content: center;
 							align-items: center;
@@ -212,12 +279,6 @@
 							background: #FAFAFA;
 							color: #000;
 							box-sizing: border-box;
-						}
-
-						.num_item_select {
-							background: #E9F9F9;
-							position: relative;
-
 							.num_text {
 								color: #62C5C6;
 							}
@@ -264,11 +325,41 @@
 								align-items: center;
 							}
 						}
-
 					}
 
 				}
 			}
 		}
+		.pay_video{
+			background: linear-gradient( 180deg, #216CFF 10%, #C7F0FF 50%);
+			padding: 30rpx 20rpx;
+			// margin-bottom: calc(20rpx + constant(safe-area-inset-bottom)) !important;
+            margin-bottom: calc(env(safe-area-inset-bottom)) !important;
+			// height: 300rpx;
+			.tit{
+				color: #fff;
+				.tips{
+					margin-left: 5rpx;
+				}
+			}
+			.pays{
+				margin: 30rpx 0;
+				.pay_item{
+					background: #fff;
+					width: 40%;
+					height: 100rpx;
+					border-radius: 12rpx;
+					text-align: center;
+					line-height: 100rpx;
+				}
+				.pay_item_select{
+					background: #216CFF;
+					color: #fff;
+				}
+			}
+			.btn{
+				// margin-bottom: 30rpx;
+			}
+		}
 	}
 </style>

pages/search/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <view class="search">
+        <view class="input_box">
+            <u-search height="30" bgColor="#FFF" :showAction="false" :focus="true" placeholder="请输入剧名"
+                searchIconColor="#000" v-model="keyword" @search="search"></u-search>
+        </view>
+        <view class="videoLists">
+            <view class="list_item" v-for="(item,index) in list" :key="index"></view>
+        </view>
+    </view>
+</template>
+<script>
+import { getServerShipProgramPage } from '@/apis/index'
+export default {
+    data(){
+        return{
+            keyword:'',
+            list:[]
+        }
+    },
+    methods: {
+        // 获取视频节目分页
+        async getVideoPage() {
+            let params = {
+                orderByColumn: "",
+                orderByAsc: true,
+                pageIndex: 1,
+                pageSize: 10,
+                keyword: this.keyword,
+                shipCategoryId: '',
+            }
+            const res = await getServerShipProgramPage(params)
+            this.list = res.list
+            console.log(res);
+        },
+        search(){
+            this.getVideoPage()
+        }
+    },
+}
+</script>
+<style lang="scss" scoped>
+    .search{
+        
+        padding-bottom: var(--window-bottom);
+        .input_box{
+            padding: 20rpx;
+        }
+    }
+</style>

request/index.js

@@ -13,7 +13,7 @@ function requestHandle(obj) {
 	const reqData = wipeNulish(obj.data) || {}
 	const accessToken = uni.getStorageSync('accessToken') || ''
 	const tokenType = uni.getStorageSync('tokenType') || ''
-	const Authorization = accessToken ? `${accessToken}` : ''
+	const Authorization = uni.getStorageSync('Authorization') || ''
 	const customRes = obj.customRes
 	const plat = platform()
 	const env = getEnv()
@@ -46,7 +46,7 @@ function requestHandle(obj) {
 				data: {
 					data,
 					code,
-					message
+					msg
 				}
 			}] = response
 			if (error) {
@@ -57,7 +57,7 @@ function requestHandle(obj) {
 			}
 			if (customRes) {
 				resolve(response[1].data)
-			} else if (code === 9001) { // 登录过期
+			} else if (code === 5001) { // 登录过期
 				uni.removeStorageSync('accessToken')
 				uni.removeStorageSync('tokenType')
 				uni.removeStorageSync('userInfo')
@@ -68,19 +68,18 @@ function requestHandle(obj) {
 					return
 				}
 				uni.showToast({
-					title: '登录已过期',
+					title: msg || '登录已过期',
 					icon: 'none',
 					mask: true
 				})
-				console.log('过期');
 				setTimeout(() => {
 					uni.reLaunch({
 						url: '/pages/login/index'
 					})
 				}, 1000)
-			} else if (code !== 1) {
+			} else if (code !== 200) {
 				uni.showToast({
-					title: message || '服务器开小差',
+					title: msg || '服务器开小差',
 					icon: 'none'
 				})
 			} else {

static/icon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4498473 */
-  src: url('https://at.alicdn.com/t/c/font_4498473_xuv4gzbdzzo.woff2?t=1712630500324') format('woff2'),
-       url('https://at.alicdn.com/t/c/font_4498473_xuv4gzbdzzo.woff?t=1712630500324') format('woff'),
-       url('https://at.alicdn.com/t/c/font_4498473_xuv4gzbdzzo.ttf?t=1712630500324') format('truetype');
+  src: url('https://at.alicdn.com/t/c/font_4498473_rpwjva98ou.woff2?t=1712821815905') format('woff2'),
+       url('https://at.alicdn.com/t/c/font_4498473_rpwjva98ou.woff?t=1712821815905') format('woff'),
+       url('https://at.alicdn.com/t/c/font_4498473_rpwjva98ou.ttf?t=1712821815905') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-eye-off:before {
+  content: "\e650";
+}
+
+.icon-eye-fill:before {
+  content: "\e869";
+}
+
 .icon-v-locked:before {
   content: "\e6eb";
 }

utils/env.js

@@ -1,5 +1,7 @@
 const ENV = {
+	mock: 'mock',
 	dev: 'dev',
+	debug: 'debug',
 	test: 'test',
 	prod: 'prod'
 }
@@ -7,6 +9,15 @@ const ENV = {
 export default function getEnv() {
 	let env = ''
 
+	//#ifdef DEBUG
+	env = ENV.debug
+	//#endif
+
+	//#ifdef MOCK
+	env = ENV.mock
+	//#endif
+
+
 	//#ifdef DEV
 	env = ENV.dev
 	//#endif

utils/preCheck.js

@@ -38,42 +38,43 @@ if (platform() === 'H5') {
   //   // }
   //   openIdSt = opId || uni.getStorageSync('wxOpenid')
   // } else {
-  openIdSt = uni.getStorageSync('accessToken')
+  openIdSt = uni.getStorageSync('Authorization')
     // if (station) {
     //   uni.setStorageSync('stationType', station)
     // }
   // }
-  if (!openIdSt) {
-    const code = getWxQuery('code')
-    console.log(code,'code');
-    if (code) {
+  // if (!openIdSt) {
+    // const code = getWxQuery('code')
+    // console.log(code,'code');
+    // if (code) {
       // getOpendId({ code: code }).then(res => {
       //   const { accessToken,username,wxOpenid } = res
       //   uni.setStorageSync('wxOpenid', wxOpenid)
-      //   // const username = uni.getStorageSync('username')
-      //   // setTimeout(() => {
-      //     if (accessToken) { // 登录成功 后更新用户信息
-      //       uni.setStorageSync('accessToken', accessToken)
-      //       uni.setStorageSync('username', username)
-      //       // uni.setStorageSync('wxOpenid', wxOpenid)
-      //       // uni.setStorageSync('userInfo', ress)
-      //       window.history.go(-1)
-      //     }
-      //     if (!accessToken) { // 未登录过
-      //     //   const channel = getUrlParamsNormal('channel')
-      //     //   if (channel === 'qrcode') { // 扫码进入的页面
-      //       //   uni.reLaunch({
-      //       //     url: '/pages/gallery/index'
-      //       //   })
-      //       // } else { // 进入登录
-      //         uni.redirectTo({
-      //           url: '/pages/login/index'
-      //         })
-      //       }
-      //     // }
-      //   // },100)
+        const username = uni.getStorageSync('username')
+        console.log(openIdSt,'88');
+        setTimeout(() => {
+          if (openIdSt && username) { // 登录成功 后更新用户信息
+            // uni.setStorageSync('accessToken', accessToken)
+            // uni.setStorageSync('username', username)
+            // uni.setStorageSync('wxOpenid', wxOpenid)
+            // uni.setStorageSync('userInfo', ress)
+            // window.history.go(-1)
+          }
+          if (!openIdSt) { // 未登录过
+          //   const channel = getUrlParamsNormal('channel')
+          //   if (channel === 'qrcode') { // 扫码进入的页面
+            //   uni.reLaunch({
+            //     url: '/pages/gallery/index'
+            //   })
+            // } else { // 进入登录
+              uni.reLaunch({
+                url: '/pages/login/index'
+              })
+            }
+          // }
+        },100)
       // }).catch(err => {console.log(err,'err')})
-    } else {
+    // } else {
       // uni.setStorageSync('indexHref', window.location.href)
       // const state = ''
       // const redirect_uri = window.encodeURIComponent(window.location.href)
@@ -81,8 +82,8 @@ if (platform() === 'H5') {
       // const scope = 'snsapi_base'
       // window.location.href =
       //   `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`
-    }
-  } else {
+    // }
+  // } else {
     // uni.setStorageSync('indexHref', window.location.href)
     // const userInfo = uni.getStorageSync('userInfo')
     // if (!userInfo) { // 站点切团长
@@ -95,5 +96,5 @@ if (platform() === 'H5') {
     //     })
     //   // })
     // }
-  }
+  // }
 }

vue.config.js

@@ -0,0 +1,14 @@
+// vue.config.js  
+module.exports = {  
+    devServer: {  
+        proxy: {  
+            '/api': {  
+                target: 'http://10.0.60.53:8989',  
+                changeOrigin: true,  
+                pathRewrite: {  
+                    '^/api': ''  
+                }  
+            }  
+        }  
+    }  
+}