商品详情发布富文本
This commit is contained in:
parent
b33123604d
commit
fcdc7ad20a
|
|
@ -6,7 +6,8 @@ const config = {
|
||||||
// host: 'h5api',
|
// host: 'h5api',
|
||||||
// #endif
|
// #endif
|
||||||
// #ifndef H5
|
// #ifndef H5
|
||||||
host: 'http://91f.xyz:8080',
|
// host: 'http://91f.xyz:8080',
|
||||||
|
host: 'http://y5fpgf.natappfree.cc',
|
||||||
// #endif
|
// #endif
|
||||||
// 支付方式配置
|
// 支付方式配置
|
||||||
payType: {
|
payType: {
|
||||||
|
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="click-show-more bfff">
|
|
||||||
<div :style="csmStyle" id="click-show-more" class="content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
<view @click="toggleContent" class="bfff p25 df aic jcc">
|
|
||||||
<text class="f24 c999">{{ buttonText }}</text>
|
|
||||||
<uni-icons :class="[{ cStyle: isExpanded }, 'icons']" type="down" :size="16" />
|
|
||||||
</view>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted } from 'vue';
|
|
||||||
const props = defineProps({
|
|
||||||
// 需要预留的高度
|
|
||||||
reserveHeight: {
|
|
||||||
type: Number,
|
|
||||||
default: 40
|
|
||||||
},
|
|
||||||
// 默认展开
|
|
||||||
defaultExpanded: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 默认展开
|
|
||||||
buttonText: {
|
|
||||||
type: String,
|
|
||||||
default: '展开'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 定义展开状态
|
|
||||||
const isExpanded = ref(false);
|
|
||||||
const buttonText = ref(isExpanded.value ? '收起' : '查看更多订单信息');
|
|
||||||
// 元素的高
|
|
||||||
const csmH = ref(null)
|
|
||||||
// 需要被响应的元素的样式
|
|
||||||
const csmStyle = ref({})
|
|
||||||
|
|
||||||
const toggleContent = () => {
|
|
||||||
if (isExpanded.value) {
|
|
||||||
buttonText.value = '查看更多订单信息';
|
|
||||||
csmStyle.value = {
|
|
||||||
'height': `${props.reserveHeight}px`
|
|
||||||
}
|
|
||||||
isExpanded.value = false;
|
|
||||||
} else {
|
|
||||||
buttonText.value = '收起';
|
|
||||||
csmStyle.value = {
|
|
||||||
'height': csmH.value + 'px'
|
|
||||||
}
|
|
||||||
isExpanded.value = true;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const getCsm = () => {
|
|
||||||
uni.createSelectorQuery().select('#click-show-more').boundingClientRect((rect) => {
|
|
||||||
console.log('元素高度：', rect.height);
|
|
||||||
csmH.value = rect.height
|
|
||||||
csmStyle.value = {
|
|
||||||
'height': `${props.reserveHeight}px`
|
|
||||||
}
|
|
||||||
}).exec();
|
|
||||||
}
|
|
||||||
onMounted(() => {
|
|
||||||
getCsm();
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.show-more-container {
|
|
||||||
width: 100%;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
transition: height .5s ease-in-out;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons {
|
|
||||||
transition: transform 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cStyle {
|
|
||||||
transform: rotate(-180deg);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,277 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
onMounted,
|
||||||
|
onUnmounted,
|
||||||
|
getCurrentInstance,
|
||||||
|
defineProps,
|
||||||
|
defineEmits,
|
||||||
|
} from 'vue'
|
||||||
|
// 工具库
|
||||||
|
import util from '@/common/js/util'
|
||||||
|
// 调色板
|
||||||
|
import pickerColor from '@/components/public/pickerColor/pickerColor.vue'
|
||||||
|
|
||||||
|
const {
|
||||||
|
proxy
|
||||||
|
} = getCurrentInstance()
|
||||||
|
// 编辑器内容
|
||||||
|
const formats = reactive({})
|
||||||
|
// 编辑器上下文对象
|
||||||
|
const editorCtx = ref(null)
|
||||||
|
// 设置颜色板
|
||||||
|
const color = reactive({
|
||||||
|
// 前景色
|
||||||
|
forecolor: '#ff0000',
|
||||||
|
// 背景色
|
||||||
|
backgroundColor: '#ff0000',
|
||||||
|
})
|
||||||
|
// 颜色板键值
|
||||||
|
const colorKey = ref('forecolor')
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 初始化
|
||||||
|
onEditorReady()
|
||||||
|
})
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
function onEditorReady() {
|
||||||
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
||||||
|
editorCtx.value = res.context
|
||||||
|
}).exec()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 撤销
|
||||||
|
function undo() {
|
||||||
|
editorCtx.value.undo()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重做
|
||||||
|
function redo() {
|
||||||
|
editorCtx.value.redo()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 执行editor方法
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function handleEditor(event) {
|
||||||
|
console.log('format', event.target.dataset)
|
||||||
|
let {
|
||||||
|
name,
|
||||||
|
value
|
||||||
|
} = event.target.dataset
|
||||||
|
if (!name) return
|
||||||
|
editorCtx.value.format(name, value)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑器状态被变化
|
||||||
|
* @param {Object} e
|
||||||
|
*/
|
||||||
|
function onStatusChange(e) {
|
||||||
|
Object.assign(formats, e.detail)
|
||||||
|
}
|
||||||
|
|
||||||
|
// 插入下划线
|
||||||
|
function handleInsertDivider() {
|
||||||
|
editorCtx.value.insertDivider()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清空编辑器内容
|
||||||
|
function handleClear() {
|
||||||
|
editorCtx.value.clear()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 清除所有格式
|
||||||
|
function handleRemoveFormat() {
|
||||||
|
editorCtx.value.removeFormat()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 插入图片
|
||||||
|
function handleImage() {
|
||||||
|
util.upload_image({
|
||||||
|
type: 1,
|
||||||
|
success: rs => {
|
||||||
|
editorCtx.value.insertImage({
|
||||||
|
src: rs.value,
|
||||||
|
alt: '图像',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择颜色
|
||||||
|
* @param {Object} key 需要修改颜色的键
|
||||||
|
*/
|
||||||
|
function handleColor(key) {
|
||||||
|
colorKey.value = key
|
||||||
|
|
||||||
|
proxy.$refs.pickerColorRef.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择颜色
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function handlePickerColorConfirm(event) {
|
||||||
|
// console.log('event', event)
|
||||||
|
color[colorKey.value] = event
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置标题
|
||||||
|
function handleHeader() {
|
||||||
|
const config = [{
|
||||||
|
name: '一级标题',
|
||||||
|
value: '1'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '二级标题',
|
||||||
|
value: '2'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '三级标题',
|
||||||
|
value: '3'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '四级标题',
|
||||||
|
value: '4'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '五级标题',
|
||||||
|
value: '5'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '六级标题',
|
||||||
|
value: '6'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 多选菜单
|
||||||
|
uni.showActionSheet({
|
||||||
|
itemList: config.map(item => item.name),
|
||||||
|
success: (res) => {
|
||||||
|
editorCtx.value.format('header', config[res.tapIndex].value)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<view class="container ptb30">
|
||||||
|
<view class='toolbar' @click="handleEditor">
|
||||||
|
<!-- 加粗 -->
|
||||||
|
<view class="item" data-name="bold">加粗</view>
|
||||||
|
<!-- 倾斜 -->
|
||||||
|
<view class="item" data-name="italic">倾斜</view>
|
||||||
|
<!-- 下划线 -->
|
||||||
|
<view class="item" data-name="underline">下划线</view>
|
||||||
|
<!-- 删除线 -->
|
||||||
|
<view class="item" data-name="strike">删除线</view>
|
||||||
|
<!-- 左对齐 -->
|
||||||
|
<view class="item" data-name="align" data-value="left">左对齐</view>
|
||||||
|
<!-- 居中 -->
|
||||||
|
<view class="item" data-name="align" data-value="center">居中</view>
|
||||||
|
<!-- 右对齐 -->
|
||||||
|
<view class="item" data-name="align" data-value="right">右对齐</view>
|
||||||
|
<!-- 两端对齐 -->
|
||||||
|
<view class="item" data-name="align" data-value="justify">两端对齐</view>
|
||||||
|
<!-- 清除格式 -->
|
||||||
|
<view class="item" @tap="handleRemoveFormat">清除所有格式</view>
|
||||||
|
<!-- 字体颜色 -->
|
||||||
|
<view class="item df aic" data-name="color" :data-value="color.forecolor">
|
||||||
|
文本颜色
|
||||||
|
<view class="colorBox ml10" :style="{backgroundColor:color.forecolor}"
|
||||||
|
@click.stop="handleColor('forecolor')"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 字体背景 -->
|
||||||
|
<view class="item df aic" data-name="backgroundColor" :data-value="color.backgroundColor">
|
||||||
|
文本背景
|
||||||
|
<view class="colorBox ml10" :style="{backgroundColor: color.backgroundColor}"
|
||||||
|
@click.stop="handleColor('backgroundColor')"></view>
|
||||||
|
</view>
|
||||||
|
<!-- 有序列表 -->
|
||||||
|
<view class="item" data-name="list" data-value="ordered">数字列表</view>
|
||||||
|
<!-- 点列表 -->
|
||||||
|
<view class="item" data-name="list" data-value="bullet">点列表</view>
|
||||||
|
<!-- 撤销 -->
|
||||||
|
<view class="item" @tap="undo">撤销</view>
|
||||||
|
<!-- 重做 -->
|
||||||
|
<view class="item" @tap="redo">重做</view>
|
||||||
|
<!-- 增加缩进 -->
|
||||||
|
<view class="item" data-name="indent" data-value="+1">增加缩进</view>
|
||||||
|
<!-- 减少缩进 -->
|
||||||
|
<view class="item" data-name="indent" data-value="-1">减少缩进</view>
|
||||||
|
<!-- 分割线 -->
|
||||||
|
<view class="item" @tap="handleInsertDivider">分割线</view>
|
||||||
|
<!-- 插入图片 -->
|
||||||
|
<view class="item" @tap="handleImage">插入图片</view>
|
||||||
|
<!-- 大标题 -->
|
||||||
|
<view class="item" @click.stop="handleHeader">插入标题</view>
|
||||||
|
<!-- 下标 -->
|
||||||
|
<view class="item" data-name="script" data-value="sub">下标</view>
|
||||||
|
<!-- 上标 -->
|
||||||
|
<view class="item" data-name="script" data-value="super">上标</view>
|
||||||
|
<!-- 清空 -->
|
||||||
|
<view class="item" @tap="handleClear">清空内容</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 内容 -->
|
||||||
|
<view class="main">
|
||||||
|
<editor id="editor" class="ql-container" placeholder="在此输入产品详情" showImgSize showImgToolbar showImgResize
|
||||||
|
@statuschange="onStatusChange" @ready="onEditorReady">
|
||||||
|
</editor>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 调色板 -->
|
||||||
|
<pickerColor ref="pickerColorRef" @change="handlePickerColorConfirm" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
// 富文本编辑区
|
||||||
|
.container {
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 列表项
|
||||||
|
.item {
|
||||||
|
margin: 0 20rpx 20rpx 0;
|
||||||
|
font-size: 26rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 内容
|
||||||
|
.active {
|
||||||
|
color: #FF9B27;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 内容
|
||||||
|
.main {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 色块
|
||||||
|
.colorBox {
|
||||||
|
width: 26rpx;
|
||||||
|
height: 26rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 富文本区
|
||||||
|
.ql-container {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
padding: 10rpx;
|
||||||
|
font-size: 16px;
|
||||||
|
// background-color: #f4f4f4;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
border: 2rpx solid #ccc;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
<!-- 页面描述 -->
|
|
||||||
<template>
|
|
||||||
<view :style="{ bottom: bottomSafeAreaHeight() }" class="jy-bottom-btn">
|
|
||||||
<button class="bottom-btn" @click="emit('click')">
|
|
||||||
<slot></slot>
|
|
||||||
</button>
|
|
||||||
</view>
|
|
||||||
<!-- 幽灵盒子 -->
|
|
||||||
<view class="jy-bottom-btn-ghost"></view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, defineEmits } from 'vue'
|
|
||||||
import { bottomSafeAreaHeight } from '@/components/public/Mixins.js'
|
|
||||||
const emit = defineEmits(['click'])
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.jy-bottom-btn-ghost {
|
|
||||||
height: 200rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jy-bottom-btn {
|
|
||||||
// 定位
|
|
||||||
bottom: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #ffffff;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom-btn {
|
|
||||||
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
width: 100%;
|
|
||||||
margin: 20rpx;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,124 +0,0 @@
|
||||||
<template>
|
|
||||||
<!-- 头部 左中右 -->
|
|
||||||
<view ref="hs" :class="['dw', background == 'jb' && 'bg']" :style="{ ...jhbStyle }" id="hs">
|
|
||||||
<view class="jy-header-box">
|
|
||||||
<uni-icons class="mlr20" @click="goto" type="left" size="22"></uni-icons>
|
|
||||||
<view class="jy-header-center" @click="emit('center')">
|
|
||||||
<slot name="center">
|
|
||||||
<text class="jy-header-title">{{ title }}</text>
|
|
||||||
</slot>
|
|
||||||
</view>
|
|
||||||
<view class="mlr20">
|
|
||||||
<slot name="right" v-if="isRight">
|
|
||||||
<uni-icons type="more-filled" size="30"></uni-icons>
|
|
||||||
</slot>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<slot name="bottom" />
|
|
||||||
</view>
|
|
||||||
<!-- 幽灵盒子 -->
|
|
||||||
<view class="jy-header-box" :style="{ ...jhbStyle, 'height': `${ylh}` }"></view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
ref,
|
|
||||||
defineExpose,
|
|
||||||
onMounted,
|
|
||||||
nextTick
|
|
||||||
} from 'vue';
|
|
||||||
import {
|
|
||||||
statusBarHeight
|
|
||||||
} from '@/components/public/Mixins.js';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
title: { // 标题
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
isRight: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
// 是否跳转
|
|
||||||
isSkip: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
background: {
|
|
||||||
type: String,
|
|
||||||
default: '#F2F2F2'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const hs = ref(null);
|
|
||||||
const ylh = ref('0px');
|
|
||||||
const updateAltitude = () => {
|
|
||||||
nextTick().then(() => {
|
|
||||||
uni.createSelectorQuery().select('#hs').boundingClientRect((rect) => {
|
|
||||||
ylh.value = rect.height + 'px';
|
|
||||||
}).exec();
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 暴露方法
|
|
||||||
defineExpose({
|
|
||||||
updateAltitude
|
|
||||||
});
|
|
||||||
|
|
||||||
// 清理函数
|
|
||||||
onMounted(() => {
|
|
||||||
updateAltitude()
|
|
||||||
});
|
|
||||||
|
|
||||||
const jhbStyle = ref({
|
|
||||||
'padding-top': `${statusBarHeight()}`,
|
|
||||||
'padding-bottom': `2px`
|
|
||||||
});
|
|
||||||
|
|
||||||
const goto = () => {
|
|
||||||
if (props.isSkip) {
|
|
||||||
uni.navigateBack();
|
|
||||||
}
|
|
||||||
emit('back');
|
|
||||||
};
|
|
||||||
|
|
||||||
const emit = defineEmits(['right', 'center', 'back']);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
// 定位
|
|
||||||
.dw {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg {
|
|
||||||
background: linear-gradient(50deg, #DBFCE9 -7%, #FFFBF3 50%, #FEEEDB 82%, #FEE3CD 102%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.jy-header-box {
|
|
||||||
// 过高之后固定
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
height: 88rpx;
|
|
||||||
z-index: 9;
|
|
||||||
|
|
||||||
text {
|
|
||||||
font-size: 36rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
}
|
|
||||||
|
|
||||||
image {
|
|
||||||
width: 48rpx;
|
|
||||||
height: 48rpx;
|
|
||||||
margin: 0 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<!-- 店家 商品信息 -->
|
|
||||||
<template>
|
|
||||||
<view class="jy-balance-index">
|
|
||||||
<view class="mt20">
|
|
||||||
<JyShopInformation :showStatus="false"></JyShopInformation>
|
|
||||||
<!-- 商品信息 -->
|
|
||||||
<JyCommodityInformation :showType="1"></JyCommodityInformation>
|
|
||||||
<ClickShowMore>
|
|
||||||
<uni-section v-for="(item, index) in list2" :key="index" :title="item.title" titleColor="#999999"
|
|
||||||
titleFontSize="24rpx" />
|
|
||||||
</ClickShowMore>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref } from 'vue'
|
|
||||||
// 商品信息
|
|
||||||
import JyCommodityInformation from '@/components/public/jy-commodity-information'
|
|
||||||
// 店铺信息
|
|
||||||
import JyShopInformation from '@/components/public/jy-shop-information'
|
|
||||||
// 查看更多
|
|
||||||
import ClickShowMore from '@/components/public/click-show-more'
|
|
||||||
|
|
||||||
const list2 = ref([{
|
|
||||||
title: '订单编号:123123123'
|
|
||||||
}, {
|
|
||||||
title: '申请金额:100'
|
|
||||||
}, {
|
|
||||||
title: '申请金额:100'
|
|
||||||
}, {
|
|
||||||
title: '提现时间:2022-02-02'
|
|
||||||
}])
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
::v-deep .uni-section-header__content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,108 +0,0 @@
|
||||||
export const btnG = {
|
|
||||||
// '1 待付款'
|
|
||||||
// '2 待发货'
|
|
||||||
// '3 待收货'
|
|
||||||
// '4 待评价'
|
|
||||||
// '5 售后/退款'
|
|
||||||
// '6 已完成'
|
|
||||||
// '7 已取消'
|
|
||||||
|
|
||||||
//
|
|
||||||
user_order: [{
|
|
||||||
name: '取消订单',
|
|
||||||
type: 'black',
|
|
||||||
value: 'cancel_order',
|
|
||||||
status: [2]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '继续付款',
|
|
||||||
type: 'orange',
|
|
||||||
value: 'continue_paying',
|
|
||||||
status: [2]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '申请退款',
|
|
||||||
type: 'black',
|
|
||||||
value: 'refund',
|
|
||||||
status: [3, 4, 5]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '崔发货',
|
|
||||||
type: 'orange',
|
|
||||||
status: [3]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '查看物流',
|
|
||||||
type: 'black',
|
|
||||||
status: [4]
|
|
||||||
}, {
|
|
||||||
name: '确认收货',
|
|
||||||
type: 'orange',
|
|
||||||
status: [4]
|
|
||||||
}, {
|
|
||||||
name: '评价',
|
|
||||||
type: 'orange',
|
|
||||||
status: [5]
|
|
||||||
}, {
|
|
||||||
name: '删除记录',
|
|
||||||
type: 'black',
|
|
||||||
status: [6]
|
|
||||||
}, {
|
|
||||||
name: '售后详情',
|
|
||||||
type: 'black',
|
|
||||||
|
|
||||||
status: [6]
|
|
||||||
}, {
|
|
||||||
name: '钱款去向',
|
|
||||||
type: 'black',
|
|
||||||
value: 'money_whereabouts',
|
|
||||||
status: [6]
|
|
||||||
}, {
|
|
||||||
name: '平台介入',
|
|
||||||
type: 'orange',
|
|
||||||
status: [6]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
business_order: [{
|
|
||||||
name: '改价',
|
|
||||||
type: 'orange',
|
|
||||||
value: 'change_price',
|
|
||||||
status: [2]
|
|
||||||
}, {
|
|
||||||
name: '发货',
|
|
||||||
type: 'orange',
|
|
||||||
value: 'delivery',
|
|
||||||
status: [3]
|
|
||||||
}, {
|
|
||||||
name: '拒绝退款',
|
|
||||||
type: 'black',
|
|
||||||
value: 'refund_refund',
|
|
||||||
status: [5]
|
|
||||||
}, {
|
|
||||||
name: '同意退款',
|
|
||||||
type: 'black',
|
|
||||||
value: 'agree_refund',
|
|
||||||
status: [5]
|
|
||||||
}, {
|
|
||||||
name: '联系用户',
|
|
||||||
type: 'orange',
|
|
||||||
value: 'contact_users',
|
|
||||||
status: [5]
|
|
||||||
}],
|
|
||||||
merchandise_control: [{
|
|
||||||
name: '上架',
|
|
||||||
type: 'black',
|
|
||||||
value: 'grounding',
|
|
||||||
status: [1]
|
|
||||||
}, {
|
|
||||||
name: '下架',
|
|
||||||
type: 'black',
|
|
||||||
value: 'discontinue',
|
|
||||||
status: [1]
|
|
||||||
}, {
|
|
||||||
name: '编辑',
|
|
||||||
type: 'orange',
|
|
||||||
value: 'edit',
|
|
||||||
status: [1]
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
<template>
|
|
||||||
<JyPopup ref="popup" showSave @click="savePost" title="填写快递单号">
|
|
||||||
<view class="jy-delivery">
|
|
||||||
<uni-forms :modelValue="formData">
|
|
||||||
<uni-forms-item label="快递公司" name="company">
|
|
||||||
<uni-easyinput :inputBorder="false" type="text" v-model="formData.company" placeholder="输入快递公司" />
|
|
||||||
</uni-forms-item>
|
|
||||||
<uni-forms-item label="快递单号" name="numbers">
|
|
||||||
<uni-easyinput :inputBorder="false" type="text" suffixIcon="scan" v-model="formData.numbers"
|
|
||||||
placeholder="输入快递单号" @suffix="scan" />
|
|
||||||
</uni-forms-item>
|
|
||||||
</uni-forms>
|
|
||||||
</view>
|
|
||||||
</JyPopup>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, reactive, defineEmits } from 'vue'
|
|
||||||
import JyPopup from '@/components/public/jy-popup'
|
|
||||||
const popup = ref(null)
|
|
||||||
const emit = defineEmits(['savePost'])
|
|
||||||
const formData = reactive({
|
|
||||||
company: '',
|
|
||||||
numbers: ''
|
|
||||||
})
|
|
||||||
|
|
||||||
const scan = async () => {
|
|
||||||
try {
|
|
||||||
const result = await uni.scanCode();
|
|
||||||
if (result && result.result) {
|
|
||||||
// 提取快递单号
|
|
||||||
const extractedOrderNumber = extractOrderNumber(result.result);
|
|
||||||
formData.numbers = extractedOrderNumber;
|
|
||||||
} else {
|
|
||||||
uni.showToast({
|
|
||||||
title: '扫码结果为空',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
uni.showToast({
|
|
||||||
title: '扫码失败',
|
|
||||||
icon: 'none'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// 提取快递单号的函数
|
|
||||||
const extractOrderNumber = (scanResult) => {
|
|
||||||
// 假设扫码结果中的快递单号在字符串的开头
|
|
||||||
return scanResult.split('\n')[0];
|
|
||||||
};
|
|
||||||
const open = () => {
|
|
||||||
popup.value.open()
|
|
||||||
}
|
|
||||||
const savePost = () => {
|
|
||||||
emit('savePost')
|
|
||||||
}
|
|
||||||
defineExpose({
|
|
||||||
open
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.jy-delivery {
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,245 +0,0 @@
|
||||||
<!-- 订单卡片 -->
|
|
||||||
<template>
|
|
||||||
<view class="jy-order-card">
|
|
||||||
<!-- 商家上货看的 -->
|
|
||||||
<template v-if="type == 'merchandise_control'">
|
|
||||||
<!-- 商品信息 -->
|
|
||||||
<JyCommodityInformation class="mb40" :showType="5"></JyCommodityInformation>
|
|
||||||
</template>
|
|
||||||
<!-- 用户订单 -->
|
|
||||||
<template v-if="type == 'user_order'">
|
|
||||||
<!-- 卖家头像 -->
|
|
||||||
<JyShopInformation :showStatus="true"></JyShopInformation>
|
|
||||||
<!-- 商品信息 -->
|
|
||||||
<JyCommodityInformation :showType="1"></JyCommodityInformation>
|
|
||||||
<!-- 支付价格 -->
|
|
||||||
<uni-section>
|
|
||||||
<template v-slot:right>
|
|
||||||
<view class="df aic">
|
|
||||||
<text class="c333 f28">应付：</text>
|
|
||||||
<text class="price f20">￥</text>
|
|
||||||
<text class="price f32">5.00</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</uni-section>
|
|
||||||
<!-- 特俗情况状态 -->
|
|
||||||
<uni-section v-if="orderInfo.order_status_text == 1">
|
|
||||||
<template v-slot:right>
|
|
||||||
<view class="df aic">
|
|
||||||
<text> 支付剩余时间：</text>
|
|
||||||
<uni-countdown :show-day="false" :showHour="false" :minute="12" :second="12" />
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</uni-section>
|
|
||||||
</template>
|
|
||||||
<!-- 商家订单 -->
|
|
||||||
<template v-if="type == 'business_order'">
|
|
||||||
<!-- 买家头像 -->
|
|
||||||
<JyShopInformation :showStatus="true"></JyShopInformation>
|
|
||||||
<!-- 商品信息 -->
|
|
||||||
<JyCommodityInformation :showType="1"></JyCommodityInformation>
|
|
||||||
<!-- 收款价格 -->
|
|
||||||
<uni-section>
|
|
||||||
<template v-slot:right>
|
|
||||||
<view class="df aic">
|
|
||||||
<text class="c333 f28">实收：</text>
|
|
||||||
<text class="price f20">￥</text>
|
|
||||||
<text class="price f32">5.00</text>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</uni-section>
|
|
||||||
<!-- 特俗情况状态 -->
|
|
||||||
<!-- 已发货 -->
|
|
||||||
<template v-if="orderInfo.order_status_text == 4">
|
|
||||||
<JyCommodityAddress :shopEdit="false"></JyCommodityAddress>
|
|
||||||
<JyCommodityLogisticsCard></JyCommodityLogisticsCard>
|
|
||||||
</template>
|
|
||||||
<!-- 售后退款 -->
|
|
||||||
<template v-if="orderInfo.order_status_text == 5">
|
|
||||||
<view class="df mb40">
|
|
||||||
<view class="c333 f28 fw600 wsn">收货地址：</view>
|
|
||||||
<view class="df fdc">
|
|
||||||
<!-- 收获地址 -->
|
|
||||||
<view class="c333 f28">收货地址收货地址收货地址收货地址收货地址收货地址收货地址</view>
|
|
||||||
<!-- 姓名电话 -->
|
|
||||||
<view class="f24 c666">张三 123456789</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="df mb40">
|
|
||||||
<view class="c333 f28 fw600 wsn">收货地址：</view>
|
|
||||||
<view class="c333 f28">
|
|
||||||
什么什么原因什么什么原因什么什么原因什么什么原因
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
<!-- 各个情况状态按钮 -->
|
|
||||||
<view class="btn-group" v-if="btnG['merchandise_control'].length > 0">
|
|
||||||
<view class="btn-for" v-for="(item, index) in btnG[type]" :key="index"
|
|
||||||
@click="btnFn[type][item.value](item)">
|
|
||||||
<!-- 数组中是否存在某个直 存在true不在false -->
|
|
||||||
<view class="btn-item" :class="[item.type, {
|
|
||||||
'btn-item4': item.name.length == 4,
|
|
||||||
'btn-item3': item.name.length == 3,
|
|
||||||
'btn-item2': item.name.length == 2
|
|
||||||
}]" v-if="item.status.includes(orderInfo.order_status_text)">
|
|
||||||
<text>{{ item.name }}</text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<delivery ref="deliveryRef" @savePost="savePost"></delivery>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import {
|
|
||||||
ref
|
|
||||||
} from 'vue'
|
|
||||||
// 商品信息
|
|
||||||
import JyCommodityInformation from '@/components/public/jy-commodity-information'
|
|
||||||
// 店铺信息
|
|
||||||
import JyShopInformation from '@/components/public/jy-shop-information'
|
|
||||||
// 商品物流卡片
|
|
||||||
import JyCommodityLogisticsCard from '@/components/public/jy-commodity-logistics-card'
|
|
||||||
// 收货地址
|
|
||||||
import JyCommodityAddress from '@/components/public/jy-commodity-address'
|
|
||||||
|
|
||||||
import delivery from './delivery.vue'
|
|
||||||
import {
|
|
||||||
btnG
|
|
||||||
} from './btnGroup.js'
|
|
||||||
const deliveryRef = ref(null)
|
|
||||||
const popupState = ref(null)
|
|
||||||
const savePost = () => {
|
|
||||||
console.log('保存');
|
|
||||||
}
|
|
||||||
const props = defineProps({
|
|
||||||
// 订单信息
|
|
||||||
orderInfo: {
|
|
||||||
type: Object,
|
|
||||||
default: () => {
|
|
||||||
return {
|
|
||||||
shop_logo: '',
|
|
||||||
shop_name: '123',
|
|
||||||
order_status_text: 3,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// type 类型只能是 user_order | business_order | merchandise_control
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
// const type = 'business_order'
|
|
||||||
// 初始化 按钮 数据
|
|
||||||
const btnGroup = ref(btnG[props.type])
|
|
||||||
// 同意管理按钮方法
|
|
||||||
const btnFn = {
|
|
||||||
merchandise_control: {
|
|
||||||
|
|
||||||
},
|
|
||||||
business_order: {
|
|
||||||
// 发货模块
|
|
||||||
delivery: () => {
|
|
||||||
deliveryRef.value.open();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
user_order: {
|
|
||||||
cancel_order: () => {
|
|
||||||
// 显示模态弹窗
|
|
||||||
uni.showModal({
|
|
||||||
title: '提示',
|
|
||||||
content: '确定要取消订单吗？',
|
|
||||||
success: function (res) {
|
|
||||||
if (res.confirm) {
|
|
||||||
console.log('用户点击确定');
|
|
||||||
// 在这里执行取消订单的操作
|
|
||||||
} else if (res.cancel) {
|
|
||||||
console.log('用户点击取消');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
continue_paying: () => {
|
|
||||||
uni.showModal({
|
|
||||||
title: '提示',
|
|
||||||
content: '确定要继续支付吗？',
|
|
||||||
success: function (res) {
|
|
||||||
if (res.confirm) {
|
|
||||||
console.log('用户点击确定');
|
|
||||||
// 在这里执行继续支付的操作
|
|
||||||
} else if (res.cancel) {
|
|
||||||
console.log('用户点击取消');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
refund: () => {
|
|
||||||
// 跳转退款页面
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/shop/order/refund/index'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
// 钱还去向
|
|
||||||
money_whereabouts: () => {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/shop/order/money_whereabouts/index'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.jy-order-card {
|
|
||||||
background-color: #ffffff;
|
|
||||||
padding: 16rpx 24rpx;
|
|
||||||
border-radius: 25rpx;
|
|
||||||
margin-bottom: 40rpx;
|
|
||||||
|
|
||||||
.price {
|
|
||||||
font-size: 36rpx;
|
|
||||||
color: #FF7F37;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
.btn-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 28rpx;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
border-radius: 1282rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-item4 {
|
|
||||||
padding: 12rpx 24rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-item3 {
|
|
||||||
padding: 12rpx 36rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-item2 {
|
|
||||||
padding: 12rpx 48rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.black {
|
|
||||||
color: #333333;
|
|
||||||
border: 2rpx solid #999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
.orange {
|
|
||||||
color: #F59957;
|
|
||||||
border: 2rpx solid #F59957;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
<!-- 页面描述 -->
|
|
||||||
<template>
|
|
||||||
<uni-popup ref="jyPopup" :type="type">
|
|
||||||
<view class="jy-popup-content f1 bfff pr" v-if="type == 'center'">
|
|
||||||
<slot name="title">
|
|
||||||
<view class="title fw600">
|
|
||||||
<text>{{ title }}</text>
|
|
||||||
</view>
|
|
||||||
</slot>
|
|
||||||
<uni-icons @click="close" class="close-btn c999" type="closeempty" size="20"></uni-icons>
|
|
||||||
<view class="p25">
|
|
||||||
<slot />
|
|
||||||
<button v-if="showSave" class="save-btn" @click="savePost">保存</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
<view class="jy-popup-bottom f1 bfff pr" v-if="type == 'bottom'"
|
|
||||||
:style="{ 'padding-bottom': `${bottomSafeAreaHeight(true) + 20}px` }">
|
|
||||||
<!-- 头部标题 + 关闭 空格-->
|
|
||||||
<slot name="title">
|
|
||||||
<view class="title fw600">
|
|
||||||
<text>{{ title }}</text>
|
|
||||||
</view>
|
|
||||||
</slot>
|
|
||||||
<uni-icons @click="close" class="close c999" type="closeempty" size="20"></uni-icons>
|
|
||||||
<view :style="{ 'height': `${screenHeight(true) * 0.7}px` }">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
<button v-if="showSave" class="save-btn" @click="emit('savePost')">{{ saveTitle }}</button>
|
|
||||||
</view>
|
|
||||||
</uni-popup>
|
|
||||||
</template>
|
|
||||||
<script setup>
|
|
||||||
import { ref, defineEmits, defineExpose } from 'vue'
|
|
||||||
|
|
||||||
import { bottomSafeAreaHeight, screenHeight } from '@/components/public/Mixins.js'
|
|
||||||
const jyPopup = ref(null)
|
|
||||||
const emit = defineEmits(['savePost'])
|
|
||||||
defineProps({
|
|
||||||
title: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
showSave: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
saveTitle: {
|
|
||||||
type: String,
|
|
||||||
default: '保存'
|
|
||||||
},
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'content'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
const close = () => {
|
|
||||||
jyPopup.value.close()
|
|
||||||
}
|
|
||||||
const open = () => {
|
|
||||||
jyPopup.value.open()
|
|
||||||
}
|
|
||||||
defineExpose({
|
|
||||||
close, open
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
<style scoped lang="scss">
|
|
||||||
.jy-popup-content {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 30rpx;
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 52rpx;
|
|
||||||
line-height: 52rpx;
|
|
||||||
width: 52rpx;
|
|
||||||
background: #D8D8D8;
|
|
||||||
font-size: 30rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transform: translate(50%, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.save-btn {
|
|
||||||
background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
margin: 0 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 80rpx;
|
|
||||||
// 底部边框显示
|
|
||||||
color: #3D3D3D;
|
|
||||||
font-size: 32rpx;
|
|
||||||
border-bottom: 1px solid #E5E5E5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jy-popup-bottom {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: 30rpx 30rpx 0 0;
|
|
||||||
|
|
||||||
.close {
|
|
||||||
position: absolute;
|
|
||||||
right: 20rpx;
|
|
||||||
top: 20rpx;
|
|
||||||
display: inline-block;
|
|
||||||
width: 50rpx;
|
|
||||||
height: 80rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
<script setup>
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
reactive,
|
||||||
|
defineEmits,
|
||||||
|
defineExpose,
|
||||||
|
getCurrentInstance,
|
||||||
|
} from 'vue'
|
||||||
|
const {
|
||||||
|
proxy
|
||||||
|
} = getCurrentInstance()
|
||||||
|
|
||||||
|
//
|
||||||
|
const emit = defineEmits(['change'])
|
||||||
|
|
||||||
|
// 颜色数组
|
||||||
|
const colorArr = reactive([
|
||||||
|
['#000000', '#111111', '#222222', '#333333', '#444444', '#666666', '#999999', '#CCCCCC', '#EEEEEE',
|
||||||
|
'#FFFFFF'
|
||||||
|
],
|
||||||
|
['#ff0000', '#ff0033', '#ff3399', '#ff33cc', '#cc00ff', '#9900ff', '#cc00cc', '#cc0099', '#cc3399',
|
||||||
|
'#cc0066'
|
||||||
|
],
|
||||||
|
['#cc3300', '#cc6600', '#ff9933', '#ff9966', '#ff9999', '#ff99cc', '#ff99ff', '#cc66ff', '#9966ff',
|
||||||
|
'#cc33ff'
|
||||||
|
],
|
||||||
|
['#663300', '#996600', '#996633', '#cc9900', '#a58800', '#cccc00', '#ffff66', '#ffff99', '#ffffcc',
|
||||||
|
'#ffcccc'
|
||||||
|
],
|
||||||
|
['#336600', '#669900', '#009900', '#009933', '#00cc00', '#66ff66', '#339933', '#339966', '#009999',
|
||||||
|
'#33cccc'
|
||||||
|
],
|
||||||
|
['#003366', '#336699', '#3366cc', '#0099ff', '#000099', '#0000cc', '#660066', '#993366', '#993333',
|
||||||
|
'#800000'
|
||||||
|
]
|
||||||
|
])
|
||||||
|
// 已选择的颜色
|
||||||
|
const pickerColor = ref('#ff0000')
|
||||||
|
// 已选择的数组下标
|
||||||
|
const pickerArr = reactive([-1, -1])
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择
|
||||||
|
* @param {Object} event
|
||||||
|
*/
|
||||||
|
function picker(event) {
|
||||||
|
let data = event.currentTarget.dataset;
|
||||||
|
|
||||||
|
pickerColor.value = data.color;
|
||||||
|
Object.assign(pickerArr, [data.index, data.i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 选择
|
||||||
|
function handleCofirm() {
|
||||||
|
emit("change", pickerColor.value);
|
||||||
|
close()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开
|
||||||
|
function open() {
|
||||||
|
proxy.$refs.palette.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 关闭
|
||||||
|
function close() {
|
||||||
|
proxy.$refs.palette.close()
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({
|
||||||
|
open,
|
||||||
|
close
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<uni-popup ref="palette" type="bottom">
|
||||||
|
<view class="pop">
|
||||||
|
<view class="flex_col" style="margin-bottom: 20rpx;">
|
||||||
|
<view class="preview" :style="{'backgroundColor':pickerColor}"></view>
|
||||||
|
<view class="value">
|
||||||
|
<text v-if="pickerColor">颜色值：{{pickerColor}}</text>
|
||||||
|
</view>
|
||||||
|
<view class="ok" @click="handleCofirm">确定</view>
|
||||||
|
</view>
|
||||||
|
<view class="list flex_col" v-for="(item,index) in colorArr" :key="index">
|
||||||
|
<view v-for="(secItem,secIndex) in item" :key="secIndex" :style="{'backgroundColor':secItem}"
|
||||||
|
:data-color="secItem" :data-index="index" :data-i="secIndex"
|
||||||
|
:class="{'active':(index==pickerArr[0] && secIndex==pickerArr[1])}" @click="picker"></view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</uni-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.shade {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop {
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20rpx 20rpx 10rpx 20rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex_col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list>view {
|
||||||
|
width: 60rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-shadow: 0 0 2px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list .active {
|
||||||
|
box-shadow: 0 0 2px #09f;
|
||||||
|
transform: scale(1.05, 1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
width: 180rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
margin: 0 40rpx;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ok {
|
||||||
|
width: 160rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #ff9933;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ok:active {
|
||||||
|
background-color: rgb(255, 107, 34);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -12,6 +12,9 @@
|
||||||
import api from '@/api/index.js'
|
import api from '@/api/index.js'
|
||||||
// 工具库
|
// 工具库
|
||||||
import util from '@/common/js/util.js'
|
import util from '@/common/js/util.js'
|
||||||
|
// 编辑器
|
||||||
|
import editorArea from '@/components/public/editor/editor'
|
||||||
|
|
||||||
// 表单
|
// 表单
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
id: '',
|
id: '',
|
||||||
|
|
@ -323,8 +326,8 @@
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="main area editor" v-if="0">
|
<view class="main area editor">
|
||||||
<editor class="mtb30" placeholder="在此输入产品详情" />
|
<editorArea />
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -352,6 +352,14 @@ call_type 通话类型 2为视频，1是音频
|
||||||
|
|
||||||
子账号不能登录app 并且区分身份标识
|
子账号不能登录app 并且区分身份标识
|
||||||
|
|
||||||
|
文本
|
||||||
|
加粗 倾斜 下划线 删除线 字号加大 字号变小
|
||||||
|
左对齐 居中 右对齐 两端对齐
|
||||||
|
清除格式 重做 取消重做 清空内容
|
||||||
|
字体颜色 字体选背景
|
||||||
|
添加日期
|
||||||
|
无序列表 数字列表 点列表
|
||||||
|
缩进 取消缩进 分割线 标题 反向输入
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,8 @@ import {
|
||||||
} from 'vite';
|
} from 'vite';
|
||||||
import uni from '@dcloudio/vite-plugin-uni';
|
import uni from '@dcloudio/vite-plugin-uni';
|
||||||
|
|
||||||
let target = 'http://91f.xyz:8080'
|
// let target = 'http://91f.xyz:8080'
|
||||||
|
let target = 'http://y5fpgf.natappfree.cc'
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [uni()],
|
plugins: [uni()],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue