设备管理 样式调整

mark

2022-10-25 f20a554bdb24e9dfde9dc6a69d78595944f61d15

 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,69 +134,45 @@
        <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: orderInfo.orderMoney,
          orderId: orderId,
        }"
        @confirm="confirmOrder"
      ></OffpayInstruct>
      <UploadBox
        :orderId="orderId"
        @close="showUploadBox = false"
        @back="back"
        v-if="showUploadBox"
        @closeAll="closeAll"
      >
      </UploadBox>
    </div>

    <div class="mask" v-if="showOffpayInstruct || showUploadBox"></div>
  </div>
</template>

<script>
import { getOrderById } from "@/api/product";
import { resumePay } from "@/api/order";
import OffpayInstruct from "@/views/productDetail/components/OffpayInstruct";
import UploadBox from "@/views/productDetail/components/UploadBox";

export default {
  props: {
    orderId: {},
  },
  components: {
    OffpayInstruct,
    UploadBox,
  },
  data() {
    return {
@@ -202,14 +184,9 @@
      username: "",
      offPayInstruVisible: false,
      onlinePayVisible: false,
      showOffpayInstruct: false,
      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();
@@ -217,8 +194,8 @@
  },
  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) => {
@@ -232,13 +209,26 @@
      this.payWay = payway;
    },
    forPay() {
      if (!this.policyChecked) {
        this.$notify({
          type: "error",
          message: "请确认用户条款",
        });
        return;
      }
      let orderId = this.orderId;
      let payMethod = this.payWay;
      let _this = this;
      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;
@@ -255,7 +245,7 @@
        resumePay({ orderId, payMethod: 1 })
          .then((res) => {
            if (res.success) {
              this.offPayInstruVisible = true;
              this.showOffpayInstruct = true;
            }
          })
          .catch((e) => {
@@ -278,6 +268,18 @@
    },
    close() {
      this.$emit("close");
    },
    closeAll() {
      this.showUploadBox = false;
      this.$emit("close");
    },
    confirmOrder() {
      this.showOffpayInstruct = false;
      this.showUploadBox = true;
    },
    back() {
      this.showOffpayInstruct = true;
      this.showUploadBox = false;
    },
  },
};
@@ -385,7 +387,7 @@
      .policy {
        margin-top: 10px;
        display: flex;
        justify-content: end;
        justify-content: flex-end;
        align-items: center;
        font-size: 14px;

@@ -399,6 +401,54 @@
      }
    }
  }

  .btns {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: flex;
    justify-content: flex-end;
    text-align: center;
    line-height: 40px;

    .confirm {
      margin-left: 10px;
      width: 104px;
      height: 40px;
      background: #0065ff;
      color: #fff;
    }

    .cancel {
      width: 104px;
      height: 40px;
      border: 1px solid #0065ff;
      color: #0065ff;
    }
  }

  .offerpay {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -331px;
    margin-left: -223px;
    width: 446px;
    height: 662px;
    background: #ffffff;
    z-index: 2;
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    opacity: 0.2;
    z-index: 1;
  }
}
</style>