微信小步伐实现购物商城（附源码）

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>
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>
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>
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内容未展现，读者可扫描作者微信二维码获取。感谢各位看官支持！
              

           
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。