index.vue 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382
  1. <template>
  2. <view class="container">
  3. <view class="search-box">
  4. <uni-search-bar radius="5" placeholder="搜索" clearButton="auto" cancelButton="none" bgColor="#F8F8F8" @confirm="search"
  5. class="search-bar" />
  6. </view>
  7. <scroll-view show-scrollbar="true" scroll-y="true" class="sort-left-box">
  8. <view class="sort-left-row" :class="sortFirstCode == item.cateCode ? 'sort-left-row-active' : ''" v-for="(item,index) in sortFirstList"
  9. @click="checkFirstSort(item)" :key="index">
  10. <text>{{item.cateValue}}</text>
  11. </view>
  12. </scroll-view>
  13. <view class="sort-right-box">
  14. <scroll-view show-scrollbar="true" scroll-x="true" class="sort-right-row">
  15. <!-- <view style="padding-top: 20px;background-color: #909399;" v-if="sortSecondList.length<=0">
  16. <u-divider color="#909399" border-color="#909399">没有更多了</u-divider>
  17. </view> -->
  18. <view class="sort-right-col" :class="sortSecondCode == item.cateCode ? 'sort-right-col-active' : ''" v-for="(item,index) in sortSecondList"
  19. :key="index" @click="checkSecondSort(item)">{{item.cateValue}}</view>
  20. </scroll-view>
  21. <scroll-view class="goods-box" scroll-y="true" @scrolltolower="handleLoadMore()">
  22. <view style="padding-top: 20px;background-color: #FFFFFF;" v-if="goodsList.length<=0">
  23. <u-divider color="#909399" border-color="#909399">没有更多了</u-divider>
  24. </view>
  25. <view class="goods-row" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
  26. <image class="goods-img" :src="item.imgPath"></image>
  27. <view class="goods-info">
  28. <view class="goods-name">{{item.productName}}</view>
  29. <view class="goods-details">{{item.productDescribe}}</view>
  30. <view class="goods-number">
  31. <text class="goods-icon">¥</text>
  32. <text class="goods-spec">{{item.bizPrice}}/{{item.unit}}</text>
  33. <text class="goods-sales">{{item.sellCount}}人付款</text>
  34. </view>
  35. </view>
  36. <view class="goods-cart">
  37. <view class="cart-button" @click.stop="addCart(item)">
  38. <view class="iconfont icongouwuche"></view>
  39. </view>
  40. </view>
  41. </view>
  42. </scroll-view>
  43. </view>
  44. <u-modal v-model="modalShow" content="是否将该商品添加至购物车" @confirm="submitAddCart()" :async-close="true"
  45. :show-cancel-button="true"></u-modal>
  46. <u-top-tips ref="uTips"></u-top-tips>
  47. </view>
  48. </template>
  49. <script>
  50. const NET = require('../../utils/request')
  51. const API = require('../../config/api')
  52. export default {
  53. data() {
  54. return {
  55. pageIndex: 1,
  56. isOver: false,
  57. goodName: '',
  58. sortFirstCode: '',
  59. sortFirstList: [],
  60. sortSecondCode: '',
  61. sortSecondList: [],
  62. goodsList: [],
  63. modalShow: false,
  64. goodItem: null,
  65. }
  66. },
  67. onShow() {
  68. this.getBaseData()
  69. },
  70. onPullDownRefresh() {
  71. this.getBaseData()
  72. uni.stopPullDownRefresh();
  73. },
  74. methods: {
  75. // 获取全部数据
  76. getBaseData() {
  77. this.pageIndex = 1
  78. this.sortFirstList = []
  79. this.sortSecondList = []
  80. this.goodsList = []
  81. NET.request(API.getSortList, {}, 'POST').then(res => {
  82. this.sortFirstList = res.data
  83. if (res.data.length) {
  84. this.checkFirstSort(res.data[0])
  85. } else {
  86. this.$refs.uTips.show({
  87. title: '获取商品分类失败',
  88. type: 'warning',
  89. })
  90. }
  91. }).catch(error => {
  92. this.$refs.uTips.show({
  93. title: '获取商品分类失败',
  94. type: 'warning',
  95. })
  96. })
  97. },
  98. // 切换一级分类
  99. checkFirstSort(item) {
  100. this.sortFirstCode = item.cateCode
  101. this.sortSecondList = []
  102. if (item.oneCategory.length) {
  103. this.sortSecondList = item.oneCategory
  104. this.checkSecondSort(item.oneCategory[0])
  105. }
  106. },
  107. // 切换二级分类
  108. checkSecondSort(item) {
  109. this.sortSecondCode = item.cateCode
  110. this.goodsList = []
  111. if (this.triggered = 'restore') {
  112. this.pageIndex = 1
  113. this.getGoodsList()
  114. }
  115. },
  116. // 搜索商品
  117. search(data) {
  118. this.goodName = data.value
  119. this.goodsList = []
  120. this.pageIndex = 1
  121. this.getGoodsList()
  122. },
  123. // 懒加载
  124. handleLoadMore() {
  125. if (!this.isOver) {
  126. this.pageIndex++
  127. this.getGoodsList()
  128. }
  129. },
  130. // 获取商品
  131. getGoodsList() {
  132. NET.request(API.getGoodsBySort, {
  133. name: this.goodName,
  134. oneId: this.sortFirstCode,
  135. twoId: this.sortSecondCode,
  136. pageIndex: this.pageIndex,
  137. pageSize: 10,
  138. }, 'POST').then(res => {
  139. this.isOver = res.data.list.length != 10
  140. this.goodsList = this.goodsList.concat(res.data.list)
  141. }).catch(res => {
  142. this.$refs.uTips.show({
  143. title: '获取商品列表失败',
  144. type: 'warning',
  145. })
  146. })
  147. },
  148. // 添加购物车
  149. addCart(item) {
  150. this.goodItem = {
  151. productId: item.id,
  152. productName: item.productName,
  153. imgUrl: item.imgPath,
  154. bizPrice: item.bizPrice,
  155. originalPrice: item.originalPrice,
  156. productType: item.productType,
  157. tenantCode: item.tenantCode,
  158. buyNum: 1
  159. }
  160. this.modalShow = true
  161. },
  162. // 提交购物车
  163. submitAddCart() {
  164. NET.request(API.addCart, this.goodItem, 'POST').then(res => {
  165. this.$refs.uTips.show({
  166. title: '加入购物车成功',
  167. type: 'success',
  168. })
  169. this.modalShow = false
  170. }).catch(res => {
  171. this.modalShow = false
  172. this.$refs.uTips.show({
  173. title: '加入购物车失败',
  174. type: 'warning',
  175. })
  176. })
  177. },
  178. // 跳转商品详情
  179. goToGoodDetails(item) {
  180. uni.navigateTo({
  181. url: '/pagesGood/goodDetails?goodId=' + item.id
  182. });
  183. }
  184. }
  185. }
  186. </script>
  187. <style lang="less" scoped>
  188. page {
  189. width: 100%;
  190. height: 100%;
  191. }
  192. .container {
  193. width: 100%;
  194. height: calc(100% - 70px);
  195. float: left;
  196. .search-box {
  197. width: 100%;
  198. height: 58px;
  199. box-sizing: border-box;
  200. padding: 2px 12px 1px 12px;
  201. border-bottom: 1px solid #DDDDDD;
  202. /deep/.search-bar {
  203. .uni-searchbar__box {
  204. border-color: #F8F8F8;
  205. }
  206. }
  207. }
  208. .sort-left-box {
  209. width: 80px;
  210. height: calc(100% - 58px);
  211. float: left;
  212. overflow-y: auto;
  213. .sort-left-row {
  214. width: 100%;
  215. height: 45px;
  216. box-sizing: border-box;
  217. padding-left: 9px;
  218. border-left: 3px solid #FFFFFF;
  219. font-size: 15px;
  220. font-family: PingFang SC;
  221. color: #333333;
  222. line-height: 16px;
  223. align-items: center;
  224. display: flex;
  225. }
  226. .sort-left-row-active {
  227. color: #51A539;
  228. border-left: 3px solid #51A539;
  229. }
  230. }
  231. .sort-right-box {
  232. width: calc(100% - 81px);
  233. height: calc(100% - 58px);
  234. float: left;
  235. border-left: 1px solid #DDDDDD;
  236. .sort-right-row {
  237. width: 100%;
  238. height: 44px;
  239. padding: 9px 2px 0px 7px;
  240. box-sizing: border-box;
  241. white-space: nowrap;
  242. float: left;
  243. .sort-right-col {
  244. height: 26px;
  245. margin-right: 10px;
  246. display: inline-block;
  247. border: 1px solid #DCDCDC;
  248. border-radius: 13px;
  249. padding: 0 25px;
  250. box-sizing: border-box;
  251. font-size: 12px;
  252. font-family: PingFang SC;
  253. color: #666666;
  254. line-height: 24px;
  255. }
  256. .sort-right-col-active {
  257. color: #FFFFFF;
  258. background: #52A63A;
  259. border: 1px solid #51A539;
  260. }
  261. }
  262. .goods-box {
  263. width: 100%;
  264. height: calc(100% - 44px) !important;
  265. padding: 6px 0 0px 0;
  266. box-sizing: border-box;
  267. float: left;
  268. overflow-y: auto;
  269. .goods-row {
  270. width: calc(100% - 24px);
  271. height: 104px;
  272. float: left;
  273. padding: 11px 11px 11px 7px;
  274. box-sizing: border-box;
  275. margin: 4px 0 12px 12px;
  276. background: #FFFFFF;
  277. box-shadow: 0px 1px 5px 0px rgba(102, 102, 102, 0.43);
  278. border-radius: 15px;
  279. position: relative;
  280. .goods-img {
  281. width: 84px;
  282. height: 84px;
  283. float: left;
  284. }
  285. .goods-info {
  286. width: calc(100% - 108px);
  287. height: 84px;
  288. box-sizing: border-box;
  289. padding-left: 6px;
  290. float: left;
  291. .goods-name {
  292. width: calc(100% + 24px);
  293. height: 18px;
  294. font-size: 15px;
  295. font-family: PingFang SC;
  296. color: #333333;
  297. line-height: 18px;
  298. white-space: nowrap;
  299. text-overflow: ellipsis;
  300. overflow: hidden;
  301. }
  302. .goods-details {
  303. height: 28px;
  304. font-size: 12px;
  305. font-family: PingFang SC;
  306. color: #999999;
  307. line-height: 14px;
  308. overflow: hidden;
  309. text-overflow: ellipsis;
  310. display: -webkit-box;
  311. -webkit-line-clamp: 2;
  312. -webkit-box-orient: vertical;
  313. word-wrap: break-word;
  314. margin: 4px 0 12px 0;
  315. }
  316. .goods-number {
  317. height: 16px;
  318. font-family: PingFang SC;
  319. line-height: 16px;
  320. .goods-icon {
  321. font-size: 12px;
  322. color: #52A63A;
  323. }
  324. .goods-spec {
  325. font-size: 15px;
  326. color: #52A63A;
  327. margin-right: 15px;
  328. }
  329. .goods-sales {
  330. font-size: 12px;
  331. color: #999999;
  332. }
  333. }
  334. }
  335. .goods-cart {
  336. width: 24px;
  337. height: 84px;
  338. float: left;
  339. .cart-button {
  340. width: 24px;
  341. height: 24px;
  342. margin-top: 30px;
  343. background-color: #52A63A;
  344. border-radius: 50%;
  345. text-align: center;
  346. .iconfont {
  347. color: #FFFFFF;
  348. font-size: 18px;
  349. line-height: 24px;
  350. }
  351. }
  352. }
  353. }
  354. }
  355. }
  356. }
  357. </style>