qingyiay
2023-05-17 ae1aad66a165ee7253bed2127a3b53baa40c2361
pages/customer-page/customer-my/customer-my.vue
@@ -1,39 +1,71 @@
<template>
   <view class="customer-my">
      <view class="huodai">
         <combined-title title="我的货代" @rightText="addHuoDai">
            <template v-slot:rightText>
               <text>添加</text>
            </template>
         </combined-title>
         <view class="huodai-list">
            <u-swipe-action>
               <u-cell-group :border="false">
                  <u-swipe-action-item :options="options1" v-for="(item, index) in huoDaiData" :index="index" :name="item.userId" :key="index" @click="deleteHuoDaiClick">
                     <u-cell :title="item.name" value="详情" @click="toFreightForwarderDetails(item.id)"></u-cell>
                  </u-swipe-action-item>
               </u-cell-group>
            </u-swipe-action>
      <view class="driver-banner"><view class="navgation">我的</view></view>
      <view class="personal-information">
         <view class="personal-information-block">
            <view class="block-main">
               <view class="huodai">
                  <combined-title title="我的货代" @rightText="addHuoDai">
                     <template v-slot:rightText>
                        <text>添加</text>
                     </template>
                  </combined-title>
                  <view class="huodai-list">
                     <u-swipe-action>
                        <u-cell-group :border="false">
                           <u-swipe-action-item
                              :options="options1"
                              v-for="(item, index) in huoDaiData"
                              :index="item.userId"
                              :name="item.userId"
                              :key="index"
                              @click="deleteHuoDaiClick"
                           >
                              <u-cell :title="item.name" value="详情" @click="toFreightForwarderDetails(item.userId)">
                                 <u-icon name="arrow-right" color="#999999" size="30" slot="right-icon"></u-icon>
                              </u-cell>
                           </u-swipe-action-item>
                        </u-cell-group>
                     </u-swipe-action>
                  </view>
               </view>
            </view>
         </view>
      </view>
      <view class="fleet-container">
         <combined-title title="我的车队" @rightText="addFleet">
            <template v-slot:rightText>
               <text>添加</text>
            </template>
         </combined-title>
         <view class="fleet-list">
            <u-swipe-action>
               <u-cell-group :border="false">
                  <u-swipe-action-item :options="options1" v-for="(item, index) in fleetData" :index="index" :name="item.id" :key="index" @click="deleteFleetClick">
                     <u-cell :title="item.name" :value="item.userSijisum + '辆'" @click="tofleetDetails(item.id)"></u-cell>
                  </u-swipe-action-item>
               </u-cell-group>
            </u-swipe-action>
         <view class="personal-information-block">
            <view class="block-main">
               <view class="fleet-container">
                  <combined-title title="我的车队" @rightText="addFleet">
                     <template v-slot:rightText>
                        <text>添加</text>
                     </template>
                  </combined-title>
                  <view class="fleet-list">
                     <u-swipe-action>
                        <u-cell-group :border="false">
                           <u-swipe-action-item
                              :options="options1"
                              v-for="(item, index) in fleetData"
                              :index="item.id"
                              :name="item.id"
                              :key="index"
                              @click="deleteFleetClick"
                           >
                              <u-cell :title="item.name" :value="item.userSijisum + '辆'" @click="tofleetDetails(item.id)">
                                 <u-icon name="arrow-right" color="#999999" size="30" slot="right-icon"></u-icon>
                              </u-cell>
                           </u-swipe-action-item>
                        </u-cell-group>
                     </u-swipe-action>
                  </view>
               </view>
            </view>
         </view>
      </view>
      <view class="logout"><u-button text="退出登录" type="primary" @click="logout()"></u-button></view>
      <view class="utils-button">
         <view class="statistics"><u-button text="用户管理" type="primary" @click="userManage" v-if="roleType == 1 && userEntity.isHostUser === '0'"></u-button></view>
         <view class="logout"><u-button text="退出登录" type="primary" @click="logout()"></u-button></view>
      </view>
      <!-- 新建车队弹出框 -->
      <view class="addNewGroup">
@@ -123,33 +155,49 @@
         // 退出模态框
         logoutShow: false,
         logoutTitle: '提示',
         logoutContent: '是否确认退出'
         logoutContent: '是否确认退出',
         // 用户信息对象
         userEntity: {}
      };
   },
   computed: {
      roleType() {
         return uni.getStorageSync('roleType');
      }
   },
   onShow() {
      this.init();
   },
   methods: {
      init() {
         uni.showLoading({
            title: '加载中...'
         });
         this.getAllHuoDaiByCustomerId();
         this.getFleet();
         uni.hideLoading();
         this.getUserEntity();
      },
      // 获取用户信息
      getUserEntity() {
         this.$reqGet('getUserEntity').then(res => {
            this.userEntity = res.data;
         });
      },
      // 获取货代列表
      getAllHuoDaiByCustomerId() {
         uni.showLoading({
            title: '加载中...'
         });
         this.$reqGet('getAllHuoDaiByCustomerId').then(res => {
            uni.hideLoading();
            this.huoDaiData = res.data;
            console.log('货代列表', res);
         });
      },
      // 获取车队列表
      getFleet() {
         uni.showLoading({
            title: '加载中...'
         });
         this.$reqGet('getFleet').then(res => {
            uni.hideLoading();
            this.fleetData = res.data;
            console.log('车队列表', res);
         });
      },
      // 添加货代
@@ -160,7 +208,6 @@
      },
      // 添加车队
      addFleet() {
         console.log('添加车队');
         this.updateGroupShow = true;
      },
      addNewFleetPopupClose() {
@@ -175,15 +222,19 @@
            title: '加载中...'
         });
         // 新建车队
         this.$reqPost('saveFleet', this.addGroupForm, 'params').then(res => {
            uni.hideLoading();
            if (res.code == 0) {
               this.$u.toast('添加成功');
         this.$reqPost('saveFleet', this.addGroupForm, 'params')
            .then(res => {
               uni.hideLoading();
               console.log(res, '新建车队');
               if (res.code == 0) {
                  this.$u.toast('添加成功');
               } else {
                  this.$u.toast(res.msg ? res.msg : '添加失败');
               }
            })
            .then(r => {
               this.getFleet();
            } else {
               this.$u.toast(res.data ? res.data : '添加失败');
            }
         });
            });
         this.updateGroupShow = false;
      },
      // 删除货代
@@ -208,17 +259,18 @@
         uni.showLoading({
            title: '加载中...'
         });
         this.$reqPost('deleteHuoDai', { id: this.deleteHuoDaiId }, 'params').then(res => {
            uni.hideLoading();
            if (res.code == 0) {
               if (res.data) {
         this.$reqPost('deleteHuoDai', { id: this.deleteHuoDaiId }, 'params')
            .then(res => {
               uni.hideLoading();
               if (res.code == 0) {
                  this.$u.toast('删除成功');
                  this.getAllHuoDaiByCustomerId();
               } else {
                  this.$u.toast('删除失败');
                  this.$u.toast(res.msg ? res.msg : '删除失败');
               }
            }
         });
            })
            .then(r => {
               this.getAllHuoDaiByCustomerId();
            });
      },
      // 删除车队
      deleteFleetClick(args) {
@@ -242,19 +294,24 @@
         uni.showLoading({
            title: '加载中...'
         });
         this.$reqPost('deleteFleet', { id: this.deleteFleetId }, 'params').then(res => {
            console.log('删除车队', res);
            if (res.code == 0) {
               this.$u.toast('删除成功');
            }
            uni.hideLoading();
            this.getFleet();
         });
         this.$reqPost('deleteFleet', { id: this.deleteFleetId }, 'params')
            .then(res => {
               console.log('删除车队', res);
               if (res.code == 0) {
                  this.$u.toast('删除成功');
               } else {
                  this.$u.toast(res.msg ? res.msg : '删除失败');
               }
               uni.hideLoading();
            })
            .then(() => {
               this.getFleet();
            });
      },
      // 货代详情
      toFreightForwarderDetails(id) {
      toFreightForwarderDetails(userId) {
         uni.navigateTo({
            url: `/pages/customer-page/freight-forwarder-details/freight-forwarder-details`
            url: `/pages/customer-page/freight-forwarder-details/freight-forwarder-details?userId=${userId}`
         });
      },
      // 车队详情
@@ -271,15 +328,84 @@
      },
      logoutCancel() {
         this.logoutShow = false;
      },
      // 跳转用户管理页面
      userManage() {
         uni.navigateTo({
            url: '/pages/customer-page/customer-my/userMange/userMange'
         });
      }
   }
};
</script>
<style lang="scss" scoped>
@mixin flex {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.utils-button {
   margin-top: vww(35);
   .statistics,
   .logout {
      margin-top: vww(10);
      margin-bottom: vww(10);
      /deep/ .u-button {
         width: 631rpx;
         height: 74rpx;
         border: 2px solid #3b56eb;
         background-color: #fff;
         color: #3b56eb;
         border-radius: 37rpx 37rpx 37rpx 37rpx;
      }
   }
}
::v-deep.customer-my {
   width: 94%;
   margin: 0 auto;
   width: 100%;
   margin: vww(90) auto;
   .driver-banner {
      width: 100%;
      height: 430rpx;
      background: linear-gradient(0deg, #ffffff 0%, #0055fe 100%);
      background-size: contain;
      position: fixed;
      top: 0;
      .navgation {
         width: 80rpx;
         height: 37rpx;
         font-size: 40rpx;
         font-weight: normal;
         color: #ffffff;
         line-height: 69rpx;
         margin: vww(60) auto;
      }
   }
   .personal-information {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      position: relative;
      top: vww(20);
      &-block {
         width: 690rpx;
         min-height: 478rpx;
         background: #ffffff;
         box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(73, 120, 240, 0.14), 0rpx 7rpx 45rpx 0rpx rgba(73, 120, 240, 0.12);
         border-radius: 20rpx;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         margin-top: vww(8);
         .block-main {
            width: 636rpx;
            margin: vww(10) vww(14);
         }
      }
   }
   .huodai {
      .huodai-list {