prevent_drowning_app/pages/mine/index.vue

<template>
  <view class="mine-container" :style="{height: `${windowHeight}px`}">
    <!--顶部个人信息栏-->
    <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
            点击登录
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title">
              用户名：{{ name }}
            </view>
          </view>
        </view>
        <view @click="handleToInfo" class="flex align-center">
          <text>个人信息</text>
          <view class="iconfont icon-right"></view>
        </view>
      </view>
    </view>

    <view class="content-section">
      <view class="mine-actions grid col-4 text-center">
        <view class="action-item" @click="handleJiaoLiuQun">
          <view class="iconfont icon-friendfill text-pink icon"></view>
          <text class="text">交流群</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-service text-blue icon"></view>
          <text class="text">在线客服</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-community text-mauve icon"></view>
          <text class="text">反馈社区</text>
        </view>
        <view class="action-item" @click="handleBuilding">
          <view class="iconfont icon-dianzan text-green icon"></view>
          <text class="text">点赞我们</text>
        </view>
      </view>

      <view class="menu-list">
        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
          <view class="menu-item-box">
            <view class="iconfont icon-user menu-icon"></view>
            <view>编辑资料</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleHelp">
          <view class="menu-item-box">
            <view class="iconfont icon-help menu-icon"></view>
            <view>常见问题</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleAbout">
          <view class="menu-item-box">
            <view class="iconfont icon-aixin menu-icon"></view>
            <view>关于我们</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleToSetting">
          <view class="menu-item-box">
            <view class="iconfont icon-setting menu-icon"></view>
            <view>应用设置</view>
          </view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
	import footers from '@/components/footer/footer.vue'
	import {findVersion} from "@/api/system/user.js"
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	const baseUrl = config.baseUrl
  export default {
    data() {
      return {
		footerindex: 'mine',
		isfootflag: true,
		wgtcode: this.$store.state.user.wgtcode,
		platform: 'Android',
        name: this.$store.state.user.name,
		nvaHeight:44,
      }
    },
	components: {footers},
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
	onLoad() {
		var that=this;
		this.nvaHeight=uni.getSystemInfoSync().statusBarHeight+44;
		// #ifdef APP-PLUS
		plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
			that.$store.dispatch('SetwgtFn', widgetInfo.version).then(() => {
				that.wgtcode=widgetInfo.version
			})
		});
		// #endif
	},
    methods: {
		checkPermi,checkRole,
      handleToInfo() {
        this.$tab.navigateTo('/pages/mine/info/index')
      },
      handleToEditInfo() {
        this.$tab.navigateTo('/pages/mine/info/edit')
      },
      handleToSetting() {
        this.$tab.navigateTo('/pages/mine/setting/index')
      },
      handleToLogin() {
        this.$tab.reLaunch('/pages/login')
      },
      handleToAvatar() {
        this.$tab.navigateTo('/pages/mine/avatar/index')
      },
      handleHelp() {
        this.$tab.navigateTo('/pages/mine/help/index')
      },
      handleAbout() {
        this.$tab.navigateTo('/pages/mine/about/index')
      },
      handleJiaoLiuQun() {
        this.$modal.showToast('QQ群：①133713780(满)、②146013835(满)、③189091635')
      },
      handleBuilding() {
        this.$modal.showToast('模块建设中~')
      },
	  onlineWgt() {
	  	let that = this;
	  	plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
	  		that.$store.dispatch('SetwgtFn', widgetInfo.version).then(() => {
	  			that.wgtcode=widgetInfo.version
	  		})
	  		that.comparisonVersionNo(widgetInfo.versionCode);
	  	});
	  	// that.comparisonVersionNo()
	  },
	  comparisonVersionNo(versionCode) {
	  	let that = this;
	  	// console.log("aaaaaaa===versionCode", versionCode);
	  	const parmas = {
	  		model: that.platform,
	  		appPort:that.appPort
	  	}
	  	findVersion(parmas).then(res => {
	  		if (res.code == "200") {
	  			let versionNos = res.data.code;
	  			console.log(versionNos, 'versionNos')
	  			// console.log(res.data.path);
	  			let filePath = res.data.path;
	  			if (Number(versionNos) > Number(versionCode)) { //服务器返回1更新，0则不更新
	  				uni.showModal({
	  					title: '提示',
	  					content: '发现新版本，是否升级',
	  					success: function(res) {
	  						// console.log(widgetInfo.version);
	  						if (res.confirm) {
	  							console.log('用户点击确定');
	  							that.getProperty(filePath);
	  						} else if (res.cancel) {
	  							console.log('用户点击取消');
	  						}
	  					}
	  				});
	  			} else {
	  				this.$toast('该版本已是最新版')
	  			}
	  		}
	  	}).catch(error => {
	  		uni.hideLoading()
	  		console.log(error)
	  	})
	  },
	  getProperty(getProperty) {
	  	// console.log("bbbbbbbbb----------->", getProperty)
	  	let that = this;
	  	// 在线升级app/热更新
	  	that.showwri = true;
	  	const downloadTask = uni.downloadFile({ //下载文件
	  		url: baseUrl + getProperty,
	  		success: (downloadResult) => {
	  			// console.log(downloadResult);
	  			if (downloadResult.statusCode == 200) {
	  				// 更新升级
	  				plus.runtime.install(downloadResult.tempFilePath, {
	  					force: true
	  				}, function() {
	  					// console.log('install success...');
	  					that.showwri = false;
	  					plus.nativeUI.alert("应用资源更新完成！", function() {
	  						plus.runtime.restart();
	  					});
	  				}, function(e) {
	  					that.showwri = false;
	  					plus.nativeUI.alert("更新失败，请稍后再试");
	  				});
	  			}
	  		}
	  	});
	  	downloadTask.onProgressUpdate((res) => { //下载文件的进度
	  		that.totalBytesWritten = res.totalBytesWritten; //当前下载大小
	  		that.progress = res.progress; //当前下载比例
	  		that.totalBytesExpectedToWrite = res.totalBytesExpectedToWrite; //
	  	});
	  },
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f6f7;
  }

  .mine-container {
    width: 100%;
    height: 100%;


    .header-section {
      padding: 15px 15px 45px 15px;
      background-color: #3c96f3;
      color: white;

      .login-tip {
        font-size: 18px;
        margin-left: 10px;
      }

      .cu-avatar {
        border: 2px solid #eaeaea;

        .icon {
          font-size: 40px;
        }
      }

      .user-info {
        margin-left: 15px;

        .u_title {
          font-size: 18px;
          line-height: 30px;
        }
      }
    }

    .content-section {
      position: relative;
      top: -50px;

      .mine-actions {
        margin: 15px 15px;
        padding: 20px 0px;
        border-radius: 8px;
        background-color: white;

        .action-item {
          .icon {
            font-size: 28px;
          }

          .text {
            display: block;
            font-size: 13px;
            margin: 8px 0px;
          }
        }
      }
    }
  }
</style>