devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

微信小程序实现购物商城（附源码）_基于微信小程序的商城源码

作者：你好赵伟 | 2024-03-16 12:47:33

赞

踩

基于微信小程序的商城源码

2018年本人做了一个淘宝购物返利的微信公众号，截至目前已运营了近5年的时间，也陆续积累了不少粉丝。近日，有部分用户反馈是否可以在公众号上展示促销商品列表，而且要具备搜索功能。为感谢粉丝朋友们的长期支持，笔者耗时一周，利用茶余饭后时间，开发了一个微信小程序，详情如下：

一、首页

包括活动图片的轮播展示、活动商品缩略图和基本信息的展示、横向滑动tabBar、搜索框等。

  1. <!--pdd_index.wxml-->
  2. <import src="components/user_guide/user_guide"/>
  3. <!--顶部搜素框-->
  4. <view class="container">
  5.   <view class="search">
  6.     <view class="searchlong">
  7.       <image class="searchico" src="/icon/search.jpeg"></image>
  8.       <input class="searchkuang" type="text" placeholder="点击输入商品名称" confirm-type="search" bindconfirm="searchGoods" />
  9.     </view>
  10.   </view>
  11.  
  12.   <!--顶部轮播图-->
  13.   <view class="luobotu">
  14.     <swiper class="swiperImg" autoplay="{{autoplay}}" interval="{{interval}}" indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange">
  15.       <block wx:for="{{activityList}}" wx:key="index">
  16.         <swiper-item data-id="{{item.id}}" data-title="{{item.title}}" data-jumpType="{{item.jumpType}}" 
  17.         data-activityTags="{{item.activityTags}}" data-activityDesc="{{item.activityDesc}}" data-platLink="{{item.platLink}}" 
  18.         data-itemId="{{item.itemId}}" data-imgUrl="{{item.imgUrl}}" data-jType="{{item.type}}" bindtap="jump_activity">
  19.           <image class = "lunboimg" src="{{item.imgUrl}}"></image>
  20.         </swiper-item>
  21.       </block>
  22.     </swiper>
  23.   </view>
  24.   <!--滑动tabs-->
  25.   <view class="listPar">
  26.     <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"  show-scrollbar="false" enhanced="true">
  27.       <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx" bindtap="switchNav">
  28.         <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav" data-id="{{navItem.platIndex}}">
  29.           <view>{{navItem.text}}</view>
  30.           <view class="nav-line {{currentTab == idx ?'active':''}}"></view>
  31.         </view>
  32.       </block>
  33.     </scroll-view>
  34.   </view>
  35.   <!-- 页面内容 -->
  36.   <scroll-view scroll-y="{{isScroll}}" scroll-top='{{topNum}}' class="scroll-c">
  37.     <image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
  38.     <block wx:for="{{list_content}}" wx:key="index">
  39.       <view class="list_content" data-id="{{item.spuId}}" data-name="{{item.title}}" data-maxLinePrice="{{item.maxLinePrice}}" 
  40.       data-minSalePrice="{{item.minSalePrice}}" data-soldNum="{{item.soldNum}}" data-spuTagList="{{item.spuTagList}}" 
  41.       data-redBag="{{item.redBag}}" bindtap="jump_detail">
  42.         <image style="" mode="" src="{{item.primaryImage}}" binderror="" bindload=""></image>
  43.         <view class="detail">
  44.           <view class="detail_title">{{item.title}}</view>
  45.           <view class="money_detail">
  46.             <view class="icon_content">
  47.               <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
  48.               <text class="icon_title">原价：</text>        
  49.             </view>    
  50.             <view class="price_sty">
  51.               ￥{{item.maxLinePrice}}                    
  52.             </view>
  53.           </view>
  54.           <view class="money_detail">
  55.             <view class="icon_content">
  56.               <image class="icon_img" style="width: 20px;height: 20px"  src="/img/icon_Popup_quan@2x.png" ></image>
  57.               <text class="icon_title">到手：</text>        
  58.             </view>    
  59.             <view class="price_sty">
  60.               ￥{{item.minSalePrice}}            
  61.             </view>
  62.           </view>
  63.           <view class="money_detail">
  64.             <view class="icon_content">
  65.               <image class="icon_img" style="width: 20px;height: 20px"  src="/img/icon_Popup_fan@2x.png"></image>
  66.               <text class="icon_title">返利：</text>        
  67.             </view>    
  68.             <view class="save_money">
  69.               ￥{{item.redBag}}
  70.             </view>
  71.           </view>
  72.         </view>
  73.       </view>
  74.     </block>
  75.   </scroll-view>
  76.   <view class="loading" wx:if="{{loading}}">
  77.     正在加载中......
  78.   </view>
  79.   <view class="loading" wx:if="{{loaded}}">
  80.     没有更多数据
  81.   </view>
  82. </view>
  83. <!--弹窗获取用户信息-->
  84. <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{modalStatus}}"></view>
  85. <view class="modal-dialog" wx:if="{{modalStatus}}">
  86.   <view class="modal-title">微信登录</view>
  87.   <view class="modal-content">
  88.     <view class="modal-input">
  89.       {{tipMsg}}
  90.     </view>
  91.   </view>
  92.   <view class="modal-footer">
  93.     <!--<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>-->
  94.     <button class="btn-confirm" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">确定</button>
  95.   </view>
  96. </view>

二、活动详情展示页

活动详情展示页有两种，根据type进行分别跳转。一种是展示活动详情，主要包括活动图片、活动内容、活动链接等。

  1. <!--pages/jd_activity_link/activity_link.wxml-->
  2. <view class="container">
  3.   <!--顶部图片-->
  4.   <view class="luobotu">
  5.     <image class = "lunboimg" src="{{imgUrl}}"></image>
  6.   </view>
  7.   <!--活动详情（文字）-->
  8.   <view class="goods-info">
  9.     <view class="goods-number">
  10.       <view class="goods-price">
  11.         <view class="goods-price-up">{{title}}</view>
  12.       </view>
  13.     </view>
  14.     <view class="goods-title" wx:if="{{showDesc}}">
  15.       <view class="goods-name"><text>{{activityDesc}}</text></view>
  16.     </view>
  17.   </view>
  18.   <!--详情介绍-->
  19.   <view class="desc-content">
  20.     <view class="desc-content__title">
  21.       <span class="desc-content__title--text">{{showType}}  “{{title}}”  活动链接</span>
  22.     </view>
  23.   </view>
  24.   <view class="desc-content-textarea">
  25.     <textarea class="desc-content-ta" value="\n{{platLink}}\n{{configData.activityLinkTipMsg}}" disabled="true"/>
  26.   </view>
  27.   <view class=".bar-list">
  28.     <button bindtap="copy_link" class="bar-separately">复制商品链接</button>
  29.   </view>
  30. </view>

另一种是展示活动商品，包括活动图片、活动内容和活动商品列表。

  1. <!--item_list.wxml-->
  2. <view class="container">
  3.   <!--顶部图片-->
  4.   <view class="luobotu">
  5.     <image class = "lunboimg" src="{{imgUrl}}"></image>
  6.   </view>
  7.   <!--活动详情（文字）-->
  8.   <view class="goods-info">
  9.     <view class="goods-number">
  10.       <view class="goods-price">
  11.         <view class="goods-price-up">{{title}}</view>
  12.       </view>
  13.     </view>
  14.     <view class="goods-title">
  15.       <view class="goods-name"><text>{{activityDesc}}</text></view>
  16.     </view>
  17.   </view>
  18.   <!--详情介绍-->
  19.   <view class="desc-content">
  20.     <view class="desc-content__title">
  21.       <span class="desc-content__title--text">拼多多{{title}}活动商品库</span>
  22.     </view>
  23.   </view>
  24.   <!-- 页面内容 -->
  25.   <scroll-view scroll-y="{{isScroll}}" scroll-top='{{topNum}}' class="scroll-c">
  26.     <image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
  27.     <block wx:for="{{list_content}}" wx:key="index">
  28.       <view class="list_content" data-id="{{item.spuId}}" data-name="{{item.title}}" data-maxLinePrice="{{item.maxLinePrice}}" 
  29.       data-minSalePrice="{{item.minSalePrice}}" data-soldNum="{{item.soldNum}}" data-spuTagList="{{item.spuTagList}}" 
  30.       data-redBag="{{item.redBag}}" bindtap="jump_detail">
  31.         <image style="" mode="" src="{{item.primaryImage}}" binderror="" bindload=""></image>
  32.         <view class="detail">
  33.           <view class="detail_title">{{item.title}}</view>
  34.           <view class="money_detail">
  35.             <view class="icon_content">
  36.               <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
  37.               <text class="icon_title">原价：</text>        
  38.             </view>    
  39.             <view class="price_sty">
  40.               ￥{{item.maxLinePrice}}                    
  41.             </view>
  42.           </view>
  43.           <view class="money_detail">
  44.             <view class="icon_content">
  45.               <image class="icon_img" style="width: 20px;height: 20px"  src="/img/icon_Popup_quan@2x.png" ></image>
  46.               <text class="icon_title">到手：</text>        
  47.             </view>    
  48.             <view class="price_sty">
  49.               ￥{{item.minSalePrice}}            
  50.             </view>
  51.           </view>
  52.           <view class="money_detail">
  53.             <view class="icon_content">
  54.               <image class="icon_img" style="width: 20px;height: 20px"  src="/img/icon_Popup_fan@2x.png"></image>
  55.               <text class="icon_title">返利：</text>        
  56.             </view>    
  57.             <view class="save_money">
  58.               ￥{{item.redBag}}
  59.             </view>
  60.           </view>
  61.         </view>
  62.       </view>
  63.     </block>
  64.   </scroll-view>
  65.   <view class="loading" wx:if="{{loading}}">
  66.     正在加载中......
  67.   </view>
  68.   <view class="loading" wx:if="{{loaded}}">
  69.     没有更多数据
  70.   </view>
  71. </view>

三、商品详情展示页

商品详情展示了商品轮播图和商品信息。

  1. <view class="container">
  2.   <!--顶部轮播图-->
  3.   <view class="luobotu">
  4.     <swiper class="swiperImg" autoplay="{{autoplay}}" interval="{{interval}}" indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange">
  5.     <block wx:for="{{imgUrls}}">
  6.       <swiper-item>
  7.         <image class = "lunboimg" src="{{item}}"></image>
  8.       </swiper-item>
  9.     </block>
  10.     </swiper>
  11.   </view>
  12.   <!--商品详情（文字）-->
  13.   <view class="goods-info">
  14.     <view class="goods-number">
  15.       <view class="goods-price">
  16.         <price
  17.           wr-class="class-goods-price"
  18.           symbol-class="class-goods-symbol"
  19.           price="{{minSalePrice}}"
  20.           type="lighter"
  21.         />
  22.         <view class="goods-price-up">起</view>
  23.         <price wr-class="class-goods-del" price="{{maxLinePrice}}" type="delthrough" />
  24.       </view>
  25.       <view class="sold-num">好评{{goodComments}}%</view>
  26.     </view>
  27.     <view class="goods-activity">
  28.       <view class="tags-container">
  29.         <view wx:for="{{spuTagList}}" data-promotionId="{{item.id}}" wx:key="index" wx:if="{{index<4}}">
  30.             <view class="goods-activity-tag">{{item.title}}</view>
  31.         </view>
  32.       </view>
  33.     </view>
  34.     <view class="goods-title">
  35.       <view class="goods-name">{{name}}</view>
  36.     </view>
  37.   </view>
  38.   <!--详情介绍-->
  39.   <view class="desc-content">
  40.     <view class="desc-content__title">
  41.       <span class="desc-content__title--text">详情介绍</span>
  42.     </view>
  43.     <view class="item_img_list" wx:if="{{imgUrls.length > 0}}" wx:for="{{imgUrls}}" wx:key="index">
  44.       <image class = "itemimg" src="{{item}}"></image>
  45.     </view>
  46.   </view>
  47.   <view class="goods-bottom-operation">
  48.     <view class=".bar-list">
  49.       <view bindtap="copy_pwd" class="bar-separately">复制链接购买</view>
  50.       <view bindtap="toBuyNow" class="bar-buy">京东小程序购买</view>
  51.     </view>
  52.   </view>
  53. </view>

四、搜索页，支持按销量、价格等进行排序

  1. <view class='sort-wrap'>
  2.   <view class='sort-btn' bindtap="choosesort0" style="color:{{pageBackgroundColor}}">
  3.     综合
  4.   </view>
  5.   <view class='sort-btn' data-index="{{daindex1}}" bindtap="choosesort1">
  6.     {{configData.soldNumMsg}}
  7.     <image src="{{imageurl1}}"></image>
  8.   </view>
  9.   <view class='sort-btn' data-index="{{daindex2}}" bindtap="choosesort2">
  10.     {{configData.priceSortMsg}}
  11.     <image src="{{imageurl2}}"></image>
  12.   </view>
  13. </view>
  14. <scroll-view scroll-y="true">
  15. <image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
  16. <block wx:for="{{list_content}}" wx:key="index">
  17.     <view class="list_content" data-id="{{item.spuId}}" data-name="{{item.title}}" data-maxLinePrice="{{item.maxLinePrice}}" 
  18.       data-minSalePrice="{{item.minSalePrice}}" data-soldNum="{{item.soldNum}}" data-spuTagList="{{item.spuTagList}}" 
  19.             data-redBag="{{item.redBag}}" bindtap="jump_detail">
  20.         <image style="" mode="" src="{{item.primaryImage}}" binderror="" bindload=""></image>
  21.         <view class="detail">
  22.             <view class="detail_title">{{item.title}}</view>
  23.             <view class="money_detail">
  24.                 <view class="icon_content">
  25.                     <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
  26.                     <text class="icon_title">{{configData.pddOrignal}}：</text>        
  27.                 </view>    
  28.                 <view class="price_sty">
  29.                     {{configData.priceFlag}}{{item.maxLinePrice}}                    
  30.                 </view>
  31.             </view>
  32.             <view class="money_detail">
  33.                 <view class="icon_content">
  34.                     <image class="icon_img" style="width: 20px;height: 20px"  src="/img/icon_Popup_quan@2x.png" ></image>
  35.                     <text class="icon_title">{{configData.tbSubtraction}}：</text>        
  36.                 </view>    
  37.                 <view class="price_sty">
  38.                     -{{configData.priceFlag}}{{item.differ}}            
  39.                 </view>
  40.             </view>
  41.             <view class="money_detail">
  42.                 <view class="icon_content">
  43.                     <image class="icon_img" style="width: 20px;height: 20px"  src="/img/icon_Popup_fan@2x.png"></image>
  44.                     <text class="icon_title">{{configData.tbDiscount}}：</text>        
  45.                 </view>    
  46.                 <view class="save_money">
  47.                     {{configData.priceFlag}}{{item.minSalePrice}}
  48.                 </view>
  49.             </view>
  50.         </view>
  51.     </view>
  52. </block>
  53. </scroll-view>
  54. <view class="loading" wx:if="{{loading}}">
  55.     正在加载中......
  56. </view>
  57. <view class="loading" wx:if="{{loaded}}">
  58.     没有更多数据
  59. </view>

五、我的页面

展示用户余额、返利总额等信息。

  1. <view class="avatar_content">
  2.     <image src="{{userInfo.avatarUrl}}" class="avatar"/>
  3.     <view class="user_mag">
  4.         <view class="nick_name">{{userInfo.nickName}}</view>
  5.         <view class="nick_id">ID: {{userId}}</view>
  6.     </view>
  7.     <i class="iconfont icon-iconfonticonfonti2copycopy my_detail"> </i>        
  8. </view>
  9. <swiper
  10.     class="lamp"
  11.     autoplay="true"
  12.     interval="2000"
  13.     circular="true"
  14.     vertical="true"
  15.     display-multiple-items="1"
  16. >
  17.     <block wx:for="{{ effectList }}" wx:key="index">
  18.         <swiper-item class="lamp_content">
  19.             <image style="width:50rpx;height:50rpx;border-radius: 50%;" mode="" src="{{item.picUrl}}" binderror="" bindload=""></image>
  20.             <text> {{ item.userName }}在{{ item.minute }}分钟前成功{{configData.drawCash}} <text style="color:red">{{ item.amount }}</text> 元至微信余额</text>        
  21.         </swiper-item>
  22.     </block>
  23. </swiper>
  24.  
  25. <view class="sction_content">
  26.     <view style="margin-bottom:40rpx;overflow:hidden">
  27.         <image src="../../icon/icon_mine_Putforward@2x.png" class="put_for_ward"/>
  28.         <view class="money_content">
  29.             <view class="incarnate">{{presentAmount}}</view>
  30.             <view class="incarnate_msg">{{configData.presentRebate}}</view>
  31.         </view>
  32.         <image bindtap='presentMoney' class="incarnate_btn" src="../../icon/button_mine_Putforward@2x.png"/>
  33.     </view>
  34.     <view class="line"></view>
  35.     <view class="incarnate_detail">
  36.         <view class="grand_rebate" bindtap='grandRebateMsg'>
  37.             <view class="rebate">{{actualAmount}}</view>
  38.             <view class="rebate_msg">{{configData.accumulativeRebate}}</view>
  39.         </view>
  40.         <view class="wait_rebate" bindtap='waitRebateMsg'> 
  41.             <view class="rebate">{{waitAmount}}</view>
  42.             <view class="rebate_msg">{{configData.profitRebate}}</view>
  43.         </view>    
  44.     </view>
  45. </view>
  46.  
  47. <view class="my_indent">
  48.     <view class="indent_title">
  49.         <view>
  50.             {{configData.myOrders}}
  51.         </view>
  52.         <view class="see_all" bindtap="already_indent">
  53.             <text>查看全部</text>        
  54.             <i class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </i>    
  55.         </view>
  56.     </view>
  57.     <view class="my_list" bindtap="wait_indent">
  58.         <image src="../../icon/icon_mine_wait@2x.png"/>
  59.         <view class="list_title">{{configData.toAwardOrders}}</view>
  60.         <view class="list_description">
  61.             <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>        
  62.             <text>{{configData.toAwardOrdersInfo}}</text>    
  63.         </view>
  64.     </view>
  65.     <view class="my_list" bindtap="already_indent">
  66.         <image src="../../icon/icon_mine_compelet@2x.png"/>
  67.         <view class="list_title">{{configData.awardOrders}}</view>
  68.         <view class="list_description">
  69.             <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>        
  70.             <text>{{configData.awardOrdersInfo}}</text>    
  71.         </view>
  72.     </view>
  73.     <view class="my_list">
  74.     <button open-type="contact" bindcontact="handleContact">
  75.       <image src="../../icon/icon_mine_service@2x.png" style='width:70rpx;height:70rpx;margin-left:10rpx;margin-right:20rpx'/><view class="list_title">联系客服</view><view class="list_description">
  76.             <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>        
  77.             <text>任何问题和建议都可以与我们沟通</text>    
  78.         </view>
  79.     </button>
  80.     </view>
  81. </view>
  82. <!--弹窗获取用户信息-->
  83. <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{modalStatus}}"></view>
  84. <view class="modal-dialog" wx:if="{{modalStatus}}">
  85.   <view class="modal-title">微信登录</view>
  86.   <view class="modal-content">
  87.     <view class="modal-input">
  88.       {{tipMsg}}
  89.     </view>
  90.   </view>
  91.   <view class="modal-footer">
  92.     <!--<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>-->
  93.     <button class="btn-confirm" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">确定</button>
  94.   </view>
  95. </view>

六、订单页面

展示待返利订单、已返利订单列表

  1. <view class="title">
  2.     <view class="{{ status == 'waitAward' ? 'active' : ''}}" bindtap="handle_waitAward">待奖励</view>
  3.     <view></view>
  4.     <view class="{{ status == 'award' ? 'active' : ''}}" bindtap="handle_award">已奖励</view>
  5. </view>
  6. <view class="prompt">
  7.     <view wx:if="{{status === 'waitAward'}}" bindtap="waitAwardMsg">
  8.         <text>{{configData.toAwardOrdersMsg}}</text>    
  9.         <i class="iconfont icon-iconfonticonfonti2copycopy"></i>    
  10.     </view>
  11.     <view wx:else bindtap="awardMsg">
  12.         <text>{{configData.awardOrdersMsg}}</text>    
  13.         <i class="iconfont icon-iconfonticonfonti2copycopy"></i>
  14.     </view>
  15. </view>
  16. <view class="order_content" wx:for="{{orders}}" wx:key="index">
  17.     <view class="order_list_content">
  18.         <view class="order_title">
  19.             <text> {{ item.shopName }} </text>
  20.             <text style="color: #ff6500"> {{ status == 'waitAward' ? '等待确认收货' : '奖励成功发放'}} </text>                
  21.         </view>
  22.         <view class="order_section">
  23.             <block wx:for="{{item.itemList}}" wx:key="key">
  24.                 <view class="order_section_content">
  25.                     <image style="" mode="" src="{{item.picUrl}}" binderror="" bindload=""></image>
  26.                     <view>{{item.itemName}}</view>
  27.                 </view>
  28.             </block>            
  29.         </view>
  30.         <view class="order_footer">
  31.             共计 {{item.itemList.length}} 件商品，确认收货后奖励：<text style="font-size: 36rpx; color: #ff6500">{{item.total}}</text>    
  32.         </view>
  33.     </view>     
  34. </view>
  35. <import src="../../components/user_info_modal/user_info_modal"/>
  36. <template  is="msgItem" data="{{modalStatus,tipMsg}}"></template>

因篇幅有限，相关wss和ts内容未展现，读者可扫描作者微信二维码获取。感谢各位看官支持！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/249570
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号