初始化代码
This commit is contained in:
295
uniapp/uni-app/business/pages/store-manage.vue
Normal file
295
uniapp/uni-app/business/pages/store-manage.vue
Normal file
@@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<view class="mine-store-manage">
|
||||
<view class="fill-base pl-lg pb-sm flex-between b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">店铺头像</view>
|
||||
</view>
|
||||
<view class="flex-1 flex-between mr-lg">
|
||||
<upload @upload="imgUpload" :imagelist="subForm.cover" imgtype="cover" text="添加封面" :imgsize="1"
|
||||
imgclass="sm">
|
||||
</upload>
|
||||
<view></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fill-base pd-lg flex-between b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">店铺名称</view>
|
||||
</view>
|
||||
<input v-model="subForm.title" type="text" class="item-input flex-1" maxlength="20" placeholder-class="c-placeholder"
|
||||
:placeholder="rule[1].errorMsg" />
|
||||
</view>
|
||||
<view class="fill-base pd-lg flex-between b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">店铺地址</view>
|
||||
</view>
|
||||
<view class="item-input flex-1">
|
||||
<view @tap.stop="toChooseLocation" class="flex-y-center">
|
||||
<view class="flex-1" :class="[{'c-placeholder':!subForm.address},{'c-title':subForm.address}]">
|
||||
{{subForm.address || `点击右边图标设置`}}
|
||||
</view><i class="iconfont icon-dingwei ml-sm" :style="{color:primaryColor}"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="fill-base pd-lg">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">店铺描述</view>
|
||||
</view>
|
||||
<textarea v-model="subForm.desc" type="text" class="item-textarea mt-md flex-1" maxlength="200"
|
||||
placeholder-class="c-placeholder" :placeholder="rule[3].errorMsg"></textarea>
|
||||
</view>
|
||||
<view class="fill-base mt-md pd-lg flex-between b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">姓名</view>
|
||||
</view>
|
||||
<input v-model="subForm.user_name" type="text" class="item-input flex-1" placeholder-class="c-placeholder"
|
||||
:placeholder="rule[4].errorMsg" />
|
||||
</view>
|
||||
<view class="fill-base mt-md pd-lg flex-between b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">联系电话</view>
|
||||
</view>
|
||||
<input v-model="subForm.mobile" type="number" class="item-input flex-1" placeholder-class="c-placeholder"
|
||||
:placeholder="rule[5].errorMsg" />
|
||||
</view>
|
||||
<!-- <view class="fill-base pd-lg flex-between b-1px-b">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">开店时间</view>
|
||||
</view>
|
||||
<view class="flex-y-center f-paragraph c-title flex-1">
|
||||
<view @tap.stop="toShowTime('start_time')" :style="{color:subForm.start_time ? primaryColor : '#999'}">
|
||||
{{subForm.start_time || '选择开始时间'}}
|
||||
</view>
|
||||
<view class="ml-md mr-md">至</view>
|
||||
<view @tap.stop="toShowTime('end_time')" :style="{color:subForm.end_time ? primaryColor : '#999'}">
|
||||
{{subForm.end_time || '选择结束时间'}}
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
<view class="fill-base pd-lg flex-between">
|
||||
<view class="flex-y-center">
|
||||
<i class="iconfont icon-required c-warning"></i>
|
||||
<view class="item-text">是否营业</view>
|
||||
</view>
|
||||
<view class="flex-1 flex-between">
|
||||
<view class="f-desc">{{workType[subForm.business_status]}}</view>
|
||||
<view @tap.stop="toChangeItem('business_status')">
|
||||
<i class="iconfont icon-switch c-caption ml-sm"
|
||||
:class="[{'icon-switch-on':subForm.business_status==1}]"
|
||||
:style="{ color: subForm.business_status==1 ? primaryColor : ''}"></i>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="space-max-footer"></view>
|
||||
<w-picker :visible.sync="showTime" mode="time" :value="toDayTime" :current="false" :second="false"
|
||||
:themeColor="primaryColor" @confirm="onConfirm" ref="time"></w-picker>
|
||||
|
||||
<fix-bottom-button @confirm="submit" :text="[{text:'保存',type:'confirm'}]" bgColor="#fff"></fix-bottom-button>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapState,
|
||||
mapMutations
|
||||
} from "vuex"
|
||||
import wPicker from "@/components/w-picker/w-picker.vue";
|
||||
export default {
|
||||
components: {
|
||||
wPicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
toDay: '',
|
||||
toDayTime: '',
|
||||
showKey: '',
|
||||
showTime: false,
|
||||
workType: {
|
||||
0: '休息',
|
||||
1: '营业',
|
||||
},
|
||||
subForm: {
|
||||
id: 0,
|
||||
cover: [],
|
||||
title: '',
|
||||
address: '',
|
||||
lat: '',
|
||||
lng: '',
|
||||
desc: '',
|
||||
user_name: '',
|
||||
mobile: '',
|
||||
start_time: '',
|
||||
end_time: '',
|
||||
business_status: 0,
|
||||
},
|
||||
rule: [{
|
||||
name: "cover",
|
||||
checkType: "isNotNull",
|
||||
errorMsg: "请上传店铺头像"
|
||||
}, {
|
||||
name: "title",
|
||||
checkType: "isNotNull",
|
||||
errorMsg: "请输入店铺名称",
|
||||
regType: 2
|
||||
}, {
|
||||
name: "address",
|
||||
checkType: "isNotNull",
|
||||
errorMsg: "请设置店铺地址"
|
||||
}, {
|
||||
name: "desc",
|
||||
checkType: "isNotNull",
|
||||
errorMsg: "请输入店铺描述",
|
||||
regType: 2
|
||||
}, {
|
||||
name: "user_name",
|
||||
checkType: "isNotNull",
|
||||
errorMsg: "请输入您的姓名",
|
||||
regType: 2
|
||||
}, {
|
||||
name: "mobile",
|
||||
checkType: "isAllPhone",
|
||||
errorMsg: "请输入联系电话",
|
||||
regText: "联系电话"
|
||||
}],
|
||||
lockTap: false
|
||||
}
|
||||
},
|
||||
computed: mapState({
|
||||
primaryColor: state => state.config.configInfo.primaryColor,
|
||||
subColor: state => state.config.configInfo.subColor,
|
||||
userInfo: state => state.user.userInfo,
|
||||
}),
|
||||
onLoad() {
|
||||
this.initIndex()
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['updateUserItem']),
|
||||
async initIndex() {
|
||||
let cur_time = new Date(Math.ceil(new Date().getTime()))
|
||||
this.toDay = this.$util.formatTime(cur_time, 'YY-M-D')
|
||||
this.toDayTime = this.$util.formatTime(cur_time, 'h:m')
|
||||
let data = await this.$api.business.storeInfo()
|
||||
data.cover = data.cover && data.cover.length > 0 ? [{
|
||||
path: data.cover
|
||||
}] : []
|
||||
for (let key in this.subForm) {
|
||||
this.subForm[key] = data[key] == null ? '' : data[key]
|
||||
}
|
||||
},
|
||||
imgUpload(e) {
|
||||
let {
|
||||
imagelist,
|
||||
imgtype
|
||||
} = e;
|
||||
this.subForm[imgtype] = imagelist;
|
||||
},
|
||||
// 选择地区
|
||||
async toChooseLocation(e) {
|
||||
await this.$util.checkAuth({
|
||||
type: 'userLocation'
|
||||
})
|
||||
let [, {
|
||||
address = '',
|
||||
longitude,
|
||||
latitude
|
||||
} = {}] = await uni.chooseLocation();
|
||||
if (!address) return
|
||||
this.subForm.address = address
|
||||
this.subForm.lng = longitude
|
||||
this.subForm.lat = latitude
|
||||
},
|
||||
toChangeItem(key) {
|
||||
this.subForm[key] = this.subForm[key] == 1 ? 0 : 1
|
||||
},
|
||||
toShowTime(key) {
|
||||
this.showKey = key
|
||||
this.showTime = true
|
||||
},
|
||||
onConfirm(val) {
|
||||
this.subForm[this.showKey] = val.result;
|
||||
},
|
||||
//表单验证
|
||||
validate(param) {
|
||||
let validate = new this.$util.Validate();
|
||||
this.rule.map(item => {
|
||||
let {
|
||||
name,
|
||||
} = item
|
||||
validate.add(param[name], item);
|
||||
})
|
||||
let message = validate.start();
|
||||
console.log(message, "message");
|
||||
return message;
|
||||
},
|
||||
async submit() {
|
||||
let param = this.$util.deepCopy(this.subForm)
|
||||
let msg = this.validate(param);
|
||||
if (msg) {
|
||||
this.$util.showToast({
|
||||
title: msg
|
||||
})
|
||||
return
|
||||
}
|
||||
param.cover = param.cover.length > 0 ? param.cover[0].path : ''
|
||||
// if (!param.start_time || !param.end_time) {
|
||||
// this.$util.showToast({
|
||||
// title: !param.start_time ? `请选择开始时间` : `请选择结束时间`
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
// let start_time = `${this.toDay} ${param.start_time}`
|
||||
// let end_time = `${this.toDay} ${param.end_time}`
|
||||
// if (this.$util.DateToUnix(start_time) > this.$util.DateToUnix(end_time) - 1) {
|
||||
// this.$util.showToast({
|
||||
// title: `结束时间不能小于或等于开始时间`
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
await this.$api.business.storeUpdate(param)
|
||||
this.$util.showToast({
|
||||
title: `保存成功`
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$util.back()
|
||||
this.$util.goUrl({
|
||||
url: 1,
|
||||
openType: `navigateBack`
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.mine-store-manage {
|
||||
.item-text {
|
||||
width: 200rpx;
|
||||
}
|
||||
|
||||
.item-textarea {
|
||||
width: 690rpx;
|
||||
height: 300rpx;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.icon-dingwei {
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.icon-switch,
|
||||
.icon-switch-on {
|
||||
font-size: 80rpx;
|
||||
line-height: 34rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user