416 lines
8.4 KiB
Vue
416 lines
8.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class="block">
|
|
<view class="content">
|
|
<view class="orderinfo">
|
|
<view class="nominal">订单信息:</view>
|
|
<view class="order-info" v-for="row in rdata.shop_db" v-bind:key="rdata.id">
|
|
<view class="left">
|
|
<image :src="row.picurl"></image>
|
|
</view>
|
|
<view class="right">
|
|
<view class="name">
|
|
{{row.full_title}}
|
|
</view>
|
|
<!-- <view class="spec">{{row.spec}}</view> -->
|
|
<view class="price-number">
|
|
￥<view class="price">{{row._price}}</view>
|
|
x<view class="number">{{row._num}}</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="row">
|
|
<view class="nominal">订单金额:</view>
|
|
<view class="text">{{rdata.totalmoney}}元</view>
|
|
</view>
|
|
</view>
|
|
<view class="row">
|
|
<view class="nominal">汇款信息:</view>
|
|
<view class="nominal">请通过电汇的方式支付货款，将汇款凭证拍照上传</view>
|
|
<view class="text">
|
|
账户名称: 中国国检测试控股集团股份有限公司
|
|
</view>
|
|
<view class="text">
|
|
开户行: 工商银行北京管庄支行
|
|
</view>
|
|
<view class="text">
|
|
账号:0200006809014437256
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="block">
|
|
<view class="title">
|
|
汇款图片
|
|
</view>
|
|
<view>
|
|
<uni-file-picker v-model="imageValue" file-mediatype="image" mode="grid" file-extname="png,jpg"
|
|
:limit="5" ref="files" :auto-upload="false" @select="select" />
|
|
</view>
|
|
</view>
|
|
<view class="protocol">
|
|
<view class="checkbox-box">
|
|
<view class="checkbox" @tap="selected">
|
|
<view :class="[portocol?'on':'']"></view>
|
|
</view>
|
|
<view class="text">我已阅读并同意<view class="linkText" @tap="protocolIndex">《用户服务协议》</view>和<view class="linkText" @tap="protocolPrivacy">《隐私政策》</view>
|
|
</view>
|
|
</view>
|
|
<!-- <checkbox v-model="portocol"></checkbox> -->
|
|
|
|
</view>
|
|
<view class="pay">
|
|
<view v-if="portocol" class="btn on" @tap="upImg()">
|
|
提交
|
|
</view>
|
|
<view v-else class="btn">
|
|
提交
|
|
</view>
|
|
</view>
|
|
<!-- <view class="pay">
|
|
<view class="btn" @tap="upImg()">提交</view>
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
amount: 0,
|
|
orderName: '',
|
|
paytype: 'alipay', //支付类型
|
|
imageValue: [],
|
|
rdata: {},
|
|
count: 1,
|
|
name: 'file',
|
|
url: '',
|
|
filepath: [],
|
|
rpath:[],
|
|
portocol:false
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
// this.amount = parseFloat(e.amount).toFixed(2);
|
|
|
|
uni.getStorage({
|
|
key: 'paymentOrder',
|
|
success: (e) => {
|
|
// if(e.data.shop_db.length>1){
|
|
// this.orderName = '多商品合并支付'
|
|
// }else{
|
|
// this.orderName = e.data.shop_db[0].title;
|
|
// }
|
|
this.rdata = e.data
|
|
this.url = this.vuex_host +
|
|
'index.php/index/attachment/upload?dir=images&from=base64&module=index'
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
selected(){
|
|
this.portocol = !this.portocol;
|
|
},
|
|
protocolIndex(){
|
|
uni.navigateTo({
|
|
url:"../../protocol/index"
|
|
})
|
|
},
|
|
protocolPrivacy(){
|
|
uni.navigateTo({
|
|
url:"../../protocol/Privacy"
|
|
})
|
|
},
|
|
doDeposit() {
|
|
//模板模拟支付，实际应用请调起微信/支付宝
|
|
uni.showLoading({
|
|
title: '支付中...'
|
|
});
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: '支付成功'
|
|
});
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: '../../pay/success/success?amount=' + this.amount
|
|
});
|
|
}, 300);
|
|
}, 700)
|
|
},
|
|
select(e) {
|
|
this.filepath = e.tempFilePaths
|
|
},
|
|
async upImg() {
|
|
var that = this
|
|
if (that.filepath.length>0) {
|
|
uni.showLoading({
|
|
title: '上传中'
|
|
})
|
|
|
|
for(var i=0;i<that.filepath.length;i++){
|
|
let base64 = 'data:image/jpeg;base64,' + uni.getFileSystemManager().readFileSync(that.filepath[i],
|
|
'base64')
|
|
let res;
|
|
try{
|
|
res = await that.$u.api.upFile({imgBase64:base64})
|
|
}
|
|
catch(e){
|
|
if(e.data.code==1){
|
|
that.rpath.push(e.data.path)
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
try{
|
|
let payload = {
|
|
id: that.rdata.id,
|
|
voucher_url: that.rpath.join(',')
|
|
}
|
|
let res = await that.$u.api.tjfk(payload)
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title:'提交成功'
|
|
})
|
|
uni.navigateBack()
|
|
}catch(e){
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title:'提交失败',
|
|
icon:'none'
|
|
})
|
|
}
|
|
// that.$u.api.upFile({
|
|
// imgBase64: base64
|
|
// }).then(res => {
|
|
|
|
// }).catch(e => {
|
|
// let data = e.data
|
|
// if (data.code == 1) {
|
|
// let payload = {
|
|
// id: that.rdata.id,
|
|
// voucher_url: data.path
|
|
// }
|
|
// console.log(payload)
|
|
// that.$u.api.tjfk(payload).then(res => {
|
|
// uni.hideLoading()
|
|
// uni.showToast({
|
|
// title: '提交成功'
|
|
// })
|
|
// uni.navigateBack({
|
|
|
|
// })
|
|
// })
|
|
// }
|
|
// })
|
|
|
|
// uni.uploadFile({
|
|
// url: this.url, //仅为示例，非真实的接口地址
|
|
// filePath: this.filepath,
|
|
// name: 'imgBase64',
|
|
// formData: {
|
|
// 'token': this.vuex_token
|
|
// },
|
|
// header:{
|
|
// "Content-Type": "multipart/form-data"
|
|
// },
|
|
// success: (e) => {
|
|
// uni.hideLoading()
|
|
// let data = JSON.parse(e.data)
|
|
// },
|
|
// fail() {
|
|
// uni.hideLoading()
|
|
// }
|
|
// });
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.block {
|
|
width: 94%;
|
|
padding: 0 3% 40upx 3%;
|
|
|
|
.title {
|
|
width: 100%;
|
|
font-size: 34upx;
|
|
}
|
|
|
|
.content {
|
|
.nominal {
|
|
color: gray;
|
|
}
|
|
|
|
.orderinfo {
|
|
width: 100%;
|
|
border-bottom: solid 1upx #eee;
|
|
|
|
.order-info {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-top: 4upx;
|
|
|
|
.left {
|
|
flex-shrink: 0;
|
|
width: 25vw;
|
|
height: 20vw;
|
|
|
|
image {
|
|
width: 25vw;
|
|
height: 20vw;
|
|
border-radius: 10upx;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 100%;
|
|
margin-left: 10upx;
|
|
position: relative;
|
|
|
|
.name {
|
|
width: 100%;
|
|
font-size: 28upx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.spec {
|
|
color: #a7a7a7;
|
|
font-size: 22upx;
|
|
|
|
}
|
|
|
|
.price-number {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
font-size: 22upx;
|
|
color: #333;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
|
|
.price {
|
|
font-size: 24upx;
|
|
margin-right: 5upx;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pay-list {
|
|
width: 100%;
|
|
border-bottom: solid 1upx #eee;
|
|
|
|
.row {
|
|
width: 100%;
|
|
height: 120upx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 100upx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 80upx;
|
|
height: 80upx;
|
|
}
|
|
}
|
|
|
|
.center {
|
|
width: 100%;
|
|
font-size: 30upx;
|
|
}
|
|
|
|
.right {
|
|
width: 100upx;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.protocol{
|
|
font-size: 26upx;
|
|
.checkbox-box{
|
|
display: flex;
|
|
align-items: center;
|
|
padding-bottom: 20upx;
|
|
justify-content: center;
|
|
.checkbox{
|
|
width: 35upx;
|
|
height: 35upx;
|
|
border-radius: 100%;
|
|
border: solid 2upx #f06c7a;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.on{
|
|
width: 25upx;
|
|
height: 25upx;
|
|
border-radius: 100%;
|
|
background-color: #f06c7a;
|
|
}
|
|
}
|
|
.text{
|
|
display: flex;
|
|
margin-left: 10upx;
|
|
.linkText{
|
|
color: #007AFF;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.pay {
|
|
margin-top: 20upx;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
|
|
.btn {
|
|
width: 70%;
|
|
height: 80upx;
|
|
border-radius: 80upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
background-color: #CCCCCC;
|
|
box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
|
|
}
|
|
.on{
|
|
background-color: #f06c7a;
|
|
}
|
|
.tis {
|
|
margin-top: 10upx;
|
|
width: 100%;
|
|
font-size: 24upx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: baseline;
|
|
color: #999;
|
|
|
|
.terms {
|
|
color: #5a9ef7;
|
|
}
|
|
}
|
|
}
|
|
</style>
|