commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加音乐,摇一摇,服务等页面

Browse Source
This commit is contained in:
cansnow
2026-02-15 19:41:13 +08:00
parent abd279e7a7
commit 271ec4b9c2
74 changed files with 14021 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/user/service/bill/components/imgs/code-40.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

pages/user/service/bill/components/imgs/gaosu.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

pages/user/service/bill/components/imgs/meituan.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

pages/user/service/bill/components/imgs/qinlingrenjia.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

pages/user/service/bill/components/imgs/shihua.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

pages/user/service/bill/components/imgs/tiao-code.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

pages/user/service/bill/components/imgs/xinrun.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

pages/user/service/bill/components/liaoning-gaosu.vue
+186
View File
@@ -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>
pages/user/service/bill/components/sangumaocai.vue
+148
View File
@@ -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>
pages/user/service/bill/components/saoma.vue
+152
View File
@@ -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>
pages/user/service/bill/components/shihua.vue
+125
View File
@@ -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>
pages/user/service/bill/components/xinrunshangye.vue
+127
View File
@@ -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>
pages/user/service/bill/components/zhuanzhang.vue
+110
View File
@@ -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>