package.json

@@ -8,7 +8,6 @@
     "prettier": "prettier --write  \"{pages,sheep}/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
     "build:prod": "vue-cli-service build --mode prod",
     "build:dev": "vue-cli-service build --mode dev"
-    
   },
   "repository": "https://github.com/sheepjs/shop.git",
   "keywords": [
@@ -93,6 +92,7 @@
   "dependencies": {
     "dayjs": "^1.11.7",
     "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "luch-request": "^3.0.8",
     "pinia": "^2.0.33",
     "pinia-plugin-persist-uni": "^1.2.0",

pages.json

@@ -73,6 +73,42 @@
 		},
 		{
 			"path": "pages/index/page",
+			"style": {
+				"navigationBarTitleText": "1"
+			},
+			"meta": {
+				"auth": false,
+				"sync": true,
+				"title": "自定义页面",
+				"group": "商城"
+			}
+		},
+		{
+			"path": "pages/index/page2",
+			"style": {
+				"navigationBarTitleText": "2"
+			},
+			"meta": {
+				"auth": false,
+				"sync": true,
+				"title": "自定义页面二",
+				"group": "商城二"
+			}
+		},
+		{
+			"path": "pages/index/page3",
+			"style": {
+				"navigationBarTitleText": ""
+			},
+			"meta": {
+				"auth": false,
+				"sync": true,
+				"title": "自定义页面",
+				"group": "商城"
+			}
+		},
+		{
+			"path": "pages/index/page4",
 			"style": {
 				"navigationBarTitleText": ""
 			},

pages/goods/components/detail/detail-tabbar.vue

@@ -11,7 +11,7 @@
           <block v-if="modelValue.favorite">
             <image
               class="item-icon"
-              :src="sheep.$url.static('/static/img/shop/goods/collect_1.gif')"
+              src="@/static/images/collect_1.gif"
               mode="aspectFit"
             />
             <view class="item-title">已收藏</view>
@@ -19,7 +19,7 @@
           <block v-else>
             <image
               class="item-icon"
-              :src="sheep.$url.static('/static/img/shop/goods/collect_0.png')"
+              src="@/static/images/collect_0.png"
               mode="aspectFit"
             />
             <view class="item-title">收藏</view>
@@ -32,7 +32,7 @@
         >
           <image
             class="item-icon"
-            :src="sheep.$url.static('/static/img/shop/goods/message.png')"
+            src="/static/images/service.png"
             mode="aspectFit"
           />
           <view class="item-title">客服</view>
@@ -44,7 +44,7 @@
         >
           <image
             class="item-icon"
-            :src="sheep.$url.static('/static/img/shop/goods/share.png')"
+            src="@/static/images/share.png"
             mode="aspectFit"
           />
           <view class="item-title">分享</view>

pages/goods/groupon.vue

@@ -156,7 +156,7 @@
   import CombinationApi from '@/sheep/api/promotion/combination';
   import SpuApi from '@/sheep/api/product/spu';
 
-  const headerBg = sheep.$url.css('/static/img/shop/goods/groupon-bg.png');
+  const headerBg = '@/static/images/seckill-header.png';
   const btnBg = sheep.$url.css('/static/img/shop/goods/groupon-btn.png');
   const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
   const grouponBg = sheep.$url.css('/static/img/shop/goods/groupon-tip-bg.png');
@@ -293,7 +293,7 @@
     // height: 320rpx;
     background-size: 100% 100%;
     border-radius: 10rpx;
-    background-image: v-bind(headerBg);
+    background-image: url('@/static/images/seckill-header.png');
     background-repeat: no-repeat;
 
     .price-box {
@@ -417,7 +417,7 @@
       font-size: 24rpx;
       font-weight: 600;
       margin-left: -36rpx;
-      background-image: v-bind(btnBg);
+      background-image: url('@/static/images/groupon-btn.png');
       background-repeat: no-repeat;
       background-size: 100% 100%;
       color: #ffffff;
@@ -430,7 +430,7 @@
       font-size: 24rpx;
       font-weight: 600;
       margin-left: -36rpx;
-      background-image: v-bind(disabledBtnBg);
+      background-image: url('@/static/images/activity-btn-disabled.png');
       background-repeat: no-repeat;
       background-size: 100% 100%;
       color: #999999;

pages/index/page.vue

@@ -3,6 +3,7 @@
   <s-layout
     :title="state.name"
     navbar="custom"
+	tabbar="/pages/index/page"
     :bgStyle="state.page"
     :navbarStyle="state.navigationBar"
     onShareAppMessage

pages/index/page2.vue

@@ -0,0 +1,52 @@
+<!-- 自定义页面：支持装修 -->
+<template>
+  <s-layout
+    :title="state.name"
+    navbar="custom"
+	tabbar="/pages/index/page2"
+    :bgStyle="state.page"
+    :navbarStyle="state.navigationBar"
+    onShareAppMessage
+    showLeftButton
+  >
+    <s-block v-for="(item, index) in state.components" :key="index" :styles="item.property.style">
+      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+    </s-block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import DiyApi from '@/sheep/api/promotion/diy';
+
+  const state = reactive({
+    name: '',
+    components: [],
+    navigationBar: {},
+    page: {},
+  });
+  onLoad(async (options) => {
+    let id = options.id;
+
+    // #ifdef MP
+    // 小程序预览自定义页面
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      id = sceneParams[1];
+    }
+    // #endif
+
+    const { code, data } = await DiyApi.getDiyPage(id);
+    if (code === 0) {
+      state.name = data.name;
+      state.components = data.property?.components;
+      state.navigationBar = data.property?.navigationBar;
+      state.page = data.property?.page;
+    }
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>

pages/index/page3.vue

@@ -0,0 +1,52 @@
+<!-- 自定义页面：支持装修 -->
+<template>
+  <s-layout
+    :title="state.name"
+    navbar="custom"
+	tabbar="/pages/index/page3"
+    :bgStyle="state.page"
+    :navbarStyle="state.navigationBar"
+    onShareAppMessage
+    showLeftButton
+  >
+    <s-block v-for="(item, index) in state.components" :key="index" :styles="item.property.style">
+      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+    </s-block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import DiyApi from '@/sheep/api/promotion/diy';
+
+  const state = reactive({
+    name: '',
+    components: [],
+    navigationBar: {},
+    page: {},
+  });
+  onLoad(async (options) => {
+    let id = options.id;
+
+    // #ifdef MP
+    // 小程序预览自定义页面
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      id = sceneParams[1];
+    }
+    // #endif
+
+    const { code, data } = await DiyApi.getDiyPage(id);
+    if (code === 0) {
+      state.name = data.name;
+      state.components = data.property?.components;
+      state.navigationBar = data.property?.navigationBar;
+      state.page = data.property?.page;
+    }
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>

pages/index/page4.vue

@@ -0,0 +1,52 @@
+<!-- 自定义页面：支持装修 -->
+<template>
+  <s-layout
+    :title="state.name"
+    navbar="custom"
+	tabbar="/pages/index/page4"
+    :bgStyle="state.page"
+    :navbarStyle="state.navigationBar"
+    onShareAppMessage
+    showLeftButton
+  >
+    <s-block v-for="(item, index) in state.components" :key="index" :styles="item.property.style">
+      <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
+    </s-block>
+  </s-layout>
+</template>
+
+<script setup>
+  import { reactive } from 'vue';
+  import { onLoad, onPageScroll } from '@dcloudio/uni-app';
+  import DiyApi from '@/sheep/api/promotion/diy';
+
+  const state = reactive({
+    name: '',
+    components: [],
+    navigationBar: {},
+    page: {},
+  });
+  onLoad(async (options) => {
+    let id = options.id;
+
+    // #ifdef MP
+    // 小程序预览自定义页面
+    if (options.scene) {
+      const sceneParams = decodeURIComponent(options.scene).split('=');
+      id = sceneParams[1];
+    }
+    // #endif
+
+    const { code, data } = await DiyApi.getDiyPage(id);
+    if (code === 0) {
+      state.name = data.name;
+      state.components = data.property?.components;
+      state.navigationBar = data.property?.navigationBar;
+      state.page = data.property?.page;
+    }
+  });
+
+  onPageScroll(() => {});
+</script>
+
+<style></style>

pages/index/user.vue

@@ -1,13 +1,14 @@
 <!-- 个人中心：支持装修 -->
 <template>
   <s-layout
-    title="我的"
+    title=" "
     tabbar="/pages/index/user"
-    navbar="custom"
+    navbar="normal"
     :bgStyle="template.page"
     :navbarStyle="template.navigationBar"
     onShareAppMessage
   >
+  <image class="seckill" src="@/static/images/seckill-bg.png"></image>
     <s-block
       v-for="(item, index) in template.components"
       :key="index"
@@ -43,4 +44,12 @@
   onPageScroll(() => {});
 </script>
 
-<style></style>
+<style>
+	.seckill{
+		width:100%;
+		position:absolute;
+	}
+	view{
+		position: relative;
+	}
+</style>

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

@@ -1,5 +1,6 @@
 <template>
 	<view>
+		
 		<!-- 基础组件：搜索框 -->
 		<s-search-block v-if="type === 'SearchBar'" :data="data" :styles="styles" :navbar="false" />
 		<!-- 基础组件：公告栏 -->

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

@@ -1,365 +1,349 @@
 <!-- 装修基础组件：菜单导航（金刚区） -->
 <template>
-  <!-- 包裹层 -->
+	<view>
-  <view
+		<view class="title">
-    class="ui-swiper"
+			我的服务
-    :class="[props.mode, props.bg, props.ui]"
+		</view>
-    :style="[{ height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]"
+		<!-- 包裹层 -->
-  >
+		<view class="ui-swiper" :class="[props.mode, props.bg, props.ui]"
-    <!-- 轮播 -->
+			:style="[{ height: swiperHeight + (menuList.length > 1 ? 50 : 0) + 'rpx' }]">
-    <swiper
+			<!-- 轮播 -->
-      :circular="props.circular"
+			<swiper :circular="props.circular" :current="state.cur" :autoplay="props.autoplay"
-      :current="state.cur"
+				:interval="props.interval" :duration="props.duration" :style="[{ height: swiperHeight + 'rpx' }]"
-      :autoplay="props.autoplay"
+				@change="swiperChange">
-      :interval="props.interval"
+				<swiper-item v-for="(arr, index) in menuList" :key="index" :class="{ cur: state.cur == index }">
-      :duration="props.duration"
+					<!-- 宫格 -->
-      :style="[{ height: swiperHeight + 'rpx' }]"
+					<view class="grid-wrap">
-      @change="swiperChange"
+						<view v-for="(item, index) in arr" :key="index"
-    >
+							class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
-      <swiper-item
+							:style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
-        v-for="(arr, index) in menuList"
+							hover-class="ss-hover-btn" @tap="sheep.$router.go(item.url)">
-        :key="index"
+							<view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
-        :class="{ cur: state.cur == index }"
+								<view v-if="item.badge.show" class="tag-box"
-      >
+									:style="[{ background: item.badge.bgColor, color: item.badge.textColor }]">
-        <!-- 宫格 -->
+									{{ item.badge.text }}
-        <view class="grid-wrap">
+								</view>
-          <view
+								<image v-if="item.iconUrl" class="menu-icon" :style="[
-            v-for="(item, index) in arr"
-            :key="index"
-            class="grid-item ss-flex ss-flex-col ss-col-center ss-row-center"
-            :style="[{ width: `${100 * (1 / data.column)}%`, height: '200rpx' }]"
-            hover-class="ss-hover-btn"
-            @tap="sheep.$router.go(item.url)"
-          >
-            <view class="menu-box ss-flex ss-flex-col ss-col-center ss-row-center">
-              <view
-                v-if="item.badge.show"
-                class="tag-box"
-                :style="[{ background: item.badge.bgColor, color: item.badge.textColor }]"
-              >
-                {{ item.badge.text }}
-              </view>
-              <image
-                v-if="item.iconUrl"
-                class="menu-icon"
-                :style="[
                   {
                     width: props.iconSize + 'rpx',
                     height: props.iconSize + 'rpx',
                   },
-                ]"
+                ]" :src="sheep.$url.cdn(item.iconUrl)" mode="aspectFill"></image>
-                :src="sheep.$url.cdn(item.iconUrl)"
+								<view v-if="data.layout === 'iconText'" class="menu-title"
-                mode="aspectFill"
+									:style="[{ color: item.titleColor }]">
-              ></image>
+									{{ item.title }}
-              <view
+								</view>
-                v-if="data.layout === 'iconText'"
+							</view>
-                class="menu-title"
+						</view>
-                :style="[{ color: item.titleColor }]"
+					</view>
-              >
+				</swiper-item>
-                {{ item.title }}
+			</swiper>
-              </view>
+			<!-- 指示点 -->
-            </view>
+			<template v-if="menuList.length > 1">
-          </view>
+				<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
-        </view>
+					<view class="line-box" v-for="(item, index) in menuList.length" :key="index"
-      </swiper-item>
+						:class="[state.cur == index ? 'cur' : '', props.dotCur]"></view>
-    </swiper>
+				</view>
-    <!-- 指示点 -->
+				<view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
-    <template v-if="menuList.length > 1">
+					<view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
-      <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle != 'tag'">
+						<view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view>
-        <view
+					</view>
-          class="line-box"
+				</view>
-          v-for="(item, index) in menuList.length"
+			</template>
-          :key="index"
+		</view>
-          :class="[state.cur == index ? 'cur' : '', props.dotCur]"
+	</view>
-        ></view>
-      </view>
-      <view class="ui-swiper-dot" :class="props.dotStyle" v-if="props.dotStyle == 'tag'">
-        <view class="ui-tag radius" :class="[props.dotCur]" style="pointer-events: none">
-          <view style="transform: scale(0.7)">{{ state.cur + 1 }} / {{ menuList.length }}</view>
-        </view>
-      </view>
-    </template>
-  </view>
 </template>
 
 <script setup>
-  /**
+	/**
-   * 轮播menu
+	 * 轮播menu
-   *
+	 *
-   * @property {Boolean} circular = false  		- 是否采用衔接滑动，即播放到末尾后重新回到开头
+	 * @property {Boolean} circular = false  		- 是否采用衔接滑动，即播放到末尾后重新回到开头
-   * @property {Boolean} autoplay = true  		- 是否自动切换
+	 * @property {Boolean} autoplay = true  		- 是否自动切换
-   * @property {Number} interval = 5000  			- 自动切换时间间隔
+	 * @property {Number} interval = 5000  			- 自动切换时间间隔
-   * @property {Number} duration = 500  			- 滑动动画时长,app-nvue不支持
+	 * @property {Number} duration = 500  			- 滑动动画时长,app-nvue不支持
-   * @property {Array} list = [] 					- 轮播数据
+	 * @property {Array} list = [] 					- 轮播数据
-   * @property {String} ui = ''  					- 样式class
+	 * @property {String} ui = ''  					- 样式class
-   * @property {String} mode  					- 模式
+	 * @property {String} mode  					- 模式
-   * @property {String} dotStyle  				- 指示点样式
+	 * @property {String} dotStyle  				- 指示点样式
-   * @property {String} dotCur= 'ui-BG-Main' 		- 当前指示点样式,默认主题色
+	 * @property {String} dotCur= 'ui-BG-Main' 		- 当前指示点样式,默认主题色
-   * @property {String} bg  						- 背景
+	 * @property {String} bg  						- 背景
-   *
+	 *
-   * @property {String|Number} col = 4  			- 一行数量
+	 * @property {String|Number} col = 4  			- 一行数量
-   *  @property {String|Number} row = 1 			- 几行
+	 *  @property {String|Number} row = 1 			- 几行
-   * @property {String} hasBorder 				- 是否有边框
+	 * @property {String} hasBorder 				- 是否有边框
-   * @property {String} borderColor 				- 边框颜色
+	 * @property {String} borderColor 				- 边框颜色
-   * @property {String} background		  		- 背景
+	 * @property {String} background		  		- 背景
-   * @property {String} hoverClass 				- 按压样式类
+	 * @property {String} hoverClass 				- 按压样式类
-   * @property {String} hoverStayTime 		  	- 动画时间
+	 * @property {String} hoverStayTime 		  	- 动画时间
-   *
+	 *
-   * @property {Array} list 		  				- 导航列表
+	 * @property {Array} list 		  				- 导航列表
-   * @property {Number} iconSize 		  			- 图标大小
+	 * @property {Number} iconSize 		  			- 图标大小
-   * @property {String} color 		  			- 标题颜色
+	 * @property {String} color 		  			- 标题颜色
-   *
+	 *
-   */
+	 */
 
-  import { reactive, computed } from 'vue';
+	import {
-  import sheep from '@/sheep';
+		reactive,
+		computed
+	} from 'vue';
+	import sheep from '@/sheep';
 
-  // 数据
+	// 数据
-  const state = reactive({
+	const state = reactive({
-    cur: 0,
+		cur: 0,
-  });
+	});
 
-  // 接收参数
+	// 接收参数
 
-  const props = defineProps({
+	const props = defineProps({
-    data: {
+		data: {
-      type: Object,
+			type: Object,
-      default() {},
+			default () {},
-    },
+		},
-    styles: {
+		styles: {
-      type: Object,
+			type: Object,
-      default() {},
+			default () {},
-    },
+		},
-    circular: {
+		circular: {
-      type: Boolean,
+			type: Boolean,
-      default: true,
+			default: true,
-    },
+		},
-    autoplay: {
+		autoplay: {
-      type: Boolean,
+			type: Boolean,
-      default: false,
+			default: false,
-    },
+		},
-    interval: {
+		interval: {
-      type: Number,
+			type: Number,
-      default: 5000,
+			default: 5000,
-    },
+		},
-    duration: {
+		duration: {
-      type: Number,
+			type: Number,
-      default: 500,
+			default: 500,
-    },
+		},
 
-    ui: {
+		ui: {
-      type: String,
+			type: String,
-      default: '',
+			default: '',
-    },
+		},
-    mode: {
+		mode: {
-      //default
+			//default
-      type: String,
+			type: String,
-      default: 'default',
+			default: 'default',
-    },
+		},
-    dotStyle: {
+		dotStyle: {
-      type: String,
+			type: String,
-      default: 'long', //default long tag
+			default: 'long', //default long tag
-    },
+		},
-    dotCur: {
+		dotCur: {
-      type: String,
+			type: String,
-      default: 'ui-BG-Main',
+			default: 'ui-BG-Main',
-    },
+		},
-    bg: {
+		bg: {
-      type: String,
+			type: String,
-      default: 'bg-none',
+			default: 'bg-none',
-    },
+		},
-    height: {
+		height: {
-      type: Number,
+			type: Number,
-      default: 300,
+			default: 300,
-    },
+		},
 
-    // 是否有边框
+		// 是否有边框
-    hasBorder: {
+		hasBorder: {
-      type: Boolean,
+			type: Boolean,
-      default: true,
+			default: true,
-    },
+		},
-    // 边框颜色
+		// 边框颜色
-    borderColor: {
+		borderColor: {
-      type: String,
+			type: String,
-      default: 'red',
+			default: 'red',
-    },
+		},
-    background: {
+		background: {
-      type: String,
+			type: String,
-      default: 'blue',
+			default: 'blue',
-    },
+		},
-    hoverClass: {
+		hoverClass: {
-      type: String,
+			type: String,
-      default: 'ss-hover-class', //'none'为没有hover效果
+			default: 'ss-hover-class', //'none'为没有hover效果
-    },
+		},
-    // 一排宫格数
+		// 一排宫格数
-    col: {
+		col: {
-      type: [Number, String],
+			type: [Number, String],
-      default: 3,
+			default: 3,
-    },
+		},
-    iconSize: {
+		iconSize: {
-      type: Number,
+			type: Number,
-      default: 80,
+			default: 80,
-    },
+		},
-    color: {
+		color: {
-      type: String,
+			type: String,
-      default: '#000',
+			default: '#000',
-    },
+		},
-  });
+	});
 
-  // 生成数据
+	// 生成数据
-  const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
+	const menuList = computed(() => splitData(props.data.list, props.data.row * props.data.column));
-  const swiperHeight = computed(
+	const swiperHeight = computed(
-    () => props.data.row * (props.data.layout === 'iconText' ? 200 : 180),
+		() => props.data.row * (props.data.layout === 'iconText' ? 200 : 180),
-  );
+	);
-  const windowWidth = sheep.$platform.device.windowWidth;
+	const windowWidth = sheep.$platform.device.windowWidth;
 
-  // current 改变时会触发 change 事件
+	// current 改变时会触发 change 事件
-  const swiperChange = (e) => {
+	const swiperChange = (e) => {
-    state.cur = e.detail.current;
+		state.cur = e.detail.current;
-  };
+	};
 
-  // 重组数据
+	// 重组数据
-  const splitData = (oArr = [], length = 1) => {
+	const splitData = (oArr = [], length = 1) => {
-    let arr = [];
+		let arr = [];
-    let minArr = [];
+		let minArr = [];
-    oArr.forEach((c) => {
+		oArr.forEach((c) => {
-      if (minArr.length === length) {
+			if (minArr.length === length) {
-        minArr = [];
+				minArr = [];
-      }
+			}
-      if (minArr.length === 0) {
+			if (minArr.length === 0) {
-        arr.push(minArr);
+				arr.push(minArr);
-      }
+			}
-      minArr.push(c);
+			minArr.push(c);
-    });
+		});
 
-    return arr;
+		return arr;
-  };
+	};
 </script>
 
 <style lang="scss" scoped>
-  .grid-wrap {
+	.title {
-    width: 100%;
+		padding: 10px 20px;
-    display: flex;
+		height: 20px;
-    position: relative;
+		line-height: 20px;
-    box-sizing: border-box;
+		font-size: 16px;
-    overflow: hidden;
+		font-weight: 600;
-    flex-wrap: wrap;
+		border-bottom: 1px solid #dcdcdc;
-    align-items: center;
+	}
-  }
-  .menu-box {
-    position: relative;
-    z-index: 1;
-    transform: translate(0, 0);
 
-    .tag-box {
+	.grid-wrap {
-      position: absolute;
+		width: 100%;
-      z-index: 2;
+		display: flex;
-      top: 0;
+		position: relative;
-      right: -6rpx;
+		box-sizing: border-box;
-      font-size: 2em;
+		overflow: hidden;
-      line-height: 1;
+		flex-wrap: wrap;
-      padding: 0.4em 0.6em 0.3em;
+		align-items: center;
-      transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
+	}
-      transform-origin: 100% 0;
-      border-radius: 200rpx;
-      white-space: nowrap;
-    }
 
-    .menu-icon {
+	.menu-box {
-      transform: translate(0, 0);
+		position: relative;
-      width: 80rpx;
+		z-index: 1;
-      height: 80rpx;
+		transform: translate(0, 0);
-      padding-bottom: 10rpx;
-    }
 
-    .menu-title {
+		.tag-box {
-      font-size: 24rpx;
+			position: absolute;
-      color: #333;
+			z-index: 2;
-    }
+			top: 0;
-  }
+			right: -6rpx;
+			font-size: 2em;
+			line-height: 1;
+			padding: 0.4em 0.6em 0.3em;
+			transform: scale(0.4) translateX(0.5em) translatey(-0.6em);
+			transform-origin: 100% 0;
+			border-radius: 200rpx;
+			white-space: nowrap;
+		}
 
-  ::v-deep(.ui-swiper) {
+		.menu-icon {
-    position: relative;
+			transform: translate(0, 0);
-    z-index: 1;
+			width: 80rpx;
+			height: 80rpx;
+			padding-bottom: 10rpx;
+		}
 
-    .ui-swiper-dot {
+		.menu-title {
-      position: absolute;
+			font-size: 24rpx;
-      width: 100%;
+			color: #333;
-      bottom: 20rpx;
+		}
-      height: 30rpx;
+	}
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2;
 
-      &.default .line-box {
+	::v-deep(.ui-swiper) {
-        display: inline-flex;
+		position: relative;
-        border-radius: 50rpx;
+		z-index: 1;
-        width: 6px;
-        height: 6px;
-        border: 2px solid transparent;
-        margin: 0 10rpx;
-        opacity: 0.3;
-        position: relative;
-        justify-content: center;
-        align-items: center;
 
-        &.cur {
+		.ui-swiper-dot {
-          width: 8px;
+			position: absolute;
-          height: 8px;
+			width: 100%;
-          opacity: 1;
+			bottom: 20rpx;
-          border: 0px solid transparent;
+			height: 30rpx;
-        }
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			z-index: 2;
 
-        &.cur::after {
+			&.default .line-box {
-          content: '';
+				display: inline-flex;
-          border-radius: 50rpx;
+				border-radius: 50rpx;
-          width: 4px;
+				width: 6px;
-          height: 4px;
+				height: 6px;
-          background-color: #fff;
+				border: 2px solid transparent;
-        }
+				margin: 0 10rpx;
-      }
+				opacity: 0.3;
+				position: relative;
+				justify-content: center;
+				align-items: center;
 
-      &.long .line-box {
+				&.cur {
-        display: inline-block;
+					width: 8px;
-        border-radius: 100rpx;
+					height: 8px;
-        width: 6px;
+					opacity: 1;
-        height: 6px;
+					border: 0px solid transparent;
-        margin: 0 10rpx;
+				}
-        opacity: 0.3;
-        position: relative;
 
-        &.cur {
+				&.cur::after {
-          width: 24rpx;
+					content: '';
-          opacity: 1;
+					border-radius: 50rpx;
-        }
+					width: 4px;
+					height: 4px;
+					background-color: #fff;
+				}
+			}
 
-        &.cur::after {
+			&.long .line-box {
-        }
+				display: inline-block;
-      }
+				border-radius: 100rpx;
+				width: 6px;
+				height: 6px;
+				margin: 0 10rpx;
+				opacity: 0.3;
+				position: relative;
 
-      &.line {
+				&.cur {
-        bottom: 20rpx;
+					width: 24rpx;
+					opacity: 1;
+				}
 
-        .line-box {
+				&.cur::after {}
-          display: inline-block;
+			}
-          width: 30px;
-          height: 3px;
-          opacity: 0.3;
-          position: relative;
 
-          &.cur {
+			&.line {
-            opacity: 1;
+				bottom: 20rpx;
-          }
-        }
-      }
 
-      &.tag {
+				.line-box {
-        justify-content: flex-end;
+					display: inline-block;
-        position: absolute;
+					width: 30px;
-        bottom: 20rpx;
+					height: 3px;
-        right: 20rpx;
+					opacity: 0.3;
-      }
+					position: relative;
-    }
+
-  }
+					&.cur {
-</style>
+						opacity: 1;
+					}
+				}
+			}
+
+			&.tag {
+				justify-content: flex-end;
+				position: absolute;
+				bottom: 20rpx;
+				right: 20rpx;
+			}
+		}
+	}
+</style>

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

@@ -1,108 +1,129 @@
 <!-- 装修用户组件：用户订单 -->
 <template>
-  <view class="ss-order-menu-wrap ss-flex ss-col-center">
+	<view>
-    <view
+		<view class="title">
-      class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center"
+			订单中心
-      v-for="item in orderMap"
+		</view>
-      :key="item.title"
+		<view class="ss-order-menu-wrap ss-flex ss-col-center">
-      @tap="sheep.$router.go(item.path, { type: item.value })"
+
-    >
+			<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" v-for="(item, index) in orderMap"
-      <uni-badge
+				:key="item.title" @tap="sheep.$router.go(item.path, { type: item.value })">
-        class="uni-badge-left-margin"
+				<uni-badge class="uni-badge-left-margin" :text="numData.orderCount[item.count]" absolute="rightTop"
-        :text="numData.orderCount[item.count]"
+					size="small">
-        absolute="rightTop"
+					<image v-if="index == 0" class="item-icon" :src="imag0" mode="aspectFit" />
-        size="small"
+					<image v-if="index == 1" class="item-icon" :src="imag1" mode="aspectFit" />
-      >
+					<image v-if="index == 2" class="item-icon" :src="imag2" mode="aspectFit" />
-        <image class="item-icon" :src="sheep.$url.static(item.icon)" mode="aspectFit" />
+					<image v-if="index == 3" class="item-icon" :src="imag3" mode="aspectFit" />
-      </uni-badge>
+					<image v-if="index == 4" class="item-icon" :src="imag4" mode="aspectFit" />
-      <view class="menu-title ss-m-t-28">{{ item.title }}</view>
+				</uni-badge>
-    </view>
+				<view class="menu-title ss-m-t-28">{{ item.title }}</view>
-  </view>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script setup>
-  /**
+	import imag0 from '@/static/images/no_0.png'
-   * 装修组件 - 订单菜单组
+	import imag1 from '@/static/images/no_take.png'
-   */
+	import imag2 from '@/static/images/no_comment.png'
-  import sheep from '@/sheep';
+	import imag3 from '@/static/images/order.png'
-  import { computed } from 'vue';
+	import imag4 from '@/static/images/order.png'
+	/**
+	 * 装修组件 - 订单菜单组
+	 */
+	import sheep from '@/sheep';
+	import {
+		computed
+	} from 'vue';
 
-  const orderMap = [
+	const orderMap = [{
-    {
+			title: '待付款',
-      title: '待付款',
+			value: '1',
-      value: '1',
+			icon: '/static/img/shop/order/no_pay.png',
-      icon: '/static/img/shop/order/no_pay.png',
+			path: '/pages/order/list',
-      path: '/pages/order/list',
+			type: 'unpaid',
-      type: 'unpaid',
+			count: 'unpaidCount',
-      count: 'unpaidCount',
+		},
-    },
+		{
-    {
+			title: '待收货',
-      title: '待收货',
+			value: '3',
-      value: '3',
+			icon: '/static/img/shop/order/no_take.png',
-      icon: '/static/img/shop/order/no_take.png',
+			path: '/pages/order/list',
-      path: '/pages/order/list',
+			type: 'noget',
-      type: 'noget',
+			count: 'deliveredCount',
-      count: 'deliveredCount',
+		},
-    },
+		{
-    {
+			title: '待评价',
-      title: '待评价',
+			value: '4',
-      value: '4',
+			icon: '/static/img/shop/order/no_comment.png',
-      icon: '/static/img/shop/order/no_comment.png',
+			path: '/pages/order/list',
-      path: '/pages/order/list',
+			type: 'nocomment',
-      type: 'nocomment',
+			count: 'uncommentedCount',
-      count: 'uncommentedCount',
+		},
-    },
+		{
-    {
+			title: '售后单',
-      title: '售后单',
+			value: '0',
-      value: '0',
+			icon: '/static/img/shop/order/change_order.png',
-      icon: '/static/img/shop/order/change_order.png',
+			path: '/pages/order/aftersale/list',
-      path: '/pages/order/aftersale/list',
+			type: 'aftersale',
-      type: 'aftersale',
+			count: 'afterSaleCount',
-      count: 'afterSaleCount',
+		},
-    },
+		{
-    {
+			title: '全部订单',
-      title: '全部订单',
+			value: '0',
-      value: '0',
+			icon: '/static/img/shop/order/all_order.png',
-      icon: '/static/img/shop/order/all_order.png',
+			path: '/pages/order/list',
-      path: '/pages/order/list',
+		},
-    },
+	];
-  ];
 
-  const numData = computed(() => sheep.$store('user').numData);
+	const numData = computed(() => sheep.$store('user').numData);
 </script>
 
 <style lang="scss" scoped>
-  .ss-order-menu-wrap {
+	.title {
-    .menu-item {
+		padding: 10px 20px;
-      height: 160rpx;
+		height: 20px;
-      position: relative;
+		line-height: 20px;
-      z-index: 10;
+		font-size: 16px;
-      .menu-title {
+		font-weight: 600;
-        font-size: 24rpx;
+		border-bottom: 1px solid #dcdcdc;
-        line-height: 24rpx;
+	}
-        color: #333333;
+
-      }
+	.ss-order-menu-wrap {
-      .item-icon {
+		.menu-item {
-        width: 44rpx;
+			height: 160rpx;
-        height: 44rpx;
+			position: relative;
-      }
+			z-index: 10;
-      .num-icon {
+
-        position: absolute;
+			.menu-title {
-        right: 18rpx;
+				font-size: 24rpx;
-        top: 18rpx;
+				line-height: 24rpx;
-        // width: 40rpx;
+				color: #333333;
-        padding: 0 8rpx;
+			}
-        height: 26rpx;
+
-        background: #ff4d4f;
+			.item-icon {
-        border-radius: 13rpx;
+				width: 44rpx;
-        color: #fefefe;
+				height: 44rpx;
-        display: flex;
+			}
-        align-items: center;
+
-        .num {
+			.num-icon {
-          font-size: 24rpx;
+				position: absolute;
-          transform: scale(0.8);
+				right: 18rpx;
-        }
+				top: 18rpx;
-      }
+				// width: 40rpx;
-    }
+				padding: 0 8rpx;
-  }
+				height: 26rpx;
-</style>
+				background: #ff4d4f;
+				border-radius: 13rpx;
+				color: #fefefe;
+				display: flex;
+				align-items: center;
+
+				.num {
+					font-size: 24rpx;
+					transform: scale(0.8);
+				}
+			}
+		}
+	}
+</style>

sheep/components/s-share-modal/s-share-modal.vue

@@ -36,7 +36,7 @@
           >
             <image
               class="share-img"
-              :src="sheep.$url.static('/static/img/shop/share/share_poster.png')"
+              src="@/static/images/share_poster.png"
               mode=""
             />
             <text class="share-title">生成海报</text>
@@ -50,7 +50,7 @@
           >
             <image
               class="share-img"
-              :src="sheep.$url.static('/static/img/shop/share/share_link.png')"
+              src="@/static/images/share_link.png"
               mode=""
             />
             <text class="share-title">复制链接</text>

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

@@ -9,7 +9,7 @@
             :src="
               isLogin
                 ? sheep.$url.cdn(userInfo.avatar)
-                : sheep.$url.static('/static/img/shop/default_avatar.png')
+                : defaultAvatar
             "
             mode="aspectFill"
             @tap="sheep.$router.go('/pages/user/info')"
@@ -43,6 +43,8 @@
 </template>
 
 <script setup>
+	// 使用 import
+	import defaultAvatar from '@/static/images/default_avatar.png';
   /**
    * 用户卡片
    *
@@ -120,7 +122,7 @@
     .nick-name {
       font-size: 34rpx;
       font-weight: 400;
-      color: #333333;
+      color: white;
       line-height: normal;
     }
 

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

@@ -41,7 +41,7 @@
     >
       <image
         class="item-icon"
-        :src="sheep.$url.static('/static/img/shop/user/wallet_icon.png')"
+        :src="walleticon"
         mode="aspectFit"
       />
       <view class="menu-title ss-m-t-30">我的钱包</view>
@@ -50,6 +50,7 @@
 </template>
 
 <script setup>
+	import walleticon from '@/static/images/wallet_icon.png'
   /**
    * 装修组件 - 订单菜单组
    */