|
|
@@ -0,0 +1,230 @@
|
|
|
+<template>
|
|
|
+ <div class="point-pay">
|
|
|
+ <div class="product">
|
|
|
+ <div class="img">
|
|
|
+ <img :src="img" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="title">教育读本</div>
|
|
|
+ <div class="amount">
|
|
|
+ <span class="text">积分 99</span> <span class="num">x 1</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="have">
|
|
|
+ <span class="icon1"></span>
|
|
|
+ <span class="text">当前可用积分余额 100</span>
|
|
|
+ <span class="icon2"></span>
|
|
|
+ </div>
|
|
|
+ <div class="total">
|
|
|
+ <div class="text">合计：<span class="num">99积分</span></div>
|
|
|
+ <button>提交订单</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import ProductList from "../../components/ProductList";
|
|
|
+export default {
|
|
|
+ head() {
|
|
|
+ return {
|
|
|
+ title: "积分支付",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ images: [],
|
|
|
+ list: [],
|
|
|
+ loading: false, //加载状态
|
|
|
+ finished: false, //是否完成加载
|
|
|
+ refreshing: false, //是否正在上拉刷新
|
|
|
+ img: "/test/pro.png",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ ProductList,
|
|
|
+ },
|
|
|
+ beforeCreate() {},
|
|
|
+ created() {},
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {
|
|
|
+ console.log(this);
|
|
|
+ },
|
|
|
+ beforeUpdate() {},
|
|
|
+ updated() {},
|
|
|
+ beforeDestroy() {},
|
|
|
+ destroyed() {},
|
|
|
+ methods: {
|
|
|
+ // onLoad() {
|
|
|
+ // var that = this;
|
|
|
+ // that.$axios
|
|
|
+ // .get("/getIntegralWaresInfoList", {
|
|
|
+ // params: {
|
|
|
+ // stationId: "1",
|
|
|
+ // },
|
|
|
+ // })
|
|
|
+ // .then((res) => {
|
|
|
+ // if (res.data.retCode == 0) {
|
|
|
+ // that.list = res.data.data; //追加数据
|
|
|
+ // // 加载状态结束
|
|
|
+ // that.loading = false;
|
|
|
+ // that.finished = true;
|
|
|
+ // console.log(that.list);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // onRefresh() {
|
|
|
+ // // 清空列表数据
|
|
|
+ // that.finished = true;
|
|
|
+ // // 重新加载数据
|
|
|
+ // // 将 loading 设置为 true，表示处于加载状态
|
|
|
+ // that.loading = true;
|
|
|
+ // that.onLoad();
|
|
|
+ // },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.point-pay {
|
|
|
+ width: 100%;
|
|
|
+ background: #f8f8f8;
|
|
|
+}
|
|
|
+.point-pay .product {
|
|
|
+ height: 1.82rem;
|
|
|
+ background: #ffffff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0.3rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.point-pay .product .img {
|
|
|
+ width: 2rem;
|
|
|
+ height: 1.22rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0.2rem;
|
|
|
+}
|
|
|
+.point-pay .product .img img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.point-pay .product .content {
|
|
|
+ width: 5.9rem;
|
|
|
+}
|
|
|
+.point-pay .product .content .title {
|
|
|
+ display: block;
|
|
|
+ height: 0.45rem;
|
|
|
+ font-size: 0.32rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #0f0f0f;
|
|
|
+ line-height: 0.45rem;
|
|
|
+}
|
|
|
+.point-pay .product .content .amount {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.point-pay .product .content .amount .text {
|
|
|
+ height: 0.4rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 0.4rem;
|
|
|
+}
|
|
|
+.point-pay .product .content .amount .num {
|
|
|
+ height: 0.4rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 0.4rem;
|
|
|
+}
|
|
|
+
|
|
|
+.point-pay .have {
|
|
|
+ margin-top: 0.22rem;
|
|
|
+ height: 1.1rem;
|
|
|
+ background: #ffffff;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.point-pay .have .icon1 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.4rem;
|
|
|
+ height: 0.35rem;
|
|
|
+ background: url("../../static/point/jifen@2x.png") no-repeat 0 0;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0.39rem;
|
|
|
+ left: 0.3rem;
|
|
|
+}
|
|
|
+.point-pay .have .text {
|
|
|
+ height: 1.1rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #090909;
|
|
|
+ line-height: 1.1rem;
|
|
|
+ position: absolute;
|
|
|
+ left: 0.99rem;
|
|
|
+}
|
|
|
+.point-pay .have .icon2 {
|
|
|
+ display: inline-block;
|
|
|
+ width: 0.36rem;
|
|
|
+ height: 0.36rem;
|
|
|
+ background: url("../../static/point/xuanzhong@2x.png") no-repeat 0 0;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0.36rem;
|
|
|
+ top: 0.36rem;
|
|
|
+}
|
|
|
+.point-pay .total {
|
|
|
+ width: 7.5rem;
|
|
|
+ height: 1.98rem;
|
|
|
+ background: #ffffff;
|
|
|
+ opacity: 0.95;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left:0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content:flex-end;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding:.4rem;
|
|
|
+ align-items:center;
|
|
|
+}
|
|
|
+
|
|
|
+.point-pay .total .text{
|
|
|
+font-size: 0.28rem;
|
|
|
+font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+font-weight: 400;
|
|
|
+color: #111111;
|
|
|
+line-height: 0.4rem;
|
|
|
+
|
|
|
+}
|
|
|
+.point-pay .total .text .num{
|
|
|
+width: 1.17rem;
|
|
|
+height: 0.62rem;
|
|
|
+font-size: 0.44rem;
|
|
|
+font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+font-weight: 400;
|
|
|
+color: #111111;
|
|
|
+line-height: 0.62rem;
|
|
|
+}
|
|
|
+.point-pay .total button {
|
|
|
+ border: none;
|
|
|
+ background-color: transparent;
|
|
|
+ outline: none;
|
|
|
+ display: block;
|
|
|
+ width: 2.2rem;
|
|
|
+ height: 0.8rem;
|
|
|
+ background: #fe9700;
|
|
|
+ border-radius: 0.45rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 0.4rem;
|
|
|
+ margin-left:0.2rem;
|
|
|
+}
|
|
|
+</style>
|
Joe
