pidu

2022-11-24 09:09:20 +08:00
parent 45ed0ba4c7
commit c2c28581a3
6 changed files with 0 additions and 0 deletions
--- a/src/project/pidu/AppPointsChange/detail.vue
+++ b/src/project/pidu/AppPointsChange/detail.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="detail">
+    <div class="goods-img">
+      <u-swiper :list="list" mode="none" img-mode="aspectFit" height="750" bg-color="#fff"></u-swiper>
+    </div>
+    <div class="goods-title">
+      天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾可湿水…
+    </div>
+    <div class="goods-point">
+      <h3>10<span>积分</span></h3>
+      <div>库存100</div>
+    </div>
+    <div class="goods-btn status-lack">
+      <div class="text">积分余额:438</div>
+      <div class="btn" @click="toOrder()">立即兑换</div>
+      <!-- <div class="btn lack-btn">积分不足</div> -->
+      <!-- <div class="btn lack-btn">缺货</div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'detail',
+  data() {
+    return {
+      list: [
+        { image: 'https://cdn.uviewui.com/uview/swiper/1.jpg'},
+        { image: 'https://cdn.uviewui.com/uview/swiper/2.jpg'},
+        { image: 'https://cdn.uviewui.com/uview/swiper/3.jpg'}
+      ],
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onShow() {
+    document.title = '商品详情'
+  },
+  methods: {
+    toOrder() {
+      uni.navigateTo({url:'./order'})
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+uni-page-body {
+  background-color: #fff;
+}
+.detail {
+  .goods-img {
+    width: 100%;
+  }
+  .goods-title {
+    padding: 32px;
+    font-family: PingFangSC-Medium;
+    font-weight: 500;
+    font-size: 32px;
+    color: #333;
+    word-break: break-all;
+  }
+  .goods-point{
+    display: flex;
+    justify-content: space-between;
+    padding: 0 32px;
+    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;
+      }
+    }
+    div {
+      font-family: PingFangSC-Regular;
+      font-size: 26px;
+      color: #999;
+    }
+  }
+  .goods-btn {
+    width: 100%;
+    height: 112px;
+    line-height: 112px;
+    background: #FFF;
+    border-top: 1px solid #ddd;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 32px;
+    box-sizing: border-box;
+    .text {
+      font-family: PingFangSC-Regular;
+      font-size: 28px;
+      color: #CA906A;
+    }
+    .btn {
+      height: 80px;
+      line-height: 80px;
+      width: 224px;
+      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;
+      margin-top: 16px;
+    }
+    .lack-btn {
+      background-image: linear-gradient(90deg, #ddd 0%, #ddd 100%);
+    }
+  }
+}
+</style>