小程序社区团购demo

概述

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

详细

需求：

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

实现了功能：

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

产品部分页面展示

image.png

image.png

产品目录

image.png

部分wxml代码

<view class="container">
<view class="my">
<view class="my-left" wx:if="{{phone!=''}}">
<view class="avater">
<open-data class="avater" type="userAvatarUrl"></open-data>
</view>
<view class="my-left-name">
<open-data class="wx-name"type="userNickName"></open-data>
<text>联系电话：{{phone}}</text>
<text>用户来源：鑫灿生态</text>
</view>
</view>
<view class="my-left" wx:else>
<image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=387264399,2368088084&fm=26&gp=0.jpg">
</image>
<view class="my-left-name">
<button bindgetuserinfo="bindGetUserInfo" formType="submit" hoverClass="none" lang="zh_CN" openType="getUserInfo" style="width:150rpx;font-size:34rpx;font-weight:400;color:#892B1F"><text class="wx-name">授权登录</text></button>
</view>
</view>
<navigator hover-class="none" class="my-right" url="/pages/perfect/index">
<image src="../../static/img/vip.png"></image>
<text class="user-data">完善资料</text>
</navigator>
</view>
<view class="lists">
<navigator hover-class="none" url="/pages/team/index" class="list" style="background:#FEFAF2">
<image src="../../static/img/addteam.png"></image>
<text>加入团长</text>
</navigator>
<navigator hover-class="none" class="list" style="background:#EFF9F7">
<image src="../../static/img/share.png"></image>
<text>邀请团长 </text>
</navigator>
<navigator hover-class="none" url="/pages/perfect/index" class="list" style="background:#F2F6FE">
<image src="../../static/img/userdata.png"></image>
<text>完善资料</text>
</navigator>
<navigator hover-class="none" url="/pages/teamrecord/index" class="list" style="background:#FDF4F4">
<image src="../../static/img/record.png"></image>
<text>拓团明细</text>
</navigator>
<navigator hover-class="none" class="list" url="/pages/withdrawal/index" style="background:#FEFAF2">
<image src="../../static/img/yongjin.png"></image>
<text>佣金提现</text>
</navigator>
<navigator hover-class="none" class="list" url="/pages/bindnumber/index" style="background:#F4F2FE">
<image src="../../static/img/lianmen.png"></image>
<text>联盟编号</text>
</navigator>
<navigator hover-class="none" class="list" url="/pages/librarys/index" style="background:#F2F6FE">
<image src="../../static/img/dataku.png"></image>
<text>资料库</text>
</navigator>
<navigator hover-class="none" class="list" style="background:#FDF4F4">
<image src="../../static/img/news.png"></image>
<text>官方客服</text>
</navigator>
<navigator hover-class="none" url="/pages/commission/index" class="list" style="background:#FDF4F4">
<image src="../../static/img/yongjinmx.png"></image>
<text>佣金明细</text>
</navigator>
</view>
<view class="tost">
<view class="tost-txt">
<view style="font-weight:bold;color:#333333;font-size:34rpx">申请流程:</view>
<view class="tost-t">
步骤1: 为保证福建省颠倒是非回复收到回复河东狮吼兑换是非得失
</view>
<view class="tost-t">
步骤2: 为保证福建省颠倒是非回复收到回复河东狮吼兑换是非得失
</view>
<view style="font-weight:bold;color:red;font-size:34rpx;padding-top:20rpx">特别注意</view>
<view class="tost-t">
v第三方数据电脑手机辐射的发烧多少度师傅
</view>
</view>
</view>
<view class="model" wx:if="{{isShow}}">
<view class="model-content">
<view class="getphone">
社区团购拓客系统请求获取您的手机号
</view>
<button bindgetphonenumber="getPhoneNumber" hoverClass="none" open-type="getPhoneNumber" style="width:80%;font-size:34rpx;font-weight:400;color:#892B1F"><text class="wx-name">获取手机号</text></button>
</view>
</view>
</view>

部分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
}
}
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/116433.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

csa从初阶到大牛（练习题2-查询）

csa从初阶到大牛（练习题2-查询）

新建2个文件d1.txt d2.txt ,使用vim打开d1.txt 输入“Hello World”字符串,将b1.txt 硬链接到b2.txt &#xff0c;查看2个文件的硬连接数 # 新建文件d1.txt和d2.txt touch d1.txt d2.txt# 使用vim编辑d1.txt并输入文本"Hello World" vim d1.txt# 创建硬链接b2.…
阅读更多...
速码！！BGP最全学习笔记：IBGP和EBGP基本配置

速码！！BGP最全学习笔记：IBGP和EBGP基本配置

实验1&#xff1a;配置IBGP和EBGP 实验目的 熟悉IBGP和EBGP的应用场景掌握IBGP和EBGP的配置方法 实验拓扑 想要华为数通配套实验拓扑和配置笔记的朋友们点赞关注&#xff0c;评论区留下邮箱发给你! 实验步骤 1.IP地址的配置 R1的配置 <Huawei>system-view …
阅读更多...
25. 图论 - 路径和算法

25. 图论 - 路径和算法

文章目录 拓展：顶点和边的互换最短路径问题Dijkstra算法Hi, 你好。我是茶桁。 在充分了解图的概念，构成以及种类之后，我们要开始进入稍微有点难度的部分了。这节课，咱们来了解一下路径和Dijkstra算法。 拓展：顶点和边的互换 在这节课正式开始之前，我们对上一节课稍微扩…
阅读更多...
若依微服务如何处理Long类型精度丢失问题？

若依微服务如何处理Long类型精度丢失问题？

当字段实体类为Long类型且值超过前端js显示的长度范围时会导致前端回显错误。 目录 1、ruoyi-common-security模块添加JacksonConfig配置全局序列化 2、增加指定配置类信息
阅读更多...
【深度学习】Pytorch 系列教程（十二）：PyTorch数据结构：4、数据集（Dataset）

【深度学习】Pytorch 系列教程（十二）：PyTorch数据结构：4、数据集（Dataset）

目录 一、前言 二、实验环境 三、PyTorch数据结构 0、分类 1、张量&#xff08;Tensor&#xff09; 2、张量操作&#xff08;Tensor Operations&#xff09; 3、变量&#xff08;Variable&#xff09; 4、数据集&#xff08;Dataset&#xff09; 随机洗牌 一、前言 Ch…
阅读更多...
【计算机网络笔记一】网络体系结构

【计算机网络笔记一】网络体系结构

IP和路由器概念 两台主机如何通信呢&#xff1f; 首先&#xff0c;主机的每个网卡都有一个全球唯一地址&#xff0c;MAC 地址&#xff0c;如 00:10:5A:70:33:61 查看 MAC 地址&#xff1a; windows: ipconfig / alllinux&#xff1a;ifconfig 或者 ip addr 同一个网络的多…
阅读更多...
windows安装c环境

windows安装c环境

一. 下载安装mingw-w64 mingw-w64 解压后放到window环境变量路径 sysdm.cpl参看是否安装成功 二. 安装c idea Dev-Cpp下载及安装 新建文件 运行 编译&#xff08;F9&#xff09;、运行&#xff08;F10&#xff09;以及编译运行&#xff08;F11&#xff09; 参考 安装C…
阅读更多...
C++——如何正确的使用STL中的vector？

C++——如何正确的使用STL中的vector？

什么是vector&#xff1f; 在STL&#xff08;标准模板库&#xff09;中&#xff0c;vector是一种动态数组容器&#xff0c;可根据需要自动增长或缩小。它可以存储任意类型的元素&#xff0c;并且支持快速的随机访问。 vector是表示可变大小数组的序列容器vector采用的是连续的…
阅读更多...
LeetCode【65. 有效数字】

LeetCode【65. 有效数字】

没有完美的傀儡,没有完美的人类,却有绝美的离逝。 有效数字&#xff08;按顺序&#xff09;可以分成以下几个部分&#xff1a; 一个 小数 或者 整数&#xff08;可选&#xff09;一个 e 或 E &#xff0c;后面跟着一个 整数 小数&#xff08;按顺序&#xff09;可以分成以下几…
阅读更多...
golang优先级坑

golang优先级坑

看如下代码&#xff0c;我本以为a1, a2是相同的 package mainimport "fmt"func main() {b, c, d : 1, 0, 1a1 : b ^ c&(^d) // 1 ^a2 : c ^ b&(^d) // 0 ^fmt.Println(a1, a2) // 1 0 }但结果却是不同的&#xff0c;在golang中&的优先级^和&#xff5c;…
阅读更多...
eCharts实现漏斗图

eCharts实现漏斗图

需求&#xff1a;像漏斗那样进行层层筛选&#xff0c;进行一个可直接看见过程的图表 效果&#xff1a; 代码&#xff1a; option { //标题title: {text: Funnel,left: left,top: bottom}, //刷新加下载toolbox: {orient: vertical,top: center,feature: {restore: {},saveA…
阅读更多...
Redis学习笔记--002

Redis学习笔记--002

Redis的JAVA客户端 文章目录 Redis的JAVA客户端一、Redis的Java客户端的种类二、Jedis2.1、使用步骤2.2、Jedis连接池 三、[SpringDataRedis](https://spring.io/projects/spring-data-redis)3.1、介绍3.2、RedisTemplate3.3、SpringDataRedis使用步骤3.4、SpringDataRedis的序…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023