up

App.vue

@@ -2,7 +2,20 @@
 	export default {
 		onLaunch: function() {
 			this.$nextTick(() => {
-
+				// uni.login({
+				// 	provider: 'weixin',
+				// 	success: (res) => {
+				// 		console.log(res.code);
+				// 		this.$u.api.login({
+				// 			code: res.code
+				// 		}).then(res => {
+				// 			this.$u.vuex('vuex_token', res.token)
+				// 			this.$u.api.user().then(res=>{
+				// 				this.$u.vuex('vuex_user', res)
+				// 			})
+				// 		})
+				// 	}
+				// });
 			})
 
 		},

common/http.api.js

@@ -1,17 +1,18 @@
 //api集合
 let apiApp = {
+	getAppId: '/api/mobile/user/wechat-login-url',
 	login: '/api/mobile/user/wechat-login',
 	user: '/api/mobile/user/show',
 	saveUser: '/api/mobile/user/save',
-	getAppId: '/api/mobile/user/wechat-login-url',
-	getQuestions: '/api/mobile/quiz/get-questions',
-	getPoints: '/api/mobile/map-point/point-list',
+	getPhone: '/api/mobile/user/bind-mobile-by-wechat',
+	getParty: '/api/mobile/quiz/get-departments',
 	baseFormIndex: '/api/mobile/base-form/index',
 	baseFormShow: '/api/mobile/base-form/show',
-	baseFormSave: '/api/mobile/base-form/save',
-	baseFormDestroy: '/api/mobile/base-form/destroy',
-	saveQuiz: '/api/mobile/map-point/save-quiz',
-	pointDetail: '/api/mobile/map-point/point-detail',
+	getAudios: '/api/mobile/audio/get-audios',
+	showAudios: '/api/mobile/audio/get-audio',
+	enterAudios: '/api/mobile/audio/play-audio',
+	getMyAudios: '/api/mobile/audio-my/audio-plays',
+
 	share: '/api/mobile/user/wechat-share',
 	savePoster: '/api/mobile/vr/save-poster',
 	getPoster: '/api/mobile/vr/get-poster',
@@ -21,23 +22,42 @@ let apiApp = {
 const install = (Vue, vm) => {
 
 	//api方法
+	let getAppId = (params = {}) => vm.$u.get(apiApp.getAppId, params);
 	let login = (params = {}) => vm.$u.get(apiApp.login, params);
 	let user = (params = {}) => vm.$u.get(apiApp.user, params);
-	let getAppId = (params = {}) => vm.$u.get(apiApp.getAppId, params);
-    let getQuestions = (params = {}) => vm.$u.get(apiApp.getQuestions, params);
-	let getPoints = (params = {}) => vm.$u.get(apiApp.getPoints, params)
+	let saveUser = (params = {}) => vm.$u.post(apiApp.saveUser, params);
+	let getPhone = (params = {}) => vm.$u.get(apiApp.getPhone, params);
+	let getParty = (params = {}) => vm.$u.get(apiApp.getParty, params);
+
 	let baseFormIndex = (params = {}) => vm.$u.get(apiApp.baseFormIndex, params);
 	let baseFormShow = (params = {}) => vm.$u.get(apiApp.baseFormShow, params);
-	let baseFormSave = (data = {}) => vm.$u.post(apiApp.baseFormSave, data);
-	let baseFormDestroy = (params = {}) => vm.$u.post(apiApp.baseFormDestroy, params);
-	let saveQuiz = (params = {}) => vm.$u.post(apiApp.saveQuiz, params);
-	let pointDetail = (params = {}) => vm.$u.get(apiApp.pointDetail, params);
+	let getAudios = (params = {}) => vm.$u.get(apiApp.getAudios, params);
+	let enterAudios = (id, params) => vm.$u.post(apiApp.enterAudios + '/' + id, params);
+	let showAudios = (id, params) => vm.$u.get(apiApp.showAudios + '/' + id, params);
+
+	let getMyAudios = (params = {}) => vm.$u.get(apiApp.getMyAudios, params);
+
 	let share = (params = {}) => vm.$u.get(apiApp.share, params);
 	let savePoster = (params = {}) => vm.$u.get(apiApp.savePoster, params);
 	let getPoster = (params = {}) => vm.$u.get(apiApp.getPoster, params)
-	let saveUser = (params = {}) => vm.$u.post(apiApp.saveUser, params);
 	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
-	vm.$u.api = { login, getAppId, getQuestions, baseFormIndex, baseFormShow, baseFormSave, baseFormDestroy, getPoints, saveQuiz, pointDetail, share, savePoster, user, saveUser, getPoster };
+	vm.$u.api = {
+		login,
+		getAppId,
+		getPhone,
+		getParty,
+		baseFormIndex,
+		baseFormShow,
+		getAudios,
+		showAudios,
+		enterAudios,
+		getMyAudios,
+		share,
+		savePoster,
+		user,
+		saveUser,
+		getPoster
+	};
 }
 
 export default {

common/http.interceptor.js

@@ -67,6 +67,29 @@ const install = (Vue, vm) => {
 	}
 }
 
+// const customParamsSerializer = (params)=>{
+// 	console.log("params",params)
+//   let result = "";
+//   for (let key in params) {
+//     if (params.hasOwnProperty(key)) {
+//       if (Array.isArray(params[key])) {
+//         if (typeof params[key] === "object") {
+//           params[key].forEach((item, index) => {
+//             if (typeof item === "object") {
+// 				key[index]['key'] = item.key
+// 				key[index]['op'] = item.op
+// 				key[index]['value'] = item.value
+//               // result += `${key}[${index}][key]=${item.key}&${key}[${index}][op]=${item.op}&${key}[${index}][value]=${item.value}&`;
+//             }
+//           });
+//         }
+//       }
+//     }
+//   }
+//   console.log("result",result)
+//   return result.slice(0, -1);
+// }
+
 export default {
 	install
 }

common/util.js

@@ -2,35 +2,74 @@
 * 公共方法
 *
 */
+import moment from 'moment';
 
 const base64ToFile = (dataurl, filename = 'file') => {
-
   let arr = dataurl.split(',')
-
   let mime = arr[0].match(/:(.*?);/)[1]
-
   let suffix = mime.split('/')[1]
-
   let bstr = atob(arr[1])
-
   let n = bstr.length
-
   let u8arr = new Uint8Array(n)
-
   while (n--) {
-
     u8arr[n] = bstr.charCodeAt(n)
-
   }
-
   return new File([u8arr], `${filename}.${suffix}`, {
-
     type: mime
+  })
 
+}
+const toast = (msg,time,callback) => {
+	uni.showToast({
+		icon: "none",
+		title: msg,
+		duration: time||1500,
+		success:function(res){
+			if(callback && typeof(callback)=='function'){
+				console.log(callback)
+				callback()
+			}
+		}
 	})
+}
+// 转换日期为日月
+const formatDateToMonthDay = (dateString) => {
+  const month = moment(dateString).format('MM')
+  const day = moment(dateString).format('DD')
+  return `${month}月${day}日`;
+}
+// 比较当前时间是否在活动期间 在true 不在false
+const isCurrentTimeBetween = (startTime, endTime) => {
+  let that = this
+  const now = moment().valueOf()
+  const start = moment(startTime).valueOf();
+  const end = moment(endTime).valueOf();
+  return now < start || now > end;
+}
+// 验证是否填写的是中文
+const isOnlyChinese = (str)=>{
+  const chineseRegex = /^[\u4e00-\u9fa5]+$/;
+  return chineseRegex.test(str);
+}
 
+// 验证是否为空
+const isNull = (p)=>{
+	return p == '' || p == undefined || p == null || p == 'undefined' || p == 'null';
 }
 
+// 验证手机号
+const isMobile = (phoneNumber) => {
+  const regex = /^1[3-9]\d{9}$/;
+  return regex.test(phoneNumber);
+}
+
+
 export {
-  base64ToFile
+  base64ToFile,
+  toast,
+  formatDateToMonthDay,
+  isCurrentTimeBetween,
+  isOnlyChinese,
+  isNull,
+  isMobile
 }

components/tabbar/tabbar.vue

@@ -0,0 +1,130 @@
+<template>
+	<view class="tabbar-container">
+		<block>
+			<view class="tabbar-item" v-for="(item, index) in tabbarList"
+				 @click="changeItem(item)">
+				<view class="item-top">
+					<image :style="{width:item.width+'rpx',height:item.height+'rpx'}"
+						:src="currentItem == item.id ? item.selectedIconPath : item.iconPath"></image>
+				</view>
+				<view class="item-bottom" :class="[currentItem == item.id ? 'item-active' : '']">
+					<text>{{ item.text }}</text>
+				</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			currentPage: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				currentItem: 0,
+				tabbarList: [{
+						id: 0,
+						centerItem: false,
+						width: 73,
+						height: 70,
+						"text": "首页",
+						"pagePath": "/pages/index/index",
+						"iconPath": require("@/static/index-home.png"),
+						"selectedIconPath": require("@/static/index-home-cur.png")
+					},
+					{
+						id: 1,
+						centerItem: false,
+						width: 59,
+						height: 69,
+						"text": "我的",
+						"pagePath": "/pages/me/me",
+						"iconPath": require("@/static/index-me.png"),
+						"selectedIconPath": require("@/static/index-me-cur.png")
+					}
+				]
+			};
+		},
+		mounted() {
+			this.currentItem = this.currentPage;
+			uni.hideTabBar();
+		},
+		methods: {
+			changeItem(item) {
+				let _this = this;
+				console.log(item.pagePath)
+				//_this.currentItem = item.id;
+				
+				uni.switchTab({
+					url: item.pagePath
+				});
+			}
+		}
+	};
+</script>
+<style scoped>
+	view {
+		padding: 0;
+		margin: 0;
+		box-sizing: border-box;
+	}
+
+	.tabbar-container {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 160rpx;
+		box-shadow: 0 0 10px #999;
+		display: flex;
+		align-items: center;
+		padding: 10rpx 0;
+		color: #6E6E6E;
+		z-index: 9999;
+		background: #fff;
+		background: #fff;
+	}
+
+	.tabbar-container .tabbar-item {
+		width: 50%;
+		/* height: 100rpx; */
+		display: flex;
+		flex-direction: column;
+		/* justify-content: center; */
+		align-items: center;
+		text-align: center;
+	}
+
+	.tabbar-container .item-active {
+		color: #e83f46;
+	}
+
+	.tabbar-container .center-item {
+		display: block;
+		position: relative;
+	}
+
+	.tabbar-container .tabbar-item .item-top {
+		/* width: 56rpx;
+		height: 44rpx; */
+		margin: 10rpx 0;
+	}
+
+	.tabbar-container .tabbar-item .item-top image {
+		vertical-align: middle;
+	}
+
+	.tabbar-container .tabbar-item .item-bottom {
+		font-size: 28rpx;
+		width: 100%;
+	}
+
+	.tabbar-container .center-item .item-bottom {
+		position: absolute;
+		bottom: 5rpx;
+	}
+</style>

manifest.json

@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wxbf4862e929ab85b0",
+        "appid" : "wxc7c1f375858bbdda",
         "setting" : {
             "urlCheck" : false
         },

package.json

@@ -16,5 +16,7 @@
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "dependencies": {}
+  "dependencies": {
+    "moment": "^2.30.1"
+  }
 }

packages/h5/h5.vue

@@ -0,0 +1,20 @@
+<template>
+	<web-view v-if="url" :src="url"></web-view>
+</template>
+
+<script>
+	export default {
+	  data() {
+	    return {
+	      url: '' // 指定要打开的H5页面的URL
+	    }
+	  },
+	  onLoad(option) {
+	  	this.url = option.url?option.url:''
+		console.log(this.url)
+	  }
+	}
+</script>
+
+<style>
+</style>

packages/record/record.vue

@@ -0,0 +1,253 @@
+<!-- 自定义下拉刷新与上拉加载演示(vue) -->
+<template>
+	<view class="wrap">
+		<!-- 视频播放 -->
+		<view class="playvideo" v-if="playvideo">
+			<view class="playvideowrap">
+				<video ref="videos-wrap" id="videos-wrap" :autoplay="true" @play="playFullScreen" :src="videoUrl"
+					play-btn-position="center"></video>
+				<view class="closevideo" @click="playvideo=false,videoUrl=''">X</view>
+			</view>
+			<!-- <u-icon name="photo" color="#fff" size="30"></u-icon> -->
+		</view>
+		
+		<z-paging ref="paging" v-model="dataList" @query="queryList">
+			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
+			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
+			<template #top>
+				<view class="navBarBox" :style="{height:navBarBoxHeight+'px'}">
+					<!-- 状态栏占位 -->
+					<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
+					<!-- 真正的导航栏内容 -->
+					<view class="navBar" :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
+						<view class="back" @click="goback">
+							<u-icon name="arrow-left"></u-icon>
+						</view>
+						<view>{{menutitle}}</view>
+					</view>
+				</view>
+				<!-- <z-tabs :list="tabList" @change="tabChange" /> -->
+			</template>
+			
+			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
+			<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
+				<view class="item-wrap">
+					<view v-if="item.audio.poster" class="item-posters">
+						<image class="item-poster" :src="item.audio.poster"></image>
+						<view class="item-poster-mask">
+							<u-icon size="36" color="#e50015" name="play-right"></u-icon>	
+						</view>
+					</view>
+					<view class="item-title">
+						{{item.audio.title}}
+						<span v-if="item.source">（{{item.audio.source}}）</span>
+					</view>
+				</view>
+				
+				<view class="item-time">
+					学习时间：{{item.created_at}}
+				</view>
+				<view class="item-line"></view>
+			</view>
+		</z-paging>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
+				dataList: [],
+				list:[],
+				navBarBoxHeight: 0,
+				navBarHeight:0,
+				navBarTop:0,
+				menutitle: '学习记录',
+				playvideo:false,
+				videoUrl:'',
+				
+			}
+		},
+		onLoad() {
+			const MenuButton = uni.getMenuButtonBoundingClientRect()
+			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
+			this.navBarHeight = MenuButton.height
+			this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
+		},
+		methods: {
+			goback(){
+				uni.switchTab({
+					url:'/pages/me/me'
+				})
+			},
+			playFullScreen(){
+				let videoContext = uni.createVideoContext('videos-wrap', this)
+				console.log("videoContext",videoContext)
+				videoContext.requestFullScreen()
+			},
+			queryList(pageNo, pageSize) {
+				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
+				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
+				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
+				const params = {
+					page: pageNo,
+					page_size: pageSize
+				}
+				this.$u.api.getMyAudios(params).then(res => {
+					this.$refs.paging.complete(res.data);
+					this.firstLoaded = true;
+				})
+			},
+			itemClick(item) {
+				console.log(item.audio.audio_file)
+				if (item.audio.audio_file) {
+					this.videoUrl = item.audio.audio_file
+					this.playvideo = true
+				} else {
+					uni.navigateTo({
+						url: '/pages/detail/detail?id=' + item.audio.id
+					})
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.wrap {
+		.navBarBox {
+			// position: fixed;
+			// top: 0;
+			// left: 0;
+			// z-index: 999;
+			width: 100%;
+	
+			padding: 0 20rpx;
+			background: linear-gradient(to right, #da212d, #f96666);
+			// margin-bottom:24rpx;
+			.navBar {
+				color: #fff;
+				font-size: 32rpx;
+				text-align: center;
+	
+				.back {
+					position: absolute;
+					left: 20rpx;
+	
+				}
+			}
+		}
+		
+		.swiper {
+			height: 100%;
+	
+		}
+		::v-deep .zp-paging-container-content{
+			padding-bottom:20rpx;
+		}
+		.loadmore{
+			font-size: 15px;
+			margin: 0px 3px;
+			color:rgb(164, 164, 164);
+			text-align: center;
+			height:80rpx;
+			line-height: 80rpx;
+		}
+	}
+	
+	.item {
+		position: relative;
+		/* height: 150rpx; */
+		margin: 0rpx 30rpx;
+		
+	
+	}
+	.item-wrap{
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		padding: 30rpx 5rpx;
+		padding-bottom:10rpx;
+		font-size: 0;
+	}
+	.item-time{
+		color:#999;
+		font-size: 28rpx;
+		padding:0 5rpx;
+		padding-bottom:10rpx;
+	}
+	.item-title {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-size: 28rpx;
+		line-height: 1.8;
+	}
+	
+	.item-line {
+		position: absolute;
+		bottom: 0rpx;
+		left: 0rpx;
+		height: 1px;
+		width: 100%;
+		background-color: #eeeeee;
+	}
+	.item-posters{
+		position: relative;
+	}
+	.item-poster {
+		width: 196rpx;
+		height: 129rpx;
+		margin-right: 24rpx;
+		position: relative;
+	}
+	.item-poster-mask{
+		position: absolute;
+		top:0;
+		left:0;
+		width: 196rpx;
+		height: 129rpx;
+		background-color: rgba(0,0,0,0.5);
+		text-align: center;
+		line-height: 129rpx;
+	}
+	.playvideo {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 11;
+		background-color: rgba(0, 0, 0, 0.6);
+	
+		&>.playvideowrap {
+			width: 95%;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+	
+			video {
+				width: 100%
+			}
+	
+			.closevideo {
+				color: #fff;
+				width: 50rpx;
+				height: 50rpx;
+				border: 1px solid #fff;
+				border-radius: 50rpx;
+				position: absolute;
+				text-align: center;
+				line-height: 50rpx;
+				/* display: inline-block; */
+				right: 0rpx;
+				top: -25rpx // transform: translate(0,-50%);
+			}
+		}
+	
+	}
+</style>

pages.json

@@ -19,18 +19,26 @@
 				"navigationStyle": "custom"
 			}
 		},{
-			"path": "pages/record/record",
+			"path": "pages/me/me",
 			"style": {
 				"navigationStyle": "custom"
 			}
-		},{
-			"path": "pages/me/me",
+		}
+	],
+	"subPackages":[{
+		"root": "packages",
+		"pages":[{
+			"path": "record/record",
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},{
+			"path": "h5/h5",
+			"style": {
+				"navigationStyle": "custom"
 			}
-	],
-	"subPackages": [],
+		}]
+	}],
 	"preloadRule": {},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -47,14 +55,14 @@
 		"list": [{
 				"text": "首页",
 				"pagePath": "pages/index/index",
-				"iconPath": "static/index-home.png",
-				"selectedIconPath": "static/index-home-cur.png"
+				"iconPath": "/static/index-home.png",
+				"selectedIconPath": "/static/index-home-cur.png"
 			},
 			{
 				"text": "我的",
 				"pagePath": "pages/me/me",
-				"iconPath": "static/index-me.png",
-				"selectedIconPath": "static/index-me-cur.png"
+				"iconPath": "/static/index-me.png",
+				"selectedIconPath": "/static/index-me-cur.png"
 			}
 		]
 	}

pages/detail/detail.vue

@@ -1,69 +1,24 @@
 <template>
 	<view class="content">
-		<view class="navBarBox" :style="{height:navBarBoxHeight+'rpx'}">
+		<view class="navBarBox" :style="{height:navBarBoxHeight+'px'}">
 			<!-- 状态栏占位 -->
-			<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
+			<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
 			<!-- 真正的导航栏内容 -->
-			<view class="navBar">
+			<view class="navBar" :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
 				<view class="back" @click="goback">
 					<u-icon name="arrow-left"></u-icon>
 				</view>
 				<view>{{menutitle}}</view>
 			</view>
 		</view>
-		<view class='contop' :style="{'margin-top':(navBarBoxHeight+30)+'rpx'}">
-			<view class='title'>{{info.name?info.name:''}}</view>
-			<view class='time'><span>时间：{{info.release_time?cancelTime(info.release_time):''}}</span><span>来源：{{info.source?info.source:''}}</span></view>
-			<view class='head'>
-				<!-- <img :src="info.head_upload.url" alt=""> -->
-				<view class='head_unit'>
-					<view v-if="organizer_list.length>0">
-						<view>主办单位：</view>
-						<view>
-							<view v-for="o in organizer_list">
-								{{o}}
-							</view>
-						</view>
-					</view>
-					<view v-if="guidance_unit_list.length>0">
-						<view>指导单位：</view>
-						<view>
-							<view v-for="g in guidance_unit_list">
-								{{g}}
-							</view>
-						</view>
-					</view>
-					<view v-if="sponsor_list.length>0">
-						<view>承办单位：</view>
-						<view>
-							<view v-for="s in sponsor_list">
-								{{s}}
-							</view>
-						</view>
-					</view>
-					<view v-if="bear_unit_list.length>0">
-						<view>协办单位：</view>
-						<view>
-							<view v-for="b in bear_unit_list">
-								{{b}}
-							</view>
-						</view>
-					</view>
-					<view v-if='info.dateRange'>
-						<view>展出时间：</view>
-						<view>
-							<view>
-								{{info.dateRange}}
-							</view>
-						</view>
-					</view>
-				</view>
-			</view>
+		<view class='contop' :style="{'margin-top':(navBarBoxHeight)+'px'}">
+			<view class='title'>{{info.title?info.title:''}}</view>
+			<view v-if="info.source" class='time'><span>来源：{{info.source?info.source:''}}</span></view>
+			
 		</view>
 	
-		<view class='bg40'></view>
 		<view class='detail'>
-			 <u-parse v-if='showContent' :content="info.content?info.content:' '"/>
+			 <u-parse v-if='showContent' :content="info.text?info.text:' '"/>
 		</view>
 	</view>
 </template>
@@ -77,49 +32,38 @@
 		data() {
 			return {
 				navBarBoxHeight: 0,
-				statusBarHeight: 40,
-				menutitle: '课件绘编',
+				navBarHeight:0,
+				navBarTop:0,
+				menutitle: '',
 				info: {},
 				id: '',
-				showContent:false,
-				organizer_list:[],
-				guidance_unit_list: [],
-				sponsor_list: [],
-				bear_unit_list: []
+				showContent:false
 			}
 		},
 		onLoad(options) {
-			// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
-			this.navBarBoxHeight = 80 + this.statusBarHeight * 2
+			const MenuButton = uni.getMenuButtonBoundingClientRect()
+			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
+			this.navBarHeight = MenuButton.height
+			this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
+			console.log(options)
 			this.id = options.id ? options.id : ''
-			// this.loadDetail()
+			this.menutitle =  options.menuTitle?options.menuTitle:'冬训云课堂'
+			this.loadDetail(this.id)
+			this.enterAudios(this.id)
 		},
 		methods: {
-			cancelTime(val){
-				return val.substring(0,10)
-			},
-			loadDetail() {
-				var that = this;
-				this.util.request({
-					api: '/api/mobile/exhibit-hall/show',
-					data: {
-						id: that.id
+			goback(){
+				 uni.navigateBack({
+				    delta: 1 // 返回的页面数，这里设置为1表示返回上一页
+				 });
 			},
-					utilSuccess: function(res) {
-						res.dateRange = that.util.splitTime(res.start_time,res.over_time)
-						that.info = res
-						const host = that.util.HOST
-						that.info.content = that.util.replaceImgUrl(that.info.content,'../storage/files',`${host}/storage/files`)
-						that.organizer_list = res.organizer?res.organizer.split('、'):[]
-						that.guidance_unit_list = res.guidance_unit?res.guidance_unit.split('、'):[]
-						that.sponsor_list = res.sponsor?res.sponsor.split('、'):[]
-						that.bear_unit_list = res.bear_unit?res.bear_unit.split('、'):[],
-						that.showContent = true
+			async enterAudios(id){
+				await this.$u.api.enterAudios(id,{})
 			},
-					utilFail: function(res) {
-
-					}
-				})
+			async loadDetail(id) {
+				const res = await this.$u.api.showAudios(id,{})
+				this.info = res
+				this.showContent = true
 			}
 		}
 	}
@@ -216,7 +160,7 @@
 	.detail {
 		padding:0 60rpx;
 		background: #fff;
-		padding-top: 30rpx;
+		/* padding-top: 30rpx; */
 		border-radius: 30rpx 30rpx 0 0;
 		padding-bottom:180rpx;
 		font-size: 28rpx;

pages/index/index.vue

@@ -1,21 +1,27 @@
 <template>
 	<view class="wrap">
-		<view class="navBarBox" :class="{'hasbg':isScroll}" :style="{height:navBarBoxHeight+'rpx'}">
+		<view class="navBarBox" :class="{'hasbg':isScroll}" :style="{height:navBarBoxHeight+'px'}">
 			<!-- 状态栏占位 -->
-			<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
+			<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
 			<!-- 真正的导航栏内容 -->
-			<view class="navBar">
-				<view>冬训云课堂</view>
+			<view class="navBar"  :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
+				<view>斜塘街道基层党员冬训</view>
 			</view>
 		</view>
 
 		<view class="content">
-			<view class="topbg"></view>
-			<view class="banner" :style="{'margin-top':bannerTop+'rpx'}"></view>
+			<view class="topbg">
+				<image class="topbg" :src="require('@/static/index-top.png')"></image>
+			</view>
+			<view :style="{'margin-top':bannerTop+'rpx'}">
+				<image class="banner" src="https://vr.langye.net/images/index-banner.png"></image>
+			</view>
 
 			<view class="content-content">
 				<view class="icons">
-					<image v-for="item in iconList" :src="item.src" @click="toMenu(item.id)"></image>
+					<block v-for="(item,index) in iconList">
+						<image v-if="index<3" :src="item.src" @click="toMenu(item.id)"></image>
+					</block>
 				</view>
 				<view class="icons icons-out">
 					<image v-for="item in iconOutList" :src="item.src" @click="toMenuOut(item.url)"></image>
@@ -24,83 +30,173 @@
 			<image class="menus-title" :src="require('@/static/index-title.png')"></image>
 			<view class="menus-list">
 				<view class="menus-list-item" v-for="item in menuList" @click="toDetail(item.id)">
-					<image class="menus-list-img" :src="item.src"></image>
+					<image class="menus-list-img" :src="item.poster?item.poster:replaceImg"></image>
 					<view class="menus-list-title">{{item.title}}</view>
 				</view>
 			</view>
+			<view v-if="hasNomore" class="hasNomore">————没有更多了————</view>
 
 
 		</view>
-
+		<tabbar :current-page="0"></tabbar>
 	</view>
 </template>
 <script>
+	import tabbar from "../../components/tabbar/tabbar.vue" 
+	import{isNull} from '@/common/util.js'
 	export default {
+		components:{
+			tabbar
+		},
 		data() {
 			return {
 				navBarBoxHeight: 0,
-				statusBarHeight: 40,
+				navBarTop: 0,
 				bannerTop: 0,
+				navBarHeight:0,
 				isScroll: false,
+				
 				iconList: [{
-					id: 1,
-					src: require("../../static/index-icon1.png")
+					id: 6,
+					src: require("@/static/index-icon1.png"),
+					title: '课件汇编'
+				}, {
+					id: 12,
+					src: require("@/static/index-icon2.png"),
+					title: '理“响”微讲“塘”'
 				}, {
-					id: 1,
-					src: require("../../static/index-icon2.png")
+					id: 13,
+					src: require("@/static/index-icon3.png"),
+					title: '学习动态'
 				}, {
-					id: 1,
-					src: require("../../static/index-icon3.png")
+					id: 11,
+					src: '',
+					title: '学习新思想'
 				}],
 				iconOutList: [{
-					url: 1,
-					src: require("../../static/index-icon4.png")
+					url: "https://vr.langye.net/h5xtdk/",
+					src: require("@/static/index-icon4.png"),
+					title: "党员冬训walk行"
 				}, {
-					url: 1,
-					src: require("../../static/index-icon5.png")
+					url: "https://vr.langye.net/h5xtdt/",
+					src: require("@/static/index-icon5.png"),
+					title: '百步芳草 与理同行'
 				}],
-				menuList: [{
-						id: 1,
-						src: require("../../static/index-img.png"),
-						title: "习近平经济思想"
-					}, {
-						id: 1,
-						src: require("../../static/index-img.png"),
-						title: "习近平总书记关于党的建设的重要思想"
-					},
-					{
-						id: 1,
-						src: require("../../static/index-img.png"),
-						title: "习近平生态文明思想"
-					}
-				]
+				replaceImg:require("@/static/index-img.png"),
+				menuList:[],
+				currentPage:1,
+				hasNomore:false
 
 			}
 		},
 		onLoad() {
-			// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
-			this.navBarBoxHeight = 80 + this.statusBarHeight * 2
-			this.bannerTop = this.navBarBoxHeight - 360
-			console.log(this.statusBarHeight)
+			
+			const MenuButton = uni.getMenuButtonBoundingClientRect()
+			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
+			this.navBarHeight = MenuButton.height
+			this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
+			this.bannerTop = this.navBarBoxHeight*2 - 360
+			// this.getMenu()
+			this.getToken()
+			
+			
 		},
 		onPageScroll(e) {
 			var that = this;
-			if (e.scrollTop > -(this.bannerTop + this.navBarBoxHeight) / 2) {
+			if (e.scrollTop > (this.navBarTop/2)) {
 				that.isScroll = true;
 			} else {
 				that.isScroll = false;
 			}
 		},
+		onReachBottom() {
+			if (true)
+				this.getMenuList(11,(this.currentPage + 1))
+		},
 		methods: {
 			toMenu(id) {
-
+				if (id) {
+					uni.navigateTo({
+						url: '/pages/menu/menu?id=' + id
+					})
+				}
 			},
 			toMenuOut(url) {
-
+				if (url) {
+					uni.navigateTo({
+						url: '/packages/h5/h5?url=' + url
+					})
+				}
 			},
 			toDetail(id) {
+				if(id){
+					uni.navigateTo({
+						url:'/pages/detail/detail?id='+id + '&menuTitle=学习新思想'
+					})
+				}
+			},
+			async getToken(){
+				await uni.login({
+					provider: 'weixin',
+					success: (res) => {
+						console.log(res.code);
+						this.$u.api.login({
+							code: res.code
+						}).then(res => {
+							this.$u.vuex('vuex_token', res.token)
+							this.$u.api.user().then(res=>{
+								this.$u.vuex('vuex_user', res)
+								this.getMenuList(11,this.currentPage)
+							})
+						})
+					}
+				});
+			},
+			async getMenu(){
+				const res = await this.$u.api.baseFormIndex({
+					page: 1,
+					page_size: 9999,
+					table_name: 'study_columns',
+				})
+				const parArr = res.data.filter(item=>item.pid===0)
+				parArr.map(item=>{
+					this.menuList.map(m=>{
+						if(item.title===m.title){
+							m.id = parArr.id
+						}
+					})
+				})
+			},
+			async getMenuList(id,currentPage){
+				uni.showLoading({
+					title:'加载中'
+				})
+				let that = this
+				const res = await this.$u.api.getAudios({
+					study_column_id: id,
+					page:currentPage
+				})
 				
+				if(res.data.length===0 && currentPage>0){
+					uni.stopPullDownRefresh(); // 服务器总条数 < 每页条数, 会将第一页的条数重新返回
+					// 已加载到最后一页
+					that.hasNomore = true
+					uni.showToast({
+						title: '没有更多了',
+						icon: 'none'
+					});
+					return;
 				}
+				if (currentPage == 1) {
+					that.menuList = res.data;
+				} else {
+					that.menuList.push(...res.data);
+				}
+				
+				that.currentPage = currentPage;
+				uni.hideLoading()
+			},
+
 		}
 	}
 </script>
@@ -118,6 +214,7 @@
 				color: #fff;
 				font-size: 32rpx;
 				text-align: left;
+				position: absolute;
 			}
 		}
 
@@ -126,22 +223,20 @@
 		}
 
 		.content {
-			// height:1400px;
-			padding-bottom: 100rpx;
+			padding-bottom: 180rpx;
 
 			.topbg {
-				background: url(../../static/index-top.png) no-repeat top left;
-				background-size: 100% 100%;
 				width: 100%;
 				height: 360rpx;
 			}
 
 			.banner {
-				background: url(../../static/index-banner.png) no-repeat top left;
-				background-size: 100% 100%;
 				width: 98%;
 				height: 383rpx;
 				margin: 0 auto;
+				display: block;
+				position: relative;
+				z-index: 1;
 			}
 
 			&-content {
@@ -177,7 +272,7 @@
 			}
 
 			.menus-list {
-				padding: 0 20rpx;
+				padding: 0 30rpx;
 
 				&-item {
 					display: flex;
@@ -193,7 +288,7 @@
 
 				&-img {
 					width: 196rpx;
-					height: 169rpx;
+					height: 129rpx;
 					margin-right: 24rpx;
 				}
 
@@ -208,11 +303,16 @@
 					text-overflow: ellipsis;
 				}
 			}
-
+			.hasNomore{
+				text-align: center;
+				color:#a4a4a4;
+				height:80rpx;
+				line-height: 80rpx;
+			}
 
 		}
 
-		// background: url(../../static/index-top.png) no-repeat top left;
+		// background: url(@/static/index-top.png) no-repeat top left;
 		// background-size: 100% 100%;
 		// width:100%;
 		// height:360rpx;

pages/me/me.vue

@@ -1,78 +1,316 @@
 <template>
 	<view class="me">
-		<view class="navBarBox" :style="{height:navBarBoxHeight+'rpx'}">
+		<view class="navBarBox" :style="{height:navBarBoxHeight+'px'}">
 			<!-- 状态栏占位 -->
-			<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
+			<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
 			<!-- 真正的导航栏内容 -->
-			<view class="navBar">
+			<view class="navBar" :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
 				<view>我的</view>
 			</view>
 		</view>
 		<view class="me-top">
 			<view class="me-info">
 				<view class="me-info-img">
-					<u-avatar :src="info.headimgurl?info.headimgurl:headReplace" size="120"></u-avatar>
+					<u-avatar bg-color="#fff" :src="info.headimgurl?info.headimgurl:headReplace" size="120"></u-avatar>
+					<view @click="showform = true">
+						<span>{{info.name?info.name:''}}</span><u-icon name="edit-pen-fill"></u-icon>
 						<view>
-						<span>陈毅</span><u-icon name="edit-pen-fill"></u-icon>
+							<span>{{info.mobile?info.mobile:''}}</span>
 						</view>
 					</view>
+
+				</view>
 				<view class="me-info-party">
-					中共苏州工业园区斜塘街道财务和资产管理局支部委员会
+					{{info.address?info.address:''}}
 				</view>
 			</view>
 		</view>
 		<view class="me-list">
-			<view class="me-list-item" v-for="item in list">
+			<view class="me-list-item" v-for="item in list" @click="toUrl(item.url)">
 				<view class="me-list-item-left">
-					<image :src="item.src" :style="{width:item.width,height:item.height}"></image>
+					<u-icon :name="item.icon" size="55" color="#e50015"></u-icon>
+					<!-- <image :src="item.src" :style="{width:item.width,height:item.height}"></image> -->
 					<view>{{item.title}}</view>
 				</view>
-				<view @click="toUrl(item.url)">
+				<view>
 					<u-icon name="arrow-right" size="40" color="#a7a7a7"></u-icon>
 				</view>
 			</view>
 		</view>
+
+
+		<u-popup v-model="showPhone" mode="bottom" :mask-close-able="false">
+			<view class="login-btn" style="padding:60rpx">
+				<button class="login-btn-btn" open-type="getPhoneNumber" @getphonenumber="getUserWxPhone">授权手机号</button>
+			</view>
+
+		</u-popup>
+		<u-popup v-model="showform" mode="bottom">
+			<view class="login-form">
+				<view>
+					<span>头像：</span>
+					<view style="border:none">
+						<htz-image-upload :max="1" v-model="avatarList" mediaType="image" :chooseNum="1"
+							:sourceType="['album','camera']" :compress="false" :quality="80" :formData="otherData"
+							:remove="true" :dataType="1" @uploadSuccess="uploadSuccess" @imgDelete="imgDelete"
+							@uploadFail="uploadFail" :action="action"></htz-image-upload>
+					</view>
+				</view>
+				<view>
+					<span>姓名：</span>
+					<view>
+						<u-input :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.name"
+							placeholder="请输入姓名" :border="false" shape="circle" clearable></u-input>
+					</view>
+				</view>
+				<view>
+					<span>手机号：</span>
+					<view :style="{'border':hasPhone?'none':'1px solid #999'}">
+						<view v-if="hasPhone">
+							{{form.mobile}}
+						</view>
+						<u-input v-else :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.mobile"
+							placeholder="请输入手机号" :border="false" shape="circle" clearable></u-input>
+					</view>
+				</view>
+				<view>
+					<span>党支部：</span>
+
+					<view v-if="hasParty" style="border: none;">{{form.address}}</view>
+					<view v-else style="justify-content: space-between;min-height:40px" @click="openPicker">
+						<u-input @click="openPicker" readonly disabled style="width:100%" :placeholderStyle="'color:#999;font-size:30rpx'" v-model="form.address"
+							placeholder="请选择居住地所属党支部" :border="false" shape="circle">
+						</u-input>
+						<!-- <view>{{form.address?form.address:'请选择居住地所属党支部'}}</view> -->
+						<view class="icon-right">
+							<view>|</view>
+							<u-icon size="30" name="arrow-down"></u-icon>
+						</view>
+					</view>
+
+				</view>
+			</view>
+			<view class="login-btn">
+				<view class="login-btn-btn" @click="submit">提 交</view>
+			</view>
+		</u-popup>
+		<u-picker v-model="showParty" @confirm="confirmParty" :range="partyList" range-key="name"
+			confirm-color="#e50015" mode="selector"></u-picker>
+
+		<tabbar :current-page="1"></tabbar>
 	</view>
 </template>
 
 <script>
 	import htzImageUpload from '@/components/htz-image-upload/htz-image-upload.vue'
+	import tabbar from "../../components/tabbar/tabbar.vue"
+	import {
+		ROOTPATH as baseUrl
+	} from "@/common/config.js"
+	import {
+		isNull,
+		isOnlyChinese,
+		isMobile,
+		toast
+	} from "@/common/util.js"
 	export default {
 		components: {
+			tabbar,
 			htzImageUpload
 		},
 		data() {
 			return {
 				navBarBoxHeight: 0,
-				statusBarHeight: 40,
-				info:{},
-				headReplace:require("@/static/me-img.png"),
-				list:[{
-					src:require("@/static/me-clock.png"),
-					width:"55rpx",
-					height:"55rpx",
-					title:'学习记录',
-					url:"pages/record/record"
-				}]
+				navBarHeight: 0,
+				navBarTop: 0,
+				info: {},
+				headReplace: require("@/static/me-img.png"),
+				list: [{
+					src: require("@/static/me-clock.png"),
+					icon: 'clock-fill',
+					title: '学习记录',
+					url: "/packages/record/record"
+				}, {
+					src: require("@/static/me-clock.png"),
+					icon: 'setting-fill',
+					title: '清除缓存',
+					url: ""
+				}],
+				showPhone: false,
+				hasPhone: false,
+				hasParty: false,
+				showform: false,
+				showParty: false,
+				action: '',
+				otherData: {
+					token: ''
+				},
+				avatarList: [],
+				partyList: [],
+				form: {
+					name: '',
+					mobile: '',
+					address: ''
+				},
+
+
 			}
 		},
 		onLoad() {
-			// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
-			this.navBarBoxHeight = 80 + this.statusBarHeight * 2
+			const MenuButton = uni.getMenuButtonBoundingClientRect()
+			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
+			this.navBarHeight = MenuButton.height
+			this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
+			this.action = baseUrl + "/api/mobile/upload-file"
+			this.getToken()
+			this.otherData.token = this.vuex_token
+			this.getInitUser()
+			this.getParty()
 		},
 		methods: {
-			toUrl(url){
-				if(url){
+			async getToken() {
+				if (isNull(this.vuex_token)) {
+					await uni.login({
+						provider: 'weixin',
+						success: (res) => {
+							console.log(res.code);
+							this.$u.api.login({
+								code: res.code
+							}).then(res => {
+								this.$u.vuex('vuex_token', res.token)
+							})
+						}
+					});
+				}
+			},
+			toUrl(url) {
+				if (url) {
 					uni.navigateTo({
-						url:url
+						url: url
+					})
+				} else {
+					uni.showModal({
+						title:'是否清除缓存信息？',
+						success:function(res){
+							if(res.confirm){
+								uni.removeStorageSync('xtykt_lifeData')
+								uni.reLaunch({
+									url: '/pages/index/index'
+								})
+							}
+						}
+					})
+
+				}
+			},
+			async getInitUser() {
+				const res = await this.$u.api.user()
+				this.$u.vuex('vuex_user', res)
+				this.form = res
+				this.info = this.$u.deepClone(res);
+				this.avatarList = []
+				if (!isNull(res.headimgurl)) {
+					this.avatarList.push({
+						type: 0,
+						url: res.headimgurl
+					})
+				}
+				if (isNull(this.form.mobile)) {
+					this.showPhone = true
+				} else {
+					this.hasPhone = true
+				}
+				if (!isNull(this.form.address)) {
+					this.hasParty = true
+				}
+			},
+			getUserWxPhone(res) {
+				console.log(res)
+				if(!res.detail.code){
+					this.showPhone = false
+					return
+				}
+				this.$u.api.getPhone({
+					code: res.detail.code
+				}).then(res => {
+					console.log(res)
+					this.form.mobile = res.mobile
+					this.form.name = res.near_user ? res.near_user.name : ''
+					this.form.address = res.near_user ? res.near_user.address : ''
+					this.showPhone = false
+					this.showform = true
+					if (!isNull(this.form.mobile)) {
+						this.hasPhone = true
+					}
+					if (!isNull(this.form.address)) {
+						this.hasParty = true
+					}
+				})
+			},
+			async getParty() {
+				const res = await this.$u.api.getParty()
+				this.partyList = res
+			},
+			openPicker() {
+				if (!this.hasParty) {
+					uni.hideKeyboard()
+					this.showParty = true
+				}
+
+			},
+			confirmParty(e) {
+				if (e) {
+					this.form.address = this.partyList[e].name
+				}
+			},
+			uploadSuccess(res) {
+				console.log("succ", res)
+				uni.showLoading({
+					title: "上传成功"
+				})
+				let data = JSON.parse(res.data)
+				this.form.headimgurl = data.url
+				this.avatarList = []
+				this.avatarList.push({
+					type: 0,
+					url: data.url
 				})
+			},
+			uploadFail(res) {
+				console.log("fail", res)
+			},
+			imgDelete(res) {
+				this.avatarList = res.tempFilePaths
+				this.form.headimgurl = ''
+				console.log(this.info.headimgurl)
+			},
+			submit() {
+				if (isNull(this.form.name) || isNull(this.form.mobile) || isNull(this.form.address)) {
+					toast("请填写所有信息")
+					return
 				}
+				if (!isOnlyChinese(this.form.name)) {
+					toast("请输入中文姓名")
+					return
+				}
+				if (!isNull(this.form.mobile) && !isMobile(this.form.mobile)) {
+					toast("请输入正确的手机号")
+					return
+				}
+				this.$u.api.saveUser(this.form).then(res => {
+					toast('更新成功')
+					this.showform = false
+					this.getInitUser()
+				})
 			}
 		}
 	}
 </script>
 
 <style lang="scss">
+	::v-deep .u-picker-body{
+		height: 800rpx!important;
+	}
 	.me {
 		// height:100vh;
 		// background: linear-gradient(to right, #da212d, #f96666);
@@ -93,50 +331,127 @@
 				text-align: center;
 			}
 		}
-		&-info{
+
+		&-info {
 			background: linear-gradient(to right, #da212d, #f96666);
-			color:#fff;
+			color: #fff;
 			font-size: 32rpx;
-			padding:35rpx;
-			padding-top:0;
-			padding-bottom:105rpx;
-			&-img{
+			padding: 35rpx;
+			padding-top: 0;
+			padding-bottom: 105rpx;
+
+			&-img {
 				display: flex;
 				align-items: center;
-				.u-avatar{
-					margin-right:20rpx
+
+				.u-avatar {
+					margin-right: 20rpx
 				}
-				span{
-					margin-right:10rpx
+
+				span {
+					margin-right: 10rpx
 				}
 			}
-			&-party{
+
+			&-party {
 				font-size: 24rpx;
-				margin-top:35rpx
+				margin-top: 35rpx
 			}
 		}
-		&-list{
-			margin-top:-70rpx;
+
+		&-list {
+			margin-top: -70rpx;
 			border-radius: 70rpx 70rpx 0 0;
 			background-color: #fff;
-			&-item{
+
+			&-item {
 				display: flex;
 				align-items: center;
 				justify-content: space-between;
-				padding:50rpx 35rpx;
-				border-bottom:1px solid #ddd;
+				padding: 50rpx 35rpx;
+				border-bottom: 1px solid #ddd;
 				font-size: 32rpx;
-				color:#333333;
-				& image{
-					margin-right:20rpx;
+				color: #333333;
+
+				& image {
+					margin-right: 20rpx;
 					vertical-align: middle;
 				}
-				&-left{
+
+				&-left {
+					display: flex;
+					align-items: center;
+
+					u-icon {
+						margin-right: 20rpx;
+					}
+				}
+			}
+		}
+
+	}
+
+	.login {
+
+		// border-radius: 50rpx 50rpx 0 0;
+		// margin-top: -60rpx;
+		// background: #e1f1f2;
+		// position: relative;
+		&-form {
+			padding: 20rpx 60rpx;
+			margin-top: 20rpx;
+
+			>view {
+				margin-bottom: 30rpx;
+				background-color: #fff;
+				padding: 20rpx 40rpx;
+				border-radius: 20rpx;
 				display: flex;
 				align-items: center;
+
+				span {
+					width: 120rpx;
+					text-align: right;
 				}
+
+				>view {
+					border: 1px solid #999;
+					border-radius: 10rpx;
+					display: flex;
+					width: calc(100% - 120rpx);
+					padding: 0 20rpx;
+					padding-right: 0
+				}
+
+				.icon-right {
+					display: flex;
+					align-items: center;
+					margin-left: 10rpx;
+
+					.u-icon {
+						margin: 0 20rpx;
+						color: #999;
+					}
+				}
+
 			}
 		}
 
+		&-btn {
+			padding: 30rpx 60rpx;
+			padding-top: 0;
+
+			&-btn {
+				box-shadow: 0.5px 3px 9px 0px rgba(235, 107, 85, 0.3);
+				background: #e50015;
+				border-radius: 44rpx;
+				text-align: center;
+				height: 88rpx;
+				color: #fff;
+				line-height: 88rpx;
+				font-size: 34rpx;
+			}
+
+		}
 	}
 </style>

pages/menu/components/swiper-list-item.vue

@@ -6,7 +6,16 @@
 		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" v-model="dataList" @query="queryList" :fixed="false">
 			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
 			<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
-				<view class="item-title">{{item.title}}</view>
+				<view v-if="item.poster" class="item-posters">
+					<image class="item-poster" :src="item.poster"></image>
+					<view class="item-poster-mask">
+						<u-icon size="36" color="#e50015" name="play-right"></u-icon>
+					</view>
+				</view>
+				<view class="item-title">
+					{{item.title}}
+					<span v-if="item.source">（{{item.source}}）</span>
+				</view>
 				<!-- <view class="item-detail">{{item.detail}}</view> -->
 				<view class="item-line"></view>
 			</view>
@@ -24,21 +33,33 @@
 				firstLoaded: false,
 				// 是否滚动到当前页
 				isCurrentPage: false,
-				list:[]
 			}
 		},
-		props:{
+		props: {
 			// 当前组件的index，也就是当前组件是swiper中的第几个
 			tabIndex: {
 				type: Number,
-				default: function(){
+				default: function() {
 					return 0
 				}
 			},
+			menuId: {
+				type: Number,
+				String,
+				default: function() {
+					return ''
+				}
+			},
+			menuTitle: {
+				type: String,
+				default: function() {
+					return ''
+				}
+			},
 			// 当前swiper切换到第几个index
 			currentIndex: {
 				type: Number,
-				default: function(){
+				default: function() {
 					return 0
 				}
 			}
@@ -46,9 +67,9 @@
 		watch: {
 			currentIndex: {
 				handler(newVal) {
-					if(newVal === this.tabIndex){
+					if (newVal === this.tabIndex) {
 						// 懒加载，当滑动到当前的item时，才去加载
-						if(!this.firstLoaded){
+						if (!this.firstLoaded) {
 							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
 							this.$nextTick(() => {
 								setTimeout(() => {
@@ -62,6 +83,7 @@
 			},
 		},
 		methods: {
+			
 			// 接收父组件传过来的刷新列表要求
 			reload() {
 				this.$nextTick(() => {
@@ -73,31 +95,33 @@
 				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
 				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
 				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
-				console.log()
+				uni.showLoading({
+					title:"加载中"
+				})
+				// return
 				const params = {
-					pageNo: pageNo,
-					pageSize: pageSize,
-					type: this.tabIndex + 1
+					page: pageNo,
+					page_size: pageSize,
+					study_column_id: this.menuId
 				}
-				for(var i=0;i<6;i++){
-					this.list.push({
-						title:'实际引导'+i,
+				this.$u.api.getAudios(params).then(res => {
+					uni.hideLoading()
+					this.$refs.paging.complete(res.data);
+					this.firstLoaded = true;
 				})
-				}
-				this.$refs.paging.complete(this.list);
-				// this.$request.queryList(params).then(res => {
-				// 	//将请求的结果数组传递给z-paging
-				// 	this.$refs.paging.complete(res.data.list);
-				// 	this.firstLoaded = true;
-				// }).catch(res => {
-				// 	// 如果请求失败写this.$refs.paging.complete(false);
-				// 	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
-				// 	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
-				// 	this.$refs.paging.complete(false);
-				// })
+			},
+			enterAudios(id){
+				this.$u.api.enterAudios(id,{})
 			},
 			itemClick(item) {
-				console.log('点击了', item.title);
+				if (item.audio_file) {
+					this.$emit("playvideo",item.audio_file)
+					this.enterAudios(item.id,{})
+				} else {
+					uni.navigateTo({
+						url: '/pages/detail/detail?id=' + item.id + '&menuTitle=' + this.menuTitle
+					})
+				}
 			}
 		}
 	}
@@ -114,17 +138,19 @@
 		/* height: 150rpx; */
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
+		justify-content: flex-start;
 		margin: 0rpx 30rpx;
-		padding:30rpx 5rpx;
+		padding: 30rpx 5rpx;
 
 	}
-	.item-title{
+
+	.item-title {
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 2;
 		overflow: hidden;
 		text-overflow: ellipsis;
+		line-height: 1.8;
 	}
 
 	.item-line {
@@ -135,4 +161,25 @@
 		width: 100%;
 		background-color: #eeeeee;
 	}
+	.item-posters{
+		position: relative;
+	}
+	.item-poster {
+		width: 196rpx;
+		height: 129rpx;
+		margin-right: 24rpx;
+		position: relative;
+	}
+	.item-poster-mask{
+		position: absolute;
+		top:0;
+		left:0;
+		width: 196rpx;
+		height: 129rpx;
+		background-color: rgba(0,0,0,0.5);
+		text-align: center;
+		line-height: 129rpx;
+	}
+
+	
 </style>

pages/menu/menu.vue

@@ -1,13 +1,25 @@
 <template>
 	<z-paging-swiper class="wrap">
+		
+		<!-- 视频播放 -->
+		<view class="playvideo" v-if="playvideo">
+			<view class="playvideowrap">
+				<video ref="videos" id="videos" :autoplay="true" @play="playFullScreen" :src="videoUrl"
+					play-btn-position="center"></video>
+				<view class="closevideo" @click="playvideo=false,videoUrl=''">X</view>
+			</view>
+			<!-- <u-icon name="photo" color="#fff" size="30"></u-icon> -->
+		</view>
+		
+		
 		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
 		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
 		<template #top>
-			<view class="navBarBox" :style="{height:navBarBoxHeight+'rpx'}">
+			<view class="navBarBox" :style="{height:navBarBoxHeight+'px'}">
 				<!-- 状态栏占位 -->
-				<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
+				<view class="statusBar" :style="{paddingTop: navBarTop+'px'}"></view>
 				<!-- 真正的导航栏内容 -->
-				<view class="navBar">
+				<view class="navBar" :style="{'height':navBarHeight+'px','line-height':navBarHeight+'px'}">
 					<view class="back" @click="goback">
 						<u-icon name="arrow-left"></u-icon>
 					</view>
@@ -15,7 +27,7 @@
 				</view>
 			</view>
 			<view>
-				<z-tabs ref="tabs" :active-style="activeStyle" :inactive-style="nomalStyle" :scroll-count="2"
+				<z-tabs v-if="showTabs" ref="tabs" :name-key="'title'" :value-key="'id'" :active-style="activeStyle" :inactive-style="nomalStyle" :scroll-count="2"
 					:list="tabList" :current="current" @change="tabsChange" />
 			</view>
 		</template>
@@ -25,7 +37,7 @@
 			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
 				<!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
 				<!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
-				<swiper-list-item ref="listItem" :tabIndex="index" :currentIndex="current"></swiper-list-item>
+				<swiper-list-item ref="listItem" @playvideo="getVideo" :menuTitle="menutitle" :menuId="firstMenuId" :tabIndex="index" :currentIndex="current"></swiper-list-item>
 			</swiper-item>
 		</swiper>
 	</z-paging-swiper>
@@ -42,46 +54,72 @@
 		data() {
 			return {
 				navBarBoxHeight: 0,
-				statusBarHeight: 40,
-				menutitle: '课件绘编',
-				tabList: [{
-					'name': '测试111111111111111111'
-				}, {
-					'name': '测试2'
-				}, {
-					'name': '测试3'
-				}, {
-					'name': '测试4'
-				}, {
-					'name': '测试5'
-				}],
+				navBarHeight:0,
+				navBarTop:0,
+				menutitle: '',
+				tabList: [],
+				firstMenuId:'',
 				current: 0, // tabs组件的current值，表示当前活动的tab选项
+				showTabs:false,
 				nomalStyle: {
-
-
-
 				},
 				activeStyle: {
 					color: '#fff',
 					background: '#de242f',
-
-				}
+				},
+				playvideo:false,
+				videoUrl:''
 			}
 		},
-		onLoad() {
-			// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
-			this.navBarBoxHeight = 80 + this.statusBarHeight * 2
+		onLoad(option) {
+			const MenuButton = uni.getMenuButtonBoundingClientRect()
+			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
+			this.navBarHeight = MenuButton.height
+			this.navBarBoxHeight = this.navBarTop + this.navBarHeight + 10
+			console.log(option.id)
+			this.getMenu(option.id)
+			
 		},
 		methods: {
+			playFullScreen(){
+				let videoContext = uni.createVideoContext('videos', this)
+				console.log("videoContext",videoContext)
+				videoContext.requestFullScreen()
+			},
+			getVideo(e){
+				this.videoUrl = e
+				this.playvideo = true
+			},
 			goback() {
-				uni.navigateBack()
+				uni.switchTab({
+					url: '/pages/index/index'
+				})
 			},
-			toDetail(id) {
+			async getMenu(meunId){
+				const res = await this.$u.api.baseFormIndex({
+					page: 1,
+					page_size: 9999,
+					table_name: 'study_columns',
+				})
+				const pArr = res.data.filter(item=>item.id==meunId)
+				const cArr = res.data.filter(item=>item.pid==meunId)
+				this.menutitle = pArr[0].title
+				if(cArr.length>0){
+					this.tabList = cArr
+					this.firstMenuId = cArr[0].id
+					this.showTabs = true
+				}else{
+					this.tabList = pArr
+					this.firstMenuId = meunId
+					this.showTabs = false
+				}
 				
 			},
 			// tabs通知swiper切换
-			tabsChange(index) {
+			tabsChange(index,value) {
 				this.current = index;
+				this.firstMenuId = value
+				console.log(index,value)
 			},
 			// swiper滑动中
 			swiperTransition(e) {
@@ -90,6 +128,11 @@
 			// swiper滑动结束
 			swiperAnimationfinish(e) {
 				this.current = e.detail.current;
+				this.tabList.map((item,index)=>{
+					if(this.current===index){
+						this.firstMenuId = item.id	
+					}
+				})
 				this.$refs.tabs.unlockDx();
 			},
 			// 如果要通知当前展示的z-paging刷新，请调用此方法
@@ -117,7 +160,8 @@
 				color: #fff;
 				font-size: 32rpx;
 				text-align: center;
-
+				// position: absolute;
+				width:100%;
 				.back {
 					position: absolute;
 					left: 20rpx;
@@ -164,9 +208,45 @@
 
 		}
 		::v-deep .zp-paging-container-content{
-			padding-bottom:200rpx;
+			padding-bottom:20rpx;
 		}
 
 
+	}
+	.playvideo {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		z-index: 11;
+		background-color: rgba(0, 0, 0, 0.6);
+	
+		&>.playvideowrap {
+			width: 95%;
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+	
+			video {
+				width: 100%
+			}
+
+			.closevideo {
+				color: #fff;
+				width: 50rpx;
+				height: 50rpx;
+				border: 1px solid #fff;
+				border-radius: 50rpx;
+				position: absolute;
+				text-align: center;
+				line-height: 50rpx;
+				/* display: inline-block; */
+				right: 0rpx;
+				top: -25rpx // transform: translate(0,-50%);
+			}
+		}
+	
 	}
 </style>

pages/record/record.vue

@@ -1,172 +0,0 @@
-<!-- 自定义下拉刷新与上拉加载演示(vue) -->
-<template>
-	<view class="wrap">
-		<z-paging ref="paging" v-model="dataList" @query="queryList">
-			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
-			<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
-			<template #top>
-				<view class="navBarBox" :style="{height:navBarBoxHeight+'rpx'}">
-					<!-- 状态栏占位 -->
-					<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
-					<!-- 真正的导航栏内容 -->
-					<view class="navBar">
-						<view class="back" @click="goback">
-							<u-icon name="arrow-left"></u-icon>
-						</view>
-						<view>{{menutitle}}</view>
-					</view>
-				</view>
-				<!-- <z-tabs :list="tabList" @change="tabChange" /> -->
-			</template>
-			
-			<!-- 自定义下拉刷新view(如果use-custom-refresher为true且不设置下面的slot="refresher"，此时不用获取refresherStatus，会自动使用z-paging自带的下拉刷新view) -->
-
-			<!-- 注意注意注意！！字节跳动小程序中自定义下拉刷新不支持slot-scope，将导致custom-refresher无法显示 -->
-			<!-- 如果是字节跳动小程序，请参照sticky-demo.vue中的写法，此处使用slot-scope是为了减少data中无关变量声明，降低依赖 -->
-			<!-- <template #refresher="{refresherStatus}">
-				此处的custom-refresh为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，下拉刷新就显示什么view
-				<custom-refresher :status="refresherStatus" />
-				<view class="loadmore">
-					加载
-				</view>
-			</template> -->
-			<!-- 自定义没有更多数据view -->
-			<!-- <template #loadingMoreNoMore>
-				此处的custom-nomore为demo中自定义的组件，非z-paging的内置组件，请在实际项目中自行创建。这里插入什么view，没有更多数据就显示什么view
-				<custom-nomore />
-				<view class="loadmore">
-					--没有更多了--
-				</view>
-			</template> -->
-			
-			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
-			<view class="item" v-for="(item,index) in dataList" :key="index" @click="itemClick(item)">
-				<view class="item-title">{{item.title}}</view>
-				<view class="item-line"></view>
-			</view>
-		</z-paging>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				// v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
-				dataList: [],
-				list:[],
-				navBarBoxHeight: 0,
-				statusBarHeight: 40,
-				menutitle: '学习记录',
-			}
-		},
-		onLoad() {
-			// this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
-			this.navBarBoxHeight = 80 + this.statusBarHeight * 2
-		},
-		methods: {
-			goback(){
-				uni.redirectTo({
-					url:'/pages/me/me'
-				})
-			},
-			queryList(pageNo, pageSize) {
-				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
-				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
-				// 模拟请求服务器获取分页数据，请替换成自己的网络请求
-				const params = {
-					pageNo: pageNo,
-					pageSize: pageSize,
-					type: this.tabIndex + 1
-				}
-				for(var i=0;i<9;i++){
-					this.list.push({
-						title:'实际引导'+i,
-					})
-				}
-				this.$refs.paging.complete(this.list);
-				// this.$request.queryList(params).then(res => {
-				// 	// 将请求的结果数组传递给z-paging
-				// 	this.$refs.paging.complete(res.data.list);
-				// }).catch(res => {
-				// 	// 如果请求失败写this.$refs.paging.complete(false);
-				// 	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
-				// 	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
-				// 	this.$refs.paging.complete(false);
-				// })
-			},
-			itemClick(item) {
-				console.log('点击了', item.title);
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.wrap {
-		.navBarBox {
-			// position: fixed;
-			// top: 0;
-			// left: 0;
-			// z-index: 999;
-			width: 100%;
-	
-			padding: 0 20rpx;
-			background: linear-gradient(to right, #da212d, #f96666);
-			// margin-bottom:24rpx;
-			.navBar {
-				color: #fff;
-				font-size: 32rpx;
-				text-align: center;
-	
-				.back {
-					position: absolute;
-					left: 20rpx;
-	
-				}
-			}
-		}
-		
-		.swiper {
-			height: 100%;
-	
-		}
-		::v-deep .zp-paging-container-content{
-			padding-bottom:200rpx;
-		}
-		.loadmore{
-			font-size: 15px;
-			margin: 0px 3px;
-			color:rgb(164, 164, 164);
-			text-align: center;
-			height:80rpx;
-			line-height: 80rpx;
-		}
-	}
-	.item {
-		position: relative;
-		/* height: 150rpx; */
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin: 0rpx 30rpx;
-		padding:30rpx 5rpx;
-		
-	}
-	.item-title{
-		display: -webkit-box;
-		-webkit-box-orient: vertical;
-		-webkit-line-clamp: 2;
-		overflow: hidden;
-		text-overflow: ellipsis;
-	}
-	
-	.item-line {
-		position: absolute;
-		bottom: 0rpx;
-		left: 0rpx;
-		height: 1px;
-		width: 100%;
-		background-color: #eeeeee;
-	}
-</style>