|
|
@@ -0,0 +1,383 @@
|
|
|
+<template>
|
|
|
+ <div class="submit">
|
|
|
+ <div class="pageTitle">{{ info.minter }}</div>
|
|
|
+ <div class="product">
|
|
|
+ <van-image width="74" height="104" :radius="6" :src="getImg(changeImgs(info.pic))" fit="cover" />
|
|
|
+ <div class="product-content">
|
|
|
+ <div class="text1">111</div>
|
|
|
+ <div class="no"></div>
|
|
|
+ <div class="price">¥11</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="input">
|
|
|
+ <div class="text1">请输入交易密码，验证信息</div>
|
|
|
+ <van-password-input :value="password" :focused="showKeyboard" @focus="showKeyboard = true" />
|
|
|
+ <!-- 数字键盘 -->
|
|
|
+ <van-number-keyboard v-model="password" :show="showKeyboard" @blur="showKeyboard = false" maxlength="6" />
|
|
|
+ <div class="text2">忘记密码？</div>
|
|
|
+ </div>
|
|
|
+ <div class="list">
|
|
|
+ <div class="info">
|
|
|
+ <div class="text1">GAS费用</div>
|
|
|
+ <div class="text2">¥11</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="pay">
|
|
|
+ <div class="pay-item" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
|
|
|
+ <img :src="item.icon" alt="" />
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ <img :src="payType === item.type ? icons[1] : icons[0]" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bottom van-safe-area-bottom" ref="bottom">
|
|
|
+ <div class="bottom-content">
|
|
|
+ <div class="btn1">
|
|
|
+ 取消
|
|
|
+ <!-- <van-button @click="submit" :disabled="orderId"> 取消 </van-button> -->
|
|
|
+ </div>
|
|
|
+ <div class="btn2" @click="submit">支付GAS费</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+const path = require('path');
|
|
|
+import { add } from 'mathjs';
|
|
|
+import product from '../mixins/product';
|
|
|
+let inWeixin = /micromessenger/i.test(navigator.userAgent);
|
|
|
+export default {
|
|
|
+ name: 'Submit',
|
|
|
+ mixins: [product],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ info: {},
|
|
|
+ message: '',
|
|
|
+ payType: inWeixin ? 'WEIXIN' : 'ALIPAY',
|
|
|
+ payInfos: [
|
|
|
+ {
|
|
|
+ icon: require('../assets/svgs/zhifubao.svg'),
|
|
|
+ name: '支付宝',
|
|
|
+ type: 'ALIPAY'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ icon: require('../assets/svgs/wechat.svg'),
|
|
|
+ name: '微信',
|
|
|
+ type: 'WEIXIN'
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // icon: require("../assets/svgs/png-decp.svg"),
|
|
|
+ // name: "DCEP",
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ icons: [require('../assets/svgs/icon_gouxuan_huise.svg'), require('../assets/svgs/icon_gouxuan_pre.svg')],
|
|
|
+ bottom: null,
|
|
|
+ orderId: 0,
|
|
|
+ gas: 1,
|
|
|
+ inWeixin
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // money() {
|
|
|
+ // if (this.info.price) {
|
|
|
+ // return add(this.info.price, this.gas);
|
|
|
+ // } else {
|
|
|
+ // return 0;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // mounted() {
|
|
|
+ // this.$http.get('/sysConfig/get/gas_fee').then(res => {
|
|
|
+ // this.gas = res.value;
|
|
|
+ // });
|
|
|
+ // this.$toast.loading({
|
|
|
+ // message: '加载中...',
|
|
|
+ // forbidClick: true
|
|
|
+ // });
|
|
|
+ // if (this.$route.query.id) {
|
|
|
+ // this.$http.get('/collection/get/' + this.$route.query.id).then(res => {
|
|
|
+ // this.info = res;
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$toast.clear();
|
|
|
+ // this.bs.value.refresh();
|
|
|
+ // }, 100);
|
|
|
+ // // this.$http('/sysConfig/get/gas_fee')
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // this.$http.get('/order/get/' + this.$route.query.orderId).then(res => {
|
|
|
+ // this.info = res;
|
|
|
+ // this.orderId = res.id;
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.bs.value.refresh();
|
|
|
+ // }, 100);
|
|
|
+ // this.$dialog
|
|
|
+ // .alert({
|
|
|
+ // title: '提示',
|
|
|
+ // message:
|
|
|
+ // res.status === 'NOT_PAID' || res.status === 'CANCELLED'
|
|
|
+ // ? '订单支付失败,点击重新下单'
|
|
|
+ // : '订单已支付,点击查看订单详情'
|
|
|
+ // })
|
|
|
+ // .then(() => {
|
|
|
+ // if (res.status === 'NOT_PAID' || res.status === 'CANCELLED') {
|
|
|
+ // this.$router.back();
|
|
|
+ // } else {
|
|
|
+ // this.$router.replace('/orderDetail?id' + res.id);
|
|
|
+ // }
|
|
|
+ // // on close
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // this.bottom = this.$refs.bottom;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ submit() {
|
|
|
+ // this.$toast.loading('加载中');
|
|
|
+ // this.$http
|
|
|
+ // .post('/order/create?collectionId=' + this.$route.query.id + '&qty=1')
|
|
|
+ // .then(res => {
|
|
|
+ // this.$toast.clear();
|
|
|
+ // this.orderId = res.id;
|
|
|
+ // this.$router.replace('/submit?orderId=' + res.id);
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ // if (this.payType === 'ALIPAY') {
|
|
|
+ // document.location.replace(path.resolve(this.$baseUrl, 'payOrder/alipay?id=' + res.id));
|
|
|
+ // } else if (this.payType === 'WEIXIN') {
|
|
|
+ // if (this.inWeixin) {
|
|
|
+ // this.$toast.loading('加载中');
|
|
|
+ // this.$http
|
|
|
+ // .post('/payOrder/weixin', { id: res.id, openId: localStorage.getItem('openId') })
|
|
|
+ // .then(res => {
|
|
|
+ // console.log({
|
|
|
+ // ...res,
|
|
|
+ // package: res.package || res.packageValue
|
|
|
+ // });
|
|
|
+ // let _this = this;
|
|
|
+ // wx.chooseWXPay({
|
|
|
+ // ...res,
|
|
|
+ // package: res.package || res.packageValue,
|
|
|
+ // timestamp: res.timeStamp,
|
|
|
+ // success(res) {
|
|
|
+ // _this.$toast.success('支付成功');
|
|
|
+ // setTimeout(() => {
|
|
|
+ // _this.$router.replace('/orders');
|
|
|
+ // }, 1000);
|
|
|
+ // },
|
|
|
+ // fail(e) {
|
|
|
+ // console.log(e);
|
|
|
+ // _this.$toast('支付失败，请稍后再试');
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // } else {
|
|
|
+ // document.location.replace(
|
|
|
+ // path.resolve(this.$baseUrl, 'payOrder/weixin_h5?id=' + res.id)
|
|
|
+ // );
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // })
|
|
|
+ // .catch(e => {
|
|
|
+ // if (e) {
|
|
|
+ // this.$toast(e.error);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.submit {
|
|
|
+ padding: 20px 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.pageTitle {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 22px;
|
|
|
+}
|
|
|
+.input {
|
|
|
+ margin-top: 20px;
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .text2 {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: right;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 60px;
|
|
|
+ border-bottom: 1px solid #202122;
|
|
|
+ .text1 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text2 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fdfb60;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text3 {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .van-password-input {
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 0 25px;
|
|
|
+ .van-password-input__security {
|
|
|
+ border: 1px solid #939599;
|
|
|
+ height: 42px;
|
|
|
+ border-radius: 2px;
|
|
|
+ li {
|
|
|
+ background-color: transparent;
|
|
|
+ &:not(:last-child) {
|
|
|
+ border-right: 1px solid #939599;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.product {
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 0 20px;
|
|
|
+ .product-content {
|
|
|
+ flex-grow: 1;
|
|
|
+ margin-left: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .no {
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 4px 0 8px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text1 {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/.van-field {
|
|
|
+ padding: 20px 0;
|
|
|
+ .van-field__label {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .van-field__control {
|
|
|
+ text-align: right;
|
|
|
+ color: #939599;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.pay-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 60px;
|
|
|
+ border-top: 1px solid #202122;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.bottom {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0px;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: @bg;
|
|
|
+ z-index: 20;
|
|
|
+ border-top: 1px solid #313233;
|
|
|
+
|
|
|
+ .bottom-content {
|
|
|
+ padding: 6px 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .btn1 {
|
|
|
+ width: 161px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 22px;
|
|
|
+ line-height: 44px;
|
|
|
+ color: #939599;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid #939599;
|
|
|
+ }
|
|
|
+ .btn2 {
|
|
|
+ width: 162px;
|
|
|
+ height: 44px;
|
|
|
+ line-height: 44px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ color: #333230;
|
|
|
+ background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
|
|
|
+ border-radius: 22px;
|
|
|
+ }
|
|
|
+ .van-button {
|
|
|
+ flex-grow: 1;
|
|
|
+ color: #333230 !important;
|
|
|
+ max-width: 210px;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 20px;
|
|
|
+ word-break: keep-all;
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ font-size: 34px;
|
|
|
+ font-family: OSP;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #fdfb60;
|
|
|
+ line-height: 34px;
|
|
|
+ // flex-grow: 1;
|
|
|
+ margin: 0 10px;
|
|
|
+ .font_family {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
