微信小程序实现秒杀、拼团、团购等效果

基于微信小程序的商城秒杀、拼团、团购等效果实现

前言：营销活动的经营与配置直接关系着店铺的发展，然后由于各种活动门槛的的复杂性，使得某些营销并没有起到一个正面积极的引导作用，本文旨在提供一些简单的活动模式及实现代码。

一、项目介绍

小程序主要界面是在商品详情页进行展示，主要切换效果有普通商品详情、限时秒杀、团购、拼团、以及通过外部链接访问小程序等。

二、相关技术

html+css+js：微信小程序界面。
SqlServer数据库：数据支持。
外部链接二维码拼接：BitMap。
NetCore框架+C#程序语言：小程序及后台管理系统API的实现。
Layui前端框架：web后台管理界面样式及数据渲染框架。

三、小程序效果图

四、后台管理效果图

五、代码块

<!--pages/productDetail/index.wxml-->
<!-- 商品轮播图 -->
<view class="product-banner"><swiper class="product-banner" bindchange='onSlideChange' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"interval="{{interval}}" duration="{{duration}}" circular="{{circular}}"><block wx:for="{{productBanner}}" wx:key="id"><swiper-item><view><image src="{{item}}" class="product-banner" alt="" lazy-load="true" /></view></swiper-item></block></swiper>
</view><!-- 秒杀商品展示 -->
<view wx:if="{{productActiviType==0}}" class="activeBox"style="background: url({{imgUrl}}/upload/20220608/kill-pro-back.png);background-size: 100% 100%;"><view class="kill-leftBox"><view class="product-priceBox"><view style="height:35rpx;line-height: 35rpx;"><text class="symbol-kill">￥</text><text class="price-kill">58.8</text><text class="throuth-kill">￥98</text></view><view class="num-kill displayBox">限量200份</view></view><view class="justNum-kill"><text>已售198份</text><textclass="just-rightText">每人限购1份</text></view></view><view class="kill-rightBox"><view class="just-text">距秒杀结束仅剩</view><view class="kill-timeBox"><view class="clockBox margin-one displayBox">{{hour}}</view><view class="littleClock">:</view><view class="clockBox displayBox">{{min}}</view><view class="littleClock">:</view><view class="clockBox displayBox">{{second}}</view></view></view>
</view><view wx:if="{{productActiviType==3}}" class="product-normal"><view class="normal-left"><text class="normal-symbol">￥</text><text class="normal-price">198</text><text class="throuth-normal">￥98</text></view><view class="normal-right"><text class="salesVolume">销量:200</text><text class="stock">库存:500</text></view>
</view><!-- 商品名称 -->
<view class="productName-box littleTwo">超级无敌好吃美味烤鸭
</view><!-- 商品描述 -->
<view class="productDesc-box littleTwo">色泽红艳，肉质细嫩，味道醇厚，肥而不腻
</view><!-- 分享奖励 -->
<view class="productShare-money" bindtap="shareProduct"><view class="left-Share"><text>该商品分享可得奖励￥10</text></view><view class="right-Share"><image src="{{imgUrl}}/upload/20220608/share.png" lazy-load="true"></image><text>立即分享</text></view>
</view><!-- 服务 -->
<view class="services-box"><view class="services-left">服务</view><view class="services-right">新鲜品质 配送到家 售后无忧</view>
</view><!-- 商品评价 -->
<view class="product-reply" ><view class="reply-title"><view class="leftReolyCount">评价(2824)</view><view class="middleSeeMore"><view>查看全部评价</view></view><image class="grayRight" src="{{imgUrl}}/upload/20220608/rightJt.png" lazy-load="true"></image></view><view class="replyUserInfo"><image  class="replyUserHead" src="{{imgUrl}}/upload/20220608/jocker.jpg" lazy-load="true"></image><view class="rightUserName"><view class="userName little">橘猫大侠</view><view class="starBox"><image src="{{imgUrl}}/upload/20220608/star5.png" class="starImg"></image></view></view></view><view class="replyContet littleTwo">味道好，配送快，值得信赖！</view>
</view> <!-- 商品详情 -->
<image class="proImgDetail" src="{{imgUrl}}/upload/20220608/prodetailImg.png" lazy-load="true"></image><view style="height:56rpx;"></view><view class="productDetailTable" wx:if="{{spuList.length>0}}"><view wx:if="{{!isShowDetail}}"><view class="productTableTr"><view class="leftTr"><view class="little leftTrText">{{spuList[0].name}}</view></view><view class="rightTr little">{{spuList[0].content}}</view></view></view><view wx:if="{{isShowDetail}}" class="productTableTr" wx:for="{{spuList}}"><view class="leftTr"><view class="little leftTrText">{{item.name}}</view></view><view class="rightTr little">{{item.content}}</view></view></view><view class="DetailArrow displayBox" wx:if="{{spuList.length>0}}"><image wx:if="{{!isShowDetail}}" bindtap="clickArrow" class="arrowImg"src="{{imgUrl}}/upload/20220608/nextJt.png" lazy-load="true"></image><text wx:if="{{!isShowDetail}}" bindtap="clickArrow" style="margin-left:10rpx;">展开</text><image wx:if="{{isShowDetail}}" bindtap="clickArrow" class="arrowImg"src="{{imgUrl}}/upload/20220608/topJt.png" lazy-load="true"></image><text wx:if="{{isShowDetail}}" bindtap="clickArrow" style="margin-left:10rpx;">收起</text>
</view><view style="height:56rpx;"></view><image src="{{imgUrl}}/upload/20220608/explain.png" class="explain"></image><!-- 你可能还喜欢 -->
<view class="maybeLike"><image src="{{imgUrl}}/upload/20220608/2323-2.png" class="maybeLikePng"></image><!-- 配置商品 --><view class="indexProductList"><view class="productItemBottom" wx:for="{{4}}"><view style="background: url({{imgUrl}}/upload/20220608/ky.jpg);background-size: 100% 100%;" class="productImgBottom"></view><view class="bottom-productName little">北京烤鸭</view><view class="iconBox little">干净又卫生</view><view class="buyBox-bottom"><view class="leftPrice-bottom"><text class="priceFh">￥</text><text class="bottom-price">58</text><text class="bottom-oldPrice">￥98</text></view><view class="rightAdd-bottom"  data-index="{{index}}" ><image class="rightAdd-bottom" src="{{imgUrl}}/upload/20220608/addcart.png" lazy-load="true"></image></view></view></view></view></view><view style="height:162rpx;"></view><view class="footer"><view class="leftFooter"><view bindtap="GoHome"><view style="background: url({{imgUrl}}/upload/20220608/6-1.png);background-size: 100% 100%;"class="footImg"></view><view class="footText">首页</view></view><view bindtap="GoShopping"><view style="background: url({{imgUrl}}/upload/20220608/6-5.png);background-size: 100% 100%;"class="footImg2"></view><view class="footText2">购物车</view></view></view><view class="rightFooter"><view class="displayShow" ><view class="addCart-btn displayBox" catchtap="btnAddCart_footer">加入购物车</view><view class="purchase-btn displayBox" bindtap="rightNowBuy">立即购买</view></view></view>
</view>

.product-banner{width:750rpx;height:750rpx;
}
.activeBox{width:750rpx;height:130rpx;display:flex;
}
.kill-leftBox{width:424rpx;height: 130rpx;
}
.product-priceBox{height:37rpx;line-height:37rpx;margin-left:26rpx;margin-top:23rpx;width:398rpx;color: #FFFFFF;display: flex;
}
.symbol-kill{font-size:31rpx;
}
.price-kill{font-weight:bold;font-size:46rpx;
}
.throuth-kill{text-decoration:line-through;font-size:28rpx;margin-left: 11rpx;
}
.num-kill{padding-left: 14rpx ;padding-right: 14rpx ;background: #E5282B;color: #FFFFFF;font-size:22rpx;border-radius: 18.5rpx;margin-left:22rpx;
}
.justNum-kill{height:25rpx;line-height: 25rpx;margin-left:26rpx;margin-top:26rpx;width:398rpx;color: #FFFFFF;display: flex;font-size: 26rpx;
}
.just-rightText{margin-left:30rpx;
}
.kill-rightBox{width:326rpx;height: 130rpx;
}
.just-text{height:26rpx;margin-top:20rpx;margin-left:94rpx;font-size:28rpx;color:#FF2527;line-height: 26rpx;
}
.kill-timeBox{height:44rpx;width:326rpx;margin-top:27rpx;display:flex;
}
.clockBox{width:44rpx;height:44rpx;background:#1C1C1C;border-radius:6rpx;color:#FFFFFF;font-size:24rpx;
}
.margin-one{margin-left:91rpx;
}
.littleClock{height:44rpx;width:24rpx;color:#FFFFFF;font-size:26rpx;font-weight:bold;text-align: center;
}
.justNum-team{height:37rpx;line-height: 37rpx;margin-left:26rpx;margin-top:26rpx;width:398rpx;color: #FFFFFF;display: flex;font-size: 26rpx;
}
.product-priceBox-team{height:35rpx;line-height: 35rpx;margin-left:26rpx;margin-top:23rpx;width:398rpx;color: #FFFFFF;
}
.kill-rightBox-team{width:326rpx;height: 130rpx;
}
.start-num{height:44rpx;padding-left:24rpx;padding-right:24rpx;color:#FE2E2D;font-size:28rpx;background:#FFFFFF;border-radius:10rpx;margin-top:69rpx;float:right;margin-right:33rpx;
}
.product-normal{height:35rpx;width:750rpx;margin-top:25rpx;padding-bottom:41rpx;line-height:35rpx;display:flex;
}
.normal-left{width:375rpx;color: #FF4C0E;
}
.normal-right{width:350rpx;
}
.normal-symbol{font-size:31rpx;margin-left:26rpx;
}
.normal-price{font-weight: bold;font-size:46rpx;
}
.throuth-normal{text-decoration:line-through;font-size:28rpx;margin-left: 11rpx;color:#666666;
}
.salesVolume{float:right;color:#666666;font-size:24rpx;
}
.stock{float:right;color:#666666;font-size:24rpx;margin-right:28rpx;
}
.productName-box{width:698rpx;margin-left:26rpx;line-height:39rpx;color:#1F1F1F;font-size:32rpx;font-weight:bold;
}
.productDesc-box{margin-top:20rpx;width:698rpx;margin-left:26rpx;line-height:32.5rpx;color:#666666;font-size:25rpx;
}
.productShare-money{width:702rpx;margin-left:24rpx;margin-top:24rpx;background:#FFBD20;border-radius:14rpx;height:80rpx;display:flex;line-height:80rpx;
}
.left-Share{width:528rpx;color:#0D0D0D;font-size:28rpx;
}
.left-Share text{margin-left:18rpx;
}
.right-Share{width:174rpx;display:flex;
}
.right-Share image{width:28rpx;height:28rpx;margin-top:26rpx;
}
.right-Share text{color: #000000;font-size:28rpx;margin-left:12rpx;line-height:80rpx;
}
.productInfoBox{width: 702rpx;background: #F8F8F8;border-radius: 14rpx;margin-top:21rpx;margin-left:24rpx;/* height: 287rpx;border:1rpx solid black; */height: 90rpx;
}
.Specifications{height: 26rpx;width: 686rpx;margin-left:16rpx;display: flex;
}
.Distribution{height: 26rpx;width: 686rpx;margin-left:16rpx;display: flex;
}
.heightInfo{height: 32rpx;
}
.title-info{color:#0D0D0D;font-size:28rpx;font-weight:bold;line-height: 26rpx;width:160rpx;
}
.chouseSpe{color:#7E7D7D;font-size:26rpx;line-height: 26rpx;width:514rpx;
}
.Specifications image{width:12rpx;height:22rpx;margin-top:2rpx;float: right;
}


//秒杀商品倒计时
function count_down(that) {//console.log(that);var qgInterval = setInterval(function () {let finalTime = date_format(that.data.endDate2);//console.log(finalTime);let val = finalTime.split(':')[0];let val1 = finalTime.split(':')[1];let val2 = finalTime.split(':')[2];that.setData({hour: val,min: val1,second: val2,});that.data.endDate2 -= 1000;if (that.data.endDate2 <= 1) {that.setData({//clock: "00:00:00",hour: '00',min: '00',second: '00',isShowKill: false, //倒计时隐藏productActiviType: 3, //商品类型改为空  普通商品});clearInterval(qgInterval);}}, 1000);
}

微信小程序实现秒杀、拼团、团购等效果相关推荐

怎么实现微信小程序云开发拼团功能？
[微信云开发教程]怎么实现微信小程序云开发拼团功能? 提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录 [微 ...
基于微信小程序小区租拼车管理信息系统+后台ssm
随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟.本文介绍了微信小程序小区租拼车管理信息系统的开发全过程.通过分析微信小程序小区租拼车管理信息系统管理的不足,创建了一个 ...
微信小程序-实现元素渐入渐出动画效果-封装方法
开端之前一直使用堪称"万能"的jQuery处理用户交互的动画,近日开发微信小程序,微信小程序高度限制的语法和功能使开源函数可谓对其"无能为力". 那没办法,只 ...
微信小程序期末大作业-精品优购商城
微信小程序期末大作业-精品优购商城导入即可运行,有轮播图,各种商品标签,底部导航栏,包含首页,分类,购物车,个人中心四个导航:如下图:(资源链接在末尾) 资源下载链接:https://downloa ...
Laravel6.0 + vue.js + elementUI + 微信小程序实现沃尔玛扫码购
本次项目使用 Laravel6.0 + vue.js + elementUI + 微信小程序实现沃尔玛扫码购项目设计-接口本次项目所有接口使用 laravel 框架实现. 项目设计-后台后台开 ...
【微信小程序控制硬件⑦ 进阶篇】巧借阿里云物联网平台的免费连接，从微信小程序颜色采集控制 esp8266 输出七彩灯效果，中秋节来个直播如何？！
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
微信小程序第六篇：元素吸顶效果实现
系列文章传送门: 微信小程序第一篇:自定义组件详解微信小程序第二篇:七种主流通信方法详解微信小程序第三篇:获取页面节点信息微信小程序第四篇:生成图片并保存到手机相册微信小程序第五篇:页面弹出效 ...
微信小程序通过wx.redirectTo,实现单页面刷新效果＆下拉刷新页面数据效果
微信小程序通过wx.redirectTo,实现单页面刷新效果 & 下拉刷新页面数据效果一: 使用 wx.redirectTo(),实现页面刷新数据效果 API说明: 关闭当前页面,跳转到应 ...
微信小程序仿系统自带下拉刷新效果
微信小程序仿系统自带下拉刷新效果前言思路分析实现尾巴前言看到标题也许有人会说:系统不是已经自带了下拉刷新,你去仿照系统的下拉刷新是不是吃多了没事干?其实真相并不是这样的.在微信小程序手把手 ...
基于微信小程序的自驾游拼团小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...

微信小程序实现秒杀、拼团、团购等效果

目录

一、项目介绍

二、相关技术

三、小程序效果图

四、后台管理效果图

五、代码块

微信小程序实现秒杀、拼团、团购等效果相关推荐

最新文章

热门文章