fix: 认养列表两个角色内容

src/store/modules/home/index.js

@@ -2,7 +2,8 @@ export default {
     namespaced: true,
     state() {
         return {
-            mainMenu: []
+            mainMenu: [],
+            userRole: null
         }
     },
     getters: {
@@ -11,6 +12,9 @@ export default {
         SET_MAIN_MENU(state, val) {
             state.mainMenu = val
         },
+        SET_USER_ROLE(state, val) {
+            state.userRole = val
+        },
     },
     actions: {
         

src/views/customTree/index.vue

@@ -138,8 +138,10 @@
 import fnHeader from "@/components/fnHeader.vue";
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import { useStore } from "vuex";
+let store = useStore();
 
-const ROLE = 2;
+const ROLE = store.state.home.userRole;
 
 const areaVal = ref(0);
 const areaOptions = ref([

src/views/home/components/adoptList.vue

@@ -47,9 +47,9 @@
             <div class="list-item" v-for="(item, index) in displayedAdoptList" :key="index">
                 <div class="list-info">
                     <div class="tree-icon">
-                        <div class="tree-tag" v-show="item.status === 0">未定价</div>
-                        <div class="tree-tag wait" v-show="item.status === 1">待认养</div>
-                        <div class="tree-tag done" v-show="item.status === 2">已认养</div>
+                        <div class="tree-tag" v-show="item.status === 0">{{ ROLE == 1 ? "未定价" : "可团购"}}</div>
+                        <div class="tree-tag wait" v-show="item.status === 1">{{ ROLE == 1 ? "待认养" : "可团购"}}</div>
+                        <div class="tree-tag done" v-show="item.status === 2">{{ ROLE == 1 ? "已认养" : "已认养"}}</div>
                         <!-- <img class="tree-img" src="@/assets/images/foster-home/tree-item.png" alt="" /> -->
                         <img class="tree-img" :src="require(`@/assets/images/foster-home/list/${index < 7 ? index : 0}.png`)" alt="" />
                         <div class="tree-type-name-tag">白糖罂</div>
@@ -59,7 +59,6 @@
                             {{item.bm ? item.bm : "BTY-A3"+index}}
                             <span class="type-tag">综合:{{item.zh||94}}分</span>
                             <span class="type-tag">生态:{{item.st||92}}分</span>
-                            <span class="type-tag" v-show="ROLE == 2">树龄:{{item.sl||3}}年</span>
                         </div>
                         <!-- 批量设置单价 -->
                         <div class="center-item" v-show="isManySetting && settingType !== 'price'">单价：<span class="unit">{{item.price||12}}元/斤</span></div>
@@ -72,13 +71,13 @@
                         </div>
                         <!-- 不是编辑状态 -->
                         <div class="center-item p-t-2 age-line" v-show="!isManySetting && !item.settingPrice">
-                            <div v-show="ROLE == 1" class="age-wrap">
+                            <div class="age-wrap">
                                 <div class="has-age">
-                                    <div class="age">树龄：<span>5年</span></div>
+                                    <div class="age">树龄：<span class="unit">5年</span></div>
                                 </div>
                                 <div class="sort-line"></div>
                             </div>
-                            单价：<span>{{item.status === 0 ? "--" : item.price||12}}元/斤</span>
+                            单价：<span class="unit">{{item.status === 0 ? "--" : item.price||12}}元/斤</span>
                         </div>
                         <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'price') || item.settingPrice">
                             <span class="edit-label">单价：</span>
@@ -86,16 +85,32 @@
                             <span class="unit">元/斤</span>
                         </div>
                         <div class="center-item" v-show="isManySetting && settingType !== 'age'">树龄：<span class="unit">{{item.age||5}}年</span></div>
-                        <div class="center-item" v-show="!item.settingPrice && !isManySetting">总认养斤数：<span class="unit">{{item.total||212}}斤</span></div>
-                        <div class="center-item" v-show="(isManySetting && settingType !== 'total')">总认养斤数：<span class="unit">{{item.total||212}}斤</span></div>
+                        <div class="center-item" v-show="!item.settingPrice && !isManySetting && ROLE == 1">总认养斤数：<span class="unit">{{item.total||212}}斤</span></div>
+                        <div class="center-item" v-show="(isManySetting && settingType !== 'total' && ROLE == 1)">总认养斤数：<span class="unit">{{item.total||212}}斤</span></div>
                         
                         <div class="center-item p-t-2 has-input" v-show="(isManySetting && settingType === 'total') || item.settingPrice">
                             <span class="edit-label">总认养斤数：</span>
                             <el-input-number @change="settingSinglePrice" class="number-input" :controls="false" v-model="item.total" :min="0" />
                             <span class="unit">斤</span>
                         </div>
+                        <!-- 团长角色 -->
+                        <div class="center-item p-t-2 progress-wrap" v-show="ROLE==2 && item.status !== 2">
+                            剩余可购：
+                            <el-progress :percentage="60" color="#FFD887"><span class="progress-text"><span class="over">150</span>/215斤</span></el-progress>
+                        </div>
+                        <div class="center-item p-t-2 progress-wrap" v-show="ROLE==2 && item.status === 2">
+                            权属人：
+                            <span class="unit">
+                                <div class="user-item">
+                                    <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
+                                        {{ owner.userName }}({{ owner.value }}斤)
+                                        <span v-show="oI<owners.length-1">/</span>
+                                    </div>
+                                </div>
+                            </span>
+                        </div>
                     </div>
-                    <div v-show="!isManySetting && !item.settingPrice" @click="toSettingSinglePrice(index, true)">
+                    <div v-show="!isManySetting && !item.settingPrice && ROLE == 1" @click="toSettingSinglePrice(index, true)">
                         <img src="@/assets/images/common/edit-icon.png" alt="" />
                     </div>
                 </div>
@@ -119,8 +134,10 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { useStore } from "vuex";
+let store = useStore();
 
-const ROLE = 1;
+const ROLE = store.state.home.userRole;
 
 const areaVal = ref(0);
 const areaOptions = ref([
@@ -170,7 +187,11 @@ const adoptList = ref([
     { status: 2, price: 16 },
     { status: 2, price: 16 },
 ]);
+
+const owners = ref([{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}])
+
 const displayedAdoptList = ref([...adoptList.value]); // 初始时显示完整列表
+
 onMounted(() => {});
 
 // 批量定价
@@ -328,6 +349,28 @@ function settingSinglePrice() {
                     font-size: 12px;
                     padding-top: 2px;
                 }
+                
+                .progress-wrap {
+                    display: flex;
+                    align-items: center;
+                    .user-item {
+                        display: flex;
+                        align-items: center;
+                    }
+                    .progress-text {
+                        font-size: 12px;
+                        color: #999999;
+                        .over {
+                            color: #FFD489;
+                        }
+                    }
+                    ::v-deep {
+                        .el-progress-bar__outer {
+                            width: 100px;
+                            background: rgba(242, 243, 245, 0.23);
+                        }
+                    }
+                }
                 .age-line {
                     display: flex;
                     align-items: center;

src/views/home/components/applyList.vue

@@ -12,14 +12,23 @@
                         BTY-A25
                         <span class="type-tag">综合:94分</span>
                         <span class="type-tag">生态:92分</span>
-                        <span class="type-tag">树龄:5年</span>
                     </div>
-                    <div class="center-item p-t-2">单价：<span>12元/斤</span></div>
+
+                    <div class="center-item p-t-2 age-line">
+                        <div class="age-wrap">
+                            <div class="has-age">
+                                <div class="age">树龄：<span class="unit">5年</span></div>
+                            </div>
+                            <div class="sort-line"></div>
+                        </div>
+                        单价：<span class="unit">{{item.status === 0 ? "--" : item.price||12}}元/斤</span>
+                    </div>
+
                     <div class="center-item">截至分配时间：<span>2025.05.15</span></div>
                 </div>
               </div>
 
-              <div class="apply-wrap">
+              <div class="apply-wrap" v-show="ROLE == 1">
                 <div class="apply-item" v-for="(item, index) in 2" :key="index">
                     <div class="apply-users">
                         <div class="user-item">
@@ -41,6 +50,41 @@
                     </div>
                 </div>
               </div>
+
+              <!-- 团长 -->
+              <div class="team-wrap" v-show="ROLE == 2">
+                <div class="team-box">
+                    <div class="team-apply">
+                        <div class="apply-total">已分配给15人</div>
+                        <div class="apply-tooltip">
+                            <el-tooltip
+                                class="box-item"
+                                effect="dark"
+                                content="Top Center prompts info"
+                                placement="top"
+                            >
+                            <template #content>
+                                <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
+                                    {{ owner.userName }}
+                                    <span v-show="oI<owners.length-1">/</span>
+                                </div>
+                            </template>
+                            <div class="tooltip-user-item">
+                                <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
+                                    {{ owner.userName }}
+                                    <span v-show="oI<owners.length-1">/</span>
+                                </div>
+                            </div>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                    
+                    <div class="progress-wrap" v-show="ROLE==2 && item.status !== 2">
+                        剩余可购：
+                        <el-progress :percentage="60" color="#FFD887"><span class="progress-text"><span class="over">150</span>/215斤</span></el-progress>
+                    </div>
+                </div>
+              </div>
             </div>
         </div>
     </div>
@@ -48,6 +92,12 @@
 
 <script setup>
 import { onMounted, ref } from "vue";
+import { useStore } from "vuex";
+let store = useStore();
+
+const owners = ref([{userName: "王丽丽", value: 50}, {userName: "张山", value: 30}, {userName: "刘珊珊", value: 30}, {userName: "张山2", value: 30}, {userName: "刘珊珊2", value: 30}])
+
+const ROLE = store.state.home.userRole;
 
 onMounted(() => {});
 </script>
@@ -111,6 +161,21 @@ onMounted(() => {});
                         color: #fff;
                     }
                 }
+                
+                .age-line {
+                    display: flex;
+                    align-items: center;
+                    .age-wrap {
+                        display: flex;
+                        align-items: center;
+                        .sort-line {
+                            margin: 0 10px;
+                            height: 10px;
+                            width: 1px;
+                            background: #6C6C6C;
+                        }
+                    }
+                }
             }
         }
         .list-item + .list-item {
@@ -163,5 +228,63 @@ onMounted(() => {});
     .p-t-2 {
         padding-top: 2px;
     }
+
+    .team-wrap {
+        padding-top: 12px;
+        .team-box {
+            padding: 5px 12px;
+            background: rgba(255, 255, 255, 0.04);
+        }
+        .team-apply {
+            display: flex;
+            align-items: center;
+            .apply-total {
+                color: #F2D677;
+                font-size: 14px;
+                padding-right: 10px;
+            }
+            .apply-tooltip {
+                padding: 4px 10px;
+                border-radius: 20px;
+                background: #3B3B3B;
+                .tooltip-user-item {
+                    display: flex;
+                    font-size: 12px;
+                    color: #F2D677;
+                    max-width: 170px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+                .user-detail {
+                    display: flex;
+                }
+            }
+        }
+        
+                
+        .progress-wrap {
+            padding-top: 8px;
+            display: flex;
+            align-items: center;
+            .user-item {
+                display: flex;
+                align-items: center;
+            }
+            .progress-text {
+                font-size: 12px;
+                color: #999999;
+                .over {
+                    color: #FFD489;
+                }
+            }
+            ::v-deep {
+                .el-progress-bar__outer {
+                    width: 160px;
+                    background: rgba(242, 243, 245, 0.23);
+                }
+            }
+        }
+    }
 }
 </style>

src/views/home/components/clientList.vue

@@ -530,21 +530,33 @@ const activeNames = ref([0]);
     }
 }
 .popup-custom{
-  width: 24%;
+  // width: 24%;
+  width: 504px;
   padding: 31px 25px;
+  box-sizing: border-box;
+  background: #232323;
   ::v-deep{
     .van-popup__close-icon{
-      color: #000;
+      color: #FFFFFF;
     }
   }
   .popup-title{
     text-align: center;
-    color: #000;
+    color: #FFFFFF;
     font-size: 24px;
     margin-bottom: 15px;
   }
   .popup-content{
     width: 100%;
+    ::v-deep {
+      .el-form-item__label {
+        color: rgba(255, 255, 255, 0.4);
+      }
+      .el-input__wrapper {
+        background: transparent;
+        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46) inset;
+      }
+    }
     .input{
       height: 46px;
       font-size: 16px;

src/views/home/index.vue

@@ -103,6 +103,7 @@ const mapRef = ref(null);
 
 const activeName = ref('认养列表')
 onMounted(() => {
+    store.commit("home/SET_USER_ROLE", 2);
     //区域切换监听事件
     eventBus.on("area:id", areaId);
 });