596 lines
14 KiB
Vue
596 lines
14 KiB
Vue
<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>
|