service.vue 8.0 KB

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