添加地址页面

@@ -5,8 +5,7 @@
 </template>
 
 <script>
-import Layout from "../../components/layout/layout-app";
-import RadioGroup from "./components/radio-group";
+import Layout from "../../../components/layout/layout-app";
 import AddressItem from "./components/address-item";
 import axios from "axios";
 
@@ -19,7 +18,6 @@ export default {
   name: "addressManager",
   components: {
     LayoutApp: Layout,
-    RadioGroup,
     AddressItem
   },
   data() {

+<template>
+  <LayoutApp title="添加地址" :show-back="true">
+    <div class="pane-body">
+      <FormItem>
+        <CInput label="收货人" place-holder="请写姓名" v-model="model.receiverName"></CInput>
+      </FormItem>
+      <FormItem>
+        <CInput label="手机号" place-holder="请填写手机号" v-model="model.receiverMobile"></CInput>
+      </FormItem>
+
+      <template>
+        <FormItem>
+          <div class="wrapper-area">
+            <label class="input-label">所在区域</label>
+            <div class="wrapper-arrow">
+              <template v-if="model.receiverArea">
+                <label class="text-label">江苏省南京市三山区</label>
+              </template>
+              <template v-else>
+                <label class="choose-area" @click="chooseArea">请选择</label>
+              </template>
+              <div class="arrow"></div>
+            </div>
+          </div>
+        </FormItem>
+      </template>
+
+      <FormItem>
+        <CInput label="详细地址" place-holder="请输入详细地址" v-model="model.receiverAddress"></CInput>
+      </FormItem>
+
+      <label
+        ref="labelTags"
+        class="wrapper-tag"
+        action="radio_submit"
+        method="get"
+        accept-charset="utf-8"
+      >
+        <p class="tag-text">设置标签：</p>
+        <label class="label-text">
+          <input type="radio" name="tag" value="1" class="label-tag" v-model="model.tagType" /> 家
+        </label>
+        <label class="label-text">
+          <input type="radio" name="tag" value="2" class="label-tag" v-model="model.tagType" /> 公司
+        </label>
+        <label class="label-text">
+          <input type="radio" name="tag" value="3" class="label-tag" v-model="model.tagType" /> 学校
+        </label>
+        <label class="label-text">
+          <input type="radio" name="tag" value="4" class="label-tag" v-model="model.tagType" /> 其他
+        </label>
+      </label>
+
+      <Radio
+        class="radio"
+        :label="{text: '设为默认地址', value: 1}"
+        style="flex: 0 1 100%;"
+        v-model="model.defaultType"
+      ></Radio>
+
+      <div :class="submitClass" @touchend="onSubmit">确定</div>
+    </div>
+  </LayoutApp>
+</template>
+
+<script>
+import Layout from "../../../components/layout/layout-app";
+import Input from "./components/input";
+import FormItem from "./components/form-item";
+import Radio from "./components/radio";
+
+import { createNamespacedHelpers } from "vuex";
+const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
+  "address/address"
+);
+
+export default {
+  name: "addressEdit",
+  components: {
+    LayoutApp: Layout,
+    CInput: Input,
+    FormItem,
+    Radio
+  },
+  data() {
+    return {
+      model: {
+        receiverName: "",
+        receiverMobile: "",
+        receiverArea: "",
+        receiverAddress: "",
+
+        tagType: 0,
+        defaultType: false
+      }
+    };
+  },
+  computed: {
+    ...mapState(["addressList"]),
+    submitClass() {
+      return [
+        "sure-btn",
+        {
+          active: this.inNotEmpty
+        }
+      ];
+    },
+    inNotEmpty() {
+      return true;
+    }
+  },
+  methods: {
+    ...mapMutations({}),
+    ...mapActions([""]),
+
+    async onSubmit() {
+      console.log("被选中的值为:" + this.model.tagType);
+      console.log("被选中的值为:" + this.model.defaultType);
+      if (!this.inNotEmpty) {
+        return;
+      }
+    },
+    chooseArea() {}
+  },
+  mounted() {}
+};
+</script>
+
+<style lang="scss" scoped>
+.pane-body {
+  height: 100%;
+  overflow-y: auto;
+  padding-top: 12px;
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.wrapper-area {
+  display: flex;
+  flex-direction: column;
+
+  .input-label {
+    font-size: 36px;
+    display: inline-block;
+    font-weight: bold;
+    margin-bottom: 30px;
+  }
+
+  .text-label {
+    font-size: 28px;
+    color: #444444;
+    display: inline-block;
+  }
+
+  .choose-area {
+    font-size: 28px;
+    color: #cccccc;
+  }
+
+  .wrapper-arrow {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .arrow {
+    height: 44px;
+    width: 44px;
+    background: url("~statics/image/order/arrow-right.png");
+    background-size: cover;
+  }
+}
+
+.wrapper-tag {
+  display: flex;
+  flex-direction: row;
+  margin: 30px 0;
+  align-items: center;
+
+  .tag-text {
+    font-size: 36px;
+    display: inline-block;
+    font-weight: bold;
+  }
+
+  .label-text {
+    margin-left: 20px;
+    font-size: 30px;
+    color: #444444;
+    line-height: 44px;
+  }
+
+  .label-tag {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.radio {
+  margin: 30px 0;
+}
+
+.sure-btn {
+  height: 120px;
+  line-height: 120px;
+  font-size: 28px;
+  text-align: center;
+  background-color: #cccccc;
+  color: white;
+  position: absolute;
+  left: 40px;
+  right: 40px;
+  bottom: 40px;
+
+  &.active {
+    background-color: #002b47;
+  }
+}
+</style>

 <template>
-  <div class="radio-group">
+  <div class="form-item">
     <slot></slot>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Radio-Group',
+  name: 'FormItem',
   props: {
-    value: {
-      type: [String, Number]
+    model: {
+      type: String
     }
   },
   data() {
     return {
-      labelList: []
+      items: []
     };
   },
   methods: {
-    getLabels() {
-      return this.$children.forEach(i => i.$options.name === 'Radio');
+    validate() {
+      let result = true;
+
+      this.items.forEach(i => {
+        if (!i.validate()) {
+          result = false;
+        }
+      });
+
+      return result;
     },
-    updateLabel() {
+    getItem() {
+      this.items = this.$children.filter(i => i.$options.name === 'CUpload' || i.$options.name === 'CInput' || i.$options.name === 'CDatePick');
     }
+  },
+  mounted() {
+    this.getItem();
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.radio-group {
-  display: flex;
+.form-item {
+  border-bottom: 2px solid #eee;
+  padding: 30px 0;
 }
 </style>

+<template>
+  <div class="input-class">
+    <div class="wrapper-label" v-if="label">
+      <label class="input-label">{{label}}</label>
+      <span class="tip" v-if="showRequired">{{ required ? tip.required : tip.optional}}</span>
+      <span class="error" v-if="showError">{{error}}</span>
+    </div>
+    <slot>
+      <input
+        ref="input"
+        :type="type"
+        class="wrapper-input"
+        :placeholder="placeHolder"
+        :value="inputValue"
+        @input="onInputChange"
+        @blur="validate"
+        :maxlength="maxLength"
+      />
+    </slot>
+  </div>
+</template>
+
+<script>
+const NUMREG = /^[0-9]+([.]{1}[0-9]+){0,1}$/;
+
+export default {
+  name: "CInput",
+  props: {
+    value: {
+      type: [String, Number],
+      default() {
+        return "";
+      }
+    },
+    label: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    type: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    placeHolder: {
+      type: String,
+      default() {
+        return "";
+      }
+    },
+    showRequired: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    required: {
+      type: Boolean,
+      default() {
+        return false;
+      }
+    },
+    maxLength: {
+      type: Number,
+      default() {
+        return 100;
+      }
+    }
+  },
+  data() {
+    return {
+      inputValue: this.value,
+      tipError: "不能为空",
+      numTipError: "只能为数字",
+      error: "不能为空",
+      showError: false,
+      tip: {
+        required: "（必填）",
+        optional: "（选填）"
+      }
+    };
+  },
+  methods: {
+    onInputChange() {
+      if (this.$refs.input.value.length > this.maxLength) {
+        this.$refs.input.value = this.$refs.input.value.slice(
+          0,
+          this.maxLength
+        );
+      }
+
+      this.inputValue = this.$refs.input.value;
+      this.$emit("input", this.$refs.input.value);
+    },
+    setShowError(status = true) {
+      this.showError = status;
+    },
+    validate() {
+      if (!this.required) {
+        return true;
+      }
+
+      if (!this.inputValue) {
+        this.error = this.tipError;
+        this.showError = true;
+        return false;
+      } else {
+        if (this.type === "number") {
+          if (NUMREG.test(this.inputValue)) {
+            this.showError = false;
+            return true;
+          } else {
+            this.error = this.numTipError;
+            this.showError = true;
+            return false;
+          }
+        } else {
+          this.showError = false;
+          return true;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.input-label {
+  font-size: 36px;
+  display: inline-block;
+  font-weight: bold;
+}
+
+.wrapper-label {
+  margin-bottom: 30px;
+}
+
+.wrapper-input {
+  font-size: 28px;
+  width: 100%;
+  /*line-height: 1;*/
+  line-height: normal;
+}
+
+.error {
+  margin-left: 12px;
+  color: #d0021b;
+}
+
+.tip {
+  font-size: 20px;
+}
+
+::-webkit-input-placeholder {
+  color: #aaa;
+}
+</style>

+<template>
+  <label class="container" @click.stop.prevent="onClickLabel">
+    <span :class="classes"></span>
+    <span :class="labelClasses">{{label.text}}</span>
+  </label>
+</template>
+
+<script>
+export default {
+  name: "CRadio",
+  props: {
+    value: {
+      type: [String, Number, Boolean],
+      default() {
+        return "";
+      }
+    },
+    label: {
+      type: Object,
+      default() {
+        return { text: "", value: false };
+      }
+    },
+    active: {
+      type: false,
+      default() {
+        return false;
+      }
+    }
+  },
+  data() {
+    return {
+      checked: false
+    };
+  },
+  methods: {
+    updateLabel() {
+      this.updateStatus();
+    },
+    onClickLabel() {
+      if (this.$parent.$options.name !== "Radio-Group") {
+        this.checked = !this.checked;
+        this.$emit("input", this.checked);
+        return;
+      }
+
+      this.$emit("input", this.label.value);
+    },
+
+    updateStatus() {
+      if (this.value === this.label.value) {
+        this.checked = true;
+      } else {
+        this.checked = false;
+      }
+    }
+  },
+  computed: {
+    classes() {
+      return [
+        "checkmark",
+        {
+          "cubeic-round-border": !this.checked,
+          "cubeic-right": this.checked
+        }
+      ];
+    },
+    labelClasses() {
+      return [
+        "radio-label",
+        {
+          active: this.checked || this.active,
+          ml5: this.active
+        }
+      ];
+    }
+  },
+  watch: {
+    value() {
+      this.updateStatus();
+    }
+  },
+  created() {
+    // this.updateLabel();
+    this.updateStatus();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  font-size: 28px;
+  display: flex;
+  align-content: center;
+}
+
+.checkmark {
+  font-size: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.radio-label {
+  display: inline-block;
+  height: 55px;
+  font-size: 28px;
+  line-height: 55px;
+  margin-left: 20px;
+  color: #999;
+
+  &.active {
+    color: black;
+  }
+
+  &.ml5 {
+    margin-left: 10px;
+  }
+}
+</style>

+export default [{
+    name: 'address',
+    path: '/xianyu/address',
+    component: () => import('./address')
+  },
+  {
+    name: 'addressEdit',
+    path: '/xianyu/address/edit',
+    component: () => import('./addressEdit')
+  }
+];

-export default [{
-  name: 'address',
-  path: '/xianyu/address',
-  component: () => import('./address')
-}];
+import Address from './address';
+
+export default [...Address];