445 lines
11 KiB
Vue
445 lines
11 KiB
Vue
<template>
|
|
<view class="my-card-box">
|
|
<navigation-bar-vue title="名片详情" style="width: 100%;" background-color="#ffffff"
|
|
title-color="#000000"></navigation-bar-vue>
|
|
<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="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.indexUrl" 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">
|
|
<input class="uni-input" v-model="dataObj.wxNum" 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>
|
|
<!-- 提示窗示例 -->
|
|
<uni-popup ref="alertDialog" type="dialog">
|
|
<uni-popup-dialog cancelText="取消" confirmText="创建" iconPath="/static/detail/card.png"
|
|
content="没有可选择的收货地址，请先创建" @confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
|
|
</uni-popup>
|
|
<view class="item-field" style="align-items: center;">
|
|
<view class="submit-box" @click="submitForm">提交</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
|
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 {
|
|
components: {
|
|
navigationBarVue
|
|
},
|
|
data() {
|
|
return {
|
|
uploadUrl: '' + '/common/upload',
|
|
headers: {},
|
|
//所有可选的平台
|
|
range: [],
|
|
sizeType: ['compressed'],
|
|
//图片数组
|
|
fileList: [],
|
|
imageUrl: [],
|
|
//地址集合
|
|
addressList: [],
|
|
//名片数据对象
|
|
dataObj: {
|
|
platformCode: "xiaohongshu",
|
|
accountName: null,
|
|
accountNumber: null,
|
|
fansNum: null,
|
|
tel: null,
|
|
addrId: null,
|
|
price: null,
|
|
content: null,
|
|
wxNum: null,
|
|
indexUrl: null,
|
|
}
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
this.initData(options.id)
|
|
},
|
|
onShow() {
|
|
this.initAddress()
|
|
this.initPlatForm()
|
|
},
|
|
|
|
methods: {
|
|
dialogConfirm() {
|
|
this.$tab.navigateTo('/pages/mine/addr/addr-list')
|
|
},
|
|
|
|
dialogClose() {
|
|
|
|
},
|
|
|
|
/**初始化数据*/
|
|
initData(id) {
|
|
this.fileList = []
|
|
this.imageUrl = []
|
|
if (id) {
|
|
getBusiCardById({
|
|
id: id
|
|
}).then(res => {
|
|
console.log(res.data, 133)
|
|
this.dataObj = res.data
|
|
if (this.dataObj.image != null && this.dataObj.image != '') {
|
|
console.log(this.dataObj.image, 'this.dataObj.image')
|
|
this.imageUrl = this.dataObj.image.split(',')
|
|
this.imageUrl.map((item) => {
|
|
this.fileList.push({
|
|
url: item
|
|
})
|
|
})
|
|
}
|
|
}).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
|
|
if (this.addressList.length == 0) {
|
|
this.$refs.alertDialog.open()
|
|
}
|
|
}).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.indexUrl == null || this.dataObj.indexUrl == "") {
|
|
toast("主页链接不能为空")
|
|
return
|
|
}
|
|
if (this.dataObj.wxNum == null || this.dataObj.wxNum == "") {
|
|
toast("微信号不能为空")
|
|
return
|
|
}
|
|
if (this.dataObj.tel == null || this.dataObj.tel == "") {
|
|
toast("电话不能为空")
|
|
return
|
|
}
|
|
if (this.dataObj.addrId == null || this.dataObj.addrId == "") {
|
|
toast("收货地址不能为空")
|
|
return
|
|
}
|
|
if (!this.imageUrl || this.imageUrl.length == 0) {
|
|
toast("证明材料不能为空")
|
|
return
|
|
}
|
|
this.dataObj.image = this.imageUrl.join(',');
|
|
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);
|
|
this.fileList.push({
|
|
url: res.url
|
|
})
|
|
this.imageUrl.push(res.fileName)
|
|
})
|
|
}
|
|
},
|
|
deleteFile(file, index) {
|
|
console.log('删除文件');
|
|
this.fileList.splice(index, 1);
|
|
this.imageUrl.splice(index, 1);
|
|
},
|
|
uploadSuccess(res, file) {
|
|
console.log('上传成功', res);
|
|
},
|
|
uploadFail(error, file) {
|
|
console.log('上传失败', error);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.my-card-box {
|
|
padding-top: calc(90rpx + var(--status-bar-height));
|
|
border-top: 1rpx solid #F4F4F4;
|
|
background-color: white;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
width: 100%;
|
|
color: #363636;
|
|
font-size: 30rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: start;
|
|
position: relative;
|
|
|
|
.card-detail {
|
|
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
padding: 20rpx;
|
|
background-color: white;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: start;
|
|
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> |