修复算法配置的字段内容

zhangzengfei

2022-08-23 e37e45cfe1123928dba5d9c5a427b0ee497b7ad6

 src/views/productDetail/components/PayCard.vue

@@ -1,16 +1,16 @@
<template>
  <div class="PayCard">
    <div class="imageArea" v-if="data.pics.length">
      <img class="activeImg" :src="'/httpImage/' + activeImg.url" />
      <ImageShow class="activeImg" :src="activeImg.url" />
      <div class="imgList">
        <img
        <ImageShow
          v-for="(item, index) in data.pics"
          class="preImg"
          :src="'/httpImage/' + item.url"
          :src="item.url"
          :key="index"
          alt=""
          :class="{ active: activeImg.index == index }"
          @click="selectImg(index, item.url)"
          @click.native="selectImg(index, item.url)"
        />
      </div>
    </div>
@@ -19,25 +19,34 @@
      <div class="title">
        <div class="name">{{ data.productName }}</div>
        <div class="tagList">
          <span class="tag" v-for="(name, index) in labels" :key="index">{{
          <!-- <span class="tag" v-for="(name, index) in labels" :key="index">{{
            name
          }}</span>
          }}</span> -->
          <span class="tag red" v-if="data.productType == 1">软件</span>
          <span class="tag orange" v-if="data.productType == 4">应用</span>
          <span class="tag lightBlue" v-if="data.productType == 3">SDK</span>
          <span class="tag" v-if="data.productType == 2">软硬一体</span>
          <span class="tag blue" v-if="data.productType == 5">产品密钥</span>
        </div>
      </div>
      <div class="des">{{ data.description }}</div>
      <div class="typeVersion">
        <div class="label">型号:</div>
        <div class="typeVersionContent">{{ data.productModel }}</div>
        <div class="typeVersionContent">
          {{ data.productModel ? data.productModel : "-" }}
        </div>
        <div class="label">版本:</div>
        <div class="typeVersionContent">{{ data.productVersion }}</div>
        <div class="typeVersionContent">
          {{ data.productVersion ? data.productVersion : "-" }}
        </div>
      </div>

      <div class="price">
      <!-- <div class="price">
        <div class="label">价格</div>
        <div class="number">￥{{ data.priceBase }}.00</div>
      </div>
        <div class="number">￥{{ this.totalMoney }}.00</div>
      </div> -->

      <div class="row">
      <!--   <div class="row">
        <div class="label">购买数量</div>
        <el-input-number
          v-model="cartItem.devCount"
@@ -73,12 +82,9 @@
            >三年</el-button
          >
        </el-button-group>
      </div>
      </div> -->

      <div
        class="row"
        v-if="data.productBaseDetail && data.productBaseDetail.hasModulePrice"
      >
      <div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasModulePrice">
        <div class="label">配置模块</div>
        <div class="check-component">
          <div class="check-list">
@@ -111,19 +117,10 @@

      <div class="row" v-if="data.productType == 5">
        <div class="label">请求码</div>
        <el-input
          type="textarea"
          autosize
          placeholder="请输入请求码"
          v-model="cartItem.requestCode"
        >
        </el-input>
        <el-input type="textarea" autosize placeholder="请输入请求码" v-model="cartItem.requestCode"> </el-input>
      </div>

      <div
        class="row"
        v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice"
      >
      <div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice">
        <div class="label">通道数量</div>
        <el-input-number
          v-model="cartItem.chCount"
@@ -137,10 +134,7 @@
        <span class="desText">最大支持16路</span>
      </div>

      <div
        class="row"
        v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice"
      >
      <div class="row" v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice">
        <div class="label">授权数量</div>
        <el-input-number
          v-model="cartItem.authCount"
@@ -157,10 +151,10 @@
        class="row"
        v-if="
          data.productBaseDetail &&
          data.productBaseDetail.hasPriceBase &&
          data.productType != 5 &&
          !isSmartCalDot &&
          cartItem.sdks.length > 0
            data.productBaseDetail.hasPriceBase &&
            data.productType != 5 &&
            !isSmartCalDot &&
            cartItem.sdks.length > 0
        "
      >
        <div class="label">配置算法</div>
@@ -176,10 +170,7 @@
              {{ item.sdkName }}
            </div>
          </div>
          <div
            class="checked-list"
            v-if="data.productType != 3 && data.productType != 4"
          >
          <div class="checked-list" v-if="data.productType != 3 && data.productType != 4">
            <div class="label">已选</div>
            <div class="list">
              <div
@@ -195,14 +186,7 @@
        </div>
      </div>

      <div
        class="row"
        v-if="
          data.productType != 2 &&
          data.productType != 1 &&
          data.productType != 5
        "
      >
      <div class="row" v-if="data.productType != 2 && data.productType != 1 && data.productType != 5">
        <div class="label">芯片架构</div>
        <el-select
          v-model="cartItem.targetPlatform"
@@ -215,8 +199,7 @@
          "
        >
          <el-option
            v-for="item in data.productBaseDetail &&
            data.productBaseDetail.platforms"
            v-for="item in data.productBaseDetail && data.productBaseDetail.platforms"
            style="font-size: 12px"
            :key="item.id"
            :label="item.id"
@@ -230,11 +213,10 @@
        class="row"
        v-if="
          data.productType != 2 &&
          data.productType != 1 &&
          data.productType != 5 &&
          data.productType == 3 &&
          (cartItem.targetPlatform.includes('x86') ||
            cartItem.targetPlatform.includes('X86'))
            data.productType != 1 &&
            data.productType != 5 &&
            data.productType == 3 &&
            (cartItem.targetPlatform.includes('x86') || cartItem.targetPlatform.includes('X86'))
        "
      >
        <div class="label">显卡型号</div>
@@ -249,8 +231,7 @@
          placeholder="请选择显卡型号"
        >
          <el-option
            v-for="item in data.productBaseDetail &&
            data.productBaseDetail.vGpus"
            v-for="item in data.productBaseDetail && data.productBaseDetail.vGpus"
            style="font-size: 12px"
            :key="item.id"
            :label="item.id"
@@ -260,20 +241,13 @@
        </el-select>
      </div>

      <div
        class="row"
        v-if="
          data.productType != 2 &&
          data.productType != 1 &&
          data.productType != 5
        "
      >
      <div class="row" v-if="data.productType != 2 && data.productType != 1 && data.productType != 5">
        <div class="label">设备ID</div>

        <!-- :multiple-limit="cartItem.devCount" -->
        <el-select
          collapse-tags
          multiple
          :multiple-limit="cartItem.devCount"
          v-model="cartItem.devIdList"
          placeholder="请选择设备ID"
          :popper-append-to-body="false"
@@ -299,43 +273,43 @@
      </div>

      <div class="btns">
        <div class="button addCar">加入购物车</div>
        <div class="button pay" @click="confirmNow">立即购买</div>
        <!-- <div class="button addCar">加入购物车</div> -->
        <div class="button pay" @click="confirmNow">立即安装</div>
      </div>
    </div>

    <ConfirmOrder
      v-if="showOrder"
      :orderId="orderId"
      @close="showOrder = false"
    ></ConfirmOrder>
    <ConfirmOrder v-if="showOrder" :orderId="orderId" @close="showOrder = false"></ConfirmOrder>
  </div>
</template>

<script>
import { findDevListByUser } from "@/api/device";
import { getReleaseProduct } from "@/api/product";
import { resumeOrder } from "@/api/shopcart";
import ConfirmOrder from "@/views/productDetail/components/ConfirmOrder";
import { findDevListByUser } from "@/api/device"
import { getReleaseProduct } from "@/api/product"
import { resumeOrder } from "@/api/shopcart"
import ConfirmOrder from "@/views/productDetail/components/ConfirmOrder"
import { resumePay } from "@/api/order"

export default {
  props: {
    dataInfo: {},
    dataInfo: {}
  },
  components: {
    ConfirmOrder,
    ConfirmOrder
  },
  created() {
    this.getDevList();
    this.data = this.dataInfo.data
    this.labels = this.dataInfo.labels
    this.cartItem.id = this.data.id
    this.getDevList()
    if (this.dataInfo.data.pics.length > 0) {
      this.activeImg.url = this.dataInfo.data.pics[0].url;
      this.activeImg.url = this.dataInfo.data.pics[0].url
    }
    this.getInfo();
    this.getInfo()
  },
  data() {
    return {
      data: this.dataInfo.data,
      labels: this.dataInfo.labels,
      data: {},
      labels: [],
      cartItem: {
        id: "",
        productName: "",
@@ -352,7 +326,7 @@
        timeLength: 1,
        totalPrice: 0,
        isAdded: false,
        requestCode: "",
        requestCode: ""
      },
      timeLength: 1,
      isSmartCalDot: false,
@@ -361,135 +335,144 @@
      baseProductList: [],
      activeImg: {
        index: 0,
        url: "",
        url: ""
      },
      showOrder: false,
      orderId: "",
    };
      orderId: ""
    }
  },
  computed: {
    totalMoney() {
      let modulesPrice = 0
      this.cartItem.moduleIds.forEach((id) => {
        this.data.modulePriceSet.forEach((module) => {
          if (module.moduleId === id) {
            modulesPrice += module.modulePrice
          }
        })
      })

      let priceSingle =
        this.data.priceBase +
        this.data.authPrice * this.cartItem.authCount +
        this.data.chUnitPrice * this.cartItem.chCount +
        modulesPrice

      console.log(this.data)

      return priceSingle * this.cartItem.devCount * this.cartItem.timeLength
    }
  },
  methods: {
    getInfo() {
      getReleaseProduct({ productType: this.data.productType })
        .then((res) => {
          this.cartItem.id = this.data.id;
          this.cartItem.productName = this.data.productName;
          this.cartItem.authCount = 0;
          this.cartItem.chCount = 0;
          this.cartItem.devCount = 1;
          this.cartItem.timeLength = 1;
          this.cartItem.priceBase = this.data.priceBase;
          this.cartItem.authPrice = this.data.authPrice;
          this.cartItem.chUnitPrice = this.data.chUnitPrice;
          this.cartItem.targetPlatform = "";
          this.cartItem.devIdList = [];
          this.cartItem.totalPrice = 0;
          this.cartItem.isAdded = false;
          this.cartItem.modules = [];
          this.cartItem.sdks = [];
          this.cartItem.moduleIds = [];
          this.cartItem.sdkIds = [];
          this.cartItem.hasAuthPrice = false;
          this.cartItem.hasChUnitPrice = false;
          this.baseProductList = res.data.menus;
          this.cartItem.id = this.data.id
          this.cartItem.productName = this.data.productName
          this.cartItem.authCount = 0
          this.cartItem.chCount = 0
          this.cartItem.devCount = 1
          this.cartItem.timeLength = 1
          this.cartItem.priceBase = this.data.priceBase
          this.cartItem.authPrice = this.data.authPrice
          this.cartItem.chUnitPrice = this.data.chUnitPrice
          this.cartItem.targetPlatform = ""
          this.cartItem.devIdList = []
          this.cartItem.totalPrice = 0
          this.cartItem.isAdded = false
          this.cartItem.modules = []
          this.cartItem.sdks = []
          this.cartItem.moduleIds = []
          this.cartItem.sdkIds = []
          this.cartItem.hasAuthPrice = false
          this.cartItem.hasChUnitPrice = false
          this.baseProductList = res.data.menus

          let curProdObj = this.baseProductList.find(
            (item) => item.id === this.data.id
          );
          if (!curProdObj) return;
          this.cartItem.hasAuthPrice = this.data.hasAuthPrice =
            curProdObj && curProdObj.hasAuthPrice;
          let curProdObj = this.baseProductList.find((item) => item.id === this.data.id)
          if (!curProdObj) return
          this.cartItem.hasAuthPrice = this.data.hasAuthPrice = curProdObj && curProdObj.hasAuthPrice
          if (curProdObj.hasAuthPrice) {
            this.cartItem.authCount = 1;
            this.cartItem.authCount = 1
          }
          this.cartItem.hasChUnitPrice = this.data.hasChUnitPrice =
            curProdObj && curProdObj.hasChUnitPrice;
          this.cartItem.hasChUnitPrice = this.data.hasChUnitPrice = curProdObj && curProdObj.hasChUnitPrice
          if (curProdObj.hasChUnitPrice) {
            this.cartItem.chCount = 1;
            this.cartItem.chCount = 1
          }

          this.isSmartCalDot =
            this.data.productBaseDetail.name == "智能计算节点";
          this.isSmartCalDot = this.data.productBaseDetail.name == "智能计算节点"
          this.cartItem.modules =
            curProdObj.modules &&
            curProdObj.modules.map((item) => ({
              id: item.id,
              moduleName: item.moduleName,
              modulePrice: this.data.modulePriceSet.find(
                (obj) => obj.moduleId === item.id
              ).modulePrice,
              selected: this.isSmartCalDot,
            }));
              modulePrice: this.data.modulePriceSet.find((obj) => obj.moduleId === item.id).modulePrice,
              selected: this.isSmartCalDot
            }))

          this.cartItem.sdks =
            curProdObj.sdks &&
            curProdObj.sdks.map((item) => ({
              id: item.id,
              sdkName: item.sdkName,
              selected: this.data.productType == 3 ? true : false,
            }));
              selected: this.data.productType == 3 ? true : false
            }))
          this.cartItem.sdks.forEach((sdk) => {
            if (sdk.selected) {
              this.cartItem.sdkIds.push(sdk.id);
              this.cartItem.sdkIds.push(sdk.id)
            }
          });
          })
        })
        .catch((err) => {
          this.$notify({
            type: "error",
            message: err,
            duration: 2500,
            offset: 57,
          });
        });
            offset: 57
          })
        })
    },
    selectYear(year) {
      this.timeLength = year;
      this.cartItem.timeLength = year;
      this.timeLength = year
      this.cartItem.timeLength = year
    },
    selectModel(index) {
      console.log("-----");
      console.log(this.isSmartCalDot);
      if (this.isSmartCalDot) {
        return;
        return
      }
      this.cartItem.modules[index].selected =
        !this.cartItem.modules[index].selected;
      this.cartItem.modules[index].selected = !this.cartItem.modules[index].selected
      this.cartItem.modules.forEach((item) => {
        if (item.selected && this.cartItem.moduleIds.indexOf(item.id) < 0) {
          this.cartItem.moduleIds.push(item.id);
          this.cartItem.moduleIds.push(item.id)
        }
        if (!item.selected && this.cartItem.moduleIds.indexOf(item.id) >= 0) {
          this.cartItem.moduleIds.splice(
            this.cartItem.moduleIds.indexOf(item.id),
            1
          );
          this.cartItem.moduleIds.splice(this.cartItem.moduleIds.indexOf(item.id), 1)
        }
      });
      })
    },
    handleChangeCh() {
      if (this.cartItem.authCount < this.cartItem.chCount) {
        this.cartItem.authCount = this.cartItem.chCount;
        this.cartItem.authCount = this.cartItem.chCount
      }
    },
    selectAlgorithm(index) {
      this.cartItem.sdks[index].selected = !this.cartItem.sdks[index].selected;
      this.cartItem.sdks[index].selected = !this.cartItem.sdks[index].selected
      this.cartItem.sdks.forEach((item) => {
        if (item.selected && this.cartItem.sdkIds.indexOf(item.id) < 0) {
          this.cartItem.sdkIds.push(item.id);
          this.cartItem.sdkIds.push(item.id)
        }
        if (!item.selected && this.cartItem.sdkIds.indexOf(item.id) >= 0) {
          this.cartItem.sdkIds.splice(this.cartItem.sdkIds.indexOf(item.id), 1);
          this.cartItem.sdkIds.splice(this.cartItem.sdkIds.indexOf(item.id), 1)
        }
      });
      })
    },
    getDevList() {
      findDevListByUser()
        .then((res) => {
          this.devList = res.data.menus;
          this.devList = res.data.menus
        })
        .catch((err) => {
          console.log(err);
        });
          console.log(err)
        })
    },
    handleChangeAuth() {
      if (this.cartItem.authCount < this.cartItem.chCount) {
@@ -498,19 +481,18 @@
          type: "warning",
          message: "授权数量不能小于通道数量",
          duration: 2500,
          offset: 57,
        });
        this.byChecked = false;
          offset: 57
        })
        this.byChecked = false
      } else {
        this.byChecked = true;
        this.byChecked = true
      }
    },
    selectImg(index, url) {
      this.activeImg.index = index;
      this.activeImg.url = url;
      this.activeImg.index = index
      this.activeImg.url = url
    },
    confirmNow() {
      this.cartItem.totalPrice = this.computTotalPrice;
      let products = [
        {
          activateCode: this.cartItem.requestCode,
@@ -525,24 +507,46 @@
          sdkIds: this.cartItem.sdkIds,
          serveYear: this.cartItem.timeLength,
          targetPlatform: this.cartItem.targetPlatform,
          vGpu: this.cartItem.vGpu,
        },
      ];
          vGpu: this.cartItem.vGpu
        }
      ]
      resumeOrder({
        orderMoney: this.numeral(this.sum).value(),
        // orderMoney: this.numeral(this.totalMoney).value(),
        orderMoney: 0,
        payMethod: 0,
        products,
        status: 0,
        userId: JSON.parse(sessionStorage.getItem("userInfo")).id,
        userId: JSON.parse(sessionStorage.getItem("userInfo")).id
      }).then((res) => {
        if (res.success) {
          this.orderId = res.data.orderId;
          this.showOrder = true;
          this.orderId = res.data.orderId

          if (this.totalMoney == 0) {
            resumePay({ orderId: this.orderId, payMethod: 5 }).then((res) => {
              if (res.success) {
                this.$router.push({
                  path: "/personalCenter",
                  query: {
                    id: 0
                  }
                })
                this.$notify({
                  type: "success",
                  message: "成功试用",
                  duration: 2500,
                  offset: 57
                })
              }
            })
            return
          } else {
            this.showOrder = true
          }
        }
      });
    },
  },
};
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@@ -604,6 +608,26 @@
          padding: 2px 5px;
          border: 1px solid #ff5033;
          color: #ff5033;

          &.red {
            color: #ff4f32;
            border-color: #ff4f32;
          }

          &.orange {
            color: #ff9500;
            border-color: #ff9500;
          }

          &.lightBlue {
            color: #00bee7;
            border-color: #00bee7;
          }

          &.blue {
            color: #0064ff;
            border-color: #0064ff;
          }
        }
      }
    }
@@ -740,6 +764,14 @@
          border: 1px solid #c0c5cc;
          border-radius: 0;
        }

        .el-tag {
          margin-top: 0;
        }

        .el-select__tags-text {
          color: #999;
        }
      }
    }

@@ -768,4 +800,4 @@
    }
  }
}
</style>
</style>