224 lines
5.2 KiB
Vue
224 lines
5.2 KiB
Vue
<template>
|
||
<view>
|
||
<navBar
|
||
navTitle=""
|
||
:hasLogo="true"
|
||
:backToUrl="'/pages/index/index'"
|
||
:isSwitchTab="true"
|
||
:color="'#000000'" :backBackGroundColor="'#3D553D'"
|
||
></navBar>
|
||
<view class="info">
|
||
<view class="head">
|
||
<view class="title">{{ $t("payInfo.title") }}</view>
|
||
<view class="user"
|
||
>{{ $t("payInfo.subtxt1") }}<span style="color:#699A70">{{ payInfo.buyerTel }}</span
|
||
>{{ $t("payInfo.subtxt2") }}</view
|
||
>
|
||
</view>
|
||
<view class="item">
|
||
<view class="min160">{{ $t("payInfo.confirmDate") }}：</view>
|
||
<view class="lable">{{ today }}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="min160">{{ $t("payInfo.buyerName") }}：</view>
|
||
<view class="lable">{{ payInfo.buyerName }}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="min160">{{ $t("payInfo.orderPrice") }}：</view>
|
||
<view class="lable">{{ payInfo.price }}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="min160">{{ $t("payInfo.artworkName") }}：</view>
|
||
<view class="lable">{{ payInfo.artworkName }}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="min160">{{ $t("payInfo.payTypeName") }}：</view>
|
||
<view class="lable">{{ payInfo.payTypeName }}</view>
|
||
</view>
|
||
<view class="item">
|
||
<view class="min160">{{ $t("payInfo.payImages") }}：</view>
|
||
<view class="imgBox">
|
||
<u--image
|
||
v-for="(item, index) in payInfo.payImages"
|
||
width="300rpx"
|
||
height="300rpx"
|
||
:key="index"
|
||
:src="item"
|
||
@click="privewImg(item)"
|
||
mode="scaleToFill"
|
||
></u--image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-button
|
||
:text="$t('comfrim')"
|
||
color="#699A70"
|
||
@click="comfirmPayment"
|
||
style="
|
||
width: 484rpx;
|
||
height: 56rpx;
|
||
border-radius: 40rpx;
|
||
margin-top: 60rpx;
|
||
"
|
||
></u-button>
|
||
<u-button
|
||
:text="$t('payment.cancel')"
|
||
color="#808080"
|
||
@click="cancelPayment"
|
||
style="
|
||
width: 484rpx;
|
||
height: 56rpx;
|
||
border-radius: 40rpx;
|
||
margin-top: 20rpx;
|
||
"
|
||
></u-button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
infoCode: "",
|
||
collectionsInfo: {},
|
||
payInfo: {},
|
||
today: "",
|
||
};
|
||
},
|
||
methods: {
|
||
// 获取核验码信息
|
||
async getCodeInfo() {
|
||
let data = {
|
||
code: this.infoCode,
|
||
};
|
||
let res = await this.$api.series.getQrcodeInfo(data);
|
||
if (res.status === 0) {
|
||
this.collectionsInfo = res.data.collections;
|
||
this.payInfo = res.data.pay;
|
||
} else {
|
||
uni.$u.toast(this.$t("load.failed"));
|
||
}
|
||
},
|
||
// 确认支付
|
||
async comfirmPayment() {
|
||
let data = {
|
||
code: this.infoCode,
|
||
};
|
||
let res = await this.$api.series.confirmPay(data);
|
||
if (res.status === 0) {
|
||
uni.$u.toast(this.$t("payment.confirmSuccess"));
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/index/index",
|
||
});
|
||
}, 2000);
|
||
} else {
|
||
uni.$u.toast(res.msg || this.$t("payment.failed"));
|
||
}
|
||
},
|
||
// 取消支付
|
||
async cancelPayment() {
|
||
let data = {
|
||
code: this.infoCode,
|
||
};
|
||
let res = await this.$api.series.cancelPay(data);
|
||
if (res.status === 0) {
|
||
uni.$u.toast(this.$t("payment.cancelSuccess"));
|
||
setTimeout(() => {
|
||
uni.switchTab({
|
||
url: "/pages/index/index",
|
||
});
|
||
}, 2000);
|
||
} else {
|
||
uni.$u.toast(res.msg || this.$t("payment.failed"));
|
||
}
|
||
},
|
||
// 预览图片
|
||
privewImg(url) {
|
||
uni.previewImage({
|
||
urls: [url],
|
||
});
|
||
},
|
||
},
|
||
|
||
onLoad: function (option) {
|
||
this.infoCode = option.code;
|
||
this.getCodeInfo();
|
||
// 获取今天的日期
|
||
let date = new Date();
|
||
let year = date.getFullYear();
|
||
let month = date.getMonth() + 1;
|
||
let day = date.getDate();
|
||
this.today = year + "年" + month + "月" + day + "日";
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
page {
|
||
background: url("@/static/image/home/new_bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
background-attachment: fixed;
|
||
height: 100vh;
|
||
box-sizing: border-box;
|
||
// border: 1px solid red;696.1123
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
.min160 {
|
||
min-width: 160rpx;
|
||
color: #434343;
|
||
}
|
||
// 居中
|
||
.info {
|
||
width: 600rpx;
|
||
height: 1100rpx;
|
||
margin-top: 60rpx;
|
||
border-radius: 8rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: #FFFFFF;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
overflow-y: scroll;
|
||
.head {
|
||
text-align: center;
|
||
}
|
||
.title {
|
||
margin-top: 44rpx;
|
||
font-size: 40rpx;
|
||
color: #434343;
|
||
}
|
||
.lable{
|
||
color: #878787;
|
||
}
|
||
.user {
|
||
font-size: 16rpx;
|
||
color: #878787;
|
||
margin-bottom: 66rpx;
|
||
}
|
||
.content {
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 40rpx;
|
||
}
|
||
.item {
|
||
font-size: 30upx;
|
||
width: 400rpx;
|
||
display: flex;
|
||
margin-bottom: 40upx;
|
||
.imgBox {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
border: 1px solid #fff;
|
||
margin-left: 20rpx;
|
||
}
|
||
.image {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
}
|
||
}
|
||
}
|
||
</style>
|