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
583 changed files with 79385 additions and 79374 deletions

View File

@@ -1,47 +0,0 @@
// 本地调试配置示例文件
// 复制此文件并重命名为 local.config.js 以使用自定义本地配置
const localDevConfig = ({
'460': { // 制氧设备平台
uniacid: 460,
domain: 'https://xcx30.5g-quickapp.com/',
},
'576-xcx30.5g': { // 活性石灰装备
uniacid: 576,
domain: 'https://xcx30.5g-quickapp.com/',
},
'2285': { // 数码喷墨墨水
uniacid: 2285,
domain: 'https://xcx.aigc-quickapp.com/',
},
'2811': { // POCT检测分析平台
uniacid: 2811,
domain: 'https://xcx6.aigc-quickapp.com/',
},
'2724': { // 生物菌肥
uniacid: 2724,
domain: 'https://xcx.aigc-quickapp.com/',
},
'2505': { // 煤矿钻机
uniacid: 2505,
domain: 'https://xcx.aigc-quickapp.com/',
},
'2777': { // 养老服务
uniacid: 2777,
domain: 'https://xcx.aigc-quickapp.com/',
},
'1': { // 开发平台
uniacid: 1,
domain: 'https://dev.aigc-quickapp.com',
},
'1-test': { // 测试平台
uniacid: 1,
domain: 'https://test.aigc-quickapp.com',
},
'local-2': { // 测试平台
uniacid: 2,
domain: 'http://localhost:8050/',
},
})['1']; // 选择要使用的环境配置
export default localDevConfig;

View File

@@ -1,55 +0,0 @@
// 本地调试配置示例文件
// 复制此文件并重命名为 local.config.js 以使用自定义本地配置
const localDevConfig = ({
'460': { // 制氧设备平台
uniacid: 460,
domain: 'https://xcx30.5g-quickapp.com/',
},
'576-xcx30.5g': { // 活性石灰装备
uniacid: 576,
domain: 'https://xcx30.5g-quickapp.com/',
},
'2285': { // 数码喷墨墨水
uniacid: 2285,
domain: 'https://xcx.aigc-quickapp.com/',
},
'2811': { // POCT检测分析平台
uniacid: 2811,
domain: 'https://xcx6.aigc-quickapp.com/',
},
'2812': { // IVD数商模式
uniacid: 2812,
domain: 'https://xcx6.aigc-quickapp.com/',
},
'2724': { // 生物菌肥
uniacid: 2724,
domain: 'https://xcx.aigc-quickapp.com/',
},
'2505': { // 煤矿钻机
uniacid: 2505,
domain: 'https://xcx.aigc-quickapp.com/',
},
'2777': { // 养老服务
uniacid: 2777,
domain: 'https://xcx.aigc-quickapp.com/',
},
'1': { // 开发平台
uniacid: 1,
domain: 'https://dev.aigc-quickapp.com',
},
'1-test': { // 测试平台
uniacid: 1,
domain: 'https://test.aigc-quickapp.com',
},
'local-2': { // 测试平台
uniacid: 2,
domain: 'http://localhost:8050/',
},
'local-2-dev': { // 本地开发测试平台
uniacid: 2,
domain: 'http://localhost:8050/',
},
})['2812']; // 选择要使用的环境配置
export default localDevConfig;

25
App.vue
View File

@@ -1,17 +1,17 @@
<script> <script>
import auth from 'common/js/auth.js'; import auth from 'common/js/auth.js';
import configExternal from 'common/js/config-external.js' import colorList from 'common/js/style_color.js'
import { import {
Weixin Weixin
} from 'common/js/wx-jssdk.js'; } from 'common/js/wx-jssdk.js';
export default { export default {
mixins: [auth], mixins: [auth],
onLaunch: async function(options) { onLaunch: function(options) {
// 方式支持快应用从url中query部分获取uniacid或useragent中获取uniacid // console.log(options.query.uniacid)
if(options.query.uniacid){ if(options.query.uniacid){
uni.setStorageSync('uniacid', options.query.uniacid); uni.setStorageSync('uniacid', options.query.uniacid);
console.log(uni.getStorageSync('uniacid'))
} }
uni.hideTabBar(); uni.hideTabBar();
@@ -40,7 +40,7 @@
// #endif // #endif
// #ifdef H5 // #ifdef H5
if (this.$util.getDeviceInfo().platform == 'ios') { if (uni.getDeviceInfo().platform == 'ios') {
uni.setStorageSync('initUrl', location.href); uni.setStorageSync('initUrl', location.href);
} }
// #endif // #endif
@@ -61,9 +61,7 @@
// 主题风格 // 主题风格
if (uni.getStorageSync('themeStyle')) { if (uni.getStorageSync('themeStyle')) {
const themeData = await configExternal.loadTheme(uni.getStorageSync('themeStyle')); this.$store.commit('setThemeStyle', colorList[uni.getStorageSync('themeStyle')]);
this.$store.commit('setThemeStyle', themeData);
this.$store.dispatch('themeColorSet');
} }
// 插件是否存在 // 插件是否存在
@@ -153,7 +151,6 @@
onShow: function(options) { onShow: function(options) {
// #ifdef MP // #ifdef MP
// 自动授权登录 // 自动授权登录
this.getAuthInfo();
if (this.$store.state.token) { if (this.$store.state.token) {
this.$api.sendRequest({ this.$api.sendRequest({
url: '/api/member/info', url: '/api/member/info',
@@ -163,6 +160,8 @@
} }
} }
}); });
}else{
this.getAuthInfo();
} }
// #endif // #endif
@@ -179,8 +178,7 @@
// #ifdef H5 // #ifdef H5
if (this.$util.isWeiXin()) { if (this.$util.isWeiXin()) {
this.$util.getUrlCode(urlParams => { this.$util.getUrlCode(urlParams => {
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams if (urlParams.source_member) uni.setStorageSync('source_member', urlParams.source_member);
.source_member);
if (urlParams.code == undefined) { if (urlParams.code == undefined) {
this.$api.sendRequest({ this.$api.sendRequest({
@@ -206,8 +204,7 @@
let data = {}; let data = {};
if (res.data.openid) data.wx_openid = res.data.openid; if (res.data.openid) data.wx_openid = res.data.openid;
if (res.data.unionid) data.wx_unionid = res.data.unionid; if (res.data.unionid) data.wx_unionid = res.data.unionid;
if (res.data.userinfo) Object.assign(data, res.data if (res.data.userinfo) Object.assign(data, res.data.userinfo);
.userinfo);
this.authLogin(data); this.authLogin(data);
} }
} }
@@ -314,7 +311,7 @@
@import './common/css/iconfont.css'; @import './common/css/iconfont.css';
@import './common/css/icondiy.css'; // 自定义图标库 @import './common/css/icondiy.css'; // 自定义图标库
@import './common/css/icon/extend.css'; // 扩展图标库 @import './common/css/icon/extend.css'; // 扩展图标库
page { page{
background: #f4f6fa; background: #f4f6fa;
} }
</style> </style>

View File

@@ -1,234 +1,305 @@
.collectPopupWindow { .collectPopupWindow {
position: relative; position: relative;
height: 113rpx; height: 113rpx;
width: 510rpx; width: 510rpx;
margin-left: calc(100% - 530rpx); margin-left: calc(100% - 530rpx);
image { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
text { text {
color: #ff4544 !important; color: #ff4544 !important;
font-size: 24rpx !important; font-size: 24rpx !important;
position: absolute; position: absolute;
top: 48rpx; top: 48rpx;
right: 25rpx; right: 25rpx;
} }
} }
.zhezhao { .zhezhao {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: transparent; background-color: transparent;
} }
image { image {
max-width: 100% !important; max-width: 100% !important;
max-height: 100% !important; max-height: 100% !important;
} }
.diy-wrap { .diy-wrap {
/* #ifdef H5 */ /* #ifdef H5 */
height: calc(100vh - 88rpx); height: calc(100vh - 88rpx);
/* #endif */ /* #endif */
/* #ifdef MP-WEIXIN */ /* #ifdef MP-WEIXIN */
height: 100vh; height: 100vh;
/* #endif */ /* #endif */
} }
.page-img { .page-img {
background-size: contain !important; background-size: contain !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
} }
.page-header { .page-header {
background-size: 100% !important; background-size: 100% !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
background-position: top center; background-position: top center;
background-attachment: fixed; background-attachment: fixed;
} }
.bg-index { .bg-index {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box; box-sizing: border-box;
background-size: 100% !important; background-size: 100% !important;
background-repeat: no-repeat !important; background-repeat: no-repeat !important;
} }
.wap-floating { .wap-floating {
text { text {
display: block; display: block;
font-size: 60rpx; font-size: 60rpx;
color: #ffffff; color: #ffffff;
text-align: center; text-align: center;
} }
} }
.wap-floating-collect .uni-popup__mask { .wap-floating-collect .uni-popup__mask {
background: transparent; background: transparent;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
color: transparent; color: transparent;
} }
.popup-box { .popup-box {
width: 450rpx; width: 450rpx;
background: #ffffff; background: #ffffff;
border-radius: $border-radius; border-radius: $border-radius;
overflow: hidden; overflow: hidden;
.close_title { .close_title {
width: 100%; width: 100%;
text-align: center; text-align: center;
height: 70rpx; height: 70rpx;
line-height: 70rpx; line-height: 70rpx;
font-size: $font-size-base; font-size: $font-size-base;
} }
.close_content { .close_content {
width: 100%; width: 100%;
max-height: 500rpx; max-height: 500rpx;
padding: $padding; padding: $padding;
box-sizing: border-box; box-sizing: border-box;
} }
.close_content_box { .close_content_box {
width: 100%; width: 100%;
max-height: 460rpx; max-height: 460rpx;
line-height: 1.3; line-height: 1.3;
} }
} }
.noStore-text { .noStore-text {
color: #000000 !important; color: #000000 !important;
} }
.isStore-top { .isStore-top {
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.keep-on-record { .keep-on-record {
text-align: center; text-align: center;
padding-bottom: 20rpx; padding-bottom: 20rpx;
image { image {
width: 150rpx; width: 150rpx;
height: 60rpx; height: 60rpx;
} }
} }
.padding-bottom { .padding-bottom {
padding-bottom: 40rpx !important; padding-bottom: 40rpx !important;
} }
.choose-store { .choose-store {
::v-deep .uni-popup__wrapper{ /deep/ .uni-popup__wrapper{
background: none!important; background: none!important;
} }
} }
.choose-store-popup { .choose-store-popup {
padding: 30rpx; padding: 30rpx;
background-color: #fff; background-color: #fff;
.head-wrap { .head-wrap {
font-weight: bold; font-weight: bold;
font-size: $font-size-toolbar; font-size: $font-size-toolbar;
text-align: center; text-align: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
color: #202021; color: #202021;
} }
.position-wrap { .position-wrap {
display: flex; display: flex;
color: #202021; color: #202021;
align-items: center; align-items: center;
margin-bottom: 20rpx; margin-bottom: 20rpx;
.icon-dizhi { .icon-dizhi {
font-weight: bold; font-weight: bold;
font-size: $font-size-tag; font-size: $font-size-tag;
margin-right: 10rpx; margin-right: 10rpx;
} }
.address { .address {
font-weight: bold; font-weight: bold;
font-size: $font-size-tag; font-size: $font-size-tag;
margin-right: 10rpx; margin-right: 10rpx;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
-o-text-overflow: ellipsis; -o-text-overflow: ellipsis;
} }
.reposition { .reposition {
display: flex; display: flex;
align-items: center; align-items: center;
.iconfont { .iconfont {
font-size: $font-size-base; font-size: $font-size-base;
margin-right: 6rpx; margin-right: 6rpx;
} }
text { text {
font-size: $font-size-tag; font-size: $font-size-tag;
color: #fd463e; color: #fd463e;
} }
} }
} }
.store-wrap { .store-wrap {
border: 1px solid $base-color; border: 1px solid $base-color;
border-radius: 16rpx; border-radius: 16rpx;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
margin-bottom: 30rpx; margin-bottom: 30rpx;
.tag { .tag {
background-color: #fee9ea; background-color: #fee9ea;
color: #fd463e; color: #fd463e;
font-size: $font-size-activity-tag; font-size: $font-size-activity-tag;
display: inline-block; display: inline-block;
border-radius: 6rpx; border-radius: 6rpx;
padding: 4rpx 12rpx; padding: 4rpx 12rpx;
// #ifdef H5 // #ifdef H5
transform: scale(0.8); transform: scale(0.8);
margin-left: -10rpx; margin-left: -10rpx;
// #endif // #endif
} }
.store-name { .store-name {
margin: 10rpx 0; margin: 10rpx 0;
font-weight: bold; font-weight: bold;
color: #202021; color: #202021;
font-size: $font-size-toolbar; font-size: $font-size-toolbar;
} }
.address { .store-close-desc{
color: #5f6067; color: red;
font-size: $font-size-tag; font-size: $font-size-tag;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.distance { .address {
display: flex; color: #5f6067;
align-items: center; font-size: $font-size-tag;
color: #5f6067; margin-bottom: 10rpx;
font-size: $font-size-tag; }
.iconfont { .distance {
font-size: $font-size-base; display: flex;
margin-right: 10rpx; align-items: center;
} color: #5f6067;
} font-size: $font-size-tag;
} .iconfont {
font-size: $font-size-base;
button { margin-right: 10rpx;
border-radius: 40rpx; }
} }
}
.other-store {
display: flex; button {
align-items: center; border-radius: 40rpx;
color: #5e6066; }
font-weight: bold;
justify-content: center; .other-store {
margin-top: 20rpx; display: flex;
margin-bottom: 20rpx; align-items: center;
.iconfont { color: #5e6066;
margin-left: 10rpx; font-weight: bold;
font-size: $font-size-tag; justify-content: center;
} margin-top: 20rpx;
} margin-bottom: 20rpx;
} .iconfont {
.page-bottom { margin-left: 10rpx;
margin-top: 20rpx; 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 one or more lines are too long

View File

@@ -1,4 +0,0 @@
// 修复图片垂直对齐问题,解决两张图片上下有空白缝隙问题
::v-deep ._img {
vertical-align: top;
}

File diff suppressed because it is too large Load Diff

View File

@@ -60,107 +60,55 @@ export default {
/** /**
* 流式消息入口(自动适配平台) * 流式消息入口(自动适配平台)
*/ */
async sendStreamMessage(message, onChunk, onComplete) { async sendStreamMessage(message, onChunk, onComplete) {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
return new Promise((resolve, reject) => { // 微信小程序:降级为普通请求 + 前端打字模拟
const socketTask = wx.connectSocket({ try {
url: 'wss://dev.aigc-quickapp.com/ws/aikefu', const result = await this.sendMessage(message);
header: {} const content = result.content || '';
}); const conversationId = result.conversationId || '';
let content = ''; // 保存会话ID确保连续对话
let conversationId = ''; if (conversationId) {
let isAuthenticated = false; this.setConversationId(conversationId);
}
socketTask.onOpen(() => {
console.log('WebSocket 连接成功,开始认证...'); // 模拟打字效果
socketTask.send({ let index = 0;
data: JSON.stringify({ const chunkSize = 2; // 每次显示2个字符
action: 'auth', return new Promise((resolve) => {
uniacid: store.state.uniacid || '1', const timer = setInterval(() => {
token: store.state.token || 'test_token', if (index < content.length) {
user_id: store.state.memberInfo?.id || 'anonymous' const chunk = content.substring(index, index + chunkSize);
}) index += chunkSize;
}); if (onChunk) onChunk(chunk);
}); } else {
clearInterval(timer);
socketTask.onMessage((res) => { if (onComplete) {
try { onComplete({
const data = JSON.parse(res.data); content: content,
console.log('收到 WebSocket 消息:', data); conversation_id: conversationId
});
if (data.type === 'auth_success') { }
console.log('认证成功,发送聊天消息...'); resolve({ content, conversation_id: conversationId });
isAuthenticated = true; }
socketTask.send({ }, 80); // 打字速度80ms/次
data: JSON.stringify({ });
action: 'chat', } catch (error) {
uniacid: store.state.uniacid || '1', console.error('小程序流式消息降级失败:', error);
query: message, if (onComplete) {
user_id: store.state.memberInfo?.id || 'anonymous', onComplete({ error: error.message || '发送失败' });
conversation_id: this.getConversationId() || '' }
}) throw error;
}); }
} else if (data.type === 'auth_failed') {
const errorMsg = '认证失败,请重新登录';
console.error(errorMsg, data);
reject(new Error(errorMsg));
if (onComplete) onComplete({ error: errorMsg });
socketTask.close();
}
// 处理流式消息块
else if (data.type === 'message' || data.event === 'message') {
const text = data.answer || data.content || data.text || '';
content += text;
if (onChunk) onChunk(text);
}
// 处理流结束
else if (data.event === 'message_end' || data.type === 'message_end') {
conversationId = data.conversation_id || '';
if (conversationId) {
this.setConversationId(conversationId);
}
if (onComplete) {
onComplete({ content, conversation_id: conversationId });
}
resolve({ content, conversation_id: conversationId });
socketTask.close();
}
// 可选:处理 done
else if (data.type === 'done') {
console.log('对话完成:', data);
}
} catch (e) {
console.error('WebSocket 消息解析失败:', e, '原始数据:', res.data);
}
});
socketTask.onError((err) => {
const errorMsg = 'WebSocket 连接失败';
console.error(errorMsg, err);
reject(new Error(errorMsg));
if (onComplete) onComplete({ error: errorMsg });
});
socketTask.onClose(() => {
console.log('WebSocket 连接已关闭');
});
const timeout = setTimeout(() => {
if (!isAuthenticated || content === '') {
console.warn('WebSocket 超时,强制关闭');
socketTask.close();
reject(new Error('AI服务响应超时'));
if (onComplete) onComplete({ error: 'AI服务响应超时' });
}
}, 10000);
});
// #endif // #endif
},
// #ifdef H5
// H5使用真实流式EventSource / Fetch
return this.sendHttpStream(message, onChunk, onComplete);
// #endif
},
/** /**
* HTTP 流式请求(仅 H5 使用) * HTTP 流式请求(仅 H5 使用)
*/ */
@@ -183,75 +131,64 @@ export default {
conversation_id: this.getConversationId() || '' conversation_id: this.getConversationId() || ''
}) })
}); });
if (!response.ok || !response.body) { if (!response.ok) {
throw new Error('无效响应'); throw new Error(`HTTP ${response.status}`);
} }
if (!response.body) {
throw new Error('响应体不可用');
}
const reader = response.body.getReader(); const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8'); const decoder = new TextDecoder('utf-8');
let buffer = ''; let buffer = '';
let content = ''; let content = '';
let conversationId = ''; let conversationId = '';
while (true) { function processBuffer(buf, callback) {
const { done, value } = await reader.read(); const lines = buf.split('\n');
if (done) break; buf = lines.pop() || '';
buffer += decoder.decode(value, { stream: true });
// 按行分割,保留不完整的最后一行
const lines = buffer.split('\n');
buffer = lines.pop() || ''; // 未完成的行留到下次
for (const line of lines) { for (const line of lines) {
const trimmed = line.trim(); const trimmed = line.trim();
if (trimmed.startsWith('data:')) { if (trimmed.startsWith('data:')) {
try { const jsonStr = trimmed.slice(5).trim();
const jsonStr = trimmed.slice(5).trim(); if (jsonStr) {
if (jsonStr && jsonStr !== '[DONE]') { try {
const data = JSON.parse(jsonStr); const data = JSON.parse(jsonStr);
if (data.event === 'message') { if (data.event === 'message') {
const text = data.answer || data.text || ''; const text = data.answer || data.text || '';
content += text; content += text;
if (onChunk) onChunk(text); callback(text);
} }
if (data.conversation_id) { if (data.conversation_id) {
conversationId = data.conversation_id; conversationId = data.conversation_id;
} }
if (data.event === 'message_end') { if (data.event === 'message_end') {
// 可提前结束 // 可选:提前完成
} }
} catch (e) {
console.warn('解析流数据失败:', e);
} }
} catch (e) {
console.warn('解析失败:', e, line);
} }
} }
} }
return buf;
} }
// 处理最后残留的 buffer如果有 while (true) {
if (buffer.trim().startsWith('data:')) { const { done, value } = await reader.read();
try { if (done) break;
const jsonStr = buffer.trim().slice(5); buffer += decoder.decode(value, { stream: true });
if (jsonStr) { buffer = processBuffer(buffer, (chunk) => {
const data = JSON.parse(jsonStr); if (onChunk) onChunk(chunk);
if (data.event === 'message') { });
const text = data.answer || '';
content += text;
if (onChunk) onChunk(text);
}
if (data.conversation_id) {
conversationId = data.conversation_id;
}
}
} catch (e) {
console.warn('最后 buffer 解析失败:', e);
}
} }
if (onComplete) { if (onComplete) {
onComplete({ content, conversation_id: conversationId }); onComplete({
content,
conversation_id: conversationId
});
} }
return { content, conversation_id: conversationId }; return { content, conversation_id: conversationId };
} catch (error) { } catch (error) {
@@ -259,6 +196,11 @@ export default {
throw error; throw error;
} }
// #endif // #endif
// #ifdef MP-WEIXIN
// 理论上不会执行到这里,但防止 fallback
return this.sendStreamMessage(message, onChunk, onComplete);
// #endif
}, },
/** /**
@@ -489,4 +431,4 @@ export default {
return null; return null;
// #endif // #endif
} }
}; };

View File

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

View File

@@ -1,132 +0,0 @@
// 外置配置管理
// 用于管理需要外置的配置项,如语言包、主题配置等
// 语言包配置
export const langConfig = {
// 语言列表
langList: ['zh-cn', 'en-us'],
// 默认语言
defaultLang: 'zh-cn',
// 语言包加载方式:'lazy'(按需加载)或 'preload'(预加载)
loadMode: 'lazy'
};
// 主题配置
export const themeConfig = {
// 主题列表
themeList: ['default', 'red', 'green', 'blue', 'pink', 'gold', 'purple', 'yellow', 'black'],
// 默认主题
defaultTheme: 'default'
};
// API配置
export const apiConfig = {
// API请求超时时间
timeout: 30000,
// 是否开启重试
retry: true,
// 重试次数
retryCount: 3,
// 重试间隔时间(毫秒)
retryDelay: 1000
};
// 配置外置管理类
class ConfigExternal {
constructor() {
this.loadedConfigs = {};
this.loadPromises = {};
}
/**
* 加载语言包
* @param {string} lang - 语言类型
* @returns {Promise} - 加载结果
*/
async loadLang(lang = langConfig.defaultLang) {
if (this.loadedConfigs[`lang_${lang}`]) {
return this.loadedConfigs[`lang_${lang}`];
}
if (this.loadPromises[`lang_${lang}`]) {
return this.loadPromises[`lang_${lang}`];
}
this.loadPromises[`lang_${lang}`] = new Promise((resolve, reject) => {
try {
// 动态加载语言包
const langData = require(`@/lang/${lang}/common.js`).lang;
this.loadedConfigs[`lang_${lang}`] = langData;
resolve(langData);
} catch (error) {
console.error(`加载语言包 ${lang} 失败:`, error);
reject(error);
}
});
return this.loadPromises[`lang_${lang}`];
}
/**
* 加载页面语言包
* @param {string} lang - 语言类型
* @param {string} pagePath - 页面路径
* @returns {Promise} - 加载结果
*/
async loadPageLang(lang = langConfig.defaultLang, pagePath) {
const key = `page_${lang}_${pagePath}`;
if (this.loadedConfigs[key]) {
return this.loadedConfigs[key];
}
if (this.loadPromises[key]) {
return this.loadPromises[key];
}
this.loadPromises[key] = new Promise((resolve, reject) => {
try {
// 动态加载页面语言包
const pageLangData = require(`@/lang/${lang}/${pagePath}.js`).lang;
this.loadedConfigs[key] = pageLangData;
resolve(pageLangData);
} catch (error) {
console.error(`加载页面语言包 ${lang}/${pagePath} 失败:`, error);
resolve({});
}
});
return this.loadPromises[key];
}
/**
* 加载主题配置(异步方式)
* @param {string} theme - 主题名称
* @returns {Promise} - 加载结果
*/
async loadTheme(theme = themeConfig.defaultTheme) {
if (this.loadedConfigs[`theme_${theme}`]) {
return this.loadedConfigs[`theme_${theme}`];
}
if (this.loadPromises[`theme_${theme}`]) {
return this.loadPromises[`theme_${theme}`];
}
this.loadPromises[`theme_${theme}`] = new Promise((resolve, reject) => {
try {
// 动态加载主题配置
const themeData = require(`@/common/js/style_color.js`)['default'][theme];
// console.log('async themeData => ', themeData);
this.loadedConfigs[`theme_${theme}`] = themeData;
resolve(themeData);
} catch (error) {
console.error(`加载主题 ${theme} 失败:`, error);
reject(error);
}
});
return this.loadPromises[`theme_${theme}`];
}
}
export default new ConfigExternal();

View File

@@ -1,92 +1,32 @@
// 发行版本,配置说明 // 发行版本,配置说明
let releaseCfg = undefined; let releaseCfg = undefined;
// #ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-QQ || MP-TOUTIAO
try { try {
if (site) { // 从site.js文件中获取配置, 针对微信小程序类 if (site) {
releaseCfg = { releaseCfg = {
baseUrl: site.baseUrl, baseUrl: site.baseUrl,
imgDomain: site.baseUrl, imgDomain: site.baseUrl,
h5Domain: site.baseUrl, h5Domain: site.baseUrl,
uniacid: site.uniacid, uniacid: site.uniacid,
} }
} else {
console.warn('小程序发行环境下必须配置site.js文件, 不然将使用默认配置,影响小程序定制分发!');
} }
} catch (e) {} } catch (e) {}
// #endif
// 线上版本部署域名, 注意: 必须以 '/' 结尾,适用于小程序/H5/快应用等场景 // 调试版本,配置说明
// 默认域名, 自定义发行时可以修改 const devCfg = {
let defaultDomain = '';
// #ifdef H5_XCX_5G_QUICKAPP_COM
defaultDomain = 'https://xcx20.5g-quickapp.com';
// #endif
// #ifdef H5_XCX_AIGC_QUICKAPP_COM
defaultDomain = 'https://xcx.aigc-quickapp.com/';
// #endif
// #ifdef H5_5G_AIGC_QUICKAPP_COM
defaultDomain = 'https://5g.aigc-quickapp.com/';
// #endif
// #ifdef H5_TEST_AIGC_QUICKAPP_COM
defaultDomain = 'https://test.aigc-quickapp.com/';
// #endif
// 确保域名以 '/' 结尾
if (defaultDomain && !defaultDomain.endsWith('/')) {
defaultDomain += '/';
}
// 本地调试配置示例文件
// 复制.local.config.js.example 并重命名为 .local.config.js 以使用自定义本地配置
let localDevConfig = { uniacid: 0, domain: defaultDomain };
// #ifndef PRODUCTION
// 尝试动态加载本地配置文件
if (process?.env?.NODE_ENV === 'development') {
try {
// 尝试从项目根目录加载本地配置文件
// 使用相对路径的方式,确保在不同平台下都能正确解析
let customConfig = require('@/.local.config.js').default;
if (customConfig) {
localDevConfig = customConfig;
}
} catch (e) {
// 如果本地配置文件不存在或加载失败,保持使用默认配置
// 只在开发模式下输出提示信息
// #ifdef WEB
console.log('本地配置文件 .local.config.js 不存在,使用默认配置');
// #endif
}
}
// #endif
const { uniacid = 0, domain = defaultDomain } = localDevConfig ?? { uniacid: 0, domain: defaultDomain }
export default {
/**
* 1.开发调试模式
* 去掉注释 ...defaultCfg;
* 注释掉 ...releaseCfg,
* 2.发行/发布模式,例如通过`HBuilder>发行>小程序微信`的时候,原理是:
* 然后将 `import site from "../site.js";`追加到 `unpackage\dist\build\mp-weixin\common\vendor.js` 文件内容开头部分
* 然后将 site.js 文件放到 `unpackage\dist\build\mp-weixin\` 目录下面
*/
// 商户ID // 商户ID
uniacid: uniacid, //825 uniacid: 1, //825
//api请求地址 //api请求地址
baseUrl: domain, baseUrl: 'https://dev.aigc-quickapp.com/',
// baseUrl: 'http://localhost:8010/',
// 图片域名 // 图片域名
imgDomain: domain, imgDomain: 'https://dev.aigc-quickapp.com/',
//imgDomain: 'http://localhost:8010/',
// H5端域名 // H5端域名
h5Domain: domain, h5Domain: 'https://dev.aigc-quickapp.com/',
// h5Domain: 'http://localhost:8010/',
// // api请求地址 // // api请求地址
// baseUrl: 'https://tsaas.liveplatform.cn/', // baseUrl: 'https://tsaas.liveplatform.cn/',
@@ -105,20 +45,31 @@ export default {
// // H5端域名 // // H5端域名
// h5Domain: 'http://saas.cn/', // h5Domain: 'http://saas.cn/',
};
// 发行版本配置 var config = {
...(releaseCfg || {}), /**
* 1.开发调试模式
* 去掉注释 ...devCfg;
* 注释掉 ...releaseCfg,
* 2.发行/发布模式,例如通过`HBuilder>发行>小程序微信`的时候,原理是:
* 然后将 `import site from "../site.js";`追加到 `unpackage\dist\build\mp-weixin\common\vendor.js` 文件内容开头部分
* 然后将 site.js 文件放到 `unpackage\dist\build\mp-weixin\` 目录下面
*/
...(releaseCfg ?? devCfg),
// 腾讯地图key // 腾讯地图key
mpKey: 'TUHBZ-CNWKU-UHAVP-GZQ26-HNZFO-3YBF4', mpKey: 'TUHBZ-CNWKU-UHAVP-GZQ26-HNZFO-3YBF4',
// 客服地址 //客服地址
webSocket: '{{$webSocket}}', webSocket: '{{$webSocket}}',
// 本地端主动给服务器ping的时间, 0 则不开启 , 单位秒 //本地端主动给服务器ping的时间, 0 则不开启 , 单位秒
pingInterval: 1500, pingInterval: 1500,
// 版本号 // 版本号
version: '1.0' version: '1.0'
}; };
export default config;

View File

@@ -28,29 +28,28 @@ export class CustomerService {
return this.latestPlatformConfig; return this.latestPlatformConfig;
} }
// 优先级:外部传入 > vuex store > 空对象 // 优先级:外部传入的最新配置 > vuex配置 > 空对象
const servicerConfig = this.externalConfig || this.vm.$store.state.servicerConfig || {}; const servicerConfig = this.externalConfig || this.vm.$store.state.servicerConfig || {};
console.log(`【实时客服配置】`, servicerConfig); console.log(`【实时客服配置】`, servicerConfig);
let platformConfig = null; let platformConfig = null;
// #ifdef H5 // #ifdef H5
platformConfig = servicerConfig.h5 && typeof servicerConfig.h5 === 'object' ? servicerConfig.h5 : null; platformConfig = servicerConfig.h5 ? (typeof servicerConfig.h5 === 'object' ? servicerConfig.h5 : null) : null;
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
platformConfig = servicerConfig.weapp && typeof servicerConfig.weapp === 'object' ? servicerConfig.weapp : null; platformConfig = servicerConfig.weapp ? (typeof servicerConfig.weapp === 'object' ? servicerConfig.weapp : null) : null;
// #endif // #endif
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
platformConfig = servicerConfig.aliapp && typeof servicerConfig.aliapp === 'object' ? servicerConfig.aliapp : null; platformConfig = servicerConfig.aliapp ? (typeof servicerConfig.aliapp === 'object' ? servicerConfig.aliapp : null) : null;
// #endif // #endif
// #ifdef PC // #ifdef PC
platformConfig = servicerConfig.pc && typeof servicerConfig.pc === 'object' ? servicerConfig.pc : null; platformConfig = servicerConfig.pc ? (typeof servicerConfig.pc === 'object' ? servicerConfig.pc : null) : null;
// #endif // #endif
// 防止空数组被当作有效配置 // 处理空数组情况你的配置中pc/aliapp是空数组转为null
if (Array.isArray(platformConfig)) { if (Array.isArray(platformConfig)) {
platformConfig = null; platformConfig = null;
} }
@@ -83,25 +82,39 @@ export class CustomerService {
validateConfig() { validateConfig() {
const config = this.getPlatformConfig(); const config = this.getPlatformConfig();
const wxworkConfig = this.getWxworkConfig(); const wxworkConfig = this.getWxworkConfig();
const result = { const result = {
isValid: true, isValid: true,
errors: [], errors: [],
warnings: [] warnings: []
}; };
if (!config || !config.type) { if (!config) {
result.isValid = false; result.isValid = false;
result.errors.push('客服类型未配置'); result.errors.push('客服配置不存在');
return result; return result;
} }
if (config.type === 'aikefu') {
return result;
}
if (!config.type) {
result.isValid = false;
result.errors.push('客服类型未配置');
}
if (config.type === 'wxwork') { if (config.type === 'wxwork') {
if (!wxworkConfig || !wxworkConfig.enable) { if (!wxworkConfig) {
result.warnings.push('企业微信未启用'); result.isValid = false;
} result.errors.push('企业微信配置不存在');
if (!wxworkConfig.contact_url) { } else {
result.warnings.push('企业微信活码链接未配置'); if (!wxworkConfig.enable) {
result.warnings.push('企业微信功能未启用');
}
if (!wxworkConfig.contact_url) {
result.warnings.push('企业微信活码链接未配置,将使用原有客服方式');
}
} }
} }
@@ -109,39 +122,40 @@ export class CustomerService {
} }
/** /**
* 跳转到 AI 客服页面Dify * 跳转到Dify客服页面
*/ */
openDifyService() { openDifyService() {
try { try {
// 清除未读数(如果存在) if (this.vm.setAiUnreadCount) {
if (typeof this.vm.setAiUnreadCount === 'function') {
this.vm.setAiUnreadCount(0); this.vm.setAiUnreadCount(0);
} }
// 强制跳转,忽略框架层的封装
// ✅ 修正路径:必须与 pages.json 中注册的路径一致 uni.redirectTo({
const aiChatUrl = '/pages_tool/ai-chat/index'; url: '/pages_tool/ai-chat/index',
// ✅ 使用 navigateTo 保留返回栈(体验更好)
uni.navigateTo({
url: aiChatUrl,
fail: (err) => { fail: (err) => {
console.error('跳转 AI 客服失败:', err); // 兜底使用window.location跳转H5
// H5 兜底
// #ifdef H5 // #ifdef H5
window.location.href = aiChatUrl; window.location.href = '/pages_tool/ai-chat/index';
// #endif // #endif
uni.showToast({ title: '打开客服失败', icon: 'none' }); console.error('跳转Dify客服失败:', err);
uni.showToast({
title: '跳转客服失败',
icon: 'none'
});
} }
}); });
} catch (e) { } catch (e) {
console.error('跳转 AI 客服异常:', e); console.error('跳转Dify客服异常:', e);
uni.showToast({ title: '打开客服失败', icon: 'none' }); uni.showToast({
title: '跳转客服失败',
icon: 'none'
});
} }
} }
/** /**
* 处理客服点击事件(统一入口) * 处理客服点击事件
* @param {Object} options 选项参数(用于消息卡片等) * @param {Object} options 选项参数
*/ */
handleCustomerClick(options = {}) { handleCustomerClick(options = {}) {
const validation = this.validateConfig(); const validation = this.validateConfig();
@@ -156,9 +170,6 @@ export class CustomerService {
} }
const config = this.getPlatformConfig(); const config = this.getPlatformConfig();
console.log('【当前客服配置】', config);
console.log('【客服类型】', config.type);
const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options; const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
if (config.type === 'none') { if (config.type === 'none') {
@@ -166,51 +177,44 @@ export class CustomerService {
return; return;
} }
// 核心路由:根据 type 决定行为 // 核心分支:根据最新的type处理
switch (config.type) { switch (config.type) {
case 'aikefu': case 'aikefu':
console.log('【跳转 AI 客服】目标路径: /pages_tool/ai-chat/index');
this.openDifyService(); this.openDifyService();
break; break;
case 'wxwork': case 'wxwork':
console.log('【跳转企业微信客服】');
this.openWxworkService(false, config, options); this.openWxworkService(false, config, options);
break; break;
case 'third': case 'third':
console.log('【跳转第三方客服】');
this.openThirdService(config);
break;
case 'miniprogram':
console.log('【跳转第三方小程序客服】');
this.openThirdService(config); this.openThirdService(config);
break; break;
case 'niushop': case 'niushop':
console.log('【跳转牛商客服】');
this.openNiushopService(niushop); this.openNiushopService(niushop);
break; break;
case 'weapp': case 'weapp':
console.log('【跳转微信官方客服】');
this.openWeappService(config, options); this.openWeappService(config, options);
break; break;
case 'aliapp': case 'aliapp':
console.log('【跳转支付宝客服】');
this.openAliappService(config); this.openAliappService(config);
break; break;
default: default:
console.error('【未知客服类型】', config.type);
this.makePhoneCall(); this.makePhoneCall();
} }
} }
// ================== 各类型客服实现 ================== /**
* 打开企业微信客服
* @param {boolean} useOriginalService 是否使用原有客服方式
* @param {Object} servicerConfig 客服配置
* @param {Object} options 选项参数
*/
openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) { openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) {
const config = servicerConfig || this.getPlatformConfig(); const config = servicerConfig || this.getPlatformConfig();
const wxworkConfig = this.getWxworkConfig(); const wxworkConfig = this.getWxworkConfig();
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options; const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
if (!useOriginalService && wxworkConfig?.enable && wxworkConfig?.contact_url) { if (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) {
wx.navigateToMiniProgram({ wx.navigateToMiniProgram({
appId: 'wxeb490c6f9b154ef9', appId: 'wxeb490c6f9b154ef9',
path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`, path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`,
@@ -221,16 +225,9 @@ export class CustomerService {
} }
}); });
} else { } else {
// 检查是否有企业微信配置
if (!config.wxwork_url && !config.corpid) {
console.error('企业微信配置不完整,缺少 wxwork_url 或 corpid');
uni.showToast({ title: '企业微信配置不完整', icon: 'none' });
this.fallbackToPhoneCall();
return;
}
wx.openCustomerServiceChat({ wx.openCustomerServiceChat({
extInfo: { url: config.wxwork_url || '' }, extInfo: { url: config.wxwork_url },
corpId: config.corpid || '', corpId: config.corpid,
showMessageCard: true, showMessageCard: true,
sendMessageTitle, sendMessageTitle,
sendMessagePath, sendMessagePath,
@@ -240,181 +237,224 @@ export class CustomerService {
// #endif // #endif
// #ifdef H5 // #ifdef H5
if (!useOriginalService && wxworkConfig?.enable && wxworkConfig?.contact_url) { if (wxworkConfig?.enable && wxworkConfig?.contact_url) {
window.location.href = wxworkConfig.contact_url; window.location.href = wxworkConfig.contact_url;
} else if (config.wxwork_url) { } else if (config.wxwork_url) {
window.location.href = config.wxwork_url; location.href = config.wxwork_url;
} else { } else {
this.fallbackToPhoneCall(); this.fallbackToPhoneCall();
} }
// #endif // #endif
} }
/**
* 打开第三方客服
* @param {Object} config 客服配置
*/
openThirdService(config) { openThirdService(config) {
console.log('【第三方客服配置】', config);
console.log('【配置字段】', Object.keys(config));
// 支持多种可能的字段名
const miniAppId = config.mini_app_id || config.miniAppId || config.appid || config.appId || config.app_id;
const miniAppPath = config.mini_app_path || config.miniAppPath || config.path || config.page_path || '';
console.log('【解析后的小程序配置】AppID:', miniAppId, 'Path:', miniAppPath);
// 优先处理第三方微信小程序客服
if (miniAppId) {
console.log('【跳转第三方小程序】AppID:', miniAppId, 'Path:', miniAppPath);
// #ifdef MP-WEIXIN
wx.navigateToMiniProgram({
appId: miniAppId,
path: miniAppPath,
success: () => {
console.log('【跳转第三方小程序成功】');
},
fail: (err) => {
console.error('【跳转第三方小程序失败】', err);
uni.showToast({ title: '跳转失败,请稍后重试', icon: 'none' });
}
});
// #endif
// #ifdef H5
uni.showToast({ title: '第三方小程序客服仅在微信小程序中可用', icon: 'none' });
// #endif
return;
}
// 处理第三方链接客服
if (config.third_url) { if (config.third_url) {
console.log('【跳转第三方链接】', config.third_url);
// #ifdef H5
window.location.href = config.third_url; window.location.href = config.third_url;
// #endif
// #ifdef MP-WEIXIN
uni.setClipboardData({
data: config.third_url,
success: () => {
uni.showToast({ title: '链接已复制,请在浏览器打开', icon: 'none' });
}
});
// #endif
} else { } else {
console.error('【第三方客服配置不完整】缺少 mini_app_id 或 third_url');
this.fallbackToPhoneCall(); this.fallbackToPhoneCall();
} }
} }
/**
* 打开牛商客服
* @param {Object} niushop 牛商参数
*/
openNiushopService(niushop) { openNiushopService(niushop) {
if (Object.keys(niushop).length > 0 && this.vm.$util?.redirectTo) { if (Object.keys(niushop).length > 0) {
this.vm.$util.redirectTo('/pages_tool/chat/room', niushop); this.vm.$util.redirectTo('/pages_tool/chat/room', niushop);
} else { } else {
this.makePhoneCall(); this.makePhoneCall();
} }
} }
/**
* 打开微信小程序客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
openWeappService(config, options = {}) { openWeappService(config, options = {}) {
// 如果 useOfficial 为 true 或 undefined则使用原生系统客服由 button open-type="contact" 触发) if (!this.shouldUseCustomService(config)) {
// 此方法仅用于自定义跳转(如 useOfficial: false console.log('使用官方微信小程序客服');
if (config.useOfficial !== false) {
// 不做任何事,应由 <button open-type="contact"> 触发
console.log('使用微信官方客服,请确保按钮为 <button open-type="contact">');
return; return;
} }
console.log('使用自定义微信小程序客服');
this.handleCustomWeappService(config, options); this.handleCustomWeappService(config, options);
} }
/**
* 处理自定义微信小程序客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
handleCustomWeappService(config, options = {}) { handleCustomWeappService(config, options = {}) {
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
if (config.customServiceUrl) { if (config.customServiceUrl) {
let url = config.customServiceUrl; let url = config.customServiceUrl;
const params = []; const params = [];
const { sendMessageTitle, sendMessagePath, sendMessageImg } = options;
if (sendMessageTitle) params.push(`title=${encodeURIComponent(sendMessageTitle)}`); if (sendMessageTitle) params.push(`title=${encodeURIComponent(sendMessageTitle)}`);
if (sendMessagePath) params.push(`path=${encodeURIComponent(sendMessagePath)}`); if (sendMessagePath) params.push(`path=${encodeURIComponent(sendMessagePath)}`);
if (sendMessageImg) params.push(`img=${encodeURIComponent(sendMessageImg)}`); if (sendMessageImg) params.push(`img=${encodeURIComponent(sendMessageImg)}`);
if (params.length > 0) { if (params.length > 0) {
url += (url.includes('?') ? '&' : '?') + params.join('&'); url += (url.includes('?') ? '&' : '?') + params.join('&');
} }
uni.navigateTo({ url });
uni.navigateTo({
url: url,
fail: (err) => {
console.error('跳转自定义客服页面失败:', err);
this.tryThirdPartyService(config, options);
}
});
return; return;
} }
this.tryThirdPartyService(config, options); this.tryThirdPartyService(config, options);
} }
/**
* 尝试使用第三方客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
tryThirdPartyService(config, options = {}) { tryThirdPartyService(config, options = {}) {
// 支持第三方微信小程序客服 if (config.thirdPartyServiceUrl) {
if (config.thirdPartyMiniAppId || config.mini_app_id) {
// #ifdef MP-WEIXIN
wx.navigateToMiniProgram({
appId: config.thirdPartyMiniAppId || config.mini_app_id,
path: config.thirdPartyMiniAppPath || config.mini_app_path || ''
});
// #endif
return;
}
// 支持第三方链接客服
if (config.thirdPartyServiceUrl || config.third_url) {
const serviceUrl = config.thirdPartyServiceUrl || config.third_url;
// #ifdef H5 // #ifdef H5
window.open(serviceUrl, '_blank'); window.open(config.thirdPartyServiceUrl, '_blank');
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
uni.setClipboardData({ data: serviceUrl }); if (config.thirdPartyMiniAppId) {
uni.showToast({ title: '客服链接已复制', icon: 'none' }); 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 // #endif
return; return;
} }
this.fallbackToPhoneCall(); this.fallbackToPhoneCall();
} }
/**
* 降级到电话客服
*/
fallbackToPhoneCall() {
uni.showModal({
title: '联系客服',
content: '在线客服暂时不可用,是否拨打电话联系客服?',
success: (res) => {
if (res.confirm) {
this.makePhoneCall();
}
}
});
}
/**
* 打开支付宝小程序客服
* @param {Object} config 客服配置
*/
openAliappService(config) { openAliappService(config) {
if (config.type === 'aikefu') { console.log('支付宝小程序客服', config);
this.openDifyService(); switch (config.type) {
} else if (config.type === 'third') { case 'aikefu':
this.openThirdService(config); this.openDifyService();
} else { break;
// 支付宝原生客服由 button open-type="contact" 触发,此处不处理 case 'third':
console.log('使用支付宝官方客服'); this.openThirdService(config);
break;
default:
console.log('使用支付宝官方客服');
break;
} }
} }
// ================== 辅助方法 ================== /**
* 拨打电话
*/
makePhoneCall() { makePhoneCall() {
this.vm.$api.sendRequest({ this.vm.$api.sendRequest({
url: '/api/site/shopcontact', url: '/api/site/shopcontact',
success: res => { success: res => {
if (res.code === 0 && res.data?.mobile) { if (res.code === 0 && res.data?.mobile) {
uni.makePhoneCall({ phoneNumber: res.data.mobile }); uni.makePhoneCall({
phoneNumber: res.data.mobile
});
} else { } else {
uni.showToast({ title: '暂无客服电话', icon: 'none' }); uni.showToast({
title: '暂无客服电话',
icon: 'none'
});
} }
}, },
fail: () => { fail: () => {
uni.showToast({ title: '获取客服电话失败', icon: 'none' }); uni.showToast({
title: '获取客服电话失败',
icon: 'none'
});
} }
}); });
} }
/**
* 显示无客服弹窗
*/
showNoServicePopup() { showNoServicePopup() {
const siteInfo = this.vm.$store.state.siteInfo || {}; const siteInfo = this.vm.$store.state.siteInfo || {};
const message = siteInfo?.site_tel const message = siteInfo?.site_tel
? `请联系客服,客服电话是 ${siteInfo.site_tel}` ? `请联系客服,客服电话是${siteInfo.site_tel}`
: '抱歉,商家暂无客服,请线下联系'; : '抱歉,商家暂无客服,请线下联系';
uni.showModal({ title: '联系客服', content: message, showCancel: false });
}
showConfigErrorPopup(errors) {
uni.showModal({ uni.showModal({
title: '客服配置错误', title: '联系客服',
content: `配置有误:\n${errors.join('\n')}`, content: message,
showCancel: false showCancel: false
}); });
} }
/**
* 显示配置错误弹窗
* @param {Array} errors 错误列表
*/
showConfigErrorPopup(errors) {
const message = errors.join('\n');
uni.showModal({
title: '配置错误',
content: `客服配置有误:\n${message}`,
showCancel: false
});
}
/**
* 降级处理:使用原有客服方式
*/
fallbackToOriginalService() { fallbackToOriginalService() {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '无法直接添加企业微信,是否使用其他方式联系客服?', content: '无法直接添加企业微信客服,是否使用其他方式联系客服?',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
this.openWxworkService(true); this.openWxworkService(true);
@@ -423,19 +463,9 @@ export class CustomerService {
}); });
} }
fallbackToPhoneCall() {
uni.showModal({
title: '提示',
content: '在线客服不可用,是否拨打电话联系客服?',
success: (res) => {
if (res.confirm) this.makePhoneCall();
}
});
}
/** /**
* 获取按钮配置(用于 template 中 v-if / open-type 判断) * 获取客服按钮配置
* @returns {Object} * @returns {Object} 按钮配置
*/ */
getButtonConfig() { getButtonConfig() {
const config = this.getPlatformConfig(); const config = this.getPlatformConfig();
@@ -443,23 +473,38 @@ export class CustomerService {
let openType = ''; let openType = '';
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
if (config.type === 'weapp' && config.useOfficial !== false) { if (config.type === 'weapp') {
openType = 'contact'; openType = config.useOfficial !== false ? 'contact' : '';
} }
// #endif // #endif
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
if (config.type === 'aliapp') openType = 'contact'; if (config.type === 'aliapp') openType = 'contact';
// #endif // #endif
return { ...config, openType }; 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 实例(通常是 this * @param {Object} vueInstance Vue实例
* @param {Object} externalConfig 可选:外部传入的最新配置(如从 DIY 数据中提取) * @param {Object} externalConfig 外部最新配置
* @returns {CustomerService} * @returns {CustomerService} 客服服务实例
*/ */
export function createCustomerService(vueInstance, externalConfig = null) { export function createCustomerService(vueInstance, externalConfig = null) {
return new CustomerService(vueInstance, externalConfig); return new CustomerService(vueInstance, externalConfig);

View File

@@ -1,9 +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'; import Config from '@/common/js/config.js';
import util from '@/common/js/util.js';
let systemInfo = util.getDeviceInfo();
let systemInfo = {};
try {
// 合并设备信息和窗口信息
systemInfo = {...uni.getDeviceInfo(), ...uni.getWindowInfo()};
} catch (e) {
// 兼容旧版本
systemInfo = uni.getSystemInfoSync();
}
export default { export default {
data() { data() {
return { return {
@@ -37,6 +42,7 @@ export default {
latitude: null, // 纬度 latitude: null, // 纬度
longitude: null, // 经度 longitude: null, // 经度
currentPosition: '', // 当前位置 currentPosition: '', // 当前位置
currentStore: null,//当前门店
nearestStore: null, // 离自己最近的门店 nearestStore: null, // 离自己最近的门店
storeTimeOut: null, // 没有获取到定位,则获取默认门店 storeTimeOut: null, // 没有获取到定位,则获取默认门店
@@ -45,19 +51,26 @@ export default {
diyRoute: '', // 页面路由 diyRoute: '', // 页面路由
openBottomNav: false, openBottomNav: false,
isShowCopyRight: false, isShowCopyRight: false,
option: null,
firstDiy: true,
//启动广告 //启动广告
adv:{}, adv: {},
}; };
}, },
onLoad(option) { onLoad(option) {
this.option = option;
uni.hideTabBar(); 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.source_member) uni.setStorageSync('source_member', option.source_member);// 分享链接进入
// 小程序扫码进入 if (option.scene) {// 小程序扫码进入
if (option.scene) {
var sceneParams = decodeURIComponent(option.scene); var sceneParams = decodeURIComponent(option.scene);
sceneParams = sceneParams.split('&'); sceneParams = sceneParams.split('&');
if (sceneParams.length) { if (sceneParams.length) {
@@ -67,64 +80,36 @@ export default {
} }
} }
// H5地图选择位置回调
// #ifdef H5 // #ifdef H5
// H5地图选择位置回调数据 // H5地图选择位置回调数据
if (option.module && option.module == 'locationPicker') { if (option.module && option.module == 'locationPicker') {
option.name = ''; // 清空地址 option.name = ''; // 自定义页面传参id和name防止获取地址时变量混淆
this.locationModule = option.module; this.locationModule = option.module;
this.latitude = option.latng.split(',')[0]; this.latitude = option.latng.split(',')[0];
this.longitude = option.latng.split(',')[1]; this.longitude = option.latng.split(',')[1];
} }
// #endif // #endif
//自定义页面的id和名称
this.id = option.id || 0; this.id = option.id || 0;
this.name = option.name || ''; this.name = option.name || '';
uni.removeStorageSync('manual_store_info'); // 清除手动切换门店缓存 //获取当前门店信息 必须是首页且不是手动切换操作
uni.removeStorageSync('manual_change_store'); // 清楚手动切换门店标识 let current_route = this.$util.getCurrentRoute();
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
// H5才会执行 if (current_route.path.indexOf('/pages/index/index') > -1 && !manualChangeStore) {
if (this.locationModule == 'locationPicker') { this.getCurrentStore(option);
// 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();
} }
}, },
onShow() { async onShow() {
if (this.firstDiy) {
this.init(); this.firstDiy = false;
await this.getDiyMethod();
}
await this.onShowMethod();
}, },
onHide() { onHide() {
if (this.storeTimeOut) {
clearTimeout(this.storeTimeOut);
}
// 跳转页面要关闭门店弹出框
this.closeChooseStorePopup();
// 清除限时秒杀定时器 // 清除限时秒杀定时器
this.$store.commit('setDiySeckillInterval', 0); this.$store.commit('setDiySeckillInterval', 0);
}, },
@@ -151,7 +136,7 @@ export default {
return str; return str;
}, },
backgroundUrl() { 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; return str;
}, },
textNavColor() { textNavColor() {
@@ -189,30 +174,34 @@ export default {
} }
}, },
watch: { watch: {
location: function (nVal) { /* location: function (nVal) {
if (nVal) { if (nVal && !this.latitude && !this.longitude) {
this.latitude = nVal.latitude; this.latitude = nVal.latitude;
this.longitude = nVal.longitude; this.longitude = nVal.longitude;
this.getNearestStore(); this.getStoreInfoByLocation();
this.getCurrentLocation();
} }
}, */
initStatus: function (val) {
if (!this.option.store_id) this.getLocation();
} }
}, },
methods: { methods: {
play(){ async getDiyMethod() {
console.log(123) 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) { // if (this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
this.$util.getLocation({ // this.$util.getLocation({
fail: (res) => { // fail: (res) => {
// 拒绝定位,进入默认总店 // // 失败了不需要做任何处理,保持之前的门店选择即可
this.enterDefaultStore(); // }
} // });
}); // }
}
if (this.storeToken) { if (this.storeToken) {
//记录分享关系 //记录分享关系
@@ -227,17 +216,15 @@ export default {
this.$store.commit('setDiySeckillInterval', 1); this.$store.commit('setDiySeckillInterval', 1);
//小程序分享
// #ifdef MP-WEIXIN
this.$util.getMpShare().then(res => {
this.mpShareData = res;
});
// #endif
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店 let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
if (manualChangeStore) { if (manualChangeStore) {
uni.removeStorageSync('manual_change_store'); 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({ uni.pageScrollTo({
duration: 200, duration: 200,
@@ -269,8 +256,14 @@ export default {
query.select('.page-header').boundingClientRect(data => { query.select('.page-header').boundingClientRect(data => {
if (data && data.height) { if (data && data.height) {
// 从状态栏高度开始算 // 从状态栏高度开始算
this.paddingTop = data.height + 'px'; if (!this.diyData.global.topNavBg) {
this.marginTop = -data.height + 'px'; this.paddingTop = 0;
this.marginTop = 0;
} else {
this.paddingTop = data.height + 'px';
this.marginTop = -data.height + 'px';
}
clearInterval(time); clearInterval(time);
} }
}).exec(); }).exec();
@@ -278,7 +271,7 @@ export default {
}, 50); }, 50);
// #endif // #endif
}, },
async getDiyAdv(){ async getDiyAdv() {
//启动广告 //启动广告
let res = await this.$api.sendRequest({ let res = await this.$api.sendRequest({
url: '/api/diyview/getstartadv', url: '/api/diyview/getstartadv',
@@ -287,13 +280,13 @@ export default {
}); });
this.adv = res.value this.adv = res.value
// 弹框形式,首次弹出 1每次弹出 0 // 弹框形式,首次弹出 1每次弹出 0
if(this.adv.advshow == 1){ if (this.adv.advshow == 1) {
setTimeout(() => { setTimeout(() => {
if (res.value.advtype == 1) { if (res.value.advtype == 1) {
var popwindow_count = uni.getStorageSync(this.id + this.name + '_popwindow_count'); var popwindow_count = uni.getStorageSync(this.id + this.name + '_popwindow_count');
if ((this.$refs.uniPopupWindow && popwindow_count == '') || ( if ((this.$refs.uniPopupWindow && popwindow_count == '') || (
this.$refs.uniPopupWindow && popwindow_count == 1)) { this.$refs.uniPopupWindow && popwindow_count == 1)) {
this.$refs.uniPopupWindow.open(); this.$refs.uniPopupWindow.open();
uni.setStorageSync(this.id + this.name + '_popwindow_count', 1); uni.setStorageSync(this.id + this.name + '_popwindow_count', 1);
} }
@@ -303,7 +296,7 @@ export default {
} }
}, 500); }, 500);
} }
}, },
async getDiyInfo() { async getDiyInfo() {
let res = await this.$api.sendRequest({ let res = await this.$api.sendRequest({
@@ -311,7 +304,7 @@ export default {
data: { data: {
id: this.id, id: this.id,
name: this.name, name: this.name,
en_type:uni.getStorageSync("lang"),//获取语言底部 en_type: uni.getStorageSync("lang"),//获取语言底部
}, },
async: false async: false
}); });
@@ -336,14 +329,10 @@ export default {
let diyDataValue = res.data; let diyDataValue = res.data;
if (diyDataValue.value) { if (diyDataValue.value) {
this.diyData = JSON.parse(diyDataValue.value); this.diyData = JSON.parse(diyDataValue.value);
this.$langConfig.title(this.diyData.global.title);
// 导航栏标题要根据语言环境切换
const title = this.isEnEnv ? this.diyData?.global?.en_title : this.diyData?.global?.title;
if (title) this.$langConfig.title(title);
this.mpCollect = this.diyData.global.mpCollect; this.mpCollect = this.diyData.global.mpCollect;
this.setPublicShare(); this.setPublicShare();
/* if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) { if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
// 弹框形式,首次弹出 1每次弹出 0 // 弹框形式,首次弹出 1每次弹出 0
setTimeout(() => { setTimeout(() => {
if (this.diyData.global.popWindow.count == 1) { if (this.diyData.global.popWindow.count == 1) {
@@ -358,7 +347,7 @@ export default {
uni.setStorageSync(this.id + this.name + '_popwindow_count', 0); uni.setStorageSync(this.id + this.name + '_popwindow_count', 0);
} }
}, 500); }, 500);
}*/ }
// 修改diy数据结构排序 // 修改diy数据结构排序
let searchIndex = -1; let searchIndex = -1;
@@ -381,14 +370,15 @@ export default {
this.diyData.value.splice(topCategoryIndex, 1); this.diyData.value.splice(topCategoryIndex, 1);
this.diyData.value.splice(0, 0, ...topCategoryData); this.diyData.value.splice(0, 0, ...topCategoryData);
this.diyData.value.splice(1, 0, ...searchData); this.diyData.value.splice(1, 0, ...searchData);
} else } else {
this.diyData.value.splice(0, 0, ...searchData); this.diyData.value.splice(0, 0, ...searchData);
}
} else if (searchIndex != -1 && topCategoryIndex == -1) { } else if (searchIndex != -1 && topCategoryIndex == -1) {
let searchData = this.diyData.value.slice(searchIndex, searchIndex + 1); let searchData = this.diyData.value.slice(searchIndex, searchIndex + 1);
this.diyData.value.splice(searchIndex, 1); this.diyData.value.splice(searchIndex, 1);
this.diyData.value.splice(0, 0, ...searchData); this.diyData.value.splice(0, 0, ...searchData);
} }
this.topIndexValue = null;
for (var i = 0; i < this.diyData.value.length; i++) { for (var i = 0; i < this.diyData.value.length; i++) {
// 分类导航组件 // 分类导航组件
if (this.diyData.value[i].componentName == 'TopCategory') { if (this.diyData.value[i].componentName == 'TopCategory') {
@@ -408,7 +398,6 @@ export default {
} }
} }
// #ifdef MP // #ifdef MP
//小程序收藏 //小程序收藏
if (!uni.getStorageSync('isCollect') && this.diyData.global.mpCollect) { if (!uni.getStorageSync('isCollect') && this.diyData.global.mpCollect) {
@@ -422,6 +411,45 @@ export default {
this.openBottomNav = this.diyData.global.openBottomNav; this.openBottomNav = this.diyData.global.openBottomNav;
} }
this.isShowCopyRight = true; 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() { closePopupWindow() {
@@ -436,44 +464,131 @@ export default {
this.$util.diyRedirectTo(this.diyData.global.popWindow.link); this.$util.diyRedirectTo(this.diyData.global.popWindow.link);
this.closePopupWindow(); this.closePopupWindow();
}, },
openChooseStorePopup() { /******************************************** 获取门店相关 START ***************************************************/
if (this.globalStoreConfig && this.globalStoreConfig.confirm_popup_control == 1) { /**
let storeInfo = this.globalStoreInfo; * 1、分享携带门店id
* 门店id正确 进入门店
// 首次进入门店,没有门店信息 || 当前位置的门店和缓存门店不一致要弹框 * 门店id错误 通过定位获取门店
if (!storeInfo || storeInfo && this.nearestStore && storeInfo.store_id != this.nearestStore.store_id) { * 2、通过定位获取门店
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.open(); * 开启获取定位
* 同意获取定位 获取最近门店 进入门店
* 拒绝获取定位
* 平台运营模式 进入默认门店
* 连锁门店模式 提示获取定位失败,手动选择门店或引导去开启定位
* 关闭获取定位
* 平台运营模式 进入默认门店
* 连锁门店模式 提示获取定位失败,手动选择门店
*/
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'); // 手动选择门店 getStoreInfoByLocation() {
if (manualStoreInfo) { if (this.latitude && this.longitude) {
this.nearestStore = manualStoreInfo; 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() { closeChooseStorePopup() {
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.close(); if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.close();
}, },
// 确认进入门店
enterStore() {
this.closeChooseStorePopup();
},
// 选择其他门店 // 选择其他门店
chooseOtherStore() { chooseOtherStore() {
this.$util.redirectTo('/pages_tool/store/list'); this.$util.redirectTo('/pages_tool/store/list');
this.closeChooseStorePopup(); this.closeChooseStorePopup();
}, },
// 打开地图重新选择位置 // 打开地图重新选择位置
reposition() { reGetLocation() {
// #ifdef MP // #ifdef MP
/*uni.chooseLocation({ uni.chooseLocation({
success: res => { success: res => {
this.latitude = res.latitude; this.latitude = res.latitude;
this.longitude = res.longitude; this.longitude = res.longitude;
this.currentPosition = res.name; this.currentPosition = res.name;
this.getNearestStore(); this.getStoreInfoByLocation();
this.getCurrentLocation();
}, },
fail(res) { fail(res) {
uni.getSetting({ uni.getSetting({
@@ -498,8 +613,7 @@ export default {
this.latitude = res.latitude; this.latitude = res.latitude;
this.longitude = res.longitude; this.longitude = res.longitude;
this.currentPosition = res.name; this.currentPosition = res.name;
this.getNearestStore(); this.getStoreInfoByLocation();
this.getCurrentLocation();
} }
}); });
}, 1000); }, 1000);
@@ -517,7 +631,7 @@ export default {
} }
}); });
} }
});*/ });
// #endif // #endif
// #ifdef H5 // #ifdef H5
@@ -538,9 +652,7 @@ export default {
data: data, data: data,
success: res => { success: res => {
if (res.code == 0 && res.data) { if (res.code == 0 && res.data) {
this.nearestStore = res.data; this.changeCurrentStore(res.data);
this.nearestStore.show_address = this.nearestStore.full_address.replace(/,/g, ' ') + ' ' + this.nearestStore.address;
this.openChooseStorePopup();
} }
} }
}); });
@@ -553,7 +665,6 @@ export default {
data.latitude = this.latitude; data.latitude = this.latitude;
data.longitude = this.longitude; data.longitude = this.longitude;
} }
this.$api.sendRequest({ this.$api.sendRequest({
url: '/api/store/getLocation', url: '/api/store/getLocation',
data: data, data: data,
@@ -569,26 +680,42 @@ export default {
// 定位失败,进入默认门店 // 定位失败,进入默认门店
enterDefaultStore() { enterDefaultStore() {
if (this.defaultStoreInfo) { if (this.defaultStoreInfo) {
if (!this.nearestStore) { this.changeCurrentStore(this.defaultStoreInfo);
this.nearestStore = this.defaultStoreInfo;
this.nearestStore.show_address = this.nearestStore.full_address.replace(/,/g, ' ') + ' ' + this.nearestStore.address;
}
if (this.currentPosition == '') this.currentPosition = '未获取到定位';
this.openChooseStorePopup();
} }
}, },
//连锁门店未定位选择门店
chooseStore() {
this.$util.redirectTo('/pages_tool/store/list');
},
//打开手机设置重新定位
openSetting() {
uni.openSetting({
success: res => {
this.getLocation();
}
})
},
/******************************************** 获取门店相关 END ***************************************************/
// 设置公众号分享 // 设置公众号分享
setPublicShare() { setPublicShare() {
let shareUrl = this.$config.h5Domain + this.diyRoute; let shareUrl = this.$config.h5Domain + this.diyRoute;
if (this.id) shareUrl += '?id=' + this.id; var store_info = this.$store.state.globalStoreInfo;
else if (this.name) shareUrl += '?name=' + this.name; //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({ this.$util.setPublicShare({
title: this.diyData.global.title, title: this.diyData.global.wechatShareTitle || this.diyData.global.title,
desc: '', desc: this.diyData.global.wechatShareDesc,
link: shareUrl, 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) { onPageScroll(e) {
this.scrollTop = e.scrollTop; this.scrollTop = e.scrollTop;
@@ -603,16 +730,17 @@ export default {
// 下拉刷新 // 下拉刷新
onPullDownRefresh() { onPullDownRefresh() {
this.$store.commit('setComponentRefresh'); this.$store.commit('setComponentRefresh');
this.getDiyMethod();
setTimeout(() => { setTimeout(() => {
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}, 50); }, 50);
}, },
// 分享给好友 // 分享给好友
onShareAppMessage() { onShareAppMessage() {
return this.mpShareData?.appMessage; return this.mpShareData.appMessage;
}, },
// 分享到朋友圈 // 分享到朋友圈
onShareTimeline() { onShareTimeline() {
return this.mpShareData?.timeLine; return this.mpShareData.timeLine;
} }
} }

View File

@@ -110,7 +110,7 @@ class EventBus {
// 异步触发事件,支持取消传播,并支持在监听处理后调用异步函数 defaultAsyncHandler // 异步触发事件,支持取消传播,并支持在监听处理后调用异步函数 defaultAsyncHandler
// 使用方式await eventBus.emit(eventName, data, defaultAsyncHandler) // 使用方式await eventBus.emit(eventName, data, defaultAsyncHandler)
// defaultAsyncHandler 会在监听器执行后被调用,签名为 defaultAsyncHandler(event, handler, handlerResult) // defaultAsyncHandler 会在每个监听器执行后被调用,签名为 defaultAsyncHandler(event, handler, handlerResult)
// 如果 defaultAsyncHandler 返回 Promise会等待其 resolve // 如果 defaultAsyncHandler 返回 Promise会等待其 resolve
// 如果 allowContinuePropagation 为 false事件触发后将立即返回不继续传播 // 如果 allowContinuePropagation 为 false事件触发后将立即返回不继续传播
// 如果 stopOnError 为 true在任意监听器抛出错误后立即停止传播 // 如果 stopOnError 为 true在任意监听器抛出错误后立即停止传播
@@ -123,7 +123,6 @@ class EventBus {
// helper to call defaultAsyncHandler only when allowed // helper to call defaultAsyncHandler only when allowed
const callDefaultAsyncHandler = async (evt, handler, handlerResult) => { const callDefaultAsyncHandler = async (evt, handler, handlerResult) => {
// console.log('callDefaultAsyncHandler', {evt, handler, handlerResult});
if (typeof defaultAsyncHandler !== 'function' || !allowAsyncHandlerRun) return if (typeof defaultAsyncHandler !== 'function' || !allowAsyncHandlerRun) return
try { try {
const res = defaultAsyncHandler(evt, handler, handlerResult) const res = defaultAsyncHandler(evt, handler, handlerResult)
@@ -153,7 +152,7 @@ class EventBus {
return !event.defaultPrevented return !event.defaultPrevented
} }
// 否则继续走普通 EventBus 处理fallthrough // 否则继续走普通 EventBus 处理fallthrough
} }
// 普通 EventBus 触发 // 普通 EventBus 触发
const handlers = this.events.get(eventName) const handlers = this.events.get(eventName)
@@ -190,7 +189,6 @@ class EventBus {
} }
// 在每个监听器执行后,如果允许并且提供了 defaultAsyncHandler就调用并等待它 // 在每个监听器执行后,如果允许并且提供了 defaultAsyncHandler就调用并等待它
// console.log('==> callDefaultAsyncHandler', {event, handler, awaitedResult})
await callDefaultAsyncHandler(event, handler, awaitedResult) await callDefaultAsyncHandler(event, handler, awaitedResult)
} catch (error) { } catch (error) {
console.error(`EventBus ${eventName} error:`, error) console.error(`EventBus ${eventName} error:`, error)

View File

@@ -1,170 +1,190 @@
export default { export default {
onLoad() { }, data() {
onShow() { return {
// 刷新多语言 // 页面样式,动态设置主色调
this.$langConfig.refresh(); themeColor: '' //''--base-color:#fa5d14;--base-help-color:#ff7e00;'
}, }
computed: { },
// 是否是英文环境 onLoad() {},
isEnEnv() { onShow() {
return this.$langConfig.getCurrentLocale() === 'en-us'; // 刷新多语言
}, this.$langConfig.refresh();
themeStyle() { let time = setInterval(() => {
return this.$store.state.themeStyle; let theme = this.themeStyle;
}, if (theme && theme.main_color) {
themeColor() { this.themeColorSet();
return this.$store.state.themeColor; clearInterval(time);
}, }
// 插件是否存在 }, 50);
addonIsExist() { },
return this.$store.state.addonIsExist; computed: {
}, themeStyle() {
tabBarList() { return this.$store.state.themeStyle;
return this.$store.state.tabBarList; },
}, // 插件是否存在
siteInfo() { addonIsExist() {
return this.$store.state.siteInfo; return this.$store.state.addonIsExist;
}, },
memberInfo() { tabBarList() {
return this.$store.state.memberInfo; return this.$store.state.tabBarList;
}, },
storeToken() { siteInfo() {
return this.$store.state.token; return this.$store.state.siteInfo;
}, },
bottomNavHidden() { memberInfo() {
return this.$store.state.bottomNavHidden; return this.$store.state.memberInfo;
}, },
globalStoreConfig() { storeToken() {
return this.$store.state.globalStoreConfig; return this.$store.state.token;
}, },
globalStoreInfo() { bottomNavHidden() {
return this.$store.state.globalStoreInfo; return this.$store.state.bottomNavHidden;
}, },
// 定位信息 globalStoreConfig() {
location() { return this.$store.state.globalStoreConfig;
return this.$store.state.location; },
}, globalStoreInfo() {
// 定位信息(缓存) return this.$store.state.globalStoreInfo;
locationStorage() { },
let data = uni.getStorageSync('location'); // 定位信息
if (data) { location() {
var date = new Date(); return this.$store.state.location;
if (this.mapConfig.wap_valid_time > 0) { },
data.is_expired = (date.getTime() / 1000) > data.valid_time; // 是否过期 // 定位信息(缓存)
} else { locationStorage() {
data.is_expired = false; let data = uni.getStorageSync('location');
} if (data) {
} var date = new Date();
return data; if (this.mapConfig.wap_valid_time > 0) {
}, data.is_expired = (date.getTime() / 1000) > data.valid_time; // 是否过期
// 默认总店(定位失败后使用) } else {
defaultStoreInfo() { data.is_expired = false;
return this.$store.state.defaultStoreInfo; }
}, }
// 组件刷新计数 return data;
componentRefresh() { },
return this.$store.state.componentRefresh; // 默认总店(定位失败后使用)
}, defaultStoreInfo() {
// AI客服配置 return this.$store.state.defaultStoreInfo;
globalAIKefuConfig() { },
return this.$store.state.globalAIKefuConfig; // 组件刷新计数
}, componentRefresh() {
// 客服配置 return this.$store.state.componentRefresh;
servicerConfig() { },
return this.$store.state.servicerConfig; // 客服配置
}, servicerConfig() {
// 企业微信配置 return this.$store.state.servicerConfig;
wxworkConfig() { },
return this.$store.state.wxworkConfig; // 企业微信配置
}, wxworkConfig() {
diySeckillInterval() { return this.$store.state.wxworkConfig;
return this.$store.state.diySeckillInterval; },
}, diySeckillInterval() {
tabBarHeight() { return this.$store.state.diySeckillInterval;
return this.$store.state.tabBarHeight; },
}, tabBarHeight() {
mapConfig() { return this.$store.state.tabBarHeight;
return this.$store.state.mapConfig; },
}, mapConfig() {
copyright() { return this.$store.state.mapConfig;
let copyright = this.$store.state.copyright; },
// 判断是否授权 copyright() {
if (copyright && !copyright.auth) { let copyright = this.$store.state.copyright;
copyright.logo = ''; // 判断是否授权
copyright.copyright_link = ''; if (copyright && !copyright.auth) {
} copyright.logo = '';
return copyright; copyright.copyright_link = '';
}, }
cartList() { return copyright;
return this.$store.state.cartList; },
}, cartList() {
cartIds() { return this.$store.state.cartList;
return this.$store.state.cartIds; },
}, cartIds() {
cartNumber() { return this.$store.state.cartIds;
return this.$store.state.cartNumber; },
}, cartNumber() {
cartMoney() { return this.$store.state.cartNumber;
return this.$store.state.cartMoney; },
} cartMoney() {
}, return this.$store.state.cartMoney;
methods: { }
},
// 颜色变浅(>0、变深函数<0 methods: {
lightenDarkenColor(color, amount) { themeColorSet() {
let theme = this.themeStyle;
var usePound = false; this.themeColor = `--base-color:${theme.main_color};--base-help-color:${theme.aux_color};`;
if (this.tabBarHeight != '56px') this.themeColor += `--tab-bar-height:${this.tabBarHeight};`
if (color[0] == "#") { Object.keys(theme).forEach(key => {
color = color.slice(1); let data = theme[key];
usePound = true; if (typeof(data) == "object") {
} Object.keys(data).forEach(k => {
this.themeColor += '--' + k.replace(/_/g, "-") + ':' + data[k] + ';';
var num = parseInt(color, 16); });
} else if (typeof(key) == "string" && key) {
var r = (num >> 16) + amount; this.themeColor += '--' + key.replace(/_/g, "-") + ':' + data + ';';
}
if (r > 255) r = 255; });
else if (r < 0) r = 0; for (let i = 9; i >= 5; i--) {
let color = this.$util.colourBlend(theme.main_color, '#ffffff', (i / 10));
var b = ((num >> 8) & 0x00FF) + amount; this.themeColor += `--base-color-light-${i}:${color};`;
}
if (b > 255) b = 255; },
else if (b < 0) b = 0; // 颜色变浅(>0、变深函数<0
lightenDarkenColor(color, amount) {
var g = (num & 0x0000FF) + amount;
var usePound = false;
if (g > 255) g = 255;
else if (g < 0) g = 0; if (color[0] == "#") {
color = color.slice(1);
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16); usePound = true;
}
},
/** var num = parseInt(color, 16);
* 切换门店
* @param {Object} info 门店信息 var r = (num >> 16) + amount;
* @param {Object} isJump 是否跳转到首页
*/ if (r > 255) r = 255;
changeStore(info, isJump) { else if (r < 0) r = 0;
if (info) {
this.$store.commit('setGlobalStoreInfo', info); var b = ((num >> 8) & 0x00FF) + amount;
}
let route = this.$util.getCurrRoute(); if (b > 255) b = 255;
if (isJump && route != 'pages/index/index') { else if (b < 0) b = 0;
uni.setStorageSync('manual_change_store', true); // 手动切换门店
this.$store.dispatch('getCartNumber'); //重新获取购物车数据 var g = (num & 0x0000FF) + amount;
this.$util.redirectTo(this.$util.INDEX_PAGE_URL);
} if (g > 255) g = 255;
} else if (g < 0) g = 0;
},
filters: { return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
/**
* 金额格式化输出 },
* @param {Object} money /**
*/ * 切换门店
moneyFormat(money) { * @param {Object} info 门店信息
if (isNaN(parseFloat(money))) return money; * @param {Object} isJump 是否跳转到首页
return parseFloat(money).toFixed(2); */
} changeStore(info, isJump) {
} if (info) {
this.$store.commit('setGlobalStoreInfo', info);
}
let route = this.$util.getCurrRoute();
if (isJump && route != 'pages/index/index') {
uni.setStorageSync('manual_change_store', true); // 手动切换门店
this.$store.dispatch('getCartNumber'); //重新获取购物车数据
this.$util.redirectTo('/pages/index/index');
}
}
},
filters: {
/**
* 金额格式化输出
* @param {Object} money
*/
moneyFormat(money) {
if (isNaN(parseFloat(money))) return money;
return parseFloat(money).toFixed(2);
}
}
} }

View File

@@ -1,371 +1,382 @@
// 商品详情业务 // 商品详情业务
import htmlParser from '@/common/js/html-parser'; import htmlParser from '@/common/js/html-parser';
export default { export default {
data() { data() {
return { return {
skuId: 0, skuId: 0,
goodsId: 0, goodsId: 0,
// 商品详情 // 商品详情
goodsSkuDetail: { goodsSkuDetail: {
goods_id: 0, goods_id: 0,
goods_service: [] goods_service: []
}, },
preview: 0, //是否开启预览0不开启1开启 preview: 0, //是否开启预览0不开启1开启
//评价 //评价
contactData: { contactData: {
title: '', title: '',
path: '', path: '',
img: '' img: ''
}, },
shareQuery: '', // 分享参数 shareQuery: '', // 分享参数
shareUrl: '', // 分享链接 shareUrl: '', // 分享链接
source_member: 0, //分享人的id source_member: 0, //分享人的id
chatRoomParams: {}, // 联系客服参数 chatRoomParams: {}, // 联系客服参数
isIphoneX: false, //判断手机是否是iphoneX以上 isIphoneX: false, //判断手机是否是iphoneX以上
whetherCollection: 0, whetherCollection: 0,
posterParams: {}, //海报所需参数 posterParams: {}, //海报所需参数
shareImg: '', shareImg: '',
navbarData: { navbarData: {
title: '', title: '',
topNavColor: "#ffffff", topNavColor: "#ffffff",
topNavBg: false, topNavBg: false,
navBarSwitch: true, // 导航栏是否显示 navBarSwitch: true, // 导航栏是否显示
textNavColor: "#333333", textNavColor: "#333333",
moreLink: { moreLink: {
name: "" name: ""
}, },
navStyle: 1, navStyle: 1,
bgUrl: '', bgUrl: '',
textImgPosLink: 'left' textImgPosLink: 'left'
}, },
} goodsFormVal: []
}, }
onLoad(data) { },
//刷新多语言 onLoad(data) {
this.$langConfig.refresh(); //刷新多语言
// #ifdef MP-ALIPAY this.$langConfig.refresh();
let options = my.getLaunchOptionsSync(); // #ifdef MP-ALIPAY
options.query && Object.assign(data, options.query); let options = my.getLaunchOptionsSync();
// #endif options.query && Object.assign(data, options.query);
// #endif
this.preview = data.preview || 0;
this.isIphoneX = this.$util.uniappIsIPhoneX(); this.preview = data.preview || 0;
this.isIphoneX = this.$util.uniappIsIPhoneX();
if (data.source_member) {
uni.setStorageSync('source_member', data.source_member); if (data.source_member) {
this.source_member = 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 (this.storeToken && uni.getStorageSync('source_member')) {
} this.$util.onSourceMember(uni.getStorageSync('source_member'));
}
// 小程序扫码进入
if (data.scene) { // 小程序扫码进入
var sceneParams = decodeURIComponent(data.scene); if (data.scene) {
sceneParams = sceneParams.split('&'); var sceneParams = decodeURIComponent(data.scene);
if (sceneParams.length) { sceneParams = sceneParams.split('&');
sceneParams.forEach(item => { if (sceneParams.length) {
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]); sceneParams.forEach(item => {
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1); if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
}); if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
} });
} }
}, }
onShow() { },
}, onShow() {
methods: { },
// 处理商品详情数据 methods: {
handleGoodsSkuData() { detailChangeVal(data) {
// this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name; this.goodsFormVal = data;
//设置标题 },
// this.$langConfig.title(this.navbarData.title); // 处理商品详情数据
if (this.goodsSkuDetail.config) { handleGoodsSkuData() {
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch; 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.whetherCollection = this.goodsSkuDetail.is_collect; // 用户关注商品状态 this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
}
this.modifyGoodsInfo();
this.whetherCollection = this.goodsSkuDetail.is_collect; // 用户关注商品状态
// 初始化商品详情视图数据
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({ this.modifyGoodsInfo();
sku_id: this.skuId,
goods_id: this.goodsSkuDetail.goods_id, // 初始化商品详情视图数据
preview: this.preview, if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
source_member: this.source_member, sku_id: this.skuId,
posterParams: this.posterParams, goods_id: this.goodsSkuDetail.goods_id,
posterApi: this.posterApi, preview: this.preview,
shareUrl: this.shareUrl, source_member: this.source_member,
goodsRoute: this.goodsRoute, posterParams: this.posterParams,
isVirtual: this.goodsSkuDetail.is_virtual, posterApi: this.posterApi,
deliveryType: this.goodsSkuDetail.express_type, shareUrl: this.shareUrl,
whetherCollection: this.goodsSkuDetail.is_collect, goodsRoute: this.goodsRoute,
evaluateConfig: this.goodsSkuDetail.evaluate_config, isVirtual: this.goodsSkuDetail.is_virtual,
evaluateList: this.goodsSkuDetail.evaluate_list, deliveryType: this.goodsSkuDetail.express_type,
evaluateCount: this.goodsSkuDetail.evaluate_count 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"; goods_class : this.goodsSkuDetail.goods_class,
sale_store: this.goodsSkuDetail.sale_store
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.video_url) this.switchMedia = "video";
// 多规格时合并主图 if (!Array.isArray(this.goodsSkuDetail.sku_images)) {
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) { if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
else this.goodsSkuDetail.sku_images = [];
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); // 多规格时合并主图
} if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
let maxHeight = ''; if (!Array.isArray(this.goodsSkuDetail.goods_image)) this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
let systemInfo = uni.getSystemInfoSync();
this.goodsSkuDetail.goods_image_list.forEach((item, index) => { this.goodsSkuDetail.sku_images = this.goodsSkuDetail.goods_image.concat(this.goodsSkuDetail.sku_images);
if (typeof item.pic_spec == "string") }
item.pic_spec = item.pic_spec.split('*');
let maxHeight = '';
let ratio = item.pic_spec[0] / systemInfo.windowWidth; let systemInfo = uni.getSystemInfoSync();
item.pic_spec[0] = item.pic_spec[0] / ratio; this.goodsSkuDetail.goods_image_list.forEach((item, index) => {
item.pic_spec[1] = item.pic_spec[1] / ratio; if (typeof item.pic_spec == "string")
item.pic_spec = item.pic_spec.split('*');
if (!maxHeight || maxHeight > item.pic_spec[1]) {
maxHeight = item.pic_spec[1]; 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;
this.goodsSkuDetail.swiperHeight = maxHeight + 'px';
if (!maxHeight || maxHeight > item.pic_spec[1]) {
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件"; maxHeight = item.pic_spec[1];
}
// 当前商品SKU规格 });
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format); this.goodsSkuDetail.swiperHeight = maxHeight + 'px';
// 商品属性 this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
if (this.goodsSkuDetail.goods_attr_format) {
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format); // 当前商品SKU规格
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id"); if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
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) { if (this.goodsSkuDetail.goods_attr_format) {
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name; 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) // 商品SKU格式
// if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content); if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
//商品服务 // 商品详情
if (this.goodsSkuDetail.goods_service) { if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = (this.goodsSkuDetail.goods_content);
for (let i in this.goodsSkuDetail.goods_service) { console.log(this.goodsSkuDetail.goods_content)
this.goodsSkuDetail.goods_service[i]['icon'] = this.goodsSkuDetail.goods_service[i]['icon'] ? JSON.parse(this.goodsSkuDetail.goods_service[i]['icon']) : ''; // if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);
}
} //商品服务
if (this.goodsSkuDetail.goods_service) {
this.contactData = { for (let i in this.goodsSkuDetail.goods_service) {
title: this.goodsSkuDetail.sku_name, this.goodsSkuDetail.goods_service[i]['icon'] = this.goodsSkuDetail.goods_service[i]['icon'] ? JSON.parse(this.goodsSkuDetail.goods_service[i]['icon']) : '';
path: this.shareUrl, }
img: this.$util.img(this.goodsSkuDetail.sku_image, { }
size: 'big'
}) this.contactData = {
}; title: this.goodsSkuDetail.sku_name,
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion); path: this.shareUrl,
img: this.$util.img(this.goodsSkuDetail.sku_image, {
if (this.goodsRoute != '/pages_goods/detail') this.setPublicShare(); size: 'big'
})
// this.getBarrageData(); };
if (this.addonIsExist.form) { if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
this.getGoodsForm();
} this.setPublicShare();
}, // if (this.goodsRoute != '/pages/goods/detail') this.setPublicShare();
/**
* 刷新商品详情数据 this.getBarrageData();
* @param {Object} data if (this.addonIsExist.form) {
*/ this.getGoodsForm();
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) { * 刷新商品详情数据
* @param {Object} data
// 初始化商品详情视图数据 */
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件"; refreshGoodsSkuDetail(data) {
this.goodsSkuDetail = Object.assign({}, this.goodsSkuDetail, data);
// 解决轮播图数量不一致时,切换到第一个 if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) { if (this.$refs.goodsDetailView) {
this.swiperAutoplay = true;
this.swiperCurrent = 1; // 初始化商品详情视图数据
setTimeout(() => { this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
this.swiperAutoplay = false;
}, 40); // 解决轮播图数量不一致时,切换到第一个
} if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) {
this.swiperAutoplay = true;
} this.swiperCurrent = 1;
this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name; setTimeout(() => {
this.$langConfig.title(this.navbarData.title); this.swiperAutoplay = false;
}, 40);
if (this.goodsSkuDetail.membercard) { }
this.membercard = this.goodsSkuDetail.membercard;
} }
}, this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
goodsDetailViewInit() { this.$langConfig.title(this.navbarData.title);
// 初始化商品详情视图数据
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({ if (this.goodsSkuDetail.membercard) {
sku_id: this.skuId, this.membercard = this.goodsSkuDetail.membercard;
goods_id: this.goodsSkuDetail.goods_id, }
preview: this.preview, },
source_member: this.source_member, goodsDetailViewInit() {
posterParams: this.posterParams, // 初始化商品详情视图数据
posterApi: this.posterApi, if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
shareUrl: this.shareUrl, sku_id: this.skuId,
goodsRoute: this.goodsRoute, goods_id: this.goodsSkuDetail.goods_id,
isVirtual: this.goodsSkuDetail.is_virtual, preview: this.preview,
deliveryType: this.goodsSkuDetail.express_type, source_member: this.source_member,
whetherCollection: this.goodsSkuDetail.is_collect, posterParams: this.posterParams,
evaluateConfig: this.goodsSkuDetail.evaluate_config, posterApi: this.posterApi,
evaluateList: this.goodsSkuDetail.evaluate_list, shareUrl: this.shareUrl,
evaluateCount: this.goodsSkuDetail.evaluate_count goodsRoute: this.goodsRoute,
}); isVirtual: this.goodsSkuDetail.is_virtual,
}, deliveryType: this.goodsSkuDetail.express_type,
goHome() { whetherCollection: this.goodsSkuDetail.is_collect,
if (this.preview) return; // 开启预览,禁止任何操作和跳转 evaluateConfig: this.goodsSkuDetail.evaluate_config,
this.$util.redirectTo(this.$util.INDEX_PAGE_URL); evaluateList: this.goodsSkuDetail.evaluate_list,
}, evaluateCount: this.goodsSkuDetail.evaluate_count
goCart() { });
if (this.preview) return; // 开启预览,禁止任何操作和跳转 },
this.$util.redirectTo('/pages_goods/cart'); goHome() {
}, if (this.preview) return; // 开启预览,禁止任何操作和跳转
//-------------------------------------关注------------------------------------- this.$util.redirectTo('/pages/index/index');
//更新商品信息 },
modifyGoodsInfo() { goCart() {
if (this.preview) return; // 开启预览,禁止任何操作和跳转 if (this.preview) return; // 开启预览,禁止任何操作和跳转
//更新商品点击量 this.$util.redirectTo('/pages/goods/cart');
this.$api.sendRequest({ },
url: "/api/goods/modifyclicks", //-------------------------------------关注-------------------------------------
data: { //更新商品信息
sku_id: this.skuId modifyGoodsInfo() {
}, if (this.preview) return; // 开启预览,禁止任何操作和跳转
success: res => { //更新商品点击量
} this.$api.sendRequest({
}); url: "/api/goods/modifyclicks",
data: {
//添加足迹 sku_id: this.skuId
this.$api.sendRequest({ },
url: "/api/goodsbrowse/add", success: res => {
data: { }
goods_id: this.goodsSkuDetail.goods_id, });
sku_id: this.skuId
}, //添加足迹
success: res => { this.$api.sendRequest({
} url: "/api/goodsbrowse/add",
}); data: {
}, goods_id: this.goodsSkuDetail.goods_id,
//-------------------------------------关注------------------------------------- sku_id: this.skuId
async editCollection() { },
if (this.$refs.goodsDetailView) { success: res => {
this.whetherCollection = await this.$refs.goodsDetailView.collection(); }
} });
}, },
openSharePopup() { //-------------------------------------关注-------------------------------------
if (this.$refs.goodsDetailView) { async editCollection() {
this.$refs.goodsDetailView.openSharePopup(); if (this.$refs.goodsDetailView) {
} this.whetherCollection = await this.$refs.goodsDetailView.collection();
}, }
//弹幕 },
getBarrageData() { openSharePopup() {
this.$api.sendRequest({ if (this.$refs.goodsDetailView) {
url: '/api/goods/goodsbarrage', this.$refs.goodsDetailView.openSharePopup();
data: { }
goods_id: this.goodsSkuDetail.goods_id },
}, //弹幕
success: res => { getBarrageData() {
if (res.code == 0 && res.data) { this.$api.sendRequest({
let barrageData = []; url: '/api/goods/goodsbarrage',
for (let i in res.data.list) { data: {
if (res.data.list[i]['title']) { goods_id: this.goodsSkuDetail.goods_id
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({ success: res => {
img: res.data.list[i]['img'] ? res.data.list[i]['img'] : this.$util.getDefaultImage().head, if (res.code == 0 && res.data) {
title: title + '已下单' 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)
this.goodsSkuDetail.barrageData = barrageData; 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: '', setPublicShare() {
link: shareUrl, let shareUrl = this.$config.h5Domain + this.shareUrl;
imgUrl: typeof this.goodsSkuDetail.goods_image == 'object' ? this.goodsSkuDetail.goods_image[0] : this.goodsSkuDetail.goods_image.split(',')[0] 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: '',
getGoodsForm() { link: shareUrl,
this.$api.sendRequest({ imgUrl: typeof this.goodsSkuDetail.goods_image == 'object' ? this.goodsSkuDetail.goods_image[0] : this.goodsSkuDetail.goods_image.split(',')[0]
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); getGoodsForm() {
} this.$api.sendRequest({
}); url: "/form/api/form/goodsform",
} data: {
}, goods_id: this.goodsSkuDetail.goods_id
/** },
* 自定义分享内容 success: res => {
* @param {Object} res if (res.code == 0 && res.data) this.$set(this.goodsSkuDetail, 'goods_form', res.data);
*/ }
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, { * @param {Object} res
size: 'big' */
}), onShareAppMessage(res) {
path: path, var path = this.shareUrl;
success: res => { var store_info = this.$store.state.globalStoreInfo;
}, if (store_info) path+= '&store_id=' + store_info.store_id;
fail: res => { 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'
// #ifdef MP-WEIXIN }),
onShareTimeline() { path: path,
let query = this.shareQuery; success: res => {
if (this.memberInfo && this.memberInfo.member_id) query += '&source_member=' + this.memberInfo.member_id; },
return { fail: res => {
title: this.goodsSkuDetail.sku_name, }
query: query, };
imageUrl: this.$util.img(this.goodsSkuDetail.sku_image, { },
size: 'big' // 分享到微信朋友圈
}) // #ifdef MP-WEIXIN
}; onShareTimeline() {
} let query = this.shareQuery;
// #endif 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' import util from './util.js'
/* /*
* HTML5 Parser By Sam Blowes * HTML5 Parser By Sam Blowes
* *
* Designed for HTML5 documents * Designed for HTML5 documents
* *
* Original code by John Resig (ejohn.org) * Original code by John Resig (ejohn.org)
* http://ejohn.org/blog/pure-javascript-html-parser/ * http://ejohn.org/blog/pure-javascript-html-parser/
* Original code by Erik Arvidsson, Mozilla Public License * Original code by Erik Arvidsson, Mozilla Public License
* http://erik.eae.net/simplehtmlparser/simplehtmlparser.js * http://erik.eae.net/simplehtmlparser/simplehtmlparser.js
* *
* ---------------------------------------------------------------------------- * ----------------------------------------------------------------------------
* License * License
* ---------------------------------------------------------------------------- * ----------------------------------------------------------------------------
* *
* This code is triple licensed using Apache Software License 2.0, * This code is triple licensed using Apache Software License 2.0,
* Mozilla Public License or GNU Public License * Mozilla Public License or GNU Public License
* *
* //////////////////////////////////////////////////////////////////////////// * ////////////////////////////////////////////////////////////////////////////
* *
* Licensed under the Apache License, Version 2.0 (the "License"); you may not * 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 * 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 * of the License at http://www.apache.org/licenses/LICENSE-2.0
* *
* //////////////////////////////////////////////////////////////////////////// * ////////////////////////////////////////////////////////////////////////////
* *
* The contents of this file are subject to the Mozilla Public License * 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 * 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 * compliance with the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/ * http://www.mozilla.org/MPL/
* *
* Software distributed under the License is distributed on an "AS IS" * Software distributed under the License is distributed on an "AS IS"
* basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the * basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. See the
* License for the specific language governing rights and limitations * License for the specific language governing rights and limitations
* under the License. * under the License.
* *
* The Original Code is Simple HTML Parser. * The Original Code is Simple HTML Parser.
* *
* The Initial Developer of the Original Code is Erik Arvidsson. * The Initial Developer of the Original Code is Erik Arvidsson.
* Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights * Portions created by Erik Arvidssson are Copyright (C) 2004. All Rights
* Reserved. * Reserved.
* *
* //////////////////////////////////////////////////////////////////////////// * ////////////////////////////////////////////////////////////////////////////
* *
* This program is free software; you can redistribute it and/or * This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License * modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2 * as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version. * of the License, or (at your option) any later version.
* *
* This program is distributed in the hope that it will be useful, * This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of * but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details. * GNU General Public License for more details.
* *
* You should have received a copy of the GNU General Public License * You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software * along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
* *
* ---------------------------------------------------------------------------- * ----------------------------------------------------------------------------
* Usage * Usage
* ---------------------------------------------------------------------------- * ----------------------------------------------------------------------------
* *
* // Use like so: * // Use like so:
* HTMLParser(htmlString, { * HTMLParser(htmlString, {
* start: function(tag, attrs, unary) {}, * start: function(tag, attrs, unary) {},
* end: function(tag) {}, * end: function(tag) {},
* chars: function(text) {}, * chars: function(text) {},
* comment: function(text) {} * comment: function(text) {}
* }); * });
* *
* // or to get an XML string: * // or to get an XML string:
* HTMLtoXML(htmlString); * HTMLtoXML(htmlString);
* *
* // or to get an XML DOM Document * // or to get an XML DOM Document
* HTMLtoDOM(htmlString); * HTMLtoDOM(htmlString);
* *
* // or to inject into an existing document/DOM node * // or to inject into an existing document/DOM node
* HTMLtoDOM(htmlString, document); * HTMLtoDOM(htmlString, document);
* HTMLtoDOM(htmlString, document.body); * HTMLtoDOM(htmlString, document.body);
* *
*/ */
// Regular Expressions for parsing tags and attributes // Regular Expressions for parsing tags and attributes
var startTag = var startTag =
/^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/; /^<([-A-Za-z0-9_]+)((?:\s+[a-zA-Z_:][-a-zA-Z0-9_:.]*(?:\s*=\s*(?:(?:"[^"]*")|(?:'[^']*')|[^>\s]+))?)*)\s*(\/?)>/;
var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/; var endTag = /^<\/([-A-Za-z0-9_]+)[^>]*>/;
var attr = var attr =
/([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5 /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:(?:"((?:\\.|[^"])*)")|(?:'((?:\\.|[^'])*)')|([^>\s]+)))?/g; // Empty Elements - HTML 5
var empty = makeMap( var empty = makeMap(
'area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr' 'area,base,basefont,br,col,frame,hr,img,input,link,meta,param,embed,command,keygen,source,track,wbr'
); // Block Elements - HTML 5 ); // Block Elements - HTML 5
// fixed by xxx 将 ins 标签从块级名单中移除 // fixed by xxx 将 ins 标签从块级名单中移除
var block = makeMap( 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' '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 ); // Inline Elements - HTML 5
var inline = makeMap( 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' '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 ); // Elements that you can, intentionally, leave open
// (and which close themselves) // (and which close themselves)
var closeSelf = makeMap( var closeSelf = makeMap(
'colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled" 'colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr'); // Attributes that have their values filled in disabled="disabled"
var fillAttrs = makeMap( var fillAttrs = makeMap(
'checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected' 'checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected'
); // Special Elements (can contain anything) ); // Special Elements (can contain anything)
var special = makeMap('script,style'); var special = makeMap('script,style');
function HTMLParser(html, handler) { function HTMLParser(html, handler) {
var index; var index;
var chars; var chars;
var match; var match;
var stack = []; var stack = [];
var last = html; var last = html;
stack.last = function() { stack.last = function() {
return this[this.length - 1]; return this[this.length - 1];
}; };
while (html) { while (html) {
chars = true; // Make sure we're not in a script or style element chars = true; // Make sure we're not in a script or style element
if (!stack.last() || !special[stack.last()]) { if (!stack.last() || !special[stack.last()]) {
// Comment // Comment
if (html.indexOf('<!--') == 0) { if (html.indexOf('<!--') == 0) {
index = html.indexOf('-->'); index = html.indexOf('-->');
if (index >= 0) { if (index >= 0) {
if (handler.comment) { if (handler.comment) {
handler.comment(html.substring(4, index)); handler.comment(html.substring(4, index));
} }
html = html.substring(index + 3); html = html.substring(index + 3);
chars = false; chars = false;
} // end tag } // end tag
} else if (html.indexOf('</') == 0) { } else if (html.indexOf('</') == 0) {
match = html.match(endTag); match = html.match(endTag);
if (match) { if (match) {
html = html.substring(match[0].length); html = html.substring(match[0].length);
match[0].replace(endTag, parseEndTag); match[0].replace(endTag, parseEndTag);
chars = false; chars = false;
} // start tag } // start tag
} else if (html.indexOf('<') == 0) { } else if (html.indexOf('<') == 0) {
match = html.match(startTag); match = html.match(startTag);
if (match) { if (match) {
html = html.substring(match[0].length); html = html.substring(match[0].length);
match[0].replace(startTag, parseStartTag); match[0].replace(startTag, parseStartTag);
chars = false; chars = false;
} }
} }
if (chars) { if (chars) {
index = html.indexOf('<'); index = html.indexOf('<');
var text = index < 0 ? html : html.substring(0, index); var text = index < 0 ? html : html.substring(0, index);
html = index < 0 ? '' : html.substring(index); html = index < 0 ? '' : html.substring(index);
if (handler.chars) { if (handler.chars) {
handler.chars(text); handler.chars(text);
} }
} }
} else { } else {
html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function(all, text) { html = html.replace(new RegExp('([\\s\\S]*?)<\/' + stack.last() + '[^>]*>'), function(all, text) {
text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2'); text = text.replace(/<!--([\s\S]*?)-->|<!\[CDATA\[([\s\S]*?)]]>/g, '$1$2');
if (handler.chars) { if (handler.chars) {
handler.chars(text); handler.chars(text);
} }
return ''; return '';
}); });
parseEndTag('', stack.last()); parseEndTag('', stack.last());
} }
if (html == last) { if (html == last) {
throw 'Parse Error: ' + html; throw 'Parse Error: ' + html;
} }
last = html; last = html;
} // Clean up any remaining tags } // Clean up any remaining tags
parseEndTag(); parseEndTag();
function parseStartTag(tag, tagName, rest, unary) { function parseStartTag(tag, tagName, rest, unary) {
tagName = tagName.toLowerCase(); tagName = tagName.toLowerCase();
if (block[tagName]) { if (block[tagName]) {
while (stack.last() && inline[stack.last()]) { while (stack.last() && inline[stack.last()]) {
parseEndTag('', stack.last()); parseEndTag('', stack.last());
} }
} }
if (closeSelf[tagName] && stack.last() == tagName) { if (closeSelf[tagName] && stack.last() == tagName) {
parseEndTag('', tagName); parseEndTag('', tagName);
} }
unary = empty[tagName] || !!unary; unary = empty[tagName] || !!unary;
if (!unary) { if (!unary) {
stack.push(tagName); stack.push(tagName);
} }
if (handler.start) { if (handler.start) {
var attrs = []; var attrs = [];
rest.replace(attr, function(match, name) { rest.replace(attr, function(match, name) {
var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ? var value = arguments[2] ? arguments[2] : arguments[3] ? arguments[3] : arguments[4] ?
arguments[4] : fillAttrs[ arguments[4] : fillAttrs[
name] ? name : ''; name] ? name : '';
attrs.push({ attrs.push({
name: name, name: name,
value: value, value: value,
escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // " escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') // "
}); });
}); });
if (handler.start) { if (handler.start) {
handler.start(tagName, attrs, unary); handler.start(tagName, attrs, unary);
} }
} }
} }
function parseEndTag(tag, tagName) { function parseEndTag(tag, tagName) {
// If no tag name is provided, clean shop // If no tag name is provided, clean shop
if (!tagName) { if (!tagName) {
var pos = 0; var pos = 0;
} // Find the closest opened tag of the same type } // Find the closest opened tag of the same type
else { else {
for (var pos = stack.length - 1; pos >= 0; pos--) { for (var pos = stack.length - 1; pos >= 0; pos--) {
if (stack[pos] == tagName) { if (stack[pos] == tagName) {
break; break;
} }
} }
} }
if (pos >= 0) { if (pos >= 0) {
// Close all the open elements, up the stack // Close all the open elements, up the stack
for (var i = stack.length - 1; i >= pos; i--) { for (var i = stack.length - 1; i >= pos; i--) {
if (handler.end) { if (handler.end) {
handler.end(stack[i]); handler.end(stack[i]);
} }
} // Remove the open elements from the stack } // Remove the open elements from the stack
stack.length = pos; stack.length = pos;
} }
} }
} }
function makeMap(str) { function makeMap(str) {
var obj = {}; var obj = {};
var items = str.split(','); var items = str.split(',');
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
obj[items[i]] = true; obj[items[i]] = true;
} }
return obj; return obj;
} }
function removeDOCTYPE(html) { function removeDOCTYPE(html) {
return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, ''); return html.replace(/<\?xml.*\?>\n/, '').replace(/<!doctype.*>\n/, '').replace(/<!DOCTYPE.*>\n/, '');
} }
/** /**
* 忽略注释 * 忽略注释
* @param {Object} html * @param {Object} html
*/ */
function replaceAnnotation(html) { function replaceAnnotation(html) {
var html = html.replace(/<!--[\s\S]*-->/gi, ''); var html = html.replace(/<!--[\s\S]*-->/gi, '');
return html; return html;
} }
/** /**
* 替换图片 * 替换图片
* @param {Object} html * @param {Object} html
*/ */
function replaceImage(html) { function replaceImage(html) {
// #ifdef MP // #ifdef MP
let info = uni.getSystemInfoSync(); let info = uni.getWindowInfo();
var screenWidth = info.windowWidth; var screenWidth = info.windowWidth;
screenWidth -= 20; screenWidth -= 20;
screenWidth += 'px'; screenWidth += 'px';
// #endif // #endif
// #ifdef H5 // #ifdef H5
var screenWidth = '100%'; var screenWidth = '100%';
// #endif // #endif
let rep = `<img style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`; let rep = `<img style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`;
var html = html.replace(/\\/g, '').replace(/<img/g, rep); var html = html.replace(/\\/g, '').replace(/<img/g, rep);
html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => { html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
return rep + ' src="' + util.img(capture) + '"/>'; return rep + ' src="' + util.img(capture) + '"/>';
}); });
return html; return html;
} }
function replaceVideo(html){ function replaceVideo(html){
// #ifdef MP // #ifdef MP
let info = uni.getSystemInfoSync(); let info = uni.getWindowInfo();
var screenWidth = info.windowWidth; var screenWidth = info.windowWidth;
screenWidth -= 20; screenWidth -= 20;
screenWidth += 'px'; screenWidth += 'px';
// #endif // #endif
// #ifdef H5 // #ifdef H5
var screenWidth = '100%'; var screenWidth = '100%';
// #endif // #endif
let rep = `<video style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`; let rep = `<video style="width:100% !important;display:block;max-width: ${screenWidth} !important;"`;
var html = html.replace(/\\/g, '').replace(/<video/g, rep); var html = html.replace(/\\/g, '').replace(/<video/g, rep);
console.log(html) console.log(html)
html = html.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => { html = html.replace(/<video [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
return rep + ' src="' + util.img(capture) + '"/>'; return rep + ' src="' + util.img(capture) + '"/>';
}); });
// console.log(html) // console.log(html)
return html; return html;
} }
/** /**
* 将style属性中的双引号改为单引号 * 将style属性中的双引号改为单引号
* @param {Object} html * @param {Object} html
*/ */
function replaceStyleQuotes(html) { function replaceStyleQuotes(html) {
var html = html.replace(/style\s*=\s*["][^>]*;[^"]?/gi, (match, capture) => { var html = html.replace(/style\s*=\s*["][^>]*;[^"]?/gi, (match, capture) => {
match = match.replace(/[:](\s?)[\s\S]*/gi, (a, b) => { match = match.replace(/[:](\s?)[\s\S]*/gi, (a, b) => {
return a.replace(/"/g, "'"); return a.replace(/"/g, "'");
}); });
return match; return match;
}); });
return html; return html;
} }
function parseAttrs(attrs) { function parseAttrs(attrs) {
return attrs.reduce(function(pre, attr) { return attrs.reduce(function(pre, attr) {
var value = attr.value; var value = attr.value;
var name = attr.name; var name = attr.name;
if (pre[name]) { if (pre[name]) {
pre[name] = pre[name] + " " + value; pre[name] = pre[name] + " " + value;
} else { } else {
pre[name] = value; pre[name] = value;
} }
return pre; return pre;
}, {}); }, {});
} }
function parseHtml(html) { function parseHtml(html) {
html = removeDOCTYPE(html); html = removeDOCTYPE(html);
html = replaceAnnotation(html); //忽略注释 html = replaceAnnotation(html); //忽略注释
html = replaceImage(html); //替换图片 html = replaceImage(html); //替换图片
html = replaceStyleQuotes(html); //将style属性中的双引号改为单引号 html = replaceStyleQuotes(html); //将style属性中的双引号改为单引号
html = replaceVideo(html); //替换视频链接 html = replaceVideo(html); //替换视频链接
var stacks = []; var stacks = [];
var results = { var results = {
node: 'root', node: 'root',
children: [] children: []
}; };
HTMLParser(html, { HTMLParser(html, {
start: function start(tag, attrs, unary) { start: function start(tag, attrs, unary) {
var node = { var node = {
name: tag name: tag
}; };
if (attrs.length !== 0) { if (attrs.length !== 0) {
node.attrs = parseAttrs(attrs); node.attrs = parseAttrs(attrs);
} }
if (unary) { if (unary) {
var parent = stacks[0] || results; var parent = stacks[0] || results;
if (!parent.children) { if (!parent.children) {
parent.children = []; parent.children = [];
} }
parent.children.push(node); parent.children.push(node);
} else { } else {
stacks.unshift(node); stacks.unshift(node);
} }
}, },
end: function end(tag) { end: function end(tag) {
var node = stacks.shift(); var node = stacks.shift();
if (node.name !== tag) console.error('invalid state: mismatch end tag'); if (node.name !== tag) console.error('invalid state: mismatch end tag');
if (stacks.length === 0) { if (stacks.length === 0) {
results.children.push(node); results.children.push(node);
} else { } else {
var parent = stacks[0]; var parent = stacks[0];
if (!parent.children) { if (!parent.children) {
parent.children = []; parent.children = [];
} }
parent.children.push(node); parent.children.push(node);
} }
}, },
chars: function chars(text) { chars: function chars(text) {
var node = { var node = {
type: 'text', type: 'text',
text: text text: text
}; };
if (stacks.length === 0) { if (stacks.length === 0) {
results.children.push(node); results.children.push(node);
} else { } else {
var parent = stacks[0]; var parent = stacks[0];
if (!parent.children) { if (!parent.children) {
parent.children = []; parent.children = [];
} }
parent.children.push(node); parent.children.push(node);
} }
}, },
comment: function comment(text) { comment: function comment(text) {
var node = { var node = {
node: 'comment', node: 'comment',
text: text text: text
}; };
var parent = stacks[0]; var parent = stacks[0];
if (!parent.children) { if (!parent.children) {
parent.children = []; parent.children = [];
} }
parent.children.push(node); parent.children.push(node);
} }
}); });
return results.children; return results.children;
} }
export default parseHtml; export default parseHtml;

View File

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

View File

@@ -1,119 +1,52 @@
import { langConfig } from './config-external.js'; const langList = ['zh-cn', 'en-us'];
var locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
// 缓存已加载的语言包
const loadedLangPacks = {};
// 处理页面目录映射
function processRoutePath(route) {
let routeParts = route.split("/");
// ---- 处理页面目录映射 <begin> 分包造成的,需要根据实际目录结构进行映射----
// 先处理特殊的分包路径
if (routeParts[0] === 'pages_tool') {
// pages_tool 分包下的页面,直接使用子目录作为语言包路径
routeParts = [routeParts[1], ...routeParts.slice(2)];
} else if (routeParts[0] === 'pages_goods') {
// pages_goods 分包映射到 goods 目录
routeParts[0] = 'goods';
} else if (routeParts[0] === 'pages_member') {
// pages_member 分包映射到 member 目录
routeParts[0] = 'member';
} else if (routeParts[0] === 'pages_order') {
// pages_order 分包映射到 order 目录
routeParts[0] = 'order';
} else if (routeParts[0] === 'pages_promotion') {
// pages_promotion 分包特殊处理
const promotionModules = ['point', 'fenxiao', 'merch'];
if (routeParts[1] && promotionModules.includes(routeParts[1])) {
routeParts = [routeParts[1], ...routeParts.slice(2)];
}
}
// ---- 处理页面目录映射 <end>----
// 去掉pages目录只保留子目录
if (routeParts[0] === 'pages') {
routeParts = routeParts.slice(1);
}
return routeParts.join("/");
}
// 加载语言包(同步方式)
function loadLangPackSync(lang, path) {
try {
if (loadedLangPacks[`${lang}_${path}`]) {
return loadedLangPacks[`${lang}_${path}`];
}
const langData = require(`@/lang/${lang}/${path}.js`).lang;
loadedLangPacks[`${lang}_${path}`] = langData;
return langData;
} catch (error) {
console.error(`加载语言包 ${lang}/${path} 失败:`, error);
return {};
}
}
export default { export default {
langList: langConfig.langList, langList: ['zh-cn', 'en-us'],
/**
* 获得当前本地语言
* @returns
*/
getCurrentLocale() {
return uni.getStorageSync('lang') || "zh-cn";
},
/** /**
* * 解析多语言 * * 解析多语言
* @param {Object} field * @param {Object} field
*/ */
lang(field) { lang(field) {
let _page = getCurrentPages()[getCurrentPages().length - 1]; let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return; if (!_this) return;
const locale = this.getCurrentLocale(); // 获得当前本地语言
let value = ''; // 存放解析后的语言值
let langPath = ''; // 存放当前页面语言包路径
var value = '';
let newRoute;
try { try {
//公共语言包(同步加载) //公共语言包
var lang = loadLangPackSync(locale, 'common'); var lang = require('../../lang/' + locale + '/common.js').lang;
//当前页面语言包(同步加载) //当前页面语言包
let route = _page.route; let route = _this.route.split("/");
langPath = processRoutePath(route); newRoute = route.slice(1, route.length);
let currentPageLang = require('../../lang/' + locale + '/' + newRoute.join("/") + '.js').lang;
// 加载当前页面语言包
let currentPageLang = loadLangPackSync(locale, langPath);
// 合并语言包 for (let f in currentPageLang) {
let mergedLang = { ...lang, ...currentPageLang }; lang[f] = currentPageLang[f];
}
// 解析字段
var arr = field.split("."); var arr = field.split(".");
if (arr.length > 1) { if (arr.length > 1) {
// 处理嵌套属性,如 common.currencySymbol for (let i in arr) {
let temp = mergedLang; var next = parseInt(i) + 1;
let found = true; if (next < arr.length) {
for (let key of arr) { value = lang[arr[i]][arr[next]];
if (temp[key] !== undefined) {
temp = temp[key];
} else {
found = false;
break;
} }
} }
value = found ? temp : field;
} else { } else {
value = mergedLang[field] !== undefined ? mergedLang[field] : field; value = lang[field];
} }
} catch (e) { } catch (e) {
console.error('解析语言包失败:', e, { langPath, field, locale }); if (field.indexOf("common.") != -1 || field.indexOf("tabBar.") != -1) {
value = field; value = lang[field];
} else {
value = field;
}
} }
if (arguments.length > 1) { if (arguments.length > 1) {
@@ -123,45 +56,27 @@ export default {
} }
} }
if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field
// 多语言调试,注释后可以关闭控制台输出
if (field == value) {
console.warn(`警告: 字段 ${field} 在语言包 ${langPath} 中未找到对应值,使用默认值 ${field} 当前语言: ${locale}`);
}
return value; return value;
}, },
/** //切换语言
* * 切换语言 change(value) {
* @param {String} value 语言值 let _this = getCurrentPages()[getCurrentPages().length - 1];
* @param {String} url 切换后跳转的页面url if (!_this) return;
*/
change(value, url = '/pages_tool/member/index') {
let _page = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return;
uni.setStorageSync("lang", value); uni.setStorageSync("lang", value);
const locale = this.getCurrentLocale(); locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
// 清空已加载的语言包缓存
for (let key in loadedLangPacks) {
if (!key.startsWith(locale)) {
delete loadedLangPacks[key];
}
}
this.refresh(); this.refresh();
if (url) { uni.reLaunch({
uni.reLaunch({ url: url }); url: '/pages/member/index'
} });
}, },
//刷新标题、tabbar //刷新标题、tabbar
refresh() { refresh() {
let _page = getCurrentPages()[getCurrentPages().length - 1]; let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_page) return; if (!_this) return;
locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
const locale = this.getCurrentLocale();
this.title(this.lang("title")); this.title(this.lang("title"));
@@ -199,17 +114,16 @@ export default {
var list = []; var list = [];
try { try {
//公共语言包 //公共语言包
for (var i = 0; i < langConfig.langList.length; i++) { for (var i = 0; i < langList.length; i++) {
let langType = langConfig.langList[i]; let item = require('../../lang/' + langList[i] + '/common.js').lang;
let item = loadLangPackSync(langType, 'common');
list.push({ list.push({
name: item.common ? item.common.name : langType, name: item.common.name,
value: langType value: langList[i]
}); });
} }
} catch (e) { } catch (e) {
console.error('获取语言包列表失败:', e); // "没有找到语言包:", '../../lang/' + locale + '/common.js'
} }
return list; return list;
} }
} }

File diff suppressed because it is too large Load Diff

View File

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

View File

@@ -1,5 +1,4 @@
import { EventSafety } from '@/common/js/event-safety.js' import { EventSafety } from './event-safety'
import util from '@/common/js/util.js'
export class NavigationHelper { export class NavigationHelper {
constructor() { constructor() {
@@ -60,7 +59,7 @@ export class NavigationHelper {
// 微信小程序精确计算 // 微信小程序精确计算
try { try {
const menuButtonInfo = wx.getMenuButtonBoundingClientRect() const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
let systemInfo = util.getDeviceInfo(); const systemInfo = uni.getSystemInfoSync()
const height = menuButtonInfo.bottom + const height = menuButtonInfo.bottom +
(menuButtonInfo.top - systemInfo.statusBarHeight) (menuButtonInfo.top - systemInfo.statusBarHeight)
@@ -120,7 +119,7 @@ export class NavigationHelper {
// 获取状态栏高度 // 获取状态栏高度
getStatusBarHeight() { getStatusBarHeight() {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
let systemInfo = util.getDeviceInfo(); const systemInfo = uni.getSystemInfoSync()
return systemInfo.statusBarHeight || 20 return systemInfo.statusBarHeight || 20
// #endif // #endif
// #ifdef H5 // #ifdef H5
@@ -139,7 +138,7 @@ export class NavigationHelper {
// 获取安全区域 // 获取安全区域
getSafeAreaInsets() { getSafeAreaInsets() {
try { try {
let systemInfo = util.getDeviceInfo(); const systemInfo = uni.getSystemInfoSync()
return systemInfo.safeArea || { return systemInfo.safeArea || {
top: 0, top: 0,
bottom: 0, bottom: 0,

View File

@@ -1,100 +0,0 @@
// 文件分享工具函数
export default {
/**
* 生成文件预览链接
* @param {Object} file - 文件对象,包含 name 和 url 属性
* @returns {string} - 生成的文件预览链接
*/
generateFilePreviewUrl(file) {
// 推断文件类型
let fileType = '';
if (file.name) {
const ext = file.name.split('.').pop().toLowerCase();
if (['pdf'].includes(ext)) {
fileType = 'pdf';
} else if (['doc', 'docx'].includes(ext)) {
fileType = 'word';
} else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(ext)) {
fileType = 'video';
}
}
// 构建文件预览链接
const previewUrl = `/pages_tool/file-preview/file-preview?fileName=${encodeURIComponent(file.name)}&fileUrl=${encodeURIComponent(file.url || '')}&fileType=${encodeURIComponent(fileType)}`;
return previewUrl;
},
/**
* 分享文件
* @param {Object} file - 文件对象,包含 name 和 url 属性
* @param {string} title - 分享标题,默认使用文件名
* @param {string} desc - 分享描述,默认使用固定文案
*/
shareFile(file, title = file.name, desc = '查看企业文件:' + file.name) {
// 生成文件预览链接
const filePreviewUrl = this.generateFilePreviewUrl(file);
// #ifdef H5
// H5 平台分享
if (navigator.share) {
// 使用 Web Share API
navigator.share({
title: title,
text: desc,
url: filePreviewUrl
}).catch(err => {
console.error('分享失败:', err);
uni.showToast({ title: '分享失败', icon: 'none' });
});
} else {
// 不支持 Web Share API 的浏览器
uni.setClipboardData({
data: filePreviewUrl,
success: () => {
uni.showToast({ title: '链接已复制,请粘贴分享', icon: 'success' });
},
fail: () => {
uni.showToast({ title: '复制失败', icon: 'none' });
}
});
}
// #endif
// #ifdef MP-WEIXIN
// 微信小程序分享
uni.showActionSheet({
itemList: ['发送给朋友', '分享到朋友圈'],
success: (res) => {
if (res.tapIndex === 0) {
// 发送给朋友
uni.shareAppMessage({
title: title,
path: filePreviewUrl,
success: () => {
uni.showToast({ title: '分享成功', icon: 'success' });
},
fail: () => {
uni.showToast({ title: '分享失败', icon: 'none' });
}
});
} else if (res.tapIndex === 1) {
// 分享到朋友圈
uni.shareTimeline({
title: desc,
path: filePreviewUrl,
success: () => {
uni.showToast({ title: '分享成功', icon: 'success' });
},
fail: () => {
uni.showToast({ title: '分享失败', icon: 'none' });
}
});
}
},
fail: () => {
// 用户取消分享
}
});
// #endif
}
};

View File

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

View File

@@ -1,460 +1,419 @@
/** export default {
* 颜色配置 'default': {
* 包含默认颜色和其他颜 //红
* 特别注意: name: 'default',
* 1. 分组不会被计算成Key分组下的属性会被计算成Key main_color: '#F4391c',
* 2. 分组下的属性如果有相同的Key会被覆盖 aux_color: '#F7B500',
* 3. 例如hoverNavhoverNav_bg_color和hoverNav_text_color, 不会生成hoverNav_hoverNav_bg_color和hoverNav_hoverNav_text_color bg_color: '#FF4646',//主题背景
* 问题原因:历史遗留 bg_color_shallow: '#FF4646',//主题背景渐变浅色
*/ promotion_color: '#FF4646',//活动背景
export default { promotion_aux_color: '#F7B500',//活动背景辅色
'default': { main_color_shallow: '#FFF4F4',//淡背景
//红 price_color: 'rgb(252,82,39)',//价格颜
name: 'default', btn_text_color: '#FFFFFF',//按钮文字颜色
main_color: '#F4391c', goods_detail: {
aux_color: '#F7B500', goods_price: 'rgb(252,82,39,1)',//价格
bg_color: '#FF4646',//主题背景 promotion_tag: '#FF4646',
bg_color_shallow: '#FF4646',//主题背景渐变浅色 goods_card_bg: '#201A18',//会员卡背景
promotion_color: '#FF4646',//活动背景 goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
promotion_aux_color: '#F7B500',//活动背景辅色 goods_card_color: '#FFD792',
main_color_shallow: '#FFF4F4',//淡背景 goods_coupon: '#FC5227',
price_color: 'rgb(252,82,39)',//价格颜色 goods_cart_num_corner: '#FC5227',//购物车数量角标
btn_text_color: '#FFFFFF',//按钮文字颜色 goods_btn_color: '#FF4646',//按钮颜色
...{ goods_btn_color_shallow: '#F7B500',//副按钮颜色
goods_price: 'rgb(252,82,39,1)',//价格 },
promotion_tag: '#FF4646', pintuan: {
goods_card_bg: '#201A18',//会员卡背景 pintuan_label_bg: '#F7B500',
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色 pintuan_label_color: '#FFFFFF',
goods_card_color: '#FFD792', pintuan_color: '#FA6400',
goods_coupon: '#FC5227', pintuan_promotion_color: '#FA3A1D',//活动背景
goods_cart_num_corner: '#FC5227',//购物车数量角标 pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
goods_btn_color: '#FF4646',//按钮颜色 },
goods_btn_color_shallow: '#F7B500',//副按钮颜色 super_member: {
}, super_member_start_bg: '#7c7878',
...{ super_member_end_bg: '#201a18',
pintuan_label_bg: '#F7B500', super_member_start_text_color: '#FFDBA6',
pintuan_label_color: '#FFFFFF', super_member_end_text_color: '#FFEBCA',
pintuan_color: '#FA6400', },
pintuan_promotion_color: '#FA3A1D',//活动背景 bargain: {
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色 bargain_promotion_color: '#F0353E',//活动背景
}, bargain_promotion_aux_color: '#FD9A01',//活动辅色
...{ },
super_member_start_bg: '#7c7878', seckill: {
super_member_end_bg: '#201a18', seckill_promotion_color: '#F83530',//活动背景
super_member_start_text_color: '#FFDBA6', seckill_promotion_aux_color: '#FD9A01',//活动辅色
super_member_end_text_color: '#FFEBCA', },
}, giftcard: {
...{ giftcard_promotion_color: '#FF3369',//活动背景
bargain_promotion_color: '#F0353E',//活动背景 giftcard_promotion_aux_color: '#F7B500',//活动辅色
bargain_promotion_aux_color: '#FD9A01',//活动辅色 },
}, groupby: {
...{ groupby_promotion_color: '#E64136',//活动背景
seckill_promotion_color: '#F83530',//活动背景 groupby_promotion_aux_color: '#F7B500',//活动辅色
seckill_promotion_aux_color: '#FD9A01',//活动辅色 },
}, },
...{ 'green': {
giftcard_promotion_color: '#FF3369',//活动背景 name: 'green',
giftcard_promotion_aux_color: '#F7B500',//活动辅色 main_color: '#19C650',
}, aux_color: '#FA6400',
...{ bg_color: '#19C650',
groupby_promotion_color: '#E64136',//活动背景 bg_color_shallow: '#19C650',
groupby_promotion_aux_color: '#F7B500',//活动辅色 promotion_color: '#19C650',
}, promotion_aux_color: '#FA6400',
...{ main_color_shallow: '#F0FFF5',//淡背景
hover_nav_bg_color: '#FFFC', //背景色: 红色 '#c6251b', 白色: '#FFFC' price_color: 'rgba(252,82,39,1)',//价格颜色
hover_nav_text_color: '#000' // 文字颜色: 白色 '#FFFFFF', 黑色: '#000' btn_text_color: '#FFFFFF',//按钮文字颜色
}, goods_detail: {
}, goods_price: 'rgba(252,82,39,1)',//价格
'green': { promotion_tag: '#19C650',
name: 'green', goods_card_bg: '#201A18',//会员卡背景
main_color: '#19C650', goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
aux_color: '#FA6400', goods_card_color: '#FFD792',
bg_color: '#19C650', goods_coupon: '#FC5227',
bg_color_shallow: '#19C650', goods_cart_num_corner: '#FC5227',//购物车数量角标
promotion_color: '#19C650', goods_btn_color: '#19C650',//按钮颜色
promotion_aux_color: '#FA6400', goods_btn_color_shallow: '#FA6400',//副按钮颜色
main_color_shallow: '#F0FFF5',//淡背景 },
price_color: 'rgba(252,82,39,1)',//价格颜色 pintuan: {
btn_text_color: '#FFFFFF',//按钮文字颜色 pintuan_label_bg: '#F7B500',
...{ pintuan_label_color: '#FFFFFF',
goods_price: 'rgba(252,82,39,1)',//价格 pintuan_color: '#FA6400',
promotion_tag: '#19C650', pintuan_promotion_color: '#FA3A1D',//活动背景
goods_card_bg: '#201A18',//会员卡背景 pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色 },
goods_card_color: '#FFD792', super_member: {
goods_coupon: '#FC5227', super_member_start_bg: '#7c7878',
goods_cart_num_corner: '#FC5227',//购物车数量角标 super_member_end_bg: '#201a18',
goods_btn_color: '#19C650',//按钮颜色 super_member_start_text_color: '#FFDBA6',
goods_btn_color_shallow: '#FA6400',//副按钮颜色 super_member_end_text_color: '#FFEBCA',
}, },
...{ bargain: {
pintuan_label_bg: '#F7B500', bargain_promotion_color: '#F0353E',//活动背景
pintuan_label_color: '#FFFFFF', bargain_promotion_aux_color: '#FD9A01',//活动辅色
pintuan_color: '#FA6400', },
pintuan_promotion_color: '#FA3A1D',//活动背景 seckill: {
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色 seckill_promotion_color: '#F83530',//活动背景
}, seckill_promotion_aux_color: '#FD9A01',//活动辅色
...{ },
super_member_start_bg: '#7c7878', giftcard: {
super_member_end_bg: '#201a18', giftcard_promotion_color: '#FF3369',//活动背景
super_member_start_text_color: '#FFDBA6', giftcard_promotion_aux_color: '#F7B500',//活动辅色
super_member_end_text_color: '#FFEBCA', },
}, groupby: {
...{ groupby_promotion_color: '#E64136',//活动背景
bargain_promotion_color: '#F0353E',//活动背景 groupby_promotion_aux_color: '#F7B500',//活动辅色
bargain_promotion_aux_color: '#FD9A01',//活动辅色 },
}, },
...{ 'blue': {
seckill_promotion_color: '#F83530',//活动背景 name: 'blue',
seckill_promotion_aux_color: '#FD9A01',//活动辅色 main_color: '#36ABFF',
}, aux_color: '#FA6400',
...{ bg_color: '#36ABFF',
giftcard_promotion_color: '#FF3369',//活动背景 bg_color_shallow: '#36ABFF',
giftcard_promotion_aux_color: '#F7B500',//活动辅色 promotion_color: '#36ABFF ',
}, promotion_aux_color: '#FA6400',
...{ main_color_shallow: '#E2F3FF',
groupby_promotion_color: '#E64136',//活动背景 price_color: 'rgba(252,82,39,1)',//价格颜色
groupby_promotion_aux_color: '#F7B500',//活动辅 btn_text_color: '#FFFFFF',//按钮文字颜
}, goods_detail: {
...{ goods_price: 'rgba(252,82,39,1)',//价格
hover_nav_bg_color: '#19C650',//背景色 promotion_tag: '#36ABFF',
hover_nav_text_color: '#FFFFFF' goods_card_bg: '#201A18',//会员卡背景
}, goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
}, goods_card_color: '#FFD792',
'blue': { goods_coupon: '#FC5227',
name: 'blue', goods_cart_num_corner: '#FC5227',//购物车数量角标
main_color: '#36ABFF', goods_btn_color: '#36ABFF',//按钮颜色
aux_color: '#FA6400', goods_btn_color_shallow: '#FA6400',//副按钮颜色
bg_color: '#36ABFF', },
bg_color_shallow: '#36ABFF', pintuan: {
promotion_color: '#36ABFF ', pintuan_label_bg: '#F7B500',
promotion_aux_color: '#FA6400', pintuan_label_color: '#FFFFFF',
main_color_shallow: '#E2F3FF', pintuan_color: '#FA6400',
price_color: 'rgba(252,82,39,1)',//价格颜色 pintuan_promotion_color: '#FA3A1D',//活动背景
btn_text_color: '#FFFFFF',//按钮文字颜 pintuan_promotion_aux_color: '#FD9A01',//活动背景辅
...{ },
goods_price: 'rgba(252,82,39,1)',//价格 super_member: {
promotion_tag: '#36ABFF', super_member_start_bg: '#7c7878',
goods_card_bg: '#201A18',//会员卡背景 super_member_end_bg: '#201a18',
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色 super_member_start_text_color: '#FFDBA6',
goods_card_color: '#FFD792', super_member_end_text_color: '#FFEBCA',
goods_coupon: '#FC5227', },
goods_cart_num_corner: '#FC5227',//购物车数量角标 bargain: {
goods_btn_color: '#36ABFF',//按钮颜色 bargain_promotion_color: '#F0353E',//活动背景
goods_btn_color_shallow: '#FA6400',//副按钮颜 bargain_promotion_aux_color: '#FD9A01',//活动辅
}, },
...{ seckill: {
pintuan_label_bg: '#F7B500', seckill_promotion_color: '#F83530',//活动背景
pintuan_label_color: '#FFFFFF', seckill_promotion_aux_color: '#FD9A01',//活动辅色
pintuan_color: '#FA6400', },
pintuan_promotion_color: '#FA3A1D',//活动背景 giftcard: {
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色 giftcard_promotion_color: '#FF3369',//活动背景
}, giftcard_promotion_aux_color: '#F7B500',//活动辅色
...{ },
super_member_start_bg: '#7c7878', groupby: {
super_member_end_bg: '#201a18', groupby_promotion_color: '#E64136',//活动背景
super_member_start_text_color: '#FFDBA6', groupby_promotion_aux_color: '#F7B500',//活动辅色
super_member_end_text_color: '#FFEBCA', },
}, },
...{ 'pink': {
bargain_promotion_color: '#F0353E',//活动背景 name: 'pink',
bargain_promotion_aux_color: '#FD9A01',//活动辅色 main_color: '#FF407E',
}, aux_color: '#F7B500',
...{ bg_color: '#FF407E',//主题背景
seckill_promotion_color: '#F83530',//活动背景 bg_color_shallow: '#FF407E',//主题背景渐变浅色
seckill_promotion_aux_color: '#FD9A01',//活动辅色 promotion_color: '#FF407E',//活动背景
}, promotion_aux_color: '#F7B500',//活动背景辅色
...{ main_color_shallow: '#FFF5F8',//淡背景
giftcard_promotion_color: '#FF3369',//活动背景 price_color: 'rgba(252,82,39,1)',//价格颜色
giftcard_promotion_aux_color: '#F7B500',//活动辅 btn_text_color: '#FFFFFF',//按钮文字颜
}, goods_detail: {
...{ goods_price: 'rgba(252,82,39,1)',//价格
groupby_promotion_color: '#E64136',//活动背景 promotion_tag: '#FF407E',
groupby_promotion_aux_color: '#F7B500',//活动辅色 goods_card_bg: '#201A18',//会员卡背景
}, goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
...{ goods_card_color: '#FFD792',
hover_nav_bg_color: '#36ABFF',//背景色 goods_coupon: '#FC5227',
hover_nav_text_color: '#FFFFFF' goods_cart_num_corner: '#FC5227',//购物车数量角标
}, goods_btn_color: '#FF407E',//按钮颜色
}, goods_btn_color_shallow: '#F7B500',//副按钮颜色
'pink': { },
name: 'pink', pintuan: {
main_color: '#FF407E', pintuan_label_bg: '#F7B500',
aux_color: '#F7B500', pintuan_label_color: '#FFFFFF',
bg_color: '#FF407E',//主题背景 pintuan_color: '#FA6400',
bg_color_shallow: '#FF407E',//主题背景渐变浅色 pintuan_promotion_color: '#FA3A1D',//活动背景
promotion_color: '#FF407E',//活动背景 pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
promotion_aux_color: '#F7B500',//活动背景辅色 },
main_color_shallow: '#FFF5F8',//淡背景 super_member: {
price_color: 'rgba(252,82,39,1)',//价格颜色 super_member_start_bg: '#7c7878',
btn_text_color: '#FFFFFF',//按钮文字颜色 super_member_end_bg: '#201a18',
...{ super_member_start_text_color: '#FFDBA6',
goods_price: 'rgba(252,82,39,1)',//价格 super_member_end_text_color: '#FFEBCA',
promotion_tag: '#FF407E', },
goods_card_bg: '#201A18',//会员卡背景 bargain: {
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色 bargain_promotion_color: '#F0353E',//活动背景
goods_card_color: '#FFD792', bargain_promotion_aux_color: '#FD9A01',//活动辅色
goods_coupon: '#FC5227', },
goods_cart_num_corner: '#FC5227',//购物车数量角标 seckill: {
goods_btn_color: '#FF407E',//按钮颜色 seckill_promotion_color: '#F83530',//活动背景
goods_btn_color_shallow: '#F7B500',//副按钮颜 seckill_promotion_aux_color: '#FD9A01',//活动辅
}, },
...{ giftcard: {
pintuan_label_bg: '#F7B500', giftcard_promotion_color: '#FF3369',//活动背景
pintuan_label_color: '#FFFFFF', giftcard_promotion_aux_color: '#F7B500',//活动辅色
pintuan_color: '#FA6400', },
pintuan_promotion_color: '#FA3A1D',//活动背景 groupby: {
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色 groupby_promotion_color: '#E64136',//活动背景
}, groupby_promotion_aux_color: '#F7B500',//活动辅色
...{ },
super_member_start_bg: '#7c7878', },
super_member_end_bg: '#201a18', 'gold': {
super_member_start_text_color: '#FFDBA6', name: 'gold',
super_member_end_text_color: '#FFEBCA', main_color: '#CFAF70',
}, aux_color: '#444444',
...{ bg_color: '#CFAF70',//主题背景
bargain_promotion_color: '#F0353E',//活动背景 bg_color_shallow: '#CFAF70',//主题背景渐变浅色
bargain_promotion_aux_color: '#FD9A01',//活动辅色 promotion_color: '#CFAF70',//活动背景
}, promotion_aux_color: '#444444',//活动背景辅色
...{ main_color_shallow: '#FFFAF1',//淡背景
seckill_promotion_color: '#F83530',//活动背景 price_color: 'rgba(252,82,39,1)',//价格颜色
seckill_promotion_aux_color: '#FD9A01',//活动辅 btn_text_color: '#FFFFFF',//按钮文字颜
}, goods_detail: {
...{ goods_price: 'rgba(252,82,39,1)',//价格
giftcard_promotion_color: '#FF3369',//活动背景 promotion_tag: '#CFAF70',
giftcard_promotion_aux_color: '#F7B500',//活动辅色 goods_card_bg: '#201A18',//会员卡背景
}, goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
...{ goods_card_color: '#FFD792',
groupby_promotion_color: '#E64136',//活动背景 goods_coupon: '#FC5227',
groupby_promotion_aux_color: '#F7B500',//活动辅色 goods_cart_num_corner: '#FC5227',//购物车数量角标
}, goods_btn_color: '#CFAF70',//按钮颜色
...{ goods_btn_color_shallow: '#444444',//副按钮颜色
hover_nav_bg_color: '#FF407E',//背景色 },
hover_nav_text_color: '#FFFFFF' pintuan: {
}, pintuan_label_bg: '#F7B500',
}, pintuan_label_color: '#FFFFFF',
'gold': { pintuan_color: '#FA6400',
name: 'gold', pintuan_promotion_color: '#FA3A1D',//活动背景
main_color: '#CFAF70', pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
aux_color: '#444444', },
bg_color: '#CFAF70',//主题背景 super_member: {
bg_color_shallow: '#CFAF70',//主题背景渐变浅色 super_member_start_bg: '#7c7878',
promotion_color: '#CFAF70',//活动背景 super_member_end_bg: '#201a18',
promotion_aux_color: '#444444',//活动背景辅色 super_member_start_text_color: '#FFDBA6',
main_color_shallow: '#FFFAF1',//淡背景 super_member_end_text_color: '#FFEBCA',
price_color: 'rgba(252,82,39,1)',//价格颜色 },
btn_text_color: '#FFFFFF',//按钮文字颜色 bargain: {
...{ bargain_promotion_color: '#F0353E',//活动背景
goods_price: 'rgba(252,82,39,1)',//价格 bargain_promotion_aux_color: '#FD9A01',//活动辅色
promotion_tag: '#CFAF70', },
goods_card_bg: '#201A18',//会员卡背景 seckill: {
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色 seckill_promotion_color: '#F83530',//活动背景
goods_card_color: '#FFD792', seckill_promotion_aux_color: '#FD9A01',//活动辅色
goods_coupon: '#FC5227', },
goods_cart_num_corner: '#FC5227',//购物车数量角标 giftcard: {
goods_btn_color: '#CFAF70',//按钮颜色 giftcard_promotion_color: '#FF3369',//活动背景
goods_btn_color_shallow: '#444444',//副按钮颜 giftcard_promotion_aux_color: '#F7B500',//活动辅
}, },
...{ groupby: {
pintuan_label_bg: '#F7B500', groupby_promotion_color: '#E64136',//活动背景
pintuan_label_color: '#FFFFFF', groupby_promotion_aux_color: '#F7B500',//活动辅色
pintuan_color: '#FA6400', },
pintuan_promotion_color: '#FA3A1D',//活动背景 },
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色 'purple': {
}, name: 'purple',
...{ main_color: '#A253FF',
super_member_start_bg: '#7c7878', aux_color: '#222222',
super_member_end_bg: '#201a18', bg_color: '#A253FF',//主题背景
super_member_start_text_color: '#FFDBA6', bg_color_shallow: '#A253FF',//主题背景渐变浅色
super_member_end_text_color: '#FFEBCA', promotion_color: '#A253FF',//活动背景
}, promotion_aux_color: '#222222',//活动背景辅色
...{ main_color_shallow: '#F8F3FF',//淡背景
bargain_promotion_color: '#F0353E',//活动背景 price_color: 'rgba(252,82,39,1)',//价格颜色
bargain_promotion_aux_color: '#FD9A01',//活动辅 btn_text_color: '#FFFFFF',//按钮文字颜
}, goods_detail: {
...{ goods_price: 'rgba(252,82,39,1)',//价格
seckill_promotion_color: '#F83530',//活动背景 promotion_tag: '#A253FF',
seckill_promotion_aux_color: '#FD9A01',//活动辅色 goods_card_bg: '#201A18',//会员卡背景
}, goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
...{ goods_card_color: '#FFD792',
giftcard_promotion_color: '#FF3369',//活动背景 goods_coupon: '#FC5227',
giftcard_promotion_aux_color: '#F7B500',//活动辅色 goods_cart_num_corner: '#FC5227',//购物车数量角标
}, goods_btn_color: '#A253FF',//按钮颜色
...{ goods_btn_color_shallow: '#222222',//副按钮颜色
groupby_promotion_color: '#E64136',//活动背景 },
groupby_promotion_aux_color: '#F7B500',//活动辅色 pintuan: {
}, pintuan_label_bg: '#F7B500',
...{ pintuan_label_color: '#FFFFFF',
hover_nav_bg_color: '#CFAF70',//背景色 pintuan_color: '#FA6400',
hover_nav_text_color: '#FFFFFF' pintuan_promotion_color: '#FA3A1D',//活动背景
}, pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
}, },
'purple': { super_member: {
name: 'purple', super_member_start_bg: '#7c7878',
main_color: '#A253FF', super_member_end_bg: '#201a18',
aux_color: '#222222', super_member_start_text_color: '#FFDBA6',
bg_color: '#A253FF',//主题背景 super_member_end_text_color: '#FFEBCA',
bg_color_shallow: '#A253FF',//主题背景渐变浅色 },
promotion_color: '#A253FF',//活动背景 bargain: {
promotion_aux_color: '#222222',//活动背景辅色 bargain_promotion_color: '#F0353E',//活动背景
main_color_shallow: '#F8F3FF',//淡背景 bargain_promotion_aux_color: '#FD9A01',//活动辅色
price_color: 'rgba(252,82,39,1)',//价格颜色 },
btn_text_color: '#FFFFFF',//按钮文字颜色 seckill: {
...{ seckill_promotion_color: '#F83530',//活动背景
goods_price: 'rgba(252,82,39,1)',//价格 seckill_promotion_aux_color: '#FD9A01',//活动辅色
promotion_tag: '#A253FF', },
goods_card_bg: '#201A18',//会员卡背景 giftcard: {
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色 giftcard_promotion_color: '#FF3369',//活动背景
goods_card_color: '#FFD792', giftcard_promotion_aux_color: '#F7B500',//活动辅色
goods_coupon: '#FC5227', },
goods_cart_num_corner: '#FC5227',//购物车数量角标 groupby: {
goods_btn_color: '#A253FF',//按钮颜色 groupby_promotion_color: '#E64136',//活动背景
goods_btn_color_shallow: '#222222',//副按钮颜 groupby_promotion_aux_color: '#F7B500',//活动辅
}, },
...{ },
pintuan_label_bg: '#F7B500', 'yellow': {
pintuan_label_color: '#FFFFFF', name: 'yellow',
pintuan_color: '#FA6400', main_color: '#FFD009',
pintuan_promotion_color: '#FA3A1D',//活动背景 aux_color: '#1D262E',
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色 bg_color: '#FFD009',//主题背景
}, bg_color_shallow: '#FFD009',//主题背景渐变浅色
...{ promotion_color: '#FFD009',//活动背景
super_member_start_bg: '#7c7878', promotion_aux_color: '#1D262E',//活动背景辅色
super_member_end_bg: '#201a18', main_color_shallow: '#FFFBEF',//淡背景
super_member_start_text_color: '#FFDBA6', price_color: 'rgba(252,82,39,1)',//价格颜色
super_member_end_text_color: '#FFEBCA', btn_text_color: '#303133',//按钮文字颜色
}, goods_detail: {
...{ goods_price: 'rgba(252,82,39,1)',//价格
bargain_promotion_color: '#F0353E',//活动背景 promotion_tag: '#FFD009',
bargain_promotion_aux_color: '#FD9A01',//活动辅色 goods_card_bg: '#201A18',//会员卡背景
}, goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
...{ goods_card_color: '#FFD792',
seckill_promotion_color: '#F83530',//活动背景 goods_coupon: '#FC5227',
seckill_promotion_aux_color: '#FD9A01',//活动辅色 goods_cart_num_corner: '#FC5227',//购物车数量角标
}, goods_btn_color: '#FFD009',//按钮颜色
...{ goods_btn_color_shallow: '#1D262E',//副按钮颜色
giftcard_promotion_color: '#FF3369',//活动背景 },
giftcard_promotion_aux_color: '#F7B500',//活动辅色 pintuan: {
}, pintuan_label_bg: '#F7B500',
...{ pintuan_label_color: '#FFFFFF',
groupby_promotion_color: '#E64136',//活动背景 pintuan_color: '#FA6400',
groupby_promotion_aux_color: '#F7B500',//活动辅色 pintuan_promotion_color: '#FA3A1D',//活动背景
}, pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
...{ },
hover_nav_bg_color: '#A253FF',//背景色 super_member: {
hover_nav_text_color: '#FFFFFF' super_member_start_bg: '#7c7878',
}, super_member_end_bg: '#201a18',
}, super_member_start_text_color: '#FFDBA6',
'yellow': { super_member_end_text_color: '#FFEBCA',
name: 'yellow', },
main_color: '#FFD009', bargain: {
aux_color: '#1D262E', bargain_promotion_color: '#F0353E',//活动背景
bg_color: '#FFD009',//主题背景 bargain_promotion_aux_color: '#FD9A01',//活动辅色
bg_color_shallow: '#FFD009',//主题背景渐变浅色 },
promotion_color: '#FFD009',//活动背景 seckill: {
promotion_aux_color: '#1D262E',//活动背景辅色 seckill_promotion_color: '#F83530',//活动背景
main_color_shallow: '#FFFBEF',//淡背景 seckill_promotion_aux_color: '#FD9A01',//活动辅色
price_color: 'rgba(252,82,39,1)',//价格颜色 },
btn_text_color: '#303133',//按钮文字颜色 giftcard: {
...{ giftcard_promotion_color: '#FF3369',//活动背景
goods_price: 'rgba(252,82,39,1)',//价格 giftcard_promotion_aux_color: '#F7B500',//活动辅色
promotion_tag: '#FFD009', },
goods_card_bg: '#201A18',//会员卡背景 groupby: {
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色 groupby_promotion_color: '#E64136',//活动背景
goods_card_color: '#FFD792', groupby_promotion_aux_color: '#F7B500',//活动辅色
goods_coupon: '#FC5227', },
goods_cart_num_corner: '#FC5227',//购物车数量角标 },
goods_btn_color: '#FFD009',//按钮颜色 'black': {
goods_btn_color_shallow: '#1D262E',//副按钮颜色 name: 'black',
}, main_color: '#222222',
...{ aux_color: '#FFFFFF',
pintuan_label_bg: '#F7B500', bg_color: '#222222',//主题背景
pintuan_label_color: '#FFFFFF', bg_color_shallow: '#333333',//主题背景渐变浅色
pintuan_color: '#FA6400', promotion_color: '#222222',//活动背景
pintuan_promotion_color: '#FA3A1D',//活动背景 promotion_aux_color: '#FA8B00',//活动背景辅色
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色 main_color_shallow: '#efefef',//淡背景
}, price_color: 'rgba(255,0,0,1)',//价格颜色
...{ btn_text_color: '#FFFFFF',//按钮文字颜色
super_member_start_bg: '#7c7878', goods_detail: {
super_member_end_bg: '#201a18', goods_price: 'rgba(255,0,0,1)',//价格
super_member_start_text_color: '#FFDBA6', promotion_tag: '#222222',
super_member_end_text_color: '#FFEBCA', goods_card_bg: '#201A18',//会员卡背景
}, goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
...{ goods_card_color: '#FFD792',
bargain_promotion_color: '#F0353E',//活动背景 goods_coupon: '#222222',
bargain_promotion_aux_color: '#FD9A01',//活动辅色 goods_cart_num_corner: '#FF0000',//购物车数量角标
}, goods_btn_color: '#222222',//按钮颜色
...{ goods_btn_color_shallow: '#FA8B00',//副按钮颜色
seckill_promotion_color: '#F83530',//活动背景 },
seckill_promotion_aux_color: '#FD9A01',//活动辅色 pintuan: {
}, pintuan_label_bg: '#F7B500',
...{ pintuan_label_color: '#FFFFFF',
giftcard_promotion_color: '#FF3369',//活动背景 pintuan_color: '#FA6400',
giftcard_promotion_aux_color: '#F7B500',//活动辅色 pintuan_promotion_color: '#FA3A1D',//活动背景
}, pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
...{ },
groupby_promotion_color: '#E64136',//活动背景 super_member: {
groupby_promotion_aux_color: '#F7B500',//活动辅色 super_member_start_bg: '#fadcb5',
}, super_member_end_bg: '#f6bd74',
...{ super_member_start_text_color: '#ab6126',
hover_nav_bg_color: '#FFD009',//背景色 super_member_end_text_color: '#d19336',
hover_nav_text_color: '#303133' },
}, bargain: {
}, bargain_promotion_color: '#F0353E',//活动背景
'black': { bargain_promotion_aux_color: '#FD9A01',//活动辅色
name: 'black', },
main_color: '#222222', seckill: {
aux_color: '#FFFFFF', seckill_promotion_color: '#F83530',//活动背景
bg_color: '#222222',//主题背景 seckill_promotion_aux_color: '#FD9A01',//活动辅色
bg_color_shallow: '#333333',//主题背景渐变浅色 },
promotion_color: '#222222',//活动背景 giftcard: {
promotion_aux_color: '#FA8B00',//活动背景辅色 giftcard_promotion_color: '#FF3369',//活动背景
main_color_shallow: '#efefef',//淡背景 giftcard_promotion_aux_color: '#F7B500',//活动辅色
price_color: 'rgba(255,0,0,1)',//价格颜色 },
btn_text_color: '#FFFFFF',//按钮文字颜色 groupby: {
...{ groupby_promotion_color: '#E64136',//活动背景
goods_price: 'rgba(255,0,0,1)',//价格 groupby_promotion_aux_color: '#F7B500',//活动辅色
promotion_tag: '#222222', },
goods_card_bg: '#201A18',//会员卡背景 }
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色 }
goods_card_color: '#FFD792',
goods_coupon: '#222222',
goods_cart_num_corner: '#FF0000',//购物车数量角标
goods_btn_color: '#222222',//按钮颜色
goods_btn_color_shallow: '#FA8B00',//副按钮颜色
},
...{
pintuan_label_bg: '#F7B500',
pintuan_label_color: '#FFFFFF',
pintuan_color: '#FA6400',
pintuan_promotion_color: '#FA3A1D',//活动背景
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
},
...{
super_member_start_bg: '#fadcb5',
super_member_end_bg: '#f6bd74',
super_member_start_text_color: '#ab6126',
super_member_end_text_color: '#d19336',
},
...{
bargain_promotion_color: '#F0353E',//活动背景
bargain_promotion_aux_color: '#FD9A01',//活动辅色
},
...{
seckill_promotion_color: '#F83530',//活动背景
seckill_promotion_aux_color: '#FD9A01',//活动辅色
},
...{
giftcard_promotion_color: '#FF3369',//活动背景
giftcard_promotion_aux_color: '#F7B500',//活动辅色
},
...{
groupby_promotion_color: '#E64136',//活动背景
groupby_promotion_aux_color: '#F7B500',//活动辅色
},
...{
hover_nav_bg_color: '#222222',//背景色
hover_nav_text_color: '#FFFFFF'
},
}
}

View File

@@ -1,148 +0,0 @@
/**
* 将常用的Uniapp提供的函数存放到这里按需引用
*/
/**
* 显示错误信息
* @param {Exception} err
* @param {Boolean} useModal
*/
const showError = (err, useModal = false) => {
const content = err?.message || err?.errMsg || err?.toString();
if (!useModal) {
uni.showToast({
title: content,
icon: 'none',
duration: 3000
});
} else {
uni.showModal({
title: '错误提示',
content,
showCancel: false,
})
}
}
/**
* 打电话
* @param {string} mobile 电话号码
*/
export const makePhoneCall = (mobile) => {
try {
uni.makePhoneCall({
phoneNumber: `${mobile}`,
success(e) {
console.log(e);
}
});
} catch (err) {
showError(err);
}
}
/**
* 拷贝文本(返回 Promise
* @param {*} text
* @param {*} options
* @returns {Promise} 返回 Promise成功时 resolve失败时 reject
*/
export const copyTextAsync = (text, { copySuccess = '', copyFailed = '' } = {}) => {
return new Promise((resolve, reject) => {
// 输入验证
if (!text && text !== '') {
const error = new Error('复制文本不能为空');
showError(error);
reject(error);
return;
}
// 超时监测
const timeoutId = setTimeout(() => {
let error = new Error('复制操作长时间无响应,请检查相关权限及配置是否正确');
// #ifdef MP-WEIXIN
error = new Error([
'复制操作长时间无响应!',
'原因:',
'1.微信平台->用户隐私保护指引->"剪贴板"功能未添加或审核未通过;',
'2.微信平台对剪贴板API调用频率有限制'
].join('\r\n'));
// #endif
showError(error, true);
reject(error);
}, 5000);
try {
uni.setClipboardData({
data: `${text}`,
success: (res) => {
clearTimeout(timeoutId);
try {
if (copySuccess) {
uni.showToast({
title: copySuccess,
icon: 'success',
duration: 2000
});
}
} catch (e) {
showError(e);
}
resolve(res);
},
fail: (err) => {
clearTimeout(timeoutId);
try {
uni.showToast({
title: err.message || err.errMsg || copyFailed || '复制失败',
icon: 'none',
duration: 2000
});
} catch (e) {
showError(e);
}
reject(err);
}
});
} catch (err) {
clearTimeout(timeoutId);
showError(err);
reject(err);
}
});
}
/**
* 拷贝文本(回调形式,兼容旧代码)
* @param {*} text
* @param {*} options
* @param {Function} callback 回调函数,接收 (success, error) 参数
*/
export const copyText = (text, options = {}, callback) => {
copyTextAsync(text, options)
.then(res => {
if (callback) callback(true, null);
})
.catch(err => {
if (callback) callback(false, err);
});
}
/**
* 打开定位
* @param {Object} options
*/
export const openLocation = ({ latitude, longitude, name } = {}) => {
try {
uni.openLocation({
latitude,
longitude,
name,
});
} catch (err) {
showError(err);
}
}

File diff suppressed because it is too large Load Diff

View File

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

@@ -1,143 +0,0 @@
// 公共微信视频号样式
// CSS 变量
:root {
// 尺寸变量
--channel-play-btn-size: 80rpx;
--channel-play-btn-small-size: 60rpx;
--channel-play-btn-icon-size: 40rpx;
--channel-play-btn-icon-small-size: 30rpx;
--channel-border-radius: 12rpx;
--channel-stats-padding: 10rpx;
--channel-info-wrap-padding: 10rpx 0;
// 字体变量
--channel-name-font-size: 28rpx;
--video-title-font-size: 28rpx;
--video-title-small-font-size: 24rpx;
--video-stats-font-size: 24rpx;
--channel-stats-font-size: 20rpx;
// 颜色变量
--channel-name-color: #333;
--video-title-color: #333;
--video-title-small-color: #666;
--video-stats-color: #999;
--channel-stats-color: #fff;
--channel-border-color: #f0f0f0;
--channel-play-btn-bg: rgba(0, 0, 0, 0.4);
--channel-stats-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
// 间距变量
--channel-name-margin-bottom: 4rpx;
--video-title-margin-bottom: 8rpx;
}
// 响应式设计
@media (max-width: 375px) {
:root {
--channel-play-btn-size: 70rpx;
--channel-play-btn-small-size: 50rpx;
--channel-play-btn-icon-size: 35rpx;
--channel-play-btn-icon-small-size: 25rpx;
--channel-name-font-size: 24rpx;
--video-title-font-size: 24rpx;
}
}
@media (min-width: 750px) {
:root {
--channel-play-btn-size: 90rpx;
--channel-play-btn-small-size: 70rpx;
--channel-play-btn-icon-size: 45rpx;
--channel-play-btn-icon-small-size: 35rpx;
--channel-name-font-size: 32rpx;
--video-title-font-size: 32rpx;
}
}
// 播放按钮样式
.channel-play-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
width: var(--channel-play-btn-size);
height: var(--channel-play-btn-size);
background-color: var(--channel-play-btn-bg);
border-radius: 50%;
.play-icon {
width: var(--channel-play-btn-icon-size);
height: var(--channel-play-btn-icon-size);
}
}
// 小尺寸播放按钮(用于列表)
.channel-play-btn.small {
width: var(--channel-play-btn-small-size);
height: var(--channel-play-btn-small-size);
.play-icon {
width: var(--channel-play-btn-icon-small-size);
height: var(--channel-play-btn-icon-small-size);
}
}
// 视频统计信息
.channel-stats {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--channel-stats-bg);
padding: var(--channel-stats-padding);
color: var(--channel-stats-color);
font-size: var(--channel-stats-font-size);
}
// 视频信息容器
.channel-info-wrap {
display: flex;
flex-direction: column;
flex: 1;
padding: var(--channel-info-wrap-padding);
.channel-name {
margin-bottom: var(--channel-name-margin-bottom);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: var(--channel-name-font-size);
font-weight: 500;
color: var(--channel-name-color);
}
.video-title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: var(--video-title-small-font-size);
color: var(--video-title-small-color);
}
}
// 视频标题
.video-title {
font-size: var(--video-title-font-size);
font-weight: 500;
color: var(--video-title-color);
margin-bottom: var(--video-title-margin-bottom);
line-height: 1.4;
}
// 视频统计信息(非绝对定位版本)
.video-stats {
font-size: var(--video-stats-font-size);
color: var(--video-stats-color);
}

View File

@@ -1,265 +0,0 @@
<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">
<!-- 自动垂直滚动 -->
<swiper class="auto-scroll-swiper" :style="[swiperStyle]" :vertical="swiperConfig.vertical !== false"
:autoplay="swiperConfig.autoplay !== false" :circular="swiperConfig.circular !== false"
:interval="swiperConfig.interval || 3000" :duration="swiperConfig.duration || 500"
:display-multiple-items="safeDisplayMultipleItems">
<swiper-item v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)">
<view class="swiper-item-content">
<view :class="['item', value.ornament.type]" :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>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</x-skeleton>
</template>
<script>
import DiyMinx from './minx.js'
// 文章
export default {
name: 'diy-article',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
list: [],
loading: true,
skeletonConfig: {
gridRows: 1,
gridRowsGap: '40rpx',
headWidth: '160rpx',
headHeight: '160rpx',
textRows: 2
}
};
},
created() {
this.getList();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getList();
}
},
computed: {
// 获取swiper配置默认空对象
swiperConfig() {
return this.value?.swiperConfig || {};
},
// 安全的display-multiple-items值确保不大于swiper-item数量
safeDisplayMultipleItems() {
const displayCount = this.swiperConfig.displayMultipleItems || 3;
const actualCount = this.list.length;
return actualCount > 0 ? Math.min(displayCount, actualCount) : 1;
},
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// swiper容器样式
swiperStyle() {
// 从swiperConfig获取高度默认600rpx
const height = this.swiperConfig.swiperHeight || 600;
return {
height: height + 'rpx',
width: '100%'
};
},
// 子项样式
itemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
}
return obj;
}
},
methods: {
getList() {
var data = {
num: this.value.count
};
if (this.value.sources == 'diy') {
data.num = 0;
data.article_id_arr = this.value.articleIds.toString();
}
this.$api.sendRequest({
url: '/api/article/lists',
data: data,
success: res => {
if (res.code == 0 && res.data) {
let data = res.data;
this.list = data;
}
this.loading = false;
}
});
},
toDetail(item) {
this.$util.redirectTo('/pages_tool/article/detail', {
article_id: item.article_id
});
},
imgError(index) {
if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article;
}
}
};
</script>
<style lang="scss">
.article-wrap {
.list-wrap {
.auto-scroll-swiper {
height: 600rpx;
/* 可以根据需要调整高度 */
width: 100%;
.swiper-item-content {
padding: 10rpx 20rpx;
box-sizing: border-box;
}
}
.item {
margin: 0;
margin-bottom: 24rpx;
}
.style-1 .item {
padding: 20rpx;
}
&.style-1 {
.item {
display: flex;
margin-top: 0;
&:first-of-type {
margin-top: 0;
}
.article-img {
margin-right: 20rpx;
width: 160rpx;
height: 160rpx;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
}
}
.info-wrap {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-weight: bold;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 30rpx;
line-height: 1.5;
}
.abstract {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: $font-size-tag;
}
.read-wrap {
display: flex;
color: #999ca7;
justify-content: flex-start;
align-items: center;
margin-top: 10rpx;
line-height: 1;
text {
font-size: $font-size-tag;
}
.iconfont {
font-size: 36rpx;
vertical-align: bottom;
margin-right: 10rpx;
}
.category-icon {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: $base-color;
margin-right: 10rpx;
}
.date {
margin-left: 20rpx;
}
}
}
}
}
}
}
</style>

View File

@@ -1,453 +0,0 @@
<template>
<view data-component-name="diy-audio">
<view class="fui-audio style1" :style="{ background: value.background }" v-if="value.type == 'style-2'">
<view class="content" style="padding-top: 20rpx;">
<view class="name" :style="{ color: value.textcolor }">{{ value.text }}</view>
<view class="author" :style="{ color: value.subtitlecolor }">{{ value.desc }}----{{ value.id }}</view>
</view>
<view class="progress">
<view class="progressBar" :style="{ width: audiowidth }"></view>
</view>
<view class="time" :style="{ color: value.timecolor }">
{{ audiotime }}
</view>
<view @tap.stop="play()" class="start" :class="status ? 'iconj icon-07zanting' : 'iconj icon-bofang'"
style="padding-top: 18rpx"></view>
</view>
<view class="fui-audio style3" :style="{ background: value.background }" v-else>
<!-- <audio src="/static/audio/bgm.mp3" controls loop></audio> -->
<view class="img">
<image :src="$util.img(value.imageUrl)"></image>
</view>
<view class="content">
<view class="name" :style="{ color: value.textcolor }">{{ value.text }}</view>
<view class="author" :style="{ color: value.subtitlecolor }">{{ value.desc }}</view>
</view>
<view class="progress">
<view class="progressBar" :style="{ width: audiowidth }"></view>
</view>
<view class="time" :style="{ color: value.timecolor }">
<!-- {{audios[value.id].audiotime}} -->
{{ audiotime }}
</view>
<view @tap.stop="play()" class="start" :class="status ? 'iconj icon-07zanting' : 'iconj icon-bofang'"></view>
</view>
</view>
</template>
<script>
import DiyMinx from './minx.js'
// 音频
export default {
name: 'diy-audio',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
audiosObj: [],
audios: {},
audioContext: null,
audiotime: '00:01',
audiowidth: 0,
status: 0,//1播放0停止
};
},
created() {
// console.log(this.value)
this.audios[this.value.id] = {
audiotime: '00:01',
audiowidth: 0
}
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
computed: {
videoWarpCss: function () {
var obj = '';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
play() {
var t = this.value.id, a = this.audiosObj[t] || !1;
var e = {
audio: this.$util.img(this.value.audioUrl),
}
if (!a) {
a = uni.createInnerAudioContext("audio_" + t);
var i = this.audiosObj;
i[t] = a, this.audiosObj = i
// uni.setStorageSync('audio_list',audio_list)
var audio_list = uni.getStorageSync('audio_list') ? uni.getStorageSync('audio_list') : []
if (audio_list.includes(t) == false) {
audio_list.push(t)
uni.setStorageSync('audio_list', audio_list)
}
}
console.log(uni.getStorageSync('audio_list'))
var n = this;
// console.log(a)
a.onPlay(function () {
var e = setInterval(function () {
var i = a.currentTime / a.duration * 100 + "%", s = Math.floor(Math.ceil(a.currentTime) / 60), o = (Math.ceil(a.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(a.currentTime);
s < 10 && (s = "0" + s);
var u = s + ":" + o, c = n.audios;
// console.log(i)
c[t].audiowidth = i, c[t].Time = e, c[t].audiotime = u, c[t].seconds = r, n.audios = c;
}, 1e3);
});
var s = n.$util.img(n.value.audioUrl), o = n.audios[n.value.id].seconds || 0, r = 0, u = 1;
0 == u && a.onEnded(function (e) {
c[t].status = !1, n.status = !1, c[t].seconds = 0, console.log(c), n.audios = c;
});
var c = n.audios;
c[t] || (c[t] = {}), a.paused && 0 == o ? (a.src = s, a.play(), 1 == u && (a.loop = !0),
c[t].status = !0, n.status = !0, n.pauseOther(t)) : a.paused && o > 0 ? (a.play(), 0 == r ? a.seek(o) : a.seek(0),
c[t].status = !0, n.status = !0, n.pauseOther(t)) : (a.pause(), c[t].status = !1, n.status = !1), n.audios = c;
console.log(n.audios)
},
pauseOther: function (e) {
var t = this;
// console.log(this.audiosObj[this.value.id]);
var i = this.audiosObj[this.value.id], a = this.value.id
// console.log(i)
// console.log(a)
// if (a != e) {
// i.pause();
// var n = t.audios;
// n[a] && (n[a].status = !1, this.audios=n);
// }
var audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
var self = this;
[].forEach.call(audios, function (i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause();
})
}
// 给play事件绑定暂停函数
[].forEach.call(audios, function (i) {
i.addEventListener("play", pauseAll.bind(i));
})
// var audio_list = uni.getStorageSync('audio_list')
// audio_list.forEach(function(value, index) {
// if (value != e) {
// console.log(e)
// uni.createInnerAudioContext("audio_" + value).pause();
// }
// });
// this.audiosObj.forEach(function(value, index) {
// console.log(value);
// });
// this.each(this.audiosObj, function(a, i) {
// if (a != e) {
// i.pause();
// var n = t.data.audios;
// n[a] && (n[a].status = !1, t.setData({
// audios: n
// }));
// }
// });
},
play_bak() {
var t = this.value.id
this.audioContext = uni.createInnerAudioContext("audio_" + this.value.id);
this.audioContext.src = this.$util.img(this.value.audioUrl);
var that = this
if (this.status == 1) {
this.audioContext.pause();
this.status = 0
return false
}
this.audioContext.play();
this.status = 1
this.audioContext.onCanplay(function (s) {
var e = setInterval(function () {
var i = parseFloat(that.audioContext.currentTime) / parseFloat(that.audioContext.duration) * 100 + "%", s = Math.floor(Math.ceil(that.audioContext.currentTime) / 60), o = (Math.ceil(that.audioContext.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(that.audioContext.currentTime);
s < 10 && (s = "0" + s);
var u = s + ":" + o, c = that.audios;
c[t].audiowidth = i, c[t].Time = e, c[t].audiotime = u, c[t].seconds = r
that.audios = c
// console.log(c)
console.log(that.audios[that.value.id].audiotime)
that.audiotime = that.audios[that.value.id].audiotime
that.audiowidth = that.audios[that.value.id].audiowidth
console.log(i)
that.lyg = i
}, 1e3);
});
this.audioContext.onEnded(() => {
console.log('播放结束');
this.status = 0
});
}
}
};
</script>
<style scoped>
.fui-audio {
width: 100%;
border: 1rpx solid #eeeeee;
padding: 0 30rpx 0 20rpx;
box-sizing: border-box;
position: relative;
overflow: hidden;
background: #fff;
}
.fui-audio .img {
width: 100rpx;
height: 100rpx;
background: #000;
}
.fui-audio .img image {
width: 100%;
height: 100%;
}
.fui-audio .name {
font-size: 26rpx;
color: #333;
}
.fui-audio .author {
font-size: 26rpx;
color: #666;
}
.fui-audio .time {
font-size: 24rpx;
color: #999;
}
.fui-audio .start {
border: 0;
padding: 0;
margin: 0;
font-size: 28rpx;
}
.progressBar {
height: 2rpx;
width: 0;
background: #333;
}
.fui-audio.style1 {
height: 86rpx;
line-height: 82rpx;
}
.fui-audio.style1 .img,
.fui-audio.style2 .img {
display: none;
}
.fui-audio.style1 .name,
.fui-audio.style2 .name {
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300rpx;
}
.fui-audio.style1 .author,
.fui-audio.style2 .author {
float: left;
margin-left: 12rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200rpx;
}
.fui-audio.style1 .time,
.fui-audio.style4 .time {
display: none;
}
.fui-audio.style1 .start {
position: absolute;
top: 0rpx;
right: 40rpx;
width: 40rpx;
height: 40rpx;
color: #000;
}
.fui-audio.style1 .progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.fui-audio.style2 {
height: 86rpx;
line-height: 82rpx;
}
.fui-audio.style2 .img {
display: none;
}
.fui-audio.style2 .time {
position: absolute;
top: 0;
right: 30rpx;
}
.fui-audio.style2 .name {
margin-left: 70rpx;
}
.fui-audio.style2 .start {
position: absolute;
top: 0rpx;
left: 30rpx;
width: 30rpx;
height: 30rpx;
color: #000;
}
.fui-audio.style2 .progress,
.fui-audio.style3 .progress {
display: none;
}
.fui-audio.style3 {
padding: 8rpx;
}
.fui-audio.style3 .start {
position: absolute;
top: 30rpx;
left: 28rpx;
width: 56rpx;
height: 56rpx;
color: #fff;
/* border: 2rpx solid #fff; */
border-radius: 50%;
text-indent: 18rpx;
line-height: 56rpx;
}
.fui-audio.style3 .img,
.fui-audio.style4 .img {
float: left;
margin-right: 20rpx;
}
.fui-audio.style3 .content {
width: 468rpx;
}
.fui-audio.style3 .content,
.fui-audio.style4 .content {
float: left;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.fui-audio.style3 .content .name {
height: 40rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fui-audio.style3 .content .author {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fui-audio.style3 .time {
position: absolute;
top: 40rpx;
right: 30rpx;
}
.fui-audio.style4 {
padding: 10rpx;
}
.fui-audio.style4 .content {
padding-bottom: 18rpx;
height: 82rpx;
width: 500rpx;
}
.fui-audio.style4 .start {
position: absolute;
top: 32rpx;
right: 30rpx;
width: 30rpx;
height: 30rpx;
color: #000;
}
.fui-audio.style4 .name {
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fui-audio.style4 .author {
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fui-audio.style4 .progress {
background: #f5f5f5;
height: 4rpx;
position: absolute;
bottom: 24rpx;
left: 130rpx;
right: 30rpx;
border-radius: 2rpx;
overflow: hidden;
}
.fui-audio.style4 .progressBar {
height: 4rpx;
}
.diy-audio>>>.uni-video-container {
background-color: transparent;
}
</style>

View File

@@ -1,777 +0,0 @@
<template>
<x-skeleton data-component-name="diy-bargain" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-bargain" :class="[value.template, value.style]" :style="warpCss">
<!-- 商品头部 -->
<view v-if="value.titleStyle.isShow && list && list.length"
:class="[value.titleStyle.style, 'bargain-head']"
:style="{ backgroundImage: 'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')' }">
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text"
:style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
{{ value.titleStyle.leftText }}
</view>
<image v-else class="left-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix"></image>
<view class="head-content" v-if="value.titleStyle.style == 'style-1'"
:style="{ color: value.titleStyle.textColor }">低至0元免费拿</view>
<view class="head-right"
:style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }"
@tap.stop="$util.redirectTo('/pages_promotion/bargain/list')">
<text>{{ value.titleStyle.more }}</text>
<text class="iconfont icon-right"></text>
</view>
</view>
<!-- 商品列表 -->
<template v-if="value.template == 'row1-of1'">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" />
</view>
<view class="content"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.btnStyle.control">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="progress" v-if="value.style == 'style-2'">
<view class="bg">
<view class="curr" :style="{ width: progress(item) * 2 + 'rpx' }">
<image class="progress-bar" mode="widthFix"
:src="$util.img('public/uniapp/bargain/progress_bar_01.png')" />
</view>
</view>
<view class="num" v-if="item.is_bargaining">
已砍
<text>{{ (item.price - item.curr_price).toFixed(2) }}</text>
仅差
<text>{{ item.curr_price }}</text>
</view>
<view class="num" v-else>
最低可砍至
<text>{{ item.floor_price }}</text>
</view>
</view>
<view class="progress" v-if="value.style == 'style-3'">
最低可砍至
<text class="num">{{ item.floor_price }}</text>
</view>
<view class="price-wrap">
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.price.split('.')[0] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">.{{
item.price.split('.')[1] }}</text>
</view>
<button v-if="value.btnStyle.control" :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'
}">
{{ item.is_bargaining ? '继续砍价' : value.btnStyle.text }}
</button>
</view>
</view>
</view>
</template>
<template v-if="value.template == 'horizontal-slide'">
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" :lazy-load="true" />
<image class="bg"
v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'"
:src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix" />
<view class="num"
v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'"
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
已砍{{ item.sale_num }}
</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="discount-price"
v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.floor_price.split('.')[0] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
'.' + item.floor_price.split('.')[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
¥{{ item.price }}
</view>
</view>
</view>
</scroll-view>
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
:style="{ height: swiperHeight }">
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
@tap.stop="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(dataIndex)" :lazy-load="true" />
<image class="bg"
v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'"
:src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix" />
<view class="num"
v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'"
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
已砍{{ item.sale_num }}
</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="discount-price"
v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.floor_price.split('.')[0] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
'.' + item.floor_price.split('.')[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
¥{{ item.price }}
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</x-skeleton>
</template>
<script>
import DiyMinx from './minx.js'
// 砍价商品
export default {
name: 'diy-bargain',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
list: [],
page: 1,
loading: true,
skeletonType: '',
skeletonConfig: {}
};
},
components: {},
async created() {
this.initSkeleton();
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') await this.getDataing();
this.getData();
},
watch: {
// 组件刷新监听
componentRefresh: async function (nval) {
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') await this.getDataing();
this.getData();
}
},
computed: {
warpCss() {
var obj = '';
if (this.value.componentBgColor) obj += 'background:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().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);
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
obj += 'margin-left:' + width + 'px;';
obj += 'margin-right:' + width + 'px;';
}
return obj;
},
swiperHeight() {
if (this.value.nameLineMode == 'multiple') {
if (this.value.ornament.type == 'shadow') return '420rpx';
else return '400rpx';
}
if (this.value.ornament.type == 'shadow') return '386rpx';
else return '378rpx';
}
},
methods: {
initSkeleton() {
if (this.value.template == 'row1-of1') {
// 单列 风格
this.skeletonType = 'list';
this.skeletonConfig = {
textRows: 2
};
} else if (this.value.template == 'horizontal-slide') {
// 横向滑动 风格
this.skeletonType = 'waterfall';
this.skeletonConfig = {
gridRows: 1,
gridColumns: 3,
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '80%']
};
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},
// 查找自己参与的砍价
async getDataing() {
var res = await this.$api.sendRequest({
url: '/bargain/api/goods/bargainingList',
data: {},
async: false
});
res.data &&
res.data.forEach((item, index) => {
item.is_bargaining = 1;
});
this.list = res.data || [];
this.loading = false;
},
// 查找可砍价的商品
getData() {
var data = {
num: this.value.count,
is_exclude_bargaining: 1
};
if (this.value.sources == 'diy') {
data.num = 0;
data.id_arr = this.value.goodsId.toString();
}
this.$api.sendRequest({
url: '/bargain/api/goods/lists',
data: data,
success: res => {
if (res.code == 0) {
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') this.list =
this.list.concat(res.data).splice(0, this.value.count);
else this.list = res.data;
// 切屏滚动,每页显示固定数量
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
}
this.loading = false;
}
});
},
progress(data) {
// 214 表示当前进度条的宽度
let progress = (((parseFloat(data.price) - parseFloat(data.curr_price)) / parseFloat(data.price)) * 214)
.toFixed();
if (progress == 'NaN') {
progress = 0;
}
return progress;
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/bargain/detail', {
b_id: e.bargain_id
});
},
imageError(index) {
this.list[index].goods_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
}
};
</script>
<style lang="scss">
::v-deep .uni-scroll-view ::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
::v-deep ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
touch-action: none;
}
.diy-bargain {
overflow: hidden;
// 头部
.bargain-head {
&.style-1 {
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
box-sizing: border-box;
padding: 0 20rpx;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20rpx;
border-radius: 18rpx 18rpx 0 0;
.left-img {
height: 40rpx;
width: 156rpx;
}
.head-content {
position: relative;
color: #fff;
font-size: $font-size-tag;
margin-right: auto;
margin-left: 20rpx;
line-height: 1;
&::after {
content: '';
position: absolute;
width: 2rpx;
height: 24rpx;
background-color: #fff;
top: 50%;
transform: translateY(-50%);
left: -12rpx;
}
}
.head-right {
display: flex;
align-items: center;
font-size: $font-size-sub;
color: #fff;
}
}
&.style-2 {
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
box-sizing: border-box;
padding: 0 20rpx;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20rpx;
border-radius: 18rpx 18rpx 0 0;
.left-img {
height: 40rpx;
width: 156rpx;
}
.head-right {
display: flex;
align-items: center;
justify-content: center;
height: 36rpx;
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
border-radius: 24rpx;
padding: 2rpx;
text:nth-child(1) {
position: relative;
left: 6rpx;
transform: scale(0.9);
}
text:nth-child(2) {
padding: 6rpx 4rpx 4rpx;
background-color: #fff;
color: #ffbd5b;
border-radius: 50%;
transform: scale(0.6);
font-weight: bold;
line-height: 1;
}
}
}
}
// 商品列表
&.row1-of1 {
.item {
display: flex;
margin-bottom: 20rpx;
padding: 16rpx;
&.shadow {
margin: 8rpx 8rpx 20rpx 8rpx;
}
&:last-child {
margin-bottom: 0;
padding-bottom: 20rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
>image {
width: 200rpx;
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6rpx 0 6rpx 20rpx;
.goods-name {
&.multi-hidden {
line-height: 1.3;
}
}
.price-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.discount-price {
white-space: nowrap;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: var(--price-color);
}
.price {
font-size: $font-size-toolbar;
color: var(--price-color);
}
}
button {
margin: 0;
padding: 0 20rpx;
color: var(--btn-text-color);
background-color: $base-color;
color: #fff;
min-width: 112rpx;
height: 52rpx;
line-height: 52rpx;
font-size: $font-size-tag;
font-weight: bold;
}
}
}
&.style-2 {
.discount-price {
position: relative;
}
.progress {
display: flex;
flex-direction: column;
margin-top: 10rpx;
margin-right: 16rpx;
.bg {
margin-left: 6rpx;
width: auto;
height: 20rpx;
border-radius: 20rpx;
background-color: #ffeadb;
position: relative;
&::after {
content: '';
width: 26rpx;
height: 26rpx;
border-radius: 50%;
background-color: #fa1a1a;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -18rpx;
}
.curr {
width: 0;
height: 20rpx;
border-radius: 20rpx;
background-color: #fa1a1a;
position: relative;
.progress-bar {
position: absolute;
right: -20rpx;
width: 30rpx;
height: 30rpx;
max-width: inherit !important;
max-height: inherit !important;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
}
}
.num {
font-size: $font-size-tag;
margin-top: 12rpx;
line-height: 1;
text {
color: #fa1a1a;
}
}
}
}
&.style-3 {
.progress {
display: flex;
color: $color-tip;
font-size: $font-size-sub;
.num {
color: var(--price-color);
}
}
.item {
.content {
justify-content: space-around;
}
.img-wrap {
overflow: hidden;
}
}
}
}
&.horizontal-slide {
.scroll {
width: calc(100% - 40rpx);
padding: 20rpx;
line-height: 1;
white-space: nowrap;
.item.shadow {
margin-bottom: 8rpx;
}
}
.flex-between {
justify-content: space-between;
}
.item {
display: inline-block;
width: 200rpx;
overflow: hidden;
box-sizing: border-box;
&:nth-child(3n + 3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
>image {
width: 100%;
}
.bg {
position: absolute;
width: 100%;
height: 60rpx;
bottom: 0;
left: 0;
z-index: 2;
}
.num {
width: 180rpx;
position: absolute;
bottom: 10rpx;
padding-left: 20rpx;
font-size: 20rpx;
line-height: 1;
color: #ffffff;
z-index: 3;
}
}
.content {
padding: 10rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
&.multi-content {
height: 160rpx;
box-sizing: border-box;
}
.goods-name {
line-height: 1.3;
&.multi-hidden {
white-space: break-spaces;
}
}
.discount-price {
white-space: nowrap;
margin-top: auto;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: var(--price-color);
}
.price {
font-size: $font-size-toolbar;
color: var(--price-color);
}
}
.original-price {
margin-top: 4rpx;
font-size: $font-size-tag;
color: $color-tip;
line-height: 1;
text-decoration: line-through;
}
}
}
.swiper {
padding: 20rpx;
width: 100%;
white-space: nowrap;
box-sizing: border-box;
.swiper-item {
display: flex;
align-items: center;
}
.item {
width: 200rpx;
box-sizing: border-box;
}
}
}
}
</style>

View File

@@ -1,318 +0,0 @@
<template>
<view data-component-name="diy-bottom-nav" v-if="tabBarList && tabBarList.list">
<view class="tab-bar" :style="{ backgroundColor: tabBarList.backgroundColor }">
<view class="tabbar-border"></view>
<view class="item" v-for="(item, index) in tabBarList.list" :key="item.id" @tap.stop="redirectTo(item.link)">
<view class="bd">
<block v-if="item.link.wap_url == '/pages_goods/cart'">
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2"
:animation="cartAnimation" id="tabbarCart">
<block v-if="verify(item.link)">
<image v-if="item.selected_icon_type == 'img'"
:src="$util.img(item.selectedIconPath)" />
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath"
:value="item.selected_style ? item.selected_style : null"></diy-icon>
</block>
<block v-else>
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath"
:value="item.style ? item.style : null"></diy-icon>
</block>
<view class="cart-count-mark font-size-activity-tag"
:class="{ max: item.link.wap_url == '/pages_goods/cart' && cartNumber > 99 }"
:style="{ background: 'var(--price-color)' }" v-if="cartNumber > 0">
{{ cartNumber > 99 ? '99+' : cartNumber }}
</view>
</view>
</block>
<block v-else>
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2">
<block v-if="verify(item.link)">
<image v-if="item.selected_icon_type == 'img'"
:src="$util.img(item.selectedIconPath)" />
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath"
:value="item.selected_style ? item.selected_style : null"></diy-icon>
</block>
<block v-else>
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath"
:value="item.style ? item.style : null"></diy-icon>
</block>
</view>
</block>
<view class="label"
v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'diy'"
:style="{ color: verify(item.link) ? tabBarList.textHoverColor : tabBarList.textColor }">
{{ lang == 'en-us' ? item.en_text : item.text }}
</view>
<view class="label"
v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'default'"
:style="{ color: verify(item.link) ? 'var(--base-color)' : '#333333' }">
{{ lang == 'en-us' ? item.en_text : item.text }}
</view>
</view>
</view>
</view>
<!-- 解决fixed定位后底部导航栏塌陷问题 -->
<view class="tab-bar-placeholder"></view>
</view>
</template>
<script>
import { adaptSubpackageUrl, checkTabBarActive } from '@/common/js/util.js'
import DiyMinx from './minx.js'
// 底部导航栏
export default {
name: 'diy-bottom-nav',
props: {
value: {
type: Object
},
name: {
type: String,
default: ''
}
},
mixins: [DiyMinx],
data() {
return {
lang: uni.getStorageSync("lang"),
currentRoute: '', //当前页面路径
jumpFlag: true, //是否可以跳转,防止重复点击
cartAnimation: {}
};
},
mounted() {
this.updateCurrentRoute();
this.$nextTick(() => {
if (!this.$store.state.cartPosition) {
let query = uni.createSelectorQuery().in(this);
query.select('#tabbarCart')
.boundingClientRect(data => {
if (data) this.$store.commit('setCartPosition', data);
}).exec();
query.select('.tab-bar')
.boundingClientRect(data => {
if (data) this.$store.commit('setTabBarHeight', data.height +
'px');
}).exec();
}
});
// 监听页面显示事件,更新当前路由
this.$on('hook:onShow', () => {
this.updateCurrentRoute();
});
},
computed: {
cartChange() {
return this.$store.state.cartChange;
}
},
watch: {
cartChange: function (nval, oval) {
if (nval > oval) {
let animation = uni.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1.2).step();
this.cartAnimation = animation.export();
setTimeout(() => {
animation.scale(1).step();
this.cartAnimation = animation.export();
}, 300);
}
}
},
methods: {
// 更新当前路由
updateCurrentRoute() {
let currentPage = getCurrentPages()[getCurrentPages().length - 1];
if (currentPage && currentPage.route) {
this.currentRoute = currentPage.route;
}
},
redirectTo(link) {
this.$emit('callback');
this.$util.diyRedirectTo(link);
},
verify(link) {
if (link == null || link == '' || !link.wap_url) return false;
// 标准化路径格式,确保比较的一致性
let currentPageRoute = this.currentRoute ? '/' + this.currentRoute : '';
let linkUrl = link.wap_url;
// 首页特殊处理
if (linkUrl === this.$util.INDEX_PAGE_URL && this.name === 'DIY_VIEW_INDEX') {
return true;
}
// 精确匹配当前路径
if (adaptSubpackageUrl(linkUrl) === currentPageRoute) {
return true;
}
return checkTabBarActive(linkUrl, currentPageRoute);
}
}
};
</script>
<style lang="scss">
.placeholder {
height: 112rpx;
&.bluge {
height: 180rpx;
}
}
.safe-area {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar {
background-color: #fff;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 998;
display: flex;
border-top: 2rpx solid #f5f5f5;
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.tabbar-border {
background-color: rgba(255, 255, 255, 0.329412);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 2rpx;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: flex;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex: 1;
flex-direction: column;
padding-bottom: 10rpx;
box-sizing: border-box;
.bd {
position: relative;
height: 100rpx;
flex-direction: column;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
.icon {
position: relative;
display: inline-block;
margin-top: 10rpx;
width: 40rpx;
height: 40rpx;
font-size: 40rpx;
line-height: 40rpx;
image {
width: 100%;
height: 100%;
}
>view {
height: inherit;
display: flex;
align-items: center;
}
.bar-icon {
font-size: 42rpx;
}
}
.label {
position: relative;
text-align: center;
font-size: 24rpx;
line-height: 1;
margin-top: 12rpx;
}
}
&.bulge {
.bd {
position: relative;
height: 100rpx;
flex-direction: column;
text-align: center;
.icon {
margin-top: -60rpx;
margin-bottom: 4rpx;
border-radius: 50%;
width: 100rpx;
height: 102rpx;
padding: 10rpx;
border-top: 2rpx solid #f5f5f5;
background-color: #fff;
box-sizing: border-box;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.label {
position: relative;
text-align: center;
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
}
}
}
.cart-count-mark {
position: absolute;
top: -8rpx;
right: -18rpx;
width: 24rpx;
height: 24rpx !important;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
padding: 6rpx;
border-radius: 50%;
z-index: 99;
&.max {
width: 40rpx;
border-radius: 24rpx;
right: -28rpx;
}
}
}
}
.tab-bar-placeholder {
padding-bottom: calc(constant(safe-area-inset-bottom) + 112rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
}
</style>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,645 +0,0 @@
<template>
<view class="channel-list-container" :style="[componentStyle, { '--row-count': value.rowCount }]">
<!-- 轮播模式 -->
<swiper v-if="value.showStyle == 'carousel' && carouselConfig.type != 'hide'" :indicator-dots="isIndicatorDots"
:autoplay="carouselConfig.autoplay || false" :interval="carouselConfig.interval || 3000"
:duration="carouselConfig.duration || 500" :circular="carouselConfig.circular || false"
:style="swiperHeight" class="channel-swiper">
<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
<!-- 视频号视频卡片轮播模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
:show-view-count="value.showViewCount" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
</view>
</view>
</swiper-item>
</swiper>
<!-- 固定布局模式 -->
<view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
<view v-for="(item, index) in value.list" :key="index" class="channel-item">
<!-- 视频号视频卡片列表模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
:show-view-count="value.showViewCount" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
</view>
</view>
<!-- 其他布局模式如滚动布局 -->
<scroll-view v-else
:class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : 'singleSlide', 'row1-of' + value.rowCount]"
:scroll-x="true"
:scroll-y="false"
:enhanced="true"
:bounces="false">
<view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index"
:class="['channel-nav-item', value.mode, 'row1-of' + value.rowCount]">
<!-- 视频号视频卡片滚动模式 -->
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
:show-view-count="value.showViewCount" :cover-style="computedCoverStyle"
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
</view>
</view>
</scroll-view>
</view>
</template>
<script>
/**
* 微信视频号列表组件
* 支持多种布局模式,包括固定布局和滚动布局
* 可配置列数、视频高度、标题行数等属性
* 用于在页面中展示多个微信视频号视频
*/
import DiyMinx from './minx.js'
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
export default {
name: 'diy-channel-list',
props: {
/**
* 组件配置数据
* @type {Object}
* @default () => ({})
* @property {string} showStyle - 显示样式可选值carousel, fixed, singleSlide
* @property {number} rowCount - 每行显示的视频数量
* @property {Array} list - 视频列表数据
* @property {string} componentBgColor - 组件背景色
* @property {string} componentAngle - 组件圆角类型可选值round
* @property {number} topAroundRadius - 顶部圆角半径
* @property {number} bottomAroundRadius - 底部圆角半径
* @property {Object} ornament - 装饰效果配置
* @property {boolean} showViewCount - 是否显示播放量可选值true, false
* @property {number} titleLineClamp - 标题显示行数
* @property {string} aspectRatio - 视频比例可选值16:9, 3:4
* @property {boolean} showPlayBtn - 是否显示播放按钮
* @property {Object} coverStyle - 视频封面图样式
* @property {Object} playBtnStyle - 播放按钮样式
* @property {string} mode - 显示模式, 可选值video, text, image, graphic
* @property {number} imageSize - 图片尺寸(仅在特定模式下使用)
* @property {number} pageCount - 每页显示的视频数量
* @property {Object} carousel - 轮播配置
* @property {string} carousel.type - 轮播类型可选值default, hide
* @property {boolean} carousel.autoplay - 是否自动播放默认false
* @property {number} carousel.interval - 自动播放间隔默认3000ms
* @property {number} carousel.duration - 切换动画时长默认500ms
* @property {boolean} carousel.circular - 是否循环播放默认false
*/
value: {
type: Object,
default: () => ({})
}
},
mixins: [DiyMinx],
data() {
return {
pageWidth: '', // 页面宽度
indicatorDots: false, // 是否显示轮播指示器
swiperCurrent: 0 // 当前轮播索引
}
},
created() {
// 组件创建时的逻辑
// 可以在这里进行初始化操作,如获取页面宽度等
},
mounted() {
// 组件挂载后添加鼠标拖拽滚动功能
if (!['fixed', 'carousel'].includes(this.value?.showStyle)) {
this.$nextTick(() => {
this.addMouseDragScroll();
});
}
},
watch: {
/**
* 组件刷新监听
* 当组件需要刷新时触发
* @param {*} newValue - 新值
*/
componentRefresh(newValue) {
// 监听组件刷新
// 可以在这里处理组件刷新时的逻辑
}
},
computed: {
carouselConfig() {
return this.value?.carousel || {
type: 'default',
autoplay: false,
interval: 3000,
duration: 500,
circular: true
}
},
/**
* 组件样式
* 根据配置动态生成样式字符串,包括背景色、圆角、阴影和边框
* @returns {string} 样式字符串
*/
componentStyle() {
const style = {};
// 背景色
if (this.value?.componentBgColor) {
style.backgroundColor = this.value?.componentBgColor;
}
// 圆角样式
if (this.value?.componentAngle == 'round') {
style.borderTopLeftRadius = (2 * this.value?.topAroundRadius) + 'rpx';
style.borderTopRightRadius = (2 * this.value?.topAroundRadius) + 'rpx';
style.borderBottomLeftRadius = (2 * this.value?.bottomAroundRadius) + 'rpx';
style.borderBottomRightRadius = (2 * this.value?.bottomAroundRadius) + 'rpx';
}
// 装饰效果:阴影
style.boxShadow = 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;
},
/**
* 轮播高度
* 根据模式和配置计算轮播高度
* @returns {string} 轮播高度样式
*/
swiperHeight() {
let height = 0;
const pageCount = this.value?.pageCount || 1;
// 根据不同模式计算高度
if (this.value?.mode == 'graphic') {
height = (49 + this.value?.imageSize) * pageCount;
} else if (this.value?.mode == 'img') {
height = (22 + this.value?.imageSize) * pageCount;
} else if (this.value?.mode == 'text') {
height = 43 * pageCount;
} else { // 默认视频模式
if (this.value?.aspectRatio == '16:9') {
height = [250, 160, 140, 120][this.value.rowCount - 1];
} else {
height = [510, 280, 220, 180][this.value.rowCount - 1];
}
}
return 'height:' + (2 * height) + 'rpx';
},
/**
* 是否显示指示器
* 根据轮播配置和列表长度判断是否显示指示器
* @returns {boolean} 是否显示指示器
*/
isIndicatorDots() {
// 当轮播类型不是隐藏,且视频数量超过一页时显示指示器
const pageCount = this.value?.pageCount || 1;
return this.value?.carousel?.type != 'hide' && Math.ceil(this.value?.list?.length / (pageCount * this.value?.rowCount)) > 1
},
/**
* 轮播幻灯片数据
* 将视频列表分割成轮播所需的幻灯片数据
* @returns {Array} 轮播幻灯片数据
*/
swiperSlides() {
const slides = [];
const list = this.value?.list || [];
const pageSize = (this.value?.pageCount || 1) * (this.value?.rowCount || 1);
// 将列表数据分割成每页显示的数量
for (let i = 0; i < list.length; i += pageSize) {
slides.push(list.slice(i, i + pageSize));
}
return slides;
},
/**
* 视频封面样式
* 根据aspectRatio属性动态计算封面样式
* @returns {Object} 封面样式对象
*/
computedCoverStyle() {
const aspectRatio = this.value?.aspectRatio || '16:9';
let paddingTop = '56.25%'; // 默认 16:9 比例
if (aspectRatio === '3:4') {
paddingTop = '133.33%'; // 3:4 比例
}
return {
width: '100%',
height: '0',
paddingTop: paddingTop
};
}
},
methods: {
/**
* 播放视频
* 触发 video-play 事件,并在微信小程序中调用视频播放接口
* @param {Object} item - 视频数据对象
*/
async playVideo(item) {
await this.__$emitEvent({
eventName: 'video-play',
data: item,
promiseCallback: async (event, handler, awaitedResult) => {
if (!awaitedResult) return;
try {
// 发送视频被点击播放事件
this.$emit('channel-video-click-play', item);
console.log('播放视频:', item);
// #ifdef MP-WEIXIN
// 在微信小程序环境中调用视频播放接口
await wechatChannelUtil.playVideo(item);
// #endif
// #ifndef MP-WEIXIN
if (item?.channelType === 'wechat') {
uni.showToast({
title: '视频号仅支持在微信小程序环境中播放',
icon: 'none',
duration: 2000
});
} else {
// 在非微信小程序环境中,直接触发事件
this.$emit('video-play', item);
}
// #endif
} catch (err) {
console.error('打开视频号失败', err);
}
}
})
},
/**
* 图片加载错误处理
* 当图片加载失败时,设置默认图片
* @param {number} index - 图片索引
*/
imgError(index) {
// 图片加载失败的处理逻辑
console.log('图片加载失败:', index);
// 为失败的图片设置默认图片
const item = this.value.list[index];
if (item) {
// 使用默认图片替代加载失败的图片
// #ifdef MP-WEIXIN
item.coverUrl = wechatChannelConfig.video.defaultCoverUrl;
// #endif
}
},
/**
* 添加鼠标拖拽滚动功能
* 在Web环境中实现与微信小程序相同的拖拽滚动效果
*/
addMouseDragScroll() {
// 只在Web环境中添加
// #ifndef MP
console.log('addMouseDragScroll called');
let isDragging = false;
let startX = 0;
let startScrollLeft = 0;
let currentScrollElement = null;
// 查找最近的可滚动祖先元素
const findScrollableParent = (element) => {
while (element && element !== document) {
const style = window.getComputedStyle(element);
if (style.overflowX === 'auto' || style.overflowX === 'scroll') {
return element;
}
element = element.parentElement;
}
return null;
};
// 鼠标按下事件
const handleMouseDown = (e) => {
// 检查是否点击在组件内
if (this.$el.contains(e.target)) {
console.log('mousedown event in component:', e);
// 查找可滚动元素
currentScrollElement = findScrollableParent(e.target);
if (currentScrollElement) {
console.log('Found scrollable element:', currentScrollElement);
isDragging = true;
startX = e.pageX;
startScrollLeft = currentScrollElement.scrollLeft;
currentScrollElement.style.cursor = 'grabbing';
}
}
};
// 鼠标移动事件
const handleMouseMove = (e) => {
if (!isDragging || !currentScrollElement) return;
console.log('mousemove event:', e);
e.preventDefault();
const dx = e.pageX - startX;
currentScrollElement.scrollLeft = startScrollLeft - dx;
console.log('scrollLeft:', currentScrollElement.scrollLeft);
};
// 鼠标释放事件
const handleMouseUp = () => {
if (isDragging && currentScrollElement) {
console.log('mouseup event');
currentScrollElement.style.cursor = 'grab';
}
isDragging = false;
currentScrollElement = null;
};
// 添加全局事件监听器
document.addEventListener('mousedown', handleMouseDown);
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
document.addEventListener('mouseleave', handleMouseUp);
console.log('Global mouse event listeners added');
// 组件销毁时移除事件监听器
this.$once('hook:beforeDestroy', () => {
document.removeEventListener('mousedown', handleMouseDown);
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
document.removeEventListener('mouseleave', handleMouseUp);
console.log('Global mouse event listeners removed');
});
// 为所有.channel-nav元素添加必要的样式
setTimeout(() => {
const channelNavs = document.querySelectorAll('.channel-nav');
console.log('Found channel-nav elements:', channelNavs.length);
channelNavs.forEach(element => {
element.style.overflowX = 'auto';
element.style.overflowY = 'hidden';
element.style.whiteSpace = 'nowrap';
element.style.width = '100%';
element.style.maxWidth = '100%';
element.style.cursor = 'grab';
element.style.userSelect = 'none'; // 防止文本选择
console.log('Added styles to channel-nav:', element);
});
}, 100); // 延迟执行确保DOM已完全渲染
console.log('Mouse drag scroll setup completed');
// #endif
}
}
}
</script>
<style lang="scss" scoped>
@import './css/common-channel.scss';
.channel-list-container {
padding: 16px 16px 0px;
}
/**
* 列表布局样式
*/
.channel-list {
display: grid;
grid-template-columns: repeat(var(--row-count, 2), 1fr);
gap: 8px;
}
/**
* 导航布局样式
* 支持固定布局和滚动布局
*/
.channel-nav {
box-sizing: border-box;
padding: 16rpx;
// 确保在H5环境中可以水平滚动
overflow-x: auto;
white-space: nowrap;
// 隐藏滚动条但保留滚动功能
::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
-ms-overflow-style: none;
// 启用触摸滚动和鼠标拖拽滚动
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
.uni-scroll-view-content {
/* #ifdef MP-WEIXIN */
display: flex;
flex-wrap: nowrap;
gap: 16rpx;
/* #endif */
/* #ifndef MP-WEIXIN */
display: grid;
grid-template-columns: repeat(var(--row-count, 2), 1fr);
gap: 16rpx;
/* #endif */
}
// 单滑动模式
&.singleSlide {
.uni-scroll-view-content {
display: flex;
flex-wrap: nowrap;
gap: 16rpx;
white-space: nowrap;
}
.channel-nav-item {
flex-shrink: 0;
width: 280rpx;
}
}
.channel-nav-item {
display: flex;
flex-direction: column;
box-sizing: border-box;
/* #ifdef MP-WEIXIN */
&.row1-of1 {
width: 100%;
}
&.row1-of2 {
width: calc(50% - 8rpx);
}
&.row1-of3 {
width: calc(33.333% - 10.67rpx);
}
&.row1-of4 {
width: calc(25% - 12rpx);
}
/* #endif */
}
// 1 列布局
&.row1-of1 {
.uni-scroll-view-content {
// #ifndef MP-WEIXIN
grid-template-columns: 1fr;
// #endif
}
}
// 2 列布局
&.row1-of2 {
.uni-scroll-view-content {
// #ifndef MP-WEIXIN
grid-template-columns: repeat(2, 1fr);
// #endif
}
}
// 3 列布局
&.row1-of3 {
.uni-scroll-view-content {
// #ifndef MP-WEIXIN
grid-template-columns: repeat(3, 1fr);
// #endif
}
}
// 4 列布局
&.row1-of4 {
.uni-scroll-view-content {
// #ifndef MP-WEIXIN
grid-template-columns: repeat(4, 1fr);
// #endif
}
}
}
/**
* 确保所有视频卡片高度一致
*/
.channel-item,
.channel-nav-item {
display: flex;
flex-direction: column;
}
/**
* 轮播样式
* 支持轮播模式的布局和样式
*/
.channel-swiper {
width: 100%;
box-sizing: border-box;
.swiper-slide-content {
display: grid;
grid-template-columns: repeat(var(--row-count, 2), 1fr);
gap: 16rpx;
box-sizing: border-box;
.channel-item {
display: flex;
flex-direction: column;
box-sizing: border-box;
}
// 轮播模式下的 1 列布局
&.row1-of1 {
grid-template-columns: 1fr;
}
// 轮播模式下的 2 列布局
&.row1-of2 {
grid-template-columns: repeat(2, 1fr);
}
// 轮播模式下的 3 列布局
&.row1-of3 {
grid-template-columns: repeat(3, 1fr);
}
// 轮播模式下的 4 列布局
&.row1-of4 {
grid-template-columns: repeat(4, 1fr);
}
}
}
/**
* 响应式调整
* 在小屏幕设备上调整布局和间距
*/
@media (max-width: 375px) {
.channel-list,
.channel-nav,
.channel-swiper .swiper-slide-content {
gap: 12rpx;
padding: 12rpx;
}
// 小屏幕上的单滑动模式
.channel-nav {
&.singleSlide {
.uni-scroll-view-content {
gap: 12rpx;
}
.channel-nav-item {
width: 240rpx;
}
}
}
}
/**
* 视频比例样式调整
* 根据不同的视频比例调整布局
*/
// // 3:4 比例的视频卡片样式
// .channel-video.ratio-3-4 {
// // 调整视频卡片的整体高度
// ::v-deep .video-cover-wrap {
// padding-top: 133.33%; // 3:4 比例
// }
// // 列表模式下的3:4比例调整
// &.list-mode {
// ::v-deep .video-cover-wrap {
// padding-top: 133.33%; // 3:4 比例
// }
// }
// }
// // 16:9 比例的视频卡片样式(默认)
// .channel-video.ratio-16-9 {
// // 保持默认的16:9比例
// ::v-deep .video-cover-wrap {
// padding-top: 56.25%; // 16:9 比例
// }
// // 列表模式下的16:9比例保持默认
// &.list-mode {
// ::v-deep .video-cover-wrap {
// padding-top: 56.25%; // 16:9 比例
// }
// }
// }</style>

View File

@@ -1,489 +0,0 @@
<template>
<view class="channel-video" :class="{ 'list-mode': listMode }">
<!-- 嵌入式视频播放 -->
<view v-if="canUseEmbedMode" class="embed-video-container">
<view class="video-cover-wrap" :style="[coverStyle]">
<!-- #ifdef MP-WEIXIN -->
<native-component>
<!-- 嵌入式视频播放组件 -->
<channel-video :feed-id="value.feedId" :finder-user-name="value.finderUserName"
:feed-token="value.feedToken" :auto-play="autoPlay">
</channel-video>
</native-component>
<!-- #endif -->
</view>
<view class="video-info">
<!-- 视频标题支持多行显示控制 -->
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}
</view>
<!-- 视频统计信息 -->
<view class="video-stats" v-if="showViewCount && value.showViewCount">{{ value.viewCount }}次观看</view>
</view>
</view>
<!-- 跳转式视频播放 -->
<view v-else @tap.stop="playVideo" class="video-container">
<view class="video-cover-wrap" :style="[coverStyle]">
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
<view class="channel-play-btn" v-if="showPlayBtn" :style="[playBtnStyle]">
<view class="play-icon-css"></view>
</view>
<view class="video-stats-overlay" v-if="showViewCount && value.showViewCount">
{{ value.viewCount }}次观看
</view>
</view>
<view class="video-info">
<!-- 视频标题支持多行显示控制 -->
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}
</view>
<!-- 视频统计信息非列表模式下显示 -->
<view class="video-stats" v-if="showViewCount && value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
</view>
</view>
</view>
</template>
<script>
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
/**
* 微信视频号视频卡片组件
* 支持嵌入式播放和跳转式播放两种模式
* 可配置列表模式、视频高度、标题行数等属性
*/
export default {
name: 'diy-channel-video',
props: {
/**
* 视频数据对象
* @type {Object}
* @required
* @property {string} feedId - 视频 feedId
* @property {string} feedToken - 视频 token
* @property {string} coverUrl - 视频封面图
* @property {string} videoTitle - 视频标题
* @property {number} viewCount - 观看次数
* @property {boolean} showViewCount - 是否显示观看次数
* @property {boolean} embedMode - 是否启用嵌入式播放
*/
value: {
type: Object,
required: true
},
/**
* 是否为列表模式
* @type {boolean}
* @default false
*/
listMode: {
type: Boolean,
default: false
},
/** 是否显示观看次数,由父组件可以整体配置 */
showViewCount: {
type: Boolean,
default: true
},
/**
* 标题显示行数
* @type {number}
* @default 1
*/
titleLineClamp: {
type: Number,
default: 1
},
/** 是否显示播放按钮 */
showPlayBtn: {
type: Boolean,
default: true
},
/**
* 视频封面图样式
* 采用 16:9 比例的响应式高度
*/
coverStyle: {
type: Object,
default: () => ({
width: '100%',
height: '0',
paddingTop: '56.25%' // 16:9 比例
})
},
/**
* 播放按钮样式
*/
playBtnStyle: {
type: Object,
default: () => ({
width: '60rpx',
height: '60rpx',
borderRadius: '30rpx',
backgroundColor: 'rgba(0, 0, 0, 0.6)'
})
},
/** 是否自动播放 */
autoPlay: {
type: Boolean,
default: false
},
},
computed: {
/**
* 是否支持嵌入式播放
* @returns {boolean}
*/
canUseEmbedMode() {
// #ifdef MP-WEIXIN
const enableEmbedMode = Boolean(this.value?.embedMode)
&& Boolean(this.value?.feedToken)
&& wechatChannelUtil.isEmbedModeSupported();
console.log('enableEmbedMode', enableEmbedMode);
return enableEmbedMode;
// #endif
return false
}
},
methods: {
/**
* 播放视频
* 触发 video-play 事件,由父组件处理具体播放逻辑
*/
async playVideo() {
this.$emit('video-play', this.value);
}
}
};
</script>
<style scoped lang="scss">
@import './css/common-channel.scss';
/**
* 视频卡片容器样式
* 包含卡片基础样式、悬停效果和列表模式样式
*/
.channel-video {
position: relative;
background-color: #fff;
border-radius: 12rpx;
overflow: hidden;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
height: 100%;
// 悬停效果
&:hover {
transform: translateY(-4rpx);
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
}
// 列表模式样式调整
&.list-mode {
border-radius: 10rpx;
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
.video-info {
padding: 14rpx;
.video-title {
font-size: 24rpx;
margin-bottom: 6rpx;
}
}
}
}
/**
* 视频容器样式
* 用于跳转式播放模式
*/
.video-container {
display: flex;
flex-direction: column;
height: 100%;
}
/**
* 嵌入式视频容器样式
* 与视频容器样式保持一致
*/
.embed-video-container {
display: flex;
flex-direction: column;
height: 100%;
}
/**
* 视频封面容器
*/
.video-cover-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
/* 16:9 比例 */
height: 0;
overflow: hidden;
border-radius: 12rpx 12rpx 0 0;
transition: transform 0.3s ease;
// 悬停时缩放效果
.channel-video:hover & {
transform: scale(1.02);
}
// 列表模式下的边框圆角调整
.channel-video.list-mode & {
border-radius: 10rpx 10rpx 0 0;
}
}
/**
* 视频封面图片
* 绝对定位填充整个容器
*/
.video-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
/**
* 视频统计信息遮罩
* 显示在视频封面底部
*/
.video-stats-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
padding: 12rpx 16rpx;
color: #fff;
font-size: 20rpx;
text-align: right;
font-weight: 500;
transition: opacity 0.3s ease;
// 悬停时的透明度变化
.channel-video:hover & {
opacity: 1;
}
.channel-video:not(:hover) & {
opacity: 0.8;
}
}
/**
* 视频信息区域
* 包含标题和统计信息
*/
.video-info {
padding: 16rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #fff;
transition: background-color 0.3s ease;
// 悬停时的背景色变化
.channel-video:hover & {
background-color: #fafafa;
}
}
/**
* 视频标题
* 支持多行显示控制和渐变遮罩效果
*/
.video-title {
font-size: 28rpx;
font-weight: 600;
color: #222;
margin-bottom: 10rpx;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: var(--title-line-clamp, 2);
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.3s ease;
position: relative;
word-break: break-all;
word-wrap: break-word;
white-space: normal;
// 悬停时的颜色变化
.channel-video:hover & {
color: #000;
}
// 列表模式下的样式调整
.channel-video.list-mode & {
-webkit-line-clamp: var(--title-line-clamp, 1);
font-size: 24rpx;
margin-bottom: 6rpx;
font-weight: 500;
color: #333;
line-height: 1.3;
}
// 添加渐变遮罩效果,让过长的文字有柔和的结束
&::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 40rpx;
height: 1.4em;
background: linear-gradient(to right, transparent, #fff 90%);
pointer-events: none;
}
// 列表模式下的遮罩高度调整
.channel-video.list-mode &::after {
height: 1.3em;
}
// 根据行数调整遮罩高度
&[style*="--title-line-clamp: 1"]::after {
height: 1.4em;
}
&[style*="--title-line-clamp: 3"]::after {
height: 4.2em;
}
&[style*="--title-line-clamp: 4"]::after {
height: 5.6em;
}
// 列表模式下的多行遮罩高度调整
.channel-video.list-mode &[style*="--title-line-clamp: 1"]::after {
height: 1.3em;
}
.channel-video.list-mode &[style*="--title-line-clamp: 3"]::after {
height: 3.9em;
}
.channel-video.list-mode &[style*="--title-line-clamp: 4"]::after {
height: 5.2em;
}
}
/**
* 视频统计信息
* 显示观看次数等数据
*/
.video-stats {
font-size: 22rpx;
color: #999;
margin-top: 6rpx;
transition: color 0.3s ease;
// 悬停时的颜色变化
.channel-video:hover & {
color: #666;
}
}
/**
* 列表模式下的播放按钮样式
* 更小的尺寸和悬停效果
*/
.channel-video.list-mode .channel-play-btn {
width: 50rpx;
height: 50rpx;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
// 悬停效果
&:hover {
background-color: rgba(0, 0, 0, 0.7);
transform: scale(1.1);
}
// 播放图标尺寸
.play-icon {
width: 25rpx;
height: 25rpx;
}
}
/**
* 通用播放按钮样式优化
* 添加悬停效果
*/
.channel-play-btn {
transition: all 0.3s ease;
// 悬停效果
&:hover {
background-color: rgba(0, 0, 0, 0.6);
transform: scale(1.05);
}
}
/**
* 纯 CSS 播放按钮图标
*/
.play-icon-css {
width: 0;
height: 0;
border-top: 12rpx solid transparent;
border-bottom: 12rpx solid transparent;
border-left: 18rpx solid #fff;
margin-left: 4rpx;
transition: transform 0.3s ease;
// 悬停时的缩放效果
.channel-play-btn:hover & {
transform: scale(1.1);
}
// 列表模式下的尺寸调整
.channel-video.list-mode & {
border-top: 10rpx solid transparent;
border-bottom: 10rpx solid transparent;
border-left: 15rpx solid #fff;
margin-left: 3rpx;
}
}
/**
* 原生组件样式控制
* 确保 native-component 和 channel-video 正确填充容器
*/
native-component {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/**
* channel-video 组件样式控制
* 避免受到 wx-channel-video 全局样式的影响
*/
channel-video {
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -1,123 +0,0 @@
<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" @tap.stop="$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>
</template>
<script>
// 自定义浮动按钮
import DiyMinx from './minx.js'
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
// 自定义浮动按钮
export default {
name: 'diy-float-btn',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
mixins: [DiyMinx],
data() {
return {
navHeight: 0,
statusBarHeight: systemInfo.statusBarHeight
};
},
created() { },
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
components: {},
methods: {},
computed: {
style() {
let style = {},
height = 54;
// #ifdef MP
height = systemInfo.platform == 'ios' ? 54 : 58;
// #endif
switch (parseInt(this.value.bottomPosition)) {
case 1:
style.top = (this.navHeight + this.statusBarHeight + parseInt(this.value.btnBottom)) * 2 + 'rpx';
break;
case 2:
style.top = (this.navHeight + this.statusBarHeight + parseInt(this.value.btnBottom)) * 2 + 'rpx';
break;
case 3:
style.bottom = (100 + parseInt(this.value.btnBottom)) * 2 + 'rpx';
break;
case 4:
style.bottom = (100 + parseInt(this.value.btnBottom)) * 2 + 'rpx';
break;
}
return this.$util.objToStyle(style);
}
}
};
</script>
<style lang="scss">
.float-btn {
position: fixed;
bottom: 20%;
right: 40rpx;
z-index: 990;
&.left_top {
top: 100rpx;
left: 30rpx;
}
&.right_top {
top: 100rpx;
right: 30rpx;
}
&.left_bottom {
bottom: 160rpx;
left: 30rpx;
padding-bottom: constant(safe-area-inset-bottom);
/*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom);
/*兼容 IOS>11.2*/
}
&.right_bottom {
bottom: 160rpx;
right: 30rpx;
padding-bottom: constant(safe-area-inset-bottom);
/*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom);
/*兼容 IOS>11.2*/
}
.button-box {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
image {
width: 100%;
height: 100%;
}
}
}
</style>

View File

@@ -1,31 +0,0 @@
<template>
<!-- #ifdef MP -->
<view data-component-name="diy-follow-official-account" v-if="value.isShow">
<official-account></official-account>
</view>
<!--#endif -->
</template>
<script>
// 关注公众号展示
import DiyMinx from './minx.js'
export default {
name: 'diy-follow-official-account',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {};
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
methods: {}
};
</script>
<style></style>

View File

@@ -1,114 +0,0 @@
<template>
<view data-component-name="diy-form" class="diy-from" :style="style">
<view class="fui-cell-group">
<view class="fui-cell ">
<view class="fui-cell-label ">您的姓名</view>
<view class="fui-cell-info">
<input v-model="Form.realname" class="fui-input" placeholder="请输入您的姓名" value=""></input>
</view>
</view>
<view class="fui-cell ">
<view class="fui-cell-label">手机号码</view>
<view class="fui-cell-info">
<input v-model="Form.mobile" class="fui-input" maxlength="11" placeholder="请输入您的手机号"
type="number"></input>
</view>
</view>
<view class="fui-cell ">
<view class="fui-cell-label">您的邮箱</view>
<view class="fui-cell-info">
<input v-model="Form.mailbox" class="fui-input" placeholder="请输入您的邮箱" type="text"></input>
</view>
</view>
<view class="fui-cell">
<view class="fui-cell-label">所在城市</view>
<view class="fui-cell-info">
<input v-model="Form.citys" class="fui-input" placeholder="请输入您的所在地" value=""></input>
</view>
</view>
<view class="fui-cell">
<view class="fui-cell-label">备注</view>
<view class="fui-cell-info">
<input v-model="Form.remark" class="fui-input" placeholder="请输入备注" value=""></input>
</view>
</view>
</view>
<view @tap.stop="submitform" class="fui-btn btn-danger block mtop">提交信息</view>
</view>
</template>
<script>
// 自定义表单
import DiyMinx from './minx.js'
export default {
name: 'diy-from',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
loading: true,
markers: [],
Form: {
realname: '',
mobile: '',
mailbox: '',
citys: '',
remark: '',
}
};
},
created() {
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
// this.getDataList();
}
},
computed: {
markerst() {
return [{
id: 1,
latitude: this.value.list[0].lat,
longitude: this.value.list[0].lng
}]
},
style() {
var css = '';
css += 'background-color:' + this.value.contentBgColor + ';';
if (this.value.elementAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
return css;
}
},
methods: {
submitform() {
this.$api.sendRequest({
url: '/api/member/information',
data: this.Form,
success: res => {
this.$util.showToast({
title: res.message
});
}
});
}
}
};
</script>
<style lang="scss">
.diy-from {
background: #fff;
padding-bottom: 20rpx;
border-radius: 10rpx;
}
</style>

View File

@@ -1,166 +0,0 @@
<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"
@tap.stop="handlerClick(item)" @error="imgError(index)"
:style="itemCss" />
</view>
</view>
</view>
</view>
</x-skeleton>
</template>
<script>
// 商品品牌
import DiyMinx from './minx.js'
// 自定义商品品牌展示
export default {
name: 'diy-goods-brand',
props: {
value: {
type: Object
}
},
data() {
return {
list: [],
loading: true,
skeletonConfig: {
gridRows: 2,
gridColumns: 4,
gridRowsGap: '20rpx',
headWidth: '120rpx',
headHeight: '120rpx',
textShow: false
}
};
},
created() {
this.getBrandList();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getBrandList();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
}
return obj;
},
// 子项样式
itemCss() {
var obj = '';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
getBrandList() {
var data = {
page: 1,
page_size: this.value.count
};
if (this.value.sources == 'diy') {
data.page_size = 0;
data.brand_id_arr = this.value.brandIds.toString();
}
this.$api.sendRequest({
url: '/api/goodsbrand/page',
data: data,
success: res => {
if (res.code == 0 && res.data) {
let data = res.data;
this.list = data.list;
}
this.loading = false;
}
});
},
toDetail(item) {
this.$util.redirectTo('/pages_goods/list', {
brand_id: item.brand_id
});
},
imgError(index) {
if (this.list[index]) this.list[index].image_url = this.$util.getDefaultImage().goods;
},
async handlerClick(item) {
await this.__$emitEvent({
eventName: 'goods-brand-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item);
}
})
},
}
};
</script>
<style lang="scss">
.brand-wrap {
&.shadow {
margin-left: 8rpx;
margin-right: 8rpx;
margin-top: 8rpx;
margin-bottom: 8rpx;
}
.style-1 {
.title-wrap {
text-align: center;
padding: 20rpx 0 10rpx;
}
.ul-wrap {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
.li-item {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% / 4 - 20rpx) !important;
height: 124rpx;
margin: 10rpx;
background-color: #fff;
.brand-pic {
width: 100%;
height: 100%;
}
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -1,626 +0,0 @@
<template>
<x-skeleton data-component-name="diy-goods-recommend" type="waterfall" :loading="loading" :configs="skeletonConfig">
<view v-if="list.length" :class="['goods-list', goodsValue.style]" :style="goodsListWarpCss">
<view class="top-wrap" v-if="goodsValue.topStyle.support">
<text :class="['js-icon', goodsValue.topStyle.icon.value]"
:style="{ backgroundColor: goodsValue.topStyle.icon.bgColor, color: goodsValue.topStyle.icon.color }"></text>
<text class="title" :style="{ color: goodsValue.topStyle.color }">{{ goodsValue.topStyle.title }}</text>
<text class="line" :style="{ color: goodsValue.topStyle.subColor }"></text>
<text class="sub" :style="{ color: goodsValue.topStyle.subColor }">{{ goodsValue.topStyle.subTitle
}}</text>
</view>
<swiper :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
<swiper-item v-for="(item, index) in page" :key="index"
:class="['swiper-item', [list[index].length / 3] >= 1 && 'flex-between']">
<view class="goods-item" v-for="(dataItem, dataIndex) in list[index]" :key="dataIndex"
@tap.stop="toDetail(dataItem)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
<div class="goods-img-wrap">
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix"
@error="imgError(index, dataIndex)" :lazy-load="true" />
<view class="sell-out" v-if="dataItem.stock <= 0">
<text class="iconfont icon-shuqing"></text>
</view>
</div>
<view :class="['info-wrap', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="goodsValue.goodsNameStyle.control || goodsValue.priceStyle.mainControl || goodsValue.priceStyle.lineControl || goodsValue.labelStyle.support">
<view v-if="goodsValue.goodsNameStyle.control" class="goods-name"
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.goodsNameStyle.color : '', fontWeight: goodsValue.goodsNameStyle.fontWeight ? 'bold' : '' }"
:class="[{ 'using-hidden': goodsValue.nameLineMode == 'single' }, { 'multi-hidden': goodsValue.nameLineMode == 'multiple' }]">
{{ isEnEnv ? dataItem.en_goods_name : dataItem.goods_name }}
</view>
<view class="pro-info">
<view class="label-wrap" v-if="goodsValue.labelStyle.support"
:style="{ background: goodsValue.labelStyle.bgColor, color: goodsValue.labelStyle.color }">
<image :src="$util.img('app/component/view/goods_recommend/img/label.png')"
mode="widthFix" />
<text>{{ goodsValue.labelStyle.title }}</text>
</view>
<view class="discount-price">
<view class="price-wrap" v-if="goodsValue.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }"></text>
<text class="price price-style large"
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{
showPrice(dataItem).split('.')[0] }}</text>
<text class="unit price-style small"
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{
'.' + showPrice(dataItem).split('.')[1] }}</text>
</view>
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(dataItem)"
class="delete-price price-font"
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">
{{ showMarketPrice(dataItem) }}</view>
<view class="sale" v-if="goodsValue.saleStyle.control"
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
{{ dataItem.sale_num }}{{ dataItem.unit ? dataItem.unit : '件' }}
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</x-skeleton>
</template>
<script>
// 自定义商品推荐展示
import DiyMinx from './minx.js'
export default {
name: 'diy-goods-recommend',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
mixins: [DiyMinx],
data() {
return {
loading: true,
skeletonConfig: {
gridRows: 1,
gridColumns: 3,
headWidth: '200rpx',
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '60%'],
},
list: [],
goodsValue: {},
page: 1
};
},
created() {
this.goodsValue = this.value;
this.getGoodsList();
},
watch: {
'globalStoreInfo.store_id': {
handler(nval, oval) {
if (nval != oval) {
this.getGoodsList();
}
},
deep: true
},
// 组件刷新监听
componentRefresh: function (nval) {
this.getGoodsList();
}
},
computed: {
goodsListWarpCss() {
var obj = '';
obj += 'background-color:' + this.goodsValue.componentBgColor + ';';
if (this.goodsValue.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.goodsValue.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.goodsValue.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.goodsValue.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.goodsValue.bottomAroundRadius * 2 + 'rpx;';
}
if (this.goodsValue.bgUrl) {
obj += `background-image: url('${this.$util.img(this.goodsValue.bgUrl)}');`;
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.goodsValue.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.goodsValue.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.goodsValue.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.goodsValue.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.goodsValue.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.goodsValue.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.goodsValue.ornament.color + ';';
}
if (this.goodsValue.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.goodsValue.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().windowWidth;
var width = '';
if (this.goodsValue.style != 'style-2') {
width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value.margin
.both * 2) * 2] / 6;
} else {
width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this
.rpxUpPx(this.value.margin.both * 2) * 2
] / 6;
}
obj += 'margin-left:' + width + 'px;';
obj += 'margin-right:' + width + 'px;';
return obj;
},
swiperHeight() {
if (this.goodsValue.style == 'style-3') {
return '330rpx';
} else if (this.goodsValue.style != 'style-2') {
if (this.value.nameLineMode == 'multiple') {
return '348rpx';
}
return '312rpx';
} else {
if (this.value.nameLineMode == 'multiple') {
return '360rpx';
}
return '320rpx';
}
}
},
methods: {
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},
getGoodsList() {
var data = {
num: this.goodsValue.count
};
if (this.goodsValue.sources == 'category') {
data.category_id = this.goodsValue.categoryId;
data.category_level = 1;
} else if (this.goodsValue.sources == 'diy') {
data.num = 0;
data.goods_id_arr = this.goodsValue.goodsId.toString();
}
data.order = this.goodsValue.sortWay;
this.$api.sendRequest({
url: '/api/goodssku/components',
data: data,
success: res => {
if (res.code == 0 && res.data) {
let data = res.data;
this.list = data;
// 切屏滚动,每页显示固定数量
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
this.loading = false;
}
});
},
toDetail(item) {
this.$util.redirectTo('/pages_goods/detail', {
goods_id: item.goods_id
});
},
imgError(pageIndex, index) {
this.list[pageIndex][index].goods_image = this.$util.getDefaultImage().goods;
},
showPrice(data) {
let price = data.discount_price;
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
return price;
},
showMarketPrice(item) {
let price = this.showPrice(item);
if (item.market_price > 0) {
return item.market_price;
} else if (item.price > price) {
return item.price;
}
return '';
},
}
};
</script>
<style lang="scss" scoped>
.goods-list {
.goods-item {
line-height: 1;
.sale {
line-height: 1;
color: $color-tip;
font-size: $font-size-activity-tag;
}
.info-wrap {
.goods-name {
margin-bottom: 10rpx;
line-height: 1.3;
}
}
.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: 180rpx;
}
}
}
}
// 商品列表横向滚动样式
.goods-list.style-1 {
width: 100%;
white-space: nowrap;
background-repeat: round;
.top-wrap {
display: flex;
align-items: center;
padding: 20rpx 0;
.js-icon {
border-radius: 50%;
font-size: 40rpx;
margin-right: 10rpx;
width: 70rpx;
height: 70rpx;
text-align: center;
line-height: 70rpx;
}
.line {
height: 28rpx;
margin: 0 10rpx;
border: 2rpx solid;
}
.title {
font-weight: bold;
font-size: $font-size-toolbar;
}
.sub {
font-size: $font-size-tag;
}
}
.flex-between {
justify-content: space-between;
}
.swiper {
display: flex;
flex-wrap: wrap;
margin: 0 20rpx;
.swiper-item {
display: flex;
align-items: center;
}
}
.goods-item {
overflow: hidden;
width: 200rpx;
display: inline-block;
box-sizing: border-box;
&:nth-child(3n + 3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.goods-img,
.goods-img-wrap {
position: relative;
width: 100%;
height: 196rpx;
}
.info-wrap {
display: flex;
flex-direction: column;
padding: 10rpx;
&.multi-content {
height: 130rpx;
box-sizing: border-box;
}
.goods-name {
font-size: $font-size-sub;
&.multi-hidden {
white-space: break-spaces;
}
}
.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 {
line-height: 1;
white-space: nowrap;
.unit {
font-size: $font-size-tag;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
}
text {
font-weight: bold;
color: $base-color;
}
}
}
.delete-price {
margin-left: 10rpx;
text-decoration: line-through;
flex: 1;
line-height: 28rpx;
color: $color-tip;
font-size: $font-size-activity-tag;
}
}
}
}
}
// 商品列表横向滚动样式
.goods-list.style-2 {
width: 100%;
white-space: nowrap;
background-repeat: round;
padding-bottom: 20rpx;
.top-wrap {
display: flex;
align-items: center;
padding: 20rpx;
.js-icon {
border-radius: 50%;
font-size: 40rpx;
margin-right: 20rpx;
width: 70rpx;
height: 70rpx;
text-align: center;
line-height: 70rpx;
}
.line {
height: 28rpx;
margin: 0 10rpx;
border: 2rpx solid;
}
.title {
font-weight: bold;
font-size: $font-size-toolbar;
}
.sub {
font-size: $font-size-tag;
}
}
.swiper {
display: flex;
flex-wrap: wrap;
margin: 0 20rpx;
padding: 20rpx;
border-radius: 20rpx;
background-color: #fff;
}
.goods-item {
overflow: hidden;
width: 200rpx;
display: inline-block;
box-sizing: border-box;
&.shadow {
margin-top: 8rpx;
width: 200rpx;
}
.goods-img,
.goods-img-wrap {
position: relative;
width: 100%;
height: 200rpx;
}
.info-wrap {
padding: 10rpx;
.goods-name {
line-height: 1;
&.multi-hidden {
line-height: 1.3;
height: 68rpx;
white-space: break-spaces;
}
}
.pro-info {
display: flex;
flex-direction: column;
justify-content: space-between;
.discount-price {
display: flex;
justify-content: space-between;
align-items: center;
.price-wrap {
line-height: 1.3;
.unit {
font-size: $font-size-tag;
color: $base-color;
}
text {
font-weight: bold;
color: $base-color;
&:last-of-type {
font-size: 32rpx;
}
}
}
}
.delete-price {
margin-left: 10rpx;
text-decoration: line-through;
flex: 1;
line-height: 28rpx;
color: $color-tip;
font-size: $font-size-activity-tag;
}
}
}
}
}
.goods-list.style-3 {
background-position: bottom;
.swiper {
display: flex;
flex-wrap: wrap;
margin: 0 20rpx;
padding: 10rpx 0;
.swiper-item {
display: flex;
align-items: center;
}
}
.goods-item {
overflow: hidden;
width: 200rpx;
display: inline-block;
box-sizing: border-box;
&.shadow {
// margin-top: 20rpx;
}
.goods-img,
.goods-img-wrap {
position: relative;
width: 100%;
height: 200rpx;
}
.info-wrap {
display: flex;
flex-direction: column;
padding: 10rpx;
.pro-info {
text-align: center;
.label-wrap {
border-radius: 40rpx;
display: inline-block;
margin: 10rpx 0;
position: relative;
padding-left: 52rpx;
padding-right: 16rpx;
line-height: 1.7;
image {
position: absolute;
top: -2rpx;
left: -2rpx;
width: 46rpx;
height: 46rpx;
}
text {
font-size: $font-size-tag;
}
}
.discount-price {
.price-wrap {
line-height: 1;
white-space: nowrap;
.unit {
font-size: $font-size-tag;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
}
text {
font-weight: bold;
color: $base-color;
}
}
}
}
}
}
}
</style>

View File

@@ -1,318 +0,0 @@
<template>
<view data-component-name="diy-graphic-nav" :style="componentStyle">
<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))">
<!-- #ifdef MP -->
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
:key="index"
v-if="index >= [(numItem) * (value.pageCount * value.rowCount)] && index < [(numItem + 1) * (value.pageCount * value.rowCount)]"
:style="{ width: 100 / value.rowCount + '%' }" @tap.stop="redirectTo(item.link)">
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
:key="index"
v-if="index >= [(numItem - 1) * (value.pageCount * value.rowCount)] && index < [numItem * (value.pageCount * value.rowCount)]"
:style="{ width: 100 / value.rowCount + '%' }" @tap.stop="redirectTo(item.link)">
<!-- #endif -->
<view class="graphic-img" v-if="value.mode != 'text'"
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
<image v-if="item.iconType == 'img'"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
mode="aspectFill"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', borderRadius: value.aroundRadius * 2 + 'rpx' }"
:show-menu-by-longpress="true" />
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
<text class="tag" v-if="item.label.control"
:style="{ color: item.label.textColor, backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')' }">
{{ item.label.text }}
</text>
</view>
<text v-if="value.mode != 'img'" class="graphic-text"
:style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
{{ item.title }}
</text>
<!-- #ifdef H5 -->
</view>
<!-- #endif -->
<!-- #ifdef MP -->
</view>
<!-- #endif -->
</swiper-item>
</swiper>
<view class="swiper-dot-box" v-if="isIndicatorDots" :class="value.carousel.type">
<view v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))"
:key="numIndex">
<view class="swiper-dot" :class="{ 'active': numIndex == swiperCurrent }"></view>
</view>
</view>
</block>
<scroll-view v-else :scroll-x="value.showStyle == 'singleSlide'"
:class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]">
<!-- #ifdef MP -->
<view class="uni-scroll-view-content">
<!-- #endif -->
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list" :key="index"
:style="{ width: 100 / value.rowCount + '%' }" @tap.stop="redirectTo(item.link)">
<view class="graphic-img" v-if="value.mode != 'text'"
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
<image v-if="item.iconType == 'img'"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
mode="aspectFill"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', borderRadius: value.aroundRadius * 2 + 'rpx' }"
:show-menu-by-longpress="true" />
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
<text :class="['tag', { alone: value.mode == 'text' }]" v-if="item.label.control"
:style="{ color: item.label.textColor, backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')' }">
{{ item.label.text }}
</text>
</view>
<text v-if="value.mode != 'img'" class="graphic-text"
:style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
{{ item.title }}
</text>
</view>
<!-- #ifdef MP -->
</view>
<!-- #endif -->
</scroll-view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
// 自定义图形导航
import DiyMinx from './minx.js'
export default {
name: 'diy-graphic-nav',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0
};
},
created() { },
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
computed: {
componentStyle() {
var css = '';
css += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
css += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament
.color :
'') + ';';
css += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color :
'') + ';';
return css;
},
// 滑块容器的高度
swiperHeight() {
var css = '';
var height = 0;
if (this.value.mode == 'graphic') {
height = (21 + 6 + 14 + 8 + this.value.imageSize) * this.value
.pageCount; // 21 = 文字高度8 = 文字上边距14 = 上下内边距8 = 外边距
} else if (this.value.mode == 'img') {
height = (14 + 8 + this.value.imageSize) * this.value.pageCount; // 14 = 上下内边距8 = 外边距
} else if (this.value.mode == 'text') {
height = (21 + 14 + 8) * this.value.pageCount; // 21 = 文字高度14 = 上下内边距8 = 外边距
}
css += 'height:' + height * 2 + 'rpx';
return css;
},
// 是否显示轮播点
isIndicatorDots() {
var bool = true;
bool = this.value.carousel.type == 'hide' || Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount)) == 1 ? false : true;
return bool;
}
},
methods: {
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
this.$refs.login.open(link.wap_url);
return;
}
}
console.log(link)
this.$util.diyRedirectTo(link);
},
swiperChange(e) {
this.swiperCurrent = e.detail.current
}
}
};
</script>
<style>
/* 固定显示 */
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
}
/* 单行滑动 */
.graphic-nav.singleSlide>>>.uni-scroll-view-content {
display: flex;
}
.graphic-nav.pageSlide>>>.uni-swiper-dots-horizontal {
bottom: 0rpx;
}
.graphic-nav.pageSlide.straightLine>>>.uni-swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
.graphic-nav.pageSlide.circle>>>.uni-swiper-dot {
width: 14rpx;
height: 14rpx;
}
</style>
<style lang="scss">
.graphic-nav {
padding: 16rpx;
box-sizing: border-box;
&.singleSlide {
.graphic-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.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 {
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 {
.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;
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: $color-sub;
}
}
}
}
.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, .3);
margin: 8rpx;
&.active {
background-color: rgba(0, 0, 0, 1);
}
}
&.straightLine {
.swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.swiper-dot {
width: 15rpx;
border-radius: 50%;
height: 15rpx;
}
}
}
</style>

View File

@@ -1,500 +0,0 @@
<template>
<x-skeleton data-component-name="diy-groupbuy" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-groupbuy" :class="[value.template, value.style]" :style="warpCss">
<template v-if="value.template == 'row1-of1'">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)">
</image>
</view>
<view class="content"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.groupbuy_price.split('.')[0] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
'.' + item.groupbuy_price.split('.')[1] }}</text>
</view>
<button v-if="value.btnStyle.control" :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'
}">
{{ value.btnStyle.text }}
</button>
</view>
</view>
</template>
<template v-if="value.template == 'horizontal-slide'">
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" />
<image class="bg" v-if="value.saleStyle.control"
:src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix" />
<view class="num" v-if="value.saleStyle.control"
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
已团{{ item.sell_num }}
</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.groupbuy_price.split('.')[0] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
'.' + item.groupbuy_price.split('.')[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{
item.price }}</view>
</view>
</view>
</scroll-view>
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
:style="{ height: swiperHeight }">
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
@tap.stop="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(dataIndex)" />
<image class="bg" v-if="value.saleStyle.control"
:src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix" />
<view class="num" v-if="value.saleStyle.control"
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">已团{{
item.sell_num }}</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.groupbuy_price.split('.')[0] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
'.' + item.groupbuy_price.split('.')[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{
item.price }}</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</x-skeleton>
</template>
<script>
// 自定义团购展示
import DiyMinx from './minx.js'
export default {
name: 'diy-groupbuy',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
loading: true,
skeletonType: '',
skeletonConfig: {},
list: [],
page: 1
};
},
created() {
this.initSkeleton();
this.getData();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getData();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().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);
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
obj += 'margin-left:' + width + 'px;';
obj += 'margin-right:' + width + 'px;';
}
return obj;
},
swiperHeight() {
if (this.value.nameLineMode == 'multiple') return this.value.ornament.type == 'shadow' ? '404rpx' :
'392rpx';
return this.value.ornament.type == 'shadow' ? '376rpx' : '368rpx';
}
},
methods: {
initSkeleton() {
if (this.value.template == 'row1-of1') {
// 单列 风格
this.skeletonType = 'list';
this.skeletonConfig = {
textRows: 2
};
} else if (this.value.template == 'horizontal-slide') {
// 横向滑动 风格
this.skeletonType = 'waterfall';
this.skeletonConfig = {
gridRows: 1,
gridColumns: 3,
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '80%']
};
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},
getData() {
var data = {
num: this.value.count
};
if (this.value.sources == 'diy') {
data.num = 0;
data.goods_id_arr = this.value.goodsId.toString();
}
this.$api.sendRequest({
url: '/groupbuy/api/goods/lists',
data: data,
success: res => {
if (res.code == 0) {
this.list = res.data;
// 切屏滚动,每页显示固定数量
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
this.loading = false;
}
}
});
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/groupbuy/detail', {
groupbuy_id: e.groupbuy_id
});
},
imageError(index) {
this.list[index].goods_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
}
};
</script>
<style lang="scss">
::v-deep .uni-scroll-view ::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
::v-deep ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
touch-action: none;
}
.diy-groupbuy {
&.row1-of1 {
.item {
display: flex;
margin-bottom: 20rpx;
padding: 16rpx;
&.shadow {
margin: 8rpx 8rpx 20rpx 8rpx;
}
&:last-child {
margin-bottom: 0;
padding-bottom: 20rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
>image {
width: 200rpx;
}
}
.goods-name {
margin-top: 6rpx;
line-height: 1.5;
}
.content {
flex: 1;
margin-left: 20rpx;
position: relative;
.discount-price {
white-space: nowrap;
font-weight: bold;
position: absolute;
bottom: 20rpx;
left: 0;
display: flex;
align-items: baseline;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
color: $base-color;
}
}
button {
position: absolute;
bottom: 10rpx;
right: 20rpx;
margin: 0;
padding: 0 20rpx;
background-color: $base-color;
color: #fff;
min-width: 112rpx;
height: 52rpx;
line-height: 52rpx;
font-size: $font-size-tag;
}
}
}
}
&.horizontal-slide {
.scroll {
width: calc(100% - 40rpx);
padding: 20rpx;
line-height: 1;
white-space: nowrap;
.item.shadow {
margin-bottom: 8rpx;
}
}
.flex-between {
justify-content: space-between;
}
.item {
display: inline-block;
width: 200rpx;
overflow: hidden;
box-sizing: border-box;
&:nth-child(3n + 3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
>image {
width: 200rpx;
}
.bg {
position: absolute;
width: 100%;
height: 60rpx;
bottom: 0;
left: 0;
z-index: 2;
}
.num {
width: 180rpx;
position: absolute;
bottom: 10rpx;
padding-left: 20rpx;
font-size: 20rpx;
line-height: 1;
color: #ffffff;
z-index: 3;
}
}
.content {
padding: 10rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
&.multi-content {
height: 158rpx;
box-sizing: border-box;
}
.goods-name {
line-height: 1.3;
&.multi-hidden {
white-space: break-spaces;
}
}
.discount-price {
white-space: nowrap;
margin-top: auto;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
color: $base-color;
}
}
.original-price {
font-size: $font-size-tag;
color: $color-tip;
line-height: 1;
text-decoration: line-through;
}
}
}
.swiper {
width: 100%;
white-space: nowrap;
padding: 20rpx;
box-sizing: border-box;
.swiper-item {
display: flex;
align-items: center;
}
.item {
width: 200rpx;
}
}
}
}
</style>

View File

@@ -1,77 +0,0 @@
<template>
<view data-component-name="diy-hot-area" :style="hotAreaWarp" class="hot-area-box">
<view class="simple-graph-wrap">
<image :style="{ height: value.imgHeight }" :src="$util.img(value.imageUrl)" mode="widthFix"
:show-menu-by-longpress="true" />
<!-- 热区功能 -->
<view class="heat-map" v-for="(mapItem, mapIndex) in value.heatMapData" :key="mapIndex" :style="{
width: mapItem.width + '%',
height: mapItem.height + '%',
left: mapItem.left + '%',
top: mapItem.top + '%'
}" @tap.stop="$util.diyRedirectTo(mapItem.link)"></view>
</view>
</view>
</template>
<script>
// 热区展示
import DiyMinx from './minx.js'
export default {
name: 'diy-hot-area',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
mixins: [DiyMinx],
data() {
return {};
},
created() { },
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
computed: {
hotAreaWarp: function () {
var obj = '';
obj = 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {}
};
</script>
<style lang="scss" scoped>
.hot-area-box {
position: relative;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.simple-graph-wrap {
line-height: 0;
overflow: hidden;
position: relative;
image {
width: 100%;
}
.heat-map {
position: absolute;
}
}
</style>

View File

@@ -1,88 +0,0 @@
<template>
<view data-component-name="diy-icon" class="diy-icon" :style="iconBgStyle">
<text class="js-icon" :class="iconClass" :style="iconStyle"></text>
</view>
</template>
<script>
// 图标展示
import DiyMinx from './minx.js'
export default {
name: 'diy-icon',
props: {
icon: {
type: String,
default: ''
},
value: {
type: Object,
default: function () {
return null;
}
}
},
mixins: [DiyMinx],
computed: {
iconClass() {
var _class = ' ' + this.icon;
if (this.value && this.value.iconColor.length > 1) _class += ' gradient';
return _class;
},
iconBgStyle() {
if (!this.value) return {};
var style = {
'border-radius': this.value.bgRadius + '%',
'background': ''
};
if (this.value.iconBgImg) style['background'] += 'url(' + this.$util.img(this.value.iconBgImg) + ') no-repeat bottom / contain'
if (this.value.iconBgColor.length) {
if (style.background) style.background += ',';
if (this.value.iconBgColor.length == 1) {
style.background += this.value.iconBgColor[0];
} else {
style['background'] += 'linear-gradient(' + this.value.iconBgColorDeg + 'deg, ' + this.value.iconBgColor.join(',') + ')';
}
}
return this.$util.objToStyle(style);
},
iconStyle() {
if (!this.value) return {};
var style = {
'font-size': this.value.fontSize + '%'
}
if (this.value.iconColor.length == 1) {
style.color = this.value.iconColor[0];
} else {
style['background'] = 'linear-gradient(' + this.value.iconColorDeg + 'deg, ' + this.value.iconColor.join(',') + ')';
}
return this.$util.objToStyle(style);
}
}
}
</script>
<style lang="scss">
.diy-icon {
width: 100%;
height: 100%;
font-size: 100%;
color: #000;
display: flex;
align-items: center;
justify-content: center;
.js-icon {
font-size: 50%;
line-height: 1;
padding: 1rpx;
&.gradient {
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent;
}
}
}
</style>

View File

@@ -1,317 +0,0 @@
<template>
<view data-component-name="diy-img-ads" class="single-graph">
<view :style="imgAdsMarginWarp" class="swiper-box">
<block v-if="imgAdsValue.list.length == 1">
<view class="simple-graph-wrap" :style="imgAdsSwiper" @tap.stop="handlerClick(imgAdsValue.list[0].link)">
<image :style="{ height: imgAdsValue.list[0].imgHeight }"
:src="$util.img(imgAdsValue.list[0].imageUrl)" mode="widthFix" :show-menu-by-longpress="true" />
</view>
</block>
<swiper v-else class="swiper" :style="{ height: swiperHeight }" :class="{
'swiper-left': imgAdsValue.indicatorLocation == 'left',
'swiper-right': imgAdsValue.indicatorLocation == 'right',
'ns-indicator-dots': imgAdsValue.carouselStyle == 'line'
}" :autoplay="true" :interval="imgAdsValue.interval" circular="true" :indicator-dots="isDots"
indicator-color="rgba(130, 130, 130, .5)" :indicator-active-color="imgAdsValue.indicatorColor"
@change="swiperChange">
<swiper-item class="swiper-item" :style="imgAdsSwiper" v-for="(item, index) in imgAdsValue.list"
:key="index" v-if="item.imageUrl" @tap.stop="handlerClick(item.link)">
<view class="item" :style="imgAdsSwiper + 'height: ' + item.imgHeight">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
:show-menu-by-longpress="true" />
</view>
</swiper-item>
</swiper>
<!-- #ifdef MP-WEIXIN -->
<view v-if="imgAdsValue.list.length > 1 && value.indicatorIsShow" :class="[
'swiper-dot-box',
{ straightLine: imgAdsValue.carouselStyle == 'line' },
{ 'swiper-left': imgAdsValue.indicatorLocation == 'left' },
{ 'swiper-right': imgAdsValue.indicatorLocation == 'right' }
]">
<view v-for="(numItem, numIndex) in imgAdsValue.list.length" :key="numIndex"
:class="['swiper-dot', { active: numIndex == swiperIndex }]"
:style="[numIndex == swiperIndex && { backgroundColor: imgAdsValue.indicatorColor }]"></view>
</view>
<!-- #endif -->
</view>
</view>
</template>
<script>
// 图片广告
import DiyMinx from './minx.js'
export default {
name: 'diy-img-ads',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
isDots: true,
swiperHeight: 0,
imgAdsValue: null, // 深拷贝一遍数据,防止动态计算图片展示尺寸的时候,影响到父级的数据,导致二次渲染的时候,数据错误
swiperIndex: 0
};
},
created() {
this.calcSingleRow();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
computed: {
imgAdsMarginWarp: function () {
var obj = '';
obj = 'background-color:' + this.value.componentBgColor + ';';
return obj;
},
imgAdsSwiper: function () {
var obj = '';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
singleGraphBg: function () {
var imgArr = [];
for (let i = 0; i < this.imgAdsValue.list.length; i++) {
let item = this.imgAdsValue.list[i];
imgArr[i] = parseFloat(item.imgHeight);
}
imgArr.sort(function (a, b) {
return b - a;
});
var obj = '';
obj += 'background-color:' + this.imgAdsValue.backgroundColor + ';';
obj += 'height:' + imgArr[0] * (this.imgAdsValue.backgroundHeight / 100) * 2 + 'rpx;';
return obj;
}
},
methods: {
swiperChange(e) {
this.swiperIndex = e.detail.current;
},
calcSingleRow() {
let minHeight = 0;
let systemInfo = uni.getSystemInfoSync()
// 深拷贝一层数据,防止数据更改越权
this.imgAdsValue = JSON.parse(JSON.stringify(this.value));
this.imgAdsValue.list.forEach((item, index) => {
var ratio = item.imgHeight / item.imgWidth;
item.imgWidth = systemInfo.windowWidth;
item.imgWidth -= this.value.margin.both * 2;
item.imgHeight = item.imgWidth * ratio;
// 获取最大高度 if (maxHeight == 0 || maxHeight < item.imgHeight) maxHeight = item.imgHeight;
if (minHeight == 0 || minHeight > item.imgHeight) minHeight = item.imgHeight;
});
this.imgAdsValue.list.forEach((item, index) => {
item.imgHeight = minHeight + 'px';
this.swiperHeight = minHeight + 'px';
});
this.imgAdsValue.indicatorColor = this.imgAdsValue.indicatorColor || '#fff';
if (this.value.indicatorIsShow === undefined) {
this.value.indicatorIsShow = true; // 控制指示点是否展示
}
// 是否显示指示器
if (this.imgAdsValue.list.length <= 1) {
this.isDots = false;
}
// #ifdef H5
this.isDots = this.value.indicatorIsShow;
// #endif
// #ifdef MP-WEIXIN
this.isDots = false;
// #endif
},
async handlerClick(link) {
await this.__$emitEvent({
eventName: 'img-ads-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.$util.diyRedirectTo(link);
}
})
},
}
};
</script>
<style lang="scss" scoped>
.single-graph {
width: 100%;
line-height: 0;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.simple-graph-wrap {
line-height: 0;
overflow: hidden;
position: relative;
image {
width: 100%;
}
.heat-map {
position: absolute;
}
}
.item.active text {
background: rgba(0, 0, 0, 0.3);
position: absolute;
bottom: 0;
color: #ffffff;
font-size: $font-size-tag;
width: 100%;
left: 0;
line-height: 40rpx;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
padding: 0 10rpx;
text-align: center;
}
.swiper-box {
position: relative;
width: 100%;
overflow: hidden;
box-sizing: border-box;
}
.swiper {
margin: 0 auto;
overflow: hidden;
}
.swiper-item {
width: 100%;
height: auto !important;
display: flex;
justify-content: center;
flex-direction: column;
// position: relative;
overflow: hidden;
.item {
width: 100%;
height: auto;
text-align: center;
position: relative;
overflow: hidden;
image {
width: 100%;
max-width: 100%;
height: 100%;
will-change: transform;
}
.heat-map {
position: absolute;
}
}
}
.swiper-dot-box {
position: absolute;
bottom: 20rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40rpx 8rpx;
box-sizing: border-box;
&.swiper-left {
justify-content: flex-start;
}
&.swiper-right {
justify-content: flex-end;
}
.swiper-dot {
background-color: #b2b2b2;
width: 15rpx;
border-radius: 50%;
height: 15rpx;
margin: 8rpx;
&.active {
background-color: rgba(0, 0, 0, 1);
}
}
&.straightLine {
.swiper-dot {
width: 18rpx;
height: 6rpx;
border-radius: 4rpx;
&.active {
width: 36rpx;
background-color: rgba(0, 0, 0, 1);
}
}
}
}
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
::v-deep .uni-scroll-view::-webkit-scrollbar {
display: none;
}
.swiper ::v-deep .uni-swiper-dots-horizontal {
bottom: 25rpx;
}
.swiper-left ::v-deep .uni-swiper-dots-horizontal {
left: 40rpx;
transform: translate(0);
}
.swiper-right ::v-deep .uni-swiper-dots-horizontal {
right: 40rpx;
display: flex;
justify-content: flex-end;
transform: translate(0);
}
.carousel-angle ::v-deep .uni-swiper-dots-horizontal .uni-swiper-dot {
width: 24rpx;
border-radius: 0;
height: 8rpx;
}
.swiper.ns-indicator-dots ::v-deep .uni-swiper-dot {
width: 18rpx;
height: 6rpx;
border-radius: 4rpx;
}
.swiper.ns-indicator-dots ::v-deep .uni-swiper-dot-active {
width: 36rpx;
}
</style>

View File

@@ -1,863 +0,0 @@
<template>
<view data-component-name="diy-index-page">
<view class="bg" :style="warpCss">
<view class="index-page-content">
<view class="nav-top-category" :style="categoryCss">
<scroll-view v-if="value" scroll-with-animation class="diyIndex" scroll-x="true"
:scroll-into-view="'a' + pageIndex"
:style="{ background: value.backgroundColor ? value.backgroundColor : '', width: 'calc(100% - 48rpx)' }"
@touchmove.stop>
<view class="item" :id="'a' + index" v-for="(item, index) in cateList" :key="index"
@tap.stop="changePageIndex(index)" :class="{ fill: value.styleType == 'fill' }"
:style="{ background: index == pageIndex && value.styleType == 'fill' ? value.selectColor : '' }">
<view class="text-con" :class="index == pageIndex ? 'active' : ''" :style="{
color: index == pageIndex ? '' : value.noColor
}" v-if="value.styleType == 'fill'">
{{ item.short_name ? item.short_name : item.category_name }}
</view>
<view class="text-con" :class="index == pageIndex ? 'active' : ''"
:style="{ color: index == pageIndex ? value.selectColor : value.noColor }" v-else>
{{ item.short_name ? item.short_name : item.category_name }}
</view>
<view class="color-base-bg line" v-if="index == pageIndex && value.styleType != 'fill'"
:style="{ background: value.selectColor ? value.selectColor + '!important' : 'rgba(0,0,0,0)' + '!important' }">
</view>
</view>
</scroll-view>
<text class="iconfont icon-unfold unfold-arrows" :style="{ color: value.moreColor }"
@tap.stop="unfoldMenu"></text>
</view>
<uni-popup ref="navTopCategoryPop" type="top" :top="uniPopTop">
<view class="nav-topcategory-pop">
<text v-for="(item, index) in cateList" :key="index"
:class="['category-item', { 'color-base-text color-base-border active': pageIndex == index }]"
@tap.stop="changePageIndex(index)">
{{ item.short_name ? item.short_name : item.category_name }}
</text>
</view>
</uni-popup>
<view class="nav_top_category-fill" :style="{ height: moduleHeight }"></view>
<block v-if="pageIndex == 0">
<slot name="components"></slot>
<slot></slot>
</block>
<block v-else>
<slot name="components"></slot>
<view class="index-category-box">
<view class="category-goods" v-show="!isloading">
<mescroll-uni :top="uniPopTop" ref="mescroll" @getData="getGoodsList"
:background="'url(' + $util.img(bgUrl) + ') 0px -50px / 100% no-repeat'"
:paddingBoth="'30rpx'" @touchmove.prevent.stop>
<block slot="list">
<!-- 二级分类 -->
<view class="twoCategorylist"
v-if="twoCategorylist != 'undefined' && twoCategorylist && twoCategorylist.length > 0">
<view class="twoCategory min" v-if="twoCategorylist.length <= 5">
<view class="twoCategory-page">
<view class="swiper-item" v-for="(item, index) in twoCategorylist"
:key="index" @tap.stop="toCateGoodsList(item.category_id_2, 2)">
<view class="item-box">
<image :src="$util.img(item.image)" v-if="item.image"
mode="aspectFill" />
<image :src="$util.getDefaultImage().goods" v-else
mode="aspectFill" />
<view>{{ item.category_name }}</view>
</view>
</view>
</view>
</view>
<view class="twoCategory base"
v-if="twoCategorylist.length > 5 && twoCategorylist.length <= 10">
<view class="twoCategory-page">
<view class="swiper-item" v-for="(item, index) in twoCategorylist"
:key="index" @tap.stop="toCateGoodsList(item.category_id_2, 2)">
<view class="item-box">
<image :src="$util.img(item.image)" v-if="item.image"
mode="aspectFill" />
<image :src="$util.getDefaultImage().goods" v-else
mode="aspectFill" />
<view>{{ item.category_name }}</view>
</view>
</view>
</view>
</view>
<swiper class="twoCategory big" :duration="500"
v-if="twoCategorylist.length > 10" @change="swiperTocategoryChange">
<swiper-item class="twoCategory-page" v-for="page in maxPage" :key="page">
<view class="swiper-item" v-for="(item, index) in twoCategorylist"
:key="index" v-if="index >= (page - 1) * 10 && index < page * 10"
@tap.stop="toCateGoodsList(item.category_id_2, 2)">
<view class="item-box">
<image :src="item.image" mode="aspectFill" />
<view>{{ item.category_name }}</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="dot-box">
<view class="dot-item" v-for="page in maxPage" v-if="maxPage > 1"
:key="page"
:class="twoCategorylistId == page - 1 ? 'active color-base-bg' : ''">
</view>
</view>
</view>
<!-- 分类广告 -->
<image class="category_adv" v-if="cateList[pageIndex].image_adv"
:src="$util.img(cateList[pageIndex].image_adv)" mode="widthFix" />
<view class="goods-list double-column" v-if="goodsList[pageIndex].list.length">
<view class="goods-item" v-for="(item, index) in goodsList[pageIndex].list"
:key="index" @tap.stop="toDetail(item)">
<view class="goods-img">
<image :src="goodsImg(item.goods_image)" mode="widthFix"
@error="imgError(index)" />
<view class="color-base-bg goods-tag"
v-if="value.goodsTag == 'default' && goodsTag(item) != ''">{{
goodsTag(item) }}</view>
<view class="goods-tag-img" v-if="value.goodsTag == 'diy'">
<image :src="$util.img(value.tagImg.imageUrl)" />
</view>
</view>
<view class="info-wrap">
<view class="name-wrap">
<view class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view>
</view>
<view class="lineheight-clear">
<view class="discount-price">
<text class="unit color-base-text font-size-tag">{{
$lang('common.currencySymbol') }}</text>
<text class="price color-base-text font-size-toolbar">{{
showPrice(item) }}</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>
<view class="pro-info">
<view class="delete-price font-size-activity-tag color-tip"
v-if="showMarketPrice(item)">
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
<text>{{ showMarketPrice(item) }}</text>
</view>
<view class="sale font-size-activity-tag color-tip">已售{{
item.sale_num }}{{ item.unit ? item.unit : '件' }}</view>
</view>
</view>
</view>
</view>
<view v-if="!isloading && goodsList[pageIndex].list.length == 0">
<ns-empty text="该分类下暂无商品" :isIndex="false"></ns-empty>
</view>
</block>
</mescroll-uni>
<!-- <ns-empty v-else-if="!isloading" :isIndex="false" text="该分类下暂无商品"></ns-empty> -->
</view>
<view class="loading" v-show="isloading"><ns-loading ref="loading"></ns-loading></view>
</view>
</block>
</view>
</view>
</view>
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-index-page',
props: {
value: {
type: Object
},
bgUrl: {
type: String
},
scrollTop: {
type: [String, Number],
default: '0'
},
diyGlobal: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
pageIndex: 0, //当前选中分类id
cateList: [{
//header分类
category_name: '首页'
}],
twoCategorylist: [], //二级分类
twoCategorylistId: 0, //二级分类所在的swiper
goodsList: {},
isloading: true,
top: 0,
isUnfold: true, //是否展开菜单
moduleHeight: '' //组件高度
};
},
computed: {
warpCss() {
var obj = '';
obj += (this.bgUrl ? 'background:' + 'url(' + this.$util.img(this.bgUrl) + ') no-repeat 0 0/100%' : '') + ';';
return obj;
},
categoryCss() {
var obj = '';
obj += 'top:' + this.fixedTop + ';';
// obj += 'background-color:' + (this.value.componentBgColor || this.value.pageBgColor) + ';';
obj += 'background-color:' + this.topNavColor + ';';
return obj;
},
maxPage() {
let num = 0;
if (this.twoCategorylist && this.twoCategorylist.length) {
num = Math.ceil(this.twoCategorylist.length / 10);
}
return num;
},
type() {
if (this.value) {
return true;
} else {
return false;
}
},
topNavColor() {
var color = this.value.componentBgColor || this.value.pageBgColor;
if (this.diyGlobal.topNavBg && this.scrollTop > 20) color = this.diyGlobal.topNavColor;
return color;
},
fixedTop() {
let diyPositionObj = this.$store.state.diyGroupPositionObj;
let data = 0;
if (diyPositionObj.diySearch && diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
if (diyPositionObj.diySearch.moduleIndex > diyPositionObj.diyIndexPage.moduleIndex) data =
diyPositionObj.nsNavbar.originalVal + 'px';
else data = diyPositionObj.nsNavbar.originalVal + diyPositionObj.diySearch.originalVal + 'px';
} else if (diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
data = diyPositionObj.nsNavbar.originalVal + 'px';
}
return data;
},
// 分类导航展开菜单的位置
uniPopTop() {
let diyPositionObj = this.$store.state.diyGroupPositionObj;
let data = '0';
if (this.fixedTop && diyPositionObj.diyIndexPage)
data = Number.parseFloat(this.fixedTop) + diyPositionObj.diyIndexPage.originalVal + 'px';
return data;
}
},
watch: {
type(newVal, oldVal) {
if (newVal) {
this.getCategoryList();
}
}
},
mounted() {
this.getCategoryList();
setTimeout(() => {
// 获取组件的高度默认高度为4545是在375屏幕上的高度
const query = uni.createSelectorQuery();
// #ifdef H5
let cssSelect = '.page-header .u-navbar';
this.top = 100;
// #endif
// #ifdef MP
let cssSelect = '.page-header >>> .u-navbar';
this.top = 20;
// #endif
query
.select(cssSelect)
.boundingClientRect(data => {
let height;
if (this.diyGlobal.navBarSwitch) {
height = data ? data.height : 45;
} else {
height = data ? data.height : 0;
}
// #ifdef H5
this.top += height * 2;
// #endif
// #ifdef MP
this.top += height;
// #endif
})
.exec();
});
this.setModuleLocationFn();
},
methods: {
initPageIndex() {
this.pageIndex = 0;
this.showModuleFn();
},
//请求分类列表
getCategoryList() {
let url = '/api/goodscategory/tree';
let data = {
level: 3
};
this.$api.sendRequest({
url: url,
data: data,
success: res => {
if (res.code >= 0) {
let arr = [];
let obj = {
list: []
};
obj.category_name = this.value.title ? this.value.title : '首页';
arr.push(obj);
this.cateList = arr.concat(res.data);
Object.keys(this.cateList).forEach((key, index) => {
this.goodsList[key] = {
page: 1,
list: []
};
});
this.twoCategorylist = this.cateList[this.pageIndex].child_list;
}
}
});
},
//修改当前页面id
changePageIndex(e) {
this.isloading = true;
this.pageIndex = e;
this.showModuleFn();
if (e == 0) return;
this.twoCategorylist = this.cateList[this.pageIndex].child_list;
if (this.cateList[this.pageIndex].child_list) {
this.twoCategorylist = this.cateList[this.pageIndex].child_list;
this.twoCategorylist.forEach(v => {
if (v.image) {
v.image = this.$util.img(v.image);
} else {
v.image = this.$util.getDefaultImage().goods;
}
});
} else {
this.twoCategorylist = false;
}
if (this.$refs.mescroll) {
this.$refs.mescroll.refresh();
this.$refs.mescroll.myScrollTo(0);
}
},
//监听二级分类 页面切换
swiperTocategoryChange(e) {
this.twoCategorylistId = e.detail.current;
},
toDetail(item) {
this.$util.redirectTo('/pages_goods/detail', {
goods_id: item.goods_id
});
},
getGoodsList(mescroll) {
let id = this.pageIndex;
var data = {
page: mescroll.num,
page_size: mescroll.size
};
data.category_id = this.cateList[this.pageIndex].category_id_1;
data.category_level = 1;
this.$api.sendRequest({
url: '/api/goodssku/page',
data: data,
success: res => {
this.isloading = false;
let newArr = [];
let msg = res.message;
if (res.code == 0 && res.data) {
this.count = res.data.count;
newArr = res.data.list;
} else {
this.$util.showToast({
title: msg
});
}
mescroll.endSuccess(newArr.length);
//设置列表数据
if (mescroll.num == 1) this.goodsList[id].list = []; //如果是第一页需手动制空列表
this.goodsList[id].list = this.goodsList[id].list.concat(newArr); //追加新数据
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
this.$forceUpdate();
}
});
},
toCateGoodsList(e, f) {
this.$util.redirectTo('/pages_goods/list', {
category_id: e,
category_level: f
});
},
goodsImg(imgStr) {
let imgs = imgStr.split(',');
return imgs[0] ? this.$util.img(imgs[0], {
size: 'mid'
}) : this.$util.getDefaultImage().goods;
},
imgError(index) {
this.goodsList[index].goods_image = this.$util.getDefaultImage().goods;
},
showPrice(data) {
let price = data.discount_price;
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
return price;
},
showMarketPrice(item) {
if (item.market_price_show) {
let price = this.showPrice(item);
if (item.market_price > 0) {
return item.market_price;
} else if (parseFloat(item.price) > parseFloat(price)) {
return item.price;
}
}
return '';
},
goodsTag(data) {
return data.label_name || '';
},
// 控制菜单展开关闭
unfoldMenu() {
if (this.isUnfold) this.$refs.navTopCategoryPop.open();
else this.$refs.navTopCategoryPop.close();
this.isUnfold = !this.isUnfold;
},
// 向vuex中的diyIndexPositionObj增加分类导航组件定位位置
setModuleLocationFn() {
const query = uni.createSelectorQuery().in(this);
query.select('.nav-top-category')
.boundingClientRect(data => {
let diyIndexPage = {
originalVal: data.height || 0, //自身高度 px
moduleIndex: this.value.moduleIndex //组件在diy-group的位置
};
this.moduleHeight = (data.height || 0) + 'px';
this.$store.commit('setDiyGroupPositionObj', {
diyIndexPage: diyIndexPage
});
}).exec();
},
showModuleFn() {
let searchModule = this.$root.diyData.value.filter((item, index) => {
return item.componentName == 'Search';
});
// setDiyGroupShowModule值为【】表示显示所有组件,为【null】则什么组件也不显示
if (this.pageIndex == 0) this.$store.commit('setDiyGroupShowModule', JSON.stringify([]));
else {
if (searchModule[0].positionWay == 'fixed') this.$store.commit('setDiyGroupShowModule', JSON.stringify(
['Search']));
else this.$store.commit('setDiyGroupShowModule', JSON.stringify(['null']));
}
// 特殊处理,切换分类导航导致页面无法上下滚动
// #ifdef H5
if (this.pageIndex == 0) {
// 标记当前页使用了mescroll (需延时,确保page已切换)
setTimeout(function () {
let uniPageDom = document.getElementsByTagName('uni-page')[0];
uniPageDom && uniPageDom.removeAttribute('use_mescroll');
}, 30);
}
// #endif
}
}
};
</script>
<style lang="scss">
.bg {
width: 100%;
height: 100%;
}
.nav-top-category {
display: flex;
align-items: center;
position: fixed;
z-index: 999;
transition: background 0.3s;
width: 100%;
padding: 0 24rpx;
box-sizing: border-box;
.text-fiexd {
.text-con {
line-height: 60rpx;
}
}
.unfold-arrows {
position: relative;
margin-left: 4rpx;
padding-left: 16rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
}
}
.nav-topcategory-pop {
padding: 0 10rpx 20rpx;
display: flex;
flex-wrap: wrap;
background-color: #fff;
.category-item {
padding: 0 30rpx;
height: 60rpx;
text-align: center;
line-height: 56rpx;
border-radius: 40rpx;
background-color: #f0f0f0;
margin: 20rpx 10rpx 0;
font-size: 24rpx;
border: 2rpx solid transparent;
box-sizing: border-box;
&.active {
background-color: transparent;
}
}
}
.diyIndex {
width: 100%;
height: 100rpx;
white-space: nowrap;
padding: 20rpx 0 0;
box-sizing: border-box;
&.widthAuto {
width: auto;
}
.item {
position: relative;
margin-right: 40rpx;
display: inline-block;
line-height: 80rpx;
font-size: $font-size-base;
text-align: center;
.text-con {
height: 30px;
line-height: 30px;
&.active {
font-size: $font-size-base;
font-weight: bold;
}
}
.text-con.active {
font-size: $font-size-base;
font-weight: bold;
}
.line {
position: absolute;
left: calc(50% - 14rpx);
width: 28rpx;
height: 5rpx;
border-radius: 5rpx;
}
&.fill {
border-radius: 50rpx;
padding: 0 10rpx;
.text-con.active {
font-size: $font-size-base;
font-weight: 600;
color: #fff;
}
}
}
}
.index-page-box {
width: 100%;
height: calc(100vh - 288rpx);
}
.index-page-content {
width: 100%;
// height: calc(100vh - 144px);
}
.index-category-box.active {
padding-bottom: 160rpx;
padding-bottom: calc(160rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}
.index-category-box {
width: 100%;
padding-bottom: 110rpx;
padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(110rpx + env(safe-area-inset-bottom));
.twoCategorylist {
position: relative;
}
.twoCategory.min {
height: 160rpx;
}
.twoCategory.big {
height: 340rpx;
}
.twoCategory {
width: 100%;
background: #ffffff;
border-radius: 15rpx;
overflow: hidden;
margin-top: 20rpx;
.twoCategory-page {
width: 100%;
height: 100%;
padding: 20rpx;
box-sizing: border-box;
}
.swiper-item {
width: 120rpx;
height: 120rpx;
display: inline-block;
margin-right: calc((100% - 120rpx * 5) / 4);
overflow: hidden;
.item-box {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
image {
width: 88rpx;
height: 88rpx;
}
view {
width: 100%;
font-size: 22rpx;
line-height: 1;
margin-top: 10rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-align: center;
}
}
}
.swiper-item:nth-child(5n) {
margin-right: 0;
}
.swiper-item:nth-child(10n + 6) {
margin-top: 15rpx;
}
}
.dot-box {
width: calc(100% - 40rpx);
height: 50rpx;
position: absolute;
bottom: 0rpx;
left: 20rpx;
background: rgba($color: #000000, $alpha: 0);
display: flex;
justify-content: center;
align-items: center;
.dot-item {
width: 12rpx;
height: 12rpx;
background: #cccccc;
border-radius: 6rpx;
margin-right: 10rpx;
}
.dot-item.active {
width: 24rpx;
}
}
.category_adv {
width: 100%;
margin: 20rpx 0;
border-radius: 15rpx;
}
.category-goods {
width: 100%;
}
}
.loading {
width: 100%;
height: 50rpx;
margin-top: 100rpx;
}
::v-deep .uni-scroll-view::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
}
.goods-list.double-column {
display: flex;
flex-wrap: wrap;
margin-top: $margin-updown;
.goods-item {
flex: 1;
position: relative;
background-color: #fff;
flex-basis: 48%;
max-width: calc((100% - 30rpx) / 2);
margin-right: $margin-both;
margin-bottom: $margin-updown;
border-radius: $border-radius;
&:nth-child(2n) {
margin-right: 0;
}
.goods-img {
position: relative;
overflow: hidden;
padding-top: 100%;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;
image {
width: 100%;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
.goods-tag {
color: #fff;
line-height: 1;
padding: 8rpx 16rpx;
position: absolute;
border-bottom-right-radius: $border-radius;
top: 0;
left: 0;
font-size: $font-size-goods-tag;
}
.goods-tag-img {
position: absolute;
border-top-left-radius: $border-radius;
width: 80rpx;
height: 80rpx;
top: 0;
left: 0;
z-index: 5;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.info-wrap {
padding: 0 26rpx 26rpx 26rpx;
}
.goods-name {
font-size: $font-size-base;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 20rpx;
height: 68rpx;
}
.discount-price {
display: inline-block;
font-weight: bold;
line-height: 1;
margin-top: 16rpx;
.unit {
margin-right: 6rpx;
}
}
.pro-info {
display: flex;
margin-top: 16rpx;
.delete-price {
text-decoration: line-through;
flex: 1;
.unit {
margin-right: 6rpx;
}
}
&>view {
line-height: 1;
&:nth-child(2) {
text-align: right;
}
}
}
.member-price-tag {
display: inline-block;
width: 60rpx;
line-height: 1;
margin-left: 6rpx;
image {
width: 100%;
}
}
}
}
</style>

View File

@@ -1,74 +0,0 @@
<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" :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>
<view class="fui-list-inner">
<view class="title" style="height: 75rpx;">
<text style="font-weight:600" :style="{ color: item.textColor }">{{ item.title }}</text>
<view class="subtitle" style="font-size:24rpx" :style="{ color: item.textColor }">{{ item.desc }}
</view>
</view>
</view>
<view class="fui-remark jump" style="padding-right: 20rpx; text-align: center; line-height: 140rpx;">
<span style="font-size:24rpx;padding: 14rpx 18rpx;border-radius:8rpx"
:style="{ background: item.BtBgColor, color: item.BtColor }" @tap.stop="previewSqs()">立即添加</span>
</view>
</view>
</view>
</view>
</template>
<script>
// 客服展示
import DiyMinx from './minx.js'
export default {
name: 'diy-kefu',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
loading: true,
};
},
created() {
// this.getDataList();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
// this.getDataList();
}
},
computed: {
style() {
var css = '';
css += 'background-color:' + this.value.contentBgColor + ';';
if (this.value.elementAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
return css;
}
},
methods: {
previewSqs() {
var img = this.$util.img(this.value.list[1].imageUrl)
uni.previewImage({
current: img,
urls: [img]
})
}
}
};
</script>
<style lang="scss"></style>

View File

@@ -1,80 +0,0 @@
<template>
<view data-component-name="diy-listmenu" class="diy-listmenu" :style="style">
<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" @tap.stop="redirectTo(item.link)" class="fui-cell"
:class="item.iconType == 'img' ? 'img-cell' : ''">
<view class="fui-cell-icon" :style="{ 'color': item.style ? item.style.iconColor : '#333' }">
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon" :value="item.style ? item.style : null"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
<image v-if="item.iconType == 'img'" mode="widthFix" :src="$util.img(item.imageUrl)"
style="border-radius:6rpx;width: 60rpx;"></image>
</view>
<view class="fui-cell-text" style="color:#333;">{{ item.title }}</view>
<view class="fui-cell-remark" style="font-size: 24rpx;">{{ lang == 'en-us' ? 'view' : '查看' }}</view>
</view>
</view>
</view>
</template>
<script>
// 自定义列表菜单展示
import DiyMinx from './minx.js'
export default {
name: 'diy-listmenu',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
loading: true,
lang: uni.getStorageSync("lang")//en-us 英文
};
},
created() {
// this.getDataList();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
// this.getDataList();
}
},
computed: {
style() {
var css = '';
css += 'background-color:' + this.value.contentBgColor + ';';
if (this.value.elementAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.margin.top > 0) css += 'margin-top:' + this.value.margin.top * 2 + 'rpx;';
return css;
}
},
methods: {
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
this.$refs?.login?.open(link.wap_url);
return;
}
}
this.$util.diyRedirectTo(link);
},
}
};
</script>
<style lang="scss">
.img-cell {
padding: 0 16rpx !important;
}
</style>

View File

@@ -1,259 +0,0 @@
<template>
<x-skeleton data-component-name="diy-live" type="banner" :loading="loading" :configs="skeletonConfig">
<view class="live-wrap" @tap.stop="handlerClick(liveInfo.roomid)"
v-if="liveInfo">
<view class="banner-wrap">
<image
:src="liveInfo.banner != '' ? $util.img(liveInfo.banner) : $util.img('public/uniapp/live/live_default_banner.png')"
mode="widthFix"
@error="liveInfo.banner = $util.img('public/uniapp/live/live_default_banner.png')" />
<view class="shade"></view>
<view class="wrap">
<view class="room-name">
<text class="status-name font-size-base"
:class="{ 'color-base-bg': liveInfo.live_status == '101' }">
<text class="iconfont icon-zhibozhong font-size-sub"
v-if="liveInfo.live_status == '101'"></text>
<text class="iconfont icon-zhibojieshu font-size-sub" v-else></text>
{{ liveInfo.status_name }}
</text>
{{ liveInfo.name }}
</view>
</view>
</view>
<view class="room-info" v-if="value.isShowAnchorInfo || value.isShowLiveGood">
<block v-if="value.isShowAnchorInfo">
<image
:src="liveInfo.anchor_img != '' ? $util.img(liveInfo.anchor_img) : $util.getDefaultImage().head"
class="anchor-img" @error="liveInfo.anchor_img = $util.getDefaultImage().head" />
<text class="anchor-name">主播{{ liveInfo.anchor_name }}</text>
</block>
<text class="separate" v-if="value.isShowAnchorInfo && value.isShowLiveGood">|</text>
<block v-if="value.isShowLiveGood">
<text class="goods-text">直播商品{{ liveInfo.goods.length }}</text>
</block>
</view>
</view>
</x-skeleton>
</template>
<script>
// 直播
import DiyMinx from './minx.js'
export default {
components: {},
name: 'diy-live',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
loading: true,
skeletonConfig: {
headHeight: '200rpx'
},
liveInfo: {
banner: '',
anchor_img: ''
}
};
},
created() {
this.getLiveInfo();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getLiveInfo();
}
},
methods: {
getLiveInfo() {
this.$api.sendRequest({
url: '/live/api/live/info',
success: res => {
if (res.code == 0 && res.data) {
this.liveInfo = res.data;
this.getLiveStatus();
} else {
this.liveInfo = null;
}
this.loading = false;
}
});
},
entryRoom(roomId) {
// #ifdef MP-WEIXIN
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}`
});
// #endif
},
getLiveStatus() {
// #ifdef MP-WEIXIN
let livePlayer = requirePlugin('live-player-plugin');
livePlayer.getLiveStatus({
room_id: this.liveInfo.roomid
}).then(res => {
const liveStatus = res.liveStatus;
if (liveStatus && liveStatus != this.liveInfo.live_status) {
this.changeLiveStatus(liveStatus);
}
})
.catch(err => {
console.log('get live status', err);
});
// 往后间隔1分钟或更慢的频率去轮询获取直播状态
var timer = setInterval(() => {
livePlayer
.getLiveStatus({
room_id: this.liveInfo.roomid
})
.then(res => {
const liveStatus = res.liveStatus;
if (liveStatus && liveStatus != this.liveInfo.live_status) {
this.changeLiveStatus(liveStatus);
}
if (this.$util.inArray(liveStatus, [103, 104, 106, 107])) {
clearInterval(timer);
}
})
.catch(err => {
console.log('get live status', err);
});
}, 60000);
// #endif
},
changeLiveStatus(status) {
this.$api.sendRequest({
url: '/live/api/live/modifyLiveStatus',
data: {
room_id: this.liveInfo.roomid,
status: status
},
success: res => {
if (res.code == 0) {
this.getLiveInfo();
}
}
});
},
async handlerClick(roomid) {
await this.__$emitEvent({
eventName: 'live-tap', data: roomid, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.entryRoom(roomid);
}
})
},
}
};
</script>
<style lang="scss">
.live-wrap {
background: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.banner-wrap {
width: 100%;
position: relative;
line-height: 1;
display: flex;
image {
width: 100%;
}
.shade {
width: 100%;
height: 100%;
position: absolute;
background: rgba($color: #888, $alpha: 0.3);
left: 0;
top: 0;
z-index: 5;
}
.wrap {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 10;
padding: 26rpx 20rpx;
box-sizing: border-box;
.room-name {
font-size: $font-size-toolbar;
color: #fff;
line-height: 1;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
.status-name {
display: inline-block;
font-size: $font-size-activity-tag;
color: #fff;
padding: 8rpx 12rpx;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 36rpx;
margin-right: 20rpx;
.icon-zhibozhong {
font-size: $font-size-activity-tag;
color: #fff;
margin-right: 9rpx;
}
}
}
}
}
.room-info {
padding: 20rpx 30rpx;
background: #fff;
display: flex;
.anchor-img {
width: 60rpx;
height: 60rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 20rpx;
}
.anchor-name,
.goods-text {
font-size: $font-size-base;
line-height: 60rpx;
}
.separate {
color: #808080;
margin: 0 10rpx;
line-height: 56rpx;
}
}
</style>
<style scoped>
.coupon-all>>>.uni-scroll-view::-webkit-scrollbar {
display: none;
}
</style>

View File

@@ -1,260 +0,0 @@
<template>
<view data-component-name="diy-many-goods-list" class="many-goods-list">
<scroll-view scroll-x="true" class="many-goods-list-head" :scroll-into-view="'a' + cateIndex"
:style="manyWrapCss">
<view v-for="(item, index) in value.list" class="scroll-item" :class="{ active: index == cateIndex }"
:id="'a' + index" :key="index" @tap.stop="handlerClick({ item, index })">
<view class="split-line" v-if="index > 0"></view>
<view class="cate">
<view class="name" :style="{ color: value.headStyle.titleColor }">{{ item.title }}</view>
<view class="desc" :class="{ 'color-base-bg': index == cateIndex && item.desc }">{{ item.desc }}
</view>
</view>
</view>
</scroll-view>
<view class="many-goods-list-fill" :style="{ 'height': manyInfo.height }" v-if="fixedTop"></view>
<diy-goods-list class="many-goods-list-body" v-if="goodsValue" :value="goodsValue"
ref="diyGoodsList"></diy-goods-list>
</view>
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-many-goods-list',
props: {
value: {
type: Object,
default: () => {
return {};
}
},
scrollTop: {
type: [Number, String]
},
global: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
cateIndex: 0, // 当前选中的分类id
goodsValue: null, // 商品列表数据
manyInfo: {
bodyHeight: 0,
bodyTop: 0,
height: 0,
top: 0
}
};
},
created() {
this.changeCateIndex(this.value.list[0], 0, true);
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.changeCateIndex(this.value.list[0], 0, true);
},
scrollTop: function (nval) {
const query = uni.createSelectorQuery().in(this);
query
.select('.many-goods-list')
.boundingClientRect(data => {
if (data) {
this.manyInfo.top = data.top;
}
})
.exec();
query
.select('.many-goods-list .many-goods-list-body')
.boundingClientRect(data => {
if (data) {
this.manyInfo.bodyHeight = (data.height || 0);
this.manyInfo.bodyTop = (data.top || 0);
}
})
.exec();
}
},
computed: {
fixedTop() {
let diyPositionObj = JSON.parse(JSON.stringify(this.$store.state.diyGroupPositionObj));
let positionHeight = 0;
let height = 0;
delete diyPositionObj.diyManyGoodsList;
if (diyPositionObj) {
let arr = Object.values(diyPositionObj);
arr.forEach((item, index) => {
positionHeight += item.originalVal; //定位的高度【搜索框+导航分类+自定义头部】
});
}
if (this.manyInfo.top < positionHeight && (this.manyInfo.bodyTop + this.manyInfo.bodyHeight >
positionHeight + Number.parseFloat(this.manyInfo.height))) {
height = positionHeight;
}
return height;
},
manyWrapCss() {
let html = '';
html += `position: ${this.fixedTop ? 'fixed' : 'initial'};`
html += `top: ${this.fixedTop}px;`
if (!this.global.topNavBg)
html += `background-color: #fff;`
else
html += `background-color: ${this.fixedTop ? this.global.topNavColor : 'transparent'};`
return html;
}
},
mounted() {
const query = uni.createSelectorQuery().in(this);
query
.select('.many-goods-list .many-goods-list-head')
.boundingClientRect(data => {
if (data) {
this.manyInfo.height = (data.height || 0) + 'px';
// 向vuex中的diyIndexPositionObj增加多商品组件定位位置
let diyManyGoodsList = {
originalVal: data.height || 0 //自身高度 px
}
this.$store.commit('setDiyGroupPositionObj', {
diyManyGoodsList: diyManyGoodsList
});
}
})
.exec();
},
methods: {
changeCateIndex(item, index, isFirst) {
this.cateIndex = index;
this.goodsValue = {
sources: item.sources,
categoryId: item.categoryId,
categoryName: item.categoryName,
goodsId: item.goodsId,
componentBgColor: this.value.componentBgColor,
componentAngle: this.value.componentAngle,
topAroundRadius: this.value.topAroundRadius,
bottomAroundRadius: this.value.bottomAroundRadius,
elementBgColor: this.value.elementBgColor,
elementAngle: this.value.elementAngle,
topElementAroundRadius: this.value.topElementAroundRadius,
bottomElementAroundRadius: this.value.bottomElementAroundRadius,
count: this.value.count,
nameLineMode: this.value.nameLineMode,
template: this.value.template,
style: this.value.style,
ornament: this.value.ornament,
sortWay: this.value.sortWay,
saleStyle: this.value.saleStyle,
tag: this.value.tag,
btnStyle: this.value.btnStyle,
goodsNameStyle: this.value.goodsNameStyle,
theme: this.value.theme,
priceStyle: this.value.priceStyle,
slideMode: this.value.slideMode,
imgAroundRadius: this.value.imgAroundRadius,
margin: this.value.margin,
goodsMarginType: this.value.goodsMarginType,
goodsMarginNum: this.value.goodsMarginNum
};
// 如果是第一次加载,不需要执行下面代码
if (isFirst) return;
this.$refs.diyGoodsList.goodsValue = this.goodsValue;
this.$refs.diyGoodsList.getGoodsList();
},
async handlerClick({ item, index }) {
await this.__$emitEvent({
eventName: 'many-goods-list-tap', data: { item, index }, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.changeCateIndex(item, index, false);
}
})
},
}
};
</script>
<style lang="scss" scoped>
.many-goods-list-head {
left: 0;
right: 0;
z-index: 5;
background-color: #fff;
}
scroll-view {
width: 100%;
white-space: nowrap;
box-sizing: border-box;
padding: 20rpx 0;
.scroll-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: calc(25% - 40rpx);
position: relative;
padding: 0 20rpx;
&:first-child {
width: calc(25% - 20rpx);
padding-left: 0;
}
.split-line {
display: inline-block;
width: 1rpx;
height: 30rpx;
background-color: #e5e5e5;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
&.active {
.name {
font-weight: bold;
}
.desc {
color: #ffffff;
border-radius: 20rpx;
}
}
.name {
font-size: 32rpx;
color: $color-title;
line-height: 1;
}
.cate {
display: inline-block;
}
.desc {
font-size: $font-size-tag;
color: $color-tip;
height: 36rpx;
line-height: 36rpx;
margin-top: 10rpx;
min-width: 120rpx;
max-width: 220rpx;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10rpx;
}
}
}
</style>

View File

@@ -1,89 +0,0 @@
<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">
<map id="map" style="width: 100%; height:600rpx" scale="12" :markers="markerst" bindupdated="bindupdated"
:longitude="item.lng" :latitude="item.lat" show-location>
<!-- <cover-view
style="position:absolute;right:10px;bottom:30rpx;z-index:99999;background:#4390FF;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;"
@tap.stop="handlerClick(item)" @tap="handlerClick(item)">
<cover-view style="font-size:24rpx">一键导航</cover-view>
</cover-view> -->
<!-- 使用非原生cover-view, 解决原生cover-view组件渲染机制z-index失效的问题 -->
<div
style="position:absolute;right:12rpx;bottom:48rpx;z-index:1;background:#4390FF;padding:0rpx 20rpx;border-radius:8rpx;color: #fff;"
@tap.stop="handlerClick(item)">
<span style="font-size:24rpx;color: #fff;">一键导航</span>
</div>
</map>
</view>
</view>
</template>
<script>
// 地图
import DiyMinx from './minx.js'
export default {
name: 'diy-map',
props: {
value: {
type: Object
}
},
data() {
return {
loading: true,
markers: []
};
},
created() {
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
// this.getDataList();
}
},
computed: {
markerst() {
return [{
id: 1,
latitude: this.value.list[0].lat,
longitude: this.value.list[0].lng
}]
},
style() {
var css = '';
css += 'background-color:' + this.value.contentBgColor + ';';
if (this.value.elementAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
return css;
}
},
methods: {
tomap(item) {
uni.openLocation({
latitude: parseFloat(item.lat),
longitude: parseFloat(item.lng),
name: "一键导航",
})
},
async handlerClick(item) {
await this.__$emitEvent({
eventName: 'map-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.tomap(item);
}
})
}
}
};
</script>
<style lang="scss"></style>

File diff suppressed because it is too large Load Diff

View File

@@ -1,279 +0,0 @@
<template>
<view data-component-name="diy-member-my-order" class="common-wrap" :style="warpCss">
<view class="order-wrap">
<view class="status-wrap">
<view class="item-wrap" @tap.stop="redirect('/pages_order/list?status=waitpay')"
style="margin-right: 10rpx;">
<view class="icon-block">
<template v-if="value.style == 3">
<image :src="$util.img('public/uniapp/member/order/wait_pay.png')" mode="widthFix" />
<view class="icon-shade"
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_pay_shade.png') + ')'">
</view>
</template>
<template v-else>
<diy-icon :icon="value.icon.waitPay.icon" v-if="value.icon.waitPay"
:value="value.icon.waitPay.style ? value.icon.waitPay.style : null"></diy-icon>
</template>
<text v-if="orderNum.waitpay > 0" class="order-num color-base-bg price-font">{{ orderNum.waitpay
> 99 ? '99+' :
orderNum.waitpay }}</text>
</view>
<view class="title">{{ $lang('waitpay') }}</view>
</view>
<view class="item-wrap" @tap.stop="redirect('/pages_order/list?status=waitsend')"
style="margin-right: 10rpx;">
<view class="icon-block">
<template v-if="value.style == 3">
<image :src="$util.img('public/uniapp/member/order/wait_send.png')" mode="widthFix"></image>
<view class="icon-shade"
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_send_shade.png') + ')'">
</view>
</template>
<template v-else>
<diy-icon :icon="value.icon.waitSend.icon" v-if="value.icon.waitSend"
:value="value.icon.waitSend.style ? value.icon.waitSend.style : null"></diy-icon>
</template>
<text v-if="orderNum.waitsend > 0" class="order-num color-base-bg price-font">{{
orderNum.waitsend > 99 ? '99+'
: orderNum.waitsend }}</text>
</view>
<view class="title">{{ $lang('waitsend') }}</view>
</view>
<view class="item-wrap" @tap.stop="redirect('/pages_order/list?status=waitconfirm')"
style="margin-right: 10rpx;">
<view class="icon-block">
<template v-if="value.style == 3">
<image :src="$util.img('public/uniapp/member/order/wait_confirm.png')" mode="widthFix" />
<view class="icon-shade"
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_confirm_shade.png') + ')'">
</view>
</template>
<template v-else>
<diy-icon :icon="value.icon.waitConfirm.icon" v-if="value.icon.waitConfirm"
:value="value.icon.waitConfirm.style ? value.icon.waitConfirm.style : null"></diy-icon>
</template>
<text v-if="orderNum.waitconfirm > 0" class="order-num color-base-bg price-font">{{
orderNum.waitconfirm > 99 ?
'99+' : orderNum.waitconfirm }}</text>
</view>
<view class="title">{{ $lang('waitconfirm') }}</view>
</view>
<view class="item-wrap" @tap.stop="redirect('/pages_order/list?status=waitrate')"
style="margin-right: 10rpx;">
<view class="icon-block">
<template v-if="value.style == 3">
<image :src="$util.img('public/uniapp/member/order/wait_use.png')" mode="widthFix" />
<view class="icon-shade"
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/wait_rate_shade.png') + ')'">
</view>
</template>
<template v-else>
<diy-icon :icon="value.icon.waitUse.icon" v-if="value.icon.waitUse"
:value="value.icon.waitUse.style ? value.icon.waitUse.style : null"></diy-icon>
</template>
<!-- <text v-if="orderNum.wait_use > 0" class="order-num color-base-bg price-font">{{ orderNum.wait_use > 99 ? '99+' : orderNum.wait_use }}</text> -->
</view>
<view class="title">{{ $lang('completed') }}</view>
</view>
<view class="item-wrap" @tap.stop="redirect('/pages_tool/order/activist')">
<view class="icon-block">
<template v-if="value.style == 3">
<image :src="$util.img('public/uniapp/member/order/refunding.png')" mode="widthFix" />
<view class="icon-shade"
:style="'-webkit-mask-image: url(' + $util.img('public/uniapp/member/order/refunding_shade.png') + ')'">
</view>
</template>
<template v-else>
<diy-icon :icon="value.icon.refunding.icon" v-if="value.icon.refunding"
:value="value.icon.refunding.style ? value.icon.refunding.style : null"></diy-icon>
</template>
<text v-if="orderNum.refunding > 0" class="order-num color-base-bg price-font">{{
orderNum.refunding > 99 ?
'99+' : orderNum.refunding }}</text>
</view>
<view class="title">{{ $lang('activist') }}</view>
</view>
</view>
</view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
// 自定义会员中心——我的订单展示
import DiyMinx from './minx.js'
export default {
name: 'diy-member-my-order',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
orderNum: {
waitpay: 0,
waitsend: 0,
waitconfirm: 0,
refunding: 0,
wait_use: 0,
waitrate: 0
}
};
},
created() {
this.init();
},
watch: {
storeToken(nVal, oVal) {
this.init();
},
// 组件刷新监听
componentRefresh: function (nval) {
this.init();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
init() {
if (this.storeToken) {
this.getOrderNum();
} else {
this.orderNum = {
waitpay: 0,
waitsend: 0,
waitconfirm: 0,
refunding: 0,
wait_use: 0,
waitrate: 0
};
}
},
/**
* 获取订单数量
*/
getOrderNum() {
this.$api.sendRequest({
url: '/api/order/num',
data: {
order_status: 'waitpay,waitsend,waitconfirm,refunding,wait_use,waitrate'
},
success: res => {
if (res.code == 0) {
this.orderNum = res.data;
} else {
this.orderNum = {
waitpay: 0,
waitsend: 0,
waitconfirm: 0,
refunding: 0,
wait_use: 0,
waitrate: 0
};
}
}
});
},
/**
* 跳转
* @param {Object} url
*/
redirect(url) {
if (this.storeToken) {
this.$util.redirectTo(url);
} else {
this.$refs.login.open(url);
}
}
}
};
</script>
<style lang="scss">
.common-wrap {
width: 100%;
box-sizing: border-box;
}
.order-wrap {
.status-wrap {
display: flex;
padding: 30rpx 0;
align-items: center;
justify-content: center;
color: #333;
}
.item-wrap {
flex: 1;
text-align: center;
background: #f6f7f9;
padding: 20rpx 0;
.icon-block {
width: 60rpx;
height: 60rpx;
font-size: 60rpx;
margin: 4rpx auto;
position: relative;
&>image {
position: absolute;
top: 5%;
right: 5%;
width: 90%;
height: 90%;
z-index: 5;
}
.icon-shade {
width: 90%;
height: 90%;
position: absolute;
z-index: 4;
top: 5%;
right: 5%;
background: $base-color;
-webkit-mask: no-repeat center / contain;
}
}
.order-num {
position: absolute;
top: 0;
right: 0;
transform: translate(50%, -50%);
box-sizing: border-box;
color: #ffffff;
line-height: 1.2;
text-align: center;
font-size: 24rpx;
padding: 0 6rpx;
min-width: 30rpx;
border-radius: 16rpx;
height: 30rpx;
display: flex;
align-items: center;
justify-content: center;
}
.title {
font-size: 26rpx;
}
}
}
</style>

View File

@@ -1,365 +0,0 @@
<template>
<view class="diy-merch-list">
<x-skeleton type="list" :loading="loading" :configs="skeletonConfig" v-if="value.ornament.type == 'default'">
<view class="merch-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"
:style="itemCss" @tap.stop="handlerClick(item)">
<view class="merch-img">
<image class="cover-img" :src="$util.img(item.merch_image)" mode="widthFix"
@error="imgError(index)" />
</view>
<view class="info-wrap">
<text class="title">{{ item.merch_name }}</text>
<text class="desc">{{ item.desc }}</text>
<view class="read-wrap"></view>
</view>
</view>
</view>
</view>
</x-skeleton>
<view v-else :style="warpCss">
<scroll-view :scroll-x="true" :class="['merch-nav', 'singleSlide']">
<!-- #ifdef MP -->
<view class="uni-scroll-view-content">
<!-- #endif -->
<view class="merch-nav-item graphic" v-for="(item, index) in list" :key="index"
:style="{ width: 100 / 4 + '%' }" @tap.stop="handlerClick(item)">
<view class="graphic-img" v-if="value.mode != 'text'"
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
<image
:src="$util.img(item.merch_image) || $util.img('public/uniapp/default_img/goods.png')"
mode="aspectFill" :show-menu-by-longpress="true"
style="max-width: 80rpx; max-height: 80rpx; border-radius: 50rpx;" />
</view>
<text class="graphic-text"
style="font-size: 28rpx; font-weight: normal; color: rgb(48, 49, 51);">
{{ item.merch_name }}
</text>
</view>
<!-- #ifdef MP -->
</view>
<!-- #endif -->
</scroll-view>
</view>
</view>
</template>
<script>
// 文章
import DiyMinx from './minx.js'
export default {
name: 'diy-article',
props: {
value: {
type: Object
}
},
data() {
return {
list: [
/*{
merch_name:'品牌',
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
},
{
merch_name:'品牌',
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
},
{
merch_name:'品牌',
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
},
{
merch_name:'品牌',
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
},
{
merch_name:'品牌',
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
},
{
merch_name:'品牌',
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
},
{
merch_name:'品牌',
merch_image:'http://saas.cn//upload/4/common/images/20240824/20240824040223172448654356147.jpg'
}*/
],
loading: true,
skeletonConfig: {
gridRows: 1,
gridRowsGap: '40rpx',
headWidth: '160rpx',
headHeight: '160rpx',
textRows: 2
}
};
},
created() {
this.getList();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getList();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
console.log(obj)
return obj;
},
// 子项样式
itemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
}
return obj;
}
},
methods: {
getList() {
console.log(121)
var data = {
num: this.value.count
};
console.log(this.value)
if (this.value.sources == 'diy') {
data.num = 0;
data.merch_id_arr = this.value.merchIds.toString();
}
this.$api.sendRequest({
url: '/merch/api/merch/lists',
data: data,
success: res => {
if (res.code == 0 && res.data) {
let data = res.data;
this.list = data;
}
this.loading = false;
}
});
},
toDetail(item) {
this.$util.redirectTo('/pages_promotion/merch/detail', {
merch_id: item.merch_id
});
},
imgError(index) {
if (this.list[index]) this.list[index].merch_image = this.$util.getDefaultImage().article;
},
async handlerClick(item) {
await this.__$emitEvent({
eventName: 'merch-list-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item);
}
})
}
}
};
</script>
<style>
/* 单行滑动 */
.merch-nav.singleSlide>>>.uni-scroll-view-content {
display: flex;
}
</style>
<style lang="scss">
.merch-nav {
padding: 16rpx;
box-sizing: border-box;
&.singleSlide {
.merch-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.merch-nav-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
}
.merch-nav-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 14rpx 0;
box-sizing: border-box;
.graphic-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 {
.graphic-text {
padding-top: 0;
}
}
.graphic-img {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100rpx;
height: 100rpx;
font-size: 24rpx;
.tag {
position: absolute;
top: -10rpx;
right: -24rpx;
color: #fff;
border-radius: 24rpx;
border-bottom-left-radius: 0;
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: $color-sub;
}
}
}
}
.merch-wrap {
.list-wrap {
&.style-1 {
.item {
display: flex;
padding: 20rpx;
margin-top: 24rpx;
&:first-of-type {
margin-top: 0;
}
.merch-img {
margin-right: 20rpx;
width: 160rpx;
height: 160rpx;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
}
}
.info-wrap {
// flex: 1;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
.desc {
color: #888
}
.title {
font-weight: bold;
// margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 30rpx;
line-height: 1.5;
}
.abstract {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: $font-size-tag;
}
.read-wrap {
display: flex;
color: #999ca7;
justify-content: flex-start;
align-items: center;
margin-top: 10rpx;
line-height: 1;
text {
font-size: $font-size-tag;
}
.iconfont {
font-size: 36rpx;
vertical-align: bottom;
margin-right: 10rpx;
}
.category-icon {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: $base-color;
margin-right: 10rpx;
}
.date {
margin-left: 20rpx;
}
}
}
}
}
}
}
</style>

View File

@@ -1,369 +0,0 @@
<template>
<x-skeleton data-component-name="diy-notes" type="list" :loading="loading" :configs="skeletonConfig">
<view class="diy-notes" :style="{ backgroundColor: value.componentBgColor }">
<view class="diy-notes-top">
<view class="notes-title" :style="{ color: value.titleTextColor }">{{ value.title }}</view>
<view class="notes-more" @tap.stop="toMore()" :style="{ color: value.moreTextColor }">{{ value.more }}
</view>
</view>
<scroll-view class="diy-notes-box" scroll-x="true" show-scrollbar="true">
<view class="notes-box-item" v-for="(item, i) in dataList" :key="i" @tap.stop="handlerClick(item)" :style="notesItemStyle">
<view class="notes-item" v-if="item.status == 1">
<view class="notes-item-con">
<view class="notes-title">{{ item.note_title }}</view>
<view class="notes-highlights-list" v-if="value.notesLabel == 1 && item.goods_highlights">
<text class="color-base-bg" v-for="(labelItem, labelIndex) in item.label"
:key="labelIndex">{{ labelItem }}</text>
</view>
<view class="notes-intro">
<text class="notes-label color-base-text">#{{ item.note_type == 'goods_item' ? '单品介绍' :
'掌柜说' }}#</text>
{{ item.note_abstract }}
</view>
</view>
<view class="notes-img-wrap" :class="{ 'notes-img-wrap-list': item.cover_type == 1 }">
<image v-if="item.cover_type == 0" :src="$util.img(item.img)" @error="imageError(i)"
mode="aspectFill" class="notes-item-image" />
<image v-else v-for="(imgItem, imgIndex) in item.img" :key="imgIndex"
:src="$util.img(imgItem)" @error="imageError(i)" mode="aspectFit"
class="notes-item-image-li" />
</view>
<view class="notes-item-con">
<view class="notes-info"
v-if="(value.readNum == 1 && item.is_show_read_num == 1) || (value.uploadTime == 1 && item.is_show_release_time == 1)">
<view class="notes-num">
<text v-show="value.uploadTime == 1 && item.is_show_release_time == 1">{{
item.update_time_day }}</text>
</view>
<view class="notes-num">
<text v-show="value.readNum == 1 && item.is_show_read_num == 1">阅读 {{
item.initial_read_num + item.read_num }}</text>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<ns-login ref="login"></ns-login>
</view>
</x-skeleton>
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-notes',
props: {
value: {
type: Object
}
},
data() {
return {
loading: true,
skeletonConfig: {
itemDirection: 'column',
headWidth: '100%',
headHeight: '320rpx',
textRows: 2,
textWidth: ['100%', '80%']
},
dataList: [],
giveLikeFlag: false
};
},
created() {
this.getDataList();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getDataList();
}
},
computed: {
notesItemStyle() {
var css = '';
css += 'background-color:' + this.value.contentBgColor + ';';
if (this.value.elementAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
return css;
}
},
methods: {
refresh() {
this.getDataList();
},
getDataList() {
var data = {
num: this.value.count
};
if (this.value.sources == 'diy') {
data.num = 0;
data.note_id_arr = this.value.noteId.toString();
}
this.$api.sendRequest({
url: '/notes/api/notes/lists',
data: data,
success: res => {
var data = res.data;
this.dataList = [];
if (data) {
for (var i = 0; i < data.length; i++) {
var item = {};
item = data[i];
if (data[i].cover_type == 1) {
item.img = data[i].cover_img.split(',');
} else {
item.img = data[i].cover_img;
}
if (data[i].upload_time) {
item.update_time_day = this.$util.timeStampTurnTime(data[i].upload_time)
.split(' ')[0];
} else {
item.update_time_day = this.$util.timeStampTurnTime(data[i].create_time)
.split(' ')[0];
}
item.label = data[i].goods_highlights.split(',');
this.dataList.push(item);
}
}
this.loading = false;
}
});
},
toMore() {
this.$util.redirectTo('/pages_tool/store_notes/note_list');
},
toDetail(id) {
this.$util.redirectTo('/pages_tool/store_notes/note_detail', {
note_id: id
});
},
/* 点赞 */
giveLike(noteId, index) {
if (!this.storeToken) {
this.$refs.login.open(this.$util.INDEX_PAGE_URL);
return;
}
if (this.giveLikeFlag) return false;
this.giveLikeFlag = true;
var url = this.dataList[index].is_dianzan == 1 ? '/notes/api/record/delete' : '/notes/api/record/add';
this.$api.sendRequest({
url: url,
data: {
note_id: noteId
},
success: res => {
this.giveLikeFlag = false;
if (res.code == 0 && res.data > 0) {
if (this.noteType != 'goods_item')
this.dataList[index].dianzan_num = this.dataList[index].is_dianzan == 1 ? this.dataList[index].dianzan_num - 1 : this.dataList[index].dianzan_num + 1;
else {
this.dataList[index].dianzan_num = this.dataList[index].is_dianzan == 1 ? this.dataList[index].dianzan_num - 1 : this.dataList[index].dianzan_num + 1;
}
this.dataList[index].is_dianzan = this.dataList[index].is_dianzan == 1 ? 0 : 1;
} else {
this.$util.showToast({
title: res.message
});
}
}
});
},
imageError(index) {
this.dataList[index].img = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
async handlerClick(item) {
await this.__$emitEvent({
eventName: 'notes-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item.note_id);
}
})
}
}
};
</script>
<style lang="scss">
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
touch-action: none;
}
.diy-notes {
width: 100%;
box-sizing: border-box;
}
.diy-notes-top {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
.notes-title {
width: 70%;
font-size: 28rpx;
font-weight: 600;
}
.notes-more {
font-size: $font-size-tag;
color: #858585;
}
.notes-more::after {
font-family: 'iconfont';
content: '\e6a3';
font-size: $font-size-tag;
line-height: 1;
position: relative;
margin-left: 4rpx;
}
}
.diy-notes-box {
width: 100%;
padding: 30rpx 0 20rpx;
}
.notes-box-item {
width: calc(100% - 8rpx);
margin: 0 auto;
height: 100%;
margin-bottom: 30rpx;
border-radius: 10rpx;
overflow: hidden;
-moz-box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
-webkit-box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
.notes-item {
width: 100%;
height: 100%;
padding: 20rpx;
box-sizing: border-box;
}
.notes-img-wrap {
position: relative;
height: 300rpx;
.notes-item-image {
width: 100%;
height: 300rpx;
object-fit: cover;
}
.notes-label {
display: inline-block;
position: absolute;
left: 20rpx;
bottom: 20rpx;
max-width: calc(100vh - 40rpx);
background-color: #ffffff;
line-height: 36rpx;
padding: 0 10rpx 0 4rpx;
}
}
.notes-img-wrap-list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
height: auto;
image {
width: calc((100% - 40rpx) / 3);
height: 210rpx;
margin-top: 20rpx;
&:nth-child(-n + 3) {
margin-top: 0;
}
}
&:after {
content: '';
width: calc((100% - 40rpx) / 3);
}
}
.notes-item-con {
.notes-title {
font-size: 30rpx;
font-weight: 600;
line-height: 44rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.notes-highlights-list {
text {
display: inline-block;
color: #ffffff;
font-size: 24rpx;
line-height: 36rpx;
padding: 0 10rpx;
border-radius: 4rpx;
margin: 0 5rpx;
}
}
.notes-intro {
margin: 4rpx 0 8rpx;
line-height: 40rpx;
overflow: hidden;
text {
float: left;
margin-right: 16rpx;
}
}
.notes-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20rpx;
.notes-num {
>text {
display: flex;
align-items: center;
font-size: $font-size-tag;
color: #969799;
text.iconfont {
font-size: 26rpx;
margin-right: 6rpx;
}
}
}
}
}
}
</style>

View File

@@ -1,309 +0,0 @@
<template>
<view data-component-name="diy-notice" class="diy-notice">
<view :class="['notice', value.contentStyle]" :style="noticeWrapCss">
<image v-if="value.iconType == 'img'" class="notice-img" :src="$util.img(value.imageUrl)"
mode="heightFix" />
<diy-icon v-if="value.iconType == 'icon'" :icon="value.icon" :value="value.style ? value.style : 'null'"
:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
<view class="notice-xian"></view>
<view class="main-wrap">
<!-- 横向滚动 -->
<view class="horizontal-wrap" v-if="value.scrollWay == 'horizontal'">
<view class="marquee-wrap">
<view class="marquee" :style="marqueeStyle">
<text v-for="(item, index) in list" :key="index"
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
item.title }}</text>
</view>
<view class="marquee" :style="marqueeAgainStyle">
<text v-for="(item, index) in list" :key="index"
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
item.title }}</text>
</view>
</view>
</view>
<!-- 上下滚动 -->
<template v-if="value.scrollWay == 'upDown'">
<swiper :vertical="true" :duration="500" autoplay="true" circular="true">
<swiper-item v-for="(item, index) in list" :key="index" @touchmove.prevent.stop>
<text class="beyond-hiding using-hidden"
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">
{{ item.title }}
</text>
</swiper-item>
</swiper>
</template>
</view>
</view>
<view @touchmove.prevent.stop>
<uni-popup ref="noticePopup" type="center">
<view class="notice-popup">
<view class="head-wrap" @tap.stop="closeNoticePopup">
<text>公告</text>
<text class="iconfont icon-close"></text>
</view>
<view class="content-wrap">{{ notice }}</view>
<button type="primary" @tap.stop="closeNoticePopup">我知道了</button>
</view>
</uni-popup>
</view>
</view>
</template>
<script>
// 公告展示
import DiyMinx from './minx.js'
export default {
name: 'diy-notice',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
list: [],
notice: '', // 当前点击的弹框内容
marqueeWrapWidth: 0, // 容器宽度
marqueeWidth: 0, // 公告内容累加宽度
marqueeStyle: '', // 横向滚动样式
marqueeAgainStyle: '', // 横向滚动复制样式
time: 0, // 滚动完成时间
delayTime: 1000 // 动画延迟时间
};
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
if (this.value.sources == 'initial') this.getData();
}
},
created() { },
mounted() {
// 数据源:公告系统
if (this.value.sources == 'initial') {
this.getData();
} else {
this.list = this.value.list;
this.bindCrossSlipEvent();
}
},
computed: {
noticeWrapCss: function () {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
getData() {
var data = {
page_size: 0
};
if (this.value.sources == 'initial') {
data.page_size = this.value.count;
}
if (this.value.noticeIds.length) {
data.id_arr = this.value.noticeIds.toString();
data.page_size = 0;
}
this.$api.sendRequest({
url: '/api/notice/page',
data: data,
success: res => {
if (res.code == 0 && res.data) {
this.list = res.data.list;
this.bindCrossSlipEvent();
}
}
});
},
toLink(item) {
if (this.value.sources == 'initial') {
this.$util.redirectTo('/pages_tool/notice/detail', {
notice_id: item.id
});
} else if (!item) {
this.$util.redirectTo('/pages_tool/notice/list');
} else if (Object.keys(item.link).length > 1) {
this.$util.diyRedirectTo(item.link);
} else {
// 如果不设置跳转链接,则点击弹框展示
this.notice = item.title;
this.$refs.noticePopup.open();
}
},
closeNoticePopup() {
this.$refs.noticePopup.close();
},
// 绑定横向滚动事件
bindCrossSlipEvent() {
if (this.value.scrollWay == 'horizontal') {
setTimeout(() => {
this.$nextTick(() => {
uni.createSelectorQuery()
.in(this)
.select('.marquee-wrap')
.boundingClientRect(res => {
this.marqueeWrapWidth = res.width;
const query = uni.createSelectorQuery().in(this);
query
.select('.marquee')
.boundingClientRect(data => {
this.marqueeWidth = data.width + 30; // 30px是间距
this.time = Math.ceil(this.marqueeWidth * 10);
if (this.marqueeWrapWidth > this.marqueeWidth) {
this.marqueeStyle = `animation: none;`;
this.marqueeAgainStyle = 'display:none;';
} else {
this.marqueeStyle = `
width: ${this.marqueeWidth}px;
animation-duration: ${this.time}ms;
animation-delay: ${this.delayTime}ms;
`;
this.marqueeAgainStyle = `
width: ${this.marqueeWidth}px;
left: ${this.marqueeWidth}px;
animation-duration: ${this.time}ms;
animation-delay: ${this.delayTime}ms;
`;
}
})
.exec();
})
.exec();
});
});
}
}
}
};
</script>
<style lang="scss">
.notice {
height: 80rpx;
position: relative;
display: flex;
align-items: center;
overflow: hidden;
padding: 20rpx 0 20rpx 20rpx;
font-size: 70rpx;
box-sizing: border-box;
.notice-img {
width: 44rpx;
height: 80rpx;
}
.notice-xian {
width: 1rpx;
height: 26rpx;
background-color: #e4e4e4;
margin: 0 22rpx;
}
}
.main-wrap {
display: inline-block;
width: calc(100% - 115rpx);
position: relative;
}
swiper {
height: 50rpx;
}
.beyond-hiding {
display: inline-block;
width: 100%;
white-space: nowrap;
}
.notice-popup {
padding: 0 30rpx 40rpx;
background-color: #fff;
.head-wrap {
font-size: $font-size-toolbar;
line-height: 100rpx;
height: 100rpx;
display: block;
text-align: center;
position: relative;
border-bottom: 2rpx solid $color-line;
margin-bottom: 20rpx;
.iconfont {
position: absolute;
float: right;
right: 0;
font-size: $font-size-toolbar;
}
}
.content-wrap {
max-height: 600rpx;
overflow-y: auto;
}
button {
margin-top: 40rpx;
}
}
.horizontal-wrap {
height: 30px;
line-height: 30px;
position: relative;
overflow: hidden;
width: 100%;
}
.marquee-wrap {
display: inline-block;
width: 100%;
height: 100%;
vertical-align: middle;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.marquee {
display: flex;
position: absolute;
white-space: nowrap;
animation: marquee 0s 0s linear infinite;
text {
margin-left: 40rpx;
&:first-child {
margin-left: 0;
}
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>

View File

@@ -1,83 +0,0 @@
<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;">
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)"
v-if="item.link.wap_url" @tap.stop="handlerClick(item)"></image>
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-else
@tap.stop="handlerClick(item)"></image>
</view>
<!-- <view wx:if="{{!childitem.linkurl}}" bindtap="previewImg" data-src="{{childitem.imgurl}}" style="padding:{{diyitem.style.paddingtop==0?0:diyitem.style.paddingtop+'rpx'}} {{diyitem.style.paddingleft==0?0:diyitem.style.paddingleft+'rpx'}}" wx:for="{{diyitem.data}}" wx:for-index="childid" wx:for-item="childitem" wx:key="{{childid}}">
<image mode="widthFix" src="{{childitem.imgurl}}" style="{{bannerheight?'height:'+bannerheight+'px':'height:auto'}}"></image>
</view> -->
</view>
</view>
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-picture',
props: {
value: {
type: Object
}
},
data() {
return {
loading: true,
};
},
created() {
// this.getDataList();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
// this.getDataList();
}
},
mixins: [DiyMinx],
computed: {
style() {
var css = '';
css += 'background-color:' + this.value.contentBgColor + ';';
if (this.value.elementAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
return css;
}
},
methods: {
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
this.$refs.login.open(link.wap_url);
return;
}
}
this.$util.diyRedirectTo(link);
},
async handlerClick(item) {
await this.__$emitEvent({
eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
const link = item.link;
if (link?.name || link?.wap_url || link?.appid) {
this.redirectTo(item.link);
} else {
this.previewImg(item.imageUrl);
}
}
})
}
}
};
</script>
<style lang="scss"></style>

View File

@@ -1,590 +0,0 @@
<template>
<x-skeleton data-component-name="diy-pinfan" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-pinfan" :class="[value.template, value.style]" :style="warpCss">
<template v-if="value.template == 'row1-of1'">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" />
</view>
<view class="content"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="tag-wrap" v-if="value.groupStyle.control || value.saleStyle.control">
<view v-if="value.groupStyle.control"
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '', borderColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
<text class="iconfont icon-yonghu3"
:style="{ backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"></text>
<text>{{ item.pintuan_num }}人团</text>
</view>
<view v-if="value.saleStyle.control"
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '', borderColor: value.theme == 'diy' ? value.saleStyle.color : '' }">
<text>已拼{{ item.order_num }}</text>
</view>
</view>
<view class="price-wrap">
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.pintuan_price.split(".")[0] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
"." + item.pintuan_price.split(".")[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
¥{{ item.price }}
</view>
<button v-if="value.btnStyle.control" :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'
}">
<text class="text">{{ value.btnStyle.text }}</text>
<text class="fan" v-if="item.reward_type == 4">{{ item.reward_type_num }}积分</text>
<text class="fan" v-if="item.reward_type == 1 || item.reward_type == 2">{{
item.reward_type_num }}</text>
<text class="fan" v-if="item.reward_type == 3">返优惠券</text>
</button>
</view>
</view>
</view>
</template>
<template v-if="value.template == 'horizontal-slide'">
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" />
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view v-if="value.groupStyle.control" class="num">
<text class="content-tuan-box"
:style="{ color: value.theme == 'diy' ? value.groupStyle.color : '', backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
{{ item.pintuan_num }}人团
</text>
<text class="content-tuan-price"
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
v-if="item.reward_type == 4">
{{ item.reward_type_num }}积分
</text>
<text class="content-tuan-price"
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
v-if="item.reward_type == 1 || item.reward_type == 2">
{{ item.reward_type_num }}
</text>
<text class="content-tuan-price"
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
v-if="item.reward_type == 3">返优惠券</text>
</view>
<view class="price-wrap" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.pintuan_price.split('.')[0] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
"." + item.pintuan_price.split('.')[1] }}</text>
</view>
</view>
</view>
</scroll-view>
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
:style="{ height: swiperHeight }">
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
@tap.stop="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(dataIndex)" />
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view v-if="value.groupStyle.control" class="num">
<text class="content-tuan-box"
:style="{ color: value.theme == 'diy' ? value.groupStyle.color : '', backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColor : '' }">
{{ item.pintuan_num }}人团
</text>
<text class="content-tuan-price"
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
v-if="item.reward_type == 4">
{{ item.reward_type_num }}积分
</text>
<text class="content-tuan-price"
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
v-if="item.reward_type == 1 || item.reward_type == 2">
{{ item.reward_type_num }}
</text>
<text class="content-tuan-price"
:style="{ color: value.theme == 'diy' ? value.groupStyle.bgColor : '' }"
v-if="item.reward_type == 3">
返优惠券
</text>
</view>
<view class="price-wrap" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
item.pintuan_price.split('.')[1] }}</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{
"." + item.pintuan_price.split('.')[1] }}</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</x-skeleton>
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-pinfan',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
loading: true,
skeletonType: '',
skeletonConfig: {},
list: [],
page: 1
};
},
created() {
this.initSkeleton();
this.getData();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getData();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().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);
else
width = [screenWidth - (this.rpxUpPx(20) * 2) - (this.rpxUpPx(200) * 3) - (this.rpxUpPx(this.value
.margin.both * 2) * 2)] / 6;
obj += 'margin-left:' + width + "px;";
obj += 'margin-right:' + width + "px;";
}
return obj;
},
swiperHeight() {
if (this.value.nameLineMode == 'multiple')
return this.value.ornament.type == 'shadow' ? '444rpx' : '432rpx';
return this.value.ornament.type == 'shadow' ? '404rpx' : '396rpx';
}
},
methods: {
initSkeleton() {
if (this.value.template == 'row1-of1') {
// 单列 风格
this.skeletonType = 'list';
this.skeletonConfig = {
textRows: 3
};
} else if (this.value.template == 'horizontal-slide') {
// 横向滑动 风格
this.skeletonType = 'waterfall';
this.skeletonConfig = {
gridRows: 1,
gridColumns: 3,
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '80%']
};
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = screenWidth * parseInt(res) / 750;
return Math.floor(data);
},
getData() {
var data = {
num: this.value.count
};
if (this.value.sources == 'diy') {
data.num = 0;
data.goods_id_arr = this.value.goodsId.toString();
}
this.$api.sendRequest({
url: '/pinfan/api/goods/lists',
data: data,
success: res => {
if (res.code == 0 && res.data) {
this.list = res.data;
// 切屏滚动,每页显示固定数量
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
}
this.loading = false;
}
});
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/pinfan/detail', {
pinfan_id: e.pintuan_id
});
},
imageError(index) {
this.list[index].goods_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
}
};
</script>
<style lang="scss">
::v-deep .uni-scroll-view ::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
::v-deep ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
touch-action: none;
}
.diy-pinfan {
&.row1-of1 {
.item {
display: flex;
margin-bottom: 20rpx;
padding: 16rpx;
&.shadow {
margin: 8rpx 8rpx 20rpx 8rpx;
}
&:last-child {
margin-bottom: 0;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
image {
width: 200rpx;
}
}
.content {
flex: 1;
margin-left: 20rpx;
position: relative;
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 6rpx 0;
.goods-name {
line-height: 1.3;
}
.tag-wrap {
display: flex;
align-items: center;
margin-top: 4rpx;
>view {
height: 30rpx;
line-height: 30rpx;
border: 2rpx solid $base-color;
border-radius: 6rpx;
margin-right: 10rpx;
font-size: $font-size-activity-tag;
color: $base-color;
.iconfont {
display: inline-block;
width: 30rpx;
height: 30rpx;
font-size: $font-size-activity-tag;
color: #ffffff;
text-align: center;
margin-right: -6rpx;
background: $base-color;
}
text:last-child {
padding: 0 10rpx;
}
}
}
.price-wrap {
display: flex;
align-items: flex-end;
>view:last-of-type {
flex: 1;
}
.discount-price {
white-space: nowrap;
font-weight: bold;
.unit {
font-size: $font-size-tag;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
color: $base-color;
}
}
.original-price {
font-size: $font-size-tag;
color: $color-tip;
text-decoration: line-through;
margin: 0 10rpx 4rpx 10rpx;
}
}
button {
bottom: 10rpx;
height: 90rpx;
line-height: 40rpx;
padding: 0 16rpx;
margin: 0;
text-align: center;
background-color: $base-color;
color: #ffffff;
.text {
display: block;
margin-top: 6rpx;
font-size: $font-size-tag;
}
.fan {
font-size: $font-size-activity-tag;
}
}
}
}
}
&.horizontal-slide {
display: flex;
justify-content: space-around;
.scroll {
width: calc(100% - 40rpx);
padding: 20rpx;
line-height: 1;
white-space: nowrap;
.item.shadow {
margin-bottom: 8rpx;
}
}
.flex-between {
justify-content: space-between;
}
.item {
display: inline-block;
width: 200rpx;
overflow: hidden;
box-sizing: border-box;
&:nth-child(3n+3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
>image {
width: 200rpx;
}
}
.content {
padding: 10rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
&.multi-content {
height: 188rpx;
box-sizing: border-box;
}
.goods-name {
line-height: 1.3;
&.multi-hidden {
white-space: break-spaces;
}
}
.num {
margin-top: auto;
font-size: $font-size-activity-tag;
.content-tuan-box {
border-radius: 4rpx;
color: #ffffff;
background-color: $base-color;
padding: 6rpx;
}
.content-tuan-price {
border-radius: 4rpx;
padding: 4rpx 6rpx;
border: 2rpx solid $base-color;
color: $base-color;
margin-left: -2rpx;
}
}
.price-wrap {
white-space: nowrap;
margin-top: 10rpx;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
height: 32rpx;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
color: $base-color;
}
}
}
}
.swiper {
width: 100%;
white-space: nowrap;
padding: 20rpx;
box-sizing: border-box;
.swiper-item {
display: flex;
align-items: center;
}
.item {
width: 200rpx;
}
}
}
}
</style>

View File

@@ -1,812 +0,0 @@
<template>
<x-skeleton data-component-name="diy-pintuan" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-pintuan" :class="[value.template, value.style]" :style="warpCss">
<view v-if="value.titleStyle.isShow && list && list.length"
:class="[value.titleStyle.style, 'pintuan-head']" :style="{
backgroundImage:
'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')'
}">
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text"
:style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
{{ value.titleStyle.leftText }}
</view>
<image v-else class="left-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix" />
<view class="head-content">
<view class="img-warp">
<block v-if="headData && headData.member_list && headData.member_list.length">
<image v-for="(item, index) in headData.member_list" :key="index"
:src="$util.img(item.member_img || 'public/static/img/default_img/square.png')"
mode="aspectFill" @error="headImageError(index)" />
</block>
<block v-else>
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill" />
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill" />
<image :src="$util.img('public/static/img/default_img/square.png')" mode="aspectFill" />
</block>
</view>
<view :style="{ color: value.titleStyle.textColor }">
<text>{{ value.titleStyle.virtualNum || headData.pintuan_count }}</text>
<text>{{ value.titleStyle.style == 'style-2' ? '人参与' : '人拼团成功' }}</text>
</view>
</view>
<view class="head-right"
:style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }"
@tap.stop="$util.redirectTo('/pages_promotion/pintuan/list')">
<text>{{ value.titleStyle.more }}</text>
<text class="iconfont icon-right"></text>
</view>
</view>
<template v-if="value.template == 'row1-of1'">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" />
</view>
<view class="content"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="tag-wrap" v-if="value.groupStyle.control || value.saleStyle.control">
<view v-if="value.groupStyle.control" :style="{
color: value.theme == 'diy' ? value.groupStyle.bgColorStart : '',
borderColor: value.theme == 'diy' ? value.groupStyle.bgColorStart : ''
}">
<text class="iconfont icon-yonghu3"
:style="{ backgroundColor: value.theme == 'diy' ? value.groupStyle.bgColorStart : '' }"></text>
<text>{{ item.pintuan_num }}人团</text>
</view>
<view v-if="value.saleStyle.control"
:style="{ color: value.theme == 'diy' ? value.saleStyle.color : '', borderColor: value.theme == 'diy' ? value.saleStyle.color : '' }">
<text>已拼{{ item.order_num }}</text>
</view>
</view>
<view class="bottom-wrap">
<view class="price-wrap">
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ item.pintuan_price.split('.')[0] }}
</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ '.' + item.pintuan_price.split('.')[1] }}
</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl"
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
¥{{ item.price }}
</view>
</view>
<button v-if="value.btnStyle.control" :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'
}">
{{ value.btnStyle.text }}
</button>
</view>
</view>
</view>
</template>
<template v-if="value.template == 'horizontal-slide'">
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" />
<view v-if="value.groupStyle.control && value.style == 'style-1'" class="num" :style="{
color: value.theme == 'diy' ? value.groupStyle.color : '',
background: value.theme == 'diy' ? 'linear-gradient(to right,' + value.groupStyle.bgColorStart + ',' + value.groupStyle.bgColorEnd + ')' : ''
}">
{{ item.pintuan_num }}人团
</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
<view
v-if="value.goodsNameStyle.control && (value.style == 'style-1' || value.style == 'style-3')"
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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="price-wrap" v-if="value.priceStyle.mainControl && value.style != 'style-3'">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ item.pintuan_price.split('.')[0] }}
</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ '.' + item.pintuan_price.split('.')[1] }}
</text>
</view>
<view class="other-info-wrap" v-if="value.style == 'style-3'">
<view class="price-wrap" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ item.pintuan_price.split('.')[0] }}
</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ '.' + item.pintuan_price.split('.')[1] }}
</text>
</view>
<view class="sale-action">去参团</view>
</view>
<view class="sale-num" v-if="value.style == 'style-2'">已拼{{ item.sale_num }}</view>
</view>
</view>
</scroll-view>
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
:style="{ height: swiperHeight }">
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
@tap.stop="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(dataIndex)" />
<view v-if="value.groupStyle.control && value.style != 'style-2'" class="num" :style="{
color: value.theme == 'diy' ? value.groupStyle.color : '',
background: value.theme == 'diy' ? 'linear-gradient(to right,' + value.groupStyle.bgColorStart + ',' + value.groupStyle.bgColorEnd + ')' : ''
}">
{{ item.pintuan_num }}人团
</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
<view v-if="value.goodsNameStyle.control && value.style != 'style-2'" 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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="price-wrap" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ item.pintuan_price.split('.')[0] }}
</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ '.' + item.pintuan_price.split('.')[1] }}
</text>
</view>
<view class="sale-num" v-if="value.style == 'style-2'">已拼{{ item.sale_num }}</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</x-skeleton>
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-pintuan',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
loading: true,
skeletonType: '',
skeletonConfig: {},
list: [],
page: 1,
scrollWidth: 0,
headData: []
};
},
created() {
this.initSkeleton();
this.getData();
this.getHeadData();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getData();
this.getHeadData();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().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);
else if (this.value.template == 'horizontal-slide' && this.value.style == 'style-2')
width = [screenWidth - this.rpxUpPx(212) * 3 - this.rpxUpPx(this.value.margin.both * 2) * 2] / 6;
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
obj += 'margin-left:' + width + 'px;';
obj += 'margin-right:' + width + 'px;';
}
return obj;
},
swiperHeight() {
if (this.value.template == 'horizontal-slide' && this.value.style == 'style-2') {
if (this.value.nameLineMode == 'multiple') {
if (this.value.ornament.type == 'shadow') return '360rpx';
else return '342rpx';
}
if (this.value.ornament.type == 'shadow') return '324rpx';
else return '308rpx';
} else {
if (this.value.nameLineMode == 'multiple') {
if (this.value.ornament.type == 'shadow') return '400rpx';
else return '382rpx';
}
if (this.value.ornament.type == 'shadow') return '364rpx';
else return '348rpx';
}
}
},
methods: {
initSkeleton() {
if (this.value.template == 'row1-of1') {
// 单列 风格
this.skeletonType = 'list';
this.skeletonConfig = {
textRows: 3
};
} else if (this.value.template == 'horizontal-slide') {
// 横向滑动 风格
this.skeletonType = 'waterfall';
this.skeletonConfig = {
gridRows: 1,
gridColumns: 3,
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '80%']
};
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},
getHeadData() {
var data = {
num: 3
};
this.$api.sendRequest({
url: '/pintuan/api/order/pintuanmember',
data: data,
success: res => {
if (res.code == 0 && res.data) {
this.headData = res.data;
}
}
});
},
getData() {
var data = {
num: this.value.count
};
if (this.value.sources == 'diy') {
data.num = 6;
data.goods_id_arr = this.value.goodsId.toString();
}
this.$api.sendRequest({
url: '/pintuan/api/goods/lists',
data: data,
success: res => {
if (res.code == 0 && res.data) {
this.list = res.data;
// 切屏滚动,每页显示固定数量
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
}
this.loading = false;
}
});
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/pintuan/detail', {
pintuan_id: e.pintuan_id
});
},
imageError(index) {
if (this.list[index]) this.list[index].goods_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
headImageError(index) {
this.headData.member_list[index].member_img = this.$util.img('public/static/img/default_img/square.png');
this.$forceUpdate();
}
}
};
</script>
<style lang="scss">
::v-deep .uni-scroll-view ::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
::v-deep ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
touch-action: none;
}
.diy-pintuan {
overflow: hidden;
.pintuan-head {
padding: 0 24rpx;
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20rpx;
border-radius: 18rpx 18rpx 0 0;
.left-img {
width: 174rpx;
height: 40rpx;
}
.head-content {
display: flex;
align-items: center;
margin-left: 50rpx;
margin-right: auto;
color: #fff;
.img-warp {
position: relative;
margin-right: 8rpx;
line-height: 1;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 2rpx solid #ff3d3d;
margin-left: -14rpx;
}
&:after {
content: '';
width: 2rpx;
height: 28rpx;
background-color: #fff;
position: absolute;
left: -32rpx;
top: 50%;
transform: translateY(-50%);
}
}
}
.head-right {
display: flex;
align-items: center;
font-size: $font-size-sub;
color: #fff;
line-height: 1;
}
&.style-2 {
.head-right {
display: flex;
align-items: center;
justify-content: center;
height: 36rpx;
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
border-radius: 24rpx;
padding: 2rpx;
text:nth-child(1) {
position: relative;
left: 6rpx;
transform: scale(0.9);
}
text:nth-child(2) {
padding: 6rpx 4rpx 4rpx;
background-color: #fff;
color: #ffbd5b;
border-radius: 50%;
transform: scale(0.6);
font-weight: bold;
line-height: 1;
}
}
}
}
&.row1-of1 {
.item {
display: flex;
margin-bottom: 20rpx;
padding: 16rpx;
&.shadow {
margin: 8rpx 8rpx 20rpx 8rpx;
}
&:last-child {
margin-bottom: 0;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
image {
width: 200rpx;
}
}
.content {
flex: 1;
margin-left: 20rpx;
position: relative;
display: flex;
justify-content: space-between;
flex-direction: column;
padding: 6rpx 0;
.tag-wrap {
display: flex;
align-items: center;
>view {
height: 30rpx;
line-height: 30rpx;
border: 2rpx solid $base-color;
border-radius: 6rpx;
margin-right: 10rpx;
font-size: $font-size-activity-tag;
color: $base-color;
.iconfont {
display: inline-block;
width: 30rpx;
height: 30rpx;
font-size: $font-size-activity-tag;
color: #ffffff;
text-align: center;
margin-right: -6rpx;
background: $base-color;
}
text:last-child {
padding: 0 10rpx;
}
}
}
.goods-name {
line-height: 1.3;
}
.bottom-wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.price-wrap {
overflow: hidden;
width: 260rpx;
display: flex;
align-items: flex-end;
flex-wrap: wrap;
>view:last-of-type {
flex: 1;
}
.discount-price {
white-space: nowrap;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
color: var(--price-color);
}
.price {
font-size: $font-size-toolbar;
color: var(--price-color);
}
}
.original-price {
font-size: $font-size-tag;
color: $color-tip;
line-height: 1;
text-decoration: line-through;
margin: 0 10rpx;
}
}
button {
margin-right: 20rpx;
min-width: 112rpx;
height: 52rpx;
line-height: 52rpx;
padding: 0 20rpx;
margin: 0;
color: var(--btn-text-color);
background-color: $base-color;
color: #fff;
font-size: 24rpx;
}
}
}
}
&.horizontal-slide {
display: flex;
flex-direction: column;
.flex-between {
justify-content: space-between;
}
.scroll {
width: calc(100% - 40rpx);
padding: 20rpx;
line-height: 1;
white-space: nowrap;
.item.shadow {
margin-bottom: 4rpx;
}
}
.item {
display: inline-block;
width: 200rpx;
overflow: hidden;
box-sizing: border-box;
flex-shrink: 0;
&:nth-child(3n + 3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
>image {
width: 200rpx;
}
.num {
width: 80rpx;
position: absolute;
bottom: 0;
font-size: $font-size-tag;
line-height: 1;
color: #ffffff;
text-align: center;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
padding: 10rpx;
transform: translate(50%);
background: $base-color;
}
}
.content {
padding: 10rpx 10rpx 16rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
&.multi-content {
height: 142rpx;
box-sizing: border-box;
}
.goods-name {
line-height: 1.3;
font-size: $font-size-base;
&.multi-hidden {
white-space: break-spaces;
}
}
.price-wrap {
line-height: 1;
white-space: nowrap;
margin-top: 10rpx;
font-weight: bold;
.unit {
font-size: $font-size-tag;
height: 32rpx;
color: var(--price-color);
}
.price {
font-size: $font-size-toolbar;
color: var(--price-color);
}
}
}
}
.swiper {
padding: 20rpx;
width: 100%;
white-space: nowrap;
box-sizing: border-box;
.swiper-item {
display: flex;
align-items: center;
}
.item {
width: 200rpx;
box-sizing: border-box;
}
}
&.style-2 {
.item {
width: 212rpx;
&:nth-child(3n + 3) {
width: 210rpx;
}
.img-wrap {
width: 212rpx;
height: 212rpx;
>image {
width: 212rpx !important;
}
}
.price-wrap {
text-align: center;
margin-top: 0 !important;
margin-bottom: 10rpx;
}
.sale-num {
text-align: center;
color: #666666;
line-height: 1;
}
}
.scroll {
padding: 0;
width: auto;
}
.swiper {
padding: 0;
}
}
&.style-3 {
.other-info-wrap {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.sale-action {
font-size: $font-size-tag;
width: 94rpx;
height: 44rpx;
background: linear-gradient(131deg, #3edb73 0%, #1db576 100%);
border-radius: 8rpx;
color: #fff;
text-align: center;
line-height: 44rpx;
transform: scale(0.9);
}
}
}
}
</style>

View File

@@ -1,468 +0,0 @@
<template>
<x-skeleton data-component-name="diy-presale" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-presale" v-if="list.length" :class="[value.template, value.style]" :style="warpCss">
<template v-if="value.template == 'row1-of1'">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="handlerClick(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" />
</view>
<view class="content"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.btnStyle.control">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ showPrice(item).split('.')[0] }}
</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ '.' + showPrice(item).split('.')[1] }}
</text>
</view>
<button v-if="value.btnStyle.control" :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'
}">
{{ value.btnStyle.text }}
</button>
</view>
</view>
</template>
<template v-if="value.template == 'horizontal-slide'">
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
<view class="item" v-for="(item, index) in list" :key="index" @tap.stop="handlerClick(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(index)" />
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ showPrice(item).split('.')[0] }}
</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ '.' + showPrice(item).split('.')[1] }}
</text>
</view>
</view>
</view>
</scroll-view>
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper"
:style="{ height: swiperHeight }">
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex"
:class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
@tap.stop="handlerClick(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix"
@error="imageError(dataIndex)" />
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl">
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ showPrice(item).split('.')[0] }}
</text>
<text class="unit price-style small"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">
{{ '.' + showPrice(item).split('.')[1] }}
</text>
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</x-skeleton>
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-presale',
props: {
value: {
type: Object
}
},
data() {
return {
loading: true,
skeletonType: '',
skeletonConfig: {},
list: [],
page: 1
};
},
created() {
this.initSkeleton();
this.getData();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getData();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().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);
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
obj += 'margin-right:' + width + 'px;';
obj += 'margin-left:' + width + 'px;';
}
return obj;
},
swiperHeight() {
if (this.value.nameLineMode == 'multiple') {
return this.value.ornament.type == 'shadow' ? '390rpx' : '382rpx';
}
return this.value.ornament.type == 'shadow' ? '364rpx' : '348rpx';
}
},
methods: {
initSkeleton() {
if (this.value.template == 'row1-of1') {
// 单列 风格
this.skeletonType = 'list';
this.skeletonConfig = {
textRows: 2
};
} else if (this.value.template == 'horizontal-slide') {
// 横向滑动 风格
this.skeletonType = 'waterfall';
this.skeletonConfig = {
gridRows: 1,
gridColumns: 3,
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '80%']
};
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},
getData() {
var data = {
num: this.value.count
};
if (this.value.sources == 'diy') {
data.num = 0;
data.goods_id_arr = this.value.goodsId.toString();
}
this.$api.sendRequest({
url: '/presale/api/goods/lists',
data: data,
success: res => {
if (res.code == 0 && res.data) {
this.list = res.data;
// 切屏滚动,每页显示固定数量
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
}
this.loading = false;
}
});
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/presale/detail', {
id: e.presale_id
});
},
imageError(index) {
this.list[index].goods_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
},
showPrice(data) {
let price = data.price;
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
return price;
},
async handlerClick(item) {
await this.__$emitEvent({
eventName: 'presale-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item);
}
})
}
}
};
</script>
<style lang="scss">
::v-deep .uni-scroll-view ::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
::v-deep ::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
touch-action: none;
}
.diy-presale {
&.row1-of1 {
.item {
display: flex;
margin-bottom: 20rpx;
padding: 16rpx;
&.shadow {
margin: 8rpx 8rpx 20rpx 8rpx;
}
&:last-child {
margin-bottom: 0;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
>image {
width: 200rpx;
}
}
.content {
flex: 1;
margin-left: 20rpx;
position: relative;
padding: 6rpx 0;
.goods-name {
line-height: 1.5;
}
.discount-price {
white-space: nowrap;
font-weight: bold;
position: absolute;
bottom: 10rpx;
left: 0;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
color: $base-color;
}
}
button {
position: absolute;
bottom: 10rpx;
right: 20rpx;
margin: 0;
padding: 0 20rpx;
background-color: $base-color;
color: #fff;
min-width: 112rpx;
height: 52rpx;
line-height: 52rpx;
font-size: $font-size-tag;
}
}
}
}
&.horizontal-slide {
.scroll {
width: calc(100% - 40rpx);
padding: 20rpx;
line-height: 1;
white-space: nowrap;
.item.shadow {
margin-bottom: 8rpx;
}
}
.flex-between {
justify-content: space-between;
}
.item {
display: inline-block;
width: 200rpx;
overflow: hidden;
box-sizing: border-box;
&:nth-child(3n + 3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
margin: 0 auto;
>image {
width: 200rpx;
}
}
.content {
padding: 10rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
&.multi-content {
height: 134rpx;
box-sizing: border-box;
}
.goods-name {
line-height: 1.3;
&.multi-hidden {
white-space: break-spaces;
}
}
.discount-price {
white-space: nowrap;
margin-top: auto;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
color: $base-color;
}
}
}
}
.swiper {
padding: 20rpx;
width: 100%;
white-space: nowrap;
box-sizing: border-box;
.swiper-item {
display: flex;
align-items: center;
}
.item {
width: 200rpx;
}
}
}
}
</style>

View File

@@ -1,128 +0,0 @@
<template>
<view data-component-name="diy-quick-nav" :style="componentStyle">
<scroll-view class="quick-nav" scroll-x="true">
<!-- #ifdef MP -->
<view class="uni-scroll-view-content">
<!-- #endif -->
<view class="quick-nav-item" v-for="(item, index) in value.list" :key="index"
@tap.stop="handlerClick(item)"
:style="{ background: 'linear-gradient(to right,' + item.bgColorStart ? item.bgColorStart : '' + ',' + item.bgColorEnd ? item.bgColorEnd : '' + ')' }">
<view class="quick-img" v-if="item.imageUrl || item.icon">
<image v-if="item.iconType == 'img'"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
mode="heightFix" :show-menu-by-longpress="true"></image>
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null" :style="{ fontSize: '60rpx' }"></diy-icon>
</view>
<text class="quick-text" :style="{ color: item.textColor }">{{ item.title }}</text>
</view>
<!-- #ifdef MP -->
</view>
<!-- #endif -->
</scroll-view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
import DiyMinx from './minx.js'
export default {
name: 'diy-quick-nav',
props: {
value: {
type: Object
}
},
data() {
return {};
},
created() { },
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
computed: {
componentStyle() {
var css = '';
css += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
css += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
css += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
return css;
}
},
methods: {
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
this.$refs.login.open(link.wap_url);
return;
}
}
this.$util.diyRedirectTo(link);
},
async handlerClick(item) {
await this.__$emitEvent({
eventName: 'quick-nav-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.redirectTo(item.link);
}
})
}
}
};
</script>
<style>
.quick-nav>>>.uni-scroll-view-content {
display: flex;
}
</style>
<style lang="scss">
.quick-nav {
.quick-nav-item {
display: flex;
align-items: center;
padding: 0 18rpx;
box-sizing: border-box;
flex-shrink: 0;
border-radius: 40rpx;
margin-right: 20rpx;
height: 48rpx;
&:first-of-type {
padding-left: 12rpx;
}
&:last-child {
margin-right: 0;
}
.quick-img {
margin-right: 6rpx;
height: 30rpx;
line-height: 1;
image {
width: 30rpx;
height: 30rpx;
}
}
.quick-text {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
font-size: 24rpx;
line-height: 1;
}
}
}
</style>

View File

@@ -1,541 +0,0 @@
<template>
<view data-component-name="diy-rubik-cube">
<!-- 自定义 -->
<view v-if="value.mode == 'custom-rubik-cube'">
<view style="position: relative;"><rich-text :nodes="customHtml"></rich-text></view>
</view>
<view v-else :class="['rubik-cube', value.mode]" :style="rubikCubeWrapCss">
<!-- 1左2右 -->
<template v-if="value.mode == 'row1-lt-of2-rt'">
<view class="template-left">
<view :class="['item', value.mode]" @tap.stop="handlerClick(value.list[0].link, value.list[0].imageUrl)"
:style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }">
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'"
:style="list[0].pageItemStyle" :show-menu-by-longpress="true" />
</view>
</view>
<view class="template-right">
<template v-for="(item, index) in list">
<template v-if="index > 0">
<view :key="index" :class="['item', value.mode]" @tap.stop="handlerClick(item.link, item.imageUrl)"
:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: item.imgWidth, height: item.imgHeight + 'px' }">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
:style="item.pageItemStyle" :show-menu-by-longpress="true" />
</view>
</template>
</template>
</view>
</template>
<!-- 1左3右 -->
<template v-else-if="value.mode == 'row1-lt-of1-tp-of2-bm'">
<view class="template-left">
<view :class="['item', value.mode]"
:style="{ marginRight: value.imageGap * 2 + 'rpx', width: list[0].imgWidth, height: list[0].imgHeight + 'px' }"
@tap.stop="handlerClick(value.list[0].link, value.list[0].imageUrl)">
<image :src="$util.img(value.list[0].imageUrl)" :mode="list[0].imageMode || 'scaleToFill'"
:style="list[0].pageItemStyle" :show-menu-by-longpress="true" />
</view>
</view>
<view class="template-right">
<view :class="['item', value.mode]"
:style="{ marginBottom: value.imageGap * 2 + 'rpx', width: list[1].imgWidth, height: list[1].imgHeight + 'px' }"
@tap.stop="handlerClick(value.list[1].link, value.list[1].imageUrl)">
<image :src="$util.img(value.list[1].imageUrl)" :mode="list[1].imageMode || 'scaleToFill'"
:style="list[1].pageItemStyle" :show-menu-by-longpress="true" />
</view>
<view class="template-bottom">
<template v-for="(item, index) in list">
<template v-if="index > 1">
<view :key="index" :class="['item', value.mode]" @tap.stop="handlerClick(item.link, item.imageUrl)" :style="{
marginRight: value.imageGap * 2 + 'rpx',
width: item.imgWidth,
height: item.imgHeight + 'px'
}">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
:style="item.pageItemStyle" :show-menu-by-longpress="true" />
</view>
</template>
</template>
</view>
</view>
</template>
<template v-else>
<view :class="['item', value.mode]" v-for="(item, index) in list" :key="index"
@tap.stop="handlerClick(item.link, item.imageUrl)"
:style="{ marginRight: value.imageGap * 2 + 'rpx', marginBottom: value.imageGap * 2 + 'rpx', width: item.widthStyle, height: item.imgHeight + 'px' }">
<image :src="$util.img(item.imageUrl)" :mode="item.imageMode || 'scaleToFill'"
:style="item.pageItemStyle" :show-menu-by-longpress="true" />
</view>
</template>
</view>
</view>
</template>
<script>
// 魔方、橱窗
import htmlParser from '@/common/js/html-parser';
import DiyMinx from './minx.js'
export default {
name: 'diy-rubik-cube',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
customHtml: ''
};
},
created() {
if (this.value.mode == 'custom-rubik-cube') {
this.value.diyHtml = this.value.diyHtml.replace(/&quot;/g, '"');
this.customHtml = htmlParser(this.value.diyHtml);
} else {
var singleRow = {
'row1-of2': {
ratio: 2,
width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 2) + 'px) / 2)'
},
'row1-of3': {
ratio: 3,
width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 4) + 'px) / 3)'
},
'row1-of4': {
ratio: 4,
width: 'calc((100% - ' + uni.upx2px(this.value.imageGap * 6) + 'px) / 4)'
}
};
if (singleRow[this.value.mode]) {
this.calcSingleRow(singleRow[this.value.mode]);
} else if (this.value.mode == 'row2-lt-of2-rt') {
this.calcFourSquare();
} else if (this.value.mode == 'row1-lt-of2-rt') {
this.calcRowOneLeftOfTwoRight();
} else if (this.value.mode == 'row1-tp-of2-bm') {
this.calcRowOneTopOfTwoBottom();
} else if (this.value.mode == 'row1-lt-of1-tp-of2-bm') {
this.calcRowOneLeftOfOneTopOfTwoBottom();
}
}
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
computed: {
list() {
var arr = JSON.parse(JSON.stringify(this.value.list));
arr.forEach((item, index) => {
item.pageItemStyle = this.countBorderRadius(this.value.mode, index);
});
return arr;
},
rubikCubeWrapCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
/**
* 魔方:单行多个,平分宽度
* 公式:
* 宽度:屏幕宽度/2示例375/2=187.5
* 比例:原图高/原图宽示例322/690=0.46
* 高度:宽度*比例示例187.5*0.46=86.25
*/
calcSingleRow(params) {
uni.getSystemInfo({
success: res => {
let maxHeight = 0;
this.list.forEach((item, index) => {
var ratio = item.imgHeight / item.imgWidth;
let width = res.windowWidth - uni.upx2px(this.value.margin.both *
2); // 减去左右间距
if (this.value.imageGap > 0) {
width -= uni.upx2px(params.ratio * this.value.imageGap * 2); // 减去间隙
}
item.imgWidth = width / params.ratio;
item.imgHeight = item.imgWidth * ratio;
if (maxHeight == 0 || maxHeight < item.imgHeight) maxHeight = item
.imgHeight;
})
this.list.forEach((item, index) => {
item.widthStyle = params.width;
item.imgHeight = maxHeight;
});
}
})
},
/**
* 魔方四方型各占50%
*/
calcFourSquare() {
uni.getSystemInfo({
success: res => {
let maxHeightFirst = 0;
let maxHeightTwo = 0;
this.list.forEach((item, index) => {
var ratio = item.imgHeight / item.imgWidth;
item.imgWidth = res.windowWidth;
item.imgWidth -= uni.upx2px(this.value.margin.both * 4);
if (this.value.imageGap > 0) {
item.imgWidth -= uni.upx2px(this.value.imageGap * 2);
}
item.imgWidth = item.imgWidth / 2;
item.imgHeight = item.imgWidth * ratio;
// 获取每行最大高度
if (index <= 1) {
if (maxHeightFirst == 0 || maxHeightFirst < item.imgHeight) {
maxHeightFirst = item.imgHeight;
}
} else if (index > 1) {
if (maxHeightTwo == 0 || maxHeightTwo < item.imgHeight) {
maxHeightTwo = item.imgHeight;
}
}
});
this.list.forEach((item, index) => {
item.imgWidth = 'calc((100% - ' + uni.upx2px(this.value.imageGap * 2) +
'px) / 2)';
item.widthStyle = item.imgWidth;
if (index <= 1) {
item.imgHeight = maxHeightFirst;
} else if (index > 1) {
item.imgHeight = maxHeightTwo;
}
});
}
});
},
/**
* 魔方1左2右
*/
calcRowOneLeftOfTwoRight() {
let rightHeight = 0; // 右侧两图平分高度
let divide = 'left'; // 划分规则leftright
if (this.list[1].imgWidth === this.list[2].imgWidth) divide = 'right';
uni.getSystemInfo({
success: res => {
this.list.forEach((item, index) => {
if (index == 0) {
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
item.imgWidth = item.imgWidth / 2;
item.imgHeight = item.imgWidth * ratio;
rightHeight = (item.imgHeight - uni.upx2px(this.value.imageGap * 2)) / 2;
item.imgWidth += 'px';
} else {
item.imgWidth = this.list[0].imgWidth;
item.imgHeight = rightHeight;
}
});
}
});
},
/**
* 魔方1上2下
*/
calcRowOneTopOfTwoBottom() {
var maxHeight = 0;
uni.getSystemInfo({
success: res => {
this.list.forEach((item, index) => {
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
if (index == 0) {
item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4);
} else if (index > 0) {
item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
item.imgWidth = item.imgWidth / 2;
}
item.imgHeight = item.imgWidth * ratio;
// 获取最大高度
if (index > 0 && (maxHeight == 0 || maxHeight < item.imgHeight))
maxHeight = item.imgHeight;
});
this.list.forEach((item, index) => {
item.imgWidth += 'px';
item.widthStyle = item.imgWidth;
if (index > 0) item.imgHeight = maxHeight;
});
}
});
},
/**
* 魔方1左3右
*/
calcRowOneLeftOfOneTopOfTwoBottom() {
uni.getSystemInfo({
success: res => {
this.list.forEach((item, index) => {
// 左图
if (index == 0) {
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
item.imgWidth = res.windowWidth - uni.upx2px(this.value.margin.both * 4) - uni.upx2px(this.value.imageGap * 2);
item.imgWidth = item.imgWidth / 2;
item.imgHeight = item.imgWidth * ratio;
} else if (index == 1) {
item.imgWidth = this.list[0].imgWidth;
item.imgHeight = (this.list[0].imgHeight - uni.upx2px(this.value.imageGap * 2)) / 2;
} else if (index > 1) {
item.imgWidth = (this.list[0].imgWidth - uni.upx2px(this.value.imageGap * 2)) / 2;
item.imgHeight = this.list[1].imgHeight;
}
});
this.list.forEach((item, index) => {
item.imgWidth += 'px';
item.imgHeight;
});
}
});
},
countBorderRadius(type, index) {
var obj = '';
if (this.value.elementAngle == 'right') {
return obj;
}
var defaultData = {
'row1-lt-of2-rt': [
['border-top-right-radius', 'border-bottom-right-radius'],
['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
],
'row1-lt-of1-tp-of2-bm': [
['border-top-right-radius', 'border-bottom-right-radius'],
['border-top-left-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
['border-radius'],
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
],
'row1-tp-of2-bm': [
['border-bottom-left-radius', 'border-bottom-right-radius'],
['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
],
'row2-lt-of2-rt': [
['border-top-right-radius', 'border-bottom-left-radius', 'border-bottom-right-radius'],
['border-top-left-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
['border-top-left-radius', 'border-bottom-right-radius', 'border-top-right-radius'],
['border-top-left-radius', 'border-bottom-left-radius', 'border-top-right-radius']
],
'row1-of4': [
['border-top-right-radius', 'border-bottom-right-radius'],
['border-radius'],
['border-radius'],
['border-top-left-radius', 'border-bottom-left-radius']
],
'row1-of3': [
['border-top-right-radius', 'border-bottom-right-radius'],
['border-radius'],
['border-top-left-radius', 'border-bottom-left-radius']
],
'row1-of2': [
['border-top-right-radius', 'border-bottom-right-radius'],
['border-top-left-radius', 'border-bottom-left-radius']
]
};
defaultData[type][index].forEach((item, index) => {
// obj += item + ':' + this.value.aroundRadius * 2 + 'rpx;';
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
});
return obj;
},
async handlerClick(link, imageUrl) {
await this.__$emitEvent({
eventName: 'rubik-cube-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
if (link?.name || link?.wap_url || link?.appid) {
this.$util.diyRedirectTo(link);
} else if (imageUrl){
this.previewImg(imageUrl);
}
}
})
}
}
};
</script>
<style lang="scss">
.rubik-cube {
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.rubik-cube .item {
text-align: center;
line-height: 0;
overflow: hidden;
}
.rubik-cube .item image {
width: 100%;
max-width: 100%;
height: 100%;
}
// 一行两个
.rubik-cube .item.row1-of2 {
box-sizing: border-box;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.rubik-cube .item.row1-of2:nth-child(1) {
margin-left: 0 !important;
}
.rubik-cube .item.row1-of2:nth-child(2) {
margin-right: 0 !important;
}
// 一行三个
.rubik-cube .item.row1-of3 {
box-sizing: border-box;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.rubik-cube .item.row1-of3:nth-child(1) {
margin-left: 0 !important;
}
.rubik-cube .item.row1-of3:nth-child(3) {
margin-right: 0 !important;
}
// 一行四个
.rubik-cube .item.row1-of4 {
box-sizing: border-box;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.rubik-cube .item.row1-of4:nth-child(1) {
margin-left: 0 !important;
}
.rubik-cube .item.row1-of4:nth-child(4) {
margin-right: 0 !important;
}
// 两左两右
.rubik-cube .item.row2-lt-of2-rt {
// width: 50%;
display: inline-block;
box-sizing: border-box;
}
.rubik-cube .item.row2-lt-of2-rt:nth-child(1) {
margin-left: 0 !important;
margin-top: 0 !important;
}
.rubik-cube .item.row2-lt-of2-rt:nth-child(2) {
margin-right: 0 !important;
margin-top: 0 !important;
}
.rubik-cube .item.row2-lt-of2-rt:nth-child(3) {
margin-left: 0 !important;
margin-bottom: 0 !important;
}
.rubik-cube .item.row2-lt-of2-rt:nth-child(4) {
margin-right: 0 !important;
margin-bottom: 0 !important;
}
// 一左两右
.rubik-cube .template-left,
.rubik-cube .template-right {
// width: 50%;
box-sizing: border-box;
}
.rubik-cube .template-left .item.row1-lt-of2-rt:nth-child(1) {
margin-bottom: 0;
}
.rubik-cube .template-right .item.row1-lt-of2-rt:nth-child(2) {
margin-bottom: 0 !important;
}
.rubik-cube.row1-lt-of2-rt .template-right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
// 一上两下
.rubik-cube .item.row1-tp-of2-bm:nth-child(1) {
width: 100%;
box-sizing: border-box;
margin-top: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.rubik-cube .item.row1-tp-of2-bm:nth-child(2) {
// width: 50%;
box-sizing: border-box;
margin-left: 0 !important;
margin-bottom: 0 !important;
}
.rubik-cube .item.row1-tp-of2-bm:nth-child(3) {
// width: 50%;
box-sizing: border-box;
margin-right: 0 !important;
margin-bottom: 0 !important;
}
// 一左三右
.rubik-cube .template-left .item.row1-lt-of1-tp-of2-bm {
width: 100%;
box-sizing: border-box;
}
.rubik-cube .template-bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.rubik-cube .template-bottom .item:nth-child(2) {
margin-right: 0 !important;
}
</style>

View File

@@ -1,368 +0,0 @@
<template>
<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"
@tap.stop="handlerSearchClick">
<block v-if="[1, 2].includes(value.searchStyle)">
<view class="img" v-if="value.searchStyle == 2 && value.iconType == 'img'">
<image :src="$util.img(value.imageUrl)" mode="heightFix" />
</view>
<diy-icon class="icon" v-if="value.searchStyle == 2 && value.iconType == 'icon'" :icon="value.icon"
:value="value.style ? value.style : 'null'"
:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx' }"></diy-icon>
<view class="search-content" :style="inputStyle">
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title"
v-model="searchText" @confirm="handlerSearchClick" disabled="true"
:placeholderStyle="placeholderStyle" />
<text class="iconfont icon-sousuo3" @tap.stop="handlerSearchClick"
:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
</view>
</block>
<block v-if="value.searchStyle == 3">
<view class="search-content" :style="inputStyle"
@tap.stop="handlerSearchClick">
<text class="iconfont icon-sousuo3"
:style="{ color: value.textColor ? value.textColor : 'rgba(0,0,0,0)' }"></text>
<input type="text" class="uni-input ns-font-size-base" maxlength="50" :placeholder="value.title"
v-model="searchText" @confirm="handlerSearchClick" disabled="true"
@tap.stop="handlerSearchClick"
:placeholderStyle="placeholderStyle" />
<text class="search-content-btn" @tap.stop="handlerSearchClick"
:style="{ 'backgroundColor': value.pageBgColor ? value.pageBgColor : 'rgba(0,0,0,0)' }">搜索</text>
</view>
<view class="img" v-if="value.iconType == 'img'"
@tap.stop="handlerRedirectToClick(value.searchLink)">
<image :src="$util.img(value.imageUrl)" mode="heightFix" />
</view>
<diy-icon class="icon" v-if="value.iconType == 'icon'" :icon="value.icon"
:value="value.style ? value.style : 'null'"
:style="{ maxWidth: 30 * 2 + 'rpx', maxHeight: 30 * 2 + 'rpx' }"
@tap.stop="handlerRedirectToClick(value.searchLink)"></diy-icon>
</block>
</view>
</view>
<!-- 解决fixed定位后导航栏塌陷的问题 -->
<view v-if="value.positionWay == 'fixed'" class="u-navbar-placeholder"
:style="{ width: '100%', paddingTop: moduleHeight }"></view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// 如果是小程序,获取右上角胶囊的尺寸信息,避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
import DiyMinx from './minx.js'
// 搜索
export default {
name: 'diy-search',
props: {
value: {
type: Object,
default: () => {
return {};
}
},
topNavColor: String,
global: {
type: Object,
default: () => {
return {};
}
},
haveTopCategory: {
type: Boolean
},
followOfficialAccount: {
type: Object
},
},
data() {
return {
searchText: '',
menuButtonInfo: menuButtonInfo,
height: 0,
placeholderHeight: 0,
moduleHeight: 0
};
},
mixins: [DiyMinx],
computed: {
fixedCss() {
var obj = '';
if (this.value.positionWay == 'fixed') {
let top = this.fixedTop;
// 固定定位
if (this.global.topNavBg)
obj += 'background-color:' + (this.topNavColor == 'transparent' ? this.value.pageBgColor : this
.topNavColor) + ';';
else
obj += 'background-color:' + this.value.pageBgColor + ';';
obj += 'top:' + top + ';';
obj += 'padding-top:' + this.value.margin.top * 2 + 'rpx;';
obj += 'padding-left:' + this.value.margin.both * 2 + 'rpx;';
obj += 'padding-right:' + this.value.margin.both * 2 + 'rpx;';
obj += 'padding-bottom:' + this.value.margin.bottom * 2 + 'rpx;';
}
return obj;
},
searchWrapCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
obj += 'text-align:' + this.value.textAlign + ';';
return obj;
},
inputStyle() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.borderType == 2) {
obj += 'border-radius:' + '40rpx;';
}
return obj;
},
placeholderStyle() {
var obj = '';
if (this.value.textColor) {
obj += 'color:' + this.value.textColor;
} else {
obj += 'color: rgba(0,0,0,0)';
}
return obj;
},
fixedTop() {
let diyPositionObj = this.$store.state.diyGroupPositionObj;
let data = 0
if (diyPositionObj.diySearch && diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
if (diyPositionObj.diySearch.moduleIndex > diyPositionObj.diyIndexPage.moduleIndex) {
data = diyPositionObj.nsNavbar.originalVal + diyPositionObj.diyIndexPage.originalVal;
} else {
data = diyPositionObj.nsNavbar.originalVal;
}
} else if (diyPositionObj.diySearch && diyPositionObj.nsNavbar) {
data = diyPositionObj.nsNavbar.originalVal;
}
data += 'px';
return data;
}
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
}
},
created() {
setTimeout(() => {
// 获取组件的高度默认高度为4545是在375屏幕上的高度
const query = uni.createSelectorQuery();
// #ifdef H5
let cssSelect = '.page-header .u-navbar';
// #endif
// #ifdef MP
let cssSelect = '.page-header >>> .u-navbar';
// #endif
query
.select(cssSelect)
.boundingClientRect(data => {
if (this.global.navBarSwitch) {
this.height = data ? data.height : 45;
} else {
this.height = data ? data.height : 0;
}
// 如果存在分类导航组件,则追加该组件的高度
if (this.haveTopCategory) {
this.height += 49;
}
})
.exec();
});
if (this.value.positionWay == 'fixed') this.navbarPlaceholderHeight();
},
mounted() {
if (this.value.positionWay == 'fixed')
this.setModuleLocationFn();
},
methods: {
search() {
this.$util.redirectTo('/pages_tool/goods/search');
},
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
this.$refs.login.open(link.wap_url);
return;
}
}
this.$util.diyRedirectTo(link);
},
navbarPlaceholderHeight() {
let height = 0;
setTimeout(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.diy-search-wrap')
.boundingClientRect(data => {
// 获取搜索框自身高度
this.placeholderHeight = data.height;
// 通过搜索框自身高度 - 定位模式下的多出的padding-bottom高度
if (this.placeholderHeight) this.placeholderHeight -= this.value.margin.bottom;
}).exec();
});
},
// 向vuex中的diyIndexPositionObj增加搜索组件定位位置
setModuleLocationFn() {
this.$nextTick(() => {
const query = uni.createSelectorQuery().in(this);
query.select('.diy-search-wrap')
.boundingClientRect(data => {
let diySearch = {
originalVal: data.height || 0, //自身高度 px
currVal: 0, //定位高度
moduleIndex: this.value.moduleIndex //组件在diy-group的位置
};
this.moduleHeight = (data.height || 0) + 'px';
this.$store.commit('setDiyGroupPositionObj', {
'diySearch': diySearch
});
}).exec();
})
},
async handlerRedirectToClick(link) {
await this.__$emitEvent({
eventName: 'search-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.redirectTo(link);
}
})
},
async handlerSearchClick(item) {
await this.__$emitEvent({
eventName: 'search-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.search();
}
})
}
}
};
</script>
<style lang="scss">
::v-deep .uni-input-placeholder {
overflow: initial;
}
.diy-search-wrap {
overflow: hidden;
}
.fixed {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 991;
transition: background 0.3s;
}
.search-box {
position: relative;
display: flex;
align-items: center;
.img {
height: 60rpx;
margin-right: 20rpx;
image {
width: 100%;
height: 100%;
}
}
.icon {
width: 170rpx;
height: 60rpx;
margin-right: 20rpx;
}
}
.search-box-3 {
.search-content {
display: flex;
align-items: center;
height: 68rpx;
.iconfont {
position: initial;
transform: translateY(0);
width: auto;
margin-left: 26rpx;
margin-right: 12rpx;
font-size: $font-size-base;
line-height: 1;
}
.uni-input {
flex: 1;
padding-left: 0;
height: 68rpx;
}
.search-content-btn {
margin-right: 8rpx;
width: 116rpx;
height: 54rpx;
line-height: 54rpx;
text-align: center;
color: #fff;
border-radius: 30rpx;
}
}
.diy-icon {
margin-left: 20rpx;
margin-right: 0;
width: auto;
font-size: 74rpx;
}
.img {
margin-left: 20rpx;
margin-right: 0;
}
}
.search-content {
flex: 1;
}
.search-content input {
box-sizing: border-box;
display: block;
height: 64rpx;
width: 100%;
padding: 0 20rpx 0 40rpx;
color: #333333;
background: none;
}
.search-content .iconfont {
position: absolute;
top: 50%;
right: 4rpx;
transform: translateY(-50%);
font-size: 30rpx;
z-index: 10;
width: 80rpx;
font-weight: bold;
text-align: center;
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -1,180 +0,0 @@
<template>
<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" :key="index" :class="['item']">
<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>
</scroll-view>
</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']">
<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>
</scroll-view>
</block>
</view>
</x-skeleton>
</template>
<script>
// 门店标签
import DiyMinx from './minx.js'
export default {
name: 'diy-store-label',
props: {
value: {
type: Object
}
},
mixins: [DiyMinx],
data() {
return {
loading: true,
skeletonConfig: {
gridRows: 1,
gridRowsGap: '20rpx',
headHeight: '40rpx',
headBorderRadius: '0'
},
list: [],
notice: '',
storeLabel: [],
businessConfig: ""
};
},
created() {
this.getData();
this.getStoreConfig();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getData();
}
},
computed: {
storeLabelWrapCss: function () {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
getData() {
var data = {
page: 1,
page_size: 0
};
if (this.value.sources == 'initial') {
data.page_size = this.value.count;
} else if (this.value.sources == 'diy') {
data.label_id_arr = this.value.labelIds.toString();
}
this.$api.sendRequest({
url: '/store/api/store/labelPage',
data: data,
success: res => {
if (res.code == 0 && res.data) {
this.list = res.data.list;
}
this.loading = false;
}
});
},
getStoreConfig() {
this.$api.sendRequest({
url: '/store/api/config/config',
success: res => {
if (res.code >= 0) {
this.businessConfig = res.data.business_config;
if (res.data.business_config.store_business == "store") {
this.getStoreInfo();
}
}
}
});
},
getStoreInfo() {
this.$api.sendRequest({
url: '/api/store/info',
success: res => {
if (res.data) {
let label_arr = res.data.label_name.split(",");
let label_count = 3;
if (this.value.sources == 'initial') label_count = this.value.count;
for (let i = 0; i < label_arr.length; i++) {
if (this.storeLabel.length < label_count && label_arr[i] != '') {
this.storeLabel.push(label_arr[i])
}
}
}
}
});
},
}
};
</script>
<style lang="scss">
.diy-store-label {
.style-1 {
display: flex;
align-items: baseline;
::v-deep .uni-scroll-view-content {
display: flex;
align-items: center;
}
&.between {
justify-content: space-between;
::v-deep .uni-scroll-view-content {
justify-content: space-between;
}
}
.item {
flex-shrink: 0;
display: flex;
align-items: center;
padding-right: 20rpx;
.icon-box {
font-size: 50rpx;
width: 40rpx;
height: 40rpx;
margin-right: 10rpx;
margin-top: 2rpx;
}
.label-name {
line-height: 40rpx;
}
&:last-of-type {
padding-right: 0;
}
}
}
}
</style>

View File

@@ -1,834 +0,0 @@
<template>
<!-- DIY 标签页组件 - 支持多种样式和位置的标签页切换 -->
<view data-component-name="diy-tab" class="diy-tab" :class="'tab-position-' + mergedValue.tabPosition"
:style="[getCustomStyle('container')]">
<!-- 标签导航栏 -->
<view class="tab-nav" :style="[tabNavStyle, getCustomStyle('nav')]">
<!-- 标签项循环渲染 -->
<view v-for="(tab, index) in mergedValue.tabs" :key="tab.id || index"
:class="['tab-item', mergedValue.tabStyle, { active: activeTab === index }]" @tap="switchTab(index)"
:style="[tabItemStyle(index), getCustomStyle('tabItem'), activeTab === index ? getCustomStyle('tabItemActive') : {}]">
<!-- 标签文本 -->
<text
:style="[tabTextStyle(index), getCustomStyle('tabText'), activeTab === index ? getCustomStyle('tabTextActive') : {}]">{{
getTabTitle(tab.title) }}</text>
<!-- 标签指示器底部线条 -->
<view v-if="mergedValue.showIndicator" class="tab-indicator"
:style="[tabIndicatorStyle(index), getCustomStyle('indicator')]"></view>
</view>
</view>
<!-- 标签内容区域 -->
<view class="tab-content" :style="[tabContentStyle, getCustomStyle('content')]">
<!-- 标签面板循环渲染 -->
<view v-for="(tab, index) in mergedValue.tabs" :key="index"
:class="['tab-panel', { active: activeTab === index }]"
:style="[tabPanelStyle(index), getCustomStyle('panel'), activeTab === index ? getCustomStyle('panelActive') : {}]">
<!-- 渲染每个标签下的组件 -->
<diy-group v-if="tab.components" :diyData="{ value: tab.components, global: diyGlobal }"
:scrollTop="tab.scrollTop || 0" />
</view>
</view>
</view>
</template>
<script>
// 导入 DIY 混入
import DiyMinx from './minx.js'
export default {
name: 'diy-tab',
// 组件注册 - 使用懒加载解决循环依赖
components: {
diyGroup: () => import('./diy-group.vue')
},
// 组件属性定义
props: {
// 标签页配置对象
value: {
type: Object,
default: () => ({})
},
// 全局配置对象
diyGlobal: {
type: Object,
default: () => ({})
}
},
// 混入
mixins: [DiyMinx],
// 组件数据
data() {
return {
activeTab: this.value?.activeTabIndex ?? 0, // 设置当前激活的标签索引
};
},
// 组件创建钩子
created() {
console.log(`diy-tab-create`, {
value: this.mergedValue,
tabs: this.mergedValue.tabs
});
},
// 计算属性
computed: {
// 合并默认值和传入值
mergedValue() {
// 标签页数据配置
const tabsConfig = {
/**
* 标签页数据配置
* @type {Array<{title: string|Object, scrollTop: number, components: Array}>}
* @property {string} id 标签唯一标识
* @property {string|Object} title - 标签标题
* • 字符串: 普通文本或国际化键(如 'tab.home'
* • 对象: 多语言映射(如 { 'zh-cn': '首页', 'en-us': 'Home' }
* @property {number} scrollTop - 标签滚动位置
* @property {Array} components - 标签下的组件列表
*/
tabs: []
};
// 基础配置
const baseConfig = {
/**
* 是否显示指示器
* @type {boolean}
* @default true
*/
showIndicator: true,
/**
* 激活的标签索引
* @type {number}
* @default 0
*/
activeTabIndex: 0,
/**
* 标签样式
* @type {string}
* @default 'default'
* @values 'default', 'underline', 'card'
*/
tabStyle: 'default',
/**
* 标签位置
* @type {string}
* @default 'top'
* @values 'top', 'bottom', 'left', 'right'
*/
tabPosition: 'top'
};
// 导航栏样式
const navConfig = {
/**
* 标签栏高度
* @type {number|string}
* @default 24
* @unit 像素(当为数字时)
* @range 建议值20-80
* @format
* • 数字: 像素值(如 24
* • 字符串: CSS长度值如 '24px', '3rem', '4em'
* • CSS变量: 'var(--tab-height)'
* • 百分比: '10%' (相对父元素高度)
*/
tabHeight: 24,
/**
* 标签栏背景色
* @type {string}
* @default '#ffffff'
* @format CSS颜色值
*/
tabBgColor: '#ffffff',
/**
* 标签栏内边距
* @type {string}
* @default '0'
* @format CSS padding值
* @examples
* • 单个值: '0', '10px', '1rem' (四向相同)
* • 两个值: '10px 20px' (上下 左右)
* • 三个值: '10px 20px 30px' (上 左右 下)
* • 四个值: '10px 20px 30px 40px' (上 右 下 左)
* • CSS变量: 'var(--tab-padding)'
* • 百分比: '5% 10%' (相对父元素宽度)
* @note 卡片样式下会忽略此配置,自动使用基于 tabGap 的内边距
*/
tabPadding: '0'
};
// 标签项样式
const tabItemConfig = {
/**
* 标签间距
* @type {number|string}
* @default 10
* @unit 像素(当为数字时)
* @range 建议值0-30
* @format
* • 数字: 像素值(如 10
* • 字符串: CSS长度值如 '10px', '0.5rem', '1em'
* • CSS变量: 'var(--tab-gap)'
* • 百分比: '5%' (相对父元素宽度)
*/
tabGap: 10,
/**
* 字体大小
* @type {number|string}
* @default 14
* @unit 像素(当为数字时)
* @range 建议值10-20
* @format
* • 数字: 像素值(如 14
* • 字符串: CSS长度值如 '14px', '0.875rem', '1.4em'
* • CSS变量: 'var(--font-size)'
*/
fontSize: 14,
/**
* 激活状态颜色
* @type {string}
* @default '#ff4444'
* @format CSS颜色值
*/
activeColor: '#ff4444',
/**
* 非激活状态颜色
* @type {string}
* @default '#666666'
* @format CSS颜色值
*/
inactiveColor: '#666666'
};
// 卡片样式
const cardConfig = {
/**
* 卡片默认背景色
* @type {string}
* @default '#f5f5f5'
* @format CSS颜色值
*/
cardBgColor: '#f5f5f5',
/**
* 卡片激活背景色
* @type {string}
* @default '#ff4444'
* @format CSS颜色值
*/
cardActiveBgColor: '#ff4444',
/**
* 卡片默认文字颜色
* @type {string}
* @default '#666666'
* @format CSS颜色值
*/
cardTextColor: '#666666',
/**
* 卡片激活文字颜色
* @type {string}
* @default '#ffffff'
* @format CSS颜色值
*/
cardActiveTextColor: '#ffffff',
/**
* 卡片圆角大小
* @type {string}
* @default '16px'
* @format CSS长度值
*/
cardBorderRadius: '16px',
/**
* 卡片外边距
* @type {string}
* @default '0 5px'
* @format CSS margin值
*/
cardMargin: '0 5px',
/**
* 卡片内边距
* @type {string}
* @default '0 10px'
* @format CSS padding值
*/
cardPadding: '0 10px'
};
// 下划线样式
const underlineConfig = {
/**
* 下划线颜色
* @type {string}
* @default '#ff4444'
* @format CSS颜色值
*/
underlineColor: '#ff4444',
/**
* 下划线高度
* @type {number}
* @default 2
* @unit 像素
*/
underlineHeight: 2,
/**
* 下划线圆角大小
* @type {string}
* @default '1px'
* @format CSS长度值
*/
underlineBorderRadius: '1px',
/**
* 下划线左右边距
* @type {number}
* @default 10
* @unit 像素
*/
underlineMargin: 10
};
// 指示器样式
const indicatorConfig = {
/**
* 指示器颜色
* @type {string}
* @default '#ff4444'
* @format CSS颜色值
*/
indicatorColor: '#ff4444',
/**
* 指示器高度
* @type {number}
* @default 2
* @unit 像素
*/
indicatorHeight: 2
};
// 内容区域样式
const contentConfig = {
/**
* 内容区内边距
* @type {number|string}
* @default 10
* @unit 像素(当为数字时)
* @range 建议值0-50
* @format
* • 数字: 像素值(如 10
* • 字符串: CSS长度值如 '10px', '1rem', '2em'
* • CSS变量: 'var(--content-padding)'
* • 百分比: '5%' (相对父元素宽度)
*/
contentPadding: 10,
/**
* 内容区背景色
* @type {string}
* @default '#f5f5f5'
* @format CSS颜色值
* @examples
* • 十六进制: '#ffffff', '#f5f5f5'
* • RGB: 'rgb(255, 255, 255)'
* • RGBA: 'rgba(255, 255, 255, 0.5)'
* • HSL: 'hsl(0, 0%, 100%)'
* • CSS变量: 'var(--content-bg-color)'
* • 预定义颜色: 'white', 'black', 'gray'
*/
contentBgColor: '#f5f5f5',
/**
* 内容区最小高度
* @type {number|string}
* @default 200
* @unit 像素(当为数字时)
* @range 建议值50-1000
* @format
* • 数字: 像素值(如 200
* • 字符串: CSS长度值如 '200px', '20vh', '5rem'
* • CSS变量: 'var(--content-min-height)'
* • 百分比: '50%' (相对父元素高度)
*/
contentMinHeight: 200
};
// 自定义样式配置
const customStylesConfig = {
/**
* 自定义样式配置
* @type {Object}
* @description 允许外部通过完整的 CSS 样式对象完全覆盖各个部分的样式
* @property {Object} container - 容器样式
* @example { width: '100%', height: '500px', backgroundColor: '#f0f0f0' }
* @property {Object} nav - 导航栏样式
* @example { backgroundColor: '#ffffff', borderBottom: '1px solid #e0e0e0' }
* @property {Object} tabItem - 标签项样式(非激活状态)
* @example { padding: '10px 20px', borderRadius: '4px' }
* @property {Object} tabItemActive - 标签项激活样式
* @example { backgroundColor: '#ff4444', color: '#ffffff' }
* @property {Object} tabText - 标签文本样式(非激活状态)
* @example { fontSize: '14px', color: '#666666' }
* @property {Object} tabTextActive - 标签文本激活样式
* @example { fontSize: '16px', color: '#ffffff', fontWeight: 'bold' }
* @property {Object} indicator - 指示器样式
* @example { backgroundColor: '#ff4444', height: '3px' }
* @property {Object} content - 内容区域样式
* @example { padding: '20px', backgroundColor: '#f9f9f9' }
* @property {Object} panel - 标签面板样式(非激活状态)
* @example { opacity: 0.5, transform: 'translateY(10px)' }
* @property {Object} panelActive - 标签面板激活样式
* @example { opacity: 1, transform: 'translateY(0)' }
*/
customStyles: {
container: {},
nav: {},
tabItem: {},
tabItemActive: {},
tabText: {},
tabTextActive: {},
indicator: {},
content: {},
panel: {},
panelActive: {}
}
};
// 合并所有配置
const defaults = {
...tabsConfig,
...baseConfig,
...navConfig,
...tabItemConfig,
...cardConfig,
...underlineConfig,
...indicatorConfig,
...contentConfig,
...customStylesConfig
};
// 使用展开运算符合并默认值和传入值
return { ...defaults, ...this.value };
},
// 判断是否为水平布局(顶部或底部)
isHorizontal() {
return ['top', 'bottom'].includes(this.mergedValue.tabPosition);
},
// 判断是否为垂直布局(左侧或右侧)
isVertical() {
return ['left', 'right'].includes(this.mergedValue.tabPosition);
},
// 判断是否为卡片样式
isCardStyle() {
return this.mergedValue.tabStyle === 'card';
},
// 判断是否为下划线样式
isUnderlineStyle() {
return this.mergedValue.tabStyle === 'underline';
},
// 计算标签导航栏样式
tabNavStyle() {
const style = {
backgroundColor: this.mergedValue.tabBgColor || '#ffffff'
};
// 根据布局方向设置尺寸
if (this.isHorizontal) {
// 水平布局:设置高度
style.height = this.mergedValue.tabHeight + 'px';
} else {
// 垂直布局:设置宽度和高度
style.width = this.mergedValue.tabHeight + 'px';
style.height = '100%';
style.flexDirection = 'column';
}
// 设置导航栏内边距
if (this.mergedValue.tabPadding) {
style.padding = this.mergedValue.tabPadding;
}
// 卡片样式下使用标签间距作为内边距
if (this.isCardStyle) {
style.padding = this.getPadding(this.mergedValue.tabGap);
}
return style;
},
// 计算标签项样式(返回函数)
tabItemStyle() {
return (index) => {
const style = {};
if (!this.isCardStyle) {
// 非卡片样式:设置内边距
style.padding = this.getPadding(this.mergedValue.tabGap);
} else {
// 卡片样式:设置外边距、内边距、圆角和背景色
style.margin = this.getCardMargin();
style.padding = this.getCardPadding();
style.borderRadius = this.mergedValue.cardBorderRadius || '16px';
// 根据激活状态设置不同的背景色
style.backgroundColor = index === this.activeTab
? (this.mergedValue.cardActiveBgColor || this.mergedValue.activeColor)
: (this.mergedValue.cardBgColor || '#f5f5f5');
}
return style;
};
},
// 计算标签内容区域样式
tabContentStyle() {
return {
padding: this.mergedValue.contentPadding + 'px',
backgroundColor: this.mergedValue.contentBgColor || '#f5f5f5',
minHeight: (this.mergedValue.contentMinHeight || 200) + 'px'
};
},
// 计算标签文本样式(返回函数)
tabTextStyle() {
return (index) => ({
color: this.activeColor(index),
fontSize: (this.mergedValue.fontSize || 14) + 'px'
});
},
// 计算标签指示器样式(返回函数)
tabIndicatorStyle() {
return (index) => {
const style = {
backgroundColor: this.mergedValue.indicatorColor || this.mergedValue.activeColor,
transform: index === this.activeTab ? 'scaleX(1)' : 'scaleX(0)',
opacity: index === this.activeTab ? 1 : 0
};
// 卡片样式下隐藏指示器
if (this.isCardStyle) {
style.display = 'none';
} else if (this.isUnderlineStyle) {
// 下划线样式使用下划线颜色
style.backgroundColor = this.mergedValue.underlineColor || this.mergedValue.activeColor;
}
// 根据样式类型选择指示器尺寸
const indicatorSize = (this.isUnderlineStyle ? this.mergedValue.underlineHeight : this.mergedValue.indicatorHeight) || 2;
// 根据布局方向设置指示器样式
if (this.isHorizontal) {
// 水平布局:设置高度,使用 scaleX 动画
style.height = indicatorSize + 'px';
style.transform = index === this.activeTab ? 'scaleX(1)' : 'scaleX(0)';
} else {
// 垂直布局:设置宽度,使用 scaleY 动画
style.width = indicatorSize + 'px';
style.height = 'auto';
style.transform = index === this.activeTab ? 'scaleY(1)' : 'scaleY(0)';
}
return style;
};
},
// 计算标签面板样式(返回函数)
tabPanelStyle() {
return (index) => {
const isActive = index === this.activeTab;
const style = {
display: isActive ? 'block' : 'none',
opacity: isActive ? 1 : 0
};
// 根据标签位置定义不同的动画效果
const transformMap = {
top: ['translateY(0)', 'translateY(10px)'], // 顶部:从下往上滑入
bottom: ['translateY(0)', 'translateY(-10px)'], // 底部:从上往下滑入
left: ['translateX(0)', 'translateX(10px)'], // 左侧:从右往左滑入
right: ['translateX(0)', 'translateX(-10px)'] // 右侧:从左往右滑入
};
// 获取对应的变换值,默认使用无变换
const transforms = transformMap[this.mergedValue.tabPosition] || ['translate(0)', 'translate(0)'];
// 根据激活状态应用不同的变换
style.transform = isActive ? transforms[0] : transforms[1];
return style;
};
}
},
// 组件方法
methods: {
// 获取自定义样式
getCustomStyle(type) {
const customStyles = this.mergedValue.customStyles || {};
return customStyles[type] || {};
},
// 获取标签文字颜色
activeColor(index) {
if (this.isCardStyle) {
// 卡片样式:使用卡片文字颜色
return index === this.activeTab
? (this.mergedValue.cardActiveTextColor || '#ffffff')
: (this.mergedValue.cardTextColor || this.mergedValue.inactiveColor);
}
// 其他样式:使用通用文字颜色
return index === this.activeTab ? this.mergedValue.activeColor : this.mergedValue.inactiveColor;
},
// 根据布局方向获取内边距
getPadding(gap) {
return this.isHorizontal ? `0 ${gap}px` : `${gap}px 0`;
},
// 根据布局方向获取外边距
getMargin(gap) {
return this.isHorizontal ? `0 ${gap}px` : `${gap}px 0`;
},
// 获取卡片外边距
getCardMargin() {
return this.mergedValue.cardMargin || this.getMargin(this.mergedValue.tabGap / 2);
},
// 获取卡片内边距
getCardPadding() {
return this.mergedValue.cardPadding || (this.isHorizontal ? '0 10px' : '10px 0');
},
// 切换标签
switchTab(index) {
this.activeTab = index;
},
// 国际化方法:获取标签标题
getTabTitle(title) {
const locale = this.$langConfig.getCurrentLocale();
// 如果 title 是对象,根据当前语言返回对应值
if (typeof title === 'object' && title !== null) {
return title[locale] || title['zh-cn'] || Object.values(title)[0] || '';
}
// 如果 title 是字符串,保持原有逻辑
if (typeof title === 'string' && title.includes('.')) {
// 包含点号的标题视为国际化键,使用全局挂载的 $lang 方法翻译
return this.$lang ? this.$lang(title) : title;
}
// 不包含点号的标题直接返回
return title;
}
}
}
</script>
<style lang="scss" scoped>
// ===== 标签布局 Mixin =====
// 用于定义不同位置标签的布局方式
@mixin tab-layout($direction, $nav-order, $content-order) {
flex-direction: $direction;
.tab-nav {
order: $nav-order;
}
.tab-content {
order: $content-order;
flex: 1;
}
}
// ===== 指示器位置 Mixin =====
// 用于定义不同位置指示器的定位
@mixin indicator-position($position, $start, $end) {
#{$position}: 0;
#{$start}: 0;
#{$end}: 0;
width: 2px;
height: auto;
}
// ===== 主容器样式 =====
.diy-tab {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
// 默认顶部布局
@include tab-layout(column, 1, 2);
// 底部布局
&.tab-position-bottom {
@include tab-layout(column, 2, 1);
}
// 左侧布局
&.tab-position-left {
@include tab-layout(row, 1, 2);
}
// 右侧布局
&.tab-position-right {
@include tab-layout(row, 2, 1);
}
// ===== 标签导航栏样式 =====
.tab-nav {
display: flex;
align-items: center;
justify-content: flex-start;
overflow-x: auto; // 水平滚动
overflow-y: hidden; // 禁止垂直滚动
white-space: nowrap; // 不换行
position: relative;
// 隐藏滚动条Webkit 浏览器)
&::-webkit-scrollbar {
display: none;
}
// 隐藏滚动条IE/Edge
-ms-overflow-style: none;
// 隐藏滚动条Firefox
scrollbar-width: none;
}
// ===== 标签项样式 =====
.tab-item {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0 16px;
height: 100%;
transition: all 0.3s ease;
// 激活状态
&.active {
font-weight: 500;
}
// 减少动画效果(针对偏好减少动画的用户)
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
// 左右布局下的标签项样式
&.tab-position-left .tab-item,
&.tab-position-right .tab-item {
width: 100%;
height: auto;
padding: 10px 0;
white-space: normal; // 允许换行
}
// ===== 标签文本样式 =====
.tab-text {
font-size: 14px;
transition: color 0.3s ease;
}
// ===== 标签指示器样式 =====
.tab-indicator {
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
transition: all 0.3s ease;
transform-origin: center;
}
// 左侧布局的指示器
&.tab-position-left .tab-indicator {
@include indicator-position(left, top, bottom);
}
// 右侧布局的指示器
&.tab-position-right .tab-indicator {
@include indicator-position(right, top, bottom);
}
// ===== 标签内容区域样式 =====
.tab-content {
width: 100%;
overflow: hidden;
position: relative;
}
// ===== 标签面板样式 =====
.tab-panel {
width: 100%;
min-height: 200px;
transition: all 0.3s ease;
// 减少动画效果
@media (prefers-reduced-motion: reduce) {
transition: none;
}
}
// ===== 默认和下划线样式 =====
.tab-item.default,
.tab-item.underline {
padding: 0 10px;
transition: all 0.3s ease;
&.active {
color: #ff4444;
font-weight: 500;
}
}
// 下划线样式的伪元素
.tab-item.underline.active::after {
content: '';
position: absolute;
bottom: 0;
left: 10px;
right: 10px;
transition: all 0.3s ease;
}
// ===== 卡片样式 =====
.tab-item.card {
border-radius: 16px;
transition: all 0.3s ease;
&.active {
font-weight: 500;
}
}
}
</style>

View File

@@ -1,58 +0,0 @@
<template>
<video data-component-name="diy-video" class="diy-video" :src="$util.img(value.videoUrl)"
:poster="$util.img(value.imageUrl)" :style="videoWarpCss" objectFit="cover"
@tap="handlerClick(value.videoUrl)"></video>
</template>
<script>
// 视频
import DiyMinx from './minx.js'
export default {
name: 'diy-video',
props: {
value: {
type: Object
}
},
data() {
return {};
},
created() { },
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function (nval) { }
},
computed: {
videoWarpCss: function () {
var obj = '';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
async handlerClick(videoUrl) {
await this.__$emitEvent({
eventName: 'video-tap', data: videoUrl, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
}
})
}
}
};
</script>
<style scoped>
video {
width: 100%;
}
.diy-video>>>.uni-video-container {
background-color: transparent;
}
</style>

View File

@@ -1,188 +0,0 @@
// 微信视频号组件配置
export const wechatChannelConfig = {
// 图标相关
icon: {
defaultSize: 80, // 默认图标尺寸rpx
smallSize: 60, // 小图标尺寸rpx
channelArrowSize: 24, // 频道箭头图标尺寸rpx
channelArrow: 'addon/personnel/shop/view/enterprise/arrow.png', // 频道箭头图标路径
},
// 视频相关配置
video: {
defaultHeight: 320, // 默认视频高度rpx
minHeight: 200, // 最小视频高度rpx
maxHeight: 500, // 最大视频高度rpx
defaultCoverUrl: 'addon/personnel/shop/view/enterprise/default-video-cover.png', // 默认视频封面
},
// 播放按钮配置
playButton: {
size: 80, // 标准尺寸rpx
smallSize: 60, // 小尺寸rpx
iconSize: 40, // 标准图标尺寸rpx
smallIconSize: 30, // 小图标尺寸rpx
background: 'rgba(0, 0, 0, 0.4)', // 背景颜色
},
// 布局配置
layout: {
borderRadius: 12, // 圆角rpx
padding: 16, // 内边距rpx
margin: 10, // 外边距rpx
},
// 字体配置
font: {
channelNameSize: 28, // 频道名称字体大小rpx
videoTitleSize: 28, // 视频标题字体大小rpx
statsSize: 24, // 统计信息字体大小rpx
},
// 颜色配置
color: {
channelName: '#333', // 频道名称颜色
videoTitle: '#333', // 视频标题颜色
stats: '#999', // 统计信息颜色
border: '#f0f0f0', // 边框颜色
},
// 微信相关配置
wechat: {
minSdkVersion: '2.19.2', // 最小微信基础库版本
embedComponent: 'channel-video', // 嵌入式视频组件名称
},
// 错误提示配置
error: {
notWechat: '当前环境不是微信小程序',
lowVersion: '当前微信基础库版本过低,需要 2.19.2 或以上版本',
notSupported: '当前环境不支持微信视频号',
missingFields: '缺少必要字段: {field}',
},
};
// 获取配置项的辅助函数
export const getwechatChannelConfig = (key, defaultValue = null) => {
const keys = key.split('.');
let config = wechatChannelConfig;
for (const k of keys) {
if (config[k] === undefined) {
return defaultValue;
}
config = config[k];
}
return config;
};
// 微信视频号工具函数
export const wechatChannelUtil = {
// 版本比较
versionCompare(v1, v2) {
const arr1 = v1.split('.');
const arr2 = v2.split('.');
for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
const num1 = parseInt(arr1[i] || 0);
const num2 = parseInt(arr2[i] || 0);
if (num1 > num2) return 1;
if (num1 < num2) return -1;
}
return 0;
},
// 检查是否支持嵌入式播放
isEmbedModeSupported() {
return typeof wx !== 'undefined' && wx.canIUse(wechatChannelConfig.wechat.embedComponent);
},
// 获取默认视频封面
getDefaultCoverUrl() {
return wechatChannelConfig.video.defaultCoverUrl;
},
// 数据校验
validateVideoData(item) {
const requiredFields = ['feedId', 'finderUserName'];
for (const field of requiredFields) {
if (!item[field]) {
throw new Error(`缺少必要字段: ${field}`);
}
}
return true;
},
// 播放视频
playVideo(item) {
return new Promise((resolve, reject) => {
try {
// 数据校验
this.validateVideoData(item);
} catch (err) {
this.handleError(err, item);
reject(err);
return;
}
// 检查微信环境
if (typeof wx === 'undefined') {
const err = new Error(wechatChannelConfig.error.notWechat);
this.handleError(err, item);
reject(err);
return;
}
// 检查基础库版本
const systemInfo = wx.getSystemInfoSync();
const SDKVersion = systemInfo.SDKVersion;
if (this.versionCompare(SDKVersion, wechatChannelConfig.wechat.minSdkVersion) < 0) {
const err = new Error(wechatChannelConfig.error.lowVersion);
this.handleError(err, item);
reject(err);
return;
}
// 调用微信视频号播放API
if (wx.openChannelsActivity) {
wx.openChannelsActivity({
feedId: item.feedId,
finderUserName: item.finderUserName,
success: (res) => {
console.log('打开视频号成功', res);
resolve(res);
},
fail: (err) => {
this.handleError(err, item);
reject(err);
}
});
} else {
const err = new Error(wechatChannelConfig.error.notSupported);
this.handleError(err, item);
reject(err);
}
});
},
// 统一错误处理
handleError(err, item) {
console.error('微信视频号错误:', err);
const { message = '', errMsg = '微信视频播放失败!', errCode = -1 } = err;
// 错误码5: 表示用户点击了取消. openChannelsActivity:fail cancel
if ([5].includes(errCode)) {
return;
}
const showErrorToast = (otherMsgs = []) => {
uni.showToast({
title: [errMsg, message,...otherMsgs].join('\n'),
icon: 'none',
duration: 2000
});
}
showErrorToast();
}
};

View File

@@ -1,22 +0,0 @@
export default {
methods: {
// 异步触发事件
async __$emitEvent(payload = {eventName: '__unnamedEvent', data: {}, promiseCallback: null}) {
// console.log('__$emitEvent', payload)
await this.$eventBus.emit(payload.eventName, payload.data, payload.promiseCallback)
},
// 预览图片
previewImg(img) {
// #ifdef MP-WEIXIN
uni.previewImage({
current: 0,
urls: [this.$util.img(img)],
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
// #endif
},
}
}

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"
}
}

View File

@@ -357,10 +357,14 @@
</view> </view>
</template> </template>
<script> <script>
import nsLoading from '@/components/ns-loading/ns-loading.vue'
import aiService from '@/common/js/ai-service.js' import aiService from '@/common/js/ai-service.js'
export default { export default {
name: 'ai-chat-message', name: 'ai-chat-message',
components: {
nsLoading
},
props: { props: {
// //
initialMessages: { initialMessages: {
@@ -441,14 +445,6 @@ export default {
} }
}, },
onShow() { onShow() {
// AI 退
if (customerServiceType !== 'ai') {
uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
setTimeout(() => {
uni.navigateBack({ delta: 1 }); // redirectTo
}, 1000);
return; //
}
// ID // ID
const localConvId = this.getConversationIdFromLocal(); const localConvId = this.getConversationIdFromLocal();
if (localConvId) { if (localConvId) {
@@ -818,121 +814,65 @@ export default {
}, },
// //
// H5 / async sendStreamMessage(userMessage) {
async sendStreamMessage(userMessage) { //
// const streamMessage = {
const streamMessage = { id: ++this.messageId,
id: ++this.messageId, role: 'ai',
role: 'ai', type: 'text',
type: 'text', content: '',
content: '', timestamp: Date.now(),
timestamp: Date.now(), isStreaming: true
isStreaming: true }
};
//
// this.messages = this.messages.filter(msg => msg.type !== 'loading')
this.messages = this.messages.filter(msg => msg.type !== 'loading'); this.shouldScrollToBottom = true
this.shouldScrollToBottom = true; this.messages.push(streamMessage)
this.messages.push(streamMessage);
//
try { await aiService.sendStreamMessage(
// #ifdef H5
// ===== H5: 使 POST + (fetch readable stream) =====
await aiService.sendHttpStream(
userMessage, userMessage,
//
(chunk) => { (chunk) => {
// streamMessage.content += chunk
streamMessage.content += chunk; this.$forceUpdate() // this.$nextTick()
this.$forceUpdate(); //
}, },
//
(completeResult) => { (completeResult) => {
//
let finalContent = ''; let finalContent = '';
let convId = ''; let convId = '';
//
if (typeof completeResult === 'string') { if (typeof completeResult === 'string') {
finalContent = completeResult; finalContent = completeResult;
} else { } else {
finalContent = completeResult.content || ''; finalContent = completeResult.content || '';
convId = completeResult.conversation_id || ''; convId = completeResult.conversation_id || ''; // 👈 conversation_id
} }
// //
streamMessage.isStreaming = false; streamMessage.isStreaming = false;
streamMessage.content = finalContent; streamMessage.content = finalContent;
// //
streamMessage.actions = [ streamMessage.actions = [
{ id: 1, text: '有帮助', type: 'like' }, { id: 1, text: '有帮助', type: 'like' },
{ id: 2, text: '没帮助', type: 'dislike' } { id: 2, text: '没帮助', type: 'dislike' }
]; ];
// ID // conversation_id
if (convId) { if (convId) {
this.currentConversationId = convId;
aiService.setConversationId(convId); aiService.setConversationId(convId);
this.saveConversationIdToLocal(convId);
} }
// //
this.$emit('ai-response', streamMessage); this.$emit('ai-response', streamMessage);
this.saveConversationIdToLocal(convId);
this.currentConversationId = convId;
} }
); );
// #endif },
// #ifdef MP-WEIXIN
// ===== : 使 WebSocket =====
await aiService.sendStreamMessage(
userMessage,
(chunk) => {
//
streamMessage.content += chunk;
this.$forceUpdate();
},
(completeResult) => {
//
let finalContent = completeResult?.content || '';
let convId = completeResult?.conversation_id || '';
//
streamMessage.isStreaming = false;
streamMessage.content = finalContent;
//
streamMessage.actions = [
{ id: 1, text: '有帮助', type: 'like' },
{ id: 2, text: '没帮助', type: 'dislike' }
];
// ID
if (convId) {
this.currentConversationId = convId;
aiService.setConversationId(convId);
this.saveConversationIdToLocal(convId);
}
//
this.$emit('ai-response', streamMessage);
}
);
// #endif
} catch (error) {
console.error('流式请求失败:', error);
//
this.messages = this.messages.filter(msg => msg.id !== streamMessage.id);
//
const errorMsg = {
id: ++this.messageId,
role: 'ai',
type: 'text',
content: '抱歉,服务暂时不可用,请稍后重试。',
timestamp: Date.now(),
actions: [{ id: 1, text: '重试', type: 'retry' }]
};
this.messages.push(errorMsg);
this.$emit('ai-response', errorMsg);
}
},
generateAIResponse(userMessage) { generateAIResponse(userMessage) {
const responses = { const responses = {
'你好': '您好我是AI智能客服很高兴为您服务有什么可以帮助您的吗', '你好': '您好我是AI智能客服很高兴为您服务有什么可以帮助您的吗',
@@ -1452,7 +1392,7 @@ $radius-lg: 36rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* 仅新增:科技感粉蓝渐变背景 + 流动动画 */ /* 仅新增:科技感粉蓝渐变背景 + 流动动画 */
background: white; /* 白色 */ background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%);
background-size: 200% 200%; background-size: 200% 200%;
animation: gradient-flow 15s ease infinite; animation: gradient-flow 15s ease infinite;
/* 原有样式保持不变 */ /* 原有样式保持不变 */
@@ -1514,6 +1454,25 @@ $radius-lg: 36rpx;
min-width: 0; min-width: 0;
width: 0; /* 添加这个属性防止flex元素溢出 */ width: 0; /* 添加这个属性防止flex元素溢出 */
.message-nickname {
font-size: 24rpx;
color: $color-text-light;
margin-bottom: 8rpx;
letter-spacing: 0.5rpx;
// AI
&:not(.ai-message .message-nickname) {
text-align: right;
}
// AI -
&.ai-nickname {
text-align: left;
margin-left: 0;
padding-left: 0;
align-self: flex-start;
margin-bottom: 4rpx;
}
}
.message-bubble { .message-bubble {
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
max-width: 100%; max-width: 100%;
@@ -1933,28 +1892,6 @@ $radius-lg: 36rpx;
} }
} }
/* ========== 关键修复:拆分 .message-nickname 样式 ========== */
.message-nickname {
font-size: 24rpx;
color: $color-text-light;
margin-bottom: 8rpx;
letter-spacing: 0.5rpx;
}
/* 用户昵称:右对齐 */
.user-message .message-nickname {
text-align: right;
}
/* AI 昵称:使用 .ai-nickname 类控制 */
.ai-nickname {
text-align: left;
margin-left: 0;
padding-left: 0;
align-self: flex-start;
margin-bottom: 4rpx;
}
/* 用户消息特有样式 */ /* 用户消息特有样式 */
.user-message { .user-message {
flex-direction: row-reverse; flex-direction: row-reverse;
@@ -1965,20 +1902,20 @@ $radius-lg: 36rpx;
text-align: right; text-align: right;
.message-bubble { .message-bubble {
background: #c4e0ff !important; /* 浅蓝色 */ background: linear-gradient(135deg, #ffadd2, #f783ac) !important; /* 粉色渐变 */
color: black !important; color: white !important;
border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */ border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(196, 224, 255, 0.3) !important; box-shadow: 0 8rpx 20rpx rgba(247, 131, 172, 0.3) !important;
border: none !important; border: none !important;
/* ✅ 关键:允许内容撑开高度 */ /* ✅ 关键:允许内容撑开高度 */
min-height: auto; min-height: auto;
height: auto; height: auto;
padding: 24rpx 32rpx; /* 保留内边距 */ padding: 24rpx 32rpx; /* 保留内边距 */
display: inline-block; /* 让宽度也随内容收缩(可选) */ display: inline-block; /* 让宽度也随内容收缩(可选) */
max-width: 80%; /* 防止过宽 */ max-width: 80%; /* 防止过宽 */
word-break: break-word; word-break: break-word;
white-space: pre-wrap; /* 保留用户输入的换行符 */ white-space: pre-wrap; /* 保留用户输入的换行符 */
line-height: 1.6; line-height: 1.6;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -2019,19 +1956,19 @@ $radius-lg: 36rpx;
align-items: flex-start; align-items: flex-start;
.message-bubble { .message-bubble {
background: white !important; /* 白色 */ background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; /* 蓝色浅渐变 */
color: black !important; color: #2c3e50 !important;
border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */ border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1) !important; box-shadow: 0 8rpx 20rpx rgba(191, 219, 254, 0.4) !important;
border: 1rpx solid #e0e0e0 !important; border: 1rpx solid #dbeafe !important;
min-height: auto; min-height: auto;
height: auto; height: auto;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
display: inline-block; display: inline-block;
max-width: 80%; max-width: 80%;
word-break: break-word; word-break: break-word;
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.6; line-height: 1.6;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -2055,7 +1992,7 @@ $radius-lg: 36rpx;
/* 输入区域 */ /* 输入区域 */
.input-area { .input-area {
background: #c4e0ff; /* 浅蓝色 */ background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%);
border-top: 2rpx solid #f0f4f8; border-top: 2rpx solid #f0f4f8;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
/* 确保在微信小程序中紧贴底部 */ /* 确保在微信小程序中紧贴底部 */
@@ -2139,10 +2076,10 @@ $radius-lg: 36rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
border: none; border: none;
text-align: center; /* 兼容多端文字居中 */ text-align: center; /* 兼容多端文字居中 */
white-space: nowrap; /* 强制文字单行横向显示 */ white-space: nowrap; /* 强制文字单行横向显示 */
line-height: 1; /* 重置行高,避免文字垂直偏移 */ line-height: 1; /* 重置行高,避免文字垂直偏移 */
top: -10px; top:-10px;
&.disabled { &.disabled {
background-color: $color-primary-light; background-color: $color-primary-light;
@@ -2826,4 +2763,4 @@ $radius-lg: 36rpx;
} }
} }
} }
</style> </style>

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

@@ -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 class="address-box" :class="{ 'not-delivery-type': goodsData.delivery.express_type.length <= 1 }" v-if="orderCreateData.delivery.delivery_type == 'local'">
<view v-if="localMemberAddress"> <view v-if="localMemberAddress">
<block v-if="storeList && Object.keys(storeList).length > 1"> <block v-if="storeList && Object.keys(storeList).length > 0">
<view class="local-delivery-store" v-if="storeInfo" @click="openPopup('deliveryPopup')"> <view class="local-delivery-store">
<view class="info"> <view class="info" v-if="storeInfo">
<text class="store-name">{{ storeInfo.store_name }}</text> <text class="store-name">{{ storeInfo.store_name }}</text>
提供配送 提供配送
<view>营业时间{{ storeInfo.open_date }}</view>
</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>点击切换</text>
<text class="iconfont icon-right"></text> <text class="iconfont icon-right"></text>
</view> </view>
</view> </view>
<view v-else class="local-delivery-store">
<view class="info">
<text class="store-name">您的附近没有可配送的门店请选择其他配送方式</text>
</view>
</view>
</block> </block>
<view class="info-wrap local" @click="selectAddress"> <view class="info-wrap local" @click="selectAddress">
<view class="content"> <view class="content">
<text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }} <text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }}</text>
</text> <text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}</text>
<text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}
</text>
<view class="desc-wrap"> <view class="desc-wrap">
{{ localMemberAddress.full_address ? localMemberAddress.full_address : '' }} {{ localMemberAddress.full_address ? localMemberAddress.full_address : '' }}
{{ localMemberAddress.address ? localMemberAddress.address : '' }} {{ localMemberAddress.address ? localMemberAddress.address : '' }}
@@ -125,9 +122,9 @@
<text>{{ storeInfo.store_name }}</text> <text>{{ storeInfo.store_name }}</text>
</view> </view>
<view class="store-detail"> <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 v-if="storeInfo.open_date">营业时间{{ storeInfo.open_date }}</view>
<view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }} <view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }}</view>
</view>
</view> </view>
</view> </view>
<view class="cell-more iconfont icon-right" v-if="storeList && Object.keys(storeList).length > 1"></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" /> <input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
</view> </view>
</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="left">提货时间</view>
<view class="right"> <view class="right">
{{ deliveryTime }} {{ deliveryTime }}
@@ -159,22 +163,17 @@
</template> </template>
<!-- 店铺 --> <!-- 店铺 -->
<view class="site-wrap order-goods" v-if="calculateGoodsData">
<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-body"> <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-wrap">
<view class="goods-img" @click="$util.redirectTo('/pages_goods/detail', { goods_id: goodsItem.goods_id })"> <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"/> <image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" mode="aspectFill"/>
</view> </view>
<view class="goods-info"> <view class="goods-info">
<view class="top-wrap"> <view class="top-wrap">
<view @click="$util.redirectTo('/pages_goods/detail', { goods_id: goodsItem.goods_id })" class="goods-name">{{ goodsItem.sku_name }}</view> <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="sku" v-if="goodsItem.sku_spec_format">
<view class="goods-spec"> <view class="goods-spec">
<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i"> <block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
@@ -210,6 +209,17 @@
</view> </view>
</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)"> <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 }"/> <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> <text class="cell-more iconfont icon-right"></text>
@@ -217,48 +227,18 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="site-wrap buyer-message">
<view class="site-wrap buyer-message">
</view> <view class="order-cell">
<text class="tit">买家留言</text>
<view class="order-money" style="margin: 0;"> <view class="box text-overflow " @click="openPopup('buyerMessagePopup')">
<view class="order-cell"> <text v-if="orderCreateData.buyer_message">{{ orderCreateData.buyer_message }}</text>
<text class="tit">买家留言</text> <text class="color-sub" v-else>留言</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>
<text class="iconfont icon-right"></text>
</view> </view>
</view> </view>
<view v-if="paymentData.system_form" class="system-form-wrap"> <view v-if="paymentData.system_form" class="system-form-wrap">
<view class="order-cell"> <view class="order-cell">
@@ -267,7 +247,7 @@
<ns-form :data="paymentData.system_form.json_data" ref="form"/> <ns-form :data="paymentData.system_form.json_data" ref="form"/>
</view> </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="site-footer">
<view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1"> <view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1">
<text class="tit">优惠券</text> <text class="tit">优惠券</text>
@@ -306,8 +286,8 @@
<text class="iconfont icon-right"></text> <text class="iconfont icon-right"></text>
</view> </view>
</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="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"> <view class="head" @click="selectMemberCard">
<text class="iconfont icon-huiyuan"></text> <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> <text class="iconfont" :class="orderCreateData.is_open_card == 1 ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></text>
</view> </view>
<view class="body" v-if="orderCreateData.is_open_card"> <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="title">{{ item.title }}</view>
<view class="price price-font">{{ $lang('common.currencySymbol') }}{{ parseFloat(item.value) }}/{{ item.unit }}</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> <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> <text class="money price-font">{{ calculateData.delivery_money | moneyFormat }}</text>
</view> </view>
</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 class="tit">
<text>税费</text> <text>税费</text>
<text class="color-base-text font-bold price-font">({{ goodsData.invoice.invoice_rate }}%)</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="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.invoice_money | moneyFormat }}</text> <text class="money price-font">{{ calculateData.invoice_money | moneyFormat }}</text>
</view> </view>
</view> --> </view>
<!-- <view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_delivery_money > 0"> <view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_delivery_money > 0">
<text class="tit">发票邮寄费</text> <text class="tit">发票邮寄费</text>
<view class="box color-base-text"> <view class="box color-base-text">
<text class="operator">+</text> <text class="operator">+</text>
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text> <text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
<text class="money price-font">{{ calculateData.invoice_delivery_money | moneyFormat }}</text> <text class="money price-font">{{ calculateData.invoice_delivery_money | moneyFormat }}</text>
</view> </view>
</view> --> </view>
<view class="order-cell" v-if="calculateData.promotion_money > 0"> <view class="order-cell" v-if="calculateData.promotion_money > 0">
<text class="tit">优惠</text> <text class="tit">优惠</text>
<view class="box color-base-text"> <view class="box color-base-text">
@@ -389,7 +369,7 @@
<text class="money price-font">{{ calculateData.point_money | moneyFormat }}</text> <text class="money price-font">{{ calculateData.point_money | moneyFormat }}</text>
</view> </view>
</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> <text class="tit">会员卡</text>
<view class="box color-base-text"> <view class="box color-base-text">
<text class="operator">+</text> <text class="operator">+</text>
@@ -397,7 +377,7 @@
<text class="money price-font">{{ calculateData.member_card_money | moneyFormat }} <text class="money price-font">{{ calculateData.member_card_money | moneyFormat }}
</text> </text>
</view> </view>
</view> --> </view>
</view> </view>
<view v-if="transactionAgreement.title && transactionAgreement.content" class="agreement">购买前请先阅读<text @click="$refs.agreementPopup.open()">{{ transactionAgreement.title }}</text>下单即代表同意该协议</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>
<view class="submit-btn"> <view class="submit-btn">
<button type="primary" class="mini" size="mini" @click="create()" v-if="!surplusStartMoney()">提交订单</button> <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> </view>
<view class="order-submit-block"></view> <view class="order-submit-block"></view>
<payment ref="choosePaymentPopup" @close="payClose" v-if="calculateData"></payment> <payment ref="choosePaymentPopup" @close="payClose" v-if="calculateData"></payment>
</template> </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"> <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 }"> <scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view class="order-cell" style="align-items: baseline;"> <view class="order-cell" style="align-items: baseline;">
<view class="tit"> <view class="tit">
<text class="promotion-mark ns-gradient-promotionpages-payment">{{ promotionInfo.title }} <text class="promotion-mark ns-gradient-promotionpages-payment">{{ promotionInfo.title }}</text>
</text>
</view> </view>
<view class="promotion-content"> <view class="promotion-content">
<view class="tit tit-content" style="white-space: pre-line;" v-html="promotionInfo.content"></view> <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> <text v-if="item.distance">({{ item.distance }}km)</text>
</view> </view>
<view class="info"> <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.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 :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">地址{{ item.full_address }}{{ item.address }}</view>
</view> </view>
@@ -478,6 +520,33 @@
<ns-empty text="所选择收货地址附近没有可以自提的门店" :isIndex="false"></ns-empty> <ns-empty text="所选择收货地址附近没有可以自提的门店" :isIndex="false"></ns-empty>
</view> </view>
</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> </block>
</mescroll-uni> </mescroll-uni>
@@ -509,7 +578,7 @@
</uni-popup> </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="coupon-popup popup" @touchmove.prevent.stop>
<view class="popup-header"> <view class="popup-header">
<text class="tit">优惠券</text> <text class="tit">优惠券</text>
@@ -517,8 +586,8 @@
</view> </view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }"> <scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view v-if="merchCoupon.data.length > 0"> <view v-if="coupon_list.length > 0">
<view class="coupon-item" v-for="(couponItem, couponIndex) in merchCoupon.data" :key="couponIndex" @click="selectCoupon(couponItem,merchCoupon.merch_id)"> <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="coupon-info" :style="{ backgroundColor: 'var(--main-color-shallow)' }">
<view class="info-wrap"> <view class="info-wrap">
<image class="coupon-line" mode="heightFix" :src="$util.img('public/uniapp/coupon/coupon_line.png')"/> <image class="coupon-line" mode="heightFix" :src="$util.img('public/uniapp/coupon/coupon_line.png')"/>
@@ -536,12 +605,8 @@
<text class="unit"></text> <text class="unit"></text>
</template> </template>
<view class="at-least"> <view class="at-least">
<template v-if="couponItem.at_least > 0"> <template v-if="couponItem.at_least > 0">{{ couponItem.at_least }}可用</template>
{{ couponItem.at_least }}可用 <template v-else>无门槛</template>
</template>
<template v-else>
无门槛
</template>
</view> </view>
</view> </view>
</view> </view>
@@ -550,7 +615,7 @@
<view v-if="couponItem.type == 'discount' && couponItem.discount_limit > 0" class="limit">最多可抵{{ couponItem.discount_limit }}</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 class="time font-size-goods-tag">有效期{{ couponItem.end_time ? $util.timeStampTurnTime(couponItem.end_time) : '长期有效' }}</view>
</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> </view>
</view> </view>
@@ -558,7 +623,7 @@
</scroll-view> </scroll-view>
<view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }"> <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>
</view> </view>
</uni-popup> </uni-popup>
@@ -573,7 +638,7 @@
<view class="title">{{ transactionAgreement.title }}</view> <view class="title">{{ transactionAgreement.title }}</view>
<view class="con"> <view class="con">
<scroll-view scroll-y="true" 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> </scroll-view>
</view> </view>
</view> </view>
@@ -588,7 +653,7 @@
<text class="iconfont icon-close" @click="$refs.editFormPopup.close()"></text> <text class="iconfont icon-close" @click="$refs.editFormPopup.close()"></text>
</view> </view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }"> <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> </scroll-view>
<view class="popup-footer" @click="saveForm" :class="{ 'bottom-safe-area': isIphoneX }"> <view class="popup-footer" @click="saveForm" :class="{ 'bottom-safe-area': isIphoneX }">
<view class="confirm-btn color-base-bg">确定</view> <view class="confirm-btn color-base-bg">确定</view>
@@ -603,9 +668,9 @@
<text class="iconfont icon-close" @click="$refs.memberGoodsCardPopup.close()"></text> <text class="iconfont icon-close" @click="$refs.memberGoodsCardPopup.close()"></text>
</view> </view>
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }"> <scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
<view v-for="(item, index) in selectGoodsCard.cardList" :key="index" 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="content">
<view class="title">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view> <view class="title">{{ item.goods_name }}</view>
<view class="info"> <view class="info">
<text v-if="item.card_type == 'timecard'">不限次数</text> <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 == 'oncecard'">剩余{{ item.num - item.use_num }}</text>
@@ -635,6 +700,7 @@
<script> <script>
import payment from './payment.js'; import payment from './payment.js';
export default { export default {
name: 'common-payment', name: 'common-payment',
data() { data() {
@@ -654,4 +720,4 @@
.order-cell .promotion-content { .order-cell .promotion-content {
flex: 1; flex: 1;
} }
</style> </style>

View File

@@ -270,7 +270,7 @@ export default {
}); });
setTimeout(() => { setTimeout(() => {
this.$util.redirectTo(this.$util.INDEX_PAGE_URL); this.$util.redirectTo('/pages/index/index');
}, 1000) }, 1000)
} }
} }
@@ -922,7 +922,7 @@ export default {
payClose() { payClose() {
// 更新购物车数量 // 更新购物车数量
this.$store.dispatch('getCartNumber'); this.$store.dispatch('getCartNumber');
this.$util.redirectTo('/pages_order/detail', { this.$util.redirectTo('/pages/order/detail', {
order_id: this.$refs.choosePaymentPopup.payInfo.order_id order_id: this.$refs.choosePaymentPopup.payInfo.order_id
}, 'redirectTo'); }, 'redirectTo');
}, },

View File

@@ -0,0 +1,215 @@
<template>
<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>
</x-skeleton>
</view>
</template>
<script>
// 文章
export default {
name: 'diy-article',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
list: [],
loading: true,
skeletonConfig: {
gridRows: 1,
gridRowsGap: '40rpx',
headWidth: '160rpx',
headHeight: '160rpx',
textRows: 2
}
};
},
created() {
this.getList();
},
watch: {
// 组件刷新监听
componentRefresh: function (nval) {
this.getList();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// 子项样式
itemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
}
return obj;
}
},
methods: {
getList() {
var data = {
num: this.value.count
};
if (this.value.sources == 'diy') {
data.num = 0;
data.article_id_arr = this.value.articleIds.toString();
}
this.$api.sendRequest({
url: '/api/article/lists',
data: data,
success: res => {
if (res.code == 0 && res.data) {
let data = res.data;
this.list = data;
}
this.loading = false;
}
});
},
toDetail(item) {
this.$util.redirectTo('/pages_tool/article/detail', {
article_id: item.article_id
});
},
imgError(index) {
if (this.list[index]) this.list[index].cover_img = this.$util.getDefaultImage().article;
}
}
};
</script>
<style lang="scss">
.article-wrap {
.list-wrap {
&.style-1 {
.item {
display: flex;
padding: 20rpx;
margin-top: 24rpx;
&:first-of-type {
margin-top: 0;
}
.article-img {
margin-right: 20rpx;
width: 160rpx;
height: 160rpx;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
}
}
.info-wrap {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
.title {
font-weight: bold;
margin-bottom: 10rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 30rpx;
line-height: 1.5;
}
.abstract {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: $font-size-tag;
}
.read-wrap {
display: flex;
color: #999ca7;
justify-content: flex-start;
align-items: center;
margin-top: 10rpx;
line-height: 1;
text {
font-size: $font-size-tag;
}
.iconfont {
font-size: 36rpx;
vertical-align: bottom;
margin-right: 10rpx;
}
.category-icon {
width: 8rpx;
height: 8rpx;
border-radius: 50%;
background: $base-color;
margin-right: 10rpx;
}
.date {
margin-left: 20rpx;
}
}
}
}
}
}
}
</style>

View File

@@ -0,0 +1,444 @@
<template>
<view data-component-name="diy-audio">
<view class="fui-audio style1" :style="{background:value.background}" v-if="value.type == 'style-2'">
<view class="content" style="padding-top: 20rpx;">
<view class="name" :style="{color:value.textcolor}">{{value.text}}</view>
<view class="author" :style="{color:value.subtitlecolor}">{{value.desc}}----{{value.id}}</view>
</view>
<view class="progress">
<view class="progressBar" :style="{width:audiowidth}"></view>
</view>
<view class="time" :style="{color:value.timecolor}">
{{audiotime}}
</view>
<view @click="play()" class="start" :class="status?'iconj icon-07zanting':'iconj icon-bofang'" style="padding-top: 18rpx"></view>
</view>
<view class="fui-audio style3" :style="{background:value.background}" v-else>
<!-- <audio src="/static/audio/bgm.mp3" controls loop></audio> -->
<view class="img">
<image :src="$util.img(value.imageUrl)"></image>
</view>
<view class="content">
<view class="name" :style="{color:value.textcolor}">{{value.text}}</view>
<view class="author" :style="{color:value.subtitlecolor}">{{value.desc}}</view>
</view>
<view class="progress">
<view class="progressBar" :style="{width:audiowidth}"></view>
</view>
<view class="time" :style="{color:value.timecolor}">
<!-- {{audios[value.id].audiotime}} -->
{{audiotime}}
</view>
<view @click="play()" class="start" :class="status?'iconj icon-07zanting':'iconj icon-bofang'"></view>
</view>
</view>
</template>
<script>
// 音频
export default {
name: 'diy-audio',
props: {
value: {
type: Object
}
},
data() {
return {
audiosObj:[],
audios: {},
audioContext:null,
audiotime:'00:01',
audiowidth:0,
status:0,//1播放0停止
};
},
created() {
// console.log(this.value)
this.audios[this.value.id] = {
audiotime:'00:01',
audiowidth:0
}
},
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
},
computed: {
videoWarpCss: function() {
var obj = '';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
play(){
var t = this.value.id, a = this.audiosObj[t] || !1;
var e = {
audio:this.$util.img(this.value.audioUrl),
}
if (!a) {
a = uni.createInnerAudioContext("audio_" + t);
var i = this.audiosObj;
i[t] = a, this.audiosObj = i
// uni.setStorageSync('audio_list',audio_list)
var audio_list = uni.getStorageSync('audio_list')?uni.getStorageSync('audio_list'):[]
if(audio_list.includes(t) == false){
audio_list.push(t)
uni.setStorageSync('audio_list',audio_list)
}
}
console.log(uni.getStorageSync('audio_list'))
var n = this;
// console.log(a)
a.onPlay(function() {
var e = setInterval(function() {
var i = a.currentTime / a.duration * 100 + "%", s = Math.floor(Math.ceil(a.currentTime) / 60), o = (Math.ceil(a.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(a.currentTime);
s < 10 && (s = "0" + s);
var u = s + ":" + o, c = n.audios;
// console.log(i)
c[t].audiowidth = i, c[t].Time = e, c[t].audiotime = u, c[t].seconds = r, n.audios = c;
}, 1e3);
});
var s = n.$util.img(n.value.audioUrl), o = n.audios[n.value.id].seconds || 0, r = 0, u = 1;
0 == u && a.onEnded(function(e) {
c[t].status = !1,n.status=!1,c[t].seconds = 0,console.log(c),n.audios = c;
});
var c = n.audios;
c[t] || (c[t] = {}), a.paused && 0 == o ? (a.src = s, a.play(), 1 == u && (a.loop = !0),
c[t].status = !0,n.status=!0, n.pauseOther(t)) : a.paused && o > 0 ? (a.play(), 0 == r ? a.seek(o) : a.seek(0),
c[t].status = !0,n.status=!0, n.pauseOther(t)) : (a.pause(), c[t].status = !1,n.status=!1),n.audios = c;
console.log(n.audios)
},
pauseOther: function(e) {
var t = this;
// console.log(this.audiosObj[this.value.id]);
var i = this.audiosObj[this.value.id],a = this.value.id
// console.log(i)
// console.log(a)
// if (a != e) {
// i.pause();
// var n = t.audios;
// n[a] && (n[a].status = !1, this.audios=n);
// }
var audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
var self = this;
[].forEach.call(audios, function (i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause();
})
}
// 给play事件绑定暂停函数
[].forEach.call(audios, function (i) {
i.addEventListener("play", pauseAll.bind(i));
})
// var audio_list = uni.getStorageSync('audio_list')
// audio_list.forEach(function(value, index) {
// if (value != e) {
// console.log(e)
// uni.createInnerAudioContext("audio_" + value).pause();
// }
// });
// this.audiosObj.forEach(function(value, index) {
// console.log(value);
// });
// this.each(this.audiosObj, function(a, i) {
// if (a != e) {
// i.pause();
// var n = t.data.audios;
// n[a] && (n[a].status = !1, t.setData({
// audios: n
// }));
// }
// });
},
play_bak(){
var t = this.value.id
this.audioContext = uni.createInnerAudioContext("audio_" + this.value.id);
this.audioContext.src = this.$util.img(this.value.audioUrl);
var that = this
if(this.status == 1){
this.audioContext.pause();
this.status = 0
return false
}
this.audioContext.play();
this.status = 1
this.audioContext.onCanplay(function(s){
var e = setInterval(function() {
var i = parseFloat(that.audioContext.currentTime) / parseFloat(that.audioContext.duration) * 100 + "%", s = Math.floor(Math.ceil(that.audioContext.currentTime) / 60), o = (Math.ceil(that.audioContext.currentTime) % 60 / 100).toFixed(2).slice(-2), r = Math.ceil(that.audioContext.currentTime);
s < 10 && (s = "0" + s);
var u = s + ":" + o, c = that.audios;
c[t].audiowidth = i, c[t].Time = e, c[t].audiotime = u, c[t].seconds = r
that.audios = c
// console.log(c)
console.log(that.audios[that.value.id].audiotime)
that.audiotime = that.audios[that.value.id].audiotime
that.audiowidth = that.audios[that.value.id].audiowidth
console.log(i)
that.lyg = i
}, 1e3);
});
this.audioContext.onEnded(() => {
console.log('播放结束');
this.status = 0
});
}
}
};
</script>
<style scoped>
.fui-audio {
width: 100%;
border: 1rpx solid #eeeeee;
padding: 0 30rpx 0 20rpx;
box-sizing: border-box;
position: relative;
overflow: hidden;
background: #fff;
}
.fui-audio .img {
width: 100rpx;
height: 100rpx;
background: #000;
}
.fui-audio .img image {
width: 100%;
height: 100%;
}
.fui-audio .name {
font-size: 26rpx;
color: #333;
}
.fui-audio .author {
font-size: 26rpx;
color: #666;
}
.fui-audio .time {
font-size: 24rpx;
color: #999;
}
.fui-audio .start {
border: 0;
padding: 0;
margin: 0;
font-size: 28rpx;
}
.progressBar {
height: 2rpx;
width: 0;
background: #333;
}
.fui-audio.style1 {
height: 86rpx;
line-height: 82rpx;
}
.fui-audio.style1 .img,.fui-audio.style2 .img {
display: none;
}
.fui-audio.style1 .name,.fui-audio.style2 .name {
float: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 300rpx;
}
.fui-audio.style1 .author,.fui-audio.style2 .author {
float: left;
margin-left: 12rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 200rpx;
}
.fui-audio.style1 .time,.fui-audio.style4 .time {
display: none;
}
.fui-audio.style1 .start {
position: absolute;
top: 0rpx;
right: 40rpx;
width: 40rpx;
height: 40rpx;
color: #000;
}
.fui-audio.style1 .progress {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.fui-audio.style2 {
height: 86rpx;
line-height: 82rpx;
}
.fui-audio.style2 .img {
display: none;
}
.fui-audio.style2 .time {
position: absolute;
top: 0;
right: 30rpx;
}
.fui-audio.style2 .name {
margin-left: 70rpx;
}
.fui-audio.style2 .start {
position: absolute;
top: 0rpx;
left: 30rpx;
width: 30rpx;
height: 30rpx;
color: #000;
}
.fui-audio.style2 .progress,.fui-audio.style3 .progress {
display: none;
}
.fui-audio.style3 {
padding: 8rpx;
}
.fui-audio.style3 .start {
position: absolute;
top: 30rpx;
left: 28rpx;
width: 56rpx;
height: 56rpx;
color: #fff;
/* border: 2rpx solid #fff; */
border-radius: 50%;
text-indent: 18rpx;
line-height: 56rpx;
}
.fui-audio.style3 .img,.fui-audio.style4 .img {
float: left;
margin-right: 20rpx;
}
.fui-audio.style3 .content {
width: 468rpx;
}
.fui-audio.style3 .content,.fui-audio.style4 .content {
float: left;
height: 100rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.fui-audio.style3 .content .name {
height: 40rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fui-audio.style3 .content .author {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fui-audio.style3 .time {
position: absolute;
top: 40rpx;
right: 30rpx;
}
.fui-audio.style4 {
padding: 10rpx;
}
.fui-audio.style4 .content {
padding-bottom: 18rpx;
height: 82rpx;
width: 500rpx;
}
.fui-audio.style4 .start {
position: absolute;
top: 32rpx;
right: 30rpx;
width: 30rpx;
height: 30rpx;
color: #000;
}
.fui-audio.style4 .name {
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fui-audio.style4 .author {
line-height: 1.2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fui-audio.style4 .progress {
background: #f5f5f5;
height: 4rpx;
position: absolute;
bottom: 24rpx;
left: 130rpx;
right: 30rpx;
border-radius: 2rpx;
overflow: hidden;
}
.fui-audio.style4 .progressBar {
height: 4rpx;
}
.diy-audio>>>.uni-video-container {
background-color: transparent;
}
</style>

View File

@@ -0,0 +1,728 @@
<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">
<!-- 商品头部 -->
<view v-if="value.titleStyle.isShow && list && list.length" :class="[value.titleStyle.style, 'bargain-head']" :style="{ backgroundImage: 'url(' + $util.img(value.titleStyle.backgroundImage) + '), linear-gradient(to right,' + value.titleStyle.bgColorStart + ',' + value.titleStyle.bgColorEnd + ')' }">
<view v-if="value.titleStyle.leftStyle == 'text'" class="left-text" :style="{ fontSize: value.titleStyle.fontSize * 2 + 'rpx', color: value.titleStyle.textColor, fontWeight: value.titleStyle.fontWeight ? 'bold' : '' }">
{{ value.titleStyle.leftText }}
</view>
<image v-else class="left-img" :src="$util.img(value.titleStyle.leftImg)" mode="heightFix"></image>
<view class="head-content" v-if="value.titleStyle.style == 'style-1'" :style="{ color: value.titleStyle.textColor }">低至0元免费拿</view>
<view class="head-right" :style="{ fontSize: value.titleStyle.moreFontSize * 2 + 'rpx', color: value.titleStyle.moreColor }" @click="$util.redirectTo('/pages_promotion/bargain/list')">
<text>{{ value.titleStyle.more }}</text>
<text class="iconfont icon-right"></text>
</view>
</view>
<!-- 商品列表 -->
<template v-if="value.template == 'row1-of1'">
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
</view>
<view class="content"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.btnStyle.control">
<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 class="progress" v-if="value.style == 'style-2'">
<view class="bg">
<view class="curr" :style="{ width: progress(item) * 2 + 'rpx' }">
<image class="progress-bar" mode="widthFix" :src="$util.img('public/uniapp/bargain/progress_bar_01.png')"/>
</view>
</view>
<view class="num" v-if="item.is_bargaining">
已砍
<text>{{ (item.price - item.curr_price).toFixed(2) }}</text>
仅差
<text>{{ item.curr_price }}</text>
</view>
<view class="num" v-else>
最低可砍至
<text>{{ item.floor_price }}</text>
</view>
</view>
<view class="progress" v-if="value.style == 'style-3'">
最低可砍至
<text class="num">{{ item.floor_price }}</text>
</view>
<view class="price-wrap">
<view class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.price.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">.{{ item.price.split('.')[1] }}</text>
</view>
<button v-if="value.btnStyle.control" :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'
}">
{{ item.is_bargaining ? '继续砍价' : value.btnStyle.text }}
</button>
</view>
</view>
</view>
</template>
<template v-if="value.template == 'horizontal-slide'">
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)" :lazy-load="true"/>
<image class="bg" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix"/>
<view class="num" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
已砍{{ item.sale_num }}
</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
<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 class="discount-price"
v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.floor_price.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.floor_price.split('.')[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
¥{{ item.price }}
</view>
</view>
</view>
</scroll-view>
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex)" :lazy-load="true"/>
<image class="bg" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :src="$util.img('public/uniapp/bargain/bg.png')" mode="widthFix"/>
<view class="num" v-if="value.saleStyle.control && value.template == 'horizontal-slide' && value.style != 'style-2'" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
已砍{{ item.sale_num }}
</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
<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 class="discount-price" v-if="value.priceStyle.mainControl && value.template == 'horizontal-slide' && value.style != 'style-2'">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.floor_price.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.floor_price.split('.')[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
¥{{ item.price }}
</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</x-skeleton>
</view>
</template>
<script>
export default {
name: 'diy-bargain',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
list: [],
page: 1,
loading: true,
skeletonType: '',
skeletonConfig: {}
};
},
components: {},
async created() {
this.initSkeleton();
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') await this.getDataing();
this.getData();
},
watch: {
// 组件刷新监听
componentRefresh: async function(nval) {
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') await this.getDataing();
this.getData();
}
},
computed: {
warpCss() {
var obj = '';
if (this.value.componentBgColor) obj += 'background:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().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);
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
obj += 'margin-left:' + width + 'px;';
obj += 'margin-right:' + width + 'px;';
}
return obj;
},
swiperHeight() {
if (this.value.nameLineMode == 'multiple') {
if (this.value.ornament.type == 'shadow') return '420rpx';
else return '400rpx';
}
if (this.value.ornament.type == 'shadow') return '386rpx';
else return '378rpx';
}
},
methods: {
initSkeleton() {
if (this.value.template == 'row1-of1') {
// 单列 风格
this.skeletonType = 'list';
this.skeletonConfig = {
textRows: 2
};
} else if (this.value.template == 'horizontal-slide') {
// 横向滑动 风格
this.skeletonType = 'waterfall';
this.skeletonConfig = {
gridRows: 1,
gridColumns: 3,
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '80%']
};
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},
// 查找自己参与的砍价
async getDataing() {
var res = await this.$api.sendRequest({
url: '/bargain/api/goods/bargainingList',
data: {},
async: false
});
res.data &&
res.data.forEach((item, index) => {
item.is_bargaining = 1;
});
this.list = res.data || [];
this.loading = false;
},
// 查找可砍价的商品
getData() {
var data = {
num: this.value.count,
is_exclude_bargaining: 1
};
if (this.value.sources == 'diy') {
data.num = 0;
data.id_arr = this.value.goodsId.toString();
}
this.$api.sendRequest({
url: '/bargain/api/goods/lists',
data: data,
success: res => {
if (res.code == 0) {
if (this.value.template == 'row1-of1' && this.value.style == 'style-2') this.list =
this.list.concat(res.data).splice(0, this.value.count);
else this.list = res.data;
// 切屏滚动,每页显示固定数量
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
}
this.loading = false;
}
});
},
progress(data) {
// 214 表示当前进度条的宽度
let progress = (((parseFloat(data.price) - parseFloat(data.curr_price)) / parseFloat(data.price)) * 214)
.toFixed();
if (progress == 'NaN') {
progress = 0;
}
return progress;
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/bargain/detail', {
b_id: e.bargain_id
});
},
imageError(index) {
this.list[index].goods_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
}
};
</script>
<style lang="scss">
/deep/.uni-scroll-view ::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
/deep/::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
touch-action: none;
}
.diy-bargain {
overflow: hidden;
// 头部
.bargain-head {
&.style-1 {
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
box-sizing: border-box;
padding: 0 20rpx;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20rpx;
border-radius: 18rpx 18rpx 0 0;
.left-img {
height: 40rpx;
width: 156rpx;
}
.head-content {
position: relative;
color: #fff;
font-size: $font-size-tag;
margin-right: auto;
margin-left: 20rpx;
line-height: 1;
&::after {
content: '';
position: absolute;
width: 2rpx;
height: 24rpx;
background-color: #fff;
top: 50%;
transform: translateY(-50%);
left: -12rpx;
}
}
.head-right {
display: flex;
align-items: center;
font-size: $font-size-sub;
color: #fff;
}
}
&.style-2 {
display: flex;
justify-content: space-between;
align-items: center;
height: 88rpx;
box-sizing: border-box;
padding: 0 20rpx;
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 20rpx;
border-radius: 18rpx 18rpx 0 0;
.left-img {
height: 40rpx;
width: 156rpx;
}
.head-right {
display: flex;
align-items: center;
justify-content: center;
height: 36rpx;
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
border-radius: 24rpx;
padding: 2rpx;
text:nth-child(1) {
position: relative;
left: 6rpx;
transform: scale(0.9);
}
text:nth-child(2) {
padding: 6rpx 4rpx 4rpx;
background-color: #fff;
color: #ffbd5b;
border-radius: 50%;
transform: scale(0.6);
font-weight: bold;
line-height: 1;
}
}
}
}
// 商品列表
&.row1-of1 {
.item {
display: flex;
margin-bottom: 20rpx;
padding: 16rpx;
&.shadow {
margin: 8rpx 8rpx 20rpx 8rpx;
}
&:last-child {
margin-bottom: 0;
padding-bottom: 20rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
>image {
width: 200rpx;
}
}
.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 6rpx 0 6rpx 20rpx;
.goods-name {
&.multi-hidden {
line-height: 1.3;
}
}
.price-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.discount-price {
white-space: nowrap;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: var(--price-color);
}
.price {
font-size: $font-size-toolbar;
color: var(--price-color);
}
}
button {
margin: 0;
padding: 0 20rpx;
color: var(--btn-text-color);
background-color: $base-color;
color: #fff;
min-width: 112rpx;
height: 52rpx;
line-height: 52rpx;
font-size: $font-size-tag;
font-weight: bold;
}
}
}
&.style-2 {
.discount-price {
position: relative;
}
.progress {
display: flex;
flex-direction: column;
margin-top: 10rpx;
margin-right: 16rpx;
.bg {
margin-left: 6rpx;
width: auto;
height: 20rpx;
border-radius: 20rpx;
background-color: #ffeadb;
position: relative;
&::after {
content: '';
width: 26rpx;
height: 26rpx;
border-radius: 50%;
background-color: #fa1a1a;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -18rpx;
}
.curr {
width: 0;
height: 20rpx;
border-radius: 20rpx;
background-color: #fa1a1a;
position: relative;
.progress-bar {
position: absolute;
right: -20rpx;
width: 30rpx;
height: 30rpx;
max-width: inherit !important;
max-height: inherit !important;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
}
}
.num {
font-size: $font-size-tag;
margin-top: 12rpx;
line-height: 1;
text {
color: #fa1a1a;
}
}
}
}
&.style-3 {
.progress {
display: flex;
color: $color-tip;
font-size: $font-size-sub;
.num {
color: var(--price-color);
}
}
.item {
.content {
justify-content: space-around;
}
.img-wrap {
overflow: hidden;
}
}
}
}
&.horizontal-slide {
.scroll {
width: calc(100% - 40rpx);
padding: 20rpx;
line-height: 1;
white-space: nowrap;
.item.shadow {
margin-bottom: 8rpx;
}
}
.flex-between {
justify-content: space-between;
}
.item {
display: inline-block;
width: 200rpx;
overflow: hidden;
box-sizing: border-box;
&:nth-child(3n + 3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
>image {
width: 100%;
}
.bg {
position: absolute;
width: 100%;
height: 60rpx;
bottom: 0;
left: 0;
z-index: 2;
}
.num {
width: 180rpx;
position: absolute;
bottom: 10rpx;
padding-left: 20rpx;
font-size: 20rpx;
line-height: 1;
color: #ffffff;
z-index: 3;
}
}
.content {
padding: 10rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
&.multi-content {
height: 160rpx;
box-sizing: border-box;
}
.goods-name {
line-height: 1.3;
&.multi-hidden {
white-space: break-spaces;
}
}
.discount-price {
white-space: nowrap;
margin-top: auto;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: var(--price-color);
}
.price {
font-size: $font-size-toolbar;
color: var(--price-color);
}
}
.original-price {
margin-top: 4rpx;
font-size: $font-size-tag;
color: $color-tip;
line-height: 1;
text-decoration: line-through;
}
}
}
.swiper {
padding: 20rpx;
width: 100%;
white-space: nowrap;
box-sizing: border-box;
.swiper-item {
display: flex;
align-items: center;
}
.item {
width: 200rpx;
box-sizing: border-box;
}
}
}
}
</style>

View File

@@ -0,0 +1,293 @@
<template>
<view data-component-name="diy-bottom-nav" v-if="tabBarList && tabBarList.list">
<view class="tab-bar" :style="{ backgroundColor: tabBarList.backgroundColor }">
<view class="tabbar-border"></view>
<view class="item" v-for="(item, index) in tabBarList.list" :key="item.id" @click="redirectTo(item.link)">
<view class="bd">
<block v-if="item.link.wap_url == '/pages/goods/cart'">
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2" :animation="cartAnimation" id="tabbarCart">
<block v-if="verify(item.link)">
<image v-if="item.selected_icon_type == 'img'" :src="$util.img(item.selectedIconPath)" />
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath" :value="item.selected_style ? item.selected_style : null"></diy-icon>
</block>
<block v-else>
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath" :value="item.style ? item.style : null"></diy-icon>
</block>
<view class="cart-count-mark font-size-activity-tag"
:class="{ max: item.link.wap_url == '/pages/goods/cart' && cartNumber > 99 }"
:style="{ background: 'var(--price-color)' }" v-if="cartNumber > 0">
{{ cartNumber > 99 ? '99+' : cartNumber }}
</view>
</view>
</block>
<block v-else>
<view class="icon" v-if="tabBarList.type == 1 || tabBarList.type == 2">
<block v-if="verify(item.link)">
<image v-if="item.selected_icon_type == 'img'" :src="$util.img(item.selectedIconPath)" />
<diy-icon v-if="item.selected_icon_type == 'icon'" :icon="item.selectedIconPath"
:value="item.selected_style ? item.selected_style : null"></diy-icon>
</block>
<block v-else>
<image v-if="item.icon_type == 'img'" :src="$util.img(item.iconPath)" />
<diy-icon v-if="item.icon_type == 'icon'" :icon="item.iconPath" :value="item.style ? item.style : null"></diy-icon>
</block>
</view>
</block>
<view class="label" v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'diy'" :style="{ color: verify(item.link) ? tabBarList.textHoverColor : tabBarList.textColor }">
{{ lang =='en-us'?item.en_text:item.text }}
</view>
<view class="label" v-if="(tabBarList.type == 1 || tabBarList.type == 3) && tabBarList.theme == 'default'" :style="{ color: verify(item.link) ? 'var(--base-color)' : '#333333' }">
{{ lang =='en-us'?item.en_text:item.text }}
</view>
</view>
</view>
</view>
<!-- 解决fixed定位后底部导航栏塌陷问题 -->
<view class="tab-bar-placeholder"></view>
</view>
</template>
<script>
export default {
name: 'diy-bottom-nav',
props: {
value: {
type: Object
},
name: {
type: String,
default: ''
}
},
data() {
return {
lang:uni.getStorageSync("lang"),
currentRoute: '', //当前页面路径
jumpFlag: true, //是否可以跳转,防止重复点击
cartAnimation: {}
};
},
mounted() {
let currentPage = getCurrentPages()[getCurrentPages().length - 1];
if (currentPage && currentPage.route) {
this.currentRoute = currentPage.route;
}
this.$nextTick(() => {
if (!this.$store.state.cartPosition) {
let query = uni.createSelectorQuery().in(this);
query.select('#tabbarCart')
.boundingClientRect(data => {
if (data) this.$store.commit('setCartPosition', data);
}).exec();
query.select('.tab-bar')
.boundingClientRect(data => {
if (data) this.$store.commit('setTabBarHeight', data.height +
'px');
}).exec();
}
});
},
computed: {
cartChange() {
return this.$store.state.cartChange;
}
},
watch: {
cartChange: function (nval, oval) {
if (nval > oval) {
let animation = uni.createAnimation({
duration: 200,
timingFunction: 'ease'
});
animation.scale(1.2).step();
this.cartAnimation = animation.export();
setTimeout(() => {
animation.scale(1).step();
this.cartAnimation = animation.export();
}, 300);
}
}
},
methods: {
redirectTo(link) {
this.$emit('callback');
this.$util.diyRedirectTo(link);
},
verify(link) {
if (link == null || link == '' || !link.wap_url) return false;
if (this.name) {
var url = this.currentRoute + '?name=' + this.name;
} else {
var url = this.currentRoute;
}
// 首页特殊处理
if (link.wap_url == '/pages/index/index' && this.name == 'DIY_VIEW_INDEX') {
return true;
} else if (url && link.wap_url.indexOf(url) != -1) {
return true;
}
return false;
}
}
};
</script>
<style lang="scss">
.placeholder {
height: 112rpx;
&.bluge {
height: 180rpx;
}
}
.safe-area {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar {
background-color: #fff;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
z-index: 998;
display: flex;
border-top: 2rpx solid #f5f5f5;
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.tabbar-border {
background-color: rgba(255, 255, 255, 0.329412);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 2rpx;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.item {
display: flex;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex: 1;
flex-direction: column;
padding-bottom: 10rpx;
box-sizing: border-box;
.bd {
position: relative;
height: 100rpx;
flex-direction: column;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
.icon {
position: relative;
display: inline-block;
margin-top: 10rpx;
width: 40rpx;
height: 40rpx;
font-size: 40rpx;
line-height: 40rpx;
image {
width: 100%;
height: 100%;
}
>view {
height: inherit;
display: flex;
align-items: center;
}
.bar-icon {
font-size: 42rpx;
}
}
.label {
position: relative;
text-align: center;
font-size: 24rpx;
line-height: 1;
margin-top: 12rpx;
}
}
&.bulge {
.bd {
position: relative;
height: 100rpx;
flex-direction: column;
text-align: center;
.icon {
margin-top: -60rpx;
margin-bottom: 4rpx;
border-radius: 50%;
width: 100rpx;
height: 102rpx;
padding: 10rpx;
border-top: 2rpx solid #f5f5f5;
background-color: #fff;
box-sizing: border-box;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.label {
position: relative;
text-align: center;
font-size: 24rpx;
height: 40rpx;
line-height: 40rpx;
}
}
}
.cart-count-mark {
position: absolute;
top: -8rpx;
right: -18rpx;
width: 24rpx;
height: 24rpx !important;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
padding: 6rpx;
border-radius: 50%;
z-index: 99;
&.max {
width: 40rpx;
border-radius: 24rpx;
right: -28rpx;
}
}
}
}
.tab-bar-placeholder {
padding-bottom: calc(constant(safe-area-inset-bottom) + 112rpx);
padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
}
</style>

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -1,23 +1,26 @@
<template> <template>
<view data-component-name="diy-comp-extend"></view> <view data-component-name="diy-comp-extend" :style="value.pageStyle">
<view></view>
</view>
</template> </template>
<script> <script>
// //
import DiyMinx from './minx.js'
export default { export default {
name: 'diy-comp-extend', name: 'diy-comp-extend',
props: { props: {
value: { value: {
type: Object type: Object,
default: () => {
return {};
}
} }
}, },
mixins: [DiyMinx],
data() { data() {
return {}; return {};
}, },
computed: {}, computed: {},
created() { }, created() {},
methods: {} methods: {}
}; };
</script> </script>

File diff suppressed because it is too large Load Diff

View File

@@ -1,11 +1,16 @@
<template> <template>
<view :style="componentStyle" data-component-name="diy-digit"> <view :style="componentStyle">
<scroll-view :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]" <scroll-view
:scroll-x="value.showStyle == 'singleSlide'"> :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
:scroll-x="value.showStyle == 'singleSlide'"
>
<view class="uni-scroll-view-content"> <view class="uni-scroll-view-content">
<view v-for="(item, index) in value.list" :key="index" <view
v-for="(item, index) in value.list"
:key="index"
:class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']" :class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']"
:style="{ width: (100 / value.rowCount + '%') + ';' }"> :style="{ width: (100 / value.rowCount + '%') + ';' }"
>
<view style="display:flex;"> <view style="display:flex;">
<view :style="{ <view :style="{
'line-height': '1.2;', 'line-height': '1.2;',
@@ -13,8 +18,14 @@
'font-weight': '600;', 'font-weight': '600;',
'color': value.font.titlecolor + ';' 'color': value.font.titlecolor + ';'
}"> }">
<uv-count-to :ref="`countTo-${index}`" :autoplay="true" :startVal="30" :endVal="item.title" <uv-count-to
:decimals="getvalue(item.title)" decimal="."></uv-count-to> :ref="`countTo-${index}`"
:autoplay="true"
:startVal="30"
:endVal="item.title"
:decimals="getvalue(item.title)"
decimal="."
></uv-count-to>
<text :style="{ <text :style="{
'margin-left': '4rpx;', 'margin-left': '4rpx;',
'font-size': (value.font.unitsize * 2 + 'rpx') + ';', 'font-size': (value.font.unitsize * 2 + 'rpx') + ';',
@@ -38,17 +49,21 @@
</template> </template>
<script> <script>
import DiyMinx from './minx.js' import uvCountTo from '@/components/uv-count-to/uv-count-to.vue'
// import nsLogin from '@/components/ns-login/ns-login.vue'
export default { export default {
name: 'diy-digit', name: 'diy-digit',
components: {
uvCountTo,
nsLogin
},
props: { props: {
value: { value: {
type: Object, type: Object,
default: () => ({}) default: () => ({})
} }
}, },
mixins: [DiyMinx],
data() { data() {
return { return {
pageWidth: '', pageWidth: '',
@@ -68,17 +83,17 @@ export default {
componentStyle() { componentStyle() {
let style = ''; let style = '';
style += 'background-image:url(' + this.$util.img(this.value.imageUrl) + ');background-size:100% 100%;'; style += 'background-image:url(' + this.$util.img(this.value.imageUrl) + ');background-size:100% 100%;';
if (this.value.componentAngle == 'round') { if (this.value.componentAngle == 'round') {
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;'; style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
style += 'border-top-right-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-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
style += 'border-bottom-right-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 += '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 : '') + ';'; style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
return style; return style;
} }
}, },
@@ -87,17 +102,17 @@ export default {
getvalue(value) { getvalue(value) {
return value % 1 !== 0 ? 2 : 0; return value % 1 !== 0 ? 2 : 0;
}, },
// //
redirectTo(item) { redirectTo(item) {
if (!item.wap_url || this.$util.getCurrRoute() != this.$util.MEMBER_PAGE_URL || this.storeToken) { if (!item.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
console.log(item); console.log(item);
this.$util.diyRedirectTo(item); this.$util.diyRedirectTo(item);
} else { } else {
this.$refs.login.open(item.wap_url); this.$refs.login.open(item.wap_url);
} }
}, },
// //
swiperChange(event) { swiperChange(event) {
this.swiperCurrent = event.detail.current; this.swiperCurrent = event.detail.current;
@@ -110,31 +125,31 @@ export default {
.graphic-nav { .graphic-nav {
padding: 16rpx; padding: 16rpx;
box-sizing: border-box; box-sizing: border-box;
&.fixed-layout { &.fixed-layout {
.uni-scroll-view-content { .uni-scroll-view-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
&.singleSlide { &.singleSlide {
.uni-scroll-view-content { .uni-scroll-view-content {
display: flex; display: flex;
} }
.graphic-nav-item { .graphic-nav-item {
flex-shrink: 0; flex-shrink: 0;
} }
} }
&.pageSlide { &.pageSlide {
position: relative; position: relative;
.uni-swiper-dots-horizontal { .uni-swiper-dots-horizontal {
bottom: 0rpx; bottom: 0rpx;
} }
&.straightLine { &.straightLine {
.uni-swiper-dot { .uni-swiper-dot {
width: 30rpx; width: 30rpx;
@@ -142,7 +157,7 @@ export default {
height: 8rpx; height: 8rpx;
} }
} }
&.circle { &.circle {
.uni-swiper-dot { .uni-swiper-dot {
width: 14rpx; width: 14rpx;
@@ -150,21 +165,21 @@ export default {
} }
} }
} }
.graphic-nav-wrap { .graphic-nav-wrap {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.graphic-nav-item { .graphic-nav-item {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 14rpx 0; padding: 14rpx 0;
box-sizing: border-box; box-sizing: border-box;
.graphic-text { .graphic-text {
line-height: 1.3; line-height: 1.3;
white-space: nowrap; white-space: nowrap;
@@ -172,18 +187,18 @@ export default {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
text-align: center; text-align: center;
&.alone { &.alone {
padding-top: 0; padding-top: 0;
} }
} }
&.text { &.text {
.graphic-text { .graphic-text {
padding-top: 0; padding-top: 0;
} }
} }
.graphic-img { .graphic-img {
position: relative; position: relative;
display: flex; display: flex;
@@ -192,7 +207,7 @@ export default {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
font-size: 90rpx; font-size: 90rpx;
.tag { .tag {
position: absolute; position: absolute;
top: -10rpx; top: -10rpx;
@@ -206,14 +221,14 @@ export default {
line-height: 1; line-height: 1;
font-size: 24rpx; font-size: 24rpx;
} }
.icon { .icon {
font-size: 50rpx; font-size: 50rpx;
color: #606266; color: #606266;
} }
} }
} }
&.pageSlide { &.pageSlide {
.graphic-nav-item { .graphic-nav-item {
flex-shrink: 0; flex-shrink: 0;
@@ -232,16 +247,16 @@ export default {
justify-content: center; justify-content: center;
margin-top: -20rpx; margin-top: -20rpx;
padding-bottom: 8rpx; padding-bottom: 8rpx;
.swiper-dot { .swiper-dot {
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
margin: 8rpx; margin: 8rpx;
&.active { &.active {
background-color: #000; background-color: #000;
} }
} }
&.straightLine { &.straightLine {
.swiper-dot { .swiper-dot {
width: 30rpx; width: 30rpx;
@@ -249,7 +264,7 @@ export default {
height: 8rpx; height: 8rpx;
} }
} }
&.circle { &.circle {
.swiper-dot { .swiper-dot {
width: 15rpx; width: 15rpx;

View File

@@ -1,51 +1,48 @@
<template> <template>
<view data-component-name="diy-fenxiao-goods-list" class="diy-fenxiao" v-if="list.length" <view :style="value.pageStyle" v-if="list && list.length">
:class="['goods-list', value.template, value.style]" :style="goodsListWarpCss"> <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" @tap.stop="toDetail(item)" <view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
:class="[value.ornament.type]" :style="goodsItemCss"> <view class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<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)"/>
<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' }]">
{{ isEnEnv ? item.en_goods_name : item.goods_name }}
</view>
</view> </view>
<view class="pro-info"> <view class="info-wrap" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<view class="discount-price"> <view class="name-wrap">
<view class="price-wrap" v-if="value.priceStyle.mainControl"> <view v-if="value.goodsNameStyle.control" class="goods-name"
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.goodsNameStyle.color : '', fontWeight: value.goodsNameStyle.fontWeight ? 'bold' : '' }"
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }"> </text> :class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]"
<text class="price price-style large" >
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ {{ item.goods_name }}
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'
}" @tap.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'
}" @tap.stop="delFollowTip(item, index)">
取消关注
</view> </view>
</view> </view>
<view class="delete-price" v-if="value.priceStyle.lineControl" <view class="pro-info">
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }"> <view class="discount-price">
{{ item.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> </view>
</view> </view>
@@ -54,16 +51,16 @@
</template> </template>
<script> <script>
//
import DiyMinx from './minx.js'
export default { export default {
name: 'diy-fenxiao-goods-list', name: 'diy-fenxiao-goods-list',
props: { props: {
value: { value: {
type: Object type: Object,
default: () => {
return {};
}
} }
}, },
mixins: [DiyMinx],
data() { data() {
return { return {
list: [], list: [],
@@ -75,7 +72,7 @@ export default {
this.currentRoute = '/' + currentPage.route; this.currentRoute = '/' + currentPage.route;
if (!this.storeToken) { if (!this.storeToken) {
this.$util.redirectTo( this.$util.redirectTo(
this.$util.LOGIN_PAGE_URL, '/pages_tool/login/login',
{ {
back: this.currentRoute back: this.currentRoute
}, },
@@ -86,7 +83,7 @@ export default {
}, },
watch: { watch: {
// //
componentRefresh: function (nval) { componentRefresh: function(nval) {
this.getData(); this.getData();
} }
}, },
@@ -124,7 +121,7 @@ export default {
methods: { methods: {
// //
toDetail(e) { toDetail(e) {
this.$util.redirectTo('/pages_goods/detail', { goods_id: e.goods_id }); this.$util.redirectTo('/pages/goods/detail', { goods_id: e.goods_id });
}, },
// //
followGoods(e, index) { followGoods(e, index) {
@@ -215,7 +212,8 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.diy-fenxiao {} .diy-fenxiao {
}
// //
.goods-list.row1-of1 { .goods-list.row1-of1 {
@@ -223,11 +221,9 @@ export default {
background-color: #fff; background-color: #fff;
display: flex; display: flex;
margin-bottom: 20rpx; margin-bottom: 20rpx;
&:last-of-type { &:last-of-type {
margin-bottom: 0; margin-bottom: 0;
} }
&.shadow { &.shadow {
margin: 8rpx 8rpx 20rpx 8rpx; margin: 8rpx 8rpx 20rpx 8rpx;
} }
@@ -236,7 +232,6 @@ export default {
width: 180rpx; width: 180rpx;
overflow: hidden; overflow: hidden;
margin-right: 20rpx; margin-right: 20rpx;
image { image {
width: 100%; width: 100%;
} }
@@ -252,11 +247,9 @@ export default {
.name-wrap { .name-wrap {
flex: 1; flex: 1;
margin-bottom: 10rpx; margin-bottom: 10rpx;
.goods-name { .goods-name {
font-size: $font-size-base; font-size: $font-size-base;
line-height: 1.3; line-height: 1.3;
&.multi-hidden { &.multi-hidden {
height: 72rpx; height: 72rpx;
} }
@@ -267,31 +260,25 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
.sale { .sale {
font-size: 20rpx; font-size: 20rpx;
line-height: 1; line-height: 1;
color: #999; color: #999;
} }
.discount-price { .discount-price {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 10rpx; margin-bottom: 10rpx;
.price-wrap { .price-wrap {
white-space: nowrap; white-space: nowrap;
.unit { .unit {
font-size: $font-size-tag; font-size: $font-size-tag;
color: $base-color; color: $base-color;
} }
.price { .price {
font-size: $font-size-toolbar; font-size: $font-size-toolbar;
} }
text { text {
font-weight: bold; font-weight: bold;
color: $base-color; color: $base-color;
@@ -307,7 +294,6 @@ export default {
font-size: $font-size-activity-tag; font-size: $font-size-activity-tag;
} }
} }
.sale-btn { .sale-btn {
position: absolute; position: absolute;
right: 20rpx; right: 20rpx;
@@ -327,7 +313,6 @@ export default {
.goods-list.row1-of2 { .goods-list.row1-of2 {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.goods-item { .goods-item {
position: relative; position: relative;
background: #fff; background: #fff;
@@ -335,30 +320,24 @@ export default {
margin-right: 20rpx; margin-right: 20rpx;
margin-top: 20rpx; margin-top: 20rpx;
width: calc(50% - 10rpx); width: calc(50% - 10rpx);
&:nth-child(2n + 2) { &:nth-child(2n + 2) {
width: calc(50% - 11rpx); width: calc(50% - 11rpx);
margin-right: 0; margin-right: 0;
} }
&:nth-of-type(1), &:nth-of-type(1),
&:nth-of-type(2) { &:nth-of-type(2) {
margin-top: 0; margin-top: 0;
} }
&.shadow { &.shadow {
width: calc(50% - 18rpx); width: calc(50% - 18rpx);
&:nth-child(2n-1) { &:nth-child(2n-1) {
margin-left: 8rpx; margin-left: 8rpx;
} }
&:nth-of-type(1), &:nth-of-type(1),
&:nth-of-type(2) { &:nth-of-type(2) {
margin-top: 8rpx; margin-top: 8rpx;
} }
} }
.goods-img { .goods-img {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@@ -379,11 +358,9 @@ export default {
.name-wrap { .name-wrap {
margin-bottom: 10rpx; margin-bottom: 10rpx;
.goods-name { .goods-name {
font-size: $font-size-base; font-size: $font-size-base;
line-height: 1.3; line-height: 1.3;
&.multi-hidden { &.multi-hidden {
height: 72rpx; height: 72rpx;
} }
@@ -395,30 +372,24 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
.sale { .sale {
font-size: 20rpx; font-size: 20rpx;
line-height: 1; line-height: 1;
color: #999; color: #999;
} }
.discount-price { .discount-price {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
.price-wrap { .price-wrap {
white-space: nowrap; white-space: nowrap;
.unit { .unit {
font-size: $font-size-tag; font-size: $font-size-tag;
color: $base-color; color: $base-color;
} }
.price { .price {
font-size: $font-size-toolbar; font-size: $font-size-toolbar;
} }
text { text {
font-weight: bold; font-weight: bold;
color: $base-color; color: $base-color;
@@ -434,7 +405,6 @@ export default {
font-size: $font-size-activity-tag; font-size: $font-size-activity-tag;
} }
} }
.sale-btn { .sale-btn {
position: absolute; position: absolute;
right: 20rpx; right: 20rpx;

View File

@@ -0,0 +1,115 @@
<template>
<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>
<script>
// 获取系统状态栏的高度
let systemInfo = uni.getSystemInfoSync();
export default {
name: 'diy-float-btn',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
navHeight: 0,
statusBarHeight: systemInfo.statusBarHeight
};
},
created() {},
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
},
components: {},
methods: {},
computed: {
style() {
let style = {},
height = 54;
// #ifdef MP
height = systemInfo.platform == 'ios' ? 54 : 58;
// #endif
switch (parseInt(this.value.bottomPosition)) {
case 1:
style.top = (this.navHeight + this.statusBarHeight + parseInt(this.value.btnBottom)) * 2 + 'rpx';
break;
case 2:
style.top = (this.navHeight + this.statusBarHeight + parseInt(this.value.btnBottom)) * 2 + 'rpx';
break;
case 3:
style.bottom = (100 + parseInt(this.value.btnBottom)) * 2 + 'rpx';
break;
case 4:
style.bottom = (100 + parseInt(this.value.btnBottom)) * 2 + 'rpx';
break;
}
return this.$util.objToStyle(style);
}
}
};
</script>
<style lang="scss">
.float-btn {
position: fixed;
bottom: 20%;
right: 40rpx;
z-index: 990;
&.left_top {
top: 100rpx;
left: 30rpx;
}
&.right_top {
top: 100rpx;
right: 30rpx;
}
&.left_bottom {
bottom: 160rpx;
left: 30rpx;
padding-bottom: constant(safe-area-inset-bottom);
/*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom);
/*兼容 IOS>11.2*/
}
&.right_bottom {
bottom: 160rpx;
right: 30rpx;
padding-bottom: constant(safe-area-inset-bottom);
/*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom);
/*兼容 IOS>11.2*/
}
.button-box {
margin-bottom: 20rpx;
&:last-child {
margin-bottom: 0;
}
image {
width: 100%;
height: 100%;
}
}
}
</style>

View File

@@ -0,0 +1,34 @@
<template>
<!-- #ifdef MP -->
<view :style="value.pageStyle">
<view v-if="value.isShow">
<official-account></official-account>
</view>
</view>
<!--#endif -->
</template>
<script>
// 关注公众号
export default {
name: 'diy-follow-official-account',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {};
},
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
},
methods: {}
};
</script>
<style></style>

View File

@@ -0,0 +1,110 @@
<template>
<view data-component-name="diy-form" class="diy-from" :style="style">
<view class="fui-cell-group">
<view class="fui-cell ">
<view class="fui-cell-label ">您的姓名</view>
<view class="fui-cell-info">
<input v-model="Form.realname" class="fui-input" placeholder="请输入您的姓名" value=""></input>
</view>
</view>
<view class="fui-cell ">
<view class="fui-cell-label">手机号码</view>
<view class="fui-cell-info">
<input v-model="Form.mobile" class="fui-input" maxlength="11" placeholder="请输入您的手机号" type="number" ></input>
</view>
</view>
<view class="fui-cell ">
<view class="fui-cell-label">您的邮箱</view>
<view class="fui-cell-info">
<input v-model="Form.mailbox" class="fui-input" placeholder="请输入您的邮箱" type="text" ></input>
</view>
</view>
<view class="fui-cell">
<view class="fui-cell-label">所在城市</view>
<view class="fui-cell-info">
<input v-model="Form.citys" class="fui-input" placeholder="请输入您的所在地" value=""></input>
</view>
</view>
<view class="fui-cell">
<view class="fui-cell-label">备注</view>
<view class="fui-cell-info">
<input v-model="Form.remark" class="fui-input" placeholder="请输入备注" value=""></input>
</view>
</view>
</view>
<view @click="submitform" class="fui-btn btn-danger block mtop">提交信息</view>
</view>
</template>
<script>
export default {
name: 'diy-from',
props: {
value: {
type: Object
}
},
data() {
return {
loading: true,
markers:[],
Form:{
realname:'',
mobile:'',
mailbox:'',
citys:'',
remark:'',
}
};
},
created() {
},
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
// this.getDataList();
}
},
computed: {
markerst(){
return [{
id:1,
latitude:this.value.list[0].lat,
longitude:this.value.list[0].lng
}]
},
style() {
var css = '';
css += 'background-color:' + this.value.contentBgColor + ';';
if (this.value.elementAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
return css;
}
},
methods: {
submitform(){
this.$api.sendRequest({
url: '/api/member/information',
data: this.Form,
success: res => {
this.$util.showToast({
title: res.message
});
}
});
}
}
};
</script>
<style lang="scss">
.diy-from{
background: #fff;
padding-bottom: 20rpx;
border-radius: 10rpx;
}
</style>

View File

@@ -0,0 +1,171 @@
<template>
<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>
</x-skeleton>
</view>
</template>
<script>
// 商品品牌
import uniGrid from '@/components/uni-grid/uni-grid.vue';
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue';
import DiyMinx from './minx.js'
export default {
name: 'diy-goods-brand',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
components: {
uniGrid,
uniGridItem
},
data() {
return {
list: [],
loading: true,
skeletonConfig: {
gridRows: 2,
gridColumns: 4,
gridRowsGap: '20rpx',
headWidth: '120rpx',
headHeight: '120rpx',
textShow: false
}
};
},
created() {
this.getBrandList();
},
mixins: [DiyMinx],
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
this.getBrandList();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
}
return obj;
},
// 子项样式
itemCss() {
var obj = '';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
return obj;
}
},
methods: {
getBrandList() {
var data = {
page: 1,
page_size: this.value.count
};
if (this.value.sources == 'diy') {
data.page_size = 0;
data.brand_id_arr = this.value.brandIds.toString();
}
this.$api.sendRequest({
url: '/api/goodsbrand/page',
data: data,
success: res => {
if (res.code == 0 && res.data) {
let data = res.data;
this.list = data.list;
}
this.loading = false;
}
});
},
toDetail(item) {
this.$util.redirectTo('/pages/goods/list', {
brand_id: item.brand_id
});
},
imgError(index) {
if (this.list[index]) this.list[index].image_url = this.$util.getDefaultImage().goods;
},
async handlerClick(item) {
await this.__$emitEvent({eventName: 'goods-brand-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.toDetail(item);
}})
},
}
};
</script>
<style lang="scss">
.brand-wrap {
&.shadow {
margin-left: 8rpx;
margin-right: 8rpx;
margin-top: 8rpx;
margin-bottom: 8rpx;
}
.style-1 {
.title-wrap {
text-align: center;
padding: 20rpx 0 10rpx;
}
.ul-wrap {
display: flex;
flex-wrap: wrap;
padding: 20rpx;
.li-item {
display: flex;
align-items: center;
justify-content: center;
width: calc(100% / 4 - 20rpx) !important;
height: 124rpx;
margin: 10rpx;
background-color: #fff;
.brand-pic {
width: 100%;
height: 100%;
}
}
}
}
}
</style>

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,599 @@
<template>
<x-skeleton data-component-name="diy-goods-recommend" type="waterfall" :loading="loading" :configs="skeletonConfig">
<view v-if="list.length" :class="['goods-list', goodsValue.style]" :style="goodsListWarpCss">
<view class="top-wrap" v-if="goodsValue.topStyle.support">
<text :class="['js-icon', goodsValue.topStyle.icon.value]" :style="{ backgroundColor: goodsValue.topStyle.icon.bgColor, color: goodsValue.topStyle.icon.color }"></text>
<text class="title" :style="{ color: goodsValue.topStyle.color }">{{ goodsValue.topStyle.title }}</text>
<text class="line" :style="{ color: goodsValue.topStyle.subColor }"></text>
<text class="sub" :style="{ color: goodsValue.topStyle.subColor }">{{ goodsValue.topStyle.subTitle }}</text>
</view>
<swiper :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
<swiper-item v-for="(item, index) in page" :key="index" :class="['swiper-item', [list[index].length / 3] >= 1 && 'flex-between']">
<view class="goods-item" v-for="(dataItem, dataIndex) in list[index]" :key="dataIndex" @click="toDetail(dataItem)" :class="[goodsValue.ornament.type]" :style="goodsItemCss">
<div class="goods-img-wrap">
<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index,dataIndex)" :lazy-load="true"/>
<view class="sell-out" v-if="dataItem.stock <= 0">
<text class="iconfont icon-shuqing"></text>
</view>
</div>
<view :class="['info-wrap', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="goodsValue.goodsNameStyle.control || goodsValue.priceStyle.mainControl || goodsValue.priceStyle.lineControl || goodsValue.labelStyle.support">
<view v-if="goodsValue.goodsNameStyle.control" class="goods-name"
:style="{ color: goodsValue.theme == 'diy' ? goodsValue.goodsNameStyle.color : '', fontWeight: goodsValue.goodsNameStyle.fontWeight ? 'bold' : '' }"
:class="[{ 'using-hidden': goodsValue.nameLineMode == 'single' }, { 'multi-hidden': goodsValue.nameLineMode == 'multiple' }]">
{{ dataItem.goods_name }}
</view>
<view class="pro-info">
<view class="label-wrap" v-if="goodsValue.labelStyle.support" :style="{ background: goodsValue.labelStyle.bgColor, color: goodsValue.labelStyle.color }">
<image :src="$util.img('app/component/view/goods_recommend/img/label.png')" mode="widthFix"/>
<text>{{ goodsValue.labelStyle.title }}</text>
</view>
<view class="discount-price">
<view class="price-wrap" v-if="goodsValue.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }"></text>
<text class="price price-style large" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ showPrice(dataItem).split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.mainColor + '!important' : '' }">{{ '.' + showPrice(dataItem).split('.')[1] }}</text>
</view>
<view v-if="goodsValue.priceStyle.lineControl && showMarketPrice(dataItem)" class="delete-price price-font" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.priceStyle.lineColor : '' }">{{ showMarketPrice(dataItem) }}</view>
<view class="sale" v-if="goodsValue.saleStyle.control" :style="{ color: goodsValue.theme == 'diy' ? goodsValue.saleStyle.color : '' }">
{{ dataItem.sale_num }}{{ dataItem.unit ? dataItem.unit : '' }}
</view>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</x-skeleton>
</template>
<script>
export default {
name: 'diy-goods-recommend',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
data() {
return {
loading: true,
skeletonConfig: {
gridRows: 1,
gridColumns: 3,
headWidth: '200rpx',
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '60%'],
},
list: [],
goodsValue: {},
page: 1
};
},
created() {
this.goodsValue = this.value;
this.getGoodsList();
},
watch: {
'globalStoreInfo.store_id': {
handler(nval, oval) {
if (nval != oval) {
this.getGoodsList();
}
},
deep: true
},
// 组件刷新监听
componentRefresh: function(nval) {
this.getGoodsList();
}
},
computed: {
goodsListWarpCss() {
var obj = '';
obj += 'background-color:' + this.goodsValue.componentBgColor + ';';
if (this.goodsValue.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.goodsValue.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.goodsValue.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.goodsValue.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.goodsValue.bottomAroundRadius * 2 + 'rpx;';
}
if (this.goodsValue.bgUrl) {
obj += `background-image: url('${this.$util.img(this.goodsValue.bgUrl)}');`;
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.goodsValue.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.goodsValue.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.goodsValue.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.goodsValue.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.goodsValue.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.goodsValue.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.goodsValue.ornament.color + ';';
}
if (this.goodsValue.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.goodsValue.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().windowWidth;
var width = '';
if (this.goodsValue.style != 'style-2') {
width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value.margin
.both * 2) * 2] / 6;
} else {
width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this
.rpxUpPx(this.value.margin.both * 2) * 2
] / 6;
}
obj += 'margin-left:' + width + 'px;';
obj += 'margin-right:' + width + 'px;';
return obj;
},
swiperHeight() {
if (this.goodsValue.style == 'style-3') {
return '330rpx';
} else if (this.goodsValue.style != 'style-2') {
if (this.value.nameLineMode == 'multiple') {
return '348rpx';
}
return '312rpx';
} else {
if (this.value.nameLineMode == 'multiple') {
return '360rpx';
}
return '320rpx';
}
}
},
methods: {
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},
getGoodsList() {
var data = {
num: this.goodsValue.count
};
if (this.goodsValue.sources == 'category') {
data.category_id = this.goodsValue.categoryId;
data.category_level = 1;
} else if (this.goodsValue.sources == 'diy') {
data.num = 0;
data.goods_id_arr = this.goodsValue.goodsId.toString();
}
data.order = this.goodsValue.sortWay;
this.$api.sendRequest({
url: '/api/goodssku/components',
data: data,
success: res => {
if (res.code == 0 && res.data) {
let data = res.data;
this.list = data;
// 切屏滚动,每页显示固定数量
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
this.loading = false;
}
});
},
toDetail(item) {
this.$util.redirectTo('/pages/goods/detail', {
goods_id: item.goods_id
});
},
imgError(pageIndex, index) {
this.list[pageIndex][index].goods_image = this.$util.getDefaultImage().goods;
},
showPrice(data) {
let price = data.discount_price;
if (data.member_price && parseFloat(data.member_price) < parseFloat(price)) price = data.member_price;
return price;
},
showMarketPrice(item) {
let price = this.showPrice(item);
if (item.market_price > 0) {
return item.market_price;
} else if (item.price > price) {
return item.price;
}
return '';
},
}
};
</script>
<style lang="scss" scoped>
.goods-list {
.goods-item {
line-height: 1;
.sale {
line-height: 1;
color: $color-tip;
font-size: $font-size-activity-tag;
}
.info-wrap {
.goods-name {
margin-bottom: 10rpx;
line-height: 1.3;
}
}
.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: 180rpx;
}
}
}
}
// 商品列表横向滚动样式
.goods-list.style-1 {
width: 100%;
white-space: nowrap;
background-repeat: round;
.top-wrap {
display: flex;
align-items: center;
padding: 20rpx 0;
.js-icon {
border-radius: 50%;
font-size: 40rpx;
margin-right: 10rpx;
width: 70rpx;
height: 70rpx;
text-align: center;
line-height: 70rpx;
}
.line {
height: 28rpx;
margin: 0 10rpx;
border: 2rpx solid;
}
.title {
font-weight: bold;
font-size: $font-size-toolbar;
}
.sub {
font-size: $font-size-tag;
}
}
.flex-between {
justify-content: space-between;
}
.swiper {
display: flex;
flex-wrap: wrap;
margin: 0 20rpx;
.swiper-item {
display: flex;
align-items: center;
}
}
.goods-item {
overflow: hidden;
width: 200rpx;
display: inline-block;
box-sizing: border-box;
&:nth-child(3n + 3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.goods-img, .goods-img-wrap {
position: relative;
width: 100%;
height: 196rpx;
}
.info-wrap {
display: flex;
flex-direction: column;
padding: 10rpx;
&.multi-content {
height: 130rpx;
box-sizing: border-box;
}
.goods-name {
font-size: $font-size-sub;
&.multi-hidden {
white-space: break-spaces;
}
}
.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 {
line-height: 1;
white-space: nowrap;
.unit {
font-size: $font-size-tag;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
}
text {
font-weight: bold;
color: $base-color;
}
}
}
.delete-price {
margin-left: 10rpx;
text-decoration: line-through;
flex: 1;
line-height: 28rpx;
color: $color-tip;
font-size: $font-size-activity-tag;
}
}
}
}
}
// 商品列表横向滚动样式
.goods-list.style-2 {
width: 100%;
white-space: nowrap;
background-repeat: round;
padding-bottom: 20rpx;
.top-wrap {
display: flex;
align-items: center;
padding: 20rpx;
.js-icon {
border-radius: 50%;
font-size: 40rpx;
margin-right: 20rpx;
width: 70rpx;
height: 70rpx;
text-align: center;
line-height: 70rpx;
}
.line {
height: 28rpx;
margin: 0 10rpx;
border: 2rpx solid;
}
.title {
font-weight: bold;
font-size: $font-size-toolbar;
}
.sub {
font-size: $font-size-tag;
}
}
.swiper {
display: flex;
flex-wrap: wrap;
margin: 0 20rpx;
padding: 20rpx;
border-radius: 20rpx;
background-color: #fff;
}
.goods-item {
overflow: hidden;
width: 200rpx;
display: inline-block;
box-sizing: border-box;
&.shadow {
margin-top: 8rpx;
width: 200rpx;
}
.goods-img, .goods-img-wrap {
position: relative;
width: 100%;
height: 200rpx;
}
.info-wrap {
padding: 10rpx;
.goods-name {
line-height: 1;
&.multi-hidden {
line-height: 1.3;
height: 68rpx;
white-space: break-spaces;
}
}
.pro-info {
display: flex;
flex-direction: column;
justify-content: space-between;
.discount-price {
display: flex;
justify-content: space-between;
align-items: center;
.price-wrap {
line-height: 1.3;
.unit {
font-size: $font-size-tag;
color: $base-color;
}
text {
font-weight: bold;
color: $base-color;
&:last-of-type {
font-size: 32rpx;
}
}
}
}
.delete-price {
margin-left: 10rpx;
text-decoration: line-through;
flex: 1;
line-height: 28rpx;
color: $color-tip;
font-size: $font-size-activity-tag;
}
}
}
}
}
.goods-list.style-3 {
background-position: bottom;
.swiper {
display: flex;
flex-wrap: wrap;
margin: 0 20rpx;
padding: 10rpx 0;
.swiper-item {
display: flex;
align-items: center;
}
}
.goods-item {
overflow: hidden;
width: 200rpx;
display: inline-block;
box-sizing: border-box;
&.shadow {
// margin-top: 20rpx;
}
.goods-img, .goods-img-wrap {
position: relative;
width: 100%;
height: 200rpx;
}
.info-wrap {
display: flex;
flex-direction: column;
padding: 10rpx;
.pro-info {
text-align: center;
.label-wrap {
border-radius: 40rpx;
display: inline-block;
margin: 10rpx 0;
position: relative;
padding-left: 52rpx;
padding-right: 16rpx;
line-height: 1.7;
image {
position: absolute;
top: -2rpx;
left: -2rpx;
width: 46rpx;
height: 46rpx;
}
text {
font-size: $font-size-tag;
}
}
.discount-price {
.price-wrap {
line-height: 1;
white-space: nowrap;
.unit {
font-size: $font-size-tag;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
}
text {
font-weight: bold;
color: $base-color;
}
}
}
}
}
}
}
</style>

View File

@@ -0,0 +1,304 @@
<template>
<view data-component-name="diy-graphic-nav" :style="componentStyle">
<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))" :key="numIndex">
<!-- #ifdef MP -->
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
:key="index"
v-if="index >= [(numItem) * (value.pageCount * value.rowCount)] && index < [(numItem+1) * (value.pageCount * value.rowCount)]"
:style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list"
:key="index"
v-if="index >= [(numItem - 1) * (value.pageCount * value.rowCount)] && index < [numItem * (value.pageCount * value.rowCount)]"
:style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
<!-- #endif -->
<view class="graphic-img" v-if="value.mode != 'text'"
:style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
<image v-if="item.iconType == 'img'"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
mode="aspectFill"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', borderRadius: value.aroundRadius * 2 + 'rpx' }"
:show-menu-by-longpress="true"/>
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
<text class="tag" v-if="item.label.control"
:style="{ color: item.label.textColor, backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')' }">
{{ item.label.text }}
</text>
</view>
<text v-if="value.mode != 'img'" class="graphic-text"
:style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
{{ item.title }}
</text>
</view>
</swiper-item>
</swiper>
<view class="swiper-dot-box" v-if="isIndicatorDots" :class="value.carousel.type">
<view v-for="(numItem, numIndex) in Math.ceil(value.list.length / (value.pageCount * value.rowCount))" :key="numIndex">
<view class="swiper-dot" :class="{'active':numIndex==swiperCurrent}"></view>
</view>
</view>
</block>
<scroll-view v-else :scroll-x="value.showStyle == 'singleSlide'" :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle ]">
<!-- #ifdef MP -->
<view class="uni-scroll-view-content">
<!-- #endif -->
<view class="graphic-nav-item" :class="[value.mode]" v-for="(item, index) in value.list" :key="index" :style="{ width: 100 / value.rowCount + '%' }" @click="redirectTo(item.link)">
<view class="graphic-img" v-if="value.mode != 'text'" :style="{ fontSize: value.imageSize * 2 + 'rpx', width: value.imageSize * 2 + 'rpx', height: value.imageSize * 2 + 'rpx' }">
<image v-if="item.iconType == 'img'"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
mode="aspectFill"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', borderRadius: value.aroundRadius * 2 + 'rpx' }"
:show-menu-by-longpress="true"/>
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"
:style="{ maxWidth: value.imageSize * 2 + 'rpx', maxHeight: value.imageSize * 2 + 'rpx', width: '100%', height: '100%' }"></diy-icon>
<text :class="['tag', { alone: value.mode == 'text' }]" v-if="item.label.control"
:style="{ color: item.label.textColor, backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')' }">
{{ item.label.text }}
</text>
</view>
<text v-if="value.mode != 'img'" class="graphic-text" :style="{ fontSize: value.font.size * 2 + 'rpx', fontWeight: value.font.weight, color: value.font.color }">
{{ item.title }}
</text>
</view>
<!-- #ifdef MP -->
</view>
<!-- #endif -->
</scroll-view>
<ns-login ref="login"></ns-login>
</view>
</template>
<script>
export default {
name: 'diy-graphic-nav',
props: {
value: {
type: Object
}
},
data() {
return {
pageWidth: '',
indicatorDots: false,
swiperCurrent: 0
};
},
created() {},
watch: {
// 组件刷新监听
componentRefresh: function(nval) {}
},
computed: {
componentStyle() {
var css = '';
css += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
css += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
css += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
css += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
css += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament
.color :
'') + ';';
css += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color :
'') + ';';
return css;
},
// 滑块容器的高度
swiperHeight() {
var css = '';
var height = 0;
if (this.value.mode == 'graphic') {
height = (21 + 6 + 14 + 8 + this.value.imageSize) * this.value
.pageCount; // 21 = 文字高度8 = 文字上边距14 = 上下内边距8 = 外边距
} else if (this.value.mode == 'img') {
height = (14 + 8 + this.value.imageSize) * this.value.pageCount; // 14 = 上下内边距8 = 外边距
} else if (this.value.mode == 'text') {
height = (21 + 14 + 8) * this.value.pageCount; // 21 = 文字高度14 = 上下内边距8 = 外边距
}
css += 'height:' + height * 2 + 'rpx';
return css;
},
// 是否显示轮播点
isIndicatorDots() {
var bool = true;
bool = this.value.carousel.type == 'hide' || Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount)) == 1 ? false : true;
return bool;
}
},
methods: {
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == 'pages/member/index' && !this.storeToken) {
this.$refs.login.open(link.wap_url);
return;
}
}
console.log(link)
this.$util.diyRedirectTo(link);
},
swiperChange(e) {
this.swiperCurrent = e.detail.current
}
}
};
</script>
<style>
/* 固定显示 */
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
display: flex;
flex-wrap: wrap;
}
/* 单行滑动 */
.graphic-nav.singleSlide>>>.uni-scroll-view-content {
display: flex;
}
.graphic-nav.pageSlide>>>.uni-swiper-dots-horizontal {
bottom: 0rpx;
}
.graphic-nav.pageSlide.straightLine>>>.uni-swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
.graphic-nav.pageSlide.circle>>>.uni-swiper-dot {
width: 14rpx;
height: 14rpx;
}
</style>
<style lang="scss">
.graphic-nav {
padding: 16rpx;
box-sizing: border-box;
&.singleSlide {
.graphic-nav-item {
flex-shrink: 0;
}
}
&.pageSlide {
position: relative;
.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 {
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 {
.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;
transform: scale(0.8);
padding: 8rpx 16rpx;
line-height: 1;
font-size: 24rpx;
}
.icon {
font-size: 50rpx;
color: $color-sub;
}
}
}
}
.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, .3);
margin: 8rpx;
&.active {
background-color: rgba(0, 0, 0, 1);
}
}
&.straightLine {
.swiper-dot {
width: 30rpx;
border-radius: 0;
height: 8rpx;
}
}
&.circle {
.swiper-dot {
width: 15rpx;
border-radius: 50%;
height: 15rpx;
}
}
}
</style>

View File

@@ -5,34 +5,34 @@
<!-- 门店展示 --> <!-- 门店展示 -->
<diy-store :value="item"></diy-store> <diy-store :value="item"></diy-store>
</view> </view>
<template v-if="item.componentName == 'Kefu'"> <template v-if="item.componentName == 'Kefu'">
<!-- 客服按钮 --> <!-- 客服按钮 -->
<diy-kefu :value="item"></diy-kefu> <diy-kefu :value="item"></diy-kefu>
</template> </template>
<template v-if="item.componentName == 'Form'"> <template v-if="item.componentName == 'Form'">
<!-- 表单组件 --> <!-- 表单组件 -->
<diy-form :value="item"></diy-form> <diy-form :value="item"></diy-form>
</template> </template>
<template v-if="addonIsExist.store && item.componentName == 'StoreLabel'"> <template v-if="addonIsExist.store && item.componentName == 'StoreLabel'">
<!-- 门店标签 --> <!-- 门店标签 -->
<diy-store-label :value="item"></diy-store-label> <diy-store-label :value="item"></diy-store-label>
</template> </template>
<template v-if="item.componentName == 'Picture'"> <template v-if="item.componentName == 'Picture'">
<!-- 单图组组件 --> <!-- 单图组组件 -->
<diy-picture :value="item"></diy-picture> <diy-picture :value="item"></diy-picture>
</template> </template>
<template v-if="item.componentName == 'Listmenu'"> <template v-if="item.componentName == 'Listmenu'">
<!-- 列表按钮组件 --> <!-- 列表按钮组件 -->
<diy-listmenu :value="item"></diy-listmenu> <diy-listmenu :value="item"></diy-listmenu>
</template> </template>
<template v-if="item.componentName == 'Text'"> <template v-if="item.componentName == 'Text'">
<!-- 文本 --> <!-- 文本 -->
<diy-text :value="item"></diy-text> <diy-text :value="item"></diy-text>
@@ -55,8 +55,7 @@
<template v-if="item.componentName == 'Search'"> <template v-if="item.componentName == 'Search'">
<!-- 搜索 --> <!-- 搜索 -->
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global" <diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global" :haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
:haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
</template> </template>
<template v-if="item.componentName == 'RichText'"> <template v-if="item.componentName == 'RichText'">
@@ -86,8 +85,7 @@
<template v-if="item.componentName == 'ManyGoodsList'"> <template v-if="item.componentName == 'ManyGoodsList'">
<!-- 多商品组 --> <!-- 多商品组 -->
<diy-many-goods-list :value="item" :global="diyGlobalData.global" <diy-many-goods-list :value="item" :global="diyGlobalData.global" :scrollTop="scrollTop"></diy-many-goods-list>
:scrollTop="scrollTop"></diy-many-goods-list>
</template> </template>
<template v-if="item.componentName == 'RubikCube'"> <template v-if="item.componentName == 'RubikCube'">
@@ -99,8 +97,8 @@
<!-- 视频 --> <!-- 视频 -->
<diy-video :value="item"></diy-video> <diy-video :value="item"></diy-video>
</template> </template>
<template v-if="item.componentName == 'Seckill' && addonIsExist.seckill"> <template v-if="item.componentName == 'Seckill' && addonIsExist.seckill">
@@ -169,7 +167,7 @@
<!-- 文章 --> <!-- 文章 -->
<diy-article :value="item"></diy-article> <diy-article :value="item"></diy-article>
</template> </template>
<template v-if="item.componentName == 'MerchList'"> <template v-if="item.componentName == 'MerchList'">
<!-- 商户列表 --> <!-- 商户列表 -->
<diy-merch-list :value="item"></diy-merch-list> <diy-merch-list :value="item"></diy-merch-list>
@@ -204,63 +202,20 @@
<!-- 关注公众号 --> <!-- 关注公众号 -->
<diy-follow-official-account :value="item"></diy-follow-official-account> <diy-follow-official-account :value="item"></diy-follow-official-account>
</template> </template>
<template v-if="item.componentName == 'Map'"> <template v-if="item.componentName == 'Map'">
<!-- 地图组件 --> <!-- 地图组件 -->
<diy-map :value="item"></diy-map> <diy-map :value="item"></diy-map>
</template> </template>
<template v-if="item.componentName == 'Audio'"> <template v-if="item.componentName == 'Audio'">
<!-- 音频 --> <!-- 音频 -->
<diy-audio :value="item"></diy-audio> <diy-audio :value="item"></diy-audio>
</template> </template>
<template v-if="item.componentName == 'ImageNav'">
<!-- 图片导航 -->
<diy-image-nav :value="item"></diy-image-nav>
</template>
<template v-if="item.componentName == 'Digit'">
<!-- 数字 -->
<diy-digit :value="item"></diy-digit>
</template>
<template v-if="item.componentName == 'VideoList'">
<!-- 视频列表 -->
<diy-video-list :value="item"></diy-video-list>
</template>
<template v-if="item.componentName == 'BottomNav'">
<!-- 底部导航 -->
<diy-bottom-nav :value="item"></diy-bottom-nav>
</template>
<template v-if="item.componentName == 'CategoryItem'">
<!-- 分类项 -->
<diy-category-item :value="item"></diy-category-item>
</template>
<template v-if="item.componentName == 'Category'">
<!-- 分类 -->
<diy-category :value="item"></diy-category>
</template>
<template v-if="item.componentName == 'Icon'">
<!-- 图标 -->
<diy-icon :value="item"></diy-icon>
</template>
<template v-if="item.componentName == 'Tab'">
<!-- Tab 组件 -->
<diy-tab :value="item" :diyGlobal="diyGlobalData"></diy-tab>
</template>
<template v-if="['ChannelList', 'WechatChannel'].includes(item.componentName)">
<!-- 视频号列表 -->
<diy-channel-list :value="item"></diy-channel-list>
</template>
<!-- 自定义扩展组件 --> <!-- 自定义扩展组件 -->
<diy-comp-extend :value="item"></diy-comp-extend> <diy-comp-extend :value="item"></diy-comp-extend>
</view> </view>
@@ -268,105 +223,96 @@
</template> </template>
<script> <script>
// //
import DiyMinx from './minx.js' export default {
components: {},
export default { props: {
name: 'diy-group', diyData: {
props: { type: Object
diyData: { },
type: Object scrollTop: {
type: [String, Number],
default: '0'
},
haveTopCategory: {
type: Boolean
},
followOfficialAccount: {
type: Object
},
}, },
scrollTop: { data() {
type: [String, Number], return {
default: '0' diyGlobalData: null
};
}, },
haveTopCategory: { created() {
type: Boolean this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
}, },
followOfficialAccount: { computed: {
type: Object topNavColor() {
}, var color = '';
}, if (this.diyData.global.topNavBg) {
mixins: [DiyMinx],
data() {
return {
diyGlobalData: null
};
},
created() {
this.diyGlobalData = JSON.parse(JSON.stringify(this.diyData));
},
computed: {
topNavColor() {
var color = '';
if (this.diyData.global.topNavBg) {
color = 'transparent';
if (this.scrollTop > 20) {
color = this.diyData.global.topNavColor;
} else {
color = 'transparent'; color = 'transparent';
if (this.scrollTop > 20) {
color = this.diyData.global.topNavColor;
} else {
color = 'transparent';
}
} else {
color = this.diyData.global.topNavColor;
} }
} else { return color;
color = this.diyData.global.topNavColor; },
} //
return color; setPagestyle() {
}, this.diyGlobalData.value.forEach((item, index) => {
// item.pageStyle = '';
setPagestyle() { //
this.diyGlobalData.value.forEach((item, index) => { item.moduleIndex = index + 1;
item.pageStyle = '';
//
item.moduleIndex = index + 1;
// //
if (item.componentName == 'Search' && item.positionWay == 'fixed') { if (item.componentName == 'Search' && item.positionWay == 'fixed') {
// item.pageStyle = 'background-color:' + item.pageBgColor + ';'; // item.pageStyle = 'background-color:' + item.pageBgColor + ';';
return false; return false;
} }
item.pageStyle += 'background-color:' + item.pageBgColor + ';'; item.pageStyle += 'background-color:' + item.pageBgColor + ';';
if (item.margin) { if (item.margin) {
item.pageStyle += 'padding-top:' + item.margin.top * 2 + 'rpx' + ';'; item.pageStyle += 'padding-top:' + item.margin.top * 2 + 'rpx' + ';';
item.pageStyle += 'padding-bottom:' + item.margin.bottom * 2 + 'rpx' + ';'; item.pageStyle += 'padding-bottom:' + item.margin.bottom * 2 + 'rpx' + ';';
item.pageStyle += 'padding-right:' + item.margin.both * 2 + 'rpx' + ';'; item.pageStyle += 'padding-right:' + item.margin.both * 2 + 'rpx' + ';';
item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';'; item.pageStyle += 'padding-left:' + item.margin.both * 2 + 'rpx' + ';';
}
});
return this.diyGlobalData.value;
},
//
diyDataArray() {
let data = [],
showModuleData = this.$store.state.diyGroupShowModule ? JSON.parse(this.$store.state
.diyGroupShowModule) : '';
if (showModuleData.length) {
if (showModuleData.includes('null')) return [];
let diyDataArr = this.setPagestyle;
diyDataArr.forEach((item, index) => {
if (showModuleData.includes(item.componentName)) {
data.push(item);
} }
}); });
} else data = this.setPagestyle;
console.log(`diy-group ['diyDataArray'] = `, { return this.diyGlobalData.value;
data: data, },
diyData: this.diyData, //
diyGlobalData: this.diyGlobalData, diyDataArray() {
}) let data = [],
return data; showModuleData = this.$store.state.diyGroupShowModule ? JSON.parse(this.$store.state
} .diyGroupShowModule) : '';
},
methods: {} if (showModuleData.length) {
}; if (showModuleData.includes('null')) return [];
let diyDataArr = this.setPagestyle;
diyDataArr.forEach((item, index) => {
if (showModuleData.includes(item.componentName)) {
data.push(item);
}
});
} else data = this.setPagestyle;
return data;
}
},
methods: {}
};
</script> </script>
<style lang="scss"> <style lang="scss">
.diy-group { .diy-group {
width: 100%; width: 100%;
} }
</style> </style>

View File

@@ -0,0 +1,462 @@
<template>
<x-skeleton data-component-name="diy-groupbuy" :type="skeletonType" :loading="loading" :configs="skeletonConfig">
<view class="diy-groupbuy" :class="[value.template, value.style]" :style="warpCss">
<template v-if="value.template == 'row1-of1'">
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
:class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)">
</image>
</view>
<view class="content"
v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl || value.btnStyle.control">
<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 class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
</view>
<button v-if="value.btnStyle.control" :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'
}">
{{ value.btnStyle.text }}
</button>
</view>
</view>
</template>
<template v-if="value.template == 'horizontal-slide'">
<scroll-view v-if="value.slideMode == 'scroll'" class="scroll" :scroll-x="true" :show-scrollbar="false">
<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(index)"/>
<image class="bg" v-if="value.saleStyle.control" :src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix"/>
<view class="num" v-if="value.saleStyle.control" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">
已团{{ item.sell_num }}
</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
<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 class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{ item.price }}</view>
</view>
</view>
</scroll-view>
<swiper v-if="value.slideMode == 'slide'" :autoplay="false" class="swiper" :style="{ height: swiperHeight }">
<swiper-item v-for="(pageItem, pageIndex) in page" :key="pageIndex" :class="['swiper-item', (list.length && [list[pageIndex].length / 3] >= 1) && 'flex-between']">
<view class="item" v-for="(item, dataIndex) in list[pageIndex]" :key="dataIndex"
@click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
<view class="img-wrap" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }" :src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imageError(dataIndex)"/>
<image class="bg" v-if="value.saleStyle.control" :src="$util.img('public/uniapp/groupbuy/bg.png')" mode="widthFix"/>
<view class="num" v-if="value.saleStyle.control" :style="{ color: value.theme == 'diy' ? value.saleStyle.color : '' }">已团{{ item.sell_num }}</view>
</view>
<view :class="['content', { 'multi-content': value.nameLineMode == 'multiple' }]" v-if="value.goodsNameStyle.control || value.priceStyle.mainControl || value.priceStyle.lineControl">
<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 class="discount-price" v-if="value.priceStyle.mainControl">
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">¥</text>
<text class="price price-style large" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ item.groupbuy_price.split('.')[0] }}</text>
<text class="unit price-style small" :style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor + '!important' : '' }">{{ '.' + item.groupbuy_price.split('.')[1] }}</text>
</view>
<view class="original-price price-font" v-if="value.priceStyle.lineControl" :style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">¥{{ item.price }}</view>
</view>
</view>
</swiper-item>
</swiper>
</template>
</view>
</x-skeleton>
</template>
<script>
export default {
name: 'diy-groupbuy',
props: {
value: {
type: Object
}
},
data() {
return {
loading: true,
skeletonType: '',
skeletonConfig: {},
list: [],
page: 1
};
},
created() {
this.initSkeleton();
this.getData();
},
watch: {
// 组件刷新监听
componentRefresh: function(nval) {
this.getData();
}
},
computed: {
warpCss() {
var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
}
return obj;
},
// 商品项样式
goodsItemCss() {
var obj = '';
obj += 'background-color:' + this.value.elementBgColor + ';';
if (this.value.elementAngle == 'round') {
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
}
if (this.value.ornament.type == 'shadow') {
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color + ';';
}
if (this.value.ornament.type == 'stroke') {
obj += 'border:' + '2rpx solid ' + this.value.ornament.color + ';';
}
const screenWidth = uni.getSystemInfoSync().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);
else width = [screenWidth - this.rpxUpPx(20) * 2 - this.rpxUpPx(200) * 3 - this.rpxUpPx(this.value
.margin.both * 2) * 2] / 6;
obj += 'margin-left:' + width + 'px;';
obj += 'margin-right:' + width + 'px;';
}
return obj;
},
swiperHeight() {
if (this.value.nameLineMode == 'multiple') return this.value.ornament.type == 'shadow' ? '404rpx' :
'392rpx';
return this.value.ornament.type == 'shadow' ? '376rpx' : '368rpx';
}
},
methods: {
initSkeleton() {
if (this.value.template == 'row1-of1') {
// 单列 风格
this.skeletonType = 'list';
this.skeletonConfig = {
textRows: 2
};
} else if (this.value.template == 'horizontal-slide') {
// 横向滑动 风格
this.skeletonType = 'waterfall';
this.skeletonConfig = {
gridRows: 1,
gridColumns: 3,
headHeight: '200rpx',
textRows: 2,
textWidth: ['100%', '80%']
};
}
},
rpxUpPx(res) {
const screenWidth = uni.getSystemInfoSync().windowWidth;
var data = (screenWidth * parseInt(res)) / 750;
return Math.floor(data);
},
getData() {
var data = {
num: this.value.count
};
if (this.value.sources == 'diy') {
data.num = 0;
data.goods_id_arr = this.value.goodsId.toString();
}
this.$api.sendRequest({
url: '/groupbuy/api/goods/lists',
data: data,
success: res => {
if (res.code == 0) {
this.list = res.data;
// 切屏滚动,每页显示固定数量
if (this.value.template == 'horizontal-slide' && this.value.slideMode == 'slide') {
let size = 3;
let temp = [];
this.page = Math.ceil(this.list.length / size);
for (var i = 0; i < this.page; i++) {
temp[i] = [];
for (var j = i * size; j < this.list.length; j++) {
if (temp[i].length == size) break;
temp[i].push(this.list[j]);
}
}
this.list = temp;
}
this.loading = false;
}
}
});
},
toDetail(e) {
this.$util.redirectTo('/pages_promotion/groupbuy/detail', {
groupbuy_id: e.groupbuy_id
});
},
imageError(index) {
this.list[index].goods_image = this.$util.getDefaultImage().goods;
this.$forceUpdate();
}
}
};
</script>
<style lang="scss">
/deep/.uni-scroll-view ::-webkit-scrollbar {
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
/deep/::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
background: transparent;
}
scroll-view ::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
touch-action: none;
}
.diy-groupbuy {
&.row1-of1 {
.item {
display: flex;
margin-bottom: 20rpx;
padding: 16rpx;
&.shadow {
margin: 8rpx 8rpx 20rpx 8rpx;
}
&:last-child {
margin-bottom: 0;
padding-bottom: 20rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
>image {
width: 200rpx;
}
}
.goods-name {
margin-top: 6rpx;
line-height: 1.5;
}
.content {
flex: 1;
margin-left: 20rpx;
position: relative;
.discount-price {
white-space: nowrap;
font-weight: bold;
position: absolute;
bottom: 20rpx;
left: 0;
display: flex;
align-items: baseline;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
color: $base-color;
}
}
button {
position: absolute;
bottom: 10rpx;
right: 20rpx;
margin: 0;
padding: 0 20rpx;
background-color: $base-color;
color: #fff;
min-width: 112rpx;
height: 52rpx;
line-height: 52rpx;
font-size: $font-size-tag;
}
}
}
}
&.horizontal-slide {
.scroll {
width: calc(100% - 40rpx);
padding: 20rpx;
line-height: 1;
white-space: nowrap;
.item.shadow {
margin-bottom: 8rpx;
}
}
.flex-between {
justify-content: space-between;
}
.item {
display: inline-block;
width: 200rpx;
overflow: hidden;
box-sizing: border-box;
&:nth-child(3n + 3) {
width: 198rpx;
}
&.shadow {
margin-top: 8rpx;
}
.img-wrap {
width: 200rpx;
height: 200rpx;
position: relative;
overflow: hidden;
margin: 0 auto;
>image {
width: 200rpx;
}
.bg {
position: absolute;
width: 100%;
height: 60rpx;
bottom: 0;
left: 0;
z-index: 2;
}
.num {
width: 180rpx;
position: absolute;
bottom: 10rpx;
padding-left: 20rpx;
font-size: 20rpx;
line-height: 1;
color: #ffffff;
z-index: 3;
}
}
.content {
padding: 10rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
&.multi-content {
height: 158rpx;
box-sizing: border-box;
}
.goods-name {
line-height: 1.3;
&.multi-hidden {
white-space: break-spaces;
}
}
.discount-price {
white-space: nowrap;
margin-top: auto;
font-weight: bold;
line-height: 1;
.unit {
font-size: $font-size-tag;
margin-right: 4rpx;
color: $base-color;
}
.price {
font-size: $font-size-toolbar;
color: $base-color;
}
}
.original-price {
font-size: $font-size-tag;
color: $color-tip;
line-height: 1;
text-decoration: line-through;
}
}
}
.swiper {
width: 100%;
white-space: nowrap;
padding: 20rpx;
box-sizing: border-box;
.swiper-item {
display: flex;
align-items: center;
}
.item {
width: 200rpx;
}
}
}
}
</style>

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