detail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434
  1. <template>
  2. <view v-if="!isLoading" class="container p-bottom">
  3. <!-- 顶部状态栏 -->
  4. <view class="detail-header dis-flex flex-y-center">
  5. <view class="header-backdrop">
  6. <image class="image" src="/static/order/refund-bg.png"></image>
  7. </view>
  8. <view class="header-state">
  9. <text class="f-32 col-f" v-if="detail.status == RefundStatusEnum.A.key">{{RefundStatusEnum.A.name}}</text>
  10. <text class="f-32 col-f" v-if="detail.status == RefundStatusEnum.B.key">{{RefundStatusEnum.B.name}}</text>
  11. <text class="f-32 col-f" v-if="detail.status == RefundStatusEnum.C.key">{{RefundStatusEnum.C.name}}</text>
  12. <text class="f-32 col-f" v-if="detail.status == RefundStatusEnum.D.key">{{RefundStatusEnum.D.name}}</text>
  13. <text class="f-32 col-f" v-if="detail.status == RefundStatusEnum.E.key">{{RefundStatusEnum.E.name}}</text>
  14. </view>
  15. </view>
  16. <!-- 商品详情 -->
  17. <view v-for="(goods, index) in detail.orderInfo.goods" :key="index" class="detail-goods b-f m-top20 dis-flex flex-dir-row" @click="onGoodsDetail(goods.goodsId)">
  18. <view class="left">
  19. <image class="goods-image" :src="goods.image"></image>
  20. </view>
  21. <view class="right dis-flex flex-box flex-dir-column flex-x-around">
  22. <view class="goods-name">
  23. <text class="twolist-hidden">{{ goods.name }}</text>
  24. </view>
  25. <view class="dis-flex col-9 f-24">
  26. <view class="flex-box">
  27. <view class="goods-props clearfix">
  28. <view class="goods-props-item" v-for="(props, idx) in goods.specList" :key="idx">
  29. <text>{{ props.specName }}</text>
  30. </view>
  31. </view>
  32. </view>
  33. <text class="t-r">×{{ goods.num }}</text>
  34. </view>
  35. </view>
  36. </view>
  37. <!-- 订单金额 -->
  38. <view class="detail-order b-f row-block">
  39. <view class="item dis-flex flex-x-end flex-y-center">
  40. <text class="">订单金额:</text>
  41. <text class="col-m">¥{{ detail.orderInfo.amount }}</text>
  42. </view>
  43. </view>
  44. <!-- 已退款金额 -->
  45. <view v-if="detail.status == 'B' && detail.type == 'A'" class="detail-order b-f row-block dis-flex flex-x-end flex-y-center">
  46. <text class="">已退款金额:</text>
  47. <text class="col-m">¥{{ detail.refundMoney }}</text>
  48. </view>
  49. <!-- 售后信息 -->
  50. <view class="detail-refund b-f m-top20">
  51. <view class="detail-refund__row dis-flex">
  52. <view class="text">
  53. <text>售后类型:</text>
  54. </view>
  55. <view class="flex-box">
  56. <text v-if="detail.type == RefundTypeEnum.RETURN.value">{{RefundTypeEnum.RETURN.name}}</text>
  57. <text v-if="detail.type == RefundTypeEnum.EXCHANGE.value">{{RefundTypeEnum.EXCHANGE.name}}</text>
  58. </view>
  59. </view>
  60. <view class="detail-refund__row dis-flex">
  61. <view class="text">
  62. <text>申请原因:</text>
  63. </view>
  64. <view class="flex-box">
  65. <text>{{ detail.remark }}</text>
  66. </view>
  67. </view>
  68. <view v-if="detail.imageList && detail.imageList.length > 0" class="detail-refund__row dis-flex">
  69. <view class="text">
  70. <text>申请凭证:</text>
  71. </view>
  72. <view class="image-list flex-box">
  73. <view class="image-preview" v-for="(item, index) in detail.imageList" :key="index">
  74. <image class="image" mode="aspectFill" :src="item" @click="handlePreviewImages(index)"></image>
  75. </view>
  76. </view>
  77. </view>
  78. </view>
  79. <!-- 售后信息 -->
  80. <view v-if="detail.status == RefundStatusEnum.C.key" class="detail-refund b-f m-top20">
  81. <view class="detail-refund__row dis-flex">
  82. <view class="text">
  83. <text class="col-m">拒绝原因:</text>
  84. </view>
  85. <view class="flex-box">
  86. <text>{{ detail.remark }}</text>
  87. </view>
  88. </view>
  89. </view>
  90. <!-- 商家收货地址 -->
  91. <view v-if="detail.status == RefundStatusEnum.B.key" class="detail-address b-f m-top20">
  92. <view class="detail-address__row address-title">
  93. <text class="col-m">退货地址</text>
  94. </view>
  95. <view class="detail-address__row address-details">
  96. <view class="address-details__row">
  97. <text>收货人名:{{ detail.address.name ? detail.address.name : '-'}}</text>
  98. </view>
  99. <view class="address-details__row">
  100. <text>联系电话:{{ detail.address.mobile ? detail.address.mobile : '-' }}</text>
  101. </view>
  102. <view class="address-details__row dis-flex">
  103. <view class="text">
  104. <text>详细地址:</text>
  105. </view>
  106. <view class="address flex-box">
  107. <text class="region" v-for="(region, idx) in detail.address.region" :key="idx">{{ region }}</text>
  108. <text class="detail">{{ detail.address.detail ? detail.address.detail : '-'}}</text>
  109. </view>
  110. </view>
  111. </view>
  112. <view class="detail-address__row address-tips">
  113. <view class="f-26 col-9">
  114. <text>· 未与卖家协商一致情况下,请勿寄到付或平邮</text>
  115. </view>
  116. <view class="f-26 col-9">
  117. <text>· 请填写真实有效物流信息</text>
  118. </view>
  119. </view>
  120. </view>
  121. <!-- 填写物流信息 -->
  122. <form v-if="detail.type == RefundTypeEnum.RETURN.value && detail.status == RefundStatusEnum.B.value && !detail.is_user_send"
  123. @submit="onSubmit()">
  124. <view class="detail-express b-f m-top20">
  125. <view class="form-group dis-flex flex-y-center">
  126. <view class="field">物流公司:</view>
  127. <view class="flex-box">
  128. <input class="input" v-model="expressName" placeholder="请填写物流公司名称"></input>
  129. </view>
  130. </view>
  131. <view class="form-group dis-flex flex-y-center">
  132. <view class="field">物流单号:</view>
  133. <view class="flex-box">
  134. <input class="input" v-model="expressNo" placeholder="请填写物流单号"></input>
  135. </view>
  136. </view>
  137. </view>
  138. <!-- 操作按钮 -->
  139. <view class="footer">
  140. <view class="btn-wrapper">
  141. <button class="btn-item btn-item-main btn-normal" :class="{ disabled }" formType="submit">确认发货</button>
  142. </view>
  143. </view>
  144. </form>
  145. </view>
  146. </template>
  147. <script>
  148. import { RefundStatusEnum, RefundTypeEnum } from '@/common/enum/order/refund'
  149. import * as RefundApi from '@/api/refund'
  150. export default {
  151. data() {
  152. return {
  153. // 枚举类
  154. RefundStatusEnum,
  155. RefundTypeEnum,
  156. // 正在加载
  157. isLoading: true,
  158. // 售后单ID
  159. refundId: null,
  160. // 售后单详情
  161. detail: {},
  162. // 物流公司
  163. expressName: '',
  164. // 物流单号
  165. expressNo: '',
  166. // 按钮禁用
  167. disabled: false
  168. }
  169. },
  170. /**
  171. * 生命周期函数--监听页面加载
  172. */
  173. onLoad({ refundId }) {
  174. // 售后单ID
  175. this.refundId = refundId
  176. // 获取页面数据
  177. this.getPageData()
  178. },
  179. methods: {
  180. // 获取页面数据
  181. getPageData() {
  182. const app = this
  183. app.isLoading = true
  184. Promise.all([app.getRefundDetail()])
  185. .then(result => {
  186. app.isLoading = false
  187. })
  188. },
  189. // 获取售后单详情
  190. getRefundDetail() {
  191. const app = this
  192. return new Promise((resolve, reject) => {
  193. RefundApi.detail(app.refundId)
  194. .then(result => {
  195. app.detail = result.data;
  196. resolve()
  197. })
  198. .catch(err => reject(err))
  199. })
  200. },
  201. // 跳转商品详情页
  202. onGoodsDetail(goodsId) {
  203. this.$navTo('pages/goods/detail', { goodsId })
  204. },
  205. // 凭证图片预览
  206. handlePreviewImages(index) {
  207. const { detail: { images } } = this
  208. const imageUrls = images.map(item => item.image_url)
  209. uni.previewImage({
  210. current: imageUrls[index],
  211. urls: imageUrls
  212. })
  213. },
  214. // 表单提交
  215. onSubmit() {
  216. const app = this
  217. // 判断是否重复提交
  218. if (app.disabled === true) return false
  219. // 按钮禁用
  220. app.disabled = true
  221. // 提交到后端
  222. RefundApi.delivery(app.refundId, app.expressName, app.expressNo)
  223. .then(result => {
  224. if (result.code == 200) {
  225. app.$toast("提交成功");
  226. setTimeout(() => {
  227. app.disabled = false
  228. uni.navigateBack()
  229. }, 1500)
  230. } else {
  231. app.$error(result.message);
  232. app.disabled = false;
  233. }
  234. })
  235. .catch(err => app.disabled = false)
  236. }
  237. }
  238. }
  239. </script>
  240. <style lang="scss" scoped>
  241. // 顶部状态栏
  242. .detail-header {
  243. position: relative;
  244. width: 100%;
  245. height: 140rpx;
  246. .header-backdrop {
  247. position: absolute;
  248. top: 0;
  249. left: 0;
  250. z-index: 0;
  251. .image {
  252. display: block;
  253. width: 750rpx;
  254. height: 140rpx;
  255. }
  256. }
  257. }
  258. .header-state {
  259. padding: 0rpx 130rpx;
  260. font-size: 60rpx;
  261. font-weight: bold;
  262. }
  263. /* 商品详情 */
  264. .detail-goods {
  265. padding: 24rpx 20rpx;
  266. .left {
  267. .goods-image {
  268. display: block;
  269. width: 150rpx;
  270. height: 150rpx;
  271. border-radius: 6rpx;
  272. }
  273. }
  274. .right {
  275. padding-left: 20rpx;
  276. }
  277. .goods-props {
  278. margin-top: 14rpx;
  279. height: 40rpx;
  280. color: #ababab;
  281. font-size: 24rpx;
  282. overflow: hidden;
  283. .goods-props-item {
  284. display: inline-block;
  285. margin-right: 14rpx;
  286. padding: 4rpx 16rpx;
  287. border-radius: 12rpx;
  288. background-color: #F5F5F5;
  289. width: auto;
  290. }
  291. }
  292. }
  293. .detail-order {
  294. padding: 15rpx 20rpx;
  295. font-size: 26rpx;
  296. .item {
  297. margin-bottom: 10rpx;
  298. &:last-child {
  299. margin-bottom: 0;
  300. }
  301. }
  302. }
  303. /* 售后详情 */
  304. .detail-refund {
  305. padding: 15rpx 20rpx;
  306. }
  307. .detail-refund__row {
  308. margin: 20rpx 0;
  309. }
  310. /* 申请凭证 */
  311. .image-list {
  312. margin-bottom: -15rpx;
  313. .image-preview {
  314. margin: 0 15rpx 15rpx 0;
  315. float: left;
  316. .image {
  317. display: block;
  318. width: 180rpx;
  319. height: 180rpx;
  320. }
  321. &:nth-child(3n+0) {
  322. margin-right: 0;
  323. }
  324. }
  325. }
  326. /* 商家收货地址 */
  327. .detail-address {
  328. padding: 20rpx 30rpx;
  329. }
  330. .address-details {
  331. padding: 5rpx 0;
  332. border-bottom: 1px solid #eee;
  333. .address-details__row {
  334. margin: 10rpx 0;
  335. }
  336. }
  337. .address-tips {
  338. line-height: 46rpx;
  339. }
  340. .detail-address__row {
  341. margin: 15rpx 0;
  342. }
  343. /* 填写物流信息 */
  344. .detail-express {
  345. padding: 10rpx 30rpx;
  346. }
  347. .form-group {
  348. height: 60rpx;
  349. margin: 14rpx 0;
  350. .input {
  351. height: 100%;
  352. font-size: 28rpx;
  353. }
  354. }
  355. /* 底部操作栏 */
  356. .footer {
  357. margin-top: 60rpx;
  358. .btn-wrapper {
  359. height: 100%;
  360. display: flex;
  361. align-items: center;
  362. padding: 0 20rpx;
  363. }
  364. .btn-item {
  365. flex: 1;
  366. font-size: 28rpx;
  367. height: 80rpx;
  368. line-height: 80rpx;
  369. text-align: center;
  370. color: #fff;
  371. border-radius: 40rpx;
  372. }
  373. .btn-item-main {
  374. background: linear-gradient(to right, #f9211c, #ff6335);
  375. // 禁用按钮
  376. &.disabled {
  377. background: #ff9779;
  378. }
  379. }
  380. }
  381. </style>