313 lines
6.9 KiB
Plaintext
313 lines
6.9 KiB
Plaintext
|
||
<template>
|
||
<view class="admin-page">
|
||
<view class="admin-card content-card">
|
||
<view class="tabs-row">
|
||
<view class="tab-item active">
|
||
<text class="tab-text">PC站点配置</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="config-form">
|
||
<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 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" @click="handleSubmit">提交</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
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 lang="scss">
|
||
.admin-page {
|
||
/* 使用 Layout 的背景和内边距 */
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.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: #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: 64px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
background: #1890ff;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
border: none;
|
||
}
|
||
</style>
|
||
|