商品详情发布富文本
This commit is contained in:
parent
b33123604d
commit
fcdc7ad20a
|
|
@ -6,7 +6,8 @@ const config = {
|
|||
// host: 'h5api',
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
host: 'http://91f.xyz:8080',
|
||||
// host: 'http://91f.xyz:8080',
|
||||
host: 'http://y5fpgf.natappfree.cc',
|
||||
// #endif
|
||||
// 支付方式配置
|
||||
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 util from '@/common/js/util.js'
|
||||
// 编辑器
|
||||
import editorArea from '@/components/public/editor/editor'
|
||||
|
||||
// 表单
|
||||
const form = reactive({
|
||||
id: '',
|
||||
|
|
@ -323,8 +326,8 @@
|
|||
</view>
|
||||
</view>
|
||||
|
||||
<view class="main area editor" v-if="0">
|
||||
<editor class="mtb30" placeholder="在此输入产品详情" />
|
||||
<view class="main area editor">
|
||||
<editorArea />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
|
|||
|
|
@ -352,6 +352,14 @@ call_type 通话类型 2为视频，1是音频
|
|||
|
||||
子账号不能登录app 并且区分身份标识
|
||||
|
||||
文本
|
||||
加粗 倾斜 下划线 删除线 字号加大 字号变小
|
||||
左对齐 居中 右对齐 两端对齐
|
||||
清除格式 重做 取消重做 清空内容
|
||||
字体颜色 字体选背景
|
||||
添加日期
|
||||
无序列表 数字列表 点列表
|
||||
缩进 取消缩进 分割线 标题 反向输入
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@ import {
|
|||
} from 'vite';
|
||||
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({
|
||||
plugins: [uni()],
|
||||
|
|
|
|||
Loading…
Reference in New Issue