liedou_uniapp/components/verticalGood...

<!-- 纵向商品 -->
<template>
	<view class="goods-item-wrap" @click="onClickGoodsItem(goodsItem)">
	  <view class="tp-wrap">
	    <u-lazy-load class="goods-item-img" :image="goodsItem.img" img-mode="aspectFit" height="300" border-radius="10" />
	  </view>
	  <view class="bm-wrap">
		  <view class="title">
		  	<image class="shop-icon" v-if="goodsItem.shop_type == 0" src="/static/imgs/icon-tb.png" />
		  	<image class="shop-icon" v-else-if="goodsItem.shop_type == 1" src="/static/imgs/icon-tmall.png" />
		  	<image class="shop-icon" v-else-if="goodsItem.shop_type == 4" src="/static/imgs/jd-icon.png" />
        	<image class="shop-icon" v-else-if="goodsItem.shop_type == 6" src="/static/imgs/pdd-icon.png" />
		  	<image class="shop-icon" v-else-if="goodsItem.shop_type == 5" src="/static/imgs/icon-dy.png" />
		  	<text>{{ goodsItem.title }}</text>
		  </view>
	   <!-- <view class="shop-wrap">
	      <image class="shop-icon" v-if="goodsItem.shop_type == 0" src="/static/imgs/icon-tb.png" />
	      <image class="shop-icon" v-else-if="goodsItem.shop_type == 1" src="/static/imgs/icon-tmall.png" />
	      <text class="shop-name">{{ goodsItem.shop_title }}</text>
	    </view> -->
		<view class="shop-wrap flex-center-between">
			<view class="flex-center">
				<image class="shop-icon" src="/static/imgs/shop.png" />
				<view class="shop-name" :style="goodsItem.volume > 100 ? 'max-width: 100rpx' : ''">{{ goodsItem.shop_title }}</view>
			</view>
			<view class="salesVolume" v-if="goodsItem.volume > 100"  :style="{ width: goodsItem.shop_type == 5 ? '240rpx' : '' }">
				销量{{ $NumberHandle({value:goodsItem.volume,comma:true}) }}+
			</view>
		</view>
		<view class="price-wrap">
		  <text class="price">{{ goodsItem.discount_price }}</text>
		  <text class="start-price">¥{{goodsItem.price }}</text>
		</view>
	    <!-- <view class="price-wrap">
	      <text class="price">￥{{ goodsItem.discount_price }}</text>
					<text class="sales2">¥{{goodsItem.price }}</text>
	      <text class="sales">月销 {{ goodsItem.volume }}</text>
	    </view> -->
		<view class="btm-wrap">
			<view v-if="goodsItem.coupon_price > 0 && goodInfo.shop_type != 5" class="coupon-wrap">
			  <text class="label">券</text>
			  <text class="value">¥{{ goodsItem.coupon_price }}</text>
			</view>
			<view v-if="user_level > 1 && goodsItem.commission_price > 0" class="coupon-wrap commission-wrap" :style="goodsItem.coupon_price > 0 ? 'margin-left:12rpx' : ''">
			  <text class="label">返</text>
			  <text class="value">¥{{ goodsItem.commission_price }}</text>
			</view>
		</view>
	   <!-- <view class="footer-wrap">
	      <view v-if="user_level > 1 && goodsItem.commission_price > 0" class="commission-wrap">
	        <text>返 ￥{{ goodsItem.commission_price }}</text>
	      </view>
	      <view v-if="goodsItem.coupon_price > 0" class="coupon-wrap">
	        <text class="label">券</text>
	        <text class="value">{{ goodsItem.coupon_price }}元</text>
	      </view>
	    </view> -->
	  </view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name:"verticalGood",
		props:{
			goodsItem:{
				type: Object
			},
			path:{
				type: String,
				default: ''
			},
			category_id:{
				type: String | Number,
				default: ''
			}

		},
		data() {
			return {
				user_level: uni.getStorageSync('userInfo') ? uni.getStorageSync('userInfo').user_level : '', // 当前用户等级
			};
		},
		methods:{
			onClickGoodsItem(goodsItem) {
				try{ app.categoryNew_countBuy({shop_type: goodsItem.shop_type, type:0,path:this.path,category_id:this.category_id}) }catch(e){} ; // 数据上报
				if (goodsItem.shop_type == 4) { // 京东
					const { img = '', goods_id = '', coupon_price = '', discount_price = '', price = '', is_coupon = '', commission_rate = '', is_high_commission = '', coupon_end_time = '', coupon_start_time = ''} = goodsItem
					// 京东商品新增参数
					// volume = '', commission_price = '', shop = null,
					uni.navigateTo({
					  // url: `/pages/subPackages/home/jdGoodsDetail?img=${encodeURIComponent(img)}&goods_id=${encodeURIComponent(goods_id)}&coupon_price=${encodeURIComponent(coupon_price)}&discount_price=${encodeURIComponent(discount_price)}&price=${encodeURIComponent(price)}&is_coupon=${encodeURIComponent(is_coupon)}&commission_rate=${encodeURIComponent(commission_rate)}&is_high_commission=${encodeURIComponent(is_high_commission)}&coupon_end_time=${encodeURIComponent(coupon_end_time)}&coupon_start_time=${encodeURIComponent(coupon_start_time)}&volume=${encodeURIComponent(volume)}&commission_price=${encodeURIComponent(commission_price)}&shop=${shop ? encodeURIComponent(JSON.stringify(shop)) : ''}`
					  url: `/pages/subPackages/home/jdGoodsDetail?goods_id=${encodeURIComponent(goods_id)}`
					})
				}else if(goodsItem.shop_type == 6) { // 拼多多
          const { img = '', goods_id = '', coupon_price = '', discount_price = '', price = '', is_coupon = '', commission_rate = '', is_high_commission = '', coupon_end_time = '', coupon_start_time = '' } = goodsItem
          uni.navigateTo({
            url: `/pages/subPackages/pdd/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
          })
        }else if(goodsItem.shop_type == 5){ // 抖音
          const { goods_id = ''} = goodsItem
          uni.navigateTo({
            url: `/pages/subPackages/dy/goodsDetail?goods_id=${encodeURIComponent(goods_id)}`
          })
        }else {
					const { img = '', goods_id = '', coupon_price = '', discount_price = '', price = '', is_coupon = '', commission_rate = '', is_high_commission = '', coupon_end_time = '', coupon_start_time = '' } = goodsItem
					uni.navigateTo({
					  url: `/pages/subPackages/home/goodsDetail?img=${encodeURIComponent(img)}&goods_id=${encodeURIComponent(goods_id)}&coupon_price=${encodeURIComponent(coupon_price)}&discount_price=${encodeURIComponent(discount_price)}&price=${encodeURIComponent(price)}&is_coupon=${encodeURIComponent(is_coupon)}&commission_rate=${encodeURIComponent(commission_rate)}&is_high_commission=${encodeURIComponent(is_high_commission)}&coupon_end_time=${encodeURIComponent(coupon_end_time)}&coupon_start_time=${encodeURIComponent(coupon_start_time)}`
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.salesVolume{
		background: url('~@/static/imgs/huo-bg.png') no-repeat;
		background-size: 100%;
		width: 160rpx;
		line-height: 28rpx;
		color: #FF4040;
		font-size: 20rpx;
		line-height: 42rpx;
		text-align: center;
		padding-left: 16rpx;
	}
	.flex-center{
		display: flex;
		align-items: center;
	}
	.flex-center-between{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.goods-item-wrap {
        background-color: #fff;
        width: 340rpx;
		height: 586rpx;
		padding: 20rpx;
        border-radius: 12rpx;
        .tp-wrap {
          width: 300rpx;
          height: 300rpx;
		  overflow: hidden;
          .goods-item-img {
            width: 100%;
            height: 100%;
          }
        }
        .bm-wrap {
			margin-top: 12rpx;
          .title {
            font-size: 30rpx;
            color: #1A1A1A;
            line-height: 42rpx;
            // 超出两行省略号
            word-break: break-all;
            overflow: hidden;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            font-weight: bold;
            .shop-icon{
              width: 30rpx;
              height: 30rpx;
              border-radius: 6rpx;
              display: inline-block;
              margin-right: 6rpx;
              margin-top: -7rpx;
              vertical-align: middle;//解决图片下边框间隙问题
            }
          }
          .shop-wrap {
            margin-top: 8rpx;
            display: flex;
            align-items: center;
            .shop-icon {
              width: 26rpx;
              height: 26rpx;
              vertical-align: middle;//解决图片下边框间隙问题
            }
            .shop-name {
              margin-left: 6rpx;
              font-size: 24rpx;
              line-height: 34rpx;
              color: #AAAAAA;
              flex: 1;
              max-width: 240rpx;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
          .price-wrap {
            margin-top: 10rpx;
            display: flex;
            align-items: center;
            .price {
              font-size: 36rpx;
              line-height: 50rpx;
              color: #FF4040;
              font-weight: bold;
            }
            .start-price {
              margin-left: 10rpx;
              font-size: 24rpx;
              color: #999999;
              line-height: 34rpx;
              text-decoration: line-through;
            }
          }
          .btm-wrap {
            display: flex;
            align-items: center;
            margin-top: 10rpx;
            .coupon-wrap {
              display: flex;
              align-items: center;
              width: 144rpx;
              height: 36rpx;
              background-image: url("~@/static/imgs/bg-quan-small.png");
              background-repeat: no-repeat;
              background-size: 100% 100%;
              color: #FF4040;
              font-size: 25rpx;
          			  line-height: 36rpx;
              .label {
                width: 46rpx;
                text-align: center;
              }
              .value {
                flex: 1;
                text-align: center;
              }
            }
			.commission-wrap {
				background-image: url("~@/static/imgs/fan.png");
				color: #AE4300;

			}
	    }
	}
  }
</style>