Merge branch 'master' of http://106.52.242.177:3000/askqvn/crm-app

App.vue

@@ -225,5 +225,6 @@
 	}
 
 	@import "@/uni_modules/uview-ui/index.scss";
+	@import "@/common/iconfont/iconfont.css";
 	/*每个页面公共css */
 </style>

common/iconfont/iconfont.css

@@ -0,0 +1,33 @@
+/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
+@font-face {
+  font-family: 'iconfont';
+  /* Project id 5096589 */
+  src: url('/common/iconfont/iconfont.ttf') format('ttf'),
+    url('//at.alicdn.com/t/c/font_5096589_rab6h2csv4.woff2?t=1766568458540') format('woff2'),
+    url('//at.alicdn.com/t/c/font_5096589_rab6h2csv4.woff?t=1766568458540') format('woff'),
+    url('//at.alicdn.com/t/c/font_5096589_rab6h2csv4.ttf?t=1766568458540') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-crm-tubiao-zhexiantu:before {
+  content: "\eb96";
+}
+
+.icon-crm-jiangbei:before {
+  content: "\e604";
+}
+
+.icon-crm-tongji:before {
+  content: "\e649";
+}
+
+.icon-crm-dayin:before {
+  content: "\e841";
+}

components/custom-tab-radio/index.scss

@@ -0,0 +1,40 @@
+.tab-radio-container {
+  display: grid;
+  gap: 16rpx;
+  align-items: center;
+  background-color: #ffffff;
+  border-radius: 8rpx;
+  padding: 4rpx;
+  margin: 10rpx 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  background-color: #f9f9f9;
+  border:1px solid transparent;
+  border-radius: 40rpx;
+  padding:14rpx 20rpx;
+  font-size: 24rpx;
+
+  .tab-item__text {
+    color: #484848;
+    font-weight: 400;
+    transition: all 0.3s ease;
+  }
+}
+
+.tab-item--active {
+  border:1px solid #2563eb;
+  background-color: transparent;
+  .tab-item__text {
+    color: #2563eb;
+    font-weight: 500;
+  }
+}

components/custom-tab-radio/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <view class="tab-radio-container" :style="{ gridTemplateColumns: `repeat(${colNum}, 1fr)` }">
+    <view 
+      class="tab-item"
+      v-for="(item, index) in tabList"
+      :key="index"
+      :class="{ 'tab-item--active': activeValue === item.value }"
+      @click="handleTabClick(item)"
+    >
+      <text class="tab-item__text">{{ item.name }}</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "TabRadio",
+  props: {
+    tabList: {
+      type: Array,
+      required: true,
+      default: () => []
+    },
+    defaultActive: {
+      type: [String, Number],
+      default: ""
+    },
+    colNum: {
+      type: Number,
+      default: 4
+    }
+  },
+  data() {
+    return {
+      activeValue: this.defaultActive
+    };
+  },
+  methods: {
+    handleTabClick(item) {
+      this.activeValue = item.value;
+      this.$emit("tabChange", {
+        name: item.name,
+        value: item.value
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

components/form-select-to-page/index.scss

@@ -0,0 +1,9 @@
+.form_select_to_page{
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    font-size: 28rpx;
+    font-weight: 600;
+    gap: 14rpx;
+}

components/form-select-to-page/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <view class="form_select_to_page" @click="handleClickToPage">
+        <view>{{ val }}</view>
+        <u-icon size="13" name="close-circle" @click="clear" v-if="val"></u-icon>
+        <u-icon size="20" name="arrow-right"></u-icon>
+    </view>
+</template>
+<script>
+export default {
+    components: {
+    },
+    props: {
+        val: {
+            type: String || Number,
+            default: '' || null,
+        },
+        url: {
+            type: String,
+            default: '',
+        }
+    },
+    emits: ['handleClear'],
+    data() {
+        return {
+
+        }
+    },
+    methods: {
+        clear(){
+            console.log(this.val);
+            this.$emit('handleClear');
+        },
+        handleClickToPage(){
+            uni.navigateTo({
+                url: this.url
+            })
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

pages.json

@@ -115,8 +115,7 @@
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom"
 			}
-		}
-		,
+		},
 		{
 			"path": "pages/clue/index",
 			"style": {
@@ -161,6 +160,42 @@
 			}
 		},
 		{
+			"path" : "pages/wareHouse/index",
+			"style" : 
+			{
+				"navigationBarTitleText" : "仓库",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/wareHouse/detail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "仓库详情",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/wareHouse/add",
+			"style" : 
+			{
+				"navigationBarTitleText" : "仓库新增",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/wareHouse/brandList",
+			"style" : 
+			{
+				"navigationBarTitleText" : "仓库品牌列表",
+				"enablePullDownRefresh": true,
+				"navigationStyle": "custom"
+			}
+		},
+		{
 			"path" : "pages/privateClue/index",
 			"style" : 
 			{
@@ -284,7 +319,14 @@
 			"pagePath": "pages/publicClue/index",
 			"iconPath": "static/tabs/public.png",
 			"selectedIconPath": "static/tabs/public1.png"
-		}, {
+		}, 
+		{
+			"text": "仓库",
+			"pagePath": "pages/wareHouse/index",
+			"iconPath": "static/tabs/warehouse.png",
+			"selectedIconPath": "static/tabs/warehouse-active.png"
+		}, 
+		{
 			"text": "销售线索",
 			"pagePath": "pages/privateClue/index",
 			"iconPath": "static/tabs/private.png",

pages/person/cards/index.vue

@@ -0,0 +1,277 @@
+<template>
+    <view class="person_cards_wrap">
+        <view class="cards_container">
+            <!-- 今天消耗 -->
+            <view class="card_item today">
+                <view class="card_item_content">
+                    <view class="card_header">
+                        <text class="card_title">今天消耗（元）</text>
+                    </view>
+                    <view class="card_content">
+                        <text class="card_value">{{ cardData.todayConsume }}</text>
+                    </view>
+                </view>
+                <view class="card_item_content">
+                    <view class="card_header">
+                        <text class="card_title">今天业绩（元）</text>
+                    </view>
+                    <view class="card_content">
+                        <text class="card_value">{{ cardData.todayPerformance }}</text>
+                    </view>
+                </view>
+            </view>
+            <!-- 条数统计 -->
+            <view class="card_item card_item_full">
+                <view class="card_header count">
+                    <i class="iconfont icon-crm-tongji" style="font-size: 30rpx;color: #4c8afe;"></i>
+                    <text class="card_title">条数统计</text>
+                </view>
+                <view class="card_content">
+                    <view class="count_stats">
+                        <view class="count_item">
+                            <text class="count_value">{{ cardData.countTypeA }}</text>
+                            <text class="count_label">A类</text>
+                        </view>
+                        <view class="count_item">
+                            <text class="count_value">{{ cardData.countTypeB }}</text>
+                            <text class="count_label">B类</text>
+                        </view>
+                        <view class="count_item">
+                            <text class="count_value">{{ cardData.countTypeC }}</text>
+                            <text class="count_label">C类</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 上门 -->
+            <view class="card_item card_item_full">
+                <view class="card_content">
+                    <view class="visit_stats">
+                        <view class="visit_item">
+                            <text class="visit_label">上门</text>
+                            <text class="visit_value visitc_count">{{ cardData.visitCount }}</text>
+                        </view>
+                        <view class="visit_item">
+                            <text class="visit_label">上门率</text>
+                            <text class="visit_value">{{ cardData.visitRate }}</text>
+                        </view>
+                        <view class="visit_item">
+                            <text class="visit_label">成交率</text>
+                            <text class="visit_value">{{ cardData.dealRate }}</text>
+                        </view>
+                        <view class="visit_item">
+                            <text class="visit_label">投产比</text>
+                            <text class="visit_value">{{ cardData.roi }}</text>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 当前排名 -->
+            <view class="card_item card_item_full">
+                <view class="card_content">
+                    <view class="ranking_stats">
+                        <view class="ranking_info">
+                            <view class="ranking_icon">
+                                <i class="iconfont icon-crm-jiangbei" style="font-size: 30rpx;color: #ca8a04;"></i>
+                            </view>
+                            <view class="ranking_info_text">
+                                <text class="card_title">当前排名</text>
+                                <text class="ranking_text">击败了{{ cardData.beatRate }}的同事</text>
+                            </view>
+                        </view>
+                        <view class="ranking_details">
+                            <view class="ranking_detail_item">
+                                <text class="ranking_detail_value">{{ cardData.level }}</text>
+                                <text class="ranking_detail_label">等级</text>
+                            </view>
+                            <view class="ranking_detail_item">
+                                <text class="ranking_detail_value">{{ cardData.score }}</text>
+                                <text class="ranking_detail_label">评分</text>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <!-- 折线图 -->
+            <view class="card_item">
+                <view class="chart_header">
+                    <i class="iconfont icon-crm-tubiao-zhexiantu" style="font-size: 30rpx;color: #6b7280;"></i>
+                    <text class="card_title">近7天排名折线图</text>
+                </view>
+                <view class="charts_box">
+                    <qiun-data-charts type="line" :chartData="chartData" canvasId="uniqueLineChart" :opts="opts"
+                        width="700rpx" height="350rpx" backgroundColor="#ffffff" />
+                </view>
+            </view>
+        </view>
+        <!-- 最新线索 -->
+        <view class="latest_clue">
+            <view class="clue_header">
+                <text class="card_title">最新线索</text>
+                <view class="more_btn" @click="toPrivateClue">
+                    <text>更多</text>
+                    <u-icon name="arrow-right" size="16" color="#2563eb"></u-icon>
+                </view>
+            </view>
+            <view class="clue_list">
+                <view class="clue_item" v-for="(item, index) in clueList" :key="index">
+                    <view class="clue_star">
+                        <u-icon name="star-fill" size="20" color="#facc15"></u-icon>
+                        <text class="clue_name">{{ item.star }}</text>
+                    </view>
+                    <text class="clue_name">{{ item.clueName }}</text>
+                    <view class="clue_info">
+                        <text class="clue_title">{{ item.title }}</text>
+                        <text class="clue_desc">{{ item.desc }}</text>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            // 卡片数据
+            cardData: {
+                todayConsume: '0',
+                todayPerformance: '12,500',
+                countTypeA: '0',
+                countTypeB: '2',
+                countTypeC: '5',
+                visitCount: '1',
+                visitRate: '50%',
+                dealRate: '25%',
+                roi: '1.2',
+                beatRate: '60%',
+                level: '中',
+                score: 'A'
+            },
+            chartData: {
+                categories: ["1", "2", "3", "4", "5", "6", "7"],
+                series: [
+                    {
+                        name: "核心数据",
+                        data: [80, 120, 90, 150, 130, 180, 160],
+                        color: "#1890ff"
+                    }
+                ]
+            },
+            opts: {
+                padding: [5, 0, 10, -20],
+                backgroundColor: "#ffffff",
+                xAxis: {
+                    axisLine: { show: true, color: "#e5e5e5", width: 1 },
+                    gridLine: { show: true, color: "#f5f5f5", width: 1 },
+                    label: { fontSize: 24, color: "#666666", margin: 15 },
+                    tickLine: { show: false },
+                    lineStyle: {
+                        type: 'solid'
+                    },
+                    axisLabel: {
+                        padding: [0, 0, 0, -20]
+                    }
+                },
+                yAxis: {
+                    axisLine: { show: true, color: "#e5e5e5", width: 1 },
+                    gridLine: { show: true, color: "#f5f5f5", width: 1 },
+                    label: { fontSize: 24, color: "#666666", margin: 15 },
+                    tickLine: { show: false },
+                    splitNumber: 4,
+                    min: 0,
+                    max: 200
+                },
+                series: {
+                    line: {
+                        width: 6, // 折线宽度，确保可见
+                        smooth: true, // 先设为直线，便于调试，后续可改为true
+                        showSymbol: true, // 显示数据点，确保折线锚点可见
+                        symbol: "circle",
+                        symbolSize: 24,
+                        symbolColor: "#ffffff",
+                        symbolBorderColor: "#1890ff",
+                        symbolBorderWidth: 8,
+                        area: {
+                            show: false,
+                            color: "linear-gradient(to bottom, rgba(24,144,255,0.2), rgba(24,144,255,0))"
+                        }
+                    }
+                },
+                // 提示框：确保悬浮正常显示
+                tooltip: {
+                    show: true,
+                    backgroundColor: "rgba(0,0,0,0.7)",
+                    borderRadius: 6,
+                    padding: [8, 12],
+                    labelFontSize: 22,
+                    labelColor: "#ffffff"
+                },
+                legend: {
+                    show: false,
+                    position: "top-right",
+                    fontSize: 24,
+                    color: "#666666",
+                    margin: [0, 20, 0, 0]
+                },
+                title: {
+                    show: false,
+                    name: "趋势折线图",
+                    fontSize: 28,
+                    color: "#333333",
+                    align: "left",
+                    margin: [0, 0, 15, 0]
+                }
+            },
+            clueList: [
+                {
+                    star: '1',
+                    clueName: '张先生',
+                    title: 'LV 发财桶',
+                    desc: '已经电话沟通，待预约上门'
+                },
+                {
+                    star: '1',
+                    clueName: '李女士',
+                    title: 'LV 发财桶',
+                    desc: '客户说价格有点低...'
+                },
+                {
+                    star: '1',
+                    clueName: '王女士',
+                    title: 'Hermes Birkin',
+                    desc: '暂时没有时间接待'
+                },
+            ],
+        };
+    },
+
+    methods: {
+        // 获取卡片数据
+        getCardData() {
+            // 预留数据获取逻辑
+            // 示例：
+            // uni.$u.api.getPersonCards().then(res => {
+            //   if (res.code === 0) {
+            //     this.cardData = res.data;
+            //   }
+            // });
+        },
+        // 跳转私有线索页面
+        toPrivateClue() {
+            uni.switchTab({ url: '/pages/privateClue/index' });
+        },
+    },
+    mounted() {
+        this.getCardData();
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './styles/index.scss';
+</style>

pages/person/cards/styles/index.scss

@@ -0,0 +1,288 @@
+// 卡片容器样式
+.person_cards_wrap {
+  padding: 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cards_container {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  flex-direction: column;
+}
+
+// 卡片基础样式
+.card_item {
+  background-color: #ffffff;
+  border-radius: 20px;
+  padding: 24rpx;
+  box-sizing: border-box;
+  
+  &.today {
+    display: flex;
+    justify-content: space-around;
+    .card_item_content{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      width: 50%;
+      border-right: 1rpx solid #e5e7eb;
+      &:nth-last-of-type(1){
+        border-right: none;
+      }
+      .card_header{
+        .card_title{
+          color: #9ca3af;
+        }
+      }
+    }
+  }
+  
+  // 卡片头部样式
+  .card_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20rpx;
+    
+    &.count{
+      justify-content: flex-start;
+      gap: 10rpx;
+    }
+    .card_title {
+      font-size: 28rpx;
+      font-weight: 600;
+      color: #333333;
+    }
+  }
+  
+  // 卡片内容样式
+  .card_content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    
+    .card_value {
+      font-size: 48rpx;
+      font-weight: 700;
+      color: #333333;
+      margin-bottom: 8rpx;
+    }
+    
+    .card_extra {
+      font-size: 24rpx;
+      color: #999999;
+    }
+  }
+  
+  // 条数统计特殊样式
+  .count_stats {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    align-items: center;
+    .count_item {
+      width: 33%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      border-right: 1px solid #e5e7eb;
+      &:nth-last-of-type(1){
+        border-right: none;
+      }
+      .count_value {
+        font-size: 36rpx;
+        font-weight: 700;
+        color: #333333;
+        margin-bottom: 4rpx;
+      }
+      
+      .count_label {
+        font-size: 24rpx;
+        color: #999999;
+      }
+    }
+  }
+  
+  // 上门模块特殊样式
+  .visit_stats {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+    align-items: center;
+    
+    .visit_item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .visit_label {
+        font-size: 24rpx;
+        color: #999999;
+        margin-bottom: 4rpx;
+        font-weight: 600;
+      }
+      
+      .visit_value {
+        font-size: 38rpx;
+        font-weight: 700;
+        color: #333333;
+        &.visitc_count{
+          color: #2563eb;
+        }
+      }
+    }
+  }
+  
+  // 当前排名模块特殊样式
+  .ranking_stats {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    .ranking_icon{
+      border-radius: 50%;
+      background-color: #fefce8;
+      width: 60rpx;
+      height: 60rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-right: 20rpx;
+    }
+    .ranking_info {
+      display: flex;
+      align-items: center;
+      .ranking_info_text{
+        display: flex;
+        flex-direction: column;
+        .card_title{
+          font-size: 26rpx;
+          font-weight:600;
+        }
+        .ranking_text {
+          font-size: 24rpx;
+          color: #9ca3af;
+        }
+      }
+    }
+    
+    .ranking_details {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .ranking_detail_item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        &:nth-of-type(1){
+          padding-right: 30rpx;
+          border-right: 2rpx solid #e5e7eb;
+        }
+        &:nth-last-of-type(1){
+          padding-left: 30rpx;
+        }
+        .ranking_detail_label {
+          font-size: 24rpx;
+          color: #999999;
+          margin-bottom: 4rpx;
+        }
+        
+        .ranking_detail_value {
+          font-size: 40rpx;
+          font-weight: 700;
+          color: #000;
+        }
+      }
+    }
+  }
+  
+  // 折线图容器样式
+  .charts_box {
+    width: 100%;
+    height: 200rpx;
+    margin-top: 20rpx;
+    background-color: #ffffff;
+    border-radius: 8rpx;
+    box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .chart_header{
+    color: #6b7280;
+    font-size: 24rpx;
+    font-weight: 600;
+    .card_title{
+      margin-left: 10rpx;
+    }
+  }
+}
+// 最新线索模块特殊样式
+.latest_clue{
+  margin: 20rpx 0 140rpx;
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  border-radius: 20rpx;
+  .clue_header{
+    padding:24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #f9fafb;
+    border-radius: 10rpx;
+    .card_title{
+      color: #6b7280;
+      font-size:24rpx;
+      font-weight: 600;
+    }
+    .more_btn{
+      display:flex;
+      justify-content: center;
+      align-items: center;
+      gap: 4rpx;
+      font-size: 24rpx;
+      color: #2563eb;
+    }
+  }
+  .clue_list{
+    display: flex;
+    flex-direction: column;
+    gap: 20rpx;
+    padding:24rpx;
+    .clue_item{
+      display: grid;
+      grid-template-columns: 1fr 2fr 6fr;
+      justify-content: space-between;
+      align-items: center;
+      color: #333;
+      font-size: 28rpx;
+      font-weight: 600;
+      .clue_star{
+        display:flex;
+        flex-direction: column;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 4rpx;
+        .clue_name{
+          font-size: 24rpx;
+          font-weight: 600;
+          color: #9ca3af;
+        }
+      }
+      .clue_name{
+
+      }
+      .clue_info{
+        display:flex;
+        flex-direction: column;
+        gap: 8rpx;
+        .clue_desc{
+          font-size: 22rpx;
+          color:#9ca3af ;
+        }
+      }
+    }
+  }
+}
+

pages/person/index.vue

@@ -55,8 +55,8 @@
 					</view>
 				</view>
 			</view>
-			<view class="secondHalf">
-				<option-list></option-list>
+			<view class="cards_wrap">
+				<cards></cards>
 			</view>
 		</template>
 		<u-loading-page :loading="true" v-else></u-loading-page>
@@ -64,11 +64,13 @@
 </template>
 
 <script>
-import optionList from "./option/index.vue"
+import cards from "./cards/index.vue"
+// import optionList from "./option/index.vue"
 import permision from "@/js_sdk/wa-permission/permission.js";
 export default {
 	components: {
-		optionList
+		// optionList,
+		cards
 	},
 	data() {
 		return {
@@ -342,6 +344,14 @@ export default {
 			}
 		}
 
+		.cards_wrap {
+			padding: 0 30rpx 0 30rpx;
+		}
+
+		.box {
+			height: 200vh;
+		}
+
 		.parson_menu_wrap {
 			background: #ffffff;
 			border-radius: 20px;

pages/person/option/index.vue

@@ -84,13 +84,14 @@
 
 <style lang="scss" scoped>
 	.option_list {
-		margin-top: 30rpx;
 		.option_item {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			height: 120rpx;
+			height: 100rpx;
 			border-bottom: 2rpx solid #dfdfdf;
+			background-color: #fff;
+			padding: 0 30rpx;
 			.item_left {
 				display: flex;
 				align-items: center;
@@ -101,8 +102,8 @@
 				}
 
 				.label {
-					font-size: 30rpx;
-					color: #666666;
+					font-size: 28rpx;
+					color: #202020;
 				}
 			}
 

pages/setting/index.vue

@@ -20,6 +20,9 @@
 					<u-icon name="arrow-right" color="#aaa"></u-icon>
 				</view>
 			</view>
+
+			<option-list></option-list>
+
 		</view>
 		<view class="logout_btn">
 			<u-button type="warning" :plain="true" text="退出账号" size="large" @click="handleShowModal"></u-button>
@@ -33,14 +36,17 @@
 			cancelColor="#409eff"
 			:confirmText="'退出登录'" confirmColor="#f8836c">
 			<view class="modal_box">
-				确定要要出当前账号
+				确定要退出当前账号
 			</view>
 		</u-modal>
 	</view>
 </template>
-
 <script>
+	import OptionList from '@/pages/person/option/index.vue'
 	export default {
+		components: {
+			OptionList
+		},
 		data() {
 			return {
 				showModal: false
@@ -101,7 +107,6 @@
 	}
 
 	.option_list {
-		margin-top: 30rpx;
 
 		.option_item {
 			display: flex;

pages/wareHouse/add.vue

@@ -0,0 +1,443 @@
+<template>
+    <view>
+        <view class="add_page">
+            <u-navbar class="nav-bar" title="商品入库" :autoBack="true" :placeholder="true" v-hideNav>
+                <view class="u-nav-slot" slot="right">
+                    <u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
+                        <u-checkbox label="连续入库" name="continuous"></u-checkbox>
+                    </u-checkbox-group>
+                </view>
+            </u-navbar>
+            <view class="form_list">
+                <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" labelWidth="100%">
+                    <u-form-item label="商品图片" required prop="formData.imgs" borderBottom>
+                        <u-upload :fileList="goodPicFileList" @afterRead="afterReadGoodPic" @delete="deleteGoodPic"
+                            name="3" multiple :maxCount="9" :previewFullImage="true"></u-upload>
+                    </u-form-item>
+                    <u-form-item label="商品描述（详细的描述让用户更好的了解您的产品）" required prop="formData.desc" borderBottom>
+                        <u--textarea v-model="formData.desc" clearable :placeholder="descPlaceholder" count autoHeight
+                            maxlength="250" height="100" confirmType="done"></u--textarea>
+                    </u-form-item>
+                    <u-form-item label="商品分类" required prop="formData.type" borderBottom>
+                        <TabRadio :tabList="typeList" defaultActive="1" @tabChange="handleTabChangeType"></TabRadio>
+                    </u-form-item>
+                    <u-form-item label="品牌" required prop="formData.brand" class="u-form-item-row" borderBottom>
+                        <FormSelectToPage :val="formData.brand" :url="brandToUrl" @handleClear="clear('brand')">
+                        </FormSelectToPage>
+                    </u-form-item>
+                    <u-form-item label="系列" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.series" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="型号" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.model" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="机芯类型" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.brand" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="表壳材质" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.caseMaterial" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="表盘直径" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.dialDiameter" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="材质" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.material" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="尺寸" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.size" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="尺码" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.yardage" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="官方指导价" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.price" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="商品成色" required prop="formData.productCondition" borderBottom>
+                        <TabRadio :tabList="productConditionList" defaultActive="2" :colNum="2"
+                            @tabChange="handleTabChangeProductCondition"></TabRadio>
+                    </u-form-item>
+                    <u-form-item label="细节图" borderBottom>
+                        <u-upload :fileList="detailVideoFileList" @afterRead="afterReadDeatilVideo"
+                            @delete="deleteDetailVideo" name="2" multiple :maxCount="10" accept="video"></u-upload>
+                        <u-upload :fileList="detailPicFileList" @afterRead="afterReadDetailPic"
+                            @delete="deleteDetailPic" name="1" multiple :maxCount="10"></u-upload>
+                    </u-form-item>
+                    <u-form-item label="商品标题" borderBottom>
+                        <u--textarea v-model="formData.title" clearable :placeholder="titlePlaceholder" count autoHeight
+                            maxlength="50" height="100" confirmType="done"></u--textarea>
+                    </u-form-item>
+                    <u-form-item label="商品货号" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.productNo" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="商品属性" required prop="formData.productAttribute" borderBottom>
+                        <TabRadio :tabList="productAttributeList" defaultActive="2"
+                            @tabChange="handleTabChangeProductAttribute"></TabRadio>
+                    </u-form-item>
+                    <u-form-item label="库存数量" required prop="formData.stock" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.stock" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="总成本价" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.costPrice" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="同行价格" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.samePrice" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="代理价格" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.agentPrice" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="销售价格" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.salePrice" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="商品位置" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.productPosition" placeholder="请输入" clearable
+                            border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="鉴定人员" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.identifyingPerson" placeholder="请输入" clearable
+                            border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="回收类型" borderBottom>
+                        <TabRadio :tabList="recycleTypeList" defaultActive="2" @tabChange="handleTabChangeRecycleType">
+                        </TabRadio>
+                    </u-form-item>
+                    <u-form-item label="回收人员" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.recyclePerson" disabled clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="回收留底图" borderBottom>
+                        <view class="recycle_bottom_desc">
+                            <u--textarea v-model="formData.recycleBottomDesc" clearable count autoHeight maxlength="250"
+                                height="100" confirmType="done"></u--textarea>
+                            <u-upload :fileList="recycleBottomFileList" @afterRead="afterReadRecycleBottom"
+                                @delete="deleteRecycleBottom" name="1" multiple :maxCount="1" accept="image"></u-upload>
+                        </view>
+                    </u-form-item>
+                    <u-form-item label="回收时间" required prop="formData.recycleTime" class="u-form-item-row" borderBottom
+                        @click="clickRecycleTimeRow">
+                        <FormSelectToPage :val="formData.recycleTime" @deleteItem.stop="clear('recycleTime')">
+                        </FormSelectToPage>
+                        <u-datetime-picker @confirm="confirmRecycleTime" @close="closeRecycleTimePicker"
+                            @cancel="closeRecycleTimePicker" :show="recycleTimeShow" v-model="formData.recycleTime"
+                            mode="date"></u-datetime-picker>
+                    </u-form-item>
+                    <u-form-item label="独立编码" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.indentifyCode" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="适用人群" class="u-form-item-row" borderBottom>
+                        <u-radio-group v-model="formData.targetAudience" placement="row">
+                            <u-radio activeColor="#3c9cff" name="general" label="通用"></u-radio>
+                            <u-radio activeColor="#3c9cff" name="man" label="男"></u-radio>
+                            <u-radio activeColor="#3c9cff" name="woman" label="女"></u-radio>
+                        </u-radio-group>
+                    </u-form-item>
+                    <u-form-item label="商品保卡" class="u-form-item-row" borderBottom>
+                        <u-radio-group v-model="formData.productCard" placement="row">
+                            <u-radio activeColor="#3c9cff" name="has" label="有保卡"></u-radio>
+                            <u-radio activeColor="#3c9cff" name="no" label="无保卡"></u-radio>
+                        </u-radio-group>
+                    </u-form-item>
+                    <u-form-item label="保卡年份" class="u-form-item-row" borderBottom
+                        v-if="formData.productCard === 'has'">
+                        <u--input v-model="formData.cardYear" placeholder="不填写默认空白保卡" clearable
+                            border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="保卡图片或独立编码照片留底(仅内部人员可见)" borderBottom>
+                        <u-upload :fileList="productCardFileList" @afterRead="afterReadProductCard"
+                            @delete="deleteProductCard" name="3" multiple :maxCount="9"
+                            :previewFullImage="true"></u-upload>
+                    </u-form-item>
+                    <u-form-item label="商品标签" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.productTag" placeholder="请输入" clearable border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="商品附件" class="u-form-item-row" borderBottom>
+                        <u--input v-model="formData.productAttachment" placeholder="请输入" clearable
+                            border="none"></u--input>
+                    </u-form-item>
+                    <u-form-item label="备注(仅内部人员可见)">
+                        <view class="recycle_bottom_desc">
+                            <u--textarea v-model="formData.productDesc" clearable count autoHeight maxlength="250"
+                                height="100" confirmType="done"></u--textarea>
+                            <u-upload :fileList="productCardFileList" @afterRead="afterReadProductCard"
+                                @delete="deleteProductCard" name="1" multiple :maxCount="1" accept="image"></u-upload>
+                        </view>
+                    </u-form-item>
+                </u--form>
+            </view>
+
+        </view>
+        <view class="btn_group">
+            <u-button plain type="primary" @click="submitForm('onlyIn')">仅入库</u-button>
+            <u-button type="primary" @click="submitForm('inAndUp')">入库并上架</u-button>
+        </view>
+    </view>
+</template>
+<script>
+import TabRadio from '@/components/custom-tab-radio/index.vue'
+import FormSelectToPage from '@/components/form-select-to-page/index.vue'
+export default {
+    components: {
+        TabRadio,
+        FormSelectToPage,
+    },
+    data() {
+        return {
+            checkboxValue: [],
+
+            formData: {
+                imgs: [],
+                desc: '',
+                type: '',
+                brand: '',
+                series: '',
+                model: '',
+                caseMaterial: '',
+                dialDiameter: '',
+                material: '',
+                size: '',
+                yardage: '',
+                price: '',
+                productCondition: '',
+                productNo: '',
+                stock: 1,
+                costPrice: '',
+                samePrice: '',
+                agentPrice: '',
+                salePrice: '',
+                productPosition: '',
+                identifyingPerson: '',
+                recycleType: '',
+                recyclePerson: '',
+                recycleBottomDesc: '',
+                recycleTime: null,
+                indentifyCode: '',
+                targetAudience: '',
+                productCard: '',
+                cardYear: '',
+                productTag: '',
+                productAttachment: '',
+                productDesc: '',
+            },
+            rules: {
+                imgs: [
+                    { required: true, message: '请上传商品图片', trigger: 'blur' },
+                ],
+                desc: [
+                    { required: true, message: '请输入商品描述', trigger: 'blur' },
+                ],
+                type: [
+                    { required: true, message: '请选择商品分类', trigger: 'blur' },
+                ],
+                brand: [
+                    { required: true, message: '请选择品牌', trigger: 'blur' },
+                ],
+                productCondition: [
+                    { required: true, message: '请选择商品成色', trigger: 'blur' },
+                ],
+                productAttribute: [
+                    { required: true, message: '请选择商品属性', trigger: 'blur' },
+                ],
+                stock: [
+                    { required: true, message: '请输入库存数量', trigger: 'blur' },
+                ],
+                recycleTime: [
+                    { required: true, message: '请选择回收时间', trigger: 'blur' },
+                ],
+
+            },
+            recycleTimeShow: false,
+            descPlaceholder: '95新 WHZ19219H CHANEL香奈儿链条单肩包 21开 牛皮 尺寸25 4 15 配件中溯卡',
+            titlePlaceholder: '如不填，自动截取商品描述前50字',
+            typeList: [
+                {
+                    name: '腕表',
+                    value: '1',
+                },
+                {
+                    name: '箱包',
+                    value: '2',
+                },
+                {
+                    name: '珠宝',
+                    value: '3',
+                },
+                {
+                    name: '鞋靴',
+                    value: '4',
+                },
+                {
+                    name: '配饰',
+                    value: '5',
+                },
+                {
+                    name: '服饰',
+                    value: '6',
+                },
+                {
+                    name: '其他',
+                    value: '7',
+                },
+            ],
+            productConditionList: [
+                {
+                    name: '闲置未使用',
+                    value: '1',
+                },
+                {
+                    name: '二手',
+                    value: '2',
+                },
+            ],
+            productAttributeList: [
+                {
+                    name: '自有商品',
+                    value: '1',
+                },
+                {
+                    name: '寄卖商品',
+                    value: '2',
+                },
+                {
+                    name: '质押商品',
+                    value: '3',
+                },
+                {
+                    name: '其它',
+                    value: '4',
+                },
+            ],
+            recycleTypeList: [
+                {
+                    name: '其它',
+                    value: '1',
+                },
+                {
+                    name: '线上',
+                    value: '2',
+                },
+                {
+                    name: '同行',
+                    value: '3',
+                },
+                {
+                    name: '门店',
+                    value: '4',
+                },
+            ],
+            brandToUrl: '/pages/wareHouse/brandList',
+            // 上传
+            goodPicFileList: [{ url: 'https://uviewui.com/swiper/1.jpg' }],//商品图片
+            detailPicFileList: [],//细节图片
+            detailVideoFileList: [],//细节视频
+            recycleBottomFileList: [],//回收留底图
+            productCardFileList: [],//商品保卡图片或独立编码照片留底
+            productTagFileList: [],//商品标签图片留底
+        }
+    },
+    methods: {
+        handleTabChange(e) {
+            console.log(e);
+        },
+        clear(key) {
+            this.formData[key] = '';
+        },
+        // 商品成色
+        handleTabChangeProductCondition(e) {
+            console.log(e);
+        },
+        // 商品属性
+        handleTabChangeProductAttribute(e) {
+            console.log(e);
+        },
+        // 回收类型
+        handleTabChangeRecycleType(e) {
+            console.log(e);
+        },
+
+        clickRecycleTimeRow() {
+            this.recycleTimeShow = true;
+        },
+        confirmRecycleTime(val) {
+            this.formData.recycleTime = this.$dayjs(val.value).format('YYYY-MM-DD');
+            console.log(val, this.formData.recycleTime);
+            this.recycleTimeShow = false;
+        },
+        closeRecycleTimePicker(val) {
+            console.log(val);
+            this.recycleTimeShow = false;
+        },
+        cancelRecycleTimePicker(val) {
+            console.log(val);
+            this.recycleTimeShow = false;
+        },
+        recycleTimeFormatter(value) {
+            if (value) {
+                console.log(value);
+
+            }
+            return ''
+        },
+        // 删除商品图片
+        deleteGoodPic(event) {
+            console.log(event);
+            // this[`fileList${event.name}`].splice(event.index, 1);
+        },
+        // 新增商品图片
+        async afterReadGoodPic(event) {
+            console.log(event);
+            // this.fileList = [...this.fileList, ...event.fileList];
+        },
+        // 删除细节视频
+        deleteVideo(event) {
+            console.log(event);
+            // this[`fileList${event.name}`].splice(event.index, 1);
+        },
+        // 新增细节视频
+        async afterReadVideo(event) {
+            console.log(event);
+            // this.fileList2 = [...this.fileList2, ...event.fileList];
+        },
+        // 删除细节图片
+        deleteDetailPic(event) {
+            console.log(event);
+            // this[`fileList${event.name}`].splice(event.index, 1);
+        },
+        // 新增细节图片
+        async afterReadDetailPic(event) {
+            console.log(event);
+            // this.fileList1 = [...this.fileList1, ...event.fileList];
+        },
+        // 删除回收留底图
+        deleteRecycleBottom(event) {
+            console.log(event);
+            // this[`fileList${event.name}`].splice(event.index, 1);
+        },
+        // 新增回收留底图
+        async afterReadRecycleBottom(event) {
+            console.log(event);
+            // this.fileList3 = [...this.fileList3, ...event.fileList];
+        },
+        // 删除商品保卡图片或独立编码照片留底
+        deleteProductCard(event) {
+            console.log(event);
+            // this[`fileList${event.name}`].splice(event.index, 1);
+        },
+        // 新增商品保卡图片或独立编码照片留底
+        async afterReadProductCard(event) {
+            console.log(event);
+            // this.fileList4 = [...this.fileList4, ...event.fileList];
+        },
+        // 删除商品标签图片留底
+        deleteProductTag(event) {
+            console.log(event);
+            // this[`fileList${event.name}`].splice(event.index, 1);
+        },
+        // 新增商品标签图片留底
+        async afterReadProductTag(event) {
+            console.log(event);
+            // this.fileList5 = [...this.fileList5, ...event.fileList];
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './styles/add.scss';
+</style>

pages/wareHouse/brandList.vue

@@ -0,0 +1,368 @@
+<template>
+    <view class="brand_list_page">
+        <view class="brand_list">
+            <u-navbar class="nav-bar" title="品牌" :autoBack="true" :placeholder="true" v-hideNav>
+                <!-- <view class="u-nav-slot" slot="right" @click="handleAddBrand">
+                    <u-icon name="plus-circle" color="#2979ff" size="20"></u-icon>
+                    <text>新增</text>
+                </view> -->
+            </u-navbar>
+            <u-search placeholder="搜索" v-model="keyword"></u-search>
+            <view class="suggest_list">
+                <view class="brand_item" v-for="item in brandList" :key="item.id">
+                    <img class="brand_img" :src="item.url" alt="">
+                    <view class="brand_name">{{ item.name }}</view>
+                </view>
+            </view>
+        </view>
+        <u-index-list :index-list="indexList" class="index_list">
+            <template v-for="(item, index) in itemArr">
+                <!-- #ifdef APP-NVUE -->
+                <u-index-anchor :text="indexList[index]"></u-index-anchor>
+                <!-- #endif -->
+                <u-index-item>
+                    <!-- #ifndef APP-NVUE -->
+                    <u-index-anchor :text="indexList[index]"></u-index-anchor>
+                    <!-- #endif -->
+                    <view class="list-cell" v-for="(cell, index) in item">
+                        <img :src="cell.url" alt="">
+                        {{ cell.name }}
+                    </view>
+                </u-index-item>
+            </template>
+        </u-index-list>
+        <view class="no_brand">
+            <u-button type="primary" :plain="true" text="找不到品牌" color="#108cff"></u-button>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    components: {
+    },
+    props: {
+    },
+    emits: [],
+    data() {
+        return {
+            keyword: '',
+            brandList: [
+                {
+                    id: 1,
+                    name: '品牌1',
+                    code: '001',
+                    url: './imgs/1.jpg',
+                },
+                {
+                    id: 2,
+                    name: '品牌2',
+                    code: '002',
+                    url: './imgs/1.jpg',
+                },
+                {
+                    id: 1,
+                    name: '品牌1',
+                    code: '001',
+                    url: './imgs/1.jpg',
+                },
+                {
+                    id: 2,
+                    name: '品牌2',
+                    code: '002',
+                    url: './imgs/1.jpg',
+                },
+                {
+                    id: 1,
+                    name: '品牌1',
+                    code: '001',
+                    url: './imgs/1.jpg',
+                },
+                {
+                    id: 1,
+                    name: '品牌1',
+                    code: '001',
+                    url: './imgs/1.jpg',
+                },
+            ],
+            indexList: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z","#"],
+            itemArr: [
+                [
+                    {
+                        name:'品牌1',
+                        url:require('./imgs/1.jpg'),
+                    },
+                    {
+                        name:'品牌2',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌3',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌4',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌5',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌6',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌7',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌8',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌9',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌10',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌11',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌12',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌13',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌14',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌15',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌16',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌17',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌18',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌19',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌20',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌21',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌22',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌23',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌24',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌25',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌26',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌27',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌28',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌25',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌26',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌27',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌28',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌25',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌26',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌27',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌28',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌25',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌26',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌27',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌28',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌25',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌26',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌27',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌28',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌25',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌26',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌27',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌28',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌25',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌26',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'品牌27',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'品牌28',
+                        url:'./imgs/1.jpg',
+                    },
+                ],
+                [
+                    {
+                        name:'##品牌27',
+                        url:'./imgs/1.jpg',
+                    },
+                    {
+                        name:'#品牌28',
+                        url:'./imgs/1.jpg',
+                    },
+                ]
+            ]
+        }
+    },
+    methods: {
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './styles/brandList.scss';
+</style>

pages/wareHouse/detail.vue

@@ -0,0 +1,376 @@
+<template>
+    <view class="detail" @click="handleClickOutside">
+        <u-navbar class="nav-bar" title="商品详情档案" :autoBack="true" :placeholder="true" rightIcon="more-dot-fill" v-hideNav></u-navbar>
+        <u-swiper :list="imgs" keyName="url" indicator indicatorMode="line" circular>
+            <!-- <template v-slot:item="{ item, index }">
+                <view style="width: 100%; height: 600rpx;">
+                    <image :src="item.url" mode="aspectFill" style="width: 100%; height: 100%; object-fit: cover;"></image>
+                </view>
+            </template> -->
+        </u-swiper>
+        
+        <!-- 立即下架按钮 -->
+        <view class="immediate-off-shelf">
+            <u-button type="error" shape="circle" size="large" @click="handleOffShelf">
+                <u-icon name="download" size="38rpx" color="#ffffff"></u-icon>
+                <text>立即下架</text>
+            </u-button>
+        </view>
+        
+        <!-- 轮播图下方操作按钮 -->
+        <view class="swiper-actions">
+            <view class="action-item">
+                <u-icon name="download" size="44rpx" color="#606266"></u-icon>
+                <text class="action-text">下载图文</text>
+            </view>
+            <view class="action-item">
+                <u-icon name="share" size="44rpx" color="#606266"></u-icon>
+                <text class="action-text">分享</text>
+            </view>
+            <view class="action-item">
+                <u-icon name="camera" size="44rpx" color="#606266"></u-icon>
+                <text class="action-text">切换单图</text>
+            </view>
+            <view class="action-item">
+                <u-icon name="cut" size="44rpx" color="#606266"></u-icon>
+                <text class="action-text">智能抠图</text>
+            </view>
+        </view>
+        
+        <!-- 核心信息区域 -->
+        <view class="core-info">
+            <view class="section-title">核心信息</view>
+            <view class="info-row">
+                <view class="info-label">品牌</view>
+                <view class="info-value" @click.stop="toggleEditField('brand', coreInfo.brand)">
+                    <u-input v-if="editMode.brand" v-model="tempValues.brand" @blur="saveEditField('brand', tempValues.brand, 'core', 'brand')" :autoFocus="true" />
+                    <span v-else>{{ coreInfo.brand }}</span>
+                </view>
+            </view>
+            <view class="info-row">
+                <view class="info-label">型号</view>
+                <view class="info-value" @click.stop="toggleEditField('model', coreInfo.model)">
+                    <u-input v-if="editMode.model" v-model="tempValues.model" @blur="saveEditField('model', tempValues.model, 'core', 'model')" :autoFocus="true" />
+                    <span v-else>{{ coreInfo.model }}</span>
+                </view>
+            </view>
+            <view class="info-row">
+                <view class="info-label">独立编码</view>
+                <view class="info-value code" @click.stop="toggleEditField('code', coreInfo.code)">
+                    <u-input v-if="editMode.code" v-model="tempValues.code" @blur="saveEditField('code', tempValues.code, 'core', 'code')" :autoFocus="true" />
+                    <span v-else>{{ coreInfo.code }}</span>
+                </view>
+            </view>
+            <view class="info-row">
+                <view class="info-label">入库日期</view>
+                <view class="info-value">{{ coreInfo.warehouseDate }}</view>
+            </view>
+            <view class="info-row">
+                <view class="info-label">付款方式</view>
+                <view class="info-value">{{ coreInfo.paymentMethod }}</view>
+            </view>
+            <view class="info-row col">
+                <view class="info-label">备注信息</view>
+                <view class="info-value note" @click.stop="toggleEditField('note', coreInfo.note)">
+                    <textarea v-if="editMode.note" v-model="tempValues.note" @blur="saveEditField('note', tempValues.note, 'core', 'note')" :autoFocus="true" rows="3" />
+                    <span v-else>{{ coreInfo.note }}</span>
+                </view>
+            </view>
+        </view>
+        
+        <!-- 财务与价格区域 -->
+        <view class="finance-price">
+            <view class="section-title">财务与价格</view>
+            <view class="price-group">
+                <view class="price-item">
+                    <view class="price-label">原始成本</view>
+                    <view class="price-value original" @click.stop="toggleEditField('originalCost', financePrice.originalCost)">
+                        <u-input v-if="editMode.originalCost" v-model="tempValues.originalCost" @blur="saveEditField('originalCost', tempValues.originalCost, 'finance', 'originalCost')" :autoFocus="true" />
+                        <span v-else>￥{{ financePrice.originalCost }}</span>
+                    </view>
+                </view>
+                <view class="price-item">
+                    <view class="price-label">附加成本</view>
+                    <view class="price-value additional" @click.stop="toggleEditField('additionalCost', financePrice.additionalCost)">
+                        <u-input v-if="editMode.additionalCost" v-model="tempValues.additionalCost" @blur="saveEditField('additionalCost', tempValues.additionalCost, 'finance', 'additionalCost')" :autoFocus="true" />
+                        <span v-else>￥{{ financePrice.additionalCost }}</span>
+                    </view>
+                </view>
+            </view>
+            <view class="price-group">
+                <view class="price-item">
+                    <view class="price-label">代理价格</view>
+                    <view class="price-value agent" @click.stop="toggleEditField('agentPrice', financePrice.agentPrice)">
+                        <u-input v-if="editMode.agentPrice" v-model="tempValues.agentPrice" @blur="saveEditField('agentPrice', tempValues.agentPrice, 'finance', 'agentPrice')" :autoFocus="true" />
+                        <span v-else>￥{{ financePrice.agentPrice }}</span>
+                    </view>
+                </view>
+                <view class="price-item">
+                    <view class="price-label">建议售价</view>
+                    <view class="price-value suggested" @click.stop="toggleEditField('suggestedPrice', financePrice.suggestedPrice)">
+                        <u-input v-if="editMode.suggestedPrice" v-model="tempValues.suggestedPrice" @blur="saveEditField('suggestedPrice', tempValues.suggestedPrice, 'finance', 'suggestedPrice')" :autoFocus="true" />
+                        <span v-else>￥{{ financePrice.suggestedPrice }}</span>
+                    </view>
+                </view>
+            </view>
+        </view>
+        
+        <!-- 溯源与位置区域 -->
+        <view class="traceability-location">
+            <view class="section-title">溯源与位置</view>
+            <view class="info-row">
+                <view class="info-label">商品位置</view>
+                <view class="info-value" @click.stop="toggleEditField('location', traceability.location)">
+                    <u-input v-if="editMode.location" v-model="tempValues.location" @blur="saveEditField('location', tempValues.location, 'trace', 'location')" :autoFocus="true" />
+                    <span v-else>{{ traceability.location }}</span>
+                </view>
+            </view>
+            <view class="info-row">
+                <view class="info-label">回收人员</view>
+                <view class="info-value" @click.stop="toggleEditField('recoveryPerson', traceability.recoveryPerson)">
+                    <u-input v-if="editMode.recoveryPerson" v-model="tempValues.recoveryPerson" @blur="saveEditField('recoveryPerson', tempValues.recoveryPerson, 'trace', 'recoveryPerson')" :autoFocus="true" />
+                    <span v-else>{{ traceability.recoveryPerson }}</span>
+                </view>
+            </view>
+            <view class="info-row">
+                <view class="info-label">鉴定人员</view>
+                <view class="info-value" @click.stop="toggleEditField('authenticationPerson', traceability.authenticationPerson)">
+                    <u-input v-if="editMode.authenticationPerson" v-model="tempValues.authenticationPerson" @blur="saveEditField('authenticationPerson', tempValues.authenticationPerson, 'trace', 'authenticationPerson')" :autoFocus="true" />
+                    <span v-else>{{ traceability.authenticationPerson }}</span>
+                </view>
+            </view>
+            <view class="action-button">
+                <u-button type="primary" plain size="mini" @click="viewLog">查看操作日志(12条)</u-button>
+            </view>
+        </view>
+        
+        <!-- 底部功能按钮栏 -->
+        <view class="bottom-bar">
+            <view class="bar-item" @click.stop="enterGlobalEdit">
+                <u-icon name="edit-pen" size="46rpx" color="#9ca3af"></u-icon>
+                <text class="bar-text">编辑</text>
+            </view>
+            <view class="bar-item">
+                <u-icon name="lock" size="46rpx" color="#9ca3af"></u-icon>
+                <text class="bar-text">锁单</text>
+            </view>
+            <view class="bar-item">
+                <i class="iconfont icon-crm-dayin" style="font-size:46rpx;color: #9ca3af;"></i>
+                <text class="bar-text">打印</text>
+            </view>
+            <view class="bar-item">
+                <view class="primary">
+                    <u-icon name="bag" size="44rpx" color="#fff"></u-icon>
+                    <text class="bar-text">开单</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                imgs: [
+                    {
+                        url: 'https://img2.baidu.com/it/u=2737617573,3814711807&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800'
+                    },
+                    {
+                        url: 'https://img2.baidu.com/it/u=3621921167,4010012360&fm=253&fmt=auto?w=760&h=760'
+                    },
+                    {
+                        url: 'https://img2.baidu.com/it/u=1250952949,1454201719&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067'
+                    }
+                ],
+                // 核心信息模拟数据
+                coreInfo: {
+                    brand: 'Rolex',
+                    model: 'Submariner Date 126610LN',
+                    code: 'AUTO_1002391',
+                    warehouseDate: '2025-12-14 10:00',
+                    paymentMethod: '线上转账',
+                    note: '单包 附件齐全 成色极好'
+                },
+                // 财务与价格模拟数据
+                financePrice: {
+                    originalCost: '82,000',
+                    additionalCost: '500',
+                    agentPrice: '85,500',
+                    suggestedPrice: '89,000'
+                },
+                // 溯源与位置模拟数据
+                traceability: {
+                    location: '上海A仓',
+                    recoveryPerson: 'IT秦',
+                    authenticationPerson: '中检-刘师傅'
+                },
+                // 编辑状态管理
+                editMode: {
+                    // 核心信息编辑状态
+                    brand: false,
+                    model: false,
+                    code: false,
+                    note: false,
+                    // 财务与价格编辑状态
+                    originalCost: false,
+                    additionalCost: false,
+                    agentPrice: false,
+                    suggestedPrice: false,
+                    // 溯源与位置编辑状态
+                    location: false,
+                    recoveryPerson: false,
+                    authenticationPerson: false
+                },
+                // 全局编辑模式
+                globalEditMode: false,
+                // 临时存储编辑值
+                tempValues: {}
+            }
+        },
+        methods: {
+            // 查看操作日志的方法
+            viewLog() {
+                // 查看操作日志的方法
+                console.log('查看操作日志');
+            },
+            
+            // 立即下架按钮处理方法
+            handleOffShelf() {
+                // 处理下架逻辑
+                uni.showModal({
+                    title: '确认下架',
+                    content: '确定要将此商品下架吗？',
+                    success: (res) => {
+                        if (res.confirm) {
+                            console.log('商品已下架');
+                            uni.showToast({
+                                title: '已下架',
+                                icon: 'success'
+                            });
+                        }
+                    }
+                });
+            },
+            // 切换单个字段的编辑状态
+            toggleEditField(field, value) {
+                // 如果不是全局编辑模式
+                if (!this.globalEditMode) {
+                    // 重置所有编辑状态
+                    this.resetEditMode();
+                    // 设置当前字段为编辑状态
+                    this.editMode[field] = true;
+                    // 保存临时值
+                    this.tempValues[field] = value;
+                }
+            },
+            // 保存单个字段的编辑值
+            saveEditField(field, newValue, type, fieldName) {
+                // 更新对应的数据
+                if (type === 'core') {
+                    this.coreInfo[fieldName] = newValue;
+                } else if (type === 'finance') {
+                    this.financePrice[fieldName] = newValue;
+                } else if (type === 'trace') {
+                    this.traceability[fieldName] = newValue;
+                }
+                // 退出编辑状态
+                this.editMode[field] = false;
+                // 清空临时值
+                delete this.tempValues[field];
+                // 模拟保存操作
+                console.log(`保存${field}字段值: ${newValue}`);
+            },
+            // 进入全局编辑模式
+            enterGlobalEdit() {
+                this.globalEditMode = true;
+                // 设置所有可编辑字段为编辑状态
+                this.editMode = {
+                    brand: true,
+                    model: true,
+                    code: true,
+                    note: true,
+                    originalCost: true,
+                    additionalCost: true,
+                    agentPrice: true,
+                    suggestedPrice: true,
+                    location: true,
+                    recoveryPerson: true,
+                    authenticationPerson: true
+                };
+                // 保存所有字段的临时值
+                this.tempValues = {
+                    brand: this.coreInfo.brand,
+                    model: this.coreInfo.model,
+                    code: this.coreInfo.code,
+                    note: this.coreInfo.note,
+                    originalCost: this.financePrice.originalCost,
+                    additionalCost: this.financePrice.additionalCost,
+                    agentPrice: this.financePrice.agentPrice,
+                    suggestedPrice: this.financePrice.suggestedPrice,
+                    location: this.traceability.location,
+                    recoveryPerson: this.traceability.recoveryPerson,
+                    authenticationPerson: this.traceability.authenticationPerson
+                };
+            },
+            // 保存全局编辑模式下的所有修改
+            saveGlobalEdit() {
+                // 保存所有临时值到原始数据
+                // 核心信息
+                if (this.tempValues.brand !== undefined) this.coreInfo.brand = this.tempValues.brand;
+                if (this.tempValues.model !== undefined) this.coreInfo.model = this.tempValues.model;
+                if (this.tempValues.code !== undefined) this.coreInfo.code = this.tempValues.code;
+                if (this.tempValues.note !== undefined) this.coreInfo.note = this.tempValues.note;
+                
+                // 财务与价格
+                if (this.tempValues.originalCost !== undefined) this.financePrice.originalCost = this.tempValues.originalCost;
+                if (this.tempValues.additionalCost !== undefined) this.financePrice.additionalCost = this.tempValues.additionalCost;
+                if (this.tempValues.agentPrice !== undefined) this.financePrice.agentPrice = this.tempValues.agentPrice;
+                if (this.tempValues.suggestedPrice !== undefined) this.financePrice.suggestedPrice = this.tempValues.suggestedPrice;
+                
+                // 溯源与位置
+                if (this.tempValues.location !== undefined) this.traceability.location = this.tempValues.location;
+                if (this.tempValues.recoveryPerson !== undefined) this.traceability.recoveryPerson = this.tempValues.recoveryPerson;
+                if (this.tempValues.authenticationPerson !== undefined) this.traceability.authenticationPerson = this.tempValues.authenticationPerson;
+                
+                this.globalEditMode = false;
+                // 退出所有编辑状态
+                this.resetEditMode();
+                // 清空临时值
+                this.tempValues = {};
+                // 模拟保存操作
+                console.log('保存所有字段值');
+            },
+            // 重置所有编辑状态
+            resetEditMode() {
+                Object.keys(this.editMode).forEach(key => {
+                    this.editMode[key] = false;
+                });
+            },
+            // 点击页面其他地方保存所有编辑
+            handleClickOutside() {
+                if (this.globalEditMode) {
+                    this.saveGlobalEdit();
+                } else {
+                    // 保存当前正在编辑的字段
+                    Object.keys(this.editMode).forEach(key => {
+                        if (this.editMode[key]) {
+                            // 根据字段名确定类型和字段名
+                            if (['brand', 'model', 'code', 'note'].includes(key)) {
+                                this.saveEditField(key, this.tempValues[key], 'core', key);
+                            } else if (['originalCost', 'additionalCost', 'agentPrice', 'suggestedPrice'].includes(key)) {
+                                this.saveEditField(key, this.tempValues[key], 'finance', key);
+                            } else if (['location', 'recoveryPerson', 'authenticationPerson'].includes(key)) {
+                                this.saveEditField(key, this.tempValues[key], 'trace', key);
+                            }
+                        }
+                    });
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/detail.scss";
+</style>

pages/wareHouse/index.vue

@@ -0,0 +1,211 @@
+<template>
+	<view class="page">
+		<view class="page-container">
+			<u-navbar class="nav-bar" title="库存管理" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
+			<!-- 总资产成本区域 -->
+			<view class="asset-header">
+				<view class="asset-text-wrap">
+					<view class="asset-title-con">
+						<view class="asset-title">总资产成本（元）</view>
+						<u-icon name="question-circle" size="14" color="#999999"></u-icon>
+					</view>
+					<text class="asset-value">3,869,014</text>
+				</view>
+				<u-button class="view-btn" type="text" size="mini">查看财务报表</u-button>
+			</view>
+			<view class="data-cards">
+				<view class="card-item">
+					<text class="card-label">今日上传</text>
+					<text class="card-value">12</text>
+				</view>
+				<view class="card-item">
+					<text class="card-label">今日下架</text>
+					<text class="card-value green">8</text>
+				</view>
+				<view class="card-item">
+					<text class="card-label">商品总数</text>
+					<text class="card-value">2</text>
+				</view>
+			</view>
+
+			<view class="search-wrapper">
+				<u-search placeholder="搜索编号、名称、品牌..." bg-color="#f9fafb" border-radius="4rpx"
+					:show-action="false" class="search-input-wrap"></u-search>
+				<view class="search-filter-btn">
+					<u-icon name="list" size="22" color="#666666"></u-icon>
+				</view>
+			</view>
+
+			<view class="category-tabs-wrap">
+				<u-tabs :list="tabList" :is-scroll="true" active-color="#007aff" inactive-color="#666666" font-size="28rpx"
+					border-bottom="none" @change="switchTab" class="u-tabs-custom"></u-tabs>
+			</view>
+
+			<view class="filter-bar">
+				<view class="sort-btn">
+					<text class="sort-text">{{ currentSortText }}</text>
+					<u-icon name="arrow-down" size="12" color="#666666" class="sort-icon"></u-icon>
+				</view>
+
+				<view class="price-layout-btn">
+					<view class="price-btn" type="text">
+						<u-icon name="eye" size="18" color="#1890ff" class="price-icon"></u-icon>
+						<text class="price-text">价格可见</text>
+					</view>
+
+					<view class="layout-btn" type="text" size="mini">
+						<u-icon name="grid" size="20" color="#666666"></u-icon>
+					</view>
+				</view>
+			</view>
+
+			<view class="goods-list">
+				<view @click="handleToDetail" class="goods-item" v-for="(goods, goodsIndex) in goodsList" :key="`goods-${goodsIndex}`">
+					<view class="goods-img-container">
+						<image class="goods-img" :src="goods.imgUrl" mode="aspectFill" lazy-load></image>
+						<view class="stock-indicator"
+							v-if="goods.stock !== null && goods.stock !== undefined && goods.stock > 0"></view>
+					</view>
+
+					<view class="goods-info">
+						<text class="goods-brand">{{ goods.brand || '' }}</text>
+						<text class="goods-name">{{ goods.name || '' }}</text>
+
+						<view class="price-group">
+							<view class="price-items">
+								<view class="price-item">
+									<text class="price-type">成本价</text>
+									<text class="price">¥{{ goods.costPrice }}</text>
+								</view>
+								<view class="price-item">
+									<text class="price-type">销售价</text>
+									<text class="price sales">¥{{ goods.salesPrice }}</text>
+								</view>
+							</view>
+							<view class="price-items">
+								<view class="price-item">
+									<text class="price-type">同行价</text>
+									<text class="price">¥{{ goods.peerPrice }}</text>
+								</view>
+								<view class="price-item">
+									<text class="price-type">代理价</text>
+									<text class="price">¥{{ goods.agentPrice }}</text>
+								</view>
+							</view>
+						</view>
+
+						<view class="others">
+							<view class="other-item stock" >得</view>
+							<view class="other-item">得</view>
+							<view class="other-item">得</view>
+						</view>
+					</view>
+					<view class="more">
+						<u-icon name="more-dot-fill" size="16" color="#666666"></u-icon>
+						<text class="goods-stock"
+							v-if="goods.stock !== null && goods.stock !== undefined && goods.stock > 0">数量:{{ goods.stock
+							}}</text>
+					</view>
+				</view>
+			</view>
+			
+		</view>
+		<!-- 添加按钮 -->
+		<view class="add-button" @click="handleAdd">
+			<u-icon name="plus" size="36" color="#ffffff"></u-icon>
+		</view>
+	</view>
+	
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			tabList: [
+				{ name: "全部" },
+				{ name: "腕表" },
+				{ name: "箱包" },
+				{ name: "珠宝" },
+				{ name: "鞋靴" },
+				{ name: "配饰" },
+				{ name: "服饰" },
+				{ name: "其它" }
+			],
+			currentSortText: '按最近更新排序',
+			goodsList: [
+				{
+					imgUrl: require("./imgs/1.jpg"),
+					brand: "ROLEX",
+					name: "Submariner Date 126610LN",
+					costPrice: "92,500",
+					salesPrice: "89,000",
+					peerPrice: "92,500",
+					agentPrice: "89,000",
+					stock: 1
+				},
+				{
+					imgUrl: require("./imgs/1.jpg"),
+					brand: "ROLEX",
+					name: "Submariner Date 126610LN",
+					costPrice: "92,500",
+					salesPrice: "89,000",
+					peerPrice: "92,500",
+					agentPrice: "89,000",
+					stock: 1
+				},
+				{
+					imgUrl: require("./imgs/1.jpg"),
+					brand: "ROLEX",
+					name: "Submariner Date 126610LN",
+					costPrice: "92,500",
+					salesPrice: "89,000",
+					peerPrice: "92,500",
+					agentPrice: "89,000",
+					stock: 1
+				},
+				{
+					imgUrl: require("./imgs/1.jpg"),
+					brand: "ROLEX",
+					name: "Submariner Date 126610LN",
+					costPrice: "92,500",
+					salesPrice: "89,000",
+					peerPrice: "92,500",
+					agentPrice: "89,000",
+					stock: 1
+				},
+				{
+					imgUrl: require("./imgs/1.jpg"),
+					brand: "ROLEX",
+					name: "Submariner Date 126610LN",
+					costPrice: "92,500",
+					salesPrice: "89,000",
+					peerPrice: "92,500",
+					agentPrice: "89,000",
+					stock: 1
+				}
+			]
+		};
+	},
+	methods: {
+		switchTab(index) {
+			console.log("当前选中标签索引：", index);
+		},
+		handleToDetail() {
+			uni.navigateTo({
+				url: `/pages/wareHouse/detail`
+			});
+		},
+		handleAdd() {
+			console.log("点击添加按钮");
+			uni.navigateTo({
+				url: `/pages/wareHouse/add`
+			});
+		},
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>

pages/wareHouse/styles/add.scss

@@ -0,0 +1,50 @@
+.add_page {
+    background-color: #f9fafb;
+    height: 100%;
+    padding: 20rpx;
+
+    .form_list {
+        background-color: #fff;
+        padding: 0 20rpx;
+        margin-bottom: 120rpx;
+    }
+
+}
+
+.btn_group {
+    position: fixed;
+    bottom: 0;
+    padding: 20rpx;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    box-shadow: 0 4px 25px 2px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    z-index: 1;
+    width:fill-available;
+}
+
+::v-deep .u-form-item {
+    .recycle_bottom_desc {
+        display: flex;
+        flex-direction: column;
+        gap: 20rpx;
+        width: 100%;
+    }
+
+    .u-form-item__body {
+        display: flex;
+        flex-direction: column !important;
+        gap: 20rpx;
+    }
+
+    &.u-form-item-row {
+        .u-form-item__body {
+            flex-direction: row !important;
+
+            .u-form-item__body__left {
+                width: auto !important;
+            }
+        }
+    }
+}

pages/wareHouse/styles/brandList.scss

@@ -0,0 +1,73 @@
+.brand_list_page {
+    width: 100%;
+
+    .brand_list {
+        background-color: #fff;
+        padding: 20rpx;
+
+        .u-nav-slot {
+            display: flex;
+            align-items: center;
+            gap: 10rpx;
+        }
+
+        .suggest_list {
+            margin-top: 20rpx;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20rpx;
+
+            .brand_item {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .brand_img {
+                    width: 100rpx;
+                    height: 100rpx;
+                }
+
+                .brand_name {
+                    font-size: 28rpx;
+                    font-weight: 600;
+                }
+            }
+        }
+
+    }
+    .index_list{
+        ::v-deep .uni-scroll-view-content{
+            margin-bottom: 120rpx;
+        }
+    }
+    .no_brand{
+        position:fixed;
+        bottom:0;
+        left: 0;
+        right: 0;
+        padding: 20rpx;
+        background-color: #fff;
+        z-index: 1;
+        ::v-deep .u-button__text{
+            color: #108cff;
+        }
+    }
+}
+::v-deep .u-index-anchor{
+    background-color: #efefef !important;
+}
+::v-deep .u-border-bottom{
+    border:none;
+}
+::v-deep .list-cell{
+    font-size: 28rpx;
+    display: flex;
+    align-items: center;
+    gap: 20rpx;
+    padding: 16rpx;
+    border-bottom: 1rpx solid #f0eded;
+    img{
+        width: 160rpx;
+        height: 80rpx;
+    }
+}

pages/wareHouse/styles/detail.scss

@@ -0,0 +1,358 @@
+.detail{
+    padding-bottom: 130rpx; // 为底部固定栏留出空间
+    // 轮播图样式
+    ::v-deep .u-swiper {
+        height: 600rpx !important;
+    }
+    
+    ::v-deep .u-swiper__wrapper{
+        height: 100% !important;
+    }
+    
+    ::v-deep .u-swiper__wrapper__item {
+        height: 100% !important;
+    }
+    
+    ::v-deep .u-swiper__wrapper__item__wrapper {
+        height: 100% !important;
+    }
+    
+    ::v-deep .u-swiper__wrapper__item__wrapper__image{
+        height: 100% !important;
+        width: 100% !important;
+        object-fit: cover !important;
+    }
+    
+    ::v-deep .u-swiper__indicator{
+        bottom: 20rpx !important;
+    }
+    
+    ::v-deep .u-swiper__indicator-item{
+        background-color: rgba(255, 255, 255, 0.5) !important;
+    }
+    
+    ::v-deep .u-swiper__indicator-item--active{
+        background-color: #ffffff !important;
+    }
+    
+    // 立即下架按钮
+    .immediate-off-shelf {
+        position: fixed;
+        bottom: 130rpx;
+        right: 20rpx;
+        z-index: 999;
+        animation: bounce 2s infinite;
+        
+        ::v-deep .u-button {
+            background-color: #1f2937;
+            border-radius: 60rpx;
+            padding: 10rpx 36rpx;
+            height: 84rpx;
+            line-height: 84rpx;
+            box-shadow:  0 20px 25px -5px rgb(0 0 0 / 0.1);
+            font-size: 28rpx;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8rpx;
+            border: none !important;
+        }
+        
+        ::v-deep .u-button--error {
+            border: none !important;
+        }
+        
+        ::v-deep .u-icon {
+            margin-right: 4rpx;
+        }
+    }
+    
+    // 上下跳动动画
+    @keyframes bounce {
+        0%, 100% {
+            transform: translateY(0);
+        }
+        50% {
+            transform: translateY(-10rpx);
+        }
+    }
+    
+    // 轮播图下方操作按钮
+    .swiper-actions{
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        padding: 40rpx 0;
+        background-color: #ffffff;
+        border-bottom: 1rpx solid #e8e8e8;
+        
+        .action-item{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            ::v-deep .u-icon{
+                background-color: #f9fafb;
+                border-radius: 20rpx;
+                padding:20rpx;
+            }
+            .action-text{
+                margin-top: 16rpx;
+                font-size: 22rpx;
+                font-weight: 500;
+                color: #606266;
+            }
+        }
+    }
+    
+    
+    // 底部功能按钮栏
+    .bottom-bar{
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 120rpx;
+        background-color: #fff;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
+        
+        .bar-item{
+            flex: 1;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            
+            .primary{
+                display: flex;
+                align-items: center;
+                gap: 8rpx;
+                padding: 14rpx 22rpx;
+                border-radius: 20rpx;
+                background-color: #ca8a04;
+                box-shadow: 0 10px 15px -3px #fef08a, 0 4px 6px -4px #fef08a;
+                .bar-text{
+                    margin-top: 0;
+                    color: #ffffff;
+                    font-size: 23rpx;
+                }
+            }
+            
+            .bar-text{
+                margin-top: 8rpx;
+                font-size: 20rpx;
+                font-weight: 500;
+                color: #9ca3af;
+                line-height: 32rpx;
+            }
+        }
+    }
+    
+    // 核心信息区域样式
+    .core-info {
+        background-color: #ffffff;
+        margin: 20rpx 20rpx 0 20rpx;
+        padding: 30rpx;
+        border-radius: 16rpx;
+        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+        
+        .section-title {
+            font-size: 32rpx;
+            font-weight: 600;
+            color: #303133;
+            margin-bottom: 24rpx;
+            padding-bottom: 16rpx;
+            border-bottom: 1rpx solid #e8e8e8;
+        }
+        
+        .info-row {
+            display: flex;
+            padding: 16rpx 0;
+            
+            .info-label {
+                flex: 1;
+                color: #909399;
+                font-size: 28rpx;
+                line-height: 40rpx;
+            }
+            
+            .info-value {
+                flex: 2;
+                color: #303133;
+                font-size: 28rpx;
+                line-height: 40rpx;
+                text-align: right;  
+                font-weight: 600;
+                &.code{
+                    color: #909399;
+                }         
+                &.note {
+                    background-color: #f5f7fa;
+                    padding: 16rpx;
+                    border-radius: 10rpx;
+                    color: #909399;
+                    text-align: left;
+                }
+            }
+
+            &.col{
+                gap: 16rpx;
+                flex-direction: column;
+            }
+        }
+    }
+    
+    // 财务与价格区域样式
+    .finance-price {
+        background-color: #ffffff;
+        margin: 20rpx 20rpx 0 20rpx;
+        padding: 30rpx;
+        border-radius: 16rpx;
+        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+        
+        .section-title {
+            font-size: 32rpx;
+            font-weight: 600;
+            color: #303133;
+            margin-bottom: 24rpx;
+            padding-bottom: 16rpx;
+            border-bottom: 1rpx solid #e8e8e8;
+        }
+        
+        .price-group {
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 24rpx;
+            
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+        
+        .price-item {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            
+            &:first-child {
+                padding-right: 30rpx;
+            }
+            
+            &:last-child {
+                padding-left: 30rpx;
+            }
+        }
+        
+        .price-label {
+            color: #909399;
+            font-size: 24rpx;
+            margin-bottom: 12rpx;
+        }
+        
+        .price-value {
+            font-size: 36rpx;
+            font-weight: 600;
+            
+            &.original {
+                color: #303133;
+            }
+            
+            &.additional {
+                color: #1890ff;
+            }
+            
+            &.agent {
+                color: #303133;
+            }
+            
+            &.suggested {
+                color: #f56c6c;
+            }
+        }
+    }
+    
+    // 溯源与位置区域样式
+    .traceability-location {
+        background-color: #ffffff;
+        margin: 20rpx;
+        padding: 30rpx;
+        border-radius: 16rpx;
+        box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+        
+        .section-title {
+            font-size: 32rpx;
+            font-weight: 600;
+            color: #303133;
+            margin-bottom: 24rpx;
+            padding-bottom: 16rpx;
+            border-bottom: 1rpx solid #e8e8e8;
+        }
+        
+        .info-row {
+            display: flex;
+            padding: 16rpx 0;
+            
+            .info-label {
+                flex: 1;
+                color: #909399;
+                font-size: 28rpx;
+                line-height: 40rpx;
+            }
+            
+            .info-value {
+                flex: 2;
+                color: #303133;
+                font-size: 28rpx;
+                line-height: 40rpx;
+                text-align: right;
+                ::v-deep .u-input {
+                    border: 1rpx solid #dcdfe6;
+                    border-radius: 8rpx;
+                    padding: 10rpx 16rpx;
+                    font-size: 28rpx;
+                    color: #303133;
+                    
+                    &:focus {
+                        border-color: #409eff;
+                        box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
+                    }
+                }
+                
+                textarea {
+                    width: 100%;
+                    border: 1rpx solid #dcdfe6;
+                    border-radius: 8rpx;
+                    padding: 10rpx 16rpx;
+                    font-size: 28rpx;
+                    color: #303133;
+                    line-height: 40rpx;
+                    resize: none;
+                    
+                    &:focus {
+                        border-color: #409eff;
+                        box-shadow: 0 0 0 2rpx rgba(64, 158, 255, 0.2);
+                    }
+                }
+            }
+        }
+        
+        .action-button {
+            margin-top: 24rpx;
+            text-align: center;
+            
+            ::v-deep .u-button {
+                font-weight: 600;
+                border: none;
+                background-color: #eff6ff;
+                border-radius: 15rpx;
+                font-size: 24rpx;
+                padding: 34rpx 0;
+            }
+        }
+    }
+}

pages/wareHouse/styles/index.scss

@@ -0,0 +1,374 @@
+/* 页面容器 */
+.page{
+  width: 100%;
+  background-color: #fff;
+}
+.page-container {
+  // padding: 8rpx 15rpx;
+  // background-color: #f9fafb;
+  // background-color: red;
+  min-height: 100vh;
+}
+.nav-bar{
+  border-bottom: 1px solid #f7f6f6 !important;
+}
+/* 总资产区域 */
+.asset-header {
+  width: 100%;
+  background-color: #ffffff;
+  border-radius: 20rpx;
+  padding: 25rpx 20rpx;
+  padding-bottom: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  box-sizing: border-box;
+
+  .asset-text-wrap {
+    flex: 1;
+  }
+  .asset-title-con{
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      margin-bottom: 12rpx;
+    .asset-title {
+      font-size: 26rpx;
+      color: #999999;
+      display: block;
+      font-weight: 500;
+    }
+  }
+
+  .asset-value {
+    font-size: 44rpx;
+    color: #333333;
+    display: block;
+    font-weight: 600;
+    letter-spacing: 2rpx;
+  }
+
+  .view-btn {
+    width: auto;
+    padding: 0 25rpx;
+    background-color: #e3eefd;
+    color: #0d83f1;
+    font-size: 20rpx;
+    border-radius: 30rpx;
+    font-weight: 500;
+    text-align: center;
+    border: none;
+    margin: 0;
+    float: none;
+  }
+}
+
+/* 数据卡片 */
+.data-cards {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 20rpx;
+  background-color: #fff;
+  padding: 8rpx 15rpx;
+  .card-item {
+    flex: 1;
+    text-align: center;
+    background: #f9fafb;
+    padding: 24rpx 0;
+    margin: 0 10rpx;
+    border-radius: 24rpx;
+    .card-label {
+      font-size: 26rpx;
+      color: #666;
+      display: block;
+      margin-bottom: 8rpx;
+    }
+    .card-value {
+      font-size: 36rpx;
+      font-weight: 700;
+      color: #333;
+      display: block;
+      &.green {
+        color: #09bb07;
+      }
+    }
+	&:nth-of-type(1){
+		margin-left:0;
+	}
+	&:nth-last-of-type(1){
+		margin-right:0;
+	}
+  }
+	
+}
+
+/* 搜索框区域 */
+.search-wrapper {
+  padding: 8rpx 15rpx;
+  height: 80rpx;
+  padding-bottom: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #fff;
+  .search-input-wrap {
+    height: 100%;
+    --u-search-bg-color: #ffffff !important;
+    --u-search-border-radius: 8rpx !important;
+    --u-search-input-height: 80rpx !important;
+    --u-search-padding: 0 30rpx !important;
+    --u-search-input-font-size: 28rpx !important;
+    --u-search-placeholder-color: #999 !important;
+    border: none !important;
+    box-shadow: none !important;
+  }
+  .search-filter-btn {
+    margin-left: 20rpx;
+    width: 60rpx;
+    height: 60rpx;
+    z-index: 10;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #f9fafb;
+    border: 40rpx;
+  }
+}
+
+/* 分类标签 */
+.category-tabs-wrap {
+  padding: 8rpx 15rpx;
+  margin-bottom: 20rpx;
+  background: #ffffff !important;
+  .u-tabs-custom {
+    --u-tabs-bg-color: #ffffff !important;
+    background: #ffffff !important; 
+    --u-tabs-border-bottom: none !important;
+    --u-tabs-item-padding: 10rpx 20rpx !important;
+    --u-tabs-item-margin: 0 10rpx !important;
+
+    .u-tabs__item--active {
+      font-weight: bold;
+      border-bottom: 2rpx solid #007aff !important;
+    }
+
+    .u-tabs__item-text {
+      font-size: 28rpx !important;
+      white-space: nowrap;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+/* 筛选栏 */
+.filter-bar {
+  padding: 8rpx 15rpx;
+  background-color: #f9fafb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 20rpx;
+
+  .sort-btn {
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 6rpx;
+
+    .sort-text {
+      font-size: 24rpx;
+      color: #686767;
+      font-weight: 500;
+    }
+
+    .sort-icon {
+      flex-shrink: 0;
+      transition: transform 0.3s ease;
+
+      &:active {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  .price-layout-btn{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .price-btn {
+      background: transparent;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      gap: 8rpx;
+
+      .price-icon {
+        flex-shrink: 0;
+      }
+
+      .price-text {
+        font-size: 22rpx;
+        color: #1890ff;
+        font-weight: 500;
+      }
+    }
+
+    .layout-btn {
+      background: transparent;
+      font-size: 22rpx;
+      color: #333;
+      width: 60rpx;
+      height: 60rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+  }
+}
+
+/* 商品列表 */
+.goods-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10rpx;
+  background-color: #f9fafb;
+  padding: 8rpx 15rpx;
+  .goods-item {
+    
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    gap: 20rpx;
+
+    .goods-img-container {
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    .goods-img {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 6rpx;
+      object-fit: cover;
+    }
+
+    .stock-indicator {
+      position: absolute;
+      bottom: 14rpx;
+      right: 6rpx;
+      width: 20rpx;
+      height: 20rpx;
+      border-radius: 50%;
+      background-color: #09bb07;
+      border: 2rpx solid #ffffff;
+    }
+    .goods-info {
+      flex: 1;
+      .goods-brand {
+        font-size: 32rpx;
+        font-weight: 700;
+        color: #333333;
+        display: block;
+        line-height: 1.2;
+      }
+
+      .goods-name {
+        font-size: 26rpx;
+        color: #666666;
+        display: block;
+        font-weight: 600;
+        line-height: 1.4;
+        word-break: break-all;
+      }
+      .price-group{
+        .price-items{
+          display: flex;
+          justify-content: space-between;
+          .price-item{
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+            .price-type{
+              color: #d1d5db;
+              font-size: 24rpx;
+            }
+            .price{
+              font-weight: 700;
+            }
+            .sales{
+              color: red;
+            }
+          }
+        }
+      }
+      .others{
+        margin-top: 20rpx;
+        display: flex;
+        align-items: center;
+        gap: 12rpx;
+        .other-item{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 26rpx;
+          height: 26rpx;
+          font-size: 20rpx;
+          color: #c5c3c3;
+          background-color: #f5f5f5;
+          padding:6rpx;
+          border-radius:50%;
+          &.stock{
+            background-color: #007aff;
+            color: #fff;
+          }
+        }
+      }
+    }
+    .more{
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      align-items: flex-end;
+      gap: 240rpx;
+      .goods-stock {
+        font-size: 24rpx;
+        color: #666666;
+        align-self: flex-end;
+        flex-shrink: 0;
+        padding-left: 10rpx;
+      }
+    }
+  }
+}
+
+/* 添加按钮 */
+.add-button {
+  position: fixed;
+  bottom: 150rpx;
+  right: 20rpx;
+  width: 112rpx;
+  height: 112rpx;
+  background-color: #1f2937;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  z-index: 999;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}
+