pidu

src/project/pidu/AppPointsChange/order.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="order">
+    <div class="goods">
+      <div class="left">
+        <img src="./components/imgs/check-icon.png" alt="">
+      </div>
+      <div class="right">
+        <p>天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸可湿水面巾纸1天薇抽纸天</p>
+        <div class="flex">
+          <h3>10<span>积分</span></h3>
+          <div class="num">
+            <u-number-box v-model="value" @change="valChange" :min="1" :max="200"></u-number-box>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex-item item-mar-b24">
+      <div class="label">备注</div>
+      <div class="value">
+        <u-input v-model="remark" type="text" maxlength="20" input-align="right" placeholder="0/20" height="44" />
+      </div>
+    </div>
+    <div class="flex-item border">
+      <div class="label">积分余额</div>
+      <div class="value color-333">484</div>
+    </div>
+    <div class="flex-item">
+      <div class="label">支付积分</div>
+      <div class="value color-ff6900">-10</div>
+    </div>
+    <div class="footer">
+      <div>提交订单</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'order',
+  data() {
+    return {
+      value: 1,
+      remark: ''
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onShow() {
+    document.title = '提交订单'
+  },
+  methods: {
+    valChange(e) {
+      console.log('当前值为: ' + e.value)
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  background-color: #f5f6f7;
+}
+.order {
+  .goods {
+    width: calc(100% - 32px);
+    background-color: #fff;
+    margin: 16px 0 16px 16px;
+    padding: 32px;
+    box-sizing: border-box;
+    display: flex;
+    border-radius: 32px;
+    .left {
+      img {
+        width: 176px;
+        height: 176px;
+      }
+    }
+    .right {
+      width: calc(100% - 176px);
+      padding-left: 24px;
+      box-sizing: border-box;
+      p {
+        width: 100%;
+        height: 80px;
+        line-height: 40px;
+        font-family: PingFangSC-Medium;
+        font-weight: 500;
+        font-size: 28px;
+        color: #333;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        margin-bottom: 32px;
+      }
+      .flex {
+        display: flex;
+        justify-content: space-between;
+        .num {
+          margin-top: 12px;
+        }
+      }
+      h3 {
+        line-height: 60px;
+        font-family: PingFangSC-SNaNpxibold;
+        font-weight: 600;
+        font-size: 44px;
+        color: #FF6900;
+        span {
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          font-size: 24px;
+        }
+      }
+    }
+  }
+  .flex-item {
+    display: flex;
+    justify-content: space-between;
+    width: calc(100% - 32px);
+    padding: 44px 32px;
+    line-height: 42px;
+    background-color: #fff;
+    box-sizing: border-box;
+    margin-left: 16px;
+    .label {
+      font-family: PingFangSC-Regular;
+      font-size: 30px;
+      color: #666;
+    }
+    .color-333{
+      color: #333;
+    }
+    .color-ff6900 {
+      color: #FF6900;
+    }
+  }
+  .item-mar-b24 {
+    border-radius: 32px;
+    margin-bottom: 24px;
+  }
+  .border {
+    border-bottom: 1px solid #ddd;
+  }
+  .footer{
+    width: 100%;
+    background: #FFF;
+    border-top: 1px solid #ddd;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px 32px;
+    box-sizing: border-box;
+    div {
+      width: 100%;
+      height: 80px;
+      line-height: 80px;
+      text-align: center;
+      background-image: linear-gradient(90deg, #FFA044 0%, #FF8436 100%);
+      border-radius: 52px;
+      font-family: PingFangSC-Medium;
+      font-weight: 500;
+      font-size: 32px;
+      color: #FFF;
+    }
+  }
+}
+</style>