liedou_uniapp/components/horizontalGo...

<!-- 横向商品 -->
<template>
	<view class="goods-item-wrap" @click="onClickGoodsItem(goodInfo)">
	  <view class="lt-wrap">
	    <u-lazy-load class="goods-item-img" :image="goodInfo.img" img-mode="widthFix" border-radius="10" />
	  </view>
	  <view class="rt-wrap">
	    <view class="title">
			<image class="shop-icon" v-if="goodInfo.shop_type == 0" src="/static/imgs/icon-tb.png" />
			<image class="shop-icon" v-else-if="goodInfo.shop_type == 1" src="/static/imgs/icon-tmall.png" />
			<image class="shop-icon" v-else-if="goodInfo.shop_type == 4" src="/static/imgs/jd-icon.png" />
			<image class="shop-icon" v-else-if="goodInfo.shop_type == 6" src="/static/imgs/pdd-icon.png" />
			<image class="shop-icon" v-else-if="goodInfo.shop_type == 5" src="/static/imgs/icon-dy.png" />
			<text>{{ goodInfo.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="goodInfo.volume > 100 ? 'max-width: 260rpx' : ''">{{ goodInfo.shop_title }}</view>
			</view>
			<view class="salesVolume" v-if="goodInfo.volume > 100">
        销量{{ $NumberHandle({value:goodInfo.volume,comma:true}) }}+
			</view>
	    </view>
	    <view class="price-wrap">
	      <text class="price">{{ goodInfo.discount_price }}</text>
		  <text class="start-price">¥{{goodInfo.price }}</text>
	    </view>
	    <view class="btm-wrap">
			<view v-if="goodInfo.coupon_price > 0 && goodInfo.shop_type != 5" class="coupon-wrap">
			  <text class="label">券</text>
			  <text class="value">¥{{ goodInfo.coupon_price }}</text>
			</view>
			<view v-if="user_level > 1 && goodInfo.commission_price > 0" class="coupon-wrap commission-wrap">
			  <text class="label">返</text>
			  <text class="value">¥{{ goodInfo.commission_price }}</text>
			</view>
	    </view>
	  </view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name:"horizontalGood",
		props:{
			goodInfo:{
				type: Object
			},
			path:{
				type: String,
				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}) }catch(e){} ; // 数据上报
				if (goodsItem.shop_type == 4) { // 京东
					const { goods_id = ''} = goodsItem
					uni.navigateTo({
					  url: `/pages/subPackages/home/jdGoodsDetail?goods_id=${encodeURIComponent(goods_id)}`
					})
				} else if (goodsItem.shop_type == 6) { // 拼多多
					const { goods_id = ''} = goodsItem
					if(!goods_id){
						uni.showToast({ title: 'goods_id错误', icon: 'none' })
						return
					}
					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: 10rpx;
	}
	.flex-center{
		display: flex;
		align-items: center;
	}
	.flex-center-between{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
    .goods-item-wrap {
        padding: 28rpx;
        display: flex;
        align-items: center;
        background-color: #fff;
        .lt-wrap {
          width: 220rpx;
          height: 220rpx;
		  border-radius: 10rpx;
		  overflow: hidden;
          .goods-item-img {
            width: 100%;
            height: 100%;
            vertical-align: middle; // 解决图片下边框缝隙问题
          }
        }
        .rt-wrap {
          margin-left: 20rpx;
		  flex: 1;
          .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: 400rpx;
			  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;
			    margin-left: 12rpx;
			}
          }

        }
      }
</style>