|
|
<template>
|
|
|
<view class="container">
|
|
|
<HeaderCustom
|
|
|
:title="props.id ? '门店修改' : '门店新增'"
|
|
|
:showBack="true"
|
|
|
></HeaderCustom>
|
|
|
<div class="contentBox">
|
|
|
<div class="title">基本信息</div>
|
|
|
<div class="formBox">
|
|
|
<uv-form
|
|
|
labelPosition="left"
|
|
|
:model="formField"
|
|
|
labelWidth="100"
|
|
|
:rules="rules"
|
|
|
ref="form"
|
|
|
>
|
|
|
<uv-form-item required label="门店名称" prop="store_name">
|
|
|
<uv-input
|
|
|
v-model="formField.store_name"
|
|
|
border="none"
|
|
|
placeholder="请输入门店名称"
|
|
|
></uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item label="地区" prop="location" @click="openAddressPicker">
|
|
|
<uv-input
|
|
|
v-model="formField.location"
|
|
|
readonly
|
|
|
border="none"
|
|
|
placeholder="请选择地区"
|
|
|
></uv-input>
|
|
|
<uv-picker
|
|
|
ref="addressPicker"
|
|
|
:columns="addressList"
|
|
|
keyName="name"
|
|
|
@change="addressChange"
|
|
|
@confirm="confirm"
|
|
|
></uv-picker>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item label="地址详情" prop="address">
|
|
|
<uv-input
|
|
|
v-model="formField.address"
|
|
|
border="none"
|
|
|
placeholder="请输入地址详情"
|
|
|
></uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item label="工作时间" prop="business_hours">
|
|
|
<uv-input
|
|
|
v-model="formField.business_hours"
|
|
|
border="none"
|
|
|
placeholder="请输入工作时间"
|
|
|
></uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item label="联系电话" prop="contact_phone">
|
|
|
<uv-input
|
|
|
v-model="formField.contact_phone"
|
|
|
border="none"
|
|
|
placeholder="请输入联系电话"
|
|
|
></uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item label="分类标签" prop="tags">
|
|
|
<uv-input
|
|
|
v-model="formField.tags"
|
|
|
border="none"
|
|
|
placeholder="请输入分类标签，多个以,分隔"
|
|
|
></uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item label="经度" prop="longitude" @click="chooseAdress">
|
|
|
<uv-input
|
|
|
readonly
|
|
|
v-model="formField.longitude"
|
|
|
border="none"
|
|
|
placeholder="点击选择经纬度"
|
|
|
></uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item label="纬度" prop="latitude" @click="chooseAdress">
|
|
|
<uv-input
|
|
|
readonly
|
|
|
v-model="formField.latitude"
|
|
|
border="none"
|
|
|
placeholder="点击选择经纬度"
|
|
|
></uv-input>
|
|
|
</uv-form-item>
|
|
|
<uv-form-item label="门店主图" prop="main_image">
|
|
|
<div class="main_imageBox">
|
|
|
<div class="closeBox">
|
|
|
<uv-icon
|
|
|
color="#f12323"
|
|
|
v-if="formField.main_image"
|
|
|
name="close-circle"
|
|
|
stop
|
|
|
size="28"
|
|
|
@click="() => (formField.main_image = '')"
|
|
|
></uv-icon>
|
|
|
</div>
|
|
|
<img
|
|
|
@click="previewImage(formField.main_image)"
|
|
|
v-if="formField.main_image"
|
|
|
class="img"
|
|
|
:src="formField.main_image"
|
|
|
alt=""
|
|
|
/>
|
|
|
<UploadFile
|
|
|
v-else
|
|
|
ref="imageUploadRef"
|
|
|
:accept="'.jpg,.jpeg,.png,.gif'"
|
|
|
:maxSize="5"
|
|
|
@onSuccess="handleUploadSuccess"
|
|
|
/>
|
|
|
</div>
|
|
|
</uv-form-item>
|
|
|
</uv-form>
|
|
|
</div>
|
|
|
<div class="title">上传视频</div>
|
|
|
<div class="videoBox">
|
|
|
<div class="video_content">
|
|
|
<div class="closeBox">
|
|
|
<uv-icon
|
|
|
color="#f12323"
|
|
|
v-if="formField.video_intro"
|
|
|
name="close-circle"
|
|
|
stop
|
|
|
size="28"
|
|
|
@click="() => (formField.video_intro = '')"
|
|
|
></uv-icon>
|
|
|
</div>
|
|
|
<video
|
|
|
v-if="formField.video_intro"
|
|
|
class="video"
|
|
|
:src="formField.video_intro"
|
|
|
controls
|
|
|
></video>
|
|
|
<UploadFile
|
|
|
v-else
|
|
|
ref="videoUploadRef"
|
|
|
:accept="'.mp4,.avi,.mov'"
|
|
|
:maxSize="50"
|
|
|
@onSuccess="handleVideoUploadSuccess"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
产品图片
|
|
|
<text class="sort-tip" v-if="productImgList.length > 1">
|
|
|
长按图片可排序
|
|
|
</text>
|
|
|
</div>
|
|
|
<div class="detail_img_box">
|
|
|
<div
|
|
|
class="detail_img_item"
|
|
|
v-for="(item, index) in productImgList"
|
|
|
:key="item"
|
|
|
@longpress="showSortMenu(index)"
|
|
|
>
|
|
|
<div class="closeBox">
|
|
|
<uv-icon
|
|
|
color="#f12323"
|
|
|
name="close-circle"
|
|
|
stop
|
|
|
size="28"
|
|
|
@click.stop="
|
|
|
() =>
|
|
|
(productImgList = productImgList.filter(
|
|
|
(ele) => ele !== item
|
|
|
))
|
|
|
"
|
|
|
></uv-icon>
|
|
|
</div>
|
|
|
<img
|
|
|
@click="previewImageArr(productImgList, index)"
|
|
|
class="img"
|
|
|
:src="item"
|
|
|
alt=""
|
|
|
/>
|
|
|
<div class="sort-index">{{ index + 1 }}</div>
|
|
|
</div>
|
|
|
<div class="detail_img_item">
|
|
|
<UploadFile
|
|
|
:accept="'.jpg,.jpeg,.png,.gif'"
|
|
|
:maxSize="5"
|
|
|
@onSuccess="productImgSuccess"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
企业资质
|
|
|
<text class="sort-tip" v-if="businessImgList.length > 1">
|
|
|
长按图片可排序
|
|
|
</text>
|
|
|
</div>
|
|
|
<div class="detail_img_box">
|
|
|
<div
|
|
|
class="detail_img_item"
|
|
|
v-for="(item, index) in businessImgList"
|
|
|
:key="item"
|
|
|
@longpress="showBusinessSortMenu(index)"
|
|
|
>
|
|
|
<div class="closeBox">
|
|
|
<uv-icon
|
|
|
color="#f12323"
|
|
|
name="close-circle"
|
|
|
stop
|
|
|
size="28"
|
|
|
@click.stop="
|
|
|
() =>
|
|
|
(businessImgList = businessImgList.filter(
|
|
|
(ele) => ele !== item
|
|
|
))
|
|
|
"
|
|
|
></uv-icon>
|
|
|
</div>
|
|
|
<img
|
|
|
@click="previewImageArr(businessImgList, index)"
|
|
|
class="img"
|
|
|
:src="item"
|
|
|
alt=""
|
|
|
/>
|
|
|
<div class="sort-index">{{ index + 1 }}</div>
|
|
|
</div>
|
|
|
<div class="detail_img_item">
|
|
|
<UploadFile
|
|
|
:accept="'.jpg,.jpeg,.png,.gif'"
|
|
|
:maxSize="5"
|
|
|
@onSuccess="businessImgSuccess"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="title">
|
|
|
产品资料PDF
|
|
|
<text class="sort-tip" v-if="pdfList.length > 1">长按文件可排序</text>
|
|
|
</div>
|
|
|
<div class="pdf_box">
|
|
|
<div
|
|
|
class="pdf_item"
|
|
|
v-for="(item, index) in pdfList"
|
|
|
:key="item.url"
|
|
|
@click="openPdf(item)"
|
|
|
@longpress="showPdfSortMenu(index)"
|
|
|
>
|
|
|
<div class="pdf_icon">
|
|
|
<uv-icon name="file-text-fill" color="#2979ff" size="48"></uv-icon>
|
|
|
</div>
|
|
|
<div class="nameBox">
|
|
|
<div class="name">{{ item.name }}</div>
|
|
|
<div class="pdfInfoBox">
|
|
|
<div class="size">{{ item.size }}MB</div>
|
|
|
<div class="date">{{ item.date }}</div>
|
|
|
<!-- <div class="time">{{item.time}}</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="sort-index pdf-sort-index">{{ index + 1 }}</div>
|
|
|
<div class="pdfCloseBox">
|
|
|
<uv-icon
|
|
|
color="#f12323"
|
|
|
name="close-circle"
|
|
|
stop
|
|
|
size="28"
|
|
|
@click.stop="
|
|
|
() => (pdfList = pdfList.filter((ele) => ele.url !== item.url))
|
|
|
"
|
|
|
></uv-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="pdf_item">
|
|
|
<UploadFile :accept="'pdf'" :maxSize="50" @onSuccess="pdfSuccess" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<uv-button
|
|
|
type="primary"
|
|
|
text="提交"
|
|
|
customStyle="margin-top: 10px"
|
|
|
@click="submit"
|
|
|
></uv-button>
|
|
|
</div>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { computed, onMounted, ref } from "vue";
|
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
|
import { useAuthStore, useUserStore } from "@/store";
|
|
|
import { regions } from "/static/json/regions.js";
|
|
|
import HeaderCustom from "/components/HeaderCustom/HeaderCustom.vue";
|
|
|
import RPC from "@/utils/request";
|
|
|
import dayjs from "dayjs";
|
|
|
|
|
|
const props = defineProps({
|
|
|
id: [String],
|
|
|
});
|
|
|
console.log("props", props.id);
|
|
|
if (props.id && props.id !== "null") {
|
|
|
RPC.post("/store/detail", {
|
|
|
id: Number(props.id),
|
|
|
}).then((res) => {
|
|
|
formField.value = {
|
|
|
...res.store,
|
|
|
};
|
|
|
productImgList.value = res.store.product_images
|
|
|
? res.store.product_images.split(",")
|
|
|
: [];
|
|
|
businessImgList.value = res.store.product_images
|
|
|
? res.store.qualification_images.split(",")
|
|
|
: [];
|
|
|
pdfList.value = res.store.product_pdfs
|
|
|
? JSON.parse(res.store.product_pdfs)
|
|
|
: [];
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const previewImage = (url) => {
|
|
|
uni.previewImage({
|
|
|
urls: [url],
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const previewImageArr = (arr, index) => {
|
|
|
uni.previewImage({
|
|
|
urls: arr,
|
|
|
current: index,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const openPdf = (item) => {
|
|
|
uni.downloadFile({
|
|
|
url: item.url,
|
|
|
success: function (res) {
|
|
|
var filePath = res.tempFilePath;
|
|
|
uni.openDocument({
|
|
|
filePath: filePath,
|
|
|
showMenu: true,
|
|
|
success: function (res) {
|
|
|
console.log("打开文档成功");
|
|
|
},
|
|
|
});
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const productImgList = ref([]);
|
|
|
const businessImgList = ref([]);
|
|
|
const pdfList = ref([
|
|
|
// {url:'1',name:'同理电梯产品介绍1',size:8.82,date:'07-19',time:'12:25'},
|
|
|
// {url:'32',name:'同理电梯产品介绍2',size:8.82,date:'07-19',time:'12:25'},
|
|
|
// {url:'3',name:'同理电梯产品介绍3',size:8.82,date:'07-19',time:'12:25'},
|
|
|
]);
|
|
|
|
|
|
// 排序相关数据
|
|
|
const currentSortIndex = ref(-1);
|
|
|
|
|
|
const productImgSuccess = (result) => {
|
|
|
console.log("上传成功:", result);
|
|
|
productImgList.value.push(result.response.result.fullUrl);
|
|
|
console.log(productImgList.value);
|
|
|
// 这里可以处理服务器返回的数据
|
|
|
// result.response 包含服务器返回的数据
|
|
|
// result.fileInfo 包含文件信息
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "上传成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const businessImgSuccess = (result) => {
|
|
|
console.log("上传成功:", result);
|
|
|
businessImgList.value.push(result.response.result.fullUrl);
|
|
|
console.log(businessImgList.value);
|
|
|
// 这里可以处理服务器返回的数据
|
|
|
// result.response 包含服务器返回的数据
|
|
|
// result.fileInfo 包含文件信息
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "上传成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const pdfSuccessList = ref([]);
|
|
|
|
|
|
const pdfSuccess = (result) => {
|
|
|
console.log("上传成功:", result);
|
|
|
pdfList.value.push({
|
|
|
url: result.response.result.fullUrl,
|
|
|
name: result.fileInfo.name,
|
|
|
size: (result.fileInfo.size / 1024 / 1024).toFixed(2),
|
|
|
date: dayjs().format("YYYY-MM-DD HH:mm"),
|
|
|
// time:dayjs().format('HH:mm')
|
|
|
});
|
|
|
console.log(pdfList.value);
|
|
|
// 这里可以处理服务器返回的数据
|
|
|
// result.response 包含服务器返回的数据
|
|
|
// result.fileInfo 包含文件信息
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "上传成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const handleUploadSuccess = (result) => {
|
|
|
console.log("上传成功:", result);
|
|
|
formField.value.main_image = result.response.result.fullUrl;
|
|
|
console.log(formField.value.main_image);
|
|
|
// 这里可以处理服务器返回的数据
|
|
|
// result.response 包含服务器返回的数据
|
|
|
// result.fileInfo 包含文件信息
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "上传成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
};
|
|
|
const handleVideoUploadSuccess = (result) => {
|
|
|
console.log("上传成功:", result);
|
|
|
formField.value.video_intro = result.response.result.fullUrl;
|
|
|
console.log(formField.value.video_intro);
|
|
|
// 这里可以处理服务器返回的数据
|
|
|
// result.response 包含服务器返回的数据
|
|
|
// result.fileInfo 包含文件信息
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "上传成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const authStore = useAuthStore();
|
|
|
const userStore = useUserStore();
|
|
|
|
|
|
function copyText(text) {
|
|
|
uni.setClipboardData({
|
|
|
data: text,
|
|
|
success: function () {
|
|
|
uni.showToast({
|
|
|
title: "复制成功",
|
|
|
icon: "success",
|
|
|
});
|
|
|
},
|
|
|
fail: function () {
|
|
|
uni.showToast({
|
|
|
title: "复制失败",
|
|
|
icon: "none",
|
|
|
});
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
|
|
|
const chooseAdress = () => {
|
|
|
uni.chooseLocation({
|
|
|
success: (res) => {
|
|
|
formField.value.longitude = res.longitude;
|
|
|
formField.value.latitude = res.latitude;
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.error("选择位置失败：", err);
|
|
|
// 检查是否是因为权限问题
|
|
|
if (err.errMsg.includes("auth deny")) {
|
|
|
uni.showModal({
|
|
|
title: "提示",
|
|
|
content: "需要您授权使用位置信息",
|
|
|
confirmText: "去设置",
|
|
|
success: (res) => {
|
|
|
if (res.confirm) {
|
|
|
uni.openSetting({
|
|
|
success: (settingRes) => {
|
|
|
console.log("设置结果：", settingRes);
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
} else {
|
|
|
uni.showToast({
|
|
|
title: "选择位置失败",
|
|
|
icon: "none",
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
});
|
|
|
};
|
|
|
onShow(() => {
|
|
|
if (!authStore?.isLoggedIn) {
|
|
|
uni.switchTab({
|
|
|
url: `/pages/index/index`,
|
|
|
});
|
|
|
uni.showToast({
|
|
|
title: "请先登录",
|
|
|
icon: "none",
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
});
|
|
|
|
|
|
const form = ref(null);
|
|
|
const formField = ref({
|
|
|
store_name: "",
|
|
|
latitude: "",
|
|
|
longitude: "",
|
|
|
});
|
|
|
const pickType = (type) => {
|
|
|
const index = formField.value.type.findIndex((item) => item === type);
|
|
|
if (index >= 0) {
|
|
|
formField.value.type.splice(index, 1);
|
|
|
} else {
|
|
|
formField.value.type.push(type);
|
|
|
}
|
|
|
};
|
|
|
const rules = {
|
|
|
store_name: {
|
|
|
type: "string",
|
|
|
required: true,
|
|
|
message: "请填写门店名称",
|
|
|
trigger: ["blur", "change"],
|
|
|
},
|
|
|
latitude: {
|
|
|
type: "number",
|
|
|
required: true,
|
|
|
message: "请选择经纬度",
|
|
|
trigger: ["blur", "change"],
|
|
|
},
|
|
|
longitude: {
|
|
|
type: "number",
|
|
|
required: true,
|
|
|
message: "请选择经纬度",
|
|
|
trigger: ["blur", "change"],
|
|
|
},
|
|
|
};
|
|
|
const submit = () => {
|
|
|
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
|
|
form.value
|
|
|
.validate()
|
|
|
.then((res) => {
|
|
|
// uni.showToast({
|
|
|
// icon: "success",
|
|
|
// title: "校验成功",
|
|
|
// });
|
|
|
const store = {
|
|
|
...formField.value,
|
|
|
product_images: productImgList.value.join(","),
|
|
|
qualification_images: businessImgList.value.join(","),
|
|
|
product_pdfs: JSON.stringify(pdfList.value),
|
|
|
};
|
|
|
console.log("store", store, productImgList.value);
|
|
|
if (props.id) {
|
|
|
RPC.post("/store/update", {
|
|
|
store,
|
|
|
id: Number(props.id),
|
|
|
}).then((res) => {
|
|
|
uni.showToast({
|
|
|
icon: "success",
|
|
|
title: "操作成功",
|
|
|
});
|
|
|
setTimeout(() => {
|
|
|
uni.navigateBack();
|
|
|
}, 1000);
|
|
|
});
|
|
|
} else {
|
|
|
RPC.post("/store/create", {
|
|
|
store,
|
|
|
}).then((res) => {
|
|
|
uni.showToast({
|
|
|
icon: "success",
|
|
|
title: "操作成功",
|
|
|
});
|
|
|
setTimeout(() => {
|
|
|
uni.navigateBack();
|
|
|
}, 1000);
|
|
|
});
|
|
|
}
|
|
|
})
|
|
|
.catch((errors) => {
|
|
|
// uni.showToast({
|
|
|
// icon: 'error',
|
|
|
// title: '校验失败'
|
|
|
// })
|
|
|
});
|
|
|
};
|
|
|
|
|
|
const provinces = ref([]);
|
|
|
const citys = ref([]);
|
|
|
const areas = ref([]);
|
|
|
|
|
|
const addressList = computed(() => [provinces.value, citys.value, areas.value]);
|
|
|
|
|
|
const addressPicker = ref(null);
|
|
|
|
|
|
const pickerValue = ref(["0", "0", "0"]);
|
|
|
const defaultValue = ref(["3442", "1", "2"]);
|
|
|
|
|
|
const addressChange = (e) => {
|
|
|
const { columnIndex, index, indexs } = e;
|
|
|
// 改变了省
|
|
|
if (columnIndex === 0) {
|
|
|
citys.value = provinces.value[index]?.children || [];
|
|
|
areas.value = citys.value[0]?.children || [];
|
|
|
addressPicker.value.setIndexs([index, 0, 0], true);
|
|
|
} else if (columnIndex === 1) {
|
|
|
areas.value = citys.value[index]?.children || [];
|
|
|
addressPicker.value.setIndexs(indexs, true);
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const confirm = (e) => {
|
|
|
// console.log('确认选择的地区：', e);
|
|
|
// uni.showToast({
|
|
|
// icon: 'none',
|
|
|
// title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
|
|
|
// })
|
|
|
formField.value.location = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`;
|
|
|
};
|
|
|
|
|
|
const handlePickValueDefault = () => {
|
|
|
pickerValue.value[0] = provinces.value.findIndex(
|
|
|
(item) => Number(item.id) == defaultValue.value[0]
|
|
|
);
|
|
|
// 设置市
|
|
|
citys.value = provinces.value[pickerValue.value[0]]?.children || [];
|
|
|
pickerValue.value[1] = citys.value.findIndex(
|
|
|
(item) => Number(item.id) == defaultValue.value[1]
|
|
|
);
|
|
|
// 设置区
|
|
|
areas.value = citys.value[pickerValue.value[1]]?.children || [];
|
|
|
pickerValue.value[2] = areas.value.findIndex(
|
|
|
(item) => Number(item.id) == defaultValue.value[2]
|
|
|
);
|
|
|
// 重置下位置
|
|
|
addressPicker.value.setIndexs(
|
|
|
[pickerValue.value[0], pickerValue.value[1], pickerValue.value[2]],
|
|
|
true
|
|
|
);
|
|
|
};
|
|
|
|
|
|
const openAddressPicker = () => {
|
|
|
addressPicker.value.open();
|
|
|
handlePickValueDefault();
|
|
|
};
|
|
|
|
|
|
const getData = () => {
|
|
|
provinces.value = regions.sort((left, right) =>
|
|
|
Number(left.code) > Number(right.code) ? 1 : -1
|
|
|
);
|
|
|
handlePickValueDefault();
|
|
|
};
|
|
|
// 显示排序菜单
|
|
|
const showSortMenu = (index) => {
|
|
|
if (productImgList.value.length <= 1) return;
|
|
|
|
|
|
currentSortIndex.value = index;
|
|
|
|
|
|
// 生成菜单选项
|
|
|
const itemList = productImgList.value.map((_, i) => `移动到第${i + 1}位`);
|
|
|
|
|
|
uni.showActionSheet({
|
|
|
itemList: ["向前移动", "向后移动", "移动到开头", "移动到末尾"],
|
|
|
success: (res) => {
|
|
|
const tapIndex = res.tapIndex;
|
|
|
switch (tapIndex) {
|
|
|
case 0: // 向前移动
|
|
|
if (index > 0) {
|
|
|
moveImage(index, index - 1);
|
|
|
}
|
|
|
break;
|
|
|
case 1: // 向后移动
|
|
|
if (index < productImgList.value.length - 1) {
|
|
|
moveImage(index, index + 1);
|
|
|
}
|
|
|
break;
|
|
|
case 2: // 移动到开头
|
|
|
if (index > 0) {
|
|
|
moveImage(index, 0);
|
|
|
}
|
|
|
break;
|
|
|
case 3: // 移动到末尾
|
|
|
if (index < productImgList.value.length - 1) {
|
|
|
moveImage(index, productImgList.value.length - 1);
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
fail: () => {
|
|
|
currentSortIndex.value = -1;
|
|
|
},
|
|
|
});
|
|
|
|
|
|
// 添加震动反馈
|
|
|
uni.vibrateShort({
|
|
|
type: "medium",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 移动图片位置的方法
|
|
|
const moveImage = (fromIndex, toIndex) => {
|
|
|
if (fromIndex === toIndex) return;
|
|
|
|
|
|
const newList = [...productImgList.value];
|
|
|
const draggedItem = newList[fromIndex];
|
|
|
|
|
|
// 移除拖拽的元素
|
|
|
newList.splice(fromIndex, 1);
|
|
|
// 在新位置插入
|
|
|
newList.splice(toIndex, 0, draggedItem);
|
|
|
|
|
|
productImgList.value = newList;
|
|
|
currentSortIndex.value = -1;
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "排序成功",
|
|
|
icon: "success",
|
|
|
duration: 1000,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 显示企业资质排序菜单
|
|
|
const showBusinessSortMenu = (index) => {
|
|
|
if (businessImgList.value.length <= 1) return;
|
|
|
|
|
|
currentSortIndex.value = index;
|
|
|
|
|
|
uni.showActionSheet({
|
|
|
itemList: ["向前移动", "向后移动", "移动到开头", "移动到末尾"],
|
|
|
success: (res) => {
|
|
|
const tapIndex = res.tapIndex;
|
|
|
switch (tapIndex) {
|
|
|
case 0: // 向前移动
|
|
|
if (index > 0) {
|
|
|
moveBusinessImage(index, index - 1);
|
|
|
}
|
|
|
break;
|
|
|
case 1: // 向后移动
|
|
|
if (index < businessImgList.value.length - 1) {
|
|
|
moveBusinessImage(index, index + 1);
|
|
|
}
|
|
|
break;
|
|
|
case 2: // 移动到开头
|
|
|
if (index > 0) {
|
|
|
moveBusinessImage(index, 0);
|
|
|
}
|
|
|
break;
|
|
|
case 3: // 移动到末尾
|
|
|
if (index < businessImgList.value.length - 1) {
|
|
|
moveBusinessImage(index, businessImgList.value.length - 1);
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
fail: () => {
|
|
|
currentSortIndex.value = -1;
|
|
|
},
|
|
|
});
|
|
|
|
|
|
// 添加震动反馈
|
|
|
uni.vibrateShort({
|
|
|
type: "medium",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 移动企业资质图片位置的方法
|
|
|
const moveBusinessImage = (fromIndex, toIndex) => {
|
|
|
if (fromIndex === toIndex) return;
|
|
|
|
|
|
const newList = [...businessImgList.value];
|
|
|
const draggedItem = newList[fromIndex];
|
|
|
|
|
|
// 移除拖拽的元素
|
|
|
newList.splice(fromIndex, 1);
|
|
|
// 在新位置插入
|
|
|
newList.splice(toIndex, 0, draggedItem);
|
|
|
|
|
|
businessImgList.value = newList;
|
|
|
currentSortIndex.value = -1;
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "排序成功",
|
|
|
icon: "success",
|
|
|
duration: 1000,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 显示PDF排序菜单
|
|
|
const showPdfSortMenu = (index) => {
|
|
|
if (pdfList.value.length <= 1) return;
|
|
|
|
|
|
currentSortIndex.value = index;
|
|
|
|
|
|
uni.showActionSheet({
|
|
|
itemList: ["向前移动", "向后移动", "移动到开头", "移动到末尾"],
|
|
|
success: (res) => {
|
|
|
const tapIndex = res.tapIndex;
|
|
|
switch (tapIndex) {
|
|
|
case 0: // 向前移动
|
|
|
if (index > 0) {
|
|
|
movePdf(index, index - 1);
|
|
|
}
|
|
|
break;
|
|
|
case 1: // 向后移动
|
|
|
if (index < pdfList.value.length - 1) {
|
|
|
movePdf(index, index + 1);
|
|
|
}
|
|
|
break;
|
|
|
case 2: // 移动到开头
|
|
|
if (index > 0) {
|
|
|
movePdf(index, 0);
|
|
|
}
|
|
|
break;
|
|
|
case 3: // 移动到末尾
|
|
|
if (index < pdfList.value.length - 1) {
|
|
|
movePdf(index, pdfList.value.length - 1);
|
|
|
}
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
fail: () => {
|
|
|
currentSortIndex.value = -1;
|
|
|
},
|
|
|
});
|
|
|
|
|
|
// 添加震动反馈
|
|
|
uni.vibrateShort({
|
|
|
type: "medium",
|
|
|
});
|
|
|
};
|
|
|
|
|
|
// 移动PDF位置的方法
|
|
|
const movePdf = (fromIndex, toIndex) => {
|
|
|
if (fromIndex === toIndex) return;
|
|
|
|
|
|
const newList = [...pdfList.value];
|
|
|
const draggedItem = newList[fromIndex];
|
|
|
|
|
|
// 移除拖拽的元素
|
|
|
newList.splice(fromIndex, 1);
|
|
|
// 在新位置插入
|
|
|
newList.splice(toIndex, 0, draggedItem);
|
|
|
|
|
|
pdfList.value = newList;
|
|
|
currentSortIndex.value = -1;
|
|
|
|
|
|
uni.showToast({
|
|
|
title: "排序成功",
|
|
|
icon: "success",
|
|
|
duration: 1000,
|
|
|
});
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
getData();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.container {
|
|
|
font-size: 14px;
|
|
|
min-height: 100vh;
|
|
|
background-color: #f8f8f8;
|
|
|
}
|
|
|
|
|
|
.contentBox {
|
|
|
padding: 10px;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
|
font-size: 16px;
|
|
|
font-weight: 700;
|
|
|
margin-bottom: 5px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
|
|
|
.sort-tip {
|
|
|
font-size: 12px;
|
|
|
color: #999;
|
|
|
font-weight: normal;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.main_imageBox {
|
|
|
position: relative;
|
|
|
width: 180px;
|
|
|
height: 60px;
|
|
|
|
|
|
.img {
|
|
|
max-width: 100%;
|
|
|
max-height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.closeBox {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
right: 0;
|
|
|
z-index: 999;
|
|
|
}
|
|
|
|
|
|
.formBox {
|
|
|
margin-bottom: 14px;
|
|
|
|
|
|
:deep(.uv-form) {
|
|
|
background-color: #fff;
|
|
|
padding: 10px;
|
|
|
border-radius: 10px;
|
|
|
|
|
|
.uv-form-item {
|
|
|
background-color: #f4f4f4;
|
|
|
margin-bottom: 10px;
|
|
|
border-radius: 10px;
|
|
|
padding-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.type_select_box {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
gap: 15px;
|
|
|
padding-right: 20px;
|
|
|
margin-top: 10px;
|
|
|
|
|
|
.item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
background-color: #fff;
|
|
|
font-size: 12px;
|
|
|
width: 90px;
|
|
|
height: 70px;
|
|
|
border-radius: 6px;
|
|
|
|
|
|
.img {
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
margin-bottom: 6px;
|
|
|
}
|
|
|
|
|
|
&.selected {
|
|
|
border: 1px solid #3f70ff;
|
|
|
background-color: rgba(63, 112, 255, 0.1);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.infoBox {
|
|
|
margin-top: 20px;
|
|
|
padding: 10px 5vw;
|
|
|
background-color: #fff;
|
|
|
border-radius: 10px;
|
|
|
font-size: 16px;
|
|
|
|
|
|
.line {
|
|
|
display: flex;
|
|
|
margin: 10px 0;
|
|
|
|
|
|
.key {
|
|
|
width: 70px;
|
|
|
font-weight: 700;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.videoBox {
|
|
|
background-color: #fff;
|
|
|
padding: 10px;
|
|
|
border-radius: 10px;
|
|
|
margin-bottom: 14px;
|
|
|
|
|
|
.video_content {
|
|
|
position: relative;
|
|
|
height: 100px;
|
|
|
}
|
|
|
|
|
|
.video {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.detail_img_box {
|
|
|
background-color: #fff;
|
|
|
padding: 10px;
|
|
|
border-radius: 10px;
|
|
|
margin-bottom: 14px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.detail_img_item {
|
|
|
width: 90px;
|
|
|
height: 90px;
|
|
|
margin-right: 16px;
|
|
|
border-radius: 5px;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
margin-bottom: 10px;
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
|
.img {
|
|
|
max-width: 100%;
|
|
|
max-height: 100%;
|
|
|
}
|
|
|
|
|
|
.sort-index {
|
|
|
position: absolute;
|
|
|
top: 2px;
|
|
|
left: 2px;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
color: white;
|
|
|
font-size: 12px;
|
|
|
padding: 2px 6px;
|
|
|
border-radius: 10px;
|
|
|
min-width: 16px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
&:active {
|
|
|
transform: scale(0.95);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pdf_box {
|
|
|
background-color: #fff;
|
|
|
padding: 10px;
|
|
|
border-radius: 10px;
|
|
|
margin-bottom: 14px;
|
|
|
|
|
|
.pdf_item {
|
|
|
display: flex;
|
|
|
border-bottom: 1px solid #ccc;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
padding: 10px 0;
|
|
|
position: relative;
|
|
|
transition: all 0.2s ease;
|
|
|
|
|
|
&:active {
|
|
|
transform: scale(0.98);
|
|
|
background-color: #f5f5f5;
|
|
|
}
|
|
|
|
|
|
.pdf_icon {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
width: 16%;
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.nameBox {
|
|
|
flex: 1;
|
|
|
|
|
|
.name {
|
|
|
font-weight: 700;
|
|
|
margin-bottom: 4px;
|
|
|
}
|
|
|
|
|
|
.pdfInfoBox {
|
|
|
font-size: 12px;
|
|
|
color: #aaa;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
.date {
|
|
|
margin: 0 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.pdf-sort-index {
|
|
|
position: absolute;
|
|
|
top: 8px;
|
|
|
left: 8px;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
color: white;
|
|
|
font-size: 12px;
|
|
|
padding: 2px 6px;
|
|
|
border-radius: 10px;
|
|
|
min-width: 16px;
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
