|
|
@@ -0,0 +1,294 @@
|
|
|
+<template>
|
|
|
+ <view class="content">
|
|
|
+ <template v-if="loading">
|
|
|
+ <view class="skeleton">
|
|
|
+ <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
+ <view class="skeleton-line animate"></view>
|
|
|
+ <view class="skeleton-line min animate"></view>
|
|
|
+ <view class="skeleton-line min animate"></view>
|
|
|
+ <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
+ <view class="skeleton-line max animate" style="height: 200upx;"></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <scroll-view class="goods-body" scroll-y scroll-with-animation>
|
|
|
+ <view class="order-body">
|
|
|
+ <view class="item-goods">
|
|
|
+ <view class="item-goods-body">
|
|
|
+ <view class="image">
|
|
|
+ <image :src="orderData.img"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info">
|
|
|
+ <view class="title">
|
|
|
+ <view class="name" v-if="goodsData.is_new == 1">{{goodsData.price}}元代{{goodsData.line_price}}元商场权益券{{ goodsData.product_name }}</view>
|
|
|
+ <view class="name" v-else>{{ goodsData.product_name }}</view>
|
|
|
+ <view class="num">x{{ orderData.number }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="tags">
|
|
|
+ {{orderData.sku_name?orderData.sku_name:'默认'}}
|
|
|
+ <view class="price">{{ $dialog.formatMoney(orderData.price,true) }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price-right">实付 <text>{{ $dialog.formatMoney(orderData.pay_money,true) }}</text></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-info">
|
|
|
+ <view class="info-item">
|
|
|
+ <view class="name">订单编号</view>
|
|
|
+ <view class="right">{{ orderData.out_order_no }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item" @click="refundMsg">
|
|
|
+ <view class="name">退款原因<text class="red">*</text></view>
|
|
|
+ <view class="right">
|
|
|
+ {{refundMsgText?refundMsgText:'请至少选择1项'}}
|
|
|
+ <view class="icon"><image src="/static/image/right.svg"></image></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-item">
|
|
|
+ <view class="name">退款金额</view>
|
|
|
+ <view class="right red">{{ $dialog.formatMoney(orderData.pay_money,true) }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="line-height"></view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="footer">
|
|
|
+ <view class="tips">申请退款后需商家审核，审核时间预计1-3个工作日</view>
|
|
|
+ <view class="footer-op">
|
|
|
+ <button :loading="isSubmit" :disabled="isSubmit" class="btn full" @click="submitForm">提交申请</button>
|
|
|
+ </view>
|
|
|
+ <view class="footer-safe"></view>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <refundMain ref="refundMain" @success="refundHandle"></refundMain>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+var app;
|
|
|
+import refundMain from "@/components/kfService/refund";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ refundMain
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ orderId:0,
|
|
|
+ current: 0,
|
|
|
+ goodsData:null,
|
|
|
+ orderData:null,
|
|
|
+ loading:true,
|
|
|
+ refundMsgText:null,
|
|
|
+ isSubmit:false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad({order}) {
|
|
|
+ app = this;
|
|
|
+ app.orderId = order;
|
|
|
+ const eventChannel = this.getOpenerEventChannel();
|
|
|
+ app.getOrder();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async submitForm(){
|
|
|
+ var formData = {};
|
|
|
+ if (!app.refundMsgText) return app.$dialog.showSuccess("请至少选择1项")
|
|
|
+ formData.order = app.orderId;
|
|
|
+ formData.msg = app.refundMsgText;
|
|
|
+ app.isSubmit = true;
|
|
|
+ var resp = await app.$api.order.keeps.post(formData);
|
|
|
+ app.isSubmit = false;
|
|
|
+ if (resp.code !== 1) return app.$dialog.showSuccess(resp.msg)
|
|
|
+ app.$dialog.showSuccess(resp.msg)
|
|
|
+ setTimeout(function(){
|
|
|
+ const eventChannel = app.getOpenerEventChannel();
|
|
|
+ eventChannel.emit('acceptKeepData', { msg: '会员信息已完善' });
|
|
|
+ uni.navigateBack();
|
|
|
+ },900)
|
|
|
+ },
|
|
|
+ refundMsg(){
|
|
|
+ this.$refs.refundMain.open();
|
|
|
+ },
|
|
|
+ refundHandle(data){
|
|
|
+ app.refundMsgText = data;
|
|
|
+ },
|
|
|
+ async getOrder(){
|
|
|
+ app.loading = true;
|
|
|
+ var res = await app.$api.order.detail.get({"order":app.orderId});
|
|
|
+ app.loading = false;
|
|
|
+ if (res.code && res.code == 0) {
|
|
|
+ app.$dialog.showSuccess(res.msg);
|
|
|
+ uni.navigateBack()
|
|
|
+ return ;
|
|
|
+ }
|
|
|
+ app.goodsData = res.data.product;
|
|
|
+ app.orderData = res.data;
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.content{
|
|
|
+ position: fixed;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ background-color: #f1f1f1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .line-height{
|
|
|
+ height: 40rpx;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.right-input{
|
|
|
+ border: 0;
|
|
|
+ box-shadow: none;
|
|
|
+ text-align: right;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.flex-radio{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
+ .uni-list-cell{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.goods-body{
|
|
|
+ height: 0;
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.footer{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 20upx 20upx 0 20upx;border-top: 2upx solid #f8f8f8;
|
|
|
+ .footer-safe {
|
|
|
+ height: env(safe-area-inset-bottom);width: 100%;
|
|
|
+ }
|
|
|
+ .tips{
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ font-size: 32rpx;
|
|
|
+ height: 100upx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ line-height: 100upx;
|
|
|
+ text-align: center;
|
|
|
+ min-width: 200rpx;
|
|
|
+ color: #333;
|
|
|
+ border: 2rpx solid #ccc;
|
|
|
+ &.full{
|
|
|
+ background-color: $main-color;
|
|
|
+ color: #fff;
|
|
|
+ border: 2rpx solid $main-color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.order-body {
|
|
|
+ width: 95%;
|
|
|
+ margin: 20rpx auto;
|
|
|
+ .order-info{
|
|
|
+ border-radius: 20rpx;
|
|
|
+ background-color: #fff;padding: 20upx;margin-top: 20upx;
|
|
|
+ .title{font-size: 32upx;color: #333;font-weight: bold;margin-bottom: 20upx;}
|
|
|
+ .info-item{
|
|
|
+ font-size: 28upx;display: flex;align-items: center;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ .name{
|
|
|
+ text {
|
|
|
+ color: $main-color;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right{
|
|
|
+ &.red{
|
|
|
+ color: $main-color;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #666;margin-left: auto;margin-right: 0;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: right;
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ text{border: 2upx solid #ccc;color: #333;font-size: 24upx;padding: 0 15upx;margin-left: 20upx;border-radius: 5upx;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-goods{
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ .item-goods-body{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
+ }
|
|
|
+ .stock{
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ height: 140rpx;
|
|
|
+ overflow: hidden;display: flex;align-items: center;min-width: 140rpx;
|
|
|
+ position: relative;
|
|
|
+ image {
|
|
|
+ width: 140rpx;
|
|
|
+ border-radius: 10upx;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ flex: 1 1 0%;
|
|
|
+ overflow: hidden;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ font-size: 32rpx;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 900;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .price-right{
|
|
|
+ text-align: right;
|
|
|
+ color: $main-color;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 800;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tags {
|
|
|
+ color: #94a3b8;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .price {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: $main-text-color;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Zory