|
|
@@ -9,18 +9,20 @@
|
|
|
<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']">
|
|
|
- <view class="flower-name_box">
|
|
|
- <view class="current-item-title">
|
|
|
- <text>{{ item.name }}</text>
|
|
|
+ <image class="avatar-image" :src="item.avatar"></image>
|
|
|
+ <view class="customer-info">
|
|
|
+ <view class="customer-name">
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
+ <text class="order-warning">超1周未下单</text>
|
|
|
</view>
|
|
|
- <image class="flower-image" :src="item.avatar"></image>
|
|
|
- <text style="position:absolute;top:2upx;left:90upx;font-size:11upx;"> </text>
|
|
|
- </view>
|
|
|
- <view class="item-price-num">
|
|
|
- <view>
|
|
|
- <text>{{ item.mobile }}</text>
|
|
|
+ <view class="customer-balance-level">
|
|
|
+ <text class="balance">余额: {{ item.balance || 0 }}</text>
|
|
|
+ <text class="level">{{ item.level || '普通会员' }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="customer-details">
|
|
|
+ <text class="mobile">{{ item.mobile }}</text>
|
|
|
+ <text class="date">{{item.addTime ? item.addTime.substr(5,11):''}}</text>
|
|
|
</view>
|
|
|
- <view>{{item.addTime ? item.addTime.substr(5,11):''}}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -127,45 +129,94 @@ export default {
|
|
|
padding: 2upx;
|
|
|
& .item-body_box {
|
|
|
border-radius: 2upx;
|
|
|
- padding: 2upx;
|
|
|
+ padding: 5upx;
|
|
|
font-size: 14upx;
|
|
|
color:#666666;
|
|
|
- height:58upx;
|
|
|
+ height:70upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
&.active {
|
|
|
background-color: #d4d6d6;
|
|
|
}
|
|
|
&.not-active {
|
|
|
background-color: #EEEEEE;
|
|
|
}
|
|
|
- & .flower-name_box {
|
|
|
- padding: 0 5upx;
|
|
|
- position: relative;
|
|
|
- .current-item-title {
|
|
|
- font-size:12upx;
|
|
|
+
|
|
|
+ & .avatar-image {
|
|
|
+ width: 50upx;
|
|
|
+ height: 50upx;
|
|
|
+ border-radius: 5upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .customer-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ & .customer-name {
|
|
|
+ font-size: 12upx;
|
|
|
color: #333333;
|
|
|
font-weight: bold;
|
|
|
overflow: hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
+ text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
- width:85upx;
|
|
|
+ margin-bottom: 2upx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ & .order-warning {
|
|
|
+ font-size: 9upx;
|
|
|
+ color: #FF3B30;
|
|
|
+ font-weight: normal;
|
|
|
+ background-color: rgba(255, 59, 48, 0.1);
|
|
|
+ padding: 0 3upx;
|
|
|
+ border-radius: 3upx;
|
|
|
+ margin-left: 5upx;
|
|
|
+ }
|
|
|
}
|
|
|
- .flower-image{
|
|
|
- position: absolute;
|
|
|
- right:1upx;
|
|
|
- top:2upx;
|
|
|
- width:50upx;
|
|
|
- height:50upx;
|
|
|
- border-radius:5upx;
|
|
|
+
|
|
|
+ & .customer-balance-level {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 2upx;
|
|
|
+
|
|
|
+ & .balance {
|
|
|
+ font-size: 10upx;
|
|
|
+ color: #FF6600;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .level {
|
|
|
+ font-size: 10upx;
|
|
|
+ color: #8B7500;
|
|
|
+ background-color: rgba(255, 215, 0, 0.15);
|
|
|
+ border-radius: 3upx;
|
|
|
+ padding: 0 3upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & .customer-details {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #afaeae;
|
|
|
+ font-size: 10upx;
|
|
|
+
|
|
|
+ & .mobile {
|
|
|
+ margin-right: 10upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .date {
|
|
|
+ color: #afaeae;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
- .item-price-num{
|
|
|
- color:#afaeae;
|
|
|
- font-size:10upx;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 15upx 2upx 0 2upx;
|
|
|
- width:120upx;
|
|
|
}
|
|
|
}
|
|
|
}
|
