123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251 |
- <!-- 商品组件:横向展示,一行一个,商品列表页面
- 点击进入商品详情页
- 加入购物车事件
- -->
- <template name="goodsCollectItemH">
- <view class="goods_h_item flex_row_start_start" @click="goGoodsDetail(goods_info)">
- <view class="goods-img" :style="{backgroundImage: 'url('+goods_info.goodsImage+')'}"></view>
- <view class="right flex_column_between_start">
- <view class="top flex_column_start_start" style="width: 100%;">
- <view class="goods-name">
- <rich-text :nodes="goods_info.goodsName"></rich-text>
- </view>
- <text class="goods-brief">{{goods_info.goodsBrief}}</text>
- </view>
- <view class="activity_con" v-if="goods_info.activityList&&goods_info.activityList.length>0">
- <block v-for="(item,index) in goods_info.activityList">
- <view class="act_label ladder_group" v-if="item.promotionType==105">
- {{item.promotionName}}
- </view>
- <view class="act_label discounts" v-if="item.promotionType==201||item.promotionType==202||item.promotionType==203||item.promotionType==204">
- {{item.promotionName}}
- </view>
-
- <view class="act_label secKill" v-if="item.promotionType==104">
- {{item.promotionName}}
- </view>
-
- <view class="act_label preSale" v-if="item.promotionType==103">
- {{item.promotionName}}
- </view>
-
- <view class="act_label spellGroup" v-if="item.promotionType==102">
- {{item.promotionName}}
- </view>
- </block>
-
- </view>
- <view class="goods-price flex_row_start_center">
- <view class="left flex_row_start_center">
- <view class="left_price flex_row_start_end">
- <text class="unit">¥</text>
- <text class="price_int">{{this.$getPartNumber(goods_info.goodsPrice,'int')}}</text>
- <text class="price_decimal">{{this.$getPartNumber(goods_info.goodsPrice,'decimal')}}</text>
- </view>
- <text class="sales">{{$formatW(goods_info.saleNum)}}人付款</text>
- </view>
- </view>
- <view class="store_enter" @click.stop="goStoreDetail(goods_info.storeId)">
- <text class="stroe_name">{{goods_info.storeName}}</text>
- <text class="store_enter_btn">进店</text>
- <image class="store_enter_image" :src="imgUrl+'/good_search/enter_store.png'" mode=""></image>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- name: "goodsCollectItemH",
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl
- }
- },
- props: {
- goods_info: {
- type: Object,
- value: {}
- }
- },
- created() {
- },
- methods: {
- //跳转店铺详情页面
- goStoreDetail(vid) {
- uni.navigateTo({
- url: '/pages/store/shopHomePage?vid=' + vid
- })
- },
- //进入商品详情页
- goGoodsDetail(goods_info) {
- uni.navigateTo({
- url: '/pages/product/detail?productId=' + goods_info.defaultProductId + '&goodsId=' + goods_info.goodsId
- })
- },
- }
- }
- </script>
- <style lang='scss'>
- .goods_h_item {
- width: 100%;
- background: #fff;
- padding:20rpx;
- overflow: hidden;
- background: #fff;
- border-top: 1rpx solid #f5f5f5;
- /* &:first-child {
- padding-top: 20rpx;
- } */
- .goods-img {
- background-size: cover;
- background-position: center center;
- background-repeat: no-repeat;
- width: 290rpx;
- height: 290rpx;
- overflow: hidden;
- border-radius: 10rpx;
- background-color: #F8F6F7;
- flex-shrink: 0;
- }
- .right {
- height: 290rpx;
- padding: 10rpx 0 0rpx;
- width: 420rpx;
- .top {
- padding-left: 20rpx;
- }
- }
- .goods-name {
- font-size: 30rpx;
- color: $com-main-font-color;
- line-height: 38rpx;
- height: 76rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- word-break: break-word;
- }
- .goods-brief {
- color: $main-third-color;
- font-size: 24rpx;
- margin-top: 10rpx;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 100%;
- }
- .goods-price {
- padding: 0 20rpx;
- width: 100%;
- margin-top: 15rpx;
- .left {
- color: $main-color;
- .left_price {
- align-items: baseline;
- }
- .unit,
- .price_decimal {
- font-size: 24rpx;
- }
- .price_int {
- font-size: 34rpx;
- }
- .sales {
- color: $main-third-color;
- font-size: 22rpx;
- margin-left: 26rpx;
- margin-top: 2rpx;
- }
- }
- image {
- width: 42rpx;
- height: 42rpx;
- }
- }
- }
- .activity_con {
- display: flex;
- font-size: 22rpx;
- color: #ffffff;
- padding-left: 20rpx;
-
- .act_label{
- height: 32rpx;
- border-radius: 15rpx;
- line-height: 32rpx;
- padding: 0 10rpx;
- margin-left: 10rpx;
- }
-
- .ladder_group{
- background: linear-gradient(22deg, #FE901E 0%, #FEAD28 100%);
- }
- .discounts {
- background: linear-gradient(17deg, #AB32CC 0%, #D20FA6 100%);
- }
-
- .secKill{
- background: linear-gradient(to right, #fc5300, #ff1353);
- }
-
- .preSale{
- background: linear-gradient(to right, #a62fcd, #ff006c);
- }
- .act_label:nth-child(1) {
- margin-left: 0rpx;
- }
-
- .spellGroup{
- background: linear-gradient(to right, #ff6000, #ff9c00);
- }
-
- }
- .store_enter {
- display: flex;
- font-size: 24rpx;
- align-items: center;
- padding-left: 20rpx;
- }
- .stroe_name {
- max-width: 200rpx;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- color: #666666;
- }
- .store_enter_btn {
- color: #333333;
- font-weight: bold;
- margin-left: 10rpx;
- }
- .store_enter_image {
- width: 11rpx;
- height: 19rpx;
- margin-left: 10rpx;
- }
- </style>
|