li
5f40e4e1b5
- 移除秒合约页面及UI - 合约页Tab改为Position Held/Transaction Record - 存款/提款/转账页增加BTC/ETH - 资产页重构(用户信息+盈亏+多语言) - 注册页改版(匹配新设计稿) - 日文全面翻译+首页菜单多语言 - 代理专属注册链接支持(?code=) - 10个locale文件同步更新
460 lines
15 KiB
Vue
460 lines
15 KiB
Vue
<template>
|
||
<view>
|
||
<z-paging ref="paging" refresher-only @onRefresh="onRefresh"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<myNav slot="top" :title="i18n.orderDetails.title"></myNav>
|
||
|
||
<!-- 身体 -->
|
||
<view class="width-750 padding-w-30 padding-t-24 padding-b-100">
|
||
<!-- 倒计时 -->
|
||
<view v-if="data.status==1||data.status==2"
|
||
class="height-112 padding-c-12 flex align-center justify-between">
|
||
<view class="height-100b flex direction-column justify-between">
|
||
<text v-if="data.status==1"
|
||
class="font-28 weight-bold">{{i18n.orderDetails.text1}}</text>
|
||
<text v-if="data.status==2"
|
||
class="font-28 weight-bold">{{i18n.orderDetails.text2}}</text>
|
||
<view class="flex align-center">
|
||
<text v-if="data.status==1" class="font-26 color-C3C3C3">{{i18n.orderDetails.text3}}：</text>
|
||
<text v-if="data.status==2" class="font-26 color-C3C3C3">{{i18n.orderDetails.text4}}：</text>
|
||
<u-count-down @end="getDetails()" ref="uCountDown" :autoplay="true" :timestamp="timestamp"
|
||
color="#0165EE">
|
||
</u-count-down>
|
||
</view>
|
||
</view>
|
||
<image class="width-60 height-60" src="/static/imgs/index/daojishi@2x.png" mode=""></image>
|
||
</view>
|
||
|
||
<!-- 订单信息 -->
|
||
<view class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
||
<view class="flex align-center justify-between margin-b-25">
|
||
<text class="font-28 weight-bold">{{i18n.orderDetails.text5}}</text>
|
||
<text class="font-28 color-0165EE weight-bold">{{statusText[data.status]}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text6}}</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.order_num}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text7}}</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.symbol}} {{data.price}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text8}}({{data.curr_name}})</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.num}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text9}}</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.symbol}} {{data.count_price}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text10}}</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.add_time}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用户信息 -->
|
||
<view class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
||
<view class="flex align-center justify-between margin-b-25">
|
||
<text class="font-28 weight-bold">
|
||
{{data.type==1?i18n.orderDetails.text11:i18n.orderDetails.text12}}
|
||
</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text13}}</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.nickname}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text14}}</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.name}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text15}}</text>
|
||
<view class="flex align-center">
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.mobile}}</text>
|
||
<text @click="callup(data.mobile)"
|
||
class="font-26 color-0165EE margin-l-22">{{i18n.orderDetails.text16}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 银行卡信息 -->
|
||
<view v-if="data" class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
||
<view class="flex align-center justify-between margin-b-25">
|
||
<text class="font-28 weight-bold">{{i18n.orderDetails.text17}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text18}}</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.collection.card_num}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text14}}</text>
|
||
<text class="font-26 color-C3C3C3 nummedium-font">{{data.collection.username}}</text>
|
||
</view>
|
||
<view class="flex align-center justify-between margin-b-10">
|
||
<text class="font-26 color-C3C3C3">{{i18n.orderDetails.text19}}</text>
|
||
<view class="flex align-center">
|
||
<text
|
||
class="font-26 color-C3C3C3 nummedium-font">{{data.collection.bank_name+data.collection.bank_deposit}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 支付凭证 -->
|
||
<view v-if="data.status==1&&data.type==1" class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
||
<view class="flex align-center justify-between margin-b-25">
|
||
<text class="font-28 weight-bold">{{i18n.orderDetails.text20}}</text>
|
||
</view>
|
||
<view @click="chooseImage"
|
||
:style="'background-color: '+theme.bg"
|
||
class="width-176 height-176 radiu-20 flex align-center justify-center">
|
||
<!-- <image v-if="img==''||img==null" class="width-104 height-101"
|
||
src="/static/imgs/index/upload@2x.png"></image> -->
|
||
<u-icon v-if="img==''||img==null" name="plus-circle" color="#8B99A2" size="80"></u-icon>
|
||
<image v-else class="width-176 height-176 radiu-20" :src="img" mode=""></image>
|
||
</view>
|
||
</view>
|
||
<view v-if="data.status!=1&&data.status!=5" class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
||
<view class="flex align-center justify-between margin-b-25">
|
||
<text class="font-28 weight-bold">{{i18n.orderDetails.text20}}</text>
|
||
</view>
|
||
<view class="width-176 height-176 radiu-20 flex align-center justify-center">
|
||
<image @click="yulanImg(voimg,1)" class="width-176 height-176 radiu-20" :src="voimg" mode=""></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 申诉内容 -->
|
||
<view v-if="data.appeal_arr" class="box" :style="'background-color: '+theme.fu_bg+';color: '+theme.text">
|
||
<view class="flex align-center justify-between margin-b-25">
|
||
<text class="font-28 weight-bold">{{i18n.orderDetails.text21}}</text>
|
||
</view>
|
||
<view class="font-32 color-FF4040 margin-b-10">{{data.appeal_arr.content}}</view>
|
||
<view class="grid col-3">
|
||
<view @click="yulanImg(data.appeal_arr.annex_images,2)"
|
||
v-for="(item,index) in data.appeal_arr.annex_images" class="text-center margin-top">
|
||
<view class="width-200 height-200">
|
||
<image :src="item" class="width-200 height-200 radiu-20"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 按钮区 -->
|
||
<view class=" margin-t-100 flex align-center justify-around">
|
||
<!-- <text v-if="data.status==1&&data.type==2" class="font-42 color-00C481">请耐心等待买家付款</text> -->
|
||
<view @click="router.push('/pages/index/appeal?id='+data.id)" v-if="data.status==2" class="okbtn">
|
||
{{i18n.orderDetails.text22}}
|
||
</view>
|
||
<view @click="show=true" v-if="data.status==1&&data.type==1" class="nobtn">{{i18n.orderDetails.text23}}
|
||
</view>
|
||
<view @click="getorder_pay" v-if="data.status==1&&data.type==1" class="okbtn">
|
||
{{i18n.orderDetails.text24}}
|
||
</view>
|
||
<view @click="show1=true" v-if="data.status==2&&data.type==2" class="okbtn">{{i18n.orderDetails.text25}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 取消弹窗 -->
|
||
<u-popup v-model="show" mode="center" border-radius="20">
|
||
<view class="width-600 height-266" style="overflow: hidden;"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="height-170 flex align-center justify-center">
|
||
<text class="font-32 color-FF4040 weight-bold">{{i18n.orderDetails.text26}}</text>
|
||
</view>
|
||
<!-- <input class="input" type="text" v-model="paypwd" placeholder="请输入交易密码" placeholder-class="color-C3C3C3"
|
||
password /> -->
|
||
<view class="height-98 flex">
|
||
<view @click="show=false" class="flex-1 line-height-98 text-center bj-c3c3c3-02">
|
||
<text class="font-28 color-C3C3C3 weight-bold">{{i18n.orderDetails.text27}}</text>
|
||
</view>
|
||
<view @click="getcancel" class="flex-1 line-height-98 text-center bj-0165EE">
|
||
<text class="font-28 color-white weight-bold">{{i18n.orderDetails.text28}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
<!-- 确认收款弹窗 -->
|
||
<u-popup v-model="show1" mode="center" border-radius="20">
|
||
<view class="width-600 height-266" style="overflow: hidden;"
|
||
:style="'background-color: '+theme.bg+';color: '+theme.text">
|
||
<view class="height-170 flex align-center justify-center">
|
||
<text class="font-32 color-FF4040 weight-bold">{{i18n.orderDetails.text29}}</text>
|
||
</view>
|
||
<!-- <input class="input" type="text" v-model="paypwd" placeholder="请输入交易密码" placeholder-class="color-C3C3C3"
|
||
password /> -->
|
||
<view class="height-98 flex">
|
||
<view @click="show1=false" class="flex-1 line-height-98 text-center bj-c3c3c3-02">
|
||
<text class="font-28 color-C3C3C3 weight-bold">{{i18n.orderDetails.text27}}</text>
|
||
</view>
|
||
<view @click="getsucc" class="flex-1 line-height-98 text-center bj-0165EE">
|
||
<text class="font-28 color-white weight-bold">{{i18n.orderDetails.text28}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</z-paging>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusBar: uni.getSystemInfoSync().statusBarHeight,
|
||
timestamp: 0,
|
||
id: '',
|
||
data: '',
|
||
img: '',
|
||
upimg: '',
|
||
voimg: '',
|
||
flag: true,
|
||
show: false,
|
||
show1: false,
|
||
statusText: ['', '', '', '', '', ''],
|
||
theme: '',
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.id = e.id
|
||
},
|
||
computed: {
|
||
i18n() {
|
||
return this.$t('message');
|
||
}
|
||
},
|
||
// onPullDownRefresh() {
|
||
// console.log('下拉刷新');
|
||
// this.getDetails()
|
||
// this.changekind()
|
||
// setTimeout(function() {
|
||
// uni.stopPullDownRefresh();
|
||
// }, 1500);
|
||
// },
|
||
onShow() {
|
||
if (uni.getStorageSync("theme") == "dark") {
|
||
this.theme = this.$store.state.darkTheme
|
||
} else {
|
||
this.theme = this.$store.state.lightTheme
|
||
}
|
||
this.getDetails()
|
||
this.changekind()
|
||
},
|
||
methods: {
|
||
onRefresh() {
|
||
this.getDetails()
|
||
this.changekind()
|
||
// 以告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
|
||
setTimeout(() => {
|
||
//1.5秒之后停止刷新动画
|
||
this.$refs.paging.complete();
|
||
}, 1500)
|
||
},
|
||
changekind() {
|
||
this.statusText[1] = this.i18n.orderRecord.text10
|
||
this.statusText[2] = this.i18n.orderRecord.text11
|
||
this.statusText[3] = this.i18n.orderRecord.text12
|
||
this.statusText[4] = this.i18n.orderRecord.text13
|
||
this.statusText[5] = this.i18n.orderRecord.text14
|
||
},
|
||
// 呼叫
|
||
callup(phone) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: phone, //仅为示例
|
||
success: () => {
|
||
|
||
}
|
||
});
|
||
},
|
||
// 确认收款并放币
|
||
getsucc() {
|
||
if (!this.flag) {
|
||
return
|
||
} else {
|
||
this.show1 = false
|
||
uni.showLoading({
|
||
title: '',
|
||
mask: true
|
||
})
|
||
this.flag = false
|
||
this.post('/marketotc/order_succ', {
|
||
id: this.data.id
|
||
}).then(res => {
|
||
console.log('确认收款返回', res)
|
||
this.flag = true
|
||
uni.hideLoading()
|
||
if (res.code == 1) {
|
||
this.tos(res.msg)
|
||
this.getDetails()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 查看支付凭证
|
||
yulanImg(img, type) {
|
||
if (type == 1) {
|
||
// let arr = []
|
||
let arr = img.split()
|
||
// arr.push(img)
|
||
uni.previewImage({
|
||
urls: arr
|
||
})
|
||
} else {
|
||
uni.previewImage({
|
||
urls: img
|
||
})
|
||
}
|
||
|
||
},
|
||
// 取消订单
|
||
getcancel() {
|
||
if (!this.flag) {
|
||
return
|
||
} else {
|
||
this.show = false
|
||
uni.showLoading({
|
||
title: '',
|
||
mask: true
|
||
})
|
||
this.flag = false
|
||
this.post('/marketotc/order_cancel', {
|
||
id: this.data.id
|
||
}).then(res => {
|
||
console.log('上传支付凭证返回', res)
|
||
this.flag = true
|
||
uni.hideLoading()
|
||
if (res.code == 1) {
|
||
this.tos(res.msg)
|
||
this.getDetails()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 上传支付凭证
|
||
getorder_pay() {
|
||
if (this.upimg == '') return this.tos(this.i18n.orderDetails.tos1)
|
||
if (!this.flag) {
|
||
return
|
||
} else {
|
||
uni.showLoading({
|
||
title: '',
|
||
mask: true
|
||
})
|
||
this.flag = false
|
||
let obj = {
|
||
id: this.data.id,
|
||
voucher_image: this.upimg
|
||
}
|
||
this.post('/marketotc/order_pay', obj).then(res => {
|
||
console.log('上传支付凭证返回', res)
|
||
this.flag = true
|
||
uni.hideLoading()
|
||
if (res.code == 1) {
|
||
this.tos(res.msg)
|
||
this.getDetails()
|
||
}
|
||
})
|
||
}
|
||
},
|
||
// 选择支付凭证
|
||
chooseImage() {
|
||
let self = this
|
||
uni.chooseImage({
|
||
count: 1,
|
||
success: (chooseImageRes) => {
|
||
const tempFilePaths = chooseImageRes.tempFilePaths;
|
||
self.img = tempFilePaths[0]
|
||
uni.showLoading()
|
||
uni.uploadFile({
|
||
url: this.upload + '/publics/image_upload',
|
||
filePath: tempFilePaths[0],
|
||
name: 'file',
|
||
success: (res) => {
|
||
let data = JSON.parse(res.data)
|
||
uni.hideLoading()
|
||
if (data.code == 1) {
|
||
// console.log(data)
|
||
self.upimg = data.data.url
|
||
}
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取订单详情
|
||
getDetails() {
|
||
uni.showLoading({
|
||
title: '',
|
||
mask: true
|
||
})
|
||
this.post('/marketotc/content_order', {
|
||
id: this.id
|
||
}).then(res => {
|
||
console.log('订单详情', res)
|
||
if (res.code == 1) {
|
||
uni.hideLoading()
|
||
this.data = res.data
|
||
if (this.data.status != 1 && this.data.voucher_image != null) {
|
||
this.voimg = res.data.voucher_image[0]
|
||
}
|
||
let h = res.data.h
|
||
let i = res.data.i
|
||
let s = res.data.s
|
||
this.timestamp = (h * 60 * 60) + (i * 60) + s
|
||
this.$refs.uCountDown.start();
|
||
}
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.box {
|
||
width: 690rpx;
|
||
padding: 22rpx 24rpx 20rpx;
|
||
// background: #FFFFFF;
|
||
box-shadow: 0rpx 4rpx 10rpx rgba(205, 206, 219, 0.3);
|
||
border-radius: 20rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.nobtn {
|
||
width: 300rpx;
|
||
height: 96rpx;
|
||
background: #F6F8FB;
|
||
border-radius: 10rpx;
|
||
font-size: 30rpx;
|
||
color: #8B99A2;
|
||
line-height: 96rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.okbtn {
|
||
width: 300rpx;
|
||
height: 96rpx;
|
||
background: #0165EE;
|
||
border-radius: 10rpx;
|
||
font-size: 30rpx;
|
||
color: #FFFFFF;
|
||
line-height: 96rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.bj-c3c3c3-02 {
|
||
background: rgba(195, 195, 195, 0.2);
|
||
}
|
||
|
||
.input {
|
||
width: 540rpx;
|
||
height: 76rpx;
|
||
margin: 0 auto;
|
||
border-radius: 20rpx;
|
||
background: #F6F8FC;
|
||
font-size: 28rpx;
|
||
color: #8B99A2;
|
||
padding: 0 24rpx;
|
||
}
|
||
</style>
|