service.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one" v-if="status!='-3'">
  5. <view class="one_1">
  6. <text>售后商品</text>
  7. </view>
  8. <view class="one_2">
  9. <view class="list" v-for="(item,index) in info.goods" :key="index">
  10. <view class="list_1">
  11. <image class="image"
  12. :src="item.goods.file&&item.goods.file.length>0?item.goods.file[0].url:''" mode="">
  13. </image>
  14. </view>
  15. <view class="list_2">
  16. <view class="name">
  17. {{item.goods_name}}
  18. </view>
  19. <view class="other_1">
  20. <text>规格:</text>
  21. <text>{{item.name}}</text>
  22. </view>
  23. <view class="other_1">
  24. <text>金额:</text>
  25. <text
  26. class="money">¥{{info.type=='0'?item.price||item.sell_money:item.group_config.money}}</text>
  27. </view>
  28. <view class="other_1">
  29. <text>数量:</text>
  30. <text>×{{item.buy_num}}</text>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="two">
  37. <view class="two_1" v-if="status=='3'||status=='-3'">
  38. <uni-forms ref="thrform" :rules="thrrules" :model="thrform" label-width="auto">
  39. <uni-forms-item label="售后商品" name="goods" v-if="status!='-3'">
  40. <picker class="picker" mode="selector" :range="info.goods" @change="goodsChange"
  41. range-key="goods_name">
  42. <view>{{thrform.goods_name||'请选择退款商品'}}</view>
  43. </picker>
  44. </uni-forms-item>
  45. <uni-forms-item label="售后类型" name="type">
  46. <picker class="picker" mode="selector" :range="typeList" @change="typeChange"
  47. range-key="label">
  48. <view>{{thrform.type_name||'请选择售后类型'}}</view>
  49. </picker>
  50. </uni-forms-item>
  51. <uni-forms-item label="退款金额" name="money" v-if="thrform.type=='1'||thrform.type=='2'">
  52. <uni-easyinput type="digit" v-model="thrform.money" @input="toMoney"
  53. placeholder="请输入退款金额" />
  54. <view class="money">
  55. 最大退款金额不能超过 <text>{{moneyInfo.payTotal||0}}</text>,<text @tap="toAll">全部提现</text>
  56. </view>
  57. </uni-forms-item>
  58. <uni-forms-item label="申请理由" name="reason">
  59. <picker class="picker" mode="selector" :range="reasonList" @change="reasonChange"
  60. range-key="label">
  61. <view>{{thrform.reason_name||'请选择申请理由'}}</view>
  62. </picker>
  63. </uni-forms-item>
  64. <uni-forms-item label="售后描述" name="desc">
  65. <uni-easyinput type="textarea" v-model="thrform.desc" placeholder="请输入售后描述" />
  66. </uni-forms-item>
  67. <uni-forms-item label="附件" name="file">
  68. <upload :list="thrform.file" name="file" :count="1" @uplSuc="uplSuc" @uplDel="uplDel">
  69. </upload>
  70. </uni-forms-item>
  71. <view class="btn">
  72. <button type="primary" size="mini" @click="onSubmit('thrform')">提交保存</button>
  73. </view>
  74. </uni-forms>
  75. </view>
  76. <view class="two_2" v-else>
  77. <uni-forms ref="form" :rules="rules" :model="form" label-width="auto">
  78. <uni-forms-item label="申请描述" name="desc">
  79. <uni-easyinput type="textarea" autoHeight v-model="form.desc" placeholder="请输入申请描述" />
  80. </uni-forms-item>
  81. <view class="btn">
  82. <button type="default" size="mini" @click="onSubmit('form')">提交保存</button>
  83. </view>
  84. </uni-forms>
  85. </view>
  86. </view>
  87. </view>
  88. </mobile-frame>
  89. </template>
  90. <script>
  91. import upload from '@/components/upload/index.vue';
  92. export default {
  93. components: {
  94. upload
  95. },
  96. data() {
  97. return {
  98. id: '',
  99. status: '',
  100. // 用户信息
  101. user: {},
  102. // 信息详情
  103. info: {},
  104. // 仅退款
  105. form: {},
  106. rules: {
  107. desc: {
  108. rules: [{
  109. required: true,
  110. errorMessage: '请输入申请描述',
  111. }]
  112. },
  113. },
  114. // 已收到货
  115. thrform: {
  116. file: []
  117. },
  118. // 最大退款数
  119. moneyInfo: {},
  120. thrrules: {
  121. type: {
  122. rules: [{
  123. required: true,
  124. errorMessage: '请选择售后类型',
  125. }]
  126. },
  127. goods: {
  128. rules: [{
  129. required: true,
  130. errorMessage: '请选择退款商品',
  131. }]
  132. },
  133. reason: {
  134. rules: [{
  135. required: true,
  136. errorMessage: '请选择申请理由',
  137. }]
  138. },
  139. },
  140. // 售后类型
  141. typeList: [],
  142. // 申请理由
  143. reasonList: [],
  144. };
  145. },
  146. onLoad: async function(e) {
  147. const that = this;
  148. that.$set(that, `id`, e && e.id || '');
  149. that.$set(that, `status`, e && e.status || '');
  150. // 查询其他信息
  151. await that.searchOther();
  152. // 监听用户登录
  153. await that.watchLogin();
  154. },
  155. methods: {
  156. watchLogin() {
  157. const that = this;
  158. uni.getStorage({
  159. key: 'token',
  160. success: function(res) {
  161. let user = that.$jwt(res.data);
  162. if (user) {
  163. that.$set(that, `user`, user);
  164. that.search();
  165. }
  166. },
  167. fail: function() {
  168. uni.navigateTo({
  169. url: `/pages/login/index`
  170. })
  171. }
  172. })
  173. },
  174. async search() {
  175. const that = this;
  176. let res;
  177. if (that.status != '-3') {
  178. res = await that.$api(`/orderDetail/${that.id}`, 'GET')
  179. if (res.errcode == '0') {
  180. for (let val of res.data.goods) val.goods_name = val.goods.name;
  181. that.$set(that, `info`, res.data)
  182. } else {
  183. uni.showToast({
  184. title: res.errmsg,
  185. icon: 'none'
  186. })
  187. }
  188. } else {
  189. res = await that.$api(`/groupOrder/userView/${that.id}`, 'GET', {}, 'group')
  190. if (res.errcode == '0') {
  191. that.$set(that.thrform, `goods`, res.data.goods._id);
  192. that.$set(that, `info`, res.data)
  193. } else {
  194. uni.showToast({
  195. title: res.errmsg,
  196. icon: 'none'
  197. })
  198. }
  199. }
  200. },
  201. // 售后请求
  202. // 已收到货
  203. goodsChange(e) {
  204. const that = this;
  205. let data = that.info.goods[e.detail.value];
  206. if (data) that.$set(that.info, `goods`, [data])
  207. that.$set(that.thrform, `goods`, data._id);
  208. that.$set(that.thrform, `goods_name`, data.goods_name);
  209. },
  210. // 选择售后类型
  211. async typeChange(e) {
  212. const that = this;
  213. let thrform = that.thrform;
  214. let data = that.typeList[e.detail.value];
  215. if (data) {
  216. that.$set(that.thrform, `type`, data.value);
  217. that.$set(that.thrform, `type_name`, data.label);
  218. }
  219. if (that.status != '-3') {
  220. if (data.value != '3') {
  221. if (thrform.goods) {
  222. const arr = await that.$api(`/afterSale/cgfr`, 'POST', {
  223. order_detail: that.id,
  224. goods_id: thrform.goods
  225. });
  226. if (arr.errcode == '0') {
  227. that.$set(that, `moneyInfo`, arr.data);
  228. } else {
  229. uni.showToast({
  230. title: arr.errmsg,
  231. icon: 'none',
  232. })
  233. }
  234. } else {
  235. uni.showToast({
  236. title: '缺少商品信息',
  237. icon: 'none'
  238. })
  239. }
  240. }
  241. } else {
  242. that.$set(that.moneyInfo, `payTotal`, that.info.pay);
  243. }
  244. },
  245. // 选择申请理由
  246. reasonChange(e) {
  247. const that = this;
  248. let data = that.reasonList[e.detail.value];
  249. if (data) {
  250. that.$set(that.thrform, `reason`, data.value);
  251. that.$set(that.thrform, `reason_name`, data.label);
  252. }
  253. },
  254. // 退款金额
  255. toMoney(value) {
  256. const that = this;
  257. let money = that.moneyInfo.payTotal;
  258. if (parseFloat(value) > parseFloat(money)) {
  259. uni.showToast({
  260. title: '输入金额不能超过实际支付金额',
  261. icon: 'none'
  262. })
  263. }
  264. },
  265. // 图片上传
  266. uplSuc(e) {
  267. const that = this;
  268. that.$set(that.thrform, `${e.name}`, [...that.thrform[e.name], e.data]);
  269. },
  270. // 图片删除
  271. uplDel(e) {
  272. const that = this;
  273. let data = that.thrform[e.name];
  274. let arr = data.filter((i, index) => index != e.data.index);
  275. that.$set(that.thrform, `${e.name}`, arr)
  276. },
  277. // 全部提现
  278. toAll() {
  279. const that = this;
  280. that.$set(that.thrform, `money`, that.moneyInfo.payTotal)
  281. },
  282. // 提交保存
  283. async onSubmit(ref) {
  284. const that = this;
  285. let status = that.status;
  286. that.$refs[ref].validate().then(async params => {
  287. if (status == '3') {
  288. that.Receip(params)
  289. } else {
  290. that.orderCancel(params)
  291. }
  292. })
  293. },
  294. // 已收到货
  295. async Receip(e) {
  296. const that = this;
  297. e.file = that.thrform.file;
  298. let money = that.moneyInfo.payTotal;
  299. let res;
  300. if (e.type != '3') {
  301. if (e.money) {
  302. if (parseFloat(e.money) > parseFloat(money)) {
  303. uni.showToast({
  304. title: '输入金额不能超过实际支付金额',
  305. icon: 'none'
  306. })
  307. } else {
  308. if (that.status == '-3') {
  309. e.order = that.id;
  310. res = await that.$api(`/groupAfterSale`, 'POST', e, 'group')
  311. } else {
  312. e.order_detail = that.id;
  313. res = await that.$api(`/afterSale`, 'POST', e)
  314. }
  315. }
  316. } else {
  317. uni.showToast({
  318. title: `请输入退款金额`,
  319. icon: 'none',
  320. });
  321. }
  322. } else {
  323. if (that.status == '-3') {
  324. e.order = that.id;
  325. res = await that.$api(`/groupAfterSale`, 'POST', e, 'group')
  326. } else {
  327. e.order_detail = that.id;
  328. res = await that.$api(`/afterSale`, 'POST', e)
  329. }
  330. }
  331. if (res.errcode == '0') {
  332. uni.showToast({
  333. title: '申请售后完成',
  334. icon: 'none'
  335. })
  336. uni.navigateBack({
  337. detail: 1
  338. })
  339. } else {
  340. uni.showToast({
  341. title: res.errmsg,
  342. icon: 'none'
  343. })
  344. }
  345. },
  346. // 未收到货
  347. async orderCancel(e) {
  348. const that = this;
  349. let res;
  350. if (that.status == '-3') {
  351. e.order = that.id;
  352. res = await that.$api(`/groupAfterSale`, 'POST', e, 'group')
  353. } else {
  354. e.order_detail = that.id;
  355. res = await that.$api(`/afterSale`, 'POST', e)
  356. }
  357. if (res.errcode == '0') {
  358. uni.showToast({
  359. title: `申请售后成功`,
  360. icon: 'success',
  361. });
  362. uni.navigateBack({
  363. detail: 1
  364. })
  365. } else {
  366. uni.showToast({
  367. title: res.errmsg,
  368. icon: 'none',
  369. })
  370. }
  371. },
  372. // 查询其他信息
  373. async searchOther() {
  374. const that = this;
  375. let res;
  376. res = await that.$api(`/dictData`, 'GET', {
  377. code: "afterSale_type"
  378. });
  379. if (res.errcode == '0') {
  380. let type = res.data.filter(i => i.value != '4' && i.value != '5')
  381. that.$set(that, `typeList`, type)
  382. }
  383. res = await that.$api(`/dictData`, 'GET', {
  384. code: "afterSale_reason"
  385. });
  386. if (res.errcode == '0') that.$set(that, `reasonList`, res.data)
  387. }
  388. }
  389. }
  390. </script>
  391. <style lang="scss">
  392. .main {
  393. display: flex;
  394. flex-direction: column;
  395. width: 100vw;
  396. height: 100vh;
  397. .one {
  398. margin: 2vw;
  399. border: 1px solid #f1f1f1;
  400. border-radius: 5px;
  401. padding: 2vw;
  402. .one_1 {
  403. margin: 0 0 2vw 0;
  404. text {
  405. font-size: 16px;
  406. font-weight: bold;
  407. }
  408. }
  409. .one_2 {
  410. .list {
  411. display: flex;
  412. background-color: #f1f1f1;
  413. padding: 2vw;
  414. margin: 0 0 2vw 0;
  415. border-radius: 5px;
  416. .list_1 {
  417. width: 22vw;
  418. height: 22vw;
  419. border-radius: 5px;
  420. .image {
  421. width: 100%;
  422. height: 100%;
  423. border-radius: 5px;
  424. }
  425. }
  426. .list_2 {
  427. width: 63vw;
  428. padding: 0 0 0 2vw;
  429. .name {
  430. font-size: 16px;
  431. font-weight: bold;
  432. margin: 0 0 0.5vw 0;
  433. }
  434. .other_1 {
  435. .money {
  436. color: #ff0000 !important;
  437. }
  438. text {
  439. font-size: 13px;
  440. color: #858585;
  441. }
  442. text:last-child {
  443. color: #000000;
  444. }
  445. }
  446. }
  447. }
  448. .list:last-child {
  449. margin: 0;
  450. }
  451. }
  452. }
  453. .two {
  454. margin: 2vw;
  455. border: 1px solid #f1f1f1;
  456. border-radius: 5px;
  457. padding: 2vw;
  458. .two_1 {
  459. .picker {
  460. border: 1px solid #3333;
  461. border-radius: 5px;
  462. padding: 2vw;
  463. }
  464. .money {
  465. margin: 1vw 0 0 0;
  466. text {
  467. color: #ff0000;
  468. }
  469. text:last-child {
  470. color: #6A5ACD;
  471. }
  472. }
  473. .btn {
  474. text-align: center;
  475. }
  476. }
  477. .two_2 {
  478. .btn {
  479. text-align: center;
  480. button {
  481. background-color: var(--f35BColor);
  482. color: #fff;
  483. }
  484. }
  485. }
  486. }
  487. }
  488. </style>