小程序产品库完成

src/mods/AppHometown/AppHometown.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="page">
+    <template v-if="detail">
+      <header>{{ detail.areaName }}</header>
+      <div class="address">{{ detail.address }}</div>
+      <div class="desc">
+        <u-parse :html="detail.content"></u-parse>
+      </div>
+    </template>
+    <AiEmpty v-else></AiEmpty>
+    <div class="btn" @click="cancel" v-if="detail">
+      <div>解除入驻</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+
+export default {
+  name: "AppHometown",
+  appName: "我的家乡",
+  data() {
+    return {
+      detail: null,
+    }
+  },
+  onLoad() {
+    this.getDetail();
+  },
+  computed: {
+    ...mapState(["user"])
+  },
+  methods: {
+    getDetail() {
+      if (!this.user.homeArea) return
+      this.$instance.post("/app/appcountrysidetourism/queryDetailByAreaIdForWX", null, {
+        params: {areaId: this.user.homeArea}
+      }).then(res => {
+        if (res?.data) {
+          this.detail = res.data;
+        }
+      })
+    },
+    cancel() {
+      this.$instance.post("/app/appwechatuser/unbindHome", {id: this.user.id}).then(res => {
+        if (res.code == 0) {
+          this.$u.toast('解除入驻成功')
+          setTimeout(() => {
+            uni.navigateBack()
+          }, 600)
+        }
+      })
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 32px;
+  position: relative;
+
+  header {
+    font-size: 48px;
+    font-weight: 600;
+    color: #333333;
+    line-height: 66px;
+  }
+
+  .address {
+    font-size: 30px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 42px;
+    margin-top: 16px;
+  }
+
+  .desc {
+    font-size: 36px;
+    font-weight: 400;
+    color: #333333;
+    line-height: 64px;
+    margin-top: 64px;
+    padding-bottom: 120px;
+  }
+
+  .btn {
+    width: 100%;
+    background-color: #fff;
+    position: fixed;
+    left: 50%;
+    bottom: 0;
+    padding-bottom: 16px;
+    z-index: 999;
+    transform: translateX(-50%);
+
+    div {
+      width: 686px;
+      height: 88px;
+      background: #FFFFFF;
+      border-radius: 16px;
+      border: 1px solid #FF4466;
+      font-size: 34px;
+      font-weight: 600;
+      color: #FF4466;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 32px;
+    }
+  }
+
+
+}
+</style>