浏览代码

index and me

lbj 1 年之前
父节点
当前提交
31e8f95850

+ 24 - 7
app.json

@@ -1,13 +1,30 @@
 {
-  "pages":[
+  "pages": [
     "pages/index/index",
-    "pages/logs/logs"
+    "pages/logs/logs",
+    "pages/my/my"
   ],
-  "window":{
-    "backgroundTextStyle":"light",
+  "window": {
+    "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle":"black"
+    "navigationBarTitleText": "客户端",
+    "navigationBarTextStyle": "black"
+  },
+  "tabBar": {
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "selectedIconPath":"./images/首页.png",
+        "iconPath":"./images/首页ah.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/my/my",
+        "text": "我的",
+        "selectedIconPath":"./images/我的.png",
+        "iconPath":"./images/我的ah.png"
+      }
+    ]
   },
   "sitemapLocation": "sitemap.json"
-}
+}

+ 0 - 10
app.wxss

@@ -1,10 +0,0 @@
-/**app.wxss**/
-.container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 200rpx 0;
-  box-sizing: border-box;
-} 

二进制
images/我的.png


二进制
images/我的ah.png


二进制
images/首页.png


二进制
images/首页ah.png


二进制
pages/index/images/1.png


二进制
pages/index/images/2.png


二进制
pages/index/images/3.png


二进制
pages/index/images/搜索.png


+ 43 - 40
pages/index/index.js

@@ -3,46 +3,49 @@
 const app = getApp()
 
 Page({
-  data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo'),
-    canIUseGetUserProfile: false,
-    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
-  },
-  // 事件处理函数
-  bindViewTap() {
-    wx.navigateTo({
-      url: '../logs/logs'
-    })
-  },
-  onLoad() {
-    if (wx.getUserProfile) {
-      this.setData({
-        canIUseGetUserProfile: true
-      })
-    }
-  },
-  getUserProfile(e) {
-    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
-    wx.getUserProfile({
-      desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
-      success: (res) => {
-        console.log(res)
+    data: {
+        swiperImgs: [
+            'https://img.zcool.cn/community/0124335d234357a801207640051686.jpg@1280w_1l_2o_100sh.jpg',
+            'https://img.zcool.cn/community/01bac95d233e81a80121376323538b.jpg@1280w_1l_2o_100sh.jpg',
+            'https://img.zcool.cn/community/01731a5d234357a801213763876d7f.jpg@1280w_1l_2o_100sh.jpg',
+            './images/1.png'
+        ],
+        show: true,
+
+    },
+    clickBtn(e) {
+        console.log(e);
+        if(this.data.show){
+            this.setData({
+                show: !this.data.show,
+                caiMing: '',
+                caiCount: '',
+                expire: '',
+                imagePath: '',
+            })
+        }
+    },
+    clickBtnDelete() { 
         this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
+            show: !this.data.show,
+            caiMing: '',
+            caiCount: '',
+            expire: '',
+            imagePath: '',
+        })
+    },
+    // 事件处理函数
+    bindViewTap() {
+        wx.navigateTo({
+            url: '../logs/logs'
         })
-      }
-    })
-  },
-  getUserInfo(e) {
-    // 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
-    console.log(e)
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
-  }
+    },
+    onLoad() {
+        if (wx.getUserProfile) {
+            this.setData({
+                canIUseGetUserProfile: true
+            })
+        }
+        wx.setNavigationBarTitle({ title: '外卖小程序' })
+    },
 })

+ 18 - 1
pages/index/index.json

@@ -1,3 +1,20 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "van-icon": "@vant/weapp/icon/index",
+    "van-search": "@vant/weapp/search/index",
+    "van-button": "@vant/weapp/button/index",
+    "van-tab": "@vant/weapp/tab/index",
+    "van-tabs": "@vant/weapp/tabs/index",
+    "van-cell": "@vant/weapp/cell/index",
+    "van-cell-group": "@vant/weapp/cell-group/index",
+    "van-divider": "@vant/weapp/divider/index",
+    "van-switch": "@vant/weapp/switch/index",
+    "van-checkbox": "@vant/weapp/checkbox/index",
+    "van-checkbox-group": "@vant/weapp/checkbox-group/index",
+    "van-submit-bar": "@vant/weapp/submit-bar/index",
+    "van-calendar": "@vant/weapp/calendar/index",
+    "van-uploader": "@vant/weapp/uploader/index",
+    "van-popup": "@vant/weapp/popup/index",
+    "van-overlay": "@vant/weapp/overlay/index"
+  }
 }

+ 126 - 22
pages/index/index.wxml

@@ -1,23 +1,127 @@
-<!--index.wxml-->
-<view class="container">
-  <view class="userinfo">
-    <block wx:if="{{canIUseOpenData}}">
-      <view class="userinfo-avatar" bindtap="bindViewTap">
-        <open-data type="userAvatarUrl"></open-data>
-      </view>
-      <open-data type="userNickName"></open-data>
-    </block>
-    <block wx:elif="{{!hasUserInfo}}">
-      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
-      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
-    </block>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-    </block>
-  </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
-  </view>
+<view class="FixButton" bindtap="clickBtn">
+    <view class="search-box" style="margin-bottom:20rpx">
+        <view class="search-top">
+            <input class="search-ipt" focus="true" placeholder="搜索用户手机号" type="text" value="{{value}}" bindinput="mobileInput" maxlength="11" type="number" placeholder-style="color:#b0b0b0" />
+            <!--  输入的时候显示  -->
+            <van-icon name="cross" size="{{showInput}}" custom-style="margin-top: 20rpx" bind:click="clear" />
+            <button class="search-btn" bindtap="Search">搜索</button>
+        </view>
+        <view style="margin: 4%;">
+            <view class="" hover-class="none" hover-stop-propagation="false">
+                <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="700" circular="true" previous-margin="36rpx" next-margin="36rpx" indicator-color="#999999" indicator-active-color="#ff8700">
+                    <swiper-item class="swiper-image" wx:for="{{ swiperImgs }}" wx:key="*this">
+                        <image src="{{ item }}" mode="widthFix" bindtap="getLunBoList" mode="aspectFit"></image>
+                    </swiper-item>
+                </swiper>
+            </view>
+        </view>
+    </view>
+    <view>
+        <view class="front-content" style="padding: 4%;">
+            <view>
+                <image class="img-1" src="./images/2.png" mode="" />
+            </view>
+            <view>
+                <view style="font-weight: 800;margin-bottom:20rpx; color: #000000;font-size:30rpx">
+                    二食堂二楼麻辣烫麻辣香锅...
+                </view>
+                <view style="font-size:25rpx;display: flex;">
+                    <view style="color: #b4b4b4;">
+                        起送
+                    </view>
+                    <view style="color: #ff9d38;">
+                        ¥15
+                    </view>
+                    <view style="color: #b4b4b4;  margin-left: 20rpx;">
+                        货到付款
+                    </view>
+                    <view style="color: #b4b4b4;  margin-left: 20rpx;">
+                        月售
+                    </view>
+                    <view style="color: #ff9d38;">
+                        231
+                    </view>
+                    <view class="time">
+                        30分钟
+                    </view>
+                </view>
+                <view class="discount">
+                    <van-icon name="balance-o" />
+                    积分抵扣有优惠
+                </view>
+            </view>
+        </view>
+        <view style="margin-bottom:20rpx">
+        </view>
+        <view class="front-content" style="padding: 4%;">
+            <view>
+                <image class="img-1" src="./images/3.png" mode="" />
+            </view>
+            <view>
+                <view style="font-weight: 800;margin-bottom:20rpx; color: #000000;font-size:30rpx">
+                    二食堂二楼麻辣烫麻辣香锅...
+                </view>
+                <view style="font-size:25rpx;display: flex;">
+                    <view style="color: #b4b4b4;">
+                        起送
+                    </view>
+                    <view style="color: #ff9d38;">
+                        ¥15
+                    </view>
+                    <view style="color: #b4b4b4;  margin-left: 20rpx;">
+                        货到付款
+                    </view>
+                    <view style="color: #b4b4b4;  margin-left: 20rpx;">
+                        月售
+                    </view>
+                    <view style="color: #ff9d38;">
+                        231
+                    </view>
+                    <view class="time">
+                        30分钟
+                    </view>
+                </view>
+                <view class="discount">
+                    <van-icon name="balance-o" />
+                    积分抵扣有优惠
+                </view>
+            </view>
+        </view>
+    </view>
 </view>
+
+
+  
+<view>
+    <!-- 弹出框 -->
+    <!-- hidden="{{show}}" -->
+    <view class="all-bottom"   hidden="{{show}}" >
+      
+    </view>
+
+
+    <view class="pop-up" hidden="{{show}}"  >
+        <view class="top">
+            <view style="color: #ffffff;text-align: center;margin-bottom:40rpx;font-family: Arial, Helvetica, sans-serif;">
+                信息完善
+            </view>
+            <view style="color:#c11b14;">
+                为校园人员使用,新用户请完善个人信息
+            </view>
+        </view>
+        <van-divider />
+        <view class="under">
+            <view>
+                完善信息
+            </view>
+
+        </view>
+        <!-- <van-icon name="clear" /> -->
+        <van-icon name="close" bindtap="clickBtnDelete"/>
+
+    </view>
+</view>
+
+
+
+<!-- <van-button type="primary">按钮</van-button> -->

+ 148 - 13
pages/index/index.wxss

@@ -1,19 +1,154 @@
-/**index.wxss**/
-.userinfo {
+page {
+  background: #f4f4f4;
+}
+
+.search-box {
+  padding-top: 10rpx;
+  padding-bottom: 10rpx;
+  width: 100%;
+  background-color: #ffffff;
+}
+
+.search-top {
+  width: 700rpx;
+  height: 80rpx;
+  border: 1px solid #e1e1e1;
+  border-radius: 50rpx;
+  margin: 3%;
+}
+
+.search-ipt {
+  width: 474rpx;
+  height: 80rpx;
+  border: none;
+  float: left;
+  font-size: 29rpx;
+  /* 去掉获取焦点的蓝边 */
+  outline: none;
+  /* text-indent: 20rpx; */
+  padding-left: 30rpx;
+}
+
+.search-btn {
+  border-radius: 50rpx;
+  width: 151rpx;
+  height: 80rpx;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
-  color: #aaa;
+  float: right;
+  background: #ff8e0b;
+  color: #fff;
+  font-size: 29rpx;
+}
+
+.front-content {
+  display: flex;
+  /* justify-content: space-between; */
+  /* color: #696969; */
+  width: 100%;
+  background-color: #fff;
+}
+
+.content-tittle {
+  font-weight: 800;
+
+}
+
+.img-1 {
+  /* margin-left: 15rpx; */
+  width: 200rpx;
+  height: 160rpx;
+  margin-right: 20rpx;
+}
+
+.time {
+  width: 100rpx;
+  height: 40rpx;
+  background: #ff8700;
+  font-size: 25rpx;
+  margin-left: 20rpx;
+  color: #fff;
+  text-align: center;
+  line-height: 40rpx;
+  border-radius: 8rpx;
 }
 
-.userinfo-avatar {
-  overflow: hidden;
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
+.discount {
+  width: 100%;
+  background-color: #ffe7cc;
+  color: #ff992a;
+  text-align: center;
+  margin-top: 15rpx;
+  font-size: 27rpx;
+  border-radius: 8rpx;
 }
 
-.usermotto {
-  margin-top: 200px;
-}
+
+.ert {
+  position: relative;
+}
+
+.btn {
+  position: absolute;
+  right: 40rpx;
+  top: 32rpx;
+}
+
+
+
+.top {
+  height: 350rpx;
+  padding: 12%;
+  box-sizing: border-box;
+  padding-top: 100rpx;
+}
+.under{
+text-align: center;
+line-height: 70rpx;
+color: #fdeff0;
+}
+.FixButton{       
+    /* position: fixed; */
+}
+.wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+
+  .all-bottom{ 
+    background-color: black; 
+    opacity: 0.5;
+    width: 100%; 
+    height: 1110rpx;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 11;
+  }
+  
+  .block {
+    width: 120px;
+    height: 120px;
+    background-color: #fff;
+  }
+
+
+
+
+  .pop-up {
+    width: 520rpx;
+    height: 500rpx;
+    /* background-color: #f47861; */
+    position: absolute;
+    text-align: center;
+    opacity: 100;
+    left: 120rpx;
+    top: 350rpx;
+    z-index: 12;
+    background: linear-gradient(#ff7e4c, #f62446);
+   
+  }

二进制
pages/my/images/icon-1.png


二进制
pages/my/images/icon-1@2x.png


二进制
pages/my/images/icon-2.png


二进制
pages/my/images/icon-2@2x.png


二进制
pages/my/images/icon-3.png


二进制
pages/my/images/icon-3@2x.png


二进制
pages/my/images/jifen.png


二进制
pages/my/images/jifen@2x.png


二进制
pages/my/images/矢量智能对象.png


二进制
pages/my/images/矢量智能对象@2x.png


二进制
pages/my/images/矢量智能对象@3x.png


+ 66 - 0
pages/my/my.js

@@ -0,0 +1,66 @@
+// pages/my/my.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+    wx.setNavigationBarTitle({ title: '我的' })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

+ 5 - 0
pages/my/my.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "van-button": "@vant/weapp/button/index"
+  }
+}

+ 107 - 0
pages/my/my.wxml

@@ -0,0 +1,107 @@
+<!--pages/my/my.wxml-->
+<view>
+  <view class="container-top">
+    <view class="home-top">
+      <view class="user">
+        <view class="img">
+          <image class="pic" src="./images/矢量智能对象.png" mode="widthFix" />
+        </view>
+        <view class="inline">
+          <!-- name -->
+          <view class="name">
+            昵称昵称bing
+          </view>
+          <!-- phone -->
+          <view class="phone">
+            152****159
+          </view>
+          <!-- jifen -->
+          <view class="jifen">
+            <view>
+              <image class="icon" src="./images/jifen@2x.png" mode="" />
+            </view>
+            <!--  number-->
+            <view class="number">
+              501
+            </view>
+          </view>
+
+        </view>
+        <button class="student" size="mini">学生认证</button>
+
+      </view>
+      <view>
+
+      </view>
+    </view>
+    <view class="home-bottom">
+      <view>
+        <view class="fang-down">
+          <view>
+            <view class="card">
+              民生银行社保卡
+            </view>
+            <view>
+              我是一个三代社保卡使用者
+            </view>
+          </view>
+          <view style="font-size: 33rpx;">
+            6250 *** **** 0299
+          </view>
+        </view>
+
+      </view>
+    </view>
+  </view>
+
+  <view class="container-top">
+    <!-- 上面 -->
+    <view class="order">
+      <!-- 我的订单 -->
+      <view class="order-left">
+        我的订单
+      </view>
+      <!-- 箭头 -->
+      <view class="order-right" >
+        >
+      </view>
+    </view>
+
+    <!-- 内容 -->
+    <view class="content">
+      <!-- 1 -->
+      <view class="content-one">
+        <view class="">
+          <image class="pic-one" src="./images/icon-1@2x.png" mode="" />
+        </view>
+        <view style="margin-left: 10rpx;">
+          待支付
+        </view>
+      </view>
+      <!-- 2 -->
+      <view class="content-one" >
+        <view class="">
+          <image class="pic-two" src="./images/icon-2@2x.png" mode="" />
+        </view>
+        <view style="margin-left: 10rpx;">
+          待送达
+        </view>
+      </view>
+      <!-- 3 -->
+      <view >
+        <view>
+          <image class="pic-three" src="./images/icon-3@2x.png" mode="" />
+        </view>
+        <view style="margin-left: 10rpx;">
+          已完成
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="container-top">
+    <view class="bottom-last" style="height: 140rpx;">
+      
+    </view>
+  </view>
+</view>

+ 152 - 0
pages/my/my.wxss

@@ -0,0 +1,152 @@
+/* pages/my/my.wxss */
+page {
+  background: #f4f4f4;
+}
+
+.container-top {
+  margin-top: 2%;
+  box-sizing: border-box;
+  padding: 3%;
+  /* background-color: brown; */
+  background: #ffffff;
+  margin-bottom: 20rpx;
+}
+
+.home-top {
+  /* width: 100%; */
+  background: #ffffff;
+  margin-bottom: 50rpx;
+}
+
+.user {
+  display: flex;
+}
+
+.pic {
+  margin-left: 15rpx;
+  width: 115rpx;
+  height: 115rpx;
+  margin-right: 15rpx;
+  border-radius: 7px;
+}
+
+.inline {
+  margin-right: 5rpx;
+}
+
+.name {
+  margin-bottom: 15rpx;
+  font-size: 30rpx;
+  color: #47524e;
+  font-weight: 600;
+}
+
+.phone {
+  font-size: 30rpx;
+  margin-bottom: 15rpx;
+  color: #47524e;
+  font-weight: 600;
+}
+
+.student {
+  background: #9fe3c6;
+  height: fit-content;
+  margin-left: 10rpx;
+  font-weight: 600;
+  /* color: #47524e; */
+}
+
+.icon {
+  /* margin-left: 15rpx; */
+  width: 40rpx;
+  height: 30rpx;
+  margin-right: 10rpx;
+  border-radius: 7px;
+}
+
+.jifen {
+  display: flex;
+}
+
+.number {
+  color: #ff8803;
+  font-weight: 600;
+  font-size: 30rpx;
+}
+
+/* down */
+.fang-down {
+  width: 100%;
+  height: 250rpx;
+  /* background-color: blue; */
+  border-radius: 0 0 100% 100%;
+  padding: 40rpx;
+  box-sizing: border-box;
+  background: linear-gradient(#ff7e4c, #f62446);
+  display: flex;
+  color: #feede9;
+  font-size: 28rpx;
+}
+
+.card {
+  margin-bottom: 10rpx;
+  font-size: 34rpx;
+  font-weight: bold;
+}
+
+.order {
+  margin-top: 10rpx;
+  margin-left: 20rpx;
+  display: flex;
+  justify-content: space-between;
+  /* color: #696969; */
+  height: 100rpx;
+  
+}
+
+.order-left {
+  /* color:#474747 ; */
+  font-size: 32rpx;
+  font-weight: 800;
+
+}
+
+.order-right {
+  color: #bfc2c5;
+  font-weight: 800;
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 50rpx;
+}
+
+.content-one {
+  margin-right: 100rpx;
+}
+
+.pic-one {
+  /* margin-left: 15rpx; */
+  width: 115rpx;
+  height: 115rpx;
+  /* margin-right: 15rpx; */
+  border-radius: 7px;
+}
+
+.pic-two {
+  /* margin-left: 15rpx; */
+  width: 115rpx;
+  height: 115rpx;
+  /* margin-right: 15rpx; */
+  border-radius: 7px;
+}
+
+.pic-three {
+  /* margin-left: 15rpx; */
+  width: 115rpx;
+  height: 115rpx;
+  /* margin-right: 15rpx; */
+  border-radius: 7px;
+}

+ 7 - 10
project.config.json

@@ -1,9 +1,5 @@
 {
   "description": "项目配置文件",
-  "packOptions": {
-    "ignore": [],
-    "include": []
-  },
   "setting": {
     "bundle": false,
     "userConfirmedBundleSwitch": false,
@@ -24,8 +20,6 @@
     "nodeModules": false,
     "enhance": true,
     "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": true,
     "showShadowRootInWxmlPanel": true,
     "packNpmManually": true,
     "enableEngineNative": false,
@@ -43,15 +37,18 @@
       "disablePlugins": [],
       "outputPath": ""
     },
-    "condition": false
+    "condition": false,
+    "ignoreUploadUnusedFiles": true
   },
   "compileType": "miniprogram",
-  "libVersion": "2.19.4",
-  "appid": "wx73ccfa4695855c95",
-  "projectname": "miniprogram-92",
   "condition": {},
   "editorSetting": {
     "tabIndent": "insertSpaces",
     "tabSize": 2
+  },
+  "appid": "wx3250676a894b2f9c",
+  "packOptions": {
+    "ignore": [],
+    "include": []
   }
 }

+ 21 - 1
project.private.config.json

@@ -4,5 +4,25 @@
   "setting": {
     "compileHotReLoad": true
   },
-  "libVersion": "2.31.0"
+  "libVersion": "2.31.0",
+  "condition": {
+    "miniprogram": {
+      "list": [
+        {
+          "name": "",
+          "pathName": "pages/index/index",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        },
+        {
+          "name": "",
+          "pathName": "pages/my/my",
+          "query": "",
+          "launchMode": "default",
+          "scene": null
+        }
+      ]
+    }
+  }
 }