Task：多店铺选择

2025-03-24 18:13:19 +08:00
parent a1182276a9
commit 85b1a8f0f1
4 changed files with 133 additions and 5 deletions
@@ -0,0 +1,102 @@
+<template>
+  <u-popup
+    :show="show"
+    @close="close"
+    @open="open"
+    mode="center"
+    closeable
+    round="10"
+  >
+    <view class="v12-pa-3 pop-content">
+      <view class="v12-dark-text v12-font-bold pop-title">请选择登录的店铺</view>
+      <view v-for="(item, index) in list" :key="index" class="home-wrap">
+        <view>
+          <u-avatar :src="item.logo"></u-avatar>
+        </view>
+        <view class="name-wrap one-t">{{ item.name }}</view>
+        <view class="enter-btn" @click="queryHome(index)">
+          点击进入{{ item.id }}
+        </view>
+      </view>
+    </view>
+  </u-popup>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      list: [],
+      show: false,
+    } 
+  },
+  methods: {
+    queryHome(e) {
+      this.$nextTick(() => {
+        this.$emit('enter', this.list[e]) 
+        this.show = false
+      })
+    },
+    open(records) {
+      console.log(records);
+      if(!records) return;
+      this.show = true;
+      this.list = records && [...records] || []
+    }, 
+    close() {
+      this.show = false;
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.home-wrap{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #F6F6F6;
+  padding: 10rpx 20rpx;
+  border-radius: 20rpx;
+  margin-bottom: 10rpx;
+}
+.name-wrap{
+  width: 280rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.enter-btn{
+  width: 118rpx;
+  height: 42rpx;
+  background: #0DC5C5;
+  border-radius: 22rpx;
+  padding: 2rpx 10rpx;
+  text-align: center;
+  line-height: 42rpx;
+  color: #fff;
+  font-size: 24rpx;
+}
+.pop-content{
+  width: 568rpx;
+  max-height: 860rpx;
+  background: rgba(255,255,255,0.39);
+  border-radius: 12rpx;
+}
+.pop-title{
+  position: relative;
+  width: fit-content;
+  margin-bottom: 20rpx;
+}
+.pop-title::after{
+  content: '';
+  position: absolute;
+  bottom: 0rpx; 
+  left: 0;
+  width: 100%;
+  height: 5px;
+  background-color: #0DC5C5;
+  border-radius: 20rpx;
+  opacity: 0.5;
+}
+</style>