VAVABUY/pages/user/mystore.vue

<template>
  <theme>
    <view class="wrap">
      <Navbar title="门店列表" fixed border> </Navbar>
      <view class="content">
        <view
          class="item"
          v-for="(item, index) in detials"
          :key="index"
          @click="openUrlBlank(item.map_url)"
        >
          <view class="icon">
            <image
              class="img"
              src="/static/location.png"
              mode="widthFix"
            ></image>
          </view>
          <view class="item_cont">
            <view class="title"
              >{{ item.name }}({{ item.business_hours }})</view
            >
            <view class="location">{{ item.address }}</view>
          </view>
        </view>
      </view>
    </view>
  </theme>
</template>

<script setup>
import Navbar from "@/components/navbar";
import { computed, ref, nextTick } from "vue";
import { t } from "@/locale";
import { onShow } from "@dcloudio/uni-app";
import { SHOP_STORE_LISTS } from "@/api";
import { openUrlBlank } from "@/utils";

const detials = ref([]);
const getLists = async () => {
  try {
    const res = await SHOP_STORE_LISTS();
    detials.value = res.data || [];
  } catch (error) {
    Toast(error.msg);
  }
};

onShow(() => {
  nextTick(() => {
    getLists();
  });
});
</script>

<style lang="less" scoped>
@import url("@/style.less");
.wrap {
  background: var(--bg);
  min-height: 100vh;

  .content {
    flex-grow: 1;
    height: calc(100vh - 44px);
    flex-direction: column;
    padding: 24rpx;
    box-sizing: border-box;
    .item {
      display: flex;
      padding: 24rpx;
      margin-bottom: 24rpx;
      border-radius: 20rpx;
      box-shadow: 0px 8rpx 20rpx 0px var(--bor-color1);
      .icon {
        width: 48rpx;
        height: 48rpx;
        margin-right: 24rpx;
      }
      .item_cont {
        .title {
          color: var(--text);
          .size(28rpx);
        }
        .location {
          margin-top: 10rpx;
          .size(20rpx);
        }
      }
    }

    .null_warp {
      .null_text {
        min-height: 100rpx;
        .flex_center();
        .size(28rpx);
        color: #333;
      }
    }
  }
}
</style>