外墙设计增加服务商切换功能

src/api/indexAI.js

@@ -335,10 +335,11 @@ export function GetProductInfo(query) {
 }
 
 // 获取生成图片剩余积分
-export function GetPoints() {
+export function GetPoints(query) {
     return request({
         url: '/aidesign/outside/GetPoints',
-        method: 'post'
+        method: 'post',
+        data:query
     })
 }
 

src/views/AIDesign/design.vue

@@ -18,11 +18,17 @@
       </div>
       <!-- 关联项目 -->
       <div class="image-selection padded-lr-20" v-show="projectBoxShow">
-        <div class="project-placeholder">
+        <div class="project-box">
+          <div class="project-overlay" v-show="overlayShow"></div>
           <div class="project-add-box">
-            <span style="font-weight: 700;"><span style="color: red;margin-right: 5px;">*</span>关联项目</span>
+            <div class="fws-change-box" @click="overlayShow = !overlayShow">
+              <span class="fws-code">{{fwsCode}}</span>
+              <span class="change-txt">切换</span>
+              <van-icon v-show="!overlayShow" name="arrow-down" color="#0057BA" />
+              <van-icon v-show="overlayShow" name="arrow-up" color="#0057BA" />
+            </div>
             <van-popover placement="bottom-end" :offset="[17, 4]" v-model="showProjectPopover" theme="dark"
-              trigger="click">
+                         trigger="click">
               <div role="menu" class="van-popover__content">
                 <div role="menuitem" class="van-popover__action van-popover__action--with-icon" @click="toProjectLink">
                   <img width="30px" :src="require('@/assets/AIDesign/projectIcon.png')" alt="">
@@ -34,31 +40,51 @@
               </template>
             </van-popover>
           </div>
-          <div class="point-box">已有积分：<span>{{projectPoint}}</span></div>
-          <div class="list-item-checked" v-if="checkedProject != null">
-            <div class="title-item" v-show="checkedProject.fulladdress">
-              <span class="title" style="text-align: left;">{{ checkedProject.fulladdress }}</span>
-              <span class="status">已报备</span>
-            </div>
-            <div class="user-item" v-show="checkedProject.contact">
-              <van-icon name="user-o" />
-              <span class="txt">{{ checkedProject.contact }}</span>
-            </div>
-            <div class="user-item" v-show="checkedProject.tel">
-              <van-icon name="phone-o" />
-              <span class="txt">{{ checkedProject.tel }}</span>
+          <div class="check-list-box" v-show="overlayShow">
+            <van-radio-group v-model="fwsRadioValue">
+              <van-cell-group>
+                <van-cell clickable v-for="(item,index) in fwsList" :key="index" @click="radioClick(item.shop_code,item.shop_name)">
+                  <template #icon>
+                    <van-radio :name="item.shop_code" />
+                  </template>
+                  <template #title>
+                    <div :class="fwsRadioValue == item.shop_code ? 'list-label-checked' : 'list-label'">
+                      <span class="code">{{item.shop_code}}</span>
+                      <span class="value">{{item.shop_name}}</span>
+                    </div>
+                  </template>
+                </van-cell>
+              </van-cell-group>
+            </van-radio-group>
+          </div>
+          <div class="project-placeholder">
+            <div style="font-weight: 700;width: 100%;text-align: left;margin-bottom: 10px;"><span style="color: red;margin-right: 5px;">*</span>关联项目</div>
+            <div class="point-box">已有积分：<span>{{projectPoint}}</span></div>
+            <div class="list-item-checked" v-if="checkedProject != null">
+              <div class="title-item" v-show="checkedProject.fulladdress">
+                <span class="title" style="text-align: left;">{{ checkedProject.fulladdress }}</span>
+                <span class="status">已报备</span>
+              </div>
+              <div class="user-item" v-show="checkedProject.contact">
+                <van-icon name="user-o" />
+                <span class="txt">{{ checkedProject.contact }}</span>
+              </div>
+              <div class="user-item" v-show="checkedProject.tel">
+                <van-icon name="phone-o" />
+                <span class="txt">{{ checkedProject.tel }}</span>
+              </div>
+              <div class="user-item">
+                <van-icon name="info-o" color="#D43030" />
+                <span class="txt" style="color: #D43030;">已生成套数：{{ checkedProject.DesignCount }}</span>
+              </div>
             </div>
-            <div class="user-item">
-              <van-icon name="info-o" color="#D43030" />
-              <span class="txt" style="color: #D43030;">已生成套数：{{ checkedProject.DesignCount }}</span>
+            <div class="placeholder" style="width: 100%">
+              <p v-if="checkedProject == null" class="placeholder-text">当前暂无已关联的项目，请选择已报备项目</p>
+              <van-button type="primary" color="#2484F2" block @click="chooseProject" :loading="showChooseProject"
+                          :disabled="showChooseProject" loading-type="spinner" loading-text="选择项目"
+                          style="width: 80%;margin-left: 10%;">选择项目</van-button>
             </div>
           </div>
-          <div class="placeholder" style="width: 100%">
-            <p v-if="checkedProject == null" class="placeholder-text">当前暂无已关联的项目，请选择已报备项目</p>
-            <van-button type="primary" color="#2484F2" block @click="chooseProject" :loading="showChooseProject"
-              :disabled="showChooseProject" loading-type="spinner" loading-text="选择项目"
-              style="width: 80%;margin-left: 10%;">选择项目</van-button>
-          </div>
         </div>
       </div>
       <!-- 图片选择 -->
@@ -541,6 +567,11 @@ export default class extends Vue {
     private projectPoint = '';
     private pointDialogShow1 = false;
     private pointDialogShow2 = false;
+    private fwsCode = '';
+    private fwsName = '';
+    private fwsList = [];
+    private fwsRadioValue = '';
+    private overlayShow = false;
 
     created() {
     // 图片头
@@ -613,7 +644,9 @@ export default class extends Vue {
   private getServiceCode() {
     let that = this;
     const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
-    let serviceCodeArray = [];
+      const checkedFwsInfo: any = JSON.parse(window.localStorage.getItem("pageDesignfwsRadioValue")!);
+      let serviceCodeArray = [];
+      let serviceObjArray = [];
     // if (userInfo && userInfo.loginTypeList && userInfo.loginTypeList.length > 0) {
     //   userInfo.loginTypeList.forEach(item => {
     //     if (item.shopType == 'stoneLikePaint') {
@@ -625,8 +658,22 @@ export default class extends Vue {
     // }
     if (userInfo && userInfo.ServiceCode) {
       serviceCodeArray = userInfo.ServiceCode.split(',').map(item => item.trim()).filter(item => item !== '');
+        userInfo.ServiceCode.split(',').forEach((item,index)=>{
+            let obj = {};
+            obj.code = item;
+            obj.name = userInfo.ServiceName.split(',')[index];
+            serviceObjArray.push(obj);
+        })
     }
+    that.fwsList = serviceObjArray;
     that.serviceCodeArray = serviceCodeArray;
+    if (checkedFwsInfo){
+        that.fwsCode = checkedFwsInfo.shop_code;
+        that.fwsName = checkedFwsInfo.shop_name;
+    } else {
+        that.fwsCode = serviceObjArray[0].shop_code;
+        that.fwsName = checkedFwsInfo[0].shop_name;
+    }
   }
   // 处理文件选择（对应 beforeRead + afterRead）
   handleFileChange(e) {
@@ -704,6 +751,19 @@ export default class extends Vue {
     ImagePreview([url]);
   }
 
+    radioClick(code,value){
+        let that = this;
+        that.fwsName = value;
+        that.fwsCode = code;
+        that.fwsRadioValue = code;
+        let overviewRadioValue = {
+            shop_code:code,
+            shop_name:value
+        }
+        window.localStorage.setItem("pageDesignfwsRadioValue", JSON.stringify(overviewRadioValue));
+        that.overlayShow = false;
+    }
+
   // 处理罗马柱
   openComponentPreview(initIndex: number, list) {
     if (list.length > 0) {
@@ -726,6 +786,8 @@ export default class extends Vue {
 
     GetPointsFn(){
       let that = this;
+        const formData = new FormData();
+        formData.append('serviceCode', that.fwsCode);
         GetPoints().then(response => {
             if (response.StatusCode == 200) {
                 that.projectPoint = response.Data.point;
@@ -1020,6 +1082,8 @@ export default class extends Vue {
               that.$toast.fail('请选择关联项目');
               return;
           }else if (that.checkedProject != null && that.checkedProject.AvailableQuantity <= 0){
+              const formData = new FormData();
+              formData.append('serviceCode', that.fwsCode);
               GetPoints().then(response => {
                   if (response.StatusCode == 200) {
                       that.projectPoint = response.Data.point;
@@ -1205,6 +1269,7 @@ export default class extends Vue {
     const formData = new FormData();
     // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
     formData.append('ServiceCode', that.serviceCodeArray.join(','));
+      formData.append('servicecode', that.fwsCode);
     formData.append('projectid', projectId);
     GetProjectlist(formData).then(response => {
       if (response.StatusCode == 200) {
@@ -1221,6 +1286,7 @@ export default class extends Vue {
     const formData = new FormData();
     const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
     formData.append('ServiceCode', that.serviceCodeArray.join(','));
+      formData.append('servicecode', that.fwsCode);
     if (that.projectSearchValue.trim().length != 0) {
       formData.append('keyWord', that.projectSearchValue);
     }
@@ -1504,6 +1570,85 @@ export default class extends Vue {
   text-align: center;
 }
 
+.project-box{
+  position: relative;
+  .project-overlay{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 12px;
+  }
+  .project-add-box {
+    flex-direction: row;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 12px 12px 0 0;
+    align-items: center;
+    padding: 10px;
+    z-index: 200;
+    position: relative;
+    background-color: #ffffff;
+    .fws-change-box{
+      flex-direction: row;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .fws-code{
+        font-size: 12px;
+        color: #0057ba;
+        border: 1px solid #0057ba;
+        border-radius: 10px;
+        padding: 2px 4px;
+      }
+      .change-txt{
+        font-size: 12px;
+        color: #0057BA;
+        margin-left: 5px;
+        margin-right: 5px;
+      }
+    }
+  }
+  .check-list-box{
+    width: 100%;
+    flex-direction: column;
+    display: flex;
+    box-sizing: border-box;
+    margin-bottom: 10px;
+    padding: 10px 10px 5px 10px;
+    /*background-color: red;*/
+    z-index: 200;
+    position: absolute;
+    top: 42px;
+    background: linear-gradient(135deg, #ecf1f4 0%, #e7ecfb 100%);
+    .list-label{
+      text-align: left;
+      margin-left: 15px;
+      .code{
+        color: #666666;
+      }
+      .value{
+        color: #666666;
+        margin-left: 5px;
+      }
+    }
+    .list-label-checked{
+      text-align: left;
+      margin-left: 15px;
+      .code{
+        color: #0057BA;
+        font-weight: 700;
+      }
+      .value{
+        color: #0057BA;
+        font-weight: 700;
+        margin-left: 5px;
+      }
+    }
+  }
+}
+
 .image-placeholder {
   position: relative;
   display: flex;
@@ -1534,13 +1679,13 @@ export default class extends Vue {
   padding-bottom: 30px;
 }
 
-.project-add-box {
-  width: 100%;
-  flex-direction: row;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
+.van-cell-group{
+  background-color: transparent;
+}
+
+.van-cell{
+  margin-bottom: 5px;
+  border-radius: 8px;
 }
 
 ::v-deep .van-button--normal {