优化部分样式

zhangzengfei

2022-08-04 2e4133d2bbb0f4626cf336f3e456783b9fb7867e

 src/views/productDetail/components/PayCard.vue

@@ -84,10 +84,7 @@
        </el-button-group>
      </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">
@@ -120,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"
@@ -146,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"
@@ -166,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>
@@ -185,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
@@ -204,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"
@@ -224,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"
@@ -239,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>
@@ -258,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"
@@ -269,14 +241,7 @@
        </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" -->
@@ -313,37 +278,33 @@
      </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 { resumePay } from "@/api/order";
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.data = this.dataInfo.data;
    this.labels = this.dataInfo.labels;
    this.cartItem.id = this.data.id;
    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 {
@@ -365,7 +326,7 @@
        timeLength: 1,
        totalPrice: 0,
        isAdded: false,
        requestCode: "",
        requestCode: ""
      },
      timeLength: 1,
      isSmartCalDot: false,
@@ -374,155 +335,144 @@
      baseProductList: [],
      activeImg: {
        index: 0,
        url: "",
        url: ""
      },
      showOrder: false,
      orderId: "",
    };
      orderId: ""
    }
  },
  computed: {
    totalMoney() {
      let modulesPrice = 0;
      let modulesPrice = 0
      this.cartItem.moduleIds.forEach((id) => {
        this.data.modulePriceSet.forEach((module) => {
          if (module.moduleId === id) {
            modulesPrice += module.modulePrice;
            modulesPrice += module.modulePrice
          }
        });
      });
        })
      })

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

      console.log(this.data);
      console.log(this.data)

      return priceSingle * this.cartItem.devCount * this.cartItem.timeLength;
    },
      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) {
      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) {
@@ -531,16 +481,16 @@
          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() {
      let products = [
@@ -557,19 +507,19 @@
          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.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.orderId = res.data.orderId

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

<style lang="scss" scoped>
@@ -850,4 +800,4 @@
    }
  }
}
</style>
</style>