ohplay_h5/src/pages/channel/index.vue

<template>
  <div class='app-container'>
    <h1>猫王音响-添加电台</h1>
    <h1>请输入要添加的网络电台信息</h1>
    <div class="form" v-for="(item, index) in form" :key="index">
      <div>电台{{ index + 1 }}</div>
      <uni-icons v-show="index !== 0" class="close" type="closeempty" color="#FFF" size="18" @click="getClose(index)" />
      <input type="text" v-model="item.name" placeholder="请输入电台名称">
      <input type="text" v-model="item.url" placeholder="请输入链接地址">
    </div>
    <button v-show="form.length < 3" class="plus" @click="getAdd">+ 新增</button>
    <button class="submit" type="submit" circle @click="getSubmit">提交</button>
    <div class="list">
      <h2>已添加的电台</h2>
      <div class="item" v-for="item in list" :key="item.id">
        <div>{{ item.name }}</div>
        <div>{{ item.url }}</div>
        <uni-icons class="delete" type="more-filled" size="24" @click="getDelete(item)" />
      </div>
    </div>
  </div>
</template>

<script>
import { list, submit, remove } from "@/api/channel"
export default {
  data() {
    return {
      // 设备信息
      dev: {},
      // 列表表单
      listForm: {
        pageNum: 1,
        pageSize: 10
      },
      // 列表
      list: [],
      // 更多
      hasMore: false,
      // 表单
      form: [{
        name: "",
        url: ""
      }]
    }
  },
  onLoad(e) {
    this.dev = e
    this.getList()
  },
  methods: {
    // 列表
    getList() {
      list({ ...this.dev, ...this.listForm }).then(res => {
        if (res.data.code === 0) {
          res.data.data.records.map(i => this.list.push(i))
          this.hasMore = res.data.data.hasMore
        }
      })
    },

    // 添加
    getAdd() {
      this.form.push({
        name: "",
        url: ""
      })
    },

    // 关闭
    getClose(index) {
      this.form.splice(index, 1)
    },

    // 提交
    getSubmit() {
      var rules = false
      this.form.map(i => {
        if (i.name !== "" && i.url !== "") {
          i.deviceMac = this.dev.deviceMac
          i.deviceType = this.dev.deviceType
          i.sign = this.dev.sign
          rules = true
        }
      })
      if (rules) {
        submit(this.form).then(res => {
          if (res.data.code === 0) {
            this.list = []
            this.getList()
            this.form = [{
              name: "",
              url: ""
            }]
          }
        })
      } else {
        uni.showToast({
          title: '电台信息不能为空！',
          icon: 'none'
        })
      }
    },

    // 删除
    getDelete(item) {
      uni.showModal({
        title: '提示',
        content: `是否删除名称为${item.name}的电台?`,
        confirmColor: '#78B06A',
        success: (e) => {
          if (e.confirm) {
            remove({
              id: item.id,
              ...this.dev
            }).then(res => {
              if (res.data.code === 0) {
                this.list = []
                this.getList(this.dev)
              }
            })
          }
        }
      })
    }
  },
  onReachBottom() {
    if(this.hasMore) {
      this.listForm.pageNum++
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.plus {
  width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  margin: 0;
  font-weight: bold;
  background: none;
  color: #FFF;
  border: 1px solid #FFF;
}

h1 {
  font-size: 16px;
  line-height: 50px;
  text-align: center;
}

h2 {
  font-size: 16px;
  line-height: 50px;
}

.list {
  .item {
    border: 1px solid #FFF;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    position: relative;
    margin-bottom: 15px;
    background-color: #FFF;
    color: #000;

    .delete {
      position: absolute;
      right: 20px;
      transform: rotate(90deg);
    }
  }
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 8px 0;
  border: 1px solid #FFF;
  padding: 20px;
  border-radius: 8px;
  position: relative;

  uni-input {
    background-color: #FFF;
    color: #000;
  }

  .close {
    position: absolute;
    right: 10px;
    top: 10px;
  }
}

.submit {
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 10px;
}
</style>