• 小程序社区团购demo

    概述

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

    详细

    需求：

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

    实现了功能：

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

    产品部分页面展示

    image.png

    image.png

    产品目录

    image.png

    部分wxml代码

    1. <view class="container">
    2. <view class="my">
    3. <view class="my-left" wx:if="{{phone!=''}}">
    4. <view class="avater">
    5. <open-data class="avater" type="userAvatarUrl"></open-data>
    6. </view>
    7. <view class="my-left-name">
    8. <open-data class="wx-name"type="userNickName"></open-data>
    9. <text>联系电话：{{phone}}</text>
    10. <text>用户来源：鑫灿生态</text>
    11. </view>
    12. </view>
    13. <view class="my-left" wx:else>
    14. <image src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=387264399,2368088084&fm=26&gp=0.jpg">
    15. </image>
    16. <view class="my-left-name">
    17. <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>
    18. </view>
    19. </view>
    20. <navigator hover-class="none" class="my-right" url="/pages/perfect/index">
    21. <image src="../../static/img/vip.png"></image>
    22. <text class="user-data">完善资料</text>
    23. </navigator>
    24. </view>
    25. <view class="lists">
    26. <navigator hover-class="none" url="/pages/team/index" class="list" style="background:#FEFAF2">
    27. <image src="../../static/img/addteam.png"></image>
    28. <text>加入团长</text>
    29. </navigator>
    30. <navigator hover-class="none" class="list" style="background:#EFF9F7">
    31. <image src="../../static/img/share.png"></image>
    32. <text>邀请团长 </text>
    33. </navigator>
    34. <navigator hover-class="none" url="/pages/perfect/index" class="list" style="background:#F2F6FE">
    35. <image src="../../static/img/userdata.png"></image>
    36. <text>完善资料</text>
    37. </navigator>
    38. <navigator hover-class="none" url="/pages/teamrecord/index" class="list" style="background:#FDF4F4">
    39. <image src="../../static/img/record.png"></image>
    40. <text>拓团明细</text>
    41. </navigator>
    42. <navigator hover-class="none" class="list" url="/pages/withdrawal/index" style="background:#FEFAF2">
    43. <image src="../../static/img/yongjin.png"></image>
    44. <text>佣金提现</text>
    45. </navigator>
    46. <navigator hover-class="none" class="list" url="/pages/bindnumber/index" style="background:#F4F2FE">
    47. <image src="../../static/img/lianmen.png"></image>
    48. <text>联盟编号</text>
    49. </navigator>
    50. <navigator hover-class="none" class="list" url="/pages/librarys/index" style="background:#F2F6FE">
    51. <image src="../../static/img/dataku.png"></image>
    52. <text>资料库</text>
    53. </navigator>
    54. <navigator hover-class="none" class="list" style="background:#FDF4F4">
    55. <image src="../../static/img/news.png"></image>
    56. <text>官方客服</text>
    57. </navigator>
    58. <navigator hover-class="none" url="/pages/commission/index" class="list" style="background:#FDF4F4">
    59. <image src="../../static/img/yongjinmx.png"></image>
    60. <text>佣金明细</text>
    61. </navigator>
    62. </view>
    63. <view class="tost">
    64. <view class="tost-txt">
    65. <view style="font-weight:bold;color:#333333;font-size:34rpx">申请流程:</view>
    66. <view class="tost-t">
    67. 步骤1: 为保证福建省颠倒是非回复收到回复河东狮吼兑换是非得失
    68. </view>
    69. <view class="tost-t">
    70. 步骤2: 为保证福建省颠倒是非回复收到回复河东狮吼兑换是非得失
    71. </view>
    72. <view style="font-weight:bold;color:red;font-size:34rpx;padding-top:20rpx">特别注意</view>
    73. <view class="tost-t">
    74. v第三方数据电脑手机辐射的发烧多少度师傅
    75. </view>
    76. </view>
    77. </view>
    78. <view class="model" wx:if="{{isShow}}">
    79. <view class="model-content">
    80. <view class="getphone">
    81. 社区团购拓客系统请求获取您的手机号
    82. </view>
    83. <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>
    84. </view>
    85. </view>
    86. </view>

    部分css代码

    1. .my {
    2. background: #F7CC1D;
    3. height: 211rpx;
    4. width: 100%;
    5. display: flex;
    6. justify-content: space-between;
    7. align-items: center;
    8. padding: 47rpx 0 34rpx 34rpx;
    9. color: #6D4B30;
    10. font-size: 24rpx;
    11. box-sizing: border-box;
    12. }
    13.  
    14. .avater {
    15. width: 133rpx;
    16. height: 133rpx;
    17. border-radius: 50%;
    18. overflow: hidden;
    19. }
    20.  
    21. .my-left {
    22. display: flex;
    23. align-items: center;
    24. }
    25.  
    26. .my-left image {
    27. width: 133rpx;
    28. height: 133rpx;
    29. border-radius: 50%;
    30. }
    31.  
    32. .my-left-name {
    33. display: flex;
    34. flex-flow: column;
    35. padding-left: 27rpx;
    36. }
    37.  
    38. .my-left-name button {
    39. padding: 0;
    40. background: transparent;
    41. font-size: 34rpx;
    42. }
    43.  
    44. .my-right {
    45. width: 164rpx;
    46. height: 45rpx;
    47. background: #FFFFFF;
    48. border-radius: 23rpx 0px 0px 23rpx;
    49. display: flex;
    50. align-items: center;
    51. justify-content: center;
    52. }
    53.  
    54. .my-right image {
    55. width: 30rpx;
    56. height: 30rpx;
    57. }
    58.  
    59. .wx-name {
    60. font-size: 34rpx;
    61. }
    62.  
    63. .user-data {
    64. padding-left: 10rpx;
    65. }
    66.  
    67. .lists {
    68. display: flex;
    69. flex-wrap: wrap;
    70. align-items: center;
    71. padding: 17.5rpx;
    72. }
    73.  
    74. .list {
    75. display: flex;
    76. flex-flow: column;
    77. width: 28.6%;
    78. justify-content: center;
    79. align-items: center;
    80. font-size: 26rpx;
    81. color: #333333;
    82. margin: 10rpx 17.5rpx 20rpx 17.5rpx;
    83. width: 206rpx;
    84. height: 206rpx;
    85. border-radius: 10rpx;
    86. }
    87.  
    88. .list image {
    89. width: 100rpx;
    90. height: 100rpx;
    91. }
    92.  
    93. .tost {
    94. padding: 20rpx 37rpx;
    95. }
    96.  
    97. .tost-txt {
    98. background: #FFFFFF;
    99. box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    100. border-radius: 20px;
    101. color: #666666;
    102. padding: 32rpx;
    103. font-size: 30rpx;
    104. }
    105.  
    106. .tost-t {
    107. display: flex;
    108. padding-top: 20rpx;
    109. }
    110.  
    111. .model {
    112. position: fixed;
    113. top: 0;
    114. left: 0;
    115. right: 0;
    116. bottom: 0;
    117. background: rgba(0, 0, 0, 0.5);
    118. z-index: 99;
    119. }
    120.  
    121. .model-content {
    122. width: 80%;
    123. height: 500rpx;
    124. background: #FFF;
    125. position: absolute;
    126. top: 50%;
    127. left: 50%;
    128. transform: translate(-50%, -50%);
    129. border-radius: 30rpx;
    130. padding:50rpx;
    131. box-sizing: border-box;
    132. position: relative;
    133. display: flex;
    134. flex-flow: column;
    135. align-items: center;
    136. color: #333333;
    137. font-size: 32rpx;
    138. }
    139. .model-content button{
    140. position: absolute;
    141. bottom: 50rpx;
    142. height: 88rpx;
    143. background: #F7CC1D;
    144. border-radius: 47rpx;
    145. display: flex;
    146. justify-content: center;
    147. align-items: center;
    148. color: #892B1F;
    149. font-size: 32rpx;
    150. font-weight: 500;
    151. margin-top: 42rpx;
    152. }

    部分js代码

    1. //获取应用实例
    2. const app = getApp()
    3. Page({
    4. data: {
    5. phone: "",
    6. session_key: "",
    7. isShow:false,
    8. userInfo:{},
    9. inviteUserphone:""
    10. },
    11. onLoad: function (option) {
    12. let phone = wx.getStorageSync('phone')
    13. let userInfo = wx.getStorageSync('userInfo')
    14. this.setData({
    15. inviteUserphone:option.phone,
    16. })
    17. if (phone && userInfo) {
    18. this.setData({
    19. phone: phone,
    20. userInfo:userInfo
    21. })
    22. } else {
    23. this.getUserInfo()
    24. }
    25. },
    26. //获取用户信息
    27. bindGetUserInfo: function (e) {
    28. if(e.detail.errMsg=="getUserInfo:ok"){
    29. this.setData({
    30. userInfo:e.detail.userInfo,
    31. isShow:true
    32. })
    33. }else{
    34. return
    35. }
    36. },
    37. //获取code
    38. getUserInfo: function (e) {
    39. let that = this
    40. wx.login({
    41. success(res) {
    42. let code = res.code;
    43. wx.request({
    44. url: 'https://api.youju.looksr.com/wx/unauth/getSessionKey',
    45. method: 'GET',
    46. header: {
    47. 'content-type': 'application/json'
    48. },
    49. data: {
    50. code: code
    51. },
    52. success: function (res) {
    53. that.setData({
    54. session_key: res.data.data.session_key,
    55. })
    56. }
    57. })
    58. }
    59. })
    60. },
    61. //获取手机号
    62. getPhoneNumber(e) {
    63. let that = this;
    64. wx.request({
    65. url: 'https://api.youju.looksr.com/wx/unauth/dencrypteData',
    66. method: 'POST',
    67. header: {
    68. 'content-type': 'application/x-www-form-urlencoded'
    69. },
    70. data: {
    71. sessionKey: that.data.session_key,
    72. encryptedData: e.detail.encryptedData,
    73. iv: e.detail.iv
    74. },
    75. success: function (res) {
    76. // wx.setStorageSync('phone', res.data.data)
    77. that.getUserData(res.data.data)
    78. }
    79. })
    80. },
    81. getUserData:function(phone){
    82. let that = this;
    83. wx.request({
    84. url: 'https://api.youju.looksr.com/MeituanRegimentalCommander/api/unauth/info/my',
    85. method: 'GET',
    86. header: {
    87. 'content-type': 'application/json'
    88. },
    89. data: {
    90. phone: phone
    91. },
    92. success: function (res) {
    93. if(res.data.resultCode == 0){
    94. that.submitUser(phone)
    95. }else{
    96. wx.setStorageSync('phone', phone)
    97. wx.setStorageSync('userInfo', that.data.userInfo)
    98. that.setData({
    99. phone: phone,
    100. isShow:false
    101. })
    102. }
    103. }
    104. })
    105. },
    106. //保存用户信息
    107. submitUser:function(phone){
    108. let that = this;
    109. wx.request({
    110. url: 'https://api.youju.looksr.com/MeituanRegimentalCommander/api/unauth/add',
    111. method: 'POST',
    112. header: {
    113. 'content-type': 'application/x-www-form-urlencoded'
    114. },
    115. data: {
    116. inviteUserphone: that.data.inviteUserphone ? that.data.inviteUserphone : "",
    117. wxNickName: that.data.userInfo.nickName,
    118. wxAvatar: that.data.userInfo.avatarUrl,
    119. phone: phone,
    120. platform:0,
    121. },
    122. success: function (res) {
    123. if(res.data.resultCode == 1){
    124. wx.setStorageSync('phone', phone)
    125. wx.setStorageSync('userInfo', that.data.userInfo)
    126. that.setData({
    127. phone: phone,
    128. isShow:false
    129. })
    130. }
    131. }
    132. })
    133. },
    134. /**
    135.    * 用户点击右上角分享
    136.    */
    137. onShareAppMessage: function () {
    138. return {
    139. title:"社区团购拓客系统",
    140. path:"pages/index/index?phone="+this.data.phone
    141. }
    142. }
    143. })

  • 相关阅读:
    边缘计算是如何为元宇宙提供动力的？
    【数据库系统概论】触发器
    七夕到了 —— 属于 Java 的浪漫，拿去吧~ 祝表白成功
    Netty5-Netty模型
    Object.values()以及Object.keys()的用法。
    单片机-LED介绍
    如何录音？学会这几招，轻松搞定！
    《MATLAB智能算法30个案例》：第2章 基于遗传算法和非线性规划的函数寻优算法
    基于若依的ruoyi-nbcio流程管理系统仿钉钉流程json转bpmn的flowable的xml格式（排它条件网关）
    打开google search，从taskbar拖拽全屏应用比如Google进入分屏，页面出现Launcher报错
  • 原文地址：https://blog.csdn.net/hanjiepo/article/details/133221211