package_h5/src/pages/index/detail.vue

<template>
  <view class="content">
    <view class="list" v-for="(item, index) in list" :key="item.id">
      <view class="item">
        <img :src="item.pic">
        <view class="main">
          <text style="fontSize: 28rpx">{{ item.name }}</text>
          <text style="fontSize: 22rpx;color:#aaa">{{ item.version }} | {{ item.size }}</text>
          <text style="fontSize: 22rpx;color:#aaa">{{ item.updateTimeText }}</text>
        </view>
      </view>
      <rich-text :nodes="item.updateContent"></rich-text>
      <a v-if="item.downUrl" :class="[index === 0 ? 'blue' : 'info']" :href="item.downUrl">安装</a>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  onLoad(e) {
    uni.request({
      url: `https://o3tapi.radio1964.com/device/project/update/list`,
      data: {
        id: e.id,
        pageNum: 1,
        pageSize: 100
      },
      method: 'get',
      success: (res) => {
        if (res.data.code === 0) {
          this.list = res.data.data.records
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.list {
  padding: 28rpx 20rpx;
  background: #fff;
  border-bottom: 2rpx solid #eee;

  .item {
    display: flex;
    margin-bottom: 20rpx;

    img {
      width: 100rpx;
      height: 100rpx;
      border: 1px solid #eee;
      border-radius: 20rpx;
      margin-right: 20rpx;
    }

    .main {
      display: flex;
      flex-direction: column;
    }
  }
}

a {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 25rpx 0;
  text-align: center;
  margin: 0;
  font-size: 28rpx;
  border-radius: 10rpx;
  text-decoration: none;
  margin-top: 20rpx;
}

.blue{
  background: #409EFF;
  color: #FFF
}

.info{
  background: #f4f4f4;
  color: #000;
}

::v-deep rich-text{
  color: #aaa;
  font-size: 22rpx;
}
</style>