cashier_wx/distribution/shop-list/index.vue

<template>
  <view class="box">
    <!-- <up-search v-model="query.shopName" @search="getData" @custom="getData"></up-search> -->
    <view class="list">
      <view class="u-flex  shop-item " v-for="(item, index) in list" :key="index" @click="toShopDetail(item)">
        <up-image
          width="104rpx"
          height="104rpx"
          radius="8rpx"
          :src="item.coverImg"
        ></up-image>
        <view class="u-flex-1 u-m-l-14">
          <view class="u-flex justify-between align-center">
            <view>
              <view class="shop-name">{{ item.shopName }}</view>
              <view class="u-flex">
                <view class="tag" v-if="item.labelContent">{{
                  item.labelContent
                }}</view>
              </view>
              <view class="address u-line-1">{{ item.shopAddress }}</view>
            </view>
            <view v-if="options.type == 'activates'">
                <view class="shouyi">收益</view>
                <view class="price">¥{{ item.income||'0.00' }}</view>
              </view>
            <view class="u-flex u-flex-col justify-center" v-else>
              <view class="fufei" v-if="item.openType == 'pay'">付费开通</view>
              <view class="fufei" v-else-if="item.openType == 'manual'"
                  >手动开通</view
                >
              <template  v-else-if="item.openType == 'auto'">
                <view class="font-12 color-333 font-700">自动开通</view>
                <view class="u-m-t-8 color-666 font-12"
                  >还差{{
                    item.shopInviteCount - item.userInviteCount
                  }}人开通</view
                >
              </template>
            </view>
          </view>
        </view>
      </view>
    </view>
    <up-loadmore :status="query.isEnd?'noMore':'loadmore'"></up-loadmore>
  </view>
</template>

<script setup>
import * as distributionApi from "@/common/api/market/distribution.js";

import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { onMounted, reactive, ref } from "vue";

const list = ref([]);
const query = reactive({
  shopName: "",
  page: 1,
  size: 10,
  isEnd: false,
});
async function getData() {
  const res =
    options.type == "activates"
      ? await distributionApi.activates(query)
      : await distributionApi.unActivates(query);
  if (res) {
    if (query.page == 1) {
      list.value = res.records || [];
    } else {
      list.value.push(...(res.records || []));
    }
    query.isEnd = query.page >= res.totalPage * 1;
  }
}




function toShopDetail(item,type) {
  uni.navigateTo({
    url: "/distribution/shop-detail/index?shopId=" + item.shopId
  });
}
const options = reactive({});
onLoad((opt) => {
  console.log(opt);
  Object.assign(options, opt);
  getData();
});
onReachBottom(() => {
  query.page++;
  if (query.isEnd) {
    return;
  }
  getData();
});
</script>

<style lang="scss" scoped>
.box {
  padding: 32rpx 28rpx;
  font-size: 28rpx;
}

.color-1 {
  color: #ff6300;
}



.list {
  .shop-item {
    padding: 16rpx 0;
    border-bottom: 2rpx solid #ededed;
    font-size: 24rpx;
    color: #666;
    display: flex;
    align-items: center;
 
    .fufei {
      color: #e8ad7b;
    }
    .tag {
      font-size: 24rpx;
      color: #ff1c1c;
      background-color: #ffe4e4;
      padding: 8rpx 20rpx;
      border-radius: 8rpx;
    }
    .shop-name {
    }
    .address {
      max-width: 390rpx;
    }
    .shouyi {
      font-size: 24rpx;
      color: #666;
      text-align: center;
    }
    .price {
      font-size: 20rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.price {
  font-weight: 700;
  color: #333;
  font-size: 40rpx;
  margin-top: 16rpx;
}
.top {
  position: relative;
  .top_content {
    background-color: #faf7f4;
    position: absolute;
    left: 28rpx;
    right: 28rpx;
    bottom: 0;
    padding: 32rpx 106rpx 32rpx 56rpx;
    border-radius: 24rpx 24rpx 0 0;
  }
}
.top_bg {
  width: 100%;
  height: 530rpx;
}
.bottom {
  padding: 34rpx 28rpx;
}
.title {
  font-size: 32rpx;
  font-weight: 700;
  color: #333;
  position: relative;
  overflow: hidden;
  &::after {
    display: block;
    content: "";
    position: absolute;
    right: 0;
    bottom: 4rpx;
    background-color: #9ee708;
    border-radius: 10rpx;
    z-index: -1;
    width: 94.2rpx;
    height: 13.98rpx;
    flex-shrink: 0;
    stroke-width: 4rpx;
    stroke: #9ee708d6;
  }
}
.small-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #333;
}
</style>