goodList.vue 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <template>
  2. <view class="container">
  3. <view class="search-box">
  4. <uni-search-bar ref="searchBar" radius="5" placeholder="搜索" :defaultText="goodName" clearButton="auto" cancelButton="none"
  5. bgColor="#f7f7f7" @confirm="search" class="search-bar" />
  6. </view>
  7. <view class="data-tab">
  8. <u-tabs :list="tabList" :is-scroll="false" :current="tabIndex" @change="changeTabs" font-size="30" active-color="#52A63A"
  9. inactive-color="#666666" :bold="false" height="90"></u-tabs>
  10. </view>
  11. <scroll-view class="data-list" scroll-y="true" @scrolltolower="handleLoadMore(1)" v-if="tabIndex==0">
  12. <goodItem v-for="(item, index) in list1" :key="index" :goodData="item" :check.sync="item.check" :manageType="manageType"></goodItem>
  13. </scroll-view>
  14. <scroll-view class="data-list" scroll-y="true" @scrolltolower="handleLoadMore(2)" v-else-if="tabIndex==1">
  15. <goodItem v-for="(item, index) in list2" :key="index" :goodData="item" :check.sync="item.check" :manageType="manageType"></goodItem>
  16. </scroll-view>
  17. <scroll-view class="data-list" scroll-y="true" @scrolltolower="handleLoadMore(3)" v-else-if="tabIndex==2">
  18. <goodItem v-for="(item, index) in list3" :key="index" :goodData="item" :check.sync="item.check" :manageType="manageType"></goodItem>
  19. </scroll-view>
  20. <view class="good-handle">
  21. <uni-goods-nav :fill="true" :options="[]" @buttonClick="goodHandle1" :buttonGroup="buttonGroup1" v-if="!manageType" />
  22. <uni-goods-nav :fill="true" :options="[]" @buttonClick="goodHandle2" :buttonGroup="buttonGroup2" v-else-if="tabIndex == 0" />
  23. <uni-goods-nav :fill="true" :options="[]" @buttonClick="goodHandle2" :buttonGroup="buttonGroup3" v-else-if="tabIndex == 1" />
  24. <uni-goods-nav :fill="true" :options="[]" @buttonClick="goodHandle2" :buttonGroup="buttonGroup4" v-else-if="tabIndex == 2" />
  25. </view>
  26. <u-popup v-model="popupShow" mode="bottom">
  27. <view class="good-handle-box">
  28. <u-button class="handle-button" :hair-line="false" @click="addGood(1)">普通售卖</u-button>
  29. <u-button class="handle-button" :hair-line="false" @click="addGood(2)">拍卖</u-button>
  30. <u-button class="handle-button" :hair-line="false" @click="addGood(3)">自助采摘</u-button>
  31. <u-button class="handle-close" @click="popupShow = false">取消</u-button>
  32. </view>
  33. </u-popup>
  34. <u-top-tips ref="uTips"></u-top-tips>
  35. </view>
  36. </template>
  37. <script>
  38. const NET = require('@/utils/request')
  39. const API = require('@/config/api')
  40. import goodItem from '@/pagesGood/goodItem.vue'
  41. export default {
  42. components: {
  43. goodItem
  44. },
  45. data() {
  46. return {
  47. goodName: '',
  48. tabIndex: 0,
  49. tabList: [{
  50. name: '出售中'
  51. }, {
  52. name: '已售空'
  53. }, {
  54. name: '已下架'
  55. }],
  56. pageIndex1: 1,
  57. isOver1: false,
  58. list1: [],
  59. pageIndex2: 1,
  60. isOver2: false,
  61. list2: [],
  62. pageIndex3: 1,
  63. isOver3: false,
  64. list3: [],
  65. manageType: false,
  66. popupShow: false,
  67. buttonGroup1: [{
  68. text: '批量管理',
  69. backgroundColor: '#75BD60',
  70. color: '#fff'
  71. }, {
  72. text: '添加商品',
  73. backgroundColor: '#52A63A',
  74. color: '#fff'
  75. }],
  76. buttonGroup2: [{
  77. text: '取消',
  78. backgroundColor: '#52A63A',
  79. color: '#fff'
  80. }, {
  81. text: '下架',
  82. backgroundColor: '#52A63A',
  83. color: '#fff'
  84. }, {
  85. text: '删除',
  86. backgroundColor: '#52A63A',
  87. color: '#fff'
  88. }],
  89. buttonGroup3: [{
  90. text: '取消',
  91. backgroundColor: '#75BD60',
  92. color: '#fff'
  93. }, {
  94. text: '删除',
  95. backgroundColor: '#52A63A',
  96. color: '#fff'
  97. }],
  98. buttonGroup4: [{
  99. text: '取消',
  100. backgroundColor: '#52A63A',
  101. color: '#fff'
  102. }, {
  103. text: '上架',
  104. backgroundColor: '#52A63A',
  105. color: '#fff'
  106. }, {
  107. text: '删除',
  108. backgroundColor: '#52A63A',
  109. color: '#fff'
  110. }],
  111. }
  112. },
  113. onLoad(options) {},
  114. onShow(options) {
  115. this.reasetList()
  116. },
  117. onPullDownRefresh() {
  118. this.reasetList('refresh')
  119. },
  120. methods: {
  121. // 搜索商品
  122. search(data) {
  123. this.goodName = data.value
  124. this.reasetList()
  125. },
  126. // 切换tab
  127. changeTabs(index) {
  128. this.tabIndex = index;
  129. this.reasetList()
  130. },
  131. // 刷新数据
  132. reasetList(refresh) {
  133. this['isOver' + (this.tabIndex + 1)] = false
  134. this['pageIndex' + (this.tabIndex + 1)] = 1
  135. this['list' + (this.tabIndex + 1)] = []
  136. this.getList(this.tabIndex + 1, refresh)
  137. },
  138. // 懒加载
  139. handleLoadMore(type) {
  140. if (!this['isOver' + type]) {
  141. this['pageIndex' + type]++
  142. this.getList(type)
  143. }
  144. },
  145. // 获取列表数据
  146. getList(type, refresh) {
  147. NET.request(API.getGoodList, {
  148. name: this.goodName,
  149. pageIndex: this['pageIndex' + type],
  150. pageSize: 10,
  151. type: type,
  152. }, 'POST').then(res => {
  153. if (refresh == 'refresh') {
  154. uni.stopPullDownRefresh();
  155. }
  156. this['isOver' + type] = res.data.list.length != 10
  157. res.data.list.forEach(site => {
  158. site.check = false
  159. })
  160. this['list' + type] = this['list' + type].concat(res.data.list)
  161. }).catch(error => {
  162. this.$refs.uTips.show({
  163. title: error.data.msg,
  164. type: 'warning',
  165. })
  166. })
  167. },
  168. // 全部分类下查询
  169. goodHandle1(e) {
  170. if (e.index == 0) {
  171. this.manageType = true
  172. } else {
  173. this.popupShow = true
  174. }
  175. },
  176. // 各分类下批量操作
  177. goodHandle2(e) {
  178. if (e.index == 0) {
  179. this.manageType = false
  180. } else {
  181. NET.request(API.setGoodsStatus, {
  182. ids: this['list' + (this.tabIndex + 1)].filter(site => site.check).map(site => {
  183. return site.id
  184. }),
  185. operation: (this.tabIndex == 0 && e.index == 1) ? 1 : ((this.tabIndex == 2 && e.index == 1) ? 2 : 3),
  186. type: this.tabIndex == 0 ? 1 : 2
  187. }, 'POST').then(res => {
  188. this.$refs.uTips.show({
  189. title: '操作成功',
  190. type: 'success',
  191. })
  192. this.reasetList()
  193. }).catch(error => {
  194. this.$refs.uTips.show({
  195. title: error.data.msg,
  196. type: 'warning',
  197. })
  198. })
  199. }
  200. },
  201. // 新增商品
  202. addGood(type) {
  203. this.popupShow = false
  204. uni.navigateTo({
  205. url: '/pagesGood/goodForm?type=add&formType=' + type
  206. });
  207. },
  208. }
  209. }
  210. </script>
  211. <style lang="less" scoped>
  212. page {
  213. width: 100%;
  214. height: 100%;
  215. }
  216. .container {
  217. width: 100%;
  218. height: 100%;
  219. float: left;
  220. position: relative;
  221. background-color: #f7f7f7;
  222. .search-box {
  223. width: 100%;
  224. height: 58px;
  225. box-sizing: border-box;
  226. padding: 2px 12px 1px 12px;
  227. background-color: #FFFFFF;
  228. }
  229. .data-tab {
  230. width: 100%;
  231. height: 45px;
  232. float: left;
  233. }
  234. .data-list {
  235. width: 100%;
  236. height: calc(100% - 154px);
  237. float: left;
  238. }
  239. .good-handle {
  240. width: 100%;
  241. position: absolute;
  242. bottom: 0px;
  243. height: 50px;
  244. background: #ffffff;
  245. }
  246. .good-handle-box {
  247. width: 100%;
  248. float: left;
  249. box-sizing: border-box;
  250. padding: 20px;
  251. .handle-button {
  252. width: 100%;
  253. height: 66px;
  254. float: left;
  255. font-size: 15px;
  256. font-family: PingFang SC;
  257. color: #333333;
  258. line-height: 66px;
  259. border: none;
  260. border-top: 1px solid #E0E0E0;
  261. border-radius: 0;
  262. }
  263. .handle-button:first-child {
  264. border-top: none;
  265. }
  266. .handle-close {
  267. width: 125px;
  268. height: 42px;
  269. float: left;
  270. background: #F1F1F1;
  271. border-radius: 5px;
  272. font-size: 16px;
  273. font-family: PingFang SC;
  274. color: #51A539;
  275. line-height: 42px;
  276. position: relative;
  277. left: 50%;
  278. transform: translateX(-50%);
  279. }
  280. /deep/.u-btn--default {
  281. border: none;
  282. }
  283. }
  284. }
  285. </style>