基于微信小程序的商城秒殺、拼團、團購等效果實現

前言：營銷活動的經營與配置直接關系著店鋪的發展，然后由于各種活動門檻的的復雜性，使得某些營銷并沒有起到一個正面積極的引導作用，本文旨在提供一些簡單的活動模式及實現代碼。

目錄

• • 一、項目介紹
  • 二、相關技術
  • 三、小程序效果圖
  • 四、后臺管理效果圖
  • 五、代碼塊

一、項目介紹

小程序主要界面是在商品詳情頁進行展示，主要切換效果有普通商品詳情、限時秒殺、團購、拼團、以及通過外部鏈接訪問小程序等。

二、相關技術

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); }

總結

以上是生活随笔為你收集整理的微信小程序实现秒杀、拼团、团购等效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。