Files
vpUni/.svn/pristine/2c/2cb74e8f199aa96554d7289d2385a4eb70c04e65.svn-base
2026-03-09 16:39:03 +08:00

735 lines
22 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="" style="padding: 30rpx; height: 100vh; overflow: auto; ">
<view class="" style="position: relative;">
<image v-if="!storeData.photo" :src="Service.GetIconImg('/static/userFunc/null.png')"
style="border-radius: 20rpx; width: 750rpx; height: 500rpx; " mode="aspectFit" alt="" />
<image v-else :src="Service.GetMateUrlByImg(storeData.photo)"
style="border-radius: 20rpx; width: 750rpx; height: 500rpx; " mode="aspectFill" alt="" />
<view @click="uploaduserImg(750,500,'MerchShow','showImg'),imgType='logo'"
style=" display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 70rpx; height: 70rpx; position: absolute; bottom: 24rpx; right: 12rpx; background-color: #F97316; ">
<img :src="Service.GetIconImg('/static/userFunc/photo-store.png')"
style="width: 40rpx; height: 40rpx; " alt="" />
</view>
</view>
<view class=""
style=" margin-top: 20rpx; padding: 20rpx;border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #E2e2e2; ">
<up-form labelWidth='300rpx' :labelStyle="{'font-weight':600}" labelPosition="top" :model="storeData"
ref="form1">
<up-form-item label="店铺名称: " :borderBottom="true" ref="item1">
<up-input v-model="storeData.name" placeholder="请输入店铺名称" border="none"></up-input>
</up-form-item>
<up-form-item @click="showStoreClass=true" label="店铺分类: " :borderBottom="true" ref="item1">
<view class="">
<view v-if="!storeData.storeClass" class="" style="display: flex; align-items: center;">
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择店铺分类 </text>
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
</view>
<view v-else class="">
{{storeData.storeClass}}
</view>
</view>
</up-form-item>
<up-form-item label="店铺地址: " @click="chooseAddress()" :borderBottom="true" ref="item1">
<view class="">
<view v-if="!storeData.province" class="" style="display: flex; align-items: center;">
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择地址 </text>
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
</view>
<view v-else class="">
{{storeData.province+storeData.city+storeData.county}}
</view>
</view>
</up-form-item>
<up-form-item label="详细地址: " :borderBottom="true" ref="item1">
<up-input v-model="storeData.address" placeholder="请输入您的详细地址" border="none"></up-input>
</up-form-item>
<up-form-item label="平均消费金额: " :borderBottom="true" ref="item1">
<up-input v-model="storeData.price" placeholder="请输入您的平均消费金额" border="none"></up-input>
</up-form-item>
<up-form-item label="联系电话: " :borderBottom="true" ref="item1">
<up-input v-model="storeData.phone" placeholder="请输入您的联系电话" border="none"></up-input>
</up-form-item>
<up-form-item label="营业时间: " :borderBottom="true" ref="item1">
<view class="">
<view v-if="!storeData.time" @click="showDate=!showDate" class=""
style="display: flex; align-items: center;">
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择营业时间 </text>
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
</view>
<view v-else @click="showDate=!showDate" class="">
{{storeData.time}}
</view>
</view>
</up-form-item>
</up-form>
</view>
<!-- <view class=""
style="margin-top: 20rpx; padding: 20rpx;border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #E2e2e2; ">
<view style="display: flex; align-items: center; justify-content: space-between;" class="">
<view class="" style="font-weight: 600;">
店铺标签
</view>
<view class="">
<up-icon @click="showTagfunc()" name="plus" color="#000" size="16" :bold='true'></up-icon>
</view>
</view>
<view class="" style="display: grid; grid-template-columns: repeat(4,1fr); ">
<view class="tag" v-for="(item,index) in tagList" :key="index"
style=" position: relative; margin-top: 15rpx; padding: 10rpx 20rpx; border-radius: 8rpx; margin-right: 15rpx; background-color: var(--nav-mian); color: #fff; ">
{{item}}
<view class="" @click="deleTag(index)" style="position: absolute; right: -10rpx; top: -8rpx; " >
<up-icon size="12" :bold='true' color=" var(--nav-mian)" name="close"></up-icon>
</view>
</view>
</view>
</view> -->
<!-- <view class=""
style="margin-top: 20rpx; padding: 20rpx;border-radius: 20rpx; box-shadow: 0 0 10rpx 4rpx #E2e2e2; ">
<view style="display: flex; align-items: center; justify-content: space-between;" class="">
<view class="" style="font-weight: 600;">
所属社区
</view>
<view class="">
</view>
</view>
<view class="" style="padding: 15rpx 0;">
<view v-if="!storeData.community" @click="showCommunity=!showCommunity" class=""
style="display: flex; align-items: center;">
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择所属社区 </text>
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
</view>
<view v-else @click="showCommunity=!showCommunity" class="">
{{storeData.community}}
</view>
</view>
</view> -->
<view class="section" style="margin-top: 20rpx;">
<view style="font-size: 34rpx; font-weight: 600; margin-bottom: 20rpx;">商家展示图(最多三张)</view>
<view class="uploader-wrapper" style="">
<view v-if="storeData.imgs.length<3" @click="uploaduserImg(414,248,'StoreGoodsImg','轮播图'),imgType='img'"
class="upload-slot">
<up-icon name="plus-circle-fill" size="30" color="#fa6400"></up-icon>
<text>点击上传图片</text>
</view>
<view v-if="storeData.imgs.length>0" v-for="(imgItem,imgIndex) in storeData.imgs" :key="imgIndex"
class="upload-slot" style=" position: relative; overflow: hidden; margin-top: 15rpx; ">
<image :src="Service.GetMateUrlByImg(imgItem)" style="width: 100%; height: 100%; " mode=""></image>
<view class="" @click="deleImg(imgIndex)" style="position: absolute; top: 20rpx; right: 20rpx; ">
<up-icon name="close" bold="true" color="var(--nav-mian)" size="20"></up-icon>
</view>
</view>
</view>
</view>
<view class="" style="width: 100%; height: 200rpx; ">
</view>
</view>
<view class="" @click="save()"
style=" z-index: 1000; width: 100%; background-color: #fff; position: fixed; bottom: 0; left: 0; padding: 20rpx; ">
<up-button shape='circle' color='#FF6B35' text="保存修改"></up-button>
</view>
<!-- 弹窗 -->
<up-popup :show="showDate">
<view style="width: 100%; padding: 30rpx; ">
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
<view class="">
</view>
<up-icon @click="showDate=!showDate" name="close" color="#000" size="18"></up-icon>
</view>
<up-form labelWidth='180rpx' :labelStyle="{'font-weight':600}" labelPosition="top" :model="storeData"
ref="form1">
<up-form-item label="营业时间: ">
<view class="" style=" width: 100%; display: grid; grid-template-columns: repeat(4,1fr);">
<view v-for="(item,index) in 7" @click="chooseWeek(index)"
style=" margin-top: 15rpx; font-size: 32rpx; padding: 10rpx 30rpx;border-radius: 14rpx;"
:class="{ tab:weekList.findIndex(item => item == index)===-1,tabActive: weekList.findIndex(item => item == index)!=-1 }"
:key="index" class="tag">
周{{chinese(index)}}
</view>
</view>
</up-form-item>
<up-form-item label="开业时间: " labelPosition="left">
<view v-if="!openTime" @click="showOpenTime=!showOpenTime" class=""
style="display: flex; align-items: center;">
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择开业时间 </text>
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
</view>
<view v-else @click="showOpenTime=!showOpenTime" class="">
{{openTime}}
</view>
</up-form-item>
<up-form-item label="结业时间: " labelPosition="left">
<view v-if="!closeTime" @click="showCloseTime=!showCloseTime" class=""
style="display: flex; align-items: center;">
<text style="font-size: 26rpx; color: #c0c4cc; margin-right: 10rpx;">请选择开业时间 </text>
<up-icon name="arrow-right" color="#c0c4cc" size="12"></up-icon>
</view>
<view v-else @click="showCloseTime=!showCloseTime" class="">
{{closeTime}}
</view>
</up-form-item>
</up-form>
<view class="" style="margin-top: 20rpx;">
<up-button @click="dateconfiom" text="确认"></up-button>
</view>
<up-datetime-picker @confirm='showOpenTime=!showOpenTime' @cancel="showOpenTime=!showOpenTime"
:show="showOpenTime" v-model="openTime" mode="time"></up-datetime-picker>
<up-datetime-picker @confirm='showCloseTime=!showCloseTime' @cancel="showCloseTime=!showCloseTime"
:show="showCloseTime" v-model="closeTime" mode="time"></up-datetime-picker>
</view>
</up-popup>
<up-popup :show="showTag">
<view style="width: 100%; padding: 30rpx; ">
<view class="" style="display: flex; align-items: center; justify-content: space-between;">
<view class="">
</view>
<up-icon @click="showTag=!showTag" name="close" color="#000" size="18"></up-icon>
</view>
<view class="">
<view style="display: flex; align-items: center; justify-content: space-between;" class="">
<view class="">
店铺标签
</view>
<view class="">
</view>
</view>
<view class="" style="margin: 20rpx 0;">
<up-input placeholder="请输入标签" border="bottom" v-model="tag"></up-input>
</view>
<view class="" style="margin-top: 20rpx;">
<up-button @click="addTag()" text="确认"></up-button>
</view>
</view>
</view>
</up-popup>
<!-- 社区 -->
<up-picker :show="showCommunity" @confirm="communityFunc" @cancel='showCommunity=!showCommunity' :columns="columns"
keyName="name" valueName="name"></up-picker>
<up-picker :show="showStoreClass" @confirm="storeClassFunc" @cancel='showStoreClass=!showStoreClass'
:columns="storeColumns" keyName="name" valueName="assortId"></up-picker>
<ImageCropperFunc style="z-index: 200;" :show="upImgShow" :url="upImgUrl" :imgName="imgName" :width="upImgwidth"
:height="upImgheight" :upType="upImgType" :retFun="upImgData">
</ImageCropperFunc>
</template>
<script setup lang="ts">
import { onShow, onLoad } from "@dcloudio/uni-app";
import { Service } from "@/Service/Service"
import { ref } from "vue";
import { vpCommunityService } from '@/Service/vp/vpCommunityService'
import ImageCropperFunc from "@/components/ImageCropper"
import { vpMerchService } from '@/Service/vp/vpMerchService'
interface data {
photo : string,
name : string,
address : string,
phone : string,
time : string,
community : string
comId : string
province : string
city : string
county : string
latitude : number
longitude : number
price : any
assortId : any
storeClass : any
imgs : Array<any>
}
let storeData = ref<data>({
assortId: '',
storeClass: '',
price: null,
photo: '',
name: '',
address: '',
phone: '',
time: '',
community: '',
comId: '',
province: '',
city: '',
county: '',
latitude: 0,
longitude: 0,
imgs: []
})
// 时间
let showDate = ref(false)
let weekList = ref<Array<number>>([])
let openTime = ref()
let showOpenTime = ref(false)
let closeTime = ref()
let showCloseTime = ref(false)
// 时间方式
let timefunc = ref(-1)
// 照片类型logo,展示图)
let imgType = ref('')
// 标签
let showTag = ref(false)
let tag = ref()
let tagList = ref<Array<string>>([])
// 社区
let showCommunity = ref(false)
const columns = ref([]);
// 店铺分类
let showStoreClass = ref(false)
const storeColumns = ref<Array<any>>([]);
// 裁剪图片参数
let upImgShow = ref<boolean>(false)
let upImgUrl = ref<string>('')
let upImgwidth = ref<number>(0)
let upImgheight = ref<number>(0)
let upImgType = ref<string>('')
let imgName = ref<string>('')
onLoad(() => {
getStoreClass()
uni.$on('cancle', () => {
upImgShow.value = false
})
});
onShow(() => {
});
const getData = () => {
vpMerchService.GetMyMerchInfo().then(res => {
storeData.value.address = res.data.merchInfo.address
storeData.value.city = res.data.merchInfo.city
// storeData.value.comId=res.data.merchInfo.communityId
// columns.value[0].map((item)=>{
// if(item.communityId==res.data.merchInfo.communityId){
// storeData.value.community=item.name
// }
// })
storeData.value.assortId = res.data.merchInfo.assId
storeColumns.value[0].map(item => {
if (item.assortId == res.data.merchInfo.assId) {
storeData.value.storeClass = item.name
}
})
storeData.value.county = res.data.merchInfo.county
storeData.value.latitude = extractNumbers(res.data.merchInfo.location,0)
storeData.value.longitude = extractNumbers(res.data.merchInfo.location,1)
storeData.value.name = res.data.merchInfo.name
storeData.value.phone = res.data.merchInfo.phone
storeData.value.photo = res.data.merchInfo.logo
storeData.value.imgs = JSON.parse(res.data.merchInfo.showImg)
storeData.value.price = res.data.merchInfo.price
storeData.value.province = res.data.merchInfo.province
storeData.value.time = !res.data.merchInfo.busTime ? '' : timeCancle(res.data.merchInfo.busTime)
tagList.value = JSON.parse(res.data.merchInfo.tag) == null ? new Array() : JSON.parse(res.data.merchInfo.tag)
})
}
// 处理经纬度
const extractNumbers = (inputString:any,number:any) => {
const numbers = inputString.match(/[+-]?\d+(\.\d+)?/g);
return numbers[number]
}
const getStoreClass = () => {
vpMerchService.GetMerchAssort().then(res => {
storeColumns.value[0] = res.data.assortList
getData()
})
}
// 商家分类
const storeClassFunc = (e : any) => {
showStoreClass.value = false
storeData.value.storeClass = e.value[0].name
storeData.value.assortId = e.value[0].assortId
}
const getCommunityList = () => {
vpCommunityService.GetCommunityList().then(res => {
columns.value[0] = res.data.comList
getData()
})
}
const deleImg = (index : any) => {
storeData.value.imgs.splice(index, 1)
}
// 社区
const communityFunc = (e : any) => {
showCommunity.value = !showCommunity.value
storeData.value.community = e.value[0].name
storeData.value.comId = e.value[0].communityId
}
// 标签
const showTagfunc = () => {
showTag.value = !showTag.value
tag.value = ''
}
const addTag = () => {
if (!tag.value) {
Service.Msg('请输入标签内容')
return
}
tagList.value.push(tag.value)
showTag.value = !showTag.value
}
const deleTag = (index : number) => {
tagList.value.splice(index, 1)
}
// 选择照片
const uploaduserImg = (width : any, height : any, Type : any, Name : any) => {
uni.chooseImage({
count: 1, // 最多选择1张图片
sizeType: ['original', 'compressed'], // 支持原图和压缩图
sourceType: ['album', 'camera'], // 可从相册选择或使用相机拍照
success: function (res) {
let path = res.tempFiles[0].path
upImgUrl.value = path
upImgwidth.value = width
upImgheight.value = height
upImgType.value = Type
imgName.value = Name
upImgShow.value = true
},
fail: function (err) {
console.error('选择失败:', err.errMsg);
}
})
}
const upImgData = (e : any) => {
console.log(e);
upImgShow.value = false
if (imgType.value == 'logo') {
storeData.value.photo = e.url
} else {
storeData.value.imgs.push(Service.GetMateUrlByImg(e.url))
console.log(storeData.value.imgs);
}
}
// 地址
const chooseAddress = () => {
wx.chooseLocation({
success: res => {
storeData.value.province = res.address.split('省')[0] + '省'
storeData.value.city = res.address.split('省')[1].split('市')[0] + '市'
storeData.value.county = res.address.split('省')[1].split('市')[1].split('区')[0] + '区'
storeData.value.address = res.address.split('省')[1].split('市')[1].split('区')[1]
storeData.value.longitude = res.longitude
storeData.value.latitude = res.latitude
}
})
}
const chooseWeek = (index : number) => {
if (weekList.value.findIndex(item => item == index) != -1) {
let i = weekList.value.findIndex(item => item == index)
weekList.value.splice(i, 1)
return
}
weekList.value.push(index)
}
const chinese = (item : number) => {
if (item + 1 == 1) {
return '一'
}
if (item + 1 == 2) {
return '二'
} if (item + 1 == 3) {
return '三'
} if (item + 1 == 4) {
return '四'
} if (item + 1 == 5) {
return '五'
} if (item + 1 == 6) {
return '六'
} if (item + 1 == 7) {
return '日'
}
}
const dateconfiom = () => {
storeData.value.time = ''
if (weekList.value.length == 0) {
Service.Msg('请选择营业时间')
return
}
if (!openTime.value) {
Service.Msg('请选择开业时间')
return
}
if (!closeTime.value) {
Service.Msg('请选择结业时间')
return
}
if (openTime.value > closeTime.value) {
Service.Msg('开业时间不得小于结业时间')
return
}
weekList.value.sort((a, b) => {
return a - b
})
let timeIndex = weekList.value[0] - 0
let judgment = weekList.value.findIndex((item, index) => {
return item - index !== timeIndex
})
// 1是至 /0是全显示
if (judgment == -1) {
timefunc.value = 1
} else {
timefunc.value = 0
}
if (timefunc.value == 0) {
weekList.value.map((item) => {
storeData.value.time = storeData.value.time + '周' + chinese(item) + ' '
})
} else {
storeData.value.time = '周' + chinese((weekList.value[0])) + '至' + '周' + chinese((weekList.value[weekList.value.length - 1]))
}
storeData.value.time = storeData.value.time + ' ' + openTime.value + '-' + closeTime.value
showDate.value = !showDate.value
}
const save = () => {
if (!storeData.value.photo) {
Service.Msg('请上传图片!')
return
}
if (!storeData.value.name) {
Service.Msg('请输入店铺名称!')
return
}
if (!storeData.value.storeClass) {
Service.Msg('请选择店铺吗分类!')
return
}
if (!storeData.value.province && !storeData.value.city && storeData.value.county) {
Service.Msg('请选择地址!')
return
}
if (!storeData.value.address) {
Service.Msg('请输入详细地址!')
return
}
if (!storeData.value.price) {
Service.Msg('请输入平均消费金额!')
return
}
if (!storeData.value.phone) {
Service.Msg('请输入联系电话!')
return
}
if (!storeData.value.time) {
Service.Msg('请输入营业时间!')
return
}
if (storeData.value.imgs.length == 0) {
Service.Msg('请上传店铺展示图!')
return
}
// if(tagList.value.length==0){
// Service.Msg('请添加店铺标签!')
// return
// }
// if(!storeData.value.comId){
// Service.Msg('请选择所属社区!')
// return
// }
// start时间处理
let time = ''
let newWeekList = new Array()
weekList.value.forEach((item, index) => {
let date = item + 1
if (date == 7) {
date = 0
}
newWeekList.push(date)
})
newWeekList.sort((a, b) => {
return a - b
})
newWeekList.forEach((item, index) => {
time = time + (time == '' ? '' : '-') + item
})
time = time + '_' + storeData.value.time.split(' ')[storeData.value.time.split(' ').length - 1]
// end时间处理
let tag = JSON.stringify(tagList.value)
let imgs = JSON.stringify(storeData.value.imgs)
vpMerchService.UpdateMerch(storeData.value.assortId, storeData.value.photo, '', storeData.value.name, imgs, storeData.value.phone, storeData.value.price, storeData.value.province, storeData.value.city, storeData.value.county, storeData.value.address, storeData.value.longitude, storeData.value.latitude, time, '').then(res => {
if (res.code == 0) {
Service.Msg('保存成功!')
setTimeout(() => {
Service.GoPageBack()
}, 2500)
}
})
}
const timeCancle = (busTime : string) => {
let data = busTime.split('_')
openTime.value = data[1].split('-')[0]
closeTime.value = data[1].split('-')[1]
let timeData = data[0].split('-')
for (let i = 0; i < timeData.length; i++) {
if (timeData[i] == '0') {
timeData[i] = '7'
}
}
let time = ''
timeData.sort((a : any, b : any) => {
return a - b
})
weekList.value = []
timeData.map((item : any) => {
weekList.value.push(item == '7' ? (Number(6)) : Number(item - 1))
})
let timeIndex = weekList.value[0] - 0
let judgment = weekList.value.findIndex((item, index) => {
return item - index !== timeIndex
})
// 1是至 /0是全显示
if (judgment == -1) {
timefunc.value = 1
} else {
timefunc.value = 0
}
if (timefunc.value == 0) {
weekList.value.map((item) => {
time = time + '周' + chinese(item) + ' '
})
} else {
time = '周' + chinese((weekList.value[0])) + '至' + '周' + chinese((weekList.value[weekList.value.length - 1]))
}
time = time + data[1]
return time
}
</script>
<style lang="scss">
.section {
margin-bottom: 24rpx;
.section-title {
font-size: 28rpx;
color: #666;
margin-bottom: 20rpx;
display: block;
}
}
.uploader-wrapper {
.upload-slot {
width: 100%;
height: 300rpx;
background-color: #fff8f5;
border: 1rpx dashed #e2e2e2;
border-radius: 16rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16rpx;
font-size: 26rpx;
color: #fa6400;
}
}
.tag {
display: flex;
align-items: center;
justify-content: center;
width: fit-content;
font-size: 24rpx;
}
.tabActive {
background-color: var(--nav-mian);
color: #fff;
}
.tab {
background-color: #F5F5F5;
color: #333333
}
</style>