xdd-uniapp-new/pkg_user/views/giftList.vue

<template>
  <view class="gift-page">
    <view class="cate-wrap">
      <view class="cate-list">
        <view
          v-for="(item, index) in cateList"
          :key="index"
          :class="cateIndex === index ? 'curr' : ''"
          class="cate-item"
          @click="cateItemClickHanlde(item, index)"
        >
          {{ item.name }}
        </view>
      </view>
    </view>
    <view class="list-wrap">
      <view v-if="isLoad" class="list-body">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="gift-item"
        >
          <view
            class="gift-body"
            @click="giftItemClickHanlde(item)"
          >
            <view class="gift-img">
              <image
                :src="item.imgage"
                class="img"
                mode="widthFix"
              />
            </view>
            <view class="gift-good-info">
              <view class="name more-t">
                {{ item.goodName }}
              </view>
              <view class="attr-txt">
                <view class="txt">{{ item.attrName }}</view>
              </view>
              <view class="price-wrap">
                <view class="price">
                  <text class="prefix">￥</text>{{ item.price }}
                </view>
                <view class="num">数量&nbsp;X&nbsp;{{ item.num }}</view>
              </view>
            </view>
          </view>
          <view class="gift-bottom">
            <view class="gift-txt">
              赠言：{{ item.txt }}
            </view>
            <view
              v-if="item.status === 1"
              class="btn"
            >
              送给朋友
              <image
                :src="webUrl + '/icon/icon-gift-share.png'"
                class="icon"
                mode="widthFix"
              />
            </view>
            <view
              v-if="item.status === 2"
              class="btn"
            >
              已全部领取
            </view>
            <view
              v-if="item.status > 2"
              class="btn btn-grey"
            >
              灰色按钮
            </view>
          </view>
        </view>
      </view>
      <goo-skeleton
        v-else
        :show-avatar="false"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'GiftLisPage',
  data() {
    return {
      webUrl: this.$VUE_APP_RESOURCES_URL,
      cateIndex: 0,
      cateList: [
        {
          name: '送出的',
          status: 1
        },
        {
          name: '收到的',
          status: 2
        }
      ],
      isLoad: true,
      list: [
        {
          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
          attrName: '卤味干拌米线 360g/盒*4',
          price: 19.00,
          num: 1,
          txt: '礼笺轻启，礼藏心意',
          status: 1
        },
        {
          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
          attrName: '卤味干拌米线 360g/盒*4',
          price: 19.00,
          num: 1,
          txt: '礼笺轻启，礼藏心意礼笺轻启，礼藏心意礼笺轻启，礼藏心意',
          status: 2
        },
        {
          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
          attrName: '卤味干拌米线 360g/盒*4',
          price: 19.00,
          num: 1,
          txt: '礼笺轻启，礼藏心意',
          status: 3
        },
        {
          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
          attrName: '卤味干拌米线 360g/盒*4',
          price: 19.00,
          num: 1,
          txt: '礼笺轻启，礼藏心意',
          status: 4
        },
        {
          imgage: 'http://resource.xdd618.com/O1CN01prG02J1Li6URrihe0_!!2217506541332-20240321102748.jpg',
          goodName: '云南特产禄劝撒坝火腿土猪肉火腿云南特产禄劝撒坝火腿土猪肉火腿',
          attrName: '卤味干拌米线 360g/盒*4',
          price: 19.00,
          num: 1,
          txt: '礼笺轻启，礼藏心意',
          status: 5
        }
      ]
    }
  },
  created() {
    setTimeout(() => {
      this.isLoad = true
    }, 2000)
  },
  methods: {
    cateItemClickHanlde(item, index) {
      if (this.cateIndex === index || !this.isLoad) return
      this.cateIndex = index
      // todo:列表数据请求加载
      this.isLoad = false
      setTimeout(() => {
        this.isLoad = true
      }, 2000)
    },
    giftItemClickHanlde(item) {
      console.log(item)
      // todo:跳转到订单详情
    }
  }
}
</script>

<style lang="less" scoped>
.gift-page {
  position: relative;
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #F6F6F6;
  .cate-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    padding: 20rpx 32rpx;
    background-color: #F6F6F6;
    .cate-list {
      display: flex;
      align-items: center;
      height: 64rpx;
      border-radius: 32rpx;
      background-color: #fff;
      .cate-item {
        flex: 1;
        height: 64rpx;
        border-radius: 32rpx;
        line-height: 64rpx;
        text-align: center;
        font-size: 30rpx;
        color: #333;
        background-color: #fff;
        &.curr {
          font-weight: bold;
          color: #fff;
          background-color: #C41617;
        }
      }
    }
  }
  .list-wrap {
    position: relative;
    z-index: 2;
    padding: 84rpx 0 0 0;
    .gift-item {
      padding: 16rpx;
      margin: 0 0 24rpx;
      border-radius: 16rpx;
      background-color: #ffff;
      .gift-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .gift-img {
          .img {
            display: block;
            width: 200rpx;
            height: 200rpx;
            border-radius: 16rpx;
          }
        }
        .gift-good-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: calc(100% - 212rpx);
          height: 200rpx;
          .name {
            font-weight: bold;
            font-size: 28rpx;
            color: #333;
            line-height: 44rpx;
          }
          .attr-txt {
            display: flex;
            .txt {
              height: 42rpx;
              padding: 0 12rpx;
              border-radius: 24rpx;
              border: 1px solid #999;
              line-height: 42rpx;
              color: #333;
              font-size: 24rpx;
            }
          }
          .price-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .price {
              color: #C52733;
              font-size: 30rpx;
              font-weight: bold;
              .prefix {
                font-weight: normal;
                font-size: 22rpx;
              }
            }
            .num {
              font-size: 24rpx;
              color: #666;
            }
          }
        }
      }
      .gift-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24rpx 0 0 0;
        margin: 24rpx 0 0 0;
        border-top: 1rpx solid #D2D2D2;
        .gift-txt {
          flex: 1;
          font-size: 26rpx;
          color: #666;
        }
        .btn {
          display: flex;
          align-items: center;
          height: 46rpx;
          padding: 0 12rpx;
          margin: 0 0 0 24rpx;
          border-radius: 8rpx;
          color: #fff;
          line-height: 46rpx;
          font-size: 26rpx;
          background-color: #C52733;
          .icon {
            display: block;
            width: 20rpx;
            height: 20rpx;
          }
          &.btn-grey {
            color: #fff;
            background-color: #C7C7C7;
          }
        }
      }
    }
  }
}
</style>