dl_uniapp/pages/mine/card/card-detail.vue
2025-04-03 15:47:52 +08:00

358 lines
9.0 KiB
Vue

<template>
<view class="my-card-box">
<view class="card-detail">
<view class="title">名片信息</view>
<view class="item-field">
<view class="item-lable is-required">
<image src="@/static/mine/required.png" mode="aspectFit"></image>平台
</view>
<view class="item-value">
<uni-data-select v-model="dataObj.platformCode" :localdata="range"
@change="change($event,'platformCode')" :clear="false"
:imgCode="dataObj.platformCode"></uni-data-select>
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
<image src="@/static/mine/required.png" mode="aspectFit"></image>平台账号
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.accountNumber" type="text" placeholder="请输入" />
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
<image src="@/static/mine/required.png" mode="aspectFit"></image>平台昵称
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.accountName" type="text" placeholder="请输入" />
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
<image src="@/static/mine/required.png" mode="aspectFit"></image>粉丝数
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.fansNum" type="number" placeholder="请输入" />
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
<image src="@/static/mine/required.png" mode="aspectFit"></image>联系电话
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.tel" type="tel" placeholder="请输入" />
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
<image src="@/static/mine/required.png" mode="aspectFit"></image>收货地址
</view>
<view class="item-value">
<uni-data-select v-model="dataObj.addrId" :localdata="addressList"
@change="change($event,'addrId')" :clear="false"
:imgCode="dataObj.addrId"></uni-data-select>
</view>
</view>
<view class="item-field">
<view class="item-lable">
商单自报价(选填)
</view>
<view class="item-value">
<input class="uni-input" v-model="dataObj.price" type="decimal" placeholder="请输入" />
</view>
</view>
<view class="item-field">
<view class="item-lable">
所在领域/合作方式(选填)
</view>
<view class="item-value">
<textarea v-model="dataObj.content" placeholder="请输入" />
</view>
</view>
<view class="item-field">
<view class="item-lable is-required">
<image src="@/static/mine/required.png" mode="aspectFit"></image>证明材料
</view>
<view class="item-value">
<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile"
limit="9"></uni-file-picker>
</view>
</view>
<view class="item-field" style="align-items: center;">
<view class="submit-box" @click="submitForm">提交</view>
</view>
</view>
</view>
</template>
<script>
import config from '@/config'
import upload from '@/utils/upload'
import {toast} from '@/utils/common.js'
import { getBusiCardById, applyBusiCard, uniSelectList} from '@/api/business/member.js'
import { uniListByParentCode} from '@/api/system/config.js'
export default {
data() {
return {
//所有可选的平台
range: [],
sizeType: ['compressed'],
//图片数组
fileList: [],
//地址集合
addressList:[],
//名片数据对象
dataObj: {
platformCode: "xiaohongshu",
accountName:null,
accountNumber:null,
fansNum: null,
tel: null,
addrId:null,
price:null,
content:null,
}
}
},
onLoad(options){
this.initData(options.id)
},
onShow(){
this.initAddress()
this.initPlatForm()
},
methods: {
/**初始化数据*/
initData(id){
if (id){
getBusiCardById({id:id}).then(res => {
console.log(res.data,133)
this.dataObj = res.data
}).catch((e) => {
uni.showToast({
icon: 'error',
duration: 2000,
title: e
});
})
} else {
this.dataObj = {
platformCode: "xiaohongshu",
accountName:null,
accountNumber:null,
fansNum: null,
tel: null,
addrId:null,
price:null,
content:null,
}
}
},
/**初始化分类*/
initPlatForm(){
uniListByParentCode({code:"dl_platform"}).then(res=>{
this.range = res.data
}).catch((e) => {
uni.showToast({
icon: 'error',
duration: 2000,
title: e
});
})
},
/**查询当前登录用户的地址*/
initAddress(){
uniSelectList().then(res => {
this.addressList = res.data
}).catch((e) => {
uni.showToast({
icon: 'error',
duration: 2000,
title: e
});
})
},
//改变选中值
change(e, type) {},
/**选择收货地址*/
chooseAddr() {
},
/**提交*/
submitForm(){
if (this.dataObj.platformCode == null || this.dataObj.platformCode == ""){
toast("平台不能为空")
return
}
if (this.dataObj.accountNumber == null || this.dataObj.accountNumber == ""){
toast("平台账号不能为空")
return
}
if (this.dataObj.accountName == null || this.dataObj.accountName == ""){
toast("平台昵称不能为空")
return
}
if (this.dataObj.fansNum == null || this.dataObj.fansNum == ""){
toast("粉丝数不能为空")
return
}
if (this.dataObj.tel == null || this.dataObj.tel == ""){
toast("电话不能为空")
return
}
if (this.dataObj.addrId == null || this.dataObj.addrId == ""){
toast("收货地址不能为空")
return
}
// console.log(this.fileList,'fileList')
applyBusiCard(this.dataObj).then(res => {
if (res.code == 200) {
uni.showToast({
icon: 'success',
duration: 2000,
title: '保存成功'
});
uni.navigateBack()
}
}).catch((e) => {
uni.showToast({
icon: 'error',
duration: 2000,
title: e
});
})
},
afterRead(file) {
for (let i = 0; i < file.tempFilePaths.length; i++) {
upload({
url: '',
filePath: file.tempFilePaths[i]
}).then((res) => {
console.log(res,'215')
this.fileList.push({
url: config.baseUrl + res.data
})
console.log(this.fileList,'fileList')
})
}
},
deleteFile(file, index) {
console.log('删除文件');
this.fileList.splice(index, 1);
},
}
}
</script>
<style lang="scss">
.my-card-box {
border-top: 1rpx solid #F4F4F4;
padding: 30rpx;
width: 100%;
color: #363636;
font-size: 30rpx;
height: 100%;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
position: relative;
.card-detail {
width: 100%;
padding: 20rpx;
background-color: white;
border-radius: 20rpx;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
position: relative;
.title {
font-size: 33rpx;
width: 100%;
padding-bottom: 20rpx;
border-bottom: 1rpx solid #F4F4F4;
}
.item-field {
width: 100%;
display: flex;
flex-direction: column;
align-items: self-start;
justify-content: center;
.is-required {
image {
width: 20rpx;
height: 20rpx;
margin-right: 10rpx;
}
}
.item-lable {
padding: 15rpx 0;
display: flex;
align-items: center;
justify-content: center;
}
.item-value {
width: 100%;
input {
padding-left: 20rpx;
line-height: 1;
height: 70rpx;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
.choose-add {
color: #686868;
padding: 10rpx 0 10rpx 20rpx;
display: flex;
align-items: center;
justify-content: flex-start;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
textarea {
width: 100%;
height: 150rpx;
color: #686868;
padding: 10rpx 0 10rpx 20rpx;
border: 1rpx solid #dcdfe6;
border-radius: 8rpx;
}
}
.submit-box {
padding: 15rpx 0;
background-color: #FC1F3E;
color: white;
width: 70%;
border-radius: 10rpx;
margin-top: 80rpx;
text-align: center;
}
}
}
}
</style>