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

• 移动开发

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

一、首页

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

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





  
    
      
      
    
  

  
  
    <swiper  autoplay="{{autoplay}}" interval="{{interval}}" indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange">
      <block wx:for="{{activityList}}" wx:key="index">
        <swiper-item data-id="{{item.id}}" data-title="{{item.title}}" data-jumpType="{{item.jumpType}}" 
        data-activityTags="{{item.activityTags}}" data-activityDesc="{{item.activityDesc}}" data-platLink="{{item.platLink}}" 
        data-itemId="{{item.itemId}}" data-imgUrl="{{item.imgUrl}}" data-jType="{{item.type}}" bindtap="jump_activity">
          <image class = "lunboimg" src="{{item.imgUrl}}">
        
      
    
  
  
  
    <scroll-view scroll-x="true"  scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"  show-scrollbar="false" enhanced="true">
      <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx" bindtap="switchNav">
        <view  data-current="{{idx}}" bindtap="switchNav" data-id="{{navItem.platIndex}}">
          {{navItem.text}}
          
        
      
    
  
  
  <scroll-view scroll-y="{{isScroll}}" scroll-top='{{topNum}}' >
    <image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop">
    <block wx:for="{{list_content}}" wx:key="index">
      <view  data-id="{{item.spuId}}" data-name="{{item.title}}" data-maxLinePrice="{{item.maxLinePrice}}" 
      data-minSalePrice="{{item.minSalePrice}}" data-soldNum="{{item.soldNum}}" data-spuTagList="{{item.spuTagList}}" 
      data-redBag="{{item.redBag}}" bindtap="jump_detail">
        <image  mode="" src="{{item.primaryImage}}" binderror="" bindload="">
        
          {{item.title}}
          
            
              
              原价：        
                
            
              ￥{{item.maxLinePrice}}                    
            
          
          
            
              
              到手：        
                
            
              ￥{{item.minSalePrice}}            
            
          
          
            
              
              返利：        
                
            
              ￥{{item.redBag}}
            
          
        
      
    
  
  <view  wx:if="{{loading}}">
    正在加载中......
  
  <view  wx:if="{{loaded}}">
    没有更多数据
  


<view  bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{modalStatus}}">
<view  wx:if="{{modalStatus}}">
  微信登录
  
    
      {{tipMsg}}
    
  
  
    <!--取消-->

二、活动详情展示页

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

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



  
  
    <image class = "lunboimg" src="{{imgUrl}}">
  
  
  
    
      
        {{title}}
      
    
    <view  wx:if="{{showDesc}}">
      {{activityDesc}}
    
  
  
  
    
      {{showType}}  “{{title}}”  活动链接
    
  
  
    <textarea  value="\n{{platLink}}\n{{configData.activityLinkTipMsg}}" disabled="true"/>

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

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



  
  
    <image class = "lunboimg" src="{{imgUrl}}">
  
  
  
    
      
        {{title}}
      
    
    
      {{activityDesc}}
    
  
  
  
    
      拼多多{{title}}活动商品库
    
  
  
  <scroll-view scroll-y="{{isScroll}}" scroll-top='{{topNum}}' >
    <image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop">
    <block wx:for="{{list_content}}" wx:key="index">
      <view  data-id="{{item.spuId}}" data-name="{{item.title}}" data-maxLinePrice="{{item.maxLinePrice}}" 
      data-minSalePrice="{{item.minSalePrice}}" data-soldNum="{{item.soldNum}}" data-spuTagList="{{item.spuTagList}}" 
      data-redBag="{{item.redBag}}" bindtap="jump_detail">
        <image  mode="" src="{{item.primaryImage}}" binderror="" bindload="">
        
          {{item.title}}
          
            
              
              原价：        
                
            
              ￥{{item.maxLinePrice}}                    
            
          
          
            
              
              到手：        
                
            
              ￥{{item.minSalePrice}}            
            
          
          
            
              
              返利：        
                
            
              ￥{{item.redBag}}
            
          
        
      
    
  
  <view  wx:if="{{loading}}">
    正在加载中......
  
  <view  wx:if="{{loaded}}">
    没有更多数据

三、商品详情展示页

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

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

  
  
    <swiper  autoplay="{{autoplay}}" interval="{{interval}}" indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange">
    <block wx:for="{{imgUrls}}">
      
        <image class = "lunboimg" src="{{item}}">
      
    
    
  
  
  
    
      
        <price
          wr-
          symbol-
          price="{{minSalePrice}}"
          type="lighter"
        />
        起
        <price wr- price="{{maxLinePrice}}" type="delthrough" />
      
      好评{{goodComments}}%
    
    
      
        <view wx:for="{{spuTagList}}" data-promotionId="{{item.id}}" wx:key="index" wx:if="{{index
            {{item.title}}
        
      
    
    
      {{name}}
    
  
  
  
    
      详情介绍
    
    <view  wx:if="{{imgUrls.length > 0}}" wx:for="{{imgUrls}}" wx:key="index">
      <image class = "itemimg" src="{{item}}">
    
  
  
    
      复制链接购买
      京东小程序购买

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

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

  
    综合
  
  <view class='sort-btn' data-index="{{daindex1}}" bindtap="choosesort1">
    {{configData.soldNumMsg}}
    <image src="{{imageurl1}}">
  
  <view class='sort-btn' data-index="{{daindex2}}" bindtap="choosesort2">
    {{configData.priceSortMsg}}
    <image src="{{imageurl2}}">
  


<image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop">
<block wx:for="{{list_content}}" wx:key="index">
    <view  data-id="{{item.spuId}}" data-name="{{item.title}}" data-maxLinePrice="{{item.maxLinePrice}}" 
      data-minSalePrice="{{item.minSalePrice}}" data-soldNum="{{item.soldNum}}" data-spuTagList="{{item.spuTagList}}" 
            data-redBag="{{item.redBag}}" bindtap="jump_detail">
        <image  mode="" src="{{item.primaryImage}}" binderror="" bindload="">
        
            {{item.title}}
            
                
                    
                    {{configData.pddOrignal}}：        
                    
                
                    {{configData.priceFlag}}{{item.maxLinePrice}}                    
                
            
            
                
                    
                    {{configData.tbSubtraction}}：        
                    
                
                    -{{configData.priceFlag}}{{item.differ}}            
                
            
            
                
                    
                    {{configData.tbDiscount}}：        
                    
                
                    {{configData.priceFlag}}{{item.minSalePrice}}
                
            
        
    


<view  wx:if="{{loading}}">
    正在加载中......

<view  wx:if="{{loaded}}">
    没有更多数据

五、我的页面

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

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

    <image src="{{userInfo.avatarUrl}}" />
    
        {{userInfo.nickName}}
        ID: {{userId}}
    
             


    <block wx:for="{{ effectList }}" wx:key="index">
        
            <image  mode="" src="{{item.picUrl}}" binderror="" bindload="">
             {{ item.userName }}在{{ item.minute }}分钟前成功{{configData.drawCash}} {{ item.amount }} 元至微信余额        
        
    



    
        
        
            {{presentAmount}}
            {{configData.presentRebate}}
        
        
    
    
    
        
            {{actualAmount}}
            {{configData.accumulativeRebate}}
        
         
            {{waitAmount}}
            {{configData.profitRebate}}
            
    



    
        
            {{configData.myOrders}}
        
        
            查看全部        
                 
        
    
    
        
        {{configData.toAwardOrders}}
        
                     
            {{configData.toAwardOrdersInfo}}    
        
    
    
        
        {{configData.awardOrders}}
        
                     
            {{configData.awardOrdersInfo}}    
        
    
    
    
    


<view  bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{modalStatus}}">
<view  wx:if="{{modalStatus}}">
  微信登录
  
    
      {{tipMsg}}
    
  
  
    <!--取消-->

六、订单页面

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

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

    待奖励
    
    已奖励


    <view wx:if="{{status === 'waitAward'}}" bindtap="waitAwardMsg">
        {{configData.toAwardOrdersMsg}}    
            
    
    
        {{configData.awardOrdersMsg}}    
        
    

<view  wx:for="{{orders}}" wx:key="index">
    
        
             {{ item.shopName }} 
             {{ status == 'waitAward' ? '等待确认收货' : '奖励成功发放'}}                 
        
        
            <block wx:for="{{item.itemList}}" wx:key="key">
                
                    <image  mode="" src="{{item.picUrl}}" binderror="" bindload="">
                    {{item.itemName}}
                
                        
        
        
            共计 {{item.itemList.length}} 件商品，确认收货后奖励：{{item.total}}    
        
         


<template  is="msgItem" data="{{modalStatus,tipMsg}}">

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

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

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/69c35b7445.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐