zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

im金额格式化

master
程 2023-02-13 09:24:30 +08:00
parent 42a24d854b
commit 9375ba9e31
6 changed files with 283 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
im/src/components/chat/panel/TalkPanel.vue
View File

@ -84,7 +84,7 @@
</el-tooltip>
</div>
<div class="price">
<span>￥{{ item.text.price }}</span>
<span>{{ item.text.price | unitPrice('￥') }}</span>
</div>
</div>
</div>
@ -103,7 +103,7 @@
<span class="orderGoodsName" @click="linkToOrders(item.text.sn)">{{ item.text.groupName }}</span>
<span class="orderGoodsTime">{{ item.text.paymentTime }}</span>
<span class="orderFlowPrice">
订单金额：￥{{ item.text.flowPrice }}
订单金额：{{ item.text.flowPrice | unitPrice('￥') }}
</span>
<span class="order_status"
:style="{ 'color': item.text.orderStatus == 'CANCELLED' || item.text.orderStatus == 'UNPAID' || item.text.orderStatus == ' TAKE' ? '#5a606b' : '#f23030' }">{{
@ -171,7 +171,7 @@
</transition>
<!-- 链接信息 -->
<OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" />
<OtherLink :toUser="toUser" :id="id" :goodsParams="goodsParams" class="flex-4" />
</div>
</template>
<script>
@ -186,6 +186,7 @@ import PanelToolbar from "./PanelToolbar";
import SocketInstance from "@/im-server/socket-instance";
import { SvgMentionDown } from "@/core/icons";
import { formatTime, parseTime, copyTextToClipboard } from "@/utils/functions";
import { unitPrice } from '@/plugins/filters';
import {
ServeTalkRecords,
@ -293,7 +294,7 @@ export default {
mode: 0,
};
this.loadChatRecords();
},
},
mounted () {

87
im/src/components/chat/panel/template/footPrint.vue
View File

@ -17,7 +17,7 @@
<div style="display: flex;">
<div style="margin-top: 20px;">
<span style="color: red;">￥{{ item.price }}</span>
<span style="color: red;">{{ item.price | unitPrice("￥") }}</span>
<div class="goods_store_button">
<el-button type="danger" v-if="item.btnHide == 1 && toUser.storeFlag" size="mini"
@click="submitSendGoodsMessage(item)" plain>发送</el-button>
@ -35,7 +35,7 @@
<el-tab-pane label="订单列表" name="orders">
<dl>
<dd v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
<div class="orderlist" >
<div class="orderlist">
<div class="order_top order_padding">
<span class="order_sn">订单号:{{ item.sn }}</span>
</div>
@ -49,17 +49,24 @@
size="mini" @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
</div>
</div>
<div class="order_footer order_padding" >
<span> 订单金额： <span style="color: red;">￥{{ item.orderItems[0].goodsPrice }}</span></span>
<div class="order_footer order_padding">
<span> 订单金额： <span style="color: red;">{{
item.orderItems[0].goodsPrice | unitPrice("￥")
}}</span></span>
<!-- <span class="order_status" v-if="item.orderStatus"
:style="{ 'color': item.orderStatus == 'CANCELLED' || item.orderStatus == 'UNPAID' || item.orderStatus == 'TAKE' ? '#5a606b' : '#f23030' }">{{
item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus ==
'PAID' ? '已付款' : item.orderStatus == 'UNDELIVERED' ? '待发货' : item.orderStatus == 'DELIVERED'
? '已发货' : item.orderStatus == 'COMPLETED' ? '已完成' : item.orderStatus == 'TAKE' ? '待校验' : ''
}}</span> -->
<el-tag :type="col[item.orderStatus]">{{ item.orderStatus == 'STAY_PICKED_UP' ? '待自提' :item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus ==
'PAID' ? '已付款' : item.orderStatus == 'UNDELIVERED' ? '待发货' : item.orderStatus == 'DELIVERED'
? '已发货' : item.orderStatus == 'COMPLETED' ? '已完成' : item.orderStatus == 'TAKE' ? '待校验' : ''}}</el-tag>
<el-tag :type="col[item.orderStatus]">{{
item.orderStatus == 'STAY_PICKED_UP' ? '待自提'
: item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus
==
'PAID' ? '已付款' : item.orderStatus == 'UNDELIVERED' ? '待发货' : item.orderStatus == 'DELIVERED'
? '已发货' : item.orderStatus == 'COMPLETED' ? '已完成' : item.orderStatus == 'TAKE' ? '待校验' :
''
}}</el-tag>
</div>
</div>
@ -75,24 +82,26 @@
<script>
import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
import { mapState, mapGetters } from "vuex";
import { unitPrice } from '@/plugins/filters';
export default {
directives: {
"infinite-scroll": InfiniteScroll,
},
data() {
data () {
return {
activeName: 'goods',
btnHide: undefined,
hide: true,
col:{
CANCELLED:'error',
PAID:'error',
TAKE:'',
COMPLETED:'success',
DELIVERED:'danger',
UNDELIVERED:'warning',
UNPAID:'',
STAY_PICKED_UP:''
col: {
CANCELLED: 'error',
PAID: 'error',
TAKE: '',
COMPLETED: 'success',
DELIVERED: 'danger',
UNDELIVERED: 'warning',
UNPAID: '',
STAY_PICKED_UP: ''
},
}
},
@ -112,17 +121,17 @@ export default {
methods: {
//跳转订单列表
scrollBottom(e) {
scrollBottom (e) {
const { scrollTop, scrollHeight, clientHeight } = e.srcElement
if (scrollTop + clientHeight >= scrollHeight) {
this.$emit('loadMore')
}
},
loadMore() {
loadMore () {
},
// 发送消息回调事件
submitSendGoodsMessage(item) {
submitSendGoodsMessage (item) {
const context = {
id: item.id,
goodsId: item.goodsId,
@ -143,7 +152,7 @@ export default {
item.btnHide = 0
},
// 发送订单列表
submitSendOrderMessage(item, index) {
submitSendOrderMessage (item, index) {
console.log(item, 'item');
const context = {
sn: item.sn,
@ -165,7 +174,7 @@ export default {
localStorage.setItem(item.goodsId, 0)
item.btnHide = 0
},
handleClick(tab, event) {
handleClick (tab, event) {
console.log(tab, event);
}
},
@ -179,7 +188,7 @@ export default {
default: []
},
},
mounted() {
mounted () {
// state.user.toUser
console.log(this.orderList, ' this.$store.state.user.toUser this.$store.state.user.toUser this.$store.state.user.toUser');
this.btnHide = localStorage.getItem('btnHide')
@ -236,7 +245,7 @@ export default {
.item {
// margin: 4px;
margin-top:16px
margin-top: 16px
}
.left .el-tooltip__popper,
@ -250,18 +259,20 @@ export default {
}
.orderlist {
max-width:352px;
max-width: 352px;
margin-bottom: 10px;
background: #fff;
color: #5a606b;
box-sizing: border-box;
}
.box::-webkit-scrollbar {
width: 0px!important;
}
width: 0px !important;
}
.order_top {
border-bottom: 1px solid #f2f2f2;
.order_sn {}
}
@ -312,20 +323,23 @@ export default {
text-overflow: ellipsis;
white-space: nowrap
}
/deep/ .el-tabs__header{
/deep/ .el-tabs__header {
position: absolute;
width: 362px;
height: 50px;
left: 0;
z-index: 2;
background: #ffffff;
}
}
// /deep/ .el-tabs__item.is-top:last-child {
// color: black;
// }
/deep/.is-active{
/deep/.is-active {
color: #f23030;
}
/deep/.el-tabs__active-bar {
background-color: #f23030;
}
@ -339,18 +353,22 @@ export default {
justify-content: center;
align-items: center;
}
/deep/.el-tabs__content{
margin-top: 50px;
/deep/.el-tabs__content {
margin-top: 50px;
}
.box {
height: 700px;
overflow: auto;
// margin-top: 50px;
// width: 350px;
}
.order_padding{
padding:0 10px;
.order_padding {
padding: 0 10px;
}
.store-button {
background-color: white;
border-color: #F56C6C;
@ -386,6 +404,7 @@ export default {
.separate {
margin-top: 8px;
}
// .el-tabs--card {
// height: calc(100vh - 110px);
// overflow-y: auto;

2
im/src/components/chat/panel/template/goodsLink.vue
View File

@ -8,7 +8,7 @@
<div style="margin-left: 13px">
<a @click="linkToGoods(goodsDetail.goodsId, goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
<div>
<span style="color: red;">￥{{ goodsDetail.price }}</span>
<span style="color: red;">{{ goodsDetail.price | unitPrice('￥') }}</span>
</div>
<div v-if="hide">
<el-button class="store-button" type="danger" v-if="btnHide == 1 && toUser.storeFlag" size="mini"

4
im/src/main.js
View File

@ -15,6 +15,10 @@ import './core/filter'
import './core/directives'
import '@/permission'
import '@/icons'
import * as filters from "./plugins/filters";
Object.keys(filters).forEach((key) => {
Vue.filter(key, filters[key]);
});
// 引入自定义全局css
import '@/assets/css/global.less'

200
im/src/plugins/Foundation.js Normal file
View File

@ -0,0 +1,200 @@
/**
* 一些常用的基础方法
* unixToDate 将unix时间戳转换为指定格式
* dateToUnix 将时间转unix时间戳
* deepClone 对一个对象进行深拷贝
* formatPrice 货币格式化
* secrecyMobile 手机号隐私保护
* randomString 随机生成指定长度的字符串
*/
/**
* 验证银行卡号
*/
export function checkBankno(bankno) {
var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位（与luhm进行比较）
var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位
var newArr = [];
for (var i = first15Num.length - 1; i > -1; i--) {
//前15或18位倒序存进数组
newArr.push(first15Num.substr(i, 1));
}
var arrJiShu = []; //奇数位*2的积 <9
var arrJiShu2 = []; //奇数位*2的积 >9
var arrOuShu = []; //偶数位数组
for (var j = 0; j < newArr.length; j++) {
if ((j + 1) % 2 == 1) {
//奇数位
if (parseInt(newArr[j]) * 2 < 9) arrJiShu.push(parseInt(newArr[j]) * 2);
else arrJiShu2.push(parseInt(newArr[j]) * 2);
} //偶数位
else arrOuShu.push(newArr[j]);
}
var jishu_child1 = []; //奇数位*2 >9 的分割之后的数组个位数
var jishu_child2 = []; //奇数位*2 >9 的分割之后的数组十位数
for (var h = 0; h < arrJiShu2.length; h++) {
jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
}
var sumJiShu = 0; //奇数位*2 < 9 的数组之和
var sumOuShu = 0; //偶数位数组之和
var sumJiShuChild1 = 0; //奇数位*2 >9 的分割之后的数组个位数之和
var sumJiShuChild2 = 0; //奇数位*2 >9 的分割之后的数组十位数之和
var sumTotal = 0;
for (var m = 0; m < arrJiShu.length; m++) {
sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
}
for (var n = 0; n < arrOuShu.length; n++) {
sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
}
for (var p = 0; p < jishu_child1.length; p++) {
sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
}
//计算总和
sumTotal =
parseInt(sumJiShu) +
parseInt(sumOuShu) +
parseInt(sumJiShuChild1) +
parseInt(sumJiShuChild2);
//计算Luhm值
var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
var luhm = 10 - k;
if (lastNum == luhm) {
return true;
} else {
return false;
}
}
/**
* 将unix时间戳转换为指定格式
* @param unix 时间戳【秒】
* @param format 转换格式
* @returns {*|string}
*/
function unixToDate (unix, format) {
if (!unix) return unix
let _format = format || 'yyyy-MM-dd hh:mm:ss'
const d = new Date(unix)
const o = {
'M+': d.getMonth() + 1,
'd+': d.getDate(),
'h+': d.getHours(),
'm+': d.getMinutes(),
's+': d.getSeconds(),
'q+': Math.floor((d.getMonth() + 3) / 3),
S: d.getMilliseconds()
}
if (/(y+)/.test(_format)) _format = _format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
for (const k in o)
if (new RegExp('(' + k + ')').test(_format)) _format = _format.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) :
(('00' + o[k]).substr(('' + o[k]).length)))
return _format
}
/**
* 将时间转unix时间戳
* @param date
* @returns {number} 【秒】
*/
function dateToUnix (date) {
let newStr = date.replace(/:/g, '-')
newStr = newStr.replace(/ /g, '-')
const arr = newStr.split('-')
const datum = new Date(Date.UTC(
arr[0],
arr[1] - 1,
arr[2],
arr[3] - 8 || -8,
arr[4] || 0,
arr[5] || 0
))
return parseInt(datum.getTime() / 1000)
}
/**
* 货币格式化
* @param price
* @returns {string}
*/
function formatPrice (price) {
if (typeof price !== 'number') return price
return String(Number(price).toFixed(2)).replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}
/**
* 手机号隐私保护
* 隐藏中间四位数字
* @param mobile
* @returns {*}
*/
function secrecyMobile (mobile) {
mobile = String(mobile)
if (!/\d{11}/.test(mobile)) {
return mobile
}
return mobile.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3')
}
/**
* 随机生成指定长度的字符串
* @param length
* @returns {string}
*/
function randomString (length = 32) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
const maxPos = chars.length
let _string = ''
for (let i = 0; i < length; i++) {
_string += chars.charAt(Math.floor(Math.random() * maxPos))
}
return _string
}
/**
* 计算传秒数的倒计时【天、时、分、秒】
* @param seconds
* @returns {{day : *, hours : *, minutes : *, seconds : *}}
*/
function countTimeDown (seconds) {
const leftTime = (time) => {
if (time < 10) time = '0' + time
return time + ''
}
return {
day: leftTime(parseInt(seconds / 60 / 60 / 24, 10)),
hours: leftTime(parseInt(seconds / 60 / 60 % 24, 10)),
minutes: leftTime(parseInt(seconds / 60 % 60, 10)),
seconds: leftTime(parseInt(seconds % 60, 10))
}
}
/**
* 计算当前时间到第二天0点的倒计时[秒]
* @returns {number}
*/
function theNextDayTime () {
const nowDate = new Date()
const time = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate() + 1, 0, 0, 0).getTime() - nowDate.getTime()
return parseInt(time / 1000)
}
export {
unixToDate,
dateToUnix,
formatPrice,
secrecyMobile,
randomString,
countTimeDown,
theNextDayTime
}

20
im/src/plugins/filters.js Normal file
View File

@ -0,0 +1,20 @@
import * as Foundation from './Foundation.js';
/**
* 金钱单位置换 2999 --> 2,999.00
* @param val
* @param unit
* @param location
* @returns {*}
*/
export function unitPrice (val, unit, location) {
if (!val) val = 0;
let price = Foundation.formatPrice(val);
if (location === 'before') {
return price.substr(0, price.length - 3);
}
if (location === 'after') {
return price.substr(-2);
}
return (unit || '') + price;
}