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 {
uni-page-head {
display: none;
}
body{
background: #f5f5f5;
body {
background: #f5f5f5;
}
/* #endif */
</style>
components/drag-button-follow/drag-button-follow.vue
<template>
<view <!-- #ifndef MP-WEIXIN -->
: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'
}"
<!-- #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>
<view <!-- #ifndef MP-WEIXIN -->
: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' }"
<!-- #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>
<script>
export default {
name: 'DragButtonFollow',
props: {
className: {
type: String,
default: ''
},
// #ifdef MP-WEIXIN
style: {
type: String,
default: ''
},
// #endif
drag: {
type: Boolean,
default: true
},
url: {
type: String,
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: {
export default {
name: 'DragButtonFollow',
props: {
className: {
type: String,
default: ''
},
// #ifdef MP-WEIXIN
style: {
type: String,
default: ''
},
// #endif
drag: {
type: Boolean,
default: true
},
url: {
type: String,
default: ''
},
}
}
},
mounted() {
const systemInfo = uni.getSystemInfoSync() || {}
this.$options.safeArea = {
left: 0,
top: 0,
right: systemInfo.windowWidth,
bottom: systemInfo.windowHeight
}
const query = this.$parent.createSelectorQuery()
query.select(`.${this.className}`).boundingClientRect(data => {
if (data) {
this.width = data.width
this.height = data.height
this.left = data.left
this.top = data.top
}
}).exec()
if (this.follow) {
const type = this.follow.split(",")
let isLeft, isRight, isTop, isBottom, isAll, num
type.forEach(_ => {
if (_ === 'all') isAll = true
if (_ === 'left') isLeft = true
if (_ === 'right') isRight = true
if (_ === 'top') isTop = true
if (_ === 'bottom') isBottom = true
})
if (isAll) isLeft = isRight = isTop = isBottom = true
num = Math.round(this.width * this.followNum / 100)
this.foll = {
isLeft,
isRight,
isTop,
isBottom,
num
}
}
},
methods: {
click() {
this.$emit('btnClick');
},
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", `
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: {}
};
},
onShow() {},
mounted() {
this.url = this.$globalData.kefu;
const systemInfo = uni.getSystemInfoSync() || {};
this.$options.safeArea = {
left: 0,
top: 0,
right: systemInfo.windowWidth,
bottom: systemInfo.windowHeight
};
const query = this.$parent.createSelectorQuery();
query
.select(`.${this.className}`)
.boundingClientRect(data => {
if (data) {
this.width = data.width;
this.height = data.height;
this.left = data.left;
this.top = data.top;
}
})
.exec();
if (this.follow) {
const type = this.follow.split(',');
let isLeft, isRight, isTop, isBottom, isAll, num;
type.forEach(_ => {
if (_ === 'all') isAll = true;
if (_ === 'left') isLeft = true;
if (_ === 'right') isRight = true;
if (_ === 'top') isTop = true;
if (_ === 'bottom') isBottom = true;
});
if (isAll) isLeft = isRight = isTop = isBottom = true;
num = Math.round((this.width * this.followNum) / 100);
this.foll = {
isLeft,
isRight,
isTop,
isBottom,
num
};
}
},
methods: {
click() {
this.$emit('btnClick');
},
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);
WebkitTransform: translate(${this.offsetX}px, ${this.offsetY}px);
transition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'};
WebkitTransition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'};
`)
// #endif
},
touchend(e) {
if (!this.drag) return
this.move = false
if (!this.follow) return
const dot = e.changedTouches[0]
const {
left,
right,
top,
bottom
} = this.$options.safeArea
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 = right - this.width - this.foll.num - this.left
} else if (this.foll.isLeft) {
this.offsetX = this.foll.num - this.left
} else if (this.foll.isRight) {
this.offsetX = right - this.width - this.foll.num - this.left
}
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 = bottom - this.height - this.foll.num - this.top
} else if (this.foll.isTop) {
this.offsetY = this.foll.num - this.top
} else if (this.foll.isBottom) {
this.offsetY = bottom - this.height - this.foll.num - this.top
}
// #ifdef MP-WEIXIN
this.$emit("update:style", `
`
);
// #endif
},
touchend(e) {
if (!this.drag) return;
this.move = false;
if (!this.follow) return;
const dot = e.changedTouches[0];
const { left, right, top, bottom } = this.$options.safeArea;
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 = right - this.width - this.foll.num - this.left;
} else if (this.foll.isLeft) {
this.offsetX = this.foll.num - this.left;
} else if (this.foll.isRight) {
this.offsetX = right - this.width - this.foll.num - this.left;
}
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 = bottom - this.height - this.foll.num - this.top;
} else if (this.foll.isTop) {
this.offsetY = this.foll.num - this.top;
} else if (this.foll.isBottom) {
this.offsetY = bottom - this.height - this.foll.num - this.top;
}
// #ifdef MP-WEIXIN
this.$emit(
'update:style',
`
transform: 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'};
WebkitTransition: ${this.move ? 'none' : 'transform 0.2s ease-in-out'};
`)
// #endif
},
}
}
`
);
// #endif
}
}
};
</script>
<style scoped>
/* #ifdef MP-WEIXIN */
view {
height: 100%;
width: 100%;
display: inherit;
justify-content: 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;
}
/* #ifdef MP-WEIXIN */
view {
height: 100%;
width: 100%;
display: inherit;
justify-content: inherit;
align-items: inherit;
}
.navxfbox25 {
width: 68rpx;
height: 130rpx;
text-align: center;
padding-top: 16rpx;
box-sizing: border-box;
display: block;
text-decoration: none;
/* #endif */
.drag-button {
width: 68rpx;
height: 130rpx;
background: #1969f9;
border-radius: 10rpx;
position: fixed;
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 {
font-size: 48rpx;
color: #fff;
}
.icon-qqnavxf {
font-size: 48rpx;
color: #fff;
}
.texttmavsk {
font-size: 20rpx;
color: #fff;
height: 24rpx;
line-height: 24rpx;
}
</style>
\ No newline at end of file
.texttmavsk {
font-size: 20rpx;
color: #fff;
height: 24rpx;
line-height: 24rpx;
}
</style>
main.js
import App from './App'
import { request} from '@/util/util.js'
import { request } from '@/util/util.js'
import filters from '@/filters'
import router from '@/router/index.js'
import { RouterMount } from 'uni-simple-router'
import directive from '@/directive'
import { Ichunt_Api } from '@/util/api.js';
// #ifndef VUE3
import Vue from 'vue'
......@@ -18,16 +20,23 @@ Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
//自定义指令
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 {
function isPromise(obj) {
return (
!!obj &&
(typeof obj === "object" || typeof obj === "function") &&
typeof obj.then === "function"
);
return (!!obj && (typeof obj === "object" || typeof obj === "function") && typeof obj.then === "function");
}
// 统一 vue2 API Promise 化返回格式与 vue3 保持一致
......
pages/mine/shoporder.vue
<template>
<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="head row bothSide verCenter">
<view class="left row verCenter">
......@@ -154,7 +154,6 @@ export default {
});
return {
time: currentDate,
kfurl: 'https://url.cn/uia2no5Z?_type=wpa&amp;qidian=true',
arr: ['全部', '待付款', '待收货', '已完结订单'],
curr: 0,
list: [],
......
pages/mine/user.vue
......@@ -25,7 +25,7 @@
<text class="tt">我的优惠券</text>
<text class="tip"></text>
</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>
<text class="tt">我的客服</text>
</a>
......@@ -120,12 +120,14 @@ export default {
},
data() {
return {
kfqq_xk: '',
userInfo: {},
activity_list: []
};
},
onShow() {
this.getData();
this.kfqq_xk = this.$globalData.kefu;
},
methods: {
/**
......@@ -315,6 +317,7 @@ export default {
this.request(Api_Url + '/user/getUserType', 'POST', {}, true, true).then(res => {
if (res.err_code === 0) {
this.userInfo = res.data;
this.$globalData.kefu = res.data.kefu_url;
} else if (res.err_code === 11012) {
uni.navigateTo({
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