hflllll
5 months ago
24 changed files with 1344 additions and 554 deletions
Split View
Diff Options
-
+3 -3App.vue
-
+6 -6components/base/navbar.vue
-
+8 -1components/base/tabbar.vue
-
+1 -1components/order/OrderItem.vue
-
+9 -7components/product/productItem.vue
-
+8 -1pages.json
-
+44 -30pages/index/cart.vue
-
+2 -3pages/index/center.vue
-
+424 -446pages/index/index.vue
-
+453 -0pages/index/oldIndex.vue
-
+1 -1pages/index/order.vue
-
+1 -1pages_order/auth/wxUserInfo.vue
-
+24 -7pages_order/components/order/placeOrder.vue
-
+2 -2pages_order/mine/share.vue
-
+5 -6pages_order/mine/team.vue
-
+7 -4pages_order/mine/unbindTeam.vue
-
+0 -1pages_order/mine/updateUser.vue
-
+16 -8pages_order/mine/wallet.vue
-
+1 -1pages_order/order/groupMealDetail.vue
-
+104 -15pages_order/order/newOrderDetail.vue
-
+8 -1pages_order/product/productDetail.vue
-
+166 -0static/js/mockHomeData.js
-
+23 -0store/modules/cartNum.js
-
+28 -9store/store.js
+ 3
- 3
App.vue
View File
+ 6
- 6
components/base/navbar.vue
View File
+ 8
- 1
components/base/tabbar.vue
View File
+ 1
- 1
components/order/OrderItem.vue
View File
+ 9
- 7
components/product/productItem.vue
View File
+ 8
- 1
pages.json
View File
+ 44
- 30
pages/index/cart.vue
View File
+ 2
- 3
pages/index/center.vue
View File
+ 424
- 446
pages/index/index.vue
View File
| @ -1,453 +1,431 @@ | |||
| <template> | |||
| <view class="home"> | |||
| <view style="background-color: white;"> | |||
| <!-- 导航栏 --> | |||
| <navbar :title="configList.logo_name"/> | |||
| <!-- 搜索栏 --> | |||
| <view class="search"> | |||
| <uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @custom="search" @search="search" | |||
| v-model="keyword"></uv-search> | |||
| </view> | |||
| <!-- 轮播图 --> | |||
| <view class="swipe"> | |||
| <uv-swiper :list="bannerList" indicator height="320rpx" keyName="image"></uv-swiper> | |||
| </view> | |||
| <!-- 首页-分类菜单 --> | |||
| <view class="home-menu"> | |||
| <uv-grid :border="false" :col="5"> | |||
| <uv-grid-item v-for="(item, index) in categoryList" | |||
| :key="index" | |||
| @tap="$utils.navigateTo(`/pages/index/category?cid=${item.id}`)"> | |||
| <image :src="item.image" mode="aspectFill"></image> | |||
| <text class="menu-text">{{item.name}}</text> | |||
| </uv-grid-item> | |||
| </uv-grid> | |||
| </view> | |||
| </view> | |||
| <!-- 新人专享 --> | |||
| <view class="new-people"> | |||
| <view class="new-perple-top"> | |||
| <view class="new-perple-top-left"> | |||
| <view class="title"> | |||
| 最新活动 | |||
| </view> | |||
| <!-- <view class="descript"> | |||
| 领199元大礼包 | |||
| </view> --> | |||
| </view> | |||
| <view class="new-perple-top-right" | |||
| @tap="$utils.navigateTo(`/pages_order/home/journalism`)"> | |||
| <image :src="configList.index_model" mode="aspectFill"></image> | |||
| </view> | |||
| </view> | |||
| <view class="new-perple-main"> | |||
| <!-- <view class="red-packet"> | |||
| <image src="@/static/image/home/red-packet.png" mode="aspectFill"></image> | |||
| </view> --> | |||
| <view v-for="(item, index) in adList" :key="item.id" | |||
| @tap="$utils.navigateTo(`/pages_order/home/newsDetail?id=${item.id}`)" | |||
| class="activity"> | |||
| <image :src="item.icon" mode="aspectFill"></image> | |||
| <view class="title">{{ item.title }}</view> | |||
| <!-- <view class="product-price"> | |||
| ￥100 | |||
| </view> --> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 视频 --> | |||
| <view v-if="configList.index_vo" class="video-line"> | |||
| <view class="line"></view> | |||
| 视频 | |||
| </view> | |||
| <view v-if="configList.index_vo" class="video-item"> | |||
| <video | |||
| :src="configList.index_vo" | |||
| object-fit="cover" | |||
| @error="videoErrorCallback" | |||
| :danmu-list="danmuList" | |||
| controls class="product-video"></video> | |||
| </view> | |||
| <!-- 推荐 --> | |||
| <view class="recommend"> | |||
| <view class="recommend-title"> | |||
| <view class="line"></view> | |||
| 推荐宝贝 | |||
| </view> | |||
| <view @tap="$utils.navigateTo('/pages/index/category')" | |||
| class="recommend-more">更多</view> | |||
| </view> | |||
| <!-- 商品列表 --> | |||
| <view style="position: 20rpx;"> | |||
| <productList :list="list" /> | |||
| </view> | |||
| <!-- 全局弹框 --> | |||
| <PrivacyAgreementPoup /> | |||
| <!-- 联系客服 --> | |||
| <customerServicePopup ref="customerServicePopup" /> | |||
| <!-- tabbar --> | |||
| <tabber select="home" /> | |||
| <!-- 优惠券弹窗 --> | |||
| <couponPopup v-if="riceInfo.isGetCoupon"></couponPopup> | |||
| </view> | |||
| <view class="page"> | |||
| <navbar title="首页" bgColor="#019245" color="#fff" /> | |||
| <!-- 内容区域 --> | |||
| <view class="content"> | |||
| <!-- 轮播图 --> | |||
| <swiper class="banner-swiper" circular autoplay> | |||
| <swiper-item v-for="item in homeData.banners" :key="item.id"> | |||
| <image :src="item.image" mode="aspectFill" class="banner-image" /> | |||
| </swiper-item> | |||
| </swiper> | |||
| <!-- 店铺信息 --> | |||
| <view class="restaurant-info"> | |||
| <div class="restaurant-logo"> | |||
| <image :src="configList.config_logo" mode="aspectFill" style="width: 100%; height: 100%;" /> | |||
| </div> | |||
| <view class="restaurant-name">{{homeData.restaurant.name}}</view> | |||
| <!-- <view class="service-btns"> | |||
| <view class="service-btn"> | |||
| <text>客服</text> | |||
| </view> | |||
| <view class="order-btn"> | |||
| <text>订阅</text> | |||
| </view> | |||
| </view> --> | |||
| </view> | |||
| <!-- 商店内容区域 --> | |||
| <view class="shop-content"> | |||
| <!-- 产品标签页 --> | |||
| <view class="product-tabs"> | |||
| <!-- 公告信息 --> | |||
| <view class="notice"> | |||
| <text class="notice-text">{{homeData.restaurant.notice}}</text> | |||
| <text class="notice-desc">{{homeData.restaurant.description}}</text> | |||
| </view> | |||
| <!-- 标签列表 --> | |||
| <view class="tag-list"> | |||
| <view class="tag" v-for="(tag, index) in homeData.tags" :key="index">{{tag}}</view> | |||
| </view> | |||
| <!-- 价格区间 --> | |||
| <view class="price-range"> | |||
| <text class="price">{{homeData.priceRange}}</text> | |||
| </view> | |||
| <!-- 产品展示 --> | |||
| <scroll-view scroll-x class="food-scroll"> | |||
| <view class="food-item" v-for="food in homeData.foods" :key="food.id"> | |||
| <image :src="food.image" mode="aspectFill" class="food-image" /> | |||
| <view class="food-detail"> | |||
| <view class="food-name">{{food.name}}</view> | |||
| <view class="food-desc">{{food.desc}}</view> | |||
| <view class="food-price"> | |||
| <text class="current-price">¥{{food.price}}</text> | |||
| <text class="original-price">¥{{food.originalPrice}}</text> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </scroll-view> | |||
| </view> | |||
| </view> | |||
| <!-- 跟团部分 --> | |||
| <view class="group-purchase"> | |||
| <view class="group-order-list"> | |||
| <swiper vertical autoplay circular interval="3000" duration="500" | |||
| display-multiple-items="3"> | |||
| <swiper-item v-for="(order, index) in orderList" :key="index"> | |||
| <view class="order-item"> | |||
| <view class="order-id">{{ order.id }}</view> | |||
| <view class="order-user"> | |||
| <image :src="order.avatar" mode="aspectFill" class="user-avatar" /> | |||
| <text class="user-name">{{ order.userName }}</text> | |||
| <text class="order-time">{{ order.time }}</text> | |||
| </view> | |||
| <view class="order-content"> | |||
| <text class="order-desc">{{ order.content }}</text> | |||
| <text class="order-count">+{{ order.count }}</text> | |||
| </view> | |||
| </view> | |||
| </swiper-item> | |||
| </swiper> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <tabbar select="index" /> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue' | |||
| import Position from '@/utils/position.js' | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import couponPopup from "@/components/couponPopup/couponPopup.vue" | |||
| import { | |||
| mapState | |||
| } from 'vuex' | |||
| import customerServicePopup from '@/components/config/customerServicePopup.vue' | |||
| import productList from '@/components/user/productList.vue' | |||
| import mixinsList from '@/mixins/list.js' | |||
| export default { | |||
| mixins: [mixinsList], | |||
| components: { | |||
| tabber, | |||
| PrivacyAgreementPoup, | |||
| customerServicePopup, | |||
| productList, | |||
| couponPopup | |||
| }, | |||
| data() { | |||
| return { | |||
| notice: '', | |||
| bannerList: [], | |||
| baseList: [], | |||
| productList: [], | |||
| keyword: '', | |||
| commonProductList: [], //常规产品 | |||
| riceProductList: [], //体验产品 | |||
| newList: [], //新闻列表 | |||
| mixinsListApi: 'getClassShopPageList', | |||
| adList: [], | |||
| categoryList : [], | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState(['riceInfo', 'category']) | |||
| }, | |||
| onLoad(query) { | |||
| if (query.shareId) { | |||
| uni.setStorageSync('shareId', query.shareId) | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getBanner() | |||
| this.getRiceNoticeList() | |||
| this.getRiceIconList() | |||
| this.getCategoryList() | |||
| this.getRiceAdList() | |||
| if(uni.getStorageSync('token')){ | |||
| this.$store.commit('getRiceInfo') | |||
| this.$store.commit('getUserInfo') | |||
| } | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.getBanner() | |||
| this.getRiceNoticeList() | |||
| }, | |||
| methods: { | |||
| // 搜素 | |||
| search() { | |||
| uni.navigateTo({ | |||
| url: '/pages/index/category?search=' + this.keyword | |||
| }) | |||
| this.keyword = '' | |||
| }, | |||
| // 查询分类接口 | |||
| getCategoryList() { | |||
| this.$api('getPidList', res => { | |||
| if (res.code == 200) { | |||
| this.categoryList = res.result | |||
| } | |||
| }) | |||
| }, | |||
| // 获取轮播图 | |||
| getBanner() { | |||
| this.$api('getRiceBanner', res => { | |||
| if (res.code == 200) { | |||
| this.bannerList = res.result | |||
| } | |||
| }) | |||
| }, | |||
| // 获取公告 | |||
| getRiceNoticeList() { | |||
| this.$api('getRiceNoticeList', res => { | |||
| if (res.code == 200) { | |||
| this.notice = res.result.title | |||
| } | |||
| }) | |||
| }, | |||
| // 获取首页新闻列表 | |||
| getRiceNewsList() { | |||
| this.$api('getRiceNewsList', res => { | |||
| if (res.code == 200) { | |||
| this.newList = res.result.records | |||
| } | |||
| }) | |||
| }, | |||
| // 获取首页菜单图标 | |||
| getRiceIconList() { | |||
| this.$api('getRiceIconList', res => { | |||
| if (res.code == 200) { | |||
| this.baseList = res.result | |||
| } | |||
| }) | |||
| }, | |||
| //获取首页广告 | |||
| getRiceAdList() { | |||
| this.$api('getRiceProductList', { | |||
| pageNo: 1, | |||
| pageSize: 4, | |||
| }, res => { | |||
| if (res.code == 200) { | |||
| this.adList = res.result.records | |||
| } | |||
| }) | |||
| }, | |||
| //跳转 | |||
| toUrl(url) { | |||
| if (!url) { | |||
| uni.showToast({ | |||
| title: '功能暂未开放', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| if (url == '::phone') { | |||
| this.$refs.customerServicePopup.open() | |||
| return | |||
| } | |||
| uni.navigateTo({ | |||
| url | |||
| }) | |||
| }, | |||
| //视频播放错误 | |||
| videoErrorCallback: function(e) { | |||
| uni.showModal({ | |||
| content: e.target.errMsg, | |||
| showCancel: false | |||
| }) | |||
| }, | |||
| //左右滚动视频 | |||
| scroll: function(e) { | |||
| }, | |||
| }, | |||
| } | |||
| import navbar from '@/components/base/navbar.vue' | |||
| import tabbar from '@/components/base/tabbar.vue' | |||
| import { homeData } from '@/static/js/mockHomeData.js' | |||
| export default { | |||
| components: { | |||
| navbar, | |||
| tabbar | |||
| }, | |||
| data() { | |||
| return { | |||
| homeData: homeData, | |||
| orderList: [ | |||
| { | |||
| id: 19141, | |||
| userName: '3**', | |||
| avatar: '/static/image/中森明菜.webp', | |||
| time: '1分钟前', | |||
| content: '【单点】小炒黄牛肉...', | |||
| count: 1 | |||
| }, | |||
| { | |||
| id: 19145, | |||
| userName: 'B**', | |||
| avatar: '/static/image/中森明菜.webp', | |||
| time: '1分钟前', | |||
| content: '黑椒肥牛饭(1份)', | |||
| count: 1 | |||
| }, | |||
| { | |||
| id: 19144, | |||
| userName: '吃**', | |||
| avatar: '/static/image/中森明菜.webp', | |||
| time: '1分钟前', | |||
| content: '【单点】黑盒220g...', | |||
| count: 1 | |||
| }, | |||
| { | |||
| id: 19143, | |||
| userName: 'L**', | |||
| avatar: '/static/image/中森明菜.webp', | |||
| time: '2分钟前', | |||
| content: '红烧肉套餐(1份)', | |||
| count: 2 | |||
| }, | |||
| { | |||
| id: 19142, | |||
| userName: '美**', | |||
| avatar: '/static/image/中森明菜.webp', | |||
| time: '3分钟前', | |||
| content: '【单点】小炒肉(1份)', | |||
| count: 1 | |||
| } | |||
| ] | |||
| } | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .home { | |||
| // 搜索栏 | |||
| .search { | |||
| border: 1px solid #F0F0F0; | |||
| margin: 20rpx; | |||
| border-radius: 41rpx; | |||
| padding: 10rpx 0rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| /deep/ .uv-search__action { | |||
| background-color: $uni-color; | |||
| color: #FFFFFF; | |||
| padding: 10rpx 20rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| } | |||
| // 轮播图 | |||
| .swipe { | |||
| overflow: hidden; | |||
| border-radius: 20rpx; | |||
| margin: 20rpx; | |||
| } | |||
| // 首页-分类菜单 | |||
| .home-menu { | |||
| margin: 20rpx; | |||
| border-radius: 20rpx; | |||
| padding: 20rpx 0rpx; | |||
| background-color: #fff; | |||
| image { | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| margin-top: 10rpx; | |||
| } | |||
| .menu-text { | |||
| font-size: 28rpx; | |||
| margin: 10rpx 0rpx; | |||
| } | |||
| } | |||
| // 新人专享 | |||
| .new-people { | |||
| background: white; | |||
| padding: 20rpx; | |||
| margin-bottom: 20rpx; | |||
| .new-perple-top { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| margin-bottom: 20rpx; | |||
| .new-perple-top-left { | |||
| display: flex; | |||
| align-items: center; | |||
| color: $uni-color; | |||
| .title { | |||
| font-size: 40rpx; | |||
| font-weight: bold; | |||
| } | |||
| .descript { | |||
| margin-left: 10rpx; | |||
| } | |||
| } | |||
| .new-perple-top-right { | |||
| image { | |||
| width: 80px; | |||
| height: 40rpx; | |||
| } | |||
| } | |||
| } | |||
| .new-perple-main { | |||
| display: flex; | |||
| .red-packet { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 20%; | |||
| image { | |||
| width: 120rpx; | |||
| height: 120rpx; | |||
| } | |||
| } | |||
| .activity { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 25%; | |||
| background: white; | |||
| border-radius: 10px; | |||
| image { | |||
| width: 140rpx; | |||
| height: 140rpx; | |||
| border-radius: 10rpx; | |||
| } | |||
| .title { | |||
| background: $uni-color; | |||
| color: white; | |||
| border-radius: 20rpx; | |||
| font-size: 24rpx; | |||
| padding: 5rpx 10rpx; | |||
| margin: 10rpx 0rpx; | |||
| width: 90%; | |||
| white-space: nowrap; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| box-sizing: border-box; | |||
| text-align: center; | |||
| } | |||
| .product-price { | |||
| color: $uni-color; | |||
| font-size: 24rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| // 视频 | |||
| .video-line { | |||
| display: flex; | |||
| align-items: center; | |||
| padding: 20rpx; | |||
| background: white; | |||
| font-size: 34rpx; | |||
| } | |||
| .line { | |||
| height: 40rpx; | |||
| width: 10rpx; | |||
| background: $uni-color; | |||
| border-radius: 5rpx; | |||
| margin-right: 10rpx; | |||
| } | |||
| .video-item { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin: 20rpx 0rpx; | |||
| .product-video { | |||
| border-radius: 20rpx; | |||
| width: calc(710rpx); | |||
| // height: 320rpx; | |||
| } | |||
| } | |||
| // 推荐 | |||
| .recommend { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| background: white; | |||
| margin: 20rpx 0rpx; | |||
| padding: 20rpx; | |||
| .recommend-title { | |||
| font-size: 34rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| } | |||
| .recommend-more { | |||
| color: $uni-color; | |||
| } | |||
| } | |||
| } | |||
| <style lang="scss" scoped> | |||
| .content { | |||
| flex: 1; | |||
| background: linear-gradient(to bottom, #fff, #f5f5f5); | |||
| // padding-bottom: 120rpx; | |||
| } | |||
| .banner-swiper { | |||
| width: 100%; | |||
| height: 350rpx; | |||
| position: relative; | |||
| z-index: 1; | |||
| } | |||
| .banner-image { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .restaurant-info { | |||
| display: flex; | |||
| align-items: center; | |||
| padding: 20rpx; | |||
| margin-top: -30rpx; | |||
| max-height: 60rpx; | |||
| border-radius: 20rpx 20rpx 0 0; | |||
| background-color: #fff; | |||
| border-bottom: 1px solid #eee; | |||
| position: relative; | |||
| z-index: 2; | |||
| } | |||
| .restaurant-logo { | |||
| width: 130rpx; | |||
| height: 130rpx; | |||
| border-radius: 20rpx; | |||
| margin-right: 20rpx; | |||
| margin-top: -60rpx; | |||
| overflow: hidden; | |||
| border: 4rpx solid #eee; | |||
| } | |||
| .restaurant-name { | |||
| flex: 1; | |||
| font-size: 32rpx; | |||
| font-weight: 500; | |||
| } | |||
| .service-btns { | |||
| display: flex; | |||
| } | |||
| .service-btn, .order-btn { | |||
| padding: 8rpx 20rpx; | |||
| border-radius: 30rpx; | |||
| font-size: 24rpx; | |||
| margin-left: 10rpx; | |||
| } | |||
| .service-btn { | |||
| border: 1px solid #ccc; | |||
| color: #666; | |||
| } | |||
| .order-btn { | |||
| background-color: #4cd964; | |||
| color: #fff; | |||
| } | |||
| .shop-content { | |||
| margin-top: 0; | |||
| padding: 20rpx; | |||
| position: relative; | |||
| z-index: 2; | |||
| } | |||
| /* 产品标签页 */ | |||
| .product-tabs { | |||
| // border: 2rpx solid red; | |||
| background-color: #fff; | |||
| border-radius: 20rpx; | |||
| margin-bottom: 10rpx; | |||
| padding: 20rpx; | |||
| box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); | |||
| } | |||
| .notice { | |||
| margin-bottom: 15rpx; | |||
| } | |||
| .notice-text { | |||
| font-size: 32rpx; | |||
| font-weight: bold; | |||
| margin-right: 10rpx; | |||
| max-width: 80%; | |||
| white-space: nowrap; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| display: inline-block; | |||
| } | |||
| .notice-desc { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| background-color: #f5f5f5; | |||
| padding: 4rpx 10rpx; | |||
| border-radius: 4rpx; | |||
| } | |||
| .tag-list { | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| margin-bottom: 15rpx; | |||
| } | |||
| .tag { | |||
| font-size: 24rpx; | |||
| color: $uni-color-second; | |||
| border: 1px solid #ffcccc; | |||
| padding: 4rpx 12rpx; | |||
| border-radius: 4rpx; | |||
| margin-right: 10rpx; | |||
| margin-bottom: 10rpx; | |||
| } | |||
| .price-range { | |||
| margin-bottom: 20rpx; | |||
| } | |||
| .price { | |||
| font-size: 36rpx; | |||
| color: $uni-color-second; | |||
| font-weight: bold; | |||
| } | |||
| .food-scroll { | |||
| white-space: nowrap; | |||
| } | |||
| .food-item { | |||
| display: inline-block; | |||
| width: 300rpx; | |||
| margin-right: 20rpx; | |||
| background-color: #fff; | |||
| border-radius: 10rpx; | |||
| overflow: hidden; | |||
| box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); | |||
| } | |||
| .food-image { | |||
| width: 140rpx; | |||
| height: 140rpx; | |||
| } | |||
| .food-detail { | |||
| padding: 10rpx; | |||
| } | |||
| .food-name { | |||
| font-size: 28rpx; | |||
| font-weight: bold; | |||
| margin-bottom: 5rpx; | |||
| } | |||
| .food-desc { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| margin-bottom: 5rpx; | |||
| white-space: normal; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| display: -webkit-box; | |||
| -webkit-line-clamp: 1; | |||
| -webkit-box-orient: vertical; | |||
| } | |||
| .food-price { | |||
| display: flex; | |||
| align-items: baseline; | |||
| } | |||
| .current-price { | |||
| font-size: 28rpx; | |||
| color: $uni-color-second; | |||
| font-weight: bold; | |||
| margin-right: 10rpx; | |||
| } | |||
| .original-price { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| text-decoration: line-through; | |||
| } | |||
| .group-purchase { | |||
| background-color: #fff; | |||
| border-radius: 20rpx; | |||
| margin: 0rpx 20rpx 30rpx 20rpx; | |||
| padding: 30rpx 20rpx; | |||
| box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1); | |||
| } | |||
| .group-order-list { | |||
| // height: 330rpx; | |||
| overflow: hidden; | |||
| } | |||
| .order-item { | |||
| display: flex; | |||
| padding: 10rpx; | |||
| border-bottom: 1rpx solid #f2f2f2; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| } | |||
| .order-id { | |||
| // flex: 1; | |||
| font-size: 26rpx; | |||
| color: #999; | |||
| margin-right: 10rpx; | |||
| // display: inline-block; | |||
| } | |||
| .order-user { | |||
| flex: 1; | |||
| display: flex; | |||
| align-items: center; | |||
| width: 140rpx; | |||
| } | |||
| .user-avatar { | |||
| width: 54rpx; | |||
| height: 54rpx; | |||
| border-radius: 6rpx; | |||
| margin-right: 10rpx; | |||
| } | |||
| .user-name { | |||
| font-size: 26rpx; | |||
| color: black; | |||
| } | |||
| .order-time { | |||
| font-size: 24rpx; | |||
| color: #999; | |||
| margin-left: 10rpx; | |||
| } | |||
| .order-content { | |||
| flex: 1; | |||
| display: flex; | |||
| justify-content: flex-end; | |||
| align-items: center; | |||
| // margin-left: 10rpx; | |||
| } | |||
| .order-desc { | |||
| font-size: 28rpx; | |||
| color: #333; | |||
| font-weight: bold; | |||
| max-width: 88%; | |||
| white-space: nowrap; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| margin-right: 10rpx; | |||
| } | |||
| .order-count { | |||
| font-size: 28rpx; | |||
| color: $uni-color-second; | |||
| // font-weight: bold; | |||
| } | |||
| </style> | |||
+ 453
- 0
pages/index/oldIndex.vue
View File
| @ -0,0 +1,453 @@ | |||
| <template> | |||
| <view class="home"> | |||
| <view style="background-color: white;"> | |||
| <!-- 导航栏 --> | |||
| <navbar :title="configList.logo_name"/> | |||
| <!-- 搜索栏 --> | |||
| <view class="search"> | |||
| <uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @custom="search" @search="search" | |||
| v-model="keyword"></uv-search> | |||
| </view> | |||
| <!-- 轮播图 --> | |||
| <view class="swipe"> | |||
| <uv-swiper :list="bannerList" indicator height="320rpx" keyName="image"></uv-swiper> | |||
| </view> | |||
| <!-- 首页-分类菜单 --> | |||
| <view class="home-menu"> | |||
| <uv-grid :border="false" :col="5"> | |||
| <uv-grid-item v-for="(item, index) in categoryList" | |||
| :key="index" | |||
| @tap="$utils.navigateTo(`/pages/index/category?cid=${item.id}`)"> | |||
| <image :src="item.image" mode="aspectFill"></image> | |||
| <text class="menu-text">{{item.name}}</text> | |||
| </uv-grid-item> | |||
| </uv-grid> | |||
| </view> | |||
| </view> | |||
| <!-- 新人专享 --> | |||
| <view class="new-people"> | |||
| <view class="new-perple-top"> | |||
| <view class="new-perple-top-left"> | |||
| <view class="title"> | |||
| 最新活动 | |||
| </view> | |||
| <!-- <view class="descript"> | |||
| 领199元大礼包 | |||
| </view> --> | |||
| </view> | |||
| <view class="new-perple-top-right" | |||
| @tap="$utils.navigateTo(`/pages_order/home/journalism`)"> | |||
| <image :src="configList.index_model" mode="aspectFill"></image> | |||
| </view> | |||
| </view> | |||
| <view class="new-perple-main"> | |||
| <!-- <view class="red-packet"> | |||
| <image src="@/static/image/home/red-packet.png" mode="aspectFill"></image> | |||
| </view> --> | |||
| <view v-for="(item, index) in adList" :key="item.id" | |||
| @tap="$utils.navigateTo(`/pages_order/home/newsDetail?id=${item.id}`)" | |||
| class="activity"> | |||
| <image :src="item.icon" mode="aspectFill"></image> | |||
| <view class="title">{{ item.title }}</view> | |||
| <!-- <view class="product-price"> | |||
| ￥100 | |||
| </view> --> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <!-- 视频 --> | |||
| <view v-if="configList.index_vo" class="video-line"> | |||
| <view class="line"></view> | |||
| 视频 | |||
| </view> | |||
| <view v-if="configList.index_vo" class="video-item"> | |||
| <video | |||
| :src="configList.index_vo" | |||
| object-fit="cover" | |||
| @error="videoErrorCallback" | |||
| :danmu-list="danmuList" | |||
| controls class="product-video"></video> | |||
| </view> | |||
| <!-- 推荐 --> | |||
| <view class="recommend"> | |||
| <view class="recommend-title"> | |||
| <view class="line"></view> | |||
| 推荐宝贝 | |||
| </view> | |||
| <view @tap="$utils.navigateTo('/pages/index/category')" | |||
| class="recommend-more">更多</view> | |||
| </view> | |||
| <!-- 商品列表 --> | |||
| <view style="position: 20rpx;"> | |||
| <productList :list="list" /> | |||
| </view> | |||
| <!-- 全局弹框 --> | |||
| <PrivacyAgreementPoup /> | |||
| <!-- 联系客服 --> | |||
| <customerServicePopup ref="customerServicePopup" /> | |||
| <!-- tabbar --> | |||
| <tabber select="home" /> | |||
| <!-- 优惠券弹窗 --> | |||
| <couponPopup v-if="riceInfo.isGetCoupon"></couponPopup> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue' | |||
| import Position from '@/utils/position.js' | |||
| import tabber from '@/components/base/tabbar.vue' | |||
| import couponPopup from "@/components/couponPopup/couponPopup.vue" | |||
| import { | |||
| mapState | |||
| } from 'vuex' | |||
| import customerServicePopup from '@/components/config/customerServicePopup.vue' | |||
| import productList from '@/components/user/productList.vue' | |||
| import mixinsList from '@/mixins/list.js' | |||
| export default { | |||
| mixins: [mixinsList], | |||
| components: { | |||
| tabber, | |||
| PrivacyAgreementPoup, | |||
| customerServicePopup, | |||
| productList, | |||
| couponPopup | |||
| }, | |||
| data() { | |||
| return { | |||
| notice: '', | |||
| bannerList: [], | |||
| baseList: [], | |||
| productList: [], | |||
| keyword: '', | |||
| commonProductList: [], //常规产品 | |||
| riceProductList: [], //体验产品 | |||
| newList: [], //新闻列表 | |||
| mixinsListApi: 'getClassShopPageList', | |||
| adList: [], | |||
| categoryList : [], | |||
| } | |||
| }, | |||
| computed: { | |||
| ...mapState(['riceInfo', 'category']) | |||
| }, | |||
| onLoad(query) { | |||
| if (query.shareId) { | |||
| uni.setStorageSync('shareId', query.shareId) | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getBanner() | |||
| this.getRiceNoticeList() | |||
| this.getRiceIconList() | |||
| this.getCategoryList() | |||
| this.getRiceAdList() | |||
| if(uni.getStorageSync('token')){ | |||
| this.$store.commit('getRiceInfo') | |||
| this.$store.commit('getUserInfo') | |||
| } | |||
| }, | |||
| onPullDownRefresh() { | |||
| this.getBanner() | |||
| this.getRiceNoticeList() | |||
| }, | |||
| methods: { | |||
| // 搜素 | |||
| search() { | |||
| uni.navigateTo({ | |||
| url: '/pages/index/category?search=' + this.keyword | |||
| }) | |||
| this.keyword = '' | |||
| }, | |||
| // 查询分类接口 | |||
| getCategoryList() { | |||
| this.$api('getPidList', res => { | |||
| if (res.code == 200) { | |||
| this.categoryList = res.result | |||
| } | |||
| }) | |||
| }, | |||
| // 获取轮播图 | |||
| getBanner() { | |||
| this.$api('getRiceBanner', res => { | |||
| if (res.code == 200) { | |||
| this.bannerList = res.result | |||
| } | |||
| }) | |||
| }, | |||
| // 获取公告 | |||
| getRiceNoticeList() { | |||
| this.$api('getRiceNoticeList', res => { | |||
| if (res.code == 200) { | |||
| this.notice = res.result.title | |||
| } | |||
| }) | |||
| }, | |||
| // 获取首页新闻列表 | |||
| getRiceNewsList() { | |||
| this.$api('getRiceNewsList', res => { | |||
| if (res.code == 200) { | |||
| this.newList = res.result.records | |||
| } | |||
| }) | |||
| }, | |||
| // 获取首页菜单图标 | |||
| getRiceIconList() { | |||
| this.$api('getRiceIconList', res => { | |||
| if (res.code == 200) { | |||
| this.baseList = res.result | |||
| } | |||
| }) | |||
| }, | |||
| //获取首页广告 | |||
| getRiceAdList() { | |||
| this.$api('getRiceProductList', { | |||
| pageNo: 1, | |||
| pageSize: 4, | |||
| }, res => { | |||
| if (res.code == 200) { | |||
| this.adList = res.result.records | |||
| } | |||
| }) | |||
| }, | |||
| //跳转 | |||
| toUrl(url) { | |||
| if (!url) { | |||
| uni.showToast({ | |||
| title: '功能暂未开放', | |||
| icon: 'none' | |||
| }) | |||
| return | |||
| } | |||
| if (url == '::phone') { | |||
| this.$refs.customerServicePopup.open() | |||
| return | |||
| } | |||
| uni.navigateTo({ | |||
| url | |||
| }) | |||
| }, | |||
| //视频播放错误 | |||
| videoErrorCallback: function(e) { | |||
| uni.showModal({ | |||
| content: e.target.errMsg, | |||
| showCancel: false | |||
| }) | |||
| }, | |||
| //左右滚动视频 | |||
| scroll: function(e) { | |||
| }, | |||
| }, | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .home { | |||
| // 搜索栏 | |||
| .search { | |||
| border: 1px solid #F0F0F0; | |||
| margin: 20rpx; | |||
| border-radius: 41rpx; | |||
| padding: 10rpx 0rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| /deep/ .uv-search__action { | |||
| background-color: $uni-color; | |||
| color: #FFFFFF; | |||
| padding: 10rpx 20rpx; | |||
| border-radius: 30rpx; | |||
| } | |||
| } | |||
| // 轮播图 | |||
| .swipe { | |||
| overflow: hidden; | |||
| border-radius: 20rpx; | |||
| margin: 20rpx; | |||
| } | |||
| // 首页-分类菜单 | |||
| .home-menu { | |||
| margin: 20rpx; | |||
| border-radius: 20rpx; | |||
| padding: 20rpx 0rpx; | |||
| background-color: #fff; | |||
| image { | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| margin-top: 10rpx; | |||
| } | |||
| .menu-text { | |||
| font-size: 28rpx; | |||
| margin: 10rpx 0rpx; | |||
| } | |||
| } | |||
| // 新人专享 | |||
| .new-people { | |||
| background: white; | |||
| padding: 20rpx; | |||
| margin-bottom: 20rpx; | |||
| .new-perple-top { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| margin-bottom: 20rpx; | |||
| .new-perple-top-left { | |||
| display: flex; | |||
| align-items: center; | |||
| color: $uni-color; | |||
| .title { | |||
| font-size: 40rpx; | |||
| font-weight: bold; | |||
| } | |||
| .descript { | |||
| margin-left: 10rpx; | |||
| } | |||
| } | |||
| .new-perple-top-right { | |||
| image { | |||
| width: 80px; | |||
| height: 40rpx; | |||
| } | |||
| } | |||
| } | |||
| .new-perple-main { | |||
| display: flex; | |||
| .red-packet { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 20%; | |||
| image { | |||
| width: 120rpx; | |||
| height: 120rpx; | |||
| } | |||
| } | |||
| .activity { | |||
| display: flex; | |||
| flex-direction: column; | |||
| align-items: center; | |||
| justify-content: center; | |||
| width: 25%; | |||
| background: white; | |||
| border-radius: 10px; | |||
| image { | |||
| width: 140rpx; | |||
| height: 140rpx; | |||
| border-radius: 10rpx; | |||
| } | |||
| .title { | |||
| background: $uni-color; | |||
| color: white; | |||
| border-radius: 20rpx; | |||
| font-size: 24rpx; | |||
| padding: 5rpx 10rpx; | |||
| margin: 10rpx 0rpx; | |||
| width: 90%; | |||
| white-space: nowrap; | |||
| overflow: hidden; | |||
| text-overflow: ellipsis; | |||
| box-sizing: border-box; | |||
| text-align: center; | |||
| } | |||
| .product-price { | |||
| color: $uni-color; | |||
| font-size: 24rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| // 视频 | |||
| .video-line { | |||
| display: flex; | |||
| align-items: center; | |||
| padding: 20rpx; | |||
| background: white; | |||
| font-size: 34rpx; | |||
| } | |||
| .line { | |||
| height: 40rpx; | |||
| width: 10rpx; | |||
| background: $uni-color; | |||
| border-radius: 5rpx; | |||
| margin-right: 10rpx; | |||
| } | |||
| .video-item { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| margin: 20rpx 0rpx; | |||
| .product-video { | |||
| border-radius: 20rpx; | |||
| width: calc(710rpx); | |||
| // height: 320rpx; | |||
| } | |||
| } | |||
| // 推荐 | |||
| .recommend { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: space-between; | |||
| background: white; | |||
| margin: 20rpx 0rpx; | |||
| padding: 20rpx; | |||
| .recommend-title { | |||
| font-size: 34rpx; | |||
| display: flex; | |||
| align-items: center; | |||
| } | |||
| .recommend-more { | |||
| color: $uni-color; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 1
- 1
pages/index/order.vue
View File
+ 1
- 1
pages_order/auth/wxUserInfo.vue
View File
+ 24
- 7
pages_order/components/order/placeOrder.vue
View File
+ 2
- 2
pages_order/mine/share.vue
View File
+ 5
- 6
pages_order/mine/team.vue
View File
+ 7
- 4
pages_order/mine/unbindTeam.vue
View File
+ 0
- 1
pages_order/mine/updateUser.vue
View File
+ 16
- 8
pages_order/mine/wallet.vue
View File
+ 1
- 1
pages_order/order/groupMealDetail.vue
View File
+ 104
- 15
pages_order/order/newOrderDetail.vue
View File
+ 8
- 1
pages_order/product/productDetail.vue
View File
+ 166
- 0
static/js/mockHomeData.js
View File
| @ -0,0 +1,166 @@ | |||
| // 首页数据mock | |||
| const homeData = { | |||
| // 轮播图数据 | |||
| banners: [ | |||
| { | |||
| id: 1, | |||
| image: '/static/image/红烧肉.webp', | |||
| url: '/pages/product/detail' | |||
| }, | |||
| { | |||
| id: 2, | |||
| image: '/static/image/古茗店面.webp', | |||
| url: '/pages/product/detail' | |||
| }, | |||
| { | |||
| id: 3, | |||
| image: '/static/image/home/1.png', | |||
| url: '/pages/product/detail' | |||
| } | |||
| ], | |||
| // 餐厅信息 | |||
| restaurant: { | |||
| logo: '/static/image/logo.webp', | |||
| name: '大卫熊品质午餐', | |||
| notice: '5月16日周五取【Davv Bear 大卫熊品质】', | |||
| description: '近期发布' | |||
| }, | |||
| // 会员权益与积分商城 | |||
| memberBenefits: { | |||
| title: '会员权益', | |||
| desc: '最高9.0折', | |||
| icon: '/static/image/券.webp', | |||
| url: '/pages/member/benefits' | |||
| }, | |||
| pointsMall: { | |||
| title: '积分商城', | |||
| desc: '跟团赚积分', | |||
| icon: '/static/image/红包.webp', | |||
| url: '/pages/points/mall' | |||
| }, | |||
| // 团员晒单数据 | |||
| teamSharing: { | |||
| title: '团员晒单', | |||
| descriptions: [ | |||
| '吃的太快，忘记拍照了，酸笋够味...', | |||
| '这家店的红烧肉太香了，搭配米饭刚刚好...', | |||
| '必须给黑椒肥牛打call，真的很下饭...', | |||
| '今天终于吃到了心心念念的大卫熊午餐...' | |||
| ], | |||
| images: [ | |||
| '/static/image/红烧肉.webp', | |||
| '/static/image/member/1.png', | |||
| '/static/image/member/2.png' | |||
| ] | |||
| }, | |||
| // 产品标签页 | |||
| productTabs: [ | |||
| { | |||
| id: 1, | |||
| name: '默认' | |||
| }, | |||
| { | |||
| id: 2, | |||
| name: '上新' | |||
| }, | |||
| { | |||
| id: 3, | |||
| name: '销量' | |||
| } | |||
| ], | |||
| // 产品列表 | |||
| tags: ['今日热卖845件', '新人立减9', '满22减2', '满50减6', '满80减10', '大转盘'], | |||
| priceRange: '¥0.1-9999', | |||
| foods: [ | |||
| { | |||
| id: 1, | |||
| name: '红烧肉套餐', | |||
| image: '/static/image/红烧肉.webp', | |||
| price: 19.9, | |||
| originalPrice: 29.9, | |||
| desc: '米饭+红烧肉+配菜+卤蛋' | |||
| }, | |||
| { | |||
| id: 2, | |||
| name: '小炒黄牛肉', | |||
| image: '/static/image/member/1.png', | |||
| price: 22.8, | |||
| originalPrice: 32.8, | |||
| desc: '米饭+黄牛肉+时蔬' | |||
| }, | |||
| { | |||
| id: 3, | |||
| name: '黑椒肥牛饭', | |||
| image: '/static/image/member/2.png', | |||
| price: 20.8, | |||
| originalPrice: 30.8, | |||
| desc: '米饭+黑椒肥牛+时蔬' | |||
| } | |||
| ], | |||
| // 跟团学习 | |||
| teamLearning: { | |||
| title: '最新跟团学习', | |||
| members: [ | |||
| { | |||
| id: 1, | |||
| avatar: '/static/image/中森明菜.webp', | |||
| name: '学生妹', | |||
| time: '刚刚' | |||
| }, | |||
| { | |||
| id: 2, | |||
| avatar: '/static/image/中森明菜.webp', | |||
| name: '美女团长', | |||
| time: '1分钟前' | |||
| }, | |||
| { | |||
| id: 3, | |||
| avatar: '/static/image/中森明菜.webp', | |||
| name: '小可爱', | |||
| time: '2分钟前' | |||
| } | |||
| ] | |||
| }, | |||
| // 订单通知 | |||
| orderNotifications: [ | |||
| { | |||
| id: 19141, | |||
| user: '3**', | |||
| time: '1分钟前', | |||
| content: '【单点】小炒黄牛肉', | |||
| count: 1 | |||
| }, | |||
| { | |||
| id: 19145, | |||
| user: 'B**', | |||
| time: '1分钟前', | |||
| content: '黑椒肥牛饭(1份)', | |||
| count: 1 | |||
| }, | |||
| { | |||
| id: 19144, | |||
| user: '吃**', | |||
| time: '1分钟前', | |||
| content: '【单点】黑盒220g', | |||
| count: 1 | |||
| } | |||
| ], | |||
| // 统计信息 | |||
| stats: { | |||
| viewCount: '1.9万人跟团', | |||
| orderCount: '6771人尝过' | |||
| } | |||
| } | |||
| // 统一导出 | |||
| module.exports = { | |||
| homeData | |||
| } | |||
+ 23
- 0
store/modules/cartNum.js
View File
| @ -0,0 +1,23 @@ | |||
| // store/modules/cartNum.js | |||
| // 这是管理分类列表加入购物车数量的store | |||
| import Vue from 'vue' | |||
| export default { | |||
| namespaced: true, | |||
| state: { | |||
| productCounts: {} // 格式：{ 商品ID： 数量 } | |||
| }, | |||
| mutations: { | |||
| // 增加商品数量 | |||
| incrementProduct(state, { productId, amount = 1 }) { | |||
| const currentCount = state.productCounts[productId] || 0 | |||
| Vue.set(state.productCounts, productId, currentCount + amount) | |||
| } | |||
| }, | |||
| getters: { | |||
| // 获取指定商品数量 | |||
| getProductCount: (state) => (productId) => { | |||
| return state.productCounts[productId] || 0 | |||
| } | |||
| } | |||
| } | |||