Merge branch 'master' of git.huaml.com:zhh/front-end

ghsApp/src/admin/book/ls.vue

@@ -0,0 +1,147 @@
+<template>
+	<view class="app-content">
+		<view class="book-banner">
+			<image v-if="showBanner" class="slide" :src="`${constant.imgUrl}/book/banner9.png`" mode="aspectFit"></image>
+		</view>
+		<view class="book-content">
+			<view v-for="(item, index) in book" :key="index" class="book-section">
+				<view class="category">
+					<image class="icon" :src="`${constant.imgUrl}${item.icon}`"></image>
+					<text class="category-text">{{item.class}}</text>
+				</view>
+				<view class="book-list">
+					<view v-for="(it, idx) in item.list" 
+						:key="idx" 
+						class="book-item"
+						@click="goDetail(it)">
+						<text :class="[it.style == 'red' ? 'red-title' : 'book-title']">{{it.title}}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { getLsList} from "@/api/book";
+export default {
+	name: "ls",
+	components: {},
+	mixins: [],
+	data() {
+		return {
+			book: [],
+			showBanner: true
+		};
+	},
+	onShareAppMessage(res) {
+		return {
+			title: '花掌柜教学视频',
+			desc: "图文视频教学，带您快速上手",
+			imageUrl: `${this.$constant.imgUrl}/logo4.png`,
+			path: "admin/book/ls",
+		}
+	},
+	onLoad() {
+		let that = this
+		getLsList().then(res => {
+			that.book = res.data.list
+		})
+	},
+	methods: {
+		init(){
+
+		},
+		goDetail(item){
+			// #ifdef MP-WEIXIN
+			this.$util.pageTo({url: '/admin/book/lsDetail?id='+item.id})
+			// #endif
+			// #ifdef APP-PLUS
+			this.$util.pageTo({url: '/admin/book/lsDetail?id='+item.id})
+			// #endif
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.app-content {
+	min-height: 100vh;
+	background-color: #f5f6fa;
+	
+	.book-banner {
+		width: 750upx;
+		height: 524upx;
+		box-shadow: 0 4upx 12upx rgba(0,0,0,0.1);
+		
+		.slide {
+			width: 750upx;
+			height: 524upx;
+			transition: opacity 0.3s ease;
+		}
+	}
+	
+	.book-content {
+		padding: 20upx 16upx;
+		
+		.book-section {
+			background: white;
+			border-radius: 16upx;
+			padding: 24upx 16upx;
+			margin-bottom: 24upx;
+			box-shadow: 0 2upx 8upx rgba(0,0,0,0.05);
+			
+			.category {
+				display: flex;
+				align-items: center;
+				padding-bottom: 20upx;
+				border-bottom: 2upx solid #f0f0f0;
+				margin-bottom: 16upx;
+				
+				.icon {
+					width: 40upx;
+					height: 40upx;
+					margin-right: 16upx;
+				}
+				
+				.category-text {
+					font-size: 36upx;
+					font-weight: 600;
+					color: #333;
+				}
+			}
+			
+			.book-list {
+				.book-item {
+					position: relative;
+					padding: 24upx 20upx;
+					margin: 12upx 0;
+					border-radius: 8upx;
+					background: #f8f9fb;
+					.book-title {
+						font-size: 32upx;
+						color: #2c3e50;
+						line-height: 1.4;
+					}
+					.red-title{
+						font-size: 32upx;
+						line-height: 1.4;
+						font-weight: bold;
+						color: #f00;
+					}
+					&::before {
+						content: '';
+						display: inline-block;
+						width: 8upx;
+						height: 8upx;
+						background: #008000;
+						border-radius: 50%;
+						margin-right: 16upx;
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

ghsApp/src/admin/book/lsDetail.vue

@@ -0,0 +1,249 @@
+<template>
+	<view class="app-content">
+		<view class="content-wrapper">
+			<template v-for="(item, index) in bookList">
+				<!-- 主标题 -->
+				<block v-if="item.style == 'title'">
+					<view :key="index" class="page-title">{{item.value}}</view>
+				</block>
+
+				<!-- 信息文本 -->
+				<block v-if="item.style == 'info'">
+					<view :key="index" class="text-content">{{item.value}}</view>
+				</block>
+
+				<block v-if="item.style == 'blankLine'">
+					<view :key="index" class="blank-line-content">{{item.value}}</view>
+				</block>
+
+				<!-- 小标题 -->
+				<block v-if="item.style == 'smallTitle'">
+					<view :key="index" class="section-title">{{item.value}}</view>
+				</block>
+
+				<!-- 小标题 -->
+				<block v-if="item.style == 'miniTitle'">
+					<view :key="index" class="mini-title">{{item.value}}</view>
+				</block>
+
+				<!-- 视频 -->
+				<block v-if="item.style == 'video'">
+					<view :key="index" class="video-block">
+						<video 
+							:id="`myVideo${index}`" 
+							:src="item.value" 
+							show-mute-btn="true"
+							object-fit="contain"
+							class="video-content">
+						</video>
+					</view>
+				</block>
+
+				<!-- 图片 -->
+				<block v-if="item.style == 'image'">
+					<view :key="index" class="image-block">
+						<image 
+							:src="`${constant.imgUrl}${item.value}`" 
+							mode="widthFix"
+							@click="previewImage(`${constant.imgUrl}${item.value}`)"
+							class="image-content">
+						</image>
+					</view>
+				</block>
+
+				<!-- 按钮 -->
+				<block v-if="item.style == 'button'">
+					<view :key="index" class="button-block">
+						<button @click="goTo(item)" class="link-button">{{item.value}}</button>
+					</view>
+				</block>
+			</template>
+
+			<!-- 底部返回按钮 -->
+			<view class="back-block">
+				<button class="admin-button-com big blue" @click="goBack()">返回列表</button>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+import { getLsBookDetail} from "@/api/book";
+import { mapGetters } from "vuex"
+export default {
+	name: "book-what",
+	components: {
+	},
+	mixins: [],
+	data() {
+		return {
+			bookList:[],
+			pageTitle:''
+		};
+	},
+	onLoad() {
+		let that = this
+		getLsBookDetail({id:this.option.id}).then(res => {
+			that.bookList = res.data.list
+			that.bookList.forEach((item) => {
+				if(item.style == 'title'){
+					this.pageTitle = item.value
+					uni.setNavigationBarTitle({title: item.value})
+				}
+			})
+			
+		});
+	},
+  	onShareAppMessage(res) {
+		return {
+			title: this.pageTitle,
+			desc: "",
+			imageUrl: "",
+			path: "admin/book/detail?id="+this.option.id,
+		}
+	},
+	methods: {
+		init(){
+
+		},
+		goBack(){
+			// #ifdef MP-WEIXIN
+			uni.navigateBack()
+			// #endif
+			// #ifdef APP-PLUS
+			uni.navigateBack()
+			// #endif
+		},
+		goTo(item){
+			this.$util.pageTo({ url: item.page})
+		},
+		playVide(index){
+			this.videoContext = uni.createVideoContext('myVideo'+index,this)
+			this.videoContext.play()
+		},
+		previewImage(url) {
+			uni.previewImage({
+				urls: [url],
+				current: url
+			});
+		}
+	},
+};
+</script>
+<style lang="scss" scoped>
+.app-content {
+	min-height: 100vh;
+	background: #fff;
+	padding-bottom: 140upx;
+
+	.content-wrapper {
+		padding: 0 30upx;
+		
+		// 主标题
+		.page-title {
+			font-size: 44upx;
+			font-weight: bold;
+			color: #333;
+			padding: 40upx 0 20upx;
+			position: relative;
+			
+			&::after {
+				content: '';
+				display: block;
+				width: 60upx;
+				height: 6upx;
+				background: #3498db;
+				margin-top: 16upx;
+			}
+		}
+
+		// 文本内容
+		.text-content {
+			font-size: 32upx;
+			color: #666;
+			line-height: 1.8;
+			margin: 20upx 0 30upx;
+			text-align: justify;
+		}
+		.blank-line-content{
+			height: 20upx;
+			background: white;
+		}
+		// 小标题
+		.section-title {
+			font-size: 36upx;
+			font-weight: bold;
+			color: #333;
+			margin: 40upx 0 20upx;
+		}
+
+		.mini-title {
+			font-size: 32upx;
+			font-weight: bold;
+			color: #333;
+			margin: 20upx 0 30upx;
+		}
+
+		// 视频区块
+		.video-block {
+			margin: 20upx 0;
+			background: #000;
+			
+			.video-content {
+				width: 700upx;
+				height: 1100upx;
+				margin: 0 auto;
+				display: block;
+			}
+		}
+
+		// 图片区块
+		.image-block {
+			margin: 20upx 0;
+			
+			.image-content {
+				width: 100%;
+				display: block;
+				transition: opacity 0.3s;
+
+				&:active {
+					opacity: 0.8;
+				}
+			}
+		}
+
+		// 按钮区块
+		.button-block {
+			margin: 30upx 0;
+			text-align: center;
+
+			.link-button {
+				display: inline-block;
+				background: #3498db;
+				color: #fff;
+				font-size: 32upx;
+				padding: 20upx 40upx;
+				border-radius: 4upx;
+				border: none;
+				transition: background-color 0.3s;
+
+				&:active {
+					background: #2980b9;
+				}
+			}
+		}
+
+		// 返回按钮区块
+		.back-block {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			padding: 30upx;
+			background: rgba(255,255,255,0.98);
+			text-align: center;
+			border-top: 1upx solid #eee;
+			z-index: 99;
+		}
+	}
+}
+</style>

ghsApp/src/admin/home/me.vue

@@ -369,7 +369,7 @@ export default {
       this.$util.pageTo({ url: '/admin/shop/renew'})
     },
     getHdVideo(){
-      this.$msg('即将上线')
+      this.$util.pageTo({ url: '/admin/book/ls' })
     },
     getCityVideo(){
 			const that = this;

ghsApp/src/admin/item/list2.vue

@@ -1,5 +1,27 @@
 <template>
   <view class="app-content" style="background:white;">
+		<view class="modern-tabs-container">
+			<view class="modern-tabs">
+				<view class="modern-tab" :class="{ 'active': globalLookStock === 0 }" @click="changeHasStock(0)">
+					<view class="tab-content">
+						<text class="tab-icon">📋</text>
+						<text class="tab-text">全部</text>
+					</view>
+				</view>
+				<view class="modern-tab" :class="{ 'active': globalLookStock === 1 }" @click="changeHasStock(1)">
+					<view class="tab-content">
+						<text class="tab-icon">✅</text>
+						<text class="tab-text">有库存</text>
+					</view>
+				</view>
+				<view class="modern-tab" :class="{ 'active': globalLookStock === 2 }" @click="changeHasStock(2)">
+					<view class="tab-content">
+						<text class="tab-icon">❌</text>
+						<text class="tab-text">没库存</text>
+					</view>
+				</view>
+			</view>
+		</view>
 		<view class="billing_box_bg">
 			<view class="input-wrap">
 				<view style="padding:0upx 0upx 0upx 0upx;margin-right:8upx;" >
@@ -8,15 +30,12 @@
 				<view class="search-bar">
 					<app-search-module v-model="globalPy" ref="globalSearchRef" placeholder="这里搜索" @input="globalSearch"/>
 				</view>
-				<view style="padding:0 0upx 0 8upx;" >
-					<button class="admin-button-com middle blue" @click.stop="openOption">{{globalLookStock==0 ? '库存筛选' : globalLookStock==1 ? '有库存' : '没库存' }}</button>
-				</view>
 				<view style="padding:0 0upx 0 8upx;" >
 					<button class="admin-button-com middle blue" @click="pageTo({ url: '/admin/ptItem/itemList' })">添花材</button>
 				</view>
 			</view>
 
-			<button class="admin-button-com middle blue" @click="refreshItem()" style="position: absolute;top:120upx;right:24upx;z-index:99;">刷 新</button>
+			<button class="admin-button-com middle blue" @click="refreshItem()" style="position: absolute;top:245upx;right:24upx;z-index:99;">刷 新</button>
 
 			<view class="scroll-middle_bx">
 				<scroll-view scroll-y scroll-with-animation class="tab-view">
@@ -89,20 +108,6 @@
 			</view>
 		</uni-popup>
 
-		<uni-popup ref="searchOptionRef" background-color="#fff" type="center" :animation="false" class="class-popup-style">
-			<view style="display:flex;padding:80upx;height:auto;justify-content: space-between;align-items:center;flex-wrap:wrap;max-height:100vh;overflow:auto;">
-				<view @tap.stop="changeHasStock(2)" style="margin-bottom:20upx;">
-					<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">没库存</view>
-				</view>
-				<view @tap.stop="changeHasStock(1)" style="margin-bottom:20upx;">
-					<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">有库存</view>
-				</view>
-				<view @tap.stop="changeHasStock(0)" style="margin-bottom:20upx;">
-					<view style="margin-top:5upx;overflow: hidden;white-space: nowrap;width:150upx;text-align:center;font-size:38upx;">重新选</view>
-				</view>
-			</view>
-		</uni-popup>
-
 		<uni-popup ref="rightShowMore" background-color="#fff" type="center" :animation="true" class="class-popup-style">
 			<view class="action-popup-container">
 				<view class="action-button-item">
@@ -359,7 +364,6 @@ export default {
 		},
 		changeHasStock(check){
 			this.globalLookStock = check
-			this.$refs.searchOptionRef.close()
 			this.reGetGlobalProductList()
 		},
 		openOption(){
@@ -646,7 +650,7 @@ export default {
 	flex-direction: column;
 	.input-wrap {
 		display: flex;
-		padding: 22upx 20upx 22upx 13upx;
+		padding: 5upx 20upx 22upx 13upx;
 		.search-bar {
 			flex: 1;
 		}
@@ -728,6 +732,93 @@ export default {
 	margin: 0 auto;
 }
 
+.modern-tabs-container {
+  padding: 0;
+  background-color: #f8f9fa;
+  width: 100%;
+}
+
+.modern-tabs {
+  display: flex;
+  background-color: #ffffff;
+  padding: 6upx;
+  box-shadow: 0 2upx 12upx rgba(0, 0, 0, 0.06);
+  border: 2upx solid #f0f2f5;
+  position: relative;
+  z-index: 5;
+  width: 100%;
+}
+
+.modern-tab {
+  flex: 1;
+  text-align: center;
+  padding: 16upx 0;
+  position: relative;
+  transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
+  border-radius: 12upx;
+  margin: 0 2upx;
+  background-color: #fafafa; /* 未选中态背景 */
+  border: 2upx solid #f2f4f7; /* 未选中态边框 */
+  box-shadow: none;
+  
+  .tab-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+  
+  .tab-icon {
+    font-size: 32upx;
+    margin-bottom: 4upx;
+    display: block;
+    opacity: 0.85; /* 未选中态图标降低对比 */
+  }
+  
+  &.active .tab-icon {
+    filter: brightness(1.15);
+    opacity: 1;
+  }
+  
+  .tab-text {
+    font-size: 26upx;
+    color: #666;
+    font-weight: 600;
+  }
+  
+  &.active {
+    background: linear-gradient(135deg, #34d399 0%, #09C567 100%); /* 渐变背景 */
+    box-shadow: 0 4upx 12upx rgba(16, 185, 129, 0.25); /* 柔和外发光 */
+    transform: none;
+    border-color: rgba(16, 185, 129, 0.25);
+    
+    .tab-text {
+      color: #ffffff;
+      font-weight: 700;
+      font-size: 28upx;
+    }
+    
+    /* 选中态白色半透明底部指示条 */
+    &::after {
+      content: "";
+      position: absolute;
+      left: 50%;
+      bottom: 6upx;
+      transform: translateX(-50%);
+      width: 40%;
+      height: 6upx;
+      border-radius: 6upx;
+      background: rgba(255, 255, 255, 0.9);
+    }
+  }
+  
+  /* H5 未选中态悬停效果（其它端不影响） */
+  &:not(.active):hover {
+    background-color: #f6f7f9;
+    border-color: #e9ecef;
+  }
+}
+
 .action-button-item {
 	&.cancel {
 		grid-column: 1 / -1;

ghsApp/src/api/book/index.js

@@ -90,10 +90,18 @@ export const getBookList = data => {
 	return https.get('/book/list', data)
 }
 
+export const getLsList = data => {
+	return https.get('/book/ls-list', data)
+}
+
 export const getBookDetail = data => {
 	return https.get('/book/detail', data)
 }
 
+export const getLsBookDetail = data => {
+	return https.get('/book/ls-detail', data)
+}
+
 export const closeBook = data => {
 	return https.get('/book/close-book', data)
 }

ghsApp/src/pages.json

@@ -499,8 +499,10 @@
 			"root": "admin/book",
 			"pages": [
 				{"path": "index","style": {"navigationBarTitleText": "城市批发教程"}},
+				{"path": "ls","style": {"navigationBarTitleText": "零售店教程"}},
 				{"path": "jdIndex","style": {"navigationBarTitleText": "斗南批发教程"}},
 				{"path": "detail","style": {"navigationBarTitleText": ""}},
+				{"path": "lsDetail","style": {"navigationBarTitleText": ""}},
 				{"path": "itemCustom","style": {"navigationBarTitleText": "明细","enablePullDownRefresh": true}},
 				{"path": "itemCustomDetail","style": {"navigationBarTitleText": "供货信息"}},
 				{"path": "custom","style": {"navigationBarTitleText": "预订客户","enablePullDownRefresh": true}},