713 lines
19 KiB
Vue
713 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="d-b-c topx-box">
|
|||
|
|
<view class="f26 gray6 mr10">{{$t('MN_T_1')}}</view>
|
|||
|
|
<view class="search-box">
|
|||
|
|
<input type="text" name="">
|
|||
|
|
<view class="icon-search"><u-icon name="search" color="#ffffff" size="30rpx"></u-icon></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="f26 gray6 ml10">{{$t('MY_ORD_50')}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center-box">
|
|||
|
|
<view class="example-box" v-if="example&&example!=''">
|
|||
|
|
<view class="example-item d-c d-c-c" v-for="(item,index) in example" :key="index">
|
|||
|
|
<image class="example-ava" :src="item.value" mode=""></image>
|
|||
|
|
<view class="example-name">{{item.name}}</view>
|
|||
|
|
<!-- <view class="example-name tc">Municipal level agency</view> -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="operate-btnboxs left">
|
|||
|
|
<view class="d-c-c mb10">
|
|||
|
|
<button class="f22 operate-btn" @click="changeTop(50)">
|
|||
|
|
<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/arr-top.png"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
<view class="d-c-c">
|
|||
|
|
<button class="f22 operate-btn" @click="changeLeft(50)">
|
|||
|
|
<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/arr-right.png"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<button class="f22 operate-btn m-0-10" @click="changeTop(-50)">
|
|||
|
|
<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/arr-down.png"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<button class="f22 operate-btn" @click="changeLeft(-50)">
|
|||
|
|
<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/arr-left.png"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="d-c-c operate-btnboxs right">
|
|||
|
|
<button class="f22 mr10 operate-btn-r" @click="changeSize(0.05)">
|
|||
|
|
<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/fangda.png"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<button class="f22 mr10 operate-btn-r" @click="changeSize(-0.05)">
|
|||
|
|
<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/suoxiao.png"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
<button class="f22 operate-btn-r" @click="restTree()">
|
|||
|
|
<u-icon width="48rpx" height="48rpx" name="/static/icon/tree/reset.png"></u-icon>
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
<view class="scroll-box">
|
|||
|
|
<TreeChart :left="left" :top="top" :size="size" :json="listData"
|
|||
|
|
:class="{ landscape: landscape.length }" @click-node="clickNode" />
|
|||
|
|
</view>
|
|||
|
|
<template v-if="isPop">
|
|||
|
|
<view class="pop-bg"></view>
|
|||
|
|
<view class="pop-usercontent">
|
|||
|
|
<view class="d-e-c">
|
|||
|
|
<u-icon name="close" size="32rpx" color="#999" @click="isPop = false"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
<view class="Poster1 posterbox">
|
|||
|
|
<view class="d-b-c mb20">
|
|||
|
|
<view class="d-b-c">
|
|||
|
|
<view>
|
|||
|
|
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.avatarUrl"
|
|||
|
|
:src="popMould.avatarUrl" mode="aspectFit" class="pop-userava Poster1"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="ml20">
|
|||
|
|
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.countryUrl2"
|
|||
|
|
:src="popMould.countryUrl2" mode="aspectFit" class="pop-country Poster1"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="mb10">
|
|||
|
|
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.settleCountryUrl2"
|
|||
|
|
:src="popMould.settleCountryUrl2" mode="aspectFit" class="pop-country Poster1"></image>
|
|||
|
|
</view>
|
|||
|
|
<view data-enode="结算国家" class="f24 gray3 Poster1" style="z-index: 1">
|
|||
|
|
{{$t('MN_F_18')}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<view class="pb20 border-b">
|
|||
|
|
<view class="d-s-c mb20">
|
|||
|
|
<view data-enode="会员编号" class="f24 gray3 content-name Poster1" style="z-index: 1">
|
|||
|
|
<view class="f24 gray3 content-name">会员编号</view>
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.memberCode" class="content-box Poster1 text-ellipsis-2"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
{{popMould.memberCode}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="d-s-c mb20">
|
|||
|
|
<view data-enode="会员姓名" class="f24 gray3 Poster1 content-name" style="z-index: 1">
|
|||
|
|
会员姓名
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.name" class="content-box Poster1 text-ellipsis-2"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
{{popMould.name}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="d-s-c">
|
|||
|
|
<view data-enode="支付时间" class="f24 gray3 Poster1 content-name" style="z-index: 1">
|
|||
|
|
支付时间
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.payDate" class="content-box text-ellipsis-2"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
{{popMould.payDate}}
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pt20">
|
|||
|
|
<!-- 复购结余 -->
|
|||
|
|
<view class="d-b-c mb20 Poster1">
|
|||
|
|
<view data-enode="业绩(PV)" class="flex-1 tc text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
业绩(PV)
|
|||
|
|
</view>
|
|||
|
|
<view data-enode="左区" class="flex-1 tc text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
左区
|
|||
|
|
</view>
|
|||
|
|
<view data-enode="右区" class="flex-1 tc text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
右区
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box-item Poster1">
|
|||
|
|
<view data-enode="真实新增" class="flex-1 content-box text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
真实新增
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.leftRealNewPv"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.leftRealNewPv}}
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.rightRealNewPv"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.rightRealNewPv}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box-item Poster1">
|
|||
|
|
<view data-enode="首购新增" class="flex-1 content-box text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
首购新增
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.leftFirstPurchaseAdd"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.leftFirstPurchaseAdd}}
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.rightFirstPurchaseAdd"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.rightFirstPurchaseAdd}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box-item Poster1">
|
|||
|
|
<view data-enode="复购新增" class="flex-1 content-box text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
复购新增
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.leftRepeatPurchaseSurplus"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.leftRepeatPurchaseSurplus}}
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.rightRepeatPurchaseSurplus"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.rightRepeatPurchaseSurplus}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box-item Poster1">
|
|||
|
|
<view data-enode="真实累计" class="flex-1 content-box text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
真实累计
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.leftRealTotal"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.leftRealTotal}}
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.rightRealTotal"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.rightRealTotal}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box-item Poster1">
|
|||
|
|
<view data-enode="首购累计" class="flex-1 content-box text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
首购累计
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.leftFirstTotal"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.leftFirstTotal}}
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.rightFirstTotal"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.rightFirstTotal}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box-item Poster1">
|
|||
|
|
<view data-enode="复购累计" class="flex-1 content-box text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
复购累计
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.leftRepeatPurchaseTotal"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.leftRepeatPurchaseTotal}}
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.rightRepeatPurchaseTotal"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.rightRepeatPurchaseTotal}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box-item Poster1">
|
|||
|
|
<view data-enode="首购结余" class="flex-1 content-box text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
首购结余
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.leftFirstSurplus"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.leftFirstSurplus}}
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.rightFirstSurplus"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.rightFirstSurplus}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="content-box-item Poster1">
|
|||
|
|
<view data-enode="复购结余" class="flex-1 content-box text-ellipsis Poster1"
|
|||
|
|
style="z-index: 1">
|
|||
|
|
复购结余
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.leftRepeatPurchaseSurplus"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.leftRepeatPurchaseSurplus}}
|
|||
|
|
</view>
|
|||
|
|
<view :data-enode="popMould.rightRepeatPurchaseSurplus"
|
|||
|
|
class="flex-1 content-box text-ellipsis Poster1" style="z-index: 1">
|
|||
|
|
{{popMould.rightRepeatPurchaseSurplus}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="d-b-c">
|
|||
|
|
<view class="small-btn flex-1 mr20" @click="downImage('Poster1')">{{$t('S_C_45')}}</view>
|
|||
|
|
<view class="small-text-btn flex-1" @click="copyText()">{{$t('N_I_243')}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<!-- <movable-area class="scroll-box">
|
|||
|
|
<movable-view scale out-of-bounds :scale-value="0.5" :scale-max="20" :scale-min="0.1" direction="all">
|
|||
|
|
<view class="bg-white pt30 mt0 pr" v-if="listData != null">
|
|||
|
|
<TreeChart :left="left" :top="top" :json="listData" :class="{ landscape: landscape.length }" />
|
|||
|
|
</view>
|
|||
|
|
</movable-view>
|
|||
|
|
</movable-area>
|
|||
|
|
-->
|
|||
|
|
</view>
|
|||
|
|
<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess"
|
|||
|
|
ref="Eposter">
|
|||
|
|
</Eposter>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import TreeChart from "@/components/treeParent/resettleSO.vue";
|
|||
|
|
import Eposter from '@/components/evils-el-poster/Poster.vue';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
TreeChart,
|
|||
|
|
Eposter
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
list: [],
|
|||
|
|
detailModel: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
top: 0,
|
|||
|
|
left: 0,
|
|||
|
|
startData: {
|
|||
|
|
clientX: '',
|
|||
|
|
|
|||
|
|
clientY: ''
|
|||
|
|
},
|
|||
|
|
moveX: 0,
|
|||
|
|
moveY: 0,
|
|||
|
|
touch: {},
|
|||
|
|
example: [],
|
|||
|
|
landscape: [],
|
|||
|
|
listData: null,
|
|||
|
|
size: 1.0,
|
|||
|
|
downImg: [],
|
|||
|
|
isPop: false,
|
|||
|
|
popMould: {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.getExample();
|
|||
|
|
this.getData();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
copyText() {
|
|||
|
|
let self = this;
|
|||
|
|
let md = self.popMould;
|
|||
|
|
let text = `
|
|||
|
|
会员编号：${md.memberCode} \n
|
|||
|
|
会员姓名：${md.name}
|
|||
|
|
支付时间：${md.payDate} \n
|
|||
|
|
业绩(PV) 左区 右区 \n
|
|||
|
|
真实新增 ${md.leftRealNewPv} ${md.rightRealNewPv} \n
|
|||
|
|
首购新增 ${md.leftFirstPurchaseAdd} ${md.rightFirstPurchaseAdd} \n
|
|||
|
|
复购新增 ${md.leftRepeatPurchaseSurplus} ${md.rightRepeatPurchaseSurplus} \n
|
|||
|
|
真实累计 ${md.leftRealTotal} ${md.rightRealTotal} \n
|
|||
|
|
首购累计 ${md.leftFirstTotal} ${md.rightFirstTotal} \n
|
|||
|
|
复购累计 ${md.leftRepeatPurchaseTotal} ${md.rightRepeatPurchaseTotal} \n
|
|||
|
|
首购结余 ${md.leftFirstSurplus} ${md.rightFirstSurplus} \n
|
|||
|
|
复购结余 ${md.leftRepeatPurchaseSurplus} ${md.rightRepeatPurchaseSurplus} \n
|
|||
|
|
`;
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: text,
|
|||
|
|
success: function(res) {
|
|||
|
|
uni.getClipboardData({
|
|||
|
|
success: function(res) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: self.$t('MY_CK_29')
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
downloadImg() {
|
|||
|
|
let self = this;
|
|||
|
|
let n = 0;
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: self.$t('w_0413')
|
|||
|
|
});
|
|||
|
|
self.downImg = [this.posterImg];
|
|||
|
|
self.downImg.forEach((item, index) => {
|
|||
|
|
// 图片保存到本地
|
|||
|
|
uni.saveImageToPhotosAlbum({
|
|||
|
|
filePath: item,
|
|||
|
|
success(data) {
|
|||
|
|
n++;
|
|||
|
|
if (n == self.downImg.length) {
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: 'none',
|
|||
|
|
title: self.$t('fn_056'),
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail(err) {
|
|||
|
|
if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请允许访问相册后重试',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 1000
|
|||
|
|
});
|
|||
|
|
setTimeout(() => {
|
|||
|
|
uni.openSetting();
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
uni.hideLoading();
|
|||
|
|
uni.showModal({
|
|||
|
|
title: self.$t('w_0406')
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
},
|
|||
|
|
complete(res) {
|
|||
|
|
console.log('complete');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onError(err) {
|
|||
|
|
console.log(`err`, err);
|
|||
|
|
},
|
|||
|
|
onSuccess(val) {
|
|||
|
|
this.posterImg = val;
|
|||
|
|
this.downloadImg(this.posterImg);
|
|||
|
|
},
|
|||
|
|
downImage(elClass) {
|
|||
|
|
this.$refs.Eposter.createForElRect(elClass, false);
|
|||
|
|
},
|
|||
|
|
changeLeft(e) {
|
|||
|
|
this.left += e;
|
|||
|
|
},
|
|||
|
|
changeTop(e) {
|
|||
|
|
this.top += e;
|
|||
|
|
},
|
|||
|
|
changeSize(e) {
|
|||
|
|
this.size += e;
|
|||
|
|
},
|
|||
|
|
restTree() {
|
|||
|
|
this.left = 0;
|
|||
|
|
this.top = 0;
|
|||
|
|
this.size = 1.0;
|
|||
|
|
},
|
|||
|
|
clickNode(e) {
|
|||
|
|
let self = this;
|
|||
|
|
if (e) {
|
|||
|
|
console.log(11111);
|
|||
|
|
self.popMould = e;
|
|||
|
|
self.isPop = true;
|
|||
|
|
|
|||
|
|
// self._post('member/manage/member-structure/get-url-base64', {
|
|||
|
|
// avatarUrl: e.avatarUrl,
|
|||
|
|
// countryUrl2: e.countryUrl2,
|
|||
|
|
// settleCountryUrl2: e.settleCountryUrl2
|
|||
|
|
// }, res => {
|
|||
|
|
// self.popMould.avatarUrl = res.avatarUrlBase64;
|
|||
|
|
// self.popMould.countryUrl2 = res.countryUrl2Base64;
|
|||
|
|
// self.popMould.settleCountryUrl2 = res.settleCountryUrl2Base64;
|
|||
|
|
// })
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getExample() {
|
|||
|
|
let self = this;
|
|||
|
|
self._get('/member/api/member-structure/get-avatar-info', {}, res => {
|
|||
|
|
self.example = res.data;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getData() {
|
|||
|
|
let self = this;
|
|||
|
|
self._get('/member/api/member-structure/az-framework', {
|
|||
|
|
memberSettlePeriodId: 935,
|
|||
|
|
memberCode: 'CN30720208',
|
|||
|
|
level: 6,
|
|||
|
|
type: 1
|
|||
|
|
}, res => {
|
|||
|
|
self.listData = res.data[0];
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 触摸touch事件
|
|||
|
|
|
|||
|
|
start(e) {
|
|||
|
|
//@touchstart 触摸开始
|
|||
|
|
|
|||
|
|
this.transition = '.1s';
|
|||
|
|
|
|||
|
|
this.startData.clientX = e.changedTouches[0].clientX; //手指按下时的X坐标
|
|||
|
|
|
|||
|
|
this.startData.clientY = e.changedTouches[0].clientY; //手指按下时的Y坐标
|
|||
|
|
},
|
|||
|
|
end(e) {
|
|||
|
|
//@touchend触摸结束
|
|||
|
|
|
|||
|
|
this.moveX = 0; //触摸事件结束恢复原状
|
|||
|
|
this.moveY = 0; //触摸事件结束恢复原状
|
|||
|
|
|
|||
|
|
this.transition = '.5s';
|
|||
|
|
},
|
|||
|
|
move(event) {
|
|||
|
|
//@touchmove触摸移动
|
|||
|
|
|
|||
|
|
let touch = event.touches[0]; //滑动过程中，手指滑动的坐标信息 返回的是Objcet对象
|
|||
|
|
|
|||
|
|
this.touch = touch;
|
|||
|
|
|
|||
|
|
let data = touch.clientX - this.startData.clientX;
|
|||
|
|
let datay = touch.clientY - this.startData.clientY;
|
|||
|
|
|
|||
|
|
if (touch.clientX < this.startData.clientX) {
|
|||
|
|
//向左移动
|
|||
|
|
|
|||
|
|
if (data < -375) {
|
|||
|
|
data = -375;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (touch.clientY < this.startData.clientY) {
|
|||
|
|
//向左移动
|
|||
|
|
|
|||
|
|
if (datay < -375) {
|
|||
|
|
datay = -375;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (touch.clientX > this.startData.clientX) {
|
|||
|
|
//向右移动
|
|||
|
|
if (data > 375) {
|
|||
|
|
data = 375;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (touch.clientY > this.startData.clientY) {
|
|||
|
|
//向右移动
|
|||
|
|
if (datay > 375) {
|
|||
|
|
datay = 375;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.moveX = data;
|
|||
|
|
this.moveY = datay;
|
|||
|
|
this.top += this.moveY / 40;
|
|||
|
|
this.left += this.moveX / 40;
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.center-box {
|
|||
|
|
touch-action: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center-box {
|
|||
|
|
padding: 26rpx 22rpx;
|
|||
|
|
|
|||
|
|
.example-box {
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
padding: 22rpx 0 28rpx 0;
|
|||
|
|
height: 312rpx;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.example-item {
|
|||
|
|
width: 20%;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
padding: 10rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.example-ava {
|
|||
|
|
width: 104rpx;
|
|||
|
|
height: 104rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.example-name {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #666;
|
|||
|
|
word-break: break-all;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.topx-box {
|
|||
|
|
background-color: #fff;
|
|||
|
|
padding: 20rpx 31rpx 20rpx 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 510rpx;
|
|||
|
|
height: 65rpx;
|
|||
|
|
background: #F5F6F8;
|
|||
|
|
border-radius: 33rpx;
|
|||
|
|
padding: 9rpx 12rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
flex: 1;
|
|||
|
|
line-height: 65rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
padding: 0 15rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon-search {
|
|||
|
|
width: 48rpx;
|
|||
|
|
height: 48rpx;
|
|||
|
|
background-color: #EE252A;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operate-btnboxs {
|
|||
|
|
position: absolute;
|
|||
|
|
z-index: 101;
|
|||
|
|
padding: 29rpx 26rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operate-btnboxs.left {
|
|||
|
|
left: 22rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operate-btnboxs.right {
|
|||
|
|
right: 22rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operate-btn {
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
border-radius: 5rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operate-btn-r {
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
background: #F2F2F2;
|
|||
|
|
border-radius: 5rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-box {
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 33rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
overflow: hidden;
|
|||
|
|
height: calc(100vh - 104rpx - 362rpx - 72rpx);
|
|||
|
|
// display: flex;
|
|||
|
|
// justify-content: center;
|
|||
|
|
// align-items: cen;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop-bg {
|
|||
|
|
z-index: 103;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop-usercontent {
|
|||
|
|
width: 704rpx;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
position: fixed;
|
|||
|
|
left: 23rpx;
|
|||
|
|
top: 40rpx;
|
|||
|
|
z-index: 104;
|
|||
|
|
padding: 20rpx 27rpx 20rpx 24rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.pop-userava {
|
|||
|
|
width: 104rpx;
|
|||
|
|
height: 104rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop-country {
|
|||
|
|
width: 88rpx;
|
|||
|
|
height: 54rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.posterbox {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-box {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 52rpx;
|
|||
|
|
background: #F3F3F3;
|
|||
|
|
border: 1rpx solid #EEEEEE;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
line-height: 52rpx;
|
|||
|
|
padding: 0 15rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-name {
|
|||
|
|
width: 120rpx;
|
|||
|
|
margin-right: 16rpx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-box-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 17rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333;
|
|||
|
|
|
|||
|
|
.content-box {
|
|||
|
|
margin: 0 18rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.small-btn {
|
|||
|
|
width: 312rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
background: #FB3024;
|
|||
|
|
border-radius: 34rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.small-text-btn {
|
|||
|
|
width: 312rpx;
|
|||
|
|
height: 72rpx;
|
|||
|
|
border: 1px solid #FB3024;
|
|||
|
|
border-radius: 34rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #FB3024;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</style>
|