页面开发
This commit is contained in:
donqi
parent
ed03a373dd
commit
f5a8fae1f9
|
|
@ -327,7 +327,8 @@ const servDetail = {
|
|||
action: '预约时间'
|
||||
}],
|
||||
mainServOrder: {
|
||||
servTitle: '清洗-空调',
|
||||
servTitle: '清洗-空调',
|
||||
picUrl: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big20000.jpg',
|
||||
orderTag: ['挂机', '到付试单', '到付款单'],
|
||||
address: '北京市东城区东华街道0.1到付+0.1代收',
|
||||
person2Contact: {
|
||||
|
|
@ -469,6 +470,115 @@ const specsList = [{
|
|||
checked: false,
|
||||
name: '小修（压敏/盘管/传感器/接收器/定时器）'
|
||||
}]
|
||||
|
||||
const myMoneyBag = {
|
||||
balance: '5221.79',
|
||||
balanceToExtract: '0.00',
|
||||
bill: [{
|
||||
duration: '2022年01月',
|
||||
income: '20478.96',
|
||||
outgoings: '-21065.36',
|
||||
statement: [{
|
||||
name: '余额支付',
|
||||
createTime: '2022-01-19 15:44:32',
|
||||
inOutMoney: '-170.00'
|
||||
}, {
|
||||
name: '商城退单',
|
||||
createTime: '2022-01-18 15:44:32',
|
||||
inOutMoney: '+8.00'
|
||||
}]
|
||||
}, {
|
||||
duration: '2022年01月',
|
||||
income: '20478.96',
|
||||
outgoings: '-21065.36',
|
||||
statement: [{
|
||||
name: '余额支付',
|
||||
createTime: '2022-01-19 15:44:32',
|
||||
inOutMoney: '-170.00'
|
||||
}, {
|
||||
name: '商城退单',
|
||||
createTime: '2022-01-18 15:44:32',
|
||||
inOutMoney: '+8.00'
|
||||
}]
|
||||
}, {
|
||||
duration: '2022年01月',
|
||||
income: '20478.96',
|
||||
outgoings: '-21065.36',
|
||||
statement: [{
|
||||
name: '余额支付',
|
||||
createTime: '2022-01-19 15:44:32',
|
||||
inOutMoney: '-170.00'
|
||||
}, {
|
||||
name: '商城退单',
|
||||
createTime: '2022-01-18 15:44:32',
|
||||
inOutMoney: '+8.00'
|
||||
}]
|
||||
}, {
|
||||
duration: '2022年01月',
|
||||
income: '20478.96',
|
||||
outgoings: '-21065.36',
|
||||
statement: [{
|
||||
name: '余额支付',
|
||||
createTime: '2022-01-19 15:44:32',
|
||||
inOutMoney: '-170.00'
|
||||
}, {
|
||||
name: '商城退单',
|
||||
createTime: '2022-01-18 15:44:32',
|
||||
inOutMoney: '+8.00'
|
||||
}]
|
||||
}, {
|
||||
duration: '2022年01月',
|
||||
income: '20478.96',
|
||||
outgoings: '-21065.36',
|
||||
statement: [{
|
||||
name: '余额支付',
|
||||
createTime: '2022-01-19 15:44:32',
|
||||
inOutMoney: '-170.00'
|
||||
}, {
|
||||
name: '商城退单',
|
||||
createTime: '2022-01-18 15:44:32',
|
||||
inOutMoney: '+8.00'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
|
||||
const statementDesc = {
|
||||
inOutMoney: '-59.00',
|
||||
name: '同意追加费用',
|
||||
status: '0', //0为交易成功
|
||||
desc: '同意追加费用',
|
||||
payRemark: '微信支付到帐',
|
||||
extractCode: '',
|
||||
createTime: '2022-01-20 15:44:32',
|
||||
orderCode: '20210612337987373',
|
||||
orderCreateTime: '2022-01-16 15:44:32'
|
||||
}
|
||||
|
||||
const payDeposit = {
|
||||
paidAmount: '0.00'
|
||||
}
|
||||
|
||||
const personToChat = {
|
||||
id: 3,
|
||||
name: 'vvv'
|
||||
}
|
||||
|
||||
const chatMsgList = [{
|
||||
sendUserId: 2,
|
||||
recvUserId: 3,
|
||||
msg: '喵喵？',
|
||||
time: '13:23'
|
||||
}, {
|
||||
sendUserId: 3,
|
||||
recvUserId: 2,
|
||||
msg: '喵喵!',
|
||||
time: '13:24'
|
||||
}, {
|
||||
sendUserId: 2,
|
||||
recvUserId: 3,
|
||||
msg: '汪汪汪！@#￥%……&*（）~',
|
||||
time: '13:25'
|
||||
}]
|
||||
|
||||
export default {
|
||||
moduleBarInfos,
|
||||
|
|
@ -488,5 +598,10 @@ export default {
|
|||
areaObj,
|
||||
specsList,
|
||||
regionList,
|
||||
districtList
|
||||
districtList,
|
||||
myMoneyBag,
|
||||
statementDesc,
|
||||
payDeposit,
|
||||
personToChat,
|
||||
chatMsgList
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"id": "m-emoji",
|
||||
"name": "表情库",
|
||||
"version": "2.0.0",
|
||||
"description": "单纯的js引入就可以用",
|
||||
"keywords": [
|
||||
"表情"
|
||||
]
|
||||
}
|
||||
10
pages.json
10
pages.json
|
|
@ -1,6 +1,8 @@
|
|||
{
|
||||
"pages": [{
|
||||
"path": "pages/index/index"
|
||||
}, {
|
||||
"path": "pages/index/msg-dialog"
|
||||
}],
|
||||
"subPackages": [{
|
||||
"root": "pages/area-proxy/",
|
||||
|
|
@ -24,6 +26,8 @@
|
|||
"path": "serv-detail"
|
||||
}, {
|
||||
"path": "finish-order"
|
||||
}, {
|
||||
"path": "cancel-order"
|
||||
}]
|
||||
}, {
|
||||
"root": "pages/my/",
|
||||
|
|
@ -37,6 +41,12 @@
|
|||
"path": "withdraw"
|
||||
}, {
|
||||
"path": "bank-account-bind"
|
||||
}, {
|
||||
"path": "my-money-bag"
|
||||
}, {
|
||||
"path": "statement-desc"
|
||||
}, {
|
||||
"path": "pay-deposit"
|
||||
}]
|
||||
}],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<view>
|
||||
<index v-if="curPageCode === 'indexPage'"></index>
|
||||
<my-home v-else-if="curPageCode === 'myPage'"></my-home>
|
||||
<my-home v-else-if="curPageCode === 'myPage'"></my-home>
|
||||
<msg-home v-else-if="curPageCode === 'msgPage'"></msg-home>
|
||||
<module-bar :moduleBarInfos="moduleBarInfos"></module-bar>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -9,13 +10,15 @@
|
|||
<script>
|
||||
import moduleBar from '@/components/custom-bar/module-bar.vue';
|
||||
import index from '@/pages/index/index-home.vue';
|
||||
import myHome from '@/pages/index/my-home.vue';
|
||||
import myHome from '@/pages/index/my-home.vue';
|
||||
import msgHome from '@/pages/index/msg-home.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
moduleBar,
|
||||
index,
|
||||
myHome
|
||||
myHome,
|
||||
msgHome
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 顶部操作条 -->
|
||||
<cu-custom :bgColor="'bg-white'" :isBack="true">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">{{personToChat.name}}</block>
|
||||
</cu-custom>
|
||||
<view class="cu-chat" @click="downPanelBlur" style="min-height: 70vh;">
|
||||
<view class="cu-item self" v-for="(item,index) in chatMsgList"
|
||||
v-if="item.sendUserId === curUserInfo.customerId">
|
||||
<view class="main">
|
||||
<view class="content bg-main-color shadow">
|
||||
<text>{{item.msg}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-avatar radius" :style="'background-image:url(' + curUserInfo.customerLogoUrl + ');'">
|
||||
</view>
|
||||
<view class="date">{{item.time}}</view>
|
||||
</view>
|
||||
<view class="cu-item" v-else>
|
||||
<view class="cu-avatar radius" :style="'background-image:url(' + personToChat.customerLogoUrl + ');'">
|
||||
</view>
|
||||
<view class="main">
|
||||
<view class="content shadow">
|
||||
<text>{{item.msg}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="date">{{item.time}}</view>
|
||||
</view>
|
||||
<!-- 内容发送中提示 -->
|
||||
<view class="cu-info" v-if="showLoading">
|
||||
<view class="load-info loading">内容发送中</view>
|
||||
</view>
|
||||
<!-- 内容发送失败提示 -->
|
||||
<view class="cu-info" v-if="showLoadErr">
|
||||
<text class="cuIcon-roundclosefill text-red margin-right-xs"></text>内容发送失败
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar foot input" :style="[{bottom:InputBottom +'px'}]">
|
||||
<view class="action" @click="showFuncAreaFun">
|
||||
<text class="cuIcon-roundadd text-grey"></text>
|
||||
</view>
|
||||
<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
|
||||
@focus="InputFocus" @blur="InputBlur" v-model="inputContent"></input>
|
||||
<!-- <view class="action" @click="showEmojiFun">
|
||||
<text class="cuIcon-emojifill text-grey"></text>
|
||||
</view> -->
|
||||
<button class="cu-btn bg-main-color shadow" @click="sendMsg('text')">发送</button>
|
||||
</view>
|
||||
<!-- 功能区，图片发送 -->
|
||||
<view class="downPanel" :style="'height:' + InputBottom + 'px'" v-if="showFuncArea || showEmoji">
|
||||
<view v-if="showFuncArea">
|
||||
<view class='grid grid-square col-4 padding'>
|
||||
<view class="text-center">
|
||||
<view class="text-sl"><text class='cuIcon-pic'></text></view>
|
||||
<view>相册</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="showEmoji">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import emoji from "@/components/js_sdk/m-emoji/m-emoji_2.0.0/emoji.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
InputBottom: 0,
|
||||
personToChat: null,
|
||||
curUserInfo: null,
|
||||
chatMsgList: [],
|
||||
showFuncArea: false,
|
||||
showEmoji: false,
|
||||
showLoading: false,
|
||||
showLoadErr: false,
|
||||
inputContent: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.curUserInfo = this.$request.getCurUserInfo();
|
||||
this.personToChat = await this.$api.data('personToChat');
|
||||
this.chatMsgList = await this.$api.data('chatMsgList');
|
||||
},
|
||||
InputFocus(e) {
|
||||
this.InputBottom = e.detail.height;
|
||||
},
|
||||
InputBlur(e) {
|
||||
this.InputBottom = this.showEmoji || this.showFuncAreaFun ? this.InputBottom : 0;
|
||||
},
|
||||
downPanelBlur() {
|
||||
this.showEmoji = false;
|
||||
this.showFuncArea = false;
|
||||
this.InputBottom = 0;
|
||||
},
|
||||
showFuncAreaFun() {
|
||||
uni.hideKeyboard();
|
||||
this.showFuncArea = true;
|
||||
this.showEmoji = false;
|
||||
this.InputBottom = this.InputBottom === 0 ? 300 : this.InputBottom;
|
||||
},
|
||||
showEmojiFun() {
|
||||
uni.hideKeyboard();
|
||||
this.showFuncArea = false;
|
||||
this.showEmoji = true;
|
||||
this.InputBottom = this.InputBottom === 0 ? 300 : this.InputBottom;
|
||||
},
|
||||
sendMsg(type) {
|
||||
if (type === 'text' && this.inputContent != '') {
|
||||
this.showLoading = true;
|
||||
let content = this.inputContent;
|
||||
this.inputContent = '';
|
||||
// TODO：模拟调用后台服务发送消息
|
||||
setTimeout(() => {
|
||||
this.chatMsgList.push({
|
||||
sendUserId: this.curUserInfo.customerId,
|
||||
recvUserId: this.personToChat.customerId,
|
||||
msg: content,
|
||||
time: new Date()
|
||||
})
|
||||
this.showLoading = false;
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
padding-bottom: 100upx;
|
||||
}
|
||||
|
||||
.downPanel {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.load-info.loading::before {
|
||||
content: "\e67a";
|
||||
-webkit-animation: cuIcon-spin 2s infinite linear;
|
||||
animation: cuIcon-spin 2s infinite linear;
|
||||
animation-duration: 2s;
|
||||
animation-timing-function: linear;
|
||||
animation-delay: 0s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: normal;
|
||||
animation-fill-mode: none;
|
||||
animation-play-state: running;
|
||||
animation-name: cuIcon-spin;
|
||||
}
|
||||
|
||||
.load-info::before {
|
||||
font-family: "cuIcon";
|
||||
display: inline-block;
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<view class="margin-bottom-lg">
|
||||
<!-- 顶部操作条 -->
|
||||
<cu-custom :bgColor="'bg-main-color'">
|
||||
<block slot="content">消息大厅</block>
|
||||
</cu-custom>
|
||||
<!-- 消息分类 -->
|
||||
<view class="solid-bottom">
|
||||
<view class='bg-white grid grid-square col-4 padding-sm'>
|
||||
<view class="text-center shadow-warp" :class="curMsgType === 0 ? 'bg-main-color light' : 'bg-gray'"
|
||||
@click="changeCurMsgType(0)">
|
||||
<view class='cu-tag badge round bg-red' v-if="msgAmount.customerQuestion > 0">
|
||||
{{msgAmount.customerQuestion}}
|
||||
</view>
|
||||
<view class="text-sl center-icon"><text class='cuIcon-people'></text></view>
|
||||
<view>客户咨询</view>
|
||||
</view>
|
||||
<view class="text-center shadow-warp" :class="curMsgType === 1 ? 'bg-main-color light' : 'bg-gray'"
|
||||
@click="changeCurMsgType(1)">
|
||||
<view class='cu-tag badge round bg-red' v-if="msgAmount.statusChange > 0">{{msgAmount.statusChange}}
|
||||
</view>
|
||||
<view class="text-sl center-icon"><text class='cuIcon-emoji'></text></view>
|
||||
<view>状态变动</view>
|
||||
</view>
|
||||
<view class="text-center shadow-warp" :class="curMsgType === 2 ? 'bg-main-color light' : 'bg-gray'"
|
||||
@click="changeCurMsgType(2)">
|
||||
<view class='cu-tag badge round bg-red' v-if="msgAmount.hurryMsg > 0">{{msgAmount.hurryMsg}}</view>
|
||||
<view class="text-sl center-icon"><text class='cuIcon-mail'></text></view>
|
||||
<view>急报信息</view>
|
||||
</view>
|
||||
<view class="text-center shadow-warp" :class="curMsgType === 3 ? 'bg-main-color light' : 'bg-gray'"
|
||||
@click="changeCurMsgType(3)">
|
||||
<view class='cu-tag badge round bg-red' v-if="msgAmount.sysNotice > 0">{{msgAmount.sysNotice}}
|
||||
</view>
|
||||
<view class="text-sl center-icon"><text class='cuIcon-notice'></text></view>
|
||||
<view>系统通知</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 消息列表 -->
|
||||
<view class="cu-list menu-avatar">
|
||||
<view class="cu-item bottom-border" v-for="(item,index) in msgList" @click="showMsgDetail(item)">
|
||||
<view class="cu-avatar radius lg"
|
||||
style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Morgana.png);"></view>
|
||||
<view class="content">
|
||||
<view class="text-black">
|
||||
<view class="text-cut">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="text-gray text-sm flex">
|
||||
<view class="text-cut">{{item.lastMsg}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action padding-right-xs">
|
||||
<view class="text-grey text-sm">{{item.recvTime}}</view>
|
||||
<view class="cu-tag round bg-red sm">{{item.amount}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'msg-home',
|
||||
data() {
|
||||
return {
|
||||
curMsgType: 0,
|
||||
msgAmount: {
|
||||
customerQuestion: 10,
|
||||
statusChange: 2,
|
||||
hurryMsg: 4,
|
||||
sysNotice: 0
|
||||
},
|
||||
msgList: [{
|
||||
name: 'vvv',
|
||||
lastMsg: '消息内容xxxxxxx',
|
||||
recvTime: '2022-05-20',
|
||||
amount: 5
|
||||
}, {
|
||||
name: 'vvv',
|
||||
lastMsg: '消息内容xxxxxxx',
|
||||
recvTime: '2022-05-20',
|
||||
amount: 5
|
||||
}, {
|
||||
name: 'vvv',
|
||||
lastMsg: '消息内容xxxxxxx',
|
||||
recvTime: '2022-05-20',
|
||||
amount: 5
|
||||
}, {
|
||||
name: 'vvv',
|
||||
lastMsg: '消息内容xxxxxxx',
|
||||
recvTime: '2022-05-20',
|
||||
amount: 5
|
||||
}, {
|
||||
name: 'vvv',
|
||||
lastMsg: '消息内容xxxxxxx',
|
||||
recvTime: '2022-05-20',
|
||||
amount: 5
|
||||
}]
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
|
||||
},
|
||||
changeCurMsgType(type) {
|
||||
this.curMsgType = type
|
||||
},
|
||||
showMsgDetail(msgObj) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/msg-dialog'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.center-icon {
|
||||
padding-top: calc((100% - 108rpx)/3);
|
||||
}
|
||||
|
||||
.grid.grid-square .cu-tag.bg-red {
|
||||
background-color: #e54d42;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cu-list.menu-avatar>.cu-item .content {
|
||||
position: absolute;
|
||||
left: 146rpx;
|
||||
width: calc(100% - 96rpx - 60rpx - 120rpx - 20rpx - 50rpx);
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.cu-list.menu-avatar>.cu-item .action {
|
||||
width: 200rpx;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.grid.grid-square>view {
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.cu-list.menu-avatar>.cu-item:after,
|
||||
.cu-list.menu>.cu-item:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.cu-list>.cu-item:last-child:after,
|
||||
.cu-list.menu>.cu-item:last-child:after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.bottom-border {
|
||||
border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.bottom-border:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.text-sl {
|
||||
font-size: 60rpx;
|
||||
}
|
||||
|
||||
.grid.col-4.grid-square>view {
|
||||
padding-bottom: calc((100% - 60rpx)/4);
|
||||
height: 0;
|
||||
width: calc((100% - 60rpx)/4);
|
||||
border-radius: 50%;
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</view>
|
||||
<view class="text-xl margin-sm">{{curUserInfo.name}}</view>
|
||||
<view class="cu-list grid no-border col-2" style="background-color: inherit;">
|
||||
<view class="cu-item">
|
||||
<view class="cu-item" @click="clickMenuItem({pageUrl: '/pages/my/my-money-bag'})">
|
||||
<view class="margin-bottom-xs text-xxl">{{myInfo.balance}}</view>
|
||||
<view>我的钱包</view>
|
||||
</view>
|
||||
|
|
@ -69,7 +69,8 @@
|
|||
pageUrl: '/pages/my/withdraw'
|
||||
}, {
|
||||
name: '交易明细',
|
||||
icon: 'form'
|
||||
icon: 'form',
|
||||
pageUrl: '/pages/my/my-money-bag'
|
||||
}, {
|
||||
name: '服务明细',
|
||||
icon: 'calendar'
|
||||
|
|
@ -101,7 +102,8 @@
|
|||
icon: 'community'
|
||||
}, {
|
||||
name: '师傅缴费',
|
||||
icon: 'sponsor'
|
||||
icon: 'sponsor',
|
||||
pageUrl: '/pages/my/pay-deposit'
|
||||
}]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -48,8 +48,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="cu-bar tabbar border shop">
|
||||
<button class="bg-main-color long-btn margin-lr" @click="submit">提交</button>
|
||||
<view class="margin-lr">
|
||||
<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,76 @@
|
|||
<block slot="backText">返回</block>
|
||||
<block slot="content">我的钱包</block>
|
||||
</cu-custom>
|
||||
|
||||
<view class="margin-sm shadow-warp">
|
||||
<view class="padding-tb-lg padding-lr bg-gradual-color light">
|
||||
<view>账户余额（元）</view>
|
||||
<view class="flex justify-between margin-top-sm">
|
||||
<view class="text-xxl">{{myMoneyBag.balance}}</view>
|
||||
<view class="cu-btn bg-white radius">充值</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding bg-white flex justify-between">
|
||||
<view>可提现金额：<text class="text-price text-black">{{myMoneyBag.balanceToExtract}}</text></view>
|
||||
<view>
|
||||
<text>提现</text>
|
||||
<text class="cuIcon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="margin-bottom-lg">
|
||||
<view v-for="(billItem, index) in myMoneyBag.bill">
|
||||
<uni-collapse v-model="openStatusArr[index]">
|
||||
<uni-collapse-item>
|
||||
<template v-slot:title>
|
||||
<view class="padding bg-white">
|
||||
<view class="margin-bottom-xs">{{billItem.duration}}</view>
|
||||
<view>
|
||||
<text class="margin-right"><text>支出：</text><text class="text-price text-black">{{billItem.outgoings}}</text></text>
|
||||
<text><text>收入：</text><text class="text-price text-black">{{billItem.income}}</text></text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view>
|
||||
<view v-for="(item, index1) in billItem.statement" class="bg-white padding flex justify-between align-center" @click="showDetail">
|
||||
<view>
|
||||
<view class="margin-bottom-xs">{{item.name}}</view>
|
||||
<view>{{item.createTime}}</view>
|
||||
</view>
|
||||
<view class="text-price text-black">{{item.inOutMoney}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-collapse-item>
|
||||
</uni-collapse>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
openStatusArr: [['0']], //0打开，1收起
|
||||
myMoneyBag: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.myMoneyBag = await this.$api.data('myMoneyBag');
|
||||
for(let i = 0; i < this.myMoneyBag.bill.length - 1; i++) {
|
||||
this.openStatusArr.concat(['1']);
|
||||
}
|
||||
},
|
||||
showDetail() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/my/statement-desc'
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="bg-gradual-color">
|
||||
<!-- 顶部操作条 -->
|
||||
<cu-custom :bgColor="''" :isBack="true">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">保证金</block>
|
||||
</cu-custom>
|
||||
<view class="padding-sm">
|
||||
<view class="padding light">
|
||||
<view>已缴纳诚信保证金（元）</view>
|
||||
<view class="margin-top-sm">
|
||||
<view class="text-sl text-price text-bold">{{payDeposit.paidAmount}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<view class="margin-top-lg padding-lg">
|
||||
<view class="text-lg">优先派单 | 更多雇佣</view>
|
||||
<view>保障服务完成 | 保障服务质量 | 保障售后问题</view>
|
||||
</view>
|
||||
<view class="margin-top-lg padding-lg">
|
||||
<button class="cu-btn lg bg-main-color long-btn shadow-blur">缴纳保证金</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
payDeposit: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.payDeposit = await this.$api.data('payDeposit');
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 顶部操作条 -->
|
||||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">账单详情</block>
|
||||
</cu-custom>
|
||||
<view class="padding margin-top-sm bg-white">
|
||||
<view class="padding-tb-lg text-center solid-bottom">
|
||||
<view class="text-black text-sl">{{statementDesc.inOutMoney}}</view>
|
||||
<view class="text-gray">{{statementDesc.name}}</view>
|
||||
</view>
|
||||
<view class="padding-tb-lg">
|
||||
<view class="margin-bottom-sm">
|
||||
<text class="text-gray">当前状态：</text>
|
||||
<text>{{statementDesc.status === '0' ? '交易成功' : '交易失败'}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
<text class="text-gray">详情说明：</text>
|
||||
<text>{{statementDesc.desc}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
<text class="text-gray">到帐备注：</text>
|
||||
<text>{{statementDesc.payRemark}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
<text class="text-gray">提现单号：</text>
|
||||
<text>{{statementDesc.extractCode}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
<text class="text-gray">发起时间：</text>
|
||||
<text>{{statementDesc.createTime}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
<text class="text-gray">订单编号：</text>
|
||||
<text>{{statementDesc.orderCode}}</text>
|
||||
</view>
|
||||
<view class="margin-bottom-sm">
|
||||
<text class="text-gray">订单时间：</text>
|
||||
<text>{{statementDesc.orderCreateTime}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statementDesc: {}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.loadData();
|
||||
},
|
||||
methods: {
|
||||
async loadData() {
|
||||
this.statementDesc = await this.$api.data('statementDesc');
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -38,8 +38,8 @@
|
|||
</view>
|
||||
</view>
|
||||
<!-- 操作按钮 -->
|
||||
<view class="cu-bar tabbar border shop">
|
||||
<button class="bg-main-color long-btn margin-lr" @click="withdraw">提现</button>
|
||||
<view class="margin-lr">
|
||||
<button class="cu-btn lg bg-main-color long-btn shadow-blur" @click="withdraw">提现</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 顶部操作条 -->
|
||||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||||
<block slot="backText">返回</block>
|
||||
<block slot="content">申请退单</block>
|
||||
</cu-custom>
|
||||
<view class="padding flex justify-start margin-top-sm bg-white">
|
||||
<view class="cu-avatar xxl-view" :style="'background-image:url(' + good.picUrl + ');'"></view>
|
||||
<view class="flex flex-column-between margin-left-sm">
|
||||
<view class="text-black text-lg">{{good.servTitle}}</view>
|
||||
<view>
|
||||
<view v-for="(item, index) in good.orderTag" class='cu-tag radius margin-right-sm'>
|
||||
{{item}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="margin-top-sm padding flex justify-between bg-white">
|
||||
<view>申请原因</view>
|
||||
<picker @change="reasonChange" :range="cancelReasonList" :range-key="'reasonName'">
|
||||
<view class="picker">
|
||||
{{formData.reasonObj.reasonId ? formData.reasonObj.reasonName : '请选择' }}
|
||||
<text class="text-gray text-lg margin-left-xs"><text class="cuIcon-right"></text></text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="margin-top-sm padding bg-white">
|
||||
<view class="margin-bottom-sm">具体原因</view>
|
||||
<textarea style="width: 100%;" class="solid radius text-left padding-sm" v-model="formData.detailDesc" maxlength="-1"
|
||||
placeholder="接单半小时内退单你无责，无故退单、无理由退单引起客诉将由您承担责任；请如实填写退单原因！平台方将实时监管本次订单。"></textarea>
|
||||
</view>
|
||||
<view class="margin-top-sm padding bg-white">
|
||||
<view class="margin-bottom-sm">上传凭证（选填）</view>
|
||||
<view class="grid col-4 grid-square flex-sub">
|
||||
<view class="bg-img" v-for="(item,index) in formData.imgList" :key="index" @tap="viewImage($event, formData.imgList)"
|
||||
:data-url="item">
|
||||
<image :src="item" mode="aspectFill"></image>
|
||||
<view class="cu-tag bg-red" @tap.stop="delImg($event, formData.imgList)" :data-index="index">
|
||||
<text class='cuIcon-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="solids" @tap="chooseImgList" v-if="formData.imgList.length<9">
|
||||
<text class='cuIcon-cameraadd'></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar tabbar fixed-bottom-bar bg-back">
|
||||
<button class="bg-main-color cu-btn lg shadow-warp long-btn margin-lr" @click="nextStep">提交退单</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
good: {},
|
||||
formData: {
|
||||
imgList: [],
|
||||
reasonObj: {}
|
||||
},
|
||||
cancelReasonList: [{
|
||||
reasonId: 1,
|
||||
reasonName: '申请退单原因分类1'
|
||||
}, {
|
||||
reasonId: 2,
|
||||
reasonName: '申请退单原因分类2'
|
||||
}]
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
if (options && options.params) {
|
||||
this.good = JSON.parse(decodeURIComponent(options.params)).orderInfo;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
chooseImgList(e) {
|
||||
uni.chooseImage({
|
||||
count: 9, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: (res) => {
|
||||
if (this.formData.imgList.length != 0) {
|
||||
this.formData.imgList = this.formData.imgList.concat(res.tempFilePaths)
|
||||
} else {
|
||||
this.formData.imgList = res.tempFilePaths
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
viewImage(e, imgList) {
|
||||
uni.previewImage({
|
||||
urls: imgList,
|
||||
current: e.currentTarget.dataset.url
|
||||
});
|
||||
},
|
||||
delImg(e, imgList) {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '确定要删除这张图片吗？',
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
imgList.splice(e.currentTarget.dataset.index, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
reasonChange(e) {
|
||||
this.formData.reasonObj = this.cancelReasonList[e.detail.value]
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.xxl-view {
|
||||
min-width: 100rpx;
|
||||
min-height: 100rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<template>
|
||||
<!-- 报价/客户支付模态框 -->
|
||||
<view class="cu-modal" :class="show?'show':''">
|
||||
<view class="cu-dialog">
|
||||
<view class="cu-bar bg-white justify-end solid-bottom">
|
||||
<view class="content">发送急报</view>
|
||||
<view class="action" data-modal="sendUrgentMsgModal" @click="hideModal">
|
||||
<text class="cuIcon-close text-red"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="padding padding-lr-xl bg-white text-left">
|
||||
<view>
|
||||
<text>TO：</text>
|
||||
<button class="cu-btn" :class="toWho === 0 ? 'bg-main-color' : ''" @click="changeToWho(0)">商家</button>
|
||||
<button class="cu-btn margin-left-sm" :class="toWho === 1 ? 'bg-main-color' : ''" @click="changeToWho(1)">平台</button>
|
||||
</view>
|
||||
<view class="margin-top-sm">
|
||||
<textarea style="width: 100%;" class="solid radius text-left padding-sm" v-model="detailDesc" maxlength="-1"
|
||||
placeholder="请输入需报商家或平台的情况，申请厂家配件请以“申请配件”开头"></textarea>
|
||||
</view>
|
||||
<view class="margin-top-sm">
|
||||
<view class="margin-bottom-sm">上传照片</view>
|
||||
<view class="grid col-4 grid-square flex-sub">
|
||||
<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="viewImage($event, imgList)"
|
||||
:data-url="item">
|
||||
<image :src="item" mode="aspectFill"></image>
|
||||
<view class="cu-tag bg-red" @tap.stop="delImg($event, imgList)" :data-index="index">
|
||||
<text class='cuIcon-close'></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="solids" @tap="chooseImgList" v-if="imgList.length<9">
|
||||
<text class='cuIcon-cameraadd'></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar bg-white solid-top">
|
||||
<view class="action margin-0 flex-sub text-main-color solid-left" data-modal="sendUrgentMsgModal"
|
||||
@tap="hideModal" @click="sendUrgentMsg">发送急报</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
nama: 'new-serv-price',
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toWho: 0,
|
||||
detailDesc: '',
|
||||
imgList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideModal(e) {
|
||||
this.$emit(this.$globalFun.HIDE_MODAL, e);
|
||||
},
|
||||
sendUrgentMsg(e) {
|
||||
|
||||
},
|
||||
changeToWho(toWho) {
|
||||
this.toWho = toWho;
|
||||
},
|
||||
chooseImgList(e) {
|
||||
uni.chooseImage({
|
||||
count: 9, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: (res) => {
|
||||
if (this.imgList.length != 0) {
|
||||
this.imgList = this.imgList.concat(res.tempFilePaths)
|
||||
} else {
|
||||
this.imgList = res.tempFilePaths
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
viewImage(e, imgList) {
|
||||
uni.previewImage({
|
||||
urls: imgList,
|
||||
current: e.currentTarget.dataset.url
|
||||
});
|
||||
},
|
||||
delImg(e, imgList) {
|
||||
uni.showModal({
|
||||
title: '',
|
||||
content: '确定要删除这张图片吗？',
|
||||
cancelText: '取消',
|
||||
confirmText: '确定',
|
||||
success: res => {
|
||||
if (res.confirm) {
|
||||
imgList.splice(e.currentTarget.dataset.index, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<template>
|
||||
<page-meta :page-style="'overflow:'+(ifShowPageMeta?'hidden':'visible')"></page-meta>
|
||||
<view>
|
||||
<!-- 顶部操作条 -->
|
||||
<cu-custom :bgColor="'bg-main-color'" :isBack="true">
|
||||
|
|
@ -97,27 +98,40 @@
|
|||
<view class="margin-top-xs">订单时间：{{servDetail.createTime}}</view>
|
||||
</view>
|
||||
<!-- 底部操作栏 -->
|
||||
<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
|
||||
<view class="action">
|
||||
<view class="cu-bar bg-white tabbar border fixed-bottom-bar">
|
||||
<view class="action" data-popup="orderManage" @click="togglePopup">
|
||||
<view class="cuIcon-list"></view> 订单管理
|
||||
</view>
|
||||
<view class="action">
|
||||
<view class="action" data-modal="sendUrgentMsgModal" @click="showModal">
|
||||
<view class="cuIcon-mail">
|
||||
<view class="cu-tag badge" v-if="servDetail.talkMsgNum > 0">{{servDetail.talkMsgNum}}</view>
|
||||
</view>
|
||||
发送急报
|
||||
</view>
|
||||
<view v-if="process === 'waitToServ'" class="bg-main-color submit">立即上门</view>
|
||||
</view>
|
||||
</view>
|
||||
<uni-popup ref="orderManage" type="bottom" @change="changePopupState">
|
||||
<view class="bg-white text-center">
|
||||
<view v-for="(menu,index) in orderManageMenu" class="padding solid-bottom" :data-action="menu.action" @click="clickOrderManageMenu">
|
||||
{{menu.name}}
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部占位 -->
|
||||
<view class="cu-bar bg-white fixed-bottom-bar"></view>
|
||||
</uni-popup>
|
||||
<!-- 模态框 -->
|
||||
<urgent-msg :show="sendUrgentMsgModal" @hideModal="hideModal"></urgent-msg>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import productPicked from '@/components/goods-card/product-picked.vue';
|
||||
import urgentMsg from '@/pages/order-manage/modal/urgent-msg.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
productPicked
|
||||
productPicked,
|
||||
urgentMsg
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -126,7 +140,25 @@
|
|||
finishRecord4Show: [],
|
||||
servingColumnHeaders: ['购买型号', '购买量', '待服务'],
|
||||
servedColumnHeaders: ['购买型号', '购买量', '已服务'],
|
||||
process: ''
|
||||
process: '',
|
||||
ifShowPageMeta: false,
|
||||
orderManageMenu: [{
|
||||
name: '申请配件',
|
||||
action: 'applyFittings'
|
||||
}, {
|
||||
name: '申请附加费',
|
||||
action: ''
|
||||
}, {
|
||||
name: '拍照回单',
|
||||
action: ''
|
||||
}, {
|
||||
name: '指派/撤回订单',
|
||||
action: ''
|
||||
}, {
|
||||
name: '申请退单',
|
||||
action: 'applyCancelOrder'
|
||||
}],
|
||||
sendUrgentMsgModal: false
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
|
|
@ -147,6 +179,37 @@
|
|||
}
|
||||
this.finishList4Show[i].finishList = finishList;
|
||||
}
|
||||
},
|
||||
changePopupState(e) {
|
||||
this.ifShowPageMeta = e.show;
|
||||
},
|
||||
togglePopup(e) {
|
||||
if (this.ifShowPageMeta) {
|
||||
this.$refs[e.currentTarget.dataset.popup].close();
|
||||
} else {
|
||||
this.$refs[e.currentTarget.dataset.popup].open();
|
||||
}
|
||||
},
|
||||
clickOrderManageMenu(e) {
|
||||
this[e.currentTarget.dataset.action]();
|
||||
},
|
||||
applyFittings() {
|
||||
console.log("申请配件")
|
||||
},
|
||||
applyCancelOrder() {
|
||||
let params = {
|
||||
orderInfo: this.servDetail.mainServOrder
|
||||
}
|
||||
console.log(params)
|
||||
uni.navigateTo({
|
||||
url: '/pages/order-manage/cancel-order?params=' + encodeURIComponent(JSON.stringify(params))
|
||||
})
|
||||
},
|
||||
showModal(e) {
|
||||
this[e.currentTarget.dataset.modal] = true;
|
||||
},
|
||||
hideModal(e) {
|
||||
this[e.currentTarget.dataset.modal] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue