923 lines
23 KiB
Vue
923 lines
23 KiB
Vue
|
<template>
|
|||
|
|
<view class="resettle o-h">
|
|||
|
|
<view class="seach">
|
|||
|
|
<view class="neibox">{{ $t("MN_T_1") }}</view>
|
|||
|
|
<view class="seach_i">
|
|||
|
|
<u--input class="these" v-model="queryParams.memberCode">
|
|||
|
|
<template slot="suffix">
|
|||
|
|
<view class="seatch_r"
|
|||
|
|
><u-icon
|
|||
|
|
@click="getDataList"
|
|||
|
|
name="search"
|
|||
|
|
size="22"
|
|||
|
|
color="#fff"
|
|||
|
|
></u-icon
|
|||
|
|
></view>
|
|||
|
|
</template>
|
|||
|
|
</u--input>
|
|||
|
|
</view>
|
|||
|
|
<view class="neibox" @click="popShow = true">{{ $t("MY_ORD_50") }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="mainbox">
|
|||
|
|
<view class="main_top">
|
|||
|
|
<view
|
|||
|
|
class="top_flex"
|
|||
|
|
v-for="(item, index) in avaerInfoList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<img class="theimg" :src="item.value" alt="" />
|
|||
|
|
<view class="fle2">{{ item.name }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="main_bottom">
|
|||
|
|
<view
|
|||
|
|
class="scoll_main"
|
|||
|
|
ref="scrollMain"
|
|||
|
|
@touchstart="handleTouchStart"
|
|||
|
|
@touchmove="handleTouchMove"
|
|||
|
|
@touchend="handleTouchEnd"
|
|||
|
|
>
|
|||
|
|
<TreeChart4
|
|||
|
|
:style="{
|
|||
|
|
left: `${x}px`,
|
|||
|
|
top: `${y}px`,
|
|||
|
|
transform: `scale(${scale})`,
|
|||
|
|
}"
|
|||
|
|
:size="size"
|
|||
|
|
:json="data"
|
|||
|
|
:class="{ landscape: landscape.length }"
|
|||
|
|
@click-node="clickNode"
|
|||
|
|
@click-top="clickTop"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-popup
|
|||
|
|
:show="popShow"
|
|||
|
|
mode="right"
|
|||
|
|
@close="popShow = false"
|
|||
|
|
:closeOnClickOverlay="false"
|
|||
|
|
>
|
|||
|
|
<view class="rightPopup">
|
|||
|
|
<view class="popup_top">
|
|||
|
|
<view
|
|||
|
|
@click="
|
|||
|
|
() => {
|
|||
|
|
getDataList(), (popShow = false);
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
{{ $t("MY_ORD_50") }}
|
|||
|
|
</view>
|
|||
|
|
<view class="top_red" @click="popShow = false">{{
|
|||
|
|
$t("N_I_241")
|
|||
|
|
}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="typesBox">
|
|||
|
|
<view class="typeTitle" @click="listShow = true">{{
|
|||
|
|
$t("N_I_242")
|
|||
|
|
}}</view>
|
|||
|
|
<view class="choiceBox">
|
|||
|
|
<view class="inputbox" @click="listShow = true">
|
|||
|
|
<view class="">{{
|
|||
|
|
settleName ? settleName : $t("CK_KS_38")
|
|||
|
|
}}</view>
|
|||
|
|
<u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="typesBox">
|
|||
|
|
<view class="typeTitle">{{ $t("w_0353") }}</view>
|
|||
|
|
<view class="choiceBox">
|
|||
|
|
<u--input
|
|||
|
|
v-model="queryParams.level"
|
|||
|
|
style="
|
|||
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|||
|
|
border-color: rgba(255, 234, 233, 0.65) !important;
|
|||
|
|
"
|
|||
|
|
placeholder="请输入"
|
|||
|
|
border="surround"
|
|||
|
|
shape="circle"
|
|||
|
|
></u--input>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="popup_bottom">
|
|||
|
|
<view class="bottom_btn thebtn1" @click="clearAll">{{
|
|||
|
|
$t("w_0257")
|
|||
|
|
}}</view>
|
|||
|
|
<view
|
|||
|
|
class="bottom_btn thebtn2"
|
|||
|
|
@click="
|
|||
|
|
() => {
|
|||
|
|
getDataList(), (popShow = false);
|
|||
|
|
}
|
|||
|
|
"
|
|||
|
|
>
|
|||
|
|
{{ $t("w_0035") }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<u-picker
|
|||
|
|
:cancelText="$t('MN_F_31')"
|
|||
|
|
:confirmText="$t('MN_F_32')"
|
|||
|
|
@cancel="listShow = false"
|
|||
|
|
:show="listShow"
|
|||
|
|
ref="uPicker"
|
|||
|
|
:columns="memberSettlePeriodList"
|
|||
|
|
@confirm="confirm"
|
|||
|
|
keyName="settleDate"
|
|||
|
|
></u-picker>
|
|||
|
|
</u-popup>
|
|||
|
|
<u-popup
|
|||
|
|
:show="isPop"
|
|||
|
|
closeable
|
|||
|
|
mode="center"
|
|||
|
|
round="10"
|
|||
|
|
@close="isPop = false"
|
|||
|
|
>
|
|||
|
|
<view class="ispop_box">
|
|||
|
|
<view class="Poster1 ww100 flex-dbox">
|
|||
|
|
<view class="pop_top">
|
|||
|
|
<view class="pop_top">
|
|||
|
|
<view>
|
|||
|
|
<image
|
|||
|
|
crossorigin="anonymous"
|
|||
|
|
data-etype="image"
|
|||
|
|
:data-enode="popMould.avatarUrl"
|
|||
|
|
:src="'data:image/png;base64,' + popMould.avatarUrlBase64"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
class="poster1"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
<view>
|
|||
|
|
<image
|
|||
|
|
crossorigin="anonymous"
|
|||
|
|
data-etype="image"
|
|||
|
|
:data-enode="popMould.countryUrl2"
|
|||
|
|
:src="'data:image/png;base64,' + popMould.countryUrl2Base64"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
class="poster2"
|
|||
|
|
></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="top_right">
|
|||
|
|
<image
|
|||
|
|
crossorigin="anonymous"
|
|||
|
|
data-etype="image"
|
|||
|
|
:data-enode="popMould.settleCountryUrl2"
|
|||
|
|
:src="
|
|||
|
|
'data:image/png;base64,' + popMould.settleCountryUrl2Base64
|
|||
|
|
"
|
|||
|
|
mode="aspectFit"
|
|||
|
|
class="poster2"
|
|||
|
|
></image>
|
|||
|
|
<view style="margin-top: 18rpx">{{ $t("MN_F_18") }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pop_center">
|
|||
|
|
<view class="center_flex">
|
|||
|
|
<view class="c1">{{ $t("MN_T_1") }}</view>
|
|||
|
|
<view class="c2">{{ popMould.memberCode }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center_flex">
|
|||
|
|
<view class="c1">{{ $t("CK_KS_14") }}</view>
|
|||
|
|
<view class="c2">{{ popMould.name }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="center_flex">
|
|||
|
|
<view class="c1">{{ $t("MY_ORD_3") }}</view>
|
|||
|
|
<view class="c2">{{ popMould.payDate }}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="pop_bottom">
|
|||
|
|
<view class="b_flex">
|
|||
|
|
<view class="bt1 bt1-s">{{ $t("fn_011") }}</view>
|
|||
|
|
<view class="bt1">{{ $t("MN_F_T_453") }}(PV)</view>
|
|||
|
|
<view class="bt1">{{ $t("MN_F_T_657") }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="d-b-c border-b"
|
|||
|
|
v-for="(item, index) in popMould.levelMemberSettleList"
|
|||
|
|
:key="index"
|
|||
|
|
>
|
|||
|
|
<view class="btPlace" v-if="item.placeDept >= 4">
|
|||
|
|
{{ item.placeDept
|
|||
|
|
}}<span v-if="languages === 'en-US'">th</span> {{ "" }}
|
|||
|
|
{{ $t("fn_011") }}
|
|||
|
|
</view>
|
|||
|
|
<view class="btPlace" v-else>
|
|||
|
|
{{ item.placeDept }}{{ $t("fn_011") }}
|
|||
|
|
</view>
|
|||
|
|
<!-- <view class="btPlace">{{ $t('fn_010') }}{{ item.placeDept }}{{ $t('fn_011') }}</view> -->
|
|||
|
|
<view class="flex-1">
|
|||
|
|
<view class="b_flex">
|
|||
|
|
<view class="bt2">{{ $t("ENU_MENU_102") }}</view>
|
|||
|
|
<view class="bt2">{{ formatNum(item.newPv) }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b_flex">
|
|||
|
|
<view class="bt2">{{ $t("N_I_103") }}</view>
|
|||
|
|
<view class="bt2">{{ formatNum(item.sumPv) }}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="b_flex">
|
|||
|
|
<view class="bt2">{{ $t("fn_089") }}</view>
|
|||
|
|
<view class="bt2"
|
|||
|
|
>{{ formatNum(item.abalance) }}
|
|||
|
|
<text>/</text>
|
|||
|
|
{{ formatNum(item.bbalance) }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="btn_box">
|
|||
|
|
<view class="small-btn" @click="downImage('Poster1')">{{
|
|||
|
|
$t("S_C_45")
|
|||
|
|
}}</view>
|
|||
|
|
<view class="small-text-btn" @click="copyText()">{{
|
|||
|
|
$t("N_I_243")
|
|||
|
|
}}</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</u-popup>
|
|||
|
|
<Eposter
|
|||
|
|
width="750"
|
|||
|
|
height="1334"
|
|||
|
|
:list="list"
|
|||
|
|
backgroundColor="rgb(255, 255, 255)"
|
|||
|
|
@on-success="onSuccess"
|
|||
|
|
ref="Eposter"
|
|||
|
|
></Eposter>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import html2canvas from "html2canvas";
|
|||
|
|
import TreeChart4 from "@/components/architectures/resettleSO4.vue";
|
|||
|
|
import Eposter from "@/components/architectures/Poster.vue";
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
TreeChart4,
|
|||
|
|
Eposter,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
avaerInfoList: [],
|
|||
|
|
treeData: [],
|
|||
|
|
queryParams: {
|
|||
|
|
memberSettlePeriodId: "", //期数
|
|||
|
|
memberCode: "", //会员编号
|
|||
|
|
level: 3, //代数
|
|||
|
|
type: 4,
|
|||
|
|
},
|
|||
|
|
memberSettlePeriodList: [], //期数
|
|||
|
|
popShow: false,
|
|||
|
|
listShow: false,
|
|||
|
|
settleName: "",
|
|||
|
|
data: {},
|
|||
|
|
size: 0.8,
|
|||
|
|
landscape: [],
|
|||
|
|
languages: "",
|
|||
|
|
popMould: {},
|
|||
|
|
isPop: false,
|
|||
|
|
touchStartPosition1: {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
},
|
|||
|
|
touchStartPosition2: {
|
|||
|
|
x: 0,
|
|||
|
|
y: 0,
|
|||
|
|
},
|
|||
|
|
initialDistance: 0,
|
|||
|
|
list: [],
|
|||
|
|
startX: 0,
|
|||
|
|
startY: 0,
|
|||
|
|
x: 0, // 元素的x坐标
|
|||
|
|
y: 0, // 元素的y坐标
|
|||
|
|
scale: 1, // 元素的缩放比例
|
|||
|
|
initialX: 0, // 元素的初始x坐标
|
|||
|
|
initialY: 0, // 元素的初始y坐标
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad() {
|
|||
|
|
this.getAvarerInfo();
|
|||
|
|
// this.getDataList();
|
|||
|
|
this.languages = uni.getLocale();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
//复制文字
|
|||
|
|
copyText() {
|
|||
|
|
let self = this;
|
|||
|
|
let md = self.popMould;
|
|||
|
|
let text = `${self.$t("MN_T_1")}：${md.memberCode} \n${self.$t(
|
|||
|
|
"CK_KS_14"
|
|||
|
|
)}：${md.name} \n${self.$t("MY_ORD_3")}：${md.payDate} \n${self.$t(
|
|||
|
|
"MN_F_T_453"
|
|||
|
|
)}(PV) ${self.$t("MN_F_T_657")} \n`;
|
|||
|
|
if (md.levelMemberSettleList) {
|
|||
|
|
let addtext = "";
|
|||
|
|
md.levelMemberSettleList.forEach((item, index) => {
|
|||
|
|
addtext += `${self.$t("fn_010")}${item.placeDept}${self.$t(
|
|||
|
|
"fn_011"
|
|||
|
|
)}\n${self.$t("ENU_MENU_102")} ${item.newPv}\n${self.$t(
|
|||
|
|
"N_I_103"
|
|||
|
|
)} ${item.sumPv} \n${self.$t("fn_089")} ${self.formatNum(
|
|||
|
|
item.abalance
|
|||
|
|
)}/${self.formatNum(item.bbalance)}\n`;
|
|||
|
|
});
|
|||
|
|
text += addtext;
|
|||
|
|
}
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: text,
|
|||
|
|
success: function (res) {
|
|||
|
|
uni.getClipboardData({
|
|||
|
|
success: function (res) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: self.$t("MY_CK_29"),
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//下载图片
|
|||
|
|
downImage(elClass) {
|
|||
|
|
this.$refs.Eposter.createForElRect(elClass, false);
|
|||
|
|
},
|
|||
|
|
downloadImg() {
|
|||
|
|
let self = this;
|
|||
|
|
let element = document.querySelector(".Poster1");
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: self.$t("w_0413"),
|
|||
|
|
});
|
|||
|
|
html2canvas(element)
|
|||
|
|
.then(function (canvas) {
|
|||
|
|
let dataURL = canvas.toDataURL("image/jpeg");
|
|||
|
|
let link = document.createElement("a");
|
|||
|
|
link.style.display = "none";
|
|||
|
|
link.href = dataURL;
|
|||
|
|
link.download = "image.jpg";
|
|||
|
|
document.body.appendChild(link);
|
|||
|
|
link.click();
|
|||
|
|
document.body.removeChild(link);
|
|||
|
|
uni.showToast({
|
|||
|
|
icon: "none",
|
|||
|
|
title: self.$t("fn_056"),
|
|||
|
|
duration: 2000,
|
|||
|
|
});
|
|||
|
|
uni.hideLoading();
|
|||
|
|
})
|
|||
|
|
.catch(function (error) {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
uni.showModal({
|
|||
|
|
title: self.$t("w_0406"),
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onSuccess(val) {
|
|||
|
|
this.posterImg = val;
|
|||
|
|
this.downloadImg(this.posterImg);
|
|||
|
|
},
|
|||
|
|
// handleTouchStart(event) {
|
|||
|
|
// const touch1 = event.touches[0];
|
|||
|
|
// const touch2 = event.touches[1];
|
|||
|
|
// if (touch2) {
|
|||
|
|
// this.touchStartPosition1 = {
|
|||
|
|
// x: touch1.pageX,
|
|||
|
|
// y: touch1.pageY
|
|||
|
|
// };
|
|||
|
|
// this.touchStartPosition2 = {
|
|||
|
|
// x: touch2.pageX,
|
|||
|
|
// y: touch2.pageY
|
|||
|
|
// };
|
|||
|
|
// this.initialDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
|
|||
|
|
// console.log('--------------~~~~~~~~~~~~~~-------------');
|
|||
|
|
// console.log(this.initialDistance);
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// handleTouchMove(event) {
|
|||
|
|
// const touch1 = event.touches[0];
|
|||
|
|
// const touch2 = event.touches[1];
|
|||
|
|
// if (touch2) {
|
|||
|
|
// const currentDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
|
|||
|
|
// const scale = currentDistance / this.initialDistance;
|
|||
|
|
// this.size = this.size * scale;
|
|||
|
|
// }
|
|||
|
|
// console.log(touch1);
|
|||
|
|
// console.log(touch2);
|
|||
|
|
// },
|
|||
|
|
// handleTouchEnd() {
|
|||
|
|
// this.touchStartPosition1 = {
|
|||
|
|
// x: 0,
|
|||
|
|
// y: 0
|
|||
|
|
// };
|
|||
|
|
// this.touchStartPosition2 = {
|
|||
|
|
// x: 0,
|
|||
|
|
// y: 0
|
|||
|
|
// };
|
|||
|
|
// this.initialDistance = 0;
|
|||
|
|
// },
|
|||
|
|
clickNode(e) {
|
|||
|
|
let self = this;
|
|||
|
|
if (e) {
|
|||
|
|
self._post(
|
|||
|
|
"member/manage/member-structure/get-url-base64",
|
|||
|
|
{
|
|||
|
|
countryUrl2: e.countryUrl2,
|
|||
|
|
settleCountryUrl2: e.settleCountryUrl2,
|
|||
|
|
avatarUrl: e.avatarUrl,
|
|||
|
|
},
|
|||
|
|
(res) => {
|
|||
|
|
self.popMould = e;
|
|||
|
|
self.popMould.countryUrl2Base64 = res.countryUrl2Base64;
|
|||
|
|
self.popMould.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
|
|||
|
|
self.popMould.avatarUrlBase64 = res.avatarUrlBase64;
|
|||
|
|
self.isPop = true;
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
clickTop(e) {
|
|||
|
|
let that = this;
|
|||
|
|
if (e) {
|
|||
|
|
that.queryParams.memberCode = e.memberCode;
|
|||
|
|
that.getDataList();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
confirm(e) {
|
|||
|
|
this.queryParams.memberSettlePeriodId = e.value[0].pkId;
|
|||
|
|
this.settleName = e.value[0].settleDate;
|
|||
|
|
this.listShow = false;
|
|||
|
|
},
|
|||
|
|
getAvarerInfo() {
|
|||
|
|
let self = this;
|
|||
|
|
self._get("member/api/member-structure/get-avatar-info", {}, (res) => {
|
|||
|
|
self.avaerInfoList = res.data;
|
|||
|
|
});
|
|||
|
|
self._get(
|
|||
|
|
"member/api/member-structure/get-member-settle-period",
|
|||
|
|
{},
|
|||
|
|
(res) => {
|
|||
|
|
self.memberSettlePeriodList = [res.data];
|
|||
|
|
let memberSettlePeriodLists = res.data;
|
|||
|
|
self.queryParams.memberSettlePeriodId =
|
|||
|
|
memberSettlePeriodLists[0].pkId;
|
|||
|
|
self.getDataList();
|
|||
|
|
}
|
|||
|
|
);
|
|||
|
|
},
|
|||
|
|
getDataList() {
|
|||
|
|
let self = this;
|
|||
|
|
let params = this.queryParams;
|
|||
|
|
self._get("/member/api/member-structure/az-framework", params, (res) => {
|
|||
|
|
self.data = res.data[0];
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
clearAll() {
|
|||
|
|
this.popShow = false;
|
|||
|
|
this.settleName = "";
|
|||
|
|
this.queryParams = {
|
|||
|
|
memberSettlePeriodId: "", //期数
|
|||
|
|
memberCode: "", //会员编号
|
|||
|
|
level: 3, //代数
|
|||
|
|
type: 4,
|
|||
|
|
};
|
|||
|
|
this.getDataList();
|
|||
|
|
},
|
|||
|
|
handleTouchStart(event) {
|
|||
|
|
// 记录元素的初始位置
|
|||
|
|
this.initialX = event.changedTouches[0].clientX;
|
|||
|
|
this.initialY = event.changedTouches[0].clientY;
|
|||
|
|
},
|
|||
|
|
handleTouchMove(event) {
|
|||
|
|
if (event.touches.length === 2) {
|
|||
|
|
// 计算拖动的距离
|
|||
|
|
const deltaX = event.touches[0].clientX - event.touches[1].clientX;
|
|||
|
|
const deltaY = event.touches[0].clientY - event.touches[1].clientY;
|
|||
|
|
// 更新元素的位置和缩放比例
|
|||
|
|
this.x += deltaX;
|
|||
|
|
this.y += deltaY;
|
|||
|
|
// 根据滑动距离控制缩放比例
|
|||
|
|
this.scale += deltaY / 100;
|
|||
|
|
} else {
|
|||
|
|
// 计算拖动的距离
|
|||
|
|
const deltaX = event.changedTouches[0].clientX - this.initialX;
|
|||
|
|
const deltaY = event.changedTouches[0].clientY - this.initialY;
|
|||
|
|
// 更新元素的位置和缩放比例
|
|||
|
|
this.x += deltaX;
|
|||
|
|
this.y += deltaY;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 更新元素的初始位置为最后一次拖动的结束位置
|
|||
|
|
this.initialX = event.touches[0].clientX;
|
|||
|
|
this.initialY = event.touches[0].clientY;
|
|||
|
|
},
|
|||
|
|
handleTouchEnd(event) {
|
|||
|
|
// 在这里记录第一次拖动的结束位置，以便第二次拖动时使用
|
|||
|
|
this.initialX = event.changedTouches[0].clientX;
|
|||
|
|
this.initialY = event.changedTouches[0].clientY;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.flex-dbox {
|
|||
|
|
height: 100%;
|
|||
|
|
flex: 1;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.resettle::v-deep .u-popup__content {
|
|||
|
|
// max-height: 80vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop_bottom {
|
|||
|
|
height: 100%;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
|
|||
|
|
.btPlace {
|
|||
|
|
height: 220rpx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
padding: 0 12rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop_bottom::-webkit-scrollbar {
|
|||
|
|
/*滚动条整体样式*/
|
|||
|
|
/*高宽分别对应横竖滚动条的尺寸*/
|
|||
|
|
display: block;
|
|||
|
|
width: 5rpx !important;
|
|||
|
|
height: 1rpx !important;
|
|||
|
|
-webkit-appearance: default-button;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop_bottom::-webkit-scrollbar-thumb {
|
|||
|
|
/*滚动条里面小方块*/
|
|||
|
|
border-radius: 10px;
|
|||
|
|
background-color: #909399;
|
|||
|
|
// background-image: -webkit-linear-gradient(45deg,
|
|||
|
|
// rgba(255, 255, 255, 0.2) 25%,
|
|||
|
|
// transparent 25%,
|
|||
|
|
// transparent 50%,
|
|||
|
|
// rgba(255, 255, 255, 0.2) 50%,
|
|||
|
|
// rgba(255, 255, 255, 0.2) 75%,
|
|||
|
|
// transparent 75%,
|
|||
|
|
// transparent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop_bottom::-webkit-scrollbar-track {
|
|||
|
|
/*滚动条里面轨道*/
|
|||
|
|
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|||
|
|
background: #ededed;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ispop_box {
|
|||
|
|
padding: 27rpx;
|
|||
|
|
padding-top: 60rpx;
|
|||
|
|
width: 670rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
overflow: hidden;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
max-height: 80vh;
|
|||
|
|
|
|||
|
|
.pop_top {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.poster1 {
|
|||
|
|
height: 88rpx;
|
|||
|
|
width: 88rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.poster2 {
|
|||
|
|
width: 88rpx;
|
|||
|
|
height: 54rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.top_right {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop_center {
|
|||
|
|
.center_flex {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
|
|||
|
|
.c1 {
|
|||
|
|
width: 20%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.c2 {
|
|||
|
|
width: 80%;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
background: #f3f3f3;
|
|||
|
|
border: 2rpx solid #eeeeee;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 10rpx 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pop_bottom {
|
|||
|
|
margin: 20rpx 0;
|
|||
|
|
border-top: 2rpx solid #eeeeee;
|
|||
|
|
border-top: 2rpx solid #eeeeee;
|
|||
|
|
|
|||
|
|
.b_flex {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.bt1 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 22rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bt2 {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 22rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
background: #f3f3f3;
|
|||
|
|
border: 2rpx solid #eeeeee;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 12rpx;
|
|||
|
|
margin: 11rpx 18rpx;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn_box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.operate-btnboxs {
|
|||
|
|
padding: 29rpx 26rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
|
|||
|
|
.d-c-c {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.operate-btn {
|
|||
|
|
width: 64rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
margin: 5rpx;
|
|||
|
|
// background: #F2F2F2;
|
|||
|
|
border-radius: 5rpx;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rightPopup {
|
|||
|
|
width: 645rpx;
|
|||
|
|
|
|||
|
|
.popup_top {
|
|||
|
|
padding: 25rpx;
|
|||
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #333333;
|
|||
|
|
|
|||
|
|
.top_red {
|
|||
|
|
color: #fb3024;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup_bottom {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
|
|||
|
|
.bottom_btn {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thebtn1 {
|
|||
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.thebtn2 {
|
|||
|
|
background-color: #fb3024;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.typesBox {
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
|
|||
|
|
.typeTitle {
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.choiceBox {
|
|||
|
|
padding: 0 12rpx;
|
|||
|
|
display: flex;
|
|||
|
|
margin-top: 17rpx;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.inputbox {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 20rpx 32rpx;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex_btn {
|
|||
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 14rpx 48rpx;
|
|||
|
|
border-radius: 26rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #333333;
|
|||
|
|
margin: 17rpx 5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timesbtn {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.selectbtn {
|
|||
|
|
background-color: #c8161d;
|
|||
|
|
color: #ffffff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.seach {
|
|||
|
|
background: #fff;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: 20rpx 23rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
border-bottom: 2rpx solid #eee;
|
|||
|
|
z-index: 99;
|
|||
|
|
|
|||
|
|
.these {
|
|||
|
|
border: none;
|
|||
|
|
padding: 10rpx 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.seach_i {
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
border-radius: 34rpx;
|
|||
|
|
background: #fff;
|
|||
|
|
flex: 1;
|
|||
|
|
background: #f5f6f8;
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.neibox {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-family: PingFang SC;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.seatch_r {
|
|||
|
|
background: #fb3024;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
padding: 8rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.mainbox {
|
|||
|
|
padding: 26rpx 22rpx;
|
|||
|
|
|
|||
|
|
.main_top {
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
padding: 20rpx 4rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
|
|||
|
|
.top_flex {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 15rpx 20rpx;
|
|||
|
|
// justify-content: center;
|
|||
|
|
width: 98rpx;
|
|||
|
|
|
|||
|
|
.theimg {
|
|||
|
|
width: 92rpx;
|
|||
|
|
height: 92rpx;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex2 {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-family: Source Han Sans CN;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main_bottom {
|
|||
|
|
width: 100%;
|
|||
|
|
height: calc(100vh - 720rpx);
|
|||
|
|
margin-top: 25rpx;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
padding: 38rpx 0;
|
|||
|
|
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scoll_main {
|
|||
|
|
width: 700rpx;
|
|||
|
|
height: calc(100vh - 720rpx);
|
|||
|
|
overflow: hidden;
|
|||
|
|
// overflow: scroll;
|
|||
|
|
// overflow-x: auto;
|
|||
|
|
// overflow: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|