|
|
<template>
|
|
|
<view>
|
|
|
<navBar
|
|
|
navTitle=""
|
|
|
:hasLogo="true"
|
|
|
:color="'#000000'"
|
|
|
:backBackGroundColor="'rgb(105, 154, 112)'"
|
|
|
></navBar>
|
|
|
<view class="goods">
|
|
|
<image :src="collection.CollectionImg" mode=""></image>
|
|
|
<view class="right">
|
|
|
<view class="title">{{ collection.Name }}</view>
|
|
|
<text style="font-size: 30rpx" class="price">
|
|
|
￥
|
|
|
<text style="font-size: 48rpx; font-weight: 600" class="price">{{
|
|
|
collection.Price.toFixed(2)
|
|
|
}}</text>
|
|
|
</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="pay">
|
|
|
<!-- <u-radio-group v-model="payType" style="width: 100%">
|
|
|
<view class="item" v-for="(item, index) in list" :key="index">
|
|
|
<view class="left">
|
|
|
<image :src="item.icon"></image>
|
|
|
{{ item.name }}
|
|
|
</view>
|
|
|
<u-radio :name="item.id" active-color="#07C160"></u-radio>
|
|
|
</view>
|
|
|
</u-radio-group> -->
|
|
|
<view class="item">
|
|
|
<view class="min200">{{ $t("payInfo.buyerName") }}</view>
|
|
|
<view class="value">{{ nickName }}</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="min200">{{ $t("payInfo.orderPrice") }}</view>
|
|
|
<view class="value">{{ collection.Price }}</view>
|
|
|
</view>
|
|
|
<view class="item">
|
|
|
<view class="min200">{{ $t("payInfo.typePrice") }}</view>
|
|
|
<!-- <view>{{ payTypeName }}</view> -->
|
|
|
<view>
|
|
|
<payComponet @payModeHandel="payModeHandel" />
|
|
|
</view>
|
|
|
<!-- <u-input
|
|
|
v-model="payTypeName"
|
|
|
shape="circle"
|
|
|
border="none"
|
|
|
class="login-input"
|
|
|
></u-input> -->
|
|
|
</view>
|
|
|
<view class="item" v-show="payTypeName === '央行数字人民币'">
|
|
|
<view class="min200">{{ $t("payInfo.payImages") }}</view>
|
|
|
<view
|
|
|
><u-upload
|
|
|
:fileList="fileList"
|
|
|
@afterRead="afterRead"
|
|
|
@delete="deletePic"
|
|
|
multiple
|
|
|
:previewFullImage="true"
|
|
|
></u-upload
|
|
|
></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
style="text-align: center; color: #699a70"
|
|
|
v-if="payTypeName === '央行数字人民币'"
|
|
|
>{{ $t("payInfo.salesperson") }}
|
|
|
</view>
|
|
|
<view class="online-pay" v-else>
|
|
|
<view class="mode">请选择线上支付方式</view>
|
|
|
<view class="line"></view>
|
|
|
|
|
|
<u-radio-group v-model="value">
|
|
|
<u-radio>
|
|
|
<view class="mode-pay">
|
|
|
<image
|
|
|
src="@/static/image/home/money.png"
|
|
|
mode="scaleToFill"
|
|
|
class="img"
|
|
|
/>
|
|
|
<view class="text">数字人名币</view>
|
|
|
</view>
|
|
|
</u-radio>
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
<view class="navigation">
|
|
|
<view class="left">
|
|
|
<view class="price">
|
|
|
<text>{{ $t("comfirm.total") }}：</text>
|
|
|
<text>￥</text>
|
|
|
<text style="font-size: 46rpx">{{
|
|
|
collection.Price.toFixed(2)
|
|
|
}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="right"
|
|
|
><u-button class="btn" @click="showCode" :disabled="!uploadFlag">{{
|
|
|
$t("confirm.payment")
|
|
|
}}</u-button>
|
|
|
</view>
|
|
|
<!-- <u-button :text="$t('comfirm.pay')" @click="showCode" :disabled="!uploadFlag" style="
|
|
|
width: 484rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 40rpx;
|
|
|
margin-top: 30rpx;
|
|
|
background: rgba(252, 73, 71, 1);
|
|
|
border-color: #3e3e3e;
|
|
|
color: #fff;
|
|
|
"></u-button> -->
|
|
|
</view>
|
|
|
<u-popup :show="show" @close="show = false" mode="center">
|
|
|
<view>
|
|
|
<view class="pop-title">{{ $t("payInfo.waitConfirm") }}</view>
|
|
|
<view class="codebox">
|
|
|
<img :src="qrCode" />
|
|
|
</view>
|
|
|
<u-button
|
|
|
:text="$t('comfirm.copy')"
|
|
|
color="#699A70"
|
|
|
@click="copyCode"
|
|
|
style="
|
|
|
width: 484rpx;
|
|
|
height: 56rpx;
|
|
|
border-radius: 40rpx;
|
|
|
margin-top: 30rpx;
|
|
|
"
|
|
|
></u-button>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import payComponet from "pages/index/comfirm/payComponet/payComponet";
|
|
|
export default {
|
|
|
components: {
|
|
|
payComponet,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
list: [
|
|
|
{
|
|
|
id: 0,
|
|
|
name: this.$t("alipay.payment"),
|
|
|
icon: "/static/image/home/zhifubao.png",
|
|
|
},
|
|
|
// {id: 1, name: '微信支付', icon:'/static/image/home/weixin.png'},
|
|
|
],
|
|
|
show: false,
|
|
|
numTotal: 1,
|
|
|
payType: 0,
|
|
|
collection: {},
|
|
|
fileList: [],
|
|
|
payTypeName: "央行数字人民币", // 暂时去除线上支付
|
|
|
nickName: "",
|
|
|
qrCode: "",
|
|
|
codeSec: "",
|
|
|
// 完成上传flag
|
|
|
uploadFlag: false,
|
|
|
value: "",
|
|
|
};
|
|
|
},
|
|
|
onLoad: function (option) {
|
|
|
this.collection = JSON.parse(decodeURIComponent(option.Collection));
|
|
|
// 从localStorage中获取用户昵称
|
|
|
this.nickName = uni.getStorageSync("mall-user-info").nickName;
|
|
|
console.log(this.nickName, "nickName");
|
|
|
},
|
|
|
// 监听文件列表，如果长度小于1，禁用提交按钮
|
|
|
watch: {
|
|
|
fileList: function (val) {
|
|
|
if (val.length < 1) {
|
|
|
this.uploadFlag = false;
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
methods: {
|
|
|
// 将二维码内容复制到剪贴板
|
|
|
copyCode() {
|
|
|
uni.setClipboardData({
|
|
|
data: this.codeSec,
|
|
|
success: (res) => {
|
|
|
uni.showToast({
|
|
|
title: "复制成功",
|
|
|
icon: "success",
|
|
|
duration: 2000,
|
|
|
});
|
|
|
},
|
|
|
fail: (res) => {
|
|
|
uni.showToast({
|
|
|
title: "复制失败",
|
|
|
icon: "none",
|
|
|
duration: 2000,
|
|
|
});
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
async submit() {
|
|
|
let res = await this.$api.series.buy({
|
|
|
collectionsUID: this.collection.CollectionUID,
|
|
|
});
|
|
|
if (res.status === 0) {
|
|
|
// window.location.href = res.data.Url
|
|
|
uni.requestPayment({
|
|
|
provider: "alipay",
|
|
|
orderInfo: res.data.AppParams,
|
|
|
success: (result) => {
|
|
|
console.log(result, "成功回调");
|
|
|
let rawdata = JSON.parse(result.rawdata);
|
|
|
let outTradeNo = JSON.parse(rawdata.result)
|
|
|
.alipay_trade_app_pay_response.out_trade_no;
|
|
|
this.toFinish(outTradeNo);
|
|
|
},
|
|
|
fail: (error) => {},
|
|
|
});
|
|
|
} else if (res.status === 401) {
|
|
|
uni.navigateTo({
|
|
|
url: "/pages/login/login",
|
|
|
});
|
|
|
uni.clearStorageSync();
|
|
|
} else {
|
|
|
uni.hideLoading();
|
|
|
uni.$u.toast(res.msg);
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 删除图片
|
|
|
deletePic(event) {
|
|
|
this[`fileList`].splice(event.index, 1);
|
|
|
},
|
|
|
async afterRead(event) {
|
|
|
// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
|
|
|
let lists = [].concat(event.file);
|
|
|
let fileListLen = this[`fileList`].length;
|
|
|
lists.map((item) => {
|
|
|
this[`fileList`].push({
|
|
|
...item,
|
|
|
status: "uploading",
|
|
|
message: "上传中",
|
|
|
});
|
|
|
});
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
|
const result = await this.uploadFilePromise(lists[i].url);
|
|
|
console.log(result, "result");
|
|
|
let item = this[`fileList`][fileListLen];
|
|
|
this[`fileList`].splice(
|
|
|
fileListLen,
|
|
|
1,
|
|
|
Object.assign(item, {
|
|
|
status: "success",
|
|
|
message: "",
|
|
|
url: result,
|
|
|
})
|
|
|
);
|
|
|
fileListLen++;
|
|
|
}
|
|
|
},
|
|
|
uploadFilePromise(url) {
|
|
|
return new Promise((resolve, reject) => {
|
|
|
const Authorization = uni.getStorageSync("token");
|
|
|
const userId = uni.getStorageSync("mall-user-info").ID;
|
|
|
let a = uni.uploadFile({
|
|
|
url: this.$baseUrl + "/mall/upload/file",
|
|
|
filePath: url,
|
|
|
name: "file",
|
|
|
formData: {
|
|
|
type: "image",
|
|
|
source: "user",
|
|
|
mask: userId,
|
|
|
},
|
|
|
header: {
|
|
|
Authorization,
|
|
|
},
|
|
|
success: (res) => {
|
|
|
console.log(res, "res");
|
|
|
res.data = JSON.parse(res.data);
|
|
|
resolve(res.data.data.ori_url);
|
|
|
this.uploadFlag = true;
|
|
|
},
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
// 支付成功跳转
|
|
|
async toFinish(tradeno) {
|
|
|
let res = await this.$api.mine.paymentDetail({
|
|
|
outTradeNo: tradeno,
|
|
|
});
|
|
|
if (res.status === 0) {
|
|
|
console.log(res);
|
|
|
// uni.$u.toast('支付成功');
|
|
|
setTimeout(() => {
|
|
|
uni.navigateTo({
|
|
|
url:
|
|
|
"/pages/index/payment/payment?artworkUid=" +
|
|
|
res.data.pay.artworkUid +
|
|
|
"&ID=" +
|
|
|
res.data.pay.ID,
|
|
|
});
|
|
|
}, 1000);
|
|
|
} else {
|
|
|
uni.hideLoading();
|
|
|
uni.$u.toast(res.msg);
|
|
|
}
|
|
|
},
|
|
|
// 打开二维码
|
|
|
async showCode() {
|
|
|
// 生成二维码
|
|
|
console.log(this.fileList, "fileList");
|
|
|
if (!this.payTypeName) {
|
|
|
uni.$u.toast(this.$t("payInfo.typePrice"));
|
|
|
return;
|
|
|
}
|
|
|
let res = await this.$api.series.createQrcode({
|
|
|
collectionsUID: this.collection.CollectionUID,
|
|
|
payTypeName: this.payTypeName,
|
|
|
payImages: this.fileList.map((item) => item.url),
|
|
|
});
|
|
|
if (res.status === 0) {
|
|
|
this.qrCode = res.data.Code;
|
|
|
this.codeSec = res.data.CodeSc;
|
|
|
this.show = true;
|
|
|
} else {
|
|
|
uni.$u.toast(res.msg);
|
|
|
}
|
|
|
},
|
|
|
payModeHandel(mode) {
|
|
|
this.payTypeName = mode === "线下支付" ? "央行数字人民币" : mode;
|
|
|
console.log(this.payTypeName);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background: url("@/static/image/home/new_bg.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-attachment: fixed;
|
|
|
height: 100vh;
|
|
|
}
|
|
|
|
|
|
/deep/ .u-radio {
|
|
|
width: 550rpx;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.online-pay {
|
|
|
margin: 40rpx 45rpx;
|
|
|
background: #ffffff;
|
|
|
border-radius: 8rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
height: 190rpx;
|
|
|
|
|
|
.mode {
|
|
|
color: #699a70;
|
|
|
font-size: 28rpx;
|
|
|
margin-top: 30rpx;
|
|
|
margin-bottom: 22rpx;
|
|
|
}
|
|
|
|
|
|
.line {
|
|
|
width: 568rpx;
|
|
|
height: 0.5rpx;
|
|
|
background: #9dd0a4;
|
|
|
}
|
|
|
|
|
|
.mode-pay {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
// margin-top: 30rpx;
|
|
|
|
|
|
.img {
|
|
|
width: 26rpx;
|
|
|
height: 26rpx;
|
|
|
margin-right: 4rpx;
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
color: #434343;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.goods {
|
|
|
margin: 40rpx 45rpx;
|
|
|
background: #ffffff;
|
|
|
border-radius: 8rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding: 40rpx 22rpx;
|
|
|
|
|
|
image {
|
|
|
width: 228rpx;
|
|
|
height: 228rpx;
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
margin-left: 20rpx;
|
|
|
|
|
|
.title {
|
|
|
font-size: 32rpx;
|
|
|
margin-bottom: 10rpx;
|
|
|
color: #878787;
|
|
|
}
|
|
|
|
|
|
.price {
|
|
|
color: #699a70;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.min200 {
|
|
|
min-width: 200rpx;
|
|
|
color: #434343;
|
|
|
}
|
|
|
|
|
|
.value {
|
|
|
color: #878787;
|
|
|
}
|
|
|
|
|
|
.login-input {
|
|
|
height: 68upx;
|
|
|
background-color: rgba(255, 255, 255, 0.6);
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
/deep/ .uni-input-placeholder {
|
|
|
padding: 0 20rpx;
|
|
|
}
|
|
|
|
|
|
/deep/ .uni-input-input {
|
|
|
color: #fff;
|
|
|
padding: 0 20rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pay {
|
|
|
margin: 40rpx 45rpx;
|
|
|
background: #ffffff;
|
|
|
border-radius: 8rpx;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
padding: 20rpx 22rpx;
|
|
|
|
|
|
.item {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
// justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin: 10rpx 0;
|
|
|
margin-bottom: 30upx;
|
|
|
|
|
|
.left {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
image {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
border-radius: 50%;
|
|
|
margin-right: 20rpx;
|
|
|
background: #fff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.navigation {
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
z-index: 10;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
margin-top: 100rpx;
|
|
|
background: #ffffff;
|
|
|
padding: 30rpx 16rpx 30rpx 10rpx;
|
|
|
|
|
|
.left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 20rpx;
|
|
|
margin-left: 30rpx;
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
.num {
|
|
|
width: 84rpx;
|
|
|
color: #878787;
|
|
|
margin-right: 10rpx;
|
|
|
font-size: 24rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.price {
|
|
|
flex: 1;
|
|
|
color: #434343;
|
|
|
|
|
|
text:nth-child(1) {
|
|
|
// color: #000000;
|
|
|
font-size: 24rpx;
|
|
|
}
|
|
|
|
|
|
text:nth-child(2) {
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
text:nth-child(3) {
|
|
|
font-size: 60rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.right {
|
|
|
display: flex;
|
|
|
justify-content: flex-end;
|
|
|
padding-right: 40rpx;
|
|
|
|
|
|
.btn {
|
|
|
width: 258rpx;
|
|
|
height: 56rpx;
|
|
|
line-height: 56rpx;
|
|
|
background: #699a70;
|
|
|
border-radius: 40rpx;
|
|
|
color: #ffffff;
|
|
|
text-align: center;
|
|
|
border: none;
|
|
|
// background-color: $tree-theme-color;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
/deep/ .u-upload__button {
|
|
|
background-color: #878787;
|
|
|
}
|
|
|
|
|
|
/deep/ .u-popup__content {
|
|
|
background-color: #3e3e3e !important;
|
|
|
width: 700upx !important;
|
|
|
height: 880upx !important;
|
|
|
display: flex !important;
|
|
|
align-items: center !important;
|
|
|
|
|
|
.pop-title {
|
|
|
font-size: 40upx;
|
|
|
color: #699a70;
|
|
|
text-align: center;
|
|
|
margin-bottom: 80upx;
|
|
|
margin-top: 70upx;
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
width: 520upx;
|
|
|
height: 520upx;
|
|
|
}
|
|
|
|
|
|
.codebox {
|
|
|
width: 570upx;
|
|
|
height: 570upx;
|
|
|
background-color: #fff;
|
|
|
border-radius: 10upx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
}
|
|
|
</style>
|