订单,提现功能调整

This commit is contained in:
唐明明
2023-01-12 16:15:29 +08:00
parent 9fbfcf3273
commit da7b903547
21 changed files with 624 additions and 61 deletions

View File

@@ -40,10 +40,37 @@ const balance = data => {
})
}
// 奖金提现前置
const withdrawsCreate = () => {
return request({
url: 'withdraws/index/create'
})
}
// 奖金提现申请
const withdraws = data => {
return request({
url: 'withdraws/index',
method: 'POST',
data
})
}
// 提现记录
const withdrawsLog = data => {
return request({
url: 'withdraws/index',
data
})
}
export {
score,
log,
cash,
balance
balance,
withdrawsCreate,
withdraws,
withdrawsLog
}

View File

@@ -182,6 +182,14 @@ const sbuConfirmScheme = (type, business_order_close_scheme_id, data) => {
})
}
// 取消订单
const orderCancel = id => {
return request({
url: 'business/' + id + '/cancel',
method: 'POST'
})
}
// 支付订单
export {
lists,
@@ -205,5 +213,6 @@ export {
historyBank,
getConfirmScheme,
getConfirmSchemeInfo,
sbuConfirmScheme
sbuConfirmScheme,
orderCancel
}

View File

@@ -15,6 +15,14 @@ const cms = id => {
})
}
// 关注公众号
const scan = id => {
return request({
url : 'app/scan/code',
})
}
export {
cms
cms,
scan
}

View File

@@ -1,9 +1,9 @@
{
"name" : "抖火",
"appid" : "__UNI__C305C03",
"description" : "",
"versionName" : "1.1.5",
"versionCode" : "100",
"description" : "纵有疾风起,人生不言弃",
"versionName" : "1.1.9",
"versionCode" : 101,
"transformPx" : false,
/* 5+App */
"app-plus" : {
@@ -32,8 +32,6 @@
/* android */
"android" : {
"permissions" : [
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
@@ -41,13 +39,8 @@
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>"
],
"schemes" : "doufire"
},

View File

@@ -303,18 +303,16 @@
"style": {
"navigationBarTitleText": "人脸认证",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#FFFFFF",
"app-plus": {
"titleNView": {
"buttons": [
{
"text": "\ue66c",
"float": "left",
"fontSrc": "/static/uniicons.ttf",
"fontSize": "20px"
}
]
}
"navigationBarBackgroundColor": "#FFFFFF",
"app-plus": {
"titleNView": {
"buttons": [{
"text": "\ue66c",
"float": "left",
"fontSrc": "/static/uniicons.ttf",
"fontSize": "20px"
}]
}
}
}
}, {
@@ -510,16 +508,33 @@
"navigationBarBackgroundColor": "#446EFE"
}
}, {
"path": "pages/user/salesmanCode",
"auth": true,
"path": "pages/user/salesmanCode",
"auth": true,
"name": "SalesmanCode",
"style": {
"navigationBarTitleText": "业务员邀请码",
"enablePullDownRefresh": false,
"navigationBarTextStyle": "white",
"enablePullDownRefresh": false,
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#446EFE"
}
}, {
"path": "pages/user/weChat",
"auth": true,
"name": "WeChat",
"style": {
"navigationBarTitleText": "关注公众号",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#f8f8f8"
}
}, {
"path": "pages/account/withdraws",
"auth": true,
"name": "Withdraws",
"style": {
"navigationBarTitleText": "申请提现",
"enablePullDownRefresh": false,
"navigationBarBackgroundColor": "#FFFFFF"
}
}],
"globalStyle": {
"navigationBarTextStyle": "black",

View File

@@ -4,9 +4,9 @@
<view class="total" :style="'background-image: url(' + require('@/static/imgs/bonus_back.png') + ');'">
<view class="total-left">
<view class="total-value nowrap">{{total}}</view>
<view class="total-text nowrap">账户余额</view>
<view class="total-text nowrap">{{ type === 'balance' ? '账户余额': '已提现总金额'}}</view>
</view>
<view class="total-btn">提现</view>
<view class="total-btn" @click="$Router.push({name: 'Withdraws'})">提现</view>
</view>
<!-- 账户记录 -->
<view class="tabs">
@@ -21,11 +21,21 @@
<view class="logs">
<block v-if="list.length > 0">
<view class="log-flex" v-for="(item, index) in list" :key="index">
<view class="text">
<view class="type nowrap">{{item.remark || '-'}}</view>
<view class="time nowrap">{{item.created_at}}</view>
</view>
<view class="price nowrap">{{item.amount}}</view>
<block v-if="type === 'balance'">
<view class="text">
<view class="type nowrap">{{item.remark || '-'}}</view>
<view class="time nowrap">{{item.created_at}}</view>
</view>
<view class="price nowrap">{{item.amount}}</view>
</block>
<block v-if="type === 'withdraws'">
<view class="text">
<view class="type nowrap"><text>[{{item.status.status_text}}]</text>{{item.title || '-'}}</view>
<view class="remark nowrap" v-if="item.remark != null">{{item.remark || '-'}}</view>
<view class="time nowrap">{{item.created_at}}</view>
</view>
<view class="price nowrap">{{item.amount}}</view>
</block>
</view>
</block>
<block v-else>
@@ -44,13 +54,14 @@
</template>
<script>
import { balance } from '@/apis/interfaces/account.js'
import { balance, withdrawsLog } from '@/apis/interfaces/account.js'
export default {
data() {
return {
type: 'balance',
tabs: [
{ name: '奖金收益明细', value: '' },
{ name: '提现记录', value: '' },
{ name: '奖金收益明细', value: 'balance' },
{ name: '提现记录', value: 'withdraws' },
],
total : '0.00',
list : [],
@@ -62,24 +73,71 @@
status : ''
};
},
created() {
onShow() {
this.page = {
current : 1,
has_more: false,
}
this.getList()
},
methods: {
onTabs(e){
console.log(e)
console.log('这里需要之后处理提现记录')
if(e.value === this.type) return
this.type = e.value
this.page = {
current : 1,
has_more: false,
}
this.list = []
this.total = '0.00'
this.getList()
},
// 获取账户余额
getList(){
uni.showLoading({
title:'加载中...',
mask : true
})
if(this.type === 'balance') this.getBalance()
if(this.type === 'withdraws')this.getWithdraws()
},
// 获取账户余额
getBalance(){
balance({
page: this.page.current
}).then(res => {
let { balance, logs } = res;
let atList = logs.page.current == 1 ? [] : this.list
let atList = logs.page.current == 1 ? [] : this.list
this.total = balance
this.list = atList.concat(logs.data)
this.page = logs.page
this.pagesShow = false
uni.hideLoading()
}).catch(err => {
this.errMsg(err)
})
},
// 获取提现记录
getWithdraws(){
withdrawsLog({
page: this.page.current
}).then(res => {
let { all, lists } = res;
let atList = lists.page.current == 1 ? [] : this.list
this.total = all;
this.list = atList.concat(lists.data)
this.page = lists.page
this.pagesShow = false
uni.hideLoading()
}).catch(err => {
this.errMsg(err)
})
},
// 错误提示
errMsg(err){
uni.showToast({
title: err.message,
icon : 'none'
})
}
},
@@ -178,6 +236,14 @@
font-weight: bold;
font-size: 30rpx;
color: #666666;
text{
font-weight: normal;
padding-right: 10rpx;
color: $main-color;
}
}
.remark{
font-size: 28rpx;
}
.time{
font-size: 28rpx;

244
pages/account/withdraws.vue Normal file
View File

@@ -0,0 +1,244 @@
<template>
<view class="content">
<view class="block" v-if="banks.length > 0">
<view class="bank">
<view class="block-title">到账银行卡</view>
<view class="bank-input">
<label>开户银行</label>
<picker class="banks-picker" :range="banks" range-key="name" :value="bankVal" @change="bankVal = $event.detail.value">
<view class="banks-text" :class="{'gray': bankVal === 0}">{{banks[bankVal].name}}<uni-icons class="banks-icon" type="bottom" size="18" color="gray"></uni-icons></view>
</picker>
</view>
<view class="bank-input">
<label>银行卡号</label>
<input type="number" placeholder="输入银行卡号" maxlength="20" v-model="bankNo">
</view>
<view class="bank-input">
<label>预留手机号</label>
<input type="number" placeholder="输入银行开户预留手机号" maxlength="11" v-model="mobile">
</view>
<view class="bank-input">
<label>持卡人姓名</label>
<input type="text" placeholder="输入开户人真实姓名" maxlength="15" v-model="name">
</view>
</view>
<view class="cny">
<view class="bank-from">
<view class="block-title">提现金额</view>
<view class="title"><text v-if="min >= 1">最小提现金额{{min}}</text><text>提现手续费{{rate}}%</text></view>
<view class="input">
<label></label>
<input placeholder="0.00" type="number" v-model="amount" />
</view>
<view class="balance" v-if="!greater">当前账户余额{{balance}}<text @click="amount = balance">全部提现</text></view>
<view class="balance red" v-else>输入金额超过账户余额</view>
</view>
<button class="cny-btn" :disabled="greater" @click="onSubmit">申请提现</button>
</view>
</view>
</view>
</template>
<script>
import { withdrawsCreate, withdraws } from '@/apis/interfaces/account.js'
export default {
data() {
return {
banks : [],
bankVal : 0,
bankNo : '',
mobile : '',
name : '',
amount : '',
min : 0,
rate : 0,
balance : '0.00'
};
},
computed: {
greater(){
return parseFloat(this.amount) > parseFloat(this.balance)
}
},
created() {
uni.showLoading({
title: '加载中...',
mask : true
})
withdrawsCreate().then(res => {
let { bank, tax, min, balance, banks} = res;
let bankIndex
this.rate = tax
this.min = min
this.balance = balance
this.banks = [ { id: '', name: '请选择开户银行'}, ...banks ]
if(bank.bank_no){
bankIndex = this.banks.findIndex(val => val.name === bank.bank_name)
this.bankNo = bank.bank_no
this.mobile = bank.mobile
this.name = bank.name
this.bankVal = bankIndex >= 0 ? bankIndex : 0
}
uni.hideLoading()
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
},
methods: {
onSubmit(){
if(this.bankVal === 0){
uni.showToast({
title: '请选择开户银行',
icon : 'none'
})
return
}
uni.showLoading({
title: '提交中...',
mask : true
})
withdraws({
bank_name : this.banks[this.bankVal].name,
amount : this.amount,
name : this.name,
mobileNo : this.mobile,
bank_no : this.bankNo,
}).then(res => {
uni.showModal({
title : '提示',
content : res,
showCancel : false,
success : ModalRes => {
if(ModalRes.confirm){
this.$Router.back()
}
}
})
uni.hideLoading()
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
}
</script>
<style lang="scss">
.content{
padding: 30rpx;
}
.block{
background: white;
.block-title{
font-size: 30rpx;
color: gray;
line-height: 50rpx;
}
.bank{
background: #fdfdfd;
padding: 50rpx;
.bank-input{
display: flex;
justify-content: space-between;
height: 100rpx;
line-height: 100rpx;
font-size: 30rpx;
@extend .border-solid;
label{
width: 200rpx;
color: #333;
}
input{
font-size: 30rpx;
width: calc(100% - 200rpx);
height: 100rpx;
vertical-align: top;
text-align: right;
}
.banks-picker{
font-size: 30rpx;
width: calc(100% - 200rpx);
text-align: right;
.banks-text{
&.gray{
color: gray;
}
.banks-icon{
vertical-align: middle;
margin-left: 10rpx;
}
}
}
}
}
.cny{
padding: 50rpx;
.cny-btn{
width: 100%;
height: 100rpx;
line-height: 100rpx;
border-radius: 10rpx;
background: $main-color;
color: white;
font-size: 34rpx;
margin-top: 50rpx;
&::after{
display: none;
}
&[disabled]{
opacity: .7;
}
}
// 提现
.bank-from{
background: white;
border-radius: 10rpx;
.title{
padding-bottom: 20rpx;
line-height: 40rpx;
font-size: 30rpx;
color: #333;
text{
font-size: 90%;
color: gray;
}
}
.input{
display: flex;
@extend .border-solid;
font-size: 60rpx;
height: 120rpx;
line-height: 120rpx;
font-weight: 500;
font-family: Arial, Helvetica, sans-serif;
input{
flex: 1;
height: 120rpx;
padding: 0;
margin: 0;
font-size: 70rpx;
}
}
.balance{
font-size: 28rpx;
line-height: 60rpx;
padding-top: 20rpx;
text{
color: $main-color;
margin-left: 10rpx;
}
&.red{
color: $text-price;
}
}
}
}
}
</style>

View File

@@ -7,13 +7,15 @@
<label>+86</label>
<input type="number" v-model="username" maxlength="11" placeholder="输入手机号码">
</view>
<view class="from-inpus">
<view class="from-inpus from-password">
<label>登录密码</label>
<input type="safe-password" password v-model="password" placeholder="设置登录密码">
<input type="safe-password" :password="eyesShow[0]" v-model="password" placeholder="须包含大小写最少8位">
<image class="from-password-eyes" mode="widthFix" :src="require(eyesShow[0] ? '@/static/icons/eyes_hide.png': '@/static/icons/eyes_open.png')" @click="onEyes(0)"></image>
</view>
<view class="from-inpus">
<view class="from-inpus from-password">
<label>确认密码</label>
<input type="safe-password" password v-model="confirmation" placeholder="请确认登录密码">
<input type="safe-password" :password="eyesShow[1]" v-model="confirmation" placeholder="须包含大小写最少8位">
<image class="from-password-eyes" mode="widthFix" :src="require(eyesShow[1] ? '@/static/icons/eyes_hide.png': '@/static/icons/eyes_open.png')" @click="onEyes(1)"></image>
</view>
<view class="from-inpus">
<label>邀请码</label>
@@ -62,6 +64,7 @@
captchaShow : false,
parentId : '',
isDisabled : false,
eyesShow : [ true, true ]
};
},
created() {
@@ -76,6 +79,10 @@
})
},
methods: {
// 密码显示隐藏
onEyes(index){
this.$set(this.eyesShow, index, !this.eyesShow[index])
},
// 提交注册信息
onRegistered(){
uni.showLoading({
@@ -249,6 +256,18 @@
font-size: 32rpx;
}
}
.from-password{
.from-password-eyes{
width: 38rpx;
height: 38rpx;
}
input{
width: calc(100% - 260rpx);
height: 100rpx;
line-height: 100rpx;
font-size: 32rpx;
}
}
.from-input-phoen{
label{
line-height: 60rpx;

View File

@@ -7,13 +7,15 @@
<label>+86</label>
<input type="number" v-model="username" maxlength="11" placeholder="输入手机号码">
</view>
<view class="from-inpus">
<view class="from-inpus from-password">
<label>新密码</label>
<input type="safe-password" password v-model="password" placeholder="设置新的登录密码">
<input type="safe-password" :password="eyesShow[0]" v-model="password" placeholder="须包含大小写最少8位">
<image class="from-password-eyes" mode="widthFix" :src="require(eyesShow[0] ? '@/static/icons/eyes_hide.png': '@/static/icons/eyes_open.png')" @click="onEyes(0)"></image>
</view>
<view class="from-inpus">
<view class="from-inpus from-password">
<label>确认密码</label>
<input type="safe-password" password v-model="confirmation" placeholder="请确认登录密码">
<input type="safe-password" :password="eyesShow[1]" v-model="confirmation" placeholder="须包含大小写最少8位">
<image class="from-password-eyes" mode="widthFix" :src="require(eyesShow[1] ? '@/static/icons/eyes_hide.png': '@/static/icons/eyes_open.png')" @click="onEyes(1)"></image>
</view>
<view class="from-inpus from-input-code">
<label>验证码</label>
@@ -56,7 +58,8 @@
captcha : '',
captchaImg : '',
captchaKey : '',
captchaShow : false
captchaShow : false,
eyesShow : [ true, true ]
};
},
created() {
@@ -68,6 +71,10 @@
}
},
methods: {
// 密码显示隐藏
onEyes(index){
this.$set(this.eyesShow, index, !this.eyesShow[index])
},
// 提交修改信息
onRegistered(){
uni.showLoading({
@@ -241,6 +248,18 @@
font-size: 32rpx;
}
}
.from-password{
.from-password-eyes{
width: 38rpx;
height: 38rpx;
}
input{
width: calc(100% - 260rpx);
height: 100rpx;
line-height: 100rpx;
font-size: 32rpx;
}
}
.from-input-phoen{
label{
line-height: 60rpx;

View File

@@ -65,6 +65,10 @@
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_03.png"></image>实名认证</view>
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
</view>
<view class="nav-flex" @click="onNav('WeChat')">
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_06.png"></image>关注公众号</view>
<u-icon name="arrow-right" color="#cacaca" size="34rpx" bold></u-icon>
</view>
<view class="border-solid-empty"></view>
<view class="nav-flex" @click="onNav('UserSet')">
<view class="nav-icon"><image class="nav-icon-src" src="@/static/icons/user_nav_05.png"></image>设置</view>

95
pages/user/weChat.vue Normal file
View File

@@ -0,0 +1,95 @@
<template>
<view class="content">
<view class="wechat-block">
<view class="info">
<image class="info-logo" src="@/static/logo.png"></image>
<view class="info-text">
<view class="title">抖火法律</view>
<view class="subtitle">关注公众号抖火综法</view>
</view>
</view>
<image class="code" :src="code" mode="widthFix"></image>
<view class="text">使用微信扫码关注获取最新订单动态</view>
</view>
</view>
</template>
<script>
import { scan } from '@/apis/interfaces/public.js'
export default {
data() {
return {
code: ''
}
},
created() {
uni.showLoading({
title: '获取二维码...',
mask : true
})
scan().then(res => {
let { code } = res;
this.code = res.code;
uni.hideLoading()
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
</script>
<style lang="scss" scoped>
.content{
padding-bottom: 10vh;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.wechat-block{
background: white;
width: 80%;
padding: 50rpx;
box-sizing: border-box;
border-radius: 20rpx;
box-shadow: 0 0 5rpx 5rpx rgba(0, 0, 0, .02);
text-align: center;
.info{
display: flex;
align-items: center;
margin-bottom: 50rpx;
.info-logo{
width: 88rpx;
height: 88rpx;
border-radius: 10rpx;
}
.info-text{
width: calc(100% - 88rpx);
text-align: left;
padding-left: 30rpx;
box-sizing: border-box;
.title{
font-weight: bold;
font-size: 32rpx;
}
.subtitle{
font-size: 28rpx;
color: gray;
}
}
}
.code{
width: 100%;
vertical-align: top;
}
.text{
text-align: center;
font-size: 30rpx;
color: gray;
line-height: 90rpx;
}
}
</style>

View File

@@ -94,7 +94,13 @@
// 拨打电话
makePhone(phone){
uni.makePhoneCall({
phoneNumber: phone
phoneNumber: phone,
fail: err => {
uni.showToast({
title: '拨打电话失败,请检查您的应用权限[电话]保持允许状态',
icon : 'none'
})
}
})
}
},

View File

@@ -74,7 +74,13 @@
// 联系客户
onCallPhone(phone){
uni.makePhoneCall({
phoneNumber: phone
phoneNumber: phone,
fail: err => {
uni.showToast({
title: '拨打电话失败,请检查您的应用权限[电话]保持允许状态',
icon : 'none'
})
}
})
},
// 获取订单列表

View File

@@ -148,6 +148,12 @@
onCallPhone(phone){
uni.makePhoneCall({
phoneNumber: phone,
fail: err => {
uni.showToast({
title: '拨打电话失败,请检查您的应用权限[电话]保持允许状态',
icon : 'none'
})
}
})
},
// 复制订单号码

View File

@@ -70,6 +70,7 @@
<view class="user-name">{{item.user.nickname}}</view>
</view>
<view class="btns">
<view class="btns-item btns-border" v-if="item.status.value == 0 || item.status.value == 2 || item.status.value == 3" @click="onCancel(item.business_order_id)">取消</view>
<view class="btns-item btns-border" v-if="item.can.transfer" @click="onTransfers(index, item)">转让</view>
<view class="btns-item btns-border" v-if="item.status.value == 2" @click="onOrdersService(item.business_order_id)">匹配</view>
<view class="btns-item btns-border" v-if="item.status.value == 4 && item.is_my" @click="onSign(item.business_order_id)">签约</view>
@@ -108,8 +109,9 @@
</template>
<script>
import { lists, orderSign, getOrderSignStatus } from '@/apis/interfaces/order.js'
import { lists, orderSign, getOrderSignStatus, orderCancel } from '@/apis/interfaces/order.js'
import { levels, transfer } from '@/apis/interfaces/transfers.js'
import modal from 'uview-ui/libs/config/props/modal';
export default {
data() {
return {
@@ -332,7 +334,40 @@
// 拨打电话
makePhone(phone){
uni.makePhoneCall({
phoneNumber: phone
phoneNumber: phone,
fail: err => {
uni.showToast({
title: '拨打电话失败,请检查您的应用权限[电话]保持允许状态',
icon : 'none'
})
}
})
},
// 取消订单
onCancel(id){
uni.showModal({
title : '提示',
content : '取消订单后无法找回,确认取消吗?',
success : modalRes => {
if(modalRes.confirm){
uni.showLoading({
title: '加载中...',
mask : true
})
orderCancel(id).then(res => {
uni.showToast({
title: '订单已取消',
icon : 'none'
})
this.removeListVal(id)
}).catch(err => {
uni.showToast({
title: err.message,
icon : 'none'
})
})
}
}
})
}
},

View File

@@ -211,7 +211,7 @@
data : subData,
success : res => {
uni.showToast({
title: '表单信息已存',
title: '机构信息已存',
icon : 'none'
})
}
@@ -270,8 +270,10 @@
})
}
},
onBackPress() {
this.onSubmit('local')
},
onNavigationBarButtonTap() {
console.log(this.$Route.query)
let { userBankId, isMy} = this.$Route.query
if(!isMy) {
uni.showToast({

View File

@@ -22,6 +22,9 @@
})
baseBase(this.$Route.query.itemId).then(res => {
let { params } = res;
console.log(params)
this.params = params
uni.hideLoading()
}).catch(err => {

View File

@@ -76,7 +76,13 @@
// 联系客户
onCallPhone(phone){
uni.makePhoneCall({
phoneNumber: phone
phoneNumber: phone,
fail: err => {
uni.showToast({
title: '拨打电话失败,请检查您的应用权限[电话]保持允许状态',
icon : 'none'
})
}
})
},
// 获取订单列表

BIN
static/icons/eyes_hide.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 965 B

BIN
static/icons/eyes_open.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.5 KiB