Compare commits
45 Commits
release/v1
...
dev/2.0
| Author | SHA1 | Date | |
|---|---|---|---|
| e263a616f6 | |||
| ed5181b382 | |||
| 95375d5476 | |||
| b34003e2c0 | |||
| 3a455bd644 | |||
| 8103f4c897 | |||
| 0066a46037 | |||
| 0b62de8c6b | |||
| 9097658782 | |||
| ee6c777fb1 | |||
| 5503758854 | |||
| 8d84306747 | |||
| 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,47 +0,0 @@
|
||||
// 本地调试配置示例文件
|
||||
// 复制此文件并重命名为 local.config.js 以使用自定义本地配置
|
||||
|
||||
const localDevConfig = ({
|
||||
'460': { // 制氧设备平台
|
||||
uniacid: 460,
|
||||
domain: 'https://xcx30.5g-quickapp.com/',
|
||||
},
|
||||
'576-xcx30.5g': { // 活性石灰装备
|
||||
uniacid: 576,
|
||||
domain: 'https://xcx30.5g-quickapp.com/',
|
||||
},
|
||||
'2285': { // 数码喷墨墨水
|
||||
uniacid: 2285,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
'2811': { // POCT检测分析平台
|
||||
uniacid: 2811,
|
||||
domain: 'https://xcx6.aigc-quickapp.com/',
|
||||
},
|
||||
'2724': { // 生物菌肥
|
||||
uniacid: 2724,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
'2505': { // 煤矿钻机
|
||||
uniacid: 2505,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
'2777': { // 养老服务
|
||||
uniacid: 2777,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
'1': { // 开发平台
|
||||
uniacid: 1,
|
||||
domain: 'https://dev.aigc-quickapp.com',
|
||||
},
|
||||
'1-test': { // 测试平台
|
||||
uniacid: 1,
|
||||
domain: 'https://test.aigc-quickapp.com',
|
||||
},
|
||||
'local-2': { // 测试平台
|
||||
uniacid: 2,
|
||||
domain: 'http://localhost:8050/',
|
||||
},
|
||||
})['2811']; // 选择要使用的环境配置
|
||||
|
||||
export default localDevConfig;
|
||||
@@ -1,55 +0,0 @@
|
||||
// 本地调试配置示例文件
|
||||
// 复制此文件并重命名为 local.config.js 以使用自定义本地配置
|
||||
|
||||
const localDevConfig = ({
|
||||
'460': { // 制氧设备平台
|
||||
uniacid: 460,
|
||||
domain: 'https://xcx30.5g-quickapp.com/',
|
||||
},
|
||||
'576-xcx30.5g': { // 活性石灰装备
|
||||
uniacid: 576,
|
||||
domain: 'https://xcx30.5g-quickapp.com/',
|
||||
},
|
||||
'2285': { // 数码喷墨墨水
|
||||
uniacid: 2285,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
'2811': { // POCT检测分析平台
|
||||
uniacid: 2811,
|
||||
domain: 'https://xcx6.aigc-quickapp.com/',
|
||||
},
|
||||
'2812': { // IVD数商模式
|
||||
uniacid: 2812,
|
||||
domain: 'https://xcx6.aigc-quickapp.com/',
|
||||
},
|
||||
'2724': { // 生物菌肥
|
||||
uniacid: 2724,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
'2505': { // 煤矿钻机
|
||||
uniacid: 2505,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
'2777': { // 养老服务
|
||||
uniacid: 2777,
|
||||
domain: 'https://xcx.aigc-quickapp.com/',
|
||||
},
|
||||
'1': { // 开发平台
|
||||
uniacid: 1,
|
||||
domain: 'https://dev.aigc-quickapp.com',
|
||||
},
|
||||
'1-test': { // 测试平台
|
||||
uniacid: 1,
|
||||
domain: 'https://test.aigc-quickapp.com',
|
||||
},
|
||||
'local-2': { // 测试平台
|
||||
uniacid: 2,
|
||||
domain: 'http://localhost:8050/',
|
||||
},
|
||||
'local-2-dev': { // 本地开发测试平台
|
||||
uniacid: 2,
|
||||
domain: 'http://localhost:8050/',
|
||||
},
|
||||
})['2812']; // 选择要使用的环境配置
|
||||
|
||||
export default localDevConfig;
|
||||
23
App.vue
23
App.vue
@@ -1,17 +1,17 @@
|
||||
<script>
|
||||
import auth from 'common/js/auth.js';
|
||||
import configExternal from 'common/js/config-external.js'
|
||||
|
||||
import colorList from 'common/js/style_color.js'
|
||||
import {
|
||||
Weixin
|
||||
} from 'common/js/wx-jssdk.js';
|
||||
|
||||
export default {
|
||||
mixins: [auth],
|
||||
onLaunch: async function(options) {
|
||||
// 方式:支持快应用,从url中query部分获取uniacid,或useragent中获取uniacid
|
||||
onLaunch: function(options) {
|
||||
// console.log(options.query.uniacid)
|
||||
if(options.query.uniacid){
|
||||
uni.setStorageSync('uniacid', options.query.uniacid);
|
||||
console.log(uni.getStorageSync('uniacid'))
|
||||
}
|
||||
uni.hideTabBar();
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
if (this.$util.getDeviceInfo().platform == 'ios') {
|
||||
if (uni.getDeviceInfo().platform == 'ios') {
|
||||
uni.setStorageSync('initUrl', location.href);
|
||||
}
|
||||
// #endif
|
||||
@@ -61,9 +61,7 @@
|
||||
|
||||
// 主题风格
|
||||
if (uni.getStorageSync('themeStyle')) {
|
||||
const themeData = await configExternal.loadTheme(uni.getStorageSync('themeStyle'));
|
||||
this.$store.commit('setThemeStyle', themeData);
|
||||
this.$store.dispatch('themeColorSet');
|
||||
this.$store.commit('setThemeStyle', colorList[uni.getStorageSync('themeStyle')]);
|
||||
}
|
||||
|
||||
// 插件是否存在
|
||||
@@ -153,7 +151,6 @@
|
||||
onShow: function(options) {
|
||||
// #ifdef MP
|
||||
// 自动授权登录
|
||||
this.getAuthInfo();
|
||||
if (this.$store.state.token) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/member/info',
|
||||
@@ -163,6 +160,8 @@
|
||||
}
|
||||
}
|
||||
});
|
||||
}else{
|
||||
this.getAuthInfo();
|
||||
}
|
||||
// #endif
|
||||
|
||||
@@ -179,8 +178,7 @@
|
||||
// #ifdef H5
|
||||
if (this.$util.isWeiXin()) {
|
||||
this.$util.getUrlCode(urlParams => {
|
||||
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams
|
||||
.source_member);
|
||||
if (urlParams.source_member) uni.setStorageSync('source_member', urlParams.source_member);
|
||||
|
||||
if (urlParams.code == undefined) {
|
||||
this.$api.sendRequest({
|
||||
@@ -206,8 +204,7 @@
|
||||
let data = {};
|
||||
if (res.data.openid) data.wx_openid = res.data.openid;
|
||||
if (res.data.unionid) data.wx_unionid = res.data.unionid;
|
||||
if (res.data.userinfo) Object.assign(data, res.data
|
||||
.userinfo);
|
||||
if (res.data.userinfo) Object.assign(data, res.data.userinfo);
|
||||
this.authLogin(data);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,7 +123,7 @@ image {
|
||||
}
|
||||
|
||||
.choose-store {
|
||||
::v-deep .uni-popup__wrapper{
|
||||
/deep/ .uni-popup__wrapper{
|
||||
background: none!important;
|
||||
}
|
||||
}
|
||||
@@ -194,6 +194,11 @@ image {
|
||||
color: #202021;
|
||||
font-size: $font-size-toolbar;
|
||||
}
|
||||
.store-close-desc{
|
||||
color: red;
|
||||
font-size: $font-size-tag;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.address {
|
||||
color: #5f6067;
|
||||
font-size: $font-size-tag;
|
||||
@@ -232,3 +237,69 @@ image {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -683,6 +683,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.item-close-desc{
|
||||
font-size: $font-size-tag;
|
||||
color: red;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.item-time {
|
||||
font-size: $font-size-activity-tag;
|
||||
color: $color-tip;
|
||||
@@ -856,6 +862,9 @@
|
||||
* {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
img,image{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.goods-details.active {
|
||||
min-height: 150rpx;
|
||||
@@ -870,13 +879,13 @@
|
||||
// 海报
|
||||
// .uni-popup__wrapper-box
|
||||
.poster-layer {
|
||||
::v-deep .uni-popup__wrapper.center {
|
||||
/deep/ .uni-popup__wrapper.center {
|
||||
width: 100vw!important;
|
||||
height: 100vh!important;
|
||||
background: none!important;
|
||||
}
|
||||
|
||||
::v-deep .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
|
||||
/deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
|
||||
max-width: 100vw!important;
|
||||
max-height: 100vh!important;
|
||||
background: none!important;
|
||||
@@ -1164,6 +1173,9 @@
|
||||
|
||||
&.store-wrap {
|
||||
height: auto;
|
||||
.label{
|
||||
line-height: 34rpx;
|
||||
}
|
||||
.list-wrap {
|
||||
padding: 10rpx 0 16rpx;
|
||||
width: 80%;
|
||||
@@ -1186,6 +1198,12 @@
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
}
|
||||
.close-desc{
|
||||
color:red;
|
||||
font-size: $font-size-tag;
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.other-wrap {
|
||||
display: flex;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -559,7 +559,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
/deep/::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
@@ -609,7 +609,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
font-weight: 500!important;
|
||||
}
|
||||
|
||||
::v-deep .reward-popup .uni-popup__wrapper-box {
|
||||
/deep/ .reward-popup .uni-popup__wrapper-box {
|
||||
background: none !important;
|
||||
max-width: unset !important;
|
||||
max-height: unset !important;
|
||||
@@ -618,7 +618,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
|
||||
// #ifdef H5
|
||||
// 下拉加载动画【页面】
|
||||
::v-deep body uni-page-refresh div{
|
||||
/deep/ body uni-page-refresh div{
|
||||
width: 14rpx !important;
|
||||
height: 14rpx !important;
|
||||
background-color: #ccc;
|
||||
@@ -626,7 +626,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
clip: rect(-152rpx, 90rpx, 90rpx, -30rpx) !important;
|
||||
animation:.6s backgroundChange linear infinite;
|
||||
}
|
||||
::v-deep body uni-page-refresh div::after{
|
||||
/deep/ body uni-page-refresh div::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -22rpx;
|
||||
@@ -636,7 +636,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
background-color: #ccc;
|
||||
animation:.5s backgroundChange linear infinite;
|
||||
}
|
||||
::v-deep body uni-page-refresh div::before{
|
||||
/deep/ body uni-page-refresh div::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -22rpx;
|
||||
@@ -646,15 +646,15 @@ scroll-view ::-webkit-scrollbar {
|
||||
background-color: #ccc;
|
||||
animation:.7s backgroundChange linear infinite;
|
||||
}
|
||||
::v-deep body uni-page-refresh > div > div{
|
||||
/deep/ body uni-page-refresh > div > div{
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
// 下拉加载动画【scroll-view】
|
||||
::v-deep body .uni-scroll-view-refresher{
|
||||
/deep/ body .uni-scroll-view-refresher{
|
||||
background-color: transparent !important;
|
||||
}
|
||||
::v-deep body .uni-scroll-view-refresher div{
|
||||
/deep/ body .uni-scroll-view-refresher div{
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
@@ -666,7 +666,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
clip: rect(-152rpx, 90rpx, 90rpx, -30rpx) !important;
|
||||
animation:.6s backgroundChange linear infinite;
|
||||
}
|
||||
::v-deep body .uni-scroll-view-refresher div::after{
|
||||
/deep/ body .uni-scroll-view-refresher div::after{
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -22rpx;
|
||||
@@ -676,7 +676,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
background-color: #ccc;
|
||||
animation:.5s backgroundChange linear infinite;
|
||||
}
|
||||
::v-deep body .uni-scroll-view-refresher div::before{
|
||||
/deep/ body .uni-scroll-view-refresher div::before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -22rpx;
|
||||
@@ -686,7 +686,7 @@ scroll-view ::-webkit-scrollbar {
|
||||
background-color: #ccc;
|
||||
animation:.7s backgroundChange linear infinite;
|
||||
}
|
||||
::v-deep body .uni-scroll-view-refresher > div > div{
|
||||
/deep/ body .uni-scroll-view-refresher > div > div{
|
||||
display: none !important;
|
||||
}
|
||||
@keyframes backgroundChange {
|
||||
@@ -874,5 +874,3 @@ scroll-view ::-webkit-scrollbar {
|
||||
display: inline-block;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@import './mp_html_patch.scss';
|
||||
@@ -1,4 +0,0 @@
|
||||
// 修复图片垂直对齐问题,解决两张图片上下有空白缝隙问题
|
||||
::v-deep ._img {
|
||||
vertical-align: top;
|
||||
}
|
||||
@@ -7,8 +7,8 @@
|
||||
|
||||
$margin-both: 24rpx;
|
||||
|
||||
input,
|
||||
view {
|
||||
/deep/ input,
|
||||
/deep/ view {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
@@ -276,7 +276,7 @@ view {
|
||||
.goods-wrap {
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0rpx 0 10rpx 0;
|
||||
padding: 30rpx 0;
|
||||
|
||||
.goods-img {
|
||||
width: 180rpx;
|
||||
@@ -377,7 +377,7 @@ view {
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .goods-form {
|
||||
/deep/ .goods-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
@@ -883,6 +883,9 @@ view {
|
||||
view {
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
.close-desc{
|
||||
color:red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1066,6 +1069,10 @@ view {
|
||||
}
|
||||
}
|
||||
|
||||
.empty-local{
|
||||
color: #ff443f;
|
||||
}
|
||||
|
||||
// 配送方式
|
||||
.delivery-mode {
|
||||
margin: 0 24rpx;
|
||||
@@ -1213,6 +1220,9 @@ view {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.store-detail{
|
||||
.close-desc{
|
||||
color:red;
|
||||
}
|
||||
.address{
|
||||
color: $color-sub;
|
||||
width: 100%;
|
||||
@@ -1354,7 +1364,7 @@ view {
|
||||
border-bottom: 2rpx solid #F4F4F6;
|
||||
}
|
||||
|
||||
::v-deep .form-wrap {
|
||||
/deep/ .form-wrap {
|
||||
margin: 0 24rpx;
|
||||
|
||||
.icon-right {
|
||||
|
||||
@@ -23,10 +23,8 @@ export default {
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
if (res.data.openid) this.authInfo.weapp_openid = res.data
|
||||
.openid;
|
||||
if (res.data.unionid) this.authInfo.wx_unionid = res.data
|
||||
.unionid;
|
||||
if (res.data.openid) this.authInfo.weapp_openid = res.data.openid;
|
||||
if (res.data.unionid) this.authInfo.wx_unionid = res.data.unionid;
|
||||
typeof callback == 'function' && callback(this.authInfo);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
@@ -62,8 +60,7 @@ export default {
|
||||
},
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
if (res.data.user_id) this.authInfo.ali_openid = res.data
|
||||
.user_id;
|
||||
if (res.data.user_id) this.authInfo.ali_openid = res.data.user_id;
|
||||
typeof callback == 'function' && callback(this.authInfo);
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
@@ -74,7 +71,7 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
fail: (res) => {
|
||||
this.$util.showToast({
|
||||
title: res.errMsg
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-QQ || MP-TOUTIAO
|
||||
try {
|
||||
if (site) { // 从site.js文件中获取配置, 针对微信小程序类
|
||||
if (site) {
|
||||
releaseCfg = {
|
||||
baseUrl: site.baseUrl,
|
||||
imgDomain: site.baseUrl,
|
||||
h5Domain: site.baseUrl,
|
||||
uniacid: site.uniacid,
|
||||
}
|
||||
} else {
|
||||
console.warn('小程序发行环境下,必须配置site.js文件, 不然将使用默认配置,影响小程序定制分发!');
|
||||
}
|
||||
} catch (e) {}
|
||||
// #endif
|
||||
|
||||
// 线上版本部署域名, 注意: 必须以 '/' 结尾,适用于小程序/H5/快应用等场景
|
||||
// 默认域名, 自定义发行时可以修改
|
||||
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\` 目录下面
|
||||
*/
|
||||
// 调试版本,配置说明
|
||||
const devCfg = {
|
||||
// 商户ID
|
||||
uniacid: uniacid, //825
|
||||
uniacid: 1, //825
|
||||
|
||||
//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端域名
|
||||
h5Domain: domain,
|
||||
h5Domain: 'https://dev.aigc-quickapp.com/',
|
||||
// h5Domain: 'http://localhost:8010/',
|
||||
|
||||
// // api请求地址
|
||||
// baseUrl: 'https://tsaas.liveplatform.cn/',
|
||||
@@ -105,9 +45,18 @@ export default {
|
||||
|
||||
// // H5端域名
|
||||
// h5Domain: 'http://saas.cn/',
|
||||
};
|
||||
|
||||
// 发行版本配置
|
||||
...(releaseCfg || {}),
|
||||
var config = {
|
||||
/**
|
||||
* 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
|
||||
@@ -122,3 +71,5 @@ export default {
|
||||
// 版本号
|
||||
version: '1.0'
|
||||
};
|
||||
|
||||
export default config;
|
||||
@@ -2,68 +2,13 @@
|
||||
* 客服统一处理服务
|
||||
* 整合各种客服方式,提供统一的调用接口
|
||||
*/
|
||||
class CustomerService {
|
||||
constructor(vueInstance, externalConfig = {}) {
|
||||
if (!vueInstance.$lang) {
|
||||
throw new Error('CustomerService 必须在 Vue 实例中初始化');
|
||||
}
|
||||
|
||||
export class CustomerService {
|
||||
constructor(vueInstance, externalConfig = null) {
|
||||
this.vm = vueInstance;
|
||||
this.externalConfig = externalConfig; // 外部传入的最新配置(优先级最高)
|
||||
this.latestPlatformConfig = null;
|
||||
}
|
||||
|
||||
getSupoortKeFuList() {
|
||||
if (!this.vm) return [];
|
||||
|
||||
const vm = this.vm;
|
||||
|
||||
return [
|
||||
{
|
||||
id: 'weixin-official',
|
||||
name: vm.$lang('customer.weChatKefu'),
|
||||
isOfficial: true,
|
||||
type: 'weapp'
|
||||
},
|
||||
{
|
||||
id: 'custom-kefu',
|
||||
name: vm.$lang('customer.systemKefu'),
|
||||
isOfficial: false
|
||||
},
|
||||
{
|
||||
id: 'qyweixin-kefu',
|
||||
name: vm.$lang('customer.weChatWorkKefu'),
|
||||
isOfficial: false
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开客服选择弹窗
|
||||
*/
|
||||
openCustomerSelectPopupDialog() {
|
||||
const kefu_list = this.getSupoortKeFuList();
|
||||
const kefuNames = kefu_list.map(item => item.name);
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: kefuNames,
|
||||
success: (res) => {
|
||||
const kefu = kefu_list[res.tapIndex];
|
||||
this.externalConfig = kefu ?? this.externalConfig ?? {};
|
||||
if (kefu.isOfficial) {
|
||||
uni.openCustomerServiceConversation({
|
||||
sessionFrom: 'weapp',
|
||||
showMessageCard: true
|
||||
});
|
||||
} else if (kefu.id === 'custom-kefu') {
|
||||
this.handleCustomerClick();
|
||||
} else if (kefu.id === 'qyweixin-kefu') {
|
||||
this.handleQyWeixinKefuClick();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 强制刷新配置(支持传入外部配置)
|
||||
* @param {Object} externalConfig 外部最新配置
|
||||
@@ -177,11 +122,35 @@ class CustomerService {
|
||||
}
|
||||
|
||||
/**
|
||||
* 跳转到AI客服页面
|
||||
* 跳转到Dify客服页面
|
||||
*/
|
||||
openAIKeFuService() {
|
||||
const vm = this.vm;
|
||||
vm.$util.redirectTo(vm.$util.AI_CHAT_PAGE_URL);
|
||||
openDifyService() {
|
||||
try {
|
||||
if (this.vm.setAiUnreadCount) {
|
||||
this.vm.setAiUnreadCount(0);
|
||||
}
|
||||
// 强制跳转,忽略框架层的封装
|
||||
uni.redirectTo({
|
||||
url: '/pages_tool/ai-chat/index',
|
||||
fail: (err) => {
|
||||
// 兜底:使用window.location跳转(H5)
|
||||
// #ifdef H5
|
||||
window.location.href = '/pages_tool/ai-chat/index';
|
||||
// #endif
|
||||
console.error('跳转Dify客服失败:', err);
|
||||
uni.showToast({
|
||||
title: '跳转客服失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('跳转Dify客服异常:', e);
|
||||
uni.showToast({
|
||||
title: '跳转客服失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -201,7 +170,7 @@ class CustomerService {
|
||||
}
|
||||
|
||||
const config = this.getPlatformConfig();
|
||||
const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options || {};
|
||||
const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
|
||||
|
||||
if (config.type === 'none') {
|
||||
this.showNoServicePopup();
|
||||
@@ -211,7 +180,7 @@ class CustomerService {
|
||||
// 核心分支:根据最新的type处理
|
||||
switch (config.type) {
|
||||
case 'aikefu':
|
||||
this.openAIKeFuService();
|
||||
this.openDifyService();
|
||||
break;
|
||||
case 'wxwork':
|
||||
this.openWxworkService(false, config, options);
|
||||
@@ -242,7 +211,7 @@ class CustomerService {
|
||||
openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) {
|
||||
const config = servicerConfig || this.getPlatformConfig();
|
||||
const wxworkConfig = this.getWxworkConfig();
|
||||
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options || {};
|
||||
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
if (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) {
|
||||
@@ -323,7 +292,7 @@ class CustomerService {
|
||||
* @param {Object} options 选项参数
|
||||
*/
|
||||
handleCustomWeappService(config, options = {}) {
|
||||
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options || {};
|
||||
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
|
||||
|
||||
if (config.customServiceUrl) {
|
||||
let url = config.customServiceUrl;
|
||||
@@ -412,7 +381,7 @@ class CustomerService {
|
||||
console.log('支付宝小程序客服', config);
|
||||
switch (config.type) {
|
||||
case 'aikefu':
|
||||
this.openAIKeFuService();
|
||||
this.openDifyService();
|
||||
break;
|
||||
case 'third':
|
||||
this.openThirdService(config);
|
||||
@@ -426,22 +395,13 @@ class CustomerService {
|
||||
/**
|
||||
* 拨打电话
|
||||
*/
|
||||
makePhoneCall(mobileNumber) {
|
||||
if (mobileNumber) {
|
||||
return uni.makePhoneCall({
|
||||
phoneNumber: mobileNumber
|
||||
});
|
||||
}
|
||||
|
||||
// 从缓存中获取电话信息
|
||||
uni.getStorage({
|
||||
key: 'shopInfo',
|
||||
success: (res) => {
|
||||
const shopInfo = res.data;
|
||||
const mobile = shopInfo?.mobile ?? '';
|
||||
if (mobile) {
|
||||
makePhoneCall() {
|
||||
this.vm.$api.sendRequest({
|
||||
url: '/api/site/shopcontact',
|
||||
success: res => {
|
||||
if (res.code === 0 && res.data?.mobile) {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: mobile
|
||||
phoneNumber: res.data.mobile
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
@@ -449,6 +409,12 @@ class CustomerService {
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: '获取客服电话失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -540,6 +506,6 @@ class CustomerService {
|
||||
* @param {Object} externalConfig 外部最新配置
|
||||
* @returns {CustomerService} 客服服务实例
|
||||
*/
|
||||
export function createCustomerService(vueInstance, externalConfig = {}) {
|
||||
export function createCustomerService(vueInstance, externalConfig = null) {
|
||||
return new CustomerService(vueInstance, externalConfig);
|
||||
}
|
||||
376
common/js/diy.js
376
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 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 {
|
||||
data() {
|
||||
return {
|
||||
@@ -37,6 +42,7 @@ export default {
|
||||
latitude: null, // 纬度
|
||||
longitude: null, // 经度
|
||||
currentPosition: '', // 当前位置
|
||||
currentStore: null,//当前门店
|
||||
nearestStore: null, // 离自己最近的门店
|
||||
|
||||
storeTimeOut: null, // 没有获取到定位,则获取默认门店
|
||||
@@ -45,6 +51,8 @@ export default {
|
||||
diyRoute: '', // 页面路由
|
||||
openBottomNav: false,
|
||||
isShowCopyRight: false,
|
||||
option: null,
|
||||
firstDiy: true,
|
||||
|
||||
//启动广告
|
||||
adv: {},
|
||||
@@ -52,12 +60,17 @@ export default {
|
||||
};
|
||||
},
|
||||
onLoad(option) {
|
||||
this.option = option;
|
||||
uni.hideTabBar();
|
||||
// 支付宝小程序传参处理
|
||||
// #ifdef MP-ALIPAY
|
||||
let aliapp_option = my.getLaunchOptionsSync();
|
||||
aliapp_option.query && Object.assign(option, aliapp_option.query);
|
||||
// #endif
|
||||
|
||||
if (option.source_member) uni.setStorageSync('source_member', option.source_member);
|
||||
|
||||
// 小程序扫码进入
|
||||
if (option.scene) {
|
||||
// 处理分享人数据
|
||||
if (option.source_member) uni.setStorageSync('source_member', option.source_member);// 分享链接进入
|
||||
if (option.scene) {// 小程序扫码进入
|
||||
var sceneParams = decodeURIComponent(option.scene);
|
||||
sceneParams = sceneParams.split('&');
|
||||
if (sceneParams.length) {
|
||||
@@ -67,64 +80,36 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// H5地图选择位置回调
|
||||
// #ifdef H5
|
||||
// H5地图选择位置回调数据
|
||||
if (option.module && option.module == 'locationPicker') {
|
||||
option.name = ''; // 清空地址
|
||||
option.name = ''; // 自定义页面传参id和name,防止获取地址时变量混淆
|
||||
this.locationModule = option.module;
|
||||
this.latitude = option.latng.split(',')[0];
|
||||
this.longitude = option.latng.split(',')[1];
|
||||
}
|
||||
// #endif
|
||||
|
||||
//自定义页面的id和名称
|
||||
this.id = option.id || 0;
|
||||
this.name = option.name || '';
|
||||
|
||||
uni.removeStorageSync('manual_store_info'); // 清除手动切换门店缓存
|
||||
uni.removeStorageSync('manual_change_store'); // 清楚手动切换门店标识
|
||||
|
||||
// H5才会执行
|
||||
if (this.locationModule == 'locationPicker') {
|
||||
|
||||
// H5地图选址后的回调
|
||||
this.getNearestStore();
|
||||
this.getCurrentLocation();
|
||||
|
||||
} else if (this.mapConfig.wap_is_open == 1) {
|
||||
|
||||
// 每次都要定位,获取当前位置
|
||||
/*this.$util.getLocation({
|
||||
fail: (res) => {
|
||||
// 拒绝定位,进入默认总店
|
||||
this.enterDefaultStore();
|
||||
//获取当前门店信息 必须是首页且不是手动切换操作
|
||||
let current_route = this.$util.getCurrentRoute();
|
||||
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
|
||||
if (current_route.path.indexOf('/pages/index/index') > -1 && !manualChangeStore) {
|
||||
this.getCurrentStore(option);
|
||||
}
|
||||
});*/
|
||||
|
||||
// 如果3秒没有获取到定位,则获取默认门店,H5使用
|
||||
// #ifdef H5
|
||||
this.storeTimeOut = setTimeout(() => {
|
||||
this.enterDefaultStore();
|
||||
}, 1000 * 3);
|
||||
// #endif
|
||||
|
||||
} else {
|
||||
// 关闭定位
|
||||
this.enterDefaultStore();
|
||||
}
|
||||
|
||||
},
|
||||
onShow() {
|
||||
|
||||
this.init();
|
||||
async onShow() {
|
||||
if (this.firstDiy) {
|
||||
this.firstDiy = false;
|
||||
await this.getDiyMethod();
|
||||
}
|
||||
await this.onShowMethod();
|
||||
},
|
||||
onHide() {
|
||||
if (this.storeTimeOut) {
|
||||
clearTimeout(this.storeTimeOut);
|
||||
}
|
||||
|
||||
// 跳转页面要关闭门店弹出框
|
||||
this.closeChooseStorePopup();
|
||||
|
||||
// 清除限时秒杀定时器
|
||||
this.$store.commit('setDiySeckillInterval', 0);
|
||||
},
|
||||
@@ -151,7 +136,7 @@ export default {
|
||||
return str;
|
||||
},
|
||||
backgroundUrl() {
|
||||
var str = this.diyData.global.bgUrl && this.diyData.global.bgUrl != 'transparent' ? 'url(' + this.$util.img(this.diyData.global.bgUrl) + ') ' : '';
|
||||
var str = this.diyData.global?.bgUrl && this.diyData.global?.bgUrl != 'transparent' ? 'url(' + this.$util.img(this.diyData.global?.bgUrl) + ') ' : '';
|
||||
return str;
|
||||
},
|
||||
textNavColor() {
|
||||
@@ -189,30 +174,34 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
location: function (nVal) {
|
||||
if (nVal) {
|
||||
/* location: function (nVal) {
|
||||
if (nVal && !this.latitude && !this.longitude) {
|
||||
this.latitude = nVal.latitude;
|
||||
this.longitude = nVal.longitude;
|
||||
this.getNearestStore();
|
||||
this.getCurrentLocation();
|
||||
this.getStoreInfoByLocation();
|
||||
}
|
||||
}, */
|
||||
initStatus: function (val) {
|
||||
if (!this.option.store_id) this.getLocation();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
play(){
|
||||
console.log(123)
|
||||
async getDiyMethod() {
|
||||
await this.getDiyInfo();
|
||||
|
||||
this.$store.commit('setDiySeckillInterval', 1);
|
||||
this.$store.commit('setComponentRefresh');
|
||||
},
|
||||
async init() {
|
||||
async onShowMethod() {
|
||||
|
||||
// 定位信息过期后,重新获取定位
|
||||
if(this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
|
||||
this.$util.getLocation({
|
||||
fail: (res) => {
|
||||
// 拒绝定位,进入默认总店
|
||||
this.enterDefaultStore();
|
||||
}
|
||||
});
|
||||
}
|
||||
// if (this.mapConfig.wap_is_open == 1 && this.locationStorage && this.locationStorage.is_expired) {
|
||||
// this.$util.getLocation({
|
||||
// fail: (res) => {
|
||||
// // 失败了不需要做任何处理,保持之前的门店选择即可
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
||||
if (this.storeToken) {
|
||||
//记录分享关系
|
||||
@@ -227,17 +216,15 @@ export default {
|
||||
|
||||
this.$store.commit('setDiySeckillInterval', 1);
|
||||
|
||||
//小程序分享
|
||||
// #ifdef MP-WEIXIN
|
||||
this.$util.getMpShare().then(res => {
|
||||
this.mpShareData = res;
|
||||
});
|
||||
// #endif
|
||||
|
||||
let manualChangeStore = uni.getStorageSync('manual_change_store'); // 手动切换门店
|
||||
if (manualChangeStore) {
|
||||
uni.removeStorageSync('manual_change_store');
|
||||
|
||||
let manualStoreInfo = uni.getStorageSync('manual_store_info'); // 手动选择门店
|
||||
uni.removeStorageSync('manual_store_info');
|
||||
if (manualStoreInfo) {
|
||||
this.currentStore = manualStoreInfo;
|
||||
}
|
||||
this.closeGetLocationFailPopup();
|
||||
// 滚动至顶部
|
||||
uni.pageScrollTo({
|
||||
duration: 200,
|
||||
@@ -269,8 +256,14 @@ export default {
|
||||
query.select('.page-header').boundingClientRect(data => {
|
||||
if (data && data.height) {
|
||||
// 从状态栏高度开始算
|
||||
if (!this.diyData.global.topNavBg) {
|
||||
this.paddingTop = 0;
|
||||
this.marginTop = 0;
|
||||
} else {
|
||||
this.paddingTop = data.height + 'px';
|
||||
this.marginTop = -data.height + 'px';
|
||||
}
|
||||
|
||||
clearInterval(time);
|
||||
}
|
||||
}).exec();
|
||||
@@ -336,14 +329,10 @@ export default {
|
||||
let diyDataValue = res.data;
|
||||
if (diyDataValue.value) {
|
||||
this.diyData = JSON.parse(diyDataValue.value);
|
||||
|
||||
// 导航栏标题要根据语言环境切换
|
||||
const title = this.isEnEnv ? this.diyData?.global?.en_title : this.diyData?.global?.title;
|
||||
if (title) this.$langConfig.title(title);
|
||||
|
||||
this.$langConfig.title(this.diyData.global.title);
|
||||
this.mpCollect = this.diyData.global.mpCollect;
|
||||
this.setPublicShare();
|
||||
/* if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
|
||||
if (this.diyData.global.popWindow && this.diyData.global.popWindow.imageUrl) {
|
||||
// 弹框形式,首次弹出 1,每次弹出 0
|
||||
setTimeout(() => {
|
||||
if (this.diyData.global.popWindow.count == 1) {
|
||||
@@ -358,7 +347,7 @@ export default {
|
||||
uni.setStorageSync(this.id + this.name + '_popwindow_count', 0);
|
||||
}
|
||||
}, 500);
|
||||
}*/
|
||||
}
|
||||
|
||||
// 修改diy数据结构排序
|
||||
let searchIndex = -1;
|
||||
@@ -381,14 +370,15 @@ export default {
|
||||
this.diyData.value.splice(topCategoryIndex, 1);
|
||||
this.diyData.value.splice(0, 0, ...topCategoryData);
|
||||
this.diyData.value.splice(1, 0, ...searchData);
|
||||
} else
|
||||
} else {
|
||||
this.diyData.value.splice(0, 0, ...searchData);
|
||||
}
|
||||
} else if (searchIndex != -1 && topCategoryIndex == -1) {
|
||||
let searchData = this.diyData.value.slice(searchIndex, searchIndex + 1);
|
||||
this.diyData.value.splice(searchIndex, 1);
|
||||
this.diyData.value.splice(0, 0, ...searchData);
|
||||
}
|
||||
|
||||
this.topIndexValue = null;
|
||||
for (var i = 0; i < this.diyData.value.length; i++) {
|
||||
// 分类导航组件
|
||||
if (this.diyData.value[i].componentName == 'TopCategory') {
|
||||
@@ -408,7 +398,6 @@ export default {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// #ifdef MP
|
||||
//小程序收藏
|
||||
if (!uni.getStorageSync('isCollect') && this.diyData.global.mpCollect) {
|
||||
@@ -422,6 +411,45 @@ export default {
|
||||
this.openBottomNav = this.diyData.global.openBottomNav;
|
||||
}
|
||||
this.isShowCopyRight = true;
|
||||
|
||||
//小程序分享
|
||||
// #ifdef MP-WEIXIN
|
||||
let path = this.$util.getCurrentRoute().path;
|
||||
if (path == '/pages/member/index') {
|
||||
this.mpShareData = {};
|
||||
return;
|
||||
}
|
||||
let share_path = path;
|
||||
if (this.$store.state.memberInfo && this.$store.state.memberInfo.member_id) {
|
||||
share_path = this.$util.getCurrentShareRoute(this.$store.state.memberInfo.member_id).path
|
||||
}
|
||||
let appMessageData = {
|
||||
title: this.diyData.global.weappShareTitle,
|
||||
path: share_path,
|
||||
imageUrl: this.$util.img(this.diyData.global.weappShareImage),
|
||||
success: res => { },
|
||||
fail: res => { }
|
||||
}
|
||||
let timeLineData = {
|
||||
title: this.diyData.global.weappShareTitle,
|
||||
query: share_path,
|
||||
imageUrl: this.$util.img(this.diyData.global.weappShareImage),
|
||||
}
|
||||
|
||||
this.mpShareData = {
|
||||
appMessage: appMessageData,
|
||||
timeLine: timeLineData
|
||||
};
|
||||
//console.log(this.mpShareData, 'this.mpShareData');
|
||||
|
||||
var store_info = this.$store.state.globalStoreInfo;
|
||||
if (store_info) {
|
||||
this.mpShareData.appMessage.path += (this.mpShareData.appMessage.path.indexOf('?') > -1 ? '&' : '?') + 'store_id=' + store_info.store_id;
|
||||
this.mpShareData.timeLine.query += (this.mpShareData.timeLine.query.indexOf('?') > -1 ? '&' : '?') + 'store_id=' + store_info.store_id;
|
||||
}
|
||||
//朋友圈不需要页面路径,只要要后面的参数就行
|
||||
this.mpShareData.timeLine.query = this.mpShareData.timeLine.query.split('?')[1] || '';
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
closePopupWindow() {
|
||||
@@ -436,44 +464,131 @@ export default {
|
||||
this.$util.diyRedirectTo(this.diyData.global.popWindow.link);
|
||||
this.closePopupWindow();
|
||||
},
|
||||
/******************************************** 获取门店相关 START ***************************************************/
|
||||
/**
|
||||
* 1、分享携带门店id
|
||||
* 门店id正确 进入门店
|
||||
* 门店id错误 通过定位获取门店
|
||||
* 2、通过定位获取门店
|
||||
* 开启获取定位
|
||||
* 同意获取定位 获取最近门店 进入门店
|
||||
* 拒绝获取定位
|
||||
* 平台运营模式 进入默认门店
|
||||
* 连锁门店模式 提示获取定位失败,手动选择门店或引导去开启定位
|
||||
* 关闭获取定位
|
||||
* 平台运营模式 进入默认门店
|
||||
* 连锁门店模式 提示获取定位失败,手动选择门店
|
||||
*/
|
||||
getCurrentStore(option) {
|
||||
if (option.store_id && !isNaN(parseInt(option.store_id))) {
|
||||
this.getStoreInfoByShare(option.store_id);
|
||||
} else {
|
||||
this.getLocation();
|
||||
}
|
||||
},
|
||||
getStoreInfoByShare(store_id) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/info',
|
||||
data: { store_id },
|
||||
success: res => {
|
||||
if (res.code >= 0 && res.data) {
|
||||
this.changeCurrentStore(res.data);
|
||||
} else {
|
||||
this.getLocation();
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
this.getLocation();
|
||||
}
|
||||
});
|
||||
},
|
||||
getLocation() {
|
||||
if (!this.latitude && !this.longitude && this.initStatus) {
|
||||
if (this.mapConfig.wap_is_open == 1) {
|
||||
this.$util.getLocation({
|
||||
complete: (res) => {
|
||||
if (res.latitude && res.longitude) {
|
||||
this.closeGetLocationFailPopup();
|
||||
this.latitude = res.latitude;
|
||||
this.longitude = res.longitude;
|
||||
this.getStoreInfoByLocation();
|
||||
} else {
|
||||
let is_h5 = false;
|
||||
// #ifdef H5
|
||||
is_h5 = true;
|
||||
// #endif
|
||||
if (is_h5) {
|
||||
//H5同意了也会进入失败,所以直接进入默认门店
|
||||
this.enterDefaultStore();
|
||||
} else {
|
||||
this.getLocationFail();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// #ifdef H5
|
||||
//H5有的机型可能根本不会触发getLocation的任何执行,包括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();
|
||||
}
|
||||
}
|
||||
},
|
||||
getStoreInfoByLocation() {
|
||||
if (this.latitude && this.longitude) {
|
||||
this.getNearestStore();
|
||||
this.getCurrentLocation();
|
||||
}
|
||||
},
|
||||
changeCurrentStore(store_info) {
|
||||
this.currentStore = store_info;
|
||||
this.changeStore(store_info);
|
||||
this.openChooseStorePopup();
|
||||
},
|
||||
getLocationFail() {
|
||||
if (this.globalStoreConfig.store_business == 'shop') {
|
||||
this.enterDefaultStore();
|
||||
} else {
|
||||
this.openGetLocationFailPopup();
|
||||
}
|
||||
},
|
||||
openGetLocationFailPopup() {
|
||||
if (this.$refs.getLocationFailRef) this.$refs.getLocationFailRef.open();
|
||||
},
|
||||
closeGetLocationFailPopup() {
|
||||
if (this.$refs.getLocationFailRef) this.$refs.getLocationFailRef.close();
|
||||
},
|
||||
openChooseStorePopup() {
|
||||
let globalStoreInfo = this.globalStoreInfo;
|
||||
if (this.globalStoreConfig && this.globalStoreConfig.confirm_popup_control == 1) {
|
||||
let storeInfo = this.globalStoreInfo;
|
||||
|
||||
// 首次进入门店,没有门店信息 || 当前位置的门店和缓存门店不一致要弹框
|
||||
if (!storeInfo || storeInfo && this.nearestStore && storeInfo.store_id != this.nearestStore.store_id) {
|
||||
this.currentStore.show_address = this.currentStore.full_address.replace(/,/g, ' ') + ' ' + this.currentStore.address;
|
||||
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.open();
|
||||
}
|
||||
}
|
||||
|
||||
let manualStoreInfo = uni.getStorageSync('manual_store_info'); // 手动选择门店
|
||||
if (manualStoreInfo) {
|
||||
this.nearestStore = manualStoreInfo;
|
||||
}
|
||||
this.changeStore(this.nearestStore); // 切换门店数据
|
||||
},
|
||||
closeChooseStorePopup() {
|
||||
if (this.$refs.chooseStorePopup) this.$refs.chooseStorePopup.close();
|
||||
},
|
||||
// 确认进入门店
|
||||
enterStore() {
|
||||
this.closeChooseStorePopup();
|
||||
},
|
||||
// 选择其他门店
|
||||
chooseOtherStore() {
|
||||
this.$util.redirectTo('/pages_tool/store/list');
|
||||
this.closeChooseStorePopup();
|
||||
},
|
||||
// 打开地图重新选择位置
|
||||
reposition() {
|
||||
reGetLocation() {
|
||||
// #ifdef MP
|
||||
/*uni.chooseLocation({
|
||||
uni.chooseLocation({
|
||||
success: res => {
|
||||
this.latitude = res.latitude;
|
||||
this.longitude = res.longitude;
|
||||
this.currentPosition = res.name;
|
||||
this.getNearestStore();
|
||||
this.getCurrentLocation();
|
||||
this.getStoreInfoByLocation();
|
||||
},
|
||||
fail(res) {
|
||||
uni.getSetting({
|
||||
@@ -498,8 +613,7 @@ export default {
|
||||
this.latitude = res.latitude;
|
||||
this.longitude = res.longitude;
|
||||
this.currentPosition = res.name;
|
||||
this.getNearestStore();
|
||||
this.getCurrentLocation();
|
||||
this.getStoreInfoByLocation();
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
@@ -517,7 +631,7 @@ export default {
|
||||
}
|
||||
});
|
||||
}
|
||||
});*/
|
||||
});
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
@@ -538,9 +652,7 @@ export default {
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.nearestStore = res.data;
|
||||
this.nearestStore.show_address = this.nearestStore.full_address.replace(/,/g, ' ') + ' ' + this.nearestStore.address;
|
||||
this.openChooseStorePopup();
|
||||
this.changeCurrentStore(res.data);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -553,7 +665,6 @@ export default {
|
||||
data.latitude = this.latitude;
|
||||
data.longitude = this.longitude;
|
||||
}
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/getLocation',
|
||||
data: data,
|
||||
@@ -569,26 +680,42 @@ export default {
|
||||
// 定位失败,进入默认门店
|
||||
enterDefaultStore() {
|
||||
if (this.defaultStoreInfo) {
|
||||
if (!this.nearestStore) {
|
||||
this.nearestStore = this.defaultStoreInfo;
|
||||
this.nearestStore.show_address = this.nearestStore.full_address.replace(/,/g, ' ') + ' ' + this.nearestStore.address;
|
||||
}
|
||||
if (this.currentPosition == '') this.currentPosition = '未获取到定位';
|
||||
this.openChooseStorePopup();
|
||||
this.changeCurrentStore(this.defaultStoreInfo);
|
||||
}
|
||||
},
|
||||
//连锁门店未定位选择门店
|
||||
chooseStore() {
|
||||
this.$util.redirectTo('/pages_tool/store/list');
|
||||
},
|
||||
//打开手机设置重新定位
|
||||
openSetting() {
|
||||
uni.openSetting({
|
||||
success: res => {
|
||||
this.getLocation();
|
||||
}
|
||||
})
|
||||
},
|
||||
/******************************************** 获取门店相关 END ***************************************************/
|
||||
// 设置公众号分享
|
||||
setPublicShare() {
|
||||
let shareUrl = this.$config.h5Domain + this.diyRoute;
|
||||
if (this.id) shareUrl += '?id=' + this.id;
|
||||
else if (this.name) shareUrl += '?name=' + this.name;
|
||||
this.$util.setPublicShare({
|
||||
title: this.diyData.global.title,
|
||||
desc: '',
|
||||
link: shareUrl,
|
||||
imgUrl: this.siteInfo ? this.$util.img(this.siteInfo.logo_square) : ''
|
||||
});
|
||||
var store_info = this.$store.state.globalStoreInfo;
|
||||
//if (store_info) shareUrl += '?store_id=' + store_info.store_id;
|
||||
if (shareUrl.indexOf('?') > 0) {
|
||||
shareUrl += '&';
|
||||
} else {
|
||||
shareUrl += '?';
|
||||
}
|
||||
if (this.id) shareUrl += 'id=' + this.id;
|
||||
else if (this.name) shareUrl += 'name=' + this.name;
|
||||
// alert('diydiydiy')
|
||||
this.$util.setPublicShare({
|
||||
title: this.diyData.global.wechatShareTitle || this.diyData.global.title,
|
||||
desc: this.diyData.global.wechatShareDesc,
|
||||
link: shareUrl,
|
||||
imgUrl: this.diyData.global.wechatShareImage ? this.$util.img(this.diyData.global.wechatShareImage) : this.$util.img(this.siteInfo.logo_square)
|
||||
});
|
||||
},
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
@@ -603,6 +730,7 @@ export default {
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.$store.commit('setComponentRefresh');
|
||||
this.getDiyMethod();
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 50);
|
||||
|
||||
@@ -110,7 +110,7 @@ class EventBus {
|
||||
|
||||
// 异步触发事件,支持取消传播,并支持在监听处理后调用异步函数 defaultAsyncHandler
|
||||
// 使用方式:await eventBus.emit(eventName, data, defaultAsyncHandler)
|
||||
// defaultAsyncHandler 会在监听器执行后被调用,签名为 defaultAsyncHandler(event, handler, handlerResult)
|
||||
// defaultAsyncHandler 会在每个监听器执行后被调用,签名为 defaultAsyncHandler(event, handler, handlerResult)
|
||||
// 如果 defaultAsyncHandler 返回 Promise,会等待其 resolve
|
||||
// 如果 allowContinuePropagation 为 false,事件触发后将立即返回,不继续传播
|
||||
// 如果 stopOnError 为 true,在任意监听器抛出错误后立即停止传播
|
||||
@@ -123,7 +123,6 @@ class EventBus {
|
||||
|
||||
// helper to call defaultAsyncHandler only when allowed
|
||||
const callDefaultAsyncHandler = async (evt, handler, handlerResult) => {
|
||||
// console.log('callDefaultAsyncHandler', {evt, handler, handlerResult});
|
||||
if (typeof defaultAsyncHandler !== 'function' || !allowAsyncHandlerRun) return
|
||||
try {
|
||||
const res = defaultAsyncHandler(evt, handler, handlerResult)
|
||||
@@ -190,7 +189,6 @@ class EventBus {
|
||||
}
|
||||
|
||||
// 在每个监听器执行后,如果允许并且提供了 defaultAsyncHandler,就调用并等待它
|
||||
// console.log('==> callDefaultAsyncHandler', {event, handler, awaitedResult})
|
||||
await callDefaultAsyncHandler(event, handler, awaitedResult)
|
||||
} catch (error) {
|
||||
console.error(`EventBus ${eventName} error:`, error)
|
||||
|
||||
@@ -1,20 +1,26 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 页面样式,动态设置主色调
|
||||
themeColor: '' //''--base-color:#fa5d14;--base-help-color:#ff7e00;'
|
||||
}
|
||||
},
|
||||
onLoad() {},
|
||||
onShow() {
|
||||
// 刷新多语言
|
||||
this.$langConfig.refresh();
|
||||
let time = setInterval(() => {
|
||||
let theme = this.themeStyle;
|
||||
if (theme && theme.main_color) {
|
||||
this.themeColorSet();
|
||||
clearInterval(time);
|
||||
}
|
||||
}, 50);
|
||||
},
|
||||
computed: {
|
||||
// 是否是英文环境
|
||||
isEnEnv() {
|
||||
return uni.getStorageSync('lang') === 'en-us';
|
||||
},
|
||||
themeStyle() {
|
||||
return this.$store.state.themeStyle;
|
||||
},
|
||||
themeColor() {
|
||||
return this.$store.state.themeColor;
|
||||
},
|
||||
// 插件是否存在
|
||||
addonIsExist() {
|
||||
return this.$store.state.addonIsExist;
|
||||
@@ -105,7 +111,25 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
themeColorSet() {
|
||||
let theme = this.themeStyle;
|
||||
this.themeColor = `--base-color:${theme.main_color};--base-help-color:${theme.aux_color};`;
|
||||
if (this.tabBarHeight != '56px') this.themeColor += `--tab-bar-height:${this.tabBarHeight};`
|
||||
Object.keys(theme).forEach(key => {
|
||||
let data = theme[key];
|
||||
if (typeof(data) == "object") {
|
||||
Object.keys(data).forEach(k => {
|
||||
this.themeColor += '--' + k.replace(/_/g, "-") + ':' + data[k] + ';';
|
||||
});
|
||||
} else if (typeof(key) == "string" && key) {
|
||||
this.themeColor += '--' + key.replace(/_/g, "-") + ':' + data + ';';
|
||||
}
|
||||
});
|
||||
for (let i = 9; i >= 5; i--) {
|
||||
let color = this.$util.colourBlend(theme.main_color, '#ffffff', (i / 10));
|
||||
this.themeColor += `--base-color-light-${i}:${color};`;
|
||||
}
|
||||
},
|
||||
// 颜色变浅(>0)、变深函数(<0)
|
||||
lightenDarkenColor(color, amount) {
|
||||
|
||||
@@ -149,7 +173,7 @@ export default {
|
||||
if (isJump && route != 'pages/index/index') {
|
||||
uni.setStorageSync('manual_change_store', true); // 手动切换门店
|
||||
this.$store.dispatch('getCartNumber'); //重新获取购物车数据
|
||||
this.$util.redirectTo(this.$util.INDEX_PAGE_URL);
|
||||
this.$util.redirectTo('/pages/index/index');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
@@ -41,6 +41,7 @@ export default {
|
||||
bgUrl: '',
|
||||
textImgPosLink: 'left'
|
||||
},
|
||||
goodsFormVal: []
|
||||
}
|
||||
},
|
||||
onLoad(data) {
|
||||
@@ -78,11 +79,13 @@ export default {
|
||||
onShow() {
|
||||
},
|
||||
methods: {
|
||||
detailChangeVal(data) {
|
||||
this.goodsFormVal = data;
|
||||
},
|
||||
// 处理商品详情数据
|
||||
handleGoodsSkuData() {
|
||||
// this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
||||
//设置标题
|
||||
// this.$langConfig.title(this.navbarData.title);
|
||||
this.navbarData.title = this.goodsSkuDetail.goods_name.length > 9 ? this.goodsSkuDetail.goods_name.substr(0, 9) + "..." : this.goodsSkuDetail.goods_name;
|
||||
this.$langConfig.title(this.navbarData.title);
|
||||
if (this.goodsSkuDetail.config) {
|
||||
this.navbarData.navBarSwitch = this.goodsSkuDetail.config.nav_bar_switch;
|
||||
}
|
||||
@@ -106,7 +109,9 @@ export default {
|
||||
whetherCollection: this.goodsSkuDetail.is_collect,
|
||||
evaluateConfig: this.goodsSkuDetail.evaluate_config,
|
||||
evaluateList: this.goodsSkuDetail.evaluate_list,
|
||||
evaluateCount: this.goodsSkuDetail.evaluate_count
|
||||
evaluateCount: this.goodsSkuDetail.evaluate_count,
|
||||
goods_class : this.goodsSkuDetail.goods_class,
|
||||
sale_store: this.goodsSkuDetail.sale_store
|
||||
});
|
||||
|
||||
//媒体
|
||||
@@ -183,9 +188,10 @@ export default {
|
||||
};
|
||||
if (this.$refs.goodsPromotion) this.$refs.goodsPromotion.refresh(this.goodsSkuDetail.goods_promotion);
|
||||
|
||||
if (this.goodsRoute != '/pages_goods/detail') this.setPublicShare();
|
||||
this.setPublicShare();
|
||||
// if (this.goodsRoute != '/pages/goods/detail') this.setPublicShare();
|
||||
|
||||
// this.getBarrageData();
|
||||
this.getBarrageData();
|
||||
if (this.addonIsExist.form) {
|
||||
this.getGoodsForm();
|
||||
}
|
||||
@@ -240,11 +246,11 @@ export default {
|
||||
},
|
||||
goHome() {
|
||||
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
||||
this.$util.redirectTo(this.$util.INDEX_PAGE_URL);
|
||||
this.$util.redirectTo('/pages/index/index');
|
||||
},
|
||||
goCart() {
|
||||
if (this.preview) return; // 开启预览,禁止任何操作和跳转
|
||||
this.$util.redirectTo('/pages_goods/cart');
|
||||
this.$util.redirectTo('/pages/goods/cart');
|
||||
},
|
||||
//-------------------------------------关注-------------------------------------
|
||||
//更新商品信息
|
||||
@@ -312,7 +318,8 @@ export default {
|
||||
setPublicShare() {
|
||||
let shareUrl = this.$config.h5Domain + this.shareUrl;
|
||||
if (this.memberInfo && this.memberInfo.member_id) shareUrl += '&source_member=' + this.memberInfo.member_id;
|
||||
|
||||
var store_info = this.$store.state.globalStoreInfo;
|
||||
if (store_info) shareUrl+= '&store_id=' + store_info.store_id;
|
||||
this.$util.setPublicShare({
|
||||
title: this.goodsSkuDetail.goods_name,
|
||||
desc: '',
|
||||
@@ -341,6 +348,8 @@ export default {
|
||||
*/
|
||||
onShareAppMessage(res) {
|
||||
var path = this.shareUrl;
|
||||
var store_info = this.$store.state.globalStoreInfo;
|
||||
if (store_info) path+= '&store_id=' + store_info.store_id;
|
||||
if (this.memberInfo && this.memberInfo.member_id) path += '&source_member=' + this.memberInfo.member_id;
|
||||
return {
|
||||
title: this.goodsSkuDetail.sku_name,
|
||||
@@ -358,6 +367,8 @@ export default {
|
||||
// #ifdef MP-WEIXIN
|
||||
onShareTimeline() {
|
||||
let query = this.shareQuery;
|
||||
var store_info = this.$store.state.globalStoreInfo;
|
||||
if (store_info) query+= '&store_id=' + store_info.store_id;
|
||||
if (this.memberInfo && this.memberInfo.member_id) query += '&source_member=' + this.memberInfo.member_id;
|
||||
return {
|
||||
title: this.goodsSkuDetail.sku_name,
|
||||
|
||||
@@ -285,7 +285,7 @@ function replaceAnnotation(html) {
|
||||
function replaceImage(html) {
|
||||
|
||||
// #ifdef MP
|
||||
let info = uni.getSystemInfoSync();
|
||||
let info = uni.getWindowInfo();
|
||||
var screenWidth = info.windowWidth;
|
||||
screenWidth -= 20;
|
||||
screenWidth += 'px';
|
||||
@@ -304,7 +304,7 @@ function replaceImage(html) {
|
||||
}
|
||||
function replaceVideo(html){
|
||||
// #ifdef MP
|
||||
let info = uni.getSystemInfoSync();
|
||||
let info = uni.getWindowInfo();
|
||||
var screenWidth = info.windowWidth;
|
||||
screenWidth -= 20;
|
||||
screenWidth += 'px';
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import Config from './config.js'
|
||||
import Util from './util.js'
|
||||
import store from '@/store/index.js'
|
||||
import { Utils } from 'common/js/map-wx-jssdk.js';
|
||||
|
||||
// #ifdef H5
|
||||
const app_type = Util.isWeiXin() ? 'wechat' : 'h5';
|
||||
@@ -49,7 +50,7 @@ export default {
|
||||
}
|
||||
|
||||
var method = params.data != undefined ? 'POST' : 'GET', // 请求方式
|
||||
url = (Config.baseUrl + params.url).replace(/(?<!:)\/+/g, '/'), // 请求路径
|
||||
url = Config.baseUrl + params.url, // 请求路径
|
||||
data = {
|
||||
app_type,
|
||||
app_type_name
|
||||
@@ -57,8 +58,7 @@ export default {
|
||||
|
||||
// token
|
||||
data.token = store.state.token || '';
|
||||
data.uniacid = uni.getStorageSync('uniacid') || Config.uniacid; // 从缓存中获取uniacid,或使用默认uniacid,支持快应用
|
||||
|
||||
data.uniacid = Config.uniacid
|
||||
// 门店id
|
||||
var default_store_info = store.state.defaultStoreInfo;
|
||||
if (default_store_info) {
|
||||
@@ -188,7 +188,30 @@ export default {
|
||||
});
|
||||
}
|
||||
},
|
||||
needMd5Fn(params,callback) {
|
||||
uni.request({
|
||||
url: Config.baseUrl + '/api/config/getApiConfig',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded;application/json'
|
||||
},
|
||||
data: {
|
||||
app_type,
|
||||
app_type_name,
|
||||
},
|
||||
dataType: 'json',
|
||||
responseType: 'text',
|
||||
success: res => {
|
||||
var sign_str = Utils.hexMD5('key=' + res.data.data.key+'&time='+res.data.data.time)
|
||||
typeof callback == 'function' && callback(sign_str,res.data.data.time);
|
||||
},
|
||||
fail: () => {
|
||||
typeof params.fail == 'function' && params.fail(res);
|
||||
}
|
||||
});
|
||||
},
|
||||
uploadBase64(params) {
|
||||
this.needMd5Fn(params,(sign_str,time)=>{
|
||||
uni.request({
|
||||
url: Config.baseUrl + '/api/upload/headimgBase64',
|
||||
method: 'POST',
|
||||
@@ -198,7 +221,10 @@ export default {
|
||||
data: {
|
||||
app_type,
|
||||
app_type_name,
|
||||
images: params.base64
|
||||
images: params.base64,
|
||||
token: store.state.token || '',
|
||||
sign: sign_str,
|
||||
time: time
|
||||
},
|
||||
dataType: 'json',
|
||||
responseType: 'text',
|
||||
@@ -209,8 +235,10 @@ export default {
|
||||
typeof params.fail == 'function' && params.fail(res);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
pullImage(params) {
|
||||
this.needMd5Fn(params,(sign_str,time)=>{
|
||||
uni.request({
|
||||
url: Config.baseUrl + '/api/upload/headimgPull',
|
||||
method: 'POST',
|
||||
@@ -220,7 +248,10 @@ export default {
|
||||
data: {
|
||||
app_type,
|
||||
app_type_name,
|
||||
path: params.path
|
||||
path: params.path,
|
||||
token: store.state.token || '',
|
||||
sign: sign_str,
|
||||
time: time
|
||||
},
|
||||
dataType: 'json',
|
||||
responseType: 'text',
|
||||
@@ -231,6 +262,7 @@ export default {
|
||||
typeof params.fail == 'function' && params.fail(res);
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
upload(params) {
|
||||
uni.uploadFile({
|
||||
@@ -241,6 +273,7 @@ export default {
|
||||
formData: {
|
||||
app_type,
|
||||
app_type_name,
|
||||
token: store.state.token || ''
|
||||
},
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded;application/json'
|
||||
|
||||
@@ -1,61 +1,9 @@
|
||||
import { langConfig } from './config-external.js';
|
||||
const langList = ['zh-cn', 'en-us'];
|
||||
|
||||
|
||||
// 缓存已加载的语言包
|
||||
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 {};
|
||||
}
|
||||
}
|
||||
var locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||
|
||||
export default {
|
||||
langList: langConfig.langList,
|
||||
langList: ['zh-cn', 'en-us'],
|
||||
/**
|
||||
* * 解析多语言
|
||||
* @param {Object} field
|
||||
@@ -64,49 +12,43 @@ export default {
|
||||
let _this = getCurrentPages()[getCurrentPages().length - 1];
|
||||
if (!_this) return;
|
||||
|
||||
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||
|
||||
let value = ''; // 存放解析后的语言值
|
||||
let langPath = ''; // 存放当前页面语言包路径
|
||||
|
||||
var value = '';
|
||||
let newRoute;
|
||||
try {
|
||||
//公共语言包(同步加载)
|
||||
var lang = loadLangPackSync(locale, 'common');
|
||||
//公共语言包
|
||||
var lang = require('../../lang/' + locale + '/common.js').lang;
|
||||
|
||||
//当前页面语言包(同步加载)
|
||||
let route = _this.route;
|
||||
langPath = processRoutePath(route);
|
||||
//当前页面语言包
|
||||
let route = _this.route.split("/");
|
||||
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) {
|
||||
lang[f] = currentPageLang[f];
|
||||
}
|
||||
|
||||
// 合并语言包
|
||||
let mergedLang = { ...lang, ...currentPageLang };
|
||||
|
||||
// 解析字段
|
||||
var arr = field.split(".");
|
||||
if (arr.length > 1) {
|
||||
// 处理嵌套属性,如 common.currencySymbol
|
||||
let temp = mergedLang;
|
||||
let found = true;
|
||||
for (let key of arr) {
|
||||
if (temp[key] !== undefined) {
|
||||
temp = temp[key];
|
||||
} else {
|
||||
found = false;
|
||||
break;
|
||||
for (let i in arr) {
|
||||
var next = parseInt(i) + 1;
|
||||
if (next < arr.length) {
|
||||
value = lang[arr[i]][arr[next]];
|
||||
}
|
||||
}
|
||||
value = found ? temp : field;
|
||||
|
||||
} else {
|
||||
value = mergedLang[field] !== undefined ? mergedLang[field] : field;
|
||||
value = lang[field];
|
||||
}
|
||||
|
||||
} catch (e) {
|
||||
console.error('解析语言包失败:', e, { langPath, field, locale });
|
||||
if (field.indexOf("common.") != -1 || field.indexOf("tabBar.") != -1) {
|
||||
value = lang[field];
|
||||
} else {
|
||||
value = field;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (arguments.length > 1) {
|
||||
//有参数,需要替换
|
||||
for (var i = 1; i < arguments.length; i++) {
|
||||
@@ -114,44 +56,27 @@ export default {
|
||||
}
|
||||
}
|
||||
if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field
|
||||
|
||||
// 多语言调试,注释后可以关闭控制台输出
|
||||
if (field == value) {
|
||||
console.warn(`警告: 字段 ${field} 在语言包 ${langPath} 中未找到对应值,使用默认值 ${field} 当前语言: ${locale}`);
|
||||
}
|
||||
|
||||
return value;
|
||||
},
|
||||
/**
|
||||
* * 切换语言
|
||||
* @param {String} value 语言值
|
||||
* @param {String} url 切换后跳转的页面url
|
||||
*/
|
||||
change(value, url = '/pages_tool/member/index') {
|
||||
//切换语言
|
||||
change(value) {
|
||||
let _this = getCurrentPages()[getCurrentPages().length - 1];
|
||||
if (!_this) return;
|
||||
|
||||
uni.setStorageSync("lang", value);
|
||||
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||
|
||||
// 清空已加载的语言包缓存
|
||||
for (let key in loadedLangPacks) {
|
||||
if (!key.startsWith(locale)) {
|
||||
delete loadedLangPacks[key];
|
||||
}
|
||||
}
|
||||
locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||
|
||||
this.refresh();
|
||||
|
||||
if (url) {
|
||||
uni.reLaunch({ url: url });
|
||||
}
|
||||
uni.reLaunch({
|
||||
url: '/pages/member/index'
|
||||
});
|
||||
},
|
||||
//刷新标题、tabbar
|
||||
refresh() {
|
||||
let _this = getCurrentPages()[getCurrentPages().length - 1];
|
||||
if (!_this) return;
|
||||
const locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||
locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
|
||||
|
||||
this.title(this.lang("title"));
|
||||
|
||||
@@ -189,16 +114,15 @@ export default {
|
||||
var list = [];
|
||||
try {
|
||||
//公共语言包
|
||||
for (var i = 0; i < langConfig.langList.length; i++) {
|
||||
let langType = langConfig.langList[i];
|
||||
let item = loadLangPackSync(langType, 'common');
|
||||
for (var i = 0; i < langList.length; i++) {
|
||||
let item = require('../../lang/' + langList[i] + '/common.js').lang;
|
||||
list.push({
|
||||
name: item.common ? item.common.name : langType,
|
||||
value: langType
|
||||
name: item.common.name,
|
||||
value: langList[i]
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('获取语言包列表失败:', e);
|
||||
// "没有找到语言包:", '../../lang/' + locale + '/common.js'
|
||||
}
|
||||
return list;
|
||||
}
|
||||
|
||||
@@ -1121,5 +1121,7 @@ class QQMapWX {
|
||||
Utils.locationProcess(options, locationsuccess);
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = QQMapWX;
|
||||
module.exports = {
|
||||
Utils,
|
||||
QQMapWX
|
||||
};
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import util from '@/common/js/util.js'
|
||||
import TransformCoordinate from './transformCoordinate.js'
|
||||
|
||||
function openMapByDefault(latitude, longitude, name) {
|
||||
@@ -20,15 +19,15 @@ function openMapByAndroid(latitude, longitude, name) {
|
||||
if (plus.runtime.isApplicationExist({
|
||||
pname: 'com.baidu.BaiduMap'
|
||||
})) {
|
||||
url =
|
||||
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`
|
||||
identity = 'com.baidu.BaiduMap'
|
||||
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
|
||||
identity = 'com.baidu.BaiduMap';
|
||||
openURL(url, identity)
|
||||
} else if (plus.runtime.isApplicationExist({
|
||||
pname: 'com.autonavi.minimap'
|
||||
})) { // 高德
|
||||
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
|
||||
identity = 'com.autonavi.minimap'
|
||||
})) {
|
||||
// 高德
|
||||
url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
|
||||
identity = 'com.autonavi.minimap';
|
||||
openURL(url, identity)
|
||||
} else {
|
||||
openMapByDefault(latitude, longitude, name)
|
||||
@@ -43,13 +42,13 @@ function openMapByIos(latitude, longitude, name) {
|
||||
if (plus.runtime.isApplicationExist({
|
||||
action: 'baidumap://'
|
||||
})) {
|
||||
url =
|
||||
`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
|
||||
url = `baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
|
||||
openURL(url, identity)
|
||||
} else if (plus.runtime.isApplicationExist({
|
||||
action: 'iosamap://'
|
||||
})) { // 高德
|
||||
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`
|
||||
})) {
|
||||
// 高德
|
||||
url = `iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
|
||||
openURL(url, identity)
|
||||
} else {
|
||||
openMapByDefault(latitude, longitude, name)
|
||||
@@ -86,8 +85,7 @@ export default {
|
||||
openMap(latitude, longitude, name, coord_type = 'gcj02') {
|
||||
let arr = getCoordByType(longitude, latitude, coord_type)
|
||||
// #ifdef APP-PLUS
|
||||
let platform = util.getDeviceInfo().platform;
|
||||
switch (platform) {
|
||||
switch (uni.getSystemInfoSync().platform) {
|
||||
case 'android':
|
||||
console.log('运行Android上')
|
||||
openMapByAndroid(arr[1], arr[0], name)
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { EventSafety } from '@/common/js/event-safety.js'
|
||||
import util from '@/common/js/util.js'
|
||||
import { EventSafety } from './event-safety'
|
||||
|
||||
export class NavigationHelper {
|
||||
constructor() {
|
||||
@@ -60,7 +59,7 @@ export class NavigationHelper {
|
||||
// 微信小程序精确计算
|
||||
try {
|
||||
const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
|
||||
let systemInfo = util.getDeviceInfo();
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
|
||||
const height = menuButtonInfo.bottom +
|
||||
(menuButtonInfo.top - systemInfo.statusBarHeight)
|
||||
@@ -120,7 +119,7 @@ export class NavigationHelper {
|
||||
// 获取状态栏高度
|
||||
getStatusBarHeight() {
|
||||
// #ifdef MP-WEIXIN
|
||||
let systemInfo = util.getDeviceInfo();
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
return systemInfo.statusBarHeight || 20
|
||||
// #endif
|
||||
// #ifdef H5
|
||||
@@ -139,7 +138,7 @@ export class NavigationHelper {
|
||||
// 获取安全区域
|
||||
getSafeAreaInsets() {
|
||||
try {
|
||||
let systemInfo = util.getDeviceInfo();
|
||||
const systemInfo = uni.getSystemInfoSync()
|
||||
return systemInfo.safeArea || {
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
// 文件分享工具函数
|
||||
export default {
|
||||
/**
|
||||
* 生成文件预览链接
|
||||
* @param {Object} file - 文件对象,包含 name 和 url 属性
|
||||
* @returns {string} - 生成的文件预览链接
|
||||
*/
|
||||
generateFilePreviewUrl(file) {
|
||||
// 推断文件类型
|
||||
let fileType = '';
|
||||
if (file.name) {
|
||||
const ext = file.name.split('.').pop().toLowerCase();
|
||||
if (['pdf'].includes(ext)) {
|
||||
fileType = 'pdf';
|
||||
} else if (['doc', 'docx'].includes(ext)) {
|
||||
fileType = 'word';
|
||||
} else if (['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'].includes(ext)) {
|
||||
fileType = 'video';
|
||||
}
|
||||
}
|
||||
|
||||
// 构建文件预览链接
|
||||
const previewUrl = `/pages_tool/file-preview/file-preview?fileName=${encodeURIComponent(file.name)}&fileUrl=${encodeURIComponent(file.url || '')}&fileType=${encodeURIComponent(fileType)}`;
|
||||
return previewUrl;
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享文件
|
||||
* @param {Object} file - 文件对象,包含 name 和 url 属性
|
||||
* @param {string} title - 分享标题,默认使用文件名
|
||||
* @param {string} desc - 分享描述,默认使用固定文案
|
||||
*/
|
||||
shareFile(file, title = file.name, desc = '查看企业文件:' + file.name) {
|
||||
// 生成文件预览链接
|
||||
const filePreviewUrl = this.generateFilePreviewUrl(file);
|
||||
|
||||
// #ifdef H5
|
||||
// H5 平台分享
|
||||
if (navigator.share) {
|
||||
// 使用 Web Share API
|
||||
navigator.share({
|
||||
title: title,
|
||||
text: desc,
|
||||
url: filePreviewUrl
|
||||
}).catch(err => {
|
||||
console.error('分享失败:', err);
|
||||
uni.showToast({ title: '分享失败', icon: 'none' });
|
||||
});
|
||||
} else {
|
||||
// 不支持 Web Share API 的浏览器
|
||||
uni.setClipboardData({
|
||||
data: filePreviewUrl,
|
||||
success: () => {
|
||||
uni.showToast({ title: '链接已复制,请粘贴分享', icon: 'success' });
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '复制失败', icon: 'none' });
|
||||
}
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序分享
|
||||
uni.showActionSheet({
|
||||
itemList: ['发送给朋友', '分享到朋友圈'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
// 发送给朋友
|
||||
uni.shareAppMessage({
|
||||
title: title,
|
||||
path: filePreviewUrl,
|
||||
success: () => {
|
||||
uni.showToast({ title: '分享成功', icon: 'success' });
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '分享失败', icon: 'none' });
|
||||
}
|
||||
});
|
||||
} else if (res.tapIndex === 1) {
|
||||
// 分享到朋友圈
|
||||
uni.shareTimeline({
|
||||
title: desc,
|
||||
path: filePreviewUrl,
|
||||
success: () => {
|
||||
uni.showToast({ title: '分享成功', icon: 'success' });
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({ title: '分享失败', icon: 'none' });
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
// 用户取消分享
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
}
|
||||
};
|
||||
@@ -42,6 +42,7 @@ export default {
|
||||
console.log('打开连接');
|
||||
// alert('打开连接')
|
||||
// uni.closeSocket(); // 确保已经关闭后再重新打开
|
||||
|
||||
uni.connectSocket({
|
||||
url: config.webSocket,
|
||||
method: 'POST',
|
||||
@@ -53,6 +54,12 @@ export default {
|
||||
console.log('连接失败 connectSocket=', err);
|
||||
}
|
||||
});
|
||||
// 监听 WebSocket 连接错误事件
|
||||
uni.onSocketError((res)=>{
|
||||
console.error('WebSocket 连接失败:', res.errMsg);
|
||||
this.chatListInit();
|
||||
this.getChatList();
|
||||
});
|
||||
// uni.onSocketOpen((res) => {
|
||||
// console.log('连接成功', res);
|
||||
// });
|
||||
@@ -64,6 +71,7 @@ export default {
|
||||
|
||||
let that = this;
|
||||
this.pingInterval = config.pingInterval;
|
||||
if(this.timeoutObj) clearInterval(this.timeoutObj);
|
||||
this.timeoutObj = null;
|
||||
uni.onSocketMessage((res) => { //type:init,connect,close,string,order,goods
|
||||
let msg = JSON.parse(res.data);
|
||||
@@ -81,7 +89,6 @@ export default {
|
||||
// 监听到有新服务器消息
|
||||
getSocketMsg(reData) { // 监听到服务器消息
|
||||
let that = this;
|
||||
// console.log(reData)
|
||||
let giveMsg = JSON.parse(reData);
|
||||
let data = {
|
||||
isItMe: false,
|
||||
@@ -102,6 +109,7 @@ export default {
|
||||
} else {
|
||||
that.servicer_id = 0;
|
||||
}
|
||||
that.chatListInit();
|
||||
that.getChatList();
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,12 +1,3 @@
|
||||
/**
|
||||
* 颜色配置
|
||||
* 包含默认颜色和其他颜色
|
||||
* 特别注意:
|
||||
* 1. 分组不会被计算成Key,分组下的属性会被计算成Key
|
||||
* 2. 分组下的属性如果有相同的Key,会被覆盖
|
||||
* 3. 例如:hoverNav,hoverNav_bg_color和hoverNav_text_color, 不会生成hoverNav_hoverNav_bg_color和hoverNav_hoverNav_text_color
|
||||
* 问题原因:历史遗留
|
||||
*/
|
||||
export default {
|
||||
'default': {
|
||||
//红色
|
||||
@@ -20,7 +11,7 @@ export default {
|
||||
main_color_shallow: '#FFF4F4',//淡背景
|
||||
price_color: 'rgb(252,82,39)',//价格颜色
|
||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||
...{
|
||||
goods_detail: {
|
||||
goods_price: 'rgb(252,82,39,1)',//价格
|
||||
promotion_tag: '#FF4646',
|
||||
goods_card_bg: '#201A18',//会员卡背景
|
||||
@@ -31,39 +22,35 @@ export default {
|
||||
goods_btn_color: '#FF4646',//按钮颜色
|
||||
goods_btn_color_shallow: '#F7B500',//副按钮颜色
|
||||
},
|
||||
...{
|
||||
pintuan: {
|
||||
pintuan_label_bg: '#F7B500',
|
||||
pintuan_label_color: '#FFFFFF',
|
||||
pintuan_color: '#FA6400',
|
||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||
},
|
||||
...{
|
||||
super_member: {
|
||||
super_member_start_bg: '#7c7878',
|
||||
super_member_end_bg: '#201a18',
|
||||
super_member_start_text_color: '#FFDBA6',
|
||||
super_member_end_text_color: '#FFEBCA',
|
||||
},
|
||||
...{
|
||||
bargain: {
|
||||
bargain_promotion_color: '#F0353E',//活动背景
|
||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
seckill: {
|
||||
seckill_promotion_color: '#F83530',//活动背景
|
||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
giftcard: {
|
||||
giftcard_promotion_color: '#FF3369',//活动背景
|
||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
groupby: {
|
||||
groupby_promotion_color: '#E64136',//活动背景
|
||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
hover_nav_bg_color: '#FFFC', //背景色: 红色 '#c6251b', 白色: '#FFFC'
|
||||
hover_nav_text_color: '#000' // 文字颜色: 白色 '#FFFFFF', 黑色: '#000'
|
||||
},
|
||||
},
|
||||
'green': {
|
||||
name: 'green',
|
||||
@@ -76,7 +63,7 @@ export default {
|
||||
main_color_shallow: '#F0FFF5',//淡背景
|
||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||
...{
|
||||
goods_detail: {
|
||||
goods_price: 'rgba(252,82,39,1)',//价格
|
||||
promotion_tag: '#19C650',
|
||||
goods_card_bg: '#201A18',//会员卡背景
|
||||
@@ -87,39 +74,35 @@ export default {
|
||||
goods_btn_color: '#19C650',//按钮颜色
|
||||
goods_btn_color_shallow: '#FA6400',//副按钮颜色
|
||||
},
|
||||
...{
|
||||
pintuan: {
|
||||
pintuan_label_bg: '#F7B500',
|
||||
pintuan_label_color: '#FFFFFF',
|
||||
pintuan_color: '#FA6400',
|
||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||
},
|
||||
...{
|
||||
super_member: {
|
||||
super_member_start_bg: '#7c7878',
|
||||
super_member_end_bg: '#201a18',
|
||||
super_member_start_text_color: '#FFDBA6',
|
||||
super_member_end_text_color: '#FFEBCA',
|
||||
},
|
||||
...{
|
||||
bargain: {
|
||||
bargain_promotion_color: '#F0353E',//活动背景
|
||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
seckill: {
|
||||
seckill_promotion_color: '#F83530',//活动背景
|
||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
giftcard: {
|
||||
giftcard_promotion_color: '#FF3369',//活动背景
|
||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
groupby: {
|
||||
groupby_promotion_color: '#E64136',//活动背景
|
||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
hover_nav_bg_color: '#19C650',//背景色
|
||||
hover_nav_text_color: '#FFFFFF'
|
||||
},
|
||||
},
|
||||
'blue': {
|
||||
name: 'blue',
|
||||
@@ -132,7 +115,7 @@ export default {
|
||||
main_color_shallow: '#E2F3FF',
|
||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||
...{
|
||||
goods_detail: {
|
||||
goods_price: 'rgba(252,82,39,1)',//价格
|
||||
promotion_tag: '#36ABFF',
|
||||
goods_card_bg: '#201A18',//会员卡背景
|
||||
@@ -143,39 +126,35 @@ export default {
|
||||
goods_btn_color: '#36ABFF',//按钮颜色
|
||||
goods_btn_color_shallow: '#FA6400',//副按钮颜色
|
||||
},
|
||||
...{
|
||||
pintuan: {
|
||||
pintuan_label_bg: '#F7B500',
|
||||
pintuan_label_color: '#FFFFFF',
|
||||
pintuan_color: '#FA6400',
|
||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||
},
|
||||
...{
|
||||
super_member: {
|
||||
super_member_start_bg: '#7c7878',
|
||||
super_member_end_bg: '#201a18',
|
||||
super_member_start_text_color: '#FFDBA6',
|
||||
super_member_end_text_color: '#FFEBCA',
|
||||
},
|
||||
...{
|
||||
bargain: {
|
||||
bargain_promotion_color: '#F0353E',//活动背景
|
||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
seckill: {
|
||||
seckill_promotion_color: '#F83530',//活动背景
|
||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
giftcard: {
|
||||
giftcard_promotion_color: '#FF3369',//活动背景
|
||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
groupby: {
|
||||
groupby_promotion_color: '#E64136',//活动背景
|
||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
hover_nav_bg_color: '#36ABFF',//背景色
|
||||
hover_nav_text_color: '#FFFFFF'
|
||||
},
|
||||
},
|
||||
'pink': {
|
||||
name: 'pink',
|
||||
@@ -188,7 +167,7 @@ export default {
|
||||
main_color_shallow: '#FFF5F8',//淡背景
|
||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||
...{
|
||||
goods_detail: {
|
||||
goods_price: 'rgba(252,82,39,1)',//价格
|
||||
promotion_tag: '#FF407E',
|
||||
goods_card_bg: '#201A18',//会员卡背景
|
||||
@@ -199,39 +178,35 @@ export default {
|
||||
goods_btn_color: '#FF407E',//按钮颜色
|
||||
goods_btn_color_shallow: '#F7B500',//副按钮颜色
|
||||
},
|
||||
...{
|
||||
pintuan: {
|
||||
pintuan_label_bg: '#F7B500',
|
||||
pintuan_label_color: '#FFFFFF',
|
||||
pintuan_color: '#FA6400',
|
||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||
},
|
||||
...{
|
||||
super_member: {
|
||||
super_member_start_bg: '#7c7878',
|
||||
super_member_end_bg: '#201a18',
|
||||
super_member_start_text_color: '#FFDBA6',
|
||||
super_member_end_text_color: '#FFEBCA',
|
||||
},
|
||||
...{
|
||||
bargain: {
|
||||
bargain_promotion_color: '#F0353E',//活动背景
|
||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
seckill: {
|
||||
seckill_promotion_color: '#F83530',//活动背景
|
||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
giftcard: {
|
||||
giftcard_promotion_color: '#FF3369',//活动背景
|
||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
groupby: {
|
||||
groupby_promotion_color: '#E64136',//活动背景
|
||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
hover_nav_bg_color: '#FF407E',//背景色
|
||||
hover_nav_text_color: '#FFFFFF'
|
||||
},
|
||||
},
|
||||
'gold': {
|
||||
name: 'gold',
|
||||
@@ -244,7 +219,7 @@ export default {
|
||||
main_color_shallow: '#FFFAF1',//淡背景
|
||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||
...{
|
||||
goods_detail: {
|
||||
goods_price: 'rgba(252,82,39,1)',//价格
|
||||
promotion_tag: '#CFAF70',
|
||||
goods_card_bg: '#201A18',//会员卡背景
|
||||
@@ -255,39 +230,35 @@ export default {
|
||||
goods_btn_color: '#CFAF70',//按钮颜色
|
||||
goods_btn_color_shallow: '#444444',//副按钮颜色
|
||||
},
|
||||
...{
|
||||
pintuan: {
|
||||
pintuan_label_bg: '#F7B500',
|
||||
pintuan_label_color: '#FFFFFF',
|
||||
pintuan_color: '#FA6400',
|
||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||
},
|
||||
...{
|
||||
super_member: {
|
||||
super_member_start_bg: '#7c7878',
|
||||
super_member_end_bg: '#201a18',
|
||||
super_member_start_text_color: '#FFDBA6',
|
||||
super_member_end_text_color: '#FFEBCA',
|
||||
},
|
||||
...{
|
||||
bargain: {
|
||||
bargain_promotion_color: '#F0353E',//活动背景
|
||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
seckill: {
|
||||
seckill_promotion_color: '#F83530',//活动背景
|
||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
giftcard: {
|
||||
giftcard_promotion_color: '#FF3369',//活动背景
|
||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
groupby: {
|
||||
groupby_promotion_color: '#E64136',//活动背景
|
||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
hover_nav_bg_color: '#CFAF70',//背景色
|
||||
hover_nav_text_color: '#FFFFFF'
|
||||
},
|
||||
},
|
||||
'purple': {
|
||||
name: 'purple',
|
||||
@@ -300,7 +271,7 @@ export default {
|
||||
main_color_shallow: '#F8F3FF',//淡背景
|
||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||
...{
|
||||
goods_detail: {
|
||||
goods_price: 'rgba(252,82,39,1)',//价格
|
||||
promotion_tag: '#A253FF',
|
||||
goods_card_bg: '#201A18',//会员卡背景
|
||||
@@ -311,39 +282,35 @@ export default {
|
||||
goods_btn_color: '#A253FF',//按钮颜色
|
||||
goods_btn_color_shallow: '#222222',//副按钮颜色
|
||||
},
|
||||
...{
|
||||
pintuan: {
|
||||
pintuan_label_bg: '#F7B500',
|
||||
pintuan_label_color: '#FFFFFF',
|
||||
pintuan_color: '#FA6400',
|
||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||
},
|
||||
...{
|
||||
super_member: {
|
||||
super_member_start_bg: '#7c7878',
|
||||
super_member_end_bg: '#201a18',
|
||||
super_member_start_text_color: '#FFDBA6',
|
||||
super_member_end_text_color: '#FFEBCA',
|
||||
},
|
||||
...{
|
||||
bargain: {
|
||||
bargain_promotion_color: '#F0353E',//活动背景
|
||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
seckill: {
|
||||
seckill_promotion_color: '#F83530',//活动背景
|
||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
giftcard: {
|
||||
giftcard_promotion_color: '#FF3369',//活动背景
|
||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
groupby: {
|
||||
groupby_promotion_color: '#E64136',//活动背景
|
||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
hover_nav_bg_color: '#A253FF',//背景色
|
||||
hover_nav_text_color: '#FFFFFF'
|
||||
},
|
||||
},
|
||||
'yellow': {
|
||||
name: 'yellow',
|
||||
@@ -356,7 +323,7 @@ export default {
|
||||
main_color_shallow: '#FFFBEF',//淡背景
|
||||
price_color: 'rgba(252,82,39,1)',//价格颜色
|
||||
btn_text_color: '#303133',//按钮文字颜色
|
||||
...{
|
||||
goods_detail: {
|
||||
goods_price: 'rgba(252,82,39,1)',//价格
|
||||
promotion_tag: '#FFD009',
|
||||
goods_card_bg: '#201A18',//会员卡背景
|
||||
@@ -367,39 +334,35 @@ export default {
|
||||
goods_btn_color: '#FFD009',//按钮颜色
|
||||
goods_btn_color_shallow: '#1D262E',//副按钮颜色
|
||||
},
|
||||
...{
|
||||
pintuan: {
|
||||
pintuan_label_bg: '#F7B500',
|
||||
pintuan_label_color: '#FFFFFF',
|
||||
pintuan_color: '#FA6400',
|
||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||
},
|
||||
...{
|
||||
super_member: {
|
||||
super_member_start_bg: '#7c7878',
|
||||
super_member_end_bg: '#201a18',
|
||||
super_member_start_text_color: '#FFDBA6',
|
||||
super_member_end_text_color: '#FFEBCA',
|
||||
},
|
||||
...{
|
||||
bargain: {
|
||||
bargain_promotion_color: '#F0353E',//活动背景
|
||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
seckill: {
|
||||
seckill_promotion_color: '#F83530',//活动背景
|
||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
giftcard: {
|
||||
giftcard_promotion_color: '#FF3369',//活动背景
|
||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
groupby: {
|
||||
groupby_promotion_color: '#E64136',//活动背景
|
||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
hover_nav_bg_color: '#FFD009',//背景色
|
||||
hover_nav_text_color: '#303133'
|
||||
},
|
||||
},
|
||||
'black': {
|
||||
name: 'black',
|
||||
@@ -412,7 +375,7 @@ export default {
|
||||
main_color_shallow: '#efefef',//淡背景
|
||||
price_color: 'rgba(255,0,0,1)',//价格颜色
|
||||
btn_text_color: '#FFFFFF',//按钮文字颜色
|
||||
...{
|
||||
goods_detail: {
|
||||
goods_price: 'rgba(255,0,0,1)',//价格
|
||||
promotion_tag: '#222222',
|
||||
goods_card_bg: '#201A18',//会员卡背景
|
||||
@@ -423,38 +386,34 @@ export default {
|
||||
goods_btn_color: '#222222',//按钮颜色
|
||||
goods_btn_color_shallow: '#FA8B00',//副按钮颜色
|
||||
},
|
||||
...{
|
||||
pintuan: {
|
||||
pintuan_label_bg: '#F7B500',
|
||||
pintuan_label_color: '#FFFFFF',
|
||||
pintuan_color: '#FA6400',
|
||||
pintuan_promotion_color: '#FA3A1D',//活动背景
|
||||
pintuan_promotion_aux_color: '#FD9A01',//活动背景辅色
|
||||
},
|
||||
...{
|
||||
super_member: {
|
||||
super_member_start_bg: '#fadcb5',
|
||||
super_member_end_bg: '#f6bd74',
|
||||
super_member_start_text_color: '#ab6126',
|
||||
super_member_end_text_color: '#d19336',
|
||||
},
|
||||
...{
|
||||
bargain: {
|
||||
bargain_promotion_color: '#F0353E',//活动背景
|
||||
bargain_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
seckill: {
|
||||
seckill_promotion_color: '#F83530',//活动背景
|
||||
seckill_promotion_aux_color: '#FD9A01',//活动辅色
|
||||
},
|
||||
...{
|
||||
giftcard: {
|
||||
giftcard_promotion_color: '#FF3369',//活动背景
|
||||
giftcard_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
groupby: {
|
||||
groupby_promotion_color: '#E64136',//活动背景
|
||||
groupby_promotion_aux_color: '#F7B500',//活动辅色
|
||||
},
|
||||
...{
|
||||
hover_nav_bg_color: '#222222',//背景色
|
||||
hover_nav_text_color: '#FFFFFF'
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,148 +0,0 @@
|
||||
/**
|
||||
* 将常用的Uniapp提供的函数,存放到这里,按需引用
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 显示错误信息
|
||||
* @param {Exception} err
|
||||
* @param {Boolean} useModal
|
||||
*/
|
||||
const showError = (err, useModal = false) => {
|
||||
const content = err?.message || err?.errMsg || err?.toString();
|
||||
if (!useModal) {
|
||||
uni.showToast({
|
||||
title: content,
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
});
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: '错误提示',
|
||||
content,
|
||||
showCancel: false,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 打电话
|
||||
* @param {string} mobile 电话号码
|
||||
*/
|
||||
export const makePhoneCall = (mobile) => {
|
||||
try {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: `${mobile}`,
|
||||
success(e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
showError(err);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 拷贝文本(返回 Promise)
|
||||
* @param {*} text
|
||||
* @param {*} options
|
||||
* @returns {Promise} 返回 Promise,成功时 resolve,失败时 reject
|
||||
*/
|
||||
export const copyTextAsync = (text, { copySuccess = '', copyFailed = '' } = {}) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 输入验证
|
||||
if (!text && text !== '') {
|
||||
const error = new Error('复制文本不能为空');
|
||||
showError(error);
|
||||
reject(error);
|
||||
return;
|
||||
}
|
||||
|
||||
// 超时监测
|
||||
const timeoutId = setTimeout(() => {
|
||||
let error = new Error('复制操作长时间无响应,请检查相关权限及配置是否正确');
|
||||
// #ifdef MP-WEIXIN
|
||||
error = new Error([
|
||||
'复制操作长时间无响应!',
|
||||
'原因:',
|
||||
'1.微信平台->用户隐私保护指引->"剪贴板"功能未添加或审核未通过;',
|
||||
'2.微信平台对剪贴板API调用频率有限制'
|
||||
].join('\r\n'));
|
||||
// #endif
|
||||
showError(error, true);
|
||||
reject(error);
|
||||
}, 5000);
|
||||
|
||||
try {
|
||||
uni.setClipboardData({
|
||||
data: `${text}`,
|
||||
success: (res) => {
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
try {
|
||||
if (copySuccess) {
|
||||
uni.showToast({
|
||||
title: copySuccess,
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
showError(e);
|
||||
}
|
||||
|
||||
resolve(res);
|
||||
},
|
||||
fail: (err) => {
|
||||
clearTimeout(timeoutId);
|
||||
try {
|
||||
uni.showToast({
|
||||
title: err.message || err.errMsg || copyFailed || '复制失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
} catch (e) {
|
||||
showError(e);
|
||||
}
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
} catch (err) {
|
||||
clearTimeout(timeoutId);
|
||||
showError(err);
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 拷贝文本(回调形式,兼容旧代码)
|
||||
* @param {*} text
|
||||
* @param {*} options
|
||||
* @param {Function} callback 回调函数,接收 (success, error) 参数
|
||||
*/
|
||||
export const copyText = (text, options = {}, callback) => {
|
||||
copyTextAsync(text, options)
|
||||
.then(res => {
|
||||
if (callback) callback(true, null);
|
||||
})
|
||||
.catch(err => {
|
||||
if (callback) callback(false, err);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 打开定位
|
||||
* @param {Object} options
|
||||
*/
|
||||
export const openLocation = ({ latitude, longitude, name } = {}) => {
|
||||
try {
|
||||
uni.openLocation({
|
||||
latitude,
|
||||
longitude,
|
||||
name,
|
||||
});
|
||||
} catch (err) {
|
||||
showError(err);
|
||||
}
|
||||
}
|
||||
@@ -5,137 +5,16 @@ import {
|
||||
Weixin
|
||||
} from 'common/js/wx-jssdk.js';
|
||||
|
||||
|
||||
|
||||
// 关于页面路径,使用常量导出
|
||||
export const INDEX_PAGE_URL = '/pages/index/index';
|
||||
export const CATEGORY_PAGE_URL = '/pages_goods/category';
|
||||
export const CONTACT_PAGE_URL = '/pages_tool/contact/contact';
|
||||
export const MEMBER_PAGE_URL = '/pages_tool/member/index';
|
||||
export const LOGIN_PAGE_URL = '/pages_tool/login/login';
|
||||
export const AI_CHAT_PAGE_URL = '/pages_tool/ai-chat/index';
|
||||
|
||||
// 当前最新的tabBar.list (参见pages.json 中的tabBar.list 配置)
|
||||
export const systemTabBarList = [
|
||||
INDEX_PAGE_URL,
|
||||
CATEGORY_PAGE_URL,
|
||||
CONTACT_PAGE_URL,
|
||||
MEMBER_PAGE_URL
|
||||
];
|
||||
|
||||
/**
|
||||
* 适配子包路径
|
||||
* @param {string} url
|
||||
* @returns
|
||||
*/
|
||||
export const adaptSubpackageUrl = (url) => {
|
||||
/**
|
||||
* 特别注意:
|
||||
* 由于老版本或者后台系统服务未同步更新可以作为tabBarList的最新分包路径。历史遗留问题,需要与当前最新分包机制版本保持一致。
|
||||
* 系统当前的支持tarbarList(包含动态tabBar),注意这是实际分包后的路径
|
||||
* 根据匹配映射关系,修改url为实际分包后的路径
|
||||
*/
|
||||
// 定义前缀映射表
|
||||
const urlPrefixMap = {
|
||||
'/pages/promotion/': '/pages_promotion/',
|
||||
'/pages/order/': '/pages_order/',
|
||||
'/pages/goods/': '/pages_goods/',
|
||||
|
||||
'/pages/contact/': '/pages_tool/contact/',
|
||||
'/pages/member/': '/pages_tool/member/',
|
||||
'/pages/login/': '/pages_tool/login/',
|
||||
'/pages/agreement/': '/pages_tool/agreement/',
|
||||
'/pages/article/': '/pages_tool/article/',
|
||||
'/pages/cases/': '/pages_tool/cases/',
|
||||
'/pages/contact/': '/pages_tool/contact/',
|
||||
'/pages/files/': '/pages_tool/files/',
|
||||
'/pages/form/': '/pages_tool/form/',
|
||||
'/pages/help/': '/pages_tool/help/',
|
||||
'/pages/notice/': '/pages_tool/notice/',
|
||||
'/pages/pay/': '/pages_tool/pay/',
|
||||
'/pages/recharge/': '/pages_tool/recharge/',
|
||||
'/pages/seal/': '/pages_tool/seal/',
|
||||
'/pages/storeclose/': '/pages_tool/storeclose/',
|
||||
'/pages/vr/': '/pages_tool/vr/',
|
||||
'/pages/weapp/': '/pages_tool/weapp/',
|
||||
'/pages/webview/': '/pages_tool/webview/',
|
||||
};
|
||||
|
||||
// 构建正则表达式
|
||||
const regex = new RegExp(
|
||||
Object.keys(urlPrefixMap).map(key =>
|
||||
key.replace(/\//g, '\\/').replace(/\*/g, '.*')
|
||||
).join('|'),
|
||||
'g'
|
||||
);
|
||||
|
||||
// 替换函数
|
||||
function replacePrefix(str) {
|
||||
return str.replace(regex, match => {
|
||||
for (const [oldPrefix, newPrefix] of Object.entries(urlPrefixMap)) {
|
||||
if (match.startsWith(oldPrefix)) {
|
||||
return match.replace(oldPrefix, newPrefix);
|
||||
}
|
||||
}
|
||||
return match; // 默认返回原匹配
|
||||
});
|
||||
}
|
||||
|
||||
return replacePrefix(url);
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查tabBar是否激活
|
||||
* @param {string} linkUrl 链接路径 /pages/goods/category
|
||||
* @param {string} currentPageRoute 当前页面路径 /pages_goods/category
|
||||
* @returns {boolean} 是否激活
|
||||
*/
|
||||
export const checkTabBarActive = (linkUrl, currentPageRoute) => {
|
||||
const linkUrlParts = adaptSubpackageUrl(linkUrl).split('/');
|
||||
const currentPageRouteParts = currentPageRoute.split('/');
|
||||
|
||||
// console.log('diy-bottom-nav verify:', { linkUrlParts, currentPageRouteParts});
|
||||
|
||||
try {
|
||||
// 二级页面
|
||||
if (linkUrlParts[2] === currentPageRouteParts[2]) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// 一级页面,限定只能是goods相关
|
||||
if (linkUrlParts[1] === currentPageRouteParts[1] && linkUrlParts[1] === 'pages_goods') {
|
||||
return true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('diy-bottom-nav verify error:', error);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export default {
|
||||
/** 导出页面URL常量 */
|
||||
MEMBER_PAGE_URL,
|
||||
CATEGORY_PAGE_URL,
|
||||
CONTACT_PAGE_URL,
|
||||
INDEX_PAGE_URL,
|
||||
LOGIN_PAGE_URL,
|
||||
AI_CHAT_PAGE_URL,
|
||||
|
||||
/**
|
||||
* 页面跳转
|
||||
* @param {string} to 跳转链接 /pages/idnex/index
|
||||
* @param {Object} param 参数 {key : value, ...}, 默认{}
|
||||
* @param {string} mode 模式 navigateTo、redirectTo、reLaunch、tabbar, 默认navigateTo
|
||||
* @param {string} to 跳转链接 /pages/index/index
|
||||
* @param {Object} param 参数 {key : value, ...}
|
||||
* @param {string} mode 模式
|
||||
*/
|
||||
redirectTo(to, param = {}, mode = 'navigateTo') {
|
||||
redirectTo(to, param, mode) {
|
||||
let url = to;
|
||||
|
||||
// 替换url中的前缀
|
||||
console.log('页面跳转 redirectTo', to, param, mode);
|
||||
url = adaptSubpackageUrl(url);
|
||||
console.log('adaptSubpackageUrl', url);
|
||||
|
||||
let tabbarList = ['/pages/index/index', '/pages/goods/category', '/pages/goods/cart', '/pages/member/index'];
|
||||
if (param != undefined) {
|
||||
Object.keys(param).forEach(function(key) {
|
||||
if (url.indexOf('?') != -1) {
|
||||
@@ -145,40 +24,37 @@ export default {
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 针对tabBar.list中的路径,直接切换tabBar
|
||||
for (let i = 0; i < systemTabBarList.length; i++) {
|
||||
const tabBarUrl = systemTabBarList[i];
|
||||
if (url.indexOf(tabBarUrl) == 0) {
|
||||
// 首页特殊处理,采用switchTab, 其他页面采用redirectTo, 不能返回,不能退回
|
||||
(tabBarUrl == INDEX_PAGE_URL ? uni.switchTab : uni.redirectTo)({ url });
|
||||
for (let i = 0; i < tabbarList.length; i++) {
|
||||
if (url.indexOf(tabbarList[i]) == 0) {
|
||||
if(url.split('?')[1]) uni.setStorageSync('tabBarParams',url.split('?')[1]);
|
||||
else uni.removeStorageSync('tabBarParams')
|
||||
uni.switchTab({
|
||||
url
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 如果url不包含tabBarList中的路径,根据mode判断跳转方式
|
||||
switch (mode) {
|
||||
case 'tabbar':
|
||||
// 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。重置页面栈,仅保留 tabBar 页面
|
||||
// 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
|
||||
uni.switchTab({
|
||||
url
|
||||
});
|
||||
break;
|
||||
case 'redirectTo':
|
||||
// 关闭当前页面,跳转到应用内的某个页面。替换栈顶页面,长度不变(上限10层)
|
||||
// 关闭当前页面,跳转到应用内的某个页面。
|
||||
uni.redirectTo({
|
||||
url
|
||||
});
|
||||
break;
|
||||
case 'reLaunch':
|
||||
// 关闭所有页面,打开到应用内的某个页面。清空栈后打开新页面,长度=1
|
||||
// 关闭所有页面,打开到应用内的某个页面。
|
||||
uni.reLaunch({
|
||||
url
|
||||
});
|
||||
break;
|
||||
default:
|
||||
// 保留当前页面,跳转到应用内的某个页面,新增页面到栈顶,长度+1(上限10层)
|
||||
console.log('保留当前页面,navigateTo跳转到应用内的某个页面', url);
|
||||
// 保留当前页面,跳转到应用内的某个页面
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
@@ -202,19 +78,17 @@ export default {
|
||||
arr.pop();
|
||||
arr[arr.length - 1] = arr[arr.length - 1] + "_" + params.size.toUpperCase();
|
||||
arr.push(suffix);
|
||||
// if(img_path.indexOf('attachment') == -1){
|
||||
// img_path = arr.join(".");
|
||||
// }
|
||||
|
||||
img_path = arr.join(".");
|
||||
}
|
||||
if (img_path.indexOf("http://") == -1 && img_path.indexOf("https://") == -1) {
|
||||
path = Config.imgDomain + "/" + img_path;
|
||||
} else {
|
||||
// console.log(img_path)
|
||||
path = img_path;
|
||||
}
|
||||
if (Config.h5Domain.indexOf('https://') != -1) {
|
||||
path = path.replace('http://', 'https://');
|
||||
}
|
||||
}
|
||||
|
||||
// path += '?t=' + parseInt(new Date().getTime() / 1000);
|
||||
return path;
|
||||
},
|
||||
@@ -222,7 +96,7 @@ export default {
|
||||
* 时间戳转日期格式
|
||||
* @param {Object} timeStamp
|
||||
*/
|
||||
timeStampTurnTime(timeStamp, type = "") {
|
||||
timeStampTurnTime(timeStamp, format = "Y-m-d H:i:s") {
|
||||
if (timeStamp != undefined && timeStamp != "" && timeStamp > 0) {
|
||||
var date = new Date();
|
||||
date.setTime(timeStamp * 1000);
|
||||
@@ -237,14 +111,15 @@ export default {
|
||||
var second = date.getSeconds();
|
||||
minute = minute < 10 ? ('0' + minute) : minute;
|
||||
second = second < 10 ? ('0' + second) : second;
|
||||
if (type) {
|
||||
if (type == 'yearMonthDay') {
|
||||
return y + '年' + m + '月' + d + '日';
|
||||
}
|
||||
return y + '-' + m + '-' + d;
|
||||
} else {
|
||||
return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
|
||||
}
|
||||
|
||||
format = format.replace('Y', y);
|
||||
format = format.replace('m', m);
|
||||
format = format.replace('d', d);
|
||||
format = format.replace('H', h);
|
||||
format = format.replace('i', minute);
|
||||
format = format.replace('s', second);
|
||||
|
||||
return format;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
@@ -399,7 +274,7 @@ export default {
|
||||
count: imgs_num,
|
||||
sizeType: ['compressed'], //可以指定是原图还是压缩图,默认二者都有
|
||||
sourceType: ['album', 'camera'], //从相册或者拍照
|
||||
success: async function (res) {
|
||||
success: async (res) => {
|
||||
const tempFilePaths = res.tempFilePaths;
|
||||
var _data = data;
|
||||
var imgs = [];
|
||||
@@ -407,9 +282,16 @@ export default {
|
||||
title: '图片上传中'
|
||||
})
|
||||
for (var i = 0; i < tempFilePaths.length; i++) {
|
||||
try {
|
||||
var path = await _self.upload_file_server(tempFilePaths[i], _data, params.path,
|
||||
url);
|
||||
imgs.push(path);
|
||||
} catch (e) {
|
||||
this.showToast({
|
||||
title: e,
|
||||
});
|
||||
break;
|
||||
}
|
||||
if (imgs.length == tempFilePaths.length) {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
@@ -421,12 +303,13 @@ export default {
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
uni.hideLoading()
|
||||
if (err.errMsg != 'chooseImage:fail cancel') {
|
||||
uni.showToast({
|
||||
title: '上传失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//上传
|
||||
@@ -443,13 +326,25 @@ export default {
|
||||
name: 'file',
|
||||
fileType: data.fileType || 'image',
|
||||
formData: data,
|
||||
success: function (res) {
|
||||
success: (res) => {
|
||||
var path_str = JSON.parse(res.data);
|
||||
if (path_str.code >= 0) {
|
||||
resolve(path_str.data.pic_path);
|
||||
typeof callback == 'function' && callback(path_str.data.pic_path);
|
||||
} else {
|
||||
reject("error");
|
||||
reject(path_str.message);
|
||||
}
|
||||
uni.hideLoading();
|
||||
},
|
||||
fail: (res) => {
|
||||
if (res.statusCode != 200) {
|
||||
reject(res.errMsg || '上传错误');
|
||||
uni.hideLoading();
|
||||
}
|
||||
},
|
||||
complete: (res) => {
|
||||
if (res.statusCode != 200) {
|
||||
reject('服务器发生错误');
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -503,36 +398,6 @@ export default {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 判断是否在微信小程序的web-view中打开H5
|
||||
* @returns {boolean} 是否在微信小程序的web-view中
|
||||
*/
|
||||
isWeChatMiniProgram() {
|
||||
const userAgent = navigator.userAgent.toLowerCase();
|
||||
|
||||
// 微信小程序的web-view User-Agent会包含以下特征之一
|
||||
const miniProgramIndicators = [
|
||||
'miniprogram', // 普通微信小程序
|
||||
'wxwork', // 企业微信小程序
|
||||
'micromessenger/[0-9]+\.[0-9]+\.[0-9]+ nettype/wifi wxwebviewtype/1'
|
||||
];
|
||||
|
||||
return miniProgramIndicators.some(indicator => {
|
||||
if (typeof indicator === 'string' && indicator.includes('/')) {
|
||||
// 正则表达式匹配
|
||||
const regex = new RegExp(indicator, 'i');
|
||||
return regex.test(userAgent);
|
||||
}
|
||||
return userAgent.includes(indicator);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 判断是否在微信浏览器中打开H5(非小程序的web-view)
|
||||
* @returns {boolean} 是否在微信浏览器中打开的H5
|
||||
*/
|
||||
isWeChatBrowser() {
|
||||
return isWeiXin() && !isWeChatMiniProgram();
|
||||
},
|
||||
/**
|
||||
* 显示消息提示框
|
||||
* @param {Object} params 参数
|
||||
@@ -549,7 +414,7 @@ export default {
|
||||
* 检测苹果X以上的手机
|
||||
*/
|
||||
isIPhoneX() {
|
||||
let res = this.getDeviceInfo();
|
||||
let res = uni.getDeviceInfo();
|
||||
if (res.model.search('iPhone X') != -1) {
|
||||
return true;
|
||||
}
|
||||
@@ -557,33 +422,13 @@ export default {
|
||||
},
|
||||
//判断安卓还是iOS
|
||||
isAndroid() {
|
||||
let platform = this.getDeviceInfo().platform;
|
||||
let platform = uni.getDeviceInfo().platform
|
||||
if (platform == 'ios') {
|
||||
return false;
|
||||
} else if (platform == 'android') {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取设备信息(包含降级处理)
|
||||
*/
|
||||
getDeviceInfo() {
|
||||
try {
|
||||
return uni.getDeviceInfo();
|
||||
} catch (e) {
|
||||
return uni.getSystemInfoSync();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取窗口信息(包含降级处理)
|
||||
*/
|
||||
getWindowInfo() {
|
||||
try {
|
||||
return uni.getWindowInfo();
|
||||
} catch (e) {
|
||||
return uni.getSystemInfoSync();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 深度拷贝对象
|
||||
* @param {Object} obj
|
||||
@@ -605,9 +450,6 @@ export default {
|
||||
}
|
||||
return cloneObj
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 打开微信企业客服
|
||||
* @param {Function} fallbackFunc 降级处理函数
|
||||
@@ -640,11 +482,11 @@ export default {
|
||||
* @param {Object} link
|
||||
*/
|
||||
diyRedirectTo(link) {
|
||||
|
||||
//if (link == null || Object.keys(link).length == 1) return;
|
||||
if (link == null || Object.keys(link).length == 1) return;
|
||||
|
||||
// 外部链接
|
||||
if (link.wap_url && link.wap_url.indexOf('http') != -1) {
|
||||
if (link.wap_url && link.wap_url.indexOf('http') != -1 || link.wap_url && link.wap_url.indexOf('https') != -1) {
|
||||
|
||||
// #ifdef H5
|
||||
window.location.href = link.wap_url;
|
||||
// #endif
|
||||
@@ -657,6 +499,7 @@ export default {
|
||||
|
||||
} else if (link.appid) {
|
||||
// 跳转其他小程序
|
||||
|
||||
uni.navigateToMiniProgram({
|
||||
appId: link.appid,
|
||||
path: link.page
|
||||
@@ -664,12 +507,11 @@ export default {
|
||||
|
||||
} else if (link.name == 'MOBILE' && !link.wap_url) {
|
||||
// 拨打电话
|
||||
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: link.mobile,
|
||||
success: (res) => {
|
||||
},
|
||||
fail: (res) => {
|
||||
}
|
||||
success: (res) => {},
|
||||
fail: (res) => {}
|
||||
});
|
||||
|
||||
} else if (link.name == 'MEMBER_CONTACT') {
|
||||
@@ -759,9 +601,12 @@ export default {
|
||||
*/
|
||||
uniappIsIPhoneX() {
|
||||
let isIphoneX = false;
|
||||
let systemInfo = this.getDeviceInfo();
|
||||
let deviceInfo = uni.getDeviceInfo();
|
||||
let windowInfo = uni.getWindowInfo();
|
||||
// #ifdef MP
|
||||
if (systemInfo.model.search('iPhone X') != -1 || systemInfo.model.search('iPhone 11') != -1 || systemInfo.model.search('iPhone 12') != -1 || systemInfo.model.search('iPhone 13') != -1) {
|
||||
if (deviceInfo.model.search('iPhone X') != -1 || deviceInfo.model.search('iPhone 11') != -1 || deviceInfo.model
|
||||
.search('iPhone 12') != -1 || deviceInfo.model.search('iPhone 13') != -1 || parseInt(deviceInfo.model.split(
|
||||
'iPhone')[1]) > 13) {
|
||||
isIphoneX = true;
|
||||
}
|
||||
// #endif
|
||||
@@ -770,11 +615,11 @@ export default {
|
||||
var u = navigator.userAgent;
|
||||
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
|
||||
if (isIOS) {
|
||||
if (systemInfo.screenWidth == 375 && systemInfo.screenHeight == 812 && systemInfo.pixelRatio == 3) {
|
||||
if (windowInfo.screenWidth == 375 && windowInfo.screenHeight == 812 && deviceInfo.pixelRatio == 3) {
|
||||
isIphoneX = true;
|
||||
} else if (systemInfo.screenWidth == 414 && systemInfo.screenHeight == 896 && systemInfo.pixelRatio == 3) {
|
||||
} else if (windowInfo.screenWidth == 414 && windowInfo.screenHeight == 896 && deviceInfo.pixelRatio == 3) {
|
||||
isIphoneX = true;
|
||||
} else if (systemInfo.screenWidth == 414 && systemInfo.screenHeight == 896 && systemInfo.pixelRatio == 2) {
|
||||
} else if (windowInfo.screenWidth == 414 && windowInfo.screenHeight == 896 && deviceInfo.pixelRatio == 2) {
|
||||
isIphoneX = true;
|
||||
}
|
||||
}
|
||||
@@ -786,9 +631,9 @@ export default {
|
||||
*/
|
||||
uniappIsIPhone11() {
|
||||
let isIphone11 = false;
|
||||
let systemInfo = this.getDeviceInfo();
|
||||
let deviceInfo = uni.getDeviceInfo();
|
||||
// #ifdef MP
|
||||
if (systemInfo.model.search('iPhone 11') != -1) {
|
||||
if (deviceInfo.model.search('iPhone 11') != -1) {
|
||||
isIphone11 = true;
|
||||
}
|
||||
// #endif
|
||||
@@ -797,7 +642,6 @@ export default {
|
||||
// #ifdef H5
|
||||
//判断该浏览器是否为safaria浏览器
|
||||
isSafari() {
|
||||
let res = this.getDeviceInfo();
|
||||
var ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1 &&
|
||||
ua.indexOf('linux') === -1 && ua.indexOf('android') === -1 && ua.indexOf('chrome') === -1 &&
|
||||
@@ -836,7 +680,7 @@ export default {
|
||||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||||
return routes.length ? routes[routes.length - 1].route : '';
|
||||
},
|
||||
goBack(backUrl = INDEX_PAGE_URL) {
|
||||
goBack(backUrl = '/pages/index/index') {
|
||||
if (getCurrentPages().length == 1) {
|
||||
this.redirectTo(backUrl);
|
||||
} else {
|
||||
@@ -844,16 +688,6 @@ export default {
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 隐藏“返回首页/小房子”按钮
|
||||
* 这个函数,用到页面show, onshow 的生命周期时
|
||||
*/
|
||||
hideHomeButton() {
|
||||
// #ifdef MP-WEIXIN
|
||||
wx.hideHomeButton();
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param val 转化时间字符串 (转化时分秒)
|
||||
* @returns {string}
|
||||
*/
|
||||
@@ -872,7 +706,7 @@ export default {
|
||||
* 获取定位信息
|
||||
*/
|
||||
getLocation(param = {}) {
|
||||
/*uni.getLocation({
|
||||
uni.getLocation({
|
||||
type: param.type ?? 'gcj02',
|
||||
success: res => {
|
||||
store.commit('setLocation', res);
|
||||
@@ -884,7 +718,7 @@ export default {
|
||||
complete: res => {
|
||||
typeof param.complete == 'function' && param.complete(res);
|
||||
}
|
||||
});*/
|
||||
});
|
||||
},
|
||||
// 计算两个经纬度之间的距离
|
||||
getDistance(lat1, lng1, lat2, lng2) {
|
||||
@@ -892,8 +726,8 @@ export default {
|
||||
var radLat2 = lat2 * Math.PI / 180.0;
|
||||
var a = radLat1 - radLat2;
|
||||
var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
|
||||
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
|
||||
Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
|
||||
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(
|
||||
Math.sin(b / 2), 2)));
|
||||
s = s * 6378.137; // EARTH_RADIUS;
|
||||
s = Math.round(s * 10000) / 10000;
|
||||
return s;
|
||||
@@ -920,13 +754,12 @@ export default {
|
||||
/**
|
||||
* 微信订阅消息
|
||||
*/
|
||||
subscribeMessage(keywords) {
|
||||
let url = ""
|
||||
subscribeMessage(keywords, callback) {
|
||||
// #ifdef MP-WEIXIN
|
||||
url = '/weapp/api/weapp/messagetmplids';
|
||||
let url = '/weapp/api/weapp/messagetmplids';
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
url = '/aliapp/api/aliapp/messagetmplids';
|
||||
let url = '/aliapp/api/aliapp/messagetmplids';
|
||||
// #endif
|
||||
Http.sendRequest({
|
||||
url,
|
||||
@@ -943,6 +776,9 @@ export default {
|
||||
},
|
||||
fail: (res) => {
|
||||
console.log('fail', res)
|
||||
},
|
||||
complete: (res) => {
|
||||
typeof callback == 'function' && callback();
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
@@ -955,10 +791,18 @@ export default {
|
||||
},
|
||||
fail: res => {
|
||||
console.log('fail', res)
|
||||
},
|
||||
complete: (res) => {
|
||||
typeof callback == 'function' && callback();
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
} else {
|
||||
typeof callback == 'function' && callback();
|
||||
}
|
||||
},
|
||||
fail: res => {
|
||||
typeof callback == 'function' && callback();
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -970,7 +814,7 @@ export default {
|
||||
if (!path) {
|
||||
let route = this.getCurrentRoute();
|
||||
path = route.path;
|
||||
if (path == '/pages_tool/member/index') {
|
||||
if (path == '/pages/member/index') {
|
||||
return new Promise((resolve, reject) => {
|
||||
resolve({})
|
||||
});
|
||||
@@ -991,10 +835,8 @@ export default {
|
||||
title: shareConfig.title,
|
||||
path: shareConfig.path,
|
||||
imageUrl: shareConfig.imageUrl,
|
||||
success: res => {
|
||||
},
|
||||
fail: res => {
|
||||
}
|
||||
success: res => {},
|
||||
fail: res => {}
|
||||
}
|
||||
//分享到朋友圈
|
||||
let query = '';
|
||||
@@ -1030,8 +872,7 @@ export default {
|
||||
Http.sendRequest({
|
||||
url: '/wechat/api/wechat/jssdkconfig',
|
||||
data: {
|
||||
url: uni.getSystemInfoSync().platform == 'ios' ? uni.getStorageSync('initUrl') : window.location
|
||||
.href
|
||||
url: uni.getDeviceInfo().platform == 'ios' ? uni.getStorageSync('initUrl') : window.location.href
|
||||
},
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
@@ -1054,7 +895,7 @@ export default {
|
||||
//获取当前路由
|
||||
getCurrentRoute() {
|
||||
let currentRoutes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||||
let currentRoute = currentRoutes[currentRoutes.length - 1].route //获取当前页面路由
|
||||
let currentRoute = currentRoutes[currentRoutes.length - 1].route; //获取当前页面路由
|
||||
let currentParam = currentRoutes[currentRoutes.length - 1].options; //获取路由参数
|
||||
// 拼接参数
|
||||
let param = [];
|
||||
@@ -1134,12 +975,10 @@ export default {
|
||||
var points_D = [];
|
||||
var points_E = [];
|
||||
const DIST_AB = Math.sqrt(Math.pow(points[1]['x'] - points[0]['x'], 2) + Math.pow(points[1]['y'] - points[0][
|
||||
'y'
|
||||
], 2));
|
||||
'y'], 2));
|
||||
// 邻控制BC点间距
|
||||
const DIST_BC = Math.sqrt(Math.pow(points[2]['x'] - points[1]['x'], 2) + Math.pow(points[2]['y'] - points[1][
|
||||
'y'
|
||||
], 2));
|
||||
'y'], 2));
|
||||
// D每次在AB方向上移动的距离
|
||||
if (points[0]['x'] > points[2]['x']) {
|
||||
var EACH_MOVE_AD = -(DIST_AB / times);
|
||||
@@ -1202,73 +1041,156 @@ export default {
|
||||
var parse = /^\d{11}$/.test(mobile);
|
||||
return parse;
|
||||
},
|
||||
/**
|
||||
* 判断是否为快应用环境
|
||||
* @returns {boolean} 是否为快应用
|
||||
*/
|
||||
isQuickApp() {
|
||||
// #ifndef QUICKAPP-WEBVIEW
|
||||
let _isQuickApp = false;
|
||||
try {
|
||||
const ua = navigator?.userAgent?.toLowerCase();
|
||||
// console.log('ua = ', ua);
|
||||
_isQuickApp = ua.indexOf('quickapp') !== -1;
|
||||
// 获取缓存key
|
||||
getStorageKey(key) {
|
||||
return Config.storagePrefix + key;
|
||||
},
|
||||
// 重写uni缓存方法
|
||||
rewriteUniStorageMethod() {
|
||||
const setStorageSync = uni.setStorageSync;
|
||||
const setStorage = uni.setStorage;
|
||||
const getStorage = uni.getStorage;
|
||||
const getStorageSync = uni.getStorageSync;
|
||||
const removeStorage = uni.removeStorage;
|
||||
const removeStorageSync = uni.removeStorageSync;
|
||||
|
||||
if (!_isQuickApp) {
|
||||
// 特殊说明由于网站是嵌入到快应用的Webview组件中<web>,UA中不会包含quickapp字符串,
|
||||
// 但是会包含uniacid参数,所以这里通过uniacid参数来判断是否为快应用环境
|
||||
_isQuickApp = ua.indexOf('uniacid=') !== -1;
|
||||
}
|
||||
} catch (e) { }
|
||||
uni.setStorage = (options) => {
|
||||
options.key = this.getStorageKey(options.key);
|
||||
setStorage(options)
|
||||
};
|
||||
|
||||
if (!_isQuickApp) {
|
||||
const systemInfo = this.getDeviceInfo();
|
||||
_isQuickApp = systemInfo?.platform === 'quickapp' || process?.env?.UNI_PLATFORM === 'quickapp';
|
||||
uni.setStorageSync = (key, data) => {
|
||||
setStorageSync(this.getStorageKey(key), data)
|
||||
};
|
||||
|
||||
uni.getStorage = (options) => {
|
||||
options.key = this.getStorageKey(options.key);
|
||||
getStorage(options)
|
||||
};
|
||||
|
||||
uni.getStorageSync = (key) => {
|
||||
return getStorageSync(this.getStorageKey(key))
|
||||
};
|
||||
|
||||
uni.removeStorage = (options) => {
|
||||
options.key = this.getStorageKey(options.key);
|
||||
removeStorage(options)
|
||||
};
|
||||
|
||||
uni.removeStorageSync = (key) => {
|
||||
return removeStorageSync(this.getStorageKey(key))
|
||||
}
|
||||
},
|
||||
//生成唯一id
|
||||
generateUUID() {
|
||||
var d = new Date().getTime(); //Timestamp
|
||||
var d2 = (performance && performance.now && (performance.now() * 1000)) ||
|
||||
0; //Time in microseconds since page-load or 0 if unsupported
|
||||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||||
var r = Math.random() * 16; //random number between 0 and 16
|
||||
if (d > 0) { //Use timestamp until depleted
|
||||
r = (d + r) % 16 | 0;
|
||||
d = Math.floor(d / 16);
|
||||
} else { //Use microseconds since page-load if supported
|
||||
r = (d2 + r) % 16 | 0;
|
||||
d2 = Math.floor(d2 / 16);
|
||||
}
|
||||
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
|
||||
});
|
||||
},
|
||||
// 获取弹新人礼弹框页面
|
||||
openRegisterRewardPath(back) {
|
||||
return uni.getStorageSync('initiateLogin') || back;
|
||||
},
|
||||
// 登录完成后返回页面
|
||||
loginComplete(back, mode) {
|
||||
let url = uni.getStorageSync('initiateLogin') || back;
|
||||
uni.removeStorageSync('initiateLogin')
|
||||
|
||||
let jump = true;
|
||||
let arr = getCurrentPages().reverse();
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
if (url.indexOf(arr[i].route) != -1) {
|
||||
jump = false;
|
||||
uni.navigateBack({
|
||||
delta: i
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (jump) {
|
||||
this.redirectTo(url, {}, 'redirectTo')
|
||||
}
|
||||
},
|
||||
// 微信提现收款
|
||||
merchantTransfer(data,withdrawInfo,callback) {
|
||||
Http.sendRequest({
|
||||
url: '/wechatpay/api/transfer/transfer',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0) {
|
||||
uni.hideLoading();
|
||||
// #ifdef MP-WEIXIN
|
||||
if (wx.canIUse('requestMerchantTransfer')) {
|
||||
wx.requestMerchantTransfer({
|
||||
mchId: withdrawInfo.mch_id,
|
||||
appId: withdrawInfo.app_id,
|
||||
package: res.data.package_info,
|
||||
success: (res) => {
|
||||
typeof callback == 'function' && callback(res);
|
||||
},
|
||||
fail: (res) => {
|
||||
typeof callback == 'function' && callback(res);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
wx.showModal({
|
||||
content: '你的微信版本过低,请更新至最新版本。',
|
||||
showCancel: false,
|
||||
});
|
||||
}
|
||||
return _isQuickApp;
|
||||
// #endif
|
||||
|
||||
return true;
|
||||
// #ifdef H5
|
||||
if (this.isWeiXin()) {
|
||||
if (uni.getDeviceInfo().platform == 'ios') {
|
||||
var url = uni.getStorageSync('initUrl');
|
||||
} else {
|
||||
var url = location.href;
|
||||
}
|
||||
// 获取jssdk配置
|
||||
Http.sendRequest({
|
||||
url: '/wechat/api/wechat/jssdkconfig',
|
||||
data: {
|
||||
url: url
|
||||
},
|
||||
/**
|
||||
* 判断是否为华为快应用环境
|
||||
* @returns {boolean} 是否为华为快应用
|
||||
*/
|
||||
isHuaweiQuickApp() {
|
||||
if (!this.isQuickApp()) return false;
|
||||
|
||||
// #ifndef QUICKAPP-WEBVIEW-HUAWEI
|
||||
const systemInfo = this.getDeviceInfo();
|
||||
return systemInfo.brand === 'HUAWEI' || systemInfo.manufacturer === 'HUAWEI' ||
|
||||
(typeof qh !== 'undefined' && qh.platform === 'huawei');
|
||||
success: jssdkRes => {
|
||||
var wxJS = new Weixin();
|
||||
wxJS.init(jssdkRes.data);
|
||||
wxJS.withdrawWechat({
|
||||
mch_id: withdrawInfo.mch_id,
|
||||
wechat_appid: withdrawInfo.app_id,
|
||||
package_info: res.data.package_info
|
||||
},
|
||||
res => {
|
||||
typeof callback == 'function' && callback(res);
|
||||
},
|
||||
);
|
||||
}
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
return true;
|
||||
} else {
|
||||
this.showToast({
|
||||
title: res.message,
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
this.showToast({
|
||||
title: err.message,
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
/**
|
||||
* 蛇形命名转驼峰命名
|
||||
* @param {string} str 蛇形命名字符串
|
||||
* @returns {string} 驼峰命名字符串
|
||||
*/
|
||||
snakeToCamel(str) {
|
||||
return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
|
||||
},
|
||||
|
||||
/**
|
||||
* 蛇形命名转驼峰命名(递归处理对象中的所有属性名)
|
||||
* @param {Object} obj 包含蛇形命名字符串属性的对象
|
||||
* @returns {Object} 驼峰命名字符串属性的对象
|
||||
*/
|
||||
snakeToCamelForObj(obj) {
|
||||
if (typeof obj !== 'object' || obj === null) return obj;
|
||||
if (Array.isArray(obj)) return obj.map(this.snakeToCamelForObj.bind(this));
|
||||
const newObj = {};
|
||||
for (const key in obj) {
|
||||
if (Object.hasOwnProperty.call(obj, key)) {
|
||||
const newKey = this.snakeToCamel(key);
|
||||
newObj[newKey] = this.snakeToCamelForObj(obj[key]);
|
||||
}
|
||||
}
|
||||
return newObj;
|
||||
}
|
||||
}
|
||||
@@ -112,6 +112,29 @@ let Weixin = function () {
|
||||
})
|
||||
}
|
||||
|
||||
// 提现
|
||||
this.withdrawWechat = function (data,callback) {
|
||||
wx.ready(function () {
|
||||
wx.checkJsApi({
|
||||
jsApiList: ['requestMerchantTransfer'],
|
||||
success: function (res) {
|
||||
if (res.checkResult['requestMerchantTransfer']) {
|
||||
WeixinJSBridge.invoke('requestMerchantTransfer', {
|
||||
mchId: data.mch_id,
|
||||
appId: data.wechat_appid,
|
||||
package: data.package_info,
|
||||
},
|
||||
function (res) {
|
||||
typeof callback == 'function' && callback(res);
|
||||
}
|
||||
);
|
||||
} else {
|
||||
alert('你的微信版本过低,请更新至最新版本。');
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
// 公共微信视频号样式
|
||||
|
||||
// CSS 变量
|
||||
:root {
|
||||
// 尺寸变量
|
||||
--channel-play-btn-size: 80rpx;
|
||||
--channel-play-btn-small-size: 60rpx;
|
||||
--channel-play-btn-icon-size: 40rpx;
|
||||
--channel-play-btn-icon-small-size: 30rpx;
|
||||
--channel-border-radius: 12rpx;
|
||||
--channel-stats-padding: 10rpx;
|
||||
--channel-info-wrap-padding: 10rpx 0;
|
||||
|
||||
// 字体变量
|
||||
--channel-name-font-size: 28rpx;
|
||||
--video-title-font-size: 28rpx;
|
||||
--video-title-small-font-size: 24rpx;
|
||||
--video-stats-font-size: 24rpx;
|
||||
--channel-stats-font-size: 20rpx;
|
||||
|
||||
// 颜色变量
|
||||
--channel-name-color: #333;
|
||||
--video-title-color: #333;
|
||||
--video-title-small-color: #666;
|
||||
--video-stats-color: #999;
|
||||
--channel-stats-color: #fff;
|
||||
--channel-border-color: #f0f0f0;
|
||||
--channel-play-btn-bg: rgba(0, 0, 0, 0.4);
|
||||
--channel-stats-bg: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
|
||||
|
||||
// 间距变量
|
||||
--channel-name-margin-bottom: 4rpx;
|
||||
--video-title-margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
// 响应式设计
|
||||
@media (max-width: 375px) {
|
||||
:root {
|
||||
--channel-play-btn-size: 70rpx;
|
||||
--channel-play-btn-small-size: 50rpx;
|
||||
--channel-play-btn-icon-size: 35rpx;
|
||||
--channel-play-btn-icon-small-size: 25rpx;
|
||||
--channel-name-font-size: 24rpx;
|
||||
--video-title-font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) {
|
||||
:root {
|
||||
--channel-play-btn-size: 90rpx;
|
||||
--channel-play-btn-small-size: 70rpx;
|
||||
--channel-play-btn-icon-size: 45rpx;
|
||||
--channel-play-btn-icon-small-size: 35rpx;
|
||||
--channel-name-font-size: 32rpx;
|
||||
--video-title-font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 播放按钮样式
|
||||
.channel-play-btn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--channel-play-btn-size);
|
||||
height: var(--channel-play-btn-size);
|
||||
background-color: var(--channel-play-btn-bg);
|
||||
border-radius: 50%;
|
||||
|
||||
.play-icon {
|
||||
width: var(--channel-play-btn-icon-size);
|
||||
height: var(--channel-play-btn-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
// 小尺寸播放按钮(用于列表)
|
||||
.channel-play-btn.small {
|
||||
width: var(--channel-play-btn-small-size);
|
||||
height: var(--channel-play-btn-small-size);
|
||||
|
||||
.play-icon {
|
||||
width: var(--channel-play-btn-icon-small-size);
|
||||
height: var(--channel-play-btn-icon-small-size);
|
||||
}
|
||||
}
|
||||
|
||||
// 视频统计信息
|
||||
.channel-stats {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--channel-stats-bg);
|
||||
padding: var(--channel-stats-padding);
|
||||
color: var(--channel-stats-color);
|
||||
font-size: var(--channel-stats-font-size);
|
||||
}
|
||||
|
||||
// 视频信息容器
|
||||
.channel-info-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: var(--channel-info-wrap-padding);
|
||||
|
||||
.channel-name {
|
||||
margin-bottom: var(--channel-name-margin-bottom);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: var(--channel-name-font-size);
|
||||
font-weight: 500;
|
||||
color: var(--channel-name-color);
|
||||
}
|
||||
|
||||
.video-title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: var(--video-title-small-font-size);
|
||||
color: var(--video-title-small-color);
|
||||
}
|
||||
}
|
||||
|
||||
// 视频标题
|
||||
.video-title {
|
||||
font-size: var(--video-title-font-size);
|
||||
font-weight: 500;
|
||||
color: var(--video-title-color);
|
||||
margin-bottom: var(--video-title-margin-bottom);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
// 视频统计信息(非绝对定位版本)
|
||||
.video-stats {
|
||||
font-size: var(--video-stats-font-size);
|
||||
color: var(--video-stats-color);
|
||||
}
|
||||
|
||||
|
||||
@@ -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">
|
||||
::v-deep .uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-bargain {
|
||||
overflow: hidden;
|
||||
|
||||
// 头部
|
||||
.bargain-head {
|
||||
&.style-1 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
|
||||
.left-img {
|
||||
height: 40rpx;
|
||||
width: 156rpx;
|
||||
}
|
||||
|
||||
.head-content {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: $font-size-tag;
|
||||
margin-right: auto;
|
||||
margin-left: 20rpx;
|
||||
line-height: 1;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background-color: #fff;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: -12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-sub;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20rpx;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
|
||||
.left-img {
|
||||
height: 40rpx;
|
||||
width: 156rpx;
|
||||
}
|
||||
|
||||
.head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36rpx;
|
||||
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 2rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
position: relative;
|
||||
left: 6rpx;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
padding: 6rpx 4rpx 4rpx;
|
||||
background-color: #fff;
|
||||
color: #ffbd5b;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.6);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 商品列表
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 6rpx 0 6rpx 20rpx;
|
||||
|
||||
.goods-name {
|
||||
&.multi-hidden {
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
color: var(--btn-text-color);
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
min-width: 112rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
font-size: $font-size-tag;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
.discount-price {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 10rpx;
|
||||
margin-right: 16rpx;
|
||||
|
||||
.bg {
|
||||
margin-left: 6rpx;
|
||||
width: auto;
|
||||
height: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #ffeadb;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #fa1a1a;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: -18rpx;
|
||||
}
|
||||
|
||||
.curr {
|
||||
width: 0;
|
||||
height: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fa1a1a;
|
||||
position: relative;
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
right: -20rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
max-width: inherit !important;
|
||||
max-height: inherit !important;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: $font-size-tag;
|
||||
margin-top: 12rpx;
|
||||
line-height: 1;
|
||||
|
||||
text {
|
||||
color: #fa1a1a;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
.progress {
|
||||
display: flex;
|
||||
color: $color-tip;
|
||||
font-size: $font-size-sub;
|
||||
|
||||
.num {
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.content {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 180rpx;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
padding-left: 20rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #ffffff;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 160rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.original-price {
|
||||
margin-top: 4rpx;
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
line-height: 1;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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
@@ -1,645 +0,0 @@
|
||||
<template>
|
||||
<view class="channel-list-container" :style="[componentStyle, { '--row-count': value.rowCount }]">
|
||||
<!-- 轮播模式 -->
|
||||
<swiper v-if="value.showStyle == 'carousel' && carouselConfig.type != 'hide'" :indicator-dots="isIndicatorDots"
|
||||
:autoplay="carouselConfig.autoplay || false" :interval="carouselConfig.interval || 3000"
|
||||
:duration="carouselConfig.duration || 500" :circular="carouselConfig.circular || false"
|
||||
:style="swiperHeight" class="channel-swiper">
|
||||
<swiper-item v-for="(slide, slideIndex) in swiperSlides" :key="slideIndex">
|
||||
<view :class="['swiper-slide-content', 'row1-of' + value.rowCount]">
|
||||
<view v-for="(item, index) in slide" :key="index" :class="['channel-item', value.mode]">
|
||||
<!-- 视频号视频卡片,轮播模式 -->
|
||||
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
|
||||
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
|
||||
:show-view-count="value.showViewCount" :cover-style="computedCoverStyle"
|
||||
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- 固定布局模式 -->
|
||||
<view v-else-if="value.showStyle == 'fixed'" :class="['channel-list', 'row1-of' + value.rowCount]">
|
||||
<view v-for="(item, index) in value.list" :key="index" class="channel-item">
|
||||
<!-- 视频号视频卡片,列表模式 -->
|
||||
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
|
||||
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
|
||||
:show-view-count="value.showViewCount" :cover-style="computedCoverStyle"
|
||||
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 其他布局模式(如滚动布局) -->
|
||||
<scroll-view v-else
|
||||
:class="['channel-nav', value.showStyle == 'fixed' ? 'fixed-layout' : 'singleSlide', 'row1-of' + value.rowCount]"
|
||||
:scroll-x="true"
|
||||
:scroll-y="false"
|
||||
:enhanced="true"
|
||||
:bounces="false">
|
||||
<view class="uni-scroll-view-content">
|
||||
<view v-for="(item, index) in value.list" :key="index"
|
||||
:class="['channel-nav-item', value.mode, 'row1-of' + value.rowCount]">
|
||||
<!-- 视频号视频卡片,滚动模式 -->
|
||||
<diy-channel-video :value="item" @video-play="playVideo" :list-mode="true"
|
||||
:title-line-clamp="value.titleLineClamp" :show-play-btn="value.showPlayBtn"
|
||||
:show-view-count="value.showViewCount" :cover-style="computedCoverStyle"
|
||||
:play-btn-style="value.playBtnStyle" :aspect-ratio="value.aspectRatio" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 微信视频号列表组件
|
||||
* 支持多种布局模式,包括固定布局和滚动布局
|
||||
* 可配置列数、视频高度、标题行数等属性
|
||||
* 用于在页面中展示多个微信视频号视频
|
||||
*/
|
||||
import DiyMinx from './minx.js'
|
||||
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
|
||||
|
||||
export default {
|
||||
name: 'diy-channel-list',
|
||||
props: {
|
||||
/**
|
||||
* 组件配置数据
|
||||
* @type {Object}
|
||||
* @default () => ({})
|
||||
* @property {string} showStyle - 显示样式,可选值:carousel, fixed, singleSlide
|
||||
* @property {number} rowCount - 每行显示的视频数量
|
||||
* @property {Array} list - 视频列表数据
|
||||
* @property {string} componentBgColor - 组件背景色
|
||||
* @property {string} componentAngle - 组件圆角类型,可选值:round
|
||||
* @property {number} topAroundRadius - 顶部圆角半径
|
||||
* @property {number} bottomAroundRadius - 底部圆角半径
|
||||
* @property {Object} ornament - 装饰效果配置
|
||||
* @property {boolean} showViewCount - 是否显示播放量,可选值:true, false
|
||||
* @property {number} titleLineClamp - 标题显示行数
|
||||
* @property {string} aspectRatio - 视频比例,可选值:16:9, 3:4
|
||||
* @property {boolean} showPlayBtn - 是否显示播放按钮
|
||||
* @property {Object} coverStyle - 视频封面图样式
|
||||
* @property {Object} playBtnStyle - 播放按钮样式
|
||||
* @property {string} mode - 显示模式, 可选值:video, text, image, graphic
|
||||
* @property {number} imageSize - 图片尺寸(仅在特定模式下使用)
|
||||
* @property {number} pageCount - 每页显示的视频数量
|
||||
* @property {Object} carousel - 轮播配置
|
||||
* @property {string} carousel.type - 轮播类型,可选值:default, hide
|
||||
* @property {boolean} carousel.autoplay - 是否自动播放,默认false
|
||||
* @property {number} carousel.interval - 自动播放间隔,默认3000ms
|
||||
* @property {number} carousel.duration - 切换动画时长,默认500ms
|
||||
* @property {boolean} carousel.circular - 是否循环播放,默认false
|
||||
*/
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
pageWidth: '', // 页面宽度
|
||||
indicatorDots: false, // 是否显示轮播指示器
|
||||
swiperCurrent: 0 // 当前轮播索引
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 组件创建时的逻辑
|
||||
// 可以在这里进行初始化操作,如获取页面宽度等
|
||||
},
|
||||
mounted() {
|
||||
// 组件挂载后添加鼠标拖拽滚动功能
|
||||
if (!['fixed', 'carousel'].includes(this.value?.showStyle)) {
|
||||
this.$nextTick(() => {
|
||||
this.addMouseDragScroll();
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
/**
|
||||
* 组件刷新监听
|
||||
* 当组件需要刷新时触发
|
||||
* @param {*} newValue - 新值
|
||||
*/
|
||||
componentRefresh(newValue) {
|
||||
// 监听组件刷新
|
||||
// 可以在这里处理组件刷新时的逻辑
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
carouselConfig() {
|
||||
return this.value?.carousel || {
|
||||
type: 'default',
|
||||
autoplay: false,
|
||||
interval: 3000,
|
||||
duration: 500,
|
||||
circular: true
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 组件样式
|
||||
* 根据配置动态生成样式字符串,包括背景色、圆角、阴影和边框
|
||||
* @returns {string} 样式字符串
|
||||
*/
|
||||
componentStyle() {
|
||||
const style = {};
|
||||
// 背景色
|
||||
if (this.value?.componentBgColor) {
|
||||
style.backgroundColor = this.value?.componentBgColor;
|
||||
}
|
||||
|
||||
// 圆角样式
|
||||
if (this.value?.componentAngle == 'round') {
|
||||
style.borderTopLeftRadius = (2 * this.value?.topAroundRadius) + 'rpx';
|
||||
style.borderTopRightRadius = (2 * this.value?.topAroundRadius) + 'rpx';
|
||||
style.borderBottomLeftRadius = (2 * this.value?.bottomAroundRadius) + 'rpx';
|
||||
style.borderBottomRightRadius = (2 * this.value?.bottomAroundRadius) + 'rpx';
|
||||
}
|
||||
|
||||
// 装饰效果:阴影
|
||||
style.boxShadow = this.value?.ornament?.type == 'shadow' ? '0 0 10rpx ' + this.value?.ornament?.color : '';
|
||||
// 装饰效果:边框
|
||||
style.border = this.value?.ornament?.type == 'stroke' ? '2rpx solid ' + this.value?.ornament?.color : '';
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
/**
|
||||
* 轮播高度
|
||||
* 根据模式和配置计算轮播高度
|
||||
* @returns {string} 轮播高度样式
|
||||
*/
|
||||
swiperHeight() {
|
||||
let height = 0;
|
||||
|
||||
const pageCount = this.value?.pageCount || 1;
|
||||
|
||||
// 根据不同模式计算高度
|
||||
if (this.value?.mode == 'graphic') {
|
||||
height = (49 + this.value?.imageSize) * pageCount;
|
||||
} else if (this.value?.mode == 'img') {
|
||||
height = (22 + this.value?.imageSize) * pageCount;
|
||||
} else if (this.value?.mode == 'text') {
|
||||
height = 43 * pageCount;
|
||||
} else { // 默认视频模式
|
||||
if (this.value?.aspectRatio == '16:9') {
|
||||
height = [250, 160, 140, 120][this.value.rowCount - 1];
|
||||
} else {
|
||||
height = [510, 280, 220, 180][this.value.rowCount - 1];
|
||||
}
|
||||
}
|
||||
|
||||
return 'height:' + (2 * height) + 'rpx';
|
||||
},
|
||||
|
||||
/**
|
||||
* 是否显示指示器
|
||||
* 根据轮播配置和列表长度判断是否显示指示器
|
||||
* @returns {boolean} 是否显示指示器
|
||||
*/
|
||||
isIndicatorDots() {
|
||||
// 当轮播类型不是隐藏,且视频数量超过一页时显示指示器
|
||||
const pageCount = this.value?.pageCount || 1;
|
||||
return this.value?.carousel?.type != 'hide' && Math.ceil(this.value?.list?.length / (pageCount * this.value?.rowCount)) > 1
|
||||
},
|
||||
|
||||
/**
|
||||
* 轮播幻灯片数据
|
||||
* 将视频列表分割成轮播所需的幻灯片数据
|
||||
* @returns {Array} 轮播幻灯片数据
|
||||
*/
|
||||
swiperSlides() {
|
||||
const slides = [];
|
||||
const list = this.value?.list || [];
|
||||
const pageSize = (this.value?.pageCount || 1) * (this.value?.rowCount || 1);
|
||||
|
||||
// 将列表数据分割成每页显示的数量
|
||||
for (let i = 0; i < list.length; i += pageSize) {
|
||||
slides.push(list.slice(i, i + pageSize));
|
||||
}
|
||||
|
||||
return slides;
|
||||
},
|
||||
/**
|
||||
* 视频封面样式
|
||||
* 根据aspectRatio属性动态计算封面样式
|
||||
* @returns {Object} 封面样式对象
|
||||
*/
|
||||
computedCoverStyle() {
|
||||
const aspectRatio = this.value?.aspectRatio || '16:9';
|
||||
let paddingTop = '56.25%'; // 默认 16:9 比例
|
||||
|
||||
if (aspectRatio === '3:4') {
|
||||
paddingTop = '133.33%'; // 3:4 比例
|
||||
}
|
||||
|
||||
return {
|
||||
width: '100%',
|
||||
height: '0',
|
||||
paddingTop: paddingTop
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 播放视频
|
||||
* 触发 video-play 事件,并在微信小程序中调用视频播放接口
|
||||
* @param {Object} item - 视频数据对象
|
||||
*/
|
||||
async playVideo(item) {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'video-play',
|
||||
data: item,
|
||||
promiseCallback: async (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
try {
|
||||
// 发送视频被点击播放事件
|
||||
this.$emit('channel-video-click-play', item);
|
||||
console.log('播放视频:', item);
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 在微信小程序环境中调用视频播放接口
|
||||
await wechatChannelUtil.playVideo(item);
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
if (item?.channelType === 'wechat') {
|
||||
uni.showToast({
|
||||
title: '视频号仅支持在微信小程序环境中播放',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
} else {
|
||||
// 在非微信小程序环境中,直接触发事件
|
||||
this.$emit('video-play', item);
|
||||
}
|
||||
// #endif
|
||||
} catch (err) {
|
||||
console.error('打开视频号失败', err);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 图片加载错误处理
|
||||
* 当图片加载失败时,设置默认图片
|
||||
* @param {number} index - 图片索引
|
||||
*/
|
||||
imgError(index) {
|
||||
// 图片加载失败的处理逻辑
|
||||
console.log('图片加载失败:', index);
|
||||
// 为失败的图片设置默认图片
|
||||
const item = this.value.list[index];
|
||||
if (item) {
|
||||
// 使用默认图片替代加载失败的图片
|
||||
// #ifdef MP-WEIXIN
|
||||
item.coverUrl = wechatChannelConfig.video.defaultCoverUrl;
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 添加鼠标拖拽滚动功能
|
||||
* 在Web环境中实现与微信小程序相同的拖拽滚动效果
|
||||
*/
|
||||
addMouseDragScroll() {
|
||||
// 只在Web环境中添加
|
||||
// #ifndef MP
|
||||
console.log('addMouseDragScroll called');
|
||||
|
||||
let isDragging = false;
|
||||
let startX = 0;
|
||||
let startScrollLeft = 0;
|
||||
let currentScrollElement = null;
|
||||
|
||||
// 查找最近的可滚动祖先元素
|
||||
const findScrollableParent = (element) => {
|
||||
while (element && element !== document) {
|
||||
const style = window.getComputedStyle(element);
|
||||
if (style.overflowX === 'auto' || style.overflowX === 'scroll') {
|
||||
return element;
|
||||
}
|
||||
element = element.parentElement;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// 鼠标按下事件
|
||||
const handleMouseDown = (e) => {
|
||||
// 检查是否点击在组件内
|
||||
if (this.$el.contains(e.target)) {
|
||||
console.log('mousedown event in component:', e);
|
||||
// 查找可滚动元素
|
||||
currentScrollElement = findScrollableParent(e.target);
|
||||
if (currentScrollElement) {
|
||||
console.log('Found scrollable element:', currentScrollElement);
|
||||
isDragging = true;
|
||||
startX = e.pageX;
|
||||
startScrollLeft = currentScrollElement.scrollLeft;
|
||||
currentScrollElement.style.cursor = 'grabbing';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 鼠标移动事件
|
||||
const handleMouseMove = (e) => {
|
||||
if (!isDragging || !currentScrollElement) return;
|
||||
console.log('mousemove event:', e);
|
||||
e.preventDefault();
|
||||
const dx = e.pageX - startX;
|
||||
currentScrollElement.scrollLeft = startScrollLeft - dx;
|
||||
console.log('scrollLeft:', currentScrollElement.scrollLeft);
|
||||
};
|
||||
|
||||
// 鼠标释放事件
|
||||
const handleMouseUp = () => {
|
||||
if (isDragging && currentScrollElement) {
|
||||
console.log('mouseup event');
|
||||
currentScrollElement.style.cursor = 'grab';
|
||||
}
|
||||
isDragging = false;
|
||||
currentScrollElement = null;
|
||||
};
|
||||
|
||||
// 添加全局事件监听器
|
||||
document.addEventListener('mousedown', handleMouseDown);
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
document.addEventListener('mouseleave', handleMouseUp);
|
||||
|
||||
console.log('Global mouse event listeners added');
|
||||
|
||||
// 组件销毁时移除事件监听器
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('mousedown', handleMouseDown);
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
document.removeEventListener('mouseleave', handleMouseUp);
|
||||
console.log('Global mouse event listeners removed');
|
||||
});
|
||||
|
||||
// 为所有.channel-nav元素添加必要的样式
|
||||
setTimeout(() => {
|
||||
const channelNavs = document.querySelectorAll('.channel-nav');
|
||||
console.log('Found channel-nav elements:', channelNavs.length);
|
||||
channelNavs.forEach(element => {
|
||||
element.style.overflowX = 'auto';
|
||||
element.style.overflowY = 'hidden';
|
||||
element.style.whiteSpace = 'nowrap';
|
||||
element.style.width = '100%';
|
||||
element.style.maxWidth = '100%';
|
||||
element.style.cursor = 'grab';
|
||||
element.style.userSelect = 'none'; // 防止文本选择
|
||||
console.log('Added styles to channel-nav:', element);
|
||||
});
|
||||
}, 100); // 延迟执行,确保DOM已完全渲染
|
||||
|
||||
console.log('Mouse drag scroll setup completed');
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './css/common-channel.scss';
|
||||
|
||||
.channel-list-container {
|
||||
padding: 16px 16px 0px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表布局样式
|
||||
*/
|
||||
.channel-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--row-count, 2), 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 导航布局样式
|
||||
* 支持固定布局和滚动布局
|
||||
*/
|
||||
.channel-nav {
|
||||
box-sizing: border-box;
|
||||
padding: 16rpx;
|
||||
|
||||
// 确保在H5环境中可以水平滚动
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
// 隐藏滚动条但保留滚动功能
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
// 启用触摸滚动和鼠标拖拽滚动
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
.uni-scroll-view-content {
|
||||
/* #ifdef MP-WEIXIN */
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 16rpx;
|
||||
/* #endif */
|
||||
/* #ifndef MP-WEIXIN */
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--row-count, 2), 1fr);
|
||||
gap: 16rpx;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
// 单滑动模式
|
||||
&.singleSlide {
|
||||
.uni-scroll-view-content {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 16rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.channel-nav-item {
|
||||
flex-shrink: 0;
|
||||
width: 280rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.channel-nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
|
||||
/* #ifdef MP-WEIXIN */
|
||||
&.row1-of1 {
|
||||
width: 100%;
|
||||
}
|
||||
&.row1-of2 {
|
||||
width: calc(50% - 8rpx);
|
||||
}
|
||||
&.row1-of3 {
|
||||
width: calc(33.333% - 10.67rpx);
|
||||
}
|
||||
&.row1-of4 {
|
||||
width: calc(25% - 12rpx);
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
// 1 列布局
|
||||
&.row1-of1 {
|
||||
.uni-scroll-view-content {
|
||||
// #ifndef MP-WEIXIN
|
||||
grid-template-columns: 1fr;
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
// 2 列布局
|
||||
&.row1-of2 {
|
||||
.uni-scroll-view-content {
|
||||
// #ifndef MP-WEIXIN
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
// #endif
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 3 列布局
|
||||
&.row1-of3 {
|
||||
.uni-scroll-view-content {
|
||||
// #ifndef MP-WEIXIN
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
// #endif
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// 4 列布局
|
||||
&.row1-of4 {
|
||||
.uni-scroll-view-content {
|
||||
// #ifndef MP-WEIXIN
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
// #endif
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 确保所有视频卡片高度一致
|
||||
*/
|
||||
.channel-item,
|
||||
.channel-nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/**
|
||||
* 轮播样式
|
||||
* 支持轮播模式的布局和样式
|
||||
*/
|
||||
.channel-swiper {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-slide-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--row-count, 2), 1fr);
|
||||
gap: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.channel-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// 轮播模式下的 1 列布局
|
||||
&.row1-of1 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
// 轮播模式下的 2 列布局
|
||||
&.row1-of2 {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
// 轮播模式下的 3 列布局
|
||||
&.row1-of3 {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
// 轮播模式下的 4 列布局
|
||||
&.row1-of4 {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 响应式调整
|
||||
* 在小屏幕设备上调整布局和间距
|
||||
*/
|
||||
@media (max-width: 375px) {
|
||||
|
||||
.channel-list,
|
||||
.channel-nav,
|
||||
.channel-swiper .swiper-slide-content {
|
||||
gap: 12rpx;
|
||||
padding: 12rpx;
|
||||
}
|
||||
|
||||
// 小屏幕上的单滑动模式
|
||||
.channel-nav {
|
||||
&.singleSlide {
|
||||
.uni-scroll-view-content {
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.channel-nav-item {
|
||||
width: 240rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频比例样式调整
|
||||
* 根据不同的视频比例调整布局
|
||||
*/
|
||||
|
||||
// // 3:4 比例的视频卡片样式
|
||||
// .channel-video.ratio-3-4 {
|
||||
// // 调整视频卡片的整体高度
|
||||
// ::v-deep .video-cover-wrap {
|
||||
// padding-top: 133.33%; // 3:4 比例
|
||||
// }
|
||||
|
||||
// // 列表模式下的3:4比例调整
|
||||
// &.list-mode {
|
||||
// ::v-deep .video-cover-wrap {
|
||||
// padding-top: 133.33%; // 3:4 比例
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// // 16:9 比例的视频卡片样式(默认)
|
||||
// .channel-video.ratio-16-9 {
|
||||
// // 保持默认的16:9比例
|
||||
// ::v-deep .video-cover-wrap {
|
||||
// padding-top: 56.25%; // 16:9 比例
|
||||
// }
|
||||
|
||||
// // 列表模式下的16:9比例保持默认
|
||||
// &.list-mode {
|
||||
// ::v-deep .video-cover-wrap {
|
||||
// padding-top: 56.25%; // 16:9 比例
|
||||
// }
|
||||
// }
|
||||
// }</style>
|
||||
@@ -1,489 +0,0 @@
|
||||
<template>
|
||||
<view class="channel-video" :class="{ 'list-mode': listMode }">
|
||||
<!-- 嵌入式视频播放 -->
|
||||
<view v-if="canUseEmbedMode" class="embed-video-container">
|
||||
<view class="video-cover-wrap" :style="[coverStyle]">
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<native-component>
|
||||
<!-- 嵌入式视频播放组件 -->
|
||||
<channel-video :feed-id="value.feedId" :finder-user-name="value.finderUserName"
|
||||
:feed-token="value.feedToken" :auto-play="autoPlay">
|
||||
</channel-video>
|
||||
</native-component>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="video-info">
|
||||
<!-- 视频标题,支持多行显示控制 -->
|
||||
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}
|
||||
</view>
|
||||
<!-- 视频统计信息 -->
|
||||
<view class="video-stats" v-if="showViewCount && value.showViewCount">{{ value.viewCount }}次观看</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 跳转式视频播放 -->
|
||||
<view v-else @click.stop="playVideo" class="video-container">
|
||||
<view class="video-cover-wrap" :style="[coverStyle]">
|
||||
<image class="video-cover" :src="$util.img(value.coverUrl)" mode="aspectFill"></image>
|
||||
<view class="channel-play-btn" v-if="showPlayBtn" :style="[playBtnStyle]">
|
||||
<view class="play-icon-css"></view>
|
||||
</view>
|
||||
<view class="video-stats-overlay" v-if="showViewCount && value.showViewCount">
|
||||
{{ value.viewCount }}次观看
|
||||
</view>
|
||||
</view>
|
||||
<view class="video-info">
|
||||
<!-- 视频标题,支持多行显示控制 -->
|
||||
<view class="video-title" :style="{ '--title-line-clamp': titleLineClamp }">{{ value.videoTitle }}
|
||||
</view>
|
||||
<!-- 视频统计信息,非列表模式下显示 -->
|
||||
<view class="video-stats" v-if="showViewCount && value.showViewCount && !listMode">{{ value.viewCount }}次观看</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { wechatChannelUtil, wechatChannelConfig } from './js/wechat-channel.js'
|
||||
|
||||
/**
|
||||
* 微信视频号视频卡片组件
|
||||
* 支持嵌入式播放和跳转式播放两种模式
|
||||
* 可配置列表模式、视频高度、标题行数等属性
|
||||
*/
|
||||
export default {
|
||||
name: 'diy-channel-video',
|
||||
props: {
|
||||
/**
|
||||
* 视频数据对象
|
||||
* @type {Object}
|
||||
* @required
|
||||
* @property {string} feedId - 视频 feedId
|
||||
* @property {string} feedToken - 视频 token
|
||||
* @property {string} coverUrl - 视频封面图
|
||||
* @property {string} videoTitle - 视频标题
|
||||
* @property {number} viewCount - 观看次数
|
||||
* @property {boolean} showViewCount - 是否显示观看次数
|
||||
* @property {boolean} embedMode - 是否启用嵌入式播放
|
||||
*/
|
||||
value: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
/**
|
||||
* 是否为列表模式
|
||||
* @type {boolean}
|
||||
* @default false
|
||||
*/
|
||||
listMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/** 是否显示观看次数,由父组件可以整体配置 */
|
||||
showViewCount: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 标题显示行数
|
||||
* @type {number}
|
||||
* @default 1
|
||||
*/
|
||||
titleLineClamp: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
/** 是否显示播放按钮 */
|
||||
showPlayBtn: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 视频封面图样式
|
||||
* 采用 16:9 比例的响应式高度
|
||||
*/
|
||||
coverStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
width: '100%',
|
||||
height: '0',
|
||||
paddingTop: '56.25%' // 16:9 比例
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 播放按钮样式
|
||||
*/
|
||||
playBtnStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
width: '60rpx',
|
||||
height: '60rpx',
|
||||
borderRadius: '30rpx',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.6)'
|
||||
})
|
||||
},
|
||||
/** 是否自动播放 */
|
||||
autoPlay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* 是否支持嵌入式播放
|
||||
* @returns {boolean}
|
||||
*/
|
||||
canUseEmbedMode() {
|
||||
// #ifdef MP-WEIXIN
|
||||
const enableEmbedMode = Boolean(this.value?.embedMode)
|
||||
&& Boolean(this.value?.feedToken)
|
||||
&& wechatChannelUtil.isEmbedModeSupported();
|
||||
console.log('enableEmbedMode', enableEmbedMode);
|
||||
return enableEmbedMode;
|
||||
// #endif
|
||||
return false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 播放视频
|
||||
* 触发 video-play 事件,由父组件处理具体播放逻辑
|
||||
*/
|
||||
async playVideo() {
|
||||
this.$emit('video-play', this.value);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import './css/common-channel.scss';
|
||||
|
||||
/**
|
||||
* 视频卡片容器样式
|
||||
* 包含卡片基础样式、悬停效果和列表模式样式
|
||||
*/
|
||||
.channel-video {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
// 悬停效果
|
||||
&:hover {
|
||||
transform: translateY(-4rpx);
|
||||
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
// 列表模式样式调整
|
||||
&.list-mode {
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
|
||||
|
||||
.video-info {
|
||||
padding: 14rpx;
|
||||
|
||||
.video-title {
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频容器样式
|
||||
* 用于跳转式播放模式
|
||||
*/
|
||||
.video-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* 嵌入式视频容器样式
|
||||
* 与视频容器样式保持一致
|
||||
*/
|
||||
.embed-video-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频封面容器
|
||||
*/
|
||||
.video-cover-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
/* 16:9 比例 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 12rpx 12rpx 0 0;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
// 悬停时缩放效果
|
||||
.channel-video:hover & {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
// 列表模式下的边框圆角调整
|
||||
.channel-video.list-mode & {
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频封面图片
|
||||
* 绝对定位填充整个容器
|
||||
*/
|
||||
.video-cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频统计信息遮罩
|
||||
* 显示在视频封面底部
|
||||
*/
|
||||
.video-stats-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
padding: 12rpx 16rpx;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
transition: opacity 0.3s ease;
|
||||
|
||||
// 悬停时的透明度变化
|
||||
.channel-video:hover & {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.channel-video:not(:hover) & {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频信息区域
|
||||
* 包含标题和统计信息
|
||||
*/
|
||||
.video-info {
|
||||
padding: 16rpx;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: #fff;
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
// 悬停时的背景色变化
|
||||
.channel-video:hover & {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频标题
|
||||
* 支持多行显示控制和渐变遮罩效果
|
||||
*/
|
||||
.video-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
margin-bottom: 10rpx;
|
||||
line-height: 1.4;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: var(--title-line-clamp, 2);
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
transition: color 0.3s ease;
|
||||
position: relative;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
white-space: normal;
|
||||
|
||||
// 悬停时的颜色变化
|
||||
.channel-video:hover & {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
// 列表模式下的样式调整
|
||||
.channel-video.list-mode & {
|
||||
-webkit-line-clamp: var(--title-line-clamp, 1);
|
||||
font-size: 24rpx;
|
||||
margin-bottom: 6rpx;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
// 添加渐变遮罩效果,让过长的文字有柔和的结束
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 1.4em;
|
||||
background: linear-gradient(to right, transparent, #fff 90%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// 列表模式下的遮罩高度调整
|
||||
.channel-video.list-mode &::after {
|
||||
height: 1.3em;
|
||||
}
|
||||
|
||||
// 根据行数调整遮罩高度
|
||||
&[style*="--title-line-clamp: 1"]::after {
|
||||
height: 1.4em;
|
||||
}
|
||||
|
||||
&[style*="--title-line-clamp: 3"]::after {
|
||||
height: 4.2em;
|
||||
}
|
||||
|
||||
&[style*="--title-line-clamp: 4"]::after {
|
||||
height: 5.6em;
|
||||
}
|
||||
|
||||
// 列表模式下的多行遮罩高度调整
|
||||
.channel-video.list-mode &[style*="--title-line-clamp: 1"]::after {
|
||||
height: 1.3em;
|
||||
}
|
||||
|
||||
.channel-video.list-mode &[style*="--title-line-clamp: 3"]::after {
|
||||
height: 3.9em;
|
||||
}
|
||||
|
||||
.channel-video.list-mode &[style*="--title-line-clamp: 4"]::after {
|
||||
height: 5.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 视频统计信息
|
||||
* 显示观看次数等数据
|
||||
*/
|
||||
.video-stats {
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
margin-top: 6rpx;
|
||||
transition: color 0.3s ease;
|
||||
|
||||
// 悬停时的颜色变化
|
||||
.channel-video:hover & {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 列表模式下的播放按钮样式
|
||||
* 更小的尺寸和悬停效果
|
||||
*/
|
||||
.channel-video.list-mode .channel-play-btn {
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 悬停效果
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 播放图标尺寸
|
||||
.play-icon {
|
||||
width: 25rpx;
|
||||
height: 25rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用播放按钮样式优化
|
||||
* 添加悬停效果
|
||||
*/
|
||||
.channel-play-btn {
|
||||
transition: all 0.3s ease;
|
||||
|
||||
// 悬停效果
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 纯 CSS 播放按钮图标
|
||||
*/
|
||||
.play-icon-css {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 12rpx solid transparent;
|
||||
border-bottom: 12rpx solid transparent;
|
||||
border-left: 18rpx solid #fff;
|
||||
margin-left: 4rpx;
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
// 悬停时的缩放效果
|
||||
.channel-play-btn:hover & {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
// 列表模式下的尺寸调整
|
||||
.channel-video.list-mode & {
|
||||
border-top: 10rpx solid transparent;
|
||||
border-bottom: 10rpx solid transparent;
|
||||
border-left: 15rpx solid #fff;
|
||||
margin-left: 3rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 原生组件样式控制
|
||||
* 确保 native-component 和 channel-video 正确填充容器
|
||||
*/
|
||||
native-component {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* channel-video 组件样式控制
|
||||
* 避免受到 wx-channel-video 全局样式的影响
|
||||
*/
|
||||
channel-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 100%;
|
||||
min-height: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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">
|
||||
::v-deep .uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-groupbuy {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
margin-top: 6rpx;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
position: relative;
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
bottom: 20rpx;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 20rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
min-width: 112rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 180rpx;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
padding-left: 20rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #ffffff;
|
||||
z-index: 3;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 158rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
line-height: 1;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
||||
::v-deep .uni-scroll-view::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.swiper ::v-deep .uni-swiper-dots-horizontal {
|
||||
bottom: 25rpx;
|
||||
}
|
||||
|
||||
.swiper-left ::v-deep .uni-swiper-dots-horizontal {
|
||||
left: 40rpx;
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.swiper-right ::v-deep .uni-swiper-dots-horizontal {
|
||||
right: 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
transform: translate(0);
|
||||
}
|
||||
|
||||
.carousel-angle ::v-deep .uni-swiper-dots-horizontal .uni-swiper-dot {
|
||||
width: 24rpx;
|
||||
border-radius: 0;
|
||||
height: 8rpx;
|
||||
}
|
||||
|
||||
.swiper.ns-indicator-dots ::v-deep .uni-swiper-dot {
|
||||
width: 18rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.swiper.ns-indicator-dots ::v-deep .uni-swiper-dot-active {
|
||||
width: 36rpx;
|
||||
}
|
||||
</style>
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
::v-deep .uni-scroll-view::-webkit-scrollbar {
|
||||
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
.goods-list.double-column {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: $margin-updown;
|
||||
|
||||
.goods-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
flex-basis: 48%;
|
||||
max-width: calc((100% - 30rpx) / 2);
|
||||
margin-right: $margin-both;
|
||||
margin-bottom: $margin-updown;
|
||||
border-radius: $border-radius;
|
||||
|
||||
&:nth-child(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-top: 100%;
|
||||
border-top-left-radius: $border-radius;
|
||||
border-top-right-radius: $border-radius;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.goods-tag {
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
padding: 8rpx 16rpx;
|
||||
position: absolute;
|
||||
border-bottom-right-radius: $border-radius;
|
||||
top: 0;
|
||||
left: 0;
|
||||
font-size: $font-size-goods-tag;
|
||||
}
|
||||
|
||||
.goods-tag-img {
|
||||
position: absolute;
|
||||
border-top-left-radius: $border-radius;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-wrap {
|
||||
padding: 0 26rpx 26rpx 26rpx;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-top: 20rpx;
|
||||
height: 68rpx;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pro-info {
|
||||
display: flex;
|
||||
margin-top: 16rpx;
|
||||
|
||||
.delete-price {
|
||||
text-decoration: line-through;
|
||||
flex: 1;
|
||||
|
||||
.unit {
|
||||
margin-right: 6rpx;
|
||||
}
|
||||
}
|
||||
|
||||
&>view {
|
||||
line-height: 1;
|
||||
|
||||
&:nth-child(2) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.member-price-tag {
|
||||
display: inline-block;
|
||||
width: 60rpx;
|
||||
line-height: 1;
|
||||
margin-left: 6rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,74 +0,0 @@
|
||||
<template>
|
||||
<view data-component-name="diy-kefu" class="diy-kefu" :style="style">
|
||||
<view class="fui-list-group merchgroup" v-for="(item, index) in value.list" :key="index">
|
||||
<view class="fui-list jump" v-if="index == 0">
|
||||
<view class="fui-list-media">
|
||||
<image class="round" :src="$util.img(item.imageUrl)" style="border-radius:6rpx"></image>
|
||||
</view>
|
||||
<view class="fui-list-inner">
|
||||
<view class="title" style="height: 75rpx;">
|
||||
<text style="font-weight:600" :style="{ color: item.textColor }">{{ item.title }}</text>
|
||||
<view class="subtitle" style="font-size:24rpx" :style="{ color: item.textColor }">{{ item.desc }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fui-remark jump" style="padding-right: 20rpx; text-align: center; line-height: 140rpx;">
|
||||
<span style="font-size:24rpx;padding: 14rpx 18rpx;border-radius:8rpx"
|
||||
:style="{ background: item.BtBgColor, color: item.BtColor }" @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,89 +0,0 @@
|
||||
<template>
|
||||
<view data-component-name="diy-map" class="diy-map" :style="style">
|
||||
<view class="fui-list-group merchgroup" style="margin-top:0" v-for="(item, index) in value.list">
|
||||
<map id="map" style="width: 100%; height:600rpx" scale="12" :markers="markerst" bindupdated="bindupdated"
|
||||
:longitude="item.lng" :latitude="item.lat" show-location>
|
||||
<!-- <cover-view
|
||||
style="position:absolute;right:10px;bottom:30rpx;z-index:99999;background:#4390FF;padding:5px 10px;wxcs_style_padding:10rpx 20rpx;border-radius:8rpx;color: #fff;"
|
||||
@click="handlerClick(item)" @tap="handlerClick(item)">
|
||||
<cover-view style="font-size:24rpx">一键导航</cover-view>
|
||||
</cover-view> -->
|
||||
|
||||
<!-- 使用非原生cover-view, 解决原生cover-view组件渲染机制z-index失效的问题 -->
|
||||
<div
|
||||
style="position:absolute;right:12rpx;bottom:48rpx;z-index:1;background:#4390FF;padding:0rpx 20rpx;border-radius:8rpx;color: #fff;"
|
||||
@click="handlerClick(item)">
|
||||
<span style="font-size:24rpx;color: #fff;">一键导航</span>
|
||||
</div>
|
||||
</map>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 地图
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-map',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
markers: []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function (nval) {
|
||||
// this.getDataList();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
markerst() {
|
||||
return [{
|
||||
id: 1,
|
||||
latitude: this.value.list[0].lat,
|
||||
longitude: this.value.list[0].lng
|
||||
}]
|
||||
},
|
||||
style() {
|
||||
var css = '';
|
||||
css += 'background-color:' + this.value.contentBgColor + ';';
|
||||
if (this.value.elementAngle == 'round') {
|
||||
css += 'border-top-left-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-top-right-radius:' + this.value.topElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-left-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
css += 'border-bottom-right-radius:' + this.value.bottomElementAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return css;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
tomap(item) {
|
||||
uni.openLocation({
|
||||
latitude: parseFloat(item.lat),
|
||||
longitude: parseFloat(item.lng),
|
||||
name: "一键导航",
|
||||
})
|
||||
},
|
||||
async handlerClick(item) {
|
||||
await this.__$emitEvent({
|
||||
eventName: 'map-tap', data: item, promiseCallback: (event, handler, awaitedResult) => {
|
||||
if (!awaitedResult) return;
|
||||
this.tomap(item);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss"></style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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">
|
||||
::v-deep .uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-pinfan {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 6rpx 0;
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 4rpx;
|
||||
|
||||
>view {
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 10rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: $base-color;
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-right: -6rpx;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
>view:last-of-type {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
text-decoration: line-through;
|
||||
margin: 0 10rpx 4rpx 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
bottom: 10rpx;
|
||||
height: 90rpx;
|
||||
line-height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
background-color: $base-color;
|
||||
color: #ffffff;
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
margin-top: 6rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
|
||||
.fan {
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n+3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 188rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
margin-top: auto;
|
||||
font-size: $font-size-activity-tag;
|
||||
|
||||
.content-tuan-box {
|
||||
border-radius: 4rpx;
|
||||
color: #ffffff;
|
||||
background-color: $base-color;
|
||||
padding: 6rpx;
|
||||
}
|
||||
|
||||
.content-tuan-price {
|
||||
border-radius: 4rpx;
|
||||
padding: 4rpx 6rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
color: $base-color;
|
||||
margin-left: -2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
white-space: nowrap;
|
||||
margin-top: 10rpx;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
height: 32rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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">
|
||||
::v-deep .uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-pintuan {
|
||||
overflow: hidden;
|
||||
|
||||
.pintuan-head {
|
||||
padding: 0 24rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 88rpx;
|
||||
box-sizing: border-box;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin-bottom: 20rpx;
|
||||
border-radius: 18rpx 18rpx 0 0;
|
||||
|
||||
.left-img {
|
||||
width: 174rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.head-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 50rpx;
|
||||
margin-right: auto;
|
||||
color: #fff;
|
||||
|
||||
.img-warp {
|
||||
position: relative;
|
||||
margin-right: 8rpx;
|
||||
line-height: 1;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #ff3d3d;
|
||||
margin-left: -14rpx;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
width: 2rpx;
|
||||
height: 28rpx;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
left: -32rpx;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: $font-size-sub;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
.head-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 36rpx;
|
||||
background: linear-gradient(270deg, #ffbd5b 0%, #fd882e 100%);
|
||||
border-radius: 24rpx;
|
||||
padding: 2rpx;
|
||||
|
||||
text:nth-child(1) {
|
||||
position: relative;
|
||||
left: 6rpx;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
text:nth-child(2) {
|
||||
padding: 6rpx 4rpx 4rpx;
|
||||
background-color: #fff;
|
||||
color: #ffbd5b;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.6);
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
padding: 6rpx 0;
|
||||
|
||||
.tag-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
>view {
|
||||
height: 30rpx;
|
||||
line-height: 30rpx;
|
||||
border: 2rpx solid $base-color;
|
||||
border-radius: 6rpx;
|
||||
margin-right: 10rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: $base-color;
|
||||
|
||||
.iconfont {
|
||||
display: inline-block;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
font-size: $font-size-activity-tag;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin-right: -6rpx;
|
||||
background: $base-color;
|
||||
}
|
||||
|
||||
text:last-child {
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.bottom-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
overflow: hidden;
|
||||
width: 260rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-wrap: wrap;
|
||||
|
||||
>view:last-of-type {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: $font-size-tag;
|
||||
color: $color-tip;
|
||||
line-height: 1;
|
||||
text-decoration: line-through;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
margin-right: 20rpx;
|
||||
min-width: 112rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
padding: 0 20rpx;
|
||||
margin: 0;
|
||||
color: var(--btn-text-color);
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.num {
|
||||
width: 80rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: $font-size-tag;
|
||||
line-height: 1;
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
border-top-left-radius: 20rpx;
|
||||
border-top-right-radius: 20rpx;
|
||||
padding: 10rpx;
|
||||
transform: translate(50%);
|
||||
background: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx 10rpx 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 142rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
font-size: $font-size-base;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
margin-top: 10rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
height: 32rpx;
|
||||
color: var(--price-color);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: var(--price-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-2 {
|
||||
.item {
|
||||
width: 212rpx;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 210rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 212rpx;
|
||||
height: 212rpx;
|
||||
|
||||
>image {
|
||||
width: 212rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.price-wrap {
|
||||
text-align: center;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.sale-num {
|
||||
text-align: center;
|
||||
color: #666666;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll {
|
||||
padding: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.style-3 {
|
||||
.other-info-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sale-action {
|
||||
font-size: $font-size-tag;
|
||||
width: 94rpx;
|
||||
height: 44rpx;
|
||||
background: linear-gradient(131deg, #3edb73 0%, #1db576 100%);
|
||||
border-radius: 8rpx;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 44rpx;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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">
|
||||
::v-deep .uni-scroll-view ::-webkit-scrollbar {
|
||||
/* 隐藏滚动条,但依旧具备可以滚动的功能 */
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
height: 0;
|
||||
color: transparent;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
scroll-view ::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: transparent;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.diy-presale {
|
||||
&.row1-of1 {
|
||||
.item {
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 16rpx;
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
position: relative;
|
||||
padding: 6rpx 0;
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
left: 0;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
bottom: 10rpx;
|
||||
right: 20rpx;
|
||||
margin: 0;
|
||||
padding: 0 20rpx;
|
||||
background-color: $base-color;
|
||||
color: #fff;
|
||||
min-width: 112rpx;
|
||||
height: 52rpx;
|
||||
line-height: 52rpx;
|
||||
font-size: $font-size-tag;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.horizontal-slide {
|
||||
.scroll {
|
||||
width: calc(100% - 40rpx);
|
||||
padding: 20rpx;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
|
||||
.item.shadow {
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: inline-block;
|
||||
width: 200rpx;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(3n + 3) {
|
||||
width: 198rpx;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.img-wrap {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin: 0 auto;
|
||||
|
||||
>image {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
&.multi-content {
|
||||
height: 134rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.goods-name {
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
white-space: nowrap;
|
||||
margin-top: auto;
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
|
||||
.unit {
|
||||
font-size: $font-size-tag;
|
||||
margin-right: 4rpx;
|
||||
color: $base-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: $font-size-toolbar;
|
||||
color: $base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
padding: 20rpx;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
|
||||
.swiper-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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">
|
||||
::v-deep .uni-input-placeholder {
|
||||
overflow: initial;
|
||||
}
|
||||
|
||||
.diy-search-wrap {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 991;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 170rpx;
|
||||
height: 60rpx;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.search-box-3 {
|
||||
.search-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 68rpx;
|
||||
|
||||
.iconfont {
|
||||
position: initial;
|
||||
transform: translateY(0);
|
||||
width: auto;
|
||||
margin-left: 26rpx;
|
||||
margin-right: 12rpx;
|
||||
font-size: $font-size-base;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.uni-input {
|
||||
flex: 1;
|
||||
padding-left: 0;
|
||||
height: 68rpx;
|
||||
}
|
||||
|
||||
.search-content-btn {
|
||||
margin-right: 8rpx;
|
||||
width: 116rpx;
|
||||
height: 54rpx;
|
||||
line-height: 54rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
border-radius: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.diy-icon {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 0;
|
||||
width: auto;
|
||||
font-size: 74rpx;
|
||||
}
|
||||
|
||||
.img {
|
||||
margin-left: 20rpx;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.search-content input {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
height: 64rpx;
|
||||
width: 100%;
|
||||
padding: 0 20rpx 0 40rpx;
|
||||
color: #333333;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.search-content .iconfont {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 4rpx;
|
||||
transform: translateY(-50%);
|
||||
font-size: 30rpx;
|
||||
z-index: 10;
|
||||
width: 80rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,180 +0,0 @@
|
||||
<template>
|
||||
<x-skeleton data-component-name="diy-store-label" type="banner" :loading="loading" :configs="skeletonConfig">
|
||||
<view class="diy-store-label">
|
||||
<block v-if="businessConfig.store_business == 'store'">
|
||||
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]"
|
||||
:style="storeLabelWrapCss" :enable-flex="true">
|
||||
<view v-for="(item, index) in storeLabel" :key="index" :class="['item']">
|
||||
<diy-icon v-if="value.icon" class="icon-box" :icon="value.icon"
|
||||
:value="value.style ? value.style : 'null'"></diy-icon>
|
||||
<text class="label-name"
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
item }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<scroll-view scroll-x="true" :class="[value.contentStyle, { between: list.length == 3 }]"
|
||||
:style="storeLabelWrapCss" :enable-flex="true">
|
||||
<view v-for="(item, index) in list" :class="['item']">
|
||||
<diy-icon v-if="value.icon" class="icon-box" :icon="value.icon"
|
||||
:value="value.style ? value.style : 'null'"></diy-icon>
|
||||
<text class="label-name"
|
||||
:style="{ color: value.textColor, fontSize: value.fontSize * 2 + 'rpx', fontWeight: value.fontWeight }">{{
|
||||
item.label_name }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</block>
|
||||
</view>
|
||||
</x-skeleton>
|
||||
</template>
|
||||
<script>
|
||||
// 门店标签
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-store-label',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
skeletonConfig: {
|
||||
gridRows: 1,
|
||||
gridRowsGap: '20rpx',
|
||||
headHeight: '40rpx',
|
||||
headBorderRadius: '0'
|
||||
},
|
||||
list: [],
|
||||
notice: '',
|
||||
storeLabel: [],
|
||||
businessConfig: ""
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getStoreConfig();
|
||||
},
|
||||
watch: {
|
||||
// 组件刷新监听
|
||||
componentRefresh: function (nval) {
|
||||
this.getData();
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
storeLabelWrapCss: function () {
|
||||
var obj = '';
|
||||
obj += 'background-color:' + this.value.componentBgColor + ';';
|
||||
if (this.value.componentAngle == 'round') {
|
||||
obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
|
||||
}
|
||||
return obj;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
var data = {
|
||||
page: 1,
|
||||
page_size: 0
|
||||
};
|
||||
|
||||
if (this.value.sources == 'initial') {
|
||||
data.page_size = this.value.count;
|
||||
} else if (this.value.sources == 'diy') {
|
||||
data.label_id_arr = this.value.labelIds.toString();
|
||||
}
|
||||
this.$api.sendRequest({
|
||||
url: '/store/api/store/labelPage',
|
||||
data: data,
|
||||
success: res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.list = res.data.list;
|
||||
}
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
getStoreConfig() {
|
||||
this.$api.sendRequest({
|
||||
url: '/store/api/config/config',
|
||||
success: res => {
|
||||
if (res.code >= 0) {
|
||||
this.businessConfig = res.data.business_config;
|
||||
if (res.data.business_config.store_business == "store") {
|
||||
this.getStoreInfo();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getStoreInfo() {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/store/info',
|
||||
success: res => {
|
||||
if (res.data) {
|
||||
let label_arr = res.data.label_name.split(",");
|
||||
let label_count = 3;
|
||||
if (this.value.sources == 'initial') label_count = this.value.count;
|
||||
for (let i = 0; i < label_arr.length; i++) {
|
||||
if (this.storeLabel.length < label_count && label_arr[i] != '') {
|
||||
this.storeLabel.push(label_arr[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-store-label {
|
||||
.style-1 {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
||||
::v-deep .uni-scroll-view-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.between {
|
||||
justify-content: space-between;
|
||||
|
||||
::v-deep .uni-scroll-view-content {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: 20rpx;
|
||||
|
||||
.icon-box {
|
||||
font-size: 50rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.label-name {
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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,188 +0,0 @@
|
||||
// 微信视频号组件配置
|
||||
export const wechatChannelConfig = {
|
||||
// 图标相关
|
||||
icon: {
|
||||
defaultSize: 80, // 默认图标尺寸(rpx)
|
||||
smallSize: 60, // 小图标尺寸(rpx)
|
||||
channelArrowSize: 24, // 频道箭头图标尺寸(rpx)
|
||||
channelArrow: 'addon/personnel/shop/view/enterprise/arrow.png', // 频道箭头图标路径
|
||||
},
|
||||
|
||||
|
||||
// 视频相关配置
|
||||
video: {
|
||||
defaultHeight: 320, // 默认视频高度(rpx)
|
||||
minHeight: 200, // 最小视频高度(rpx)
|
||||
maxHeight: 500, // 最大视频高度(rpx)
|
||||
defaultCoverUrl: 'addon/personnel/shop/view/enterprise/default-video-cover.png', // 默认视频封面
|
||||
},
|
||||
|
||||
// 播放按钮配置
|
||||
playButton: {
|
||||
size: 80, // 标准尺寸(rpx)
|
||||
smallSize: 60, // 小尺寸(rpx)
|
||||
iconSize: 40, // 标准图标尺寸(rpx)
|
||||
smallIconSize: 30, // 小图标尺寸(rpx)
|
||||
background: 'rgba(0, 0, 0, 0.4)', // 背景颜色
|
||||
},
|
||||
|
||||
// 布局配置
|
||||
layout: {
|
||||
borderRadius: 12, // 圆角(rpx)
|
||||
padding: 16, // 内边距(rpx)
|
||||
margin: 10, // 外边距(rpx)
|
||||
},
|
||||
|
||||
// 字体配置
|
||||
font: {
|
||||
channelNameSize: 28, // 频道名称字体大小(rpx)
|
||||
videoTitleSize: 28, // 视频标题字体大小(rpx)
|
||||
statsSize: 24, // 统计信息字体大小(rpx)
|
||||
},
|
||||
|
||||
// 颜色配置
|
||||
color: {
|
||||
channelName: '#333', // 频道名称颜色
|
||||
videoTitle: '#333', // 视频标题颜色
|
||||
stats: '#999', // 统计信息颜色
|
||||
border: '#f0f0f0', // 边框颜色
|
||||
},
|
||||
|
||||
// 微信相关配置
|
||||
wechat: {
|
||||
minSdkVersion: '2.19.2', // 最小微信基础库版本
|
||||
embedComponent: 'channel-video', // 嵌入式视频组件名称
|
||||
},
|
||||
|
||||
// 错误提示配置
|
||||
error: {
|
||||
notWechat: '当前环境不是微信小程序',
|
||||
lowVersion: '当前微信基础库版本过低,需要 2.19.2 或以上版本',
|
||||
notSupported: '当前环境不支持微信视频号',
|
||||
missingFields: '缺少必要字段: {field}',
|
||||
},
|
||||
};
|
||||
|
||||
// 获取配置项的辅助函数
|
||||
export const getwechatChannelConfig = (key, defaultValue = null) => {
|
||||
const keys = key.split('.');
|
||||
let config = wechatChannelConfig;
|
||||
|
||||
for (const k of keys) {
|
||||
if (config[k] === undefined) {
|
||||
return defaultValue;
|
||||
}
|
||||
config = config[k];
|
||||
}
|
||||
|
||||
return config;
|
||||
};
|
||||
|
||||
// 微信视频号工具函数
|
||||
export const wechatChannelUtil = {
|
||||
// 版本比较
|
||||
versionCompare(v1, v2) {
|
||||
const arr1 = v1.split('.');
|
||||
const arr2 = v2.split('.');
|
||||
for (let i = 0; i < Math.max(arr1.length, arr2.length); i++) {
|
||||
const num1 = parseInt(arr1[i] || 0);
|
||||
const num2 = parseInt(arr2[i] || 0);
|
||||
if (num1 > num2) return 1;
|
||||
if (num1 < num2) return -1;
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
|
||||
// 检查是否支持嵌入式播放
|
||||
isEmbedModeSupported() {
|
||||
return typeof wx !== 'undefined' && wx.canIUse(wechatChannelConfig.wechat.embedComponent);
|
||||
},
|
||||
|
||||
// 获取默认视频封面
|
||||
getDefaultCoverUrl() {
|
||||
return wechatChannelConfig.video.defaultCoverUrl;
|
||||
},
|
||||
|
||||
// 数据校验
|
||||
validateVideoData(item) {
|
||||
const requiredFields = ['feedId', 'finderUserName'];
|
||||
for (const field of requiredFields) {
|
||||
if (!item[field]) {
|
||||
throw new Error(`缺少必要字段: ${field}`);
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
|
||||
// 播放视频
|
||||
playVideo(item) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 数据校验
|
||||
this.validateVideoData(item);
|
||||
} catch (err) {
|
||||
this.handleError(err, item);
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查微信环境
|
||||
if (typeof wx === 'undefined') {
|
||||
const err = new Error(wechatChannelConfig.error.notWechat);
|
||||
this.handleError(err, item);
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
// 检查基础库版本
|
||||
const systemInfo = wx.getSystemInfoSync();
|
||||
const SDKVersion = systemInfo.SDKVersion;
|
||||
if (this.versionCompare(SDKVersion, wechatChannelConfig.wechat.minSdkVersion) < 0) {
|
||||
const err = new Error(wechatChannelConfig.error.lowVersion);
|
||||
this.handleError(err, item);
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
// 调用微信视频号播放API
|
||||
if (wx.openChannelsActivity) {
|
||||
wx.openChannelsActivity({
|
||||
feedId: item.feedId,
|
||||
finderUserName: item.finderUserName,
|
||||
success: (res) => {
|
||||
console.log('打开视频号成功', res);
|
||||
resolve(res);
|
||||
},
|
||||
fail: (err) => {
|
||||
this.handleError(err, item);
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
const err = new Error(wechatChannelConfig.error.notSupported);
|
||||
this.handleError(err, item);
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 统一错误处理
|
||||
handleError(err, item) {
|
||||
console.error('微信视频号错误:', err);
|
||||
const { message = '', errMsg = '微信视频播放失败!', errCode = -1 } = err;
|
||||
|
||||
// 错误码5: 表示用户点击了取消. openChannelsActivity:fail cancel
|
||||
if ([5].includes(errCode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const showErrorToast = (otherMsgs = []) => {
|
||||
uni.showToast({
|
||||
title: [errMsg, message,...otherMsgs].join('\n'),
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
showErrorToast();
|
||||
}
|
||||
};
|
||||
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. 语音输入功能需要用户授权麦克风权限
|
||||
6
components/ai-chat-message/ai-chat-message.json
Normal file
6
components/ai-chat-message/ai-chat-message.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"ns-loading": "../ns-loading/ns-loading"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,11 @@
|
||||
<template>
|
||||
<view class="ai-chat-container">
|
||||
<!-- 聊天消息列表 -->
|
||||
<scroll-view class="chat-messages" scroll-y :scroll-top="scrollTop" @scroll="onScroll"
|
||||
<scroll-view
|
||||
class="chat-messages"
|
||||
scroll-y
|
||||
:scroll-top="scrollTop"
|
||||
@scroll="onScroll"
|
||||
:scroll-with-animation="false">
|
||||
|
||||
<!-- 加载更多历史消息 -->
|
||||
@@ -10,7 +14,11 @@
|
||||
</view>
|
||||
|
||||
<!-- 消息列表 -->
|
||||
<view v-for="item in messagesWithKey" :key="item.__renderKey" class="message-item" :class="[item.role, { 'first-message': item.__index === 0 }]">
|
||||
<view
|
||||
v-for="(message, index) in messages"
|
||||
:key="`msg-${message.id || message.timestamp}-${index}`"
|
||||
class="message-item"
|
||||
:class="[message.role, { 'first-message': index === 0 }]">
|
||||
|
||||
<!-- 用户消息 -->
|
||||
<view v-if="message.role === 'user'" class="user-message">
|
||||
@@ -77,12 +85,21 @@
|
||||
<text class="audio-duration">{{ formatDuration(message.duration) }}</text>
|
||||
</view>
|
||||
<view class="audio-controls">
|
||||
<button class="play-btn" :class="{ playing: message.playing }" @click="toggleAudio(message)">
|
||||
<button
|
||||
class="play-btn"
|
||||
:class="{ playing: message.playing }"
|
||||
@click="toggleAudio(message)">
|
||||
<text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text>
|
||||
</button>
|
||||
<slider class="audio-slider" :value="message.currentTime || 0" :max="message.duration || 0"
|
||||
@changing="onAudioSliderChange" @change="onAudioSliderChangeEnd" activeColor="#8a9fb8"
|
||||
backgroundColor="#e8edf3" block-size="12" />
|
||||
<slider
|
||||
class="audio-slider"
|
||||
:value="message.currentTime || 0"
|
||||
:max="message.duration || 0"
|
||||
@changing="onAudioSliderChange"
|
||||
@change="onAudioSliderChangeEnd"
|
||||
activeColor="#8a9fb8"
|
||||
backgroundColor="#e8edf3"
|
||||
block-size="12" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -90,8 +107,14 @@
|
||||
<!-- 视频消息 -->
|
||||
<view v-else-if="message.type === 'video'" class="video-content">
|
||||
<view class="video-player">
|
||||
<video :src="message.url" :poster="message.cover" :controls="true" :autoplay="false"
|
||||
class="video-element" @play="onVideoPlay(message)" @pause="onVideoPause(message)">
|
||||
<video
|
||||
:src="message.url"
|
||||
:poster="message.cover"
|
||||
:controls="true"
|
||||
:autoplay="false"
|
||||
class="video-element"
|
||||
@play="onVideoPlay(message)"
|
||||
@pause="onVideoPause(message)">
|
||||
</video>
|
||||
<view class="video-info">
|
||||
<text class="video-title">{{ message.title || '视频消息' }}</text>
|
||||
@@ -140,8 +163,12 @@
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="message-actions" v-if="message.actions && message.actions.length > 0">
|
||||
<button v-for="action in message.actions" :key="action.id" class="action-btn"
|
||||
:class="[`iconfont`, action.icon, action.type]" @click="handleAction(action, message)">
|
||||
<button
|
||||
v-for="action in message.actions"
|
||||
:key="action.id"
|
||||
class="action-btn"
|
||||
:class="[`iconfont`, action.icon, action.type]"
|
||||
@click="handleAction(action, message)">
|
||||
{{ action.text }}
|
||||
</button>
|
||||
</view>
|
||||
@@ -172,11 +199,21 @@
|
||||
</view>
|
||||
|
||||
<view class="input-container">
|
||||
<textarea v-model="inputText" class="message-input" placeholder="请输入您的问题..." :maxlength="500"
|
||||
:auto-height="true" :show-confirm-bar="false" @confirm="sendMessage" @input="onInput" />
|
||||
<textarea
|
||||
v-model="inputText"
|
||||
class="message-input"
|
||||
placeholder="请输入您的问题..."
|
||||
:maxlength="500"
|
||||
:auto-height="true"
|
||||
:show-confirm-bar="false"
|
||||
@confirm="sendMessage"
|
||||
@input="onInput" />
|
||||
|
||||
<!-- 发送按钮 -->
|
||||
<button class="send-btn" :class="{ disabled: !inputText.trim() }" @click="sendMessage"
|
||||
<button
|
||||
class="send-btn"
|
||||
:class="{ disabled: !inputText.trim() }"
|
||||
@click="sendMessage"
|
||||
:disabled="!inputText.trim()">
|
||||
<text>发送</text>
|
||||
</button>
|
||||
@@ -234,7 +271,11 @@
|
||||
</view>
|
||||
<view class="voice-content">
|
||||
<view class="voice-wave" :class="{ recording: voiceInputing }">
|
||||
<view v-for="i in 8" :key="i" class="wave-bar" :style="{ animationDelay: (i * 0.1) + 's' }"></view>
|
||||
<view
|
||||
v-for="i in 8"
|
||||
:key="i"
|
||||
class="wave-bar"
|
||||
:style="{ animationDelay: (i * 0.1) + 's' }"></view>
|
||||
</view>
|
||||
<text class="voice-tip">{{ voiceInputing ? '正在录音,松开结束' : '点击开始录音' }}</text>
|
||||
</view>
|
||||
@@ -290,15 +331,23 @@
|
||||
</view>
|
||||
<view class="nickname-editor-content">
|
||||
<view class="nickname-input-container">
|
||||
<input v-model="tempNickname" class="nickname-input" placeholder="请输入您的新昵称" :maxlength="12" type="text" />
|
||||
<input
|
||||
v-model="tempNickname"
|
||||
class="nickname-input"
|
||||
placeholder="请输入您的新昵称"
|
||||
:maxlength="12"
|
||||
type="text" />
|
||||
</view>
|
||||
<view class="nickname-tip">昵称长度限制1-12个字符,仅自己可见</view>
|
||||
<view class="nickname-editor-actions">
|
||||
<button class="nickname-action-btn cancel" @click="closeNicknameEditor">
|
||||
<text>取消</text>
|
||||
</button>
|
||||
<button class="nickname-action-btn confirm" :class="{ disabled: !tempNickname.trim() }"
|
||||
:disabled="!tempNickname.trim()" @click="saveNickname">
|
||||
<button
|
||||
class="nickname-action-btn confirm"
|
||||
:class="{ disabled: !tempNickname.trim() }"
|
||||
:disabled="!tempNickname.trim()"
|
||||
@click="saveNickname">
|
||||
<text>保存</text>
|
||||
</button>
|
||||
</view>
|
||||
@@ -308,10 +357,14 @@
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import nsLoading from '@/components/ns-loading/ns-loading.vue'
|
||||
import aiService from '@/common/js/ai-service.js'
|
||||
|
||||
export default {
|
||||
name: 'ai-chat-message',
|
||||
components: {
|
||||
nsLoading
|
||||
},
|
||||
props: {
|
||||
// 初始消息列表
|
||||
initialMessages: {
|
||||
@@ -391,19 +444,6 @@ export default {
|
||||
isFetchingHistory: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 为每条消息生成兼容小程序的唯一 key
|
||||
messagesWithKey() {
|
||||
return this.messages.map((msg, idx) => {
|
||||
const uniqueId = msg.id || msg.timestamp || idx;
|
||||
return {
|
||||
...msg,
|
||||
__renderKey: `msg_${uniqueId}_${idx}`,
|
||||
__index: idx // 保留原始索引,用于判断 first-message 等
|
||||
};
|
||||
});
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 优先读取本地缓存的会话 ID
|
||||
const localConvId = this.getConversationIdFromLocal();
|
||||
@@ -1366,8 +1406,7 @@ $radius-lg: 36rpx;
|
||||
padding: 24rpx 32rpx;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
/* 重要:防止flex元素溢出 */
|
||||
min-height: 0; /* 重要:防止flex元素溢出 */
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
@@ -1382,8 +1421,7 @@ $radius-lg: 36rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
|
||||
.user-message,
|
||||
.ai-message {
|
||||
.user-message, .ai-message {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -1414,25 +1452,26 @@ $radius-lg: 36rpx;
|
||||
margin-left: 24rpx;
|
||||
max-width: calc(100% - 112rpx);
|
||||
min-width: 0;
|
||||
width: 0;
|
||||
/* 添加这个属性防止flex元素溢出 */
|
||||
width: 0; /* 添加这个属性防止flex元素溢出 */
|
||||
|
||||
.message-nickname {
|
||||
font-size: 24rpx;
|
||||
color: $color-text-light;
|
||||
margin-bottom: 8rpx;
|
||||
letter-spacing: 0.5rpx;
|
||||
// 用户昵称右对齐,AI昵称左对齐
|
||||
&:not(.ai-message .message-nickname) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// AI昵称专属样式 - 左移到气泡上方
|
||||
.ai-nickname {
|
||||
&.ai-nickname {
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
align-self: flex-start;
|
||||
margin-bottom: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.message-bubble {
|
||||
padding: 24rpx 32rpx;
|
||||
@@ -1863,27 +1902,20 @@ $radius-lg: 36rpx;
|
||||
text-align: right;
|
||||
|
||||
.message-bubble {
|
||||
background: linear-gradient(135deg, #ffadd2, #f783ac) !important;
|
||||
/* 粉色渐变 */
|
||||
background: linear-gradient(135deg, #ffadd2, #f783ac) !important; /* 粉色渐变 */
|
||||
color: white !important;
|
||||
border-radius: 16rpx 16rpx 4rpx 16rpx;
|
||||
/* 右对齐气泡尖角适配 */
|
||||
border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */
|
||||
box-shadow: 0 8rpx 20rpx rgba(247, 131, 172, 0.3) !important;
|
||||
border: none !important;
|
||||
/* ✅ 关键:允许内容撑开高度 */
|
||||
min-height: auto;
|
||||
height: auto;
|
||||
padding: 24rpx 32rpx;
|
||||
/* 保留内边距 */
|
||||
display: inline-block;
|
||||
/* 让宽度也随内容收缩(可选) */
|
||||
max-width: 80%;
|
||||
/* 防止过宽 */
|
||||
padding: 24rpx 32rpx; /* 保留内边距 */
|
||||
display: inline-block; /* 让宽度也随内容收缩(可选) */
|
||||
max-width: 80%; /* 防止过宽 */
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
/* 保留用户输入的换行符 */
|
||||
white-space: pre-wrap; /* 保留用户输入的换行符 */
|
||||
line-height: 1.6;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -1891,8 +1923,7 @@ $radius-lg: 36rpx;
|
||||
right: -14rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #ffffff !important;
|
||||
/* 菱形改为白色 */
|
||||
background: #ffffff !important; /* 菱形改为白色 */
|
||||
border-radius: 6rpx;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||
@@ -1905,9 +1936,11 @@ $radius-lg: 36rpx;
|
||||
left: -100%;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right,
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.15) 100%);
|
||||
rgba(255, 255, 255, 0.15) 100%
|
||||
);
|
||||
animation: shine 4s infinite linear;
|
||||
}
|
||||
}
|
||||
@@ -1923,11 +1956,9 @@ $radius-lg: 36rpx;
|
||||
align-items: flex-start;
|
||||
|
||||
.message-bubble {
|
||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
|
||||
/* 蓝色浅渐变 */
|
||||
background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important; /* 蓝色浅渐变 */
|
||||
color: #2c3e50 !important;
|
||||
border-radius: 16rpx 16rpx 16rpx 4rpx;
|
||||
/* 左对齐气泡尖角适配 */
|
||||
border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */
|
||||
box-shadow: 0 8rpx 20rpx rgba(191, 219, 254, 0.4) !important;
|
||||
border: 1rpx solid #dbeafe !important;
|
||||
min-height: auto;
|
||||
@@ -1938,7 +1969,6 @@ $radius-lg: 36rpx;
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.6;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
@@ -1946,8 +1976,7 @@ $radius-lg: 36rpx;
|
||||
left: -14rpx;
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
background: #ffffff !important;
|
||||
/* 菱形改为白色 */
|
||||
background: #ffffff !important; /* 菱形改为白色 */
|
||||
border-radius: 6rpx;
|
||||
transform: rotate(45deg);
|
||||
box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
|
||||
@@ -2047,12 +2076,9 @@ $radius-lg: 36rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
text-align: center;
|
||||
/* 兼容多端文字居中 */
|
||||
white-space: nowrap;
|
||||
/* 强制文字单行横向显示 */
|
||||
line-height: 1;
|
||||
/* 重置行高,避免文字垂直偏移 */
|
||||
text-align: center; /* 兼容多端文字居中 */
|
||||
white-space: nowrap; /* 强制文字单行横向显示 */
|
||||
line-height: 1; /* 重置行高,避免文字垂直偏移 */
|
||||
top:-10px;
|
||||
|
||||
&.disabled {
|
||||
@@ -2076,10 +2102,8 @@ $radius-lg: 36rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
/* 让鼠标事件穿透容器,不影响主内容交互 */
|
||||
z-index: 999;
|
||||
/* 基础弹窗层级 */
|
||||
pointer-events: none; /* 让鼠标事件穿透容器,不影响主内容交互 */
|
||||
z-index: 999; /* 基础弹窗层级 */
|
||||
|
||||
/* 子弹窗需要开启 pointer-events,否则点击无效 */
|
||||
> .tools-popup,
|
||||
@@ -2450,45 +2474,14 @@ $radius-lg: 36rpx;
|
||||
border-radius: 4rpx;
|
||||
animation: none;
|
||||
|
||||
&:nth-child(1) {
|
||||
height: 60rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
height: 90rpx;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
height: 50rpx;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
height: 120rpx;
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
height: 70rpx;
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
height: 100rpx;
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
height: 80rpx;
|
||||
animation-delay: 0.6s;
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
height: 40rpx;
|
||||
animation-delay: 0.7s;
|
||||
}
|
||||
&:nth-child(1) { height: 60rpx; animation-delay: 0s; }
|
||||
&:nth-child(2) { height: 90rpx; animation-delay: 0.1s; }
|
||||
&:nth-child(3) { height: 50rpx; animation-delay: 0.2s; }
|
||||
&:nth-child(4) { height: 120rpx; animation-delay: 0.3s; }
|
||||
&:nth-child(5) { height: 70rpx; animation-delay: 0.4s; }
|
||||
&:nth-child(6) { height: 100rpx; animation-delay: 0.5s; }
|
||||
&:nth-child(7) { height: 80rpx; animation-delay: 0.6s; }
|
||||
&:nth-child(8) { height: 40rpx; animation-delay: 0.7s; }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2656,13 +2649,10 @@ $radius-lg: 36rpx;
|
||||
|
||||
/* 动画定义 */
|
||||
@keyframes dotPulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
0%, 100% {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.2);
|
||||
@@ -2670,13 +2660,10 @@ $radius-lg: 36rpx;
|
||||
}
|
||||
|
||||
@keyframes wave {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
0%, 100% {
|
||||
transform: scaleY(0.5);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scaleY(1);
|
||||
opacity: 1;
|
||||
@@ -2687,7 +2674,6 @@ $radius-lg: 36rpx;
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 200%;
|
||||
}
|
||||
@@ -2697,11 +2683,9 @@ $radius-lg: 36rpx;
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
@@ -2738,8 +2722,7 @@ $radius-lg: 36rpx;
|
||||
.message-item {
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.user-message,
|
||||
.ai-message {
|
||||
.user-message, .ai-message {
|
||||
.avatar {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
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 v-if="localMemberAddress">
|
||||
<block v-if="storeList && Object.keys(storeList).length > 1">
|
||||
<view class="local-delivery-store" v-if="storeInfo" @click="openPopup('deliveryPopup')">
|
||||
<view class="info">
|
||||
<block v-if="storeList && Object.keys(storeList).length > 0">
|
||||
<view class="local-delivery-store">
|
||||
<view class="info" v-if="storeInfo">
|
||||
由
|
||||
<text class="store-name">{{ storeInfo.store_name }}</text>
|
||||
提供配送
|
||||
<view>营业时间:{{ storeInfo.open_date }}</view>
|
||||
</view>
|
||||
<view class="cell-more">
|
||||
<view class="info" v-else>
|
||||
<text class="store-name">超出配送范围,请选择其他门店</text>
|
||||
</view>
|
||||
<view class="cell-more" v-if="Object.keys(storeList).length > 1" @click="openPopup('deliveryPopup')">
|
||||
<text>点击切换</text>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="local-delivery-store">
|
||||
<view class="info">
|
||||
<text class="store-name">您的附近没有可配送的门店,请选择其他配送方式</text>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="info-wrap local" @click="selectAddress">
|
||||
<view class="content">
|
||||
<text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }}
|
||||
</text>
|
||||
<text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}
|
||||
</text>
|
||||
<text class="name">{{ localMemberAddress.name ? localMemberAddress.name : '' }}</text>
|
||||
<text class="mobile">{{ localMemberAddress.mobile ? localMemberAddress.mobile : '' }}</text>
|
||||
<view class="desc-wrap">
|
||||
{{ localMemberAddress.full_address ? localMemberAddress.full_address : '' }}
|
||||
{{ localMemberAddress.address ? localMemberAddress.address : '' }}
|
||||
@@ -125,9 +122,9 @@
|
||||
<text>{{ storeInfo.store_name }}</text>
|
||||
</view>
|
||||
<view class="store-detail">
|
||||
<view class="close-desc" v-if="storeInfo.status == 0 && storeInfo.close_desc">{{ storeInfo.close_desc }}</view>
|
||||
<view v-if="storeInfo.open_date">营业时间:{{ storeInfo.open_date }}</view>
|
||||
<view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }}
|
||||
</view>
|
||||
<view class="address">{{ storeInfo.full_address }} {{ storeInfo.address }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cell-more iconfont icon-right" v-if="storeList && Object.keys(storeList).length > 1"></view>
|
||||
@@ -145,7 +142,14 @@
|
||||
<input type="number" maxlength="11" placeholder="请输入您的手机号码" placeholder-class="color-tip placeholder" class="input" v-model="orderCreateData.member_address.mobile" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="store-time" @click="storetime('')">
|
||||
<view class="store-time" v-if="goodsData.jielong_id">
|
||||
<view class="left">提货时间</view>
|
||||
<view class="right">
|
||||
{{ $util.timeStampTurnTime(goodsData.jielong_info.take_start_time,'Y/m/d') }} ~ {{ $util.timeStampTurnTime(goodsData.jielong_info.take_end_time,'Y/m/d') }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="store-time" @click="storetime('')" v-else>
|
||||
<view class="left">提货时间</view>
|
||||
<view class="right">
|
||||
{{ deliveryTime }}
|
||||
@@ -159,22 +163,17 @@
|
||||
</template>
|
||||
|
||||
<!-- 店铺 -->
|
||||
|
||||
<view class="site-wrap order-goods" v-for="(calculateGoodsData, siteIndex) in shop_goods_list" :key="siteIndex">
|
||||
<view class="site-header">
|
||||
<view class="iconfont icon-dianpu"></view>
|
||||
<text class="site-name">{{calculateGoodsData.site_name}}</text>
|
||||
</view>
|
||||
<view class="site-wrap order-goods" v-if="calculateGoodsData">
|
||||
<view class="site-body">
|
||||
<!-- 商品 -->
|
||||
<view class="goods-item" v-for="(goodsItem, goodsIndex) in goodsSpecFormat(calculateGoodsData.goods_list)" :key="goodsIndex">
|
||||
<view class="goods-item" v-for="(goodsItem, goodsIndex) in calculateGoodsData.goods_list" :key="goodsIndex">
|
||||
<view class="goods-wrap">
|
||||
<view class="goods-img" @click="$util.redirectTo('/pages_goods/detail', { goods_id: goodsItem.goods_id })">
|
||||
<view class="goods-img" @click="$util.redirectTo('/pages/goods/detail', { goods_id: goodsItem.goods_id })">
|
||||
<image :src="$util.img(goodsItem.sku_image, { size: 'mid' })" @error="imageError(goodsIndex)" mode="aspectFill"/>
|
||||
</view>
|
||||
<view class="goods-info">
|
||||
<view class="top-wrap">
|
||||
<view @click="$util.redirectTo('/pages_goods/detail', { goods_id: goodsItem.goods_id })" class="goods-name">{{ goodsItem.sku_name }}</view>
|
||||
<view @click="$util.redirectTo('/pages/goods/detail', { goods_id: goodsItem.goods_id })" class="goods-name">{{ goodsItem.sku_name }}</view>
|
||||
<view class="sku" v-if="goodsItem.sku_spec_format">
|
||||
<view class="goods-spec">
|
||||
<block v-for="(x, i) in goodsItem.sku_spec_format" :key="i">
|
||||
@@ -210,6 +209,17 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-goods-card order-cell" v-if="calculateGoodsData.goods_list[goodsIndex].member_card_list" @click="selectMemberGoodsCard(goodsIndex)">
|
||||
<text class="tit">次卡抵扣</text>
|
||||
<view class="box text-overflow">
|
||||
<block v-if="calculateGoodsData.goods_list[goodsIndex].card_promotion_money">
|
||||
<text class="text">次卡抵扣{{ calculateGoodsData.goods_list[goodsIndex].card_use_num }}张/{{ calculateGoodsData.goods_list[goodsIndex].card_use_num }}次</text>
|
||||
<text class="price-font">-¥{{ calculateGoodsData.goods_list[goodsIndex].card_promotion_money | moneyFormat }}</text>
|
||||
</block>
|
||||
<text class="color-tip" v-else>请选择次卡</text>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
<view class="goods-form" v-if="goodsData.goods_list[goodsIndex].goods_form" @click="editForm(goodsIndex)">
|
||||
<ns-form :data="goodsData.goods_list[goodsIndex].goods_form.json_data" ref="goodsForm" :custom-attr="{ sku_id: goodsItem.sku_id, form_id: goodsData.goods_list[goodsIndex].goods_form.id }"/>
|
||||
<text class="cell-more iconfont icon-right"></text>
|
||||
@@ -217,48 +227,18 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="site-wrap buyer-message">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="order-money" style="margin: 0;">
|
||||
<view class="site-wrap buyer-message">
|
||||
<view class="order-cell">
|
||||
<text class="tit">买家留言</text>
|
||||
<view class="box text-overflow " @click="openPopup('buyerMessagePopup')">
|
||||
<text v-if="orderCreateData.buyer_message">{{ orderCreateData.buyer_message[calculateGoodsData.merch_id] }}</text>
|
||||
<text v-if="orderCreateData.buyer_message">{{ orderCreateData.buyer_message }}</text>
|
||||
<text class="color-sub" v-else>无留言</text>
|
||||
</view>
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
<view 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>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<view v-if="paymentData.system_form" class="system-form-wrap">
|
||||
<view class="order-cell">
|
||||
@@ -267,7 +247,7 @@
|
||||
<ns-form :data="paymentData.system_form.json_data" ref="form"/>
|
||||
</view>
|
||||
|
||||
<!-- <view class="site-wrap" v-if="calculateGoodsData || promotionInfo || (calculateGoodsData && calculateGoodsData.max_usable_point > 0) || goodsData.invoice">
|
||||
<view class="site-wrap" v-if="calculateGoodsData || promotionInfo || (calculateGoodsData && calculateGoodsData.max_usable_point > 0) || goodsData.invoice">
|
||||
<view class="site-footer">
|
||||
<view class="order-cell coupon" v-if="modules.indexOf('coupon') != -1">
|
||||
<text class="tit">优惠券</text>
|
||||
@@ -306,7 +286,7 @@
|
||||
<text class="iconfont icon-right"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<view class="site-wrap box member-card-wrap" v-if="paymentData.recommend_member_card && Object.keys(paymentData.recommend_member_card).length > 0">
|
||||
<view class="head" @click="selectMemberCard">
|
||||
@@ -320,7 +300,7 @@
|
||||
<text class="iconfont" :class="orderCreateData.is_open_card == 1 ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></text>
|
||||
</view>
|
||||
<view class="body" v-if="orderCreateData.is_open_card">
|
||||
<view class="item" :class="{ 'active color-base-border': item.key == orderCreateData.member_card_unit }" v-for="(item, index) in cardChargeType" :key="index" @click="selectMembercardUnit(item.key)">
|
||||
<view class="item" :class="{ 'active color-base-border': item.key == orderCreateData.member_card_unit }" v-for="(item, index) in cardChargeType" :key="index" @click="selectMemberCardUnit(item.key)">
|
||||
<view class="title">{{ item.title }}</view>
|
||||
<view class="price price-font">{{ $lang('common.currencySymbol') }}{{ parseFloat(item.value) }}/{{ item.unit }}</view>
|
||||
<text class="iconfont icon-icon color-base-text price-font identify" v-if="item.key == orderCreateData.member_card_unit"></text>
|
||||
@@ -346,7 +326,7 @@
|
||||
<text class="money price-font">{{ calculateData.delivery_money | moneyFormat }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_money > 0">
|
||||
<view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_money > 0">
|
||||
<text class="tit">
|
||||
<text>税费</text>
|
||||
<text class="color-base-text font-bold price-font">({{ goodsData.invoice.invoice_rate }}%)</text>
|
||||
@@ -356,15 +336,15 @@
|
||||
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="money price-font">{{ calculateData.invoice_money | moneyFormat }}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_delivery_money > 0">
|
||||
</view>
|
||||
<view class="order-cell" v-if="orderCreateData.is_invoice && calculateData.invoice_delivery_money > 0">
|
||||
<text class="tit">发票邮寄费</text>
|
||||
<view class="box color-base-text">
|
||||
<text class="operator">+</text>
|
||||
<text class="unit price-font">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text class="money price-font">{{ calculateData.invoice_delivery_money | moneyFormat }}</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="order-cell" v-if="calculateData.promotion_money > 0">
|
||||
<text class="tit">优惠</text>
|
||||
<view class="box color-base-text">
|
||||
@@ -389,7 +369,7 @@
|
||||
<text class="money price-font">{{ calculateData.point_money | moneyFormat }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="order-cell" v-if="calculateData.member_card_money > 0">
|
||||
<view class="order-cell" v-if="calculateData.member_card_money > 0">
|
||||
<text class="tit">会员卡</text>
|
||||
<view class="box color-base-text">
|
||||
<text class="operator">+</text>
|
||||
@@ -397,7 +377,7 @@
|
||||
<text class="money price-font">{{ calculateData.member_card_money | moneyFormat }}
|
||||
</text>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="transactionAgreement.title && transactionAgreement.content" class="agreement">购买前请先阅读<text @click="$refs.agreementPopup.open()">《{{ transactionAgreement.title }}》</text>,下单即代表同意该协议</view>
|
||||
@@ -412,7 +392,7 @@
|
||||
</view>
|
||||
<view class="submit-btn">
|
||||
<button type="primary" class="mini" size="mini" @click="create()" v-if="!surplusStartMoney()">提交订单</button>
|
||||
<!-- <button v-else class="no-submit mini" size="mini">差{{ surplusStartMoney() | moneyFormat }}起送</button> -->
|
||||
<button v-else class="no-submit mini" size="mini">差{{ surplusStartMoney() | moneyFormat }}起送</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="order-submit-block"></view>
|
||||
@@ -420,6 +400,68 @@
|
||||
<payment ref="choosePaymentPopup" @close="payClose" v-if="calculateData"></payment>
|
||||
</template>
|
||||
|
||||
<!-- 发票弹窗 -->
|
||||
<uni-popup ref="invoicePopup" type="bottom" :mask-click="false">
|
||||
<view :style="orderCreateData.is_invoice == 1 ? 'height: 83vh;' : 'height: 48vh;'" class="invoice-popup popup" @touchmove.prevent.stop>
|
||||
<view class="popup-header">
|
||||
<text class="tit">发票</text>
|
||||
<text class="iconfont icon-close" @click="closePopup('invoicePopup')"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
|
||||
<view>
|
||||
<view class="invoice-cell" v-if="goodsData.invoice">
|
||||
<text class="tit">需要发票</text>
|
||||
<view class="option-grpup">
|
||||
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.is_invoice == 0 }" @click="changeIsInvoice">不需要</view>
|
||||
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.is_invoice == 1 }" @click="changeIsInvoice">需要</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="orderCreateData.is_invoice == 1">
|
||||
<view class="invoice-cell">
|
||||
<text class="tit">发票类型</text>
|
||||
<view class="option-grpup">
|
||||
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.invoice_type == item }" @click="changeInvoiceType(item)" v-for="(item, index) in goodsData.invoice.invoice_type.split(',')" :key="index">
|
||||
{{ item == 1 ? '纸质' : '电子' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invoice-cell">
|
||||
<text class="tit">抬头类型</text>
|
||||
<view class="option-grpup">
|
||||
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.invoice_title_type == 1 }" @click="changeInvoiceTitleType(1)">
|
||||
个人
|
||||
</view>
|
||||
<view class="option-item" :class="{ 'color-base-bg active': orderCreateData.invoice_title_type == 2 }" @click="changeInvoiceTitleType(2)">
|
||||
企业
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="invoice-cell">
|
||||
<text class="tit">发票信息</text>
|
||||
<view class="invoice-form-group">
|
||||
<input type="text" placeholder="请填写抬头名称" v-model.trim="orderCreateData.invoice_title" />
|
||||
<input v-if="orderCreateData.invoice_title_type == 2" type="text" placeholder="请填写纳税人识别号" v-model.trim="orderCreateData.taxpayer_number" />
|
||||
<input type="text" placeholder="请填写邮寄地址" v-model.trim="orderCreateData.invoice_full_address" v-if="orderCreateData.invoice_type == 1" />
|
||||
<input type="text" placeholder="请填写邮箱" v-model.trim="orderCreateData.invoice_email" v-if="orderCreateData.invoice_type == 2" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="invoice-cell">
|
||||
<text class="tit">发票内容</text>
|
||||
<view class="option-grpup">
|
||||
<view :key="index" v-for="(item, index) in goodsData.invoice.invoice_content_array" :class="{ 'color-base-bg active': item == orderCreateData.invoice_content }" @click="changeInvoiceContent(item)" class="option-item content">
|
||||
{{ item }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="invoice-tops">发票内容将以根据税法调整,具体请以展示为准,发票内容显示详细商品名 称及价格信息</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="popup-footer" @click="saveInvoice" :class="{ 'bottom-safe-area': isIphoneX }">
|
||||
<view class="confirm-btn color-base-bg">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 活动优惠弹窗 -->
|
||||
<uni-popup ref="promotionPopup" type="bottom" v-if="promotionInfo">
|
||||
@@ -431,8 +473,7 @@
|
||||
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
|
||||
<view class="order-cell" style="align-items: baseline;">
|
||||
<view class="tit">
|
||||
<text class="promotion-mark ns-gradient-promotionpages-payment">{{ promotionInfo.title }}
|
||||
</text>
|
||||
<text class="promotion-mark ns-gradient-promotionpages-payment">{{ promotionInfo.title }}</text>
|
||||
</view>
|
||||
<view class="promotion-content">
|
||||
<view class="tit tit-content" style="white-space: pre-line;" v-html="promotionInfo.content"></view>
|
||||
@@ -465,6 +506,7 @@
|
||||
<text v-if="item.distance">({{ item.distance }}km)</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view v-if="item.status == 0 && item.close_desc" class="close-desc">{{ item.close_desc }}</view>
|
||||
<view :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">营业时间:{{ item.open_date }}</view>
|
||||
<view :class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''" class="font-size-goods-tag">地址:{{ item.full_address }}{{ item.address }}</view>
|
||||
</view>
|
||||
@@ -478,6 +520,33 @@
|
||||
<ns-empty text="所选择收货地址附近没有可以自提的门店" :isIndex="false"></ns-empty>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <block v-if="storeList">
|
||||
<view class="item-wrap" v-for="(item, index) in storeList" :key="index"
|
||||
@click="selectPickupPoint(item)">
|
||||
<view class="detail">
|
||||
<view class="name"
|
||||
:class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''">
|
||||
<text>{{ item.store_name }}</text>
|
||||
<text v-if="item.distance">({{ item.distance }}km)</text>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view
|
||||
:class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''"
|
||||
class="font-size-goods-tag">
|
||||
营业时间:{{ item.open_date }}
|
||||
</view>
|
||||
<view
|
||||
:class="item.store_id == orderCreateData.delivery.store_id ? 'color-base-text' : ''"
|
||||
class="font-size-goods-tag">
|
||||
地址:{{ item.full_address }}{{ item.address }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="icon" v-if="item.store_id == orderCreateData.delivery.store_id">
|
||||
<text class="iconfont icon-yuan_checked color-base-text"></text>
|
||||
</view>
|
||||
</view>
|
||||
</block> -->
|
||||
|
||||
</block>
|
||||
</mescroll-uni>
|
||||
@@ -509,7 +578,7 @@
|
||||
</uni-popup>
|
||||
|
||||
<!-- 优惠券弹窗 -->
|
||||
<uni-popup ref="couponPopup" type="bottom" :mask-click="false">
|
||||
<uni-popup ref="couponPopup" type="bottom" v-if="calculateGoodsData" :mask-click="false">
|
||||
<view class="coupon-popup popup" @touchmove.prevent.stop>
|
||||
<view class="popup-header">
|
||||
<text class="tit">优惠券</text>
|
||||
@@ -517,8 +586,8 @@
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
|
||||
<view v-if="merchCoupon.data.length > 0">
|
||||
<view class="coupon-item" v-for="(couponItem, couponIndex) in merchCoupon.data" :key="couponIndex" @click="selectCoupon(couponItem,merchCoupon.merch_id)">
|
||||
<view v-if="coupon_list.length > 0">
|
||||
<view class="coupon-item" v-for="(couponItem, couponIndex) in coupon_list" :key="couponIndex" @click="selectCoupon(couponItem)">
|
||||
<view class="coupon-info" :style="{ backgroundColor: 'var(--main-color-shallow)' }">
|
||||
<view class="info-wrap">
|
||||
<image class="coupon-line" mode="heightFix" :src="$util.img('public/uniapp/coupon/coupon_line.png')"/>
|
||||
@@ -536,12 +605,8 @@
|
||||
<text class="unit">折</text>
|
||||
</template>
|
||||
<view class="at-least">
|
||||
<template v-if="couponItem.at_least > 0">
|
||||
满{{ couponItem.at_least }}可用
|
||||
</template>
|
||||
<template v-else>
|
||||
无门槛
|
||||
</template>
|
||||
<template v-if="couponItem.at_least > 0">满{{ couponItem.at_least }}可用</template>
|
||||
<template v-else>无门槛</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -550,7 +615,7 @@
|
||||
<view v-if="couponItem.type == 'discount' && couponItem.discount_limit > 0" class="limit">最多可抵¥{{ couponItem.discount_limit }}</view>
|
||||
<view class="time font-size-goods-tag">有效期:{{ couponItem.end_time ? $util.timeStampTurnTime(couponItem.end_time) : '长期有效' }}</view>
|
||||
</view>
|
||||
<view class="iconfont" :class="selectCouponId == couponItem.coupon_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
|
||||
<view class="iconfont" :class="orderCreateData.coupon.coupon_id == couponItem.coupon_id ? 'icon-yuan_checked color-base-text' : 'icon-yuan_checkbox'"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -558,7 +623,7 @@
|
||||
</scroll-view>
|
||||
|
||||
<view class="popup-footer" :class="{ 'bottom-safe-area': isIphoneX }">
|
||||
<view class="confirm-btn color-base-bg" @click="useCpopon">确定</view>
|
||||
<view class="confirm-btn color-base-bg" @click="useCoupon">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
@@ -573,7 +638,7 @@
|
||||
<view class="title">{{ transactionAgreement.title }}</view>
|
||||
<view class="con">
|
||||
<scroll-view scroll-y="true" class="con">
|
||||
<rich-text :nodes="transactionAgreement.content"></rich-text>
|
||||
<ns-mp-html :content="transactionAgreement.content"></ns-mp-html>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -588,7 +653,7 @@
|
||||
<text class="iconfont icon-close" @click="$refs.editFormPopup.close()"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
|
||||
<ns-form v-if="tempFormData" :data="tempFormData.json_data" ref="tempForm"></ns-form>
|
||||
<ns-form v-if="tempFormData" :data="tempFormData.json_data" ref="tempForm" />
|
||||
</scroll-view>
|
||||
<view class="popup-footer" @click="saveForm" :class="{ 'bottom-safe-area': isIphoneX }">
|
||||
<view class="confirm-btn color-base-bg">确定</view>
|
||||
@@ -603,9 +668,9 @@
|
||||
<text class="iconfont icon-close" @click="$refs.memberGoodsCardPopup.close()"></text>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="popup-body" :class="{ 'safe-area': isIphoneX }">
|
||||
<view v-for="(item, index) in selectGoodsCard.cardList" :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="title">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view>
|
||||
<view class="title">{{ item.goods_name }}</view>
|
||||
<view class="info">
|
||||
<text v-if="item.card_type == 'timecard'">不限次数</text>
|
||||
<text v-if="item.card_type == 'oncecard'">剩余{{ item.num - item.use_num }}次</text>
|
||||
@@ -635,6 +700,7 @@
|
||||
|
||||
<script>
|
||||
import payment from './payment.js';
|
||||
|
||||
export default {
|
||||
name: 'common-payment',
|
||||
data() {
|
||||
@@ -270,7 +270,7 @@ export default {
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.$util.redirectTo(this.$util.INDEX_PAGE_URL);
|
||||
this.$util.redirectTo('/pages/index/index');
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
@@ -922,7 +922,7 @@ export default {
|
||||
payClose() {
|
||||
// 更新购物车数量
|
||||
this.$store.dispatch('getCartNumber');
|
||||
this.$util.redirectTo('/pages_order/detail', {
|
||||
this.$util.redirectTo('/pages/order/detail', {
|
||||
order_id: this.$refs.choosePaymentPopup.payInfo.order_id
|
||||
}, '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,18 +1,21 @@
|
||||
<template>
|
||||
<view data-component-name="diy-comp-extend"></view>
|
||||
<view data-component-name="diy-comp-extend" :style="value.pageStyle">
|
||||
<view></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 自定义扩展组件
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-comp-extend',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
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>
|
||||
<view :style="componentStyle" data-component-name="diy-digit">
|
||||
<scroll-view :class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
|
||||
:scroll-x="value.showStyle == 'singleSlide'">
|
||||
<view :style="componentStyle">
|
||||
<scroll-view
|
||||
:class="['graphic-nav', value.showStyle == 'fixed' ? 'fixed-layout' : value.showStyle]"
|
||||
:scroll-x="value.showStyle == 'singleSlide'"
|
||||
>
|
||||
<view class="uni-scroll-view-content">
|
||||
<view v-for="(item, index) in value.list" :key="index"
|
||||
<view
|
||||
v-for="(item, index) in value.list"
|
||||
:key="index"
|
||||
:class="['graphic-nav-item', value.mode, value.mode === 'text' ? 'newright' : '']"
|
||||
:style="{ width: (100 / value.rowCount + '%') + ';' }">
|
||||
:style="{ width: (100 / value.rowCount + '%') + ';' }"
|
||||
>
|
||||
<view style="display:flex;">
|
||||
<view :style="{
|
||||
'line-height': '1.2;',
|
||||
@@ -13,8 +18,14 @@
|
||||
'font-weight': '600;',
|
||||
'color': value.font.titlecolor + ';'
|
||||
}">
|
||||
<uv-count-to :ref="`countTo-${index}`" :autoplay="true" :startVal="30" :endVal="item.title"
|
||||
:decimals="getvalue(item.title)" decimal="."></uv-count-to>
|
||||
<uv-count-to
|
||||
:ref="`countTo-${index}`"
|
||||
:autoplay="true"
|
||||
:startVal="30"
|
||||
:endVal="item.title"
|
||||
:decimals="getvalue(item.title)"
|
||||
decimal="."
|
||||
></uv-count-to>
|
||||
<text :style="{
|
||||
'margin-left': '4rpx;',
|
||||
'font-size': (value.font.unitsize * 2 + 'rpx') + ';',
|
||||
@@ -38,17 +49,21 @@
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
name: 'diy-digit',
|
||||
components: {
|
||||
uvCountTo,
|
||||
nsLogin
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
pageWidth: '',
|
||||
@@ -90,7 +105,7 @@ export default {
|
||||
|
||||
// 页面跳转
|
||||
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);
|
||||
this.$util.diyRedirectTo(item);
|
||||
} else {
|
||||
@@ -1,69 +1,66 @@
|
||||
<template>
|
||||
<view data-component-name="diy-fenxiao-goods-list" class="diy-fenxiao" v-if="list.length"
|
||||
:class="['goods-list', value.template, value.style]" :style="goodsListWarpCss">
|
||||
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)"
|
||||
:class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view :style="value.pageStyle" v-if="list && list.length">
|
||||
<view class="diy-fenxiao" v-if="list.length" :class="['goods-list', value.template, value.style]" :style="goodsListWarpCss">
|
||||
<view class="goods-item" v-for="(item, index) in list" :key="index" @click="toDetail(item)" :class="[value.ornament.type]" :style="goodsItemCss">
|
||||
<view class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }">
|
||||
<image :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
|
||||
:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)" />
|
||||
<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="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 }}
|
||||
:class="[{ 'using-hidden': value.nameLineMode == 'single' }, { 'multi-hidden': value.nameLineMode == 'multiple' }]"
|
||||
>
|
||||
{{ item.goods_name }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="pro-info">
|
||||
<view class="discount-price">
|
||||
<view class="price-wrap" v-if="value.priceStyle.mainControl">
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">赚 ¥</text>
|
||||
<text class="price price-style large"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{
|
||||
item.commission_money.split('.')[0] }}</text>
|
||||
<text class="unit price-style small"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.mainColor : '' }">{{ '.' +
|
||||
item.commission_money.split('.')[1] }}</text>
|
||||
<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="{
|
||||
<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)">
|
||||
}"
|
||||
@click.stop="followGoods(item, index)">
|
||||
关注
|
||||
</view>
|
||||
<view class="sale-btn" v-if="value.btnStyle.control && item.is_collect == 1" :style="{
|
||||
<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)">
|
||||
}"
|
||||
@click.stop="delFollowTip(item, index)">
|
||||
取消关注
|
||||
</view>
|
||||
</view>
|
||||
<view class="delete-price" v-if="value.priceStyle.lineControl"
|
||||
:style="{ color: value.theme == 'diy' ? value.priceStyle.lineColor : '' }">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 自定义分晓商品列表
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-fenxiao-goods-list',
|
||||
props: {
|
||||
value: {
|
||||
type: Object
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
list: [],
|
||||
@@ -75,7 +72,7 @@ export default {
|
||||
this.currentRoute = '/' + currentPage.route;
|
||||
if (!this.storeToken) {
|
||||
this.$util.redirectTo(
|
||||
this.$util.LOGIN_PAGE_URL,
|
||||
'/pages_tool/login/login',
|
||||
{
|
||||
back: this.currentRoute
|
||||
},
|
||||
@@ -124,7 +121,7 @@ export default {
|
||||
methods: {
|
||||
//页面跳转
|
||||
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) {
|
||||
@@ -215,7 +212,8 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.diy-fenxiao {}
|
||||
.diy-fenxiao {
|
||||
}
|
||||
|
||||
// 商品列表单列样式
|
||||
.goods-list.row1-of1 {
|
||||
@@ -223,11 +221,9 @@ export default {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
margin: 8rpx 8rpx 20rpx 8rpx;
|
||||
}
|
||||
@@ -236,7 +232,6 @@ export default {
|
||||
width: 180rpx;
|
||||
overflow: hidden;
|
||||
margin-right: 20rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -252,11 +247,9 @@ export default {
|
||||
.name-wrap {
|
||||
flex: 1;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
height: 72rpx;
|
||||
}
|
||||
@@ -267,31 +260,25 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.sale {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.price-wrap {
|
||||
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;
|
||||
@@ -307,7 +294,6 @@ export default {
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.sale-btn {
|
||||
position: absolute;
|
||||
right: 20rpx;
|
||||
@@ -327,7 +313,6 @@ export default {
|
||||
.goods-list.row1-of2 {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.goods-item {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
@@ -335,30 +320,24 @@ export default {
|
||||
margin-right: 20rpx;
|
||||
margin-top: 20rpx;
|
||||
width: calc(50% - 10rpx);
|
||||
|
||||
&:nth-child(2n + 2) {
|
||||
width: calc(50% - 11rpx);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.shadow {
|
||||
width: calc(50% - 18rpx);
|
||||
|
||||
&:nth-child(2n-1) {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2) {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -379,11 +358,9 @@ export default {
|
||||
|
||||
.name-wrap {
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.goods-name {
|
||||
font-size: $font-size-base;
|
||||
line-height: 1.3;
|
||||
|
||||
&.multi-hidden {
|
||||
height: 72rpx;
|
||||
}
|
||||
@@ -395,30 +372,24 @@ export default {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.sale {
|
||||
font-size: 20rpx;
|
||||
line-height: 1;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.discount-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.price-wrap {
|
||||
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;
|
||||
@@ -434,7 +405,6 @@ export default {
|
||||
font-size: $font-size-activity-tag;
|
||||
}
|
||||
}
|
||||
|
||||
.sale-btn {
|
||||
position: absolute;
|
||||
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>
|
||||
@@ -55,8 +55,7 @@
|
||||
|
||||
<template v-if="item.componentName == 'Search'">
|
||||
<!-- 搜索 -->
|
||||
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global"
|
||||
:haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
||||
<diy-search :value="item" :topNavColor="topNavColor" :global="diyGlobalData.global" :haveTopCategory="haveTopCategory" :followOfficialAccount="followOfficialAccount"></diy-search>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'RichText'">
|
||||
@@ -86,8 +85,7 @@
|
||||
|
||||
<template v-if="item.componentName == 'ManyGoodsList'">
|
||||
<!-- 多商品组 -->
|
||||
<diy-many-goods-list :value="item" :global="diyGlobalData.global"
|
||||
:scrollTop="scrollTop"></diy-many-goods-list>
|
||||
<diy-many-goods-list :value="item" :global="diyGlobalData.global" :scrollTop="scrollTop"></diy-many-goods-list>
|
||||
</template>
|
||||
|
||||
<template v-if="item.componentName == 'RubikCube'">
|
||||
@@ -216,45 +214,7 @@
|
||||
<diy-audio :value="item"></diy-audio>
|
||||
</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="['ChannelList', 'WechatChannel'].includes(item.componentName)">
|
||||
<!-- 视频号列表 -->
|
||||
<diy-channel-list :value="item"></diy-channel-list>
|
||||
</template>
|
||||
|
||||
<!-- 自定义扩展组件 -->
|
||||
<diy-comp-extend :value="item"></diy-comp-extend>
|
||||
@@ -263,10 +223,9 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 组件组展示
|
||||
import DiyMinx from './minx.js'
|
||||
|
||||
// 组件组
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
diyData: {
|
||||
type: Object
|
||||
@@ -282,7 +241,6 @@ export default {
|
||||
type: Object
|
||||
},
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {
|
||||
diyGlobalData: null
|
||||
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>
|
||||
// 辅助空白
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-horz-blank',
|
||||
props: {
|
||||
@@ -12,7 +11,6 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
@@ -1,11 +1,9 @@
|
||||
<template>
|
||||
<view data-component-name="diy-horz-line" :style="{ borderTop: '2rpx ' + value.borderStyle + ' ' + value.color }">
|
||||
</view>
|
||||
<view data-component-name="diy-horz-line" :style="{ borderTop: '2rpx ' + value.borderStyle + ' ' + value.color }"></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 辅助线
|
||||
import DiyMinx from './minx.js'
|
||||
export default {
|
||||
name: 'diy-horz-line',
|
||||
props: {
|
||||
@@ -13,7 +11,6 @@ export default {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
mixins: [DiyMinx],
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user