本地图片适配

ZZJ

2022-07-28 edef6ae8f59823258ce610c9074d32e698958b51

 src/views/productDetail/components/ConfirmOrder.vue

@@ -17,9 +17,10 @@
          <el-table-column
            prop="productName"
            label="产品名称"
            width="200"
          ></el-table-column>

          <el-table-column label="配置详情">
          <el-table-column label="配置详情" width="250">
            <template slot-scope="scope">
              <div style="text-align: left">
                <p v-if="scope.row.moduleNames.length > 0">
@@ -30,13 +31,13 @@
                    >{{ item + " " }}</span
                  >
                </p>
                <p>
                <p v-if="scope.row.ChCount">
                  通道数量：
                  <span>{{ scope.row.chCount || 0 }}</span>
                  <span>{{ scope.row.ChCount }}</span>
                </p>
                <p>
                <p v-if="scope.row.authCount">
                  授权数量：
                  <span>{{ scope.row.authCount || 0 }}</span>
                  <span>{{ scope.row.authCount }}</span>
                </p>
                <p v-if="scope.row.sdkNames.length > 0">
                  算法：
@@ -46,6 +47,7 @@
                    >{{ item + " " }}</span
                  >
                </p>

                <p>
                  服务时长：
                  <span>{{ scope.row.serveYear + "年" }}</span>
@@ -54,7 +56,7 @@
            </template>
          </el-table-column>
          <el-table-column prop="devCount" label="购买数量"></el-table-column>
          <el-table-column pro="devIdList" label="绑定设备">
          <el-table-column pro="devIdList" label="绑定设备" width="250">
            <template slot-scope="scope">
              <div>
                <p v-for="item in scope.row.devIdList" :key="item">
@@ -64,7 +66,11 @@
            </template>
          </el-table-column>
          <el-table-column label="优惠" prop="discount"></el-table-column>
          <el-table-column label="小计" prop="productPrice"></el-table-column>
          <el-table-column label="小计">
            <template>
              {{ orderInfo.orderMoney }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="title">支付方式</div>
@@ -75,12 +81,12 @@
          @click="checkPayway('offpay')"
        >
          <img
            src="/images/product/汇款灰.png"
            src="/images/product/pay2.png"
            class="moneyIcon"
            v-if="this.payWay === 'ali'"
            alt=""
          />
          <img class="moneyIcon" src="/images/product/汇款.png" v-else alt="" />
          <img class="moneyIcon" src="/images/product/pay.png" v-else alt="" />
          <span>线下汇款</span>
        </div>
        <div
@@ -89,17 +95,17 @@
          @click="checkPayway('ali')"
        >
          <img
            src="/images/product/支付宝.png"
            src="/images/product/alipay.png"
            v-if="this.payWay === 'ali'"
            alt=""
          />
          <img src="/images/product/支付宝灰.png" v-else alt="" />
          <img src="/images/product/alipay2.png" v-else alt="" />
        </div>
      </div>

      <div class="total">
        <div class="money">
          应付款<span class="number">{{ sum }}元</span>
          应付款<span class="number">{{ orderInfo.orderMoney }}元</span>
        </div>

        <div class="policy">
@@ -128,66 +134,16 @@
        <el-button type="primary" @click="assureOnlinePay">完成支付</el-button>
      </div>
    </el-dialog>
    <el-dialog
      class="offpay-instruct-dialog"
      :visible="offPayInstruVisible"
      :show-close="true"
      @close="offPayInstruVisible = false"
    >
      <div slot="title" class="dialog-title">线下汇款说明</div>
      <div class="offPay-instruct">
        <h5>请将款项汇入以下银行账户：</h5>
        <ul>
          <li><label>开户银行：</label>北京银行太阳宫支行</li>
          <li><label>账 号：</label>2000 0031 2025 0000 9136 746</li>
          <li><label>开户行行号：</label>313100001792</li>
          <li>
            <label>款项：</label>
            <span class="main-color">{{ sum }}元</span>
          </li>
        </ul>
        <div class="dash-line"></div>
        <ul class="userinfo">
          <li>
            <label>您的登录用户名：</label>
            {{ this.username }}
          </li>
          <li>
            <label>您的订单号：</label>
            {{ orderId }}
          </li>
        </ul>
        <div class="attentions">
          <p class="title">注意事项：</p>
          <p>1、请在转账时务必提供用户名和订单编号；</p>
          <p>
            2、转账后，请务必点击“支付完成/上传凭证”提交转账信息，以便财务确认，财务确认时间为提交后的1-3个工作日；
          </p>
          <p>3、您可以在“我的订单”点击【提交付款凭证】，查看本页中的内容</p>
        </div>
        <div class="btns text-center">
          <el-button
            class="btn-cancle"
            @click="offPayInstruVisible = false"
            style="margin-right: 20px"
            >取消</el-button
          >
          <router-link
            :to="`/Layout/ManageOrder?confirmOrder=offPay&orderId=${orderId}`"
          >
            <el-button class="btn-assure" type="primary"
              >支付完成/上传凭证</el-button
            >
          </router-link>
        </div>
      </div>
    </el-dialog>

    <div class="offerpay" v-if="showOffpayInstruct || showUploadBox">
      <OffpayInstruct
        v-if="showOffpayInstruct"
        @close="showOffpayInstruct = false"
        :offerData="{ username: username, sum: sum, orderId: orderId }"
        :offerData="{
          username: username,
          sum: orderInfo.orderMoney,
          orderId: orderId,
        }"
        @confirm="confirmOrder"
      ></OffpayInstruct>
      <UploadBox
@@ -195,6 +151,7 @@
        @close="showUploadBox = false"
        @back="back"
        v-if="showUploadBox"
        @closeAll="closeAll"
      >
      </UploadBox>
    </div>
@@ -231,21 +188,14 @@
      showUploadBox: false,
    };
  },
  computed: {
    sum() {
      let sum = 0;
      sum = this.orders.reduce((prev, next) => prev + next.productPrice, 0);
      return this.numeral(sum).format("0,0.00");
    },
  },
  mounted() {
    this.getResumeList();
    this.username = JSON.parse(sessionStorage.getItem("userInfo")).username;
  },
  methods: {
    assureOnlinePay() {
      this.onlinePayVisible = false;
      this.$router.replace("/Layout/ManageOrder");
      this.$emit("close");
      this.$router.replace("/personalCenter?id=0");
    },
    getResumeList() {
      getOrderById(this.orderId).then((res) => {
@@ -272,7 +222,13 @@
      if (this.orderInfo.orderMoney == 0) {
        resumePay({ orderId, payMethod: 5 }).then((res) => {
          if (res.success) {
            //  this.$router.replace("/Layout/ManageOrder");
            this.$router.push("/trialCenter");
            this.$notify({
              type: "success",
              message: "成功试用",
              duration: 2500,
              offset: 57,
            });
          }
        });
        return;
@@ -311,6 +267,10 @@
      }
    },
    close() {
      this.$emit("close");
    },
    closeAll() {
      this.showUploadBox = false;
      this.$emit("close");
    },
    confirmOrder() {
@@ -427,7 +387,7 @@
      .policy {
        margin-top: 10px;
        display: flex;
        justify-content: end;
        justify-content: flex-end;
        align-items: center;
        font-size: 14px;

@@ -447,7 +407,7 @@
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: end;
    justify-content: flex-end;
    text-align: center;
    line-height: 40px;