xlcs/atguigu-tuan/pages/index/index.vue

488 lines
16 KiB
Vue
Raw Normal View History

2023-09-22 15:41:37 +08:00
<template>
<view v-if="token" class="gg">
<!-- 利用background-image设置导航的线形渐变色彩 -->
<u-navbar :background="{ 'background-image': 'linear-gradient(to right, rgb(255,180,61), rgb(255, 101, 0))' }" :border-bottom="false"
:is-back="false">
<view class="gg-map-slot-wrap u-font-xs u-m-l-20 u-p-l-10 u-p-r-10 u-p-t-5 u-p-b-5" @click="pickUpLocation">
<u-icon name="map" size="24"></u-icon>
<text class="u-p-l-10 u-p-r-10">{{
leaderAddressVo.takeName ? leaderAddressVo.takeName : '请设置提货点'
}}
</text>
<u-icon name="arrow-right" size="20"></u-icon>
</view>
</u-navbar>
<!-- 主内容区域-Begin -->
<view class="gg-content">
<!-- 头部区域 -->
<view class="gg-header u-p-l-20 u-p-r-20">
<!--
头部滚动提示搜索区
1.搜索图标
2.滚动提示条
3.搜索按钮自定义样式
-->
<view class="gg-notice-search-bar">
<u-icon class="gg-notice-search-bar-left-icon" name="search"></u-icon>
<u-notice-bar
:border-radius="30"
:is-circular="false"
:list="list"
:more-icon="false"
:volume-icon="false"
class="gg-notice-search-bar-u-notice-bar"
mode="vertical"
type="none"
></u-notice-bar>
<u-button :custom-style="ggNoticeSearchBarRightBtnCustomStyle" class="u-m-r-20" shape="square" size="mini"
type="error">搜索
</u-button>
</view>
<!-- 新人专享低价好物sv滚动区 -->
<view class="gg-new-vip u-p-20 u-m-t-20">
<view class="u-font-lg u-content-color">新人专享低价好物</view>
<scroll-view class="gg-new-vip-sv" enable-flex scroll-x>
<view class="u-flex u-m-t-10">
<view v-for="(item, index) in newPersonSkuInfoList" :key="item.id" class="gg-new-vip-sv-item u-p-r-20"
@click="gotoProductItem(item.id)">
<ListImgItem
:showBottom="item.skuType === 0 && item.isNewPerson === 1"
:showLeft="item.skuType === 1"
:showRight="false"
:src="item.imgUrl"
height="200rpx"
width="200rpx"
></ListImgItem>
<text class="u-type-error"> {{ item.price }}</text>
<AddToCart :shopDetail="item" :skuId="item.id"></AddToCart>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 头部区域底部左右圆角区 -->
<view class="gg-header-bottom"></view>
<!-- 硅谷优选规则 -->
<view class="u-flex u-row-between u-p-20 u-m-20 gg-border" @click="showRulePopup = true">
<u-image height="30rpx" src="/static/logo.png" width="30rpx"></u-image>
<view>平台资质法律条款规则及投诉入口</view>
</view>
<!-- 商品分类 -->
<view class="u-m-20 u-p-20 gg-border">
<scroll-view enable-flex scroll-x @scroll="scrollMove">
<view class="u-flex u-p-r-20 u-p-t-20">
<!-- 循环滚动内容 -->
<view v-for="item in categoryList" :key="item.id" class="u-p-l-20 u-p-r-20">
<u-image :src="item.imgUrl" border-radius="30rpx" height="100rpx" width="100rpx"></u-image>
<text class="u-font-xs">{{ item.name }}</text>
</view>
</view>
</scroll-view>
<view class="gg-category">
<u-line-progress :percent="categorySVPercent" :show-percent="false" class="gg-category-progress"
height="5"></u-line-progress>
</view>
</view>
<!-- 限时秒杀 -->
<block v-if="seckillSkuVoList.length > 0">
<!-- 秒杀 -->
<view class="u-m-l-20 u-m-r-20 u-flex">
<view class="u-flex u-flex-1">
<view class="u-font-lg u-type-error">
秒杀抢购
<text class="u-font-sm">{{ seckillTime.name }} {{ seckillTime.startTime }}-{{
seckillTime.endTime
}}
</text>
</view>
</view>
<u-button :plain="true" size="mini" @click="gotoSeckill">查看全部 ></u-button>
</view>
<view class="u-m-20 u-p-20 gg-border">
<scroll-view enable-flex scroll-x>
<view class="u-flex u-p-r-20 u-p-t-20">
<!-- 循环滚动内容 -->
<view v-for="item in seckillSkuVoList" :key="item.skuId" class="u-p-l-20 u-p-r-20 u-text-center"
@click="gotoProductItem(item.skuId)">
<text class="u-font-sm u-m-b-5">{{ item.timeName }}</text>
<u-image :src="item.imgUrl" border-radius="30rpx" height="200rpx" width="200rpx"></u-image>
<text class="u-font-sm u-m-t-5">{{ item.skuName }}</text>
<AddToCart :shopDetail="item" :skuId="item.skuId"></AddToCart>
</view>
</view>
</scroll-view>
</view>
</block>
<!-- 如何购买商品 -->
<view class="u-p-20 u-m-20 gg-border u-font-xs">
<view class="u-m-b-20">如何在[硅谷优选]购买商品</view>
<view class="u-flex">
<view class="gg-number u-m-r-10">1</view>
挑商品
<u-icon name="arrow-right-double u-m-l-10 u-tips-color"></u-icon>
<u-icon class="u-content-color" name="arrow-right-double"></u-icon>
<view class="gg-number gg-number-gray u-m-r-10 u-m-l-10">2</view>
选提货点
<u-icon name="arrow-right-double u-m-l-10 u-tips-color"></u-icon>
<u-icon class="u-content-color" name="arrow-right-double"></u-icon>
<view class="gg-number gg-number-gray u-m-r-10 u-m-l-10">3</view>
次日16点提货点取货
</view>
</view>
<!-- 热销好货 -->
<view class="u-font-xl u-type-error u-m-20">热销好货</view>
<view v-for="(item, index) in hotSkuList" :key="item.id" class="u-p-20 u-m-20 gg-border"
@click="gotoProductItem(item.id)">
<view class="u-m-b-10 u-m-l-20 u-m-r-20 u-flex gg-product-item">
<ListImgItem
:showBottom="item.skuType === 0 && item.isNewPerson === 1"
:showLeft="item.skuType === 1"
:showRight="false"
:src="item.imgUrl"
height="250rpx"
width="250rpx"
></ListImgItem>
<view class="gg-product-item-msg u-border-bottom u-p-b-20 u-m-l-20">
<view class="gg-product-item-msg-title">
<view class="u-font-lg">{{ item.title }}</view>
<view class="u-type-info u-font-sm">已售{{ item.sale }}/剩余{{ item.stock }}</view>
<block v-if="item.ruleList">
<view v-for="(rule, ruleIndex) in item.ruleList" :key="ruleIndex" class="u-font-xs u-type-error-dark">
{{ rule }}
</view>
</block>
</view>
<view class="u-flex u-row-between">
<view class="u-type-error gg-product-item-msg-price">
<text></text>
<text class="gg-product-item-msg-price-value">{{ item.price }}</text>
</view>
<AddToCart :shopDetail="item"></AddToCart>
</view>
</view>
</view>
</view>
<u-gap height="20"></u-gap>
</view>
<!-- 主内容区域-End -->
<!-- 平台资质法律条款规则及投诉入口弹出框 -->
<u-popup v-model="showRulePopup" :closeable="true" border-radius="20" mode="bottom">
<view class="u-p-t-20 u-p-b-20">
<view class="u-m-20">
<view class="u-font-xl u-m-b-10">
<u-icon class="u-m-r-10" color="#dd6161" name="checkmark-circle" size="28"></u-icon>
品质保障
</view>
<view class="u-light-color u-font-xs">
全场商品均经过品质检验若收货时发现商品有变质腐烂损坏等情况可申请退款
</view>
</view>
<view class="u-m-20">
<view class="u-font-xl u-m-b-10">
<u-icon class="u-m-r-10" color="#dd6161" name="kefu-ermai" size="28"></u-icon>
极速退款
</view>
<view class="u-light-color u-font-xs">根据平台的规则在一定条件下可享受极速退款到账服务</view>
</view>
<view class="u-m-20">
<view class="u-font-xl u-m-b-10">
<u-icon class="u-m-r-10" color="#dd6161" name="bag" size="28"></u-icon>
次日自提
</view>
<view class="u-light-color u-font-xs">每日23点前下单次日16点可到下单门店自提</view>
</view>
<view class="u-m-20">
<view class="u-font-xl u-m-b-10">
<u-icon class="u-m-r-10" color="#dd6161" name="integral" size="28"></u-icon>
资质规则
</view>
<view class="u-light-color u-font-xs">平台资质法律条款规则及投诉入口点击查看详情</view>
</view>
</view>
</u-popup>
</view>
<view v-else class="emptyPage">
<u-empty mode="page"></u-empty>
</view>
</template>
<script>
import {mapState, mapGetters, mapActions} from 'vuex';
let watchTimes = 0;
export default {
data() {
return {
list: ['寒雨连江夜入吴', '平明送客楚山孤', '洛阳亲友如相问', '一片冰心在玉壶'],
// 滚动提示搜索区右侧按钮自定义样式
ggNoticeSearchBarRightBtnCustomStyle: {
borderRadius: '30rpx'
},
showRulePopup: false,
windowWidth: 0, // 设备宽度
categorySVPercent: 0, // 精选进度百分比
token: null
};
},
onLoad() {
uni.getSystemInfo({
success: res => {
this.windowWidth = res.windowWidth;
}
});
},
computed: {
...mapState('indexModule', ['home']),
...mapGetters('indexModule', ['categoryList', 'hotSkuList', 'newPersonSkuInfoList', 'seckillTime', 'seckillSkuVoList', 'leaderAddressVo'])
},
methods: {
...mapActions('indexModule', ['getHomeIndexAction']),
scrollMove(e) {
// 计算优选滚动的进度百分比
let scrollLeft = e.detail.scrollLeft;
let scrollWidth = e.detail.scrollWidth - this.windowWidth;
let percent = parseInt((scrollLeft / scrollWidth) * 100);
// 利用防抖进行性能的优化
this.$u.debounce(() => {
this.categorySVPercent = percent;
}, 100);
},
// 跳转至设置提货点
pickUpLocation() {
this.$u.route('/pagesLocation/myPickUpLocation/myPickUpLocation');
},
// 跳转至商品详情页
gotoProductItem(skuId) {
this.$u.route('/pages/homeItem/homeItem', {skuId});
},
// 跳转至秒杀页
gotoSeckill() {
this.$u.route('/pagesSeckill/seckill/seckill');
}
},
watch: {
/* ------------------------------------------------------------
watch监控第一部分函数式监控
1.只能监控单层数据不能立即监控只有数据变化的时候才可以
2.深度监控无法实现
3.函数不可以使用箭头函数否则this对象无法找到
------------------------------------------------------------ */
// leaderAddressVo: function() {
// console.log('normal watch', this.leaderAddressVo);
// }
/* ------------------------------------------------------------
watch监控第二部分对象式监控
1.immediate立即监控的触发次数无论如何先会触发一次监控数据变化
2.深度监控的作用直接监控对象属性值的变化
3.监控次数的判断
1)因为立即监控所以页面初始会触发一次
2)可以设置全局变量进行判断条件依据
3)利用监控次数确认路由的跳转
------------------------------------------------------------ */
// 'leaderAddressVo.userId': {
// handler(newVal) {
// watchTimes++;
// if (watchTimes > 1) {
// watchTimes = 0;
// if (!newVal) {
// console.log('immediate deep watch');
// }
// }
// },
// immediate: true,
// deep: true
// }
/* ------------------------------------------------------------
watch监控第三部分对象式监控
1.immediate的去除
2.等mounted请求结束数据设置完毕以后再进行数据变化的监控
3.不需要进行监控次数的判断
------------------------------------------------------------ */
'leaderAddressVo.userId': {
handler(newVal) {
if (!newVal) {
uni.redirectTo({
url: '/pagesLocation/myPickUpLocation/myPickUpLocation'
});
}
},
deep: true
}
},
onShow() {
/*
onShow比mounted先执行
mounted中有获取数据的异步请求本身是异步还需要再进行数据设置获取
onShow已经执行完毕是否能确认leaderAddressVo对象的内容变化不能
是否能在onShow中利用leaderAddressVo进行条件判断不能
*/
console.log('leaderAddressVo:', this.leaderAddressVo);
},
async mounted() {
console.log('mounted');
const token = await uni.getStorageSync('token');
if (this.$u.test.isEmpty(token)) {
uni.reLaunch({
url: '/pages/login/login'
});
return;
}
this.token = token;
await this.getHomeIndexAction();
}
};
</script>
<style lang="scss" scoped>
/*
gg为硅谷guigu前缀利用scss中&-的方式实现层级样式的拼接
*/
.gg {
/* navbar 导航中进行地图位置的获取设置 */
&-map-slot-wrap {
display: flex;
align-items: center;
background-color: rgba(240, 240, 240, 0.35);
color: #fff;
border-radius: 100rpx;
}
/* 内容区域 */
&-content {
background-color: $u-bg-color;
}
/*
notice-bar头部滚动信息搜索区域
利用background-image的linear-gradient保持与导航一致的线形渐变色彩
*/
&-header {
background-image: linear-gradient(to right, rgb(255, 180, 61), rgb(255, 101, 0));
height: 500rpx;
}
/* 滚动信息搜索框 */
&-notice-search-bar {
display: flex;
align-items: center;
background-color: white;
border-radius: 30rpx;
/* 滚动信息搜索框左侧图标 */
&-left-icon {
position: relative;
left: 20rpx;
color: $u-light-color;
}
/* 滚动信息搜索框中的字体设置 */
&-u-notice-bar {
flex: 1;
/* 深层穿透修改子组件字体颜色样式 */
::v-deep .u-news-item {
color: $u-light-color !important;
}
}
}
/* 头部区域底部左右圆角区域 */
&-header-bottom {
background-image: linear-gradient(to right, rgb(255, 180, 61), rgb(255, 101, 0));
height: 25rpx;
border-bottom-left-radius: 25rpx;
border-bottom-right-radius: 25rpx;
}
/* 新人专享 */
&-new-vip {
background-color: white;
border-radius: 20rpx;
&-sv {
height: 320rpx;
&-item {
display: flex;
flex-direction: column;
}
}
}
/* 硅谷优选规则 */
&-border {
border-radius: 20rpx;
border-bottom: 1rpx solid #f5f5f5;
box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1); /*下边阴影 */
}
/* 商品分类 */
&-category {
display: flex;
justify-content: center;
align-items: center;
height: 5rpx;
&-progress {
width: 10vw;
}
}
/* 如何购买商品 */
&-number {
border-radius: 50%;
background-color: $u-type-warning;
width: 30rpx;
height: 30rpx;
text-align: center;
font-size: 20rpx;
color: white;
&-gray {
background-color: gray;
}
}
/* 热销好货 */
&-product-item {
height: 250rpx;
&-msg {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
&-price {
&-value {
font-size: 50rpx;
}
}
}
}
}
.emptyPage {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>