微信小程序云开发电商怎么实现拼团功能？

Posted 2021-05-15 沉默着忍受

一.微信小程序云开发电商怎么实现拼团功能(仿橙心优选)

    现在微信小程序开发十分火热，实现微信有庞大的使用人群，而且微信小程序不需要客户端实现下载，只需要微信搜索就可以使用，在各种各样的小程序中电商小程序显得尤为突出，而且项目实现起来十分困难。今天小胡同学我自己设计了一个电商拼团的小功能（基于云开发），大家可以学习学习。我这个是仿橙心优选的电商项目

二.项目实现

拼团功能实现描述：

1.拼团商品都有什么属性？

2.怎么设置拼团限时时间？

3.拼团活动人数的设置？

4.怎么实现拼团过程？

6.怎么实现拼团成功后，禁止重复拼团？

5.拼团成功后如何购买？

2.1 拼团商品属性：

拼团商品的属性主要是普通的商品属性+拼团标志属性；（创建一个叫pintuan的云数据库）
商品属性设置（例子）

后台添加商品可视化工具展示：

2.2 设置拼团限时时间：

这里主要是实现了一个计时器的功能。我就不多讲了，直接附代码.注意此处代码是节选，如果想使用的话，去文章的末尾，我会给出完整代码

js

/** 
 * 需要一个目标日期，初始化时，先得出到当前时间还有剩余多少秒
 * 1.将秒数换成格式化输出为XX天XX小时XX分钟XX秒 XX
 * 2.提供一个时钟，每10ms运行一次，渲染时钟，再总ms数自减10
 * 3.剩余的秒次为零时，return，给出tips提示说，已经截止
 */
 
// 定义一个总毫秒数，以一天为例var total_micro_second = 10 * 1000;//这是10秒倒计时
 var total_micro_second = 3600 * 1000*24;//这是一天倒计时
 
/* 毫秒级秒杀倒计时 */
function countdown(that) {
   // 渲染倒计时时钟
   that.setData({
     clock:dateformat(total_micro_second)//格式化时间
   });
 
   if (total_micro_second <= 0) {
     that.setData({
       clock:"拼团结束"
     });
     // timeout则跳出递归
     return ;
   }  

   //settimeout实现倒计时效果
   setTimeout(function(){
    // 放在最后--
    total_micro_second -= 10;
    countdown(that);
  }
  ,10)//注意毫秒的步长受限于系统的时间频率，于是我们精确到0.01s即10ms
}
 
// 时间格式化输出，如1天天23时时12分分12秒秒12 。每10ms都会调用一次
function dateformat(micro_second) {
   // 总秒数
   var second = Math.floor(micro_second / 1000);
   // 天数
   var day = Math.floor(second / 3600/24);
   // 总小时
   var hr = Math.floor(second / 3600);
   // 小时位
   var hr2 = hr%24;
   // 分钟位
   var min = Math.floor((second - hr * 3600) / 60);
   // 秒位
  var sec = (second - hr * 3600 - min * 60);// equal to => var sec = second % 60;
  // 毫秒位，保留2位
  var micro_sec = Math.floor((micro_second % 1000) / 10);
  return /*day+"天"+*/hr2 + "时" + min + "分" + sec + "秒" ;//+ micro_sec;
}

Page({
  data: {
  
    new_product: [],
    clock: '',
    openid: '',
    

  },
  
  onLoad: function(options) {
    countdown(this);
  },

wxml

   <view class="jishi">
              <text >限时: {{clock}}</text>            
            </view>

css

.newest-box .newest-list .jishi{
  background: red;
  border-radius: 10px;
  width: 150px;
  margin-left: 10px;
}

效果展示：

2.3 拼团活动人数的设置：

主要就是在后台管理程序中填写信息，定义kucun为拼团的人数限制，代码如下：
addpintuan.js

const util = require('../util.js');
const db = wx.cloud.database();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    name:'',
    price:'',
    ago_price:'',
    classify:'',
    detail:'',
    stock:'',
    isRecommend:'',
    fileID:'',
    recommendObject:[{name:'是',checked:false},
                     {name:'否',checked:false}],
    classifyObject:[{name:'蔬菜',checked:false},
                    {name:'肉禽蛋品',checked:false},
                    {name:'海鲜水产',checked:false},
                    {name:'粮油调味',checked:false},
                    {name:'熟食卤味',checked:false},
                    {name:'冰品面点',checked:false},
                    {name:'牛奶面包',checked:false},
                    {name:'酒水冷饮',checked:false},
                    {name:'休闲零食',checked:false},
                ],
    now:'',
    array:[]
  },
  getName(res){
    this.setData({
      name:res.detail.value
    })
  },
  getClassify(res){
    this.setData({
      classify:res.detail.value
    })
  },
  getPrice(res){
    this.setData({
      price:res.detail.value
    })
  },
  getago_price(res){
    this.setData({
      ago_price:res.detail.value
    })
  },
  getkucun(res){
    this.setData({
      kucun:res.detail.value
    })
  },
  getDetail(res){
    this.setData({
      detail:res.detail.value
    })
  },
  getStock(res){
    this.setData({
      stock:res.detail.value
    })
  },
  isRecommend(res){
    this.setData({
      isRecommend:res.detail.value
    })
  },
  getPicture(res){
    var that = this;
    var num = Math.floor(Math.random()*10000);
    var time = Date.parse(new Date());
    wx.chooseImage({
      count: 1,
      success(res){
        console.log(res);
        wx.showLoading({
          title: '上传中',
        })
        wx.cloud.uploadFile({
          cloudPath:'shop/' + time + '-' + num,
          filePath:res.tempFilePaths[0],
          success(res){
            console.log("上传成功",res);
            that.setData({
              fileID:res.fileID
            })
            wx.hideLoading({
              success: (res) => {},
            })
          },
          fail(res){
            console.log("上传失败",res);
          }
        })
      }
    })
  },
  submit(res){
    var that = this;
    console.log(that.data.name,that.data.classify,that.data.price,that.data.detail,that.data.isRecommend,that.data.fileID);
    if(that.data.name == '' || that.data.classify == '' || that.data.price == '' || that.data.ago_price == ''|| that.data.kucun == ''  || that.data.detail == '' ||that.data.isRecommend == '' || that.data.fileID == ''){
      wx.showToast({
        title: '请完整填写信息',
      })
    }else{
      if(that.data.now == '修改'){
        wx.cloud.callFunction({
          name:'updatepintuan',
          data:{
            id:that.data.array._id,
            name:that.data.name,
            fenlei:that.data.classify,
            price:that.data.price,
            ago_price:that.data.ago_price,
            kucun:parseInt(that.data.kucun),
            detail:that.data.detail,
            isRecommend:that.data.isRecommend,
            fileID:that.data.fileID
          },
          success(res){
            console.log("信息修改成功");
            wx.redirectTo({
              url: '../admin/admin',
              success(res){
                wx.showToast({
                  title: '修改成功',
                  duration:3000
                })
              }
            })
          },
          fail(res){
            console.log("信息修改失败",res);
          }
        })
      }else{
        db.collection('pintuan').add({
          data:{
            detail:that.data.detail,
            fenlei:that.data.classify,
            img_src:that.data.fileID,
            name:that.data.name,
            price:that.data.price,
            ago_price:that.data.ago_price,
            kucun:parseInt(that.data.kucun),
            pinglun:[],
            isRecommend:that.data.isRecommend
          },
          success(res){
            console.log("上传成功");
            wx.showToast({
              title: '上传成功',
              success(res){
                wx.redirectTo({
                  url: '../admin/admin',
                })
              }
            })
          }
        })
      }
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var classifyObject = that.data.classifyObject;
    var recommendObject = that.data.recommendObject;
    console.log(options.data);
    if(options.data == undefined){

    }else{
      var array = JSON.parse(options.data);
      console.log(array);
      for(var i = 0; i < classifyObject.length; i++){
        if(classifyObject[i].name == array.fenlei){
          classifyObject[i].checked = true;
        }
      }
      for(var j = 0; j < recommendObject.length; j++){
        if(recommendObject[j].name == array.isRecommend){
          recommendObject[j].checked = true;
        }
      }
      that.setData({
        classifyObject:classifyObject,
        recommendObject:recommendObject,
        classify:array.fenlei,
        isRecommend:array.isRecommend,
        now:'修改',
        name:array.name,
        price:array.price,
        detail:array.detail,
        ago_price:that.data.ago_price,
        kucun:that.data.kucun,
        fileID:array.img_src,
        array:array
      })
    }
  },
})

addpintuan.wxml

<view class="content">
  <view class="body">
  <text>拼团商品名称:</text>
  <input bindinput="getName" value="{{name}}"/>
</view>
<view class="body">
  <text>商品分类:</text>
  <radio-group bindchange="getClassify">
    <radio wx:for="{{classifyObject}}" value="{{item.name}}" checked="{{item.checked}}">{{item.name}}</radio>
  </radio-group>
</view>
<view class="body">
  <text>原价格:</text>
  <input bindinput="getago_price" value="{{ago_price}}" type="number" />
</view>
<view class="body">
  <text>拼团价格:</text>
  <input bindinput="getPrice" value="{{price}}" type="number" />
</view>
<view class="body">
  <text>拼团人数:</text>
  <input bindinput="getkucun" value="{{kucun}}" type="number" />
</view>
<view class="body">
  <text>描述:</text>
  <input bindinput="getDetail" value="{{detail}}"/>
</view>
<!-- <view class="body">
  <text>商品库存:</text>
  <input bindinput="getStock"/>
</view> -->
<view class="body">
  <text>是否推荐到主页:</text>
  <radio-group bindchange="isRecommend">
    <radio wx:for="{{recommendObject}}" value="{{item.name}}" 拼团商城小程序开发

 微信小程序拼团项目简介
 微信啥小程序可以改手机截图
 微信小程序有哪些功能？
 您好，怎么在微信小程序里投放自己的商品？
 电商微信小程序的开发，项目及功能描述