📝 【TASK-20240808-02】TASK:兑换日志积分兑换静态页面完成

src/pages.json

@@ -279,6 +279,18 @@
 		"style": {
 			"navigationStyle": "custom"
 		}
+	},
+	{
+		"path": "pages/log/integral",
+		"style": {
+			"navigationStyle": "custom"
+		}
+	},
+	{
+		"path": "pages/log/exchange",
+		"style": {
+			"navigationStyle": "custom"
+		}
 	}
   ],
   "globalStyle": {

src/pages/integral/integral.vue

@@ -21,8 +21,8 @@
         <view class="classification">
           <image class="classification-image" src="../../static/img/vip_2.png"></image>
           <view class="log-menu">
-            <view class="menu-item">积分日志 &gt;</view>
-            <view class="menu-item">兑换日志 &gt;</view>
+            <view class="menu-item" @click="toLog(0)">积分日志 &gt;</view>
+            <view class="menu-item" @click="toLog(1)">兑换日志 &gt;</view>
           </view>
         </view>
       </view>
@@ -58,6 +58,12 @@ export default {
     return {
       navIndex: 0
     }
+  },
+  methods: {
+    toLog(val) {
+      const url = val === 1 ? '/pages/log/exchange' : '/pages/log/integral'
+      uni.navigateTo({ url })
+    }
   }
 }
 </script>

src/pages/log/exchange.vue

+<template>
+  <view>
+    <dHeader :title="'兑换日志'"></dHeader>
+    <view class="container">
+      <view class="item" v-for="item in 6" :key="item">
+        <div class="item-title">订单V值</div>
+        <div class="item-box">
+          <div class="box-img">
+            <image
+              class="imgs"
+              :src="item == 3 ? '../../static/img/log_type2.png' : '../../static/img/log_type1.png'"
+            ></image>
+          </div>
+          <div class="box-centent">
+            <div class="centent-text">
+              购买/充值满1000元即可赠送50积 分，满2000元送80积分不可看加满2000元送80积分
+            </div>
+            <div class="centent-time">2024-01-01 11:11:11</div>
+          </div>
+          <div class="box-right">
+            <view class="box-right-num">X1</view>
+            <view class="box-right-text">+50</view>
+          </div>
+        </div>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import dHeader from '../../components/dHeader/index.vue'
+export default {
+  components: {
+    dHeader
+  }
+}
+</script>
+
+<style lang="scss">
+page {
+  overflow: auto;
+  /* height: 100%; */
+  /* #ifdef H5 */
+  padding-top: 140upx;
+  /* #endif */
+  /* #ifdef APP-PLUS */
+  padding-top: calc(var(--status-bar-height) + 100upx);
+  /* #endif */
+  background-color: #edf2fa;
+}
+.container {
+  padding: 20upx;
+  box-sizing: border-box;
+  .item {
+    padding: 20upx 30upx 30upx 30upx;
+    margin-bottom: 20upx;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 16upx;
+    box-shadow: 0 2upx 12upx 0 rgba(0, 0, 0, 0.1);
+  }
+}
+.item-title {
+  font-size: 24upx;
+  margin-bottom: 20upx;
+}
+.item-box {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+}
+.box-img {
+  width: 100upx;
+  height: 120upx;
+  margin-right: 20upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .imgs {
+    width: 100upx;
+    height: 100upx;
+    object-fit: cover;
+  }
+}
+.box-centent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .centent-text {
+    font-size: 24upx;
+    color: #7f7f7f;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+  }
+  .centent-time {
+    font-size: 20upx;
+    color: #7f7f7f;
+  }
+}
+.box-right {
+  margin-left: 10upx;
+  width: 120upx;
+  height: 120upx;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 50%;
+  font-size: 24upx;
+  color: #333333;
+}
+.box-right-img {
+  transform: translate(20upx, -60upx);
+  width: 120upx;
+  height: 120upx;
+  image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>

src/pages/log/integral.vue

+<template>
+  <view>
+    <dHeader :title="'积分日志'"></dHeader>
+    <view class="container">
+      <view class="item" v-for="item in 6" :key="item">
+        <div class="item-title">订单V值</div>
+        <div class="item-box">
+          <div class="box-img">
+            <image
+              class="imgs"
+              :src="item == 3 ? '../../static/img/log_type2.png' : '../../static/img/log_type1.png'"
+            ></image>
+          </div>
+          <div class="box-centent">
+            <div class="centent-text">
+              购买/充值满1000元即可赠送50积 分，满2000元送80积分不可看加满2000元送80积分
+            </div>
+            <div class="centent-time">2024-01-01 11:11:11</div>
+          </div>
+          <div class="box-right">
+            <view class="box-right-num" v-if="item == 2">X1</view>
+            <view class="box-right-img" v-else>
+              <image src="../../static/img/overdue.png"></image>
+            </view>
+            <view class="box-right-text">+50</view>
+          </div>
+        </div>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import dHeader from '../../components/dHeader/index.vue'
+export default {
+  components: {
+    dHeader
+  }
+}
+</script>
+
+<style lang="scss">
+page {
+  overflow: auto;
+  /* height: 100%; */
+  /* #ifdef H5 */
+  padding-top: 140upx;
+  /* #endif */
+  /* #ifdef APP-PLUS */
+  padding-top: calc(var(--status-bar-height) + 100upx);
+  /* #endif */
+  background-color: #edf2fa;
+}
+.container {
+  padding: 20upx;
+  box-sizing: border-box;
+  .item {
+    padding: 20upx 30upx 30upx 30upx;
+    margin-bottom: 20upx;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 16upx;
+    box-shadow: 0 2upx 12upx 0 rgba(0, 0, 0, 0.1);
+  }
+}
+.item-title {
+  font-size: 24upx;
+  margin-bottom: 20upx;
+}
+.item-box {
+  width: 100%;
+  display: flex;
+  box-sizing: border-box;
+}
+.box-img {
+  width: 100upx;
+  height: 120upx;
+  margin-right: 20upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .imgs {
+    width: 100upx;
+    height: 100upx;
+    object-fit: cover;
+  }
+}
+.box-centent {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .centent-text {
+    font-size: 24upx;
+    color: #7f7f7f;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+  }
+  .centent-time {
+    font-size: 20upx;
+    color: #7f7f7f;
+  }
+}
+.box-right {
+  margin-left: 10upx;
+  width: 120upx;
+  height: 120upx;
+  display: flex;
+  align-items: flex-end;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 50%;
+  font-size: 24upx;
+  color: #333333;
+}
+.box-right-img {
+  transform: translate(20upx, -60upx);
+  width: 120upx;
+  height: 120upx;
+  image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>