feat(商户信息修改)
This commit is contained in:
parent
250f08c074
commit
6f0d928fb2
|
@ -0,0 +1,290 @@
|
||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view v-if="isShow" class="time_mask" :class="{'uni-timer-mask-show':timeMaskShow}" @tap="close"></view>
|
||||||
|
<view v-if="isShow" class="yx_time_slot" :class="{'fadelogIn1':timeMaskShow}">
|
||||||
|
<view class="time_top_box">
|
||||||
|
<view class="time_close" @click="close">取消</view>
|
||||||
|
<view class="time_text">{{title}}</view>
|
||||||
|
<view class="time_comfirm" @click="confirm">确认</view>
|
||||||
|
</view>
|
||||||
|
<view class="typelist">
|
||||||
|
<view class="typeobj" :class="{'typeobj_hover':typeIndex==index}" v-for="(item,index) in typeList" :key="index" @click="handleType(index)">
|
||||||
|
<view class="text">{{item}}</view>
|
||||||
|
<view class="line"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 时间选择 -->
|
||||||
|
<view class="yx_timer_sel">
|
||||||
|
<swiper class="sel_swiper" :current="typeIndex" @change="swiperChange">
|
||||||
|
<swiper-item>
|
||||||
|
<view>
|
||||||
|
<picker-view :value="startvalue" :indicator-style="indicatorStyle" @change="bindstartChange" class="sel_swiper-item">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="item" v-for="(item,index) in timeHour" :key="index">{{item}}时</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="item" v-for="(item,index) in timeMin" :key="index">{{item}}分</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
<swiper-item>
|
||||||
|
<view>
|
||||||
|
<picker-view :value="endvalue" :indicator-style="indicatorStyle" @change="bindendChange" class="sel_swiper-item">
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="item" v-for="(item,index) in timeHour" :key="index">{{item}}时</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="item" v-for="(item,index) in timeMin" :key="index">{{item}}分</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</swiper-item>
|
||||||
|
</swiper>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"time_slot",
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: () => {
|
||||||
|
return "选择时间段";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
timeMaskShow:false,//遮罩
|
||||||
|
isShow:false,//显示
|
||||||
|
typeList:["开始时间","结束时间"],
|
||||||
|
typeIndex:0,//下标
|
||||||
|
startvalue:[14,0],//默认下标,14时 00分
|
||||||
|
endvalue:[15,0],//默认下标,15时 00分
|
||||||
|
indicatorStyle: 'height: 50px;',
|
||||||
|
// timeList:[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23],
|
||||||
|
timeHour:[],
|
||||||
|
timeMin:[],//分钟可选项
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
//获取时分
|
||||||
|
let timeHour = []
|
||||||
|
let timeMin = []
|
||||||
|
for (let i = 0; i < 24; i++) {
|
||||||
|
timeHour.push(this.formatNumber(i))
|
||||||
|
}
|
||||||
|
for (let i = 0; i < 60; i++) {
|
||||||
|
timeMin.push(this.formatNumber(i))
|
||||||
|
}
|
||||||
|
this.timeHour = timeHour
|
||||||
|
this.timeMin = timeMin
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
swiperChange(event) {
|
||||||
|
|
||||||
|
this.typeIndex = event.detail.current
|
||||||
|
},
|
||||||
|
//看看是不是有两位数
|
||||||
|
formatNumber(n) {
|
||||||
|
n = n.toString()
|
||||||
|
return n[1] ? n : '0' + n
|
||||||
|
},
|
||||||
|
//开始选择
|
||||||
|
bindstartChange(e){
|
||||||
|
console.log(e)
|
||||||
|
this.startvalue = e.detail.value
|
||||||
|
},
|
||||||
|
//结束选择
|
||||||
|
bindendChange(e){
|
||||||
|
console.log(e)
|
||||||
|
this.endvalue = e.detail.value
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭弹窗
|
||||||
|
*/
|
||||||
|
close() {
|
||||||
|
this.timeMaskShow = false
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.isShow = false
|
||||||
|
this.$emit('close')
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 确认按钮
|
||||||
|
*/
|
||||||
|
confirm() {
|
||||||
|
if(this.typeIndex==0){
|
||||||
|
this.endvalue = [this.startvalue[0]+1,0]
|
||||||
|
this.typeIndex = 1
|
||||||
|
}else{
|
||||||
|
if(this.startvalue[0]<this.endvalue[0] || (this.startvalue[0]==this.endvalue[0]&&this.startvalue[1]<this.endvalue[1])){
|
||||||
|
var obj = {
|
||||||
|
start:{
|
||||||
|
hour:this.timeHour[this.startvalue[0]],
|
||||||
|
min:this.timeMin[this.startvalue[1]]
|
||||||
|
},
|
||||||
|
end:{
|
||||||
|
hour:this.timeHour[this.endvalue[0]],
|
||||||
|
min:this.timeMin[this.endvalue[1]]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$emit('confirm',obj)
|
||||||
|
this.close()
|
||||||
|
}else{
|
||||||
|
uni.showToast({
|
||||||
|
icon:"error",
|
||||||
|
title:"结束时间要大于开始时间"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 打开日历弹窗
|
||||||
|
*/
|
||||||
|
open() {
|
||||||
|
this.typeIndex = 0
|
||||||
|
this.isShow = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.timeMaskShow = true
|
||||||
|
}, 50)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//栏目选择
|
||||||
|
handleType(index){
|
||||||
|
if(index!=this.typeIndex){
|
||||||
|
if(index==1){
|
||||||
|
this.endvalue = [this.startvalue[0]+1,0]
|
||||||
|
}
|
||||||
|
this.typeIndex = index
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.time_mask {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: $uni-bg-color-mask;
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
opacity: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
.yx_time_slot{
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
width: 100%;
|
||||||
|
height: 750rpx;
|
||||||
|
position: fixed;
|
||||||
|
bottom: calc(var(--window-bottom));
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 99;
|
||||||
|
transition-property: transform;
|
||||||
|
transition-duration: 0.3s;
|
||||||
|
transform: translateY(460px);
|
||||||
|
border-top-left-radius: 20px;
|
||||||
|
border-top-right-radius: 20px;
|
||||||
|
.time_top_box{
|
||||||
|
width: 100%;
|
||||||
|
height: 80rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.time_close,.time_comfirm{
|
||||||
|
width: 100rpx;
|
||||||
|
color: #6666;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.time_comfirm{
|
||||||
|
color: #ff3000;
|
||||||
|
}
|
||||||
|
.time_text{
|
||||||
|
flex: 1;
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.uni-timer-mask-show{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
/* 从下往上弹窗动画 */
|
||||||
|
.fadelogIn1 {
|
||||||
|
// -webkit-animation: fadelogIn 0.5s;
|
||||||
|
// animation: fadelogIn 0.5s;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
.typelist{
|
||||||
|
width: 100%;
|
||||||
|
height: 70rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.typeobj{
|
||||||
|
width: 158rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.text{
|
||||||
|
height: 65rpx;
|
||||||
|
line-height: 65rpx;
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
.line{
|
||||||
|
width: 1rpx;
|
||||||
|
height: 5rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.typeobj_hover{
|
||||||
|
.text{
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.line{
|
||||||
|
width: 88rpx;
|
||||||
|
transition: width .5s;
|
||||||
|
background-color: #4360F7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.yx_timer_sel{
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 38rpx;
|
||||||
|
.sel_swiper{
|
||||||
|
// width: 80%;
|
||||||
|
// margin: 0 auto;
|
||||||
|
height: 500rpx;
|
||||||
|
}
|
||||||
|
.sel_swiper-item{
|
||||||
|
height: 500rpx;
|
||||||
|
.item {
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
18
pages.json
18
pages.json
|
@ -108,6 +108,24 @@
|
||||||
{
|
{
|
||||||
"root": "pages/user",
|
"root": "pages/user",
|
||||||
"pages": [
|
"pages": [
|
||||||
|
{
|
||||||
|
"path": "info/detail",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "个人信息"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "info/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "修改信息"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"auth": true
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "wallet/money",
|
"path": "wallet/money",
|
||||||
"style": {
|
"style": {
|
||||||
|
|
|
@ -10,9 +10,9 @@
|
||||||
<view class="description ss-font-26">{{ userInfo.mobile }}</view>
|
<view class="description ss-font-26">{{ userInfo.mobile }}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view>
|
<view @click="handleNav">
|
||||||
<text style="color: #fff; font-size: 20px" class="cicon-settings-o"></text>
|
<text style="color: #fff; font-size: 20px" class="cicon-settings-o"></text>
|
||||||
</view> -->
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="statistic ss-m-t-24">
|
<view class="statistic ss-m-t-24">
|
||||||
|
@ -102,6 +102,10 @@ function navService(item) {
|
||||||
peach.$router.go(item.path)
|
peach.$router.go(item.path)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleNav() {
|
||||||
|
peach.$router.go('/pages/user/info/detail')
|
||||||
|
}
|
||||||
|
|
||||||
function logOut() {
|
function logOut() {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '提示',
|
title: '提示',
|
||||||
|
|
|
@ -0,0 +1,175 @@
|
||||||
|
<template>
|
||||||
|
<pb-layout title="个人信息" navbar="normal" class="merchant-success" :bgStyle="{ backgroundColor: '#fff' }">
|
||||||
|
<view class="info">
|
||||||
|
<view class="details">
|
||||||
|
<template v-for="item in Object.keys(list)">
|
||||||
|
<view class="item" v-if="res?.id">
|
||||||
|
<view>
|
||||||
|
{{ list[item] }}
|
||||||
|
</view>
|
||||||
|
<view v-if="!res[item]?.includes('http')">
|
||||||
|
{{ res[item] }}
|
||||||
|
</view>
|
||||||
|
<p-uploader
|
||||||
|
v-else
|
||||||
|
v-model:url="res[item]"
|
||||||
|
fileMediatype="image"
|
||||||
|
limit="1"
|
||||||
|
readonly
|
||||||
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</view>
|
||||||
|
<view class="footer-box">
|
||||||
|
<button class="ss-reset-button back-btn shadow" @tap="navBack">返回首页</button>
|
||||||
|
<button class="ss-reset-button save-btn shadow" @tap="navToEdit">修改信息</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</pb-layout>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { onLoad } from '@dcloudio/uni-app'
|
||||||
|
import UserApi from '@/peach/api/member/user'
|
||||||
|
import peach from '@/peach'
|
||||||
|
|
||||||
|
const list = ref({
|
||||||
|
name: '店铺名称',
|
||||||
|
logo: '门店LOGO',
|
||||||
|
timezone: '营业时间',
|
||||||
|
tradeImg: '营业执照',
|
||||||
|
address: '详细地址',
|
||||||
|
contactName: '联系人',
|
||||||
|
contactPhone: '联系电话',
|
||||||
|
idCard: '身份证号',
|
||||||
|
idCardFront: '身份证正面',
|
||||||
|
idCardBack: '身份证反面',
|
||||||
|
alipayLogonId: '支付宝账号',
|
||||||
|
payee: '收款人姓名',
|
||||||
|
bankName: '银行名称',
|
||||||
|
bankBranchName: '开户行',
|
||||||
|
bankNo: '银行卡号',
|
||||||
|
bankOpenContact: '开户人',
|
||||||
|
bankCardFront: '银行卡正面',
|
||||||
|
bankCardBack: '银行卡反面',
|
||||||
|
})
|
||||||
|
|
||||||
|
const res = ref(null)
|
||||||
|
|
||||||
|
// 获取商铺详情
|
||||||
|
function getMerchantInfo() {
|
||||||
|
UserApi.getUserDetail().then((data) => {
|
||||||
|
data.data.address = data.data.address.replace(/\//g, '')
|
||||||
|
data.data.timezone =
|
||||||
|
formatNumber(data.data.openingTime[0]) +
|
||||||
|
':' +
|
||||||
|
formatNumber(data.data.openingTime[1]) +
|
||||||
|
'~' +
|
||||||
|
formatNumber(data.data.closingTime[0]) +
|
||||||
|
':' +
|
||||||
|
formatNumber(data.data.closingTime[1])
|
||||||
|
|
||||||
|
res.value = data.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果数字只有一位,前一位补零
|
||||||
|
function formatNumber(num) {
|
||||||
|
return num < 10 ? '0' + num : num
|
||||||
|
}
|
||||||
|
|
||||||
|
function navToEdit() {
|
||||||
|
peach.$router.go('/pages/user/info/index')
|
||||||
|
}
|
||||||
|
|
||||||
|
function navBack() {
|
||||||
|
peach.$router.back()
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
getMerchantInfo()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.merchant-success {
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 0 80rpx 40rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.note {
|
||||||
|
color: #999;
|
||||||
|
font-size: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.submit-btn {
|
||||||
|
height: 80rpx;
|
||||||
|
width: 100px;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 40rpx;
|
||||||
|
margin-bottom: 40rpx;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 17px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
|
||||||
|
view:nth-child(2n) {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
view:nth-child(2n + 1) {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-box {
|
||||||
|
margin-top: 25px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
gap: 20px;
|
||||||
|
|
||||||
|
.save-btn {
|
||||||
|
width: 50%;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
.back-btn {
|
||||||
|
width: 50%;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
border: 1px solid #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,441 @@
|
||||||
|
<!-- 商家入驻 -->
|
||||||
|
<template>
|
||||||
|
<pb-layout title="修改信息" navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }" color="#fff">
|
||||||
|
<view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"> </view>
|
||||||
|
<view class="apply-form">
|
||||||
|
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
|
||||||
|
<uni-forms-item label="店铺名称" name="name" required>
|
||||||
|
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入店铺名称" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="门店LOGO" name="logo" required>
|
||||||
|
<p-uploader
|
||||||
|
v-model:url="formData.logo"
|
||||||
|
fileMediatype="image"
|
||||||
|
limit="1"
|
||||||
|
mode="grid"
|
||||||
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="营业时间" name="timezone" required @tap="showTime">
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="formData.timezone"
|
||||||
|
disabled
|
||||||
|
:styles="{ disableColor: '#fff', color: '#333', borderColor: '#dcdfd6 !important' }"
|
||||||
|
placeholder="请选择营业时间"
|
||||||
|
>
|
||||||
|
<template v-slot:right>
|
||||||
|
<uni-icons type="right" />
|
||||||
|
</template>
|
||||||
|
</uni-easyinput>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="营业执照" name="tradeImg" required>
|
||||||
|
<p-uploader
|
||||||
|
v-model:url="formData.tradeImg"
|
||||||
|
fileMediatype="image"
|
||||||
|
limit="1"
|
||||||
|
mode="grid"
|
||||||
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item name="areaName" label="省市区" @tap="regionPickerRef.onOpen()" required>
|
||||||
|
<uni-easyinput
|
||||||
|
v-model="formData.areaName"
|
||||||
|
disabled
|
||||||
|
:styles="{ disableColor: '#fff', color: '#333', borderColor: '#dcdfd6 !important' }"
|
||||||
|
placeholder="请选择省市区"
|
||||||
|
>
|
||||||
|
<template v-slot:right>
|
||||||
|
<uni-icons type="right" />
|
||||||
|
</template>
|
||||||
|
</uni-easyinput>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item name="detailAddress" label="详细地址" required>
|
||||||
|
<uni-easyinput type="textarea" v-model="formData.detailAddress" placeholder="请输入详细地址" clearable />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item name="contactName" label="联系人" required>
|
||||||
|
<uni-easyinput type="text" v-model="formData.contactName" placeholder="请输入联系人" clearable />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="联系电话" name="contactPhone" required>
|
||||||
|
<uni-easyinput type="number" v-model="formData.contactPhone" placeholder="请输入联系电话" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="身份证号" name="idCard" required>
|
||||||
|
<uni-easyinput type="idcard" v-model="formData.idCard" placeholder="请输入省份证号" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="身份证正面" name="idCardFront" required>
|
||||||
|
<p-uploader
|
||||||
|
v-model:url="formData.idCardFront"
|
||||||
|
fileMediatype="image"
|
||||||
|
limit="1"
|
||||||
|
mode="grid"
|
||||||
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="身份证反面" name="idCardBack" required>
|
||||||
|
<p-uploader
|
||||||
|
v-model:url="formData.idCardBack"
|
||||||
|
fileMediatype="image"
|
||||||
|
limit="1"
|
||||||
|
mode="grid"
|
||||||
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
<uni-forms-item label="支付宝账号" name="alipayLogonId" required>
|
||||||
|
<uni-easyinput type="text" v-model="formData.alipayLogonId" placeholder="请输入支付宝账号" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="收款人姓名" name="payee" required>
|
||||||
|
<uni-easyinput type="text" v-model="formData.payee" placeholder="请输入收款人姓名" />
|
||||||
|
</uni-forms-item>
|
||||||
|
|
||||||
|
<uni-forms-item label="银行名称" name="bankName" required>
|
||||||
|
<uni-easyinput type="text" v-model="formData.bankName" placeholder="请输入银行名称" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="开户行" name="bankBranchName" required>
|
||||||
|
<uni-easyinput type="text" v-model="formData.bankBranchName" placeholder="请输入开户行" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="银行卡号" name="bankNo" required>
|
||||||
|
<uni-easyinput type="number" v-model="formData.bankNo" placeholder="请输入银行卡号" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="开户人" name="bankOpenContact" required>
|
||||||
|
<uni-easyinput type="text" v-model="formData.bankOpenContact" placeholder="请输入开户人姓名" />
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="银行卡正面" name="bankCardFront" required>
|
||||||
|
<p-uploader
|
||||||
|
v-model:url="formData.bankCardFront"
|
||||||
|
fileMediatype="image"
|
||||||
|
limit="1"
|
||||||
|
mode="grid"
|
||||||
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
<uni-forms-item label="银行卡反面" name="bankCardBack" required>
|
||||||
|
<p-uploader
|
||||||
|
v-model:url="formData.bankCardBack"
|
||||||
|
fileMediatype="image"
|
||||||
|
limit="1"
|
||||||
|
mode="grid"
|
||||||
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
||||||
|
/>
|
||||||
|
</uni-forms-item>
|
||||||
|
</uni-forms>
|
||||||
|
|
||||||
|
<view class="footer-box">
|
||||||
|
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSubmit">修改</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 省市区弹窗 -->
|
||||||
|
<p-region-picker ref="regionPickerRef" @confirm="onRegionConfirm" />
|
||||||
|
</pb-layout>
|
||||||
|
|
||||||
|
<!-- 时间弹窗 -->
|
||||||
|
<timeSlot ref="timeSlotRef" :title="'选择时间段'" @confirm="confirmTime"></timeSlot>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { onLoad } from '@dcloudio/uni-app'
|
||||||
|
import sheep from '@/peach'
|
||||||
|
import $store from '@/peach/store'
|
||||||
|
import UserApi from '@/peach/api/member/user'
|
||||||
|
import { mobile, idCard, bankName, bankCode } from '@/peach/validate/form'
|
||||||
|
import timeSlot from '@/components/wanghexu-timeslot/wanghexu-timeslot.vue'
|
||||||
|
import _ from 'lodash'
|
||||||
|
|
||||||
|
const userStore = $store('user')
|
||||||
|
const formData = ref({
|
||||||
|
name: '',
|
||||||
|
logo: '',
|
||||||
|
timezone: '',
|
||||||
|
tradeImg: '',
|
||||||
|
idCard: '',
|
||||||
|
idCardFront: '',
|
||||||
|
idCardBack: '',
|
||||||
|
contactPhone: '',
|
||||||
|
areaName: '',
|
||||||
|
detailAddress: '',
|
||||||
|
contactName: '',
|
||||||
|
bankNo: '',
|
||||||
|
bankName: '',
|
||||||
|
bankBranchName: '',
|
||||||
|
bankCardFront: '',
|
||||||
|
bankCardBack: '',
|
||||||
|
bankOpenContact: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const regionPickerRef = ref(null)
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请输入店铺名称',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
logo: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请上传店铺LOGO',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
timezone: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请选择营业时间',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
tradeImg: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请上传营业执照',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
idCard: idCard,
|
||||||
|
idCardFront: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请上传身份证正面',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
idCardBack: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请上传身份证反面',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
alipayLogonId: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请输入支付宝账号',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
payee: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请输入收款人姓名',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
areaName: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请选择省市区',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
contactName: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请输入联系人',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
detailAddress: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请输入详细地址',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
contactPhone: mobile,
|
||||||
|
bankNo: bankCode,
|
||||||
|
bankName: bankName,
|
||||||
|
bankBranchName: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请输入开户行名称',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
bankCardFront: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请上传银行卡正面',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
bankCardBack: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请上传银行卡反面',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
bankOpenContact: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
errorMessage: '请输入开户人姓名',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2
|
||||||
|
|
||||||
|
const timeSlotRef = ref(null)
|
||||||
|
const formRef = ref(null)
|
||||||
|
|
||||||
|
function onSubmit() {
|
||||||
|
formRef.value
|
||||||
|
.validate()
|
||||||
|
.then(async (res) => {
|
||||||
|
let tempObj = { ...res }
|
||||||
|
tempObj.id = formData.value.id
|
||||||
|
tempObj.memberUserId = userStore.userInfo.id
|
||||||
|
tempObj.address = tempObj.areaName.replace(/ /g, '/') + '/' + tempObj.detailAddress
|
||||||
|
tempObj.openingTime = tempObj.timezone.split('~')[0]
|
||||||
|
tempObj.closingTime = tempObj.timezone.split('~')[1]
|
||||||
|
|
||||||
|
delete tempObj.areaName
|
||||||
|
delete tempObj.detailAddress
|
||||||
|
delete tempObj.timezone
|
||||||
|
|
||||||
|
await UserApi.editUserInfo(tempObj)
|
||||||
|
|
||||||
|
peach.$router.go('/pages/user/info/detail', {
|
||||||
|
redirect: true,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log('err', err)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择时间段
|
||||||
|
function showTime() {
|
||||||
|
timeSlotRef.value.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认时间
|
||||||
|
function confirmTime(time) {
|
||||||
|
formData.value.timezone = time.start.hour + ':' + time.start.min + '~' + time.end.hour + ':' + time.end.min
|
||||||
|
}
|
||||||
|
|
||||||
|
// 确认选择地区
|
||||||
|
function onRegionConfirm(e) {
|
||||||
|
formData.value.areaName = `${e.province_name}/${e.city_name}/${e.district_name}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取申请详情
|
||||||
|
function getMerchantInfo() {
|
||||||
|
UserApi.getUserDetail().then((data) => {
|
||||||
|
formData.value = data.data
|
||||||
|
|
||||||
|
let index = data.data.address.lastIndexOf('/')
|
||||||
|
formData.value.areaName = data.data.address.substring(0, index)
|
||||||
|
formData.value.detailAddress = data.data.address.substring(index + 1)
|
||||||
|
|
||||||
|
formData.value.timezone =
|
||||||
|
data.data.openingTime[0].toString().padStart(2, '0') +
|
||||||
|
':' +
|
||||||
|
data.data.openingTime[1].toString().padStart(2, '0') +
|
||||||
|
'~' +
|
||||||
|
data.data.closingTime[0].toString().padStart(2, '0') +
|
||||||
|
':' +
|
||||||
|
data.data.closingTime[1].toString().padStart(2, '0')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 获取区域列表
|
||||||
|
async function getAreaList() {
|
||||||
|
let res = await UserApi.getAreaList()
|
||||||
|
uni.setStorageSync('areaData', res.data)
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad(async () => {
|
||||||
|
getMerchantInfo()
|
||||||
|
await getAreaList()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.page-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 458rpx;
|
||||||
|
background: url('/static/merchant3.jpg') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.apply-form {
|
||||||
|
margin: -100rpx 16px;
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
padding-bottom: 40rpx;
|
||||||
|
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
|
||||||
|
.shake {
|
||||||
|
animation: shake 0.05s linear 4 alternate;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes shake {
|
||||||
|
from {
|
||||||
|
transform: translateX(-10rpx);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(10rpx);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep() {
|
||||||
|
.uni-easyinput__content-input {
|
||||||
|
font-size: 28rpx !important;
|
||||||
|
color: #333333 !important;
|
||||||
|
line-height: normal !important;
|
||||||
|
padding-left: 10px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-easyinput__placeholder-class {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-disabled {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-box {
|
||||||
|
.save-btn {
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.agreement-box {
|
||||||
|
margin: -10px auto 10px;
|
||||||
|
.protocol-check {
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
.agreement-text {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #999999;
|
||||||
|
.tcp-text {
|
||||||
|
color: var(--ui-BG-Main);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,46 +1,71 @@
|
||||||
import request from '@/peach/request'
|
import request from '@/peach/request'
|
||||||
|
|
||||||
const UserUtil = {
|
const UserUtil = {
|
||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
getUserInfo: () => {
|
getUserInfo: () => {
|
||||||
return request({
|
return request({
|
||||||
url: '/particulars/member/get',
|
url: '/particulars/member/get',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取钱包
|
// 获取钱包
|
||||||
getWalletInfo: () => {
|
getWalletInfo: () => {
|
||||||
return request({
|
return request({
|
||||||
url: '/pay/wallet/get',
|
url: '/pay/wallet/get',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 首页统计
|
// 首页统计
|
||||||
getHomeStatistics: () => {
|
getHomeStatistics: () => {
|
||||||
return request({
|
return request({
|
||||||
url: '/statistics/index/get-count',
|
url: '/statistics/index/get-count',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @author Ankkaya
|
* @author Ankkaya
|
||||||
* @description 用户列表
|
* @description 用户列表
|
||||||
* @param {String} mobile - 手机号
|
* @param {String} mobile - 手机号
|
||||||
* @param {String} nickname - 用户昵称
|
* @param {String} nickname - 用户昵称
|
||||||
* @param {Number} pageNo - 页码
|
* @param {Number} pageNo - 页码
|
||||||
* @param {Number} pageSize - 每页条数
|
* @param {Number} pageSize - 每页条数
|
||||||
* @returns {Type}
|
* @returns {Type}
|
||||||
*/
|
*/
|
||||||
getUserList: (data) => {
|
getUserList: (data) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/particulars/point/page-member',
|
url: '/particulars/point/page-member',
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
params: data,
|
params: data,
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 用户详情
|
||||||
|
getUserDetail: () => {
|
||||||
|
return request({
|
||||||
|
url: '/shop/particulars/get',
|
||||||
|
method: 'GET',
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 修改用户信息
|
||||||
|
editUserInfo: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/shop/particulars/update',
|
||||||
|
method: 'PUT',
|
||||||
|
data,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 区域列表
|
||||||
|
getAreaList: () => {
|
||||||
|
return request({
|
||||||
|
url: '/system/area/tree',
|
||||||
|
method: 'GET',
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export default UserUtil
|
export default UserUtil
|
||||||
|
|
|
@ -137,6 +137,19 @@ const GoodsApi = {
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// 更改商品状态
|
||||||
|
changeProductStatus: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/product/spu/update-status',
|
||||||
|
method: 'PUT',
|
||||||
|
data,
|
||||||
|
custom: {
|
||||||
|
successMsg: '操作成功',
|
||||||
|
showSuccess: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
export default GoodsApi
|
export default GoodsApi
|
||||||
|
|
|
@ -1,7 +1,12 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="ss-goods-wrap">
|
<view class="ss-goods-wrap">
|
||||||
<view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @click="onClick">
|
<view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @click="onClick">
|
||||||
<image class="lg-img-box" :src="peach.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
<image
|
||||||
|
:class="['lg-img-box', data.status === 0 ? 'down' : '']"
|
||||||
|
:src="peach.$url.cdn(data.image || data.picUrl)"
|
||||||
|
mode="aspectFill"
|
||||||
|
></image>
|
||||||
|
<view v-if="data.status === 0" class="down-text">商品已下架</view>
|
||||||
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
||||||
<view>
|
<view>
|
||||||
<view
|
<view
|
||||||
|
@ -50,6 +55,9 @@
|
||||||
<view class="ss-flex ss-row-around" :style="btnStyles">
|
<view class="ss-flex ss-row-around" :style="btnStyles">
|
||||||
<button class="ss-reset-button btn-group" @click="clickGoods('detail')">详情</button>
|
<button class="ss-reset-button btn-group" @click="clickGoods('detail')">详情</button>
|
||||||
<button class="ss-reset-button btn-group" @click="clickGoods('edit')">编辑</button>
|
<button class="ss-reset-button btn-group" @click="clickGoods('edit')">编辑</button>
|
||||||
|
<button class="ss-reset-button btn-group" @click="clickGoods('inventory')">
|
||||||
|
{{ data.status === 0 ? '上架' : '下架' }}
|
||||||
|
</button>
|
||||||
<button class="ss-reset-button btn-group btn-del" @click="clickGoods('del')">删除</button>
|
<button class="ss-reset-button btn-group btn-del" @click="clickGoods('del')">删除</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
@ -180,12 +188,34 @@ function clickGoods(mark) {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
} else if (mark === 'inventory') {
|
||||||
|
uni.showModal({
|
||||||
|
title: '提示',
|
||||||
|
content: `是否${props.data.status === 1 ? '下架' : '上架'}该商品?`,
|
||||||
|
success: async (res) => {
|
||||||
|
if (res.confirm)
|
||||||
|
await GoodsApi.changeProductStatus({
|
||||||
|
id: props.data.id,
|
||||||
|
status: props.data.status === 1 ? 0 : 1,
|
||||||
|
})
|
||||||
|
emits('refresh')
|
||||||
|
},
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.ss-goods-wrap {
|
.ss-goods-wrap {
|
||||||
|
.down {
|
||||||
|
filter: opacity(0.3);
|
||||||
|
}
|
||||||
|
.down-text {
|
||||||
|
position: absolute;
|
||||||
|
left: 75rpx;
|
||||||
|
top: 130rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
.lg-goods-card {
|
.lg-goods-card {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
|
@ -0,0 +1,252 @@
|
||||||
|
<!-- 省市区选择弹窗 -->
|
||||||
|
<template>
|
||||||
|
<uni-popup type="bottom" ref="pickerPopupRef" background-color="#fff">
|
||||||
|
<view class="ui-region-picker">
|
||||||
|
<p-toolbar
|
||||||
|
:cancelColor="cancelColor"
|
||||||
|
:confirmColor="confirmColor"
|
||||||
|
:cancelText="cancelText"
|
||||||
|
:confirmText="confirmText"
|
||||||
|
title="选择区域"
|
||||||
|
@cancel="onCancel"
|
||||||
|
@confirm="onConfirm('confirm')"
|
||||||
|
/>
|
||||||
|
<view class="ui-picker-body">
|
||||||
|
<picker-view
|
||||||
|
:value="state.currentIndex"
|
||||||
|
@change="change"
|
||||||
|
class="ui-picker-view"
|
||||||
|
@pickstart="pickstart"
|
||||||
|
@pickend="pickend"
|
||||||
|
>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="ui-column-item" v-for="province in provinceList" :key="province.id">
|
||||||
|
<view :style="getSizeByNameLength(province.name)">{{ province.name }}</view>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="ui-column-item" v-for="city in cityList" :key="city.id">
|
||||||
|
<view :style="getSizeByNameLength(city.name)">{{ city.name }}</view>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
<picker-view-column>
|
||||||
|
<view class="ui-column-item" v-for="district in districtList" :key="district.id">
|
||||||
|
<view :style="getSizeByNameLength(district.name)">{{ district.name }}</view>
|
||||||
|
</view>
|
||||||
|
</picker-view-column>
|
||||||
|
</picker-view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
/**
|
||||||
|
* picker picker弹出选择器
|
||||||
|
* @property {Object} params 需要显示的参
|
||||||
|
* @property {Boolean} safe-area-inset-bottom 是否开启底部安全区适配(默认false)
|
||||||
|
* @property {Boolean} show-time-tag 时间模式时,是否显示后面的年月日中文提示
|
||||||
|
* @property {String} cancel-color 取消按钮的颜色
|
||||||
|
* @property {String} confirm-color 确认按钮的颜色
|
||||||
|
* @property {String} confirm-text 确认按钮的文字
|
||||||
|
* @property {String} cancel-text 取消按钮的文字
|
||||||
|
* @property {String} default-region 默认选中的地区,
|
||||||
|
* @property {String} default-code 默认选中的地区
|
||||||
|
* @property {Boolean} mask-close-able 是否允许通过点击遮罩关闭Picker(默认true)
|
||||||
|
* @property {String Number} z-index 弹出时的z-index值(默认1075)
|
||||||
|
* @property {Array} default-selector 数组形式,其中每一项表示选择了range对应项中的第几个
|
||||||
|
* @property {String} range-key 当range参数的元素为对象时,指定Object中的哪个key的值作为选择器显示内容
|
||||||
|
* @event {Function} confirm 点击确定按钮,返回当前选择的值
|
||||||
|
* @event {Function} cancel 点击取消按钮,返回当前选择的值
|
||||||
|
*/
|
||||||
|
import { computed, reactive, defineExpose, ref } from 'vue'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
// "取消"按钮的颜色
|
||||||
|
cancelColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#6666',
|
||||||
|
},
|
||||||
|
// "确定"按钮的颜色
|
||||||
|
confirmColor: {
|
||||||
|
type: String,
|
||||||
|
default: 'var(--ui-BG-Main)',
|
||||||
|
},
|
||||||
|
// 取消按钮的文字
|
||||||
|
cancelText: {
|
||||||
|
type: String,
|
||||||
|
default: '取消',
|
||||||
|
},
|
||||||
|
// 确认按钮的文字
|
||||||
|
confirmText: {
|
||||||
|
type: String,
|
||||||
|
default: '确认',
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const areaData = uni.getStorageSync('areaData')
|
||||||
|
|
||||||
|
const pickerPopupRef = ref(null)
|
||||||
|
|
||||||
|
const getSizeByNameLength = (name) => {
|
||||||
|
let length = name.length
|
||||||
|
if (length <= 7) return ''
|
||||||
|
if (length < 9) {
|
||||||
|
return 'font-size:28rpx'
|
||||||
|
} else {
|
||||||
|
return 'font-size: 24rpx'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const state = reactive({
|
||||||
|
currentIndex: [0, 0, 0],
|
||||||
|
moving: false, // 列是否还在滑动中,微信小程序如果在滑动中就点确定,结果可能不准确
|
||||||
|
})
|
||||||
|
const emits = defineEmits(['confirm', 'cancel', 'change'])
|
||||||
|
|
||||||
|
const provinceList = areaData
|
||||||
|
|
||||||
|
const cityList = computed(() => {
|
||||||
|
return areaData[state.currentIndex[0]]?.children
|
||||||
|
})
|
||||||
|
const districtList = computed(() => {
|
||||||
|
return cityList.value[state.currentIndex[1]]?.children
|
||||||
|
})
|
||||||
|
// 标识滑动开始,只有微信小程序才有这样的事件
|
||||||
|
const pickstart = () => {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
state.moving = true
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
// 标识滑动结束
|
||||||
|
const pickend = () => {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
state.moving = false
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
|
const onCancel = () => {
|
||||||
|
pickerPopupRef.value.close()
|
||||||
|
emits('cancel')
|
||||||
|
}
|
||||||
|
|
||||||
|
function onOpen() {
|
||||||
|
pickerPopupRef.value.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户更改picker的列选项
|
||||||
|
const change = (e) => {
|
||||||
|
if (state.currentIndex[0] === e.detail.value[0] && state.currentIndex[1] === e.detail.value[1]) {
|
||||||
|
// 不更改省市区列表
|
||||||
|
state.currentIndex[2] = e.detail.value[2]
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
// 更改省市区列表
|
||||||
|
if (state.currentIndex[0] !== e.detail.value[0]) {
|
||||||
|
e.detail.value[1] = 0
|
||||||
|
}
|
||||||
|
e.detail.value[2] = 0
|
||||||
|
state.currentIndex = e.detail.value
|
||||||
|
}
|
||||||
|
emits('change', state.currentIndex)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 用户点击确定按钮
|
||||||
|
const onConfirm = (event = null) => {
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
if (state.moving) return
|
||||||
|
// #endif
|
||||||
|
let index = state.currentIndex
|
||||||
|
let province = provinceList[index[0]]
|
||||||
|
let city = cityList.value[index[1]]
|
||||||
|
let district = districtList.value[index[2]]
|
||||||
|
let result = {
|
||||||
|
province_name: province.name,
|
||||||
|
province_id: province.id,
|
||||||
|
city_name: city.name,
|
||||||
|
city_id: city.id,
|
||||||
|
district_name: district.name,
|
||||||
|
district_id: district.id,
|
||||||
|
}
|
||||||
|
pickerPopupRef.value.close()
|
||||||
|
|
||||||
|
if (event) emits(event, result)
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
onOpen,
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.ui-region-picker {
|
||||||
|
position: relative;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-picker-view {
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.ui-picker-header {
|
||||||
|
width: 100%;
|
||||||
|
height: 90rpx;
|
||||||
|
padding: 0 40rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 30rpx;
|
||||||
|
background: #fff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-picker-header::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-bottom: 1rpx solid #eaeef1;
|
||||||
|
-webkit-transform: scaleY(0.5);
|
||||||
|
transform: scaleY(0.5);
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-picker__title {
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-picker-body {
|
||||||
|
width: 100%;
|
||||||
|
height: 500rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-column-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #333;
|
||||||
|
padding: 0 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-btn-picker {
|
||||||
|
padding: 16rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-opacity {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-btn-picker--primary {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-btn-picker--tips {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,129 @@
|
||||||
|
<template>
|
||||||
|
<view class="p-toolbar" @touchmove.stop.prevent="noop" v-if="show">
|
||||||
|
<view class="p-toolbar__cancel__wrapper" hover-class="p-hover-class">
|
||||||
|
<text
|
||||||
|
class="p-toolbar__wrapper__cancel"
|
||||||
|
@tap="cancel"
|
||||||
|
:style="{
|
||||||
|
color: cancelColor,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ cancelText }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
<text class="p-toolbar__title u-line-1" v-if="title">{{ title }}</text>
|
||||||
|
<view class="p-toolbar__confirm__wrapper" hover-class="p-hover-class">
|
||||||
|
<text
|
||||||
|
class="p-toolbar__wrapper__confirm"
|
||||||
|
@tap="confirm"
|
||||||
|
:style="{
|
||||||
|
color: confirmColor,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ confirmText }}
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* Toolbar 工具条
|
||||||
|
* @description
|
||||||
|
* @tutorial https://www.uviewui.com/components/toolbar.html
|
||||||
|
* @property {Boolean} show 是否展示工具条(默认 true )
|
||||||
|
* @property {String} cancelText 取消按钮的文字(默认 '取消' )
|
||||||
|
* @property {String} confirmText 确认按钮的文字(默认 '确认' )
|
||||||
|
* @property {String} cancelColor 取消按钮的颜色(默认 '#909193' )
|
||||||
|
* @property {String} confirmColor 确认按钮的颜色(默认 '#3c9cff' )
|
||||||
|
* @property {String} title 标题文字
|
||||||
|
* @event {Function}
|
||||||
|
* @example
|
||||||
|
*/
|
||||||
|
export default {
|
||||||
|
name: 'SuToolbar',
|
||||||
|
props: {
|
||||||
|
// 是否展示工具条
|
||||||
|
show: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
// 取消按钮的文字
|
||||||
|
cancelText: {
|
||||||
|
type: String,
|
||||||
|
default: '取消',
|
||||||
|
},
|
||||||
|
// 确认按钮的文字
|
||||||
|
confirmText: {
|
||||||
|
type: String,
|
||||||
|
default: '确认',
|
||||||
|
},
|
||||||
|
// 取消按钮的颜色
|
||||||
|
cancelColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#909193',
|
||||||
|
},
|
||||||
|
// 确认按钮的颜色
|
||||||
|
confirmColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#3c9cff',
|
||||||
|
},
|
||||||
|
// 标题文字
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 点击取消按钮
|
||||||
|
cancel() {
|
||||||
|
this.$emit('cancel')
|
||||||
|
},
|
||||||
|
// 点击确定按钮
|
||||||
|
confirm() {
|
||||||
|
this.$emit('confirm')
|
||||||
|
},
|
||||||
|
// 阻止事件冒泡
|
||||||
|
preventEvent(e) {
|
||||||
|
e && typeof e.stopPropagation === 'function' && e.stopPropagation()
|
||||||
|
},
|
||||||
|
// 空操作
|
||||||
|
noop(e) {
|
||||||
|
this.preventEvent(e)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.p-toolbar {
|
||||||
|
height: 42px;
|
||||||
|
@include flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
&__cancel {
|
||||||
|
color: #111111;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__title {
|
||||||
|
color: #000000;
|
||||||
|
padding: 0 60rpx;
|
||||||
|
font-size: 16px;
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__wrapper {
|
||||||
|
&__confirm {
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 15px;
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Binary file not shown.
After Width: | Height: | Size: 23 KiB |
Loading…
Reference in New Issue