Skip to content

Commit 1134921

Browse files
wuxiranwuxiran
committed
1、微信组件更新vue3，部分功能可能还有问题。
1 parent 6f8499c commit 1134921

File tree

14 files changed

+2348
-4
lines changed

14 files changed

+2348
-4
lines changed

‎src/utils/dict.ts

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,23 @@ export const getDictObj = (dictType: string, value: any) => {
7070
})
7171
}
7272

73+
/**
74+
* 获得字典数据的文本展示
75+
*
76+
* @param dictType 字典类型
77+
* @param value 字典数据的值
78+
*/
79+
export const getDictLabel = (dictType: string, value: any) => {
80+
const dictOptions: DictDataType[] = getDictOptions(dictType)
81+
const dictLabel = ref('')
82+
dictOptions.forEach((dict: DictDataType) => {
83+
if (dict.value === value) {
84+
dictLabel.value = dict.label
85+
}
86+
})
87+
return dictLabel.value
88+
}
89+
7390
export enum DICT_TYPE {
7491
USER_TYPE = 'user_type',
7592
COMMON_STATUS = 'common_status',
@@ -123,5 +140,9 @@ export enum DICT_TYPE {
123140
PAY_ORDER_STATUS = 'pay_order_status', // 商户支付订单状态
124141
PAY_ORDER_REFUND_STATUS = 'pay_order_refund_status', // 商户支付订单退款状态
125142
PAY_REFUND_ORDER_STATUS = 'pay_refund_order_status', // 退款订单状态
126-
PAY_REFUND_ORDER_TYPE = 'pay_refund_order_type' // 退款订单类别
143+
PAY_REFUND_ORDER_TYPE = 'pay_refund_order_type', // 退款订单类别
144+
145+
// ========== MP 模块 ==========
146+
MP_AUTO_REPLY_REQUEST_MATCH = 'mp_auto_reply_request_match', // 自动回复请求匹配类型
147+
MP_MESSAGE_TYPE = 'mp_message_type' // 消息类型
127148
}

‎src/utils/formatTime.ts

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,65 @@ import dayjs from 'dayjs'
1111
* @description format 季度 + 星期 + 几周："YYYY-mm-dd HH:MM:SS WWW QQQQ ZZZ"
1212
* @returns 返回拼接后的时间字符串
1313
*/
14-
export function formatDate(date: Date, format: string): string {
14+
export function formatDate(date: Date, format?: string): string {
15+
// 日期不存在，则返回空
16+
if (!date) {
17+
return ''
18+
}
19+
// 日期存在，则进行格式化
20+
if (format === undefined) {
21+
format = 'YYYY-MM-DD HH:mm:ss'
22+
}
1523
return dayjs(date).format(format)
1624
}
1725

26+
// TODO 芋艿：稍后去掉
27+
// 日期格式化
28+
export function parseTime(time: any, pattern?: string) {
29+
if (arguments.length === 0 || !time) {
30+
return null
31+
}
32+
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
33+
let date
34+
if (typeof time === 'object') {
35+
date = time
36+
} else {
37+
if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
38+
time = parseInt(time)
39+
} else if (typeof time === 'string') {
40+
time = time
41+
.replace(new RegExp(/-/gm), '/')
42+
.replace('T', ' ')
43+
.replace(new RegExp(/\.\d{3}/gm), '')
44+
}
45+
if (typeof time === 'number' && time.toString().length === 10) {
46+
time = time * 1000
47+
}
48+
date = new Date(time)
49+
}
50+
const formatObj = {
51+
y: date.getFullYear(),
52+
m: date.getMonth() + 1,
53+
d: date.getDate(),
54+
h: date.getHours(),
55+
i: date.getMinutes(),
56+
s: date.getSeconds(),
57+
a: date.getDay()
58+
}
59+
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
60+
let value = formatObj[key]
61+
// Note: getDay() returns 0 on Sunday
62+
if (key === 'a') {
63+
return ['日', '一', '二', '三', '四', '五', '六'][value]
64+
}
65+
if (result.length > 0 && value < 10) {
66+
value = '0' + value
67+
}
68+
return value || 0
69+
})
70+
return time_str
71+
}
72+
1873
/**
1974
* 获取当前日期是第几周
2075
* @param dateTime 当前传入的日期值

‎src/views/mp/components/img.png

15 KB
Loading

‎src/views/mp/components/wx-location/main.vue

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!--
2+
【微信消息 - 定位】
3+
-->
4+
<template>
5+
<div>
6+
<el-link
7+
type="primary"
8+
target="_blank"
9+
:href="
10+
'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=' +
11+
locationY +
12+
'&pointy=' +
13+
locationX +
14+
'&name=' +
15+
label +
16+
'&ref=yudao'
17+
"
18+
>
19+
<el-col>
20+
<el-row>
21+
<img
22+
:src="
23+
'https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|' +
24+
locationX +
25+
',' +
26+
locationY +
27+
'&key=' +
28+
qqMapKey +
29+
'&size=250*180'
30+
"
31+
/>
32+
</el-row>
33+
<el-row>
34+
<el-icon><Location /></el-icon>{{ label }}
35+
</el-row>
36+
</el-col>
37+
</el-link>
38+
</div>
39+
</template>
40+
41+
<script setup lang="ts" name="WxLocation">
42+
import { Location } from '@element-plus/icons-vue'
43+
44+
const props = defineProps({
45+
locationX: {
46+
required: true,
47+
type: Number
48+
},
49+
locationY: {
50+
required: true,
51+
type: Number
52+
},
53+
label: {
54+
// 地名
55+
required: true,
56+
type: String
57+
},
58+
qqMapKey: {
59+
// QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
60+
required: false,
61+
type: String,
62+
default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E' // 需要自定义
63+
}
64+
})
65+
66+
defineExpose({
67+
locationX: props.locationX,
68+
locationY: props.locationY,
69+
label: props.label,
70+
qqMapKey: props.qqMapKey
71+
})
72+
</script>

‎src/views/mp/components/wx-msg/card.scss

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
.avue-card{
2+
&__item{
3+
margin-bottom: 16px;
4+
border: 1px solid #e8e8e8;
5+
background-color: #fff;
6+
box-sizing: border-box;
7+
color: rgba(0,0,0,.65);
8+
font-size: 14px;
9+
font-variant: tabular-nums;
10+
line-height: 1.5;
11+
list-style: none;
12+
font-feature-settings: "tnum";
13+
cursor: pointer;
14+
height:200px;
15+
&:hover{
16+
border-color: rgba(0,0,0,.09);
17+
box-shadow: 0 2px 8px rgba(0,0,0,.09);
18+
}
19+
&--add{
20+
border:1px dashed #000;
21+
width: 100%;
22+
color: rgba(0,0,0,.45);
23+
background-color: #fff;
24+
border-color: #d9d9d9;
25+
border-radius: 2px;
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
font-size: 16px;
30+
i{
31+
margin-right: 10px;
32+
}
33+
&:hover{
34+
color: #40a9ff;
35+
background-color: #fff;
36+
border-color: #40a9ff;
37+
}
38+
}
39+
}
40+
&__body{
41+
display: flex;
42+
padding: 24px;
43+
}
44+
&__detail{
45+
flex:1
46+
}
47+
&__avatar{
48+
width: 48px;
49+
height: 48px;
50+
border-radius: 48px;
51+
overflow: hidden;
52+
margin-right: 12px;
53+
img{
54+
width: 100%;
55+
height: 100%;
56+
}
57+
}
58+
&__title{
59+
color: rgba(0,0,0,.85);
60+
margin-bottom: 12px;
61+
font-size: 16px;
62+
&:hover{
63+
color:#1890ff;
64+
}
65+
}
66+
&__info{
67+
color: rgba(0,0,0,.45);
68+
display: -webkit-box;
69+
-webkit-box-orient: vertical;
70+
-webkit-line-clamp: 3;
71+
overflow: hidden;
72+
height: 64px;
73+
}
74+
&__menu{
75+
display: flex;
76+
justify-content:space-around;
77+
height: 50px;
78+
background: #f7f9fa;
79+
color: rgba(0,0,0,.45);
80+
text-align: center;
81+
line-height: 50px;
82+
&:hover{
83+
color:#1890ff;
84+
}
85+
}
86+
}
87+
88+
/** joolun 额外加的 */
89+
.avue-comment__main {
90+
flex: unset!important;
91+
border-radius: 5px!important;
92+
margin: 0 8px!important;
93+
}
94+
.avue-comment__header {
95+
border-top-left-radius: 5px;
96+
border-top-right-radius: 5px;
97+
}
98+
.avue-comment__body {
99+
border-bottom-right-radius: 5px;
100+
border-bottom-left-radius: 5px;
101+
}

‎src/views/mp/components/wx-msg/comment.scss

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
2+
.avue-comment{
3+
margin-bottom: 30px;
4+
display: flex;
5+
align-items: flex-start;
6+
&--reverse{
7+
flex-direction:row-reverse;
8+
.avue-comment__main{
9+
&:before,&:after{
10+
left: auto;
11+
right: -8px;
12+
border-width: 8px 0 8px 8px;
13+
}
14+
&:before{
15+
border-left-color: #dedede;
16+
}
17+
&:after{
18+
border-left-color: #f8f8f8;
19+
margin-right: 1px;
20+
margin-left: auto;
21+
}
22+
}
23+
}
24+
&__avatar{
25+
width: 48px;
26+
height: 48px;
27+
border-radius: 50%;
28+
border: 1px solid transparent;
29+
box-sizing: border-box;
30+
vertical-align: middle;
31+
}
32+
&__header{
33+
padding: 5px 15px;
34+
background: #f8f8f8;
35+
border-bottom: 1px solid #eee;
36+
display: flex;
37+
align-items: center;
38+
justify-content: space-between;
39+
}
40+
&__author{
41+
font-weight: 700;
42+
font-size: 14px;
43+
color: #999;
44+
}
45+
&__main{
46+
flex:1;
47+
margin: 0 20px;
48+
position: relative;
49+
border: 1px solid #dedede;
50+
border-radius: 2px;
51+
&:before,&:after{
52+
position: absolute;
53+
top: 10px;
54+
left: -8px;
55+
right: 100%;
56+
width: 0;
57+
height: 0;
58+
display: block;
59+
content: " ";
60+
border-color: transparent;
61+
border-style: solid solid outset;
62+
border-width: 8px 8px 8px 0;
63+
pointer-events: none;
64+
}
65+
&:before {
66+
border-right-color: #dedede;
67+
z-index: 1;
68+
}
69+
&:after{
70+
border-right-color: #f8f8f8;
71+
margin-left: 1px;
72+
z-index: 2;
73+
}
74+
}
75+
&__body{
76+
padding: 15px;
77+
overflow: hidden;
78+
background: #fff;
79+
font-family: Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,FontAwesome,sans-serif;color: #333;
80+
font-size: 14px;
81+
}
82+
blockquote{
83+
margin:0;
84+
font-family: Georgia,Times New Roman,Times,Kai,Kaiti SC,KaiTi,BiauKai,FontAwesome,serif;
85+
padding: 1px 0 1px 15px;
86+
border-left: 4px solid #ddd;
87+
}
88+
}

0 commit comments

Comments
 (0)