登录调整整合
This commit is contained in:
		@@ -1,51 +1,137 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="AppCountryAlbum">
 | 
			
		||||
    <component v-if="refresh" :is="component" @change="onChange" :params="params"/>
 | 
			
		||||
    <div class="list">
 | 
			
		||||
      <AiTopFixed>
 | 
			
		||||
        <div class="area-content">
 | 
			
		||||
          <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">
 | 
			
		||||
            <img src="./img/local-icon.png" alt="">
 | 
			
		||||
            <span class="label" v-if="areaName">{{ areaName }}</span>
 | 
			
		||||
            <span v-else>请选择</span>
 | 
			
		||||
            <u-icon name="arrow-down" color="#666" size="24"/>
 | 
			
		||||
          </AiAreaPicker>
 | 
			
		||||
        </div>
 | 
			
		||||
      </AiTopFixed>
 | 
			
		||||
      <div class="album-list">
 | 
			
		||||
        <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
 | 
			
		||||
          <img :src="`${cdn}/dvcp/album/album${item.type}.png`" alt="">
 | 
			
		||||
          <p class="text">{{ item.name }}</p>
 | 
			
		||||
          <div class="tips">共{{ item.total }}张</div>
 | 
			
		||||
        </div>
 | 
			
		||||
        <AiEmpty v-if="!list.length"/>
 | 
			
		||||
      </div>
 | 
			
		||||
 | 
			
		||||
    </div>
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import Detail from './detail'
 | 
			
		||||
import List from './list'
 | 
			
		||||
import {mapState} from 'vuex'
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'AppCountryAlbum',
 | 
			
		||||
  appName: '乡村相册',
 | 
			
		||||
 | 
			
		||||
  name: "AppCountryAlbum",
 | 
			
		||||
  appName: "乡村相册",
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      component: 'List',
 | 
			
		||||
      params: {},
 | 
			
		||||
      refresh: true
 | 
			
		||||
      list: [],
 | 
			
		||||
      areaId: '',
 | 
			
		||||
      areaName: '',
 | 
			
		||||
      cdn: ''
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  components: {Detail, List},
 | 
			
		||||
  computed: {...mapState(['user'])},
 | 
			
		||||
  onShow() {
 | 
			
		||||
    document.title = "乡村相册"
 | 
			
		||||
    this.handleRefresh()
 | 
			
		||||
    this.areaId = this.user.areaId
 | 
			
		||||
    this.areaName = this.user.areaName
 | 
			
		||||
    this.getList()
 | 
			
		||||
    this.cdn = this.$cdn.replace("/dvcp/h5", "");
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    onChange(e) {
 | 
			
		||||
      this.params = e.params
 | 
			
		||||
      this.component = e.type
 | 
			
		||||
    areaSelect(e) {
 | 
			
		||||
      this.areaId = e
 | 
			
		||||
      this.getList()
 | 
			
		||||
    },
 | 
			
		||||
    handleRefresh() {
 | 
			
		||||
      this.refresh = false
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        this.refresh = true
 | 
			
		||||
    getList() {
 | 
			
		||||
      this.$http.post(`/app/appvillagepicturealbum/queryAlbumMenu`, null, {
 | 
			
		||||
        params: {
 | 
			
		||||
          areaId: this.areaId,
 | 
			
		||||
        }
 | 
			
		||||
      }).then(res => {
 | 
			
		||||
        if (res.code == 0) {
 | 
			
		||||
          this.list = res.data
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
    },
 | 
			
		||||
    toDetail(item) {
 | 
			
		||||
      uni.navigateTo({url: `./detail?type=${item.type}&areaId=${this.areaId}&title=${item.name}&titleImgUrl=${this.cdn}/dvcp/album/album${item.type}.png`})
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  onReachBottom() {
 | 
			
		||||
    this.current++;
 | 
			
		||||
    this.getList()
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
uni-page-body {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.AppCountryAlbum {
 | 
			
		||||
  height: 100%;
 | 
			
		||||
  .area-content {
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    line-height: 64px;
 | 
			
		||||
 | 
			
		||||
    img {
 | 
			
		||||
      width: 42px;
 | 
			
		||||
      vertical-align: middle;
 | 
			
		||||
      margin-right: 16px;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .u-icon {
 | 
			
		||||
      margin-left: 6px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  .album-list {
 | 
			
		||||
    padding: 32px 0 0 32px;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
 | 
			
		||||
    .item {
 | 
			
		||||
      width: calc(33% - 16px);
 | 
			
		||||
      height: 240px;
 | 
			
		||||
      border-radius: 8px;
 | 
			
		||||
      position: relative;
 | 
			
		||||
      margin: 0 16px 16px 0;
 | 
			
		||||
      float: left;
 | 
			
		||||
 | 
			
		||||
      img {
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        height: 100%;
 | 
			
		||||
        border-radius: 8px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .text {
 | 
			
		||||
        position: absolute;
 | 
			
		||||
        bottom: 16px;
 | 
			
		||||
        left: 0;
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        text-align: center;
 | 
			
		||||
        font-size: 32px;
 | 
			
		||||
        font-family: PingFangSC-Semibold, PingFang SC;
 | 
			
		||||
        font-weight: 600;
 | 
			
		||||
        color: #FFF;
 | 
			
		||||
        line-height: 44px;
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      .tips {
 | 
			
		||||
        position: absolute;
 | 
			
		||||
        top: 8px;
 | 
			
		||||
        right: 8px;
 | 
			
		||||
        padding: 0 8px;
 | 
			
		||||
        line-height: 40px;
 | 
			
		||||
        background-color: rgba(0, 0, 0, .6);
 | 
			
		||||
        color: #fff;
 | 
			
		||||
        border-radius: 8px;
 | 
			
		||||
        font-size: 22px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -40,7 +40,7 @@
 | 
			
		||||
      </div>
 | 
			
		||||
      <AiEmpty v-if="!list.length"/>
 | 
			
		||||
    </div>
 | 
			
		||||
    
 | 
			
		||||
 | 
			
		||||
    <div class="footer-btn" @click="uploadImg" v-if="editText == '编辑' ">上传图片</div>
 | 
			
		||||
    <div class="footer-btn" @click="delConfirm" v-if="editText == '取消'">删除</div>
 | 
			
		||||
  </div>
 | 
			
		||||
@@ -64,14 +64,12 @@ export default {
 | 
			
		||||
  computed: { ...mapState(['user']) },
 | 
			
		||||
  onLoad(option) {
 | 
			
		||||
    this.params = option
 | 
			
		||||
    console.log(this.params)
 | 
			
		||||
    this.getList()
 | 
			
		||||
    this.getStatistic()
 | 
			
		||||
  },
 | 
			
		||||
  onShow() {
 | 
			
		||||
    document.title = "乡村相册"
 | 
			
		||||
  },
 | 
			
		||||
 | 
			
		||||
  methods: {
 | 
			
		||||
    delConfirm() {
 | 
			
		||||
      if(!this.delIds.length) {
 | 
			
		||||
@@ -86,7 +84,6 @@ export default {
 | 
			
		||||
            this.getList()
 | 
			
		||||
            this.getStatistic()
 | 
			
		||||
            this.editClick('取消')
 | 
			
		||||
            uni.$emit('updateList')
 | 
			
		||||
          }
 | 
			
		||||
        })
 | 
			
		||||
      })
 | 
			
		||||
@@ -197,7 +194,6 @@ export default {
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    confirmUpload() {
 | 
			
		||||
      console.log(this.fileList)
 | 
			
		||||
      var urlList = []
 | 
			
		||||
      this.fileList.map((item) => {
 | 
			
		||||
        urlList.push(item.url)
 | 
			
		||||
@@ -211,7 +207,6 @@ export default {
 | 
			
		||||
          this.$u.toast('上传成功!')
 | 
			
		||||
          this.getList()
 | 
			
		||||
          this.getStatistic()
 | 
			
		||||
          uni.$emit('updateList')
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
@@ -343,7 +338,7 @@ export default {
 | 
			
		||||
    height: 112px;
 | 
			
		||||
    line-height: 112px;
 | 
			
		||||
    background: #3975C6;
 | 
			
		||||
    box-shadow: 0px 1px 0px 0px #EEEEEE;
 | 
			
		||||
    box-shadow: 0 1px 0 0 #EEEEEE;
 | 
			
		||||
    position: fixed;
 | 
			
		||||
    bottom: 0;
 | 
			
		||||
    left: 0;
 | 
			
		||||
@@ -354,4 +349,4 @@ export default {
 | 
			
		||||
    z-index: 999;
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
</style>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,129 +0,0 @@
 | 
			
		||||
<template>
 | 
			
		||||
  <div class="list">
 | 
			
		||||
    <AiTopFixed>
 | 
			
		||||
      <div class="area-content">
 | 
			
		||||
        <AiAreaPicker :areaId="user.areaId" v-model="areaId" @select="areaSelect" :name.sync="areaName">
 | 
			
		||||
          <img src="./img/local-icon.png" alt="">
 | 
			
		||||
          <span class="label" v-if="areaName">{{ areaName }}</span>
 | 
			
		||||
          <span v-else>请选择</span>
 | 
			
		||||
          <u-icon name="arrow-down" color="#666" size="24" />
 | 
			
		||||
        </AiAreaPicker>
 | 
			
		||||
      </div>
 | 
			
		||||
    </AiTopFixed>
 | 
			
		||||
    <div class="album-list">
 | 
			
		||||
      <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
 | 
			
		||||
        <img :src="`${cdn}/dvcp/album/album${item.type}.png`" alt="">
 | 
			
		||||
        <p class="text">{{item.name}}</p>
 | 
			
		||||
        <div class="tips">共{{item.total}}张</div>
 | 
			
		||||
      </div>
 | 
			
		||||
      <AiEmpty v-if="!list.length"/>
 | 
			
		||||
    </div>
 | 
			
		||||
 | 
			
		||||
  </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import { mapState } from 'vuex'
 | 
			
		||||
export default {
 | 
			
		||||
 | 
			
		||||
  data() {
 | 
			
		||||
    return {
 | 
			
		||||
      list: [],
 | 
			
		||||
      areaId: '',
 | 
			
		||||
      areaName: '',
 | 
			
		||||
      cdn: ''
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  computed: { ...mapState(['user']) },
 | 
			
		||||
  created() {
 | 
			
		||||
    this.areaId = this.user.areaId
 | 
			
		||||
    this.areaName = this.user.areaName
 | 
			
		||||
    this.getList()
 | 
			
		||||
    uni.$on('updateList', () => {
 | 
			
		||||
      this.getList()
 | 
			
		||||
    })
 | 
			
		||||
    this.cdn = this.$cdn.replace("/dvcp/h5","");
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    areaSelect(e) {
 | 
			
		||||
      this.areaId = e
 | 
			
		||||
      this.getList()
 | 
			
		||||
    },
 | 
			
		||||
    getList() {
 | 
			
		||||
      this.$http.post(`/app/appvillagepicturealbum/queryAlbumMenu`, null, {
 | 
			
		||||
        params: {
 | 
			
		||||
          areaId: this.areaId,
 | 
			
		||||
        }
 | 
			
		||||
      }).then(res => {
 | 
			
		||||
        if (res.code == 0) {
 | 
			
		||||
          this.list = res.data
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    toDetail(item) {
 | 
			
		||||
      uni.navigateTo({url: `./detail?type=${item.type}&areaId=${this.areaId}&title=${item.name}&titleImgUrl=${this.cdn}/dvcp/album/album${item.type}.png`})
 | 
			
		||||
    },
 | 
			
		||||
  },
 | 
			
		||||
  onReachBottom() {
 | 
			
		||||
    this.current++;
 | 
			
		||||
    this.getList()
 | 
			
		||||
  },
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.list {
 | 
			
		||||
  .area-content{
 | 
			
		||||
    width: 100%;
 | 
			
		||||
    line-height: 64px;
 | 
			
		||||
    img{
 | 
			
		||||
      width: 42px;
 | 
			
		||||
      vertical-align: middle;
 | 
			
		||||
      margin-right: 16px;
 | 
			
		||||
    }
 | 
			
		||||
    .u-icon{
 | 
			
		||||
      margin-left: 6px;
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
  .album-list{
 | 
			
		||||
    padding: 32px 0 0 32px;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    .item{
 | 
			
		||||
      width: calc(33% - 16px);
 | 
			
		||||
      height: 240px;
 | 
			
		||||
      border-radius: 8px;
 | 
			
		||||
      position: relative;
 | 
			
		||||
      margin: 0 16px 16px 0;
 | 
			
		||||
      float: left;
 | 
			
		||||
      img{
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        height: 100%;
 | 
			
		||||
        border-radius: 8px;
 | 
			
		||||
      }
 | 
			
		||||
      .text{
 | 
			
		||||
        position: absolute;
 | 
			
		||||
        bottom: 16px;
 | 
			
		||||
        left: 0;
 | 
			
		||||
        width: 100%;
 | 
			
		||||
        text-align: center;
 | 
			
		||||
        font-size: 32px;
 | 
			
		||||
        font-family: PingFangSC-Semibold, PingFang SC;
 | 
			
		||||
        font-weight: 600;
 | 
			
		||||
        color: #FFF;
 | 
			
		||||
        line-height: 44px;
 | 
			
		||||
      }
 | 
			
		||||
      .tips{
 | 
			
		||||
        position: absolute;
 | 
			
		||||
        top: 8px;
 | 
			
		||||
        right: 8px;
 | 
			
		||||
        padding: 0 8px;
 | 
			
		||||
        line-height: 40px;
 | 
			
		||||
        background-color: rgba(0,0,0,.6);
 | 
			
		||||
        color: #fff;
 | 
			
		||||
        border-radius: 8px;
 | 
			
		||||
        font-size: 22px;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
		Reference in New Issue
	
	Block a user