liudan
1 year ago
parent
6a2135f996
commit
c6c6fc2784
@ -0,0 +1,494 @@ |
||||
<template> |
||||
<view> |
||||
|
||||
<view class="order-tab"> |
||||
<view :class="OrderType==0?'tab action':'tab'" @click="onOrderTab(0)"> |
||||
<text>我要反馈</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view :class="OrderType==1?'tab action':'tab'" @click="onOrderTab(1)"> |
||||
<text>反馈公示</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view :class="OrderType==2?'tab action':'tab'" @click="onOrderTab(2)"> |
||||
<text>我的反馈</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="section1" v-if="OrderType==0"> |
||||
<u-form :model="form" ref="uForm"> |
||||
<view class="section1Item"> |
||||
|
||||
<u-form-item label="反馈类型" label-width="150"> |
||||
<u-radio-group v-model="form.type"> |
||||
<u-radio active-color="#FF4434" v-for="(item, index) in checkboxList1" :key="index" :name="item.name"> |
||||
{{item.name}} |
||||
</u-radio> |
||||
</u-radio-group> |
||||
|
||||
</u-form-item> |
||||
<u-form-item label="反馈类型" label-width="150"> |
||||
<u-radio-group v-model="form.shop"> |
||||
<u-radio active-color="#FF4434" v-for="(item, index) in checkboxList2" :key="index" :name="item.name"> |
||||
{{item.name}} |
||||
</u-radio> |
||||
</u-radio-group> |
||||
|
||||
</u-form-item> |
||||
<u-form-item label="门店" label-width="150" @click="typeShow = true"> |
||||
<u-input v-model="form.shopText" placeholder="请选择门店" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="投诉内容" label-width="150" label-position="top"> |
||||
<u-input v-model="form.comment" class="textarea" placeholder="请填写投诉内容" type="textarea"/> |
||||
</u-form-item> |
||||
<u-upload |
||||
:fileList="finishImageList" |
||||
:previewFullImage="true" |
||||
@afterRead="afterRead" |
||||
:maxCount="8" width="180" height="180" |
||||
upload-text="上传照片" |
||||
@delete="deletePic" |
||||
name="1" |
||||
multiple |
||||
></u-upload> |
||||
|
||||
|
||||
</view> |
||||
<view class="section1Item" style="margin-top:20upx;"> |
||||
<u-form-item label="您的称呼" label-width="150"> |
||||
<u-input placeholder="请填写" v-model="form.name" /> |
||||
</u-form-item> |
||||
<u-form-item label="手机号码" label-width="150"> |
||||
<u-input placeholder="请填写" v-model="form.phone" /> |
||||
</u-form-item> |
||||
</view> |
||||
</u-form> |
||||
<view class="introContent"> |
||||
<view class="introText">温馨提示</view> |
||||
<view class="introText">1.工作人员将于1小时内与您联系解决您的问题(工作时间为周一至周日09:00~21:30)</view> |
||||
<view class="introText">2.有效投诉奖励：最高奖励200元现金/代金券</view> |
||||
</view> |
||||
<view class="submitBtn"> |
||||
提交 |
||||
</view> |
||||
</view> |
||||
<view class="section2" v-if="OrderType==1"> |
||||
<view class="feedShow"> |
||||
<view class="feedbackItem"> |
||||
<view class="statusfb"> |
||||
已完成 |
||||
</view> |
||||
<view class="feedbackContent"> |
||||
<view class="fbTitle"> |
||||
<view class="fbFlag">投诉</view> |
||||
<view class="fbTitleText"> |
||||
广福路爱情海玫瑰天街玫瑰天街玫瑰天街玫瑰天街玫瑰天街玫瑰天街 |
||||
</view> |
||||
</view> |
||||
<u-read-more show-height="150" color="#9E9E9E" :toggle="true" close-text="展开"> |
||||
<rich-text :nodes="content"></rich-text> |
||||
</u-read-more> |
||||
<view class="timefb"> |
||||
2024-01-25 15:00:00 |
||||
</view> |
||||
|
||||
</view> |
||||
<view class="feedbackResult"> |
||||
<u-collapse> |
||||
<u-collapse-item title="处理结果"> |
||||
<u-form :model="result" ref="result"> |
||||
<u-form-item label="处理时间" label-width="150" prop="time"> |
||||
{{result.time}} |
||||
</u-form-item> |
||||
<u-form-item label="反馈内容" label-width="150" prop="feedback"> |
||||
{{result.feedback}} |
||||
</u-form-item> |
||||
</u-form> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class="section2" v-if="OrderType==2"> |
||||
<view class="feedShow"> |
||||
<view class="feedbackItem"> |
||||
<view class="feedbackResult"> |
||||
<u-collapse> |
||||
<u-collapse-item :open="true" title="处理结果"> |
||||
<u-form :model="result" ref="result"> |
||||
<u-form-item label="处理时间" label-width="150" prop="time"> |
||||
{{result.time}} |
||||
</u-form-item> |
||||
<u-form-item label="反馈内容" label-width="150" prop="feedback"> |
||||
{{result.feedback}} |
||||
</u-form-item> |
||||
</u-form> |
||||
</u-collapse-item> |
||||
|
||||
</u-collapse> |
||||
|
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
<!-- <view class="empty"> |
||||
<image src="/static/news1/feedbackempty.png" mode="widthFix"></image> |
||||
<view class="emptytext"> |
||||
还没有反馈内容 |
||||
</view> |
||||
</view> --> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
OrderType: 2, |
||||
form: { |
||||
type: '', |
||||
shop:'', |
||||
shopText:'', |
||||
comment:'', |
||||
name:'王', |
||||
phone:'186' |
||||
|
||||
}, |
||||
checkboxList1: [ |
||||
{name: '投诉'}, |
||||
{name: '建议'}, |
||||
{name: '表扬'} |
||||
], |
||||
checkboxList2: [ |
||||
{name: '门店'}, |
||||
{name: '其他'}, |
||||
], |
||||
typeShow:false, |
||||
type: [ |
||||
{ |
||||
text: '12345' |
||||
} |
||||
], |
||||
//照片 |
||||
finishImageList:[], |
||||
content: `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 |
||||
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 |
||||
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 |
||||
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 |
||||
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 |
||||
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 |
||||
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 |
||||
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 |
||||
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`, |
||||
result:{ |
||||
time:'2024-01-23 09:11:10', |
||||
feedback:`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 |
||||
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 |
||||
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 |
||||
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 |
||||
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 |
||||
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 |
||||
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。 |
||||
苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。 |
||||
无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？` |
||||
} |
||||
}; |
||||
}, |
||||
onLoad(params) { |
||||
|
||||
}, |
||||
methods:{ |
||||
/** |
||||
* 订单tab点击 |
||||
*/ |
||||
onOrderTab(type){ |
||||
this.OrderType = type; |
||||
|
||||
}, |
||||
actionSheetCallback(index) { |
||||
|
||||
this.form.shopText = this.type[index].text; |
||||
}, |
||||
// 新增图片 |
||||
async afterRead(event) { |
||||
|
||||
let lists = [].concat(event.file) |
||||
let fileListLen = this[`fileList${event.name}`].length |
||||
lists.map((item) => { |
||||
this[`fileList${event.name}`].push({ |
||||
...item, |
||||
status: 'uploading', |
||||
message: '上传中' |
||||
}) |
||||
}) |
||||
for (let i = 0; i < lists.length; i++) { |
||||
const result = await this.uploadFilePromise(lists[i].url) |
||||
|
||||
if(JSON.parse(result).code==1){ |
||||
let item = this[`fileList${event.name}`][fileListLen] |
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { |
||||
status: 'success', |
||||
message: '', |
||||
url: result |
||||
})) |
||||
fileListLen++ |
||||
}else{ |
||||
this[`fileList${event.name}`].splice(fileListLen, 1) |
||||
} |
||||
|
||||
} |
||||
|
||||
}, |
||||
//上传照片 |
||||
uploadFilePromise(url) { |
||||
return new Promise((resolve, reject) => { |
||||
// let a = uni.uploadFile({ |
||||
// url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址 |
||||
// filePath: url, |
||||
// name: 'file', |
||||
// formData: { |
||||
// user: 'test', |
||||
// token:getToken() |
||||
// }, |
||||
// success: (res) => { |
||||
// if(JSON.parse(res.data).code==1){ |
||||
// setTimeout(() => { |
||||
// this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url}) |
||||
// resolve(res.data) |
||||
// }, 1000) |
||||
// }else{ |
||||
// uni.$u.toast(JSON.parse(res.data).msg) |
||||
|
||||
// resolve(res.data) |
||||
// } |
||||
// }, |
||||
// fail: (res) => { |
||||
// console.log(res,"rrr") |
||||
// } |
||||
// }); |
||||
}) |
||||
}, |
||||
//删除图片 |
||||
deletePic(event) { |
||||
|
||||
this.finishImageList.splice(event.index, 1) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="scss"> |
||||
page{ |
||||
min-height: 100%; |
||||
width: 100%; |
||||
background-color: #F7F8FA; |
||||
|
||||
} |
||||
/* 订单tab */ |
||||
.order-tab{ |
||||
|
||||
position: fixed; |
||||
left: 0; |
||||
top: 100upx; |
||||
z-index: 10; |
||||
display: flex; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100rpx; |
||||
background-color: #FFFFFF; |
||||
.tab{ |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
flex:1; |
||||
height: 80%; |
||||
text{ |
||||
font-size: 32rpx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
.action{ |
||||
text{ |
||||
color: #FF4D4D; |
||||
line-height: 19px; |
||||
|
||||
} |
||||
.line{ |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 0; |
||||
width: 32upx; |
||||
height: 6upx; |
||||
background: #FF4D4D; |
||||
transform: translate(-50%,0); |
||||
border-radius: 32px 32px 32px 32px; |
||||
|
||||
} |
||||
} |
||||
} |
||||
.section1{ |
||||
border:1px solid transparent; |
||||
|
||||
|
||||
.section1Item{ |
||||
background-color: #fff; |
||||
border-radius: 4px 4px 4px 4px; |
||||
margin:120upx 30upx 30upx 30upx; |
||||
padding:10upx 40upx; |
||||
} |
||||
::v-deep .u-form-item--left__content__label{ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: bold; |
||||
color: #373737; |
||||
} |
||||
::v-deep .u-border-bottom:after{ |
||||
border:none; |
||||
} |
||||
.textarea{ |
||||
height: 250upx; |
||||
background: #F7F8FA; |
||||
border-radius: 3px 3px 3px 3px; |
||||
opacity: 1; |
||||
|
||||
} |
||||
::v-deep .u-input__textarea{ |
||||
padding:26upx; |
||||
} |
||||
.introContent{ |
||||
margin-top:16upx; |
||||
margin:16upx 30upx 30upx 30upx; |
||||
.introText{ |
||||
font-size: 24upx; |
||||
color:#C5C6C8; |
||||
margin-top:16upx; |
||||
line-height: 40upx; |
||||
} |
||||
|
||||
} |
||||
.submitBtn{ |
||||
height: 100upx; |
||||
background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%); |
||||
border-radius: 52px 52px 52px 52px; |
||||
opacity: 1; |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
margin:32upx 30upx 30upx 30upx; |
||||
text-align: center; |
||||
line-height: 100upx; |
||||
} |
||||
} |
||||
.section2{ |
||||
min-height: 100%; |
||||
padding:120upx 30upx 30upx 30upx; |
||||
.feedShow{ |
||||
padding:30upx; |
||||
border-radius: 4px 4px 4px 4px; |
||||
background-color: #fff; |
||||
} |
||||
.feedbackItem{ |
||||
position: relative; |
||||
margin-bottom:30upx; |
||||
// border:1px solid yellow; |
||||
|
||||
.statusfb{ |
||||
position: absolute; |
||||
right:0; |
||||
width: 92upx; |
||||
height: 44upx; |
||||
line-height: 44upx; |
||||
text-align: center; |
||||
background-color: #EEFAF6; |
||||
font-size: 26upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #2DC37F; |
||||
top:40upx; |
||||
} |
||||
.feedbackContent{ |
||||
padding-bottom:30upx; |
||||
border-bottom:1px solid #A0A0A0; |
||||
.fbTitle{ |
||||
display: flex; |
||||
align-items: center; |
||||
width:calc(100% - 100upx); |
||||
.fbFlag{ |
||||
// width: 54upx; |
||||
// height: 44upx; |
||||
// line-height: 44upx; |
||||
background: #FFFFFF; |
||||
border-radius: 3px; |
||||
opacity: 1; |
||||
padding:5upx; |
||||
border: 1px solid #FF4D4D; |
||||
font-size: 26upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FF4D4D; |
||||
flex-shrink: 1; |
||||
} |
||||
.fbTitleText{ |
||||
flex:1; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
color:#000; |
||||
font-size: 500; |
||||
margin-left:20upx; |
||||
} |
||||
|
||||
} |
||||
.timefb{ |
||||
color:#A0A0A0; |
||||
} |
||||
} |
||||
.feedbackResult{ |
||||
::v-deep .u-form-item--left__content__label{ |
||||
color:#A6A6A6; |
||||
} |
||||
::v-deep .u-border-bottom:after{ |
||||
border:none; |
||||
} |
||||
::v-deep .u-form-item__body{ |
||||
align-items: baseline; |
||||
} |
||||
::v-deep .u-form-item--right__content__slot{ |
||||
line-height: 36upx; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
.empty{ |
||||
text-align: center; |
||||
position: relative; |
||||
top:150upx; |
||||
image{ |
||||
width:210upx; |
||||
height:auto; |
||||
} |
||||
.emptytext{ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #717171; |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
</style> |
||||
@ -0,0 +1,526 @@ |
||||
<template> |
||||
<view class="wallet"> |
||||
<view style="width:100%;position: fixed;top:0;z-index:99"> |
||||
<view class="navBarContent"> |
||||
<u-icon name="arrow-left" style="position: absolute;top:50%;left:40upx;transform: translateY(-50%);" color="#ffffff" size="24"></u-icon> |
||||
<text>我的钱包</text> |
||||
</view> |
||||
|
||||
</view> |
||||
<image src="../../static/news1/walletBg.png" class="bgImg" mode="widthFix"></image> |
||||
<view class="walletContainer"> |
||||
<view class="section1"> |
||||
<!-- <image src="../../static/news1/walletBgItem.png" class="topBg" mode=""></image> --> |
||||
<view class="yue" @click="introShow=true">余额说明</view> |
||||
<view class="accountNum"> |
||||
<text>账户余额</text> |
||||
<image src="/static/news1/eye.png" mode="widthFix"></image> |
||||
</view> |
||||
<view class="walletHandle"> |
||||
<text>22.00</text> |
||||
<view class="chongzhiBtn"> |
||||
充值 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="section2"> |
||||
<view class="accountItem"> |
||||
<view class="itemTop"> |
||||
<view class="itemTitle"> |
||||
<text>可提现</text> |
||||
<u-icon name="arrow-right" color="#909090" size="22"></u-icon> |
||||
</view> |
||||
<view class="num"> |
||||
¥ 16.66 |
||||
</view> |
||||
</view> |
||||
<view class="handleBtn"> |
||||
立即提现 |
||||
</view> |
||||
</view> |
||||
<view class="accountItem"> |
||||
<view class="itemTop"> |
||||
<view class="itemTitle"> |
||||
<text>不可提现</text> |
||||
</view> |
||||
<view class="num"> |
||||
¥ 0.00 |
||||
</view> |
||||
</view> |
||||
<view class="recordBtn"> |
||||
提现记录 |
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
<view class="getData"> |
||||
<view class="order-tab"> |
||||
<view class="tab" :class="{'action':OrderType==0}" @click="onOrderTab(0)"> |
||||
<text>全部</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':OrderType==1}" @click="onOrderTab(1)"> |
||||
<text>充值</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':OrderType==2}" @click="onOrderTab(2)"> |
||||
<text>提现</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':OrderType==3}" @click="onOrderTab(3)"> |
||||
<text>佣金</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<view class="tab" :class="{'action':OrderType==4}" @click="onOrderTab(4)"> |
||||
<text>退款</text> |
||||
<text class="line"></text> |
||||
</view> |
||||
<!-- <view class="tab" @click="openDrawer"> |
||||
<text>筛选</text> |
||||
|
||||
</view> --> |
||||
|
||||
</view> |
||||
<u-picker mode="time" v-model="timeShow" :params="timeParams"></u-picker> |
||||
<u-dropdown class="dropdownStyle" ref="dropdown1" height="100"> |
||||
<u-dropdown-item title="属性"> |
||||
<view class="slot-content"> |
||||
<view class="slotItem"> |
||||
<view class="title">时间</view> |
||||
<view class="timecontainer"> |
||||
<u-input border v-model="form.startTime" type="select" @click="timeShow = true"/> |
||||
<text style="margin:0 20upx;">-</text> |
||||
<u-input border v-model="form.endTime" type="select" @click="timeShow = true"/> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class="slotItem"> |
||||
<view class="title">分类</view> |
||||
<view class="itemBtn"> |
||||
<view @click="setActive(index)" :class="active==index?'active btnText':'btnText'" v-for="(item,index) in btnList" :key="index">{{item}}</view> |
||||
|
||||
</view> |
||||
</view> |
||||
<view class="btnGroup"> |
||||
<button class="btn resetBtn">重置</button> |
||||
<button class="btn confirmBtn" style="margin-left:20upx;">确定</button> |
||||
</view> |
||||
</view> |
||||
</u-dropdown-item> |
||||
</u-dropdown> |
||||
</view> |
||||
<view class="dataList"> |
||||
<view class="empty"> |
||||
<image src="/static/news1/walletEmpty.png" mode="widthFix"></image> |
||||
<text>暂无数据显示哦～</text> |
||||
</view> |
||||
</view> |
||||
<u-popup v-model="introShow" mode="center" border-radius="12"> |
||||
<view class="introContent"> |
||||
<view class="introTitle">余额说明</view> |
||||
<view class="introtext">1.账户余额=可提现金额+不可提现金额</view> |
||||
<view class="introtext">2.不可提现余额=近30天充值金额</view> |
||||
<view class="introtext">3.可提现余额=账户余额-不可提现金额</view> |
||||
<view class="introBtn" @click="introShow=false">我知道了</view> |
||||
</view> |
||||
</u-popup> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
|
||||
export default { |
||||
data() { |
||||
return { |
||||
OrderType: 0, |
||||
timeShow:false, |
||||
timeParams:{ |
||||
year: true, |
||||
month: true, |
||||
day: true, |
||||
hour: false, |
||||
minute: false, |
||||
second: false |
||||
}, |
||||
form:{ |
||||
startTime:'', |
||||
endTime:'' |
||||
}, |
||||
btnList:['充值','提现','退款','付款'], |
||||
active:-1, |
||||
introShow:false |
||||
} |
||||
}, |
||||
onLoad(options) { |
||||
|
||||
}, |
||||
|
||||
methods: { |
||||
setActive(index){ |
||||
this.active = index; |
||||
}, |
||||
onOrderTab(type){ |
||||
this.OrderType = type; |
||||
|
||||
}, |
||||
// openDrawer(){ |
||||
// this.$refs.dropdown1.open(); |
||||
// } |
||||
} |
||||
} |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
page { |
||||
// min-height: calc(100vh); |
||||
min-height: 100%; |
||||
background-color: #fff; |
||||
.wallet{ |
||||
height:100%; |
||||
position: relative; |
||||
.bgImg{ |
||||
width:100%; |
||||
height:auto; |
||||
position:absolute; |
||||
top:0; |
||||
left:0; |
||||
} |
||||
.navBarContent{ |
||||
height:88upx; |
||||
line-height: 88upx; |
||||
text-align: center; |
||||
position: relative; |
||||
text{ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
} |
||||
|
||||
} |
||||
.walletContainer{ |
||||
margin:0upx 26upx; |
||||
padding-top:120upx; |
||||
position: relative; |
||||
|
||||
z-index:10; |
||||
.section1{ |
||||
padding:32upx 36upx 40upx 60upx; |
||||
background: url(/static/news1/walletBgItem.png); |
||||
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
||||
position: relative; |
||||
.yue{ |
||||
font-size: 26upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #9C715E; |
||||
position: absolute; |
||||
top:20upx; |
||||
right:20upx; |
||||
z-index:9; |
||||
|
||||
} |
||||
.accountNum{ |
||||
display: flex; |
||||
align-items: center; |
||||
text{ |
||||
font-size: 26upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #652F17; |
||||
} |
||||
image{ |
||||
width:28upx; |
||||
height:auto; |
||||
margin-left:16upx; |
||||
} |
||||
|
||||
} |
||||
.walletHandle{ |
||||
display: flex; |
||||
align-items: center; |
||||
margin-top:16upx; |
||||
text{ |
||||
font-size: 50upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #652F17; |
||||
|
||||
} |
||||
.chongzhiBtn{ |
||||
width: 120upx; |
||||
height: 60upx; |
||||
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%); |
||||
border-radius: 29px 29px 29px 29px; |
||||
opacity: 1; |
||||
border: 1px solid #ED3F38; |
||||
font-size: 24upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
text-align: center; |
||||
line-height: 55upx; |
||||
margin-left:20upx; |
||||
} |
||||
} |
||||
} |
||||
.section2{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
background-color: #fff; |
||||
padding:30upx 0; |
||||
box-shadow: 0px 4px 9px 0px rgba(0,0,0,0.12); |
||||
opacity: 1; |
||||
.accountItem{ |
||||
flex:1; |
||||
text-align: center; |
||||
.itemTop{ |
||||
.itemTitle{ |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
text{ |
||||
|
||||
font-size: 26upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #909090; |
||||
|
||||
} |
||||
} |
||||
.num{ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #2D2D2D; |
||||
margin-top:16upx; |
||||
margin-bottom:28upx; |
||||
|
||||
} |
||||
} |
||||
.handleBtn{ |
||||
width: 200upx; |
||||
height: 60upx; |
||||
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%); |
||||
border-radius: 29px 29px 29px 29px; |
||||
opacity: 1; |
||||
border: 1px solid #ED3F38; |
||||
font-size: 26upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
line-height: 55upx; |
||||
text-align: center; |
||||
margin:0 auto; |
||||
} |
||||
.recordBtn{ |
||||
width: 200upx; |
||||
height: 60upx; |
||||
background: #FFFFFF; |
||||
border-radius: 29px 29px 29px 29px; |
||||
opacity: 1; |
||||
border: 1px solid #ED3F38; |
||||
font-size: 26upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FC3E27; |
||||
line-height: 55upx; |
||||
text-align: center; |
||||
margin:0 auto; |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.getData{ |
||||
position: relative; |
||||
.dropdownStyle{ |
||||
position: absolute; |
||||
top:0; |
||||
left:0; |
||||
width:100%; |
||||
height:100%; |
||||
z-index:1; |
||||
.slot-content{ |
||||
border:1px solid transparent; |
||||
background-color: #fff; |
||||
padding-bottom:40upx; |
||||
.slotItem{ |
||||
margin:36upx; |
||||
::v-deep .u-input--border{ |
||||
border-radius:50upx; |
||||
} |
||||
.title{ |
||||
font-size:24upx; |
||||
margin-bottom: 20upx; |
||||
} |
||||
.timecontainer{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.itemBtn{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.btnText{ |
||||
flex:1; |
||||
margin:0 10upx; |
||||
background-color: #F3F4F6; |
||||
border-radius:50upx; |
||||
padding:20upx 40upx; |
||||
color:#343434; |
||||
text-align: center; |
||||
|
||||
} |
||||
.active{ |
||||
|
||||
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%); |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
.btnGroup{ |
||||
display: flex; |
||||
padding:0 40upx; |
||||
margin-top:60upx; |
||||
.btn{ |
||||
flex:1; |
||||
height: 100upx; |
||||
line-height: 100upx; |
||||
text-align: center; |
||||
font-size: 26upx; |
||||
border:none !important; |
||||
} |
||||
.resetBtn{ |
||||
background-color: #F3F4F6; |
||||
border-radius: 29px 29px 29px 29px; |
||||
opacity: 1; |
||||
// border: 1px solid #F3F4F6; |
||||
color:#222; |
||||
} |
||||
.confirmBtn{ |
||||
background: linear-gradient(180deg, #EE4837 0%, #F2673D 100%); |
||||
border-radius: 29px 29px 29px 29px; |
||||
opacity: 1; |
||||
// border: 1px solid #ED3F38; |
||||
color:#fff; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
::v-deep .u-dropdown__menu{ |
||||
height:100% !important; |
||||
} |
||||
::v-deep .u-dropdown__menu__item{ |
||||
justify-content: flex-end; |
||||
padding-right:20upx; |
||||
} |
||||
.order-tab{ |
||||
display: flex; |
||||
align-items: center; |
||||
// width: 100%; |
||||
height: 100rpx; |
||||
background-color: #FFFFFF; |
||||
// width: calc(100% - 42px); |
||||
width: calc(100% - 70px); |
||||
position: relative; |
||||
z-index:2; |
||||
.tab{ |
||||
position: relative; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width: 20%; |
||||
height: 80%; |
||||
text{ |
||||
|
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #464646; |
||||
|
||||
} |
||||
} |
||||
.action{ |
||||
text{ |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #FE422B; |
||||
|
||||
} |
||||
.line{ |
||||
position: absolute; |
||||
left: 50%; |
||||
bottom: 0; |
||||
width: 60upx; |
||||
height: 6upx; |
||||
background: #FE422B; |
||||
border-radius: 25px 25px 25px 25px; |
||||
background: #FE422B; |
||||
// background: linear-gradient(to right,$base,#f6f6f6); |
||||
transform: translate(-50%,0); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
.dataList{ |
||||
.empty{ |
||||
// margin:0 auto; |
||||
// text-align: center; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
width:100%; |
||||
image{ |
||||
width:114upx; |
||||
height:auto; |
||||
margin-top:200upx; |
||||
} |
||||
text{ |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #464646; |
||||
margin-top:44upx; |
||||
} |
||||
} |
||||
} |
||||
.introContent{ |
||||
background-color: #fff; |
||||
padding:40upx; |
||||
.introTitle{ |
||||
font-size: 32upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #000000; |
||||
margin-bottom: 54upx; |
||||
text-align: center; |
||||
font-weight: bold; |
||||
} |
||||
.introtext{ |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #727272; |
||||
margin-bottom:34upx; |
||||
} |
||||
.introBtn{ |
||||
height: 72upx; |
||||
line-height: 72upx; |
||||
background: #F55349; |
||||
border-radius: 4px 4px 4px 4px; |
||||
opacity: 1; |
||||
text-align: center; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #FFFFFF; |
||||
margin-top:60upx; |
||||
|
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 566 B |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 8.6 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
Loading…
Reference in new issue