Commit bcd62551 authored by 黄奎's avatar 黄奎

Merge branch 'master' of http://gitlab.oytour.com/viitto/mallapp

parents 94b2284c 40c70d6a
......@@ -731,8 +731,6 @@
"path": "carrier/list" //品牌详情
}, {
"path": "identification" //身份识别
}, {
"path": "old_identification" //旧的身份识别
}, {
"path": "firstShop/firstShop"
}, {
......
......@@ -319,15 +319,15 @@
})
},
gosignUp(){//立即报名
let parms = {
url: "/api/AppletCustomForm/GetCustomForm",
data:{FormType:this.detailsData.ListType}
let data = {
Id : this.detailsData.Id,
ListType:this.detailsData.ListType,
template_message_list : this.detailsData.template_message_list
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
}
})
uni.navigateTo({//编码
url: "/pages/kotra/billboard/listsignUp?formData="+encodeURIComponent(JSON.stringify(data)),
});
}
}
}
......
<template>
<view class="main">
<view class="input" :style="disabled?'background-color:#f5f7fa':''">
<input @click="showModal" v-model="_value" :style="disabled?'color:#c0c4cc':''" :placeholder="placeholder" disabled/>
<!-- <text v-if="clearable&&!disabled" @click="empty" class="selectIcon iconcross"></text> -->
<u-icon name="arrow" color="#909399" size="36" ></u-icon>
</view>
<view class="select-modal" :class="isShowModal?'show':''" @tap="hideModal">
<view class="select-dialog" @tap.stop="" :style="{backgroundColor:bgColor}">
<view class="select-bar bg-white">
<view class="action text-blue" @tap="cancelClick">{{cancelText}}</view>
<view class="action text-green" @tap="confirmClick">{{confirmText}}</view>
</view>
<view class="select-content">
<view class="select-item" v-for="(item,index) in list" :key="index"
:style="valueIndexOf(item)?'color:'+selectColor+';background-color:'+selectBgColor+';':'color:'+color+';'"
@click="select(item)">
<view class="title">{{getLabelKeyValue(item)}}</view>
<view style="width: 16px;">
<text class="selectIcon icongou" v-if="valueIndexOf(item)"></text>
</view>
</view>
</view>
<view style="width: 100%;height: 30px;"></view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
isShowModal:false
};
},
props: {
value:{
type:[Number,String,Array,Object],
default:null
},
placeholder:{ // 占位符
default: "",
type: String
},
multiple:{ // 是否多选
default: false,
type: Boolean
},
list: {
default: () => [],
type: Array
},
valueKey:{ // 指定list中valueKey的值作为下拉框绑定内容
default: 'value',
type: String
},
labelKey:{ // 指定list中labelKey的值作为下拉框显示内容
default: 'label',
type: String
},
disabled: {
default: false,
type: Boolean
},
clearable:{
default: false,
type: Boolean
},
cancelText:{
default: "取消",
type: String
},
confirmText:{
default: "确定",
type: String
},
color:{
default: "#000000",
type: String
},
selectColor:{
default: "#0081ff",
type: String
},
bgColor:{
default: "#F1F1F1",
type: String
},
selectBgColor:{
default: "#FFFFFF",
type: String
}
},
computed: {
_value: {
get() {
return this.get_value(this.value);
},
set(val) {
this.$emit('change', val);
}
}
},
created() {
if(this.multiple == true){
this.value = []
}
},
methods: {
get_value(val){ // 将数组值转换为以,隔开的字符串
if(val || val===0){
if(Array.isArray(val)){
let chooseAttr = []
val.forEach(item=>{
let choose = this.list.find(temp => {
let val_val = this.getValueKeyValue(temp)
return item === val_val
})
chooseAttr.push(choose)
})
let values = chooseAttr.map(temp => this.getLabelKeyValue(temp)).join(',')
return values
} else {
let choose = this.list.find(temp => {
let val_val = this.getValueKeyValue(temp)
return val === val_val
})
return this.getLabelKeyValue(choose)
}
} else {
return ""
}
},
select(item){ // 点击选项
let val = this.getValueKeyValue(item);
if(this.multiple){
let _value = this.value;
let index = _value.indexOf(val);
if(index!=-1){
_value.splice(index,1)
this.$emit('change', _value)
} else {
_value.push(val)
this.$emit('change', _value)
}
} else {
this.value = val
this.$emit('change', val)
this.hideModal()
}
},
valueIndexOf(item){
let val = this.getValueKeyValue(item);
if(Array.isArray(this.value)){
return this.value.indexOf(val)!=-1
} else {
return this.value === val
}
},
getLabelKeyValue(item){ // 获取label
return item[this.labelKey]
},
getValueKeyValue(item){ // 获取value
return item[this.valueKey]
},
empty(){ // 清空
if(this.multiple){
this.$emit('change', [])
} else {
this.$emit('change', '')
}
},
cancelClick(){ // 点击取消
this.$emit('cancel', this._value)
this.hideModal()
},
confirmClick(){ // 点击确定
this.$emit('confirm', this._value)
this.hideModal()
},
showModal(){ // 显示model
if(!this.disabled){
this.isShowModal = true
}
},
hideModal(){ // 隐藏model
this.isShowModal = false
}
}
}
</script>
<style>
@font-face {font-family: "selectIcon";
src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208'); /* IE9 */
src: url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.eot?t=1590375117208#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMEAAsAAAAABvQAAAK4AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBRIFCATYCJAMMCwgABCAFhQUHNRsfBsg+QCa3uoO0oAJTMwhxVu965keqWBy1hkbwtfzWb2Z279/shRhJisKF6FApKLI7oyBbpAaHo3w24k+ca9EUJbDmjaeznUdZ/FOUlkWdJ33rizZY/Pw6J5Xw0qKYxHTMesePHVT6EFpaC4zV70sKi2bYgNPc1w0WHnDVC/e/UnNTgyP+4Jq6BBpIHoisgypLaIAFEtU0wgeaIG8Yu4nAIZwnUK1QgFfOT6nUUoBpgXjj2lqplTMpiuXtCW3N2iK+aPTS2/Qdnzny8d+5IEiaDMy99exklra//FrKnX48pChmgrq5QcYRQCEe17ruqgqLAKv8WntwqwhpLms/nB5yW/iHRxJEC0QOgT3NnfgF01NBKvOuIzNoZdh5gJuAeGrsozE8vOJ7u5D832oz55039W5G+S52K0H+zNf1TJz07k26kqoQybRfwVFV4rjDS/K8EXUyuF1cXnT3weKS9Rvdm/xe7h8oA1hLwOR18R+Y4n4zwpr4z5SU089Vc+cpfWL+mn5APmT3Z39jeOs/GbWjK+DnmsuL/u6ehMX4j4yedSVkAUUuPh3TY022MtKZUEOtPqCb8Bkvnr5XT6imU0gGrEJW7aAL/gw0OhegVV2F6pC7uTOppirKIA4MFQhTrpCM+AbZlDu64L/QmAkQWlMhQXU75D07O9Gtl0PUYjTBLyAzOLNQYtypIEEjvsXtBLQTooV2nrQrGEau2gKmZlR4L8gwnGtBJbUn1diCOOQUnEkTkRAOeci9KHOQxvFro+tx3ZcGAaeljstCSBNDJuArgIyBYyy6OdZxAhHIELu1IC9AtgShCVtLltEKrSff1XoHJo3RC33hM63o3j6pSNkmqmIWEAtxFHB2OwoRBAfyeqE3r2ogHeF42dBhs7gvf7CukH5MmlUGOCpHihxFfs6TehDyKCqVAA==') format('woff2'),
url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.woff?t=1590375117208') format('woff'),
url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.ttf?t=1590375117208') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('//at.alicdn.com/t/font_1833441_ycfzdhg2u3.svg?t=1590375117208#selectIcon') format('svg'); /* iOS 4.1- */
}
.selectIcon {
font-family: "selectIcon" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icongou:before {
content: "\e61c";
}
.iconcross:before {
content: "\e61a";
}
</style>
<style lang="scss" scoped>
.main{
font-size: 28rpx;
}
.bg-white{
background-color: #FFFFFF;
}
.text-blue{
color: #0081ff;
}
.text-green{
color: #39b54a;
}
.input {
display: flex;
align-items:center;
font-size: 28rpx;
height: 60rpx;
border-bottom:1px solid #DADCE6;
padding:10rpx 0 20rpx 0;
// border-style: solid;
// border-width: 1rpx;
// border-color: rgba(0, 0, 0, 0.1);
input{
flex: 1;
}
}
.select-modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9999;
opacity: 0;
outline: 0;
text-align: center;
-ms-transform: scale(1.185);
transform: scale(1.185);
backface-visibility: hidden;
perspective: 2000rpx;
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s ease-in-out 0s;
pointer-events: none;
margin-bottom: -1000rpx;
&::before {
content: "\200B";
display: inline-block;
height: 100%;
vertical-align: bottom;
}
.select-dialog {
position: relative;
display: inline-block;
margin-left: auto;
margin-right: auto;
background-color: #f8f8f8;
overflow: hidden;
width: 100%;
border-radius: 0;
.select-content{
// background-color: #F1F1F1;
max-height: 420rpx;
overflow:auto;
.select-item{
padding: 20rpx;
display: flex;
.title{
flex: 1;
}
}
}
}
}
.select-modal.show {
opacity: 1;
transition-duration: 0.3s;
-ms-transform: scale(1);
transform: scale(1);
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;
margin-bottom: 0;
}
.select-bar {
padding: 0 20rpx;
display: flex;
position: relative;
align-items: center;
min-height: 80rpx;
justify-content: space-between;
.action {
display: flex;
align-items: center;
height: 100%;
justify-content: center;
max-width: 100%;
}
}
</style>
<style>
.single_Phone {
<style >
.listsignUp{
width: 100%;
height: 100vh;
overflow-y: auto;
background:#F6F6F6 ;
padding: 18px;
}
.listsignUp .single_Phone {
font-size: 28rpx;
color: #1F1F1F;
font-weight: bold;
margin-bottom:10rpx;
}
.single_Input{
.listsignUp .single_Input{
border-bottom:1px solid #DADCE6;
padding:10rpx 0 20rpx 0;
}
.single_Remark{
.listsignUp .single_Remark{
margin:10rpx 0 40rpx 0;
font-size:25rpx;
color:#808080;
}
.listsignUp .btn{
width: 100%;
height: 44px;
border-radius: 10px;
background: #F70027;
font-size: 16px;
color: #FFF;
text-align: center;
line-height: 44px;
margin: 20px 0;
}
</style>
<template>
<view style="height:100vh;padding:30rpx;">
<template v-for="(item,index) in dataList">
<singleText v-if="item.CompKey=='SingleLineText'" :CompData="item.CompData"></singleText>
<multipleText v-if="item.CompKey=='MultiLineText'" :CompData="item.CompData"></multipleText>
<selectChoice v-if="item.CompKey=='DorpDownList'" :CompData="item.CompData"></selectChoice>
</template>
<view class="listsignUp">
<view style="width: 100%;padding: 15px;border-radius: 15px;background: #FFF;">
<template v-for="(item,index) in dataList">
<singleText v-if="item.CompKey=='SingleLineText'" :CompData="item.CompData" :index='index' @success="datasuccess()"></singleText>
<multipleText v-if="item.CompKey=='MultiLineText'" :CompData="item.CompData" :index='index' @success="datasuccess()"></multipleText>
<selectChoice v-if="item.CompKey=='DorpDownList'" :CompData="item.CompData" :index='index' @success="datasuccess()"></selectChoice>
<pictureUpload v-if="item.CompKey=='ImageUploadComp'" :CompData="item.CompData" :index='index' @success="datasuccess()"></pictureUpload>
<videoUpload v-if="item.CompKey=='VideoUploadComp'" :CompData="item.CompData" :index='index' @success="datasuccess()"></videoUpload>
</template>
<view class="btn" @click="setapply()">
提交申请
</view>
</view>
</view>
</template>
<script>
import singleText from "./plugin/singleText";
import multipleText from "./plugin/multipleText"
import selectChoice from "./plugin/selectChoice"
import pictureUpload from "./plugin/pictureUpload"
import videoUpload from "./plugin/videoUpload"
export default {
components: {
singleText,
multipleText,
selectChoice
selectChoice,
pictureUpload,
videoUpload
},
data() {
return {
......@@ -42,28 +76,46 @@
Id: 5,
},
dataList: [],
pageCount: 1
pageCount: 1,
formData:null
}
},
created() {},
created() {
uni.setNavigationBarTitle({
title: "榜单报名",
});
},
mounted() {
this.getData();
},
onLoad(option) {
if(option && option.formData){//解码
this.formData = JSON.parse(decodeURIComponent(option.formData))
console.log(this.formData)
this.getCustomForm()
}
},
onLoad() {},
methods: {
getData() {
this.request2({
url: "/api/AppletCustomForm/GetCustomFormInfo",
data: this.msg,
},
(res) => {
if (res.resultCode == 1) {
console.log(res,'数据');
this.dataList=res.data.FormDataList;
}
getCustomForm(){
let parms = {
url: "/api/AppletCustomForm/GetCustomForm",
data:{FormType:this.formData.ListType}
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
this.dataList=res.data.FormData;
}
);
})
},
datasuccess(data,index){
console.log(data,index)
this.dataList[index].CompData = data
},
setapply(){
console.log('提交',this.dataList)
}
}
}
</script>
<template>
<view>
<view class="single_Phone">
<span style="color:red;margin-right:5rpx;" v-show="CompData.IsRequire">*</span>{{CompData.Name}}
</view>
<textarea style="height: 50px;width:100%;" v-model="CompData.TextValue" :maxlength="CompData.WordsLength==0?-1:CompData.WordsLength" class="single_Input" :placeholder="`请输入${CompData.Name}`"/>
<view class="single_Remark" v-if="CompData.Remark">{{CompData.Remark}}</view>
</view>
</template>
<script>
export default {
props: ["CompData"],
data() {
return {
}
},
created() {},
mounted() {
},
onLoad() {},
methods: {
}
}
<template>
<view>
<view class="single_Phone">
<span style="color:red;margin-right:5rpx;" v-show="CompData.IsRequire">*</span>{{CompData.Name}}
</view>
<textarea style="height: 50px;width:100%;" @input='getvalue' v-model="CompData.TextValue"
:maxlength="CompData.WordsLength==0?-1:CompData.WordsLength" class="single_Input"
:placeholder="`请输入${CompData.Name}`" />
<view class="single_Remark" v-if="CompData.Remark">{{CompData.Remark}}</view>
</view>
</template>
<script>
export default {
props: ["CompData",'index'],
data() {
return {
}
},
created() {},
mounted() {
},
onLoad() {},
methods: {
getvalue() {
this.$emit('success', this.CompData, this.index)
}
}
}
</script>
<template>
<view>
<view class="single_Phone">
<span style="color:red;margin-right:5rpx;" v-show="CompData.IsRequire">*</span>{{CompData.Name}}
</view>
<u-upload ref="uUpload" :action="action" :show-tips="false" @on-remove="onRemove"
@on-oversize="onversize"
@on-exceed="onexceed"
:max-size="CompData.FileSizeLimit * 1024 * 1024"
:max-count="CompData.FileCount"
:file-list="fileList"
@on-success="uploadSuccessHandler"
></u-upload>
<view class="single_Remark" v-if="CompData.Remark">{{CompData.Remark}}</view>
</view>
</template>
<script>
export default {
props: ["CompData",'index'],
data(){
return{
action: this.host2 + "/api/File/UploadTencent",
fileList:[],
}
},
created() {
let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo").MallBaseId : 1;
this.action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
},
methods:{
uploadSuccessHandler(data, index, lists) {
let r = JSON.parse(data);
this.CompData.FileList.push(r.data);
this.$emit('success', this.CompData, this.index)
},
onRemove(index) {
this.CompData.FileList.splice(index, 1);
},
onversize(){
uni.showToast({
title: '超出允许的文件大小',
icon: "none"
});
},
onexceed(){
uni.showToast({
title: '超出最大允许的文件个数',
icon: "none"
});
}
}
}
</script>
<style>
</style>
<template>
<view>
<u-picker v-model="CompData.OptionValue" mode="selector" :list="CompData.OptionList"></u-picker>
<view class="single_Phone">
<span style="color:red;margin-right:5rpx;" v-show="CompData.IsRequire">*</span>{{CompData.Name}}
</view>
<ld-select :list="CompData.OptionList"
label-key="Name" value-key="Id"
:multiple="CompData.IsMultiple"
placeholder="请选择"
v-model="CompData.OptionValue"
@change="selectChange"></ld-select>
<view class="single_Remark" v-if="CompData.Remark">{{CompData.Remark}}</view>
</view>
</template>
<script>
import ldSelect from '../components/ld-select.vue'
export default {
props: ["CompData",'index'],
components: { ldSelect},
data(){
return{
}
},
created() {
},
methods:{
selectChange(e){
console.log(e)
this.CompData.OptionValue = e
this.$emit('success', this.CompData, this.index)
}
}
}
</script>
<style>
......
......@@ -3,14 +3,14 @@
<view class="single_Phone">
<span style="color:red;margin-right:5rpx;" v-show="CompData.IsRequire">*</span>{{CompData.Name}}
</view>
<input class="single_Input" v-model="CompData.TextValue" :maxlength="CompData.WordsLength==0?-1:CompData.WordsLength" :placeholder="`请输入${CompData.Name}`" />
<input class="single_Input" @input='getvalue' v-model="CompData.TextValue" :maxlength="CompData.WordsLength==0?-1:CompData.WordsLength" :placeholder="`请输入${CompData.Name}`" />
<view class="single_Remark" v-if="CompData.Remark">{{CompData.Remark}}</view>
</view>
</template>
<script>
export default {
props: ["CompData"],
props: ["CompData",'index'],
data() {
return {
......@@ -22,7 +22,10 @@
},
onLoad() {},
methods: {
getvalue(){
this.$emit('success',this.CompData,this.index)
}
}
}
</script>
<template>
<view>
<view class="single_Phone">
<span style="color:red;margin-right:5rpx;" v-show="CompData.IsRequire">*</span>{{CompData.Name}}
</view>
<view style="width:100%; height: 320rpx;position: relative;margin-bottom: 10px;" v-for="(x,y) in FileList" :key="y">
<video class="mmyVideo" :id="'myVideo'+y" :src="x" :controls='controls' :show-center-play-btn='false'
:show-fullscreen-btn='false' @fullscreenchange='videoControl'></video>
<view
style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;"
@click="enlarge('myVideo'+y)">
<u-icon name="play-circle-o" :size="70" color="#FFF"></u-icon>
</view>
<view style="width: 50rpx;height: 50rpx;position: absolute;right: 10rpx;top:10rpx;
border-radius: 25rpx;
background: #F30329;
display: flex;
align-items: center;
justify-content: center;
" @tap.stop="CompData.FileList.splice(y,1),FileList.splice(y,1)">
<u-icon class="u-icon" name="cross" size="30" color="#ffffff"></u-icon>
</view>
</view>
<view>
<view slot="addBtn" class="slot-btn" @click="upvideo()" v-if="FileList.length<CompData.FileCount">
<image class="image"
src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/1616573063000_398.png"
mode="widthFix"></image>
</view>
</view>
<view class="single_Remark" v-if="CompData.Remark">{{CompData.Remark}}</view>
</view>
</template>
<script>
export default {
props: ["CompData",'index'],
data() {
return {
action: this.host2 + "/api/File/UploadTencent",
controls: false, //显示默认控件
FileList:[],
}
},
created() {
let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo")
.MallBaseId : 1;
this.action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
this.FileList = JSON.parse((JSON.stringify(this.CompData.FileList)))
},
methods: {
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext(file);
this.videoContext.requestFullScreen({
direction: 0
})
},
videoControl(e) {
if (e.detail.fullScreen == false) {
this.videoContext.stop()
this.controls = false
} else {
this.videoContext.play()
this.controls = true
}
},
upvideo() {
let that = this
uni.chooseVideo({
count: 1,
sourceType: ['camera', 'album'],
success: function(res) {
that.upFile(res.tempFilePath, 1)
uni.showLoading({
title: '上传中...'
})
},
fail(err) {
console.log(err, )
}
});
},
upFile(filePath, type) {
let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo")
.MallBaseId :
1;
let action = this.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
let that = this
uni.uploadFile({
url: action,
filePath: filePath,
name: 'file',
formData: {
user: 'tesdt'
},
success: (uploadFileRes) => {
uni.hideLoading()
if (uploadFileRes.statusCode == 200) {
let data = JSON.parse(uploadFileRes.data)
// that.model.VideoUrl=data.data
that.FileList.push(data.data)
that.CompData.FileList.push(data.data)
that.$forceUpdate()
that.$emit('success', that.CompData, that.index)
}
},
fail: function(res) {
console.log(res)
wx.showToast({
title: '上传失败!',
icon: 'none',
duration: 1000
})
}
});
},
}
}
</script>
<style>
.slot-btn {
width: 220rpx;
height: 220rpx;
background: #F5F5F5;
border-radius: 17rpx;
display: flex;
align-items: center;
justify-content: center;
}
.slot-btn .image {
width: 54rpx;
height: auto;
}
.mmyVideo {
width: 100%;
height: 100%;
}
</style>
<template>
<view style="height: 100vh; overflow: hidden;width:100vw;">
<scroll-view scroll-y="true" style="width: 100%;height: 100%;" @scroll="scroll">
<view style="height: 700rpx;position: relative;z-index: 1;" :style="{'opacity':(100-boxOption)+'%'}">
<u-swiper
:list="details.imgs"
:effect3d="false"
:height="700"
:interval="5000"
:border-radius="0"
@click="previewImage"
name='name'
v-if="active==1"
></u-swiper>
<view style="background-color: #111;height: 700rpx;position: relative;" v-if="active==0">
<video id="myVideo" :src="details.VideoUrl" style="width: 100%;height: 100%;"
object-fit ='fill'
:controls='controls'
:show-center-play-btn='false'
:show-fullscreen-btn='false'
@fullscreenchange='videoControl'
></video>
<view @click="enlarge(details.VideoUrl)" style="position: absolute;left: 50%;top: 50%;margin-top: -49rpx;margin-left: -49rpx;width: 98rpx;height: 98rpx;border-radius: 20rpx;background-color: rgba(255,255,255,.4);display: flex;align-items: center;justify-content: center;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616471847000_345.png" style="width: 37rpx;height: 44rpx;" mode=""></image>
</view>
</view>
<view style="width: 100px;height: 50rpx;position: absolute;background-color: rgba(255,255,255,.6);border-radius: 50rpx;left: 50%;bottom: 80px;margin-left:-50px;" v-if="details.VideoUrl!=''">
<u-tabs bg-color="rgba(0,0,0,0)" :is-scroll="false" name="Name" :list="typeList" :active-color="mainColor"
:current="active" @change="changeHandler" :show-bar="true" :bold="false" height="50"
duration="0" font-size="24" :activeFontSize="24" :typeStyle="2"></u-tabs>
</view>
<view style="height: 50rpx;position: absolute;background-color: rgba(0,0,0,.6);border-radius: 50rpx;left: 30rpx;bottom: 80px;color:#FFF;padding:0 18rpx;display: flex;align-items: center;">
<u-icon name="photo-o" size="26" color="#FFF" style="margin-right: 6rpx;"></u-icon>
<text style="font-size: 22rpx;font-family: pingfang;">{{details.BannerList.length}}</text>
</view>
<view @click="goback" :style="[titleStyle,{opacity:'100% !important'}]" style="position: fixed;top: 0;left: 0;padding-left: 6rpx;">
<u-icon name="arrow-left" size="44" color="#FFF" style="margin-top: 22rpx;"></u-icon>
</view>
</view>
<view class="kotra-title" :style="[titleStyle]">
<view @click="goback">
<u-icon name="arrow-left" size="44"></u-icon>
</view>
<view style="flex: 1;margin-left: 30rpx; text-align: left;">{{details.BrandName}}</view>
</view>
<view style="position: relative;z-index: 2;">
<view style="position: relative;top: -70px;border-top-left-radius: 30px;border-top-right-radius: 30px;height: 900px;background-color: #FFF;padding:60rpx 40rpx;">
<view style="font-size: 21px;color: #1F1F1F;font-weight: bold;">
{{details.FullBrandName}}
</view>
<view style="width: 100%;height: 35px;display: flex;align-items: center;justify-content: space-between;">
<view class="label-b" :style="{'background':mainColor}">
{{details.ProjectName}}
</view>
<image v-if="details.CollectId>0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-love.png" style="width: 63px;height: 63px;" @click="getlove()"></image>
<image v-if="details.CollectId==0" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616480343000_509.png" style="width: 63px;height: 63px;" @click="getlove()"></image>
</view>
<view class="brand-xinx">
<view class="brand-xinx-item">
<view class="brand-xinx-item-t" :style="{color:mainColor}">{{details.ShopNum>0?details.ShopNum:'/'}}</view>
<view class="brand-xinx-item-m">店铺数量</view>
</view>
<view class="brand-xinx-item" style="padding-left: 10px;">
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea==0 && details.EndBuiltUpArea!=0">{{details.EndBuiltUpArea>=10000?details.EndBuiltUpArea/10000+'万':details.EndBuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.EndBuiltUpArea==0 && details.BuiltUpArea!=0">{{details.BuiltUpArea>=10000?details.BuiltUpArea/10000+'万':details.BuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea!=0 && details.EndBuiltUpArea!=0">{{details.BuiltUpArea>=10000?details.BuiltUpArea/10000+'万':details.BuiltUpArea}}~{{details.EndBuiltUpArea>=10000?details.EndBuiltUpArea/10000+'万':details.EndBuiltUpArea}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.BuiltUpArea==0 && details.EndBuiltUpArea==0">/</view>
<view class="brand-xinx-item-m">店铺面积</view>
</view>
<view class="brand-xinx-item" style="padding-left: 10px;">
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement==0 && details.EndAreaRequirement!=0">{{details.EndAreaRequirement>=10000?details.EndAreaRequirement/10000+'万':details.EndAreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.EndAreaRequirement==0 && details.AreaRequirement!=0">{{details.AreaRequirement>=10000?details.AreaRequirement/10000+'万':details.AreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement!=0 && details.EndAreaRequirement!=0">{{details.AreaRequirement>=10000?details.AreaRequirement/10000+'万':details.AreaRequirement}}~{{details.EndAreaRequirement>=10000?details.EndAreaRequirement/10000+'万':details.EndAreaRequirement}}<text style="font-size: 12px;"></text></view>
<view class="brand-xinx-item-t" :style="{color:mainColor}" v-if="details.AreaRequirement==0 && details.EndAreaRequirement==0">/</view>
<view class="brand-xinx-item-m">需求面积</view>
</view>
</view>
<view class="brand-x">
<view class="brand-x-l">拓店区域:</view>
<view class="brand-x-r">{{details.StoreExpansion}}</view>
</view>
<view class="brand-x">
<view class="brand-x-l">品牌定位:</view>
<view class="brand-x-r">{{details.BrandType}}</view>
</view>
<view class="brand-x">
<view class="brand-x-l">客群定位:</view>
<view class="brand-x-r">{{details.CustomerType}}</view>
</view>
<view style="width: 100%;position: relative;margin-top: 46px;background: rgba(252, 42, 76, 0.05);padding: 15px 0;border-radius: ;">
<view style="width: 150rpx;height: 150rpx;background: #FFFFFF;box-shadow: 0px 2px 15px 0px rgba(167, 167, 167, 0.39);border-radius: 10px;position: absolute;left: 0;top: -23px;">
<image :src='details.Logo' style="width: 100%;height: 100%;" mode="aspectFill"></image>
</view>
<view style="width: calc(100vw - 40px - 150rpx - 20px);margin-left: 190rpx;">
<view style="font-size: 13px;color: #B1B1B1;">品牌名称:</view>
<view style="font-size: 15px;color: #1F1F1F;font-weight: bold;margin-top: 10px;">
{{details.BrandName}}
</view>
</view>
</view>
<view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-wyxq.png" mode="widthFix"></image>
</view>
<view class="Listbox" >
<view id="kiakou" class="Listbox-item" @click="showTips('kiakou',details.ShopSize,details.IsShopSize)">
<image :src="EquityList[8].ImagePath" v-if="details.IsShopSize==1" mode="widthFix"></image>
<image :src="EquityList[8].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.IsShopSize==1?'#424242':'#D6D6D6'}">{{EquityList[8].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[0].ImagePath" v-if="details.Plumbing==1" mode="widthFix"></image>
<image :src="EquityList[0].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Plumbing==1?'#424242':'#D6D6D6'}">{{EquityList[0].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[7].ImagePath" v-if="details.Caliber==1" mode="widthFix"></image>
<image :src="EquityList[7].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Caliber==1?'#424242':'#D6D6D6'}">{{EquityList[7].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[1].ImagePath" v-if="details.Sewage==1" mode="widthFix"></image>
<image :src="EquityList[1].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.Sewage==1?'#424242':'#D6D6D6'}">{{EquityList[1].Title}}</text>
</view>
<!-- 燃气 -->
<view class="Listbox-item" id="ranqi" @click="showTips('ranqi',details.RanQiBZ,details.RanQi)">
<image :src="EquityList[2].ImagePath" v-if="details.RanQi==1" mode="widthFix"></image>
<image :src="EquityList[2].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.RanQi==1?'#424242':'#D6D6D6'}">{{EquityList[2].Title}}</text>
</view>
<view class="Listbox-item" id="dianliang" @click="showTips('dianliang',details.DianLiang,details.IsDianLiang)">
<image :src="EquityList[3].ImagePath" v-if="details.IsDianLiang==1" mode="widthFix"></image>
<image :src="EquityList[3].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.IsDianLiang==1?'#424242':'#D6D6D6'}">{{EquityList[3].Title}}</text>
</view>
<view class="Listbox-item" id="paiyan" @click="showTips('paiyan',details.PaiYanBZ,details.PaiYan)">
<image :src="EquityList[5].ImagePath" v-if="details.PaiYan==1" mode="widthFix"></image>
<image :src="EquityList[5].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.PaiYan==1?'#424242':'#D6D6D6'}">{{EquityList[5].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[6].ImagePath" v-if="details.KongTiao==1" mode="widthFix"></image>
<image :src="EquityList[6].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.KongTiao==1?'#424242':'#D6D6D6'}">{{EquityList[6].Title}}</text>
</view>
<view class="Listbox-item" >
<image :src="EquityList[4].ImagePath" v-if="details.XinFeng==1" mode="widthFix"></image>
<image :src="EquityList[4].Image_n" v-else mode="widthFix"></image>
<text class="list-item-text" :style="{color:details.XinFeng==1?'#424242':'#D6D6D6'}">{{EquityList[4].Title}}</text>
</view>
</view>
<view class="brand-title">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-tzxq.png" mode="widthFix"></image>
</view>
<view style="margin-top: 30px;" v-if="details.Advertising!=''">
<h-parse :content="details.Advertising" @navigate="clickDescription"></h-parse>
</view>
<view style="margin-top: 30px;" v-if="details.Advertising==''">
</view>
<view class="brand-title" style="width: 36px;">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/kotra-qt.png" mode="widthFix"></image>
</view>
<view style="margin-top: 30px;" v-if="details.Other!=''">
<h-parse :content="details.Other" @navigate="clickDescription"></h-parse>
</view>
<view style="margin-top: 30px;" v-if="details.Other==''">
</view>
</view>
</view>
</scroll-view>
<bianmarenTooltip
:gravity="gravity"
:tooltipShow="tooltipShow"
:btns="tooltipBtns"
:eleId="eleId"
></bianmarenTooltip>
</view>
</template>
<script>
import hParse from "@/components/u-parse/parse.vue";
import bianmarenTooltip from '../components/bianmaren-tooltips.vue'
let timer
export default {
components: {
hParse,
bianmarenTooltip
},
data() {
return {
ID:0,
details:{},
typeList: [{
Id: 0,
Name: '视频'
}, {
Id: 1,
Name: '图片'
}],
boxOption:0,
navsOption:0,
titleStyle:{},
active:0,
mainColor:'',
controls:false,//显示默认控件
EquityList:[
{"Title":"上下水","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-sxs-n.png",
},
{"Title":"排污","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pw-n.png"},
{"Title":"燃气","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-rh-n.png"},
{"Title":"电量负荷","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-dl-n.png"},
{"Title":"新风","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-xf-n.png"},
{"Title":"排烟量","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-pyl-n.png"},
{"Title":"空调","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kt-n.png"},
{"Title":"管径","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-gj-n.png"},
{"Title":"开口尺寸","ImagePath":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc.png",
"Image_n":"https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/k-brand-kkcc-n.png"},
],
gravity:'top',
tooltipShow:false,
tooltipBtns:["今日sad"],
eleId:"",//点击元素
}
},
onLoad(options) {
let that=this
if(options && options.id){
this.ID = options.id
this.GetBrandDetails()
}
uni.getSystemInfo({
success(res) {
that.titleStyle = {
height: "45px",
paddingTop: `${res.statusBarHeight}px`,
opacity:"0%"
};
},
});
this.mainColor = this.$uiConfig.mainColor;
},
onShareTimeline() {//朋友圈
let uid = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserId :
0;
if (uid == 0) {
uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
}
let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").SmallShopId :
0;
if (SmallShopId == 0) {
//如果微店id为0 去找所属微店id
SmallShopId = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserSmallShopId :
0;
}
let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
return {
title: this.details.FullBrandName?this.details.FullBrandName:'',
query: "user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up +'&id=' +this.ID,
imageUrl:this.details.BannerList && this.details.BannerList.length>0?this.details.BannerList[0]:'',
};
},
onShareAppMessage(res) {//朋友
let uid = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserId :
0;
if (uid == 0) {
uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
}
let SmallShopId = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").SmallShopId :
0;
if (SmallShopId == 0) {
//如果微店id为0 去找所属微店id
SmallShopId = uni.getStorageSync("mall_UserInfo") ?
uni.getStorageSync("mall_UserInfo").UserSmallShopId :
0;
}
let Up = uni.getStorageSync("mall_UserInfo") ? uni.getStorageSync("mall_UserInfo").UserPageType : 0;
return {
title: this.details.FullBrandName?this.details.FullBrandName:'',
path: "/pages/index/index?user_id=" + uid + "&SmallShopId=" + SmallShopId + "&Up=" + Up +'&id=' +this.ID+'&JumpType=15',
imageUrl: this.details.BannerList && this.details.BannerList.length>0?this.details.BannerList[0]:'',
};
},
methods: {
showTips(id,text,showis){
clearInterval(timer);
if(this.eleId== id && this.tooltipShow == true){
this.tooltipShow = false
}else{
console.log(text,showis)
if(text!=undefined && text!=null && text!='' && showis ==1 ){
this.eleId = id;
this.tooltipBtns = [text]
this.tooltipShow = true;
timer = setTimeout(()=>{
this.tooltipShow = false;
},3000)
}else{
this.tooltipShow = false;
}
}
},
clickDescription(e) {
console.log(e);
},
GetBrandDetails(){
this.request2(
{
url: '/api/AppletTrade/GetBrandDetails',
data: {ID:this.ID}
},
res => {
if(res.resultCode==1){
this.details = res.data;
if(res.data.VideoUrl==''){
this.active=1
};
this.details.imgs=[]
this.details.BannerList.forEach(x=>{
let obj= {
name:x
}
this.details.imgs.push(obj)
})
}
}
);
},
changeHandler(i) {
this.active = i;
},
previewImage(i) {
console.log(i)
uni.previewImage({
urls: this.details.BannerList,
current: i,
longPressActions: {
itemList: ["发送给朋友", "保存图片", "收藏"],
success: function(data) {},
fail: function(err) {
console.log(err.errMsg);
},
},
});
},
scroll(e) {
this.boxOption = Math.floor((e.detail.scrollTop-50)/1.5);
this.titleStyle.opacity=((e.detail.scrollTop-100)<0?0:Math.floor(e.detail.scrollTop-100))+"%";
this.tooltipShow = false
this.$forceUpdate()
},
goback() {
uni.navigateBack({
delta: 1,
});
},
enlarge(file) {
// 全屏
this.videoContext = uni.createVideoContext('myVideo');
this.videoContext.requestFullScreen({
direction:0
})
},
videoControl(e){
if(e.detail.fullScreen==false){
this.videoContext.stop()
this.controls=false
}else{
this.videoContext.play()
this.controls=true
}
},
getlove(){
this.request2(
{
url: '/api/AppletTrade/GetCollect',
data: {Type:2,SourceId:this.ID,Id:this.details.CollectId}
},
res => {
if(res.resultCode==1){
uni.showToast({
title: res.message,
icon:'none'
});
this.GetBrandDetails()
}
}
);
}
}
}
</script>
<style>
.kotra-title {
line-height: 45px !important;
font-size: 16px;
text-align: center;
position: fixed;
left: 0;
top: 0;
width: 100%;
color: #111;
box-sizing: content-box;
z-index: 5;
display: flex;
align-items: center;
background-color: #f6f6f6;
padding-left: 6rpx;
}
.label-b{
height: 20px;
padding: 0 3px;
font-size: 13px;
color: #FFF;
border-radius: 4px;
font-weight: bold;
}
.brand-xinx{
width: 100%;
display: flex;
align-items: center;
margin-top: 15px;
}
.brand-xinx-item{
width: 33%;
font-size: 17px;
}
.brand-xinx-item-m{
font-size: 12px;
color: #A4A4A4;
margin: 10px 0;
}
.brand-xinx-item-t{
display: flex;
align-items: flex-end;
font-weight: bold;
}
.brand-x{
width: 100%;
display: flex;
align-items: flex-start;
margin-top: 18px;
}
.brand-x-l{
font-size: 13px;
color: #A4A4A4;
width: 130rpx;
}
.brand-x-r{
font-size: 13px;
color: #1F1F1F;
line-height: 20px;
font-family: PingFang SC;
width: calc(100vw - 40px - 130rpx);
}
.brand-title{
width: 134rpx;
margin-top: 30px;
}
.brand-title image{
width: 100%;
height: auto;
}
.Listbox{
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.Listbox-item{
width: 25%;
display: flex;
flex-direction: column;
align-items: center;
height: 170rpx;
align-items: center;
justify-content: center;
}
.Listbox-item image{
width: 74rpx;height: auto;
}
.list-item-text{
width: calc(100vw / 4);
margin-top: 5px;
text-align: center;
font-size: 12px;
}
</style>
<template>
<view class="page">
<view class="progressBox">
<view class="progressName">
<text class="cur">{{stepName}}</text>
<text class="nex">{{nextSepName}}</text>
</view>
<u-line-progress class="progress" :percent="percent" :show-percent="false" :height="10"
inactive-color="#DADCE6" active-color="#F70027"></u-line-progress>
</view>
<view class="stepBox">
<view class="stepItem" v-if="step==1">
<view v-for="(item,index) in stepOneList" :key="index">
<view class="itemBox">
<view class="name">
{{item.name}} <text class="tip" v-if="item.tip">{{item.tip}}</text>
</view>
<view class="con1" v-if="item.type==1">
<input class="input" type="text" v-model="dataOne[item.field]" :placeholder="item.text"
placeholder-style="color: #CECECEFF" @focus="inputFcous(item)" />
<view style="width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;position: absolute;
top: -2rpx;
right: 10rpx;
z-index: 10;" @click="delInputText(item.field)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/delete.png"
v-if="item.delIcon" class="delIcon" mode="widthFix"></image>
</view>
</view>
<view class="con2" v-if="item.type==2">
<!-- 未上传成功 -->
<image :src="businessLicenseDemo" v-if="!businessLicenseUploadIsSuccess" class="conImage"
mode="widthFix" @click="chooseImg"></image>
<!-- 上传成功 -->
<image :src="dataOne.BusinessLicense" v-if="businessLicenseUploadIsSuccess" class="conImage"
mode="heightFix"></image>
<view class="reupload" v-if="businessLicenseUploadIsSuccess" @click="chooseImg">
重新上传
</view>
</view>
</view>
</view>
</view>
<view class="stepItem" v-if="step==2">
<view v-for="(item,index) in stepTwoList" :key="index">
<view class="itemBox">
<view class="name">
{{item.name}}&nbsp; <text class="tip" v-if="item.tip">{{item.tip}}</text>
</view>
<view class="con1" v-if="item.type==1">
<input class="input" type="text" v-model="dataTwo[item.field]" :placeholder="item.text"
placeholder-style="color: #CECECEFF" @focus="inputFcous(item)" />
<view style="width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;position: absolute;
top: -2rpx;
right: 10rpx;
z-index: 10;" @click="delInputText(item.field)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/delete.png"
v-if="item.delIcon" class="delIcon" mode="widthFix"></image>
</view>
</view>
<view class="con3" v-if="item.type==2">
<view class="numberBbox">
<image class="numberImg" :src="reduceIcon" mode="widthFix" @click="reduce"></image>
<input class="numberInput" type="number" disabled
v-model.number="dataTwo[item.field]" />
<image class="numberImg" :src="addIcon" mode="widthFix" @click="add"></image>
</view>
</view>
<view class="con3" v-if="item.type==3">
<!-- 区间滑块 -->
<view class="sliderCurNumBox">
<view style="display: flex; align-items: baseline;" v-if="dataTwo.BuiltUpArea>0">
<input class="sliderCurNum" disabled type="text" v-model="dataTwo.BuiltUpArea" />-
</view>
<input class="sliderCurNum" disabled type="text" v-model="dataTwo.EndBuiltUpArea" />
</view>
<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
:block-size="36" active-color="#F95771FF" :min="rangeSliderMin" :max="rangeSliderMax"
:values="builtArea" @rangechange="rangechange"></rangeSlider>
<view class="rangeSliderNum">
<text>{{rangeSliderMin}}</text>
<text>{{rangeSliderMax}}</text>
</view>
</view>
<view class="con4" v-if="item.type==4">
<view class="customTypeBox">
<view v-for="(item1,index1) in customList" :key="index1">
<view class="customName" @click="chooseType(item1)"
:class="{chooseType:item1.checked}">
{{item1.Name}}
</view>
</view>
</view>
<input type="text" class="customTypeInput" v-model="dataTwo.CustomerOtherType"
placeholder="以上都不合适,可在此输入客户群体" placeholder-style="color: #CECECEFF" />
</view>
</view>
</view>
</view>
<view class="stepItem" v-if="step==3">
<view v-for="(item,index) in stepThreeList" :key="index">
<view class="itemBox">
<view class="name">
{{item.name}}&nbsp; <text class="tip" v-if="item.tip">{{item.tip}}</text>
</view>
<view class="con1" v-if="item.type==1">
<input class="input" type="text" v-model="dataThree[item.field]" :placeholder="item.text"
placeholder-style="color: #CECECEFF" @focus="inputFcous(item)" />
<view style="width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;position: absolute;
top: -2rpx;
right: 10rpx;
z-index: 10;" @click="delInputText(item.field)">
<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/delete.png"
v-if="item.delIcon" class="delIcon" mode="widthFix"></image>
</view>
</view>
<view class="con6" v-if="item.type==2">
<u-radio-group v-model="dataThree[item.field]">
<u-radio v-for="(item1, index1) in goodsType" :key="index1" :name="item1.Id"
shape="circle" @change="radioChange">
<image :src="goodsTypeImg[item1.Id]" mode="widthFix" class="goodsTypeImg"></image>
</u-radio>
</u-radio-group>
</view>
<view class="con3" v-if="item.type==3">
<view class="sliderCurNumBox">
<view style="display: flex; align-items: baseline;" v-if="dataThree.AreaRequirement>0">
<input class="sliderCurNum" disabled type="text"
v-model="dataThree.AreaRequirement" />-
</view>
<input class="sliderCurNum" disabled type="text"
v-model="dataThree.EndAreaRequirement" />
</view>
<!-- 区间滑块 -->
<rangeSlider :width="592" :height="120" :liveMode="true" background-color="#DADCE6D9"
:block-size="36" active-color="#F95771FF" :min="rangeSliderMin" :max="rangeSliderMax"
:values="AreaRequire" @rangechange="AreaRequireChange"></rangeSlider>
<view class="rangeSliderNum">
<text>{{AreaRequireMin}}</text>
<text>{{AreaRequireMax}}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 审核未通过 -->
<view v-if="dataOne.CompanyStatus!=1">
<view class="butBox" @click="nextStep">
<image :src="nextIcon" class="next" mode="widthFix" v-if="step!=3"></image>
<text v-if="step==3">完成</text>
</view>
<view class="skip" v-if="step==3">
<text @click="finish">跳过</text>
</view>
</view>
<!-- 审核通过 -->
<view class="butBox" v-if="dataOne.CompanyStatus==1" @click="backBtn">
<image :src="nextIcon" class="next" mode="widthFix" v-if="step!=3"></image>
<text v-if="step==3">返回</text>
</view>
</view>
</view>
</view>
</template>
<script>
import rangeSlider from "./components/range-slider.vue"
export default {
components: {
rangeSlider
},
computed: {
},
data() {
return {
pageTitle: "企业认证",
step: 1,
nextIcon: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/next.png",
percent: 33.33,
stepName: "第1步 企业基础资料",
nextSepName: "第2步",
// type=1:输入框,2:照片
stepOneList: [{
name: "营业执照",
tip: "(点击图片上传营业执照)",
type: 2
}, {
name: "企业名称",
text: "请输入企业名称",
field: "CompanyName",
delIcon: false,
type: 1
}, {
name: "统一社会信用代码",
text: "输入18位社会信用代码",
field: "UnifiedCode",
delIcon: false,
type: 1
}, {
name: "法人代表",
text: "请输入法人姓名",
field: "LegalPerson",
delIcon: false,
type: 1
}, {
name: "联系电话",
text: "请输入11位手机或者带区号座机号码",
field: "Mobile",
delIcon: false,
type: 1
}, ],
//type=1:输入框,2:步进器,3:多选
stepTwoList: [{
name: "品牌名称",
text: "请输入品牌名称",
field: "BrandName",
delIcon: false,
type: 1
}, {
name: "店铺数量",
text: "",
field: "ShopNum",
type: 2
}, {
name: "店铺面积",
text: "",
field: "",
type: 3
}, {
name: "品牌定位",
text: "请输入品牌定位",
field: "FullBrandName",
delIcon: false,
type: 1
}, {
name: "客户群体",
tip: "(可多选)",
text: "",
field: "CustomerType",
type: 4,
}],
customList: [], //客户群体
//type=1:输入框,2:单选,3:范围
stepThreeList: [{
name: "扩店区域",
text: "请输入扩店区域",
field: "StoreExpansion",
delIcon: false,
type: 1
}, {
name: "商品性质 ",
tip: "(单选)",
text: "",
field: "ProjectType",
type: 2
}, {
name: "面积要求",
text: "",
field: "",
type: 3
}],
goodsType: [], //商品性质
goodsTypeValue: "",
businessLicenseDemo: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/upLoadDemo.png", //营业执照占位图片
businessLicenseUploadIsSuccess: false, //营业执照是否上传成功
access_token: "", //百度ai平台token
dataOne: {
CompanyId: 0,
CompanyName: "",
BusinessLicense: "", //营业执照
UnifiedCode: "",
LegalPerson: "",
Mobile: "",
CompanyStatus: 2
},
dataTwo: {
CompanyId: 0,
BrandName: "",
ShopNum: 0,
BuiltUpArea: 0,
EndBuiltUpArea: 0,
FullBrandName: "",
CustomerType: "",
CustomerOtherType: ""
},
reduceIcon: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/reduceIcon.png",
addIcon: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/addIcon.png",
builtArea: [1, 100], //店铺面积
rangeSliderMin: 0, //区间滑块最小值
rangeSliderMax: 100, //区间滑块最大值
dataThree: {
StoreExpansion: "", //扩展区域
ProjectType: "", //商品性质
AreaRequirement: 0, //面积要求
EndAreaRequirement: 0, //面积要求
},
goodsTypeImg: {
1: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-baihuo.png",
2: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-shappingmall.png",
3: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-center.png",
4: "https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/goodstype-other.png"
},
AreaRequire: [],
AreaRequireMin: 0,
AreaRequireMax: 100,
finishBtn: "完成",
}
},
methods: {
// 输入框获取焦点
inputFcous(e) {
e.delIcon = true
},
delInputText(field) {
this.dataOne[field] = ""
this.dataTwo[field] = ""
this.dataThree[field] = ""
},
// 输入框失去焦点
inputBlur(e) {
e.delIcon = false
},
// 获取客户群体枚举
getCustomerTypeEnumList() {
let parms = {
url: "/api/AppletTrade/GetCustomerTypeEnumList",
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
res.data.map((e) => {
e.checked = false
})
this.customList = res.data
}
})
},
// 获取商品性质
GetProjectTypeEnumList() {
let parms = {
url: "/api/AppletTrade/GetProjectTypeEnumList",
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
this.goodsType = res.data
}
})
},
//选择营业执照照片
chooseImg() {
let that = this
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function(res) {
wx.getFileSystemManager().readFile({
filePath: res.tempFilePaths[0],
encoding: 'base64', //编码格式
success: (ans) => {
that.getImgInfo(ans.data, that.access_token, (_res) => {
console.log("getImgInfo", _res)
if (_res.data.direction == 1) { //未定义,图片类型错误
wx.showToast({
title: '图片类型错误!',
icon: 'none',
duration: 1000
})
} else {
let data = _res.data.words_result
that.upFile(res.tempFilePaths[0], (uploadRes) => {
that.dataOne.BusinessLicense = JSON
.parse(
uploadRes.data).data
that.businessLicenseUploadIsSuccess =
true
that.dataOne.CompanyName = data.单位名称
.words
that.dataOne.LegalPerson = data.法人
.words
that.dataOne.UnifiedCode = data.社会信用代码
.words
})
}
})
},
})
//
}
});
},
//提取营业执照信息
getImgInfo(data, token, resCall) {
let that = this
uni.request({
url: 'https://aip.baidubce.com/rest/2.0/ocr/v1/business_license?access_token=' + token,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
image: data,
},
success(res) {
resCall(res)
},
fail(res) {
}
})
},
//图片上传
upFile(img, resCall) {
var that = this;
wx.showLoading({
title: '上传中'
})
let MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId ? uni.getStorageSync("mall_UserInfo")
.MallBaseId : 1;
let action = that.host2 + '/api/File/UploadTencent?MallBaseId=' + MallBaseId
uni.uploadFile({
url: action,
filePath: img,
name: 'field',
formData: {
user: 'test'
},
success: (uploadFileRes) => {
uni.hideLoading()
resCall(uploadFileRes)
},
fail: function(res) {
that.businessLicenseUploadIsSuccess = false
wx.showToast({
title: '上传失败!',
icon: 'none',
duration: 1000
})
}
});
},
//获取百度ai平台token
getAccess_token() {
let that = this;
uni.request({
url: 'https://aip.baidubce.com/oauth/2.0/token', // 百度获取token接口地址
data: {
'grant_type': 'client_credentials', // 固定写死
'client_id': 'QWTnMLORmrozodmfIyOjHGoB',
'client_secret': 'DcsUjSai1OnIHd61B2xIX4zlYqv8E1bP'
},
method: 'GET',
success(res) {
that.access_token = res.data.access_token
},
fail(e) {}
})
},
//步骤一
stepOne() {
let parms = {
url: "/api/AppletTrade/SetCompany",
data: this.dataOne
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
this.dataOne.CompanyId = res.data.CompanyId
this.stepName = "第2步 品牌信息"
this.nextSepName = "第3步"
this.step++
this.percent += this.percent
this.showTemplate(res.data.template_message_list)
}
})
},
// 步骤二
stepTwo() {
this.dataTwo.CompanyId = this.dataOne.CompanyId
this.dataTwo.BuiltUpArea = this.builtArea[0]
this.dataTwo.EndBuiltUpArea = this.builtArea[1]
let ids = []
this.customList.map((e) => {
if (e.checked) {
ids.push(e.Id)
}
})
this.dataTwo.CustomerType = ids.toString()
let parms = {
url: "/api/AppletTrade/SetBrand",
data: {
...this.dataTwo,
...this.dataThree
}
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
this.stepName = "第3步 扩店需求"
this.nextSepName = "完成"
this.step++
this.percent += this.percent
}
})
},
//步骤三
stepThree() {
let that = this
this.dataThree.AreaRequirement = this.AreaRequire[0]
this.dataThree.EndAreaRequirement = this.AreaRequire[1]
let parms = {
url: "/api/AppletTrade/SetBrand",
data: {
...this.dataTwo,
...this.dataThree
}
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
that.finish()
}
})
},
//返回个人中心
finish() {
uni.navigateTo({
url: "/pages/user-center/user-center"
})
},
//下一步
nextStep() {
if (this.percent > 100) {
this.percent = 100
}
if (this.step <= 3) {
if (this.step == 1) {
//审核中或审核通过就不提交请求
if (this.dataOne.CompanyStatus == 0 || this.dataOne.CompanyStatus == 1) {
this.stepName = "第2步 品牌信息"
this.nextSepName = "第3步"
this.step++
this.percent += this.percent
} else {
this.stepOne()
}
} else if (this.step == 2) {
//审核中或审核通过就不提交请求
if (this.dataOne.CompanyStatus == 0 || this.dataOne.CompanyStatus == 1) {
this.stepName = "第3步 扩店需求"
this.nextSepName = "完成"
this.step++
this.percent += this.percent
} else {
this.stepTwo()
}
} else if (this.step == 3) {
//审核中或审核通过就不提交请求
if (this.dataOne.CompanyStatus == 0 || this.dataOne.CompanyStatus == 1) {
this.finish()
} else {
this.stepThree()
}
}
}
},
// 审核通过
backBtn(){
if (this.percent > 100) {
this.percent = 100
}
if (this.step == 1) {
this.stepName = "第2步 品牌信息"
this.nextSepName = "第3步"
this.step++
this.percent += this.percent
}else if(this.step == 2){
this.stepName = "第3步 扩店需求"
this.nextSepName = "完成"
this.step++
this.percent += this.percent
}else if(this.step == 3){
this.finish()
}
},
chooseType(item) { //选择客户群体
item.checked = !item.checked
},
// 店铺面积范围
rangechange(e) {
this.builtArea[0] = parseInt(e.minValue)
this.builtArea[1] = parseInt(e.maxValue)
this.dataTwo.BuiltUpArea = parseInt(e.minValue)
this.dataTwo.EndBuiltUpArea = parseInt(e.maxValue)
},
// 减号按钮
reduce() {
if (this.dataTwo.ShopNum > 0) {
this.dataTwo.ShopNum--
} else {
this.dataTwo.ShopNum = 0
}
},
// 加号按钮
add() {
this.dataTwo.ShopNum++
},
// 获取公司认证信息
getUserCompany() {
let that = this
let parms = {
url: "/api/AppletTrade/GetUserCompany",
}
this.request2(parms, (res) => {
if (res.resultCode == 1 && res.data != null) {
this.dataOne = res.data
this.businessLicenseUploadIsSuccess = true
that.getUserCompanyBrand(res.data.CompanyId)
}
})
},
// 根据公司id获取公司品牌
getUserCompanyBrand(id) {
let that = this
let parms = {
url: "/api/AppletTrade/GetUserCompanyBrand",
data: {
CompanyId: id
}
}
this.request2(parms, (res) => {
if (res.resultCode == 1) {
that.dataTwo.BrandName = res.data.BrandName
that.dataTwo.ShopNum = res.data.ShopNum
that.dataTwo.BuiltUpArea = res.data.BuiltUpArea
that.dataTwo.EndBuiltUpArea = res.data.EndBuiltUpArea
that.dataTwo.FullBrandName = res.data.FullBrandName
that.dataTwo.CustomerType = res.data.CustomerType
that.dataTwo.CustomerOtherType = res.data.CustomerOtherType
that.customList.map((e) => {
if (e.Id == res.data.CustomerType) {
e.checked = true
}
})
that.dataThree.StoreExpansion = res.data.StoreExpansion
that.dataThree.ProjectType = res.data.ProjectType
that.dataThree.AreaRequirement = res.data.AreaRequirement
that.dataThree.EndAreaRequirement = res.data.EndAreaRequirement
}
})
},
// 单选
radioChange(e) {
// console.log(e);
},
// 面积要求范围
AreaRequireChange(e) {
this.AreaRequire[0] = parseInt(e.minValue)
this.AreaRequire[1] = parseInt(e.maxValue)
this.dataThree.AreaRequirement = parseInt(e.minValue)
this.dataThree.EndAreaRequirement = parseInt(e.maxValue)
},
//显示模板
showTemplate(template) {
uni.requestSubscribeMessage({
tmplIds: template,
success(res) {
console.log(res)
},
fail(err) {
console.log(err)
// uni.showToast({
// title: '!',
// icon: 'none'
// })
}
})
}
},
mounted() {
this.getCustomerTypeEnumList()
this.GetProjectTypeEnumList()
this.getAccess_token()
this.getUserCompany()
uni.setNavigationBarTitle({
title: this.pageTitle,
});
}
}
</script>
<style lang="scss" scoped>
.page {
background-color: #F6F6F6;
min-height: 100vh;
height: 100%;
padding-bottom: 70rpx;
.progressBox {
width: 650rpx;
height: 120rpx;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
.progressName {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28rpx;
font-weight: bold;
.cur {
color: #F70027;
}
.nex {
color: #B9BCCA;
}
}
.progress {
width: 100%;
}
}
.stepBox {
width: 680rpx;
margin: 0 auto;
background-color: #FFFFFF;
box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(218, 220, 230, 0.85);
border-radius: 30rpx;
padding: 53rpx 45rpx 70rpx;
.stepItem {
width: 100%;
padding-bottom: 100rpx;
.itemBox {
width: 100%;
margin-bottom: 55rpx;
.name {
font-size: 28rpx;
font-weight: bold;
color: #1F1F1F;
margin-bottom: 38rpx;
.tip {
font-weight: 400;
color: #AAAAAAFF;
margin-left: 10rpx;
}
}
.con1 {
height: 60rpx;
position: relative;
.input {
// width: 100%;
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
border-bottom: 1rpx solid #DADCE6;
padding-bottom: 24rpx;
vertical-align: baseline;
padding-right: 50rpx;
}
.delIcon {
width: 32rpx;
height: 32rpx;
// width: 100%;
// height: 100%;
}
}
.con2 {
position: relative;
.conImage {
width: 590rpx;
height: 367rpx;
// border: 1rpx solid #000000;
}
.reupload {
width: 185rpx;
height: 60rpx;
background-color: #F70027;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-weight: bold;
color: #FFFFFF;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 40rpx;
}
}
.con3 {
// border-bottom: 1rpx solid #DADCE6;
padding-bottom: 24rpx;
position: relative;
.numberBbox {
display: flex;
justify-content: space-between;
align-items: center;
.numberImg {
width: 38rpx;
height: 38rpx;
}
.numberInput {
margin: 0 10rpx;
flex-grow: 5;
text-align: center;
}
}
}
.con4 {
border-bottom: 1rpx solid #DADCE6;
padding-bottom: 24rpx;
.customTypeBox {
display: flex;
// flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20rpx;
.customName {
width: 110rpx;
height: 50rpx;
background-color: #FFFFFF;
border: 1rpx dashed #1F1F1F;
opacity: 0.3;
border-radius: 10rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-weight: bold;
color: #000000;
// margin-right: 50rpx;
margin-bottom: 20rpx;
}
& :nth-child(4n)>.customName {
margin-right: 0rpx !important;
}
}
.customTypeInput {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #000000;
}
}
.con6 {
display: flex;
flex-wrap: wrap;
.goodsTypeImg {
width: 278rpx;
height: 144rpx;
background-color: #232323;
opacity: 0.6;
border-radius: 18rpx;
margin-bottom: 30rpx;
}
}
}
}
}
.butBox {
margin: 10rpx auto;
width: 100rpx;
height: 100rpx;
background-color: #F70027;
box-shadow: 0rpx 4rpx 40rpx 0rpx rgba(249, 54, 85, 0.58);
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
font-weight: bold;
color: #FFFFFF;
.next {
width: 100%;
}
}
.skip {
text-align: center;
font-size: 28rpx;
font-weight: 500;
color: #B7B7B7;
}
}
.chooseType {
background-color: #F95771FF !important;
color: #F70027 !important;
border: none !important;
}
// 修改滑块样式
/deep/.block {
background-color: #FFFFFF;
border: 4rpx solid #F70027;
box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(232, 76, 100, 0.74);
border-radius: 10rpx;
}
.rangeSliderNum {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #000000;
}
/deep/.u-radio-group {
display: flex;
flex-wrap: wrap;
}
/deep/.u-radio-group :nth-child(2n)>.u-radio {
margin-right: 0rpx;
}
/deep/.u-radio {
position: relative;
width: 278rpx;
border-radius: 18rpx;
margin-right: 30rpx;
}
/deep/.u-radio__icon-wrap {
position: absolute;
top: 17rpx;
right: 17rpx;
z-index: 10;
}
.sliderCurNumBox {
display: flex;
justify-content: center;
align-items: baseline;
.sliderCurNum {
width: 100rpx;
text-align: center;
font-size: 40rpx;
font-weight: 800;
color: #F70027;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment