Skip to content

M
mayi-mp-shop
Commit 23d89942 by 刘奕
Options

首页优化

parent 166393ed
Showing with 598 additions and 63 deletions
project.config.json
......@@ -28,19 +28,19 @@
"outputPath": ""
},
"enableEngineNative": false,
"useIsolateContext": true,
"useIsolateContext": false,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"minifyWXML": true,
"showES6CompileOption": false,
"useCompilerPlugins": false,
"minifyWXML": true
"useCompilerPlugins": false
},
"miniprogramRoot": "dist/wx/",
"compileType": "miniprogram",
"appid": "wx937625b28b7f85fd",
"appid": "wx3722f444d90b60d8",
"projectname": "mayi-mp-shop",
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
......
project.private.config.json
......@@ -86,6 +86,12 @@
"pathName": "pages/contact/main",
"query": "",
"scene": null
},
{
"name": "",
"pathName": "pages/pages_subpack/article/main",
"query": "article_id=395",
"scene": null
}
]
}
......
src/App.vue
......@@ -11,7 +11,7 @@ export default {
let extConfig = wx.getExtConfigSync ? wx.getExtConfigSync() : {};
console.log(extConfig, "-----------extConfig");
if (JSON.stringify(extConfig) == "{}") {
extConfig = process.env.NODE_ENV == "development" ? { mixid: "antgood", shopid: 67}:{ "mixid":"CL", "shopid":1166 };
extConfig = process.env.NODE_ENV == "development" ? { mixid: "antgood", shopid: 67}:{ "mixid":"zantest", "shopid":1166 };
}
......@@ -48,6 +48,9 @@ export default {
// 页面配置信息
this.getThemePage(extConfig);
// 商城配置
this.shopConfiguration()
setTimeout(() => {
let mpApp = getApp();
......@@ -225,6 +228,16 @@ export default {
}
});
},
//商城配置
shopConfiguration(){
shop.get_shop_configuration().then(res=>{
if (res.data.code == 200) {
let mpApp = getApp();
mpApp.shop_configuration = res.data.data
console.log(mpApp.shop_configuration,'mpApp.shop_configuration');
}
})
},
async getThemePage({ mixid, shopid }) {
await shop
.themePagesInfo({
......
src/api/shop.js
......@@ -37,5 +37,12 @@ export default {
return requestPOST(
`${process.env.OLSHOP_URL}/user/draw_membership_card?cardId=${params}`
);
},
//获取shop配置
get_shop_configuration(){
return requestPOST(
`${process.env.OLSHOP_URL}/shop/get_shop_configuration`
);
}
};
src/app.json
......@@ -14,7 +14,8 @@
"pages/tabBar4/main",
"pages/changeAdr/main",
"pages/downFile/main",
"pages/wxArticle/main"
"pages/wxArticle/main",
"pages/pages_subpack/article/main"
],
"usingComponents": {},
"window": {
......
src/components/basicTool/transverse-label/index.vue
......@@ -68,7 +68,7 @@
<banner :datas="item1"></banner>
</div>
<div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
<goods-list class="goodsListItem" :datas="item1"></goods-list>
<goods-list v-if="active == index" :class="['goodsListItem','goodsListItemIndex'+index]" :datas="item1" :datasIndex="active" :goodsListIndex="index"></goods-list>
</div>
<div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
<area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
......@@ -421,6 +421,7 @@ export default {
})
}
this.active=res.target.index;
wx.setStorageSync('datasIndex', res.target.index);
},
timeOutInitTabs(notGetAllTabWidth) {
setTimeout(() => {
......
src/main.js
......@@ -11,6 +11,8 @@ import cartApi from './api/cart'
import classificationApi from "./api/classification";
import spokesmanApi from './api/spokesman'
import { DFSImg, concatUrl } from "@/utils/index";
//一些js工具类
import tool from "@/utils/tool";
var log = require('./utils/log')
import fenxiaoModel from "@/utils/fenxiaoModel";
import {
......@@ -135,6 +137,7 @@ mpApp.getThemePage = getThemePage
mpApp.themeColor = {}
mpApp.log = log
mpApp.tool = tool
function getThemePage({mixid,shopid}) {
shop
......
src/pages/home/index.vue
......@@ -13,7 +13,7 @@
<banner :datas="item"></banner>
</div>
<div v-else-if="item.componentCode=='goods-list' && item.componentInfo.visible == 1" style="height:100%;">
<goods-list :class="'goodsListItem' + index" :datas="item"></goods-list>
<goods-list :class="['goodsListItem' + index,'goodsListItemIndex0']" :datas="item" :single="true"></goods-list>
</div>
<div v-else-if="item.componentCode == 'area-navigation' && item.componentInfo.visible == 1">
<area-navigation :datas="item" :changeLocation="changeLocation"></area-navigation>
......@@ -158,7 +158,7 @@ import indexApi from "@/api/index.js";
import { throttle, concatUrl } from "../../utils/index.js"
import mpvueCropper from '@/components/mpvue-cropper'
const app = getApp();
const { log } = app;
const { log,tool } = app;
export default {
data() {
return {
......@@ -387,6 +387,19 @@ export default {
// 新人有礼弹窗
this.newUserFun();
}
//清除懒加载缓存
wx.removeStorage({
key: 'storageGoodsList'
})
wx.removeStorage({
key: 'storageDatasList'
})
wx.removeStorage({
key: 'datasIndex'
})
console.log('storageGoodsList---detory');
},
onShow() {
// 设置显示条件
......@@ -408,10 +421,14 @@ export default {
this.active=checkTabbarPage('/')
}
this.$mp.page.onPageScroll= (el)=>{
throttle(this.scrolls(el),100)
};
// this.$mp.page.onPageScroll= (el)=>{
// throttle(this.scrolls(el),100)
// };
},
onPageScroll: tool.throttle(function (el) {
// console.log(el);
this.scrolls(el)
},1000),
methods: {
async setVisible(pageList, cb) {
// 首页显示条件
......@@ -534,6 +551,7 @@ export default {
this.active=checkTabbarPage('/');
this.setVisible(this.mpApp.globalData.pageList,(res)=>{
this.pageInfo = res;
console.log(this.pageInfo,'this.pageInfo');
this.pageData = JSON.parse(this.pageInfo.pageData);
});
log.info("36----------------------559", this.pageData,this.pageInfo.pageSettingData);
......@@ -593,7 +611,7 @@ export default {
getSpokesmanInit(extConfig) {
//绑定上下级关系
app.fenxiaoModel.becomeRelation(extConfig).then(res=>{
if(res) {
if(res.data.code == '200') {
wx.removeStorage({
key: "becomeInfo"
});
......
src/pages/pages_subpack/article/main.json
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "文章详情",
"navigationBarTitleText": "",
"navigationBarTextStyle": "black",
"usingComponents": {
......
src/pages/tabBar1/index.vue
......@@ -4,9 +4,147 @@
<script>
import tabbarPage from "../../components/tabbarPage.vue";
import { concatUrl } from "../../utils/index.js"
const app = getApp();
const { log } = app;
export default {
components: {
tabbarPage,
},
data() {
return {
pageInfo: {},
pageData: {},
}
},
onLoad(options) {
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
wx.showModal({
title: '',
content: JSON.stringify(options),
showCancel: true,
cancelText: '取消',
cancelColor: '#000000',
confirmText: '确定',
confirmColor: '#3CC51F',
success: (result) => {
if(result.confirm){
}
},
fail: ()=>{},
complete: ()=>{}
});
console.log(this.mpApp.globalData.pageList, 'llll');
this.init()
if (options.userId || options.spokesmanRelId) {
wx.setStorage({
key: "becomeInfo",
data: JSON.stringify(options)
});
}
if (wx.getStorageSync("sessionid")) {
//获取分销信息
this.getSpokesmanInit(wx.getStorageSync("becomeInfo") ? JSON.parse(wx.getStorageSync("becomeInfo")) : '')
}
},
async onShareAppMessage(res) {
log.info(res)
let newHref = '/pages/tabBar1/main';
let title = app.globalData.shopInfo.shopName;
let hasInvitationStatus = 0;
if (wx.getStorageSync("sessionid")) {
await app.fenxiaoModel.getSpokesmanidByShare().then(data => {
hasInvitationStatus = data.hasInvitationStatus;
})
await app.fenxiaoModel.getSpokesmanInfo().then(data => {
let newData = {}
if (data != null) {
if (hasInvitationStatus == 1) {
newData = {
spokesmanGroupId: data.groupId,
spokesmanShopId: data.shopId,
spokesmanRelId: data.id,
userId: data.userId
}
} else {
newData = {
userId: data.userId
}
}
}
newHref = concatUrl(newHref, newData)
})
}
let imageUrl = '';
//多主题自定义分享标题和图片
if (this.pageInfo.pageSettingData && JSON.parse(this.pageInfo.pageSettingData).shareTitle) {
title = JSON.parse(this.pageInfo.pageSettingData).shareTitle
}
console.log(JSON.parse(this.pageInfo.pageSettingData));
if (this.pageInfo.pageSettingData && JSON.parse(this.pageInfo.pageSettingData).shareImg) {
imageUrl = JSON.parse(this.pageInfo.pageSettingData).shareImg
}
console.log(newHref, 3333555666, title,imageUrl, res);
log.info(newHref, 3333555666, title, res)
return {
title: title, // 默认是小程序的名称
path: newHref, // 默认是当前页面
imageUrl: imageUrl,
success: function (res) {
// 转发成功之后的回调
if (res.errMsg == "shareAppMessage:ok") {
log.info(res, "分享成功");
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == "shareAppMessage:fail cancel") {
// 用户取消转发
log.info(res, "分享失败");
} else if (res.errMsg == "shareAppMessage:fail") {
// 转发失败，其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调（转发成不成功都会执行）
}
};
},
onShareTimeline(res) {
log.info(res, '-----onShareTimeline')
},
methods: {
init() {
this.setVisible(this.mpApp.globalData.pageList, (res) => {
this.pageInfo = res;
this.pageData = JSON.parse(this.pageInfo.pageData);
});
},
async setVisible(pageList, cb) {
// 首页显示条件
let pageInfo = pageList.filter((item) => item.pageCode == 1)[0];
cb(pageInfo)
},
getSpokesmanInit(extConfig) {
//绑定上下级关系
app.fenxiaoModel.becomeRelation(extConfig).then(res => {
if (res.data.code == 200) {
wx.removeStorage({
key: "becomeInfo"
});
}
})
},
}
};
</script>
src/utils/index.js
......@@ -14,6 +14,7 @@ export function debounce(fn, wait) {
// 节流
export function throttle(func, delay) {
console.log('节流流~~');
var prev = Date.now();
return function () {
var context = this;
......
static/nativeComponents/GoodsList/GoodsItem/index.wxml
<!-- 商品列表item -->
<view wx:if="{{items && datas.componentData['style'] == 'list' && items.loadState == false}}">
<view class="skeleton-animate">
<view class="skeleton-bg skeleton-img"></view>
<view class="skeleton-bg skeleton-title"></view>
<view class="skeleton-bg skeleton-detail"></view>
<view class="skeleton-bg skeleton-price"></view>
</view>
</view>
<view
class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}"
style="--proGap2:{{datas.componentData.proGap*2}}rpx;"
bindtap="onclickProduct"
wx:else
>
<view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius*2}}rpx;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};">
<!-- 商户入口-顶部 -->
......@@ -56,6 +66,7 @@
<image mode="widthFix" src="{{datas.componentData['angleSignImg']}}" />
</view>
<!-- 商品主图 -->
<!-- {{items.loadState}}--{{items.loadProductImgUrl}}--{{items.productImgUrl}} -->
<image
lazy-load
mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}"
......
static/nativeComponents/GoodsList/GoodsItem/index.wxss
@import "/static/font/common_icon.wxss";
/* 商品列表骨架屏 */
@import "/static/css/skeleton.wxss";
.flex{
display: flex;
}
......
static/nativeComponents/GoodsList/index.js
const app = getApp();
const { goodsApi, DFSImg, $themeToLink } = app;
const { goodsApi, DFSImg, $themeToLink,tool } = app;
const componentOptions = {
// 组件选项
options: {
......@@ -9,7 +9,20 @@ const componentOptions = {
properties: {
datas: {
type: Object
}
},
datasIndex:{
type: Number,
value:0,
observer: function () {
// console.log('aaa');
// this.init()
}
},
goodsListIndex:{
type:Number,
value:0,
},
},
// 组件数据
data: {
......@@ -21,12 +34,20 @@ const componentOptions = {
loading: false,
finished: false,
goodsList:[],
rectsLength:0,
storageGoodsList:[],
storageDatasList:[],
pageSize:10,
pageNum:1,
pageGoodsList:[],
loadingFlag:true
},
// 数据监听器
observers: {},
// 组件生命周期
lifetimes: {
created() {},
created() {
},
ready() {
this.init();
},
......@@ -62,6 +83,10 @@ const componentOptions = {
// 组件方法
methods: {
init() {
// console.log(this.data.datasIndex,this.data.goodsListIndex,'init');
// if (this.data.datasIndex != this.data.goodsListIndex ) {
// return
// }
let {
goodsType,
goodsSource,
......@@ -170,7 +195,7 @@ const componentOptions = {
page: 1,
rows: terminalProductIds.length,
terminalProductIds: terminalProductIds,
whetherShowSoldOutGoods: this.whetherShowSoldOutGoods
whetherShowSoldOutGoods: app.shop_configuration.whetherShowSoldOutGoods
}; // 当前页 // 一页多少条
this.briefProduct(briefQuery);
}
......@@ -223,6 +248,8 @@ const componentOptions = {
item.shopLogoUrl = DFSImg(item.shopLogoUrl);
item.coverImage = DFSImg(item.coverImage, 400, 400, 1);
item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
item.loadState = false
item.loadProductImgUrl = ""
item.minPrice = Number(item.minPrice).toFixed(2);
item.qty = Number(item.qty);
item.saleQty = item.saleQty ? Number(item.saleQty) : 1;
......@@ -243,10 +270,54 @@ const componentOptions = {
item.getSaleTime = this.getSaleTime(item.saleTime);
}
});
var that = this
this.setData({
"datas.componentData.goodsList": goodsList,
goodsList
});
},function () {
var num = 0
wx.createSelectorQuery().selectAll("._goods-list").boundingClientRect(function(rects){
console.log(rects,'rects');
rects.forEach((e,v)=>{
num ++
})
let storageGoodsList = wx.getStorageSync('storageGoodsList') || []
let storageDatasList = wx.getStorageSync('storageDatasList') || []
storageGoodsList.push(goodsList)
storageDatasList.push(that.data.datas.componentData)
wx.setStorageSync('storageGoodsList', storageGoodsList);
wx.setStorageSync('storageDatasList', storageDatasList);
console.log(storageGoodsList.length,num,'storageGoodsList.length');
let pageGoodsList = []
pageGoodsList[that.data.datasIndex] = storageGoodsList[that.data.datasIndex].slice(0,10)
wx.setStorageSync('pageGoodsList', pageGoodsList);
that.setData({
pageGoodsList
},function () {
that.lazyloading();
})
// if (storageGoodsList.length == num) {
// that.setData({
// storageGoodsList
// })
// console.log(that.data.storageGoodsList,'storageGoodsList');
// }
}).exec();
// 节点布局方案在组件嵌套层级过深测试无效
// let goodsList = this.data.goodsList // 获取原数据
// goodsList.forEach((item,index)=>{
// wx.createIntersectionObserver().relativeToViewport({bottom: 20}).observe(`.goodsItemIndex${index}`, (ret) => {
// // if (ret.intersectionRatio > 0){
// // group[i].show = true
// // }
// // this.setData({ // 更新数据
// // group
// // })
// console.log('1111');
// })
// })
})
if (type == 1) {
// 初始化
if (this.selectComponent("#waterfallFlow")) {
......@@ -259,6 +330,96 @@ const componentOptions = {
}
}
},
// 触发图片加载
lazyloading(){
var that = this
let storageDatasList = wx.getStorageSync('storageDatasList') || []
console.log('storageDatasList',storageDatasList);
let { style } = storageDatasList[that.data.datasIndex];
let type = ''
if(style == 'list'){
type = 'goods-item'
}else{
return
}
// console.log(that.data.datasIndex,that.data.goodsListIndex,'index');
// if (that.data.datasIndex != that.data.goodsListIndex) {
// return
// }
let windowHeight = wx.getSystemInfoSync().windowHeight
// let goodsList = that.data.goodsList
let pageGoodsList = wx.getStorageSync('pageGoodsList') || []
let loadingFlag = false
if (!that.data.loadingFlag) {
return
}
wx.createSelectorQuery().selectAll(`.goodsListItemIndex${that.data.datasIndex}>>>.${type}`).boundingClientRect(function(rects){
for (let index = 0; index < rects.length; index++) {
if (rects[index].top == 0 && rects[index].bottom == 0 && rects[index].left == 0 && rects[index].right == 0) {
break
}
if (rects[index].top < windowHeight) {
pageGoodsList[that.data.datasIndex][index].loadState = true
// if (index == storageGoodsList[that.data.datasIndex].length && storageGoodsList[that.data.datasIndex][index].loadState == true) {
// loadingFlag = true
// }
// goodsList[index].loadState = true
}
}
// rects.forEach((item,index)=>{
// if (condition) {
// }
// if (item.top < windowHeight) {
// goodsList[index].loadState = true
// }
// })
that.setData({
// goodsList
pageGoodsList
})
console.log(rects,that.data.pageGoodsList, pageGoodsList[that.data.datasIndex],'fff');
wx.setStorageSync('pageGoodsList',pageGoodsList)
let storageGoodsList = wx.getStorageSync('storageGoodsList')[that.data.datasIndex]
if (storageGoodsList.length == that.data.pageGoodsList.length) {
return
}
if (that.data.pageGoodsList[that.data.datasIndex][that.data.pageGoodsList[that.data.datasIndex].length -1].loadState == true) {
let pageNum = that.data.pageNum
pageNum += 1
that.setData({
pageNum
})
let newPageGoodsList = that.data.pageGoodsList
console.log(pageGoodsList,newPageGoodsList,'newPageGoodsList');
let sliceStorageGoodsList = storageGoodsList.slice((that.data.pageNum - 1) * that.data.pageSize,that.data.pageNum * that.data.pageSize)
newPageGoodsList[that.data.datasIndex].push(...sliceStorageGoodsList)
console.log(sliceStorageGoodsList,newPageGoodsList,'newPageGoodsList2');
that.setData({
loadingFlag:false
})
that.setData({
pageGoodsList:newPageGoodsList
},function(){
wx.setStorageSync('pageGoodsList',pageGoodsList)
that.setData({
loadingFlag:true
})
console.log(that.data.pageGoodsList,pageGoodsList,'pageGoodsList');
})
console.log('load--ok');
}
}).exec();
// let keyStr = `datas.componentData.goodsList[${index}].loadState`;
// this.setData({
// [keyStr]:true
// })
},
getSaleTime(val) {
return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
},
......@@ -328,6 +489,8 @@ const componentOptions = {
getScroll(el) {
// 是指定分类且不显示查看更多的瀑布流组件滚动加载
let { goodsSource, moreShow, style } = this.data.datas.componentData;
console.log('goodsSource, moreShow, style',goodsSource, moreShow, style);
this.lazyloading()
if (
goodsSource == "classify" &&
moreShow == false &&
......
static/nativeComponents/GoodsList/index.wxml
......@@ -25,15 +25,20 @@
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<view
wx:for="{{goodsList}}"
wx:for="{{pageGoodsList[datasIndex]}}"
wx:key="index"
class="goods-item"
class="goods-item {{'goodsItemIndex'+index}}"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
<!-- <goods-item
datas="{{datas}}"
items="{{goodsList[index]}}"
indexs="{{index}}"
></goods-item> -->
<goods-item
items="{{pageGoodsList[datasIndex][index]}}"
datas="{{datas}}"
indexs="{{index}}"
></goods-item>
</view>
</view>
......@@ -60,6 +65,17 @@
</view>
<!-- 瀑布流 -->
<view wx:if="{{datas.componentData.style==='waterfall'}}">
<!-- <waterfall-flow
generic:defaultCom="goods-item"
id="waterfallFlow"
note="{{datas.componentData.goodsList}}"
datas="{{datas}}"
padding="{{datas.componentData.proGap}}"
wx:if="{{datas.componentData.goodsList}}"
bindonLoad="onLoad"
loading="{{loading}}"
finished="{{finished}}"
></waterfall-flow> -->
<waterfall-flow
generic:defaultCom="goods-item"
id="waterfallFlow"
......
static/nativeComponents/GoodsSearch/index.wxss
......@@ -14,7 +14,7 @@
color: #bbb;
}
.goods-search .ipt{
width: 96%;
width: 90%;
margin: 0 auto;
height: 60rpx;
align-items: center;
......
static/vant/tabs/index.js
......@@ -154,7 +154,15 @@ VantComponent({
});
},
onTap(event) {
const { index } = event.currentTarget.dataset;
let index
if (Object.prototype.toString.call(event) == '[object Object]') {
// const { index } = event.currentTarget.dataset;
index = event.currentTarget.dataset.index;
}else{
index = event
}
console.log('index',index);
console.log(this.children);
const child = this.children[index];
if (child.data.disabled) {
this.trigger("disabled", child);
......@@ -213,7 +221,7 @@ VantComponent({
}
},
resize(skipTransition = false) {
console.log("resize")
console.log("resize11")
if (this.data.type !== "line") {
return;
}
......
static/vant/tabs/index.wxs
......@@ -59,9 +59,9 @@ function trackStyle(data) {
function lineStyle(data) {
return style({
width: utils.addUnit(data.lineWidth - 16),
width: utils.addUnit(data.lineWidth - 32),
transform: 'translateX(' + (data.lineOffsetLeft +16) + 'px)',
'-webkit-transform': 'translateX(' + (data.lineOffsetLeft + 8) + 'px)',
'-webkit-transform': 'translateX(' + (data.lineOffsetLeft + 16) + 'px)',
'background-color': data.color,
height: data.lineHeight !== -1 ? utils.addUnit(data.lineHeight) : null,
'border-radius':
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment