购物车，积分，订单详情

src/pages/mine/subs/integral/components/integral-item.vue

@@ -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>

src/pages/mine/subs/integral/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class='content'>
+    <view class='top-view c-flex-column'>
+      <text>2520</text>
+      <text>会员积分</text>
+    </view>
+    <text class='integral-detail-title'>积分明细</text>
+    <scroll-view style='margin: 10rpx 20rpx'>
+      <integral-item v-for='(item,index) in tradeList' :key='index' :item='item' />
+    </scroll-view>
+  </view>
+</template>
+
+<script lang='ts' setup>
+import IntegralItem from '@/pages/mine/subs/integral/components/integral-item.vue';
+
+const tradeList = ref([1, 2, 3, 4, 5]);
+</script>
+
+<style lang='scss' scoped>
+
+.top-view {
+  height: 195rpx;
+  background: linear-gradient(#F32B2B, #F95D5D);
+  align-items: center;
+  justify-content: center;
+
+  text:nth-of-type(1) {
+    font-weight: 400;
+    font-size: 50rpx;
+    color: #FFFFFF;
+  }
+
+  text:nth-of-type(2) {
+    font-weight: 400;
+    font-size: 26rpx;
+    color: #FFFFFF;
+    margin-top: 10rpx;
+  }
+}
+
+.integral-detail-title {
+  margin: 20rpx 24rpx;
+  font-weight: bold;
+  font-size: 30rpx;
+  color: #333333;
+  position: relative;
+}
+
+scroll-view{
+  width: auto;
+}
+</style>