敢为人鲜小程序前端代码仓库
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

312 lines
5.8 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
4 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <!-- <navbar bgColor="#019245" color="#fff" /> -->
  5. <!-- 搜索栏 -->
  6. <view class="search">
  7. <image src="/static/image/logo.webp" mode="aspectFill" class="search-img" @tap="testUtiles" />
  8. <view style="position: relative;">
  9. <uv-search placeholder="陕西苹果" bgColor="#fff" @search="search" @change="search" @custom="search"
  10. :searchIconSize="40" v-model="queryParams.title" height="75rpx" :showAction="false"
  11. actionText=" " />
  12. <text class="search-text" @tap="search">搜索</text>
  13. </view>
  14. </view>
  15. <!-- 商品列表 -->
  16. <view style="position: 20rpx;" v-if="queryParams.title">
  17. <productList :list="list" />
  18. </view>
  19. <!-- 分类商品列表 -->
  20. <view class="category" v-else>
  21. <!-- 这是顶部的内容 -->
  22. <!-- <view class="tabs">
  23. <uv-tabs :list="category" :activeStyle="{ color: '#f00', fontWeight: 600 }" lineColor="#f00"
  24. :inactiveStyle="{ color: 'rgba(0,0,0,.8)' }" lineHeight="8rpx" lineWidth="50rpx" :current="current"
  25. @tap="clickTabs"></uv-tabs>
  26. </view> -->
  27. <uv-vtabs :list="category" :barStyle="{
  28. boxShadow: '0 0 18rpx 0rpx rgba(0, 0, 0, 0.1)',
  29. fontWeight: '600',
  30. textAlign: 'center',
  31. backgroundColor: '#F5F5F5',
  32. }" :barItemStyle="{
  33. color: 'black'
  34. }" :barItemActiveLineStyle="{
  35. height: '35%',
  36. top: '32.5%',
  37. bottom: 'auto',
  38. left: '2%',
  39. borderRadius: '4rpx',
  40. width: '8rpx'
  41. }" :current="currentChildren" keyName="name" :chain="false" @change="change">
  42. <uv-vtabs-item>
  43. <view class="category-item">
  44. <!-- 这里加载更多数据需要你使用scroll-view 因为你的列表在uv-vtabs里面 -->
  45. <scroll-view
  46. scroll-y="true"
  47. @scrolltolower="loadMoreData"
  48. style="height: calc(100vh - 470rpx);">
  49. <productItem :item="pro" v-for="(pro, i) in list" :key="i"
  50. @tap="navigateToDetail(pro.id)" />
  51. </scroll-view>
  52. </view>
  53. </uv-vtabs-item>
  54. </uv-vtabs>
  55. <!-- <uv-empty v-if="list.length == 0" text="还没有呢" /> -->
  56. </view>
  57. <!-- tabbar -->
  58. <tabber select="category" />
  59. </view>
  60. </template>
  61. <script>
  62. import productItem from '@/components/product/productItem.vue';
  63. // list再这里定义了
  64. import mixinsList from '@/mixins/list.js'
  65. import {
  66. mapState
  67. } from 'vuex'
  68. import tabber from '@/components/base/tabbar.vue'
  69. import productList from '@/components/user/productList.vue'
  70. export default {
  71. mixins: [mixinsList],
  72. components: {
  73. productItem,
  74. tabber,
  75. productList,
  76. },
  77. data() {
  78. return {
  79. // 这这里定义查询的接口名称,就可以实现加载列表、加载跟多、下拉刷新
  80. mixinsListApi: 'queryGoodsList',
  81. current: 0,
  82. currentChildren: 0,
  83. }
  84. },
  85. computed: {
  86. ...mapState(['category']),
  87. },
  88. onLoad({
  89. search,
  90. cid
  91. }) {
  92. // 再这里加默认参数 实例:
  93. // this.queryParams.test = 11111
  94. },
  95. methods: {
  96. change(e) {
  97. // this.queryParams.classId = this.category[e].id
  98. this.currentChildren = e
  99. // 重新加载数据
  100. this.getData({ categoryId: this.category[e].id })
  101. },
  102. clickTabs({ index }) {
  103. this.current = index
  104. this.currentChildren = 0
  105. // 重新加载数据
  106. this.getData()
  107. },
  108. search() {
  109. for (let i = 0; i < 10; i++) {
  110. delete this.queryParams[i]
  111. }
  112. this.queryParams.pageSize = 10
  113. this.getData()
  114. },
  115. navigateToDetail(id) {
  116. console.log('跳转到商品详情页:', id);
  117. // uni.navigateTo({
  118. // url: `/pages_order/product/productDetail?id=${id}`
  119. // })
  120. this.$utils.navigateTo(`/pages_order/product/productDetail?id=${id}`);
  121. },
  122. testUtiles() {
  123. try{
  124. this.$authorize('scope.userLocation')
  125. }catch(error){
  126. console.log(error);
  127. }
  128. }
  129. }
  130. }
  131. </script>
  132. <style scoped lang="scss">
  133. .page {
  134. // background-color: #f5f5ff;
  135. /deep/ .uv-vtabs {
  136. height: calc(100vh - 470rpx) !important;
  137. }
  138. /deep/ .uv-vtabs__bar {
  139. height: calc(100vh - 470rpx) !important;
  140. }
  141. /deep/ .uv-vtabs__content {
  142. height: calc(100vh - 470rpx) !important;
  143. }
  144. .search {
  145. background: $uni-color;
  146. height: 280rpx;
  147. padding-left: 20rpx;
  148. .search-img {
  149. width: 120rpx;
  150. height: 120rpx;
  151. margin: 40rpx 0 10rpx 10rpx;
  152. border-radius: 50%;
  153. }
  154. .search-text {
  155. position: absolute;
  156. right: 80rpx;
  157. top: 50%;
  158. transform: translateY(-50%);
  159. color: $uni-color;
  160. }
  161. /deep/ .uv-search__action {
  162. background-color: $uni-color;
  163. color: #FFFFFF;
  164. padding: 10rpx 20rpx;
  165. border-radius: 30rpx;
  166. }
  167. }
  168. /deep/ .uv-vtabs__content {
  169. background: transparent !important;
  170. overflow: hidden;
  171. }
  172. }
  173. .header {
  174. padding: 30rpx;
  175. font-size: 30rpx;
  176. color: #333;
  177. }
  178. .item {
  179. padding: 10rpx 20rpx;
  180. &-title {
  181. .text {
  182. font-weight: 700;
  183. font-size: 32rpx;
  184. color: #111;
  185. }
  186. }
  187. &-content {
  188. padding: 20rpx 0;
  189. .text {
  190. line-height: 48rpx;
  191. font-size: 30rpx;
  192. color: #111;
  193. /* #ifndef APP-NVUE */
  194. word-break: break-all;
  195. /* #endif */
  196. }
  197. }
  198. }
  199. .gap {
  200. padding: 0 30rpx;
  201. }
  202. .category {
  203. /* background-color: green; */
  204. font-size: 30rpx;
  205. color: #333;
  206. .category-title {
  207. position: relative;
  208. display: flex;
  209. justify-content: center;
  210. align-items: center;
  211. height: 120rpx;
  212. &::before,
  213. &::after {
  214. position: absolute;
  215. top: 50%;
  216. content: '';
  217. width: 10%;
  218. border-top: 2rpx solid black;
  219. }
  220. &::before {
  221. left: 25%;
  222. }
  223. &::after {
  224. right: 25%;
  225. }
  226. }
  227. /deep/ .uv-vtabs {
  228. width: 750rpx;
  229. overflow: hidden;
  230. }
  231. .list {
  232. width: 100%;
  233. padding: 0rpx 20rpx;
  234. box-sizing: border-box;
  235. }
  236. }
  237. .header {
  238. padding: 30rpx;
  239. font-size: 30rpx;
  240. color: #333;
  241. }
  242. .item {
  243. padding: 10rpx 20rpx;
  244. &-title {
  245. .text {
  246. font-weight: 700;
  247. font-size: 32rpx;
  248. color: #111;
  249. }
  250. }
  251. &-content {
  252. padding: 20rpx 0;
  253. .text {
  254. line-height: 48rpx;
  255. font-size: 30rpx;
  256. color: #111;
  257. /* #ifndef APP-NVUE */
  258. word-break: break-all;
  259. /* #endif */
  260. }
  261. }
  262. }
  263. .gap {
  264. padding: 0 30rpx;
  265. }
  266. </style>