huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善页面5

Browse Source
This commit is contained in:
huangzhenbao
2026-02-13 00:54:33 +08:00
parent 194dd19174
commit 1b558e3117
2 changed files with 659 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
pages/mall/admin/setting/interface/collect.uvue
View File

@@ -1,28 +1,215 @@
<template>
<view class="admin-page-container">
<view class="page-header"><view class="breadcrumb"><text class="bc-item">设置</text><text class="bc-sep">/</text><text class="bc-item">接口配置</text><text class="bc-sep">/</text><text class="bc-item active">商品采集配置</text></view></view>
<view class="page-header">
<view class="breadcrumb">
<text class="bc-item">设置</text>
<text class="bc-sep">/</text>
<text class="bc-item">接口配置</text>
<text class="bc-sep">/</text>
<text class="bc-item active">商品采集配置</text>
</view>
</view>
<view class="content-card">
<view class="tabs-header"><view class="tab-item active"><text class="tab-text">基础配置</text></view></view>
<view class="config-view">
<view class="tabs-header">
<view :class="['tab-item', activeTab == 0 ? 'active' : '']" @click="activeTab = 0">
<text class="tab-text">基础配置</text>
</view>
<view :class="['tab-item', activeTab == 1 ? 'active' : '']" @click="activeTab = 1">
<text class="tab-text">99api配置</text>
</view>
</view>
<!-- 基础配置 -->
<view class="form-section" v-if="activeTab == 0">
<view class="form-content">
<view class="form-row">
<view class="form-label">接口选择:</view>
<view class="form-input-box">
<radio-group @change="onInterfaceChange">
<label><radio value="onepass" checked color="#2d8cf0" /><text>一号通</text></label>
<label><radio value="99api" color="#2d8cf0" /><text>99Api</text></label>
<radio-group class="form-radio-group" @change="onBaseChange('type', $event)">
<label class="radio-label">
<radio value="onepass" :checked="form.base.type == 'onepass'" color="#2d8cf0" />
<text class="radio-text">一号通</text>
</label>
<label class="radio-label">
<radio value="99api" :checked="form.base.type == '99api'" color="#2d8cf0" />
<text class="radio-text">99Api</text>
</label>
</radio-group>
<text class="form-tips highlight">采集商品接口选择，一号通快速注册开通使用不用配置apikey，或者去99api网址：https://www.99api.com/注册账号。推荐一号通方便快捷</text>
</view>
</view>
<view class="form-actions"><button class="submit-btn" type="primary" @click="handleSubmit">提交</button></view>
<view class="form-actions" style="margin-top: 20px;">
<button class="submit-btn" type="primary" @click="handleSave">提交</button>
</view>
</view>
</view>
<!-- 99api配置 -->
<view class="form-section" v-if="activeTab == 1">
<view class="form-content">
<view class="form-row">
<view class="form-label">99Api apiKey:</view>
<view class="form-input-box">
<input class="form-input max-width-input" v-model="form.api99.apiKey" placeholder="请输入99Api apiKey" />
<text class="form-tips highlight">注册99api采集接口在个人中心复制key</text>
</view>
</view>
<view class="form-actions" style="margin-top: 20px;">
<button class="submit-btn" type="primary" @click="handleSave">提交</button>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref } from 'vue'
const onInterfaceChange = (e : any) => { console.log(e.detail.value) }
const handleSubmit = () => { uni.showToast({ title: '提交成功' }) }
import { ref, reactive } from 'vue'
const activeTab = ref(0)
const form = reactive({
base: {
type: 'onepass'
},
api99: {
apiKey: ''
}
})
const onBaseChange = (key : string, e : any) => {
form.base[key] = e.detail.value
}
const handleSave = () => {
uni.showToast({
title: '提交成功',
icon: 'success'
})
}
</script>
<style scoped> .admin-page-container { padding: 20px; background-color: #f5f7f9; } .content-card { background: #fff; padding: 20px; } .breadcrumb { margin-bottom: 20px; display: flex; flex-direction: row; } </style>
<style scoped>
.admin-page-container {
min-height: 100vh;
background-color: #f5f7f9;
padding: 20px;
}
.breadcrumb {
display: flex;
flex-direction: row;
margin-bottom: 20px;
}
.bc-item {
font-size: 14px;
color: #999;
}
.bc-item.active {
color: #333;
}
.bc-sep {
margin: 0 8px;
color: #ccc;
}
.content-card {
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
}
.tabs-header {
display: flex;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
padding: 0 30px;
}
.tab-item {
padding: 16px 20px;
margin-right: 32px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab-text {
font-size: 14px;
color: #666;
}
.tab-item.active {
border-bottom-color: #2d8cf0;
}
.tab-item.active .tab-text {
color: #2d8cf0;
font-weight: bold;
}
.form-section {
padding: 30px;
}
.form-content {
max-width: 900px;
}
.form-row {
display: flex;
flex-direction: row;
margin-bottom: 24px;
}
.form-label {
width: 140px;
font-size: 14px;
color: #333;
text-align: right;
margin-right: 24px;
padding-top: 8px;
}
.form-input-box {
flex: 1;
}
.form-input {
width: 100%;
border: 1px solid #dcdfe6;
border-radius: 4px;
height: 34px;
padding: 0 12px;
font-size: 14px;
}
.max-width-input {
max-width: 450px;
}
.form-tips {
display: block;
font-size: 12px;
color: #999;
margin-top: 10px;
line-height: 1.6;
}
.highlight {
color: #c0c4cc;
}
.form-radio-group {
display: flex;
flex-direction: row;
align-items: center;
height: 34px;
}
.radio-label {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 24px;
}
.radio-text {
font-size: 14px;
margin-left: 6px;
color: #606266;
}
.form-actions {
padding-left: 164px;
}
.submit-btn {
width: 65px;
height: 32px;
background-color: #2d8cf0;
color: #fff;
border-radius: 4px;
font-size: 14px;
line-height: 32px;
text-align: center;
border: none;
}
</style>