六，用户界面

1.用户的图片展示：

   调云了微信的登录接口getUserInfo得到对应的用户头像和用户微信名，然后用高斯模糊和图形处理实现样式。

<!-- pages/user/index.wxml -->
<!-- 登录模块开始 -->
<view class="user_info_wrap">
  <view wx:if="{{userInfo.avatarUrl}}" class="user_img_wrap">
    <image class="user_bg" src="{{userInfo.avatarUrl}}"></image>
    <view class="user_info">
      <image class="user_icon" src="{{userInfo.avatarUrl}}"></image>
      <view class="user_name">{{userInfo.nickName}}</view>
    </view>
  </view>
  <view wx:else class="user_btn">
    <button type="primary" plain open-type="getUserInfo" bindtap="getUserProfile">登录</button>
  </view>
</view>
<!-- 登录模块结束 -->
<view class="user_content">
  <view class="user_main">
    <!-- 余额 -->
    <view class="money_wrap">
      <navigator>
        <!-- <image class="yue_img"></image> -->
        <view class="num">0.00</view>
        <view class="name">余额</view>
      </navigator>
     <navigator ><view class="num"bindtap="onFresh">刷新</view><view class="name">查看默认数据</view></navigator>
      <navigator>
        <!-- <image class="yue_img"></image> -->
        <view class="num">0.00</view>
        <view class="name">优惠券</view>
      </navigator>
    </view>
    <view class="other_item">
      <!-- <navigator class="item" bindtap="ShowNews">
        <text>订阅消息</text>
        <text class="iconfont icon-arrow-right"></text>
      </navigator> -->
      <!-- <navigator class="item" url="/pages/location/location">
        <text>我的地址: {{ne}}</text>
        <text class="iconfont icon-arrow-right"></text>

      </navigator> -->
      <van-cell  title="填写我的默认信息" required is-link bind:click="showPopup_Date"  class="item"/>
    <van-popup show="{{show_date}}" round position="bottom" custom-style="height:50%" bind:close="onClose_Date" position="bottom">
      <van-field center clearable label="姓名：" placeholder="请输入姓名" border="{{ false }}" use-button-slot bind:input="onName"></van-field>
      <van-field center clearable label="电话：" placeholder="请输入电话" border="{{ false }}" use-button-slot bind:input="onPhone"></van-field>
      <van-field center clearable label="地址：" placeholder="请输入地址" border="{{ false }}" use-button-slot bind:input="onAdddress"></van-field>
      <van-field> <van-button slot="button" type="primary" bindtap="onEmilp">确认</van-button></van-field>
    </van-popup>
    <view class="item">
     <!-- <navigator class="item"> -->
        <text>我的姓名: {{ne.nameMR}}</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>    
      <!-- </navigator> -->
      <!-- <navigator class="item"> -->
        <view class="item">
        <text>我的电话：{{ne.phoneMR}}</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>    
      <!-- </navigator> -->
      <!-- <navigator class="item"> -->
        <view class="item">
        <text>我的收件地址：{{ne.addressMR}}</text>
        <text class="iconfont icon-arrow-right"></text>
      </view>    
      <!-- </navigator> -->
      <navigator class="item" url="/pages/kefu/kefu">
        <text>联系客服：</text>
        <text class="iconfont icon-arrow-right"></text>
      </navigator>
    </view>
  </view>
</view>

page {
  background-color: #edece8;
}
.user_info_wrap {
  height: 45vh;
  overflow: hidden;
  // background-color: var(--themeColor);
  position: relative;
    border-bottom: 2px solid #efefef;}
  .user_img_wrap {
    background-color: beige;
      position: relative;}
    .user_bg {
      height: 50vh;
      width: 100%;
      // 高斯模糊
      filter: blur(10rpx);

    .user_info {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 20%;
      text-align: center;
      .user_icon {
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;

      .user_name {
        color: #fff;
        margin-top: 40rpx;
        font-size: 40rpx;
      }
    }
  }
}
.user_btn {
  margin-top: 150rpx;
}

.user_content {
  position: relative;
  .user_main {
    position: absolute;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
    top: -40rpx;

    .money_wrap {
      border-radius: 30rpx;
      background-color: #fff;
      display: flex;
      navigator {
        flex: 1;
        text-align: center;
        padding: 10rpx 0;
        // .yue_img {
        // }
        .num {
          color: var(--themeColor);
        }
        // .name {
        // }
      }
    }
    .other_item {
      margin-top: 30rpx;
      background-color: #fff;
      border-radius: 30rpx;
      .item {
        display: flex;
        padding: 20px;
        justify-content: space-between;
        border-bottom: 2px solid #efefef;
      }
    }
  }
}


page {
  background-color: #edece8;
}
.user_info_wrap {
  height: 45vh;
  overflow: hidden;
  position: relative;
  border-bottom: 2px solid #efefef;
}
.user_info_wrap .user_img_wrap {
  background-color: beige;
  position: relative;
}
.user_info_wrap .user_img_wrap .user_bg {
  height: 50vh;
  width: 100%;
  filter: blur(10rpx);
}
.user_info_wrap .user_img_wrap .user_info {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 20%;
  text-align: center;
}
.user_info_wrap .user_img_wrap .user_info .user_icon {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.user_info_wrap .user_img_wrap .user_info .user_name {
  color: #fff;
  margin-top: 40rpx;
  font-size: 40rpx;
}
.user_btn {
  margin-top: 150rpx;
  background-color: rgb(238, 234, 234);
}
.user_content {
  position: relative;
}
.user_content .user_main {
  position: absolute;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  top: -40rpx;
}
.user_content .user_main .money_wrap {
  border-radius: 30rpx;
  background-color: #fff;
  display: flex;
}
.user_content .user_main .money_wrap navigator {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
}
.user_content .user_main .money_wrap navigator .num {
  color: var(--themeColor);
}
.user_content .user_main .other_item {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 30rpx;
}
.user_content .user_main .other_item .item {
  display: flex;
  padding: 20px;
  justify-content: space-between;
  border-bottom: 2px solid #efefef;
}


// https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code
let phoneMR="无"
let addressMR="无"
let nameMR="无"
const DB= wx.cloud.database().collection('people_adress')
Page({
  data: {
    userInfo: {},
    location:"",
    ne:[]
  },
  //默认地址
  onAdddress(e){
    addressMR=e.detail
    return addressMR
  },
  //默认姓名
  onName(e){
    nameMR=e.detail
    return nameMR
  },
  //默认电话
  onPhone(e){
    phoneMR=e.detail
    return phoneMR
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
        console.log(this.data.userInfo._openid)
      }
    })
  },
  ShowNews() {
    wx.requestSubscribeDeviceMessage({
      tmplIds: ['Ra9IPhrQExQG9rPa8x3ahTk9-6zRh3Q0EdWT-X6L49Y'],
      success(res) {
        console.log(res)
      }
    })
  },
    /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this
    //得到openID
    wx.cloud.callFunction({
      name:'getopenid',
      success(res){
        that.setData({
          openid:res.result.openid
        })
        console.log("获取openid",res.result.openid)
      },fail(err){
        console.log("获取失败",err)
      }
    })

  },
   // 样式
   afterRead(event) {
    // const { file } = event.detail;
    // // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    // wx.uploadFile({
    //   url: '', // 仅为示例，非真实的接口地址
    //   filePath: file.url,
    //   name: 'file',
    //   formData: { user: 'test' },
    //   success(res) {
    //     // 上传完成需要更新 fileList
    //     const { fileList = [] } = this.data;
    //     fileList.push({ ...file, url: res.data });
    //     this.setData({ fileList });
    //   },
    // });
  },
    // 改变金额弹出层
    showPopup() {
      this.setData({show_change_money: true});
    },
    onClose() {
      this.setData({show_change_money: false});
    },
    onMoney(e){
      this.setData({
        to_money:e.detail
      })
    },

    showPopup_Date() {
      this.setData({show_date: true});
    },
    onClose_Date() {
      this.setData({show_date: false});
    },
    //测试非空
    onEmilp(){
      const DB= wx.cloud.database().collection('people_adress')
      if(phoneMR==""||addressMR==""||nameMR==""){
        wx.showModal({
          title: '提示',
          content: '请输入完整信息！', 
          success: function (res) {
          if (res.confirm) {
          console.log('用户点击确定') 
          }
          }
          }) 
      }else{
        //删除原来数据库中的地址
        var that = this;
     //得到openID
     wx.cloud.callFunction({
      name:'getopenid',
      success(res){
        that.setData({
          openid:res.result.openid
        })
        console.log("获取openid",res.result.openid)
           //查询数据
           DB.where({
            _openid:that.data.openid
          }).remove({
            success(res){
              console.log("删除成功")
            },fail(res){
              console.log("删除失败")
            }
          })
         //添加数据
         DB.add({
          data:{
            addressMR:addressMR,
            phoneMR:phoneMR,
            nameMR:nameMR
          }})
          wx.hideLoading(),
          wx.showToast({
           title: "上传成功",
          })
      },fail(err){
        console.log("获取失败",err)

      }
    })
      }
    },
    onFresh(e){
      let that = this
    const DB= wx.cloud.database()
    //查询数据
    DB.collection("people_adress").where({
      _openid:that.data.openid
    }). get({
      success:res=>{
        console.log(res.data[0])
        that.setData({
          ne:res.data[0],
        })
      },fail:err=>{
        console.log("无法得到数据")
      }
    })    
    }

})

2.默认地址：

运用了Van3中的van-popup、van-field组件，然后在得到对应得数据后更新默认地址。

在默认地址的数据库中，使用_openid修改数据，先找到原来的默认地址删除然后再添加新的默认地址。