增加音乐,摇一摇,服务等页面
This commit is contained in:
cansnow
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view v-if="currentPlaySong != null" class="play-bar flex-v-center" @click="bindOnShowPlayViewPopup">
|
||||
<view class="music-cover flex-v-h-center" :class="currentPlayer.playState ? 'spin-start':'spin-stop'">
|
||||
<u-avatar :src="currentPlaySong.pic" mode="circle" size='70'></u-avatar>
|
||||
</view>
|
||||
<view style="width: 64%;">
|
||||
<view class="music-info flex-v-center text-line-1">
|
||||
<view class="music-name text-line-1">{{currentPlaySong.songName}}</view>
|
||||
<view class="line">-</view>
|
||||
<view class="music-singer text-line-1">{{currentPlaySong.artist}}</view>
|
||||
</view>
|
||||
<view class="u-p-l-20 u-p-r-20 u-flex u-row-between u-col-center">
|
||||
<view style="width: 80%;">
|
||||
<u-line-progress active-color="#19be6b"
|
||||
:striped="true"
|
||||
:height="8"
|
||||
:striped-active="true"
|
||||
:show-percent="false"
|
||||
:percent="currentPlayer.progress"></u-line-progress>
|
||||
</view>
|
||||
<view class="u-font-24 u-tips-color">
|
||||
<text> {{currentPlaySong.songTimeMinutes}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bars flex-v-center flex-space-between">
|
||||
<view style="width: 64rpx;">
|
||||
<view class="u-progress-content flex-v-h-center btn-active" @tap.stop="bindOnControllerPlay">
|
||||
<u-icon :class="currentPlayer.playState ? 'play' : 'pause'"
|
||||
:name="currentPlayer.playState ? 'pause-circle' : 'play-circle'" size="54"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tools-item btn-active" style="display: inline-block;" @tap.stop="bindOnShowPlayListPopup">
|
||||
<u-icon name="music-list" custom-prefix="custom-icon" size="54"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="play-bar flex-v-center test-border u-tips-color">
|
||||
<view style="text-align: center;width: 100%;">
|
||||
<text>当前暂无播放歌曲记录</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
bindOnControllerPlay(){
|
||||
this.$emit("changePlayStatus");
|
||||
},
|
||||
bindOnShowPlayListPopup(){
|
||||
this.$emit("showPlayList")
|
||||
},
|
||||
bindOnShowPlayViewPopup(){
|
||||
this.$emit("showPlayView")
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
@import "@/static/music/music.css";
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.play-bar{
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 120rpx;
|
||||
background-color: #ffffff;
|
||||
padding: 0 40rpx;
|
||||
z-index: 1000;
|
||||
.music-cover{
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background-image: url('@/static/music/disc-plus.png');
|
||||
background-size: 100% 100%;
|
||||
flex-shrink:0;
|
||||
-webkit-transform: rotate(360deg);
|
||||
animation: rotation 10s linear infinite;
|
||||
-moz-animation: rotation 10s linear infinite;
|
||||
-webkit-animation: rotation 10s linear infinite;
|
||||
-o-animation: rotation 10s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes rotation{
|
||||
from {-webkit-transform: rotate(0deg);}
|
||||
to {-webkit-transform: rotate(360deg);}
|
||||
}
|
||||
.spin-stop{
|
||||
-webkit-animation-play-state:paused
|
||||
}
|
||||
.spin-start{
|
||||
-webkit-animation-play-state:running
|
||||
}
|
||||
.music-info{
|
||||
display: flex;
|
||||
padding: 0 20rpx;
|
||||
flex: 1;
|
||||
.music-name{
|
||||
max-width: 65%;
|
||||
flex-shrink:0;
|
||||
}
|
||||
.line{
|
||||
padding: 0 10rpx;
|
||||
color: $uni-text-color-disable;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
.music-singer{
|
||||
max-width: 35%;
|
||||
color: $uni-text-color-disable;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
.bars{
|
||||
width: 160rpx;
|
||||
text-align: right;
|
||||
height: 100%;
|
||||
.u-progress-content{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="" :background="{ background: '#ffffff' }"
|
||||
:border-bottom="false" z-index="1001">
|
||||
<view class="slot-wrap u-font-32">
|
||||
<view class="u-font-32" style="width: 100%;">
|
||||
<u-tabs :list="tabList" active-color="#2ebe4b"
|
||||
:is-scroll="false" :show-bar="true" :font-size="34"
|
||||
:current="currentTab" :active-item-style="activeItemStyle"
|
||||
@change="tabChange"></u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view>
|
||||
|
||||
<view class="u-p-l-40 u-p-r-40">
|
||||
<view class="u-m-t-20 u-m-b-20">
|
||||
<u-search placeholder="支持搜索歌手,歌名,专辑"
|
||||
border-color="#eeeeee"
|
||||
bg-color="#ffffff"
|
||||
shape="square"
|
||||
:clearabled="true"
|
||||
:show-action="true"
|
||||
:action-style="actionStyle"
|
||||
:animation="false"
|
||||
height="80"
|
||||
@search="search"
|
||||
@custom="search"
|
||||
v-model="searchWord">
|
||||
</u-search>
|
||||
</view>
|
||||
<scroll-view
|
||||
:scroll-x="false" :scroll-y="true" :style="'height:'+(pageHeight)+'px'">
|
||||
<u-row>
|
||||
<u-col :span="12">
|
||||
<view class="u-p-30 u-font-36" style="font-weight: bold;">
|
||||
<text>热门男歌手</text>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4" v-for="(item,index) in singerManList" :key="index">
|
||||
<view class="u-m-b-30" @click="toSongList(item)">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image width="100%" height="130rpx"
|
||||
border-radius="16rpx"
|
||||
mode="heightFix"
|
||||
:src="item.avatar"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center;margin-top:4rpx;font-size: 26rpx;color: #000000;">
|
||||
<text>{{item.singerName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<u-row>
|
||||
<u-col :span="12">
|
||||
<view class="u-p-30 u-font-36" style="font-weight: bold;">
|
||||
<text>热门女歌手</text>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4" v-for="(item,index) in singerWomenList" :key="index">
|
||||
<view class="u-m-b-30" @click="toSongList(item)">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image width="100%" height="130rpx"
|
||||
border-radius="16rpx"
|
||||
mode="heightFix"
|
||||
:src="item.avatar"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center;margin-top:4rpx;font-size: 26rpx;color: #000000;">
|
||||
<text>{{item.singerName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pageHeight:0,
|
||||
tabList:[
|
||||
{
|
||||
name: '在线听'
|
||||
},
|
||||
{
|
||||
name: '本地听'
|
||||
},
|
||||
],
|
||||
currentTab:0,
|
||||
activeItemStyle:{
|
||||
fontSize:'36rpx',
|
||||
},
|
||||
actionStyle:{
|
||||
backgroundColor:'#46be72',
|
||||
color:'#ffffff',
|
||||
height:'80rpx',
|
||||
lineHeight:'80rpx',
|
||||
position:'relative',
|
||||
left:'0rpx',
|
||||
textAlign:'center',
|
||||
width:'140rpx',
|
||||
borderRadius:'10rpx',
|
||||
borderTopRightRadius:'10rpx',
|
||||
borderBottomRightRadius:'10rpx'
|
||||
},
|
||||
searchWord:'',
|
||||
singerManList:[
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M0000025NhlN2yWrP4.jpg?max_age=2592000',
|
||||
singerName:'周杰伦'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001BLpXF2DyJe2.jpg?max_age=2592000',
|
||||
singerName:'林俊杰'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002J4UUk29y8BY.jpg?max_age=2592000',
|
||||
singerName:'薛之谦'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003Nz2So3XXYek.jpg?max_age=2592000',
|
||||
singerName:'陈奕迅'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002azErJ0UcDN6.jpg?max_age=2592000',
|
||||
singerName:'张杰'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000003aQYLo2x8izP_4.jpg?max_age=2592000',
|
||||
singerName:'刘德华'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000004NMZuf2BLjg8_2.jpg?max_age=2592000',
|
||||
singerName:'周传雄'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000aHmbL2aPXWH.jpg?max_age=2592000',
|
||||
singerName:'李荣浩'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003fA5G40k6hKc.jpg?max_age=2592000',
|
||||
singerName:'周深'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001IoTZp19YMDG.jpg?max_age=2592000',
|
||||
singerName:'易烊千玺'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001z2JmX09LLgL.jpg?max_age=2592000',
|
||||
singerName:'汪苏泷'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000CK5xN3yZDJt.jpg?max_age=2592000',
|
||||
singerName:'许嵩'
|
||||
}
|
||||
],
|
||||
singerWomenList:[
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001fNHEf1SFEFN.jpg?max_age=2592000',
|
||||
singerName:'G.E.M.邓紫棋'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M0000003ZpE43ypssl.jpg?max_age=2592000',
|
||||
singerName:'张碧晨'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000oCQfT3kdonw.jpg?max_age=2592000',
|
||||
singerName:'黄霄雲'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002lKaDq2lLLtk.jpg?max_age=2592000',
|
||||
singerName:'蔡健雅'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000002azErJ0UcDN6.jpg?max_age=2592000',
|
||||
singerName:'苏星婕'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000003iPzNg35cWzp.jpg?max_age=2592000',
|
||||
singerName:'程响'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000000aw4WC2EQYTv_5.jpg?max_age=2592000',
|
||||
singerName:'张靓颖'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000000GGDys0yA0Nk_2.jpg?max_age=2592000',
|
||||
singerName:'梁静茹'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000001pWERg3vFgg8.jpg?max_age=2592000',
|
||||
singerName:'孙燕姿'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R500x500M000000GDDuQ3sGQiT.jpg?max_age=2592000',
|
||||
singerName:'王菲'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000003jJGvv3C82KZ_5.jpg?max_age=2592000',
|
||||
singerName:'刘若英'
|
||||
},
|
||||
{
|
||||
avatar:'https://y.qq.com/music/photo_new/T001R300x300M000002raUWw3PXdkT_5.jpg?max_age=2592000',
|
||||
singerName:'张韶涵'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
created:function(){
|
||||
let pageHeight= this.$u.sys().windowHeight*0.82;
|
||||
this.pageHeight=pageHeight;
|
||||
},
|
||||
methods: {
|
||||
tabChange:function(index){
|
||||
this.currentTab = index;
|
||||
},
|
||||
search:function(value){
|
||||
console.log("搜索关键字",value);
|
||||
let that=this;
|
||||
if(value.length>0){
|
||||
this.$u.route({
|
||||
url:'pages/tabbar/find/music/song-list',
|
||||
params:{
|
||||
keyWords:value
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
toSongList:function(singer){
|
||||
let that=this;
|
||||
this.$u.route({
|
||||
url:'pages/tabbar/find/music/song-list',
|
||||
params:{
|
||||
keyWords:singer.singerName
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
||||
flex: 1;
|
||||
/* 如果您想让slot内容与导航栏左右有空隙 */
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" :title="navbarTitle" :background="{ background: '#ffffff' }"
|
||||
:title-bold="true" title-size="34"
|
||||
:border-bottom="true" z-index="1001">
|
||||
</u-navbar>
|
||||
<view>
|
||||
<view class="u-p-30 u-flex u-row-between u-col-center">
|
||||
<view style="font-size: 36rpx;font-weight: bold;">
|
||||
<text>列表</text>
|
||||
<text>({{songList.length}})</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-30">
|
||||
<u-icon name="play-circle-fill" size="42" color="#2979ff" @click="playAll()"
|
||||
label="播放全部" label-size="32"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-30">
|
||||
<u-icon name="heart-fill" size="42" color="#fa3534" @click="addToLocal()"
|
||||
label="添加本地" label-size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" :style="'height:'+(pageHeight-50)+'px'" @scrolltolower="loadMore">
|
||||
<view class="u-flex u-row-between u-col-center u-p-30 u-border-bottom"
|
||||
v-for="(song,index) in songList" :key="index">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-30">
|
||||
<u-image :src="song.pic" width="100rpx" height="100rpx" border-radius="12rpx"></u-image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-font-34 u-m-b-10 u-line-1" style="color: #000000;width: 400rpx;">{{escape2Html(song.name)}}</view>
|
||||
<view class="u-font-28 u-m-t-10 u-flex u-row-left u-col-center u-line-3" style="color: #808288;width: 400rpx;">
|
||||
{{escape2Html(song.artist)}}-{{escape2Html(song.album)}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-around u-col-center">
|
||||
<view>
|
||||
<u-icon v-if="currentPlaySong&¤tPlaySong.id==song.rid&¤tPlayer.playState" name="pause-circle" size="50" color="#797979"></u-icon>
|
||||
<u-icon v-else @click="toPlaySong(song)" name="play-circle" size="50" color="#797979"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-30">
|
||||
<u-icon @click="download(song)" name="download" size="50" color="#797979"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view>
|
||||
<play-bar @changePlayStatus="changePlayStatus" @showPlayView='bindOnPlayBarChange' @showPlayList='bindOnShowPlayListPopup'></play-bar>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import playBar from './components/play-bar.vue';
|
||||
import playerUtil from '@/util/music/music-player.js';
|
||||
export default {
|
||||
components:{
|
||||
playBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
navbarTitle:"歌曲列表",
|
||||
pageHeight:0,
|
||||
pageNum:1,
|
||||
pageSize:30,
|
||||
searchWord:"",
|
||||
total:0,
|
||||
songList:[],
|
||||
loadMoreFlag:false
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
currentPlaySong:function(newSong){
|
||||
let that=this;
|
||||
console.log("====监听到播放歌曲发生变化======");
|
||||
if(newSong!=null&&newSong.id){
|
||||
playerUtil.initPlayer(that);
|
||||
}
|
||||
}
|
||||
},
|
||||
created:function(){
|
||||
let pageHeight= this.$u.sys().windowHeight*0.79;
|
||||
this.pageHeight=pageHeight;
|
||||
},
|
||||
onLoad:function(option){
|
||||
let that=this;
|
||||
console.log("搜索词",option);
|
||||
let keyWords= option.keyWords;
|
||||
if(keyWords){
|
||||
this.navbarTitle=keyWords;
|
||||
this.searchWord=keyWords;
|
||||
};
|
||||
this.getSongList();
|
||||
that.$u.vuex("currentPlayer.canPlay",false);
|
||||
//当前是是否暂停或停止状态，true 表示暂停或停止，false 表示正在播放
|
||||
if(playerUtil.bgAudioManager.paused==true){
|
||||
playerUtil.initPlayer(that);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
getSongList:function(){
|
||||
let that=this;
|
||||
let param={
|
||||
pageNum:that.pageNum,
|
||||
pageSize:that.pageSize,
|
||||
keyWords:encodeURI(this.searchWord)
|
||||
};
|
||||
console.log("搜索歌曲列表",param);
|
||||
this.$u.api.music.searchMusicList(param).then(res => {
|
||||
//console.log("获取歌曲列表结果",res);
|
||||
if(res.code==200){
|
||||
let result= res.data;
|
||||
if(result!=null&&result!=undefined){
|
||||
let reqData= result.data;
|
||||
this.total= reqData.total;
|
||||
let list=reqData.list;
|
||||
if(that.loadMoreFlag==true){
|
||||
this.songList=this.songList.concat(list);
|
||||
return;
|
||||
}else{
|
||||
this.songList=list;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
loadMore:function(){
|
||||
let that=this;
|
||||
if(that.songList.length>=that.total){
|
||||
that.globalUtil.utilAlert("暂无更多");
|
||||
that.loadMoreFlag=false;
|
||||
return;
|
||||
}
|
||||
that.pageNum++;
|
||||
that.loadMoreFlag=true;
|
||||
console.log("加载更多");
|
||||
that.getSongList();
|
||||
},
|
||||
|
||||
toPlaySong:function(song){
|
||||
//console.log("当前选中播放歌曲",song);
|
||||
//this.$u.vuex("currentPlaySong",song);
|
||||
let param={
|
||||
musicId:song.rid
|
||||
};
|
||||
this.$u.api.music.getSongInfoAndLrc(param).then(res => {
|
||||
if(res.code==200){
|
||||
let baseInfoResult= res.data;
|
||||
let lrclist= baseInfoResult.data.lrclist;
|
||||
let songInfo= baseInfoResult.data.songinfo;
|
||||
songInfo.lrclist=lrclist;
|
||||
this.$u.api.music.getSongSrc(param).then(res => {
|
||||
if(res.code==200){
|
||||
let songSrcResult= res.data;
|
||||
let songSrc=songSrcResult.data.url;
|
||||
songInfo.playSrc=songSrc;
|
||||
console.log("获取歌曲详细信息结果",songInfo);
|
||||
this.$u.vuex("currentPlaySong",songInfo);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
//this.$forceUpdate();
|
||||
},
|
||||
|
||||
changePlayStatus:function(){
|
||||
let that=this;
|
||||
console.log("改变状态")
|
||||
playerUtil.bindOnControllerPlay(that);
|
||||
},
|
||||
|
||||
bindOnPlayBarChange(){
|
||||
//this.$refs.playViewPopup.show();
|
||||
},
|
||||
bindOnShowPlayListPopup(){
|
||||
//this.$refs.playListPopup.show();
|
||||
},
|
||||
playAll:function(){
|
||||
|
||||
},
|
||||
addToLocal:function(){
|
||||
let that=this;
|
||||
},
|
||||
download:function(song){
|
||||
let that=this;
|
||||
let param={
|
||||
musicId:song.rid,
|
||||
songName:that.escape2Html(song.name),
|
||||
saveDir:that.escape2Html(song.artist),
|
||||
};
|
||||
console.log("下载参数",param);
|
||||
this.$u.api.music.downLoadSong(param).then(res => {
|
||||
console.log("下载结果",res);
|
||||
if(res.code==200){
|
||||
that.globalUtil.utilAlert("下载成功");
|
||||
let playSrc= res.data.url;
|
||||
}else{
|
||||
that.globalUtil.utilAlert("下载失败");
|
||||
}
|
||||
})
|
||||
},
|
||||
escape2Html:function(str) {
|
||||
var arrEntities={'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"','$':','};
|
||||
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig,function(all,t){
|
||||
return arrEntities[t];
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" back-icon-color="#333333"
|
||||
title="通过朋友验证" :title-bold="true" :title-size="34"
|
||||
:background="{ background: '#ffffff' }"
|
||||
title-color="#404133" :border-bottom="false">
|
||||
</u-navbar>
|
||||
<view class="">
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" class="u-p-t-10 u-p-b-30"
|
||||
:style="'width:100%;height:'+scrollviewHeight+'px'">
|
||||
<view class="u-p-l-40 u-p-r-40">
|
||||
<view class="u-p-l-20 u-title-color u-font-28">
|
||||
<text>设置备注</text>
|
||||
</view>
|
||||
<view class="inputBox">
|
||||
<u-input :custom-style="customInputStyle"
|
||||
v-model="form.nickName" type="text"
|
||||
:border="false" :height="60" :clearable="false"/>
|
||||
</view>
|
||||
<view class="u-title-color u-p-l-30 u-m-t-10">
|
||||
<text>
|
||||
<text style="font-size: 28rpx;">"{{form.userRemark}}"</text>
|
||||
<text style="color: #36648b;margin-left: 20rpx;">选词填入</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="u-m-t-30 u-p-l-40 u-p-r-40">
|
||||
<view class="u-p-l-20 u-title-color u-font-28">
|
||||
<text>添加标签与描述</text>
|
||||
</view>
|
||||
<view style="background-color: #f0f0f0;border-radius: 16rpx;margin-top: 20rpx;font-size: 32rpx;">
|
||||
<view class="u-flex u-row-between u-col-center" style="padding:16rpx 26rpx;">
|
||||
<view class="u-p-20 label-font">
|
||||
<text>标签</text>
|
||||
</view>
|
||||
<view class="u-p-20">
|
||||
<u-icon name="arrow-right" color="#909399" :size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap :height="1" bg-color="#e5e8ec"></u-gap>
|
||||
<view class="u-flex u-row-between u-col-center" style="padding:16rpx 26rpx;">
|
||||
<view class="u-p-20 label-font">
|
||||
<text>描述</text>
|
||||
</view>
|
||||
<view class="u-p-20">
|
||||
<u-icon name="arrow-right" color="#909399" :size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-30 u-p-l-40 u-p-r-40">
|
||||
<view class="u-p-l-20 u-title-color u-font-28">
|
||||
<text>设置朋友权限</text>
|
||||
</view>
|
||||
<view style="background-color: #f0f0f0;border-radius: 16rpx;margin-top: 20rpx;font-size: 32rpx;">
|
||||
<view class="u-flex u-row-between u-col-center"
|
||||
@click="changePower(0)"
|
||||
style="padding:16rpx 26rpx;">
|
||||
<view class="u-p-20 label-font">
|
||||
<text>聊天、朋友圈、微信运动等</text>
|
||||
</view>
|
||||
<view class="u-p-20" v-show="form.friendPower==0">
|
||||
<u-icon name="checkbox-mark" color="#19be6b" :size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap :height="1" bg-color="#e5e8ec"></u-gap>
|
||||
<view class="u-flex u-row-between u-col-center"
|
||||
@click="changePower(1)"
|
||||
style="padding:16rpx 26rpx;">
|
||||
<view class="u-p-20 label-font">
|
||||
<text>仅聊天</text>
|
||||
</view>
|
||||
<view class="u-p-20" v-show="form.friendPower==1">
|
||||
<u-icon name="checkbox-mark" color="#19be6b" :size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-30 u-p-l-40 u-p-r-40" v-if="form.friendPower==0">
|
||||
<view class="u-p-l-20 u-title-color u-font-28">
|
||||
<text>朋友圈和状态</text>
|
||||
</view>
|
||||
<view style="background-color: #f0f0f0;border-radius: 16rpx;margin-top: 20rpx;font-size: 32rpx;">
|
||||
<view class="u-flex u-row-between u-col-center" style="padding:16rpx 26rpx;">
|
||||
<view class="u-p-20 label-font">
|
||||
<text>不让他(她)看</text>
|
||||
</view>
|
||||
<view class="u-p-20">
|
||||
<u-switch v-model="form.forbidSelf" :size="40" active-color="#19be6b" inactive-color="#eee"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap :height="1" bg-color="#e5e8ec"></u-gap>
|
||||
<view class="u-flex u-row-between u-col-center" style="padding:16rpx 26rpx;">
|
||||
<view class="u-p-20 label-font">
|
||||
<text>不看他(她)</text>
|
||||
</view>
|
||||
<view class="u-p-20">
|
||||
<u-switch v-model="form.forbidHis" :size="40" active-color="#19be6b" inactive-color="#eee"></u-switch>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view :style="'height:'+footerHeight+'px'"
|
||||
class="u-flex u-row-center u-col-top footerbox">
|
||||
<u-button type="success" :custom-style="customBtnStyle" @click="submitApply">完成</u-button>
|
||||
</view>
|
||||
|
||||
<u-popup v-model="loadingShow"
|
||||
:mask-close-able="false" :mask="false"
|
||||
mode="center" border-radius="20" width="250rpx" height="250rpx">
|
||||
<view class="u-flex u-row-center u-col-center"
|
||||
style="flex-direction: column; text-align: center;
|
||||
background-color: #000000;color: #ffffff;height: 250rpx;width: 250rpx;">
|
||||
<view v-if="loadingStep==1">
|
||||
<view>
|
||||
<!-- <u-circle-progress :percent="100" bg-color="none"
|
||||
inactive-color="#909399"
|
||||
active-color="#ffffff"
|
||||
:border-width="6"
|
||||
:duration="1000" :width="100">
|
||||
</u-circle-progress> -->
|
||||
<u-loading mode="circle" :size="80" color="#909399"></u-loading>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-font-32" style="font-weight: 420rpx;">正在处理...</view>
|
||||
</view>
|
||||
<view v-if="loadingStep==2">
|
||||
<view>
|
||||
<u-icon name="checkmark" color="#ffffff" :size="80"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-font-32" style="font-weight: 420rpx;">已通过验证</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollviewHeight:0,
|
||||
footerHeight:0,
|
||||
customInputStyle:{
|
||||
fontSize:'32rpx',
|
||||
color:'#909399',
|
||||
paddingLeft:'10rpx'
|
||||
},
|
||||
form:{
|
||||
id:'3',
|
||||
avatar:'/static/image/default/default-user/3.jpg',
|
||||
nickName:'王工',
|
||||
signature:'',
|
||||
userRemark:'你好,美女',
|
||||
address:'浙江 杭州',
|
||||
sex:0,
|
||||
friendPower:0,
|
||||
forbidSelf:false,
|
||||
forbidHis:false,
|
||||
},
|
||||
customBtnStyle:{
|
||||
padding:'20rpx 40rpx',
|
||||
width:'300rpx'
|
||||
},
|
||||
loadingShow:false,
|
||||
loadingStep:1,
|
||||
};
|
||||
},
|
||||
created:function(){
|
||||
let pageHeight= this.$u.sys().windowHeight;
|
||||
this.scrollviewHeight=pageHeight*0.783;
|
||||
this.footerHeight=pageHeight*0.09;
|
||||
},
|
||||
onLoad:function(option){
|
||||
let that=this;
|
||||
/* let param=JSON.parse(decodeURIComponent(option.personInfo));
|
||||
this.form=param; */
|
||||
this.form=this.yyy_current_user;
|
||||
},
|
||||
methods:{
|
||||
friendNameFocus:function(){
|
||||
let that=this;
|
||||
},
|
||||
changePower:function(status){
|
||||
let that=this;
|
||||
},
|
||||
submitApply:function(){
|
||||
let that=this;
|
||||
that.loadingStep=1;
|
||||
that.loadingShow=true;
|
||||
setTimeout(function(){
|
||||
that.loadingStep=2;
|
||||
setTimeout(function(){
|
||||
that.loadingShow=false;
|
||||
uni.navigateTo({
|
||||
animationType:'slide-in-left',
|
||||
url:'/pages/find/shake/friend_home?personInfo='+encodeURIComponent(JSON.stringify(that.form))
|
||||
});
|
||||
/* that.$u.route({
|
||||
url:'/pages/find/shake/friend_home',
|
||||
animationType:'slide-in-left',
|
||||
params:{
|
||||
personInfo:encodeURIComponent(JSON.stringify(that.form))
|
||||
},
|
||||
}) */
|
||||
},400)
|
||||
},800);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.inputBox{
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 16rpx;
|
||||
margin-top: 20rpx;
|
||||
padding:16rpx 26rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.footerbox{
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
//opacity: 0.7;
|
||||
}
|
||||
.label-font{
|
||||
font-size: 34rpx;
|
||||
color: #000000;
|
||||
font-weight: 420;
|
||||
}
|
||||
.u-title-color{
|
||||
color: #606266 !important;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,554 @@
|
||||
<template>
|
||||
<view class="message-item-container"
|
||||
:class="checkBoxFlag?'u-flex u-row-left u-col-center':''">
|
||||
<view v-if="checkBoxFlag">
|
||||
<template v-if="item.messageType!=0">
|
||||
<u-checkbox :size="46" v-model="item.checked"
|
||||
shape="circle" active-color="#19be6b" @click.native="checkChange(item)"></u-checkbox>
|
||||
</template>
|
||||
</view>
|
||||
<view class="u-p-b-20 u-p-t-20" style="width: 100%;">
|
||||
<!-- 系统信息-->
|
||||
<view v-if="item.messageType==0">
|
||||
<view v-if="item.showTimeFlag" style="text-align: center;color:#aaaaaa;font-size: 28rpx;margin-top: 20rpx;">
|
||||
<text v-if="item.formatTimeStr&&item.formatTimeStr.length>0">
|
||||
{{item.formatTimeStr}}
|
||||
</text>
|
||||
<text v-else>
|
||||
{{item.createTime.substring(10,16)}}
|
||||
</text>
|
||||
</view>
|
||||
<view style="text-align: center;color:#aaaaaa;font-size: 30rpx;margin-top: 20rpx;">
|
||||
{{parseSYSContent(item)}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<view class="chat-time">
|
||||
<text v-if="item.showTimeFlag">
|
||||
<text v-if="item.formatTimeStr&&item.formatTimeStr.length>0">
|
||||
{{item.formatTimeStr}}
|
||||
</text>
|
||||
<text v-else>
|
||||
{{item.createTime.length>10?item.createTime.substring(10,16):item.createTime}}
|
||||
</text>
|
||||
</text>
|
||||
</view>
|
||||
<view :class="{'chat-container':true,'chat-location-me':item.meFlag}">
|
||||
<view class="chat-icon-container u-flex u-row-center u-col-center"
|
||||
@click="toYYYPerson(item)">
|
||||
<view hover-class="my-hover-class"
|
||||
class="u-flex u-row-center u-col-center">
|
||||
<u-image :class="{'chat-icon':true,'chat-icon-me':item.meFlag}"
|
||||
:src="item.userAvatar" width="80rpx" height="80rpx"
|
||||
mode="aspectFill">
|
||||
<view slot="error"
|
||||
class="u-flex u-row-center u-col-center u-p-t-10"
|
||||
style="width: 80rpx;height: 80rpx;border-radius: 12rpx;">
|
||||
<view>
|
||||
<image src="/static/image/default/default-user/default-user.png"
|
||||
style="width: 50rpx;height:50rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chat-content-container u-p-t-10">
|
||||
<!-- 文本信息 -->
|
||||
<view v-if="item.contentType == messageApi.CONTENT_TYPE.TEXT_CONTENT_TYPE">
|
||||
<zb-tooltip placement="top" :visible.sync="toolTipFlag" color="#4c4c4c">
|
||||
<view slot="content" style="width: 550rpx;"
|
||||
class="u-flex u-flex-wrap u-row-left u-col-center">
|
||||
<view v-for="(item,index) in toolTipData" :key="index"
|
||||
style="text-align: center;padding: 20rpx 30rpx;">
|
||||
<view class="u-flex u-row-center u-col-center" @click="handleMessage(item)">
|
||||
<view>
|
||||
<u-image :src="item.icon" :width="36" :height="36"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="font-size:26rpx;margin-top: 6rpx;">
|
||||
<text>{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @longpress="toolTipFlag=!toolTipFlag"
|
||||
:class="{'chat-text-container':true,'chat-text-container-me u-text-reserve':item.meFlag}">
|
||||
<u-parse :html="parseTextContent(item)"
|
||||
:tag-style="tagStyle">
|
||||
</u-parse>
|
||||
</view>
|
||||
</zb-tooltip>
|
||||
</view>
|
||||
<!-- 图片信息 -->
|
||||
<view v-if="item.contentType == messageApi.CONTENT_TYPE.IMG_CONTENT_TYPE">
|
||||
<view class="content contentType3" @tap="showPic(item)">
|
||||
<u-image :width="item.content.width*2" :height="item.content.height*2"
|
||||
:lazy-load="true" mode="widthFix" :src="parseImageSrc(item)">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var previewSrcArr = [];
|
||||
export default {
|
||||
name: "message-item",
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: function() {
|
||||
return {
|
||||
"id": "",
|
||||
"chatGroupId": "",
|
||||
"userId": 0,
|
||||
"meFlag": true,
|
||||
"userName": '',
|
||||
"userAvatar": "",
|
||||
'messageType': "",
|
||||
"contentType": "",
|
||||
"content": {},
|
||||
"timestamp": "",
|
||||
"createTime": "",
|
||||
"platFrom": this.messageApi.msgPlat,
|
||||
}
|
||||
}
|
||||
},
|
||||
checkBoxFlag:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toolTipFlag: false,
|
||||
toolTipData: [{
|
||||
id: 1,
|
||||
icon: '/static/image/wx/handle-msg/copy.jpg',
|
||||
title: '复制',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
icon: '/static/image/wx/handle-msg/zhuanfa.jpg',
|
||||
title: '转发', //转发
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
icon: '/static/image/wx/handle-msg/shoucang.jpg',
|
||||
title: '收藏',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
icon: '/static/image/wx/handle-msg/shanchu.jpg',
|
||||
title: '删除',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
icon: '/static/image/wx/handle-msg/duoxuan.jpg',
|
||||
title: '多选',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
icon: '/static/image/wx/handle-msg/yinyong.jpg',
|
||||
title: '引用',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
icon: '/static/image/wx/handle-msg/tixing.jpg',
|
||||
title: '提醒',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
icon: '/static/image/wx/handle-msg/souyisou.jpg',
|
||||
title: '搜一搜',
|
||||
disabled: false
|
||||
},
|
||||
],
|
||||
tagStyle:{
|
||||
img:'width:22px;height:22px;position:relative;top:10rpx;',
|
||||
span:'margin:0px;padding:0px;font-size:30rpx',
|
||||
},
|
||||
previewVideoFlag:false, //播放视频控制器
|
||||
previewVideoSrc:'',
|
||||
redbagPopFlag:false,
|
||||
maskCustomStyle:{
|
||||
background: 'rgba(255, 255, 255, 0.7)'
|
||||
},
|
||||
currentRedBagInfo:null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
parseSYSContent:function(item){
|
||||
let that=this;
|
||||
let contentType = item.contentType;
|
||||
let contentObj=item.content;
|
||||
if (contentType == 1) {
|
||||
let msgStr = contentObj.text;
|
||||
console.log("transText",msgStr);
|
||||
return msgStr;
|
||||
}
|
||||
},
|
||||
//内容格式化
|
||||
parseTextContent: function(item) {
|
||||
let that=this;
|
||||
let contentType = item.contentType;
|
||||
let contentObj=item.content;
|
||||
let msgStr = contentObj.text;
|
||||
let sysType = contentObj.contentType; //内容类型
|
||||
let optionType = contentObj.optionType;
|
||||
let transText = this.transform(msgStr,'','',contentObj.linkName);
|
||||
return transText;
|
||||
},
|
||||
|
||||
//预览图片
|
||||
showPic:function(item){
|
||||
let url= item.content.fullPath;
|
||||
let target= item.content.fileSaveTarget;
|
||||
if(target=="local"){
|
||||
url= this.$u.api.multipartAddress.getFileByPath+url;
|
||||
}
|
||||
uni.previewImage({
|
||||
urls: previewSrcArr.length > 0 ? previewSrcArr : [url],
|
||||
current: url,
|
||||
loop: false,
|
||||
});
|
||||
},
|
||||
|
||||
parseImageSrc:function(item){
|
||||
let that=this;
|
||||
let msgId= item.id;
|
||||
let localSrc= uni.getStorageSync("image"+msgId);
|
||||
if(localSrc){
|
||||
return localSrc;
|
||||
}
|
||||
let contentObj=item.content;
|
||||
let url= contentObj.fullPath;
|
||||
let target= contentObj.fileSaveTarget;
|
||||
if(target=="local"){
|
||||
let fileName= contentObj.fileName;
|
||||
url=this.$u.api.multipartAddress.showFile+fileName;
|
||||
}
|
||||
that.setImageLocalSrc(url,msgId);
|
||||
return url;
|
||||
},
|
||||
parseImgSize: function(item, type) {
|
||||
let contentObj=item.content;
|
||||
let height = contentObj.height;
|
||||
let width = contentObj.width;
|
||||
if (type == "h") {
|
||||
if (height == null || height == undefined) {
|
||||
return "auto";
|
||||
} else {
|
||||
return height * 2;
|
||||
}
|
||||
} else {
|
||||
if (width == null || width == undefined) {
|
||||
return 300;
|
||||
} else {
|
||||
return width * 2;
|
||||
}
|
||||
}
|
||||
},
|
||||
setImageLocalSrc(url,msgId){
|
||||
let that=this;
|
||||
that.messageApi.setImageLocalSrc(url,msgId);
|
||||
},
|
||||
toYYYPerson:function(item){
|
||||
let that=this;
|
||||
if(item.meFlag==false){
|
||||
that.$emit("toYYYPerson",item);
|
||||
}
|
||||
},
|
||||
checkChange:function(msg){
|
||||
let that=this;
|
||||
that.$emit("checkChange",msg);
|
||||
},
|
||||
handleMessage:function(menuItem){
|
||||
this.toolTipFlag=false;
|
||||
this.$emit("handleMessage",menuItem,this.item);
|
||||
},
|
||||
transform (content, fileSize, fileSuffix,linkName) {
|
||||
if (fileSize === undefined) {
|
||||
fileSize = '';
|
||||
}
|
||||
if (fileSuffix === undefined) {
|
||||
fileSuffix = '';
|
||||
}
|
||||
let html = function(end) {
|
||||
return new RegExp('\\n*\\[' + (end || '') +
|
||||
'(code|pre|div|span|p|table|thead|th|tbody|tr|td|ul|li|ol|li|dl|dt|dd|h2|h3|h4|h5)([\\s\\S]*?)]\\n*',
|
||||
'g');
|
||||
};
|
||||
if (content)
|
||||
{
|
||||
content = content.replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/'/g, ''')
|
||||
.replace(/"/g, '"') // XSS
|
||||
.replace(html(), '<$1 $2>')
|
||||
.replace(html('/'), '</$1>') // 转移HTML代码
|
||||
.replace(/\n/g, '<br>'); // 转义换行
|
||||
content=getUrl(content);
|
||||
content=content.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
|
||||
let alt = face.replace(/^face/g, '');
|
||||
let fa =faceUtil.emojiMap;
|
||||
let srcPrefix=faceUtil.emojiUrl;
|
||||
let imageSrc=srcPrefix+ fa[alt];
|
||||
//console.log("表情",imageSrc);
|
||||
let imgContent= '<img class="emoji" src="' +imageSrc+ '"/>';
|
||||
return imgContent;
|
||||
})
|
||||
// 转义图片
|
||||
.replace(/img\[([^\s]+?)]/g, function(img) {
|
||||
let href = img.replace(/(^img\[)|(]$)/g, '');
|
||||
return '<img class="message-img" src="' + href + '" alt="消息图片不能加载">';
|
||||
})
|
||||
// 转义文件
|
||||
.replace(/file\([\s\S]+?\)\[[\s\S]*?]/g, function(str) {
|
||||
let href = (str.match(/file\(([\s\S]+?)\)\[/) || [])[1];
|
||||
let text = (str.match(/\)\[([\s\S]*?)]/) || [])[1];
|
||||
if (!href) return str;
|
||||
return '<div class="flex"><i class="iconfont icon-xiazai-yun"></i><a class="message-file" href="' +
|
||||
href + '">' + (text || href) + '</a><span>' + fileSize + '</span></div>'
|
||||
})
|
||||
// 转义音频
|
||||
.replace(/audio\[([^\s]+?)]/g, function(audio) {
|
||||
return '<div class="message-audio" data-src="' + audio.replace(/(^audio\[)|(]$)/g, '') +
|
||||
'"><i class="layui-icon"></i><p>音频消息</p></div>';
|
||||
})
|
||||
// 转义视频
|
||||
.replace(/video\[([^\s]+?)]/g, function(video) {
|
||||
return '<div class="message-video" data-src="' + video.replace(/(^video\[)|(]$)/g, '') +
|
||||
'"><i class="layui-icon"></i></div>';
|
||||
})
|
||||
// 转义链接
|
||||
.replace(/a\([\s\S]+?\)\[[\s\S]*?]/g, function(str) {
|
||||
let href = (str.match(/a\(([\s\S]+?)\)\[/) || [])[1];
|
||||
let text = (str.match(/\)\[([\s\S]*?)]/) || [])[1];
|
||||
if (!href) return str;
|
||||
if(linkName&&linkName.length>0){
|
||||
return '<a href="' + href + '" target="_blank">' + linkName + '</a>';
|
||||
};
|
||||
return '<a href="' + href + '" target="_blank">' + (text || href) + '</a>';
|
||||
})
|
||||
|
||||
}
|
||||
return content;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-item-container {
|
||||
padding:0rpx 20rpx;
|
||||
}
|
||||
|
||||
.chat-time {
|
||||
padding: 4rpx 0rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
justify-items: flex-start;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.chat-location-me {
|
||||
flex-direction: row-reverse;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.chat-icon-me {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.chat-icon-container {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.chat-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.chat-content-container {
|
||||
margin: 0rpx 15rpx;
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.chat-user-name {
|
||||
font-size: 26rpx;
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.chat-text-container {
|
||||
//word-break: break-all;
|
||||
word-wrap:break-word;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 20rpx 20rpx;
|
||||
margin-top: 5rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.chat-text-container-me {
|
||||
background-color: #95ec69;
|
||||
}
|
||||
|
||||
.emoji {
|
||||
width: 40rpx !important;
|
||||
height: 40rpx !important;
|
||||
position: relative;
|
||||
top: 10rpx;
|
||||
}
|
||||
|
||||
//语音信息样式
|
||||
.content-audio-container {
|
||||
background-color: #ffffff;
|
||||
border-radius: 10rpx;
|
||||
padding: 25rpx 20rpx;
|
||||
margin-top: 5rpx;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 500rpx;
|
||||
/* #endif */
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.voice_icon {
|
||||
height: 34rpx;
|
||||
width: 34rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.voice_icon_right {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-3.png');
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.voice_icon_left {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-3.png');
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.voice_icon_right_an {
|
||||
animation: voiceAn_right 1s linear alternate infinite;
|
||||
}
|
||||
|
||||
.voice_icon_left_an {
|
||||
animation: voiceAn_left 1s linear alternate infinite;
|
||||
}
|
||||
|
||||
@keyframes voiceAn_right {
|
||||
0% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-1.png');
|
||||
}
|
||||
|
||||
50% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-2.png');
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: url('@/static/images/chat/voice/voice-left-3.png');
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes voiceAn_left {
|
||||
0% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-1.png');
|
||||
}
|
||||
|
||||
50% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-2.png');
|
||||
}
|
||||
|
||||
100% {
|
||||
background-image: url('@/static/images/chat/voice/voice-right-3.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//我的语音信息样式
|
||||
.chat-audio-container-me {
|
||||
background-color: #95ec69;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
//文件信息样式
|
||||
.contentType-file {
|
||||
width: 450rpx;
|
||||
padding: 0;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
//红包
|
||||
.contentType-redbag {
|
||||
padding: 20rpx 30rpx;
|
||||
padding-bottom: 6rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: #f29100;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
//位置
|
||||
.contentType-location {
|
||||
width: 500rpx;
|
||||
padding: 0rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
//组合信息
|
||||
.contentType-fixed {
|
||||
border-radius: 10rpx;
|
||||
font-size: 32rpx;
|
||||
word-break: break-word;
|
||||
padding: 20rpx;
|
||||
background-color: #95ec69 !important;
|
||||
border: 1rpx solid #e4e7ed;
|
||||
max-width: 400rpx;
|
||||
|
||||
.img {
|
||||
width: 200rpx;
|
||||
height: auto;
|
||||
max-width: 300rpx;
|
||||
max-height: 400rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.u-flex-reserve {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.u-text-reserve {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<view class="zhuanfa-container">
|
||||
<template v-if="moreFlag==false">
|
||||
<view>
|
||||
<u-navbar :is-back="false"
|
||||
back-icon-color="#333333"
|
||||
title=""
|
||||
:border-bottom="false"
|
||||
:background="{ background: '#f0f0f0'}"
|
||||
z-index="1001">
|
||||
<view class="slot-wrap u-flex u-row-between u-col-center u-font-32">
|
||||
<view @click="goback()">
|
||||
<text>关闭</text>
|
||||
</view>
|
||||
<view style="font-weight: bold;font-size: 34rpx;color: #000000;">
|
||||
<text>选择一个聊天</text>
|
||||
</view>
|
||||
<view @click="changeMoreFlag(1)">
|
||||
<text>多选</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view>
|
||||
<view style="background-color: #f0f0f0;" class="u-p-30">
|
||||
<view class="u-flex u-row-center u-col-center"
|
||||
style="background-color: #ffffff;height:70rpx;border-radius: 10rpx;color: #c0c0c0;">
|
||||
<view class="u-m-r-20">
|
||||
<u-icon class="u-clear-icon" top="6rpx" :size="40" name="search" color="#c0c0c0"></u-icon>
|
||||
</view>
|
||||
<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
|
||||
</view>
|
||||
<view class="u-m-t-40 u-p-b-20" v-if="latestZhuanFa.length>0">
|
||||
<view style="font-size: 30rpx;font-weight: bold;">
|
||||
<text>最近转发</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center u-m-t-20" style="text-align: center;">
|
||||
<view class="u-m-r-40" v-for="(lastestItem,index) in latestZhuanFa" :key="index">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view style="height: 100rpx;width: 100rpx;">
|
||||
<u-image :src="lastestItem.avatar"
|
||||
:width="100" :height="100" :border-radius="12"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-line-2 u-tips-color"
|
||||
style="width: 100rpx;height: 64rpx;line-height: 30rpx;font-size: 26rpx;padding:8rpx;">
|
||||
<text>{{lastestItem.nickName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-30" style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view class="u-flex u-row-between u-col-center u-font-30">
|
||||
<view style="color: #000000;font-weight: bold;">
|
||||
<text>最近聊天</text>
|
||||
</view>
|
||||
<view style="color:#36648b;">
|
||||
<text>创建聊天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="lastestChatUsers.length>0" class="u-m-t-30">
|
||||
<view v-for="(user,uIndex) in lastestChatUsers" :key="uIndex"
|
||||
class="u-flex u-row-left u-col-center u-p-t-16 u-p-b-16">
|
||||
<view style="width:90rpx;" class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-image :src="user.avatar" :width="76" :height="76" border-radius="8rpx"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 600rpx;"
|
||||
class="u-flex u-row-between u-col-center u-p-20 u-border-bottom">
|
||||
<view style="text-align: left;">
|
||||
<view class="u-line-1" style="font-size: 32rpx;color: #000000;">
|
||||
<text>{{user.nickName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-if="moreFlag==true">
|
||||
<view>
|
||||
<u-navbar :is-back="false"
|
||||
back-icon-color="#333333"
|
||||
title=""
|
||||
:border-bottom="false"
|
||||
:background="{ background: '#f0f0f0'}"
|
||||
z-index="1001">
|
||||
<view class="slot-wrap u-flex u-row-between u-col-center u-font-32">
|
||||
<view @click="changeMoreFlag(0)">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
<view style="font-weight: bold;font-size: 34rpx;color: #000000;">
|
||||
<text>选择多个聊天</text>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="checkedUsers.length<1" style="border-radius: 10rpx;background-color: #dddddd;color: #909399;padding: 10rpx 20rpx;">
|
||||
<text>完成</text>
|
||||
</view>
|
||||
<view v-if="checkedUsers.length>0"
|
||||
@click="openZhuanFa()"
|
||||
style="border-radius: 10rpx;background-color: #19be6b;color: #ffffff;padding: 10rpx 20rpx;">
|
||||
<text>完成({{checkedUsers.length}})</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<view style="background-color: #f0f0f0;">
|
||||
<view v-if="checkedUsers.length<1" class="u-p-30">
|
||||
<view class="u-flex u-row-center u-col-center"
|
||||
style="background-color: #ffffff;height:70rpx;border-radius: 10rpx;color: #c0c0c0;">
|
||||
<view class="u-m-r-20">
|
||||
<u-icon class="u-clear-icon" top="6rpx" :size="40" name="search" color="#c0c0c0"></u-icon>
|
||||
</view>
|
||||
<view style="color: #c0c0c0;font-size: 34rpx;">搜索</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="u-p-30">
|
||||
<view class="u-flex u-row-left u-col-center"
|
||||
style="background-color: #ffffff;border-radius: 10rpx;color: #c0c0c0;">
|
||||
<view class="u-p-20" style="width: 400rpx;">
|
||||
<scroll-view class="hidden-scroll-bar"
|
||||
:scroll-into-view="scrollIntoViewId"
|
||||
:scroll-with-animation="true"
|
||||
:scroll-y="false" :scroll-x="true" style="width:400rpx;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-l-20"
|
||||
v-for="(checkeItem,index) in checkedUsers"
|
||||
:key="index">
|
||||
<view :id="'u-'+checkeItem.chatNumber"
|
||||
class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image :src="checkeItem.avatar"
|
||||
:width="80" :height="80" :border-radius="12"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-l-30" v-if="checkedUsers.length<4" style="color: #909399;font-size: 34rpx;">
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view v-if="checkedUsers.length>=4" class="u-p-l-30" style="color: #909399;font-size: 34rpx;" >
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-30" v-if="latestZhuanFa.length>0">
|
||||
<view style="font-size: 30rpx;font-weight: bold;">
|
||||
<text>最近转发</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center u-m-t-20" style="text-align: center;">
|
||||
<view class="u-m-r-40" v-for="(lastestItem,index) in latestZhuanFa" :key="index">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image :src="lastestItem.avatar"
|
||||
:width="100" :height="100" :border-radius="12"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-line-2 u-tips-color"
|
||||
style="width: 100rpx;height: 64rpx;line-height: 30rpx;font-size: 26rpx;padding: 8rpx;">
|
||||
<text>{{lastestItem.nickName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-30"
|
||||
style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view class="u-flex u-row-between u-col-center u-font-30">
|
||||
<view style="color: #000000;font-weight: bold;">
|
||||
<text>最近聊天</text>
|
||||
</view>
|
||||
<view style="color:#36648b;">
|
||||
<text>从通讯录选择</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="lastestChatUsers.length>0" class="u-m-t-30">
|
||||
<view v-for="(user,uIndex) in lastestChatUsers" :key="uIndex"
|
||||
class="u-flex u-row-left u-col-center u-m-b-20">
|
||||
<view>
|
||||
<u-checkbox :size="46" v-model="user.checked" @click.native="checkChange(user)"
|
||||
shape="circle" active-color="#19be6b"></u-checkbox>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center u-p-b-20">
|
||||
<view style="width:90rpx;" class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image :src="user.avatar" :width="76" :height="76" border-radius="8rpx"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-20 u-border-bottom">
|
||||
<view style="text-align: left;">
|
||||
<view class="u-line-1" style="font-size: 32rpx;color: #000000;width: 480rpx;">
|
||||
<text>{{user.nickName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<u-popup v-model="openZhuanFaFlag" mode="center" border-radius="16"
|
||||
:mask-close-able="false"
|
||||
width="625rpx" :height="checkedUsers.length>3?'600rpx':'520rpx'">
|
||||
<view class="u-p-30">
|
||||
<view style="font-size: 34rpx;font-weight: bold;">
|
||||
<text>分别发送给:</text>
|
||||
</view>
|
||||
<view class="u-m-t-30">
|
||||
<view class="u-flex u-flex-wrap u-row-left u-col-center">
|
||||
<view v-for="(checkeItem,index) in checkedUsers" class="u-m-r-16 u-m-t-10"
|
||||
:key="index">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image :src="checkeItem.avatar"
|
||||
:width="80" :height="80" :border-radius="12"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-m-t-30 u-p-t-30 u-p-b-10 u-tips-color u-border-top">
|
||||
<view>
|
||||
<text>[逐条转发]共{{selectedMessages.length>0?selectedMessages.length:2}}条信息</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="arrow-right" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-b-20">
|
||||
<view style="background-color: #f7f7f7;width: 550rpx;padding:16rpx 20rpx;text-align: left;color: #909399;font-size: 30rpx;">
|
||||
<text>给朋友留言</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="position: absolute;width: 560rpx;bottom:30rpx;"
|
||||
class="u-flex u-row-between u-col-center u-font-34 u-p-t-30 u-border-top">
|
||||
<view style="color: #000000;text-align: center;width: 50%;">
|
||||
<view @click="cancelZhuanFa()">
|
||||
<text>取消</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="color: #36648b;text-align: center;width: 50%;">
|
||||
<view @click="confirmSend()">
|
||||
<text>发送({{checkedUsers.length}})</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-popup v-model="maxLengthFlag" mode="center" border-radius="16"
|
||||
:mask-close-able="false" height="300rpx"
|
||||
width="620rpx">
|
||||
<view style="text-align: center;font-weight: bold;font-size: 34rpx;">
|
||||
<view class="u-flex u-row-center u-col-center" style="width: 100%; height: 200rpx;">
|
||||
<view>
|
||||
<text>最多只能选择9个聊天</text>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="maxLengthFlag=false"
|
||||
style="color: #36648b;padding-top:30rpx;padding-bottom: 30rpx; width: 100%;" class="u-border-top">
|
||||
<text>我知道了</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
moreFlag:false,
|
||||
scrollHidden:false,
|
||||
checkNum:0,
|
||||
latestZhuanFa:[],
|
||||
checkedUsers:[],
|
||||
scrollIntoViewId:"",
|
||||
lastestChatUsers:[],
|
||||
openZhuanFaFlag:false,
|
||||
maxLengthFlag:false,
|
||||
selectedMessages:[],
|
||||
};
|
||||
},
|
||||
onPageScroll:function(e){
|
||||
let top= e.scrollTop;
|
||||
let pageHeight= this.$u.sys().windowHeight;
|
||||
if((top/pageHeight)>0.25){
|
||||
console.log("隐藏");
|
||||
this.scrollHidden=true;
|
||||
}else{
|
||||
this.scrollHidden=false;
|
||||
}
|
||||
},
|
||||
onLoad:function(option){
|
||||
if(option.checkedMessages){
|
||||
this.selectedMessages=JSON.parse(decodeURIComponent(option.checkedMessages));
|
||||
this.selectedMessages[0].showTimeFlag=true;
|
||||
};
|
||||
this.checkedUsers=[];
|
||||
this.latestZhuanFa=this.vuex_lastestZhuanFaUsers;
|
||||
this.latestZhuanFa.map(function(item){
|
||||
item.checked=false;
|
||||
});
|
||||
this.lastestChatUsers=this.vuex_yyyFriendList.concat(this.latestZhuanFa);
|
||||
this.lastestChatUsers.map(function(item){
|
||||
item.checked=false;
|
||||
});
|
||||
},
|
||||
|
||||
methods:{
|
||||
goback:function(){
|
||||
uni.navigateBack();
|
||||
},
|
||||
changeMoreFlag:function(value){
|
||||
this.moreFlag=value;
|
||||
},
|
||||
checkChange:function(user){
|
||||
let that=this;
|
||||
let isExist = this.checkedUsers.some(item=>item.chatNumber===user.chatNumber);
|
||||
if(!isExist){
|
||||
if(that.checkedUsers.length>=9){
|
||||
this.maxLengthFlag=true;
|
||||
return;
|
||||
};
|
||||
this.checkedUsers.push(user);
|
||||
this.$nextTick(function(){
|
||||
that.scrollIntoViewId="u-"+user.chatNumber;
|
||||
})
|
||||
}else{
|
||||
this.checkedUsers = this.checkedUsers.filter(function(item) {
|
||||
return item.chatNumber!=user.chatNumber
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
openZhuanFa:function(){
|
||||
this.openZhuanFaFlag=true;
|
||||
},
|
||||
confirmSend:function(){
|
||||
let that=this;
|
||||
console.log("===选择的用户===",that.checkedUsers);
|
||||
console.log("===转发的信息===",that.selectedMessages);
|
||||
let lastMsg=that.selectedMessages[that.selectedMessages.length-1];
|
||||
let friendList=that.vuex_yyyFriendList;
|
||||
for (var i = 0; i < friendList.length; i++) {
|
||||
let friend= friendList[i];
|
||||
friend.checked=false;
|
||||
let isExist = that.checkedUsers.some(item=>item.chatNumber===friend.chatNumber);
|
||||
if(isExist){
|
||||
that.setLastMsgContent(friend,lastMsg,that.selectedMessages)
|
||||
}
|
||||
};
|
||||
that.$nextTick(function(){
|
||||
that.$u.vuex("vuex_yyyFriendList",friendList);
|
||||
that.openZhuanFaFlag=false;
|
||||
uni.navigateBack();
|
||||
});
|
||||
},
|
||||
cancelZhuanFa:function(){
|
||||
this.openZhuanFaFlag=false;
|
||||
},
|
||||
|
||||
setLastMsgContent:function(friend,message){
|
||||
let that=this;
|
||||
let formatContent="";
|
||||
let contentType=message.contentType;
|
||||
let contentObj=message.content;
|
||||
switch (contentType+""){
|
||||
case "1":
|
||||
formatContent=contentObj.text;
|
||||
formatContent=formatContent.replace(/face\[([^\s\[\]]+?)]/g, function(face) {
|
||||
return face.replace(/^face/g, '')
|
||||
});
|
||||
break;
|
||||
case "2":
|
||||
formatContent="[图片]";
|
||||
break;
|
||||
case "3":
|
||||
formatContent="[视频]";
|
||||
break;
|
||||
case "4":
|
||||
formatContent="[语音]";
|
||||
break;
|
||||
case "7":
|
||||
formatContent="[红包]";
|
||||
break;
|
||||
case "10":
|
||||
formatContent="[聊天记录]";
|
||||
break;
|
||||
case "11":
|
||||
formatContent="[图文]";
|
||||
break;
|
||||
case "12":
|
||||
formatContent="[视频文字]";
|
||||
break;
|
||||
default:
|
||||
formatContent="[其他]";
|
||||
break;
|
||||
};
|
||||
console.log("最后一条信息",formatContent);
|
||||
console.log("群号",friend.chatNumber);
|
||||
if(friend.chatNumber=="000000"){
|
||||
let obj={
|
||||
"lastMsgContent":formatContent,
|
||||
"messageList":that.selectedMessages,
|
||||
"lastMsgTime":message.createTime,
|
||||
};
|
||||
this.$u.vuex("vuex_fileAssist",obj);
|
||||
}else{
|
||||
friend.lastMsgContent=formatContent;
|
||||
friend.sendTimeStr=message.createTime;
|
||||
friend.messageList=that.selectedMessages;
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
||||
flex: 1;
|
||||
/* 如果您想让slot内容与导航栏左右有空隙 */
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<view>
|
||||
<view>
|
||||
<u-navbar :custom-back="goback" title=" " :background="{ background: '#ffffff' }" :border-bottom="false">
|
||||
<view class="slot-wrap" @click="toDetail()">
|
||||
<view>
|
||||
<u-icon name="more-dot-fill" color="#000000" :size="35"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
</view>
|
||||
<view class="friendInfo">
|
||||
<view class="img">
|
||||
<u-image :src="friendInfo.avatar"
|
||||
mode="aspectFill" width="120" height="120" border-radius="12">
|
||||
<u-loading slot="loading"></u-loading>
|
||||
<view slot="error"
|
||||
class="u-flex u-row-center u-col-center u-p-t-10"
|
||||
style="width: 90rpx;height: 90rpx;background-color: #f1f1f1;border-radius: 12rpx;">
|
||||
<view>
|
||||
<image src="/static/image/default/default-user/default-user.png"
|
||||
style="width: 64rpx;height: 64rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-image>
|
||||
</view>
|
||||
|
||||
<view class="friendInfo-desc">
|
||||
<view class="friendInfo-desc-name u-flex u-row-left u-col-center">
|
||||
<view class="u-line-2" style="font-size:42rpx;max-width: 400rpx;">
|
||||
<text>{{friendInfo.nickName}}</text>
|
||||
</view>
|
||||
<view class="u-m-l-10 u-flex u-row-center u-col-center u-p-b-10">
|
||||
<view>
|
||||
<u-image v-if="friendInfo.sex==1" src="/static/image/chat/addFriend/woman.png" width="34rpx" height="34rpx"></u-image>
|
||||
<u-image v-if="friendInfo.sex==0" src="/static/image/chat/addFriend/man.png" width="34rpx" height="34rpx"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="friendInfo-desc-gray u-line-1 u-m-b-4" style="max-width: 500rpx;">微信号：{{friendInfo.chatNumber}}</view>
|
||||
<view v-if="friendInfo.address&&friendInfo.address!=0&&friendInfo.address.length>0" class="friendInfo-desc-gray">地区：{{friendInfo.address}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-cell-group>
|
||||
<u-cell-item title="备注和标签" :title-style="titleStyle"></u-cell-item>
|
||||
<u-cell-item :border-bottom="false" title="朋友权限"
|
||||
:title-style="titleStyle" @click="setFiendPermission"></u-cell-item>
|
||||
<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
||||
<u-cell-item :title-style="titleStyle">
|
||||
<view slot="title" class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<text>朋友圈</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center u-m-l-50"
|
||||
v-if="friendInfo.friendCircle&&friendInfo.friendCircle.length>0">
|
||||
<template v-for="(circle,index) in friendInfo.friendCircle.length">
|
||||
<view class="u-m-l-10" v-if="circle!=circle&&circle.length>0">
|
||||
<u-image :src="circle" :width="90" :height="90"></u-image>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</u-cell-item>
|
||||
<u-cell-item title="视频号" :title-style="titleStyle"></u-cell-item>
|
||||
<u-cell-item :border-bottom="false" title="更多信息" :title-style="titleStyle" @click="linkToMoreInfoMation"></u-cell-item>
|
||||
</u-cell-group>
|
||||
<u-gap height="20" bg-color="#eee" margin-top="0" margin-bottom="1"></u-gap>
|
||||
<view style="background-color: #ffffff;">
|
||||
<view class="u-flex u-row-center u-col-center u-p-30"
|
||||
style="font-size: 32rpx;color: #335f83;">
|
||||
<view class="u-m-r-20">
|
||||
<!-- width="36rpx" height="36rpx" -->
|
||||
<u-image src="/static/image/chat/sms-send.png" mode="aspectFit" width="40rpx" height="40rpx"></u-image>
|
||||
</view>
|
||||
<view style="font-weight: 450;">
|
||||
<text>发信息</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="1" bg-color="#eee"></u-gap>
|
||||
<view class="u-flex u-row-center u-col-center u-p-30"
|
||||
style="font-size: 32rpx;color: #335f83;">
|
||||
<view class="u-m-r-20">
|
||||
<!-- src="/static/image/chat/yinshipin.jpg" width="40rpx" height="40rpx"-->
|
||||
<u-image src="/static/image/chat/video-call.png" mode="aspectFit" width="50rpx" height="50rpx"></u-image>
|
||||
</view>
|
||||
<view style="font-weight: 450;">
|
||||
<text>音视频通话</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-action-sheet :list="callList" v-model="callShow" @click="callClick"></u-action-sheet>
|
||||
<u-top-tips ref="uTips"></u-top-tips>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
titleStyle: {
|
||||
marginLeft: '10rpx',
|
||||
color: '#000000',
|
||||
fontSize: "34rpx",
|
||||
},
|
||||
friendInfo: {},
|
||||
callList:[
|
||||
{text: '视频通话'},
|
||||
{text: '语音通话'}
|
||||
],
|
||||
callShow:false,
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
let that=this;
|
||||
/* let param=JSON.parse(decodeURIComponent(option.personInfo));
|
||||
this.friendInfo=param; */
|
||||
this.friendInfo=this.yyy_current_user;
|
||||
//往好友里面塞
|
||||
let arr=JSON.parse(JSON.stringify(this.vuex_yyyFriendList));
|
||||
let isExist = arr.some(item=>item.chatNumber===this.friendInfo.chatNumber);
|
||||
if(!isExist){
|
||||
arr.push(this.friendInfo);
|
||||
};
|
||||
this.$u.vuex("vuex_yyyFriendList",arr);
|
||||
console.log("this.vuex_yyyFriendList=======",this.vuex_yyyFriendList);
|
||||
},
|
||||
methods: {
|
||||
goback(){
|
||||
console.log("自定义返回");
|
||||
uni.navigateBack({
|
||||
delta:3,
|
||||
animationType:"slide-out-right"
|
||||
});
|
||||
},
|
||||
//创建单聊会话
|
||||
createSingleChat:function(){
|
||||
let that=this;
|
||||
},
|
||||
//跳转聊天窗口
|
||||
linkToChatting:function(groupInfo) {
|
||||
let that=this;
|
||||
},
|
||||
//音视频弹窗
|
||||
toCall() {
|
||||
return;
|
||||
},
|
||||
//确认发起音视频
|
||||
callClick:function(index){
|
||||
this.globalUtil.utilAlert("不能进,没完事~敬请期待");
|
||||
},
|
||||
//设置标签
|
||||
setFiendTag() {
|
||||
this.globalUtil.utilAlert("不能进,没完事~敬请期待");
|
||||
return;
|
||||
},
|
||||
//设置朋友权限
|
||||
setFiendPermission() {
|
||||
this.globalUtil.utilAlert("不能进,没完事~敬请期待");
|
||||
return;
|
||||
},
|
||||
//查看朋友的朋友圈
|
||||
viewHisFiendCircle() {
|
||||
this.globalUtil.utilAlert("不能进,没完事~敬请期待");
|
||||
return;
|
||||
},
|
||||
//更多信息
|
||||
linkToMoreInfoMation() {
|
||||
this.$u.route({
|
||||
url: "/pages/tabbar/contact/friends/friend-more-info",
|
||||
params: {
|
||||
signature: this.friendInfo.signature
|
||||
}
|
||||
})
|
||||
},
|
||||
toDetail:function(){
|
||||
this.$u.route({
|
||||
url: "/pages/tabbar/contact/friends/friend-home-detail",
|
||||
params: {
|
||||
friendInfo:encodeURIComponent(JSON.stringify(this.friendInfo))
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
/* 如果您想让slot内容与导航栏左右有空隙 */
|
||||
padding: 0 30rpx;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.perch {
|
||||
height: 10rpx;
|
||||
}
|
||||
|
||||
.friendInfo {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
padding: 20rpx 30rpx 40rpx 40rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.img {
|
||||
display: block;
|
||||
width: 130rpx;
|
||||
height: 130rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
&-desc {
|
||||
padding-left: 30rpx;
|
||||
&-name {
|
||||
font-weight: bold;
|
||||
font-size: 36rpx;
|
||||
transform: translateY(-10rpx);
|
||||
color: #000000;
|
||||
}
|
||||
&-gray {
|
||||
color: #757575;
|
||||
font-size: 32rpx;
|
||||
font-weight: 420rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,80 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true"
|
||||
back-icon-color="#ffffff"
|
||||
title="摇一摇"
|
||||
:background="{ background: '#101010'}"
|
||||
title-color="#ffffff"
|
||||
:title-bold="true"
|
||||
title-size="34"
|
||||
:border-bottom="false"
|
||||
z-index="1001">
|
||||
<view slot="right" class="u-p-r-30" @click="toSet()">
|
||||
<u-icon name="more-dot-fill" color="#ffffff" :size="36"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<view class="u-flex u-row-center u-col-center" style="padding-top: 60%;">
|
||||
<view>
|
||||
<u-image src="/static/image/wx/yaoyiyao-1.jpg" :width="200" :height="200"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-box u-flex u-row-around u-col-center">
|
||||
<view @click="activeTab=0">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image v-if="activeTab==0" src="/static/image/wx/yaoyiyao-2.jpg" :width="48" :height="48"></u-image>
|
||||
<u-image v-if="activeTab==1" src="/static/image/wx/yaoyiyao-b.jpg" :width="48" :height="48"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-8" :style="activeTab==1?'color:#595959;':''">
|
||||
<text>人</text>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="activeTab=1">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image v-if="activeTab==0" src="/static/image/wx/yaoyiyao-3.jpg" :width="48" :height="48"></u-image>
|
||||
<u-image v-if="activeTab==1" src="/static/image/wx/yaoyiyao-c.jpg" :width="48" :height="48"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-8" :style="activeTab==0?'color:#595959;':''">
|
||||
<text>歌曲和哼唱</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab:0,
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
toSet:function(){
|
||||
console.log("去摇一摇设置");
|
||||
uni.$u.route("/pages/find/shake/set");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-box{
|
||||
color: #ffffff;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 80rpx;
|
||||
padding: 20rpx 100rpx;
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #101010;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true"
|
||||
back-icon-color="#333333"
|
||||
title="打招呼的人"
|
||||
:background="{ background: '#f0f0f0'}"
|
||||
title-color="#000000"
|
||||
:title-bold="true"
|
||||
title-size="34"
|
||||
:border-bottom="false"
|
||||
z-index="1001">
|
||||
<view slot="right" class="u-p-r-30 u-font-34" @click="clear()">
|
||||
<text :style="linkedUsers.length<1?'color:#909399;':'color:#000000'">清空</text>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view class="u-p-30">
|
||||
<view v-if="linkedUsers.length>0">
|
||||
<view class="u-p-b-20">
|
||||
<text>近三天</text>
|
||||
</view>
|
||||
<view v-for="(user,uIndex) in linkedUsers" :key="uIndex"
|
||||
class="u-flex u-row-left u-col-center u-p-b-12">
|
||||
<view style="width:100rpx;" class="u-flex u-row-left u-col-center">
|
||||
<view @longpress="delUser(user,uIndex)">
|
||||
<u-image :src="user.avatar" :width="76" :height="76" border-radius="8rpx">
|
||||
<view slot="error"
|
||||
class="u-flex u-row-center u-col-center u-p-t-10 "
|
||||
style="width: 76rpx;height: 76rpx;background-color: #f0f0f0;border-radius: 12rpx;">
|
||||
<view>
|
||||
<image src="/static/image/default/default-user/default-user.png"
|
||||
style="width: 40rpx;height: 40rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="toPersonInfo(user)"
|
||||
style="width: 600rpx;"
|
||||
class="u-flex u-row-between u-col-center u-p-t-6 u-p-b-12 u-border-bottom">
|
||||
<view style="text-align: left;">
|
||||
<view class="u-line-1" style="font-size: 32rpx;color: #000000;">
|
||||
<text>{{user.nickName}}</text>
|
||||
</view>
|
||||
<view class="u-tips-color u-font-28">
|
||||
<text>{{user.userRemark}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="!idAdd(user)">
|
||||
<view style="background-color: #f0f0f0;color: #000000;padding: 10rpx 20rpx;border-radius: 6rpx;text-align: center;font-size: 30rpx;">
|
||||
<text>查看</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="u-font-28" style="position:relative;top: -16rpx;color: #595b5f;">
|
||||
<text>已添加</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else style="padding-top: 40%;">
|
||||
<view style="text-align: center;color: #000000;font-size: 34rpx;">
|
||||
<text>暂时没有人向你打招呼</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
linkedUsers:[],
|
||||
};
|
||||
},
|
||||
onLoad:function(){
|
||||
this.linkedUsers=JSON.parse(JSON.stringify(this.vuex_linkedUsers));
|
||||
},
|
||||
methods:{
|
||||
idAdd:function(user){
|
||||
let that=this;
|
||||
if(that.vuex_yyyFriendList.length<1){
|
||||
return false;
|
||||
}else{
|
||||
for (var i = 0; i < that.vuex_yyyFriendList.length; i++) {
|
||||
let item= that.vuex_yyyFriendList[i];
|
||||
if(item.chatNumber==user.chatNumber){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
return false;
|
||||
},
|
||||
clear:function(){
|
||||
this.$u.vuex("vuex_linkedUsers",[]);
|
||||
this.$u.vuex("vuex_yyyFriendList",[]);
|
||||
this.$u.vuex("vuex_lastestZhuanFaUsers",[]);
|
||||
this.$u.vuex("yyy_current_user",null);
|
||||
this.linkedUsers=[];
|
||||
},
|
||||
toPersonInfo:function(user){
|
||||
let that=this;
|
||||
that.$u.vuex("yyy_current_user",user);
|
||||
this.$u.route({
|
||||
url:'/pages/tabbar/find/yaoyiyao/yaoyiyao-user-detail',
|
||||
});
|
||||
},
|
||||
delUser:function(user,index){
|
||||
let that=this;
|
||||
uni.showModal({
|
||||
title: '操作',
|
||||
content: user.sendTimeStr,
|
||||
cancelText:'删除',
|
||||
confirmText:'修改时间',
|
||||
editable:true,
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
let newTime=res.content;
|
||||
if(newTime.length>0){
|
||||
that.linkedUsers[index].sendTimeStr=newTime;
|
||||
that.$u.vuex("vuex_linkedUsers",that.linkedUsers);
|
||||
}
|
||||
return;
|
||||
} else if (res.cancel) {
|
||||
that.linkedUsers.splice(index,1);
|
||||
that.$u.vuex("vuex_linkedUsers",that.linkedUsers);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true"
|
||||
back-icon-color="#333333"
|
||||
title="摇一摇设置"
|
||||
:background="{ background: '#f0f0f0'}"
|
||||
title-color="#000000"
|
||||
:title-bold="true"
|
||||
title-size="34"
|
||||
:border-bottom="false"
|
||||
z-index="1001">
|
||||
</u-navbar>
|
||||
<view>
|
||||
<u-cell-group>
|
||||
<u-cell-item @click="showNewUserPop()" title="背景图片" :title-style="titleStyle"></u-cell-item>
|
||||
<u-cell-item title="音效" :title-style="titleStyle" :arrow="false">
|
||||
<u-switch slot="right-icon" size="48" active-color="#19BE6B" v-model="checked"></u-switch>
|
||||
</u-cell-item>
|
||||
<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
||||
<u-cell-item title="打招呼的人" :title-style="titleStyle" @click="toLinkedList()"></u-cell-item>
|
||||
<u-cell-item title="摇到的历史" @click="addAndUpdate()" :title-style="titleStyle"></u-cell-item>
|
||||
<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
||||
<u-cell-item title="摇一摇信息" :title-style="titleStyle" @click="toSetLatestUsers()"></u-cell-item>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
|
||||
<u-popup v-model="newLatestFlag" mode="right"
|
||||
safe-area-inset-bottom
|
||||
:mask-close-able="false"
|
||||
length="100%">
|
||||
<scroll-view class="u-p-30 u-p-t-80" scroll-y="true" style="height:85%;width: 700rpx;">
|
||||
<view>
|
||||
<u-collapse :head-style="{borderBottom:'1rpx solid #909399'}">
|
||||
<u-collapse-item :title="'第'+(index+1)+'位'"
|
||||
v-for="(newUser,index) in lastestZhuanFaUsers"
|
||||
:key="index">
|
||||
<view style="border: 1rpx solid #595b5f;padding: 10rpx 20rpx;">
|
||||
<u-form :model="newUser" :ref="'newUser-'+index"
|
||||
label-width="300rpx"
|
||||
label-position="top">
|
||||
<u-form-item label="姓名">
|
||||
<u-input v-model="newUser.nickName" />
|
||||
</u-form-item>
|
||||
<u-form-item label="微信号">
|
||||
<u-input v-model="newUser.chatNumber" />
|
||||
</u-form-item>
|
||||
<u-form-item label="头像">
|
||||
<u-input type="textarea" v-model="newUser.avatar" />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-30">
|
||||
<u-button @click="addNewLatestUserItem()">新增</u-button>
|
||||
<u-button v-if="lastestZhuanFaUsers.length>1" @click="delNewLatestUser()">删除</u-button>
|
||||
<u-button type="success" @click="submitAddLatestUsers()">确定</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
|
||||
<u-popup v-model="addAndUpdateFlag" mode="right"
|
||||
safe-area-inset-bottom
|
||||
:mask-close-able="false"
|
||||
length="100%">
|
||||
<scroll-view class="u-p-30 u-p-t-80" scroll-y="true" style="height:85%;width: 700rpx;">
|
||||
<view>
|
||||
<u-collapse :head-style="{borderBottom:'1rpx solid #909399'}">
|
||||
<u-collapse-item :title="'第'+(index+1)+'位'"
|
||||
v-for="(newUser,index) in newUsers"
|
||||
:key="index">
|
||||
<view style="border: 1rpx solid #595b5f;padding: 10rpx 20rpx;">
|
||||
<u-form :model="newUser" :ref="'newUser-'+index"
|
||||
label-width="300rpx"
|
||||
label-position="top">
|
||||
<u-form-item label="姓名">
|
||||
<u-input :maxlength="-1" v-model="newUser.nickName" />
|
||||
</u-form-item>
|
||||
<u-form-item label="微信号">
|
||||
<u-input :maxlength="-1" placeholder="不能与其他重复!" v-model="newUser.chatNumber" />
|
||||
</u-form-item>
|
||||
<u-form-item label="头像">
|
||||
<u-input :maxlength="-1" type="textarea" v-model="newUser.avatar" />
|
||||
</u-form-item>
|
||||
<u-form-item label="地区(注意空格)">
|
||||
<u-input :maxlength="-1" placeholder="注意格式,如: 广东 广州" v-model="newUser.address" />
|
||||
</u-form-item>
|
||||
<u-form-item label="个性签名">
|
||||
<u-input :maxlength="-1" v-model="newUser.signature" />
|
||||
</u-form-item>
|
||||
<u-form-item label="给你打招呼的内容">
|
||||
<u-input :maxlength="-1" type="textarea" v-model="newUser.userRemark" />
|
||||
</u-form-item>
|
||||
<u-form-item label="给你打招呼的时间">
|
||||
<u-input :maxlength="-1" placeholder="注意格式,如: 22:30" v-model="newUser.createTime" />
|
||||
</u-form-item>
|
||||
<u-form-item label="你通过好友时间">
|
||||
<u-input :maxlength="-1" placeholder="注意格式,如: 22:35" v-model="newUser.sendTimeStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="第一条朋友圈">
|
||||
<u-input type="textarea" :maxlength="-1" v-model="newUser.friendCircle[0]" />
|
||||
</u-form-item>
|
||||
<u-form-item label="第二条朋友圈">
|
||||
<u-input type="textarea" :maxlength="-1" v-model="newUser.friendCircle[1]" />
|
||||
</u-form-item>
|
||||
<u-form-item label="第三条朋友圈">
|
||||
<u-input type="textarea" :maxlength="-1" v-model="newUser.friendCircle[2]" />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
</u-collapse-item>
|
||||
</u-collapse>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-30">
|
||||
<u-button @click="addNewUserItem()">新增</u-button>
|
||||
<u-button v-if="newUsers.length>1" @click="delNewUser()">删除</u-button>
|
||||
<u-button type="success" @click="submitAddUsers()">确定</u-button>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
|
||||
<u-popup v-model="newUserPopFlag" mode="right"
|
||||
safe-area-inset-bottom
|
||||
:mask-close-able="false"
|
||||
length="100%">
|
||||
<view style="padding-top:15%;">
|
||||
<view class="u-border-top">
|
||||
<u-field v-model="count"
|
||||
type="number"
|
||||
label="本次录入数量" label-width="200rpx"
|
||||
placeholder="录入数量,建议5-10个"></u-field>
|
||||
</view>
|
||||
<view v-if="count<1" class="u-p-30 u-font-32" style="font-weight: bold;">
|
||||
<view>填入数量决定了下面录入的每项信息的数量 !!!</view>
|
||||
<view class="u-m-t-10">比如5个,那么必须填入5个人的信息,每个用%%隔开 ! </view>
|
||||
<view class="u-m-t-10">不能多! 也不能少! 没有信息的填0 !</view>
|
||||
<view>地址为例: "广东 广州,0,湖北 武汉,四川 城都,福建 厦门" </view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="count>0">
|
||||
<scroll-view class="u-p-30 u-p-t-80"
|
||||
scroll-y="true" style="height:80%;width: 700rpx;">
|
||||
<view style="padding:10rpx 20rpx;">
|
||||
<u-form :model="propArrObj" :border-bottom="false"
|
||||
label-width="300rpx"
|
||||
label-position="top">
|
||||
<u-form-item label="姓名">
|
||||
<u-input placeholder="格式: (张三%%李四%%王五)"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="300" border
|
||||
v-model="propArrObj.nickNameStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="微信号">
|
||||
<u-input placeholder="格式: (666666%%aaaaaa%%zzzzzz)"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="200" border
|
||||
v-model="propArrObj.chatNumberStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="头像">
|
||||
<u-input placeholder="格式: (xxx.jpg%%yyy.jpg%%%zzz%%jpg)"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="300" border
|
||||
v-model="propArrObj.avatarStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="个性签名">
|
||||
<u-input placeholder="格式: (哈哈哈%%嘻嘻嘻%%哇哇哇)"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="200" border
|
||||
v-model="propArrObj.signatureStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="打招呼的内容">
|
||||
<u-input placeholder="格式: (哈喽%%你好%%hello)"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="200" border
|
||||
v-model="propArrObj.userRemarkStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="地址">
|
||||
<u-input placeholder="每个值用%%隔开!没有地址的用0代替"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="100" border
|
||||
v-model="propArrObj.addressStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="打招呼时间">
|
||||
<u-input placeholder="格式: (12:01%%12:02%%12:03)"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="100" border
|
||||
v-model="propArrObj.createTimeStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="加好友时间">
|
||||
<u-input placeholder="格式: (12:01%%12:02%%12:03)"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="100" border
|
||||
v-model="propArrObj.sendTimeStr" />
|
||||
</u-form-item>
|
||||
<u-form-item label="朋友圈">
|
||||
<u-input placeholder="格式: ([xxx.jpg%%yyy.jpg,zzz.jpg]%%[111.jpg,222.jpg]%%[]%%[333.jpg])"
|
||||
type="textarea" :maxlength="-1"
|
||||
:height="300" border
|
||||
v-model="propArrObj.friendCircleStr" />
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-30">
|
||||
<u-button @click="cancelAdd()">取消</u-button>
|
||||
<u-button type="success" @click="submitAdd()">确定</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
titleStyle:{
|
||||
fontSize:"34rpx",
|
||||
color:'#000000'
|
||||
},
|
||||
linkedUsers:[], //摇一摇的人
|
||||
addAndUpdateFlag:false, //新增
|
||||
newUsers:[
|
||||
{
|
||||
id:new Date().getTime(),
|
||||
avatar:'',
|
||||
chatNumber:'',
|
||||
nickName:'',
|
||||
signature:'',
|
||||
userRemark:'',
|
||||
address:'',
|
||||
sex:0,
|
||||
friendPower:0,
|
||||
forbidSelf:false,
|
||||
forbidHis:false,
|
||||
createTime:"",
|
||||
sendTimeStr:"",
|
||||
lastMsgContent:'',
|
||||
delFlag:false,
|
||||
friendCircle:["","",""],
|
||||
messageList:[],
|
||||
},
|
||||
],
|
||||
checked:true,
|
||||
newLatestFlag:false,
|
||||
lastestZhuanFaUsers:[
|
||||
{
|
||||
id:'1',
|
||||
avatar:'/static/image/default/default-user/1.jpg',
|
||||
chatNumber:'qwe',
|
||||
nickName:'猫先生',
|
||||
}
|
||||
],
|
||||
//--------------------------------------
|
||||
newUserPopFlag:false,
|
||||
count:5,
|
||||
propArrObj:{
|
||||
nickNameStr:"",
|
||||
chatNumberStr:"",
|
||||
avatarStr:"",
|
||||
signatureStr:"",
|
||||
userRemarkStr:"",
|
||||
addressStr:"",
|
||||
createTimeStr:"",
|
||||
sendTimeStr:"",
|
||||
friendCircleStr:"",
|
||||
}
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
toSetLatestUsers:function(){
|
||||
if(this.vuex_lastestZhuanFaUsers.length>0){
|
||||
this.lastestZhuanFaUsers=JSON.parse(JSON.stringify(this.vuex_lastestZhuanFaUsers));
|
||||
}
|
||||
this.newLatestFlag=true;
|
||||
},
|
||||
addNewLatestUserItem:function(){
|
||||
let obj={
|
||||
id:new Date().getTime(),
|
||||
avatar:'',
|
||||
chatNumber:'',
|
||||
nickName:'',
|
||||
};
|
||||
this.lastestZhuanFaUsers.push(obj);
|
||||
},
|
||||
delNewLatestUser:function(){
|
||||
this.lastestZhuanFaUsers.splice(this.lastestZhuanFaUsers.length-1,1);
|
||||
},
|
||||
submitAddLatestUsers:function(){
|
||||
let that=this;
|
||||
this.$u.vuex("vuex_lastestZhuanFaUsers",this.lastestZhuanFaUsers);
|
||||
this.newLatestFlag=false;
|
||||
},
|
||||
addAndUpdate:function(){
|
||||
let that=this;
|
||||
that.addAndUpdateFlag=true
|
||||
},
|
||||
addNewUserItem:function(){
|
||||
let oldObj= this.newUsers[this.newUsers.length-1];
|
||||
let obj={
|
||||
id:new Date().getTime(),
|
||||
avatar:'',
|
||||
chatNumber:'',
|
||||
nickName:'',
|
||||
signature:'',
|
||||
userRemark:'',
|
||||
address:'',
|
||||
sex:0,
|
||||
friendPower:0,
|
||||
forbidSelf:false,
|
||||
forbidHis:false,
|
||||
createTime:oldObj.createTime,
|
||||
sendTimeStr:oldObj.sendTimeStr,
|
||||
lastMsgContent:'',
|
||||
delFlag:false,
|
||||
friendCircle:["","",""],
|
||||
messageList:[],
|
||||
};
|
||||
//this.newUsers.push(obj);
|
||||
this.newUsers.unshift(obj);
|
||||
},
|
||||
delNewUser:function(){
|
||||
this.newUsers.splice(this.newUsers.length-1,1);
|
||||
},
|
||||
submitAddUsers:function(){
|
||||
let that=this;
|
||||
uni.showModal({
|
||||
title: '确认提示',
|
||||
content: '请认真检查各项填入内容!',
|
||||
success: function (res) {
|
||||
if (res.confirm) {
|
||||
that.addAndUpdateFlag = false;
|
||||
that.linkedUsers=that.newUsers.concat(that.linkedUsers);
|
||||
that.newUsers=[
|
||||
{
|
||||
id:new Date().getTime(),
|
||||
avatar:'',
|
||||
chatNumber:'',
|
||||
nickName:'',
|
||||
signature:'',
|
||||
userRemark:'',
|
||||
address:'',
|
||||
sex:0,
|
||||
friendPower:0,
|
||||
forbidSelf:false,
|
||||
forbidHis:false,
|
||||
createTime:'',
|
||||
sendTimeStr:'',
|
||||
lastMsgContent:'',
|
||||
delFlag:false,
|
||||
friendCircle:["","",""],
|
||||
messageList:[],
|
||||
},
|
||||
]
|
||||
|
||||
} else if (res.cancel) {
|
||||
console.log('用户点击取消');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
toLinkedList:function(){
|
||||
let arr=JSON.parse(JSON.stringify(this.vuex_linkedUsers));
|
||||
let newLinkedUsers=this.linkedUsers.concat(arr);
|
||||
console.log("去摇一摇设置",newLinkedUsers);
|
||||
this.$u.vuex("vuex_linkedUsers",newLinkedUsers);
|
||||
this.linkedUsers=[];
|
||||
this.$u.route("/pages/tabbar/find/yaoyiyao/yaoyiyao-linked-list");
|
||||
},
|
||||
//------------------------------------------------------------------------------------------------
|
||||
showNewUserPop:function(){
|
||||
this.newUserPopFlag=true;
|
||||
},
|
||||
|
||||
cancelAdd:function(){
|
||||
this.newUserPopFlag=false;
|
||||
},
|
||||
|
||||
submitAdd:function(){
|
||||
let that=this;
|
||||
let keys= Object.keys(that.propArrObj);
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
let key= keys[i];
|
||||
let keyValue= that.propArrObj[key];
|
||||
let valueArr= keyValue.split("%%");
|
||||
if(valueArr.length!=that.count){
|
||||
this.globalUtil.utilAlert("第"+(i+1)+"项录入信息有误!["+key+"]");
|
||||
return;
|
||||
}
|
||||
}
|
||||
that.muchCreateUser();
|
||||
},
|
||||
|
||||
muchCreateUser(){
|
||||
let that=this;
|
||||
let arr=[];
|
||||
for (var i = 0; i < this.count; i++) {
|
||||
let item={
|
||||
id:"u-"+i,
|
||||
avatar:that.propArrObj.avatarStr.split("%%")[i],
|
||||
chatNumber:that.propArrObj.chatNumberStr.split("%%")[i],
|
||||
nickName:that.propArrObj.nickNameStr.split("%%")[i],
|
||||
signature:that.propArrObj.signatureStr.split("%%")[i],
|
||||
userRemark:that.propArrObj.userRemarkStr.split("%%")[i],
|
||||
address:that.propArrObj.addressStr.split("%%")[i],
|
||||
createTime:that.propArrObj.createTimeStr.split("%%")[i],
|
||||
sendTimeStr:that.propArrObj.sendTimeStr.split("%%")[i],
|
||||
friendCircle:that.propArrObj.friendCircleStr.split("%%")[i],
|
||||
lastMsgContent:"",
|
||||
messageList:[],
|
||||
sex:0,
|
||||
friendPower:0,
|
||||
forbidSelf:false,
|
||||
forbidHis:false,
|
||||
delFlag:false,
|
||||
};
|
||||
arr.push(item);
|
||||
}
|
||||
console.log("====arr====",arr);
|
||||
that.linkedUsers=arr.concat(that.linkedUsers);
|
||||
this.count=0;
|
||||
this.propArrObj={
|
||||
avatarStr:"",
|
||||
chatNumberStr:"",
|
||||
nickNameStr:"",
|
||||
signatureStr:"",
|
||||
userRemarkStr:"",
|
||||
addressStr:"",
|
||||
createTimeStr:"",
|
||||
sendTimeStr:"",
|
||||
friendCircleStr:"",
|
||||
};
|
||||
that.newUserPopFlag=false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<view class="u-font-34">
|
||||
<u-navbar :is-back="true" back-icon-color="#333333" title=""
|
||||
:background="{ background: '#ffffff'}"
|
||||
:border-bottom="false" z-index="1001">
|
||||
<view slot="right" class="u-p-r-30">
|
||||
<u-icon name="more-dot-fill" color="#000000" :size="38"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view style="background-color: #ffffff;">
|
||||
<view class="u-p-30 u-flex u-row-left u-col-center">
|
||||
<view class="u-p-l-20">
|
||||
<view>
|
||||
<u-image :src="personInfo.avatar" width="120rpx" height="120rpx" border-radius="12rpx">
|
||||
<view slot="error"
|
||||
class="u-flex u-row-center u-col-center u-p-t-10"
|
||||
style="width: 90rpx;height: 90rpx;background-color: #f1f1f1;border-radius: 12rpx;">
|
||||
<view>
|
||||
<image src="/static/image/default/default-user/default-user.png"
|
||||
style="width: 64rpx;height: 64rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
</u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-l-30 u-p-t-20">
|
||||
<view class="u-line-2" style="width: 350rpx;line-height: 40rpx;">
|
||||
<text style="color: #000000;font-size: 44rpx;font-weight: bold;">{{personInfo.nickName}}</text>
|
||||
<!-- <text>男</text> -->
|
||||
</view>
|
||||
<view v-if="personInfo.address&&personInfo.address!=0&&personInfo.address.length>0"
|
||||
style="margin-top: 10rpx;color: #757575;font-size: 30rpx;">
|
||||
<text>地区: </text>
|
||||
<text>{{personInfo.address}}</text>
|
||||
</view>
|
||||
<view style="color: #2d5675;font-size: 32rpx;margin-top: 15rpx;">
|
||||
<text class="u-m-r-30">备注名</text>
|
||||
<text>朋友权限</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-l-50 u-p-r-50 u-p-b-50 u-p-t-10">
|
||||
<view style="font-size: 28rpx;border: 1rpx solid #909399;background-color: #f8f8f8;padding: 30rpx;border-radius: 6rpx;">
|
||||
<view class="u-tips-color">
|
||||
<text>{{personInfo.nickName}}: </text>
|
||||
<text>{{personInfo.userRemark}}</text>
|
||||
</view>
|
||||
<view style="color: #2d5675;margin-top: 20rpx;">
|
||||
<text>回复</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
||||
<view class="u-flex u-row-left u-col-center u-p-l-30 u-p-t-20 u-p-b-20">
|
||||
<view class="u-m-r-30" style="width: 150rpx;text-align: left;">
|
||||
<text>个性签名</text>
|
||||
</view>
|
||||
<view v-if="personInfo.signature&&personInfo.signature!=0&&personInfo.signature.length>0"
|
||||
class="u-line-3" style="padding-right: 40rpx;width: 500rpx;color: #757575;">
|
||||
<text>{{personInfo.signature}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-p-l-30">
|
||||
<u-gap height="1" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center u-p-l-30 u-p-t-20 u-p-b-20">
|
||||
<view class="u-m-r-30" style="width: 150rpx;text-align: left;">
|
||||
<text>来源</text>
|
||||
</view>
|
||||
<view class="u-line-3" style="padding-right: 40rpx;width: 500rpx;color: #757575;">
|
||||
<text>对方通过摇一摇添加</text>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="20" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
||||
<view @click="toAgree()" style="text-align: center;padding: 30rpx;color: #2d5675;font-weight: bold;">
|
||||
<text>前往验证</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-box u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<text>加入黑名单</text>
|
||||
</view>
|
||||
<view class="u-m-l-26 u-m-r-26">
|
||||
<text>|</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>投诉</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
personInfo:null,
|
||||
};
|
||||
},
|
||||
onLoad:function(option){
|
||||
this.personInfo=this.yyy_current_user;
|
||||
/* let param= option.personInfo;
|
||||
if(param!=null&¶m!=undefined){
|
||||
this.personInfo=JSON.parse(decodeURIComponent(param));
|
||||
} */
|
||||
},
|
||||
methods:{
|
||||
toAgree:function(){
|
||||
this.$u.route({
|
||||
url:'/pages/tabbar/find/yaoyiyao/yaoyiyao-agree-apply-friend',
|
||||
params:{
|
||||
personInfo:encodeURIComponent(JSON.stringify(this.personInfo))
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-box{
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 80rpx;
|
||||
padding: 20rpx 100rpx;
|
||||
text-align: center;
|
||||
font-size: 28rpx;
|
||||
color: #2d5675;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
@@ -0,0 +1,186 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="./imgs/gaosu.jpg" shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-18">
|
||||
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="company" label="收单机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="settleCompany" label="清算机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-m-t-16">
|
||||
<u-field class="field-class" v-model="tradeDesc" label="支付说明" :label-width="160"
|
||||
:field-style="fieldTextareaStyle" type="textarea" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view style="margin-top: -20rpx;">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-30">
|
||||
<u-field class="field-class" v-model="shanghu" label="商户单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-text-center u-m-t-20 u-m-b-30">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image src="./imgs/tiao-code.jpg" height="150rpx" width="480rpx" mode="aspectFill"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text>{{shanghuCode}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="32" name="coupon" color="#818ba4" label="开发票" label-color="#818ba4" margin-left="12"
|
||||
label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 ">
|
||||
<view class="">
|
||||
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||||
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- position: absolute;bottom: 50rpx; -->
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
recordData:{
|
||||
required:true,
|
||||
type:Object,
|
||||
default:function(){
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
fieldTextareaStyle: {
|
||||
width:'400rpx',
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
marginBottom:'0rpx',
|
||||
},
|
||||
tradeStatus: '支付成功',
|
||||
paytime: '2022年9月30日20:01:29',
|
||||
goodName: '高速通行费',
|
||||
company: '辽宁省高速公路运营管理有限责任公司',
|
||||
settleCompany: '财付通支付科技有限公司',
|
||||
payway: '交通银行储蓄卡(7961)',
|
||||
tradeDesc: '优先支付方式零钱扣款失败，已自动更换支付方式完成支付',
|
||||
tradeCode: '4200067662202209303339833402',
|
||||
shanghu:'可在支持的商户扫码退款',
|
||||
shanghuCode: '893226056885035008',
|
||||
tradeValue: '-40.00',
|
||||
target: '辽宁高速'
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
console.log("辽宁高速数据",this.recordData);
|
||||
this.tradeValue="-"+Number(this.recordData.tradeValue).toFixed(2);
|
||||
this.paytime=this.formatTimeStr(this.recordData.createTime);
|
||||
if(this.recordData.tradeValue==61){
|
||||
this.paytime="2023年9月29日 22:09:10";
|
||||
this.shanghuCode="893226056885031992";
|
||||
this.tradeCode="4200067662202209303259866205";
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatTimeStr:function(timeStr){
|
||||
timeStr=timeStr.replace(/-/g,"/");
|
||||
let cdate=new Date(timeStr);
|
||||
let year=cdate.getFullYear();
|
||||
let yearStr=year+"年";
|
||||
let month= cdate.getMonth()+1;
|
||||
let day=cdate.getDate();
|
||||
let hour= cdate.getHours();
|
||||
let min=cdate.getMinutes();
|
||||
let s=cdate.getSeconds();
|
||||
let monthStr=month+"月";
|
||||
let dayStr=day+"日";
|
||||
let hourStr=hour+":";
|
||||
let minStr=min+":";
|
||||
let sStr=s;
|
||||
if(hour<10){
|
||||
hourStr="0"+hour+":";
|
||||
}
|
||||
if(min<10){
|
||||
minStr="0"+min+":";
|
||||
}
|
||||
if(s<10){
|
||||
sStr="0"+s;
|
||||
}
|
||||
let formatStr=yearStr+monthStr+dayStr+" "+hourStr+minStr+sStr;
|
||||
return formatStr;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="/static/image/mt.jpg"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-18">
|
||||
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||||
:field-style="fieldStyle" type="text" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="company" label="商户全称" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="settleCompany" label="收单机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
<view style="padding-left: 165rpx;color: #909399;">
|
||||
<text>由网联清算有限公司提供收款清算服务</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-30">
|
||||
<u-field class="field-class" v-model="shanghu" label="商户单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-text-center u-m-t-20 u-m-b-30">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-image src="./imgs/tiao-code.jpg" height="150rpx" width="480rpx" mode="aspectFill"></u-image>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<text>{{shanghuCode}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="u-m-t-20 u-p-40 u-flex u-row-between u-col-center"
|
||||
style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view>商家小程序</view>
|
||||
<view class="u-flex u-row-between u-col-center">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-10">
|
||||
<u-image width="36rpx" height="36rpx" src="/static/image/xiaochengxu.png"></u-image>
|
||||
</view>
|
||||
<view style="color: #909399;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view><text>美团</text></view>
|
||||
<view class="u-m-r-10 u-m-l-10">
|
||||
<u-line color="#909399" direction="col" length="30rpx" />
|
||||
</view>
|
||||
<view>
|
||||
<view>外卖美食买菜酒店电影</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>购物</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-l-30">
|
||||
<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||||
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
//width:'460rpx',
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
tradeStatus: '支付成功',
|
||||
goodName: '美团收银909700180095643047',
|
||||
company: '商户_李敏',
|
||||
settleCompany: '北京钱袋宝支付技术有限公司',
|
||||
paytime: '2022年9月30日 12:50:56',
|
||||
payway: '零钱',
|
||||
tradeCode: '4200066259202209304888262262',
|
||||
shanghu:'可在支持的商户扫码退款',
|
||||
shanghuCode: '0461368604225767873608013',
|
||||
tradeValue: '-74.08',
|
||||
target: '万象三顾冒菜'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="/static/image/mycenter/default-record-icon.jpg"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">
|
||||
{{target}}
|
||||
</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="receiveRemark" label="收款方备注" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferWay" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferTime" label="转账时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferCode" label="转账单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="22" name="/static/image/bill/shoukuan.png" color="#818ba4" label="发起群收款"
|
||||
label-color="#818ba4" margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>收款方服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="/static/image/bill/minpian.png" color="#818ba4" label="收款方名片"
|
||||
label-color="#818ba4" margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
recordData:{
|
||||
required:true,
|
||||
type:Object,
|
||||
default:function(){
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
target: '扫二维码付款-铁东区品江渔斑鱼火锅庄',
|
||||
tradeValue: '-1500.00',
|
||||
tradeStatus: '支付成功',
|
||||
receiveRemark: '二维码收款',
|
||||
transferWay: '零钱',
|
||||
transferTime: '2022年09月29日20:02:11',
|
||||
transferCode: '10000499012022092900281292669093'
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
console.log("扫码付款数据",this.recordData);
|
||||
this.tradeValue="-"+Number(this.recordData.tradeValue).toFixed(2);
|
||||
this.transferTime=this.formatTimeStr(this.recordData.createTime);
|
||||
this.target=this.recordData.tradeTitle;
|
||||
if(this.recordData.tradeValue==10){
|
||||
this.transferTime="2023年9月30日 14:02:12";
|
||||
this.transferCode="4200067662202209303259866205";
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
formatTimeStr:function(timeStr){
|
||||
timeStr=timeStr.replace(/-/g,"/");
|
||||
let cdate=new Date(timeStr);
|
||||
let year=cdate.getFullYear();
|
||||
let yearStr=year+"年";
|
||||
let month= cdate.getMonth()+1;
|
||||
let day=cdate.getDate();
|
||||
let hour= cdate.getHours();
|
||||
let min=cdate.getMinutes();
|
||||
let s=cdate.getSeconds();
|
||||
let monthStr=month+"月";
|
||||
let dayStr=day+"日";
|
||||
let hourStr=hour+":";
|
||||
let minStr=min+":";
|
||||
let sStr=s;
|
||||
if(hour<10){
|
||||
hourStr="0"+hour+":";
|
||||
}
|
||||
if(min<10){
|
||||
minStr="0"+min+":";
|
||||
}
|
||||
if(s<10){
|
||||
sStr="0"+s;
|
||||
}
|
||||
let formatStr=yearStr+monthStr+dayStr+" "+hourStr+minStr+sStr;
|
||||
return formatStr;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="./imgs/shihua.jpg"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-18">
|
||||
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||||
:field-style="fieldStyle" type="text" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="company" label="商户全称" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="settleCompany" label="收单机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
<view style="padding-left: 165rpx;color: #909399;">
|
||||
<text>由中国银联股份有限公司提供收款清算服务</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-30">
|
||||
<u-field class="field-class" v-model="shanghuCode" label="商户单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40 u-flex u-row-between u-col-center"
|
||||
style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>商家订单中心</view>
|
||||
<view style="margin-left: 30rpx;background-color: #f04131;color: #ffffff;border-radius: 30rpx;padding: 5rpx 18rpx;">
|
||||
<text>NEW</text>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-m-l-30">
|
||||
<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||||
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
//width:'460rpx',
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
tradeStatus: '支付成功',
|
||||
goodName: '智慧U站215元',
|
||||
company: '鞍山市中金石油经销有限公司',
|
||||
settleCompany: '汇元银通(北京)在线支付技术有限公司',
|
||||
paytime: '2022年9月30日18:36:09',
|
||||
payway: '交通银行储蓄卡(7961)',
|
||||
tradeCode: '4200001559202209307401263465',
|
||||
shanghuCode: '40822093001788196557',
|
||||
tradeValue: '-215.00',
|
||||
target: '亚孚石化中金站'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" src="./imgs/xinrun.jpg"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">{{target}}</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="paytime" label="支付时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-18">
|
||||
<u-field class="field-class" v-model="goodName" label="商品" :label-width="160"
|
||||
:field-style="fieldStyle" type="text" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="company" label="商户全称" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="settleCompany" label="收单机构" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-field class="field-class" v-model="payway" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeCode" label="交易单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view class="u-p-r-30">
|
||||
<u-field class="field-class" v-model="shanghuCode" label="商户单号" :label-width="160"
|
||||
:field-style="fieldStyle" type="textarea" :border-bottom="false" :clearable="false"
|
||||
placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40 u-flex u-row-between u-col-center"
|
||||
style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view>商家小程序</view>
|
||||
<view class="u-flex u-row-between u-col-center">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-10">
|
||||
<u-image width="36rpx" height="36rpx" src="/static/image/xiaochengxu.png"></u-image>
|
||||
</view>
|
||||
<view style="color: #909399;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view><text>润欣商业发展鞍山有限公司</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-l-30">
|
||||
<u-icon name="arrow-right" color="#909399" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="32" name="order" color="#818ba4" label="在此商户的交易" label-color="#818ba4"
|
||||
margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
//width:'460rpx',
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
tradeStatus: '支付成功',
|
||||
goodName: '小程序-停车场支付',
|
||||
company: '润欣商业发展(鞍山) 有限公司',
|
||||
settleCompany: '财付通支付科技有限公司',
|
||||
paytime: '2022年9月30日13:33:13',
|
||||
payway: '零钱',
|
||||
tradeCode: '4200001569202209306188471713',
|
||||
shanghuCode: 'ASTCWX16645159870220d5eb1578fe70',
|
||||
tradeValue: '-8.00',
|
||||
target: '润欣商业发展 (鞍山) 有限公司'
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="u-p-40" style="background-color: #ffffff;">
|
||||
<view class="header u-border-bottom"
|
||||
style="display: flex;flex-direction: column;justify-content: space-between;align-items: center;padding-bottom: 80rpx;">
|
||||
<view>
|
||||
<u-image width="100rpx" height="100rpx" :src="recordData.tradeIcon"
|
||||
shape="circle"></u-image>
|
||||
</view>
|
||||
<view style="font-size:17px;margin-top: 20rpx;margin-bottom: 26rpx;color: #000000;">
|
||||
{{target}}
|
||||
</view>
|
||||
<view style="font-size: 28px;color: #000000;font-weight: bold;">{{tradeValue}}</view>
|
||||
</view>
|
||||
<view class="center u-p-t-20">
|
||||
<view>
|
||||
<u-field class="field-class" v-model="tradeStatus" label="当前状态" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="receiveRemark" label="转账说明" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferTime" label="转账时间" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferWay" label="支付方式" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
<view>
|
||||
<u-field class="field-class" v-model="transferCode" label="转账单号" :label-width="160"
|
||||
:field-style="fieldStyle" :border-bottom="false" :clearable="false" placeholder=" "></u-field>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-20 u-p-40" style="background-color: #ffffff;font-size: 30rpx;">
|
||||
<view style="padding-bottom: 30rpx;">
|
||||
<text>账单服务</text>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30 u-border-top">
|
||||
<view>
|
||||
<u-icon size="32" name="question-circle" color="#818ba4" label="对订单有疑惑" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="34" name="chat" color="#818ba4" label="定位到聊天位置"
|
||||
label-color="#818ba4" margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center u-p-t-30">
|
||||
<view>
|
||||
<u-icon size="32" name="star" color="#818ba4" label="申请转账电子凭证" label-color="#818ba4"
|
||||
margin-left="12" top="4" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view class="">
|
||||
<u-icon size="34" name="rmb-circle" color="#818ba4" label="查看往来转账"
|
||||
label-color="#818ba4" margin-left="12" label-size="30" label-pos="right"></u-icon>
|
||||
</view>
|
||||
<view style="width: 30rpx;"> </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
recordData:{
|
||||
required:true,
|
||||
type:Object,
|
||||
default:function(){
|
||||
return null
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fieldStyle: {
|
||||
color: '#000000',
|
||||
padding: '0rpx',
|
||||
margin: '0rpx',
|
||||
height: '70rpx',
|
||||
},
|
||||
target: '转账-转给祁晶 华润质量',
|
||||
tradeValue: '-1800.00',
|
||||
tradeStatus: '对方已收钱',
|
||||
receiveRemark: '微信转账',
|
||||
transferWay: '交通银行储蓄卡(7961)',
|
||||
transferTime: '2022年9月30日11:04:09',
|
||||
transferCode: '1000050001202209300712408714345'
|
||||
};
|
||||
},
|
||||
mounted(){
|
||||
console.log("转账付款数据",this.recordData);
|
||||
this.target=this.recordData.tradeTitle;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title=" " :title-bold="true" :title-size="34" :background="{ background: '#ffffff'}"
|
||||
back-icon-name="close" back-icon-size="32" title-color="#404133" :border-bottom="false">
|
||||
</u-navbar>
|
||||
|
||||
<template v-if="recordData.tradeTitle.indexOf('辽宁高速')!=-1">
|
||||
<liaoning-gaosu :recordData="recordData"></liaoning-gaosu>
|
||||
</template>
|
||||
<template v-else-if="recordData.tradeTitle.indexOf('三顾冒菜')!=-1">
|
||||
<sangumaocai></sangumaocai>
|
||||
</template>
|
||||
<template v-else-if="recordData.tradeTitle.indexOf('亚孚石化')!=-1">
|
||||
<shihua></shihua>
|
||||
</template>
|
||||
<template v-else-if="recordData.tradeTitle.indexOf('润欣')!=-1">
|
||||
<xinrun></xinrun>
|
||||
</template>
|
||||
<template v-else-if="recordData.tradeTitle.indexOf('转账')!=-1">
|
||||
<zhuanzhang :recordData="recordData"></zhuanzhang>
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;position: absolute;bottom: 50rpx;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</template>
|
||||
<!-- v-if="recordData.tradeTitle.indexOf('扫二维码')!=-1" -->
|
||||
<template v-else>
|
||||
<saoma :recordData="recordData"></saoma>
|
||||
<view style="width: 100%;text-align:center;padding:50rpx;color:#909399;position: absolute;bottom: 50rpx;">
|
||||
<text>本服务由财付通提供</text>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import saoma from './components/saoma.vue';
|
||||
import liaoningGaosu from './components/liaoning-gaosu.vue';
|
||||
import sangumaocai from './components/sangumaocai.vue';
|
||||
import shihua from './components/shihua.vue';
|
||||
import xinrun from './components/xinrunshangye.vue';
|
||||
import zhuanzhang from './components/zhuanzhang.vue';
|
||||
export default {
|
||||
components:{
|
||||
saoma,liaoningGaosu,sangumaocai,shihua,xinrun,zhuanzhang
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
recordData:null,
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
let that=this;
|
||||
let paramVal= option.record;
|
||||
if(paramVal!=null&¶mVal!=undefined&¶mVal.length>0){
|
||||
that.recordData=JSON.parse(decodeURIComponent(paramVal));
|
||||
console.log("recordData",that.recordData);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-class {
|
||||
color: #909399 !important;
|
||||
font-size: 28rpx !important;
|
||||
margin: 0rpx !important;
|
||||
padding: 0rpx !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page {
|
||||
background-color: #efefef;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :background="{ background: '#efefef'}" :border-bottom="true" :is-back="false">
|
||||
<view style=" display: flex;flex-direction: row;justify-content: space-between;align-items: center; flex: 1; padding: 0 30rpx; ">
|
||||
<view style="width: 150rpx;" @click="goBack()">
|
||||
<u-icon name="close" :size="32"></u-icon>
|
||||
</view>
|
||||
<view @click="addRecord()" style="color:#404133;font-size: 34rpx;font-weight: bold;text-align: center;">
|
||||
<text>账单</text>
|
||||
</view>
|
||||
<view style="width: 150rpx;">
|
||||
<text style="font-size: 34rpx;color: #000000;" @click="serviceCenter()">客服中心</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view>
|
||||
<view class="u-flex u-row-between u-col-center u-border-bottom"
|
||||
style="padding:34rpx 30rpx;">
|
||||
<view @click="openTradeTypePop()" style="background-color:#e3e3e3;height:60rpx;line-height: 50rpx; border-radius: 30rpx;padding: 0rpx 16rpx;">
|
||||
<u-icon name="arrow-down-fill" size="16" color="#666666"
|
||||
label="全部账单" label-size="26rpx" label-pos="left" margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view @click="toBillStatistics()">
|
||||
<u-icon name="arrow-right" color="#acb0b7"
|
||||
label="统计" label-color="#acb0b7" label-pos="left"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view style="padding:34rpx 30rpx;background-color:#efefef;width:100%;"
|
||||
class="u-flex u-row-between u-col-center">
|
||||
<view >
|
||||
<u-icon name="arrow-down" size="24" color="#333333" @click="openTimePicker"
|
||||
:label="activeMonthObj.currentYear+'年'+activeMonthObj.currentMonth+'月'"
|
||||
label-color="#333333"
|
||||
label-size="30rpx" label-pos="left"
|
||||
margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center" style="color:#acb0b7;" @click="openUpdateModel()">
|
||||
<view class="u-m-r-16">支出¥{{Number(activeMonthObj.outputAmount).toFixed(2)}}</view>
|
||||
<view>收入¥{{Number(activeMonthObj.inputAmount).toFixed(2)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="background-color:#ffffff;width: 100%;">
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
|
||||
:style="'width: 100%;height:'+scrollviewHeight+'px'"
|
||||
:scroll-into-view="scrollIntoViewId"
|
||||
@scrolltoupper="scrolltoUpper"
|
||||
@scrolltolower="scrolltolower">
|
||||
<template v-if="activeMonthObj.recordList&&activeMonthObj.recordList.length>0">
|
||||
<view v-for="(record,index) in activeMonthObj.recordList" :key="index"
|
||||
:id="'record_'+index"
|
||||
class="u-flex u-row-between u-col-center"
|
||||
style="width: 100%;">
|
||||
<view style="width: 18%;padding: 30rpx 20rpx 30rpx 30rpx;">
|
||||
<u-image :src="record.tradeIcon" width="90rpx" height="90rpx"
|
||||
shape="circle" bg-color="#909399"></u-image>
|
||||
</view>
|
||||
<view style="width: 82%;padding: 30rpx 30rpx 30rpx 0rpx"
|
||||
class="u-flex u-row-between u-col-center u-border-bottom">
|
||||
<view @click="showUpdatePop(record,index)">
|
||||
<view style="font-size: 34rpx;font-weight: 500;width:400rpx" class="u-line-1">{{record.tradeTitle}}</view>
|
||||
<view style="font-size: 28rpx;color: #909399;margin-top:6rpx;">{{formatTimeStr(record.createTime)}}</view>
|
||||
</view>
|
||||
<view class="u-p-b-40" @click="toDetail(record)">
|
||||
<text v-if="record.tradeDirection=='out'"
|
||||
style="color: #000000;font-weight: bold;font-size: 32rpx;">{{"-"+Number(record.tradeValue).toFixed(2)}}</text>
|
||||
<text v-if="record.tradeDirection=='in'"
|
||||
style="color: #f29100;font-weight: bold;font-size: 32rpx;">{{"+"+Number(record.tradeValue).toFixed(2)}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 当前月份统计信息修改 -->
|
||||
<u-popup v-model="currentMonthPopFlag" mode="center" :mask-close-able="false" negative-top="200" closeable>
|
||||
<view class="u-p-30">
|
||||
<view class="u-m-t-30">
|
||||
<u-form :model="activeMonthObj" ref="activeMonthObj" label-width="150rpx">
|
||||
<u-form-item label="当前年度">
|
||||
<u-input v-model="activeMonthObj.currentYear" type="number" placeholder="月份"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="当前月份">
|
||||
<u-input v-model="activeMonthObj.currentMonth" type="number" placeholder="月份"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="当月收入">
|
||||
<u-input v-model="activeMonthObj.inputAmount" type="number" placeholder="本月收入"/>
|
||||
</u-form-item>
|
||||
<u-form-item label="当月支出">
|
||||
<u-input v-model="activeMonthObj.outputAmount" type="number" placeholder="本月支出"/>
|
||||
</u-form-item>
|
||||
</u-form>
|
||||
</view>
|
||||
<view class="u-p-30">
|
||||
<view>
|
||||
<u-button type="success" @click="submitUpdate">确定</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 月份查询筛选-->
|
||||
<u-picker mode="time" v-model="timePickerShow" :params="timeParams"
|
||||
confirm-color="#3c2e55" confirm-text="确定" @confirm="timePickerConfirm"
|
||||
:show-time-tag="false"></u-picker>
|
||||
|
||||
<!-- 新增或者修改时间选择器 -->
|
||||
<!-- 消费类型 -->
|
||||
<u-popup v-model="tradeTypePopFlag" mode="bottom"
|
||||
:border-radius="16" close-icon-color="#000000"
|
||||
:closeable="true" close-icon-pos="top-left">
|
||||
<view style="width: 100%;padding: 20rpx;background-color: #f0f0f0;">
|
||||
<view style="margin-top: 20rpx; text-align: center;font-weight: bold;">选择筛选项</view>
|
||||
<view style="margin-top: 50rpx;text-align: center;padding: 0rpx 20rpx;margin-bottom: 100rpx;">
|
||||
<u-row>
|
||||
<u-col :span="4" v-for="(tradeTypeItem,index) in tradeTypeList" :key="index">
|
||||
<view v-if="index==4"
|
||||
class="trade-type trade-type-4"
|
||||
:class="currentTradeType.value==tradeTypeItem.value?'trade-type trade-type-4 trade-type-active':'trade-type trade-type-4'"
|
||||
@click="selectTradeType(tradeTypeItem)">
|
||||
{{tradeTypeItem.title}}
|
||||
</view>
|
||||
<view v-else @click="selectTradeType(tradeTypeItem)"
|
||||
:class="currentTradeType.value==tradeTypeItem.value?'trade-type trade-type-active':'trade-type'">
|
||||
{{tradeTypeItem.title}}
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import billList from '@/util/billList';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollviewHeight:0,
|
||||
scrollIntoViewId:'',
|
||||
currentMonthIndex:new Date().getMonth()+1, //当前月份
|
||||
currentYearIndex: new Date().getFullYear(),//当期年份
|
||||
currentMonthPopFlag:false,//当前月份信息修改弹窗控制器
|
||||
//当前月份数据
|
||||
activeMonthObj:{
|
||||
currentYear:2022,
|
||||
currentMonth:5,
|
||||
outputAmount:0.00,
|
||||
inputAmount:0.00,
|
||||
recordList:[]
|
||||
},
|
||||
timePickerShow:false, //时间选择器开关
|
||||
//时间参数
|
||||
timeParams:{
|
||||
year: true,
|
||||
month: true,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
timestamp: true,
|
||||
},
|
||||
tradeTypePopFlag:false,
|
||||
tradeTypeList:[
|
||||
{"title":"全部",value:"0"},{"title":"红包",value:"1"},{"title":"转账",value:"2"},
|
||||
{"title":"群收款",value:"3"},{"title":"二维码收付款",value:"4"},{"title":"商户消费",value:"5"},
|
||||
{"title":"充值提现",value:"6"},{"title":"信用卡还款",value:"7"},{"title":"有退款",value:"8"},
|
||||
],
|
||||
currentTradeType:{title:'全部',value:"0"}
|
||||
};
|
||||
},
|
||||
onLoad:function(){
|
||||
let that=this;
|
||||
this.scrollviewHeight= that.$u.sys().windowHeight*0.76; // 0.828
|
||||
this.getRecordList();
|
||||
},
|
||||
methods:{
|
||||
goBack(){
|
||||
uni.navigateBack();
|
||||
},
|
||||
openTimePicker:function(){
|
||||
let that=this;
|
||||
that.timePickerShow=true;
|
||||
},
|
||||
timePickerConfirm:function(obj){
|
||||
let year=obj.year;
|
||||
let monthStr=obj.month;
|
||||
let month= (new Date(obj.timestamp*1000)).getMonth()+1;
|
||||
console.log("选择的月份",month);
|
||||
this.currentMonthIndex=month;
|
||||
this.currentYearIndex=year;
|
||||
this.getRecordList();
|
||||
},
|
||||
//获取缓存记录
|
||||
getRecordList:function(){
|
||||
this.activeMonthObj.recordList=[];
|
||||
this.activeMonthObj.inputAmount=0.00;
|
||||
this.activeMonthObj.outputAmount=0.00;
|
||||
this.activeMonthObj.currentMonth=this.currentMonthIndex;
|
||||
this.activeMonthObj.currentYear=this.currentYearIndex;
|
||||
let month=this.currentMonthIndex<10?("0"+this.currentMonthIndex):this.currentMonthIndex;
|
||||
let param={
|
||||
timeDuring:this.currentYearIndex+"-"+month,
|
||||
tradeType:this.currentTradeType.value=='0'?'':this.currentTradeType.value,
|
||||
}
|
||||
console.log("获取账单记录参数",param);
|
||||
this.activeMonthObj=JSON.parse(JSON.stringify(billList.tempBillList[0]));
|
||||
console.log("this.activeMonthObj",this.activeMonthObj);
|
||||
this.$forceUpdate();
|
||||
return;
|
||||
/* this.$u.api.imUser.getUserAccountRecordList(param).then(res => {
|
||||
if(res.code==200&&res.data){
|
||||
this.activeMonthObj.recordList=res.data.recordList;
|
||||
this.activeMonthObj.inputAmount=res.data.monthAccountInfo.inputAmount;
|
||||
this.activeMonthObj.outputAmount=res.data.monthAccountInfo.outputAmount;
|
||||
console.log("获取账单记录结果",this.activeMonthObj);
|
||||
}else{
|
||||
|
||||
}
|
||||
}) */
|
||||
},
|
||||
//打开修改弹窗
|
||||
openUpdateModel:function(){
|
||||
this.currentMonthPopFlag=true;
|
||||
},
|
||||
//提交修改
|
||||
submitUpdate:function(){
|
||||
this.currentMonthPopFlag=false;
|
||||
},
|
||||
//打开新增记录弹窗
|
||||
addRecord:function(){
|
||||
let that=this;
|
||||
that.addPopFlag=true;
|
||||
},
|
||||
serviceCenter(){
|
||||
this.$u.route({
|
||||
url:'/pages/tabbar/my/service/my-bill-question',
|
||||
});
|
||||
},
|
||||
toDetail:function(record){
|
||||
let that=this;
|
||||
this.$u.route({
|
||||
url:'/pages/tabbar/my/service/my-bill-detail',
|
||||
params:{
|
||||
record:encodeURIComponent(JSON.stringify(record))
|
||||
}
|
||||
});
|
||||
},
|
||||
scrolltoUpper:function(){
|
||||
this.currentMonthIndex=new Date().getMonth()+1; //当前月份
|
||||
this.currentYearIndex=new Date().getFullYear();//当期年份
|
||||
this.getRecordList();
|
||||
},
|
||||
//监听滚动
|
||||
scrolltolower:function(){
|
||||
let that=this;
|
||||
console.log("监听到页面滚动到底部");
|
||||
this.currentMonthIndex=this.currentMonthIndex-1;
|
||||
let month=this.currentMonthIndex<10?"0"+this.currentMonthIndex:this.currentMonthIndex;
|
||||
let param={
|
||||
timeDuring:this.currentYearIndex+"-"+month,
|
||||
tradeType:this.currentTradeType.value=='0'?'6':this.currentTradeType.value,
|
||||
}
|
||||
console.log("获取上一个月的账单记录参数",param);
|
||||
that.getRecordList();
|
||||
return;
|
||||
this.$u.api.imUser.getUserAccountRecordList(param).then(res => {
|
||||
console.log("获取上一个月的账单记录结果",res);
|
||||
if(res.code==200&&res.data){
|
||||
let recordList=res.data.recordList;
|
||||
if(recordList!=null&&recordList.length>0){
|
||||
that.activeMonthObj.recordList=that.activeMonthObj.recordList.concat(recordList);
|
||||
that.activeMonthObj.inputAmount=res.data.monthAccountInfo.inputAmount;
|
||||
that.activeMonthObj.outputAmount=res.data.monthAccountInfo.outputAmount;
|
||||
that.activeMonthObj.currentMonth=this.currentMonthIndex;
|
||||
}
|
||||
}else{
|
||||
this.currentMonthIndex=this.currentMonthIndex+1;
|
||||
}
|
||||
})
|
||||
},
|
||||
formatTimeStr:function(timeStr){
|
||||
//console.log("timeStr",timeStr);
|
||||
timeStr=timeStr.replace(/-/g,"/");
|
||||
let cdate=new Date(timeStr);
|
||||
let month= cdate.getMonth()+1;
|
||||
//console.log("month",month);
|
||||
let day=cdate.getDate();
|
||||
let hour= cdate.getHours();
|
||||
let min=cdate.getMinutes();
|
||||
let monthStr=month+"月";
|
||||
let dayStr=day+"日";
|
||||
let hourStr=hour+":";
|
||||
let minStr=min;
|
||||
/* if(month<10){
|
||||
monthStr="0"+month+"月";
|
||||
}
|
||||
if(day<10){
|
||||
dayStr="0"+day+"日";
|
||||
} */
|
||||
if(hour<10){
|
||||
hourStr="0"+hour+":";
|
||||
}
|
||||
if(min<10){
|
||||
minStr="0"+min;
|
||||
}
|
||||
let formatStr=monthStr+dayStr+" "+hourStr+minStr;
|
||||
//console.log("formatStr",formatStr);
|
||||
return formatStr;
|
||||
},
|
||||
openTradeTypePop:function(){
|
||||
let that=this;
|
||||
that.tradeTypePopFlag=true;
|
||||
},
|
||||
selectTradeType:function(tradeItem){
|
||||
this.currentTradeType=tradeItem;
|
||||
this.tradeTypePopFlag=false;
|
||||
this.getRecordList();
|
||||
},
|
||||
toBillStatistics:function(){
|
||||
this.$u.route({
|
||||
url:'/pages/tabbar/my/service/my-bill-statistics',
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .u-picker-view{
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
.trade-type{
|
||||
height: 120rpx;
|
||||
padding:40rpx 30rpx 0rpx 30rpx;
|
||||
margin-bottom: 16rpx;
|
||||
background-color: #e2e2e2;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #000000;
|
||||
}
|
||||
.trade-type-4{
|
||||
padding:25rpx 30rpx 0rpx 30rpx;
|
||||
}
|
||||
.trade-type-active{
|
||||
background-color: rgb(232,248,238);
|
||||
border:1rpx solid #18b566;
|
||||
font-weight: bold;
|
||||
color:#18b566;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title=" " :title-bold="true" :title-size="34"
|
||||
:background="{ background: '#57ab6d'}"
|
||||
back-icon-name="arrow-left" :back-icon-size="34" back-icon-color="#f0f0f0"
|
||||
:border-bottom="false">
|
||||
</u-navbar>
|
||||
<!-- 这里背景好像是图片 -->
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
|
||||
:style="'width: 100%;background-color: #ffffff;height:'+scrollviewHeight+'px'">
|
||||
<view style="padding:20rpx;background-color:#57ab6d;height:230rpx;">
|
||||
<view style="color: #ffffff;font-size: 22px;">协助你解决</view>
|
||||
<view style="color: #ffffff;font-size: 22px;">账单相关问题</view>
|
||||
</view>
|
||||
|
||||
<view style="margin-top: -40rpx; padding: 0rpx 30rpx;">
|
||||
<view style="border-radius: 20rpx;background-color: #f9f9f9;padding: 40rpx;">
|
||||
<u-row>
|
||||
<u-col :span="5">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-icon name="checkmark-circle-fill" :size="40"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-10" @click="toDownLoadOrder()">
|
||||
<text style="font-size: 32rpx;">下载账单</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="2">
|
||||
<view class="u-flex u-row-center">
|
||||
<u-line color="#a3a6ad" direction="col" length="70rpx" :hair-line="false"></u-line>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="5">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<view>
|
||||
<u-icon name="file-text-fill" :size="40"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-10">
|
||||
<text style="font-size: 32rpx;">银行支出查询</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-p-30 u-flex u-row-between u-col-center">
|
||||
<view style="font-size: 20px;color: #000000;">常见问题</view>
|
||||
<view class="u-flex u-row-around u-col-center"
|
||||
style="padding: 12rpx 20rpx;border-radius: 14rpx;border: 1rpx solid #adb1b8;">
|
||||
<view>
|
||||
<u-icon name="search" :size="32" :top="2"></u-icon>
|
||||
</view>
|
||||
<view class="u-tips-color u-p-l-10 u-font-30">
|
||||
<text>搜索</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="如何快速查询历史账单"></u-cell-item>
|
||||
<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="如何查看注销前账单"></u-cell-item>
|
||||
<u-cell-item icon="question-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="微信支付账单如何删除"></u-cell-item>
|
||||
<u-cell-item icon="rmb-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="交易遇到问问如何联系商家"></u-cell-item>
|
||||
<u-cell-item icon="heart" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="未成年人充值/平台消费"></u-cell-item>
|
||||
<u-cell-item icon="question-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="申请交易明细证明常见问题"></u-cell-item>
|
||||
<u-cell-item icon="rmb-circle" :title-style="titleStyle" :border-bottom="false" :border-top="true" title="微信支付账户被莫名扣费"></u-cell-item>
|
||||
<u-cell-item icon="order" :title-style="titleStyle" :border-bottom="true" :border-top="true" title="账单号'收入/支出'的统计说明"></u-cell-item>
|
||||
</view>
|
||||
<!-- 不要删,占位 -->
|
||||
<view class="u-p-30" style="background-color: #f8f8f8;"></view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollviewHeight:0, //页面高度
|
||||
titleStyle:{
|
||||
fontSize:"32rpx",
|
||||
color:"#000000",
|
||||
margin:"16rpx 0rpx"
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad:function(){
|
||||
let that=this;
|
||||
this.scrollviewHeight= that.$u.sys().windowHeight*0.895; // 0.828
|
||||
//this.getData();
|
||||
},
|
||||
methods:{
|
||||
toDownLoadOrder:function(){
|
||||
this.$u.route({
|
||||
url:"/pages/my/service/download-bill-order/download-bill-order"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,563 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title=" " :title-bold="true" :title-size="34"
|
||||
:background="{ background: '#57ab6d'}"
|
||||
back-icon-name="close" back-icon-size="34" back-icon-color="#f0f0f0"
|
||||
:border-bottom="false">
|
||||
</u-navbar>
|
||||
<view>
|
||||
<scroll-view :scroll-x="false" :scroll-y="true" class="hidden-scroll-bar"
|
||||
style="'width: 100%;background-color: #ffffff;height:88.5vh">
|
||||
<!-- 头部块 -->
|
||||
<view style="padding-bottom: 20rpx;background-color:#57ab6d;">
|
||||
<view class="u-flex u-row-center u-col-center">
|
||||
<!-- 年度账单/月度账单 -->
|
||||
<view style="width: 500rpx;">
|
||||
<u-tabs :list="tabList" :is-scroll="false" :current="currentTab" @change="tabChange"
|
||||
:font-size="32" :height="90" :bar-width="100"
|
||||
active-color="#ffffff" inactive-color="#d6d6d6" bg-color="#57ab6d"></u-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 月份,年份,类型 -->
|
||||
<view style="padding:40rpx;width:100%;padding-bottom: 30rpx;"
|
||||
class="u-flex u-row-between u-col-center">
|
||||
<view style="width: 50%;" v-if="currentTab==0">
|
||||
<u-icon name="arrow-down" size="24" color="#ffffff" @click="openTimePicker('month')"
|
||||
:label="currentBillObj.year+'年'+currentBillObj.month+'月'"
|
||||
label-color="#ffffff"
|
||||
label-size="30rpx" label-pos="left"
|
||||
margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view style="width: 50%;" v-if="currentTab==1">
|
||||
<u-icon name="arrow-down" size="24" color="#ffffff" @click="openTimePicker('year')"
|
||||
:label="currentBillObj.year+'年'"
|
||||
label-color="#ffffff"
|
||||
label-size="30rpx" label-pos="left"
|
||||
margin-right="6rpx">
|
||||
</u-icon>
|
||||
</view>
|
||||
<view class="u-flex u-row-between u-col-center" style="color:#d6d6d6;width: 50%;">
|
||||
<view :class="currentBillObj.currentbillTitle==0?'active-bill-type':'bill-type'" @click="changebillTitle(0)">支出</view>
|
||||
<view :class="currentBillObj.currentbillTitle==1?'active-bill-type':'bill-type'" @click="changebillTitle(1)">收入</view>
|
||||
<view :class="currentBillObj.currentbillTitle==2?'active-bill-type':'bill-type'" @click="changebillTitle(2)">其他</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 支付类型摘要信息 -->
|
||||
<view v-if="currentBillObj.currentbillTitle!=2"
|
||||
style="padding:40rpx;background-color:#57ab6d;width:100%;padding-top: 20rpx;">
|
||||
<view style="color:#d6d6d6;font-size: 26rpx;">
|
||||
共{{currentBillObj.currentbillTitle==0?'支出':'收入'}}{{currentBillObj.tradeCount}}笔，合计
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-top"
|
||||
style="color: #ffffff;font-size: 26px;margin-top: 20rpx;font-weight: bold;">
|
||||
<view style="margin-right:16rpx;font-size: 22px;margin-top: 4rpx;">¥</view>
|
||||
<view class="u-m-l-10">{{Number(currentBillObj.tradeAmount).toFixed(2)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 白色块 -->
|
||||
<view class="u-p-20" v-show="currentTab==0"
|
||||
style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view class="u-flex u-row-between u-col-center u-p-30"
|
||||
style="background-color: #f0f0f0;border-radius: 20rpx;">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-20">
|
||||
<u-icon name="red-packet-fill" color="#57ab6d" size="32"></u-icon>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-line-2" style="color:#909399;">使用记账本，查看分类统计(餐饮、交通等)</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon name="arrow-right" color="#909399" size="32"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<view v-show="currentBillObj.currentbillTitle!=2" >
|
||||
<!-- 图表 -->
|
||||
<view class="u-p-20">
|
||||
<view class="u-font-34 ">{{currentBillObj.currentbillTitle==0?'每月支出':'每月收入'}}对比</view>
|
||||
<view style="height: 500rpx;">
|
||||
<l-echart ref="chart"></l-echart>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 排行榜 -->
|
||||
<view class="u-p-20">
|
||||
<view class="u-m-b-50">{{currentBillObj.currentbillTitle==0?'支出':'收入'}}排行榜</view>
|
||||
|
||||
<view class="u-flex u-row-between u-col-center u-m-b-30"
|
||||
v-for="(rankItem,index) in monthRankingkList" :key="index">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view class="u-m-r-30" style="width: 40rpx;">{{rankItem.id}}</view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-image width="60rpx" height="60rpx" shape="circle" :src="rankItem.iconSrc"></u-image>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-line-1" style="width: 350rpx;">{{rankItem.billTitle}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view style="color: #000000;font-weight: bold;width: 150rpx;text-align: right;">
|
||||
<text>¥</text>
|
||||
<text>{{Number(rankItem.amountValue).toFixed(2)}}</text>
|
||||
</view>
|
||||
<view class="u-m-l-20">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-show="currentBillObj.currentbillTitle==2">
|
||||
<view style="padding-top: 20%;">
|
||||
<!-- 可以给src图片 -->
|
||||
<u-empty text="无其他资金流转记录" mode="data" :icon-size="100"></u-empty>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-p-40" v-show="currentTab==1"
|
||||
style="background-color: #ffffff;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;">
|
||||
<view v-if="currentBillObj.currentbillTitle!=2">
|
||||
<view class="u-font-34">
|
||||
{{currentBillObj.currentbillTitle==0?'支出':'收入'}}构成
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-40" v-for="(yearBillItem,index) in yearBillBuildArr" :key="index">
|
||||
<u-row>
|
||||
<u-col :span="4">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-image :src="yearBillItem.iconSrc" :width="36" :height="36"></u-image>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-line-1"
|
||||
style="width: 70%;font-size: 28rpx;">
|
||||
{{yearBillItem.billTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4">
|
||||
<view>
|
||||
<u-line-progress :show-percent="false" :height="16"
|
||||
:active-color="yearBillItem.color"
|
||||
:percent="yearBillItem.percentValue"></u-line-progress>
|
||||
</view>
|
||||
</u-col>
|
||||
<u-col :span="4">
|
||||
<view style="width: 100%;" class="u-flex u-row-right u-col-center">
|
||||
<view style="text-align: right;font-weight: bold;color:#000000;font-size: 26rpx;">
|
||||
¥{{Number(yearBillItem.amountValue).toFixed(2)}}
|
||||
</view>
|
||||
<view class="u-m-l-10">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view v-if="currentBillObj.currentbillTitle==2">
|
||||
<view class="u-font-34">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view> 个人资金流转</view>
|
||||
<view class="u-m-l-16">
|
||||
<u-icon name="info-circle" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-40">
|
||||
<view class="u-flex u-row-between u-col-center u-m-t-40"
|
||||
v-for="(otherItem,otherIndex) in yearBillBuildOtherArr" :key="otherIndex">
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view>
|
||||
<u-icon name="rmb-circle" color="#ff9900" size="40"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-l-20 u-font-32">{{otherItem.title}}</view>
|
||||
</view>
|
||||
<view class="u-flex u-row-left u-col-center">
|
||||
<view style="font-weight: bold;">¥{{Number(otherItem.amountValue).toFixed(2)}}</view>
|
||||
<view class="u-m-l-10">
|
||||
<u-icon name="arrow-right" color="#909399"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 月份查询筛选-->
|
||||
<u-picker mode="time" v-model="monthPickerShow" :params="monthTimeParams" end-year="2026"
|
||||
confirm-color="#3c2e55" confirm-text="确定" @confirm="monthTimePickerConfirm"
|
||||
:show-time-tag="false"></u-picker>
|
||||
<!-- 年度查询筛选-->
|
||||
<u-picker mode="time" v-model="yearPickerShow" :params="yearTimeParams" end-year="2026"
|
||||
confirm-color="#3c2e55" confirm-text="确定" @confirm="yearTimePickerConfirm"
|
||||
:show-time-tag="false"></u-picker>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef APP-PLUS
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/app/echarts.min';
|
||||
// #endif
|
||||
// #ifndef APP-PLUS
|
||||
import * as echarts from '@/uni_modules/lime-echart/static/web/echarts.esm.min';
|
||||
// #endif
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
//年月tab切换器
|
||||
tabList:[
|
||||
{name:"月账单"},{name:"年账单"}
|
||||
],
|
||||
//当期年月tab的下标
|
||||
currentTab:0,
|
||||
//参数
|
||||
currentBillObj:{
|
||||
year:new Date().getFullYear(), //年
|
||||
month:new Date().getMonth()+1, //月
|
||||
currentbillTitle:0 ,//0支出 ,1收入 2其他
|
||||
tradeCount:264,
|
||||
tradeAmount:216734.8
|
||||
},
|
||||
monthPickerShow:false, //月份时间选择器开关
|
||||
yearPickerShow:false, //年度事件选择器开关
|
||||
//时间参数-月
|
||||
monthTimeParams:{
|
||||
year: true,
|
||||
month: true,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
timestamp: true,
|
||||
},
|
||||
//时间参数-年
|
||||
yearTimeParams:{
|
||||
year: true,
|
||||
month: false,
|
||||
day: false,
|
||||
hour: false,
|
||||
minute: false,
|
||||
second: false,
|
||||
timestamp: true,
|
||||
},
|
||||
//月度排行榜
|
||||
monthRankingkList:[],
|
||||
//年度账单构成
|
||||
yearBillBuildArr:[
|
||||
{
|
||||
billTitle:"转账",
|
||||
percentValue:70,
|
||||
amountValue:513080,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"消费支出",
|
||||
percentValue:20,
|
||||
amountValue:231160.58,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"发红包",
|
||||
percentValue:10,
|
||||
amountValue:44650,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
],
|
||||
//年度账单其他类型的数据结构
|
||||
yearBillBuildOtherArr:[],
|
||||
//图表插件 :https://ext.dcloud.net.cn/plugin?id=4899
|
||||
//图表的配置 参考:https://echarts.apache.org/zh/option.html#xAxis.axisLine.lineStyle.join
|
||||
chartOption: {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLabel: {
|
||||
color: '#909399',
|
||||
fontSize:10,
|
||||
},
|
||||
axisLine:{
|
||||
lineStyle:{
|
||||
color:'rgb(172, 233, 189)'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show:false,
|
||||
},
|
||||
series: [{
|
||||
data: [0,0,0,0,0,0],
|
||||
type: 'bar',//柱状
|
||||
showBackground:false,//是否显示阴影
|
||||
color:'rgb(172, 233, 189)',//柱体颜色
|
||||
borderColor:'#fff',//柱体背景颜色
|
||||
barWidth:20,//柱条的宽度，
|
||||
label:{
|
||||
show:true,
|
||||
position:'top',
|
||||
fontSize:9,
|
||||
color:'inherit',
|
||||
formatter:function(params){
|
||||
//console.log(params);
|
||||
let val= params.value;
|
||||
//console.log("数值",val);
|
||||
if(val<10000){
|
||||
return "¥"+val.toFixed(2);
|
||||
}else{
|
||||
return "¥"+(val/10000).toFixed(1)+"万"
|
||||
}
|
||||
}
|
||||
},
|
||||
}]
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
mounted:function(){
|
||||
let that=this;
|
||||
that.$refs.chart.init(echarts, chart=> {
|
||||
that.getMonthData();
|
||||
chart.on('click',function(params){
|
||||
that.listenerChartClick(params.dataIndex)
|
||||
})
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
//年账单,月账单切换事件
|
||||
tabChange:function(index){
|
||||
this.currentTab = index;
|
||||
if(index==1){
|
||||
this.getYearBillData();
|
||||
}else{
|
||||
//获取月度数据,以图表为例
|
||||
this.getMonthData();
|
||||
}
|
||||
},
|
||||
//打开时间选择器
|
||||
openTimePicker:function(type){
|
||||
let that=this;
|
||||
if(type=='month'){
|
||||
that.monthPickerShow=true;
|
||||
}
|
||||
if(type=='year'){
|
||||
that.yearPickerShow=true;
|
||||
}
|
||||
},
|
||||
//选择时间变化-月度
|
||||
monthTimePickerConfirm:function(obj){
|
||||
let year=obj.year;
|
||||
let monthStr=obj.month;
|
||||
let month= (new Date(obj.timestamp*1000)).getMonth()+1;
|
||||
console.log("选择的月份",month);
|
||||
this.currentBillObj.month=month;
|
||||
this.currentBillObj.year=year;
|
||||
this.getMonthData();
|
||||
},
|
||||
//选择时间变化-年度
|
||||
yearTimePickerConfirm:function(obj){
|
||||
let year=obj.year;
|
||||
this.currentBillObj.year=year;
|
||||
this.getYearBillData();
|
||||
},
|
||||
//改变账单类型 0支出 1收入 2其他
|
||||
changebillTitle:function(index){
|
||||
this.currentBillObj.currentbillTitle=index;
|
||||
//年度账单
|
||||
if(this.currentTab==1){
|
||||
this.getYearBillData();
|
||||
}
|
||||
//获取月度数据,以图表为例
|
||||
if(this.currentTab==0&&index!=2){
|
||||
this.getMonthData();
|
||||
}
|
||||
},
|
||||
//获取图表数据
|
||||
getMonthData:function(){
|
||||
let that=this;
|
||||
let param={
|
||||
currentTab:this.currentTab, //0月度 1年度
|
||||
currentBillType:this.currentBillObj.currentbillTitle,//0支出 1收入 2其他
|
||||
year:this.currentBillObj.year, //当前年度
|
||||
month:this.currentBillObj.month //当前月度(如果当前选择是年度,month参数要忽略的)
|
||||
};
|
||||
console.log("获取月度账单参数",param);
|
||||
if(this.currentTab==0){
|
||||
if(this.currentBillObj.currentbillTitle==1){
|
||||
//下面数据临时写死,实际后端请求要得到柱状图的的x,y坐标系的数据以及月度排行数据
|
||||
let xData=['6月', '7月', '8月', '9月', '10月', '11月'];
|
||||
let currentMonthIndex= xData.findIndex(item=>item.indexOf(that.currentBillObj.month)!=-1);
|
||||
//console.log("currentMonthIndex",currentMonthIndex);
|
||||
let dataArr=[21000,84000,16000,98000,102000,216743];
|
||||
let currentMonthValue= dataArr[currentMonthIndex];
|
||||
dataArr[currentMonthIndex]={
|
||||
value:currentMonthValue,
|
||||
itemStyle:{
|
||||
color:"#19bE6B"
|
||||
}
|
||||
}
|
||||
that.chartOption.xAxis.data=xData;
|
||||
that.chartOption.series[0].data=dataArr;
|
||||
that.$refs.chart.setOption(this.chartOption);
|
||||
//模拟后台数据
|
||||
that.currentBillObj.tradeCount=267;//交易记录次数
|
||||
that.currentBillObj.tradeAmount=318962.2;//交易记录总额
|
||||
//月度排行数据
|
||||
that.monthRankingkList=[
|
||||
{id:1,iconSrc:"/static/image/bill/zhuanzhang.jpg",billTitle:"转账",amountValue:182204.3},
|
||||
{id:2,iconSrc:"/static/image/bill/xiaofei.jpg",billTitle:"二维码收付款",amountValue:21523.5},
|
||||
{id:3,iconSrc:"/static/image/bill/hongbao.jpg",billTitle:"微信红包",amountValue:8550},
|
||||
];
|
||||
}else{
|
||||
let xData=['6月', '7月', '8月', '9月', '10月', '11月'];
|
||||
let currentMonthIndex= xData.findIndex(item=>item.indexOf(that.currentBillObj.month)!=-1);
|
||||
//console.log("currentMonthIndex",currentMonthIndex);
|
||||
let dataArr=[55000,102000,38000,116000,114000,265400];
|
||||
let currentMonthValue= dataArr[currentMonthIndex];
|
||||
dataArr[currentMonthIndex]={
|
||||
value:currentMonthValue,
|
||||
itemStyle:{
|
||||
color:"#19bE6B"
|
||||
}
|
||||
}
|
||||
that.chartOption.xAxis.data=xData;
|
||||
this.chartOption.series[0].data=dataArr;//模拟后台数据
|
||||
this.$refs.chart.setOption(this.chartOption);
|
||||
that.currentBillObj.tradeCount=324;//交易记录次数
|
||||
that.currentBillObj.tradeAmount=216734.8;//交易记录总额
|
||||
that.monthRankingkList=[
|
||||
{id:1,iconSrc:"/static/image/bill/zhuanzhang.jpg",billTitle:"转账",amountValue:182204.3},
|
||||
{id:2,iconSrc:"/static/image/bill/xiaofei.jpg",billTitle:"二维码收付款",amountValue:21523.5},
|
||||
{id:3,iconSrc:"/static/image/bill/hongbao.jpg",billTitle:"微信红包",amountValue:8550},
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
//获取年账单
|
||||
getYearBillData:function(){
|
||||
let that=this;
|
||||
let param={
|
||||
currentTab:this.currentTab, //0月度 1年度
|
||||
currentBillType:this.currentBillObj.currentbillTitle,//0支出 1收入 2其他
|
||||
year:this.currentBillObj.year, //当前年度
|
||||
month:this.currentBillObj.month //当前月度(如果当前选择是年度,month参数要忽略的)
|
||||
};
|
||||
console.log("获取年度度账单参数",param);
|
||||
if(this.currentTab==1){
|
||||
that.currentBillObj.currentbillTitle;
|
||||
//收入
|
||||
if(that.currentBillObj.currentbillTitle==0){
|
||||
that.currentBillObj.tradeCount=3120;
|
||||
that.currentBillObj.tradeAmount=3816734.8;
|
||||
this.yearBillBuildArr=[
|
||||
{
|
||||
billTitle:"转账",
|
||||
percentValue:78,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.78,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"消费支出",
|
||||
percentValue:21,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.21,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"发红包",
|
||||
percentValue:1,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.01,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
];
|
||||
}
|
||||
//支出
|
||||
if(that.currentBillObj.currentbillTitle==1){
|
||||
that.currentBillObj.tradeCount=3878;
|
||||
that.currentBillObj.tradeAmount=4201384.68;
|
||||
this.yearBillBuildArr=[
|
||||
{
|
||||
billTitle:"收转账",
|
||||
percentValue:80,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.8,
|
||||
color:"#F29100",
|
||||
iconSrc:"/static/image/bill/zhuanzhang.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"二维码收款",
|
||||
percentValue:10,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.1,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"收红包",
|
||||
percentValue:5,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.05,
|
||||
color:"#fa3534",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"退款",
|
||||
percentValue:3,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.03,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/xiaofei.jpg"
|
||||
},
|
||||
{
|
||||
billTitle:"其他",
|
||||
percentValue:2,
|
||||
amountValue:that.currentBillObj.tradeAmount*0.02,
|
||||
color:"#2979ff",
|
||||
iconSrc:"/static/image/bill/hongbao.jpg"
|
||||
}
|
||||
];
|
||||
}
|
||||
//其他
|
||||
if(that.currentBillObj.currentbillTitle==2){
|
||||
this.yearBillBuildOtherArr=[
|
||||
{title:"零钱提现",amountValue:1001},
|
||||
{title:"零钱提现",amountValue:430}
|
||||
];
|
||||
}
|
||||
}
|
||||
},
|
||||
//监听柱状图点击事件
|
||||
listenerChartClick(dataIndex){
|
||||
console.log("dataIndex",dataIndex);
|
||||
let monthIndex= this.chartOption.xAxis.data[dataIndex];
|
||||
this.currentBillObj.month=monthIndex.replace('月','');
|
||||
this.getMonthData();
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bill-type{
|
||||
border-radius: 30rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
.active-bill-type{
|
||||
border: 1rpx solid #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 4rpx 16rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<view class="service-home-page">
|
||||
<u-navbar :is-back="true" title="服务" :title-bold="true" :title-size="34" :background="{background: '#f1f1f1'}"
|
||||
title-color="#404133" :border-bottom="false" z-index="1001">
|
||||
<view slot="right" class="u-m-r-20" @click="modelShow=true">
|
||||
<u-icon name="more-dot-fill" size="48"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<view class="u-p-20">
|
||||
<view class="u-flex u-row-around u-col-center" style="background-color:rgb(87,171,109);border-radius: 16rpx;height: 280rpx;
|
||||
font-size: 32rpx;color: #f8f8f8;text-align: center;">
|
||||
<view style="height: 150rpx;">
|
||||
<view style="height: 100rpx;">
|
||||
<u-icon name="/static/image/wx/services/shoufukuan.png" color="#ffffff" size="90rpx"></u-icon>
|
||||
</view>
|
||||
<view style="font-weight: bold;">收付款</view>
|
||||
</view>
|
||||
<view @click="toWallet()" style="height: 150rpx;">
|
||||
<view style="height: 100rpx;padding-top:20rpx;">
|
||||
<u-icon name="/static/image/wx/services/qianbao.png" color="#ffffff" size="70rpx"></u-icon>
|
||||
</view>
|
||||
<view>
|
||||
<view style="font-weight: bold;">钱包</view>
|
||||
<view style="color: #dbdbdb;;font-size:24rpx;font-weight: bold;">
|
||||
<text v-if="userAccount.accountBalance"> ¥ {{amountFormat()}}</text>
|
||||
<text v-else>¥ 0.00</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin: 20rpx 0rpx;font-size: 30rpx;">
|
||||
<view class="u-m-b-30" style="color:#606266">金融理财</view>
|
||||
<u-row style="color: #000000;font-size: 28rpx;padding: 30rpx 0rpx;">
|
||||
<u-col :span="3" v-for="(service,index) in financeServiceList" :key="index">
|
||||
<view style="text-align: center;margin-bottom: 10rpx;">
|
||||
<u-icon :name="service.iconPath" :size="70"></u-icon>
|
||||
</view>
|
||||
<view style="text-align: center;">
|
||||
{{service.title}}
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view
|
||||
style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin: 20rpx 0rpx;font-size: 30rpx;">
|
||||
<view class="u-m-b-30" style="color:#606266">生活服务</view>
|
||||
<u-row style="color: #000000;font-size: 28rpx;">
|
||||
<u-col style="margin: 30rpx 0rpx;" :span="3" v-for="(service,index) in lifeServiceList"
|
||||
:key="index">
|
||||
<view style="text-align: center;margin-bottom: 10rpx;">
|
||||
<u-icon :name="service.iconPath" :size="70"></u-icon>
|
||||
</view>
|
||||
<view style="text-align: center;">
|
||||
<view>{{service.title}}</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view
|
||||
style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin: 20rpx 0rpx;font-size: 30rpx;">
|
||||
<view class="u-m-b-30" style="color:#606266">交通出行</view>
|
||||
<u-row style="color: #000000;font-size: 28rpx;">
|
||||
<u-col style="margin: 30rpx 0rpx;" :span="3" v-for="(service,index) in jiaotongServiceList"
|
||||
:key="index">
|
||||
<view style="text-align: center;margin-bottom: 10rpx;">
|
||||
<u-icon :name="service.iconPath" :size="70"></u-icon>
|
||||
</view>
|
||||
<view style="text-align: center;">
|
||||
<view>{{service.title}}</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
<view
|
||||
style="background-color: #ffffff;border-radius: 10rpx;padding: 30rpx;margin: 20rpx 0rpx;font-size: 30rpx;">
|
||||
<view class="u-m-b-30" style="color:#606266">购物消费</view>
|
||||
<u-row style="color: #000000;font-size: 28rpx;">
|
||||
<u-col style="margin: 30rpx 0rpx;" :span="3" v-for="(service,index) in shopList" :key="index">
|
||||
<view style="text-align: center;margin-bottom: 10rpx;">
|
||||
<u-icon :name="service.iconPath" :size="70"></u-icon>
|
||||
</view>
|
||||
<view style="text-align: center;">
|
||||
<view>{{service.title}}</view>
|
||||
</view>
|
||||
</u-col>
|
||||
</u-row>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<u-action-sheet :list="actionList" v-model="modelShow" @click="toServiceSet"
|
||||
border-radius="20"></u-action-sheet>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
userAccount: {},
|
||||
financeServiceList: [{
|
||||
iconPath: '/static/image/wx/services/xinyongka.png',
|
||||
title: '信用卡还款'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/weilidai.png',
|
||||
title: '微粒贷借钱'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/licai.png',
|
||||
title: '理财通'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/baoxianfuwu.png',
|
||||
title: '保险服务'
|
||||
},
|
||||
],
|
||||
lifeServiceList: [{
|
||||
iconPath: '/static/image/wx/services/shoujichongzhi.png',
|
||||
title: '手机充值'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/shenghuojiaofei.png',
|
||||
title: '生活缴费'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/qq.png',
|
||||
title: 'Q币充值'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/city.png',
|
||||
title: '城市服务'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/gongyi.png',
|
||||
title: '腾讯公益'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/yiliaojiankang.png',
|
||||
title: '医疗健康'
|
||||
},
|
||||
],
|
||||
jiaotongServiceList: [{
|
||||
iconPath: '/static/image/wx/services/chuxing.png',
|
||||
title: '出行服务'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/huoche.png',
|
||||
title: '火车票机票'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/didi.png',
|
||||
title: '滴滴出行'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/jiudian.png',
|
||||
title: '酒店'
|
||||
},
|
||||
],
|
||||
shopList: [{
|
||||
iconPath: '/static/image/wx/services/pinpai.png',
|
||||
title: '品牌发现'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/jingdong.png',
|
||||
title: '京东购物'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/waimai.png',
|
||||
title: '美团外卖'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/dianying.png',
|
||||
title: '电影演出'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/meituantejia.png',
|
||||
title: '美团特价'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/pinduoduo.png',
|
||||
title: '拼多多'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/weipinhui.png',
|
||||
title: '唯品会特卖'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/zhuanzhuan.png',
|
||||
title: '转转二手'
|
||||
},
|
||||
{
|
||||
iconPath: '/static/image/wx/services/beike.png',
|
||||
title: '贝壳找房'
|
||||
},
|
||||
],
|
||||
modelShow: false,
|
||||
actionList: [{
|
||||
text: '服务管理',
|
||||
fontSize: 30,
|
||||
color: '#000000',
|
||||
subText: ''
|
||||
}, ],
|
||||
};
|
||||
},
|
||||
onShow: function() {
|
||||
this.getAccountInfo();
|
||||
},
|
||||
methods: {
|
||||
|
||||
getAccountInfo: function() {
|
||||
let that = this;
|
||||
that.$u.api.imUser.getUserAccountInfo({}).then(res => {
|
||||
if (res.code == 200) {
|
||||
that.userAccount = res.data;
|
||||
this.$u.vuex("vuex_userAccountInfo", that.userAccount);
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
amountFormat: function() {
|
||||
let that = this;
|
||||
if (that.userAccount != null && that.userAccount != {} && that.userAccount.accountBalance != null &&
|
||||
that.userAccount != undefined) {
|
||||
let value = this.userAccount.accountBalance ? this.userAccount.accountBalance.toString() : '0.00';
|
||||
var arrayNum = value.split(".");
|
||||
if (arrayNum.length == 1) {
|
||||
return value.toString() + ".00";
|
||||
} else {
|
||||
if (arrayNum.length > 1) {
|
||||
//小数点右侧 如果小于两位则补一个0
|
||||
if (arrayNum[1].length < 2) {
|
||||
return value.toString() + "0";
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return "0.00";
|
||||
},
|
||||
|
||||
toWallet: function() {
|
||||
this.$u.route("/pages/tabbar/my/service/wallat");
|
||||
},
|
||||
toServiceSet: function(index) {
|
||||
console.log(`点击了第${index + 1}项，内容为：${this.actionList[index].text}`)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.service-home-page {
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="支付管理" :title-bold="true" :title-size="34" :background="{ background: '#f1f1f1' }"
|
||||
title-color="#404133" :border-bottom="false" z-index="1001">
|
||||
</u-navbar>
|
||||
|
||||
<view style="width: 100%;">
|
||||
<u-cell-item title="修改支付密码" @click="toUpdatePayPwd"></u-cell-item>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<u-popup v-model="passwordPopFlag" mode="bottom" border-radius="14" length="70%"
|
||||
:mask-close-able="false">
|
||||
<view class="u-p-30">
|
||||
<view>
|
||||
<view class="u-flex u-row-between">
|
||||
<view style="width: 100rpx;" @click="closePwdPop">
|
||||
<u-icon name="close"></u-icon>
|
||||
</view>
|
||||
<view v-if="pwdErrorTips.length>0"
|
||||
style="text-align: center;color: #FC5531;font-size: 34rpx">
|
||||
{{pwdErrorTips}}
|
||||
</view>
|
||||
<view v-else style="text-align: center;font-weight: bold;font-size: 32rpx;">
|
||||
<text>请输入支付密码</text>
|
||||
</view>
|
||||
<view style="width: 100rpx;">
|
||||
<text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-50">
|
||||
<u-message-input :breathe="true" :maxlength="6" :dot-fill="true"
|
||||
@change="inputChange" @finish="inputFinish" :focus="pwdFocus">
|
||||
</u-message-input>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
passwordPopFlag:false,
|
||||
pwdErrorTips:'',
|
||||
pwdFocus:false,
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
toUpdatePayPwd:function(){
|
||||
this.passwordPopFlag=true;
|
||||
this.pwdFocus=true;
|
||||
},
|
||||
closePwdPop:function(){
|
||||
this.pwdErrorTips="";
|
||||
this.passwordPopFlag=false;
|
||||
this.pwdFocus=false;
|
||||
},
|
||||
inputChange(e){
|
||||
this.pwdErrorTips="";
|
||||
},
|
||||
inputFinish(e) {
|
||||
let that=this;
|
||||
console.log('输入结束，当前值为：' + e);
|
||||
let param={
|
||||
tradePwd:e
|
||||
};
|
||||
that.$u.api.chatGroup.updateTradePwd(param).then(res => {
|
||||
console.log("交易密码校验结果",res);
|
||||
if(res.code==200){
|
||||
this.globalUtil.utilAlert("修改成功");
|
||||
this.closePwdPop();
|
||||
setTimeout(function(){
|
||||
uni.navigateBack();
|
||||
},2000);
|
||||
return;
|
||||
}else{
|
||||
let message=res.message?res.message:'支付密码错误';
|
||||
this.globalUtil.utilAlert(message);
|
||||
this.pwdErrorTips=message;
|
||||
this.closePwdPop();
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<view class="wallat-page">
|
||||
<u-navbar :is-back="true" title="钱包" :title-bold="true" :title-size="34" :background="{ background: '#f1f1f1' }"
|
||||
title-color="#404133" :border-bottom="false" z-index="1001">
|
||||
<view slot="right" style="margin-right: 20rpx;" @click="toMyBill()">
|
||||
<text style="font-size: 34rpx;color: #000000;">账单</text>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<view>
|
||||
<template v-for="(item,index) in cellItemList">
|
||||
<u-cell-item :title-style="titleStyle" :title="item.title"
|
||||
@click="itemClick(item)"
|
||||
style="padding: 36rpx 30rpx;"
|
||||
:value="item.value?item.value:' '"
|
||||
:value-style="valueStyle" bg-color="#ffffff">
|
||||
<view slot="icon" class="u-m-r-16">
|
||||
<u-icon :name="item.iconPath" :color="item.iconColor" :size="40" top="6"></u-icon>
|
||||
</view>
|
||||
</u-cell-item>
|
||||
<u-gap v-if="index==2||index==4" height="16" bg-color="#eee" margin-top="1" margin-bottom="1"></u-gap>
|
||||
</template>
|
||||
</view>
|
||||
<view style="position: absolute;bottom: 60rpx;text-align: center;width: 100%;">
|
||||
<view style="color: #36648b;font-weight: bold;margin-bottom: 10rpx;">帮助中心</view>
|
||||
<view style="font-size: 24rpx;color: #909399;">本服务由财务通提供</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
titleStyle:{
|
||||
fontSize:'32rpx',
|
||||
color:'#000000',
|
||||
},
|
||||
valueStyle:{
|
||||
fontSize:'32rpx',
|
||||
color:'#000000',
|
||||
},
|
||||
cellItemList:[
|
||||
{title:'零钱',value:'¥105242.12',iconPath:'rmb-circle',iconColor:'#f29100'},
|
||||
{title:'零钱通',value:'',iconPath:'integral',iconColor:'#f29100'},
|
||||
{title:'银行卡',value:'',iconPath:'zhuanfa',iconColor:'#5788f2'},
|
||||
{title:'支付分',value:'',iconPath:'coupon',iconColor:'#f29100'},
|
||||
{title:'亲属卡',value:'',iconPath:'grid',iconColor:'#f29100'},
|
||||
{title:'身份信息',value:'',iconPath:'fingerprint',iconColor:'#5788f2'},
|
||||
/* {title:'安全保障',value:'',iconPath:'integral-fill',iconColor:'#5788f2'}, */
|
||||
{title:'支付设置',value:'',iconPath:'setting',iconColor:'#5788f2'}
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad:function(){
|
||||
console.log("this.vuex_userAccountInfo",this.vuex_userAccountInfo);
|
||||
if(this.vuex_userAccountInfo!=null){
|
||||
this.cellItemList[0].value= this.amountFormat(this.vuex_userAccountInfo.accountBalance);
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
amountFormat:function(accountBalance){
|
||||
let that=this;
|
||||
if(accountBalance!=null&&accountBalance!=undefined){
|
||||
let value=accountBalance?accountBalance.toString():'0.00';
|
||||
var arrayNum = value.split(".");
|
||||
if (arrayNum.length == 1) {
|
||||
return value.toString()+".00";
|
||||
}
|
||||
else{
|
||||
if (arrayNum.length>1) {
|
||||
//小数点右侧 如果小于两位则补一个0
|
||||
if (arrayNum[1].length<2) {
|
||||
return value.toString()+"0" ;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return "0.00";
|
||||
},
|
||||
itemClick:function(item){
|
||||
console.log("item",item);
|
||||
if(item.title=='零钱'){
|
||||
this.$u.route("/pages/tabbar/my/service/walletOption");
|
||||
}
|
||||
if(item.title=="支付设置"){
|
||||
this.$u.route("/pages/tabbar/my/service/paySet");
|
||||
}
|
||||
},
|
||||
toMyBill:function(){
|
||||
this.$u.route("/pages/tabbar/my/service/my-bill");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.wallat-page{
|
||||
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title=" "
|
||||
:background="{ background: '#f1f1f1' }"
|
||||
:border-bottom="false">
|
||||
<view slot="right" style="margin-right: 20rpx;">
|
||||
<text style="font-size: 34rpx;color: #000000;">零钱明细</text>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<view style="display: flex;flex-direction: column;justify-content: space-around;align-items: center;">
|
||||
<view class="u-m-t-80">
|
||||
<u-icon name="rmb-circle-fill" size="120" color="#f2b007"></u-icon>
|
||||
</view>
|
||||
<view class="u-m-t-30 u-font-34">
|
||||
<view style="text-align: center;">
|
||||
<text>我的零钱</text>
|
||||
</view>
|
||||
<view style="font-size: 36px;font-weight: bold;text-align: center;margin-top: 20rpx;"> ¥ {{amountFormat()}}</view>
|
||||
<view style="color: #f29100;font-size: 32rpx;text-align: center;margin-top: 20rpx;">
|
||||
转入零钱通，能赚又能花<u-icon name="arrow-right" color="#f29100" size="30"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="u-m-t-80" style="padding:25%;">
|
||||
<view>
|
||||
<u-button @click="toPay()" type="success">充值</u-button>
|
||||
</view>
|
||||
<view class="u-m-t-30">
|
||||
<u-button @click="toCashOut()" type="default" class="custom-style" :hair-line="false">
|
||||
提现
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="position: absolute;bottom: 60rpx;text-align: center;width: 100%;">
|
||||
<view style="color: #36648b;font-weight: bold;margin-bottom: 10rpx;">常见问题</view>
|
||||
<view style="font-size: 24rpx;color: #909399;">本服务由财务通提供</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
amountFormat:function(){
|
||||
let that=this;
|
||||
if(that.vuex_userAccountInfo!=null&&that.vuex_userAccountInfo.accountBalance!=null&&that.vuex_userAccountInfo!=undefined){
|
||||
let value=this.vuex_userAccountInfo.accountBalance?this.vuex_userAccountInfo.accountBalance.toString():'0.00';
|
||||
var arrayNum = value.split(".");
|
||||
if (arrayNum.length == 1) {
|
||||
return value.toString()+".00";
|
||||
}
|
||||
else{
|
||||
if (arrayNum.length>1) {
|
||||
//小数点右侧 如果小于两位则补一个0
|
||||
if (arrayNum[1].length<2) {
|
||||
return value.toString()+"0" ;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
return "0.00";
|
||||
},
|
||||
toPay:function(){
|
||||
this.$u.route("/pages/tabbar/my/service/wallet-pay");
|
||||
},
|
||||
toCashOut:function(){
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.custom-style{
|
||||
background-color: #e0e0e0 !important;
|
||||
color: #19be6b !important;
|
||||
border:#f1f1f1 !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<view class="red-bag-page">
|
||||
<u-navbar back-icon-name="close" :back-icon-size="36" back-icon-color="#333333" :border-bottom="false"
|
||||
title="充值" title-color="#000000" :title-size="36" :title-bold="true">
|
||||
<view slot="right">
|
||||
<view class="u-m-r-20">
|
||||
<u-icon name="more-dot-fill" color="#333333" :size="36"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight" type="error"></u-top-tips>
|
||||
<view class="u-m-30" style="background-color: #ffffff;color: #000000;font-size: 34rpx;border-radius: 10rpx;">
|
||||
<view class="u-flex u-row-between u-col-center u-p-20" :style="payValue>maxPayLimit?'color:#fa3534':''">
|
||||
<view>
|
||||
<text>金额</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-input input-align="right" v-model="payValue" :border="false"
|
||||
@input="amountInputChange" type="digit"
|
||||
:custom-style="{color:payValue>maxPayLimit?'#fa3534':'#000000',fontSize:'34rpx'}"
|
||||
placeholder="¥0.00" placeholder-style="color:#cccccc;font-size:34rpx;" :clearable="false"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="u-m-30" style="background-color: #ffffff;color: #000000;font-size: 34rpx;border-radius: 10rpx;">
|
||||
<view class="u-flex u-row-between u-col-center"
|
||||
style="width: 100%;padding: 30rpx 20rpx;" @click="selectPayWay">
|
||||
<view>
|
||||
<text>充值方式</text>
|
||||
</view>
|
||||
<view>
|
||||
<u-icon color="#606266" name="arrow-right"
|
||||
label-pos="left" label-color="#000000" label-size="32rpx"
|
||||
:label="selectedPayWay.text"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view :style="payValue>maxPayLimit?'color:#fa3534;text-align: center;margin-top: 120rpx;':'text-align: center;margin-top: 120rpx;'"
|
||||
class="u-flex u-row-center u-col-center">
|
||||
<view style="font-size:36px;margin-right: 10rpx;font-weight: 500;margin-bottom: 10rpx;">¥</view>
|
||||
<view style="font-size:50px;font-weight: 400;">{{valueFormat()}}</view>
|
||||
</view>
|
||||
|
||||
<view class="u-flex u-row-center u-col-center u-m-t-30">
|
||||
<view @click="showPwdPop"
|
||||
style="font-size: 36rpx; background-color:#19be6b;color:#ffffff;border-radius: 16rpx;text-align: center;padding: 26rpx 100rpx;">充值</view>
|
||||
</view>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<u-action-sheet :tips="tips" :list="payWaylist" @click="payWayClick" v-model="payWayshow"></u-action-sheet>
|
||||
|
||||
|
||||
<u-popup v-model="passwordPopFlag" mode="bottom" border-radius="14" length="70%"
|
||||
:mask-close-able="false">
|
||||
<view class="u-p-30">
|
||||
<view>
|
||||
<view class="u-flex u-row-between">
|
||||
<view style="width: 100rpx;" @click="closePwdPop">
|
||||
<u-icon name="close"></u-icon>
|
||||
</view>
|
||||
<view v-if="pwdErrorTips.length>0"
|
||||
style="text-align: center;color: #FC5531;font-size: 34rpx">
|
||||
{{pwdErrorTips}}
|
||||
</view>
|
||||
<view v-else style="text-align: center;font-weight: bold;font-size: 32rpx;">
|
||||
<text>请输入支付密码</text>
|
||||
</view>
|
||||
<view style="width: 100rpx;">
|
||||
<text></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-30 u-p-b-30 u-border-bottom" style="text-align: center;font-size: 18px;">
|
||||
<view>充值到零钱</view>
|
||||
<view style="font-weight: bold;">
|
||||
<text style="margin-right: 6rpx;">¥</text><text style="font-size: 26px;">{{valueFormat()}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-m-t-50">
|
||||
<u-message-input :breathe="true" :maxlength="6" :dot-fill="true"
|
||||
@change="inputChange" @finish="inputFinish" :focus="pwdFocus">
|
||||
</u-message-input>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
payValue:"",
|
||||
redBagRemark:"",
|
||||
// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
|
||||
statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
|
||||
// 导航栏内容区域高度，不包括状态栏高度在内
|
||||
navbarHeight: 44,
|
||||
chatGroupId:'',
|
||||
passwordPopFlag:false,
|
||||
pwdFocus:false,
|
||||
pwdErrorTips:'',
|
||||
payWayshow:false,
|
||||
maxPayLimit:100000,
|
||||
payWaylist:[
|
||||
{
|
||||
text: '银行卡1',
|
||||
color:'#19be6b',
|
||||
fontSize:32,
|
||||
subText:'推荐',
|
||||
payID:1
|
||||
},
|
||||
{
|
||||
text: '银行卡2',
|
||||
color:'#2979ff',
|
||||
fontSize:32,
|
||||
payID:2
|
||||
}
|
||||
],
|
||||
tips: {
|
||||
text: '选择充值方式',
|
||||
color: '#000000',
|
||||
fontSize: 36
|
||||
},
|
||||
selectedPayWay:{
|
||||
text: '请选择',
|
||||
payID:0
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad:function(option){
|
||||
this.chatGroupId=option.chatGroupId;
|
||||
},
|
||||
methods:{
|
||||
valueFormat:function(){
|
||||
if(this.payValue.length<1){
|
||||
return "0.00"
|
||||
}
|
||||
if(this.payValue.toString().indexOf(".")==-1){
|
||||
return this.payValue+'.00';
|
||||
}else{
|
||||
return this.payValue;
|
||||
}
|
||||
},
|
||||
amountInputChange:function(e){
|
||||
console.log(e);
|
||||
if(Number(e)>this.maxPayLimit){
|
||||
this.showTips("单次充值金额不可超过"+this.maxPayLimit+"元");
|
||||
this.payValue="";
|
||||
}
|
||||
},
|
||||
|
||||
selectPayWay:function(){
|
||||
let that=this;
|
||||
that.payWayshow=true;
|
||||
},
|
||||
payWayClick:function(index){
|
||||
//console.log(`点击了第${index + 1}项`,this.payWaylist[index]);
|
||||
this.selectedPayWay=this.payWaylist[index];
|
||||
},
|
||||
showPwdPop:function(){
|
||||
let that=this;
|
||||
if(this.payValue.length<1||this.payValue<=0){
|
||||
this.showTips("未填写[金额]");
|
||||
return;
|
||||
}
|
||||
if(this.payValue>this.maxPayLimit){
|
||||
this.showTips("单次充值金额不可超过"+this.maxPayLimit+"元");
|
||||
return;
|
||||
}
|
||||
if(this.selectedPayWay.payID<1){
|
||||
this.showTips("请选择充值方式");
|
||||
return;
|
||||
}
|
||||
this.passwordPopFlag=true;
|
||||
this.pwdErrorTips="";
|
||||
setTimeout(function(){
|
||||
that.pwdFocus=true;
|
||||
},1000)
|
||||
},
|
||||
closePwdPop:function(){
|
||||
this.pwdErrorTips="";
|
||||
this.passwordPopFlag=false;
|
||||
this.pwdFocus=false;
|
||||
},
|
||||
inputChange(e){
|
||||
this.pwdErrorTips="";
|
||||
},
|
||||
inputFinish(e) {
|
||||
//this.pwdFocus=fasle;
|
||||
let that=this;
|
||||
console.log('输入结束，当前值为：' + e);
|
||||
let param={
|
||||
accountBalance:this.payValue,
|
||||
tradePwd:e
|
||||
};
|
||||
that.$u.api.imUser.validatePayTradePwd(param).then(res => {
|
||||
console.log("交易密码校验结果",res);
|
||||
if(res.code==200){
|
||||
this.submit();
|
||||
}else{
|
||||
let message=res.message?res.message:'支付密码错误';
|
||||
this.globalUtil.utilAlert(message);
|
||||
this.pwdErrorTips=message;
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
submit:function(){
|
||||
let that=this;
|
||||
let param={
|
||||
payValue:Number(this.payValue).toFixed(2),
|
||||
payWay:this.selectedPayWay.payID,
|
||||
}
|
||||
that.$u.api.imUser.toPayUserBalance(param).then(res =>{
|
||||
if(res.code==200){
|
||||
that.userAccount=res.data;
|
||||
this.$u.vuex("vuex_userAccountInfo",that.userAccount);
|
||||
this.closePwdPop();
|
||||
this.globalUtil.utilAlert("充值成功!",3000);
|
||||
setTimeout(function(){
|
||||
uni.navigateBack();
|
||||
},2000)
|
||||
}
|
||||
})
|
||||
console.log("充值参数",param);
|
||||
},
|
||||
|
||||
showTips(title) {
|
||||
this.$refs.uTips.show({
|
||||
title: title?title:'未填写[金额]',
|
||||
type:'error'
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.red-bag-page{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="银行卡" :title-bold="true" :title-size="34"
|
||||
:background="{background: '#f1f1f1'}"
|
||||
title-color="#404133" :border-bottom="false" z-index="1001">
|
||||
<view slot="right" class="u-m-r-20">
|
||||
<u-icon name="more-dot-fill" size="48"></u-icon>
|
||||
</view>
|
||||
</u-navbar>
|
||||
<template v-if="imgList.arr.length>0">
|
||||
<view class="yinhangitem" v-for="item in imgList.arr" :style="{backgroundImage:'url( '+ item.bg2x_url +' )'}"
|
||||
:key="item.bank_type">
|
||||
<image class="itemlogo1" :src="item.logo1x_url" mode=""></image>
|
||||
<view class="info">
|
||||
<view class="itemtitle">{{item.bank_desc}}<br><span>储蓄卡</span></view>
|
||||
<view class="itemnum"><span>·</span><span>·</span><span>·</span><span>· </span>
|
||||
<span>·</span><span>·</span><span>·</span><span>· </span>
|
||||
<span>·</span><span>·</span><span>·</span><span>· </span>
|
||||
{{item.bank_type}}
|
||||
</view>
|
||||
</view>
|
||||
<image class="itemlogo" :src="item.wl1x_url" mode="heightFix"></image>
|
||||
</view>
|
||||
</template>
|
||||
<view class="add">
|
||||
<span class="iconfont icon-jia"></span>
|
||||
<span>添加银行卡</span>
|
||||
<view>绑新卡送立减金</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
imgList:{
|
||||
arr:[]
|
||||
}
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
let that=this;
|
||||
plus.io.resolveLocalFileSystemURL('/static/xml/tu.xml', (entry) => {
|
||||
entry.file(function(file) {
|
||||
const fileReader = new plus.io.FileReader()
|
||||
fileReader.onloadend = (evt) => {
|
||||
const data = JSON.parse(evt.target.result);
|
||||
that.imgList.arr = data.bank_urls_list;
|
||||
}
|
||||
fileReader.readAsText(file, 'utf-8')
|
||||
})
|
||||
}, (err) => {
|
||||
console.log("发生了错误", err)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.add {
|
||||
height: 140rpx;
|
||||
width: calc(100% - 36rpx);
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
margin: 10rpx auto;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
font-size: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
div {
|
||||
color: #cea337;
|
||||
font-size: 24rpx;
|
||||
padding: 0 14rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.yinhangitem {
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200%;
|
||||
background-position: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 220rpx;
|
||||
width: calc(100% - 36rpx);
|
||||
// background-color: black;
|
||||
border-radius: 16rpx;
|
||||
margin: 10rpx auto;
|
||||
padding: 30rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.itemlogo1 {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 0 18rpx;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
|
||||
.itemtitle {
|
||||
span {
|
||||
font-size: 24rpx;
|
||||
color: #cbcece;
|
||||
}
|
||||
}
|
||||
|
||||
.itemnum {
|
||||
// font-weight: 700;
|
||||
font-size: 44rpx;
|
||||
padding-top: 40rpx;
|
||||
|
||||
span {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itemlogo {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
top: 0;
|
||||
// width: 100rpx;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page {
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<!-- <u-navbar :is-back="false" title="" :border-bottom="false" :background="{background: 'rgb(99,200,98)'}">
|
||||
<view class="slot-wrap">
|
||||
<view @click="goback()">
|
||||
<u-icon name="close" size="34" color="#ffffff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar> -->
|
||||
<image style="height: 100%;width: 100%;" src="/static/image/wx/wallet/fen-fu-page.jpg"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
goback(){
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
||||
flex: 1;
|
||||
/* 如果您想让slot内容与导航栏左右有空隙 */
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.container{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.page-image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/*page{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('/static/image/wx/wallet/fen-fu-page.jpg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="false" title="" :border-bottom="false" :background="{background: '#ffffff'}">
|
||||
<view class="slot-wrap">
|
||||
<view @click="goback()">
|
||||
<u-icon name="close" size="34" color="#606266"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</u-navbar>
|
||||
|
||||
<image class="page-image" src="/static/image/wx/wallet/linqiantong-page.jpg" mode="widthFix"></image>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
handle(){
|
||||
|
||||
},
|
||||
goback(){
|
||||
uni.navigateBack();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.slot-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 如果您想让slot内容占满整个导航栏的宽度 */
|
||||
flex: 1;
|
||||
/* 如果您想让slot内容与导航栏左右有空隙 */
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
.page-image{
|
||||
width: 100%;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar :is-back="true" title="" :title-bold="true" :background="{background: '#ffffff'}" :border-bottom="false" z-index="1001">
|
||||
</u-navbar>
|
||||
<image class="page-image" src="/static/image/wx/wallet/qinshuka-page.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-image{
|
||||
margin-top: 20rpx;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
page{
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user