Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改轮播图卡顿的问题

zyh
Gaoxs 4 years ago
parent
c47c8d3a4f
commit
4b56792e63
9 changed files with 229 additions and 188 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      config/index.js
  2. 14
      libs/wechat.js
  3. 24
      main.js
  4. 42
      pages/Loading/index.vue
  5. 47
      pages/home/components/Banner.vue
  6. 3
      pages/home/index.vue
  7. 49
      utils/index.js
  8. 1
      utils/store/cookie.js
  9. 32
      剩余问题.js

5
config/index.js
Unescape View File

@ -1,7 +1,8 @@
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api';
// export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
export const VUE_APP_API_URL = 'https://wxapi.yixiang.co/api';
// export const VUE_APP_API_URL = 'http://192.168.31.223:8008/api';
export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
// export const VUE_APP_API_URL = 'https://h5api.xinxintuan.co/api';
export const VUE_APP_RESOURCES_URL = 'https://wx.yixiang.co/static';

14
libs/wechat.js
Unescape View File

@ -147,7 +147,8 @@ export function auth(code) {
console.log('获取微信授权')
return new Promise((resolve, reject) => {
let loginType = cookie.get(LOGINTYPE);
wechatAuth(code, parseInt(cookie.get("spread")), loginType)
let spread = cookie.get(spread);
wechatAuth(code, spread, loginType)
.then(({ data }) => {
console.log(data)
const expires_time = dayjs(data.expires_time);
@ -171,8 +172,15 @@ export function toAuth() {
}
function getAuthUrl(appId) {
const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`);
// const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`encodeURIComponent(encodeURIComponent(cookie.has(BACK_URL)? cookie.get(BACK_URL): location.pathname + location.search)));
// const redirect_uri = encodeURIComponent(window.location.href);
// const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index`);
// #ifdef H5
// #endif
const redirect_uri = encodeURIComponent(`${location.origin}/pages/Loading/index?path=${encodeURIComponent(window.location.href)}`);
// const redirect_uri = encodeURIComponent(`${window.location.origin}${window.location.pathname}`)
// const redirect_uri = encodeURIComponent(`${location.origin}`)
cookie.remove(BACK_URL);

24
main.js
Unescape View File

@ -23,7 +23,8 @@ import cookie from "@/utils/store/cookie";
import {
parseRoute,
_router
_router,
parseQuery
} from "@/utils";
import {
VUE_APP_RESOURCES_URL,
@ -102,6 +103,27 @@ import {
import { isWeixin } from '@/utils'
const CACHE_KEY = "clear_0.0.1";
if (!cookie.has(CACHE_KEY)) {
cookie.clearAll();
cookie.set(CACHE_KEY, 1);
}
var urlSpread = parseQuery()["spread"];
if (urlSpread !== undefined) {
var spread = cookie.get("spread");
urlSpread = parseInt(urlSpread);
if (!Number.isNaN(urlSpread) && spread !== urlSpread) {
cookie.set("spread", urlSpread || 0);
} else if (spread === 0 || typeof spread !== "number") {
cookie.set("spread", urlSpread || 0);
}
}
// 判断是否是微信浏览器
if (isWeixin()) {
Vue.prototype.$deviceType = 'weixin'

42
pages/Loading/index.vue
Unescape View File

@ -1,24 +1,30 @@
<template>
<view class="lottie-bg">
<view id="lottie">
<image
src="../../static/images/live-logo.gif"
rel="preload"
mode="widthFix"
style="width: 100%;"
/>
<image src="../../static/images/live-logo.gif" rel="preload" mode="widthFix" style="width: 100%;" />
</view>
</view>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import {
mapState,
mapMutations,
mapActions
} from "vuex";
// 组件
// import request from "@//api/request";
import { wxappAuth, getUser } from "@/api/user";
import {
wxappAuth,
getUser
} from "@/api/user";
import dayjs from "dayjs";
import cookie from "@/utils/store/cookie";
import { parseQuery, login, handleQrCode } from "@/utils";
import {
parseQuery,
login,
handleQrCode
} from "@/utils";
export default {
name: "Loading",
@ -42,10 +48,26 @@ export default {
this.toLaunch();
return;
}
cookie.get("spread");
// cookie.get("spread");
// if (this.$deviceType == "weixin") {
// let path = parseQuery().path
// console.log(this)
// if (path) {
// this.$yrouter.push({
// path
// });
// } else {
// this.$yrouter.switchTab({
// path: "/pages/home/index"
// });
// }
// return
// }
// this.toLaunch();
if (this.$deviceType == "app" || this.$deviceType == "h5") {
// this.toLaunch();
this.$yrouter.switchTab({
path: "/pages/home/index"
});

47
pages/home/components/Banner.vue
Unescape View File

@ -2,14 +2,14 @@
<view class="banner-swiper-box">
<canvas canvas-id="colorThief" class="hide-canvas"></canvas>
<swiper class="banner-carousel Shop-selector-rect" circular @change="swiperChange" :autoplay="true">
<swiper-item v-for="(item, index) in list" :key="index" class="carousel-item" @tap="routerTo(item.path)">
<swiper-item v-for="(item, index) in detail" :key="index" class="carousel-item" >
<image class="swiper-image " :src="item.pic" @click="goRoll(item)" mode="widthFix" lazy-load>
</image>
</swiper-item>
</swiper>
<view class="banner-swiper-dots">
<text :class="swiperCurrent === index ? 'banner-dot-active' : 'banner-dot'"
v-for="(dot, index) in list.length" :key="index"></text>
v-for="(dot, index) in detail.length" :key="index"></text>
</view>
</view>
</template>
@ -22,43 +22,28 @@
return {
swiperCurrent: 0, //轮播下标
webviewId: 0,
bgcolorAry: [],
list: []
};
},
props: {
banner: {
detail: {
type: Array,
default: []
}
},
created: async function () {
await this.doColorThief();
},
async mounted() {
},
computed: {},
watch: {
banner(next) {
this.list = next;
this.doColorThief()
}
},
methods: {
async doColorThief() {
let that = this;
// 获取轮播图
let item = this.list[this.swiperCurrent];
if(!item){
return
}
let item = this.detail[this.swiperCurrent];
// 获取轮播图颜色
let bgcolor = this.bgcolorAry[this.swiperCurrent];
let bgcolor = item.bgcolor;
// 颜色不存在
if (!bgcolor) {
let ctx = uni.createCanvasContext('colorThief', that.$scope);
if (bgcolor === '') {
let ctx = uni.createCanvasContext('colorThief', that);
if (0 === that.webviewId || ctx.webviewId === that.webviewId) {
that.webviewId = ctx.webviewId;
uni.getImageInfo({
@ -73,20 +58,16 @@
width: parseInt(image.width),
height: parseInt(image.height),
success(res) {
let newBgcolor = colorThief(res.data)
let bgcolor = colorThief(res.data)
.color()
.getHex();
that.$set(that.bgcolorAry, that
.swiperCurrent,
newBgcolor);
that.$emit('getbgcolor', newBgcolor);
},
fail: function (error) {
that.$set(item, 'bgcolor', bgcolor);
that.$emit('getbgcolor', bgcolor);
}
}, that.$scope);
});
},
fail: function (error) {
that
);
});
}
});
}
@ -98,6 +79,8 @@
swiperChange(e) {
this.swiperCurrent = e.detail.current;
this.doColorThief();
let bgcolor = this.detail[this.swiperCurrent].bgcolor;
this.$emit('getbgcolor', bgcolor);
},
// 路由跳转

3
pages/home/index.vue
Unescape View File

@ -22,7 +22,7 @@
<image src="@/static/images/qr.png" />
</view>
</view>
<Banner :banner="banner" @getbgcolor="getbgcolor"></Banner>
<Banner :detail="banner" v-if="banner.length>0" @getbgcolor="getbgcolor"></Banner>
<uni-notice-bar scrollable="true" @click="goRoll(singNew)" single="true" :speed="10" showIcon="true"
:text="singNew.info"></uni-notice-bar>
<view class="content_box home_content_box">
@ -215,6 +215,7 @@
});
getHomeData().then(res => {
that.logoUrl = res.data.logoUrl;
res.data.banner.map(item => item.bgcolor = '')
that.$set(that, 'banner', res.data.banner);
that.$set(that, 'menus', res.data.menus);
that.$set(that, 'roll', res.data.roll);

49
utils/index.js
Unescape View File

@ -89,11 +89,43 @@ export function isWeixin() {
}
export function parseQuery() {
// #ifdef H5
const res = {};
const query = (location.href.split("?")[1] || "")
.trim()
.replace(/^(\?|#|&)/, "");
if (!query) {
return res;
}
query.split("&").forEach(param => {
const parts = param.replace(/\+/g, " ").split("=");
const key = decodeURIComponent(parts.shift());
const val = parts.length > 0 ? decodeURIComponent(parts.join("=")) : null;
if (res[key] === undefined) {
res[key] = val;
} else if (Array.isArray(res[key])) {
res[key].push(val);
} else {
res[key] = [res[key], val];
}
});
// #endif
// #ifdef MP-WEIXIN
var pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options
return options
var res = currentPage.options //如果要获取url中所带的参数可以查看options
// #endif
return res
}
/*获取当前页url*/
@ -110,7 +142,6 @@ export function getCurrentPageUrlWithArgs() {
var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options
//拼接url的参数
var urlWithArgs = url + '?'
for (var key in options) {
@ -118,7 +149,6 @@ export function getCurrentPageUrlWithArgs() {
urlWithArgs += key + '=' + value + '&'
}
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
return urlWithArgs
}
@ -505,6 +535,7 @@ export function routerPermissions(url, type) {
if (!path) {
path = '/' + getCurrentPageUrlWithArgs()
}
console.log(Vue.prototype.$deviceType)
if (Vue.prototype.$deviceType == 'routine') {
console.log('————————')
console.log('当前是微信小程序，开始处理小程序登录方法')
@ -577,6 +608,13 @@ export function routerPermissions(url, type) {
})
cookie.set('redirect', path)
})
// } else if (Vue.prototype.$deviceType == 'weixin') {
// wechat().then(() => oAuth());
// if (!type) {
// push({
// path: url,
// })
// }
} else {
// 如果不是小程序跳转到登录页
console.log('当前无法自动登录，开始处理登录方法')
@ -681,7 +719,6 @@ export function handleQrCode() {
export function handleUrlParam(path) {
console.log(path)
var url = path.split("?")[1]; //获取url中"?"符后的字串
console.log(url)
var theRequest = new Object();
@ -822,7 +859,6 @@ export const handleLoginFailure = () => {
console.log("getCurrentPageUrl", getCurrentPageUrl());
//判断小程序转发分享商品详情进来的
if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleUrlParam(path) && !handleQrCode()) {
debugger;
console.log('————————')
console.log('判断小程序转发分享商品详情进来的')
console.log(' handleUrlParam()', handleUrlParam(path))
@ -967,7 +1003,6 @@ export const handleLoginFailure = () => {
}
if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleQrCode()) {
debugger;
console.log('————————')
console.log('是扫描的商品详情')
console.log('————————')

1
utils/store/cookie.js
Unescape View File

@ -37,6 +37,7 @@ function _has(key) {
return
}
let value = uni.getStorageSync(key)
console.log(key)
if (value) {
return true
}

32
剩余问题.js
Unescape View File

@ -1,32 +0,0 @@
// 1、轮播背景问题
// ~~ 延后处理
// 3、充值签名错误
// ? 未测试出该问题
// 页面都多了一个头部
// ~~ 需要打包h5的时候单独修改配置
// 6、评价图片上传不了
// ？接口报错，反馈给老徐了
// 8、小程序绑定手机号报错
// ？接口报错，反馈给老徐了
// 12、h5分享关系没形成，看下你那登陆怎么处理的参考下以前的h5
// ？前端功能修改完，后台交给老徐了
// 13、海报分享，分享分享调整没问题，因为是首页，但是，商品详情海报，拼团海报，砍价海报路由跳转会有问题
// ？前端功能修改完，后台交给老徐了
// 海报相关页面
// components/StorePoster.vue 商品详情
// > 根据用户来源生成二维码
// pages/activity/Poster/index 拼团
// > 根据from
// pages/activity/Poster/index 砍价
// > 根据from
// pages/user/promotion/Poster/index 分销
// 14、小程序已经开启了分享形成关系的问题看下
// ! 需沟通
Write Preview
Loading…
Cancel
Save