Quellcode durchsuchen

客户详情页

shish vor 11 Monaten
Ursprung
Commit
74229943d8

+ 1 - 1
hdApp/src/admin/member/detail.vue

@@ -484,7 +484,7 @@ export default {
            }
          },
         {
-          name: "改密码",
+          name: "开单",
           icon: "iconbianji",
           funtion: () => {
 			      this.$msg("开发中")

+ 158 - 224
hdPad/src/pages/home/components/customInfo.vue

@@ -2,13 +2,84 @@
 <view>
   <view class="custom-info">
     <view class="custom-detail">
-      <view class="order-item">
-        <view><text class="left">名称</text><text class="right"></text></view>
-        <view><text class="left">手机号</text><text class="right"></text></view>
-        <view><text class="left">地址</text><text class="right"></text></view>
-        <view>
-          <text class="left">创建时间</text>
-          <text class="right">{{customInfo.addTime ? customInfo.addTime.substr(5,11):''}}</text>
+      <view class="info-card">
+        <view class="info-item">
+          <text class="label">名称</text>
+          <view class="value-container">
+            <text class="value">{{customInfo.name || '龙岩花紫柜'}}</text>
+            <text class="edit-icon" @tap="editInfo('name')">&#xe602;</text>
+          </view>
+        </view>
+        
+        <view class="info-item">
+          <text class="label">手机号</text>
+          <text class="value">{{customInfo.mobile || '15280215347'}}</text>
+        </view>
+        
+        <view class="info-item">
+          <text class="label">地址</text>
+          <view class="value-container">
+            <text class="value">{{customInfo.address || '厦门市 前山路147号521'}}</text>
+            <text class="edit-icon" @tap="editInfo('address')">&#xe602;</text>
+          </view>
+        </view>
+        
+        <view class="info-item">
+          <text class="label">生日</text>
+          <view class="value-container">
+            <text class="value">{{customInfo.birthday || '12月3日'}}</text>
+            <text class="edit-icon" @tap="editInfo('birthday')">&#xe602;</text>
+          </view>
+        </view>
+        
+        <view class="info-item">
+          <text class="label">余额</text>
+          <text class="value highlight">{{customInfo.balance || '136'}}</text>
+        </view>
+        
+        <view class="info-item">
+          <text class="label">等级</text>
+          <text class="value">{{customInfo.level || '白银'}}</text>
+        </view>
+        
+        <view class="info-item">
+          <text class="label">累计消费</text>
+          <text class="value">{{customInfo.totalConsumption || '136'}}</text>
+        </view>
+        
+        <view class="info-item action-item" @tap="goToDetail('orders')">
+          <text class="label">按摩订单</text>
+          <text class="arrow">></text>
+        </view>
+        
+        <view class="info-item action-item" @tap="goToDetail('notes')">
+          <text class="label">结账记录</text>
+          <text class="arrow">></text>
+        </view>
+        
+        <view class="info-item action-item" @tap="goToDetail('balance')">
+          <text class="label">余额变动</text>
+          <text class="arrow">></text>
+        </view>
+        
+        <view class="info-item action-item" @tap="goToDetail('recharge')">
+          <text class="label">充值记录</text>
+          <text class="arrow">></text>
+        </view>
+        
+        <view class="info-item action-item" @tap="goToDetail('consumption')">
+          <text class="label">下单记录</text>
+          <text class="arrow">></text>
+        </view>
+        
+        <view class="info-item action-item" @tap="goToDetail('level')">
+          <text class="label">等级变动</text>
+          <text class="arrow">></text>
+        </view>
+        
+        <view class="info-item action-item" @tap="goToDetail('debt')">
+          <text class="label">欠款变动</text>
+          <text class="arrow">></text>
         </view>
       </view>
     </view>
@@ -24,9 +95,11 @@ export default {
 	components: {},
   data() {
     return {
-      customInfo:[],
-      currentJobType:'modify',
-      currentJobId:0
+      customInfo: {},
+      currentJobType: 'modify',
+      currentJobId: 0,
+      editMode: false,
+      editField: ''
     }
   },
 	props: {
@@ -44,6 +117,9 @@ export default {
 			handler(newId,oldId) {
 				this.currentJobId = Number(oldId)
 		    this.currentJobId = Number(newId)
+		    if (newId) {
+		      this.getCustomDetail(newId)
+		    }
 			}
 		}
 	},
@@ -52,10 +128,26 @@ export default {
       getDetail({userId:id}).then(res=>{
         if(res.code == 1){
           this.customInfo = res.data
-          console.log('customInfo')
-          console.log(this.customInfo)
         }
       })
+    },
+    
+    editInfo(field) {
+      this.editField = field
+      this.editMode = true
+      // 这里可以添加编辑逻辑,如弹出编辑框等
+      uni.showToast({
+        title: `编辑${field}`,
+        icon: 'none'
+      })
+    },
+    
+    goToDetail(type) {
+      // 导航到详情页面
+      uni.showToast({
+        title: `查看${type}详情`,
+        icon: 'none'
+      })
     }
   }
 }
@@ -71,232 +163,74 @@ export default {
 .custom-info{
   display:flex;
   height: 100vh;
+  
   & .custom-detail{
-      height: 100vh;
-      overflow: scroll;
-      border-right:1upx solid #EEEEEE;
-      flex: 40;
-      .order-img{
-        display:flex;
-        margin:5upx;
-        justify-content:center;
-        image{
-          width:180upx;
-          height:180upx;
-          border-radius:3upx;
-        }
-      }
-      .order-item{
-        display:flex;
-        font-size:11upx;
-        margin-top:10upx;
-        justify-content: center;
-        flex-wrap:wrap;
-        view{
-          justify-content:space-between;
-          align-items:center;
-          display:flex;
-          border-bottom:1upx solid #EEEEEE;
-          width:180upx;
-          height:20upx;
-          padding:0 10upx 0 10upx;
-          .left{
-            color:#CCCCCC;
-          }
-          .right{
-            color:#666666;
-          }
-        }
-      }
-    }
-	& .button-area {
-		flex: 9;
-		height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    padding: 5upx;
-    border-left:1upx solid #EEEEEE;
-    & > view {
-        border: 1upx solid #EEEEEE;
-        border-radius: 5upx;
-        text-align: center;
-        padding: 10upx 0;
-        color: #CCCCCC;
-        margin-bottom: 10upx;
-        font-size: 12upx;
-        text-align: center;
-        font-weight:bold;
-    }
-    & .active {
-      color: #09C567;
-      border-color: #09C567;
-      font-size: 12upx;
-      font-weight:bold;
-    }
-	}
-	& .work-item-detail {
-		flex: 40;
-		height: 100%;
-    & .right-detail-title{
-      font-size:10upx;
-      font-weight:bold;
-      margin-left:5upx;
-      margin-top:10upx;
-    }
-    & .unit-use-item {
-      flex: 40;
-      display: flex;
-      flex-direction: column;
-      .commodity-list {
-        padding: 5upx;
-        .commodity-item {
-          display: flex;
-          margin-top:5upx;
-          .item-icon {
-            flex-shrink: 0;
-            width: 38upx;
-            height: 38upx;
-            border-radius:2upx;
-          }
-          .item-info {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            margin-left:6upx;
-            .info-line {
-              display: flex;
-              justify-content: space-between;
-              align-items: flex-start;
-              position: relative;
-              .item-name {
-                font-size:11upx;
-                color: black;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-              .item-price {
-                color: #333;
-                font-size: 10upx;
-              }
-              .item-type {
-                color: #999;
-                font-size: 8upx;
-              }
-              .item-count {
-                color: #666;
-                font-size: 11upx;
-              }
-            }
-          }
-        }
-      }
-      .summary-bar {
-        padding: 0 10upx;
-        height: 30upx;
+    height: 100vh;
+    overflow-y: auto;
+    border-right:1upx solid #EEEEEE;
+    flex: 1;
+    padding: 10upx;
+    
+    .info-card {
+      background-color: #fff;
+      border-radius: 5upx;
+      padding: 10upx 0;
+      
+      .info-item {
         display: flex;
-        align-items: center;
         justify-content: space-between;
-        border-top: 1upx solid #eeeeee;
-        .operate-view {
-          display: flex;
-          align-items: center;
-          color: #09C567;
+        align-items: center;
+        padding: 10upx 15upx;
+        border-bottom: 1upx solid #f5f5f5;
+        min-height: 30upx;
+        
+        &:last-child {
+          border-bottom: none;
+        }
+        
+        .label {
+          color: #999;
           font-size: 12upx;
-          .iconfont {
-            margin-right: 20upx;
-            font-size: 10upx;
-          }
+          flex: 0 0 70upx;
         }
-        .describe-view {
-          display: flex;
-          align-items: center;
+        
+        .value {
           color: #333;
-          font-size: 9upx;
-        }
-      }
-    }
-    & .total-use-item {
-      flex: 40;
-      display: flex;
-      flex-direction: column;
-      .commodity-list {
-        padding: 5upx;
-        .commodity-item {
-          display: flex;
-          margin-top:5upx;
-          .item-icon {
-            flex-shrink: 0;
-            width: 38upx;
-            height: 38upx;
-            border-radius:2upx;
-          }
-          .item-info {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            margin-left:6upx;
-            .info-line {
-              display: flex;
-              justify-content: space-between;
-              align-items: flex-start;
-              position: relative;
-              .item-name {
-                font-size:11upx;
-                color: black;
-                overflow: hidden;
-                white-space: nowrap;
-                text-overflow: ellipsis;
-              }
-              .item-price {
-                color: #333;
-                font-size: 10upx;
-              }
-              .item-type {
-                color: #999;
-                font-size: 8upx;
-              }
-              .item-count {
-                color: #666;
-                font-size: 11upx;
-              }
-              .wastage{
-                position: absolute;
-                right:0upx;
-                font-size:9upx;
-                top:4upx;
-                color:#666666;
-              }
-            }
+          font-size: 12upx;
+          text-align: right;
+          flex: 1;
+          
+          &.highlight {
+            color: #f56c6c;
+            font-weight: bold;
           }
         }
-      }
-      .summary-bar {
-        padding: 0 10upx;
-        height: 30upx;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        border-top: 1upx solid #eeeeee;
-        .operate-view {
+        
+        .value-container {
           display: flex;
           align-items: center;
-          color: #09C567;
-          font-size: 12upx;
-          .iconfont {
-            margin-right: 20upx;
-            font-size: 10upx;
+          justify-content: flex-end;
+          flex: 1;
+          
+          .edit-icon {
+            color: #409eff;
+            font-size: 12upx;
+            margin-left: 5upx;
           }
         }
-        .describe-view {
-          display: flex;
-          align-items: center;
-          color: #333;
-          font-size: 9upx;
+        
+        .arrow {
+          color: #c0c4cc;
+          font-size: 12upx;
+          margin-left: 5upx;
+        }
+        
+        &.action-item {
+          background-color: #f9f9f9;
         }
       }
     }
-	}
+  }
+
 }
 </style>

+ 120 - 3
hdPad/src/pages/home/components/customList.vue

@@ -3,9 +3,46 @@
         <view class="title">列表</view>
         <view class="order-status">
             <view @tap="changeStatus(0)" :class="[{'checked':status===0}]">全部</view>
-            <view @tap="changeStatus(1)" :class="[{'checked':status===1}]">消费排行</view>
-            <view @tap="changeStatus(4)" :class="[{'checked':status===4}]">赊账排行</view>
+            <view @tap="changeStatus(1)" :class="[{'checked':status===4}]">余额排行</view>
+            <view @tap="changeStatus(4)" :class="[{'checked':status===1}]">消费排行</view>
         </view>
+
+        <view class="search-container">
+            <view class="search-box">
+                <input 
+                    type="text" 
+                    v-model="searchKeyword" 
+                    placeholder="请输入客户名称或手机号" 
+                    class="search-input" 
+                    @input="handleSearch"
+                />
+                <text class="clear-btn" @tap="clearSearch">清空</text>
+            </view>
+            <view class="number-keyboard">
+                <view class="keyboard-row">
+                    <view 
+                        v-for="num in [1,2,3,4,5]" 
+                        :key="num" 
+                        class="number-key" 
+                        @tap="appendNumber(num)"
+                    >
+                        {{num}}
+                    </view>
+                </view>
+                <view class="keyboard-row">
+                    <view 
+                        v-for="num in [6,7,8,9,0]" 
+                        :key="num" 
+                        class="number-key" 
+                        @tap="appendNumber(num)"
+                    >
+                        {{num}}
+                    </view>
+                </view>
+
+            </view>
+        </view>
+
         <scroll-view class="itemList-item_box" scroll-y="true" @scrolltolower="reachBottom" lower-threshold="50">
             <view v-for="item in list.data" :key="item.id" class="show-item_box" @click="getCustomInfo(item,1)">
                 <view :class="[selCustomId==item.id ? 'active' : 'not-active', 'item-body_box']">
@@ -44,6 +81,7 @@ export default {
             status:0,
             selCustomId:0,
             sn:'',
+            searchKeyword: '',
         }
     },
     created(){
@@ -62,6 +100,19 @@ export default {
             this.resetList()
             this.getCustomData()
         },
+        handleSearch() {
+            this.resetList()
+            this.getCustomData()
+        },
+        clearSearch() {
+            this.searchKeyword = ''
+            this.resetList()
+            this.getCustomData()
+        },
+        appendNumber(num) {
+            this.searchKeyword += num.toString()
+            this.handleSearch()
+        },
         reachBottom() {
             if (!this.list.finished) {
                 this.getCustomData().then((res) => {
@@ -72,7 +123,15 @@ export default {
             }
         },
         getCustomData(){
-            let params = {page: this.list.page,pageSize:30}
+            let params = {
+                page: this.list.page,
+                pageSize: 30
+            }
+            
+            if (this.searchKeyword) {
+                params.keyword = this.searchKeyword
+            }
+            
             return getCustomList(params).then(res=>{
                 if(res.code == 1){
                     this.completes(res)
@@ -121,6 +180,64 @@ export default {
             color:white;
         }
     }
+    
+    & .search-container {
+        margin-bottom: 10upx;
+        
+        .search-box {
+            display: flex;
+            align-items: center;
+            padding: 5upx;
+            background-color: #f5f5f5;
+            border-radius: 5upx;
+            margin-bottom: 5upx;
+            
+            .search-input {
+                flex: 1;
+                height: 30upx;
+                font-size: 12upx;
+                padding: 0 10upx;
+            }
+            
+            .clear-btn {
+                padding: 0 10upx;
+                font-size: 10upx;
+                color: #09C567;
+            }
+        }
+        
+        .number-keyboard {
+            padding: 5upx;
+            background-color: #f0f0f0;
+            border-radius: 5upx;
+            
+            .keyboard-row {
+                display: flex;
+                justify-content: space-between;
+                margin-bottom: 5upx;
+                
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+            
+            .number-key {
+                width: 18%;
+                height: 30upx;
+                line-height: 30upx;
+                text-align: center;
+                background-color: #fff;
+                border-radius: 3upx;
+                font-size: 12upx;
+                
+                &:active {
+                    background-color: #e0e0e0;
+                }
+            }
+            
+
+        }
+    }
     & .itemList-item_box {
         overflow-y: auto;
         flex: 1;

+ 1 - 1
hdPad/src/pages/home/components/customerList.vue

@@ -27,7 +27,7 @@
     <view class="search-container">
         <input class="input-serach_box" v-model="searchUser" type="text" @focus="clearInput" @input="changSearch" placeholder-class="input-placeholder" placeholder="请输入客户名称"/>
         <view class="number-keyboard">
-            <view class="number-key" v-for="num in [0,1,2,3,4,5,6,7,8,9]" :key="num" @click="inputNumber(num)">{{num}}</view>
+            <view class="number-key" v-for="num in [1,2,3,4,5,6,7,8,9,0]" :key="num" @click="inputNumber(num)">{{num}}</view>
             <view class="delete-key" @click="clearInput">清空</view>
         </view>
     </view>

+ 2 - 11
hdPad/src/pages/home/custom.vue

@@ -14,11 +14,6 @@
             <view class="custom-asset">
                 开发中
             </view>
-
-			<view class="open-box">
-				<consoleButton></consoleButton>
-			</view>
-
         </view>
     </view>
 </view>
@@ -29,10 +24,9 @@ import productMins from "@/mixins/product";
 import casherNav from './components/nav.vue'
 import customList from './components/customList.vue'
 import customInfo from './components/customInfo.vue'
-import consoleButton from './components/customButton.vue'
 export default {
     name: "custom",
-    components: {casherNav,customList,customInfo,consoleButton},
+    components: {casherNav,customList,customInfo},
     mixins: [productMins],
     data() {
         return {
@@ -62,7 +56,7 @@ export default {
         background-color: #09C567;
     }
     & .custom-list {
-        flex: 32;
+        flex: 38;
     }
     & .custom-info{
         flex: 32;
@@ -70,8 +64,5 @@ export default {
     & .custom-asset{
         flex: 32;
     }
-    & .open-box{
-        flex: 8;
-    }
 }
 </style>