front/pages/user/setting/about.vue

<template>
  <view class="container padding-lr-sm" v-if="fetch">
	  <use-tabbar :tabbar="false"></use-tabbar>

    <!-- Logo -->
    <view class="dflex-c pos-r margin-bottom margin-top-xxl">
      <image :src="fetch.logo" mode="widthFix" ></image>
    </view>

    <!-- 标题与副标题 -->
    <view class="dflex-c dflex-flow-c">
      <text class="fwb fs-lg">{{fetch.name}}</text>
      <text class="ft-dark fs-xxs">{{fetch.info}}</text>
    </view>

    <view class="gap padding"></view>

    <!-- 协议相关 -->
    <view class="border-radius">
      <view class="use-list-title dflex-b padding-lr w-full bg-main" @click="Dever.location('tool/page?title=使用协议')">
        <text class="flex1" style="font-size: 13px;">使用协议</text>
        <view class="iconfont fs-sm iconjiantou-01" style="color: #c0c0c0;"></view>
      </view>
      <view class="use-list-title dflex-b padding-lr w-full bg-main" @click="Dever.location('tool/page?title=隐私政策')">
        <text class="flex1" style="font-size: 13px;">隐私政策</text>
        <view class="iconfont fs-sm iconjiantou-01" style="color: #c0c0c0;"></view>
      </view>
      <view class="border-line"></view>
      <view class="use-list-title dflex-b padding-lr w-full bg-main" @click="Dever.location('tool/page?title=关于我们')">
        <text class="flex1" style="font-size: 13px;">关于我们</text>
        <view class="iconfont fs-sm iconjiantou-01" style="color: #c0c0c0;"></view>
      </view>
    </view>

    <!-- 版本与官网 -->
    <view class="border-radius margin-top-sm" @click="show">
      <view class="use-list-title dflex-b padding-lr w-full bg-main">
        <text class="flex1" style="font-size: 13px;">版本更新</text>
        <view class="dflex">
          <text class="tip line-height-1 margin-right-xs">{{fetch.version}}</text>
          <view class="iconfont fs-sm iconjiantou-01" style="color: #c0c0c0;"></view>
        </view>
      </view>
      <view class="use-list-title dflex-b padding-lr w-full bg-main" @click="Dever.location('http://'+fetch.site+'')">
        <text class="flex1" style="font-size: 13px;">{{fetch.name}}官网</text>
        <view class="dflex">
          <text class="tip line-height-1 margin-right-xs">{{fetch.site}}</text>
          <view class="iconfont fs-sm iconjiantou-01" style="color: #c0c0c0;"></view>
        </view>
      </view>
    </view>

    <!-- 页脚版权 -->
    <view class="pos-f pos-b-full dflex-c dflex-flow-c ft-dark fs-xxs margin-bottom-xl">
      <text>{{fetch.company}}</text>
      <text>{{fetch.copyright}}</text>
    </view>
  </view>
</template>


<script>
	export default {
		data() {
			return {
				fetch: {},
			}
		},
		onShow() {
			this.loadData();
		},
		
		methods: {
			loadData() {
				this.DeverApi.get(this, 'version');
			},
			quit() {
				this.Dever.confirm('确认退出登录吗？', () => {
					this.Dever.setToken('');
					this.Dever.location('user/index', 'go');
				})
			},
			show() {
				this.Dever.alert('已是最新版');
				// 请求版本号
			},
			goLogin() {
				this.Dever.goLogin();
			},
		}
	}
</script>

<style>
	image {
	    width: 48px;
	    height: 48px;
	}
</style>