hlm_pl_mall_h5/pages/member/favorite/FavoriteGoods.vue

<template>
	<view class="div container">
		<view class="div" v-if="favorites_list && favorites_list.length">
			<view class="div goods-item"  v-for="(item, index) in favorites_list" v-bind:key="item.fav_id" @click="goNavigate('/pages/home/goodsdetail/Goodsdetail',{'goods_id': item.goods_id})">
				<view class="goods-info">
					<view class="div p-img" :style="'width:'+windowWidth+'px;height:'+windowWidth+'px;flex:0 0 ' +windowWidth+'px'">
						<image mode="aspectFit" class="img collection-img" v-bind:src="item.goods_image_url"/>
					</view>
					<view class="div p-info">
						<view class="p-name">{{ item.goods_name }}</view>
						<view class="price-wrapper">
							<view class="p-price">￥{{ item.goods_price}}</view>
							<text class="p-del" @click.stop="delFavoriteGoods($event,item.fav_id)">取消收藏</text>
						</view>
					</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,getFontSize } from '@/util/common'
import EmptyRecord from '../../EmptyRecord'
import { getFavoriteGoodsList, delFavoriteGoods } from '../../../api/memberFavorite'
export default {
  components:{
    EmptyRecord
  },
  name: 'MemberFavoriteGoods',
  data(){
    return {
      dialog:{},
      favorites_list: false
    }
  },
  created: function () {
    this.getFavoriteGoodsList()
  },
	computed:{
	windowWidth: function () {
	  const res = uni.getSystemInfoSync()
	  var width=res.windowWidth
	  var size=getFontSize()
	  return (width-3*.6*size)/4
	},
	},
  methods:{
    closeDialog(){
    },
    confirmDialog(value){
		this.getCancelCollection(this.dialog.data)
    },
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },
	delFavoriteGoods (e,favId) {
	    this.dialog={content:'是否要取消收藏此商品？',title: '确认删除',data:favId}
		this.$refs.confirm.open()
	},
    // 取消收藏机构数据
    getCancelCollection (favId) {
      delFavoriteGoods(favId).then(res => {
        if (res) {
          this.getFavoriteGoodsList()
        }
      })
    },
    getFavoriteGoodsList () {
      uni.showLoading({ title: '加载中' })
      getFavoriteGoodsList(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>
	.goods-item{background: #fff;padding:.3rem $pageSpace;box-sizing: border-box;}
	.goods-item .goods-info{box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.06);display: flex;}
	.goods-item .goods-info .p-img{}
	.goods-item .goods-info .p-img .img{border-radius: .5rem;}
	.goods-item .goods-info .p-info{margin:0 .6rem;width: 60%;display: flex;flex-wrap: wrap;padding: .3rem 0;box-sizing: border-box;align-items: center;}
	.goods-item .goods-info .p-info .p-name{color: #333;width: 100%;font-size: .7rem; line-height: .8rem;height: 1.6rem;overflow: hidden;display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp: 2;box-sizing: border-box;}
	.goods-item .goods-info .p-info .price-wrapper{display: flex;align-items: end;width: 100%;}
	.goods-item .goods-info .p-info .price-wrapper .p-price{color: $primaryColor;}
	.goods-item .goods-info .p-info .price-wrapper .p-del{margin-left: auto;display: flex;font-size: .6rem;color: #fff;background: $primaryColor;padding: .2rem .3rem;border-radius: .5rem;}
</style>