怎么实现微信小程序云开发拼团功能?
【微信云开发教程】怎么实现微信小程序云开发拼团功能?
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 【微信云开发教程】怎么实现微信小程序云开发拼团功能?
- 一.微信小程序云开发电商怎么实现拼团功能(仿橙心优选)
- 二.项目实现
- 拼团功能实现描述:
- 2.1 拼团商品属性:
- 2.2 设置拼团限时时间:
- 2.3 拼团活动人数的设置:
- 2.4 拼团的流程实现:
- 2.5 实现拼团成功后,禁止重复拼团:
- 2.6 实现拼团成功后用户购买拼团:
- 总结
一.微信小程序云开发电商怎么实现拼团功能(仿橙心优选)
现在微信小程序开发十分火热,实现微信有庞大的使用人群,而且微信小程序不需要客户端实现下载,只需要微信搜索就可以使用,在各种各样的小程序中电商小程序显得尤为突出,而且项目实现起来十分困难。我自己设计了一个电商拼团的小功能(基于云开发),大家可以学习学习。我这个是仿橙心优选的电商项目
二.项目实现
拼团功能实现描述:
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}}" checked="{{item.checked}}">{{item.name}}</radio></radio-group>
</view>
<view class="image"><text>图片:</text><button type="primary" style="width:50%" bindtap="getPicture" wx:if="{{fileID == ''}}">添加图片</button><image src="{{fileID}}" wx:if="{{fileID !== ''}}" mode="widthFix" style="width:200rpx;height:200rpx;margin:0 auto"></image>
</view>
<button style="margin-top:30rpx;background-color:#00f;color:#fff;width:70%;margin-bottom:30rpx" bindtap="submit">提交</button>
</view>
addpintuan.css
page {background-color: #f3f3f3;
}
.content {background-color: #fff;width: 90%;margin: 0 auto;margin-top: 20rpx;
}
.body {display: flex;flex-direction: row;margin-top: 20rpx;align-items: center;}
.body > text {width: 30%;padding: 10rpx 20rpx;margin-left: 42rpx;
}
.body > input,radio-group {width: 70%;margin-right: 30rpx;
}
.image {display: flex;margin-top: 20rpx;flex-direction: column;
}
.image > text {margin-left: 62rpx;margin-bottom: 30rpx;
}
效果展示:
2.4 拼团的流程实现:
主要思想:我们在拼团项目中保存了一个拼团限制的一个参数,如果有用户点击我要拼团的按钮,那么这个限制参数就自己减一,并且我们可以上传一个people字段给数据库,这个字段主要是保存了已经有几个人拼团成功,这样我们就可以在通过查询该字段来前端看见有几个人拼团成功。那么话不多说,开始展示代码,主要是这个实现的js函数,前端拼团按钮调用就可
pintuanall.js
pintuan: function(e) {var that = this;const db = wx.cloud.database();const _=db.command;var clock = this.data.clock;var _id = e.currentTarget.dataset.id;//获取当前商品的_idvar _openid=app.globalData.openid;console.log(_openid);console.log(_id);if (clock==0){wx.showModal({title: '',content: '时间已经截止',showCancel:false,})}wx.showModal({title: '',content: '是否确认拼团?',mask: true,success(res) {if (res.confirm) {console.log(_id);db.collection("pintuan").doc(_id).update({data: {kucun:_.inc(-1), //拼团名额减一people:_.inc(0-1),//拼团人数加一},success(res) {wx.showToast({title: '拼团成功!',mask:true,})}})} }})},
pintuanall.wxml
<view class="pintuan" wx:if="{{item.kucun>0}}"> //当kucun,拼团名额已经小于等于0时,不在显示我要拼团的前端按钮,拼团结束了<text bindtap="pintuan" data-id="{{item._id}}" >我要拼团</text></view>
pintuanall.css
.newest-box {padding: 0 35rpx;margin-top: 20rpx;column-count: 2;height: 100%;
}.newest-list {display: inline-block;width: 345rpx;height: 100%;margin: 0 0 20rpx -5rpx;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;text-align: center; /*图片和文字居中 */background: rgba(245, 127, 59, 0.829);
}.newest-box .newest-list:nth-child(2n) {margin-right: 0;
}.newest-box .newest-list image {width: 300rpx;height: 200rpx;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;margin: 0;
}.newest-text-child {opacity: 0.5;display: flex;margin-top: 8rpx;margin-left: 20rpx;font-size: 20rpx;color: rgb(10, 10, 10);
}
.ago_price {text-decoration: line-through;margin-top: 0px;opacity: 0.7;height: 30rpx;font-size: 28rpx;
}
.newest-text {margin-top: 0px;display: flex;align-items: center;
}.cruuent_price {width: 150rpx;font-size: 30rpx;
}.newest-box .newest-list .newest-text {display: flex;font-size: 30rpx;color: #e6343a;padding-top: 30rpx;
}.newest-text1 {overflow: hidden;font-size: 32rpx;text-overflow: ellipsis;white-space: nowrap;
}
.pintuan{color: rgb(240, 240, 240);background: rgb(233, 196, 30);width: 100px;border-radius: 15px;margin-left: 20%;}
.newest-box .newest-list .jishi{background: red;border-radius: 10px;width: 150px;margin-left: 10px;
}
.buy{color: rgb(240, 240, 240);background: rgb(250, 3, 3);width: 100px;border-radius: 15px;margin-left: 20%;margin-top: 2px;
}.major{ white-space: nowrap; padding:10px ;background-color:#ebf0f34d; margin-top: 10rpx; width: 100%;border-radius: 16rpx;}
.major .box{ text-align: center; width:180rpx; align-self: center; display: inline-block; border-radius: 16rpx;}
.major .pic{width:100rpx; height: 100rpx;}
.major .pic1{width:120rpx; height: 110rpx;}
.major .txt{ font-size:26rpx; margin-top:2rpx;}
2.5 实现拼团成功后,禁止重复拼团:
解决思想:我们的用户每次可以去不同的商品进行拼团,但是当我们拼团成功后,怎么样才可以限制用户重复拼同一个商品呢?我们需要一个辅助数据库,这里很像我们解决动态规划的二维数组的标志问题,当我们拼团成功后,在第一次的拼团函数中加一个验证。
步骤:如果你是第一次拼团这个商品,那么开始的验证你不会进去,你直接可以实现拼团,当你平团成功后,自动的将你的openid和该商品的id保存在一个pintuanok的数据库中,并且该记录的字段中加一条pintuanok:true (这是标志),当你第二次点击拼团时,会获取你的opinid和该商品的id,如果在pintuanok中查到,那么我们就是拼过团的,会提示拼团成功,请勿重复拼团。通过openid可以区分不同用户,通过商品id可以区分不同商品。代码如下:
pintuanall.js
/判断拼团是否成功pintuanok: function(e) {var that = this;const db = wx.cloud.database();const _=db.command;var _openid=app.globalData.openid;var _id = e.currentTarget.dataset.id;//获取当前商品的_idconsole.log(_openid);console.log(_id);db.collection("pintuanok").doc(_openid&&_id).get({success(res) {if(res.data.pintuanok==false||res.data.pintuanok==''){db.collection('pintuanok').update({data:{pintuanok:true,}})//XsdfnjsnbdffkjsdKXrE1sqadasi00tqugconsole.log(res)}else{wx.showToast({title: '请勿重复拼团!',showCancel:false,})db.collection('pintuanok').add({data:{pintuanok:true,_id :e.currentTarget.dataset.id,},success(res){wx.navigateTo({url: '../pintuanall/pintuanall',})}})}},fail(res) {console.log(res.data)}})},
把上述的函数应用在 pintuan: function(e) {}中即可.
2.6 实现拼团成功后用户购买拼团:
当kucun<=0时开启,这里需要进行一个身份验证,只需要去pintuanok这个云函数查找openid和产品id是否同时存在在一条记录中就可以实现购买;
pintuanall.js
// 加入购物车,购买
Tobuy(res){var that = this;var id = res.currentTarget.dataset.id;console.log(id);wx.navigateTo({url: '../pinproduct/pinproduct?id='+id,})},//拼团人数不够,等待购买
waittobuy(res){wx.showToast({title: '请等待拼团成功在购买',icon: 'none',duration: 2000})},
效果展示:
总结
我的拼团思路还是不够优化,主要时云开发脱离后台控制,数据交互并不时很理想。附所有代码。
首先是需要的两个数据库,pintuan pintuan 都是空表。
云函数:
updatepintuan
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {console.log(event);try {return await db.collection('pintuan').doc(event.id).update({data:{name:event.name,fenlei:event.fenlei,price:event.price,detail:event.detail,ago_price:event.ago_price,kucun:event.kucun,isRecommend:event.isRecommend,img_src:event.fileID}})} catch (e) {console.log(e)}
}
云函数:
selectpintuan
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {try {return await db.collection('pintuan').where({_id:event.id}).get({})} catch (e) {console.log(e)}
}
pages代码:
pintuanall
js
var app = getApp();
/** * 需要一个目标日期,初始化时,先得出到当前时间还有剩余多少秒* 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: '',},//获得最近新品getnew_goods() {var that = this;const db = wx.cloud.database();const _=db.command;db.collection("pintuan").where({}).get({success(res) {that.setData({new_product: res.data})console.log(res)},fail(res) {console.log(res.data)}})},onLoad: function(options) {var that = this;this.getnew_goods();countdown(this);},pintuan: function(e) {var that = this;const db = wx.cloud.database();const _=db.command;var clock = this.data.clock;var _id = e.currentTarget.dataset.id;//获取当前商品的_idvar _openid=app.globalData.openid;console.log(_openid);console.log(_id);db.collection("pintuanok").doc(_openid&&_id).get({success(res) {if(res.data.pintuanok==false||res.data.pintuanok==''){db.collection('pintuanok').update({data:{pintuanok:true,}})//XsdfnjsnbdffkjsdKXrE1sqadasi00tqugconsole.log(res)}else{wx.showModal({title: '请勿重复拼团!',showCancel:false,})return;}},fail(res) {console.log(res.data)}})if (clock==0){wx.showModal({title: '',content: '时间已经截止',showCancel:false,})}wx.showModal({title: '',content: '是否确认拼团?',mask: true,success(res) {if (res.confirm) {console.log(_id);db.collection("pintuan").doc(_id).update({data: {kucun:_.inc(-1),people:_.inc(0-1),},success(res) {wx.showToast({title: '拼团成功!',mask:true,})}})db.collection('pintuanok').add({data:{pintuanok:true,_id :e.currentTarget.dataset.id,},success(res){wx.navigateTo({url: '../pintuanall/pintuanall',})}})} }})},//判断拼团是否成功/*pintuanok: function(e) {var that = this;const db = wx.cloud.database();const _=db.command;var _openid=app.globalData.openid;var _id = e.currentTarget.dataset.id;//获取当前商品的_idconsole.log(_openid);console.log(_id);db.collection("pintuanok").doc(_openid&&_id).get({success(res) {if(res.data.pintuanok==false||res.data.pintuanok==''){db.collection('pintuanok').update({data:{pintuanok:true,}})//XsdfnjsnbdffkjsdKXrE1sqadasi00tqugconsole.log(res)}else{wx.showToast({title: '请勿重复拼团!',showCancel:false,})}},fail(res) {console.log(res.data)}})},*/
// 加入购物车,购买
Tobuy(res){var that = this;var id = res.currentTarget.dataset.id;console.log(id);wx.navigateTo({url: '../pinproduct/pinproduct?id='+id,})},//拼团人数不够,等待购买
waittobuy(res){wx.showToast({title: '请等待拼团成功在购买',icon: 'none',duration: 2000})},onPullDownRefresh:function(){this.getnew_goods();},
})
wxml
<view class="newest"><view class="newest-title"><text style="color:red ;">拼团商品</text></view><view class="newest-box"><block wx:for="{{new_product}}" wx:item="item" wx:key="index"><view class="newest-list" data-url="{{item}}" ><image src="{{item.img_src}}" ></image><view class="jishi"><text >限时: {{clock}}</text> </view><view class="newest-text1"><text>{{item.name}}</text><text class='newest-text-child'>需要{{item.kucun}}人拼团</text><text class='newest-text-child'>{{0-item.people}}人已拼团</text></view><view class="newest-text"><view class='ago_price'>原价¥ {{item.ago_price}}</view></view><text style="color:red"> 拼团价¥ {{item.price}}</text><view class="pintuan" wx:if="{{item.kucun>0}}"><text bindtap="pintuan" data-id="{{item._id}}" >我要拼团</text></view><view class="buy" > <text wx:if="{{item.kucun!=0}}" bindtap="waittobuy">等待购买</text><text wx:else="{{item.kucun==0}}" bindtap="Tobuy" data-id="{{item._id}}" >可购买</text></view></view> </block></view></view>
wxss
.newest-box {padding: 0 35rpx;margin-top: 20rpx;column-count: 2;height: 100%;
}.newest-list {display: inline-block;width: 345rpx;height: 100%;margin: 0 0 20rpx -5rpx;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;text-align: center; /*图片和文字居中 */background: rgba(245, 127, 59, 0.829);
}.newest-box .newest-list:nth-child(2n) {margin-right: 0;
}.newest-box .newest-list image {width: 300rpx;height: 200rpx;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;margin: 0;
}.newest-text-child {opacity: 0.5;display: flex;margin-top: 8rpx;margin-left: 20rpx;font-size: 20rpx;color: rgb(10, 10, 10);
}
.ago_price {text-decoration: line-through;margin-top: 0px;opacity: 0.7;height: 30rpx;font-size: 28rpx;
}
.newest-text {margin-top: 0px;display: flex;align-items: center;
}.cruuent_price {width: 150rpx;font-size: 30rpx;
}.newest-box .newest-list .newest-text {display: flex;font-size: 30rpx;color: #e6343a;padding-top: 30rpx;
}.newest-text1 {overflow: hidden;font-size: 32rpx;text-overflow: ellipsis;white-space: nowrap;
}
.pintuan{color: rgb(240, 240, 240);background: rgb(233, 196, 30);width: 100px;border-radius: 15px;margin-left: 20%;}
.newest-box .newest-list .jishi{background: red;border-radius: 10px;width: 150px;margin-left: 10px;
}
.buy{color: rgb(240, 240, 240);background: rgb(250, 3, 3);width: 100px;border-radius: 15px;margin-left: 20%;margin-top: 2px;
}.major{ white-space: nowrap; padding:10px ;background-color:#ebf0f34d; margin-top: 10rpx; width: 100%;border-radius: 16rpx;}
.major .box{ text-align: center; width:180rpx; align-self: center; display: inline-block; border-radius: 16rpx;}
.major .pic{width:100rpx; height: 100rpx;}
.major .pic1{width:120rpx; height: 110rpx;}
.major .txt{ font-size:26rpx; margin-top:2rpx;}
pages
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})}},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})
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}}" checked="{{item.checked}}">{{item.name}}</radio></radio-group>
</view>
<view class="image"><text>图片:</text><button type="primary" style="width:50%" bindtap="getPicture" wx:if="{{fileID == ''}}">添加图片</button><image src="{{fileID}}" wx:if="{{fileID !== ''}}" mode="widthFix" style="width:200rpx;height:200rpx;margin:0 auto"></image>
</view>
<button style="margin-top:30rpx;background-color:#00f;color:#fff;width:70%;margin-bottom:30rpx" bindtap="submit">提交</button>
</view>
css
page {background-color: #f3f3f3;
}
.content {background-color: #fff;width: 90%;margin: 0 auto;margin-top: 20rpx;
}
.body {display: flex;flex-direction: row;margin-top: 20rpx;align-items: center;}
.body > text {width: 30%;padding: 10rpx 20rpx;margin-left: 42rpx;
}
.body > input,radio-group {width: 70%;margin-right: 30rpx;
}
.image {display: flex;margin-top: 20rpx;flex-direction: column;
}
.image > text {margin-left: 62rpx;margin-bottom: 30rpx;
}
如果需要完整的项目,可以私聊我,友友们!
怎么实现微信小程序云开发拼团功能?相关推荐
- 微信小程序云开发实现退款功能
微信小程序云开发实现退款功能 官方文档 小程序云开发实现微信支付 官方文档非常的简单,也没有示例代码,只是列出了许多需要的参数,对于新手来说会可能有点迷糊.可以我的步骤跟着一步一步来. 一.获取退款A ...
- 【第三篇】微信小程序云开发项目总结
上篇文章:[第二篇]微信小程序云开发项目总结 功能点2:答疑解惑 这个功能点的实现基本与用户填写简历相同,都是用户上传数据到数据库,不加说明. 功能点3:消息回复 这个板块是用户查看管理员的回复消息的 ...
- 微信小程序云开发快速入门手册-告别切图仔的时刻到了
文章很长,建议先收藏,有充分的时间再学习,没有小程序基础的,也阔以先收藏哦. 本文章会手把手带各位小伙伴入门微信小程序云开发,因为我还不是全栈工程师,所以不是特别清楚前后端分离模式下,后端工程师需 ...
- 【系】微信小程序云开发实战坚果商城-前后端交互之订单实现
第 4-7 课:前后端交互之订单实现 目录 开篇 [系]微信小程序云开发实战坚果商城-开篇 基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
- 【系】微信小程序云开发实战坚果商城-云开发之首页数据实现
第 3-6 课:云开发之首页数据实现 目录 开篇 [系]微信小程序云开发实战坚果商城-开篇 基础篇 [系]微信小程序云开发实战坚果商城-弹性盒子 [系]微信小程序云开发实战坚果商城-ES6 简单入门 ...
- python操作微信小程序云端数据库_微信小程序云开发之数据库操作
本文实例为大家分享了微信小程序云开发之数据库操作的具体代码,供大家参考,具体内容如下 新建集合 1.打开云开发控制台,数据库 2.添加集合users 添加代码 onAdd: function () { ...
- 微信小程序云开发不完全指北
微信小程序云开发不完全指北 首先必须说明云开发的"云"并不是类似云玩家里的云的意思,而是微信小程序真的提供了云开发的接口以及一个简单的提供存储.数据库服务的虚拟后台(对于一些轻量小 ...
- python操作微信小程序云端数据库_微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序...
微信小程序·云开发云数据库的基本使用-微信小程序云开发实例-腾讯云微信小程序 浏览量:1120 时间:2020-04-06
- 微信小程序云开发用户身份登录_你必须要掌握的微信小程序云开发
微信小程序开发已经成为目前最火爆的技能之一,无论是在求职.毕设.兴趣培养等方面都已经成为一项必备技能,而小程序云开发技术的出现更是点燃了整个小程序生态圈. 在2019微信公开课PRO小程序分论坛上,腾 ...
最新文章
- JAVA NIO存在的问题
- docker 镜像重命名_Docker镜像管理(二)
- web 全栈 学习 2 一个好的页面是如何炼成的
- apache开源项目--ApacheDS
- Git Push 免输 用户名和密码
- WPF 带CheckBox、图标的TreeView
- js网页文件资源加载器
- PHP双码率视频云转码服务网站源码 支持M3u8秒切
- 字节跳动-文远知行杯”广东工业大学第十四届程序设计竞赛
- android用java写文本框_Android 自动完成文本框的实例
- java map 更新_更新Map键的值java
- 向上取整函数_Excel中平时不用的舍入函数的Floor和Ceiling公式,很实用
- git eclipse 取消误操作 ignore(忽略)文件
- 抖音小程序达人入驻壁纸微信小程序安装教程
- [《岛鼠》闲笔记事集]2012年8月28日
- 2017年杭州市大学生自主创业政策
- QT(5.12)+Qgis(3.10) 距离、面积测量
- git 主干修改合并到分支_git分支与主干合并操作
- 树莓派上搭建rtsp流媒体服务器
- 有财学院http://www.godgold.com/learn/title_asp/index.html