211 lines
6.2 KiB
Vue
211 lines
6.2 KiB
Vue
<template>
|
||
<view class="order-goods">
|
||
|
||
<view v-for="(item, index) in list" :key="index" class="item-wrap">
|
||
<view class="item flex" @click="jumpGoods(item)">
|
||
<view class="goods-img">
|
||
<u-image width="180rpx" border-radius="10rpx" height="180rpx" lazy-load
|
||
:src="item.image_str || item.image"></u-image>
|
||
</view>
|
||
<view class="goods-info m-l-20 flex-1">
|
||
<view class="goods-name line-2 m-b-10">
|
||
<u-tag class="m-r-10" v-if="item.people_num" :text="item.people_num + '人团'" size="mini"
|
||
type="primary" mode="plain" />
|
||
{{item.goods_name || item.name}}
|
||
</view>
|
||
<view class="goods-spec xs muted m-b-20">{{item.spec_value || item.spec_value_str}}</view>
|
||
<view class="flex row-between">
|
||
<view class="goods-price ">
|
||
<view class="primary flex">
|
||
<!-- 集采、代发、批发 -->
|
||
<price-format weight="500"
|
||
v-if="!item.is_seckill && item.p_id && item.p_id > 0 && item.price_type != 'jicai_wholesale'"
|
||
:subscript-size="24" :first-size="32" :second-size="24" :price="item.w_price" />
|
||
<view v-if="(!item.p_id || item.p_id == 0) && item.price_type != 'jicai_wholesale'">
|
||
<!-- 非秒杀商品的时候（普通商品和其他商品都是显示的这个 -->
|
||
<price-format weight="500" v-if="!item.is_seckill" :subscript-size="24"
|
||
:first-size="32" :second-size="24" :price="item.price || item.goods_price" />
|
||
<!-- 秒杀商品时（因为秒杀的时候price价格是以及优惠过的价格了，所以这里显示原价需要用original_price，而秒杀价格标签则用在了下面的price -->
|
||
<price-format weight="500" v-else :subscript-size="24" :first-size="32"
|
||
:second-size="24" :price="item.original_price || item.goods_price" />
|
||
</view>
|
||
|
||
<!-- 会员价删除,git找回 -->
|
||
|
||
<!-- 集采会员批发价 -->
|
||
<view class="flex" v-if="item.price_type == 'jicai_wholesale'">
|
||
<price-format weight="500" :subscript-size="24" :first-size="32" :second-size="24"
|
||
:price="item.w_price" />
|
||
</view>
|
||
<!-- 拼团价格 -->
|
||
<view class="vip-price flex" v-if="item.team_price">
|
||
<view class="price-name xxs">拼团价</view>
|
||
<view style="padding: 0 10rpx">
|
||
<price-format :price="item.team_price" :first-size="22" :second-size="22"
|
||
:subscript-size="22" :weight="500" color="#7B3200" />
|
||
</view>
|
||
</view>
|
||
<!-- 秒杀价格 -->
|
||
<view class="vip-price flex" v-if="item.is_seckill">
|
||
<view class="price-name xxs">秒杀价</view>
|
||
<view style="padding: 0 10rpx">
|
||
<price-format :price="item.price" :first-size="22" :second-size="22"
|
||
:subscript-size="22" :weight="500" color="#7B3200" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="goods-num sm">x{{item.num || item.goods_num || item.count}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex footer-block">
|
||
<view class="goods-footer flex p-r-0" v-if="orderStatus == 2 || orderStatus == 3">
|
||
<view class="flex-1"></view>
|
||
<router-link
|
||
:to="{path: bundle + 'goods_logistics/goods_logistics', query: {id: delivery[index].id && delivery[index].id || 0}}">
|
||
<button size="sm" class="btn plain br60 lighter" hover-class="none">查看物流</button>
|
||
</router-link>
|
||
</view>
|
||
<view class="goods-footer flex p-r-0" v-if="link && item.comment_btn || item.refund_btn">
|
||
<view class="flex-1"></view>
|
||
<router-link v-if="item.comment_btn"
|
||
:to="{path: bundle + 'goods_reviews/goods_reviews', query:{id: item.id}}">
|
||
<button size="xs" class="plain br60" hover-class="none">
|
||
评价晒图
|
||
</button>
|
||
</router-link>
|
||
</view>
|
||
<view class="goods-footer flex">
|
||
<view class="flex-1"></view>
|
||
<router-link v-if="(orderStatus == 3) && !item.p_id && !item.after_sale_id"
|
||
:to="{path: bundle + 'apply_refund/apply_refund', query:{id: item.id, order_id: item.order_id, item_id: item.item_id}}">
|
||
<button size="xs" class="plain br60" hover-class="none">
|
||
申请退款
|
||
</button>
|
||
</router-link>
|
||
<router-link v-if="(orderStatus == 3) && !item.p_id && item.after_sale_id"
|
||
:to="{path: bundle + 'after_sales_detail/after_sales_detail', query:{id: item.after_sale_id}}">
|
||
<button size="xs" class="plain br60" hover-class="none">
|
||
已申请退款
|
||
</button>
|
||
</router-link>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
mapGetters,
|
||
mapActions
|
||
} from 'vuex'
|
||
export default {
|
||
props: {
|
||
list: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
link: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
isJumpGoods: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
totalAmount: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
orderStatus: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
delivery: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
bundle: '/bundle/pages/'
|
||
};
|
||
},
|
||
methods: {
|
||
...mapActions(['getUser']),
|
||
jumpGoods(item) {
|
||
if (!this.isJumpGoods) return
|
||
this.$Router.push({
|
||
path: '/pages/goods_details/goods_details?id=',
|
||
query: {
|
||
id: item.goods_id
|
||
}
|
||
})
|
||
}
|
||
},
|
||
computed: {
|
||
...mapGetters(["userInfo"]),
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.order-goods {
|
||
|
||
.item {
|
||
padding: 20rpx 24rpx;
|
||
|
||
.vip-price {
|
||
margin: 0 10rpx;
|
||
background-color: #FFE9BA;
|
||
line-height: 30rpx;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
|
||
.price-name {
|
||
background-color: #101010;
|
||
padding: 3rpx 10rpx;
|
||
color: #FFD4B7;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
&::after {
|
||
content: '';
|
||
display: block;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
position: absolute;
|
||
right: -15rpx;
|
||
background-color: #FFE9BA;
|
||
border-radius: 50%;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
box-sizing: border-box;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.goods-footer {
|
||
height: 70rpx;
|
||
align-items: flex-start;
|
||
padding: 0 24rpx;
|
||
|
||
.plain {
|
||
border: 1px solid #999;
|
||
height: 52rpx;
|
||
line-height: 52rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
}
|
||
|
||
.p-r-0 {
|
||
padding-right: 0;
|
||
}
|
||
|
||
.footer-block {
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
</style> |