goodsData.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. <template>
  2. <view class="container">
  3. <view class="head-block">
  4. <view class="content">
  5. <view class="search-box flex flex-y-center">
  6. <input type="text" v-model="serch" class="search-input" placeholder="请输入商品名称"
  7. placeholder-class="placeholder" />
  8. </view>
  9. <view class="date-search flex box-pack-between flex-y-center">
  10. <picker mode="date" @change="chooseStartTime">
  11. <view class="date-box" :class="[start_time?'':'placeholder']">{{start_time || '请选择开始时间'}}</view>
  12. </picker>
  13. <view>至</view>
  14. <picker mode="date" @change="chooseEndTime">
  15. <view class="date-box" :class="[end_time?'':'placeholder']">{{end_time || '请选择结束时间'}}</view>
  16. </picker>
  17. </view>
  18. <picker class="store-search" :range="storeList" range-key="title" @change="chooseStore"
  19. v-if="can_choose_store">
  20. <view class="store-name" :class="[store_id?'':'placeholder']">
  21. {{store_name || '请选择门店'}}
  22. </view>
  23. </picker>
  24. <view class="btn-block">
  25. <view class="btn reset-btn" @click="onReset">重置</view>
  26. <view class="btn sub-btn" @click="onSubmit">筛选</view>
  27. </view>
  28. </view>
  29. <view class="table">
  30. <view class="tr tb-h" style="border-bottom:none;border-top: 1rpx solid #efefef;">
  31. <view class="th td" style="width:27%">商品名</view>
  32. <view class="th td" style="width:25%">门店</view>
  33. <view class="th td" style="width:16%">下单数</view>
  34. <view class="th td" style="width:16%">支付数</view>
  35. <view class="th td" style="width:16%">支付率</view>
  36. </view>
  37. </view>
  38. </view>
  39. <view class="table">
  40. <view class="tr" v-for="(item,index) in list">
  41. <view class="td" style="width:27%">{{item.name}}</view>
  42. <view class="td" style="width:25%">{{item.store_name}}</view>
  43. <view class="td" style="width:16%">{{item.num}}</view>
  44. <view class="td" style="width:16%">{{item.pay_num}}</view>
  45. <view class="td" style="width:16%">{{item.pay_rate}}</view>
  46. </view>
  47. <view class="no-more" v-if="!has_more" style="padding: 40rpx 0;">
  48. ---没有更多了---
  49. </view>
  50. </view>
  51. <view class="is-iphone-x"></view>
  52. </view>
  53. </template>
  54. <script>
  55. export default {
  56. data() {
  57. return {
  58. can_choose_store: false,
  59. admin_id: "",
  60. store_id: "",
  61. store_name: "",
  62. serch: "",
  63. start_time: "",
  64. end_time: "",
  65. storeList: [],
  66. list: [],
  67. page: 1,
  68. has_more: true,
  69. params: {
  70. store_id: '', //176 string 是 搜索: 门店id
  71. serch: '', //string 是 搜索: 商品名称
  72. start_time: '', // 2022 - 02 - 17 string 是 搜索: 开始时间
  73. end_time: '', // 2022 - 02 - 17 string 是 搜索: 结束时间
  74. }
  75. }
  76. },
  77. onLoad(options) {
  78. if (options.store_id) {
  79. this.store_id = options.store_id
  80. this.can_choose_store = false
  81. this.params.store_id = options.store_id
  82. } else {
  83. this.can_choose_store = true
  84. this.getStoreList()
  85. }
  86. this.getList()
  87. let now = new Date()
  88. },
  89. onReachBottom() {
  90. if (this.has_more) {
  91. this.getList(this.page + 1)
  92. }
  93. },
  94. methods: {
  95. onReset() {
  96. this.serch = ""
  97. this.start_time = ""
  98. this.end_time = ""
  99. this.store_id = this.can_choose_store ? '' : this.store_id
  100. this.store_name = this.can_choose_store ? '' : this.store_name
  101. this.params = {
  102. store_id: this.can_choose_store ? '' : this.store_id, //176 string 是 搜索: 门店id
  103. serch: '', //string 是 搜索: 商品名称
  104. start_time: '', // 2022 - 02 - 17 string 是 搜索: 开始时间
  105. end_time: '', // 2022 - 02 - 17 string 是 搜索: 结束时间
  106. }
  107. this.page = 1
  108. this.list = []
  109. this.has_more = true
  110. this.getList()
  111. },
  112. onSubmit() {
  113. this.params = {
  114. store_id: this.store_id, //搜索: 门店id
  115. serch: this.serch, //搜索: 商品名称
  116. start_time: this.start_time, // 2022-02-17 搜索: 开始时间
  117. end_time: this.end_time, // 2022-02-17 搜索: 结束时间
  118. }
  119. this.page = 1
  120. this.list = []
  121. this.has_more = true
  122. this.getList()
  123. },
  124. getList(page = 1) {
  125. let params = JSON.parse(JSON.stringify(this.params))
  126. params.admin_id = uni.getStorageSync("admin_id");
  127. params.page = page
  128. params.limit = 10
  129. this.request({
  130. url: 'smdcshop/statistics_index',
  131. data: params
  132. }).then(res => {
  133. if (res.data.length > 0) {
  134. this.list = this.list.concat(res.data)
  135. this.has_more = res.data.length < 10 ? false : true
  136. this.page = page
  137. } else {
  138. this.has_more = false
  139. }
  140. })
  141. },
  142. chooseStartTime(e) {
  143. this.start_time = e.detail.value
  144. if (this.end_time && new Date(e.detail.value).getTime() > new Date(this.end_time).getTime()) {
  145. this.end_time = ""
  146. }
  147. },
  148. chooseEndTime(e) {
  149. this.end_time = e.detail.value
  150. if (this.start_time && new Date(this.start_time).getTime() > new Date(e.detail.value).getTime()) {
  151. this.start_time = ""
  152. }
  153. },
  154. chooseStore(e) {
  155. let index = e.detail.value
  156. this.store_id = this.storeList[index].id
  157. this.store_name = this.getStoreName(this.storeList[index].id)
  158. },
  159. getStoreList() {
  160. this.request({
  161. url: "Smdcshop/shop_store_index",
  162. data: {
  163. admin_id: uni.getStorageSync("admin_id")
  164. }
  165. }).then(res => {
  166. this.storeList = res.data
  167. if (this.store_id) {
  168. this.store_name = this.getStoreName(this.store_id)
  169. }
  170. })
  171. },
  172. getStoreName(store_id) {
  173. let store = this.storeList.find(item => {
  174. return item.id == store_id
  175. })
  176. return store.title
  177. },
  178. }
  179. }
  180. </script>
  181. <style lang="scss">
  182. .head-block {
  183. background: #fff;
  184. width: 100%;
  185. box-sizing: border-box;
  186. position: sticky;
  187. top: 0;
  188. z-index: 10;
  189. overflow: hidden;
  190. box-shadow: 0 0 10rpx #ccc;
  191. .search-box {
  192. margin-top: 14rpx;
  193. padding: 0 24rpx;
  194. .search-input {
  195. background: #f8f8f8;
  196. flex: auto;
  197. height: 60rpx;
  198. padding: 0 20rpx;
  199. border-radius: 12rpx;
  200. font-size: 24rpx;
  201. color: #333;
  202. }
  203. }
  204. .date-search {
  205. margin-top: 14rpx;
  206. padding: 0 24rpx;
  207. font-size: 24rpx;
  208. .date-box {
  209. height: 60rpx;
  210. width: 300rpx;
  211. line-height: 60rpx;
  212. flex: none;
  213. background-color: #F8f8f8;
  214. border-radius: 12rpx;
  215. padding: 0 20rpx;
  216. }
  217. }
  218. .store-search {
  219. padding: 0 24rpx;
  220. margin-top: 14rpx;
  221. .store-name {
  222. height: 60rpx;
  223. line-height: 60rpx;
  224. font-size: 24rpx;
  225. background-color: #F8f8f8;
  226. border-radius: 12rpx;
  227. padding: 0 20rpx;
  228. }
  229. }
  230. .btn-block {
  231. margin: 14rpx 0;
  232. padding: 0 24rpx;
  233. display: flex;
  234. flex-flow: row nowrap;
  235. justify-content: space-around;
  236. align-items: stretch;
  237. .btn {
  238. height: 48rpx;
  239. border-radius: 12rpx;
  240. width: 160rpx;
  241. flex: none;
  242. font-size: 26rpx;
  243. text-align: center;
  244. line-height: 48rpx;
  245. }
  246. .reset-btn {
  247. background: #e8e8e8;
  248. color: #333;
  249. }
  250. .sub-btn {
  251. color: #fff;
  252. background: linear-gradient(180deg, #6fa8f8, #328afe);
  253. }
  254. }
  255. }
  256. .table {
  257. width: 100%;
  258. .tr {
  259. width: 100%;
  260. display: flex;
  261. flex-flow: row nowrap;
  262. justify-content: flex-start;
  263. align-items: stretch;
  264. border-bottom: 1rpx solid #d6d6d6;
  265. .td {
  266. flex: none;
  267. padding: 20rpx 10rpx;
  268. text-align: center;
  269. font-size: 24rpx;
  270. box-sizing: border-box;
  271. display: flex;
  272. justify-content: center;
  273. align-items: center;
  274. }
  275. .th {
  276. font-weight: 500;
  277. }
  278. }
  279. }
  280. .placeholder {
  281. color: #888;
  282. }
  283. </style>