|
@@ -3,48 +3,77 @@
|
|
|
<div class="header">
|
|
|
<img class="logo" src="https://zyyc.oss-cn-beijing.aliyuncs.com/shop_mini/icons/logo-full.png" alt="">
|
|
|
<div class="header-ads">
|
|
|
- <roll-ad :options="rollads"></roll-ad>
|
|
|
+ 养出色,爱生活
|
|
|
</div>
|
|
|
</div>
|
|
|
<view>
|
|
|
<Swiper :banners="banner" />
|
|
|
</view>
|
|
|
-
|
|
|
+ <!-- 热门活动 -->
|
|
|
+ <div class="meal-title"><div><span></span>热门活动</div></div>
|
|
|
<ul class="meal-panel">
|
|
|
<li class="meal-items" v-for="item in items" :key="item.id" @click="toDetail(item)">
|
|
|
<div class="item-left">
|
|
|
<div class="item-title">
|
|
|
<span>{{item.name}}</span><span class="tag" v-if="item.tag && item.tag.length > 0">{{item.tag}}</span>
|
|
|
</div>
|
|
|
- <div class="item-desc">{{item.enName}}</div>
|
|
|
</div>
|
|
|
<img class="item-right-img" :src="item.icon" alt="">
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div class="ad-panel">
|
|
|
- <img class="ad-img" :src="ad.icon" alt="" @click="toDetail(ad)">
|
|
|
+ <!-- 我的订单 -->
|
|
|
+ <div class="meal-title"><div><span></span>我的订单</div><div class="mores" @click="toViewOrder">查看更多<van-icon name="arrow" /></div></div>
|
|
|
+ <scroll-view scroll-y v-if="isLogin" class="content">
|
|
|
+ <order-card v-for="item in orderList" :options="item" :key="item.id" @refresh="getOrderList"></order-card>
|
|
|
+ <no-data :options="orderList" name="暂无订单"/>
|
|
|
+ </scroll-view>
|
|
|
+ <div class="noLogin" v-else>
|
|
|
+ <div>请登录后查看您的订单</div>
|
|
|
+ <div>
|
|
|
+ <span @click="toLogin">立即登录</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { getIndexData, getRollAd } from '@/api/api';
|
|
|
+import { customerBundleList } from '@/api/bundle';
|
|
|
+import { checkLogin } from '@/api/login';
|
|
|
+import NoData from '@/components/NoData';
|
|
|
+import OrderCard from '@/components/OrderCard';
|
|
|
import Swiper from '@/components/swiper';
|
|
|
import RollAD from '@/components/RollAD';
|
|
|
import storage from '@/utils/storage.js'
|
|
|
|
|
|
export default {
|
|
|
- components: { Swiper, 'roll-ad': RollAD },
|
|
|
+ components: { Swiper, 'roll-ad': RollAD , 'order-card': OrderCard, 'no-data': NoData},
|
|
|
name: 'indexPage',
|
|
|
data() {
|
|
|
return {
|
|
|
ad: {},
|
|
|
items: [],
|
|
|
banner: [],
|
|
|
- rollads: []
|
|
|
+ orderList: [],
|
|
|
+ isLogin: false
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ getOrderList() {
|
|
|
+ const _this = this;
|
|
|
+ customerBundleList({}).then(res => {
|
|
|
+ if (res.status === '200') {
|
|
|
+ _this.orderList = res.data;
|
|
|
+ } else {
|
|
|
+ wx.showToast({
|
|
|
+ title: res.message,
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2500
|
|
|
+ });
|
|
|
+ }
|
|
|
+ wx.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
toDetail(item) {
|
|
|
console.log(item)
|
|
|
let url = item.redirectPath + '?title=' + item.name
|
|
@@ -93,54 +122,50 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
setIndexData(data){
|
|
|
- const _ad = data.filter(item => item.type.toLocaleUpperCase() === 'AD');
|
|
|
this.banner = data.filter(item => item.type.toLocaleUpperCase() === 'BANNER');
|
|
|
this.items = data.filter(item => item.type.toLocaleUpperCase() === 'LIST');
|
|
|
- if (_ad && _ad.length > 0) {
|
|
|
- this.ad = _ad[0];
|
|
|
- }
|
|
|
wx.hideLoading();
|
|
|
+ },
|
|
|
+ getHd(){
|
|
|
+ wx.showLoading({
|
|
|
+ mask: true,
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+ getIndexData().then(res => {
|
|
|
+ console.log(res,'---')
|
|
|
+ if (res.status === '200') {
|
|
|
+ // 设置首页数据
|
|
|
+ this.setIndexData(res.data)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ checkLogin(){
|
|
|
+ checkLogin().then(res => {
|
|
|
+ if (res.status === '200') {
|
|
|
+ this.getOrderList()
|
|
|
+ this.isLogin = true
|
|
|
+ } else {
|
|
|
+ this.isLogin = false
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toLogin(){
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/pages/login/main'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ toViewOrder(){
|
|
|
+ wx.navigateTo({
|
|
|
+ url: '/pages/order/main'
|
|
|
+ });
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
this.checekAppUpdate()
|
|
|
},
|
|
|
onShow() {
|
|
|
- wx.showLoading({
|
|
|
- mask: true,
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
- // 从缓存获取数据
|
|
|
- let rollads = storage.get('rollads')
|
|
|
- let indexData = storage.get('indexData')
|
|
|
- if(rollads){
|
|
|
- this.rollads = rollads
|
|
|
- wx.hideLoading();
|
|
|
- }else{
|
|
|
- getRollAd().then(res => {
|
|
|
- if (res.status === '200') {
|
|
|
- let list = res.data;
|
|
|
- let len = list.length;
|
|
|
- this.rollads = list.slice(0,len-(len%3));
|
|
|
- // 缓存
|
|
|
- storage.put('rollads', this.rollads, 3)
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- if(indexData){
|
|
|
- // 设置首页数据
|
|
|
- this.setIndexData(indexData)
|
|
|
- }else{
|
|
|
- getIndexData().then(res => {
|
|
|
- console.log(res,'---')
|
|
|
- if (res.status === '200') {
|
|
|
- // 设置首页数据
|
|
|
- this.setIndexData(res.data)
|
|
|
- // 缓存
|
|
|
- storage.put('indexData', res.data, 3)
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
+ this.checkLogin()
|
|
|
+ this.getHd()
|
|
|
},
|
|
|
onShareAppMessage: function () {
|
|
|
|
|
@@ -158,31 +183,50 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
.header {
|
|
|
- padding: 20rpx 55rpx;
|
|
|
+ padding: 20rpx;
|
|
|
display: flex;
|
|
|
- height: 90rpx;
|
|
|
- justify-content: space-between;
|
|
|
+ align-items : center;
|
|
|
}
|
|
|
|
|
|
.header-ads {
|
|
|
- font-size: 20rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .header-ads .item-ad {
|
|
|
- width: 285rpx;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding : 0 20rpx;
|
|
|
}
|
|
|
|
|
|
.logo {
|
|
|
height: 70rpx;
|
|
|
width: 270rpx;
|
|
|
}
|
|
|
-
|
|
|
+ .meal-title{
|
|
|
+ padding: 15rpx 30rpx 15rpx 20rpx;
|
|
|
+ background : #f8f8f8;
|
|
|
+ margin-top : 20rpx;
|
|
|
+ font-size : 34rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content : space-between;
|
|
|
+ > div{
|
|
|
+ &:first-child{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span{
|
|
|
+ border-left : 3px solid #ff8811;
|
|
|
+ height : 1em;
|
|
|
+ display : block;
|
|
|
+ padding-left : 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mores{
|
|
|
+ font-size : 24rpx;
|
|
|
+ color : #00aaff;
|
|
|
+ display : flex;
|
|
|
+ align-items : center;
|
|
|
+ }
|
|
|
+ }
|
|
|
.meal-panel {
|
|
|
- padding: 15rpx 55rpx;
|
|
|
- font-size: 0.9em;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
}
|
|
|
|
|
|
.meal-items {
|
|
@@ -193,26 +237,23 @@ export default {
|
|
|
}
|
|
|
|
|
|
.meal-items + .meal-items {
|
|
|
- border-top: 1px solid #e9eaec;
|
|
|
+ border-top: 1px solid #f8f8f8;
|
|
|
}
|
|
|
|
|
|
.item-title {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 34rpx;
|
|
|
}
|
|
|
|
|
|
.item-title .tag {
|
|
|
display: inline-block;
|
|
|
- margin-left: 10px;
|
|
|
- background-color: #ed3f14;
|
|
|
- font-size: 0.6em;
|
|
|
+ margin-left: 5px;
|
|
|
+ background-color: #ff8811;
|
|
|
+ border-radius: 30px;
|
|
|
+ font-size: 20rpx;
|
|
|
color: #fff;
|
|
|
- padding: 0 10px 2px 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .item-desc {
|
|
|
- font-size: 0.6em;
|
|
|
+ padding: 0 5px 2px 5px;
|
|
|
}
|
|
|
|
|
|
.item-right-img {
|
|
@@ -220,16 +261,22 @@ export default {
|
|
|
border-radius: 50%;
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
- padding: 5rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .ad-panel {
|
|
|
- padding: 15rpx 60rpx;
|
|
|
}
|
|
|
|
|
|
- .ad-img {
|
|
|
- width: 100%;
|
|
|
- height: 135rpx;
|
|
|
+ .noLogin{
|
|
|
+ font-size : 28rpx;
|
|
|
+ text-align : center;
|
|
|
+ padding: 30rpx;
|
|
|
+ > div{
|
|
|
+ padding : 10rpx 0;
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ width : 40%;
|
|
|
+ padding : 15rpx;
|
|
|
+ border: 1px solid #eee;
|
|
|
+ border-radius : 6rpx;
|
|
|
+ display : inline-block;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|