szdot
754963fe17
【原 因】：主页点击 ”商品购买按钮“ 跳转页面时候跳转到 指定的'shop'标签的导航的高度位置 【过 程】： 【影 响】： # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
162 lines
4.3 KiB
Vue
162 lines
4.3 KiB
Vue
<template>
|
||
<view class="vh100 flex column">
|
||
<!-- banner -->
|
||
<u-swiper :list="bannerList" keyName="url" :autoplay="true" height="616rpx"></u-swiper>
|
||
<!-- 登录框 -->
|
||
<view class="flex rad32 boxshadow loginBox mac">
|
||
<view class="m-l-24 w-80rpx h-80rpx">
|
||
<u-avatar size="80rpx" :src="avatarSrc"></u-avatar>
|
||
</view>
|
||
<view class="flex1 m-l-24 flex mac h100">
|
||
<!-- 已登录：只显示手机号 -->
|
||
<view v-if="userInfo.tel" class="fb fz32">{{ userInfo.tel }}</view>
|
||
<!-- 未登录：显示“请登录”并跳转 -->
|
||
<navigator v-else open-type="redirect" url="/pages/main/login">
|
||
<view class="fb fz32">请登录</view>
|
||
</navigator>
|
||
<u-icon name="arrow-right"></u-icon>
|
||
</view>
|
||
<navigator url="/pages/order/index">
|
||
<view class="flex column mc mac m-r-24 w-80rpx h-80rpx">
|
||
<u-icon size="48rpx" name="order"></u-icon>
|
||
<view class="fz24">订单</view>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
<!-- 新订单 提示框 -->
|
||
<!-- 新订单提示框 -->
|
||
<!-- <view v-for="(item, index) in orderList" :key="index">
|
||
订单：{{ item.order_sn }}
|
||
<text>状态：{{ item.shipment_status }}</text>
|
||
</view> -->
|
||
<!-- 主按钮 -->
|
||
<view class="flex mse" style="margin-top: 30rpx;">
|
||
<mainBut url="/pages/shop/list" bg="#D43030" imgSrc="/static/icons/ordernow.svg" butBt="开始点餐"
|
||
butSt="Order Now" />
|
||
<mainBut url="/pages/shop/list?tag=shop" bg="#FF8D1A" imgSrc="/static/icons/buggoods.svg" butBt="购买商品"
|
||
butSt="Buy Goods" />
|
||
<!-- <mainBut bg="#FFC300" imgSrc="/static/icons/franchise.svg" butBt="项目介绍" butSt="Introduction" /> -->
|
||
</view>
|
||
<!-- 站长推荐 -->
|
||
<view class="flex mc">
|
||
<view class="flex recommendBox column mc">
|
||
<!-- 站长推荐标题 -->
|
||
<view class="flex recommendTit column">
|
||
<view class="flex recommendTitBut rad16 column mac">
|
||
<view class="flex w80 mse">
|
||
<view class="recommendTitButTiao" v-for="i in 11" :key="i"></view>
|
||
</view>
|
||
<view class="flex mc mac h100">
|
||
<view class="fz32 fb" style="color: #fff">站长推荐</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex mse" style="height: 18rpx;width: 252rpx; ">
|
||
<view style="width:6rpx;background-color: #383838;" v-for="i in 2" :key="i"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 站长推荐内容 -->
|
||
<swiper class="recommendSwiper" circular autoplay interval="6000">
|
||
<swiper-item v-for="(item, index) in recommendList" :key="index">
|
||
<!-- <view class="recommendSwiper-item rad8 h100 boxshadow m-l-12 m-r-12" ></view> -->
|
||
<listItem :spu="item">
|
||
</listItem>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</view>
|
||
<!-- tabbar -->
|
||
<view>
|
||
<tabbar></tabbar>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
checkUserInfo
|
||
} from '@/utils/index.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
avatarSrc: "", //头像地址
|
||
}
|
||
},
|
||
computed: {
|
||
userInfo() {
|
||
return this.$store.state.userInfo
|
||
},
|
||
//订单列表 过滤出 已付款的状态订单
|
||
orderList() {
|
||
return this.$store.state.orderList.filter(item => item.main_status === '已付款')
|
||
},
|
||
//推荐的商品spu列表
|
||
recommendList() {
|
||
return this.$store.state.spuList.filter(item => item.recommend === '1')
|
||
},
|
||
//获取首页banner列表
|
||
bannerList() {
|
||
return this.$store.state.bannerList
|
||
.filter(item => item.type === 'index')
|
||
.map(item => ({
|
||
url: item.photo
|
||
}))
|
||
}
|
||
},
|
||
watch: {},
|
||
created() {
|
||
//检查token 没有则进行无感登录
|
||
this.checkUserInfo()
|
||
// 当页面显示时，设置tabber的激活项
|
||
this.$store.commit('setTabbarCurrent', 0)
|
||
},
|
||
methods: {
|
||
// 检查用户信息
|
||
checkUserInfo,
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.loginBox {
|
||
width: 702rpx;
|
||
height: 128rpx;
|
||
background-color: #faf7f3;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
top: 494rpx;
|
||
}
|
||
|
||
.recommendBox {
|
||
width: 702rpx;
|
||
margin-top: 48rpx;
|
||
}
|
||
|
||
.recommendTit {
|
||
height: 90rpx;
|
||
}
|
||
|
||
.recommendTitBut {
|
||
width: 252rpx;
|
||
height: 72rpx;
|
||
background-color: $uni-color-error;
|
||
}
|
||
|
||
.recommendTitButTiao {
|
||
width: 8rpx;
|
||
height: 4rpx;
|
||
background-color: $uni-text-color-inverse;
|
||
}
|
||
|
||
.recommendSwiper {
|
||
width: 702rpx;
|
||
height: 224rpx;
|
||
}
|
||
|
||
.recommendSwiper-item {
|
||
background-color: $uni-bg-color;
|
||
width: 680rpx;
|
||
height: 184rpx;
|
||
}
|
||
</style> |