NDAid/pages/health_center/health_center.vue

<template>
	<uv-toast ref="toast"></uv-toast>
	<view class="">
		<navbar :title="$t('health_center')" size="48" :backtext="$t('back')"  color="#fff" :backShow="false"></navbar>
	</view>
	<view class="app_content">
		<view class="" v-for="(item,index) in list" :key="index">
			<uv-row customStyle="margin-bottom: 10px">
				<uv-col span="12" >
					<video :id="'myVideo'+item.id" class="myVideo" :src="item.vurl"
						@error="videoErrorCallback" controls 
						:poster-for-crawler="item.vjpg" 
						:danmu-btn="false"
						:poster="item.vjpg"
						>
					</video>
					<uv-text type="info" :text="item.vname" align="center"></uv-text>
				</uv-col>
			</uv-row>
		</view>
	</view>
</template>

<script>
	import {gethealthcenterlist} from "@/common/api/data.js"
	export default {
		data() {
			return {
				list:[],
			}
		},
		methods: {
			getlist(){
				gethealthcenterlist().then(res=>{
					console.log(res)
					var data =res.data
					if(200!=data.code){
						this.$refs.toast.show({
							type: 'error',
							message: data.errMsg
						})
						return
					}
					this.list = data.resultData
				})
			},
			init(){
				this.getlist()
			},
			videoErrorCallback: function(e) {
				this.$refs.toast.show({
					type: 'error',
					message: e.target.errMsg
				})
			},
		},
		mounted(){
			uni.setNavigationBarTitle({
				title: this.$t('health_center')
			});
			this.init()
		},
	}
</script>

<style scoped>
.myVideo{
	margin: 0 auto;
	width: 95%;
	margin-top: 10px;
}
.app_content{
	margin-top: 3em;
	padding-top: 2em;
}
</style>