|
|
@@ -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')"></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')"></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')"></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>
|