商机样式修改

c63e32bd · Chao Sun · 4fd1b63b · c63e32bd · c63e32bd · c63e32bd
Commit c63e32bd authored Mar 17, 2020 by Chao Sun
8 changed files
--- a/src/app/common/toast/toast.component.scss
+++ b/src/app/common/toast/toast.component.scss
@@ -10,7 +10,7 @@
  .weui-toast {
    position: fixed;
    z-index: 5000;
-    width: 9.8em;
+    width: 16.8em;
    height: 60px;
    padding: 0 0.7em;
    left: 50%;

--- a/src/app/my/my-business-detail/my-business-detail.component.html
+++ b/src/app/my/my-business-detail/my-business-detail.component.html
@@ -25,11 +25,11 @@
      <div class="contentItem">
        <span>性别</span>
        <div class="sexWrapper">
-          <button class="form-control sex" [ngClass]="{'sexBtn':editBusiness?.gender=='1'}"
+          <button class="form-control sex" [ngClass]="{'sexBtn':editBusiness?.gender=='1' && maleFlag && femaleFlag}"
-            (click)="selectedGender('1')" [disabled]="readonlyFlag" *ngIf="sexFlag">男
+            (click)="selectedGender('1')" [disabled]="readonlyFlag" *ngIf="sexFlag && maleFlag">男
          </button>
-          <button class="form-control sex" [ngClass]="{'sexBtn':editBusiness?.gender=='2'}"
+          <button class="form-control sex" [ngClass]="{'sexBtn':editBusiness?.gender=='2' && maleFlag && femaleFlag}"
-            (click)="selectedGender('2')" [disabled]="readonlyFlag" *ngIf="sexFlag">女
+            (click)="selectedGender('2')" [disabled]="readonlyFlag" *ngIf="sexFlag && femaleFlag">女
          </button>
        </div>
        <input class="form-control" type="text" placeholder="暂无性别信息" *ngIf="!sexFlag" disabled />
@@ -37,7 +37,8 @@
      </div>
      <div class="contentItem">
        <span>手机</span>
-        <a style="text-decoration:none;color: #333;" href="tel:{{editBusiness.mobileNo}}">{{editBusiness.mobileNo}}</a>
+        <a style="text-decoration:none;color: #333;margin-right: 16px;"
+          href="tel:{{editBusiness.mobileNo}}">{{editBusiness.mobileNo}}</a>
        <!-- <input class="form-control" type="text" [(ngModel)]="editBusiness.mobileNo" disabled /> -->
      </div>
      <div class="contentItem">
@@ -102,33 +103,6 @@
    <div style="text-align: center;font-size: 16px;margin-top: 10px;" *ngIf="isCompletedQuestionnaire!=3">暂无方案</div>
  </div>
  <div class="content" *ngIf="selectedId===3">
-    <!--编辑框-->
-    <div class="editContainer">
-      <div>
-        <div>跟进状态</div>
-        <div>
-          <select name="businessStatus" id="businessStatus" class="form-control" [(ngModel)]="opportunityRecordId">
-            <option value="null">请选择</option>
-            <option value="0">待跟进</option>
-            <option *ngFor="let businessStatusItem of businessStatusList" value="{{businessStatusItem.id}}">
-              {{businessStatusItem.dropOptionName}}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div>
-        <div>备注</div>
-        <div><input type="text" class="form-control" placeholder="输入备注信息" [(ngModel)]="salesNotice"></div>
-      </div>
-      <div>
-        <div>跟进时间</div>
-        <div><input style="-webkit-appearance: none;" id="time" class="form-control" type="date"
-            [(ngModel)]="opportunityRecordNoticeDate"></div>
-      </div>
-      <div class="add">
-        <i class="iconfont icon-jia" (click)="ownOpportunityRecordSave()"></i>
-      </div>
-    </div>
    <ul class="recordLists">
      <li *ngFor="let opportunityRecordItem of opportunityRecordInfos">
        <div style="display: flex;justify-content: space-between;">
@@ -137,8 +111,58 @@
        </div>
        <div class="salesNotice">{{opportunityRecordItem.salesNotice}}</div>
      </li>
+      <!-- 待跟进状态永远显示在列表最下面 -->
+      <!-- <li>
+        <div style="display: flex;justify-content: space-between;">
+          <div>{{(editBusiness.opportunityDate).substr(0,10)}}</div>
+          <div>{{lifeCommonService.checkStr(editBusiness.mdDropOptionId)}}</div>
+        </div>
+        <div class="salesNotice">商机状态</div>
+      </li> -->
+      <li>
+        <div class="salesNotice">{{(editBusiness.opportunityDate).substr(0,10)}}</div>
+        <div style="display: flex;justify-content: space-between;">
+          <div>商机状态</div>
+          <div>{{lifeCommonService.checkStr(editBusiness.mdDropOptionId)}}</div>
+        </div>
+      </li>
    </ul>
+    <div class="add" (click)="showToast()">
+      <!-- <i class="iconfont icon-jia" (click)="ownOpportunityRecordSave()"></i> -->
+      <i class="iconfont icon-jia"></i>
+    </div>
  </div>
+  <div class="toastWrapper toast" *ngIf="isShow" (click)="closeToast()">
+  </div>
+  <!--编辑框-->
+  <div class="editContainer" *ngIf="isShow">
+    <div>
+      <div>跟进状态</div>
+      <div style="position:relative">
+        <select name="businessStatus" id="businessStatus" class="form-control" [(ngModel)]="opportunityRecordId">
+          <option value="null">请选择</option>
+          <option *ngFor="let businessStatusItem of businessStatusList" value="{{businessStatusItem.id}}">
+            {{businessStatusItem.dropOptionName}}
+          </option>
+        </select>
+        <i class="iconfont icon-xiangxia" style="position: absolute;right: 50px;top: 5px;"></i>
+      </div>
+    </div>
+    <div>
+      <div>备注</div>
+      <div><input type="text" class="form-control" placeholder="输入备注信息" [(ngModel)]="salesNotice"></div>
+    </div>
+    <div>
+      <div>跟进时间</div>
+      <div><input style="-webkit-appearance: none;" id="time" class="form-control" type="date"
+          [(ngModel)]="opportunityRecordNoticeDate"></div>
+    </div>
+    <ul class="footer">
+      <li (click)="ownOpportunityRecordSave()">确定</li>
+      <li (click)="closeToast()">取消</li>
+    </ul>
+  </div>
 </div>
 <ydlife-toast *ngIf="toastDialog" [toastInfo]="toastInfo"></ydlife-toast>
\ No newline at end of file
--- a/src/app/my/my-business-detail/my-business-detail.component.scss
+++ b/src/app/my/my-business-detail/my-business-detail.component.scss
@@ -30,9 +30,9 @@
    padding: 10px 5px;
    position: relative;
    > .iconfont {
-      width: 45px;
+      width: 55px;
-      height: 45px;
+      height: 55px;
-      line-height: 45px;
+      line-height: 55px;
      border-radius: 50%;
      position: fixed;
      right: 10px;
@@ -71,7 +71,7 @@
          display: flex;
          width: 60%;
          justify-content: flex-end;
-          padding-right: 16px;
+          padding-right: 3px;
          .form-control.sex {
            width: 20%;
            margin-left: 5px;
@@ -109,7 +109,25 @@
        border: 1px #e10d0d solid;
      }
    }
+    .add {
+      position: absolute;
+      .iconfont {
+        width: 55px;
+        height: 55px;
+        line-height: 55px;
+        border-radius: 50%;
+        position: fixed;
+        right: 10px;
+        font-size: 24px;
+        color: #fff;
+        background: #1890ff;
+        text-align: center;
+        bottom: 30px;
+        font-size: 28px;
+        // color: #ff5933;
+        font-weight: bold;
+      }
+    }
    .answerContent {
      border-bottom: 1px #ddd solid;
      margin-bottom: 5px;
@@ -125,14 +143,6 @@
    .answerContent:last-child {
      border-bottom: 0;
    }
-    .add {
-      justify-content: center;
-      .iconfont {
-        font-size: 28px;
-        color: #ff5933;
-        font-weight: bold;
-      }
-    }
    .record {
      display: flex;
      list-style: none;
@@ -149,7 +159,18 @@
  .editContainer {
    margin-top: 15px;
    background: #ffffff;
-    padding-left: 10px;
+    padding: 10px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 45%;
+    background-color: #fff;
+    z-index: 20;
+    -webkit-animation: 5.5s both slowUp;
+    animation: 5.5s both slowUp;
+    min-width: 320px;
+    max-width: 640px;
+    margin: 0 auto;
    > div {
      height: 50px;
      border-bottom: 1px solid #dbdbdb;
@@ -171,6 +192,22 @@
    > div:last-child {
      border: none;
    }
+    ul.footer{
+      display: flex;
+      list-style: none;
+      justify-content: center;
+      margin-top: 10%;
+      li{
+        width: 30%;
+        height: 35px;
+        line-height: 35px;
+        text-align: center;
+        background: #e10d0d;
+        color: #fff;
+        margin: 0 10px;
+        border-radius: 10px;
+      }
+    }
  }
  .recordLists {
    li {
@@ -196,5 +233,19 @@
      // text-align: right;
    }
  }
+  .toast {
+    position: fixed;
+    left: 0;
+    right: 0;
+    min-width: 320px;
+    max-width: 640px;
+    width: 100%;
+    margin: 0 auto;
+    z-index: 1;
+  }
+.toastWrapper {
+  height: 100%;
+  background-color: rgba(0,0,0,.5);
+  top: 0;
+  }
 }
--- a/src/app/my/my-business-detail/my-business-detail.component.ts
+++ b/src/app/my/my-business-detail/my-business-detail.component.ts
@@ -43,6 +43,11 @@ export class MyBusinessDetailComponent implements OnInit {
  opportunityRecordId: number;
  //性别显示
  sexFlag: boolean;
+  //显示女
+  femaleFlag: boolean;
+  //显示男
+  maleFlag: boolean;
+  isShow: boolean;
  constructor(private activateRoute: ActivatedRoute, private myService: MyService,
    public lifeCommonService: LifeCommonService) {
    this.titleList = [
@@ -57,6 +62,7 @@ export class MyBusinessDetailComponent implements OnInit {
  ngOnInit() {
    this.orderId = this.activateRoute.snapshot.queryParams['orderId'];
    this.opportunityId = this.activateRoute.snapshot.paramMap.get('id');
+    this.opportunityRecordId = null;
    this.tagQuery();
    this.selectTab(1);
    this.dropOptionsQuery();
@@ -65,10 +71,12 @@ export class MyBusinessDetailComponent implements OnInit {
    }, 300)
  }
+  //改为编辑状态出现男女选项
  editInfo() {
    this.readonlyFlag = false;
    this.sexFlag = true;
+    this.maleFlag = true;
+    this.femaleFlag = true;
  }
  selectTab(id) {
@@ -76,21 +84,8 @@ export class MyBusinessDetailComponent implements OnInit {
    if (id === 4) {
      if (this.isCompletedQuestionnaire == 3) {
        window.location.href = `https://${window.location.host}/customizedPlanList/3?orderId=${this.orderId}&customerId=${this.opportunityId}`
-        // window.location.href = `https://${window.location.host}/customizedPlanList/3?orderId=8373`
      }
    }
-    // if (id === 3) {
-    //   setTimeout(() => {
-    //     var calendar = new LCalendar();
-    //     calendar.init({
-    //       'trigger': '#time', //标签id
-    //       'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
-    //       'maxDate': (new Date().getFullYear()) + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() //最大日期
-    //     });
-    //   }, 300)
-    // }
  }
  ownOpportunityDetailQuery() {
@@ -99,11 +94,6 @@ export class MyBusinessDetailComponent implements OnInit {
      orderId: this.orderId,
      practitionerId: JSON.parse(localStorage.getItem('lifeCustomerInfo'))['practitionerId']
    }
-    // const detailParam = {
-    //   opportunityId: 2,
-    //   orderId: 8373,
-    //   practitionerId: 1
-    // }
    this.myService.ownOpportunityDetailQuery(detailParam).subscribe((res) => {
      if (res['success']) {
        this.opportunitySurveyAnswersList = res['data']['opportunityConsultationInfo']['opportunitySurveyAnswersList']
@@ -111,10 +101,18 @@ export class MyBusinessDetailComponent implements OnInit {
        this.opportunityCustomerTags = res['data']['opportunityBasicInformationInfo']['opportunityCustomerTags']
        this.opportunityRecordInfos = res['data']['opportunityRecordInfos'];
        this.isCompletedQuestionnaire = res['data']['opportunityConsultationInfo']['isCompletedQuestionnaire'];
+        //如果没有性别显示暂无性别
        if (!res['data']['opportunityBasicInformationInfo']['gender']) {
          this.sexFlag = false;
        } else {
          this.sexFlag = true;
+          if (res['data']['opportunityBasicInformationInfo']['gender'] == 1) {
+            this.maleFlag = true;
+            this.femaleFlag = false;
+          } else {
+            this.femaleFlag = true;
+            this.maleFlag = false;
+          }
        }
        if (this.opportunityCustomerTags.length > 0) {
          for (let i = 0; i < this.opportunityCustomerTags.length; i++) {
@@ -127,11 +125,6 @@ export class MyBusinessDetailComponent implements OnInit {
            }
          }
        }
-        if (!this.opportunityRecordInfos || this.opportunityRecordInfos.length == 0) {
-          this.opportunityRecordId = 0;
-        } else {
-          this.opportunityRecordId = null;
-        }
      } else {
        this.opportunitySurveyAnswersList = [];
      }
@@ -225,6 +218,13 @@ export class MyBusinessDetailComponent implements OnInit {
        this.readonlyFlag = true;
        if (this.editBusiness.gender) {
          this.sexFlag = true;
+          if (this.editBusiness.gender == '1') {
+            this.maleFlag = true;
+            this.femaleFlag = false;
+          } else {
+            this.femaleFlag = true;
+            this.maleFlag = false;
+          }
        } else {
          this.sexFlag = false;
        }
@@ -232,7 +232,6 @@ export class MyBusinessDetailComponent implements OnInit {
    })
  }
  ownOpportunityRecordSave() {
    const nowDate = new Date().getTime();
    const oppDate = new Date(this.opportunityRecordNoticeDate).getTime();
@@ -308,6 +307,14 @@ export class MyBusinessDetailComponent implements OnInit {
    })
  }
+  //添加商机弹框
+  showToast() {
+    this.isShow = true;
+  }
+  closeToast() {
+    this.isShow = false;
+  }
 }
--- a/src/app/my/my-center-home/my-center-home.component.html
+++ b/src/app/my/my-center-home/my-center-home.component.html
@@ -46,26 +46,28 @@
            </div>
          </li>
        </ul>
-        <ul class="performance_list title">
+        <div>
-          <li></li>
+          <ul class="performance_list title">
-          <li>FYP</li>
+            <li></li>
-          <li>FYC</li>
+            <li>FYP</li>
-          <li>完成率</li>
+            <li>FYC</li>
-          <li>排名</li>
+            <li>完成率</li>
-        </ul>
+            <li>排名</li>
-        <ul class="performance_list">
+          </ul>
-          <li>线上</li>
+          <ul class="performance_list">
-          <li class="markPrice" style="margin-left: 7px;">
+            <li>线上</li>
-            ￥{{performanceInfo?.onlineInfo['fyp'] | number: "1.2-2"}}
+            <li class="markPrice" style="margin-left: 7px;">
-          </li>
+              ￥{{performanceInfo?.onlineInfo['fyp'] | number: "1.2-2"}}
-          <li class="markPrice">
+            </li>
-            ￥{{performanceInfo?.onlineInfo['fyc'] | number: "1.2-2"}}
+            <li class="markPrice">
-          </li>
+              ￥{{performanceInfo?.onlineInfo['fyc'] | number: "1.2-2"}}
-        </ul>
+            </li>
-        <ul class="performance_list">
+          </ul>
-          <li>线下</li>
+          <ul class="performance_list">
+            <li>线下</li>
-        </ul>
+          </ul>
+        </div>
      </div>
    </div>

--- a/src/app/my/my-center-home/my-center-home.component.scss
+++ b/src/app/my/my-center-home/my-center-home.component.scss
@@ -99,6 +99,7 @@
      position: relative;
      background: url('../../../assets/images/top_bg.png') no-repeat ;
      background-size: cover;
+      // top: -25px;
      .bg{
        height: 100%;
        position: absolute;

--- a/src/app/my/sales-detail/sales-detail.component.html
+++ b/src/app/my/sales-detail/sales-detail.component.html
@@ -19,7 +19,9 @@
        <div>投保人：{{salesDetailItem.holderName}}</div>
        <div class="price">￥{{salesDetailItem.referralAmount | number: "1.2-2"}}</div>
      </div>
-      <div class="line long_line">{{salesDetailItem.productName}}</div>
+      <div class="line long_line">{{salesDetailItem.productName}}
+        <span class="iconfont icon-ar-r" style="font-size: 14px;position: relative; right: -2px;top: 2px;"></span>
+      </div>
      <div class="line long_line">
        <div>保单号：{{salesDetailItem.policyNo}}</div>
        <div>{{(salesDetailItem.orderDate).substr(0,10)}}</div>

--- a/src/app/my/sales-detail/sales-detail.component.scss
+++ b/src/app/my/sales-detail/sales-detail.component.scss
@@ -55,7 +55,7 @@
                display: flex;
                justify-content: space-between;
                align-items: center;
-                height: 18px;
+                height: 20px;
                font-size: 14px;
                .price{
                    font-size: 16px;