Merge pull request '样式调整' (#41) from dev-qsh into master

Reviewed-on: http://114.55.169.15:3000/huxiaofeng666/jwl-applet/pulls/41

src/pages/me/help.vue

@@ -1,305 +1,254 @@
 <template>
   <view style="padding-bottom: 50px;background-color: #C5121B;">
-    <image class="wp100 img" mode="widthFix" src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E5%8A%A9%E5%8A%9B%E4%B8%BB%E5%9B%BE.jpg"></image>
+    <image class="wp100 img" mode="widthFix"
+      src="https://oss-bq.ahduima.com/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87/%E5%8A%A9%E5%8A%9B%E4%B8%BB%E5%9B%BE.jpg">
+    </image>
     <view class="relative tip">邀请好友帮助你进行助力即可有机会领取奖品</view>
     <view class="relative help_div">
-		<!--  -->
-		<view v-if="type == 1" class="relative help_card">
-			<view class="relative help_tip">
-				还差{{diffNum}}位好友助力即可领取奖品: 
-			</view>
-			<view v-if="winnerInfo.awards != undefined" class="relative help_tip" style="font-size: 40rpx;">
-				{{winnerInfo.awards}}
-			</view>
-			<view class="help_list">
-				<view v-for="item in helpUserList" class="help_item">
-					<u-avatar class="help_item_avatar" :src="item.avatarUrl"></u-avatar>
-					
-					<!-- <view class="help_item_2_yao">
-						<image :src="item.avatarUrl"></image>
-					</view> -->
-				</view>
-				<view v-for="item in diffNum" class="help_item_2">
-					<view class="help_item_2_yao">邀</view>
-				</view>
-			</view>
-			<view class="help_btn" >
-				<button open-type="share"  class="help_btn_font"> 邀请好友助力</button>
-			</view>
-		</view>
-		
-		<view v-if="type == 2" class="relative help_card">
-			<view class="relative help_list" style="top: 200rpx;">
-				<view v-if="winnerInfo.activityName  != undefined" class="help_tip" style="font-size: 40rpx; margin: 25rpx 0rpx;">
-					{{winnerInfo.activityName}}
-				</view>
-				<view v-if="winnerInfo.schoolName != undefined" class="help_tip">
-					举办单位：{{winnerInfo.schoolName}}
-				</view>
-				<view v-if="winnerInfo.awards != undefined" class="help_tip" style="font-size: 45rpx;margin: 25rpx 0rpx;">
-					奖品：{{winnerInfo.awards}}
-				</view>
-			</view>
-		
-			<view class="help_btn" >
-				<button class="help_btn_font" open-type="chooseAvatar" @chooseavatar="handleHelp" :disabled="disBtn">帮好友助力</button>
-			</view>
-		</view>
-     </view>
+      <!--  -->
+      <view v-if="type == 1" class="relative help_card">
+        <view class="relative help_tip">
+          还差{{diffNum}}位好友助力即可领取奖品:
+        </view>
+        <view v-if="winnerInfo.awards != undefined" class="relative help_tip" style="font-size: 40rpx;">
+          {{winnerInfo.awards}}
+        </view>
+        <view class="p20">
+          <u-grid :border="false" col="3">
+            <u-grid-item v-for="(item, index) in helpUserList" :key="index">
+              <u-avatar v-if="item.id" class="p10tb border" size="120rpx" :src="item.avatarUrl"></u-avatar>
+              <view v-else class="p10tb">
+                <view class="avatar-text">
+                  <u-avatar bg-color="#fff" color="#ccc" size="120rpx" text="邀"></u-avatar>
+                </view>
+              </view>
+            </u-grid-item>
+          </u-grid>
+        </view>
+        <view class="help_btn">
+          <button open-type="share" class="help_btn_font"> 邀请好友助力</button>
+        </view>
+      </view>
+
+      <view v-if="type == 2" class="relative help_card">
+        <view class="relative help_list" style="top: 200rpx;">
+          <view v-if="winnerInfo?.activityName" class="help_tip"
+            style="font-size: 40rpx; margin: 25rpx 0rpx;">
+            {{winnerInfo?.activityName}}
+          </view>
+          <view v-if="winnerInfo.schoolName != undefined" class="help_tip">
+            举办单位：{{winnerInfo.schoolName}}
+          </view>
+          <view v-if="winnerInfo.awards != undefined" class="help_tip" style="font-size: 45rpx;margin: 25rpx 0rpx;">
+            奖品：{{winnerInfo.awards}}
+          </view>
+        </view>
+
+        <view class="help_btn">
+          <button class="help_btn_font" open-type="chooseAvatar" @chooseavatar="handleHelp"
+            :disabled="disBtn">帮好友助力</button>
+        </view>
+      </view>
+    </view>
   </view>
 </template>
 
 <script>
   import useUserStore from '@/jtools/store/user'
-  import { queryActivityDetail,queryHelpInfo, saveHelpInfo, queryWinnerInfo } from '@/jtools/api/activity'
+  import {
+    queryActivityDetail,
+    queryHelpInfo,
+    saveHelpInfo,
+    queryWinnerInfo
+  } from '@/jtools/api/activity'
   export default {
     data() {
       return {
-		winnerId: undefined,
-        btnText: '点我刮奖',
-        showBtn: true,
-		helpUserList: [],
-		drawNum: 0,
-		diffNum: 3,
-		phone: undefined,
-		type: 2,
-		winnerInfo: undefined,
-		disBtn: false
+        winnerId: undefined,
+        helpUserList: [],
+        drawNum: 0,
+        phone: undefined,
+        type: 2,
+        winnerInfo: undefined,
+        disBtn: false
       }
     },
     onLoad(op) {
-	
-	  this.winnerId = op.id
+      this.winnerId = op.id
       // this.type = op.type ? Number(op.type) : 1
-	  this.phone = useUserStore().userInfo?.phone || undefined
-	  console.log(this.phone)
-	  this.getWinnerInfo()
-	  this.getHelpInfo()
-	  this.disBtn = false
-  
+      this.phone = useUserStore().userInfo?.phone || undefined
+      console.log(this.phone)
+      this.getWinnerInfo()
+      this.getHelpInfo()
+      this.disBtn = false
+
     },
-	onShareAppMessage(res) {
-	    if (res.from === 'button') {// 来自页面内分享按钮
-	      console.log(res.target)
-	    }
-	    return {
-	      title: '我正在参与领奖活动柜，请帮我助力',
-	      path: '/pages/me/help?id='+this.winnerId + '&type=2'
-	    }
-	  },
-	  
+    onShareAppMessage(res) {
+      if (res.from === 'button') { // 来自页面内分享按钮
+        console.log(res.target)
+      }
+      return {
+        title: '我正在参与领奖活动柜，请帮我助力',
+        path: '/pages/me/help?id=' + this.winnerId + '&type=2'
+      }
+    },
+
     methods: {
-		//查询中奖信息
-		getWinnerInfo(){
-			// uni.request({
-			//   url: 'http://192.168.1.6:8089/applet/activity/winner/info?winnerId='+this.winnerId
-			// }).then(resp => {
-			//   if(resp.data.code == 200) {
-			//    console.log(resp)
-			//    this.winnerInfo = resp.data.data;
-			//    if(this.phone && this.winnerInfo.phone == this.phone){
-			// 	   this.type == 1
-			//    }
-			//   }
-			// })
-			queryWinnerInfo({winnerId : this.winnerId}).then(resp => {
-				if(resp.code == 200){
-					console.log(resp)
-					this.winnerInfo = resp.data;
-					if(this.phone && this.winnerInfo.phone == this.phone){
-						this.type = 1
-					} else {
-						this.type = 2
-					}
-				}
-			})
-			
-		},
-		//查询助力信息
-		getHelpInfo(){
-			// uni.request({
-			//   url: 'http://192.168.1.6:8089/applet/activity/help/info?winnerId='+this.winnerId
-			// }).then(resp => {
-			//   if(resp.data.code == 200) {
-			//    console.log(resp)
-			//    this.drawNum = resp.data.data.helpNum;
-			//    this.helpUserList = resp.data.data.helpUsers
-			//    this.diffNum = (this.drawNum -  this.helpUserList.length) < 0 ? 0 : (this.drawNum -  this.helpUserList.length);
-			//    console.log(this.drawNum)
-			//    console.log(this.diffNum)
-			//   }
-			// })
-			queryHelpInfo({winnerId : this.winnerId}).then(resp => {
-				if(resp.code == 200){
-					console.log(resp)
-					this.drawNum = resp.data.helpNum;
-					this.helpUserList = resp.data.helpUsers.map(item => ({
-					  ...item,
-					  avatarUrl: 'https://jwl.ahduima.com' + item.avatarUrl
-					}));
-					this.diffNum = (this.drawNum -  this.helpUserList.length) < 0 ? 0 : (this.drawNum -  this.helpUserList.length);
-				}
-			})
-		},
-		//点击助力
-		handleHelp(e){
-			this.disBtn = false
-			console.log(e)
-			uni.login({
-			  provider: 'weixin', //使用微信登录
-			  success:  (loginRes) => {
-				  console.log(loginRes);
-				  uni.uploadFile({
-						url: 'https://jwl.ahduima.com/activity/applet/activity/help/save',
-						 // url: 'http://192.168.1.6:8089/applet/activity/help/save',
-						filePath: e.detail.avatarUrl,
-						name: 'file',
-						formData: {
-							'code': loginRes.code,
-							'winnerId': this.winnerId,
-						},
-						success: (uploadFileRes) => {
-							console.log(uploadFileRes.data);
-						    let resp = JSON.parse(uploadFileRes.data);
-							console.log(resp);
-							
-							if(resp.code == 200){
-								uni.showToast({
-								  icon: 'none',
-								  title: `助力成功`
-								})
-								this.disBtn = true
-							} else {
-								uni.showToast({
-								  icon: 'error',
-								  title: resp.msg
-								})
-								this.disBtn = true
-							}
-						}
-				   });
-				
-			  }
-			});
-		},
-		
+      //查询中奖信息
+      getWinnerInfo() {
+        queryWinnerInfo({
+          winnerId: this.winnerId
+        }).then(resp => {
+          if (resp.code == 200) {
+            console.log(resp)
+            this.winnerInfo = resp.data;
+            if (this.phone && this.winnerInfo.phone == this.phone) {
+              this.type = 1
+            } else {
+              this.type = 2
+            }
+          }
+        })
+
+      },
+      //查询助力信息
+      getHelpInfo() {
+        queryHelpInfo({
+          winnerId: this.winnerId
+        }).then(resp => {
+          if (resp.code == 200) {
+            this.drawNum = resp.data.helpNum;
+            const list = resp.data.helpUsers.map(item => ({
+              ...item,
+              avatarUrl: 'https://jwl.ahduima.com' + item.avatarUrl
+            }));
+            this.diffNum = (this.drawNum - list.length) < 0 ? 0 : (this.drawNum - list.length);
+            const arr = new Array(this.diffNum).fill({})
+            this.helpUserList = [...list,...arr]
+          }
+        })
+      },
+      //点击助力
+      handleHelp(e) {
+        this.disBtn = false
+        uni.login({
+          provider: 'weixin', //使用微信登录
+          success: (loginRes) => {
+            console.log(loginRes);
+            uni.uploadFile({
+              url: 'https://jwl.ahduima.com/activity/applet/activity/help/save',
+              // url: 'http://192.168.1.6:8089/applet/activity/help/save',
+              filePath: e.detail.avatarUrl,
+              name: 'file',
+              formData: {
+                'code': loginRes.code,
+                'winnerId': this.winnerId,
+              },
+              success: (uploadFileRes) => {
+                console.log(uploadFileRes.data);
+                let resp = JSON.parse(uploadFileRes.data);
+                console.log(resp);
+
+                if (resp.code == 200) {
+                  uni.showToast({
+                    icon: 'none',
+                    title: `助力成功`
+                  })
+                  this.disBtn = true
+                } else {
+                  uni.showToast({
+                    icon: 'error',
+                    title: resp.msg
+                  })
+                  this.disBtn = true
+                }
+              }
+            });
+
+          }
+        });
+      },
+
     },
   }
 </script>
 
 <style scoped lang="scss">
-	.img{
-		  top: -130rpx !important;
-	}
+  .img {
+    top: -130rpx !important;
+  }
+
   .tip {
     height: 75px;
     font-family: PingFang SC;
     font-weight: 400;
     color: #FEFEFE;
     line-height: 48px;
-	top: -520rpx;
-	text-align: center;
-	font-size: 35rpx;
+    top: -520rpx;
+    text-align: center;
+    font-size: 35rpx;
   }
-  .help_div{
-	  width: 710rpx;
-	  height: 996rpx;
-	  top: -560rpx;
-	  margin-left: 20rpx;
-	  margin-right: 20rpx;
-	  background: linear-gradient(0deg, #F33D2F 100%, rgba(197,18,27,0.01) 0%);
-	  border-radius: 40rpx;
-	  
-	  
-	  .help_card{
-		 width: 630rpx;
-		 height: 886rpx;
-		 margin: 0rpx 39rpx;
-		 top: 55rpx;
-		 background: #FFFFFF;
-		 border-radius: 24rpx;
-		  
-		  .help_tip{
-			text-align: center;
-			font-size: 32rpx;
-			font-family: PingFang SC;
-			font-weight: 400;
-			color: #010101;
-			line-height: 55rpx;
-			top: 15rpx;
-		  }
-		  
-		  .help_list{
-			  margin: 68rpx 25rpx 25rpx 20rpx;
-			  height: 580rpx;
-			  
-			  .help_item{
-				  display: inline-block;
-				  padding: 35rpx;
-				  width: 194rpx;
-				  height: 194rpx;
-				 
-				  border-radius: 50%;
-				  
-				  .help_item_avatar{
-					  margin: auto;
-					  width: 56rpx;
-					  height: 56rpx;
-					  color: #CCCCCC;
-					  background: #C42E13;
-					  border: 4px solid #C42E13;
-					  
-					  image{
-						  height: 45px;
-						  width: 45px;
-					  }
-				  }
-			  }
-			  
-			  .help_item_2{
-				  display: inline-block;
-				  margin: 35rpx;
-				  width: 124rpx;
-				  height: 124rpx;
-				  border: 2px dotted #CCCCCC;
-				  border-radius: 50%;
-				  
-				  .help_item_2_yao{
-					  margin: 34rpx 33rpx;
-					  width: 56rpx;
-					  height: 56rpx;
-					  font-size: 60rpx;
-					  font-family: PingFang SC;
-					  font-weight: 400;
-					  color: #CCCCCC;
-					  line-height: 48rpx;
-				  }
-				 
-			  }
-			  
-			  
-		  }
-		  
-		  .help_btn{
-			  text-align: center;
-			  margin: 0 75rpx;
-			  margin-bottom: 30rpx;
-			  width: 500rpx;
-			  height: 86rpx;
-			  background: linear-gradient(0deg, #DE4224 0%, #B81706 100%);
-			  border-radius: 43rpx;
-			  
-			  .help_btn_font{
-				  font-size: 32rpx;
-				  font-family: PingFang SC;
-				  font-weight: 400;
-				  color: #FFFFFF;
-				  line-height: 86rpx;
-				  background: center;
-			  }
-		  }
-	  }
-	  
-	  
+  
+  .avatar-text {
+    border-radius: 50%;
+    border: 1px dashed #ccc;
+  }
+  
+ 
+  .help_div {
+    width: 710rpx;
+    height: 996rpx;
+    top: -560rpx;
+    margin-left: 20rpx;
+    margin-right: 20rpx;
+    background: linear-gradient(0deg, #F33D2F 100%, rgba(197, 18, 27, 0.01) 0%);
+    border-radius: 40rpx;
+
+
+    .help_card {
+      width: 630rpx;
+      height: 886rpx;
+      margin: 0rpx 39rpx;
+      top: 55rpx;
+      background: #FFFFFF;
+      border-radius: 24rpx;
+
+      .help_tip {
+        text-align: center;
+        font-size: 32rpx;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #010101;
+        line-height: 55rpx;
+        top: 15rpx;
+      }
+
+      .help_list {
+        margin: 68rpx 25rpx 25rpx 20rpx;
+        height: 580rpx;
+        
+      }
+
+      .help_btn {
+        text-align: center;
+        margin: 0 75rpx;
+        margin-bottom: 30rpx;
+        width: 500rpx;
+        height: 86rpx;
+        background: linear-gradient(0deg, #DE4224 0%, #B81706 100%);
+        border-radius: 43rpx;
+
+        .help_btn_font {
+          font-size: 32rpx;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #FFFFFF;
+          line-height: 86rpx;
+          background: center;
+        }
+      }
+    }
+
+
   }
 </style>