曲靖复制郫都 积分申请,积分兑换

src/project/qujing/AppPointsChange/detail.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="detail">
+    <div class="goods-img">
+      <u-swiper :list="list" mode="none" img-mode="aspectFit" height="750" bg-color="#fff" @click="imgClick"></u-swiper>
+    </div>
+    <div class="goods-title">{{goodsInfo.merchandiseName}}</div>
+    <div class="goods-point">
+      <h3>{{goodsInfo.merchandiseIntegral}}<span>积分</span></h3>
+      <div>库存:{{goodsInfo.merchandiseNumber}}</div>
+    </div>
+    <div class="goods-btn status-lack">
+      <div class="text">积分余额:{{userIntegral}}</div>
+      <div class="btn" @click="toOrder()" v-if="goodsInfo.status == 0 && userIntegral >= goodsInfo.merchandiseIntegral">立即兑换</div>
+      <div class="btn lack-btn" v-if="goodsInfo.status == 0 && userIntegral < goodsInfo.merchandiseIntegral">积分不足</div>
+      <div class="btn lack-btn" v-if="goodsInfo.status != 0">缺货</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: 'detail',
+  data() {
+    return {
+      list: [],
+      userIntegral: '',
+      id: '',
+      goodsInfo: {}
+    }
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+  onLoad(option) {
+    this.userIntegral = option.userIntegral
+    this.id = option.id
+    this.getDetail()
+  },
+  onShow() {
+    document.title = '商品详情'
+  },
+  methods: {
+    toOrder() {
+      uni.navigateTo({url:`./order?userIntegral=${this.userIntegral}&id=${this.id}`})
+    },
+    getDetail() {
+      this.$http.post(`/app/appintegralmerchandise/queryDetailById?id=${this.id}`).then((res) => {
+        if (res.code == 0) {
+          this.goodsInfo = res.data
+          this.list = [{image: res.data.imageUrl}]
+        }
+      })
+    },
+    imgClick(index) {
+      this.previewImages(this.list, this.list[index].image)
+    },
+    previewImages(images, img) {
+      uni.previewImage({
+        urls: images.map(v => v.image),
+        current: img
+      })
+    },
+  },
+}
+</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>