<template>
|
<view>
|
<header-bar title="分享设置" :isBack="true" @click="back"></header-bar>
|
<view class="content">
|
<!-- 分享内容设置 -->
|
<view class="setting-section">
|
<view class="section-title">分享内容设置</view>
|
<view class="setting-card">
|
<view class="setting-item">
|
<view class="setting-label">分享标题</view>
|
<view class="setting-control">
|
<input type="text" class="input" v-model="shareConfig.title" placeholder="请输入分享标题" />
|
</view>
|
</view>
|
<view class="setting-item">
|
<view class="setting-label">分享描述</view>
|
<view class="setting-control">
|
<textarea class="textarea" v-model="shareConfig.desc" placeholder="请输入分享描述"></textarea>
|
</view>
|
</view>
|
<view class="setting-item">
|
<view class="setting-label">分享图片</view>
|
<view class="setting-control">
|
<view class="image-upload">
|
<image v-if="shareConfig.image" :src="shareConfig.image" mode="aspectFill" class="uploaded-image"></image>
|
<view v-else class="upload-placeholder" @click="uploadShareImage">
|
<text class="icon iconfont icon-upload"></text>
|
<text>上传分享图片</text>
|
</view>
|
</view>
|
<view class="image-hint">建议尺寸: 300*300px，不超过2MB</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 分享样式设置 -->
|
<view class="setting-section">
|
<view class="section-title">分享样式设置</view>
|
<view class="setting-card">
|
<view class="setting-item">
|
<view class="setting-label">分享卡片样式</view>
|
<view class="setting-control">
|
<view class="card-style-list">
|
<view
|
class="card-style-item"
|
:class="{active: shareConfig.style === 'style1'}"
|
@click="shareConfig.style = 'style1'"
|
>
|
<image src="../../../../static/images/card-style1.png" mode="aspectFit"></image>
|
<view class="check-icon" v-if="shareConfig.style === 'style1'"></view>
|
</view>
|
<view
|
class="card-style-item"
|
:class="{active: shareConfig.style === 'style2'}"
|
@click="shareConfig.style = 'style2'"
|
>
|
<image src="../../../../static/images/card-style2.png" mode="aspectFit"></image>
|
<view class="check-icon" v-if="shareConfig.style === 'style2'"></view>
|
</view>
|
<view
|
class="card-style-item"
|
:class="{active: shareConfig.style === 'style3'}"
|
@click="shareConfig.style = 'style3'"
|
>
|
<image src="../../../../static/images/card-style3.png" mode="aspectFit"></image>
|
<view class="check-icon" v-if="shareConfig.style === 'style3'"
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="setting-item">
|
<view class="setting-label">显示联系方式</view>
|
<view class="setting-control">
|
<switch :checked="shareConfig.showContact" @change="shareConfig.showContact = !shareConfig.showContact" />
|
</view>
|
</view>
|
<view class="setting-item">
|
<view class="setting-label">显示公司信息</view>
|
<view class="setting-control">
|
<switch :checked="shareConfig.showCompany" @change="shareConfig.showCompany = !shareConfig.showCompany" />
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 分享权限设置 -->
|
<view class="setting-section">
|
<view class="section-title">分享权限设置</view>
|
<view class="setting-card">
|
<view class="setting-item">
|
<view class="setting-label">允许保存名片</view>
|
<view class="setting-control">
|
<switch :checked="shareConfig.allowSave" @change="shareConfig.allowSave = !shareConfig.allowSave" />
|
</view>
|
</view>
|
<view class="setting-item">
|
<view class="setting-label">允许二次分享</view>
|
<view class="setting-control">
|
<switch :checked="shareConfig.allowReshare" @change="shareConfig.allowReshare = !shareConfig.allowReshare" />
|
</view>
|
</view>
|
<view class="setting-item">
|
<view class="setting-label">分享有效期</view>
|
<view class="setting-control">
|
<picker mode="selector" range="['永久有效', '7天', '30天', '90天']" v-model="shareConfig.expiryIndex" @change="onExpiryChange">
|
<view class="picker">{{getExpiryText()}}</view>
|
</picker>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 保存按钮 -->
|
<view class="save-btn-container">
|
<button class="save-btn" @click="saveConfig">保存设置</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
currentCardId: '',
|
shareConfig: {
|
title: '',
|
desc: '',
|
image: '',
|
style: 'style1',
|
showContact: true,
|
showCompany: true,
|
allowSave: true,
|
allowReshare: true,
|
expiryIndex: 0
|
}
|
};
|
},
|
onLoad(options) {
|
if (options.current) {
|
this.currentCardId = options.current;
|
}
|
this.getShareConfig();
|
},
|
methods: {
|
back() {
|
uni.navigateBack();
|
},
|
// 获取分享配置
|
getShareConfig() {
|
let _this = this;
|
_this._post('plus.business/business/getShareConfig', {
|
business_card_id: _this.currentCardId
|
}, function(res) {
|
if (res.data) {
|
_this.shareConfig = {
|
title: res.data.title || '',
|
desc: res.data.desc || '',
|
image: res.data.image || '',
|
style: res.data.style || 'style1',
|
showContact: res.data.show_contact === 1,
|
showCompany: res.data.show_company === 1,
|
allowSave: res.data.allow_save === 1,
|
allowReshare: res.data.allow_reshare === 1,
|
expiryIndex: res.data.expiry_index || 0
|
};
|
}
|
});
|
},
|
// 上传分享图片
|
uploadShareImage() {
|
let _this = this;
|
uni.chooseImage({
|
count: 1,
|
sizeType: ['compressed'],
|
sourceType: ['album', 'camera'],
|
success: function(res) {
|
const tempFilePath = res.tempFilePaths[0];
|
_this._uploadFile('upload/image', tempFilePath, function(res) {
|
if (res.data.url) {
|
_this.shareConfig.image = res.data.url;
|
}
|
});
|
}
|
});
|
},
|
// 获取有效期文本
|
getExpiryText() {
|
const expiryOptions = ['永久有效', '7天', '30天', '90天'];
|
return expiryOptions[this.shareConfig.expiryIndex] || expiryOptions[0];
|
},
|
// 有效期选择变化
|
onExpiryChange(e) {
|
this.shareConfig.expiryIndex = e.detail.value;
|
},
|
// 保存配置
|
saveConfig() {
|
let _this = this;
|
|
// 简单验证
|
if (!_this.shareConfig.title) {
|
uni.showToast({ title: '请输入分享标题', icon: 'none' });
|
return;
|
}
|
|
const params = {
|
business_card_id: _this.currentCardId,
|
title: _this.shareConfig.title,
|
desc: _this.shareConfig.desc,
|
image: _this.shareConfig.image,
|
style: _this.shareConfig.style,
|
show_contact: _this.shareConfig.showContact ? 1 : 0,
|
show_company: _this.shareConfig.showCompany ? 1 : 0,
|
allow_save: _this.shareConfig.allowSave ? 1 : 0,
|
allow_reshare: _this.shareConfig.allowReshare ? 1 : 0,
|
expiry_index: _this.shareConfig.expiryIndex
|
};
|
|
_this._post('plus.business/business/saveShareConfig', params, function(res) {
|
if (res.code === 0) {
|
uni.showToast({ title: '保存成功' });
|
uni.navigateBack();
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.content {
|
padding: 20rpx;
|
}
|
|
.setting-section {
|
margin-bottom: 30rpx;
|
|
.section-title {
|
font-size: 32rpx;
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 20rpx;
|
}
|
|
.setting-card {
|
background: #fff;
|
border-radius: 20rpx;
|
padding: 0 30rpx;
|
|
.setting-item {
|
display: flex;
|
align-items: center;
|
padding: 28rpx 0;
|
border-bottom: 1rpx solid #f0f0f0;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.setting-label {
|
flex: 1;
|
font-size: 30rpx;
|
color: #333;
|
}
|
|
.setting-control {
|
flex: 2;
|
text-align: right;
|
|
.input,
|
.textarea {
|
border: 1rpx solid #e0e0e0;
|
border-radius: 10rpx;
|
padding: 15rpx;
|
font-size: 28rpx;
|
color: #666;
|
ext-align: left;
|
box-sizing: border-box;
|
}
|
|
.textarea {
|
height: 150rpx;
|
resize: none;
|
}
|
|
.image-upload {
|
display: inline-block;
|
|
.uploaded-image {
|
width: 200rpx;
|
height: 200rpx;
|
border-radius: 10rpx;
|
}
|
|
.upload-placeholder {
|
width: 200rpx;
|
height: 200rpx;
|
border: 2rpx dashed #e0e0e0;
|
border-radius: 10rpx;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
color: #999;
|
font-size: 26rpx;
|
|
.icon {
|
font-size: 60rpx;
|
margin-bottom: 10rpx;
|
}
|
}
|
}
|
|
.image-hint {
|
font-size: 24rpx;
|
color: #999;
|
margin-top: 10rpx;
|
text-align: left;
|
}
|
|
.card-style-list {
|
display: flex;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
|
.card-style-item {
|
position: relative;
|
width: 220rpx;
|
height: 320rpx;
|
border: 2rpx solid #e0e0e0;
|
border-radius: 10rpx;
|
overflow: hidden;
|
|
&.active {
|
border-color: #37bde6;
|
}
|
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
|
.check-icon {
|
position: absolute;
|
top: 10rpx;
|
right: 10rpx;
|
width: 36rpx;
|
height: 36rpx;
|
background: #37bde6;
|
border-radius: 50%;
|
&::after {
|
content: '';
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%) rotate(45deg);
|
width: 12rpx;
|
height: 20rpx;
|
border-right: 4rpx solid #fff;
|
border-bottom: 4rpx solid #fff;
|
}
|
}
|
}
|
}
|
|
.picker {
|
font-size: 28rpx;
|
color: #666;
|
padding: 10rpx 0;
|
}
|
}
|
}
|
}
|
}
|
|
.save-btn-container {
|
padding: 30rpx 0;
|
|
.save-btn {
|
width: 100%;
|
height: 90rpx;
|
background: #37bde6;
|
color: #fff;
|
font-size: 32rpx;
|
border-radius: 45rpx;
|
line-height: 90rpx;
|
}
|
}
|
</style>
|
