hlm_pl_mall_h5/pages/member/favorite/FavoriteStore.vue

<template>
    <view class="div container">
            <view class="div store-wrapper" v-if="favorites_list && favorites_list.length">
                <view class="store-item"  v-for="(item, index) in favorites_list" v-bind:key="item.fav_id" @click="goNavigate('/pages/home/storedetail/Storedetail',{'id': item.store_id})">
					<view class="div p-img">
						<image mode="aspectFit" class="img collection-img" v-bind:src="item.store_avatar_url"/>
					</view>
                    <view class="div store_name">{{ item.store_name }}</view>
					<view class="div del-btn">
						<view class="iconfont">&#xe64d;</view>
						<view class="explain" @click.stop="delFavoriteStore($event,item.fav_id)">取消收藏</view>
					</view>
                </view>
            </view>
            <empty-record v-else-if="favorites_list && !favorites_list.length"></empty-record>
<uni-popup background-color="#fff" ref="confirm" type="dialog">
    <uni-popup-dialog :mode="dialog.mode" :title="dialog.title" :content="dialog.content" :placeholder="dialog.content" @confirm="confirmDialog" @close="closeDialog"></uni-popup-dialog>
</uni-popup>
    </view>
</template>
<script>
import { urlencode } from '@/util/common'
import EmptyRecord from '../../EmptyRecord'
import { getFavoriteStoreList, delFavoriteStore } from '../../../api/memberFavorite'
export default {
  components:{
    EmptyRecord
  },
  name: 'MemberFavoriteStore',
  data(){
    return {
	  rightOptions:[{text:'删除',style:{backgroundColor:'#dd524d'}}],
      dialog:{},
      favorites_list: false
    }
  },
  created: function () {
    this.getFavoriteStoreList()
  },

  methods:{
    closeDialog(){
    },
    confirmDialog(value){
		  this.getCancelCollection(this.dialog.data)
    },
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },
	delFavoriteStore (e,favId) {
	  this.dialog={content:'是否要取消收藏此机构？',title: '确认删除',data:favId}
		this.$refs.confirm.open()
	},
    // 取消收藏机构数据
    getCancelCollection (favId) {
      delFavoriteStore(favId).then(res => {
        if (res) {
          this.getFavoriteStoreList()
        }
      })
    },
    getFavoriteStoreList () {
      uni.showLoading({ title: '加载中' })
      getFavoriteStoreList(this.page, {}).then(res => {
        uni.hideLoading()
        this.favorites_list = res.result.favorites_list
      }).catch(function (error) {
        uni.hideLoading()
        uni.showToast({icon:'none',title:error.message})
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.store-wrapper{background: #fff;border-radius: .5rem;padding:0 $pageSpace 2rem;}
.store-wrapper .store-item{height:3rem;width:100%;padding: .8rem 0;border-bottom: 1px dashed #DBDADF;display: flex;align-items: center;}
.store-wrapper .store-item .p-img{padding:0.25rem 0;}
.store-wrapper .store-item .p-img .img{width:3rem;height:3rem;border-radius:.5rem}
.store-wrapper .store-item .store_name{color: #333;font-size: .8rem;margin-left: 1rem;width: 40%;overflow: hidden;white-space: nowrap}
.store-wrapper .store-item .del-btn{margin-left: auto;text-align: center;margin-right: 1rem;}
.store-wrapper .store-item .del-btn .iconfont{font-size: 1.4rem;color: $primaryColor;}
.store-wrapper .store-item .del-btn .explain{font-size: .7rem;color: #999;}
</style>