wangxiaowei/chazhi_store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加页面

Browse Source
This commit is contained in:
wangxiaowei
2025-12-15 23:15:37 +08:00
parent 029ae94139
commit 977f7d4038
4 changed files with 322 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/bundle/setmeal/add.vue
View File

@ -150,7 +150,7 @@
最多可上传9张图片
</view>
</view>
<wd-upload :file-list="fileList" :limit="1" image-mode="scaleToFill" accept="video" :action="action"
<wd-upload :file-list="fileList" :limit="9" image-mode="scaleToFill" accept="image" :action="action"
@change="Add.handleUploadFile">
<view
class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">

202
src/bundle/store/edit-store.vue Normal file
View File

@ -0,0 +1,202 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationStyle": "custom"
}
}</route>
<template>
<view class="pb-40rpx">
<view>
<navbar title="修改门店信息" custom-class='!bg-[#fff]'></navbar>
</view>
<view class="mt-44rpx mx-40rpx">
<!-- 门店名称 -->
<view>
<view class="font-bold text-32rpx text-[#303133] leading-44rpx">门店名称</view>
<view class="mt-10rpx">
<wd-input v-model="form.name" :maxlength="20" show-word-limit placeholder="请输入门店的名称"/>
</view>
</view>
<!-- 抖音UID -->
<view class="mt-32rpx">
<view class="font-bold text-32rpx text-[#303133] leading-44rpx">抖音UID</view>
<view class="mt-10rpx">
<wd-input v-model="form.uid" :maxlength="20" show-word-limit placeholder="请输入抖音UID"/>
</view>
</view>
<!-- 门店地址 -->
<view class="mt-32rpx">
<view class="font-bold text-32rpx text-[#303133] leading-44rpx">门店地址</view>
<view class="mt-50rpx">
<view class="text-30rpx leading-42rpx text-[#303133]">省市区</view>
<view class="border-b border-b-solid border-b-[#e5e7eb] area">
<wd-col-picker v-model="form.area" :columns="area" :column-change="columnChange" @confirm="EditStore.handleConfirmAddress" placeholder="请选择省市区"></wd-col-picker>
</view>
</view>
<view class="mt-28rpx">
<view class="text-30rpx leading-42rpx text-[#303133]">省市区</view>
<view>
<wd-input v-model="form.address" placeholder="请填写具体地址"/>
</view>
</view>
</view>
<!-- 营业时间 -->
<view class="mt-32rpx">
<view class="font-bold text-32rpx text-[#303133] leading-44rpx">营业时间</view>
<view class="mt-50rpx">
<view class="text-30rpx leading-42rpx text-[#303133]">开始时间</view>
<view class="border-b border-b-solid border-b-[#e5e7eb] area">
<wd-datetime-picker v-model="form.start_time" type="time"></wd-datetime-picker>
</view>
</view>
<view class="mt-28rpx">
<view class="text-30rpx leading-42rpx text-[#303133]">结束时间</view>
<view class="border-b border-b-solid border-b-[#e5e7eb] area">
<wd-datetime-picker v-model="form.end_time" type="time"></wd-datetime-picker>
</view>
</view>
</view>
<!-- 门店电话 -->
<view class="mt-32rpx">
<view class="font-bold text-32rpx text-[#303133] leading-44rpx">门店电话</view>
<view class="mt-10rpx">
<wd-input v-model="form.uid" :maxlength="20" show-word-limit placeholder="请输入门店电话"/>
</view>
</view>
<!-- 门店视频 -->
<view class="mt-32rpx">
<view class="font-bold text-32rpx text-[#303133] leading-44rpx">门店视频</view>
<view class="mt-32rpx">
<wd-upload :file-list="fileList" :limit="1" image-mode="scaleToFill" accept="video" :action="action"
@change="EditStore.handleUploadFile">
<view
class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_video.png`"
mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">添加视频</view>
</view>
</wd-upload>
</view>
</view>
<!-- 门店图片 -->
<view class="mt-32rpx">
<view class="font-bold text-32rpx text-[#303133] leading-44rpx">门店图片</view>
<view class="mt-32rpx">
<wd-upload :file-list="fileList" :limit="9" image-mode="scaleToFill" accept="image" :action="action"
@change="EditStore.handleUploadFile">
<view
class="border-2rpx border-dashed border-[#E5E5E5] w-184rpx h-184rpx flex flex-col items-center justify-center rounded-16rpx">
<view class="">
<wd-img width="64rpx" height="64rpx" :src="`${OSS}icon/icon_upload.png`"
mode="aspectFill" />
</view>
<view class="font-400 text-26rpx leading-36rpx text-#303133">添加图片</view>
</view>
</wd-upload>
</view>
</view>
<view class="font-bold text-30rpx leading-42rpx bg-[#4C9F44] text-#fff rounded-8rpx mx-60rpx h-90rpx leading-90rpx text-center mt-114rpx" @click="EditStore.handleSaveStoreInfo">
保存
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { useColPickerData } from '@/hooks/useColPickerData'
import { toast } from '@/utils/toast'
const OSS = inject('OSS')
// 上传文件
const fileList = ref<any[]>([])
const action = 'https://www.mocky.io/v2/5cc8019d300000980a055e76' // 仅做测试使用，实际请换成真实上传接口
// 表单数据
const form = ref({
name: "",
uid: "",
area: [],
address: "",
start_time: "",
end_time: "",
phone: ""
})
// 省市区数据
const { colPickerData, findChildrenByCode } = useColPickerData()
const value = ref<string[]>([])
const area = ref<any[]>([
colPickerData.map((item) => {
return {
value: item.value,
label: item.text
}
})
])
const columnChange = ({ selectedItem, resolve, finish }) => {
const areaData = findChildrenByCode(colPickerData, selectedItem.value)
if (areaData && areaData.length) {
resolve(
areaData.map((item) => {
return {
value: item.value,
label: item.text
}
})
)
} else {
finish()
}
}
const EditStore = {
/**
* 选择省市区
* @param selected
*/
handleConfirmAddress(selected) {
form.value.address = selected.map(item => item.label)
},
/**
* 图片选择/删除
*/
handleUploadFile: (event: any) => {
fileList.value = event.fileList
},
/**
* 保存门店信息
*/
handleSaveStoreInfo: () => {
toast.info('保存成功')
}
}
</script>
<style lang="scss">
page {
background-color: #fff;
}
.area {
:deep() {
.wd-cell {
padding-left: 0 !important;
}
}
}
</style>

111
src/bundle/store/setting.vue Normal file
View File

@ -0,0 +1,111 @@
<route lang="jsonc" type="page">{
"layout": "default",
"style": {
"navigationStyle": "custom",
"navigationBarBackgroundColor": "#F6F7F9"
}
}</route>
<template>
<view>
<!-- 退出登录 -->
<wd-popup v-model="showLogoutPopup" lock-scroll custom-style="border-radius: 32rpx 32rpx 0rpx 0rpx;" position="bottom">
<view class="relative pt-54rpx pb-74rpx">
<view class="text-[#303133] text-36rpx leading-46rpx text-center">您确定要退出该账号吗？</view>
<view class="mt-76rpx">
<view class="bg-[#4C9F44] h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center text-[#fff]" @click="Setting.handleLogout">
退出登录
</view>
<view class="bg-[#fff] border-2rpx border-solid border-[#9CA3AF] h-90rpx leading-90rpx mx-60rpx rounded-8rpx text-center text-[#303133] mt-40rpx"
@click="showLogoutPopup = false">
取消
</view>
</view>
</view>
</wd-popup>
<view>
<navbar title="我的设置" custom-class='!bg-[#fff]'></navbar>
</view>
<view class="mt-36rpx mx-30rpx">
<view class="flex items-center justify-between" @click="router.navigateTo('/bundle/profile/profile')">
<view class="flex items-center">
<wd-img width="96rpx" height="96rpx" :src="`${OSS}icon/icon_info2.png`"></wd-img>
<view class="font-400 text-30rpx text-[#171717] leading-48rpx ml-24rpx">个人信息</view>
</view>
<view class="">
<wd-icon name="chevron-right" size="48rpx" color="#8F8F8F"></wd-icon>
</view>
</view>
<view class="flex items-center justify-between mt-32rpx" @click="router.navigateTo('/bundle/wallet/wallet')">
<view class="flex items-center">
<wd-img width="96rpx" height="96rpx" :src="`${OSS}icon/icon_wallet2.png`"></wd-img>
<view class="font-400 text-30rpx text-[#171717] leading-48rpx ml-24rpx">我的钱包</view>
</view>
<view class="">
<wd-icon name="chevron-right" size="48rpx" color="#8F8F8F"></wd-icon>
</view>
</view>
<view class="flex items-center justify-between mt-32rpx" @click="router.navigateTo('/bundle/parten/pages/bank-card/list')">
<view class="flex items-center">
<wd-img width="96rpx" height="96rpx" :src="`${OSS}icon/icon_card2.png`"></wd-img>
<view class="font-400 text-30rpx text-[#171717] leading-48rpx ml-24rpx">管理银行卡</view>
</view>
<view class="">
<wd-icon name="chevron-right" size="48rpx" color="#8F8F8F"></wd-icon>
</view>
</view>
</view>
<view class="w-full fixed bottom-0 left-0 right-0 h-154rpx bg-white px-64rpx flex justify-center items-center">
<view class="bg-[#F6F7F8] w-630rpx h-90rpx text-center leading-90rpx text-[#303133] font-bold text-30rpx rounded-8rpx" @click="showLogoutPopup = true">退出账户</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { toast } from '@/utils/toast'
import { router } from '@/utils/tools'
import { useUserStore } from '@/store'
const OSS = inject('OSS')
const storeName = ref<string>('')
const showLogoutPopup = ref<boolean>(false) // 是否显示退出登录弹出框
// 表单相关
const model = reactive<{
code: string
}>({
code: ''
})
onLoad((args) => {
storeName.value = args.storeName || ''
})
const Setting = {
/**
* 退出
*/
handleLogout: () => {
const userStore = useUserStore()
userStore.logout()
if (!userStore.isLoggedIn) {
toast.info('退出成功')
router.reLaunch('/pages/my/my')
}
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #FCFCFC;
}
</style>

22
src/pages/my/my.vue
View File

@ -132,13 +132,7 @@ const My = {
// 跳转到设置页面
handleToSettings: () => {
// TODO: 跳转到设置页面
console.log('跳转到设置页面')
},
// 编辑门店信息
handleEditStore: () => {
// TODO: 编辑门店信息
console.log('编辑门店信息')
router.navigateTo('/bundle/store/setting')
},
// 预览媒体（视频/图片）
@ -161,11 +155,11 @@ const My = {
},
handleToWallet: () => {
// if (!isLogin.value) {
// router.navigateTo('/bundle/wallet/wallet')
// } else {
if (!isLogin.value) {
router.navigateTo('/bundle/wallet/wallet')
} else {
router.navigateTo('/pages/login/login')
// }
}
},
}
</script>
@ -176,11 +170,11 @@ const My = {
:style="{ backgroundImage: `url('${OSS}images/store/my/image2.png')` }">
<wd-navbar safe-area-inset-top :bordered="false" custom-style="background-color: transparent !important;">
<template #left>
<view class="ml-16rpx flex items-center" @click="My.handleToSettings" />
<view class="ml-16rpx flex items-center"/>
</template>
<template #right>
<view class="right-slot mr-16rpx">
<view class="mr-16rpx" @click="My.handleShowService">
<view class="mr-16rpx" @click="My.handleToSettings">
<wd-icon name="setting" color="#fff" size="16px" />
</view>
</view>
@ -245,7 +239,7 @@ const My = {
</view>
<view class="modify-btn absolute right-0 flex items-center px-20rpx py-8rpx"
:style="{ backgroundImage: `url('${OSS}images/store/my/image3.png')` }"
@click="My.handleEditStore">
@click="router.navigateTo('/bundle/store/edit-store')">
<wd-img width="24rpx" height="24rpx" :src="`${OSS}images/store/my/image4.png`" class="mr-8rpx" />
<text class="text-24rpx text-[#fff]">修改</text>
</view>