本地图片适配

ZZJ

2022-07-28 edef6ae8f59823258ce610c9074d32e698958b51

 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,7 +82,7 @@
            >三年</el-button
          >
        </el-button-group>
      </div>
      </div> -->

      <div
        class="row"
@@ -142,16 +151,6 @@
        v-if="data.productBaseDetail && data.productBaseDetail.hasAuthPrice"
      >
        <div class="label">授权数量</div>
        <el-input-number
          v-model="cartItem.chCount"
          @change="handleChangeCh"
          :disabled="!data.hasChUnitPrice"
          size="small"
          :min="1"
          :max="16"
          label="描述文字"
        ></el-input-number>
        <span class="desText">最大支持16路</span>
        <el-input-number
          v-model="cartItem.authCount"
          @change="handleChangeAuth"
@@ -280,10 +279,10 @@
      >
        <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"
@@ -309,8 +308,8 @@
      </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>

@@ -327,6 +326,7 @@
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: {
@@ -336,6 +336,9 @@
    ConfirmOrder,
  },
  created() {
    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;
@@ -344,8 +347,8 @@
  },
  data() {
    return {
      data: this.dataInfo.data,
      labels: this.dataInfo.labels,
      data: {},
      labels: [],
      cartItem: {
        id: "",
        productName: "",
@@ -376,6 +379,28 @@
      showOrder: false,
      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() {
@@ -457,8 +482,6 @@
      this.cartItem.timeLength = year;
    },
    selectModel(index) {
      console.log("-----");
      console.log(this.isSmartCalDot);
      if (this.isSmartCalDot) {
        return;
      }
@@ -520,7 +543,6 @@
      this.activeImg.url = url;
    },
    confirmNow() {
      this.cartItem.totalPrice = this.computTotalPrice;
      let products = [
        {
          activateCode: this.cartItem.requestCode,
@@ -539,14 +561,37 @@
        },
      ];
      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,
      }).then((res) => {
        if (res.success) {
          this.orderId = res.data.orderId;
          this.showOrder = true;

          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;
          }
        }
      });
    },
@@ -613,6 +658,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;
          }
        }
      }
    }
@@ -749,6 +814,14 @@
          border: 1px solid #c0c5cc;
          border-radius: 0;
        }

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

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