From c55956498ed2066509ac967e6700dcff16f3b348 Mon Sep 17 00:00:00 2001
From: liuye <liuye@sinoecare.com>
Date: Fri, 24 Mar 2023 17:11:19 +0800
Subject: [PATCH] =?UTF-8?q?=E7=A7=AF=E5=88=86=E5=85=91=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pidu/AppRedemptionPoints/placeOrder.vue   | 227 +++++++++++++++++-
 .../AppRedemptionPoints/productDetails.vue    |   4 +-
 2 files changed, 225 insertions(+), 6 deletions(-)

diff --git a/src/project/pidu/AppRedemptionPoints/placeOrder.vue b/src/project/pidu/AppRedemptionPoints/placeOrder.vue
index 10005db6..c29ca69f 100644
--- a/src/project/pidu/AppRedemptionPoints/placeOrder.vue
+++ b/src/project/pidu/AppRedemptionPoints/placeOrder.vue
@@ -1,6 +1,50 @@
 <template>
   <div class="placeOrder">
-
+    <div class="header-info">
+      <div class="flex">
+        <img src="https://cdn.cunwuyun.cn/dvcp/h5/watermark/8.png" alt="">
+        <div class="type type0"><p>京东低价商品</p></div>
+        <div class="flex-right">
+          <p>无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)无染(wuro)本色抽纸无染无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)无染(wuro)</p>
+          <div>
+            <u-number-box v-model="value" @change="valChange" input-height="38" size="12" :min="1" :max="100"></u-number-box>
+          </div>
+          <h3>50积分<span>+￥2.00</span></h3>
+        </div>
+      </div>
+      <p class="tips"><span>兑换成功后，点击「去购买」前往京东低价购买</span></p>
+    </div>
+    <div class="content">
+      <div class="item-flex">
+        <div class="label">订单备注</div>
+        <div class="value color-999">无备注<u-icon name="arrow-right" color="#bbb" size="24"></u-icon></div>
+      </div>
+      <div class="item-flex">
+        <div class="label">积分余额</div>
+        <div class="value color-FF6900">562积分</div>
+      </div>
+      <div class="item-flex">
+        <div class="label">支付积分</div>
+        <div class="value">减100积分</div>
+      </div>
+      <div class="item-flex">
+        <div class="label">京东支付</div>
+        <div class="value color-999">¥4.00</div>
+      </div>
+    </div>
+    <u-popup v-model="show" mode="bottom">
+      <div class="textarea">
+        <u-input v-model="value" type="textarea" :height="120" :auto-height="true" placeholder="请输入备注" :clearable="false" maxlength="1000" />
+        <p>字数{{value.length}}/1000</p>
+      </div>
+      <div class="btn">
+        <span @click="value=''">清空内容</span>
+        <span class="confirm" @click="confirm">保存</span>
+      </div>
+    </u-popup>
+    <div class="bottom-btn" @click="toSuccess()">
+      <div>提交订单</div>
+    </div>
   </div>
 </template>
 
@@ -12,7 +56,8 @@ export default {
   appName: '提交订单',
   data() {
     return {
-      
+      value: 1,
+      show: false
     }
   },
   computed: {
@@ -25,7 +70,12 @@ export default {
     document.title = '提交订单'
   },
   methods: {
-    
+    valChange(e) {
+      console.log('当前值为: ' + e.value)
+    },
+    toSuccess() {
+      uni.navigateTo({url: './successOrder'})
+    }
   },
   onReachBottom() {
     // this.current = this.current + 1
@@ -36,6 +86,175 @@ export default {
 
 <style lang="scss" scoped>
 .placeOrder {
-
+  .header-info {
+    padding: 48px 32px;
+    background-color: #fff;
+    margin-bottom: 24px;
+    .flex {
+      margin-bottom: 32px;
+      display: flex;
+      position: relative;
+      img {
+        width: 166px;
+        height: 166px;
+        border-radius: 16px;
+        margin-right: 20px;
+      }
+      .type {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        border-bottom-left-radius: 16px;
+        border-bottom-right-radius: 16px;
+        width: 166px;
+        text-align: center;
+        line-height: 34px;
+        font-family: PingFangSC-Regular;
+        font-size: 18px;
+        color: #FFF;
+        p {
+          scale: 0.9;
+        }
+      }
+      .type0 {
+        background-color: #E64E39;
+      }
+      .type1 {
+        background-color: #FF6900;
+      }
+      .flex-right {
+        width: calc(100% - 186px);
+        p {
+          word-break: break-all;
+          font-family: PingFangSC-Regular;
+          font-size: 26px;
+          color: #222;
+          line-height: 34px;
+          text-overflow: -o-ellipsis-lastline;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;					
+          -webkit-box-orient: vertical;
+          margin-bottom: 22px;
+        }
+        div {
+          text-align: right;
+        }
+        h3 {
+          font-family: PingFangSC-SNaNpxibold;
+          font-weight: 600;
+          font-size: 34px;
+          color: #FF6900;
+          line-height: 48px;
+          span {
+            display: inline-block;
+            font-size: 34px;
+            color: #4181FF;
+            margin-left: 8px;
+          }
+        }
+      }
+    }
+    .tips {
+      display: inline-block;
+      padding: 12px;
+      line-height: 36px;
+      background: #F5FCF5;
+      border-radius: 16px;
+      font-family: PingFangSC-Regular;
+      font-size: 24px;
+      color: #3BBC37;
+      span {
+        display: inline-block;
+        scale: 0.9;
+      }
+    }
+  }
+  .content {
+    padding: 0 32px;
+    background-color: #fff;
+    .item-flex {
+      display: flex;
+      padding: 30px 0;
+      font-size: 26px;
+      line-height: 34px;
+      font-family: PingFangSC-Regular;
+      .label {
+        color: #222;
+        width: 120px;
+      }
+      .value {
+        width: calc(100% - 120px);
+        text-align: right;
+        color: #222;
+      }
+      .color-FF6900 {
+        color: #FF6900;
+      }
+      .color-999 {
+        color: #999;
+      }
+    }
+  }
+  .textarea {
+    margin: 32px 32px 24px;
+    width: calc(100% - 64px);
+    padding: 16px;
+    box-sizing: border-box;
+    background: #f7f7f7;
+    border-radius: 8px;
+    p {
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+      line-height: 36px;
+      text-align: right;
+    }
+  }
+  .btn {
+    padding: 0 32px 24px;
+    height: 64px;
+    display: flex;
+    justify-content: space-between;
+    span {
+      display: inline-block;
+      line-height: 64px;
+      font-size: 26px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #666;
+    }
+    .confirm {
+      width: 144px;
+      text-align: center;
+      background: #1365dd;
+      border-radius: 32px;
+      font-size: 28px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #fff;
+    }
+  }
+  .bottom-btn {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 20px 32px;
+    box-sizing: border-box;
+    div {
+      width: 100%;
+      height: 88px;
+      line-height: 88px;
+      text-align: center;
+      border-radius: 44px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 34px;
+      color: #FFF;
+      background: #4181FF;
+    }
+  }
 }
 </style>
diff --git a/src/project/pidu/AppRedemptionPoints/productDetails.vue b/src/project/pidu/AppRedemptionPoints/productDetails.vue
index ff13c692..22d9a739 100644
--- a/src/project/pidu/AppRedemptionPoints/productDetails.vue
+++ b/src/project/pidu/AppRedemptionPoints/productDetails.vue
@@ -6,7 +6,7 @@
       <p>无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)本色抽纸无染(wuro)本色抽纸</p>
       <h3>50积分<span>+￥2.00<span>（兑换后再付）</span></span></h3>
       <div>零售单价¥10.00</div>
-      <span>免费兑换商品，可到固定的兑换点进行「核销兑换」</span>
+      <span class="tips">免费兑换商品，可到固定的兑换点进行「核销兑换」</span>
     </div>
     <div class="product-content">
       <p>商品描述：</p>
@@ -122,7 +122,7 @@ export default {
       margin-bottom: 24px;
       text-decoration: line-through;
     }
-    span {
+    .tips {
       display: inline-block;
       padding: 12px;
       line-height: 36px;