商品详情
This commit is contained in:
@@ -94,7 +94,7 @@ const serviceList = [
|
||||
{
|
||||
title: '消费记录',
|
||||
icon: assetsUrl('ic_member_service_record.png'),
|
||||
path: '/pages/mine/subs/trade/index'
|
||||
path: '/pages/mine/subs/trade/trade-list'
|
||||
},
|
||||
{
|
||||
title: '关注公众号',
|
||||
|
||||
@@ -1,13 +1,145 @@
|
||||
<template>
|
||||
<view class='card-view'>
|
||||
<view class='goods-info-view c-flex-row'>
|
||||
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
|
||||
<view class='c-flex-column' style='flex: 1;'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
|
||||
<text class='status'>未支付</text>
|
||||
</view>
|
||||
<view class='bottom-view c-flex-row'>
|
||||
<text>
|
||||
均色，120cm
|
||||
</text>
|
||||
<text>
|
||||
共1件
|
||||
</text>
|
||||
<text>23.20元</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='action-view c-flex-row'>
|
||||
<view class='countdown c-flex-row'>
|
||||
<image :src='assetsUrl("ic_time.png")' />
|
||||
<text class='primary-text-color'>支付剩余时间
|
||||
<text class='accent-text-color'>05:23</text>
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view class='c-flex-row'>
|
||||
<text class='secondary-text-color'>加入购物车</text>
|
||||
<text class='accent-text-color'>立即支付</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
|
||||
defineProps({
|
||||
item: Object
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.card-view {
|
||||
padding: 30rpx 20rpx 20rpx 30rpx;
|
||||
margin: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.goods-info-view {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
position: relative;
|
||||
|
||||
.goods-image {
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
-webkit-line-clamp: 2;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
color: #F32B2B;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.bottom-view {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
|
||||
text:nth-of-type(1) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
flex: 1;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
font-size: 24rpx;
|
||||
color: #333333;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(3) {
|
||||
font-size: 34rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-view {
|
||||
margin-top: 37rpx;
|
||||
|
||||
.countdown {
|
||||
flex: 1;
|
||||
|
||||
image {
|
||||
width: 37rpx;
|
||||
height: 37rpx;
|
||||
margin-right: 5rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
view:nth-of-type(2) {
|
||||
text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12rpx 28rpx;
|
||||
font-size: 26rpx;
|
||||
border-radius: 34rpx;
|
||||
}
|
||||
|
||||
text:nth-of-type(1) {
|
||||
border: 1rpx solid #ACACAC;
|
||||
}
|
||||
|
||||
text:nth-of-type(2) {
|
||||
border: 1rpx solid #F32B2B;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,9 +1,13 @@
|
||||
<template>
|
||||
<tabbar :titles="['全部', '进行中', '已结束']" @change='args => {}' />
|
||||
<order-item v-for='(item,index) in orderList' :key='index' :item='item' />
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
import OrderItem from '@/pages/mine/subs/order/components/order-item.vue';
|
||||
|
||||
const orderList = ref([1, 2, 4, 5]);
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
45
src/pages/mine/subs/trade/components/trade-item.vue
Normal file
45
src/pages/mine/subs/trade/components/trade-item.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<view class='card-view'>
|
||||
<text class='category-title'>2023-02-12</text>
|
||||
<view class='item c-flex-column' v-for='(item,index) in 3' :key='index'>
|
||||
<view class='c-flex-row'>
|
||||
<text class='primary-text-color' style='flex: 1'>消费</text>
|
||||
<text class='accent-text-color'>-30</text>
|
||||
</view>
|
||||
<view class='c-flex-row'>
|
||||
<text class='secondary-text-color' style='flex: 1'>2023-06-27 15:02:11</text>
|
||||
<text style='color: #999999'>会员余额：￥30.00</text>
|
||||
</view>
|
||||
<view class='divider' style='margin-top: 20rpx'/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
defineProps({
|
||||
item: Object
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.card-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16rpx 23rpx 20rpx 30rpx;
|
||||
margin: 20rpx 0;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin: 10rpx 0;
|
||||
|
||||
view:nth-of-type(2) {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +0,0 @@
|
||||
<template>
|
||||
<tabbar :titles='["全部","充值","消费"]' :item-active-color='"#D95554"' :indicator-color='"#D95554"'/>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
</style>
|
||||
52
src/pages/mine/subs/trade/trade-list.vue
Normal file
52
src/pages/mine/subs/trade/trade-list.vue
Normal file
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<tabbar :titles='["全部","充值","消费"]' :item-active-color='"#D95554"' :indicator-color='"#D95554"' />
|
||||
<view class='content'>
|
||||
<view class='c-flex-row'>
|
||||
<text>选择日期</text>
|
||||
<picker mode='date' @change='changeDate'>
|
||||
<view class='current-date c-flex-row'>
|
||||
<text>2024-02-10</text>
|
||||
<image :src='assetsUrl("ic_triangle_down.png")' />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<scroll-view :scroll-y='true'>
|
||||
<trade-item v-for='(item,index) in tradeList' :key='index' :item='item' />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang='ts' setup>
|
||||
import { assetsUrl } from '@/utils/assets';
|
||||
import TradeItem from '@/pages/mine/subs/trade/components/trade-item.vue';
|
||||
|
||||
const tradeList = ref([1, 2, 3, 4, 5]);
|
||||
|
||||
const changeDate = () => {
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
.content {
|
||||
padding: 20rpx 24rpx;
|
||||
}
|
||||
|
||||
.current-date {
|
||||
height: 50rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 5rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
padding: 0 20rpx;
|
||||
margin-left: 10rpx;
|
||||
|
||||
image {
|
||||
width: 19rpx;
|
||||
height: 11rpx;
|
||||
margin-left: 57rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user