You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

196 lines
4.8 KiB

<template>
<view class="openshop-box">
<view class="form-box">
<view class="form-item">
<view class="label">店铺名称:<text class="colR">*</text></view>
<input type="text" v-model="name" placeholder="请输入店铺名称" />
</view>
<view class="form-item">
<view class="label">联系电话:<text class="colR">*</text></view>
<input type="text" v-model="phone" maxlength="11" placeholder="请输入联系电话" />
</view>
<view class="form-item">
<view class="label">选择地区:<text class="colR">*</text></view>
<picker mode="region" :value="address" @change="regionChange">
<view>{{address[0]}} - {{address[1]}} - {{address[2]}}</view>
</picker>
<image src="../../../static/images/arrow-d-g.png" class="arrow"></image>
</view>
<view class="form-item">
<view class="label">详细地址:<text class="colR">*</text></view>
<input type="text" v-model="detailedAddress" placeholder="请输入详细地址"/>
</view>
<view class="form-item">
<view class="label">店铺类型:</view>
<picker mode="selector">
<view>{{region[0]}}</view>
</picker>
<image src="../../../static/images/arrow-d-g.png" class="arrow"></image>
</view>
<view class="form-item">
<view class="label">店铺logo:<text class="colR">*</text></view>
<view class="img-box">
<image src="../../../static/images/addimg.png" v-if="image == ''" @click="uploadImg"></image>
<image :src="image" @click="uploadImg" v-else mode="aspectFill"></image>
</view>
</view>
<view class="form-item">
<view class="label">店铺简介:</view>
<textarea v-model="introduction" placeholder="请输入店铺简介" />
</view>
</view>
<view class="add-btn" @click="addShop">提交</view>
</view>
</template>
<script>
import { chooseImage } from "@/utils"
import { addStore } from "@/api/store.js"
export default{
data(){
return {
name: '',
phone: '',
detailedAddress: '',
introduction: '',
address: ['湖北省','武汉市','洪山区'],
image: '',
id: ''
}
},
onLoad(){
let store = uni.getStorageSync('userInfo').store
// console.log(store)
if(store){
this.name = store.name
this.phone = store.phone
this.address = store.address.split(',')
this.detailedAddress = store.detailedAddress
this.introduction = store.introduction
this.image = store.image
this.id = store.id
}
},
methods:{
regionChange(e){
console.log(e)
this.address = e.detail.value
},
uploadImg(){
chooseImage((img)=>{
this.image = img
})
},
addShop(){
if(this.name == ''){
return this.alertMessage('请输入店铺名称')
} else if(this.phone == ''){
return this.alertMessage('请输入联系方式')
} else if(this.detailedAddress == ''){
return this.alertMessage('请填写详细地址')
} else if(this.image == ''){
return this.alertMessage('请上传店铺logo')
} else{
let data = {
name: this.name,
phone: this.phone,
address: this.address.join(','),
detailedAddress: this.detailedAddress,
image: this.image,
introduction: this.introduction
}
if(this.id) data.id = this.id
addStore(data).then((res)=>{
if(res.success){
uni.showToast({
title: '操作成功!',
duration: 1500
})
setTimeout((res)=>{
this.$yrouter.push('/pages/user/myShop/index')
},1500)
} else{
uni.showToast({
title: res.msg,
icon: none
})
}
})
}
},
alertMessage(msg){
uni.showToast({
title: msg,
icon: "none"
})
},
}
}
</script>
<style lang="less">
.openshop-box{
width: 100%;
min-height: 100vh;
background: #eee;
.form-box{
padding: 30rpx 40rpx;
.form-item{
width: 100%;
padding: 30rpx 28rpx;
background: #FFFFFF;
border-radius: 16rpx;
margin-top: 32rpx;
display: flex;
align-items: center;
color: #1D1D1D;
font-size: 26rpx;
position: relative;
.label{
width: 160rpx;
}
.img-box{
width: 108rpx;
height: 108rpx;
border-radius: 8rpx;
position: relative;
}
image{
width: 108rpx;
height: 108rpx;
border-radius: 8rpx;
}
textarea{
width: 100%;
height: 126rpx;
}
&:nth-last-child(1){
align-items: flex-start;
}
.arrow{
width: 24rpx;
height: 14rpx;
position: absolute;
right: 36rpx;
top: 42rpx;
}
picker{
width: 70%;
}
.colR{
color: #FF0303;
}
}
}
.add-btn{
width: 670rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #fff;
background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
border-radius: 40rpx;
margin: 110rpx auto 30rpx;
}
}
</style>