第一次上传
This commit is contained in:
@@ -0,0 +1,744 @@
|
||||
<template>
|
||||
|
||||
<scroll-view scroll-y="true" style="height: 100vh; padding: 20rpx;" >
|
||||
<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; ">
|
||||
<view class="badge-coop" style="font-size: 26rpx;" >
|
||||
删除
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="width: 100%; height: 200rpx; ">
|
||||
|
||||
</view>
|
||||
<view class="" @click="save()" v-if="!upImgShow"
|
||||
style=" border-top: 1rpx solid #e2e2e2; 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>
|
||||
</scroll-view>
|
||||
|
||||
|
||||
<ImageCropperFunc :show="upImgShow" :url="upImgUrl" :imgName="imgName" :width="upImgwidth" :height="upImgheight"
|
||||
:upType="upImgType" :retFun="upImgData">
|
||||
</ImageCropperFunc>
|
||||
<!-- 弹窗 -->
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</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, 1)
|
||||
storeData.value.longitude = extractNumbers(res.data.merchInfo.location, 0)
|
||||
|
||||
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"id": "piaoyi-cityPicker",
|
||||
"name": " data-cityPicker省市区地址选择器",
|
||||
"displayName": " data-cityPicker省市区地址选择器(兼容vue3)",
|
||||
"version": "1.1.7",
|
||||
"description": "常用省市区选择器，可反选，自定义模态框、兼容vue3",
|
||||
"keywords": [
|
||||
"省市区",
|
||||
"选择器",
|
||||
"可反选",
|
||||
"自定义模态框和弹框",
|
||||
"兼容vue3"
|
||||
],
|
||||
"dcloudext": {
|
||||
"type": "component-vue"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
{
|
||||
"name" : "科讯代购",
|
||||
"appid" : "__UNI__06C2D6A",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.8",
|
||||
"versionCode" : 108,
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"compatible" : {
|
||||
"ignoreVersion" : true //true表示忽略版本检查提示框，HBuilderX1.9.0及以上版本支持
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : false,
|
||||
"waiting" : false,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {
|
||||
"Barcode" : {},
|
||||
"Maps" : {},
|
||||
"Geolocation" : {}
|
||||
},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
],
|
||||
"minSdkVersion" : 25,
|
||||
"targetSdkVersion" : 25,
|
||||
"abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {
|
||||
"idfa" : false,
|
||||
"dSYMs" : false
|
||||
},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {
|
||||
"ad" : {},
|
||||
"maps" : {
|
||||
"amap" : {
|
||||
"name" : "amapZAvZjTHj",
|
||||
"appkey_ios" : "3caf9e6f01b0085be1e75e0d0e281fe7",
|
||||
"appkey_android" : "3caf9e6f01b0085be1e75e0d0e281fe7"
|
||||
}
|
||||
},
|
||||
"geolocation" : {
|
||||
"amap" : {
|
||||
"name" : "amapZAvZjTHj",
|
||||
"__platform__" : [ "android" ],
|
||||
"appkey_ios" : "",
|
||||
"appkey_android" : "3caf9e6f01b0085be1e75e0d0e281fe7"
|
||||
}
|
||||
}
|
||||
},
|
||||
"icons" : {
|
||||
"android" : {
|
||||
"hdpi" : "unpackage/res/icons/72x72.png",
|
||||
"xhdpi" : "unpackage/res/icons/96x96.png",
|
||||
"xxhdpi" : "unpackage/res/icons/144x144.png",
|
||||
"xxxhdpi" : "unpackage/res/icons/192x192.png"
|
||||
},
|
||||
"ios" : {
|
||||
"appstore" : "unpackage/res/icons/1024x1024.png",
|
||||
"ipad" : {
|
||||
"app" : "unpackage/res/icons/76x76.png",
|
||||
"app@2x" : "unpackage/res/icons/152x152.png",
|
||||
"notification" : "unpackage/res/icons/20x20.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"proapp@2x" : "unpackage/res/icons/167x167.png",
|
||||
"settings" : "unpackage/res/icons/29x29.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"spotlight" : "unpackage/res/icons/40x40.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png"
|
||||
},
|
||||
"iphone" : {
|
||||
"app@2x" : "unpackage/res/icons/120x120.png",
|
||||
"app@3x" : "unpackage/res/icons/180x180.png",
|
||||
"notification@2x" : "unpackage/res/icons/40x40.png",
|
||||
"notification@3x" : "unpackage/res/icons/60x60.png",
|
||||
"settings@2x" : "unpackage/res/icons/58x58.png",
|
||||
"settings@3x" : "unpackage/res/icons/87x87.png",
|
||||
"spotlight@2x" : "unpackage/res/icons/80x80.png",
|
||||
"spotlight@3x" : "unpackage/res/icons/120x120.png"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx48366fb1ba81d1ea",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"permission" : {
|
||||
"scope.userLocation" : {
|
||||
"desc" : "获取用户地址展示附近商家"
|
||||
}
|
||||
},
|
||||
"requiredPrivateInfos": ["getLocation","chooseLocation"]
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3",
|
||||
"h5" : {
|
||||
"sdkConfigs" : {
|
||||
"maps" : {
|
||||
"qqmap" : {
|
||||
"key" : "7DIBZ-K4HCJ-ZR2FE-FOOOP-SALFT-RLFYW"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,789 @@
|
||||
<template>
|
||||
<view class="index-page">
|
||||
<!-- 页面整体加载状态 -->
|
||||
<view v-if="loding" class="page-loading">
|
||||
<!-- 固定顶部区域 -->
|
||||
<view class="top-fixed">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
<view class="top-section-fixed">
|
||||
<view class="location-box-skeleton">
|
||||
<view class="skeleton-location-icon"></view>
|
||||
<view class="skeleton-location-text"></view>
|
||||
<view class="skeleton-arrow-icon"></view>
|
||||
</view>
|
||||
|
||||
<view class="search-wrapper">
|
||||
<view class="search-box-skeleton"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态栏占位 - 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 占位区域 - 抵消固定顶部的高度 -->
|
||||
<view class="top-placeholder"></view>
|
||||
|
||||
<!-- 分类骨架屏 -->
|
||||
<view class="category-section">
|
||||
<SkeletonCategory />
|
||||
</view>
|
||||
|
||||
<!-- 商家列表骨架屏 -->
|
||||
<view class="shop-list">
|
||||
<view class="shop-waterfall">
|
||||
<view class="waterfall-column">
|
||||
<SkeletonShopCard v-for="i in 3" :key="'left-' + i" />
|
||||
</view>
|
||||
<view class="waterfall-column">
|
||||
<SkeletonShopCard v-for="i in 3" :key="'right-' + i" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 实际内容 -->
|
||||
<view v-else>
|
||||
<!-- 固定顶部区域 -->
|
||||
<view class="top-fixed">
|
||||
<view class="status-bar-placeholder"></view>
|
||||
<view class="top-section-fixed">
|
||||
<view class="location-box" @click.stop="choooseLocation()">
|
||||
<up-icon name="map" color="#fff" size="12"></up-icon>
|
||||
<text class="location-text" style="margin: 0 4rpx;" >{{ location }}</text>
|
||||
<up-icon name="arrow-right" color="#fff" size="10"></up-icon>
|
||||
</view>
|
||||
|
||||
<view class="search-wrapper">
|
||||
<view class="search-box">
|
||||
<input type="text" v-model="searchKey"
|
||||
@confirm="Service.GoPage('/pages/goods/search?search='+searchKey)" class="search-input"
|
||||
placeholder="请输入关键字" placeholder-class="search-placeholder" />
|
||||
<view @click="Service.GoPage('/pages/goods/search?search='+searchKey)" class="search-btn">搜索
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 状态栏占位 - 沉浸式状态栏 -->
|
||||
<view class="status-bar"></view>
|
||||
|
||||
<!-- 占位区域 - 抵消固定顶部的高度 -->
|
||||
<view class="top-placeholder"></view>
|
||||
|
||||
<!-- 分类导航 - 三行五列 -->
|
||||
<view class="category-section">
|
||||
<view class="category-grid">
|
||||
<view v-for="(category, index) in tabList" :key="index" class="category-item"
|
||||
@click="Service.GoPage('/pages/goods/goodsClass?type='+category.assortId+'&name='+category.name )">
|
||||
<view class="category-icon-box" :style="{ background: category.bgColor }">
|
||||
<image :src="Service.GetMateUrlByImg(category.icon)" mode=""
|
||||
style="width: 100%; height: 100%;"></image>
|
||||
</view>
|
||||
<text class="category-name">{{ category.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商家列表 - 瀑布流布局 -->
|
||||
<view class="shop-list">
|
||||
<view class="shop-waterfall">
|
||||
<!-- 左列 -->
|
||||
<view class="waterfall-column">
|
||||
<view v-for="shop in leftGoodsList" :key="shop.merchId" class="shop-card"
|
||||
@click="Service.GoPage('/pages/community/merchantDetail?merchId='+shop.merchId)">
|
||||
<view class="shop-cover-wrapper">
|
||||
<image class="shop-cover" :src="Service.GetMateUrlByImg(shop.logo)" mode="aspectFill" />
|
||||
<!-- 浮动标签 - 左下角距离 -->
|
||||
<view class="float-tag float-distance">
|
||||
<up-icon name="map" color="#fff" size="12"></up-icon>
|
||||
<text class="tag-text">{{formatDistance(shop.distance)}}</text>
|
||||
</view>
|
||||
<!-- 右上角商家标签 -->
|
||||
<view class="shop-badges">
|
||||
<text v-if="shop.codeName=='联盟商家'" class="badge-partner">{{shop.codeName }}</text>
|
||||
<text v-else class="badge-coop">{{shop.codeName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="shop-info">
|
||||
<view class="shop-header">
|
||||
<text class="shop-name">{{ shop.name }}</text>
|
||||
</view>
|
||||
|
||||
<view class="shop-meta">
|
||||
<text class="shop-sales">月售:{{ shop.sale }}</text>
|
||||
<text class="shop-avg-price">人均{{ shop.price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="shop-footer">
|
||||
<view class="shop-tags">
|
||||
|
||||
<view v-for="(coupon, idx) in shop.tips" :key="idx" :class="getTagClass(coupon)"
|
||||
style="font-size: 22rpx; margin-left: 4rpx;" class="shop-tag">
|
||||
{{ coupon }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 右列 -->
|
||||
<view class="waterfall-column">
|
||||
<view v-for="shop in rightGoodsList" :key="shop.merchId" class="shop-card"
|
||||
@click="Service.GoPage('/pages/community/merchantDetail?merchId='+shop.merchId)">
|
||||
<view class="shop-cover-wrapper">
|
||||
<image class="shop-cover" :src="Service.GetMateUrlByImg(shop.logo)" mode="aspectFill" />
|
||||
<!-- 浮动标签 - 左下角距离 -->
|
||||
<view class="float-tag float-distance">
|
||||
<up-icon name="map" color="#fff" size="12"></up-icon>
|
||||
<text class="tag-text">{{formatDistance(shop.distance)}}</text>
|
||||
</view>
|
||||
<!-- 右上角商家标签 -->
|
||||
<view class="shop-badges">
|
||||
<text v-if="shop.code=='Discounts'" class="badge-partner">联盟商家</text>
|
||||
<text v-else class="badge-coop">合作商家</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="shop-info">
|
||||
<view class="shop-header">
|
||||
<text class="shop-name">{{ shop.name }}</text>
|
||||
</view>
|
||||
|
||||
<view class="shop-meta">
|
||||
<text class="shop-sales">月售:{{ shop.sale }}</text>
|
||||
<text class="shop-avg-price">人均{{ shop.price }}</text>
|
||||
</view>
|
||||
|
||||
<view class="shop-footer">
|
||||
<view class="shop-tags">
|
||||
<view v-for="(coupon, idx) in shop.tips" :key="idx" :class="getTagClass(coupon)"
|
||||
style="font-size: 22rpx;" class="shop-tag">
|
||||
{{ coupon }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<up-loadmore :status="status" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
onLoad, onReachBottom, onShareAppMessage, onShareTimeline
|
||||
} from '@dcloudio/uni-app'
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue'
|
||||
import SkeletonCategory from '../../components/skeleton/skeleton-category.vue'
|
||||
import SkeletonShopCard from '../../components/skeleton/skeleton-shop-card.vue'
|
||||
import { vpLoginService, Service } from '@/Service/vp/vpLoginService'
|
||||
import { vpMerchService } from '@/Service/vp/vpMerchService'
|
||||
import { vpUserService } from '@/Service/vp/vpUserService'
|
||||
|
||||
// 数据
|
||||
let location = ref('')
|
||||
const categories = ref([])
|
||||
const shops = ref([])
|
||||
const currentCategory = ref('all')
|
||||
let status = ref('nomore')
|
||||
|
||||
let loding = ref(true)
|
||||
|
||||
let longitude = ref(0)
|
||||
let latitude = ref(0)
|
||||
|
||||
let searchKey = ref('')
|
||||
|
||||
let leftGoodsList = ref<Array<any>>([])
|
||||
let rightGoodsList = ref<Array<any>>([])
|
||||
let tabList = ref<Array<any>>([])
|
||||
let page = ref(1)
|
||||
let scene=ref('')
|
||||
onLoad((data:any) => {
|
||||
console.log(data);
|
||||
if(data.scene){
|
||||
scene.value=data.scene
|
||||
}
|
||||
getLocation()
|
||||
})
|
||||
// 分享
|
||||
onShareAppMessage((res) => {
|
||||
return {
|
||||
path: '/pages/index/index'
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
onShareTimeline(() => {
|
||||
return {
|
||||
path: '/pages/index/index'
|
||||
}
|
||||
})
|
||||
|
||||
onReachBottom(()=>{
|
||||
getList()
|
||||
})
|
||||
|
||||
const getLocation = () => {
|
||||
uni.getLocation({
|
||||
type: 'wgs84',
|
||||
success: function (res) {
|
||||
longitude.value = res.longitude
|
||||
latitude.value = res.latitude
|
||||
getAddress()
|
||||
if (!Service.GetUserToken()) {
|
||||
login()
|
||||
return
|
||||
}
|
||||
getdata()
|
||||
},
|
||||
fail: function (e) {
|
||||
console.log(e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
const login = () => {
|
||||
uni.getProvider({
|
||||
service: 'oauth',
|
||||
success: function (res : any) {
|
||||
uni.login({
|
||||
onlyAuthorize: true,
|
||||
provider: res.provider,
|
||||
success: function (loginRes) {
|
||||
vpLoginService.WxLogin(loginRes.code, res.provider == 'weixin' ? 1 : 3, longitude.value, latitude.value, scene.value).then(content => {
|
||||
if (content.code == 0) {
|
||||
Service.SetUserToken(content.data.accToken)
|
||||
getdata()
|
||||
} else {
|
||||
Service.Msg(content.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
const getdata = () => {
|
||||
leftGoodsList.value = []
|
||||
rightGoodsList.value = []
|
||||
status.value = 'loadmore'
|
||||
page.value = 1
|
||||
getList()
|
||||
}
|
||||
|
||||
const getList = () => {
|
||||
|
||||
if (status.value !== 'loadmore') {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
|
||||
|
||||
vpMerchService.GetMerchList('', '', longitude.value, latitude.value,0,0, page.value).then(res => {
|
||||
loding.value = false
|
||||
res.data.merchList.forEach((goodsItem : any, GoodsIndex : number) => {
|
||||
if (GoodsIndex % 2 == 0) {
|
||||
leftGoodsList.value.push(goodsItem)
|
||||
} else {
|
||||
rightGoodsList.value.push(goodsItem)
|
||||
}
|
||||
})
|
||||
tabList.value = res.data.assortList
|
||||
status.value = res.data.merchList.length == 10 ? 'loadmore' : 'nomore'
|
||||
page.value++
|
||||
})
|
||||
}
|
||||
|
||||
const getAddress = () => {
|
||||
vpUserService.GetAddressInfo(longitude.value, latitude.value).then(res => {
|
||||
if (res.code == 0) {
|
||||
location.value = res.data.addrName
|
||||
} else {
|
||||
Service.Msg(res.msg)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const choooseLocation = () => {
|
||||
uni.chooseLocation({
|
||||
success: function (res) {
|
||||
longitude.value = res.longitude
|
||||
latitude.value = res.latitude
|
||||
location.value = res.address
|
||||
getdata()
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 格式化距离
|
||||
const formatDistance = (distance : any) => {
|
||||
if (distance < 1000) {
|
||||
return `${Number(distance).toFixed(1)}m`
|
||||
}
|
||||
return `${(distance / 1000).toFixed(1)}km`
|
||||
}
|
||||
|
||||
// 根据标签文本获取样式类
|
||||
const getTagClass = (tagText : string) => {
|
||||
const tagMap = {
|
||||
'可用积分': 'tag-points-available',
|
||||
'可用券': 'tag-coupon'
|
||||
}
|
||||
return tagMap[tagText] || 'tag-points'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.index-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 状态栏占位 - 沉浸式 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 固定顶部区域 - 始终固定 */
|
||||
.top-fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.status-bar-placeholder {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-section-fixed {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
padding: 65rpx 20rpx 28rpx;
|
||||
}
|
||||
|
||||
/* 占位区域 - 抵消固定顶部的高度 */
|
||||
.top-placeholder {
|
||||
height: calc(var(--status-bar-height) + 170rpx);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.location-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.location-icon-small {
|
||||
font-size: 28rpx;
|
||||
color: #FFFFFF;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.location-text {
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
/* 搜索区域 */
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.search-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #FFFFFF;
|
||||
border-radius: 32rpx;
|
||||
padding: 8rpx 28rpx;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #222222;
|
||||
height: 48rpx;
|
||||
line-height: 48rpx;
|
||||
}
|
||||
|
||||
.search-placeholder {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
background: #FF6B00;
|
||||
color: #FFFFFF;
|
||||
font-size: 24rpx;
|
||||
padding: 6rpx 18rpx;
|
||||
border-radius: 20rpx;
|
||||
font-weight: 500;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 分类导航 - 三行五列 */
|
||||
.category-section {
|
||||
background: #FFFFFF;
|
||||
padding: 32rpx 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.category-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 32rpx 20rpx;
|
||||
}
|
||||
|
||||
.category-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.category-icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.category-icon-box text {
|
||||
font-size: 44rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 24rpx;
|
||||
color: #222222;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 商家列表 - 瀑布流布局 */
|
||||
.shop-list {
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.shop-waterfall {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.waterfall-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.shop-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.shop-cover-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200rpx;
|
||||
}
|
||||
|
||||
.shop-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 浮动标签 */
|
||||
.float-tag {
|
||||
position: absolute;
|
||||
padding: 2rpx 6rpx;
|
||||
border-radius: 3rpx;
|
||||
font-size: 16rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
-webkit-backdrop-filter: blur(10rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rpx;
|
||||
}
|
||||
|
||||
.float-distance {
|
||||
left: 6rpx;
|
||||
bottom: 6rpx;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.float-distance .tag-icon {
|
||||
font-size: 14rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.float-distance .tag-text {
|
||||
font-size: 16rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
padding: 16rpx;
|
||||
}
|
||||
|
||||
// 右上角
|
||||
.shop-badges {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
right: 16rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
|
||||
/* 商家信息 */
|
||||
.shop-header {
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.shop-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.shop-sales {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.shop-avg-price {
|
||||
font-size: 26rpx;
|
||||
color: #FF6B00;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* 商家标签 */
|
||||
.shop-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
/* 标签 */
|
||||
.tag-badge {
|
||||
display: inline-block;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 6rpx;
|
||||
font-size: 20rpx;
|
||||
font-weight: 500;
|
||||
margin-right: 12rpx;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tag-coupon {
|
||||
background: #FFF8E1;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.shop-price {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #FF4D4F;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.shop-original {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 0;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 120rpx;
|
||||
color: #CCCCCC;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 底部导航栏 - 小巧精致风格 */
|
||||
.tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
padding: 12rpx 0 calc(12rpx + env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
z-index: 999;
|
||||
height: calc(90rpx + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.tabbar-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10rpx 0;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabbar-icon {
|
||||
font-size: 44rpx;
|
||||
color: #CCCCCC;
|
||||
margin-bottom: 8rpx;
|
||||
transition: all 0.3s ease;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tabbar-text {
|
||||
font-size: 22rpx;
|
||||
color: #CCCCCC;
|
||||
font-weight: 400;
|
||||
transition: all 0.3s ease;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* 激活状态 */
|
||||
.tabbar-item.active .tabbar-icon {
|
||||
color: #FF6B00;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.tabbar-item.active .tabbar-text {
|
||||
color: #FF6B00;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 首页头部骨架屏样式 */
|
||||
.location-box-skeleton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 28rpx;
|
||||
}
|
||||
|
||||
.skeleton-location-icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading-white 1.5s ease-in-out infinite;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.skeleton-location-text {
|
||||
width: 200rpx;
|
||||
height: 28rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading-white 1.5s ease-in-out infinite;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.skeleton-arrow-icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
border-radius: 4rpx;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading-white 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.search-box-skeleton {
|
||||
width: 100%;
|
||||
height: 60rpx;
|
||||
border-radius: 32rpx;
|
||||
background: linear-gradient(90deg, rgba(255, 255, 255, 0.3) 25%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.3) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading-white 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes loading-white {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-loading {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user