chelvc-custom/src/pages/merchant/store/appointList.vue

<template>
  <view class="appointList">
    <view v-for="item in appointList" :key="item.id" class="appoint">
      <view class="fl-flex fl-justify-between">
        <view>
          {{ item.mobile }}
          <text class="f-s-22" style="color: #999999"> (预留手机) </text>
        </view>
        <u-icon name="phone" color="#2979ff" size="24" @click="handlerMakePhone(item.mobile)" />
      </view>
      <view class="line"></view>
      <view class="fl-flex fl-align-center">
        <image
          :src="item.simpleMerchantVO.logo"
          mode="scaleToFill"
          style="width: 200rpx; height: 200rpx"
          v-if="item.simpleMerchantVO.logo"
        />
        <image
          src="/static/QR57a.jpg"
          v-else
          mode="scaleToFill"
          style="width: 200rpx; height: 200rpx"
        />

        <view class="u-p-l-10">
          <view class="f-s-32" style="font-weight: bold">服务名称服务</view>
          <view style="margin: 10rpx 0">{{ $u.timeFormat(item.appointTime) || '--' }}</view>
          <view>{{ item.simpleMerchantVO.address || '--' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getAppointListApi } from '@/api/merchant/order';
export default {
  data() {
    return {
      params: {
        offset: 1,
        size: 10,
      },
      appointList: [],
      list: {},
    };
  },
  onShow() {
    let { merchant } = this.$store.state.data.merchantInfo;
    this.list = merchant;

    setTimeout(() => {
      this.getAppointList();
    }, 300);
  },

  methods: {
    async getAppointList() {
      let result = Object.assign({}, { ...this.params }, { merchantId: this.list.id });
      console.log(result, '0000000');
      let res = await getAppointListApi({ ...result });

      if (res.code === 'OK') {
        this.appointList = res.data;
      }
    },

    handlerMakePhone() {
      uni.makePhoneCall({
        phoneNumber: '114', //仅为示例
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.appointList {
  .appoint {
    margin: 0 20rpx;
    padding: 20rpx;
    background-color: #fff;
    margin-bottom: 20rpx;
    border-radius: 20rpx;

    .line {
      height: 2rpx;
      width: 100%;
      background-color: #eee;
      margin: 5rpx 0;
    }
  }
}
</style>