446 lines
9.8 KiB
Vue
446 lines
9.8 KiB
Vue
<template>
|
||
<view class="page" v-if="loadPageFlag" :style="{background:(BgConfig.BackgroundObj.type==1?BgConfig.BackgroundObj.bgColor:('url('+BgConfig.BackgroundObj.path+') no-repeat '+ BgConfig.BackgroundObj.pathColor))}">
|
||
<status-bar :backgroundColor="BgConfig.BackgroundObj.bgColor" v-if="false"></status-bar>
|
||
|
||
<diy :BgConfig="BgConfig" :PageContent="PageContent" :pageId="pageId" :PageNav="PageNav" :loadPageFlag="loadPageFlag" :StoreInfo="StoreInfo"></diy>
|
||
|
||
<!-- #ifdef APP-PLUS -->
|
||
<share-box-app :shareDataDefault="shareData" ref="shareBoxApp"></share-box-app>
|
||
<!-- #endif -->
|
||
|
||
|
||
<view
|
||
class="diy_goods_carts"
|
||
@click="gopage(`/pages/index/cart?category_id=${shopInfo.category_id}&store_id=${shopInfo.store_id}`)"
|
||
>
|
||
<view class="box">
|
||
<image class="icon" src="https://media-mall-prod-1259811287.cos.ap-guangzhou.myqcloud.com/static/icon/icon_shop.png" />
|
||
<text class="icon_badge">{{ goodsNum }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import statusBar from '../../components/status-bar.vue';
|
||
|
||
// #ifdef APP-PLUS
|
||
import shareBoxApp from '../../components/share-box-app.vue'
|
||
// #endif
|
||
|
||
import diy from '../../components/themes/diy.vue'
|
||
import wxParse from '@/components/u-parse/u-parse.vue'
|
||
import diyCountdown from '../../components/themes/diy-countdown'
|
||
import { mapState, mapMutations } from 'vuex';
|
||
|
||
export default {
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: function() {
|
||
return {
|
||
goodsNum: 0,
|
||
options: {},
|
||
PageData: {},
|
||
PageContent: [],
|
||
BgConfig: {BackgroundObj:{type:1, bgColor:'#ffffff' ,"pathColor":"#f8f8f8","path":""}},
|
||
PageNav:{window:{"navigationBarBackgroundColor":"#ffffff","navigationBarTextStyle":"black","navigationBarTitleText":"","backgroundColor":"#f8f8f8","backgroundTextStyle":"dark"}},
|
||
loadPageFlag: false,
|
||
shareImg: '',
|
||
shareTitle: '',
|
||
indexArray: [],
|
||
page_id: 0,
|
||
pageId: '',
|
||
PageNav: {},
|
||
StoreInfo: {},
|
||
formdate: '',
|
||
refresh: true,
|
||
w: 0, //windowWidth
|
||
chatUrl : '',
|
||
|
||
shareData:{}
|
||
};
|
||
},
|
||
|
||
components: {
|
||
statusBar,
|
||
diy,
|
||
wxParse,
|
||
diyCountdown,
|
||
// #ifdef APP-PLUS
|
||
shareBoxApp
|
||
// #endif
|
||
},
|
||
computed: mapState([
|
||
'Config',
|
||
'StateCode',
|
||
'notice',
|
||
'plantformInfo',
|
||
'shopInfo',
|
||
'userInfo',
|
||
'hasLogin',
|
||
"cartNum",
|
||
]),
|
||
watch: {
|
||
cartNum: {
|
||
handler(newVal) {
|
||
this.goodsNum = newVal;
|
||
},
|
||
immediate: true,
|
||
},
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function(options) {
|
||
uni.setNavigationBarTitle({
|
||
title:this.__('专题页面')
|
||
});
|
||
|
||
var that = this;
|
||
|
||
var w = that.$.getSystemInfoSync().windowWidth;
|
||
|
||
that.setData({
|
||
w: w,
|
||
options: options
|
||
});
|
||
|
||
this.getUserInfo(
|
||
function(user) {
|
||
that.setData({
|
||
page_id: options.id
|
||
});
|
||
|
||
that.getPageInfo(false);
|
||
}
|
||
);
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面初次渲染完成
|
||
*/
|
||
onReady: function() {
|
||
//
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function() {
|
||
this.refresh ||
|
||
this.setData({
|
||
refresh: true
|
||
});
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面隐藏
|
||
*/
|
||
onHide: function() {},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面卸载
|
||
*/
|
||
onUnload: function() {
|
||
// 离开页面，注销事件
|
||
var that = this;
|
||
this.notice.removeNotification('RefreshProduct', that);
|
||
|
||
// #ifdef APP-PLUS
|
||
if (this.$refs.shareBoxApp.showBoxView) {
|
||
this.$refs.shareBoxApp.cancel();
|
||
}
|
||
// #endif
|
||
},
|
||
|
||
onBackPress() {
|
||
// #ifdef APP-PLUS
|
||
if (this.$refs.shareBoxApp.showBoxView) {
|
||
this.$refs.shareBoxApp.cancel();
|
||
return true;
|
||
}
|
||
// #endif
|
||
},
|
||
onNavigationBarButtonTap(e) {
|
||
var that = this;
|
||
|
||
if (e.index === 0) {
|
||
that.onShareBox(e);
|
||
} else {
|
||
uni.showToast({
|
||
title: "你点了收藏按钮",
|
||
icon: "none"
|
||
})
|
||
}
|
||
},
|
||
/**
|
||
* 页面相关事件处理函数--监听用户下拉动作
|
||
*/
|
||
onPullDownRefresh: function() {
|
||
this.setData({
|
||
indexArray: []
|
||
});
|
||
this.getPageInfo(true);
|
||
},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom: function() {},
|
||
|
||
/**
|
||
* 用户点击右上角分享
|
||
*/
|
||
onShareAppMessage: function() {
|
||
// #ifdef MP-WEIXIN
|
||
wx.showShareMenu({
|
||
withShareTicket: true,
|
||
menus: ['shareAppMessage', 'shareTimeline']
|
||
});
|
||
// #endif
|
||
|
||
return {
|
||
title: this.shareTitle,
|
||
imageUrl: this.shareImg,
|
||
path: '/pagesub/diy-page/diy-page?id=' + this.page_id + '&uid=' + this.userInfo.user_id
|
||
};
|
||
},
|
||
|
||
/**
|
||
* 用户点击右上角分享朋友圈
|
||
*/
|
||
onShareTimeline: function () {
|
||
return {
|
||
title: this.shareTitle,
|
||
query: {
|
||
uid: this.userInfo.user_id,
|
||
id: this.page_id
|
||
},
|
||
imageUrl: this.shareImg,
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 页面滚动触发事件的处理函数
|
||
*/
|
||
onPageScroll: function() {},
|
||
|
||
methods: {
|
||
...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),
|
||
|
||
gopage(url){
|
||
this.$.navigateTo({
|
||
url
|
||
});
|
||
},
|
||
|
||
getPageInfo: function(force_refresh) {
|
||
var that = this,
|
||
params = {
|
||
page_id: that.page_id
|
||
};
|
||
|
||
that.$.request({
|
||
url: this.Config.URL.minipage,
|
||
data: params,
|
||
ajaxCache: {
|
||
timeout: this.Config.CACHE_EXPIRE,
|
||
forceRefresh: force_refresh
|
||
},
|
||
success: function(data, status, msg, code) {
|
||
that.$.stopPullDownRefresh();
|
||
|
||
if (200 == status)
|
||
{
|
||
|
||
that.setData({
|
||
loadPageFlag: true,
|
||
pageId: data.page_id + '',
|
||
PageContent: that.$.parseJSON(data.page_code),
|
||
BgConfig: that.$.parseJSON(data.page_config),
|
||
PageNav: that.$.parseJSON(data.page_nav),
|
||
shareImg: data.page_share_image,
|
||
shareTitle: data.page_share_title || data.page_name
|
||
});
|
||
|
||
if (that.PageNav.window.navigationBarTextStyle == 'black')
|
||
{
|
||
that.PageNav.window.navigationBarTextStyle = '#000000'
|
||
}
|
||
|
||
if (that.PageNav.window.navigationBarTextStyle == 'white')
|
||
{
|
||
that.PageNav.window.navigationBarTextStyle = '#ffffff'
|
||
}
|
||
|
||
that.$.setNavigationBarColor({
|
||
frontColor: that.PageNav.window.navigationBarTextStyle,
|
||
backgroundColor: that.PageNav.window.navigationBarBackgroundColor
|
||
})
|
||
|
||
that.$.setNavigationBarTitle({
|
||
title: data.page_name
|
||
});
|
||
for (var n in that.PageContent) {
|
||
//that.PageContent[n].eltmType == 2 && WxParse.wxParse("word" + n, "html", that.PageContent[n].eltm2.words, that)
|
||
}
|
||
|
||
if (that.hasLogin && data.im_enable)
|
||
{
|
||
|
||
var perm_id = that.$.getStorageSync('uid');
|
||
var perm_key = that.$.getStorageSync('ukey');
|
||
|
||
let chat_url = that.$.sprintf("/im/chat/chat?uid=%s", that.StoreInfo.im_user_id);
|
||
|
||
that.setData({
|
||
StoreInfo: {
|
||
im_enable:data.im_enable,
|
||
im_user_id:data.im_user_id,
|
||
puid:data.puid
|
||
},
|
||
});
|
||
|
||
}
|
||
|
||
|
||
|
||
//初始化微信分享
|
||
let $title = that.shareTitle;
|
||
let $desc = that.shareTitle || that.plantformInfo.site_meta_description;
|
||
let $link = '';
|
||
let $img_url = that.shareImg || that.plantformInfo.logo;
|
||
|
||
//初始化微信分享
|
||
that.$.wxShare($title, $desc, $link, $img_url)
|
||
}
|
||
}
|
||
});
|
||
},
|
||
onShareBox: function(e) {
|
||
let that = this;
|
||
var $href = that.$.sprintf('%s/tmpl/product_detail.html?item_id=%d&FX=%d', this.Config.WapSiteUrl, this.skuid, this.userInfo.user_id);
|
||
|
||
$href = that.$.sprintf('%s/h5/pagesub/diy-page/diy-page?id=%d&uid=%d', that.Config.SiteUrl, this.page_id, this.userInfo.user_id);
|
||
// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
|
||
// #ifdef APP-PLUS
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
$href = '/pagesub/diy-page/diy-page?id=' + this.page_id + '&uid=' + this.userInfo.user_id
|
||
// #endif
|
||
|
||
|
||
this.setData({
|
||
shareData: {
|
||
shareTitle: this.shareTitle,
|
||
shareText: this.shareTitle,
|
||
href: $href,
|
||
image: this.shareImg
|
||
}
|
||
});
|
||
|
||
// 如允许点击超链接跳转，则应该打开一个新页面，并传入href，由新页面内嵌webview组件负责显示该链接内容
|
||
// #ifdef APP-PLUS
|
||
this.$refs.shareBoxApp.show();
|
||
// #endif
|
||
|
||
//海报
|
||
if (e == 3)
|
||
{
|
||
// #ifndef APP-PLUS
|
||
this.$refs.shareBoxMp.show();
|
||
// #endif
|
||
}
|
||
else
|
||
{
|
||
// #ifdef H5
|
||
if (that.$.ifUniApp())
|
||
{
|
||
this.$refs.shareBoxH5.show();
|
||
}
|
||
else
|
||
{
|
||
this.$refs.shareBoxMp.show();
|
||
}
|
||
// #endif
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
@import '../../styles/_variables.scss';
|
||
|
||
@import '../../styles/layout.scss';
|
||
|
||
.page {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
min-height: 100%;
|
||
/* background-size: cover !important; */
|
||
background-position: top center !important;
|
||
}
|
||
|
||
.diy_goods_carts {
|
||
position: fixed;
|
||
right: 24rpx;
|
||
bottom: 400rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
color: #666;
|
||
text-align: center;
|
||
background: #fff;
|
||
border-radius: 100%;
|
||
padding: 12rpx;
|
||
box-shadow: 2rpx 4rpx 20rpx rgba(0,0,0,0.3);
|
||
|
||
.icon {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
display: block;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 24rpx;
|
||
line-height: 14rpx;
|
||
}
|
||
|
||
.icon_badge {
|
||
display: block;
|
||
position: absolute;
|
||
right: -5px;
|
||
top: -5px;
|
||
text-align: center;
|
||
line-height: 24rpx;
|
||
font-size: 24rpx;
|
||
padding: 4rpx 10rpx;
|
||
border-radius: 20rpx;
|
||
color: #fff;
|
||
background: #dd524d;
|
||
}
|
||
|
||
.box {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
}
|
||
|
||
&.current {
|
||
color: #dd524d;
|
||
font-weight: 900;
|
||
}
|
||
}
|
||
</style>
|