|
|
@@ -0,0 +1,333 @@
|
|
|
+<template>
|
|
|
+ <div class="app-content">
|
|
|
+ <!-- 门店信息 -->
|
|
|
+ <form @submit="formSubmit" @reset="formReset">
|
|
|
+ <!-- <div class="prompt-text">注: 请先关注公众号，绑定后可以在移动端自动登录</div> -->
|
|
|
+ <!-- 登录信息 -->
|
|
|
+ <div class="module-com input-line-wrap">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title required">门店名称</div>
|
|
|
+ <input
|
|
|
+ v-model="form.shopName"
|
|
|
+ placeholder-class="phcolor"
|
|
|
+ class="tui-input"
|
|
|
+ name="shopName"
|
|
|
+ placeholder="请输入名称"
|
|
|
+ maxlength="50"
|
|
|
+ type="text"
|
|
|
+ />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title required">营业时间</div>
|
|
|
+ <input
|
|
|
+ v-model="form.openTime"
|
|
|
+ placeholder-class="phcolor"
|
|
|
+ class="tui-input"
|
|
|
+ name="openTime"
|
|
|
+ placeholder="请输入营业时间 例如：8:00 - 22:00"
|
|
|
+ maxlength="50"
|
|
|
+ type="text"
|
|
|
+ />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title required">联系电话</div>
|
|
|
+ <input
|
|
|
+ v-model="form.telephone"
|
|
|
+ placeholder-class="phcolor"
|
|
|
+ class="tui-input"
|
|
|
+ name="telephone"
|
|
|
+ placeholder="请输入联系电话"
|
|
|
+ maxlength="50"
|
|
|
+ type="text"
|
|
|
+ />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell
|
|
|
+ class="line-cell"
|
|
|
+ :hover="false"
|
|
|
+ :arrow="true"
|
|
|
+ @click="openAddres"
|
|
|
+ >
|
|
|
+ <div class="tui-title required">所在城市</div>
|
|
|
+ <div class="tui-input" v-if="form.province || form.city">
|
|
|
+ {{ form.province + "-" + form.city }}
|
|
|
+ </div>
|
|
|
+ <div class="tui-placeholder" v-else>请选择</div>
|
|
|
+ <input v-model="form.province" name="province" hidden />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell
|
|
|
+ class="line-cell"
|
|
|
+ :hover="false"
|
|
|
+ :arrow="true"
|
|
|
+ @click="selRegionFn"
|
|
|
+ >
|
|
|
+ <div class="tui-title required">地址</div>
|
|
|
+ <div class="tui-input" v-if="form.address">{{ form.address }}</div>
|
|
|
+ <div class="tui-placeholder" v-else>请填写详细地址</div>
|
|
|
+ <input v-model="form.address" name="address" hidden />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title required">门牌号</div>
|
|
|
+ <input
|
|
|
+ v-model="form.floor"
|
|
|
+ placeholder-class="phcolor"
|
|
|
+ class="tui-input"
|
|
|
+ name="floor"
|
|
|
+ placeholder="楼号门牌号（选填）"
|
|
|
+ />
|
|
|
+ </tui-list-cell>
|
|
|
+ <tui-list-cell class="line-cell remark-wrap" :hover="false">
|
|
|
+ <div class="tui-title">状态</div>
|
|
|
+ <div class="tui-input">
|
|
|
+ <radio-group class="radio-group" @change="radioChange">
|
|
|
+ <label v-for="(item, index) in statusList" :key="item.value">
|
|
|
+ <radio
|
|
|
+ :value="item.value"
|
|
|
+ :checked="item.value === form.status"
|
|
|
+ :color="'#3385FF'"
|
|
|
+ />
|
|
|
+ <text>{{ item.name }}</text>
|
|
|
+ </label>
|
|
|
+ </radio-group>
|
|
|
+ </div>
|
|
|
+ </tui-list-cell>
|
|
|
+ </div>
|
|
|
+ <!-- 提交 -->
|
|
|
+ <div class="confirm-btn">
|
|
|
+ <button class="admin-button-com big blue" formType="submit">确认</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <!-- 省市联动 -->
|
|
|
+ <simple-address
|
|
|
+ ref="simpleAddress"
|
|
|
+ :pickerValueDefault="cityPickerValueDefault"
|
|
|
+ @onConfirm="onCityConfirm"
|
|
|
+ ></simple-address>
|
|
|
+ <!-- 选择地区 -->
|
|
|
+ <app-area-sel
|
|
|
+ :show.sync="showRegion"
|
|
|
+ :city="form.receiveCity"
|
|
|
+ @change="changeAreaFn"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import TuiListCell from "@/components/plugin/list-cell";
|
|
|
+import AppAvatarModule from "@/components/module/app-avatar";
|
|
|
+import SimpleAddress from "@/components/plugin/simple-address";
|
|
|
+import AppAreaSel from "@/components/app-area-sel";
|
|
|
+const form = require("@/utils/formValidation.js");
|
|
|
+// api
|
|
|
+import { updateShop as update, addShop as add } from "@/api/shop";
|
|
|
+export default {
|
|
|
+ name: "staff-add",
|
|
|
+ components: {
|
|
|
+ TuiListCell,
|
|
|
+ AppAvatarModule,
|
|
|
+ SimpleAddress,
|
|
|
+ AppAreaSel
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ shopName: "",
|
|
|
+ province: "",
|
|
|
+ city: "",
|
|
|
+ address: "",
|
|
|
+ floor: "",
|
|
|
+ openTime: "8:00 - 22:00",
|
|
|
+ introduction: "",
|
|
|
+ telephone: "",
|
|
|
+ status: ""
|
|
|
+ },
|
|
|
+ // 详细地址
|
|
|
+ showRegion: false,
|
|
|
+ region: {
|
|
|
+ lat: 0,
|
|
|
+ long: 0
|
|
|
+ },
|
|
|
+ // 省市联动
|
|
|
+ regionData: [],
|
|
|
+ cityPickerValueDefault: [0, 0],
|
|
|
+ statusList: [
|
|
|
+ {
|
|
|
+ value: "01",
|
|
|
+ name: "正常"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: "02",
|
|
|
+ name: "停用"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ // this.init()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ if (this.option.id) {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: `修改门店`
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: `添加门店`
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this._getDet();
|
|
|
+ },
|
|
|
+ // api
|
|
|
+ _getDet() {
|
|
|
+ let data = uni.getStorageSync("modifyShopB");
|
|
|
+ if (this.$util.isEmpty(data)) return;
|
|
|
+ Object.keys(this.form).forEach((i, index) => {
|
|
|
+ // if (i != 'password') {
|
|
|
+ this.form[i] = data[i];
|
|
|
+ // }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // option
|
|
|
+ // 选择地址
|
|
|
+ selRegionFn() {
|
|
|
+ if (!this.form.city) {
|
|
|
+ this.$msg("请先选择城市！");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.showRegion = true;
|
|
|
+ },
|
|
|
+ changeAreaFn(e) {
|
|
|
+ console.log("changeAreaFn", e);
|
|
|
+ this.form.address = e.address;
|
|
|
+ this.region.lat = e.location.lat;
|
|
|
+ this.region.long = e.location.lng;
|
|
|
+ },
|
|
|
+ // 省市联动
|
|
|
+ openAddres() {
|
|
|
+ this.$refs.simpleAddress.open();
|
|
|
+ },
|
|
|
+ onCityConfirm(e) {
|
|
|
+ // this.form.receiveAddress = e.label
|
|
|
+ this.form.province = e.provinceName;
|
|
|
+ this.form.city = e.cityName;
|
|
|
+ // this.pickerText = JSON.stringify(e)
|
|
|
+ },
|
|
|
+ radioChange: function(evt) {
|
|
|
+ for (let i = 0; i < this.statusList.length; i++) {
|
|
|
+ if (this.statusList[i].value === evt.target.value) {
|
|
|
+ this.form.status = evt.target.value;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmFn() {
|
|
|
+ let hostFn = this.option.id ? update : add;
|
|
|
+ if (this.option.id) {
|
|
|
+ this.form.id = this.option.id;
|
|
|
+ }
|
|
|
+ hostFn(this.form).then(res => {
|
|
|
+ let promptText = this.option.id ? "修改成功！" : "添加成功！";
|
|
|
+ this.$msg(promptText);
|
|
|
+ uni.removeStorageSync("modifyShopB");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$util.pageTo("/admin/shop/list");
|
|
|
+ }, 1000);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 表单验证
|
|
|
+ formSubmit(e) {
|
|
|
+ // 表单规则
|
|
|
+ let rules = [
|
|
|
+ {
|
|
|
+ name: "shopName",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请输入名称"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "openTime",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请输入营业时间"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "telephone",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请输入联系电话"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "province",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请选择地址"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "address",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请填写详细地址"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "floor",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请输入门牌号"]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "status",
|
|
|
+ rule: ["required"],
|
|
|
+ msg: ["请选择状态"]
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ // 进行表单检查
|
|
|
+ let formData = e.detail.value;
|
|
|
+ let checkRes = form.validation(formData, rules);
|
|
|
+ // 验证通过!
|
|
|
+ if (!checkRes) {
|
|
|
+ this.confirmFn();
|
|
|
+ } else {
|
|
|
+ this.$msg(checkRes);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ min-height: calc(100vh - 20px);
|
|
|
+ padding-top: 20px;
|
|
|
+}
|
|
|
+.prompt-text {
|
|
|
+ color: $fontColor3;
|
|
|
+ padding-left: 30px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+}
|
|
|
+// ---
|
|
|
+.module-com {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .member-wrap {
|
|
|
+ .member-det {
|
|
|
+ font-size: 24px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .remark-wrap {
|
|
|
+ align-items: flex-start;
|
|
|
+ .remark {
|
|
|
+ height: 240px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.radio-group {
|
|
|
+ display: flex;
|
|
|
+ label {
|
|
|
+ margin-right: 80upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 按钮
|
|
|
+.confirm-btn {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ margin: 60px 30px 20px;
|
|
|
+ .admin-button-com {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhengxin