{"version":3,"file":"s-menu-button.js","sources":["../../../../../../src/sheep/components/s-menu-button/s-menu-button.vue","../../../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9zaGVlcC9jb21wb25lbnRzL3MtbWVudS1idXR0b24vcy1tZW51LWJ1dHRvbi52dWU"],"sourcesContent":["<!-- 装修基础组件：菜单导航（金刚区） -->\r\n<template>\r\n  <!-- 包裹层 -->\r\n  <view\r\n    class=\"ui-swiper\"\r\n    :class=\"[props.mode, props.ui]\"\r\n    :style=\"[bgStyle, { height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]\"\r\n  >\r\n    <!-- 轮播 -->\r\n    <swiper\r\n      :circular=\"props.circular\"\r\n      :current=\"state.cur\"\r\n      :autoplay=\"props.autoplay\"\r\n      :interval=\"props.interval\"\r\n      :duration=\"props.duration\"\r\n      :style=\"[{ height: swiperHeight + 'rpx' }]\"\r\n      @change=\"swiperChange\"\r\n    >\r\n      <swiper-item\r\n        v-for=\"(arr, index) in menuList\"\r\n        :key=\"index\"\r\n        :class=\"{ cur: state.cur == index }\"\r\n      >\r\n        <!-- 宫格 -->\r\n        <view class=\"grid-wrap\">\r\n          <view\r\n            v-for=\"(item, index) in arr\"\r\n            :key=\"index\"\r\n            class=\"grid-item ss-flex ss-flex-col ss-col-center ss-row-center\"\r\n            :style=\"[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]\"\r\n            hover-class=\"ss-hover-btn\"\r\n            @tap=\"sheep.$router.go(item.url)\"\r\n          >\r\n            <view class=\"menu-box ss-flex ss-flex-col ss-col-center ss-row-center\">\r\n              <view\r\n                v-if=\"item.badge.show\"\r\n                class=\"tag-box\"\r\n                :style=\"[{ background: item.badge.bgColor, color: item.badge.textColor }]\"\r\n              >\r\n                {{ item.badge.text }}\r\n              </view>\r\n              <image\r\n                v-if=\"item.iconUrl\"\r\n                class=\"menu-icon\"\r\n                :style=\"[\r\n                  {\r\n                    width: props.iconSize + 'rpx',\r\n                    height: props.iconSize + 'rpx',\r\n                  },\r\n                ]\"\r\n                :src=\"sheep.$url.cdn(item.iconUrl)\"\r\n                mode=\"aspectFill\"\r\n              ></image>\r\n              <view\r\n                v-if=\"data.layout === 'iconText'\"\r\n                class=\"menu-title\"\r\n                :style=\"[{ color: item.titleColor }]\"\r\n              >\r\n                {{ item.title }}\r\n              </view>\r\n            </view>\r\n          </view>\r\n        </view>\r\n      </swiper-item>\r\n    </swiper>\r\n    <!-- 指示点 -->\r\n    <template v-if=\"menuList.length > 1\">\r\n      <view class=\"ui-swiper-dot\" :class=\"props.dotStyle\" v-if=\"props.dotStyle != 'tag'\">\r\n        <view\r\n          class=\"line-box\"\r\n          v-for=\"(item, index) in menuList.length\"\r\n          :key=\"index\"\r\n          :class=\"[state.cur == index ? 'cur' : '', props.dotCur]\"\r\n        ></view>\r\n      </view>\r\n      <view class=\"ui-swiper-dot\" :class=\"props.dotStyle\" v-if=\"props.dotStyle == 'tag'\">\r\n        <view class=\"ui-tag radius\" :class=\"[props.dotCur]\" style=\"pointer-events: none\">\r\n          <view style=\"transform: scale(0.7)\">{{ state.cur + 1 }} / {{ menuList.length }}</view>\r\n        </view>\r\n      </view>\r\n    </template>\r\n  </view>\r\n</template>\r\n\r\n<script setup>\r\n/**\r\n * 轮播menu\r\n *\r\n * @property {Boolean} circular = false  \t\t- 是否采用衔接滑动，即播放到末尾后重新回到开头\r\n * @property {Boolean} autoplay = true  \t\t- 是否自动切换\r\n * @property {Number} interval = 5000  \t\t\t- 自动切换时间间隔\r\n * @property {Number} duration = 500  \t\t\t- 滑动动画时长,app-nvue不支持\r\n * @property {Array} list = [] \t\t\t\t\t- 轮播数据\r\n * @property {String} ui = ''  \t\t\t\t\t- 样式class\r\n * @property {String} mode  \t\t\t\t\t- 模式\r\n * @property {String} dotStyle  \t\t\t\t- 指示点样式\r\n * @property {String} dotCur= 'ui-BG-Main' \t\t- 当前指示点样式,默认主题色\r\n * @property {String} bg  \t\t\t\t\t\t- 背景\r\n *\r\n * @property {String|Number} col = 4  \t\t\t- 一行数量\r\n * @property {String|Number} row = 1 \t\t\t- 几行\r\n * @property {String} hasBorder \t\t\t\t- 是否有边框\r\n * @property {String} borderColor \t\t\t\t- 边框颜色\r\n * @property {String} background\t\t  \t\t- 背景\r\n * @property {String} hoverClass \t\t\t\t- 按压样式类\r\n * @property {String} hoverStayTime \t\t  \t- 动画时间\r\n *\r\n * @property {Array} list \t\t  \t\t\t\t- 导航列表\r\n * @property {Number} iconSize \t\t  \t\t\t- 图标大小\r\n * @property {String} color \t\t  \t\t\t- 标题颜色\r\n *\r\n */\r\n\r\nimport { reactive, computed } from 'vue'\r\nimport sheep from '@/sheep'\r\n\r\n// 数据\r\nconst state = reactive({\r\n  cur: 0,\r\n})\r\n\r\n// 接收参数\r\n\r\nconst props = defineProps({\r\n  // 装修数据\r\n  data: {\r\n    type: Object,\r\n    default: () => ({}),\r\n  },\r\n  // 装修样式\r\n  styles: {\r\n    type: Object,\r\n    default: () => ({}),\r\n  },\r\n  circular: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  autoplay: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  interval: {\r\n    type: Number,\r\n    default: 5000,\r\n  },\r\n  duration: {\r\n    type: Number,\r\n    default: 500,\r\n  },\r\n  ui: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  mode: {\r\n    // default\r\n    type: String,\r\n    default: 'default',\r\n  },\r\n  dotStyle: {\r\n    type: String,\r\n    default: 'long', // default long tag\r\n  },\r\n  dotCur: {\r\n    type: String,\r\n    default: 'ui-BG-Main',\r\n  },\r\n  height: {\r\n    type: Number,\r\n    default: 300,\r\n  },\r\n  // 是否有边框\r\n  hasBorder: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  // 边框颜色\r\n  borderColor: {\r\n    type: String,\r\n    default: 'red',\r\n  },\r\n  background: {\r\n    type: String,\r\n    default: 'blue',\r\n  },\r\n  hoverClass: {\r\n    type: String,\r\n    default: 'ss-hover-class', // 'none'为没有hover效果\r\n  },\r\n  // 一排宫格数\r\n  col: {\r\n    type: [Number, String],\r\n    default: 3,\r\n  },\r\n  iconSize: {\r\n    type: Number,\r\n    default: 80,\r\n  },\r\n  color: {\r\n    type: String,\r\n    default: '#000',\r\n  },\r\n})\r\n\r\n// 设置背景样式\r\nconst bgStyle = computed(() => {\r\n  // 直接从 props.styles 解构\r\n  const { bgType, bgImg, bgColor } = props.styles\r\n\r\n  // 根据 bgType 返回相应的样式\r\n  return {\r\n    background: bgType === 'img' ? `url(${bgImg}) no-repeat top center / 100% 100%` : bgColor,\r\n  }\r\n})\r\n\r\n// 生成数据\r\nconst menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column))\r\nconst swiperHeight = computed(() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180))\r\nconst windowWidth = sheep.$platform.device.windowWidth\r\n\r\n// current 改变时会触发 change 事件\r\nconst swiperChange = (e) => {\r\n  state.cur = e.detail.current\r\n}\r\n\r\n// 重组数据\r\nconst splitData = (oArr = [], length = 1) => {\r\n  const arr = []\r\n  let minArr = []\r\n  oArr.forEach((c) => {\r\n    if (minArr.length === length) {\r\n      minArr = []\r\n    }\r\n    if (minArr.length === 0) {\r\n      arr.push(minArr)\r\n    }\r\n    minArr.push(c)\r\n  })\r\n\r\n  return arr\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n \r\n.grid-wrap {\r\n  position: relative;\r\n  box-sizing: border-box;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  align-items: center;\r\n  width: 100%;\r\n  overflow: hidden;\r\n}\r\n\r\n.menu-box {\r\n  position: relative;\r\n  z-index: 1;\r\n  transform: translate(0, 0);\r\n\r\n  .tag-box {\r\n    position: absolute;\r\n    top: 0;\r\n    right: -6rpx;\r\n    z-index: 2;\r\n    padding: 0.4em 0.6em 0.3em;\r\n    font-size: 2em;\r\n    line-height: 1;\r\n    white-space: nowrap;\r\n    border-radius: 200rpx;\r\n    transform: scale(0.4) translateX(0.5em) translatey(-0.6em);\r\n    transform-origin: 100% 0;\r\n  }\r\n\r\n  .menu-icon {\r\n    width: 80rpx;\r\n    height: 80rpx;\r\n    padding-bottom: 10rpx;\r\n    transform: translate(0, 0);\r\n  }\r\n\r\n  .menu-title {\r\n    font-size: 24rpx;\r\n    color: #333;\r\n  }\r\n}\r\n\r\n::v-deep(.ui-swiper) {\r\n  position: relative;\r\n  z-index: 1;\r\n\r\n  .ui-swiper-dot {\r\n    position: absolute;\r\n    bottom: 20rpx;\r\n    z-index: 2;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 100%;\r\n    height: 30rpx;\r\n\r\n    &.default .line-box {\r\n      position: relative;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      width: 6px;\r\n      height: 6px;\r\n      margin: 0 10rpx;\r\n      border: 2px solid transparent;\r\n      border-radius: 50rpx;\r\n      opacity: 0.3;\r\n\r\n      &.cur {\r\n        width: 8px;\r\n        height: 8px;\r\n        border: 0px solid transparent;\r\n        opacity: 1;\r\n      }\r\n\r\n      &.cur::after {\r\n        width: 4px;\r\n        height: 4px;\r\n        content: '';\r\n        background-color: #fff;\r\n        border-radius: 50rpx;\r\n      }\r\n    }\r\n\r\n    &.long .line-box {\r\n      position: relative;\r\n      display: inline-block;\r\n      width: 6px;\r\n      height: 6px;\r\n      margin: 0 10rpx;\r\n      border-radius: 100rpx;\r\n      opacity: 0.3;\r\n\r\n      &.cur {\r\n        width: 24rpx;\r\n        opacity: 1;\r\n      }\r\n\r\n      &.cur::after {\r\n      }\r\n    }\r\n\r\n    &.line {\r\n      bottom: 20rpx;\r\n\r\n      .line-box {\r\n        position: relative;\r\n        display: inline-block;\r\n        width: 30px;\r\n        height: 3px;\r\n        opacity: 0.3;\r\n\r\n        &.cur {\r\n          opacity: 1;\r\n        }\r\n      }\r\n    }\r\n\r\n    &.tag {\r\n      position: absolute;\r\n      right: 20rpx;\r\n      bottom: 20rpx;\r\n      justify-content: flex-end;\r\n    }\r\n  }\r\n}\r\n</style>\r\n","import Component from 'D:/App/Work/addr/acdr-ui/src/sheep/components/s-menu-button/s-menu-button.vue'\nwx.createComponent(Component)"],"names":["reactive","computed","sheep"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqHA,UAAM,QAAQA,cAAAA,SAAS;AAAA,MACrB,KAAK;AAAA,IACP,CAAC;AAID,UAAM,QAAQ;AAkFd,UAAM,UAAUC,cAAQ,SAAC,MAAM;AAE7B,YAAM,EAAE,QAAQ,OAAO,QAAS,IAAG,MAAM;AAGzC,aAAO;AAAA,QACL,YAAY,WAAW,QAAQ,OAAO,KAAK,uCAAuC;AAAA,MACnF;AAAA,IACH,CAAC;AAGD,UAAM,WAAWA,cAAAA,SAAS,MAAM,UAAU,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,MAAM,KAAK,MAAM,CAAC;AAC9F,UAAM,eAAeA,cAAQ,SAAC,MAAM,MAAM,KAAK,OAAO,MAAM,KAAK,WAAW,aAAa,MAAM,IAAI;AAC/EC,gBAAAA,MAAM,UAAU,OAAO;AAG3C,UAAM,eAAe,CAAC,MAAM;AAC1B,YAAM,MAAM,EAAE,OAAO;AAAA,IACvB;AAGA,UAAM,YAAY,CAAC,OAAO,IAAI,SAAS,MAAM;AAC3C,YAAM,MAAM,CAAE;AACd,UAAI,SAAS,CAAE;AACf,WAAK,QAAQ,CAAC,MAAM;AAClB,YAAI,OAAO,WAAW,QAAQ;AAC5B,mBAAS,CAAE;AAAA,QACZ;AACD,YAAI,OAAO,WAAW,GAAG;AACvB,cAAI,KAAK,MAAM;AAAA,QAChB;AACD,eAAO,KAAK,CAAC;AAAA,MACjB,CAAG;AAED,aAAO;AAAA,IACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC/OA,GAAG,gBAAgB,SAAS;"}