小程序社区团购demo

news2024/11/18 12:21:59

概述

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

详细

需求：

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

实现了功能：

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

产品部分页面展示

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.coloradmin.cn/o/1036042.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

vue之 h() 函数

vue之 h() 函数

前言 Vue推荐在绝大数情况下使用模板来创建HTML&#xff0c;然后一些特殊的场景&#xff0c;你真的需要JavaScript的完全编程的能力&#xff0c;这个时候你可以使用渲染函数 &#xff0c;它比模板更接近编译器&#xff1b; h()函数是什么 Vue在生成真实的DOM之前&#xff0c…
阅读更多...
如何用好免费的ChatGPT

如何用好免费的ChatGPT

如何用好免费的ChatGPT 前言ChatGPT使用入口在线体验地址&#xff1a;点我体验 ChatGPT介绍ChatGPT初级使用技巧初级使用技巧&#xff1a;清晰明了的问题表达 ChatGPT中级使用语法中级使用语法&#xff1a;具体化问题并提供背景信息 ChatGPT高级使用高级使用&#xff1a;追问、…
阅读更多...
Vue中如何进行表格排序与过滤

Vue中如何进行表格排序与过滤

Vue中如何进行表格排序与过滤 在Vue.js中&#xff0c;表格是一个常见的数据展示方式。很多时候&#xff0c;我们需要对表格中的数据进行排序和过滤&#xff0c;以提供更好的用户体验。本文将介绍如何在Vue中实现表格的排序和过滤功能&#xff0c;并提供相关的代码示例。 准备工…
阅读更多...
WebSocket通信安全概览

WebSocket通信安全概览

文章前言 在一次做项目的时候本来是想去点击Burpsuite的Proxy界面的HTTP History选项卡来查看HTTP历史请求记录信息并做测试的&#xff0c;但是在查看的时候却下意识的点击到了HTTP Proxy右侧的"WebSockets History"选项卡中&#xff0c;从界面的交互历史中发现网站…
阅读更多...
2023华为杯数模C题——大规模创新类竞赛评审方案研究

2023华为杯数模C题——大规模创新类竞赛评审方案研究

B题——大规模创新类竞赛评审方案研究 思路&#xff1a;采用数据分析等手段改进评分算法性能 完成情况(1-2问已经完成) 代码下载 问题一 在每个评审阶段&#xff0c;作品通常都是随机分发的&#xff0c;每份作品需要多位评委独立评审。为了增加不同评审专家所给成绩之间的可比…
阅读更多...
c语言代码

c语言代码

目录 1.利用goto的关机程序 2.交换两个整数&#xff08;容易出现的错误&#xff09; 2.1 错误示范 2.1.1 错误的原因 3.函数调用进行折半查找 3.1错误版本 3.1.1错误原因 4.写一个函数&#xff0c;每调用一次这个函数&#xff0c;就会将num的值增加1。 4.1使用传值进去 5.有关p…
阅读更多...
【初阶数据结构】二叉树全面知识总结

【初阶数据结构】二叉树全面知识总结

二叉树详解 树的概念及其结构树的概念树的相关概念树的表示方法孩纸兄弟表示法双亲表示法&#xff08;并查集&#xff09; 树的实际应用 二叉树二叉树的概念二叉树的种类二叉树的性质二叉树的存储结构 二叉树顺序结构的实现堆的概念及结构堆向上、向下调整法堆的插入堆的删除堆…
阅读更多...
基于ENC28J60+uIP1.0+STM32的UDP Server实现，服务器主动发送数据的实现，几个关键的问题可算整明白了！

基于ENC28J60+uIP1.0+STM32的UDP Server实现，服务器主动发送数据的实现，几个关键的问题可算整明白了！

ENC28J60&#xff0c;是一款SPI接口的以太网PHYMAC芯片&#xff0c;实现以太网物理层和MAC层硬件通信。uIP是一个TCP/IP软件协议栈&#xff0c;实现TCP、UDP、ARP、ICMP等网络协议。STM32F103RCT6通过SPI接口与ENC28J60通讯&#xff0c;并移植uIP协议&#xff0c;实现一个小型的…
阅读更多...
20230224_HDR-ISP_环境配置

20230224_HDR-ISP_环境配置

https://github.com/JokerEyeAdas/HDR-ISP/tree/main 一、环境配置 *.VS2015编译不过&#xff1b;VS2017没问题 *.将红框部分复制到工程下面 *.添加头文件路径 *.添加原文件
阅读更多...
【C#】Redis在net core下使用教程

【C#】Redis在net core下使用教程

系列文章 文章目录 系列文章前言一、Redis 简介1.1 Redis 优势1.2 Redis与其他key-value存储有什么不同&#xff1f; 二、Redis安装步骤2.1 下载链接2.2 安装测试 三、Redis修改帐户密码四、Redis写成Windows服务五、.net core - 使用CSRedisCore操作redis 前言 官方教程&…
阅读更多...
【C语言】模拟实现内存函数

【C语言】模拟实现内存函数

本篇文章目录 相关文章1. 模拟 memcpy 内存拷贝2. 模拟 memmove 内存移动 相关文章 【C语言】数据在内存中是以什么顺序存储的&#xff1f;【C语言】整数在内存中如何存储&#xff1f;又是如何进行计算使用的&#xff1f;【C语言】利用void*进行泛型编程【C语言】4.指针类型部…
阅读更多...
相机有俯仰角时如何将像素坐标正确转换到其他坐标系

相机有俯仰角时如何将像素坐标正确转换到其他坐标系

一般像素坐标系转相机坐标系都是默认相机是水平的&#xff0c;没有考虑相机有俯仰角的情况&#xff0c;大致的过程是&#xff1a;像素坐标系统-->图像坐标系-->相机坐标系 ->世界坐标系或雷达坐标系: 像素坐标系 像素坐标系&#xff08;u&#xff0c;v&#xff09;是…
阅读更多...
【Java 基础篇】Java函数式接口详解

【Java 基础篇】Java函数式接口详解

Java是一门强类型、面向对象的编程语言&#xff0c;但在Java 8引入了函数式编程的概念&#xff0c;这为我们提供了更多灵活的编程方式。函数式接口是函数式编程的核心概念之一&#xff0c;本文将详细介绍Java函数式接口的概念、用法以及一些实际应用。 什么是函数式接口&#…
阅读更多...
JUC第八讲：Condition源码分析

JUC第八讲：Condition源码分析

JUC第八讲&#xff1a;Condition源码分析 本文是JUC第八讲&#xff0c;Condition详解。任意一个Java对象&#xff0c;都拥有一组监视器方法&#xff08;定义在java.lang.Object上&#xff09;&#xff0c;主要包括 wait()、wait(long timeout)、notify()以及notifyAll()方法&am…
阅读更多...
【LeetCode-中等题】513. 找树左下角的值

【LeetCode-中等题】513. 找树左下角的值

文章目录 题目方法一&#xff1a;前序递归方法二&#xff1a;层序遍历 题目 方法一&#xff1a;前序递归 在递归遍历到叶子结点时&#xff0c;对比此时的节点深度&#xff0c;若当前节点深度大于当前最大深度&#xff0c;就更新value值&#xff0c;最后记录下的value即为最下最…
阅读更多...
elementui 菜单选中优化

elementui 菜单选中优化

/** 父级菜单悬浮样式**/ .el-submenu__title:hover {color:#1890ff!important; } /** 父级菜单箭头悬浮样式**/ .el-submenu__title:hover>.el-submenu__icon-arrow{font-size: 13px!important;} /** 子菜单悬浮样式**/ .el-menu-item:hover{color:#1890ff!important; } /*…
阅读更多...
Linux操作系统基础详解，计算机专业必看！

Linux操作系统基础详解，计算机专业必看！

目录 Linux操作系统 Linux 简介 Linux 接口 Linux 组成部分 Shell Linux 应用程序 Linux 内核结构 Linux 进程和线程 基本概念 Linux 进程间通信 Linux 中进程管理系统调用 Linux 进程和线程的实现 Linux 调度 Linux 启动 Linux 内存管理 基本概念 Linux 内存…
阅读更多...
【owt】 Intel® Media SDK for Windows： MSDK2021R1

【owt】 Intel® Media SDK for Windows： MSDK2021R1

https://www.intel.com/content/www/us/en/developer/articles/tool/media-sdk.html官方网不提供下载了： 2021地址 直接下载： MSDK2021R1.exe老版本 Intel Media SDK（Windows版本） 大神的介绍：owt-client-native 需要 https://github.com/open-webrtc-toolkit/owt-client…
阅读更多...
spring security auth2.0实现

spring security auth2.0实现

OAuth 2.0 的认证/授权流程 jwt只是认证中的一步 4中角色 资源拥有者&#xff08;resource owner&#xff09;、客户端&#xff08;client 第三方&#xff09;、授权服务器&#xff08;authorization server&#xff09;和资源服务器&#xff08;resource server&#xff09;。…
阅读更多...
vue 使用cornerstone解析 .dcm 文件

vue 使用cornerstone解析 .dcm 文件

// 首先下载依赖 npm install --save cornerstone-core cornerstone-math cornerstone-tools hammerjs cornerstone-web-image-loader 下载之后再package.json中可以看到最后图片的依赖// 下面是完成的组件代码 <template><div id"dicom_canvas" refdicom_c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023