|
|
@@ -0,0 +1,435 @@
|
|
|
+<template>
|
|
|
+ <view class="container clearfix tui-skeleton">
|
|
|
+ <!-- 骨架 -->
|
|
|
+ <tui-skeleton v-if="skeletonShow" :isLoading="true" loadingType="2"></tui-skeleton>
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <view class="container-section clearfix">
|
|
|
+ <!-- 商品列表区域 -->
|
|
|
+ <view class="product-list" v-for="(pro,index) in productList" :key="index" @click.stop="Details(pro)">
|
|
|
+ <view class="product-list-image">
|
|
|
+ <image class="product-image" :src="pro.mainImage" mode=""></image>
|
|
|
+ <!-- 推荐 -->
|
|
|
+ <image class="product-icon" :src="StaticUrl+'recommend.png'" mode="" v-if="pro.recommend === '1'"></image>
|
|
|
+ </view>
|
|
|
+ <view class="product-list-msg">
|
|
|
+ <view class="product-msg-name">{{ pro.name }}</view>
|
|
|
+ <view class="product-list-tag " v-if="pro.activeStatus == 1">
|
|
|
+ <text class="tag tag-02">活动价</text>
|
|
|
+ </view>
|
|
|
+ <view class="product-list-pri">
|
|
|
+ <view class="price">￥{{ pro.price | PriceFormat}}</view>
|
|
|
+ <view class="carts" @click.stop="handAddCarts(pro)">
|
|
|
+ <view class="carts-add">
|
|
|
+ <text class="iconfont icon-gouwuche"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <tui-loadmore :index="2" v-if="hasNextPage"></tui-loadmore>
|
|
|
+ <tui-nomore text="没有更多了" v-else></tui-nomore>
|
|
|
+ <!-- 侧边 -->
|
|
|
+ <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tuiSkeleton from "@/components/tui-skeleton/tui-skeleton"
|
|
|
+ import tuiLoadmore from '@/components/tui-loadmore/tui-loadmore.vue';
|
|
|
+ import tuiNomore from '@/components/tui-nomore/tui-nomore.vue';
|
|
|
+ import authorize from '@/common/config/authorize.js'
|
|
|
+ import btSearch from '@/components/uni-search/bt-search.vue'
|
|
|
+ import banner from '@/components/cm-module/homeIndex/banner.vue'
|
|
|
+ import { mapState,mapMutations} from 'vuex';
|
|
|
+ export default {
|
|
|
+ components:{
|
|
|
+ tuiSkeleton,
|
|
|
+ btSearch,
|
|
|
+ banner,
|
|
|
+ tuiLoadmore,
|
|
|
+ tuiNomore
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ StaticUrl:this.$Static,
|
|
|
+ title:'', // 页面标题
|
|
|
+ floorId:'', //楼层id
|
|
|
+ userId:0,
|
|
|
+ skeletonShow: true,
|
|
|
+ productList:[],//商品列表
|
|
|
+ pageNum:1,
|
|
|
+ pageSize:10,
|
|
|
+ hasNextPage:false,
|
|
|
+ isScrollTop:false,
|
|
|
+ isRequest:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ //处理金额
|
|
|
+ PriceFormat: function(text) {
|
|
|
+ return Number(text).toFixed(2)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(options) {
|
|
|
+ console.log(options);
|
|
|
+ this.floorId = options.floorId
|
|
|
+ this.userId = this.userInfo?.userId
|
|
|
+ this.fetchProductList()
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title:options.title
|
|
|
+ })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(['hasLogin','userInfo','identity','isActivity'])
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //初始化商品数据列表
|
|
|
+ fetchProductList(){
|
|
|
+ this.ProductService.QueryProductList(
|
|
|
+ {
|
|
|
+ pageNum:this.pageNum,
|
|
|
+ pageSize:this.pageSize,
|
|
|
+ floorId:this.floorId
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(response =>{
|
|
|
+ let data = response.data;
|
|
|
+ this.productList = data.list
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.title = data.title
|
|
|
+ // 获取购物车商品数量
|
|
|
+ // this.GetCartNumber();
|
|
|
+ this.skeletonShow = false
|
|
|
+ })
|
|
|
+ .catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //上滑加载更多
|
|
|
+ GetOnReachBottomProductList(){
|
|
|
+ this.pageNum+=1
|
|
|
+ this.ProductService.QueryProductList(
|
|
|
+ {
|
|
|
+ pageNum:this.pageNum,
|
|
|
+ pageSize:this.pageSize,
|
|
|
+ floorId:this.floorId
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(response =>{
|
|
|
+ let data = response.data;
|
|
|
+ this.hasNextPage = data.hasNextPage
|
|
|
+ this.productList = this.productList.concat(data.list)
|
|
|
+ })
|
|
|
+ .catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 商品详情
|
|
|
+ Details(pro){
|
|
|
+ this.$api.navigateTo(`/pages/goods/product?productId=${pro.productId}`)
|
|
|
+ },
|
|
|
+ // 添加到购物车
|
|
|
+ handAddCarts(pro){
|
|
|
+ if(!this.hasLogin){
|
|
|
+ this.$api.navigateTo(`/pages/login/login`)
|
|
|
+ }else{
|
|
|
+ this.ProductService.shoppingAddCart(
|
|
|
+ {
|
|
|
+ productId:pro.productId,
|
|
|
+ userId:this.userId,
|
|
|
+ productCount:1,
|
|
|
+ heUserId:0,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(response => {
|
|
|
+ this.$util.msg('加入购物车成功',1500,true,'success')
|
|
|
+ this.GetCartNumber()
|
|
|
+ })
|
|
|
+ .catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //查询购物车数量
|
|
|
+ GetCartNumber(){
|
|
|
+ this.ProductService.QueryShoppingQuantity(
|
|
|
+ {
|
|
|
+ userId:this.userId,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(response => {
|
|
|
+ this.$store.commit('updateAllNum',response.data)
|
|
|
+ })
|
|
|
+ .catch(error =>{
|
|
|
+ console.log('查询购物车数量错误信息',error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.GetCartNumber()
|
|
|
+ },
|
|
|
+ // 监听页面滚动事件
|
|
|
+ onPageScroll(e) {
|
|
|
+ if(e.scrollTop>400){
|
|
|
+ this.isScrollTop = true
|
|
|
+ }else{
|
|
|
+ this.isScrollTop = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {//下拉刷新
|
|
|
+ // this.getHomeInformation()
|
|
|
+ this.pageNum = 1
|
|
|
+ this.fetchProductList()
|
|
|
+ setTimeout(()=>{
|
|
|
+ uni.stopPullDownRefresh()
|
|
|
+ }, 2000)
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+ console.log('触底了..');
|
|
|
+ if(this.hasNextPage){
|
|
|
+ this.GetOnReachBottomProductList()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShareAppMessage(res){//分享转发
|
|
|
+ if (res.from === 'button') {
|
|
|
+ // 来自页面内转发按钮
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ title: '国内外知名美容院线护肤品线上商城~',
|
|
|
+ path: 'pages/tabBar/index/index',
|
|
|
+ imageUrl:'https://static.caimei365.com/app/mini-hehe/icon/icon-index-share.jpg'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ page{
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ }
|
|
|
+ .container{
|
|
|
+ width: 750rxp;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ .navbar-wrap {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ z-index: 100000;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image: linear-gradient(0deg, #f83c6c 0%, #fa55bf 100%);
|
|
|
+ background-size: cover;
|
|
|
+ border-bottom:none;
|
|
|
+ &.bgnone{
|
|
|
+ background: rgba(255,255,255,0);
|
|
|
+ }
|
|
|
+ &.bgclass{
|
|
|
+ background: #F94A9B;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .navbar-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ .navbar-text.center{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .navbar-text.left{
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 45px;
|
|
|
+ }
|
|
|
+ .navbar-icon {
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .navbar-icon .iconfont {
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+ font-size: 44rpx;
|
|
|
+ padding-right:40rpx;
|
|
|
+ margin-top: 1px;
|
|
|
+ }
|
|
|
+ .navbar-icon .icon-iconfonticonfontsousuo1 {
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .navbar-icon view {
|
|
|
+ height: 18px;
|
|
|
+ border-left: 0.5px solid rgba(0,0,0, 0.3);
|
|
|
+ margin-top: 6px;
|
|
|
+ }
|
|
|
+ .navbar-loading {
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .search-input{
|
|
|
+ width: 100%;
|
|
|
+ height: 110rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .gosearch-btn{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background: #F0F0F0;
|
|
|
+ margin: 0 auto;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ color: #8A8A8A;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 80rpx;
|
|
|
+ .search-icon{
|
|
|
+ width: 80rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ position:absolute ;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 70rpx;
|
|
|
+ .icon-iconfonticonfontsousuo1{
|
|
|
+ margin:0 6rpx;
|
|
|
+ font-size: $font-size-34;
|
|
|
+ color: #8A8A8A;
|
|
|
+ z-index: 10;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .search-text{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ line-height: 70rpx;
|
|
|
+ color: #8A8A8A;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container-section{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ background-color: #F7F7F7;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .product-list{
|
|
|
+ width: 339rpx;
|
|
|
+ height: 532rpx;
|
|
|
+ float: left;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ &:nth-child(2n){
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ .product-list-image{
|
|
|
+ width: 100%;
|
|
|
+ height: 339rpx;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .product-image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ border-radius: 16rpx 16rpx 0 0;
|
|
|
+ }
|
|
|
+ .product-icon{
|
|
|
+ width: 68rpx;
|
|
|
+ height: 55rpx;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 34rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-list-msg{
|
|
|
+ width: 100%;
|
|
|
+ height: 193rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16rpx 24rpx;
|
|
|
+ float: left;
|
|
|
+ position: relative;
|
|
|
+ .product-msg-name{
|
|
|
+ width: 100%;
|
|
|
+ height: 72rpx;
|
|
|
+ line-height: 35rpx;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ text-align: justify;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .product-list-tag{
|
|
|
+ position: relative;
|
|
|
+ z-index: 9;
|
|
|
+ width: 100%;
|
|
|
+ height: 30rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ float: left;
|
|
|
+ .tag{
|
|
|
+ display: inline-block;
|
|
|
+ height: 32rpx;
|
|
|
+ font-size: 22rpx;
|
|
|
+ line-height: 30rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #f83c6c;
|
|
|
+ float: left;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ &.tag-02{
|
|
|
+ width: 80rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ &.tag-01{
|
|
|
+ width: 56rpx;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #f83c6c;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .product-list-pri{
|
|
|
+ width: 100%;
|
|
|
+ height: 44rpx;
|
|
|
+ float: left;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 16rpx;
|
|
|
+ left: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ .price{
|
|
|
+ float: left;
|
|
|
+ font-size:$font-size-26;
|
|
|
+ color: #f83c6c;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 44rpx;
|
|
|
+ }
|
|
|
+ .carts{
|
|
|
+ float: right;
|
|
|
+ .carts-add{
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 44rpx;
|
|
|
+ background-color: #ff457b;
|
|
|
+ border-radius: 50%;
|
|
|
+ .iconfont{
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .clearfix::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+</style>
|
yuwenjun