service.vue 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  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>¥{{info.type=='0'?item.sell_money:item.group_config.money}}</text>
  26. </view>
  27. <view class="other_1">
  28. <text>数量:</text>
  29. <text>×{{item.buy_num}}</text>
  30. </view>
  31. </view>
  32. </view>
  33. </view>
  34. </view>
  35. <view class="two">
  36. <view class="two_1" v-if="status=='3'">
  37. <uni-forms ref="thrform" :rules="thrrules" :model="thrform" label-width="auto">
  38. <uni-forms-item label="售后商品" name="goods_id">
  39. <picker class="picker" mode="selector" :range="info.goods" @change="goodsChange"
  40. range-key="goods_name">
  41. <view>{{thrform.goods_name||'请选择退款商品'}}</view>
  42. </picker>
  43. </uni-forms-item>
  44. <uni-forms-item label="售后类型" name="type">
  45. <picker class="picker" mode="selector" :range="typeList" @change="typeChange"
  46. range-key="label">
  47. <view>{{thrform.type_name||'请选择售后类型'}}</view>
  48. </picker>
  49. </uni-forms-item>
  50. <uni-forms-item label="退款金额" name="money" v-if="thrform.type=='0'||thrform.type=='1'">
  51. <uni-easyinput type="digit" v-model="thrform.money" @input="toMoney"
  52. placeholder="请输入退款金额" />
  53. <view>
  54. 最大退款金额不能超过{{moneyInfo.payTotal||0}}
  55. </view>
  56. </uni-forms-item>
  57. <uni-forms-item label="申请理由" name="reason">
  58. <picker class="picker" mode="selector" :range="reasonList" @change="reasonChange"
  59. range-key="label">
  60. <view>{{thrform.reason_name||'请选择申请理由'}}</view>
  61. </picker>
  62. </uni-forms-item>
  63. <uni-forms-item label="申请售后描述" name="desc">
  64. <uni-easyinput type="textarea" v-model="thrform.desc" placeholder="请输入申请售后描述" />
  65. </uni-forms-item>
  66. <uni-forms-item label="附件" name="icon">
  67. <upload :list="icon" name="icon" :count="1" @uplSuc="uplSuc" @uplDel="uplDel"></upload>
  68. </uni-forms-item>
  69. <view class="btn">
  70. <button type="primary" size="mini" @click="onSubmit('form')">提交保存</button>
  71. </view>
  72. </uni-forms>
  73. </view>
  74. <view class="two_2" v-else>
  75. <uni-forms ref="form" :rules="rules" :model="form" label-width="auto">
  76. <uni-forms-item label="申请描述" name="desc">
  77. <uni-easyinput type="textarea" autoHeight v-model="form.desc" placeholder="请输入申请描述" />
  78. </uni-forms-item>
  79. <view class="btn">
  80. <button type="default" size="mini" @click="onSubmit('form')">提交保存</button>
  81. </view>
  82. </uni-forms>
  83. </view>
  84. </view>
  85. </view>
  86. </mobile-frame>
  87. </template>
  88. <script>
  89. import upload from '@/components/upload/index.vue';
  90. export default {
  91. components: {
  92. upload
  93. },
  94. data() {
  95. return {
  96. id: '',
  97. status: '',
  98. // 用户信息
  99. user: {},
  100. // 信息详情
  101. info: {},
  102. // 仅退款
  103. form: {},
  104. rules: {
  105. desc: {
  106. rules: [{
  107. required: true,
  108. errorMessage: '请输入申请描述',
  109. }]
  110. },
  111. },
  112. // 已收到货
  113. thrform: {},
  114. thrrules: {},
  115. // 售后类型
  116. typeList: [],
  117. // 申请理由
  118. reasonList: [],
  119. };
  120. },
  121. onLoad: async function(e) {
  122. const that = this;
  123. that.$set(that, `id`, e && e.id || '636221e5e25ed78601dd4fbb');
  124. that.$set(that, `status`, e && e.status || '3');
  125. // 查询其他信息
  126. await that.searchOther();
  127. // 监听用户登录
  128. await that.watchLogin();
  129. },
  130. methods: {
  131. // 查询其他信息
  132. async searchOther() {
  133. const that = this;
  134. let res;
  135. res = await that.$api(`/dictData`, 'GET', {
  136. code: "afterSale_type"
  137. });
  138. if (res.errcode == '0') {
  139. let type = res.data.filter((i) => i.value !== '4' || i.value !== '5');
  140. console.log(type);
  141. that.$set(that, `typeList`, type)
  142. }
  143. res = await that.$api(`/dictData`, 'GET', {
  144. code: "afterSale_reason"
  145. });
  146. if (res.errcode == '0') {
  147. that.$set(that, `reasonList`, res.data)
  148. }
  149. },
  150. watchLogin() {
  151. const that = this;
  152. uni.getStorage({
  153. key: 'token',
  154. success: function(res) {
  155. let user = that.$jwt(res.data);
  156. if (user) {
  157. that.$set(that, `user`, user);
  158. that.search();
  159. }
  160. },
  161. fail: function() {
  162. uni.navigateTo({
  163. url: `/pages/login/index`
  164. })
  165. }
  166. })
  167. },
  168. async search() {
  169. const that = this;
  170. let id = that.id;
  171. console.log(id);
  172. let res = await that.$api(`/orderDetail/${id}`, 'GET')
  173. if (res.errcode == '0') {
  174. for (let val of res.data.goods) val.goods_name = val.goods.name;
  175. that.$set(that, `info`, res.data)
  176. } else {
  177. uni.showToast({
  178. title: res.errmsg,
  179. icon: 'none'
  180. })
  181. }
  182. },
  183. // 售后请求
  184. // 已收到货
  185. goodsChange(e) {
  186. const that = this;
  187. let data = that.info.goods[e.detail.value];
  188. if (data) that.$set(that.info, `goods`, [data])
  189. that.$set(that.thrform, `goods_name`, data.goods_name);
  190. },
  191. // 选择售后类型
  192. async typeChange(e) {
  193. const that = this;
  194. let data = that.typeList[e.detail.value];
  195. if (data) {
  196. that.$set(that.form, `type`, data.value);
  197. that.$set(that.form, `type_name`, data.label);
  198. }
  199. if (data.value != '2') {
  200. const arr = await that.$api(`/afterSale/cgfr`, 'POST', {
  201. order_detail: that.id,
  202. goods_id: that.info._id
  203. });
  204. if (arr.errcode == '0') {
  205. that.$set(that, `moneyInfo`, arr.data);
  206. } else {
  207. uni.showToast({
  208. title: arr.errmsg,
  209. icon: 'none',
  210. })
  211. }
  212. }
  213. },
  214. // 选择申请理由
  215. reasonChange(e) {
  216. const that = this;
  217. let data = that.reasonList[e.detail.value];
  218. if (data) {
  219. that.$set(that.thrform, `reason`, data.value);
  220. that.$set(that.thrform, `reason_name`, data.label);
  221. }
  222. },
  223. // 退款金额
  224. toMoney(value) {
  225. const that = this;
  226. let money = that.moneyInfo.payTotal;
  227. if (parseFloat(value) > parseFloat(money)) {
  228. uni.showToast({
  229. title: '输入金额不能超过实际支付金额',
  230. icon: 'none'
  231. })
  232. }
  233. },
  234. // 图片上传
  235. uplSuc(e) {
  236. const that = this;
  237. that.$set(that, `${e.name}`, [...that[e.name], e.data]);
  238. },
  239. // 图片删除
  240. uplDel(e) {
  241. const that = this;
  242. let data = that[e.name];
  243. let arr = data.filter((i, index) => index != e.data.index);
  244. that.$set(that, `${e.name}`, arr)
  245. },
  246. // 提交保存
  247. async onSubmit(ref) {
  248. const that = this;
  249. let status = that.status;
  250. let money = that.moneyInfo.payTotal;
  251. that.$refs[ref].validate().then(params => {
  252. if (status == '3') {
  253. if (parseFloat(params.money) > parseFloat(money)) {
  254. uni.showToast({
  255. title: '输入金额不能超过实际支付金额',
  256. icon: 'none'
  257. })
  258. } else {
  259. console.log(params);
  260. }
  261. } else {
  262. that.orderCancel(params)
  263. }
  264. })
  265. },
  266. // 未收到货
  267. async orderCancel(e) {
  268. const that = this;
  269. e.order_detail = that.id;
  270. const res = await that.$api(`/afterSale/orderCancel`, 'POST', e);
  271. if (res.errcode == '0') {
  272. uni.showToast({
  273. title: `申请售后成功`,
  274. icon: 'success',
  275. });
  276. uni.navigateBack({
  277. detail: 1
  278. })
  279. } else {
  280. uni.showToast({
  281. title: res.errmsg,
  282. icon: 'none',
  283. })
  284. }
  285. }
  286. }
  287. }
  288. </script>
  289. <style lang="scss">
  290. .main {
  291. display: flex;
  292. flex-direction: column;
  293. width: 100vw;
  294. height: 100vh;
  295. .one {
  296. margin: 2vw;
  297. border: 1px solid #f1f1f1;
  298. border-radius: 5px;
  299. padding: 2vw;
  300. .one_1 {
  301. margin: 0 0 2vw 0;
  302. text {
  303. font-size: 16px;
  304. font-weight: bold;
  305. }
  306. }
  307. .one_2 {
  308. .list {
  309. display: flex;
  310. background-color: #f1f1f1;
  311. padding: 2vw;
  312. margin: 0 0 2vw 0;
  313. border-radius: 5px;
  314. .list_1 {
  315. width: 22vw;
  316. height: 22vw;
  317. border-radius: 5px;
  318. .image {
  319. width: 100%;
  320. height: 100%;
  321. border-radius: 5px;
  322. }
  323. }
  324. .list_2 {
  325. width: 63vw;
  326. padding: 0 0 0 2vw;
  327. .name {
  328. font-size: 16px;
  329. font-weight: bold;
  330. margin: 0 0 0.5vw 0;
  331. }
  332. .other_1 {
  333. text {
  334. font-size: 13px;
  335. color: #858585;
  336. }
  337. text:last-child {
  338. color: #000000;
  339. }
  340. }
  341. }
  342. }
  343. .list:last-child {
  344. margin: 0;
  345. }
  346. }
  347. }
  348. .two {
  349. margin: 2vw;
  350. border: 1px solid #ff0000;
  351. border-radius: 5px;
  352. padding: 2vw;
  353. .two_1 {
  354. .picker {
  355. border: 1px solid #3333;
  356. border-radius: 5px;
  357. padding: 2vw;
  358. }
  359. .btn {
  360. text-align: center;
  361. }
  362. }
  363. .two_2 {
  364. .btn {
  365. text-align: center;
  366. button {
  367. background-color: var(--f35BColor);
  368. color: #fff;
  369. }
  370. }
  371. }
  372. }
  373. }
  374. </style>