noService.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <view class="list" v-for="(item,index) in goodsList" :key="index">
  6. <view class="list_1">
  7. <text>退款商品</text>
  8. </view>
  9. <view class="list_2">
  10. <view class="l">
  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="c">
  16. <view class="name">
  17. {{item.goods.name}}
  18. </view>
  19. <view class="specs">
  20. {{item.name}}
  21. </view>
  22. </view>
  23. <view class="r">
  24. <view v-if="type=='0'" class="price">
  25. ¥{{item.sell_money}}
  26. </view>
  27. <view v-else class="price">
  28. ¥{{item.group_config.money}}
  29. </view>
  30. <view class="num">
  31. ×{{item.buy_num}}
  32. </view>
  33. </view>
  34. </view>
  35. </view>
  36. </view>
  37. <view class="two">
  38. <uni-forms ref="form" :rules="rules" :model="form" label-width="auto">
  39. <uni-forms-item label="申请售后理由" name="desc">
  40. <uni-easyinput type="textarea" v-model="form.desc" placeholder="请输入申请售后描述" />
  41. </uni-forms-item>
  42. <view class="btn">
  43. <button type="primary" size="mini" @click="onSubmit('form')">提交保存</button>
  44. </view>
  45. </uni-forms>
  46. </view>
  47. </view>
  48. </mobile-frame>
  49. </template>
  50. <script>
  51. export default {
  52. data() {
  53. return {
  54. id: '',
  55. user: {},
  56. form: {},
  57. type: '',
  58. // 退货商品
  59. goodsList: [],
  60. icon: [],
  61. rules: {
  62. desc: {
  63. rules: [{
  64. required: true,
  65. errorMessage: '请输入申请售后描述',
  66. }]
  67. },
  68. },
  69. };
  70. },
  71. onLoad: async function(e) {
  72. const that = this;
  73. that.$set(that, `id`, e && e.id || '');
  74. // 监听用户登录
  75. that.watchLogin();
  76. },
  77. methods: {
  78. // 提交保存
  79. async onSubmit(ref) {
  80. const that = this;
  81. that.$refs[ref].validate().then(async params => {
  82. params.order_detail = that.id
  83. const arr = await that.$api(`/afterSale/orderCancel`, 'POST', params);
  84. if (arr.errcode == '0') {
  85. uni.showToast({
  86. title: `申请售后成功`,
  87. icon: 'success',
  88. });
  89. uni.navigateBack({
  90. detail: 1
  91. })
  92. } else {
  93. uni.showToast({
  94. title: arr.errmsg,
  95. icon: 'none',
  96. })
  97. }
  98. })
  99. },
  100. // 监听用户是否登录
  101. watchLogin() {
  102. const that = this;
  103. uni.getStorage({
  104. key: 'token',
  105. success: async function(res) {
  106. let user = that.$jwt(res.data);
  107. if (user) {
  108. that.$set(that, `user`, user);
  109. if (that.id) {
  110. let arr = await that.$api(`/orderDetail/${that.id}`, 'GET')
  111. if (arr.errcode == '0') {
  112. that.$set(that, `goodsList`, arr.data.goods)
  113. that.$set(that, `type`, arr.data.type)
  114. }
  115. }
  116. }
  117. },
  118. fail: function(err) {
  119. uni.reLaunch({
  120. url: '/pages/login/index'
  121. })
  122. }
  123. })
  124. },
  125. }
  126. }
  127. </script>
  128. <style lang="scss">
  129. .main {
  130. .one {
  131. .list {
  132. margin: 2vw;
  133. padding: 2vw;
  134. border-radius: 2vw;
  135. border: 1px solid #3333;
  136. .list_1 {
  137. margin: 0 0 1vw 0;
  138. display: flex;
  139. flex-direction: row;
  140. justify-content: space-between;
  141. font-size: var(--font14Size);
  142. font-weight: bold;
  143. }
  144. .list_2 {
  145. margin: 0 0 1vw 0;
  146. display: flex;
  147. .l {
  148. width: 20vw;
  149. .image {
  150. width: 100%;
  151. height: 20vw;
  152. border-radius: 5px;
  153. }
  154. }
  155. .c {
  156. width: 50vw;
  157. padding: 0 2vw;
  158. .specs{
  159. color: var(--f85Color);
  160. font-size: var(--font12Size);
  161. }
  162. }
  163. .r {
  164. width: 25vw;
  165. text-align: right;
  166. }
  167. }
  168. .other {
  169. margin: 0 0 2vw 0;
  170. text-align: right;
  171. text {
  172. font-size: 14px;
  173. padding: 0 0 0 2vw;
  174. }
  175. }
  176. .btn {
  177. text-align: right;
  178. margin: 2vw 0 0 0;
  179. border-top: 1px solid #f1fff1;
  180. button {
  181. margin: 2vw 0 0 2vw;
  182. }
  183. }
  184. }
  185. }
  186. .two {
  187. padding: 2vw;
  188. .btn {
  189. text-align: center;
  190. button {
  191. width: 30%;
  192. font-size: 14px;
  193. background-color: var(--f35BColor);
  194. }
  195. }
  196. }
  197. }
  198. .uni-forms-item {
  199. margin-bottom: 6vw !important;
  200. display: flex;
  201. flex-direction: row;
  202. }
  203. </style>