cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改轮播图卡顿的问题

Browse Source
This commit is contained in:
Gaoxs
2020-09-15 10:42:23 +08:00
parent c47c8d3a4f
commit 4b56792e63
9 changed files with 231 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
config/index.js
View File

@ -1,7 +1,8 @@
// export const VUE_APP_API_URL = 'http://natapp.xinxintuan.co/api'; // 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 = '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'; export const VUE_APP_RESOURCES_URL = 'https://wx.yixiang.co/static';

14
libs/wechat.js
View File

@ -147,7 +147,8 @@ export function auth(code) {
console.log('获取微信授权') console.log('获取微信授权')
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let loginType = cookie.get(LOGINTYPE); let loginType = cookie.get(LOGINTYPE);
wechatAuth(code, parseInt(cookie.get("spread")), loginType) let spread = cookie.get(spread);
wechatAuth(code, spread, loginType)
.then(({ data }) => { .then(({ data }) => {
console.log(data) console.log(data)
const expires_time = dayjs(data.expires_time); const expires_time = dayjs(data.expires_time);
@ -171,8 +172,15 @@ export function toAuth() {
} }
function getAuthUrl(appId) { 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(`${window.location.origin}${window.location.pathname}`)
// const redirect_uri = encodeURIComponent(`${location.origin}`) // const redirect_uri = encodeURIComponent(`${location.origin}`)
cookie.remove(BACK_URL); cookie.remove(BACK_URL);

24
main.js
View File

@ -23,7 +23,8 @@ import cookie from "@/utils/store/cookie";
import { import {
parseRoute, parseRoute,
_router _router,
parseQuery
} from "@/utils"; } from "@/utils";
import { import {
VUE_APP_RESOURCES_URL, VUE_APP_RESOURCES_URL,
@ -102,6 +103,27 @@ import {
import { isWeixin } from '@/utils' 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()) { if (isWeixin()) {
Vue.prototype.$deviceType = 'weixin' Vue.prototype.$deviceType = 'weixin'

182
pages/Loading/index.vue
View File

@ -1,97 +1,119 @@
<template> <template>
<view class="lottie-bg"> <view class="lottie-bg">
<view id="lottie"> <view id="lottie">
<image <image src="../../static/images/live-logo.gif" rel="preload" mode="widthFix" style="width: 100%;" />
src="../../static/images/live-logo.gif"
rel="preload"
mode="widthFix"
style="width: 100%;"
/>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
import { mapState, mapMutations, mapActions } from "vuex"; import {
// 组件 mapState,
// import request from "@//api/request"; mapMutations,
import { wxappAuth, getUser } from "@/api/user"; mapActions
import dayjs from "dayjs"; } from "vuex";
import cookie from "@/utils/store/cookie"; // 组件
import { parseQuery, login, handleQrCode } from "@/utils"; // import request from "@//api/request";
import {
wxappAuth,
getUser
} from "@/api/user";
import dayjs from "dayjs";
import cookie from "@/utils/store/cookie";
import {
parseQuery,
login,
handleQrCode
} from "@/utils";
export default { export default {
name: "Loading", name: "Loading",
data() { data() {
return {}; return {};
}, },
onShow() { onShow() {
var url = handleQrCode(); var url = handleQrCode();
// 判断是否是分销 // 判断是否是分销
if (url) { if (url) {
var spread = cookie.get("spread"); var spread = cookie.get("spread");
let urlSpread = parseInt(url.spread); let urlSpread = parseInt(url.spread);
if (!Number.isNaN(urlSpread) && spread !== urlSpread) { if (!Number.isNaN(urlSpread) && spread !== urlSpread) {
cookie.set("spread", urlSpread || 0); cookie.set("spread", urlSpread || 0);
} else if (spread === 0 || typeof spread !== "number") { } else if (spread === 0 || typeof spread !== "number") {
cookie.set("spread", urlSpread || 0); cookie.set("spread", urlSpread || 0);
}
}
if (this.$store.getters.token) {
this.toLaunch();
return;
}
// 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"
});
return;
}
login().finally(() => {
this.$yrouter.switchTab({
path: "/pages/home/index"
});
});
},
methods: {
...mapActions(["changeAuthorization", "setUserInfo"]),
toLaunch() {
console.log("loading home");
this.changeAuthorization(false);
this.$yrouter.switchTab({
path: "/pages/home/index"
});
} }
} }
if (this.$store.getters.token) { };
this.toLaunch();
return;
}
cookie.get("spread");
// this.toLaunch();
if (this.$deviceType == "app"||this.$deviceType == "h5") {
// this.toLaunch();
this.$yrouter.switchTab({
path: "/pages/home/index"
});
return;
}
login().finally(() => {
this.$yrouter.switchTab({
path: "/pages/home/index"
});
});
},
methods: {
...mapActions(["changeAuthorization", "setUserInfo"]),
toLaunch() {
console.log("loading home");
this.changeAuthorization(false);
this.$yrouter.switchTab({
path: "/pages/home/index"
});
}
}
};
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.lottie-bg { .lottie-bg {
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: 999; z-index: 999;
display: -webkit-flex; display: -webkit-flex;
display: flex; display: flex;
-webkit-align-items: center; -webkit-align-items: center;
align-items: center; align-items: center;
-webkit-justify-content: center; -webkit-justify-content: center;
justify-content: center; justify-content: center;
} }
#lottie { #lottie {
width: 35%; width: 35%;
display: block; display: block;
overflow: hidden; overflow: hidden;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
margin: auto; margin: auto;
} }
</style> </style>

63
pages/home/components/Banner.vue
View File

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

3
pages/home/index.vue
View File

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

95
utils/index.js
View File

@ -38,27 +38,27 @@ export function dataFormat(time, option) {
return timeStr return timeStr
} }
} }
// 年月日，时分秒 // 年月日，时分秒
// "YYYY-mm-dd HH:MM" // "YYYY-mm-dd HH:MM"
export function dateFormatL(fmt, date) { export function dateFormatL(fmt, date) {
let ret; let ret;
const opt = { const opt = {
"Y+": date.getFullYear().toString(), // 年 "Y+": date.getFullYear().toString(), // 年
"m+": (date.getMonth() + 1).toString(), // 月 "m+": (date.getMonth() + 1).toString(), // 月
"d+": date.getDate().toString(), // 日 "d+": date.getDate().toString(), // 日
"H+": date.getHours().toString(), // 时 "H+": date.getHours().toString(), // 时
"M+": date.getMinutes().toString(), // 分 "M+": date.getMinutes().toString(), // 分
"S+": date.getSeconds().toString() // 秒 "S+": date.getSeconds().toString() // 秒
// 有其他格式化字符需求可以继续添加，必须转化成字符串 // 有其他格式化字符需求可以继续添加，必须转化成字符串
};
for (let k in opt) {
ret = new RegExp("(" + k + ")").exec(fmt);
if (ret) {
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
}; };
for (let k in opt) { };
ret = new RegExp("(" + k + ")").exec(fmt); return fmt;
if (ret) { }
fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
};
};
return fmt;
}
export function dateFormatT(time) { export function dateFormatT(time) {
time = +time * 1000; time = +time * 1000;
const d = new Date(time); const d = new Date(time);
@ -82,18 +82,50 @@ export function isType(arg, type) {
} }
export function isWeixin() { export function isWeixin() {
if(navigator&&navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1){ if (navigator && navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1) {
return true return true
} }
return false return false
} }
export function parseQuery() { 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 pages = getCurrentPages() //获取加载的页面
var currentPage = pages[pages.length - 1] //获取当前页面的对象 var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options var res = currentPage.options //如果要获取url中所带的参数可以查看options
return options // #endif
return res
} }
/*获取当前页url*/ /*获取当前页url*/
@ -110,7 +142,6 @@ export function getCurrentPageUrlWithArgs() {
var currentPage = pages[pages.length - 1] //获取当前页面的对象 var currentPage = pages[pages.length - 1] //获取当前页面的对象
var url = currentPage.route //当前页面url var url = currentPage.route //当前页面url
var options = currentPage.options //如果要获取url中所带的参数可以查看options var options = currentPage.options //如果要获取url中所带的参数可以查看options
//拼接url的参数 //拼接url的参数
var urlWithArgs = url + '?' var urlWithArgs = url + '?'
for (var key in options) { for (var key in options) {
@ -118,7 +149,6 @@ export function getCurrentPageUrlWithArgs() {
urlWithArgs += key + '=' + value + '&' urlWithArgs += key + '=' + value + '&'
} }
urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1) urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
return urlWithArgs return urlWithArgs
} }
@ -505,6 +535,7 @@ export function routerPermissions(url, type) {
if (!path) { if (!path) {
path = '/' + getCurrentPageUrlWithArgs() path = '/' + getCurrentPageUrlWithArgs()
} }
console.log(Vue.prototype.$deviceType)
if (Vue.prototype.$deviceType == 'routine') { if (Vue.prototype.$deviceType == 'routine') {
console.log('————————') console.log('————————')
console.log('当前是微信小程序，开始处理小程序登录方法') console.log('当前是微信小程序，开始处理小程序登录方法')
@ -577,6 +608,13 @@ export function routerPermissions(url, type) {
}) })
cookie.set('redirect', path) cookie.set('redirect', path)
}) })
// } else if (Vue.prototype.$deviceType == 'weixin') {
// wechat().then(() => oAuth());
// if (!type) {
// push({
// path: url,
// })
// }
} else { } else {
// 如果不是小程序跳转到登录页 // 如果不是小程序跳转到登录页
console.log('当前无法自动登录，开始处理登录方法') console.log('当前无法自动登录，开始处理登录方法')
@ -681,7 +719,6 @@ export function handleQrCode() {
export function handleUrlParam(path) { export function handleUrlParam(path) {
console.log(path) console.log(path)
var url = path.split("?")[1]; //获取url中"?"符后的字串 var url = path.split("?")[1]; //获取url中"?"符后的字串
console.log(url) console.log(url)
var theRequest = new Object(); var theRequest = new Object();
@ -819,10 +856,9 @@ export const handleLoginFailure = () => {
console.log('————————') console.log('————————')
store.commit("updateAuthorizationPage", true); store.commit("updateAuthorizationPage", true);
let path = '/' + getCurrentPageUrlWithArgs() let path = '/' + getCurrentPageUrlWithArgs()
console.log("getCurrentPageUrl",getCurrentPageUrl()); console.log("getCurrentPageUrl", getCurrentPageUrl());
//判断小程序转发分享商品详情进来的 //判断小程序转发分享商品详情进来的
if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleUrlParam(path) && !handleQrCode()) { if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleUrlParam(path) && !handleQrCode()) {
debugger;
console.log('————————') console.log('————————')
console.log('判断小程序转发分享商品详情进来的') console.log('判断小程序转发分享商品详情进来的')
console.log(' handleUrlParam()', handleUrlParam(path)) console.log(' handleUrlParam()', handleUrlParam(path))
@ -894,7 +930,7 @@ export const handleLoginFailure = () => {
} }
// 判断是不是转发分享的砍价海报进来的 // 判断是不是转发分享的砍价海报进来的
if (getCurrentPageUrl() == 'pages/activity/DargainDetails/index' && handleUrlParam(path) && !handleQrCode()) { if (getCurrentPageUrl() == 'pages/activity/DargainDetails/index' && handleUrlParam(path) && !handleQrCode()) {
console.log('————————') console.log('————————')
console.log('判断是不是转发分享的砍价海报进来的') console.log('判断是不是转发分享的砍价海报进来的')
console.log('————————') console.log('————————')
@ -967,7 +1003,6 @@ export const handleLoginFailure = () => {
} }
if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleQrCode()) { if (getCurrentPageUrl() == 'pages/shop/GoodsCon/index' && handleQrCode()) {
debugger;
console.log('————————') console.log('————————')
console.log('是扫描的商品详情') console.log('是扫描的商品详情')
console.log('————————') console.log('————————')

1
utils/store/cookie.js
View File

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

32
剩余问题.js
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、小程序已经开启了分享形成关系的问题看下
// ! 需沟通