📝 【TASK-20240809-02】TASK:APP兑换详情静态页面完成

src/pages.json

@@ -297,6 +297,12 @@
       "style": {
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/exchange_detail/exchange_detail",
+      "style": {
+        "navigationStyle": "custom"
+      }
     }
   ],
   "globalStyle": {

src/pages/exchange_detail/exchange_detail.vue

+<template>
+  <view class="exchange_detail">
+    <dHeader :title="'兑换详情'"></dHeader>
+    <div class="container">
+      <div class="header">
+        <div class="header-image">
+          <image class="img" src="../../static/img/exchange.png"></image>
+        </div>
+        <div class="header-content">
+          <div class="header-content-title">兑换完成</div>
+          <div class="header-content-text">
+            <view class="header-content-small">共计</view>90积分
+          </div>
+        </div>
+      </div>
+      <div class="nav">
+        <div class="nav-image">
+          <image class="img" src="../../static/img/exchange.png"></image>
+        </div>
+        <div class="nav-content">
+          <div class="nav-content-text">小米官旗米家体脂秤S400智能精准减肥电子称</div>
+          <div class="nav-content-tag">
+            <div class="tag-image">
+              <image class="img" src="../../static/img/score_b.png"></image>10
+            </div>
+            <view class="tag-text">共9件</view>
+          </div>
+        </div>
+      </div>
+      <div class="main">
+        <div class="main-cell">
+          <div class="cell-label">活动时间</div>
+          <div class="cell-content">2023-10-1至2024-11-01</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">活动网点</div>
+          <div class="cell-content">中国大连中央大道店黄河路50号</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">兑换方式</div>
+          <div class="cell-content">邮寄到家</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">兑换方式</div>
+          <div class="cell-content">邮寄到家</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">收货地址</div>
+          <div class="cell-content">
+            孟佳程，+23583273669137中国 大连 中央大道黄河路50号
+            <view class="red">地址提交后无法修改，如需修改地址请联系客服</view>
+          </div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">快递单号</div>
+          <div class="cell-content">SFSF88997261500218</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">快递公司</div>
+          <div class="cell-content">顺丰快递</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">快递日期</div>
+          <div class="cell-content">2024-01-01</div>
+        </div>
+        <div class="main-cell">
+          <div class="cell-label">备注</div>
+          <div class="cell-content">请尽快发货</div>
+        </div>
+      </div>
+    </div>
+  </view>
+</template>
+
+<script>
+import dHeader from '../../components/dHeader/index.vue'
+export default {
+  components: {
+    dHeader
+  }
+}
+</script>
+
+<style lang="scss">
+page {
+  /* #ifdef H5 */
+  padding-top: 140upx;
+  /* #endif */
+  /* #ifdef APP-PLUS */
+  padding-top: calc(var(--status-bar-height) + 100upx);
+  /* #endif */
+
+  box-sizing: border-box;
+  height: 100%;
+  background: linear-gradient(#317beb, #d3e5fe);
+}
+.exchange_detail {
+  padding: 50upx 40upx;
+  height: inherit;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-top-right-radius: 20upx;
+  border-top-left-radius: 20upx;
+  background: linear-gradient(#fff, #d3e5fe);
+}
+.header {
+  display: flex;
+  box-sizing: border-box;
+  .header-image {
+    width: 90upx;
+    height: 90upx;
+    .img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .header-content {
+    margin-left: 20upx;
+    display: flex;
+    height: inherit;
+    flex-direction: column;
+    justify-content: space-between;
+    .header-content-title {
+      font-size: 26upx;
+      color: #333;
+    }
+    .header-content-text {
+      display: flex;
+      align-items: end;
+      font-size: 24upx;
+      color: #666;
+
+      .header-content-small {
+        margin-right: 10upx;
+        font-size: 20upx;
+        color: #999;
+      }
+    }
+  }
+}
+.nav {
+  margin-top: 60upx;
+  width: 100%;
+  display: flex;
+  .nav-image {
+    width: 140upx;
+    height: 140upx;
+    .img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+  .nav-content {
+    flex: 1;
+    margin-left: 20upx;
+    display: flex;
+    height: inherit;
+    flex-direction: column;
+    .nav-content-text {
+      width: 70%;
+      font-size: 24upx;
+      color: var(--cb7b);
+    }
+    .nav-content-tag {
+      width: 100%;
+      margin-top: 20upx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .tag-image {
+        display: flex;
+        align-items: center;
+        .img {
+          width: 32upx;
+          height: 32upx;
+          object-fit: cover;
+        }
+      }
+      .tag-text {
+        font-size: 24upx;
+        color: #666;
+      }
+    }
+  }
+}
+.main {
+  margin-top: 60upx;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .main-cell {
+    margin-top: 20upx;
+    width: 100%;
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    .cell-label {
+      width: 30%;
+      font-size: 24upx;
+      color: #333;
+    }
+    .cell-content {
+      text-align: right;
+      width: 70%;
+      font-size: 24upx;
+      color: var(--cb7b);
+      .red {
+        color: red;
+        font-size: 16upx;
+      }
+    }
+  }
+}
+</style>

src/pages/log/exchange.vue

@@ -2,7 +2,7 @@
   <view>
     <dHeader :title="'兑换日志'"></dHeader>
     <view class="container">
-      <view class="item" v-for="item in 6" :key="item">
+      <view class="item" v-for="item in 6" :key="item" @click="toDetail">
         <div class="item-title">订单V值</div>
         <div class="item-box">
           <div class="box-img">
@@ -32,6 +32,13 @@ import dHeader from '../../components/dHeader/index.vue'
 export default {
   components: {
     dHeader
+  },
+  methods: {
+    toDetail() {
+      uni.navigateTo({
+        url: '/pages/exchange_detail/exchange_detail'
+      })
+    }
   }
 }
 </script>

src/pages/order_mail/order_mail.vue

@@ -9,7 +9,7 @@
           </text>
         </view>
       </view>
-      <view class="address">
+      <!-- <view class="address">
         <view class="address-image">
           <image class="img" src="../../static/img/site_address.png"></image>
         </view>
@@ -25,34 +25,44 @@
         <view class="address-icon">
           <uni-icons type="right" color="#B7B7B7" size="20"></uni-icons>
         </view>
+      </view> -->
+      <view class="address">
+        <view class="address-image">
+          <image class="img" src="../../static/img/site_address.png"></image>
         </view>
-      <div class="main">
-        <div class="main-gift">
-          <div class="gift">
-            <div class="gift-image">
+        <view class="address-content address-content2">
+          <view class="content-text">
+            美国蒙大拿州中山路朱诺小区911号楼4单元朱诺小区911号楼4单元401
+          </view>
+        </view>
+      </view>
+      <view class="main">
+        <view class="main-gift">
+          <view class="gift">
+            <view class="gift-image">
               <image class="img" src="../../static/img/site_address.png"></image>
-            </div>
-            <div class="gift-content">
-              <div class="gift-content-text">小米官旗米家体脂秤S400智能精准减肥电子称</div>
-              <div class="gift-cell">
-                <div class="cell-label">兑换方式</div>
-                <div class="cell-text">上门领取/包邮到家/邮寄到付</div>
-              </div>
-              <div class="gift-cell">
-                <div class="cell-label">活动时间</div>
-                <div class="cell-text">2023-10-1至2024-11-01</div>
-              </div>
-            </div>
-          </div>
-          <div class="main-count">
+            </view>
+            <view class="gift-content">
+              <view class="gift-content-text">小米官旗米家体脂秤S400智能精准减肥电子称</view>
+              <view class="gift-cell">
+                <view class="cell-label">兑换方式</view>
+                <view class="cell-text">上门领取/包邮到家/邮寄到付</view>
+              </view>
+              <view class="gift-cell">
+                <view class="cell-label">活动时间</view>
+                <view class="cell-text">2023-10-1至2024-11-01</view>
+              </view>
+            </view>
+          </view>
+          <view class="main-count">
             <count v-model="num"></count>
-          </div>
-        </div>
-        <div class="main-footer">
+          </view>
+        </view>
+        <view class="main-footer">
           <input class="inp" placeholder="请输入验证码" />
           <view class="btn" @click="handleCode">获取验证码</view>
-        </div>
-      </div>
+        </view>
+      </view>
     </view>
     <view class="remark">
       <uni-easyinput
@@ -68,11 +78,11 @@
       </uni-easyinput>
       <view class="placeholder">最多输入100字</view>
     </view>
-    <div class="container-text">
+    <view class="container-text">
       已选{{ num }}件，合计积分：<view class="container-num">{{ num * 10 }}</view
       >积分
-    </div>
-    <div class="container-btn">提交订单</div>
+    </view>
+    <view class="container-btn">提交订单</view>
   </view>
 </template>
 
@@ -203,6 +213,11 @@ page {
     justify-content: space-between;
   }
 }
+.address-content2 {
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
 .address-icon {
   padding-right: 20upx;
   width: 80upx;