45 Commits

Author SHA1 Message Date
e263a616f6 tmp: 部分代码与UnishopV5结合,但是代码有严重缺陷 2025-12-20 15:30:39 +08:00
ed5181b382 chore:电话按钮客服按钮背景白色圈改成正圆 2025-12-19 17:18:36 +08:00
95375d5476 chore:实现后台控制哪个客服,H5可以正常切换客服 2025-12-19 17:07:57 +08:00
b34003e2c0 chore:修改客服 2025-12-19 14:05:48 +08:00
3a455bd644 chore:合并成一个客服按钮 2025-12-19 11:59:52 +08:00
8103f4c897 chore:电话按钮可以点击了 2025-12-19 09:49:58 +08:00
0066a46037 chore:调整样式,删除多余的电话按钮 2025-12-19 08:46:14 +08:00
0b62de8c6b chore:正常运行 2025-12-18 18:31:10 +08:00
9097658782 chore:微信小程序假的流聊天 2025-12-18 15:20:00 +08:00
ee6c777fb1 chore:进入客服页面不乱跳了 2025-12-16 14:07:59 +08:00
5503758854 chore:删除了气泡底下的时间 2025-12-16 11:35:55 +08:00
8d84306747 chore:往上翻历史记录,不在乱窜了 2025-12-16 11:32:40 +08:00
c45f3e69da chore:解决了key问题 2025-12-13 16:33:22 +08:00
80428e625f chore:可以看到之前历史对话了,但是获取时会晃动不完整 2025-12-13 16:19:29 +08:00
a06ee95482 chore:可以看见历史记录了 2025-12-12 16:41:54 +08:00
b4aed459c5 chore:目前为止加了历史会话,正常运行没有出错 2025-12-12 16:23:00 +08:00
aa03abf651 chore:ai客服解析流式数据成功 2025-12-12 10:48:26 +08:00
af23505a74 chore:AI客服正常流式聊天 2025-12-11 17:35:34 +08:00
3898518ad0 chore: 可以连接到流式请求 2025-12-11 17:24:14 +08:00
f0d3d1986f chore:把 message替换成 query 2025-12-11 09:42:28 +08:00
2750d8012f chore(merge): 这个版本正常运行 2025-12-10 15:30:39 +08:00
89fbfcaca6 Merge branch 'feat-ai-agent' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into feat-ai-agent 2025-12-10 15:25:35 +08:00
80c172ed77 合并
Squashed commit of the following:

commit 2416eab34f
Author: jinhhanhan <1683105490@qq.com>
Date:   Fri Dec 5 17:12:14 2025 +0800

    chore:加了dify

commit c4f2cea1a9
Author: jinhhanhan <1683105490@qq.com>
Date:   Fri Dec 5 16:47:53 2025 +0800

    chore:加了智能体

commit 227ab42e5a
Author: jinhhanhan <1683105490@qq.com>
Date:   Thu Dec 4 14:27:46 2025 +0800

    chore:挂上了智能客服
2025-12-10 15:21:32 +08:00
a0ddcd673d Squashed commit of the following:
commit 2416eab34f
Author: jinhhanhan <1683105490@qq.com>
Date:   Fri Dec 5 17:12:14 2025 +0800

    chore:加了dify

commit c4f2cea1a9
Author: jinhhanhan <1683105490@qq.com>
Date:   Fri Dec 5 16:47:53 2025 +0800

    chore:加了智能体

commit 227ab42e5a
Author: jinhhanhan <1683105490@qq.com>
Date:   Thu Dec 4 14:27:46 2025 +0800

    chore:挂上了智能客服
2025-12-10 14:52:52 +08:00
c50fab3d3a chore:没有太大关系的代码 2025-12-10 14:35:40 +08:00
578d914e9b chore:客服正常对话 2025-12-10 14:32:38 +08:00
1b194bf3e1 chore:健康检查中加了一个date空值 2025-12-10 14:22:00 +08:00
b685a91598 chore:加了文档中智能客服聊天功能,健康系统检测,流式聊天测试,创建会话接口 2025-12-10 11:37:29 +08:00
7da168e1b2 chore:让智能客服到AI气泡上方 2025-12-10 10:10:18 +08:00
179a9089b7 chore:加了用户自定义昵称 2025-12-10 09:23:04 +08:00
57a0bb9b5a chore:改了 2025-12-09 18:31:47 +08:00
4cfbfa7d8f chore:用户气泡可以随着字数改变而改变 2025-12-09 17:53:25 +08:00
eb189ae9f7 chore:加了用户自定义头像,背景颜色 2025-12-09 17:14:43 +08:00
d489f352db chore:增加了粉色机器人头像 2025-12-08 18:09:38 +08:00
7dbf455341 chore:ai智能客服可以正常对话 2025-12-08 17:16:10 +08:00
2416eab34f chore:加了dify 2025-12-05 17:12:14 +08:00
c4f2cea1a9 chore:加了智能体 2025-12-05 16:47:53 +08:00
227ab42e5a chore:挂上了智能客服 2025-12-04 14:27:46 +08:00
4cf19e417f chore:修改了 // 商户ID uniacid: 460
//api请求地址
    baseUrl: 'https://xcx30.5g-quickapp.com/',
    // baseUrl: 'http://localhost:8010/',

    // 图片域名
    imgDomain: 'https://xcx30.5g-quickapp.com/',
    //imgDomain: 'http://localhost:8010/',

    // H5端域名
    h5Domain: 'https://xcx30.5g-quickapp.com/',
    // h5Domain: 'http://localhost:8010/',
2025-12-01 08:42:50 +08:00
97f6971bd0 临时保存代码 2025-11-11 09:10:36 +08:00
526c813d8d chore: 从源码中移除 ai-chat-float 及 ai-chat-popup组件 2025-11-04 16:17:05 +08:00
29280f6f57 chore: 保留ai-chat-popup 及 ai-chat-flaot组件 2025-11-04 16:16:03 +08:00
1c2fee28ec chore: 初步聊天布局展示 2025-11-03 18:33:06 +08:00
5b9114aeac chore: 修复输入区导致的高度问题 2025-11-03 17:10:49 +08:00
2dfb2e0316 chore: 添加AI聊天对话框 2025-11-03 16:31:53 +08:00
199 changed files with 38951 additions and 20381 deletions

1
.gitignore vendored
View File

@@ -2,3 +2,4 @@
/.hbuilderx
/.idea
/node_modules
/iconfont-preview.html

13
App.vue
View File

@@ -40,7 +40,7 @@
// #endif
// #ifdef H5
if (uni.getSystemInfoSync().platform == 'ios') {
if (uni.getDeviceInfo().platform == 'ios') {
uni.setStorageSync('initUrl', location.href);
}
// #endif
@@ -151,7 +151,6 @@
onShow: function(options) {
// #ifdef MP
// 自动授权登录
this.getAuthInfo();
if (this.$store.state.token) {
this.$api.sendRequest({
url: '/api/member/info',
@@ -161,6 +160,8 @@
}
}
});
}else{
this.getAuthInfo();
}
// #endif
@@ -177,8 +178,7 @@
// #ifdef H5
if (this.$util.isWeiXin()) {
this.$util.getUrlCode(urlParams => {
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams
.source_member);
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams.source_member);
if (urlParams.code == undefined) {
this.$api.sendRequest({
@@ -204,8 +204,7 @@
let data = {};
if (res.data.openid) data.wx_openid = res.data.openid;
if (res.data.unionid) data.wx_unionid = res.data.unionid;
if (res.data.userinfo) Object.assign(data, res.data
.userinfo);
if (res.data.userinfo) Object.assign(data, res.data.userinfo);
this.authLogin(data);
}
}
@@ -301,7 +300,7 @@
this.shareConfig();
}
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
// 代表在watch里声明了firstName这个方法之后立即先去执行handler方法
immediate: true
}
}

View File

@@ -1,234 +1,305 @@
.collectPopupWindow {
position: relative;
height: 113rpx;
width: 510rpx;
margin-left: calc(100% - 530rpx);
image {
width: 100%;
height: 100%;
}
text {
color: #ff4544 !important;
font-size: 24rpx !important;
position: absolute;
top: 48rpx;
right: 25rpx;
}
}
.zhezhao {
width: 100vw;
height: 100vh;
background-color: transparent;
}
image {
max-width: 100% !important;
max-height: 100% !important;
}
.diy-wrap {
/* #ifdef H5 */
height: calc(100vh - 88rpx);
/* #endif */
/* #ifdef MP-WEIXIN */
height: 100vh;
/* #endif */
}
.page-img {
background-size: contain !important;
background-repeat: no-repeat !important;
}
.page-header {
background-size: 100% !important;
background-repeat: no-repeat !important;
background-position: top center;
background-attachment: fixed;
}
.bg-index {
width: 100%;
height: 100%;
box-sizing: border-box;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
.wap-floating {
text {
display: block;
font-size: 60rpx;
color: #ffffff;
text-align: center;
}
}
.wap-floating-collect .uni-popup__mask {
background: transparent;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.popup-box {
width: 450rpx;
background: #ffffff;
border-radius: $border-radius;
overflow: hidden;
.close_title {
width: 100%;
text-align: center;
height: 70rpx;
line-height: 70rpx;
font-size: $font-size-base;
}
.close_content {
width: 100%;
max-height: 500rpx;
padding: $padding;
box-sizing: border-box;
}
.close_content_box {
width: 100%;
max-height: 460rpx;
line-height: 1.3;
}
}
.noStore-text {
color: #000000 !important;
}
.isStore-top {
margin-bottom: 10rpx;
}
.keep-on-record {
text-align: center;
padding-bottom: 20rpx;
image {
width: 150rpx;
height: 60rpx;
}
}
.padding-bottom {
padding-bottom: 40rpx !important;
}
.choose-store {
/deep/ .uni-popup__wrapper{
background: none!important;
}
}
.choose-store-popup {
padding: 30rpx;
background-color: #fff;
.head-wrap {
font-weight: bold;
font-size: $font-size-toolbar;
text-align: center;
margin-bottom: 20rpx;
color: #202021;
}
.position-wrap {
display: flex;
color: #202021;
align-items: center;
margin-bottom: 20rpx;
.icon-dizhi {
font-weight: bold;
font-size: $font-size-tag;
margin-right: 10rpx;
}
.address {
font-weight: bold;
font-size: $font-size-tag;
margin-right: 10rpx;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.reposition {
display: flex;
align-items: center;
.iconfont {
font-size: $font-size-base;
margin-right: 6rpx;
}
text {
font-size: $font-size-tag;
color: #fd463e;
}
}
}
.store-wrap {
border: 1px solid $base-color;
border-radius: 16rpx;
padding: 20rpx 30rpx;
margin-bottom: 30rpx;
.tag {
background-color: #fee9ea;
color: #fd463e;
font-size: $font-size-activity-tag;
display: inline-block;
border-radius: 6rpx;
padding: 4rpx 12rpx;
// #ifdef H5
transform: scale(0.8);
margin-left: -10rpx;
// #endif
}
.store-name {
margin: 10rpx 0;
font-weight: bold;
color: #202021;
font-size: $font-size-toolbar;
}
.address {
color: #5f6067;
font-size: $font-size-tag;
margin-bottom: 10rpx;
}
.distance {
display: flex;
align-items: center;
color: #5f6067;
font-size: $font-size-tag;
.iconfont {
font-size: $font-size-base;
margin-right: 10rpx;
}
}
}
button {
border-radius: 40rpx;
}
.other-store {
display: flex;
align-items: center;
color: #5e6066;
font-weight: bold;
justify-content: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
.iconfont {
margin-left: 10rpx;
font-size: $font-size-tag;
}
}
}
.page-bottom {
margin-top: 20rpx;
}
.collectPopupWindow {
position: relative;
height: 113rpx;
width: 510rpx;
margin-left: calc(100% - 530rpx);
image {
width: 100%;
height: 100%;
}
text {
color: #ff4544 !important;
font-size: 24rpx !important;
position: absolute;
top: 48rpx;
right: 25rpx;
}
}
.zhezhao {
width: 100vw;
height: 100vh;
background-color: transparent;
}
image {
max-width: 100% !important;
max-height: 100% !important;
}
.diy-wrap {
/* #ifdef H5 */
height: calc(100vh - 88rpx);
/* #endif */
/* #ifdef MP-WEIXIN */
height: 100vh;
/* #endif */
}
.page-img {
background-size: contain !important;
background-repeat: no-repeat !important;
}
.page-header {
background-size: 100% !important;
background-repeat: no-repeat !important;
background-position: top center;
background-attachment: fixed;
}
.bg-index {
width: 100%;
height: 100%;
box-sizing: border-box;
background-size: 100% !important;
background-repeat: no-repeat !important;
}
.wap-floating {
text {
display: block;
font-size: 60rpx;
color: #ffffff;
text-align: center;
}
}
.wap-floating-collect .uni-popup__mask {
background: transparent;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.popup-box {
width: 450rpx;
background: #ffffff;
border-radius: $border-radius;
overflow: hidden;
.close_title {
width: 100%;
text-align: center;
height: 70rpx;
line-height: 70rpx;
font-size: $font-size-base;
}
.close_content {
width: 100%;
max-height: 500rpx;
padding: $padding;
box-sizing: border-box;
}
.close_content_box {
width: 100%;
max-height: 460rpx;
line-height: 1.3;
}
}
.noStore-text {
color: #000000 !important;
}
.isStore-top {
margin-bottom: 10rpx;
}
.keep-on-record {
text-align: center;
padding-bottom: 20rpx;
image {
width: 150rpx;
height: 60rpx;
}
}
.padding-bottom {
padding-bottom: 40rpx !important;
}
.choose-store {
/deep/ .uni-popup__wrapper{
background: none!important;
}
}
.choose-store-popup {
padding: 30rpx;
background-color: #fff;
.head-wrap {
font-weight: bold;
font-size: $font-size-toolbar;
text-align: center;
margin-bottom: 20rpx;
color: #202021;
}
.position-wrap {
display: flex;
color: #202021;
align-items: center;
margin-bottom: 20rpx;
.icon-dizhi {
font-weight: bold;
font-size: $font-size-tag;
margin-right: 10rpx;
}
.address {
font-weight: bold;
font-size: $font-size-tag;
margin-right: 10rpx;
flex: 1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.reposition {
display: flex;
align-items: center;
.iconfont {
font-size: $font-size-base;
margin-right: 6rpx;
}
text {
font-size: $font-size-tag;
color: #fd463e;
}
}
}
.store-wrap {
border: 1px solid $base-color;
border-radius: 16rpx;
padding: 20rpx 30rpx;
margin-bottom: 30rpx;
.tag {
background-color: #fee9ea;
color: #fd463e;
font-size: $font-size-activity-tag;
display: inline-block;
border-radius: 6rpx;
padding: 4rpx 12rpx;
// #ifdef H5
transform: scale(0.8);
margin-left: -10rpx;
// #endif
}
.store-name {
margin: 10rpx 0;
font-weight: bold;
color: #202021;
font-size: $font-size-toolbar;
}
.store-close-desc{
color: red;
font-size: $font-size-tag;
margin-bottom: 10rpx;
}
.address {
color: #5f6067;
font-size: $font-size-tag;
margin-bottom: 10rpx;
}
.distance {
display: flex;
align-items: center;
color: #5f6067;
font-size: $font-size-tag;
.iconfont {
font-size: $font-size-base;
margin-right: 10rpx;
}
}
}
button {
border-radius: 40rpx;
}
.other-store {
display: flex;
align-items: center;
color: #5e6066;
font-weight: bold;
justify-content: center;
margin-top: 20rpx;
margin-bottom: 20rpx;
.iconfont {
margin-left: 10rpx;
font-size: $font-size-tag;
}
}
}
.page-bottom {
margin-top: 20rpx;
}
.chain-stores{
.chain-store-popup{
background-color: #fff;
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
overflow: hidden;
.title{
font-size: 36rpx;
line-height: 104rpx;
text-align: center;
color: #000;
font-weight: bold;
}
.body{
padding: 20rpx 30rpx;
background-color: #F4F4F4;
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)) !important;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom)) !important;
.center{
background-color: #fff;
box-shadow: 4rpx 4rpx 12rpx 4rpx rgba(0,0,0,0.02);
border-radius: 24rpx;
padding-top: 60rpx;
padding-bottom: 23rpx;
.image{
display: flex;
justify-content: center;
}
.text-top{
margin-top: 44rpx;
font-size: 30rpx;
font-weight: bold;
color: #000;
line-height: 42rpx;
text-align: center;
}
.text-bottom{
margin-top: 20rpx;
padding: 0 57rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #999;
text-align: center;
}
.footer{
display: flex;
margin-top: 20rpx;
padding: 0 24rpx;
button{
margin: 0 !important;
box-sizing: border-box;
height: 84rpx;
line-height: 84rpx;
border-radius: 62rpx;
font-size: 30rpx;
flex:1;
}
button.btn-right{
margin-left: 20rpx !important;
}
}
}
}
}
}

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load Diff

434
common/js/ai-service.js Normal file
View File

@@ -0,0 +1,434 @@
import Config from './config.js'
import http from './http.js'
import store from '@/store/index.js'
let currentConversationId = null;
const CONVERSATION_KEY = 'ai_conversation_id';
// 初始化时从本地读取会话ID
try {
const saved = uni.getStorageSync(CONVERSATION_KEY);
if (saved) {
currentConversationId = saved;
}
} catch (e) {
console.warn('读取会话ID失败:', e);
}
export default {
/**
* 发送普通消息blocking 模式)
*/
async sendMessage(message, options = {}) {
try {
const aiConfig = store.getters.globalAIKefuConfig;
const params = {
url: '/api/kefu/chat',
data: {
user_id: store.state.memberInfo?.id || 'anonymous',
stream: false,
inputs: {},
query: message,
response_mode: 'blocking', // 强制 blocking
user: store.state.memberInfo?.id || 'anonymous',
conversation_id: this.getConversationId() || ''
},
header: {
'Content-Type': 'application/json'
}
};
console.log('Sending blocking request to:', params.url);
console.log('Request data:', params.data);
const response = await http.sendRequest({
...params,
async: false
});
const result = this.handleResponse(response);
if (result.conversationId) {
this.setConversationId(result.conversationId);
}
return result;
} catch (error) {
console.error('Dify API请求失败:', error);
throw new Error('AI服务暂时不可用请稍后重试');
}
},
/**
* 流式消息入口(自动适配平台)
*/
async sendStreamMessage(message, onChunk, onComplete) {
// #ifdef MP-WEIXIN
// 微信小程序:降级为普通请求 + 前端打字模拟
try {
const result = await this.sendMessage(message);
const content = result.content || '';
const conversationId = result.conversationId || '';
// 保存会话ID确保连续对话
if (conversationId) {
this.setConversationId(conversationId);
}
// 模拟打字效果
let index = 0;
const chunkSize = 2; // 每次显示2个字符
return new Promise((resolve) => {
const timer = setInterval(() => {
if (index < content.length) {
const chunk = content.substring(index, index + chunkSize);
index += chunkSize;
if (onChunk) onChunk(chunk);
} else {
clearInterval(timer);
if (onComplete) {
onComplete({
content: content,
conversation_id: conversationId
});
}
resolve({ content, conversation_id: conversationId });
}
}, 80); // 打字速度80ms/次
});
} catch (error) {
console.error('小程序流式消息降级失败:', error);
if (onComplete) {
onComplete({ error: error.message || '发送失败' });
}
throw error;
}
// #endif
// #ifdef H5
// H5使用真实流式EventSource / Fetch
return this.sendHttpStream(message, onChunk, onComplete);
// #endif
},
/**
* HTTP 流式请求(仅 H5 使用)
*/
async sendHttpStream(message, onChunk, onComplete) {
// #ifdef H5
try {
const url = Config.baseUrl + `/api/kefu/chat`;
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'text/event-stream',
},
body: JSON.stringify({
uniacid: store.state.uniacid || '1',
inputs: {},
query: message,
response_mode: 'streaming',
user_id: store.state.memberInfo?.id || 'anonymous',
conversation_id: this.getConversationId() || ''
})
});
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
if (!response.body) {
throw new Error('响应体不可用');
}
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let buffer = '';
let content = '';
let conversationId = '';
function processBuffer(buf, callback) {
const lines = buf.split('\n');
buf = lines.pop() || '';
for (const line of lines) {
const trimmed = line.trim();
if (trimmed.startsWith('data:')) {
const jsonStr = trimmed.slice(5).trim();
if (jsonStr) {
try {
const data = JSON.parse(jsonStr);
if (data.event === 'message') {
const text = data.answer || data.text || '';
content += text;
callback(text);
}
if (data.conversation_id) {
conversationId = data.conversation_id;
}
if (data.event === 'message_end') {
// 可选:提前完成
}
} catch (e) {
console.warn('解析流数据失败:', e);
}
}
}
}
return buf;
}
while (true) {
const { done, value } = await reader.read();
if (done) break;
buffer += decoder.decode(value, { stream: true });
buffer = processBuffer(buffer, (chunk) => {
if (onChunk) onChunk(chunk);
});
}
if (onComplete) {
onComplete({
content,
conversation_id: conversationId
});
}
return { content, conversation_id: conversationId };
} catch (error) {
console.error('H5 流式请求失败:', error);
throw error;
}
// #endif
// #ifdef MP-WEIXIN
// 理论上不会执行到这里,但防止 fallback
return this.sendStreamMessage(message, onChunk, onComplete);
// #endif
},
/**
* 处理API响应统一格式
*/
handleResponse(response) {
if (response.code === 0 || response.success) {
return {
success: true,
content: response.data?.answer || response.data?.content || response.data?.reply || response.data,
conversationId: response.data?.conversation_id,
messageId: response.data?.message_id
};
} else {
throw new Error(response.message || 'AI服务返回错误');
}
},
/**
* 获取当前会话ID
*/
getConversationId() {
return currentConversationId;
},
/**
* 设置并持久化会话ID
*/
setConversationId(id) {
if (id && id !== currentConversationId) {
currentConversationId = id;
try {
uni.setStorageSync(CONVERSATION_KEY, id);
} catch (e) {
console.error('保存会话ID失败:', e);
}
}
},
/**
* 清除会话ID
*/
clearConversationId() {
currentConversationId = null;
try {
uni.removeStorageSync(CONVERSATION_KEY);
} catch (e) {
console.error('清除会话ID失败:', e);
}
},
/**
* 生成新会话(如需)
*/
async generateConversationId() {
const params = {
url: '/api/kefu/createConversation',
data: {
uniacid: store.state.uniacid,
user_id: store.state.memberInfo?.id || 'anonymous',
member_id: store.state.memberInfo?.id || '',
},
header: {
'Content-Type': 'application/json'
}
};
const response = await http.sendRequest({
...params,
async: false
});
return this.handleResponse(response);
},
/**
* 获取服务状态
*/
async getServiceStatus() {
try {
const response = await http.sendRequest({
url: '/api/kefu/health',
async: false,
data: {}
});
const available = [response?.data?.status, response?.data?.components?.ai_service_config?.status]
.filter(item => item === 'healthy').length > 0;
return {
available,
reason: available ? '服务正常' : '服务异常'
};
} catch (error) {
return {
available: false,
reason: '服务检查失败'
};
}
},
/**
* 清除会话历史(调用后端接口)
*/
async clearConversation(conversationId) {
try {
const response = await http.sendRequest({
url: '/api/kefu/clear-conversation',
data: { conversation_id: conversationId },
async: false
});
return response.success;
} catch (error) {
console.error('清除会话失败:', error);
return false;
}
},
/**
* 获取会话历史
*/
async getConversationHistory(params = {}) {
try {
if (!params.conversation_id) {
throw new Error('会话IDconversation_id是必填参数');
}
const requestData = {
uniacid: params.uniacid || store.state.uniacid || '1',
conversation_id: params.conversation_id,
user_id: params.user_id || store.state.memberInfo?.id || 'anonymous',
limit: params.limit || 20,
offset: params.offset || 0,
member_id: params.member_id || store.state.memberInfo?.id || '',
token: params.token || ''
};
const response = await http.sendRequest({
url: '/api/kefu/getHistory',
data: requestData,
header: {
'Content-Type': 'application/json'
},
async: false
});
if (response.code === 0 || response.success) {
return {
success: true,
data: response.data,
messages: response.data?.messages || [],
total: response.data?.total || 0,
page_info: response.data?.page_info || { limit: 20, offset: 0 }
};
} else {
throw new Error(response.message || '获取会话历史失败');
}
} catch (error) {
console.error('获取会话历史失败:', error);
throw new Error(error.message || '获取会话历史时发生错误,请稍后重试');
}
},
// ================================
// 以下方法仅用于 H5小程序无效
// ================================
/**
* [H5 Only] EventSource 流式聊天(备用)
*/
chatWithEventSource(message, conversationId = '', onMessage, onComplete, onError) {
// #ifdef H5
if (window.currentEventSource) {
window.currentEventSource.close();
}
const params = new URLSearchParams({
uniacid: store.state.uniacid || '1',
user_id: store.state.memberInfo?.id || '123456',
query: message,
conversation_id: conversationId || '',
stream: 'true'
});
const url = `${Config.baseUrl}/api/kefu/chat?${params.toString()}`;
try {
const eventSource = new EventSource(url);
window.currentEventSource = eventSource;
let aiMessage = '';
eventSource.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
if (data.event === 'message') {
aiMessage += data.answer || '';
if (onMessage) onMessage(data.answer || '');
}
if (data.event === 'message_end') {
if (onComplete) onComplete({
conversation_id: data.conversation_id,
message: aiMessage
});
}
} catch (error) {
console.error('解析消息失败:', error);
}
};
eventSource.onerror = (error) => {
console.error('EventSource错误:', error);
if (onError) onError({ error: '连接失败' });
window.currentEventSource = null;
};
return eventSource;
} catch (error) {
console.error('创建EventSource失败:', error);
if (onError) onError({ error: error.message });
return null;
}
// #endif
// #ifdef MP-WEIXIN
console.warn('chatWithEventSource 不支持微信小程序');
return null;
// #endif
},
/**
* [H5 Only] Fetch 流式聊天(备用)
*/
async chatWithFetchStream(message, conversationId = '', onMessage, onComplete, onError) {
// #ifdef H5
// 实际逻辑已在 sendHttpStream 中实现,此处可复用或留空
return this.sendHttpStream(message, onMessage, (res) => {
onComplete?.({ message: res.content, conversation_id: res.conversation_id });
});
// #endif
// #ifdef MP-WEIXIN
console.warn('chatWithFetchStream 不支持微信小程序');
return null;
// #endif
}
};

View File

@@ -1,103 +1,100 @@
export default {
data() {
return {
authInfo: {}
}
},
methods: {
/**
* 获取用户登录凭证code
*/
getCode(callback) {
// 微信小程序
// #ifdef MP-WEIXIN
uni.login({
provider: 'weixin',
timeout: 3000,
success: res => {
if (res.code) {
this.$api.sendRequest({
url: '/weapp/api/weapp/authcodetoopenid',
data: {
code: res.code
},
success: res => {
if (res.code >= 0) {
if (res.data.openid) this.authInfo.weapp_openid = res.data
.openid;
if (res.data.unionid) this.authInfo.wx_unionid = res.data
.unionid;
typeof callback == 'function' && callback(this.authInfo);
} else {
this.$util.showToast({
title: res.message ? res.message : '小程序配置错误'
});
}
}
})
}
},
fail: (res) => {
// #ifdef MP-WEIXIN
let scene = wx.getLaunchOptionsSync().scene;
if ([1154, 1155].indexOf(scene) == -1) {
this.$util.showToast({
title: res.errMsg
});
}
// #endif
}
})
// #endif
// #ifdef MP-ALIPAY
uni.login({
timeout: 3000,
success: res => {
if (res.code) {
this.$api.sendRequest({
url: '/aliapp/api/aliapp/authcodetouserid',
data: {
code: res.code
},
success: res => {
if (res.code >= 0) {
if (res.data.user_id) this.authInfo.ali_openid = res.data
.user_id;
typeof callback == 'function' && callback(this.authInfo);
} else {
this.$util.showToast({
title: res.message ? res.message : '小程序配置错误'
});
}
}
})
}
},
fail: (err) => {
this.$util.showToast({
title: res.errMsg
});
}
})
// #endif
// #ifdef H5
if (this.$util.isWeiXin()) {
this.$api.sendRequest({
url: '/wechat/api/wechat/authcode',
data: {
redirect_url: location.href,
scopes: 'snsapi_userinfo'
},
success: res => {
if (res.code >= 0) {
location.href = res.data;
}
}
});
}
// #endif
}
}
export default {
data() {
return {
authInfo: {}
}
},
methods: {
/**
* 获取用户登录凭证code
*/
getCode(callback) {
// 微信小程序
// #ifdef MP-WEIXIN
uni.login({
provider: 'weixin',
timeout: 3000,
success: res => {
if (res.code) {
this.$api.sendRequest({
url: '/weapp/api/weapp/authcodetoopenid',
data: {
code: res.code
},
success: res => {
if (res.code >= 0) {
if (res.data.openid) this.authInfo.weapp_openid = res.data.openid;
if (res.data.unionid) this.authInfo.wx_unionid = res.data.unionid;
typeof callback == 'function' && callback(this.authInfo);
} else {
this.$util.showToast({
title: res.message ? res.message : '小程序配置错误'
});
}
}
})
}
},
fail: (res) => {
// #ifdef MP-WEIXIN
let scene = wx.getLaunchOptionsSync().scene;
if ([1154, 1155].indexOf(scene) == -1) {
this.$util.showToast({
title: res.errMsg
});
}
// #endif
}
})
// #endif
// #ifdef MP-ALIPAY
uni.login({
timeout: 3000,
success: res => {
if (res.code) {
this.$api.sendRequest({
url: '/aliapp/api/aliapp/authcodetouserid',
data: {
code: res.code
},
success: res => {
if (res.code >= 0) {
if (res.data.user_id) this.authInfo.ali_openid = res.data.user_id;
typeof callback == 'function' && callback(this.authInfo);
} else {
this.$util.showToast({
title: res.message ? res.message : '小程序配置错误'
});
}
}
})
}
},
fail: (res) => {
this.$util.showToast({
title: res.errMsg
});
}
})
// #endif
// #ifdef H5
if (this.$util.isWeiXin()) {
this.$api.sendRequest({
url: '/wechat/api/wechat/authcode',
data: {
redirect_url: location.href,
scopes: 'snsapi_userinfo'
},
success: res => {
if (res.code >= 0) {
location.href = res.data;
}
}
});
}
// #endif
}
}
}

View File

@@ -14,16 +14,19 @@ try {
// 调试版本,配置说明
const devCfg = {
// 商户ID
uniacid: 460, //825
uniacid: 1, //825
//api请求地址
baseUrl: 'https://xcx30.5g-quickapp.com/',
baseUrl: 'https://dev.aigc-quickapp.com/',
// baseUrl: 'http://localhost:8010/',
// 图片域名
imgDomain: 'https://xcx30.5g-quickapp.com/',
imgDomain: 'https://dev.aigc-quickapp.com/',
//imgDomain: 'http://localhost:8010/',
// H5端域名
h5Domain: 'https://xcx30.5g-quickapp.com/',
h5Domain: 'https://dev.aigc-quickapp.com/',
// h5Domain: 'http://localhost:8010/',
// // api请求地址
// baseUrl: 'https://tsaas.liveplatform.cn/',

View File

@@ -1,484 +1,511 @@
/**
* 客服统一处理服务
* 整合各种客服方式,提供统一的调用接口
*/
export class CustomerService {
constructor(vueInstance) {
this.vm = vueInstance;
}
/**
* 获取平台配置
* @returns {Object} 平台对应的客服配置
*/
getPlatformConfig() {
const servicerConfig = this.vm.$store.state.servicerConfig;
if (!servicerConfig) return null;
// #ifdef H5
return servicerConfig.h5;
// #endif
// #ifdef MP-WEIXIN
return servicerConfig.weapp;
// #endif
// #ifdef MP-ALIPAY
return servicerConfig.aliapp;
// #endif
return null;
}
/**
* 获取企业微信配置
* @returns {Object} 企业微信配置
*/
getWxworkConfig() {
return this.vm.$store.state.wxworkConfig;
}
/**
* 检查客服配置是否可用
* @returns {boolean} 是否有可用配置
*/
isConfigAvailable() {
const config = this.getPlatformConfig();
return config && typeof config === 'object' && config.type;
}
/**
* 验证客服配置完整性
* @returns {Object} 验证结果
*/
validateConfig() {
const config = this.getPlatformConfig();
const wxworkConfig = this.getWxworkConfig();
const result = {
isValid: true,
errors: [],
warnings: []
};
if (!config) {
result.isValid = false;
result.errors.push('客服配置不存在');
return result;
}
if (!config.type) {
result.isValid = false;
result.errors.push('客服类型未配置');
}
// 验证企业微信配置
if (config.type === 'wxwork') {
if (!wxworkConfig) {
result.isValid = false;
result.errors.push('企业微信配置不存在');
} else {
if (!wxworkConfig.enable) {
result.warnings.push('企业微信功能未启用');
}
if (!wxworkConfig.contact_url) {
result.warnings.push('企业微信活码链接未配置,将使用原有客服方式');
}
}
}
return result;
}
/**
* 获取客服类型
* @returns {string} 客服类型
*/
getServiceType() {
const config = this.getPlatformConfig();
return config?.type || 'none';
}
/**
* 处理客服点击事件
* @param {Object} options 选项参数
* @param {Object} options.niushop 牛商客服参数
* @param {string} options.sendMessageTitle 消息标题
* @param {string} options.sendMessagePath 消息路径
* @param {string} options.sendMessageImg 消息图片
*/
handleCustomerClick(options = {}) {
// 验证配置
const validation = this.validateConfig();
if (!validation.isValid) {
console.error('客服配置验证失败:', validation.errors);
this.showConfigErrorPopup(validation.errors);
return;
}
// 显示警告(如果有)
if (validation.warnings.length > 0) {
console.warn('客服配置警告:', validation.warnings);
}
const config = this.getPlatformConfig();
const {
niushop = {},
sendMessageTitle = '',
sendMessagePath = '',
sendMessageImg = ''
} = options;
// 检查是否为无客服类型
if (config.type === 'none') {
this.showNoServicePopup();
return;
}
// 根据类型处理客服
switch (config.type) {
case 'wxwork':
this.openWxworkService(false, config, options);
break;
case 'third':
this.openThirdService(config);
break;
case 'niushop':
this.openNiushopService(niushop);
break;
case 'weapp':
this.openWeappService(config, options);
break;
case 'aliapp':
this.openAliappService(config);
break;
default:
this.makePhoneCall();
}
}
/**
* 打开企业微信客服
* @param {boolean} useOriginalService 是否使用原有客服方式
* @param {Object} servicerConfig 客服配置
*/
openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) {
const config = servicerConfig || this.getPlatformConfig();
const wxworkConfig = this.getWxworkConfig();
const {
sendMessageTitle = '',
sendMessagePath = '',
sendMessageImg = ''
} = options;
// #ifdef MP-WEIXIN
if (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) {
// 使用活码链接跳转到企业微信
wx.navigateToMiniProgram({
appId: 'wxeb490c6f9b154ef9', // 企业微信官方小程序AppID
path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`,
success: () => {
console.log('跳转企业微信成功');
},
fail: (err) => {
console.error('跳转企业微信失败:', err);
this.fallbackToOriginalService();
}
});
} else {
// 使用原有的客服会话方式
wx.openCustomerServiceChat({
extInfo: { url: config.wxwork_url },
corpId: config.corpid,
showMessageCard: true,
sendMessageTitle,
sendMessagePath,
sendMessageImg
});
}
// #endif
// #ifdef H5
if (wxworkConfig?.enable && wxworkConfig?.contact_url) {
window.location.href = wxworkConfig.contact_url;
} else {
location.href = config.wxwork_url;
}
// #endif
}
/**
* 打开第三方客服
* @param {Object} config 客服配置
*/
openThirdService(config) {
if (config.third_url) {
location.href = config.third_url;
}
}
/**
* 打开牛商客服
* @param {Object} niushop 牛商参数
*/
openNiushopService(niushop) {
if (Object.keys(niushop).length > 0) {
this.vm.$util.redirectTo('/pages_tool/chat/room', niushop);
} else {
this.makePhoneCall();
}
}
/**
* 打开微信小程序客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
openWeappService(config, options = {}) {
// 如果是官方客服,由 open-type="contact" 自动处理
if (!this.shouldUseCustomService(config)) {
console.log('使用官方微信小程序客服');
return;
}
// 自定义客服处理
console.log('使用自定义微信小程序客服');
// 这里可以实现自定义的客服逻辑
// 例如:跳转到自定义客服页面、显示客服弹窗等
const {
sendMessageTitle = '',
sendMessagePath = '',
sendMessageImg = ''
} = options;
// 实现自定义客服逻辑
this.handleCustomWeappService(config, options);
}
/**
* 处理自定义微信小程序客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
handleCustomWeappService(config, options = {}) {
const {
sendMessageTitle = '',
sendMessagePath = '',
sendMessageImg = ''
} = options;
// 优先级1: 如果有自定义客服页面URL跳转到自定义页面
if (config.customServiceUrl) {
// 构建带参数的URL
let url = config.customServiceUrl;
const params = [];
if (sendMessageTitle) params.push(`title=${encodeURIComponent(sendMessageTitle)}`);
if (sendMessagePath) params.push(`path=${encodeURIComponent(sendMessagePath)}`);
if (sendMessageImg) params.push(`img=${encodeURIComponent(sendMessageImg)}`);
if (params.length > 0) {
url += (url.includes('?') ? '&' : '?') + params.join('&');
}
uni.navigateTo({
url: url,
fail: (err) => {
console.error('跳转自定义客服页面失败:', err);
this.tryThirdPartyService(config, options);
}
});
return;
}
// 优先级2: 尝试第三方客服
this.tryThirdPartyService(config, options);
}
/**
* 尝试使用第三方客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
tryThirdPartyService(config, options = {}) {
// 如果配置了第三方客服URL
if (config.thirdPartyServiceUrl) {
// #ifdef H5
window.open(config.thirdPartyServiceUrl, '_blank');
// #endif
// #ifdef MP-WEIXIN
// 微信小程序可以使用web-view或者跳转到第三方小程序
if (config.thirdPartyMiniAppId) {
wx.navigateToMiniProgram({
appId: config.thirdPartyMiniAppId,
path: config.thirdPartyMiniAppPath || '',
fail: (err) => {
console.error('跳转第三方小程序失败:', err);
this.fallbackToPhoneCall();
}
});
} else {
// 设置到剪贴板,让用户手动访问
uni.setClipboardData({
data: config.thirdPartyServiceUrl,
success: () => {
uni.showModal({
title: '客服链接已复制',
content: '客服链接已复制到剪贴板,请在浏览器中粘贴访问',
showCancel: false
});
}
});
}
// #endif
return;
}
// 降级到电话客服
this.fallbackToPhoneCall();
}
/**
* 降级到电话客服
*/
fallbackToPhoneCall() {
uni.showModal({
title: '联系客服',
content: '在线客服暂时不可用,是否拨打电话联系客服?',
success: (res) => {
if (res.confirm) {
this.makePhoneCall();
}
}
});
}
/**
* 打开支付宝小程序客服
* @param {Object} config 客服配置
*/
openAliappService(config) {
// 支付宝小程序客服会由 contact-button 组件自动处理
console.log('支付宝小程序客服');
}
/**
* 拨打电话
*/
makePhoneCall() {
this.vm.$api.sendRequest({
url: '/api/site/shopcontact',
success: res => {
if (res.code === 0 && res.data?.mobile) {
uni.makePhoneCall({
phoneNumber: res.data.mobile
});
}
}
});
}
/**
* 显示无客服弹窗
*/
showNoServicePopup() {
const siteInfo = this.vm.$store.state.siteInfo;
const message = siteInfo?.site_tel
? `请联系客服,客服电话是${siteInfo.site_tel}`
: '抱歉,商家暂无客服,请线下联系';
uni.showModal({
title: '联系客服',
content: message,
showCancel: false
});
}
/**
* 显示配置错误弹窗
* @param {Array} errors 错误列表
*/
showConfigErrorPopup(errors) {
const message = errors.join('\n');
uni.showModal({
title: '配置错误',
content: `客服配置有误:\n${message}`,
showCancel: false
});
}
/**
* 降级处理:使用原有客服方式
*/
fallbackToOriginalService() {
uni.showModal({
title: '提示',
content: '无法直接添加企业微信客服,是否使用其他方式联系客服?',
success: (res) => {
if (res.confirm) {
console.log('降级处理:使用原有客服方式');
this.openWxworkService(true);
}
}
});
}
/**
* 获取客服按钮配置
* @returns {Object} 按钮配置
*/
getButtonConfig() {
const config = this.getPlatformConfig();
if (!config) return { openType: '' };
let openType = '';
// #ifdef MP-WEIXIN
if (config.type === 'weapp') {
// 检查是否使用官方客服
if (config.useOfficial !== false) { // 默认为true使用官方客服
openType = 'contact';
}
}
// #endif
// #ifdef MP-ALIPAY
if (config.type === 'aliapp') openType = 'contact';
// #endif
return {
...config,
openType
};
}
/**
* 判断是否应该使用自定义客服处理
* @param {Object} config 客服配置
* @returns {boolean} 是否使用自定义客服
*/
shouldUseCustomService(config) {
// #ifdef MP-WEIXIN
// 如果是微信小程序且type为weapp检查useOfficial配置
if (config?.type === 'weapp') {
return config.useOfficial === false; // 明确设置为false才使用自定义
}
// #endif
// 其他平台或类型都使用自定义处理
return true;
}
}
/**
* 创建客服服务实例
* @param {Object} vueInstance Vue实例
* @returns {CustomerService} 客服服务实例
*/
export function createCustomerService(vueInstance) {
return new CustomerService(vueInstance);
/**
* 客服统一处理服务
* 整合各种客服方式,提供统一的调用接口
*/
export class CustomerService {
constructor(vueInstance, externalConfig = null) {
this.vm = vueInstance;
this.externalConfig = externalConfig; // 外部传入的最新配置(优先级最高)
this.latestPlatformConfig = null;
}
/**
* 强制刷新配置(支持传入外部配置
* @param {Object} externalConfig 外部最新配置
*/
refreshConfig(externalConfig = null) {
this.externalConfig = externalConfig || this.externalConfig;
this.latestPlatformConfig = null;
return this.getPlatformConfig();
}
/**
* 获取平台配置
* @returns {Object} 平台对应的客服配置
*/
getPlatformConfig() {
if (this.latestPlatformConfig) {
return this.latestPlatformConfig;
}
// 优先级:外部传入的最新配置 > vuex配置 > 空对象
const servicerConfig = this.externalConfig || this.vm.$store.state.servicerConfig || {};
console.log(`【实时客服配置】`, servicerConfig);
let platformConfig = null;
// #ifdef H5
platformConfig = servicerConfig.h5 ? (typeof servicerConfig.h5 === 'object' ? servicerConfig.h5 : null) : null;
// #endif
// #ifdef MP-WEIXIN
platformConfig = servicerConfig.weapp ? (typeof servicerConfig.weapp === 'object' ? servicerConfig.weapp : null) : null;
// #endif
// #ifdef MP-ALIPAY
platformConfig = servicerConfig.aliapp ? (typeof servicerConfig.aliapp === 'object' ? servicerConfig.aliapp : null) : null;
// #endif
// #ifdef PC
platformConfig = servicerConfig.pc ? (typeof servicerConfig.pc === 'object' ? servicerConfig.pc : null) : null;
// #endif
// 处理空数组情况你的配置中pc/aliapp是空数组转为null
if (Array.isArray(platformConfig)) {
platformConfig = null;
}
this.latestPlatformConfig = platformConfig;
return platformConfig;
}
/**
* 获取企业微信配置
* @returns {Object} 企业微信配置
*/
getWxworkConfig() {
return this.vm.$store.state.wxworkConfig || {};
}
/**
* 检查客服配置是否可用
* @returns {boolean} 是否有可用配置
*/
isConfigAvailable() {
const config = this.getPlatformConfig();
return config && typeof config === 'object' && config.type;
}
/**
* 验证客服配置完整性
* @returns {Object} 验证结果
*/
validateConfig() {
const config = this.getPlatformConfig();
const wxworkConfig = this.getWxworkConfig();
const result = {
isValid: true,
errors: [],
warnings: []
};
if (!config) {
result.isValid = false;
result.errors.push('客服配置不存在');
return result;
}
if (config.type === 'aikefu') {
return result;
}
if (!config.type) {
result.isValid = false;
result.errors.push('客服类型未配置');
}
if (config.type === 'wxwork') {
if (!wxworkConfig) {
result.isValid = false;
result.errors.push('企业微信配置不存在');
} else {
if (!wxworkConfig.enable) {
result.warnings.push('企业微信功能未启用');
}
if (!wxworkConfig.contact_url) {
result.warnings.push('企业微信活码链接未配置,将使用原有客服方式');
}
}
}
return result;
}
/**
* 跳转到Dify客服页面
*/
openDifyService() {
try {
if (this.vm.setAiUnreadCount) {
this.vm.setAiUnreadCount(0);
}
// 强制跳转,忽略框架层的封装
uni.redirectTo({
url: '/pages_tool/ai-chat/index',
fail: (err) => {
// 兜底使用window.location跳转H5
// #ifdef H5
window.location.href = '/pages_tool/ai-chat/index';
// #endif
console.error('跳转Dify客服失败:', err);
uni.showToast({
title: '跳转客服失败',
icon: 'none'
});
}
});
} catch (e) {
console.error('跳转Dify客服异常:', e);
uni.showToast({
title: '跳转客服失败',
icon: 'none'
});
}
}
/**
* 处理客服点击事件
* @param {Object} options 选项参数
*/
handleCustomerClick(options = {}) {
const validation = this.validateConfig();
if (!validation.isValid) {
console.error('客服配置验证失败:', validation.errors);
this.showConfigErrorPopup(validation.errors);
return;
}
if (validation.warnings.length > 0) {
console.warn('客服配置警告:', validation.warnings);
}
const config = this.getPlatformConfig();
const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
if (config.type === 'none') {
this.showNoServicePopup();
return;
}
// 核心分支根据最新的type处理
switch (config.type) {
case 'aikefu':
this.openDifyService();
break;
case 'wxwork':
this.openWxworkService(false, config, options);
break;
case 'third':
this.openThirdService(config);
break;
case 'niushop':
this.openNiushopService(niushop);
break;
case 'weapp':
this.openWeappService(config, options);
break;
case 'aliapp':
this.openAliappService(config);
break;
default:
this.makePhoneCall();
}
}
/**
* 打开企业微信客服
* @param {boolean} useOriginalService 是否使用原有客服方式
* @param {Object} servicerConfig 客服配置
* @param {Object} options 选项参数
*/
openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) {
const config = servicerConfig || this.getPlatformConfig();
const wxworkConfig = this.getWxworkConfig();
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
// #ifdef MP-WEIXIN
if (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) {
wx.navigateToMiniProgram({
appId: 'wxeb490c6f9b154ef9',
path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`,
success: () => console.log('跳转企业微信成功'),
fail: (err) => {
console.error('跳转企业微信失败:', err);
this.fallbackToOriginalService();
}
});
} else {
wx.openCustomerServiceChat({
extInfo: { url: config.wxwork_url },
corpId: config.corpid,
showMessageCard: true,
sendMessageTitle,
sendMessagePath,
sendMessageImg
});
}
// #endif
// #ifdef H5
if (wxworkConfig?.enable && wxworkConfig?.contact_url) {
window.location.href = wxworkConfig.contact_url;
} else if (config.wxwork_url) {
location.href = config.wxwork_url;
} else {
this.fallbackToPhoneCall();
}
// #endif
}
/**
* 打开第三方客服
* @param {Object} config 客服配置
*/
openThirdService(config) {
if (config.third_url) {
window.location.href = config.third_url;
} else {
this.fallbackToPhoneCall();
}
}
/**
* 打开牛商客服
* @param {Object} niushop 牛商参数
*/
openNiushopService(niushop) {
if (Object.keys(niushop).length > 0) {
this.vm.$util.redirectTo('/pages_tool/chat/room', niushop);
} else {
this.makePhoneCall();
}
}
/**
* 打开微信小程序客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
openWeappService(config, options = {}) {
if (!this.shouldUseCustomService(config)) {
console.log('使用官方微信小程序客服');
return;
}
console.log('使用自定义微信小程序客服');
this.handleCustomWeappService(config, options);
}
/**
* 处理自定义微信小程序客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
handleCustomWeappService(config, options = {}) {
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
if (config.customServiceUrl) {
let url = config.customServiceUrl;
const params = [];
if (sendMessageTitle) params.push(`title=${encodeURIComponent(sendMessageTitle)}`);
if (sendMessagePath) params.push(`path=${encodeURIComponent(sendMessagePath)}`);
if (sendMessageImg) params.push(`img=${encodeURIComponent(sendMessageImg)}`);
if (params.length > 0) {
url += (url.includes('?') ? '&' : '?') + params.join('&');
}
uni.navigateTo({
url: url,
fail: (err) => {
console.error('跳转自定义客服页面失败:', err);
this.tryThirdPartyService(config, options);
}
});
return;
}
this.tryThirdPartyService(config, options);
}
/**
* 尝试使用第三方客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
tryThirdPartyService(config, options = {}) {
if (config.thirdPartyServiceUrl) {
// #ifdef H5
window.open(config.thirdPartyServiceUrl, '_blank');
// #endif
// #ifdef MP-WEIXIN
if (config.thirdPartyMiniAppId) {
wx.navigateToMiniProgram({
appId: config.thirdPartyMiniAppId,
path: config.thirdPartyMiniAppPath || '',
fail: (err) => {
console.error('跳转第三方小程序失败:', err);
this.fallbackToPhoneCall();
}
});
} else {
uni.setClipboardData({
data: config.thirdPartyServiceUrl,
success: () => {
uni.showModal({
title: '客服链接已复制',
content: '客服链接已复制到剪贴板,请在浏览器中粘贴访问',
showCancel: false
});
}
});
}
// #endif
return;
}
this.fallbackToPhoneCall();
}
/**
* 降级到电话客服
*/
fallbackToPhoneCall() {
uni.showModal({
title: '联系客服',
content: '在线客服暂时不可用,是否拨打电话联系客服?',
success: (res) => {
if (res.confirm) {
this.makePhoneCall();
}
}
});
}
/**
* 打开支付宝小程序客服
* @param {Object} config 客服配置
*/
openAliappService(config) {
console.log('支付宝小程序客服', config);
switch (config.type) {
case 'aikefu':
this.openDifyService();
break;
case 'third':
this.openThirdService(config);
break;
default:
console.log('使用支付宝官方客服');
break;
}
}
/**
* 拨打电话
*/
makePhoneCall() {
this.vm.$api.sendRequest({
url: '/api/site/shopcontact',
success: res => {
if (res.code === 0 && res.data?.mobile) {
uni.makePhoneCall({
phoneNumber: res.data.mobile
});
} else {
uni.showToast({
title: '暂无客服电话',
icon: 'none'
});
}
},
fail: () => {
uni.showToast({
title: '获取客服电话失败',
icon: 'none'
});
}
});
}
/**
* 显示无客服弹窗
*/
showNoServicePopup() {
const siteInfo = this.vm.$store.state.siteInfo || {};
const message = siteInfo?.site_tel
? `请联系客服,客服电话是${siteInfo.site_tel}`
: '抱歉,商家暂无客服,请线下联系';
uni.showModal({
title: '联系客服',
content: message,
showCancel: false
});
}
/**
* 显示配置错误弹窗
* @param {Array} errors 错误列表
*/
showConfigErrorPopup(errors) {
const message = errors.join('\n');
uni.showModal({
title: '配置错误',
content: `客服配置有误:\n${message}`,
showCancel: false
});
}
/**
* 降级处理:使用原有客服方式
*/
fallbackToOriginalService() {
uni.showModal({
title: '提示',
content: '无法直接添加企业微信客服,是否使用其他方式联系客服?',
success: (res) => {
if (res.confirm) {
this.openWxworkService(true);
}
}
});
}
/**
* 获取客服按钮配置
* @returns {Object} 按钮配置
*/
getButtonConfig() {
const config = this.getPlatformConfig();
if (!config) return { openType: '' };
let openType = '';
// #ifdef MP-WEIXIN
if (config.type === 'weapp') {
openType = config.useOfficial !== false ? 'contact' : '';
}
// #endif
// #ifdef MP-ALIPAY
if (config.type === 'aliapp') openType = 'contact';
// #endif
return { ...config, openType };
}
/**
* 判断是否应该使用自定义客服处理
* @param {Object} config 客服配置
* @returns {boolean} 是否使用自定义客服
*/
shouldUseCustomService(config) {
// #ifdef MP-WEIXIN
if (config?.type === 'weapp') {
return config.useOfficial === false;
}
// #endif
return true;
}
}
/**
* 创建客服服务实例
* @param {Object} vueInstance Vue实例
* @param {Object} externalConfig 外部最新配置
* @returns {CustomerService} 客服服务实例
*/
export function createCustomerService(vueInstance, externalConfig = null) {
return new CustomerService(vueInstance, externalConfig);
}

View File

@@ -1,7 +1,14 @@
import WxMap from 'common/js/map-wx-jssdk.js';
import { QQMapWX } from 'common/js/map-wx-jssdk.js';
import Config from '@/common/js/config.js';
let systemInfo = uni.getSystemInfoSync();
let systemInfo = {};
try {
// 合并设备信息和窗口信息
systemInfo = {...uni.getDeviceInfo(), ...uni.getWindowInfo()};
} catch (e) {
// 兼容旧版本
systemInfo = uni.getSystemInfoSync();
}
export default {
data() {
return {
@@ -35,6 +42,7 @@ export default {
latitude: null, // 纬度
longitude: null, // 经度
currentPosition: '', // 当前位置
currentStore: null,//当前门店
nearestStore: null, // 离自己最近的门店
storeTimeOut: null, // 没有获取到定位,则获取默认门店
@@ -43,19 +51,26 @@ export default {
diyRoute: '', // 页面路由
openBottomNav: false,
isShowCopyRight: false,
option: null,
firstDiy: true,
//启动广告
adv:{},
adv: {},
};
},
onLoad(option) {
this.option = option;
uni.hideTabBar();
// 支付宝小程序传参处理
// #ifdef MP-ALIPAY
let aliapp_option = my.getLaunchOptionsSync();
aliapp_option.query && Object.assign(option, aliapp_option.query);
// #endif
if (option.source_member) uni.setStorageSync('source_member', option.source_member);
// 小程序扫码进入
if (option.scene) {
// 处理分享人数据
if (option.source_member) uni.setStorageSync('source_member', option.source_member);// 分享链接进入
if (option.scene) {// 小程序扫码进入
var sceneParams = decodeURIComponent(option.scene);
sceneParams = sceneParams.split('&');
if (sceneParams.length) {
@@ -65,64 +80,36 @@ export default {
}
}
// H5地图选择位置回调
// #ifdef H5
// H5地图选择位置回调数据
if (option.module && option.module == 'locationPicker') {
option.name = ''; // 清空地址
option.name = ''; // 自定义页面传参id和name防止获取地址时变量混淆
this.locationModule = option.module;
this.latitude = option.latng.split(',')[0];
this.longitude = option.latng.split(',')[1];
}
// #endif
//自定义页面的id和名称
this.id = option.id || 0;
this.name = option.name || '';
uni.removeStorageSync('manual_store_info'); // 清除手动切换门店缓存
uni.removeStorageSync('manual_change_store'); // 清楚手动切换门店标识
// H5才会执行
if (this.locationModule == 'locationPicker') {
// H5地图选址后的回调
this.getNearestStore();
this.getCurrentLocation();
} else if (this.mapConfig.wap_is_open == 1) {
// 每次都要定位,获取当前位置
/*this.$util.getLocation({
fail: (res) => {
// 拒绝定位,进入默认总店
this.enterDefaultStore();
}
});*/
// 如果3秒没有获取到定位则获取默认门店H5使用
// #ifdef H5
this.storeTimeOut = setTimeout(() => {
this.enterDefaultStore();
}, 1000 * 3);
// #endif
} else {
// 关闭定位
this.enterDefaultStore();
//获取当前门店信息 必须是首页且不是手动切换操作
let current_route = this.$util.getCurrentRoute();
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
if (current_route.path.indexOf('/pages/index/index') > -1 && !manualChangeStore) {
this.getCurrentStore(option);
}
},
onShow() {
this.init();
async onShow() {
if (this.firstDiy) {
this.firstDiy = false;
await this.getDiyMethod();
}
await this.onShowMethod();
},
onHide() {
if (this.storeTimeOut) {
clearTimeout(this.storeTimeOut);
}
// 跳转页面要关闭门店弹出框
this.closeChooseStorePopup();
// 清除限时秒杀定时器
this.$store.commit('setDiySeckillInterval', 0);
},
@@ -149,7 +136,7 @@ export default {
return str;
},
backgroundUrl() {
var str = this.diyData.global.bgUrl && this.diyData.global.bgUrl != 'transparent' ? 'url(' + this.$util.img(this.diyData.global.bgUrl) + ') ' : '';
var str = this.diyData.global?.bgUrl && this.diyData.global?.bgUrl != 'transparent' ? 'url(' + this.$util.img(this.diyData.global?.bgUrl) + ') ' : '';
return str;
},
textNavColor() {
@@ -187,30 +174,34 @@ export default {
}
},
watch: {
location: function (nVal) {
if (nVal) {
/* location: function (nVal) {
if (nVal && !this.latitude && !this.longitude) {
this.latitude = nVal.latitude;
this.longitude = nVal.longitude;
this.getNearestStore();
this.getCurrentLocation();
this.getStoreInfoByLocation();
}
}, */
initStatus: function (val) {
if (!this.option.store_id) this.getLocation();
}
},
methods: {
play(){
console.log(123)
async getDiyMethod() {
await this.getDiyInfo();
this.$store.commit('setDiySeckillInterval', 1);
this.$store.commit('setComponentRefresh');
},
async init() {
async onShowMethod() {
// 定位信息过期后,重新获取定位
if(this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
this.$util.getLocation({
fail: (res) => {
// 拒绝定位,进入默认总店
this.enterDefaultStore();
}
});
}
// if (this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
// this.$util.getLocation({
// fail: (res) => {
// // 失败了不需要做任何处理,保持之前的门店选择即可
// }
// });
// }
if (this.storeToken) {
//记录分享关系
@@ -225,17 +216,15 @@ export default {
this.$store.commit('setDiySeckillInterval', 1);
//小程序分享
// #ifdef MP-WEIXIN
this.$util.getMpShare().then(res => {
this.mpShareData = res;
});
// #endif
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
if (manualChangeStore) {
uni.removeStorageSync('manual_change_store');
let manualStoreInfo = uni.getStorageSync('manual_store_info'); // 手动选择门店
uni.removeStorageSync('manual_store_info');
if (manualStoreInfo) {
this.currentStore = manualStoreInfo;
}
this.closeGetLocationFailPopup();
// 滚动至顶部
uni.pageScrollTo({
duration: 200,
@@ -267,8 +256,14 @@ export default {
query.select('.page-header').boundingClientRect(data => {
if (data && data.height) {
// 从状态栏高度开始算
this.paddingTop = data.height + 'px';
this.marginTop = -data.height + 'px';
if (!this.diyData.global.topNavBg) {
this.paddingTop = 0;
this.marginTop = 0;
} else {
this.paddingTop = data.height + 'px';
this.marginTop = -data.height + 'px';
}
clearInterval(time);
}
}).exec();
@@ -276,7 +271,7 @@ export default {
}, 50);
// #endif
},
async getDiyAdv(){
async getDiyAdv() {
//启动广告
let res = await this.$api.sendRequest({
url: '/api/diyview/getstartadv',
@@ -285,13 +280,13 @@ export default {
});
this.adv = res.value
// 弹框形式,首次弹出 1每次弹出 0
if(this.adv.advshow == 1){
if (this.adv.advshow == 1) {
setTimeout(() => {
if (res.value.advtype == 1) {
var popwindow_count = uni.getStorageSync(this.id + this.name + '_popwindow_count');
if ((this.$refs.uniPopupWindow && popwindow_count == '') || (
this.$refs.uniPopupWindow && popwindow_count == 1)) {
this.$refs.uniPopupWindow.open();
uni.setStorageSync(this.id + this.name + '_popwindow_count', 1);
}
@@ -301,7 +296,7 @@ export default {
}
}, 500);
}
},
async getDiyInfo() {
let res = await this.$api.sendRequest({
@@ -309,7 +304,7 @@ export default {
data: {
id: this.id,
name: this.name,
en_type:uni.getStorageSync("lang"),//获取语言底部
en_type: uni.getStorageSync("lang"),//获取语言底部
},
async: false
});
@@ -337,7 +332,7 @@ export default {
this.$langConfig.title(this.diyData.global.title);
this.mpCollect = this.diyData.global.mpCollect;
this.setPublicShare();
/* if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
// 弹框形式,首次弹出 1每次弹出 0
setTimeout(() => {
if (this.diyData.global.popWindow.count == 1) {
@@ -352,7 +347,7 @@ export default {
uni.setStorageSync(this.id + this.name + '_popwindow_count', 0);
}
}, 500);
}*/
}
// 修改diy数据结构排序
let searchIndex = -1;
@@ -375,14 +370,15 @@ export default {
this.diyData.value.splice(topCategoryIndex, 1);
this.diyData.value.splice(0, 0, ...topCategoryData);
this.diyData.value.splice(1, 0, ...searchData);
} else
} else {
this.diyData.value.splice(0, 0, ...searchData);
}
} else if (searchIndex != -1 && topCategoryIndex == -1) {
let searchData = this.diyData.value.slice(searchIndex, searchIndex + 1);
this.diyData.value.splice(searchIndex, 1);
this.diyData.value.splice(0, 0, ...searchData);
}
this.topIndexValue = null;
for (var i = 0; i < this.diyData.value.length; i++) {
// 分类导航组件
if (this.diyData.value[i].componentName == 'TopCategory') {
@@ -402,7 +398,6 @@ export default {
}
}
// #ifdef MP
//小程序收藏
if (!uni.getStorageSync('isCollect') && this.diyData.global.mpCollect) {
@@ -416,6 +411,45 @@ export default {
this.openBottomNav = this.diyData.global.openBottomNav;
}
this.isShowCopyRight = true;
//小程序分享
// #ifdef MP-WEIXIN
let path = this.$util.getCurrentRoute().path;
if (path == '/pages/member/index') {
this.mpShareData = {};
return;
}
let share_path = path;
if (this.$store.state.memberInfo && this.$store.state.memberInfo.member_id) {
share_path = this.$util.getCurrentShareRoute(this.$store.state.memberInfo.member_id).path
}
let appMessageData = {
title: this.diyData.global.weappShareTitle,
path: share_path,
imageUrl: this.$util.img(this.diyData.global.weappShareImage),
success: res => { },
fail: res => { }
}
let timeLineData = {
title: this.diyData.global.weappShareTitle,
query: share_path,
imageUrl: this.$util.img(this.diyData.global.weappShareImage),
}
this.mpShareData = {
appMessage: appMessageData,
timeLine: timeLineData
};
//console.log(this.mpShareData, 'this.mpShareData');
var store_info = this.$store.state.globalStoreInfo;
if (store_info) {
this.mpShareData.appMessage.path += (this.mpShareData.appMessage.path.indexOf('?') > -1 ? '&' : '?') + 'store_id=' + store_info.store_id;
this.mpShareData.timeLine.query += (this.mpShareData.timeLine.query.indexOf('?') > -1 ? '&' : '?') + 'store_id=' + store_info.store_id;
}
//朋友圈不需要页面路径,只要要后面的参数就行
this.mpShareData.timeLine.query = this.mpShareData.timeLine.query.split('?')[1] || '';
// #endif
}
},
closePopupWindow() {
@@ -430,44 +464,131 @@ export default {
this.$util.diyRedirectTo(this.diyData.global.popWindow.link);
this.closePopupWindow();
},
openChooseStorePopup() {
if (this.globalStoreConfig && this.globalStoreConfig.confirm_popup_control == 1) {
let storeInfo = this.globalStoreInfo;
// 首次进入门店,没有门店信息 || 当前位置的门店和缓存门店不一致要弹框
if (!storeInfo || storeInfo && this.nearestStore && storeInfo.store_id != this.nearestStore.store_id) {
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.open();
/******************************************** 获取门店相关 START ***************************************************/
/**
* 1、分享携带门店id
* 门店id正确 进入门店
* 门店id错误 通过定位获取门店
* 2、通过定位获取门店
* 开启获取定位
* 同意获取定位 获取最近门店 进入门店
* 拒绝获取定位
* 平台运营模式 进入默认门店
* 连锁门店模式 提示获取定位失败,手动选择门店或引导去开启定位
* 关闭获取定位
* 平台运营模式 进入默认门店
* 连锁门店模式 提示获取定位失败,手动选择门店
*/
getCurrentStore(option) {
if (option.store_id && !isNaN(parseInt(option.store_id))) {
this.getStoreInfoByShare(option.store_id);
} else {
this.getLocation();
}
},
getStoreInfoByShare(store_id) {
this.$api.sendRequest({
url: '/api/store/info',
data: { store_id },
success: res => {
if (res.code >= 0 && res.data) {
this.changeCurrentStore(res.data);
} else {
this.getLocation();
}
},
fail: res => {
this.getLocation();
}
});
},
getLocation() {
if (!this.latitude && !this.longitude && this.initStatus) {
if (this.mapConfig.wap_is_open == 1) {
this.$util.getLocation({
complete: (res) => {
if (res.latitude && res.longitude) {
this.closeGetLocationFailPopup();
this.latitude = res.latitude;
this.longitude = res.longitude;
this.getStoreInfoByLocation();
} else {
let is_h5 = false;
// #ifdef H5
is_h5 = true;
// #endif
if (is_h5) {
//H5同意了也会进入失败所以直接进入默认门店
this.enterDefaultStore();
} else {
this.getLocationFail();
}
}
}
});
// #ifdef H5
//H5有的机型可能根本不会触发getLocation的任何执行包括successfailcompletele
//所以这里如果等待一定时间后还是没有获取到当前门店则进入默认门店
setTimeout(() => {
let current_route = this.$util.getCurrentRoute();
if (this.mapConfig.wap_is_open == 1 && !this.currentStore && current_route.path == '/pages/index/index') {
this.enterDefaultStore();
}
}, 5000);
// #endif
} else {
this.getLocationFail();
}
}
let manualStoreInfo = uni.getStorageSync('manual_store_info'); // 手动选择门店
if (manualStoreInfo) {
this.nearestStore = manualStoreInfo;
},
getStoreInfoByLocation() {
if (this.latitude && this.longitude) {
this.getNearestStore();
this.getCurrentLocation();
}
},
changeCurrentStore(store_info) {
this.currentStore = store_info;
this.changeStore(store_info);
this.openChooseStorePopup();
},
getLocationFail() {
if (this.globalStoreConfig.store_business == 'shop') {
this.enterDefaultStore();
} else {
this.openGetLocationFailPopup();
}
},
openGetLocationFailPopup() {
if (this.$refs.getLocationFailRef) this.$refs.getLocationFailRef.open();
},
closeGetLocationFailPopup() {
if (this.$refs.getLocationFailRef) this.$refs.getLocationFailRef.close();
},
openChooseStorePopup() {
let globalStoreInfo = this.globalStoreInfo;
if (this.globalStoreConfig && this.globalStoreConfig.confirm_popup_control == 1) {
this.currentStore.show_address = this.currentStore.full_address.replace(/,/g, ' ') + ' ' + this.currentStore.address;
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.open();
}
this.changeStore(this.nearestStore); // 切换门店数据
},
closeChooseStorePopup() {
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.close();
},
// 确认进入门店
enterStore() {
this.closeChooseStorePopup();
},
// 选择其他门店
chooseOtherStore() {
this.$util.redirectTo('/pages_tool/store/list');
this.closeChooseStorePopup();
},
// 打开地图重新选择位置
reposition() {
reGetLocation() {
// #ifdef MP
/*uni.chooseLocation({
uni.chooseLocation({
success: res => {
this.latitude = res.latitude;
this.longitude = res.longitude;
this.currentPosition = res.name;
this.getNearestStore();
this.getCurrentLocation();
this.getStoreInfoByLocation();
},
fail(res) {
uni.getSetting({
@@ -492,8 +613,7 @@ export default {
this.latitude = res.latitude;
this.longitude = res.longitude;
this.currentPosition = res.name;
this.getNearestStore();
this.getCurrentLocation();
this.getStoreInfoByLocation();
}
});
}, 1000);
@@ -511,7 +631,7 @@ export default {
}
});
}
});*/
});
// #endif
// #ifdef H5
@@ -532,9 +652,7 @@ export default {
data: data,
success: res => {
if (res.code == 0 && res.data) {
this.nearestStore = res.data;
this.nearestStore.show_address = this.nearestStore.full_address.replace(/,/g, ' ') + ' ' + this.nearestStore.address;
this.openChooseStorePopup();
this.changeCurrentStore(res.data);
}
}
});
@@ -547,7 +665,6 @@ export default {
data.latitude = this.latitude;
data.longitude = this.longitude;
}
this.$api.sendRequest({
url: '/api/store/getLocation',
data: data,
@@ -563,26 +680,42 @@ export default {
// 定位失败,进入默认门店
enterDefaultStore() {
if (this.defaultStoreInfo) {
if (!this.nearestStore) {
this.nearestStore = this.defaultStoreInfo;
this.nearestStore.show_address = this.nearestStore.full_address.replace(/,/g, ' ') + ' ' + this.nearestStore.address;
}
if (this.currentPosition == '') this.currentPosition = '未获取到定位';
this.openChooseStorePopup();
this.changeCurrentStore(this.defaultStoreInfo);
}
},
//连锁门店未定位选择门店
chooseStore() {
this.$util.redirectTo('/pages_tool/store/list');
},
//打开手机设置重新定位
openSetting() {
uni.openSetting({
success: res => {
this.getLocation();
}
})
},
/******************************************** 获取门店相关 END ***************************************************/
// 设置公众号分享
setPublicShare() {
let shareUrl = this.$config.h5Domain + this.diyRoute;
if (this.id) shareUrl += '?id=' + this.id;
else if (this.name) shareUrl += '?name=' + this.name;
var store_info = this.$store.state.globalStoreInfo;
//if (store_info) shareUrl += '?store_id=' + store_info.store_id;
if (shareUrl.indexOf('?') > 0) {
shareUrl += '&';
} else {
shareUrl += '?';
}
if (this.id) shareUrl += 'id=' + this.id;
else if (this.name) shareUrl += 'name=' + this.name;
// alert('diydiydiy')
this.$util.setPublicShare({
title: this.diyData.global.title,
desc: '',
title: this.diyData.global.wechatShareTitle || this.diyData.global.title,
desc: this.diyData.global.wechatShareDesc,
link: shareUrl,
imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
imgUrl: this.diyData.global.wechatShareImage ? this.$util.img(this.diyData.global.wechatShareImage) : this.$util.img(this.siteInfo.logo_square)
});
}
},
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
@@ -597,6 +730,7 @@ export default {
// 下拉刷新
onPullDownRefresh() {
this.$store.commit('setComponentRefresh');
this.getDiyMethod();
setTimeout(() => {
uni.stopPullDownRefresh();
}, 50);

112
common/js/event-safety.js Normal file
View File

@@ -0,0 +1,112 @@
// 事件安全处理工具
export class EventSafety {
// 创建安全的事件对象
static createSafeEvent(originalEvent = {}) {
const safeEvent = {
type: originalEvent.type || 'unknown',
timeStamp: originalEvent.timeStamp || Date.now(),
detail: originalEvent.detail || {},
// 安全的目标对象
get target() {
return EventSafety.createSafeTarget(originalEvent.target)
},
get currentTarget() {
return EventSafety.createSafeTarget(originalEvent.currentTarget)
},
// 安全的 matches 方法
matches(selector) {
return EventSafety.safeMatches(originalEvent.target, selector)
}
}
return new Proxy(safeEvent, {
get(obj, prop) {
// 防止访问不存在的属性
if (prop in obj) {
return obj[prop]
}
return undefined
}
})
}
// 创建安全的目标对象
static createSafeTarget(target) {
if (!target || typeof target !== 'object') {
return EventSafety.getFallbackTarget()
}
const safeTarget = {
// 基础属性
tagName: target.tagName || '',
id: target.id || '',
className: target.className || '',
// 安全的方法
matches: (selector) => EventSafety.safeMatches(target, selector),
// 数据集
dataset: target.dataset || {}
}
return safeTarget
}
// 安全的 matches 检查
static safeMatches(element, selector) {
if (!element || typeof element.matches !== 'function') {
return false
}
try {
return element.matches(selector)
} catch (error) {
console.warn('matches 检查失败:', error)
return false
}
}
// 回退目标对象
static getFallbackTarget() {
return {
tagName: '',
id: '',
className: '',
matches: () => false,
dataset: {}
}
}
// 包装事件处理器
static wrapEventHandler(handler, options = {}) {
return function(event) {
try {
// 创建安全的事件对象
const safeEvent = EventSafety.createSafeEvent(event)
return handler.call(this, safeEvent)
} catch (error) {
console.error('事件处理错误:', error)
// 可选的错误处理
if (options.onError) {
options.onError(error, event, this)
}
}
}
}
// 验证事件类型
static isValidEventType(event, expectedType) {
return event && event.type === expectedType
}
// 提取安全的事件数据
static extractEventData(event, fields = ['type', 'timeStamp', 'detail']) {
const result = {}
fields.forEach(field => {
if (event && field in event) {
result[field] = event[field]
}
})
return result
}
}

View File

@@ -1,371 +1,382 @@
// 商品详情业务
import htmlParser from '@/common/js/html-parser';
export default {
data() {
return {
skuId: 0,
goodsId: 0,
// 商品详情
goodsSkuDetail: {
goods_id: 0,
goods_service: []
},
preview: 0, //是否开启预览0不开启1开启
//评价
contactData: {
title: '',
path: '',
img: ''
},
shareQuery: '', // 分享参数
shareUrl: '', // 分享链接
source_member: 0, //分享人的id
chatRoomParams: {}, // 联系客服参数
isIphoneX: false, //判断手机是否是iphoneX以上
whetherCollection: 0,
posterParams: {}, //海报所需参数
shareImg: '',
navbarData: {
title: '',
topNavColor: "#ffffff",
topNavBg: false,
navBarSwitch: true, // 导航栏是否显示
textNavColor: "#333333",
moreLink: {
name: ""
},
navStyle: 1,
bgUrl: '',
textImgPosLink: 'left'
},
}
},
onLoad(data) {
//刷新多语言
this.$langConfig.refresh();
// #ifdef MP-ALIPAY
let options = my.getLaunchOptionsSync();
options.query && Object.assign(data, options.query);
// #endif
this.preview = data.preview || 0;
this.isIphoneX = this.$util.uniappIsIPhoneX();
if (data.source_member) {
uni.setStorageSync('source_member', data.source_member);
this.source_member = data.source_member;
}
//记录分享关系
if (this.storeToken && uni.getStorageSync('source_member')) {
this.$util.onSourceMember(uni.getStorageSync('source_member'));
}
// 小程序扫码进入
if (data.scene) {
var sceneParams = decodeURIComponent(data.scene);
sceneParams = sceneParams.split('&');
if (sceneParams.length) {
sceneParams.forEach(item => {
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
});
}
}
},
onShow() {
},
methods: {
// 处理商品详情数据
handleGoodsSkuData() {
// this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
//设置标题
// this.$langConfig.title(this.navbarData.title);
if (this.goodsSkuDetail.config) {
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
}
this.whetherCollection = this.goodsSkuDetail.is_collect; // 用户关注商品状态
this.modifyGoodsInfo();
// 初始化商品详情视图数据
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
sku_id: this.skuId,
goods_id: this.goodsSkuDetail.goods_id,
preview: this.preview,
source_member: this.source_member,
posterParams: this.posterParams,
posterApi: this.posterApi,
shareUrl: this.shareUrl,
goodsRoute: this.goodsRoute,
isVirtual: this.goodsSkuDetail.is_virtual,
deliveryType: this.goodsSkuDetail.express_type,
whetherCollection: this.goodsSkuDetail.is_collect,
evaluateConfig: this.goodsSkuDetail.evaluate_config,
evaluateList: this.goodsSkuDetail.evaluate_list,
evaluateCount: this.goodsSkuDetail.evaluate_count
});
//媒体
if (this.goodsSkuDetail.video_url) this.switchMedia = "video";
if (!Array.isArray(this.goodsSkuDetail.sku_images)) {
if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
else this.goodsSkuDetail.sku_images = [];
}
// 多规格时合并主图
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
if (!Array.isArray(this.goodsSkuDetail.goods_image)) this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
this.goodsSkuDetail.sku_images = this.goodsSkuDetail.goods_image.concat(this.goodsSkuDetail.sku_images);
}
let maxHeight = '';
let systemInfo = uni.getSystemInfoSync();
this.goodsSkuDetail.goods_image_list.forEach((item, index) => {
if (typeof item.pic_spec == "string")
item.pic_spec = item.pic_spec.split('*');
let ratio = item.pic_spec[0] / systemInfo.windowWidth;
item.pic_spec[0] = item.pic_spec[0] / ratio;
item.pic_spec[1] = item.pic_spec[1] / ratio;
if (!maxHeight || maxHeight > item.pic_spec[1]) {
maxHeight = item.pic_spec[1];
}
});
this.goodsSkuDetail.swiperHeight = maxHeight + 'px';
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
// 当前商品SKU规格
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
// 商品属性
if (this.goodsSkuDetail.goods_attr_format) {
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
for (var j = 0; j < goods_attr_format.length; j++) {
if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id) {
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
}
}
}
}
// 商品SKU格式
if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
// 商品详情
if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = (this.goodsSkuDetail.goods_content);
console.log(this.goodsSkuDetail.goods_content)
// if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);
//商品服务
if (this.goodsSkuDetail.goods_service) {
for (let i in this.goodsSkuDetail.goods_service) {
this.goodsSkuDetail.goods_service[i]['icon'] = this.goodsSkuDetail.goods_service[i]['icon'] ? JSON.parse(this.goodsSkuDetail.goods_service[i]['icon']) : '';
}
}
this.contactData = {
title: this.goodsSkuDetail.sku_name,
path: this.shareUrl,
img: this.$util.img(this.goodsSkuDetail.sku_image, {
size: 'big'
})
};
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
if (this.goodsRoute != '/pages/goods/detail') this.setPublicShare();
// this.getBarrageData();
if (this.addonIsExist.form) {
this.getGoodsForm();
}
},
/**
* 刷新商品详情数据
* @param {Object} data
*/
refreshGoodsSkuDetail(data) {
this.goodsSkuDetail = Object.assign({}, this.goodsSkuDetail, data);
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
if (this.$refs.goodsDetailView) {
// 初始化商品详情视图数据
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
// 解决轮播图数量不一致时,切换到第一个
if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) {
this.swiperAutoplay = true;
this.swiperCurrent = 1;
setTimeout(() => {
this.swiperAutoplay = false;
}, 40);
}
}
this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
this.$langConfig.title(this.navbarData.title);
if (this.goodsSkuDetail.membercard) {
this.membercard = this.goodsSkuDetail.membercard;
}
},
goodsDetailViewInit() {
// 初始化商品详情视图数据
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
sku_id: this.skuId,
goods_id: this.goodsSkuDetail.goods_id,
preview: this.preview,
source_member: this.source_member,
posterParams: this.posterParams,
posterApi: this.posterApi,
shareUrl: this.shareUrl,
goodsRoute: this.goodsRoute,
isVirtual: this.goodsSkuDetail.is_virtual,
deliveryType: this.goodsSkuDetail.express_type,
whetherCollection: this.goodsSkuDetail.is_collect,
evaluateConfig: this.goodsSkuDetail.evaluate_config,
evaluateList: this.goodsSkuDetail.evaluate_list,
evaluateCount: this.goodsSkuDetail.evaluate_count
});
},
goHome() {
if (this.preview) return; // 开启预览,禁止任何操作和跳转
this.$util.redirectTo('/pages/index/index');
},
goCart() {
if (this.preview) return; // 开启预览,禁止任何操作和跳转
this.$util.redirectTo('/pages/goods/cart');
},
//-------------------------------------关注-------------------------------------
//更新商品信息
modifyGoodsInfo() {
if (this.preview) return; // 开启预览,禁止任何操作和跳转
//更新商品点击量
this.$api.sendRequest({
url: "/api/goods/modifyclicks",
data: {
sku_id: this.skuId
},
success: res => {
}
});
//添加足迹
this.$api.sendRequest({
url: "/api/goodsbrowse/add",
data: {
goods_id: this.goodsSkuDetail.goods_id,
sku_id: this.skuId
},
success: res => {
}
});
},
//-------------------------------------关注-------------------------------------
async editCollection() {
if (this.$refs.goodsDetailView) {
this.whetherCollection = await this.$refs.goodsDetailView.collection();
}
},
openSharePopup() {
if (this.$refs.goodsDetailView) {
this.$refs.goodsDetailView.openSharePopup();
}
},
//弹幕
getBarrageData() {
this.$api.sendRequest({
url: '/api/goods/goodsbarrage',
data: {
goods_id: this.goodsSkuDetail.goods_id
},
success: res => {
if (res.code == 0 && res.data) {
let barrageData = [];
for (let i in res.data.list) {
if (res.data.list[i]['title']) {
let title = res.data.list[i]['title'].substr(0, 1) + '*' + res.data.list[i]['title'].substr(res.data.list[i]['title'].length - 1, 1)
barrageData.push({
img: res.data.list[i]['img'] ? res.data.list[i]['img'] : this.$util.getDefaultImage().head,
title: title + '已下单'
});
}
}
this.goodsSkuDetail.barrageData = barrageData;
}
}
});
},
/**
* 设置公众号分享
*/
setPublicShare() {
let shareUrl = this.$config.h5Domain + this.shareUrl;
if (this.memberInfo && this.memberInfo.member_id) shareUrl += '&source_member=' + this.memberInfo.member_id;
this.$util.setPublicShare({
title: this.goodsSkuDetail.goods_name,
desc: '',
link: shareUrl,
imgUrl: typeof this.goodsSkuDetail.goods_image == 'object' ? this.goodsSkuDetail.goods_image[0] : this.goodsSkuDetail.goods_image.split(',')[0]
})
},
/**
* 获取商品表单
*/
getGoodsForm() {
this.$api.sendRequest({
url: "/form/api/form/goodsform",
data: {
goods_id: this.goodsSkuDetail.goods_id
},
success: res => {
if (res.code == 0 && res.data) this.$set(this.goodsSkuDetail, 'goods_form', res.data);
}
});
}
},
/**
* 自定义分享内容
* @param {Object} res
*/
onShareAppMessage(res) {
var path = this.shareUrl;
if (this.memberInfo && this.memberInfo.member_id) path += '&source_member=' + this.memberInfo.member_id;
return {
title: this.goodsSkuDetail.sku_name,
imageUrl: this.shareImg ? this.$util.img(this.shareImg) : this.$util.img(this.goodsSkuDetail.sku_image, {
size: 'big'
}),
path: path,
success: res => {
},
fail: res => {
}
};
},
// 分享到微信朋友圈
// #ifdef MP-WEIXIN
onShareTimeline() {
let query = this.shareQuery;
if (this.memberInfo && this.memberInfo.member_id) query += '&source_member=' + this.memberInfo.member_id;
return {
title: this.goodsSkuDetail.sku_name,
query: query,
imageUrl: this.$util.img(this.goodsSkuDetail.sku_image, {
size: 'big'
})
};
}
// #endif
// 商品详情业务
import htmlParser from '@/common/js/html-parser';
export default {
data() {
return {
skuId: 0,
goodsId: 0,
// 商品详情
goodsSkuDetail: {
goods_id: 0,
goods_service: []
},
preview: 0, //是否开启预览0不开启1开启
//评价
contactData: {
title: '',
path: '',
img: ''
},
shareQuery: '', // 分享参数
shareUrl: '', // 分享链接
source_member: 0, //分享人的id
chatRoomParams: {}, // 联系客服参数
isIphoneX: false, //判断手机是否是iphoneX以上
whetherCollection: 0,
posterParams: {}, //海报所需参数
shareImg: '',
navbarData: {
title: '',
topNavColor: "#ffffff",
topNavBg: false,
navBarSwitch: true, // 导航栏是否显示
textNavColor: "#333333",
moreLink: {
name: ""
},
navStyle: 1,
bgUrl: '',
textImgPosLink: 'left'
},
goodsFormVal: []
}
},
onLoad(data) {
//刷新多语言
this.$langConfig.refresh();
// #ifdef MP-ALIPAY
let options = my.getLaunchOptionsSync();
options.query && Object.assign(data, options.query);
// #endif
this.preview = data.preview || 0;
this.isIphoneX = this.$util.uniappIsIPhoneX();
if (data.source_member) {
uni.setStorageSync('source_member', data.source_member);
this.source_member = data.source_member;
}
//记录分享关系
if (this.storeToken && uni.getStorageSync('source_member')) {
this.$util.onSourceMember(uni.getStorageSync('source_member'));
}
// 小程序扫码进入
if (data.scene) {
var sceneParams = decodeURIComponent(data.scene);
sceneParams = sceneParams.split('&');
if (sceneParams.length) {
sceneParams.forEach(item => {
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
});
}
}
},
onShow() {
},
methods: {
detailChangeVal(data) {
this.goodsFormVal = data;
},
// 处理商品详情数据
handleGoodsSkuData() {
this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
this.$langConfig.title(this.navbarData.title);
if (this.goodsSkuDetail.config) {
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
}
this.whetherCollection = this.goodsSkuDetail.is_collect; // 用户关注商品状态
this.modifyGoodsInfo();
// 初始化商品详情视图数据
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
sku_id: this.skuId,
goods_id: this.goodsSkuDetail.goods_id,
preview: this.preview,
source_member: this.source_member,
posterParams: this.posterParams,
posterApi: this.posterApi,
shareUrl: this.shareUrl,
goodsRoute: this.goodsRoute,
isVirtual: this.goodsSkuDetail.is_virtual,
deliveryType: this.goodsSkuDetail.express_type,
whetherCollection: this.goodsSkuDetail.is_collect,
evaluateConfig: this.goodsSkuDetail.evaluate_config,
evaluateList: this.goodsSkuDetail.evaluate_list,
evaluateCount: this.goodsSkuDetail.evaluate_count,
goods_class : this.goodsSkuDetail.goods_class,
sale_store: this.goodsSkuDetail.sale_store
});
//媒体
if (this.goodsSkuDetail.video_url) this.switchMedia = "video";
if (!Array.isArray(this.goodsSkuDetail.sku_images)) {
if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
else this.goodsSkuDetail.sku_images = [];
}
// 多规格时合并主图
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
if (!Array.isArray(this.goodsSkuDetail.goods_image)) this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
this.goodsSkuDetail.sku_images = this.goodsSkuDetail.goods_image.concat(this.goodsSkuDetail.sku_images);
}
let maxHeight = '';
let systemInfo = uni.getSystemInfoSync();
this.goodsSkuDetail.goods_image_list.forEach((item, index) => {
if (typeof item.pic_spec == "string")
item.pic_spec = item.pic_spec.split('*');
let ratio = item.pic_spec[0] / systemInfo.windowWidth;
item.pic_spec[0] = item.pic_spec[0] / ratio;
item.pic_spec[1] = item.pic_spec[1] / ratio;
if (!maxHeight || maxHeight > item.pic_spec[1]) {
maxHeight = item.pic_spec[1];
}
});
this.goodsSkuDetail.swiperHeight = maxHeight + 'px';
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
// 当前商品SKU规格
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
// 商品属性
if (this.goodsSkuDetail.goods_attr_format) {
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
for (var j = 0; j < goods_attr_format.length; j++) {
if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id) {
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
}
}
}
}
// 商品SKU格式
if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
// 商品详情
if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = (this.goodsSkuDetail.goods_content);
console.log(this.goodsSkuDetail.goods_content)
// if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);
//商品服务
if (this.goodsSkuDetail.goods_service) {
for (let i in this.goodsSkuDetail.goods_service) {
this.goodsSkuDetail.goods_service[i]['icon'] = this.goodsSkuDetail.goods_service[i]['icon'] ? JSON.parse(this.goodsSkuDetail.goods_service[i]['icon']) : '';
}
}
this.contactData = {
title: this.goodsSkuDetail.sku_name,
path: this.shareUrl,
img: this.$util.img(this.goodsSkuDetail.sku_image, {
size: 'big'
})
};
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
this.setPublicShare();
// if (this.goodsRoute != '/pages/goods/detail') this.setPublicShare();
this.getBarrageData();
if (this.addonIsExist.form) {
this.getGoodsForm();
}
},
/**
* 刷新商品详情数据
* @param {Object} data
*/
refreshGoodsSkuDetail(data) {
this.goodsSkuDetail = Object.assign({}, this.goodsSkuDetail, data);
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
if (this.$refs.goodsDetailView) {
// 初始化商品详情视图数据
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
// 解决轮播图数量不一致时,切换到第一个
if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) {
this.swiperAutoplay = true;
this.swiperCurrent = 1;
setTimeout(() => {
this.swiperAutoplay = false;
}, 40);
}
}
this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
this.$langConfig.title(this.navbarData.title);
if (this.goodsSkuDetail.membercard) {
this.membercard = this.goodsSkuDetail.membercard;
}
},
goodsDetailViewInit() {
// 初始化商品详情视图数据
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
sku_id: this.skuId,
goods_id: this.goodsSkuDetail.goods_id,
preview: this.preview,
source_member: this.source_member,
posterParams: this.posterParams,
posterApi: this.posterApi,
shareUrl: this.shareUrl,
goodsRoute: this.goodsRoute,
isVirtual: this.goodsSkuDetail.is_virtual,
deliveryType: this.goodsSkuDetail.express_type,
whetherCollection: this.goodsSkuDetail.is_collect,
evaluateConfig: this.goodsSkuDetail.evaluate_config,
evaluateList: this.goodsSkuDetail.evaluate_list,
evaluateCount: this.goodsSkuDetail.evaluate_count
});
},
goHome() {
if (this.preview) return; // 开启预览,禁止任何操作和跳转
this.$util.redirectTo('/pages/index/index');
},
goCart() {
if (this.preview) return; // 开启预览,禁止任何操作和跳转
this.$util.redirectTo('/pages/goods/cart');
},
//-------------------------------------关注-------------------------------------
//更新商品信息
modifyGoodsInfo() {
if (this.preview) return; // 开启预览,禁止任何操作和跳转
//更新商品点击量
this.$api.sendRequest({
url: "/api/goods/modifyclicks",
data: {
sku_id: this.skuId
},
success: res => {
}
});
//添加足迹
this.$api.sendRequest({
url: "/api/goodsbrowse/add",
data: {
goods_id: this.goodsSkuDetail.goods_id,
sku_id: this.skuId
},
success: res => {
}
});
},
//-------------------------------------关注-------------------------------------
async editCollection() {
if (this.$refs.goodsDetailView) {
this.whetherCollection = await this.$refs.goodsDetailView.collection();
}
},
openSharePopup() {
if (this.$refs.goodsDetailView) {
this.$refs.goodsDetailView.openSharePopup();
}
},
//弹幕
getBarrageData() {
this.$api.sendRequest({
url: '/api/goods/goodsbarrage',
data: {
goods_id: this.goodsSkuDetail.goods_id
},
success: res => {
if (res.code == 0 && res.data) {
let barrageData = [];
for (let i in res.data.list) {
if (res.data.list[i]['title']) {
let title = res.data.list[i]['title'].substr(0, 1) + '*' + res.data.list[i]['title'].substr(res.data.list[i]['title'].length - 1, 1)
barrageData.push({
img: res.data.list[i]['img'] ? res.data.list[i]['img'] : this.$util.getDefaultImage().head,
title: title + '已下单'
});
}
}
this.goodsSkuDetail.barrageData = barrageData;
}
}
});
},
/**
* 设置公众号分享
*/
setPublicShare() {
let shareUrl = this.$config.h5Domain + this.shareUrl;
if (this.memberInfo && this.memberInfo.member_id) shareUrl += '&source_member=' + this.memberInfo.member_id;
var store_info = this.$store.state.globalStoreInfo;
if (store_info) shareUrl+= '&store_id=' + store_info.store_id;
this.$util.setPublicShare({
title: this.goodsSkuDetail.goods_name,
desc: '',
link: shareUrl,
imgUrl: typeof this.goodsSkuDetail.goods_image == 'object' ? this.goodsSkuDetail.goods_image[0] : this.goodsSkuDetail.goods_image.split(',')[0]
})
},
/**
* 获取商品表单
*/
getGoodsForm() {
this.$api.sendRequest({
url: "/form/api/form/goodsform",
data: {
goods_id: this.goodsSkuDetail.goods_id
},
success: res => {
if (res.code == 0 && res.data) this.$set(this.goodsSkuDetail, 'goods_form', res.data);
}
});
}
},
/**
* 自定义分享内容
* @param {Object} res
*/
onShareAppMessage(res) {
var path = this.shareUrl;
var store_info = this.$store.state.globalStoreInfo;
if (store_info) path+= '&store_id=' + store_info.store_id;
if (this.memberInfo && this.memberInfo.member_id) path += '&source_member=' + this.memberInfo.member_id;
return {
title: this.goodsSkuDetail.sku_name,
imageUrl: this.shareImg ? this.$util.img(this.shareImg) : this.$util.img(this.goodsSkuDetail.sku_image, {
size: 'big'
}),
path: path,
success: res => {
},
fail: res => {
}
};
},
// 分享到微信朋友圈
// #ifdef MP-WEIXIN
onShareTimeline() {
let query = this.shareQuery;
var store_info = this.$store.state.globalStoreInfo;
if (store_info) query+= '&store_id=' + store_info.store_id;
if (this.memberInfo && this.memberInfo.member_id) query += '&source_member=' + this.memberInfo.member_id;
return {
title: this.goodsSkuDetail.sku_name,
query: query,
imageUrl: this.$util.img(this.goodsSkuDetail.sku_image, {
size: 'big'
})
};
}
// #endif
}

View File

@@ -1,440 +1,440 @@
import util from './util.js'
/*
* HTML5 Parser By Sam Blowes
*
* Designed for HTML5 documents
*
* Original code by John Resig (ejohn.org)
* http://ejohn.org/blog/pure-javascript-html-parser/
* Original code by Erik Arvidsson, Mozilla Public License
* http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
*
* ----------------------------------------------------------------------------
* License
* ----------------------------------------------------------------------------
*
* This code is triple licensed using Apache Software License 2.0,
* Mozilla Public License or GNU Public License
*
* ////////////////////////////////////////////////////////////////////////////
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* ////////////////////////////////////////////////////////////////////////////
*
* The contents of this file are subject to the Mozilla Public License
* Version 1.1 (the "License"); you may not use this file except in
* compliance with the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS"
* basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
* License for the specific language governing rights and limitations
* under the License.
*
* The Original Code is Simple HTML Parser.
*
* The Initial Developer of the Original Code is Erik Arvidsson.
* Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights
* Reserved.
*
* ////////////////////////////////////////////////////////////////////////////
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*
* ----------------------------------------------------------------------------
* Usage
* ----------------------------------------------------------------------------
*
* // Use like so:
* HTMLParser(htmlString, {
* start: function(tag, attrs, unary) {},
* end: function(tag) {},
* chars: function(text) {},
* comment: function(text) {}
* });
*
* // or to get an XML string:
* HTMLtoXML(htmlString);
*
* // or to get an XML DOM Document
* HTMLtoDOM(htmlString);
*
* // or to inject into an existing document/DOM node
* HTMLtoDOM(htmlString, document);
* HTMLtoDOM(htmlString, document.body);
*
*/
// Regular Expressions for parsing tags and attributes
var startTag =
/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
var attr =
/([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
var empty = makeMap(
'area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'
); // Block Elements - HTML 5
// fixed by xxx 将 ins 标签从块级名单中移除
var block = makeMap(
'a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'
); // Inline Elements - HTML 5
var inline = makeMap(
'abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'
); // Elements that you can, intentionally, leave open
// (and which close themselves)
var closeSelf = makeMap(
'colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
var fillAttrs = makeMap(
'checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'
); // Special Elements (can contain anything)
var special = makeMap('script,style');
function HTMLParser(html, handler) {
var index;
var chars;
var match;
var stack = [];
var last = html;
stack.last = function() {
return this[this.length - 1];
};
while (html) {
chars = true; // Make sure we're not in a script or style element
if (!stack.last() || !special[stack.last()]) {
// Comment
if (html.indexOf('<!--') == 0) {
index = html.indexOf('-->');
if (index >= 0) {
if (handler.comment) {
handler.comment(html.substring(4, index));
}
html = html.substring(index + 3);
chars = false;
} // end tag
} else if (html.indexOf('</') == 0) {
match = html.match(endTag);
if (match) {
html = html.substring(match[0].length);
match[0].replace(endTag, parseEndTag);
chars = false;
} // start tag
} else if (html.indexOf('<') == 0) {
match = html.match(startTag);
if (match) {
html = html.substring(match[0].length);
match[0].replace(startTag, parseStartTag);
chars = false;
}
}
if (chars) {
index = html.indexOf('<');
var text = index < 0 ? html : html.substring(0, index);
html = index < 0 ? '' : html.substring(index);
if (handler.chars) {
handler.chars(text);
}
}
} else {
html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function(all, text) {
text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2');
if (handler.chars) {
handler.chars(text);
}
return '';
});
parseEndTag('', stack.last());
}
if (html == last) {
throw 'Parse Error: ' + html;
}
last = html;
} // Clean up any remaining tags
parseEndTag();
function parseStartTag(tag, tagName, rest, unary) {
tagName = tagName.toLowerCase();
if (block[tagName]) {
while (stack.last() && inline[stack.last()]) {
parseEndTag('', stack.last());
}
}
if (closeSelf[tagName] && stack.last() == tagName) {
parseEndTag('', tagName);
}
unary = empty[tagName] || !!unary;
if (!unary) {
stack.push(tagName);
}
if (handler.start) {
var attrs = [];
rest.replace(attr, function(match, name) {
var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ?
arguments[4] : fillAttrs[
name] ? name : '';
attrs.push({
name: name,
value: value,
escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
});
});
if (handler.start) {
handler.start(tagName, attrs, unary);
}
}
}
function parseEndTag(tag, tagName) {
// If no tag name is provided, clean shop
if (!tagName) {
var pos = 0;
} // Find the closest opened tag of the same type
else {
for (var pos = stack.length - 1; pos >= 0; pos--) {
if (stack[pos] == tagName) {
break;
}
}
}
if (pos >= 0) {
// Close all the open elements, up the stack
for (var i = stack.length - 1; i >= pos; i--) {
if (handler.end) {
handler.end(stack[i]);
}
} // Remove the open elements from the stack
stack.length = pos;
}
}
}
function makeMap(str) {
var obj = {};
var items = str.split(',');
for (var i = 0; i < items.length; i++) {
obj[items[i]] = true;
}
return obj;
}
function removeDOCTYPE(html) {
return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, '');
}
/**
* 忽略注释
* @param {Object} html
*/
function replaceAnnotation(html) {
var html = html.replace(/<!--[\s\S]*-->/gi, '');
return html;
}
/**
* 替换图片
* @param {Object} html
*/
function replaceImage(html) {
// #ifdef MP
let info = uni.getSystemInfoSync();
var screenWidth = info.windowWidth;
screenWidth -= 20;
screenWidth += 'px';
// #endif
// #ifdef H5
var screenWidth = '100%';
// #endif
let rep = `<img style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`;
var html = html.replace(/\\/g, '').replace(/<img/g, rep);
html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
return rep + ' src="' + util.img(capture) + '"/>';
});
return html;
}
function replaceVideo(html){
// #ifdef MP
let info = uni.getSystemInfoSync();
var screenWidth = info.windowWidth;
screenWidth -= 20;
screenWidth += 'px';
// #endif
// #ifdef H5
var screenWidth = '100%';
// #endif
let rep = `<video style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`;
var html = html.replace(/\\/g, '').replace(/<video/g, rep);
console.log(html)
html = html.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
return rep + ' src="' + util.img(capture) + '"/>';
});
// console.log(html)
return html;
}
/**
* 将style属性中的双引号改为单引号
* @param {Object} html
*/
function replaceStyleQuotes(html) {
var html = html.replace(/style\s*=\s*["][^>]*;[^"]?/gi, (match, capture) => {
match = match.replace(/[:](\s?)[\s\S]*/gi, (a, b) => {
return a.replace(/"/g, "'");
});
return match;
});
return html;
}
function parseAttrs(attrs) {
return attrs.reduce(function(pre, attr) {
var value = attr.value;
var name = attr.name;
if (pre[name]) {
pre[name] = pre[name] + " " + value;
} else {
pre[name] = value;
}
return pre;
}, {});
}
function parseHtml(html) {
html = removeDOCTYPE(html);
html = replaceAnnotation(html); //忽略注释
html = replaceImage(html); //替换图片
html = replaceStyleQuotes(html); //将style属性中的双引号改为单引号
html = replaceVideo(html); //替换视频链接
var stacks = [];
var results = {
node: 'root',
children: []
};
HTMLParser(html, {
start: function start(tag, attrs, unary) {
var node = {
name: tag
};
if (attrs.length !== 0) {
node.attrs = parseAttrs(attrs);
}
if (unary) {
var parent = stacks[0] || results;
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
} else {
stacks.unshift(node);
}
},
end: function end(tag) {
var node = stacks.shift();
if (node.name !== tag) console.error('invalid state: mismatch end tag');
if (stacks.length === 0) {
results.children.push(node);
} else {
var parent = stacks[0];
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
}
},
chars: function chars(text) {
var node = {
type: 'text',
text: text
};
if (stacks.length === 0) {
results.children.push(node);
} else {
var parent = stacks[0];
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
}
},
comment: function comment(text) {
var node = {
node: 'comment',
text: text
};
var parent = stacks[0];
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
}
});
return results.children;
}
import util from './util.js'
/*
* HTML5 Parser By Sam Blowes
*
* Designed for HTML5 documents
*
* Original code by John Resig (ejohn.org)
* http://ejohn.org/blog/pure-javascript-html-parser/
* Original code by Erik Arvidsson, Mozilla Public License
* http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
*
* ----------------------------------------------------------------------------
* License
* ----------------------------------------------------------------------------
*
* This code is triple licensed using Apache Software License 2.0,
* Mozilla Public License or GNU Public License
*
* ////////////////////////////////////////////////////////////////////////////
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* ////////////////////////////////////////////////////////////////////////////
*
* The contents of this file are subject to the Mozilla Public License
* Version 1.1 (the "License"); you may not use this file except in
* compliance with the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS"
* basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
* License for the specific language governing rights and limitations
* under the License.
*
* The Original Code is Simple HTML Parser.
*
* The Initial Developer of the Original Code is Erik Arvidsson.
* Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights
* Reserved.
*
* ////////////////////////////////////////////////////////////////////////////
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*
* ----------------------------------------------------------------------------
* Usage
* ----------------------------------------------------------------------------
*
* // Use like so:
* HTMLParser(htmlString, {
* start: function(tag, attrs, unary) {},
* end: function(tag) {},
* chars: function(text) {},
* comment: function(text) {}
* });
*
* // or to get an XML string:
* HTMLtoXML(htmlString);
*
* // or to get an XML DOM Document
* HTMLtoDOM(htmlString);
*
* // or to inject into an existing document/DOM node
* HTMLtoDOM(htmlString, document);
* HTMLtoDOM(htmlString, document.body);
*
*/
// Regular Expressions for parsing tags and attributes
var startTag =
/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
var attr =
/([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
var empty = makeMap(
'area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'
); // Block Elements - HTML 5
// fixed by xxx 将 ins 标签从块级名单中移除
var block = makeMap(
'a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video'
); // Inline Elements - HTML 5
var inline = makeMap(
'abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var'
); // Elements that you can, intentionally, leave open
// (and which close themselves)
var closeSelf = makeMap(
'colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
var fillAttrs = makeMap(
'checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'
); // Special Elements (can contain anything)
var special = makeMap('script,style');
function HTMLParser(html, handler) {
var index;
var chars;
var match;
var stack = [];
var last = html;
stack.last = function() {
return this[this.length - 1];
};
while (html) {
chars = true; // Make sure we're not in a script or style element
if (!stack.last() || !special[stack.last()]) {
// Comment
if (html.indexOf('<!--') == 0) {
index = html.indexOf('-->');
if (index >= 0) {
if (handler.comment) {
handler.comment(html.substring(4, index));
}
html = html.substring(index + 3);
chars = false;
} // end tag
} else if (html.indexOf('</') == 0) {
match = html.match(endTag);
if (match) {
html = html.substring(match[0].length);
match[0].replace(endTag, parseEndTag);
chars = false;
} // start tag
} else if (html.indexOf('<') == 0) {
match = html.match(startTag);
if (match) {
html = html.substring(match[0].length);
match[0].replace(startTag, parseStartTag);
chars = false;
}
}
if (chars) {
index = html.indexOf('<');
var text = index < 0 ? html : html.substring(0, index);
html = index < 0 ? '' : html.substring(index);
if (handler.chars) {
handler.chars(text);
}
}
} else {
html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function(all, text) {
text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2');
if (handler.chars) {
handler.chars(text);
}
return '';
});
parseEndTag('', stack.last());
}
if (html == last) {
throw 'Parse Error: ' + html;
}
last = html;
} // Clean up any remaining tags
parseEndTag();
function parseStartTag(tag, tagName, rest, unary) {
tagName = tagName.toLowerCase();
if (block[tagName]) {
while (stack.last() && inline[stack.last()]) {
parseEndTag('', stack.last());
}
}
if (closeSelf[tagName] && stack.last() == tagName) {
parseEndTag('', tagName);
}
unary = empty[tagName] || !!unary;
if (!unary) {
stack.push(tagName);
}
if (handler.start) {
var attrs = [];
rest.replace(attr, function(match, name) {
var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ?
arguments[4] : fillAttrs[
name] ? name : '';
attrs.push({
name: name,
value: value,
escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
});
});
if (handler.start) {
handler.start(tagName, attrs, unary);
}
}
}
function parseEndTag(tag, tagName) {
// If no tag name is provided, clean shop
if (!tagName) {
var pos = 0;
} // Find the closest opened tag of the same type
else {
for (var pos = stack.length - 1; pos >= 0; pos--) {
if (stack[pos] == tagName) {
break;
}
}
}
if (pos >= 0) {
// Close all the open elements, up the stack
for (var i = stack.length - 1; i >= pos; i--) {
if (handler.end) {
handler.end(stack[i]);
}
} // Remove the open elements from the stack
stack.length = pos;
}
}
}
function makeMap(str) {
var obj = {};
var items = str.split(',');
for (var i = 0; i < items.length; i++) {
obj[items[i]] = true;
}
return obj;
}
function removeDOCTYPE(html) {
return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, '');
}
/**
* 忽略注释
* @param {Object} html
*/
function replaceAnnotation(html) {
var html = html.replace(/<!--[\s\S]*-->/gi, '');
return html;
}
/**
* 替换图片
* @param {Object} html
*/
function replaceImage(html) {
// #ifdef MP
let info = uni.getWindowInfo();
var screenWidth = info.windowWidth;
screenWidth -= 20;
screenWidth += 'px';
// #endif
// #ifdef H5
var screenWidth = '100%';
// #endif
let rep = `<img style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`;
var html = html.replace(/\\/g, '').replace(/<img/g, rep);
html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
return rep + ' src="' + util.img(capture) + '"/>';
});
return html;
}
function replaceVideo(html){
// #ifdef MP
let info = uni.getWindowInfo();
var screenWidth = info.windowWidth;
screenWidth -= 20;
screenWidth += 'px';
// #endif
// #ifdef H5
var screenWidth = '100%';
// #endif
let rep = `<video style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`;
var html = html.replace(/\\/g, '').replace(/<video/g, rep);
console.log(html)
html = html.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
return rep + ' src="' + util.img(capture) + '"/>';
});
// console.log(html)
return html;
}
/**
* 将style属性中的双引号改为单引号
* @param {Object} html
*/
function replaceStyleQuotes(html) {
var html = html.replace(/style\s*=\s*["][^>]*;[^"]?/gi, (match, capture) => {
match = match.replace(/[:](\s?)[\s\S]*/gi, (a, b) => {
return a.replace(/"/g, "'");
});
return match;
});
return html;
}
function parseAttrs(attrs) {
return attrs.reduce(function(pre, attr) {
var value = attr.value;
var name = attr.name;
if (pre[name]) {
pre[name] = pre[name] + " " + value;
} else {
pre[name] = value;
}
return pre;
}, {});
}
function parseHtml(html) {
html = removeDOCTYPE(html);
html = replaceAnnotation(html); //忽略注释
html = replaceImage(html); //替换图片
html = replaceStyleQuotes(html); //将style属性中的双引号改为单引号
html = replaceVideo(html); //替换视频链接
var stacks = [];
var results = {
node: 'root',
children: []
};
HTMLParser(html, {
start: function start(tag, attrs, unary) {
var node = {
name: tag
};
if (attrs.length !== 0) {
node.attrs = parseAttrs(attrs);
}
if (unary) {
var parent = stacks[0] || results;
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
} else {
stacks.unshift(node);
}
},
end: function end(tag) {
var node = stacks.shift();
if (node.name !== tag) console.error('invalid state: mismatch end tag');
if (stacks.length === 0) {
results.children.push(node);
} else {
var parent = stacks[0];
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
}
},
chars: function chars(text) {
var node = {
type: 'text',
text: text
};
if (stacks.length === 0) {
results.children.push(node);
} else {
var parent = stacks[0];
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
}
},
comment: function comment(text) {
var node = {
node: 'comment',
text: text
};
var parent = stacks[0];
if (!parent.children) {
parent.children = [];
}
parent.children.push(node);
}
});
return results.children;
}
export default parseHtml;

View File

@@ -1,255 +1,289 @@
import Config from './config.js'
import Util from './util.js'
import store from '@/store/index.js'
// #ifdef H5
const app_type = Util.isWeiXin() ? 'wechat' : 'h5';
const app_type_name = Util.isWeiXin() ? '微信公众号' : 'H5';
// #endif
// #ifdef MP-WEIXIN
const app_type = 'weapp';
const app_type_name = '微信小程序';
// #endif
// #ifdef MP-ALIPAY
const app_type = 'aliapp';
const app_type_name = '支付宝小程序';
// #endif
// #ifdef MP-BAIDU
const app_type = 'baiduapp';
const app_type_name = '百度小程序';
// #endif
// #ifdef MP-TOUTIAO
const app_type = 'MP-TOUTIAO';
const app_type_name = '头条小程序';
// #endif
// #ifdef MP-QQ
const app_type = 'MP-QQ';
const app_type_name = 'QQ小程序';
// #endif
// #ifdef APP-PLUS
const app_type = 'app';
const app_type_name = 'APP';
// #endif
export default {
sendRequest(params) {
if (!Config.baseUrl) {
uni.showToast({
title: '未配置请求域名',
'icon': 'none',
duration: 10000
});
return;
}
var method = params.data != undefined ? 'POST' : 'GET', // 请求方式
url = Config.baseUrl + params.url, // 请求路径
data = {
app_type,
app_type_name
};
// token
data.token = store.state.token || '';
data.uniacid = Config.uniacid
// 门店id
var default_store_info = store.state.defaultStoreInfo;
if (default_store_info) {
data.store_id = default_store_info.store_id;
}
var store_info = store.state.globalStoreInfo;
if (store_info) data.store_id = store_info.store_id;
// 参数
if (params.data != undefined) Object.assign(data, params.data);
if (params.async === false) {
//同步
return new Promise((resolve, reject) => {
uni.request({
url: url,
method: method,
data: data,
header: params.header || {
// 'Accept': 'application/json',
'content-type': 'application/x-www-form-urlencoded;application/json'
},
dataType: params.dataType || 'json',
responseType: params.responseType || 'text',
success: (res) => {
// try {
// res.data = JSON.parse(res.data);
// } catch (e) {
// //TODO handle the exception
// console.log('api error', e);
// }
if (res.data.code == -3 && store.state.siteState > 0) {
store.commit('setSiteState', -3);
Util.redirectTo('/pages_tool/storeclose/storeclose', {}, 'reLaunch');
return;
}
if (res.data.refreshtoken) {
store.commit('setToken', res.data.refreshtoken);
}
if (res.data.code == -10009 || res.data.code == -10010) {
store.commit('setToken', '');
store.commit('setMemberInfo', '');
}
resolve(res.data);
},
fail: (res) => {
if (res.errMsg && res.errMsg == 'request:fail url not in domain list') {
uni.showToast({
title: Config.baseUrl + '不在request 合法域名列表中',
'icon': 'none',
duration: 10000
});
return;
}
reject(res);
},
complete: (res) => {
if ((res.errMsg && res.errMsg != "request:ok") || (res.statusCode && [200, 500].indexOf(res.statusCode) == -1)) {
uni.showToast({
title: Config.baseUrl + '请求失败',
'icon': 'none',
duration: 10000
});
return;
}
reject(res.data);
}
});
});
} else {
//异步
uni.request({
url: url,
method: method,
data: data,
header: params.header || {
// 'Accept': 'application/json',
'content-type': 'application/x-www-form-urlencoded;application/json'
},
dataType: params.dataType || 'json',
responseType: params.responseType || 'text',
success: (res) => {
// try {
// res.data = JSON.parse(res.data);
// } catch (e) {
// //TODO handle the exception
// console.log('api error', e);
// }
if (res.data.code == -3 && store.state.siteState > 0) {
store.commit('setSiteState', -3);
Util.redirectTo('/pages_tool/storeclose/storeclose', {}, 'reLaunch');
return;
}
if (res.data.refreshtoken) {
store.commit('setToken', res.data.refreshtoken);
}
if (res.data.code == -10009 || res.data.code == -10010) {
store.commit('setToken', '');
store.commit('setMemberInfo', '');
}
typeof params.success == 'function' && params.success(res.data);
},
fail: (res) => {
if (res.errMsg && res.errMsg == 'request:fail url not in domain list') {
uni.showToast({
title: Config.baseUrl + '不在request 合法域名列表中',
'icon': 'none',
duration: 10000
});
return;
}
typeof params.fail == 'function' && params.fail(res);
},
complete: (res) => {
if ((res.errMsg && res.errMsg != "request:ok") || (res.statusCode && [200, 500].indexOf(res.statusCode) == -1)) {
uni.showToast({
title: Config.baseUrl + '请求失败',
'icon': 'none',
duration: 10000
});
return;
}
typeof params.complete == 'function' && params.complete(res.data);
}
});
}
},
uploadBase64(params) {
uni.request({
url: Config.baseUrl + '/api/upload/headimgBase64',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;application/json'
},
data: {
app_type,
app_type_name,
images: params.base64
},
dataType: 'json',
responseType: 'text',
success: res => {
typeof params.success == 'function' && params.success(res.data);
},
fail: () => {
typeof params.fail == 'function' && params.fail(res);
}
});
},
pullImage(params) {
uni.request({
url: Config.baseUrl + '/api/upload/headimgPull',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;application/json'
},
data: {
app_type,
app_type_name,
path: params.path
},
dataType: 'json',
responseType: 'text',
success: res => {
typeof params.success == 'function' && params.success(res.data);
},
fail: () => {
typeof params.fail == 'function' && params.fail(res);
}
});
},
upload(params) {
uni.uploadFile({
url: Config.baseUrl + params.url,
filePath: params.filePath,
name: params.name || 'file',
fileType: params.fileType || 'image',
formData: {
app_type,
app_type_name,
},
header: {
'content-type': 'application/x-www-form-urlencoded;application/json'
},
success: (res) => {
typeof params.success == 'function' && params.success(JSON.parse(res.data));
},
fail: (res) => {
typeof params.fail == 'function' && params.fail(res);
}
});
}
import Config from './config.js'
import Util from './util.js'
import store from '@/store/index.js'
import { Utils } from 'common/js/map-wx-jssdk.js';
// #ifdef H5
const app_type = Util.isWeiXin() ? 'wechat' : 'h5';
const app_type_name = Util.isWeiXin() ? '微信公众号' : 'H5';
// #endif
// #ifdef MP-WEIXIN
const app_type = 'weapp';
const app_type_name = '微信小程序';
// #endif
// #ifdef MP-ALIPAY
const app_type = 'aliapp';
const app_type_name = '支付宝小程序';
// #endif
// #ifdef MP-BAIDU
const app_type = 'baiduapp';
const app_type_name = '百度小程序';
// #endif
// #ifdef MP-TOUTIAO
const app_type = 'MP-TOUTIAO';
const app_type_name = '头条小程序';
// #endif
// #ifdef MP-QQ
const app_type = 'MP-QQ';
const app_type_name = 'QQ小程序';
// #endif
// #ifdef APP-PLUS
const app_type = 'app';
const app_type_name = 'APP';
// #endif
export default {
sendRequest(params) {
if (!Config.baseUrl) {
uni.showToast({
title: '未配置请求域名',
'icon': 'none',
duration: 10000
});
return;
}
var method = params.data != undefined ? 'POST' : 'GET', // 请求方式
url = Config.baseUrl + params.url, // 请求路径
data = {
app_type,
app_type_name
};
// token
data.token = store.state.token || '';
data.uniacid = Config.uniacid
// 门店id
var default_store_info = store.state.defaultStoreInfo;
if (default_store_info) {
data.store_id = default_store_info.store_id;
}
var store_info = store.state.globalStoreInfo;
if (store_info) data.store_id = store_info.store_id;
// 参数
if (params.data != undefined) Object.assign(data, params.data);
if (params.async === false) {
//同步
return new Promise((resolve, reject) => {
uni.request({
url: url,
method: method,
data: data,
header: params.header || {
// 'Accept': 'application/json',
'content-type': 'application/x-www-form-urlencoded;application/json'
},
dataType: params.dataType || 'json',
responseType: params.responseType || 'text',
success: (res) => {
// try {
// res.data = JSON.parse(res.data);
// } catch (e) {
// //TODO handle the exception
// console.log('api error', e);
// }
if (res.data.code == -3 && store.state.siteState > 0) {
store.commit('setSiteState', -3);
Util.redirectTo('/pages_tool/storeclose/storeclose', {}, 'reLaunch');
return;
}
if (res.data.refreshtoken) {
store.commit('setToken', res.data.refreshtoken);
}
if (res.data.code == -10009 || res.data.code == -10010) {
store.commit('setToken', '');
store.commit('setMemberInfo', '');
}
resolve(res.data);
},
fail: (res) => {
if (res.errMsg && res.errMsg == 'request:fail url not in domain list') {
uni.showToast({
title: Config.baseUrl + '不在request 合法域名列表中',
'icon': 'none',
duration: 10000
});
return;
}
reject(res);
},
complete: (res) => {
if ((res.errMsg && res.errMsg != "request:ok") || (res.statusCode && [200, 500].indexOf(res.statusCode) == -1)) {
uni.showToast({
title: Config.baseUrl + '请求失败',
'icon': 'none',
duration: 10000
});
return;
}
reject(res.data);
}
});
});
} else {
//异步
uni.request({
url: url,
method: method,
data: data,
header: params.header || {
// 'Accept': 'application/json',
'content-type': 'application/x-www-form-urlencoded;application/json'
},
dataType: params.dataType || 'json',
responseType: params.responseType || 'text',
success: (res) => {
// try {
// res.data = JSON.parse(res.data);
// } catch (e) {
// //TODO handle the exception
// console.log('api error', e);
// }
if (res.data.code == -3 && store.state.siteState > 0) {
store.commit('setSiteState', -3);
Util.redirectTo('/pages_tool/storeclose/storeclose', {}, 'reLaunch');
return;
}
if (res.data.refreshtoken) {
store.commit('setToken', res.data.refreshtoken);
}
if (res.data.code == -10009 || res.data.code == -10010) {
store.commit('setToken', '');
store.commit('setMemberInfo', '');
}
typeof params.success == 'function' && params.success(res.data);
},
fail: (res) => {
if (res.errMsg && res.errMsg == 'request:fail url not in domain list') {
uni.showToast({
title: Config.baseUrl + '不在request 合法域名列表中',
'icon': 'none',
duration: 10000
});
return;
}
typeof params.fail == 'function' && params.fail(res);
},
complete: (res) => {
if ((res.errMsg && res.errMsg != "request:ok") || (res.statusCode && [200, 500].indexOf(res.statusCode) == -1)) {
uni.showToast({
title: Config.baseUrl + '请求失败',
'icon': 'none',
duration: 10000
});
return;
}
typeof params.complete == 'function' && params.complete(res.data);
}
});
}
},
needMd5Fn(params,callback) {
uni.request({
url: Config.baseUrl + '/api/config/getApiConfig',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;application/json'
},
data: {
app_type,
app_type_name,
},
dataType: 'json',
responseType: 'text',
success: res => {
var sign_str = Utils.hexMD5('key=' + res.data.data.key+'&time='+res.data.data.time)
typeof callback == 'function' && callback(sign_str,res.data.data.time);
},
fail: () => {
typeof params.fail == 'function' && params.fail(res);
}
});
},
uploadBase64(params) {
this.needMd5Fn(params,(sign_str,time)=>{
uni.request({
url: Config.baseUrl + '/api/upload/headimgBase64',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;application/json'
},
data: {
app_type,
app_type_name,
images: params.base64,
token: store.state.token || '',
sign: sign_str,
time: time
},
dataType: 'json',
responseType: 'text',
success: res => {
typeof params.success == 'function' && params.success(res.data);
},
fail: () => {
typeof params.fail == 'function' && params.fail(res);
}
});
})
},
pullImage(params) {
this.needMd5Fn(params,(sign_str,time)=>{
uni.request({
url: Config.baseUrl + '/api/upload/headimgPull',
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded;application/json'
},
data: {
app_type,
app_type_name,
path: params.path,
token: store.state.token || '',
sign: sign_str,
time: time
},
dataType: 'json',
responseType: 'text',
success: res => {
typeof params.success == 'function' && params.success(res.data);
},
fail: () => {
typeof params.fail == 'function' && params.fail(res);
}
});
})
},
upload(params) {
uni.uploadFile({
url: Config.baseUrl + params.url,
filePath: params.filePath,
name: params.name || 'file',
fileType: params.fileType || 'image',
formData: {
app_type,
app_type_name,
token: store.state.token || ''
},
header: {
'content-type': 'application/x-www-form-urlencoded;application/json'
},
success: (res) => {
typeof params.success == 'function' && params.success(JSON.parse(res.data));
},
fail: (res) => {
typeof params.fail == 'function' && params.fail(res);
}
});
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -1,107 +1,107 @@
import TransformCoordinate from './transformCoordinate.js'
function openMapByDefault(latitude, longitude, name) {
uni.openLocation({
latitude: latitude,
longitude: longitude,
name: name,
fail: (e) => {
uni.showModal({
content: '打开地图失败,请稍后重试'
})
},
})
}
function openMapByAndroid(latitude, longitude, name) {
let url = ''; // 回调地址
let identity = ''; // 程序名称
if (plus.runtime.isApplicationExist({
pname: 'com.baidu.BaiduMap'
})) {
url =
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
identity = 'com.baidu.BaiduMap'
openURL(url, identity)
} else if (plus.runtime.isApplicationExist({
pname: 'com.autonavi.minimap'
})) { // 高德
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
identity = 'com.autonavi.minimap'
openURL(url, identity)
} else {
openMapByDefault(latitude, longitude, name)
}
}
function openMapByIos(latitude, longitude, name) {
let url = ''; // 回调地址
let errorCB = ''; // url失败的回调地址
let identity = ''; // 程序名称
if (plus.runtime.isApplicationExist({
action: 'baidumap://'
})) {
url =
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
openURL(url, identity)
} else if (plus.runtime.isApplicationExist({
action: 'iosamap://'
})) { // 高德
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
openURL(url, identity)
} else {
openMapByDefault(latitude, longitude, name)
}
}
function openURL(url, identity) {
let newurl = encodeURI(url);
plus.runtime.openURL(newurl, function(res) {
uni.showModal({
content: res.message
})
}, identity);
}
function getCoordByType(longitude, latitude, coord_type) {
switch (coord_type) {
case 'gcj02':
return [longitude, latitude]
break;
case 'bd09':
return TransformCoordinate.bd09togcj02(longitude, latitude)
break;
case 'wgs84':
return TransformCoordinate.wgs84togcj02(longitude, latitude)
break;
default:
return [longitude, latitude]
break;
}
}
export default {
/* 打开地图 */
openMap(latitude, longitude, name, coord_type = 'gcj02') {
let arr = getCoordByType(longitude, latitude, coord_type)
// #ifdef APP-PLUS
switch (uni.getSystemInfoSync().platform) {
case 'android':
console.log('运行Android上')
openMapByAndroid(arr[1], arr[0], name)
break;
case 'ios':
console.log('运行iOS上')
openMapByIos(arr[1], arr[0], name)
break;
default:
openMapByDefault(arr[1], arr[0], name)
console.log('运行在开发者工具上')
break;
}
// #endif
// #ifndef APP-PLUS
openMapByDefault(arr[1], arr[0], name)
// #endif
}
}
import TransformCoordinate from './transformCoordinate.js'
function openMapByDefault(latitude, longitude, name) {
uni.openLocation({
latitude: latitude,
longitude: longitude,
name: name,
fail: (e) => {
uni.showModal({
content: '打开地图失败,请稍后重试'
})
},
})
}
function openMapByAndroid(latitude, longitude, name) {
let url = ''; // 回调地址
let identity = ''; // 程序名称
if (plus.runtime.isApplicationExist({
pname: 'com.baidu.BaiduMap'
})) {
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
identity = 'com.baidu.BaiduMap';
openURL(url, identity)
} else if (plus.runtime.isApplicationExist({
pname: 'com.autonavi.minimap'
})) {
// 高德
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
identity = 'com.autonavi.minimap';
openURL(url, identity)
} else {
openMapByDefault(latitude, longitude, name)
}
}
function openMapByIos(latitude, longitude, name) {
let url = ''; // 回调地址
let errorCB = ''; // url失败的回调地址
let identity = ''; // 程序名称
if (plus.runtime.isApplicationExist({
action: 'baidumap://'
})) {
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
openURL(url, identity)
} else if (plus.runtime.isApplicationExist({
action: 'iosamap://'
})) {
// 高德
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
openURL(url, identity)
} else {
openMapByDefault(latitude, longitude, name)
}
}
function openURL(url, identity) {
let newurl = encodeURI(url);
plus.runtime.openURL(newurl, function(res) {
uni.showModal({
content: res.message
})
}, identity);
}
function getCoordByType(longitude, latitude, coord_type) {
switch (coord_type) {
case 'gcj02':
return [longitude, latitude]
break;
case 'bd09':
return TransformCoordinate.bd09togcj02(longitude, latitude)
break;
case 'wgs84':
return TransformCoordinate.wgs84togcj02(longitude, latitude)
break;
default:
return [longitude, latitude]
break;
}
}
export default {
/* 打开地图 */
openMap(latitude, longitude, name, coord_type = 'gcj02') {
let arr = getCoordByType(longitude, latitude, coord_type)
// #ifdef APP-PLUS
switch (uni.getSystemInfoSync().platform) {
case 'android':
console.log('运行Android上')
openMapByAndroid(arr[1], arr[0], name)
break;
case 'ios':
console.log('运行iOS上')
openMapByIos(arr[1], arr[0], name)
break;
default:
openMapByDefault(arr[1], arr[0], name)
console.log('运行在开发者工具上')
break;
}
// #endif
// #ifndef APP-PLUS
openMapByDefault(arr[1], arr[0], name)
// #endif
}
}

288
common/js/navigation.js Normal file
View File

@@ -0,0 +1,288 @@
import { EventSafety } from './event-safety'
export class NavigationHelper {
constructor() {
this.navigationCache = new Map()
}
// 安全地获取导航栏高度
async getNavigationHeight(component, options = {}) {
const cacheKey = `nav_height`
// 检查缓存
if (this.navigationCache.has(cacheKey) && !options.forceRefresh) {
return this.navigationCache.get(cacheKey)
}
// 获取高度
try {
// 尝试直接获取 uni-page-head
const height = await this.getDirectNavigationHeight(component)
if (height > 0) {
this.navigationCache.set(cacheKey, height)
return height
}
// 备用方案:平台特定方法
const platformHeight = await this.getPlatformNavigationHeight()
this.navigationCache.set(cacheKey, platformHeight)
return platformHeight
} catch (error) {
console.warn('获取导航栏高度失败,使用默认值:', error)
const defaultHeight = this.getDefaultNavHeight()
this.navigationCache.set(cacheKey, defaultHeight)
return defaultHeight
}
}
// 直接查询导航栏高度
getDirectNavigationHeight(component) {
return new Promise((resolve) => {
const query = uni.createSelectorQuery().in(component)
query.select('.uni-page-head').boundingClientRect((rect) => {
if (rect && rect.height > 0) {
console.log('直接查询导航栏高度成功:', rect.height)
resolve(rect.height)
} else {
console.warn('未找到 uni-page-head 元素或高度为0')
resolve(0)
}
}).exec()
})
}
// 平台特定的高度获取
getPlatformNavigationHeight() {
return new Promise((resolve) => {
// #ifdef MP-WEIXIN
// 微信小程序精确计算
try {
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
const systemInfo = uni.getSystemInfoSync()
const height = menuButtonInfo.bottom +
(menuButtonInfo.top - systemInfo.statusBarHeight)
console.log('微信小程序导航栏高度:', height)
resolve(height)
} catch (error) {
console.error('微信小程序高度计算失败:', error)
resolve(44)
}
// #endif
// #ifdef H5
// H5环境尝试获取自定义导航栏或使用默认值
if (typeof document !== 'undefined') {
const customNav = document.querySelector('.uni-page-head')
if (customNav) {
resolve(customNav.offsetHeight)
} else {
resolve(44) // 默认导航栏高度
}
} else {
resolve(44)
}
// #endif
// #ifdef APP-PLUS
// App端状态栏 + 导航栏
try {
const statusBarHeight = plus.navigator.getStatusbarHeight()
resolve(statusBarHeight + 44)
} catch (error) {
console.error('App端高度获取失败:', error)
resolve(88)
}
// #endif
// 默认值
resolve(44)
})
}
// 获取默认高度
getDefaultHeight() {
// #ifdef MP-WEIXIN
return 44 // 微信小程序默认
// #endif
// #ifdef H5
return 44 // H5默认
// #endif
// #ifdef APP-PLUS
return 88 // App默认状态栏44 + 导航栏44
// #endif
return 44
}
// 获取状态栏高度
getStatusBarHeight() {
// #ifdef MP-WEIXIN
const systemInfo = uni.getSystemInfoSync()
return systemInfo.statusBarHeight || 20
// #endif
// #ifdef H5
return 0 // H5通常没有状态栏
// #endif
// #ifdef APP-PLUS
try {
return plus.navigator.getStatusbarHeight()
} catch (error) {
return 44
}
// #endif
return 0
}
// 获取安全区域
getSafeAreaInsets() {
try {
const systemInfo = uni.getSystemInfoSync()
return systemInfo.safeArea || {
top: 0,
bottom: 0,
left: 0,
right: 0
}
} catch (error) {
return {
top: 0,
bottom: 0,
left: 0,
right: 0
}
}
}
// 创建安全的事件处理器
createSafeEventHandler(handler, options = {}) {
return EventSafety.wrapEventHandler(handler, options)
}
// 安全地处理服务请求事件
createServiceRequestHandler(component) {
return this.createSafeEventHandler((event) => {
return this.handleServiceRequest(event, component)
}, {
onError: (error, event) => {
this.handleNavigationError(error, event, component)
}
})
}
// 处理服务请求
async handleServiceRequest(event, component) {
console.log('处理导航相关服务请求:', event.type)
// 安全检查事件目标
if (this.shouldProcessNavigationRequest(event)) {
await this.processNavigationRequest(event, component)
}
}
// 检查是否应该处理导航请求
shouldProcessNavigationRequest(event) {
// 方法1检查事件类型
if (event.type === 'service.requestComponentInfo') {
return true
}
// 方法2检查目标元素
if (event.matches('.navigation-component') || event.matches('.uni-page-head')) {
return true
}
// 方法3检查事件详情
if (event.detail && event.detail.componentType === 'navigation') {
return true
}
return false
}
// 处理导航请求
async processNavigationRequest(event, component) {
try {
// 获取导航栏信息
const navInfo = await this.getNavigationInfo(component)
// 发送响应
this.emitNavigationResponse(navInfo, component)
} catch (error) {
console.error('处理导航请求失败:', error)
throw error
}
}
// 获取完整的导航信息
async getNavigationInfo(component) {
const [navHeight, statusBarHeight, safeArea] = await Promise.all([
this.getNavigationHeight(component),
this.getStatusBarHeight(),
this.getSafeAreaInsets()
])
return {
navHeight,
statusBarHeight,
safeArea,
timestamp: Date.now()
}
}
// 发送导航响应
emitNavigationResponse(navInfo, component) {
if (component && component.$emit) {
component.$emit('navigation.infoResponse', {
success: true,
data: navInfo,
timestamp: Date.now()
})
}
}
// 错误处理
handleNavigationError(error, event, component) {
console.error('导航处理错误:', {
error: error.message,
eventType: event?.type,
component: component?.$options?.name
})
// 发送错误响应
if (component && component.$emit) {
component.$emit('navigation.infoError', {
success: false,
error: error.message,
timestamp: Date.now()
})
}
// 显示用户友好的错误信息
this.showError('导航服务暂时不可用')
}
// 显示错误提示
showError(message) {
uni.showToast({
title: message,
icon: 'none',
duration: 2000
})
}
// 清理缓存
clearCache() {
this.navigationCache.clear()
console.log('导航缓存已清理')
}
}
// 创建全局实例
const navigationHelper = new NavigationHelper()
export default navigationHelper

View File

@@ -1,207 +1,215 @@
import config from './config.js'
export default {
data() {
return {
timeoutObj: null, //ping定时器
servicer_id: null, //绑定
pingInterval: config.pingInterval //本地端主动给服务器ping的时间, 0 则不开启
}
},
onLoad() {
let that = this;
// 因为图片上传所以不能onhide关闭长链接但是每次打开客服都会有重复请求所以优先关闭再去打开长链接
uni.closeSocket();
// .判断是否已连接
that.checkOpenSocket();
// uni.onSocketClose(function(res) {
// console.log('WebSocket 已关闭!');
// });
},
methods: {
// 判断是否已连接
checkOpenSocket() {
console.log('判断是否已连接');
// alert('判断是否已连接')
let self = this;
uni.sendSocketMessage({
data: 'ping',
success: (res) => {
console.log('连接成功,检查');
// alert('连接成功,检查')
// self.getChatList();
},
fail: (err) => { // 未连接打开websocket连接
console.log('连接失败');
// alert('连接失败')
self.openConnection();
}
});
},
openConnection() { // 打开连接
console.log('打开连接');
// alert('打开连接')
// uni.closeSocket(); // 确保已经关闭后再重新打开
uni.connectSocket({
url: config.webSocket,
method: 'POST',
success(res) {
console.log('连接成功 connectSocket=', res);
// alert('连接成功 connectSocket=', res);
},
fail(err) {
console.log('连接失败 connectSocket=', err);
}
});
// uni.onSocketOpen((res) => {
// console.log('连接成功', res);
// });
this.onSocketMessage(); // 打开成功监听服务器返回的消息
},
// 打开成功监听服务器返回的消息
onSocketMessage() { // 消息
console.log("开始监听");
let that = this;
this.pingInterval = config.pingInterval;
this.timeoutObj = null;
uni.onSocketMessage((res) => { //type:init,connect,close,string,order,goods
let msg = JSON.parse(res.data);
console.log("监听该服务器消息", res);
if (msg.type == 'close') {
clearInterval(that.timeoutObj);
that.timeoutObj = null;
uni.closeSocket();
return;
}
this.reset();
this.getSocketMsg(res.data); // 监听到有新服务器消息
});
},
// 监听到有新服务器消息
getSocketMsg(reData) { // 监听到服务器消息
let that = this;
// console.log(reData)
let giveMsg = JSON.parse(reData);
let data = {
isItMe: false,
};
data.contentType = giveMsg.type;
// alert(data.contentType)
if (giveMsg.type == 'init') {
// alert(123)
that.$api.sendRequest({
url: '/servicer/api/chat/bind',
data: {
client_id: giveMsg.data.client_id,
site_id: that.siteId
},
success(res) {
if (res.code == 0) {
that.servicer_id = res.data.servicer_id;
} else {
that.servicer_id = 0;
}
that.getChatList();
}
})
} else if (giveMsg.type == 'connect') {
// that.servicer_id = giveMsg.data.servicer_id;
// let NewArr = that.messageList;
// let index = null;
// for (let i = 0; i < NewArr.length; i++) {
// if (NewArr[i].contentType == 'online' || NewArr[i].contentType == 'noline') {
// index = i;
// }
// }
// NewArr.splice(index, 1)
// that.messageList = NewArr;
// let obj = {}
// if (that.servicer_id > 0) {
// obj.contentType = 'online';
// } else if (that.servicer_id == 0) {
// obj.contentType = 'noline';
// }
// that.messageList.push(obj);
return false;
} else if (giveMsg.type == 'string') {
data.content = giveMsg.data.servicer_say;
} else if (giveMsg.type == 'image') {
data.image = giveMsg.data.servicer_say;
} else if (giveMsg.type == 'order') {
data.order_id = giveMsg.data.order_id;
} else if (giveMsg.type == 'goodssku') {
data.sku_id = giveMsg.data.goods_sku_id;
}
if (giveMsg.type == 'init') return;
that.messageList.push(data);
that.$nextTick(() => {
that.setPageScrollTo()
})
},
// 检测心跳reset
reset() {
console.log("检测心跳");
clearInterval(this.timeoutObj);
this.start(); // 启动心跳
},
// 启动心跳 start
start() {
console.log("启动心跳");
let self = this;
this.timeoutObj = setInterval(function () {
uni.sendSocketMessage({
data: 'ping',
success: (res) => {
console.log('连接中....');
},
fail: (err) => {
console.log('连接失败重新连接....');
self.openConnection();
}
});
}, this.pingInterval);
}
},
// onHide() {
// // alert("关闭")
// // 改之前的
// // console.log("我出发了")
// // this.checkOpenSocket();
// clearInterval(this.timeoutObj);
// this.timeoutObj = null;
// this.$api.sendRequest({
// url: '/servicer/api/chat/bye',
// data: {
// servicer_id: this.servicer_id,
// site_id: this.siteId
// },
// success(res) {
// uni.closeSocket();
// },
// fail: (err) => {
// uni.closeSocket();
// }
// });
// },
onUnload() {
// alert("关闭")
clearInterval(this.timeoutObj);
this.timeoutObj = null;
this.$api.sendRequest({
url: '/servicer/api/chat/bye',
data: {
servicer_id: this.servicer_id,
site_id: this.siteId
},
success(res) {
// alert("关闭1")
uni.closeSocket();
},
fail: (err) => {
// alert("关闭2")
uni.closeSocket();
}
});
}
}
import config from './config.js'
export default {
data() {
return {
timeoutObj: null, //ping定时器
servicer_id: null, //绑定
pingInterval: config.pingInterval //本地端主动给服务器ping的时间, 0 则不开启
}
},
onLoad() {
let that = this;
// 因为图片上传所以不能onhide关闭长链接但是每次打开客服都会有重复请求所以优先关闭再去打开长链接
uni.closeSocket();
// .判断是否已连接
that.checkOpenSocket();
// uni.onSocketClose(function(res) {
// console.log('WebSocket 已关闭!');
// });
},
methods: {
// 判断是否已连接
checkOpenSocket() {
console.log('判断是否已连接');
// alert('判断是否已连接')
let self = this;
uni.sendSocketMessage({
data: 'ping',
success: (res) => {
console.log('连接成功,检查');
// alert('连接成功,检查')
// self.getChatList();
},
fail: (err) => { // 未连接打开websocket连接
console.log('连接失败');
// alert('连接失败')
self.openConnection();
}
});
},
openConnection() { // 打开连接
console.log('打开连接');
// alert('打开连接')
// uni.closeSocket(); // 确保已经关闭后再重新打开
uni.connectSocket({
url: config.webSocket,
method: 'POST',
success(res) {
console.log('连接成功 connectSocket=', res);
// alert('连接成功 connectSocket=', res);
},
fail(err) {
console.log('连接失败 connectSocket=', err);
}
});
// 监听 WebSocket 连接错误事件
uni.onSocketError((res)=>{
console.error('WebSocket 连接失败:', res.errMsg);
this.chatListInit();
this.getChatList();
});
// uni.onSocketOpen((res) => {
// console.log('连接成功', res);
// });
this.onSocketMessage(); // 打开成功监听服务器返回的消息
},
// 打开成功监听服务器返回的消息
onSocketMessage() { // 消息
console.log("开始监听");
let that = this;
this.pingInterval = config.pingInterval;
if(this.timeoutObj) clearInterval(this.timeoutObj);
this.timeoutObj = null;
uni.onSocketMessage((res) => { //type:init,connect,close,string,order,goods
let msg = JSON.parse(res.data);
console.log("监听该服务器消息", res);
if (msg.type == 'close') {
clearInterval(that.timeoutObj);
that.timeoutObj = null;
uni.closeSocket();
return;
}
this.reset();
this.getSocketMsg(res.data); // 监听到有新服务器消息
});
},
// 监听到有新服务器消息
getSocketMsg(reData) { // 监听到服务器消息
let that = this;
let giveMsg = JSON.parse(reData);
let data = {
isItMe: false,
};
data.contentType = giveMsg.type;
// alert(data.contentType)
if (giveMsg.type == 'init') {
// alert(123)
that.$api.sendRequest({
url: '/servicer/api/chat/bind',
data: {
client_id: giveMsg.data.client_id,
site_id: that.siteId
},
success(res) {
if (res.code == 0) {
that.servicer_id = res.data.servicer_id;
} else {
that.servicer_id = 0;
}
that.chatListInit();
that.getChatList();
}
})
} else if (giveMsg.type == 'connect') {
// that.servicer_id = giveMsg.data.servicer_id;
// let NewArr = that.messageList;
// let index = null;
// for (let i = 0; i < NewArr.length; i++) {
// if (NewArr[i].contentType == 'online' || NewArr[i].contentType == 'noline') {
// index = i;
// }
// }
// NewArr.splice(index, 1)
// that.messageList = NewArr;
// let obj = {}
// if (that.servicer_id > 0) {
// obj.contentType = 'online';
// } else if (that.servicer_id == 0) {
// obj.contentType = 'noline';
// }
// that.messageList.push(obj);
return false;
} else if (giveMsg.type == 'string') {
data.content = giveMsg.data.servicer_say;
} else if (giveMsg.type == 'image') {
data.image = giveMsg.data.servicer_say;
} else if (giveMsg.type == 'order') {
data.order_id = giveMsg.data.order_id;
} else if (giveMsg.type == 'goodssku') {
data.sku_id = giveMsg.data.goods_sku_id;
}
if (giveMsg.type == 'init') return;
that.messageList.push(data);
that.$nextTick(() => {
that.setPageScrollTo()
})
},
// 检测心跳reset
reset() {
console.log("检测心跳");
clearInterval(this.timeoutObj);
this.start(); // 启动心跳
},
// 启动心跳 start
start() {
console.log("启动心跳");
let self = this;
this.timeoutObj = setInterval(function () {
uni.sendSocketMessage({
data: 'ping',
success: (res) => {
console.log('连接中....');
},
fail: (err) => {
console.log('连接失败重新连接....');
self.openConnection();
}
});
}, this.pingInterval);
}
},
// onHide() {
// // alert("关闭")
// // 改之前的
// // console.log("我出发了")
// // this.checkOpenSocket();
// clearInterval(this.timeoutObj);
// this.timeoutObj = null;
// this.$api.sendRequest({
// url: '/servicer/api/chat/bye',
// data: {
// servicer_id: this.servicer_id,
// site_id: this.siteId
// },
// success(res) {
// uni.closeSocket();
// },
// fail: (err) => {
// uni.closeSocket();
// }
// });
// },
onUnload() {
// alert("关闭")
clearInterval(this.timeoutObj);
this.timeoutObj = null;
this.$api.sendRequest({
url: '/servicer/api/chat/bye',
data: {
servicer_id: this.servicer_id,
site_id: this.siteId
},
success(res) {
// alert("关闭1")
uni.closeSocket();
},
fail: (err) => {
// alert("关闭2")
uni.closeSocket();
}
});
}
}

View File

@@ -8,15 +8,15 @@ import {
export default {
/**
* 页面跳转
* @param {string} to 跳转链接 /pages/idnex/index
* @param {string} to 跳转链接 /pages/index/index
* @param {Object} param 参数 {key : value, ...}
* @param {string} mode 模式
*/
redirectTo(to, param, mode) {
let url = to;
let tabbarList = ['/pages/index/index', '/pages/goods/category', '/pages/vr/index', '/pages/contact/contact', '/pages/member/index'];
let tabbarList = ['/pages/index/index', '/pages/goods/category', '/pages/goods/cart', '/pages/member/index'];
if (param != undefined) {
Object.keys(param).forEach(function (key) {
Object.keys(param).forEach(function(key) {
if (url.indexOf('?') != -1) {
url += "&" + key + "=" + param[key];
} else {
@@ -26,6 +26,8 @@ export default {
}
for (let i = 0; i < tabbarList.length; i++) {
if (url.indexOf(tabbarList[i]) == 0) {
if(url.split('?')[1]) uni.setStorageSync('tabBarParams',url.split('?')[1]);
else uni.removeStorageSync('tabBarParams')
uni.switchTab({
url
});
@@ -64,8 +66,6 @@ export default {
* @param {Object} params 参数针对商品、相册里面的图片区分大中小size: big、mid、small
*/
img(img_path, params) {
var path = "";
if (img_path != undefined && img_path != "") {
if (img_path.split(',').length > 1) {
@@ -78,19 +78,17 @@ export default {
arr.pop();
arr[arr.length - 1] = arr[arr.length - 1] + "_" + params.size.toUpperCase();
arr.push(suffix);
// if(img_path.indexOf('attachment') == -1){
// img_path = arr.join(".");
// }
img_path = arr.join(".");
}
if (img_path.indexOf("http://") == -1 && img_path.indexOf("https://") == -1) {
path = Config.imgDomain + "/" + img_path;
} else {
// console.log(img_path)
path = img_path;
}
if (Config.h5Domain.indexOf('https://') != -1) {
path = path.replace('http://', 'https://');
}
}
// path += '?t=' + parseInt(new Date().getTime() / 1000);
return path;
},
@@ -98,7 +96,7 @@ export default {
* 时间戳转日期格式
* @param {Object} timeStamp
*/
timeStampTurnTime(timeStamp, type = "") {
timeStampTurnTime(timeStamp, format = "Y-m-d H:i:s") {
if (timeStamp != undefined && timeStamp != "" && timeStamp > 0) {
var date = new Date();
date.setTime(timeStamp * 1000);
@@ -113,14 +111,15 @@ export default {
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
if (type) {
if (type == 'yearMonthDay') {
return y + '年' + m + '' + d + '日';
}
return y + '-' + m + '-' + d;
} else {
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
}
format = format.replace('Y', y);
format = format.replace('m', m);
format = format.replace('d', d);
format = format.replace('H', h);
format = format.replace('i', minute);
format = format.replace('s', second);
return format;
} else {
return "";
}
@@ -187,19 +186,19 @@ export default {
* @param {Object} elem
* @param {Object} arr
*/
inArray: function (elem, arr) {
inArray: function(elem, arr) {
return arr == null ? -1 : arr.indexOf(elem);
},
/**
* 获取某天日期
* @param {Object} day
*/
getDay: function (day) {
getDay: function(day) {
var today = new Date();
var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
today.setTime(targetday_milliseconds);
const doHandleMonth = function (month) {
const doHandleMonth = function(month) {
var m = month;
if (month.toString().length == 1) {
m = "0" + month;
@@ -231,7 +230,7 @@ export default {
* @param callback
* @param url
*/
upload: function (num, params, callback, url) {
upload: function(num, params, callback, url) {
// #ifdef H5
var app_type = this.isWeiXin() ? 'wechat' : 'h5';
var app_type_name = this.isWeiXin() ? '微信公众号' : 'H5';
@@ -275,7 +274,7 @@ export default {
count: imgs_num,
sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], //从相册或者拍照
success: async function (res) {
success: async (res) => {
const tempFilePaths = res.tempFilePaths;
var _data = data;
var imgs = [];
@@ -283,9 +282,16 @@ export default {
title: '图片上传中'
})
for (var i = 0; i < tempFilePaths.length; i++) {
var path = await _self.upload_file_server(tempFilePaths[i], _data, params.path,
url);
imgs.push(path);
try {
var path = await _self.upload_file_server(tempFilePaths[i], _data, params.path,
url);
imgs.push(path);
} catch (e) {
this.showToast({
title: e,
});
break;
}
if (imgs.length == tempFilePaths.length) {
uni.hideLoading()
uni.showToast({
@@ -297,11 +303,12 @@ export default {
}
},
fail: err => {
uni.hideLoading()
uni.showToast({
title: '上传失败',
icon: 'none'
})
if (err.errMsg != 'chooseImage:fail cancel') {
uni.showToast({
title: '上传失败',
icon: 'none'
})
}
}
});
},
@@ -319,13 +326,25 @@ export default {
name: 'file',
fileType: data.fileType || 'image',
formData: data,
success: function (res) {
success: (res) => {
var path_str = JSON.parse(res.data);
if (path_str.code >= 0) {
resolve(path_str.data.pic_path);
typeof callback == 'function' && callback(path_str.data.pic_path);
} else {
reject("error");
reject(path_str.message);
}
uni.hideLoading();
},
fail: (res) => {
if (res.statusCode != 200) {
reject(res.errMsg || '上传错误');
uni.hideLoading();
}
},
complete: (res) => {
if (res.statusCode != 200) {
reject('服务器发生错误');
uni.hideLoading();
}
}
});
@@ -395,7 +414,7 @@ export default {
* 检测苹果X以上的手机
*/
isIPhoneX() {
let res = uni.getSystemInfoSync();
let res = uni.getDeviceInfo();
if (res.model.search('iPhone X') != -1) {
return true;
}
@@ -403,7 +422,7 @@ export default {
},
//判断安卓还是iOS
isAndroid() {
let platform = uni.getSystemInfoSync().platform
let platform = uni.getDeviceInfo().platform
if (platform == 'ios') {
return false;
} else if (platform == 'android') {
@@ -415,7 +434,7 @@ export default {
* @param {Object} obj
*/
deepClone(obj) {
const isObject = function (obj) {
const isObject = function(obj) {
return typeof obj == 'object';
}
@@ -431,7 +450,6 @@ export default {
}
return cloneObj
},
/**
* 打开微信企业客服
* @param {Function} fallbackFunc 降级处理函数
@@ -464,11 +482,11 @@ export default {
* @param {Object} link
*/
diyRedirectTo(link) {
//if (link == null || Object.keys(link).length == 1) return;
if (link == null || Object.keys(link).length == 1) return;
// 外部链接
if (link.wap_url && link.wap_url.indexOf('http') != -1 || link.wap_url && link.wap_url.indexOf('http') != -1) {
if (link.wap_url && link.wap_url.indexOf('http') != -1 || link.wap_url && link.wap_url.indexOf('https') != -1) {
// #ifdef H5
window.location.href = link.wap_url;
// #endif
@@ -492,10 +510,8 @@ export default {
uni.makePhoneCall({
phoneNumber: link.mobile,
success: (res) => {
},
fail: (res) => {
}
success: (res) => {},
fail: (res) => {}
});
} else if (link.name == 'MEMBER_CONTACT') {
@@ -585,9 +601,12 @@ export default {
*/
uniappIsIPhoneX() {
let isIphoneX = false;
let systemInfo = uni.getSystemInfoSync();
let deviceInfo = uni.getDeviceInfo();
let windowInfo = uni.getWindowInfo();
// #ifdef MP
if (systemInfo.model.search('iPhone X') != -1 || systemInfo.model.search('iPhone 11') != -1 || systemInfo.model.search('iPhone 12') != -1 || systemInfo.model.search('iPhone 13') != -1) {
if (deviceInfo.model.search('iPhone X') != -1 || deviceInfo.model.search('iPhone 11') != -1 || deviceInfo.model
.search('iPhone 12') != -1 || deviceInfo.model.search('iPhone 13') != -1 || parseInt(deviceInfo.model.split(
'iPhone')[1]) > 13) {
isIphoneX = true;
}
// #endif
@@ -596,11 +615,11 @@ export default {
var u = navigator.userAgent;
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isIOS) {
if (systemInfo.screenWidth == 375 && systemInfo.screenHeight == 812 && systemInfo.pixelRatio == 3) {
if (windowInfo.screenWidth == 375 && windowInfo.screenHeight == 812 && deviceInfo.pixelRatio == 3) {
isIphoneX = true;
} else if (systemInfo.screenWidth == 414 && systemInfo.screenHeight == 896 && systemInfo.pixelRatio == 3) {
} else if (windowInfo.screenWidth == 414 && windowInfo.screenHeight == 896 && deviceInfo.pixelRatio == 3) {
isIphoneX = true;
} else if (systemInfo.screenWidth == 414 && systemInfo.screenHeight == 896 && systemInfo.pixelRatio == 2) {
} else if (windowInfo.screenWidth == 414 && windowInfo.screenHeight == 896 && deviceInfo.pixelRatio == 2) {
isIphoneX = true;
}
}
@@ -612,9 +631,9 @@ export default {
*/
uniappIsIPhone11() {
let isIphone11 = false;
let systemInfo = uni.getSystemInfoSync();
let deviceInfo = uni.getDeviceInfo();
// #ifdef MP
if (systemInfo.model.search('iPhone 11') != -1) {
if (deviceInfo.model.search('iPhone 11') != -1) {
isIphone11 = true;
}
// #endif
@@ -623,7 +642,6 @@ export default {
// #ifdef H5
//判断该浏览器是否为safaria浏览器
isSafari() {
let res = uni.getSystemInfoSync();
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1 &&
ua.indexOf('linux') === -1 && ua.indexOf('android') === -1 && ua.indexOf('chrome') === -1 &&
@@ -670,7 +688,6 @@ export default {
}
},
/**
*
* @param val 转化时间字符串 (转化时分秒)
* @returns {string}
*/
@@ -689,7 +706,7 @@ export default {
* 获取定位信息
*/
getLocation(param = {}) {
/*uni.getLocation({
uni.getLocation({
type: param.type ?? 'gcj02',
success: res => {
store.commit('setLocation', res);
@@ -701,7 +718,7 @@ export default {
complete: res => {
typeof param.complete == 'function' && param.complete(res);
}
});*/
});
},
// 计算两个经纬度之间的距离
getDistance(lat1, lng1, lat2, lng2) {
@@ -709,8 +726,8 @@ export default {
var radLat2 = lat2 * Math.PI / 180.0;
var a = radLat1 - radLat2;
var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(
Math.sin(b / 2), 2)));
s = s * 6378.137; // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000;
return s;
@@ -737,7 +754,7 @@ export default {
/**
* 微信订阅消息
*/
subscribeMessage(keywords) {
subscribeMessage(keywords, callback) {
// #ifdef MP-WEIXIN
let url = '/weapp/api/weapp/messagetmplids';
// #endif
@@ -759,6 +776,9 @@ export default {
},
fail: (res) => {
console.log('fail', res)
},
complete: (res) => {
typeof callback == 'function' && callback();
}
})
// #endif
@@ -771,10 +791,18 @@ export default {
},
fail: res => {
console.log('fail', res)
},
complete: (res) => {
typeof callback == 'function' && callback();
}
});
// #endif
} else {
typeof callback == 'function' && callback();
}
},
fail: res => {
typeof callback == 'function' && callback();
}
})
},
@@ -807,10 +835,8 @@ export default {
title: shareConfig.title,
path: shareConfig.path,
imageUrl: shareConfig.imageUrl,
success: res => {
},
fail: res => {
}
success: res => {},
fail: res => {}
}
//分享到朋友圈
let query = '';
@@ -846,8 +872,7 @@ export default {
Http.sendRequest({
url: '/wechat/api/wechat/jssdkconfig',
data: {
url: uni.getSystemInfoSync().platform == 'ios' ? uni.getStorageSync('initUrl') : window.location
.href
url: uni.getDeviceInfo().platform == 'ios' ? uni.getStorageSync('initUrl') : window.location.href
},
success: res => {
if (res.code == 0) {
@@ -870,7 +895,7 @@ export default {
//获取当前路由
getCurrentRoute() {
let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
let currentRoute = currentRoutes[currentRoutes.length - 1].route //获取当前页面路由
let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
// 拼接参数
let param = [];
@@ -950,12 +975,10 @@ export default {
var points_D = [];
var points_E = [];
const DIST_AB = Math.sqrt(Math.pow(points[1]['x'] - points[0]['x'], 2) + Math.pow(points[1]['y'] - points[0][
'y'
], 2));
'y'], 2));
// 邻控制BC点间距
const DIST_BC = Math.sqrt(Math.pow(points[2]['x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1][
'y'
], 2));
'y'], 2));
// D每次在AB方向上移动的距离
if (points[0]['x'] > points[2]['x']) {
var EACH_MOVE_AD = -(DIST_AB / times);
@@ -1017,5 +1040,157 @@ export default {
verifyMobile(mobile) {
var parse = /^\d{11}$/.test(mobile);
return parse;
},
// 获取缓存key
getStorageKey(key) {
return Config.storagePrefix + key;
},
// 重写uni缓存方法
rewriteUniStorageMethod() {
const setStorageSync = uni.setStorageSync;
const setStorage = uni.setStorage;
const getStorage = uni.getStorage;
const getStorageSync = uni.getStorageSync;
const removeStorage = uni.removeStorage;
const removeStorageSync = uni.removeStorageSync;
uni.setStorage = (options) => {
options.key = this.getStorageKey(options.key);
setStorage(options)
};
uni.setStorageSync = (key, data) => {
setStorageSync(this.getStorageKey(key), data)
};
uni.getStorage = (options) => {
options.key = this.getStorageKey(options.key);
getStorage(options)
};
uni.getStorageSync = (key) => {
return getStorageSync(this.getStorageKey(key))
};
uni.removeStorage = (options) => {
options.key = this.getStorageKey(options.key);
removeStorage(options)
};
uni.removeStorageSync = (key) => {
return removeStorageSync(this.getStorageKey(key))
}
},
//生成唯一id
generateUUID() {
var d = new Date().getTime(); //Timestamp
var d2 = (performance && performance.now && (performance.now() * 1000)) ||
0; //Time in microseconds since page-load or 0 if unsupported
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
var r = Math.random() * 16; //random number between 0 and 16
if (d > 0) { //Use timestamp until depleted
r = (d + r) % 16 | 0;
d = Math.floor(d / 16);
} else { //Use microseconds since page-load if supported
r = (d2 + r) % 16 | 0;
d2 = Math.floor(d2 / 16);
}
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
},
// 获取弹新人礼弹框页面
openRegisterRewardPath(back) {
return uni.getStorageSync('initiateLogin') || back;
},
// 登录完成后返回页面
loginComplete(back, mode) {
let url = uni.getStorageSync('initiateLogin') || back;
uni.removeStorageSync('initiateLogin')
let jump = true;
let arr = getCurrentPages().reverse();
for (let i = 0; i < arr.length; i++) {
if (url.indexOf(arr[i].route) != -1) {
jump = false;
uni.navigateBack({
delta: i
});
break;
}
}
if (jump) {
this.redirectTo(url, {}, 'redirectTo')
}
},
// 微信提现收款
merchantTransfer(data,withdrawInfo,callback) {
Http.sendRequest({
url: '/wechatpay/api/transfer/transfer',
data: data,
success: res => {
if (res.code == 0) {
uni.hideLoading();
// #ifdef MP-WEIXIN
if (wx.canIUse('requestMerchantTransfer')) {
wx.requestMerchantTransfer({
mchId: withdrawInfo.mch_id,
appId: withdrawInfo.app_id,
package: res.data.package_info,
success: (res) => {
typeof callback == 'function' && callback(res);
},
fail: (res) => {
typeof callback == 'function' && callback(res);
},
});
} else {
wx.showModal({
content: '你的微信版本过低,请更新至最新版本。',
showCancel: false,
});
}
// #endif
// #ifdef H5
if (this.isWeiXin()) {
if (uni.getDeviceInfo().platform == 'ios') {
var url = uni.getStorageSync('initUrl');
} else {
var url = location.href;
}
// 获取jssdk配置
Http.sendRequest({
url: '/wechat/api/wechat/jssdkconfig',
data: {
url: url
},
success: jssdkRes => {
var wxJS = new Weixin();
wxJS.init(jssdkRes.data);
wxJS.withdrawWechat({
mch_id: withdrawInfo.mch_id,
wechat_appid: withdrawInfo.app_id,
package_info: res.data.package_info
},
res => {
typeof callback == 'function' && callback(res);
},
);
}
})
}
// #endif
} else {
this.showToast({
title: res.message,
});
}
},
fail: err => {
this.showToast({
title: err.message,
});
}
})
}
}

View File

@@ -1,119 +1,142 @@
/**
* 微信jssdk调用
*/
let Weixin = function () {
var wx = require('jweixin-module');
this.weixin = wx;
this.init = function (params) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来若要查看传入的参数可以在pc端打开参数信息会通过log打出仅在pc端时才会打印。
appId: params.appId, // 必填,公众号的唯一标识
timestamp: params.timestamp, // 必填,生成签名的时间戳
nonceStr: params.nonceStr, // 必填,生成签名的随机串
signature: params.signature, // 必填,签名
jsApiList: ['chooseWXPay', 'openAddress', 'updateAppMessageShareData',
'updateTimelineShareData', 'scanQRCode', 'hideMenuItems'
] // 必填需要使用的JS接口列表
});
}
/**
* 发起支付
* @param jsApiParame
* @param callback
* @param cancel
*/
this.pay = function (jsApiParame, callback, cancel) {
wx.ready(function () {
wx.chooseWXPay({
timestamp: jsApiParame
.timestamp, // 支付签名时间戳注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: jsApiParame.nonceStr, // 支付签名随机串,不长于 32 位
package: jsApiParame.package, // 统一支付接口返回的prepay_id参数值提交格式如prepay_id=\*\*\*
signType: jsApiParame.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: jsApiParame.paySign, // 支付签名
success: function (res) {
typeof callback == 'function' && callback(res);
},
cancel: function (res) {
typeof cancel == 'function' && cancel(res);
}
});
})
}
/**
* 获取收货地址
* @param {Object} callback
*/
this.openAddress = function (callback) {
wx.ready(function () {
wx.openAddress({
success: function (res) {
typeof callback == 'function' && callback(res);
},
fail: (res) => {
console.log('获取收货地址 fail',res);
alert(JSON.stringify(res))
}
});
})
}
/**
* 分享给好友
* @param {Object} params
* @param {Object} callback
*/
this.setShareData = function (params, callback) {
wx.ready(function () {
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wx.updateAppMessageShareData({
title: params.title || '', // 分享标题
desc: params.desc || '', // 分享描述
link: params.link || '', // 分享链接该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: params.imgUrl || '', // 分享图标
success: function (res) {
typeof callback == 'function' && callback(res);
},
fail: function (err) {
}
})
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
wx.updateTimelineShareData({
title: params.title || '', // 分享标题
link: params.link || '', // 分享链接该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: params.imgUrl || '', // 分享图标
success: function (res) {
typeof callback == 'function' && callback(res);
}
})
});
}
/**
* 扫一扫
* @param {Object} callback
*/
this.scanQRCode = function (callback) {
wx.ready(function () {
wx.scanQRCode({
needResult: 1,
scanType: ["qrCode"],
success: function (res) {
typeof callback == 'function' && callback(res);
}
});
})
}
}
export {
Weixin
/**
* 微信jssdk调用
*/
let Weixin = function () {
var wx = require('jweixin-module');
this.weixin = wx;
this.init = function (params) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来若要查看传入的参数可以在pc端打开参数信息会通过log打出仅在pc端时才会打印。
appId: params.appId, // 必填,公众号的唯一标识
timestamp: params.timestamp, // 必填,生成签名的时间戳
nonceStr: params.nonceStr, // 必填,生成签名的随机串
signature: params.signature, // 必填,签名
jsApiList: ['chooseWXPay', 'openAddress', 'updateAppMessageShareData',
'updateTimelineShareData', 'scanQRCode', 'hideMenuItems'
] // 必填需要使用的JS接口列表
});
}
/**
* 发起支付
* @param jsApiParame
* @param callback
* @param cancel
*/
this.pay = function (jsApiParame, callback, cancel) {
wx.ready(function () {
wx.chooseWXPay({
timestamp: jsApiParame
.timestamp, // 支付签名时间戳注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: jsApiParame.nonceStr, // 支付签名随机串,不长于 32 位
package: jsApiParame.package, // 统一支付接口返回的prepay_id参数值提交格式如prepay_id=\*\*\*
signType: jsApiParame.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: jsApiParame.paySign, // 支付签名
success: function (res) {
typeof callback == 'function' && callback(res);
},
cancel: function (res) {
typeof cancel == 'function' && cancel(res);
}
});
})
}
/**
* 获取收货地址
* @param {Object} callback
*/
this.openAddress = function (callback) {
wx.ready(function () {
wx.openAddress({
success: function (res) {
typeof callback == 'function' && callback(res);
},
fail: (res) => {
console.log('获取收货地址 fail',res);
alert(JSON.stringify(res))
}
});
})
}
/**
* 分享给好友
* @param {Object} params
* @param {Object} callback
*/
this.setShareData = function (params, callback) {
wx.ready(function () {
// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
wx.updateAppMessageShareData({
title: params.title || '', // 分享标题
desc: params.desc || '', // 分享描述
link: params.link || '', // 分享链接该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: params.imgUrl || '', // 分享图标
success: function (res) {
typeof callback == 'function' && callback(res);
},
fail: function (err) {
}
})
// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
wx.updateTimelineShareData({
title: params.title || '', // 分享标题
link: params.link || '', // 分享链接该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: params.imgUrl || '', // 分享图标
success: function (res) {
typeof callback == 'function' && callback(res);
}
})
});
}
/**
* 扫一扫
* @param {Object} callback
*/
this.scanQRCode = function (callback) {
wx.ready(function () {
wx.scanQRCode({
needResult: 1,
scanType: ["qrCode"],
success: function (res) {
typeof callback == 'function' && callback(res);
}
});
})
}
// 提现
this.withdrawWechat = function (data,callback) {
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['requestMerchantTransfer'],
success: function (res) {
if (res.checkResult['requestMerchantTransfer']) {
WeixinJSBridge.invoke('requestMerchantTransfer', {
mchId: data.mch_id,
appId: data.wechat_appid,
package: data.package_info,
},
function (res) {
typeof callback == 'function' && callback(res);
}
);
} else {
alert('你的微信版本过低,请更新至最新版本。');
}
},
});
});
}
}
export {
Weixin
}

View File

@@ -0,0 +1,271 @@
# AI智能客服组件
一个功能完整的AI智能客服对话组件支持多种消息类型和交互功能。
## 功能特性
- ✅ 支持对话上下文管理
- ✅ 支持多种消息类型文本、Markdown、文件、音频、视频、链接、商品卡片
- ✅ 支持语音输入和录音
- ✅ 支持图片、文件、位置等附件发送
- ✅ 支持消息操作按钮(点赞、踩等)
- ✅ 支持历史消息加载
- ✅ 响应式设计,适配多端
## 安装使用
### 1. 引入组件
`pages.json` 中注册组件:
```json
{
"usingComponents": {
"ai-chat-message": "/components/ai-chat-message/ai-chat-message"
}
}
```
### 2. 在页面中使用
```vue
<template>
<view class="container">
<ai-chat-message
ref="chat"
:initial-messages="messages"
@message-sent="onMessageSent"
@ai-response="onAIResponse"
@action-click="onActionClick" />
</view>
</template>
<script>
export default {
data() {
return {
messages: [
{
id: 1,
role: 'ai',
type: 'text',
content: '您好我是AI智能客服有什么可以帮助您的吗',
timestamp: Date.now()
}
]
}
},
methods: {
onMessageSent(message) {
console.log('用户发送消息:', message)
},
onAIResponse(message) {
console.log('AI回复消息:', message)
},
onActionClick({ action, message }) {
console.log('操作点击:', action, message)
}
}
}
</script>
```
## Props 配置
| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| initialMessages | Array | [] | 初始消息列表 |
| userAvatar | String | '/static/images/default-avatar.png' | 用户头像 |
| aiAvatar | String | '/static/images/ai-avatar.png' | AI头像 |
| showLoadMore | Boolean | true | 是否显示加载更多 |
| maxMessages | Number | 100 | 最大消息数量 |
## Events 事件
| 事件名 | 参数 | 说明 |
|--------|------|------|
| message-sent | message | 用户发送消息 |
| ai-response | message | AI回复消息 |
| action-click | {action, message} | 操作按钮点击 |
| history-loaded | messages | 历史消息加载完成 |
| file-preview | message | 文件预览 |
| audio-play | message | 音频播放 |
| audio-pause | message | 音频暂停 |
| video-play | message | 视频播放 |
| video-pause | message | 视频暂停 |
| link-open | message | 链接打开 |
| product-view | message | 商品查看 |
| input-change | value | 输入内容变化 |
## 消息类型格式
### 文本消息
```javascript
{
id: 1,
role: 'user', // 或 'ai'
type: 'text',
content: '消息内容',
timestamp: Date.now()
}
```
### Markdown消息
```javascript
{
id: 2,
role: 'ai',
type: 'markdown',
content: '# 标题\n**粗体** *斜体* `代码`',
timestamp: Date.now()
}
```
### 文件消息
```javascript
{
id: 3,
role: 'ai',
type: 'file',
fileName: '文档.pdf',
fileSize: 1024000,
url: '文件地址',
timestamp: Date.now()
}
```
### 音频消息
```javascript
{
id: 4,
role: 'ai',
type: 'audio',
title: '语音消息',
duration: 60, // 秒
url: '音频地址',
timestamp: Date.now()
}
```
### 视频消息
```javascript
{
id: 5,
role: 'ai',
type: 'video',
title: '产品介绍',
duration: 120, // 秒
url: '视频地址',
cover: '封面图',
timestamp: Date.now()
}
```
### 链接消息
```javascript
{
id: 6,
role: 'ai',
type: 'link',
title: '帮助文档',
description: '详细的使用说明',
url: 'https://example.com',
image: '缩略图',
timestamp: Date.now()
}
```
### 商品卡片
```javascript
{
id: 7,
role: 'ai',
type: 'product',
title: '商品名称',
price: 299,
description: '商品描述',
image: '商品图片',
timestamp: Date.now()
}
```
## 方法
通过 ref 调用组件方法:
```javascript
// 添加消息
this.$refs.chat.addMessage(message)
// 清空消息
this.$refs.chat.clearMessages()
// 滚动到底部
this.$refs.chat.scrollToBottom()
```
## 样式定制
组件使用 SCSS 编写,可以通过 CSS 变量进行主题定制:
```css
.ai-chat-container {
--primary-color: #ff4544;
--bg-color: #f8f8f8;
--text-color: #333;
}
```
## 方法
通过 ref 调用组件方法:
```javascript
// 添加消息
this.$refs.chat.addMessage(message)
// 清空消息
this.$refs.chat.clearMessages()
// 滚动到底部
this.$refs.chat.scrollToBottom()
// 开始语音输入
this.$refs.chat.startVoiceInput()
// 停止语音输入
this.$refs.chat.stopVoiceInput()
```
## 样式定制
组件使用 SCSS 编写,可以通过 CSS 变量进行主题定制:
```css
.ai-chat-container {
--primary-color: #ff4544;
--bg-color: #f8f8f8;
--text-color: #333;
--border-color: #eeeeee;
--user-bg: #e6f7ff;
--ai-bg: #f6f6f6;
}
```
## 图标字体
组件使用自定义图标字体,需要在页面中引入:
```html
<style>
@import url('/components/ai-chat-message/iconfont.css');
</style>
```
## 注意事项
1. 组件已适配项目中已有的 `ns-loading` 组件
2. 需要配置对应的图标字体文件
3. 音频播放功能在 H5 和 APP 端支持较好
4. 文件预览功能依赖平台能力
5. 语音输入功能需要用户授权麦克风权限

View File

@@ -0,0 +1,6 @@
{
"component": true,
"usingComponents": {
"ns-loading": "../ns-loading/ns-loading"
}
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,288 @@
<template>
<view class="demo-container">
<view class="demo-header">
<text class="demo-title">AI智能客服组件演示</text>
</view>
<ai-chat-message
ref="chat"
:initial-messages="demoMessages"
user-avatar="/static/images/demo-user.png"
ai-avatar="/static/images/demo-ai.png"
@message-sent="onMessageSent"
@ai-response="onAIResponse"
@action-click="onActionClick"
@file-preview="onFilePreview"
@audio-play="onAudioPlay"
@video-play="onVideoPlay"
@link-open="onLinkOpen"
@product-view="onProductView" />
<view class="demo-controls">
<button class="control-btn" @click="addTextMessage">添加文本消息</button>
<button class="control-btn" @click="addMarkdownMessage">添加Markdown</button>
<button class="control-btn" @click="addFileMessage">添加文件</button>
<button class="control-btn" @click="addAudioMessage">添加音频</button>
<button class="control-btn" @click="addVideoMessage">添加视频</button>
<button class="control-btn" @click="addLinkMessage">添加链接</button>
<button class="control-btn" @click="addProductMessage">添加商品</button>
<button class="control-btn" @click="clearMessages">清空消息</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
demoMessages: [
{
id: 1,
role: 'ai',
type: 'text',
content: '您好我是AI智能客服演示程序我可以展示多种消息类型。请点击下方的按钮体验不同功能',
timestamp: Date.now() - 300000,
actions: [
{ id: 1, text: '开始体验', type: 'like' }
]
}
]
}
},
methods: {
// 添加文本消息
addTextMessage() {
const message = {
id: Date.now(),
role: 'ai',
type: 'text',
content: '这是一个文本消息示例,支持**粗体**、*斜体*和`代码`格式。也可以包含换行符\n这是第二行内容。',
timestamp: Date.now(),
actions: [
{ id: 1, text: '有帮助', type: 'like' },
{ id: 2, text: '没帮助', type: 'dislike' }
]
}
this.$refs.chat.messages.push(message)
},
// 添加Markdown消息
addMarkdownMessage() {
const message = {
id: Date.now(),
role: 'ai',
type: 'markdown',
content: `# Markdown文档示例
## 二级标题
这是一个支持**粗体**、*斜体*和\`代码\`的Markdown消息。
### 功能特性
- ✅ 支持标题层级
- ✅ 支持列表展示
- ✅ 支持代码高亮
- ✅ 支持链接跳转
[查看详细文档](https://example.com)\n\n**注意:** 这是一个演示内容,实际使用时可以集成真实的文档系统。`,
timestamp: Date.now(),
actions: [
{ id: 1, text: '查看文档', type: 'like' }
]
}
this.$refs.chat.messages.push(message)
},
// 添加文件消息
addFileMessage() {
const message = {
id: Date.now(),
role: 'ai',
type: 'file',
fileName: '产品介绍文档.pdf',
fileSize: 2048000,
url: 'https://example.com/document.pdf',
timestamp: Date.now()
}
this.$refs.chat.messages.push(message)
},
// 添加音频消息
addAudioMessage() {
const message = {
id: Date.now(),
role: 'ai',
type: 'audio',
title: '产品功能介绍',
duration: 89,
url: 'https://example.com/audio.mp3',
timestamp: Date.now(),
playing: false,
currentTime: 0
}
this.$refs.chat.messages.push(message)
},
// 添加视频消息
addVideoMessage() {
const message = {
id: Date.now(),
role: 'ai',
type: 'video',
title: '产品演示视频',
duration: 180,
url: 'https://example.com/video.mp4',
cover: '/static/images/video-cover.jpg',
timestamp: Date.now()
}
this.$refs.chat.messages.push(message)
},
// 添加链接消息
addLinkMessage() {
const message = {
id: Date.now(),
role: 'ai',
type: 'link',
title: '帮助中心',
description: '详细的产品使用说明和常见问题解答',
url: 'https://example.com/help',
image: '/static/images/link-thumbnail.jpg',
timestamp: Date.now()
}
this.$refs.chat.messages.push(message)
},
// 添加商品消息
addProductMessage() {
const message = {
id: Date.now(),
role: 'ai',
type: 'product',
title: '智能手表 X1',
price: 1299,
description: '全新一代智能手表,支持心率监测、运动追踪、消息提醒等功能',
image: '/static/images/product-demo.jpg',
timestamp: Date.now(),
actions: [
{ id: 1, text: '立即购买', type: 'like' },
{ id: 2, text: '查看详情', type: 'dislike' }
]
}
this.$refs.chat.messages.push(message)
},
// 清空消息
clearMessages() {
this.$refs.chat.messages = [
{
id: 1,
role: 'ai',
type: 'text',
content: '消息已清空,可以重新开始体验!',
timestamp: Date.now()
}
]
},
// 事件处理
onMessageSent(message) {
console.log('用户发送消息:', message)
uni.showToast({
title: '消息发送成功',
icon: 'success'
})
},
onAIResponse(message) {
console.log('AI回复消息:', message)
},
onActionClick({ action, message }) {
console.log('操作点击:', action, message)
uni.showToast({
title: `点击了: ${action.text}`,
icon: 'none'
})
},
onFilePreview(message) {
console.log('文件预览:', message)
uni.showToast({
title: '正在打开文件...',
icon: 'none'
})
},
onAudioPlay(message) {
console.log('音频播放:', message)
},
onVideoPlay(message) {
console.log('视频播放:', message)
},
onLinkOpen(message) {
console.log('链接打开:', message)
uni.showToast({
title: '正在打开链接...',
icon: 'none'
})
},
onProductView(message) {
console.log('商品查看:', message)
uni.showToast({
title: '正在查看商品...',
icon: 'none'
})
}
}
}
</script>
<style lang="scss" scoped>
.demo-container {
height: 100vh;
display: flex;
flex-direction: column;
background-color: #f5f5f5;
}
.demo-header {
background-color: #ff4544;
color: white;
padding: 30rpx;
text-align: center;
.demo-title {
font-size: 32rpx;
font-weight: bold;
}
}
.demo-controls {
background-color: white;
padding: 20rpx;
border-top: 2rpx solid #eeeeee;
display: flex;
flex-wrap: wrap;
gap: 10rpx;
.control-btn {
flex: 1;
min-width: 150rpx;
height: 60rpx;
background-color: #f8f8f8;
border-radius: 30rpx;
font-size: 24rpx;
color: #333;
border: none;
&:active {
background-color: #eeeeee;
}
}
}
</style>

View File

@@ -1,638 +0,0 @@
<template>
<view class="order-container" :class="{ 'safe-area': isIphoneX }">
<!-- #ifdef MP-WEIXIN -->
<view class="payment-navbar" :style="{ 'padding-top': menuButtonBounding.top + 'px', height: menuButtonBounding.height + 'px' }">
<view class="nav-wrap">
<text class="iconfont icon-back_light" @click="back"></text>
<view class="navbar-title">确认订单</view>
</view>
</view>
<view class="payment-navbar-block" :style="{ height: menuButtonBounding.bottom + 'px' }"></view>
<!-- #endif -->
<scroll-view scroll-y="true" class="order-scroll-container">
<view class="payment-navbar-block"></view>
<template v-if="paymentData">
<template v-if="paymentData.is_virtual">
<!-- 虚拟商品联系方式 -->
<view class="mobile-wrap">
<view class="tips color-base-text">
<text class="iconfont icongantanhao"></text>
购买虚拟类商品需填写手机号方便商家与您联系
</view>
<view class="form-group">
<text class="icon">
<image :src="$util.img('public/uniapp/order/icon-mobile.png')" mode="widthFix"></image>
</text>
<text class="text">手机号码</text>
<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
</view>
</view>
</template>
<template v-else>
<!-- 配送方式 -->
<view class="delivery-mode" v-if="goodsData.delivery.express_type.length > 1">
<view class="action">
<view :class="{ active: item.name == orderCreateData.delivery.delivery_type }" v-for="(item, index) in goodsData.delivery.express_type" :key="index" @click="selectDeliveryType(item)">
{{ item.title }}
<!-- 外圆角 -->
<view class="out-radio"></view>
</view>
</view>
</view>
<view class="address-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'express'">
<view class="info-wrap" v-if="memberAddress" @click="selectAddress">
<view class="content">
<text class="name">{{ memberAddress.name ? memberAddress.name : '' }}</text>
<text class="mobile">{{ memberAddress.mobile ? memberAddress.mobile : '' }}</text>
<view class="desc-wrap">
{{ memberAddress.full_address ? memberAddress.full_address : '' }}
{{ memberAddress.address ? memberAddress.address : '' }}
</view>
</view>
<text class="cell-more iconfont icon-right"></text>
</view>
<view class="empty-wrap" v-else @click="selectAddress">
<view class="info">请设置收货地址</view>
<view class="cell-more">
<view class="iconfont icon-right"></view>
</view>
</view>
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
</view>
<view class="address-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'local'">
<view v-if="localMemberAddress">
<block v-if="storeList && Object.keys(storeList).length > 1">
<view class="local-delivery-store" v-if="storeInfo" @click="openPopup('deliveryPopup')">
<view class="info">
<text class="store-name">{{ storeInfo.store_name }}</text>
提供配送
</view>
<view class="cell-more">
<text>点击切换</text>
<text class="iconfont icon-right"></text>
</view>
</view>
<view v-else class="local-delivery-store">
<view class="info">
<text class="store-name">您的附近没有可配送的门店请选择其他配送方式</text>
</view>
</view>
</block>
<view class="info-wrap local" @click="selectAddress">
<view class="content">
<text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }}
</text>
<text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}
</text>
<view class="desc-wrap">
{{ localMemberAddress.full_address ? localMemberAddress.full_address : '' }}
{{ localMemberAddress.address ? localMemberAddress.address : '' }}
</view>
</view>
<text class="cell-more iconfont icon-right"></text>
</view>
<view class="local-box" v-if="calculateGoodsData.config.local && calculateGoodsData.delivery.local.info.time_is_open == 1">
<view class="pick-block" @click="localtime('')">
<view class="title font-size-base">送达时间</view>
<view class="time-picker">
<text :class="{ 'color-tip': !deliveryTime }">{{ deliveryTime ? deliveryTime : '请选择送达时间' }}</text>
<text class="iconfont icon-right cell-more"></text>
</view>
</view>
</view>
</view>
<view class="empty-wrap" v-else @click="selectAddress">
<view class="info">请设置收货地址</view>
<view class="cell-more">
<view class="iconfont icon-right"></view>
</view>
</view>
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
</view>
<!-- 门店信息 -->
<view class="store-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'store'">
<block v-if="storeInfo">
<view @click="openPopup('deliveryPopup')" class="store-info">
<view class="store-address-info">
<view class="info-wrap">
<view class="title">
<text>{{ storeInfo.store_name }}</text>
</view>
<view class="store-detail">
<view v-if="storeInfo.open_date">营业时间{{ storeInfo.open_date }}</view>
<view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }}
</view>
</view>
</view>
<view class="cell-more iconfont icon-right" v-if="storeList && Object.keys(storeList).length > 1"></view>
</view>
</view>
<view class="mobile-wrap store-mobile" v-if="orderCreateData.member_address">
<view class="form-group">
<text class="text">姓名</text>
<input type="text" placeholder-class="color-tip placeholder" class="input" disabled v-model="orderCreateData.member_address.name" />
</view>
</view>
<view class="mobile-wrap store-mobile" v-if="orderCreateData.member_address">
<view class="form-group">
<text class="text">预留手机</text>
<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
</view>
</view>
<view class="store-time" @click="storetime('')">
<view class="left">提货时间</view>
<view class="right">
{{ deliveryTime }}
<text class="iconfont icon-right"></text>
</view>
</view>
</block>
<view v-else class="empty">当前无自提门店请选择其它配送方式</view>
<image class="address-line" :src="$util.img('public/uniapp/order/address-line.png')"></image>
</view>
</template>
<!-- 店铺 -->
<view class="site-wrap order-goods" v-if="calculateGoodsData">
<view class="site-header">
<view class="iconfont icon-dianpu"></view>
<text class="site-name">门店</text>
</view>
<view class="site-body">
<!-- 商品 -->
<view class="goods-item" v-for="(goodsItem, goodsIndex) in calculateGoodsData.goods_list" :key="goodsIndex">
<view class="goods-wrap">
<view class="goods-img" @click="$util.redirectTo('/pages/goods/detail', { goods_id: goodsItem.goods_id })">
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" mode="aspectFill"/>
</view>
<view class="goods-info">
<view class="top-wrap">
<view @click="$util.redirectTo('/pages/goods/detail', { goods_id: goodsItem.goods_id })" class="goods-name">{{ goodsItem.sku_name }}</view>
<view class="sku" v-if="goodsItem.sku_spec_format">
<view class="goods-spec">
<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
<view>{{ x.spec_value_name }}</view>
</block>
</view>
</view>
<block v-if="goodsItem.is_virtual == 0">
<view class="error-tips" v-if="orderCreateData.delivery &&
orderCreateData.delivery.delivery_type &&
goodsItem.support_trade_type &&
goodsItem.support_trade_type.indexOf(orderCreateData.delivery.delivery_type) == -1
">
<text class="iconfont icon-gantanhao"></text>
<text>该商品不支持{{ orderCreateData.delivery.delivery_type_name }}</text>
</view>
</block>
<view class="error-tips" v-if="goodsItem.error && goodsItem.error.message">
<text class="iconfont icon-gantanhao"></text>
<text>{{ goodsItem.error.message }}</text>
</view>
</view>
<view class="goods-sub-section">
<view class="color-base-text">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="goods-price price-style large">{{ parseFloat(goodsItem.price).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(goodsItem.price).toFixed(2).split('.')[1] }}</text>
</view>
<view>
<text class="font-size-tag">x</text>
<text class="font-size-base">{{ goodsItem.num }}</text>
</view>
</view>
</view>
</view>
<view class="member-goods-card order-cell" v-if="calculateGoodsData.goods_list[goodsIndex].member_card_list" @click="selectMemberGoodsCard(goodsIndex)">
<text class="tit">次卡抵扣</text>
<view class="box text-overflow">
<block v-if="calculateGoodsData.goods_list[goodsIndex].card_promotion_money">
<text class="text">次卡抵扣{{ calculateGoodsData.goods_list[goodsIndex].card_use_num }}张/{{ calculateGoodsData.goods_list[goodsIndex].card_use_num }}次</text>
<text class="price-font">-¥{{ calculateGoodsData.goods_list[goodsIndex].card_promotion_money | moneyFormat }}</text>
</block>
<text class="color-tip" v-else>请选择次卡</text>
</view>
<text class="iconfont icon-right"></text>
</view>
<view class="goods-form" v-if="goodsData.goods_list[goodsIndex].goods_form" @click="editForm(goodsIndex)">
<ns-form :data="goodsData.goods_list[goodsIndex].goods_form.json_data" ref="goodsForm" :custom-attr="{ sku_id: goodsItem.sku_id, form_id: goodsData.goods_list[goodsIndex].goods_form.id }"/>
<text class="cell-more iconfont icon-right"></text>
<view class="shade"></view>
</view>
</view>
</view>
</view>
<view class="site-wrap buyer-message">
<view class="order-cell">
<text class="tit">买家留言</text>
<view class="box text-overflow " @click="openPopup('buyerMessagePopup')">
<text v-if="orderCreateData.buyer_message">{{ orderCreateData.buyer_message }}</text>
<text class="color-sub" v-else>无留言</text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<view v-if="paymentData.system_form" class="system-form-wrap">
<view class="order-cell">
<text class="tit">{{ paymentData.system_form.form_name }}</text>
</view>
<ns-form :data="paymentData.system_form.json_data" ref="form"/>
</view>
<view class="site-wrap" v-if="calculateGoodsData || promotionInfo || (calculateGoodsData && calculateGoodsData.max_usable_point > 0) || goodsData.invoice">
<view class="site-footer">
<view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1">
<text class="tit">优惠券</text>
<view class="box text-overflow" @click="openPopup('couponPopup')">
<template v-if="orderCreateData.coupon && orderCreateData.coupon.coupon_id">
<text>已使用优惠券,优惠</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ (calculateData && calculateData.coupon_money ? calculateData.coupon_money : 0) | moneyFormat }}</text>
</template>
<text v-else>不使用优惠券</text>
</view>
<text class="iconfont icon-right"></text>
</view>
<view class="order-cell" v-if="promotionInfo">
<text class="tit">活动优惠</text>
<view class="box text-overflow" @click="openPopup('promotionPopup')">
<text>{{ promotionInfo.title }}</text>
</view>
<text class="iconfont icon-right"></text>
</view>
<view class="order-cell point" v-if="calculateGoodsData && calculateGoodsData.max_usable_point > 0">
<text class="tit">
<text>使用{{ parseInt(calculateGoodsData.max_usable_point) }}积分可抵扣</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.point_money | moneyFormat }}</text>
</text>
<view class="box"></view>
<ns-switch class="balance-switch" @change="usePoint" :checked="orderCreateData.is_point == 1"/>
</view>
<view class="order-cell order-invoice-cell" v-if="goodsData.invoice.invoice_status == 1">
<text class="tit">发票</text>
<view class="box text-overflow" @click="openPopup('invoicePopup')">
<text v-if="orderCreateData.is_invoice == 1">{{ orderCreateData.invoice_type == 1 ? '纸质' : '电子' }}发票({{ orderCreateData.invoice_content }})</text>
<text v-else>无需发票</text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
</view>
<view class="site-wrap box member-card-wrap" v-if="paymentData.recommend_member_card && Object.keys(paymentData.recommend_member_card).length > 0">
<view class="head" @click="selectMemberCard">
<text class="iconfont icon-huiyuan"></text>
<view class="info">
开通{{ paymentData.recommend_member_card.level_name }}
<text>本单预计可省</text>
<text class="price-color">{{ paymentData.recommend_member_card.discount_money | moneyFormat }}</text>
<text>元</text>
</view>
<text class="iconfont" :class="orderCreateData.is_open_card == 1 ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></text>
</view>
<view class="body" v-if="orderCreateData.is_open_card">
<view class="item" :class="{ 'active color-base-border': item.key == orderCreateData.member_card_unit }" v-for="(item, index) in cardChargeType" :key="index" @click="selectMembercardUnit(item.key)">
<view class="title">{{ item.title }}</view>
<view class="price price-font">{{ $lang('common.currencySymbol') }}{{ parseFloat(item.value) }}/{{ item.unit }}</view>
<text class="iconfont icon-icon color-base-text price-font identify" v-if="item.key == orderCreateData.member_card_unit"></text>
</view>
</view>
</view>
<!-- 订单金额 -->
<template v-if="calculateData">
<view class="order-money">
<view class="order-cell">
<text class="tit">商品金额</text>
<view class="box">
<text class="unit color-title price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money color-title price-font">{{ calculateData.goods_money | moneyFormat }}</text>
</view>
</view>
<view class="order-cell" v-if="calculateData.is_virtual == 0 && calculateData.delivery_money > 0">
<text class="tit">运费</text>
<view class="box color-base-text">
<text class="operator">+</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.delivery_money | moneyFormat }}</text>
</view>
</view>
<view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_money > 0">
<text class="tit">
<text>税费</text>
<text class="color-base-text font-bold price-font">({{ goodsData.invoice.invoice_rate }}%)</text>
</text>
<view class="box color-base-text">
<text class="operator">+</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.invoice_money | moneyFormat }}</text>
</view>
</view>
<view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_delivery_money > 0">
<text class="tit">发票邮寄费</text>
<view class="box color-base-text">
<text class="operator">+</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.invoice_delivery_money | moneyFormat }}</text>
</view>
</view>
<view class="order-cell" v-if="calculateData.promotion_money > 0">
<text class="tit">优惠</text>
<view class="box color-base-text">
<text class="operator">-</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.promotion_money | moneyFormat }}</text>
</view>
</view>
<view class="order-cell" v-if="calculateData.coupon_money">
<text class="tit">优惠券</text>
<view class="box color-base-text">
<text class="operator">-</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.coupon_money | moneyFormat }}</text>
</view>
</view>
<view class="order-cell" v-if="calculateData.point_money > 0">
<text class="tit">积分抵扣</text>
<view class="box color-base-text">
<text class="operator">-</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.point_money | moneyFormat }}</text>
</view>
</view>
<view class="order-cell" v-if="calculateData.member_card_money > 0">
<text class="tit">会员卡</text>
<view class="box color-base-text">
<text class="operator">+</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.member_card_money | moneyFormat }}
</text>
</view>
</view>
</view>
<view v-if="transactionAgreement.title && transactionAgreement.content" class="agreement">购买前请先阅读<text @click="$refs.agreementPopup.open()">《{{ transactionAgreement.title }}》</text>,下单即代表同意该协议</view>
<view class="order-submit bottom-safe-area">
<view class="order-settlement-info">
<text class="font-size-base color-tip margin-right">共{{ calculateData.goods_num }}件</text>
<text class="font-size-base">合计:</text>
<text class=" unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class=" money price-font">{{ parseFloat(calculateData.pay_money).toFixed(2).split('.')[0] }}</text>
<text class=" unit price-font">.{{ parseFloat(calculateData.pay_money).toFixed(2).split('.')[1] }}</text>
</view>
<view class="submit-btn">
<button type="primary" class="mini" size="mini" @click="create()" v-if="!surplusStartMoney()">提交订单</button>
<button v-else class="no-submit mini" size="mini">差{{ surplusStartMoney() | moneyFormat }}起送</button>
</view>
</view>
<view class="order-submit-block"></view>
<payment ref="choosePaymentPopup" @close="payClose" v-if="calculateData"></payment>
</template>
<!-- 活动优惠弹窗 -->
<uni-popup ref="promotionPopup" type="bottom" v-if="promotionInfo">
<view class="promotion-popup popup">
<view class="popup-header">
<text class="tit">活动优惠</text>
<text class="iconfont icon-close" @click="closePopup('promotionPopup')"></text>
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view class="order-cell" style="align-items: baseline;">
<view class="tit">
<text class="promotion-mark ns-gradient-promotionpages-payment">{{ promotionInfo.title }}
</text>
</view>
<view class="promotion-content">
<view class="tit tit-content" style="white-space: pre-line;" v-html="promotionInfo.content"></view>
</view>
</view>
</scroll-view>
<view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg" @click="closePopup('promotionPopup')">确定</view>
</view>
</view>
</uni-popup>
<!-- 门店列表弹窗 -->
<uni-popup ref="deliveryPopup" type="bottom">
<view class="delivery-popup popup">
<view class="popup-header">
<text class="tit">已为您甄选出附近所有相关门店</text>
<text class="iconfont icon-close" @click="closePopup('deliveryPopup')"></text>
</view>
<view class="popup-body store-popup" :class="{ 'safe-area': isIphoneX }">
<mescroll-uni @getData="getStore" ref="mescroll" top="50px">
<block slot="list">
<view class="delivery-content">
<block v-if="storeData">
<view class="item-wrap" v-for="(item, index) in storeData" :key="index" @click="selectPickupPoint(item)">
<view class="detail">
<view class="name" :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''">
<text>{{ item.store_name }}</text>
<text v-if="item.distance">({{ item.distance }}km)</text>
</view>
<view class="info">
<view :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">营业时间:{{ item.open_date }}</view>
<view :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">地址:{{ item.full_address }}{{ item.address }}</view>
</view>
</view>
<view class="icon" v-if="item.store_id == orderCreateData.delivery.store_id">
<text class="iconfont icon-yuan_checked color-base-text"></text>
</view>
</view>
</block>
<view v-else class="empty-wrap">
<ns-empty text="所选择收货地址附近没有可以自提的门店" :isIndex="false"></ns-empty>
</view>
</view>
</block>
</mescroll-uni>
</view>
</view>
</uni-popup>
<!-- 留言弹窗 -->
<uni-popup ref="buyerMessagePopup" type="bottom">
<view style="height: auto;" class="buyermessag-popup popup" @touchmove.prevent.stop>
<view class="popup-header">
<text class="tit">买家留言</text>
<text class="iconfont icon-close" @click="closePopup('buyerMessagePopup')"></text>
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view>
<view class="buyermessag-cell">
<view class="buyermessag-form-group">
<textarea type="text" maxlength="100" placeholder="留言前建议先与商家协调一致" placeholder-class="color-tip" v-model="orderCreateData.buyer_message"/>
</view>
</view>
</view>
</scroll-view>
<view class="popup-footer" @click="saveBuyerMessage" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg">确定</view>
</view>
</view>
</uni-popup>
<!-- 优惠券弹窗 -->
<uni-popup ref="couponPopup" type="bottom" v-if="calculateGoodsData" :mask-click="false">
<view class="coupon-popup popup" @touchmove.prevent.stop>
<view class="popup-header">
<text class="tit">优惠券</text>
<text class="iconfont icon-close" @click="closePopup('couponPopup')"></text>
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view v-if="coupon_list.length > 0">
<view class="coupon-item" v-for="(couponItem, couponIndex) in coupon_list" :key="couponIndex" @click="selectCoupon(couponItem)">
<view class="coupon-info" :style="{ backgroundColor: 'var(--main-color-shallow)' }">
<view class="info-wrap">
<image class="coupon-line" mode="heightFix" :src="$util.img('public/uniapp/coupon/coupon_line.png')"/>
<view class="coupon-money">
<template v-if="couponItem.type == 'divideticket'">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text class="money">{{ parseFloat(couponItem.money) }}</text>
</template>
<template v-else-if="couponItem.type == 'reward'">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text class="money">{{ parseFloat(couponItem.money) }}</text>
</template>
<template v-else-if="couponItem.type == 'discount'">
<text class="money">{{ parseFloat(couponItem.discount) }}</text>
<text class="unit">折</text>
</template>
<view class="at-least">
<template v-if="couponItem.at_least > 0">
满{{ couponItem.at_least }}可用
</template>
<template v-else>
无门槛
</template>
</view>
</view>
</view>
<view class="desc-wrap">
<view class="coupon-name">{{ couponItem.coupon_name }}</view>
<view v-if="couponItem.type == 'discount' && couponItem.discount_limit > 0" class="limit">最多可抵¥{{ couponItem.discount_limit }}</view>
<view class="time font-size-goods-tag">有效期:{{ couponItem.end_time ? $util.timeStampTurnTime(couponItem.end_time) : '长期有效' }}</view>
</view>
<view class="iconfont" :class="orderCreateData.coupon.coupon_id == couponItem.coupon_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
</view>
</view>
</view>
<view v-else class="coupon-empty">暂无可用的优惠券</view>
</scroll-view>
<view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg" @click="useCpopon">确定</view>
</view>
</view>
</uni-popup>
<!-- 交易协议 -->
<view @touchmove.prevent>
<uni-popup ref="agreementPopup" type="center" :maskClick="false">
<view class="agreement-conten-box">
<view class="close">
<text class="iconfont icon-close" @click="$refs.agreementPopup.close()"></text>
</view>
<view class="title">{{ transactionAgreement.title }}</view>
<view class="con">
<scroll-view scroll-y="true" class="con">
<rich-text :nodes="transactionAgreement.content"></rich-text>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
<!-- 表单修改弹窗 -->
<uni-popup ref="editFormPopup" type="bottom">
<view style="height: auto;" class="form-popup popup" @touchmove.prevent.stop>
<view class="popup-header">
<text class="tit">买家信息</text>
<text class="iconfont icon-close" @click="$refs.editFormPopup.close()"></text>
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<ns-form v-if="tempFormData" :data="tempFormData.json_data" ref="tempForm"></ns-form>
</scroll-view>
<view class="popup-footer" @click="saveForm" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg">确定</view>
</view>
</view>
</uni-popup>
<uni-popup ref="memberGoodsCardPopup" type="bottom">
<view class="member-card-popup popup" @touchmove.prevent.stop>
<view class="popup-header">
<text class="tit">选择次卡</text>
<text class="iconfont icon-close" @click="$refs.memberGoodsCardPopup.close()"></text>
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view v-for="(item, index) in selectGoodsCard.cardList" class="card-item" @click="selectGoodsCard.click(item.item_id)">
<view class="content">
<view class="title">{{ item.goods_name }}</view>
<view class="info">
<text v-if="item.card_type == 'timecard'">不限次数</text>
<text v-if="item.card_type == 'oncecard'">剩余{{ item.num - item.use_num }}次</text>
<text v-if="item.card_type == 'commoncard'">剩余{{ item.total_num - item.total_use_num }}次</text>
<text>|</text>
<text>{{ item.end_time ? $util.timeStampTurnTime(item.end_time) : '长期有效' }}</text>
</view>
</view>
<view class="iconfont" :class="selectGoodsCard.itemId == item.item_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
</view>
</scroll-view>
<view class="popup-footer" @click="saveMemberGoodsCard" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg">确定</view>
</view>
</view>
</uni-popup>
</template>
</scroll-view>
<!-- 门店自提时间 -->
<ns-select-time @selectTime="selectPickupTime" ref="timePopup"></ns-select-time>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import payment from './payment.js';
export default {
name: 'common-payment',
data() {
return {};
},
props: {
api: Object,
createDataKey: String
},
mixins: [payment]
};
</script>
<style lang="scss">
@import '@/common/css/order_parment.scss';
.order-cell .promotion-content {
flex: 1;
}
</style>

View File

@@ -64,30 +64,27 @@
<view class="address-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'local'">
<view v-if="localMemberAddress">
<block v-if="storeList && Object.keys(storeList).length > 1">
<view class="local-delivery-store" v-if="storeInfo" @click="openPopup('deliveryPopup')">
<view class="info">
<block v-if="storeList && Object.keys(storeList).length > 0">
<view class="local-delivery-store">
<view class="info" v-if="storeInfo">
<text class="store-name">{{ storeInfo.store_name }}</text>
提供配送
<view>营业时间{{ storeInfo.open_date }}</view>
</view>
<view class="cell-more">
<view class="info" v-else>
<text class="store-name">超出配送范围请选择其他门店</text>
</view>
<view class="cell-more" v-if="Object.keys(storeList).length > 1" @click="openPopup('deliveryPopup')">
<text>点击切换</text>
<text class="iconfont icon-right"></text>
</view>
</view>
<view v-else class="local-delivery-store">
<view class="info">
<text class="store-name">您的附近没有可配送的门店请选择其他配送方式</text>
</view>
</view>
</block>
<view class="info-wrap local" @click="selectAddress">
<view class="content">
<text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }}
</text>
<text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}
</text>
<text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }}</text>
<text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}</text>
<view class="desc-wrap">
{{ localMemberAddress.full_address ? localMemberAddress.full_address : '' }}
{{ localMemberAddress.address ? localMemberAddress.address : '' }}
@@ -125,9 +122,9 @@
<text>{{ storeInfo.store_name }}</text>
</view>
<view class="store-detail">
<view class="close-desc" v-if="storeInfo.status == 0 && storeInfo.close_desc">{{ storeInfo.close_desc }}</view>
<view v-if="storeInfo.open_date">营业时间{{ storeInfo.open_date }}</view>
<view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }}
</view>
<view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }}</view>
</view>
</view>
<view class="cell-more iconfont icon-right" v-if="storeList && Object.keys(storeList).length > 1"></view>
@@ -145,7 +142,14 @@
<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
</view>
</view>
<view class="store-time" @click="storetime('')">
<view class="store-time" v-if="goodsData.jielong_id">
<view class="left">提货时间</view>
<view class="right">
{{ $util.timeStampTurnTime(goodsData.jielong_info.take_start_time,'Y/m/d') }} ~ {{ $util.timeStampTurnTime(goodsData.jielong_info.take_end_time,'Y/m/d') }}
</view>
</view>
<view class="store-time" @click="storetime('')" v-else>
<view class="left">提货时间</view>
<view class="right">
{{ deliveryTime }}
@@ -159,15 +163,10 @@
</template>
<!-- 店铺 -->
<view class="site-wrap order-goods" v-for="(calculateGoodsData, siteIndex) in shop_goods_list" :key="siteIndex">
<view class="site-header">
<view class="iconfont icon-dianpu"></view>
<text class="site-name">{{calculateGoodsData.site_name}}</text>
</view>
<view class="site-wrap order-goods" v-if="calculateGoodsData">
<view class="site-body">
<!-- 商品 -->
<view class="goods-item" v-for="(goodsItem, goodsIndex) in goodsSpecFormat(calculateGoodsData.goods_list)" :key="goodsIndex">
<view class="goods-item" v-for="(goodsItem, goodsIndex) in calculateGoodsData.goods_list" :key="goodsIndex">
<view class="goods-wrap">
<view class="goods-img" @click="$util.redirectTo('/pages/goods/detail', { goods_id: goodsItem.goods_id })">
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" mode="aspectFill"/>
@@ -210,6 +209,17 @@
</view>
</view>
</view>
<view class="member-goods-card order-cell" v-if="calculateGoodsData.goods_list[goodsIndex].member_card_list" @click="selectMemberGoodsCard(goodsIndex)">
<text class="tit">次卡抵扣</text>
<view class="box text-overflow">
<block v-if="calculateGoodsData.goods_list[goodsIndex].card_promotion_money">
<text class="text">次卡抵扣{{ calculateGoodsData.goods_list[goodsIndex].card_use_num }}张/{{ calculateGoodsData.goods_list[goodsIndex].card_use_num }}次</text>
<text class="price-font">-¥{{ calculateGoodsData.goods_list[goodsIndex].card_promotion_money | moneyFormat }}</text>
</block>
<text class="color-tip" v-else>请选择次卡</text>
</view>
<text class="iconfont icon-right"></text>
</view>
<view class="goods-form" v-if="goodsData.goods_list[goodsIndex].goods_form" @click="editForm(goodsIndex)">
<ns-form :data="goodsData.goods_list[goodsIndex].goods_form.json_data" ref="goodsForm" :custom-attr="{ sku_id: goodsItem.sku_id, form_id: goodsData.goods_list[goodsIndex].goods_form.id }"/>
<text class="cell-more iconfont icon-right"></text>
@@ -217,48 +227,18 @@
</view>
</view>
</view>
<view class="site-wrap buyer-message">
</view>
<view class="order-money" style="margin: 0;">
<view class="order-cell">
<text class="tit">买家留言</text>
<view class="box text-overflow " @click="openPopup('buyerMessagePopup')">
<text v-if="orderCreateData.buyer_message">{{ orderCreateData.buyer_message[calculateGoodsData.merch_id] }}</text>
<text class="color-sub" v-else>无留言</text>
</view>
<text class="iconfont icon-right"></text>
</view>
<view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1">
<text class="tit">优惠券</text>
<view class="box text-overflow"@click="openSiteCoupon(calculateGoodsData.merch_id)">
<template v-if="orderCreateData.coupon[calculateGoodsData.merch_id].coupon_id">
<text class="money price-font" style="max-width: 100%;">已选择1张优惠券</text>
<!-- <text class="unit price-font">优惠</text>
<text class="money price-font">{{ (calculateData && calculateData.coupon_money ? calculateData.coupon_money : 0) | moneyFormat }}</text> -->
</template>
<text v-else>不使用优惠券</text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<view class="site-wrap buyer-message">
<view class="order-cell">
<view class="box shop-item">
<text class="color-tip goods-num">共{{ calculateGoodsData.goods_num }}件</text>
<text class="font-size-base">小计:</text>
<text class="color-base-text unit">{{ $lang('common.currencySymbol') }}</text>
<text class="color-base-text money">{{ calculateGoodsData.goods_money | moneyFormat }}</text>
</view>
</view>
<view class="site-wrap buyer-message">
<view class="order-cell">
<text class="tit">买家留言</text>
<view class="box text-overflow " @click="openPopup('buyerMessagePopup')">
<text v-if="orderCreateData.buyer_message">{{ orderCreateData.buyer_message }}</text>
<text class="color-sub" v-else>无留言</text>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<view v-if="paymentData.system_form" class="system-form-wrap">
<view class="order-cell">
@@ -267,7 +247,7 @@
<ns-form :data="paymentData.system_form.json_data" ref="form"/>
</view>
<!-- <view class="site-wrap" v-if="calculateGoodsData || promotionInfo || (calculateGoodsData && calculateGoodsData.max_usable_point > 0) || goodsData.invoice">
<view class="site-wrap" v-if="calculateGoodsData || promotionInfo || (calculateGoodsData && calculateGoodsData.max_usable_point > 0) || goodsData.invoice">
<view class="site-footer">
<view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1">
<text class="tit">优惠券</text>
@@ -306,8 +286,8 @@
<text class="iconfont icon-right"></text>
</view>
</view>
</view> -->
</view>
<view class="site-wrap box member-card-wrap" v-if="paymentData.recommend_member_card && Object.keys(paymentData.recommend_member_card).length > 0">
<view class="head" @click="selectMemberCard">
<text class="iconfont icon-huiyuan"></text>
@@ -320,7 +300,7 @@
<text class="iconfont" :class="orderCreateData.is_open_card == 1 ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></text>
</view>
<view class="body" v-if="orderCreateData.is_open_card">
<view class="item" :class="{ 'active color-base-border': item.key == orderCreateData.member_card_unit }" v-for="(item, index) in cardChargeType" :key="index" @click="selectMembercardUnit(item.key)">
<view class="item" :class="{ 'active color-base-border': item.key == orderCreateData.member_card_unit }" v-for="(item, index) in cardChargeType" :key="index" @click="selectMemberCardUnit(item.key)">
<view class="title">{{ item.title }}</view>
<view class="price price-font">{{ $lang('common.currencySymbol') }}{{ parseFloat(item.value) }}/{{ item.unit }}</view>
<text class="iconfont icon-icon color-base-text price-font identify" v-if="item.key == orderCreateData.member_card_unit"></text>
@@ -346,7 +326,7 @@
<text class="money price-font">{{ calculateData.delivery_money | moneyFormat }}</text>
</view>
</view>
<!-- <view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_money > 0">
<view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_money > 0">
<text class="tit">
<text>税费</text>
<text class="color-base-text font-bold price-font">({{ goodsData.invoice.invoice_rate }}%)</text>
@@ -356,15 +336,15 @@
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.invoice_money | moneyFormat }}</text>
</view>
</view> -->
<!-- <view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_delivery_money > 0">
</view>
<view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_delivery_money > 0">
<text class="tit">发票邮寄费</text>
<view class="box color-base-text">
<text class="operator">+</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.invoice_delivery_money | moneyFormat }}</text>
</view>
</view> -->
</view>
<view class="order-cell" v-if="calculateData.promotion_money > 0">
<text class="tit">优惠</text>
<view class="box color-base-text">
@@ -389,7 +369,7 @@
<text class="money price-font">{{ calculateData.point_money | moneyFormat }}</text>
</view>
</view>
<!-- <view class="order-cell" v-if="calculateData.member_card_money > 0">
<view class="order-cell" v-if="calculateData.member_card_money > 0">
<text class="tit">会员卡</text>
<view class="box color-base-text">
<text class="operator">+</text>
@@ -397,7 +377,7 @@
<text class="money price-font">{{ calculateData.member_card_money | moneyFormat }}
</text>
</view>
</view> -->
</view>
</view>
<view v-if="transactionAgreement.title && transactionAgreement.content" class="agreement">购买前请先阅读<text @click="$refs.agreementPopup.open()">《{{ transactionAgreement.title }}》</text>,下单即代表同意该协议</view>
@@ -412,14 +392,76 @@
</view>
<view class="submit-btn">
<button type="primary" class="mini" size="mini" @click="create()" v-if="!surplusStartMoney()">提交订单</button>
<!-- <button v-else class="no-submit mini" size="mini">差{{ surplusStartMoney() | moneyFormat }}起送</button> -->
<button v-else class="no-submit mini" size="mini">差{{ surplusStartMoney() | moneyFormat }}起送</button>
</view>
</view>
<view class="order-submit-block"></view>
<view class="order-submit-block"></view>
<payment ref="choosePaymentPopup" @close="payClose" v-if="calculateData"></payment>
</template>
<!-- 发票弹窗 -->
<uni-popup ref="invoicePopup" type="bottom" :mask-click="false">
<view :style="orderCreateData.is_invoice == 1 ? 'height: 83vh;' : 'height: 48vh;'" class="invoice-popup popup" @touchmove.prevent.stop>
<view class="popup-header">
<text class="tit">发票</text>
<text class="iconfont icon-close" @click="closePopup('invoicePopup')"></text>
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view>
<view class="invoice-cell" v-if="goodsData.invoice">
<text class="tit">需要发票</text>
<view class="option-grpup">
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.is_invoice == 0 }" @click="changeIsInvoice">不需要</view>
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.is_invoice == 1 }" @click="changeIsInvoice">需要</view>
</view>
</view>
<block v-if="orderCreateData.is_invoice == 1">
<view class="invoice-cell">
<text class="tit">发票类型</text>
<view class="option-grpup">
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.invoice_type == item }" @click="changeInvoiceType(item)" v-for="(item, index) in goodsData.invoice.invoice_type.split(',')" :key="index">
{{ item == 1 ? '纸质' : '电子' }}
</view>
</view>
</view>
<view class="invoice-cell">
<text class="tit">抬头类型</text>
<view class="option-grpup">
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.invoice_title_type == 1 }" @click="changeInvoiceTitleType(1)">
个人
</view>
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.invoice_title_type == 2 }" @click="changeInvoiceTitleType(2)">
企业
</view>
</view>
</view>
<view class="invoice-cell">
<text class="tit">发票信息</text>
<view class="invoice-form-group">
<input type="text" placeholder="请填写抬头名称" v-model.trim="orderCreateData.invoice_title" />
<input v-if="orderCreateData.invoice_title_type == 2" type="text" placeholder="请填写纳税人识别号" v-model.trim="orderCreateData.taxpayer_number" />
<input type="text" placeholder="请填写邮寄地址" v-model.trim="orderCreateData.invoice_full_address" v-if="orderCreateData.invoice_type == 1" />
<input type="text" placeholder="请填写邮箱" v-model.trim="orderCreateData.invoice_email" v-if="orderCreateData.invoice_type == 2" />
</view>
</view>
<view class="invoice-cell">
<text class="tit">发票内容</text>
<view class="option-grpup">
<view :key="index" v-for="(item, index) in goodsData.invoice.invoice_content_array" :class="{ 'color-base-bg active': item == orderCreateData.invoice_content }" @click="changeInvoiceContent(item)" class="option-item content">
{{ item }}
</view>
</view>
</view>
</block>
<view class="invoice-tops">发票内容将以根据税法调整,具体请以展示为准,发票内容显示详细商品名 称及价格信息</view>
</view>
</scroll-view>
<view class="popup-footer" @click="saveInvoice" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg">确定</view>
</view>
</view>
</uni-popup>
<!-- 活动优惠弹窗 -->
<uni-popup ref="promotionPopup" type="bottom" v-if="promotionInfo">
@@ -431,8 +473,7 @@
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view class="order-cell" style="align-items: baseline;">
<view class="tit">
<text class="promotion-mark ns-gradient-promotionpages-payment">{{ promotionInfo.title }}
</text>
<text class="promotion-mark ns-gradient-promotionpages-payment">{{ promotionInfo.title }}</text>
</view>
<view class="promotion-content">
<view class="tit tit-content" style="white-space: pre-line;" v-html="promotionInfo.content"></view>
@@ -465,6 +506,7 @@
<text v-if="item.distance">({{ item.distance }}km)</text>
</view>
<view class="info">
<view v-if="item.status == 0 && item.close_desc" class="close-desc">{{ item.close_desc }}</view>
<view :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">营业时间:{{ item.open_date }}</view>
<view :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">地址:{{ item.full_address }}{{ item.address }}</view>
</view>
@@ -478,6 +520,33 @@
<ns-empty text="所选择收货地址附近没有可以自提的门店" :isIndex="false"></ns-empty>
</view>
</view>
<!-- <block v-if="storeList">
<view class="item-wrap" v-for="(item, index) in storeList" :key="index"
@click="selectPickupPoint(item)">
<view class="detail">
<view class="name"
:class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''">
<text>{{ item.store_name }}</text>
<text v-if="item.distance">({{ item.distance }}km)</text>
</view>
<view class="info">
<view
:class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''"
class="font-size-goods-tag">
营业时间:{{ item.open_date }}
</view>
<view
:class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''"
class="font-size-goods-tag">
地址:{{ item.full_address }}{{ item.address }}
</view>
</view>
</view>
<view class="icon" v-if="item.store_id == orderCreateData.delivery.store_id">
<text class="iconfont icon-yuan_checked color-base-text"></text>
</view>
</view>
</block> -->
</block>
</mescroll-uni>
@@ -509,7 +578,7 @@
</uni-popup>
<!-- 优惠券弹窗 -->
<uni-popup ref="couponPopup" type="bottom" :mask-click="false">
<uni-popup ref="couponPopup" type="bottom" v-if="calculateGoodsData" :mask-click="false">
<view class="coupon-popup popup" @touchmove.prevent.stop>
<view class="popup-header">
<text class="tit">优惠券</text>
@@ -517,8 +586,8 @@
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view v-if="merchCoupon.data.length > 0">
<view class="coupon-item" v-for="(couponItem, couponIndex) in merchCoupon.data" :key="couponIndex" @click="selectCoupon(couponItem,merchCoupon.merch_id)">
<view v-if="coupon_list.length > 0">
<view class="coupon-item" v-for="(couponItem, couponIndex) in coupon_list" :key="couponIndex" @click="selectCoupon(couponItem)">
<view class="coupon-info" :style="{ backgroundColor: 'var(--main-color-shallow)' }">
<view class="info-wrap">
<image class="coupon-line" mode="heightFix" :src="$util.img('public/uniapp/coupon/coupon_line.png')"/>
@@ -536,12 +605,8 @@
<text class="unit">折</text>
</template>
<view class="at-least">
<template v-if="couponItem.at_least > 0">
满{{ couponItem.at_least }}可用
</template>
<template v-else>
无门槛
</template>
<template v-if="couponItem.at_least > 0">满{{ couponItem.at_least }}可用</template>
<template v-else>无门槛</template>
</view>
</view>
</view>
@@ -550,7 +615,7 @@
<view v-if="couponItem.type == 'discount' && couponItem.discount_limit > 0" class="limit">最多可抵¥{{ couponItem.discount_limit }}</view>
<view class="time font-size-goods-tag">有效期:{{ couponItem.end_time ? $util.timeStampTurnTime(couponItem.end_time) : '长期有效' }}</view>
</view>
<view class="iconfont" :class="selectCouponId == couponItem.coupon_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
<view class="iconfont" :class="orderCreateData.coupon.coupon_id == couponItem.coupon_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
</view>
</view>
</view>
@@ -558,7 +623,7 @@
</scroll-view>
<view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg" @click="useCpopon">确定</view>
<view class="confirm-btn color-base-bg" @click="useCoupon">确定</view>
</view>
</view>
</uni-popup>
@@ -573,7 +638,7 @@
<view class="title">{{ transactionAgreement.title }}</view>
<view class="con">
<scroll-view scroll-y="true" class="con">
<rich-text :nodes="transactionAgreement.content"></rich-text>
<ns-mp-html :content="transactionAgreement.content"></ns-mp-html>
</scroll-view>
</view>
</view>
@@ -588,7 +653,7 @@
<text class="iconfont icon-close" @click="$refs.editFormPopup.close()"></text>
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<ns-form v-if="tempFormData" :data="tempFormData.json_data" ref="tempForm"></ns-form>
<ns-form v-if="tempFormData" :data="tempFormData.json_data" ref="tempForm" />
</scroll-view>
<view class="popup-footer" @click="saveForm" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg">确定</view>
@@ -603,7 +668,7 @@
<text class="iconfont icon-close" @click="$refs.memberGoodsCardPopup.close()"></text>
</view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view v-for="(item, index) in selectGoodsCard.cardList" class="card-item" @click="selectGoodsCard.click(item.item_id)">
<view v-for="(item, index) in selectGoodsCard.cardList" class="card-item" @click="selectGoodsCard.click(item.item_id)" :key="item.item_id">
<view class="content">
<view class="title">{{ item.goods_name }}</view>
<view class="info">
@@ -655,4 +720,4 @@
.order-cell .promotion-content {
flex: 1;
}
</style>
</style>

View File

@@ -1,26 +1,27 @@
<template>
<x-skeleton data-component-name="diy-article" type="list" :loading="loading" :configs="skeletonConfig">
<view class="article-wrap" :style="warpCss">
<view :class="['list-wrap', value.style]" :style="warpCss">
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :style="itemCss">
<view class="article-img">
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
</view>
<view class="info-wrap">
<text class="title">{{ item.article_title }}</text>
<text class="desc" style="color:#888;font-size: 24rpx; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">{{ item.article_abstract }}</text>
<view class="read-wrap">
<block v-if="item.category_name">
<text class="category-icon"></text>
<text>{{ item.category_name }}</text>
</block>
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
<view :style="value.pageStyle" v-if="loading || (list && list.length)">
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig">
<view class="article-wrap" :style="warpCss">
<view :class="['list-wrap', value.style]" :style="warpCss">
<view :class="['item', value.ornament.type]" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :style="itemCss">
<view class="article-img">
<image class="cover-img" :src="$util.img(item.cover_img)" mode="widthFix" @error="imgError(index)" />
</view>
<view class="info-wrap">
<text class="title">{{ item.article_title }}</text>
<view class="read-wrap">
<block v-if="item.category_name">
<text class="category-icon"></text>
<text>{{ item.category_name }}</text>
</block>
<text class="date">{{ $util.timeStampTurnTime(item.create_time, 'Y-m-d') }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
</x-skeleton>
</x-skeleton>
</view>
</template>
<script>
@@ -29,7 +30,10 @@
name: 'diy-article',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -1,4 +1,5 @@
<template>
<view :style="value.pageStyle" v-if="loading || (list && list.length)">
<x-skeleton data-component-name="diy-bargain" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-bargain" :class="[value.template, value.style]" :style="warpCss">
@@ -123,6 +124,7 @@
</view>
</x-skeleton>
</view>
</template>
<script>
@@ -130,7 +132,10 @@
name: 'diy-bargain',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -33,14 +33,13 @@
</block>
<block v-if="type == 'goods'">
<view class="categoty-goods-wrap" v-if="loadType == 'part'"
:style="'padding-top:' + (value.search ? 0 : '20rpx')">
<view class="categoty-goods-wrap" v-if="loadType == 'part'" :style="'padding-top:' + (value.search ? 0 : '20rpx')">
<!-- 分类筛选 -->
<block v-if="category.child_list && value.goodsLevel == 2">
<view class="screen-category-wrap">
<scroll-view scroll-x="true" class="screen-category" :class="{ 'screen-category-4': value.template == 4 }" :scroll-with-animation="true" :scroll-into-view="scrollIntoView">
<view class="item" id="category-2--1" :class="{ selected: categoryId == -1 }" @click="selectCategoey(-1)">全部</view>
<view class="item" :id="'category-2-' + oneIndex" :class="{ selected: categoryId == oneIndex }" @click="selectCategoey(oneIndex)" v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
<view class="item" id="category-2--1" :class="{ selected: categoryId == -1 }" @click="selectCategory(-1)">全部</view>
<view class="item" :id="'category-2-' + oneIndex" :class="{ selected: categoryId == oneIndex }" @click="selectCategory(oneIndex)" v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
{{ one.category_name }}
</view>
</scroll-view>
@@ -50,14 +49,14 @@
<view class="screen-category-popup" @click="$refs.screenCategoryPopup.close()">
<scroll-view scroll-y="true" class="screen-category" :class="{ 'screen-category-4': value.template == 4 }">
<view class="title">全部</view>
<view class="item" :class="{ selected: categoryId == oneIndex }" @click="selectCategoey(oneIndex)" v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
<view class="item" :class="{ selected: categoryId == oneIndex }" @click="selectCategory(oneIndex)" v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
{{ one.category_name }}
</view>
</scroll-view>
</view>
</uni-popup>
</block>
<!---->
<scroll-view scroll-y="true" class="scroll-goods-view" lower-threshold="300" :scroll-top="scrollTop" @scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll">
<!--一级分类展示商品显示-->
@@ -70,6 +69,9 @@
<view class="goods-img" @click="toDetail(item)">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
<view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }}</view>
<view class="sell-out" v-if="item.goods_stock <= 0">
<text class="iconfont icon-shuqing"></text>
</view>
</view>
<view class="info-wrap">
<view class="name-wrap" @click="toDetail(item)">
@@ -293,7 +295,7 @@
oneCategorySelect: function() {
this.scrollTop = -1;
this.goodsList = [];
this.selectCategoey(-1);
this.selectCategory(-1);
},
select: function() {
if (this.index == this.select) {
@@ -607,7 +609,7 @@
}
this.$emit('selectsku', data);
},
selectCategoey(index) {
selectCategory(index) {
this.categoryId = index;
this.pageIndex = 0;
this.totalPage = 1;
@@ -667,7 +669,7 @@
this.$emit('switch', index);
} else {
let index = this.categoryId - 1;
this.selectCategoey(index);
this.selectCategory(index);
}
} else {
if (this.categoryId == -1 || (this.category.child_list && this.categoryId == this.category.child_list.length - 1)) {
@@ -675,7 +677,7 @@
this.$emit('switch', index);
} else {
let index = this.categoryId + 1;
this.selectCategoey(index);
this.selectCategory(index);
}
}
},
@@ -995,7 +997,27 @@
height: 100%;
}
}
.sell-out{
position: absolute;
z-index: 1;
width: 180rpx;
height: 180rpx;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
border-radius: $border-radius;
text{
color: #fff;
font-size: 150rpx;
position: absolute;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
}
}
.info-wrap {
flex: 1;
display: flex;
@@ -1171,10 +1193,28 @@
height: auto;
margin-right: 0;
line-height: 1;
position: relative;
image {
border-radius: 8rpx;
}
.sell-out{
position: absolute;
z-index: 1;
width: 100%;
height: auto;
top: 0;
left: 0;
bottom:0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
border-radius: $border-radius;
text{
color: #fff;
font-size: 240rpx;
}
}
}
.select-sku {
@@ -1200,7 +1240,7 @@
.screen-category-wrap {
display: flex;
padding-top: 20rpx;
.icon-unfold {
font-size: 24rpx;
color: #999;

View File

@@ -2,20 +2,20 @@
<view data-component-name="diy-category" :class="['category-page-wrap', 'category-template-' + value.template]"
:style="{height: 'calc(100vh - '+ tabBarHeight +')' }">
<!-- #ifdef MP-WEIXIN -->
<!-- <block v-if="value.template == 4">
<block v-if="value.template == 4">
<view class="search-box" v-if="value.search" @click="$util.redirectTo('/pages_tool/goods/search')" :style="navbarInnerStyle">
<view class="search-content">
<input type="text" class="uni-input font-size-tag" maxlength="50" :placeholder="$lang('search')" confirm-type="search" disabled="true" />
<input type="text" class="uni-input font-size-tag" maxlength="50" :placeholder="$lang('search')" confirm-type="search" readonly="true" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
</view>
<view :style="navbarInnerStyle" v-if="!value.search">商品分类</view>
</block> -->
</block>
<block v-if="value.template != 4">
<!-- <view :style="navbarInnerStyle">商品分类</view> -->
<view :style="navbarInnerStyle">商品分类</view>
<view class="search-box" v-if="value.search" @click="$util.redirectTo('/pages_tool/goods/search')" :style="wxSearchHeight">
<view class="search-content">
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" disabled="true" />
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" readonly="true" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
</view>
@@ -24,11 +24,12 @@
<!-- #ifdef H5 -->
<view class="search-box" v-if="value.search" @click="$util.redirectTo('/pages_tool/goods/search')">
<view class="search-content">
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" disabled="true" />
<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" readonly="true" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
</view>
<!-- #endif -->
<view class="template-four wx" v-if="value.template == 4">
<scroll-view scroll-x="true" class="template-four-wrap" :scroll-with-animation="true" :scroll-into-view="'category-one-' + oneCategorySelect" enable-flex="true">
<view class="category-item" :id="'category-one-' + index" v-for="(item, index) in templateFourData" :key="index" :class="{ select: oneCategorySelect == index }" @click="templateFourOneFn(index)">
@@ -71,12 +72,13 @@
{ 'border-bottom': value.template == 4 && select + 1 === index },
{ 'border-top': value.template == 4 && select - 1 === index }
]" @click="switchOneCategory(index)">
<view class="">{{ item.category_name }}</view>
<view>{{ item.category_name }}</view>
</view>
</view>
</scroll-view>
<view class="right-flex-wrap">
<scroll-view scroll-y="true" class="content-wrap" v-if="value.template == 1 || loadType == 'all'"
ref="contentWrap" :scroll-into-view="categoryId" :scroll-with-animation="true"
@scroll="listenScroll" @touchstart="touchStart" :refresher-enabled="true"
@@ -113,8 +115,8 @@
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix"></image>
<view class="tips">暂时没有分类哦</view>
</view>
<!-- <view class="cart-box" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length">
<view class="cart-bottom-block" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length"></view>
<view class="cart-box" v-if="(value.template == 2 || value.template == 4) && value.quickBuy && storeToken && categoryTree && categoryTree.length" :style="{ bottom: tabBarHeight }" :class="{ active: isIphoneX }">
<view class="left-wrap">
<view class="cart-icon" ref="cartIcon" :animation="cartAnimation" @click="$util.redirectTo('/pages/goods/cart')">
<text class="iconfont icon-ziyuan1"></text>
@@ -127,9 +129,10 @@
<text class="unit font-size-tag price-font">.{{ cartTotalMoney[1] ? cartTotalMoney[1] : '00' }}</text>
</view>
</view>
<view class="right-wrap"><button type="primary" class="settlement-btn" @click="settlement">去结算</button>
<view class="right-wrap">
<button type="primary" class="settlement-btn" @click="settlement">去结算</button>
</view>
</view> -->
</view>
<view class="cart-point" :style="{ left: item.left + 'px', top: item.top + 'px' }" :key="index" v-for="(item, index) in carIconList"></view>
@@ -176,34 +179,27 @@
cartAnimation: {},
loadType: '',
templateFourData: [],
isIphoneX: false, //判断手机是否是iphoneX以上,
lang:uni.getStorageSync("lang")//en-us 英文
};
},
created() {
this.isIphoneX = this.$util.uniappIsIPhoneX();
this.getCategoryTree();
this.loadType = this.value.goodsLevel == 1 && this.value.loadType == 'all' ? 'all' : 'part';
},
mounted() {
query = uni.createSelectorQuery().in(this);
query
.select('.content-wrap')
.boundingClientRect(data => {
if (data) contentWrapHeight = data.height;
})
.exec();
query.select('.content-wrap').boundingClientRect(data => {
if (data) contentWrapHeight = data.height;
}).exec();
setTimeout(() => {
query
.select('.end-tips')
.boundingClientRect(data => {
if (data && data.top > contentWrapHeight) this.endTips = 1;
})
.exec();
query
.select('.cart-icon')
.boundingClientRect(data => {
if (data) cartPosition = data;
})
.exec();
query.select('.end-tips').boundingClientRect(data => {
if (data && data.top > contentWrapHeight) this.endTips = 1;
}).exec();
query.select('.cart-icon').boundingClientRect(data => {
if (data) cartPosition = data;
}).exec();
if (this.value.template == 1) this.getHeightArea(-1);
}, 500);
},
@@ -250,7 +246,7 @@
style += 'padding-top:' + this.navbarHeight + 'px;';
style += 'text-align: center;';
style += 'line-height:' + menuButtonInfo.height * 2 + 'rpx;';
style += 'font-size: 14px;';
style += 'font-size: 16px;';
style += 'padding-bottom: 10rpx;';
}
return style;
@@ -282,27 +278,48 @@
pageShow() {
this.$store.dispatch('getCartNumber');
if (!this.heightArea.length) this.getHeightArea(-1);
this.dealCategoryData()
},
dealCategoryData() {
if (uni.getStorageSync('tabBarParams')) {
if (this.value.template != 4) {
this.categoryTree.forEach((item,index) => {
if(item.category_id == uni.getStorageSync('tabBarParams').split('=')[1]) {
this.select = index;
this.categoryId = 'category-' + index;
// 阻止切换分类之后滚动事件也立即执行
}
})
} else {
this.templateFourData.forEach((item,index) => {
if(item.category_id == uni.getStorageSync('tabBarParams').split('=')[1]) {
this.oneCategorySelect = index;
this.categoryId = 'category-' + index;
// 阻止切换分类之后滚动事件也立即执行
this.categoryTree = this.templateFourData[index].child_list || [];
this.select = 0;
}
})
}
uni.removeStorageSync('tabBarParams')
}
},
/**
* 获取高度区间
*/
getHeightArea(index) {
let heightArea = [];
query
.selectAll('.content-wrap .child-category')
.boundingClientRect(data => {
if (data && data.length) {
data.forEach((item, index) => {
if (index == 0) heightArea.push([0, item.height]);
else heightArea.push([heightArea[index - 1][1], heightArea[index - 1][1] +
item.height
]);
});
}
})
.exec();
query.selectAll('.content-wrap .child-category').boundingClientRect(data => {
if (data && data.length) {
data.forEach((item, index) => {
if (index == 0) heightArea.push([0, item.height]);
else heightArea.push([heightArea[index - 1][1], heightArea[index - 1][1] + item.height]);
});
}
}).exec();
this.heightArea = heightArea;
if (index != -1 && index < this.categoryTree.length - 1) this.$refs.categoryItem[index + 1].getGoodsList();
this.refreshData();
},
/**
* 获取全部分类
@@ -332,6 +349,7 @@
return item;
});
}
this.dealCategoryData()
}
}
});
@@ -364,8 +382,7 @@
break;
}
}
if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] -
scrollTop - contentWrapHeight < 300) {
if (this.value.template != 1 && this.value.loadType == 'all' && this.heightArea[this.select][1] - scrollTop - contentWrapHeight < 300) {
this.$refs.categoryItem[this.select].getGoodsList();
}
}
@@ -433,6 +450,37 @@
});
},
settlement() {
// 是否有商品库存不足 不足最小购买数 超过最大购买数
var no_buy = false;
for (let k in this.cartList) {
let item = this.cartList[k];
for (let sku in item) {
if (item.max_buy && item.num > item.max_buy){
no_buy = true;
this.$util.showToast({title: '商品' + item.goods_name+'商品最多可购买'+item.max_buy+'件'})
break;
}
if (typeof item[sku] == 'object') {
if (item[sku].num > item[sku].stock){
no_buy = true;
this.$util.showToast({title: '商品' + item.goods_name+'库存不足'})
break;
}
if (item[sku].min_buy && item[sku].num < item[sku].min_buy){
no_buy = true;
this.$util.showToast({title: '商品' + item.goods_name+'商品最少要购买'+item[sku].min_buy+'件'})
break;
}
}
}
}
if(no_buy) return;
if (!this.cartIds.length || this.isSub) return;
this.isSub = true;
@@ -520,7 +568,7 @@
},
// 操作多规格商品弹框后,刷新商品数据
refreshData() {
this.$refs.categoryItem[this.select].loadGoodsCartNum(true);
if(this.$refs.categoryItem) this.$refs.categoryItem[this.select].loadGoodsCartNum(true);
}
}
};
@@ -529,7 +577,8 @@
<style lang="scss">
.category-page-wrap {
width: 100vw;
// height: calc(100vh - var(--tab-bar-height, 0));
height: 100vh;
box-sizing: border-box;
display: flex;
flex-direction: column;
background-color: #fff;
@@ -584,10 +633,16 @@
view {
color: #222222;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
// white-space: nowrap;
// text-overflow: ellipsis;
line-height: 1.3;
overflow: hidden;
text-align: center;
// display: -webkit-box;
// -webkit-line-clamp: 2;
// -webkit-box-orient: vertical;
word-break: break-all;
max-height: 100rpx;
}
&.border-top {
@@ -667,6 +722,11 @@
.cart-box {
height: 100rpx;
width: 100%;
position: fixed;
left: 0;
bottom: var(--tab-bar-height, 0);
// bottom: calc( constant(safe-area-inset-bottom) + 110rpx );
// bottom: calc( env(safe-area-inset-bottom) + 110rpx );
background: #fff;
border-top: 1px solid #f5f5f5;
box-sizing: border-box;
@@ -739,6 +799,11 @@
}
}
.cart-box.active {
bottom: calc(constant(safe-area-inset-bottom) + 110rpx) !important;
bottom: calc(env(safe-area-inset-bottom) + 110rpx) !important;
}
.cart-point {
width: 26rpx;
height: 26rpx;
@@ -785,7 +850,7 @@
}
.cart-box {
position: relative;
// position: relative;
z-index: 2;
}
@@ -865,15 +930,30 @@
}
.text {
padding: 2rpx 16rpx;
padding: 2rpx 0;
border-radius: 40rpx;
font-size: $font-size-tag;
box-sizing: border-box;
width: 100%;
box-sizing: border-box;
text-align: center;
overflow: hidden;
}
.ellipsis {
// text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
&.selected {
.text {
background-color: $base-color;
color: var(--btn-text-color);
line-height: 1.3;
border: 4rpx solid transparent;
border-color: $base-color;
}
}
}
@@ -1004,4 +1084,7 @@
border-bottom-right-radius: 8rpx;
}
}
.cart-bottom-block {
height: 100rpx;
}
</style>

View File

@@ -1,5 +1,7 @@
<template>
<view data-component-name="diy-comp-extend"></view>
<view data-component-name="diy-comp-extend" :style="value.pageStyle">
<view></view>
</view>
</template>
<script>
@@ -8,7 +10,10 @@ export default {
name: 'diy-comp-extend',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -1,23 +1,91 @@
<template>
<x-skeleton data-component-name="diy-coupon" type="banner" :loading="loading" :configs="skeletonConfig">
<view class="coupon-wrap" :class="'coupon-box-' + value.style" :style="[
value.couponType == 'img' && { backgroundImage: 'url(' + $util.img(value.couponBgUrl) + ')' },
value.couponType == 'color' && { backgroundColor: value.couponBgColor }
]">
<view :style="value.pageStyle" v-if="loading || (computedCouponList && computedCouponList.length)">
<x-skeleton type="banner" :loading="loading" :configs="skeletonConfig">
<view class="coupon-wrap" :class="'coupon-box-' + value.style" :style="[
value.couponType == 'img' && { backgroundImage: 'url(' + $util.img(value.couponBgUrl) + ')' },
value.couponType == 'color' && { backgroundColor: value.couponBgColor }
]">
<template v-if="value.style == '1'">
<swiper class="coupon-style-one" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<template v-if="value.style == '1'">
<swiper class="coupon-style-one" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view v-for="(item, index) in computedCouponList" class="coupon-item"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style1-bg.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view v-for="(item, index) in computedCouponList" class="coupon-item" v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style1-bg.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign"></text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '2'">
<swiper class="coupon-style-two" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_bg1.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign"></text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '领取' }}</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '3'">
<swiper class="coupon-style-three" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_shu.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign"></text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
@@ -26,125 +94,188 @@
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
<view class="coupon-type font-size-tag">
<text :style="{ color: value.limitColor }">{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}</text>
<view class="item-text">{{item.goods_type_name}}</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '领取' }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text }}
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用</view>
</view>
</swiper-item>
</swiper>
</template>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '4'">
<swiper class="coupon-style-four" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style4_bg.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign"></text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '立即领取' }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '2'">
<swiper class="coupon-style-two" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_bg1.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign"></text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
<template v-if="value.style == '5'">
<view class="coupon-style-five">
<view class="coupon-all">
<view class="coupon-box">
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="index" @click="couponAction(item, index)">
<image :src="$util.img('public/uniapp/coupon/style5_bg.png')"></image>
<view class="coupon">
<view class="coupon-info">
<view class="coupon-num" v-if="item.discount == '0.00'" :style="{ color: value.moneyColor }">
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-num" v-else :style="{ color: value.moneyColor }">
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
</view>
<view class="coupon-line"></view>
<view class="coupon-content">
<view class="coupon-type">
<view class="coupon-name" :style="{ color: value.nameColor }">{{ item.coupon_name }}</view>
<text class="coupon-least" :style="{ color: value.limitColor }" v-if="item.at_least > 0">{{ Number(item.at_least) }}元可用</text>
<text class="coupon-least" :style="{ color: value.limitColor }" v-else>无门槛优惠券</text>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '立即领取' }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</view>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text || '领取' }}
</view>
<view class="coupon-get use" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</template>
<template v-if="value.style == '3'">
<swiper class="coupon-style-three" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/coupon_shu.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign"></text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-type font-size-tag">
<text :style="{ color: value.limitColor }">{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}</text>
<view class="item-text" v-if="item.goods_type == 1">所有商品可用</view>
<view class="item-text" v-else-if="item.goods_type == 2">指定商品可用</view>
<view class="item-text" v-else-if="item.goods_type == 3">指定商品不可用</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text || '领取' }}
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '4'">
<swiper class="coupon-style-four" circular>
<swiper-item v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex" class="coupon-item-box">
<view class="coupon-item" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style4_bg.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-info">
<view class="coupon-num" :style="{ color: value.moneyColor }" v-if="!parseInt(item.discount)">
<text class="font-size-tag coupon-sign"></text>
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
</view>
<view class="coupon-num" :style="{ color: value.moneyColor }" v-else>
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-type font-size-tag" :style="{ color: value.limitColor }">
{{ item.at_least > 0 ? '满' + Number(item.at_least) + '元可用' : '无门槛优惠券' }}
<template v-if="value.style == '6'">
<swiper class="coupon-style-six" circular>
<swiper-item class="style-six-wrap" v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex">
<view class="coupon" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-1.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-content">
<view class="price-wrap">
<text class="price" :style="{ color: value.moneyColor }">{{ (item.discount == '0.00' ? item.money : item.discount) | moneyConduct }}</text>
<text class="unit">{{ item.discount == '0.00' ? '元' : '折' }}</text>
</view>
<text class="text">优惠券</text>
</view>
<!-- <text class="btn" v-if="item.useState == 0" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">{{ value.btnStyle.text }}</text>
</text>
<text class="btn" v-if="parseInt(item.useState)" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">去使用</text>
</text> -->
<text class="btn" v-if="item.useState == 0" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">{{ value.btnStyle.text }}</text>
</text>
<text class="btn to-use" v-if="item.useState == 1" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">去使用</text>
</text>
<text class="btn disabled" v-if="item.useState == 2" :style="{
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">已抢光</text>
</text>
<text class="btn disabled" v-if="item.useState == 3" :style="{
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">已失效</text>
</text>
<text class="btn disabled" v-if="item.useState == 4" :style="{
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">已使用</text>
</text>
<text class="limit" :style="{ color: value.limitColor }" v-if="parseFloat(item.at_least) > 0">{{ item.at_least | moneyConduct }}元使用</text>
<text class="limit" :style="{ color: value.limitColor }" v-else>无门槛使用</text>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text || '立即使用' }}
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用</view>
</view>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '5'">
<view class="coupon-style-five">
<view class="coupon-all">
<view class="coupon-box">
<div v-if="computedCouponList.length <= 2" @click="$util.redirectTo('/pages/goods/category')"
class="coupon coupon-null" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-2.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}">
<div class="coupon-content" :style="{ color: value.moneyColor }">
<span class="price">+</span>
<span class="text">暂无优惠券</span>
</div>
<span class="limit" :style="{ color: value.limitColor }">去逛逛</span>
</div>
</swiper-item>
</swiper>
</template>
<template v-if="value.style == '7'">
<scroll-view class="coupon-style-seven" scroll-x="true">
<view class="wrap">
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="index" @click="couponAction(item, index)">
<image :src="$util.img('public/uniapp/coupon/style5_bg.png')"></image>
<image :src="$util.img('public/uniapp/coupon/style7_bg.png')"></image>
<view class="coupon">
<view class="coupon-info">
<view class="coupon-num" v-if="item.discount == '0.00'" :style="{ color: value.moneyColor }">
@@ -156,115 +287,32 @@
<text class="font-size-tag coupon-sign"></text>
</view>
</view>
<view class="coupon-type">
<text class="coupon-name" :style="{ color: value.limitColor }" v-if="item.at_least > 0">{{ Number(item.at_least) }}元可用</text>
<text class="coupon-name" :style="{ color: value.limitColor }" v-else>无门槛优惠券</text>
<view class="coupon-least" v-if="item.validity_type == 0" :style="{ color: value.limitColor }">有效期至{{ $util.timeStampTurnTime(item.end_time, 'Y-m-d') }}</view>
<view class="coupon-least" v-else-if="item.validity_type == 1" :style="{ color: value.limitColor }">领取后{{ item.fixed_term }}天有效</view>
<view class="coupon-least" v-else :style="{ color: value.limitColor }">领取后长期有效</view>
</view>
<view class="coupon-line"></view>
<view class="coupon-content">
<view class="coupon-type">
<view class="coupon-name" :style="{ color: value.nameColor }">{{ item.coupon_name }}</view>
<text class="coupon-least" :style="{ color: value.limitColor }" v-if="item.at_least > 0">{{ Number(item.at_least) }}元可用</text>
<text class="coupon-least" :style="{ color: value.limitColor }" v-else>无门槛优惠券</text>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">{{ value.btnStyle.text || '立即领取' }}</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用</view>
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0" >{{ value.btnStyle.text || '立即领取' }}</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 1" >去使用</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 2">已抢光</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 3">已失效</view>
<view class="coupon-get three-text" :style="couponBtnStyle" v-if="item.useState == 4">已使用</view>
</view>
</view>
</view>
</view>
</view>
</template>
</scroll-view>
</template>
<template v-if="value.style == '6'">
<swiper class="coupon-style-six" circular>
<swiper-item class="style-six-wrap" v-for="(numItem, numIndex) in Math.ceil(computedCouponList.length / 3)" :key="numIndex">
<view class="coupon" v-for="(item, index) in computedCouponList" :key="index"
v-if="index >= [numIndex * 3] && index < [(numIndex + 1) * 3]" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-1.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}" @click="couponAction(item, index)">
<view class="coupon-content">
<view class="price-wrap">
<text class="price" :style="{ color: value.moneyColor }">{{ (item.discount == '0.00' ? item.money : item.discount) | moneyConduct }}</text>
<text class="unit">{{ item.discount == '0.00' ? '元' : '折' }}</text>
</view>
<text class="text">优惠券</text>
</view>
<text class="btn" v-if="item.useState == 0" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">{{ value.btnStyle.text }}</text>
</text>
<text class="btn" v-if="parseInt(item.useState)" :style="{
color: value.btnStyle.textColor,
backgroundColor: value.btnStyle.bgColor,
borderTopLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx',
borderBottomLeftRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}">
<text class="btn-content">去使用</text>
</text>
<text class="limit" :style="{ color: value.limitColor }" v-if="parseFloat(item.at_least) > 0">{{ item.at_least | moneyConduct }}元使用</text>
<text class="limit" :style="{ color: value.limitColor }" v-else>无门槛使用</text>
</view>
<ns-login ref="login"></ns-login>
<div v-if="computedCouponList.length <= 2" @click="$util.redirectTo('/pages/goods/category')"
class="coupon coupon-null" :style="{
color: value.moneyColor,
backgroundImage: 'url(' + $util.img('public/uniapp/coupon/style6-bg-2.png') + ')',
marginRight: couponItemHeight + 'px',
marginLeft: couponItemHeight + 'px'
}">
<div class="coupon-content" :style="{ color: value.moneyColor }">
<span class="price">+</span>
<span class="text">暂无优惠券</span>
</div>
<span class="limit" :style="{ color: value.limitColor }">去逛逛</span>
</div>
</swiper-item>
</swiper>
</template>
</view>
<template v-if="value.style == '7'">
<scroll-view class="coupon-style-seven" scroll-x="true">
<view class="wrap">
<view class="coupon-list" v-for="(item, index) in computedCouponList" :key="index" @click="couponAction(item, index)">
<image :src="$util.img('public/uniapp/coupon/style7_bg.png')"></image>
<view class="coupon">
<view class="coupon-info">
<view class="coupon-num" v-if="item.discount == '0.00'" :style="{ color: value.moneyColor }">
<text class="coupon-size">{{ item.money | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
<view class="coupon-num" v-else :style="{ color: value.moneyColor }">
<text class="coupon-size">{{ item.discount | moneyConduct }}</text>
<text class="font-size-tag coupon-sign"></text>
</view>
</view>
<view class="coupon-type">
<text class="coupon-name" :style="{ color: value.limitColor }" v-if="item.at_least > 0">{{ Number(item.at_least) }}元可用</text>
<text class="coupon-name" :style="{ color: value.limitColor }" v-else>无门槛优惠券</text>
<view class="coupon-least" :style="{ color: value.limitColor }">有效期至{{ $util.timeStampTurnTime(item.end_time, 'yearmonthday') }}</view>
</view>
<view class="coupon-line"></view>
<view class="coupon-get" :style="couponBtnStyle" v-if="item.useState == 0">
{{ value.btnStyle.text || '立即领取' }}
</view>
<view class="coupon-get" :style="couponBtnStyle" v-if="parseInt(item.useState)">去使用
</view>
</view>
</view>
</view>
</scroll-view>
</template>
<ns-login ref="login"></ns-login>
</view>
</x-skeleton>
</x-skeleton>
</view>
</template>
<script>
@@ -313,17 +361,11 @@
couponItemHeight() {
var width = '';
const screenWidth = uni.getSystemInfoSync().windowWidth;
if (this.value.style == '1') width = [screenWidth - this.rpxUpPx(210) * 3 - this.rpxUpPx(this.value.margin
.both * 2) * 2] / 6;
else if (this.value.style == '2') width = [screenWidth - this.rpxUpPx(210) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
else if (this.value.style == '3') width = [screenWidth - this.rpxUpPx(24) * 2 - this.rpxUpPx(194) * 3 -
this.rpxUpPx(this.value.margin.both * 2) * 2
] / 6;
else if (this.value.style == '4') width = [screenWidth - this.rpxUpPx(206) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
else if (this.value.style == '6') width = [screenWidth - this.rpxUpPx(208) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
if (this.value.style == '1') width = [screenWidth - this.rpxUpPx(210) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else if (this.value.style == '2') width = [screenWidth - this.rpxUpPx(210) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else if (this.value.style == '3') width = [screenWidth - this.rpxUpPx(24) * 2 - this.rpxUpPx(194) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else if (this.value.style == '4') width = [screenWidth - this.rpxUpPx(206) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else if (this.value.style == '6') width = [screenWidth - this.rpxUpPx(208) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
return width;
},
@@ -357,12 +399,18 @@
if (data != null) {
this.couponList = data;
this.couponList.forEach(v => {
if (v.max_fetch != 0 && v.member_coupon_num && v.member_coupon_num >= v
.max_fetch) {
v.useState = 1;
} else {
v.useState = 0;
}
// if (v.count == v.lead_count) v.useState = 2;
// else if (v.max_fetch != 0 && v.member_coupon_num && v.member_coupon_num >= v.max_fetch) v.useState = 1;
// else v.useState = 0;
// if(v.received_type && v.received_type == 'expire'){
// v.useState = 2;
// }
if (v.count == v.lead_count) v.useState = 2;
else if (v.max_fetch == 0 || (v.max_fetch != 0 && !v.member_coupon_num) || (v.max_fetch != 0 && v.member_coupon_num && v.max_fetch > v.member_coupon_num)) v.useState = 0;
else if (v.wait_coupon_num) v.useState = 1
else if (v.lose_coupon_num) v.useState = 3;
else if (v.use_coupon_num) v.useState = 4;
});
}
this.loading = false;
@@ -372,18 +420,34 @@
couponAction(item, index) {
if (item.useState == 0) {
this.receiveCoupon(item, index);
} else if (parseInt(item.useState)) {
} else {
this.couponTap(item, index);
}
// if(item.received_type == 'out'){
// this.$util.showToast({
// title: '该优惠券已抢光'
// });
// }else if(item.received_type == 'expire'){
// this.$util.showToast({
// title: '该优惠券已过期'
// });
// }else if(item.received_type == 'limit'){
// this.$util.showToast({
// title: '该优惠券领取已达上限'
// });
// }
},
couponTap(item, index) {
if (item.count == item.lead_count) {
if(item.useState == 2){
this.$util.showToast({
title: '该优惠券已抢光'
});
return;
}
if (item.useState == 0) this.receiveCoupon(item, index);
else if (item.useState == 3 || item.useState == 4) this.$util.redirectTo('/pages_tool/member/coupon',{state: item.useState == 4 ? 2 : item.useState})
else this.toGoodsList(item);
},
// 领取优惠券
@@ -527,17 +591,21 @@
.coupon-get {
position: relative;
top: 2rpx;
top: 0;
right: 12rpx;
font-size: 24rpx;
letter-spacing: 16rpx;
width: 26rpx;
&.use {
top: 0;
right: 4rpx;
letter-spacing: 4rpx;
}
&.three-text {
line-height: 1.2;
}
}
.coupon-info {
@@ -873,6 +941,12 @@
line-height: 1;
transform: scale(0.8);
}
&.disabled {
background-color: #eee;
color: #909399;
}
}
.coupon-content {
@@ -1045,6 +1119,11 @@
font-size: $font-size-tag;
box-sizing: border-box;
flex-shrink: 0;
&.three-text {
writing-mode: vertical-rl;
}
}
}
}

View File

@@ -0,0 +1,276 @@
<template>
<view :style="componentStyle">
<scroll-view
:class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'"
>
<view class="uni-scroll-view-content">
<view
v-for="(item, index) in value.list"
:key="index"
:class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']"
:style="{ width: (100 / value.rowCount + '%') + ';' }"
>
<view style="display:flex;">
<view :style="{
'line-height': '1.2;',
'font-size': (value.font.titlesize * 2 + 'rpx') + ';',
'font-weight': '600;',
'color': value.font.titlecolor + ';'
}">
<uv-count-to
:ref="`countTo-${index}`"
:autoplay="true"
:startVal="30"
:endVal="item.title"
:decimals="getvalue(item.title)"
decimal="."
></uv-count-to>
<text :style="{
'margin-left': '4rpx;',
'font-size': (value.font.unitsize * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.unitcolor + ';'
}">{{ item.unit }}</text>
</view>
</view>
<view class="graphic-text">
<text :style="{
'font-size': (value.font.descsize * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.desccolor + ';'
}">{{ item.desc }}</text>
</view>
</view>
</view>
</scroll-view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
import uvCountTo from '@/components/uv-count-to/uv-count-to.vue'
import nsLogin from '@/components/ns-login/ns-login.vue'
export default {
name: 'diy-digit',
components: {
uvCountTo,
nsLogin
},
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0
}
},
created() {
// 组件创建时的逻辑
},
watch: {
componentRefresh(newValue) {
// 监听组件刷新
}
},
computed: {
componentStyle() {
let style = '';
style += 'background-image:url(' + this.$util.img(this.value.imageUrl) + ');background-size:100% 100%;';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
}
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
return style;
}
},
methods: {
// 获取小数位数
getvalue(value) {
return value % 1 !== 0 ? 2 : 0;
},
// 页面跳转
redirectTo(item) {
if (!item.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
console.log(item);
this.$util.diyRedirectTo(item);
} else {
this.$refs.login.open(item.wap_url);
}
},
// 轮播切换
swiperChange(event) {
this.swiperCurrent = event.detail.current;
}
}
}
</script>
<style lang="scss" scoped>
.graphic-nav {
padding: 16rpx;
box-sizing: border-box;
&.fixed-layout {
.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
}
}
&.singleSlide {
.uni-scroll-view-content {
display: flex;
}
.graphic-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.uni-swiper-dots-horizontal {
bottom: 0rpx;
}
&.straightLine {
.uni-swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.uni-swiper-dot {
width: 14rpx;
height: 14rpx;
}
}
}
.graphic-nav-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.graphic-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
.graphic-text {
line-height: 1.3;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
&.alone {
padding-top: 0;
}
}
&.text {
.graphic-text {
padding-top: 0;
}
}
.graphic-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100rpx;
height: 100rpx;
font-size: 90rpx;
.tag {
position: absolute;
top: -10rpx;
right: -24rpx;
color: #fff;
border-radius: 24rpx;
border-bottom-left-radius: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: #606266;
}
}
}
&.pageSlide {
.graphic-nav-item {
flex-shrink: 0;
}
}
}
.newright {
margin-right: 16rpx;
}
.swiper-dot-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -20rpx;
padding-bottom: 8rpx;
.swiper-dot {
background-color: rgba(0, 0, 0, 0.3);
margin: 8rpx;
&.active {
background-color: #000;
}
}
&.straightLine {
.swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.swiper-dot {
width: 15rpx;
border-radius: 50%;
height: 15rpx;
}
}
}
</style>

View File

@@ -1,48 +1,48 @@
<template>
<view data-component-name="diy-fenxiao-goods-list" class="diy-fenxiao" v-if="list.length" :class="['goods-list', value.template, value.style]" :style="goodsListWarpCss">
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"/>
</view>
<view class="info-wrap" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<view class="name-wrap">
<view v-if="value.goodsNameStyle.control" class="goods-name"
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]"
>
{{ item.goods_name }}
</view>
<view :style="value.pageStyle" v-if="list && list.length">
<view class="diy-fenxiao" v-if="list.length" :class="['goods-list', value.template, value.style]" :style="goodsListWarpCss">
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"/>
</view>
<view class="pro-info">
<view class="discount-price">
<view class="price-wrap" v-if="value.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }"> </text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ item.commission_money.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ '.' + item.commission_money.split('.')[1] }}</text>
</view>
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 0"
:style="{
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}"
@click.stop="followGoods(item, index)"
<view class="info-wrap" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<view class="name-wrap">
<view v-if="value.goodsNameStyle.control" class="goods-name"
:style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]"
>
关注
</view>
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 1"
:style="{
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}"
@click.stop="delFollowTip(item, index)"
>
取消关注
{{ item.goods_name }}
</view>
</view>
<view class="delete-price" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
{{ item.discount_price }}
<view class="pro-info">
<view class="discount-price">
<view class="price-wrap" v-if="value.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }"> </text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ item.commission_money.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ '.' + item.commission_money.split('.')[1] }}</text>
</view>
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 0"
:style="{
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}"
@click.stop="followGoods(item, index)">
关注
</view>
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 1"
:style="{
background: value.btnStyle.theme == 'diy' ? 'linear-gradient(to right,' + value.btnStyle.bgColorStart + ',' + value.btnStyle.bgColorEnd + ')' : '',
color: value.btnStyle.theme == 'diy' ? value.btnStyle.textColor : '',
borderRadius: value.btnStyle.aroundRadius * 2 + 'rpx'
}"
@click.stop="delFollowTip(item, index)">
取消关注
</view>
</view>
<view class="delete-price" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
{{ item.discount_price }}
</view>
</view>
</view>
</view>
@@ -55,7 +55,10 @@ export default {
name: 'diy-fenxiao-goods-list',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -1,12 +1,13 @@
<template>
<view data-component-name="diy-float-btn" class="float-btn" :class="{ left_top: value.bottomPosition == 1, right_top: value.bottomPosition == 2, left_bottom: value.bottomPosition == 3, right_bottom: value.bottomPosition == 4 }" :style="style">
<block v-for="(item, index) in value.list" :key="index">
<view class="button-box" @click="$util.diyRedirectTo(item.link)" :style="{ width: value.imageSize + 'px', height: value.imageSize + 'px', fontSize: value.imageSize + 'px' }">
<image v-if="!item.iconType || item.iconType == 'img'" :src="$util.img(item.imageUrl)" mode="aspectFit" :show-menu-by-longpress="true"/>
<diy-icon v-else-if="item.iconType && item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"></diy-icon>
</view>
</block>
<view :style="value.pageStyle">
<view class="float-btn" :class="{ left_top: value.bottomPosition == 1, right_top: value.bottomPosition == 2, left_bottom: value.bottomPosition == 3, right_bottom: value.bottomPosition == 4 }" :style="style">
<block v-for="(item, index) in value.list" :key="index">
<view class="button-box" @click="$util.diyRedirectTo(item.link)" :style="{ width: value.imageSize + 'px', height: value.imageSize + 'px', fontSize: value.imageSize + 'px' }">
<image v-if="!item.iconType || item.iconType == 'img'" :src="$util.img(item.imageUrl)" mode="aspectFit" :show-menu-by-longpress="true"/>
<diy-icon v-else-if="item.iconType && item.iconType == 'icon'" :icon="item.icon" :value="item.style ? item.style : null"></diy-icon>
</view>
</block>
</view>
</view>
</template>

View File

@@ -1,7 +1,9 @@
<template>
<!-- #ifdef MP -->
<view data-component-name="diy-follow-official-account" v-if="value.isShow">
<official-account></official-account>
<view :style="value.pageStyle">
<view v-if="value.isShow">
<official-account></official-account>
</view>
</view>
<!--#endif -->
</template>
@@ -12,7 +14,10 @@
name: 'diy-follow-official-account',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -1,17 +1,18 @@
<template>
<x-skeleton data-component-name="diy-goods-brand" type="waterfall" :loading="loading" :configs="skeletonConfig">
<view :class="['brand-wrap', value.ornament.type]" :style="warpCss">
<view :class="[value.style]">
<view class="title-wrap" v-show="value.title" :style="{ color: value.textColor, fontWeight: value.fontWeight ? 'bold' : '' }">{{ value.title }}
</view>
<view class="ul-wrap">
<view class="li-item" v-for="(item, index) in list" :key="index">
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="handlerClick(item)" @tap="handlerClick(item)" @error="imgError(index)" :style="itemCss"/>
<view :style="value.pageStyle" v-if="loading || (list && list.length)">
<x-skeleton type="waterfall" :loading="loading" :configs="skeletonConfig">
<view :class="['brand-wrap', value.ornament.type]" :style="warpCss">
<view :class="[value.style]">
<view class="title-wrap" v-show="value.title" :style="{ color: value.textColor, fontWeight: value.fontWeight ? 'bold' : '' }">{{ value.title }}</view>
<view class="ul-wrap">
<view class="li-item" v-for="(item, index) in list" :key="index">
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit" @click="toDetail(item)" @error="imgError(index)" :style="itemCss"/>
</view>
</view>
</view>
</view>
</view>
</x-skeleton>
</x-skeleton>
</view>
</template>
<script>
@@ -25,7 +26,10 @@
name: 'diy-goods-brand',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
components: {

View File

@@ -3,7 +3,7 @@
<block v-if="value.showStyle == 'pageSlide'">
<swiper :class="['graphic-nav', 'pageSlide', value.carousel.type]" circular :indicator-dots="false" :style="swiperHeight" @change="swiperChange">
<swiper-item class="graphic-nav-wrap"
v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))">
v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))" :key="numIndex">
<!-- #ifdef MP -->
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
:key="index"

View File

@@ -0,0 +1,290 @@
<template>
<view :style="componentStyle">
<scroll-view
:class="['image-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'"
>
<view class="uni-scroll-view-content">
<view
v-for="(item, index) in value.list"
:key="index"
:class="['image-nav-item', value.mode]"
style="margin-right: 28rpx;"
>
<!-- 图片部分 -->
<view v-if="value.mode != 'text'" class="image-img" :style="{
'font-size': (value.imageSize * 2 + 'rpx') + ';',
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}">
<image
v-if="item.link.wap_url"
:style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
:show-menu-by-longpress="true"
@tap="redirectTo(item.link)"
></image>
<image
v-else
:style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
:show-menu-by-longpress="true"
@tap="previewImg(item.imageUrl)"
></image>
</view>
<!-- 文字部分 -->
<text class="image-text" :style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'font-size': (value.font.size * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.color + ';'
}">{{ item.title }}</text>
</view>
</view>
</scroll-view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
import nsLogin from '@/components/ns-login/ns-login.vue'
export default {
name: 'diy-image-nav',
components: {
nsLogin
},
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0
}
},
created() {
// 组件创建时的逻辑
},
watch: {
componentRefresh(newValue) {
// 监听组件刷新
}
},
computed: {
componentStyle() {
let style = '';
style += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
}
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
return style;
},
swiperHeight() {
let height = 0;
if (this.value.mode == 'graphic') {
height = (49 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'img') {
height = (22 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'text') {
height = 43 * this.value.pageCount;
}
return 'height:' + (2 * height) + 'rpx';
},
isIndicatorDots() {
return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
}
},
methods: {
// 预览图片
previewImg(imageUrl) {
uni.previewImage({
current: 0,
urls: [this.$util.img(imageUrl)],
success: (res) => {},
fail: (res) => {},
complete: (res) => {}
});
},
// 页面跳转
redirectTo(link) {
if (!link.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
this.$util.diyRedirectTo(link);
} else {
this.$refs.login.open(link.wap_url);
}
},
// 轮播切换
swiperChange(event) {
this.swiperCurrent = event.detail.current;
}
}
}
</script>
<style lang="scss" scoped>
.image-nav {
padding: 16rpx;
box-sizing: border-box;
&.fixed-layout {
.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
}
}
&.singleSlide {
.uni-scroll-view-content {
display: flex;
}
.image-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.uni-swiper-dots-horizontal {
bottom: 0rpx;
}
&.straightLine {
.uni-swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.uni-swiper-dot {
width: 14rpx;
height: 14rpx;
}
}
}
.image-nav-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.image-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
.image-text {
padding-top: 12rpx;
line-height: 1.5;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
&.alone {
padding-top: 0;
}
}
&.text {
.image-text {
padding-top: 0;
}
}
.image-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 90rpx;
.tag {
position: absolute;
top: -10rpx;
right: -24rpx;
color: #fff;
border-radius: 24rpx;
border-bottom-left-radius: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: #606266;
}
}
}
}
.swiper-dot-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -20rpx;
padding-bottom: 8rpx;
.swiper-dot {
background-color: rgba(0, 0, 0, 0.3);
margin: 8rpx;
&.active {
background-color: #000;
}
}
&.straightLine {
.swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.swiper-dot {
width: 15rpx;
border-radius: 50%;
height: 15rpx;
}
}
}
</style>

View File

@@ -268,7 +268,7 @@
.exec();
});
this.setModuleLocatinoFn();
this.setModuleLocationFn();
},
methods: {
initPageIndex() {
@@ -415,7 +415,7 @@
this.isUnfold = !this.isUnfold;
},
// 向vuex中的diyIndexPositionObj增加分类导航组件定位位置
setModuleLocatinoFn() {
setModuleLocationFn() {
const query = uni.createSelectorQuery().in(this);
query.select('.nav-top-category')
.boundingClientRect(data => {

View File

@@ -1,6 +1,6 @@
<template>
<view data-component-name="diy-kefu" class="diy-kefu" :style="style">
<view class="fui-list-group merchgroup" v-for="(item,index) in value.list">
<view class="fui-list-group merchgroup" v-for="(item,index) in value.list" :key="index">
<view class="fui-list jump" v-if="index == 0">
<view class="fui-list-media">
<image class="round" :src="$util.img(item.imageUrl)" style="border-radius:6rpx"></image>

View File

@@ -3,7 +3,7 @@
<view class="fui-cell-group">
<!-- <image mode="widthFix" style="width: 100%;" :src="$util.img(item.imageUrl)"></image> -->
<view v-for="(item,index) in value.list" @click="redirectTo(item.link)" class="fui-cell" :class="item.iconType == 'img'?'img-cell':''">
<view v-for="(item,index) in value.list" @click="redirectTo(item.link)" class="fui-cell" :class="item.iconType == 'img'?'img-cell':''" :key="index">
<view class="fui-cell-icon" style="color:diyitem.style.iconcolo">
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"

View File

@@ -1,6 +1,6 @@
<template>
<view data-component-name="diy-map" class="diy-map" :style="style">
<view class="fui-list-group merchgroup" style="margin-top:0" v-for="(item,index) in value.list">
<view class="fui-list-group merchgroup" style="margin-top:0" v-for="(item,index) in value.list" :key="index">
<map
id="map"
style="width: 100%; height:600rpx"

View File

@@ -1,7 +1,7 @@
<template>
<view data-component-name="diy-picture" class="diy-picture" :style="style">
<view class="fui-picture">
<view v-for="(item,index) in value.list" style="line-height: 0;">
<view v-for="(item,index) in value.list" style="line-height: 0;" :key="index">
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-if="item.link.wap_url" @click="handlerClick(item)" @tap="handlerClick(item)"></image>
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-else @click="handlerClick(item)" @tap="handlerClick(item)"></image>
</view>

View File

@@ -173,7 +173,7 @@
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().windowWidth;
const screenWidth = uni.getWindowInfo().windowWidth;
if (this.value.template == 'horizontal-slide') {
var width = "";
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy')
@@ -217,7 +217,7 @@
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
const screenWidth = uni.getWindowInfo().windowWidth;
var data = screenWidth * parseInt(res) / 750;
return Math.floor(data);
},

View File

@@ -1,4 +1,5 @@
<template>
<view :style="value.pageStyle">
<view data-component-name="diy-search" class="diy-search">
<view class="diy-search-wrap" :class="value.positionWay" :style="fixedCss">
<view :class="['search-box','search-box-'+value.searchStyle]" :style="searchWrapCss" @click="handlerSearchClick" @tap="handlerSearchClick">
@@ -33,11 +34,19 @@
<view v-if="value.positionWay == 'fixed'" class="u-navbar-placeholder" :style="{ width: '100%', paddingTop: moduleHeight }"></view>
<ns-login ref="login"></ns-login>
</view>
</view>
</template>
<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let systemInfo = {};
try {
// 合并设备信息和窗口信息
systemInfo = {...uni.getDeviceInfo(), ...uni.getWindowInfo()};
} catch (e) {
// 兼容旧版本
systemInfo = uni.getSystemInfoSync();
}
let menuButtonInfo = {};
// 如果是小程序,获取右上角胶囊的尺寸信息,避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
@@ -125,7 +134,7 @@
},
fixedTop() {
let diyPositionObj = this.$store.state.diyGroupPositionObj;
let data = 0
let data = 0;
if (diyPositionObj.diySearch && diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
if (diyPositionObj.diySearch.moduleIndex > diyPositionObj.diyIndexPage.moduleIndex) {
data = diyPositionObj.nsNavbar.originalVal + diyPositionObj.diyIndexPage.originalVal;
@@ -175,7 +184,7 @@
},
mounted() {
if (this.value.positionWay == 'fixed')
this.setModuleLocatinoFn();
this.setModuleLocationFn();
},
methods: {
search() {
@@ -204,7 +213,7 @@
});
},
// 向vuex中的diyIndexPositionObj增加搜索组件定位位置
setModuleLocatinoFn() {
setModuleLocationFn() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.diy-search-wrap')

View File

@@ -258,7 +258,7 @@
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().windowWidth;
const screenWidth = uni.getWindowInfo().windowWidth;
if (this.value.template == 'horizontal-slide') {
var width = '';
if (this.value.slideMode == 'scroll' && this.value.goodsMarginType == 'diy') width = this.rpxUpPx(this.value.goodsMarginNum * 2);
@@ -312,7 +312,7 @@
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().screenWidth;
const screenWidth = uni.getWindowInfo().screenWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},

View File

@@ -1,9 +1,10 @@
<template>
<view :style="value.pageStyle">
<x-skeleton data-component-name="diy-store-label" type="banner" :loading="loading" :configs="skeletonConfig">
<view class="diy-store-label">
<block v-if="businessConfig.store_business == 'store'">
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]" :style="storeLabelWrapCss" :enable-flex="true">
<view v-for="(item, index) in storeLabel" :class="['item']">
<view v-for="(item, index) in storeLabel" :class="['item']" :key="index">
<diy-icon v-if="value.icon" class="icon-box" :icon="value.icon" :value="value.style ? value.style : 'null'"></diy-icon>
<text class="label-name" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item }}</text>
</view>
@@ -11,7 +12,7 @@
</block>
<block v-else>
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]" :style="storeLabelWrapCss" :enable-flex="true">
<view v-for="(item, index) in list" :class="['item']">
<view v-for="(item, index) in list" :class="['item']" :key="item.label_id || index">
<diy-icon v-if="value.icon" class="icon-box" :icon="value.icon" :value="value.style ? value.style : 'null'"></diy-icon>
<text class="label-name" :style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{ item.label_name }}</text>
</view>
@@ -19,6 +20,7 @@
</block>
</view>
</x-skeleton>
</view>
</template>
<script>
// 门店标签
@@ -26,7 +28,10 @@
name: 'diy-store-label',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -1,4 +1,5 @@
<template>
<view :style="value.pageStyle">
<view data-component-name="diy-store" class="store-wrap">
<block v-if="value.style == 1">
<view class="store-box store-one">
@@ -65,6 +66,7 @@
</view>
</block>
</view>
</view>
</template>
<script>
@@ -74,7 +76,10 @@ export default {
name: 'diy-store',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -1,4 +1,5 @@
<template>
<view :style="value.pageStyle">
<view data-component-name="diy-text" class="diy-text" @click="handlerClick(value.link)" @tap="handlerClick(value.link)" :style="warpCss">
<view :class="value.style == 'style-8' ? 'title2' : 'title'" :style="{ fontSize: value.fontSize * 2 + 'rpx', color: value.textColor }">
<block v-if="value.style == 'style-0'" style="height: 40rpx; line-height: 40rpx;">
@@ -254,6 +255,7 @@
</view>
</view>
</view>
</view>
</template>
<script>
@@ -263,7 +265,10 @@ export default {
name: 'diy-text',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -0,0 +1,704 @@
<template>
<view :style="componentStyle">
<!-- 固定布局模式 -->
<view v-if="value.showStyle == 'fixed'" :class="['goods-list', 'row1-of' + value.rowCount]" style="padding:20rpx;">
<view
v-for="(item, index) in value.list"
:key="index"
class="goods-item"
@tap="showVideo(item)"
>
<view class="goods-img-wrap">
<image
class="goods-img"
style="border-radius:10rpx 10rpx 0 0;"
:src="$util.img(item.imageUrl)"
mode="widthFix"
@error="imgError(index)"
></image>
<view style="position:absolute;top:10rpx;right:10rpx;">
<image style="width:30rpx;" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')" mode="widthFix"></image>
</view>
</view>
<view class="info-wrap">
<view
class="goods-name"
:style="{
'font-size': (value.font.size * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.color + ';'
}"
>{{ item.title }}</view>
</view>
</view>
</view>
<!-- 其他布局模式 -->
<scroll-view
v-else
:class="['video-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'"
>
<view class="uni-scroll-view-content">
<view
v-for="(item, index) in value.list"
:key="index"
:class="['video-nav-item', value.mode]"
:style="{ width: (100 / value.rowCount + '%') + ';' }"
@tap="showVideo(item)"
>
<view class="video-img">
<image
v-if="item.iconType == 'img'"
:style="{
'max-width': '200rpx;',
'max-height': '200rpx;',
'border-radius': '8rpx;'
}"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
mode="widthFix"
:show-menu-by-longpress="true"
></image>
<view style="position:absolute;top:10rpx;right:10rpx;">
<image style="width:30rpx;" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')" mode="widthFix"></image>
</view>
</view>
<view
class="video-text"
:style="{
'margin-left': '16rpx;',
'font-size': (value.font.size * 2 + 'rpx') + ';',
'font-weight': value.font.weight + ';',
'color': value.font.color + ';'
}"
>{{ item.title }}</view>
</view>
</view>
</scroll-view>
<!-- 视频播放弹窗 -->
<uni-popup
ref="videoPopup"
type="center"
style="background:transparent;width:100%;height:100%;"
>
<view class="video-container" style="position:fixed;top:30%;width:100%;left:0;">
<video
class="adaptive-video"
:autoPauseIfNavigate="true"
:autoPauseIfOpenNative="true"
:autoplay="false"
:enableAutoRotation="true"
id="myVideo"
:src="video_url"
:controls="true"
></video>
</view>
</uni-popup>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'
export default {
name: 'diy-video-list',
components: {
uniPopup
},
props: {
value: {
type: Object,
default: () => ({})
}
},
data() {
return {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0,
video_url: ''
}
},
created() {
// 组件创建时的逻辑
},
watch: {
componentRefresh(newValue) {
// 监听组件刷新
}
},
computed: {
componentStyle() {
let style = '';
style += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
}
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
console.log(this.value);
return style;
},
swiperHeight() {
let height = 0;
if (this.value.mode == 'graphic') {
height = (49 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'img') {
height = (22 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'text') {
height = 43 * this.value.pageCount;
}
return 'height:' + (2 * height) + 'rpx';
},
isIndicatorDots() {
return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
}
},
methods: {
// 显示视频播放弹窗
showVideo(item) {
this.video_url = item.videoUrl;
this.$refs.videoPopup.open();
},
// 图片加载错误处理
imgError(index) {
// 图片加载失败的处理逻辑
console.log('图片加载失败:', index);
}
}
}
</script>
<style lang="scss" scoped>
.goods-name {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.goods-list {
&.row1-of3 {
display: flex;
flex-wrap: wrap;
.goods-item {
position: relative;
display: flex;
flex-direction: column;
margin-top: 20rpx;
width: calc(33.3333333% - 14rpx);
box-sizing: border-box;
&:nth-child(3n + 3) {
width: calc(33.33% - 15rpx);
}
&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
margin-top: 0;
}
&:nth-child(3n) {
width: calc(33.3333333% - 15rpx);
}
&:nth-child(3n-1) {
margin-left: 20rpx;
margin-right: 20rpx;
}
&.shadow {
width: calc(33.3333333% - 18rpx);
&:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
margin-top: 8rpx;
}
&:nth-child(1n) {
margin-left: 8rpx;
}
&:nth-child(3n-1) {
margin-left: 20rpx;
margin-right: 20rpx;
}
&:nth-child(3n) {
margin-right: 0;
margin-left: 0;
}
}
.goods-img-wrap {
position: relative;
overflow: hidden;
height: 220rpx;
}
.goods-img {
width: 100%;
}
.info-wrap {
display: flex;
flex-direction: column;
flex: 1;
.pro-info {
margin-top: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
.discount-price {
display: flex;
justify-content: space-between;
align-items: center;
.price-wrap {
white-space: nowrap;
.unit {
font-size: 24rpx !important;
}
.price {
font-size: 32rpx;
text {
font-weight: 700;
}
}
}
}
.delete-price {
text-decoration: line-through;
flex: 1;
line-height: 28rpx;
color: #909399;
font-size: 20rpx;
}
}
}
}
&.style-1 {
.pro-info {
.price-wrap {
line-height: 1;
}
.discount-price {
justify-content: unset !important;
align-items: baseline !important;
flex-wrap: wrap;
}
.delete-price {
margin-left: 10rpx;
}
}
}
&.style-2 {
.pro-info {
position: relative;
flex-direction: row !important;
align-items: center;
.price-wrap {
line-height: 1;
}
.discount-price {
align-items: flex-end !important;
flex-wrap: wrap;
justify-content: unset !important;
}
.delete-price {
margin: 20rpx 0;
flex-basis: 100% !important;
}
.buy-btn {
min-width: 112rpx;
height: 52rpx;
padding: 0 20rpx;
line-height: 52rpx;
text-align: center;
box-sizing: border-box;
}
}
}
.sell-out {
text {
font-size: 150rpx;
}
}
}
&.row1-of2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.goods-item {
position: relative;
margin-top: 20rpx;
width: calc(50% - 10rpx);
display: flex;
flex-direction: column;
box-sizing: border-box;
&:nth-child(2n) {
margin-right: 0 !important;
}
&:nth-of-type(1), &:nth-of-type(2) {
margin-top: 0;
}
&.shadow {
width: calc(50% - 18rpx);
&:nth-child(2n-1) {
margin-left: 8rpx;
}
&:nth-child(2n) {
margin-right: 8rpx !important;
}
&:nth-of-type(1), &:nth-of-type(2) {
margin-top: 8rpx;
}
}
.goods-img-wrap {
position: relative;
overflow: hidden;
height: 340rpx;
}
.goods-img {
width: 100%;
}
.info-wrap {
display: flex;
flex-direction: column;
flex: 1;
.sale {
flex-basis: 100%;
}
.pro-info {
margin-top: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
.discount-price {
.price-wrap {
white-space: nowrap;
.unit {
font-weight: 700;
font-size: 24rpx !important;
}
.price {
font-weight: 700;
font-size: 32rpx !important;
}
}
}
.delete-price {
text-decoration: line-through;
flex: 1;
line-height: 28rpx;
color: #909399;
font-size: 20rpx;
}
}
}
}
&.style-1 {
.pro-info {
.discount-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
.price-wrap {
display: inline-block;
text {
font-weight: 700;
}
line-height: 1;
}
}
.delete-price {
margin-top: 6rpx;
flex-basis: 100% !important;
}
}
}
&.style-2 {
.pro-info {
position: relative;
align-items: center;
.price-wrap {
line-height: 1;
}
.discount-price {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.delete-price {
margin-top: 4rpx;
flex-basis: 100% !important;
}
.sale {
line-height: 1;
margin-top: 10rpx;
}
.buy-btn {
min-width: 140rpx;
height: 52rpx;
padding: 0 20rpx;
line-height: 52rpx;
text-align: center;
box-sizing: border-box;
}
}
}
&.style-3 {
.pro-info {
.member-price {
margin-right: auto;
align-self: flex-end;
margin-bottom: 4rpx;
}
.sale {
line-height: 1;
align-self: center;
margin-top: 8rpx;
}
.discount-price {
display: flex;
flex-wrap: wrap;
flex: 1;
align-content: center;
.price-wrap {
display: flex;
align-items: baseline;
line-height: 1;
align-self: center;
}
}
}
.swiper {
padding: 20rpx 0;
}
}
.sell-out {
text {
font-size: 250rpx;
}
}
}
}
.video-container {
width: 100%;
height: 300px;
position: relative;
}
.adaptive-video {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
}
.video-nav {
padding: 16rpx;
box-sizing: border-box;
&.fixed-layout {
.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
}
&.singleSlide {
.uni-scroll-view-content {
display: flex;
}
.video-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.uni-swiper-dots-horizontal {
bottom: 0rpx;
}
&.straightLine {
.uni-swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.uni-swiper-dot {
width: 14rpx;
height: 14rpx;
}
}
}
.video-nav-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.video-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
.video-text {
padding-top: 12rpx;
line-height: 1.5;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
&.alone {
padding-top: 0;
}
}
&.text {
.video-text {
padding-top: 0;
}
}
.video-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 90rpx;
.tag {
position: absolute;
top: -10rpx;
right: -24rpx;
color: #fff;
border-radius: 24rpx;
border-bottom-left-radius: 0;
-webkit-transform: scale(0.8);
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: #606266;
}
}
}
}
.swiper-dot-box {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -20rpx;
padding-bottom: 8rpx;
.swiper-dot {
background-color: rgba(0, 0, 0, 0.3);
margin: 8rpx;
&.active {
background-color: #000;
}
}
&.straightLine {
.swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.swiper-dot {
width: 15rpx;
border-radius: 50%;
height: 15rpx;
}
}
}
</style>

View File

@@ -1,5 +1,7 @@
<template>
<view :style="value.pageStyle">
<video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)" :poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover" @click="handlerClick(value.videoUrl)" @tap="handlerClick(value.videoUrl)"></video>
</view>
</template>
<script>
@@ -9,7 +11,10 @@
name: 'diy-video',
props: {
value: {
type: Object
type: Object,
default: () => {
return {};
}
}
},
data() {

View File

@@ -64,7 +64,10 @@ export default {
longitude: null, // 经度
evaluateCount: 0, // 商品评论数量
deliveryType: null, // 配送方式
isVirtual: 0 //是否为虚拟商品
isVirtual: 0 ,//是否为虚拟商品
hasGlobalStore:false,
saleStore:'all',
isInitStoreData:false,
}
},
created() {
@@ -73,10 +76,7 @@ export default {
if (this.location) {
this.latitude = this.location.latitude;
this.longitude = this.location.longitude;
} else {
this.$util.getLocation();
}
this.getStoreData();
},
watch: {
location: function (nVal) {
@@ -95,26 +95,24 @@ export default {
this.source_member = params.source_member;
this.whetherCollection = params.whetherCollection;
this.posterParams = params.posterParams;
this.shareUrl = params.shareUrl;
this.goodsRoute = params.goodsRoute;
this.posterApi = params.posterApi;
this.isVirtual = params.isVirtual;
this.deliveryType = params.deliveryType;
this.evaluateConfig = params.evaluateConfig;
this.saleStore = params.sale_store;
if (this.evaluateConfig.evaluate_show == 1) {
//商品评论
this.getGoodsEvaluate(params.evaluateList);
this.evaluateCount = params.evaluateCount;
}
for (let k in this.deliveryType) {
if (k == 'store') {
this.isShowStore = true;
}
if( params.goods_class != 2 && params.goods_class !=3) this.isShowStore = true;
if(!this.isInitStoreData){
this.isInitStoreData = true;
this.getStoreData();
}
this.getService();
this.videoContext = uni.createVideoContext('goodsVideo');
@@ -144,11 +142,12 @@ export default {
closeStoreListPopup() {
this.$refs.storeListPopup.close();
},
getStoreData() {
getStoreData(){
//门店列表
let data = {
page: this.storeList.page,
page_size: this.storeList.page_size
page_size: this.storeList.page_size,
store_ids:this.saleStore
};
if (this.latitude && this.longitude) {
data.latitude = this.latitude;
@@ -161,6 +160,9 @@ export default {
if (this.storeList.page == 1) this.storeList.data == [];
if (res.code >= 0 && res.data) {
this.storeList.data = this.storeList.data.concat(res.data.list);
res.data.list.forEach(item=>{
if(item.store_id == this.globalStoreInfo.store_id) this.hasGlobalStore = true;
})
} else {
this.$util.showToast({
title: res.message
@@ -189,9 +191,6 @@ export default {
if (this.goodsEvaluate[index].images) this.goodsEvaluate[index].images = this.goodsEvaluate[index].images.split(",");
if (this.goodsEvaluate[index].is_anonymous == 1) this.goodsEvaluate[index].member_name = this.goodsEvaluate[index].member_name.replace(this.goodsEvaluate[index].member_name.substring(1, this.goodsEvaluate[index].member_name.length - 1), '***')
})
// if (this.goodsEvaluate.images) this.goodsEvaluate.images = this.goodsEvaluate.images.split(",");
// if (this.goodsEvaluate.is_anonymous == 1) this.goodsEvaluate.member_name = this.goodsEvaluate.member_name.replace(
// this.goodsEvaluate.member_name.substring(1, this.goodsEvaluate.member_name.length - 1), '***')
}
},
// 预览评价图片
@@ -263,6 +262,8 @@ export default {
copyUrl() {
let text = this.$config.h5Domain + this.shareUrl;
if (this.memberInfo && this.memberInfo.member_id) text += '&source_member=' + this.memberInfo.member_id;
var store_info = this.$store.state.globalStoreInfo;
if (store_info) text += '&store_id=' + store_info.store_id;
this.$util.copy(text, () => {
this.closeSharePopup();
});
@@ -283,10 +284,11 @@ export default {
getGoodsPoster() {
uni.showLoading({
'title': '海报生成中...'
})
});
//活动海报信息
if (this.memberInfo && this.memberInfo.member_id) this.posterParams.source_member = this.memberInfo.member_id;
var store_info = this.$store.state.globalStoreInfo;
if (store_info) this.posterParams.store_id= store_info.store_id;
this.$api.sendRequest({
url: this.posterApi,
data: {

View File

@@ -39,37 +39,37 @@
<slot name="price"></slot>
</view>
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.isinformation == 0">
<view class="newdetail margin-bottom">
<!-- 入口区域 -->
<slot name="entrance"></slot>
<!-- 配送 -->
<!-- @click="$refs.deliveryType.open()" -->
<view class="item delivery-type" v-if="goodsSkuDetail.is_virtual == 0" >
<view class="label">{{$lang('send')}}</view>
<view class="item delivery-type" v-if="goodsSkuDetail.is_virtual == 0" @click="$refs.deliveryType.open()">
<view class="label">配送</view>
<block v-if="deliveryType">
<view class="box">
<block v-for="(item, index) in deliveryType" :key="index">
<text v-if="goodsSkuDetail.support_trade_type.indexOf(index) != -1">{{$lang('express')}}</text>
<!-- {{ item.name }} -->
<text v-if="goodsSkuDetail.support_trade_type.indexOf(index) != -1">{{ item.name }}</text>
</block>
</view>
<text class="iconfont icon-right"></text>
</block>
<block v-else>
<view class="box">未配置</view>
<view class="box">商家未配置配送方式</view>
</block>
</view>
<!-- 门店 -->
<!-- <view class="item store-wrap" @click="openStoreListPopup()" v-if="addonIsExist.store && globalStoreInfo && isShowStore">
<view class="label">门店</view>
<view class="list-wrap">
<view class="item store-wrap" @click="openStoreListPopup()" v-if="addonIsExist.store && globalStoreInfo && isShowStore">
<view class="label">适用门店</view>
<view class="list-wrap" v-if="hasGlobalStore">
<view class="name-wrap">
<text class="icondiy icon-system-shop"></text>
<text class="name">{{globalStoreInfo.store_name}}</text>
<text class="name">{{ globalStoreInfo.store_name}}</text>
</view>
<view class="close-desc" v-if="globalStoreInfo.status == 0 && globalStoreInfo.close_desc">
{{ globalStoreInfo.close_desc }}
</view>
<view class="other-wrap">
<text class="distance" v-if="parseFloat(globalStoreInfo.distance)">距离{{ globalStoreInfo.distance > 1 ? globalStoreInfo.distance + 'km' : globalStoreInfo.distance * 1000 + 'm' }}</text>
<text class="decorate" v-if="parseFloat(globalStoreInfo.distance)">.</text>
@@ -77,8 +77,23 @@
</view>
</view>
</view>
<view class="list-wrap" v-else-if="storeList && storeList.data.length">
<view class="name-wrap">
<text class="icondiy icon-system-shop"></text>
<text class="name">{{ storeList.data[0].store_name}}</text>
</view>
<view class="close-desc" v-if="storeList.data[0].status == 0 && storeList.data[0].close_desc">
{{ storeList.data[0].close_desc }}
</view>
<view class="other-wrap">
<text class="distance" v-if="parseFloat(storeList.data[0].distance)">距离{{ storeList.data[0].distance > 1 ? storeList.data[0].distance + 'km' : storeList.data[0].distance * 1000 + 'm' }}</text>
<text class="decorate" v-if="parseFloat(storeList.data[0].distance)">.</text>
<view class="address">{{ storeList.data[0].full_address + storeList.data[0].address }}
</view>
</view>
</view>
<text class="iconfont icon-right"></text>
</view> -->
</view>
<view class="item service" @click="openMerchantsServicePopup()" v-if="goodsSkuDetail.goods_service.length">
<view class="label">服务</view>
@@ -96,34 +111,6 @@
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<!--多规格区域-->
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.sku_spec_format">
<!-- 入口区域 -->
<slot name="skuspec"></slot>
</view>
<view class="newdetail margin-bottom" v-if="goodsSkuDetail.merch_id > 0">
<!-- 入口区域 -->
<slot name="entrance"></slot>
<!-- 商家 -->
<view class="item store-wrap" @click="$util.redirectTo('/pages_promotion/merch/detail', { merch_id: goodsSkuDetail.merch_id })">
<view class="list-wrap" style="display: flex;">
<view class="name-wrap">
<image :src="$util.img(goodsSkuDetail.merchinfo.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;border-radius: 50rpx;"></image>
</view>
<view class="other-wrap">
<view class="address" style="margin-left: 30rpx;">
<view>{{goodsSkuDetail.merchinfo.merch_name}}</view>
<view style="font-size: 24rpx;color: #888;">官方认证商家值得信赖</view>
</view>
</view>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<!-- 配送方式 -->
@@ -182,7 +169,7 @@
<uni-popup ref="storeListPopup" type="bottom">
<view class="goods-merchants-service-popup-layer popup-layer store-list-wrap">
<view class="head-wrap" @click="closeStoreListPopup()">
<text>门店列表</text>
<text>适用门店</text>
<text class="iconfont icon-close"></text>
</view>
<scroll-view scroll-y>
@@ -200,6 +187,8 @@
距离{{ item.distance > 1 ? item.distance + 'km' : item.distance * 1000 + 'm' }}
</text>
</view>
<view class="item-close-desc" v-if="item.status == 0 && item.close_desc">{{ item.close_desc }}
</view>
<view class="item-time" v-if="item.open_date">营业时间{{ item.open_date }}
</view>
<view class="item-address">{{ item.full_address + item.address }}</view>
@@ -228,7 +217,7 @@
</view>
<!-- 促销 -->
<!-- <view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()" v-show="isCommunity">
<view class="community-model" @touchmove.prevent.stop @click.stop="onCloseCommunity()" v-show="isCommunity">
<view class="community-model-content" @click.stop>
<view class="community-model-content-radius">
<view>添加社群</view>
@@ -241,13 +230,13 @@
<view class="community-model-close" @click.stop="onCloseCommunity()">
<text class="iconfont icon-close"></text>
</view>
</view> -->
</view>
<!-- 参与流程 -->
<slot name="articipation"></slot>
<!-- 商品评价 -->
<view class="group-wrap" v-if="evaluateConfig.evaluate_show == 1 && goodsSkuDetail.isinformation == 0" style="display: none;">
<view class="group-wrap" v-if="evaluateConfig.evaluate_show == 1">
<view class="goods-evaluate" @click="toEvaluateDetail(goodsSkuDetail.goods_id)">
<view class="tit">
<!-- <view class="tit" :class="{ active: goodsEvaluate.content }"> -->
@@ -263,8 +252,7 @@
</view>
</view>
</view>
<view class="evaluate-item" v-for="(item, index) in goodsEvaluate" :key="index"
v-if="item.content">
<view class="evaluate-item" v-for="(item, index) in goodsEvaluate" :key="index" v-if="item.content">
<view class="evaluator">
<view class="evaluator-info">
<view class="evaluator-face">
@@ -294,7 +282,7 @@
</view>
</view>
</view>
<view class="goods-attr" v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
<view class="title">规格属性</view>
<view class="attr-wrap">
@@ -315,24 +303,19 @@
</view>
</view>
<!-- 详情 -->
<view class="goods-detail-tab">
<view class="detail-tab">
<view class="tab-item">{{$lang('details')}}</view>
<view class="tab-item">商品详情</view>
</view>
<view class="detail-content active">
<view class="detail-content-item">
<view class="goods-details" v-if="goodsSkuDetail.goods_content">
<!-- <rich-text :nodes="goodsSkuDetail.goods_content" @click="showImg($event)" :data-nodes="goodsSkuDetail.goods_content"></rich-text> -->
<!-- {{goodsSkuDetail.goods_content}} -->
<mp-html :content="goodsSkuDetail.goods_content" />
<!-- :loading="loading" @preview="preview" @navigate="navigate" -->
<ns-mp-html :content="goodsSkuDetail.goods_content"></ns-mp-html>
</view>
<view class="goods-details active" v-else></view>
<view class="goods-details active" v-else>该商家暂无上传相关详情哦</view>
<view class="goods-details" v-if="service && service.is_display == 1 && service.content">
<rich-text :nodes="service.content" @click="showImg($event)" :data-nodes="service.content"></rich-text>
<ns-mp-html :content="service.content"></ns-mp-html>
</view>
</view>
</view>

View File

@@ -1,40 +1,63 @@
<template>
<!-- 悬浮按钮 -->
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
<!-- <view class="btn-item" v-if="fixBtnShow" @click="$util.redirectTo('/pages/index/index')"> -->
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? (isH5 ? '180rpx' : '330rpx') : '120rpx' }">
<!-- #ifdef MP-WEIXIN -->
<!-- 微信小程序默认客服按钮 -->
<button class="btn-item" v-if="fixBtnShow && useOfficialService" hoverClass="none" open-type="contact"
sessionFrom="weapp" showMessageCard="true"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }">
<text class="icox icox-kefu" v-if="!kefuimg"></text>
</button>
<!-- 自定义客服按钮 -->
<button class="btn-item" v-if="fixBtnShow && !useOfficialService" hoverClass="none" @click="contactServicer"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }">
<!-- 微信小程序根据配置自动选择官方客服/自定义客服 -->
<button
class="btn-item"
v-if="fixBtnShow"
hoverClass="none"
:open-type="weappOfficialService ? 'contact' : ''"
@click="weappOfficialService ? '' : handleWeappCustomerService"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="icox icox-kefu" v-if="!kefuimg"></text>
</button>
<!-- #endif -->
<!-- #ifdef H5 -->
<!-- H5逻辑保持不变 -->
<button
class="btn-item"
v-if="fixBtnShow"
hoverClass="none"
@click="handleCustomerService"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="icox icox-kefu" v-if="!kefuimg"></text>
<view v-if="unreadCount > 0 && isDifyService" class="unread-badge">
<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
</view>
</button>
<!-- #endif -->
<view class="btn-item" v-if="fixBtnShow" @click="call()"
:style="{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }">
<!-- #ifndef H5 -->
<view
class="btn-item"
v-if="fixBtnShow && isDifyService"
@click="handleCustomerService"
:style="{ backgroundImage: 'url(' + (aiAgentimg ? aiAgentimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="ai-icon" v-if="!aiAgentimg">🤖</text>
<view v-if="unreadCount > 0" class="unread-badge">
<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
</view>
</view>
<!-- #endif -->
<view
class="btn-item"
v-if="fixBtnShow"
@click="call()"
:style="{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
</view>
<!-- <view class="btn-item icon-xiala" v-if="fixBtnShow" @click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
<text class="iconfont icon-unfold"></text>
</view>
<view class="btn-item switch" v-else :class="{ show: fixBtnShow }"
@click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
<view class="">快捷</view>
<view>导航</view>
</view> -->
</view>
</template>
<script>
import { createCustomerService } from '@/common/js/customer-service.js';
import { mapGetters, mapMutations } from 'vuex';
export default {
name: 'hover-nav',
@@ -42,7 +65,7 @@ export default {
need: {
type: Boolean,
default: false
},
}
},
data() {
return {
@@ -51,134 +74,234 @@ export default {
tel: '',
kefuimg: '',
phoneimg: '',
customerService: null, // 客服服务实例
buttonConfig: null // 按钮配置
customerService: null,
buttonConfig: null,
isH5: false,
platformConfig: null,
latestConfig: null,
weappOfficialService: false // 微信小程序是否使用官方客服
};
},
created() {
this.kefuimg = this.$util.getDefaultImage().kefu
this.phoneimg = this.$util.getDefaultImage().phone
// 1. 判断平台类型
// #ifdef H5
this.isH5 = true;
// #endif
// #ifdef MP-WEIXIN
this.isH5 = false;
// #endif
// 2. 初始化资源
this.kefuimg = this.$util.getDefaultImage().kefu;
this.phoneimg = this.$util.getDefaultImage().phone;
this.pageCount = getCurrentPages().length;
// 初始化客服服务
this.customerService = createCustomerService(this);
this.buttonConfig = this.customerService.getButtonConfig();
// 3. 获取店铺电话
this.getShopTel();
var that = this
uni.getStorage({
key: 'shopInfo',
success(e) {
that.tel = e.data.mobile
}
})
// 4. 首次加载获取最新配置
this.getLatestConfig().then(config => {
this.latestConfig = config;
this.initCustomerService(config);
// 微信小程序:判断是否使用官方客服
this.initWeappServiceType();
});
},
computed: {
/**
* 是否使用官方客服
*/
useOfficialService() {
if (!this.buttonConfig) return true;
// #ifdef MP-WEIXIN
// 如果是微信小程序,检查配置
if (this.buttonConfig.type === 'weapp') {
// 默认使用官方客服除非明确设置为false
return this.buttonConfig.useOfficial !== false;
}
// #endif
return false;
...mapGetters([
'globalAIKefuConfig',
'aiUnreadCount'
]),
isDifyService() {
const serviceType = this.platformConfig?.type || '';
return serviceType === 'aikefu';
},
aiAgentimg() {
return this.globalAIKefuConfig?.icon || this.$util.getDefaultImage().aiAgent || '';
},
unreadCount() {
return this.aiUnreadCount;
}
},
methods: {
//拨打电话
call() {
uni.makePhoneCall({
phoneNumber: this.tel + ''
})
...mapMutations([
'setAiUnreadCount'
]),
/**
* 获取最新配置H5禁用缓存小程序保留默认
*/
async getLatestConfig() {
return new Promise((resolve) => {
// H5强制请求最新配置小程序优先用vuex缓存
if (this.isH5) {
this.$api.sendRequest({
url: '/api/site/getServicerConfig',
header: {
'Cache-Control': 'no-cache, no-store, must-revalidate',
'Pragma': 'no-cache',
'Expires': '0'
},
data: { t: new Date().getTime() },
success: (res) => {
const config = res.code === 0 ? res.data : this.$store.state.servicerConfig || {};
this.$store.commit('setServicerConfig', config);
resolve(config);
},
fail: () => resolve(this.$store.state.servicerConfig || {})
});
} else {
// 小程序直接用vuex缓存后台修改后需重启开发者工具
resolve(this.$store.state.servicerConfig || {});
}
});
},
//处理客服点击事件
contactServicer() {
// 使用统一客服处理
/**
* 初始化客服服务
*/
initCustomerService(config = null) {
this.customerService = createCustomerService(this, config || this.latestConfig);
this.platformConfig = this.customerService.refreshConfig(config || this.latestConfig);
this.buttonConfig = this.customerService.getButtonConfig();
},
/**
* 微信小程序:初始化服务类型(官方/自定义)
*/
initWeappServiceType() {
// #ifdef MP-WEIXIN
// 从buttonConfig中获取官方客服标识
this.weappOfficialService = this.buttonConfig?.openType === 'contact';
// #endif
},
/**
* 获取店铺电话
*/
getShopTel() {
uni.getStorage({
key: 'shopInfo',
success: (e) => {
if (e.data && e.data.mobile && /^1[3-9]\d{9}$/.test(e.data.mobile)) {
this.tel = e.data.mobile;
}
}
});
},
/**
* 拨打电话
*/
call() {
if (!this.tel || !/^1[3-9]\d{9}$/.test(this.tel)) {
uni.showToast({ title: '暂无有效联系电话', icon: 'none' });
return;
}
uni.makePhoneCall({
phoneNumber: this.tel,
fail: (err) => {
if (err.errMsg !== 'makePhoneCall:fail cancel') {
uni.showToast({ title: '拨号失败,请稍后重试', icon: 'none' });
}
}
});
},
/**
* H5客服点击逻辑保持不变
*/
async handleCustomerService() {
if (this.isH5) {
uni.showLoading({ title: '加载中...', mask: true });
try {
const newConfig = await this.getLatestConfig();
this.latestConfig = newConfig;
this.initCustomerService(newConfig);
this.customerService.handleCustomerClick();
} catch (e) {
uni.showToast({ title: '操作失败', icon: 'none' });
} finally {
uni.hideLoading();
}
} else {
// 小程序:直接调用客服逻辑
this.customerService.handleCustomerClick();
}
},
/**
* 微信小程序自定义客服点击逻辑
*/
handleWeappCustomerService() {
// #ifdef MP-WEIXIN
this.customerService.handleCustomerClick();
// #endif
}
}
};
</script>
<style lang="scss">
.container-box {
width: 100%;
.item-wrap {
border-radius: 10rpx;
.image-box {
border-radius: 10rpx;
}
image {
width: 100%;
height: auto;
border-radius: 10rpx;
will-change: transform;
}
}
}
//悬浮按钮
<style scoped>
/* 父容器:不限制高度,避免挤压按钮 */
.fixed-box {
position: fixed;
right: 0rpx;
right: 20rpx; /* 增加右侧边距,避免贴边 */
bottom: 200rpx;
z-index: 10;
// background: #fff;
// box-shadow: 2rpx 2rpx 22rpx rgba(0, 0, 0, 0.3);
border-radius: 120rpx;
padding: 20rpx 0;
z-index: 9999;
display: flex;
justify-content: center;
flex-direction: column;
width: 100rpx;
box-sizing: border-box;
transition: 0.3s;
overflow: hidden;
align-items: center;
gap: 14rpx; /* 替代margin更稳定 */
}
.btn-item {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
line-height: 1;
margin: 14rpx 0;
transition: 0.1s;
background: #fff;
border-radius: 50rpx;
width: 80rpx;
height: 80rpx;
padding: 0;
/* 核心:强制按钮为正方形+正圆 */
.btn-item {
/* 宽高强制相等,必须是正方形 */
width: 88rpx !important;
height: 88rpx !important;
/* 强制正圆(优先级最高) */
border-radius: 50% !important;
/* 白色背景(确保是圆) */
background-color: #ffffff !important;
/* 背景图居中显示,不拉伸 */
background-size: 60% 60% !important;
background-position: center !important;
background-repeat: no-repeat !important;
/* 清除默认样式 */
border: none !important;
padding: 0 !important;
margin: 0 !important;
/* 居中内容 */
display: flex !important;
justify-content: center !important;
align-items: center !important;
/* 阴影增强视觉(可选) */
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}
/* 清除button标签的默认点击样式微信小程序/浏览器) */
.btn-item::after {
border: none !important;
}
text {
font-size: 36rpx;
font-weight: bold;
}
.unread-badge {
position: absolute;
top: -5rpx;
right: -5rpx;
background: #ff4544;
color: #fff;
border-radius: 20rpx;
min-width: 30rpx;
height: 30rpx;
line-height: 30rpx;
text-align: center;
font-size: 10rpx;
padding: 0 8rpx;
box-shadow: 0 2rpx 10rpx rgba(255, 73, 72, 0.3);
z-index: 1;
}
view {
font-size: 26rpx;
font-weight: bold;
}
/* 微信小程序字体适配 */
/* #ifdef MP-WEIXIN */
.unread-badge {
font-size: 20rpx;
}
/* #endif */
&.show {
transform: rotate(180deg);
}
&.switch {}
&.icon-xiala {
margin: 0;
margin-top: 0.1rpx;
}
}
.ai-icon {
font-size: 40rpx;
}
</style>

View File

@@ -10,9 +10,9 @@
</view>
<view class="birthday-title-desc" v-else>感谢您一直以来的支持在您生日到来之际特为您送上最真诚的祝福</view>
<view class="birthday-title-hint">
<image :src="$util.img('public/uniapp/birthday_gift/birthday_gift_left.png')" mode="" class="birthday-img-all"/>
<image :src="$util.img('public/uniapp/birthday_gift/birthday_gift_left.png')" mode="" class="birthday-img-all" />
<view class="font-size-toolbar">生日贺礼</view>
<image :src="$util.img('public/uniapp/birthday_gift/birthday_gift_right.png')" mode="" class="birthday-img-all"/>
<image :src="$util.img('public/uniapp/birthday_gift/birthday_gift_right.png')" mode="" class="birthday-img-all" />
</view>
<scroll-view scroll-y="true" class="register-box">
<view class="reward-content">
@@ -51,18 +51,14 @@
<block v-for="(item, index) in birthday.coupon_list" :key="index">
<view class="content">
<view class="info">
<block v-if="item.type == 'reward'">
<text class="num">
{{ parseFloat(item.money) }}
<text class="type">元优惠劵</text>
</text>
</block>
<block v-else-if="item.type == 'discount'">
<text class="num">
{{ item.discount }}
<text class="type"></text>
</text>
</block>
<text class="num" v-if="item.type == 'reward'">
{{ parseFloat(item.money) }}
<text class="type">元优惠劵</text>
</text>
<text class="num" v-else-if="item.type == 'discount'">
{{ item.discount }}
<text class="type"></text>
</text>
<view class="desc">用于下单时抵现或兑换商品等</view>
</view>
<view class="tip" @click="closeRewardPopup('3')">立即查看</view>
@@ -93,7 +89,8 @@
birthday: {
flag: false,
coupon_list: {}
}
},
callback: null
};
},
computed: {
@@ -117,7 +114,8 @@
this.init();
},
methods: {
init() {
init(callback = null) {
if (callback) this.callback = callback;
this.getBirthdayGift();
},
cancel() {
@@ -148,7 +146,9 @@
data: {
id: this.birthday.id
},
success: res => {}
success: res => {
if (this.callback) this.callback();
}
});
}
},
@@ -170,7 +170,7 @@
}
.register-box {
max-height: 300rpx;
max-height: 320rpx;
overflow-y: scroll;
/* margin-top:350rpx; */
}
@@ -187,12 +187,12 @@
<style lang="scss">
.reward-wrap {
width: 85vw;
width: 600rpx;
height: auto;
.wrap {
width: 100%;
height: auto;
width: 600rpx;
height: 932rpx;
background-size: 100%;
background-repeat: no-repeat;
padding-bottom: 40rpx;
@@ -266,7 +266,8 @@
background: #fff;
border-radius: 10rpx;
margin-bottom: 20rpx;
box-sizing: border-box;
height: 136rpx;
.info {
flex: 1;
}
@@ -323,13 +324,6 @@
height: 40rpx;
margin: 0 auto;
line-height: 40rpx;
/* margin: 20rpx 140rpx;
border: none;
background: linear-gradient(90deg, #FF6A00, #FF3C00);
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center; */
}
}
}

View File

@@ -1,95 +1,92 @@
<template>
<view class="empty" :class="{ fixed: fixed }">
<view class="empty_img"><image :src="$util.img('public/uniapp/common/common-empty.png')" mode="aspectFit"></image></view>
<view class="color-tip margin-top title" :style="{ color: textColor + ' !important' }">{{ text }}</view>
<view class="color-tip margin-bottom font-size-sub">{{ subText }}</view>
<button type="primary" size="mini" class="button mini" @click="goIndex()" v-if="isIndex">{{ emptyBtn.text }}</button>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: {
text: {
type: String,
default: '暂无相关数据'
},
subText: {
type: String,
default: ''
},
isIndex: {
type: Boolean,
default: true
},
emptyBtn: {
type: Object,
default: () => {
return { text: '去逛逛' };
}
},
fixed: {
type: Boolean,
default: false
},
textColor: {
type: String,
default: ''
}
},
methods: {
goIndex() {
if (this.emptyBtn.url) {
this.$util.redirectTo(this.emptyBtn.url, {}, 'redirectTo');
} else {
this.$util.redirectTo('/pages/index/index');
}
},
re(text) {
this.text = text;
}
}
};
</script>
<style lang="scss">
.empty {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: $padding;
box-sizing: border-box;
justify-content: center;
.title {
font-size: 30rpx;
}
.empty_img {
width: 50%;
height: 450rpx;
image {
width: 100%;
height: 100%;
padding-bottom: $padding;
}
}
button {
min-width: 300rpx;
margin-top: 100rpx;
height: 70rpx;
line-height: 70rpx !important;
font-size: $font-size-base;
font-weight: bold;
border-radius: 100rpx;
}
}
.fixed {
position: fixed;
left: 0;
top: 20vh;
}
</style>
<template>
<view class="empty" :class="{ fixed: fixed }">
<view class="empty_img"><image :src="$util.img('public/uniapp/common/common-empty.png')" mode="aspectFit"></image></view>
<view class="color-tip margin-top title" :style="{ color: textColor + ' !important' }">{{ text }}</view>
<view class="color-tip margin-bottom font-size-sub">{{ subText }}</view>
<button type="primary" size="mini" class="button mini" @click="goIndex()" v-if="isIndex">{{ emptyBtn.text }}</button>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: {
text: {
type: String,
default: '暂无相关数据'
},
subText: {
type: String,
default: ''
},
isIndex: {
type: Boolean,
default: true
},
emptyBtn: {
type: Object,
default: () => {
return { text: '去逛逛' };
}
},
fixed: {
type: Boolean,
default: false
},
textColor: {
type: String,
default: ''
}
},
methods: {
goIndex() {
if (this.emptyBtn.url) {
this.$util.redirectTo(this.emptyBtn.url, {}, 'redirectTo');
} else {
this.$util.redirectTo('/pages/index/index');
}
}
}
};
</script>
<style lang="scss">
.empty {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: $padding;
box-sizing: border-box;
justify-content: center;
.title {
font-size: 30rpx;
}
.empty_img {
width: 50%;
height: 450rpx;
image {
width: 100%;
height: 100%;
padding-bottom: $padding;
}
}
button {
min-width: 300rpx;
margin-top: 100rpx;
height: 70rpx;
line-height: 70rpx !important;
font-size: $font-size-base;
font-weight: bold;
border-radius: 100rpx;
}
}
.fixed {
position: fixed;
left: 0;
top: 20vh;
}
</style>

View File

@@ -220,7 +220,7 @@
},
data() {
return {
formData: this.data
formData:[]
};
},
created() {
@@ -229,23 +229,26 @@
watch: {
data: function() {
this.setFormData();
}
},
formData: {
handler(newVal, oldVal) {
this.$emit('changeFormVal',newVal)
},
deep: true
}
},
methods: {
setFormData() {
this.formData = this.data;
this.formData.forEach(item => {
let formData = JSON.parse(JSON.stringify(this.data));
formData.forEach(item => {
if (!item.val) item.val = item.value.default ? item.value.default : '';
if (item.value.options) {
item.option_lists = [];
item.value.options.forEach((v, k) => {
var obj = {};
obj.value = v;
obj.checked = false;
if (item.controller == 'Radio' && ((!item.val && k == 0) || (item.val &&
item.val == v))) {
if (item.controller == 'Radio' && ((!item.val && k == 0) || (item.val && item.val == v))) {
obj.checked = true;
item.val = v;
}
@@ -359,6 +362,7 @@
else item.default_regions = [];
}
});
this.formData = JSON.parse(JSON.stringify(formData))
},
verify() {
let verify = true;
@@ -392,6 +396,7 @@
}
// 验证手机号
if (item.name == 'MOBILE' && this.$util.verifyMobile(item.val) === false) {
verify = !item.value.required;
if (verify == false) {
@@ -515,7 +520,7 @@
}
}
}
console.log(verify)
if (verify) {
return this.formData;
} else return verify;
@@ -678,7 +683,7 @@
&:last-child {
margin-bottom: 0;
border-bottom: solid 1px #eee;
border-bottom: 0;
}
&.align-top {
@@ -836,6 +841,9 @@
checkbox {
display: none;
}
label {
padding:10rpx 0;
}
.checkbox {
display: flex;

View File

@@ -1,146 +1,146 @@
<template>
<view>
<block v-if="text == '客服'">
<!-- <ns-contact :niushop="chatParam" :send-message-title="sendData.title" :send-message-path="sendData.path" :send-message-img="sendData.img"> -->
<button hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" class="action-icon-wrap" style="background: transparent;padding: 0;margin: 0;">
<view class="iconfont color-title" :class="icon"></view>
<text>{{ text }}</text>
<view class="corner-mark color-base-bg" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark }}</view>
</button>
<!-- </ns-contact> -->
</block>
<block v-else>
<view class="action-icon-wrap" @click="clickEvent">
<view class="iconfont " :class="icon"></view>
<text>{{ text }}</text>
<view class="corner-mark color-base-bg" :class="{'max' : parseInt(cornerMark)>99}" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark > 99 ? '99+' : cornerMark }}</view>
</view>
</block>
</view>
</template>
<script>
import nsContact from '@/components/ns-contact/ns-contact.vue';
export default {
name: 'ns-goods-action-icon',
props: {
// 商品底部icon导航icon图标
icon: {
type: String,
default: ''
},
// 商品底部icon导航文字
text: {
type: String,
default: ''
},
// 角标文字
cornerMark: {
type: String,
default: ''
},
// 角标背景色
cornerMarkBg: {
type: String,
default: ''
},
// 角标文字颜色
cornerMarkColor: {
type: String,
default: '#fff'
},
// 开放能力
openType: {
type: String,
default: ''
},
// 发送内容 openType="contact"时有效
sendData: {
type: Object,
default: function() {
return {
title: '',
path: '',
img: ''
};
}
},
chatParam: {
type: Object,
default: function(){
return {}
}
}
},
components:{
nsContact
},
methods: {
clickEvent() {
this.$emit('click');
}
}
};
</script>
<style lang="scss">
.action-icon-wrap {
display: flex;
flex-direction: column;
justify-content: center;
height: 100rpx;
min-width: 90rpx;
text-align: center;
position: relative;
margin-right: 6rpx;
}
.action-icon-wrap button {
width: 100%;
height: 100%;
position: absolute;
border: none;
z-index: 1;
padding: 0;
margin: 0;
background: none;
top: 0;
left: 0;
opacity: 0;
}
.action-icon-wrap button::after {
border: none !important;
}
.action-icon-wrap .iconfont {
margin: 0 auto 10rpx;
line-height: 1;
font-size: 40rpx;
}
.action-icon-wrap .corner-mark {
position: absolute;
z-index: 99;
font-size: $font-size-activity-tag;
top: 4rpx;
right: 12rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 24rpx;
height: 24rpx;
padding: 6rpx;
border-radius: 50%;
&.max{
right:-4rpx;
width: 40rpx;
border-radius: 24rpx;
}
}
.action-icon-wrap text {
font-size: $font-size-tag;
line-height: 1;
}
</style>
<template>
<view>
<block v-if="text == '客服' || text == 'Contact'">
<!-- <ns-contact :niushop="chatParam" :send-message-title="sendData.title" :send-message-path="sendData.path" :send-message-img="sendData.img"> -->
<button hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" class="action-icon-wrap" style="background: transparent;padding: 0;margin: 0;">
<view class="iconfont color-title" :class="icon"></view>
<text>{{ text }}</text>
<view class="corner-mark color-base-bg" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark }}</view>
</button>
<!-- </ns-contact> -->
</block>
<block v-else>
<view class="action-icon-wrap" @click="clickEvent">
<view class="iconfont color-title" :class="icon"></view>
<text>{{ text }}</text>
<view class="corner-mark color-base-bg" :class="{'max' : parseInt(cornerMark)>99}" v-if="cornerMark.length" :style="{ background: cornerMarkBg+'!important', color: cornerMarkColor }">{{ cornerMark > 99 ? '99+' : cornerMark }}</view>
</view>
</block>
</view>
</template>
<script>
import nsContact from '@/components/ns-contact/ns-contact.vue';
export default {
name: 'ns-goods-action-icon',
props: {
// 商品底部icon导航icon图标
icon: {
type: String,
default: ''
},
// 商品底部icon导航文字
text: {
type: String,
default: ''
},
// 角标文字
cornerMark: {
type: String,
default: ''
},
// 角标背景色
cornerMarkBg: {
type: String,
default: ''
},
// 角标文字颜色
cornerMarkColor: {
type: String,
default: '#fff'
},
// 开放能力
openType: {
type: String,
default: ''
},
// 发送内容 openType="contact"时有效
sendData: {
type: Object,
default: function() {
return {
title: '',
path: '',
img: ''
};
}
},
chatParam: {
type: Object,
default: function(){
return {}
}
}
},
components:{
nsContact
},
methods: {
clickEvent() {
this.$emit('click');
}
}
};
</script>
<style lang="scss">
.action-icon-wrap {
display: flex;
flex-direction: column;
justify-content: center;
height: 100rpx;
min-width: 90rpx;
text-align: center;
position: relative;
margin-right: 6rpx;
}
.action-icon-wrap button {
width: 100%;
height: 100%;
position: absolute;
border: none;
z-index: 1;
padding: 0;
margin: 0;
background: none;
top: 0;
left: 0;
opacity: 0;
}
.action-icon-wrap button::after {
border: none !important;
}
.action-icon-wrap .iconfont {
margin: 0 auto 10rpx;
line-height: 1;
font-size: 40rpx;
}
.action-icon-wrap .corner-mark {
position: absolute;
z-index: 99;
font-size: $font-size-activity-tag;
top: 4rpx;
right: 12rpx;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
width: 24rpx;
height: 24rpx;
padding: 6rpx;
border-radius: 50%;
&.max{
right:-4rpx;
width: 40rpx;
border-radius: 24rpx;
}
}
.action-icon-wrap text {
font-size: $font-size-tag;
line-height: 1;
}
</style>

View File

@@ -79,8 +79,6 @@ export default {
<style lang="scss">
.ns-goods-promotion {
background-color: #fff;
& > view {
}
.item {
display: flex;
font-size: $font-size-base;

View File

@@ -1,5 +1,93 @@
<template>
<view></view>
<view class="goods-recommend" v-if="list.length">
<view class="goods-recommend-title">
<text class="title">{{ config.title }}</text>
</view>
<view class="goods-list double-column">
<view class="goods-item margin-bottom" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" :lazy-load="true" />
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
<view class="sell-out" v-if="item.goods_stock <= 0">
<text class="iconfont icon-shuqing"></text>
</view>
</view>
<view class="info-wrap">
<view class="goods-name" :class="[{ 'using-hidden': config.nameLineMode == 'single' }, { 'multi-hidden': config.nameLineMode == 'multiple' }]">
{{ item.goods_name }}
</view>
<view class="lineheight-clear">
<view class="discount-price">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
</view>
<view class="member-price-tag" v-if="item.member_price && item.member_price == showPrice(item)">
<image :src="$util.img('public/uniapp/index/VIP.png')" mode="widthFix"/>
</view>
<view class="member-price-tag" v-else-if="item.promotion_type == 1">
<image :src="$util.img('public/uniapp/index/discount.png')" mode="widthFix"/>
</view>
<view class="delete-price font-size-activity-tag color-tip price-font" v-if="showMarketPrice(item)">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ showMarketPrice(item) }}</text>
</view>
</view>
<view class="pro-info">
<view class="block-wrap">
<view class="sale font-size-activity-tag color-tip" v-if="item.sale_show">已售{{ item.sale_num }}{{ item.unit ? item.unit : '' }}</view>
</view>
<view class="cart-action-wrap" v-if="config.control && item.is_virtual == 0">
<!-- 购物车图标 -->
<view v-if="config.style == 'icon-cart'" :style="{
color: config.theme == 'diy' ? config.textColor : '',
borderColor: config.theme == 'diy' ? config.textColor : ''
}" class="cart shopping-cart-btn iconfont icon-gouwuche click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
</view>
<!--加号图标 -->
<view v-else-if="config.style == 'icon-add'" :style="{
color: config.theme == 'diy' ? config.textColor : '',
borderColor: config.theme == 'diy' ? config.textColor : ''
}" class="cart plus-sign-btn iconfont icon-add1 click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
</view>
<!-- 按钮 -->
<view v-else-if="config.style == 'button'" :style="{
backgroundColor: config.theme == 'diy' ? config.bgColor : '',
color: config.theme == 'diy' ? config.textColor : '',
fontWeight: config.theme == 'diy' ? (config.fontWeight ? 'bold' : 'normal') : '',
padding: config.theme == 'diy' ? '12rpx ' + config.padding * 2 + 'rpx' : ''
}" class="cart buy-btn click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
{{ config.text }}
<view class="click-event"></view>
</view>
<!--自定义图标 -->
<view v-else-if="config.style == 'icon-diy'" :style="{
color: config.theme == 'diy' ? config.textColor : ''
}" class="icon-diy click-wrap" :id="'goods-' + item.id"
@click.stop="$refs.goodsSkuIndex.addCart(config.cartEvent, item, $event)">
<view class="click-event"></view>
<diy-icon :icon="config.iconDiy.icon" :value="config.iconDiy.style ? config.iconDiy.style : null"></diy-icon>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="circle-box" v-if="showLoading && load"><ns-loading></ns-loading></view>
<ns-goods-sku-index ref="goodsSkuIndex" @cartListChange="cartListChange" @addCart="addCart"></ns-goods-sku-index>
</view>
</template>
<script>
@@ -256,6 +344,22 @@
right: 0;
// transform: translateY(-50%);
}
.sell-out{
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.5);
text{
color: #fff;
font-size: 220rpx;
}
}
}
.goods-tag {

View File

@@ -31,9 +31,11 @@
@click="change(item_value.sku_id, item_value.spec_id)">
<image v-if="item_value.image" :src="$util.img(item_value.image, { size: 'small' })" @error="valueImageError(index, index_value)" />
<text>{{ item_value.spec_value_name }}</text>
<view class="empty-stock" v-if="item_value.stock == 0">缺货</view>
</view>
</view>
</view>
<ns-form :data="goodsForm" v-if="goodsForm" ref="form"></ns-form>
</scroll-view>
</view>
<view class="footer">
@@ -50,12 +52,12 @@
</view>
</view>
<view class="footer-right">
<view class="change_num" v-if="number > 0">
<view class="change_num" v-if="cartInputLock">
<view class="num-action" @click="changeNum('-')">
<text class="desc iconfont icon-jianshao color-base-text"></text>
<view class="click-event"></view>
</view>
<input type="number" class="uni-input" @blur="blur" v-model="number" placeholder="0" @input="keyInput(false)" />
<input type="number" class="uni-input" @blur="blur" v-model.lazy="number" placeholder="0" @input="keyInput(false,null,true)" />
<view class="num-action" :id="'select-sku-num-' + goodsDetail.goods_id" @click="changeNum('+', $event)">
<text class="add iconfont icon-add-fill color-base-text change_hover"></text>
<view class="click-event"></view>
@@ -115,7 +117,9 @@
maxBuy: 0,
minBuy: 0,
isLoad: false,
timeout: null
timeout: null,
goodsForm: null,
skuList: []
};
},
created() {
@@ -124,21 +128,44 @@
watch: {
pointLimit(newNum, oldNum) {
this.limitNumber = Number(newNum);
},
minBuy(newData, oldData) {
if (this.minBuy > 1) {
this.number = Number(this.minBuy);
}
},
computed:{
cartInputLock:function() {
if(!this.isLoad){
return true
}else if(this.number>0){
return true
}else{
return false
}
}
},
methods: {
calcSkuStock() {
if(this.goodsDetail.goods_spec_format && this.goodsDetail.goods_spec_format.length){
this.goodsDetail.goods_spec_format.forEach(spec => {
spec.value.forEach(val => {
this.skuList.forEach(sku => {
if (val.sku_id == sku.sku_id) {
this.$set(val,'stock',sku.stock);
}
})
})
})
}
},
show(data) {
this.number = 0 ; // 每次打开要初始化
this.isLoad = true;
this.goodsDetail = data;
this.goodsId = this.goodsDetail.goods_id;
this.skuId = this.goodsDetail.sku_id;
this.maxBuy = this.goodsDetail.max_buy;
this.minBuy = this.goodsDetail.min_buy;
this.goodsForm = null
this.getGoodsForm()
this.getGoodsSkuList(this.goodsId);
this.keyInput(false);
if (this.getCurrentCart()) {
@@ -146,6 +173,19 @@
}
this.$refs.skuPopup.open();
},
getGoodsForm(){
this.$api.sendRequest({
url: "/form/api/form/goodsform",
data: {
goods_id: this.goodsDetail.goods_id
},
success: res => {
if (res.code == 0 && res.data) {
this.goodsForm = res.data
}
}
});
},
hide() {
if(this.$refs.skuPopup) this.$refs.skuPopup.close();
},
@@ -175,6 +215,7 @@
} else {
this.number = 0;
}
this.calcSkuStock()
},
//查看规格图片
previewMedia() {
@@ -200,7 +241,7 @@
if (res.code >= 0) {
let data = res.data,
obj = {};
res.data.forEach((item, index) => {
// 当前商品SKU规格
if (item.sku_spec_format) item.sku_spec_format = JSON.parse(item.sku_spec_format);
@@ -228,6 +269,8 @@
obj['sku_' + item.sku_id] = item;
});
this.goodsSkuList = obj;
this.skuList = res.data;
this.calcSkuStock();
}
}
});
@@ -281,12 +324,11 @@
}
const query = uni.createSelectorQuery().in(this);
query.select('#' + event.currentTarget.id + ' .click-event')
.boundingClientRect(data => {
if (data) {
this.$emit('addCart', data.left, data.top);
}
}).exec();
query.select('#' + event.currentTarget.id + ' .click-event').boundingClientRect(data => {
if (data) {
this.$emit('addCart', data.left, data.top);
}
}).exec();
} else if (tag == '-') {
// 减
if (this.number > min) {
@@ -325,14 +367,16 @@
let newNumber = parseInt(this.number);
this.isLoad = false;
this.isLoad = true;
setTimeout(() => {
this.number = newNumber;
this.cartNumChange(this.number);
}, 0);
},
//输入数量
keyInput(flag, callback) {
keyInput(flag, callback,isInput) {
if(isInput) this.isLoad = false
setTimeout(() => {
var stock = this.goodsDetail.stock;
@@ -352,7 +396,7 @@
this.number = stock;
}
// 商品起售数
if (this.minBuy > 1 && this.number < this.minBuy) {
if (flag && this.minBuy > 1 && this.number < this.minBuy) {
this.number = this.minBuy;
}
@@ -374,7 +418,13 @@
});
return;
}
if (this.$refs.form) {
if (!this.$refs.form.verify()) return;
uni.setStorageSync('goodFormData', {
goods_id: this.goodsDetail.goods_id,
form_data: this.$refs.form.formData
});
}
this.number = 1;
//纠正数量
this.keyInput(true, () => {
@@ -676,7 +726,20 @@
display: flex;
flex-wrap: wrap;
}
.body-item .sku-list-wrap .empty-stock{
font-size: 18rpx;
line-height: 22rpx;
position: absolute;
right: 0;
top: 0;
border-radius: 4rpx;
transform: translateY(-50%);
padding: 0 2rpx;
color: #989898;
background-color: #f0f1f2;
}
.sku-layer .body-item .sku-list-wrap .items {
text-align: center;
position: relative;

View File

@@ -51,12 +51,7 @@
* @param {Object} data 商品项
*/
singleSpecificationGoods(data, event) {
let cart =
this.cartList['goods_' + data.goods_id] && this.cartList['goods_' + data.goods_id]['sku_' + data
.sku_id
] ?
this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id] :
null;
let cart = this.cartList['goods_' + data.goods_id] && this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id] ? this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id] : null;
let cartNum = cart ? cart.num : 0;
let api = cart && cart.cart_id ? '/api/cart/edit' : '/api/cart/add';
@@ -66,6 +61,7 @@
if(cart && cart.cart_id){
_num = _num + (data.min_buy > 0 ? data.min_buy : 1)
}
let cart_id = cart ? cart.cart_id : 0;
if (_num > parseInt(data.stock)) {
this.$util.showToast({
@@ -119,8 +115,7 @@
this.isRepeat = false;
if (res.code == 0) {
if (cart_id == 0) {
this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id].cart_id =
res.data;
this.cartList['goods_' + data.goods_id]['sku_' + data.sku_id].cart_id = res.data;
}
this.$util.showToast({
title: "商品添加购物车成功"

View File

@@ -153,6 +153,7 @@
}" class="items" @click="change(item_value.sku_id, item_value.spec_id)">
<image v-if="item_value.image" :src="$util.img(item_value.image, { size: 'small' })" @error="valueImageError(index, index_value)" />
<text>{{ item_value.spec_value_name }}</text>
<view class="empty-stock" v-if="item_value.stock == 0">缺货</view>
</view>
</view>
@@ -173,8 +174,8 @@
</view>
</view>
</view>
<ns-form :data="goodsForm" v-if="goodsForm" ref="form"></ns-form>
<ns-form :data="goodsForm" v-if="goodsForm" ref="form" @changeFormVal="changeFormVal"></ns-form>
</scroll-view>
</view>
<view class="footer" @click="confirm()">
@@ -182,7 +183,8 @@
<block v-if="type == 'point'">
<block v-if="goodsDetail.type == 1">
<!-- 兑换商品 -->
<button v-if="goodsDetail.stock && goodsDetail.stock != 0" type="primary">兑换</button>
<button v-if="goodsDetail.point * number > memberPoint" disabled="true" type="primary">积分不足</button>
<button v-else-if="goodsDetail.stock && goodsDetail.stock != 0" type="primary">兑换</button>
<button type="primary" v-else disabled="true">库存不足</button>
</block>
<block v-else-if="goodsDetail.type == 2 || goodsDetail.type == 3">
@@ -195,7 +197,8 @@
<button type="primary" v-else-if="goodsDetail.stock && goodsDetail.stock != 0 && type == 'buy_now'">立即购买</button>
<button type="primary" v-else-if="goodsDetail.stock && goodsDetail.stock != 0 && type == 'confirm'">确认</button>
<template v-else-if="goodsDetail.stock && goodsDetail.stock != 0">
<template v-if="goodsDetail.buy_num">
<!-- 拼团和拼返的buy_num代表最大购买数量不是最小购买数量 -->
<template v-if="type != 'pintuan' && type != 'pinfan' && goodsDetail.buy_num">
<button type="primary" v-if="goodsDetail.buy_num <= goodsDetail.stock">立即抢购</button>
<button type="primary" v-else disabled="true">库存不足</button>
</template>
@@ -226,6 +229,10 @@
type: [Number, String],
default: 0
},
memberPoint: {
type: [Number, String],
default: 0
},
goodsDetail: {
type: Object,
default: null
@@ -244,6 +251,12 @@
minBuy: {
type: Number,
default: 0
},
goodsFormVal: {
type: Array,
default () {
return [];
}
}
},
data() {
@@ -265,7 +278,8 @@
pintuan_num_field: 'pintuan_num',
goodsSkuInfo: null, //所有的商品规格信息
goodsForm: null,
isLoad: false // 是否首次加载
isLoad: false ,// 是否首次加载
skuList: [],//所有规格数据
};
},
created() {
@@ -310,8 +324,8 @@
this.pintuan_num_field = newData.pintuan_num_field;
}
if (this.goodsDetail.goods_form && !this.goodsForm) this.goodsForm = this.goodsDetail.goods_form;
// 切换商品,重新赋值
this.calcSkuStock()
if (newData.goods_id != oldData.goods_id) {
if (this.goodsDetail.pintuan_id) {
this.getPintuanGoodsSkuList();
@@ -378,6 +392,34 @@
}
},
methods: {
calcSkuStock() {
if(this.goodsDetail.goods_spec_format && this.goodsDetail.goods_spec_format.length){
this.goodsDetail.goods_spec_format.forEach(spec => {
spec.value.forEach(val => {
this.skuList.forEach(sku => {
if (val.sku_id == sku.sku_id) {
this.$set(val,'stock',sku.stock);
}
})
})
})
}
},
changeFormVal(e) {
this.$emit('detailChangeVal',e)
},
getGoodsForm(){
this.$api.sendRequest({
url: "/form/api/form/goodsform",
data: {
goods_id: this.goodsDetail.goods_id
},
success: res => {
if (res.code == 0 && res.data) this.$set(this.goodsDetail, 'goods_form', res.data);
if(this.goodsFormVal.length) Object.assign(this.goodsDetail.goods_form,this.goodsFormVal)
}
});
},
//【普通商品】获取所有规格信息
getGeneralGoodsSkuList(callback) {
this.$api.sendRequest({
@@ -387,9 +429,7 @@
},
success: res => {
if (res.code >= 0) {
let data = res.data,
obj = {};
let obj = {};
res.data.forEach((item, index) => {
item = this.handleData(item);
@@ -415,6 +455,8 @@
if (this.skuId == 0) this.skuId = res.data[0].sku_id;
this.goodsSkuInfo = obj;
this.isLoad = false;
this.skuList = res.data;
this.calcSkuStock();
if (callback) callback();
} else {
this.$util.redirectTo('/pages/index/index');
@@ -493,7 +535,7 @@
item = this.handleData(item);
item.show_price = this.goodsDetail.groupbuy_price;
item.save_price = item.price - item.show_price > 0 ? (item.price - item.show_price).toFixed(2) : 0;
//团购buy_num指最少购买数量
if (data.stock > data.buy_num) {
this.number = this.goodsDetail.buy_num;
this.minNumber = this.goodsDetail.buy_num;
@@ -730,6 +772,9 @@
popclose() {
if (this.$refs.skuPopup.showPopup) {
this.$emit('hideSkuPop');
}else{
this.goodsForm = null
this.getGoodsForm()
}
},
//查看规格图片
@@ -766,7 +811,6 @@
}
}
}
this.goodsSkuDetail = this.goodsSkuInfo['sku_' + this.skuId];
this.$emit('refresh', this.goodsSkuDetail);
this.$emit('getSkuId', this.skuId);
@@ -781,6 +825,7 @@
this.confirmDisabled = false;
}
}
this.keyInput(true);
},
showPrice(price) {
@@ -1013,7 +1058,7 @@
return;
}
if (this.goodsDetail.buy_num > this.goodsDetail.stock) {
if (this.type != 'pintuan' && this.type != 'pinfan' && this.goodsDetail.buy_num > this.goodsDetail.stock) {
this.$util.showToast({
title: '库存小于最低购买数量'
});
@@ -1077,7 +1122,7 @@
title: '加入购物车成功'
});
this.cartNum += this.number;
this.$store.dispatch('getCartNumber');
let discount_price = this.goodsDetail.discount_price;
if (this.goodsDetail.member_price > 0 && Number(this.goodsDetail.member_price) <= Number(this.goodsDetail.discount_price)) {
discount_price = this.goodsDetail.member_price;
@@ -1213,28 +1258,29 @@
});
} else if (this.type == 'bargain') {
// 砍价
this.$api.sendRequest({
url: '/bargain/api/bargain/launch',
data: {
id: this.goodsDetail.id
},
success: res => {
this.btnSwitch = false;
if (res.code == 0) {
this.$util.redirectTo(
'/pages_promotion/bargain/detail', {
if (this.callback) {
this.callback();
}else {
this.$api.sendRequest({
url: '/bargain/api/bargain/launch',
data: {
id: this.goodsDetail.id
},
success: res => {
this.btnSwitch = false;
if (res.code == 0) {
this.$util.redirectTo('/pages_promotion/bargain/detail', {
b_id: this.goodsDetail.bargain_id,
l_id: res.data
},
'redirectTo'
);
} else {
this.$util.showToast({
title: res.message
});
}, 'redirectTo');
} else {
this.$util.showToast({
title: res.message
});
}
}
}
});
});
}
} else if (this.type == 'point') {
// 积分兑换
var data = {
@@ -1399,13 +1445,27 @@
.body-item .sku-list-wrap {
padding-bottom: 0rpx;
position: relative;
}
.body-item .sku-list-wrap .title {
padding: 20rpx 0;
display: block;
}
.body-item .sku-list-wrap .empty-stock{
font-size: 18rpx;
line-height: 22rpx;
position: absolute;
right: 0;
top: 0;
border-radius: 4rpx;
transform: translateY(-50%);
padding: 0 2rpx;
color: #989898;
background-color: #f0f1f2;
}
.body-item .sku-list-wrap .items {
position: relative;
display: inline-block;

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,25 @@
<template>
<view class="mp-html">
<mp-html :content="content"></mp-html>
</view>
</template>
<script>
export default {
props: {
content: {
type: String,
default: '',
}
},
}
</script>
<style lang="scss">
.mp-html{
/deep/ img{
width:100% !important;
display:block;
}
}
</style>

View File

@@ -1,404 +1,400 @@
<template>
<!-- <view class="ns-navbar-wrap" :class="'style-' + data.navStyle">
<view class="u-navbar" :style="{ backgroundColor: bgColor, paddingTop: navbarHeight + 'px' }">
<view class="navbar-inner" :style="navbarInnerStyle">
<view class="back-wrap" v-if="isBack && isBackShow" @tap="goBack">
<text class="iconfont icon-back_light" :style="{ color: titleColor }"></text>
</view>
<view v-if="data.navStyle == 1" class="content-wrap" :class="[data.textImgPosLink, isBack && isBackShow ? 'have-back' : '']" @click="toLink(data.moreLink.wap_url)">
<view class="title-wrap" :style="{ fontSize: '14px', color: data.textNavColor, textAlign: data.textImgPosLink }">
{{ data.title }}
</view>
</view>
<view v-if="data.navStyle == 2" class="content-wrap" @click="toLink(data.moreLink.wap_url)">
<view class="title-wrap" :style="{ color: data.textNavColor }">
<view>
<image :src="$util.img(data.topNavImg)" mode="heightFix"></image>
</view>
<view :style="{ color: data.textNavColor }">{{ data.title }}</view>
</view>
</view>
<view v-if="data.navStyle == 3" class="content-wrap">
<view class="title-wrap" @click="toLink(data.moreLink.wap_url)">
<image :src="$util.img(data.topNavImg)" mode="aspectFit"></image>
</view>
<view class="search" @click="$util.redirectTo('/pages_tool/goods/search')" :style="{ height: menuButtonInfo.height - 2 + 'px', lineHeight: menuButtonInfo.height - 2 + 'px' }">
<text class="iconfont icon-sousuo3"></text>
<text>请输入商品名称</text>
</view>
<view :style="{ 'width': capsuleWidth }"></view>
</view>
<view v-if="data.navStyle == 4" class="content-wrap" :class="{ 'have-back': isBack && isBackShow }" @click="chooseOtherStore()">
<text class="iconfont icon-dizhi" :style="{ color: data.textNavColor }"></text>
<view v-if="globalStoreInfo && globalStoreInfo.store_id" class="title-wrap" :style="{ color: data.textNavColor }">{{ globalStoreInfo.store_name }}</view>
<view v-else class="title-wrap" :style="{ color: data.textNavColor }">定位中...</view>
<text class="iconfont icon-right" :style="{ color: data.textNavColor }"></text>
<view class="nearby-store-name" :style="{ color: data.textNavColor }">附近门店</view>
</view>
</view>
</view>
<view class="u-navbar-placeholder" :style="{ width: '100%', paddingTop: placeholderHeight + 'px' }"></view>
</view> -->
</template>
<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// 如果是小程序,获取右上角胶囊的尺寸信息,避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
// 自定义导航栏
export default {
name: 'ns-navbar',
props: {
data: {
type: Object,
default() {
return {};
}
},
// 标题的颜色
titleColor: {
type: String,
default: '#606266'
},
// 自定义返回逻辑
customBack: {
type: Function,
default: null
},
scrollTop: {
type: [String, Number],
default: '0'
},
// 是否显示导航栏左边返回图标和辅助文字
isBack: {
type: Boolean,
default: true
}
},
data() {
return {
menuButtonInfo: menuButtonInfo,
isBackShow: false,
placeholderHeight: 0
};
},
computed: {
// 导航栏内部盒子的样式
navbarInnerStyle() {
let style = '';
// 导航栏宽度,如果在小程序下,导航栏宽度为胶囊的左边到屏幕左边的距离
style += 'height:' + menuButtonInfo.height * 2 + 'rpx;';
return style;
},
// 转换字符数值为真正的数值
navbarHeight() {
// #ifdef APP-PLUS || H5
return 25;
// #endif
// #ifdef MP
// 小程序特别处理,让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
let height = menuButtonInfo.top;
return height;
// #endif
},
bgColor() {
var color = '';
if (this.data.topNavBg) {
// 顶部透明
color = 'transparent';
let top = 0;
if (this.data.navStyle == 4) {
// #ifdef H5
top = 15;
// #endif
// #ifdef MP
top = this.navbarHeight - 25;
// #endif
}
if (this.scrollTop > top) {
color = this.data.topNavColor;
} else {
color = 'transparent';
}
} else {
color = this.data.topNavColor;
}
return color;
},
capsuleWidth() {
let width = `calc(100vw - ${this.menuButtonInfo.right}px + ${this.menuButtonInfo.width}px + 10px)`;
return width;
}
},
created(e) {
// var pages = getCurrentPages();
// if (pages.length > 1) {
// this.isBackShow = true;
// }
// this.navbarPlaceholderHeight();
},
mounted() {
// this.setModuleLocatinoFn();
},
methods: {
toLink(val) {
if (val) this.$util.redirectTo(val);
},
goBack() {
// 如果自定义了点击返回按钮的函数,则执行,否则执行返回逻辑
if (typeof this.customBack === 'function') {
this.customBack();
} else {
uni.navigateBack();
}
},
// 选择其他门店
chooseOtherStore() {
if (this.globalStoreConfig && this.globalStoreConfig.is_allow_change == 1) {
this.$util.redirectTo('/pages_tool/store/list');
} else if (this.globalStoreInfo) {
// 禁止切换门店,进入门店详情
this.$util.redirectTo('/pages_tool/store/detail', {
store_id: this.globalStoreInfo.store_id
});
}
},
navbarPlaceholderHeight() {
let height = 0;
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query
.select('.ns-navbar-wrap .u-navbar')
.boundingClientRect(data => {
// 获取公告自身高度
this.placeholderHeight = data.height;
})
.exec();
});
},
// 向vuex中的diyIndexPositionObj增加公告导航组件定位位置
setModuleLocatinoFn() {
const query = uni.createSelectorQuery().in(this);
query.select('.ns-navbar-wrap .u-navbar')
.boundingClientRect(data => {
let diyIndexPage = {
originalVal: data.height || 0, //自身高度 px
currVal: 0 //定位高度
};
this.$store.commit('setDiyGroupPositionObj', {
'nsNavbar': diyIndexPage
});
}).exec();
}
}
};
</script>
<style scoped lang="scss">
/* #ifdef H5 */
.style-1,
.style-2,
.style-3 {
display: none;
}
/* #endif */
.u-navbar {
width: 100%;
transition: background 0.3s;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 991;
}
.navbar-inner {
display: flex;
justify-content: space-between;
position: relative;
align-items: center;
padding-bottom: 20rpx;
/* #ifdef H5 */
padding-bottom: 40rpx;
/* #endif */
}
.back-wrap {
padding: 0 14rpx 0 24rpx;
.iconfont {
font-size: 44rpx;
}
}
.content-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 60rpx;
text-align: center;
flex-shrink: 0;
}
.title-wrap {
line-height: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 32rpx;
color: #000000;
}
.ns-navbar-wrap {
&.style-1 {
.content-wrap {
.title-wrap {
font-size: 27rpx;
}
&.left {
left: 30rpx;
}
&.center {
left: 0;
padding-right: 0;
}
&.have-back {
left: 90rpx;
padding-right: 200rpx;
}
}
}
&.style-2 {
.content-wrap {
.title-wrap {
display: flex;
align-items: center;
text-align: left;
>view {
height: 56rpx;
line-height: 56rpx;
max-width: 300rpx;
margin-left: 30rpx;
font-size: 27rpx;
image {
width: 100%;
height: 100%;
}
&:last-child {
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //用省略号显示
white-space: nowrap; //不换行
flex: 1;
}
}
}
}
}
&.style-3 {
.content-wrap {
.title-wrap {
height: 60rpx;
width: 170rpx;
max-width: 170rpx;
margin-left: 30rpx;
flex: initial;
text-align: center;
margin-right: 10rpx;
image {
height: 100%;
width: 100%;
}
}
.search {
flex: 1;
padding: 0 20rpx;
background-color: #fff;
text-align: left;
border-radius: 60rpx;
height: 60rpx;
line-height: 60rpx;
border: 1px solid #eeeeee;
color: rgb(102, 102, 102);
display: flex;
align-items: center;
margin-right: 10rpx;
.iconfont {
color: #909399;
font-size: 32rpx;
margin-right: 10rpx;
}
}
}
}
&.style-4 {
.icon-dizhi{
font-size: 28rpx;
}
.content-wrap {
top: initial;
text-align: left;
padding-left: 30rpx;
&.have-back {
left: 60rpx;
right: 190rpx;
}
.title-wrap {
flex: none;
margin: 0 10rpx;
max-width: 360rpx;
font-size: 27rpx;
}
.icon-right {
font-size: 24rpx;
}
.nearby-store-name {
margin: 0 10rpx;
background: rgba(0, 0, 0, .2);
font-size: 22rpx;
border-radius: 40rpx;
padding: 10rpx 20rpx;
line-height: 1;
}
}
}
}
<template>
<view class="ns-navbar-wrap" :class="'style-' + data.navStyle">
<!-- #ifndef MP-ALIPAY -->
<view class="u-navbar" :style="{ backgroundColor: bgColor, paddingTop: navbarHeight + 'px' }">
<view class="navbar-inner" :style="navbarInnerStyle">
<view class="back-wrap" v-if="isBack && isBackShow" @tap="goBack">
<text class="iconfont icon-back_light" :style="{ color: titleColor }"></text>
</view>
<view v-if="data.navStyle == 1" class="content-wrap" :class="[data.textImgPosLink, isBack && isBackShow ? 'have-back' : '']" @click="toLink(data.moreLink.wap_url)">
<view class="title-wrap" :style="{ fontSize: '16px', color: data.textNavColor, textAlign: data.textImgPosLink }">
{{ data.title }}
</view>
</view>
<view v-if="data.navStyle == 2" class="content-wrap" @click="toLink(data.moreLink.wap_url)">
<view class="title-wrap" :style="{ color: data.textNavColor }">
<view>
<image :src="$util.img(data.topNavImg)" mode="heightFix"></image>
</view>
<view :style="{ color: data.textNavColor }">{{ data.title }}</view>
</view>
</view>
<view v-if="data.navStyle == 3" class="content-wrap">
<view class="title-wrap" @click="toLink(data.moreLink.wap_url)">
<image :src="$util.img(data.topNavImg)" mode="aspectFit"></image>
</view>
<view class="search" @click="$util.redirectTo('/pages_tool/goods/search')" :style="{ height: menuButtonInfo.height - 2 + 'px', lineHeight: menuButtonInfo.height - 2 + 'px' }">
<text class="iconfont icon-sousuo3"></text>
<text>请输入商品名称</text>
</view>
<view :style="{ 'width': capsuleWidth }"></view>
</view>
<view v-if="data.navStyle == 4" class="content-wrap" :class="{ 'have-back': isBack && isBackShow }" @click="chooseOtherStore()">
<text class="iconfont icon-dizhi" :style="{ color: data.textNavColor }"></text>
<view v-if="globalStoreInfo && globalStoreInfo.store_id" class="title-wrap" :style="{ color: data.textNavColor }">{{ globalStoreInfo.store_name }}</view>
<view v-else class="title-wrap" :style="{ color: data.textNavColor }">定位中...</view>
<text class="iconfont icon-right" :style="{ color: data.textNavColor }"></text>
<view class="nearby-store-name" :style="{ color: data.textNavColor }">附近门店</view>
</view>
</view>
</view>
<!-- 解决fixed定位后导航栏塌陷的问题 -->
<view class="u-navbar-placeholder" :style="{ width: '100%', paddingTop: placeholderHeight + 'px' }"></view>
<!-- #endif -->
</view>
</template>
<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// 如果是小程序,获取右上角胶囊的尺寸信息,避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
// 自定义导航栏
export default {
name: 'ns-navbar',
props: {
data: {
type: Object,
default() {
return {};
}
},
// 标题的颜色
titleColor: {
type: String,
default: '#606266'
},
// 自定义返回逻辑
customBack: {
type: Function,
default: null
},
scrollTop: {
type: [String, Number],
default: '0'
},
// 是否显示导航栏左边返回图标和辅助文字
isBack: {
type: Boolean,
default: true
}
},
data() {
return {
menuButtonInfo: menuButtonInfo,
isBackShow: false,
placeholderHeight: 0
};
},
computed: {
// 导航栏内部盒子的样式
navbarInnerStyle() {
let style = '';
// 导航栏宽度,如果在小程序下,导航栏宽度为胶囊的左边到屏幕左边的距离
style += 'height:' + menuButtonInfo.height * 2 + 'rpx;';
return style;
},
// 转换字符数值为真正的数值
navbarHeight() {
// #ifdef APP-PLUS || H5
return 25;
// #endif
// #ifdef MP
// 小程序特别处理,让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
let height = menuButtonInfo.top;
return height;
// #endif
},
bgColor() {
var color = '';
if (this.data.topNavBg) {
// 顶部透明
color = 'transparent';
let top = 0;
if (this.data.navStyle == 4) {
// #ifdef H5
top = 15;
// #endif
// #ifdef MP
top = this.navbarHeight - 25;
// #endif
}
if (this.scrollTop > top) {
color = this.data.topNavColor;
} else {
color = 'transparent';
}
} else {
color = this.data.topNavColor;
}
return color;
},
capsuleWidth() {
let width = `calc(100vw - ${this.menuButtonInfo.right}px + ${this.menuButtonInfo.width}px + 10px)`;
return width;
}
},
created(e) {
var pages = getCurrentPages();
if (pages.length > 1) {
this.isBackShow = true;
}
this.navbarPlaceholderHeight();
},
mounted() {
this.setModuleLocationFn();
},
methods: {
toLink(val) {
if (val) this.$util.redirectTo(val);
},
goBack() {
// 如果自定义了点击返回按钮的函数,则执行,否则执行返回逻辑
if (typeof this.customBack === 'function') {
this.customBack();
} else {
uni.navigateBack();
}
},
// 选择其他门店
chooseOtherStore() {
if (this.globalStoreConfig && this.globalStoreConfig.is_allow_change == 1) {
this.$util.redirectTo('/pages_tool/store/list');
} else if (this.globalStoreInfo) {
// 禁止切换门店,进入门店详情
this.$util.redirectTo('/pages_tool/store/detail', {
store_id: this.globalStoreInfo.store_id
});
}
},
navbarPlaceholderHeight() {
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.ns-navbar-wrap .u-navbar').boundingClientRect(data => {
// 获取公告自身高度
this.placeholderHeight = data.height;
}).exec();
});
},
// 向vuex中的diyIndexPositionObj增加公告导航组件定位位置
setModuleLocationFn() {
const query = uni.createSelectorQuery().in(this);
query.select('.ns-navbar-wrap .u-navbar').boundingClientRect(data => {
let diyIndexPage = {
originalVal: data.height || 0, //自身高度 px
currVal: 0 //定位高度
};
this.$store.commit('setDiyGroupPositionObj', {
'nsNavbar': diyIndexPage
});
}).exec();
}
}
};
</script>
<style scoped lang="scss">
/* #ifdef H5 */
.style-1,
.style-2,
.style-3 {
display: none;
}
/* #endif */
.u-navbar {
width: 100%;
transition: background 0.3s;
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 991;
}
.navbar-inner {
display: flex;
justify-content: space-between;
position: relative;
align-items: center;
padding-bottom: 20rpx;
/* #ifdef H5 */
padding-bottom: 40rpx;
/* #endif */
}
.back-wrap {
padding: 0 14rpx 0 24rpx;
.iconfont {
font-size: 44rpx;
}
}
.content-wrap {
display: flex;
align-items: center;
justify-content: flex-start;
flex: 1;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 60rpx;
text-align: center;
flex-shrink: 0;
}
.title-wrap {
line-height: 1;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 32rpx;
color: #000000;
}
.ns-navbar-wrap {
&.style-1 {
.content-wrap {
.title-wrap {
font-size: 27rpx;
}
&.left {
left: 30rpx;
}
&.center {
left: 0;
padding-right: 0;
}
&.have-back {
left: 90rpx;
padding-right: 200rpx;
}
}
}
&.style-2 {
.content-wrap {
.title-wrap {
display: flex;
align-items: center;
text-align: left;
>view {
height: 56rpx;
line-height: 56rpx;
max-width: 300rpx;
margin-left: 30rpx;
font-size: 27rpx;
image {
width: 100%;
height: 100%;
}
&:last-child {
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //用省略号显示
white-space: nowrap; //不换行
flex: 1;
}
}
}
}
}
&.style-3 {
.content-wrap {
.title-wrap {
height: 60rpx;
width: 170rpx;
max-width: 170rpx;
margin-left: 30rpx;
flex: initial;
text-align: center;
margin-right: 10rpx;
image {
height: 100%;
width: 100%;
}
}
.search {
flex: 1;
padding: 0 20rpx;
background-color: #fff;
text-align: left;
border-radius: 60rpx;
height: 60rpx;
line-height: 60rpx;
border: 1px solid #eeeeee;
color: rgb(102, 102, 102);
display: flex;
align-items: center;
margin-right: 10rpx;
.iconfont {
color: #909399;
font-size: 32rpx;
margin-right: 10rpx;
}
}
}
}
&.style-4 {
.icon-dizhi{
font-size: 28rpx;
}
.content-wrap {
top: initial;
text-align: left;
padding-left: 30rpx;
&.have-back {
left: 60rpx;
right: 190rpx;
}
.title-wrap {
flex: none;
margin: 0 10rpx;
max-width: 360rpx;
font-size: 27rpx;
}
.icon-right {
font-size: 24rpx;
}
.nearby-store-name {
margin: 0 10rpx;
background: rgba(0, 0, 0, .2);
font-size: 22rpx;
border-radius: 40rpx;
padding: 10rpx 20rpx;
line-height: 1;
}
}
}
}
</style>

View File

@@ -1,349 +1,349 @@
<template>
<view>
<view @touchmove.prevent.stop v-if="newgift" class="reward-popup">
<uni-popup ref="nsNewGift" type="center" :maskClick="false">
<view class="reward-wrap">
<view class="newgift-content" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/new_gift/holiday_polite-bg.png') + ')' }">
<view class="content-title-holiday">
<image :src="$util.img('public/uniapp/new_gift/holiday_polite_left.png')" mode="" class="birthday-img-all"/>
<view class="font-size-toolbar activity-name">{{ newgift.activity_name }}</view>
<image :src="$util.img('public/uniapp/new_gift/holiday_polite_right.png')" mode="" class="birthday-img-all"/>
</view>
<view class="content-title-name" v-if="memberInfo">Dear {{ memberInfo.nickname }}</view>
<view class="content-title-hint" v-if="newgift.remark">{{ newgift.remark }}</view>
<view class="content-title-hint" v-else>感谢您一直以来的支持为回馈会员商城{{ newgift.activity_name ? newgift.activity_name : 'xx' }}节日为您提供以下福利</view>
<scroll-view scroll-y="true" class="register-box">
<view :class="introduction > 38 ? 'reward-content' : 'reward-content-two'">
<view class="content" v-if="newgift.award_list.point > 0">
<view class="info">
<text class="num">
{{ newgift.award_list.point }}
<text class="type">积分</text>
</text>
<view class="desc">用于参与活动购买商品时抵扣</view>
</view>
<view class="tip" @click="closeRewardPopup('1')">立即查看</view>
</view>
<view class="content" v-if="newgift.award_list.balance_type == 0 && newgift.award_list.balance > 0">
<view class="info">
<text class="num">
{{ newgift.award_list.balance | int }}
<text class="type">元红包</text>
</text>
<view class="desc">不可提现红包</view>
</view>
<view class="tip" @click="closeRewardPopup('2')">立即查看</view>
</view>
<view class="content" v-if="newgift.award_list.balance_type == 1 && newgift.award_list.balance_money > 0">
<view class="info">
<text class="num">
{{ newgift.award_list.balance_money | int }}
<text class="type">元红包</text>
</text>
<view class="desc">可提现红包</view>
</view>
<view class="tip" @click="closeRewardPopup('2')">立即查看</view>
</view>
<block v-if="newgift.award_list.coupon_list.length > 0">
<block v-for="(item, index) in newgift.award_list.coupon_list" :key="index">
<view class="content">
<view class="info">
<text v-if="item.type == 'reward'" class="num">
{{ parseFloat(item.money) }}
<text class="type">元优惠劵</text>
</text>
<text v-else-if="item.type == 'discount'" class="num">
{{ item.discount | int }}
<text class="type"></text>
</text>
<view class="desc">用于下单时抵现或兑换商品等</view>
</view>
<view class="tip" @click="closeRewardPopup('3')">立即查看</view>
</view>
</block>
</block>
</view>
</scroll-view>
</view>
<view class="close-btn" @click="cancel()">
<text class="iconfont icon-close btn"></text>
</view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
import uniPopup from '../uni-popup/uni-popup.vue';
export default {
components: {
uniPopup
},
data() {
return {
newgift: {
flag: false,
award_list: {
point: 0,
coupon_list: {}
},
remark: {}
},
bgHight: '940rpx !important',
bytesCount: null,
};
},
filters: {
int(val) {
var str = String(val);
var arr = str.split('.');
if (parseInt(arr[1]) > 0) {
return str;
} else {
return arr[0];
}
}
},
computed: {
introduction() {
let bytesCount = 0;
for (let i = 0, n = this.newgift.remark.length; i < n; i++) {
let c = this.newgift.remark.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
bytesCount += 1;
} else {
bytesCount += 2;
}
}
return bytesCount;
}
},
created() {
if (!this.storeToken) return;
this.init();
},
methods: {
init() {
this.getHolidayGift();
},
// 查询节日有礼设置
getHolidayGift() {
this.$api.sendRequest({
url: '/scenefestival/api/config/config',
success: res => {
if (res.data && res.data[0]) {
this.newgift = res.data[0];
if (this.newgift.award_list.award_type.length <= 1) {
this.bgHight = '800rpx !important';
}
this.getGift();
}
}
});
},
cancel() {
this.$refs.nsNewGift.close();
},
getGift() {
if (this.newgift.flag == true) {
this.$refs.nsNewGift.open();
this.$api.sendRequest({
url: '/scenefestival/api/config/receive',
data: {
festival_id: this.newgift.festival_id
},
success: res => {}
});
}
},
closeRewardPopup(type) {
if (type == 1) {
this.$util.redirectTo('/pages_tool/member/point_detail', {});
} else if (type == 2) {
this.$util.redirectTo('/pages_tool/member/balance_detail', {});
} else if (type == 3) {
this.$util.redirectTo('/pages_tool/member/coupon', {});
}
}
}
};
</script>
<style scoped>
/deep/ .newgift-content uni-image {
width: 113rpx !important;
height: 24rpx !important;
}
/deep/ .reward-popup .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
max-height: unset !important;
overflow-y: unset;
}
.register-box /deep/ .uni-scroll-view {
background: unset !important;
}
.register-box {
max-height: 300rpx;
overflow-y: scroll;
/* margin-top: 610rpx; */
}
</style>
<style lang="scss">
.reward-wrap {
width: 85vw;
height: auto;
.newgift-content {
width: 100%;
height: auto;
background-size: 100%;
background-repeat: no-repeat;
padding-bottom: 40rpx;
}
.content-title-holiday {
font-size: $font-size-toolbar;
font-weight: bold;
font-family: BDZongYi-A001;
display: flex;
align-items: center;
justify-content: center;
// margin-bottom: 20rpx;
padding-top: 320rpx;
line-height: 1;
.birthday-img-all {
width: 100rpx;
height: 20rpx;
}
&>view {
margin: 0 20rpx;
color: #fff;
font-weight: bold;
}
}
.content-title-name {
font-size: $font-size-toolbar;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
color: #fff;
margin: 30rpx 0 40rpx;
line-height: 1;
}
.content-title-hint {
margin: 0 70rpx 40rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
color: #fff;
}
.reward-content {
max-height: 300rpx;
margin: 0 56rpx;
}
.reward-content-two {
max-height: 360rpx;
margin: 0 56rpx;
}
.head {
color: #fff;
text-align: center;
line-height: 1;
margin: 20rpx 0;
}
& .content:last-child {
margin-bottom: 0;
}
.content {
display: flex;
align-items: center;
padding: 16rpx 26rpx;
background: #fff;
border-radius: 10rpx;
margin-bottom: 20rpx;
.info {
flex: 1;
}
.tip {
color: #fa5b14;
padding: 10rpx 0 10rpx 20rpx;
width: 60rpx;
line-height: 1.5;
letter-spacing: 2rpx;
border-left: 2rpx dashed #e5e5e5;
}
.num {
font-size: 48rpx;
color: #fa5b14;
font-weight: bolder;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300rpx;
}
.type {
font-size: $font-size-tag;
margin-left: 10rpx;
line-height: 1;
font-weight: normal;
color: #606266;
}
.desc {
margin-top: 8rpx;
color: $color-tip;
font-size: $font-size-tag;
line-height: 1;
}
}
.close-btn {
text-align: center;
margin-top: 20rpx;
z-index: 500;
.btn {
/* margin: 0 50rpx;
background: linear-gradient(90deg,#ff4100,#ff6a00) ;
border: none; */
color: #fff;
font-size: 40rpx;
// padding: 100px;
border: 4rpx solid #fff;
border-radius: 50%;
padding: 10rpx;
font-weight: bold;
width: 40rpx;
height: 40rpx;
margin: 0 auto;
line-height: 40rpx;
}
}
}
<template>
<view>
<view @touchmove.prevent.stop v-if="newgift" class="reward-popup">
<uni-popup ref="nsNewGift" type="center" :maskClick="false">
<view class="reward-wrap">
<view class="newgift-content" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/new_gift/holiday_polite-bg.png') + ')' }">
<view class="content-title-holiday">
<image :src="$util.img('public/uniapp/new_gift/holiday_polite_left.png')" mode="" class="birthday-img-all" />
<view class="font-size-toolbar activity-name">{{ newgift.activity_name }}</view>
<image :src="$util.img('public/uniapp/new_gift/holiday_polite_right.png')" mode="" class="birthday-img-all" />
</view>
<view class="content-title-name" v-if="memberInfo">Dear {{ memberInfo.nickname }}</view>
<view class="content-title-hint" v-if="newgift.remark">{{ newgift.remark }}</view>
<view class="content-title-hint" v-else>感谢您一直以来的支持为回馈会员商城{{ newgift.activity_name ? newgift.activity_name : 'xx' }}节日为您提供以下福利</view>
<scroll-view scroll-y="true" class="register-box">
<view :class="introduction > 38 ? 'reward-content' : 'reward-content-two'">
<view class="content" v-if="newgift.award_list.point > 0">
<view class="info">
<text class="num">
{{ newgift.award_list.point }}
<text class="type">积分</text>
</text>
<view class="desc">用于参与活动购买商品时抵扣</view>
</view>
<view class="tip" @click="closeRewardPopup('1')">立即查看</view>
</view>
<view class="content" v-if="newgift.award_list.balance_type == 0 && newgift.award_list.balance > 0">
<view class="info">
<text class="num">
{{ newgift.award_list.balance | int }}
<text class="type">元红包</text>
</text>
<view class="desc">不可提现红包</view>
</view>
<view class="tip" @click="closeRewardPopup('2')">立即查看</view>
</view>
<view class="content" v-if="newgift.award_list.balance_type == 1 && newgift.award_list.balance_money > 0">
<view class="info">
<text class="num">
{{ newgift.award_list.balance_money | int }}
<text class="type">元红包</text>
</text>
<view class="desc">可提现红包</view>
</view>
<view class="tip" @click="closeRewardPopup('2')">立即查看</view>
</view>
<block v-if="newgift.award_list.coupon_list.length > 0">
<block v-for="(item, index) in newgift.award_list.coupon_list" :key="index">
<view class="content">
<view class="info">
<text v-if="item.type == 'reward'" class="num">
{{ parseFloat(item.money) }}
<text class="type">元优惠劵</text>
</text>
<text v-else-if="item.type == 'discount'" class="num">
{{ item.discount | int }}
<text class="type"></text>
</text>
<view class="desc">用于下单时抵现或兑换商品等</view>
</view>
<view class="tip" @click="closeRewardPopup('3')">立即查看</view>
</view>
</block>
</block>
</view>
</scroll-view>
</view>
<view class="close-btn" @click="cancel()">
<text class="iconfont icon-close btn"></text>
</view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
import uniPopup from '../uni-popup/uni-popup.vue';
export default {
components: {
uniPopup
},
data() {
return {
newgift: {
flag: false,
award_list: {
point: 0,
coupon_list: {}
},
remark: {}
},
bgHight: '940rpx !important',
bytesCount: null,
callback: null
};
},
filters: {
int(val) {
var str = String(val);
var arr = str.split('.');
if (parseInt(arr[1]) > 0) {
return str;
} else {
return arr[0];
}
}
},
computed: {
introduction() {
let bytesCount = 0;
for (let i = 0, n = this.newgift.remark.length; i < n; i++) {
let c = this.newgift.remark.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
bytesCount += 1;
} else {
bytesCount += 2;
}
}
return bytesCount;
}
},
created() {
if (!this.storeToken) return;
this.init();
},
methods: {
init(callback = null) {
if (callback) this.callback = callback;
this.getHolidayGift();
},
// 查询节日有礼设置
getHolidayGift() {
this.$api.sendRequest({
url: '/scenefestival/api/config/config',
success: res => {
if (res.data && res.data[0]) {
this.newgift = res.data[0];
if (this.newgift.award_list.award_type.length <= 1) {
this.bgHight = '800rpx !important';
}
this.getGift();
}
}
});
},
cancel() {
this.$refs.nsNewGift.close();
},
getGift() {
if (this.newgift.flag == true) {
this.$refs.nsNewGift.open();
this.$api.sendRequest({
url: '/scenefestival/api/config/receive',
data: {
festival_id: this.newgift.festival_id
},
success: res => {
if (this.callback) this.callback();
}
});
}
},
closeRewardPopup(type) {
if (type == 1) {
this.$util.redirectTo('/pages_tool/member/point_detail', {});
} else if (type == 2) {
this.$util.redirectTo('/pages_tool/member/balance_detail', {});
} else if (type == 3) {
this.$util.redirectTo('/pages_tool/member/coupon', {});
}
}
}
};
</script>
<style scoped>
/deep/ .newgift-content uni-image {
width: 113rpx !important;
height: 24rpx !important;
}
/deep/ .reward-popup .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
max-height: unset !important;
overflow-y: unset;
}
.register-box /deep/ .uni-scroll-view {
background: unset !important;
}
.register-box {
max-height: 300rpx;
overflow-y: scroll;
/* margin-top: 610rpx; */
}
</style>
<style lang="scss">
.reward-wrap {
width: 85vw;
height: auto;
.newgift-content {
width: 100%;
height: auto;
background-size: 100%;
background-repeat: no-repeat;
padding-bottom: 40rpx;
}
.content-title-holiday {
font-size: $font-size-toolbar;
font-weight: bold;
font-family: BDZongYi-A001;
display: flex;
align-items: center;
justify-content: center;
// margin-bottom: 20rpx;
padding-top: 320rpx;
line-height: 1;
.birthday-img-all {
width: 100rpx;
height: 20rpx;
}
&>view {
margin: 0 20rpx;
color: #fff;
font-weight: bold;
}
}
.content-title-name {
font-size: $font-size-toolbar;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
color: #fff;
margin: 30rpx 0 40rpx;
line-height: 1;
}
.content-title-hint {
margin: 0 70rpx 40rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-align: center;
color: #fff;
}
.reward-content {
max-height: 300rpx;
margin: 0 56rpx;
}
.reward-content-two {
max-height: 360rpx;
margin: 0 56rpx;
}
.head {
color: #fff;
text-align: center;
line-height: 1;
margin: 20rpx 0;
}
& .content:last-child {
margin-bottom: 0;
}
.content {
display: flex;
align-items: center;
padding: 16rpx 26rpx;
background: #fff;
border-radius: 10rpx;
margin-bottom: 20rpx;
.info {
flex: 1;
}
.tip {
color: #fa5b14;
padding: 10rpx 0 10rpx 20rpx;
width: 60rpx;
line-height: 1.5;
letter-spacing: 2rpx;
border-left: 2rpx dashed #e5e5e5;
}
.num {
font-size: 48rpx;
color: #fa5b14;
font-weight: bolder;
line-height: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300rpx;
}
.type {
font-size: $font-size-tag;
margin-left: 10rpx;
line-height: 1;
font-weight: normal;
color: #606266;
}
.desc {
margin-top: 8rpx;
color: $color-tip;
font-size: $font-size-tag;
line-height: 1;
}
}
.close-btn {
text-align: center;
margin-top: 20rpx;
z-index: 500;
.btn {
color: #fff;
font-size: 40rpx;
border: 4rpx solid #fff;
border-radius: 50%;
padding: 10rpx;
font-weight: bold;
width: 40rpx;
height: 40rpx;
margin: 0 auto;
line-height: 40rpx;
}
}
}
</style>

View File

@@ -0,0 +1,933 @@
<template>
<view class="form-wrap form-component">
<view v-for="(item, index) in formData" :key="index">
<!-- 文本输入框 -->
<view v-if="item.controller == 'Text'" class="order-wrap">
<view class="order-cell">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box">
<input
type="text"
:placeholder="item.value.placeholder"
placeholder-class="placeholder color-tip"
v-model="item.val"
/>
</view>
</view>
</view>
<!-- 多行文本输入框 -->
<view v-if="item.controller == 'Textarea'" class="order-wrap">
<view class="order-cell flex-box textarea">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box">
<textarea
:placeholder="item.value.placeholder"
placeholder-class="placeholder color-tip"
v-model="item.val"
></textarea>
</view>
</view>
</view>
<!-- 下拉选择器 -->
<view v-if="item.controller == 'Select'" class="order-wrap">
<picker
mode="selector"
:range="item.value.options"
@change="pickerChange($event, index)"
>
<view class="order-cell">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box">
<text v-if="item.val != ''">{{ item.val }}</text>
<text v-else class="color-tip">请选择</text>
</view>
<text class="iconfont icon-right"></text>
</view>
</picker>
</view>
<!-- 复选框 -->
<view v-if="item.controller == 'Checkbox'" class="order-wrap">
<view class="order-cell">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box check-group-box">
<checkbox-group @change="checkboxChange($event, index)">
<label v-for="(v, k) in item.option_lists" :key="k">
<checkbox :value="v.value" :checked="v.checked"></checkbox>
<view class="checkbox">
<text
:class="[
'iconfont',
!v.checked ? 'icon-fuxuankuang2' : '',
v.checked ? 'icon-fuxuankuang1 color-base-text' : ''
]"
></text>
{{ v.value }}
</view>
</label>
</checkbox-group>
</view>
</view>
</view>
<!-- 单选框 -->
<view v-if="item.controller == 'Radio'" class="order-wrap">
<view class="order-cell">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box radio-group-box">
<radio-group @change="radioChange($event, index)">
<label v-for="(v, k) in item.option_lists" :key="k">
<radio :value="v.value" :checked="item.val == v.value"></radio>
<view class="radio-box">
<text
:class="[
'iconfont',
item.val != v.value ? 'icon-yuan_checkbox' : '',
item.val == v.value ? 'icon-yuan_checked color-base-text' : ''
]"
></text>
{{ v.value }}
</view>
</label>
</radio-group>
</view>
</view>
</view>
<!-- 图片上传 -->
<view v-if="item.controller == 'Img'" class="order-wrap">
<view class="order-cell flex-box">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box img-boxs">
<view v-for="(v, k) in item.img_lists" :key="k" class="img-box" @tap="uploadImg(index)">
<image :src="$util.img(v)" mode="aspectFill"></image>
<text class="iconfont icon-guanbi" @tap.stop="delImg(k, index)"></text>
</view>
<view class="img-box" @tap="addImg(index)">
<text class="iconfont icon-add1"></text>
</view>
</view>
</view>
</view>
<!-- 日期选择器 -->
<view v-if="item.controller == 'Date'" class="order-wrap">
<view class="order-cell">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box box-flex">
<picker
mode="date"
:value="item.val"
@change="bindDateChange($event, index)"
>
<view :class="['uni-input', !item.val ? 'color-tip' : '']">
{{ item.val ? item.val : item.value.placeholder }}
</view>
</picker>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<!-- 日期范围选择器 -->
<view v-if="item.controller == 'Datelimit'" class="order-wrap">
<view class="order-cell flex-box">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box date-boxs">
<view class="date-box">
<picker
mode="date"
:value="item.start_date"
@change="bindStartDateChange($event, index)"
>
<view class="picker-box">
<view :class="['uni-input', !item.start_date ? 'color-tip' : '']">
{{ item.start_date ? item.start_date : item.value.placeholder_start }}
</view>
</view>
</picker>
</view>
<view class="interval iconfont icon-jian"></view>
<view class="date-box">
<picker
mode="date"
:value="item.end_date"
@change="bindEndDateChange($event, index)"
>
<view class="picker-box">
<view :class="['uni-input', !item.end_date ? 'color-tip' : '']">
{{ item.end_date ? item.end_date : item.value.placeholder_end }}
</view>
</view>
</picker>
</view>
</view>
</view>
</view>
<!-- 时间选择器 -->
<view v-if="item.controller == 'Time'" class="order-wrap">
<view class="order-cell">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box box-flex">
<picker
mode="time"
:value="item.val"
@change="bindTimeChange($event, index)"
>
<view :class="['uni-input', !item.val ? 'color-tip' : '']">
{{ item.val ? item.val : item.value.placeholder }}
</view>
</picker>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
<!-- 时间范围选择器 -->
<view v-if="item.controller == 'Timelimit'" class="order-wrap">
<view class="order-cell flex-box">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box date-boxs">
<view class="date-box">
<picker
mode="time"
:value="item.start_time"
@change="bindStartTimeChange($event, index)"
>
<view class="picker-box">
<view :class="['uni-input', !item.start_time ? 'color-tip' : '']">
{{ item.start_time ? item.start_time : item.value.placeholder_start }}
</view>
</view>
</picker>
</view>
<view class="interval iconfont icon-jian"></view>
<view class="date-box">
<picker
mode="time"
:value="item.end_time"
@change="bindEndTimeChange($event, index)"
>
<view class="picker-box">
<view :class="['uni-input', !item.end_time ? 'color-tip' : '']">
{{ item.end_time ? item.end_time : item.value.placeholder_end }}
</view>
</view>
</picker>
</view>
</view>
</view>
</view>
<!-- 城市选择器 -->
<view v-if="item.controller == 'City'" class="order-wrap">
<view class="order-cell box-flex">
<view class="name">
<text class="tit">{{ item.value.title }}</text>
<text class="required">{{ item.value.required ? '*' : '' }}</text>
</view>
<view class="box">
<pick-regions
:defaultRegions="item.default_regions"
:selectArr="item.select_arr"
@getRegions="handleGetRegions($event, index)"
>
<view :class="['select-address', !item.val ? 'empty' : '', !item.val ? 'color-tip' : '']">
{{ item.val ? item.val : (item.select_arr == '2' ? '请选择省市' : '请选择省市区/县') }}
</view>
</pick-regions>
</view>
<text class="iconfont icon-right"></text>
</view>
</view>
</view>
</view>
</template>
<script>
import pickRegions from '@/components/pick-regions/pick-regions.vue'
export default {
name: 'ns-form',
components: {
pickRegions
},
props: {
data: {
type: Array,
default: () => ({})
},
customAttr: {
type: Object,
default: () => ({})
}
},
data() {
return {
formData: this.data
}
},
created() {
this.setFormData();
},
watch: {
data: {
handler() {
this.setFormData();
},
deep: true
}
},
methods: {
setFormData() {
this.formData = this.data;
this.formData.forEach((item) => {
// 初始化默认值
if (!item.val) {
item.val = item.value.default ? item.value.default : '';
}
// 处理选项列表
if (item.value.options) {
item.option_lists = [];
item.value.options.forEach((option, index) => {
let optionItem = {};
optionItem.value = option;
optionItem.checked = false;
if (item.controller == 'Radio') {
if ((!item.val && index == 0) || (item.val && item.val == option)) {
optionItem.checked = true;
item.val = option;
}
}
if (item.controller == 'Checkbox' && item.val) {
let valArray = item.val.split(',');
optionItem.checked = valArray.indexOf(option) != -1;
}
item.option_lists.push(optionItem);
});
}
// 处理图片列表
if (item.controller == 'Img') {
item.img_lists = item.val ? item.val.split(',') : [];
}
// 处理日期
if (item.controller == 'Date' && !item.val) {
if (item.value.is_show_default) {
if (item.value.is_current) {
item.val = this.getDate();
} else {
item.val = item.value.default;
}
} else {
item.val = '';
}
}
// 处理日期范围
if (item.controller == 'Datelimit') {
if (item.val) {
let dateArray = item.val.split(' - ');
item.start_date = dateArray[0];
item.end_date = dateArray[1];
} else {
item.val = '';
// 开始日期
if (item.value.is_show_default_start) {
if (item.value.is_current_start) {
item.start_date = this.getDate();
} else {
item.start_date = item.value.default_start;
}
} else {
item.start_date = '';
}
// 结束日期
if (item.value.is_show_default_end) {
if (item.value.is_current_end) {
item.end_date = this.getDate();
} else {
item.end_date = item.value.default_end;
}
} else {
item.end_date = '';
}
if (item.start_date && item.end_date) {
item.val = item.start_date + ' - ' + item.end_date;
}
}
}
// 处理时间
if (item.controller == 'Time' && !item.val) {
if (item.value.is_show_default) {
if (item.value.is_current) {
item.val = this.getTime();
} else {
item.val = item.value.default;
}
} else {
item.val = '';
}
}
// 处理时间范围
if (item.controller == 'Timelimit') {
if (item.val) {
let timeArray = item.val.split(' - ');
item.start_time = timeArray[0];
item.end_time = timeArray[1];
} else {
item.val = '';
// 开始时间
if (item.value.is_show_default_start) {
if (item.value.is_current_start) {
item.start_time = this.getTime();
} else {
item.start_time = item.value.default_start;
}
} else {
item.start_time = '';
}
// 结束时间
if (item.value.is_show_default_end) {
if (item.value.is_current_end) {
item.end_time = this.getTime();
} else {
item.end_time = item.value.default_end;
}
} else {
item.end_time = '';
}
if (item.start_time && item.end_time) {
item.val = item.start_time + ' - ' + item.end_time;
}
}
}
// 处理城市选择
if (item.controller == 'City') {
item.full_address = '';
item.select_arr = item.value.default_type == 1 ? '2' : '3';
if (item.val) {
item.default_regions = item.val.split('-');
} else {
item.default_regions = [];
}
}
});
},
// 表单验证
verify() {
for (let i = 0; i < this.formData.length; i++) {
let item = this.formData[i];
// 文本验证
if (item.controller == 'Text') {
if (item.value.required && !item.val) {
this.$util.showToast({ title: '请输入' + item.value.title });
return false;
}
if (item.name == 'ID_CARD' && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(item.val)) {
if (!item.value.required) {
this.$util.showToast({ title: '身份证输入不合法' });
return false;
}
if (item.val != '') {
this.$util.showToast({ title: '身份证输入不合法' });
return false;
}
}
if (item.name == 'MOBILE' && !this.$util.verifyMobile(item.val)) {
if (!item.value.required) {
this.$util.showToast({ title: '手机号输入不合法' });
return false;
}
if (item.val != '') {
this.$util.showToast({ title: '手机号输入不合法' });
return false;
}
}
}
// 多行文本验证
if (item.controller == 'Textarea' && item.value.required && !item.val) {
this.$util.showToast({ title: '请输入' + item.value.title });
return false;
}
// 下拉选择验证
if (item.controller == 'Select' && item.value.required && !item.val) {
this.$util.showToast({ title: '请选择' + item.value.title });
return false;
}
// 复选框验证
if (item.controller == 'Checkbox' && item.value.required && !item.val) {
this.$util.showToast({ title: '请至少选择一个' + item.value.title });
return false;
}
// 图片上传验证
if (item.controller == 'Img' && item.value.required && !item.val) {
this.$util.showToast({ title: '请至少上传一张' + item.value.title });
return false;
}
// 日期验证
if (item.controller == 'Date' && item.value.required && !item.val) {
this.$util.showToast({ title: '请选择' + item.value.title });
return false;
}
// 日期范围验证
if (item.controller == 'Datelimit') {
if (item.value.required && !item.val) {
this.$util.showToast({ title: '请选择' + item.value.title });
return false;
}
if (this.$util.timeTurnTimeStamp(item.start_date) > this.$util.timeTurnTimeStamp(item.end_date)) {
this.$util.showToast({ title: '结束日期不能小于开始日期' });
return false;
}
}
// 时间验证
if (item.controller == 'Time' && item.value.required && !item.val) {
this.$util.showToast({ title: '请选择' + item.value.title });
return false;
}
// 时间范围验证
if (item.controller == 'Timelimit') {
if (item.value.required && !item.val) {
this.$util.showToast({ title: '请选择' + item.value.title });
return false;
}
if (item.start_time >= item.end_time) {
this.$util.showToast({ title: '结束时间必须大于开始时间' });
return false;
}
}
// 城市选择验证
if (item.controller == 'City' && item.value.required && !item.val) {
this.$util.showToast({ title: '请选择' + item.value.title });
return false;
}
}
return this.formData;
},
// 下拉选择改变
pickerChange(event, index) {
this.formData[index].val = this.data[index].value.options[event.detail.value];
this.$forceUpdate();
},
// 复选框改变
checkboxChange(event, index) {
this.formData[index].val = event.detail.value.toString();
this.formData[index].option_lists.forEach((option) => {
option.checked = event.detail.value.indexOf(option.value) != -1;
});
this.$forceUpdate();
},
// 单选框改变
radioChange(event, index) {
this.formData[index].val = event.detail.value;
this.$forceUpdate();
},
// 上传图片
uploadImg(index) {
let self = this;
this.$util.upload(Number(this.formData[index].value.max_count), { path: 'evaluateimg' }, function(res) {
if (res.length > 0) {
res.forEach(function(img) {
if (self.formData[index].img_lists.length >= Number(self.formData[index].value.max_count)) {
self.$util.showToast({ title: '最多上传' + self.formData[index].value.max_count + '张图片' });
return false;
}
self.formData[index].img_lists.push(img);
});
self.formData[index].val = self.formData[index].img_lists.toString();
self.$forceUpdate();
}
});
},
// 添加图片
addImg(index) {
let self = this;
if (this.formData[index].img_lists.length >= Number(this.formData[index].value.max_count)) {
this.$util.showToast({ title: '最多上传' + this.formData[index].value.max_count + '张图片' });
return false;
}
this.$util.upload(Number(this.formData[index].value.max_count), { path: 'evaluateimg' }, function(res) {
if (res.length > 0) {
res.forEach(function(img) {
self.formData[index].img_lists.push(img);
});
self.formData[index].val = self.formData[index].img_lists.toString();
self.$forceUpdate();
}
});
},
// 删除图片
delImg(imgIndex, formIndex) {
this.formData[formIndex].img_lists.splice(imgIndex, 1);
this.formData[formIndex].val = this.formData[formIndex].img_lists.toString();
this.$forceUpdate();
},
// 获取当前日期
getDate() {
let date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : '0' + month;
day = day > 9 ? day : '0' + day;
return `${year}-${month}-${day}`;
},
// 获取当前时间
getTime() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
hours = hours > 9 ? hours : '0' + hours;
minutes = minutes > 9 ? minutes : '0' + minutes;
return `${hours}:${minutes}`;
},
// 日期改变
bindDateChange(event, index) {
this.formData[index].val = event.detail.value;
this.$forceUpdate();
},
// 开始日期改变
bindStartDateChange(event, index) {
this.$set(this.formData[index], 'start_date', event.detail.value);
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
this.$forceUpdate();
},
// 结束日期改变
bindEndDateChange(event, index) {
this.$set(this.formData[index], 'end_date', event.detail.value);
this.$set(this.formData[index], 'val', this.formData[index].start_date + ' - ' + this.formData[index].end_date);
this.$forceUpdate();
},
// 时间改变
bindTimeChange(event, index) {
this.formData[index].val = event.detail.value;
this.$forceUpdate();
},
// 开始时间改变
bindStartTimeChange(event, index) {
this.formData[index].start_time = event.detail.value;
this.$forceUpdate();
},
// 结束时间改变
bindEndTimeChange(event, index) {
this.formData[index].end_time = event.detail.value;
this.formData[index].val = this.formData[index].start_time + ' - ' + this.formData[index].end_time;
this.$forceUpdate();
},
// 处理地区选择
handleGetRegions(regions, index) {
this.formData[index].val = '';
this.formData[index].val += regions[0] != undefined ? regions[0].label : '';
this.formData[index].val += regions[1] != undefined ? '-' + regions[1].label : '';
this.formData[index].val += regions[2] != undefined ? '-' + regions[2].label : '';
this.$forceUpdate();
}
}
}
</script>
<style lang="scss" scoped>
.order-wrap {
padding: 20rpx 0;
&:last-child {
margin-bottom: 0;
border-bottom: 0;
}
.order-cell {
align-items: center;
background: #fff;
position: relative;
&.textarea {
align-items: unset;
}
&.clear-flex {
display: block;
.box {
margin-top: 16rpx;
text-align: left;
}
}
&:last-child {
margin-bottom: 0;
border-bottom: solid 1px #eee;
}
&.align-top {
align-items: flex-start;
}
text {
font-size: 28rpx;
}
.name {
width: 160rpx;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.tit {
text-align: left;
font-size: 32rpx;
color: #888;
text {
font-size: 28rpx;
}
}
.required {
color: red;
font-size: 28rpx;
margin-left: 4rpx;
width: 14rpx;
text-align: left;
display: inline-block;
}
}
.box {
flex: 1;
padding: 0 0rpx;
line-height: inherit;
text-align: left;
input {
font-size: 28rpx;
text-align: left;
height: 70rpx;
border: solid 2rpx #eee;
line-height: 70rpx;
padding: 0 16rpx;
}
textarea {
font-size: 28rpx;
width: 100%;
height: 88rpx;
line-height: 44rpx;
text-align: left;
}
checkbox-group {
display: flex;
flex-wrap: wrap;
}
radio-group {
display: flex;
flex-wrap: wrap;
}
label {
display: flex;
align-items: center;
line-height: 1;
margin-right: 30rpx;
}
&.img-boxs {
display: flex;
align-items: center;
flex-wrap: wrap;
.img-box {
margin: 10rpx 20rpx 10rpx 0;
display: flex;
justify-content: center;
align-items: center;
width: 100rpx;
height: 100rpx;
border: 1rpx solid #eee;
border-radius: 4rpx;
position: relative;
.icon-guanbi {
position: absolute;
top: -14rpx;
right: -14rpx;
display: inline-block;
width: 28rpx;
height: 28rpx;
line-height: 28rpx;
color: #909399;
}
.icon-add1 {
font-size: 40rpx;
}
image {
width: 100%;
height: 100%;
}
}
}
&.box-flex {
display: flex;
align-items: center;
justify-content: space-between;
}
&.date-boxs {
padding: 0 10rpx;
display: flex;
align-items: center;
.interval {
margin: 0 12rpx;
color: #000;
font-weight: 700;
}
.date-box {
.picker-box {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
}
}
.radio-group-box {
radio {
display: none;
}
.radio-box {
display: flex;
align-items: center;
line-height: 1;
.iconfont {
font-size: 32rpx;
margin-right: 10rpx;
}
}
}
.check-group-box {
checkbox {
display: none;
}
.checkbox {
display: flex;
align-items: center;
line-height: 1;
.iconfont {
font-size: 32rpx;
margin-right: 10rpx;
}
}
}
.iconfont {
color: #909399;
font-size: 28rpx;
}
.box-flex {
picker {
display: block;
width: 100%;
}
}
.icon-right {
line-height: 1;
position: unset;
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -1,369 +1,386 @@
<template>
<view class="ns-time">
<uni-popup type="bottom" ref="selectTime">
<view class="box">
<view class="title">
<block v-if="obj.delivery && obj.delivery.delivery_type == 'local'">选择送达时间</block>
<block v-if="obj.delivery && obj.delivery.delivery_type == 'store'">选择自提时间</block>
<text class="iconfont icon-close" @click="close"></text>
</view>
<view class="body">
<!-- 左侧日期选择 -->
<scroll-view :scroll-y="true" class="left">
<view class="item" :class="index == keyJudge ? 'itemDay' : ''" v-for="(item, index) in dayData" :key="index" @click="selectTime('days', index, 'yes')">
<block v-if="item.title">{{ item.title }}</block>
<block v-else>{{ item.month }}</block>
<text class="itemtext">{{ item.Day }}</text>
</view>
</scroll-view>
<!-- 右侧时间选择 -->
<scroll-view :scroll-y="true" class="right">
<view class="item" :class="key == keyJudge && index == keys ? 'itemTime' : ''" v-for="(item, index) in timeData" :key="index" @click="selectTime('time', index, 'yes')">
{{ item }}
<text v-if="key == keyJudge && index == keys" class="iconfont icon-yuan_checked color-base-text"></text>
</view>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
name: "nsSelectTime",
components: {
uniPopup
},
data() {
return {
//选中日期的键值
key: 0,
//选中时间的键值
keys: 0,
//渲染用数据
obj: {},
//左侧渲染时间
dayData: [],
// 右侧渲染数据
timeData: [],
//判断弹窗打开
judge: false,
//判断左侧列表是否为日期选中列表
keyJudge: 0,
//当前时间时间戳
dayTime: 0
};
},
methods: {
refresh(){
this.key = 0;
this.keys = 0;
this.keyJudge = 0;
},
/**
* 弹窗打开
*/
open(obj, type) {
this.dayData = [];
this.timeData = [];
this.obj = obj;
this.toDay(obj.dataTime.time_type, obj.dataTime.time_week);
if (this.judge) {
if (type == 'no') {
this.selectTime('', '', type);
} else {
this.$refs.selectTime.open();
}
}
},
/**
* 时间选择
*/
selectTime(type, index, judge) {
if (type == 'days') {
this.keyJudge = index;
this.toTime();
} else if (type == 'time') {
this.keys = index;
this.key = this.keyJudge;
let obj = this.dayData[this.key];
obj.time = this.timeData[this.keys];
let time = obj.time.replace('立即配送(','').replace('','');
var dateTime = new Date();
var format = time.split('-');
var startHours = format[0].split(':');
var endHours = format[1].split(':');
let timeData = obj.month.split('月');
let month = timeData[0];
let date = timeData[1].split('日')[0];
// 开始时间戳
dateTime.setHours(startHours[0],startHours[1],0,0);
obj.start_time = dateTime.getTime()/1000;
obj.start_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[0];
// 结束时间戳
dateTime.setHours(endHours[0],endHours[1],0,0);
obj.end_time = dateTime.getTime()/1000;
obj.end_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[1];
this.$emit('selectTime', { data: obj, type: judge });
this.$refs.selectTime.close();
}
if (judge == 'no') {
this.toTime(judge);
let obj = this.dayData[0];
obj.time = this.timeData[0];
this.$emit('selectTime', { data: obj, type: judge });
}
this.$forceUpdate();
},
/**
* 弹窗关闭
*/
close() {
this.$refs.selectTime.close();
},
/**
* 左侧数据处理
*/
toDay(type, obj) {
let today = new Date();
if (this.obj.dataTime.advance_day) {
today = new Date(today.getTime() + (this.obj.dataTime.advance_day * 86400000));
}
let nowYear = today.getFullYear(); //当前年
let nowMonth = today.getMonth() + 1; //当前月
let nowDate = today.getDate(); //当前日
let nowDay = today.getDay(); //当前星期几
let endDay = new Date(nowYear, nowMonth, 0).getDate(); //当月多少天
let Hours = today.getHours();
let Minutes = today.getMinutes();
this.dayTime = this.obj.dataTime.advance_day ? 0 : Number(Hours) * 3600 + Number(Minutes) * 60; //获取到当前时分秒的时间戳
let judge = false;
let num = 1; //记录循环执行过的次数
let mostDay = this.obj.dataTime.most_day ? this.obj.dataTime.most_day + 1 : 1; // 最多可预约天数
let startTime = parseInt(today.getTime() / 1000);
let week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
if (obj.time_week && obj.time_week.length == 7) {
//判断是否七天全有
judge = true;
}
for (let i = 0; i < mostDay; i++) {
let objects = {};
let dayStr = week[ nowDay ];
// 判断最大可预约时间
if (this.obj.dataTime.most_day > 0 && ((startTime + num * 86400) > (startTime + this.obj.dataTime.most_day * 86400) ) ) {
this.judge = true;
break;
}
//判断当天是否能够配送、自提
if (type == 0 || judge || obj.indexOf(nowDay.toString()) != -1) {
let endTime = this.obj.dataTime.delivery_time[ (this.obj.dataTime.delivery_time.length - 1) ].end_time;
endTime -= this.obj.dataTime.time_interval * 60;
switch (num) {
case 1:
if (i == 0) {
if (endTime < this.dayTime) {
i = i - 1;
} else {
objects = {
title: this.obj.dataTime.advance_day == 0 ? '今天' : '',
type: 'special',
month: nowMonth + '月' + nowDate + '日',
Day: '(' + dayStr + ')'
};
this.dayData.push(objects); //左侧日期数据处理
}
}
break;
case 2:
if (i == 0 || i == 1) {
objects = {
title: this.obj.dataTime.advance_day == 0 ? '明天' : '',
month: nowMonth + '月' + nowDate + '日',
Day: '(' + dayStr + ')'
};
this.dayData.push(objects); //左侧日期数据处理
}
break;
default:
objects = {
title: '',
month: nowMonth + '月' + nowDate + '日',
Day: '(' + dayStr + ')'
};
this.dayData.push(objects); //左侧日期数据处理
}
} else {
i = i - 1;
}
if (nowDate != endDay) {
nowDate += 1;
} else {
if (nowMonth != 12) {
nowMonth += 1;
} else {
nowMonth = 1;
}
nowDate = 1;
}
if (nowDay != 6) {
nowDay += 1;
} else {
nowDay = 0;
}
num += 1;
if (this.obj.dataTime.most_day == 0 && i == 0) {
this.judge = true;
}
}
this.toTime(); //处理右侧时间数据
},
/**
* 处理右侧时间数据
*/
toTime(judge) {
//并非打开弹窗进入时,所有数据置零
if (judge == 'no') {
this.key = 0;
this.keys = 0;
this.keyJudge = 0;
}
let timeData = [];
if (!this.obj.dataTime.delivery_time) {
this.obj.dataTime.delivery_time = [ {start_time: this.obj.dataTime.start_time, end_time: this.obj.dataTime.end_time} ]
}
//判断选中是否为当天
let remainder = 0;
//当天配送自提的话向后推迟30分钟
let newDayTime = JSON.parse(JSON.stringify(this.dayTime));
// newDayTime = Math.ceil(this.dayTime / 600) * 600 + 1800;
//判断选中是否为当天
let timeJudage = false;
if (this.dayData[this.keyJudge] && this.dayData[this.keyJudge].type && newDayTime > this.obj.dataTime.start_time) timeJudage = true;
let timeInterval = this.obj.dataTime.time_interval ? this.obj.dataTime.time_interval * 60 : 1200;
this.obj.dataTime.delivery_time.forEach(item => {
item.end_time = item.end_time ? item.end_time : 86400;
let num = parseInt((parseInt(item.end_time) - parseInt(item.start_time)) / timeInterval);
let time = timeJudage ? parseInt(newDayTime) : parseInt(item.start_time);
for (let i = 0; i < num; i++) {
if (parseInt(time) + parseInt(timeInterval) > item.end_time) break;
if (timeJudage) {
if (time >= newDayTime) {
if (this.obj.dataTime.time_interval) {
if (time <= item.end_time) {
let text = '';
if (this.obj.delivery.delivery_type == 'local' && i == 0) {
text = '立即配送('+ this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval) + '';
} else {
text = this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval);
}
timeData.push(text);
}
} else {
timeData.push(this.$util.getTimeStr(time));
}
}
} else {
if (this.obj.dataTime.time_interval) {
if (time <= item.end_time) timeData.push(this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval));
} else {
timeData.push(this.$util.getTimeStr(time));
}
}
time = parseInt(time) + timeInterval;
}
})
this.timeData = timeData;
this.$forceUpdate();
}
}
};
</script>
<style lang="scss" scoped>
.box {
height: 728rpx;
.title {
padding: 0 30rpx;
box-sizing: border-box;
text-align: center;
font-size: 28rpx;
font-weight: bold;
position: relative;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #f7f4f4;
.icon-close {
font-size: 26rpx;
color: #909399;
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
}
}
.body {
width: 100%;
height: calc(100% - 90rpx);
display: flex;
align-items: center;
.left {
width: 230rpx;
background: #f8f8f8;
height: 100%;
.item {
width: 100%;
padding: 16rpx 30rpx;
box-sizing: border-box;
text-align: center;
font-size: 24rpx;
display: flex;
align-items: center;
}
.itemDay {
background: #ffffff;
}
}
.right {
width: calc(100% - 230rpx);
height: 100%;
padding: 0 30rpx;
box-sizing: border-box;
.item {
width: 100%;
font-size: 24rpx;
border-bottom: 1rpx solid #eeeeee;
display: flex;
align-items: center;
justify-content: space-between;
height: 72rpx;
.icon-yuan_checked {
font-size: 38rpx;
margin-right: 30rpx;
}
}
.itemTime {
color: var(--main-color);
}
}
}
}
</style>
<template>
<view class="ns-time">
<uni-popup type="bottom" ref="selectTime">
<view class="box">
<view class="title">
<block v-if="obj.delivery && obj.delivery.delivery_type == 'local'">选择送达时间</block>
<block v-if="obj.delivery && obj.delivery.delivery_type == 'store'">选择自提时间</block>
<text class="iconfont icon-close" @click="close"></text>
</view>
<view class="body">
<!-- 左侧日期选择 -->
<scroll-view :scroll-y="true" class="left">
<view class="item" :class="index == keyJudge ? 'itemDay' : ''" v-for="(item, index) in dayData" :key="index" @click="selectTime('days', index, 'yes')">
<block v-if="item.title">{{ item.title }}</block>
<block v-else>{{ item.month }}</block>
<text class="itemtext">{{ item.Day }}</text>
</view>
</scroll-view>
<!-- 右侧时间选择 -->
<scroll-view :scroll-y="true" class="right">
<view class="item" :class="key == keyJudge && index == keys ? 'itemTime' : ''" v-for="(item, index) in timeData" :key="index" @click="selectTime('time', index, 'yes')">
{{ item }}
<text v-if="key == keyJudge && index == keys" class="iconfont icon-yuan_checked color-base-text"></text>
</view>
</scroll-view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
name: "nsSelectTime",
components: {
uniPopup
},
data() {
return {
//选中日期的键值
key: 0,
//选中时间的键值
keys: 0,
//渲染用数据
obj: {},
//左侧渲染时间
dayData: [],
// 右侧渲染数据
timeData: [],
//判断弹窗打开
judge: false,
//判断左侧列表是否为日期选中列表
keyJudge: 0,
//当前时间时间戳
dayTime: 0
};
},
methods: {
refresh(){
this.key = 0;
this.keys = 0;
this.keyJudge = 0;
},
/**
* 弹窗打开
*/
open(obj, type) {
this.dayData = [];
this.timeData = [];
this.obj = obj;
this.toDay(obj.dataTime.time_type, obj.dataTime.time_week);
if (this.judge) {
if (type == 'no') {
this.selectTime('', '', type);
} else {
this.$refs.selectTime.open();
}
}
},
/**
* 时间选择
*/
selectTime(type, index, judge) {
if (type == 'days') {
this.keyJudge = index;
this.toTime();
} else if (type == 'time') {
this.keys = index;
this.key = this.keyJudge;
let obj = this.dayData[this.key];
obj.time = this.timeData[this.keys];
let time = obj.time.replace('立即配送(','').replace('','');
let dateTime = new Date();
let format = time.split('-');
let startHours = format[0].split(':');
let endHours = format[1].split(':');
let timeData = obj.month.split('月');
let month = timeData[0];
let date = timeData[1].split('日')[0];
// 开始时间戳
dateTime.setHours(startHours[0],startHours[1],0,0);
obj.start_time = dateTime.getTime()/1000;
obj.start_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[0];
// 结束时间戳
dateTime.setHours(endHours[0],endHours[1],0,0);
obj.end_time = dateTime.getTime()/1000;
obj.end_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[1];
this.$emit('selectTime', { data: obj, type: judge });
this.$refs.selectTime.close();
}
if (judge == 'no') {
this.toTime(judge);
let obj = this.dayData[0];
obj.time = this.timeData[0];
let dateTime = new Date();
let format = obj.time.replace('立即配送(','').replace('','').split('-');
let startHours = format[0].split(':');
let endHours = format[1].split(':');
let timeData = obj.month.split('月');
let month = timeData[0];
let date = timeData[1].split('日')[0];
// 开始时间戳
dateTime.setHours(startHours[0],startHours[1],0,0);
obj.start_time = dateTime.getTime()/1000;
obj.start_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[0];
// 结束时间戳
dateTime.setHours(endHours[0],endHours[1],0,0);
obj.end_time = dateTime.getTime()/1000;
obj.end_date = dateTime.getFullYear() + '-' + month + '-' + date + ' ' + format[1];
this.$emit('selectTime', { data: obj, type: judge });
}
this.$forceUpdate();
},
/**
* 弹窗关闭
*/
close() {
this.$refs.selectTime.close();
},
/**
* 左侧数据处理
*/
toDay(type, obj) {
let today = new Date();
if (this.obj.dataTime.advance_day) {
today = new Date(today.getTime() + (this.obj.dataTime.advance_day * 86400000));
}
let nowYear = today.getFullYear(); //当前年
let nowMonth = today.getMonth() + 1; //当前月
let nowDate = today.getDate(); //当前日
let nowDay = today.getDay(); //当前星期几
let endDay = new Date(nowYear, nowMonth, 0).getDate(); //当月多少天
let Hours = today.getHours();
let Minutes = today.getMinutes();
this.dayTime = this.obj.dataTime.advance_day ? 0 : Number(Hours) * 3600 + Number(Minutes) * 60; //获取到当前时分秒的时间戳
let judge = false;
let num = 1; //记录循环执行过的次数
let mostDay = this.obj.dataTime.most_day ? this.obj.dataTime.most_day + 1 : 1; // 最多可预约天数
let startTime = parseInt(today.getTime() / 1000);
let week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
if (obj.time_week && obj.time_week.length == 7) {
//判断是否七天全有
judge = true;
}
for (let i = 0; i < mostDay; i++) {
let objects = {};
let dayStr = week[ nowDay ];
// 判断最大可预约时间
if (this.obj.dataTime.most_day > 0 && ((startTime + num * 86400) > (startTime + this.obj.dataTime.most_day * 86400) ) ) {
this.judge = true;
break;
}
//判断当天是否能够配送、自提
if (type == 0 || judge || obj.indexOf(nowDay.toString()) != -1) {
let endTime = this.obj.dataTime.delivery_time[ (this.obj.dataTime.delivery_time.length - 1) ].end_time;
endTime -= this.obj.dataTime.time_interval * 60;
switch (num) {
case 1:
if (i == 0) {
if (endTime < this.dayTime) {
i = i - 1;
} else {
objects = {
title: this.obj.dataTime.advance_day == 0 ? '今天' : '',
type: 'special',
month: nowMonth + '月' + nowDate + '日',
Day: '(' + dayStr + ')'
};
this.dayData.push(objects); //左侧日期数据处理
}
}
break;
case 2:
if (i == 0 || i == 1) {
objects = {
title: this.obj.dataTime.advance_day == 0 ? '明天' : '',
month: nowMonth + '月' + nowDate + '日',
Day: '(' + dayStr + ')'
};
this.dayData.push(objects); //左侧日期数据处理
}
break;
default:
objects = {
title: '',
month: nowMonth + '月' + nowDate + '日',
Day: '(' + dayStr + ')'
};
this.dayData.push(objects); //左侧日期数据处理
}
} else {
i = i - 1;
}
if (nowDate != endDay) {
nowDate += 1;
} else {
if (nowMonth != 12) {
nowMonth += 1;
} else {
nowMonth = 1;
}
nowDate = 1;
}
if (nowDay != 6) {
nowDay += 1;
} else {
nowDay = 0;
}
num += 1;
if (this.obj.dataTime.most_day == 0 && i == 0) {
this.judge = true;
}
}
this.toTime(); //处理右侧时间数据
},
/**
* 处理右侧时间数据
*/
toTime(judge) {
//并非打开弹窗进入时,所有数据置零
if (judge == 'no') {
this.key = 0;
this.keys = 0;
this.keyJudge = 0;
}
let timeData = [];
if (!this.obj.dataTime.delivery_time) {
this.obj.dataTime.delivery_time = [ {start_time: this.obj.dataTime.start_time, end_time: this.obj.dataTime.end_time} ]
}
//判断选中是否为当天
let remainder = 0;
//当天配送自提的话向后推迟30分钟
let newDayTime = JSON.parse(JSON.stringify(this.dayTime));
// newDayTime = Math.ceil(this.dayTime / 600) * 600 + 1800;
//判断选中是否为当天
let timeJudage = false;
if (this.dayData[this.keyJudge] && this.dayData[this.keyJudge].type && newDayTime > this.obj.dataTime.start_time) timeJudage = true;
let timeInterval = this.obj.dataTime.time_interval ? this.obj.dataTime.time_interval * 60 : 1200;
this.obj.dataTime.delivery_time.forEach(item => {
item.end_time = item.end_time ? item.end_time : 86400;
let num = parseInt((parseInt(item.end_time) - parseInt(item.start_time)) / timeInterval);
let time = timeJudage ? parseInt(newDayTime) : parseInt(item.start_time);
for (let i = 0; i < num; i++) {
if (parseInt(time) + parseInt(timeInterval) > item.end_time) break;
if (timeJudage) {
if (time >= newDayTime) {
if (this.obj.dataTime.time_interval) {
if (time <= item.end_time) {
let text = '';
if (this.obj.delivery.delivery_type == 'local' && i == 0) {
text = '立即配送('+ this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval) + '';
} else {
text = this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval);
}
timeData.push(text);
}
} else {
timeData.push(this.$util.getTimeStr(time));
}
}
} else {
if (this.obj.dataTime.time_interval) {
if (time <= item.end_time) timeData.push(this.$util.getTimeStr(time) + '-' + this.$util.getTimeStr(time + timeInterval));
} else {
timeData.push(this.$util.getTimeStr(time));
}
}
time = parseInt(time) + timeInterval;
}
})
this.timeData = timeData;
this.$forceUpdate();
}
}
};
</script>
<style lang="scss" scoped>
.box {
height: 728rpx;
.title {
padding: 0 30rpx;
box-sizing: border-box;
text-align: center;
font-size: 28rpx;
font-weight: bold;
position: relative;
height: 90rpx;
line-height: 90rpx;
border-bottom: 1rpx solid #f7f4f4;
.icon-close {
font-size: 26rpx;
color: #909399;
position: absolute;
right: 30rpx;
top: 50%;
transform: translateY(-50%);
}
}
.body {
width: 100%;
height: calc(100% - 90rpx);
display: flex;
align-items: center;
.left {
width: 230rpx;
background: #f8f8f8;
height: 100%;
.item {
width: 100%;
padding: 16rpx 30rpx;
box-sizing: border-box;
text-align: center;
font-size: 24rpx;
display: flex;
align-items: center;
}
.itemDay {
background: #ffffff;
}
}
.right {
width: calc(100% - 230rpx);
height: 100%;
padding: 0 30rpx;
box-sizing: border-box;
.item {
width: 100%;
font-size: 24rpx;
border-bottom: 1rpx solid #eeeeee;
display: flex;
align-items: center;
justify-content: space-between;
height: 72rpx;
.icon-yuan_checked {
font-size: 38rpx;
margin-right: 30rpx;
}
}
.itemTime {
color: var(--main-color);
}
}
}
}
</style>

View File

@@ -15,18 +15,20 @@
<view class="payment-item" v-if="balanceDeduct > 0 && balanceUsable && balanceConfig == 1">
<view class="iconfont icon-yue"></view>
<view class="info-wrap">
<text class="name">余额支付</text>
<text class="name">余额抵扣</text>
<view class="money">可用¥{{ balanceDeduct|moneyFormat }}</view>
</view>
<ns-switch class="balance-switch" @change="useBalance" :checked="isBalance == 1"></ns-switch>
</view>
<block v-if="payMoney > 0">
<block v-if="payTypeList.length">
<view class="payment-item" v-for="(item, index) in payTypeList" :key="index" @click="payIndex = index">
<view class="iconfont" :class="item.icon"></view>
<text class="name">{{ item.name }}</text>
<text class="iconfont" :class="payIndex == index ? 'icon-yuan_checked color-base-text' : 'icon-checkboxblank'"></text>
</view>
<block v-for="(item, index) in payTypeList">
<view v-if="offlineShow||item.type!='offlinepay'" class="payment-item" :key="index" @click="payIndex = index">
<view class="iconfont" :class="item.icon"></view>
<text class="name">{{ item.name }}</text>
<text class="iconfont" :class="payIndex == index ? 'icon-yuan_checked color-base-text' : 'icon-checkboxblank'"></text>
</view>
</block>
</block>
<block v-else>
<view class="empty">平台尚未配置支付方式</view>
@@ -63,47 +65,44 @@
balanceUsable: {
type: Boolean,
default: true
}
},
},
data() {
return {
payIndex: 0,
// #ifdef H5
payTypeList: [{
payTypeList: [
// #ifdef H5 || MP-ALIPAY
{
name: '支付宝支付',
icon: 'icon-zhifubaozhifu-',
type: 'alipay'
},
// #endif
// #ifdef H5 || MP-WEIXIN
{
name: '微信支付',
icon: 'icon-weixin1',
type: 'wechatpay'
}
},
// #endif
{
name: '线下支付',
icon: 'icondiy icon-yuezhifu',
type: 'offlinepay'
},
],
// #ifdef H5
timer: null,
// #endif
// #ifdef MP-WEIXIN
payTypeList: [{
name: '微信支付',
provider: 'wxpay',
icon: 'icon-weixin1',
type: 'wechatpay'
}],
// #endif
// #ifdef MP-ALIPAY
payTypeList: [{
name: '支付宝支付',
icon: 'icon-zhifubaozhifu-',
type: 'alipay',
provider: 'alipay'
}],
// #endif
// #endif
payInfo: null,
balanceConfig: 0,
// 预售页面判断
sale: true,
isBalance: 0,
balance: 0
balance: 0,
//重置是否已完成没有完成不能调用api/pay/pay
resetPayComplete:true,
repeatFlag:false,
};
},
created(e) {
@@ -127,9 +126,32 @@
}
}
return money;
}
},
offlineShow(){
// 获取当前页面栈实例数组
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
// 获取页面路由路径
let routePath = currentPage.route;
return this.$store.state.offlineWhiteList.length?this.$store.state.offlineWhiteList.includes(routePath):false
}
},
methods: {
/**
* 父级页面onShow调用
*/
pageShow() {
if(this.payInfo){
let offlinepay = uni.getStorageSync('offlinepay');
if(offlinepay){
uni.removeStorageSync('offlinepay');
this.close()
}
}else{
uni.removeStorageSync('offlinepay');
}
},
close() {
this.$emit('close');
this.$refs.choosePaymentPopup.close();
@@ -146,14 +168,22 @@
});
return;
}
if(this.resetPayComplete == false){
this.$util.showToast({
title: '支付取消中,请稍后再试!'
});
return;
}
uni.showLoading({
title: '支付中...',
mask: true
});
if(this.repeatFlag) return;
this.repeatFlag = true;
this.pay();
uni.setStorageSync('pay_flag', 1);
},
getPayInfo(out_trade_no) {
getPayInfo(out_trade_no, callback) {
this.$api.sendRequest({
url: '/api/pay/info',
data: {
@@ -165,6 +195,7 @@
if (this.balanceConfig && this.balanceUsable) this.getMemberBalance();
setTimeout(() => {
this.$refs.choosePaymentPopup.open();
if(typeof callback == 'function') callback();
})
} else {
this.$util.showToast({
@@ -178,7 +209,6 @@
* 获取余额配置
*/
getBalanceConfig() {
this.$api.sendRequest({
url: '/api/pay/getBalanceConfig',
data: {},
@@ -196,10 +226,6 @@
success: res => {
if (res.code == 0 && res.data) {
this.balance = parseFloat(res.data.usable_balance);
//余额不足以抵扣整个订单时不显示
if(parseFloat(this.payMoney) > this.balance){
this.balanceConfig = 0
}
}
}
})
@@ -215,10 +241,8 @@
if (res.data.pay_type == '') {
this.payTypeList = [];
} else {
this.payTypeList.forEach((val, key) => {
if (res.data.pay_type.indexOf(val.type) == -1) {
this.payTypeList.splice(key, 1);
}
this.payTypeList = this.payTypeList.filter((val, key) => {
return res.data.pay_type.indexOf(val.type) != -1
});
}
}
@@ -239,8 +263,7 @@
data: {
out_trade_no: this.payInfo.out_trade_no,
pay_type: payType ? payType.type : '',
return_url: encodeURIComponent(this.$config.h5Domain + return_url + this.payInfo
.out_trade_no),
return_url: encodeURIComponent(this.$config.h5Domain + return_url + this.payInfo.out_trade_no),
is_balance: this.isBalance
},
success: res => {
@@ -258,7 +281,9 @@
wx_alipay: wx_alipay,
out_trade_no: this.payInfo.out_trade_no
}, '', 'redirectTo');
this.repeatFlag = false;
} else {
this.repeatFlag = false;
location.href = res.data.data;
this.checkPayStatus();
}
@@ -290,12 +315,14 @@
res => {
if (res.errMsg == 'chooseWXPay:ok') {
this.paySuccess();
this.repeatFlag = false;
} else {
this.$util.showToast({
title: res.errMsg
});
setTimeout(() => {
this.close();
this.repeatFlag = false;
}, 1500)
}
},
@@ -304,20 +331,30 @@
title: '您已取消支付'
});
this.resetpay();
this.repeatFlag = false;
}
);
}
});
} else {
this.repeatFlag = false;
location.href = res.data.url;
this.checkPayStatus();
}
break;
case 'offlinepay':
this.$util.redirectTo('/pages_tool/pay/offlinepay', {
outTradeNo: this.payInfo.out_trade_no
});
this.repeatFlag = false;
break;
}
} else {
this.$util.showToast({
title: res.message
});
this.repeatFlag = false;
}
},
fail: res => {
@@ -325,6 +362,7 @@
this.$util.showToast({
title: 'request:fail'
});
this.repeatFlag = false;
}
});
},
@@ -365,72 +403,87 @@
if (res.code >= 0) {
if (res.data.pay_success) {
this.paySuccess();
this.repeatFlag = false;
return;
}
var payData = res.data.data;
// #ifdef MP-WEIXIN
var scene = uni.getStorageSync('is_test') ? 1175 : wx.getLaunchOptionsSync().scene;
if ([1175, 1176, 1177, 1191, 1195].indexOf(scene) != -1) {
uni.requestOrderPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package,
signType: payData.signType,
paySign: payData.paySign,
success: res => {
this.paySuccess();
},
fail: res => {
this.flag = false;
if (res.errMsg == 'requestOrderPayment:fail cancel') {
this.$util.showToast({
title: '您已取消支付'
});
this.resetpay();
} else {
uni.showModal({
content: '支付失败,失败原因: ' + res.errMsg,
showCancel: false
});
setTimeout(() => {
this.close();
}, 1500)
}
}
});
return
}
// #endif
uni.requestPayment({
provider: payType.provider,
...payData,
success: res => {
this.paySuccess();
},
fail: res => {
this.flag = false;
if (res.errMsg == 'requestPayment:fail cancel') {
this.$util.showToast({
title: '您已取消支付'
});
this.resetpay();
} else {
uni.showModal({
content: '支付失败,失败原因: ' + res.errMsg,
showCancel: false
});
setTimeout(() => {
this.close();
}, 1500)
}
}
});
} else {
if (payType.type=='offlinepay') {
this.$util.redirectTo('/pages_tool/pay/offlinepay', {
outTradeNo: this.payInfo.out_trade_no
});
this.repeatFlag = false;
}else{
var payData = res.data.data;
// #ifdef MP-WEIXIN
var scene = uni.getStorageSync('is_test') ? 1175 : wx.getLaunchOptionsSync().scene;
if ([1175, 1176, 1177, 1191, 1195].indexOf(scene) != -1) {
uni.requestOrderPayment({
timeStamp: payData.timeStamp,
nonceStr: payData.nonceStr,
package: payData.package,
signType: payData.signType,
paySign: payData.paySign,
success: res => {
this.paySuccess();
this.repeatFlag = false;
},
fail: res => {
this.flag = false;
if (res.errMsg == 'requestOrderPayment:fail cancel') {
this.$util.showToast({
title: '您已取消支付'
});
this.resetpay();
this.repeatFlag = false;
} else {
uni.showModal({
content: '支付失败,失败原因: ' + res.errMsg,
showCancel: false
});
setTimeout(() => {
this.close();
this.repeatFlag = false;
}, 1500)
}
}
});
return
}
// #endif
uni.requestPayment({
provider: payType.provider,
...payData,
success: res => {
this.paySuccess();
this.repeatFlag = false;
},
fail: res => {
this.flag = false;
if (res.errMsg == 'requestPayment:fail cancel') {
this.$util.showToast({
title: '您已取消支付'
});
this.resetpay();
this.repeatFlag = false;
} else {
uni.showModal({
content: '支付失败,失败原因: ' + res.errMsg,
showCancel: false
});
setTimeout(() => {
this.close();
this.repeatFlag = false;
}, 1500)
}
}
});
}
} else {
this.$util.showToast({
title: res.message
});
this.repeatFlag = false;
}
},
fail: res => {
@@ -438,6 +491,7 @@
this.$util.showToast({
title: 'request:fail'
});
this.repeatFlag = false;
}
});
},
@@ -463,14 +517,24 @@
* 重置支付单据
*/
resetpay() {
this.resetPayComplete = false;
this.$api.sendRequest({
url: '/api/pay/resetpay',
data: {
out_trade_no: this.payInfo.out_trade_no,
},
success: res => {
if (res.code == 0) this.getPayInfo(res.data);
}
if (res.code == 0) {
this.getPayInfo(res.data, ()=>{
this.resetPayComplete = true;
});
}else{
this.resetPayComplete = true;
}
},
fail:res =>{
this.resetPayComplete = true;
}
})
}
},
@@ -569,7 +633,9 @@
.icon-weixin1 {
color: #24af41;
}
.icon-yuezhifu{
color: #f9a647;
}
.icon-zhifubaozhifu- {
color: #00a0e9;
}

View File

@@ -1,269 +1,259 @@
<template>
<view v-if="isShow">
<view ref="ani" :animation="animationData" class="message" :style="{ top: top + 'px', left: left + 'px' }" v-if="show">
<view class="round bg-gradual-orange flex justify-start shadow" style="padding: 3px;">
<view class="cu-avatar cu-a-sm round" :style="{ backgroundImage: 'url(' + $util.img(penpaiData.img) + ')' }">
<!-- #ifdef APP-NVUE -->
<!-- <image :src="penpaiData.img" class="avatarimg"></image> -->
<!-- #endif -->
</view>
<view class="padding-lr-sm flex align-center">
<text class="text-sm">{{ penpaiData.title }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
export default {
name: 'pengpai-fadein-out',
props: {
//持续时间
duration: {
type: Number,
default: 3000
},
//停留时间
wait: {
type: Number,
default: 3500
},
//顶部距离px
top: {
type: Number,
default: 350
},
//左边距离px
left: {
type: Number,
default: 10
},
//动画半径
radius: {
type: Number,
default: 30
},
//数据
info: {
type: [Array, Object],
default: () => {
return [];
}
}
},
data() {
return {
animationData: {},
animationNumber: {},
show: true,
index: 0,
penpaiData: {},
timeIndex: 0
};
},
computed:{
isShow(){
return this.penpaiData && Object.keys(this.penpaiData).length;
}
},
mounted() {
this.initData();
},
methods: {
initData() {
// 初始化执行第一次
this.penpaiData = this.info[this.index];
this.donghua();
// 开启时间函数,轮询推值
clearInterval(this.timeIndex);
this.timeIndex = setInterval(() => {
if (this.index == this.info.length - 1) {
this.index = 0;
} else {
this.index++;
}
this.penpaiData = this.info[this.index];
// 执行动画
this.donghua();
}, this.duration + this.wait);
},
donghua() {
//进入
// #ifndef APP-NVUE
this.animationData = uni
.createAnimation({
duration: this.duration / 2,
timingFunction: 'ease'
})
.top(this.top - this.radius)
.opacity(0.9)
.step()
.export();
// #endif
// #ifdef APP-NVUE
if (!this.$refs['ani']) return;
animation.transition(this.$refs['ani'].ref, {
styles: {
transform: `translateY(-${this.radius / 2}px)`,
opacity: 1
},
duration: this.duration / 2,
timingFunction: 'linear',
needLayout: false,
delay: 0
});
// #endif
//停留
setTimeout(() => {
//消失
// #ifndef APP-NVUE
this.animationData = uni
.createAnimation({
duration: this.duration / 2,
timingFunction: 'ease'
})
.top(this.top - this.radius * 2)
.opacity(0)
.step()
.export();
// #endif
// #ifdef APP-NVUE
if (!this.$refs['ani']) return;
animation.transition(this.$refs['ani'].ref, {
styles: {
transform: `translateY(-${this.radius}px)`,
opacity: 0
},
duration: this.duration / 2,
timingFunction: 'linear',
needLayout: false,
delay: 0
});
// #endif
}, this.wait);
// console.log('this.top', this.top);
// console.log('this.radius', this.radius);
setTimeout(() => {
this.animationData = uni
.createAnimation({
duration: this.duration / 2,
timingFunction: 'ease'
})
.top(this.top)
.opacity(0)
.step()
.export();
}, 2800);
},
closeTimer() {
clearInterval(this.timeIndex); //关闭弹幕定时器
}
}
};
</script>
<style scoped lang="scss">
.message {
position: absolute;
z-index: 8;
opacity: 0;
}
.round {
border-radius: 50px;
}
.bg-gradual-orange {
background-color: rgba($color: #000, $alpha: 0.4);
color: #fff;
}
.shadow {
box-shadow: 40rpx 40rpx 50rpx rgba(217, 109, 26, 0.2);
}
.flex {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.justify-start {
justify-content: flex-start;
}
.cu-avatar {
/* #ifndef APP-NVUE */
font-variant: small-caps;
display: inline-flex;
white-space: nowrap;
background-size: cover;
background-position: center;
vertical-align: middle;
/* #endif */
margin: 0;
padding: 0;
text-align: center;
justify-content: center;
align-items: center;
background-color: #ccc;
color: #ffffff;
position: relative;
width: 300rpx;
height: 300rpx;
font-size: 300rpx;
}
/* #ifdef APP-NVUE */
.avatarimg {
width: 30rpx;
height: 30rpx;
border-radius: 50rpx;
}
/* #endif */
.cu-a-sm {
width: 60rpx;
height: 60rpx;
font-size: 20rpx;
}
.padding-lr-sm {
padding-left: 20upx;
padding-right: 20upx;
}
.align-center {
align-items: center;
}
.margin-left-xs {
margin-left: 10upx;
}
.text-bold {
font-weight: bold;
}
.margin-lr-sm {
margin-left: 20upx;
margin-right: 20upx;
}
.text-sm {
font-size: $font-size-tag;
color: #ffffff;
}
</style>
<template>
<view v-if="isShow">
<view ref="ani" :animation="animationData" class="message" :style="{ top: top + 'px', left: left + 'px' }" v-if="show">
<view class="round bg-gradual-orange flex justify-start shadow" style="padding: 3px;">
<view class="cu-avatar cu-a-sm round" :style="{ backgroundImage: 'url(' + $util.img(penpaiData.img) + ')' }">
<!-- #ifdef APP-NVUE -->
<!-- <image :src="penpaiData.img" class="avatarimg"></image> -->
<!-- #endif -->
</view>
<view class="padding-lr-sm flex align-center">
<text class="text-sm">{{ penpaiData.title }}</text>
</view>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
export default {
name: 'pengpai-fadein-out',
props: {
//持续时间
duration: {
type: Number,
default: 3000
},
//停留时间
wait: {
type: Number,
default: 3500
},
//顶部距离px
top: {
type: Number,
default: 350
},
//左边距离px
left: {
type: Number,
default: 10
},
//动画半径
radius: {
type: Number,
default: 30
},
//数据
info: {
type: [Array, Object],
default: () => {
return [];
}
}
},
data() {
return {
animationData: {},
animationNumber: {},
show: true,
index: 0,
penpaiData: {},
timeIndex: 0
};
},
computed:{
isShow(){
return this.penpaiData && Object.keys(this.penpaiData).length;
}
},
mounted() {
this.initData();
},
methods: {
initData() {
// 初始化执行第一次
this.penpaiData = this.info[this.index];
this.donghua();
// 开启时间函数,轮询推值
clearInterval(this.timeIndex);
this.timeIndex = setInterval(() => {
if (this.index == this.info.length - 1) {
this.index = 0;
} else {
this.index++;
}
this.penpaiData = this.info[this.index];
// 执行动画
this.donghua();
}, this.duration + this.wait);
},
donghua() {
//进入
// #ifndef APP-NVUE
this.animationData = uni
.createAnimation({
duration: this.duration / 2,
timingFunction: 'ease'
})
.top(this.top - this.radius)
.opacity(0.9)
.step()
.export();
// #endif
// #ifdef APP-NVUE
if (!this.$refs['ani']) return;
animation.transition(this.$refs['ani'].ref, {
styles: {
transform: `translateY(-${this.radius / 2}px)`,
opacity: 1
},
duration: this.duration / 2,
timingFunction: 'linear',
needLayout: false,
delay: 0
});
// #endif
//停留
setTimeout(() => {
//消失
// #ifndef APP-NVUE
this.animationData = uni.createAnimation({
duration: this.duration / 2,
timingFunction: 'ease'
}).top(this.top - this.radius * 2).opacity(0).step().export();
// #endif
// #ifdef APP-NVUE
if (!this.$refs['ani']) return;
animation.transition(this.$refs['ani'].ref, {
styles: {
transform: `translateY(-${this.radius}px)`,
opacity: 0
},
duration: this.duration / 2,
timingFunction: 'linear',
needLayout: false,
delay: 0
});
// #endif
}, this.wait);
// console.log('this.top', this.top);
// console.log('this.radius', this.radius);
setTimeout(() => {
this.animationData = uni.createAnimation({
duration: this.duration / 2,
timingFunction: 'ease'
}).top(this.top).opacity(0).step().export();
}, 2800);
},
closeTimer() {
clearInterval(this.timeIndex); //关闭弹幕定时器
}
}
};
</script>
<style scoped lang="scss">
.message {
position: absolute;
z-index: 8;
opacity: 0;
}
.round {
border-radius: 50px;
}
.bg-gradual-orange {
background-color: rgba($color: #000, $alpha: 0.4);
color: #fff;
}
.shadow {
box-shadow: 40rpx 40rpx 50rpx rgba(217, 109, 26, 0.2);
}
.flex {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
}
.justify-start {
justify-content: flex-start;
}
.cu-avatar {
/* #ifndef APP-NVUE */
font-variant: small-caps;
display: inline-flex;
white-space: nowrap;
background-size: cover;
background-position: center;
vertical-align: middle;
/* #endif */
margin: 0;
padding: 0;
text-align: center;
justify-content: center;
align-items: center;
background-color: #ccc;
color: #ffffff;
position: relative;
width: 300rpx;
height: 300rpx;
font-size: 300rpx;
}
/* #ifdef APP-NVUE */
.avatarimg {
width: 30rpx;
height: 30rpx;
border-radius: 50rpx;
}
/* #endif */
.cu-a-sm {
width: 60rpx;
height: 60rpx;
font-size: 20rpx;
}
.padding-lr-sm {
padding-left: 20upx;
padding-right: 20upx;
}
.align-center {
align-items: center;
}
.margin-left-xs {
margin-left: 10upx;
}
.text-bold {
font-weight: bold;
}
.margin-lr-sm {
margin-left: 20upx;
margin-right: 20upx;
}
.text-sm {
font-size: $font-size-tag;
color: #ffffff;
}
</style>

View File

@@ -1,297 +1,329 @@
<template>
<view>
<view @touchmove.prevent.stop class="reward-popup" v-if="reward">
<uni-popup ref="registerReward" type="center" :maskClick="false">
<view class="reward-wrap">
<image :src="$util.img('public/uniapp/register_reward/register_reward_img.png')" mode="widthFix" class="bg-img-head"/>
<image :src="$util.img('public/uniapp/register_reward/register_reward_money.png')" mode="widthFix" class="bg-img-money"/>
<image :src="$util.img('public/uniapp/register_reward/register_reward_head.png')" mode="widthFix" class="bg-img"/>
<view class="wrap">
<view>
<scroll-view scroll-y="true" class="register-box">
<view class="reward-content">
<view class="reward-item" v-if="reward.point > 0">
<view class="head">积分奖励</view>
<view class="content">
<view class="info">
<view>
<text class="num">{{ reward.point }}</text>
<text class="type">积分</text>
</view>
<view class="desc">用于下单时抵现或兑换商品等</view>
</view>
<view class="tip" @click="closeRewardPopup('point')">立即查看</view>
</view>
</view>
<view class="reward-item" v-if="reward.growth > 0">
<view class="head">成长值</view>
<view class="content">
<view class="info">
<view>
<text class="num">{{ reward.growth }}</text>
<text class="type">成长值</text>
</view>
<view class="desc">用于提升会员等级</view>
</view>
<view class="tip" @click="closeRewardPopup('growth')">立即查看</view>
</view>
</view>
<view class="reward-item" v-if="reward.balance > 0">
<view class="head">红包奖励</view>
<view class="content">
<view class="info">
<view>
<text class="num">{{ reward.balance }}</text>
<text class="type"></text>
</view>
<view class="desc">不可提现下单时可用</view>
</view>
<view class="tip" @click="closeRewardPopup('balance')">立即查看</view>
</view>
</view>
<view class="reward-item" v-if="reward.coupon_list.length > 0">
<view class="head">优惠券奖励</view>
<view class="content" v-for="(item, index) in reward.coupon_list" :key="index">
<view class="info">
<view>
<text class="num coupon-name">{{ item.coupon_name }}</text>
</view>
<view class="desc" v-if="item.at_least > 0">
{{ item.at_least }}{{ item.type == 'discount' ? '' + item.discount + '' : '' + item.money }}
</view>
<view class="desc" v-else>
无门槛{{ item.type == 'discount' ? '' + item.discount + '' : '' + item.money }}
</view>
</view>
<view class="tip" @click="closeRewardPopup('coupon')">立即查看</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="close-btn" @click="closeRewardPopup()"><text class="iconfont icon-close"></text></view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
// 注册奖励弹出层
export default {
name: 'register-reward',
components: {
uniPopup
},
data() {
return {
reward: null,
back: ''
};
},
created() {},
methods: {
open(back) {
if (back) this.back = back;
if (this.addonIsExist.memberregister) {
this.getRegisterReward();
} else {
this.closeRewardPopup();
}
},
cancel() {
this.$refs.registerReward.close();
},
/**
* 获取新人礼配置
*/
getRegisterReward() {
this.$api.sendRequest({
url: '/memberregister/api/Config/Config',
success: res => {
if (res.code >= 0) {
let data = res.data;
if (data.is_use == 1 && (data.value.point > 0 || data.value.balance > 0 || data
.value.growth > 0 || data.value.coupon_list.length > 0)) {
this.reward = data.value;
this.$nextTick(() => {
if(this.$refs.registerReward) this.$refs.registerReward.open();
});
}
}
this.closeRewardPopup();
}
});
},
closeRewardPopup(type) {
if (this.$refs.registerReward) this.$refs.registerReward.close();
switch (type) {
case 'point':
this.$util.redirectTo('/pages_tool/member/point_detail', {});
break;
case 'balance':
this.$util.redirectTo('/pages_tool/member/balance_detail', {});
break;
case 'growth':
this.$util.redirectTo('/pages_tool/member/level', {});
break;
case 'coupon':
this.$util.redirectTo('/pages_tool/member/coupon', {});
break;
default:
if (this.back) this.$util.redirectTo(decodeURIComponent(this.back), {}, 'redirectTo');
else this.$util.redirectTo('/pages/index/index');
break;
}
}
}
};
</script>
<style scoped>
.register-box /deep/ .uni-scroll-view {
background: unset !important;
}
.register-box {
max-height: 630rpx;
overflow-y: scroll;
}
.register-box /deep/.uni-popup__wrapper-box {
overflow: unset !important;
}
.reward-popup /deep/.uni-popup__wrapper {
background: none;
}
</style>
<style lang="scss">
.uni-popup__wrapper-box {
overflow: unset !important;
}
.close-btn {
text-align: center;
margin-top: 20rpx;
.iconfont {
color: #fff;
font-size: 40rpx;
}
}
.reward-wrap {
width: 80vw;
height: auto;
position: relative;
// padding-top: 150rpx;
&>uni-image,
.bg-img {
width: 100%;
will-change: transform;
}
.bg-img-head {
position: absolute;
top: -150rpx;
width: 100vw;
left: -10vw;
}
.bg-img-money {
position: absolute;
width: 93vw;
left: -48rpx;
top: 100rpx;
z-index: 10;
}
.wrap {
width: calc(100% - 2rpx);
height: 100%;
background-color: #ef3030;
margin-top: -80rpx;
padding-bottom: 30rpx;
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
&>view {
position: relative;
}
}
.reward-content {
margin: 0 50rpx 0 50rpx;
}
.reward-item {
.head {
color: #fff;
text-align: center;
line-height: 1;
margin: 20rpx 0;
}
.content {
display: flex;
padding: 16rpx 26rpx;
background: #fff;
border-radius: 10rpx;
margin-bottom: 10rpx;
.info {
flex: 1;
}
.tip {
color: #ff222d;
padding: 10rpx 0 10rpx 30rpx;
width: 70rpx;
line-height: 1.5;
letter-spacing: 2rpx;
border-left: 2rpx dashed #e5e5e5;
}
.num {
font-size: 52rpx;
color: #ff222d;
font-weight: bolder;
line-height: 1;
}
.coupon-name {
font-size: 38rpx;
}
.type {
font-size: $font-size-base;
margin-left: 10rpx;
line-height: 1;
}
.desc {
margin-top: 8rpx;
color: $color-tip;
font-size: $font-size-tag;
line-height: 1;
}
}
}
.btn {
position: absolute;
width: calc(100% - 100rpx);
bottom: 40rpx;
left: 50rpx;
.btn-img {
width: 100%;
}
}
}
<template>
<view>
<view @touchmove.prevent.stop class="reward-popup" v-if="reward">
<uni-popup ref="registerRewardpopup" type="center" :maskClick="false">
<view class="reward-wrap">
<image :src="$util.img('public/uniapp/register_reward/register_reward_img.png')" mode="widthFix" class="bg-img-head"/>
<image :src="$util.img('public/uniapp/register_reward/register_reward_money.png')" mode="widthFix" class="bg-img-money"/>
<image :src="$util.img('public/uniapp/register_reward/register_reward_head.png')" mode="widthFix" class="bg-img"/>
<view class="wrap">
<view>
<scroll-view scroll-y="true" class="register-box">
<view class="reward-content">
<view class="reward-item" v-if="reward.point > 0">
<view class="head">积分奖励</view>
<view class="content">
<view class="info">
<view>
<text class="num">{{ reward.point }}</text>
<text class="type">积分</text>
</view>
<view class="desc">用于下单时抵现或兑换商品等</view>
</view>
<view class="tip" @click="closeRewardPopup('point')">立即查看</view>
</view>
</view>
<view class="reward-item" v-if="reward.growth > 0">
<view class="head">成长值</view>
<view class="content">
<view class="info">
<view>
<text class="num">{{ reward.growth }}</text>
<text class="type">成长值</text>
</view>
<view class="desc">用于提升会员等级</view>
</view>
<view class="tip" @click="closeRewardPopup('growth')">立即查看</view>
</view>
</view>
<view class="reward-item" v-if="reward.balance > 0">
<view class="head">红包奖励</view>
<view class="content">
<view class="info">
<view>
<text class="num">{{ reward.balance }}</text>
<text class="type"></text>
</view>
<view class="desc">不可提现下单时可用</view>
</view>
<view class="tip" @click="closeRewardPopup('balance')">立即查看</view>
</view>
</view>
<view class="reward-item" v-if="reward.coupon_list.length > 0">
<view class="head">优惠券奖励</view>
<view class="content" v-for="(item, index) in reward.coupon_list" :key="index">
<view class="info">
<view>
<text class="num coupon-name">{{ item.coupon_name }}</text>
</view>
<view class="desc" v-if="item.at_least > 0">
{{ item.at_least }}{{ item.type == 'discount' ? '' + item.discount + '' : '' + item.money }}
</view>
<view class="desc" v-else>
无门槛{{ item.type == 'discount' ? '' + item.discount + '' : '' + item.money }}
</view>
</view>
<view class="tip" @click="closeRewardPopup('coupon')">立即查看</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<view class="close-btn" @click="closeRewardPopup()"><text class="iconfont icon-close"></text></view>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
// 注册奖励弹出层
export default {
name: 'register-reward',
components: {
uniPopup
},
data() {
return {
reward: null,
back: '',
path: '',
};
},
created() {
let pages = getCurrentPages();
let currentPage = pages[pages.length - 1].route;
this.path = '/'+currentPage;
},
watch: {
'canReceiveRegistergift': {
handler(newValue, oldValue) {
if (newValue.status && newValue.status != oldValue.status && newValue.path.split('?')[0] == this.path) {
this.$store.commit('setCanReceiveRegistergiftInfo',{status:false,path:''});
// this.$nextTick(()=>{
this.open()
// })
}
},
deep: true
}
},
computed: {
canReceiveRegistergift() {
return this.$store.state.canReceiveRegistergiftInfo;
},
},
methods: {
open(back) {
if (back) this.back = back;
if (this.addonIsExist.memberregister) {
this.getRegisterReward();
} else {
this.closeRewardPopup();
}
},
cancel() {
this.$refs.registerRewardpopup.close();
},
/**
* 获取新人礼配置
*/
getRegisterReward() {
this.$api.sendRequest({
url: '/memberregister/api/Config/Config',
success: res => {
if (res.code >= 0) {
let data = res.data;
if (data.is_use == 1 && (data.value.point > 0 || data.value.balance > 0 || data.value.growth > 0 || data.value.coupon_list.length > 0)) {
this.reward = data.value;
this.$forceUpdate()
this.$nextTick(()=>{
setTimeout(() => {
this.$refs.registerRewardpopup.open();
});
})
} else {
this.closeRewardPopup();
}
}else{
this.closeRewardPopup();
}
}
});
},
closeRewardPopup(type) {
if (this.$refs.registerRewardpopup) this.$refs.registerRewardpopup.close();
if(!type) return;
switch (type) {
case 'point':
this.$util.redirectTo('/pages_tool/member/point_detail', {});
break;
case 'balance':
this.$util.redirectTo('/pages_tool/member/balance_detail', {});
break;
case 'growth':
this.$util.redirectTo('/pages_tool/member/level', {});
break;
case 'coupon':
this.$util.redirectTo('/pages_tool/member/coupon', {});
break;
default:
this.$util.loginComplete('/pages/index/index','redirectTo');
// if (this.back) this.$util.redirectTo(decodeURIComponent(this.back), {}, 'redirectTo');
// else this.$util.redirectTo('/pages/index/index');
break;
}
}
}
};
</script>
<style scoped>
.register-box /deep/ .uni-scroll-view {
background: unset !important;
}
.register-box {
max-height: 630rpx;
overflow-y: scroll;
}
.register-box /deep/.uni-popup__wrapper-box {
overflow: unset !important;
}
.reward-popup /deep/.uni-popup__wrapper {
background: none;
}
</style>
<style lang="scss">
.uni-popup__wrapper-box {
overflow: unset !important;
}
.close-btn {
text-align: center;
margin-top: 20rpx;
.iconfont {
color: #fff;
font-size: 40rpx;
}
}
.reward-wrap {
width: 80vw;
height: auto;
position: relative;
// padding-top: 150rpx;
&>uni-image,
.bg-img {
width: 100%;
will-change: transform;
}
.bg-img-head {
position: absolute;
top: -150rpx;
width: 100vw;
left: -10vw;
}
.bg-img-money {
position: absolute;
width: 93vw;
left: -48rpx;
top: 100rpx;
z-index: 10;
}
.wrap {
width: calc(100% - 2rpx);
height: 100%;
background-color: #ef3030;
margin-top: -80rpx;
padding-bottom: 30rpx;
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
&>view {
position: relative;
}
}
.reward-content {
margin: 0 50rpx 0 50rpx;
}
.reward-item {
.head {
color: #fff;
text-align: center;
line-height: 1;
margin: 20rpx 0;
}
.content {
display: flex;
padding: 16rpx 26rpx;
background: #fff;
border-radius: 10rpx;
margin-bottom: 10rpx;
.info {
flex: 1;
}
.tip {
color: #ff222d;
padding: 10rpx 0 10rpx 30rpx;
width: 70rpx;
line-height: 1.5;
letter-spacing: 2rpx;
border-left: 2rpx dashed #e5e5e5;
}
.num {
font-size: 52rpx;
color: #ff222d;
font-weight: bolder;
line-height: 1;
}
.coupon-name {
font-size: 38rpx;
}
.type {
font-size: $font-size-base;
margin-left: 10rpx;
line-height: 1;
}
.desc {
margin-top: 8rpx;
color: $color-tip;
font-size: $font-size-tag;
line-height: 1;
}
}
}
.btn {
position: absolute;
width: calc(100% - 100rpx);
bottom: 40rpx;
left: 50rpx;
.btn-img {
width: 100%;
}
}
}
</style>

View File

@@ -1,95 +1,91 @@
<template>
<view>
<view :id="elId" :class="{ border: showBorder }" :style="{ 'border-left': showBorder ? '1px ' + borderColor + ' solid' : 'none' }" class="uni-grid">
<slot />
</view>
</view>
</template>
<script>
export default {
name: 'UniGrid',
props: {
// 每列显示个数
column: {
type: Number,
default: 3
},
// 是否显示边框
showBorder: {
type: Boolean,
default: true
},
// 是否显示边框
borderColor: {
type: String,
default: '#e5e5e5'
},
// 全局标记水平方向移动距离 ,起点为中心,负数为左移动,正数为右移动
hor: {
type: Number,
default: 0
},
// 全局标记垂直方向移动距离 ,起点为中心,负数为上移动,正数为下移动
ver: {
type: Number,
default: 0
},
// 是否正方形显示,默认为 true
square: {
type: Boolean,
default: true
},
highlight: {
type: Boolean,
default: true
}
},
provide() {
return {
grid: this
};
},
data() {
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
return {
index: 0,
elId
};
},
created() {
this.index = 0;
this.childrens = [];
this.pIndex = this.pIndex ? this.pIndex++ : 0;
},
methods: {
change(e) {
this.$emit('change', e);
},
_getSize(fn) {
uni.createSelectorQuery()
.in(this)
.select(`#${this.elId}`)
.boundingClientRect()
.exec(ret => {
if (!ret[0]) {
setTimeout(this._getSize(fn));
return;
}
let width = (parseInt(ret[0].width / this.column) - 1) * 2 + 'rpx';
typeof fn === 'function' && fn(width);
});
}
}
};
</script>
<style>
.uni-grid {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
border-left: 2rpx #e5e5e5 solid;
}
</style>
<template>
<view>
<view :id="elId" :class="{ border: showBorder }" :style="{ 'border-left': showBorder ? '1px ' + borderColor + ' solid' : 'none' }" class="uni-grid">
<slot />
</view>
</view>
</template>
<script>
export default {
name: 'UniGrid',
props: {
// 每列显示个数
column: {
type: Number,
default: 3
},
// 是否显示边框
showBorder: {
type: Boolean,
default: true
},
// 是否显示边框
borderColor: {
type: String,
default: '#e5e5e5'
},
// 全局标记水平方向移动距离 ,起点为中心,负数为左移动,正数为右移动
hor: {
type: Number,
default: 0
},
// 全局标记垂直方向移动距离 ,起点为中心,负数为上移动,正数为下移动
ver: {
type: Number,
default: 0
},
// 是否正方形显示,默认为 true
square: {
type: Boolean,
default: true
},
highlight: {
type: Boolean,
default: true
}
},
provide() {
return {
grid: this
};
},
data() {
const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`;
return {
index: 0,
elId
};
},
created() {
this.index = 0;
this.childrens = [];
this.pIndex = this.pIndex ? this.pIndex++ : 0;
},
methods: {
change(e) {
this.$emit('change', e);
},
_getSize(fn) {
uni.createSelectorQuery().in(this).select(`#${this.elId}`).boundingClientRect().exec(ret => {
if (!ret[0]) {
setTimeout(this._getSize(fn));
return;
}
let width = (parseInt(ret[0].width / this.column) - 1) * 2 + 'rpx';
typeof fn === 'function' && fn(width);
});
}
}
};
</script>
<style>
.uni-grid {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
border-left: 2rpx #e5e5e5 solid;
}
</style>

File diff suppressed because one or more lines are too long

View File

@@ -1,261 +1,263 @@
<template>
<view class="uni-numbox" :class="{ small: size == 'small' }">
<button type="default" class="decrease" :class="{ disabled: inputValue <= min || disabled, small: size == 'small' }" @click="_calcValue('minus')">-</button>
<!-- <view
class="uni-numbox__minus"
> -->
<!-- :style="'background-image:url(' + $util.img('public/uniapp/jian.png') + ')'" -->
<!-- </view> -->
<!-- <input :disabled="disabled || inputDisabled" class="uni-input uni-numbox__value" type="number" @input="_onInput" @blur="_onInput" :class="{ small: size == 'small' }" v-model="inputValue"/> -->
<input :disabled="disabled || inputDisabled" class="uni-input uni-numbox__value" type="number" @blur="_onInput" :class="{ small: size == 'small' }" v-model="inputValue" />
<button type="default" class="increase" :class="{ disabled: inputValue >= max || disabled, small: size == 'small' }" @click="_calcValue('plus')">+</button>
<!-- <view
class="uni-numbox__plus" @click="_calcValue('plus')"
:style="'background-image:url(' + $util.img('public/uniapp/jia.png') + ')'"
>
</view> -->
</view>
</template>
<script>
export default {
name: 'UniNumberBox',
props: {
value: {
type: [Number, String],
default: 1
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
disabled: {
type: Boolean,
default: false
},
inputDisabled: {
type: Boolean,
default: false
},
size: {
type: String,
default: 'default'
},
index: {
type: [Number, String],
default: -1
}
},
data() {
return {
inputValue: 0,
initialValue: 0, // 初始值,防止第一次触发变化
initialIndex: 0, // 初始索引,防止第一次触发变化
};
},
watch: {
value(val) {
this.inputValue = +val;
},
inputValue(newVal, oldVal, params) {
// 与初始值相同,不允许操作
if (+newVal != 0 && +newVal == this.initialValue) return;
// 索引不同,不允许操作
if (this.initialIndex != this.index) return;
if (+newVal !== +oldVal) {
this.$emit('change', newVal, params);
}
}
},
created() {
this.initialValue = +this.value;
this.inputValue = +this.value;
this.initialIndex = this.index;
},
methods: {
_calcValue(type) {
if (this.disabled) {
return;
}
const scale = this._getDecimalScale();
let value = this.inputValue * scale;
let step = this.step * scale;
if (type === 'minus') {
value -= step;
} else if (type === 'plus') {
value += step;
}
if (value < this.min && type === 'minus') {
this.$emit('limit', {
value: this.inputValue,
type
}, this.index);
return;
}
if (value > this.max && type === 'plus') {
this.$emit('limit', {
value: this.inputValue,
type
}, this.index);
return;
}
this.inputValue = value / scale;
},
_getDecimalScale() {
let scale = 1;
// 浮点型
if (~~this.step !== this.step) {
scale = Math.pow(10, (this.step + '').split('.')[1].length);
}
return scale;
},
_onInput(event) {
setTimeout(() => {
let value = event.detail.value;
// if (!/(^[1-9]\d*$)/.test(value)) value = this.min;
// if (!value) {
// this.inputValue = 0;
// return;
// }
value = +value;
if (value > this.max) {
value = this.max;
this.$util.showToast({
title: '商品库存不足'
});
} else if (value < this.min) {
this.$util.showToast({
title: '商品最少购买' + this.min + '件'
});
value = this.min;
}
// 如果没有最小购买同时也删除了输入框的内容默认赋值为1
if (!value) value = 1;
this.inputValue = value;
this.$forceUpdate();
}, 0);
}
}
};
</script>
<style lang="scss">
.uni-numbox {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 70rpx;
position: relative;
}
.uni-numbox.small {
height: 44rpx;
}
.uni-numbox:after {
content: '';
position: absolute;
transform-origin: center;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border-radius: 12rpx;
transform: scale(0.5);
}
.uni-numbox__minus,
.uni-numbox__plus {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-size: 100% 100%;
background-position: center;
}
.uni-numbox__value {
position: relative;
background-color: $color-bg;
width: 80rpx;
height: 40rpx;
text-align: center;
border: 1px solid $color-line;
display: inline-block;
line-height: 36rpx;
font-weight: bold;
margin: 0;
padding: 0;
vertical-align: top;
min-height: initial;
border-left: none;
border-right: none;
}
.uni-numbox__value.small {
width: 60rpx;
font-size: $font-size-tag;
}
.uni-numbox__value:after {
content: '';
position: absolute;
transform-origin: center;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border-top-width: 0;
border-bottom-width: 0;
transform: scale(0.5);
}
.uni-numbox--disabled {
color: silver;
}
.uni-numbox button {
width: 40rpx;
height: 40rpx;
display: inline-block;
box-sizing: content-box;
border: 1px solid $color-line;
padding: 0;
margin: 0;
border-radius: 0;
background-color: #fff;
font-weight: bold;
&.disabled {
color: $color-line;
background-color: #f8f8f8 !important;
}
&.decrease {
font-size: 44rpx;
line-height: 32rpx;
}
&.increase {
font-size: $font-size-toolbar;
line-height: 36rpx;
}
}
<template>
<view class="uni-numbox" :class="{ small: size == 'small' }">
<button type="default" class="decrease" :class="{ disabled: inputValue <= min || disabled, small: size == 'small' }" @click="_calcValue('minus')">-</button>
<!-- <view
class="uni-numbox__minus"
> -->
<!-- :style="'background-image:url(' + $util.img('public/uniapp/jian.png') + ')'" -->
<!-- </view> -->
<!-- <input :disabled="disabled || inputDisabled" class="uni-input uni-numbox__value" type="number" @input="_onInput" @blur="_onInput" :class="{ small: size == 'small' }" v-model="inputValue"/> -->
<input :disabled="disabled || inputDisabled" class="uni-input uni-numbox__value" type="number" @blur="_onInput" :class="{ small: size == 'small' }" v-model="inputValue" />
<button type="default" class="increase" :class="{ disabled: inputValue >= max || disabled, small: size == 'small' }" @click="_calcValue('plus')">+</button>
<!-- <view
class="uni-numbox__plus" @click="_calcValue('plus')"
:style="'background-image:url(' + $util.img('public/uniapp/jia.png') + ')'"
>
</view> -->
</view>
</template>
<script>
export default {
name: 'UniNumberBox',
props: {
value: {
type: [Number, String],
default: 1
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100
},
step: {
type: Number,
default: 1
},
disabled: {
type: Boolean,
default: false
},
inputDisabled: {
type: Boolean,
default: false
},
size: {
type: String,
default: 'default'
},
index: {
type: [Number, String],
default: -1
}
},
data() {
return {
inputValue: 0,
initialValue: 0, // 初始值,防止第一次触发变化
initialIndex: 0, // 初始索引,防止第一次触发变化
};
},
watch: {
value(val) {
this.inputValue = +val;
},
inputValue(newVal, oldVal, params) {
// 与初始值相同,不允许操作
if (+newVal != 0 && +newVal == this.initialValue) return;
// 索引不同,不允许操作
if (this.initialIndex != this.index) return;
if (+newVal !== +oldVal) {
this.$emit('change', newVal, params);
}
}
},
created() {
this.initialValue = +this.value;
this.inputValue = +this.value;
this.initialIndex = this.index;
},
methods: {
_calcValue(type) {
if (this.disabled) {
return;
}
const scale = this._getDecimalScale();
let value = this.inputValue * scale;
let step = this.step * scale;
if (type === 'minus') {
value -= step;
} else if (type === 'plus') {
value += step;
}
if (value < this.min && type === 'minus') {
this.$emit('limit', {
value: this.inputValue,
type
}, this.index);
return;
}
if (value > this.max && type === 'plus') {
this.$emit('limit', {
value: this.inputValue,
type
}, this.index);
return;
}
this.inputValue = value / scale;
this.$emit('change', this.inputValue);
},
_getDecimalScale() {
let scale = 1;
// 浮点型
if (~~this.step !== this.step) {
scale = Math.pow(10, (this.step + '').split('.')[1].length);
}
return scale;
},
_onInput(event) {
setTimeout(() => {
let value = event.detail.value;
// if (!/(^[1-9]\d*$)/.test(value)) value = this.min;
// if (!value) {
// this.inputValue = 0;
// return;
// }
value = +value;
if (value > this.max) {
value = this.max;
this.$util.showToast({
title: '商品库存不足'
});
} else if (value < this.min) {
this.$util.showToast({
title: '商品最少购买' + this.min + '件'
});
value = this.min;
}
// 如果没有最小购买同时也删除了输入框的内容默认赋值为1
if (!value) value = 1;
this.inputValue = value;
this.$forceUpdate();
this.$emit('change', value);
}, 0);
}
}
};
</script>
<style lang="scss">
.uni-numbox {
display: inline-flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
height: 70rpx;
position: relative;
}
.uni-numbox.small {
height: 44rpx;
}
.uni-numbox:after {
content: '';
position: absolute;
transform-origin: center;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border-radius: 12rpx;
transform: scale(0.5);
}
.uni-numbox__minus,
.uni-numbox__plus {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
background-size: 100% 100%;
background-position: center;
}
.uni-numbox__value {
position: relative;
background-color: $color-bg;
width: 80rpx;
height: 40rpx;
text-align: center;
border: 1px solid $color-line;
display: inline-block;
line-height: 36rpx;
font-weight: bold;
margin: 0;
padding: 0;
vertical-align: top;
min-height: initial;
border-left: none;
border-right: none;
}
.uni-numbox__value.small {
width: 60rpx;
font-size: $font-size-tag;
}
.uni-numbox__value:after {
content: '';
position: absolute;
transform-origin: center;
box-sizing: border-box;
pointer-events: none;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
border-top-width: 0;
border-bottom-width: 0;
transform: scale(0.5);
}
.uni-numbox--disabled {
color: silver;
}
.uni-numbox button {
width: 40rpx;
height: 40rpx;
display: inline-block;
box-sizing: content-box;
border: 1px solid $color-line;
padding: 0;
margin: 0;
border-radius: 0;
background-color: #fff;
font-weight: bold;
&.disabled {
color: $color-line;
background-color: #f8f8f8 !important;
}
&.decrease {
font-size: 44rpx;
line-height: 32rpx;
}
&.increase {
font-size: $font-size-toolbar;
line-height: 36rpx;
}
}
</style>

View File

@@ -1,244 +1,243 @@
<template>
<view v-if="showPopup" class="uni-popup" :class="customClass" :style="{'top': top}">
<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" ></view>
<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup safe-area" @click="close(true)" v-if="isIphoneX">
<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear">
<slot />
</view>
</view>
<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup" @click="close(true)" v-else>
<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear">
<slot />
</view>
</view>
</view>
</template>
<script>
export default {
name: 'UniPopup',
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型可选值top: 顶部弹出层bottom底部弹出层center全屏弹出层
type: {
type: String,
default: 'center'
},
// 是否开启自定义
custom: {
type: Boolean,
default: false
},
// maskClick
maskClick: {
type: Boolean,
default: true
},
show: {
type: Boolean,
default: true
},
top: {
type: String,
default: '0'
},
customClass: {
type: String,
default: ''
}
},
data() {
return {
ani: '',
showPopup: false,
callback: null,
isIphoneX: false
};
},
watch: {
show(newValue) {
if (newValue) {
this.open();
} else {
this.close();
}
}
},
created() {
this.isIphoneX = this.$util.uniappIsIPhoneX();
},
methods: {
clear() {},
open(callback) {
if (callback) this.callback = callback;
this.$emit('change', {
show: true
});
this.showPopup = true;
this.$nextTick(() => {
setTimeout(() => {
this.ani = 'uni-' + this.type;
}, 30);
});
},
close(type, callback) {
if (!this.maskClick && type) return;
this.$emit('change', {
show: false
});
this.ani = '';
this.$nextTick(() => {
setTimeout(() => {
this.showPopup = false;
}, 300);
});
if (callback) callback();
if (this.callback) this.callback.call(this);
}
}
};
</script>
<style>
.uni-popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
overflow: hidden;
}
.uni-popup__mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
}
.uni-popup__mask.ani {
transition: all 0.3s;
}
.uni-popup__mask.uni-bottom,
.uni-popup__mask.uni-center,
.uni-popup__mask.uni-right,
.uni-popup__mask.uni-left,
.uni-popup__mask.uni-top {
opacity: 1;
}
.uni-popup__wrapper {
position: absolute;
z-index: 999;
box-sizing: border-box;
//background: #ffffff;
}
.uni-popup__wrapper.ani {
transition: all 0.3s;
}
.uni-popup__wrapper.top {
top: 0;
left: 0;
width: 100%;
transform: translateY(-100%);
}
.uni-popup__wrapper.bottom {
bottom: 0;
left: 0;
width: 100%;
transform: translateY(100%);
background: #ffffff;
}
.uni-popup__wrapper.right {
bottom: 0;
left: 0;
width: 100%;
transform: translateX(100%);
}
.uni-popup__wrapper.left {
bottom: 0;
left: 0;
width: 100%;
transform: translateX(-100%);
}
.uni-popup__wrapper.center {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: scale(1.2);
opacity: 0;
}
.uni-popup__wrapper-box {
position: relative;
box-sizing: border-box;
border-radius: 10rpx;
}
.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
background: #fff;
}
.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
position: relative;
max-width: 80%;
max-height: 80%;
overflow-y: scroll;
}
.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
width: 100%;
max-height: 500px;
overflow-y: scroll;
}
.uni-popup__wrapper.uni-bottom,
.uni-popup__wrapper.uni-top {
transform: translateY(0);
}
.uni-popup__wrapper.uni-left,
.uni-popup__wrapper.uni-right {
transform: translateX(0);
}
.uni-popup__wrapper.uni-center {
transform: scale(1);
opacity: 1;
}
/* isIphoneX系列手机底部安全距离 */
.bottom.safe-area {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.left.safe-area {
padding-bottom: 68rpx;
}
.right.safe-area {
padding-bottom: 68rpx;
}
<template>
<view v-if="showPopup" class="uni-popup" :class="customClass" :style="{'top': top}">
<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" ></view>
<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup safe-area" @click="close(true)" v-if="isIphoneX">
<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear">
<slot />
</view>
</view>
<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper goodslist-uni-popup" @click="close(true)" v-else>
<view class="uni-popup__wrapper-box goodslist-uni-popup-box" @click.stop="clear">
<slot />
</view>
</view>
</view>
</template>
<script>
export default {
name: 'UniPopup',
props: {
// 开启动画
animation: {
type: Boolean,
default: true
},
// 弹出层类型可选值top: 顶部弹出层bottom底部弹出层center全屏弹出层
type: {
type: String,
default: 'center'
},
// 是否开启自定义
custom: {
type: Boolean,
default: false
},
maskClick: {
type: Boolean,
default: true
},
show: {
type: Boolean,
default: true
},
top: {
type: String,
default: '0'
},
customClass: {
type: String,
default: ''
}
},
data() {
return {
ani: '',
showPopup: false,
callback: null,
isIphoneX: false
};
},
watch: {
show(newValue) {
if (newValue) {
this.open();
} else {
this.close();
}
}
},
created() {
this.isIphoneX = this.$util.uniappIsIPhoneX();
},
methods: {
clear() {},
open(callback) {
if (callback) this.callback = callback;
this.$emit('change', {
show: true
});
this.showPopup = true;
this.$nextTick(() => {
setTimeout(() => {
this.ani = 'uni-' + this.type;
}, 30);
});
},
close(type, callback) {
if (!this.maskClick && type) return;
this.$emit('change', {
show: false
});
this.ani = '';
this.$nextTick(() => {
setTimeout(() => {
this.showPopup = false;
}, 300);
});
if (callback) callback();
if (this.callback) this.callback.call(this);
}
}
};
</script>
<style>
.uni-popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
overflow: hidden;
}
.uni-popup__mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 998;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
}
.uni-popup__mask.ani {
transition: all 0.3s;
}
.uni-popup__mask.uni-bottom,
.uni-popup__mask.uni-center,
.uni-popup__mask.uni-right,
.uni-popup__mask.uni-left,
.uni-popup__mask.uni-top {
opacity: 1;
}
.uni-popup__wrapper {
position: absolute;
z-index: 999;
box-sizing: border-box;
//background: #ffffff;
}
.uni-popup__wrapper.ani {
transition: all 0.3s;
}
.uni-popup__wrapper.top {
top: 0;
left: 0;
width: 100%;
transform: translateY(-100%);
}
.uni-popup__wrapper.bottom {
bottom: 0;
left: 0;
width: 100%;
transform: translateY(100%);
background: #ffffff;
}
.uni-popup__wrapper.right {
bottom: 0;
left: 0;
width: 100%;
transform: translateX(100%);
}
.uni-popup__wrapper.left {
bottom: 0;
left: 0;
width: 100%;
transform: translateX(-100%);
}
.uni-popup__wrapper.center {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: scale(1.2);
opacity: 0;
}
.uni-popup__wrapper-box {
position: relative;
box-sizing: border-box;
border-radius: 10rpx;
}
.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
background: #fff;
}
.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
position: relative;
max-width: 80%;
max-height: 80%;
overflow-y: scroll;
}
.uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box,
.uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
width: 100%;
max-height: 500px;
overflow-y: scroll;
}
.uni-popup__wrapper.uni-bottom,
.uni-popup__wrapper.uni-top {
transform: translateY(0);
}
.uni-popup__wrapper.uni-left,
.uni-popup__wrapper.uni-right {
transform: translateX(0);
}
.uni-popup__wrapper.uni-center {
transform: scale(1);
opacity: 1;
}
/* isIphoneX系列手机底部安全距离 */
.bottom.safe-area {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.left.safe-area {
padding-bottom: 68rpx;
}
.right.safe-area {
padding-bottom: 68rpx;
}
</style>

View File

@@ -1,158 +1,158 @@
<template>
<view
v-if="text"
:class="[
disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',
inverted === true || inverted === 'true' ? 'uni-tag--inverted' : '',
circle === true || circle === 'true' ? 'uni-tag--circle' : '',
mark === true || mark === 'true' ? 'uni-tag--mark' : '',
'uni-tag--' + size,
'uni-tag--' + type
]"
class="uni-tag"
@click="onClick()"
>
{{ text }}
</view>
</template>
<script>
export default {
name: 'UniTag',
props: {
type: {
// 标签类型default、primary、success、warning、danger、royal
type: String,
default: 'default'
},
size: {
// 标签大小 normal, small
type: String,
default: 'normal'
},
// 标签内容
text: {
type: String,
default: ''
},
disabled: {
// 是否为禁用状态
type: [String, Boolean],
defalut: false
},
inverted: {
// 是否为空心
type: [String, Boolean],
defalut: false
},
circle: {
// 是否为圆角样式
type: [String, Boolean],
defalut: false
},
mark: {
// 是否为标记样式
type: [String, Boolean],
defalut: false
}
},
methods: {
onClick() {
if (this.disabled === true || this.disabled === 'true') {
return;
}
this.$emit('click');
}
}
};
</script>
<style>
.uni-tag {
box-sizing: border-box;
padding: 0 32rpx;
height: 60rpx;
line-height: calc(60rpx - 2px);
font-size: 28rpx;
display: inline-flex;
align-items: center;
color: #333;
border-radius: 6rpx;
background-color: #f8f8f8;
border: 1px solid #f8f8f8;
}
.uni-tag--circle {
border-radius: 30rpx;
}
.uni-tag--mark {
border-radius: 0 30rpx 30rpx 0;
}
.uni-tag--disabled {
opacity: 0.5;
}
.uni-tag--small {
height: 40rpx;
padding: 0 16rpx;
line-height: calc(40rpx - 2px);
font-size: 24rpx;
}
.uni-tag--primary {
color: #fff;
background-color: #007aff;
border: 1px solid #007aff;
}
.uni-tag--primary.uni-tag--inverted {
color: #007aff;
background-color: #fff;
border: 1px solid #007aff;
}
.uni-tag--success {
color: #fff;
background-color: #4cd964;
border: 1px solid #4cd964;
}
.uni-tag--success.uni-tag--inverted {
color: #4cd964;
background-color: #fff;
border: 1px solid #4cd964;
}
.uni-tag--warning {
color: #fff;
background-color: #f0ad4e;
border: 1px solid #f0ad4e;
}
.uni-tag--warning.uni-tag--inverted {
color: #f0ad4e;
background-color: #fff;
border: 1px solid #f0ad4e;
}
.uni-tag--error {
color: #fff;
background-color: #dd524d;
border: 1px solid #dd524d;
}
.uni-tag--error.uni-tag--inverted {
color: #dd524d;
background-color: #fff;
border: 1px solid #dd524d;
}
.uni-tag--inverted {
color: #333;
background-color: #fff;
border: 1px solid #f8f8f8;
}
</style>
<template>
<view
v-if="text"
:class="[
disabled === true || disabled === 'true' ? 'uni-tag--disabled' : '',
inverted === true || inverted === 'true' ? 'uni-tag--inverted' : '',
circle === true || circle === 'true' ? 'uni-tag--circle' : '',
mark === true || mark === 'true' ? 'uni-tag--mark' : '',
'uni-tag--' + size,
'uni-tag--' + type
]"
class="uni-tag"
@click="onClick()"
>
{{ text }}
</view>
</template>
<script>
export default {
name: 'UniTag',
props: {
type: {
// 标签类型default、primary、success、warning、danger、royal
type: String,
default: 'default'
},
size: {
// 标签大小 normal, small
type: String,
default: 'normal'
},
// 标签内容
text: {
type: String,
default: ''
},
disabled: {
// 是否为禁用状态
type: [String, Boolean],
default: false
},
inverted: {
// 是否为空心
type: [String, Boolean],
default: false
},
circle: {
// 是否为圆角样式
type: [String, Boolean],
default: false
},
mark: {
// 是否为标记样式
type: [String, Boolean],
default: false
}
},
methods: {
onClick() {
if (this.disabled === true || this.disabled === 'true') {
return;
}
this.$emit('click');
}
}
};
</script>
<style>
.uni-tag {
box-sizing: border-box;
padding: 0 32rpx;
height: 60rpx;
line-height: calc(60rpx - 2px);
font-size: 28rpx;
display: inline-flex;
align-items: center;
color: #333;
border-radius: 6rpx;
background-color: #f8f8f8;
border: 1px solid #f8f8f8;
}
.uni-tag--circle {
border-radius: 30rpx;
}
.uni-tag--mark {
border-radius: 0 30rpx 30rpx 0;
}
.uni-tag--disabled {
opacity: 0.5;
}
.uni-tag--small {
height: 40rpx;
padding: 0 16rpx;
line-height: calc(40rpx - 2px);
font-size: 24rpx;
}
.uni-tag--primary {
color: #fff;
background-color: #007aff;
border: 1px solid #007aff;
}
.uni-tag--primary.uni-tag--inverted {
color: #007aff;
background-color: #fff;
border: 1px solid #007aff;
}
.uni-tag--success {
color: #fff;
background-color: #4cd964;
border: 1px solid #4cd964;
}
.uni-tag--success.uni-tag--inverted {
color: #4cd964;
background-color: #fff;
border: 1px solid #4cd964;
}
.uni-tag--warning {
color: #fff;
background-color: #f0ad4e;
border: 1px solid #f0ad4e;
}
.uni-tag--warning.uni-tag--inverted {
color: #f0ad4e;
background-color: #fff;
border: 1px solid #f0ad4e;
}
.uni-tag--error {
color: #fff;
background-color: #dd524d;
border: 1px solid #dd524d;
}
.uni-tag--error.uni-tag--inverted {
color: #dd524d;
background-color: #fff;
border: 1px solid #dd524d;
}
.uni-tag--inverted {
color: #333;
background-color: #fff;
border: 1px solid #f8f8f8;
}
</style>

View File

@@ -0,0 +1,218 @@
<template>
<text
class="uv-count-num"
:style="textStyle"
>
{{ displayValue }}
</text>
</template>
<script>
export default {
name: 'uv-count-to',
props: {
startVal: {
type: [String, Number],
default: 0
},
endVal: {
type: [String, Number],
default: 0
},
duration: {
type: [String, Number],
default: 2000
},
autoplay: {
type: Boolean,
default: true
},
decimals: {
type: [String, Number],
default: 0
},
useEasing: {
type: Boolean,
default: true
},
decimal: {
type: [String, Number],
default: '.'
},
color: {
type: String,
default: '#606266'
},
fontSize: {
type: [String, Number],
default: 22
},
bold: {
type: Boolean,
default: false
},
separator: {
type: String,
default: ''
}
},
data() {
return {
localStartVal: this.startVal,
displayValue: this.formatNumber(this.startVal),
printVal: null,
paused: false,
localDuration: Number(this.duration),
startTime: null,
timestamp: null,
remaining: null,
rAF: null,
lastTime: 0
}
},
computed: {
countDown() {
return this.startVal > this.endVal
},
textStyle() {
return {
fontSize: this.fontSize + 'px',
fontWeight: this.bold ? 'bold' : 'normal',
color: this.color
}
}
},
watch: {
startVal() {
if (this.autoplay) {
this.start()
}
},
endVal() {
console.log(123)
if (this.autoplay) {
this.start()
}
}
},
mounted() {
if (this.autoplay) {
this.start()
}
},
methods: {
easingFn(t, b, c, d) {
return c * (1 - Math.pow(2, -10 * t / d)) * 1024 / 1023 + b
},
requestAnimationFrame(callback) {
const currTime = new Date().getTime()
const timeToCall = Math.max(0, 16 - (currTime - this.lastTime))
const id = setTimeout(() => {
callback(currTime + timeToCall)
}, timeToCall)
this.lastTime = currTime + timeToCall
return id
},
cancelAnimationFrame(id) {
clearTimeout(id)
},
start() {
this.localStartVal = this.startVal
this.startTime = null
this.localDuration = this.duration
this.paused = false
this.rAF = this.requestAnimationFrame(this.count)
},
restart() {
if (this.paused) {
this.resume()
this.paused = false
} else {
this.stop()
this.paused = true
}
},
stop() {
this.cancelAnimationFrame(this.rAF)
this.paused = true
},
resume() {
if (this.remaining) {
this.startTime = 0
this.localDuration = this.remaining
this.localStartVal = this.printVal
this.requestAnimationFrame(this.count)
}
},
reset() {
this.startTime = null
this.cancelAnimationFrame(this.rAF)
this.displayValue = this.formatNumber(this.startVal)
},
count(timestamp) {
if (!this.startTime) this.startTime = timestamp
this.timestamp = timestamp
const progress = timestamp - this.startTime
this.remaining = this.localDuration - progress
if (this.useEasing) {
if (this.countDown) {
this.printVal = this.localStartVal - this.easingFn(progress, 0, this.localStartVal - this.endVal, this.localDuration)
} else {
this.printVal = this.easingFn(progress, this.localStartVal, this.endVal - this.localStartVal, this.localDuration)
}
} else {
if (this.countDown) {
this.printVal = this.localStartVal - (this.localStartVal - this.endVal) * (progress / this.localDuration)
} else {
this.printVal = this.localStartVal + (this.endVal - this.localStartVal) * (progress / this.localDuration)
}
}
if (this.countDown) {
this.printVal = this.printVal < this.endVal ? this.endVal : this.printVal
} else {
this.printVal = this.printVal > this.endVal ? this.endVal : this.printVal
}
this.displayValue = this.formatNumber(this.printVal) || 0
if (progress < this.localDuration) {
this.rAF = this.requestAnimationFrame(this.count)
} else {
this.$emit('end')
}
},
isNumber(val) {
return !isNaN(parseFloat(val))
},
formatNumber(num) {
num = Number(num)
num = num.toFixed(Number(this.decimals))
num += ''
const x = num.split('.')
let x1 = x[0]
const x2 = x.length > 1 ? this.decimal + x[1] : ''
const rgx = /(\d+)(\d{3})/
if (this.separator && !this.isNumber(this.separator)) {
while (rgx.test(x1)) {
x1 = x1.replace(rgx, '$1' + this.separator + '$2')
}
}
return x1 + x2
}
},
destroyed() {
this.cancelAnimationFrame(this.rAF)
}
}
</script>
<style scoped>
.uv-count-num {
display: inline-flex;
text-align: center;
}
</style>

4
lang/zh-cn/ai/ai-chat.js Normal file
View File

@@ -0,0 +1,4 @@
export const lang = {
//title为每个页面的标题
title: 'AI智能客服'
}

View File

@@ -1,14 +1,16 @@
export const lang = {
//title为每个页面的标题
title: '编辑收货地址',
consignee: '姓名',
consigneePlaceholder: '收货人姓名',
mobile: '手机',
mobilePlaceholder: '收货人手机号',
telephone: '电话',
telephonePlaceholder: '收货人固定电话(选填)',
receivingCity: '地区',
address: '详细地址',
addressPlaceholder: '小区、街道、写字楼',
save: '保存'
}
export const lang = {
//title为每个页面的标题
title: '编辑收货地址',
consignee: '姓名',
consigneePlaceholder: '收货人姓名',
mobile: '手机',
mobilePlaceholder: '收货人手机号',
telephone: '电话',
telephonePlaceholder: '收货人固定电话(选填)',
receivingCity: '地区',
address: '详细地址',
house:'门牌号',
housePlaceholder:'请输入楼层门牌号',
addressPlaceholder: '小区、街道、写字楼',
save: '保存'
}

View File

@@ -1,51 +1,51 @@
export const lang = {
//title为每个页面的标题
title: '会员中心',
login: '登录/注册',
loginTpis: '点击登录 享受更多精彩信息',
memberLevel: '会员等级',
moreAuthority: '更多权限',
allOrders: '全部订单',
seeAllOrders: '查看全部订单',
waitPay: '待付款',
readyDelivery: '待发货',
waitDelivery: '待收货',
refunding: '退款',
// 会员中心入口
sign: '签到',
personInfo: '个人资料',
receivingAddress: '收货地址',
accountList: '账户列表',
couponList: '优惠券',
mySpellList: '我的拼单',
myBargain: '我的砍价',
virtualCode: '虚拟码',
winningRecord: '我的礼品',
myCollection: '我的关注',
myTracks: '我的足迹',
pintuanOrder: '拼团订单',
yushouOrder: '预售订单',
verification: '核销台',
message: '我的消息',
exchangeOrder: '积分兑换',
waitpay:'待付款',
waitsend:'待发货',
waitconfirm:'待收货',
activist:'售后',
completed:'已完成',
// 推广中心
balance: '余额',
point: '积分',
coupon: '优惠券',
memberRecommend: '邀请有礼',
myPresale: '我的预售',
myGiftcard: '我的礼品卡',
myDivideticket: '我的瓜分券',
myRebate:'拼团返利',
myHongbao:'我的红包列表',
myBlindBox:'我的盲盒',
}
export const lang = {
//title为每个页面的标题
title: '会员中心',
login: '立即登录',
loginTpis: '点击登录 享受更多精彩信息',
memberLevel: '会员等级',
moreAuthority: '更多权限',
allOrders: '全部订单',
seeAllOrders: '查看全部订单',
waitPay: '待付款',
readyDelivery: '待发货',
waitDelivery: '待收货',
refunding: '退款',
// 会员中心入口
sign: '签到',
personInfo: '个人资料',
receivingAddress: '收货地址',
accountList: '账户列表',
couponList: '优惠券',
mySpellList: '我的拼单',
myBargain: '我的砍价',
virtualCode: '虚拟码',
winningRecord: '我的礼品',
myCollection: '我的关注',
myTracks: '我的足迹',
pintuanOrder: '拼团订单',
yushouOrder: '预售订单',
verification: '核销台',
message: '我的消息',
exchangeOrder: '积分兑换',
waitpay:'待付款',
waitsend:'待发货',
waitconfirm:'待收货',
activist:'售后',
completed:'已完成',
// 推广中心
balance: '余额',
point: '积分',
coupon: '优惠券',
memberRecommend: '邀请有礼',
myPresale: '我的预售',
myGiftcard: '我的礼品卡',
myDivideticket: '我的瓜分券',
myRebate:'拼团返利',
myHongbao:'我的红包列表',
myBlindBox:'我的盲盒',
}

View File

@@ -1,13 +1,14 @@
export const lang = {
//title为每个页面的标题
title: '订单列表',
emptyTips: '暂无相关订单',
all: '全部',
waitPay: '待付款',
readyDelivery: '待发货',
waitDelivery: '待收货',
waitEvaluate: '待评价',
waitUse: '待使用',
update: "释放刷新",
updateIng: "加载中..."
}
export const lang = {
//title为每个页面的标题
title: '订单列表',
emptyTips: '暂无相关订单',
all: '全部',
waitPay: '待付款',
readyDelivery: '待发货',
waitDelivery: '待收货',
waitEvaluate: '待评价',
waitUse: '待使用',
update: "释放刷新",
updateIng: "加载中...",
toLogin: "去登录"
}

View File

@@ -38,12 +38,15 @@ Vue.mixin(globalConfig);
App.mpType = 'app';
// 重写存储,增加前缀
uniStorage();
Util.rewriteUniStorageMethod();
//常用组件
import loadingCover from '@/components/loading-cover/loading-cover.vue';
Vue.component('loading-cover', loadingCover);
import nsMpHtml from '@/components/ns-mp-html/ns-mp-html.vue';
Vue.component('ns-mp-html', nsMpHtml);
import nsEmpty from '@/components/ns-empty/ns-empty.vue';
Vue.component('ns-empty', nsEmpty);

View File

@@ -63,7 +63,9 @@
"urlCheck" : false,
"postcss" : false,
"es6" : true,
"minified" : true
"minified" : true,
"codeSigning" : true,
"uglifyFileName" : true
},
"usingComponents" : true,
"permission" : {
@@ -108,7 +110,7 @@
},
"optimization" : {
"treeShaking" : {
"enable" : false
"enable" : true
}
},
"domain" : " ",

1951
pages.json

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,20 @@
<template>
<view class="container">
<web-view src="https://dify.aigc-quickapp.com/chatbot/ILbr8HHEgpBW2ggp"></web-view>
</view>
</template>
<script>
export default {
onLoad() {
console.log('Dify 聊天页已加载')
}
}
</script>
<style>
.container {
width: 100%;
height: 100vh;
}
</style>

View File

@@ -14,13 +14,13 @@
<view class="dite-button" @click="officialAccountsOpen">关注公众号</view>
</view>
<!-- <view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="false"/>
</view> -->
</view>
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl" :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
<template v-slot:components>
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true" :followOfficialAccount="followOfficialAccount"/>
<diy-group ref="diyGroup" v-if="diyData.value" :refresh="refresh" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true" :followOfficialAccount="followOfficialAccount"/>
</template>
<template v-slot:default>
<ns-copyright v-show="isShowCopyRight"/>
@@ -94,26 +94,27 @@
<!-- 选择门店弹出框定位当前位置展示最近的一个门店 -->
<view @touchmove.prevent.stop class="choose-store">
<uni-popup ref="chooseStorePopup" type="center" :maskClick="false" class="choose-store">
<view class="choose-store-popup">
<view class="head-wrap" @click="closeChooseStorePopup">请确认门店</view>
<view class="choose-store-popup" v-if="currentStore">
<view class="head-wrap">请确认门店</view>
<view class="position-wrap">
<text class="iconfont icon-dizhi"></text>
<text class="address">{{ currentPosition }}</text>
<view class="reposition" @click="reposition" v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
<text class="address">{{ currentPosition || currentStore.show_address }}</text>
<view class="reposition" @click="reGetLocation" v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
<text class="iconfont icon-dingwei"></text>
<text>重新定位</text>
</view>
</view>
<view class="store-wrap" v-if="nearestStore">
<view class="store-wrap" v-if="currentStore">
<text class="tag">当前门店</text>
<view class="store-name">{{ nearestStore.store_name }}</view>
<view class="address">{{ nearestStore.show_address }}</view>
<view class="distance" v-if="nearestStore.distance">
<view class="store-name">{{ currentStore.store_name }}</view>
<view class="store-close-desc" v-if="currentStore.status == 0 && currentStore.close_desc">{{ currentStore.close_desc }}</view>
<view class="address">{{ currentStore.show_address }}</view>
<view class="distance" v-if="currentStore.distance">
<text class="iconfont icon-dizhi"></text>
<text>{{ nearestStore.distance > 1 ? nearestStore.distance + 'km' : nearestStore.distance * 1000 + 'm' }}</text>
<text>{{ currentStore.distance > 1 ? currentStore.distance + 'km' : currentStore.distance * 1000 + 'm' }}</text>
</view>
</view>
<button type="primary" @click="enterStore">确认进入</button>
<button type="primary" @click="closeChooseStorePopup">确认进入</button>
<view class="other-store" @click="chooseOtherStore" v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
<text>选择其他门店</text>
<text class="iconfont icon-right"></text>
@@ -121,12 +122,34 @@
</view>
</uni-popup>
</view>
<hover-nav></hover-nav>
<!-- 连锁门店未开启定位或定位失败弹框 -->
<view @touchmove.prevent.stop class="chain-stores">
<uni-popup ref="getLocationFailRef" type="bottom" :maskClick="false" class="choose-store">
<view class="chain-store-popup">
<view class="title">获取位置失败</view>
<view class="body">
<view class="center">
<view class="image">
<image width="341rpx" :src="$util.img('public/uniapp/index/no_location_tips.png')" mode="aspectFit"/>
</view>
<view class="text-top">系统暂时定位不到您的位置</view>
<view class="text-bottom" v-if="mapConfig.wap_is_open == 1">请确认定位服务已经打开或者您可手动选择附近的门店以便我们提供更精确的服务</view>
<view class="text-bottom" v-else>请手动选择附近的门店以便我们提供更精确的服务</view>
<view class="footer">
<button :type="mapConfig.wap_is_open == 1?'default':'primary'" @click="chooseStore">选择门店</button>
<button v-if="mapConfig.wap_is_open == 1" type="primary" class="btn-right" @click="openSetting">开启定位</button>
</view>
</view>
</view>
</view>
</uni-popup>
</view>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<ns-login ref="login"></ns-login>
</view>
</template>
@@ -136,8 +159,8 @@
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
import diyJs from '@/common/js/diy.js';
import indexJs from './public/js/index.js';
import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js';
import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js';
export default {
@@ -146,8 +169,31 @@
nsNavbar,
toTop
},
mixins: [diyJs, scroll, indexJs]
mixins: [diyJs, scroll, indexJs],
methods: {
// 新增:电话按钮点击事件-弹出对话框
openCallDialog() {
uni.showModal({
title: "拨打?【仅为模拟】", // 弹窗标题
content: "", // 弹窗内容(可留空)
confirmText: "确定", // 确定按钮文字
cancelText: "取消", // 取消按钮文字
success: (res) => {
if (res.confirm) {
// 点击“确定”后的操作(比如实际拨号)
uni.makePhoneCall({
phoneNumber: "13800138000" // 替换为实际要拨打的号码
});
} else if (res.cancel) {
// 点击“取消”后的操作(可留空)
console.log('用户取消拨打');
}
}
});
}
}
};
</script>
<style lang="scss">
@@ -227,6 +273,14 @@
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important;
}
/deep/ .chain-stores .uni-popup__mask{
backdrop-filter: blur(10rpx);
}
/deep/ .chain-stores .uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box, .uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box{
max-height: 100vh !important;
}
/deep/ .mescroll-totop {
right: 24rpx!important;

View File

@@ -3,7 +3,8 @@ export default {
return {
minScrollTop: 100, // 设置回到顶端按钮显示要求,最小页面滚动距离
wechatQrcode: '', // 公众号二维码
diyRoute: '/pages/index/index'
diyRoute: '/pages/index/index',
refresh:false,
};
},
onLoad(option) {
@@ -41,6 +42,9 @@ export default {
if (this.unsubscribe) this.unsubscribe();
},
methods: {
changeCategoryNav(e){
if(e == 0) this.refresh = !this.refresh;
},
// 关注公众号
getFollowQrcode() {
if (!this.$util.isWeiXin()) return;

View File

@@ -1,127 +1,127 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img">
<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true"/>
</view>
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl" :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true"/>
<ns-copyright v-show="isShowCopyRight"/>
</diy-index-page>
<view v-else class="bg-index" :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"/>
<ns-copyright v-show="isShowCopyRight"/>
<view class="foot">
<view class="item" @click="tourl('/pages_tool/agreement/contenr?type=0')">隐私协议</view>
<view class="item" @click="tourl('/pages_tool/agreement/contenr?type=1')">注册协议</view>
</view>
</view>
<template v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
<view @touchmove.prevent.stop>
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
<view class="image-wrap">
<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle" @click="uniPopupWindowFn()" mode="aspectFit"/>
</view>
<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
</uni-popup>
</view>
</template>
<!-- 底部tabBar -->
<view id="tab-bar" :class="{ hide: bottomNavHidden }" v-if="openBottomNav">
<diy-bottom-nav @callback="callback"/>
</view>
<!-- 收藏 -->
<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
<view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit"/>
<text @click="closeCollectPopupWindow">我知道了</text>
</view>
</uni-popup>
<ns-birthday-gift ref="birthdayGift"></ns-birthday-gift>
<ns-new-gift ref="nsNewGift"></ns-new-gift>
<hover-nav></hover-nav>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
import diyJs from '@/common/js/diy.js';
import indexJs from './public/js/index.js';
export default {
components: {
uniPopup,
nsNavbar
},
mixins: [diyJs, indexJs],
methods:{
tourl(url){
this.$util.redirectTo(url);
}
}
};
</script>
<style lang="scss">
@import '@/common/css/diy.scss';
.foot{
display: flex;
// position: absolute;
width: 100%;
margin-bottom: 40rpx;
.item{
width: 50%;
text-align: center;
color:#F4391c
}
}
</style>
<style scoped>
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
background: none !important;
}
/deep/.diy-index-page .uni-popup .uni-popup__wrapper-box {
border-radius: 0;
}
.choose-store>>>.goodslist-uni-popup-box {
width: 80%;
}
/deep/ .placeholder {
height: 0;
}
/deep/::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
display: none;
}
.hide {
display: none;
}
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important;
}
<template>
<page-meta :page-style="themeColor"></page-meta>
<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img">
<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="false"/>
</view>
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl" :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true"/>
<ns-copyright v-show="isShowCopyRight"/>
</diy-index-page>
<view v-else class="bg-index" :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"/>
<ns-copyright v-show="isShowCopyRight"/>
<view class="foot">
<view class="item" @click="tourl('/pages_tool/agreement/contenr?type=0')">隐私协议</view>
<view class="item" @click="tourl('/pages_tool/agreement/contenr?type=1')">注册协议</view>
</view>
</view>
<template v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
<view @touchmove.prevent.stop>
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
<view class="image-wrap">
<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle" @click="uniPopupWindowFn()" mode="aspectFit"/>
</view>
<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
</uni-popup>
</view>
</template>
<!-- 底部tabBar -->
<view id="tab-bar" :class="{ hide: bottomNavHidden }" v-if="openBottomNav">
<diy-bottom-nav @callback="callback"/>
</view>
<!-- 收藏 -->
<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
<view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit"/>
<text @click="closeCollectPopupWindow">我知道了</text>
</view>
</uni-popup>
<ns-birthday-gift ref="birthdayGift"></ns-birthday-gift>
<ns-new-gift ref="nsNewGift"></ns-new-gift>
<hover-nav></hover-nav>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
import diyJs from '@/common/js/diy.js';
import indexJs from './public/js/index.js';
export default {
components: {
uniPopup,
nsNavbar
},
mixins: [diyJs, indexJs],
methods:{
tourl(url){
this.$util.redirectTo(url);
}
}
};
</script>
<style lang="scss">
@import '@/common/css/diy.scss';
.foot{
display: flex;
// position: absolute;
width: 100%;
margin-bottom: 40rpx;
.item{
width: 50%;
text-align: center;
color:#F4391c
}
}
</style>
<style scoped>
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
background: none !important;
}
/deep/.diy-index-page .uni-popup .uni-popup__wrapper-box {
border-radius: 0;
}
.choose-store>>>.goodslist-uni-popup-box {
width: 80%;
}
/deep/ .placeholder {
height: 0;
}
/deep/::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
display: none;
}
.hide {
display: none;
}
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important;
}
</style>

View File

@@ -1,95 +1,97 @@
export default {
data() {
return {
diyRoute: '/pages/member/index'
};
},
computed: {},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.initData();
if (uni.getStorageSync('source_member')) this.$util.onSourceMember(uni.getStorageSync(
'source_member'));
}
}
},
onLoad(data) {
//刷新多语言
this.$langConfig.refresh();
uni.hideTabBar();
this.name = 'DIY_VIEW_MEMBER_INDEX';
if (data.code) {
this.$api.sendRequest({
url: '/wechat/api/wechat/authcodetoopenid',
data: {
code: data.code
},
success: res => {
if (res.code >= 0) {
if (res.data.userinfo.nickName) this.modifyNickname(res.data.userinfo.nickName);
if (res.data.userinfo.avatarUrl) this.modifyHeadimg(res.data.userinfo
.avatarUrl);
}
}
});
}
},
onShow() {
// 刷新会员数据
if (this.$refs.diyGroup) {
if (this.$refs.diyGroup.$refs.diyMemberIndex) this.$refs.diyGroup.$refs.diyMemberIndex[0].init();
if (this.$refs.diyGroup.$refs.diyMemberMyOrder) this.$refs.diyGroup.$refs.diyMemberMyOrder[0].getOrderNum();
}
},
methods: {
/**
* 查询会员信息
*/
initData() {
if (this.storeToken) {
this.$nextTick(() => {
this.$refs.nsNewGift.init();
this.$refs.birthdayGift.init();
});
}
},
/**
* 修改昵称
* @param {Object} nickName
*/
modifyNickname(nickName) {
this.$api.sendRequest({
url: '/api/member/modifynickname',
data: {
nickname: nickName
},
success: res => {
if (res.code == 0) {
this.memberInfo.nickname = nickName;
this.$store.commit('setMemberInfo', this.memberInfo);
}
}
});
},
/**
* 修改头像
*/
modifyHeadimg(headimg) {
this.$api.sendRequest({
url: '/api/member/modifyheadimg',
data: {
headimg: headimg
},
success: res => {
if (res.code == 0) {
this.memberInfo.headimg = headimg;
this.$store.commit('setMemberInfo', this.memberInfo);
}
}
});
},
},
export default {
data() {
return {
diyRoute: '/pages/member/index'
};
},
computed: {},
watch: {
storeToken: function(nVal, oVal) {
if (nVal) {
this.initData();
if (uni.getStorageSync('source_member')) this.$util.onSourceMember(uni.getStorageSync('source_member'));
}
}
},
onLoad(data) {
uni.hideTabBar();
this.name = 'DIY_VIEW_MEMBER_INDEX';
if (data.code) {
this.$api.sendRequest({
url: '/wechat/api/wechat/authcodetoopenid',
data: {
code: data.code
},
success: res => {
if (res.code >= 0) {
if (res.data.userinfo.nickName) this.modifyNickname(res.data.userinfo.nickName);
if (res.data.userinfo.avatarUrl) this.modifyHeadimg(res.data.userinfo.avatarUrl);
}
}
});
}
},
onShow() {
// 刷新会员数据
if (this.$refs.diyGroup) {
if (this.$refs.diyGroup.$refs.diyMemberIndex) this.$refs.diyGroup.$refs.diyMemberIndex[0].init();
if (this.$refs.diyGroup.$refs.diyMemberMyOrder) this.$refs.diyGroup.$refs.diyMemberMyOrder[0].getOrderNum();
}
},
methods: {
/**
* 查询会员信息
*/
initData() {
if (this.storeToken) {
this.$nextTick(() => {
let callback = () => {
// 刷新会员数据
if (this.$refs.diyGroup) {
if (this.$refs.diyGroup.$refs.diyMemberIndex) {
this.$refs.diyGroup.$refs.diyMemberIndex[0].init();
}
}
}
this.$refs.nsNewGift.init(callback);
this.$refs.birthdayGift.init(callback);
});
}
},
/**
* 修改昵称
* @param {Object} nickName
*/
modifyNickname(nickName) {
this.$api.sendRequest({
url: '/api/member/modifynickname',
data: {
nickname: nickName
},
success: res => {
if (res.code == 0) {
this.memberInfo.nickname = nickName;
this.$store.commit('setMemberInfo', this.memberInfo);
}
}
});
},
/**
* 修改头像
*/
modifyHeadimg(headimg) {
this.$api.sendRequest({
url: '/api/member/modifyheadimg',
data: {
headimg: headimg
},
success: res => {
if (res.code == 0) {
this.memberInfo.headimg = headimg;
this.$store.commit('setMemberInfo', this.memberInfo);
}
}
});
},
},
};

View File

@@ -11,12 +11,12 @@
<text v-if="orderData.promotion_status_name">{{ orderData.promotion_status_name }}</text>
</view>
<view class="desc" v-if="orderData.promotion_type == 'presale' && orderData.order_status == 1">
预计{{ $util.timeStampTurnTime(orderData.predict_delivery_time, true) }}日后发货
预计{{ $util.timeStampTurnTime(orderData.predict_delivery_time, 'Y-m-d') }}发货
</view>
<view class="desc" v-if="orderData.close_cause">订单关闭原因{{ orderData.close_cause }}</view>
</view>
</view>
<view class="order-time" v-if="orderData.order_status == 0" id="action-date">
<view class="order-time" v-if="orderData.order_status == 0 && orderData.pay_type != 'offlinepay'" id="action-date">
剩余时间
<uni-count-down :day="orderData.closeTimeMachine.d" :hour="orderData.closeTimeMachine.h"
:minute="orderData.closeTimeMachine.i" :second="orderData.closeTimeMachine.s" color="#fff"
@@ -42,7 +42,7 @@
<view class="font-size-base">送达时间</view>
<view class="last-child">{{ orderData.buyer_ask_delivery_time }}</view>
</view>
<block v-if="orderData.package_list">
<block v-if="orderData.package_list.deliverer">
<view class="pick-block">
<view>配送员</view>
<view class="last-child">{{ orderData.package_list.deliverer }}</view>
@@ -133,6 +133,10 @@
{{ i < goodsItem.sku_spec_format.length - 1 ? '; ' : '' }}
</block>
</view>
<view class="goods-num">
<text class="iconfont icon-close"></text>
<text>{{ goodsItem.num }}</text>
</view>
</view>
<view class="goods-sub-section">
<view>
@@ -142,11 +146,9 @@
<text class="unit price-style small">.{{ parseFloat(goodsItem.price).toFixed(2).split('.')[1] }}</text>
</text>
</view>
<view>
<text class="font-size-base">
<text class="iconfont icon-close"></text>
{{ goodsItem.num }}
</text>
<view v-if="orderData.order_type == 1 && orderData.order_status == 1 && goodsItem.delivery_status == 1"
class="delivery-status color-base-text">
{{goodsItem.delivery_status_name}}
</view>
</view>
<view v-if="goodsItem.card_item_id" class="goods-card">
@@ -176,15 +178,11 @@
</view>
<view class="goods-action">
<block v-if="orderData.is_enable_refund">
<view @click="goRefund(goodsItem.order_goods_id)" v-if="orderData.order_scene == 'online' && (goodsItem.refund_status == 0 || goodsItem.refund_status == -1)">
<view class="order-box-btn" v-if="orderData.promotion_type != 'blindbox'">
{{ orderData.order_status == 10 ? '申请售后' : '申请退款' }}
</view>
</view>
</block>
<view @click="goRefundDetail(goodsItem.order_goods_id)" v-if="goodsItem.refund_status != 0 && goodsItem.refund_status != -1">
<view class="order-box-btn">{{ orderData.order_status == 10 ? '查看售后' : '查看退款' }}</view>
<view class="order-box-btn" @click="goRefund(goodsItem.order_goods_id)" v-if="orderData.is_enable_refund && orderData.order_scene == 'online' && goodsItem.refund_status == 0 && orderData.promotion_type != 'blindbox'">
{{ orderData.order_status == 10 ? '申请售后' : '申请退款' }}
</view>
<view class="order-box-btn" @click="goRefundDetail(goodsItem.order_goods_id)" v-if="goodsItem.refund_status != 0">
{{ goodsItem.refund_status_name }}
</view>
</view>
</view>
@@ -319,15 +317,36 @@
<view class="box"><text class="color-base-text" @click="$util.redirectTo('/pages_promotion/cardservice/card/my_card')">查看</text></view>
</view>
</block>
<block v-if="orderData.pay_type=='offlinepay' && orderData.offline_pay_info">
<view class="hr"></view>
<view class="order-cell">
<text class="tit">支付方式</text>
<view class="box">
<text class="color-title">线下支付</text>
</view>
</view>
<view class="order-cell">
<text class="tit">支付状态</text>
<view class="box">
<text class="color-title">{{orderData.offline_pay_info.status_info.name}}</text>
</view>
</view>
<view class="order-cell remark" v-if="orderData.offline_pay_info.status_info.const=='AUDIT_REFUSE'">
<text class="tit">审核备注</text>
<view class="box">
<text class="color-title">{{orderData.offline_pay_info.audit_remark}}</text>
</view>
</view>
</block>
<!-- 联系客服 -->
<!-- <ns-contact :niushop="{ order_id: orderData.order_id }">
<ns-contact :niushop="{ order_id: orderData.order_id }">
<view class="kefu">
<view>
<text class="iconfont icon-ziyuan"></text>
<text>联系客服</text>
</view>
</view>
</ns-contact> -->
</ns-contact>
</view>
<block v-if="orderData.virtual_goods && orderData.goods_class == 2 && orderData.virtual_goods.is_veirfy == 0">
@@ -362,7 +381,7 @@
</view>
</view>
</view>
<view class="verify-info-wrap">
<view class="head">核销记录</view>
<view v-if="orderData.virtual_goods.verify_record.length">
@@ -598,8 +617,7 @@
</view>
<!-- 订单 -->
<view class="fixed-bottom-box bottom-safe-area" v-if="orderData.action.length > 0 || (orderData.is_evaluate == 1 && evaluateConfig.evaluate_status == 1)">
</view>
<view class="fixed-bottom-box bottom-safe-area" v-if="orderData.action.length > 0 || (orderData.is_evaluate == 1 && evaluateConfig.evaluate_status == 1)"></view>
<ns-goods-recommend ref="goodrecommend" route="order_detail"></ns-goods-recommend>
<!-- 选择支付方式弹窗 -->
@@ -646,6 +664,12 @@
if (option.order_id) this.orderId = option.order_id;
if (option.merchant_trade_no) this.merchantTradeNo = option.merchant_trade_no;
},
onPullDownRefresh() {
this.getOrderData();
setTimeout(function () {
uni.stopPullDownRefresh();
}, 50);
},
onShow() {
this.isIphoneX = this.$util.uniappIsIPhoneX();
@@ -657,6 +681,7 @@
back: '/pages/order/detail?order_id=' + this.orderId + '&merchant_trade_no=' + this.merchantTradeNo
});
}
if(this.$refs.choosePaymentPopup) this.$refs.choosePaymentPopup.pageShow()
},
methods: {
goDetail(e) {
@@ -733,11 +758,20 @@
/**
* 下拉刷新
*/
onPullDownRefresh() {
this.getOrderData();
},
operation(action) {
switch (action) {
case 'orderDelete':
this.orderDelete(this.orderData.order_id, () => {
setTimeout(()=>{
if (getCurrentPages().length == 1) {
this.$util.redirectTo('/pages/member/index')
} else {
uni.navigateBack();
}
},500)
});
break;
case 'orderPay': // 支付
this.orderPay(this.orderData);
break;
@@ -772,6 +806,11 @@
this.getOrderData();
});
break;
case 'orderOfflinePay':
this.$util.redirectTo('/pages_tool/pay/offlinepay', {
outTradeNo: this.orderData.out_trade_no
});
break;
}
},
imageError(index) {

View File

@@ -80,14 +80,14 @@
</view>
</view>
<!-- 联系客服 -->
<!-- <ns-contact :niushop="{ order_id: orderData.order_id }">
<ns-contact :niushop="{ order_id: orderData.order_id }">
<view class="kefu">
<view>
<text class="iconfont icon-ziyuan"></text>
<text>联系客服</text>
</view>
</view>
</ns-contact> -->
</ns-contact>
</view>
<!-- 订单金额 -->
@@ -127,8 +127,7 @@
<ns-goods-recommend ref="goodrecommend" route="order_detail"></ns-goods-recommend>
<!-- 选择支付方式弹窗 -->
<ns-payment ref="choosePaymentPopup" :payMoney="orderData.order_money"
@confirm="orderPay(orderData)"></ns-payment>
<ns-payment ref="choosePaymentPopup" :payMoney="orderData.order_money" @confirm="orderPay(orderData)"></ns-payment>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>

View File

@@ -1,7 +1,7 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="order-container">
<view class="cate-search">
<view class="cate-search" v-if="storeToken">
<view class="search-box">
<input class="uni-input" maxlength="50" v-model="searchText" confirm-type="search" placeholder="请输入商品名称/订单编号" @confirm="search()" />
<text class="iconfont icon-sousuo3" @click="search()"></text>
@@ -18,137 +18,138 @@
<!-- #ifdef MP -->
<mescroll-uni ref="mescroll" @getData="getListData" top="176rpx" v-if="storeToken">
<!-- #endif -->
<!-- #ifndef MP -->
<mescroll-uni ref="mescroll" @getData="getListData" top="196rpx" v-if="storeToken">
<!-- #endif -->
<block slot="list">
<view class="order-list" v-if="orderList.length > 0">
<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
<view class="order-header" :class="{ waitpay: orderStatus == 'waitpay' && orderItem.order_status == 0 }">
<!-- <view class="iconfont"
:class="$util.inArray(orderItem.order_id, mergePayOrder) == -1 ? 'icon-yuan_checkbox' : 'icon-yuan_checked color-base-text'"
@click="selectOrder(orderItem.order_id, orderItem.pay_money)"
v-if="orderStatus == 'waitpay' && orderItem.order_status == 0"></view> -->
<text class="order-no">订单号{{ orderItem.order_no }}</text>
<text class="order-type-name">{{ orderItem.order_type_name }}</text>
<text class="status-name">{{ orderItem.order_status_name }}</text>
</view>
<view class="order-body" @click="orderDetail(orderItem)">
<block v-if="orderItem.order_goods.length == 1">
<view class="goods-wrap" v-for="(goodsItem, goodsIndex) in orderItem.order_goods" :key="goodsIndex">
<view class="goods-img">
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(orderIndex, goodsIndex)" mode="aspectFill" :lazy-load="true"/>
</view>
<view class="goods-info">
<view class="pro-info">
<view class="goods-name" v-if="goodsItem.goods_class == 2">{{ goodsItem.goods_name }}</view>
<view class="goods-name" v-else>{{ goodsItem.sku_name }}</view>
<view class="sku" v-if="goodsItem.sku_spec_format">
<view class="goods-spec">
<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
{{ x.spec_value_name }}
{{ i < goodsItem.sku_spec_format.length - 1 ? '; ' : '' }}
</block>
</view>
<!-- #ifndef MP -->
<mescroll-uni ref="mescroll" @getData="getListData" top="196rpx" v-if="storeToken">
<!-- #endif -->
<block slot="list">
<view class="order-list" v-if="orderList.length > 0">
<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
<view class="order-header" :class="{ waitpay: orderStatus == 'waitpay' && orderItem.order_status == 0 }">
<!-- <view class="iconfont"
:class="$util.inArray(orderItem.order_id, mergePayOrder) == -1 ? 'icon-yuan_checkbox' : 'icon-yuan_checked color-base-text'"
@click="selectOrder(orderItem.order_id, orderItem.pay_money)"
v-if="orderStatus == 'waitpay' && orderItem.order_status == 0"></view> -->
<text class="order-no">订单号{{ orderItem.order_no }}</text>
<text class="order-type-name">{{ orderItem.order_type_name }}</text>
<text class="status-name">{{ orderItem.order_status_name }}</text>
</view>
<view class="order-body" @click="orderDetail(orderItem)">
<block v-if="orderItem.order_goods.length == 1">
<view class="goods-wrap" v-for="(goodsItem, goodsIndex) in orderItem.order_goods" :key="goodsIndex">
<view class="goods-img">
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(orderIndex, goodsIndex)" mode="aspectFill" :lazy-load="true"/>
</view>
<view class="goods-info">
<view class="pro-info">
<view class="goods-name" v-if="goodsItem.goods_class == 2">{{ goodsItem.goods_name }}</view>
<view class="goods-name" v-else>{{ goodsItem.sku_name }}</view>
<view class="sku" v-if="goodsItem.sku_spec_format">
<view class="goods-spec">
<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
{{ x.spec_value_name }}
{{ i < goodsItem.sku_spec_format.length - 1 ? '; ' : '' }}
</block>
</view>
</view>
<!-- <view class="goods-sub-section">
<text class="goods-price">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price-style large">{{ parseFloat(goodsItem.price).toFixed(2).split(".")[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(goodsItem.price).toFixed(2).split(".")[1] }}</text>
</text>
<text class="goods-num">
<text class="iconfont icon-close"></text>
{{ goodsItem.num }}
</text>
</view> -->
<view class="goods-action"><!-- <view class="action-btn">加购物车</view> -->
</view>
</view>
</view>
</block>
<block v-else>
<view class="multi-order-goods">
<scroll-view scroll-x="true" class="scroll-view">
<view class="goods-wrap">
<view class="goods-img" v-for="(goodsItem, goodsIndex) in orderItem.order_goods" :key="goodsIndex">
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(orderIndex, goodsIndex)" mode="aspectFill" :lazy-load="true"/>
</view>
</view>
</scroll-view>
<view class="shade">
<image :src="$util.img('public/uniapp/order/order-shade.png')"></image>
</view>
</view>
</block>
</view>
<view class="order-footer">
<view class="order-base-info">
<view class="total">
<text class="font-size-sub">{{ orderItem.goods_num }}件商品</text>
<text class="align-right font-size-base">
实付款
<text class="font-size-base price-font">{{ $lang('common.currencySymbol') }}{{ orderItem.order_money }}</text>
<!-- <view class="goods-sub-section">
<text class="goods-price">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price-style large">{{ parseFloat(goodsItem.price).toFixed(2).split(".")[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(goodsItem.price).toFixed(2).split(".")[1] }}</text>
</text>
<text class="goods-num">
<text class="iconfont icon-close"></text>
{{ goodsItem.num }}
</text>
</view> -->
<view class="goods-action"><!-- <view class="action-btn">加购物车</view> -->
</view>
</view>
</view>
<view class="order-action" v-if="orderItem.action.length > 0">
<view class="order-time" v-if="orderItem.order_status == 0" id="action-date">
<image :src="$util.img('public/uniapp/order/time.png')"></image>
剩余时间
<uni-count-down :day="orderItem.discountTimeMachine.d"
:hour="orderItem.discountTimeMachine.h"
:minute="orderItem.discountTimeMachine.i"
:second="orderItem.discountTimeMachine.s" color="#FF4644"
splitorColor="#FF4644" />
</view>
<view class="order-box-btn"
v-if="evaluateConfig.evaluate_status == 1 && orderItem.is_evaluate == 1"
@click="operation('memberOrderEvaluation', orderItem)">
<text v-if="orderItem.evaluate_status == 0">评价</text>
<text v-else-if="orderItem.evaluate_status == 1">追评</text>
</view>
<view class="order-box-btn"
:class="{ 'color-base-border color-base-bg': operationItem.action == 'orderPay' }"
v-for="(operationItem, operationIndex) in orderItem.action"
:key="operationIndex" @click="operation(operationItem.action, orderItem)">
{{ operationItem.title }}
</block>
<block v-else>
<view class="multi-order-goods">
<scroll-view scroll-x="true" class="scroll-view">
<view class="goods-wrap">
<view class="goods-img" v-for="(goodsItem, goodsIndex) in orderItem.order_goods" :key="goodsIndex">
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(orderIndex, goodsIndex)" mode="aspectFill" :lazy-load="true"/>
</view>
</view>
</scroll-view>
<view class="shade">
<image :src="$util.img('public/uniapp/order/order-shade.png')"></image>
</view>
</view>
<view class="order-action" v-else-if="orderItem.action.length == 0 && orderItem.is_evaluate == 1 && evaluateConfig.evaluate_status == 1">
<view class="order-box-btn" v-if="orderItem.is_evaluate == 1" @click="operation('memberOrderEvaluation', orderItem)">
<text v-if="orderItem.evaluate_status == 0">评价</text>
<text v-else-if="orderItem.evaluate_status == 1">追评</text>
</view>
</block>
</view>
<view class="order-footer">
<view class="order-base-info">
<view class="total">
<text class="font-size-sub">{{ orderItem.goods_num }}件商品</text>
<text class="align-right font-size-base">
实付款
<text class="font-size-base price-font">{{ $lang('common.currencySymbol') }}{{ orderItem.order_money }}</text>
</text>
</view>
<view class="order-action" v-else>
<view class="order-box-btn" @click="orderDetail(orderItem)">查看详情</view>
</view>
<view class="order-action" v-if="orderItem.action.length > 0">
<view class="order-time" v-if="orderItem.order_status == 0 && orderItem.pay_type !== 'offlinepay'" id="action-date">
<image :src="$util.img('public/uniapp/order/time.png')"></image>
剩余时间
<uni-count-down :day="orderItem.discountTimeMachine.d"
:hour="orderItem.discountTimeMachine.h"
:minute="orderItem.discountTimeMachine.i"
:second="orderItem.discountTimeMachine.s" color="#FF4644"
splitorColor="#FF4644" />
</view>
<view class="order-box-btn"
v-if="evaluateConfig.evaluate_status == 1 && orderItem.is_evaluate == 1"
@click="operation('memberOrderEvaluation', orderItem)">
<text v-if="orderItem.evaluate_status == 0">评价</text>
<text v-else-if="orderItem.evaluate_status == 1">追评</text>
</view>
<view class="order-box-btn"
:class="{ 'color-base-border color-base-bg': operationItem.action == 'orderPay' }"
v-for="(operationItem, operationIndex) in orderItem.action"
:key="operationIndex" @click="operation(operationItem.action, orderItem)">
{{ operationItem.title }}
</view>
</view>
<view class="order-action" v-else-if="orderItem.action.length == 0 && orderItem.is_evaluate == 1 && evaluateConfig.evaluate_status == 1">
<view class="order-box-btn" v-if="orderItem.is_evaluate == 1" @click="operation('memberOrderEvaluation', orderItem)">
<text v-if="orderItem.evaluate_status == 0">评价</text>
<text v-else-if="orderItem.evaluate_status == 1">追评</text>
</view>
</view>
<view class="order-action" v-else>
<view class="order-box-btn" @click="orderDetail(orderItem)">查看详情</view>
</view>
</view>
</view>
<view v-else><ns-empty :isIndex="false" :text="$lang('emptyTips')"></ns-empty></view>
</block>
</mescroll-uni>
</view>
<view v-else><ns-empty :isIndex="false" :text="$lang('emptyTips')"></ns-empty></view>
</block>
</mescroll-uni>
<view v-if="!storeToken" class="no-login">
<view><ns-empty :isIndex="false" :text="$lang('emptyTips')"></ns-empty></view>
<button type="primary" size="mini" class="button mini" @click="toLogin">去登录</button>
</view>
<!-- <view class="order-batch-action" :class="{ 'bottom-safe-area': isIphoneX }" v-if="mergePayOrder.length">
<view class="action-btn color-base-text color-base-border" @click="mergePay()">合并付款</view>
</view> -->
<!-- 选择支付方式弹窗 -->
<payment ref="choosePaymentPopup"></payment>
<!-- 选择支付方式弹窗 -->
<ns-payment ref="choosePaymentPopup"></ns-payment>
<ns-payment ref="choosePaymentMergePopup"></ns-payment>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
<ns-login ref="login"></ns-login>
<loading-cover ref="loadingCover"></loading-cover>
</view>
</template>
<script>
import orderMethod from './public/js/orderMethod.js';
import nsPayment from '@/components/payment/payment.vue';
import payment from '@/components/payment/payment.vue';
export default {
data() {
@@ -176,7 +177,7 @@
};
},
components: {
nsPayment
payment
},
mixins: [orderMethod],
onLoad(option) {
@@ -192,14 +193,19 @@
if (this.$refs.mescroll) this.$refs.mescroll.refresh();
} else {
this.$nextTick(() => {
this.$refs.login.open('/pages/order/list?status=' + this.orderStatus);
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
// this.$refs.login.open('/pages/order/list?status=' + this.orderStatus);
})
}
if(this.$refs.choosePaymentPopup) this.$refs.choosePaymentPopup.pageShow()
},
onUnload() {
if (!this.storeToken && this.$refs.login) this.$refs.login.cancelCompleteInfo();
},
methods: {
toLogin() {
this.$refs.login.open();
},
ontabtap(e) {
let index = e.target.dataset.current || e.currentTarget.dataset.current;
this.orderStatus = this.statusList[index].status;
@@ -208,7 +214,7 @@
this.$refs.mescroll.refresh();
},
getListData(mescroll) {
this.$api.sendRequest({
url: '/api/order/lists',
data: {
@@ -268,39 +274,39 @@
getOrderStatus() {
this.statusList = [{
status: 'all',
name:'全部',
name: this.$lang('all'),
id: 'status_0'
},
{
status: 'waitpay',
name: '待付款',
name: this.$lang('waitPay'),
id: 'status_1'
},
{
status: 'waitsend',
name: '待发货',
name: this.$lang('readyDelivery'),
id: 'status_2'
},
{
status: 'waitconfirm',
name: '待收货',
name: this.$lang('waitDelivery'),
id: 'status_3'
},
{
status: 'waitrate',
name: '已完成',
id: 'status_4'
},
/*{
status: 'wait_use',
name: '待使用',
name: this.$lang('waitUse'),
id: 'status_4'
}*/
}
];
},
operation(action, orderData) {
let index = this.status;
switch (action) {
case 'orderDelete':
this.orderDelete(orderData.order_id, () => {
this.$refs.mescroll.refresh();
});
break;
case 'orderPay': // 支付
this.orderData = orderData;
this.payMoney = parseFloat(orderData.pay_money);
@@ -339,34 +345,18 @@
this.$refs.mescroll.refresh();
});
break;
case 'orderOfflinePay':
this.orderData = orderData;
this.$util.redirectTo('/pages_tool/pay/offlinepay', {
outTradeNo: this.orderData.out_trade_no
});
break;
}
},
orderDetail(data) {
switch (parseInt(data.order_type)) {
case 2:
// 自提订单
this.$util.redirectTo('/pages/order/detail_pickup', {
order_id: data.order_id
});
break;
case 3:
// 本地配送订单
this.$util.redirectTo('/pages/order/detail_local_delivery', {
order_id: data.order_id
});
break;
case 4:
// 虚拟订单
this.$util.redirectTo('/pages_tool/order/detail_virtual', {
order_id: data.order_id
});
break;
default:
this.$util.redirectTo('/pages/order/detail', {
order_id: data.order_id
});
break;
}
this.$util.redirectTo('/pages/order/detail', {
order_id: data.order_id
});
},
/**
* 选择订单
@@ -381,28 +371,6 @@
this.mergePayOrder.push(orderId);
}
},
/**
* 合并支付
*/
mergePay() {
if (this.mergePayOrder.length) {
this.$api.sendRequest({
url: '/api/order/pay',
data: {
order_ids: this.mergePayOrder.toString()
},
success: res => {
if (res.code >= 0) {
this.$refs.choosePaymentMergePopup.getPayInfo(res.data);
} else {
this.$util.showToast({
title: res.message
});
}
}
});
}
},
imageError(orderIndex, goodsIndex) {
this.orderList[orderIndex].order_goods[goodsIndex].sku_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
@@ -450,4 +418,18 @@
/deep/ .mescroll-upwarp {
padding-bottom: 100rpx;
}
.no-login{
display: flex;
flex-direction: column;
align-items: center;
}
.no-login .button{
width: 300rpx;
margin-top: 100rpx;
height: 70rpx;
line-height: 70rpx !important;
font-size: 28rpx;
border-radius: 50rpx;
}
</style>

View File

@@ -435,7 +435,7 @@ view {
line-height: 1.3;
display: flex;
margin-top: 20rpx;
align-items: center;
.goods-price {
font-weight: 700;
font-size: $font-size-activity-tag;
@@ -525,7 +525,9 @@ view {
align-items: center;
background: #fff;
line-height: 40rpx;
&.remark{
align-items: flex-start !important;
}
.tit {
text-align: left;
}
@@ -847,7 +849,13 @@ view {
white-space: nowrap;
flex: 1;
}
.goods-num{
font-size: 22rpx;
margin-left: 20rpx;
}
.delivery-status{
line-height: 1.3;
}
.fixed-bottom {
width: 100%;
position: fixed;

View File

@@ -1,5 +1,36 @@
export default {
methods: {
/**
* 删除订单
* @param {Object} orderData
*/
orderDelete(order_id, callback) {
uni.showModal({
title: '提示',
content: '您确定要删除该订单吗?',
success: res => {
if (res.confirm) {
this.$api.sendRequest({
url: '/api/order/delete',
data: {
order_id
},
success: res => {
if (res.code >= 0) {
this.$util.showToast({title:'删除订单成功'})
typeof callback == 'function' && callback();
} else {
this.$util.showToast({
title: '删除订单失败,' + res.message,
duration: 2000
})
}
}
})
}
}
})
},
/**
* 订单支付
* @param {Object} orderData
@@ -57,8 +88,7 @@ export default {
typeof callback == 'function' && callback();
} else {
this.$util.showToast({
title: '当前订单可能存在拼团,维权等操作' + res.message +
'不可以关闭哦!',
title: '关闭失败' + res.message,
duration: 2000
})
}

View File

@@ -0,0 +1,471 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="bargain">
<view class="bargain_top" :style="{ backgroundImage: 'url(' + $util.img('public/uniapp/bargain/bargain_background.png') + ')' }">
<view>{{ goodsDetail ? goodsDetail.browse_num : 0 }}人查看</view>
<view>|</view>
<view>{{ goodsDetail ? goodsDetail.share_num : 0 }}人分享</view>
<view>|</view>
<view>{{ goodsDetail ? goodsDetail.join_num : 0 }}人参与</view>
</view>
<view class="rule-mark-enter" @click="openRulePopup">活动规则</view>
<view class="bargin_content">
<view class="uer_info_base" v-if="launchInfo">
<view class="user_info_img">
<image :src="launchInfo.headimg == '' ? $util.img($util.getDefaultImage().head) : $util.img(launchInfo.headimg)" mode="widthFix"></image>
</view>
<text class="user_info_name">{{ launchInfo.nickname }}</text>
</view>
<!-- 宣传语 -->
<view class="bargin_propaganda" v-if="launchInfo">
<text class="marks"></text>
<text>我发现一件好物快来帮我砍一刀</text>
<text class="marks"></text>
</view>
<!-- 商品 -->
<view class="goods" v-if="goodsDetail">
<view class="goods_img"><image :src="$util.img(goodsDetail.sku_image, { size: 'mid' })" mode="aspectFit"></image></view>
<view class="goods_content" v-if="launchInfo">
<view class="goods_title">{{ goodsDetail.sku_name }}</view>
<view class="goods_price">
<view>
原价
<text class="original_price">{{ $lang('common.currencySymbol') }}{{ launchInfo.price }}</text>
</view>
<view>
最低可砍至
<text class="bottom_price">{{ $lang('common.currencySymbol') }}{{ launchInfo.floor_price }}</text>
</view>
</view>
<view class="partake_num" v-if="launchInfo">
已有
<text class="ident">{{ launchInfo.curr_num }}</text>
人帮砍
<text class="residue-num">
剩余库存
<text class="ident">{{ goodsDetail.bargain_stock }}{{ goodsDetail.unit }}</text>
</text>
</view>
<view v-if="launchInfo && timeMachine && goodsDetail.bargain_status == 1" class="count-down">
<uni-count-down
:day="timeMachine.d"
:hour="timeMachine.h"
:minute="timeMachine.i"
:second="timeMachine.s"
color="#fff"
splitorColor="#333 !important"
backgroundColor="#000"
border-color="transparent"
@timeup="timeUp()"
></uni-count-down>
<text>后结束</text>
</view>
</view>
<view class="goods_content launch" v-else>
<view class="goods_title">{{ goodsDetail.sku_name }}</view>
<view class="goods_price">
<view>
原价
<text class="original_price price-font">
<text class="price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style small">{{ parseFloat(goodsDetail.price).toFixed(2).split('.')[0] }}</text>
<text class="price-symbol price-style small">.{{ parseFloat(goodsDetail.price).toFixed(2).split('.')[1] }}</text>
</text>
</view>
<view>
最低可砍至
<text class="bottom_price price-style small">{{ $lang('common.currencySymbol') }}{{ goodsDetail.floor_price }}</text>
</view>
</view>
</view>
</view>
<!-- 进度 -->
<view class="progress">
<view class="progress_item" :style="{ width: (progress > 2 ? progress : 2) + '%' }"><text class="icon-futou iconfont"></text></view>
<view class="progress-point"></view>
</view>
<view class="info-bottom" v-if="goodsDetail">
<view class="price-box" v-if="launchInfo">
<view class="discount-price">
已砍
<text class="price price-font">
{{ $lang('common.currencySymbol') }}{{ parseFloat(parseFloat(launchInfo.price) - parseFloat(launchInfo.curr_price)).toFixed(2) }}
</text>
</view>
<view class="delete-price ">
还剩
<text class="price price-font">
{{ $lang('common.currencySymbol')
}}{{
parseFloat(
parseFloat(launchInfo.price) - parseFloat(launchInfo.floor_price) - (parseFloat(launchInfo.price) - parseFloat(launchInfo.curr_price))
).toFixed(2)
}}
</text>
</view>
</view>
<view class="price-box" v-else>
<view class="discount-price">
已砍
<text class="price price-font">{{ $lang('common.currencySymbol') }}0</text>
</view>
<view class="delete-price ">
还剩
<text class="price price-font">
{{ $lang('common.currencySymbol') }} {{ parseFloat(parseFloat(goodsDetail.price) - parseFloat(goodsDetail.floor_price)).toFixed(2) }}
</text>
</view>
</view>
<view class="pro-info" v-if="!parseFloat(goodsDetail.floor_price)"><view class="button-border">免费拿</view></view>
</view>
<!-- 邀请新用户 -->
<view class="invitation_peo" v-if="launchInfo">
<!-- <view class="tip">邀请新用户砍掉金额更多哦~</view> -->
<block v-if="launchInfo.self">
<view class="bargain-success" v-if="launchInfo.status == 1">
<text class="iconfont icon-kanjiachenggong"></text>
<text>恭喜您砍价成功快去支付吧</text>
</view>
<view class="bargain-success" v-if="launchInfo.status == 2">
<text class="iconfont icon-biaoqing_nanguo"></text>
<text v-if="launchInfo.buy_type == 0 && launchInfo.order_id == 0">很遗憾未能砍至最低价可立即支付带走您心仪的宝贝</text>
<text v-else-if="launchInfo.buy_type == 0 && launchInfo.order_id > 0">很遗憾未能砍至最低价</text>
<text v-else>很遗憾砍价未成单</text>
</view>
<view class="launch-success" v-if="launchInfo.status == 2 && launchInfo.buy_type == 0 && launchInfo.order_id > 0">恭喜您通过立即支付带走您心仪的宝贝</view>
</block>
<block v-if="goodsDetail.bargain_status == 1">
<view v-if="launchInfo.self" class="flex-box" :class="{ success: launchInfo.status == 1 }">
<block v-if="launchInfo.status != 1 && (goodsDetail.bargain_status != 1 || goodsDetail.bargain_stock == 0)">
<block v-if="goodsDetail.bargain_status != 1">
<button class="btn-vice disabled">活动已结束</button>
<button class="btn" @click="$util.redirectTo('/pages_promotion/bargain/list')">更多砍价商品</button>
</block>
<block v-else-if="goodsDetail.bargain_stock == 0">
<button class="btn-vice disabled">已售罄</button>
<button class="btn" @click="$util.redirectTo('/pages_promotion/bargain/list')">更多砍价商品</button>
</block>
</block>
<block v-else>
<block v-if="launchInfo.status == 0">
<button class="btn-vice" v-if="launchInfo.buy_type == 0" @click="buyNow">不砍了直接买</button>
<button class="btn" @click="openSharePopup">喊好友砍一刀</button>
</block>
<block v-if="launchInfo.status == 1">
<button class="btn" @click="buyNow" v-if="launchInfo.order_id == 0">立即支付</button>
<button class="btn" v-if="launchInfo.order_id > 0" @click="$util.redirectTo('/pages/order/detail', { order_id: launchInfo.order_id })">
查看订单
</button>
<button class="btn-vice" @click="$util.redirectTo('/pages/index/index')">低价拿更多商品</button>
</block>
<block v-if="launchInfo.status == 2">
<button class="btn" v-if="launchInfo.order_id > 0" @click="$util.redirectTo('/pages/order/detail', { order_id: launchInfo.order_id })">
查看订单
</button>
<button class="btn" @click="$util.redirectTo('/pages/index/index')">低价拿更多商品</button>
</block>
</block>
</view>
<view v-else class="flex-box">
<block v-if="launchInfo.status == 0">
<button class="btn" @click="bargain" v-if="!launchInfo.cut">帮好友砍一刀</button>
<button class="btn-vice" @click="$util.redirectTo('/pages_promotion/bargain/list')" v-else>我也要低价拿</button>
</block>
<button v-else class="btn" @click="$util.redirectTo('/pages_promotion/bargain/list')">我也要低价拿</button>
</view>
</block>
<block v-else>
<view class="flex-box success">
<button class="btn" v-if="launchInfo.self && launchInfo.order_id > 0" @click="$util.redirectTo('/pages/order/detail', { order_id: launchInfo.order_id })">
查看订单
</button>
<button class="btn-vice disabled">活动已结束</button>
</view>
</block>
</view>
<view class="invitation_peo" v-else>
<view class="flex-box">
<button class="btn" v-if="goodsDetail && goodsDetail.bargain_status == 1" @click="createBargain()">立即参与砍价</button>
<button class="btn-vice disabled" v-else>活动已结束</button>
</view>
</view>
</view>
<view class="bargin_introduction" v-if="launchInfo">
<view class="bargin_introduction_title">帮砍记录</view>
<view class="bargin_introduction_content">
<view class="bargin_invitation" v-if="bargainRecord.length">
<view class="item" v-for="(item, index) in bargainRecord" :key="index">
<view class="item_left">
<image :src="item.headimg == '' ? $util.img($util.getDefaultImage().head) : $util.img(item.headimg)"></image>
<view class="bargin_info">
<view>{{ item.nickname[0] }}*{{ item.nickname[item.nickname.length - 1] }}</view>
<view>{{ $util.timeStampTurnTime(item.bargain_time) }}</view>
</view>
</view>
<view class="item_right">
<image :src="$util.img('public/uniapp/bargain/bargain-icon.png')" class="bargain-icon"></image>
帮砍
<text>{{ item.money }}</text>
</view>
</view>
<view class="item_more" v-if="showMore" @click="scrolltolower()">加载更多</view>
</view>
<view v-else class="record-empty">现在还没有砍价记录</view>
</view>
</view>
<view class="bargin_introduction">
<view class="bargin_introduction_title">砍价流程</view>
<view class="bargin_introduction_content">
<view class="flow">
<view class="flow_item">
<image :src="$util.img('public/uniapp/bargain/bargain_kanjia.png')"></image>
<view>发起商品砍价</view>
</view>
<view class="flow_item">
<image :src="$util.img('public/uniapp/bargain/bargain_friend.png')"></image>
<view>邀请好友砍价达要求</view>
</view>
<view class="flow_item">
<image :src="$util.img('public/uniapp/bargain/bargain_good.png')"></image>
<view>领取商品带回家</view>
</view>
</view>
</view>
</view>
<view class="bargin_introduction" v-if="launchList && launchList.length > 0">
<view class="bargin_introduction_title">砍成晒单</view>
<view class="bargin_introduction_content">
<view class="bargain-list">
<swiper vertical="true" autoplay="true" interval="3000" :display-multiple-items="showNum" :circular="true" :class="'swiper-' + launchList.length">
<swiper-item v-for="(item, index) in launchList" :key="index">
<view class="bargain-item">
<view>
<view class="bargain-head"><image :src="item.headimg == '' ? $util.img($util.getDefaultImage().head) : $util.img(item.headimg)"></image></view>
<view class="bargain-info">
<view class="bargain-title">{{ item.nickname[0] }}*{{ item.nickname[item.nickname.length - 1] }}</view>
<view class="bargain-desc">{{ $util.timeStampTurnTime(item.end_time) }}</view>
</view>
</view>
<view class="bargain-price">
成功砍至
<text>{{ parseFloat(item.curr_price).toFixed(2) }}</text>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view class="bargin_introduction">
<view class="bargin_introduction_title">商品详情</view>
<view class="bargin_introduction_content">
<view class="detail-content">
<view class="goods-details" v-if="goodsDetail && goodsDetail.goods_content">
<ns-mp-html :content="goodsDetail.goods_content"></ns-mp-html>
</view>
<view class="goods-details active" v-else>该商家暂无上传相关详情哦</view>
</view>
</view>
</view>
<ns-goods-sku
ref="goodsSku"
v-if="goodsDetail"
@refresh="refreshGoodsSkuDetail"
:goods-id="goodsDetail.goods_id"
:goods-detail="goodsDetail"
:maxBuy="maxBuy"
></ns-goods-sku>
<!-- 帮砍弹出 -->
<uni-popup ref="uniHelpPopup" type="center" :maskClick="false">
<view class="bargain-popup self help">
<image :src="$util.img('public/uniapp/bargain/bargain-pop-1.png')" mode="widthFix" class="head"></image>
<view class="bargain-content">
<view class="uer_info_base" v-if="launchInfo">
<view class="user_info_img">
<image :src="launchInfo.headimg == '' ? $util.img($util.getDefaultImage().head) : $util.img(launchInfo.headimg)" mode="widthFix"></image>
</view>
<text class="user_info_name">{{ launchInfo.nickname }}</text>
</view>
<view v-if="goodsDetail && launchInfo && timeMachine && goodsDetail.bargain_status == 1" class="count-down">
<text>还剩</text>
<uni-count-down
:day="timeMachine.d"
:hour="timeMachine.h"
:minute="timeMachine.i"
:second="timeMachine.s"
color="#fff"
splitorColor="#333 !important"
backgroundColor="#000"
border-color="transparent"
@timeup="timeUp()"
></uni-count-down>
<text>结束</text>
</view>
</view>
<button class="bargain-btn" type="primary" @click="bargain()">帮他砍价</button>
</view>
<text class="iconfont icon-round-close" @click="$refs.uniHelpPopup.close()"></text>
</uni-popup>
<!-- 帮砍成功 -->
<uni-popup ref="uniPopup" type="center" :maskClick="false">
<view class="bargain-popup self">
<image :src="$util.img('public/uniapp/bargain/bargain-pop-2.png')" mode="widthFix" class="head"></image>
<view class="bargain-content">
<text>您已帮砍</text>
<text class="money color-base-text">{{ bargainMoney }}</text>
<text>您也可以参与砍价快去挑选心仪的宝贝吧~~~</text>
</view>
<button class="bargain-btn" type="primary" @click="$util.redirectTo('/pages_promotion/bargain/list')">我也要参与</button>
</view>
<text class="iconfont icon-round-close" @click="closePopup"></text>
</uni-popup>
<!-- 自砍一刀展示 -->
<uni-popup ref="uniSelfBargainPopup" type="center" :maskClick="false">
<view class="bargain-popup self">
<image :src="$util.img('public/uniapp/bargain/bargain-pop-2.png')" mode="widthFix" class="head"></image>
<view class="bargain-content">
<text>您已砍掉</text>
<text class="money color-base-text">{{ my_bargain_money }}</text>
<text>听说分享次数越多砍价成功的机会越大哦</text>
</view>
<button class="bargain-btn" type="primary" @click="openSharePopup">邀请好友帮砍价</button>
</view>
<text class="iconfont icon-round-close" @click="closeSelfPop"></text>
</uni-popup>
<!-- 分享弹窗 -->
<view @touchmove.prevent.stop>
<uni-popup ref="sharePopup" type="bottom" class="share-popup">
<view>
<view class="share-title">分享</view>
<view class="share-content">
<!-- #ifdef MP -->
<view class="share-box">
<button class="share-btn" :plain="true" open-type="share">
<view class="iconfont icon-share-friend"></view>
<text>分享给好友</text>
</button>
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="share-box" @click="copyUrl">
<button class="share-btn" :plain="true">
<view class="iconfont icon-fuzhilianjie"></view>
<text>复制链接</text>
</button>
</view>
<!-- #endif -->
<view class="share-box" @click="openPosterPopup">
<button class="share-btn" :plain="true">
<view class="iconfont icon-pengyouquan"></view>
<text>生成分享海报</text>
</button>
</view>
</view>
<view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
</view>
</uni-popup>
</view>
<!-- 海报 -->
<view @touchmove.prevent.stop class="poster-layer">
<uni-popup ref="posterPopup" type="center">
<template v-if="poster != '-1'">
<view class="poster-wrap">
<view class="image-wrap">
<image :src="$util.img(poster)" :show-menu-by-longpress="true" mode="widthFix" />
<view class="close iconfont icon-close" @click="closePosterPopup()"></view>
</view>
<!-- #ifdef MP || APP-PLUS -->
<view class="save-btn" @click="saveGoodsPoster()">保存图片</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="save-btn">长按图片进行保存</view>
<!-- #endif -->
</view>
</template>
</uni-popup>
</view>
<!-- 悬浮按钮 -->
<hover-nav :need="true"></hover-nav>
<!-- 活动规则 -->
<uni-popup ref="rulePopup" type="center" :maskClick="false">
<view class="rule-wrap">
<view class="content-wrap">
<image :src="$util.img('public/uniapp/common/promotion_rule_head.png')" mode="widthFix" class="rule-head"></image>
<scroll-view scroll-y="true" class="rule">
<view class="text" v-if="goodsDetail && goodsDetail.remark != ''">{{ goodsDetail.remark }}</view>
</scroll-view>
<text class="iconfont icon-round-close" @click="closeRulePopup"></text>
</view>
</view>
</uni-popup>
<loading-cover ref="loadingCover"></loading-cover>
<ns-login ref="login"></ns-login>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import LTime from '@/pages_promotion/components/l-time/l-time.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import goodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
import detail from './public/js/detail.js';
export default {
components: {
LTime,
goodsSku,
uniPopup
},
mixins: [detail]
};
</script>
<style lang="scss">
@import './public/css/detail.scss';
</style>
<style scoped>
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important;
}
/deep/.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
overflow-y: unset;
background: none !important;
}
.detail-content >>> img {
max-width: 100% !important;
}
.detail-content >>> image {
max-width: 100% !important;
}
/deep/.uni-countdown__number {
padding: 0 4rpx;
line-height: 36rpx;
height: 36rpx;
}
/deep/ .uni-countdown__splitor.day {
line-height: 36rpx;
}
</style>

View File

@@ -0,0 +1,357 @@
<template>
<page-meta :page-style="themeColor"></page-meta>
<view class="page" :style="{ background: bgColor }">
<mescroll-uni @getData="getData" ref="mescroll" :size="10" v-if="addonIsExist.bargain">
<block slot="list">
<ns-adv keyword="NS_BARGAIN" class-name="adv-wrap"></ns-adv>
<block v-if="dataList.length > 0 || dataListing.length > 0">
<view class="goods-list single-column" v-if="dataListing.length">
<view class="goods-item margin-bottom" v-for="(item, index) in dataListing" :key="index">
<view class="goods-item-content">
<view class="goods-img" @click="toDetailP(item)">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
</view>
<view class="info-wrap">
<view class="name-wrap">
<view class="goods-name" @click="toDetailP(item)">{{ item.goods_name }}</view>
<text class="info-sub-title">已有{{ item.join_num }}人参与</text>
<view class="progress-wrap">
<progress percent="20" :show-info="false" stroke-width="8"
backgroundColor="#FFF4F4" :activeColor="themeStyle.main_color"
border-radius="6" :percent="progressP(item)" />
<view class="progress-point"></view>
<view class="progress-select icon"
:style="{ left: 'calc(' + progressP(item) + '% - 16rpx)' }">
<text class="iconfont icon-futou"></text>
</view>
</view>
</view>
<view class="info-bottom">
<view class="price-box">
<view class="discount-price">已砍<text class="price price-font">{{ (item.price - item.curr_price).toFixed(2) }}</text></view>
<view class="delete-price ">还剩<text class="price price-font">{{ $lang('common.currencySymbol') }}{{ (item.curr_price - item.floor_price).toFixed(2) }}</text></view>
</view>
<view class="pro-info">
<view class="button-border">免费拿</view>
</view>
</view>
</view>
</view>
<view class="goods-item-bottom">
<view class="item-bottom-left">
<uni-count-down :day="item.time.d" :hour="item.time.h" :minute="item.time.i" :second="item.time.s" color="#fff" borderColor="none" splitorColor="#303133" backgroundColor="#303133" />
<view class="color-sub txt">后结束</view>
</view>
<view class="item-bottom-right">
<button type="primary" @click="toDetailP(item)" size="mini" class="mini">继续砍价</button>
</view>
</view>
</view>
</view>
<view class="goods-list single-column" v-if="dataList.length">
<view class="goods-item margin-bottom" v-for="(item, index) in dataList" :key="index">
<view class="goods-item-content">
<view class="goods-img" @click="toDetail(item)">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)"/>
<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
</view>
<view class="info-wrap">
<view class="name-wrap">
<view class="goods-name" @click="toDetail(item)">{{ item.sku_name }}</view>
<text class="info-sub-title">已有{{ item.join_num }}人参与</text>
<view class="progress-wrap"><progress percent="20" :show-info="false" stroke-width="8" backgroundColor="#FFF4F4" :activeColor="themeStyle.main_color" border-radius="6" :percent="progress(item)" />
<view class="progress-point"></view>
<view class="progress-select icon" :style="{ left: 'calc(' + progress(item) + '% - 8rpx)' }">
<text class="iconfont icon-futou"></text>
</view>
</view>
</view>
<view class="info-bottom">
<view class="sale-box price-font">已砍{{ item.sale_num }}</view>
<view class="pro-info">
<view class="button-border">免费拿</view>
</view>
</view>
</view>
</view>
<view class="goods-item-bottom">
<view class="item-bottom-left">
<view class="txt">底价</view>
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{ parseFloat(item.floor_price).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style large">.{{ parseFloat(item.floor_price).toFixed(2).split('.')[1] }}</text>
<view class="delete-pirce">{{ $lang('common.currencySymbol') }}{{ item.price }}</view>
</view>
<view class="item-bottom-right">
<button type="primary" @click="toDetail(item)" size="mini" class="mini">去砍价</button>
</view>
</view>
</view>
</view>
</block>
<ns-empty v-else-if="isLoad && isLoading" textColor="#fff" :isIndex="false" text="暂无砍价商品"></ns-empty>
</block>
</mescroll-uni>
<!-- 悬浮按钮 -->
<hover-nav></hover-nav>
<loading-cover ref="loadingCover"></loading-cover>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template>
<script>
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue';
export default {
components: {
uniCountDown
},
data() {
return {
dataList: [],
dataListing: [],
isLoading: false,
isLoad: false,
skuId: 0,
mpShareData: null, //小程序分享数据
progressBorder: '10',
bgColor: ''
};
},
onLoad(option) {
//小程序分享接收source_member
if (option.source_member) {
uni.setStorageSync('source_member', option.source_member);
}
// 小程序扫码进入接收source_member
if (option.scene) {
var sceneParams = decodeURIComponent(option.scene);
sceneParams = sceneParams.split('&');
if (sceneParams.length) {
sceneParams.forEach(item => {
if (item.indexOf('sku_id') != -1) this.skuId = item.split('-')[1];
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
});
}
}
},
async onShow() {
setTimeout( () => {
if (!this.addonIsExist.bargain) {
this.$util.showToast({
title: '商家未开启砍价',
mask: true,
duration: 2000
});
setTimeout(() => {
this.$util.redirectTo('/pages/index/index');
}, 2000);
}
},1000);
//记录分享关系
if (this.storeToken && uni.getStorageSync('source_member')) {
this.$util.onSourceMember(uni.getStorageSync('source_member'));
}
//小程序分享
// #ifdef MP-WEIXIN
this.$util.getMpShare().then(res => {
this.mpShareData = res;
});
// #endif
await this.getZoneConfig();
if (this.$refs.mescroll) this.$refs.mescroll.refresh();
this.getDataing();
},
//分享给好友
onShareAppMessage() {
return this.mpShareData.appMessage;
},
//分享到朋友圈
onShareTimeline() {
return this.mpShareData.timeLine;
},
methods: {
// 活动页面配置
async getZoneConfig() {
let res = await this.$api.sendRequest({
url: '/api/config/promotionZoneConfig',
data: {
name: 'bargain'
},
async: false
});
let data = res.data;
if (data) {
this.bgColor = data.bg_color;
}
},
getData(mescroll) {
this.$api.sendRequest({
url: '/bargain/api/goods/page',
data: {
page_size: mescroll.size,
page: mescroll.num,
is_exclude_bargaining: 1
},
success: res => {
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data) {
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
if (mescroll.endSuccess) mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
this.dataList = this.dataList.concat(newArr); //追加新数据
this.isLoad = true;
this.$forceUpdate();
setTimeout(() => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}, 300);
},
fail() {
//联网失败的回调
if (mescroll.endErr) mescroll.endErr();
setTimeout(() => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}, 300);
}
});
},
getDataing() {
this.$api.sendRequest({
url: '/bargain/api/goods/bargainingList',
data: {},
success: res => {
this.dataListing = res.data;
for (var index in res.data) {
this.dataListing[index].time = this.$util.countDown(res.data[index].end_time - res.timestamp);
}
this.isLoading = true;
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
},
fail() {
//联网失败的回调
mescroll.endErr();
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
}
});
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/bargain/detail', {
b_id: e.bargain_id
});
},
toDetailP(e) {
this.$util.redirectTo('/pages_promotion/bargain/detail', {
b_id: e.bargain_id,
l_id: e.launch_id
});
},
imgError(index) {
this.dataList[index].goods_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
goodsImg(imgStr) {
let imgs = imgStr.split(',');
return imgs[0] ? this.$util.img(imgs[0], {
size: 'mid'
}) : this.$util.getDefaultImage().goods;
},
progress(data) {
let progress = ((parseInt(data.sale_num) / (parseInt(data.bargain_stock) + parseInt(data.sale_num))) * 100).toFixed();
if (progress == 'NaN') {
progress = 0;
}
return progress;
},
progressP(data) {
let progress = (((parseFloat(data.price) - parseFloat(data.curr_price)) / parseFloat(data.price)) * 100).toFixed();
if (progress == 'NaN') {
progress = 0;
}
return progress;
},
goodsTag(data) {
return data.label_name || '';
}
},
onHide() {
if (this.$refs.loadingCover) this.$refs.loadingCover.show();
}
};
</script>
<style lang="scss">
@import './public/css/list.scss';
</style>
<style lang="scss" scoped>
/deep/ .fixed {
position: relative;
top: 0;
}
/deep/ .empty {
margin-top: 0 !important;
}
.clockrun {
.delete-price {
max-width: 60%;
}
}
/deep/ .uni-countdown__number {
min-width: 32rpx;
height: 32rpx;
text-align: center;
line-height: 32rpx;
border-radius: 4px;
display: inline-block;
padding: 4rpx;
margin: 0;
border: none !important;
}
/deep/ .uni-countdown__splitor {
width: 10rpx;
height: 32rpx;
line-height: 36rpx;
text-align: center;
display: inline-block;
}
/deep/ .uni-countdown__splitor.day {
width: initial;
}
</style>
<style>
.progress-wrap>>>.uni-progress .uni-progress-bar {
border-radius: 16rpx;
overflow: hidden;
}
.progress-wrap>>>.uni-progress-bar .uni-progress-inner-bar {
background: linear-gradient(to left, var(--bargain-promotion-color), var(--bargain-promotion-aux-color)) !important;
}
</style>

Some files were not shown because too many files have changed in this diff Show More