vue+vant 全选 单选 计算金额 支付

html

<template>
  <div class="index">
    <div class="index_top">
      <van-checkbox-group v-model="checked" @change="handleCheck">
        <div v-for="(item, index) in list" :key="index" class="list">
          <div class="list_left">
            <van-checkbox class="item" :name="item"> </van-checkbox>
          </div>
          <div class="list_right">
            <div class="list_right_left">
              <div class="image">
                <img :src="item.photoUrl" alt="" />
              </div>
              <div class="list_btn">
                {{ item.serviceType == 1 ? "联机账户" : "专用账户" }}
              </div>
            </div>
            <div class="list_right_right">
              <div class="top">
                {{ item.insName }}
              </div>
              <div class="center">
                <div class="title">支付金额：</div>
                <div class="num">{{ item.payAmount | amtFilter }}</div>
                <div class="nums">元</div>
              </div>
              <div class="bottom">
                订单状态：{{ item.orderstate == 1 ? "待支付" : "已支付" }}
              </div>
            </div>
          </div>
        </div>
      </van-checkbox-group>
    </div>
    <div class="index_bottom">
      <div class="bottom_flex">
        <van-checkbox class="box" v-model="checkAll" @change="handleCheckAll"
          >全选</van-checkbox
        >
        <div class="price">
          <div class="numleft_bottom">合计：</div>
          <div class="numcenter_bottom">￥</div>
          <div class="numright_bottom">{{ priceNum | amtFilter }}</div>
        </div>
      </div>
      <div class="toflex" @click="tonum">去支付</div>
    </div>
  </div>
</template>

js

<script>
import { api_9101, api_9102 } from "@/api/app";
export default {
  data() {
    return {
      list: [], // 订单列表
      checked: [], //选中列表
      orderid: [], //选中订单号列表
      checkAll: false,
      cardNo: this.$route.query.id,
      priceNum: "0", // 金额
    };
  },
  mounted() {
    this.getlist();
  },
  methods: {
    getlist() {
      api_9101({
        // certNoEncrypt: this.cardNo,
        certNoEncrypt: "9D414EFA71ED0E14438975C1D843A2A2E794B320BC6D44A5",
        reqCode: "9101",
      }).then((res) => {
        if (res.data.result == 990000) {
          this.list = res.data.data;
        }
      });
    },
    handleCheckAll(val) {
      // console.log(val);
      let checkedCount = this.checked.length;

      // console.log(this.list);
      if (val) {
        this.checked = [];
        this.orderid = [];
        this.checked = this.list.map((item) => item);
        this.orderid = this.list.map((item) => item.orderId);
      } else if (checkedCount === this.list.length) {
        this.checked = [];
        this.orderid = [];
      }
      // 调用金额计算
      this.getpriceNum();
    },
    // 单选
    handleCheck(val) {
      // 调用金额计算
      this.getpriceNum();
      this.checkAll = this.checked.length === this.list.length;
      // 选中的订单id
      this.orderid = val.map((item) => item.orderId);
      // console.log(this.orderid);
    },
    // 计算价格
    getpriceNum() {
      if (this.checked.length === 0) {
        this.priceNum = "0";
      }
      let zong = 0;
      this.checked.forEach((item) => {
        // 订单金额
        zong += Number(item.payAmount) * 1;
        this.priceNum = zong;
      });
    },
    tonum() {
      api_9102({
        orderIds: this.orderid,
        reqCode: "9102",
      }).then((res) => {
        if (res.data.result == 990000) {
          this.$dialog
            .alert({
              message: "支付成功",
              confirmButtonColor: "#338AFB",
            })
            .then(() => {
              this.checked = [];
              this.orderid = [];
              this.getlist();
              this.getpriceNum();
            });
        } else {
          this.$dialog
            .alert({
              title: "支付失败",
              message: res.data.msg,
            })
            .then(() => {
              this.checked = [];
              this.orderid = [];
              this.getlist();
              this.getpriceNum();
            });
        }
      });
    },
  },
  components: {},
  computed: {},
};
</script>

css

<style lang="scss" scoped>
.index {
  background: #f6f6f6;
  .index_top {
    height: 92vh;
    overflow: hidden;
    overflow: scroll;
    .list {
      margin-top: 10px;
      width: 100%;
      height: 134px;
      border-radius: 5px;
      display: flex;
      .list_left {
        width: 14vw;
        height: 100%;
        .item {
          margin: 59px 15px;
        }
      }
      .list_right {
        margin: 0 15px;
        width: 299px;
        height: 100%;
        background: #ffffff;
        border-radius: 5px;
        display: flex;
        .list_right_left {
          .image {
            margin: 12px 12px 6px 12px;
            width: 88px;
            height: 88px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .list_btn {
            margin-left: 23px;
            width: 66px;
            height: 19px;
            border: 1px solid #12b7f5;
            border-radius: 4px;
            text-align: center;
            line-height: 19px;
            font-family: PingFangHK-Regular;
            font-weight: 400;
            font-size: 12px;
            color: #12b7f5;
            letter-spacing: 0.53px;
          }
        }
        .list_right_right {
          margin: 12px 12px 6px 0;
          .top {
            width: 186px;
            height: 40px;
            font-family: PingFangHK-Medium;
            font-weight: 500;
            font-size: 14px;
            color: #333333;
            letter-spacing: 0;
            overflow: hidden; //超出文本隐藏
            text-overflow: ellipsis; ///超出部分省略号显示
            display: -webkit-box; //弹性盒模型
            -webkit-box-orient: vertical; //上下垂直
            -webkit-line-clamp: 2; //自定义行数
          }
          .center {
            display: flex;
            margin-top: 20px;
            .title {
              color: rgba(102, 102, 102, 1);
              font-size: 12px;
              font-face: PingFangHK;
              font-weight: 400;
              line-height: 0;
              letter-spacing: 0;
              paragraph-spacing: 0;
              text-align: left;
            }

            .num {
              color: rgba(102, 102, 102, 1);
              font-size: 15px;
              font-face: PingFangHK;
              font-weight: 600;
              line-height: 0;
              letter-spacing: 0;
              paragraph-spacing: 0;
              text-align: left;
            }

            .nums {
              color: rgba(102, 102, 102, 1);
              font-size: 12px;
              font-face: PingFangHK;
              font-weight: 400;
              line-height: 0;
              letter-spacing: 0;
              paragraph-spacing: 0;
              text-align: left;
            }
          }
          .bottom {
            margin-top: 10px;
            font-family: PingFangHK-Regular;
            font-weight: 400;
            font-size: 12px;
            color: #ff7300;
            letter-spacing: 0;
          }
        }
      }
    }
  }
  .index_bottom {
    background: #fff;
    height: 8vh;
    display: flex;
    justify-content: space-between;
    .bottom_flex {
      display: flex;
      .box {
        margin-left: 20px;
      }
      .price {
        margin-left: 20px;
        line-height: 8vh;
        display: flex;
        .numleft_bottom {
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
        .numcenter_bottom {
          color: rgba(255, 49, 42, 1);
          font-size: 12px;
          font-face: PingFangSC;
          font-weight: 500;
          letter-spacing: 0;
          paragraph-spacing: 0;
          text-align: left;
        }
        .numright_bottom {
          color: rgba(255, 49, 42, 1);
          font-size: 18px;
          font-face: PingFangSC;
          font-weight: 500;
          letter-spacing: 0;
          paragraph-spacing: 0;
        }
      }
    }
    .toflex {
      width: 95px;
      height: 54px;
      background: #12b7f5;
      color: #fff;
      line-height: 54px;
      text-align: center;
    }
  }
}
</style>

Html特殊字符表(建议收藏)

原始字符	entity	原始字符	entity
"	&quot ;	&	&amp ;
’	&#039 ;	<	&lt ;
>	&gt ;		&nbsp ;
¡	&iexcl ;	¢	&cent ;
£	&pound ;	¤	&curren ;
¥	&yen ;	¦	&brvbar ;
§	&sect ;	¨	&uml ;
©	&copy ;	ª	&ordf ;
«	&laquo ;	¬	&not ;
	&shy ;	®	&reg ;
¯	&macr ;	°	&deg ;
±	&plusmn ;	²	&sup2 ;
³	&sup3 ;	´	&acute ;
µ	&micro ;	¶	&para ;
·	&middot ;	¸	&cedil ;
¹	&sup1 ;	º	&ordm ;
»	&raquo ;	¼	&frac14 ;
½	&frac12 ;	¾	&frac34 ;
¿	&iquest ;	À	&Agrave ;
Á	&Aacute ;	Â	&Acirc ;
Ã	&Atilde ;	Ä	&Auml ;
Å	&Aring ;	Æ	&AElig ;
Ç	Ç	È	È
É	É	Ê	Ê
Ë	&Euml ;	Ì	&Igrave ;
Í	&Iacute ;	Î	&Icirc ;
Ï	&Iuml ;	Ð	&ETH ;
Ñ	&Ntilde ;	Ò	&Ograve ;
Ó	&Oacute ;	Ô	&Ocirc ;
Õ	&Otilde ;	Ö	&Ouml ;
×	&times ;	Ø	&Oslash ;
Ù	&Ugrave ;	Ú	&Uacute ;
Û	&Ucirc ;	Ü	&Uuml ;
Ý	&Yacute ;	Þ	&THORN ;
ß	&szlig ;	à	&agrave ;
á	&aacute ;	â	&acirc ;
ã	&atilde ;	ä	&auml ;
å	&aring ;	æ	&aelig ;
ç	&ccedil ;	è	&egrave ;
é	&eacute ;	ê	&ecirc ;
ë	&euml ;	ì	&igrave ;
í	&iacute ;	î	&icirc ;
ï	&iuml ;	ð	&eth ;
ñ	&ntilde ;	ò	&ograve ;
ó	&oacute ;	ô	&ocirc ;
õ	&otilde ;	ö	&ouml ;
÷	&divide ;	ø	&oslash ;
ù	&ugrave ;	ú	&uacute ;
û	&ucirc ;	ü	&uuml ;
ý	&yacute ;	þ	&thorn ;
ÿ	&yuml ;	Œ	&OElig ;
œ	&oelig ;	Š	&Scaron ;
š	&scaron ;	Ÿ	&Yuml ;
ƒ	&fnof ;	ˆ	&circ ;
˜	&tilde ;	Α	Α
Β	&Beta ;	Γ	&Gamma ;
Δ	&Delta ;	Ε	&Epsilon ;
Ζ	&Zeta ;	Η	&Eta ;
Θ	&Theta ;	Ι	&Iota ;
Κ	&Kappa ;	Λ	&Lambda ;
Μ	&Mu ;	Ν	&Nu ;
Ξ	&Xi ;	Ο	&Omicron ;
Π	&Pi ;	Ρ	&Rho ;
Σ	&Sigma ;	Τ	&Tau ;
Υ	&Upsilon ;	Φ	&Phi ;
Χ	&Chi ;	Ψ	&Psi ;
Ω	&Omega ;	α	&alpha ;
β	&beta ;	γ	&gamma ;
δ	&delta ;	ε	&epsilon ;
ζ	&zeta ;	η	&eta ;
θ	&theta ;	ι	&iota ;
κ	&kappa ;	λ	&lambda ;
μ	&mu ;	ν	&nu ;
ξ	&xi ;	ο	&omicron ;
π	&pi ;	ρ	&rho ;
ς	&sigmaf ;	σ	&sigma ;
τ	&tau ;	υ	&upsilon ;
φ	&phi ;	χ	&chi ;
ψ	&psi ;	ω	&omega ;
ϑ	&thetasym ;	ϒ	&upsih ;
ϖ	&piv ;		&ensp ;
	&emsp ;		&thinsp ;
‌	&zwnj ;	‍	&zwj ;
	&lrm ;		&rlm ;
–	&ndash ;	—	&mdash ;
‘	&lsquo ;	’	&rsquo ;
‚	&sbquo ;	“	&ldquo ;
”	&rdquo ;	„	&bdquo ;
†	&dagger ;	‡	&Dagger ;
•	&bull ;	…	&hellip ;
‰	&permil ;	′	&prime ;
″	&Prime ;	‹	&lsaquo ;
›	&rsaquo ;	‾	&oline ;
⁄	&frasl ;	€	&euro ;
ℑ	&image ;	℘	&weierp ;
ℜ	&real ;	™	&trade ;
ℵ	&alefsym ;	←	&larr ;
↑	&uarr ;	→	&rarr ;
↓	&darr ;	↔	&harr ;
↵	&crarr ;	⇐	&lArr ;
⇑	&uArr ;	⇒	&rArr ;
⇓	&dArr ;	⇔	&hArr ;
∀	&forall ;	∂	&part ;
∃	&exist ;	∅	&empty ;
∇	&nabla ;	∈	&isin ;
∉	&notin ;	∋	&ni ;
∏	&prod ;	∑	&sum ;
−	&minus ;	∗	&lowast ;
√	&radic ;	∝	&prop ;
∞	&infin ;	∠	&ang ;
∧	&and ;	∨	&or ;
∩	&cap ;	∪	&cup ;
∫	&int ;	∴	&there4 ;
∼	&sim ;	≅	&cong ;
≈	&asymp ;	≠	&ne ;
≡	&equiv ;	≤	&le ;
≥	&ge ;	⊂	&sub ;
⊃	&sup ;	⊄	&nsub ;
⊆	&sube ;	⊇	&supe ;
⊕	&oplus ;	⊗	&otimes ;
⊥	&perp ;	⋅	&sdot ;
⌈	&lceil ;	⌉	&rceil ;
⌊	&lfloor ;	⌋	&rfloor ;
⟨	&lang ;	⟩	&rang ;
◊	&loz ;	♠	&spades ;
♣	&clubs ;	♥	&hearts ;
♦	&diams ;

下面是ocr图片识别

chooseImage() {
const that = this;
Taro.chooseImage({
sizeType: [“original”, “compressed”], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [“album”, “camera”], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
console.log(res);
let file = res.tempFilePaths[0];
that.files = res.tempFilePaths[0];
console.log(file);
Taro.getImageInfo({
src: file,
success(imageInfo) {
var imgType = imageInfo.type;
console.log(imageInfo);
Taro.getFileSystemManager().readFile({
filePath: file, //选择图片返回的相对路径
encoding: “base64”, //这个是很重要的
success: (res) => {
//成功的回调
//返回base64格式
var base64Str =
“data:image/” + imgType + “;base64,” + res.data;
// console.log(base64Str);
var img = res.data;
console.log(img);
// that.uploadImg(base64Str);
that.uploadImg(img);
},
fail: (err) => {
console.log(err);
reject(err);
},
});
},
});
},
});
},
uploadImg(img) {
OCR01({
img_content: img,
}).then((res) => {
console.log(res);
this.name = res.name;
this.num = res.num;
setSessionStore(“name”, res.name);
setSessionStore(“num”, res.num);
});
},
chooseImage() {
const that = this;
Taro.chooseImage({
sizeType: [“original”, “compressed”], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [“album”, “camera”], // 可以指定来源是相册还是相机，默认二者都有
success(res) {
console.log(res);
let file = res.tempFilePaths[0];
that.files = res.tempFilePaths[0];
console.log(file);
Taro.getImageInfo({
src: file,
success(imageInfo) {
var imgType = imageInfo.type;
console.log(imageInfo);
Taro.getFileSystemManager().readFile({
filePath: file, //选择图片返回的相对路径
encoding: “base64”, //这个是很重要的
success: (res) => {
//成功的回调
//返回base64格式
var base64Str =
“data:image/” + imgType + “;base64,” + res.data;
// console.log(base64Str);
var img = res.data;
console.log(img);
// that.uploadImg(base64Str);
that.uploadImg(img);
},
fail: (err) => {
console.log(err);
reject(err);
},
});
},
});
},
});
},
uploadImg(img) {
OCR01({
img_content: img,
}).then((res) => {
console.log(res);
this.name = res.name;
this.num = res.num;
setSessionStore(“name”, res.name);
setSessionStore(“num”, res.num);
});
},