Mapping.vue

<template>
	<view v-if="Signincenterstate" ref="Signincenter" style="position: absolute; z-index: 999; top: 0;"
		:style="{height: windowHeight +'px',width:isShowPc?$base.isPcWidth + 'px':'100%'}">
		
        <view style="visibility: hidden; margin-top: -1600upx;">{{countCome}}</view>

		<view class="uni-share full-width" :style="{height: windowHeight +'px',width:$tool.isPc()?$base.isPcWidth + 'px':'100%',
			left:$tool.isPc()?'calc(50% - '+ (($base.isPcWidth  ) / 2 ) +'px)':'0upx'}" @touchmove.stop="myCatchTouch"
			v-if="(e_active == 3 || e_active == 4) && text == 'typeface'"  >
			<view style="position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 997; opacity: 0.8;"
				@click.stop.prevent="cancel('share')"></view>
			<view style="position: fixed; bottom: 0; left: 0; width: 100%; height: 600upx; z-index: 999;background: #292933;"
			  :style="{width:$tool.isPc()?$base.isPcWidth + 'px':'100%',
			  left:$tool.isPc()?'calc(50% - '+ (($base.isPcWidth  ) / 2 ) +'px)':'0upx'}">
				<scroll-view style="width: calc(100% - 30upx); margin: auto; height:598upx; overflow: hidden;"
					scroll-y scroll-with-animation>
					<view v-for="(item, index) in typefacedata"
						:style="{'font-family':item.textlong == true ? item.key : item.key + 'ttf','color': data.itemList[data.cidx].font_dict_id == item.id ? '#64DD17 !important' : 'none'}"
						@click="typefaceClick(item, index)" :key="index"
						style="font-size: 36upx; color: #FFFFFF; padding:22upx 0 21upx; text-align: center;">
						<text style="font-size: 20upx;">
							<text style="font-size: 32upx;"
								:style="{'color': data.itemList[data.cidx].font_dict_id == item.id ? '#64DD17 !important' : '#fff'}">
								 壳小站
							</text>
							<text v-if="item.remark != ''">
								{{item.long == true ? '' : '(点击加载)'}}
							</text>
							<text v-if="item.remark != ''" style="color: #64DD17;">
								{{item.textlong == false ? '(下载失败,点击重新下载)' : ''}}
							</text>
						</text>
				   </view>
				</scroll-view>
			</view>
		</view>
		
		<view class="uni-share full-width" :style="{height: windowHeight +'px'}" @touchmove.stop="myCatchTouch"
			@change="change" v-if="(e_active == 3 || e_active == 4) && text != 'typeface'">
			<view :style="{width:$tool.isPc()?$base.isPcWidth + 'px':'100%',
			left:$tool.isPc()?'calc(50% - '+ (($base.isPcWidth  ) / 2 ) +'px)':'0upx'}" style="position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 997; 
			background: linear-gradient(0deg, #1B294F, #4E2761, #E73231);opacity: 0.2;" @click.stop.prevent="cancel('share')"></view>
			<view style="position: fixed; bottom: 0;  height: 22%; z-index: 999;">
				<view style="position: fixed;bottom: 0;  " :style="{width:$tool.isPc()?$base.isPcWidth + 'px':'100%',
				 left:$tool.isPc()?'calc(50% - '+ (($base.isPcWidth  ) / 2 ) +'px)':'0upx',}">
					<view style="width: 100%; height: 90upx; display: flex; flex-direction: row;">
						<view
							style="width: 240upx; height: 100%; background: #292933; border-top-right-radius: 60upx;display: flex; flex-direction: row; ">
							<image v-if="bg_text_color"
								style="width: 47upx; height: 47upx; display: block;margin-top: 28upx; margin-left:40upx;"
								src="../../static/img/icon_qiehuan_one.png" mode="aspectFill" @click="bgtextcolor">
							</image>
							<image v-else
								style="width: 47upx; height: 47upx; display: block;margin-top: 28upx; margin-left:40upx;"
								src="../../static/img/icon_qiehuan.png" mode="aspectFill" @click="bgtextcolor"></image>
							<view style="width: 80upx; margin-top: 22upx;margin-left: 50upx;" @click="typefaceshow('share')">
								<text style="font-size: 34upx; color: #FFFFFF;"><!-- 字体 --> {{$i18n.messages[$i18n.locale]['字体']}}</text>
							</view>	
						</view>
					</view>
					<view style="background: #292933;">
						<view style="display: flex;align-items: center; justify-items: center; border-bottom: 2upx solid #000000;height: 98upx;">
							<view style="width: calc(100% - 160upx); height: 57upx; background: rgb(255,255,255,0.1); margin: 21upx 41upx 21upx 21upx; border-radius: 10upx;">
								<input :fixed="true" :auto-height="true" :show-confirm-bar="false" :cursor-spacing="73"
									:adjust-position="false" type="text" maxlength="24" @input="textInput"
									@focus="focusTextarea" @blur="blurTextarea" v-model="data.currentText"
									:placeholder="$i18n.messages[$i18n.locale]['请先输入文字内容']"
									style="font-size: 34upx; font-weight: 400; height: 57upx; line-height: 57upx; padding: 0upx 0 0upx 20upx; color: #FFFFFF;" />
							</view>
							<view style="width: 1px; height: 28upx; background: #FFFFFF;"></view>
							<image style="width: 43upx; height: 30upx; display: block;margin: auto;"
								src="../../static/icon/icon_determine.png" mode="aspectFill"
								@click.stop.prevent="cancel('share')"></image>
						</view>
						<view style="display: flex; height: 100upx; padding: 28upx 0 21upx; align-items: center;">
							<!-- 颜色 开始-->
							<scroll-view style="box-sizing: border-box; white-space: nowrap;
						     margin-left: 35upx; margin-right: 35upx;margin-bottom: 30upx; margin-top: 35upx; width: calc(100% - 70upx);"
								scroll-x scroll-with-animation>
								<view style="text-align: center; display: inline-block; padding-left: 20upx;"
									v-for="(item,index) in colorList" :key="index" @click.stop="workcolor(item.color)">
									<view v-if="data.itemList[data.cidx]">
										<view v-if="data.itemList[data.cidx].font_color == item.color && !bg_text_color"
											style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #64DD17; border-radius: 50%;"
											:style="{background:item.color}"></view>
										<view
											v-else-if="data.itemList[data.cidx].under_color == item.color && bg_text_color"
											style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #64DD17; border-radius: 50%;"
											:style="{background:item.color}"></view>
										<view v-else
											style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #FFFFFF; border-radius: 50%;"
											:style="{background:item.color}"></view>
									</view>
									<view v-else
										  style="width: 60upx; height: 60upx; background: #000000; border: 4upx solid #FFFFFF; border-radius: 50%;"
										 :style="{background:item.color}"></view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="e_active == 24">
			<view style="position: absolute; bottom:0; left: 0; height: 100%; z-index: 998;
			  background: linear-gradient(0deg, #1B294F, #4E2761, #E73231); opacity: 0.8;"
			   :style="{width:isShowPc?$base.isPcWidth + 'px':'100%'}"
			   @click.stop.prevent="cancel('share')">
			</view>
			<view style="position: fixed; background: #FFFFFF; top:calc((100% - 621upx) / 2); left:calc((100% - 560upx) / 2); 
			  z-index:1000; width: 560upx; min-height: 600upx; border-radius: 12upx;">
				<image style="width: 560upx; height: 300upx; display: block;margin: auto;"
					src="../../static/image_p/remind_picture.png" mode="aspectFill"></image>
				<view @click.stop='addItem' style="width: 300upx; height: 100upx; background: #854AC2; border-radius: 10upx;
				  margin: 150upx auto 50upx; display: flex; justify-content: center;">
					<image src="../../static/upload.png" mode=""
						style="width: 60upx; height: 60upx; display: inline-block; margin: auto 10upx;"></image>
					<view style="color:#FFFFFF;line-height:100upx;">{{$i18n.messages[$i18n.locale]['上传']}}</view>
				</view>
			</view>
		</view>
		
		<!-- 贴图/模板形状 -->
		<view
			v-if="e_active == 22 || e_active == 1 || e_active == 2  || e_active == 23 || e_active == 25 || e_active == 99"
			class="uni-share" :style="{height: windowHeight +'px'}"
			style="position: relative;width: 100%;">
			<!-- 遮罩 -->
			<view style="position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 997; 
			background: linear-gradient(0deg, #1B294F, #4E2761, #E73231);opacity: 0.8;"
				:style="{width:$tool.isPc()?$base.isPcWidth + 'px':'100%',left:$tool.isPc()?'calc(50% - '+ ($base.isPcWidth / 2 ) +'px)':'0upx'}"
				@click.stop.prevent="cancel('share')" @touchmove.stop.prevent="myCatchTouch"></view>
			<view :style="{width:$tool.isPc()?$base.isPcWidth - 80 + 'px':'calc(100% - 120upx)',
		       left:$tool.isPc()?'calc(50% - '+ (($base.isPcWidth  ) / 2 ) +'px)':'0upx'}"
				style="position: fixed; top:0; left: 0;  height:100%; z-index: 999; overflow: hidden;">
				<view style="position: absolute; bottom: 0upx; left: 0; 
					height: 100%; width: 120upx; z-index: 999;  
					background: #1A1D33; overflow: hidden;">
					<view style="width: 120upx; height: 188upx;">
						
						<view :style="{ height: headheight + 'px'}" style="width: 100%; z-index: 9999;">
							<view class="back" @tap="cancel('share')">
								<image src="../../static/recommend/icon_back.png" mode="aspectFit" style="width: 42upx; height: 42upx; 
								margin-left: 20upx;" :style="{ marginTop: menuButtonInfoTop + 10 + 'px'}"></image>
							</view>
						</view>
						
					</view>
					<!-- 一级分类 -->
					<view style="width: 120upx; " :style="{height: (windowHeight - 100 ) +'px'}"
						v-if="e_active == 2 || e_active == 23  || e_active == 99">
						<scroll-view class="scroll-container" :style="{height: (windowHeight - 100 ) +'px'}" scroll-y
							scroll-with-animation v-if="brands.length > 0" :scroll-into-view="'s' + currentIndex">
							<view :class="['scroll-item', { activeone: index == currentId }]" :id="'s' + index"
								v-for="(item, index) in brands" :key="index" @tap="handleScroll(index,item)">
								<image
									style="width: 60upx; height: 60upx; display: block;margin:auto; padding: 18upx;z-index:1 "
									:src="index == currentId ? item.icon_click : item.icon" mode="aspectFill">
								</image>
								<view v-if="item.update_flag == 1" style="width: 20upx; height: 20upx;
								       margin-left: 80upx;
								       background: #ff0000; 
								        z-index:10;
								        border-radius: 50%;
								   		margin-top: -80upx;
								        position: absolute;">
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view style="position: absolute; bottom: 0upx; left: 120upx; height: 100%; width: calc(100% - 120upx); z-index: 999; overflow: hidden; background: #282932;">
					<!-- 轮播图 -->
					<view style="height: 210upx; width: 100%;background: #282932;position: relative;z-index: 9;">
						<view style="width: calc(100% - 40upx); z-index: 99; margin:auto; padding: 30upx 0;">
							<swiper class="uni-swiper-wrapper" :autoplay="true" :interval="3000" :duration="1000"
								:indicator-dots="true" :indicator-active-color="'#ffffff'"
								style="height: 165upx; width: 100%; border-radius: 10upx; overflow: hidden; margin:auto;">
								<swiper-item v-for="(item, index) in Adlists" :key="index" class="full-width">
									<image :src="item.content + '?x-oss-process=image/resize,lfit,w_375'"
										mode="aspectFill" class="full-width full-height"
										style="border-radius: 10upx; background: #007AFF;"></image>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<!-- 二级分类 -->
					<view id="classification" v-if="e_active == 2 || e_active == 23 "
						style="width: 100%; position: relative; z-index: 99; background: #282932;">
						<view style="overflow: hidden;" v-if="material_series_list.length > 0">
							<view :class="['material-series-scroll-item', 
							{ 'material-series-scroll-item-active': item.id == material_series_currentId }]" :id="'s' + index"
								v-for="(item, index) in material_series_list" :key="index"
								@tap="material_series_handleScroll(index,item)">
								{{item.alias_title}}
							</view>
						</view>
					</view>
					<!-- 贴图/壁纸 -->
					<view v-if="e_active == 2 ||e_active == 23 || e_active == 99 "
						:style="{height: (windowHeight - 60) +'px',background:backColorVal}" style="width: 100%; position: relative;" >
						<refresh ref="refresh" @interrupt="interrupt" @pushToInterrupt="pushToInterrupt"
							@finished="finished" @scrolltolower="g" :scrollHeight="(windowHeight - 60)"
							:scrollTop="scrollViewTop" @scroll="scroll">
							<template slot="top">
								<view style="color: #FFFFFF;position: absolute;  top: 0;width: 100%; text-align: center;"
									 :style="'height:' + 40 + 'px; line-height:' + 40 + 'px;'">{{tip}}</view>
							</template>
							<template slot="content">
								<view style="width:100%; margin: auto; height:calc(100% - 20upx); ">
									<view style="float: left; width: calc(100% / 3); margin: 10upx 0 10upx;"
										v-for="(item, index) in datalist" :key="index" @click="Worksdetail(item)">
										<view style="width: 139upx; height: 255upx; margin: auto; position: relative;">
											<image
												style="width: 139upx; height: 255upx; margin: auto; border-radius: 14px; overflow: hidden;"
												:src="(item.image ? item.image:item.url) + '?x-oss-process=image/resize,lfit,w_112'"
												mode="aspectFit"></image>
										</view>
									</view>
									<view class="align-center"
										style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
										v-if="datalist.length == 0">
										<span class="iconfont icon-wushuju"
											style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
										<view
											style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">
											{{$i18n.messages[$i18n.locale]['没有更多数据了']}}
										</view>
									</view>
								</view>
							</template>
							<template slot="bottom">
								<view>{{$i18n.messages[$i18n.locale]['没有更多数据了']}}</view>
							</template>
						</refresh>
					</view>
					<!-- 颜色 -->
					<view v-if="e_active == 25" style="width: 100%; height: calc(100% - 210upx); position: relative;">
						<refresh @interrupt="interrupt" @pushToInterrupt="pushToInterrupt" @finished="finished"
							@scrolltolower="g" :scrollHeight="(windowHeight - 60)">
							<template slot="content">
								<view style="width:100%; margin: auto; height:calc(100% - 40upx); ">
									<view style="float: left; width: calc(100% / 3); margin: 10upx 0 10upx;"
										v-for="(item, index) in datalist" :key="index" @click="bgColorAssembly(item)">
										<view style="width: 139upx; height: 255upx; margin: auto; position: relative;">
											<view
												style="width: 139upx; height: 255upx; margin: auto; border-radius: 14px; overflow: hidden;"
												:style="'background:' + item.color"></view>
										</view>
									</view>
									<view class="align-center"
										style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
										v-if="datalist.length == 0">
										<span class="iconfont icon-wushuju"
											style="font-size: 100upx; text-align: center; color: #B2B2B2;"></span>
										<view
											style="color: #B2B2B2; text-align: center; line-height: 50upx;font-size: 24upx;">
											{{$i18n.messages[$i18n.locale]['没有更多数据了']}}
										</view>
									</view>
								</view>
							</template>
							<template slot="bottom">
								<view>
									{{$i18n.messages[$i18n.locale]['没有更多数据了']}}
								</view>
							</template>
						</refresh>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import loadFont from '@/util/loadFont.js'
	import userService from '@/service/UserService';
	import homeservice from '@/service/homeservice.js';
	import uniPopup from './common/uni-popup/uni-popup.vue'
	import refresh from '@/components/xing-refresh/xing-refresh.vue';

	var app = getApp(); // 当前APP实例
	export default {
		components: {
			uniPopup,
			refresh
		},
		computed: {},
		props: {
			windowHeight: {
				type: Number,
				default: 563
			},
			brands: {
				type: Array,
			},
			material_series_list: {
				type: Array,
			},
			e_active: {
				type: Number,
			},
			pixelRate: {
				type: Number,
			},
			currentId: {
				type: Number,
			},
			material_series_currentId: {
				type: Number,
			},
			backgroundColor: {
				type: Boolean,
			},
			classificationHeight: {
				type: Number,
				default: 0
			},
			currentIndex: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				scrollViewTop: 0, //滚动距离
				oldScrollViewTop: 0, //旧数据到顶部位置
				queryPage: {
					s: 'Material.list',
					page: 1,
					per_page: 50,
					is_revise: 1, //可调整
					is_edit: 1, //模板属性
					total: 0,
					is_new: null, //最新
					is_hot: null, //热门
					material_category_id: "", //
					material_series_id: "",
				},
				Material_categorydatalist: [], //作品、贴图列表
				datalist: [], //作品、贴图列表
				Material_category: [], //贴图分类
				tip: '',
				Signincenterstate: false,
				data: null,
				bg_text_color: null,
				inputBottom: 0,
				text: 'modify',
				textlist: [{
						text: '仓耳小丸子',
						url: 'url("https://tprint.refinecolor.com/text/CangErXiaoWanZi.ttf")',
						fontname: '仓耳小丸子',
						lineheight: 1.26,
						long: false,
						textlong: null
					},
					{
						text: '千图小兔体',
						url: 'url("https://tprint.refinecolor.com/text/Qiantu_rabbit.ttf")',
						fontname: '千图小兔体',
						lineheight: 1.2,
						long: false,
						textlong: null
					},
					{
						text: '站酷酷黑',
						url: 'url("https://tprint.refinecolor.com/text/Stand_cool_black.ttf")',
						fontname: '站酷酷黑',
						lineheight: 1.14,
						long: false,
						textlong: null
					},
					{
						text: '站酷快乐体',
						url: 'url("https://tprint.refinecolor.com/text/Standing_cool_happy_body.ttf")',
						fontname: '站酷快乐体',
						lineheight: 1.14,
						long: false,
						textlong: null
					},
					{
						text: '站酷庆科黄油体',
						url: 'url("https://tprint.refinecolor.com/text/ZhankuQingkeButterBody.ttf")',
						fontname: '站酷庆科黄油体',
						lineheight: 1.18,
						long: false,
						textlong: null
					},
					{
						text: '字体视界法棍体',
						url: 'url("https://tprint.refinecolor.com/text/Font_horizon_method_stick_body.ttf")',
						fontname: '字体视界法棍体',
						lineheight: 1.14,
						long: false,
						textlong: null
					},
				],
				typefacedata: [],
				Adlists: [],
				colorList: [{
						color: '#000000',
						index: '01'
					},
					{
						color: '#FFFFFF',
						index: '01'
					},
					{
						color: '#7f2a3f',
						index: '01'
					}, {
						color: '#e24187',
						index: '03'
					}, {
						color: '#f5305d',
						index: '04'
					}, {
						color: '#de4156',
						index: '05'
					}, {
						color: '#fe42cd',
						index: '06'
					}, {
						color: '#f48b9a',
						index: '07'
					}, {
						color: '#ec8191',
						index: '08'
					}, {
						color: '#f9aeb5',
						index: '09'
					}, {
						color: '#f21d5f',
						index: '10'
					}, {
						color: '#cc3739',
						index: '11'
					}, {
						color: '#dd5047',
						index: '12'
					}, {
						color: '#e24187',
						index: '13'
					}, {
						color: '#fa6449',
						index: '14'
					}, {
						color: '#e8495b',
						index: '15'
					}, {
						color: '#fb7162',
						index: '16'
					}, {
						color: '#f6afd1',
						index: '17'
					}, {
						color: '#fbb6b9',
						index: '18'
					}, {
						color: '#db6f27',
						index: '21'
					}, {
						color: '#ed702e',
						index: '22'
					}, {
						color: '#f99627',
						index: '23'
					}, {
						color: '#eb8926',
						index: '24'
					}, {
						color: '#edc3aa',
						index: '25'
					}, {
						color: '#e1d8cf',
						index: '26'
					}, {
						color: '#deebc5',
						index: '27'
					}, {
						color: '#fccdc7',
						index: '28'
					}, {
						color: '#dbbdd2',
						index: '29'
					}, {
						color: '#e8a321',
						index: '31'
					}, {
						color: '#db6f27',
						index: '32'
					}, {
						color: '#edb74b',
						index: '33'
					}, {
						color: '#e8b741',
						index: '34'
					}, {
						color: '#fef052',
						index: '35'
					}, {
						color: '#ffd684',
						index: '36'
					}, {
						color: '#e2d958',
						index: '37'
					}, {
						color: '#e2e5d0',
						index: '38'
					}, {
						color: '#ba9431',
						index: '41'
					}, {
						color: '#797f5d',
						index: '42'
					}, {
						color: '#536d50',
						index: '43'
					}, {
						color: '#d8b53f',
						index: '44'
					}, {
						color: '#d4c172',
						index: '45'
					}, {
						color: '#32b75c',
						index: '46'
					}, {
						color: '#90D15B',
						index: '47'
					}, {
						color: '#c5d52a',
						index: '48'
					}, {
						color: '#e8e098',
						index: '49'
					}, {
						color: '#1b6661',
						index: '50'
					}, {
						color: '#3b4f4d',
						index: '51'
					}, {
						color: '#336559',
						index: '52'
					}, {
						color: '#01776e',
						index: '53'
					}, {
						color: '#2e7662',
						index: '54'
					}, {
						color: '#439877',
						index: '55'
					}, {
						color: '#0ba066',
						index: '56'
					}, {
						color: '#318488',
						index: '57'
					}, {
						color: '#6fd3c9',
						index: '58'
					}, {
						color: '#b9d3ac',
						index: '59'
					}, {
						color: '#0e898e',
						index: '61'
					}, {
						color: '#317194',
						index: '62'
					}, {
						color: '#029bc7',
						index: '63'
					}, {
						color: '#2a8ec9',
						index: '64'
					}, {
						color: '#57c9d3',
						index: '65'
					}, {
						color: '#65b3df',
						index: '67'
					}, {
						color: '#8bd0d7',
						index: '68'
					}, {
						color: '#4B4881',
						index: '69'
					}, {
						color: '#77A1CB',
						index: '70'
					}, {
						color: '#3051BB',
						index: '71'
					}, {
						color: '#2E41A7',
						index: '72'
					}, {
						color: '#704CAE',
						index: '73'
					}, {
						color: '#385BD1',
						index: '74'
					}, {
						color: '#E0DFED',
						index: '75'
					}, {
						color: '#A6BDE9',
						index: '76'
					}, {
						color: '#B3B9DD',
						index: '77'
					}, {
						color: '#7942A8',
						index: '81'
					}, {
						color: '#8F52BA',
						index: '82'
					}, {
						color: '#9680C0',
						index: '83'
					}, {
						color: '#CD82BB',
						index: '84'
					}, {
						color: '#8E2A80',
						index: '85'
					}, {
						color: '#E24CB0',
						index: '86'
					}, {
						color: '#CC2A75',
						index: '87'
					}, {
						color: '#ED89D2',
						index: '88'
					}, {
						color: '#F562B6',
						index: '89'
					}, {
						color: '#8B3B32',
						index: '91'
					}, {
						color: '#593A35',
						index: '92'
					}, {
						color: '#7A3C2D',
						index: '93'
					}, {
						color: '#7D2E21',
						index: '94'
					}, {
						color: '#935A47',
						index: '95'
					}, {
						color: '#A05047',
						index: '96'
					}, {
						color: '#E39476',
						index: '97'
					}, {
						color: '#4E3F3C',
						index: '98'
					}, {
						color: '#5A4939',
						index: '99'
					}, {
						color: '#EDE8EC',
						index: '100'
					}, {
						color: '#C0813A',
						index: '101'
					}, {
						color: '#77432E',
						index: '102'
					}, {
						color: '#C17748',
						index: '103'
					}, {
						color: '#C7AC39',
						index: '104'
					}, {
						color: '#DBA179',
						index: '107'
					}, {
						color: '#D8D3D0',
						index: '109'
					}, {
						color: '#091A22',
						index: '120'
					}, {
						color: '#CA3A32',
						index: '121'
					}, {
						color: '#FAAB60',
						index: '122'
					}, {
						color: '#CADEAD',
						index: '123'
					}, {
						color: '#C7D858',
						index: '124'
					}, {
						color: '#F264D0',
						index: '125'
					}, {
						color: '#F77ADC',
						index: '126'
					}, {
						color: '#FAE7D9',
						index: '131'
					}, {
						color: '#E6D9D1',
						index: '132'
					}, {
						color: '#EBCDB1',
						index: '133'
					}, {
						color: '#E2DCCC',
						index: '134'
					}, {
						color: '#FAD9D2',
						index: '135'
					}, {
						color: '#E1C2BD',
						index: '136'
					}, {
						color: '#E5BBCF',
						index: '137'
					}, {
						color: '#F7BACC',
						index: '138'
					}, {
						color: '#E9CBC1',
						index: '139'
					}, {
						color: '#EBB89F',
						index: '140'
					}, {
						color: '#E6D09E',
						index: '141'
					}, {
						color: '#E2B78D',
						index: '142'
					}, {
						color: '#D1E4EB',
						index: '143'
					}, {
						color: '#B9D9EE',
						index: '144'
					}, {
						color: '#CFD0E2',
						index: '145'
					}, {
						color: '#CECFF0',
						index: '146'
					}, {
						color: '#D6C3E3',
						index: '147'
					}, {
						color: '#E3F0C5',
						index: '163'
					}, {
						color: '#DAD792',
						index: '164'
					}, {
						color: '#D4D4BC',
						index: '166'
					}, {
						color: '#C0D0AB',
						index: '167'
					}, {
						color: '#D7C6A8',
						index: '169'
					}, {
						color: '#D9E9E8',
						index: '171'
					}, {
						color: '#B4E0C7',
						index: '172'
					}, {
						color: '#D6E2BA',
						index: '173'
					}, {
						color: '#E3E5D0',
						index: '174'
					}, {
						color: '#C1D39A',
						index: '175'
					}, {
						color: '#AFE4E6',
						index: '178'
					}, {
						color: '#92DDE2',
						index: '179'
					}, {
						color: '#DBE0E6',
						index: '182'
					}, {
						color: '#8FBFF0',
						index: '183'
					}, {
						color: '#9DCDE1',
						index: '185'
					}, {
						color: '#BBC4BF',
						index: '196'
					}, {
						color: '#E484A9',
						index: '198'
					}, {
						color: '#BBC4BF',
						index: 'GG3'
					}, {
						color: '#494A4C',
						index: 'CG9'
					}, {
						color: '#C2CEDA',
						index: 'BG1'
					}, {
						color: '#C1C3D3',
						index: 'BG3'
					}, {
						color: '#8696A3',
						index: 'BG5'
					}, {
						color: '#646A76',
						index: 'BG7'
					}, {
						color: '#415361',
						index: 'BG9'
					}, {
						color: '#DFDEE3',
						index: 'WG.5'
					}, {
						color: '#CBC6CC',
						index: 'WG1'
					}, {
						color: '#B6B0B2',
						index: 'WG2'
					}, {
						color: '#C5BBBA',
						index: 'WG3'
					}, {
						color: '#958A92',
						index: 'WG4'
					}, {
						color: '#837477',
						index: 'WG5'
					}, {
						color: '#8A7E7E',
						index: 'WG6'
					}, {
						color: '#4D4342',
						index: 'WG9'
					}
				],
				e: 0, //弹窗类型
				type: 0,
				queryCollectionPage: {
					page: 1,
					limit: 25
				},
				historyQueryPage: {
					goods_id: "", //产品Id
					s: 'Works.myList',
				}, //历史对象
				isWork: false,   //是否作品
				isShowPc: false, //是否pc显示
				backColorVal: "",
				countCome: 0,    //进来次数
				headheight:60,
				menuButtonInfoTop:14,
			};
		},
		mounted() {},
		onLoad() {},
		methods: {

			//过滤字符串
			filterTextInput(textStr) {
				let content = textStr.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\,\?\<\>\。\，\-\——\=\;\@\！\!\+\$\%\*\(\)\#\&\*]/g, '');
				let that = this;
				setTimeout(function() {
					that.data.currentText = content;
					that.$emit('textInput', content)
				}, 0);
			},

			//解决滚动穿透问题
			myCatchTouch() {
				return
			},

			cancel() {
				this.$emit('change', {
					show: false
				})
				this.Signincenterstate = false
			},

			scroll(e) {
				if (e.detail.scrollTop > 1) {
					this.oldScrollViewTop = e.detail.scrollTop - 0.01
				}
			},

			//图库贴纸
			open(item) {
				if (item.val) {
					this.backColorVal = item.val
				} else {
					this.backColorVal = "";
				}
			    //console.log(this.backColorVal);
				this.isShowPc = this.$tool.isPc();
				if (this.e != item.e) {
					this.datalist = [];
				}
				this.isWork = false; //是否作品
				this.type = item.e;
				this.e = item.e;
				this.scrollViewTop = 0;
				//壁纸广告KEY：diy_back，贴纸广告KEY：diy_banner
				if (item.e == 2) { //图库贴纸
					homeservice.queryListPhone({
						s: 'Ad.list',
						ad_position_key: 'diy_banner',
						machine_id: item.machine_id
					}).then(result => {
						this.Adlists = result
					}).catch(err => {});
				} else if (item.e == 23 || item.e == 24 || item.e == 25) { //壁纸
					homeservice.queryListPhone({
						s: 'Ad.list',
						ad_position_key: 'diy_back',
						machine_id: item.machine_id
					}).then(result => {
						this.Adlists = result
					}).catch(err => {});
				} else if (item.e == 99) {
					homeservice.queryListPhone({
						s: 'Ad.list',
						ad_position_key: 'history_works',
						machine_id: item.machine_id
					}).then(result => {
						this.Adlists = result
					}).catch(err => {});
				}
				let loadData = false;
				if (item.e == 23 || item.e == 2) {
					if (this.queryPage.material_category_id == item.queryPage.material_category_id) {
						if (this.queryPage.material_series_id != item.queryPage.material_series_id) {
							loadData = true;
						}
					} else {
						loadData = true;
					}
					if (this.datalist == null || this.datalist.length == 0) {
						loadData = true;
					}
				} else if (item.e == 99) {
					if (this.currentId != item.queryPage.currentId || this.currentId == -1) {
						loadData = true;
					}
					if (this.datalist == null || this.datalist.length == 0) {
						loadData = true;
					}
				}

				let that = this
				if (item.e == 2 || item.e == 23) {
					this.queryPage = {
						s: item.queryPage.s,
						page: item.queryPage.page, //分页
						per_page: item.queryPage.per_page, //分页
						is_revise: item.queryPage.is_revise, //可调整
						is_edit: item.queryPage.is_edit, //模板属性
						machine_id: item.queryPage.machine_id, //设备id
						goods_category_id: item.queryPage.goods_category_id, //星形接口列表增加，产品分类参数
						material_category_id: item.queryPage.material_category_id, //贴图壁纸选择值一级分类
						material_series_id: item.queryPage.material_series_id, //贴图壁纸选择值二级分类
						is_new: item.queryPage.is_new, //最新
						is_hot: item.queryPage.is_hot, //热门
						goods_id: item.queryPage.goods_id, //商品id
						is_under: item.queryPage.is_under, //贴图是否为背景图
						partner_id: item.queryPage.partner_id, //代理
						goods_feature_id: this.$base.goods_feature_id
					}
				}
				if (item.e == 2) { //贴图
					if (loadData) {
						this.queryPage.page == 1;
						this.queryPage.is_under = '0' //贴图标识
						this.queryPage.surface_color_series_id = this.$base.surfaceData.surface_color_series_id //色系编号
						this.getShapeList()
						this.scrollViewTop = 0;
						this.oldScrollViewTop = 0;
					} else {
						this.scrollViewTop = this.oldScrollViewTop
						this.$nextTick(() => {
							this.$refs.refresh.scrollTopPostion(this.scrollViewTop);
						});
					}
				} else if (item.e == 23) { //壁纸
					if (loadData) {
						this.queryPage.page == 1;
						this.queryPage.is_under = '1' //壁纸标识
						this.queryPage.surface_color_series_id = this.$base.surfaceData.surface_color_series_id //色系编号
						this.getShapeList()
						this.scrollViewTop = 0;
						this.oldScrollViewTop = 0;
					} else {
						this.scrollViewTop = this.oldScrollViewTop
						this.$nextTick(() => {
							this.$refs.refresh.scrollTopPostion(this.scrollViewTop);
						});
					}
				} else if (item.e == 24 || item.e == 25) {
					//if (loadData) {
					this.queryPage = item.queryPage
					this.getShapeList()
					this.scrollViewTop = 0;
					this.oldScrollViewTop = 0;
				} else if (item.e == 99) {
					if (item.e.currentId == 0) {
						this.isWork = true
					}
					this.datalist = [];
					this.scrollViewTop = 0;
					this.oldScrollViewTop = 0;
					this.type = 99;
					this.queryCollectionPage = {
						page: 1,
						limit: 30
					}
					this.item = item;
					this.getExcellentMaterial(item.queryPage)
				}
				this.Signincenterstate = true
				if (this.$base.typefacedata.length > 0) {
					this.typefacedata = this.$base.typefacedata
					console.log(this.$base.typefacedata)
				}
			},

			getExcellentMaterialMore(e) {
				if (e.currentId == 0) {
					this.isWork = true;
				} else {
					uni.showLoading({
						title: this.$i18n.messages[this.$i18n.locale]['正在加载中'],
					})
					let url = ''
					if (e.currentId == 1) url = '/douyin/Material/getMeMaterial'
					else if (e.currentId == 2) url = '/douyin/Material/getMeCollection'
					else if (e.currentId == 3) url = '/douyin/Material/getFollowMaterials'
					this.$http.post(url, this.queryCollectionPage).then(result => {
						if (result.data == null || result.data == "" || result.data.data == null) {

						} else {
							this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data.data);
							this.datalist = this.datalist.concat(result.data.data);
							this.queryCollectionPage.page += 1;
							if (Math.ceil(result.total / result.per_page) <= this.queryCollectionPage.page) {
								return setTimeout(() => {
									uni.showToast({
										title: this.$i18n.messages[this.$i18n.locale]['没有更多数据了'],
										icon: 'none'
									});
								}, 500);
							}
						}
						uni.hideLoading();
					}).catch(err => {

						uni.hideLoading();
					});
				}
			},

			getExcellentMaterial(e) {
				this.datalist = []
				uni.showLoading({
					title: this.$i18n.messages[this.$i18n.locale]['正在加载中'],
				})
				let url = ''
				this.currentId = e.currentId;
				if (e.currentId == 0) {
					this.isWork = true;
					this.historyQueryPage.goods_id = this.item.goods_id;
					homeservice.WorksList(this.historyQueryPage).then(result => {
						this.datalist = result.data
						uni.hideLoading();
					}).catch(err => {
						uni.hideLoading();
					});
				} else {
					if (e.currentId == 1) url = '/douyin/Material/getMeMaterial'
					else if (e.currentId == 2) url = '/douyin/Material/getMeCollection'
					else if (e.currentId == 3) url = '/douyin/Material/getFollowMaterials'
					this.$http.post(url, this.queryCollectionPage).then(result => {
						if (result.data == null || result.data == "" || result.data.data == null) {

						} else {
							this.Material_categorydatalist = result.data.data
							this.datalist = result.data.data;
							this.queryCollectionPage.page += 1;
							uni.hideLoading();
							this.tip = '';
						}
					}).catch(err => {
						uni.hideLoading();
					});
				}
			},

			//文字弹框
			inittext(data) {
				let that = this
				this.Signincenterstate = true
				this.data = data.data
				this.bg_text_color = data.bg_text_color
				this.text = data.text
				this.countCome++;
				if (this.text == 'typeface') {
					this.typeface('typeface')
					this.inputBottom = 'none'
				}
			},

			//文字弹框
			inittextSelect(data) {
				this.data = data.data
				this.countCome++;
				console.log("dvfdsv111")
			},
			
			picture() {
				this.Signincenterstate = true
			},

			addItem(item) {
				this.$emit('addItem', item)
				this.Signincenterstate = false
			},

			//贴图列表
			getShapeList() {
				this.datalist = []
				uni.showLoading({
					title: this.$i18n.messages[this.$i18n.locale]['正在加载中'],
					mask: true
				})
				homeservice.WorksListPhone(this.queryPage).then(result => {
					this.Material_categorydatalist = result.data
					this.datalist = result.data
					uni.hideLoading();
					this.tip = '';
				}).catch(err => {
					uni.hideLoading();
				});
			},

			handleScroll(index, item) {
				let e = {
					index: index,
					item: item
				}
				this.$emit('handleScroll', e)
			},

			material_series_handleScroll(index, item) {
				let e = {
					index: index,
					item: item
				}
				this.$emit('material_series_handleScroll', e)
			},

			bgColorClick(item) {
				this.$emit('bgColorClick')
			},

			bgColorAssembly(item) {
				this.$emit('bgColorAssembly', item.color)
				this.Signincenterstate = false
			},

			Worksdetail(item) {
				item.isWork = this.isWork;
				this.$emit('Worksdetail', item)
				this.Signincenterstate = false
			},

			empty() {
				this.$emit('empty')
				this.Signincenterstate = false
			},

			g(e) {
				if (this.type == 99) {
					this.getExcellentMaterialMore(this.item.queryPage)
				} else {
					uni.showLoading({
						title: this.$i18n.messages[this.$i18n.locale]['正在加载中'],
						mask: true
					})
					homeservice.WorksListPhone(this.queryPage).then(result => {
						this.Material_categorydatalist = this.Material_categorydatalist.concat(result.data)
						this.datalist = this.datalist.concat(result.data)
						this.queryPage.page += 1;
						if (Math.ceil(result.total / result.per_page) <= this.queryPage.page) {
							return setTimeout(() => {
								uni.showToast({
									title: this.$i18n.messages[this.$i18n.locale]['没有更多数据了'],
									icon: 'none'
								});
							}, 500);
						}
						uni.hideLoading();
					}).catch(err => {
						uni.hideLoading();
					});
				}
			},

			interrupt(e) {
				this.tip = this.$i18n.messages[this.$i18n.locale]['刷新中'] //'刷新中'
				//模拟发送请求
				setTimeout(e, 500);
				this.tip = this.$i18n.messages[this.$i18n.locale]['刷新成功'];
				this.queryPage.page = 1
				//this.getShapeList()
				if (this.type == 99) {
					this.queryCollectionPage.page = 1;
					this.getExcellentMaterial(this.item.queryPage)
				} else {
					this.getShapeList()
				}
			},

			pushToInterrupt() {
				this.tip = this.$i18n.messages[this.$i18n.locale]['释放刷新'];
			},
			finished() {
				this.tip = this.$i18n.messages[this.$i18n.locale]['下拉刷新'];
			},
			typefaceshow(e) {
				this.$emit('typefaceshow', e)
			},
			keyboard(e) {
				this.inputBottom = 0
			},
			typeface(e) {
				this.text = e
				this.inputBottom = 0
				//console.log(this.$base.typefacedata)
				if (this.$base.typefacedata.length > 0) {
					this.typefacedata = this.$base.typefacedata
				}
		        //console.log(this.e_active)
			},
			typefaceClick(e, index) {
				
				let that = this;
				if ((index + 1) == this.typefacedata.length) {
					
		          /* setTimeout(function() {
			          that.data.itemList[that.data.cidx].font_dict_id == e.id
		           }, 0); */
				   
				   
				   
				   

					//this.data.itemList[this.data.cidx].font_dict_id == e.id
					if (e.textlong == true) {
						this.$emit('typefaceClick', e)
					} else {
						this.$emit('typefaceClick', e)
					}
				} else {
					
					/* setTimeout(function() {
					  that.data.itemList[that.data.cidx].font_dict_id == e.id
					}, 0); */
					//this.data.itemList[this.data.cidx].font_dict_id == e.id
					
					this.$emit('typefaceClick', e)
				}
				
				
				
				//console.log(this.data);
				
				
			},
			loadFont(textlist) {
				let that = this;
				uni.showLoading({
					title: this.$i18n.messages[this.$i18n.locale]['正在加载中'],
					mask: true,
				});
				uni.loadFontFace({
					global: true,
					family: textlist.key,
					source: 'url(' + textlist.remark + ')',
					desc: {
						weight: 100
					},
					success: function(message) {
						textlist.textlong = true
					},
					fail: function(message) {
						textlist.textlong = false
					},
					complete(res) {
						uni.hideLoading();
						//wx.showToast({title: '字体下载完成',icon: 'success',duration: 2000});
						textlist.long = true
						that.setData({
							typefacedata: that.typefacedata
						});
						that.$emit('typefaceClick', textlist)
					}
				})
			},
			setData(obj) {
				let that = this;
				let keys = [];
				let val, data;
				Object.keys(obj).forEach(function(key) {
					keys = key.split('.');
					val = obj[key];
					data = that.$data;
					keys.forEach(function(key2, index) {
						if (index + 1 == keys.length) {
							that.$set(data, key2, val);
						} else {
							if (!data[key2]) {
								that.$set(data, key2, {});
							}
						}
						data = data[key2];
					})
				});
			},
			color(e) {
				this.text = e
				this.inputBottom = 0
			},
			modify(e) {
				this.text = e
				this.inputBottom = 0
			},
			focusTextarea(e) {
				this.inputBottom = e.detail.height;
			},
			blurTextarea(e) {
				this.inputBottom = 0;
			},
			textInput(e) {
				this.filterTextInput(e.detail.value);
			},
			workcolor(e) {
				this.$emit('workcolor', e)
			},
			bgtextcolor(e) {
				this.$emit('bgtextcolor', e)
			},
		}
	}
</script>

<style lang="scss">
	// 分类
	.scroll-container {
		box-sizing: border-box;
		white-space: nowrap;

		.scroll-item {
			text-align: center;
			height: 80upx;
		}
	}

	.material-series-scroll-item {
		text-align: center;
		padding: 10upx 20upx;
		color: #FFFFFF;
		background: #000;
		border-radius: 40upx;
		float: left;
		margin: 5upx 10upx 5upx;
		font-size: 21upx;
	}

	.material-series-scroll-item-active {
		background: #864BC3;
	}

	.tooltextone {
		position: absolute;
		bottom: 0;
		z-index: 1000;
		width: 100%;
		display: flex;
		align-items: center;
		height: 100upx;
		background: #292933;

		.tooltext_li {
			width: 25%;

			.tooltext_li_top {
				border-radius: 50%;
				text-align: center;
				width: 41upx;
				height: 41upx;
				border: 1upx solid #FFFFFF;
				display: block;
				padding: 2upx;
				margin: 2upx auto;

				.tooltext_li_top_icon {
					color: #FFFFFF;
					font-size: 26upx;
					line-height: 41upx;
					text-align: center;
				}
			}

			.tooltext_li_text {
				text-align: center;
				color: #FFFFFF;
				font-size: 22upx;
			}
		}




	}
</style>