|
|
@@ -0,0 +1,277 @@
|
|
|
+<template>
|
|
|
+ <div class="JPattributeEditor">
|
|
|
+ <van-nav-bar class="navBar" title="金牌店档案编辑" left-arrow @click-left="onClickLeft" />
|
|
|
+ <div class="content" v-if="detail">
|
|
|
+ <van-form ref="tabstoreVal">
|
|
|
+ <van-field
|
|
|
+ class="sendCode"
|
|
|
+ v-model="detail.ownerMobile"
|
|
|
+ label="主经营者电话"
|
|
|
+ placeholder="请输入主经营者电话"
|
|
|
+ type="tel">
|
|
|
+ <template #button>
|
|
|
+ <van-button
|
|
|
+ size="small"
|
|
|
+ style="color: white; background: rgb(0, 87, 186); border-radius: 6px"
|
|
|
+ @click="sendCode(detail.ownerMobile)"
|
|
|
+ :disabled="time != null"
|
|
|
+ >发送验证码<span v-if="time">({{ timeNum }})</span>
|
|
|
+ </van-button>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="verificationVal"
|
|
|
+ label="主经营者收到的验证码"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ type="number"
|
|
|
+ @blur="verification(verificationVal)" />
|
|
|
+ <van-field v-model="detail.ownerName" label="主经营者姓名" />
|
|
|
+ <van-field
|
|
|
+ v-model="detail.ownerBirthday"
|
|
|
+ label="主经营者出生日期"
|
|
|
+ placeholder="请输入主经营者出生日期"
|
|
|
+ @click="getNyr('ownerBirthday')" />
|
|
|
+ <van-field autosize type="textarea" label="主营/擅长经营品类">
|
|
|
+ <template #input>
|
|
|
+ <van-checkbox-group v-model="detail.mainProductCategorys" direction="horizontal">
|
|
|
+ <van-checkbox
|
|
|
+ v-for="(item, index) in mainProductCategorys"
|
|
|
+ :name="item.dictValue"
|
|
|
+ shape="square"
|
|
|
+ :key="index">
|
|
|
+ {{ item.dictValue }}
|
|
|
+ </van-checkbox>
|
|
|
+ </van-checkbox-group>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ v-model="detail.totalSalesAmount"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ label="门店24年总销量(以进货额计)" />
|
|
|
+ <van-field v-model="detail.performanceRatio" label="立邦业绩占比(%)" />
|
|
|
+ <van-field v-model="detail.mainBrand" autosize type="textarea" label="主营T0P3品牌" />
|
|
|
+
|
|
|
+ <van-field v-model="detail.emergencyContact" label="紧急联系人姓名" />
|
|
|
+ <van-field
|
|
|
+ v-model="detail.emergencyContactBirthday"
|
|
|
+ label="紧急联系人出生日期"
|
|
|
+ @click="getNyr('emergencyContactBirthday')" />
|
|
|
+ <van-field v-model="detail.emergencyContactMobile" label="紧急联系人电话" />
|
|
|
+ <van-field label="紧急联系人身份">
|
|
|
+ <template #input>
|
|
|
+ <van-radio-group v-model="detail.emergencyContactRelation" direction="horizontal">
|
|
|
+ <van-radio
|
|
|
+ v-for="(item, index) in emergencyContactRelation"
|
|
|
+ :name="item.dictValue"
|
|
|
+ :key="index">
|
|
|
+ {{ item.dictValue }}
|
|
|
+ </van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+ <div class="footer-btn">
|
|
|
+ <van-button
|
|
|
+ style="color: white; background: rgb(0, 87, 186); border-radius: 6px; width: 90%"
|
|
|
+ @click="confirmShare">
|
|
|
+ 保 存
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ <!-- 时间选择 -->
|
|
|
+ <van-popup v-model="datetimeShowPicker" position="bottom">
|
|
|
+ <van-datetime-picker
|
|
|
+ type="date"
|
|
|
+ title="选择年月日"
|
|
|
+ :min-date="new Date(1945, 0, 1)"
|
|
|
+ :max-date="new Date()"
|
|
|
+ @confirm="datetimeOnConfirm"
|
|
|
+ @cancel="datetimeShowPicker = false" />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { sendAndCheckVerCode, getDictOption } from '@/api/index';
|
|
|
+import { getStoreArchives, updateArchives } from '@/api/storeManagement';
|
|
|
+export default {
|
|
|
+ name: 'JPattributeEditor',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ detail: null,
|
|
|
+ time: null, //计时
|
|
|
+ timeNum: 30,
|
|
|
+ verificationVal: '',
|
|
|
+ datetimeShowPicker: false,
|
|
|
+ activatNyrItem: '',
|
|
|
+ checkboxGroup: [],
|
|
|
+ mainProductCategorys: [],
|
|
|
+ emergencyContactRelation: [],
|
|
|
+ verificationPassedPhoneNum: '', //验证通过手机号
|
|
|
+ };
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ if (this.time) clearInterval(this.time);
|
|
|
+ this.time = null; //计时
|
|
|
+ this.timeNum = 30;
|
|
|
+ this.toastLoading(0, '加载中...', true);
|
|
|
+ getDictOption({}, 'archives_main_product_categorys').then((res) => {
|
|
|
+ let mainProductCategorys = [];
|
|
|
+ let emergencyContactRelation = [];
|
|
|
+ res.data.forEach((val) => {
|
|
|
+ if (val.remark == 'mainProductCategorys') {
|
|
|
+ mainProductCategorys.push(val);
|
|
|
+ } else {
|
|
|
+ emergencyContactRelation.push(val);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.mainProductCategorys = mainProductCategorys;
|
|
|
+ this.emergencyContactRelation = emergencyContactRelation;
|
|
|
+ this.getDetaild();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetaild() {
|
|
|
+ getStoreArchives({ storeCode: this.$route.query.storeCode }).then((res) => {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ if (res.code == 200) {
|
|
|
+ // let copyData = JSON.parse(JSON.stringify(res.data));
|
|
|
+ res.data.mainProductCategorys = res.data.mainProductCategorys.split(',');
|
|
|
+ this.detail = res.data;
|
|
|
+ this.verificationPassedPhoneNum = this.detail.ownerMobile;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 发送验证码
|
|
|
+ sendCode(val) {
|
|
|
+ if (!/^1[3456789]\d{9}$/.test(val) || val == '') {
|
|
|
+ this.$toast('格式错误');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.time) return;
|
|
|
+ clearInterval(this.time);
|
|
|
+ this.timeNum = 30;
|
|
|
+ this.sendCodeFun(
|
|
|
+ {
|
|
|
+ type: '1', //String 调用类型:1:发送验证码 2:校验验证码
|
|
|
+ phone: val, //String 手机号
|
|
|
+ verification: '', //String 手机号验证码
|
|
|
+ },
|
|
|
+ () => {
|
|
|
+ this.time = setInterval(() => {
|
|
|
+ this.timeNum--;
|
|
|
+ if (this.timeNum <= 0) {
|
|
|
+ clearInterval(this.time);
|
|
|
+ this.time = null;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ this.$toast('发送成功');
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ sendCodeFun(params, callback) {
|
|
|
+ sendAndCheckVerCode(params).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ callback && callback(res);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ verification(val) {
|
|
|
+ // 验证码
|
|
|
+ if (val == '') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 手机号
|
|
|
+ if (this.detail.ownerMobile == '') {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.sendCodeFun(
|
|
|
+ {
|
|
|
+ type: '2', //String 调用类型:1:发送验证码 2:校验验证码
|
|
|
+ phone: this.detail.ownerMobile, //String 手机号
|
|
|
+ verification: val, //String 手机号验证码
|
|
|
+ },
|
|
|
+ (res) => {
|
|
|
+ this.verificationPassedPhoneNum = this.detail.ownerMobile;
|
|
|
+ this.$toast(res.data ? '验证成功' : '验证码错误');
|
|
|
+ }
|
|
|
+ );
|
|
|
+ },
|
|
|
+ getNyr(val) {
|
|
|
+ this.activatNyrItem = val;
|
|
|
+ this.datetimeShowPicker = true;
|
|
|
+ },
|
|
|
+ datetimeOnConfirm(time) {
|
|
|
+ this.$set(this.detail, this.activatNyrItem, this.parseTime(time, '{y}-{m}-{d}'));
|
|
|
+ // this.detail.ownerBirthday = this.parseTime(time, '{y}-{m}-{d}');
|
|
|
+ this.datetimeShowPicker = false;
|
|
|
+ },
|
|
|
+ // 保存
|
|
|
+ confirmShare() {
|
|
|
+ if (this.detail.ownerMobile != this.verificationPassedPhoneNum) {
|
|
|
+ this.$toast('请验证手机号');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.toastLoading(0, '加载中...', true);
|
|
|
+ let params = JSON.parse(JSON.stringify(this.detail));
|
|
|
+ params.mainProductCategorys = params.mainProductCategorys.join(',');
|
|
|
+ updateArchives(params).then((res) => {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$toast(res.msg);
|
|
|
+ } else {
|
|
|
+ this.$toast(res.msg);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onClickLeft() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.JPattributeEditor {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ overflow: hidden;
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: #fff;
|
|
|
+ padding: 10px 15px;
|
|
|
+ margin-top: 10px;
|
|
|
+ background: #fff;
|
|
|
+ .van-cell {
|
|
|
+ padding: 10px 0;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ .van-field__label {
|
|
|
+ width: 10em;
|
|
|
+ }
|
|
|
+ .sendCode {
|
|
|
+ border: none !important;
|
|
|
+ input {
|
|
|
+ border: 1px solid #f1f1f1;
|
|
|
+ height: 35px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .van-checkbox--horizontal {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .van-radio--horizontal {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .footer-btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|