|
@@ -6,10 +6,11 @@
|
|
|
'background-repeat': 'no-repeat',
|
|
|
'background-size': '100% 100%'
|
|
|
}"
|
|
|
+ @click.stop="activeSelect"
|
|
|
>
|
|
|
<slot name="supplier-title"></slot>
|
|
|
<view class="solution_container">
|
|
|
- <view class="solution_item" v-for="item in solutionList" :key="item.id">
|
|
|
+ <view class="solution_item" v-for="(item, index) in solutionList" :key="item.id">
|
|
|
<view
|
|
|
class="solution_item_bg"
|
|
|
:style="{
|
|
@@ -24,28 +25,58 @@
|
|
|
<view class="solution_text" v-for="(text, index) in item.content" :key="index">
|
|
|
{{ text.text }}
|
|
|
</view>
|
|
|
- <button type="default" class="solution_btn" @click="openMadel">查看解决方案</button>
|
|
|
+ <button type="default" class="solution_btn" @click="openMadel(item.title, `${index+1}`)">查看解决方案</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <tui-modal
|
|
|
- :show.sync="modal"
|
|
|
- custom
|
|
|
- @cancel="() => (modal = false)"
|
|
|
- maskClosable
|
|
|
- color="#333"
|
|
|
- :size="32"
|
|
|
- >
|
|
|
+ <tui-modal :show.sync="modal" custom maskClosable color="#333" :size="32">
|
|
|
<view class="tui-modal-custom">
|
|
|
- <view class="tui-modal-custom-text">如有需要,可通过右下角电话或微信联系客服</view>
|
|
|
- <button height="72rpx" class="solution_btn" :size="28" shape="circle" @click="() => (modal = false)">确定</button>
|
|
|
+ <image class="tui-logo" src="https://static.caimei365.com/app/img/icon/supplier-h5.png" mode=""></image>
|
|
|
+ <view class="tui-close" @click="close"></view>
|
|
|
+ <view class="title_1">{{ solutionTitle }}</view>
|
|
|
+ <view class="title_2">请完成以下信息并提交,1-3个工作日会有专人与您沟通!</view>
|
|
|
+ <form>
|
|
|
+ <input class="uni-input" v-model="solutionForm.userName" placeholder="请输入姓名" />
|
|
|
+ <input class="uni-input" v-model="solutionForm.corporateName" placeholder="请输入公司名称" />
|
|
|
+ <input class="uni-input" v-model="solutionForm.mobile" type="number" maxlength="11" placeholder="请输入您的手机号" />
|
|
|
+ <multiple-select
|
|
|
+ placeholder="请选择您感兴趣的问题"
|
|
|
+ :value="solutionForm.list"
|
|
|
+ name="name"
|
|
|
+ :options="selectMultiplecolumns"
|
|
|
+ @change="selectitem"
|
|
|
+ :showValueClear="false"
|
|
|
+ ref='select'
|
|
|
+ />
|
|
|
+ </form>
|
|
|
+ <button
|
|
|
+ :class="isTrue ? 'isTrue' : ''"
|
|
|
+ height="72rpx"
|
|
|
+ class="solution_btn"
|
|
|
+ :size="28"
|
|
|
+ shape="circle"
|
|
|
+ @click="formSubmit"
|
|
|
+ >
|
|
|
+ 提交
|
|
|
+ </button>
|
|
|
</view>
|
|
|
</tui-modal>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import multipleSelect from './multiple-select/multiple-select.vue'
|
|
|
+import {mapState} from 'vuex'
|
|
|
export default {
|
|
|
+ components: {
|
|
|
+ multipleSelect
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ isShareTimeline: { // 是否从朋友圈分享进入
|
|
|
+ type: Boolean,
|
|
|
+ default: () => false
|
|
|
+ }
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
bgImg: 'https://static.caimei365.com/app/img/supplier-login/solution/bg.png',
|
|
@@ -134,13 +165,154 @@ export default {
|
|
|
type: '',
|
|
|
plain: false
|
|
|
}
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ solutionTitle: '基础版', // 表单标题
|
|
|
+ isTrue: false,
|
|
|
+ solutionForm: {
|
|
|
+ // 解决方案表单
|
|
|
+ userName: '',
|
|
|
+ corporateName: '',
|
|
|
+ mobile: '',
|
|
|
+ level: '',
|
|
|
+ list: []
|
|
|
+ },
|
|
|
+ // 多选框配置
|
|
|
+ selectMultiplecolumns: [
|
|
|
+ {
|
|
|
+ label: '商城入驻(商品SKU管理、订单交易管理)',
|
|
|
+ value: '商城入驻(商品SKU管理、订单交易管理)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '正品认证(仪器授权认证、购机客户管理、品牌运营)',
|
|
|
+ value: '正品认证(仪器授权认证、购机客户管理、品牌运营)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '销售赋能(降低管理成本,提升运营效果)',
|
|
|
+ value: '销售赋能(降低管理成本,提升运营效果)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '营销获客(全渠道媒体矩阵、压缩获客成本,提高获客数/质量)',
|
|
|
+ value: '营销获客(全渠道媒体矩阵、压缩获客成本,提高获客数/质量)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '私域运营(美业社群/美业直播、提高客户转化率)',
|
|
|
+ value: '私域运营(美业社群/美业直播、提高客户转化率)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '客户管理(客户360“画像、客户旅程、客户行为轨迹等数据)',
|
|
|
+ value: '客户管理(客户360“画像、客户旅程、客户行为轨迹等数据)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '其他',
|
|
|
+ value: '其他'
|
|
|
+ }
|
|
|
+ ] ,//数据
|
|
|
+ selectMultipleData: [], // 数据
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapState(['userInfo'])
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ solutionForm: {
|
|
|
+ handler(val) {
|
|
|
+ const a = []
|
|
|
+ const v = Object.values(val)
|
|
|
+ v.map((i,o) => {
|
|
|
+ if (!Array.isArray(i)) {
|
|
|
+ if (i.length > 0) {
|
|
|
+ a.push(true)
|
|
|
+ } else {
|
|
|
+ a.push(false)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (a.findIndex(e => e === false) == -1) {
|
|
|
+ this.isTrue = true
|
|
|
+ } else {
|
|
|
+ this.isTrue = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true
|
|
|
+ },
|
|
|
+ modal(val) {
|
|
|
+ this.$emit('solutionModal', val)
|
|
|
+ },
|
|
|
+ },
|
|
|
methods: {
|
|
|
- openMadel() {
|
|
|
+ openMadel($event, id) {
|
|
|
+ if (this.isShareTimeline) return this.$util.msg('请前往小程序使用完整服务')
|
|
|
this.modal = true
|
|
|
- }
|
|
|
+ this.solutionTitle = $event
|
|
|
+ this.solutionForm.level = id
|
|
|
+ },
|
|
|
+ // 重置
|
|
|
+ resetForm() {
|
|
|
+ this.solutionForm = {
|
|
|
+ // 解决方案表单
|
|
|
+ userName: '',
|
|
|
+ corporateName: '',
|
|
|
+ mobile: '',
|
|
|
+ level: '',
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // change 改变form列表数据
|
|
|
+ formatterList() {
|
|
|
+ if (this.selectMultipleData.length > 0) {
|
|
|
+ const newArr = []
|
|
|
+ this.selectMultiplecolumns.forEach((i, index) => {
|
|
|
+ this.selectMultipleData.forEach(o => {
|
|
|
+ if(i.value == o) {
|
|
|
+ newArr.push(index+1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ return newArr.toString()
|
|
|
+ } else return ''
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ formSubmit() {
|
|
|
+ if (this.isTrue) {
|
|
|
+ this.isTrue = false
|
|
|
+ const form = {
|
|
|
+ userId: this.userInfo.userId ||'',
|
|
|
+ level: this.solutionForm.level,
|
|
|
+ userName: this.solutionForm.userName,
|
|
|
+ corporateName: this.solutionForm.corporateName,
|
|
|
+ mobile: this.solutionForm.mobile,
|
|
|
+ content: this.formatterList()
|
|
|
+ }
|
|
|
+ if(!/(^1[0-9][0-9]{9}$)/.test(form.mobile)){
|
|
|
+ this.$util.msg('请输入正确的手机号码')
|
|
|
+ return this.isTrue = true
|
|
|
+ }
|
|
|
+ this.UserService.supplierSearchUpdate(form).then(res => {
|
|
|
+ uni.showToast({
|
|
|
+ title: '提交成功',
|
|
|
+ duration: 1000,
|
|
|
+ })
|
|
|
+ this.modal = false
|
|
|
+ this.resetForm()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.isTrue = true
|
|
|
+ }, 1000)
|
|
|
+ })
|
|
|
+ console.log(form)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 多选框确定
|
|
|
+ selectitem($event) {
|
|
|
+ this.selectMultipleData = $event
|
|
|
+ },
|
|
|
+ close() {
|
|
|
+ this.modal = false
|
|
|
+ this.$refs.select.active = false
|
|
|
+ },
|
|
|
+ // 下拉框取消选择
|
|
|
+ activeSelect() {
|
|
|
+ this.$refs.select.active = false
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -211,22 +383,60 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.tui-modal-custom {
|
|
|
- padding: 40rpx 20rpx 10rpx 20rpx;
|
|
|
- .tui-modal-custom-text {
|
|
|
- font-size: 32rpx;
|
|
|
+ .tui-close {
|
|
|
+ width: 22rpx;
|
|
|
+ height: 22rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 32rpx;
|
|
|
+ top: 24rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/img/supplier-login/modal-close.png) center;
|
|
|
+ }
|
|
|
+ .tui-logo {
|
|
|
+ width: 580rpx;
|
|
|
+ position: absolute;
|
|
|
+ z-index: -1;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+ padding-top: 40rpx;
|
|
|
+ .title_1 {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: black;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .title_2 {
|
|
|
color: #666666;
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-bottom: 56rpx;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+ .uni-input {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ margin-bottom: 23rpx;
|
|
|
+ border: 1rpx solid #cccccc;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 100;
|
|
|
+ }
|
|
|
.solution_btn {
|
|
|
- width: 400rpx;
|
|
|
- height: 72rpx;
|
|
|
- margin-top: 40rpx;
|
|
|
- background: #FF5B00;
|
|
|
- border-radius: 36rpx;
|
|
|
- color: white;
|
|
|
+ width: 320rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ margin-top: 68rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
font-size: 28rpx;
|
|
|
text-align: center;
|
|
|
- line-height: 72rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ background: #cccccc;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .isTrue {
|
|
|
+ background: #ff5b00;
|
|
|
}
|
|
|
}
|
|
|
</style>
|