Skip to content

肖康 / H5_2.0

Go to a project
Commit 83306b5e by LJM
Options

js

parent f9ce10cc
Inline Side-by-side
Showing with 101 additions and 112 deletions
App.vue
...@@ -19,7 +19,7 @@ export default { ...@@ -19,7 +19,7 @@ export default {
uni-page-head { uni-page-head {
display: none; display: none;
} }
body{ body {
background: #f5f5f5; background: #f5f5f5;
} }
/* #endif */ /* #endif */
......
components/drag-button-follow/drag-button-follow.vue
<template> <template>
<view <!-- #ifndef MP-WEIXIN --> <view <!-- #ifndef MP-WEIXIN -->
:style="{ :style="{ transform: `translate(${offsetX}px, ${offsetY}px)`, MsTransform: `translate(${offsetX}px, ${offsetY}px)`, MozTransform: `translate(${offsetX}px, ${offsetY}px)`, WebkitTransform: `translate(${offsetX}px, ${offsetY}px)`, OTransform: `translate(${offsetX}px, ${offsetY}px)`, transition: move ? 'none' : 'transform 0.2s ease-in-out', MsTransition: move ? 'none' : 'transform 0.2s ease-in-out', MozTransition: move ? 'none' : 'transform 0.2s ease-in-out', WebkitTransition: move ? 'none' : 'transform 0.2s ease-in-out', OTransition: move ? 'none' : 'transform 0.2s ease-in-out' }"
transform: `translate(${offsetX}px, ${offsetY}px)`,
MsTransform: `translate(${offsetX}px, ${offsetY}px)`,
MozTransform: `translate(${offsetX}px, ${offsetY}px)`,
WebkitTransform: `translate(${offsetX}px, ${offsetY}px)`,
OTransform: `translate(${offsetX}px, ${offsetY}px)`,
transition: move ? 'none' : 'transform 0.2s ease-in-out',
MsTransition: move ? 'none' : 'transform 0.2s ease-in-out',
MozTransition: move ? 'none' : 'transform 0.2s ease-in-out',
WebkitTransition: move ? 'none' : 'transform 0.2s ease-in-out',
OTransition: move ? 'none' : 'transform 0.2s ease-in-out'
}"
<!-- #endif --> <!-- #endif -->
@click.stop="click" @click.stop="click" @touchmove.stop.prevent="touchmove" @touchstart="touchstart" @touchend="touchend" >
@touchmove.stop.prevent="touchmove"
@touchstart="touchstart"
@touchend="touchend"
>
<a class="navxfbox25" :href="url" target="_balnk"> <a class="navxfbox25" :href="url" target="_balnk">
<text class="icon iconfont icon-qq icon-qqnavxf"></text> <text class="icon iconfont icon-qq icon-qqnavxf"></text>
<view class="texttmavsk">QQ</view> <view class="texttmavsk">QQ</view>
<view class="texttmavsk">咨询</view> <view class="texttmavsk">咨询</view>
</a> </a>
<slot> <slot></slot>
</slot>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
name: 'DragButtonFollow', name: 'DragButtonFollow',
props: { props: {
className: { className: {
...@@ -71,49 +54,50 @@ ...@@ -71,49 +54,50 @@
left: 0, left: 0,
top: 0, top: 0,
move: false, move: false,
foll: { foll: {}
};
}
}
}, },
onShow() {},
mounted() { mounted() {
this.url = this.$globalData.kefu;
const systemInfo = uni.getSystemInfoSync() || {} const systemInfo = uni.getSystemInfoSync() || {};
this.$options.safeArea = { this.$options.safeArea = {
left: 0, left: 0,
top: 0, top: 0,
right: systemInfo.windowWidth, right: systemInfo.windowWidth,
bottom: systemInfo.windowHeight bottom: systemInfo.windowHeight
} };
const query = this.$parent.createSelectorQuery() const query = this.$parent.createSelectorQuery();
query.select(`.${this.className}`).boundingClientRect(data => { query
.select(`.${this.className}`)
.boundingClientRect(data => {
if (data) { if (data) {
this.width = data.width this.width = data.width;
this.height = data.height this.height = data.height;
this.left = data.left this.left = data.left;
this.top = data.top this.top = data.top;
} }
}).exec() })
.exec();
if (this.follow) { if (this.follow) {
const type = this.follow.split(",") const type = this.follow.split(',');
let isLeft, isRight, isTop, isBottom, isAll, num let isLeft, isRight, isTop, isBottom, isAll, num;
type.forEach(_ => { type.forEach(_ => {
if (_ === 'all') isAll = true if (_ === 'all') isAll = true;
if (_ === 'left') isLeft = true if (_ === 'left') isLeft = true;
if (_ === 'right') isRight = true if (_ === 'right') isRight = true;
if (_ === 'top') isTop = true if (_ === 'top') isTop = true;
if (_ === 'bottom') isBottom = true if (_ === 'bottom') isBottom = true;
}) });
if (isAll) isLeft = isRight = isTop = isBottom = true if (isAll) isLeft = isRight = isTop = isBottom = true;
num = Math.round(this.width * this.followNum / 100) num = Math.round((this.width * this.followNum) / 100);
this.foll = { this.foll = {
isLeft, isLeft,
isRight, isRight,
isTop, isTop,
isBottom, isBottom,
num num
} };
} }
}, },
methods: { methods: {
...@@ -121,97 +105,92 @@ ...@@ -121,97 +105,92 @@
this.$emit('btnClick'); this.$emit('btnClick');
}, },
touchstart(e) { touchstart(e) {
if (!this.drag) return if (!this.drag) return;
this.move = true this.move = true;
}, },
touchmove(e) { touchmove(e) {
if (!this.drag) return if (!this.drag) return;
if (!this.move) return if (!this.move) return;
const { const { left, right, top, bottom } = this.$options.safeArea;
left, const dot = e.changedTouches[0];
right, if (dot.clientX < left + this.width / 2) dot.clientX = left + this.width / 2;
top, if (dot.clientX > right - this.width / 2) dot.clientX = right - this.width / 2;
bottom if (dot.clientY < top + this.height / 2) dot.clientY = top + this.height / 2;
} = this.$options.safeArea if (dot.clientY > bottom - this.height / 2) dot.clientY = bottom - this.height / 2;
const dot = e.changedTouches[0] this.offsetX = dot.clientX - this.left - this.width / 2;
if (dot.clientX < left + this.width / 2) dot.clientX = left + this.width / 2 this.offsetY = dot.clientY - this.top - this.height / 2;
if (dot.clientX > right - this.width / 2) dot.clientX = right - this.width / 2
if (dot.clientY < top + this.height / 2) dot.clientY = top + this.height / 2
if (dot.clientY > bottom - this.height / 2) dot.clientY = bottom - this.height / 2
this.offsetX = dot.clientX - this.left - this.width / 2
this.offsetY = dot.clientY - this.top - this.height / 2
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
this.$emit("update:style", ` this.$emit(
'update:style',
`
transform: translate(${this.offsetX}px, ${this.offsetY}px); transform: translate(${this.offsetX}px, ${this.offsetY}px);
WebkitTransform: translate(${this.offsetX}px, ${this.offsetY}px); WebkitTransform: translate(${this.offsetX}px, ${this.offsetY}px);
transition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'}; transition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'};
WebkitTransition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'}; WebkitTransition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'};
`) `
);
// #endif // #endif
}, },
touchend(e) { touchend(e) {
if (!this.drag) return if (!this.drag) return;
this.move = false this.move = false;
if (!this.follow) return if (!this.follow) return;
const dot = e.changedTouches[0] const dot = e.changedTouches[0];
const { const { left, right, top, bottom } = this.$options.safeArea;
left,
right,
top,
bottom
} = this.$options.safeArea
if (this.foll.isLeft && this.foll.isRight) { if (this.foll.isLeft && this.foll.isRight) {
if (dot.clientX <= (left + right) / 2) this.offsetX = this.foll.num - this.left if (dot.clientX <= (left + right) / 2) this.offsetX = this.foll.num - this.left;
if (dot.clientX > (left + right) / 2) this.offsetX = right - this.width - this.foll.num - this.left if (dot.clientX > (left + right) / 2) this.offsetX = right - this.width - this.foll.num - this.left;
} else if (this.foll.isLeft) { } else if (this.foll.isLeft) {
this.offsetX = this.foll.num - this.left this.offsetX = this.foll.num - this.left;
} else if (this.foll.isRight) { } else if (this.foll.isRight) {
this.offsetX = right - this.width - this.foll.num - this.left this.offsetX = right - this.width - this.foll.num - this.left;
} }
if (this.foll.isTop && this.foll.isBottom) { if (this.foll.isTop && this.foll.isBottom) {
if (dot.clientY <= (top + bottom) / 2) this.offsetY = this.foll.num - this.top if (dot.clientY <= (top + bottom) / 2) this.offsetY = this.foll.num - this.top;
if (dot.clientY > (top + bottom) / 2) this.offsetY = bottom - this.height - this.foll.num - this.top if (dot.clientY > (top + bottom) / 2) this.offsetY = bottom - this.height - this.foll.num - this.top;
} else if (this.foll.isTop) { } else if (this.foll.isTop) {
this.offsetY = this.foll.num - this.top this.offsetY = this.foll.num - this.top;
} else if (this.foll.isBottom) { } else if (this.foll.isBottom) {
this.offsetY = bottom - this.height - this.foll.num - this.top this.offsetY = bottom - this.height - this.foll.num - this.top;
} }
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
this.$emit("update:style", ` this.$emit(
'update:style',
`
transform: translate(${this.offsetX}px, ${this.offsetY}px); transform: translate(${this.offsetX}px, ${this.offsetY}px);
WebkitTransform: translate(${this.offsetX}px, ${this.offsetY}px); WebkitTransform: translate(${this.offsetX}px, ${this.offsetY}px);
transition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'}; transition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'};
WebkitTransition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'}; WebkitTransition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'};
`) `
);
// #endif // #endif
},
} }
} }
};
</script> </script>
<style scoped> <style scoped>
/* #ifdef MP-WEIXIN */ /* #ifdef MP-WEIXIN */
view { view {
height: 100%; height: 100%;
width: 100%; width: 100%;
display: inherit; display: inherit;
justify-content: inherit; justify-content: inherit;
align-items: inherit; align-items: inherit;
} }
/* #endif */ /* #endif */
.drag-button { .drag-button {
width: 68rpx; width: 68rpx;
height: 130rpx; height: 130rpx;
background: #1969F9; background: #1969f9;
border-radius: 10rpx; border-radius: 10rpx;
position: fixed; position: fixed;
left: 0px; left: 0px;
top: 50%; top: 50%;
z-index: 777; z-index: 777;
}
} .navxfbox25 {
.navxfbox25 {
width: 68rpx; width: 68rpx;
height: 130rpx; height: 130rpx;
text-align: center; text-align: center;
...@@ -219,18 +198,17 @@ ...@@ -219,18 +198,17 @@
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
text-decoration: none; text-decoration: none;
}
} .icon-qqnavxf {
.icon-qqnavxf {
font-size: 48rpx; font-size: 48rpx;
color: #fff; color: #fff;
} }
.texttmavsk { .texttmavsk {
font-size: 20rpx; font-size: 20rpx;
color: #fff; color: #fff;
height: 24rpx; height: 24rpx;
line-height: 24rpx; line-height: 24rpx;
} }
</style> </style>
main.js
import App from './App' import App from './App'
import { request} from '@/util/util.js' import { request } from '@/util/util.js'
import filters from '@/filters' import filters from '@/filters'
import router from '@/router/index.js' import router from '@/router/index.js'
import { RouterMount } from 'uni-simple-router' import { RouterMount } from 'uni-simple-router'
import directive from '@/directive' import directive from '@/directive'
import { Ichunt_Api } from '@/util/api.js';
// #ifndef VUE3 // #ifndef VUE3
import Vue from 'vue' import Vue from 'vue'
...@@ -18,16 +20,23 @@ Object.keys(filters).forEach(key => Vue.filter(key, filters[key])); ...@@ -18,16 +20,23 @@ Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
//自定义指令 //自定义指令
Vue.use(directive); Vue.use(directive);
//定义全局变量
var globalData = {
kefu: '' //客服
};
//读取全局变量配置
request(Ichunt_Api + '/api/common/data', 'GET', {}, true, true).then(res => {
if (res.err_code === 0) {
globalData.kefu = res.data.kfqq_xk.data;
Vue.prototype.$globalData = globalData;
}
});
try { try {
function isPromise(obj) { function isPromise(obj) {
return ( return (!!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function");
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
} }
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致 // 统一 vue2 API Promise 化返回格式与 vue3 保持一致
......
pages/mine/shoporder.vue
<template> <template>
<view class="page-userOrder"> <view class="page-userOrder">
<drag-button-follow follow="left,right" className="drag-button" class="drag-button" :url="kfurl"></drag-button-follow> <drag-button-follow follow="left,right" className="drag-button" class="drag-button"></drag-button-follow>
<view class="top"> <view class="top">
<view class="head row bothSide verCenter"> <view class="head row bothSide verCenter">
<view class="left row verCenter"> <view class="left row verCenter">
...@@ -154,7 +154,6 @@ export default { ...@@ -154,7 +154,6 @@ export default {
}); });
return { return {
time: currentDate, time: currentDate,
kfurl: 'https://url.cn/uia2no5Z?_type=wpa&amp;qidian=true',
arr: ['全部', '待付款', '待收货', '已完结订单'], arr: ['全部', '待付款', '待收货', '已完结订单'],
curr: 0, curr: 0,
list: [], list: [],
......
pages/mine/user.vue
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<text class="tt">我的优惠券</text> <text class="tt">我的优惠券</text>
<text class="tip"></text> <text class="tip"></text>
</navigator> </navigator>
<a class="box column rowCenter verCenter" :href="userInfo.kefu_url"> <a class="box column rowCenter verCenter" :href="kfqq_xk">
<image src="../../static/qq.png"></image> <image src="../../static/qq.png"></image>
<text class="tt">我的客服</text> <text class="tt">我的客服</text>
</a> </a>
...@@ -120,12 +120,14 @@ export default { ...@@ -120,12 +120,14 @@ export default {
}, },
data() { data() {
return { return {
kfqq_xk: '',
userInfo: {}, userInfo: {},
activity_list: [] activity_list: []
}; };
}, },
onShow() { onShow() {
this.getData(); this.getData();
this.kfqq_xk = this.$globalData.kefu;
}, },
methods: { methods: {
/** /**
...@@ -315,6 +317,7 @@ export default { ...@@ -315,6 +317,7 @@ export default {
this.request(Api_Url + '/user/getUserType', 'POST', {}, true, true).then(res => { this.request(Api_Url + '/user/getUserType', 'POST', {}, true, true).then(res => {
if (res.err_code === 0) { if (res.err_code === 0) {
this.userInfo = res.data; this.userInfo = res.data;
this.$globalData.kefu = res.data.kefu_url;
} else if (res.err_code === 11012) { } else if (res.err_code === 11012) {
uni.navigateTo({ uni.navigateTo({
url: '/login' url: '/login'
......
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 sign in to comment