after.vue 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <input type="text" v-model="searchInfo.name" @input="toInput" placeholder="搜索商品" @scroll="toScroll">
  6. </view>
  7. <view class="two">
  8. <tabs :tabs="tabs" @tabsChange="tabsChange">
  9. <view class="tabsList">
  10. <scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
  11. <view class="list-scroll-view">
  12. <view class="list" v-for="(item,index) in list" :key="index" @tap="toInfo(item)">
  13. <view class="list_1">
  14. <view class="shopname">
  15. <text class="iconfont icon-shangdian"></text>
  16. <text>{{item.shop.name}}</text>
  17. </view>
  18. <view class="type">
  19. {{item.zhType||'暂无'}}
  20. </view>
  21. </view>
  22. <view class="list_2">
  23. <image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''"
  24. mode="">
  25. </image>
  26. <view class="other">
  27. <view class="name">
  28. {{item.goods.goods.name||'暂无'}}
  29. </view>
  30. <view class="other_1">
  31. 商品规格:<text>{{item.goods.name||'暂无'}}</text>
  32. </view>
  33. <view class="other_1" v-if="item.type!='2'">
  34. 退款:<text>¥{{item.money||0}}</text>
  35. </view>
  36. <view class="other_1">
  37. 申请时间:<text>{{item.apply_time||'暂无'}}</text>
  38. </view>
  39. <view class="other_1">
  40. 售后描述:<text>{{item.desc||'暂无'}}</text>
  41. </view>
  42. <view class="other_1">
  43. 售后处理人:<text>{{item.deal_person.name||'暂无'}}</text>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="btn">
  48. <button v-if="item.status=='0'||item.status=='1'" type="default" size="mini"
  49. @tap.stop="toCancel(item)">取消售后</button>
  50. <button v-if="item.type!='0'" type="default" size="mini"
  51. @tap.stop="toRevise(item)">维护信息</button>
  52. </view>
  53. </view>
  54. <view class="is_bottom" v-if="is_bottom">
  55. <text>{{config.bottom_title}}</text>
  56. </view>
  57. </view>
  58. </scroll-view>
  59. </view>
  60. </tabs>
  61. </view>
  62. </view>
  63. </mobile-frame>
  64. </template>
  65. <script>
  66. import tabs from '@/components/tabs/index.vue';
  67. export default {
  68. components: {
  69. tabs
  70. },
  71. data() {
  72. return {
  73. // 系统设置
  74. config: {},
  75. user: {},
  76. list: [],
  77. typeList: [],
  78. total: 0,
  79. skip: 0,
  80. limit: 5,
  81. page: 0,
  82. tabs: {
  83. active: '0',
  84. menu: [{
  85. title: '申请售后',
  86. active: '0'
  87. },
  88. {
  89. title: '正在处理退款',
  90. active: '1'
  91. },
  92. {
  93. title: '已退款',
  94. active: '-1'
  95. },
  96. {
  97. title: '已退货',
  98. active: '-2'
  99. },
  100. {
  101. title: '正在处理换货',
  102. active: '3'
  103. },
  104. {
  105. title: '已换货',
  106. active: '-3'
  107. }
  108. ]
  109. },
  110. status: '0',
  111. // 数据是否触底
  112. is_bottom: false,
  113. scrollTop: 0,
  114. };
  115. },
  116. onLoad: async function() {
  117. const that = this;
  118. that.searchConfig();
  119. // 查询其他信息
  120. await that.searchOther();
  121. // 监听用户登录
  122. await that.watchLogin();
  123. },
  124. methods: {
  125. // 查询基本设置
  126. searchConfig() {
  127. const that = this;
  128. uni.getStorage({
  129. key: 'config',
  130. success: function(res) {
  131. if (res.data) that.$set(that, `config`, res.data)
  132. },
  133. fail: function(err) {
  134. console.log(err);
  135. }
  136. })
  137. },
  138. // 选择选项卡
  139. tabsChange(e) {
  140. const that = this;
  141. that.$set(that.tabs, `active`, e.active)
  142. that.$set(that, `status`, e.active);
  143. that.clearPage();
  144. that.search()
  145. },
  146. // 订单详细
  147. toInfo(item) {
  148. uni.navigateTo({
  149. url: `/pagesMy/order/info?id=${item.order_detail._id}&status=${item.order_detail.status}`
  150. })
  151. },
  152. // 维护信息
  153. toRevise(e) {
  154. uni.navigateTo({
  155. url: `/pagesMy/order/detail?id=${e.id||e._id}`
  156. })
  157. },
  158. // 取消售后
  159. toCancel(e) {
  160. const that = this;
  161. uni.showModal({
  162. title: '提示',
  163. content: '确定删除售后申请吗?',
  164. success: async function(res) {
  165. if (res.confirm) {
  166. const arr = await that.$api(`/afterSale/${e._id}`, 'DELETE');
  167. if (arr.errcode == '0') {
  168. uni.showToast({
  169. title: '删除售后成功',
  170. icon: 'none'
  171. })
  172. that.clearPage();
  173. that.search();
  174. } else {
  175. uni.showToast({
  176. title: arr.errmsg,
  177. icon: 'none'
  178. })
  179. }
  180. }
  181. }
  182. });
  183. },
  184. // 监听用户是否登录
  185. watchLogin() {
  186. const that = this;
  187. uni.getStorage({
  188. key: 'token',
  189. success: function(res) {
  190. let user = that.$jwt(res.data);
  191. if (user) that.$set(that, `user`, user);
  192. that.search();
  193. },
  194. fail: function(err) {
  195. uni.navigateTo({
  196. url: `/pages/login/index`
  197. })
  198. }
  199. });
  200. },
  201. // 查询列表
  202. async search() {
  203. const that = this;
  204. let user = that.user;
  205. let status = that.status;
  206. const arr = await that.$api(`/afterSale`, 'GET', {
  207. customer: user._id,
  208. status: that.status,
  209. });
  210. if (arr.errcode == '0') {
  211. let list = [...that.list, ...arr.data];
  212. for (let val of list) {
  213. let type = that.typeList.find(i => i.value == val.type)
  214. if (type) val.zhType = type.label;
  215. val.url = val?.goods?.goods?.file;
  216. }
  217. that.$set(that, `list`, list)
  218. that.$set(that, `total`, arr.total)
  219. } else {
  220. uni.showToast({
  221. title: arr.errmsg,
  222. });
  223. }
  224. },
  225. // 查询其他信息
  226. async searchOther() {
  227. const that = this;
  228. let res;
  229. res = await that.$api(`/dictData`, 'GET', {
  230. code: "afterSale_type"
  231. });
  232. if (res.errcode == '0') {
  233. that.$set(that, `typeList`, res.data)
  234. }
  235. },
  236. // 分页
  237. toPage(e) {
  238. const that = this;
  239. let list = that.list;
  240. let limit = that.limit;
  241. if (that.total > list.length) {
  242. uni.showLoading({
  243. title: '加载中',
  244. mask: true
  245. })
  246. let page = that.page + 1;
  247. that.$set(that, `page`, page)
  248. let skip = page * limit;
  249. that.$set(that, `skip`, skip)
  250. that.search();
  251. uni.hideLoading();
  252. } else that.$set(that, `is_bottom`, true)
  253. },
  254. toScroll(e) {
  255. const that = this;
  256. let up = that.scrollTop;
  257. that.$set(that, `scrollTop`, e.detail.scrollTop);
  258. let num = Math.sign(up - e.detail.scrollTop);
  259. if (num == 1) that.$set(that, `is_bottom`, false);
  260. },
  261. // 清空列表
  262. clearPage() {
  263. const that = this;
  264. that.$set(that, `list`, [])
  265. that.$set(that, `skip`, 0)
  266. that.$set(that, `limit`, 5)
  267. that.$set(that, `page`, 0)
  268. }
  269. },
  270. onPullDownRefresh: async function() {
  271. const that = this;
  272. that.$set(that, `list`, [])
  273. that.$set(that, `skip`, 0)
  274. that.$set(that, `limit`, 6)
  275. that.$set(that, `page`, 0)
  276. await that.search();
  277. uni.stopPullDownRefresh();
  278. }
  279. }
  280. </script>
  281. <style lang="scss">
  282. .main {
  283. display: flex;
  284. flex-direction: column;
  285. width: 100vw;
  286. height: 100vh;
  287. .one {
  288. // border-bottom: 1px solid var(--f85Color);
  289. padding: 2vw;
  290. input {
  291. padding: 2vw;
  292. background-color: var(--f1Color);
  293. font-size: var(--font14Size);
  294. border-radius: 5px;
  295. }
  296. }
  297. .two {
  298. position: relative;
  299. flex-grow: 1;
  300. background-color: var(--f9Color);
  301. .tabsList {
  302. position: relative;
  303. width: 100vw;
  304. height: 82vh;
  305. .list {
  306. margin: 2vw;
  307. background-color: var(--fffColor);
  308. padding: 2vw;
  309. width: 92vw;
  310. border-radius: 5px;
  311. .list_1 {
  312. display: flex;
  313. justify-content: space-between;
  314. font-size: var(--font16Size);
  315. margin: 0 0 2vw 0;
  316. .shopname {
  317. text {
  318. margin: 0 0 0 1vw;
  319. }
  320. }
  321. .type {
  322. color: var(--ff0Color);
  323. }
  324. }
  325. .list_2 {
  326. display: flex;
  327. justify-content: space-between;
  328. align-items: center;
  329. .image {
  330. width: 25vw;
  331. height: 25vw;
  332. margin: 0 2vw 1vw 0;
  333. }
  334. .other {
  335. flex-grow: 1;
  336. .name {
  337. font-size: var(--font16Size);
  338. }
  339. .other_1 {
  340. font-size: var(--font14Size);
  341. text {
  342. color: var(--f85Color);
  343. }
  344. }
  345. }
  346. }
  347. .btn {
  348. text-align: right;
  349. button {
  350. margin: 2vw 0 0 2vw;
  351. }
  352. }
  353. }
  354. .list:nth-child(2n) {
  355. margin: 0 0 2vw 0;
  356. }
  357. }
  358. }
  359. }
  360. .scroll-view {
  361. position: absolute;
  362. top: 0;
  363. left: 0;
  364. right: 0;
  365. bottom: 0;
  366. .list-scroll-view {
  367. display: flex;
  368. flex-direction: column;
  369. }
  370. }
  371. .is_bottom {
  372. text-align: center;
  373. text {
  374. padding: 2vw 0;
  375. display: inline-block;
  376. color: #858585;
  377. font-size: 14px;
  378. }
  379. }
  380. </style>