chelvc-custom/src/components/service/index.vue

<template>
  <view class="sort">
    <u-swipe-action>
      <u-swipe-action-item :options="options1" :key="index" v-for="(itm, index) of item"
        @click="handlerClearItem(itm,index)">
        <view class="list" @click="handlerRouterSkip(itm, index)">
          <view class="list-img">
            <image class="img" :src="error || !loaded ? 'https://cdn.uviewui.com/uview/album/10.jpg' : itm.logo"
              mode="scaleToFill"></image>
          </view>

          <view class="list-main">
            <view class="item-text">{{ itm.address }}</view>
            <view class="item-flex">
              <view class="star">
                <u-rate :count="itm.score" :size="14" />
                <text class="line">|</text>
                <text class="points">{{ itm.score }}分</text>
              </view>
              <view>{{ itm.sale }}单</view>
            </view>
            <view class="list-item">
              <view class="item-l">{{ itm.name }}</view>
              <view class="item-r">{{ itm.distance }}KM</view>
            </view>
          </view>
        </view>
      </u-swipe-action-item>
    </u-swipe-action>
  </view>
</template>

<script>
  import {
    cancelFavorite
  } from '@/api/client/business.js';
  export default {
    data() {
      return {
        show: false,
        showDate: false,
        value1: Number(new Date()),
        count: 2,
        value: 10,
        options1: [{
          text: '删除'
        }]
      };
    },
    props: ['item', 'skipType'],

    methods: {
      click(item) {},
      open() {},
      close() {
        this.show = false;
      },

      // 点击跳转1
      handlerRouterSkip(item) {
        // if (this.skipType == 0) {
        uni.navigateTo({
          url: `/pages/client/clientPackage/storeDetail?id=${item.id}`,
        });
        // } else if (this.skipType == 1) {
        //   uni.navigateTo({
        //     url: `/pages/client/clientPackage/serviceDetail/index?id=${item.id}`,
        //   });
        // }
      },
      // 点击取消
      handlerClearItem(item, index) {
        cancelFavorite(item.id).then(res => {
          if (res.code == 200) {
            uni.showToast({
              title: '取消成功',
              icon: 'none'
            })
            this.$emit('uploadIniList', 0)
          } else {
            uni.showToast({
              title: res.msg,
              icon: 'none'
            })
            return
          }
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  /*商家服务分类的是实现 */

  .sort {
    min-height: 100vh;

    .list {
      height: 250rpx;
      background-color: #fff;
      padding: 20rpx;
      margin-bottom: 20rpx;
      display: flex;

      .list-img {
        width: 260rpx;
        height: 100%;
        background-color: #ec5729;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .list-main {
        width: calc(100% - 280rpx);
      }

      .item-text {
        font-weight: bold;
        margin: 10rpx 0 10rpx;
        color: #333;
      }

      .item-flex {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        margin: 0 20rpx 10rpx 0;
        color: #0d0d0d66;

        .star {
          display: flex;

          .line {
            margin-left: 16rpx;
            margin-top: 5rpx;
            font-size: 22rpx;
          }

          .points {
            color: #ff4b04;
            font-size: 22rpx;
            margin-top: 6rpx;
            margin-left: 10rpx;
          }
        }
      }

      .list-item {
        display: flex;
        justify-content: space-between;
        margin-top: 40rpx;

        .item-l {
          color: #cfcfcf;
        }

        .item-r {
          color: #252525;

          .Buy {
            width: 40px;
            height: 32px;
            color: #fff;
            line-height: 32px;
            text-align: center;
            display: inline-block;
            border-radius: 0 16px 16px 0;
            background-color: #ec5729;
            padding-bottom: 20rpx;
          }
        }
      }
    }
  }

  .u-page {
    padding: 0;
  }

  .u-demo-block__title {
    padding: 10px 0 2px 15px;
  }

  .swipe-action {
    &__content {
      padding: 25rpx 0;

      &__text {
        font-size: 15px;
        color: $u-main-color;
        padding-left: 30rpx;
      }
    }
  }
</style>