package_h5/src/pages/index/list.vue

<template>
  <view>
    <uni-nav-bar :title="title" leftIcon="left" @clickLeft="getBack" />
    <view class="title">Android安装包</view>
    <view class="list" v-for="item in form.android" :key="item.id" @click="getDetail(item)">
      <view class="left">
        <img :src="item.pic">
        <view class="main">
          <text>{{ item.name }}</text>
          <text>{{ item.updateTimeText }} 更新 | {{ item.version }}</text>
        </view>
      </view>
      <a :href="item.downUrl">安装</a>
    </view>
    <view class="title">IOS安装包</view>
    <view class="list" v-for="item in form.ios" :key="item.id" @click="getDetail(item)">
      <view class="left">
        <img :src="item.pic">
        <view class="main">
          <text>{{ item.name }}</text>
          <text>{{ item.updateTimeText }} 更新 | {{ item.version }}</text>
        </view>
      </view>
      <a :href="item.downUrl">安装</a>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      form: {}
    }
  },
  onLoad(e) {
    this.title = e.title
    uni.request({
      url: 'https://o3tapi.radio1964.com/device/project/update/group',
      method: 'get',
      data: {
        projectId: e.id
      },
      success: (res) => {
        this.form = res.data.data
      }
    });
  },
  methods: {
    getBack() {
      uni.redirectTo({
        url: `/pages/index/index`
      })
    },
    getDetail(item) {
      uni.navigateTo({
        url: `/pages/index/detail?id=${item.id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .uni-navbar__header-container {
  font-weight: bold;
}

::v-deep .uni-nav-bar-text {
  font-size: 32rpx;
}

.title {
  padding: 28rpx 20rpx;
  font-size: 28rpx;
}

.list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 20rpx;
  background: #fff;
  border-bottom: 2rpx solid #eee;

  .left {
    display: flex;

    img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 20rpx;
      margin-right: 20rpx;
    }

    .main {
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      text:first-child {
        font-size: 28rpx;
      }

      text:last-child {
        font-size: 22rpx;
      }
    }
  }

  a {
    margin: 0;
    background: none;
    border: 2rpx solid #f80;
    padding: 10rpx 30rpx;
    font-size: 24rpx;
    color: #f80;
    border-radius: 10rpx;
    text-decoration: none;
  }
}
</style>