论坛 › 移动端开发 › 微信小步伐实现购物商城（附源码）

悠扬随风 发表于 2024-6-11 09:05:31

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

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

包罗活动图片的轮播展示、活动商品缩略图和根本信息的展示、横向滑动tabBar、搜索框等。
            https://img-blog.csdnimg.cn/img_convert/cd3f08c49fabcdc0a005357cdbbebe3c.png         <!--pdd_index.wxml-->
<import src="components/user_guide/user_guide"/>
<!--顶部搜素框-->
<view class="container">
<view class="search">
    <view class="searchlong">
      <image class="searchico" src="/icon/search.jpeg"></image>
      <input class="searchkuang" type="text" placeholder="点击输入商品名称" confirm-type="search" bindconfirm="searchGoods" />
    </view>
</view>

<!--顶部轮播图-->
<view class="luobotu">
    <swiper class="swiperImg" 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}}"></image>
      </swiper-item>
      </block>
    </swiper>
</view>
<!--滑动tabs-->
<view class="listPar">
    <scroll-view scroll-x="true" class="nav" 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 class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav" data-id="{{navItem.platIndex}}">
          <view>{{navItem.text}}</view>
          <view class="nav-line {{currentTab == idx ?'active':''}}"></view>
      </view>
      </block>
    </scroll-view>
</view>
<!-- 页面内容 -->
<scroll-view scroll-y="{{isScroll}}" scroll-top='{{topNum}}' class="scroll-c">
    <image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
    <block wx:for="{{list_content}}" wx:key="index">
      <view class="list_content" 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 style="" mode="" src="{{item.primaryImage}}" binderror="" bindload=""></image>
      <view class="detail">
          <view class="detail_title">{{item.title}}</view>
          <view class="money_detail">
            <view class="icon_content">
            <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
            <text class="icon_title">原价：</text>      
            </view>   
            <view class="price_sty">
            ￥{{item.maxLinePrice}}                  
            </view>
          </view>
          <view class="money_detail">
            <view class="icon_content">
            <image class="icon_img" style="width: 20px;height: 20px"src="/img/icon_Popup_quan@2x.png" ></image>
            <text class="icon_title">到手：</text>      
            </view>   
            <view class="price_sty">
            ￥{{item.minSalePrice}}            
            </view>
          </view>
          <view class="money_detail">
            <view class="icon_content">
            <image class="icon_img" style="width: 20px;height: 20px"src="/img/icon_Popup_fan@2x.png"></image>
            <text class="icon_title">返利：</text>      
            </view>   
            <view class="save_money">
            ￥{{item.redBag}}
            </view>
          </view>
      </view>
      </view>
    </block>
</scroll-view>
<view class="loading" wx:if="{{loading}}">
    正在加载中......
</view>
<view class="loading" wx:if="{{loaded}}">
    没有更多数据
</view>
</view>
<!--弹窗获取用户信息-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{modalStatus}}"></view>
<view class="modal-dialog" wx:if="{{modalStatus}}">
<view class="modal-title">微信登录</view>
<view class="modal-content">
    <view class="modal-input">
      {{tipMsg}}
    </view>
</view>
<view class="modal-footer">
    <!--<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>-->
    <button class="btn-confirm" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">确定</button>
</view>
</view>二、活动详情展示页

活动详情展示页有两种，根据type举行分别跳转。一种是展示活动详情，重要包罗活动图片、活动内容、活动链接等。
            https://img-blog.csdnimg.cn/img_convert/9bd1b764e481facd65a95f5aeef2d1c2.jpeg         <!--pages/jd_activity_link/activity_link.wxml-->
<view class="container">
<!--顶部图片-->
<view class="luobotu">
    <image class = "lunboimg" src="{{imgUrl}}"></image>
</view>
<!--活动详情（文字）-->
<view class="goods-info">
    <view class="goods-number">
      <view class="goods-price">
      <view class="goods-price-up">{{title}}</view>
      </view>
    </view>
    <view class="goods-title" wx:if="{{showDesc}}">
      <view class="goods-name"><text>{{activityDesc}}</text></view>
    </view>
</view>
<!--详情介绍-->
<view class="desc-content">
    <view class="desc-content__title">
      <span class="desc-content__title--text">{{showType}}“{{title}}”活动链接</span>
    </view>
</view>
<view class="desc-content-textarea">
    <textarea class="desc-content-ta" value="\n{{platLink}}\n{{configData.activityLinkTipMsg}}" disabled="true"/>
</view>
<view class=".bar-list">
    <button bindtap="copy_link" class="bar-separately">复制商品链接</button>
</view>
</view>
另一种是展示活动商品，包罗活动图片、活动内容和活动商品列表。
            https://img-blog.csdnimg.cn/img_convert/14ec856e70b872d191e5758f931f7c4b.jpeg         <!--item_list.wxml-->
<view class="container">
<!--顶部图片-->
<view class="luobotu">
    <image class = "lunboimg" src="{{imgUrl}}"></image>
</view>
<!--活动详情（文字）-->
<view class="goods-info">
    <view class="goods-number">
      <view class="goods-price">
      <view class="goods-price-up">{{title}}</view>
      </view>
    </view>
    <view class="goods-title">
      <view class="goods-name"><text>{{activityDesc}}</text></view>
    </view>
</view>
<!--详情介绍-->
<view class="desc-content">
    <view class="desc-content__title">
      <span class="desc-content__title--text">拼多多{{title}}活动商品库</span>
    </view>
</view>
<!-- 页面内容 -->
<scroll-view scroll-y="{{isScroll}}" scroll-top='{{topNum}}' class="scroll-c">
    <image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
    <block wx:for="{{list_content}}" wx:key="index">
      <view class="list_content" 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 style="" mode="" src="{{item.primaryImage}}" binderror="" bindload=""></image>
      <view class="detail">
          <view class="detail_title">{{item.title}}</view>
          <view class="money_detail">
            <view class="icon_content">
            <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
            <text class="icon_title">原价：</text>      
            </view>   
            <view class="price_sty">
            ￥{{item.maxLinePrice}}                  
            </view>
          </view>
          <view class="money_detail">
            <view class="icon_content">
            <image class="icon_img" style="width: 20px;height: 20px"src="/img/icon_Popup_quan@2x.png" ></image>
            <text class="icon_title">到手：</text>      
            </view>   
            <view class="price_sty">
            ￥{{item.minSalePrice}}            
            </view>
          </view>
          <view class="money_detail">
            <view class="icon_content">
            <image class="icon_img" style="width: 20px;height: 20px"src="/img/icon_Popup_fan@2x.png"></image>
            <text class="icon_title">返利：</text>      
            </view>   
            <view class="save_money">
            ￥{{item.redBag}}
            </view>
          </view>
      </view>
      </view>
    </block>
</scroll-view>
<view class="loading" wx:if="{{loading}}">
    正在加载中......
</view>
<view class="loading" wx:if="{{loaded}}">
    没有更多数据
</view>
</view>三、商品详情展示页

商品详情展示了商品轮播图和商品信息。
            https://img-blog.csdnimg.cn/img_convert/531c8e38e7d6ceabfe21dc61ded3a306.jpeg         <view class="container">
<!--顶部轮播图-->
<view class="luobotu">
    <swiper class="swiperImg" autoplay="{{autoplay}}" interval="{{interval}}" indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
      <image class = "lunboimg" src="{{item}}"></image>
      </swiper-item>
    </block>
    </swiper>
</view>
<!--商品详情（文字）-->
<view class="goods-info">
    <view class="goods-number">
      <view class="goods-price">
      <price
          wr-class="class-goods-price"
          symbol-class="class-goods-symbol"
          price="{{minSalePrice}}"
          type="lighter"
      />
      <view class="goods-price-up">起</view>
      <price wr-class="class-goods-del" price="{{maxLinePrice}}" type="delthrough" />
      </view>
      <view class="sold-num">好评{{goodComments}}%</view>
    </view>
    <view class="goods-activity">
      <view class="tags-container">
      <view wx:for="{{spuTagList}}" data-promotionId="{{item.id}}" wx:key="index" wx:if="{{index<4}}">
            <view class="goods-activity-tag">{{item.title}}</view>
      </view>
      </view>
    </view>
    <view class="goods-title">
      <view class="goods-name">{{name}}</view>
    </view>
</view>
<!--详情介绍-->
<view class="desc-content">
    <view class="desc-content__title">
      <span class="desc-content__title--text">详情介绍</span>
    </view>
    <view class="item_img_list" wx:if="{{imgUrls.length > 0}}" wx:for="{{imgUrls}}" wx:key="index">
      <image class = "itemimg" src="{{item}}"></image>
    </view>
</view>
<view class="goods-bottom-operation">
    <view class=".bar-list">
      <view bindtap="copy_pwd" class="bar-separately">复制链接购买</view>
      <view bindtap="toBuyNow" class="bar-buy">京东小程序购买</view>
    </view>
</view>
</view>四、搜索页，支持按销量、价格等举行排序

            https://img-blog.csdnimg.cn/img_convert/12e24d22ffd67887d93000b2c4d4035c.jpeg         <view class='sort-wrap'>
<view class='sort-btn' bindtap="choosesort0" style="color:{{pageBackgroundColor}}">
    综合
</view>
<view class='sort-btn' data-index="{{daindex1}}" bindtap="choosesort1">
    {{configData.soldNumMsg}}
    <image src="{{imageurl1}}"></image>
</view>
<view class='sort-btn' data-index="{{daindex2}}" bindtap="choosesort2">
    {{configData.priceSortMsg}}
    <image src="{{imageurl2}}"></image>
</view>
</view>
<scroll-view scroll-y="true">
<image src='../../icon/gotop.jpg' class='goTop' hidden='{{!floorstatus}}' bindtap="goTop"></image>
<block wx:for="{{list_content}}" wx:key="index">
    <view class="list_content" 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 style="" mode="" src="{{item.primaryImage}}" binderror="" bindload=""></image>
      <view class="detail">
            <view class="detail_title">{{item.title}}</view>
            <view class="money_detail">
                <view class="icon_content">
                  <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
                  <text class="icon_title">{{configData.pddOrignal}}：</text>      
                </view>   
                <view class="price_sty">
                  {{configData.priceFlag}}{{item.maxLinePrice}}                  
                </view>
            </view>
            <view class="money_detail">
                <view class="icon_content">
                  <image class="icon_img" style="width: 20px;height: 20px"src="/img/icon_Popup_quan@2x.png" ></image>
                  <text class="icon_title">{{configData.tbSubtraction}}：</text>      
                </view>   
                <view class="price_sty">
                  -{{configData.priceFlag}}{{item.differ}}            
                </view>
            </view>
            <view class="money_detail">
                <view class="icon_content">
                  <image class="icon_img" style="width: 20px;height: 20px"src="/img/icon_Popup_fan@2x.png"></image>
                  <text class="icon_title">{{configData.tbDiscount}}：</text>      
                </view>   
                <view class="save_money">
                  {{configData.priceFlag}}{{item.minSalePrice}}
                </view>
            </view>
      </view>
    </view>
</block>
</scroll-view>
<view class="loading" wx:if="{{loading}}">
    正在加载中......
</view>
<view class="loading" wx:if="{{loaded}}">
    没有更多数据
</view>五、我的页面

展示用户余额、返利总额等信息。
            https://img-blog.csdnimg.cn/img_convert/b06cbca601277a77221163887a55ec71.jpeg         <view class="avatar_content">
    <image src="{{userInfo.avatarUrl}}" class="avatar"/>
    <view class="user_mag">
      <view class="nick_name">{{userInfo.nickName}}</view>
      <view class="nick_id">ID: {{userId}}</view>
    </view>
    <i class="iconfont icon-iconfonticonfonti2copycopy my_detail"> </i>      
</view>
<swiper
    class="lamp"
    autoplay="true"
    interval="2000"
    circular="true"
    vertical="true"
    display-multiple-items="1"
>
    <block wx:for="{{ effectList }}" wx:key="index">
      <swiper-item class="lamp_content">
            <image style="width:50rpx;height:50rpx;border-radius: 50%;" mode="" src="{{item.picUrl}}" binderror="" bindload=""></image>
            <text> {{ item.userName }}在{{ item.minute }}分钟前成功{{configData.drawCash}} <text style="color:red">{{ item.amount }}</text> 元至微信余额</text>      
      </swiper-item>
    </block>
</swiper>

<view class="sction_content">
    <view style="margin-bottom:40rpx;overflow:hidden">
      <image src="../../icon/icon_mine_Putforward@2x.png" class="put_for_ward"/>
      <view class="money_content">
            <view class="incarnate">{{presentAmount}}</view>
            <view class="incarnate_msg">{{configData.presentRebate}}</view>
      </view>
      <image bindtap='presentMoney' class="incarnate_btn" src="../../icon/button_mine_Putforward@2x.png"/>
    </view>
    <view class="line"></view>
    <view class="incarnate_detail">
      <view class="grand_rebate" bindtap='grandRebateMsg'>
            <view class="rebate">{{actualAmount}}</view>
            <view class="rebate_msg">{{configData.accumulativeRebate}}</view>
      </view>
      <view class="wait_rebate" bindtap='waitRebateMsg'>
            <view class="rebate">{{waitAmount}}</view>
            <view class="rebate_msg">{{configData.profitRebate}}</view>
      </view>   
    </view>
</view>

<view class="my_indent">
    <view class="indent_title">
      <view>
            {{configData.myOrders}}
      </view>
      <view class="see_all" bindtap="already_indent">
            <text>查看全部</text>      
            <i class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </i>   
      </view>
    </view>
    <view class="my_list" bindtap="wait_indent">
      <image src="../../icon/icon_mine_wait@2x.png"/>
      <view class="list_title">{{configData.toAwardOrders}}</view>
      <view class="list_description">
            <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>      
            <text>{{configData.toAwardOrdersInfo}}</text>   
      </view>
    </view>
    <view class="my_list" bindtap="already_indent">
      <image src="../../icon/icon_mine_compelet@2x.png"/>
      <view class="list_title">{{configData.awardOrders}}</view>
      <view class="list_description">
            <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>      
            <text>{{configData.awardOrdersInfo}}</text>   
      </view>
    </view>
    <view class="my_list">
    <button open-type="contact" bindcontact="handleContact">
      <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">
            <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>      
            <text>任何问题和建议都可以与我们沟通</text>   
      </view>
    </button>
    </view>
</view>
<!--弹窗获取用户信息-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{modalStatus}}"></view>
<view class="modal-dialog" wx:if="{{modalStatus}}">
<view class="modal-title">微信登录</view>
<view class="modal-content">
    <view class="modal-input">
      {{tipMsg}}
    </view>
</view>
<view class="modal-footer">
    <!--<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>-->
    <button class="btn-confirm" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">确定</button>
</view>
</view>六、订单页面

展示待返利订单、已返利订单列表
            https://img-blog.csdnimg.cn/img_convert/6002873f7df6c1dbe397a8ef6c557108.png         <view class="title">
    <view class="{{ status == 'waitAward' ? 'active' : ''}}" bindtap="handle_waitAward">待奖励</view>
    <view></view>
    <view class="{{ status == 'award' ? 'active' : ''}}" bindtap="handle_award">已奖励</view>
</view>
<view class="prompt">
    <view wx:if="{{status === 'waitAward'}}" bindtap="waitAwardMsg">
      <text>{{configData.toAwardOrdersMsg}}</text>   
      <i class="iconfont icon-iconfonticonfonti2copycopy"></i>   
    </view>
    <view wx:else bindtap="awardMsg">
      <text>{{configData.awardOrdersMsg}}</text>   
      <i class="iconfont icon-iconfonticonfonti2copycopy"></i>
    </view>
</view>
<view class="order_content" wx:for="{{orders}}" wx:key="index">
    <view class="order_list_content">
      <view class="order_title">
            <text> {{ item.shopName }} </text>
            <text style="color: #ff6500"> {{ status == 'waitAward' ? '等待确认收货' : '奖励成功发放'}} </text>               
      </view>
      <view class="order_section">
            <block wx:for="{{item.itemList}}" wx:key="key">
                <view class="order_section_content">
                  <image style="" mode="" src="{{item.picUrl}}" binderror="" bindload=""></image>
                  <view>{{item.itemName}}</view>
                </view>
            </block>            
      </view>
      <view class="order_footer">
            共计 {{item.itemList.length}} 件商品，确认收货后奖励：<text style="font-size: 36rpx; color: #ff6500">{{item.total}}</text>   
      </view>
    </view>   
</view>
<import src="../../components/user_info_modal/user_info_modal"/>
<templateis="msgItem" data="{{modalStatus,tipMsg}}"></template>因篇幅有限，相关wss和ts内容未展现，读者可扫描作者微信二维码获取。感谢各位看官支持！
            https://img-blog.csdnimg.cn/img_convert/d6eed0285aab549b15ef96d9e1bc8662.png         



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

查看完整版本: 微信小步伐实现购物商城（附源码）