forked from zhongyuanhaiju/uniapp
parent
9417a6fa7e
commit
17289e08a2
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
<template>
|
||||
<view class="uni-popup-dialog">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||
<slot>
|
||||
<text class="uni-dialog-content-text">{{content}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-else class="uni-dialog-content">
|
||||
<slot>
|
||||
<input class="uni-dialog-input" v-model="val" :type="inputType" :placeholder="placeholderText" :focus="focus" >
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" @click="closeDialog">
|
||||
<text class="uni-dialog-button-text">{{closeText}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button uni-border-left" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup-new/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup-new/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [popup],
|
||||
emits:['confirm','close'],
|
||||
props: {
|
||||
inputType:{
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cancelText:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
confirmText:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
focus: false,
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return this.confirmText || t("uni-popup.ok")
|
||||
},
|
||||
closeText() {
|
||||
return this.cancelText || t("uni-popup.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder")
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
this.val = val
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.disableMask()
|
||||
// this.popup.closeMask()
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.focus = true
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
if (this.mode === 'input'){
|
||||
this.$emit('confirm', this.val)
|
||||
}else{
|
||||
this.$emit('confirm')
|
||||
}
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
close(){
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 11px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,474 @@
|
|||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
|
||||
<view @touchstart="touchstart">
|
||||
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
|
||||
:duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
|
||||
:show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper" :style="{ backgroundColor: bg }" :class="[popupstyle]" @click="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress v-if="maskShow" @esc="onTap" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @value message 消息提示
|
||||
* @value dialog 对话框
|
||||
* @value share 底部分享示例
|
||||
* @property {Boolean} animation = [true|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
|
||||
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
|
||||
* @property {String} backgroundColor 主窗口背景色
|
||||
* @property {String} maskBackgroundColor 蒙版颜色
|
||||
* @property {Boolean} safeArea 是否适配底部安全区
|
||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
||||
* @event {Function} maskClick 点击遮罩触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopup',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
emits: ['change', 'maskClick'],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ，使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type]) return
|
||||
this[this.config[type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal]) return
|
||||
this[this.config[this.type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
message: 'top',
|
||||
dialog: 'center',
|
||||
share: 'bottom'
|
||||
},
|
||||
maskClass: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
|
||||
return 'transparent'
|
||||
}
|
||||
return this.backgroundColor
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = uni.getSystemInfoSync()
|
||||
this.popupWidth = windowWidth
|
||||
this.popupHeight = windowHeight + (windowTop || 0)
|
||||
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异，需要框架修复
|
||||
if (safeArea && this.safeArea) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.safeAreaInsets = safeAreaInsets.bottom
|
||||
// #endif
|
||||
} else {
|
||||
this.safeAreaInsets = 0
|
||||
}
|
||||
}
|
||||
fixSize()
|
||||
// #ifdef H5
|
||||
// window.addEventListener('resize', fixSize)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// window.removeEventListener('resize', fixSize)
|
||||
// })
|
||||
// #endif
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
created() {
|
||||
// this.mkclick = this.isMaskClick || this.maskClick
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
// TODO 处理 message 组件生命周期异常的问题
|
||||
this.messageChild = null
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor
|
||||
},
|
||||
methods: {
|
||||
setH5Visible() {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = 'visible'
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 公用方法，不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false
|
||||
},
|
||||
/**
|
||||
* 公用方法，遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
// #ifndef APP-NVUE
|
||||
e.stopPropagation()
|
||||
// #endif
|
||||
this.clearPropagation = true
|
||||
},
|
||||
|
||||
open(direction) {
|
||||
// fix by mehaotian 处理快速打开关闭的情况
|
||||
if (this.showPopup) {
|
||||
clearTimeout(this.timer)
|
||||
this.showPopup = false
|
||||
}
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error('缺少类型：', direction)
|
||||
return
|
||||
}
|
||||
this[this.config[direction]]()
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: direction
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.type
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// // 自定义关闭事件
|
||||
// this.customOpen && this.customClose()
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
},
|
||||
// TODO 处理冒泡事件，头条的冒泡事件有问题 ，先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false
|
||||
},
|
||||
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
// fix by mehaotian 兼容 nvue
|
||||
this.clearPropagation = false
|
||||
return
|
||||
}
|
||||
this.$emit('maskClick')
|
||||
if (!this.mkclick) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
this.$nextTick(() => {
|
||||
if (this.messageChild && this.type === 'message') {
|
||||
this.messageChild.timerClose()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + 'px',
|
||||
backgroundColor: this.bg
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = 'center'
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
/* #endif */
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center'
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = 'left'
|
||||
this.ani = ['slide-left']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = 'right'
|
||||
this.ani = ['slide-right']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ，后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
|
||||
/* #endif */
|
||||
&.top,
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
|
||||
/* iphonex 等安全区设置，底部安全区适配 */
|
||||
/* #ifndef APP-NVUE */
|
||||
// padding-bottom: constant(safe-area-inset-bottom);
|
||||
// padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
padding-top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: 0;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixforpc-z-index {
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
16
pages.json
16
pages.json
|
|
@ -1021,13 +1021,17 @@
|
|||
// #endif
|
||||
"navigationBarTitleText": "我的小店"
|
||||
}
|
||||
},
|
||||
//****************** 通知消息 ******************
|
||||
{
|
||||
"path": "message/index",
|
||||
"style": {
|
||||
// #ifdef H5
|
||||
"navigationStyle": "custom",
|
||||
// #endif
|
||||
"navigationBarTitleText": "消息中心"
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,76 +1,76 @@
|
|||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view class="details">
|
||||
<!--顶部内容-->
|
||||
<view class="top">
|
||||
<image class="top-image" :src="$util.img('upload/1/common/images/20230216/20230216050332167653821225076.png')" mode="widthFix"></image>
|
||||
<view class="top-count-down">
|
||||
<image class="top-down-image" :src="$util.img('public/static/img/futures/details_down_bg.png')" mode="widthFix"></image>
|
||||
<view class="top-down-text">
|
||||
<image class="top-down-text-image" :src="$util.img('public/static/img/futures/details_down_icon.png')" mode="widthFix"></image>
|
||||
正在销售
|
||||
</view>
|
||||
<view class="top-count-down-time">
|
||||
<text class="count-down-time">{{ h }}</text>:
|
||||
<text class="count-down-time">{{ i }}</text>:
|
||||
<text class="count-down-time">{{ s }}</text>
|
||||
<view v-if="Object.keys(info).length > 0">
|
||||
<!--顶部内容-->
|
||||
<view class="top">
|
||||
<image class="top-image" :src="$util.img(info.goods_image)" mode="widthFix"></image>
|
||||
<view class="top-count-down">
|
||||
<image class="top-down-image" :src="$util.img('public/static/img/futures/details_down_bg.png')" mode="widthFix"></image>
|
||||
<view class="top-down-text">
|
||||
<image class="top-down-text-image" :src="$util.img('public/static/img/futures/details_down_icon.png')" mode="widthFix"></image>
|
||||
正在销售
|
||||
</view>
|
||||
<view class="top-count-down-time" v-if="h > 0 || i > 0 || s > 0">
|
||||
<text class="count-down-time">{{ h }}</text>:
|
||||
<text class="count-down-time">{{ i }}</text>:
|
||||
<text class="count-down-time">{{ s }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--参数信息-->
|
||||
<view class="params-info">
|
||||
<view class="title">{{ info.goods_name }}</view>
|
||||
<view class="info-item">
|
||||
售卖价格：<text class="info-num"><text class="unit">￥</text>{{ info.market_price }}/{{ info.unit || '件' }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
采购价格：<text class="buy-price"><text class="unit">￥</text>{{ info.price }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-block">
|
||||
采购数量：<text class="info-num">{{ info.total }}{{ info.unit || '件' }}</text>
|
||||
</view>
|
||||
<view class="info-block">
|
||||
销售商：<text class="info-num">{{ info.seller_nickname }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--商品详情富文本-->
|
||||
<view class="goods-detail">
|
||||
<view class="detail-top">
|
||||
<view class="left">采购商品详情</view>
|
||||
<view class="right" @click="details_show = !details_show">
|
||||
展开
|
||||
<i v-if="details_show" class="icondiy icon-system-jiantoushang"></i>
|
||||
<i v-else class="icondiy icon-system-jiantouxia"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-detail-content">
|
||||
<uni-transition
|
||||
id="goodsDetailContent"
|
||||
ref="detail"
|
||||
:show="details_show"
|
||||
mode-class="slide-top"
|
||||
:duration="2000"
|
||||
>
|
||||
<view v-html="info.goods_content"></view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
</view>
|
||||
<!--按钮-->
|
||||
<view class="bottom-buttons">
|
||||
<view class="button-item" @click="editRemark">添加备注</view>
|
||||
<view class="button-item" @click="buy">立即采购</view>
|
||||
</view>
|
||||
<!--添加备注内容-->
|
||||
<uni-popup ref="orderRemarks" type="dialog" class="order-remarks-content">
|
||||
<uni-popup-dialog ref="inputClose" mode="input" placeholder="请输入订单备注" @close="$refs.orderRemarks.close()" @confirm="confirmRemarks"></uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
<!--参数信息-->
|
||||
<view class="params-info">
|
||||
<view class="title">脑黄金为智慧加分 澳大利亚进口保健品 适合中老年人长期熬夜人群使用</view>
|
||||
<view class="info-item">
|
||||
售卖价格：<text class="info-num"><text class="unit">￥</text>1200/件</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
采购价格：<text class="buy-price"><text class="unit">￥</text>600.34</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-block">
|
||||
采购数量：<text class="info-num">12件</text>
|
||||
</view>
|
||||
<view class="info-block">
|
||||
销售商：<text class="info-num">一颗柚子</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<ns-empty :isIndex="false" text="未到秒杀时间"></ns-empty>
|
||||
</view>
|
||||
<!--商品详情富文本-->
|
||||
<view class="goods-detail">
|
||||
<view class="detail-top">
|
||||
<view class="left">采购商品详情</view>
|
||||
<view class="right" @click="details_show = !details_show">
|
||||
展开
|
||||
<i v-if="details_show" class="icondiy icon-system-jiantoushang"></i>
|
||||
<i v-else class="icondiy icon-system-jiantouxia"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goods-detail-content">
|
||||
<uni-transition
|
||||
id="goodsDetailContent"
|
||||
ref="detail"
|
||||
:show="details_show"
|
||||
mode-class="slide-top"
|
||||
:duration="2000"
|
||||
>
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />这里是富文本的监听内容<br />
|
||||
</uni-transition>
|
||||
</view>
|
||||
</view>
|
||||
<!--按钮-->
|
||||
<view class="bottom-buttons">
|
||||
<view class="button-item">添加备注</view>
|
||||
<view class="button-item">立即采购</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!--登录弹框-->
|
||||
<ns-login ref="login"></ns-login>
|
||||
|
|
@ -81,10 +81,18 @@
|
|||
|
||||
<script>
|
||||
import uniTransition from '@/components/uni-transition/uni-transition.vue';
|
||||
import uniPopup from '@/components/uni-popup-new/uni-popup.vue';
|
||||
import uniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
uniTransition,
|
||||
uniPopup,
|
||||
uniPopupDialog
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id: 0,
|
||||
// 倒计时
|
||||
end_time: 1680170346,// 结束时间 时间戳
|
||||
diff_time: 0,
|
||||
|
|
@ -93,26 +101,47 @@ export default {
|
|||
s: '00',
|
||||
interval: '',
|
||||
// 商品详情是否显示
|
||||
details_show: false,
|
||||
|
||||
details_show: true,
|
||||
info: {},
|
||||
order_remarks: '',
|
||||
|
||||
};
|
||||
},
|
||||
components: {
|
||||
uniTransition
|
||||
},
|
||||
mixins: [],
|
||||
onLoad(option) {},
|
||||
onLoad(option) {
|
||||
this.id = option.id;
|
||||
this.getDetail(option.id);
|
||||
},
|
||||
onShow() {},
|
||||
onReady(){
|
||||
// 判断是否登录
|
||||
if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/futures/seckill');
|
||||
// 开启倒计时
|
||||
this.countDown();
|
||||
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
},
|
||||
methods: {
|
||||
// 获取商品列表
|
||||
getDetail(id) {
|
||||
this.$api.sendRequest({
|
||||
url: '/futures/api/futures/detail',
|
||||
data: {
|
||||
id: id
|
||||
},
|
||||
success: res => {
|
||||
if(parseInt(res.code) === 0){
|
||||
this.info = res.data;
|
||||
this.end_time = parseInt(res.data.end_time);
|
||||
// 开启倒计时
|
||||
this.countDown();
|
||||
}
|
||||
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
},
|
||||
fail: res => {
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 倒计时
|
||||
countDown(){
|
||||
this.interval = setInterval(() => {
|
||||
|
|
@ -125,14 +154,30 @@ export default {
|
|||
this.i = parseInt(result.i);
|
||||
this.s = parseInt(result.s);
|
||||
}, 1000)
|
||||
},
|
||||
// 点击添加备注
|
||||
editRemark(){
|
||||
this.$refs.orderRemarks.open('center')
|
||||
},
|
||||
// 添加备注
|
||||
confirmRemarks(value){
|
||||
this.order_remarks = value || '';
|
||||
this.$refs.orderRemarks.close();
|
||||
},
|
||||
// 立即采购
|
||||
buy(){
|
||||
uni.setStorage({
|
||||
key: 'futuresOrderCreateData',
|
||||
data: {
|
||||
futures_id: this.id,
|
||||
order_remarks: this.order_remarks
|
||||
},
|
||||
success: () => {
|
||||
this.isSub = false;//防抖
|
||||
this.$util.redirectTo('/pages_promotion/futures/payment');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
onBackPress(options) {
|
||||
if (options.from === 'navigateBack') return false;
|
||||
|
|
@ -145,8 +190,9 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.details{
|
||||
background: #f5f5f5;// #f5f5f5
|
||||
min-height: 100vh;
|
||||
min-height: calc(100vh - 110rpx);
|
||||
width: 100vw;
|
||||
padding-bottom: 110rpx;
|
||||
.top{
|
||||
height: 100vw;
|
||||
position: relative;
|
||||
|
|
@ -333,4 +379,19 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
/deep/ .order-remarks-content{
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(0,0,0,0.6);
|
||||
.uni-dialog-input{
|
||||
min-height: 80rpx;
|
||||
height: auto!important;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@
|
|||
|
||||
|
||||
|
||||
<!--登录弹框-->
|
||||
<ns-login ref="login"></ns-login>
|
||||
<!--加载动画-->
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
</view>
|
||||
|
|
@ -31,11 +33,14 @@ export default {
|
|||
},
|
||||
components: {},
|
||||
mixins: [],
|
||||
onLoad(option) {
|
||||
onLoad(option) {},
|
||||
onShow() {},
|
||||
onReady(){
|
||||
// 判断是否登录
|
||||
if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/futures/list');
|
||||
|
||||
},
|
||||
async onShow() {
|
||||
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
|
|
|||
|
|
@ -17,19 +17,20 @@
|
|||
<view class="goods-list" v-if="list.length > 0">
|
||||
<view class="goods-block" v-for="(item,index) in list" :key="index">
|
||||
<view class="left">
|
||||
<image class="goods-image" src="https://miaogou.cdlfjy.com/upload/1/common/images/20230220/20230220113632167686419271176_SMALL.jpg" mode="widthFix"></image>
|
||||
<view class="goods-status">正在销售</view>
|
||||
<image class="goods-image" :src="$util.img(item.goods_image)" mode="widthFix"></image>
|
||||
<view class="goods-status" v-if="parseInt(item.status) === 2">正在销售</view>
|
||||
<view class="goods-status" v-else>{{ status_text[item.status] }}</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="goods-title">脑黄金为智慧加分 澳大利亚进口保健品</view>
|
||||
<view class="goods-title">{{ item.goods_name }}</view>
|
||||
<view class="goods-sell">
|
||||
<view class="goods-sell-item">销售商：木木李子</view>
|
||||
<view class="goods-sell-item">采购数量：8件</view>
|
||||
<view class="goods-sell-item">销售商：{{ item.seller_nickname }}</view>
|
||||
<view class="goods-sell-item">采购数量：{{ item.total }}件</view>
|
||||
</view>
|
||||
<view class="goods-bottom">
|
||||
<view class="price">
|
||||
<view class="price-item">单价:￥1200/件</view>
|
||||
<view class="price-item">采购价:<text class="purchase_price">￥1199.99</text></view>
|
||||
<view class="price-item">单价:￥{{ item.market_price }}/{{ item.unit || '件' }}</view>
|
||||
<view class="price-item">采购价:<text class="purchase_price">￥{{ item.price }}</text></view>
|
||||
</view>
|
||||
<view class="buy-button">
|
||||
<view class="buy-btn" @click="$util.redirectTo('/pages_promotion/futures/details', { id: item.id }, 'redirectTo');">前去采购</view>
|
||||
|
|
@ -39,7 +40,7 @@
|
|||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<ns-empty :isIndex="false" text="暂无商品信息"></ns-empty>
|
||||
<ns-empty :isIndex="false" :text="msg"></ns-empty>
|
||||
</view>
|
||||
</block>
|
||||
</mescroll-uni>
|
||||
|
|
@ -55,15 +56,23 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
list: [],
|
||||
msg: '未到秒杀时间',
|
||||
status_text: {
|
||||
1 : '库存',
|
||||
2 : '正在销售',
|
||||
3 : '已售出',
|
||||
4 : '提货中',
|
||||
5 : '提货完成',
|
||||
6 : '待支付',
|
||||
7 : '捡漏',
|
||||
},
|
||||
// 倒计时
|
||||
end_time: 1680170346,// 结束时间 时间戳
|
||||
end_time: 0,// 结束时间 时间戳
|
||||
diff_time: 0,
|
||||
h: '00',
|
||||
i: '00',
|
||||
s: '00',
|
||||
interval: '',
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
|
|
@ -72,28 +81,33 @@ export default {
|
|||
onReady(){
|
||||
// 判断是否登录
|
||||
if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/futures/seckill');
|
||||
// 开启倒计时
|
||||
this.countDown();
|
||||
},
|
||||
onShow() {},
|
||||
methods: {
|
||||
// 获取商品列表 todo:暂时使用的订单列表接口 未对接秒杀商品列表
|
||||
// 获取商品列表
|
||||
getList(mescroll) {
|
||||
this.$api.sendRequest({
|
||||
url: '/api/order/lists',
|
||||
url: '/futures/api/futures/list',
|
||||
data: {
|
||||
page: mescroll.num,
|
||||
page_size: mescroll.size,
|
||||
status: 'miaosha',
|
||||
},
|
||||
success: res => {
|
||||
if(parseInt(res.code) === 0){
|
||||
mescroll.endSuccess(Object.keys(res.data.list).length);
|
||||
|
||||
//设置列表数据
|
||||
if (parseInt(mescroll.num) === 1){
|
||||
this.list = []; //如果是第一页需手动制空列表
|
||||
}
|
||||
|
||||
this.list = this.list.concat(res.data.list); //追加新数据
|
||||
this.end_time = parseInt(res.data.end_time);
|
||||
// 开启倒计时
|
||||
this.countDown();
|
||||
}else {
|
||||
this.msg = res.message;
|
||||
}
|
||||
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view class="message-index">
|
||||
<!--顶部内容-->
|
||||
<view class="top">
|
||||
<image class="top-image" :src="$util.img('public/static/img/futures/my_shop_top_bg.png')" mode="widthFix"></image>
|
||||
</view>
|
||||
<!--消息内容-->
|
||||
<view class="message-content">
|
||||
<!--顶部标题-->
|
||||
<view class="titles">
|
||||
|
||||
|
||||
</view>
|
||||
<!--消息列表-->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!--登录弹框-->
|
||||
<ns-login ref="login"></ns-login>
|
||||
<!--加载动画-->
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 顶部标题
|
||||
titles:[
|
||||
{ title: '交易信息', icon: 'public/static/img/futures/business.png' },
|
||||
{ title: '系统消息', icon: 'public/static/img/futures/system.png' },
|
||||
{ title: '通知消息', icon: 'public/static/img/futures/notice.png' },
|
||||
{ title: '留言反馈', icon: 'public/static/img/futures/words.png' },
|
||||
],
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
};
|
||||
},
|
||||
components: {},
|
||||
mixins: [],
|
||||
onLoad(option) {},
|
||||
onShow() {},
|
||||
onReady(){
|
||||
// 判断是否登录
|
||||
if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/message/index');
|
||||
|
||||
|
||||
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
},
|
||||
onBackPress(options) {
|
||||
if (options.from === 'navigateBack') return false;
|
||||
this.$util.redirectTo('/pages/member/index');
|
||||
return true;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.message-index{
|
||||
background-color: #f0a71d;
|
||||
min-height: 100vh;
|
||||
|
||||
.top{
|
||||
|
||||
.top-image{}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue