商家改版-首页静态页面

components/tabbar/tabbar.vue

@@ -1,7 +1,9 @@
 <template>
-	<uv-tabbar fixed :value="selected" @change="change1" activeColor="#ee0a24" :placeholder="false"
+	<uv-tabbar fixed :value="selected" @change="change1" activeColor="#FF4767 " :placeholder="false"
 		:safeAreaInsetBottom="false" :customStyle="{height:`110rpx`}">
-		<uv-tabbar-item v-for="(item,index) in $store.state.tabbarList" :key="index" :badge="getNum(index)"
+		<!-- <uv-tabbar-item v-for="(item,index) in $store.state.tabbarList" :key="index" :text="item.text" -->
+		<uv-tabbar-item v-for="(item,index) in tabbarList" :key="index" :text="item.text"
+			:badge="getNum(index)"
 			:customStyle="{height:`110rpx`}">
 			<template v-slot:active-icon>
 				<image class="icon" :src="item.selectedIconPath"></image>
@@ -30,6 +32,12 @@
 						"selectedIconPath": "/static/images/tabbar/new_home.png",
 						"pagePath": "/pages/home/home"
 					},
+                    {
+                        "iconPath": "/static/images/tabbar/new_order_gray.png",
+                        "text": "订单",
+                        "selectedIconPath": "/static/images/tabbar/new_order.png",
+                        "pagePath": "/pages/order/all-orders"
+                    },
 					{
 						"iconPath": "/static/images/tabbar/new_message_gray.png",
 						"text": "消息",
@@ -51,32 +59,32 @@
 			}
 		},
 		async created() {
-			if (!this.$store.state.tabbarList.length) {
-				let isnNetwork = uni.getStorageSync("isnNetwork");
-				if (isnNetwork) {
-					await this.getButtonImg()
-				} else {
-					uni.getNetworkType({
-						success: (res) => {
-							console.log(res.networkType);
-							if (res.networkType == "none") {
+			// if (!this.$store.state.tabbarList.length) {
+			// 	let isnNetwork = uni.getStorageSync("isnNetwork");
+			// 	if (isnNetwork) {
+			// 		await this.getButtonImg()
+			// 	} else {
+			// 		uni.getNetworkType({
+			// 			success: (res) => {
+			// 				console.log(res.networkType);
+			// 				if (res.networkType == "none") {
 
-								this.$store.commit("setTabbarList", this.tabbarList)
-							} else {
-								// 页面加载逻辑
-								uni.setStorageSync("isnNetwork", 1);
-								this.getButtonImg()
-							}
-						},
-					});
-				}
+			// 					this.$store.commit("setTabbarList", this.tabbarList)
+			// 				} else {
+			// 					// 页面加载逻辑
+			// 					uni.setStorageSync("isnNetwork", 1);
+			// 					this.getButtonImg()
+			// 				}
+			// 			},
+			// 		});
+			// 	}
 
-			}
+			// }
 
 		},
 		methods: {
 			getNum(index) {
-				if (index == 1) {
+				if (index == 2) {
 					return this.messageNum
 				} else {
 					return 0
@@ -114,8 +122,8 @@
 
 <style lang="scss">
 	.icon {
-		height: 98rpx;
-		width: 98rpx;
+		height: 54rpx;
+		width: 54rpx;
 	}
 	::v-deep .uv-tabbar__content{
 		z-index: 999!important;

pages.json

@@ -971,6 +971,12 @@
 				"selectedIconPath": "/static/images/tabbar/home_icon_active.png",
 				"pagePath": "pages/home/home"
 			},
+			{
+				"iconPath": "/static/images/tabbar/new_order_gray.png",
+				"text": "订单",
+				"selectedIconPath": "/static/images/tabbar/new_order.png",
+				"pagePath": "pages/order/all-orders"
+			},
 			{
 				"iconPath": "/static/images/tabbar/new_message_gray.png",
 				"text": "消息",

pages/home/components/brand-card.vue

@@ -0,0 +1,203 @@
+<template>
+  <view class="brand-card-comp" @click="onClick">
+    <image class="brand-bg" :src="item.bgSrc" mode="aspectFill"></image>
+    <image class="mask-bg" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/9bca353c-fa74-407e-a69e-6f5e9aa43955.png" mode="widthFix"></image>
+    
+    <view class="card-content">
+      <view class="avatar-wrapper" style="border-color: #F7E5D7;">
+        <image class="avatar-img" :src="item.avatar || 'https://dummyimage.com/100x100/ccc/fff.png&text=logo'"></image>
+      </view>
+      
+      <text class="brand-name">{{ item.name }}</text>
+      
+      <view class="tags-container">
+        <view 
+          class="tag-item" 
+          v-for="(tag, idx) in displayTags" 
+          :key="idx" 
+          :style="getTagStyle(tag)"
+        >
+          <image class="tag-icon" v-if="tag.icon" :src="tag.icon"></image>
+          <text class="tag-text">{{ tag.text }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+// 预定义的标签库（固定内容）
+const TAG_LIBRARY = {
+  franchise: {   // 品牌加盟
+    text: '品牌加盟',
+    color: '#8D4C1B ',
+    borderColor: '#D6CAC0 ',
+    icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/60816ae2-92ee-4473-9eca-562e1200dbca.png'
+  },
+  recruit: {     // 学院招募
+    text: '学院招募',
+    color: '#E5505F',
+    borderColor: '#EFCFD2 ',
+    icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fd0699b9-9f3c-4b1e-8693-d0c9ec7eabc3.png'
+  },
+  more: {        // 更多详情
+    text: '更多详情',
+    color: '#333333',
+    borderColor: '#ECECEC',
+    icon: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cec453ce-f3fc-4881-8f2c-9ec5c61e759c.png'
+  }
+}
+
+export default {
+  name: 'brand-card',
+  props: {
+    // 基础信息
+    item: {
+      type: Object,
+      default: () => ({})
+    },
+    // 新方式：传入标签 key 数组，例如 ['franchise', 'recruit']
+    tagKeys: {
+      type: Array,
+      default: null
+    }
+  },
+  computed: {
+    // 最终要显示的标签列表（优先使用 tagKeys，否则兼容旧数据 item.tags）
+    displayTags() {
+      if (this.tagKeys && this.tagKeys.length) {
+        return this.tagKeys.map(key => TAG_LIBRARY[key]).filter(v => v)
+      }
+      // 兼容旧数据：如果 item.tags 存在且为数组，则直接使用（但建议逐步迁移）
+      if (this.item.tags && Array.isArray(this.item.tags)) {
+        return this.item.tags
+      }
+      return []
+    },
+    tagsLength() {
+      return this.displayTags.length
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('click', this.item)
+    },
+    getTagStyle(tag) {
+      const len = this.tagsLength
+      let sizeStyle = {}
+      if (len === 1) {
+        sizeStyle = {
+          width: '288rpx',
+          height: '42rpx',
+          padding: '0 12rpx',
+          boxSizing: 'border-box'
+        }
+      } else if (len === 2) {
+        sizeStyle = {
+          width: '134rpx',
+          height: '42rpx',
+          padding: '0 12rpx',
+          boxSizing: 'border-box'
+        }
+      }
+      return {
+        ...sizeStyle,
+        color: tag.color,
+        borderColor: tag.borderColor
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.brand-card-comp {
+  width: 328rpx;
+  height: 339rpx;
+  position: relative;
+  border-radius: 21rpx;
+  overflow: hidden;
+  background-color: #fff;
+}
+.brand-bg {
+  width: 100%;
+  height: 184rpx;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+.mask-bg {
+  width: 100%;
+  height: 251rpx;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: block;
+}
+.card-content {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 24rpx;
+}
+.avatar-wrapper {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  border: 2rpx solid;
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  margin-top: -38rpx;
+  margin-bottom: 12rpx;
+}
+.avatar-img {
+  width: 100%;
+  height: 100%;
+}
+.brand-name {
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #333333;
+  line-height: 34rpx;
+  margin-bottom: 12rpx;
+}
+.tags-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20rpx;
+  flex-wrap: wrap;
+}
+.tag-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 21rpx;
+  border: 1rpx solid;
+  background-color: transparent;
+  padding: 7rpx 12rpx;
+}
+.tag-icon {
+  width: 24rpx;
+  height: 22rpx;
+  margin-right: 6rpx;
+  flex-shrink: 0;
+}
+.tag-text {
+  font-size: 20rpx;
+  line-height: 28rpx;
+  white-space: nowrap;
+  margin-top: 4rpx;
+  padding-right: 2rpx;
+}
+</style>