!25 商城装修

Merge pull request !25 from 疯狂的世界/master-vue3

pages/index/index.vue

@@ -5,8 +5,6 @@
 			<s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
 				<s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
 			</s-block>
-			<!-- 广告模块 -->
-			<s-popup-image />
 		</s-layout>
 	</view>
 </template>
@@ -89,4 +87,4 @@
 	onPageScroll(() => {});
 </script>
 
-<style></style>
+<style></style>

pages/index/user.vue

@@ -6,7 +6,6 @@
     :bgStyle="template.page"
     :navbarStyle="template.style?.navbar"
     onShareAppMessage
-    :showFloatButton="true"
   >
     <s-block v-for="(item, index) in template.components" :key="index" :styles="item.property.style">
       <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />

sheep/components/s-block-item/s-block-item.vue

@@ -10,6 +10,10 @@
     <s-menu-list v-if="type === 'MenuList'" :data="data" />
     <!-- 基础组件：宫格导航 -->
     <s-menu-grid v-if="type === 'MenuGrid'" :data="data" />
+    <!-- 基础组件：弹窗广告 -->
+    <s-popup-image v-if="type === 'Popover'" :data="data" />
+    <!-- 基础组件：悬浮按钮 -->
+    <s-float-menu v-if="type === 'FloatingActionButton'" :data="data" />
 
     <!-- 图文组件：图片展示 -->
     <s-image-block v-if="type === 'ImageBar'" :data="data" :styles="styles" />

sheep/components/s-float-menu/s-float-menu.vue

@@ -1,75 +1,93 @@
 <template>
-  <!-- TODO-jj: 点击遮罩关闭 -->
-  <view>
-    <view v-if="data?.show === 1">
-      <uni-fab
-        ref="fabRef"
-        :pattern="state.pattern"
-        :content="state.content"
-        horizontal="right"
-        vertical="bottom"
-        :direction="state.direction"
-        @trigger="trigger"
-        @fabClick="fabClick"
-        :popMenu="true"
-      ></uni-fab>
-    </view>
-    <view :class="state.show ? 'float-bg' : ''" @click="onTap"></view>
-  </view>
+  <!-- 模态背景：展开时显示，点击后折叠 -->
+  <view class="modal-bg" v-if="fabRef?.isShow" @click="handleCollapseFab"></view>
+  <!-- 悬浮按钮 -->
+  <uni-fab
+    ref="fabRef"
+    horizontal="right"
+    vertical="bottom"
+    :direction="state.direction"
+    :pattern="state.pattern"
+    :content="state.content"
+    @trigger="handleOpenLink"
+  />
 </template>
 <script setup>
+  /**
+   * 悬浮按钮
+   */
+
   import sheep from '@/sheep';
-  import { computed, reactive, ref, unref, getCurrentInstance } from 'vue';
+  import { reactive, ref, unref } from 'vue';
   import { onBackPress } from '@dcloudio/uni-app';
-  const data = computed(() => sheep.$store('app').template.basic?.floatMenu);
+
+  // 定义属性
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {
+        return {
+          // horizontal vertical
+          direction: 'vertical',
+          showText: true,
+          list: [{
+            imgUrl: 'http://localhost/logo.gif',
+            url: '',
+            text: '客服',
+            textColor: '',
+          }],
+        }
+      },
+    }
+  })
+
+  // 悬浮按钮配置： https://uniapp.dcloud.net.cn/component/uniui/uni-fab.html#fab-props
   const state = reactive({
+    // 可选样式配置项
     pattern: [],
+    // 展开菜单内容配置项
     content: [],
+    // 展开菜单显示方式：horizontal-水平显示，vertical-垂直显示
     direction: '',
-    show: false,
   });
 
+  // 悬浮按钮引用
   const fabRef = ref(null);
-  const vm = getCurrentInstance();
-  if (data.value?.mode === 1) {
-    state.direction = 'vertical';
-  } else {
-    state.direction = 'horizontal';
-  }
-  data.value?.list.forEach((i) => {
-    if (data.value?.isText === 0) {
-      state.content.push({ iconPath: sheep.$url.cdn(i.src), url: i.url });
-    } else {
-      state.content.push({ iconPath: sheep.$url.cdn(i.src), text: i.title.text + '', url: i.url });
-    }
-    state.pattern.push({ color: i.title.color });
+  // 按钮方向
+  state.direction = props.data.direction;
+  props.data?.list.forEach((item) => {
+    // 按钮文字
+    const text = props.data?.showText ? item.text : ''
+    // 生成内容配置项
+    state.content.push({ iconPath: sheep.$url.cdn(item.imgUrl), url: item.url, text });
+    // 生成样式配置项
+    state.pattern.push({ color: item.textColor });
   });
-  function trigger(e) {
+
+  // 处理链接跳转
+  function handleOpenLink(e) {
     sheep.$router.go(e.item.url);
   }
-  function onTap() {
-    if (state.show) {
-      state.show = false;
-      vm.refs.fabRef.close();
-    } else {
-      state.show = true;
-      vm.refs.fabRef.open();
+
+  // 折叠
+  function handleCollapseFab() {
+    if (unref(fabRef)?.isShow) {
+      unref(fabRef)?.close();
     }
   }
-  function fabClick() {
-    state.show = !state.show;
-  }
+
+  // 按返回值后，折叠悬浮按钮
   onBackPress(() => {
-    if (unref(fabRef).isShow) {
-      unref(fabRef).close();
+    if (unref(fabRef)?.isShow) {
+      unref(fabRef)?.close();
       return true;
-    } else {
-      return false;
     }
+    return false;
   });
 </script>
 <style lang="scss" scoped>
-  .float-bg {
+  /* 模态背景 */
+  .modal-bg {
     position: fixed;
     left: 0;
     top: 0;

sheep/components/s-layout/s-layout.vue

@@ -36,9 +36,6 @@
         <!-- 页面内容插槽 -->
         <slot />
 
-        <!-- 悬浮按钮 -->
-        <s-float-menu v-if="showFloatButton"></s-float-menu>
-
         <!-- 底部导航 -->
         <s-tabbar v-if="tabbar !== ''" :path="tabbar" />
       </view>
@@ -130,11 +127,6 @@
       type: String,
       default: '',
     },
-    //展示悬浮按钮
-    showFloatButton: {
-      type: Boolean,
-      default: false,
-    },
     //展示返回按钮
     showLeftButton: {
       type: Boolean,

sheep/components/s-popup-image/s-popup-image.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <view v-for="(item, index) in popupList" :key="item.src">
+    <view v-for="(item, index) in popupList" :key="index">
       <su-popup
         v-if="index === currentIndex"
         :show="item.isShow"
@@ -14,7 +14,7 @@
         <view class="img-box">
           <image
             class="modal-img"
-            :src="sheep.$url.cdn(item.src)"
+            :src="sheep.$url.cdn(item.imgUrl)"
             mode="widthFix"
             @tap.stop="onPopup(item.url)"
           />
@@ -27,34 +27,46 @@
 <script setup>
   import sheep from '@/sheep';
   import { computed, ref } from 'vue';
-  import { onShow } from '@dcloudio/uni-app';
   import { saveAdvHistory } from '@/sheep/hooks/useModal';
 
+  // 定义属性
+  const props = defineProps({
+    data: {
+      type: Object,
+      default() {},
+    }
+  })
+
   // const modalStore = sheep.$store('modal');
   const modalStore = JSON.parse(uni.getStorageSync('modal-store') || '{}');
+  console.log(modalStore)
   const advHistory = modalStore.advHistory || [];
   const currentIndex = ref(0);
   const popupList = computed(() => {
-    const list = sheep.$store('app').template.basic?.popupImage?.list || [];
+    const list = props.data.list || [];
     const newList = [];
     if (list.length > 0) {
       list.forEach((adv) => {
-        if (adv.show === 1 && advHistory.includes(adv.src)) {
+        if (adv.showType === 'once' && advHistory.includes(adv.imgUrl)) {
           adv.isShow = false;
         } else {
           adv.isShow = true;
           newList.push(adv);
         }
+
+        // 记录弹窗已显示过
         saveAdvHistory(adv);
       });
     }
     return newList;
   });
 
+  // 跳转链接
   function onPopup(path) {
     sheep.$router.go(path);
   }
 
+  // 关闭
   function onClose(index) {
     currentIndex.value = index + 1;
     popupList.value[index].isShow = false;

sheep/components/s-wallet-card/s-wallet-card.vue

@@ -4,7 +4,7 @@
 		<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
 			@tap="sheep.$router.go('/pages/user/wallet/money')">
 			<view class="value-box ss-flex ss-col-bottom">
-				<view class="value-text ss-line-1">{{ userInfo.money }}</view>
+				<view class="value-text ss-line-1">{{ userInfo.money || '0.00' }}</view>
 				<view class="unit-text ss-m-l-6">元</view>
 			</view>
 			<view class="menu-title ss-m-t-28">账户余额</view>
@@ -12,7 +12,7 @@
 		<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
 			@tap="sheep.$router.go('/pages/user/wallet/score')">
 			<view class="value-box ss-flex ss-col-bottom">
-				<view class="value-text">{{ userInfo.point }}</view>
+				<view class="value-text">{{ userInfo.point || '0.00' }}</view>
 				<view class="unit-text ss-m-l-6">个</view>
 			</view>
 			<view class="menu-title ss-m-t-28">积分</view>
@@ -23,7 +23,7 @@
         })
       ">
 			<view class="value-box ss-flex ss-col-bottom">
-				<view class="value-text">{{ numData.coupons_num }}</view>
+				<view class="value-text">{{ numData.coupons_num || '0.00' }}</view>
 				<view class="unit-text ss-m-l-6">张</view>
 			</view>
 			<view class="menu-title ss-m-t-28">优惠券</view>
@@ -91,4 +91,5 @@
 			}
 		}
 	}
-</style>
+</style>
+

sheep/hooks/useModal.js

@@ -121,8 +121,8 @@ export function saveAdvHistory(adv) {
   const modal = $store('modal');
 
   modal.$patch((state) => {
-    if (!state.advHistory.includes(adv.src)) {
-      state.advHistory.push(adv.src);
+    if (!state.advHistory.includes(adv.imgUrl)) {
+      state.advHistory.push(adv.imgUrl);
     }
   });
 }