excahnge detalis page init

src/router/modules/jiedao.js

@@ -112,6 +112,18 @@ const jiedaoRouter = {
       name: "ExchangeLog",
       meta: { title: "ExchangeOperate" },
     },
+    {
+      path: "jd-adress-maneger",
+      component: () => import("@/views/jiedao/profile/adressManager"),
+      name: "AdressManager",
+      meta: { title: "AdressManager" },
+    },
+    {
+      path: "jd-exchange-details",
+      component: () => import("@/views/jiedao/profile/exchangeDetails"),
+      name: "ExchangeDetails",
+      meta: { title: "ExchangeDetails" },
+    },
     {
       path: "jd-details-activity",
       component: () => import("@/views/jiedao/profile/detailsActivity"),

src/views/jiedao/profile/adressManager.vue

+<template>
+  <div class="container">
+    <el-card class="box-card">
+      <div class="title">
+        <span class="titleText">{{ title }}</span>
+        <el-button type="success" size="mini" @click="newAdress">{{
+          $t("新增地址")
+        }}</el-button>
+      </div>
+      <div class="session">
+        <!-- adress List -->
+        <div class="adressList" v-if="pageTypes == 'view'">
+          <div class="listItem">
+            <div class="left"></div>
+            <div class="right">
+              <el-button type="text">{{ $t("选择") }}</el-button>
+              <el-button type="text">{{ $t("编辑") }}</el-button>
+            </div>
+          </div>
+          <el-divider></el-divider>
+        </div>
+        <!-- new/ edit Adress -->
+        <div class="editBox" v-else>
+          <el-form
+            ref="form"
+            :rules="rules"
+            :model="adressForm"
+            label-width="80px"
+          >
+            <el-form-item label="姓名" prop="name">
+              <el-input
+                v-model="adressForm.name"
+                placeholder="请输入姓名"
+              ></el-input>
+            </el-form-item>
+            <el-form-item label="电话">
+              <el-row>
+                <el-col :span="5">
+                  <el-form-item>
+                    <el-select v-model="adressForm.areaCode">
+                      <el-option
+                        v-for="item in countryAreaCodeList"
+                        :key="item.id"
+                        :label="
+                          '+' +
+                          item.tel +
+                          ` ${language == 'zh_CN' ? item.nameZh : item.nameEn}`
+                        "
+                        :value="item.tel"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="16">
+                  <el-form-item prop="phone">
+                    <el-input
+                      ref="phone"
+                      v-model="adressForm.phone"
+                      :placeholder="$t('login.mobile')"
+                      name="phone"
+                      maxlength="11"
+                      type="text"
+                      tabindex="1"
+                      autocomplete="on"
+                    />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form-item>
+            <el-form-item label="地址" prop="address">
+              <el-input type="textarea" v-model="adressForm.address"></el-input>
+            </el-form-item>
+            <el-form-item label="默认地址">
+              <el-switch
+                v-model="adressForm.isDefault"
+                active-value="0"
+                inactive-value="1"
+              ></el-switch>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">保存地址</el-button>
+              <el-button>取消</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+
+      <!--  -->
+    </el-card>
+  </div>
+</template>
+<script>
+import { integralList } from "@/api/integral";
+import { getCountryList } from "@/api/user";
+import { addressadd, addresslist } from "@/api/address";
+export default {
+  name: "AdressManager",
+  data() {
+    return {
+      countryAreaCodeList: [],
+      addressList: [],
+      pageTypes: "view",
+      rules: {
+        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
+        adress: [{ required: true, message: "请输入地址", trigger: "blur" }],
+      },
+      adressForm: {
+        name: "",
+        areaCode: "86",
+        isDefault: "",
+        memberId: this.$store.getters.id,
+        phone: "",
+        adress: "",
+      },
+    };
+  },
+  computed: {
+    title() {
+      switch (this.pageTypes) {
+        case "view":
+          return this.$t("选择收货地址");
+        case "add":
+          return this.$t("新增收货地址");
+        case "edit":
+        default:
+          return this.$t("编辑收货地址");
+      }
+    },
+    language() {
+      return this.$store.getters.language;
+    },
+  },
+  watch: {
+    selectedNodeId(val) {
+      this.nodeId = val[val.length - 1];
+      this.getIntegralList();
+    },
+  },
+  created() {
+    this.sycnInfo();
+  },
+  methods: {
+    sycnInfo() {
+      // areaCode List
+      getCountryList().then((r) => {
+        this.countryAreaCodeList = r.data;
+      });
+      // adress List
+      this.getAdressList();
+    },
+    getAdressList() {
+      const id = this.$store.getters.id;
+      addresslist({ id }).then((r) => {
+        this.addressList = r.data;
+      });
+    },
+    newAdress() {
+      this.pageTypes = "add";
+    },
+    onSubmit() {
+      const params = { ...this.adressForm };
+      addressadd(params).then((res) => {
+        this.$message({
+          message: "保存成功",
+          type: "success",
+        });
+        this.pageTypes = "view";
+        this.getAdressList();
+      });
+    },
+    // 获取礼品列表
+    async getIntegralList() {
+      try {
+        const memberId = this.$store.getters.id;
+        const { code, data } = await integralList({
+          memberId,
+          nodeId: this.nodeId,
+        });
+        if (code !== 0) return;
+        this.list = data;
+      } catch (err) {
+        console.log(err);
+      }
+    },
+    // 跳转详情
+    toDetail(id) {
+      this.$router.push({ path: `/jiedao/jd-exchange-operate`, query: { id } });
+    },
+  },
+};
+</script>
+<style scoped>
+.titleText {
+  padding-right: 20px;
+}
+.editBox {
+  padding: 50px 0;
+}
+.listItem {
+  display: flex;
+}
+.left {
+  flex: 1;
+}
+</style>

src/views/jiedao/profile/exchangeDetails.vue

+<template>
+  <div class="app-container">兑换详情</div>
+</template>

src/views/jiedao/profile/exchangeOperate.vue

@@ -7,7 +7,7 @@
         :key="item.value"
       >
         <span slot="label">{{ isChinese ? item.label : item.labelEn }}</span>
-        <div class="adressBox">
+        <div class="adressBox" @click="goAdressManagerPage">
           <i class="el-icon-location-information adress-icon iconColor"></i>
           <div class="adressInfo">
             <div class="adress_detail"></div>
@@ -27,9 +27,30 @@
           </div>
           <div class="giftText">
             <div class="title"></div>
-            div.
+            <div class="exchangeMethod">
+              <span>{{ $t("兑换方式") }}</span>
+              <span></span>
+            </div>
+            <div class="activityTime">
+              <span>{{ $t("活动时间") }}</span>
+              <span></span>
+              <div class="exchangeNumber">
+                <el-input-number
+                  v-model="num"
+                  @change="handleChange"
+                  :min="1"
+                  :max="10"
+                  label="描述文字"
+                ></el-input-number>
+              </div>
+            </div>
           </div>
         </div>
+        <el-divider></el-divider>
+        <div class="verificationCode">
+          <el-input v-model="input" placeholder="请输入内容"></el-input>
+          <el-button type="text">{{ $t("获取验证码") }}</el-button>
+        </div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -47,7 +68,11 @@ export default {
       return this.$i18n.locale === "zh_CN";
     },
   },
-  methods: {},
+  methods: {
+    goAdressManagerPage() {
+      this.$router.push("/jiedao/jd-adress-maneger");
+    },
+  },
 };
 </script>
 <style lang="scss" scoped>