fix:拼团页面添加订单号及状态展示,商品卡片添加圆角,按钮字段判断修改,s-goods-item组件添加圆角字段

pull/8/head
kele 2023-02-07 15:48:22 +08:00
parent 29131a3af7
commit 4dba142cbc
2 changed files with 43 additions and 19 deletions

View File

@ -16,12 +16,27 @@
v-for="order in state.pagination.data"
:key="order.id"
>
<view class="order-card-header ss-flex ss-col-center ss-row-between ss-p-x-20">
<view class="order-no">订单号{{ order.my.order.order_sn }}</view>
<view
class="ss-font-26"
:class="
order.status === 'ing'
? 'warning-color'
: order.status === 'invalid'
? 'danger-color'
: 'success-color'
"
>{{ order.status_text }}</view
>
</view>
<view class="border-bottom">
<s-goods-item
:img="order.goods.image"
:title="order.goods.title"
:price="order.goods.price[0]"
priceColor="#E1212B"
radius="20"
>
<template #groupon>
<view class="ss-flex">
@ -39,7 +54,8 @@
订单详情
</button>
<button
class="detail-btn ss-reset-button"
class="tool-btn ss-reset-button"
:class="{ 'ui-BG-Main-Gradient': order.status === 'ing' }"
@tap="sheep.$router.go('/pages/activity/groupon/detail', { id: order.id })"
>
{{ order.status === 'ing' ? '邀请拼团' : '拼团详情' }}
@ -200,19 +216,6 @@
</script>
<style lang="scss" scoped>
.tool-btn {
width: 160rpx;
height: 60rpx;
background: #f6f6f6;
font-size: 26rpx;
border-radius: 30rpx;
margin-right: 10rpx;
&:last-of-type {
margin-right: 0;
}
}
.swiper-box {
flex: 1;
@ -230,10 +233,6 @@
font-size: 26rpx;
font-weight: 500;
}
.order-state {
color: var(--ui-BG-Main);
}
}
.order-card-footer {
@ -249,6 +248,15 @@
color: #999999;
margin-right: 20rpx;
}
.tool-btn {
width: 210rpx;
height: 66rpx;
border-radius: 33rpx;
font-size: 26rpx;
font-weight: 400;
margin-right: 20rpx;
background: #f6f6f6;
}
.invite-btn {
width: 210rpx;
@ -278,4 +286,13 @@
font-weight: 400;
color: #999999;
}
.warning-color {
color: #faad14;
}
.danger-color {
color: #ff3000;
}
.success-color {
color: #52c41a;
}
</style>

View File

@ -1,5 +1,8 @@
<template>
<view class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white">
<view
class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
:style="[{ borderRadius: radius + 'rpx' }]"
>
<view class="img-box ss-m-r-24">
<image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
</view>
@ -91,6 +94,10 @@
type: [String, Number],
default: '',
},
radius: {
type: [String],
default: '',
},
});
const skuString = computed(() => {
if (!props.skuText) {