You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
470 lines
11 KiB
470 lines
11 KiB
<template>
|
|
<view class="main">
|
|
<!-- nav -->
|
|
<navigation :bgTransparent=true>{{ i18n.CharityDetails }}</navigation>
|
|
<view class="body">
|
|
<view class="titleBody">
|
|
<!-- 海报 -->
|
|
<u--image class="img" :showLoading="true" :src="baseURL+imgDetail" width="750rpx"
|
|
height="762rpx"></u--image>
|
|
<!-- 文章标题 -->
|
|
<view class="title">{{detail.charityDetails.title}}</view>
|
|
</view>
|
|
|
|
<view class="contentBody">
|
|
<view class="about">{{ i18n.About }}</view>
|
|
<!-- 文字内容 -->
|
|
<view class="content" v-html="detail.charityDetails.content"></view>
|
|
<!-- 捐赠详情 -->
|
|
<view class="Participants">
|
|
<view class="title">{{ i18n.Participants }}</view>
|
|
<!-- 进度条 -->
|
|
<u-line-progress class="progressbar" :showText="false" :percentage="detail.charityDetails.percentage" activeColor="#00E8A2"
|
|
height="32rpx">
|
|
</u-line-progress>
|
|
<!-- 百分比 -->
|
|
<view class="progress">{{detail.charityDetails.percentage}}%</view>
|
|
<!-- 捐赠用户头像 -->
|
|
<view class="userIconList">
|
|
<u--image v-for="(item, index) in detail.headerImgList" :key="index" class="userIcon" :showLoading="true"
|
|
:src="baseURL+item.headImgPath" width="64rpx" height="64rpx"></u--image>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="DonatePopupShow = true" :disabled="detail.charityDetails.status!='open'">
|
|
{{detail.charityDetails.status!='open'?i18n.Closeddonation:i18n.DonateNow}}
|
|
</u-button>
|
|
|
|
<!-- DonateNow按钮通知弹出层 -->
|
|
<u-popup class="DonatePopup" :show="DonatePopupShow" round="40rpx" mode="bottom"
|
|
@close="DonatePopupShow = false" @open="DonatePopupShow = true" bgColor="#211F32">
|
|
<view class="content">
|
|
<view class="close" @click="DonatePopupShow = false"></view>
|
|
<u--form class="form" :model="coinInfo" :rules="rules" ref="form1" errorType="toast">
|
|
<!-- coin选择框 -->
|
|
<u-form-item class="input-item" prop="coinCode" ref="item1">
|
|
<u-input class="input" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.PleaseChooseCoin" v-model="coinInfo.coinCode" :disabled="true">
|
|
</u-input>
|
|
<view class="selectCoinBtn" @click="USDTPopupShow = true">{{coinInfo.coinCode}}
|
|
</view>
|
|
</u-form-item>
|
|
<view class="Available">{{ i18n.AvailableBlance }}:{{detail.userCapital}}{{" "}}{{detail.coins[0].enname}}</view>
|
|
<!-- 数量 -->
|
|
<u-form-item class="input-item" prop="amount" ref="item1">
|
|
<u-input class="input" v-model="coinInfo.amount" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.Quantity">
|
|
</u-input>
|
|
</u-form-item>
|
|
<!-- 密码 -->
|
|
<u-form-item class="input-item" prop="payPassword" ref="item1">
|
|
<u-input class="input" v-model="coinInfo.payPassword" type="password" color="#fff" fontSize="32rpx"
|
|
border="none" :placeholder="i18n.WithdrawalPassword">
|
|
</u-input>
|
|
</u-form-item>
|
|
|
|
</u--form>
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" :disabled="DonatePopupDisabled"
|
|
@click="donate" :throttleTime="500">{{ i18n.DonateNow }}
|
|
</u-button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
<!-- USDT按钮通知弹出层 -->
|
|
|
|
<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom"
|
|
@close="USDTPopupShow = false" @open="USDTPopupShow = true" bgColor="#211F32">
|
|
<view class="content">
|
|
<view class="close" @click="USDTPopupShow = false"></view>
|
|
<scroll-view scroll-y="true" style="height: 580rpx;" scroll-with-animation="true"
|
|
@touchmove.stop.prevent="">
|
|
<radio-group class="radioGroup" v-model="radioValue">
|
|
<label class="checkBox" v-for="(item, index) in detail.coins" :key="index" @click="radioChange(item)">
|
|
<view class="icon">
|
|
<u-icon :name="baseURL+'/coins/'+item.enname+'.png'" size="52rpx" width="52rpx"></u-icon>
|
|
</view>
|
|
<view class="iconName">
|
|
<view class="top">{{item.enname}}</view>
|
|
<view class="bottom">{{item.useCapital}}{{" "}}{{item.code}}</view>
|
|
</view>
|
|
<radio color="#00E8A2" shape="square" :checked="coinInfo.coinCode==item.enname"></radio>
|
|
</label>
|
|
|
|
</radio-group>
|
|
</scroll-view>
|
|
|
|
<u-button class="button" color="#00E8A2" throttleTime="500" @click="USDTPopupShow = false">OK
|
|
</u-button>
|
|
</view>
|
|
</u-popup>
|
|
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import UButton from '../../uview-ui/components/u-button/u-button'
|
|
import api from '@/utils/api'
|
|
import constant from '@/utils/constant.js';
|
|
import md5 from 'js-md5'
|
|
export default {
|
|
name: "charityDetails",
|
|
data() {
|
|
return {
|
|
imgDetail:'',
|
|
id:'',
|
|
baseURL:'',
|
|
DonatePopupShow: false,
|
|
USDTPopupShow: false,
|
|
coinInfo: {
|
|
amount:null,
|
|
coinCode:null,
|
|
payPassword:null,
|
|
},
|
|
rules: {
|
|
|
|
},
|
|
radioValue: '',
|
|
detail:{
|
|
charityDetails:{
|
|
img:null,
|
|
},
|
|
coins:[{}],
|
|
},
|
|
};
|
|
},
|
|
computed: {
|
|
i18n() {
|
|
return this.$t("charity");
|
|
},
|
|
DonatePopupDisabled() {
|
|
if (this.coinInfo.amount && this.coinInfo.coinCode && this.coinInfo.payPassword) {
|
|
return false
|
|
} else {
|
|
return true
|
|
}
|
|
}
|
|
},
|
|
onLoad(res) {
|
|
this.baseURL = constant.BASE_URL
|
|
this.id=res.id
|
|
this.getDetail(this.id)
|
|
// console.log(this.$t('login.emailInputMessage'));
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
// 捐赠
|
|
donate() {
|
|
if(this.coinInfo.amount>this.detail.userCapital){
|
|
uni.$u.toast(this.$t("login").Insufficient)
|
|
return;
|
|
}
|
|
let coinInfo = {
|
|
charityId:this.detail.charityDetails.id,
|
|
amount:this.coinInfo.amount,
|
|
coinCode:this.coinInfo.coinCode2,
|
|
payPassword:md5(this.coinInfo.payPassword),
|
|
}
|
|
api.charitySubmit(coinInfo).then(res => {
|
|
uni.$u.toast(this.$t("login").Donationsucceeded)
|
|
setTimeout(()=>{
|
|
this.getDetail(this.id)
|
|
this.coinInfo.amount=null
|
|
this.coinInfo.payPassword=null
|
|
this.DonatePopupShow = false
|
|
},600)
|
|
|
|
})
|
|
|
|
},
|
|
radioChange(e) {
|
|
this.coinInfo.coinCode=e.enname
|
|
this.coinInfo.coinCode2=e.code
|
|
},
|
|
getDetail(id) {
|
|
api.showCharityDetails({
|
|
charityId:id
|
|
}).then(res => {
|
|
this.detail=res;
|
|
|
|
this.imgDetail=res.charityDetails.img
|
|
|
|
this.coinInfo.coinCode=this.detail.coins[0].enname
|
|
this.coinInfo.coinCode2=this.detail.coins[0].code
|
|
})
|
|
},
|
|
},
|
|
components: {
|
|
UButton
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/ .u-input{
|
|
background: #323045 !important;
|
|
}
|
|
.main {
|
|
|
|
.body {
|
|
overflow: hidden;
|
|
|
|
.titleBody {
|
|
position: relative;
|
|
height: 762rpx;
|
|
|
|
.title {
|
|
position: absolute;
|
|
bottom: 48rpx;
|
|
font-size: 40rpx;
|
|
font-weight: 800;
|
|
z-index: 20;
|
|
margin: 0 48rpx;
|
|
}
|
|
}
|
|
|
|
.contentBody {
|
|
padding: 0 48rpx;
|
|
|
|
.about {
|
|
margin: 32rpx 0;
|
|
font-size: 32rpx;
|
|
color: #A2A0A8;
|
|
}
|
|
|
|
.content {
|
|
font-size: 24rpx;
|
|
color: #A1A0A8;
|
|
margin-bottom: 48rpx;
|
|
}
|
|
|
|
.Participants {
|
|
background: #211F32;
|
|
border-radius: 32rpx;
|
|
padding: 32rpx;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
height: 40rpx;
|
|
line-height: 40rpx;
|
|
margin-bottom: 20rpx;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
// .progressBody{
|
|
.progressbar {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 426rpx;
|
|
margin: 8rpx 0;
|
|
}
|
|
|
|
.progress {
|
|
margin-left: 20rpx;
|
|
display: inline-block;
|
|
width: 144rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
|
|
.userIconList {
|
|
height: 104rpx;
|
|
|
|
.userIcon {
|
|
overflow: hidden;
|
|
border-radius: 64rpx;
|
|
display: inline-block;
|
|
margin-left: -20rpx;
|
|
margin-top: 34rpx;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.button {
|
|
margin-top: 64rpx;
|
|
margin-bottom: 120rpx;
|
|
height: 112rpx;
|
|
line-height: 112rpx;
|
|
border-radius: 32rpx;
|
|
font-size: 32rpx;
|
|
color: #15141F !important;
|
|
}
|
|
|
|
.DonatePopup {
|
|
.content {
|
|
height: 844rpx;
|
|
|
|
/deep/.u-button--disabled {
|
|
background-color: #A1A0A8 !important;
|
|
border-color: #A1A0A8 !important;
|
|
}
|
|
|
|
.close {
|
|
margin: 48rpx 346rpx;
|
|
width: 58rpx;
|
|
height: 20rpx;
|
|
background-image: url(../../static/charity/Turn.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 58rpx 20rpx;
|
|
}
|
|
|
|
.form {
|
|
font-size: 32rpx;
|
|
margin: 0 32rpx;
|
|
|
|
.Available {
|
|
height: 44rpx;
|
|
margin: 32rpx 0;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.input-item {
|
|
overflow: hidden;
|
|
height: 124rpx;
|
|
line-height: 124rpx;
|
|
background: #323045;
|
|
margin-bottom: 48rpx;
|
|
border-radius: 32rpx;
|
|
padding: 0 40rpx;
|
|
|
|
/deep/.u-form-item__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.input {
|
|
height: 124rpx;
|
|
}
|
|
|
|
.selectCoinBtn {
|
|
position: relative;
|
|
width: 150rpx;
|
|
height: 54rpx;
|
|
right: 0rpx;
|
|
line-height: 56rpx;
|
|
font-size: 36rpx;
|
|
padding: 0;
|
|
color: #fff;
|
|
|
|
&::after {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
background-image: url(../../static/charity/ic_ma_arrow_down.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 32rpx;
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
top: 12rpx;
|
|
right: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.button {
|
|
width: 654rpx;
|
|
margin: 0 48rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.USDTPopup {
|
|
.content {
|
|
height: 844rpx;
|
|
|
|
.close {
|
|
margin: 48rpx 346rpx;
|
|
width: 58rpx;
|
|
height: 20rpx;
|
|
background-image: url(../../static/charity/Turn.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 58rpx 20rpx;
|
|
}
|
|
|
|
.radioGroup {
|
|
height: 580rpx;
|
|
|
|
.checkBox {
|
|
height: 84rpx;
|
|
width: 670rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 40rpx 32rpx;
|
|
|
|
.icon {
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
background: #323045;
|
|
padding: 16rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.iconName {
|
|
width: 520rpx;
|
|
|
|
.top {
|
|
font-size: 32rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.bottom {
|
|
font-size: 24rpx;
|
|
color: #A1A0A8;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
/deep/.uni-radio-input {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
border-radius: 16rpx;
|
|
background: #323045;
|
|
}
|
|
|
|
/deep/.uni-radio-input-checked::before {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.button {
|
|
width: 654rpx;
|
|
margin: 40rpx 48rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|