Merge pull request 'spike time 8.8' (#135) from zhy into master
Reviewed-on: http://git.luyuan.tk/luyuan/deming/pulls/135
This commit is contained in:
		
						commit
						e5a322fd35
					
				@ -34,8 +34,9 @@ export default {
 | 
			
		||||
			this.$u.route({
 | 
			
		||||
				url: 'pageB/sdetails/index',
 | 
			
		||||
				params: {
 | 
			
		||||
					id: this.info.pintuan_id,
 | 
			
		||||
					type: 2,
 | 
			
		||||
					// id: this.info.pintuan_id,
 | 
			
		||||
					id: this.info.pintuan_goods_id,
 | 
			
		||||
					// type: 2,
 | 
			
		||||
				}
 | 
			
		||||
			})
 | 
			
		||||
		}
 | 
			
		||||
 | 
			
		||||
@ -1,9 +1,9 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<view class="special">
 | 
			
		||||
		<view v-if="type == 'spike'">
 | 
			
		||||
			<image :src="item.groupbuy_image1"></image>
 | 
			
		||||
			<image :src="item.groupbuy_image1" @click="spikeGoods"></image>
 | 
			
		||||
			<view class="right">
 | 
			
		||||
				<view class="name u-line-1">{{ item.goods_name }}</view>
 | 
			
		||||
				<view class="name u-line-1" @click="spikeGoods">{{ item.goods_name }}</view>
 | 
			
		||||
				<view class="price">
 | 
			
		||||
					<view class="groupbuy-price">{{ item.groupbuy_price }}</view>
 | 
			
		||||
					<view class="goods-price">{{ item.goods_price }}</view>
 | 
			
		||||
@ -15,9 +15,9 @@
 | 
			
		||||
			</view>
 | 
			
		||||
		</view>
 | 
			
		||||
		<view v-if="type == 'group'">
 | 
			
		||||
			<image :src="item.pintuan_image"></image>
 | 
			
		||||
			<image :src="item.pintuan_image" @click="toDetailsPage"></image>
 | 
			
		||||
			<view class="right">
 | 
			
		||||
				<view class="name u-line-1">{{ item.pintuan_goods_name }}</view>
 | 
			
		||||
				<view class="name u-line-1" @click="toDetailsPage">{{ item.pintuan_goods_name }}</view>
 | 
			
		||||
				<view class="price group">
 | 
			
		||||
					<view class="groupbuy-price">{{ item.pintuan_goods_price }}</view>
 | 
			
		||||
					<view class="btn" @click="toDetailsPage">立即拼团</view>
 | 
			
		||||
@ -85,7 +85,7 @@ export default {
 | 
			
		||||
			this.$u.route({
 | 
			
		||||
				url: 'pageB/sdetails/index',
 | 
			
		||||
				params: {
 | 
			
		||||
					id: this.item.goods_id,
 | 
			
		||||
					id: this.item.pintuan_goods_id,
 | 
			
		||||
					// type: 2,
 | 
			
		||||
				}
 | 
			
		||||
			})
 | 
			
		||||
 | 
			
		||||
@ -9,8 +9,8 @@
 | 
			
		||||
				</view>
 | 
			
		||||
				<view class="num">剩余数量{{ groupbuyInfo.inventory - groupbuyInfo.groupbuy_buy_quantity }}件</view>
 | 
			
		||||
			</view>
 | 
			
		||||
			<view class="right" v-if="!isSpike">
 | 
			
		||||
				<view class="title">秒杀倒计时</view>
 | 
			
		||||
			<view class="right" v-if="!isSrartSpike || !isEndSpike">
 | 
			
		||||
				<view class="title">{{ isSrartSpike ? '结束倒计时' : '秒杀倒计时' }}</view>
 | 
			
		||||
				<view class="time">{{ spikeTime }}</view>
 | 
			
		||||
			</view>
 | 
			
		||||
			<view class="right" v-else>
 | 
			
		||||
@ -171,10 +171,11 @@
 | 
			
		||||
					<text>客服</text>
 | 
			
		||||
				</view>
 | 
			
		||||
			</view>
 | 
			
		||||
			<view class="btn" v-if="groupbuyInfo.groupbuy_state == 20 && groupbuyInfo.inventory > groupbuyInfo.groupbuy_buy_quantity" @click="spikeGoods">立即秒杀</view>
 | 
			
		||||
			<view class="btn" :class="{'cannot': groupbuyInfo.groupbuy_state == 32 || groupbuyInfo.inventory == groupbuyInfo.groupbuy_buy_quantity}" v-else>
 | 
			
		||||
				{{ groupbuyInfo.groupbuy_state == 32 ? '时间已结束' : (groupbuyInfo.inventory > groupbuyInfo.groupbuy_buy_quantity ? '立即秒杀' : '已售空') }}
 | 
			
		||||
			</view>
 | 
			
		||||
			<!-- <view class="btn" v-if="isSrartSpike && !isEndSpike && groupbuyInfo.inventory > groupbuyInfo.groupbuy_buy_quantity" @click="spikeGoods">立即秒杀</view> -->
 | 
			
		||||
			<view class="btn cannot" v-if="!isSrartSpike">秒杀未开始</view>
 | 
			
		||||
			<view class="btn cannot" v-else-if="isEndSpike">时间已结束</view>
 | 
			
		||||
			<view class="btn cannot" v-else-if="groupbuyInfo.inventory == groupbuyInfo.groupbuy_buy_quantity">已售空</view>
 | 
			
		||||
			<view class="btn" v-else @click="spikeGoods">立即秒杀</view>
 | 
			
		||||
		</view>
 | 
			
		||||
        <!-- <tloos @buy="buy" @xuanze="xuanze" :id="id" :info="goodsInfo" :type="type"></tloos> -->
 | 
			
		||||
        <u-toast ref="uToast" />
 | 
			
		||||
@ -191,7 +192,7 @@ export default {
 | 
			
		||||
        return {
 | 
			
		||||
            list: [], // 轮播图列表
 | 
			
		||||
			goodsInfo: {}, // 商品信息
 | 
			
		||||
			storeInfo: {},
 | 
			
		||||
			storeInfo: {}, // 店铺信息
 | 
			
		||||
            glist: [], // 规格列表
 | 
			
		||||
			id: 0, // 商品id/秒杀id/拼团 id
 | 
			
		||||
			type: '', // 商品类型 商品详情 1普通 2拼团 3秒杀 4优惠券
 | 
			
		||||
@ -201,16 +202,17 @@ export default {
 | 
			
		||||
			showInvolvementUser: false, // 参团
 | 
			
		||||
			involvemenGroupInfo: [], // 参团的人
 | 
			
		||||
			groupbuyInfo: {}, // 秒杀详情
 | 
			
		||||
			spikeTime: '00:00:00',
 | 
			
		||||
			isSpike: false, // 是否超过秒杀时间
 | 
			
		||||
			spikeTime: '00:00:00', // 秒杀倒计时(距离开始/距离结束)
 | 
			
		||||
			isSrartSpike: false, // 是否开始秒杀
 | 
			
		||||
			isEndSpike: false, // 是否超过秒杀时间
 | 
			
		||||
			timer: '', // 秒杀时间定时器
 | 
			
		||||
			spec_id: '', // 规格 id, 下单用的
 | 
			
		||||
			evaluate: {}, // 评价内容
 | 
			
		||||
			showSpec: false, // 是否显示选择规格
 | 
			
		||||
			goodsNumber: 1,
 | 
			
		||||
			goodsNumber: 1, // 购买商品数量
 | 
			
		||||
			sel: "", // 拼接的规格
 | 
			
		||||
			quanxuan: false, // 规格是否选择
 | 
			
		||||
			debounce: true,
 | 
			
		||||
			debounce: true, // 防止多次提交订单
 | 
			
		||||
			storeid:0 //店铺id
 | 
			
		||||
        }
 | 
			
		||||
	},
 | 
			
		||||
@ -289,11 +291,26 @@ export default {
 | 
			
		||||
		spikeGoods() {
 | 
			
		||||
			this.settlementOrder()
 | 
			
		||||
		},
 | 
			
		||||
		setSpikeTime(time) {
 | 
			
		||||
			// const time = this.groupbuyInfo.groupbuy_endtime;
 | 
			
		||||
		setSpikeTime() {
 | 
			
		||||
			const startTime = this.groupbuyInfo.groupbuy_starttime;
 | 
			
		||||
			const endTime = this.groupbuyInfo.groupbuy_endtime;
 | 
			
		||||
			let time = startTime;
 | 
			
		||||
 | 
			
		||||
			this.timer = setInterval(() => {
 | 
			
		||||
				// 秒杀是否开始 秒杀开始后开始结束时间的倒计时
 | 
			
		||||
				if(startTime * 1000 - new Date().getTime() > 0) {
 | 
			
		||||
					this.isSrartSpike = false;
 | 
			
		||||
				} else {
 | 
			
		||||
					this.isSrartSpike = true;
 | 
			
		||||
					time = endTime;
 | 
			
		||||
				}
 | 
			
		||||
				
 | 
			
		||||
				// 秒杀是否结束
 | 
			
		||||
				if(endTime * 1000 - new Date().getTime() <= 0) {
 | 
			
		||||
					this.isEndSpike = true;
 | 
			
		||||
				}
 | 
			
		||||
 | 
			
		||||
				let spikeTime = time * 1000 - new Date().getTime();
 | 
			
		||||
				if(spikeTime <= 0) this.isSpike = true;
 | 
			
		||||
				// 计算天数
 | 
			
		||||
				const days = Math.floor(spikeTime/(24*3600*1000));
 | 
			
		||||
				//计算出小时数
 | 
			
		||||
@ -312,6 +329,10 @@ export default {
 | 
			
		||||
			}, 1000)
 | 
			
		||||
		},
 | 
			
		||||
		addCart() {
 | 
			
		||||
			if(!this.showSpec) {
 | 
			
		||||
				this.showSpec = true;
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			this.$u.api.addCart({
 | 
			
		||||
				goods_id: this.id,
 | 
			
		||||
				quantity: this.goodsNumber,
 | 
			
		||||
@ -393,12 +414,16 @@ export default {
 | 
			
		||||
					this.evaluate = res.data.goodsInfo.goods_evaluate_info;
 | 
			
		||||
					this.goodsInfo = res.data.goodsInfo.goods;
 | 
			
		||||
					this.setSwiperList(res.data.goodsInfo.goods_image);
 | 
			
		||||
					this.setSpikeTime(res.data.groupbuyInfo.groupbuy_starttime);
 | 
			
		||||
					this.setSpikeTime();
 | 
			
		||||
				}
 | 
			
		||||
			})
 | 
			
		||||
		},
 | 
			
		||||
		// 试穿
 | 
			
		||||
		tryDress() {
 | 
			
		||||
			if(!this.showSpec) {
 | 
			
		||||
				this.showSpec = true;
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			this.$u.route({
 | 
			
		||||
				url: '/pageB/triedDress/index',
 | 
			
		||||
				params: {
 | 
			
		||||
@ -413,6 +438,10 @@ export default {
 | 
			
		||||
		* @params {Number} ifcart 结算方式 1:购物车 0:直接结算(立即购买/拼团/秒杀)
 | 
			
		||||
		**/
 | 
			
		||||
		settlementOrder({type, num = this.goodsNumber, ifcart = 0} = {}) {
 | 
			
		||||
			if(!this.showSpec) {
 | 
			
		||||
				this.showSpec = true;
 | 
			
		||||
				return false;
 | 
			
		||||
			}
 | 
			
		||||
			if(!this.debounce) return;
 | 
			
		||||
			this.debounce = false;
 | 
			
		||||
			let params = {
 | 
			
		||||
@ -609,8 +638,8 @@ export default {
 | 
			
		||||
			}
 | 
			
		||||
			font-size: 26rpx;
 | 
			
		||||
			font-weight: 500;
 | 
			
		||||
			.title {
 | 
			
		||||
				margin-bottom: 18rpx;
 | 
			
		||||
			.time {
 | 
			
		||||
				margin-top: 18rpx;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
 | 
			
		||||
@ -1,193 +1,59 @@
 | 
			
		||||
<template>
 | 
			
		||||
    <view class="out">
 | 
			
		||||
        <u-tabs-swiper v-if="type == 'dianpu'" @change="tabsChange" :show-bar="false" :bold="false" :font-size="32"
 | 
			
		||||
            active-color="#FF780F" ref="uTabs" :list="list" :is-scroll="false" style="border-bottom: 1px solid #ececec;flex-shrink:0"
 | 
			
		||||
            height="88"></u-tabs-swiper>
 | 
			
		||||
        <swiper v-if="type == 'dianpu'" class="swiper" :current="swiperCurrent" @transition="transition"
 | 
			
		||||
            @animationfinish="animationfinish">
 | 
			
		||||
            <swiper-item>
 | 
			
		||||
                <scroll-view :scroll-y="true" style="height:100%">
 | 
			
		||||
                    <view style="padding-top:30rpx">
 | 
			
		||||
                        <shop></shop>
 | 
			
		||||
                    </view>
 | 
			
		||||
                </scroll-view>
 | 
			
		||||
            </swiper-item>
 | 
			
		||||
            <swiper-item>
 | 
			
		||||
                <scroll-view :scroll-y="true" style="height:100%">
 | 
			
		||||
                    <view class="list">
 | 
			
		||||
                        <!-- <darenItem style="margin-top:20rpx;margin-right:23rpx;box-shadow:0rpx 3rpx 7rpx 0rpx rgba(153, 153, 153, 0.35);" v-for="item in 50"></darenItem> -->
 | 
			
		||||
                    </view>
 | 
			
		||||
                </scroll-view>
 | 
			
		||||
            </swiper-item>
 | 
			
		||||
        </swiper>
 | 
			
		||||
        <view v-else style=" display: flex;flex-direction: column;height: calc(100vh - 88rpx);">
 | 
			
		||||
            <view class="select">
 | 
			
		||||
                <view @click="sx(0)" class="xz" data-type="xl">销量</view>
 | 
			
		||||
                <view class="xz" @click="sx(1)">
 | 
			
		||||
                    <text>价格</text>
 | 
			
		||||
                    <view class="jiage">
 | 
			
		||||
                        <view class="top topxz"></view>
 | 
			
		||||
                        <view class="bottom bottomxz"></view>
 | 
			
		||||
                    </view>
 | 
			
		||||
                </view>
 | 
			
		||||
                <view data-type="hp" @click="sx(2)">好评</view>
 | 
			
		||||
            </view>
 | 
			
		||||
            <view class="swiper" :current="swiperCurrent" @change="huadong">
 | 
			
		||||
                <scroll-view :scroll-y="true" style="height:100%">
 | 
			
		||||
                    <view style="padding-top:30rpx">
 | 
			
		||||
                        <shop v-for="(i,j) in shoplist" :key="j" :name="i.goods_name" :id="i.goods_id" :commonid="i.goods_commonid"
 | 
			
		||||
                            :image="i.goods_image"></shop>
 | 
			
		||||
                    </view>
 | 
			
		||||
                </scroll-view>
 | 
			
		||||
            </view>
 | 
			
		||||
        </view>
 | 
			
		||||
       <u-tabs :list="list" :current="current" @change="tabsChange" active-color="#FF780F" :show-bar="false" height="88" font-size="32" inactive-color="#333333"></u-tabs>
 | 
			
		||||
       <swiper :current="swiperCurrent" @animationfinish="animationfinish">
 | 
			
		||||
		    <!-- 店铺 -->
 | 
			
		||||
			<swiper-item class="swiper-item" v-for="(item, index) in dataList[current]" :key="index">
 | 
			
		||||
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
 | 
			
		||||
					<view class="store"></view>
 | 
			
		||||
				</scroll-view>
 | 
			
		||||
			</swiper-item>
 | 
			
		||||
			<!-- 达人 -->
 | 
			
		||||
			<swiper-item class="swiper-item" v-for="(item, index) in dataList[current]" :key="index">
 | 
			
		||||
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
 | 
			
		||||
					<view class="anchor"></view>
 | 
			
		||||
				</scroll-view>
 | 
			
		||||
			</swiper-item>
 | 
			
		||||
			<!-- 社区 -->
 | 
			
		||||
			<swiper-item class="swiper-item" v-for="(item, index) in dataList[current]" :key="index">
 | 
			
		||||
				<scroll-view scroll-y style="height: 800rpx;width: 100%;" @scrolltolower="onreachBottom">
 | 
			
		||||
					<view class="community"></view>
 | 
			
		||||
				</scroll-view>
 | 
			
		||||
			</swiper-item>
 | 
			
		||||
		</swiper>
 | 
			
		||||
    </view>
 | 
			
		||||
</template>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
    .out {
 | 
			
		||||
        display: flex;
 | 
			
		||||
        flex-direction: column;
 | 
			
		||||
        height: 100vh;
 | 
			
		||||
 | 
			
		||||
        .sosuo {
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            height: 88rpx;
 | 
			
		||||
            border-bottom: 1rpx solid #ececec;
 | 
			
		||||
            display: flex;
 | 
			
		||||
            align-items: center;
 | 
			
		||||
            padding: 0 30rpx;
 | 
			
		||||
            flex-shrink: 0;
 | 
			
		||||
 | 
			
		||||
            >image {
 | 
			
		||||
                width: 18rpx;
 | 
			
		||||
                height: 32rpx;
 | 
			
		||||
                margin-right: 24rpx;
 | 
			
		||||
                flex-shrink: 0;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            align-items: center;
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .swiper {
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            height: 100%;
 | 
			
		||||
 | 
			
		||||
            .list {
 | 
			
		||||
                display: flex;
 | 
			
		||||
                flex-wrap: wrap;
 | 
			
		||||
                width: 100%;
 | 
			
		||||
                padding-left: 30rpx;
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        .select {
 | 
			
		||||
            width: 100%;
 | 
			
		||||
            height: 89rpx;
 | 
			
		||||
            border-bottom: 1rpx solid #ececec;
 | 
			
		||||
            display: flex;
 | 
			
		||||
            align-items: center;
 | 
			
		||||
            padding: 0 40rpx;
 | 
			
		||||
            flex-shrink: 0;
 | 
			
		||||
            justify-content: space-between;
 | 
			
		||||
 | 
			
		||||
            >view {
 | 
			
		||||
                font-size: 32rpx;
 | 
			
		||||
                color: #333;
 | 
			
		||||
                display: flex;
 | 
			
		||||
                font-weight: 400;
 | 
			
		||||
 | 
			
		||||
                .jiage {
 | 
			
		||||
                    display: flex;
 | 
			
		||||
                    flex-direction: column;
 | 
			
		||||
 | 
			
		||||
                    .top {
 | 
			
		||||
                        width: 12rpx;
 | 
			
		||||
                        border-bottom: 12rpx solid #707070;
 | 
			
		||||
                        border-left: 11rpx solid #fff;
 | 
			
		||||
                        border-right: 11rpx solid #fff;
 | 
			
		||||
                        margin-bottom: 2rpx;
 | 
			
		||||
                    }
 | 
			
		||||
 | 
			
		||||
                    .bottom {
 | 
			
		||||
                        width: 12rpx;
 | 
			
		||||
                        border-top: 12rpx solid #707070;
 | 
			
		||||
                        border-left: 11rpx solid #fff;
 | 
			
		||||
                        border-right: 11rpx solid #fff;
 | 
			
		||||
                    }
 | 
			
		||||
 | 
			
		||||
                    .topxz {
 | 
			
		||||
                        border-bottom: 12rpx solid #FF780F;
 | 
			
		||||
                    }
 | 
			
		||||
 | 
			
		||||
                    .bottomxz {
 | 
			
		||||
                        border-top: 12rpx solid #FF780F;
 | 
			
		||||
                    }
 | 
			
		||||
                }
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
            .xz {
 | 
			
		||||
                color: #FF780F;
 | 
			
		||||
            }
 | 
			
		||||
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
</style>
 | 
			
		||||
<script>
 | 
			
		||||
    import shop from "../components/search/shop"
 | 
			
		||||
    import darenItem from "@/components/index/daren-item/index"
 | 
			
		||||
    export default {
 | 
			
		||||
        name: "out",
 | 
			
		||||
        components: {
 | 
			
		||||
            shop,
 | 
			
		||||
            darenItem
 | 
			
		||||
        },
 | 
			
		||||
        data() {
 | 
			
		||||
            return {
 | 
			
		||||
                list: [{
 | 
			
		||||
                    name: "店铺"
 | 
			
		||||
                }, {
 | 
			
		||||
                    name: "达人"
 | 
			
		||||
                }],
 | 
			
		||||
                current: 0,
 | 
			
		||||
                swiperCurrent: 0,
 | 
			
		||||
                keyword: "",
 | 
			
		||||
                type: "",
 | 
			
		||||
                shoplist: []
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        onLoad(o) {
 | 
			
		||||
            this.type = o.type
 | 
			
		||||
            this.keyword = o.value
 | 
			
		||||
            this.search()
 | 
			
		||||
        },
 | 
			
		||||
        methods: {
 | 
			
		||||
            tabsChange(index) {
 | 
			
		||||
                this.swiperCurrent = index;
 | 
			
		||||
            },
 | 
			
		||||
            transition(e) {
 | 
			
		||||
                let dx = e.detail.dx;
 | 
			
		||||
                this.$refs.uTabs.setDx(dx);
 | 
			
		||||
            },
 | 
			
		||||
            animationfinish(e) {
 | 
			
		||||
                let current = e.detail.current;
 | 
			
		||||
                this.$refs.uTabs.setFinishCurrent(current);
 | 
			
		||||
                this.swiperCurrent = current;
 | 
			
		||||
                this.current = current;
 | 
			
		||||
            },
 | 
			
		||||
            sx(type) {
 | 
			
		||||
                console.log(type)
 | 
			
		||||
 | 
			
		||||
            },
 | 
			
		||||
            huadong(e) {
 | 
			
		||||
                console.log(e.detail.current)
 | 
			
		||||
            },
 | 
			
		||||
            search() {
 | 
			
		||||
                this.$u.api.ShopSearch({
 | 
			
		||||
                    keyword: this.keyword
 | 
			
		||||
                }).then((res) => {
 | 
			
		||||
                    this.shoplist = res.data.data
 | 
			
		||||
                })
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
    }
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			list: [{
 | 
			
		||||
				name: "店铺"
 | 
			
		||||
			}, {
 | 
			
		||||
				name: "达人"
 | 
			
		||||
			}, {
 | 
			
		||||
				name: "社区"
 | 
			
		||||
			}],
 | 
			
		||||
			current: 0,
 | 
			
		||||
			swiperCurrent: 0,
 | 
			
		||||
			dataList: [[1],[2],[3]],
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
	onLoad(option) {
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		tabsChange(index) {
 | 
			
		||||
			this.current = Number(index);
 | 
			
		||||
			this.swiperCurrent = this.current;
 | 
			
		||||
		},
 | 
			
		||||
		animationfinish(e) {
 | 
			
		||||
			const current = Number(e.detail.current);
 | 
			
		||||
			this.current = current;
 | 
			
		||||
			this.swiperCurrent = current;
 | 
			
		||||
		},
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</script>
 | 
			
		||||
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
</style>
 | 
			
		||||
							
								
								
									
										193
									
								
								pageB/search/searchGoods.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										193
									
								
								pageB/search/searchGoods.vue
									
									
									
									
									
										Normal file
									
								
							@ -0,0 +1,193 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<view class="classify-goods">
 | 
			
		||||
		<view class="tab-container">
 | 
			
		||||
			<view class="salenum" :class="{ 'current' : current == 0 }" @click="switchCurrent(0)">销量</view>
 | 
			
		||||
			<view class="price" :class="{ 'current' : current == 1 }" @click="switchCurrent(1)">
 | 
			
		||||
				<view class="text">价格</view>
 | 
			
		||||
				<view class="icon">
 | 
			
		||||
					<u-icon name="arrow-up-fill" :color="(current == 1 && priceOrderAsc) ? '#FF780F' : '#333333'" size="22"></u-icon>
 | 
			
		||||
					<u-icon name="arrow-down-fill" :color="(current == 1 && !priceOrderAsc) ? '#FF780F' : '#333333'" size="22"></u-icon>
 | 
			
		||||
				</view>
 | 
			
		||||
			</view>
 | 
			
		||||
			<view class="evaluation" :class="{ 'current' : current == 2 }" @click="switchCurrent(2)">好评</view>
 | 
			
		||||
		</view>
 | 
			
		||||
		<scroll-view scroll-y class="goods-container" :style="{ height: scrollHeight }" @scrolltolower="loadMore">
 | 
			
		||||
			<view v-for="goods in goodsList" :key="goods.goods_id" class="goods-item" @click="toDetailsPage(goods.goods_id)">
 | 
			
		||||
				<image :src="goods.goods_image"></image>
 | 
			
		||||
				<view class="right">
 | 
			
		||||
					<view class="name u-line-1">{{ goods.goods_name }}</view>
 | 
			
		||||
					<view class="briefing u-line-2">{{ goods.goods_advword }}</view>
 | 
			
		||||
				</view>
 | 
			
		||||
			</view>
 | 
			
		||||
			<u-loadmore :status="loadStatus" bgColor="#FFFFFF" margin-top="20" margin-bottom="20" v-if="goodsList.length >= pageSize"></u-loadmore>
 | 
			
		||||
			<u-empty mode="list" v-if="!goodsList.length"></u-empty>
 | 
			
		||||
		</scroll-view>
 | 
			
		||||
	</view>
 | 
			
		||||
</template>
 | 
			
		||||
<script>
 | 
			
		||||
export default {
 | 
			
		||||
	data() {
 | 
			
		||||
		return {
 | 
			
		||||
			pageSize: 12,
 | 
			
		||||
			cid: '',
 | 
			
		||||
			page: 1,
 | 
			
		||||
			current: 0,
 | 
			
		||||
			priceOrderAsc: true, // 是否升序
 | 
			
		||||
			goodsList: [],
 | 
			
		||||
			scrollHeight: '',
 | 
			
		||||
			loadStatus: 'loadmore',
 | 
			
		||||
			timer: true, // 防止上拉加载短时间内多次调用
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
	watch: {
 | 
			
		||||
		current(value) {
 | 
			
		||||
			this.page = 1;
 | 
			
		||||
			this.goodsListByClassId({ laod: 'reload' });
 | 
			
		||||
		},
 | 
			
		||||
		priceOrderAsc(value) {
 | 
			
		||||
			this.page = 1;
 | 
			
		||||
			this.goodsListByClassId({ laod: 'reload' });
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
	onLoad(option) {
 | 
			
		||||
		this.cid = option.cid;
 | 
			
		||||
		this.goodsListByClassId({ load: 'reload' });
 | 
			
		||||
		this.setViewHeight();
 | 
			
		||||
		this.setTitle(option.cname);
 | 
			
		||||
	},
 | 
			
		||||
	methods: {
 | 
			
		||||
		setOrderSort() {
 | 
			
		||||
			let sort = '';
 | 
			
		||||
			if(this.current == 0) {
 | 
			
		||||
				sort = 'goods_salenum';
 | 
			
		||||
			} else if (this.current == 1) {
 | 
			
		||||
				if(this.priceOrderAsc) sort = 'goods_price_asc';
 | 
			
		||||
				else sort = 'goods_price_desc';
 | 
			
		||||
			} else if (this.current == 2) {
 | 
			
		||||
				sort = 'evaluation_count';
 | 
			
		||||
			}
 | 
			
		||||
			return sort;
 | 
			
		||||
		},
 | 
			
		||||
		// 排序方式 goods_salenum:销量 evaluation_count:评价 goods_price_asc:价格从低到高 goods_price_desc:价格从高到低
 | 
			
		||||
		async goodsListByClassId({ load = 'reload' } = {}) {
 | 
			
		||||
			const sort = this.setOrderSort();
 | 
			
		||||
			const res = await this.$u.api.goodsListByClassId({ 
 | 
			
		||||
				gc_id: this.cid, 
 | 
			
		||||
				page: this.page,
 | 
			
		||||
				order: sort,
 | 
			
		||||
			})
 | 
			
		||||
			this.timer = true;
 | 
			
		||||
			if(res.errCode == 0) {
 | 
			
		||||
				if(load == 'reload') this.goodsList = res.data.data;
 | 
			
		||||
				else if(load == 'loadmore') this.goodsList.push(...res.data.data);
 | 
			
		||||
			}
 | 
			
		||||
			return res.data.data.length;
 | 
			
		||||
		},
 | 
			
		||||
		loadMore() {
 | 
			
		||||
			if(this.goodsList.length < this.pageSize) return false;
 | 
			
		||||
			if(!this.timer) return false;
 | 
			
		||||
			this.loadStatus = "loading";
 | 
			
		||||
			this.page++;
 | 
			
		||||
			this.goodsListByClassId({  load: 'loadmore' }).then(length => {
 | 
			
		||||
				if(length == 0) {
 | 
			
		||||
					this.page--;
 | 
			
		||||
					this.loadStatus = 'nomore';
 | 
			
		||||
				} else {
 | 
			
		||||
					this.loadStatus = 'loading';
 | 
			
		||||
				}
 | 
			
		||||
			}).catch(() => {
 | 
			
		||||
				this.loadStatus = "nomore";
 | 
			
		||||
				this.page--;
 | 
			
		||||
			})
 | 
			
		||||
		},
 | 
			
		||||
		switchCurrent(current) {
 | 
			
		||||
			if(current == 1 && this.current == 1) this.priceOrderAsc = !this.priceOrderAsc;
 | 
			
		||||
			this.current = current;
 | 
			
		||||
		},
 | 
			
		||||
		setViewHeight() {
 | 
			
		||||
			const res = uni.getSystemInfoSync();
 | 
			
		||||
			this.scrollHeight = res.windowHeight - (90 / 2) + 'px';
 | 
			
		||||
		},
 | 
			
		||||
		setTitle(title) {
 | 
			
		||||
			uni.setNavigationBarTitle({
 | 
			
		||||
				title: title
 | 
			
		||||
			});
 | 
			
		||||
		},
 | 
			
		||||
		toDetailsPage(id) {
 | 
			
		||||
			this.$u.route('/pageB/sdetails/index', {
 | 
			
		||||
				id: id,
 | 
			
		||||
				type: 1 // 商品详情 商品类型 1普通 2拼团 3秒杀 4优惠券
 | 
			
		||||
			});
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
<style lang="scss" scoped>
 | 
			
		||||
.classify-goods {
 | 
			
		||||
	.tab-container {
 | 
			
		||||
		box-sizing: border-box;
 | 
			
		||||
		padding: 30rpx 40rpx;
 | 
			
		||||
		display: flex;
 | 
			
		||||
		margin-bottom: 30rpx;
 | 
			
		||||
		> view {
 | 
			
		||||
			height: 30rpx;
 | 
			
		||||
			line-height: 30rpx;
 | 
			
		||||
			flex: 1;
 | 
			
		||||
			font-size: 32rpx;
 | 
			
		||||
			color: rgba(51,51,51,1);
 | 
			
		||||
		}
 | 
			
		||||
		.salenum {
 | 
			
		||||
			text-align: left;
 | 
			
		||||
		}
 | 
			
		||||
		.price {
 | 
			
		||||
			display: flex;
 | 
			
		||||
			align-items: center;
 | 
			
		||||
			justify-content: center;
 | 
			
		||||
			.text {
 | 
			
		||||
				margin-right: 5rpx;
 | 
			
		||||
			}
 | 
			
		||||
			.icon {
 | 
			
		||||
				display: flex;
 | 
			
		||||
				flex-direction: column;
 | 
			
		||||
				align-items: center;
 | 
			
		||||
				justify-content: center;
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
		.evaluation {
 | 
			
		||||
			text-align: right;
 | 
			
		||||
		}
 | 
			
		||||
		.current {
 | 
			
		||||
			color: rgba(255,120,15,1);
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
	.goods-container {
 | 
			
		||||
		.goods-item {
 | 
			
		||||
			margin: 0 auto;
 | 
			
		||||
			width: 690rpx;
 | 
			
		||||
			display: flex;
 | 
			
		||||
			background-color: #F5F5F5;
 | 
			
		||||
			margin-bottom: 30rpx;
 | 
			
		||||
			align-items: center;
 | 
			
		||||
			> image {
 | 
			
		||||
				width: 220rpx;
 | 
			
		||||
				height: 200rpx;
 | 
			
		||||
				flex-shrink: 0;
 | 
			
		||||
				margin-right: 30rpx;
 | 
			
		||||
			}
 | 
			
		||||
			.right {
 | 
			
		||||
				width: 418rpx;
 | 
			
		||||
				.name {
 | 
			
		||||
					font-size: 30rpx;
 | 
			
		||||
					color: rgba(51,51,51,1);
 | 
			
		||||
					margin-bottom: 20rpx;
 | 
			
		||||
				}
 | 
			
		||||
				.briefing {
 | 
			
		||||
					font-size: 28rpx;
 | 
			
		||||
					color: rgba(102,102,102,1);
 | 
			
		||||
					line-height: 42rpx;
 | 
			
		||||
				}
 | 
			
		||||
			}
 | 
			
		||||
		}
 | 
			
		||||
	}
 | 
			
		||||
}
 | 
			
		||||
</style>
 | 
			
		||||
@ -1,14 +1,17 @@
 | 
			
		||||
<template>
 | 
			
		||||
	<view class="group">
 | 
			
		||||
		<view>
 | 
			
		||||
			<u-tabs-swiper ref="uTabs" :list="tabList" name="gc_name" :current="current" @change="tabsChange" :is-scroll="true" active-color="#FF780F" swiperWidth="750" height="88" :show-bar="false"></u-tabs-swiper>
 | 
			
		||||
			<!-- <u-tabs-swiper ref="uTabs" :list="tabList" name="gc_name" :current="current" @change="tabsChange" :is-scroll="true" active-color="#FF780F" swiperWidth="750" height="88" :show-bar="false"></u-tabs-swiper> -->
 | 
			
		||||
			<u-tabs :list="tabList" name="gc_name" :is-scroll="true" :current="current" @change="tabsChange" active-color="#FF780F" :show-bar="false" height="88" font-size="24"  inactive-color="#333333"></u-tabs>
 | 
			
		||||
		</view>
 | 
			
		||||
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" :style="{height: swiperHeight}">
 | 
			
		||||
		<swiper :current="swiperCurrent" @animationfinish="animationfinish" :style="{height: swiperHeight}">
 | 
			
		||||
			<swiper-item class="swiper-item" v-for="(_, index) in tabList" :key="index">
 | 
			
		||||
				<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
 | 
			
		||||
					<SpecialGoods v-for="(item, index) in pinTuanList" :key="index" :item="item" type='group'></SpecialGoods>
 | 
			
		||||
					<u-loadmore :status="loadStatus" bgColor="#FFF" margin-top="20" margin-bottom="20" v-if="pinTuanList.length>=pageSize" @loadmore="onreachBottom"></u-loadmore>
 | 
			
		||||
					<u-empty text="暂无商品" mode="list" color="#000" v-if="!pinTuanList.length"></u-empty>
 | 
			
		||||
					<view v-if="pinTuanList[index]">
 | 
			
		||||
						<SpecialGoods v-for="(item, index) in pinTuanList[index]" :key="index" :item="item" type='group'></SpecialGoods>
 | 
			
		||||
					</view>
 | 
			
		||||
					<u-loadmore :status="loadStatus" bgColor="#FFF" margin-top="20" margin-bottom="20" v-if="!pinTuanList[index] || pinTuanList[index].length>=pageSize" @loadmore="onreachBottom"></u-loadmore>
 | 
			
		||||
					<u-empty text="暂无商品" mode="list" color="#000" v-if="!pinTuanList[index] || !pinTuanList[index].length"></u-empty>
 | 
			
		||||
				</scroll-view>
 | 
			
		||||
			</swiper-item>
 | 
			
		||||
		</swiper>
 | 
			
		||||
@ -47,8 +50,8 @@ export default {
 | 
			
		||||
		async getGoodsClass() {
 | 
			
		||||
			return await this.$u.api.getGoodsClass().then(res => {
 | 
			
		||||
				if(res.errCode == 0) {
 | 
			
		||||
					this.tabList = res.data;
 | 
			
		||||
					this.current = 0;
 | 
			
		||||
					this.tabList = res.data;
 | 
			
		||||
				}
 | 
			
		||||
			})
 | 
			
		||||
		},
 | 
			
		||||
@ -60,9 +63,10 @@ export default {
 | 
			
		||||
			})
 | 
			
		||||
			this.timer = true;
 | 
			
		||||
			if (res.errCode == 0) {
 | 
			
		||||
				if(load == 'reload') this.pinTuanList = res.data;
 | 
			
		||||
				else if(load == 'loadmore') this.pinTuanList.push(...res.data);
 | 
			
		||||
				if(load == 'reload') this.pinTuanList[this.current] = res.data;
 | 
			
		||||
				else if(load == 'loadmore') this.pinTuanList[this.current].push(...res.data);
 | 
			
		||||
			}
 | 
			
		||||
			this.$forceUpdate();
 | 
			
		||||
			return res.data.length;
 | 
			
		||||
		},
 | 
			
		||||
		// scroll-view到底部加载更多
 | 
			
		||||
@ -88,13 +92,9 @@ export default {
 | 
			
		||||
		},
 | 
			
		||||
		// tabs通知swiper切换
 | 
			
		||||
		tabsChange(index) {
 | 
			
		||||
			this.current = index;
 | 
			
		||||
			this.swiperCurrent = index;
 | 
			
		||||
		},
 | 
			
		||||
		// swiper-item左右移动,通知tabs的滑块跟随移动
 | 
			
		||||
		transition(e) {
 | 
			
		||||
			let dx = e.detail.dx;
 | 
			
		||||
			this.$refs.uTabs.setDx(dx);
 | 
			
		||||
		},
 | 
			
		||||
		// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
 | 
			
		||||
		// swiper滑动结束,分别设置tabs和swiper的状态
 | 
			
		||||
		animationfinish(e) {
 | 
			
		||||
 | 
			
		||||
@ -5,7 +5,7 @@
 | 
			
		||||
				<view class="rank-value">lv{{ memberInfo.member_level }}</view>
 | 
			
		||||
				<view class="line-box">
 | 
			
		||||
					<u-line-progress :percent="percent" :show-percent="false" inactive-color="#FFFFFF" active-color="#F1A36B" height="30" :striped="true" :striped-active="true"></u-line-progress>
 | 
			
		||||
					<text>{{ memberInfo.member_exppoints }}</text>
 | 
			
		||||
					<text>{{ memberInfo.member_exppoints | percentExp(memberInfo.next_grade_exppoints_diff) }}</text>
 | 
			
		||||
				</view>
 | 
			
		||||
				<view class="rank-value">lv{{ memberInfo.member_level + 1 }}</view>
 | 
			
		||||
			</view>
 | 
			
		||||
@ -40,10 +40,12 @@ export default {
 | 
			
		||||
		}
 | 
			
		||||
	},
 | 
			
		||||
	filters: {
 | 
			
		||||
		percentExp(value, rank) {
 | 
			
		||||
		percentExp(value, next) {
 | 
			
		||||
			// console.log(rank);
 | 
			
		||||
			let result = '0/0';
 | 
			
		||||
			if(rank) result = value + '/' + rank.max;
 | 
			
		||||
			let result = '0 / 0';
 | 
			
		||||
			result = typeof(next) == 'Number' 
 | 
			
		||||
			? value + ' / ' + (value + next)
 | 
			
		||||
			: value + ' / ' + '0'
 | 
			
		||||
			return result;
 | 
			
		||||
		},
 | 
			
		||||
	},
 | 
			
		||||
@ -57,6 +59,9 @@ export default {
 | 
			
		||||
					this.memberInfo = res.data;
 | 
			
		||||
					this.nodes = common.unescapeHTML(res.data.points_rule);
 | 
			
		||||
					// console.log(this.percent);
 | 
			
		||||
					this.percent = typeof(res.data.next_grade_exppoints_diff) == 'Number' 
 | 
			
		||||
					? res.data.member_exppoints / (res.data.next_grade_exppoints_diff + res.data.member_exppoints)
 | 
			
		||||
					: 100;
 | 
			
		||||
				}
 | 
			
		||||
			})
 | 
			
		||||
		},
 | 
			
		||||
 | 
			
		||||
@ -12,7 +12,7 @@
 | 
			
		||||
								<text>选择订单:</text>
 | 
			
		||||
								<image src="../../static/image/shop/2.png" mode=""></image>
 | 
			
		||||
							</view>
 | 
			
		||||
							<u-icon name="arrow-dwon" color="#2979ff" size="28"></u-icon>
 | 
			
		||||
							<!-- <u-icon name="arrow-dwon" color="#2979ff" size="28"></u-icon> -->
 | 
			
		||||
						</view>
 | 
			
		||||
						<view class="choose-info" v-if="choose">
 | 
			
		||||
							<view class="store">
 | 
			
		||||
 | 
			
		||||
							
								
								
									
										35
									
								
								pages.json
									
									
									
									
									
								
							
							
						
						
									
										35
									
								
								pages.json
									
									
									
									
									
								
							@ -176,7 +176,8 @@
 | 
			
		||||
									"placeholder": "搜索您需要的商品",
 | 
			
		||||
									"backgroundColor": "rgb(236,236,236)",
 | 
			
		||||
									"placeholderColor": "#999999",
 | 
			
		||||
									"disabled": false
 | 
			
		||||
									"disabled": false,
 | 
			
		||||
									"fontSize": "24"
 | 
			
		||||
								}
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
@ -189,22 +190,34 @@
 | 
			
		||||
							"titleNView": {
 | 
			
		||||
								"titleColor": "#333333",
 | 
			
		||||
								"backgroundColor": "#FFFFFF",
 | 
			
		||||
								"buttons": [
 | 
			
		||||
									{  
 | 
			
		||||
										"type":"none",
 | 
			
		||||
										"text":"搜索",
 | 
			
		||||
										"float":"right",
 | 
			
		||||
										"fontSize":"16",
 | 
			
		||||
										"color": "#FF780F"
 | 
			
		||||
									}
 | 
			
		||||
								],
 | 
			
		||||
								"searchInput": {
 | 
			
		||||
									"align": "left",
 | 
			
		||||
									"borderRadius": "15px",
 | 
			
		||||
									"placeholder": "搜索您需要的商品",
 | 
			
		||||
									"backgroundColor": "rgb(236,236,236)",
 | 
			
		||||
									"placeholderColor": "#999999",
 | 
			
		||||
									"disabled": false
 | 
			
		||||
									"disabled": false,
 | 
			
		||||
									"fontSize": "24"
 | 
			
		||||
								}
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
					}
 | 
			
		||||
				},
 | 
			
		||||
				{
 | 
			
		||||
					"path": "search/searchGoods",
 | 
			
		||||
					"style": {
 | 
			
		||||
						"app-plus": {
 | 
			
		||||
							"titleNView": {
 | 
			
		||||
								"titleColor": "#333333",
 | 
			
		||||
								"backgroundColor": "#FFFFFF",
 | 
			
		||||
								"searchInput": {
 | 
			
		||||
									"align": "left",
 | 
			
		||||
									"borderRadius": "15px",
 | 
			
		||||
									"placeholder": "搜索您需要的商品",
 | 
			
		||||
									"backgroundColor": "rgb(236,236,236)",
 | 
			
		||||
									"placeholderColor": "#999999",
 | 
			
		||||
									"disabled": false,
 | 
			
		||||
									"fontSize": "24"
 | 
			
		||||
								}
 | 
			
		||||
							}
 | 
			
		||||
						}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user