11
jhzh
2024-08-01 4ebbadfe4c8c7aa6404dcd9b126cc8265bf03c0d
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<template>
  <div id="full" class="cancel-success">
    <div style="background: #d8dbe0">
      <order-nav :back="false" @back="onBack()">
        <template>
          <div
            class="flex items-center"
            @click="
              $router.push({
                path: '/chat',
              })
            "
          >
            <img
              class="w-35 h-33 mr-22"
              src="~@/assets/image/c2c/Vector.png"
              alt=""
            />
            <span class="font-28">{{ $t("联系卖家") }}</span>
          </div>
        </template>
      </order-nav>
      <div class="">
        <div
          class="flex justify-between items-center pb-33 px-32"
          style="background: #d8dbe0"
        >
          <div>
            <p class="mb-8 font-48">
              <slot name="title">{{ $t("已取消") }}</slot>
            </p>
            <p class="font-24">
              <slot name="desc">{{ $t("您已取消订单") }}</slot>
            </p>
          </div>
          <div>
            <img
              class="w-80 h-80"
              src="~@/assets/image/c2c/Group1212.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <div class="px-32 pt-40 mainBackground">
      <order-data :detail="detail" />
    </div>
    <div class="w-full h-16 my-40 diviLine"></div>
    <van-cell-group class="px-32">
      <van-cell @click="enterAppeal">
        <template #title>
          <span class="c2cColor font-30">{{ $t("对订单存在疑问") }}</span>
        </template>
        <template #default>
          <van-icon class="font-700 text-grey" name="arrow" />
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>
 
<script>
import { Cell, CellGroup, Icon } from "vant";
import OrderNav from "@/components/order-nav/OrderNav";
import OrderData from "@/page/c2cOrder/components/order-data/OrderData";
 
export default {
  name: "CancelSuccess",
  // props:['title','count', 'totalPrice', 'orderNumber', 'createOrderTime', 'sellerName', 'unitPrice'],
  props: {
    detail: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  methods: {
    enterAppeal() {
      this.$router.replace({
        path: "/appeal",
      });
    },
    onBack() {
      this.$router.push("/wantBuy");
    },
  },
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon,
    OrderNav,
    OrderData,
  },
};
</script>
 
<style lang="scss" scoped>
#full {
  ::v-deep .buy_nav {
    .van-icon {
      color: #000;
    }
  }
  ::v-deep .van-nav-bar {
    background: #d8dbe0;
  }
 
  ::v-deep .order-number {
    margin-top: 100px;
  }
 
  ::v-deep .van-cell {
    padding: 15px 20px !important;
    @include themify() {
      background: themed("main_background");
    }
  }
 
  ::v-deep {
    .van-cell-group,
    .van-cell {
      @include themify() {
        color: themed("text_color1");
      }
 
      @include themify() {
        background: themed("main_background");
      }
    }
 
    .van-cell__value {
      @include themify() {
        color: themed("text_color");
      }
    }
  }
}
</style>