From f784522b151c9bef82a0a8522dc1dcb8be975ae2 Mon Sep 17 00:00:00 2001
From: fanfan <franceesfan@163.com>
Date: Mon, 1 Jul 2024 21:32:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=AE=B6=E6=95=99=E5=AD=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/tutorial.js                     |  16 ++
 pages.json                          |  12 ++
 pages/merchantTutorial/tutorial.vue | 270 ++++++++++++++++++++++++++++
 pages/user/index.vue                |   7 +
 4 files changed, 305 insertions(+)
 create mode 100644 api/tutorial.js
 create mode 100644 pages/merchantTutorial/tutorial.vue

diff --git a/api/tutorial.js b/api/tutorial.js
new file mode 100644
index 0000000..8d1a73b
--- /dev/null
+++ b/api/tutorial.js
@@ -0,0 +1,16 @@
+import request from '@/utils/request'
+
+// api地址
+const api = {
+	courseType: 'course/getCourseType',
+	list: 'course/getCourseList'
+}
+
+// 分类
+export const courseType = (param) => {
+	return request.get(api.courseType, param)
+}
+// 列表
+export const courseList = (param) => {
+	return request.get(api.list, param)
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 40e3717..41c42c7 100644
--- a/pages.json
+++ b/pages.json
@@ -1180,6 +1180,18 @@
 				}
 			]
 		},
+		{
+			"root": "pages/merchantTutorial/",
+			"pages": [{
+					"path": "tutorial",
+					"style": {
+						"navigationStyle": "custom",
+						"enablePullDownRefresh": false,
+						"navigationBarTitleText": "商家教程"
+					}
+				}
+			]
+		},
 		{
 			"root": "pages/news3/",
 			"pages": [{
diff --git a/pages/merchantTutorial/tutorial.vue b/pages/merchantTutorial/tutorial.vue
new file mode 100644
index 0000000..31c775d
--- /dev/null
+++ b/pages/merchantTutorial/tutorial.vue
@@ -0,0 +1,270 @@
+<template>
+	<view class="park">
+		<view class="park-top">
+			<view class="park-navbar">
+				<u-navbar title="商家教程" :border-bottom="false" :background="background"></u-navbar>
+			</view>
+			<view class="top-title">
+				软件使用教学
+			</view>
+			<view class="top-marker">
+				系统教学 · 通俗易懂 · 智能搜索
+			</view>
+		</view>
+		<view class="park-center">
+			<u-tabs name="name" count="cate_count" :list="courseTypeList" :is-scroll="false" height="90"
+				active-color="rgba(243, 74, 64, 1)" inactive-color="rgba(102, 102, 102, 1)" font-size="32"
+				bar-width="55" bar-height="6" :current="current" @change="change">
+			</u-tabs>
+			<view class="center-box">
+				<view class="list" v-for="(a,i) in courseList" :key="i" @click="onLookCord(a.video_url.external_url)">
+					<image :src="a.image_url?a.image_url.external_url:''" mode="heightFix" class="img"></image>
+					<view class="infor">
+						<view class="title">
+							{{a.course_name}}
+						</view>
+						<view class="subtitle">
+							{{a.course_detail}}
+						</view>
+					</view>
+					<view class="look">
+						观看
+					</view>
+				</view>
+			</view>
+		</view>
+		<u-mask :show="show" @click="pauseVideo">
+			<view class="warp">
+				<video @tap.stop style="width: 100%;" :loop='true' id="myVideo" :src="video_url"></video>
+			</view>
+		</u-mask>
+	</view>
+</template>
+<script>
+	import * as api from '@/api/tutorial'
+	export default {
+		data() {
+			return {
+				background: {
+					background: 'none'
+				},
+				courseTypeList: [],
+				current: 0,
+				courseList: [],
+				show: false,
+				video_url: ''
+			}
+		},
+		onLoad() {
+			this.getCourseType()
+		},
+		onShow() {
+
+		},
+		methods: {
+			pauseVideo() {
+				uni.createSelectorQuery().select('#myVideo').boundingClientRect(function(rect) {
+					uni.createVideoContext('myVideo', this).pause();
+				}).exec();
+				this.show = false
+			},
+			change(index) {
+				this.current = index;
+				this.getCourseList()
+			},
+			onLookCord(url) {
+				if (url) {
+					this.show = true;
+					let  videoContext = wx.createVideoContext('myVideo')
+					videoContext.seek(0);
+					this.video_url = url
+				} else {
+					this.$toast('暂无可观看的视频')
+				}
+			},
+			// 分类
+			async getCourseType() {
+				let {
+					status,
+					message,
+					data
+				} = await api.courseType();
+				if (status == 200) {
+					this.courseTypeList = data.courseTypes
+					this.getCourseList()
+				} else {
+					this.courseTypeList = []
+					this.$toast(message)
+				}
+			},
+			// 列表
+			async getCourseList() {
+				let that = this;
+				that.courseList = []
+				let pames = {
+					courseCategoryId: that.courseTypeList[that.current].course_category_id
+				}
+				let {
+					status,
+					message,
+					data
+				} = await api.courseList(pames);
+				if (status == 200) {
+					that.courseList = data.list
+				} else {
+					that.list = []
+					that.$toast(message)
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.warp {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		width: 100%;
+		position: relative;
+		background: black;
+		z-index: 999;
+	}
+
+	.park {
+		width: 100%;
+		background: rgba(255, 255, 255, 1);
+
+		.park-top {
+			width: 100%;
+			height: 380rpx;
+			background: url(https://www.royaum.com.cn/static/user/courseBg.png);
+			background-size: 100%;
+
+			.top-title {
+				opacity: 1;
+				font-size: 64rpx;
+				font-weight: 500;
+				color: rgba(51, 51, 51, 1);
+				text-align: left;
+				vertical-align: top;
+				padding-top: 30rpx;
+				padding-left: 48rpx;
+			}
+
+			.top-marker {
+				padding-top: 15rpx;
+				padding-left: 48rpx;
+				font-size: 32rpx;
+				font-weight: 400;
+				line-height: 44rpx;
+				color: rgba(102, 102, 102, 1);
+				text-align: left;
+				vertical-align: top;
+
+			}
+		}
+
+		.park-center {
+			background: #fff;
+			width: 100%;
+			overflow: hidden;
+
+			.center-box {
+				overflow: hidden;
+				padding: 20rpx 30rpx;
+
+				.list {
+					position: relative;
+					overflow: hidden;
+					height: 152rpx;
+					border-radius: 28rpx;
+					background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(250, 177, 173, 0.07) 59.66%, rgba(243, 74, 64, 0.06) 100%);
+					display: flex;
+					align-items: center;
+					padding: 30rpx 20rpx;
+					margin-bottom: 55rpx;
+
+					.look {
+						right: 0;
+						bottom: 0;
+						position: absolute;
+						width: 136rpx;
+						height: 50rpx;
+						border-radius: 17rpx 0rpx 28rpx 0rpx;
+						background: linear-gradient(125.45deg, rgba(255, 138, 102, 1) 0%, rgba(243, 74, 64, 1) 100%);
+						font-size: 28rpx;
+						font-weight: 500;
+						letter-spacing: 0rpx;
+						line-height: 50rpx;
+						color: rgba(255, 255, 255, 1);
+						text-align: center;
+						vertical-align: top;
+
+					}
+
+					.img {
+						width: 164rpx;
+						height: 124rpx;
+						border-radius: 20rpx;
+						margin-right: 40rpx;
+					}
+
+					.infor {
+						overflow: hidden;
+						width: 478rpx;
+
+						.title {
+							font-size: 32rpx;
+							font-weight: 500;
+							letter-spacing: 0rpx;
+							line-height: 44rpx;
+							color: rgba(51, 51, 51, 1);
+							text-align: left;
+							vertical-align: middle;
+							overflow: hidden;
+							/* 确保内容超出容器时会被隐藏 */
+							display: -webkit-box;
+							/* 作为弹性伸缩盒子模型显示 */
+							-webkit-line-clamp: 2;
+							/* 限制在两行 */
+							-webkit-box-orient: vertical;
+							/* 垂直排列盒子 */
+							text-overflow: ellipsis;
+							/* 超出部分显示省略号 */
+							white-space: normal;
+							/* 使用正常的白空格处理方式，允许换行 */
+						}
+
+						.subtitle {
+							margin-top: 10rpx;
+							/** 文本1 */
+							font-size: 26rpx;
+							font-weight: 400;
+							letter-spacing: 0rpx;
+							color: rgba(102, 102, 102, 1);
+							text-align: left;
+							vertical-align: middle;
+							overflow: hidden;
+							/* 确保内容超出容器时会被隐藏 */
+							display: -webkit-box;
+							/* 作为弹性伸缩盒子模型显示 */
+							-webkit-line-clamp: 1;
+							/* 限制在两行 */
+							-webkit-box-orient: vertical;
+							/* 垂直排列盒子 */
+							text-overflow: ellipsis;
+							/* 超出部分显示省略号 */
+							white-space: normal;
+							/* 使用正常的白空格处理方式，允许换行 */
+							max-width: 320rpx;
+
+						}
+					}
+				}
+			}
+		}
+
+	}
+</style>
diff --git a/pages/user/index.vue b/pages/user/index.vue
index 2f67a76..39977f0 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -515,6 +515,13 @@
 							进群有礼
 						</view>
 					</view>
+					<!-- course -->
+					<view class="serveIcon" v-if="userInfo.user_type == 40"  @click="goJump('/pages/merchantTutorial/tutorial')">
+						<image :src="$picUrl+'/static/user/course.png'" class="icons"></image>
+						<view class="serveInfo">
+							商家教程
+						</view>
+					</view>
 				</view>
 			</view>
 			<!-- 商品推荐 -->