703 lines
20 KiB
Vue
703 lines
20 KiB
Vue
|
<template>
|
|||
|
|
<view class="whole" v-if="!loading">
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 0">待团长处理</view>
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 11">团员已撤销</view>
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 20">待团员退货</view>
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 21">团长已拒绝</view>
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 22">团员已退货</view>
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 30">团员已退货</view>
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 31">退款中</view>
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 32">已退款</view>
|
|||
|
|
<view class="staTit" v-if="orderInfo.status === 33">退款失败</view>
|
|||
|
|
|
|||
|
|
<!-- 已申请退款未退货 -->
|
|||
|
|
<view class="method" v-if="orderInfo.status === 20 && !orderInfo.ship_sn && orderInfo.pickup_id === 0">
|
|||
|
|
<view class="row">
|
|||
|
|
<view class="tit">方式1：预约上门取件</view>
|
|||
|
|
<view class="btn flex" @click="toSendGoods()">立即寄回</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="row row1">
|
|||
|
|
<view class="tit">方式2：自己联系快递寄回，需填写快递单号</view>
|
|||
|
|
<view class="ed">退货地址</view>
|
|||
|
|
<view class="arrdbox flex1">
|
|||
|
|
<view class="arrd">
|
|||
|
|
<text>{{orderInfo.refund_address_name}} {{orderInfo.refund_address_mobile || orderInfo.refund_address_tel}}</text><br>
|
|||
|
|
<text>
|
|||
|
|
{{orderInfo.refund_address_province_name}}{{orderInfo.refund_address_city_name}}{{orderInfo.refund_address_area_name}}{{orderInfo.refund_address_detail}}
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="copybtn flex" @click="copyAddress()">复制</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn btn1 flex" @click="toFillNo()">填写快递单号</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 已申请退款未上门取件 -->
|
|||
|
|
<view class="hasback flex1" @click="tosendDetail()" v-if="orderInfo.status === 20 && orderInfo.pickup_id !== 0">
|
|||
|
|
<view>
|
|||
|
|
<view class="tit">已预约上门取件</view>
|
|||
|
|
<text>本次寄件费用由团长承担</text>
|
|||
|
|
</view>
|
|||
|
|
<up-icon name="arrow-right" />
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="pickcode" v-if="orderInfo.status === 20 && orderInfo.pickup_id !== 0 && pickup_code">取件码
|
|||
|
|
<text>{{pickup_code}}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 已申请退款且退货 -->
|
|||
|
|
<view class="expInfo" v-if="(orderInfo.status === 22 || orderInfo.status === 30 || orderInfo.status === 31) && orderInfo.ship_sn">
|
|||
|
|
<view class="tit flex1">
|
|||
|
|
<text>退货物流信息</text>
|
|||
|
|
<view class="view" @click="viewExpress()">查看 <up-icon name="arrow-right" /></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="expno">
|
|||
|
|
<text>{{orderInfo.delivery_company.name}} {{orderInfo.ship_sn}}</text>
|
|||
|
|
<view class="copybtn" @click="copyExpress()">复制</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="refInfo">
|
|||
|
|
<view class="title">团员申请退款</view>
|
|||
|
|
<view class="info">
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="left">退款金额:</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="amount">￥{{orderInfo.total_amount}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="left">退款明细:</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="row" v-for="(it, index) in orderInfo.refunds" :key="index">
|
|||
|
|
<text>{{it.item.goods_name}}<template v-if="it.item.sku_name">，{{it.item.sku_name}}</template></text>
|
|||
|
|
<text style="white-space: nowrap;padding-left: 10rpx;">退款<text class="red">￥{{((parseFloat(it.amount) * 100 - parseFloat(it.freight_price_refund) * 100) / 100).toFixed(2)}}</text></text>
|
|||
|
|
</view>
|
|||
|
|
<view class="row" v-if="orderInfo.freight_price">
|
|||
|
|
<text>运费</text>
|
|||
|
|
<text>退款<text class="red">￥{{orderInfo.freight_price}}</text></text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="left">申请原因:</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="row">
|
|||
|
|
<text>{{refoundReasonObj[orderInfo.refund_reason]}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="left">售后类型:</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="row">
|
|||
|
|
<text>{{orderInfo.type == 2 ? '退货退款' : '仅退款(无需退货)'}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="left">申请描述:</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="row">
|
|||
|
|
<text>{{orderInfo.apply_desc || ''}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="imgbox" v-if="orderInfo.apply_pic_urls">
|
|||
|
|
<image v-for="(it, index) in orderInfo.apply_pic_urls" :key="index" :src="it" mode="aspectFill" class="img" @click="preViewImg(it)"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="item">
|
|||
|
|
<view class="left">申请时间:</view>
|
|||
|
|
<view class="right">
|
|||
|
|
<view class="row">
|
|||
|
|
<text>{{orderInfo.created_at || ''}}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="history">
|
|||
|
|
<view class="tit flex1" @click="showInfo = !showInfo">
|
|||
|
|
<text>售后历史</text>
|
|||
|
|
<up-icon name="arrow-up" v-if="showInfo" />
|
|||
|
|
<up-icon name="arrow-down" v-else />
|
|||
|
|
</view>
|
|||
|
|
<view v-show="showInfo" class="info">
|
|||
|
|
|
|||
|
|
<view class="row" v-for="(item, index) in historyInfo" :key="index" :class="index == 0 ? 'is-done' : ''">
|
|||
|
|
<view class="tt" v-if="item.operator_type === 0">团员发起退款申请</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 10">团员修改退款申请</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 11">团员取消退款申请</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 13">系统取消申请</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 20">申请已通过</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 21">申请拒绝</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 22 && item.ship_sn">团员开始寄件</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 30 && item.extend_info.pickup">团员开始寄件</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 30 && !item.extend_info.pickup">团员填写物流信息</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 31">团员修改寄件</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 32">团员取消寄件</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 33">快递平台取消寄件</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 34">团长填写物流</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 40">待退款</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 41">退款中</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 42">退款已完成</view>
|
|||
|
|
<view class="tt" v-if="item.operator_type === 43">退款失败</view>
|
|||
|
|
|
|||
|
|
<view class="time">{{item.created_at}}</view>
|
|||
|
|
|
|||
|
|
<text v-if="item.operator_type === 21">拒绝理由：{{item.approve_msg}}</text>
|
|||
|
|
|
|||
|
|
<text v-if="item.operator_type === 32 &&
|
|||
|
|
item.extend_info &&
|
|||
|
|
item.extend_info.pickup
|
|||
|
|
">取消理由：{{reasonObj[item.extend_info.pickup.cancel_type]}}</text>
|
|||
|
|
|
|||
|
|
<template v-if="item.operator_type === 30 && item.extend_info.pickup">
|
|||
|
|
<text>寄件类型：{{sendTypeObj[item.extend_info.pickup.consign_type] || ''}}</text><br>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template v-if="item.operator_type === 30 && !item.extend_info.pickup">
|
|||
|
|
<text style="color: #409eff;" @click="viewExpress()">物流信息：{{item.ship_sn || ''}}</text>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template v-if="item.operator_type === 34">
|
|||
|
|
<text style="color: #409eff;" @click="viewExpress()">物流信息：{{item.ship_sn || ''}}</text>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template v-if="item.operator_type === 22 && item.ship_sn">
|
|||
|
|
<text>物流单号：{{item.ship_sn || ''}}</text>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<template v-if="item.operator_type === 0 || item.operator_type === 10">
|
|||
|
|
<view v-for="(it, i) in item.extend_info.refunds" :key="i">
|
|||
|
|
<text>{{it.item.goods_name}}{{it.item.sku_name}}，退款{{((parseFloat(it.amount) * 100 - parseFloat(it.freight_price_refund) * 100) / 100).toFixed(2)}}元</text>
|
|||
|
|
</view>
|
|||
|
|
<text v-if="item.freight_price">运费，退款{{item.freight_price}}元</text><br>
|
|||
|
|
<text>售后类型：{{item.type == 2 ? '退货退款' : '仅退款(无需退货)'}}</text><br>
|
|||
|
|
<text>退款原因：{{refoundReasonObj[orderInfo.refund_reason]}}</text><br>
|
|||
|
|
<text>申请说明：{{item.apply_desc || ''}}</text>
|
|||
|
|
<view class="imgbox">
|
|||
|
|
<image v-for="(it, i) in item.apply_pic_urls" :key="i" :src="it" mode="aspectFill" class="img" @click="preViewImg(it)"></image>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 退款申请状态 0-发起申请;11-申请取消;20-申请通过（待退货）;21-申请拒绝;22-团员已填写物流单号，待团长退款;30-待退款（已退货，待退款）;31-退款中;32-退款完成;33-退款失败 -->
|
|||
|
|
<view class="bottom" v-if="orderInfo.status === 0 || orderInfo.status === 11 || orderInfo.status === 20 || orderInfo.status === 21 || ((orderInfo.status === 22 || orderInfo.status === 30 || orderInfo.status === 31) && orderInfo.ship_sn)">
|
|||
|
|
<view class="btn flex" v-if="(orderInfo.status === 22 || orderInfo.status === 30 || orderInfo.status === 31) && orderInfo.ship_sn" @click="modifyExpress()">修改物流单号</view>
|
|||
|
|
<view class="btn flex" v-if="orderInfo.status === 0 || orderInfo.status === 20 || orderInfo.status === 21 || orderInfo.status === 22" @click="showCommit = true">撤销申请</view>
|
|||
|
|
<view class="btn flex" v-if="orderInfo.status === 0 || orderInfo.status === 11 || orderInfo.status === 21" @click="toModifyApply()">修改申请</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<up-modal
|
|||
|
|
:show="showCommit"
|
|||
|
|
title="确定撤销退款申请吗？"
|
|||
|
|
:confirmColor="Color"
|
|||
|
|
:showCancelButton="true"
|
|||
|
|
@confirm="revokeRefound()"
|
|||
|
|
@cancel="showCommit = false">
|
|||
|
|
</up-modal>
|
|||
|
|
|
|||
|
|
<!-- 隐私协议弹窗 -->
|
|||
|
|
<privacy-popup :show-dialog="showPrivacy" @close="showPrivacy = false" @agree="showPrivacy = false" @refuse="showPrivacy = false" />
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { ref, reactive, toRefs } from 'vue'
|
|||
|
|
import { refoundReasonObj } from '@/utils/list.js'
|
|||
|
|
import { get } from '@/api/request.js'
|
|||
|
|
import { showToast, judgePrivacy } from '@/components/common.js'
|
|||
|
|
import { sendTypeObj, reasonObj, Style } from '@/utils/list.js'
|
|||
|
|
import privacyPopup from '@/components/privacyPopup/index.vue'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
privacyPopup
|
|||
|
|
},
|
|||
|
|
setup() {
|
|||
|
|
const data = reactive({
|
|||
|
|
refund_id: '',
|
|||
|
|
orderInfo: {},
|
|||
|
|
historyInfo: [],
|
|||
|
|
showInfo: false,
|
|||
|
|
showCommit: false,
|
|||
|
|
loading: true,
|
|||
|
|
cancelLoad: false,
|
|||
|
|
Color: uni.getStorageSync('theme_color'),
|
|||
|
|
priceColor: Style[uni.getStorageSync('theme_index') * 1].priceColor,
|
|||
|
|
showPrivacy: false,
|
|||
|
|
pickup_code: ''
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 获取退款详情
|
|||
|
|
function getOrderInfo() {
|
|||
|
|
get(`/api/v1/orderRefundApply/${data.refund_id}`).then((res) => {
|
|||
|
|
data.orderInfo = res.data
|
|||
|
|
data.loading = false
|
|||
|
|
if(res.data.status === 20 && res.data.pickup_id !== 0) {
|
|||
|
|
getPickCode(res.data.pickup_id)
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getPickCode(pickup_id) {
|
|||
|
|
get(`/api/v1/pickup/${pickup_id}`).then((res) => {
|
|||
|
|
data.pickup_code = res.data.pickup_code
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取售后历史
|
|||
|
|
function getHistory() {
|
|||
|
|
get(`/api/v1/orderRefundApply/history/${data.refund_id}`, {page: 1, pageSize: 100}).then((res) => {
|
|||
|
|
data.historyInfo = res.data
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 撤销申请
|
|||
|
|
function revokeRefound() {
|
|||
|
|
if(!data.cancelLoad) {
|
|||
|
|
data.cancelLoad = true
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '正在取消',
|
|||
|
|
mask: true
|
|||
|
|
})
|
|||
|
|
get(`/api/v1/orderRefundApply/cancel/${data.refund_id}`).then((res) => {
|
|||
|
|
uni.hideLoading()
|
|||
|
|
showToast('退款申请已取消')
|
|||
|
|
data.showCommit = false
|
|||
|
|
data.cancelLoad = false
|
|||
|
|
getOrderInfo()
|
|||
|
|
getHistory()
|
|||
|
|
}).catch(() => {
|
|||
|
|
data.cancelLoad = false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toSendGoods() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/mine/refund/sendgoods/index?order_id=' + data.orderInfo.order_id + '&refund_id=' + data.refund_id
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function toFillNo() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/mine/refund/fillno/index?refund_id=' + data.refund_id
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function viewExpress() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/mine/refund/expressinfo/index?refund_id=' + data.refund_id
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function tosendDetail() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/mine/refund/senddetail/index?pickup_id=' + data.orderInfo.pickup_id + '&refund_id=' + data.refund_id
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 复制物流单号
|
|||
|
|
const copyExpress = async () => {
|
|||
|
|
if(await judgePrivacy()) {
|
|||
|
|
data.showPrivacy = true
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: String(data.orderInfo.ship_sn),
|
|||
|
|
success: function () {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '物流单号已复制'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: function () {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '复制失败'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 修改申请
|
|||
|
|
function toModifyApply() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/mine/refund/apply/index?order_id=' + data.orderInfo.order_id + '&refund_id=' + data.refund_id + '&type=' + data.orderInfo.type
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 修改物流单号
|
|||
|
|
function modifyExpress() {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: '/pages/mine/refund/fillno/index?refund_id=' + data.refund_id + '&modify=1'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function copyAddress() {
|
|||
|
|
if(await judgePrivacy()) {
|
|||
|
|
data.showPrivacy = true
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
let address = data.orderInfo.refund_address_name + ' ' +
|
|||
|
|
(data.orderInfo.refund_address_mobile || data.orderInfo.refund_address_tel) + ' ' +
|
|||
|
|
data.orderInfo.refund_address_province_name +
|
|||
|
|
data.orderInfo.refund_address_city_name +
|
|||
|
|
data.orderInfo.refund_address_area_name +
|
|||
|
|
data.orderInfo.refund_address_detail
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: address,
|
|||
|
|
success: function () {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '地址信息已复制'
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
fail: function () {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: '复制失败'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function preViewImg(img) {
|
|||
|
|
uni.previewImage({
|
|||
|
|
urls: [img],
|
|||
|
|
current: 0
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
sendTypeObj,
|
|||
|
|
reasonObj,
|
|||
|
|
refoundReasonObj,
|
|||
|
|
...toRefs(data),
|
|||
|
|
getOrderInfo,
|
|||
|
|
getHistory,
|
|||
|
|
revokeRefound,
|
|||
|
|
toSendGoods,
|
|||
|
|
toFillNo,
|
|||
|
|
viewExpress,
|
|||
|
|
tosendDetail,
|
|||
|
|
copyExpress,
|
|||
|
|
toModifyApply,
|
|||
|
|
modifyExpress,
|
|||
|
|
copyAddress,
|
|||
|
|
preViewImg
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
this.refund_id = options.refund_id
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getOrderInfo()
|
|||
|
|
this.getHistory()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.flex{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
.flex1{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.whole {
|
|||
|
|
padding-bottom: 110rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.staTit{
|
|||
|
|
font-size: 50rpx;
|
|||
|
|
color: #111111;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 50rpx 0;
|
|||
|
|
background: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.refInfo{
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
.title{
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #111111;
|
|||
|
|
font-weight: bold;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|||
|
|
}
|
|||
|
|
.info{
|
|||
|
|
padding: 10rpx 30rpx;
|
|||
|
|
.item{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 10rpx 0;
|
|||
|
|
.left{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #7B7B7B;
|
|||
|
|
width: 150rpx;
|
|||
|
|
}
|
|||
|
|
.right{
|
|||
|
|
width: calc(100% - 150rpx);
|
|||
|
|
.amount{
|
|||
|
|
font-size: 40rpx;
|
|||
|
|
color: v-bind('priceColor');
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.row{
|
|||
|
|
display: flex;
|
|||
|
|
width: 100%;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
.row1{
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
text{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #000;
|
|||
|
|
&.red{
|
|||
|
|
color: v-bind('priceColor');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.imgbox{
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
.img{
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
margin: 0 16rpx 16rpx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.history{
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
.tit{
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: #111111;
|
|||
|
|
font-weight: bold;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
.info{
|
|||
|
|
border-top: 1rpx solid #eee;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
.row{
|
|||
|
|
padding-left: 54rpx;
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: 16rpx;
|
|||
|
|
.tt{
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #7B7B7B;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.time{
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #98989F;
|
|||
|
|
}
|
|||
|
|
text{
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
}
|
|||
|
|
&:before {
|
|||
|
|
position: absolute;
|
|||
|
|
margin-top: 16rpx;
|
|||
|
|
left: 9rpx;
|
|||
|
|
content: ' ';
|
|||
|
|
height: 20rpx;
|
|||
|
|
width: 20rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background-color: #e8e8e8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:after {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 32rpx;
|
|||
|
|
left: 16rpx;
|
|||
|
|
bottom: -38rpx;
|
|||
|
|
content: ' ';
|
|||
|
|
width: 2rpx;
|
|||
|
|
border-right: 2rpx solid #e8e8e8;
|
|||
|
|
}
|
|||
|
|
&:not(:first-child) {
|
|||
|
|
padding-top: 16rpx;
|
|||
|
|
}
|
|||
|
|
&:last-child {
|
|||
|
|
&:after {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
&.is-done {
|
|||
|
|
.tt{
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
&:after {
|
|||
|
|
border-color: v-bind('Color');
|
|||
|
|
}
|
|||
|
|
&:before {
|
|||
|
|
background-color: v-bind('Color');
|
|||
|
|
box-shadow: v-bind('Color') 0 0 10px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.imgbox{
|
|||
|
|
margin-top: 10rpx;
|
|||
|
|
.img{
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
margin: 0 16rpx 16rpx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.bottom{
|
|||
|
|
position: fixed;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
height: 90rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
z-index: 10;
|
|||
|
|
.btn{
|
|||
|
|
height: 48rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333;
|
|||
|
|
border: 1px solid #BBBBBB;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
border-radius: 48rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.method{
|
|||
|
|
padding: 30rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
.row{
|
|||
|
|
&.row1{
|
|||
|
|
margin-top: 60rpx;
|
|||
|
|
}
|
|||
|
|
.tit{
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #111;
|
|||
|
|
font-weight: 600;margin-bottom: 30rpx;
|
|||
|
|
}
|
|||
|
|
.btn{
|
|||
|
|
height: 80rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 80rpx;
|
|||
|
|
background: v-bind('Color');
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
&.btn1{
|
|||
|
|
border: 1rpx solid v-bind('Color');
|
|||
|
|
color: v-bind('Color');
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.ed{
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
.arrdbox{
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #303030;
|
|||
|
|
margin-bottom: 50rpx;
|
|||
|
|
.arrd{
|
|||
|
|
width: calc(100% - 140rpx);
|
|||
|
|
text{
|
|||
|
|
color: #7B7B7B;
|
|||
|
|
line-height: 44rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.copybtn{
|
|||
|
|
height: 48rpx;
|
|||
|
|
padding: 0 30rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333;
|
|||
|
|
border: 1rpx solid #BBBBBB;
|
|||
|
|
border-radius: 48rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hasback{
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
.tit{
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #111;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
text{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #7B7B7B;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.expInfo{
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
padding: 30rpx;
|
|||
|
|
.tit{
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #111;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
.view{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.expno{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
text{
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #7B7B7B;
|
|||
|
|
}
|
|||
|
|
.copybtn{
|
|||
|
|
padding: 2rpx 20rpx;
|
|||
|
|
color: #7B7B7B;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
border: 1px solid #7B7B7B;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|