Skip to content

肖康 / H5_2.0

Go to a project
Commit 83306b5e by LJM
Options

js

parent f9ce10cc
Inline Side-by-side
Showing with 217 additions and 229 deletions
App.vue
...@@ -19,8 +19,8 @@ export default { ...@@ -19,8 +19,8 @@ export default {
uni-page-head { uni-page-head {
display: none; display: none;
} }
body{ body {
background: #f5f5f5; background: #f5f5f5;
} }
/* #endif */ /* #endif */
</style> </style>
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)`, <!-- #endif -->
MsTransform: `translate(${offsetX}px, ${offsetY}px)`, @click.stop="click" @touchmove.stop.prevent="touchmove" @touchstart="touchstart" @touchend="touchend" >
MozTransform: `translate(${offsetX}px, ${offsetY}px)`, <a class="navxfbox25" :href="url" target="_balnk">
WebkitTransform: `translate(${offsetX}px, ${offsetY}px)`, <text class="icon iconfont icon-qq icon-qqnavxf"></text>
OTransform: `translate(${offsetX}px, ${offsetY}px)`, <view class="texttmavsk">QQ</view>
transition: move ? 'none' : 'transform 0.2s ease-in-out', <view class="texttmavsk">咨询</view>
MsTransition: move ? 'none' : 'transform 0.2s ease-in-out', </a>
MozTransition: move ? 'none' : 'transform 0.2s ease-in-out', <slot></slot>
WebkitTransition: move ? 'none' : 'transform 0.2s ease-in-out', </view>
OTransition: move ? 'none' : 'transform 0.2s ease-in-out'
}"
<!-- #endif -->
@click.stop="click"
@touchmove.stop.prevent="touchmove"
@touchstart="touchstart"
@touchend="touchend"
>
<a class="navxfbox25" :href="url" target="_balnk">
<text class="icon iconfont icon-qq icon-qqnavxf"></text>
<view class="texttmavsk">QQ</view>
<view class="texttmavsk">咨询</view>
</a>
<slot>
</slot>
</view>
</template> </template>
<script> <script>
export default { export default {
name: 'DragButtonFollow', name: 'DragButtonFollow',
props: { props: {
className: { className: {
type: String, type: String,
default: '' default: ''
}, },
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
style: { style: {
type: String, type: String,
default: '' default: ''
}, },
// #endif // #endif
drag: { drag: {
type: Boolean, type: Boolean,
default: true default: true
}, },
url: { url: {
type: String, type: String,
default: '' default: ''
}, },
follow: {
type: String | Boolean,
default: 'all'
},
followNum: {
type: Number,
default: 0
}
},
safeArea: {},
data() {
return {
offsetX: 0,
offsetY: 0,
width: 0,
height: 0,
left: 0,
top: 0,
move: false,
foll: {
} follow: {
} type: String | Boolean,
}, default: 'all'
},
mounted() { followNum: {
type: Number,
const systemInfo = uni.getSystemInfoSync() || {} default: 0
this.$options.safeArea = { }
left: 0, },
top: 0, safeArea: {},
right: systemInfo.windowWidth, data() {
bottom: systemInfo.windowHeight return {
} offsetX: 0,
const query = this.$parent.createSelectorQuery() offsetY: 0,
query.select(`.${this.className}`).boundingClientRect(data => { width: 0,
if (data) { height: 0,
this.width = data.width left: 0,
this.height = data.height top: 0,
this.left = data.left move: false,
this.top = data.top foll: {}
} };
}).exec() },
if (this.follow) { onShow() {},
const type = this.follow.split(",") mounted() {
let isLeft, isRight, isTop, isBottom, isAll, num this.url = this.$globalData.kefu;
type.forEach(_ => { const systemInfo = uni.getSystemInfoSync() || {};
if (_ === 'all') isAll = true this.$options.safeArea = {
if (_ === 'left') isLeft = true left: 0,
if (_ === 'right') isRight = true top: 0,
if (_ === 'top') isTop = true right: systemInfo.windowWidth,
if (_ === 'bottom') isBottom = true bottom: systemInfo.windowHeight
}) };
if (isAll) isLeft = isRight = isTop = isBottom = true const query = this.$parent.createSelectorQuery();
num = Math.round(this.width * this.followNum / 100) query
this.foll = { .select(`.${this.className}`)
isLeft, .boundingClientRect(data => {
isRight, if (data) {
isTop, this.width = data.width;
isBottom, this.height = data.height;
num this.left = data.left;
} this.top = data.top;
} }
}, })
methods: { .exec();
click() { if (this.follow) {
this.$emit('btnClick'); const type = this.follow.split(',');
}, let isLeft, isRight, isTop, isBottom, isAll, num;
touchstart(e) { type.forEach(_ => {
if (!this.drag) return if (_ === 'all') isAll = true;
this.move = true if (_ === 'left') isLeft = true;
}, if (_ === 'right') isRight = true;
touchmove(e) { if (_ === 'top') isTop = true;
if (!this.drag) return if (_ === 'bottom') isBottom = true;
if (!this.move) return });
const { if (isAll) isLeft = isRight = isTop = isBottom = true;
left, num = Math.round((this.width * this.followNum) / 100);
right, this.foll = {
top, isLeft,
bottom isRight,
} = this.$options.safeArea isTop,
const dot = e.changedTouches[0] isBottom,
if (dot.clientX < left + this.width / 2) dot.clientX = left + this.width / 2 num
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 methods: {
this.offsetY = dot.clientY - this.top - this.height / 2 click() {
// #ifdef MP-WEIXIN this.$emit('btnClick');
this.$emit("update:style", ` },
touchstart(e) {
if (!this.drag) return;
this.move = true;
},
touchmove(e) {
if (!this.drag) return;
if (!this.move) return;
const { left, right, top, bottom } = this.$options.safeArea;
const dot = e.changedTouches[0];
if (dot.clientX < left + this.width / 2) dot.clientX = left + this.width / 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
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) { },
if (!this.drag) return touchend(e) {
this.move = false if (!this.drag) return;
if (!this.follow) return this.move = false;
const dot = e.changedTouches[0] if (!this.follow) return;
const { const dot = e.changedTouches[0];
left, const { left, right, top, bottom } = this.$options.safeArea;
right, if (this.foll.isLeft && this.foll.isRight) {
top, if (dot.clientX <= (left + right) / 2) this.offsetX = this.foll.num - this.left;
bottom if (dot.clientX > (left + right) / 2) this.offsetX = right - this.width - this.foll.num - this.left;
} = this.$options.safeArea } else if (this.foll.isLeft) {
if (this.foll.isLeft && this.foll.isRight) { this.offsetX = this.foll.num - this.left;
if (dot.clientX <= (left + right) / 2) this.offsetX = this.foll.num - this.left } else if (this.foll.isRight) {
if (dot.clientX > (left + right) / 2) this.offsetX = right - this.width - this.foll.num - this.left this.offsetX = right - this.width - this.foll.num - this.left;
} else if (this.foll.isLeft) { }
this.offsetX = this.foll.num - this.left if (this.foll.isTop && this.foll.isBottom) {
} else if (this.foll.isRight) { if (dot.clientY <= (top + bottom) / 2) this.offsetY = this.foll.num - this.top;
this.offsetX = right - this.width - this.foll.num - this.left if (dot.clientY > (top + bottom) / 2) this.offsetY = bottom - this.height - this.foll.num - this.top;
} } else if (this.foll.isTop) {
if (this.foll.isTop && this.foll.isBottom) { this.offsetY = this.foll.num - this.top;
if (dot.clientY <= (top + bottom) / 2) this.offsetY = this.foll.num - this.top } else if (this.foll.isBottom) {
if (dot.clientY > (top + bottom) / 2) this.offsetY = bottom - this.height - this.foll.num - this.top this.offsetY = bottom - this.height - this.foll.num - this.top;
} else if (this.foll.isTop) { }
this.offsetY = this.foll.num - this.top // #ifdef MP-WEIXIN
} else if (this.foll.isBottom) { this.$emit(
this.offsetY = bottom - this.height - this.foll.num - this.top 'update:style',
} `
// #ifdef MP-WEIXIN
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 */
.drag-button {
width: 68rpx;
height: 130rpx;
background: #1969F9;
border-radius: 10rpx;
position: fixed;
left: 0px;
top: 50%;
z-index: 777;
}
.navxfbox25 { /* #endif */
width: 68rpx; .drag-button {
height: 130rpx; width: 68rpx;
text-align: center; height: 130rpx;
padding-top: 16rpx; background: #1969f9;
box-sizing: border-box; border-radius: 10rpx;
display: block; position: fixed;
text-decoration: none; left: 0px;
top: 50%;
z-index: 777;
}
} .navxfbox25 {
width: 68rpx;
height: 130rpx;
text-align: center;
padding-top: 16rpx;
box-sizing: border-box;
display: block;
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>
\ No newline at end of file
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