小程序社区团购demo

概述

实现了用户登录或者手机号,加入团长,邀请团长,各种佣金明细等页面

详细

需求:

根据市场信息反馈,社区团购比较火,有流量的用户可以推广页面

实现了功能:

实现了用户微信登录自动获取手机号,加入团长,邀请团长,展示各种佣金明细等页面;

产品部分页面展示

小程序社区团购demo_第1张图片

小程序社区团购demo_第2张图片

产品目录

小程序社区团购demo_第3张图片

部分wxml代码









联系电话:{{phone}}
用户来源:鑫灿生态











完善资料





加入团长



邀请团长 



完善资料



拓团明细



佣金提现



联盟编号



资料库



官方客服



佣金明细




申请流程:

步骤1: 为保证福建省颠倒是非回复收到回复河东狮吼兑换是非得失


步骤2: 为保证福建省颠倒是非回复收到回复河东狮吼兑换是非得失

特别注意

v第三方数据电脑手机辐射的发烧多少度师傅






社区团购拓客系统请求获取您的手机号




部分css代码

.my {
background: #F7CC1D;
height: 211rpx;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 47rpx 0 34rpx 34rpx;
color: #6D4B30;
font-size: 24rpx;
box-sizing: border-box;
}
 
.avater {
width: 133rpx;
height: 133rpx;
border-radius: 50%;
overflow: hidden;
}
 
.my-left {
display: flex;
align-items: center;
}
 
.my-left image {
width: 133rpx;
height: 133rpx;
border-radius: 50%;
}
 
.my-left-name {
display: flex;
flex-flow: column;
padding-left: 27rpx;
}
 
.my-left-name button {
padding: 0;
background: transparent;
font-size: 34rpx;
}
 
.my-right {
width: 164rpx;
height: 45rpx;
background: #FFFFFF;
border-radius: 23rpx 0px 0px 23rpx;
display: flex;
align-items: center;
justify-content: center;
}
 
.my-right image {
width: 30rpx;
height: 30rpx;
}
 
.wx-name {
font-size: 34rpx;
}
 
.user-data {
padding-left: 10rpx;
}
 
.lists {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 17.5rpx;
}
 
.list {
display: flex;
flex-flow: column;
width: 28.6%;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #333333;
margin: 10rpx 17.5rpx 20rpx 17.5rpx;
width: 206rpx;
height: 206rpx;
border-radius: 10rpx;
}
 
.list image {
width: 100rpx;
height: 100rpx;
}
 
.tost {
padding: 20rpx 37rpx;
}
 
.tost-txt {
background: #FFFFFF;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
border-radius: 20px;
color: #666666;
padding: 32rpx;
font-size: 30rpx;
}
 
.tost-t {
display: flex;
padding-top: 20rpx;
}
 
.model {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
}
 
.model-content {
width: 80%;
height: 500rpx;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 30rpx;
padding:50rpx;
box-sizing: border-box;
position: relative;
display: flex;
flex-flow: column;
align-items: center;
color: #333333;
font-size: 32rpx;
}
.model-content button{
position: absolute;
bottom: 50rpx;
height: 88rpx;
background: #F7CC1D;
border-radius: 47rpx;
display: flex;
justify-content: center;
align-items: center;
color: #892B1F;
font-size: 32rpx;
font-weight: 500;
margin-top: 42rpx;
}

部分js代码

//获取应用实例
const app = getApp()
Page({
data: {
phone: "",
session_key: "",
isShow:false,
userInfo:{},
inviteUserphone:""
},
onLoad: function (option) {
let phone = wx.getStorageSync('phone')
let userInfo = wx.getStorageSync('userInfo')
this.setData({
inviteUserphone:option.phone,
})
if (phone && userInfo) {
this.setData({
phone: phone,
userInfo:userInfo
})
} else {
this.getUserInfo()
}
},
//获取用户信息
bindGetUserInfo: function (e) {
if(e.detail.errMsg=="getUserInfo:ok"){
this.setData({
userInfo:e.detail.userInfo,
isShow:true
})
}else{
return
}
},
//获取code
getUserInfo: function (e) {
let that = this
wx.login({
success(res) {
let code = res.code;
wx.request({
url: 'https://api.youju.looksr.com/wx/unauth/getSessionKey',
method: 'GET',
header: {
'content-type': 'application/json'
},
data: {
code: code
},
success: function (res) {
that.setData({
session_key: res.data.data.session_key,
})
}
})
}
})
},
//获取手机号
getPhoneNumber(e) {
let that = this;
wx.request({
url: 'https://api.youju.looksr.com/wx/unauth/dencrypteData',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
sessionKey: that.data.session_key,
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
},
success: function (res) {
// wx.setStorageSync('phone', res.data.data)
that.getUserData(res.data.data)
}
})
},
getUserData:function(phone){
let that = this;
wx.request({
url: 'https://api.youju.looksr.com/MeituanRegimentalCommander/api/unauth/info/my',
method: 'GET',
header: {
'content-type': 'application/json'
},
data: {
phone: phone
},
success: function (res) {
if(res.data.resultCode == 0){
that.submitUser(phone)
}else{
wx.setStorageSync('phone', phone)
wx.setStorageSync('userInfo', that.data.userInfo)
that.setData({
phone: phone,
isShow:false
})
}
}
})
},
//保存用户信息
submitUser:function(phone){
let that = this;
wx.request({
url: 'https://api.youju.looksr.com/MeituanRegimentalCommander/api/unauth/add',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded'
},
data: {
inviteUserphone: that.data.inviteUserphone ? that.data.inviteUserphone : "",
wxNickName: that.data.userInfo.nickName,
wxAvatar: that.data.userInfo.avatarUrl,
phone: phone,
platform:0,
},
success: function (res) {
if(res.data.resultCode == 1){
wx.setStorageSync('phone', phone)
wx.setStorageSync('userInfo', that.data.userInfo)
that.setData({
phone: phone,
isShow:false
})
}
}
})
},
/**
   * 用户点击右上角分享
   */
onShareAppMessage: function () {
return {
title:"社区团购拓客系统",
path:"pages/index/index?phone="+this.data.phone
}
}
})

你可能感兴趣的:(微信及其他应用,小程序)