chelvc-custom/src/PageMine/goodsReserve.vue

<template>
  <view class="container">
    <view class="appoint" :key="index" v-for="(item, index) of init_list">
      <view class="appoint-list">
        <view class="appoint-title">{{ item.simpleMerchantVO.name }}</view>
        <view class="appoint-address"></view>
        <view class="appoint-flex">
          <image class="img" :src=" item.simpleMerchantVO.logo" mode="scaleToFill"></image>
          <view class="appoint-text">
            <view>{{ item.goodsName }}</view>
            <view>时间：{{ $u.timeFormat(item.appointTime) }}</view>
            <view>联系方式：{{ item.mobile }}</view>
          </view>
        </view>
        <view class="appoint-goto">
          <u-button class="detail" text="详情" @click="handlerSkipGoodsDetail(item, index)"></u-button>
          <u-button class="cancel" text="取消" @click="handlerClearItem(item, index)"></u-button>
        </view>
      </view>
    </view>
    <u-empty v-if="init_list.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
    </u-empty>
  </view>
</template>

<script>
  import {
    maintainReservations
  } from '@/api/client/mine.js';
  import {
    cancelReservation
  } from '@/api/client/business.js';
  export default {
    data() {
      return {
        queryParams: {
          size: 10,
        },
        init_list: [], //初始化列表
      };
    },
    mounted() {
      this.handlerInitList();
    },
    methods: {
      // 初始化列表
      handlerInitList() {
        maintainReservations(this.queryParams).then(res => {
          this.init_list = res.data;
        });
      },
      // 点击取消商品
      handlerClearItem(item) {
        cancelReservation(item.id).then(res => {
          if (res.code === 'OK') {
            uni.showToast({
              title: '取消成功',
              icon: 'none',
            });
            this.handlerInitList();
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none',
            });
            return;
          }
        });
      },
      // 点击跳转到商品详情
      handlerSkipGoodsDetail(item, index) {
        uni.navigateTo({
          // url: `/pages/client/clientPackage/serviceDetail/index?id=${item.merchantId}`,
          url: `/pagesHome/marketer/productDetail?id=${item.goodsId}&shopId=${item.merchantId}`,
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #efefef;
  }

  .container {
    padding: 20rpx;
  }

  .appoint {
    .history {
      font-size: 38rpx;
      margin: 20rpx 10rpx;
      font-weight: bold;
    }
  }

  .appoint-list {
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;

    .appoint-title {
      font-size: 38rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      color: #090909;
    }

    .appoint-address {
      font-size: 32rpx;
      margin: 20rpx;
      padding-bottom: 20rpx;
      color: #000000;
      border-bottom: 2rpx solid #e5e5e5;
    }

    .appoint-flex {
      display: flex;

      .img {
        width: 210rpx;
        height: 160rpx;
        display: block;
        margin-right: 15rpx;
      }

      .appoint-text {
        font-size: 28rpx;

        >view {
          margin-bottom: 26rpx;
        }
      }
    }

    .appoint-goto {
      display: flex;

      .detail,
      .cancel {
        width: 45%;
        border-radius: 20rpx;
      }

      .detail {
        background-color: #6c9fc3;
        color: #fff;
      }
    }
  }
</style>