VAVABUY/pages/shop/merchants.vue

<template>
  <Theme>
    <view class="wrap">
      <view class="nav">
        <Navbar
          autoBack
          leftIconColor="var(--light)"
          @leftClick="leftClick"
          @rightClick="rightClick"
          bgColor="transparent"
        >
          <template #center>
            <view class="nav_center">
              <Search
                v-model="searchValue"
                border="none"
                :placeholder="t('商品的链接或名称')"
                @confirm="searchConfirm"
              >
                <template #prefix>
                  <i class="icon-font icon-search"></i>
                </template>
              </Search>
            </view>
          </template>
          <template #right>
            <navMenu :options="{ icon: 'icon-home', text: '主页' }" blacked />
          </template>
        </Navbar>
        <view class="bg_logo">{{ verConfig.appNames }}</view>
      </view>
      <view class="tops" id="tabs" :style="{ top: tabTop + 'px' }">
        <view class="shop_info">
          <view class="shop_img">
            <image
              :src="`../../static/shop/icon_${defaultParams.channel}.png`"
              class="_img"
            ></image>
          </view>
          <view class="shop_name">{{ shopName }}</view>
        </view>
        <view class="btn_wrapper">
          <!-- <i class="icon-font icon-share"></i> -->
          <up-icon
            :name="isCollect ? 'star-fill' : 'star'"
            @click="shopCollect"
            size="30"
            :color="isCollect ? 'var(--primary)' : 'var(--light)'"
          ></up-icon>
        </view>
      </view>
      <view class="content">
        <List
          url="/shop/seller/goods"
          :topHeight="tabHeight"
          :defaultParams="defaultParams"
          ref="listRef"
          @datas="getList"
        >
          <template #item="{ item, index }">
            <shopList
              :channel="defaultParams.channel"
              :item="item"
              @collect="collectClick($event, index)"
            />
          </template>
        </List>
      </view>
    </view>
    <popup title="搜索条款" isClose ref="popupRef">
      <template #content>
        <view class="pop_cont">
          <trans _t="搜索条款内容" />
        </view>
        <view class="pop_tip">
          <trans _t="您已同意搜索条款" />
        </view>
        <view class="pop_btn" @click="popClose">
          <trans _t="关闭" />
        </view>
      </template>
    </popup>
  </Theme>
</template>
<script setup>
import { ref, reactive, computed, onMounted, nextTick } from "vue";
import verConfig from "@/ver.config";
import navMenu from "@/components/nav_menu";
import Navbar from "@/components/navbar";
import Search from "@/components/input";
import { t } from "@/locale";
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import List from "@/components/list";
import { query, systemInfo } from "@/utils";
import shopList from "../index/components/shop_list";
import popup from "@/components/popup";
import { SHOP_USER_COLLECT, SHOP_SELLER_INFO } from "@/api";

const searchValue = ref("");
const listRef = ref(null);
const popupRef = ref(null);
const tabHeight = ref(0);
const tabTop = ref(44);
const dataList = ref([]);
const shopName = ref("");
const isCollect = ref(false);
const defaultParams = reactive({
  channel: "",
  shop_id: "",
  seller_id: "",
});

const sellerInfo = async () => {
  try {
    const res = await SHOP_SELLER_INFO({
      channel: defaultParams.channel,
      shop_id: defaultParams.shop_id,
    });
    isCollect.value = res.data.isCollect;
    shopName.value = res.data.nick;
  } catch (error) {}
};

const rightClick = () => {
  popupRef.value && popupRef.value.open();
};

const getList = (list) => {
  dataList.value = list;
};

const searchConfirm = () => {
  defaultParams.keyWord = searchValue.value;
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};

const popClose = () => {
  popupRef.value && popupRef.value.close();
};

onLoad((options) => {
  const { channel, shop_id, seller_id, title } = options;
  defaultParams.channel = channel;
  defaultParams.shop_id = shop_id;
  defaultParams.seller_id = seller_id;
});

const leftClick = () => {
  uni.navigateBack();
  // uni.switchTab({ url: '/pages/index/index' });
};

const shopCollect = () => {
  setCollect({
    channel: defaultParams.channel,
    type: "shop",
    shop_id: defaultParams.shop_id,
    seller_id: defaultParams.seller_id,
    title: shopName.value,
    pic_url: "",
  });
};

const collectClick = (item, index) => {
  setCollect(
    {
      channel: defaultParams.channel,
      type: "good",
      goods_id: item.num_iid,
      seller_id: item.seller_id,
      title: item.title,
      pic_url: item.pic_url,
      price: item.price,
    },
    index
  );
};

const setCollect = async (params, index) => {
  try {
    const res = await SHOP_USER_COLLECT(params);
    if (!index && index != 0) {
      isCollect.value = res.data.collect;
      return;
    }
    nextTick(() => {
      dataList.value[index].isCollect = res.data.collect;
      listRef.value && listRef.value.setList(dataList.value);
    });
  } catch (error) {
    Toast(error.msg);
  }
};

onMounted(() => {
  nextTick(async () => {
    const res = await query("#tabs", this);
    tabTop.value = res.top + systemInfo().statusBarHeight;
    tabHeight.value = res.height;
    nextTick(() => {
      sellerInfo();
      listRef.value && listRef.value.getData();
    });
  });
});

onReachBottom(() => {
  nextTick(() => {
    listRef.value && listRef.value.scrolltolower();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background-color: var(--light);

  .nav {
    position: relative;
    background-color: var(--black);

    :deep(.u-navbar) {
      position: relative;
      z-index: 1;
    }

    .nav_center {
      width: calc(100% - 46px - 50px);

      /deep/ .u-input {
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);

        .icon-search {
          color: var(--light);
        }

        .uni-input-placeholder,
        .uni-input-input {
          color: var(--light) !important;
          .size(24rpx);
        }
      }

      .icon-camera {
        color: var(--light);
        font-size: 56rpx;
      }
    }

    .nav_right {
      .icon-font {
        .size(28px);
        color: var(--text);
      }
    }

    .bg_logo {
      position: fixed;
      .size(128rpx);
      color: var(--inputBg);
      opacity: 0.06;
      top: 0;
      left: 50%;
      font-weight: bold;
      transform: translateX(-50%);
      line-height: 88rpx;
      text-transform: uppercase;
      font-family: "HarmonyOS_Sans";
      text-wrap: nowrap;
    }
  }

  .tops {
    background-color: var(--black);
    .flex_position(space-between);
    gap: 24rpx;
    padding: 48rpx 48rpx 24rpx;
    // margin: 24rpx 24rpx 0;
    // border-radius: 16rpx;

    .shop_info {
      .ver();

      .shop_img {
        width: 100rpx;
        height: 100rpx;

        ._img {
          width: inherit;
          height: inherit;
          border-radius: 8rpx;
        }
      }

      .shop_name {
        color: var(--light);
        .size();
        font-weight: 700;
        line-height: 60rpx;
        margin-left: 24rpx;
      }
    }

    .btn_wrapper {
      .ver();

      .icon-font {
        .size(62rpx);
        color: var(--light);
        margin-right: 8rpx;
      }
    }
  }

  .content {
    padding: 24rpx;

    /deep/ .wrap_list {
      .uni-scroll-view-content {
        > uni-view {
          .flex();
          flex-wrap: wrap;
          gap: 16rpx;

          .u-list-item {
            width: calc((100% - 16rpx) / 2);
          }
        }
      }
    }
  }
}

.pop_cont {
  color: var(--text);
  .size(28rpx);
  line-height: 60rpx;
}

.pop_tip {
  color: var(--text-01);
  .size(28rpx);
  line-height: 60rpx;
}

.pop_btn {
  margin-top: 32rpx;
  height: 76rpx;
  padding: 16rpx 30rpx;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 16rpx;
  .size(24rpx);
  .flex_center();
}
</style>