Quellcode durchsuchen

feat(client):新增地址页面

yizhiyang vor 10 Monaten
Ursprung
Commit
d2c896227d

+ 125 - 0
src/PageMine/address/editAddress.vue

@@ -0,0 +1,125 @@
+<template>
+  <view class="editAddress">
+    <page-navbar bgColor="#fff" title="新增地址"></page-navbar>
+    <base-card padding="24rpx">
+      <view class="f-s-32 text-333 u-m-b-24"> 地址信息</view>
+      <u--form
+        labelPosition="left"
+        :model="model1"
+        :rules="rules"
+        ref="uForm"
+        labelWidth="80"
+        :labelStyle="labelStyle"
+      >
+        <u-form-item label="用户名" prop="userInfo.name" borderBottom ref="item1">
+          <u--input
+            v-model="model1.userInfo.name"
+            border="none"
+            placeholder="请输入用户名"
+          ></u--input>
+        </u-form-item>
+        <u-form-item label="联系方式" prop="userInfo.name" borderBottom ref="item1">
+          <u--input
+            v-model="model1.userInfo.name"
+            border="none"
+            placeholder="请输入联系方式"
+          ></u--input>
+        </u-form-item>
+
+        <u-form-item label="所属地区" prop="userInfo.sex" borderBottom ref="item1">
+          <u--input
+            v-model="model1.userInfo.sex"
+            disabled
+            disabledColor="#ffffff"
+            placeholder="请选择所属地区"
+            border="none"
+          ></u--input>
+          <u-icon slot="right" name="arrow-right" color="#999999" size="12"></u-icon>
+        </u-form-item>
+
+        <u-form-item label="详细地址" prop="userInfo.sex" borderBottom ref="item1">
+          <u--input
+            v-model="model1.userInfo.sex"
+            disabled
+            disabledColor="#ffffff"
+            placeholder="请输入详情地址"
+            border="none"
+          ></u--input>
+          <u-icon slot="right" name="map" color="#000" size="20"></u-icon>
+        </u-form-item>
+
+        <u-form-item>
+          <view class="fl-flex-item">
+            <view class="f-s-28 text-primary">设置为默认地址</view>
+            <u-switch></u-switch>
+          </view>
+        </u-form-item>
+      </u--form>
+    </base-card>
+    <view class="editAddress-bottom">
+      <base-button text="保存" :buttonStyle="customStyle"></base-button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'editAddress',
+  data() {
+    return {
+      showSex: false,
+      model1: {
+        userInfo: {
+          name: '',
+          sex: '',
+        },
+      },
+      rules: {
+        'userInfo.name': {
+          type: 'string',
+          required: true,
+          message: '请填写姓名',
+          trigger: ['blur', 'change'],
+        },
+        'userInfo.sex': {
+          type: 'string',
+          max: 1,
+          required: true,
+          message: '请选择男或女',
+          trigger: ['blur', 'change'],
+        },
+      },
+      radio: '',
+      switchVal: false,
+    };
+  },
+  methods: {
+    sexSelect(e) {
+      this.model1.userInfo.sex = e.name;
+      this.$refs.uForm.validateField('userInfo.sex');
+    },
+  },
+  computed: {
+    labelStyle() {
+      return {
+        color: '#0C1223',
+      };
+    },
+  },
+  onReady() {
+    //如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
+    this.$refs.uForm.setRules(this.rules);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.editAddress {
+  padding: 24rpx 32rpx 0 32rpx;
+  .editAddress-bottom {
+    width: 90%;
+    position: fixed;
+    bottom: 10%;
+  }
+}
+</style>

+ 67 - 0
src/PageMine/address/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <view class="address">
+    <page-navbar bgColor="#fff" title="地址"></page-navbar>
+    <base-card padding="24rpx" marginBottom="24rpx" v-for="(item, index) in 5" :key="index">
+      <view class="fl-flex u-m-b-16">
+        <view class="f-s-28 text-primary u-m-r-16">王忠青</view>
+        <view class="f-s-28 text-primary">18286672345</view>
+      </view>
+      <view class="address-detail">贵州省贵阳市观山湖区高新区联合广场</view>
+      <view class="fl-flex">
+        <u-radio-group v-model="value" iconSize="10">
+          <u-radio shape="circle" label="设为默认"></u-radio>
+        </u-radio-group>
+        <view class="fl-flex">
+          <view class="fl-flex">
+            <u-icon name="edit-pen" color="#0c1223" size="16"></u-icon>
+            <view class="f-s-24 text-666 u-m-l-8">编辑</view>
+          </view>
+          <view class="fl-flex u-m-l-24">
+            <u-icon name="trash" color="#0c1223" size="16"></u-icon>
+            <view class="f-s-24 text-666 u-m-l-8">删除</view>
+          </view>
+        </view>
+      </view>
+    </base-card>
+    <view class="address-bottom">
+      <base-button text="新增地址" :buttonStyle="customStyle" @click="handleAddress"></base-button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'address',
+  data() {
+    return {
+      value: '',
+    };
+  },
+  methods: {
+    handleAddress() {
+      uni.navigateTo({
+        url: '/PageMine/address/editAddress',
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.address {
+  padding: 24rpx 32rpx 0 32rpx;
+  .address-detail {
+    font-size: 24rpx;
+    color: #666;
+    line-height: 34rpx;
+    padding-bottom: 16rpx;
+    border-bottom: 1rpx solid #ebebeb;
+    margin-bottom: 22rpx;
+  }
+  .address-bottom {
+    width: 90%;
+    position: fixed;
+    bottom: 10%;
+  }
+}
+</style>

+ 0 - 2
src/PageMine/personInfo/index.vue

@@ -29,10 +29,8 @@
 <script>
 import { getUserInfo } from '@/api/user';
 import { uploadFile } from '@/utils/upload';
-// import baseCard from '@/components/base-card/base-card.vue';
 
 export default {
-  // components: { baseCard },
   data() {
     return {
       queryParams: {

+ 1 - 1
src/PageMine/setting/index.vue

@@ -35,7 +35,7 @@ export default {
         },
         {
           title: '我的地址',
-          url: '',
+          url: '/PageMine/address/index',
         },
       ],
       LinkList2: [

+ 12 - 0
src/pages.json

@@ -259,6 +259,18 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "address/index",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
+        {
+          "path": "address/editAddress",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "personInfo/index",
           "style": {