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" v-for="order in state.pagination.data"
:key="order.id" :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"> <view class="border-bottom">
<s-goods-item <s-goods-item
:img="order.goods.image" :img="order.goods.image"
:title="order.goods.title" :title="order.goods.title"
:price="order.goods.price[0]" :price="order.goods.price[0]"
priceColor="#E1212B" priceColor="#E1212B"
radius="20"
> >
<template #groupon> <template #groupon>
<view class="ss-flex"> <view class="ss-flex">
@ -39,7 +54,8 @@
订单详情 订单详情
</button> </button>
<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 })" @tap="sheep.$router.go('/pages/activity/groupon/detail', { id: order.id })"
> >
{{ order.status === 'ing' ? '邀请拼团' : '拼团详情' }} {{ order.status === 'ing' ? '邀请拼团' : '拼团详情' }}
@ -200,19 +216,6 @@
</script> </script>
<style lang="scss" scoped> <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 { .swiper-box {
flex: 1; flex: 1;
@ -230,10 +233,6 @@
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
} }
.order-state {
color: var(--ui-BG-Main);
}
} }
.order-card-footer { .order-card-footer {
@ -249,6 +248,15 @@
color: #999999; color: #999999;
margin-right: 20rpx; 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 { .invite-btn {
width: 210rpx; width: 210rpx;
@ -278,4 +286,13 @@
font-weight: 400; font-weight: 400;
color: #999999; color: #999999;
} }
.warning-color {
color: #faad14;
}
.danger-color {
color: #ff3000;
}
.success-color {
color: #52c41a;
}
</style> </style>

View File

@ -1,5 +1,8 @@
<template> <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"> <view class="img-box ss-m-r-24">
<image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image> <image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
</view> </view>
@ -91,6 +94,10 @@
type: [String, Number], type: [String, Number],
default: '', default: '',
}, },
radius: {
type: [String],
default: '',
},
}); });
const skuString = computed(() => { const skuString = computed(() => {
if (!props.skuText) { if (!props.skuText) {