632 lines
16 KiB
Vue
632 lines
16 KiB
Vue
<template>
|
|
<view>
|
|
<u-navbar :autoBack="true" leftIconColor="#fff" bgColor="rgb(75,178,46)" title="购买记录" :placeholder="true" :titleStyle="{
|
|
fontWeight: '700',
|
|
color: '#fff'
|
|
}">
|
|
</u-navbar>
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
|
|
<view class="listBox">
|
|
<view v-for="(order, index) in dataList" :key="index" class="listBoxCard">
|
|
<view class="content">
|
|
<view>
|
|
<text>类型:</text>
|
|
<text>{{ order.investmentTypeName }}</text>
|
|
</view>
|
|
<view>
|
|
<text>购买数量:</text>
|
|
<text>{{ order.assetCount }}</text>
|
|
</view>
|
|
<view>
|
|
<text>开始月数:</text>
|
|
<text>{{order.updateTime}}</text>
|
|
</view>
|
|
<!-- <view>
|
|
<text>6个月后预计收益:</text>
|
|
<text>{{ order.investmentMonthIncome }}</text>
|
|
</view>
|
|
<view>
|
|
<text>三年预计收入:</text>
|
|
<text>{{ order.investmentPredictIncome }}</text>
|
|
</view> -->
|
|
<view v-if="order.isPay != 0">
|
|
<text>购买现金支付金额:</text>
|
|
<text>{{ order.payPrice }}</text>
|
|
</view>
|
|
<view>
|
|
<text>订单号:</text>
|
|
<view class="flex">
|
|
<view>{{ order.orderNo }}</view>
|
|
<image style="width: 32upx;height: 32upx;margin-left: 10upx;" src="@/static/indexIMG/copyImg.png"
|
|
@click="copyCode(order.orderNo)" />
|
|
</view>
|
|
</view>
|
|
<!-- <view v-if="order.isPay != 0">
|
|
<text>绿色积分支付数量:</text>
|
|
<text>{{ order.investmentLsjfPay }}</text>
|
|
</view>
|
|
<view v-if="order.isPay != 0">
|
|
<text>打赏比例:</text>
|
|
<text>{{ order.investmentRewardRatio }}</text>
|
|
</view> -->
|
|
<view>
|
|
<text>购买时间:</text>
|
|
<text>{{ order.payTime }}</text>
|
|
</view>
|
|
<view>
|
|
<text>备注:</text>
|
|
<text>{{ order.note }}</text>
|
|
</view>
|
|
<view v-if="
|
|
order.contractSign == null">
|
|
<text>签署合同:</text>
|
|
<text class="linkText" @click="handlerSign(order)">生成合同</text>
|
|
</view>
|
|
<view v-if="order.contractSign != null">
|
|
<text>签署合同:</text>
|
|
<text class="linkText" v-if="order.contractSign.contractUrl == null && order.contractSign.contractType != 2" @click="handleSign(order.contractSign)">发起签署</text>
|
|
<uni-link class="uniLink" style="color: black" v-if="order.contractSign.contractUrl != null && order.contractSign.contractType == 1" :href="
|
|
order.contractSign.status === '1'
|
|
? order.contractSign.contractUrl
|
|
: order.contractSign.contractViewUrl
|
|
" :text="order.contractSign.status === '1' ? '待签署' : '已签署'">
|
|
</uni-link>
|
|
<text class="paperContract" v-if="order.contractSign.contractType == 2">已选择纸质合同</text>
|
|
</view>
|
|
</view>
|
|
<view class="flex1">
|
|
<button class="button" style="margin-top: 20upx; background-color: #4bb22e; color: #fff">
|
|
已支付
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-body>
|
|
<neil-modal :show="show" :title="title" @cancel="show = false" @confirm="onConfirm"></neil-modal>
|
|
<u-modal duration="100" width="640rpx" confirmColor="#576B95" cancelColor="#000000" :closeOnClickOverlay="true" :showCancelButton="true"
|
|
confirmText="确认支付" @confirm="handelerConfirm" @cancel="showModal = false" @close="showModal = false" :show="showModal">
|
|
<view class="slot-content">
|
|
<view class="title">输入验证码</view>
|
|
<!-- <u-gap height="32rpx"></u-gap> -->
|
|
<view class="tips"> 我们已发送短信验证码到您的手机号 </view>
|
|
<view class="tips">
|
|
{{ userInfo.mobile }}
|
|
</view>
|
|
<u-gap height="32rpx"></u-gap>
|
|
<u-code-input :focus="showModal" color="#000000" fontSize="56rpx" :bold="true" borderColor="#ff7000" v-model="value"></u-code-input>
|
|
<u-gap height="32rpx"></u-gap>
|
|
<view class="btn_send" :class="timer != null ? 'btn_send_dis' : ''" @click="handlerSend">{{ text }}
|
|
</view>
|
|
</view>
|
|
</u-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
|
import neilModal from "@/components/neil-modal/neil-modal.vue";
|
|
import {
|
|
getMyInvestmentRecordList
|
|
} from "@/api/system/type.js";
|
|
import {
|
|
cancleOrder,
|
|
payInvestmentRecord,
|
|
signContract,
|
|
getMyAuthentication,
|
|
createContract,
|
|
} from "@/api/system/user.js";
|
|
import {
|
|
getRecordList,signContract2411Api
|
|
} from "@/api/system/api.js";
|
|
import {
|
|
authenticationApi
|
|
} from "@/api/system/api.js";
|
|
import {
|
|
sendMobileCode
|
|
} from "@/api/login";
|
|
import user from "../../../store/modules/user";
|
|
import {
|
|
dateFormat
|
|
} from "@/utils/tools";
|
|
export default {
|
|
mixins: [MescrollMixin], // 使用mixin
|
|
components: {
|
|
neilModal,
|
|
},
|
|
data() {
|
|
return {
|
|
// 列表数据
|
|
quYv: '',
|
|
dataList: [],
|
|
show: false,
|
|
title: "您确定要支付吗?",
|
|
showModal: false,
|
|
timer: null,
|
|
value: "",
|
|
text: "重新发送",
|
|
count: "",
|
|
order: {},
|
|
userInfo: JSON.parse(uni.getStorageSync("App-UserInfo")),
|
|
sign: {
|
|
recordCode: null,
|
|
},
|
|
};
|
|
},
|
|
filters: {
|
|
replayTime(date) {
|
|
return dateFormat("yyyy-MM-dd hh:mm:ss", new Date(date));
|
|
},
|
|
},
|
|
onLoad(options) {
|
|
if (options && options.quYv) {
|
|
this.quYv = options.quYv
|
|
}
|
|
},
|
|
mounted() {
|
|
console.log(this.userInfo);
|
|
},
|
|
methods: {
|
|
async upCallback() {
|
|
const ret = await getRecordList();
|
|
this.mescroll.endByPage(0, 0);
|
|
this.dataList = ret
|
|
},
|
|
downCallback() {
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
onConfirm() {
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
this.handlerSend();
|
|
},
|
|
handlerPay(order) {
|
|
// this.show = true;
|
|
// this.order = order;
|
|
uni.showModal({
|
|
title: "温馨提示",
|
|
content: "您确定要支付吗?",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
console.log("用户点击确定");
|
|
// this.show = true;
|
|
this.order = order;
|
|
this.onConfirm();
|
|
} else if (res.cancel) {
|
|
console.log("用户点击取消");
|
|
}
|
|
},
|
|
});
|
|
},
|
|
copyCode(data1) {
|
|
// #ifdef H5
|
|
let tempInput = document.createElement("input");
|
|
tempInput.type = "text";
|
|
tempInput.id = "copyTempInput";
|
|
tempInput.value = data1;
|
|
tempInput.style.width = "1px";
|
|
tempInput.style.height = "1px";
|
|
tempInput.style.opacity = 0.1;
|
|
document.body.appendChild(tempInput);
|
|
tempInput.select();
|
|
document.execCommand("Copy");
|
|
uni.showToast({
|
|
title: "复制成功",
|
|
});
|
|
setTimeout(() => {
|
|
tempInput.remove();
|
|
}, 2000);
|
|
// #endif
|
|
/**
|
|
* 小程序端 和 app端的复制逻辑
|
|
*/
|
|
//#ifndef H5
|
|
let content = data1
|
|
|
|
uni.setClipboardData({
|
|
data: data1,
|
|
success: function() {
|
|
uni.showToast({
|
|
title: "复制成功",
|
|
});
|
|
},
|
|
fail: function(err) {
|
|
console.log(err, 'err')
|
|
}
|
|
});
|
|
//#endif
|
|
},
|
|
async handlerSign(order) {
|
|
// 显示合同类型选择对话框
|
|
uni.showActionSheet({
|
|
itemList: ['电子合同', '纸质合同'],
|
|
success: (res) => {
|
|
const contractType = res.tapIndex === 0 ? 1 : 2; // 0-电子合同(1), 1-纸质合同(2)
|
|
|
|
// 确认选择
|
|
uni.showModal({
|
|
title: '确认选择',
|
|
content: `您选择了${res.tapIndex === 0 ? '电子合同' : '纸质合同'}，是否确认？`,
|
|
success: (confirmRes) => {
|
|
if (confirmRes.confirm) {
|
|
this.processContractSign(order, contractType);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
},
|
|
|
|
async processContractSign(order, contractType) {
|
|
if (this.quYv == 7) {
|
|
// let res = await authenticationApi();
|
|
let res = {status: '1'}
|
|
if (res.status == '1') {
|
|
try {
|
|
await signContract2411Api(order.orderNo, contractType)
|
|
if (contractType == 2) {
|
|
uni.showToast({
|
|
icon: "success",
|
|
title: "纸质合同签署完成",
|
|
});
|
|
this.upCallback();
|
|
} else if (contractType == 1) {
|
|
uni.showToast({
|
|
icon: "success",
|
|
title: "电子合同签署完成",
|
|
success: () => {
|
|
setTimeout(() => {
|
|
this.upCallback();
|
|
}, 1000);
|
|
}
|
|
});
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "合同签署失败",
|
|
});
|
|
}
|
|
//审核完成
|
|
// if (order && order.contractType === 2) {
|
|
// // 纸质合同，直接完成签署
|
|
// uni.showToast({
|
|
// icon: "success",
|
|
// title: "纸质合同签署完成",
|
|
// success: () => {
|
|
// setTimeout(() => {
|
|
// this.upCallback();
|
|
// }, 1000);
|
|
// }
|
|
// });
|
|
// } else {
|
|
// // 电子合同，保持原有逻辑
|
|
// try {
|
|
// await signContract2411Api(order.orderNo)
|
|
// uni.showToast({
|
|
// icon: "success",
|
|
// title: "电子合同签署完成",
|
|
// success: () => {
|
|
// setTimeout(() => {
|
|
// this.upCallback();
|
|
// }, 1000);
|
|
// }
|
|
// });
|
|
// } catch (e) {
|
|
// uni.showToast({
|
|
// icon: "none",
|
|
// title: "电子合同签署失败",
|
|
// });
|
|
// }
|
|
// }
|
|
} else if (res.status == '0') {
|
|
this.$modal.msgError("实名认证正在审核，请耐心等待");
|
|
} else {
|
|
this.$modal.msgError("请先去进行实名认证");
|
|
this.$tab.navigateTo("/pages/mine/authentication/index");
|
|
}
|
|
return;
|
|
} else {
|
|
getMyAuthentication().then((res) => {
|
|
console.log(res, "res22");
|
|
if (res.code == 200 && res.data && res.data.status == 1) {
|
|
console.log(order.investmentCode, "code");
|
|
this.sign.recordCode = order.investmentCode;
|
|
this.sign.contractType = contractType; // 添加合同类型字段
|
|
|
|
if (contractType === 2) {
|
|
// 纸质合同，直接完成签署
|
|
uni.showToast({
|
|
icon: "success",
|
|
title: "纸质合同签署完成",
|
|
success: () => {
|
|
setTimeout(() => {
|
|
this.upCallback();
|
|
}, 1000);
|
|
}
|
|
});
|
|
} else {
|
|
// 电子合同，保持原有逻辑
|
|
createContract(this.sign).then((response) => {
|
|
if (response.code == 200) {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "生成合同成功",
|
|
success: () => {
|
|
setTimeout(() => {
|
|
this.upCallback();
|
|
}, 1000);
|
|
},
|
|
});
|
|
} else {
|
|
this.$modal.msgError(res.msg);
|
|
}
|
|
});
|
|
}
|
|
} else if (res.code == 200 && res.data && res.data.status == 0) {
|
|
this.$modal.msgError("实名认证正在审核，请耐心等待");
|
|
} else {
|
|
this.$modal.msgError("请先去进行实名认证");
|
|
this.$tab.navigateTo("/pages/mine/authentication/index");
|
|
}
|
|
});
|
|
}
|
|
},
|
|
handlerCancle(order) {
|
|
uni.showModal({
|
|
title: "提示",
|
|
content: "确定取消该订单",
|
|
cancelText: "取消",
|
|
confirmText: "确定",
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
this.cancleOrder(order);
|
|
} else if (res.cancel) {
|
|
console.log("用户点击取消");
|
|
}
|
|
},
|
|
});
|
|
},
|
|
async cancleOrder(order) {
|
|
let res = await cancleOrder({
|
|
recordCode: order.investmentCode,
|
|
});
|
|
if (res.code == 200) {
|
|
this.show = false;
|
|
this.$toast("取消成功", () => {
|
|
this.upCallback();
|
|
});
|
|
}
|
|
},
|
|
handelerConfirm() {
|
|
uni.$u.debounce(() => {
|
|
let {
|
|
order,
|
|
value,
|
|
userInfo
|
|
} = this.$data;
|
|
if (value == "")
|
|
return uni.showToast({
|
|
icon: "none",
|
|
title: "请输入验证码！",
|
|
});
|
|
if (value.length != 6)
|
|
return uni.showToast({
|
|
icon: "none",
|
|
title: "请输入正确的验证码！",
|
|
});
|
|
uni.showLoading({
|
|
title: "加载中",
|
|
mask: true,
|
|
});
|
|
this.showModal = false;
|
|
payInvestmentRecord({
|
|
investmentRecordCode: order.investmentCode,
|
|
phone: userInfo.mobile,
|
|
phoneCode: value,
|
|
})
|
|
.then((res) => {
|
|
uni.hideLoading();
|
|
let {
|
|
code,
|
|
msg
|
|
} = res;
|
|
this.upCallback();
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: msg,
|
|
});
|
|
})
|
|
.catch(() => uni.hideLoading());
|
|
}, 500, true);
|
|
},
|
|
async handleSign(contractSign) {
|
|
console.log(contractSign);
|
|
if (contractSign.contractUrl == null) {
|
|
let res = await signContract({
|
|
contractId: contractSign.id,
|
|
});
|
|
if (res.code == 200) {
|
|
this.upCallback();
|
|
}
|
|
}
|
|
},
|
|
handlerSend() {
|
|
if (this.count != 0) {
|
|
uni.hideLoading();
|
|
return (this.showModal = true);
|
|
}
|
|
sendMobileCode({
|
|
mobile: this.userInfo.mobile,
|
|
})
|
|
.then((res) => {
|
|
uni.hideLoading();
|
|
if (res.code == 200) {
|
|
if (!this.showModal) this.showModal = true;
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "验证码发送成功！",
|
|
});
|
|
// this.$toast("验证码发送成功");
|
|
const TIME_COUNT = 60;
|
|
this.count = TIME_COUNT;
|
|
|
|
this.timer = setInterval(() => {
|
|
if (this.count > 0 && this.count <= TIME_COUNT) {
|
|
this.count--;
|
|
this.text = this.count + "后重新发送";
|
|
} else {
|
|
this.text = "重新发送";
|
|
clearInterval(this.timer);
|
|
this.timer = null;
|
|
}
|
|
}, 1000);
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: res.msg,
|
|
});
|
|
}
|
|
})
|
|
.catch(() => uni.hideLoading());
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.listBox {
|
|
box-sizing: border-box;
|
|
padding: 20upx;
|
|
padding-top: 0;
|
|
|
|
.listBoxCard {
|
|
margin-top: 20upx;
|
|
background-color: #fff;
|
|
border-radius: 10upx;
|
|
box-sizing: border-box;
|
|
padding: 20upx;
|
|
|
|
.content {
|
|
view {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: 20rpx;
|
|
|
|
text:nth-child(1) {
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
min-width: 200rpx;
|
|
}
|
|
|
|
text:nth-last-child(1) {
|
|
color: #000;
|
|
font-weight: 500;
|
|
word-break: break-all;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.slot-content {
|
|
.title {
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: rgba(0, 0, 0, 0.9);
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.tips {
|
|
text-align: center;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.btn_send {
|
|
color: #ff7000;
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
text-decoration-line: underline;
|
|
}
|
|
|
|
.btn_send_dis {
|
|
color: #999999;
|
|
text-decoration-line: none;
|
|
}
|
|
}
|
|
|
|
.button {
|
|
flex: 1;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.linkText {
|
|
width: 170rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
//margin-top: 3rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 25px;
|
|
border: 3rpx solid #6699ff;
|
|
color: #206aff !important;
|
|
font-weight: 600;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.uniLink {
|
|
width: 170rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-radius: 25px;
|
|
border: 3rpx solid #50a155;
|
|
background-color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.paperContract {
|
|
width: 230rpx;
|
|
height: 40rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
border-radius: 25px;
|
|
border: 3rpx solid #666;
|
|
color: #333333 !important;
|
|
background-color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/deep/.u-code-input__item {
|
|
width: 80rpx !important;
|
|
height: 96rpx !important;
|
|
border-radius: 8rpx;
|
|
background: rgba(255, 112, 0, 0.12) !important;
|
|
margin-right: 9rpx !important;
|
|
}
|
|
|
|
/deep/.u-code-input__input {
|
|
height: 96rpx !important;
|
|
caret-color: #000000 !important;
|
|
}
|
|
|
|
/deep/.u-modal__content {
|
|
padding-bottom: 20rpx !important;
|
|
}
|
|
|
|
.flex1 {
|
|
button {
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: baseline;
|
|
|
|
}
|
|
</style> |