Files
frontend-app/pages/merchant_settlement/merchant_settlement.vue
T

275 lines
57 KiB
Vue
Raw Normal View History

2025-05-07 10:09:55 +08:00
<template>
<view class="merchant_settlement_warp">
<view class="card_comm">
<view class="title_">上传店铺LOGO</view>
<view class="msg_">上传店铺LOGO、品牌标志。</view>
<view class="upload_comm">
<view class="upload_msg_">上传LOGO</view>
</view>
</view>
<view class="card_comm card_hang_comm">
<view class="title_">店铺名称</view>
<up-input
placeholder="请输入店铺名称"
clearable
border="none"
2025-05-23 18:03:45 +08:00
v-model="form.storeName"
2025-05-07 10:09:55 +08:00
></up-input>
</view>
<view class="card_comm card_hang_comm">
<view class="title_">店铺地址</view>
<up-input
placeholder="请输入店铺名称"
clearable
border="none"
v-model="form.address"
></up-input>
</view>
<view class="card_comm">
<view class="title_">上传店铺环境照片</view>
<view class="msg_">上传店铺背景图片,用于装修店铺主页。</view>
<view class="upload_comm">
<view class="upload_msg_">上传照片</view>
</view>
</view>
<view class="card_comm">
<view class="title_">营业执照</view>
<view class="msg_">上传店铺营业执照</view>
<view class="business_license_upload_comm">
<view class="upload_msg_">上传营业执照</view>
</view>
</view>
<!-- 商户本人信息 -->
<view class="data_common_warp">
<view class="data_msg">请填写商户本人的相关信息</view>
<view
:class="item.id < formList.length ?'add_form_item add_form_item_but':'add_form_item'"
v-for="item in formList"
:key="item.id"
>
<view class="add_form_title">{{item.title}}</view>
<up-input
:placeholder="item.placeholder"
border="surround"
v-model="form[item.formName]"
:customStyle="inputCss"
:type="item.type"
></up-input>
</view>
</view>
<!-- 证件照 -->
<CommonCard />
<!-- 商户银行账户信息 -->
<view class="data_common_warp">
<view class="data_msg">商户银行账户信息</view>
<view
:class="item.id < bankList.length ?'add_form_item add_form_item_but':'add_form_item'"
v-for="item in bankList"
:key="item.id"
>
<view class="add_form_title">{{item.title}}</view>
<up-input
:placeholder="item.placeholder"
border="surround"
v-model="form[item.formName]"
:customStyle="inputCss"
:type="item.type"
></up-input>
</view>
</view>
<view class="add_but" @click="addFun">
提交
</view>
2025-05-23 18:03:45 +08:00
<up-toast ref="uToastRef"></up-toast>
2025-05-07 10:09:55 +08:00
</view>
</template>
<script>
import CommonCard from '@/components/common_card.vue'
export default {
components:{CommonCard},
data() {
return {
form:{
2025-05-23 18:03:45 +08:00
storeName:'',// 店铺名称
2025-05-07 10:09:55 +08:00
address:"",// 店铺地址
name:null,
mobile:null,
number:null,
bankOpening:null,// 开户银行
bankNumber:null,// 银行卡号
bankName:null,// 所属银行
bankMobile:null,// 银行预留手机号码
},
formList:[
{
id:1,
title:"真实姓名",
formName:"name",
placeholder:"请输入您的真实姓名",
type:"text",
},{
id:2,
title:"手机号",
formName:"mobile",
placeholder:"请输入手机号",
type:"number",
},{
id:3,
title:"证件号码",
formName:"number",
placeholder:"请输入证件号码",
type:"text",
}
],
inputCss:{
"height":'80rpx',
"border-radius": "30rpx",
"border": "0rpx",
},
bankList:[
{
id:1,
title:"开户行",
formName:"bankOpening",
placeholder:"请输入开户行",
type:"text",
},{
id:2,
title:"银行卡号",
formName:"bankNumber",
placeholder:"请输入银行卡号",
type:"number",
},{
id:3,
title:"所属银行",
formName:"bankName",
placeholder:"请输入所属银行",
type:"text",
},{
id:4,
title:"预留手机号",
formName:"bankMobile",
placeholder:"请输入银行预留手机号",
type:"number",
}
]
};
},
methods: {
// 确认提交
addFun(){
2025-05-23 18:03:45 +08:00
const params = {
...this.form,
}
if(!params.storeName){
this.$refs.uToastRef.show({
type: 'error',
message: "请输入店铺名称",
});
return;
}
if(!params.address){
this.$refs.uToastRef.show({
type: 'error',
message: "请输入店铺地址",
});
return;
}
if(!params.name){
this.$refs.uToastRef.show({
type: 'error',
message: "请输入真实姓名",
});
return;
}
if(!params.mobile){
this.$refs.uToastRef.show({
type: 'error',
message: "请输入手机号码",
});
return;
}
if(!params.number){
this.$refs.uToastRef.show({
type: 'error',
message: "请输入证件号码",
});
return;
}
this.$refs.uToastRef.show({
type: 'success',
message: "提交成功",
});
setTimeout(()=>{
uni.switchTab({
url: '/pages/mine/mine',
});
},1000)
2025-05-07 10:09:55 +08:00
}
}
}
</script>
<style lang="scss" scoped>
.merchant_settlement_warp{
padding: 30rpx;
background-color: $app-bj;
height: calc(100vh - 58rpx);
overflow: auto;
.card_comm{
background: #FFFFFF;
border-radius: 30rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.title_{
font-weight: bold;
font-size: 32rpx;
color: #333333;
margin-right: 20rpx;
}
.msg_{
font-weight: 500;
font-size: 26rpx;
color: #999999;
}
}
.card_hang_comm{
display: flex;
}
.upload_comm{
height: 64rpx;
width:180rpx;
background-image:url("data:image/png;base64,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
background-size: 100% 100%;
background-position: center; /* 将图片居中显示 */
margin-top: 20rpx;
padding-top:120rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #525357;
}
.business_license_upload_comm{
height: 74rpx;
width:420rpx;
background-image: url("data:image/png;base64,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
background-size: 100% 100%;
background-position: center; /* 将图片居中显示 */
margin-top: 20rpx;
padding-top:220rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #525357;
}
}
.add_but{
position: inherit;
width: 100%;
margin: 40rpx 0 60rpx;
}
</style>