feat:首页权益卡样式修改，新增服务列表

common/js/service.js

@@ -14,6 +14,15 @@ export default {
         })
     },
 
+    //当前服务对象
+    currServiceInfoList(param) {
+        return request({
+            url: '/business/tech/currServiceInfoList',
+            method: 'GET',
+            data:param
+        })
+    },
+
     //当前服务对象
     currServiceInfo(param) {
         return request({

pages/index/index.rpx.css

@@ -5,7 +5,7 @@
 	background-repeat: no-repeat;
 	background-size: 100%;
 	background-color: #f7f7f7;
-	padding: 0 32rpx;
+	padding: 0 32rpx 30rpx 32rpx;
 }
 
 .tuni {
@@ -52,6 +52,17 @@
 	margin-left: 10px;
 }
 
+.biaoqian1 {
+	white-space: nowrap;
+	background: #FFF6CE;
+	border-radius: 8rpx;
+	padding: 2rpx 10rpx;
+	font-size: 18rpx;
+	font-weight: 400;
+	color: #333333;
+	margin-left: 10px;
+}
+
 .tuni-right {
 	width: 365rpx;
 
@@ -500,6 +511,14 @@
  padding-left: 32rpx;
 	margin-top: 20rpx;
 }
+
+.orderMsg1{
+	padding-left: 32rpx;
+	padding-bottom: 30rpx;
+	padding-top: 30rpx;
+	border-bottom: 1px solid #F7F7F7;
+}
+
 .key{
 	height: 44rpx;
 	font-size: 28rpx;
@@ -508,6 +527,7 @@
 	color: #999999;
 	line-height: 44rpx;
 	margin-left: 16rpx;
+	min-width: 150rpx;
 }
 .value{
 	height: 44rpx;
@@ -559,3 +579,24 @@
 .hintViewBgColor3{
 	background: #11f10a;
 }
+.serviceTab {
+	background: #999999;
+	border: 1px solid #999999;
+	border-radius: 40rpx;
+	padding: 10rpx 40rpx;
+	margin: 0 10rpx;
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #FFFFFF;
+}
+
+.serviceTab1 {
+	background: #FFE05C;
+	border: 1px solid #FFE05C;
+	border-radius: 40rpx;
+	padding: 10rpx 40rpx;
+	margin: 0 10rpx;
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #333333;
+}

pages/index/index.vue

@@ -142,11 +142,11 @@
             <view class="flex-col justify-start" style="padding-top: 4rpx">
               <u-icon name="/static/index/quanyika.png" size="16"></u-icon>
             </view>
-            <view style="width: 300rpx">
+            <view style="min-width: 150rpx">
               <text class="key">权益卡：</text>
             </view>
             <view>
-              <text class="biaoqian" v-for="(card,index) in currService.cardList" :key="index" v-if="currService.cardList && currService.cardList.length">{{ card.title }}</text>
+              <text class="biaoqian1" v-for="(card,index) in currService.cardList" :key="index" v-if="currService.cardList && currService.cardList.length">{{ card.title }}</text>
               <text class="value" v-else>无</text>
             </view>
           </view>
@@ -178,12 +178,41 @@
       </view>
     </view>
 
-
-    <view >
-
+    <view v-if="currServiceList.length > 0" class="flex-col justify-start" style="background: #FFFFFF;border-radius: 24rpx;padding: 20rpx 0;">
+      <view class="flex-row justify-center">
+        <view :class="[serviceTabIndex === item.label ? 'serviceTab1' : 'serviceTab']" v-for="(item ,index) in serviceTabs" :key="index" @click="currServiceInfoList(item.label)">
+          {{item.value}}<text v-if="item.label === 0">（{{ myServiceFeeSum }}）</text><text v-if="item.label === 1">（{{ customerServiceFeeSum }}）</text>
+        </view>
+      </view>
+      <view class="flex-col orderMsg1" style="margin-bottom: 20rpx" v-for="(item,index) in currServiceList" :key="index">
+        <view class="flex-row justify-between">
+          <view class="flex-row">
+            <u-icon name="/static/index/quhao.png" size="20"></u-icon>
+            <text class="key">排号：</text>
+            <text class="value">{{ item.planNumber }}</text>
+          </view>
+          <view class="flex-col justify-center stateStr">
+            <text>{{ item.statusDesc }}</text>
+          </view>
+        </view>
+        <view class="flex-row">
+          <u-icon name="/static/index/orderNo1.png" size="20"></u-icon>
+          <text class="key">订单编号：</text>
+          <text class="value">{{ item.orderNo }}</text>
+        </view>
+        <view class="flex-row">
+          <u-icon name="/static/index/jiandao.png" size="20"></u-icon>
+          <text class="key">服务项目：</text>
+          <text class="value">{{ item.serviceProject }}</text>
+        </view>
+        <view class="flex-row">
+          <u-icon name="/static/index/tel.png" size="18"></u-icon>
+          <text class="key">手机尾号：</text>
+          <text class="value">{{ item.phone.substring(7, 11) }}</text>
+        </view>
+      </view>
     </view>
 
-
     <uni-popup ref="avatarPopup" type="center">
       <view class="avatarView " v-if="currService">
         <view class="flex-row justify-center">
@@ -357,6 +386,22 @@ export default {
         foregroundImageSrc: '/static/logo.png'
       },
       codeTime: null,
+      serviceTabs:[{
+        label:0,
+        value: "我的"
+      },
+        {
+          label:1,
+          value: "客户"
+        }],
+      serviceTabIndex: 0,
+      currServiceList:[],
+      // 分别存储两个列表的数据
+      myServiceList: [],
+      customerServiceList: [],
+      // 两个列表的serviceFee总和
+      myServiceFeeSum: 0,
+      customerServiceFeeSum: 0
 
     }
   },
@@ -687,9 +732,12 @@ export default {
         console.log('当前服务对象============》', this.currService)
         this.setButtomState(this.currService)
         if (!this.currService) {
+          this.currServiceList = []
           return
         }
-        this.currServiceList()
+        // 同时请求两个列表的数据
+        this.currServiceInfoList(0)
+        this.currServiceInfoList(1)
         this.equityCard(this.currService)
         this.currService.avatar = this.currService.avatar.replace(/^http:/, "https:")
       }).catch(err => {
@@ -700,15 +748,35 @@ export default {
 
     },
 
-    currServiceInfoList(){
+    currServiceInfoList(isAll){
+      this.serviceTabIndex = isAll
       this.$api.service.currServiceInfoList({
         storeId: this.userInfo.workStoreId,
-        orderNo: this.currService.orderNo
+        orderNo: this.currService.orderNo,
+        isAll:isAll
       }).then(res=>{
-        this.currServiceList  =  res.data.data
+        this.currServiceList = res.data.data
+        // 分别存储并计算两个列表的serviceFee总和
+        if (isAll === 0) {
+          this.myServiceList = res.data.data
+          this.myServiceFeeSum = this.calculateServiceFeeSum(this.myServiceList)
+        } else {
+          this.customerServiceList = res.data.data
+          this.customerServiceFeeSum = this.calculateServiceFeeSum(this.customerServiceList)
+        }
       })
     },
 
+    // 计算serviceFee总和
+    calculateServiceFeeSum(list) {
+      if (!list || list.length === 0) {
+        return 0
+      }
+      return list.reduce((sum, item) => {
+        return sum + (parseFloat(item.serviceFee) || 0)
+      }, 0)
+    },
+
     //查询是否是有权益卡的服务对象
     equityCard(data) {
       if (!data || !data.serviceObjectId) {