<template> <view class="card" @tap="toGoods(goods.id?goods.id:goods.pid,goods.sk_id)" > <easy-loadimage mode="widthFix" :scroll-top="scrollTop" :image-src="goods.imgurl?goods.imgurl:goods.pic" :viewHeight="viewHeight"></easy-loadimage> <!-- <image mode="widthFix" :src="goods.imgurl?goods.imgurl:goods.pic" ></image> --> <view class="name">{{goods.name?goods.name:goods.p_name}}</view> <view class="info"> <view class="priceBox"> <view class="price">{{goods.old_price ? goods.old_price : (goods.rsSon && goods.rsSon.Min_Price)}}</view> <view class="originCost"> <!-- {{goods.price !== undefined?goods.price:goods.real_price}} --> {{goods.real_price ? goods.real_price : parseInt(goods.rsSon && goods.rsSon.Min_Price*(1 + Number(goods.rsSon.discount)/100))}} </view> </view> <view class="trade_num">{{goods.trade_num}}人购买</view> </view> </view> </template> <script> import easyLoadimage from '@/components/EasyLoadimage/EasyLoadimage.vue' // const MockData = require('@/static/easy-loadimage/mock-data.json') export default { components:{easyLoadimage}, props: { /** * 商品数据 */ goods: { id: Number, imgurl: String, name: String, rsSon: Object, originCost: String, price: String, trade_num: String, goodType: String, }, scrollTop:Number, viewHeight:Number, }, created () { }, data () { return { } }, methods: { toGoods (id, skId) { console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId) uni.navigateTo({ url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + skId, success: res => {}, fail: () => {}, complete: () => {}, }) }, }, } </script> <style lang="scss"> image { width: 100%; height: 120rpx; } .name { width: 92%; height: 54rpx; padding: 5px 4%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-align: justify; overflow: hidden; font-size: 26rpx; color: #333333; } .info { display: flex; justify-content: space-between; align-items: center; width: 92%; padding: 5px 4% 5px 4%; .priceBox { display: flex; justify-content: space-between; align-items: center; .price { color: #eb5d3b; font-size: 28rpx; font-weight: 600; margin-right: 10rpx; } .originCost { text-decoration: line-through; color: #999999; font-size: 20rpx; } } .trade_num { color: #999999; font-size: 20rpx; } } </style>