1

app.json

@@ -1,7 +1,7 @@
 {
   "pages": [
-    "pages/home/home",
     "pages/login/login",
+    "pages/home/home",
     "pages/perssonal/perssonal",
     "pages/setting/setting",
     "pages/editPwd/editPwd",

pages/setting/setting.js

@@ -7,12 +7,50 @@ Page({
     canIUse: wx.canIUse('button.open-type.getUserInfo'),
     userInfo: {},
     hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
+    // 模板列表
+    templateList: [
+      {
+        name: '模板一',
+        url: '/pages/images/template/1.jpg'
+      },
+      {
+        name: '模板二',
+        url: '/pages/images/template/2.jpg'
+      },
+      {
+        name: '模板三',
+        url: '/pages/images/template/3.jpg'
+      },
+      {
+        name: '模板四',
+        url: '/pages/images/template/4.jpg'
+      },
+      {
+        name: '模板五',
+        url: '/pages/images/template/5.jpg'
+      },
+    ],
+    form: {
+      phone: '17319450324'
+    },
+    // 二维码
+    qrcodeUrl:'/pages/images/qrcode.jpg'
+  },
+  // 事件处理函数
+  imageChange: function (e) {
+    if (e) {
+      this.setData({ "form.template": this.data.templateList[e.detail.value].name })
+      this.setData({ "form.imgurl": this.data.templateList[e.detail.value].url })
+    } else {
+      this.setData({ "form.template": this.data.templateList[4].name })
+      this.setData({ "form.imgurl": this.data.templateList[4].url })
+    }
+    this.setData({ "form.imgIndex": e ? e.detail.value : 4 })
   },
-
   onLoad: function () {
+    // 模板默认选择
+    this.imageChange();
     if (app.globalData.userInfo) {
-
       this.setData({
         userInfo: app.globalData.userInfo,
         hasUserInfo: true

pages/setting/setting.wxml

@@ -1,13 +1,78 @@
 <view class="main">
   <view class="one">
-    设置账号
+    <view class="left">
+      推荐吗
+    </view>
+    <view class="right">
+      <picker class="picker" bindchange="imageChange" name="template" value="{{form.template}}" range="{{templateList}}"
+        range-key="{{'name'}}">
+        <view>{{form.template||'模板'}}
+          <van-icon name="arrow" />
+        </view>
+      </picker>
+    </view>
   </view>
   <view class="two">
-    <image src="{{userInfo.avatarUrl}}"></image>
-    <view>姓名：{{userInfo.nickName}}</view>
-    <view>性别：{{userInfo.gender=='1'?'男':'女'}}</view>
-    <view>国家：{{userInfo.country}}</view>
-    <view>省份：{{userInfo.province}}</view>
-    <view>城市：{{userInfo.city}}</view>
+    <image class="image" src="{{form.imgurl}}"></image>
+    <view class="userInfo">
+      <view class="temOne" wx:if="{{form.imgIndex==0}}">
+        <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
+        <view class="name">{{userInfo.nickName}}</view>
+        <view class="phone">NO.{{form.phone}}</view>
+        <image class="qrcode" src="{{qrcodeUrl}}"></image>
+      </view>
+      <view class="temTwo" wx:elif="{{form.imgIndex==1}}">
+        <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
+        <view>{{userInfo.nickName}}</view>
+        <view>NO.{{form.phone}}</view>
+        <image class="qrcode" src="{{qrcodeUrl}}"></image>
+      </view>
+      <view class="temThr" wx:elif="{{form.imgIndex==2}}">
+        <view class="temThrOne">
+          <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
+          <view>
+            <text>{{userInfo.nickName}}</text>
+            <text>NO.{{form.phone}}</text>
+          </view>
+        </view>
+        <view class="temThrTwo">
+          <image class="qrcode" src="{{qrcodeUrl}}"></image>
+        </view>
+      </view>
+      <view class="temFour" wx:elif="{{form.imgIndex==3}}">
+        <view class="temThrOne">
+          <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
+          <view>
+            <text>{{userInfo.nickName}}</text>
+            <text>NO.{{form.phone}}</text>
+          </view>
+        </view>
+        <view class="temThrTwo">
+          <image class="qrcode" src="{{qrcodeUrl}}"></image>
+        </view>
+      </view>
+      <view class="temFive" wx:elif="{{form.imgIndex==4}}">
+        <view>
+          <text>{{userInfo.nickName}}</text>
+        </view>
+        <view>
+          <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
+          <image class="qrcode" src="{{qrcodeUrl}}"></image>
+        </view>
+        <view>
+          <text>NO.{{form.phone}}</text>
+        </view>
+        <!-- <view>
+          <text>{{userInfo.nickName}}</text>
+        </view>
+        <view>
+          <image class="avatarUrl" src="{{userInfo.avatarUrl}}"></image>
+          <image class="qrcode" src="{{qrcodeUrl}}"></image>
+        </view>
+        <view>
+          <text>NO.{{form.phone}}</text>
+        </view> -->
+      </view>
+    </view>
   </view>
 </view>

pages/setting/setting.wxss

@@ -9,17 +9,300 @@
 .main .one {
   position: fixed;
   z-index: 9999;
-  width: 100%;
+  width: 95%;
   height: 80rpx;
   line-height: 80rpx;
   background-color: #409eff;
+  padding: 0 20rpx;
+}
+
+.main .one .left {
+  float: left;
+  width: 30%;
   color: #ffffff;
-  text-align: center;
+}
+
+.main .one .right {
+  float: right;
+  width: 70%;
+}
+
+.main .one .right {
+  text-align: right;
+  color: #fff;
+}
+
+.main .one .right .van-icon {
+  top: 6rpx;
+  color: #666;
 }
 
 .main .two {
-  position: absolute;
+  position: relative;
   top: 80rpx;
   width: 100%;
-  margin: 20rpx 0 0 0;
+  height: 93vh;
+  overflow: hidden;
+}
+
+.main .two .image {
+  float: left;
+  width: 100%;
+  height: 100%;
+}
+
+.main .two .userInfo {
+  float: left;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+}
+
+/* 模板一 */
+.temOne {
+  float: left;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom: 5px;
+  color: #ffffff;
+}
+
+.temOne .avatarUrl {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 90rpx;
+}
+
+.temOne view {
+  padding: 5rpx 0;
+}
+
+.temOne .qrcode {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+/* 模板二 */
+.temTwo {
+  float: left;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom: 5px;
+  color: #ffffff;
+}
+
+.temTwo .avatarUrl {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 90rpx;
+}
+
+.temTwo view {
+  padding: 5rpx 0;
+}
+
+.temTwo .qrcode {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+/* 模板三 */
+.temThr {
+  float: left;
+  width: 100%;
+}
+
+.temThr .temThrOne {
+  float: right;
+  width: 60%;
+  padding: 20rpx 0 0 0;
+}
+
+.temThr .temThrOne .avatarUrl {
+  float: left;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 90rpx;
+}
+
+.temThr .temThrOne view {
+  float: left;
+  width: 68%;
+  padding: 0 20rpx;
+}
+
+.temThr .temThrOne view text {
+  float: left;
+  width: 100%;
+  text-align: left;
+  font-size: 30rpx;
+  padding: 10rpx 0 0 0;
+  font-weight: bold;
+}
+
+.temThr .temThrTwo {
+  float: left;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  bottom: 5px;
+}
+
+.temThr .temThrTwo .qrcode {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+/* 模板四 */
+.temFour {
+  float: left;
+  width: 100%;
+}
+
+.temFour .temThrOne {
+  float: right;
+  width: 60%;
+  padding: 20rpx 0 0 0;
+}
+
+.temFour .temThrOne .avatarUrl {
+  float: left;
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 90rpx;
+}
+
+.temFour .temThrOne view {
+  float: left;
+  width: 68%;
+  padding: 0 20rpx;
+}
+
+.temFour .temThrOne view text {
+  float: left;
+  width: 100%;
+  text-align: left;
+  font-size: 30rpx;
+  padding: 10rpx 0 0 0;
+  font-weight: bold;
+}
+
+.temFour .temThrTwo {
+  float: left;
+  width: 100%;
+  text-align: right;
+  position: absolute;
+  bottom: 5px;
+  right: 40rpx;
+}
+
+.temFour .temThrTwo .qrcode {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.temFive view:nth-child(1) {
+  position: absolute;
+  width: 11%;
+  top: 25%;
+  text-align: center;
+}
+
+.temFive view:nth-child(1) text {
+  writing-mode: tb-rl;
+  color: #ffffff;
+  font-weight: bold;
+  letter-spacing: 10rpx;
+  font-weight: bold;
+}
+
+.temFive view:nth-child(2) {
+  position: absolute;
+  width: 68%;
+  top: 32%;
+  left: 16%;
+  text-align: center;
+}
+
+.temFive view:nth-child(2) image {
+  margin: 0 10rpx;
+}
+
+.temFive view:nth-child(2) .avatarUrl {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 90rpx;
+}
+
+.temFive view:nth-child(2) .qrcode {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.temFive view:nth-child(3) {
+  position: absolute;
+  right: 0;
+  top: 25%;
+  width: 11%;
+  text-align: center;
+
+}
+
+/* .temFive {
+  float: left;
+  width: 100%;
+}
+
+.temFive view {
+  float: left;
+}
+
+.temFive view:nth-child(1) {
+  width: 11%;
+  text-align: center;
+  padding: 300rpx 0 0 0;
+}
+
+.temFive view:nth-child(1) text {
+  writing-mode: tb-rl;
+  color: #ffffff;
+  font-weight: bold;
+  letter-spacing: 10rpx;
+  margin: 60rpx 0 0 0;
+  font-weight: bold;
+}
+
+.temFive view:nth-child(2) {
+  width: 78%;
+  text-align: center;
+  height: 250rpx;
+  position: absolute;
+  top: 31%;
+}
+
+.temFive view:nth-child(2) .avatarUrl {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 90rpx;
+}
+
+.temFive view:nth-child(2) .qrcode {
+  width: 200rpx;
+  height: 200rpx;
+}
+
+.temFive view:nth-child(3) {
+  width: 11%;
+  text-align: center;
+  padding: 45% 0 0 0;
+} */
+
+.temFive view:nth-child(3) text {
+  writing-mode: tb-rl;
+  text-orientation: upright;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 10rpx;
 }