|
@@ -0,0 +1,505 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="goods-box-single">
|
|
|
+ <image class="goods-img" :src="item.image" mode="aspectFill"></image>
|
|
|
+ <view class="right position-relative">
|
|
|
+ <view class="flex">
|
|
|
+ <text class="title">{{ item.name }}</text>
|
|
|
+ <view class="title-right">
|
|
|
+ <view class="price">{{ item.price }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row b-b flex">
|
|
|
+ <text class="tit">订单总价</text>
|
|
|
+ <view class="input">¥{{ item.price }}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="orderDetialBox">
|
|
|
+ <view class="f-header m-t">
|
|
|
+ <view class="f-left-icon"></view>
|
|
|
+ <view class="tit-box"><text class="tit">订单信息</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="item flex">
|
|
|
+ <view class="title-left flex">
|
|
|
+ <text class="title">订单编号:</text>
|
|
|
+ <view class="text">{{ item.order_id }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="buttom-right" @click="copyOrderId(item.order_id)">复制单号</view>
|
|
|
+ </view>
|
|
|
+ <view class="item flex">
|
|
|
+ <view class="title-left flex">
|
|
|
+ <text class="title">下单时间:</text>
|
|
|
+ <view class="text">{{ item.create_time }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item flex">
|
|
|
+ <view class="title-left flex">
|
|
|
+ <text class="title">完成时间:</text>
|
|
|
+ <view class="text">{{ item.update_time }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item flex">
|
|
|
+ <view class="title-left flex">
|
|
|
+ <text class="title">卖家昵称:</text>
|
|
|
+ <view class="text">{{ item.c_nickname }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item flex">
|
|
|
+ <view class="title-left flex">
|
|
|
+ <text class="title">卖家电话:</text>
|
|
|
+ <view class="text">{{ item.phone }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main">
|
|
|
+ <view class="main-tip">卖家收款方式</view>
|
|
|
+ <view class="main-title flex">
|
|
|
+ <view class="main-item">
|
|
|
+ <view class="mt-item" @click="change('0')" :class="{ current: tabCurrentIndex === 0 }" v-if="zfb != ''">
|
|
|
+ <image class="mt-image" :src="tabCurrentIndex == 0 ? '../../static/img/aliD.png' : '../../static/img/ali.png'" mode=""></image>
|
|
|
+ <view class="mt-font" :class="{ current: tabCurrentIndex === 0 }">支付宝</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main-item">
|
|
|
+ <view class="mt-item" @click="change('1')" :class="{ current: tabCurrentIndex === 1 }" v-if="bank != ''">
|
|
|
+ <image class="mt-image1" :src="tabCurrentIndex == 1 ? '../../static/img/bankD.png' : '../../static/img/bank.png'" mode=""></image>
|
|
|
+ <view class="mt-font" :class="{ current: tabCurrentIndex === 1 }">银行卡</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="main-item">
|
|
|
+ <view class="mt-item" @click="change('2')" :class="{ current: tabCurrentIndex === 2 }" v-if="wx != ''">
|
|
|
+ <image class="mt-image2" :src="tabCurrentIndex == 2 ? '../../static/img/yueD.png' : '../../static/img/yue.png'" mode=""></image>
|
|
|
+ <view class="mt-font" :class="{ current: tabCurrentIndex === 2 }">微信</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <swiper class="swiper-box" :duration="500" @change="changeTab" :style="{ height: tabCurrentIndex == 2 ? '450rpx' : '280rpx' }" :current="tabCurrentIndex" disable-touch>
|
|
|
+ <swiper-item class="tab-content" v-if="zfb != ''">
|
|
|
+ <view class="tc-item flex">
|
|
|
+ <view class="tcitem-name">账号</view>
|
|
|
+ <view class="ali-name">{{ zfb.payment }}</view>
|
|
|
+ <image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(zfb.payment)"></image>
|
|
|
+ </view>
|
|
|
+ <view class="tc-item flex">
|
|
|
+ <view class="tcitem-name">姓名</view>
|
|
|
+ <view class="ali-name">{{ zfb.name }}</view>
|
|
|
+ <image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(zfb.name)"></image>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item class="tab-content" v-else></swiper-item>
|
|
|
+ <swiper-item class="tab-content" v-if="bank != ''">
|
|
|
+ <view class="tc-item flex">
|
|
|
+ <view class="tcitem-name">姓名</view>
|
|
|
+ <view class="ali-name">{{ bank.name }}</view>
|
|
|
+ <image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.name)"></image>
|
|
|
+ </view>
|
|
|
+ <view class="tc-item flex">
|
|
|
+ <view class="tcitem-name">银行</view>
|
|
|
+ <view class="ali-name">{{ bank.bank }}</view>
|
|
|
+ <image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.bank)"></image>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="tc-item flex">
|
|
|
+ <view class="tcitem-name">开户行</view>
|
|
|
+ <view class="ali-name">椒江支行</view>
|
|
|
+ <image class="tcitem-image" src="../../static/img/copy.png" mode=""></image>
|
|
|
+ </view> -->
|
|
|
+ <view class="tc-item flex">
|
|
|
+ <view class="tcitem-name">账号</view>
|
|
|
+ <view class="ali-name">{{ bank.payment }}</view>
|
|
|
+ <image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(bank.payment)"></image>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item class="tab-content" v-else></swiper-item>
|
|
|
+ <swiper-item class="tab-content" v-if="wx != ''">
|
|
|
+ <view class="tc-item flex">
|
|
|
+ <view class="tcitem-name">账号</view>
|
|
|
+ <view class="ali-name">{{ wx.payment }}</view>
|
|
|
+ <image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(wx.payment)"></image>
|
|
|
+ </view>
|
|
|
+ <view class="tc-item flex">
|
|
|
+ <view class="tcitem-name">姓名</view>
|
|
|
+ <view class="ali-name">{{ wx.name }}</view>
|
|
|
+ <image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(wx.name)"></image>
|
|
|
+ </view>
|
|
|
+ <view class="tc-item">
|
|
|
+ <view class="upload-title" style="color: #9d9d9d;">微信二维码</view>
|
|
|
+ <view class="upload-main" @click="lookimg(wx.image)"><image class="upload-image" :src="wx.image" mode="aspectFit"></image></view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ <swiper-item class="tab-content" v-else></swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ <view class="zf flex">
|
|
|
+ <view class="title-left">
|
|
|
+ <text class="title">支付凭证(点击右边图片查看大图):</text>
|
|
|
+ </view>
|
|
|
+ <image class="zfpz" @click="lookimg(item.upload_image)" :src="item.upload_image" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="btHeight">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { user_auction_order } from '@/api/order.js';
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ id:'',
|
|
|
+ item: '',
|
|
|
+ tabCurrentIndex: 0,
|
|
|
+ info: '',
|
|
|
+ bank: '',
|
|
|
+ wx: '',
|
|
|
+ zfb: '',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.id = opt.id
|
|
|
+ this.loadData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ loadData() {
|
|
|
+ user_auction_order({order_id: this.id}).then(({data}) =>{
|
|
|
+ console.log(data);
|
|
|
+ this.item = data;
|
|
|
+ this.bank = data.bank;
|
|
|
+ this.wx = data.wx;
|
|
|
+ this.zfb = data.zfb;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 查看大图
|
|
|
+ lookimg(src) {
|
|
|
+ console.log(src);
|
|
|
+ let arr = [src];
|
|
|
+ uni.previewImage({
|
|
|
+ current: src,
|
|
|
+ urls: arr
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //swiper 切换
|
|
|
+ changeTab(e) {
|
|
|
+ this.tabCurrentIndex = e.target.current;
|
|
|
+ },
|
|
|
+ change(num) {
|
|
|
+ this.tabCurrentIndex = num * 1;
|
|
|
+ },
|
|
|
+ // 复制订单编号
|
|
|
+ copyOrderId(text) {
|
|
|
+ // #ifndef H5
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: text,
|
|
|
+ success: e => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '复制成功',
|
|
|
+ duration: 1500
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // #endif
|
|
|
+ // #ifdef H5
|
|
|
+ // 获取需要复制的文字
|
|
|
+ const copyStr = text;
|
|
|
+ // 创建input标签存放需要复制的文字
|
|
|
+ const oInput = document.createElement('input');
|
|
|
+ // 把文字放进input中,供复制
|
|
|
+ oInput.value = copyStr;
|
|
|
+ // 添加文
|
|
|
+ document.body.appendChild(oInput);
|
|
|
+ // 选中创建的input
|
|
|
+ oInput.select();
|
|
|
+ // 执行复制方法, 该方法返回bool类型的结果,告诉我们是否复制成功
|
|
|
+ const copyResult = document.execCommand('copy');
|
|
|
+ // 操作中完成后 从Dom中删除创建的input
|
|
|
+ document.body.removeChild(oInput);
|
|
|
+ // 根据返回的复制结果 给用户不同的提示
|
|
|
+ if (copyResult) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '已复制到粘贴板',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$api.msg('复制失败');
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+page {
|
|
|
+ background: $page-color-base;
|
|
|
+}
|
|
|
+
|
|
|
+// 订单详细
|
|
|
+.orderDetialBox {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ background-color: #ffffff;
|
|
|
+ font-size: $font-base;
|
|
|
+ color: $font-color-base;
|
|
|
+ .item {
|
|
|
+ height: 80rpx;
|
|
|
+ .text {
|
|
|
+ padding-left: 10rpx;
|
|
|
+ }
|
|
|
+ .buttom-right {
|
|
|
+ width: 180rpx;
|
|
|
+ border-radius: 99rpx;
|
|
|
+ padding: 10rpx;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px solid $border-color-light;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .zf {
|
|
|
+ .zfpz {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #fff;
|
|
|
+ .order-status {
|
|
|
+ font-size: $font-lg;
|
|
|
+ color: $color-red;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .refund {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+ .noRefund {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 120rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ text-align: right;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ &.payColor {
|
|
|
+ color: $color-red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconlocation {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+}
|
|
|
+.add-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 690rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ margin: 60rpx auto;
|
|
|
+ font-size: $font-lg;
|
|
|
+ color: #fff;
|
|
|
+ background-color: $base-color;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ // box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
|
|
|
+}
|
|
|
+
|
|
|
+/* 多条商品 */
|
|
|
+.order-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-left: 30rpx;
|
|
|
+ background: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ /* 单条商品 */
|
|
|
+ .goods-box-single {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ .goods-img {
|
|
|
+ display: block;
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0 30rpx 0 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ .title {
|
|
|
+ align-self: flex-start;
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ }
|
|
|
+ .title-right {
|
|
|
+ flex-shrink: 0;
|
|
|
+ text-align: right;
|
|
|
+ align-self: flex-start;
|
|
|
+ }
|
|
|
+ .attr-box {
|
|
|
+ font-size: $font-sm + 2rpx;
|
|
|
+ color: $font-color-light;
|
|
|
+ }
|
|
|
+ .evaluate{
|
|
|
+ color:#FFFFFF;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: right;
|
|
|
+ text{
|
|
|
+ background:#FA2740;
|
|
|
+ padding: 5rpx 15rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .yesevaluate{
|
|
|
+ color:#333333;
|
|
|
+ font-size: 24rpx;
|
|
|
+ display: inline-block;
|
|
|
+ text-align: right;
|
|
|
+ text{
|
|
|
+ border: 2rpx solid #333333;
|
|
|
+ padding: 5rpx 15rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ font-size: $font-base + 2rpx;
|
|
|
+ color: $font-color-dark;
|
|
|
+ &:before {
|
|
|
+ content: '¥';
|
|
|
+ font-size: $font-sm;
|
|
|
+ margin: 0 2rpx 0 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 标题头
|
|
|
+.f-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 80rpx;
|
|
|
+ .tit-box {
|
|
|
+ @extend %font-title-box;
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ @extend %font-title;
|
|
|
+ }
|
|
|
+ .f-left-icon {
|
|
|
+ @extend %f-left-icon;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 共有底部高度
|
|
|
+$btHeight:100rpx;
|
|
|
+.btHeight{
|
|
|
+ height: $btHeight;
|
|
|
+}
|
|
|
+// 拼团按钮
|
|
|
+.group-nav {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height:$btHeight;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding-right: 30rpx;
|
|
|
+ .bottom {
|
|
|
+ }
|
|
|
+}
|
|
|
+.main {
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 30rpx 0 40rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ .main-tip {
|
|
|
+ padding: 0 30rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .main-title {
|
|
|
+ margin-top: 34rpx;
|
|
|
+ justify-content: flex-start;
|
|
|
+ .current {
|
|
|
+ background: linear-gradient(143.2747deg, #ff6a00, #ee0979) !important;
|
|
|
+ color: #ffffff !important;
|
|
|
+ }
|
|
|
+ .main-item {
|
|
|
+ width: 33%;
|
|
|
+ }
|
|
|
+ .mt-item {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 160rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ background: #f8f8f8;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .mt-image {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ .mt-image1 {
|
|
|
+ width: 38rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ .mt-image2 {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ .mt-font {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 14rpx 30rpx 0;
|
|
|
+ .tc-item {
|
|
|
+ padding: 50rpx 2rpx 0;
|
|
|
+ line-height: 1;
|
|
|
+ .tcitem-name {
|
|
|
+ width: 118rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .ali-name {
|
|
|
+ width: 380rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .tcitem-image {
|
|
|
+ width: 26rpx;
|
|
|
+ height: 28rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
|
|
+
|