初始化商家端

components/benben-address-label/benben-address-label.vue

@@ -0,0 +1,186 @@
+<template>
+  <view class="benben-address-label">
+    <view @click="handleLable(item.name)" v-for="(item, i) in labels" :key="i" :class="{ label_box: true, label_avtive: item.name == value }">
+      {{ item.name }}
+    </view>
+    <view v-if="isEdit" class="label_box edit_box">
+      <input :focus="true" maxlength="5" v-model.trim="editLabel" placeholder="请输入标签名称,最多5个字" />
+      <view v-if="editLabel" class="confirm_btn" @click="editConfirm">确定</view>
+      <view v-else class="cancel_btn" @click="editCancel">取消</view>
+    </view>
+    <view v-else-if="!customLabel" @click="handlerEdit" class="label_box add_icon"></view>
+    <view v-else @click="handleLable(customLabel)" :class="{ label_box: true, label_avtive: customLabel == value, custom_label: true }">
+      {{ customLabel }}
+      <view @click.stop="handlerEdit">编辑</view>
+    </view>
+  </view>
+</template>
+<script>
+import { API_VERSION } from '@/common/config.js'
+export default {
+  name: 'benben-address-label',
+  props: {
+    api: {
+      type: String,
+      default: '5ff6859e3c4fd',
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+  },
+  data() {
+    return { labels: [], customLabel: '', isEdit: false, editLabel: '' }
+  },
+  computed: {
+    labelApi() {
+      return `/${API_VERSION}/${this.api}`
+    },
+    isShowAdd() {
+      if (!this.value) true
+      return !this.labels.includes(this.value) ? true : false
+    },
+  },
+  created() {
+    this.getLabels()
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (!val) return
+        if (!this.labels.length) return
+        if (!this.labels.find((item) => item.name === val)) {
+          this.customLabel = val
+        }
+      },
+      immediate: true,
+    },
+    'labels.length': {
+      handler(val) {
+        if (!val) return
+        if (!this.value) return
+        if (!this.labels.find((item) => item.name === this.value)) {
+          this.customLabel = this.value
+        }
+      },
+    },
+  },
+  mounted() {},
+  methods: {
+    editCancel() {
+      this.isEdit = false
+    },
+    editConfirm() {
+      if (!this.editLabel.length) return this.$message.info('请输入标签名称')
+      if (this.editLabel.length > 5) return this.$message.info('标签名称最多5个字')
+      this.$emit('input', this.editLabel)
+      this.isEdit = false
+    },
+    handlerEdit() {
+      this.isEdit = true
+      this.editLabel = this.customLabel
+    },
+    handleLable(name) {
+      this.isEdit = false
+      this.$emit('input', name)
+    },
+    async getLabels() {
+      try {
+        let {
+          data: { code, data, msg },
+        } = await this.$api.post(this.labelApi)
+        if (code != 1) return this.$message.info(msg)
+        this.labels = data
+      } catch (error) {
+        console.log('error--------', error)
+      }
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.benben-address-label {
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+}
+.label_box {
+  flex-shrink: 0;
+  border: 1px solid #e5e5e5;
+  background: rgba(255, 255, 255, 0.39);
+  border-radius: 8rpx;
+  padding: 0 12rpx;
+  font-size: 24rpx;
+  color: #333;
+  margin-right: 16rpx;
+  margin-top: 8rpx;
+  margin-bottom: 8rpx;
+  line-height: 42rpx;
+  &.label_avtive {
+    background: rgba(255, 157, 0, 1);
+    color: #fff;
+  }
+  &.custom_label {
+    display: flex;
+    padding-right: 0;
+    view {
+      margin-left: 15rpx;
+      width: 60rpx;
+      color: #fff;
+      font-size: 20rpx;
+      text-align: center;
+      background: var(--benbenbgColor2);
+    }
+  }
+  &.edit_box {
+    display: flex;
+    padding: 0;
+    input {
+      width: 300rpx;
+      font-size: 20rpx;
+      height: 42rpx;
+      padding-left: 15rpx;
+    }
+    .cancel_btn {
+      width: 80rpx;
+      color: #fff;
+      font-size: 20rpx;
+      text-align: center;
+      background: #ccc;
+    }
+    .confirm_btn {
+      width: 80rpx;
+      color: #fff;
+      font-size: 20rpx;
+      text-align: center;
+      background: var(--benbenbgColor8);
+    }
+  }
+}
+.add_icon {
+  width: 58rpx;
+  height: 42rpx;
+  position: relative;
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+    width: 8px;
+    height: 1px;
+    background-color: #666;
+  }
+  &::after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    content: '';
+    height: 8px;
+    width: 1px;
+    background-color: #666;
+  }
+}
+</style>