pc--vr/src/views/market/outshoping.vue

<script setup>
import { ref, onMounted } from "vue";
import { placeholderPic } from "~/utils/util";

import * as commonApi from "~/api/common";

// 获取商品列表
let getConfig = ref([]);
const urladd = ref();
const __news__ = async () => {
  try {
    const { data } = await commonApi.getConfig({
      module: "shop",
    });
    getConfig.value = data.shop_images;
    urladd.value = data.shop_url;
  } catch (error) {}
};

onMounted(__news__);

let imgPath = placeholderPic(140, 140);

const tourl = () => {
  window.open(urladd.value);
};
</script>

<template>
  <div class="out-shop-container">
    <div class="out-shop__header">
      <div class="title">即将前往外部链接</div>
      <div class="tips">请注意个人账号与财产安全</div>
    </div>
    <div class="out-shop__main">
      <template v-for="(item, idx) in getConfig" :key="idx">
        <img :src="item" style="width: 140px; height: 140px" />
      </template>
    </div>
    <div class="out-shop__footer">
      <el-button type="primary" size="large" @click="tourl">继续跳转</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.out-shop {
  &-container {
    width: 680px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
  }

  &__header {
    .title {
      font-size: 18px;
      font-weight: 600;
      color: #333333;
      line-height: 2.2em;
    }

    .tips {
      font-size: 14px;
      font-weight: 400;
      color: #999999;
      line-height: 1.8em;
    }
  }

  &__main {
    padding: 10px 0;
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 20px;
    justify-content: space-between;
  }

  &__footer {
    margin-top: 20px;

    .el-button {
      width: 100%;
    }
  }
}
</style>