|
|
@@ -0,0 +1,160 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <cu-custom bgColor="bg-fff" :isBack="true">
|
|
|
+ <block slot="content">编辑门店</block>
|
|
|
+ </cu-custom>
|
|
|
+ <view class="borderRadiu" style="margin: 22upx 26upx;">
|
|
|
+ <view class="cu-form-group">
|
|
|
+ <view class="title">门店名称</view>
|
|
|
+ <input placeholder="请输入门店名称" v-model="form.storeName" name="input"></input>
|
|
|
+ </view>
|
|
|
+ <view class="cu-form-group">
|
|
|
+ <view class="title">所在地区</view>
|
|
|
+ <input disabled="true" @mousedown="$refs.picker.show()" placeholder="请选择所在地区" ref="inputRef"
|
|
|
+ name="input" v-model="form.locality"></input>
|
|
|
+ <text class='cuIcon-right' style="color: #C7C6CA ;" @click="$refs.picker.show()"></text>
|
|
|
+ <w-picker :visible.sync="visible" ref="picker" mode="region" :value="form.locality"
|
|
|
+ @confirm="onConfirm($event, 'region')"></w-picker>
|
|
|
+ </view>
|
|
|
+ <view class="cu-form-group">
|
|
|
+ <view class="title">门店地址</view>
|
|
|
+ <input placeholder="请输入门店详细地址" v-model="form.address" name="input"></input>
|
|
|
+ </view>
|
|
|
+ <view class="customize">
|
|
|
+ <view class="title">地理位置</view>
|
|
|
+ <view class=" booder-top" style="padding-bottom: 16upx;">
|
|
|
+ <!-- <map style="width: 100%; height: 218upx;" :latitude="latitude" scale="14"
|
|
|
+ :longitude="longitude" :markers="markers" @tap="handleMarkerTap"></map> -->
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <aMap class=" booder-top" style="padding-bottom: 7px;"></aMap> -->
|
|
|
+ <view class="business-prompt">
|
|
|
+ 若位置有误直接影响客户到店，请在地图中仔细核对，可拖拽地图确保位置正确
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="cu-form-group">
|
|
|
+ <view class="title">店铺面积</view>
|
|
|
+ <input placeholder="请输入店铺面积" v-model="form.storeExtent" name="input"></input>
|
|
|
+ </view>
|
|
|
+ <view class="customize">
|
|
|
+ <view class="title">门头照片</view>
|
|
|
+ <view class="grid col-3 grid-square flex-sub booder-top">
|
|
|
+ <view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage"
|
|
|
+ :data-url="imgList[index]">
|
|
|
+ <image :src="imgList[index]" mode="aspectFill"></image>
|
|
|
+ <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
|
|
|
+ <text class='cuIcon-close'></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="solids" @tap="ChooseImage" v-if="imgList.length < 4">
|
|
|
+ <text class='cuIcon-cameraadd'></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="business-prompt">
|
|
|
+ 门店照片需包含完整的门店入口和招牌名称，建议现场拍摄门头照;最多可上传10张，支持格式bmp、png、jpeg、jpg，单个图片不超过5MB，建议尺寸在2000*1500px以上
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="padding flex flex-direction sub-bottom">
|
|
|
+ <button class="cu-btn bg-blue round ">提交审核</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import regionPicker from "../../components/w-picker/region-picker.vue"
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ regionPicker,
|
|
|
+ // aMap
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imgList: [],
|
|
|
+ form:{},
|
|
|
+ visible: false,
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ methods:{
|
|
|
+ onConfirm(e) {
|
|
|
+ this.form.locality = e.result
|
|
|
+ this.form.country = e.value[e.value.length - 1]
|
|
|
+ },
|
|
|
+ DelImg(e) {
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定要删除？',
|
|
|
+ cancelText: '取消',
|
|
|
+ confirmText: '确定',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.imgList.splice(e.currentTarget.dataset.index, 1)
|
|
|
+ this.form.headPhoto.splice(e.currentTarget.dataset.index, 1)
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ ViewImage(e) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: this.imgList,
|
|
|
+ current: e.currentTarget.dataset.url
|
|
|
+ });
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+page {
|
|
|
+ background: #F8F8FA;
|
|
|
+}
|
|
|
+.borderRadiu {
|
|
|
+ border-radius: 8px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ // border-bottom: 1px solid #eee;
|
|
|
+}
|
|
|
+.sub-bottom {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-top: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
+.customize {
|
|
|
+ background-color: #fff;
|
|
|
+ // border-top: 0.5px solid #eee;
|
|
|
+ margin: 16upx 18upx;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 30upx;
|
|
|
+ // padding: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-img {
|
|
|
+ height: 218upx;
|
|
|
+ width: 360upx;
|
|
|
+ padding: 16upx;
|
|
|
+ // padding-bottom: 16upx;
|
|
|
+ background: url('/static/login/yingye2.png');
|
|
|
+ margin: 16upx auto;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .business-prompt {
|
|
|
+ padding-top: 16upx;
|
|
|
+ font-size: 20upx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+}
|
|
|
+.booder-top {
|
|
|
+ border-bottom: 1px solid rgb(238, 238, 238);
|
|
|
+ padding-top: 7px;
|
|
|
+}
|
|
|
+</style>
|
lihongxiao