|
@@ -0,0 +1,208 @@
|
|
|
+<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>
|