chelvc-custom/src/PageMine/goodsReserve/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/productDetail/index?id=${item.goodsId}&shopId=${item.merchantId}`,
      });
    },
  },
};
</script>

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

.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>