Compare commits
54 Commits
release/v1
...
dev/2.0
| Author | SHA1 | Date | |
|---|---|---|---|
| e263a616f6 | |||
| ed5181b382 | |||
| 95375d5476 | |||
| b34003e2c0 | |||
| 3a455bd644 | |||
| 8103f4c897 | |||
| 0066a46037 | |||
| 0b62de8c6b | |||
| 9097658782 | |||
| ca74d4f8e5 | |||
| d9c9599cb2 | |||
| 142a97d65c | |||
| b945583857 | |||
| 88debacf8c | |||
| 9d12b02463 | |||
| ee6c777fb1 | |||
| 5503758854 | |||
| 8d84306747 | |||
| 23e81114e9 | |||
| 08583aa8aa | |||
| 5e536afeae | |||
| c45f3e69da | |||
| 80428e625f | |||
| a06ee95482 | |||
| b4aed459c5 | |||
| aa03abf651 | |||
| af23505a74 | |||
| 3898518ad0 | |||
| f0d3d1986f | |||
| 2750d8012f | |||
| 89fbfcaca6 | |||
| 80c172ed77 | |||
| a0ddcd673d | |||
| c50fab3d3a | |||
| 578d914e9b | |||
| 1b194bf3e1 | |||
| b685a91598 | |||
| 7da168e1b2 | |||
| 179a9089b7 | |||
| 57a0bb9b5a | |||
| 4cfbfa7d8f | |||
| eb189ae9f7 | |||
| d489f352db | |||
| 7dbf455341 | |||
| 2416eab34f | |||
| c4f2cea1a9 | |||
| 227ab42e5a | |||
| 4cf19e417f | |||
| 97f6971bd0 | |||
| 526c813d8d | |||
| 29280f6f57 | |||
| 1c2fee28ec | |||
| 5b9114aeac | |||
| 2dfb2e0316 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -2,3 +2,4 @@
|
|||||||
/.hbuilderx
|
/.hbuilderx
|
||||||
/.idea
|
/.idea
|
||||||
/node_modules
|
/node_modules
|
||||||
|
/iconfont-preview.html
|
||||||
|
|||||||
@@ -1,43 +0,0 @@
|
|||||||
// 本地调试配置示例文件
|
|
||||||
// 复制此文件并重命名为 local.config.js 以使用自定义本地配置
|
|
||||||
|
|
||||||
const localDevConfig = ({
|
|
||||||
'460': { // 制氧设备平台
|
|
||||||
uniacid: 460,
|
|
||||||
domain: 'https://xcx30.5g-quickapp.com/',
|
|
||||||
},
|
|
||||||
'576-xcx30.5g': { // 活性石灰装备
|
|
||||||
uniacid: 576,
|
|
||||||
domain: 'https://xcx30.5g-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2285': { // 数码喷墨墨水
|
|
||||||
uniacid: 2285,
|
|
||||||
domain: 'https://xcx.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2811': { // POCT检测分析平台
|
|
||||||
uniacid: 2811,
|
|
||||||
domain: 'https://xcx6.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2724': { // 生物菌肥
|
|
||||||
uniacid: 2724,
|
|
||||||
domain: 'https://xcx.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2505': { // 煤矿钻机
|
|
||||||
uniacid: 2505,
|
|
||||||
domain: 'https://xcx.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2777': { // 养老服务
|
|
||||||
uniacid: 2777,
|
|
||||||
domain: 'https://xcx.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'1': { // 开发平台
|
|
||||||
uniacid: 1,
|
|
||||||
domain: 'https://dev.aigc-quickapp.com',
|
|
||||||
},
|
|
||||||
'1-test': { // 测试平台
|
|
||||||
uniacid: 1,
|
|
||||||
domain: 'https://test.aigc-quickapp.com',
|
|
||||||
},
|
|
||||||
})['2811']; // 选择要使用的环境配置
|
|
||||||
|
|
||||||
export default localDevConfig;
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
// 本地调试配置示例文件
|
|
||||||
// 复制此文件并重命名为 local.config.js 以使用自定义本地配置
|
|
||||||
|
|
||||||
const localDevConfig = ({
|
|
||||||
'460': { // 制氧设备平台
|
|
||||||
uniacid: 460,
|
|
||||||
domain: 'https://xcx30.5g-quickapp.com/',
|
|
||||||
},
|
|
||||||
'576-xcx30.5g': { // 活性石灰装备
|
|
||||||
uniacid: 576,
|
|
||||||
domain: 'https://xcx30.5g-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2285': { // 数码喷墨墨水
|
|
||||||
uniacid: 2285,
|
|
||||||
domain: 'https://xcx.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2811': { // POCT检测分析平台
|
|
||||||
uniacid: 2811,
|
|
||||||
domain: 'https://xcx6.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2724': { // 生物菌肥
|
|
||||||
uniacid: 2724,
|
|
||||||
domain: 'https://xcx.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2505': { // 煤矿钻机
|
|
||||||
uniacid: 2505,
|
|
||||||
domain: 'https://xcx.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'2777': { // 养老服务
|
|
||||||
uniacid: 2777,
|
|
||||||
domain: 'https://xcx.aigc-quickapp.com/',
|
|
||||||
},
|
|
||||||
'1': { // 开发平台
|
|
||||||
uniacid: 1,
|
|
||||||
domain: 'https://dev.aigc-quickapp.com',
|
|
||||||
},
|
|
||||||
'1-test': { // 测试平台
|
|
||||||
uniacid: 1,
|
|
||||||
domain: 'https://test.aigc-quickapp.com',
|
|
||||||
},
|
|
||||||
})['2811']; // 选择要使用的环境配置
|
|
||||||
|
|
||||||
export default localDevConfig;
|
|
||||||
23
App.vue
23
App.vue
@@ -1,17 +1,17 @@
|
|||||||
<script>
|
<script>
|
||||||
import auth from 'common/js/auth.js';
|
import auth from 'common/js/auth.js';
|
||||||
import configExternal from 'common/js/config-external.js'
|
import colorList from 'common/js/style_color.js'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Weixin
|
Weixin
|
||||||
} from 'common/js/wx-jssdk.js';
|
} from 'common/js/wx-jssdk.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
mixins: [auth],
|
mixins: [auth],
|
||||||
onLaunch: async function(options) {
|
onLaunch: function(options) {
|
||||||
// 方式:支持快应用,从url中query部分获取uniacid,或useragent中获取uniacid
|
// console.log(options.query.uniacid)
|
||||||
if(options.query.uniacid){
|
if(options.query.uniacid){
|
||||||
uni.setStorageSync('uniacid', options.query.uniacid);
|
uni.setStorageSync('uniacid', options.query.uniacid);
|
||||||
|
console.log(uni.getStorageSync('uniacid'))
|
||||||
}
|
}
|
||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
|
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
if (this.$util.getDeviceInfo().platform == 'ios') {
|
if (uni.getDeviceInfo().platform == 'ios') {
|
||||||
uni.setStorageSync('initUrl', location.href);
|
uni.setStorageSync('initUrl', location.href);
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
@@ -61,9 +61,7 @@
|
|||||||
|
|
||||||
// 主题风格
|
// 主题风格
|
||||||
if (uni.getStorageSync('themeStyle')) {
|
if (uni.getStorageSync('themeStyle')) {
|
||||||
const themeData = await configExternal.loadTheme(uni.getStorageSync('themeStyle'));
|
this.$store.commit('setThemeStyle', colorList[uni.getStorageSync('themeStyle')]);
|
||||||
this.$store.commit('setThemeStyle', themeData);
|
|
||||||
this.$store.dispatch('themeColorSet');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 插件是否存在
|
// 插件是否存在
|
||||||
@@ -153,7 +151,6 @@
|
|||||||
onShow: function(options) {
|
onShow: function(options) {
|
||||||
// #ifdef MP
|
// #ifdef MP
|
||||||
// 自动授权登录
|
// 自动授权登录
|
||||||
this.getAuthInfo();
|
|
||||||
if (this.$store.state.token) {
|
if (this.$store.state.token) {
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/member/info',
|
url: '/api/member/info',
|
||||||
@@ -163,6 +160,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}else{
|
||||||
|
this.getAuthInfo();
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
@@ -179,8 +178,7 @@
|
|||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
if (this.$util.isWeiXin()) {
|
if (this.$util.isWeiXin()) {
|
||||||
this.$util.getUrlCode(urlParams => {
|
this.$util.getUrlCode(urlParams => {
|
||||||
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams
|
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams.source_member);
|
||||||
.source_member);
|
|
||||||
|
|
||||||
if (urlParams.code == undefined) {
|
if (urlParams.code == undefined) {
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
@@ -206,8 +204,7 @@
|
|||||||
let data = {};
|
let data = {};
|
||||||
if (res.data.openid) data.wx_openid = res.data.openid;
|
if (res.data.openid) data.wx_openid = res.data.openid;
|
||||||
if (res.data.unionid) data.wx_unionid = res.data.unionid;
|
if (res.data.unionid) data.wx_unionid = res.data.unionid;
|
||||||
if (res.data.userinfo) Object.assign(data, res.data
|
if (res.data.userinfo) Object.assign(data, res.data.userinfo);
|
||||||
.userinfo);
|
|
||||||
this.authLogin(data);
|
this.authLogin(data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
1754
common/css/main.scss
1754
common/css/main.scss
File diff suppressed because one or more lines are too long
@@ -1,4 +0,0 @@
|
|||||||
// 修复图片垂直对齐问题,解决两张图片上下有空白缝隙问题
|
|
||||||
/deep/ ._img {
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -1,132 +0,0 @@
|
|||||||
// 外置配置管理
|
|
||||||
// 用于管理需要外置的配置项,如语言包、主题配置等
|
|
||||||
|
|
||||||
// 语言包配置
|
|
||||||
export const langConfig = {
|
|
||||||
// 语言列表
|
|
||||||
langList: ['zh-cn', 'en-us'],
|
|
||||||
// 默认语言
|
|
||||||
defaultLang: 'zh-cn',
|
|
||||||
// 语言包加载方式:'lazy'(按需加载)或 'preload'(预加载)
|
|
||||||
loadMode: 'lazy'
|
|
||||||
};
|
|
||||||
|
|
||||||
// 主题配置
|
|
||||||
export const themeConfig = {
|
|
||||||
// 主题列表
|
|
||||||
themeList: ['default', 'red', 'green', 'blue', 'pink', 'gold', 'purple', 'yellow', 'black'],
|
|
||||||
// 默认主题
|
|
||||||
defaultTheme: 'default'
|
|
||||||
};
|
|
||||||
|
|
||||||
// API配置
|
|
||||||
export const apiConfig = {
|
|
||||||
// API请求超时时间
|
|
||||||
timeout: 30000,
|
|
||||||
// 是否开启重试
|
|
||||||
retry: true,
|
|
||||||
// 重试次数
|
|
||||||
retryCount: 3,
|
|
||||||
// 重试间隔时间(毫秒)
|
|
||||||
retryDelay: 1000
|
|
||||||
};
|
|
||||||
|
|
||||||
// 配置外置管理类
|
|
||||||
class ConfigExternal {
|
|
||||||
constructor() {
|
|
||||||
this.loadedConfigs = {};
|
|
||||||
this.loadPromises = {};
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 加载语言包
|
|
||||||
* @param {string} lang - 语言类型
|
|
||||||
* @returns {Promise} - 加载结果
|
|
||||||
*/
|
|
||||||
async loadLang(lang = langConfig.defaultLang) {
|
|
||||||
if (this.loadedConfigs[`lang_${lang}`]) {
|
|
||||||
return this.loadedConfigs[`lang_${lang}`];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.loadPromises[`lang_${lang}`]) {
|
|
||||||
return this.loadPromises[`lang_${lang}`];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loadPromises[`lang_${lang}`] = new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
// 动态加载语言包
|
|
||||||
const langData = require(`@/lang/${lang}/common.js`).lang;
|
|
||||||
this.loadedConfigs[`lang_${lang}`] = langData;
|
|
||||||
resolve(langData);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`加载语言包 ${lang} 失败:`, error);
|
|
||||||
reject(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return this.loadPromises[`lang_${lang}`];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 加载页面语言包
|
|
||||||
* @param {string} lang - 语言类型
|
|
||||||
* @param {string} pagePath - 页面路径
|
|
||||||
* @returns {Promise} - 加载结果
|
|
||||||
*/
|
|
||||||
async loadPageLang(lang = langConfig.defaultLang, pagePath) {
|
|
||||||
const key = `page_${lang}_${pagePath}`;
|
|
||||||
if (this.loadedConfigs[key]) {
|
|
||||||
return this.loadedConfigs[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.loadPromises[key]) {
|
|
||||||
return this.loadPromises[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loadPromises[key] = new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
// 动态加载页面语言包
|
|
||||||
const pageLangData = require(`@/lang/${lang}/${pagePath}.js`).lang;
|
|
||||||
this.loadedConfigs[key] = pageLangData;
|
|
||||||
resolve(pageLangData);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`加载页面语言包 ${lang}/${pagePath} 失败:`, error);
|
|
||||||
resolve({});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return this.loadPromises[key];
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 加载主题配置(异步方式)
|
|
||||||
* @param {string} theme - 主题名称
|
|
||||||
* @returns {Promise} - 加载结果
|
|
||||||
*/
|
|
||||||
async loadTheme(theme = themeConfig.defaultTheme) {
|
|
||||||
if (this.loadedConfigs[`theme_${theme}`]) {
|
|
||||||
return this.loadedConfigs[`theme_${theme}`];
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.loadPromises[`theme_${theme}`]) {
|
|
||||||
return this.loadPromises[`theme_${theme}`];
|
|
||||||
}
|
|
||||||
|
|
||||||
this.loadPromises[`theme_${theme}`] = new Promise((resolve, reject) => {
|
|
||||||
try {
|
|
||||||
// 动态加载主题配置
|
|
||||||
const themeData = require(`@/common/js/style_color.js`)['default'][theme];
|
|
||||||
console.log('async themeData => ', themeData);
|
|
||||||
this.loadedConfigs[`theme_${theme}`] = themeData;
|
|
||||||
resolve(themeData);
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`加载主题 ${theme} 失败:`, error);
|
|
||||||
reject(error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return this.loadPromises[`theme_${theme}`];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default new ConfigExternal();
|
|
||||||
@@ -1,92 +1,32 @@
|
|||||||
// 发行版本,配置说明
|
// 发行版本,配置说明
|
||||||
let releaseCfg = undefined;
|
let releaseCfg = undefined;
|
||||||
|
|
||||||
// #ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-QQ || MP-TOUTIAO
|
|
||||||
try {
|
try {
|
||||||
if (site) { // 从site.js文件中获取配置, 针对微信小程序类
|
if (site) {
|
||||||
releaseCfg = {
|
releaseCfg = {
|
||||||
baseUrl: site.baseUrl,
|
baseUrl: site.baseUrl,
|
||||||
imgDomain: site.baseUrl,
|
imgDomain: site.baseUrl,
|
||||||
h5Domain: site.baseUrl,
|
h5Domain: site.baseUrl,
|
||||||
uniacid: site.uniacid,
|
uniacid: site.uniacid,
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
console.warn('小程序发行环境下,必须配置site.js文件, 不然将使用默认配置,影响小程序定制分发!');
|
|
||||||
}
|
}
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 线上版本部署域名, 注意: 必须以 '/' 结尾,适用于小程序/H5/快应用等场景
|
// 调试版本,配置说明
|
||||||
// 默认域名, 自定义发行时可以修改
|
const devCfg = {
|
||||||
let defaultDomain = '';
|
|
||||||
|
|
||||||
// #ifdef H5_XCX_5G_QUICKAPP_COM
|
|
||||||
defaultDomain = 'https://xcx20.5g-quickapp.com';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef H5_XCX_AIGC_QUICKAPP_COM
|
|
||||||
defaultDomain = 'https://xcx.aigc-quickapp.com/';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef H5_5G_AIGC_QUICKAPP_COM
|
|
||||||
defaultDomain = 'https://5g.aigc-quickapp.com/';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef H5_TEST_AIGC_QUICKAPP_COM
|
|
||||||
defaultDomain = 'https://test.aigc-quickapp.com/';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// 确保域名以 '/' 结尾
|
|
||||||
if (defaultDomain && !defaultDomain.endsWith('/')) {
|
|
||||||
defaultDomain += '/';
|
|
||||||
}
|
|
||||||
|
|
||||||
// 本地调试配置示例文件
|
|
||||||
// 复制.local.config.js.example 并重命名为 .local.config.js 以使用自定义本地配置
|
|
||||||
let localDevConfig = { uniacid: 0, domain: defaultDomain };
|
|
||||||
|
|
||||||
// #ifndef PRODUCTION
|
|
||||||
// 尝试动态加载本地配置文件
|
|
||||||
if (process?.env?.NODE_ENV === 'development') {
|
|
||||||
try {
|
|
||||||
// 尝试从项目根目录加载本地配置文件
|
|
||||||
// 使用相对路径的方式,确保在不同平台下都能正确解析
|
|
||||||
let customConfig = require('@/.local.config.js').default;
|
|
||||||
if (customConfig) {
|
|
||||||
localDevConfig = customConfig;
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
// 如果本地配置文件不存在或加载失败,保持使用默认配置
|
|
||||||
// 只在开发模式下输出提示信息
|
|
||||||
// #ifdef WEB
|
|
||||||
console.log('本地配置文件 .local.config.js 不存在,使用默认配置');
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
const { uniacid = 0, domain = defaultDomain } = localDevConfig ?? { uniacid: 0, domain: defaultDomain }
|
|
||||||
|
|
||||||
export default {
|
|
||||||
/**
|
|
||||||
* 1.开发调试模式
|
|
||||||
* 去掉注释 ...defaultCfg;
|
|
||||||
* 注释掉 ...releaseCfg,
|
|
||||||
* 2.发行/发布模式,例如通过`HBuilder>发行>小程序微信`的时候,原理是:
|
|
||||||
* 然后将 `import site from "../site.js";`追加到 `unpackage\dist\build\mp-weixin\common\vendor.js` 文件内容开头部分
|
|
||||||
* 然后将 site.js 文件放到 `unpackage\dist\build\mp-weixin\` 目录下面
|
|
||||||
*/
|
|
||||||
// 商户ID
|
// 商户ID
|
||||||
uniacid: uniacid, //825
|
uniacid: 1, //825
|
||||||
|
|
||||||
//api请求地址
|
//api请求地址
|
||||||
baseUrl: domain,
|
baseUrl: 'https://dev.aigc-quickapp.com/',
|
||||||
|
// baseUrl: 'http://localhost:8010/',
|
||||||
|
|
||||||
// 图片域名
|
// 图片域名
|
||||||
imgDomain: domain,
|
imgDomain: 'https://dev.aigc-quickapp.com/',
|
||||||
|
//imgDomain: 'http://localhost:8010/',
|
||||||
|
|
||||||
// H5端域名
|
// H5端域名
|
||||||
h5Domain: domain,
|
h5Domain: 'https://dev.aigc-quickapp.com/',
|
||||||
|
// h5Domain: 'http://localhost:8010/',
|
||||||
|
|
||||||
// // api请求地址
|
// // api请求地址
|
||||||
// baseUrl: 'https://tsaas.liveplatform.cn/',
|
// baseUrl: 'https://tsaas.liveplatform.cn/',
|
||||||
@@ -105,20 +45,31 @@ export default {
|
|||||||
|
|
||||||
// // H5端域名
|
// // H5端域名
|
||||||
// h5Domain: 'http://saas.cn/',
|
// h5Domain: 'http://saas.cn/',
|
||||||
|
};
|
||||||
|
|
||||||
// 发行版本配置
|
var config = {
|
||||||
...(releaseCfg || {}),
|
/**
|
||||||
|
* 1.开发调试模式
|
||||||
|
* 去掉注释 ...devCfg;
|
||||||
|
* 注释掉 ...releaseCfg,
|
||||||
|
* 2.发行/发布模式,例如通过`HBuilder>发行>小程序微信`的时候,原理是:
|
||||||
|
* 然后将 `import site from "../site.js";`追加到 `unpackage\dist\build\mp-weixin\common\vendor.js` 文件内容开头部分
|
||||||
|
* 然后将 site.js 文件放到 `unpackage\dist\build\mp-weixin\` 目录下面
|
||||||
|
*/
|
||||||
|
...(releaseCfg ?? devCfg),
|
||||||
|
|
||||||
|
|
||||||
// 腾讯地图key
|
// 腾讯地图key
|
||||||
mpKey: 'TUHBZ-CNWKU-UHAVP-GZQ26-HNZFO-3YBF4',
|
mpKey: 'TUHBZ-CNWKU-UHAVP-GZQ26-HNZFO-3YBF4',
|
||||||
|
|
||||||
// 客服地址
|
//客服地址
|
||||||
webSocket: '{{$webSocket}}',
|
webSocket: '{{$webSocket}}',
|
||||||
|
|
||||||
// 本地端主动给服务器ping的时间, 0 则不开启 , 单位秒
|
//本地端主动给服务器ping的时间, 0 则不开启 , 单位秒
|
||||||
pingInterval: 1500,
|
pingInterval: 1500,
|
||||||
|
|
||||||
// 版本号
|
// 版本号
|
||||||
version: '1.0'
|
version: '1.0'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
394
common/js/diy.js
394
common/js/diy.js
@@ -1,9 +1,14 @@
|
|||||||
import WxMap from 'common/js/map-wx-jssdk.js';
|
import { QQMapWX } from 'common/js/map-wx-jssdk.js';
|
||||||
import Config from '@/common/js/config.js';
|
import Config from '@/common/js/config.js';
|
||||||
import util from '@/common/js/util.js';
|
|
||||||
|
|
||||||
let systemInfo = util.getDeviceInfo();
|
|
||||||
|
|
||||||
|
let systemInfo = {};
|
||||||
|
try {
|
||||||
|
// 合并设备信息和窗口信息
|
||||||
|
systemInfo = {...uni.getDeviceInfo(), ...uni.getWindowInfo()};
|
||||||
|
} catch (e) {
|
||||||
|
// 兼容旧版本
|
||||||
|
systemInfo = uni.getSystemInfoSync();
|
||||||
|
}
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -37,6 +42,7 @@ export default {
|
|||||||
latitude: null, // 纬度
|
latitude: null, // 纬度
|
||||||
longitude: null, // 经度
|
longitude: null, // 经度
|
||||||
currentPosition: '', // 当前位置
|
currentPosition: '', // 当前位置
|
||||||
|
currentStore: null,//当前门店
|
||||||
nearestStore: null, // 离自己最近的门店
|
nearestStore: null, // 离自己最近的门店
|
||||||
|
|
||||||
storeTimeOut: null, // 没有获取到定位,则获取默认门店
|
storeTimeOut: null, // 没有获取到定位,则获取默认门店
|
||||||
@@ -45,19 +51,26 @@ export default {
|
|||||||
diyRoute: '', // 页面路由
|
diyRoute: '', // 页面路由
|
||||||
openBottomNav: false,
|
openBottomNav: false,
|
||||||
isShowCopyRight: false,
|
isShowCopyRight: false,
|
||||||
|
option: null,
|
||||||
|
firstDiy: true,
|
||||||
|
|
||||||
//启动广告
|
//启动广告
|
||||||
adv:{},
|
adv: {},
|
||||||
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
onLoad(option) {
|
onLoad(option) {
|
||||||
|
this.option = option;
|
||||||
uni.hideTabBar();
|
uni.hideTabBar();
|
||||||
|
// 支付宝小程序传参处理
|
||||||
|
// #ifdef MP-ALIPAY
|
||||||
|
let aliapp_option = my.getLaunchOptionsSync();
|
||||||
|
aliapp_option.query && Object.assign(option, aliapp_option.query);
|
||||||
|
// #endif
|
||||||
|
|
||||||
if (option.source_member) uni.setStorageSync('source_member', option.source_member);
|
// 处理分享人数据
|
||||||
|
if (option.source_member) uni.setStorageSync('source_member', option.source_member);// 分享链接进入
|
||||||
// 小程序扫码进入
|
if (option.scene) {// 小程序扫码进入
|
||||||
if (option.scene) {
|
|
||||||
var sceneParams = decodeURIComponent(option.scene);
|
var sceneParams = decodeURIComponent(option.scene);
|
||||||
sceneParams = sceneParams.split('&');
|
sceneParams = sceneParams.split('&');
|
||||||
if (sceneParams.length) {
|
if (sceneParams.length) {
|
||||||
@@ -67,64 +80,36 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// H5地图选择位置回调
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
// H5地图选择位置回调数据
|
// H5地图选择位置回调数据
|
||||||
if (option.module && option.module == 'locationPicker') {
|
if (option.module && option.module == 'locationPicker') {
|
||||||
option.name = ''; // 清空地址
|
option.name = ''; // 自定义页面传参id和name,防止获取地址时变量混淆
|
||||||
this.locationModule = option.module;
|
this.locationModule = option.module;
|
||||||
this.latitude = option.latng.split(',')[0];
|
this.latitude = option.latng.split(',')[0];
|
||||||
this.longitude = option.latng.split(',')[1];
|
this.longitude = option.latng.split(',')[1];
|
||||||
}
|
}
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
|
//自定义页面的id和名称
|
||||||
this.id = option.id || 0;
|
this.id = option.id || 0;
|
||||||
this.name = option.name || '';
|
this.name = option.name || '';
|
||||||
|
|
||||||
uni.removeStorageSync('manual_store_info'); // 清除手动切换门店缓存
|
//获取当前门店信息 必须是首页且不是手动切换操作
|
||||||
uni.removeStorageSync('manual_change_store'); // 清楚手动切换门店标识
|
let current_route = this.$util.getCurrentRoute();
|
||||||
|
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
|
||||||
// H5才会执行
|
if (current_route.path.indexOf('/pages/index/index') > -1 && !manualChangeStore) {
|
||||||
if (this.locationModule == 'locationPicker') {
|
this.getCurrentStore(option);
|
||||||
|
|
||||||
// H5地图选址后的回调
|
|
||||||
this.getNearestStore();
|
|
||||||
this.getCurrentLocation();
|
|
||||||
|
|
||||||
} else if (this.mapConfig.wap_is_open == 1) {
|
|
||||||
|
|
||||||
// 每次都要定位,获取当前位置
|
|
||||||
/*this.$util.getLocation({
|
|
||||||
fail: (res) => {
|
|
||||||
// 拒绝定位,进入默认总店
|
|
||||||
this.enterDefaultStore();
|
|
||||||
}
|
|
||||||
});*/
|
|
||||||
|
|
||||||
// 如果3秒没有获取到定位,则获取默认门店,H5使用
|
|
||||||
// #ifdef H5
|
|
||||||
this.storeTimeOut = setTimeout(() => {
|
|
||||||
this.enterDefaultStore();
|
|
||||||
}, 1000 * 3);
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
} else {
|
|
||||||
// 关闭定位
|
|
||||||
this.enterDefaultStore();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
onShow() {
|
async onShow() {
|
||||||
|
if (this.firstDiy) {
|
||||||
this.init();
|
this.firstDiy = false;
|
||||||
|
await this.getDiyMethod();
|
||||||
|
}
|
||||||
|
await this.onShowMethod();
|
||||||
},
|
},
|
||||||
onHide() {
|
onHide() {
|
||||||
if (this.storeTimeOut) {
|
|
||||||
clearTimeout(this.storeTimeOut);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 跳转页面要关闭门店弹出框
|
|
||||||
this.closeChooseStorePopup();
|
|
||||||
|
|
||||||
// 清除限时秒杀定时器
|
// 清除限时秒杀定时器
|
||||||
this.$store.commit('setDiySeckillInterval', 0);
|
this.$store.commit('setDiySeckillInterval', 0);
|
||||||
},
|
},
|
||||||
@@ -151,7 +136,7 @@ export default {
|
|||||||
return str;
|
return str;
|
||||||
},
|
},
|
||||||
backgroundUrl() {
|
backgroundUrl() {
|
||||||
var str = this.diyData.global.bgUrl && this.diyData.global.bgUrl != 'transparent' ? 'url(' + this.$util.img(this.diyData.global.bgUrl) + ') ' : '';
|
var str = this.diyData.global?.bgUrl && this.diyData.global?.bgUrl != 'transparent' ? 'url(' + this.$util.img(this.diyData.global?.bgUrl) + ') ' : '';
|
||||||
return str;
|
return str;
|
||||||
},
|
},
|
||||||
textNavColor() {
|
textNavColor() {
|
||||||
@@ -189,30 +174,34 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
location: function (nVal) {
|
/* location: function (nVal) {
|
||||||
if (nVal) {
|
if (nVal && !this.latitude && !this.longitude) {
|
||||||
this.latitude = nVal.latitude;
|
this.latitude = nVal.latitude;
|
||||||
this.longitude = nVal.longitude;
|
this.longitude = nVal.longitude;
|
||||||
this.getNearestStore();
|
this.getStoreInfoByLocation();
|
||||||
this.getCurrentLocation();
|
|
||||||
}
|
}
|
||||||
|
}, */
|
||||||
|
initStatus: function (val) {
|
||||||
|
if (!this.option.store_id) this.getLocation();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
play(){
|
async getDiyMethod() {
|
||||||
console.log(123)
|
await this.getDiyInfo();
|
||||||
|
|
||||||
|
this.$store.commit('setDiySeckillInterval', 1);
|
||||||
|
this.$store.commit('setComponentRefresh');
|
||||||
},
|
},
|
||||||
async init() {
|
async onShowMethod() {
|
||||||
|
|
||||||
// 定位信息过期后,重新获取定位
|
// 定位信息过期后,重新获取定位
|
||||||
if(this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
|
// if (this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
|
||||||
this.$util.getLocation({
|
// this.$util.getLocation({
|
||||||
fail: (res) => {
|
// fail: (res) => {
|
||||||
// 拒绝定位,进入默认总店
|
// // 失败了不需要做任何处理,保持之前的门店选择即可
|
||||||
this.enterDefaultStore();
|
// }
|
||||||
}
|
// });
|
||||||
});
|
// }
|
||||||
}
|
|
||||||
|
|
||||||
if (this.storeToken) {
|
if (this.storeToken) {
|
||||||
//记录分享关系
|
//记录分享关系
|
||||||
@@ -227,17 +216,15 @@ export default {
|
|||||||
|
|
||||||
this.$store.commit('setDiySeckillInterval', 1);
|
this.$store.commit('setDiySeckillInterval', 1);
|
||||||
|
|
||||||
//小程序分享
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
this.$util.getMpShare().then(res => {
|
|
||||||
this.mpShareData = res;
|
|
||||||
});
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
|
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
|
||||||
if (manualChangeStore) {
|
if (manualChangeStore) {
|
||||||
uni.removeStorageSync('manual_change_store');
|
uni.removeStorageSync('manual_change_store');
|
||||||
|
let manualStoreInfo = uni.getStorageSync('manual_store_info'); // 手动选择门店
|
||||||
|
uni.removeStorageSync('manual_store_info');
|
||||||
|
if (manualStoreInfo) {
|
||||||
|
this.currentStore = manualStoreInfo;
|
||||||
|
}
|
||||||
|
this.closeGetLocationFailPopup();
|
||||||
// 滚动至顶部
|
// 滚动至顶部
|
||||||
uni.pageScrollTo({
|
uni.pageScrollTo({
|
||||||
duration: 200,
|
duration: 200,
|
||||||
@@ -269,8 +256,14 @@ export default {
|
|||||||
query.select('.page-header').boundingClientRect(data => {
|
query.select('.page-header').boundingClientRect(data => {
|
||||||
if (data && data.height) {
|
if (data && data.height) {
|
||||||
// 从状态栏高度开始算
|
// 从状态栏高度开始算
|
||||||
this.paddingTop = data.height + 'px';
|
if (!this.diyData.global.topNavBg) {
|
||||||
this.marginTop = -data.height + 'px';
|
this.paddingTop = 0;
|
||||||
|
this.marginTop = 0;
|
||||||
|
} else {
|
||||||
|
this.paddingTop = data.height + 'px';
|
||||||
|
this.marginTop = -data.height + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
clearInterval(time);
|
clearInterval(time);
|
||||||
}
|
}
|
||||||
}).exec();
|
}).exec();
|
||||||
@@ -278,7 +271,7 @@ export default {
|
|||||||
}, 50);
|
}, 50);
|
||||||
// #endif
|
// #endif
|
||||||
},
|
},
|
||||||
async getDiyAdv(){
|
async getDiyAdv() {
|
||||||
//启动广告
|
//启动广告
|
||||||
let res = await this.$api.sendRequest({
|
let res = await this.$api.sendRequest({
|
||||||
url: '/api/diyview/getstartadv',
|
url: '/api/diyview/getstartadv',
|
||||||
@@ -287,13 +280,13 @@ export default {
|
|||||||
});
|
});
|
||||||
this.adv = res.value
|
this.adv = res.value
|
||||||
// 弹框形式,首次弹出 1,每次弹出 0
|
// 弹框形式,首次弹出 1,每次弹出 0
|
||||||
if(this.adv.advshow == 1){
|
if (this.adv.advshow == 1) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (res.value.advtype == 1) {
|
if (res.value.advtype == 1) {
|
||||||
var popwindow_count = uni.getStorageSync(this.id + this.name + '_popwindow_count');
|
var popwindow_count = uni.getStorageSync(this.id + this.name + '_popwindow_count');
|
||||||
if ((this.$refs.uniPopupWindow && popwindow_count == '') || (
|
if ((this.$refs.uniPopupWindow && popwindow_count == '') || (
|
||||||
this.$refs.uniPopupWindow && popwindow_count == 1)) {
|
this.$refs.uniPopupWindow && popwindow_count == 1)) {
|
||||||
|
|
||||||
this.$refs.uniPopupWindow.open();
|
this.$refs.uniPopupWindow.open();
|
||||||
uni.setStorageSync(this.id + this.name + '_popwindow_count', 1);
|
uni.setStorageSync(this.id + this.name + '_popwindow_count', 1);
|
||||||
}
|
}
|
||||||
@@ -303,7 +296,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
async getDiyInfo() {
|
async getDiyInfo() {
|
||||||
let res = await this.$api.sendRequest({
|
let res = await this.$api.sendRequest({
|
||||||
@@ -311,7 +304,7 @@ export default {
|
|||||||
data: {
|
data: {
|
||||||
id: this.id,
|
id: this.id,
|
||||||
name: this.name,
|
name: this.name,
|
||||||
en_type:uni.getStorageSync("lang"),//获取语言底部
|
en_type: uni.getStorageSync("lang"),//获取语言底部
|
||||||
},
|
},
|
||||||
async: false
|
async: false
|
||||||
});
|
});
|
||||||
@@ -336,14 +329,10 @@ export default {
|
|||||||
let diyDataValue = res.data;
|
let diyDataValue = res.data;
|
||||||
if (diyDataValue.value) {
|
if (diyDataValue.value) {
|
||||||
this.diyData = JSON.parse(diyDataValue.value);
|
this.diyData = JSON.parse(diyDataValue.value);
|
||||||
|
this.$langConfig.title(this.diyData.global.title);
|
||||||
// 导航栏标题要根据语言环境切换
|
|
||||||
const title = this.isEnEnv ? this.diyData?.global?.en_title : this.diyData?.global?.title;
|
|
||||||
if (title) this.$langConfig.title(title);
|
|
||||||
|
|
||||||
this.mpCollect = this.diyData.global.mpCollect;
|
this.mpCollect = this.diyData.global.mpCollect;
|
||||||
this.setPublicShare();
|
this.setPublicShare();
|
||||||
/* if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
|
if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
|
||||||
// 弹框形式,首次弹出 1,每次弹出 0
|
// 弹框形式,首次弹出 1,每次弹出 0
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (this.diyData.global.popWindow.count == 1) {
|
if (this.diyData.global.popWindow.count == 1) {
|
||||||
@@ -358,7 +347,7 @@ export default {
|
|||||||
uni.setStorageSync(this.id + this.name + '_popwindow_count', 0);
|
uni.setStorageSync(this.id + this.name + '_popwindow_count', 0);
|
||||||
}
|
}
|
||||||
}, 500);
|
}, 500);
|
||||||
}*/
|
}
|
||||||
|
|
||||||
// 修改diy数据结构排序
|
// 修改diy数据结构排序
|
||||||
let searchIndex = -1;
|
let searchIndex = -1;
|
||||||
@@ -381,14 +370,15 @@ export default {
|
|||||||
this.diyData.value.splice(topCategoryIndex, 1);
|
this.diyData.value.splice(topCategoryIndex, 1);
|
||||||
this.diyData.value.splice(0, 0, ...topCategoryData);
|
this.diyData.value.splice(0, 0, ...topCategoryData);
|
||||||
this.diyData.value.splice(1, 0, ...searchData);
|
this.diyData.value.splice(1, 0, ...searchData);
|
||||||
} else
|
} else {
|
||||||
this.diyData.value.splice(0, 0, ...searchData);
|
this.diyData.value.splice(0, 0, ...searchData);
|
||||||
|
}
|
||||||
} else if (searchIndex != -1 && topCategoryIndex == -1) {
|
} else if (searchIndex != -1 && topCategoryIndex == -1) {
|
||||||
let searchData = this.diyData.value.slice(searchIndex, searchIndex + 1);
|
let searchData = this.diyData.value.slice(searchIndex, searchIndex + 1);
|
||||||
this.diyData.value.splice(searchIndex, 1);
|
this.diyData.value.splice(searchIndex, 1);
|
||||||
this.diyData.value.splice(0, 0, ...searchData);
|
this.diyData.value.splice(0, 0, ...searchData);
|
||||||
}
|
}
|
||||||
|
this.topIndexValue = null;
|
||||||
for (var i = 0; i < this.diyData.value.length; i++) {
|
for (var i = 0; i < this.diyData.value.length; i++) {
|
||||||
// 分类导航组件
|
// 分类导航组件
|
||||||
if (this.diyData.value[i].componentName == 'TopCategory') {
|
if (this.diyData.value[i].componentName == 'TopCategory') {
|
||||||
@@ -408,7 +398,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// #ifdef MP
|
// #ifdef MP
|
||||||
//小程序收藏
|
//小程序收藏
|
||||||
if (!uni.getStorageSync('isCollect') && this.diyData.global.mpCollect) {
|
if (!uni.getStorageSync('isCollect') && this.diyData.global.mpCollect) {
|
||||||
@@ -422,6 +411,45 @@ export default {
|
|||||||
this.openBottomNav = this.diyData.global.openBottomNav;
|
this.openBottomNav = this.diyData.global.openBottomNav;
|
||||||
}
|
}
|
||||||
this.isShowCopyRight = true;
|
this.isShowCopyRight = true;
|
||||||
|
|
||||||
|
//小程序分享
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
let path = this.$util.getCurrentRoute().path;
|
||||||
|
if (path == '/pages/member/index') {
|
||||||
|
this.mpShareData = {};
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let share_path = path;
|
||||||
|
if (this.$store.state.memberInfo && this.$store.state.memberInfo.member_id) {
|
||||||
|
share_path = this.$util.getCurrentShareRoute(this.$store.state.memberInfo.member_id).path
|
||||||
|
}
|
||||||
|
let appMessageData = {
|
||||||
|
title: this.diyData.global.weappShareTitle,
|
||||||
|
path: share_path,
|
||||||
|
imageUrl: this.$util.img(this.diyData.global.weappShareImage),
|
||||||
|
success: res => { },
|
||||||
|
fail: res => { }
|
||||||
|
}
|
||||||
|
let timeLineData = {
|
||||||
|
title: this.diyData.global.weappShareTitle,
|
||||||
|
query: share_path,
|
||||||
|
imageUrl: this.$util.img(this.diyData.global.weappShareImage),
|
||||||
|
}
|
||||||
|
|
||||||
|
this.mpShareData = {
|
||||||
|
appMessage: appMessageData,
|
||||||
|
timeLine: timeLineData
|
||||||
|
};
|
||||||
|
//console.log(this.mpShareData, 'this.mpShareData');
|
||||||
|
|
||||||
|
var store_info = this.$store.state.globalStoreInfo;
|
||||||
|
if (store_info) {
|
||||||
|
this.mpShareData.appMessage.path += (this.mpShareData.appMessage.path.indexOf('?') > -1 ? '&' : '?') + 'store_id=' + store_info.store_id;
|
||||||
|
this.mpShareData.timeLine.query += (this.mpShareData.timeLine.query.indexOf('?') > -1 ? '&' : '?') + 'store_id=' + store_info.store_id;
|
||||||
|
}
|
||||||
|
//朋友圈不需要页面路径,只要要后面的参数就行
|
||||||
|
this.mpShareData.timeLine.query = this.mpShareData.timeLine.query.split('?')[1] || '';
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
closePopupWindow() {
|
closePopupWindow() {
|
||||||
@@ -436,44 +464,131 @@ export default {
|
|||||||
this.$util.diyRedirectTo(this.diyData.global.popWindow.link);
|
this.$util.diyRedirectTo(this.diyData.global.popWindow.link);
|
||||||
this.closePopupWindow();
|
this.closePopupWindow();
|
||||||
},
|
},
|
||||||
openChooseStorePopup() {
|
/******************************************** 获取门店相关 START ***************************************************/
|
||||||
if (this.globalStoreConfig && this.globalStoreConfig.confirm_popup_control == 1) {
|
/**
|
||||||
let storeInfo = this.globalStoreInfo;
|
* 1、分享携带门店id
|
||||||
|
* 门店id正确 进入门店
|
||||||
// 首次进入门店,没有门店信息 || 当前位置的门店和缓存门店不一致要弹框
|
* 门店id错误 通过定位获取门店
|
||||||
if (!storeInfo || storeInfo && this.nearestStore && storeInfo.store_id != this.nearestStore.store_id) {
|
* 2、通过定位获取门店
|
||||||
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.open();
|
* 开启获取定位
|
||||||
|
* 同意获取定位 获取最近门店 进入门店
|
||||||
|
* 拒绝获取定位
|
||||||
|
* 平台运营模式 进入默认门店
|
||||||
|
* 连锁门店模式 提示获取定位失败,手动选择门店或引导去开启定位
|
||||||
|
* 关闭获取定位
|
||||||
|
* 平台运营模式 进入默认门店
|
||||||
|
* 连锁门店模式 提示获取定位失败,手动选择门店
|
||||||
|
*/
|
||||||
|
getCurrentStore(option) {
|
||||||
|
if (option.store_id && !isNaN(parseInt(option.store_id))) {
|
||||||
|
this.getStoreInfoByShare(option.store_id);
|
||||||
|
} else {
|
||||||
|
this.getLocation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getStoreInfoByShare(store_id) {
|
||||||
|
this.$api.sendRequest({
|
||||||
|
url: '/api/store/info',
|
||||||
|
data: { store_id },
|
||||||
|
success: res => {
|
||||||
|
if (res.code >= 0 && res.data) {
|
||||||
|
this.changeCurrentStore(res.data);
|
||||||
|
} else {
|
||||||
|
this.getLocation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: res => {
|
||||||
|
this.getLocation();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getLocation() {
|
||||||
|
if (!this.latitude && !this.longitude && this.initStatus) {
|
||||||
|
if (this.mapConfig.wap_is_open == 1) {
|
||||||
|
this.$util.getLocation({
|
||||||
|
complete: (res) => {
|
||||||
|
if (res.latitude && res.longitude) {
|
||||||
|
this.closeGetLocationFailPopup();
|
||||||
|
this.latitude = res.latitude;
|
||||||
|
this.longitude = res.longitude;
|
||||||
|
this.getStoreInfoByLocation();
|
||||||
|
} else {
|
||||||
|
let is_h5 = false;
|
||||||
|
// #ifdef H5
|
||||||
|
is_h5 = true;
|
||||||
|
// #endif
|
||||||
|
if (is_h5) {
|
||||||
|
//H5同意了也会进入失败,所以直接进入默认门店
|
||||||
|
this.enterDefaultStore();
|
||||||
|
} else {
|
||||||
|
this.getLocationFail();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// #ifdef H5
|
||||||
|
//H5有的机型可能根本不会触发getLocation的任何执行,包括success,fail,completele
|
||||||
|
//所以这里如果等待一定时间后还是没有获取到当前门店则进入默认门店
|
||||||
|
setTimeout(() => {
|
||||||
|
let current_route = this.$util.getCurrentRoute();
|
||||||
|
if (this.mapConfig.wap_is_open == 1 && !this.currentStore && current_route.path == '/pages/index/index') {
|
||||||
|
this.enterDefaultStore();
|
||||||
|
}
|
||||||
|
}, 5000);
|
||||||
|
// #endif
|
||||||
|
} else {
|
||||||
|
this.getLocationFail();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
let manualStoreInfo = uni.getStorageSync('manual_store_info'); // 手动选择门店
|
getStoreInfoByLocation() {
|
||||||
if (manualStoreInfo) {
|
if (this.latitude && this.longitude) {
|
||||||
this.nearestStore = manualStoreInfo;
|
this.getNearestStore();
|
||||||
|
this.getCurrentLocation();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
changeCurrentStore(store_info) {
|
||||||
|
this.currentStore = store_info;
|
||||||
|
this.changeStore(store_info);
|
||||||
|
this.openChooseStorePopup();
|
||||||
|
},
|
||||||
|
getLocationFail() {
|
||||||
|
if (this.globalStoreConfig.store_business == 'shop') {
|
||||||
|
this.enterDefaultStore();
|
||||||
|
} else {
|
||||||
|
this.openGetLocationFailPopup();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
openGetLocationFailPopup() {
|
||||||
|
if (this.$refs.getLocationFailRef) this.$refs.getLocationFailRef.open();
|
||||||
|
},
|
||||||
|
closeGetLocationFailPopup() {
|
||||||
|
if (this.$refs.getLocationFailRef) this.$refs.getLocationFailRef.close();
|
||||||
|
},
|
||||||
|
openChooseStorePopup() {
|
||||||
|
let globalStoreInfo = this.globalStoreInfo;
|
||||||
|
if (this.globalStoreConfig && this.globalStoreConfig.confirm_popup_control == 1) {
|
||||||
|
this.currentStore.show_address = this.currentStore.full_address.replace(/,/g, ' ') + ' ' + this.currentStore.address;
|
||||||
|
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.open();
|
||||||
}
|
}
|
||||||
this.changeStore(this.nearestStore); // 切换门店数据
|
|
||||||
},
|
},
|
||||||
closeChooseStorePopup() {
|
closeChooseStorePopup() {
|
||||||
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.close();
|
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.close();
|
||||||
},
|
},
|
||||||
// 确认进入门店
|
|
||||||
enterStore() {
|
|
||||||
this.closeChooseStorePopup();
|
|
||||||
},
|
|
||||||
// 选择其他门店
|
// 选择其他门店
|
||||||
chooseOtherStore() {
|
chooseOtherStore() {
|
||||||
this.$util.redirectTo('/pages_tool/store/list');
|
this.$util.redirectTo('/pages_tool/store/list');
|
||||||
this.closeChooseStorePopup();
|
this.closeChooseStorePopup();
|
||||||
},
|
},
|
||||||
// 打开地图重新选择位置
|
// 打开地图重新选择位置
|
||||||
reposition() {
|
reGetLocation() {
|
||||||
// #ifdef MP
|
// #ifdef MP
|
||||||
/*uni.chooseLocation({
|
uni.chooseLocation({
|
||||||
success: res => {
|
success: res => {
|
||||||
this.latitude = res.latitude;
|
this.latitude = res.latitude;
|
||||||
this.longitude = res.longitude;
|
this.longitude = res.longitude;
|
||||||
this.currentPosition = res.name;
|
this.currentPosition = res.name;
|
||||||
this.getNearestStore();
|
this.getStoreInfoByLocation();
|
||||||
this.getCurrentLocation();
|
|
||||||
},
|
},
|
||||||
fail(res) {
|
fail(res) {
|
||||||
uni.getSetting({
|
uni.getSetting({
|
||||||
@@ -498,8 +613,7 @@ export default {
|
|||||||
this.latitude = res.latitude;
|
this.latitude = res.latitude;
|
||||||
this.longitude = res.longitude;
|
this.longitude = res.longitude;
|
||||||
this.currentPosition = res.name;
|
this.currentPosition = res.name;
|
||||||
this.getNearestStore();
|
this.getStoreInfoByLocation();
|
||||||
this.getCurrentLocation();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, 1000);
|
}, 1000);
|
||||||
@@ -517,7 +631,7 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});*/
|
});
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
@@ -538,9 +652,7 @@ export default {
|
|||||||
data: data,
|
data: data,
|
||||||
success: res => {
|
success: res => {
|
||||||
if (res.code == 0 && res.data) {
|
if (res.code == 0 && res.data) {
|
||||||
this.nearestStore = res.data;
|
this.changeCurrentStore(res.data);
|
||||||
this.nearestStore.show_address = this.nearestStore.full_address.replace(/,/g, ' ') + ' ' + this.nearestStore.address;
|
|
||||||
this.openChooseStorePopup();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@@ -553,7 +665,6 @@ export default {
|
|||||||
data.latitude = this.latitude;
|
data.latitude = this.latitude;
|
||||||
data.longitude = this.longitude;
|
data.longitude = this.longitude;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$api.sendRequest({
|
this.$api.sendRequest({
|
||||||
url: '/api/store/getLocation',
|
url: '/api/store/getLocation',
|
||||||
data: data,
|
data: data,
|
||||||
@@ -569,26 +680,42 @@ export default {
|
|||||||
// 定位失败,进入默认门店
|
// 定位失败,进入默认门店
|
||||||
enterDefaultStore() {
|
enterDefaultStore() {
|
||||||
if (this.defaultStoreInfo) {
|
if (this.defaultStoreInfo) {
|
||||||
if (!this.nearestStore) {
|
this.changeCurrentStore(this.defaultStoreInfo);
|
||||||
this.nearestStore = this.defaultStoreInfo;
|
|
||||||
this.nearestStore.show_address = this.nearestStore.full_address.replace(/,/g, ' ') + ' ' + this.nearestStore.address;
|
|
||||||
}
|
|
||||||
if (this.currentPosition == '') this.currentPosition = '未获取到定位';
|
|
||||||
this.openChooseStorePopup();
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
//连锁门店未定位选择门店
|
||||||
|
chooseStore() {
|
||||||
|
this.$util.redirectTo('/pages_tool/store/list');
|
||||||
|
},
|
||||||
|
//打开手机设置重新定位
|
||||||
|
openSetting() {
|
||||||
|
uni.openSetting({
|
||||||
|
success: res => {
|
||||||
|
this.getLocation();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/******************************************** 获取门店相关 END ***************************************************/
|
||||||
// 设置公众号分享
|
// 设置公众号分享
|
||||||
setPublicShare() {
|
setPublicShare() {
|
||||||
let shareUrl = this.$config.h5Domain + this.diyRoute;
|
let shareUrl = this.$config.h5Domain + this.diyRoute;
|
||||||
if (this.id) shareUrl += '?id=' + this.id;
|
var store_info = this.$store.state.globalStoreInfo;
|
||||||
else if (this.name) shareUrl += '?name=' + this.name;
|
//if (store_info) shareUrl += '?store_id=' + store_info.store_id;
|
||||||
|
if (shareUrl.indexOf('?') > 0) {
|
||||||
|
shareUrl += '&';
|
||||||
|
} else {
|
||||||
|
shareUrl += '?';
|
||||||
|
}
|
||||||
|
if (this.id) shareUrl += 'id=' + this.id;
|
||||||
|
else if (this.name) shareUrl += 'name=' + this.name;
|
||||||
|
// alert('diydiydiy')
|
||||||
this.$util.setPublicShare({
|
this.$util.setPublicShare({
|
||||||
title: this.diyData.global.title,
|
title: this.diyData.global.wechatShareTitle || this.diyData.global.title,
|
||||||
desc: '',
|
desc: this.diyData.global.wechatShareDesc,
|
||||||
link: shareUrl,
|
link: shareUrl,
|
||||||
imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
|
imgUrl: this.diyData.global.wechatShareImage ? this.$util.img(this.diyData.global.wechatShareImage) : this.$util.img(this.siteInfo.logo_square)
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
onPageScroll(e) {
|
onPageScroll(e) {
|
||||||
this.scrollTop = e.scrollTop;
|
this.scrollTop = e.scrollTop;
|
||||||
@@ -603,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);
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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(this.$util.INDEX_PAGE_URL);
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,371 +1,382 @@
|
|||||||
// 商品详情业务
|
// 商品详情业务
|
||||||
import htmlParser from '@/common/js/html-parser';
|
import htmlParser from '@/common/js/html-parser';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
skuId: 0,
|
skuId: 0,
|
||||||
goodsId: 0,
|
goodsId: 0,
|
||||||
// 商品详情
|
// 商品详情
|
||||||
goodsSkuDetail: {
|
goodsSkuDetail: {
|
||||||
goods_id: 0,
|
goods_id: 0,
|
||||||
goods_service: []
|
goods_service: []
|
||||||
},
|
},
|
||||||
preview: 0, //是否开启预览,0:不开启,1:开启
|
preview: 0, //是否开启预览,0:不开启,1:开启
|
||||||
//评价
|
//评价
|
||||||
contactData: {
|
contactData: {
|
||||||
title: '',
|
title: '',
|
||||||
path: '',
|
path: '',
|
||||||
img: ''
|
img: ''
|
||||||
},
|
},
|
||||||
|
|
||||||
shareQuery: '', // 分享参数
|
shareQuery: '', // 分享参数
|
||||||
shareUrl: '', // 分享链接
|
shareUrl: '', // 分享链接
|
||||||
|
|
||||||
source_member: 0, //分享人的id
|
source_member: 0, //分享人的id
|
||||||
chatRoomParams: {}, // 联系客服参数
|
chatRoomParams: {}, // 联系客服参数
|
||||||
isIphoneX: false, //判断手机是否是iphoneX以上
|
isIphoneX: false, //判断手机是否是iphoneX以上
|
||||||
whetherCollection: 0,
|
whetherCollection: 0,
|
||||||
posterParams: {}, //海报所需参数
|
posterParams: {}, //海报所需参数
|
||||||
shareImg: '',
|
shareImg: '',
|
||||||
navbarData: {
|
navbarData: {
|
||||||
title: '',
|
title: '',
|
||||||
topNavColor: "#ffffff",
|
topNavColor: "#ffffff",
|
||||||
topNavBg: false,
|
topNavBg: false,
|
||||||
navBarSwitch: true, // 导航栏是否显示
|
navBarSwitch: true, // 导航栏是否显示
|
||||||
textNavColor: "#333333",
|
textNavColor: "#333333",
|
||||||
moreLink: {
|
moreLink: {
|
||||||
name: ""
|
name: ""
|
||||||
},
|
},
|
||||||
navStyle: 1,
|
navStyle: 1,
|
||||||
bgUrl: '',
|
bgUrl: '',
|
||||||
textImgPosLink: 'left'
|
textImgPosLink: 'left'
|
||||||
},
|
},
|
||||||
}
|
goodsFormVal: []
|
||||||
},
|
}
|
||||||
onLoad(data) {
|
},
|
||||||
//刷新多语言
|
onLoad(data) {
|
||||||
this.$langConfig.refresh();
|
//刷新多语言
|
||||||
// #ifdef MP-ALIPAY
|
this.$langConfig.refresh();
|
||||||
let options = my.getLaunchOptionsSync();
|
// #ifdef MP-ALIPAY
|
||||||
options.query && Object.assign(data, options.query);
|
let options = my.getLaunchOptionsSync();
|
||||||
// #endif
|
options.query && Object.assign(data, options.query);
|
||||||
|
// #endif
|
||||||
this.preview = data.preview || 0;
|
|
||||||
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
this.preview = data.preview || 0;
|
||||||
|
this.isIphoneX = this.$util.uniappIsIPhoneX();
|
||||||
if (data.source_member) {
|
|
||||||
uni.setStorageSync('source_member', data.source_member);
|
if (data.source_member) {
|
||||||
this.source_member = data.source_member;
|
uni.setStorageSync('source_member', data.source_member);
|
||||||
}
|
this.source_member = data.source_member;
|
||||||
//记录分享关系
|
}
|
||||||
if (this.storeToken && uni.getStorageSync('source_member')) {
|
//记录分享关系
|
||||||
this.$util.onSourceMember(uni.getStorageSync('source_member'));
|
if (this.storeToken && uni.getStorageSync('source_member')) {
|
||||||
}
|
this.$util.onSourceMember(uni.getStorageSync('source_member'));
|
||||||
|
}
|
||||||
// 小程序扫码进入
|
|
||||||
if (data.scene) {
|
// 小程序扫码进入
|
||||||
var sceneParams = decodeURIComponent(data.scene);
|
if (data.scene) {
|
||||||
sceneParams = sceneParams.split('&');
|
var sceneParams = decodeURIComponent(data.scene);
|
||||||
if (sceneParams.length) {
|
sceneParams = sceneParams.split('&');
|
||||||
sceneParams.forEach(item => {
|
if (sceneParams.length) {
|
||||||
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
|
sceneParams.forEach(item => {
|
||||||
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
|
if (item.indexOf('m') != -1) uni.setStorageSync('source_member', item.split('-')[1]);
|
||||||
});
|
if (item.indexOf('is_test') != -1) uni.setStorageSync('is_test', 1);
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
onShow() {
|
},
|
||||||
},
|
onShow() {
|
||||||
methods: {
|
},
|
||||||
// 处理商品详情数据
|
methods: {
|
||||||
handleGoodsSkuData() {
|
detailChangeVal(data) {
|
||||||
// this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
this.goodsFormVal = data;
|
||||||
//设置标题
|
},
|
||||||
// this.$langConfig.title(this.navbarData.title);
|
// 处理商品详情数据
|
||||||
if (this.goodsSkuDetail.config) {
|
handleGoodsSkuData() {
|
||||||
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
|
this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
||||||
}
|
this.$langConfig.title(this.navbarData.title);
|
||||||
|
if (this.goodsSkuDetail.config) {
|
||||||
this.whetherCollection = this.goodsSkuDetail.is_collect; // 用户关注商品状态
|
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
|
||||||
|
}
|
||||||
this.modifyGoodsInfo();
|
|
||||||
|
this.whetherCollection = this.goodsSkuDetail.is_collect; // 用户关注商品状态
|
||||||
// 初始化商品详情视图数据
|
|
||||||
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
|
this.modifyGoodsInfo();
|
||||||
sku_id: this.skuId,
|
|
||||||
goods_id: this.goodsSkuDetail.goods_id,
|
// 初始化商品详情视图数据
|
||||||
preview: this.preview,
|
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
|
||||||
source_member: this.source_member,
|
sku_id: this.skuId,
|
||||||
posterParams: this.posterParams,
|
goods_id: this.goodsSkuDetail.goods_id,
|
||||||
posterApi: this.posterApi,
|
preview: this.preview,
|
||||||
shareUrl: this.shareUrl,
|
source_member: this.source_member,
|
||||||
goodsRoute: this.goodsRoute,
|
posterParams: this.posterParams,
|
||||||
isVirtual: this.goodsSkuDetail.is_virtual,
|
posterApi: this.posterApi,
|
||||||
deliveryType: this.goodsSkuDetail.express_type,
|
shareUrl: this.shareUrl,
|
||||||
whetherCollection: this.goodsSkuDetail.is_collect,
|
goodsRoute: this.goodsRoute,
|
||||||
evaluateConfig: this.goodsSkuDetail.evaluate_config,
|
isVirtual: this.goodsSkuDetail.is_virtual,
|
||||||
evaluateList: this.goodsSkuDetail.evaluate_list,
|
deliveryType: this.goodsSkuDetail.express_type,
|
||||||
evaluateCount: this.goodsSkuDetail.evaluate_count
|
whetherCollection: this.goodsSkuDetail.is_collect,
|
||||||
});
|
evaluateConfig: this.goodsSkuDetail.evaluate_config,
|
||||||
|
evaluateList: this.goodsSkuDetail.evaluate_list,
|
||||||
//媒体
|
evaluateCount: this.goodsSkuDetail.evaluate_count,
|
||||||
if (this.goodsSkuDetail.video_url) this.switchMedia = "video";
|
goods_class : this.goodsSkuDetail.goods_class,
|
||||||
|
sale_store: this.goodsSkuDetail.sale_store
|
||||||
if (!Array.isArray(this.goodsSkuDetail.sku_images)) {
|
});
|
||||||
if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
|
|
||||||
else this.goodsSkuDetail.sku_images = [];
|
//媒体
|
||||||
}
|
if (this.goodsSkuDetail.video_url) this.switchMedia = "video";
|
||||||
|
|
||||||
// 多规格时合并主图
|
if (!Array.isArray(this.goodsSkuDetail.sku_images)) {
|
||||||
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
|
if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
|
||||||
|
else this.goodsSkuDetail.sku_images = [];
|
||||||
if (!Array.isArray(this.goodsSkuDetail.goods_image)) this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
|
}
|
||||||
|
|
||||||
this.goodsSkuDetail.sku_images = this.goodsSkuDetail.goods_image.concat(this.goodsSkuDetail.sku_images);
|
// 多规格时合并主图
|
||||||
}
|
if (this.goodsSkuDetail.goods_spec_format && this.goodsSkuDetail.goods_image) {
|
||||||
|
|
||||||
let maxHeight = '';
|
if (!Array.isArray(this.goodsSkuDetail.goods_image)) this.goodsSkuDetail.goods_image = this.goodsSkuDetail.goods_image.split(",");
|
||||||
let systemInfo = uni.getSystemInfoSync();
|
|
||||||
this.goodsSkuDetail.goods_image_list.forEach((item, index) => {
|
this.goodsSkuDetail.sku_images = this.goodsSkuDetail.goods_image.concat(this.goodsSkuDetail.sku_images);
|
||||||
if (typeof item.pic_spec == "string")
|
}
|
||||||
item.pic_spec = item.pic_spec.split('*');
|
|
||||||
|
let maxHeight = '';
|
||||||
let ratio = item.pic_spec[0] / systemInfo.windowWidth;
|
let systemInfo = uni.getSystemInfoSync();
|
||||||
item.pic_spec[0] = item.pic_spec[0] / ratio;
|
this.goodsSkuDetail.goods_image_list.forEach((item, index) => {
|
||||||
item.pic_spec[1] = item.pic_spec[1] / ratio;
|
if (typeof item.pic_spec == "string")
|
||||||
|
item.pic_spec = item.pic_spec.split('*');
|
||||||
if (!maxHeight || maxHeight > item.pic_spec[1]) {
|
|
||||||
maxHeight = item.pic_spec[1];
|
let ratio = item.pic_spec[0] / systemInfo.windowWidth;
|
||||||
}
|
item.pic_spec[0] = item.pic_spec[0] / ratio;
|
||||||
});
|
item.pic_spec[1] = item.pic_spec[1] / ratio;
|
||||||
this.goodsSkuDetail.swiperHeight = maxHeight + 'px';
|
|
||||||
|
if (!maxHeight || maxHeight > item.pic_spec[1]) {
|
||||||
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
|
maxHeight = item.pic_spec[1];
|
||||||
|
}
|
||||||
// 当前商品SKU规格
|
});
|
||||||
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
|
this.goodsSkuDetail.swiperHeight = maxHeight + 'px';
|
||||||
|
|
||||||
// 商品属性
|
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
|
||||||
if (this.goodsSkuDetail.goods_attr_format) {
|
|
||||||
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
|
// 当前商品SKU规格
|
||||||
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
|
if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
|
||||||
for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
|
|
||||||
for (var j = 0; j < goods_attr_format.length; j++) {
|
// 商品属性
|
||||||
if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id) {
|
if (this.goodsSkuDetail.goods_attr_format) {
|
||||||
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
|
let goods_attr_format = JSON.parse(this.goodsSkuDetail.goods_attr_format);
|
||||||
}
|
this.goodsSkuDetail.goods_attr_format = this.$util.unique(goods_attr_format, "attr_id");
|
||||||
}
|
for (var i = 0; i < this.goodsSkuDetail.goods_attr_format.length; i++) {
|
||||||
}
|
for (var j = 0; j < goods_attr_format.length; j++) {
|
||||||
}
|
if (this.goodsSkuDetail.goods_attr_format[i].attr_id == goods_attr_format[j].attr_id && this.goodsSkuDetail.goods_attr_format[i].attr_value_id != goods_attr_format[j].attr_value_id) {
|
||||||
|
this.goodsSkuDetail.goods_attr_format[i].attr_value_name += "、" + goods_attr_format[j].attr_value_name;
|
||||||
// 商品SKU格式
|
}
|
||||||
if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
|
}
|
||||||
|
}
|
||||||
// 商品详情
|
}
|
||||||
if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = (this.goodsSkuDetail.goods_content);
|
|
||||||
console.log(this.goodsSkuDetail.goods_content)
|
// 商品SKU格式
|
||||||
// if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);
|
if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
|
||||||
|
|
||||||
//商品服务
|
// 商品详情
|
||||||
if (this.goodsSkuDetail.goods_service) {
|
if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = (this.goodsSkuDetail.goods_content);
|
||||||
for (let i in this.goodsSkuDetail.goods_service) {
|
console.log(this.goodsSkuDetail.goods_content)
|
||||||
this.goodsSkuDetail.goods_service[i]['icon'] = this.goodsSkuDetail.goods_service[i]['icon'] ? JSON.parse(this.goodsSkuDetail.goods_service[i]['icon']) : '';
|
// if (this.goodsSkuDetail.goods_content) this.goodsSkuDetail.goods_content = htmlParser(this.goodsSkuDetail.goods_content);
|
||||||
}
|
|
||||||
}
|
//商品服务
|
||||||
|
if (this.goodsSkuDetail.goods_service) {
|
||||||
this.contactData = {
|
for (let i in this.goodsSkuDetail.goods_service) {
|
||||||
title: this.goodsSkuDetail.sku_name,
|
this.goodsSkuDetail.goods_service[i]['icon'] = this.goodsSkuDetail.goods_service[i]['icon'] ? JSON.parse(this.goodsSkuDetail.goods_service[i]['icon']) : '';
|
||||||
path: this.shareUrl,
|
}
|
||||||
img: this.$util.img(this.goodsSkuDetail.sku_image, {
|
}
|
||||||
size: 'big'
|
|
||||||
})
|
this.contactData = {
|
||||||
};
|
title: this.goodsSkuDetail.sku_name,
|
||||||
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
|
path: this.shareUrl,
|
||||||
|
img: this.$util.img(this.goodsSkuDetail.sku_image, {
|
||||||
if (this.goodsRoute != '/pages_goods/detail') this.setPublicShare();
|
size: 'big'
|
||||||
|
})
|
||||||
// this.getBarrageData();
|
};
|
||||||
if (this.addonIsExist.form) {
|
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
|
||||||
this.getGoodsForm();
|
|
||||||
}
|
this.setPublicShare();
|
||||||
},
|
// if (this.goodsRoute != '/pages/goods/detail') this.setPublicShare();
|
||||||
/**
|
|
||||||
* 刷新商品详情数据
|
this.getBarrageData();
|
||||||
* @param {Object} data
|
if (this.addonIsExist.form) {
|
||||||
*/
|
this.getGoodsForm();
|
||||||
refreshGoodsSkuDetail(data) {
|
}
|
||||||
this.goodsSkuDetail = Object.assign({}, this.goodsSkuDetail, data);
|
},
|
||||||
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
|
/**
|
||||||
if (this.$refs.goodsDetailView) {
|
* 刷新商品详情数据
|
||||||
|
* @param {Object} data
|
||||||
// 初始化商品详情视图数据
|
*/
|
||||||
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
|
refreshGoodsSkuDetail(data) {
|
||||||
|
this.goodsSkuDetail = Object.assign({}, this.goodsSkuDetail, data);
|
||||||
// 解决轮播图数量不一致时,切换到第一个
|
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
|
||||||
if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) {
|
if (this.$refs.goodsDetailView) {
|
||||||
this.swiperAutoplay = true;
|
|
||||||
this.swiperCurrent = 1;
|
// 初始化商品详情视图数据
|
||||||
setTimeout(() => {
|
this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
|
||||||
this.swiperAutoplay = false;
|
|
||||||
}, 40);
|
// 解决轮播图数量不一致时,切换到第一个
|
||||||
}
|
if (this.swiperCurrent > this.goodsSkuDetail.sku_images.length) {
|
||||||
|
this.swiperAutoplay = true;
|
||||||
}
|
this.swiperCurrent = 1;
|
||||||
this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
setTimeout(() => {
|
||||||
this.$langConfig.title(this.navbarData.title);
|
this.swiperAutoplay = false;
|
||||||
|
}, 40);
|
||||||
if (this.goodsSkuDetail.membercard) {
|
}
|
||||||
this.membercard = this.goodsSkuDetail.membercard;
|
|
||||||
}
|
}
|
||||||
},
|
this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
||||||
goodsDetailViewInit() {
|
this.$langConfig.title(this.navbarData.title);
|
||||||
// 初始化商品详情视图数据
|
|
||||||
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
|
if (this.goodsSkuDetail.membercard) {
|
||||||
sku_id: this.skuId,
|
this.membercard = this.goodsSkuDetail.membercard;
|
||||||
goods_id: this.goodsSkuDetail.goods_id,
|
}
|
||||||
preview: this.preview,
|
},
|
||||||
source_member: this.source_member,
|
goodsDetailViewInit() {
|
||||||
posterParams: this.posterParams,
|
// 初始化商品详情视图数据
|
||||||
posterApi: this.posterApi,
|
if (this.$refs.goodsDetailView) this.$refs.goodsDetailView.init({
|
||||||
shareUrl: this.shareUrl,
|
sku_id: this.skuId,
|
||||||
goodsRoute: this.goodsRoute,
|
goods_id: this.goodsSkuDetail.goods_id,
|
||||||
isVirtual: this.goodsSkuDetail.is_virtual,
|
preview: this.preview,
|
||||||
deliveryType: this.goodsSkuDetail.express_type,
|
source_member: this.source_member,
|
||||||
whetherCollection: this.goodsSkuDetail.is_collect,
|
posterParams: this.posterParams,
|
||||||
evaluateConfig: this.goodsSkuDetail.evaluate_config,
|
posterApi: this.posterApi,
|
||||||
evaluateList: this.goodsSkuDetail.evaluate_list,
|
shareUrl: this.shareUrl,
|
||||||
evaluateCount: this.goodsSkuDetail.evaluate_count
|
goodsRoute: this.goodsRoute,
|
||||||
});
|
isVirtual: this.goodsSkuDetail.is_virtual,
|
||||||
},
|
deliveryType: this.goodsSkuDetail.express_type,
|
||||||
goHome() {
|
whetherCollection: this.goodsSkuDetail.is_collect,
|
||||||
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
evaluateConfig: this.goodsSkuDetail.evaluate_config,
|
||||||
this.$util.redirectTo(this.$util.INDEX_PAGE_URL);
|
evaluateList: this.goodsSkuDetail.evaluate_list,
|
||||||
},
|
evaluateCount: this.goodsSkuDetail.evaluate_count
|
||||||
goCart() {
|
});
|
||||||
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
},
|
||||||
this.$util.redirectTo('/pages_goods/cart');
|
goHome() {
|
||||||
},
|
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
||||||
//-------------------------------------关注-------------------------------------
|
this.$util.redirectTo('/pages/index/index');
|
||||||
//更新商品信息
|
},
|
||||||
modifyGoodsInfo() {
|
goCart() {
|
||||||
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
||||||
//更新商品点击量
|
this.$util.redirectTo('/pages/goods/cart');
|
||||||
this.$api.sendRequest({
|
},
|
||||||
url: "/api/goods/modifyclicks",
|
//-------------------------------------关注-------------------------------------
|
||||||
data: {
|
//更新商品信息
|
||||||
sku_id: this.skuId
|
modifyGoodsInfo() {
|
||||||
},
|
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
||||||
success: res => {
|
//更新商品点击量
|
||||||
}
|
this.$api.sendRequest({
|
||||||
});
|
url: "/api/goods/modifyclicks",
|
||||||
|
data: {
|
||||||
//添加足迹
|
sku_id: this.skuId
|
||||||
this.$api.sendRequest({
|
},
|
||||||
url: "/api/goodsbrowse/add",
|
success: res => {
|
||||||
data: {
|
}
|
||||||
goods_id: this.goodsSkuDetail.goods_id,
|
});
|
||||||
sku_id: this.skuId
|
|
||||||
},
|
//添加足迹
|
||||||
success: res => {
|
this.$api.sendRequest({
|
||||||
}
|
url: "/api/goodsbrowse/add",
|
||||||
});
|
data: {
|
||||||
},
|
goods_id: this.goodsSkuDetail.goods_id,
|
||||||
//-------------------------------------关注-------------------------------------
|
sku_id: this.skuId
|
||||||
async editCollection() {
|
},
|
||||||
if (this.$refs.goodsDetailView) {
|
success: res => {
|
||||||
this.whetherCollection = await this.$refs.goodsDetailView.collection();
|
}
|
||||||
}
|
});
|
||||||
},
|
},
|
||||||
openSharePopup() {
|
//-------------------------------------关注-------------------------------------
|
||||||
if (this.$refs.goodsDetailView) {
|
async editCollection() {
|
||||||
this.$refs.goodsDetailView.openSharePopup();
|
if (this.$refs.goodsDetailView) {
|
||||||
}
|
this.whetherCollection = await this.$refs.goodsDetailView.collection();
|
||||||
},
|
}
|
||||||
//弹幕
|
},
|
||||||
getBarrageData() {
|
openSharePopup() {
|
||||||
this.$api.sendRequest({
|
if (this.$refs.goodsDetailView) {
|
||||||
url: '/api/goods/goodsbarrage',
|
this.$refs.goodsDetailView.openSharePopup();
|
||||||
data: {
|
}
|
||||||
goods_id: this.goodsSkuDetail.goods_id
|
},
|
||||||
},
|
//弹幕
|
||||||
success: res => {
|
getBarrageData() {
|
||||||
if (res.code == 0 && res.data) {
|
this.$api.sendRequest({
|
||||||
let barrageData = [];
|
url: '/api/goods/goodsbarrage',
|
||||||
for (let i in res.data.list) {
|
data: {
|
||||||
if (res.data.list[i]['title']) {
|
goods_id: this.goodsSkuDetail.goods_id
|
||||||
let title = res.data.list[i]['title'].substr(0, 1) + '*' + res.data.list[i]['title'].substr(res.data.list[i]['title'].length - 1, 1)
|
},
|
||||||
barrageData.push({
|
success: res => {
|
||||||
img: res.data.list[i]['img'] ? res.data.list[i]['img'] : this.$util.getDefaultImage().head,
|
if (res.code == 0 && res.data) {
|
||||||
title: title + '已下单'
|
let barrageData = [];
|
||||||
});
|
for (let i in res.data.list) {
|
||||||
}
|
if (res.data.list[i]['title']) {
|
||||||
}
|
let title = res.data.list[i]['title'].substr(0, 1) + '*' + res.data.list[i]['title'].substr(res.data.list[i]['title'].length - 1, 1)
|
||||||
this.goodsSkuDetail.barrageData = barrageData;
|
barrageData.push({
|
||||||
}
|
img: res.data.list[i]['img'] ? res.data.list[i]['img'] : this.$util.getDefaultImage().head,
|
||||||
}
|
title: title + '已下单'
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
/**
|
}
|
||||||
* 设置公众号分享
|
this.goodsSkuDetail.barrageData = barrageData;
|
||||||
*/
|
}
|
||||||
setPublicShare() {
|
}
|
||||||
let shareUrl = this.$config.h5Domain + this.shareUrl;
|
});
|
||||||
if (this.memberInfo && this.memberInfo.member_id) shareUrl += '&source_member=' + this.memberInfo.member_id;
|
},
|
||||||
|
/**
|
||||||
this.$util.setPublicShare({
|
* 设置公众号分享
|
||||||
title: this.goodsSkuDetail.goods_name,
|
*/
|
||||||
desc: '',
|
setPublicShare() {
|
||||||
link: shareUrl,
|
let shareUrl = this.$config.h5Domain + this.shareUrl;
|
||||||
imgUrl: typeof this.goodsSkuDetail.goods_image == 'object' ? this.goodsSkuDetail.goods_image[0] : this.goodsSkuDetail.goods_image.split(',')[0]
|
if (this.memberInfo && this.memberInfo.member_id) shareUrl += '&source_member=' + this.memberInfo.member_id;
|
||||||
})
|
var store_info = this.$store.state.globalStoreInfo;
|
||||||
},
|
if (store_info) shareUrl+= '&store_id=' + store_info.store_id;
|
||||||
/**
|
this.$util.setPublicShare({
|
||||||
* 获取商品表单
|
title: this.goodsSkuDetail.goods_name,
|
||||||
*/
|
desc: '',
|
||||||
getGoodsForm() {
|
link: shareUrl,
|
||||||
this.$api.sendRequest({
|
imgUrl: typeof this.goodsSkuDetail.goods_image == 'object' ? this.goodsSkuDetail.goods_image[0] : this.goodsSkuDetail.goods_image.split(',')[0]
|
||||||
url: "/form/api/form/goodsform",
|
})
|
||||||
data: {
|
},
|
||||||
goods_id: this.goodsSkuDetail.goods_id
|
/**
|
||||||
},
|
* 获取商品表单
|
||||||
success: res => {
|
*/
|
||||||
if (res.code == 0 && res.data) this.$set(this.goodsSkuDetail, 'goods_form', res.data);
|
getGoodsForm() {
|
||||||
}
|
this.$api.sendRequest({
|
||||||
});
|
url: "/form/api/form/goodsform",
|
||||||
}
|
data: {
|
||||||
},
|
goods_id: this.goodsSkuDetail.goods_id
|
||||||
/**
|
},
|
||||||
* 自定义分享内容
|
success: res => {
|
||||||
* @param {Object} res
|
if (res.code == 0 && res.data) this.$set(this.goodsSkuDetail, 'goods_form', res.data);
|
||||||
*/
|
}
|
||||||
onShareAppMessage(res) {
|
});
|
||||||
var path = this.shareUrl;
|
}
|
||||||
if (this.memberInfo && this.memberInfo.member_id) path += '&source_member=' + this.memberInfo.member_id;
|
},
|
||||||
return {
|
/**
|
||||||
title: this.goodsSkuDetail.sku_name,
|
* 自定义分享内容
|
||||||
imageUrl: this.shareImg ? this.$util.img(this.shareImg) : this.$util.img(this.goodsSkuDetail.sku_image, {
|
* @param {Object} res
|
||||||
size: 'big'
|
*/
|
||||||
}),
|
onShareAppMessage(res) {
|
||||||
path: path,
|
var path = this.shareUrl;
|
||||||
success: res => {
|
var store_info = this.$store.state.globalStoreInfo;
|
||||||
},
|
if (store_info) path+= '&store_id=' + store_info.store_id;
|
||||||
fail: res => {
|
if (this.memberInfo && this.memberInfo.member_id) path += '&source_member=' + this.memberInfo.member_id;
|
||||||
}
|
return {
|
||||||
};
|
title: this.goodsSkuDetail.sku_name,
|
||||||
},
|
imageUrl: this.shareImg ? this.$util.img(this.shareImg) : this.$util.img(this.goodsSkuDetail.sku_image, {
|
||||||
// 分享到微信朋友圈
|
size: 'big'
|
||||||
// #ifdef MP-WEIXIN
|
}),
|
||||||
onShareTimeline() {
|
path: path,
|
||||||
let query = this.shareQuery;
|
success: res => {
|
||||||
if (this.memberInfo && this.memberInfo.member_id) query += '&source_member=' + this.memberInfo.member_id;
|
},
|
||||||
return {
|
fail: res => {
|
||||||
title: this.goodsSkuDetail.sku_name,
|
}
|
||||||
query: query,
|
};
|
||||||
imageUrl: this.$util.img(this.goodsSkuDetail.sku_image, {
|
},
|
||||||
size: 'big'
|
// 分享到微信朋友圈
|
||||||
})
|
// #ifdef MP-WEIXIN
|
||||||
};
|
onShareTimeline() {
|
||||||
}
|
let query = this.shareQuery;
|
||||||
// #endif
|
var store_info = this.$store.state.globalStoreInfo;
|
||||||
|
if (store_info) query+= '&store_id=' + store_info.store_id;
|
||||||
|
if (this.memberInfo && this.memberInfo.member_id) query += '&source_member=' + this.memberInfo.member_id;
|
||||||
|
return {
|
||||||
|
title: this.goodsSkuDetail.sku_name,
|
||||||
|
query: query,
|
||||||
|
imageUrl: this.$util.img(this.goodsSkuDetail.sku_image, {
|
||||||
|
size: 'big'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
}
|
}
|
||||||
@@ -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;
|
||||||
@@ -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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@@ -1,61 +1,9 @@
|
|||||||
import { langConfig } from './config-external.js';
|
const langList = ['zh-cn', 'en-us'];
|
||||||
|
|
||||||
|
var locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||||
// 缓存已加载的语言包
|
|
||||||
const loadedLangPacks = {};
|
|
||||||
|
|
||||||
// 处理页面目录映射
|
|
||||||
function processRoutePath(route) {
|
|
||||||
let routeParts = route.split("/");
|
|
||||||
|
|
||||||
// ---- 处理页面目录映射 <begin> 分包造成的,需要根据实际目录结构进行映射----
|
|
||||||
// 先处理特殊的分包路径
|
|
||||||
if (routeParts[0] === 'pages_tool') {
|
|
||||||
// pages_tool 分包下的页面,直接使用子目录作为语言包路径
|
|
||||||
routeParts = [routeParts[1], ...routeParts.slice(2)];
|
|
||||||
} else if (routeParts[0] === 'pages_goods') {
|
|
||||||
// pages_goods 分包映射到 goods 目录
|
|
||||||
routeParts[0] = 'goods';
|
|
||||||
} else if (routeParts[0] === 'pages_member') {
|
|
||||||
// pages_member 分包映射到 member 目录
|
|
||||||
routeParts[0] = 'member';
|
|
||||||
} else if (routeParts[0] === 'pages_order') {
|
|
||||||
// pages_order 分包映射到 order 目录
|
|
||||||
routeParts[0] = 'order';
|
|
||||||
} else if (routeParts[0] === 'pages_promotion') {
|
|
||||||
// pages_promotion 分包特殊处理
|
|
||||||
const promotionModules = ['point', 'fenxiao', 'merch'];
|
|
||||||
if (routeParts[1] && promotionModules.includes(routeParts[1])) {
|
|
||||||
routeParts = [routeParts[1], ...routeParts.slice(2)];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// ---- 处理页面目录映射 <end>----
|
|
||||||
|
|
||||||
// 去掉pages目录,只保留子目录
|
|
||||||
if (routeParts[0] === 'pages') {
|
|
||||||
routeParts = routeParts.slice(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
return routeParts.join("/");
|
|
||||||
}
|
|
||||||
|
|
||||||
// 加载语言包(同步方式)
|
|
||||||
function loadLangPackSync(lang, path) {
|
|
||||||
try {
|
|
||||||
if (loadedLangPacks[`${lang}_${path}`]) {
|
|
||||||
return loadedLangPacks[`${lang}_${path}`];
|
|
||||||
}
|
|
||||||
const langData = require(`@/lang/${lang}/${path}.js`).lang;
|
|
||||||
loadedLangPacks[`${lang}_${path}`] = langData;
|
|
||||||
return langData;
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`加载语言包 ${lang}/${path} 失败:`, error);
|
|
||||||
return {};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
langList: langConfig.langList,
|
langList: ['zh-cn', 'en-us'],
|
||||||
/**
|
/**
|
||||||
* * 解析多语言
|
* * 解析多语言
|
||||||
* @param {Object} field
|
* @param {Object} field
|
||||||
@@ -64,47 +12,41 @@ export default {
|
|||||||
let _this = getCurrentPages()[getCurrentPages().length - 1];
|
let _this = getCurrentPages()[getCurrentPages().length - 1];
|
||||||
if (!_this) return;
|
if (!_this) return;
|
||||||
|
|
||||||
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
var value = '';
|
||||||
|
let newRoute;
|
||||||
let value = ''; // 存放解析后的语言值
|
|
||||||
let langPath = ''; // 存放当前页面语言包路径
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
//公共语言包(同步加载)
|
//公共语言包
|
||||||
var lang = loadLangPackSync(locale, 'common');
|
var lang = require('../../lang/' + locale + '/common.js').lang;
|
||||||
|
|
||||||
//当前页面语言包(同步加载)
|
//当前页面语言包
|
||||||
let route = _this.route;
|
let route = _this.route.split("/");
|
||||||
langPath = processRoutePath(route);
|
newRoute = route.slice(1, route.length);
|
||||||
|
let currentPageLang = require('../../lang/' + locale + '/' + newRoute.join("/") + '.js').lang;
|
||||||
// 加载当前页面语言包
|
|
||||||
let currentPageLang = loadLangPackSync(locale, langPath);
|
|
||||||
|
|
||||||
// 合并语言包
|
for (let f in currentPageLang) {
|
||||||
let mergedLang = { ...lang, ...currentPageLang };
|
lang[f] = currentPageLang[f];
|
||||||
|
}
|
||||||
|
|
||||||
// 解析字段
|
|
||||||
var arr = field.split(".");
|
var arr = field.split(".");
|
||||||
if (arr.length > 1) {
|
if (arr.length > 1) {
|
||||||
// 处理嵌套属性,如 common.currencySymbol
|
for (let i in arr) {
|
||||||
let temp = mergedLang;
|
var next = parseInt(i) + 1;
|
||||||
let found = true;
|
if (next < arr.length) {
|
||||||
for (let key of arr) {
|
value = lang[arr[i]][arr[next]];
|
||||||
if (temp[key] !== undefined) {
|
|
||||||
temp = temp[key];
|
|
||||||
} else {
|
|
||||||
found = false;
|
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
value = found ? temp : field;
|
|
||||||
} else {
|
} else {
|
||||||
value = mergedLang[field] !== undefined ? mergedLang[field] : field;
|
value = lang[field];
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('解析语言包失败:', e, { langPath, field, locale });
|
if (field.indexOf("common.") != -1 || field.indexOf("tabBar.") != -1) {
|
||||||
value = field;
|
value = lang[field];
|
||||||
|
} else {
|
||||||
|
value = field;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (arguments.length > 1) {
|
if (arguments.length > 1) {
|
||||||
@@ -114,44 +56,27 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field
|
if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field
|
||||||
|
|
||||||
// 多语言调试,注释后可以关闭控制台输出
|
|
||||||
if (field == value) {
|
|
||||||
console.warn(`警告: 字段 ${field} 在语言包 ${langPath} 中未找到对应值,使用默认值 ${field} 当前语言: ${locale}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
return value;
|
return value;
|
||||||
},
|
},
|
||||||
/**
|
//切换语言
|
||||||
* * 切换语言
|
change(value) {
|
||||||
* @param {String} value 语言值
|
|
||||||
* @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);
|
||||||
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||||
|
|
||||||
// 清空已加载的语言包缓存
|
|
||||||
for (let key in loadedLangPacks) {
|
|
||||||
if (!key.startsWith(locale)) {
|
|
||||||
delete loadedLangPacks[key];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.refresh();
|
this.refresh();
|
||||||
|
|
||||||
if (url) {
|
uni.reLaunch({
|
||||||
uni.reLaunch({ url: url });
|
url: '/pages/member/index'
|
||||||
}
|
});
|
||||||
},
|
},
|
||||||
//刷新标题、tabbar
|
//刷新标题、tabbar
|
||||||
refresh() {
|
refresh() {
|
||||||
let _this = getCurrentPages()[getCurrentPages().length - 1];
|
let _this = getCurrentPages()[getCurrentPages().length - 1];
|
||||||
if (!_this) return;
|
if (!_this) return;
|
||||||
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||||
|
|
||||||
this.title(this.lang("title"));
|
this.title(this.lang("title"));
|
||||||
|
|
||||||
@@ -189,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
@@ -1,109 +1,107 @@
|
|||||||
import util from '@/common/js/util.js'
|
import TransformCoordinate from './transformCoordinate.js'
|
||||||
import TransformCoordinate from './transformCoordinate.js'
|
|
||||||
|
function openMapByDefault(latitude, longitude, name) {
|
||||||
function openMapByDefault(latitude, longitude, name) {
|
uni.openLocation({
|
||||||
uni.openLocation({
|
latitude: latitude,
|
||||||
latitude: latitude,
|
longitude: longitude,
|
||||||
longitude: longitude,
|
name: name,
|
||||||
name: name,
|
fail: (e) => {
|
||||||
fail: (e) => {
|
uni.showModal({
|
||||||
uni.showModal({
|
content: '打开地图失败,请稍后重试'
|
||||||
content: '打开地图失败,请稍后重试'
|
})
|
||||||
})
|
},
|
||||||
},
|
})
|
||||||
})
|
}
|
||||||
}
|
|
||||||
|
function openMapByAndroid(latitude, longitude, name) {
|
||||||
function openMapByAndroid(latitude, longitude, name) {
|
let url = ''; // 回调地址
|
||||||
let url = ''; // 回调地址
|
let identity = ''; // 程序名称
|
||||||
let identity = ''; // 程序名称
|
if (plus.runtime.isApplicationExist({
|
||||||
if (plus.runtime.isApplicationExist({
|
pname: 'com.baidu.BaiduMap'
|
||||||
pname: 'com.baidu.BaiduMap'
|
})) {
|
||||||
})) {
|
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
|
||||||
url =
|
identity = 'com.baidu.BaiduMap';
|
||||||
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
|
openURL(url, identity)
|
||||||
identity = 'com.baidu.BaiduMap'
|
} else if (plus.runtime.isApplicationExist({
|
||||||
openURL(url, identity)
|
pname: 'com.autonavi.minimap'
|
||||||
} else if (plus.runtime.isApplicationExist({
|
})) {
|
||||||
pname: 'com.autonavi.minimap'
|
// 高德
|
||||||
})) { // 高德
|
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
|
||||||
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
|
identity = 'com.autonavi.minimap';
|
||||||
identity = 'com.autonavi.minimap'
|
openURL(url, identity)
|
||||||
openURL(url, identity)
|
} else {
|
||||||
} else {
|
openMapByDefault(latitude, longitude, name)
|
||||||
openMapByDefault(latitude, longitude, name)
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
function openMapByIos(latitude, longitude, name) {
|
||||||
function openMapByIos(latitude, longitude, name) {
|
let url = ''; // 回调地址
|
||||||
let url = ''; // 回调地址
|
let errorCB = ''; // url失败的回调地址
|
||||||
let errorCB = ''; // url失败的回调地址
|
let identity = ''; // 程序名称
|
||||||
let identity = ''; // 程序名称
|
|
||||||
|
if (plus.runtime.isApplicationExist({
|
||||||
if (plus.runtime.isApplicationExist({
|
action: 'baidumap://'
|
||||||
action: 'baidumap://'
|
})) {
|
||||||
})) {
|
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
|
||||||
url =
|
openURL(url, identity)
|
||||||
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
|
} else if (plus.runtime.isApplicationExist({
|
||||||
openURL(url, identity)
|
action: 'iosamap://'
|
||||||
} else if (plus.runtime.isApplicationExist({
|
})) {
|
||||||
action: 'iosamap://'
|
// 高德
|
||||||
})) { // 高德
|
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
|
||||||
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
|
openURL(url, identity)
|
||||||
openURL(url, identity)
|
} else {
|
||||||
} else {
|
openMapByDefault(latitude, longitude, name)
|
||||||
openMapByDefault(latitude, longitude, name)
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
function openURL(url, identity) {
|
||||||
function openURL(url, identity) {
|
let newurl = encodeURI(url);
|
||||||
let newurl = encodeURI(url);
|
plus.runtime.openURL(newurl, function(res) {
|
||||||
plus.runtime.openURL(newurl, function(res) {
|
uni.showModal({
|
||||||
uni.showModal({
|
content: res.message
|
||||||
content: res.message
|
})
|
||||||
})
|
}, identity);
|
||||||
}, identity);
|
}
|
||||||
}
|
|
||||||
|
function getCoordByType(longitude, latitude, coord_type) {
|
||||||
function getCoordByType(longitude, latitude, coord_type) {
|
switch (coord_type) {
|
||||||
switch (coord_type) {
|
case 'gcj02':
|
||||||
case 'gcj02':
|
return [longitude, latitude]
|
||||||
return [longitude, latitude]
|
break;
|
||||||
break;
|
case 'bd09':
|
||||||
case 'bd09':
|
return TransformCoordinate.bd09togcj02(longitude, latitude)
|
||||||
return TransformCoordinate.bd09togcj02(longitude, latitude)
|
break;
|
||||||
break;
|
case 'wgs84':
|
||||||
case 'wgs84':
|
return TransformCoordinate.wgs84togcj02(longitude, latitude)
|
||||||
return TransformCoordinate.wgs84togcj02(longitude, latitude)
|
break;
|
||||||
break;
|
default:
|
||||||
default:
|
return [longitude, latitude]
|
||||||
return [longitude, latitude]
|
break;
|
||||||
break;
|
}
|
||||||
}
|
}
|
||||||
}
|
export default {
|
||||||
export default {
|
/* 打开地图 */
|
||||||
/* 打开地图 */
|
openMap(latitude, longitude, name, coord_type = 'gcj02') {
|
||||||
openMap(latitude, longitude, name, coord_type = 'gcj02') {
|
let arr = getCoordByType(longitude, latitude, coord_type)
|
||||||
let arr = getCoordByType(longitude, latitude, coord_type)
|
// #ifdef APP-PLUS
|
||||||
// #ifdef APP-PLUS
|
switch (uni.getSystemInfoSync().platform) {
|
||||||
let platform = util.getDeviceInfo().platform;
|
case 'android':
|
||||||
switch (platform) {
|
console.log('运行Android上')
|
||||||
case 'android':
|
openMapByAndroid(arr[1], arr[0], name)
|
||||||
console.log('运行Android上')
|
break;
|
||||||
openMapByAndroid(arr[1], arr[0], name)
|
case 'ios':
|
||||||
break;
|
console.log('运行iOS上')
|
||||||
case 'ios':
|
openMapByIos(arr[1], arr[0], name)
|
||||||
console.log('运行iOS上')
|
break;
|
||||||
openMapByIos(arr[1], arr[0], name)
|
default:
|
||||||
break;
|
openMapByDefault(arr[1], arr[0], name)
|
||||||
default:
|
console.log('运行在开发者工具上')
|
||||||
openMapByDefault(arr[1], arr[0], name)
|
break;
|
||||||
console.log('运行在开发者工具上')
|
}
|
||||||
break;
|
// #endif
|
||||||
}
|
// #ifndef APP-PLUS
|
||||||
// #endif
|
openMapByDefault(arr[1], arr[0], name)
|
||||||
// #ifndef APP-PLUS
|
// #endif
|
||||||
openMapByDefault(arr[1], arr[0], name)
|
}
|
||||||
// #endif
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import { EventSafety } from '@/common/js/event-safety.js'
|
import { EventSafety } from './event-safety'
|
||||||
import util from '@/common/js/util.js'
|
|
||||||
|
|
||||||
export class NavigationHelper {
|
export class NavigationHelper {
|
||||||
constructor() {
|
constructor() {
|
||||||
@@ -60,7 +59,7 @@ export class NavigationHelper {
|
|||||||
// 微信小程序精确计算
|
// 微信小程序精确计算
|
||||||
try {
|
try {
|
||||||
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
|
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
|
||||||
let systemInfo = util.getDeviceInfo();
|
const systemInfo = uni.getSystemInfoSync()
|
||||||
|
|
||||||
const height = menuButtonInfo.bottom +
|
const height = menuButtonInfo.bottom +
|
||||||
(menuButtonInfo.top - systemInfo.statusBarHeight)
|
(menuButtonInfo.top - systemInfo.statusBarHeight)
|
||||||
@@ -120,7 +119,7 @@ export class NavigationHelper {
|
|||||||
// 获取状态栏高度
|
// 获取状态栏高度
|
||||||
getStatusBarHeight() {
|
getStatusBarHeight() {
|
||||||
// #ifdef MP-WEIXIN
|
// #ifdef MP-WEIXIN
|
||||||
let systemInfo = util.getDeviceInfo();
|
const systemInfo = uni.getSystemInfoSync()
|
||||||
return systemInfo.statusBarHeight || 20
|
return systemInfo.statusBarHeight || 20
|
||||||
// #endif
|
// #endif
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
@@ -139,7 +138,7 @@ export class NavigationHelper {
|
|||||||
// 获取安全区域
|
// 获取安全区域
|
||||||
getSafeAreaInsets() {
|
getSafeAreaInsets() {
|
||||||
try {
|
try {
|
||||||
let systemInfo = util.getDeviceInfo();
|
const systemInfo = uni.getSystemInfoSync()
|
||||||
return systemInfo.safeArea || {
|
return systemInfo.safeArea || {
|
||||||
top: 0,
|
top: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
|
|||||||
@@ -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();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,460 +1,419 @@
|
|||||||
/**
|
export default {
|
||||||
* 颜色配置
|
'default': {
|
||||||
* 包含默认颜色和其他颜色
|
//红色
|
||||||
* 特别注意:
|
name: 'default',
|
||||||
* 1. 分组不会被计算成Key,分组下的属性会被计算成Key
|
main_color: '#F4391c',
|
||||||
* 2. 分组下的属性如果有相同的Key,会被覆盖
|
aux_color: '#F7B500',
|
||||||
* 3. 例如:hoverNav,hoverNav_bg_color和hoverNav_text_color, 不会生成hoverNav_hoverNav_bg_color和hoverNav_hoverNav_text_color
|
bg_color: '#FF4646',//主题背景
|
||||||
* 问题原因:历史遗留
|
bg_color_shallow: '#FF4646',//主题背景渐变浅色
|
||||||
*/
|
promotion_color: '#FF4646',//活动背景
|
||||||
export default {
|
promotion_aux_color: '#F7B500',//活动背景辅色
|
||||||
'default': {
|
main_color_shallow: '#FFF4F4',//淡背景
|
||||||
//红色
|
price_color: 'rgb(252,82,39)',//价格颜色
|
||||||
name: 'default',
|
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||||
main_color: '#F4391c',
|
goods_detail: {
|
||||||
aux_color: '#F7B500',
|
goods_price: 'rgb(252,82,39,1)',//价格
|
||||||
bg_color: '#FF4646',//主题背景
|
promotion_tag: '#FF4646',
|
||||||
bg_color_shallow: '#FF4646',//主题背景渐变浅色
|
goods_card_bg: '#201A18',//会员卡背景
|
||||||
promotion_color: '#FF4646',//活动背景
|
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
||||||
promotion_aux_color: '#F7B500',//活动背景辅色
|
goods_card_color: '#FFD792',
|
||||||
main_color_shallow: '#FFF4F4',//淡背景
|
goods_coupon: '#FC5227',
|
||||||
price_color: 'rgb(252,82,39)',//价格颜色
|
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
||||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
goods_btn_color: '#FF4646',//按钮颜色
|
||||||
...{
|
goods_btn_color_shallow: '#F7B500',//副按钮颜色
|
||||||
goods_price: 'rgb(252,82,39,1)',//价格
|
},
|
||||||
promotion_tag: '#FF4646',
|
pintuan: {
|
||||||
goods_card_bg: '#201A18',//会员卡背景
|
pintuan_label_bg: '#F7B500',
|
||||||
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
pintuan_label_color: '#FFFFFF',
|
||||||
goods_card_color: '#FFD792',
|
pintuan_color: '#FA6400',
|
||||||
goods_coupon: '#FC5227',
|
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||||
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||||
goods_btn_color: '#FF4646',//按钮颜色
|
},
|
||||||
goods_btn_color_shallow: '#F7B500',//副按钮颜色
|
super_member: {
|
||||||
},
|
super_member_start_bg: '#7c7878',
|
||||||
...{
|
super_member_end_bg: '#201a18',
|
||||||
pintuan_label_bg: '#F7B500',
|
super_member_start_text_color: '#FFDBA6',
|
||||||
pintuan_label_color: '#FFFFFF',
|
super_member_end_text_color: '#FFEBCA',
|
||||||
pintuan_color: '#FA6400',
|
},
|
||||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
bargain: {
|
||||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
bargain_promotion_color: '#F0353E',//活动背景
|
||||||
},
|
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
...{
|
},
|
||||||
super_member_start_bg: '#7c7878',
|
seckill: {
|
||||||
super_member_end_bg: '#201a18',
|
seckill_promotion_color: '#F83530',//活动背景
|
||||||
super_member_start_text_color: '#FFDBA6',
|
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
super_member_end_text_color: '#FFEBCA',
|
},
|
||||||
},
|
giftcard: {
|
||||||
...{
|
giftcard_promotion_color: '#FF3369',//活动背景
|
||||||
bargain_promotion_color: '#F0353E',//活动背景
|
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
},
|
||||||
},
|
groupby: {
|
||||||
...{
|
groupby_promotion_color: '#E64136',//活动背景
|
||||||
seckill_promotion_color: '#F83530',//活动背景
|
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
},
|
||||||
},
|
},
|
||||||
...{
|
'green': {
|
||||||
giftcard_promotion_color: '#FF3369',//活动背景
|
name: 'green',
|
||||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
main_color: '#19C650',
|
||||||
},
|
aux_color: '#FA6400',
|
||||||
...{
|
bg_color: '#19C650',
|
||||||
groupby_promotion_color: '#E64136',//活动背景
|
bg_color_shallow: '#19C650',
|
||||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
promotion_color: '#19C650',
|
||||||
},
|
promotion_aux_color: '#FA6400',
|
||||||
...{
|
main_color_shallow: '#F0FFF5',//淡背景
|
||||||
hover_nav_bg_color: '#FFFC', //背景色: 红色 '#c6251b', 白色: '#FFFC'
|
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||||
hover_nav_text_color: '#000' // 文字颜色: 白色 '#FFFFFF', 黑色: '#000'
|
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||||
},
|
goods_detail: {
|
||||||
},
|
goods_price: 'rgba(252,82,39,1)',//价格
|
||||||
'green': {
|
promotion_tag: '#19C650',
|
||||||
name: 'green',
|
goods_card_bg: '#201A18',//会员卡背景
|
||||||
main_color: '#19C650',
|
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
||||||
aux_color: '#FA6400',
|
goods_card_color: '#FFD792',
|
||||||
bg_color: '#19C650',
|
goods_coupon: '#FC5227',
|
||||||
bg_color_shallow: '#19C650',
|
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
||||||
promotion_color: '#19C650',
|
goods_btn_color: '#19C650',//按钮颜色
|
||||||
promotion_aux_color: '#FA6400',
|
goods_btn_color_shallow: '#FA6400',//副按钮颜色
|
||||||
main_color_shallow: '#F0FFF5',//淡背景
|
},
|
||||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
pintuan: {
|
||||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
pintuan_label_bg: '#F7B500',
|
||||||
...{
|
pintuan_label_color: '#FFFFFF',
|
||||||
goods_price: 'rgba(252,82,39,1)',//价格
|
pintuan_color: '#FA6400',
|
||||||
promotion_tag: '#19C650',
|
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||||
goods_card_bg: '#201A18',//会员卡背景
|
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||||
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
},
|
||||||
goods_card_color: '#FFD792',
|
super_member: {
|
||||||
goods_coupon: '#FC5227',
|
super_member_start_bg: '#7c7878',
|
||||||
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
super_member_end_bg: '#201a18',
|
||||||
goods_btn_color: '#19C650',//按钮颜色
|
super_member_start_text_color: '#FFDBA6',
|
||||||
goods_btn_color_shallow: '#FA6400',//副按钮颜色
|
super_member_end_text_color: '#FFEBCA',
|
||||||
},
|
},
|
||||||
...{
|
bargain: {
|
||||||
pintuan_label_bg: '#F7B500',
|
bargain_promotion_color: '#F0353E',//活动背景
|
||||||
pintuan_label_color: '#FFFFFF',
|
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
pintuan_color: '#FA6400',
|
},
|
||||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
seckill: {
|
||||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
seckill_promotion_color: '#F83530',//活动背景
|
||||||
},
|
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
...{
|
},
|
||||||
super_member_start_bg: '#7c7878',
|
giftcard: {
|
||||||
super_member_end_bg: '#201a18',
|
giftcard_promotion_color: '#FF3369',//活动背景
|
||||||
super_member_start_text_color: '#FFDBA6',
|
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
super_member_end_text_color: '#FFEBCA',
|
},
|
||||||
},
|
groupby: {
|
||||||
...{
|
groupby_promotion_color: '#E64136',//活动背景
|
||||||
bargain_promotion_color: '#F0353E',//活动背景
|
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
},
|
||||||
},
|
},
|
||||||
...{
|
'blue': {
|
||||||
seckill_promotion_color: '#F83530',//活动背景
|
name: 'blue',
|
||||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
main_color: '#36ABFF',
|
||||||
},
|
aux_color: '#FA6400',
|
||||||
...{
|
bg_color: '#36ABFF',
|
||||||
giftcard_promotion_color: '#FF3369',//活动背景
|
bg_color_shallow: '#36ABFF',
|
||||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
promotion_color: '#36ABFF ',
|
||||||
},
|
promotion_aux_color: '#FA6400',
|
||||||
...{
|
main_color_shallow: '#E2F3FF',
|
||||||
groupby_promotion_color: '#E64136',//活动背景
|
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||||
},
|
goods_detail: {
|
||||||
...{
|
goods_price: 'rgba(252,82,39,1)',//价格
|
||||||
hover_nav_bg_color: '#19C650',//背景色
|
promotion_tag: '#36ABFF',
|
||||||
hover_nav_text_color: '#FFFFFF'
|
goods_card_bg: '#201A18',//会员卡背景
|
||||||
},
|
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
||||||
},
|
goods_card_color: '#FFD792',
|
||||||
'blue': {
|
goods_coupon: '#FC5227',
|
||||||
name: 'blue',
|
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
||||||
main_color: '#36ABFF',
|
goods_btn_color: '#36ABFF',//按钮颜色
|
||||||
aux_color: '#FA6400',
|
goods_btn_color_shallow: '#FA6400',//副按钮颜色
|
||||||
bg_color: '#36ABFF',
|
},
|
||||||
bg_color_shallow: '#36ABFF',
|
pintuan: {
|
||||||
promotion_color: '#36ABFF ',
|
pintuan_label_bg: '#F7B500',
|
||||||
promotion_aux_color: '#FA6400',
|
pintuan_label_color: '#FFFFFF',
|
||||||
main_color_shallow: '#E2F3FF',
|
pintuan_color: '#FA6400',
|
||||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||||
...{
|
},
|
||||||
goods_price: 'rgba(252,82,39,1)',//价格
|
super_member: {
|
||||||
promotion_tag: '#36ABFF',
|
super_member_start_bg: '#7c7878',
|
||||||
goods_card_bg: '#201A18',//会员卡背景
|
super_member_end_bg: '#201a18',
|
||||||
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
super_member_start_text_color: '#FFDBA6',
|
||||||
goods_card_color: '#FFD792',
|
super_member_end_text_color: '#FFEBCA',
|
||||||
goods_coupon: '#FC5227',
|
},
|
||||||
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
bargain: {
|
||||||
goods_btn_color: '#36ABFF',//按钮颜色
|
bargain_promotion_color: '#F0353E',//活动背景
|
||||||
goods_btn_color_shallow: '#FA6400',//副按钮颜色
|
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
},
|
},
|
||||||
...{
|
seckill: {
|
||||||
pintuan_label_bg: '#F7B500',
|
seckill_promotion_color: '#F83530',//活动背景
|
||||||
pintuan_label_color: '#FFFFFF',
|
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
pintuan_color: '#FA6400',
|
},
|
||||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
giftcard: {
|
||||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
giftcard_promotion_color: '#FF3369',//活动背景
|
||||||
},
|
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
...{
|
},
|
||||||
super_member_start_bg: '#7c7878',
|
groupby: {
|
||||||
super_member_end_bg: '#201a18',
|
groupby_promotion_color: '#E64136',//活动背景
|
||||||
super_member_start_text_color: '#FFDBA6',
|
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
super_member_end_text_color: '#FFEBCA',
|
},
|
||||||
},
|
},
|
||||||
...{
|
'pink': {
|
||||||
bargain_promotion_color: '#F0353E',//活动背景
|
name: 'pink',
|
||||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
main_color: '#FF407E',
|
||||||
},
|
aux_color: '#F7B500',
|
||||||
...{
|
bg_color: '#FF407E',//主题背景
|
||||||
seckill_promotion_color: '#F83530',//活动背景
|
bg_color_shallow: '#FF407E',//主题背景渐变浅色
|
||||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
promotion_color: '#FF407E',//活动背景
|
||||||
},
|
promotion_aux_color: '#F7B500',//活动背景辅色
|
||||||
...{
|
main_color_shallow: '#FFF5F8',//淡背景
|
||||||
giftcard_promotion_color: '#FF3369',//活动背景
|
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||||
},
|
goods_detail: {
|
||||||
...{
|
goods_price: 'rgba(252,82,39,1)',//价格
|
||||||
groupby_promotion_color: '#E64136',//活动背景
|
promotion_tag: '#FF407E',
|
||||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
goods_card_bg: '#201A18',//会员卡背景
|
||||||
},
|
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
||||||
...{
|
goods_card_color: '#FFD792',
|
||||||
hover_nav_bg_color: '#36ABFF',//背景色
|
goods_coupon: '#FC5227',
|
||||||
hover_nav_text_color: '#FFFFFF'
|
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
||||||
},
|
goods_btn_color: '#FF407E',//按钮颜色
|
||||||
},
|
goods_btn_color_shallow: '#F7B500',//副按钮颜色
|
||||||
'pink': {
|
},
|
||||||
name: 'pink',
|
pintuan: {
|
||||||
main_color: '#FF407E',
|
pintuan_label_bg: '#F7B500',
|
||||||
aux_color: '#F7B500',
|
pintuan_label_color: '#FFFFFF',
|
||||||
bg_color: '#FF407E',//主题背景
|
pintuan_color: '#FA6400',
|
||||||
bg_color_shallow: '#FF407E',//主题背景渐变浅色
|
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||||
promotion_color: '#FF407E',//活动背景
|
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||||
promotion_aux_color: '#F7B500',//活动背景辅色
|
},
|
||||||
main_color_shallow: '#FFF5F8',//淡背景
|
super_member: {
|
||||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
super_member_start_bg: '#7c7878',
|
||||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
super_member_end_bg: '#201a18',
|
||||||
...{
|
super_member_start_text_color: '#FFDBA6',
|
||||||
goods_price: 'rgba(252,82,39,1)',//价格
|
super_member_end_text_color: '#FFEBCA',
|
||||||
promotion_tag: '#FF407E',
|
},
|
||||||
goods_card_bg: '#201A18',//会员卡背景
|
bargain: {
|
||||||
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
bargain_promotion_color: '#F0353E',//活动背景
|
||||||
goods_card_color: '#FFD792',
|
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
goods_coupon: '#FC5227',
|
},
|
||||||
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
seckill: {
|
||||||
goods_btn_color: '#FF407E',//按钮颜色
|
seckill_promotion_color: '#F83530',//活动背景
|
||||||
goods_btn_color_shallow: '#F7B500',//副按钮颜色
|
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
},
|
},
|
||||||
...{
|
giftcard: {
|
||||||
pintuan_label_bg: '#F7B500',
|
giftcard_promotion_color: '#FF3369',//活动背景
|
||||||
pintuan_label_color: '#FFFFFF',
|
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
pintuan_color: '#FA6400',
|
},
|
||||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
groupby: {
|
||||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
groupby_promotion_color: '#E64136',//活动背景
|
||||||
},
|
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
...{
|
},
|
||||||
super_member_start_bg: '#7c7878',
|
},
|
||||||
super_member_end_bg: '#201a18',
|
'gold': {
|
||||||
super_member_start_text_color: '#FFDBA6',
|
name: 'gold',
|
||||||
super_member_end_text_color: '#FFEBCA',
|
main_color: '#CFAF70',
|
||||||
},
|
aux_color: '#444444',
|
||||||
...{
|
bg_color: '#CFAF70',//主题背景
|
||||||
bargain_promotion_color: '#F0353E',//活动背景
|
bg_color_shallow: '#CFAF70',//主题背景渐变浅色
|
||||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
promotion_color: '#CFAF70',//活动背景
|
||||||
},
|
promotion_aux_color: '#444444',//活动背景辅色
|
||||||
...{
|
main_color_shallow: '#FFFAF1',//淡背景
|
||||||
seckill_promotion_color: '#F83530',//活动背景
|
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||||
},
|
goods_detail: {
|
||||||
...{
|
goods_price: 'rgba(252,82,39,1)',//价格
|
||||||
giftcard_promotion_color: '#FF3369',//活动背景
|
promotion_tag: '#CFAF70',
|
||||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
goods_card_bg: '#201A18',//会员卡背景
|
||||||
},
|
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
||||||
...{
|
goods_card_color: '#FFD792',
|
||||||
groupby_promotion_color: '#E64136',//活动背景
|
goods_coupon: '#FC5227',
|
||||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
||||||
},
|
goods_btn_color: '#CFAF70',//按钮颜色
|
||||||
...{
|
goods_btn_color_shallow: '#444444',//副按钮颜色
|
||||||
hover_nav_bg_color: '#FF407E',//背景色
|
},
|
||||||
hover_nav_text_color: '#FFFFFF'
|
pintuan: {
|
||||||
},
|
pintuan_label_bg: '#F7B500',
|
||||||
},
|
pintuan_label_color: '#FFFFFF',
|
||||||
'gold': {
|
pintuan_color: '#FA6400',
|
||||||
name: 'gold',
|
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||||
main_color: '#CFAF70',
|
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||||
aux_color: '#444444',
|
},
|
||||||
bg_color: '#CFAF70',//主题背景
|
super_member: {
|
||||||
bg_color_shallow: '#CFAF70',//主题背景渐变浅色
|
super_member_start_bg: '#7c7878',
|
||||||
promotion_color: '#CFAF70',//活动背景
|
super_member_end_bg: '#201a18',
|
||||||
promotion_aux_color: '#444444',//活动背景辅色
|
super_member_start_text_color: '#FFDBA6',
|
||||||
main_color_shallow: '#FFFAF1',//淡背景
|
super_member_end_text_color: '#FFEBCA',
|
||||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
},
|
||||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
bargain: {
|
||||||
...{
|
bargain_promotion_color: '#F0353E',//活动背景
|
||||||
goods_price: 'rgba(252,82,39,1)',//价格
|
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
promotion_tag: '#CFAF70',
|
},
|
||||||
goods_card_bg: '#201A18',//会员卡背景
|
seckill: {
|
||||||
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
seckill_promotion_color: '#F83530',//活动背景
|
||||||
goods_card_color: '#FFD792',
|
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
goods_coupon: '#FC5227',
|
},
|
||||||
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
giftcard: {
|
||||||
goods_btn_color: '#CFAF70',//按钮颜色
|
giftcard_promotion_color: '#FF3369',//活动背景
|
||||||
goods_btn_color_shallow: '#444444',//副按钮颜色
|
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
},
|
},
|
||||||
...{
|
groupby: {
|
||||||
pintuan_label_bg: '#F7B500',
|
groupby_promotion_color: '#E64136',//活动背景
|
||||||
pintuan_label_color: '#FFFFFF',
|
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
pintuan_color: '#FA6400',
|
},
|
||||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
},
|
||||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
'purple': {
|
||||||
},
|
name: 'purple',
|
||||||
...{
|
main_color: '#A253FF',
|
||||||
super_member_start_bg: '#7c7878',
|
aux_color: '#222222',
|
||||||
super_member_end_bg: '#201a18',
|
bg_color: '#A253FF',//主题背景
|
||||||
super_member_start_text_color: '#FFDBA6',
|
bg_color_shallow: '#A253FF',//主题背景渐变浅色
|
||||||
super_member_end_text_color: '#FFEBCA',
|
promotion_color: '#A253FF',//活动背景
|
||||||
},
|
promotion_aux_color: '#222222',//活动背景辅色
|
||||||
...{
|
main_color_shallow: '#F8F3FF',//淡背景
|
||||||
bargain_promotion_color: '#F0353E',//活动背景
|
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||||
},
|
goods_detail: {
|
||||||
...{
|
goods_price: 'rgba(252,82,39,1)',//价格
|
||||||
seckill_promotion_color: '#F83530',//活动背景
|
promotion_tag: '#A253FF',
|
||||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
goods_card_bg: '#201A18',//会员卡背景
|
||||||
},
|
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
||||||
...{
|
goods_card_color: '#FFD792',
|
||||||
giftcard_promotion_color: '#FF3369',//活动背景
|
goods_coupon: '#FC5227',
|
||||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
||||||
},
|
goods_btn_color: '#A253FF',//按钮颜色
|
||||||
...{
|
goods_btn_color_shallow: '#222222',//副按钮颜色
|
||||||
groupby_promotion_color: '#E64136',//活动背景
|
},
|
||||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
pintuan: {
|
||||||
},
|
pintuan_label_bg: '#F7B500',
|
||||||
...{
|
pintuan_label_color: '#FFFFFF',
|
||||||
hover_nav_bg_color: '#CFAF70',//背景色
|
pintuan_color: '#FA6400',
|
||||||
hover_nav_text_color: '#FFFFFF'
|
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||||
},
|
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||||
},
|
},
|
||||||
'purple': {
|
super_member: {
|
||||||
name: 'purple',
|
super_member_start_bg: '#7c7878',
|
||||||
main_color: '#A253FF',
|
super_member_end_bg: '#201a18',
|
||||||
aux_color: '#222222',
|
super_member_start_text_color: '#FFDBA6',
|
||||||
bg_color: '#A253FF',//主题背景
|
super_member_end_text_color: '#FFEBCA',
|
||||||
bg_color_shallow: '#A253FF',//主题背景渐变浅色
|
},
|
||||||
promotion_color: '#A253FF',//活动背景
|
bargain: {
|
||||||
promotion_aux_color: '#222222',//活动背景辅色
|
bargain_promotion_color: '#F0353E',//活动背景
|
||||||
main_color_shallow: '#F8F3FF',//淡背景
|
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
},
|
||||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
seckill: {
|
||||||
...{
|
seckill_promotion_color: '#F83530',//活动背景
|
||||||
goods_price: 'rgba(252,82,39,1)',//价格
|
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
promotion_tag: '#A253FF',
|
},
|
||||||
goods_card_bg: '#201A18',//会员卡背景
|
giftcard: {
|
||||||
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
giftcard_promotion_color: '#FF3369',//活动背景
|
||||||
goods_card_color: '#FFD792',
|
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
goods_coupon: '#FC5227',
|
},
|
||||||
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
groupby: {
|
||||||
goods_btn_color: '#A253FF',//按钮颜色
|
groupby_promotion_color: '#E64136',//活动背景
|
||||||
goods_btn_color_shallow: '#222222',//副按钮颜色
|
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
},
|
},
|
||||||
...{
|
},
|
||||||
pintuan_label_bg: '#F7B500',
|
'yellow': {
|
||||||
pintuan_label_color: '#FFFFFF',
|
name: 'yellow',
|
||||||
pintuan_color: '#FA6400',
|
main_color: '#FFD009',
|
||||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
aux_color: '#1D262E',
|
||||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
bg_color: '#FFD009',//主题背景
|
||||||
},
|
bg_color_shallow: '#FFD009',//主题背景渐变浅色
|
||||||
...{
|
promotion_color: '#FFD009',//活动背景
|
||||||
super_member_start_bg: '#7c7878',
|
promotion_aux_color: '#1D262E',//活动背景辅色
|
||||||
super_member_end_bg: '#201a18',
|
main_color_shallow: '#FFFBEF',//淡背景
|
||||||
super_member_start_text_color: '#FFDBA6',
|
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||||
super_member_end_text_color: '#FFEBCA',
|
btn_text_color: '#303133',//按钮文字颜色
|
||||||
},
|
goods_detail: {
|
||||||
...{
|
goods_price: 'rgba(252,82,39,1)',//价格
|
||||||
bargain_promotion_color: '#F0353E',//活动背景
|
promotion_tag: '#FFD009',
|
||||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
goods_card_bg: '#201A18',//会员卡背景
|
||||||
},
|
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
||||||
...{
|
goods_card_color: '#FFD792',
|
||||||
seckill_promotion_color: '#F83530',//活动背景
|
goods_coupon: '#FC5227',
|
||||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
||||||
},
|
goods_btn_color: '#FFD009',//按钮颜色
|
||||||
...{
|
goods_btn_color_shallow: '#1D262E',//副按钮颜色
|
||||||
giftcard_promotion_color: '#FF3369',//活动背景
|
},
|
||||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
pintuan: {
|
||||||
},
|
pintuan_label_bg: '#F7B500',
|
||||||
...{
|
pintuan_label_color: '#FFFFFF',
|
||||||
groupby_promotion_color: '#E64136',//活动背景
|
pintuan_color: '#FA6400',
|
||||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||||
},
|
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||||
...{
|
},
|
||||||
hover_nav_bg_color: '#A253FF',//背景色
|
super_member: {
|
||||||
hover_nav_text_color: '#FFFFFF'
|
super_member_start_bg: '#7c7878',
|
||||||
},
|
super_member_end_bg: '#201a18',
|
||||||
},
|
super_member_start_text_color: '#FFDBA6',
|
||||||
'yellow': {
|
super_member_end_text_color: '#FFEBCA',
|
||||||
name: 'yellow',
|
},
|
||||||
main_color: '#FFD009',
|
bargain: {
|
||||||
aux_color: '#1D262E',
|
bargain_promotion_color: '#F0353E',//活动背景
|
||||||
bg_color: '#FFD009',//主题背景
|
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
bg_color_shallow: '#FFD009',//主题背景渐变浅色
|
},
|
||||||
promotion_color: '#FFD009',//活动背景
|
seckill: {
|
||||||
promotion_aux_color: '#1D262E',//活动背景辅色
|
seckill_promotion_color: '#F83530',//活动背景
|
||||||
main_color_shallow: '#FFFBEF',//淡背景
|
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
},
|
||||||
btn_text_color: '#303133',//按钮文字颜色
|
giftcard: {
|
||||||
...{
|
giftcard_promotion_color: '#FF3369',//活动背景
|
||||||
goods_price: 'rgba(252,82,39,1)',//价格
|
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
promotion_tag: '#FFD009',
|
},
|
||||||
goods_card_bg: '#201A18',//会员卡背景
|
groupby: {
|
||||||
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
groupby_promotion_color: '#E64136',//活动背景
|
||||||
goods_card_color: '#FFD792',
|
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
goods_coupon: '#FC5227',
|
},
|
||||||
goods_cart_num_corner: '#FC5227',//购物车数量角标
|
},
|
||||||
goods_btn_color: '#FFD009',//按钮颜色
|
'black': {
|
||||||
goods_btn_color_shallow: '#1D262E',//副按钮颜色
|
name: 'black',
|
||||||
},
|
main_color: '#222222',
|
||||||
...{
|
aux_color: '#FFFFFF',
|
||||||
pintuan_label_bg: '#F7B500',
|
bg_color: '#222222',//主题背景
|
||||||
pintuan_label_color: '#FFFFFF',
|
bg_color_shallow: '#333333',//主题背景渐变浅色
|
||||||
pintuan_color: '#FA6400',
|
promotion_color: '#222222',//活动背景
|
||||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
promotion_aux_color: '#FA8B00',//活动背景辅色
|
||||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
main_color_shallow: '#efefef',//淡背景
|
||||||
},
|
price_color: 'rgba(255,0,0,1)',//价格颜色
|
||||||
...{
|
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||||
super_member_start_bg: '#7c7878',
|
goods_detail: {
|
||||||
super_member_end_bg: '#201a18',
|
goods_price: 'rgba(255,0,0,1)',//价格
|
||||||
super_member_start_text_color: '#FFDBA6',
|
promotion_tag: '#222222',
|
||||||
super_member_end_text_color: '#FFEBCA',
|
goods_card_bg: '#201A18',//会员卡背景
|
||||||
},
|
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
||||||
...{
|
goods_card_color: '#FFD792',
|
||||||
bargain_promotion_color: '#F0353E',//活动背景
|
goods_coupon: '#222222',
|
||||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
goods_cart_num_corner: '#FF0000',//购物车数量角标
|
||||||
},
|
goods_btn_color: '#222222',//按钮颜色
|
||||||
...{
|
goods_btn_color_shallow: '#FA8B00',//副按钮颜色
|
||||||
seckill_promotion_color: '#F83530',//活动背景
|
},
|
||||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
pintuan: {
|
||||||
},
|
pintuan_label_bg: '#F7B500',
|
||||||
...{
|
pintuan_label_color: '#FFFFFF',
|
||||||
giftcard_promotion_color: '#FF3369',//活动背景
|
pintuan_color: '#FA6400',
|
||||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||||
},
|
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||||
...{
|
},
|
||||||
groupby_promotion_color: '#E64136',//活动背景
|
super_member: {
|
||||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
super_member_start_bg: '#fadcb5',
|
||||||
},
|
super_member_end_bg: '#f6bd74',
|
||||||
...{
|
super_member_start_text_color: '#ab6126',
|
||||||
hover_nav_bg_color: '#FFD009',//背景色
|
super_member_end_text_color: '#d19336',
|
||||||
hover_nav_text_color: '#303133'
|
},
|
||||||
},
|
bargain: {
|
||||||
},
|
bargain_promotion_color: '#F0353E',//活动背景
|
||||||
'black': {
|
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
name: 'black',
|
},
|
||||||
main_color: '#222222',
|
seckill: {
|
||||||
aux_color: '#FFFFFF',
|
seckill_promotion_color: '#F83530',//活动背景
|
||||||
bg_color: '#222222',//主题背景
|
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||||
bg_color_shallow: '#333333',//主题背景渐变浅色
|
},
|
||||||
promotion_color: '#222222',//活动背景
|
giftcard: {
|
||||||
promotion_aux_color: '#FA8B00',//活动背景辅色
|
giftcard_promotion_color: '#FF3369',//活动背景
|
||||||
main_color_shallow: '#efefef',//淡背景
|
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
price_color: 'rgba(255,0,0,1)',//价格颜色
|
},
|
||||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
groupby: {
|
||||||
...{
|
groupby_promotion_color: '#E64136',//活动背景
|
||||||
goods_price: 'rgba(255,0,0,1)',//价格
|
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||||
promotion_tag: '#222222',
|
},
|
||||||
goods_card_bg: '#201A18',//会员卡背景
|
}
|
||||||
goods_card_bg_shallow: '#7C7878',//会员卡背景浅色
|
}
|
||||||
goods_card_color: '#FFD792',
|
|
||||||
goods_coupon: '#222222',
|
|
||||||
goods_cart_num_corner: '#FF0000',//购物车数量角标
|
|
||||||
goods_btn_color: '#222222',//按钮颜色
|
|
||||||
goods_btn_color_shallow: '#FA8B00',//副按钮颜色
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
pintuan_label_bg: '#F7B500',
|
|
||||||
pintuan_label_color: '#FFFFFF',
|
|
||||||
pintuan_color: '#FA6400',
|
|
||||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
|
||||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
super_member_start_bg: '#fadcb5',
|
|
||||||
super_member_end_bg: '#f6bd74',
|
|
||||||
super_member_start_text_color: '#ab6126',
|
|
||||||
super_member_end_text_color: '#d19336',
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
bargain_promotion_color: '#F0353E',//活动背景
|
|
||||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
seckill_promotion_color: '#F83530',//活动背景
|
|
||||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
giftcard_promotion_color: '#FF3369',//活动背景
|
|
||||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
groupby_promotion_color: '#E64136',//活动背景
|
|
||||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
|
||||||
},
|
|
||||||
...{
|
|
||||||
hover_nav_bg_color: '#222222',//背景色
|
|
||||||
hover_nav_text_color: '#FFFFFF'
|
|
||||||
},
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
2402
common/js/util.js
2402
common/js/util.js
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||||
}
|
}
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,318 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view data-component-name="diy-bottom-nav" v-if="tabBarList && tabBarList.list">
|
|
||||||
<view class="tab-bar" :style="{ backgroundColor: tabBarList.backgroundColor }">
|
|
||||||
<view class="tabbar-border"></view>
|
|
||||||
<view class="item" v-for="(item, index) in tabBarList.list" :key="item.id" @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, checkTabBarActive } from '@/common/js/util.js'
|
|
||||||
import DiyMinx from './minx.js'
|
|
||||||
// 底部导航栏
|
|
||||||
export default {
|
|
||||||
name: 'diy-bottom-nav',
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
name: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mixins: [DiyMinx],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lang: uni.getStorageSync("lang"),
|
|
||||||
currentRoute: '', //当前页面路径
|
|
||||||
jumpFlag: true, //是否可以跳转,防止重复点击
|
|
||||||
cartAnimation: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.updateCurrentRoute();
|
|
||||||
this.$nextTick(() => {
|
|
||||||
if (!this.$store.state.cartPosition) {
|
|
||||||
let query = uni.createSelectorQuery().in(this);
|
|
||||||
query.select('#tabbarCart')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
if (data) this.$store.commit('setCartPosition', data);
|
|
||||||
}).exec();
|
|
||||||
|
|
||||||
query.select('.tab-bar')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
if (data) this.$store.commit('setTabBarHeight', data.height +
|
|
||||||
'px');
|
|
||||||
}).exec();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 监听页面显示事件,更新当前路由
|
|
||||||
this.$on('hook:onShow', () => {
|
|
||||||
this.updateCurrentRoute();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
cartChange() {
|
|
||||||
return this.$store.state.cartChange;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
cartChange: function (nval, oval) {
|
|
||||||
if (nval > oval) {
|
|
||||||
let animation = uni.createAnimation({
|
|
||||||
duration: 200,
|
|
||||||
timingFunction: 'ease'
|
|
||||||
});
|
|
||||||
animation.scale(1.2).step();
|
|
||||||
this.cartAnimation = animation.export();
|
|
||||||
setTimeout(() => {
|
|
||||||
animation.scale(1).step();
|
|
||||||
this.cartAnimation = animation.export();
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 更新当前路由
|
|
||||||
updateCurrentRoute() {
|
|
||||||
let currentPage = getCurrentPages()[getCurrentPages().length - 1];
|
|
||||||
if (currentPage && currentPage.route) {
|
|
||||||
this.currentRoute = currentPage.route;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
redirectTo(link) {
|
|
||||||
this.$emit('callback');
|
|
||||||
this.$util.diyRedirectTo(link);
|
|
||||||
},
|
|
||||||
verify(link) {
|
|
||||||
if (link == null || link == '' || !link.wap_url) return false;
|
|
||||||
|
|
||||||
// 标准化路径格式,确保比较的一致性
|
|
||||||
let currentPageRoute = this.currentRoute ? '/' + this.currentRoute : '';
|
|
||||||
let linkUrl = link.wap_url;
|
|
||||||
|
|
||||||
// 首页特殊处理
|
|
||||||
if (linkUrl === this.$util.INDEX_PAGE_URL && this.name === 'DIY_VIEW_INDEX') {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 精确匹配当前路径
|
|
||||||
if (adaptSubpackageUrl(linkUrl) === currentPageRoute) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
return checkTabBarActive(linkUrl, currentPageRoute);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.placeholder {
|
|
||||||
height: 112rpx;
|
|
||||||
|
|
||||||
&.bluge {
|
|
||||||
height: 180rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.safe-area {
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-bar {
|
|
||||||
background-color: #fff;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 998;
|
|
||||||
display: flex;
|
|
||||||
border-top: 2rpx solid #f5f5f5;
|
|
||||||
padding-bottom: 0;
|
|
||||||
padding-bottom: constant(safe-area-inset-bottom);
|
|
||||||
padding-bottom: env(safe-area-inset-bottom);
|
|
||||||
|
|
||||||
.tabbar-border {
|
|
||||||
background-color: rgba(255, 255, 255, 0.329412);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 2rpx;
|
|
||||||
-webkit-transform: scaleY(0.5);
|
|
||||||
transform: scaleY(0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
flex: 1;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-bottom: 10rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.bd {
|
|
||||||
position: relative;
|
|
||||||
height: 100rpx;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 10rpx;
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
font-size: 40rpx;
|
|
||||||
line-height: 40rpx;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
>view {
|
|
||||||
height: inherit;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bar-icon {
|
|
||||||
font-size: 42rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 1;
|
|
||||||
margin-top: 12rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.bulge {
|
|
||||||
.bd {
|
|
||||||
position: relative;
|
|
||||||
height: 100rpx;
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-top: -60rpx;
|
|
||||||
margin-bottom: 4rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
width: 100rpx;
|
|
||||||
height: 102rpx;
|
|
||||||
padding: 10rpx;
|
|
||||||
border-top: 2rpx solid #f5f5f5;
|
|
||||||
background-color: #fff;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 24rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
line-height: 40rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cart-count-mark {
|
|
||||||
position: absolute;
|
|
||||||
top: -8rpx;
|
|
||||||
right: -18rpx;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx !important;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: #fff;
|
|
||||||
padding: 6rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
z-index: 99;
|
|
||||||
|
|
||||||
&.max {
|
|
||||||
width: 40rpx;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
right: -28rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-bar-placeholder {
|
|
||||||
padding-bottom: calc(constant(safe-area-inset-bottom) + 112rpx);
|
|
||||||
padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,166 +0,0 @@
|
|||||||
<template>
|
|
||||||
<x-skeleton data-component-name="diy-goods-brand" type="waterfall" :loading="loading" :configs="skeletonConfig">
|
|
||||||
<view :class="['brand-wrap', value.ornament.type]" :style="warpCss">
|
|
||||||
<view :class="[value.style]">
|
|
||||||
<view class="title-wrap" v-show="value.title"
|
|
||||||
:style="{ color: value.textColor, fontWeight: value.fontWeight ? 'bold' : '' }">{{ value.title }}
|
|
||||||
</view>
|
|
||||||
<view class="ul-wrap">
|
|
||||||
<view class="li-item" v-for="(item, index) in list" :key="index">
|
|
||||||
<image class="brand-pic" :src="$util.img(item.image_url)" mode="aspectFit"
|
|
||||||
@click="handlerClick(item)" @tap="handlerClick(item)" @error="imgError(index)"
|
|
||||||
:style="itemCss" />
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</x-skeleton>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 商品品牌
|
|
||||||
|
|
||||||
import DiyMinx from './minx.js'
|
|
||||||
// 自定义商品品牌展示
|
|
||||||
export default {
|
|
||||||
name: 'diy-goods-brand',
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Object
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
list: [],
|
|
||||||
loading: true,
|
|
||||||
skeletonConfig: {
|
|
||||||
gridRows: 2,
|
|
||||||
gridColumns: 4,
|
|
||||||
gridRowsGap: '20rpx',
|
|
||||||
headWidth: '120rpx',
|
|
||||||
headHeight: '120rpx',
|
|
||||||
textShow: false
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.getBrandList();
|
|
||||||
},
|
|
||||||
mixins: [DiyMinx],
|
|
||||||
watch: {
|
|
||||||
// 组件刷新监听
|
|
||||||
componentRefresh: function (nval) {
|
|
||||||
this.getBrandList();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
warpCss() {
|
|
||||||
var obj = '';
|
|
||||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
|
||||||
if (this.value.componentAngle == 'round') {
|
|
||||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
|
||||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
|
||||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
|
||||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
|
||||||
}
|
|
||||||
if (this.value.ornament.type == 'shadow') {
|
|
||||||
obj += 'box-shadow:' + '0 0 10rpx ' + this.value.ornament.color;
|
|
||||||
}
|
|
||||||
if (this.value.ornament.type == 'stroke') {
|
|
||||||
obj += 'border:' + '2rpx solid ' + this.value.ornament.color;
|
|
||||||
}
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
// 子项样式
|
|
||||||
itemCss() {
|
|
||||||
var obj = '';
|
|
||||||
if (this.value.elementAngle == 'round') {
|
|
||||||
obj += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
|
||||||
obj += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
|
||||||
obj += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
|
||||||
obj += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
|
||||||
}
|
|
||||||
return obj;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getBrandList() {
|
|
||||||
var data = {
|
|
||||||
page: 1,
|
|
||||||
page_size: this.value.count
|
|
||||||
};
|
|
||||||
if (this.value.sources == 'diy') {
|
|
||||||
data.page_size = 0;
|
|
||||||
data.brand_id_arr = this.value.brandIds.toString();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$api.sendRequest({
|
|
||||||
url: '/api/goodsbrand/page',
|
|
||||||
data: data,
|
|
||||||
success: res => {
|
|
||||||
if (res.code == 0 && res.data) {
|
|
||||||
let data = res.data;
|
|
||||||
this.list = data.list;
|
|
||||||
}
|
|
||||||
this.loading = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
toDetail(item) {
|
|
||||||
this.$util.redirectTo('/pages_goods/list', {
|
|
||||||
brand_id: item.brand_id
|
|
||||||
});
|
|
||||||
},
|
|
||||||
imgError(index) {
|
|
||||||
if (this.list[index]) this.list[index].image_url = this.$util.getDefaultImage().goods;
|
|
||||||
},
|
|
||||||
async handlerClick(item) {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'goods-brand-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
this.toDetail(item);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.brand-wrap {
|
|
||||||
&.shadow {
|
|
||||||
margin-left: 8rpx;
|
|
||||||
margin-right: 8rpx;
|
|
||||||
margin-top: 8rpx;
|
|
||||||
margin-bottom: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.style-1 {
|
|
||||||
.title-wrap {
|
|
||||||
text-align: center;
|
|
||||||
padding: 20rpx 0 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ul-wrap {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
padding: 20rpx;
|
|
||||||
|
|
||||||
.li-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: calc(100% / 4 - 20rpx) !important;
|
|
||||||
height: 124rpx;
|
|
||||||
margin: 10rpx;
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
.brand-pic {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
|
||||||
@@ -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() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
|
|
||||||
this.$refs.login.open(link.wap_url);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log(link)
|
|
||||||
this.$util.diyRedirectTo(link);
|
|
||||||
},
|
|
||||||
swiperChange(e) {
|
|
||||||
this.swiperCurrent = e.detail.current
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
/* 固定显示 */
|
|
||||||
.graphic-nav.fixed-layout>>>.uni-scroll-view-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 单行滑动 */
|
|
||||||
.graphic-nav.singleSlide>>>.uni-scroll-view-content {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphic-nav.pageSlide>>>.uni-swiper-dots-horizontal {
|
|
||||||
bottom: 0rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphic-nav.pageSlide.straightLine>>>.uni-swiper-dot {
|
|
||||||
width: 30rpx;
|
|
||||||
border-radius: 0;
|
|
||||||
height: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphic-nav.pageSlide.circle>>>.uni-swiper-dot {
|
|
||||||
width: 14rpx;
|
|
||||||
height: 14rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss">
|
|
||||||
.graphic-nav {
|
|
||||||
padding: 16rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&.singleSlide {
|
|
||||||
.graphic-nav-item {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.pageSlide {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.graphic-nav-wrap {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphic-nav-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 14rpx 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.graphic-text {
|
|
||||||
padding-top: 12rpx;
|
|
||||||
line-height: 1.5;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
&.alone {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.text {
|
|
||||||
|
|
||||||
.graphic-text {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.graphic-img {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100rpx;
|
|
||||||
height: 100rpx;
|
|
||||||
font-size: 90rpx;
|
|
||||||
|
|
||||||
.tag {
|
|
||||||
position: absolute;
|
|
||||||
top: -10rpx;
|
|
||||||
right: -24rpx;
|
|
||||||
color: #fff;
|
|
||||||
border-radius: 24rpx;
|
|
||||||
border-bottom-left-radius: 0;
|
|
||||||
transform: scale(0.8);
|
|
||||||
padding: 8rpx 16rpx;
|
|
||||||
line-height: 1;
|
|
||||||
font-size: 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
font-size: 50rpx;
|
|
||||||
color: $color-sub;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.swiper-dot-box {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: -20rpx;
|
|
||||||
padding-bottom: 8rpx;
|
|
||||||
|
|
||||||
.swiper-dot {
|
|
||||||
background-color: rgba(0, 0, 0, .3);
|
|
||||||
margin: 8rpx;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: rgba(0, 0, 0, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
&.straightLine {
|
|
||||||
.swiper-dot {
|
|
||||||
width: 30rpx;
|
|
||||||
border-radius: 0;
|
|
||||||
height: 8rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.circle {
|
|
||||||
.swiper-dot {
|
|
||||||
width: 15rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 15rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,863 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view data-component-name="diy-index-page">
|
|
||||||
<view class="bg" :style="warpCss">
|
|
||||||
<view class="index-page-content">
|
|
||||||
<view class="nav-top-category" :style="categoryCss">
|
|
||||||
<scroll-view v-if="value" scroll-with-animation class="diyIndex" scroll-x="true"
|
|
||||||
:scroll-into-view="'a' + pageIndex"
|
|
||||||
:style="{ background: value.backgroundColor ? value.backgroundColor : '', width: 'calc(100% - 48rpx)' }"
|
|
||||||
@touchmove.stop>
|
|
||||||
<view class="item" :id="'a' + index" v-for="(item, index) in cateList" :key="index"
|
|
||||||
@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 DiyMinx from './minx.js'
|
|
||||||
export default {
|
|
||||||
name: 'diy-index-page',
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Object
|
|
||||||
},
|
|
||||||
bgUrl: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
scrollTop: {
|
|
||||||
type: [String, Number],
|
|
||||||
default: '0'
|
|
||||||
},
|
|
||||||
diyGlobal: {
|
|
||||||
type: Object
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mixins: [DiyMinx],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pageIndex: 0, //当前选中分类id
|
|
||||||
cateList: [{
|
|
||||||
//header分类
|
|
||||||
category_name: '首页'
|
|
||||||
}],
|
|
||||||
twoCategorylist: [], //二级分类
|
|
||||||
twoCategorylistId: 0, //二级分类所在的swiper
|
|
||||||
goodsList: {},
|
|
||||||
isloading: true,
|
|
||||||
top: 0,
|
|
||||||
isUnfold: true, //是否展开菜单
|
|
||||||
moduleHeight: '' //组件高度
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
warpCss() {
|
|
||||||
var obj = '';
|
|
||||||
obj += (this.bgUrl ? 'background:' + 'url(' + this.$util.img(this.bgUrl) + ') no-repeat 0 0/100%' : '') + ';';
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
categoryCss() {
|
|
||||||
var obj = '';
|
|
||||||
obj += 'top:' + this.fixedTop + ';';
|
|
||||||
// obj += 'background-color:' + (this.value.componentBgColor || this.value.pageBgColor) + ';';
|
|
||||||
obj += 'background-color:' + this.topNavColor + ';';
|
|
||||||
return obj;
|
|
||||||
},
|
|
||||||
maxPage() {
|
|
||||||
let num = 0;
|
|
||||||
if (this.twoCategorylist && this.twoCategorylist.length) {
|
|
||||||
num = Math.ceil(this.twoCategorylist.length / 10);
|
|
||||||
}
|
|
||||||
return num;
|
|
||||||
},
|
|
||||||
type() {
|
|
||||||
if (this.value) {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
topNavColor() {
|
|
||||||
var color = this.value.componentBgColor || this.value.pageBgColor;
|
|
||||||
if (this.diyGlobal.topNavBg && this.scrollTop > 20) color = this.diyGlobal.topNavColor;
|
|
||||||
return color;
|
|
||||||
},
|
|
||||||
fixedTop() {
|
|
||||||
let diyPositionObj = this.$store.state.diyGroupPositionObj;
|
|
||||||
let data = 0;
|
|
||||||
if (diyPositionObj.diySearch && diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
|
|
||||||
if (diyPositionObj.diySearch.moduleIndex > diyPositionObj.diyIndexPage.moduleIndex) data =
|
|
||||||
diyPositionObj.nsNavbar.originalVal + 'px';
|
|
||||||
else data = diyPositionObj.nsNavbar.originalVal + diyPositionObj.diySearch.originalVal + 'px';
|
|
||||||
} else if (diyPositionObj.diyIndexPage && diyPositionObj.nsNavbar) {
|
|
||||||
data = diyPositionObj.nsNavbar.originalVal + 'px';
|
|
||||||
}
|
|
||||||
return data;
|
|
||||||
},
|
|
||||||
// 分类导航展开菜单的位置
|
|
||||||
uniPopTop() {
|
|
||||||
let diyPositionObj = this.$store.state.diyGroupPositionObj;
|
|
||||||
let data = '0';
|
|
||||||
|
|
||||||
if (this.fixedTop && diyPositionObj.diyIndexPage)
|
|
||||||
data = Number.parseFloat(this.fixedTop) + diyPositionObj.diyIndexPage.originalVal + 'px';
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
type(newVal, oldVal) {
|
|
||||||
if (newVal) {
|
|
||||||
this.getCategoryList();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getCategoryList();
|
|
||||||
setTimeout(() => {
|
|
||||||
// 获取组件的高度,默认高度为45(45是在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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view data-component-name="diy-listmenu" class="diy-listmenu" :style="style">
|
|
||||||
<view class="fui-cell-group">
|
|
||||||
<!-- <image mode="widthFix" style="width: 100%;" :src="$util.img(item.imageUrl)"></image> -->
|
|
||||||
|
|
||||||
<view v-for="(item, index) in value.list" @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() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
|
|
||||||
this.$refs?.login?.open(link.wap_url);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$util.diyRedirectTo(link);
|
|
||||||
},
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.img-cell {
|
|
||||||
padding: 0 16rpx !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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(this.$util.INDEX_PAGE_URL);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.giveLikeFlag) return false;
|
|
||||||
this.giveLikeFlag = true;
|
|
||||||
|
|
||||||
var url = this.dataList[index].is_dianzan == 1 ? '/notes/api/record/delete' : '/notes/api/record/add';
|
|
||||||
this.$api.sendRequest({
|
|
||||||
url: url,
|
|
||||||
data: {
|
|
||||||
note_id: noteId
|
|
||||||
},
|
|
||||||
success: res => {
|
|
||||||
this.giveLikeFlag = false;
|
|
||||||
if (res.code == 0 && res.data > 0) {
|
|
||||||
if (this.noteType != 'goods_item')
|
|
||||||
this.dataList[index].dianzan_num = this.dataList[index].is_dianzan == 1 ? this.dataList[index].dianzan_num - 1 : this.dataList[index].dianzan_num + 1;
|
|
||||||
else {
|
|
||||||
this.dataList[index].dianzan_num = this.dataList[index].is_dianzan == 1 ? this.dataList[index].dianzan_num - 1 : this.dataList[index].dianzan_num + 1;
|
|
||||||
}
|
|
||||||
this.dataList[index].is_dianzan = this.dataList[index].is_dianzan == 1 ? 0 : 1;
|
|
||||||
} else {
|
|
||||||
this.$util.showToast({
|
|
||||||
title: res.message
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
imageError(index) {
|
|
||||||
this.dataList[index].img = this.$util.getDefaultImage().goods;
|
|
||||||
this.$forceUpdate();
|
|
||||||
},
|
|
||||||
async handlerClick(item) {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'notes-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
this.toDetail(item.note_id);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
scroll-view ::-webkit-scrollbar {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
background-color: transparent;
|
|
||||||
touch-action: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.diy-notes {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.diy-notes-top {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.notes-title {
|
|
||||||
width: 70%;
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-more {
|
|
||||||
font-size: $font-size-tag;
|
|
||||||
color: #858585;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-more::after {
|
|
||||||
font-family: 'iconfont';
|
|
||||||
content: '\e6a3';
|
|
||||||
font-size: $font-size-tag;
|
|
||||||
line-height: 1;
|
|
||||||
position: relative;
|
|
||||||
margin-left: 4rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.diy-notes-box {
|
|
||||||
width: 100%;
|
|
||||||
padding: 30rpx 0 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-box-item {
|
|
||||||
width: calc(100% - 8rpx);
|
|
||||||
margin: 0 auto;
|
|
||||||
height: 100%;
|
|
||||||
margin-bottom: 30rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
-moz-box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
|
|
||||||
-webkit-box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
|
|
||||||
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.02);
|
|
||||||
|
|
||||||
.notes-item {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 20rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-img-wrap {
|
|
||||||
position: relative;
|
|
||||||
height: 300rpx;
|
|
||||||
|
|
||||||
.notes-item-image {
|
|
||||||
width: 100%;
|
|
||||||
height: 300rpx;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-label {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
left: 20rpx;
|
|
||||||
bottom: 20rpx;
|
|
||||||
max-width: calc(100vh - 40rpx);
|
|
||||||
background-color: #ffffff;
|
|
||||||
line-height: 36rpx;
|
|
||||||
padding: 0 10rpx 0 4rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-img-wrap-list {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: calc((100% - 40rpx) / 3);
|
|
||||||
height: 210rpx;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
|
|
||||||
&:nth-child(-n + 3) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
width: calc((100% - 40rpx) / 3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-item-con {
|
|
||||||
.notes-title {
|
|
||||||
font-size: 30rpx;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 44rpx;
|
|
||||||
display: -webkit-box;
|
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-line-clamp: 2;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-highlights-list {
|
|
||||||
text {
|
|
||||||
display: inline-block;
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 36rpx;
|
|
||||||
padding: 0 10rpx;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
margin: 0 5rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-intro {
|
|
||||||
margin: 4rpx 0 8rpx;
|
|
||||||
line-height: 40rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
text {
|
|
||||||
float: left;
|
|
||||||
margin-right: 16rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.notes-info {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
|
|
||||||
.notes-num {
|
|
||||||
>text {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: $font-size-tag;
|
|
||||||
color: #969799;
|
|
||||||
|
|
||||||
text.iconfont {
|
|
||||||
font-size: 26rpx;
|
|
||||||
margin-right: 6rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
|
|
||||||
this.$refs.login.open(link.wap_url);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$util.diyRedirectTo(link);
|
|
||||||
},
|
|
||||||
|
|
||||||
async handlerClick(item) {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'picture-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
if (item.link.wap_url) {
|
|
||||||
this.redirectTo(item.link);
|
|
||||||
} else {
|
|
||||||
this.previewImg(item.imageUrl);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss"></style>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -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() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
|
|
||||||
this.$refs.login.open(link.wap_url);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$util.diyRedirectTo(link);
|
|
||||||
},
|
|
||||||
async handlerClick(item) {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'quick-nav-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
this.redirectTo(item.link);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<style>
|
|
||||||
.quick-nav>>>.uni-scroll-view-content {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="scss">
|
|
||||||
.quick-nav {
|
|
||||||
.quick-nav-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 18rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border-radius: 40rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
|
|
||||||
&:first-of-type {
|
|
||||||
padding-left: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-img {
|
|
||||||
margin-right: 6rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
line-height: 1;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 30rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.quick-text {
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -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(/"/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'; // 划分规则,left:左,right:右
|
|
||||||
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>
|
|
||||||
@@ -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(() => {
|
|
||||||
// 获取组件的高度,默认高度为45(45是在375屏幕上的高度)
|
|
||||||
const query = uni.createSelectorQuery();
|
|
||||||
// #ifdef H5
|
|
||||||
let cssSelect = '.page-header .u-navbar';
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
// #ifdef MP
|
|
||||||
let cssSelect = '.page-header >>> .u-navbar';
|
|
||||||
// #endif
|
|
||||||
query
|
|
||||||
.select(cssSelect)
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
if (this.global.navBarSwitch) {
|
|
||||||
this.height = data ? data.height : 45;
|
|
||||||
} else {
|
|
||||||
this.height = data ? data.height : 0;
|
|
||||||
}
|
|
||||||
// 如果存在分类导航组件,则追加该组件的高度
|
|
||||||
if (this.haveTopCategory) {
|
|
||||||
this.height += 49;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.exec();
|
|
||||||
});
|
|
||||||
if (this.value.positionWay == 'fixed') this.navbarPlaceholderHeight();
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.value.positionWay == 'fixed')
|
|
||||||
this.setModuleLocationFn();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
search() {
|
|
||||||
this.$util.redirectTo('/pages_tool/goods/search');
|
|
||||||
},
|
|
||||||
redirectTo(link) {
|
|
||||||
if (link.wap_url) {
|
|
||||||
if (this.$util.getCurrRoute() == this.$util.MEMBER_PAGE_URL && !this.storeToken) {
|
|
||||||
this.$refs.login.open(link.wap_url);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$util.diyRedirectTo(link);
|
|
||||||
},
|
|
||||||
navbarPlaceholderHeight() {
|
|
||||||
let height = 0;
|
|
||||||
setTimeout(() => {
|
|
||||||
const query = uni.createSelectorQuery().in(this);
|
|
||||||
query.select('.diy-search-wrap')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
// 获取搜索框自身高度
|
|
||||||
this.placeholderHeight = data.height;
|
|
||||||
// 通过搜索框自身高度 - 定位模式下的多出的padding-bottom高度
|
|
||||||
if (this.placeholderHeight) this.placeholderHeight -= this.value.margin.bottom;
|
|
||||||
}).exec();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 向vuex中的diyIndexPositionObj增加搜索组件定位位置
|
|
||||||
setModuleLocationFn() {
|
|
||||||
this.$nextTick(() => {
|
|
||||||
const query = uni.createSelectorQuery().in(this);
|
|
||||||
query.select('.diy-search-wrap')
|
|
||||||
.boundingClientRect(data => {
|
|
||||||
let diySearch = {
|
|
||||||
originalVal: data.height || 0, //自身高度 px
|
|
||||||
currVal: 0, //定位高度
|
|
||||||
moduleIndex: this.value.moduleIndex //组件在diy-group的位置
|
|
||||||
};
|
|
||||||
this.moduleHeight = (data.height || 0) + 'px';
|
|
||||||
this.$store.commit('setDiyGroupPositionObj', {
|
|
||||||
'diySearch': diySearch
|
|
||||||
});
|
|
||||||
}).exec();
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async handlerRedirectToClick(link) {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'search-tap', data: link, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
this.redirectTo(link);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async handlerSearchClick(item) {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'search-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
this.search();
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
/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
@@ -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>
|
|
||||||
@@ -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>
|
|
||||||
@@ -1,458 +0,0 @@
|
|||||||
<template>
|
|
||||||
<view :style="componentStyle">
|
|
||||||
<!-- 固定布局模式 -->
|
|
||||||
<view v-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]"
|
|
||||||
style="padding:20rpx;">
|
|
||||||
<view v-for="(item, index) in value.list" :key="index" class="channel-item" @tap="playVideo(item)">
|
|
||||||
<view class="channel-img-wrap">
|
|
||||||
<image class="channel-img" style="border-radius:10rpx;" :src="$util.img(item.coverUrl)"
|
|
||||||
mode="aspectFill" @error="imgError(index)"></image>
|
|
||||||
<view class="channel-play-btn">
|
|
||||||
<image class="play-icon" style="width:30rpx;" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')"
|
|
||||||
mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="channel-stats">
|
|
||||||
<text>{{ item.viewCount }}次观看</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="channel-info-wrap">
|
|
||||||
<view class="channel-name" :style="{
|
|
||||||
'font-size': (value.font.size * 2 + 'rpx') + ';',
|
|
||||||
'font-weight': value.font.weight + ';',
|
|
||||||
'color': value.font.color + ';'
|
|
||||||
}">{{ item.channelName }}</view>
|
|
||||||
<view class="video-title" :style="{
|
|
||||||
'font-size': (value.font.size * 1.8 + 'rpx') + ';',
|
|
||||||
'color': '#666;'
|
|
||||||
}">{{ item.videoTitle }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 其他布局模式 -->
|
|
||||||
<scroll-view v-else :class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
|
|
||||||
:scroll-x="value.showStyle == 'singleSlide'">
|
|
||||||
<view class="uni-scroll-view-content">
|
|
||||||
<view v-for="(item, index) in value.list" :key="index" :class="['channel-nav-item', value.mode]"
|
|
||||||
:style="{ width: (100 / value.rowCount + '%') + ';' }" @tap="playVideo(item)">
|
|
||||||
<view class="channel-img">
|
|
||||||
<image :style="{
|
|
||||||
'max-width': '100%;',
|
|
||||||
'border-radius': '8rpx;'
|
|
||||||
}" :src="$util.img(item.coverUrl)" mode="aspectFill"
|
|
||||||
:show-menu-by-longpress="true"></image>
|
|
||||||
<view class="channel-play-btn">
|
|
||||||
<image class="play-icon" style="width:30rpx;" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')"
|
|
||||||
mode="widthFix"></image>
|
|
||||||
</view>
|
|
||||||
<view class="channel-stats">
|
|
||||||
<text>{{ item.viewCount }}次观看</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="channel-text" :style="{
|
|
||||||
'margin-left': '16rpx;',
|
|
||||||
'font-size': (value.font.size * 2 + 'rpx') + ';',
|
|
||||||
'font-weight': value.font.weight + ';',
|
|
||||||
'color': value.font.color + ';'
|
|
||||||
}">{{ item.videoTitle }}</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</scroll-view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import DiyMinx from './minx.js'
|
|
||||||
export default {
|
|
||||||
name: 'diy-wechat-channel-list',
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mixins: [DiyMinx],
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
pageWidth: '',
|
|
||||||
indicatorDots: false,
|
|
||||||
swiperCurrent: 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// 组件创建时的逻辑
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
componentRefresh(newValue) {
|
|
||||||
// 监听组件刷新
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
componentStyle() {
|
|
||||||
let style = '';
|
|
||||||
style += 'background-color:' + this.value.componentBgColor + ';';
|
|
||||||
|
|
||||||
if (this.value.componentAngle == 'round') {
|
|
||||||
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
|
|
||||||
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
|
|
||||||
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
|
|
||||||
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
|
|
||||||
}
|
|
||||||
|
|
||||||
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
|
|
||||||
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
|
|
||||||
|
|
||||||
return style;
|
|
||||||
},
|
|
||||||
|
|
||||||
swiperHeight() {
|
|
||||||
let height = 0;
|
|
||||||
|
|
||||||
if (this.value.mode == 'graphic') {
|
|
||||||
height = (49 + this.value.imageSize) * this.value.pageCount;
|
|
||||||
} else if (this.value.mode == 'img') {
|
|
||||||
height = (22 + this.value.imageSize) * this.value.pageCount;
|
|
||||||
} else if (this.value.mode == 'text') {
|
|
||||||
height = 43 * this.value.pageCount;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'height:' + (2 * height) + 'rpx';
|
|
||||||
},
|
|
||||||
|
|
||||||
isIndicatorDots() {
|
|
||||||
return this.value.carousel.type != 'hide' &&
|
|
||||||
1 != Math.ceil(this.value.list.length / (this.value.pageCount * this.value.rowCount));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
// 播放视频
|
|
||||||
async playVideo(item) {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'video-play', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
// 检查微信环境
|
|
||||||
if (typeof wx === 'undefined') {
|
|
||||||
console.error('当前环境不是微信小程序');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 检查基础库版本
|
|
||||||
const systemInfo = wx.getSystemInfoSync();
|
|
||||||
const SDKVersion = systemInfo.SDKVersion;
|
|
||||||
const versionCompare = (v1, v2) => {
|
|
||||||
const arr1 = v1.split('.');
|
|
||||||
const arr2 = v2.split('.');
|
|
||||||
for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
|
|
||||||
const num1 = parseInt(arr1[i] || 0);
|
|
||||||
const num2 = parseInt(arr2[i] || 0);
|
|
||||||
if (num1 > num2) return 1;
|
|
||||||
if (num1 < num2) return -1;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
};
|
|
||||||
if (versionCompare(SDKVersion, '2.19.2') < 0) {
|
|
||||||
console.error('当前微信基础库版本过低,需要 2.19.2 或以上版本');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 调用微信视频号播放API
|
|
||||||
if (wx.openChannelsActivity) {
|
|
||||||
wx.openChannelsActivity({
|
|
||||||
feedId: item.feedId,
|
|
||||||
finderUserName: item.finderUserName,
|
|
||||||
success: (res) => {
|
|
||||||
console.log('打开视频号成功', res);
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
console.error('打开视频号失败', err);
|
|
||||||
// 错误码处理
|
|
||||||
switch (err.errCode) {
|
|
||||||
case 40001:
|
|
||||||
console.error('错误:40001,检查主体要求或嵌入式打开的关联关系');
|
|
||||||
break;
|
|
||||||
case 40002:
|
|
||||||
console.error('错误:40002,参数错误,检查 feedId 和 finderUserName');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.error('错误:' + err.errCode + ',' + (err.errMsg || '未知错误'));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error('当前环境不支持微信视频号');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
|
|
||||||
// 图片加载错误处理
|
|
||||||
imgError(index) {
|
|
||||||
// 图片加载失败的处理逻辑
|
|
||||||
console.log('图片加载失败:', index);
|
|
||||||
// 为失败的图片设置默认图片
|
|
||||||
const item = this.value.list[index];
|
|
||||||
if (item) {
|
|
||||||
// 使用默认图片替代加载失败的图片
|
|
||||||
item.coverUrl = 'addon/personnel/shop/view/enterprise/default-video-cover.png';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.channel-list {
|
|
||||||
&.row1-of3 {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.channel-item {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
width: calc(33.3333333% - 14rpx);
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&:nth-child(3n + 3) {
|
|
||||||
width: calc(33.33% - 15rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-of-type(1),
|
|
||||||
&:nth-of-type(2),
|
|
||||||
&:nth-of-type(3) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(3n) {
|
|
||||||
width: calc(33.3333333% - 15rpx);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(3n-1) {
|
|
||||||
margin-left: 20rpx;
|
|
||||||
margin-right: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-img-wrap {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 220rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-play-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 60rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-stats {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
|
|
||||||
padding: 10rpx;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-info-wrap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
padding: 10rpx 0;
|
|
||||||
|
|
||||||
.channel-name {
|
|
||||||
margin-bottom: 4rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-title {
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.row1-of2 {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.channel-item {
|
|
||||||
position: relative;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
width: calc(50% - 10rpx);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&:nth-child(2n) {
|
|
||||||
margin-right: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-of-type(1),
|
|
||||||
&:nth-of-type(2) {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-img-wrap {
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 340rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-play-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 80rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-stats {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
|
|
||||||
padding: 10rpx;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-info-wrap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
flex: 1;
|
|
||||||
padding: 10rpx 0;
|
|
||||||
|
|
||||||
.channel-name {
|
|
||||||
margin-bottom: 4rpx;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-title {
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-nav {
|
|
||||||
padding: 16rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
&.fixed-layout {
|
|
||||||
.uni-scroll-view-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.singleSlide {
|
|
||||||
.uni-scroll-view-content {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-nav-item {
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-nav-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
padding: 14rpx 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.channel-img {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 200rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-play-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 60rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-stats {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
|
|
||||||
padding: 10rpx;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-text {
|
|
||||||
padding-top: 12rpx;
|
|
||||||
line-height: 1.5;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,232 +0,0 @@
|
|||||||
<template>
|
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
|
||||||
<view class="diy-wechat-channel" :style="channelWarpCss">
|
|
||||||
<view class="channel-header" @tap="handlerClick">
|
|
||||||
<image class="channel-avatar" :src="$util.img(value.avatarUrl)" mode="aspectFill"></image>
|
|
||||||
<view class="channel-info">
|
|
||||||
<view class="channel-name">{{ value.channelName }}</view>
|
|
||||||
<view class="channel-follow" v-if="value.showFollow">关注</view>
|
|
||||||
</view>
|
|
||||||
<image class="channel-arrow" :src="$util.img('addon/personnel/shop/view/enterprise/arrow.png')" mode="aspectFill"></image>
|
|
||||||
</view>
|
|
||||||
<!-- 嵌入式视频播放 -->
|
|
||||||
<native-component v-if="value.embedMode && typeof wx !== 'undefined' && wx.canIUse('component.channel-video')">
|
|
||||||
<channel-video
|
|
||||||
:feed-id="value.feedId"
|
|
||||||
:finder-user-name="value.finderUserName"
|
|
||||||
:feed-token="value.feedToken"
|
|
||||||
style="width: 100%; height: 320rpx;">
|
|
||||||
</channel-video>
|
|
||||||
</native-component>
|
|
||||||
<!-- 跳转式视频播放 -->
|
|
||||||
<view v-else class="channel-video" @tap="playVideo">
|
|
||||||
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
|
|
||||||
<view class="video-play-btn">
|
|
||||||
<image class="play-icon" :src="$util.img('addon/personnel/shop/view/enterprise/play.png')" mode="aspectFill"></image>
|
|
||||||
</view>
|
|
||||||
<view class="video-info">
|
|
||||||
<view class="video-title">{{ value.videoTitle }}</view>
|
|
||||||
<view class="video-stats">
|
|
||||||
<text>{{ value.viewCount }}次观看</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<!-- #endif -->
|
|
||||||
</template>
|
|
||||||
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// 微信视频号组件
|
|
||||||
import DiyMinx from './minx.js'
|
|
||||||
export default {
|
|
||||||
name: 'diy-wechat-channel',
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: Object
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {};
|
|
||||||
},
|
|
||||||
created() { },
|
|
||||||
mixins: [DiyMinx],
|
|
||||||
watch: {
|
|
||||||
// 组件刷新监听
|
|
||||||
componentRefresh: function (nval) { }
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
channelWarpCss: 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() {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'channel-tap', data: this.value, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async playVideo() {
|
|
||||||
await this.__$emitEvent({
|
|
||||||
eventName: 'video-play', data: this.value, promiseCallback: (event, handler, awaitedResult) => {
|
|
||||||
if (!awaitedResult) return;
|
|
||||||
// 检查微信环境
|
|
||||||
if (typeof wx === 'undefined') {
|
|
||||||
console.error('当前环境不是微信小程序');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 检查基础库版本
|
|
||||||
const systemInfo = wx.getSystemInfoSync();
|
|
||||||
const SDKVersion = systemInfo.SDKVersion;
|
|
||||||
const versionCompare = (v1, v2) => {
|
|
||||||
const arr1 = v1.split('.');
|
|
||||||
const arr2 = v2.split('.');
|
|
||||||
for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
|
|
||||||
const num1 = parseInt(arr1[i] || 0);
|
|
||||||
const num2 = parseInt(arr2[i] || 0);
|
|
||||||
if (num1 > num2) return 1;
|
|
||||||
if (num1 < num2) return -1;
|
|
||||||
}
|
|
||||||
return 0;
|
|
||||||
};
|
|
||||||
if (versionCompare(SDKVersion, '2.19.2') < 0) {
|
|
||||||
console.error('当前微信基础库版本过低,需要 2.19.2 或以上版本');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 调用微信视频号播放API
|
|
||||||
if (wx.openChannelsActivity) {
|
|
||||||
wx.openChannelsActivity({
|
|
||||||
feedId: this.value.feedId,
|
|
||||||
finderUserName: this.value.finderUserName,
|
|
||||||
success: (res) => {
|
|
||||||
console.log('打开视频号成功', res);
|
|
||||||
},
|
|
||||||
fail: (err) => {
|
|
||||||
console.error('打开视频号失败', err);
|
|
||||||
// 错误码处理
|
|
||||||
switch (err.errCode) {
|
|
||||||
case 40001:
|
|
||||||
console.error('错误:40001,检查主体要求或嵌入式打开的关联关系');
|
|
||||||
break;
|
|
||||||
case 40002:
|
|
||||||
console.error('错误:40002,参数错误,检查 feedId 和 finderUserName');
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
console.error('错误:' + err.errCode + ',' + (err.errMsg || '未知错误'));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
console.error('当前环境不支持微信视频号');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.diy-wechat-channel {
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 12rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 16rpx;
|
|
||||||
border-bottom: 1rpx solid #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-avatar {
|
|
||||||
width: 60rpx;
|
|
||||||
height: 60rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-info {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-name {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 4rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-follow {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #07c160;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-arrow {
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
margin-left: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.channel-video {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-cover {
|
|
||||||
width: 100%;
|
|
||||||
height: 320rpx;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-play-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 80rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
background-color: rgba(0, 0, 0, 0.4);
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.play-icon {
|
|
||||||
width: 40rpx;
|
|
||||||
height: 40rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-info {
|
|
||||||
padding: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-title {
|
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #333;
|
|
||||||
margin-bottom: 8rpx;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-stats {
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #999;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
271
components/ai-chat-message/README.md
Normal file
271
components/ai-chat-message/README.md
Normal 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. 语音输入功能需要用户授权麦克风权限
|
||||||
@@ -357,10 +357,14 @@
|
|||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
import nsLoading from '@/components/ns-loading/ns-loading.vue'
|
||||||
import aiService from '@/common/js/ai-service.js'
|
import aiService from '@/common/js/ai-service.js'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ai-chat-message',
|
name: 'ai-chat-message',
|
||||||
|
components: {
|
||||||
|
nsLoading
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
// 初始消息列表
|
// 初始消息列表
|
||||||
initialMessages: {
|
initialMessages: {
|
||||||
|
|||||||
288
components/ai-chat-message/demo.vue
Normal file
288
components/ai-chat-message/demo.vue
Normal 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>
|
||||||
@@ -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>
|
||||||
@@ -636,8 +701,6 @@
|
|||||||
<script>
|
<script>
|
||||||
import payment from './payment.js';
|
import payment from './payment.js';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'common-payment',
|
name: 'common-payment',
|
||||||
data() {
|
data() {
|
||||||
@@ -657,4 +720,4 @@
|
|||||||
.order-cell .promotion-content {
|
.order-cell .promotion-content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ export default {
|
|||||||
});
|
});
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.$util.redirectTo(this.$util.INDEX_PAGE_URL);
|
this.$util.redirectTo('/pages/index/index');
|
||||||
}, 1000)
|
}, 1000)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -922,7 +922,7 @@ export default {
|
|||||||
payClose() {
|
payClose() {
|
||||||
// 更新购物车数量
|
// 更新购物车数量
|
||||||
this.$store.dispatch('getCartNumber');
|
this.$store.dispatch('getCartNumber');
|
||||||
this.$util.redirectTo('/pages_order/detail', {
|
this.$util.redirectTo('/pages/order/detail', {
|
||||||
order_id: this.$refs.choosePaymentPopup.payInfo.order_id
|
order_id: this.$refs.choosePaymentPopup.payInfo.order_id
|
||||||
}, 'redirectTo');
|
}, 'redirectTo');
|
||||||
},
|
},
|
||||||
|
|||||||
215
components/diy-components/diy-article.vue
Normal file
215
components/diy-components/diy-article.vue
Normal 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>
|
||||||
444
components/diy-components/diy-audio.vue
Normal file
444
components/diy-components/diy-audio.vue
Normal 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>
|
||||||
728
components/diy-components/diy-bargain.vue
Normal file
728
components/diy-components/diy-bargain.vue
Normal 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>
|
||||||
293
components/diy-components/diy-bottom-nav.vue
Normal file
293
components/diy-components/diy-bottom-nav.vue
Normal 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>
|
||||||
1343
components/diy-components/diy-category-item.vue
Normal file
1343
components/diy-components/diy-category-item.vue
Normal file
File diff suppressed because it is too large
Load Diff
1090
components/diy-components/diy-category.vue
Normal file
1090
components/diy-components/diy-category.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||||
1153
components/diy-components/diy-coupon.vue
Normal file
1153
components/diy-components/diy-coupon.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,11 +1,16 @@
|
|||||||
<template>
|
<template>
|
||||||
<view :style="componentStyle" data-component-name="diy-digit">
|
<view :style="componentStyle">
|
||||||
<scroll-view :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
|
<scroll-view
|
||||||
:scroll-x="value.showStyle == 'singleSlide'">
|
:class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
|
||||||
|
:scroll-x="value.showStyle == 'singleSlide'"
|
||||||
|
>
|
||||||
<view class="uni-scroll-view-content">
|
<view class="uni-scroll-view-content">
|
||||||
<view v-for="(item, index) in value.list" :key="index"
|
<view
|
||||||
|
v-for="(item, index) in value.list"
|
||||||
|
:key="index"
|
||||||
:class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']"
|
:class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']"
|
||||||
:style="{ width: (100 / value.rowCount + '%') + ';' }">
|
:style="{ width: (100 / value.rowCount + '%') + ';' }"
|
||||||
|
>
|
||||||
<view style="display:flex;">
|
<view style="display:flex;">
|
||||||
<view :style="{
|
<view :style="{
|
||||||
'line-height': '1.2;',
|
'line-height': '1.2;',
|
||||||
@@ -13,8 +18,14 @@
|
|||||||
'font-weight': '600;',
|
'font-weight': '600;',
|
||||||
'color': value.font.titlecolor + ';'
|
'color': value.font.titlecolor + ';'
|
||||||
}">
|
}">
|
||||||
<uv-count-to :ref="`countTo-${index}`" :autoplay="true" :startVal="30" :endVal="item.title"
|
<uv-count-to
|
||||||
:decimals="getvalue(item.title)" decimal="."></uv-count-to>
|
:ref="`countTo-${index}`"
|
||||||
|
:autoplay="true"
|
||||||
|
:startVal="30"
|
||||||
|
:endVal="item.title"
|
||||||
|
:decimals="getvalue(item.title)"
|
||||||
|
decimal="."
|
||||||
|
></uv-count-to>
|
||||||
<text :style="{
|
<text :style="{
|
||||||
'margin-left': '4rpx;',
|
'margin-left': '4rpx;',
|
||||||
'font-size': (value.font.unitsize * 2 + 'rpx') + ';',
|
'font-size': (value.font.unitsize * 2 + 'rpx') + ';',
|
||||||
@@ -38,17 +49,21 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import DiyMinx from './minx.js'
|
import uvCountTo from '@/components/uv-count-to/uv-count-to.vue'
|
||||||
// 自定义数字展示
|
import nsLogin from '@/components/ns-login/ns-login.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'diy-digit',
|
name: 'diy-digit',
|
||||||
|
components: {
|
||||||
|
uvCountTo,
|
||||||
|
nsLogin
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mixins: [DiyMinx],
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pageWidth: '',
|
pageWidth: '',
|
||||||
@@ -68,17 +83,17 @@ export default {
|
|||||||
componentStyle() {
|
componentStyle() {
|
||||||
let style = '';
|
let style = '';
|
||||||
style += 'background-image:url(' + this.$util.img(this.value.imageUrl) + ');background-size:100% 100%;';
|
style += 'background-image:url(' + this.$util.img(this.value.imageUrl) + ');background-size:100% 100%;';
|
||||||
|
|
||||||
if (this.value.componentAngle == 'round') {
|
if (this.value.componentAngle == 'round') {
|
||||||
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
|
style += 'border-top-left-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
|
||||||
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
|
style += 'border-top-right-radius:' + (2 * this.value.topAroundRadius) + 'rpx;';
|
||||||
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
|
style += 'border-bottom-left-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
|
||||||
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
|
style += 'border-bottom-right-radius:' + (2 * this.value.bottomAroundRadius) + 'rpx;';
|
||||||
}
|
}
|
||||||
|
|
||||||
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
|
style += 'box-shadow:' + (this.value.ornament.type == 'shadow' ? '0 0 10rpx ' + this.value.ornament.color : '') + ';';
|
||||||
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
|
style += 'border:' + (this.value.ornament.type == 'stroke' ? '2rpx solid ' + this.value.ornament.color : '') + ';';
|
||||||
|
|
||||||
return style;
|
return style;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -87,17 +102,17 @@ export default {
|
|||||||
getvalue(value) {
|
getvalue(value) {
|
||||||
return value % 1 !== 0 ? 2 : 0;
|
return value % 1 !== 0 ? 2 : 0;
|
||||||
},
|
},
|
||||||
|
|
||||||
// 页面跳转
|
// 页面跳转
|
||||||
redirectTo(item) {
|
redirectTo(item) {
|
||||||
if (!item.wap_url || this.$util.getCurrRoute() != this.$util.MEMBER_PAGE_URL || this.storeToken) {
|
if (!item.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
this.$util.diyRedirectTo(item);
|
this.$util.diyRedirectTo(item);
|
||||||
} else {
|
} else {
|
||||||
this.$refs.login.open(item.wap_url);
|
this.$refs.login.open(item.wap_url);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// 轮播切换
|
// 轮播切换
|
||||||
swiperChange(event) {
|
swiperChange(event) {
|
||||||
this.swiperCurrent = event.detail.current;
|
this.swiperCurrent = event.detail.current;
|
||||||
@@ -110,31 +125,31 @@ export default {
|
|||||||
.graphic-nav {
|
.graphic-nav {
|
||||||
padding: 16rpx;
|
padding: 16rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
&.fixed-layout {
|
&.fixed-layout {
|
||||||
.uni-scroll-view-content {
|
.uni-scroll-view-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.singleSlide {
|
&.singleSlide {
|
||||||
.uni-scroll-view-content {
|
.uni-scroll-view-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphic-nav-item {
|
.graphic-nav-item {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pageSlide {
|
&.pageSlide {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.uni-swiper-dots-horizontal {
|
.uni-swiper-dots-horizontal {
|
||||||
bottom: 0rpx;
|
bottom: 0rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.straightLine {
|
&.straightLine {
|
||||||
.uni-swiper-dot {
|
.uni-swiper-dot {
|
||||||
width: 30rpx;
|
width: 30rpx;
|
||||||
@@ -142,7 +157,7 @@ export default {
|
|||||||
height: 8rpx;
|
height: 8rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.circle {
|
&.circle {
|
||||||
.uni-swiper-dot {
|
.uni-swiper-dot {
|
||||||
width: 14rpx;
|
width: 14rpx;
|
||||||
@@ -150,21 +165,21 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphic-nav-wrap {
|
.graphic-nav-wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphic-nav-item {
|
.graphic-nav-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 14rpx 0;
|
padding: 14rpx 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
.graphic-text {
|
.graphic-text {
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -172,18 +187,18 @@ export default {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
&.alone {
|
&.alone {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.text {
|
&.text {
|
||||||
.graphic-text {
|
.graphic-text {
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.graphic-img {
|
.graphic-img {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -192,7 +207,7 @@ export default {
|
|||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
height: 100rpx;
|
height: 100rpx;
|
||||||
font-size: 90rpx;
|
font-size: 90rpx;
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -10rpx;
|
top: -10rpx;
|
||||||
@@ -206,14 +221,14 @@ export default {
|
|||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
font-size: 50rpx;
|
font-size: 50rpx;
|
||||||
color: #606266;
|
color: #606266;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.pageSlide {
|
&.pageSlide {
|
||||||
.graphic-nav-item {
|
.graphic-nav-item {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -232,16 +247,16 @@ export default {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-top: -20rpx;
|
margin-top: -20rpx;
|
||||||
padding-bottom: 8rpx;
|
padding-bottom: 8rpx;
|
||||||
|
|
||||||
.swiper-dot {
|
.swiper-dot {
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
margin: 8rpx;
|
margin: 8rpx;
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.straightLine {
|
&.straightLine {
|
||||||
.swiper-dot {
|
.swiper-dot {
|
||||||
width: 30rpx;
|
width: 30rpx;
|
||||||
@@ -249,7 +264,7 @@ export default {
|
|||||||
height: 8rpx;
|
height: 8rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.circle {
|
&.circle {
|
||||||
.swiper-dot {
|
.swiper-dot {
|
||||||
width: 15rpx;
|
width: 15rpx;
|
||||||
@@ -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: [],
|
||||||
@@ -75,7 +72,7 @@ export default {
|
|||||||
this.currentRoute = '/' + currentPage.route;
|
this.currentRoute = '/' + currentPage.route;
|
||||||
if (!this.storeToken) {
|
if (!this.storeToken) {
|
||||||
this.$util.redirectTo(
|
this.$util.redirectTo(
|
||||||
this.$util.LOGIN_PAGE_URL,
|
'/pages_tool/login/login',
|
||||||
{
|
{
|
||||||
back: this.currentRoute
|
back: this.currentRoute
|
||||||
},
|
},
|
||||||
@@ -86,7 +83,7 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
// 组件刷新监听
|
// 组件刷新监听
|
||||||
componentRefresh: function (nval) {
|
componentRefresh: function(nval) {
|
||||||
this.getData();
|
this.getData();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -124,7 +121,7 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
//页面跳转
|
//页面跳转
|
||||||
toDetail(e) {
|
toDetail(e) {
|
||||||
this.$util.redirectTo('/pages_goods/detail', { goods_id: e.goods_id });
|
this.$util.redirectTo('/pages/goods/detail', { goods_id: e.goods_id });
|
||||||
},
|
},
|
||||||
//关注
|
//关注
|
||||||
followGoods(e, index) {
|
followGoods(e, index) {
|
||||||
@@ -215,7 +212,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.diy-fenxiao {}
|
.diy-fenxiao {
|
||||||
|
}
|
||||||
|
|
||||||
// 商品列表单列样式
|
// 商品列表单列样式
|
||||||
.goods-list.row1-of1 {
|
.goods-list.row1-of1 {
|
||||||
@@ -223,11 +221,9 @@ export default {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: 20rpx;
|
margin-bottom: 20rpx;
|
||||||
|
|
||||||
&:last-of-type {
|
&:last-of-type {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.shadow {
|
&.shadow {
|
||||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||||
}
|
}
|
||||||
@@ -236,7 +232,6 @@ export default {
|
|||||||
width: 180rpx;
|
width: 180rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
|
|
||||||
image {
|
image {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@@ -252,11 +247,9 @@ export default {
|
|||||||
.name-wrap {
|
.name-wrap {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
.goods-name {
|
.goods-name {
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
|
||||||
&.multi-hidden {
|
&.multi-hidden {
|
||||||
height: 72rpx;
|
height: 72rpx;
|
||||||
}
|
}
|
||||||
@@ -267,31 +260,25 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.sale {
|
.sale {
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discount-price {
|
.discount-price {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
.price-wrap {
|
.price-wrap {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
font-size: $font-size-tag;
|
font-size: $font-size-tag;
|
||||||
color: $base-color;
|
color: $base-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
font-size: $font-size-toolbar;
|
font-size: $font-size-toolbar;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $base-color;
|
color: $base-color;
|
||||||
@@ -307,7 +294,6 @@ export default {
|
|||||||
font-size: $font-size-activity-tag;
|
font-size: $font-size-activity-tag;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sale-btn {
|
.sale-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20rpx;
|
right: 20rpx;
|
||||||
@@ -327,7 +313,6 @@ export default {
|
|||||||
.goods-list.row1-of2 {
|
.goods-list.row1-of2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.goods-item {
|
.goods-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -335,30 +320,24 @@ export default {
|
|||||||
margin-right: 20rpx;
|
margin-right: 20rpx;
|
||||||
margin-top: 20rpx;
|
margin-top: 20rpx;
|
||||||
width: calc(50% - 10rpx);
|
width: calc(50% - 10rpx);
|
||||||
|
|
||||||
&:nth-child(2n + 2) {
|
&:nth-child(2n + 2) {
|
||||||
width: calc(50% - 11rpx);
|
width: calc(50% - 11rpx);
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(1),
|
&:nth-of-type(1),
|
||||||
&:nth-of-type(2) {
|
&:nth-of-type(2) {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.shadow {
|
&.shadow {
|
||||||
width: calc(50% - 18rpx);
|
width: calc(50% - 18rpx);
|
||||||
|
|
||||||
&:nth-child(2n-1) {
|
&:nth-child(2n-1) {
|
||||||
margin-left: 8rpx;
|
margin-left: 8rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:nth-of-type(1),
|
&:nth-of-type(1),
|
||||||
&:nth-of-type(2) {
|
&:nth-of-type(2) {
|
||||||
margin-top: 8rpx;
|
margin-top: 8rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.goods-img {
|
.goods-img {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -379,11 +358,9 @@ export default {
|
|||||||
|
|
||||||
.name-wrap {
|
.name-wrap {
|
||||||
margin-bottom: 10rpx;
|
margin-bottom: 10rpx;
|
||||||
|
|
||||||
.goods-name {
|
.goods-name {
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
|
|
||||||
&.multi-hidden {
|
&.multi-hidden {
|
||||||
height: 72rpx;
|
height: 72rpx;
|
||||||
}
|
}
|
||||||
@@ -395,30 +372,24 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
.sale {
|
.sale {
|
||||||
font-size: 20rpx;
|
font-size: 20rpx;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.discount-price {
|
.discount-price {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
.price-wrap {
|
.price-wrap {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
||||||
.unit {
|
.unit {
|
||||||
font-size: $font-size-tag;
|
font-size: $font-size-tag;
|
||||||
color: $base-color;
|
color: $base-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price {
|
.price {
|
||||||
font-size: $font-size-toolbar;
|
font-size: $font-size-toolbar;
|
||||||
}
|
}
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: $base-color;
|
color: $base-color;
|
||||||
@@ -434,7 +405,6 @@ export default {
|
|||||||
font-size: $font-size-activity-tag;
|
font-size: $font-size-activity-tag;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sale-btn {
|
.sale-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 20rpx;
|
right: 20rpx;
|
||||||
115
components/diy-components/diy-float-btn.vue
Normal file
115
components/diy-components/diy-float-btn.vue
Normal 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>
|
||||||
34
components/diy-components/diy-follow-official-account.vue
Normal file
34
components/diy-components/diy-follow-official-account.vue
Normal 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>
|
||||||
110
components/diy-components/diy-form.vue
Normal file
110
components/diy-components/diy-form.vue
Normal 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>
|
||||||
171
components/diy-components/diy-goods-brand.vue
Normal file
171
components/diy-components/diy-goods-brand.vue
Normal 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>
|
||||||
1419
components/diy-components/diy-goods-list.vue
Normal file
1419
components/diy-components/diy-goods-list.vue
Normal file
File diff suppressed because it is too large
Load Diff
599
components/diy-components/diy-goods-recommend.vue
Normal file
599
components/diy-components/diy-goods-recommend.vue
Normal 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>
|
||||||
304
components/diy-components/diy-graphic-nav.vue
Normal file
304
components/diy-components/diy-graphic-nav.vue
Normal 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>
|
||||||
@@ -5,34 +5,34 @@
|
|||||||
<!-- 门店展示 -->
|
<!-- 门店展示 -->
|
||||||
<diy-store :value="item"></diy-store>
|
<diy-store :value="item"></diy-store>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Kefu'">
|
<template v-if="item.componentName == 'Kefu'">
|
||||||
<!-- 客服按钮 -->
|
<!-- 客服按钮 -->
|
||||||
<diy-kefu :value="item"></diy-kefu>
|
<diy-kefu :value="item"></diy-kefu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Form'">
|
<template v-if="item.componentName == 'Form'">
|
||||||
<!-- 表单组件 -->
|
<!-- 表单组件 -->
|
||||||
<diy-form :value="item"></diy-form>
|
<diy-form :value="item"></diy-form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<template v-if="addonIsExist.store && item.componentName == 'StoreLabel'">
|
<template v-if="addonIsExist.store && item.componentName == 'StoreLabel'">
|
||||||
<!-- 门店标签 -->
|
<!-- 门店标签 -->
|
||||||
<diy-store-label :value="item"></diy-store-label>
|
<diy-store-label :value="item"></diy-store-label>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Picture'">
|
<template v-if="item.componentName == 'Picture'">
|
||||||
<!-- 单图组组件 -->
|
<!-- 单图组组件 -->
|
||||||
<diy-picture :value="item"></diy-picture>
|
<diy-picture :value="item"></diy-picture>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Listmenu'">
|
<template v-if="item.componentName == 'Listmenu'">
|
||||||
<!-- 列表按钮组件 -->
|
<!-- 列表按钮组件 -->
|
||||||
<diy-listmenu :value="item"></diy-listmenu>
|
<diy-listmenu :value="item"></diy-listmenu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Text'">
|
<template v-if="item.componentName == 'Text'">
|
||||||
<!-- 文本 -->
|
<!-- 文本 -->
|
||||||
<diy-text :value="item"></diy-text>
|
<diy-text :value="item"></diy-text>
|
||||||
@@ -55,8 +55,7 @@
|
|||||||
|
|
||||||
<template v-if="item.componentName == 'Search'">
|
<template v-if="item.componentName == 'Search'">
|
||||||
<!-- 搜索 -->
|
<!-- 搜索 -->
|
||||||
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global"
|
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global" :haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
||||||
:haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'RichText'">
|
<template v-if="item.componentName == 'RichText'">
|
||||||
@@ -86,8 +85,7 @@
|
|||||||
|
|
||||||
<template v-if="item.componentName == 'ManyGoodsList'">
|
<template v-if="item.componentName == 'ManyGoodsList'">
|
||||||
<!-- 多商品组 -->
|
<!-- 多商品组 -->
|
||||||
<diy-many-goods-list :value="item" :global="diyGlobalData.global"
|
<diy-many-goods-list :value="item" :global="diyGlobalData.global" :scrollTop="scrollTop"></diy-many-goods-list>
|
||||||
:scrollTop="scrollTop"></diy-many-goods-list>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'RubikCube'">
|
<template v-if="item.componentName == 'RubikCube'">
|
||||||
@@ -99,8 +97,8 @@
|
|||||||
<!-- 视频 -->
|
<!-- 视频 -->
|
||||||
<diy-video :value="item"></diy-video>
|
<diy-video :value="item"></diy-video>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Seckill' && addonIsExist.seckill">
|
<template v-if="item.componentName == 'Seckill' && addonIsExist.seckill">
|
||||||
@@ -169,7 +167,7 @@
|
|||||||
<!-- 文章 -->
|
<!-- 文章 -->
|
||||||
<diy-article :value="item"></diy-article>
|
<diy-article :value="item"></diy-article>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'MerchList'">
|
<template v-if="item.componentName == 'MerchList'">
|
||||||
<!-- 商户列表 -->
|
<!-- 商户列表 -->
|
||||||
<diy-merch-list :value="item"></diy-merch-list>
|
<diy-merch-list :value="item"></diy-merch-list>
|
||||||
@@ -204,63 +202,20 @@
|
|||||||
<!-- 关注公众号 -->
|
<!-- 关注公众号 -->
|
||||||
<diy-follow-official-account :value="item"></diy-follow-official-account>
|
<diy-follow-official-account :value="item"></diy-follow-official-account>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Map'">
|
<template v-if="item.componentName == 'Map'">
|
||||||
<!-- 地图组件 -->
|
<!-- 地图组件 -->
|
||||||
<diy-map :value="item"></diy-map>
|
<diy-map :value="item"></diy-map>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Audio'">
|
<template v-if="item.componentName == 'Audio'">
|
||||||
<!-- 音频 -->
|
<!-- 音频 -->
|
||||||
<diy-audio :value="item"></diy-audio>
|
<diy-audio :value="item"></diy-audio>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-if="item.componentName == 'ImageNav'">
|
|
||||||
<!-- 图片导航 -->
|
|
||||||
<diy-image-nav :value="item"></diy-image-nav>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Digit'">
|
|
||||||
<!-- 数字 -->
|
|
||||||
<diy-digit :value="item"></diy-digit>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'VideoList'">
|
|
||||||
<!-- 视频列表 -->
|
|
||||||
<diy-video-list :value="item"></diy-video-list>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'BottomNav'">
|
|
||||||
<!-- 底部导航 -->
|
|
||||||
<diy-bottom-nav :value="item"></diy-bottom-nav>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'CategoryItem'">
|
|
||||||
<!-- 分类项 -->
|
|
||||||
<diy-category-item :value="item"></diy-category-item>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Category'">
|
|
||||||
<!-- 分类 -->
|
|
||||||
<diy-category :value="item"></diy-category>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'Icon'">
|
|
||||||
<!-- 图标 -->
|
|
||||||
<diy-icon :value="item"></diy-icon>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'WechatChannel'">
|
|
||||||
<!-- 微信视频号 -->
|
|
||||||
<diy-wechat-channel :value="item"></diy-wechat-channel>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-if="item.componentName == 'WechatChannelList'">
|
|
||||||
<!-- 微信视频号列表 -->
|
|
||||||
<diy-wechat-channel-list :value="item"></diy-wechat-channel-list>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 自定义扩展组件 -->
|
<!-- 自定义扩展组件 -->
|
||||||
<diy-comp-extend :value="item"></diy-comp-extend>
|
<diy-comp-extend :value="item"></diy-comp-extend>
|
||||||
</view>
|
</view>
|
||||||
@@ -268,98 +223,96 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// 组件组展示
|
// 组件组
|
||||||
import DiyMinx from './minx.js'
|
export default {
|
||||||
|
components: {},
|
||||||
export default {
|
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>
|
||||||
462
components/diy-components/diy-groupbuy.vue
Normal file
462
components/diy-components/diy-groupbuy.vue
Normal 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>
|
||||||
@@ -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>
|
||||||
@@ -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: {}
|
||||||
};
|
};
|
||||||
73
components/diy-components/diy-hot-area.vue
Normal file
73
components/diy-components/diy-hot-area.vue
Normal 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>
|
||||||
84
components/diy-components/diy-icon.vue
Normal file
84
components/diy-components/diy-icon.vue
Normal 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>
|
||||||
@@ -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') + ';',
|
||||||
@@ -38,18 +54,19 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
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',
|
||||||
|
components: {
|
||||||
|
nsLogin
|
||||||
|
},
|
||||||
props: {
|
props: {
|
||||||
value: {
|
value: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: () => ({})
|
default: () => ({})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mixins: [DiyMinx],
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pageWidth: '',
|
pageWidth: '',
|
||||||
@@ -69,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') {
|
||||||
@@ -93,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: {
|
||||||
@@ -108,21 +125,21 @@ 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() != this.$util.MEMBER_PAGE_URL || this.storeToken) {
|
if (!link.wap_url || this.$util.getCurrRoute() != 'pages/member/index' || this.storeToken) {
|
||||||
this.$util.diyRedirectTo(link);
|
this.$util.diyRedirectTo(link);
|
||||||
} else {
|
} else {
|
||||||
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;
|
||||||
@@ -135,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;
|
||||||
@@ -167,7 +184,7 @@ export default {
|
|||||||
height: 8rpx;
|
height: 8rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.circle {
|
&.circle {
|
||||||
.uni-swiper-dot {
|
.uni-swiper-dot {
|
||||||
width: 14rpx;
|
width: 14rpx;
|
||||||
@@ -175,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;
|
||||||
@@ -228,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;
|
||||||
@@ -244,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;
|
||||||
@@ -261,7 +278,7 @@ export default {
|
|||||||
height: 8rpx;
|
height: 8rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.circle {
|
&.circle {
|
||||||
.swiper-dot {
|
.swiper-dot {
|
||||||
width: 15rpx;
|
width: 15rpx;
|
||||||
310
components/diy-components/diy-img-ads.vue
Normal file
310
components/diy-components/diy-img-ads.vue
Normal 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>
|
||||||
830
components/diy-components/diy-index-page.vue
Normal file
830
components/diy-components/diy-index-page.vue
Normal 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(() => {
|
||||||
|
// 获取组件的高度,默认高度为45(45是在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>
|
||||||
71
components/diy-components/diy-kefu.vue
Normal file
71
components/diy-components/diy-kefu.vue
Normal 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>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user