detail.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <template>
  2. <view :style="themeColor()">
  3. <view class="bg-[var(--page-bg-color)] min-h-screen overflow-hidden" v-if="!loading">
  4. <view class="pb-[200rpx]" v-if="type != 'logistics'">
  5. <view class="bg-linear">
  6. <!-- #ifdef MP-WEIXIN -->
  7. <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
  8. <!-- #endif -->
  9. <view v-if="detail.status_name" class="flex justify-between items-center pl-[40rpx] pr-[50rpx] h-[280rpx] box-border pb-[90rpx]">
  10. <view class="text-[36rpx] font-500 leading-[42rpx] text-[#fff]">{{ detail.status_name }}</view>
  11. <view class="flex items-center">
  12. <image v-if="['1','2','4','6','7'].indexOf(detail.status) != -1" class="w-[180rpx] h-[140rpx]" :src="img('addon/mall/detail/payment.png')" mode="aspectFit"/>
  13. <image v-if="['8'].indexOf(detail.status) != -1" class="w-[180rpx] h-[140rpx]" :src="img('addon/mall/detail/complete.png')" mode="aspectFit"/>
  14. <image v-if="['3','5','-1'].indexOf(detail.status) != -1" class="w-[180rpx] h-[140rpx]" :src="img('addon/mall/detail/close.png')" mode="aspectFit" />
  15. </view>
  16. </view>
  17. </view>
  18. <view class="sidebar-margin card-template flex justify-between flex-wrap mt-[-76rpx]">
  19. <view class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" @click="goodsEvent(detail.order_goods.goods_id)">
  20. <u--image class="overflow-hidden" width="150rpx" height="150rpx" radius="var(--goods-rounded-big)" :src="img(detail.order_goods.goods_image_thumb_small ? detail.order_goods.goods_image_thumb_small : '')" model="aspectFill">
  21. <template #error>
  22. <image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
  23. </template>
  24. </u--image>
  25. </view>
  26. <view class="ml-[20rpx] flex flex-1 flex-col justify-between">
  27. <view>
  28. <view class="text-[28rpx] max-w-[490rpx] truncate leading-[40rpx]">{{ detail.order_goods.goods_name }}</view>
  29. <view class="text-[22rpx] mt-[10rpx] text-[var(--text-color-light9)] truncate max-w-[490rpx] leading-[28rpx]" v-if="detail.order_goods.sku_name">{{ detail.order_goods.sku_name }}</view>
  30. </view>
  31. <view class="flex justify-between items-center leading-[28rpx]">
  32. <view class="price-font">
  33. <text class="text-[24rpx]">¥</text>
  34. <text class="text-[40rpx] font-500">{{ parseFloat(detail.order_goods.price).toFixed(2).split('.')[0] }}</text>
  35. <text class="text-[24rpx] font-500">.{{ parseFloat(detail.order_goods.price).toFixed(2).split('.')[1] }}</text>
  36. </view>
  37. <text class="text-right text-[26rpx]">x{{ detail.order_goods.num }}</text>
  38. </view>
  39. </view>
  40. </view>
  41. <view class="sidebar-margin mt-[var(--top-m)] card-template">
  42. <view class="justify-between text-[28rpx] card-template-item">
  43. <view>{{t('refundMoney')}}</view>
  44. <view class="price-font text-[var(--price-text-color)]">
  45. <text class="text-[24rpx] mr-[4rpx]">¥</text>
  46. <text class="text-[28rpx]" v-if="detail.status == 8">{{ parseFloat(detail.money).toFixed(2) }}</text>
  47. <text class="text-[28rpx]" v-else>{{ parseFloat(detail.apply_money).toFixed(2) }}</text>
  48. </view>
  49. </view>
  50. <view class="justify-between text-[28rpx] card-template-item">
  51. <view>{{t('refundType')}}</view>
  52. <view>{{ detail.refund_type_name }}</view>
  53. </view>
  54. <view class="justify-between text-[28rpx] card-template-item">
  55. <view>{{t('refundCause')}}</view>
  56. <view class="w-[400rpx] multi-hidden text-right">{{ detail.reason || '--' }}</view>
  57. </view>
  58. <view class="justify-between text-[28rpx] card-template-item">
  59. <view>{{t('refundNo')}}</view>
  60. <view>{{ detail.order_refund_no }}</view>
  61. </view>
  62. <view class="justify-between text-[28rpx] card-template-item">
  63. <view>{{t('createTime')}}</view>
  64. <view>{{ detail.create_time }}</view>
  65. </view>
  66. <view class="justify-between text-[28rpx] card-template-item !items-baseline">
  67. <view>{{t('createExplain')}}</view>
  68. <view class="flex-1 ml-[60rpx] text-right leading-[1.5] flex justify-end break-all">{{ detail.remark }}</view>
  69. </view>
  70. <view class="justify-between text-[28rpx] card-template-item !items-baseline break-all" v-if="detail.shop_reason">
  71. <view>{{t('reasonRefusal')}}</view>
  72. <view class="flex-1 ml-[60rpx] leading-[1.5] text-right text-[#333]">{{ detail.shop_reason }}</view>
  73. </view>
  74. </view>
  75. <view class="sidebar-margin mt-[var(--top-m)] card-template">
  76. <view class="justify-between text-[28rpx] card-template-item">
  77. <view>{{t('record')}}</view>
  78. <view class="flex items-center" @click="redirect({url: '/addon/mall/pages/refund/log', param: { order_refund_no: orderRefundNo }})">
  79. <text class="text-[26rpx] text-[var(--text-color-light9)]">{{t('check')}}</text>
  80. <text class="nc-iconfont nc-icon-youV6xx text-[24rpx] text-[var(--text-color-light9)] pt-[2rpx]"></text>
  81. </view>
  82. </view>
  83. </view>
  84. <view class="flex tab-bar justify-between items-center bg-[#fff] fixed left-0 right-0 bottom-0 min-h-[100rpx] pl-[30rpx] pr-[20rpx] flex-wrap">
  85. <view class="flex mr-[20rpx] flex-col justify-center items-center" @click="redirect({ url: '/app/pages/index/index', mode: 'reLaunch' })">
  86. <view class="nc-iconfont nc-icon-shouyeV6xx text-[36rpx]"></view>
  87. <text class="text-[20rpx] mt-[10rpx]">{{t('index')}}</text>
  88. </view>
  89. <view class="flex justify-end">
  90. <view class="min-w-[180rpx] box-border text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#ccc] text-[#333] rounded-full ml-[20rpx]" @click="refundBtnFn('cancel')" v-if="['6','7','8','-1'].indexOf(detail.status) == -1">{{t('refundApply')}}</view>
  91. <view v-if="['3'].indexOf(detail.status) != -1" class="min-w-[180rpx] box-border text-[#333] text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] px-[20rpx]" @click.stop="refundBtnFn('edit')" >编辑退款信息</view>
  92. <view v-if="['2'].indexOf(detail.status) != -1" class="min-w-[180rpx] box-border text-[#333] text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] px-[20rpx]" @click.stop="refundBtnFn('logistics')">填写发货物流</view>
  93. <view v-if="['5'].indexOf(detail.status) != -1" class="min-w-[180rpx] box-border text-[#333] text-[26rpx] h-[70rpx] flex-center border-[2rpx] border-solid border-[#ccc] rounded-full ml-[20rpx] px-[20rpx]" @click.stop="refundBtnFn('editLogistics')">编辑发货物流</view>
  94. </view>
  95. </view>
  96. </view>
  97. <view v-else>
  98. <view class="bg-linear">
  99. <!-- #ifdef MP-WEIXIN -->
  100. <top-tabbar :data="topTabbarData" :scrollBool="topTabarObj.getScrollBool()" />
  101. <!-- #endif -->
  102. <view class="flex justify-between items-center pl-[40rpx] pr-[50rpx] h-[280rpx] box-border pb-[90rpx]">
  103. <view class="text-[36rpx] font-500 leading-[42rpx] text-[#fff]">{{ detail.status_name }}</view>
  104. <view class="flex items-center">
  105. <image class="w-[180rpx] h-[140rpx]" :src="img('addon/mall/detail/payment.png')" mode="aspectFit"/>
  106. </view>
  107. </view>
  108. </view>
  109. <view class="sidebar-margin card-template mt-[-79rpx] flex justify-between flex-wrap">
  110. <view class="w-[150rpx] h-[150rpx] flex-2" @click="goodsEvent(detail.order_goods.goods_id)">
  111. <u--image radius="var(--goods-rounded-big)" width="150rpx" height="150rpx" :src="img(detail.order_goods.sku_image ? detail.order_goods.sku_image : '')" model="aspectFill">
  112. <template #error>
  113. <image class="w-[150rpx] h-[150rpx] rounded-[var(--goods-rounded-big)] overflow-hidden" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
  114. </template>
  115. </u--image>
  116. </view>
  117. <view class="ml-[20rpx] flex flex-1 flex-col justify-between">
  118. <view>
  119. <view class="text-[28rpx] max-w-[490rpx] truncate leading-[40rpx]">{{ detail.order_goods.goods_name }}</view>
  120. <view class="text-[24rpx] mt-[14rpx] text-[var(--text-color-light9)] truncate max-w-[490rpx] leading-[28rpx]" v-if="detail.order_goods.sku_name">
  121. {{ detail.order_goods.sku_name }}
  122. </view>
  123. </view>
  124. <view class="flex justify-between items-center leading-[28rpx]">
  125. <view class="price-font">
  126. <text class="text-[24rpx]">¥</text>
  127. <text class="text-[40rpx] font-500">{{ parseFloat(detail.order_goods.price).toFixed(2).split('.')[0] }}</text>
  128. <text class="text-[24rpx] font-500">.{{ parseFloat(detail.order_goods.price).toFixed(2).split('.')[1] }}</text>
  129. </view>
  130. <text class="text-right text-[26rpx]">x{{ detail.order_goods.num }}</text>
  131. </view>
  132. </view>
  133. </view>
  134. <view class="sidebar-margin card-template top-mar">
  135. <view class="card-template-item justify-between text-[28rpx]">
  136. <view>联系人</view>
  137. <view>{{ detail.refund_address.contact_name }}</view>
  138. </view>
  139. <view class="card-template-item justify-between text-[28rpx]">
  140. <view>手机号</view>
  141. <view>{{ detail.refund_address.mobile }}</view>
  142. </view>
  143. <view class="card-template-item justify-between text-[28rpx]">
  144. <view>退货地址</view>
  145. <view class="max-w-[460rpx] text-sm text-right" v-if="detail.refund_address">{{ detail.refund_address.full_address || '--' }}</view>
  146. </view>
  147. </view>
  148. <view class="sidebar-margin card-template top-mar py-[var(--top-m)]">
  149. <view class="title">物流信息</view>
  150. <u--form labelPosition="left" :model="formData" :rules="rules" errorType='toast' ref="deliveryForm" labelWidth="140rpx" :labelStyle="{'fontSize': '28rpx'}">
  151. <u-form-item label="物流公司" prop="express_company" :borderBottom="false">
  152. <u--input pl border="none" v-model="formData.express_company" placeholder="请输入物流公司" placeholderClass="text-sm !text-[var(--text-color-light9)]" fontSize="28rpx" maxlength="50"></u--input>
  153. </u-form-item>
  154. <view class="mt-[16rpx]">
  155. <u-form-item label="物流单号" prop="express_number" :borderBottom="false">
  156. <u--input border="none" placeholder="请输入物流单号" v-model="formData.express_number" placeholderClass="text-sm !text-[var(--text-color-light9)]" fontSize="28rpx" maxlength="100"></u--input>
  157. </u-form-item>
  158. </view>
  159. <view class="mt-[16rpx]">
  160. <u-form-item label="物流说明" :borderBottom="false">
  161. <u--input border="none" placeholder="选填" v-model="formData.remark" placeholderClass="text-sm !text-[var(--text-color-light9)]" fontSize="28rpx" maxlength="100"></u--input>
  162. </u-form-item>
  163. </view>
  164. </u--form>
  165. </view>
  166. <u-tabbar :fixed="true" :placeholder="true" :safeAreaInsetBottom="true" zIndex="10">
  167. <view class="flex-1 pl-[var(--sidebar-m)] pr-[var(--sidebar-m)] bg-[var(--page-bg-color)]">
  168. <button class="primary-btn-bg text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500" hover-class="none" @click="deliverySave">提交</button>
  169. </view>
  170. </u-tabbar>
  171. </view>
  172. <logistics-tracking ref="materialRef"></logistics-tracking>
  173. <u-modal :show="cancelRefundshow" confirmColor="var(--primary-color)" :content="t('cancelRefundContent')" :showCancelButton="true" :closeOnClickOverlay="true" @cancel="refundCancel" @confirm="refundConfirm"></u-modal>
  174. </view>
  175. <loading-page :loading="loading"></loading-page>
  176. <!-- #ifdef MP-WEIXIN -->
  177. <!-- 小程序隐私协议 -->
  178. <wx-privacy-popup ref="wxPrivacyPopupRef"></wx-privacy-popup>
  179. <!-- #endif -->
  180. </view>
  181. </template>
  182. <script setup lang="ts">
  183. import { ref, reactive, computed, nextTick } from 'vue';
  184. import { onLoad } from '@dcloudio/uni-app'
  185. import { t } from '@/locale'
  186. import { img, redirect, copy, goback } from '@/utils/common';
  187. import { topTabar } from '@/utils/topTabbar'
  188. import { getRefundDetail, refundDelivery, editRefundDelivery, closeRefund } from '@/addon/mall/api/refund';
  189. import logisticsTracking from '@/addon/mall/pages/order/components/logistics-tracking/logistics-tracking.vue'
  190. /********* 自定义头部 - start ***********/
  191. const topTabarObj = topTabar()
  192. let topTabbarData = topTabarObj.setTopTabbarParam({title:'退款详情'})
  193. /********* 自定义头部 - end ***********/
  194. const detail = ref<Object>({});
  195. const loading = ref<boolean>(true);
  196. const orderRefundNo = ref('');
  197. const type = ref('');
  198. const isEditDelivery = ref(false);
  199. const sendMessageTitle = ref('')
  200. const sendMessagePath = ref('')
  201. const sendMessageImg = ref('')
  202. // 物流信息
  203. const formData = ref({
  204. express_number: '',
  205. express_company: '',
  206. remark: ''
  207. })
  208. // 物流验证
  209. const rules = {
  210. 'express_number': {
  211. type: 'string',
  212. required: true,
  213. message: '请输入物流单号',
  214. trigger: ['blur', 'change']
  215. },
  216. 'express_company': {
  217. type: 'string',
  218. required: true,
  219. message: '请输入物流公司',
  220. trigger: ['blur', 'change']
  221. }
  222. }
  223. const wxPrivacyPopupRef:any = ref(null)
  224. onLoad((option:any) => {
  225. orderRefundNo.value = option.order_refund_no;
  226. if (orderRefundNo.value) {
  227. type.value = option.type;
  228. isEditDelivery.value = option.is_edit_delivery;
  229. refundDetailFn(orderRefundNo.value);
  230. // #ifdef MP
  231. nextTick(()=>{
  232. if(wxPrivacyPopupRef.value) wxPrivacyPopupRef.value.proactive();
  233. })
  234. // #endif
  235. } else {
  236. let parameter = {
  237. url: '/addon/mall/pages/refund/list',
  238. title: '缺少订单号'
  239. };
  240. goback(parameter);
  241. }
  242. });
  243. const refundDetailFn = (refundNo: any) => {
  244. loading.value = true;
  245. getRefundDetail(refundNo).then((res: any) => {
  246. detail.value = res.data;
  247. // 赋值物流信息
  248. if(isEditDelivery.value && detail.value.delivery){
  249. formData.value.express_number = detail.value.delivery.express_number
  250. formData.value.express_company = detail.value.delivery.express_company
  251. formData.value.remark = detail.value.delivery.remark
  252. }
  253. sendMessageTitle.value = detail.value.order_goods.goods_name
  254. sendMessageImg.value = img(detail.value.order_goods.goods_image_thumb_small || '')
  255. loading.value = false;
  256. }).catch(() => {
  257. loading.value = false;
  258. })
  259. }
  260. const goodsEvent = (id: number) => {
  261. redirect({
  262. url: '/addon/mall/pages/goods/detail',
  263. param: {
  264. goods_id: id
  265. }
  266. })
  267. }
  268. // 提交物流信息
  269. let deliveryForm = ref()
  270. const deliverySave = ()=>{
  271. deliveryForm.value.validate().then(res => {
  272. let obj = {delivery: formData.value,order_refund_no: detail.value.order_refund_no}
  273. let api = isEditDelivery.value ? editRefundDelivery(obj) : refundDelivery(obj);
  274. api.then((res) => {
  275. setTimeout(()=>{
  276. redirect({ url: '/addon/mall/pages/refund/list' })
  277. },500)
  278. }).catch(() => {
  279. })
  280. })
  281. }
  282. const refundBtnFn = (type:any) => {
  283. if(type == 'cancel'){
  284. currRefundOn = detail.value.order_refund_no;
  285. cancelRefundshow.value = true;
  286. }else if(type == 'edit'){
  287. redirect({ url: '/addon/mall/pages/refund/edit_apply', param: { order_refund_no : detail.value.order_refund_no } })
  288. }else if(type == 'logistics'){
  289. redirect({ url: '/addon/mall/pages/refund/detail', param: { order_refund_no : detail.value.order_refund_no, type: 'logistics' } })
  290. }else if(type == 'editLogistics'){
  291. redirect({ url: '/addon/mall/pages/refund/detail', param: { order_refund_no : detail.value.order_refund_no, type: 'logistics', is_edit_delivery: true } })
  292. }
  293. }
  294. // 撤销维权
  295. let cancelRefundshow = ref(false);
  296. let currRefundOn = "";
  297. const refundConfirm = ()=>{
  298. closeRefund(currRefundOn).then((res) => {
  299. cancelRefundshow.value = false;
  300. refundDetailFn(orderRefundNo.value);
  301. }).catch(() => {
  302. cancelRefundshow.value = false;
  303. })
  304. }
  305. const refundCancel = ()=>{
  306. cancelRefundshow.value = false;
  307. }
  308. </script>
  309. <style lang="scss" scoped>
  310. .text-item {
  311. overflow: hidden;
  312. text-overflow: ellipsis;
  313. display: -webkit-box;
  314. -webkit-line-clamp: 2;
  315. -webkit-box-orient: vertical;
  316. }
  317. .bg-linear {
  318. background: linear-gradient( 94deg, #F84949 8%, #FF9A68 99%);
  319. }
  320. :deep(.u-form-item__body__left__content__label){
  321. height: 40rpx !important;
  322. }
  323. :deep(.u-form-item__body){
  324. padding: 0 !important;
  325. height: 40rpx !important;
  326. }
  327. :deep(.u-form-item){
  328. margin-bottom: 34rpx;
  329. }
  330. </style>