弹出模块原型图

弹出模块原型图

弹出模块代码

<template>
  <div>
    <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
      <!-- 我的频道 -->
      <van-cell title="我的频道11">
        <template #default>
          <!-- <van-button type="danger" round plain size="mini" v-if="cross=== false" @click="cross=true">编辑</van-button>
                <van-button type="danger" round plain size="mini" v-else @click="cross=false">完成</van-button> -->
          <van-button
            type="danger"
            round
            plain
            size="mini"
            @click="cross = !cross"
            >{{ cross === false ? '编辑' : '完成' }}</van-button
          >
        </template>
      </van-cell>
      <van-grid>
        <van-grid-item
          class="itemf"
          v-for="(item, index) in channelList"
          :key="index"
        >
          <template #text>
            <span class="myword">{{ item.name }}</span
            ><van-icon v-if="cross" class="items" name="clear" />
          </template>
        </van-grid-item>
      </van-grid>
      <!-- 频道推荐 -->
      <van-cell title="频道推荐"></van-cell>
      <van-grid>
        <van-grid-item
          @click="addChannel(item)"
          v-for="(item, index) in tuijianChannel"
          :key="index"
          :text="item.name"
        />
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
import { apiGetAllChannel, processChannel } from '@/api/channel.js'
import { localSet } from '../../../../utils/mylocal'
export default {
  props: ['channelList'],
  data () {
    return {
      // 控制面板的显示与隐藏
      show: false,
      // 控制叉叉的显示与隐藏
      cross: false,
      allChannel: []
    }
  },
  methods: {
    async getAllChannel () {
      const res = await apiGetAllChannel()
      this.allChannel = res.data.data.channels
    },
    async addChannel (item) {
      // 添加额外属性
      this.$set(item, 'articleList', [])
      this.$set(item, 'loading', false)
      this.$set(item, 'finished', false)
      this.$set(item, 'isLoading', false)
      this.channelList.push(item)
      const token = this.$store.state.userInfo.token
      if (!token) {
        localSet(this.channelList, 'channels')
      } else {
        var newArr = this.channelList.slice(1).map((item, index) => {
          return {
            id: item.id,
            seq: index + 2
          }
        })
        await processChannel(newArr)
      }
    }
  },
  created () {
    // 得到所有的频道数据
    this.getAllChannel()
  },
  computed: {
    tuijianChannel () {
      const ids = this.channelList.map(item => {
        return item.id
      })
      const newArr = this.allChannel.filter(item => {
        return !ids.includes(item.id)
      })
      return newArr
    }
  }
}
</script>

<style lang="less" scoped>
.itemf {
  position: relative;
  .items {
    position: absolute;
    top: 0;
    right: 0;
    color: #666;
    font-size: 12px;
  }
  .myword {
    color: #646566;
    font-size: 12px;
  }
}
</style>