In 2018, I created a WeChat official account for Taobao shopping rebates. It has been in operation for nearly 5 years and has accumulated many fans. Recently, some users have given feedback on whether it is possible to display a list of promotional products on the official account, and it must have a search function. In order to thank fans and friends for their long-term support, the author spent a week developing a WeChat mini-program in the leisure time. The details are as follows:
1. Home page
Including carousel display of event pictures, display of event product thumbnails and basic information, horizontal sliding tabBar, search box, etc.
<!--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/[email protected]" ></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/[email protected]"></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>2. Event details display page
There are two types of event details display pages, which can be redirected according to the type. One is to display event details, mainly including event pictures, event content, event links, etc.
<!--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>
The other is to display event products, including event pictures, event content, and event product lists.
<!--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/[email protected]" ></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/[email protected]"></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>3. Product details display page
The product details display the product carousel and product information.
<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>4. The search page supports sorting by sales volume, price, etc.
<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/[email protected]" ></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/[email protected]"></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>5. My page
Display user balance, total rebate and other information.
<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/[email protected]" 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/[email protected]"/>
</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/[email protected]"/>
<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/[email protected]"/>
<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/[email protected]" 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>6. Order page
Display the list of pending rebate orders and rebate orders
<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"/>
<template is="msgItem" data="{
{modalStatus,tipMsg}}"></template>Due to limited space, relevant wss and ts content is not shown, readers can scan the QR code on the author's WeChat to get it. Thank you for your support!
