feat: 商品提交列表

2026-07-28 10:08:15 +08:00
parent 45489cd0c4
commit 78bca3b3d5
24 changed files with 1849 additions and 234 deletions
@@ -0,0 +1,94 @@
+<template>
+  <main class="address-page">
+    <van-nav-bar title="地址管理" left-arrow @click-left="$router.back()" />
+    <van-address-list
+      v-model="chosenAddressId"
+      :list="addressList"
+      :disabled-list="disabledList"
+      disabled-text="以下地址超出配送范围"
+      default-tag-text="默认"
+      @add="onAdd"
+      @edit="onEdit"
+      @select="onSelect"
+    />
+  </main>
+</template>
+
+<script>
+import { formatAddress, readAddresses, readChosenAddressId, saveChosenAddressId } from './address-data'
+
+export default {
+  name: 'JoyfulSelectionAddressList',
+  data: () => ({
+    chosenAddressId: '',
+    addresses: [],
+    disabledList: []
+  }),
+  computed: {
+    addressList() {
+      return this.addresses.map(item => ({
+        id: item.id,
+        name: item.name,
+        tel: item.tel,
+        address: formatAddress(item),
+        isDefault: item.isDefault
+      }))
+    }
+  },
+  created() {
+    this.addresses = readAddresses()
+    this.chosenAddressId = readChosenAddressId()
+  },
+  methods: {
+    onSelect(item) {
+      this.chosenAddressId = item.id
+      saveChosenAddressId(item.id)
+
+      if (this.$route.query.from === 'checkout') {
+        this.$router.back()
+      }
+    },
+    onAdd() {
+      this.$router.push('/joyful-selection/address/edit')
+    },
+    onEdit(item) {
+      this.$router.push({ path: '/joyful-selection/address/edit', query: { id: item.id } })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.address-page {
+  min-height: 100vh;
+  padding-top: 46px;
+  background: #f7f7f7;
+}
+
+.address-page ::v-deep .van-nav-bar {
+  position: fixed;
+  z-index: 20;
+  top: 0;
+  right: 0;
+  left: 0;
+  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
+}
+
+.address-page ::v-deep .van-address-list {
+  padding: 12px 12px 86px;
+}
+
+.address-page ::v-deep .van-address-item {
+  border-radius: 8px;
+}
+
+.address-page ::v-deep .van-address-item .van-radio__icon--checked .van-icon,
+.address-page ::v-deep .van-address-list__add {
+  border-color: #ff5b20;
+  background: #ff5b20;
+}
+
+.address-page ::v-deep .van-tag--danger {
+  background: #ff5b20;
+}
+</style>