Compare commits

54 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
ca74d4f8e5 chore: 要明确集成微信及支付宝原生客服 2025-12-17 09:19:19 +08:00
d9c9599cb2 chore: 集成统一客服服务 2025-12-16 16:54:39 +08:00
142a97d65c revert: pages/contact/contact.vue 回退到最初状态 2025-12-16 15:52:18 +08:00
b945583857 chore: 优化公共端都支持打开企业微信客服的方法 2025-12-16 15:41:15 +08:00
88debacf8c chore: 使用全局的wxworkConfig配置作为参数 2025-12-16 14:41:45 +08:00
9d12b02463 chore: 将wxworkConfig放到全局配置中 2025-12-16 14:41:15 +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
23e81114e9 chore: 后端init接口数据为wxwork_config 2025-12-16 10:54:57 +08:00
08583aa8aa chore: 企业微信客服组件完全独立 2025-12-15 15:04:45 +08:00
5e536afeae feat: 新增打开企业微信客服组件 2025-12-15 14:26:01 +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
519 changed files with 73160 additions and 66773 deletions

1
.gitignore vendored
View File

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

View File

@@ -1,23 +0,0 @@
// 本地调试配置示例文件
// 复制此文件并重命名为 local.config.js 以使用自定义本地配置
const localDevConfig = ({
'460': { // 制氧设备平台
uniacid: 460,
domain: 'https://xcx30.5g-quickapp.com/',
},
'2285': { // 数码喷墨墨水
uniacid: 2285,
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',
},
})['2285']; // 选择要使用的环境配置
export default localDevConfig;

20
App.vue
View File

@@ -1,7 +1,6 @@
<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';
@@ -9,9 +8,10 @@
export default { export default {
mixins: [auth], mixins: [auth],
onLaunch: 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 (uni.getSystemInfoSync().platform == 'ios') { if (uni.getDeviceInfo().platform == 'ios') {
uni.setStorageSync('initUrl', location.href); uni.setStorageSync('initUrl', location.href);
} }
// #endif // #endif
@@ -61,8 +61,7 @@
// 主题风格 // 主题风格
if (uni.getStorageSync('themeStyle')) { if (uni.getStorageSync('themeStyle')) {
this.$store.commit('setThemeStyle', configExternal.loadThemeSync(uni.getStorageSync('themeStyle'))); this.$store.commit('setThemeStyle', colorList[uni.getStorageSync('themeStyle')]);
this.$store.dispatch('themeColorSet');
} }
// 插件是否存在 // 插件是否存在
@@ -152,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',
@@ -162,6 +160,8 @@
} }
} }
}); });
}else{
this.getAuthInfo();
} }
// #endif // #endif
@@ -178,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({
@@ -205,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);
} }
} }

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 {
/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 @@
// 修复图片垂直对齐问题,解决两张图片上下有空白缝隙问题
/deep/ ._img {
vertical-align: top;
}

File diff suppressed because it is too large Load Diff

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,154 +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'],
// 默认主题
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 {object} - 主题配置
*/
loadThemeSync(theme = themeConfig.defaultTheme) {
if (this.loadedConfigs[`theme_${theme}`]) {
return this.loadedConfigs[`theme_${theme}`];
}
try {
// 动态加载主题配置
const themeData = require(`@/common/js/style_color.js`)['default'][theme];
console.log('sync themeData => ', themeData);
this.loadedConfigs[`theme_${theme}`] = themeData;
return themeData;
} catch (error) {
console.error(`加载主题 ${theme} 失败:`, error);
return {};
}
}
/**
* 加载主题配置(异步方式)
* @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,86 +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_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
// 尝试动态加载本地配置文件
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/',
@@ -99,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

@@ -1,7 +1,14 @@
import WxMap from 'common/js/map-wx-jssdk.js'; import { QQMapWX } from 'common/js/map-wx-jssdk.js';
import Config from '@/common/js/config.js'; import Config from '@/common/js/config.js';
let systemInfo = uni.getSystemInfoSync(); let systemInfo = {};
try {
// 合并设备信息和窗口信息
systemInfo = {...uni.getDeviceInfo(), ...uni.getWindowInfo()};
} catch (e) {
// 兼容旧版本
systemInfo = uni.getSystemInfoSync();
}
export default { export default {
data() { data() {
return { return {
@@ -35,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, // 没有获取到定位,则获取默认门店
@@ -43,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) {
@@ -65,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);
}, },
@@ -149,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() {
@@ -187,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) {
//记录分享关系 //记录分享关系
@@ -225,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,
@@ -267,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();
@@ -276,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',
@@ -285,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);
} }
@@ -301,7 +296,7 @@ export default {
} }
}, 500); }, 500);
} }
}, },
async getDiyInfo() { async getDiyInfo() {
let res = await this.$api.sendRequest({ let res = await this.$api.sendRequest({
@@ -309,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
}); });
@@ -334,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) {
@@ -356,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;
@@ -379,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') {
@@ -406,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) {
@@ -420,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() {
@@ -434,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({
@@ -496,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);
@@ -515,7 +631,7 @@ export default {
} }
}); });
} }
});*/ });
// #endif // #endif
// #ifdef H5 // #ifdef H5
@@ -536,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();
} }
} }
}); });
@@ -551,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,
@@ -567,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;
@@ -601,6 +730,7 @@ export default {
// 下拉刷新 // 下拉刷新
onPullDownRefresh() { onPullDownRefresh() {
this.$store.commit('setComponentRefresh'); this.$store.commit('setComponentRefresh');
this.getDiyMethod();
setTimeout(() => { setTimeout(() => {
uni.stopPullDownRefresh(); uni.stopPullDownRefresh();
}, 50); }, 50);

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,162 +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 uni.getStorageSync('lang') === '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() {
// 客服配置 return this.$store.state.defaultStoreInfo;
servicerConfig() { },
return this.$store.state.servicerConfig; // 组件刷新计数
}, componentRefresh() {
diySeckillInterval() { return this.$store.state.componentRefresh;
return this.$store.state.diySeckillInterval; },
}, // 客服配置
tabBarHeight() { servicerConfig() {
return this.$store.state.tabBarHeight; return this.$store.state.servicerConfig;
}, },
mapConfig() { // 企业微信配置
return this.$store.state.mapConfig; wxworkConfig() {
}, return this.$store.state.wxworkConfig;
copyright() { },
let copyright = this.$store.state.copyright; diySeckillInterval() {
// 判断是否授权 return this.$store.state.diySeckillInterval;
if (copyright && !copyright.auth) { },
copyright.logo = ''; tabBarHeight() {
copyright.copyright_link = ''; return this.$store.state.tabBarHeight;
} },
return copyright; mapConfig() {
}, return this.$store.state.mapConfig;
cartList() { },
return this.$store.state.cartList; copyright() {
}, let copyright = this.$store.state.copyright;
cartIds() { // 判断是否授权
return this.$store.state.cartIds; if (copyright && !copyright.auth) {
}, copyright.logo = '';
cartNumber() { copyright.copyright_link = '';
return this.$store.state.cartNumber; }
}, return copyright;
cartMoney() { },
return this.$store.state.cartMoney; cartList() {
} return this.$store.state.cartList;
}, },
methods: { cartIds() {
return this.$store.state.cartIds;
// 颜色变浅(>0、变深函数<0 },
lightenDarkenColor(color, amount) { cartNumber() {
return this.$store.state.cartNumber;
var usePound = false; },
cartMoney() {
if (color[0] == "#") { return this.$store.state.cartMoney;
color = color.slice(1); }
usePound = true; },
} methods: {
themeColorSet() {
var num = parseInt(color, 16); let theme = this.themeStyle;
this.themeColor = `--base-color:${theme.main_color};--base-help-color:${theme.aux_color};`;
var r = (num >> 16) + amount; if (this.tabBarHeight != '56px') this.themeColor += `--tab-bar-height:${this.tabBarHeight};`
Object.keys(theme).forEach(key => {
if (r > 255) r = 255; let data = theme[key];
else if (r < 0) r = 0; if (typeof(data) == "object") {
Object.keys(data).forEach(k => {
var b = ((num >> 8) & 0x00FF) + amount; this.themeColor += '--' + k.replace(/_/g, "-") + ':' + data[k] + ';';
});
if (b > 255) b = 255; } else if (typeof(key) == "string" && key) {
else if (b < 0) b = 0; this.themeColor += '--' + key.replace(/_/g, "-") + ':' + data + ';';
}
var g = (num & 0x0000FF) + amount; });
for (let i = 9; i >= 5; i--) {
if (g > 255) g = 255; let color = this.$util.colourBlend(theme.main_color, '#ffffff', (i / 10));
else if (g < 0) g = 0; this.themeColor += `--base-color-light-${i}:${color};`;
}
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16); },
// 颜色变浅(>0、变深函数<0
}, lightenDarkenColor(color, amount) {
/**
* 切换门店 var usePound = false;
* @param {Object} info 门店信息
* @param {Object} isJump 是否跳转到首页 if (color[0] == "#") {
*/ color = color.slice(1);
changeStore(info, isJump) { usePound = true;
if (info) { }
this.$store.commit('setGlobalStoreInfo', info);
} var num = parseInt(color, 16);
let route = this.$util.getCurrRoute();
if (isJump && route != 'pages/index/index') { var r = (num >> 16) + amount;
uni.setStorageSync('manual_change_store', true); // 手动切换门店
this.$store.dispatch('getCartNumber'); //重新获取购物车数据 if (r > 255) r = 255;
this.$util.redirectTo('/pages/index/index'); else if (r < 0) r = 0;
}
} var b = ((num >> 8) & 0x00FF) + amount;
},
filters: { if (b > 255) b = 255;
/** else if (b < 0) b = 0;
* 金额格式化输出
* @param {Object} money var g = (num & 0x0000FF) + amount;
*/
moneyFormat(money) { if (g > 255) g = 255;
if (isNaN(parseFloat(money))) return money; else if (g < 0) g = 0;
return parseFloat(money).toFixed(2);
} return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
}
},
/**
* 切换门店
* @param {Object} info 门店信息
* @param {Object} isJump 是否跳转到首页
*/
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('/pages/index/index'); 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,61 +1,9 @@
import { langConfig } from './config-external.js'; const langList = ['zh-cn', 'en-us'];
var locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言 var locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
// 缓存已加载的语言包
var 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'],
/** /**
* * 解析多语言 * * 解析多语言
* @param {Object} field * @param {Object} field
@@ -65,43 +13,40 @@ export default {
if (!_this) return; if (!_this) return;
var value = ''; var value = '';
let newRoute;
try { try {
//公共语言包(同步加载) //公共语言包
var lang = loadLangPackSync(locale, 'common'); var lang = require('../../lang/' + locale + '/common.js').lang;
//当前页面语言包(同步加载) //当前页面语言包
let route = _this.route; let route = _this.route.split("/");
let langPath = processRoutePath(route); newRoute = route.slice(1, route.length);
// console.log(`当前页面语言包路径: ${langPath}`); 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); 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) {
@@ -111,31 +56,21 @@ export default {
} }
} }
if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field
// 多语言调试,注释后可以关闭控制台输出
// console.log(`字段: ${field}, 值: ${value}`)
return value; return value;
}, },
/** //切换语言
* * 切换语言 change(value) {
* @param {String} value 语言值
* @param {String} url 切换后跳转的页面url
*/
change(value, url = '/pages_tool/member/index') {
let _this = getCurrentPages()[getCurrentPages().length - 1]; let _this = getCurrentPages()[getCurrentPages().length - 1];
if (!_this) return; if (!_this) return;
uni.setStorageSync("lang", value); uni.setStorageSync("lang", value);
locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言 locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
// 清空已加载的语言包缓存
loadedLangPacks = {};
this.refresh(); this.refresh();
if (url) { uni.reLaunch({
uni.reLaunch({ url: url }); url: '/pages/member/index'
} });
}, },
//刷新标题、tabbar //刷新标题、tabbar
refresh() { refresh() {
@@ -179,16 +114,15 @@ 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,107 +1,107 @@
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 = url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo` identity = 'com.baidu.BaiduMap';
identity = 'com.baidu.BaiduMap' openURL(url, identity)
openURL(url, identity) } else if (plus.runtime.isApplicationExist({
} else if (plus.runtime.isApplicationExist({ pname: 'com.autonavi.minimap'
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 = url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`; openURL(url, identity)
openURL(url, identity) } else if (plus.runtime.isApplicationExist({
} else if (plus.runtime.isApplicationExist({ action: 'iosamap://'
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) { switch (uni.getSystemInfoSync().platform) {
case 'android': case 'android':
console.log('运行Android上') console.log('运行Android上')
openMapByAndroid(arr[1], arr[0], name) openMapByAndroid(arr[1], arr[0], name)
break; break;
case 'ios': case 'ios':
console.log('运行iOS上') console.log('运行iOS上')
openMapByIos(arr[1], arr[0], name) openMapByIos(arr[1], arr[0], name)
break; break;
default: default:
openMapByDefault(arr[1], arr[0], name) openMapByDefault(arr[1], arr[0], name)
console.log('运行在开发者工具上') console.log('运行在开发者工具上')
break; break;
} }
// #endif // #endif
// #ifndef APP-PLUS // #ifndef APP-PLUS
openMapByDefault(arr[1], arr[0], name) openMapByDefault(arr[1], arr[0], name)
// #endif // #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();
}
});
}
}

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,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" @click="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 @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>
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 }"
@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' }]">
{{ 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" @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' }]">
{{ 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"
@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' }]">
{{ 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">
/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

@@ -1,329 +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" @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>
import { adaptSubpackageUrl } 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 === '/pages/index/index' && this.name === 'DIY_VIEW_INDEX') {
return true;
}
// console.log('diy-bottom-nav verify:', { likkUrl: adaptSubpackageUrl(linkUrl), currentPageRoute: currentPageRoute});
// 精确匹配当前路径
if (adaptSubpackageUrl(linkUrl) === currentPageRoute) {
return true;
}
// 同属于一个子包的路径,也认为是匹配的
try {
if (adaptSubpackageUrl(linkUrl).split('/')[1] === currentPageRoute.split('/')[1]) {
return true;
}
} catch (error) {
console.error('diy-bottom-nav verify error:', error);
}
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

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" @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>
</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 @click="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,172 +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"
@click="handlerClick(item)" @tap="handlerClick(item)" @error="imgError(index)"
:style="itemCss" />
</view>
</view>
</view>
</view>
</x-skeleton>
</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
}
},
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

@@ -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"
@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' }]">
{{ 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 + '%' }" @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>
<!-- #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 + '%' }" @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>
// 自定义图形导航
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() == '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

@@ -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" @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' }]">
{{ 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" @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' }]">
{{ 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"
@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' }]">
{{ 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">
/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>

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 + '%'
}" @click.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,318 +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" @click="handlerClick(imgAdsValue.list[0].link)"
@tap="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" @click="handlerClick(item.link)" @tap="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);
}
}
}
}
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
/deep/.uni-scroll-view::-webkit-scrollbar {
display: none;
}
.swiper /deep/ .uni-swiper-dots-horizontal {
bottom: 25rpx;
}
.swiper-left /deep/ .uni-swiper-dots-horizontal {
left: 40rpx;
transform: translate(0);
}
.swiper-right /deep/ .uni-swiper-dots-horizontal {
right: 40rpx;
display: flex;
justify-content: flex-end;
transform: translate(0);
}
.carousel-angle /deep/ .uni-swiper-dots-horizontal .uni-swiper-dot {
width: 24rpx;
border-radius: 0;
height: 8rpx;
}
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot {
width: 18rpx;
height: 6rpx;
border-radius: 4rpx;
}
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot-active {
width: 36rpx;
}
</style>

View File

@@ -1,867 +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"
@click="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 }"
@click="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 }]"
@click="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" @click="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" @click="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"
@click="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" @click="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 nsLoading from '@/components/ns-loading/ns-loading.vue';
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],
components: {
nsLoading
},
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;
}
/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">
<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 }" @click="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-picture" class="diy-picture" :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" @click="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() == 'pages/member/index' && !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" @click="handlerClick(liveInfo.roomid)" @tap="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" @click="handlerClick({ item, index })" @tap="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,82 +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;"
@click="handlerClick(item)" @tap="handlerClick(item)">
<cover-view style="font-size:24rpx">一键导航</cover-view>
</cover-view>
</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" @click="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" @click="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" @click="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" @click="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" @click="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" @click="handlerClick(item)" @tap="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 + '%' }" @click="handlerClick(item)" @tap="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,370 +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" @click="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" @click="handlerClick(item)"
@tap="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('/pages/index/index');
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" @click="closeNoticePopup">
<text>公告</text>
<text class="iconfont icon-close"></text>
</view>
<view class="content-wrap">{{ notice }}</view>
<button type="primary" @click="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,92 +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" @click="handlerClick(item)" @tap="handlerClick(item)"></image>
<image mode="widthFix" style="width: 100%;height:auto" :src="$util.img(item.imageUrl)" v-else
@click="handlerClick(item)" @tap="handlerClick(item)"></image>
</view>
<!-- <view 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: {
previewImg(img) {
// #ifdef MP-WEIXIN
uni.previewImage({
current: 0,
urls: [this.$util.img(img)],
success: function (res) { },
fail: function (res) { },
complete: function (res) { },
})
// #endif
},
redirectTo(link) {
if (link.wap_url) {
if (this.$util.getCurrRoute() == 'pages/member/index' && !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;
if (item.link.wap_url) {
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" @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.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" @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', { '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"
@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)" />
</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">
/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-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 }"
@click="$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" @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.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" @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 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"
@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)" />
<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">
/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-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,469 +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" @click="handlerClick(item)"
@tap="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" @click="handlerClick(item)"
@tap="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"
@click="handlerClick(item)" @tap="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">
/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-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"
@click="handlerClick(item)" @tap="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() == 'pages/member/index' && !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,539 +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]" @click="handlerClick(value.list[0].link)"
@tap="handlerClick(value.list[0].link)"
: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]" @click="handlerClick(item.link)"
@tap="handlerClick(item.link)"
: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' }"
@click="handlerClick(value.list[0].link)" @tap="handlerClick(value.list[0].link)">
<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' }"
@click="handlerClick(value.list[1].link)" @tap="handlerClick(value.list[1].link)">
<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]" @click="handlerClick(item.link)"
@tap="handlerClick(item.link)" :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"
@click="handlerClick(item.link)" @tap="handlerClick(item.link)"
: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) {
await this.__$emitEvent({
eventName: 'rubik-cube-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
if (!awaitedResult) return;
this.$util.diyRedirectTo(link);
}
})
}
}
};
</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,370 +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"
@click="handlerSearchClick" @tap="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" @click.stop="handlerSearchClick" @tap="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" @click.stop="handlerSearchClick"
@tap="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"
@click.stop="handlerSearchClick" @tap="handlerSearchClick"
:placeholderStyle="placeholderStyle" />
<text class="search-content-btn" @click.stop="handlerSearchClick" @tap="handlerSearchClick"
:style="{ 'backgroundColor': value.pageBgColor ? value.pageBgColor : 'rgba(0,0,0,0)' }">搜索</text>
</view>
<view class="img" v-if="value.iconType == 'img'"
@click.stop="handlerRedirectToClick(value.searchLink)"
@tap="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' }"
@click.stop="handlerRedirectToClick(value.searchLink)"
@tap="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() == 'pages/member/index' && !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">
/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;
/deep/ .uni-scroll-view-content {
display: flex;
align-items: center;
}
&.between {
justify-content: space-between;
/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,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"
@click="handlerClick(value.videoUrl)" @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

@@ -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,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>
@@ -655,4 +720,4 @@
.order-cell .promotion-content { .order-cell .promotion-content {
flex: 1; flex: 1;
} }
</style> </style>

View File

@@ -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"> <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') + ';',
@@ -40,8 +51,7 @@
<script> <script>
import uvCountTo from '@/components/uv-count-to/uv-count-to.vue' import uvCountTo from '@/components/uv-count-to/uv-count-to.vue'
import nsLogin from '@/components/ns-login/ns-login.vue' import nsLogin from '@/components/ns-login/ns-login.vue'
import DiyMinx from './minx.js'
//
export default { export default {
name: 'diy-digit', name: 'diy-digit',
components: { components: {
@@ -54,7 +64,6 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
mixins: [DiyMinx],
data() { data() {
return { return {
pageWidth: '', pageWidth: '',
@@ -74,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;
} }
}, },
@@ -93,7 +102,7 @@ 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() != 'pages/member/index' || this.storeToken) { if (!item.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
@@ -103,7 +112,7 @@ export default {
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;
@@ -116,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;
@@ -148,7 +157,7 @@ export default {
height: 8rpx; height: 8rpx;
} }
} }
&.circle { &.circle {
.uni-swiper-dot { .uni-swiper-dot {
width: 14rpx; width: 14rpx;
@@ -156,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;
@@ -178,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;
@@ -198,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;
@@ -212,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;
@@ -238,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;
@@ -255,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" @click="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'
}" @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> </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: [],
@@ -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,53 +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>
<!-- 自定义扩展组件 --> <!-- 自定义扩展组件 -->
<diy-comp-extend :value="item"></diy-comp-extend> <diy-comp-extend :value="item"></diy-comp-extend>
</view> </view>
@@ -258,98 +223,96 @@
</template> </template>
<script> <script>
// //
import DiyMinx from './minx.js' export default {
export default { components: {},
components: {}, props: {
props: { diyData: {
diyData: { type: Object
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;
return data; return this.diyGlobalData.value;
} },
}, //
methods: {} 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;
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>

View File

@@ -4,7 +4,6 @@
<script> <script>
// //
import DiyMinx from './minx.js'
export default { export default {
name: 'diy-horz-blank', name: 'diy-horz-blank',
props: { props: {
@@ -12,16 +11,15 @@ export default {
type: Object type: Object
} }
}, },
mixins: [DiyMinx],
data() { data() {
return {}; return {};
}, },
watch: { watch: {
// //
componentRefresh: function (nval) { } componentRefresh: function(nval) {}
}, },
computed: { computed: {
horzBlankGaugeWrap: function () { horzBlankGaugeWrap: function() {
var obj = ''; var obj = '';
obj += 'background-color:' + this.value.componentBgColor + ';'; obj += 'background-color:' + this.value.componentBgColor + ';';
if (this.value.componentAngle == 'round') { if (this.value.componentAngle == 'round') {
@@ -34,7 +32,7 @@ export default {
return obj; return obj;
} }
}, },
created() { }, created() {},
methods: {} methods: {}
}; };
</script> </script>

View File

@@ -1,11 +1,9 @@
<template> <template>
<view data-component-name="diy-horz-line" :style="{ borderTop: '2rpx ' + value.borderStyle + ' ' + value.color }"> <view data-component-name="diy-horz-line" :style="{ borderTop: '2rpx ' + value.borderStyle + ' ' + value.color }"></view>
</view>
</template> </template>
<script> <script>
// 线 // 线
import DiyMinx from './minx.js'
export default { export default {
name: 'diy-horz-line', name: 'diy-horz-line',
props: { props: {
@@ -13,13 +11,12 @@ export default {
type: Object type: Object
} }
}, },
mixins: [DiyMinx],
data() { data() {
return {}; return {};
}, },
watch: { watch: {
// //
componentRefresh: function (nval) { } componentRefresh: function(nval) {}
}, },
methods: {} methods: {}
}; };

View File

@@ -0,0 +1,73 @@
<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 + '%'
}" @click.stop="$util.diyRedirectTo(mapItem.link)"></view>
</view>
</view>
</template>
<script>
export default {
name: 'diy-hot-area',
props: {
value: {
type: Object,
default: () => {
return {};
}
}
},
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

@@ -0,0 +1,84 @@
<template>
<view data-component-name="diy-icon" class="diy-icon" :style="iconBgStyle">
<text class="js-icon" :class="iconClass" :style="iconStyle"></text>
</view>
</template>
<script>
export default {
name: 'diy-icon',
props: {
icon: {
type: String,
default: ''
},
value: {
type: Object,
default: function () {
return null;
}
}
},
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,28 +1,44 @@
<template> <template>
<view :style="componentStyle"> <view :style="componentStyle">
<scroll-view :class="['image-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]" <scroll-view
:scroll-x="value.showStyle == 'singleSlide'"> :class="['image-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" :class="['image-nav-item', value.mode]" <view
style="margin-right: 28rpx;"> v-for="(item, index) in value.list"
:key="index"
:class="['image-nav-item', value.mode]"
style="margin-right: 28rpx;"
>
<!-- 图片部分 --> <!-- 图片部分 -->
<view v-if="value.mode != 'text'" class="image-img" :style="{ <view v-if="value.mode != 'text'" class="image-img" :style="{
'font-size': (value.imageSize * 2 + 'rpx') + ';', 'font-size': (value.imageSize * 2 + 'rpx') + ';',
'width': (item.imgWidth / 2 + 'rpx') + ';', 'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';' 'height': (item.imgHeight / 2 + 'rpx') + ';'
}"> }">
<image v-if="item.link.wap_url" :style="{ <image
'width': (item.imgWidth / 2 + 'rpx') + ';', v-if="item.link.wap_url"
'height': (item.imgHeight / 2 + 'rpx') + ';' :style="{
}" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')" 'width': (item.imgWidth / 2 + 'rpx') + ';',
:show-menu-by-longpress="true" @tap="redirectTo(item.link)"></image> 'height': (item.imgHeight / 2 + 'rpx') + ';'
<image v-else :style="{ }"
'width': (item.imgWidth / 2 + 'rpx') + ';', :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
'height': (item.imgHeight / 2 + 'rpx') + ';' :show-menu-by-longpress="true"
}" :src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')" @tap="redirectTo(item.link)"
:show-menu-by-longpress="true" @tap="previewImg(item.imageUrl)"></image> ></image>
<image
v-else
:style="{
'width': (item.imgWidth / 2 + 'rpx') + ';',
'height': (item.imgHeight / 2 + 'rpx') + ';'
}"
:src="$util.img(item.imageUrl) || $util.img('public/uniapp/default_img/goods.png')"
:show-menu-by-longpress="true"
@tap="previewImg(item.imageUrl)"
></image>
</view> </view>
<!-- 文字部分 --> <!-- 文字部分 -->
<text class="image-text" :style="{ <text class="image-text" :style="{
'width': (item.imgWidth / 2 + 'rpx') + ';', 'width': (item.imgWidth / 2 + 'rpx') + ';',
@@ -39,7 +55,6 @@
<script> <script>
import nsLogin from '@/components/ns-login/ns-login.vue' import nsLogin from '@/components/ns-login/ns-login.vue'
import DiyMinx from './minx.js'
export default { export default {
name: 'diy-image-nav', name: 'diy-image-nav',
@@ -52,7 +67,6 @@ export default {
default: () => ({}) default: () => ({})
} }
}, },
mixins: [DiyMinx],
data() { data() {
return { return {
pageWidth: '', pageWidth: '',
@@ -72,23 +86,23 @@ export default {
componentStyle() { componentStyle() {
let style = ''; let style = '';
style += 'background-color:' + this.value.componentBgColor + ';'; style += 'background-color:' + this.value.componentBgColor + ';';
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;
}, },
swiperHeight() { swiperHeight() {
let height = 0; let height = 0;
if (this.value.mode == 'graphic') { if (this.value.mode == 'graphic') {
height = (49 + this.value.imageSize) * this.value.pageCount; height = (49 + this.value.imageSize) * this.value.pageCount;
} else if (this.value.mode == 'img') { } else if (this.value.mode == 'img') {
@@ -96,13 +110,13 @@ export default {
} else if (this.value.mode == 'text') { } else if (this.value.mode == 'text') {
height = 43 * this.value.pageCount; height = 43 * this.value.pageCount;
} }
return 'height:' + (2 * height) + 'rpx'; return 'height:' + (2 * height) + 'rpx';
}, },
isIndicatorDots() { isIndicatorDots() {
return this.value.carousel.type != 'hide' && return this.value.carousel.type != 'hide' &&
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount)); 1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
} }
}, },
methods: { methods: {
@@ -111,12 +125,12 @@ export default {
uni.previewImage({ uni.previewImage({
current: 0, current: 0,
urls: [this.$util.img(imageUrl)], urls: [this.$util.img(imageUrl)],
success: (res) => { }, success: (res) => {},
fail: (res) => { }, fail: (res) => {},
complete: (res) => { } complete: (res) => {}
}); });
}, },
// //
redirectTo(link) { redirectTo(link) {
if (!link.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) { if (!link.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
@@ -125,7 +139,7 @@ export default {
this.$refs.login.open(link.wap_url); this.$refs.login.open(link.wap_url);
} }
}, },
// //
swiperChange(event) { swiperChange(event) {
this.swiperCurrent = event.detail.current; this.swiperCurrent = event.detail.current;
@@ -138,31 +152,31 @@ export default {
.image-nav { .image-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;
} }
.image-nav-item { .image-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;
@@ -170,7 +184,7 @@ export default {
height: 8rpx; height: 8rpx;
} }
} }
&.circle { &.circle {
.uni-swiper-dot { .uni-swiper-dot {
width: 14rpx; width: 14rpx;
@@ -178,46 +192,46 @@ export default {
} }
} }
} }
.image-nav-wrap { .image-nav-wrap {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.image-nav-item { .image-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;
.image-text { .image-text {
padding-top: 12rpx; padding-top: 12rpx;
line-height: 1.5; line-height: 1.5;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
&.alone { &.alone {
padding-top: 0; padding-top: 0;
} }
} }
&.text { &.text {
.image-text { .image-text {
padding-top: 0; padding-top: 0;
} }
} }
.image-img { .image-img {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 90rpx; font-size: 90rpx;
.tag { .tag {
position: absolute; position: absolute;
top: -10rpx; top: -10rpx;
@@ -231,7 +245,7 @@ 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;
@@ -247,16 +261,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;
@@ -264,7 +278,7 @@ export default {
height: 8rpx; height: 8rpx;
} }
} }
&.circle { &.circle {
.swiper-dot { .swiper-dot {
width: 15rpx; width: 15rpx;

View File

@@ -0,0 +1,310 @@
<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" @click="handlerClick(imgAdsValue.list[0].link)" @tap="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" @click="handlerClick(item.link)" @tap="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);
}
}
}
}
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
/deep/.uni-scroll-view::-webkit-scrollbar {
display: none;
}
.swiper /deep/ .uni-swiper-dots-horizontal {
bottom: 25rpx;
}
.swiper-left /deep/ .uni-swiper-dots-horizontal {
left: 40rpx;
transform: translate(0);
}
.swiper-right /deep/ .uni-swiper-dots-horizontal {
right: 40rpx;
display: flex;
justify-content: flex-end;
transform: translate(0);
}
.carousel-angle /deep/ .uni-swiper-dots-horizontal .uni-swiper-dot {
width: 24rpx;
border-radius: 0;
height: 8rpx;
}
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot {
width: 18rpx;
height: 6rpx;
border-radius: 4rpx;
}
.swiper.ns-indicator-dots /deep/ .uni-swiper-dot-active {
width: 36rpx;
}
</style>

View File

@@ -0,0 +1,830 @@
<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"
@click="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 }" @click="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 }]" @click="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" @click="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" @click="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" @click="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" @click="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">{{ 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 nsLoading from '@/components/ns-loading/ns-loading.vue';
export default {
props: {
value: {
type: Object
},
bgUrl: {
type: String
},
scrollTop: {
type: [String, Number],
default: '0'
},
diyGlobal: {
type: Object
}
},
components: {
nsLoading
},
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;
}
/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

@@ -0,0 +1,71 @@
<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="color: ;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}" @click="previewSqs()">立即添加</span>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'diy-picture',
props: {
value: {
type: Object
}
},
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

@@ -0,0 +1,77 @@
<template>
<view data-component-name="diy-picture" class="diy-picture" :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" @click="redirectTo(item.link)" class="fui-cell" :class="item.iconType == 'img'?'img-cell':''" :key="index">
<view class="fui-cell-icon" style="color:diyitem.style.iconcolo">
<diy-icon v-if="item.iconType == 'icon'" :icon="item.icon"
:value="item.style ? item.style : null"
: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>
</view>
</template>
<script>
export default {
name: 'diy-listmenu',
props: {
value: {
type: Object
}
},
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() == 'pages/member/index' && !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

@@ -0,0 +1,249 @@
<template>
<x-skeleton data-component-name="diy-live" type="banner" :loading="loading" :configs="skeletonConfig">
<view class="live-wrap" @click="handlerClick(liveInfo.roomid)" @tap="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

@@ -0,0 +1,255 @@
<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" @click="handlerClick({item,index})" @tap="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

@@ -0,0 +1,87 @@
<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" :key="index">
<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;" @click="handlerClick(item)" @tap="handlerClick(item)">
<cover-view style="font-size:24rpx">一键导航</cover-view>
</cover-view>
</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

@@ -0,0 +1,249 @@
<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" @click="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" @click="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" @click="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" @click="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" @click="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>
// 自定义会员中心——我的订单
export default {
name: 'diy-member-my-order',
props: {
value: {
type: Object
}
},
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>

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