sadjv3_admin/src/views/bl/massage/massagePackage.vue

<template>
	<div>
		<!-- 服务包列表 -->
		<div style="position: relative; display: inline-block; margin: 5px">
			<span>服务包类型：</span>
			<el-select
				clearable
				v-model="type"
				style="width: 150px; margin-left: 10px">
				<el-option
					v-for="item in typeDictData"
					:key="item.id"
					:label="item.value"
					:value="item.id">
				</el-option>
			</el-select>&nbsp;&nbsp;
		</div>
		<div style="position: relative; display: inline-block; margin: 5px">
			<span>服务类型：</span>
			<el-select
				clearable
				v-model="classifyId"
				style="width: 150px; margin-left: 10px">
				<el-option
					v-for="item in fwData"
					:key="item.id"
					:label="item.value"
					:value="item.id">
				</el-option>
			</el-select>&nbsp;&nbsp;
		</div>
		<div style="position: relative; display: inline-block">
			<span>状态：</span>
			<el-select
				clearable
				v-model="status"
				style="width: 150px; margin-left: 10px">
				<el-option value="1" label="上线"></el-option>
				<el-option value="2" label="下线"></el-option>
			</el-select>&nbsp;&nbsp;
		</div>
		<div style="position: relative; display: inline-block">
			<span>等级：</span>
			<el-select
				clearable
				v-model="level"
				style="width: 150px; margin-left: 10px">
				<el-option value="3" label="新手"></el-option>
				<el-option value="4" label="专家"></el-option>
				<el-option value="5" label="资深"></el-option>
			</el-select>&nbsp;&nbsp;
		</div>
		<div style="position: relative; display: inline-block">
			<span>项目名称：</span>
			<el-input
				style="width: 200px"
				placeholder="请输入服务名称"
				v-model="title">
			</el-input>
		</div>
		<div style="position: relative; display: inline-block">
			<span>城市：</span>
			<el-input
				style="width: 200px"
				placeholder="请输入城市"
				v-model="city"
			>
			</el-input>
		</div>
		<el-button
			style="margin: 10px"
			size="mini"
			type="primary"
			icon="document"
			@click="handleSelect"
		>查询
		</el-button>
		<el-button
			style="margin: 10px"
			size="mini"
			type="primary"
			icon="document"
			@click="handleClear"
		>重置
		</el-button
		>&nbsp;&nbsp;
		<div style="text-align: right; display: inline-block">
			<el-button
				style="margin: 10px"
				size="mini"
				type="primary"
				icon="document"
				@click="handleEdit(0)"
			>添加
			</el-button>
		</div>
		<el-table v-loading="tableDataLoading" :data="tableData.list">
			<el-table-column
				prop="id"
				label="编号"
				width="80"
				fixed="left"
			>
			</el-table-column>
			<el-table-column label="服务包类型" fixed="left" prop="type" width="100">
				<template slot-scope="scope">
					{{ showDictValue(scope.row.type, typeDictData) }}
				</template>
			</el-table-column>
			<el-table-column label="服务类型" fixed="left" prop="classifyId">
				<template slot-scope="scope">
					{{ showDictValue(scope.row.classifyId, fwData) }}
				</template>
			</el-table-column>
			<el-table-column label="等级" fixed="left" prop="level">
				<template slot-scope="scope">
					{{ showLevelValue(scope.row.level, levelData) }}
				</template>
			</el-table-column>
			<el-table-column
				prop="title"
				label="名称"
				fixed="left"
				width="150"
			>
			</el-table-column>
			<el-table-column prop="packageImg" label="图片">
				<template slot-scope="scope">
					　　<img
					v-if="scope.row.packageImg && scope.row.packageImg != ''"
					:src="scope.row.packageImg"
					width="40"
					height="40"
				/>
					<span v-else>暂无图片</span>
				</template>
			</el-table-column>
			<el-table-column prop="contentImg" label="详情图" width="250">
				<template slot-scope="scope">
					<div
						v-for="(item, index) in scope.row.contentImg"
						:key="index"
						style="display: inline-block; margin: 3px"
					>
						<el-popover placement="top-start" title="" trigger="hover">
							<img
								style="width: 50px; height: 50px"
								:src="item"
								alt=""
								slot="reference"
							/>
							<img style="width: 300px; height: auto" :src="item" alt=""/>
						</el-popover>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="city" label="城市" width="100">
				<template slot-scope="scope">
					<span v-if="scope.row.city">{{ scope.row.city }}</span>
					<span v-else>不限</span>
				</template>
			</el-table-column>
			<el-table-column prop="oldPrice" label="原价"></el-table-column>
			<el-table-column prop="price" label="现价"></el-table-column>
			<el-table-column prop="labels" label="标签" width="150">
			</el-table-column>
			<el-table-column prop="sales" label="销量" width="150">
				<template slot-scope="scope">
					<span>{{ scope.row.sales }}</span>
					<el-button
						size="mini"
						type="primary"
						plain
						@click="showUpdateSalesView(scope.row)"
						style="margin: 5px"
					>修改
					</el-button
					>
				</template>
			</el-table-column>
<!--			<el-table-column prop="sales" label="好评" width="150">-->
<!--				<template slot-scope="scope">-->
<!--					<span>{{ scope.row.esteemRate }}</span>-->
<!--					<el-button-->
<!--						size="mini"-->
<!--						type="primary"-->
<!--						plain-->
<!--						@click="showUpdateEsteemRateView(scope.row)"-->
<!--						style="margin: 5px"-->
<!--					>修改-->
<!--					</el-button-->
<!--					>-->
<!--				</template>-->
<!--			</el-table-column>-->
			<el-table-column prop="addNum" label="加钟数"></el-table-column>
			<el-table-column prop="status" label="代金券可用" width="100">
				<template slot-scope="scope">
					<el-switch
						v-model="scope.row.isCanCoupon"
						@change="changeCoupon(scope.row.id, scope.row.isCanCoupon)"
						:active-value="openValue"
						:inactive-value="closeValue"
						active-color="#13ce66"
						inactive-color="#ff4949"
					>
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="VIP可用">
				<template slot-scope="scope">
					<el-switch
						v-model="scope.row.isCanVip"
						@change="changeVip(scope.row.id, scope.row.isCanVip)"
						:active-value="openValue"
						:inactive-value="closeValue"
						active-color="#13ce66"
						inactive-color="#ff4949"
					>
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态">
				<template slot-scope="scope">
					<el-switch
						v-model="scope.row.status"
						@change="changeStatus(scope.row.id, scope.row.status)"
						:active-value="openValue"
						:inactive-value="closeValue"
						active-color="#13ce66"
						inactive-color="#ff4949"
					>
					</el-switch>
				</template>
			</el-table-column>
			<el-table-column label="操作" prop="id" width="360" fixed="right">
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="primary"
						style="margin: 5px"
						@click="showDetailView(scope.row)"
					>服务项目
					</el-button>
					<el-button
						size="mini"
						type="primary"
						style="margin: 5px"
						@click="handleEdit(scope.row)"
					>修改
					</el-button>
					<el-button
						size="mini"
						type="danger"
						style="margin: 5px"
						@click="handleDelete(scope.row)"
					>删除
					</el-button>
<!--					<el-button-->
<!--						size="mini"-->
<!--						type="danger"-->
<!--						style="margin: 5px"-->
<!--						@click="showBuyView(scope.row)"-->
<!--					>购买-->
<!--					</el-button>-->
<!--					<el-button-->
<!--						size="mini"-->
<!--						type="danger"-->
<!--						style="margin: 5px"-->
<!--						@click="showPayView()"-->
<!--					>支付-->
<!--					</el-button>-->
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center; margin-top: 10px">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="limit"
				:current-page="page"
				layout="total,sizes, prev, pager, next,jumper"
				:total="tableData.totalCount"
			>
			</el-pagination>
		</div>

		<!-- 修改销量 -->
		<el-dialog title="修改销量" :visible.sync="dialogFormVisibleSales" center>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >销量：</span
				  >
				<el-input
					style="width: 50%"
					v-model="sales"
					type="number"
					min="0"
					placeholder="请输入销量"
				>
				</el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleSales = false">取 消</el-button>
				<el-button type="primary" @click="updateSales()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 修改好评 -->
		<el-dialog title="修改好评" :visible.sync="dialogFormVisibleEsteemRate" center>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >好评%：</span
				  >
				<el-input
					style="width: 50%"
					v-model="esteemRate"
					type="number"
					min="0"
					placeholder="请输入好评率0-100，不要输入%"
				>
				</el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleEsteemRate = false">取 消</el-button>
				<el-button type="primary" @click="updateEsteemRate()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 添加、修改服务包 -->
		<el-dialog :title="titles" :visible.sync="dialogFormVisible" center @close="closeMain">
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >服务包类型：</span
				  >
				<el-select clearable v-model="type" style="width: 50%">
					<el-option
						v-for="item in typeDictData"
						:key="item.id"
						:label="item.value"
						:value="item.id"
					>
					</el-option>
				</el-select
				>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >服务类型：</span
				  >
				<el-select clearable v-model="classifyId" style="width: 50%">
					<el-option
						v-for="item in fwData"
						:key="item.id"
						:label="item.value"
						:value="item.id"
					>
					</el-option>
				</el-select
				>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >套餐等级：</span
				  >
				<el-select clearable v-model="level" style="width: 50%">
					<el-option
						v-for="item in levelData"
						:key="item.id"
						:label="item.value"
						:value="item.id"
					>
					</el-option>
				</el-select
				>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >名称：</span
				  >
				<el-input
					style="width: 50%"
					v-model="title"
					type="text"
					placeholder="请输入服务包名称"
				>
				</el-input>
			</div>
			<div style="margin-bottom: 10px; display: flex">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >图片：</span
				  >
				<div
					style="
		              width: 148px;
		              height: 148px;
		              border: 1px dashed #c0ccda;
		              border-radius: 6px;
		              text-align: center;
		              line-height: 148px;
		            "
				>
					<el-upload
						class="avatar-uploader"
						v-model="packageImg"
						:action="uploadUrl"
						:show-file-list="false"
						:on-success="handlePackageImgSuccess"
						:on-progress="onPackageImgProgress"
					>
						<img
							v-if="packageImg != ''"
							:src="packageImg"
							class="avatar"
							style="border-radius: 6px; width: 148px; height: 148px"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
					</el-upload>
				</div>
			</div>
			<div style="margin-bottom: 10px; display: flex">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >详情图：</span
				  >
				<div class="imgs" v-for="(item, index) in contentImg" :key="index">
					<img width="100%" class="images" height="100%" :src="item" alt=""/>
					<span class="dels">
		              <i class="el-icon-delete" @click="clearContentImg(index)"></i>
		            </span>
				</div>
				<div class="imgs" style="width: 50%">
					<el-upload
						:action="uploadUrl"
						list-type="picture-card"
						:show-file-list="false"
						:on-success="handleContentImgSuccess"
						:on-progress="onContentImgProgress"
					>
						<el-progress
							v-if="contentImgPercentage > 0 && contentImgPercentage < 100"
							type="circle"
							:percentage="contentImgPercentage"
						></el-progress>
						<i v-else class="el-icon-plus"></i>
					</el-upload>
				</div>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >原价：</span
				  >
				<el-input
					style="width: 50%"
					v-model="oldPrice"
					onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
					type="number"
					min="0"
					placeholder="请输入原价"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >现价：</span
				  >
				<el-input
					style="width: 50%"
					v-model="price"
					onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
					type="number"
					min="0"
					placeholder="请输入现价"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >状态：</span
				  >
				<el-radio-group v-model="status">
					<el-radio :label="1">上线</el-radio>
					<el-radio :label="2">下线</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >城市：</span
				  >
				<el-cascader
					style="width: 45%"
					size="large"
					:options="options"
					ref="cascaderAddr"
					v-model="storeAddress"
					:placeholder="storeAddre"
					@change="handleChangeCity"
					:value="storeAddre"
				>
				</el-cascader>
				<el-button
					type="info"
					class="tj"
					size="mini"
					icon="el-icon-delete"
					circle
					@click="handleDeleteCity"
				>
				</el-button>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >标签：</span
				  >
				<span class="bqList" v-for="(item, index) in labelsArr" :key="index"
				>{{ item }}
		            <span class="delss">
		              <i class="el-icon-delete" @click="handleDeleteLabels(index)"></i>
		            </span>
		          </span>
				<el-input
					v-model="label"
					style="width: 200px"
					placeholder="请输入标签"
				></el-input>
				<el-button
					type="primary"
					class="tj"
					size="mini"
					icon="el-icon-edit"
					circle
					@click="handleAddLabels"
				>
				</el-button>
			</div>
<!--			<div style="margin-bottom: 10px">-->
<!--		          <span style="width: 200px; display: inline-block; text-align: right"-->
<!--				  >简介：</span-->
<!--				  >-->
<!--				<quill-editor-->
<!--					ref="myTextEditor"-->
<!--					v-model="content"-->
<!--					:options="quillOption"-->
<!--					style="-->
<!--		              padding-bottom: 50px;-->
<!--		              height: 300px;-->
<!--		              width: 72%;-->
<!--		              display: inline-table;-->
<!--		              margin-bottom: 60px;-->
<!--		            "-->
<!--				>-->
<!--				</quill-editor>-->
<!--			</div>-->
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >简介：</span
				  >
				<el-input
					style="width: 50%"
					v-model="content"
					type="textarea"
					:rows="4"
					placeholder="请输入服务包简介"
				>
				</el-input>
			</div>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >销量：</span
				  >
				<el-input
					style="width: 50%"
					v-model="sales"
					onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2')"
					type="number"
					min="0"
					placeholder="请输入销量"
				></el-input>
			</div>
<!--			<div style="margin-bottom: 10px">-->
<!--		          <span style="width: 200px; display: inline-block; text-align: right"-->
<!--				  >好评率：</span-->
<!--				  >-->
<!--				<el-input-->
<!--					style="width: 50%"-->
<!--					v-model="esteemRate"-->
<!--					onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2')"-->
<!--					type="number"-->
<!--					min="0"-->
<!--					placeholder="请输入销量0-100"-->
<!--				></el-input>-->
<!--			</div>-->
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right"
				  >加钟数：</span
				  >
				<el-input
					style="width: 50%"
					v-model="addNum"
					onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2')"
					type="number"
					min="0"
					placeholder="请输入加钟次数"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmit()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>服务项目>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
		<el-dialog
			title="服务项目"
			:visible.sync="dialogFormVisibleDetail"
			center
			width="80%"
			@close="closeDetail"
		>
			<div style="text-align: right; display: inline-block">
				<el-button
					style="margin: 10px"
					size="mini"
					type="primary"
					icon="document"
					@click="handleAddMassage()"
				>添加
				</el-button>
				<el-button
					style="margin: 10px"
					size="mini"
					type="primary"
					icon="document"
					@click="showMassageView()"
				>项目列表
				</el-button>
			</div>
			<el-table v-loading="detailTableDataLoading" :data="detailTableData.list">
				<el-table-column
					prop="id"
					label="编号"
					width="80"
					fixed="left"
				>
				</el-table-column>
				<el-table-column
					prop="title"
					label="项目名称"
					fixed="left"
					width="150"
				>
				</el-table-column>
				<el-table-column prop="massageImg" label="图片">
					<template slot-scope="scope">
						　　<img
						v-if="scope.row.massageImg && scope.row.massageImg != ''"
						:src="scope.row.massageImg"
						width="40"
						height="40"
					/>
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column prop="oldPrice" label="原价"> </el-table-column>
				<el-table-column prop="price" label="现价"> </el-table-column>
				<el-table-column prop="duration" label="时长(分钟)">
				</el-table-column>
				<el-table-column prop="status" label="状态">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.status"
							@change="changeDetailStatus(scope.row)"
							:active-value="openValue"
							:inactive-value="closeValue"
							active-color="#13ce66"
							inactive-color="#ff4949"
						>
						</el-switch>
					</template>
				</el-table-column>
				<el-table-column prop="packagePrice" label="优惠价" width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.packagePrice }}</span>
						<el-button
							size="mini"
							type="primary"
							plain
							@click="showUpdatePriceView(scope.row)"
							style="margin: 5px"
						>修改
						</el-button
						>
					</template>
				</el-table-column>
				<el-table-column prop="serviceCount" label="次数" width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.serviceCount }}</span>
						<el-button
							size="mini"
							type="primary"
							plain
							@click="showUpdateCountView(scope.row)"
							style="margin: 5px"
						>修改
						</el-button
						>
					</template>
				</el-table-column>
				<el-table-column prop="intervalDays" label="间隔(天)" width="150">
					<template slot-scope="scope">
						<span>{{ scope.row.intervalDays }}</span>
						<el-button
							size="mini"
							type="primary"
							plain
							@click="showUpdateDaysView(scope.row)"
							style="margin: 5px"
						>修改
						</el-button
						>
					</template>
				</el-table-column>
				<el-table-column label="操作" prop="id" width="100" fixed="right">
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="danger"
							style="margin: 5px"
							@click="handleDeleteDetail(scope.row)"
						>删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center; margin-top: 10px">
				<el-pagination
					@size-change="handleDetailSizeChange"
					@current-change="handleDetailCurrentChange"
					:page-sizes="[10, 20, 30, 40]"
					:page-size="detailLimit"
					:current-page="detailPage"
					layout="total,sizes, prev, pager, next,jumper"
					:total="detailTableData.totalCount"
				>
				</el-pagination>
			</div>
		</el-dialog>

		<!-- 修改价格 -->
		<el-dialog title="修改优惠价" :visible.sync="dialogFormVisiblePrice" center>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right">优惠价：</span>
				<el-input
					style="width: 50%"
					v-model="packagePrice"
					type="number"
					min="0"
					placeholder="请输入优惠价"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisiblePrice = false">取 消</el-button>
				<el-button type="primary" @click="updatePrice()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 修改次数 -->
		<el-dialog title="修改次数" :visible.sync="dialogFormVisibleCount" center>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right">次数：</span>
				<el-input
					style="width: 50%"
					v-model="serviceCount"
					type="number"
					min="0"
					placeholder="请输入次数"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleCount = false">取 消</el-button>
				<el-button type="primary" @click="updateCount()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 修改间隔 -->
		<el-dialog title="修改间隔" :visible.sync="dialogFormVisibleIntervalDays" center>
			<div style="margin-bottom: 10px">
		          <span style="width: 200px; display: inline-block; text-align: right">间隔(天)：</span>
				<el-input
					style="width: 50%"
					v-model="intervalDays"
					type="number"
					min="0"
					placeholder="请输入天数"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleIntervalDays = false">取 消</el-button>
				<el-button type="primary" @click="updateIntervalDays()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 添加服务项目 -->
		<el-dialog title="添加服务项目" :visible.sync="dialogFormVisibleAddMassage" center>
			<div style="margin-bottom: 10px">
          		<span style="width: 200px; display: inline-block; text-align: right">项目类型：</span>
				<el-select clearable v-model="type" style="width: 50%">
					<el-option
						v-for="item in fwData"
						:key="item.id"
						:label="item.value"
						:value="item.id"
					></el-option>
				</el-select>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">项目名称：</span>
				<el-input
					style="width: 50%"
					v-model="title"
					type="text"
					placeholder="请输入项目名称"
				></el-input>
			</div>
			<div style="margin-bottom: 10px; display: flex">
          		<span style="width: 200px; display: inline-block; text-align: right">项目图片：</span>
				<div style="
              width: 148px;
              height: 148px;
              border: 1px dashed #c0ccda;
              border-radius: 6px;
              text-align: center;
              line-height: 148px;
            " >
					<el-upload
						class="avatar-uploader"
						v-model="massageImg"
						:action="uploadUrl"
						:show-file-list="false"
						:on-success="handleMassageImgSuccess"
						:on-progress="onMassageImgProgress"
					>
						<img
							v-if="massageImg != ''"
							:src="massageImg"
							class="avatar"
							style="border-radius: 6px; width: 148px; height: 148px"
						/>
						<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
					</el-upload>
				</div>
			</div>
			<div style="margin-bottom: 10px; display: flex">
          		<span style="width: 200px; display: inline-block; text-align: right">项目详情图：</span>
				<div class="imgs" v-for="(item, index) in contentImg" :key="index">
					<img width="100%" class="images" height="100%" :src="item" alt=""/>
					<span class="dels"><i class="el-icon-delete" @click="clearContentImg(index)"></i></span>
				</div>
				<div class="imgs" style="width: 50%">
					<el-upload
						:action="uploadUrl"
						list-type="picture-card"
						:show-file-list="false"
						:on-success="handleContentImgSuccess"
						:on-progress="onContentImgProgress"
					>
						<el-progress
							v-if="contentImgPercentage > 0 && contentImgPercentage < 100"
							type="circle"
							:percentage="contentImgPercentage"
						></el-progress>
						<i v-else class="el-icon-plus"></i>
					</el-upload>
				</div>
			</div>
			<div style="margin-bottom: 10px">
          		<span style="width: 200px; display: inline-block; text-align: right">原价：</span>
				<el-input
					style="width: 50%"
					v-model="oldPrice"
					onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
					type="number"
					min="0"
					placeholder="请输入原价"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
          		<span style="width: 200px; display: inline-block; text-align: right">现价：</span>
				<el-input
					style="width: 50%"
					v-model="price"
					onkeyup="value=value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"
					type="number"
					min="0"
					placeholder="请输入现价"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
          		<span style="width: 200px; display: inline-block; text-align: right">项目时长(分钟)：</span>
				<el-input
					style="width: 50%"
					v-model="duration"
					type="text"
					placeholder="请输入项目时长(分钟)"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">性别限制：</span>
				<el-radio-group v-model="isSex">
					<el-radio :label="0">不限制</el-radio>
					<el-radio :label="1">男</el-radio>
					<el-radio :label="2">女</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">适用人群：</span>
				<el-input
					style="width: 50%"
					v-model="applyPeople"
					type="textarea"
					:rows="4"
					placeholder="请输入适用人群"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">状态：</span>
				<el-radio-group v-model="status">
					<el-radio :label="1">上线</el-radio>
					<el-radio :label="2">下线</el-radio>
				</el-radio-group>
			</div>
			<div style="margin-bottom: 10px">
          		<span style="width: 200px; display: inline-block; text-align: right">服务城市：</span>
				<el-cascader
					style="width: 45%"
					size="large"
					:options="options"
					ref="cascaderAddr"
					v-model="storeAddress"
					:placeholder="storeAddre"
					@change="handleChangeCity"
					:value="storeAddre"
				>
				</el-cascader>
				<el-button
					type="info"
					class="tj"
					size="mini"
					icon="el-icon-delete"
					circle
					@click="handleDeleteCity"
				>
				</el-button>
			</div>
			<div style="margin-bottom: 10px">
          		<span style="width: 200px; display: inline-block; text-align: right">项目标签：</span>
				<span class="bqList" v-for="(item, index) in labelsArr" :key="index">{{ item }}
					<span class="delss">
						<i class="el-icon-delete" @click="handleDeleteLabels(index)"></i>
					</span>
          		</span>
				<el-input
					v-model="label"
					style="width: 200px"
					placeholder="请输入标签"
				></el-input>
				<el-button
					type="primary"
					class="tj"
					size="mini"
					icon="el-icon-edit"
					circle
					@click="handleAddLabels"
				>
				</el-button>
			</div>
			<div style="margin-bottom: 10px">
          		<span style="width: 200px; display: inline-block; text-align: right">项目内容：</span>
				<el-input
					style="width: 50%"
					v-model="content"
					type="textarea"
					:rows="4"
					placeholder="请输入项目内容"
				>
				</el-input>
			</div>
			<div style="margin-bottom: 10px">
          		<span style="width: 200px; display: inline-block; text-align: right">项目简介：</span>
				<el-input
					v-model="jianjie"
					type="textarea"
					:rows="4"
					style="width: 50%"
					placeholder="请输入项目简介"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleAddMassage = false">取 消</el-button>
				<el-button type="primary" @click="handleAddMassageSubmit()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 项目列表弹框 -->
		<el-dialog title="服务项目列表" :visible.sync="dialogFormVisibleMassageList" width="80%" center>
			<div style="position: relative; display: inline-block; margin: 5px">
				<span>项目类型：</span>
				<el-select
					clearable
					v-model="massageType"
					style="width: 150px; margin-left: 10px">
					<el-option
						v-for="item in fwData"
						:key="item.id"
						:label="item.value"
						:value="item.id">
					</el-option>
				</el-select>
			</div>
			<div style="position: relative; display: inline-block">
				<span>项目名称：</span>
				<el-input
					style="width: 200px"
					placeholder="请输入项目名称"
					v-model="massageTitle"
				></el-input>
			</div>
			<el-button
				style="margin: 10px"
				size="mini"
				type="primary"
				icon="document"
				@click="handleSelectMassage">查询
			</el-button>
			<el-button
				style="margin: 10px"
				size="mini"
				type="primary"
				icon="document"
				@click="handleClearMassage">重置
			</el-button>
			<el-table :data="massageData.list" style="width: 100%">
				<el-table-column label="项目类型" fixed="left" prop="type">
					<template slot-scope="scope">
						{{ showDictValue(scope.row.type, fwData) }}
					</template>
				</el-table-column>
				<el-table-column prop="title" label="项目名称" width="180">
				</el-table-column>
				<el-table-column prop="massageImg" label="图片">
					<template slot-scope="scope">
						<img
							v-if="scope.row.massageImg && scope.row.massageImg != ''"
							:src="scope.row.massageImg"
							width="40"
							height="40"
						/>
						<span v-else>暂无图片</span>
					</template>
				</el-table-column>
				<el-table-column prop="duration" label="时长(分钟)"> </el-table-column>
				<el-table-column prop="oldPrice" label="原价"> </el-table-column>
				<el-table-column prop="price" label="现价"> </el-table-column>
				<el-table-column label="操作" prop="id" width="160" fixed="right">
					<template slot-scope="scope">
						<el-button
							style="margin: 10px 0"
							size="mini"
							type="primary"
							icon="document"
							@click="handleAddToDetail(scope.row)"
						>添加
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: center; margin-top: 10px">
				<el-pagination
					@size-change="handleMassageSizeChange"
					@current-change="handleMassageCurrentChange"
					:page-size="massageLimit"
					:current-page="massagePage"
					layout="total, prev, pager, next,jumper"
					:total="massageData.totalCount"
				></el-pagination>
			</div>
		</el-dialog>
		<!--  <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<服务项目<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< -->

		<!-- 购买 -->
		<el-dialog title="购买" :visible.sync="dialogFormVisibleBuy" center>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">用户：</span>
				<el-input
					style="width: 50%"
					v-model="userId"
					type="number"
					min="0"
					placeholder="请输入用户ID"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">会员优惠比：</span>
				<el-input
					style="width: 50%"
					v-model="vipRate"
					type="number"
					min="0"
					placeholder="请输入会员优惠比"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">购买数量：</span>
				<el-input
					style="width: 50%"
					v-model="quantity"
					type="number"
					min="0"
					placeholder="请输入购买数量"
				></el-input>
			</div>

			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">总金额：</span>
				<el-input
					style="width: 50%"
					v-model="oldSumMoney"
					type="number"
					min="0"
					placeholder="请输入总金额"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">应付总金额：</span>
				<el-input
					style="width: 50%"
					v-model="sumMoney"
					type="number"
					min="0"
					placeholder="请输入应付总金额"
				></el-input>
			</div>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">代金卷ID：</span>
				<el-input
					style="width: 50%"
					v-model="couponId"
					type="text"
					min="0"
					placeholder="请输入代金卷ID"
				></el-input>
			</div>

			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisibleBuy = false">取 消</el-button>
				<el-button type="primary" @click="handleBuy()">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 支付 -->
		<el-dialog title="支付" :visible.sync="dialogFormVisiblePay" center>
			<div style="margin-bottom: 10px">
				<span style="width: 200px; display: inline-block; text-align: right">订单ID：</span>
				<el-input
					style="width: 50%"
					v-model="ordersId"
					type="text"
					min="0"
					placeholder="请输入订单ID"
				></el-input>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisiblePay = false">取 消</el-button>
				<el-button type="primary" @click="handlePay()">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {quillEditor} from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import quillConfig from "./quill-config.js";
import axios from "axios";
import {jsonp} from "vue-jsonp";
import {serverPaths} from '@/utils/enumData'
import {
	provinceAndCityData,
	regionData,
	provinceAndCityDataPlus,
	regionDataPlus,
	CodeToText,
	TextToCode,
} from "element-china-area-data";

export default {
	components: {
		quillEditor,
	},
	data() {
		return {
			uploadUrl: serverPaths.uploadUrl,
			uploadWatermarkUrl: serverPaths.uploadWatermarkUrl,
			apiUrl:"",
			tableDataLoading: false,
			tableData: {},
			typeDictData: [],
			levelData:[{id:3,value:'新手'},{id:4,value:'专家'},{id:5,value:'资深'}],
			id: "",//编号
			title: "",//标题
			type: "",//服务包类型
			classifyId: "",//服务类型
			oldPrice: "",//原价
			price: "",//现价
			packageImg: "",//图片
			content: "",//简介
			contentImg: [], //详情图
			status: "",//状态
			addNum: "",//加钟次数
			esteemRate: "",//好评率
			sales: "",//销量
			labels: "",//标签
			city: "",//城市
			createTime: "",//创建时间
			fwxmtype:"",//服务项目类型  104服务套餐
			level:"",
			page: 1,
			limit: 10,
			dialogFormVisibleSales: false,
			dialogFormVisibleEsteemRate: false,
			openValue: 1,
			closeValue: 2,
			dialogFormVisible: false,
			titles: "添加服务包",
			label:"",
			labelsArr: [], //标签集合
			storeAddress: [],
			storeAddre: "请选择城市",
			province: "", //省
			options: provinceAndCityData,
			packageImgPercentage:0,//封面图片上传进度
			contentImgPercentage:0,//详情图片上传进度
			quillOption: quillConfig,
			//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>服务项目>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
			fwData: [],
			dialogFormVisibleDetail:false,
			detailTableDataLoading: false,
			detailTableData: {},
			mainId: "",//主表ID
			massageTypeId: "",//按摩类型ID
			packagePrice: 0,
			serviceCount: 1,
			intervalDays: 0,
			detailPage: 1,
			detailLimit: 10,
			massageImg:"",
			isSex: "",//是否限制性别
			applyPeople: "",//适用人群
			duration: "",//时长
			jianjie: "",//简介
			dialogFormVisiblePrice: false,
			dialogFormVisibleCount: false,
			dialogFormVisibleIntervalDays: false,
			dialogFormVisibleAddMassage: false,
			dialogFormVisibleMassageList: false,
			massageTableDataLoading: false,
			massageData: {},
			massageType: "",
			massageTitle: "",
			massagePage: 1,
			massageLimit: 10,
			massageImgPercentage:0,//封面图片上传进度
			//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<服务项目<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

			packageId:"",//服务包ID
			ordersNo:"",//订单号
			userId:"",//用户ID
			quantity:0,//数量
			payMoney:0,//支付金额
			payWay:"",//支付方式
			couponId:"",//代金券ID
			dialogFormVisibleBuy: false,

			vipRate: 100,
			oldSumMoney: 0,
			sumMoney: 0,

			ordersId: "",
			dialogFormVisiblePay: false,
		};
	},
	methods: {
		showDictValue(data, datas){
			const dictItem = datas.find(item => data === item.id);
			return dictItem ? dictItem.value : '';
		},
		showLevelValue(data, datas){
			const dictItem = datas.find(item => data === item.id);
			return dictItem ? dictItem.value : '';
		},
		// 服务包类型
		typeDictSelect() {
			this.$http({
				url: this.$http.adornUrl("sys/dict/selectDictList"),
				method: "get",
				params: this.$http.adornParams({
					type: "service_package",
				}),
			}).then(({data}) => {
				this.typeDictData = data.data;
			});
		},
		// 项目类型
		fwSelect() {
			this.$http({
				url: this.$http.adornUrl("sys/dict/selectDictList"),
				method: "get",
				params: this.$http.adornParams({
					type: "服务类型",
				}),
			}).then(({ data }) => {
				let returnData = data.data;
				this.fwData = returnData;
			});
		},
		// 获取服务包列表数据
		handleSelect() {
			this.tableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("massage/package/findPage"),
				method: "get",
				params: this.$http.adornParams({
				// data: this.$http.adornData({
					page: this.page,
					limit: this.limit,
					type: this.type,
					classifyId: this.classifyId,
					city: this.city,
					title: this.title,
					status: this.status,
					level: this.level,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					let returnData = data.data;
					this.tableData = returnData;
					for (var i in this.tableData.list) {
						if (this.tableData.list[i].contentImg) {
							this.tableData.list[i].contentImg =
								this.tableData.list[i].contentImg.split(",");
						}
					}
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
				this.tableDataLoading = false;
			});
		},
		// 重置
		handleClear() {
			this.type = "";
			this.classifyId ="";
			this.city = "";
			this.title = "";
			this.status = "";
			this.level = "";
			this.page = 1;
			this.handleSelect();
		},

		//分页
		handleSizeChange(val) {
			this.limit = val;
			this.handleSelect();
		},

		//翻页
		handleCurrentChange(val) {
			this.page = val;
			this.handleSelect();
		},

		// 修改销量
		showUpdateSalesView(row) {
			this.id = row.id;
			this.sales = row.sales;
			this.dialogFormVisibleSales = true;
		},

		// 修改销量
		updateSales() {
			this.$http({
				url: this.$http.adornUrl("massage/package/updateSales"),
				method: "post",
				params: this.$http.adornParams({
				// data: this.$http.adornData({
					id: this.id,
					sales: this.sales,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.$message({
						message: "修改成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelect();
						},
					});
					this.dialogFormVisibleSales = false;
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},

		// 修改好评
		showUpdateEsteemRateView(row) {
			this.id = row.id;
			this.esteemRate = row.esteemRate;
			this.dialogFormVisibleEsteemRate = true;
		},

		// 修改好评
		updateEsteemRate() {
			this.$http({
				url: this.$http.adornUrl("massage/package/updateEsteemRate"),
				method: "post",
				params: this.$http.adornParams({
				// data: this.$http.adornData({
					id: this.id,
					esteemRate: this.esteemRate,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.$message({
						message: "修改成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelect();
						},
					});
					this.dialogFormVisibleEsteemRate = false;
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},

		// 优惠卷可用与否
		changeCoupon(id, status) {
			this.$http({
				url: this.$http.adornUrl(`massage/package/updateCoupon`),
				method: "post",
				params: this.$http.adornParams({
					// data: this.$http.adornData({
					id: id,
					isCanCoupon: status,
				}),
			}).then(({data}) => {
				this.$message({
					message: "操作成功",
					type: "success",
					duration: 1500,
					onClose: () => {
						this.handleSelect();
					},
				});
			});
		},

		// VIP可用与否
		changeVip(id, status) {
			this.$http({
				url: this.$http.adornUrl(`massage/package/updateVip`),
				method: "post",
				params: this.$http.adornParams({
					// data: this.$http.adornData({
					id: id,
					isCanVip: status,
				}),
			}).then(({data}) => {
				this.$message({
					message: "操作成功",
					type: "success",
					duration: 1500,
					onClose: () => {
						this.handleSelect();
					},
				});
			});
		},

		// 启用与否
		changeStatus(id, status) {
			this.$http({
				url: this.$http.adornUrl(`massage/package/updateStatus`),
				method: "post",
				params: this.$http.adornParams({
				// data: this.$http.adornData({
					id: id,
					status: status,
				}),
			}).then(({data}) => {
				this.$message({
					message: "操作成功",
					type: "success",
					duration: 1500,
					onClose: () => {
						this.handleSelect();
					},
				});
			});
		},

		// 删除服务包
		handleDelete(row) {
			this.$confirm(`确定删除此条信息?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.$http({
						url: this.$http.adornUrl("massage/package/delete"),
						method: "post",
						params: this.$http.adornParams({
							// data: this.$http.adornData({
							id: row.id,
						}),
					}).then(({data}) => {
						if (data.code == 0) {
							this.$message({
								message: "删除成功",
								type: "success",
								duration: 1500,
								onClose: () => {
									this.handleSelect();
								},
							});
						} else {
							this.$message({
								message: data.msg,
								type: "warning",
								duration: 1500,
								onClose: () => {
								},
							});
						}
					});
				})
				.catch(() => {
				});
		},

		//封面图片上传
		handlePackageImgSuccess(file) {
			this.packageImg = file.data;
		},
		//封面图片上传
		onPackageImgProgress(event, file, fileList) {
			this.packageImgPercentage = parseInt(event.percent);
		},
		// 删除详情图片
		clearContentImg(index) {
			this.contentImg.splice(index, 1);
		},
		//上传详情图片
		handleContentImgSuccess(file, fileList) {
			this.contentImg.push(file.data);
		},
		//上传详情图片
		onContentImgProgress(event, file, fileList) {
			this.contentImgPercentage = parseInt(event.percent);
		},
		// 添加标签
		handleAddLabels() {
			if (this.label == "" || this.label == " ") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入标签名",
					type: "warning",
				});
				return;
			} else {
				this.labelsArr.push(this.label);
				this.label = "";
			}
		},
		// 删除标签
		handleDeleteLabels(index) {
			this.labelsArr.splice(index, 1);
		},
		// 添加服务包
		handleEdit(row) {
			if (row != 0) {
				this.titles = "修改服务包";
				this.id = row.id;
				this.title = row.title;
				this.type = row.type;
				this.classifyId = row.classifyId;
				this.oldPrice = row.oldPrice;
				this.price = row.price;
				this.packageImg = row.packageImg;
				this.content = row.content;
				this.contentImg = row.contentImg;
				this.status = row.status;
				this.addNum = row.addNum;
				this.esteemRate = row.esteemRate;
				this.sales = row.sales;
				this.labels = row.labels;
				this.city = row.city;
				this.level = row.level;
				this.createTime = row.createTime;
				if (row.city != "" && row.city != "不限") {
					this.city = row.city;
					this.storeAddre = this.city;
				} else {
					this.city = "";
					this.storeAddre = "请选择城市";
				}
				if (row.labels && row.labels !== "") {
					this.labelsArr = row.labels.split(",");
				} else {
					this.labelsArr = [];
				}
			} else {
				this.titles = "添加服务包";
				this.id = "";
				this.title = "";
				this.type = "";
				this.oldPrice = "0";
				this.price = "0";
				this.packageImg = "";
				this.content = "";
				this.contentImg = [];
				this.status = 1;
				this.addNum = "0";
				this.esteemRate = "0";
				this.sales = "0";
				this.labels = "";
				this.city = "";
				this.labelsArr = [];
				this.storeAddre = "请选择城市";
			}
			this.dialogFormVisible = true;
		},

		closeMain(){
			this.handleClear();
		},

		// 提交添加、修改服务包
		handleSubmit() {
			if (this.type == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请选择服务包类型",
					type: "warning",
				});
				return;
			}
			if (this.classifyId == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请选择服务类型",
					type: "warning",
				});
				return;
			}
			if (this.level == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请设置套餐等级",
					type: "warning",
				});
				return;
			}
			if (this.title == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入服务包名称",
					type: "warning",
				});
				return;
			}
			if (this.packageImg == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请上传封面图片",
					type: "warning",
				});
				return;
			}
			if (this.contentImg.length == 0) {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请上传详情图片",
					type: "warning",
				});
				return;
			}
			if (this.oldPrice === "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入原价",
					type: "warning",
				});
				return;
			}
			if (this.price === "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入现价",
					type: "warning",
				});
				return;
			}
			if (this.status === "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请选择状态",
					type: "warning",
				});
				return;
			}
			if (this.city == "") {
				this.city = "不限";
			}
			if (this.titles == "添加服务包") {
				this.apiUrl = "massage/package/add";
			} else {
				this.apiUrl = "massage/package/modify";
			}
			this.$http({
				url: this.$http.adornUrl(this.apiUrl),
				method: "post",
				params: this.$http.adornParams({
				// data: this.$http.adornData({
					id: this.id,
					title: this.title,
					type: this.type,
					classifyId: this.classifyId,
					oldPrice: this.oldPrice,
					price: this.price,
					packageImg: this.packageImg,
					contentImg: this.contentImg.toString(),
					content: this.content,
					status: this.status,
					addNum: this.addNum,
					esteemRate: this.esteemRate,
					sales: this.sales,
					labels: this.labelsArr.toString(),
					city: this.city,
					level: this.level,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.dialogFormVisible = false;
					this.clearDatas();
					this.$message({
						message: "操作成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelect();
						},
					});
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},
		// 获取省市区
		handleChangeCity(value) {
			value = this.$refs["cascaderAddr"].currentLabels;
			console.log("````````````value", value);
			this.province = value[0];
			this.city = value[1];
			if (this.city == "市辖区") {
				this.city = this.province;
			}
			this.storeAddre = this.province + "/" + this.city;
			this.storeAddress = value;
		},
		// 删除城市
		handleDeleteCity() {
			this.city = "";
			this.storeAddress = [];
			this.storeAddre = "请选择城市";
		},
		clearDatas(){
			this.apiUrl="";
			this.tableDataLoading= false;
			this.id= "";//编号
			this.title= "";//标题
			this.type= "";//服务类型
			this.oldPrice= "";//原价
			this.price= "";//现价
			this.packageImg= "";//图片
			this.content= "";//简介
			this.contentImg= []; //详情图
			this.status= "";//状态
			this.addNum= "";//加钟次数
			this.esteemRate= "";//好评率
			this.sales= "";//销量
			this.labels= "";//标签
			this.city= "";//城市
			this.createTime= "";//创建时间
			this.level= "";
			this.page= 1;
			this.limit= 10;
			this.dialogFormVisibleSales= false;
			this.dialogFormVisibleEsteemRate= false;
			this.openValue= 1;
			this.closeValue= 2;
			this.dialogFormVisible= false;
			this.titles= "添加服务包";
			this.label="";
			this.labelsArr= []; //标签集合
			this.storeAddress= [];
			this.storeAddre= "请选择城市";
			this.province= ""; //省
		},
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>服务项目>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

		closeDetail(){
			this.handleSelect();
		},

		showDetailView(row){
			console.log(`🚀 ~ showDetailView ~ row:`, row)
			this.mainId = row.id;
			this.fwxmtype = row.type;
			this.handleSelectDetail();
			this.dialogFormVisibleDetail = true;
		},

		handleSelectDetail(){
			this.detailTableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("massage/packageDetail/findPage"),
				method: "get",
				params: this.$http.adornParams({
					// data: this.$http.adornData({
					page: this.detailPage,
					limit: this.detailLimit,
					mainId: this.mainId,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					let returnData = data.data;
					this.detailTableData = returnData;
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
				this.detailTableDataLoading = false;
			});
		},

		//分页
		handleDetailSizeChange(val) {
			this.detailLimit = val;
			this.handleSelectDetail();
		},

		//翻页
		handleDetailCurrentChange(val) {
			this.detailPage = val;
			this.handleSelectDetail();
		},

		//修改状态
		changeDetailStatus(row){
			this.$http({
				url: this.$http.adornUrl(`massage/packageDetail/updateStatus`),
				method: "post",
				params: this.$http.adornParams({
					// data: this.$http.adornData({
					massageTypeId: row.massageTypeId,
					status: row.status,
					mainId: row.mainId,
				}),
			}).then(({data}) => {
				this.$message({
					message: "操作成功",
					type: "success",
					duration: 1500,
					onClose: () => {
						this.handleSelectDetail();
					},
				});
			});
		},

		// 修改价格
		showUpdatePriceView(row) {
			this.id = row.id;
			this.mainId = row.mainId;
			this.packagePrice = row.packagePrice;
			this.dialogFormVisiblePrice = true;
		},

		// 修改价格
		updatePrice() {
			this.$http({
				url: this.$http.adornUrl("massage/packageDetail/updatePrice"),
				method: "post",
				params: this.$http.adornParams({
					// data: this.$http.adornData({
					id: this.id,
					packagePrice: this.packagePrice,
					mainId: this.mainId,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.$message({
						message: "修改成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelectDetail();
						},
					});
					this.dialogFormVisiblePrice = false;
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},

		// 修改次数
		showUpdateCountView(row) {
			this.id = row.id;
			this.mainId = row.mainId;
			this.serviceCount = row.serviceCount;
			this.dialogFormVisibleCount = true;
		},

		// 修改次数
		updateCount() {
			this.$http({
				url: this.$http.adornUrl("massage/packageDetail/updateCount"),
				method: "post",
				params: this.$http.adornParams({
					// data: this.$http.adornData({
					id: this.id,
					serviceCount: this.serviceCount,
					mainId: this.mainId,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.$message({
						message: "修改成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelectDetail();
						},
					});
					this.dialogFormVisibleCount = false;
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},

		// 修改间隔
		showUpdateDaysView(row) {
			this.id = row.id;
			this.intervalDays = row.intervalDays;
			this.dialogFormVisibleIntervalDays = true;
		},

		// 修改间隔
		updateIntervalDays() {
			this.$http({
				url: this.$http.adornUrl("massage/packageDetail/updateIntervalDays"),
				method: "post",
				params: this.$http.adornParams({
					// data: this.$http.adornData({
					id: this.id,
					intervalDays: this.intervalDays,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.$message({
						message: "修改成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelectDetail();
						},
					});
					this.dialogFormVisibleIntervalDays = false;
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},

		handleDeleteDetail(row){
			this.$confirm(`确定删除此条信息?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.$http({
						url: this.$http.adornUrl("massage/packageDetail/delete"),
						method: "post",
						params: this.$http.adornParams({
							// data: this.$http.adornData({
							id: row.id,
							mainId: row.mainId
						}),
					}).then(({data}) => {
						if (data.code == 0) {
							this.$message({
								message: "删除成功",
								type: "success",
								duration: 1500,
								onClose: () => {
									this.handleSelectDetail();
								},
							});
						} else {
							this.$message({
								message: data.msg,
								type: "warning",
								duration: 1500,
								onClose: () => {
								},
							});
						}
					});
				})
				.catch(() => {
				});
		},

		//封面图片上传
		handleMassageImgSuccess(file) {
			this.massageImg = file.data;
		},
		//封面图片上传
		onMassageImgProgress(event, file, fileList) {
			this.massageImgPercentage = parseInt(event.percent);
		},

		handleAddMassage(){
			var list = this.detailTableData.list;
			if (list.length > 0) {
				var fwxmtype = this.fwxmtype;
				if(fwxmtype==104){
				}else{
					this.$notify({
						title: "提示",
						duration: 1800,
						message: "只有【服务套餐】可以配置多条服务项目！",
						type: "warning",
					});
					return ;
				}
			}
			this.title = "";
			this.status = 1;
			this.sales = "0";
			this.price = "";
			this.oldPrice = "";
			this.massageTypeId = "";
			this.massageImg = "";
			this.isSex = 0;
			this.duration = "";
			this.applyPeople = "";
			this.contentImg = [];
			this.content = "";
			this.city = "";
			this.labelsArr = [];
			this.storeAddre = "请选择城市";
			this.type = "";
			this.jianjie = "";
			this.level = "";
			this.serviceCount = 1;
			this.intervalDays = 0;
			this.dialogFormVisibleAddMassage = true;
		},

		//提交新增服务项目
		handleAddMassageSubmit(){
			if (this.type == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请选择项目类型",
					type: "warning",
				});
				return;
			}
			if (this.title == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入项目名称",
					type: "warning",
				});
				return;
			}
			if (this.massageImg == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请上传项目图片",
					type: "warning",
				});
				return;
			}
			if (this.contentImg.length == 0) {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请上传项目详情图片',
					type: 'warning'
				})
				return
			}
			if (this.duration == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入时长",
					type: "warning",
				});
				return;
			}
			if (this.isSex === '') {
				this.$notify({
					title: '提示',
					duration: 1800,
					message: '请选择性别要求',
					type: 'warning'
				})
				return
			}
			if (this.oldPrice == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入原价",
					type: "warning",
				});
				return;
			}
			if (this.price == "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请输入现价",
					type: "warning",
				});
				return;
			}
			if (this.status === "") {
				this.$notify({
					title: "提示",
					duration: 1800,
					message: "请选择状态",
					type: "warning",
				});
				return;
			}
			this.$http({
				url: this.$http.adornUrl("massage/packageDetail/insertDetail"),
				method: "post",
				params: this.$http.adornParams({
				// data: this.$http.adornData({
					title: this.title,
					status: this.status,
					sales: this.sales,
					price: this.price,
					oldPrice: this.oldPrice,
					massageImg: this.massageImg,
					isSex: this.isSex,
					applyPeople: this.applyPeople,
					duration: this.duration,
					contentImg: this.contentImg.toString(),
					content: this.content,
					city: this.city,
					labels: this.labelsArr.toString(),
					type: this.type,
					jianjie: this.jianjie,
					mainId: this.mainId,
					packagePrice: this.price,
					serviceCount: this.serviceCount,
					intervalDays: this.intervalDays,
				}),
			}).then(({ data }) => {
				if (data.code == 0) {
					this.dialogFormVisibleAddMassage = false;
					this.clearMassageDatas();
					this.$message({
						message: "操作成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelectDetail();
						},
					});
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {},
					});
				}
			});
		},

		handleAddToDetail(row){
			this.$http({
				url: this.$http.adornUrl("massage/packageDetail/add"),
				method: "post",
				params: this.$http.adornParams({
				// data: this.$http.adornData({
					mainId: this.mainId,
					packagePrice: row.price,
					massageTypeId: row.massageTypeId,
					serviceCount: this.serviceCount,
					intervalDays: this.intervalDays,
				}),
			}).then(({ data }) => {
				if (data.code == 0) {
					this.dialogFormVisibleMassageList = false;
					this.clearMassageDatas();
					this.$message({
						message: "操作成功",
						type: "success",
						duration: 1500,
						onClose: () => {
							this.handleSelectDetail();
						},
					});
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {},
					});
				}
			});
		},

		showMassageView(){
			var list = this.detailTableData.list;
			var fwxmtype = this.fwxmtype;
			if(list.length>0){
				if(fwxmtype==104){
				}else{
					this.$notify({
						title: "提示",
						duration: 1800,
						message: "只有【服务套餐】可以配置多条服务项目！",
						type: "warning",
					});
					return;
				}
			}
			this.serviceCount = 1;
			this.intervalDays = 0;
			this.handleSelectMassage();
			this.dialogFormVisibleMassageList = true;
		},

		handleSelectMassage(){
			this.massageTableDataLoading = true;
			this.$http({
				url: this.$http.adornUrl("massage/packageDetail/findMassagePage"),
				method: "get",
				params: this.$http.adornParams({
					// data: this.$http.adornData({
					page: this.massagePage,
					limit: this.massageLimit,
					title: this.massageTitle,
					type: this.massageType,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					let returnData = data.data;
					this.massageData = returnData;
				} else {
					this.$notify({
						title: "提示",
						duration: 1800,
						message: data.msg,
						type: "warning",
					});
				}
				this.massageTableDataLoading = false;
			});
		},

		// 重置
		handleClearMassage() {
			this.massageType = "";
			this.massageTitle = "";
			this.massagePage = 1;
			this.handleSelectMassage();
		},

		//分页
		handleMassageSizeChange(val) {
			this.massageLimit = val;
			this.handleSelectMassage();
		},

		//翻页
		handleMassageCurrentChange(val) {
			this.massagePage = val;
			this.handleSelectMassage();
		},

		clearMassageDatas(){
			this.apiUrl="";
			this.detailTableDataLoading= false;
			this.id= "";//编号
			this.title= "";//标题
			this.type= "";//服务类型
			this.oldPrice= "";//原价
			this.price= "";//现价
			this.massageImg= "";//图片
			this.content= "";//简介
			this.contentImg= []; //详情图
			this.status= "";//状态
			this.esteemRate= "";//好评率
			this.sales= "";//销量
			this.labels= "";//标签
			this.city= "";//城市
			this.createTime= "";//创建时间
			this.detailPage= 1;
			this.detailLimit= 10;
			this.openValue= 1;
			this.closeValue= 2;
			this.dialogFormVisibleAddMassage= false;
			this.titles= "添加服务包";
			this.label="";
			this.labelsArr= []; //标签集合
			this.storeAddress= [];
			this.storeAddre= "请选择城市";
			this.province= ""; //省
		},
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<服务项目<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

		showBuyView(row){
			this.packageId = row.id;
			this.userId = 624;
			this.quantity = 1;
			this.couponId = "";
			this.packagePrice = row.price;//单价

			this.vipRate = 90;
			this.oldSumMoney = 985;
			this.sumMoney = 835;

			this.dialogFormVisibleBuy = true;
		},

		handleBuy(){
			if(this.quantity <= 0){
				this.$message({
					message: "购买失败，购买数量必须大于0！",
					type: "warning",
					duration: 1500
				});
				return;
			}
			this.$http({
				url: this.$http.adornUrl("app/user/package/order/insertOrders"),
				method: "post",
				// params: this.$http.adornParams({
				data: this.$http.adornData({
					ordersPackageList: [{
						packageId: this.packageId,
						num: this.quantity,
					}],
					vipRate: this.vipRate,
					oldSumMoney: this.oldSumMoney,
					sumMoney: this.sumMoney,
					couponId: this.couponId,
					userId: this.userId,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.$message({
						message: "购买成功",
						type: "success",
						duration: 1500,
						onClose: () => {
						},
					});
					this.dialogFormVisibleBuy = false;
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},

		showPayView(){
			this.ordersId = "";
			this.dialogFormVisiblePay = true;
		},

		handlePay(){
			this.$http({
				url: this.$http.adornUrl("app/user/package/order/payOrder"),
				method: "post",
				params: this.$http.adornParams({
				// data: this.$http.adornData({
					ordersId: this.ordersId,
				}),
			}).then(({data}) => {
				if (data.code == 0) {
					this.$message({
						message: "支付成功",
						type: "success",
						duration: 1500,
						onClose: () => {
						},
					});
					this.dialogFormVisiblePay = false;
				} else {
					this.$message({
						message: data.msg,
						type: "warning",
						duration: 1500,
						onClose: () => {
						},
					});
				}
			});
		},
	},
	mounted() {
		this.handleSelect();
		this.typeDictSelect();
		this.fwSelect();
	},
};
</script>

<style>
.customWidth {
	width: 80% !important;
}
.el-dialog--center {
	text-align: center;
 	margin-top: 1vh !important;
}

.el-tooltip__popper {
width: 200px;
padding: 10px;
color: #000 !important;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
background-color: #fff !important;
}

.adver_main.box a {
display: flex;
justify-content: center;
height: 150px;
line-height: 150px;
text-decoration: none;
}

.bannerManin span {
display: inline-block;
margin-left: 5px;
}

.bannerManin img {
width: 48px;
height: 48px;
border-radius: 50%;
}

.bannerbtn a {
flex: 1;
text-align: center;
color: #3e8ef7 !important;
text-decoration: none;
}

.imgs {
position: relative;
border-radius: 6px;
width: 148px;
height: 148px;
margin-right: 10px;
display: inline-block;
}

.dels {
position: absolute;
top: 0;
left: 0;
display: none;
}

.dels .el-icon-delete {
line-height: 148px;
padding-left: 58px;
font-size: 25px;
color: #fff;
}

.imgs:hover .dels {
width: 100%;
height: 100%;
background: #000;
display: block;
opacity: 0.5;
}

.bqList {
padding: 4px 14px;
margin: 4px;
border: 1px solid #efefef;
font-size: 12px;
color: #999;
border-radius: 4px;
margin-right: 15px;
}

.delss {
display: none;
position: relative;
}

.delss .el-icon-delete {
position: absolute;
top: 0;
}

.bqList:hover .delss {
display: initial;
opacity: 0.5;
}

.tj {
padding: 6px !important;
margin: 4px;
font-size: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
</style>