外墙设计添加积分机制

src/api/indexAI.js

@@ -334,6 +334,14 @@ export function GetProductInfo(query) {
     })
 }
 
+// 获取生成图片剩余积分
+export function GetPoints() {
+    return request({
+        url: '/aidesign/outside/GetPoints',
+        method: 'post'
+    })
+}
+
 //获取确认下单地址
 export function GetOrderAddress() {
     const formData = new FormData();

src/views/AIDesign/design.vue

@@ -34,6 +34,7 @@
               </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>
@@ -329,7 +330,7 @@
       <div class="generate-section padded-lr-20">
         <van-button v-show="AIBtnDisabled" type="primary" block color="#E87838" disabled loading loading-type="spinner"
           loading-text="AI生成"></van-button>
-        <van-button v-show="!AIBtnDisabled" type="primary" block @click="generateDesign"
+        <van-button v-show="!AIBtnDisabled" type="primary" block @click="beforeGenerateDesign"
           color="#E87838">AI生成</van-button>
         <div class="btn-note">*效果图仅供参考, 不作为交付标准</div>
       </div>
@@ -383,10 +384,10 @@
             <van-icon name="phone-o" />
             <span class="txt">{{ item.tel }}</span>
           </div>
-          <!-- <div class="user-item">
+          <div class="user-item">
             <van-icon name="info-o" color="#D43030" />
-            <span class="txt" style="color: #D43030;">剩余免费生成次数：{{ item.AvailableQuantity }}</span>
-          </div> -->
+            <span class="txt" style="color: #D43030;">已生成套数：{{ item.DesignCount }}</span>
+          </div>
           <div class="img-item" v-show="checkedProjectId == index">
             <img src="../../assets/AIDesign/project_checked.png" class="img-checked">
           </div>
@@ -407,12 +408,33 @@
         <div class="dialog-btn" @click="dialogShow = false">知道了</div>
       </div>
     </van-dialog>
+    <van-dialog v-model="pointDialogShow1" :show-confirm-button="false" style="overflow: visible;">
+      <div class="dialog-point-box">
+        <div class="title">AI生图<span class="txt-color1">  积分轻松抵</span></div>
+        <div class="content">已有积分：<span class="txt-color2">{{projectPoint}}</span></div>
+        <div class="content">每次成功生图将使用<span class="txt-color2">500</span>积分</div>
+        <div class="dialog-btn-point1" @click="pointDialogSure">确认生成</div>
+        <div class="dialog-btn-point2" @click="pointDialogShow1 = false">稍后再说</div>
+        <img src="../../assets/AIDesign/point-dialog-icon-success.png" class="point-icon">
+      </div>
+    </van-dialog>
+    <van-dialog v-model="pointDialogShow2" :show-confirm-button="false" style="overflow: visible;">
+      <div class="dialog-point-box">
+        <div class="title txt-color1">本次生图失败</div>
+        <div class="content">失败原因：您的积分不足</div>
+        <div class="content">使用积分：<span class="txt-color2">500</span></div>
+        <div class="content">剩余积分：<span class="txt-color2">{{projectPoint}}</span></div>
+        <div class="dialog-btn-point1" @click="pointDialogShow2 = false">再试一次</div>
+        <div class="dialog-btn-point2" @click="pointDialogShow2 = false">我知道了</div>
+        <img src="../../assets/AIDesign/point-dialog-icon-fail.png" class="point-icon">
+      </div>
+    </van-dialog>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { CreateDesign, GetEntity, GetReadState, UpdateReadState, GetProjectlist, GetDictList } from "@/api/indexAI";
+import { CreateDesign, GetEntity, GetReadState, UpdateReadState, GetProjectlist, GetDictList, GetPoints } from "@/api/indexAI";
 import { ImagePreview, Popover } from 'vant';
 import { Dialog } from 'vant';
 import { getWecomType, toLBHome, toXiaoChengxu } from '@/utils/index';
@@ -516,7 +538,11 @@ export default class extends Vue {
   private popover_actions = [{ text: "风格主要对应罗马柱类型，请按需选择", className: "actionsTit" }];
   private showChooseProject = false;
   private showProjectPopover = false;
-  created() {
+    private projectPoint = '';
+    private pointDialogShow1 = false;
+    private pointDialogShow2 = false;
+
+    created() {
     // 图片头
     if (window.location.href.indexOf('aidesign.') > -1) {
       this.imgBaseUrl = 'https://aidesign.nipponpaint.com.cn'
@@ -697,6 +723,16 @@ export default class extends Vue {
     this.currentTitle = this.titlesArray[index] || "无标题";
     this.currentIndex = index;
   }
+
+    GetPointsFn(){
+      let that = this;
+        GetPoints().then(response => {
+            if (response.StatusCode == 200) {
+                that.projectPoint = response.Data.point;
+            }
+        });
+    }
+
   GetReadStateFn() {
     const formData = new FormData();
     const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
@@ -962,24 +998,52 @@ export default class extends Vue {
     this.currentScrollElement = null;
   }
 
+  //积分提醒弹框确认事件
+    private pointDialogSure(){
+        this.generateDesign();
+        this.pointDialogShow1 = false;
+    }
+
+  private beforeGenerateDesign(){
+        let that = this;
+      if (!this.Userfile1 && !this.oldf_id) {
+          this.$toast.fail('请选择图片');
+          return;
+      }else if (that.projectBoxShow == true && this.activeName === '外墙质感') {
+          if (that.checkedProject == null) {
+              that.$toast.fail('请选择关联项目');
+              return;
+          }else if (that.checkedProject != null && that.checkedProject.AvailableQuantity <= 0){
+              GetPoints().then(response => {
+                  if (response.StatusCode == 200) {
+                      that.projectPoint = response.Data.point;
+                      if (that.projectPoint >= 500){
+                          that.pointDialogShow1 = true;
+                          return;
+                      } else {
+                          that.pointDialogShow2 = true;
+                          return;
+                      }
+                  }else {
+                      return;
+                  }
+              });
+          }else {
+              that.generateDesign();
+          }
+          // if (that.checkedProject.AvailableQuantity == 0) {
+          //   this.projectActionNumShow = true;
+          //   return;
+          // }
+      }else {
+          that.generateDesign();
+      }
+  }
+
   private generateDesign() {
     let that = this;
     // console.log(this.Userfile1);
     // 实现AI生成功能
-    if (that.projectBoxShow == true && this.activeName === '外墙质感') {
-      if (that.checkedProject == null) {
-        that.$toast.fail('请选择关联项目');
-        return;
-      }
-      // if (that.checkedProject.AvailableQuantity == 0) {
-      //   this.projectActionNumShow = true;
-      //   return;
-      // }
-    }
-    if (!this.Userfile1 && !this.oldf_id) {
-      this.$toast.fail('请选择图片');
-      return;
-    }
     // const userInfo: any = JSON.parse(window.localStorage.getItem("userInfoV1")!);
     const formData = new FormData();
     if (this.activeName === '外墙质感') {
@@ -1247,6 +1311,9 @@ export default class extends Vue {
             that.projectBoxShow = false;
           } else {
             that.projectBoxShow = that.isNeedProject;
+            if (that.projectBoxShow == true){
+                that.GetPointsFn();
+            }
           }
           that.save_projectBoxShow_org = that.projectBoxShow;
           this.zgInitData();
@@ -1338,6 +1405,18 @@ export default class extends Vue {
   flex-direction: column;
 }
 
+.point-box{
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 14px;
+  color: #999;
+  text-align: left;
+  margin-left: 20px;
+  span{
+    color: #000;
+  }
+}
+
 .container {
   // padding: 0 20px;
 }
@@ -2025,6 +2104,53 @@ export default class extends Vue {
   }
 }
 
+.dialog-point-box{
+  flex-direction: column;
+  display: flex;
+  box-sizing: border-box;
+  position: relative;
+  padding: 20px 15px;
+  position: relative;
+  .title{
+    font-size: 22px;
+  }
+  .content{
+    font-size: 14px;
+    margin-top: 10px;
+    color: #999;
+  }
+  .txt-color1{
+    color: #E55B2A;
+  }
+  .txt-color2{
+    color: #000;
+  }
+  .dialog-btn-point1{
+    background-color: #E55B2A;
+    border-radius: 10px;
+    font-size: 18px;
+    color:#fff;
+    margin-top: 20px;
+    padding: 6px 0;
+    box-sizing: border-box;
+    text-align: center;
+  }
+  .dialog-btn-point2{
+    border-radius: 10px;
+    font-size: 16px;
+    margin-top: 10px;
+    padding: 6px 0;
+    box-sizing: border-box;
+    text-align: center;
+  }
+  .point-icon{
+    width: 120px;
+    position: absolute;
+    top: -55px;
+    right: -10px;
+  }
+}
+
 .dialog-box {
   flex-direction: column;
   display: flex;