第一次上传
This commit is contained in:
@@ -0,0 +1,64 @@
|
||||
import { Service } from '@/Service/Service';
|
||||
/*****用户*****/
|
||||
class vpUserService {
|
||||
private static GetUserInfoPath : string = '/User/GetUserInfo';
|
||||
/*****获取用户信息*****/
|
||||
static GetUserInfo() {
|
||||
var result = Service.Request(this.GetUserInfoPath, 'GET', {});
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetUserAccInfoPath : string = '/User/GetUserAccInfo';
|
||||
/*****获取用户账户信息*****/
|
||||
static GetUserAccInfo(page : number) {
|
||||
var result = Service.Request(this.GetUserAccInfoPath, 'GET', { page });
|
||||
return result;
|
||||
}
|
||||
|
||||
private static UpdateUserPath : string = '/User/UpdateUser';
|
||||
/*****修改用户信息*****/
|
||||
static UpdateUser(headImg:string,nick:string,sex:string,phone:string) {
|
||||
var result = Service.Request(this.UpdateUserPath, 'POST', { headImg,nick,sex,phone });
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static PayMerchPath : string = '/Order/PayMerch';
|
||||
/*****支付*****/
|
||||
static PayMerch(merchId:string,amount:number,payway:string,openId:string,udId:string) {
|
||||
var result = Service.Request(this.PayMerchPath, 'POST', { merchId,amount,payway,openId,udId });
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetShareEwmPath : string = '/User/GetShareEwm';
|
||||
/*****获取用户二维码*****/
|
||||
static GetShareEwm() {
|
||||
var result = Service.Request(this.GetShareEwmPath, 'GET', { });
|
||||
return result;
|
||||
}
|
||||
|
||||
|
||||
private static GetAddressInfoPath : string = '/User/GetAddressInfo';
|
||||
/*****根据经纬度获取地址*****/
|
||||
static GetAddressInfo(lon:number,lat:number) {
|
||||
var result = Service.Request(this.GetAddressInfoPath, 'GET', {lon ,lat});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static CollectMerchPath : string = '/User/CollectMerch';
|
||||
/*****用户收藏*****/
|
||||
static CollectMerch(merchId:string) {
|
||||
var result = Service.Request(this.CollectMerchPath, 'POST', {merchId});
|
||||
return result;
|
||||
}
|
||||
|
||||
private static GetUserCollectListPath : string = '/User/GetUserCollectList';
|
||||
/*****用户收藏列表*****/
|
||||
static GetUserCollectList(lon:Number,lat:Number,page:number) {
|
||||
var result = Service.Request(this.GetUserCollectListPath, 'GET', {lon,lat,page});
|
||||
return result;
|
||||
}
|
||||
}
|
||||
export { Service, vpUserService };
|
||||
@@ -0,0 +1,613 @@
|
||||
<template>
|
||||
<view class="" style="padding: 30rpx;">
|
||||
|
||||
<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')"
|
||||
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='200rpx' :labelStyle="{'font-weight':600}" labelPosition="top" :model="storeData"
|
||||
ref="form1">
|
||||
<up-form-item label="店铺名称: " :borderBottom="true" ref="item1">
|
||||
<up-input v-if="!upImgShow" v-model="storeData.name" placeholder="请输入店铺名称" border="none"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="店铺地址: " :borderBottom="true" ref="item1">
|
||||
<view class="">
|
||||
<view v-if="!storeData.province" @click="chooseAddress()" 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="chooseAddress()" class="">
|
||||
{{storeData.province+storeData.city+storeData.county}}
|
||||
</view>
|
||||
</view>
|
||||
</up-form-item>
|
||||
<up-form-item label="详细地址: " :borderBottom="true" ref="item1">
|
||||
<up-input v-if="!upImgShow" v-model="storeData.address" placeholder="请输入您的详细地址"
|
||||
border="none"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="平均消费金额: " :borderBottom="true" ref="item1">
|
||||
<up-input v-if="!upImgShow" v-model="storeData.price" placeholder="请输入您的平均消费金额"
|
||||
border="none"></up-input>
|
||||
</up-form-item>
|
||||
<up-form-item label="联系电话: " :borderBottom="true" ref="item1">
|
||||
<up-input v-if="!upImgShow" 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="" style="width: 100%; height: 200rpx; ">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" @click="save()"
|
||||
style="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>
|
||||
|
||||
|
||||
<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:number
|
||||
}
|
||||
|
||||
|
||||
let storeData = ref<data>({
|
||||
price:null,
|
||||
photo: '',
|
||||
name: '',
|
||||
address: '',
|
||||
phone: '',
|
||||
time: '',
|
||||
community: '',
|
||||
comId: '',
|
||||
province: '',
|
||||
city: '',
|
||||
county: '',
|
||||
latitude: 0,
|
||||
longitude: 0
|
||||
})
|
||||
|
||||
|
||||
// 时间
|
||||
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)
|
||||
|
||||
|
||||
// 标签
|
||||
let showTag = ref(false)
|
||||
let tag = ref()
|
||||
let tagList = ref<Array<string>>([])
|
||||
|
||||
// 社区
|
||||
let showCommunity = ref(false)
|
||||
const columns = ref([]);
|
||||
|
||||
|
||||
// 裁剪图片参数
|
||||
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(() => {
|
||||
getCommunityList()
|
||||
|
||||
});
|
||||
|
||||
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.county=res.data.merchInfo.county
|
||||
storeData.value.latitude=res.data.merchInfo.lat
|
||||
storeData.value.longitude=res.data.merchInfo.lon
|
||||
storeData.value.name=res.data.merchInfo.name
|
||||
storeData.value.phone=res.data.merchInfo.phone
|
||||
storeData.value.photo=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 getCommunityList = () => {
|
||||
vpCommunityService.GetCommunityList().then(res => {
|
||||
columns.value[0] = res.data.comList
|
||||
getData()
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 社区
|
||||
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) => {
|
||||
upImgShow.value = false
|
||||
storeData.value.photo = e.url
|
||||
}
|
||||
|
||||
// 地址
|
||||
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.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(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)
|
||||
|
||||
vpMerchService.UpdateMerch(storeData.value.comId,storeData.value.name,storeData.value.photo,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,tag).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
|
||||
})
|
||||
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">
|
||||
.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,397 @@
|
||||
<template>
|
||||
<view class="point-records-page">
|
||||
<!-- 沉浸式状态栏 -->
|
||||
<view v-if="!isZFB" class="status-bar"></view>
|
||||
|
||||
<!-- 顶部导航 -->
|
||||
<view v-if="!isZFB" class="nav-bar">
|
||||
<image class="back-icon" src="/static/icons/back.svg" @click="Service.GoPageBack()" mode="aspectFit" />
|
||||
<text class="nav-title">积分明细</text>
|
||||
<view class="nav-placeholder"></view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区域 -->
|
||||
<view class="content">
|
||||
<!-- 积分统计卡片 -->
|
||||
<view class="stats-section">
|
||||
<view class="stats-card">
|
||||
<view class="stat-item">
|
||||
<text class="ri-coins-line stat-icon"></text>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">{{ accInfo.integral }}</text>
|
||||
<text class="stat-label">当前积分</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="ri-add-circle-line stat-icon earn"></text>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">{{ getAmount }}</text>
|
||||
<text class="stat-label">本月获得</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-divider"></view>
|
||||
<view class="stat-item">
|
||||
<text class="ri-subtract-line stat-icon spend"></text>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">{{ deductAmount }}</text>
|
||||
<text class="stat-label">本月消耗</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 筛选标签 -->
|
||||
<view class="filter-tabs">
|
||||
<view
|
||||
v-for="(tab, index) in filterTabs"
|
||||
:key="index"
|
||||
class="filter-tab"
|
||||
:class="{ active: currentFilter === tab }"
|
||||
@click="currentFilter = tab;getUseraccInfo()"
|
||||
>
|
||||
{{ tab }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 积分记录列表 -->
|
||||
<view class="records-list">
|
||||
<view
|
||||
v-for="(record, index) in pointsList"
|
||||
:key="index"
|
||||
class="record-item"
|
||||
>
|
||||
<view class="record-info">
|
||||
<view class="record-header">
|
||||
<text class="record-title">{{ record.name }}</text>
|
||||
<text class="record-amount" :class="record.code=='收入'?'earn':'spend'">{{record.code=='收入'?'+':'-'}}{{ record.amount }}</text>
|
||||
</view>
|
||||
<text class="record-desc">{{ record.remark }}</text>
|
||||
<text class="record-time">{{ record.addTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view v-if="pointsList.length === 0" class="empty-state">
|
||||
<text class="ri-leaf-line empty-icon"></text>
|
||||
<text class="empty-text">暂无积分记录</text>
|
||||
</view>
|
||||
<up-loadmore v-else :status="status" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref,inject } from 'vue';
|
||||
import { Service } from "@/Service/Service"
|
||||
import { vpUserService } from '@/Service/vp/vpUserService'
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
||||
const isZFB = inject('isZFB');
|
||||
|
||||
// 积分明细数据类型
|
||||
interface PointsItem {
|
||||
amount:number
|
||||
code:string
|
||||
name:string
|
||||
addTime:string
|
||||
}
|
||||
interface accInfo{
|
||||
account:number
|
||||
integral:number
|
||||
userId:string
|
||||
}
|
||||
|
||||
const filterTabs = [ '全部','支出','收入']
|
||||
|
||||
const currentFilter = ref('全部')
|
||||
|
||||
|
||||
let deductAmount = ref<number>(0)
|
||||
let getAmount = ref<number>(0)
|
||||
let accInfo=ref<accInfo>({integral:0})
|
||||
|
||||
let status=ref('loadmore')
|
||||
let page=ref(1)
|
||||
// 积分明细数据
|
||||
const pointsList = ref<PointsItem[]>([
|
||||
|
||||
]);
|
||||
|
||||
onLoad(() => {
|
||||
getUseraccInfo()
|
||||
})
|
||||
|
||||
|
||||
|
||||
onReachBottom(()=>{
|
||||
getList()
|
||||
})
|
||||
|
||||
const getUseraccInfo = () => {
|
||||
|
||||
status.value = 'loadmore'
|
||||
page.value = 1
|
||||
pointsList.value=[]
|
||||
getList()
|
||||
}
|
||||
|
||||
|
||||
const getList=()=>{
|
||||
if (status.value !== 'loadmore') {
|
||||
return
|
||||
}
|
||||
status.value = 'loading'
|
||||
vpUserService.GetUserAccInfo(page.value,currentFilter.value =='全部'?'':currentFilter.value).then(res => {
|
||||
accInfo.value = res.data.accInfo
|
||||
getAmount.value = res.data.getAmount
|
||||
deductAmount.value = res.data.deductAmount
|
||||
pointsList.value=[...pointsList.value,...res.data.logList]
|
||||
status.value = res.data.logList.length == 10 ? 'loadmore' : 'nomore'
|
||||
page.value++
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.point-records-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F5F5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* 状态栏 */
|
||||
.status-bar {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 导航栏 */
|
||||
.nav-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding:60rpx 24rpx 20rpx 24rpx;
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
}
|
||||
|
||||
.back-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
padding: 8rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.nav-placeholder {
|
||||
width: 48rpx;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.content {
|
||||
flex: 1;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
/* 积分统计区域 */
|
||||
.stats-section {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.stats-card {
|
||||
background: #FFFFFF;
|
||||
border-radius: 24rpx;
|
||||
padding: 32rpx 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 48rpx;
|
||||
color: #FF6B00;
|
||||
}
|
||||
|
||||
.stat-icon.earn {
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.stat-icon.spend {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4rpx;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 40rpx;
|
||||
font-weight: 700;
|
||||
color: #222222;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1rpx;
|
||||
background: rgba(0, 0, 0, 0.08);
|
||||
height: 60rpx;
|
||||
}
|
||||
|
||||
/* 筛选标签 */
|
||||
.filter-tabs {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 8rpx;
|
||||
margin-bottom: 24rpx;
|
||||
display: flex;
|
||||
gap: 8rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
color: #666666;
|
||||
border-radius: 12rpx;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-tab.active {
|
||||
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
||||
color: #FFFFFF;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 记录列表 */
|
||||
.records-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.record-item {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.record-icon-box {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.record-icon-box.earn {
|
||||
background: linear-gradient(135deg, #E8F5E9, #C8E6C9);
|
||||
}
|
||||
|
||||
.record-icon-box.earn text {
|
||||
font-size: 36rpx;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.record-icon-box.spend {
|
||||
background: linear-gradient(135deg, #FFEBEE, #FFCDD2);
|
||||
}
|
||||
|
||||
.record-icon-box.spend text {
|
||||
font-size: 36rpx;
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.record-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8rpx;
|
||||
}
|
||||
|
||||
.record-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.record-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.record-amount {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #10B981;
|
||||
}
|
||||
|
||||
.record-amount.spend {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.record-desc {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.record-time {
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty-state {
|
||||
background: #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
padding: 80rpx 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 80rpx;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 新增商品按钮 -->
|
||||
<view class="add-product-btn" >
|
||||
<up-button @click="Service.GoPage('/pages/goods/addGoods')" color="var(--nav-mian)" :customStyle="{'border-radius':'15rpx'}" > + 新增商品 </up-button>
|
||||
</view>
|
||||
|
||||
<!-- 商品列表 -->
|
||||
<view class="product-list">
|
||||
<view class="product-item" v-for="(product, index) in products" :key="index">
|
||||
<view class="product-info">
|
||||
<image :src="product.image" mode="aspectFill" class="product-image"></image>
|
||||
<view class="product-details">
|
||||
<view class="product-header">
|
||||
<text class="product-name">{{ product.name }}</text>
|
||||
<view class=" tag " style=" margin-left: 10rpx; padding: 2rpx 20rpx;border-radius: 31rpx;font-size: 20rpx; color: #FF6B00; border: 3rpx solid #FF6B00; " >
|
||||
新品
|
||||
</view>
|
||||
</view>
|
||||
<text class="product-price">¥{{ product.price }}</text>
|
||||
<text class="product-sales">月销{{ product.monthlySales }}份</text>
|
||||
</view>
|
||||
<view class="tag" :style="{ 'background-color':product.status=='已下架'?'#D9D9D9':'#52C41A', } " style="padding: 7rpx 24rpx;border-radius: 31rpx;font-size: 24rpx; color: #fff; height: fit-content; " >
|
||||
{{ product.status }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="product-actions">
|
||||
<text class="action-btn edit-btn" @click="editProduct(product)">编辑</text>
|
||||
<text class="action-btn" :class="product.status === '上架中' ? 'offline-btn' : 'online-btn'"
|
||||
@click="toggleStatus(product)">
|
||||
{{ product.status === '上架中' ? '下架' : '上架' }}
|
||||
</text>
|
||||
<text class="action-btn delete-btn" @click="deleteProduct(index)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Service } from '@/Service/Service'
|
||||
|
||||
// 商品数据类型定义
|
||||
interface Product {
|
||||
id : number
|
||||
name : string
|
||||
price : number
|
||||
monthlySales : number
|
||||
status : '上架中' | '已下架'
|
||||
image : string
|
||||
isNew ?: boolean
|
||||
}
|
||||
|
||||
// 模拟商品数据
|
||||
const products = ref<Product[]>([
|
||||
{
|
||||
id: 1,
|
||||
name: '招牌牛肉面',
|
||||
price: 28,
|
||||
monthlySales: 248,
|
||||
status: '上架中',
|
||||
image: '/static/dele/dele4.jpg',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '香煎三明治',
|
||||
price: 22,
|
||||
monthlySales: 186,
|
||||
status: '已下架',
|
||||
image: '/static/dele/dele4.jpg',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '水果沙拉',
|
||||
price: 32,
|
||||
monthlySales: 156,
|
||||
status: '上架中',
|
||||
image: '/static/dele/dele4.jpg',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '红烧排骨',
|
||||
price: 38,
|
||||
monthlySales: 134,
|
||||
status: '上架中',
|
||||
image: '/static/dele/dele4.jpg',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '糖醋里脊',
|
||||
price: 35,
|
||||
monthlySales: 112,
|
||||
status: '已下架',
|
||||
image: '/static/dele/dele4.jpg',
|
||||
isNew: true,
|
||||
},
|
||||
])
|
||||
|
||||
// 新增商品
|
||||
const addProduct = () => {
|
||||
// 在实际项目中，这里应该跳转到新增商品页面
|
||||
console.log('新增商品')
|
||||
}
|
||||
|
||||
// 编辑商品
|
||||
const editProduct = (product : Product) => {
|
||||
// 在实际项目中，这里应该跳转到编辑商品页面，并传递商品信息
|
||||
console.log('编辑商品', product)
|
||||
}
|
||||
|
||||
// 切换商品状态（上架/下架）
|
||||
const toggleStatus = (product : Product) => {
|
||||
product.status = product.status === '上架中' ? '已下架' : '上架中'
|
||||
}
|
||||
|
||||
// 删除商品
|
||||
const deleteProduct = (index : number) => {
|
||||
// 在实际项目中，这里应该显示确认对话框
|
||||
products.value.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page {
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 新增商品按钮 */
|
||||
.add-product-btn {
|
||||
padding: 30rpx;
|
||||
background-color: #ffffff;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
/* 商品列表 */
|
||||
.product-list {
|
||||
padding: 0 30rpx;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
background-color: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
display: flex;
|
||||
// align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 155rpx;
|
||||
height: 155rpx;
|
||||
border-radius: 10rpx;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.product-details {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.product-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 36rpx;
|
||||
color: #ff6600;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.product-sales {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* 操作按钮 */
|
||||
.product-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 20rpx;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
font-size: 28rpx;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.online-btn {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.offline-btn {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
color: #ff3b30;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,330 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
|
||||
|
||||
<!-- 商品图片展示 -->
|
||||
<view class="product-image-section">
|
||||
<image :src="Service.GetMateUrlByImg('/static/dele/dele4.jpg')" mode="aspectFill" class="product-image">
|
||||
</image>
|
||||
</view>
|
||||
|
||||
<!-- 商品信息 -->
|
||||
<view class="product-info-section">
|
||||
<text class="product-name">招牌红烧牛肉面</text>
|
||||
<text class="product-price">¥38</text>
|
||||
<text class="product-description">特色红烧牛肉，搭配劲道面条，汤汁浓郁，回味无穷</text>
|
||||
</view>
|
||||
|
||||
<!-- 商家信息卡片 -->
|
||||
<view class="shop-card-section">
|
||||
<view class="shop-header">
|
||||
<text class="shop-name">美食小铺</text>
|
||||
<view class="shop-tags">
|
||||
<text class="tag new-shop">新店</text>
|
||||
<text class="tag popular">人气店</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="shop-info">
|
||||
<view class="info-item">
|
||||
<u-icon name="map" size="22" color="#999999" class="info-icon"></u-icon>
|
||||
<text class="info-text">朝阳区美食街123号</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<u-icon name="phone" size="22" color="#999999" class="info-icon"></u-icon>
|
||||
<text class="info-text">010-12345678</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<u-icon name="home" size="22" color="#999999" class="info-icon"></u-icon>
|
||||
<text class="info-text">朝阳美食社区</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 同店推荐 -->
|
||||
<view class="recommendations-section">
|
||||
<text class="section-title">同店推荐</text>
|
||||
<view class="recommendations-list">
|
||||
<view @click="Service.GoPage('/pages/goods/goodsDetail')" class="recommendation-item"
|
||||
v-for="(item, index) in recommendations" :key="index">
|
||||
<image :src="item.image" mode="aspectFill" class="recommendation-image"></image>
|
||||
<view class="recommendation-info">
|
||||
<text class="recommendation-name">{{ item.name }}</text>
|
||||
<text class="recommendation-price">{{ item.price }}</text>
|
||||
</view>
|
||||
<u-icon name="arrow-right" size="28rpx" color="#999999" class="arrow-icon"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="" style="width: 100%; height: 150rpx;">
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="action-buttons">
|
||||
<u-button type="primary" @click="handleContactShop()" :custom-style="contactButtonStyle">联系商家</u-button>
|
||||
<u-button type="primary" @click="handleViewLocation()" :custom-style="locationButtonStyle">查看位置</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { Service } from "@/Service/Service"
|
||||
|
||||
// 推荐商品数据类型
|
||||
interface Recommendation {
|
||||
id : number;
|
||||
name : string;
|
||||
price : string;
|
||||
image : string;
|
||||
}
|
||||
|
||||
// 同店推荐商品数据
|
||||
const recommendations = ref<Recommendation[]>([
|
||||
{
|
||||
id: 1,
|
||||
name: '招牌卤肉饭',
|
||||
price: '¥26',
|
||||
image: '/static/dele/dele4.jpg'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '红烧牛肉面',
|
||||
price: '¥32',
|
||||
image: '/static/dele/dele4.jpg'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '香菇三明治',
|
||||
price: '¥28',
|
||||
image: '/static/dele/dele4.jpg'
|
||||
}
|
||||
]);
|
||||
|
||||
// 联系商家按钮样式
|
||||
const contactButtonStyle = ref({
|
||||
backgroundColor: '#FF6600',
|
||||
borderColor: '#FF6600',
|
||||
color: '#FFFFFF',
|
||||
fontSize: '28rpx',
|
||||
height: '75rpx',
|
||||
borderRadius: '45rpx',
|
||||
marginRight: '20rpx'
|
||||
});
|
||||
|
||||
// 查看位置按钮样式
|
||||
const locationButtonStyle = ref({
|
||||
backgroundColor: '#FF6600',
|
||||
borderColor: '#FF6600',
|
||||
color: '#FFFFFF',
|
||||
fontSize: '28rpx',
|
||||
height: '75rpx',
|
||||
borderRadius: '45rpx',
|
||||
marginLeft: '20rpx'
|
||||
});
|
||||
|
||||
// 处理联系商家
|
||||
const handleContactShop = () => {
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: '10086', // 要拨打的电话号码
|
||||
success: function () {
|
||||
console.log('拨打电话成功');
|
||||
},
|
||||
fail: function (err) {
|
||||
console.error('拨打电话失败', err);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// 处理查看位置
|
||||
const handleViewLocation = () => {
|
||||
wx.chooseLocation({
|
||||
success: res => {
|
||||
|
||||
// latitude.value = res.latitude.toString();
|
||||
// longitude.value = res.longitude.toString();
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 商品图片展示 */
|
||||
.product-image-section {
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 商品信息 */
|
||||
.product-info-section {
|
||||
padding: 30rpx;
|
||||
margin: 30rpx;
|
||||
box-shadow: 0 0 10rpx 4rpx #E2e2e2;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
font-size: 40rpx;
|
||||
color: #FF6600;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.product-description {
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
/* 商家信息卡片 */
|
||||
.shop-card-section {
|
||||
padding: 30rpx;
|
||||
margin: 30rpx;
|
||||
box-shadow: 0 0 10rpx 4rpx #E2e2e2;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.shop-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.shop-tags {
|
||||
display: flex;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 24rpx;
|
||||
color: #FFFFFF;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.tag.new-shop {
|
||||
background-color: #4CD964;
|
||||
}
|
||||
|
||||
.tag.popular {
|
||||
background-color: #FF9500;
|
||||
}
|
||||
|
||||
.shop-info {
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-size: 28rpx;
|
||||
margin-left: 15rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
/* 同店推荐 */
|
||||
.recommendations-section {
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 36rpx;
|
||||
color: #333333;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.recommendations-list {
|
||||
gap: 30rpx;
|
||||
}
|
||||
|
||||
.recommendation-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 0;
|
||||
box-shadow: 0 0 10rpx 4rpx #E2e2e2;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.recommendation-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.recommendation-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 16rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.recommendation-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.recommendation-name {
|
||||
font-size: 32rpx;
|
||||
color: #333333;
|
||||
display: block;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.recommendation-price {
|
||||
font-size: 30rpx;
|
||||
color: #FF6600;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
/* 底部操作按钮 */
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
padding: 30rpx 30rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #ffffff;
|
||||
border-top: 1rpx solid #f0f0f0;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,6 @@
|
||||
export {}
|
||||
|
||||
declare module "vue" {
|
||||
type Hooks = App.AppInstance & Page.PageInstance;
|
||||
interface ComponentCustomOptions extends Hooks {}
|
||||
}
|
||||
Reference in New Issue
Block a user