Skip to content

M
mallapp
Commit 4970e874 authored by 罗超's avatar 罗超
Browse files
Options

新增首店申请页面

parent ea94abab
Hide whitespace changes
Inline Side-by-side
Showing with 653 additions and 4 deletions
node_modules/uview-ui/components/u-field/u-field.vue
View file @ 4970e874
<template>
<view class="u-field" :style="{'padding':padding}" :class="{'u-field-border': itemIndex > 0 }">
<view class="u-field" :style="{'padding':padding,'border-bottom:':borderBottom?'2rpx #DADCE6 solid':''}" :class="{'u-field-border': itemIndex > 0 }">
<view class="u-field-inner" :class="[type == 'textarea' ? 'u-textarea-inner' : '', 'u-label-postion-' + labelPosition]">
<view class="u-label" :class="[required ? 'u-required' : '']" :style="{
<view class="u-label" :class="[required ? 'u-required' : '']" v-if="labelWidth>0" :style="{
justifyContent: justifyContent,
flex: labelPosition == 'left' ? `0 0 ${labelWidth}rpx` : '1'
}">
......@@ -117,6 +117,10 @@ export default {
type: String,
default: '#606266'
},
borderBottom{
type: Boolean,
default: false
},
autoHeight: {
type: Boolean,
default: true
......
pages.json
View file @ 4970e874
......@@ -651,6 +651,10 @@
"path":"carrier/list"//品牌详情
},{
"path":"identification"//身份识别
},{
"path" : "firstShop/firstShop"
},{
"path" : "firstShop/list"
}] }
],
"globalStyle": {
......
pages/kotra/components/u-input.vue 0 → 100644
View file @ 4970e874
<template>
<view
class="u-input"
:class="{
'u-input--border': border,
'u-input--error': validateState
}"
:style="{
padding: `0 ${border ? 20 : 0}rpx`,
borderColor: borderColor,
textAlign: inputAlign
}"
@tap.stop="inputClick"
>
<textarea
v-if="type == 'textarea'"
class="u-input__input u-input__textarea"
:style="[getStyle]"
:value="defaultValue"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled"
:maxlength="inputMaxlength"
:fixed="fixed"
:focus="focus"
:autoHeight="autoHeight"
:selection-end="uSelectionEnd"
:selection-start="uSelectionStart"
:cursor-spacing="getCursorSpacing"
:show-confirm-bar="showConfirmbar"
@input="handleInput"
@blur="handleBlur"
@focus="onFocus"
@confirm="onConfirm"
/>
<input
v-else
class="u-input__input"
:type="type == 'password' ? 'text' : type"
:style="[getStyle]"
:value="defaultValue"
:password="type == 'password' && !showPassword"
:placeholder="placeholder"
:placeholderStyle="placeholderStyle"
:disabled="disabled || type === 'select'"
:maxlength="inputMaxlength"
:focus="focus"
:confirmType="confirmType"
:cursor-spacing="getCursorSpacing"
:selection-end="uSelectionEnd"
:selection-start="uSelectionStart"
:show-confirm-bar="showConfirmbar"
@focus="onFocus"
@blur="handleBlur"
@input="handleInput"
@confirm="onConfirm"
/>
<view class="u-input__right-icon u-flex">
<view class="u-input__right-icon__clear u-input__right-icon__item" @tap="onClear" v-if="clearable && value != '' && focused">
<u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
</view>
<view class="u-input__right-icon__clear u-input__right-icon__item" v-if="passwordIcon && type == 'password'">
<u-icon size="32" :name="!showPassword ? 'eye' : 'eye-fill'" color="#c0c4cc" @click="showPassword = !showPassword"/>
</view>
<view class="u-input__right-icon--select u-input__right-icon__item" v-if="type == 'select'" :class="{
'u-input__right-icon--select--reverse': selectOpen
}">
<u-icon name="arrow-down-fill" size="26" color="#c0c4cc"></u-icon>
</view>
</view>
</view>
</template>
<script>
import Emitter from '../../libs/util/emitter.js';
/**
* input 输入框
* @description 此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。
* @tutorial http://uviewui.com/components/input.html
* @property {String} type 模式选择，见官网说明
* @property {Boolean} clearable 是否显示右侧的清除图标(默认true)
* @property {} v-model 用于双向绑定输入框的值
* @property {String} input-align 输入框文字的对齐方式(默认left)
* @property {String} placeholder placeholder显示值(默认 '请输入内容')
* @property {Boolean} disabled 是否禁用输入框(默认false)
* @property {String Number} maxlength 输入框的最大可输入长度(默认140)
* @property {String Number} selection-start 光标起始位置，自动聚焦时有效，需与selection-end搭配使用（默认-1）
* @property {String Number} maxlength 光标结束位置，自动聚焦时有效，需与selection-start搭配使用（默认-1）
* @property {String Number} cursor-spacing 指定光标与键盘的距离，单位px(默认0)
* @property {String} placeholderStyle placeholder的样式，字符串形式，如"color: red;"(默认 "color: #c0c4cc;")
* @property {String} confirm-type 设置键盘右下角按钮的文字，仅在type为text时生效(默认done)
* @property {Object} custom-style 自定义输入框的样式，对象形式
* @property {Boolean} focus 是否自动获得焦点(默认false)
* @property {Boolean} fixed 如果type为textarea，且在一个"position:fixed"的区域，需要指明为true(默认false)
* @property {Boolean} password-icon type为password时，是否显示右侧的密码查看图标(默认true)
* @property {Boolean} border 是否显示边框(默认false)
* @property {String} border-color 输入框的边框颜色(默认#dcdfe6)
* @property {Boolean} auto-height 是否自动增高输入区域，type为textarea时有效(默认true)
* @property {String Number} height 高度，单位rpx(text类型时为70，textarea时为100)
* @example <u-input v-model="value" :type="type" :border="border" />
*/
export default {
name: 'u-input',
mixins: [Emitter],
props: {
value: {
type: [String, Number],
default: ''
},
// 输入框的类型，textarea，text，number
type: {
type: String,
default: 'text'
},
inputAlign: {
type: String,
default: 'left'
},
placeholder: {
type: String,
default: '请输入内容'
},
disabled: {
type: Boolean,
default: false
},
maxlength: {
type: [Number, String],
default: 140
},
placeholderStyle: {
type: String,
default: 'color: #c0c4cc;'
},
confirmType: {
type: String,
default: 'done'
},
// 输入框的自定义样式
customStyle: {
type: Object,
default() {
return {};
}
},
// 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true
fixed: {
type: Boolean,
default: false
},
// 是否自动获得焦点
focus: {
type: Boolean,
default: false
},
// 密码类型时，是否显示右侧的密码图标
passwordIcon: {
type: Boolean,
default: true
},
// input|textarea是否显示边框
border: {
type: Boolean,
default: false
},
// 输入框的边框颜色
borderColor: {
type: String,
default: '#dcdfe6'
},
autoHeight: {
type: Boolean,
default: true
},
// type=select时，旋转右侧的图标，标识当前处于打开还是关闭select的状态
// open-打开，close-关闭
selectOpen: {
type: Boolean,
default: false
},
// 高度，单位rpx
height: {
type: [Number, String],
default: ''
},
// 是否可清空
clearable: {
type: Boolean,
default: true
},
// 指定光标与键盘的距离，单位 px
cursorSpacing: {
type: [Number, String],
default: 0
},
// 光标起始位置，自动聚焦时有效，需与selection-end搭配使用
selectionStart: {
type: [Number, String],
default: -1
},
// 光标结束位置，自动聚焦时有效，需与selection-start搭配使用
selectionEnd: {
type: [Number, String],
default: -1
},
// 是否自动去除两端的空格
trim: {
type: Boolean,
default: true
},
// 是否显示键盘上方带有”完成“按钮那一栏
showConfirmbar:{
type:Boolean,
default:true
}
},
data() {
return {
defaultValue: this.value,
inputHeight: 70, // input的高度
textareaHeight: 100, // textarea的高度
validateState: false, // 当前input的验证状态，用于错误时，边框是否改为红色
focused: false, // 当前是否处于获得焦点的状态
showPassword: false, // 是否预览密码
lastValue: '', // 用于头条小程序，判断@input中，前后的值是否发生了变化，因为头条中文下，按下键没有输入内容，也会触发@input时间
};
},
watch: {
value(nVal, oVal) {
this.defaultValue = nVal;
// 当值发生变化，且为select类型时(此时input被设置为disabled，不会触发@input事件)，模拟触发@input事件
if(nVal != oVal && this.type == 'select') this.handleInput({
detail: {
value: nVal
}
})
},
},
computed: {
// 因为uniapp的input组件的maxlength组件必须要数值，这里转为数值，给用户可以传入字符串数值
inputMaxlength() {
return Number(this.maxlength);
},
getStyle() {
let style = {};
// 如果没有自定义高度，就根据type为input还是textare来分配一个默认的高度
style.minHeight = this.height ? this.height + 'rpx' : this.type == 'textarea' ?
this.textareaHeight + 'rpx' : this.inputHeight + 'rpx';
style = Object.assign(style, this.customStyle);
return style;
},
//
getCursorSpacing() {
return Number(this.cursorSpacing);
},
// 光标起始位置
uSelectionStart() {
return String(this.selectionStart);
},
// 光标结束位置
uSelectionEnd() {
return String(this.selectionEnd);
}
},
created() {
// 监听u-form-item发出的错误事件，将输入框边框变红色
this.$on('on-form-item-error', this.onFormItemError);
},
methods: {
/**
* change 事件
* @param event
*/
handleInput(event) {
let value = event.detail.value;
// 判断是否去除空格
if(this.trim) value = this.$u.trim(value);
// vue 原生的方法 return 出去
this.$emit('input', value);
// 当前model 赋值
this.defaultValue = value;
// 过一个生命周期再发送事件给u-form-item，否则this.$emit('input')更新了父组件的值，但是微信小程序上
// 尚未更新到u-form-item，导致获取的值为空，从而校验混论
// 这里不能延时时间太短，或者使用this.$nextTick，否则在头条上，会造成混乱
setTimeout(() => {
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
// #ifdef MP-TOUTIAO
if(this.$u.trim(value) == this.lastValue) return ;
this.lastValue = value;
// #endif
// 将当前的值发送到 u-form-item 进行校验
this.dispatch('u-form-item', 'on-form-change', value);
}, 40)
},
/**
* blur 事件
* @param event
*/
handleBlur(event) {
// 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
// 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
setTimeout(() => {
this.focused = false;
}, 100)
// vue 原生的方法 return 出去
this.$emit('blur', event.detail.value);
setTimeout(() => {
// 头条小程序由于自身bug，导致中文下，每按下一个键(尚未完成输入)，都会触发一次@input，导致错误，这里进行判断处理
// #ifdef MP-TOUTIAO
if(this.$u.trim(value) == this.lastValue) return ;
this.lastValue = value;
// #endif
// 将当前的值发送到 u-form-item 进行校验
this.dispatch('u-form-item', 'on-form-blur', event.detail.value);
}, 40)
},
onFormItemError(status) {
this.validateState = status;
},
onFocus(event) {
this.focused = true;
this.$emit('focus');
},
onConfirm(e) {
this.$emit('confirm', e.detail.value);
},
onClear(event) {
this.$emit('input', '');
},
inputClick() {
this.$emit('click');
}
}
};
</script>
<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
.u-input {
position: relative;
flex: 1;
@include vue-flex;
&__input {
//height: $u-form-item-height;
font-size: 28rpx;
color: $u-main-color;
flex: 1;
}
&__textarea {
width: auto;
font-size: 28rpx;
color: $u-main-color;
padding: 10rpx 0;
line-height: normal;
flex: 1;
}
&--border {
border-radius: 6rpx;
border-radius: 4px;
border: 1px solid $u-form-item-border-color;
}
&--error {
border-color: $u-type-error!important;
}
&__right-icon {
&__item {
margin-left: 10rpx;
}
&--select {
transition: transform .4s;
&--reverse {
transform: rotate(-180deg);
}
}
}
}
</style>
\ No newline at end of file
pages/kotra/firstShop/firstShop.vue 0 → 100644
View file @ 4970e874
<template>
<view class="first-shop">
<view style="background: #FFFFFF;box-shadow: 0px 10px 50px 0px rgba(218, 220, 230, 0.85);border-radius: 30rpx;padding:30rpx">
<view class="label-text" style="margin-top:0;margin-bottom: 30rpx;">
<text>店铺照片</text>
<text style="color:#999;font-weight: 400;">（上传3-5张照片）</text>
</view>
<view>
<u-upload :action="action" :max-count="5" :max-size="2*1024*1024" :file-list="fileList" @on-remove="onRemove1" :custom-btn="true" @on-success="uploadSuccessHandler">
<view slot="addBtn" class="slot-btn">
<image class="image" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1616498310000_18.png" mode="widthFix"></image>
</view>
</u-upload>
</view>
<view class="bottom-border">
<view class="label-text">首店名称</view>
<u-field v-model="model.shopName" padding="10px 0px 5px 0" label-width="0" placeholder="请填写首店名称" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">首店类型</view>
<u-field v-model="model.shopType" @click="showTypeAction" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择首店类型" placeholder-style="color:#CECECE;"></u-field>
<u-action-sheet @click="clickItem" :list="typeList" v-model="showTypeStatus"></u-action-sheet>
</view>
<view class="bottom-border">
<view class="label-text">
<text>品牌属地</text>
<text style="color:#999;font-weight: 400;">（国家或地区）</text>
</view>
<u-field v-model="model.area" padding="10px 0px 5px 0" label-width="0" placeholder="请填写品牌属地" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">首店开业时间</view>
<u-field v-model="model.openTime" @click="showOpenTime=true" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择首店开业时间" placeholder-style="color:#CECECE;"></u-field>
<u-picker mode="time" v-model="showOpenTime" :params="params" @confirm="confirmOpenTime"></u-picker>
</view>
<view class="bottom-border">
<view class="label-text">首店地址</view>
<u-field v-model="model.address" padding="10px 0px 5px 0" label-width="0" placeholder="请填写首店地址" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">商圈</view>
<u-field v-model="model.shangQuan" padding="10px 0px 5px 0" label-width="0" placeholder="请填写首店所属商圈" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">业态</view>
<u-field v-model="model.shopType" @click="showYeTai=true" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择首店类型" placeholder-style="color:#CECECE;"></u-field>
<u-action-sheet @click="checkYetai" :list="yeTaiList" v-model="showYeTai"></u-action-sheet>
</view>
<view class="bottom-border">
<view class="label-text">
<text>首店业种类型</text>
<text style="color:#999;font-weight: 400;">（如书店，超市，川菜，日料等）</text>
</view>
<u-field v-model="model.yeZhong" padding="10px 0px 5px 0" label-width="0" placeholder="请填写首店业种类型" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">
<text>所属区县</text>
<text style="color:#999;font-weight: 400;">（如书店，超市，川菜，日料等）</text>
</view>
<u-field v-model="model.city" padding="10px 0px 5px 0" label-width="0" placeholder="请填写所属区县" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">首店类别</view>
<u-field v-model="model.shenQingType" @click="showShenQingType=true" :disabled="true" right-icon="arrow" padding="10px 0px 5px 0" label-width="0" placeholder="请选择首店类型" placeholder-style="color:#CECECE;"></u-field>
<u-action-sheet @click="checkShenType" :list="shenList" v-model="showShenQingType"></u-action-sheet>
</view>
<view class="bottom-border">
<view class="label-text">联系人</view>
<u-field v-model="model.concatName" padding="10px 0px 5px 0" label-width="0" placeholder="请填写联系人" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">联系电话</view>
<u-field v-model="model.concatPhone" padding="10px 0px 5px 0" label-width="0" placeholder="请填写联系电话" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">需求备注</view>
<u-field v-model="model.remark" type="textarea" padding="10px 0px 5px 0" label-width="0" placeholder="可以填写您的需求" placeholder-style="color:#CECECE;"></u-field>
</view>
<view class="bottom-border">
<view class="label-text">
<text>首店简介</text>
<text style="color:#999;font-weight: 400;">（100字以内）</text>
</view>
<u-field v-model="model.description" maxlength="100" type="textarea" padding="10px 0px 5px 0" label-width="0" placeholder="可以填写您的首店简介" placeholder-style="color:#CECECE;"></u-field>
</view>
<view style="margin-top:40rpx">
<u-button shape="square" :ripple="true" :custom-style="{background:mainColor,border:'none',color:'#FFF'}">提交申请</u-button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
params: {
year: true,
month: true,
day: true,
hour: false,
minute: false,
second: false
},
action: this.host2 + "/api/File/UploadTencent",
fileList:[],
resultFileList:[],
mainColor:"",
model:{
shopName:"",
shopType:'',
area:"",
openTime:"",
address:"",
shangQuan:"",
yeTai:"",
yeZhong:"",
city:"",
shenQingType:"",
concatName:"",
concatPhone:"",
remark:"",
description:""
},
typeList: [
{
text: '全新品牌',
},
{
text: '首家旗舰店'
},
{
text: '跨界店'
},
{
text: '概念店'
},
{
text: '体验店'
},
{
text: '新场景'
}
],
yeTaiList: [
{
text: '零售',
},
{
text: '餐饮'
},
{
text: '娱乐'
},
{
text: '配套'
}
],
shenList: [
{
text: '全球首店',
},
{
text: '全球旗舰店'
},
{
text: '中国内地首店'
},
{
text: '西部首店'
},
{
text: '西南首店'
},
{
text: '成都首店'
}
],
showTypeStatus:false,
showOpenTime:false,
showYeTai:false,
showShenQingType:false
}
},
mounted() {
uni.setNavigationBarTitle({
title: '首店申请'
});
this.mainColor = this.$uiConfig.mainColor;
},
methods: {
confirmOpenTime(r){
this.model.openTime=r.year+"-"+r.month+"-"+r.day
},
showTypeAction() {
this.showTypeStatus = true;
},
onRemove1(index) {
this.resultFileList.splice(index, 1);
},
clickItem(index) {
this.model.shopType = this.typeList[index].text;
},
checkYetai(index) {
this.model.yeTai = this.yeTaiList[index].text;
},
checkShenType(index) {
this.model.shenQingType = this.shenList[index].text;
},
uploadSuccessHandler(data, index, lists) {
let r = JSON.parse(data);
this.resultFileList.push(r.data);
},
}
}
</script>
<style>
.first-shop{background: #f6f6f6;padding: 35rpx;min-height: 100vh;font-family: pingfang;}
.first-shop .label-text{
font-size: 28rpx;
color: #1F1F1F;
font-weight: 600;
margin-top: 40rpx;
}
.first-shop .slot-btn{
width: 220rpx;
height: 220rpx;
background: #F5F5F5;
border-radius: 17rpx;
display: flex;
align-items: center;
justify-content: center;
}
.first-shop .slot-btn .image{
width: 54rpx;
}
.first-shop .bottom-border{
border-bottom: 3rpx #DADCE6 solid;
}
</style>
pages/kotra/firstShop/list.vue 0 → 100644
View file @ 4970e874
<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
plugin/api.js
View file @ 4970e874
......@@ -2,10 +2,10 @@ export default {
install(Vue, options) {
Vue.prototype.host = "https://wx.weibaoge.cn/web/index.php?_mall_id=1285"
// Vue.prototype.host2 = "http://192.168.0.110:8200"
// Vue.prototype.host2 = "https://mallApi.oytour.com"
Vue.prototype.host2 = "https://mallApi.oytour.com"
// Vue.prototype.host2 = "http://192.168.1.5:8088"
// Vue.prototype.host2 = "http://192.168.1.48:8019"
Vue.prototype.host2 = "http://192.168.1.13:8088"
// Vue.prototype.host2 = "http://192.168.1.13:8088"
// Vue.prototype.host2 = "http://testmall.oytour.com/"
Vue.prototype.request = function(param, success, failed) {
......
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