敢为人鲜小程序前端代码仓库
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.

485 lines
12 KiB

5 months ago
1 week ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="page">
  3. <navbar title="首页" bgColor="#019245" color="#fff" />
  4. <!-- 内容区域 -->
  5. <view class="content">
  6. <!-- 轮播图 -->
  7. <swiper class="banner-swiper" circular autoplay>
  8. <swiper-item v-for="item in homeData.banners" :key="item.id">
  9. <image :src="item.image" mode="aspectFill" class="banner-image" />
  10. </swiper-item>
  11. </swiper>
  12. <!-- 店铺信息 -->
  13. <view class="restaurant-info">
  14. <div class="restaurant-logo">
  15. <image :src="homeData.restaurant.icon" mode="aspectFill" style="width: 100%; height: 100%;" />
  16. </div>
  17. <view class="restaurant-name">{{homeData.restaurant.name}}</view>
  18. <!-- <view class="service-btns">
  19. <view class="service-btn">
  20. <text>客服</text>
  21. </view>
  22. <view class="order-btn">
  23. <text>订阅</text>
  24. </view>
  25. </view> -->
  26. </view>
  27. <!-- 商店内容区域 -->
  28. <view class="shop-content">
  29. <!-- 产品标签页 -->
  30. <view class="product-tabs">
  31. <!-- 公告信息 -->
  32. <view class="notice">
  33. <text class="notice-text">{{homeData.restaurant.title}}</text>
  34. <!-- <text class="notice-desc">{{homeData.restaurant.tag}}</text> -->
  35. </view>
  36. <!-- 标签列表 -->
  37. <view class="tag-list">
  38. <view class="tag" v-for="(tag, index) in homeData.restaurant.tag.split('、')" :key="index">{{tag}}</view>
  39. </view>
  40. <!-- 价格区间 -->
  41. <view class="price-range">
  42. <text class="price">{{homeData.restaurant.price}}</text>
  43. </view>
  44. <!-- 产品展示 -->
  45. <scroll-view scroll-x class="food-scroll">
  46. <view class="food-item" v-for="food in homeData.goodsList" :key="food.categoryId" @click="goGoodsDetail">
  47. <image :src="food.image" mode="aspectFill" class="food-image" />
  48. <view class="food-detail">
  49. <view class="food-name">{{food.title}}</view>
  50. <view class="food-desc">{{food.categoryId_dictText}}</view>
  51. <view class="food-price">
  52. <text class="current-price">¥{{food.price}}</text>
  53. <text class="original-price">¥{{food.price + 10}}</text>
  54. </view>
  55. </view>
  56. </view>
  57. </scroll-view>
  58. </view>
  59. </view>
  60. <!-- 跟团部分 -->
  61. <view class="group-purchase">
  62. <view class="group-order-list">
  63. <swiper vertical autoplay circular interval="3000" duration="500"
  64. display-multiple-items="3">
  65. <swiper-item v-for="(order, index) in orderList" :key="index">
  66. <view class="order-item">
  67. <view class="order-id">{{ (order.hanHaiMember.id).substring(0, 3) + '****' + (order.hanHaiMember.id).substring(6, 9) }}</view>
  68. <view class="order-user">
  69. <image :src="order.hanHaiMember.headImage" mode="aspectFill" class="user-avatar" />
  70. <text class="user-name">{{ order.hanHaiMember.nickName }}</text>
  71. <text class="order-time">
  72. {{
  73. order.updateTime ?
  74. $timeUtils.formatTime($dayjs(order.updateTime).valueOf()) :
  75. $timeUtils.formatTime($dayjs(order.createTime).valueOf())
  76. }}
  77. </text>
  78. </view>
  79. <view class="order-content">
  80. <text class="order-desc">{{ order.goodsList[0].goods.title }}</text>
  81. <text class="order-count">+{{ order.goodsList[0].num }}</text>
  82. </view>
  83. </view>
  84. </swiper-item>
  85. </swiper>
  86. </view>
  87. </view>
  88. </view>
  89. <tabbar select="index" />
  90. <NewCouponPopup />
  91. </view>
  92. </template>
  93. <script>
  94. import navbar from '@/components/base/navbar.vue'
  95. import tabbar from '@/components/base/tabbar.vue'
  96. import { homeData } from '@/static/js/mockHomeData.js'
  97. import NewCouponPopup from '@/components/couponPopup/newCouponPopup.vue'
  98. export default {
  99. components: {
  100. navbar,
  101. tabbar,
  102. NewCouponPopup
  103. },
  104. data() {
  105. return {
  106. homeData: homeData,
  107. orderList: [
  108. {
  109. id: 19141,
  110. userName: '3**',
  111. avatar: '/static/image/中森明菜.webp',
  112. time: '1分钟前',
  113. content: '【单点】小炒黄牛肉...',
  114. count: 1
  115. },
  116. {
  117. id: 19145,
  118. userName: 'B**',
  119. avatar: '/static/image/中森明菜.webp',
  120. time: '1分钟前',
  121. content: '黑椒肥牛饭(1份)',
  122. count: 1
  123. },
  124. {
  125. id: 19144,
  126. userName: '吃**',
  127. avatar: '/static/image/中森明菜.webp',
  128. time: '1分钟前',
  129. content: '【单点】黑盒220g...',
  130. count: 1
  131. },
  132. {
  133. id: 19143,
  134. userName: 'L**',
  135. avatar: '/static/image/中森明菜.webp',
  136. time: '2分钟前',
  137. content: '红烧肉套餐(1份)',
  138. count: 2
  139. },
  140. {
  141. id: 19142,
  142. userName: '美**',
  143. avatar: '/static/image/中森明菜.webp',
  144. time: '3分钟前',
  145. content: '【单点】小炒肉(1份)',
  146. count: 1
  147. }
  148. ]
  149. }
  150. },
  151. onShow() {
  152. this.getBannerList()
  153. this.getInfoList()
  154. this.getGoodsList()
  155. this.getRollList()
  156. },
  157. methods: {
  158. getBannerList() {
  159. this.$api('queryBannerList', {
  160. type: '0'
  161. }, res => {
  162. if (res.code == 200) {
  163. this.homeData.banners = res.result.records
  164. }
  165. })
  166. },
  167. getInfoList() {
  168. this.$api('queryInfoList', {}, res => {
  169. if (res.code == 200) {
  170. this.homeData.restaurant = res.result.records[0]
  171. }
  172. })
  173. },
  174. getGoodsList() {
  175. this.$api('queryGoodsList', {
  176. pageNo: 1,
  177. pageSize: 5
  178. }, res => {
  179. if (res.code == 200) {
  180. this.$set(this.homeData, 'goodsList', res.result.records)
  181. }
  182. })
  183. },
  184. getRollList() {
  185. this.$api('rollList', { }, res => {
  186. if (res.code == 200) {
  187. this.orderList = res.result.records
  188. }
  189. })
  190. },
  191. goGoodsDetail() {
  192. uni.navigateTo({
  193. url: '/pages/index/category'
  194. })
  195. }
  196. }
  197. }
  198. </script>
  199. <style lang="scss" scoped>
  200. .content {
  201. flex: 1;
  202. background: linear-gradient(to bottom, #fff, #f5f5f5);
  203. // padding-bottom: 120rpx;
  204. }
  205. .banner-swiper {
  206. width: 100%;
  207. height: 350rpx;
  208. position: relative;
  209. z-index: 1;
  210. }
  211. .banner-image {
  212. width: 100%;
  213. height: 100%;
  214. }
  215. .restaurant-info {
  216. display: flex;
  217. align-items: center;
  218. padding: 20rpx;
  219. margin-top: -30rpx;
  220. max-height: 60rpx;
  221. border-radius: 20rpx 20rpx 0 0;
  222. background-color: #fff;
  223. border-bottom: 1px solid #eee;
  224. position: relative;
  225. z-index: 2;
  226. }
  227. .restaurant-logo {
  228. width: 130rpx;
  229. height: 130rpx;
  230. border-radius: 20rpx;
  231. margin-right: 20rpx;
  232. margin-top: -60rpx;
  233. overflow: hidden;
  234. border: 4rpx solid #eee;
  235. }
  236. .restaurant-name {
  237. flex: 1;
  238. font-size: 32rpx;
  239. font-weight: 500;
  240. }
  241. .service-btns {
  242. display: flex;
  243. }
  244. .service-btn, .order-btn {
  245. padding: 8rpx 20rpx;
  246. border-radius: 30rpx;
  247. font-size: 24rpx;
  248. margin-left: 10rpx;
  249. }
  250. .service-btn {
  251. border: 1px solid #ccc;
  252. color: #666;
  253. }
  254. .order-btn {
  255. background-color: #4cd964;
  256. color: #fff;
  257. }
  258. .shop-content {
  259. margin-top: 0;
  260. padding: 20rpx;
  261. position: relative;
  262. z-index: 2;
  263. }
  264. /* 产品标签页 */
  265. .product-tabs {
  266. // border: 2rpx solid red;
  267. background-color: #fff;
  268. border-radius: 20rpx;
  269. margin-bottom: 10rpx;
  270. padding: 20rpx;
  271. box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  272. }
  273. .notice {
  274. margin-bottom: 15rpx;
  275. }
  276. .notice-text {
  277. font-size: 32rpx;
  278. font-weight: bold;
  279. margin-right: 10rpx;
  280. max-width: 80%;
  281. white-space: nowrap;
  282. overflow: hidden;
  283. text-overflow: ellipsis;
  284. display: inline-block;
  285. }
  286. .notice-desc {
  287. font-size: 24rpx;
  288. color: #999;
  289. background-color: #f5f5f5;
  290. padding: 4rpx 10rpx;
  291. border-radius: 4rpx;
  292. }
  293. .tag-list {
  294. display: flex;
  295. flex-wrap: wrap;
  296. margin-bottom: 15rpx;
  297. }
  298. .tag {
  299. font-size: 24rpx;
  300. color: $uni-color-second;
  301. border: 1px solid #ffcccc;
  302. padding: 4rpx 12rpx;
  303. border-radius: 4rpx;
  304. margin-right: 10rpx;
  305. margin-bottom: 10rpx;
  306. }
  307. .price-range {
  308. margin-bottom: 20rpx;
  309. }
  310. .price {
  311. font-size: 36rpx;
  312. color: $uni-color-second;
  313. font-weight: bold;
  314. }
  315. .food-scroll {
  316. white-space: nowrap;
  317. }
  318. .food-item {
  319. display: inline-block;
  320. width: 300rpx;
  321. margin-right: 20rpx;
  322. background-color: #fff;
  323. border-radius: 10rpx;
  324. overflow: hidden;
  325. box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  326. }
  327. .food-image {
  328. width: 160rpx;
  329. height: 160rpx;
  330. }
  331. .food-detail {
  332. padding: 10rpx;
  333. }
  334. .food-name {
  335. font-size: 28rpx;
  336. font-weight: bold;
  337. margin-bottom: 5rpx;
  338. }
  339. .food-desc {
  340. font-size: 24rpx;
  341. color: #999;
  342. margin-bottom: 5rpx;
  343. white-space: normal;
  344. overflow: hidden;
  345. text-overflow: ellipsis;
  346. display: -webkit-box;
  347. -webkit-line-clamp: 1;
  348. -webkit-box-orient: vertical;
  349. }
  350. .food-price {
  351. display: flex;
  352. align-items: baseline;
  353. }
  354. .current-price {
  355. font-size: 28rpx;
  356. color: $uni-color-second;
  357. font-weight: bold;
  358. margin-right: 10rpx;
  359. }
  360. .original-price {
  361. font-size: 24rpx;
  362. color: #999;
  363. text-decoration: line-through;
  364. }
  365. .group-purchase {
  366. background-color: #fff;
  367. border-radius: 20rpx;
  368. margin: 0rpx 20rpx 30rpx 20rpx;
  369. padding: 30rpx 20rpx;
  370. box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  371. }
  372. .group-order-list {
  373. // height: 330rpx;
  374. overflow: hidden;
  375. }
  376. .order-item {
  377. display: flex;
  378. padding: 10rpx;
  379. border-bottom: 1rpx solid #f2f2f2;
  380. align-items: center;
  381. justify-content: space-between;
  382. }
  383. .order-id {
  384. // flex: 1;
  385. font-size: 26rpx;
  386. color: #999;
  387. margin-right: 10rpx;
  388. // display: inline-block;
  389. }
  390. .order-user {
  391. flex: 1;
  392. display: flex;
  393. align-items: center;
  394. width: 140rpx;
  395. }
  396. .user-avatar {
  397. width: 54rpx;
  398. height: 54rpx;
  399. border-radius: 6rpx;
  400. margin-right: 10rpx;
  401. }
  402. .user-name {
  403. font-size: 26rpx;
  404. color: black;
  405. }
  406. .order-time {
  407. font-size: 24rpx;
  408. color: #999;
  409. margin-left: 10rpx;
  410. }
  411. .order-content {
  412. flex: 1;
  413. display: flex;
  414. justify-content: flex-end;
  415. align-items: center;
  416. // margin-left: 10rpx;
  417. }
  418. .order-desc {
  419. font-size: 28rpx;
  420. color: #333;
  421. font-weight: bold;
  422. max-width: 88%;
  423. white-space: nowrap;
  424. overflow: hidden;
  425. text-overflow: ellipsis;
  426. margin-right: 10rpx;
  427. }
  428. .order-count {
  429. font-size: 28rpx;
  430. color: $uni-color-second;
  431. // font-weight: bold;
  432. }
  433. </style>