jsm-mall-h5-front/src/packageMine/pages/wodeanwei.vue

<template>
  <view>
    <view class="list-container">
      <view class="item" @tap.stop="toUrl('/packageMine/pages/mySecurityFee')">
        <view class="left">
          <image :src="'/static/images/icon_1.png'" mode="aspectFill"></image>
          <view class="f32_666">我的安维费用</view>
        </view>
        <view class="right">
          <image src="/static/images/right.png" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <view class="list-container">
      <view class="item" @tap.stop="toUrl('/packageMine/pages/repairSettle/list')">
        <view class="left">
          <image :src="'/static/images/icon_3.png'" mode="aspectFill"></image>
          <view class="f32_666">维修结算费用明细（已发放）</view>
        </view>
        <view class="right">
          <image src="/static/images/right.png" mode="aspectFill"></image>
        </view>
      </view>
      <view class="item" @tap.stop="toUrl('/packageMine/pages/repairSettle/detailed?type=' + 0)">
        <view class="left">
          <image :src="'/static/images/icon_3.png'" mode="aspectFill"></image>
          <view class="f32_666">维修结算费用明细（未发放）</view>
        </view>
        <view class="right">
          <image src="/static/images/right.png" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <view class="list-container">
      <view class="item" @tap.stop="toUrl('/packageMine/pages/qualityGuaranteeFund')">
        <view class="left">
          <image :src="'/static/images/icon_1.png'" mode="aspectFill"></image>
          <view class="f32_666">质保金</view>
        </view>
        <view class="right">
          <image src="/static/images/right.png" mode="aspectFill"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onShow() {},
  methods: {
    toUrl(url) {
      if (!url) {
        return uni.showToast({
          title: '功能开发中',
          icon: 'none',
          duration: 1500
        })
      }
      this.$navToPage({
        url
      })
    }
  }
}
</script>

<style scoped lang="scss">
.list-container {
  margin: 30rpx 30rpx 0;
  background: #ffffff;
  border-radius: 15rpx;
  padding: 0 30rpx;

  .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100rpx;
    border-bottom: 1px solid #eaeaea;

    &:last-child {
      border: none;
    }

    .left {
      display: flex;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 28rpx;
      }
    }

    .right {
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>