集市素材管理

素材管理面板

<script setup lang="ts">
import { JsMaterialManage, PlatformType } from 'js-material-manage'

const userId = '1851228494856486913'
let headers = {
  Authorization:
    'Bearer 5hX9A8RWYTUxubPWWwTkCN4j-OhaFsfSct6ENEzRx7LbvOg3IpiOV4Ow0G2rpdr8zuAznHeZ94pDJ1aT_FJN4iaLLeDVuVpIfmqBo6lqDHhGNfS5ip0QMV0ak8p2blXq',
  'x-tenant-id': '1850879824050610177',
}
</script>

<template>
  <JsMaterialManage
    api-url="/api"
    :platform="PlatformType.Shopkeeper"
    :user-id="userId"
    :request-header="headers"
  />
</template>

<style scoped></style>

素材选择

<script setup lang="ts">
import { JSMaterialSelector,MaterialType } from 'js-material-manage'
import { ref } from 'vue'
import { NImage, NButton } from 'naive-ui'

const userId = ''
let headers = {
  Authorization:
    'token',
  'x-tenant-id': 'tenentId',
}
const selected = ref<string[]>([])
const onSelect = (data: string[]) => {
  selected.value = data
}
const onExceed = () => {
  alert("超过限制")
}
</script>

<template>
  <!--mode不传时都选-->
  <JSMaterialSelector
    :fileIds="selected"
    api-url="/api"
    :user-id="userId"
    :request-header="headers"
    :limit="10"
    mode="MaterialType.IMAGE"
    @select="onSelect"
    @exceed="onExceed"
  >
    <button>选择图片</button>
  </JSMaterialSelector>
  <div class="flex gap-4">
    <div v-for="(item, index) in selected" :key="item">
      <n-image :src="item" class="w-20 h-20" width="80px" height="80px" />
      <br />
      <n-button @click="selected.splice(index, 1)" size="tiny">删除</n-button>
    </div>
  </div>
</template>

<style scoped></style>