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

Reviewed-on: #41
master
qiushanhe 10 months ago
commit f5c0df688c
  1. 473
      src/pages/me/help.vue

@ -1,304 +1,253 @@
<template> <template>
<view style="padding-bottom: 50px;background-color: #C5121B;"> <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 tip">邀请好友帮助你进行助力即可有机会领取奖品</view>
<view class="relative help_div"> <view class="relative help_div">
<!-- --> <!-- -->
<view v-if="type == 1" class="relative help_card"> <view v-if="type == 1" class="relative help_card">
<view class="relative help_tip"> <view class="relative help_tip">
还差{{diffNum}}位好友助力即可领取奖品: 还差{{diffNum}}位好友助力即可领取奖品:
</view> </view>
<view v-if="winnerInfo.awards != undefined" class="relative help_tip" style="font-size: 40rpx;"> <view v-if="winnerInfo.awards != undefined" class="relative help_tip" style="font-size: 40rpx;">
{{winnerInfo.awards}} {{winnerInfo.awards}}
</view> </view>
<view class="help_list"> <view class="p20">
<view v-for="item in helpUserList" class="help_item"> <u-grid :border="false" col="3">
<u-avatar class="help_item_avatar" :src="item.avatarUrl"></u-avatar> <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 class="help_item_2_yao"> <view v-else class="p10tb">
<image :src="item.avatarUrl"></image> <view class="avatar-text">
</view> --> <u-avatar bg-color="#fff" color="#ccc" size="120rpx" text="邀"></u-avatar>
</view> </view>
<view v-for="item in diffNum" class="help_item_2"> </view>
<view class="help_item_2_yao"></view> </u-grid-item>
</view> </u-grid>
</view> </view>
<view class="help_btn" > <view class="help_btn">
<button open-type="share" class="help_btn_font"> 邀请好友助力</button> <button open-type="share" class="help_btn_font"> 邀请好友助力</button>
</view> </view>
</view> </view>
<view v-if="type == 2" class="relative help_card"> <view v-if="type == 2" class="relative help_card">
<view class="relative help_list" style="top: 200rpx;"> <view class="relative help_list" style="top: 200rpx;">
<view v-if="winnerInfo.activityName != undefined" class="help_tip" style="font-size: 40rpx; margin: 25rpx 0rpx;"> <view v-if="winnerInfo?.activityName" class="help_tip"
{{winnerInfo.activityName}} style="font-size: 40rpx; margin: 25rpx 0rpx;">
</view> {{winnerInfo?.activityName}}
<view v-if="winnerInfo.schoolName != undefined" class="help_tip"> </view>
举办单位{{winnerInfo.schoolName}} <view v-if="winnerInfo.schoolName != undefined" class="help_tip">
</view> 举办单位{{winnerInfo.schoolName}}
<view v-if="winnerInfo.awards != undefined" class="help_tip" style="font-size: 45rpx;margin: 25rpx 0rpx;"> </view>
奖品{{winnerInfo.awards}} <view v-if="winnerInfo.awards != undefined" class="help_tip" style="font-size: 45rpx;margin: 25rpx 0rpx;">
</view> 奖品{{winnerInfo.awards}}
</view> </view>
</view>
<view class="help_btn" >
<button class="help_btn_font" open-type="chooseAvatar" @chooseavatar="handleHelp" :disabled="disBtn">帮好友助力</button> <view class="help_btn">
</view> <button class="help_btn_font" open-type="chooseAvatar" @chooseavatar="handleHelp"
</view> :disabled="disBtn">帮好友助力</button>
</view> </view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
import useUserStore from '@/jtools/store/user' 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 { export default {
data() { data() {
return { return {
winnerId: undefined, winnerId: undefined,
btnText: '点我刮奖', helpUserList: [],
showBtn: true, drawNum: 0,
helpUserList: [], phone: undefined,
drawNum: 0, type: 2,
diffNum: 3, winnerInfo: undefined,
phone: undefined, disBtn: false
type: 2,
winnerInfo: undefined,
disBtn: false
} }
}, },
onLoad(op) { onLoad(op) {
this.winnerId = op.id
this.winnerId = op.id
// this.type = op.type ? Number(op.type) : 1 // this.type = op.type ? Number(op.type) : 1
this.phone = useUserStore().userInfo?.phone || undefined this.phone = useUserStore().userInfo?.phone || undefined
console.log(this.phone) console.log(this.phone)
this.getWinnerInfo() this.getWinnerInfo()
this.getHelpInfo() this.getHelpInfo()
this.disBtn = false this.disBtn = false
}, },
onShareAppMessage(res) { onShareAppMessage(res) {
if (res.from === 'button') {// if (res.from === 'button') { //
console.log(res.target) console.log(res.target)
} }
return { return {
title: '我正在参与领奖活动柜,请帮我助力', title: '我正在参与领奖活动柜,请帮我助力',
path: '/pages/me/help?id='+this.winnerId + '&type=2' path: '/pages/me/help?id=' + this.winnerId + '&type=2'
} }
}, },
methods: { methods: {
// //
getWinnerInfo(){ getWinnerInfo() {
// uni.request({ queryWinnerInfo({
// url: 'http://192.168.1.6:8089/applet/activity/winner/info?winnerId='+this.winnerId winnerId: this.winnerId
// }).then(resp => { }).then(resp => {
// if(resp.data.code == 200) { if (resp.code == 200) {
// console.log(resp) console.log(resp)
// this.winnerInfo = resp.data.data; this.winnerInfo = resp.data;
// if(this.phone && this.winnerInfo.phone == this.phone){ if (this.phone && this.winnerInfo.phone == this.phone) {
// this.type == 1 this.type = 1
// } } else {
// } this.type = 2
// }) }
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 getHelpInfo() {
} else { queryHelpInfo({
this.type = 2 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
getHelpInfo(){ }));
// uni.request({ this.diffNum = (this.drawNum - list.length) < 0 ? 0 : (this.drawNum - list.length);
// url: 'http://192.168.1.6:8089/applet/activity/help/info?winnerId='+this.winnerId const arr = new Array(this.diffNum).fill({})
// }).then(resp => { this.helpUserList = [...list,...arr]
// 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); handleHelp(e) {
// console.log(this.drawNum) this.disBtn = false
// console.log(this.diffNum) uni.login({
// } provider: 'weixin', //使
// }) success: (loginRes) => {
queryHelpInfo({winnerId : this.winnerId}).then(resp => { console.log(loginRes);
if(resp.code == 200){ uni.uploadFile({
console.log(resp) url: 'https://jwl.ahduima.com/activity/applet/activity/help/save',
this.drawNum = resp.data.helpNum; // url: 'http://192.168.1.6:8089/applet/activity/help/save',
this.helpUserList = resp.data.helpUsers.map(item => ({ filePath: e.detail.avatarUrl,
...item, name: 'file',
avatarUrl: 'https://jwl.ahduima.com' + item.avatarUrl formData: {
})); 'code': loginRes.code,
this.diffNum = (this.drawNum - this.helpUserList.length) < 0 ? 0 : (this.drawNum - this.helpUserList.length); 'winnerId': this.winnerId,
} },
}) success: (uploadFileRes) => {
}, console.log(uploadFileRes.data);
// let resp = JSON.parse(uploadFileRes.data);
handleHelp(e){ console.log(resp);
this.disBtn = false
console.log(e) if (resp.code == 200) {
uni.login({ uni.showToast({
provider: 'weixin', //使 icon: 'none',
success: (loginRes) => { title: `助力成功`
console.log(loginRes); })
uni.uploadFile({ this.disBtn = true
url: 'https://jwl.ahduima.com/activity/applet/activity/help/save', } else {
// url: 'http://192.168.1.6:8089/applet/activity/help/save', uni.showToast({
filePath: e.detail.avatarUrl, icon: 'error',
name: 'file', title: resp.msg
formData: { })
'code': loginRes.code, this.disBtn = true
'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> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.img{ .img {
top: -130rpx !important; top: -130rpx !important;
} }
.tip { .tip {
height: 75px; height: 75px;
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
color: #FEFEFE; color: #FEFEFE;
line-height: 48px; line-height: 48px;
top: -520rpx; top: -520rpx;
text-align: center; text-align: center;
font-size: 35rpx; 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;
.avatar-text {
border-radius: 50%;
border: 1px dashed #ccc;
}
.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_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{ .help_btn {
font-size: 32rpx; text-align: center;
font-family: PingFang SC; margin: 0 75rpx;
font-weight: 400; margin-bottom: 30rpx;
color: #FFFFFF; width: 500rpx;
line-height: 86rpx; height: 86rpx;
background: center; 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;
}
}
}
} }

Loading…
Cancel
Save