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

完善页面7

Browse Source
This commit is contained in:
huangzhenbao
2026-02-13 01:52:47 +08:00
parent da1075b9e9
commit f814db2f12
4 changed files with 799 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

313
pages/mall/admin/app/pc/config.uvue
View File

@@ -1,24 +1,94 @@
<template>
<view class="admin-page">
<view class="admin-card content-card">
<view class="tabs-row">
<view class="tab-item active">PC端配置</view>
<view class="tab-item active">
<text class="tab-text">PC站点配置</text>
</view>
</view>
<view class="config-form">
<view class="form-item">
<text class="label">网站域名：</text>
<input class="form-input" placeholder="请输入PC端网站域名" />
<text class="tip">PC端访问的地址</text>
<view class="form-item row">
<text class="label">PC端LOGO：</text>
<view class="form-content">
<view class="logo-upload" @click="handleUploadLogo">
<image v-if="config.logo" :src="config.logo" mode="aspectFit" class="logo-preview" />
<view v-else class="upload-placeholder">
<text class="plus">+</text>
</view>
</view>
<text class="tip">PC端LOGO</text>
</view>
</view>
<view class="form-item">
<text class="label">ICP备案号：</text>
<input class="form-input" placeholder="请输入备案号" />
<text class="tip">展示在页面底部的备案信息</text>
<view class="form-item row">
<text class="label">联系电话：</text>
<view class="form-content">
<input class="form-input" v-model="config.phone" placeholder="400-8888-794" />
<text class="tip">PC底部显示的联系电话</text>
</view>
</view>
<view class="form-item row">
<text class="label">公司地址：</text>
<view class="form-content">
<input class="form-input" v-model="config.address" placeholder="陕西省西安市..." />
<text class="tip">PC底部显示的公司地址</text>
</view>
</view>
<view class="form-item row">
<text class="label">关键词：</text>
<view class="form-content">
<input class="form-input" v-model="config.keywords" placeholder="请输入关键词" />
<text class="tip">网站关键词</text>
</view>
</view>
<view class="form-item row">
<text class="label">网站描述：</text>
<view class="form-content">
<textarea class="form-textarea" v-model="config.description" placeholder="网站描述" />
<text class="tip">网站描述</text>
</view>
</view>
<view class="form-item row">
<text class="label">二维码类型：</text>
<view class="form-content">
<view class="radio-group">
<view class="radio-item" @click="config.qrCodeType = 'official'">
<view class="radio-circle" :class="{ active: config.qrCodeType === 'official' }"></view>
<text class="radio-text">公众号</text>
</view>
<view class="radio-item" @click="config.qrCodeType = 'routine'">
<view class="radio-circle" :class="{ active: config.qrCodeType === 'routine' }"></view>
<text class="radio-text">小程序</text>
</view>
</view>
<text class="tip">商品详情手机购买显示公众号或者小程序码</text>
</view>
</view>
<view class="form-item row">
<text class="label">精品推荐个数：</text>
<view class="form-content">
<input class="form-input" type="number" v-model="config.recommendCount" placeholder="3" />
<text class="tip">首页配置精品推荐个数</text>
</view>
</view>
<view class="form-item row">
<text class="label">首发新品个数：</text>
<view class="form-content">
<input class="form-input" type="number" v-model="config.newProductCount" placeholder="5" />
<text class="tip">首页配置首发新品个数</text>
</view>
</view>
<view class="form-btns">
<button class="btn primary">提交</button>
<button class="btn primary" @click="handleSubmit">提交</button>
</view>
</view>
</view>
@@ -26,41 +96,216 @@
</template>
<script setup lang="uts">
// PC配置逻辑
import { ref } from 'vue'
const config = ref({
logo: 'https://v5.crmeb.net/uploads/attach/2022/05/20220516/6198f7e6f8a8b.png',
phone: '400-8888-794',
address: '陕西省西安市西咸新区洋东新城能源金融贸易区金湾大厦3层',
keywords: '',
description: '',
qrCodeType: 'routine',
recommendCount: 3,
newProductCount: 5
})
const handleUploadLogo = () => {
uni.chooseImage({
count: 1,
success: (res) => {
config.value.logo = res.tempFilePaths[0]
}
})
}
const handleSubmit = () => {
uni.showToast({ title: '保存成功', icon: 'success' })
}
</script>
<style scoped>
.config-form {
padding: 40px 10%;
<style scoped lang="scss">
.admin-page {
padding: 20px;
}
.form-item {
margin-bottom: 30px;
display: flex;
flex-direction: column;
}
.form-item .label {
font-weight: bold;
margin-bottom: 10px;
color: #303133;
}
.form-input {
border: 1px solid #dcdfe6;
padding: 10px 15px;
.content-card {
background: #fff;
border-radius: 4px;
}
.tabs-row {
display: flex;
flex-direction: row;
border-bottom: 1px solid #f0f0f0;
padding: 0 20px;
}
.tab-item {
padding: 15px 20px;
position: relative;
&.active {
.tab-text {
color: #1890ff;
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #1890ff;
}
}
}
.tab-text {
font-size: 14px;
color: #333;
}
.config-form {
padding: 30px 20px;
max-width: 800px;
}
.form-item {
margin-bottom: 25px;
&.row {
display: flex;
flex-direction: row;
align-items: flex-start;
}
}
.label {
width: 140px;
text-align: right;
font-size: 14px;
color: #333;
padding-top: 8px;
margin-right: 15px;
}
.form-content {
flex: 1;
}
.logo-upload {
width: 80px;
height: 80px;
border: 1px dashed #dcdee2;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
border-color: #1890ff;
}
}
.logo-preview {
width: 100%;
height: 100%;
}
.upload-placeholder {
.plus {
font-size: 24px;
color: #ccc;
}
}
.form-input {
width: 100%;
max-width: 460px;
height: 36px;
border: 1px solid #dcdee2;
border-radius: 4px;
padding: 0 12px;
font-size: 14px;
}
.form-textarea {
width: 100%;
max-width: 460px;
height: 100px;
border: 1px solid #dcdee2;
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
}
.tip {
display: block;
font-size: 12px;
color: #909399;
color: #999;
margin-top: 8px;
}
.radio-group {
display: flex;
flex-direction: row;
align-items: center;
height: 36px;
}
.radio-item {
display: flex;
flex-direction: row;
align-items: center;
margin-right: 25px;
cursor: pointer;
}
.radio-circle {
width: 16px;
height: 16px;
border: 1px solid #dcdee2;
border-radius: 50%;
margin-right: 6px;
position: relative;
&.active {
border-color: #1890ff;
&::after {
content: '';
width: 8px;
height: 8px;
background: #1890ff;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
.radio-text {
font-size: 14px;
color: #333;
}
.form-btns {
margin-top: 40px;
padding-left: 155px;
}
.btn.primary {
width: 80px;
background-color: #2d8cf0;
width: 64px;
height: 32px;
line-height: 32px;
background: #1890ff;
color: #fff;
font-size: 14px;
border-radius: 4px;
text-align: center;
border: none;
}
</style>