|
|
@@ -8,67 +8,88 @@
|
|
|
</template>
|
|
|
</van-nav-bar>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 已生成方案区域 -->
|
|
|
- <div class="generated-section">
|
|
|
- <div class="generated-header">
|
|
|
- <div class="generated-title">已生成</div>
|
|
|
- <div>
|
|
|
- <div class="scheme-info"><span class="orgin-color">{{ stoneColors }}</span>{{ planParams.F_ColorCard
|
|
|
- }}</div>
|
|
|
- <span class="gray-color">|</span>
|
|
|
- <div class="scheme-process"><span class="orgin-color">{{ planParams.F_DeepGrooveTech }}</span>工艺
|
|
|
+ <div>
|
|
|
+ <!-- 已生成方案区域 -->
|
|
|
+ <div class="generated-section">
|
|
|
+ <div class="generated-header">
|
|
|
+ <div class="generated-title">已生成</div>
|
|
|
+ <div>
|
|
|
+ <div class="scheme-info"><span class="orgin-color">{{ stoneColors }}</span>{{
|
|
|
+ planParams.F_ColorCard
|
|
|
+ }}</div>
|
|
|
+ <span class="gray-color">|</span>
|
|
|
+ <div class="scheme-process"><span class="orgin-color">{{ planParams.F_DeepGrooveTech }}</span>工艺
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <van-tag color="#FF8D1A" class="ai-tag">AI效果图</van-tag>
|
|
|
</div>
|
|
|
- <van-tag color="#FF8D1A" class="ai-tag">AI效果图</van-tag>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 效果图 -->
|
|
|
- <div class="scheme-image">
|
|
|
- <img :src="planParams.BaseUrl + planParams.F_ResultSmallFilePath" alt="房屋效果图"
|
|
|
- @click="imgClick(imageUrl)" />
|
|
|
- </div>
|
|
|
- <!-- 推荐方案区域 -->
|
|
|
- <div class="recommend-scheme">
|
|
|
- <h3 class="recommend-title">推荐方案</h3>
|
|
|
-
|
|
|
- <div class="custom-table">
|
|
|
- <div class="table-header">
|
|
|
- <div class="table-cell" style="flex:0.8;">工序</div>
|
|
|
- <div class="table-cell" style="flex:1.6;">别墅之星系列</div>
|
|
|
- <div class="table-cell" style="flex:0.6;">使用量</div>
|
|
|
- </div>
|
|
|
- <div class="table-row" v-for="(item, index) in processData" :key="index">
|
|
|
- <div class="table-cell" style="flex:0.8;">{{ item.F_ProcedureName }}</div>
|
|
|
- <div class="table-cell" style="flex:1.6;">{{ item.F_ProductName }}</div>
|
|
|
- <div class="table-cell" style="flex:0.6;">{{ item.usage }}{{ item.F_OrderUnit }}</div>
|
|
|
- </div>
|
|
|
+ <!-- 效果图 -->
|
|
|
+ <div class="scheme-image">
|
|
|
+ <img :src="planParams.BaseUrl + planParams.F_ResultSmallFilePath" alt="房屋效果图"
|
|
|
+ @click="imgClick(imageUrl)" />
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 施工面积 -->
|
|
|
- <div class="construction-area">
|
|
|
- <h3>施工</h3>
|
|
|
- <div class="construction-info">
|
|
|
- <span>主色面积</span>
|
|
|
- <div @click="openAreaPopup">
|
|
|
- <span class="area-value">{{ mainArea }} </span>
|
|
|
- ㎡
|
|
|
- <van-icon name="arrow" size="12" />
|
|
|
+ <!-- 推荐方案区域 -->
|
|
|
+ <div class="recommend-scheme">
|
|
|
+ <h3 class="recommend-title">推荐方案</h3>
|
|
|
+ <section class="recommend-scheme-section">
|
|
|
+ <!-- 施工面积 -->
|
|
|
+ <div class="construction-area">
|
|
|
+ <h3>施工面积</h3>
|
|
|
+ <div class="construction-info">
|
|
|
+ <span>主色</span>
|
|
|
+ <div @click="openAreaPopup">
|
|
|
+ <span class="area-value">{{ mainArea }} </span>
|
|
|
+ ㎡
|
|
|
+ <van-icon name="arrow" size="12" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
+ <!-- 工序 -->
|
|
|
+ <div class="custom-table">
|
|
|
+ <div class="table-header">
|
|
|
+ <div class="table-cell text-left" style="flex:0.95;">工序</div>
|
|
|
+ <div class="table-cell text-left" style="flex:1.7;">别墅之星系列</div>
|
|
|
+ <div class="table-cell text-right" style="flex:0.35;">使用量</div>
|
|
|
+ </div>
|
|
|
+ <div class="table-row" v-for="(item, index) in processData" :key="index">
|
|
|
+ <div class="table-cell text-left" style="flex:0.95;"><span class="gray">{{ index + 1 }}
|
|
|
+ </span>{{
|
|
|
+ item.F_ProcedureName }}</div>
|
|
|
+ <div class="table-cell text-left" style="flex:1.7;">{{ item.F_ProductName }}</div>
|
|
|
+ <div class="table-cell text-right" style="flex:0.35;">{{ item.usage }}<span
|
|
|
+ class="gray">{{
|
|
|
+ item.F_OrderUnit }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 预计工期 -->
|
|
|
+ <div class="construction-period custom-table">
|
|
|
+ <h5>预计工期<div>
|
|
|
+ <span class="orgin-color">2人配合</span>
|
|
|
+ 施工一栋<span class="orgin-color">300㎡</span>房子
|
|
|
+ </div>
|
|
|
+ </h5>
|
|
|
+ <div class="table-row" v-for="(item, index) in processData" :key="index">
|
|
|
+ <div class="table-cell text-left" style="flex:2.4;"><span class="gray">{{ index + 1 }}
|
|
|
+ </span>{{ item.F_ProcedureName }}</div>
|
|
|
+ <div class="table-cell text-right" style="flex:0.6;">{{ item.F_ConstructionPeriod
|
|
|
+ }}<span class="gray">天</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+ <!-- 提示语 -->
|
|
|
+ <div class="notice-bar">
|
|
|
+ <span>该方案能有效还原意向效果</span>,快去看看吧~
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 提示语 -->
|
|
|
- <div class="notice-bar">
|
|
|
- <span>该方案能有效还原意向效果</span>,快去看看吧~
|
|
|
+ <!-- 确认按钮 -->
|
|
|
+ <van-button class="confirm-btn" color="#E87838" block @click="confirmScheme">
|
|
|
+ 确认方案 去下单
|
|
|
+ </van-button>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 确认按钮 -->
|
|
|
- <van-button class="confirm-btn" color="#E87838" block @click="confirmScheme">
|
|
|
- 确认方案 去下单
|
|
|
- </van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -92,9 +113,9 @@
|
|
|
<script lang="ts">
|
|
|
import Vue from 'vue';
|
|
|
import { Component, Ref } from 'vue-property-decorator';
|
|
|
-import { getWecomType, toLBHome, toXiaoChengxu, getWxconfig ,getWecomTypeName} from '@/utils/index';
|
|
|
+import { getWecomType, toLBHome, toXiaoChengxu, getWxconfig, getWecomTypeName } from '@/utils/index';
|
|
|
import { Tag, Field, ImagePreview } from 'vant';
|
|
|
-import { GetProductInfo, GetDictList, AddTrackEvent ,GetOrderAddress } from "@/api/indexAI";
|
|
|
+import { GetProductInfo, GetDictList, AddTrackEvent, GetOrderAddress } from "@/api/indexAI";
|
|
|
Vue.use(Tag)
|
|
|
@Component({
|
|
|
components: {}
|
|
|
@@ -250,13 +271,13 @@ export default class GeneratePlan extends Vue {
|
|
|
formData.append('eventdata', JSON.stringify(eventdataObj));//事件数据
|
|
|
AddTrackEvent(formData)//埋点
|
|
|
// 获取确认下单地址
|
|
|
- GetOrderAddress().then((res)=>{
|
|
|
- if(res.StatusCode == 200 && res.Data){
|
|
|
+ GetOrderAddress().then((res) => {
|
|
|
+ if (res.StatusCode == 200 && res.Data) {
|
|
|
window.location.href = res.Data;
|
|
|
- }else{
|
|
|
- if(res && res.Info){
|
|
|
+ } else {
|
|
|
+ if (res && res.Info) {
|
|
|
this.$toast(res.Info)
|
|
|
- }else{
|
|
|
+ } else {
|
|
|
this.$toast("系统未知错误,请反馈给管理员.")
|
|
|
}
|
|
|
}
|
|
|
@@ -284,23 +305,25 @@ export default class GeneratePlan extends Vue {
|
|
|
flex-direction: column;
|
|
|
padding-bottom: 20px;
|
|
|
|
|
|
+ .orgin-color {
|
|
|
+ color: rgba(255, 141, 26, 1);
|
|
|
+ }
|
|
|
+
|
|
|
.generated-section {
|
|
|
- padding: 0 16px;
|
|
|
+ padding: 0 14px;
|
|
|
|
|
|
.generated-header {
|
|
|
margin-bottom: 4px;
|
|
|
|
|
|
.generated-title {
|
|
|
font-size: 22px;
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: 600;
|
|
|
margin-right: 10px;
|
|
|
line-height: 34px;
|
|
|
padding-top: 5px;
|
|
|
}
|
|
|
|
|
|
- .orgin-color {
|
|
|
- color: rgba(255, 141, 26, 1);
|
|
|
- }
|
|
|
+
|
|
|
|
|
|
.gray-color {
|
|
|
height: 14px;
|
|
|
@@ -339,34 +362,46 @@ export default class GeneratePlan extends Vue {
|
|
|
}
|
|
|
|
|
|
.recommend-scheme {
|
|
|
- background-color: #fff;
|
|
|
+ // background-color: #fff;
|
|
|
border-radius: 8px;
|
|
|
- padding: 15px 10px;
|
|
|
+ // padding: 15px 10px;
|
|
|
+ border-bottom: 1px solid rgba(229, 230, 235, 1);
|
|
|
|
|
|
.recommend-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-right: 10px;
|
|
|
+ line-height: 34px;
|
|
|
+ padding-top: 5px;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
+ .recommend-scheme-section {
|
|
|
+ padding: 0 6px;
|
|
|
+ }
|
|
|
+
|
|
|
// 自定义表格样式
|
|
|
.custom-table {
|
|
|
+ padding: 10px 0;
|
|
|
+ // background-color: #fff;
|
|
|
width: 100%;
|
|
|
border-radius: 4px;
|
|
|
overflow: hidden;
|
|
|
- border: 1px solid #eee;
|
|
|
+ // border: 1px solid #ddd;
|
|
|
+ border-bottom: 1px solid rgba(229, 230, 235, 1);
|
|
|
|
|
|
.table-header {
|
|
|
display: flex;
|
|
|
- background-color: #f8f8f8;
|
|
|
- font-weight: bold;
|
|
|
+ // background-color: #f8f8f8;
|
|
|
+ font-weight: 600;
|
|
|
|
|
|
.table-cell {
|
|
|
flex: 1;
|
|
|
- padding: 10px;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- border-right: 1px solid #eee;
|
|
|
+ // padding: 10px;
|
|
|
+ // text-align: center;
|
|
|
+ font-size: 15px;
|
|
|
+ white-space: nowrap;
|
|
|
+ // border-right: 1px solid #eee;
|
|
|
|
|
|
&:last-child {
|
|
|
border-right: none;
|
|
|
@@ -374,9 +409,13 @@ export default class GeneratePlan extends Vue {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .gray {
|
|
|
+ color: rgba(128, 128, 128, 1);
|
|
|
+ }
|
|
|
+
|
|
|
.table-row {
|
|
|
display: flex;
|
|
|
- border-bottom: 1px solid #eee;
|
|
|
+ // border-bottom: 1px solid #eee;
|
|
|
align-items: stretch;
|
|
|
|
|
|
&:last-child {
|
|
|
@@ -384,36 +423,65 @@ export default class GeneratePlan extends Vue {
|
|
|
}
|
|
|
|
|
|
.table-cell {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+ padding: 2px 0;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: center;
|
|
|
flex: 1;
|
|
|
- padding: 10px;
|
|
|
- text-align: center;
|
|
|
+ // padding: 10px;
|
|
|
+ // text-align: center;
|
|
|
font-size: 12px;
|
|
|
- color: #333;
|
|
|
+ color: #000;
|
|
|
word-break: break-all; // 文字换行
|
|
|
- border-right: 1px solid #eee;
|
|
|
+ // border-right: 1px solid #eee;
|
|
|
+
|
|
|
&:last-child {
|
|
|
border-right: none;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .text-left {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-right {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .construction-period {
|
|
|
+ h5 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding-bottom: 10px;
|
|
|
+
|
|
|
+ div {
|
|
|
+ display: inline-block;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 10px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.construction-area {
|
|
|
- margin: 15px 0 0;
|
|
|
- padding: 10px 0;
|
|
|
- // border-top: 1px solid #eee;
|
|
|
+ padding: 0 0 10px;
|
|
|
+ border-bottom: 1px solid rgba(229, 230, 235, 1);
|
|
|
|
|
|
.area-value {
|
|
|
color: #e55b2a;
|
|
|
font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
|
|
|
h3 {
|
|
|
font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
+ font-weight: 600;
|
|
|
}
|
|
|
|
|
|
.construction-info {
|
|
|
@@ -421,6 +489,7 @@ export default class GeneratePlan extends Vue {
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-top: 10px;
|
|
|
+ font-size: 12px;
|
|
|
|
|
|
}
|
|
|
}
|