81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<template>
|
|
|
|
<view>
|
|
<nav-bar title="视频教程" bg-color="transparent">
|
|
<template v-slot:statusBar>
|
|
<view class="top-bg-box">
|
|
<image style="width: 100%;" src="/static/image/common/shipinjiaocheng/top-bg.png" mode="widthFix">
|
|
</image>
|
|
</view>
|
|
</template>
|
|
</nav-bar>
|
|
<view class="video-list">
|
|
<view class="video-item" v-for="item in videoHelpList" :key="item.id" @click="clickVideoHelp(item)">
|
|
<image class="video-help-img" :src="item.icon"></image>
|
|
<text class="video-help-title flex-1">{{ item.text }}</text>
|
|
<uni-icons type="forward" size="18" color="#AEAEAE"></uni-icons>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from "vue";
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { storage } from "../../../utils/storage";
|
|
import {
|
|
util
|
|
} from '@/utils/common.js'
|
|
const videoHelpList = ref([]);
|
|
|
|
|
|
onLoad(() => {
|
|
const configData = storage.get("config")
|
|
videoHelpList.value = configData.config['client.uniapp.alipay.video_help'] || []
|
|
})
|
|
|
|
/**
|
|
* 点击视频教程
|
|
* @param item
|
|
*/
|
|
const clickVideoHelp = (item) => {
|
|
const url = item.url
|
|
util.goPage(`/pages/common/webview/webview?url=${encodeURIComponent(url)}&title=${item.text}`)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.video-list {
|
|
background-color: #FFFFFF;
|
|
border-radius: 32rpx;
|
|
margin: 0 32rpx;
|
|
|
|
.video-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 32rpx;
|
|
border-bottom: 1rpx solid #E4E4E4;
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.video-help-title {
|
|
width: 100%;
|
|
font-size: 32rpx;
|
|
color: #1A1A1A;
|
|
line-height: 42rpx;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.video-help-img {
|
|
flex-shrink: 0;
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
}
|
|
</style>
|