<template>
|
<view class="message-container">
|
<view class="base-message">
|
<view class="message-item">
|
<view class="label">店铺名称</view>
|
<view class="message-value">
|
<input
|
:inputBorder="false"
|
v-model="form.realName"
|
placeholderStyle="color:#ccc; font-size: 30rpx;"
|
placeholder="请输入店铺名称" />
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">营业时间</view>
|
<view class="message-value" @click="$refs.time.open()">
|
<text :class="form.time?'':'un-select'">{{ form.time||'开始时间-结束时间' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">经营地址</view>
|
<view class="message-value" @click="selectAddress">
|
<text :class="form.address?'':'un-select'">{{ form.address||'请选择地址' }}</text>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="label">店铺标签</view>
|
<view class="message-value" @click="$refs.labels.open()">
|
<text v-if="!form.labels.length" class="un-select">{{ '请选择店铺标签' }}</text>
|
<view v-else class="labels">
|
<view
|
v-for="(item, index) in form.labels"
|
:key="index"
|
class="label-item"
|
>{{ labels[item] }}</view>
|
</view>
|
<uni-icons type="right" size="22" color="#CCCCCC"></uni-icons>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="logo">
|
<view class="label">店铺LOGO</view>
|
<text class="label-tip">上传png/jpg格式图片，建议尺寸：800*800px</text>
|
</view>
|
<view class="message-value">
|
<uni-file-picker limit="1">
|
</uni-file-picker>
|
</view>
|
</view>
|
<view class="message-item">
|
<view class="logo">
|
<view class="label">店铺图片</view>
|
<text class="label-tip">上传png/jpg格式图片，建议尺寸：800*800px</text>
|
</view>
|
<view class="message-value">
|
<uni-file-picker limit="9">
|
</uni-file-picker>
|
</view>
|
</view>
|
<view class="parting"></view>
|
<view class="bran-story">
|
<view class="label">品牌故事</view>
|
<uni-easyinput
|
:inputBorder="false"
|
v-model="form.story"
|
:maxlength="500"
|
autoHeight
|
placeholder="描述店铺，有助于更快成为商家"
|
type="textarea"
|
/>
|
</view>
|
</view>
|
<view class="next-btn" @click="nextStep">保存</view>
|
<view class="safe-area"></view>
|
<timePickerView ref="time" @updata="selectTime" />
|
<labelsPicker ref="labels" :labels="labels" @updata="selectLabels" />
|
|
</view>
|
</template>
|
|
<script>
|
import timePickerView from '@/components/common/timePicker.vue'
|
import labelsPicker from '@/components/common/labelsPicker.vue'
|
export default {
|
components: { timePickerView, labelsPicker },
|
data() {
|
return {
|
labels: [],
|
form: {
|
name: '',
|
time: '',
|
address: '',
|
labels: [],
|
}
|
};
|
},
|
onLoad() {
|
this.labels = ['大桌子', '现磨咖啡', '手冲咖啡', '免费停车', '无线网', '可带宠物', '免费停车']
|
},
|
methods: {
|
selectTime(v) {
|
console.log(v);
|
this.form.time = `${v[0]}:${v[1]}-${v[3]}:${v[4]}`
|
},
|
selectAddress() {
|
uni.navigateTo({
|
url: '/pages/selectLocation/selectLocation'
|
})
|
},
|
selectLabels(v) {
|
console.log(v);
|
this.form.labels = v
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.message-container {
|
height: 100%;
|
background-color: #fff;
|
overflow-y: scroll;
|
}
|
.base-message {
|
background-color: #FFFFFF;
|
padding: 0 32rpx;
|
box-sizing: border-box;
|
width: 100%;
|
.message-item {
|
// height: 148rpx;
|
padding: 30rpx 0;
|
box-sizing: border-box;
|
border-bottom: 2rpx solid #F4F5F4;
|
.logo {
|
display: flex;
|
.label-tip {
|
height: 36rpx;
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
line-height: 36rpx;
|
}
|
}
|
.label {
|
line-height: 30rpx;
|
height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 500;
|
margin-bottom: 24rpx;
|
&::after {
|
content: ' *';
|
color: #D20A0A;
|
}
|
}
|
.message-value {
|
line-height: 30rpx;
|
font-size: 30rpx;
|
display: flex;
|
justify-content: space-between;
|
.un-select {
|
font-size: 28rpx;
|
color: #CCCCCC;
|
}
|
.labels {
|
flex: 1;
|
display: flex;
|
flex-wrap: wrap;
|
.label-item {
|
padding: 10rpx 12rpx;
|
background: rgba(210,10,10,0.1);
|
border-radius: 4rpx;
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #D20A0A;
|
line-height: 24rpx;
|
margin-right: 12rpx;
|
margin-bottom: 12rpx;
|
}
|
}
|
}
|
}
|
}
|
.parting {
|
background: #f7f7f7;
|
height: 16rpx;
|
width: 120%;
|
margin-left:-33rpx;
|
}
|
.bran-story {
|
padding-top: 44rpx;
|
border-bottom: 2rpx solid #F4F5F4;
|
.label {
|
line-height: 30rpx;
|
height: 30rpx;
|
font-size: 30rpx;
|
font-weight: 500;
|
margin-bottom: 24rpx;
|
}
|
}
|
.next-btn {
|
height: 72rpx;
|
margin: 126rpx 56rpx 0;
|
background: linear-gradient(270deg, #D20A0A 0%, #D95A5A 100%);
|
border-radius: 36rpx 36rpx 36rpx 36rpx;
|
color: #FFFFFF;
|
line-height: 72rpx;
|
text-align: center;
|
}
|
.safe-area {
|
height: env(safe-area-inset-bottom);
|
padding: 20rpx;
|
}
|
</style>
|
