新增积分锁客页面，基础设置，商品设置，兑换记录

components/my-components/my-footer-btn.vue

@@ -1,78 +1,90 @@
 <template>
-  <view
-    class="fixed-wrap"
-    :style="{ '--num': showCancel ? '63px' : '0px' }"
-    v-if="isShow"
-  >
-    <view class="fixed-btn" id="targetRef">
-      <div class="btn">
-        <u-button
-          type="primary"
-          :shape="shape"
-          size="large"
-          @click="emits('confirm')"
-          >{{ confirmText }}</u-button
-        >
-      </div>
-      <div class="btn" v-if="showCancel">
-        <u-button :shape="shape" size="large" @click="emits('cancel')"
-          >取消</u-button
-        >
-      </div>
-    </view>
-  </view>
+	<view class="fixed-wrap" :style="{ '--num': `${numValue}px` }" v-if="isShow">
+		<view class="fixed-btn" :class="[type]" id="targetRef">
+			<div class="btn">
+				<u-button type="primary" :shape="shape" size="large" @click="emits('confirm')">{{ confirmText }}</u-button>
+			</div>
+			<div class="btn" v-if="showCancel">
+				<u-button :shape="shape" size="large" @click="emits('cancel')">取消</u-button>
+			</div>
+		</view>
+	</view>
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick, getCurrentInstance ,computed} from "vue";
-import { isMainShop } from "@/store/account.js";
+import { ref, onMounted, nextTick, getCurrentInstance, computed } from 'vue';
+import { isMainShop } from '@/store/account.js';
 
 const props = defineProps({
-  isOpenPermission: {
-    type: Boolean,
-    default: true,
-  },
-  confirmText: {
-    type: String,
-    default: "保存",
-  },
-  showCancel: {
-    type: Boolean,
-    default: false,
-  },
-  shape: {
-    type: String,
-    default: "circle", // squre circle
-  },
+	type: {
+		type: String,
+		default: 'vertical' // horizontal横向 vertical竖向
+	},
+	isOpenPermission: {
+		type: Boolean,
+		default: true
+	},
+	confirmText: {
+		type: String,
+		default: '保存'
+	},
+	showCancel: {
+		type: Boolean,
+		default: false
+	},
+	shape: {
+		type: String,
+		default: 'circle' // squre circle
+	}
 });
 const isShow = computed(() => {
-  if (props.isOpenPermission) {
-    return isMainShop();
-  }
-  return true;
+	if (props.isOpenPermission) {
+		return isMainShop();
+	}
+	return true;
 });
-const emits = defineEmits(["confirm", "cancel"]);
+
+const numValue = computed(() => {
+	let num = 0;
+	if (props.type == 'vertical' && props.showCancel) {
+		num = 63;
+		return num;
+	}
+	if (props.type == 'horizontal') {
+		num = 0;
+		return num;
+	}
+});
+
+const emits = defineEmits(['confirm', 'cancel']);
 </script>
 
 <style scoped lang="scss">
 .fixed-wrap {
-  --height: calc(83px + var(--num) + env(safe-area-inset-bottom) / 2);
-  width: 100%;
-  height: var(--height);
-  .fixed-btn {
-    width: 100%;
-    height: var(--height);
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    z-index: 99;
-    padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
-    background-color: #fff;
-    .btn {
-      &:first-child {
-        margin-bottom: 14px;
-      }
-    }
-  }
+	--height: calc(83px + var(--num) + env(safe-area-inset-bottom) / 2);
+	width: 100%;
+	height: var(--height);
+	.fixed-btn {
+		width: 100%;
+		height: var(--height);
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 99;
+		padding: 10px 14px calc(20px + env(safe-area-inset-bottom) / 2) 10px;
+		background-color: #fff;
+		&.horizontal {
+			display: flex;
+			gap: 28upx;
+			.btn {
+				flex: 1;
+			}
+		}
+		.btn {
+			&:first-child {
+				margin-bottom: 14px;
+			}
+		}
+	}
 }
 </style>