Compare commits
2 Commits
08c56ea921
...
c50a9e3abc
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c50a9e3abc | ||
|
|
e0ee86e816 |
10
App.vue
@@ -10,8 +10,14 @@
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page{
|
||||
background: #F5F5F5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="scss">
|
||||
@import "uview-ui/index.scss";
|
||||
</style>
|
||||
|
||||
137
components/goods-list/goods-list.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
|
||||
<template>
|
||||
<view class="goods--list">
|
||||
<block v-if="list.length > 0">
|
||||
<view class="goods--item" v-for="(item, index) in list" :key="index" @click="goods(item)">
|
||||
<view class="cover">
|
||||
<image class="cover--src" :src="item.cover" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="title">{{item.name}}</view>
|
||||
<view class="content-flex">
|
||||
<view class="price eb" v-if="priceType === 'EB'">
|
||||
{{item.price}}<text>易币</text>
|
||||
</view>
|
||||
<view class="price cny" v-if="priceType === 'CNY'">
|
||||
<text>¥</text>{{item.original_price}}
|
||||
</view>
|
||||
<view class="sales">
|
||||
<slot name="statistics" :value="item">
|
||||
月易量{{item.sales}}
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
<slot name="footer" :value="item" />
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="goods--null">
|
||||
<view>{{toast}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name : 'goodsList',
|
||||
props : {
|
||||
// 数据列表
|
||||
list: {
|
||||
type : Array,
|
||||
default : () => {
|
||||
return new Array
|
||||
}
|
||||
},
|
||||
// 价格类型
|
||||
priceType: {
|
||||
type : String,
|
||||
default : 'EB'
|
||||
},
|
||||
// 列表空提示
|
||||
toast : {
|
||||
type : String,
|
||||
default : '暂无商品数据 -_-!'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
goods(e){
|
||||
this.$emit('on-goods', e)
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.goods--list{
|
||||
padding: calc(#{$padding} - 10rpx);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.goods--item{
|
||||
background: white;
|
||||
box-sizing: border-box;
|
||||
width: calc(50% - 20rpx);
|
||||
margin: 10rpx;
|
||||
border-radius: $radius/2;
|
||||
overflow: hidden;
|
||||
.cover{
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
.cover--src{
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
padding: $padding/2;
|
||||
.title{
|
||||
font-size: $title-size-lg;
|
||||
line-height: 40rpx;
|
||||
height: 80rpx;
|
||||
text-align: justify;
|
||||
@extend .ellipsis;
|
||||
}
|
||||
.content-flex{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: $padding/2;
|
||||
.price{
|
||||
width: 50%;
|
||||
color: $text-price;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
@extend .nowrap;
|
||||
text{
|
||||
font-size: $title-size-sm;
|
||||
font-weight: normal;
|
||||
padding-left: $padding/4;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
}
|
||||
.sales{
|
||||
width: 50%;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
line-height: 50rpx;
|
||||
text-align: right;
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 数据空
|
||||
.goods--null{
|
||||
width: 100%;
|
||||
padding: 20vh 0;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
}
|
||||
</style>
|
||||
904
components/tn-datepicker/tn-datepicker.vue
Normal file
@@ -0,0 +1,904 @@
|
||||
<template>
|
||||
<view v-if="isShow" class="picker">
|
||||
<view @click="onCancel" style="position: fixed;width: 100%;height: 100%;left: 0;top: 0;background: rgba(60,60,60,0.5)"></view>
|
||||
<!-- 日期选择器 -->
|
||||
<view v-if="type!='time'" :class="isShow?'myfirst':''" class="picker-modal">
|
||||
<view class="picker-header">
|
||||
<view class="close" @click="onCancel" style="font-size: 22px;width: 50upx;"></view>
|
||||
<view style="flex: 1;font-size: 16px; text-align: center;color: rgb(102,101,91);">选择日期</view>
|
||||
<view style="width: 50upx;"></view>
|
||||
</view>
|
||||
<view class="picker-week-header">
|
||||
<view v-for="(item, index) in weekArr" :key="index">{{item}}</view>
|
||||
</view>
|
||||
<scroll-view class="picker-modal-body" @scroll="scrollPage" scroll-y="true" id="target">
|
||||
<view class="picker-modal-header-title" style="position: fixed;height: 93upx;line-height: 93upx;margin-top:-1px;right: 1px;background: #fff;z-index: 999;">{{dateTitleArr[scrollIndex]}}</view>
|
||||
|
||||
<view class="picker-calendar-box" :id="'calendar_module'+calendar_Index" v-for="(calendar,calendar_Index) in calendars"
|
||||
:key="calendar_Index">
|
||||
<view class="picker-modal-header-title" :class="" style="color:rgb(77,77,77); font-size: 16px; width: 100%;height: 90upx;line-height: 90upx;text-align: center;">{{dateTitleArr[calendar_Index]}}</view>
|
||||
<view class="picker-calendar">
|
||||
<view class="picker-calendar-view" v-for="(date,dateIndex) in calendar" :key="dateIndex">
|
||||
<view v-show="!date.isOtherMonth || calendar_Index == 0" @click="onSelectDate(date)">
|
||||
<!-- 背景样式 -->
|
||||
<view v-show="date.bgStyle.type" :class="'picker-calendar-view-'+date.bgStyle.type" :style="{background: date.bgStyle.background}"></view>
|
||||
<!-- 正常和选中样式 -->
|
||||
<view class="picker-calendar-view-item" :style="{opacity: date.statusStyle.opacity, color: date.statusStyle.color, background: date.statusStyle.background}">
|
||||
<text>{{date.title}}</text>
|
||||
</view>
|
||||
<!-- 小圆点样式 -->
|
||||
<view class="picker-calendar-view-dot" :style="{opacity: date.dotStyle.opacity, background: date.dotStyle.background}"></view>
|
||||
<!-- 信息样式 -->
|
||||
<view v-show="date.tips" class="picker-calendar-view-tips">{{date.tips}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="picker-modal-footer" v-show="checkeds.length==2" style="position: fixed;bottom: 0;z-index: 1002;">
|
||||
<view style="position: absolute;width: 100%;height: 100%;background: #fff;z-index: -1;left:0;top:1px;"></view>
|
||||
<view class="picker-modal-footer-btnOK" :style="{'background':color}" @click="onConfirm">完成</view>
|
||||
</view>
|
||||
<view class="picker-modal-footer" v-show="checkeds.length==2"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* 工具函数库
|
||||
*/
|
||||
const DateTools = {
|
||||
/**
|
||||
* 获取公历节日
|
||||
* @param date Date对象
|
||||
*/
|
||||
getHoliday(date) {
|
||||
let holidays = {
|
||||
'0101': '元旦',
|
||||
'0214': '情人',
|
||||
'0308': '妇女',
|
||||
'0312': '植树',
|
||||
'0401': '愚人',
|
||||
'0501': '劳动',
|
||||
'0504': '青年',
|
||||
'0601': '儿童',
|
||||
'0701': '建党',
|
||||
'0801': '建军',
|
||||
'0903': '抗日',
|
||||
'0910': '教师',
|
||||
'1001': '国庆',
|
||||
'1031': '万圣',
|
||||
'1224': '平安',
|
||||
'1225': '圣诞'
|
||||
};
|
||||
let value = this.format(date, 'mmdd');
|
||||
if (holidays[value]) return holidays[value];
|
||||
return false;
|
||||
},
|
||||
/**
|
||||
* 解析标准日期格式
|
||||
* @param s 日期字符串
|
||||
* @return 返回Date对象
|
||||
*/
|
||||
parse: s => new Date(s.replace(/(年|月|-)/g, '/').replace(/(日)/g, '')),
|
||||
/**
|
||||
* 比较日期是否为同一天
|
||||
* @param a Date对象
|
||||
* @param b Date对象
|
||||
* @return Boolean
|
||||
*/
|
||||
isSameDay: (a, b) => a.getMonth() == b.getMonth() && a.getFullYear() == b.getFullYear() && a.getDate() == b.getDate(),
|
||||
/**
|
||||
* 格式化Date对象
|
||||
* @param d 日期对象
|
||||
* @param f 格式字符串
|
||||
* @return 返回格式化后的字符串
|
||||
*/
|
||||
format(d, f) {
|
||||
var o = {
|
||||
"m+": d.getMonth() + 1,
|
||||
"d+": d.getDate(),
|
||||
"h+": d.getHours(),
|
||||
"i+": d.getMinutes(),
|
||||
"s+": d.getSeconds(),
|
||||
"q+": Math.floor((d.getMonth() + 3) / 3),
|
||||
};
|
||||
if (/(y+)/.test(f))
|
||||
f = f.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
|
||||
for (var k in o)
|
||||
if (new RegExp("(" + k + ")").test(f))
|
||||
f = f.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
|
||||
return f;
|
||||
},
|
||||
/**
|
||||
* 用于format格式化后的反解析
|
||||
* @param s 日期字符串
|
||||
* @param f 格式字符串
|
||||
* @return 返回Date对象
|
||||
*/
|
||||
inverse(s, f) {
|
||||
var o = {
|
||||
"y": '',
|
||||
"m": '',
|
||||
"d": '',
|
||||
"h": '',
|
||||
"i": '',
|
||||
"s": '',
|
||||
};
|
||||
let d = new Date();
|
||||
if (s.length != f.length) return d;
|
||||
for (let i in f)
|
||||
if (o[f[i]] != undefined) o[f[i]] += s[i];
|
||||
if (o.y) d.setFullYear(o.y.length < 4 ? (d.getFullYear() + '').substr(0, 4 - o.y.length) + o.y : o.y);
|
||||
o.m && d.setMonth(o.m - 1, 1);
|
||||
o.d && d.setDate(o.d - 0);
|
||||
o.h && d.setHours(o.h - 0);
|
||||
o.i && d.setMinutes(o.i - 0);
|
||||
o.s && d.setSeconds(o.s - 0);
|
||||
return d;
|
||||
},
|
||||
/**
|
||||
* 获取日历数组(42天)
|
||||
* @param date 日期对象或日期字符串
|
||||
* @param proc 处理日历(和forEach类似),传递一个数组中的item
|
||||
* @return Array
|
||||
*/
|
||||
getCalendar(date, proc,beforeDateDisable) {
|
||||
let it = new Date(date),
|
||||
calendars = [];
|
||||
let nowDate = new Date(new Date(new Date().toLocaleDateString()).getTime());
|
||||
it.setDate(1);
|
||||
if(it.getDay()>0){
|
||||
it.setDate(it.getDate() - (it.getDay() == 0 ? 7 : it.getDay())); //偏移量
|
||||
}
|
||||
for (let i = 0; i < 42; i++) {
|
||||
let tmp = {
|
||||
dateObj: new Date(it),
|
||||
title: it.getDate(),
|
||||
isOtherMonth: it.getMonth() < date.getMonth() || it.getMonth() > date.getMonth()
|
||||
};
|
||||
if(beforeDateDisable){
|
||||
tmp.isBeforeNowDay = it<nowDate;
|
||||
}
|
||||
if (tmp.title == 1 && calendars.length > 7) {
|
||||
break;
|
||||
}
|
||||
calendars.push(Object.assign(tmp, proc ? proc(tmp) : {}));
|
||||
|
||||
it.setDate(it.getDate() + 1);
|
||||
}
|
||||
return calendars;
|
||||
},
|
||||
/**
|
||||
* 获取日期到指定的月份1号(不改变原来的date对象)
|
||||
* @param d Date对象
|
||||
* @param v 指定的月份
|
||||
* @return Date对象
|
||||
*/
|
||||
getDateToMonth(d, v) {
|
||||
let n = new Date(d);
|
||||
n.setMonth(v, 1);
|
||||
return n;
|
||||
},
|
||||
/**
|
||||
* 把时间数组转为时间字符串
|
||||
* @param t Array[时,分,秒]
|
||||
* @param showSecinds 是否显示秒
|
||||
* @return 字符串 时:分[:秒]
|
||||
*/
|
||||
formatTimeArray(t, s) {
|
||||
let r = [...t];
|
||||
if (!s) r.length = 2;
|
||||
r.forEach((v, k) => r[k] = ('0' + v).slice(-2));
|
||||
return r.join(':');
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
//颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: 'rgb(230,86,86)'
|
||||
},
|
||||
//显示未来几个月
|
||||
beforeDateDisable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//显示未来几个月
|
||||
monthNum: {
|
||||
type: Number,
|
||||
default: 6
|
||||
},
|
||||
//是否显示秒 针对type为datetime或time时生效
|
||||
showSeconds: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//初始的值
|
||||
value: [String, Array],
|
||||
//类型date time datetime range rangetime
|
||||
type: {
|
||||
type: String,
|
||||
default: 'range'
|
||||
},
|
||||
//是否显示
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//初始格式
|
||||
format: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//显示公历节日
|
||||
showHoliday: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//显示提示
|
||||
showTips: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
//开始文案 针对type为范围选择时生效
|
||||
beginText: {
|
||||
type: String,
|
||||
default: '开始'
|
||||
},
|
||||
//结束文案 针对type为范围选择时生效
|
||||
endText: {
|
||||
type: String,
|
||||
default: '结束'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false, //是否显示
|
||||
isMultiSelect: false, //是否为多选
|
||||
isContainTime: false, //是否包含时间
|
||||
date: {}, //当前日期对象
|
||||
weekArr: ["日", "一", "二", "三", "四", "五", "六"],
|
||||
scrollTopArr: [],
|
||||
scrollIndex: 0,
|
||||
dateTitleArr: [],
|
||||
title: '初始化', //标题
|
||||
calendars: [], //日历数组
|
||||
calendarIndex: 1, //当前日历索引
|
||||
checkeds: [], //选中的日期对象集合
|
||||
showTimePicker: false, //是否显示时间选择器
|
||||
timeValue: [0, 0, 0], //时间选择器的值
|
||||
timeType: 'begin', //当前时间选择的类型
|
||||
beginTime: [0, 0, 0], //当前所选的开始时间值
|
||||
endTime: [0, 0, 0], //当前所选的结束时间值
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
//监听滚动条
|
||||
scrollPage(e) {
|
||||
let scrollIndex = 0;
|
||||
if (this.scrollTopArr.length >= 6) {
|
||||
this.scrollTopArr.some(function(item, index) {
|
||||
if (e.detail.scrollTop >= item) {
|
||||
scrollIndex = index;
|
||||
}
|
||||
})
|
||||
}
|
||||
this.scrollIndex = scrollIndex;
|
||||
},
|
||||
//设置值
|
||||
setValue(value) {
|
||||
this.date = new Date();
|
||||
this.checkeds = [];
|
||||
this.isMultiSelect = this.type.indexOf('range') >= 0;
|
||||
this.isContainTime = this.type.indexOf('time') >= 0;
|
||||
//将字符串解析为Date对象
|
||||
let parseDateStr = (str) => (this.format ? DateTools.inverse(str, this.format) : DateTools.parse(str));
|
||||
if (value) {
|
||||
if (this.isMultiSelect) {
|
||||
Array.isArray(value) && value.forEach((dateStr, index) => {
|
||||
let date = parseDateStr(dateStr);
|
||||
let time = [date.getHours(), date.getMinutes(), date.getSeconds()];
|
||||
if (index == 0) this.beginTime = time;
|
||||
else this.endTime = time;
|
||||
this.checkeds.push(date);
|
||||
});
|
||||
} else {
|
||||
if (this.type == 'time') {
|
||||
let date = parseDateStr('2019/1/1 ' + value);
|
||||
this.beginTime = [date.getHours(), date.getMinutes(), date.getSeconds()];
|
||||
this.onShowTimePicker('begin');
|
||||
} else {
|
||||
this.checkeds.push(parseDateStr(value));
|
||||
if (this.isContainTime) this.beginTime = [
|
||||
this.checkeds[0].getHours(),
|
||||
this.checkeds[0].getMinutes(),
|
||||
this.checkeds[0].getSeconds()
|
||||
];
|
||||
}
|
||||
}
|
||||
if (this.checkeds.length) this.date = new Date(this.checkeds[0]);
|
||||
} else {
|
||||
if (this.isContainTime) {
|
||||
this.beginTime = [this.date.getHours(), this.date.getMinutes(), this.date.getSeconds()];
|
||||
if (this.isMultiSelect) this.endTime = [...this.beginTime];
|
||||
}
|
||||
this.checkeds.push(new Date(this.date));
|
||||
}
|
||||
if (this.type != 'time') this.refreshCalendars(true);
|
||||
else this.onShowTimePicker('begin');
|
||||
},
|
||||
//设置时间选择器的显示状态
|
||||
onShowTimePicker(type) {
|
||||
this.showTimePicker = true;
|
||||
this.timeType = type;
|
||||
this.timeValue = type == 'begin' ? [...this.beginTime] : [...this.endTime];
|
||||
},
|
||||
//处理日历
|
||||
procCalendar(item) {
|
||||
//定义初始样式
|
||||
item.statusStyle = {
|
||||
opacity: 1,
|
||||
color: item.isOtherMonth ? '#ddd' : 'rgb(108,108,108)',
|
||||
background: 'transparent'
|
||||
};
|
||||
if(item.isBeforeNowDay || item.isOtherMonth){
|
||||
item.statusStyle.color = '#ddd';
|
||||
item.isGray = true;
|
||||
}
|
||||
item.bgStyle = {
|
||||
type: '',
|
||||
background: 'transparent'
|
||||
};
|
||||
item.dotStyle = {
|
||||
opacity: 1,
|
||||
background: 'transparent'
|
||||
};
|
||||
item.tips = "";
|
||||
//标记今天的日期
|
||||
if (DateTools.isSameDay(new Date(), item.dateObj)) {
|
||||
item.statusStyle.color = this.color;
|
||||
if (item.isOtherMonth) item.statusStyle.opacity = 0.3;
|
||||
}
|
||||
//标记选中项
|
||||
this.checkeds.forEach(date => {
|
||||
if (DateTools.isSameDay(date, item.dateObj)) {
|
||||
item.statusStyle.background = this.color;
|
||||
item.statusStyle.color = '#fff';
|
||||
item.statusStyle.opacity = 1;
|
||||
if (this.isMultiSelect && this.showTips) item.tips = this.beginText;
|
||||
}
|
||||
});
|
||||
//节假日或今日的日期标点
|
||||
if (item.statusStyle.background != this.color) {
|
||||
let holiday = this.showHoliday ? DateTools.getHoliday(item.dateObj) : false;
|
||||
if (holiday || DateTools.isSameDay(new Date(), item.dateObj)) {
|
||||
item.title = holiday || item.title;
|
||||
item.dotStyle.background = this.color;
|
||||
if (item.isOtherMonth) item.dotStyle.opacity = 0.2;
|
||||
}
|
||||
} else {
|
||||
item.title = item.dateObj.getDate();
|
||||
}
|
||||
//有两个日期
|
||||
if (this.checkeds.length == 2) {
|
||||
if (DateTools.isSameDay(this.checkeds[0], item.dateObj)) { //开始日期
|
||||
item.bgStyle.type = 'bgbegin';
|
||||
}
|
||||
if (DateTools.isSameDay(this.checkeds[1], item.dateObj)) { //结束日期
|
||||
if (this.isMultiSelect && this.showTips) item.tips = item.bgStyle.type ? this.beginText + ' / ' + this.endText :
|
||||
this.endText;
|
||||
if (!item.bgStyle.type) { //开始日期不等于结束日期
|
||||
item.bgStyle.type = 'bgend';
|
||||
} else {
|
||||
item.bgStyle.type = '';
|
||||
}
|
||||
}
|
||||
if (!item.bgStyle.type && (+item.dateObj > +this.checkeds[0] && +item.dateObj < +this.checkeds[1])) { //中间的日期
|
||||
item.bgStyle.type = 'bg';
|
||||
item.statusStyle.color = this.color;
|
||||
}
|
||||
if (item.bgStyle.type) {
|
||||
item.bgStyle.background = this.color;
|
||||
item.dotStyle.opacity = 1;
|
||||
item.statusStyle.opacity = 1;
|
||||
}
|
||||
}
|
||||
},
|
||||
//刷新日历
|
||||
refreshCalendars(refresh = false) {
|
||||
let date = new Date(this.date);
|
||||
let before = DateTools.getDateToMonth(date, date.getMonth() - 1);
|
||||
let after = DateTools.getDateToMonth(date, date.getMonth() + 1);
|
||||
|
||||
let _this = this;
|
||||
let mArr = [];
|
||||
for (let m_num = 0; m_num < this.monthNum; m_num++) {
|
||||
let new_date = DateTools.getDateToMonth(date, date.getMonth() + m_num);
|
||||
_this.dateTitleArr.push(DateTools.format(new_date, 'yyyy年mm月'))
|
||||
mArr.push(new_date)
|
||||
}
|
||||
mArr.some(function(item, index) {
|
||||
_this.calendars.splice(index, 1, DateTools.getCalendar(item, _this.procCalendar,_this.beforeDateDisable));
|
||||
})
|
||||
this.title = DateTools.format(this.date, 'yyyy年mm月');
|
||||
|
||||
setTimeout(function(){
|
||||
let domArr = [];
|
||||
let h = 0;
|
||||
const query = uni.createSelectorQuery().in(_this);
|
||||
for (let m_domNum = 0; m_domNum < _this.monthNum; m_domNum++) {
|
||||
let className = '#calendar_module' + m_domNum;
|
||||
let view = uni.createSelectorQuery().select(className);
|
||||
//console.log(view);
|
||||
view.fields({
|
||||
size: true, // 是否返回节点尺寸
|
||||
}, data => { // data是方法的回调函数,参数是指定的相关节点信息。
|
||||
// console.log(data);
|
||||
let model = {};
|
||||
model.top = h; // 顶部高度
|
||||
h += data.height;
|
||||
model.bottom = h; // 底部高度
|
||||
domArr.push(model.top);
|
||||
}).exec();
|
||||
}
|
||||
_this.scrollTopArr = domArr;
|
||||
},100)
|
||||
},
|
||||
//选中日期
|
||||
onSelectDate(date) {
|
||||
if(date.isGray){
|
||||
return;
|
||||
}
|
||||
if (~this.type.indexOf('range') && this.checkeds.length == 2) this.checkeds = [];
|
||||
else if (!(~this.type.indexOf('range')) && this.checkeds.length) this.checkeds = [];
|
||||
this.checkeds.push(new Date(date.dateObj));
|
||||
this.checkeds.sort((a, b) => a - b); //从小到大排序
|
||||
this.calendars.forEach(calendar => {
|
||||
calendar.forEach(this.procCalendar); //重新处理
|
||||
});
|
||||
},
|
||||
//时间选择取消
|
||||
onCancelTime() {
|
||||
this.showTimePicker = false;
|
||||
this.type == 'time' && this.onCancel();
|
||||
},
|
||||
//时间选择确定
|
||||
onConfirmTime() {
|
||||
if (this.timeType == 'begin') this.beginTime = this.timeValue;
|
||||
else this.endTime = this.timeValue;
|
||||
this.showTimePicker = false;
|
||||
this.type == 'time' && this.onConfirm();
|
||||
},
|
||||
//取消
|
||||
onCancel() {
|
||||
this.$emit('cancel', false);
|
||||
},
|
||||
//确定
|
||||
onConfirm() {
|
||||
let result = {
|
||||
value: null,
|
||||
date: null
|
||||
};
|
||||
//定义默认格式
|
||||
let defaultFormat = {
|
||||
'date': 'yyyy/mm/dd',
|
||||
'time': 'hh:ii' + (this.showSeconds ? ':ss' : ''),
|
||||
'datetime': ''
|
||||
};
|
||||
defaultFormat['datetime'] = defaultFormat.date + ' ' + defaultFormat.time;
|
||||
let fillTime = (date, timeArr) => {
|
||||
date.setHours(timeArr[0], timeArr[1]);
|
||||
if (this.showSeconds) date.setSeconds(timeArr[2]);
|
||||
};
|
||||
if (this.type == 'time') {
|
||||
let date = new Date();
|
||||
fillTime(date, this.beginTime);
|
||||
result.value = DateTools.format(date, this.format ? this.format : defaultFormat.time);
|
||||
result.date = date;
|
||||
} else {
|
||||
if (this.isMultiSelect) {
|
||||
let values = [],
|
||||
dates = [];
|
||||
if (this.checkeds.length < 2) return uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请选择两个日期'
|
||||
});
|
||||
this.checkeds.forEach((date, index) => {
|
||||
let newDate = new Date(date);
|
||||
if (this.isContainTime) {
|
||||
let time = [this.beginTime, this.endTime];
|
||||
fillTime(newDate, time[index]);
|
||||
}
|
||||
values.push(DateTools.format(newDate, this.format ? this.format : defaultFormat[this.isContainTime ?
|
||||
'datetime' : 'date']));
|
||||
dates.push(newDate);
|
||||
});
|
||||
result.value = values;
|
||||
result.date = dates;
|
||||
} else {
|
||||
let newDate = new Date(this.checkeds[0]);
|
||||
if (this.isContainTime) {
|
||||
newDate.setHours(this.beginTime[0], this.beginTime[1]);
|
||||
if (this.showSeconds) newDate.setSeconds(this.beginTime[2]);
|
||||
}
|
||||
result.value = DateTools.format(newDate, this.format ? this.format : defaultFormat[this.isContainTime ?
|
||||
'datetime' : 'date']);
|
||||
result.date = newDate;
|
||||
}
|
||||
}
|
||||
this.$emit('confirm', result);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
BeginTitle() {
|
||||
let value = '未选择';
|
||||
if (this.checkeds.length) value = DateTools.format(this.checkeds[0], 'yy/mm/dd');
|
||||
return value;
|
||||
},
|
||||
EndTitle() {
|
||||
let value = '未选择';
|
||||
if (this.checkeds.length == 2) value = DateTools.format(this.checkeds[1], 'yy/mm/dd');
|
||||
return value;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show(newValue, oldValue) {
|
||||
newValue && this.setValue(this.value);
|
||||
this.isShow = newValue;
|
||||
},
|
||||
value(newValue, oldValue) {
|
||||
setTimeout(() => {
|
||||
this.setValue(newValue);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.close {
|
||||
position: relative;
|
||||
width: 35upx;
|
||||
height: 35upx;
|
||||
}
|
||||
|
||||
.close::before,
|
||||
.close::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
background-color: rgb(101, 100, 91);
|
||||
left: 20upx;
|
||||
width: 1px;
|
||||
height: 35upx;
|
||||
}
|
||||
|
||||
.close::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.close::after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
|
||||
@keyframes myfirst
|
||||
{
|
||||
0% {top: 100vh;}
|
||||
100% {top: 30vh;}
|
||||
}
|
||||
|
||||
@-moz-keyframes myfirst /* Firefox */
|
||||
{
|
||||
0% {top: 100vh;}
|
||||
100% {top: 30vh;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes myfirst /* Safari 和 Chrome */
|
||||
{
|
||||
0% {top: 100vh;}
|
||||
100% {top: 30vh;}
|
||||
}
|
||||
|
||||
@-o-keyframes myfirst /* Opera */
|
||||
{
|
||||
0% {top: 100vh;}
|
||||
100% {top: 30vh;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
$z-index: 100;
|
||||
$cell-spacing: 20upx;
|
||||
$calendar-size: 630upx;
|
||||
$calendar-item-size: 100upx;
|
||||
|
||||
.picker {
|
||||
position: fixed;
|
||||
z-index: $z-index;
|
||||
background: rgba(60, 60, 60, 0);
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 28upx;
|
||||
|
||||
&-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 20upx 30upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&-week-header {
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid rgb(244, 244, 244);
|
||||
padding: 10px 20px;
|
||||
color: rgb(136, 136, 136);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&-week-header>view:first-child {
|
||||
color: rgb(214, 142, 135);
|
||||
}
|
||||
|
||||
&-week-header>view:last-child {
|
||||
color: rgb(214, 142, 135);
|
||||
}
|
||||
|
||||
&-btn {
|
||||
padding: $cell-spacing*0.5 $cell-spacing;
|
||||
border-radius: 12upx;
|
||||
color: #666;
|
||||
|
||||
&-active {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
|
||||
&-display {
|
||||
color: #666;
|
||||
|
||||
&-text {
|
||||
color: #000;
|
||||
margin: 0 $cell-spacing*0.5;
|
||||
}
|
||||
|
||||
&-link {
|
||||
display: inline-block;
|
||||
|
||||
&-active {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-time {
|
||||
width: 100%; //$calendar-size - 80upx !important;
|
||||
left: ((750upx - $calendar-size) / 2 + 40upx) !important;
|
||||
}
|
||||
|
||||
&-modal {
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0; //(750upx - $calendar-size) / 2;
|
||||
width: 100%; //$calendar-size;
|
||||
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12upx;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
height: 70vh;
|
||||
|
||||
|
||||
animation: myfirst 0.5s;
|
||||
-moz-animation: myfirst 0.5s; /* Firefox */
|
||||
-webkit-animation: myfirst 0.5s; /* Safari 和 Chrome */
|
||||
-o-animation: myfirst 0.5s; /* Opera */
|
||||
|
||||
|
||||
&-header {
|
||||
text-align: center;
|
||||
line-height: 80upx;
|
||||
font-size: 32upx;
|
||||
|
||||
&-title {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
color: rgb(77, 77, 77);
|
||||
font-size: 16px;
|
||||
width: 100%;
|
||||
height: 90upx;
|
||||
line-height: 90upx;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgb(244, 244, 244);
|
||||
}
|
||||
|
||||
.picker-icon {
|
||||
display: inline-block;
|
||||
line-height: 50upx;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
border-radius: 50upx;
|
||||
text-align: center;
|
||||
margin: 10upx;
|
||||
background: #fff;
|
||||
font-size: 36upx;
|
||||
|
||||
&-active {
|
||||
background: rgba(0, 0, 0, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-body {
|
||||
width: 100%; //$calendar-size !important;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
&-time {
|
||||
width: 100%;
|
||||
height: 180upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: $cell-spacing;
|
||||
height: 130upx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border-top: 1px solid rgb(244, 244, 244);
|
||||
|
||||
&-btnOK {
|
||||
width: calc(100% - 100upx);
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
border-radius: 6upx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&-info {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&-btn {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-calendar {
|
||||
width: 100%;
|
||||
height: calc(100% - 90upx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
&-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&-view:nth-child(7n){
|
||||
width: 14.2%;
|
||||
}
|
||||
&-view {
|
||||
position: relative;
|
||||
width: 14.3%; //$calendar-item-size;
|
||||
height: $calendar-item-size;
|
||||
text-align: center;
|
||||
|
||||
&-bgbegin,
|
||||
&-bg,
|
||||
&-bgend,
|
||||
&-item,
|
||||
&-dot,
|
||||
&-tips {
|
||||
position: absolute;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
&-bgbegin,
|
||||
&-bg,
|
||||
&-bgend {
|
||||
opacity: .15;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-bg {
|
||||
left: 0;
|
||||
top: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-bgbegin {
|
||||
border-radius: $calendar-item-size 0 0 $calendar-item-size;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-bgend {
|
||||
border-radius: 0 $calendar-item-size $calendar-item-size 0;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-item {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
right: 10%;
|
||||
top: 10%;
|
||||
width: 12upx;
|
||||
height: 12upx;
|
||||
border-radius: 12upx;
|
||||
}
|
||||
|
||||
&-tips {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #4E4B46;
|
||||
color: #fff;
|
||||
border-radius: 12upx;
|
||||
padding: 10upx 20upx;
|
||||
font-size: 24upx;
|
||||
width: max-content;
|
||||
margin-bottom: 5px;
|
||||
pointer-events: none;
|
||||
z-index: 1000;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 5px 5px 0 5px;
|
||||
border-color: #4E4B46 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
pages.json
@@ -1,24 +1,102 @@
|
||||
{
|
||||
"pages": [{
|
||||
"path": "pages/index/index"
|
||||
"path": "pages/index/index",
|
||||
"name": "Index",
|
||||
"style": {
|
||||
"navigationBarTitleText":"发现能量"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/found/index"
|
||||
"path": "pages/found/index",
|
||||
"name": "Found",
|
||||
"style": {
|
||||
"navigationBarTitleText":"发现更多"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/user/index"
|
||||
"path": "pages/user/index",
|
||||
"name": "User",
|
||||
"style": {
|
||||
"navigationBarTitleText":"节点中心"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/instrument/basics",
|
||||
"name": "instrumentBasics",
|
||||
"style": {
|
||||
"navigationBarTitleText":"企业基础信息"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/goods/management",
|
||||
"name": "goodsManagement",
|
||||
"style": {
|
||||
"navigationBarTitleText":"商品权证管理"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/goods/addClassify",
|
||||
"name": "goodsaddClassify",
|
||||
"style": {
|
||||
"navigationBarTitleText":"发布商品类目"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/goods/add",
|
||||
"name": "goodsAdd",
|
||||
"style": {
|
||||
"navigationBarTitleText":"商品权证创建"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/goods/goodsAuth",
|
||||
"name": "goodsAddAuth",
|
||||
"style": {
|
||||
"navigationBarTitleText":"商品权证认证"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/coupons/management",
|
||||
"name": "couponsManagement",
|
||||
"style": {
|
||||
"navigationBarTitleText":"创建优惠券"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/coupons/add",
|
||||
"name": "couponsAdd",
|
||||
"style": {
|
||||
"navigationBarTitleText":"创建优惠券"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/coupons/magDetails",
|
||||
"name": "couponsDetails",
|
||||
"style": {
|
||||
"navigationBarTitleText":"优惠券管理"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/coupons/selectGoods",
|
||||
"name": "couponsSelectGoods",
|
||||
"style": {
|
||||
"navigationBarTitleText":"关联产品"
|
||||
}
|
||||
}],
|
||||
"globalStyle": {
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
"backgroundColor": "#F5F5F5"
|
||||
},
|
||||
"tabBar": {
|
||||
"tabBar": {
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#FFFFFF",
|
||||
"selectedColor" : "#774ffd",
|
||||
"iconWidth":"26px",
|
||||
"spacing": "0",
|
||||
"height":"60px",
|
||||
"list": [{
|
||||
"text": "发现能量",
|
||||
"text": "发现能量",
|
||||
"iconPath":"static/tabBar/tabBar_icon_00.png",
|
||||
"selectedIconPath":"static/tabBar/tabBar_show_00.png",
|
||||
"pagePath": "pages/index/index"
|
||||
}, {
|
||||
"text": "发现更多",
|
||||
"text": "发现更多",
|
||||
"iconPath":"static/tabBar/tabBar_icon_01.png",
|
||||
"selectedIconPath":"static/tabBar/tabBar_show_01.png",
|
||||
"pagePath": "pages/found/index"
|
||||
}, {
|
||||
"text": "节点中心",
|
||||
"text": "节点中心",
|
||||
"iconPath":"static/tabBar/tabBar_icon_02.png",
|
||||
"selectedIconPath":"static/tabBar/tabBar_show_02.png",
|
||||
"pagePath": "pages/user/index"
|
||||
}]
|
||||
},
|
||||
|
||||
222
pages/certification/personal.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 副标题 -->
|
||||
<view class="sub-title">
|
||||
<text>请正确填写你的个人身份信息</text>
|
||||
</view>
|
||||
<!-- 填写姓名 -->
|
||||
<view class="password">
|
||||
<view class="group">
|
||||
<view class="inputs">
|
||||
<label>真实姓名</label>
|
||||
<input type="text" v-model="nikcName" placeholder="请输入您的真实姓名" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label>身份证件号</label>
|
||||
<input type="idcard" v-model="idcardNo" placeholder="请输入身份证件号码" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 上传证件号 -->
|
||||
<view class="idcard-flex">
|
||||
<view class="idcard-item">
|
||||
<view class="idcard-title">
|
||||
<text>上传身份证正面</text>
|
||||
</view>
|
||||
<view class="idcard-block positive">
|
||||
<image :src="positive" mode="aspectFit" @click="upload('positive')"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="idcard-item">
|
||||
<view class="idcard-title">
|
||||
<text>上传身份证背面</text>
|
||||
</view>
|
||||
<view class="idcard-block reverse">
|
||||
<image :src="reverse" mode="aspectFit" @click="upload('reverse')" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 按钮 -->
|
||||
<view class="buttons">
|
||||
<button type="default" @click="submitPersonal">提交认证信息</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import uploading from '@/apis/oss'
|
||||
import { personal } from '@/apis/interfaces/certification'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
positive: '',
|
||||
reverse: '',
|
||||
nikcName: '',
|
||||
idcardNo: ''
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 创建钱包
|
||||
submitPersonal(){
|
||||
if(this.nikcName === '' || this.idcardNo === ''){
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '真实姓名或身份证号不能为空'
|
||||
})
|
||||
return
|
||||
}
|
||||
personal({
|
||||
name: this.nikcName,
|
||||
id_card: this.idcardNo
|
||||
}).then(res=>{
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '您的身份认证已完成,是否立即激活钱包~',
|
||||
confirmText: '立即激活',
|
||||
confirmColor: '#009B69',
|
||||
cancelColor: '#666666',
|
||||
cancelText: '稍后激活',
|
||||
success: res=> {
|
||||
if(res.confirm) {
|
||||
uni.redirectTo({
|
||||
url: '../wallet/mnemonic'
|
||||
})
|
||||
}
|
||||
if(res.cancel) {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
},
|
||||
// 上传身份证
|
||||
upload(type){
|
||||
uni.chooseImage({
|
||||
success(files){
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '暂未开放'
|
||||
})
|
||||
// let filesArr = files.tempFilePaths.map(val => {
|
||||
// return {
|
||||
// uri: val
|
||||
// }
|
||||
// })
|
||||
// uploading(filesArr)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 副标题
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
margin: $margin * 2 $margin;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
// 上传证件
|
||||
.idcard-flex{
|
||||
display: flex;
|
||||
padding: ($padding*2) $padding 0;
|
||||
.idcard-item{
|
||||
margin: 0 $margin;
|
||||
width: calc(50% - #{$margin * 2});
|
||||
.idcard-title{
|
||||
text-align: center;
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
.idcard-block{
|
||||
position: relative;
|
||||
border-radius: $radius-m;
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
|
||||
background-color: white;
|
||||
padding-top: 63%;
|
||||
background-position: center;
|
||||
background-size: 36%;
|
||||
background-repeat: no-repeat;
|
||||
overflow: hidden;
|
||||
&.positive{
|
||||
background-image: url(../../static/background/idcard-positive.png);
|
||||
}
|
||||
&.reverse{
|
||||
background-image: url(../../static/background/idcard-reverse.png);
|
||||
}
|
||||
image{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 身份信息
|
||||
.password{
|
||||
padding: 0 $padding * 2;
|
||||
.prompt{
|
||||
margin-top: $margin * 2;
|
||||
font-size: $title-size-m;
|
||||
color: $mian-color;
|
||||
}
|
||||
.group{
|
||||
margin-top: $margin;
|
||||
border-radius: $radius-m;
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
|
||||
background-color: white;
|
||||
.inputs{
|
||||
padding: $padding $padding + 10;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
&:last-child{
|
||||
border-bottom: none;
|
||||
}
|
||||
label{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
input{
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
font-size: $title-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 按钮
|
||||
.buttons{
|
||||
padding: $padding * 2;
|
||||
.text{
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
margin-bottom: $margin * 2;
|
||||
font-size: $title-size-lg;
|
||||
color: $mian-color;
|
||||
font-weight: bold;
|
||||
}
|
||||
button{
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background-color: $mian-color;
|
||||
border-radius: $radius-lg;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
359
pages/company/approve.vue
Normal file
@@ -0,0 +1,359 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="title">企业认证</view>
|
||||
<view class="subtitle">请如实填写认证信息,快速审核开店</view>
|
||||
</view>
|
||||
<view class="white-box">
|
||||
<view class="inputs logo">
|
||||
<label>企业LOGO</label>
|
||||
<image class="logo-cover" :src="logo.showpath || require('@/static/icons/add-icon.png')" @click="updImg('logo')" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label>企业名称</label>
|
||||
<input type="text" v-model="name" placeholder="输入企业名称" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label>企业行业</label>
|
||||
<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title" @change="changePicker" data-type="industry">
|
||||
<view class="picker-text nowrap">
|
||||
{{industry[industryIndex].title}}
|
||||
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label>经营类目</label>
|
||||
<view class="picker-text nowrap" @click="opnePopup">
|
||||
<block v-if="categorys.length > 0">
|
||||
<text class="text-item" v-for="(item, index) in category" :key="index" v-if="item.check">{{item.name}}</text>
|
||||
</block>
|
||||
<block v-else>选择经营类目</block>
|
||||
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label>法人姓名</label>
|
||||
<input type="text" v-model="corporate" placeholder="输入法人姓名" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label>法人身份证</label>
|
||||
<input type="text" v-model="identity" placeholder="输入法人身份证" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label>机构代码</label>
|
||||
<input type="text" v-model="org" placeholder="输入企业组织机构代码" />
|
||||
</view>
|
||||
<view class="inputs logo">
|
||||
<label>营业执照</label>
|
||||
<image class="license-cover" :src="license.showpath || require('@/static/icons/add-icon.png')" @click="updImg('license')" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button type="default" size="default" @click="submitApplies">提交认证</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 经营类目 -->
|
||||
<uni-popup ref="categoryPopup">
|
||||
<view class="category-popup">
|
||||
<view class="header">
|
||||
<view class="title">经营类目</view>
|
||||
<view class="subtitle">请选择经营类目</view>
|
||||
</view>
|
||||
<view class="category-flex">
|
||||
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in category" :key="index" @click="item.check = !item.check">{{item.name}}</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button type="default" size="default" @click="affirmCategory">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { appliesCreate, applies, appliesInfo, appliesCategory } from '@/apis/interfaces/company'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formType : "",
|
||||
name : "",
|
||||
corporate : "",
|
||||
identity : "",
|
||||
org : "",
|
||||
logo : {
|
||||
showpath: '',
|
||||
path : ''
|
||||
},
|
||||
license : {
|
||||
showpath: '',
|
||||
path : ''
|
||||
},
|
||||
industry : [],
|
||||
industryIndex: 0,
|
||||
reason : '',
|
||||
category : [],
|
||||
categorys : []
|
||||
};
|
||||
},
|
||||
created(){
|
||||
// 读取配置信息
|
||||
appliesCreate().then(res=>{
|
||||
console.log(res)
|
||||
this.industry = res.industries
|
||||
this.formType = this.$Route.query.formType
|
||||
this.name = res.info.name
|
||||
this.industryIndex = res.industries.findIndex(val => val.industry_id === res.info.industry.industry_id) || 0
|
||||
if(this.formType === 'put'){
|
||||
appliesInfo().then(formValue => {
|
||||
for(let val of formValue.categories){
|
||||
if(val.check){
|
||||
this.categorys.push(val.category_id)
|
||||
}
|
||||
}
|
||||
this.category = formValue.categories
|
||||
this.corporate = formValue.certification.name
|
||||
this.identity = formValue.certification.idcard
|
||||
this.org = formValue.certification.code
|
||||
this.logo = formValue.cover
|
||||
this.license = formValue.certification.license
|
||||
}).catch(valueErr => {
|
||||
uni.showToast({
|
||||
title: valueErr.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}else{
|
||||
this.category = res.info.categories
|
||||
}
|
||||
}).catch(err =>{
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 选择经营类目
|
||||
opnePopup(){
|
||||
this.$refs.categoryPopup.open('bottom')
|
||||
},
|
||||
// 确认选择类目
|
||||
affirmCategory(){
|
||||
this.categorys = []
|
||||
for(let val of this.category){
|
||||
if(val.check){
|
||||
this.categorys.push(val.category_id)
|
||||
}
|
||||
}
|
||||
this.$refs.categoryPopup.close()
|
||||
},
|
||||
// 提交信息
|
||||
submitApplies(){
|
||||
let method = this.formType === 'put' ? 'PUT' : 'POST'
|
||||
applies({
|
||||
name : this.name,
|
||||
cover : this.logo.path,
|
||||
license : this.license.path,
|
||||
user_name : this.corporate,
|
||||
id_card : this.identity,
|
||||
code : this.org,
|
||||
industry_id : this.industry[this.industryIndex].industry_id,
|
||||
categories : this.categorys
|
||||
}, method).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '您的企业认证信息已提交,审核需3-7个工作日,请耐心等待',
|
||||
showCancel : false,
|
||||
confirmText : '确认',
|
||||
success : resModal => {
|
||||
this.$Router.back()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 选择器
|
||||
changePicker(e){
|
||||
this.industryIndex = e.detail.value
|
||||
appliesCategory({
|
||||
industry: this.industry[e.detail.value].industry_id,
|
||||
}).then(res => {
|
||||
this.category = res
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 上传图片
|
||||
updImg(type){
|
||||
uni.chooseImage({
|
||||
count : 1,
|
||||
success : path => {
|
||||
uploads([{
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this[type] = {
|
||||
showpath: res.url[0],
|
||||
path: res.path[0]
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 内容
|
||||
.content{
|
||||
.header{
|
||||
height: 15vh;
|
||||
padding-bottom: $padding * 2;
|
||||
box-sizing: border-box;
|
||||
@extend .vertical;
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: $title-size + 14;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.subtitle{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.white-box{
|
||||
background-color: white;
|
||||
border-radius: $radius $radius 0 0;
|
||||
min-height: 85vh;
|
||||
padding: $padding $padding * 2 $padding * 2;
|
||||
box-sizing: border-box;
|
||||
.inputs{
|
||||
position: relative;
|
||||
margin-top: $margin;
|
||||
background: white;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
padding-left: 200rpx;
|
||||
line-height: 90rpx;
|
||||
min-height: 90rpx;
|
||||
label{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200rpx;
|
||||
font-size: $title-size;
|
||||
}
|
||||
input{
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
}
|
||||
.picker-text{
|
||||
position: relative;
|
||||
padding-right: 90rpx;
|
||||
.picker-icon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.text-item{
|
||||
margin-left: 10rpx;
|
||||
&:first-child{
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.logo{
|
||||
min-height: 98rpx;
|
||||
padding-bottom: $padding;
|
||||
.logo-cover{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 98rpx;
|
||||
height: 98rpx;
|
||||
background: $border-color-lg;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.license-cover{
|
||||
@extend .logo-cover;
|
||||
border-radius: 0;
|
||||
width: 131rpx;
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
padding-top: $padding * 2;
|
||||
button{
|
||||
background: $text-price;
|
||||
border-radius: 0;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 经营类目
|
||||
.category-popup{
|
||||
background: #F5F5F5;
|
||||
padding: 0 $padding * 2 $padding * 2 $padding * 2;
|
||||
.header{
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
.category-flex{
|
||||
margin: 0 -10rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.category-flex-item{
|
||||
margin: 10rpx;
|
||||
background: white;
|
||||
width: calc(33.33% - 20rpx);
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
@extend .nowrap;
|
||||
&.show{
|
||||
color: white;
|
||||
background-color: $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
padding-top: $padding * 2;
|
||||
button{
|
||||
background: $text-price;
|
||||
border-radius: 0;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
pages/company/prompt.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="cover" src="@/static/dev/guide_cover_00.png" mode="widthFix"></image>
|
||||
<view class="title">恭喜您,已注册成功</view>
|
||||
<view class="sub-title">开通会员认证企业信息立即获得授信易货额,即可开始易货之旅</view>
|
||||
<button class="vip-button" type="default" @click="$Router.push({name: 'Vip'})">开通会员</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
onNavigationBarButtonTap(e){
|
||||
this.$Router.pushTab({name: "Equity"})
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
padding: $padding * 2;
|
||||
background: white;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
@extend .vertical;
|
||||
text-align: center;
|
||||
.cover{
|
||||
width: 46vw;
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
.title{
|
||||
font-size: $title-size + 14;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.sub-title{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.vip-button{
|
||||
margin-top: 10vh;
|
||||
background: $text-price;
|
||||
border-radius: 0;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
147
pages/company/registered.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="header">
|
||||
<view class="title">企业注册</view>
|
||||
<view class="subtitle">填写企业基础行业,获取企业/商家权益</view>
|
||||
</view>
|
||||
<view class="white-box">
|
||||
<view class="inputs">
|
||||
<label>企业名称</label>
|
||||
<input type="text" v-model="name" placeholder="输入企业名称" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label>企业行业</label>
|
||||
<picker v-if="industry.length > 0" :range="industry" :value="industryIndex" range-key="title" @change="changePicker" data-type="industry">
|
||||
<view class="picker-text nowrap">
|
||||
{{industry[industryIndex].title}}
|
||||
<uni-icons class="picker-icon" type="arrowdown"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button type="default" size="default" @click="next">下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createConfig, inits } from '@/apis/interfaces/company'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name : "",
|
||||
industry : [],
|
||||
industryIndex: 0
|
||||
};
|
||||
},
|
||||
created(){
|
||||
createConfig().then(res=>{
|
||||
this.industry = res
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 提交信息
|
||||
next(){
|
||||
inits({
|
||||
name : this.name,
|
||||
industry_id : this.industry[this.industryIndex].industry_id
|
||||
}).then(res => {
|
||||
this.$Router.push({name: 'Prompt'})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
//选择器
|
||||
changePicker(e){
|
||||
let changeType = e.target.dataset.type,
|
||||
changeVlae = e.detail.value
|
||||
|
||||
switch(changeType){
|
||||
case 'type':
|
||||
this.typeIndex = changeVlae
|
||||
break
|
||||
case 'industry':
|
||||
this.industryIndex = changeVlae
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
.header{
|
||||
height: 20vh;
|
||||
@extend .vertical;
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: $title-size + 14;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.subtitle{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.white-box{
|
||||
background-color: white;
|
||||
border-radius: $radius $radius 0 0;
|
||||
min-height: 80vh;
|
||||
padding: $padding * 2;
|
||||
box-sizing: border-box;
|
||||
.inputs{
|
||||
position: relative;
|
||||
margin-top: $margin;
|
||||
background: white;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
padding-left: 200rpx;
|
||||
line-height: 90rpx;
|
||||
min-height: 90rpx;
|
||||
label{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 200rpx;
|
||||
font-size: $title-size;
|
||||
}
|
||||
input{
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
}
|
||||
.picker-text{
|
||||
position: relative;
|
||||
padding-right: 90rpx;
|
||||
.picker-icon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
padding-top: $padding * 2;
|
||||
button{
|
||||
background: $text-price;
|
||||
border-radius: 0;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
413
pages/coupons/add.vue
Normal file
@@ -0,0 +1,413 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="coupons-preview">
|
||||
<view class="item cover">
|
||||
<view v-if="types[typeIndex].id == 2">
|
||||
<view class="cover-price">{{price || 0}}<text>元</text></view>
|
||||
<view class="cover-subtitle">代金券</view>
|
||||
</view>
|
||||
<view @click="updCover" v-else>
|
||||
<image class="cover-img" v-if="cover != ''" :src="cover" mode="aspectFill" />
|
||||
<image class="cover-img" v-else src="@/static/icons/add-icon.png" mode="aspectFill" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item mian">
|
||||
<view class="title nowrap">{{couponsTitle || '优惠券标题'}}</view>
|
||||
<block v-if="timeIndex == 0">
|
||||
<view class="time nowrap">{{datePickerValue.length == 0 ? '有效期': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="time nowrap">领取后{{timeNumber}}天内有效</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add-info">
|
||||
<view class="inputs">
|
||||
<label class="input-label">券类型</label>
|
||||
<picker :range="types" range-key="text" :value="typeIndex" data-type="typeIndex" @change="changePicker">
|
||||
<view class="input-text">{{types[typeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label class="input-label">券标题</label>
|
||||
<input type="text" v-model="couponsTitle" placeholder="输入优惠券标题" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label class="input-label">发券数量</label>
|
||||
<view class="input-number">
|
||||
<uni-number-box class="number" :min="1" :max="9999" :value="quantity" @change="quantityChange"></uni-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label class="input-label">每人限领</label>
|
||||
<view class="input-number">
|
||||
<uni-number-box class="number" :min="1" :max="quantity" :value="personQuantity" @change="personQuantityChange"></uni-number-box>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="types[typeIndex].id == 2">
|
||||
<view class="inputs">
|
||||
<label class="input-label">满</label>
|
||||
<input type="digit" v-model="full" placeholder="输入券最低消费金额" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label class="input-label">减</label>
|
||||
<input type="digit" v-model="price" placeholder="输入券优惠金额" />
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label class="input-label">使用渠道</label>
|
||||
<view class="input-checkbox">
|
||||
<radio-group @change="radioChange">
|
||||
<label class="input-checkbox-item">
|
||||
<radio color="#e93340" value="1" checked/>
|
||||
<text>线上优惠</text>
|
||||
</label>
|
||||
<label class="input-checkbox-item">
|
||||
<radio color="#e93340" value="2"/>
|
||||
<text>线下活动</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="inputs">
|
||||
<label class="input-label">时间类型</label>
|
||||
<picker :range="times" range-key="text" :value="timeIndex" data-type="timeIndex" @change="changePicker">
|
||||
<view class="input-text">{{times[timeIndex].text}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label class="input-label">{{timeIndex == 0 ? '券有效期': '延期天数'}}</label>
|
||||
<block v-if="timeIndex === 0">
|
||||
<view class="input-text" @click="showDatePicker = true">{{datePickerValue.length == 0 ? '选择优惠券有效期区间': datePickerValue[0] + ' 至 ' + datePickerValue[1]}}<uni-icons class="picker-icon" type="arrowdown" size="14" /></view>
|
||||
<tn-date-picker :show="showDatePicker" :monthNum="12" color="#e93340" :showTips="true" beginText="开始日期" endText="结束日期" @confirm="confirmDatePicker" @cancel="showDatePicker = false"/>
|
||||
</block>
|
||||
<block v-if="timeIndex === 1">
|
||||
<view class="input-number">
|
||||
<uni-number-box class="number" :min="1" :value="timeNumber" @change="timeNumberChange"></uni-number-box>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="inputs">
|
||||
<label class="input-label">关联商品</label>
|
||||
<view class="input-text" @click="onSelectGoods">
|
||||
<block v-if="coupongoods.length > 0">已关联{{coupongoods.length}}件商品</block>
|
||||
<block v-else>选择关联商品</block>
|
||||
<uni-icons class="picker-icon" type="arrowdown" size="14" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="add-textarea">
|
||||
<label>使用规则</label>
|
||||
<textarea :maxlength="-1" v-model="description" placeholder="输入使用规则说明" />
|
||||
</view>
|
||||
<view class="add-btn ios-bottom">
|
||||
<button type="default" @click="updComponent">发布优惠券</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TnDatePicker from "@/components/tn-datepicker/tn-datepicker";
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
import { pushCoupons } from '@/apis/interfaces/coupons'
|
||||
export default {
|
||||
components:{
|
||||
TnDatePicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
typeIndex : 0,
|
||||
types : [
|
||||
{ id: 1, text: '服务券' },
|
||||
{ id: 2, text: '代金券' },
|
||||
{ id: 3, text: '提货券' },
|
||||
],
|
||||
timeIndex : 0,
|
||||
times : [
|
||||
{ type: 2, text: '固定时间(区间范围)' },
|
||||
{ type: 1, text: '延期券(用户领取后有效天数)' }
|
||||
],
|
||||
showDatePicker : false, // 活动弹出层时间
|
||||
datePickerValue : [], // 活动时间
|
||||
cover : '', // 优惠券图标
|
||||
useWay : 1, // 使用途径
|
||||
couponsTitle : '', // 优惠券标题
|
||||
quantity : 1, // 发券数量
|
||||
personQuantity : 1, // 每人限领
|
||||
full : '', // 满足金额
|
||||
price : '', // 减少金额
|
||||
description : '', // 使用规则
|
||||
coupongoods : [], // 关联商品
|
||||
timeNumber : 1 // 延期券时间
|
||||
};
|
||||
},
|
||||
onShow(){
|
||||
this.coupongoods = this.$store.getters.getCoupongoods
|
||||
},
|
||||
methods:{
|
||||
// 发券数量
|
||||
quantityChange(value){
|
||||
this.quantity = value
|
||||
},
|
||||
// 每人限领
|
||||
personQuantityChange(value){
|
||||
this.personQuantity = value
|
||||
},
|
||||
// 延期券时间
|
||||
timeNumberChange(value){
|
||||
this.timeNumber = value
|
||||
},
|
||||
// 使用渠道
|
||||
radioChange(e){
|
||||
this.useWay = e.detail.value
|
||||
},
|
||||
// 选择
|
||||
changePicker(e){
|
||||
this[e.target.dataset.type] = e.detail.value
|
||||
},
|
||||
// 日期
|
||||
confirmDatePicker(e){
|
||||
this.datePickerValue = e.value
|
||||
this.showDatePicker = false
|
||||
},
|
||||
// 上传优惠券封面
|
||||
updCover(){
|
||||
uni.chooseImage({
|
||||
crop: {width: 300, height: 300},
|
||||
success: path=> {
|
||||
uploads([{
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.cover = res.url[0]
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 选择关联商品
|
||||
onSelectGoods(){
|
||||
this.$Router.push({name: 'selectGoods', params: {type: this.types[this.typeIndex].id}})
|
||||
},
|
||||
// 发布优惠券
|
||||
updComponent(){
|
||||
let valuss = {
|
||||
title : this.couponsTitle,
|
||||
cover : this.cover,
|
||||
type : this.types[this.typeIndex].id,
|
||||
full : this.full || 0,
|
||||
price : this.price || 0,
|
||||
quantity : this.quantity,
|
||||
use_way : this.useWay,
|
||||
person_quantity : this.personQuantity,
|
||||
start_at : this.datePickerValue[0],
|
||||
end_at : this.datePickerValue[1],
|
||||
description : this.description,
|
||||
time_type : this.times[this.typeIndex].type,
|
||||
days : this.timeNumber,
|
||||
goodsable_ids : this.coupongoods
|
||||
}
|
||||
|
||||
pushCoupons(valuss).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : res,
|
||||
showCancel : false,
|
||||
confirmText : '确定',
|
||||
confirmColor: '#e93340',
|
||||
success : modalRes => {
|
||||
this.$store.commit('setCoupongoods', [])
|
||||
this.$Router.back()
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.add-btn{
|
||||
padding: $padding;
|
||||
button{
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
background: $text-price;
|
||||
color: white;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
border-radius: 0;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 优惠券详情
|
||||
.add-textarea{
|
||||
background: white;
|
||||
margin-top: $margin;
|
||||
padding: $padding $padding $padding ($padding + 180rpx);
|
||||
label{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
line-height: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
textarea{
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 40rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
}
|
||||
// 优惠券配置
|
||||
.add-info{
|
||||
background-color: white;
|
||||
padding: 0 $padding;
|
||||
.inputs{
|
||||
position: relative;
|
||||
padding-left: 180rpx;
|
||||
&::after{
|
||||
position: absolute;
|
||||
height: 1rpx;
|
||||
content: " ";
|
||||
background: $border-color;
|
||||
left: 0;
|
||||
right: -$padding;
|
||||
bottom: 0;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
.input-label{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
}
|
||||
.input-text,
|
||||
input{
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.input-text{
|
||||
position: relative;
|
||||
padding-right: 90rpx;
|
||||
.picker-icon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
.input-number{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 90rpx;
|
||||
}
|
||||
.input-checkbox{
|
||||
min-height: 90rpx;
|
||||
display: flex;
|
||||
.input-checkbox-item{
|
||||
line-height: 90rpx;
|
||||
margin-right: $margin;
|
||||
radio{
|
||||
transform:scale(0.8);
|
||||
margin-right: -15rpx;
|
||||
}
|
||||
text{
|
||||
padding: 0 ($padding/2);
|
||||
line-height: 50rpx;
|
||||
display: inline-block;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.inputs{}
|
||||
}
|
||||
}
|
||||
// 发布预览
|
||||
.coupons-preview{
|
||||
background: white;
|
||||
margin: $margin;
|
||||
border-radius: $radius/2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: $padding 0;
|
||||
.item{
|
||||
position: relative;
|
||||
padding: 0 $padding;
|
||||
}
|
||||
.cover{
|
||||
position: relative;
|
||||
border-right: dashed 3rpx $border-color;
|
||||
width: 148rpx;
|
||||
text-align: center;
|
||||
.cover-img{
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
border-radius: $radius/2;
|
||||
vertical-align: top;
|
||||
background: $border-color-lg;
|
||||
border:solid 1rpx $border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cover-price{
|
||||
padding-top: 24rpx;
|
||||
font-weight: bold;
|
||||
line-height: 58rpx;
|
||||
font-size: $title-size + 10;
|
||||
color: $text-price;
|
||||
text{
|
||||
font-size: 70%;
|
||||
padding-left: 5rpx;
|
||||
}
|
||||
}
|
||||
.cover-subtitle{
|
||||
padding-bottom: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
}
|
||||
&::after,&::before{
|
||||
position: absolute;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background: #f8f8f8;
|
||||
content: " ";
|
||||
right: -16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after{
|
||||
top: -($padding + 15);
|
||||
}
|
||||
&::before{
|
||||
bottom: -($padding + 15);
|
||||
}
|
||||
}
|
||||
.mian{
|
||||
justify-content: center;
|
||||
width: calc(100% - 148rpx - #{$padding*2});
|
||||
box-sizing: border-box;
|
||||
@extend .vertical;
|
||||
.title{
|
||||
font-size: $title-size-lg;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.time, .goods{
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
269
pages/coupons/magDetails.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view class="content" v-if="!isLoding">
|
||||
<view class="details">
|
||||
<view class="header">
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">优惠券标题</view>
|
||||
<view class="info-item-text">{{details.title}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">优惠券类型</view>
|
||||
<view class="info-item-text">{{details.type.text}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">上架状态</view>
|
||||
<view class="info-item-text">已{{details.status.text}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">使用渠道</view>
|
||||
<view class="info-item-text">{{details.use_way}}</view>
|
||||
</view>
|
||||
<view class="info-item" v-if="details.type.value === 2">
|
||||
<view class="info-item-title">满减</view>
|
||||
<view class="info-item-text">满{{details.price}}减{{details.full}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">券发放量</view>
|
||||
<view class="info-item-text">{{details.quantity}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">已发放量</view>
|
||||
<view class="info-item-text">{{details.grant_quantity}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">每人限领</view>
|
||||
<view class="info-item-text">{{details.person_quantity == 0 ? '不限制': details.person_quantity}}</view>
|
||||
</view>
|
||||
<block v-if="details.time_type.value === 1">
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">券有效期(起)</view>
|
||||
<view class="info-item-text">{{details.start_at}}</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">券有效期(止)</view>
|
||||
<view class="info-item-text">{{details.end_at}}</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="details.time_type.value === 2">
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">券有效期</view>
|
||||
<view class="info-item-text">领取后{{details.days}}天内有效</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="info-item">
|
||||
<view class="info-item-title">创建时间</view>
|
||||
<view class="info-item-text">{{details.created_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="mian">
|
||||
<block v-if="details.goods.length > 0">
|
||||
<view class="mian-title">关联商品</view>
|
||||
<view class="mian-goods">
|
||||
<view class="item" v-for="(item, index) in details.goods" :key="index">
|
||||
<view class="item-title nowrap">{{item.name}}</view>
|
||||
<view class="item-price nowrap">¥{{item.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="mian-title">使用说明</view>
|
||||
<view class="mian-text">
|
||||
<text>{{details.description || '-'}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
<!-- footer -->
|
||||
<view class="footer">
|
||||
<view class="footer-flex">
|
||||
<view class="item" @click="putStatus">{{details.status.value == 4 ? '上架': '下架'}}</view>
|
||||
<view class="item" @click="onCouponsRecommend">{{recommended ? '设为推荐': '已设为推荐'}}</view>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { magCouponsInfo, magCouponsStatus, magCouponsRecommend } from '@/apis/interfaces/coupons'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoding : true,
|
||||
recommended : false,
|
||||
details : {}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
magCouponsInfo(this.$Route.query.couponId).then(res => {
|
||||
this.recommended = res.can.recommended
|
||||
this.details = res
|
||||
this.isLoding = false
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 上下架
|
||||
putStatus(){
|
||||
magCouponsStatus(this.details.coupon_id).then(res => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon : 'none'
|
||||
})
|
||||
this.$set(this.details, 'status', this.details.status.value == 4 ? {'value': 2,'text': "上架"} : {'value': 4,'text': "下架"})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
// 设为推荐
|
||||
onCouponsRecommend(){
|
||||
magCouponsRecommend(this.details.coupon_id).then(res => {
|
||||
this.recommended = !this.recommended
|
||||
uni.showToast({
|
||||
title: res.message,
|
||||
icon : 'none'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// content
|
||||
.content{
|
||||
padding-bottom: $padding + 90;
|
||||
}
|
||||
// footer
|
||||
.footer{
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||
background: white;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: ($padding/2) $padding;
|
||||
.footer-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.item{
|
||||
line-height: 70rpx;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
color: $text-price;
|
||||
font-size: $title-size-lg;
|
||||
font-weight: bold;
|
||||
border-right: solid 1rpx $border-color;
|
||||
&:last-child{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.details{
|
||||
margin: $margin;
|
||||
background: white;
|
||||
border-radius: $radius;
|
||||
// 优惠券信息
|
||||
.header{
|
||||
position: relative;
|
||||
border-bottom: dashed 2rpx $border-color;
|
||||
padding: $padding;
|
||||
&::after,&::before{
|
||||
position: absolute;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background: #f8f8f8;
|
||||
content: " ";
|
||||
bottom: -16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after{
|
||||
left: -16rpx;
|
||||
}
|
||||
&::before{
|
||||
right: -16rpx;
|
||||
}
|
||||
.info{
|
||||
padding: $padding 0;
|
||||
text-align: center;
|
||||
.info-cover{
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
}
|
||||
.info-title{
|
||||
padding-top: $padding;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
}
|
||||
}
|
||||
.info-item{
|
||||
position: relative;
|
||||
padding-left: 200rpx;
|
||||
min-height: 60rpx;
|
||||
font-size: $title-size-lg;
|
||||
padding-bottom: $padding/3;
|
||||
&:last-child{
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.info-item-title{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
line-height: 50rpx;
|
||||
color: $text-color;
|
||||
}
|
||||
.info-item-text{
|
||||
line-height: 50rpx;
|
||||
color: $text-gray;
|
||||
text-align: right;
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 优惠券介绍
|
||||
.mian{
|
||||
padding: $padding;
|
||||
.mian-title{
|
||||
font-size: $title-size-lg;
|
||||
font-weight: bold;
|
||||
line-height: 50rpx;
|
||||
color: $text-color;
|
||||
}
|
||||
.mian-text{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
padding-top: $padding/3;
|
||||
}
|
||||
.mian-goods{
|
||||
padding-bottom: $padding;
|
||||
.item{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 60rpx;
|
||||
font-size: $title-size-m;
|
||||
padding-top: $padding/3;
|
||||
.item-title{
|
||||
width: 75%;
|
||||
color: $text-gray;
|
||||
}
|
||||
.item-price{
|
||||
width: 25%;
|
||||
color: $text-price;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
265
pages/coupons/management.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="header">
|
||||
<view class="tabs">
|
||||
<view class="item" :class="{'show': listType == ''}" @click="onTabs('')">全部</view>
|
||||
<view class="item" :class="{'show': listType == '1'}" @click="onTabs('1')">服务券</view>
|
||||
<view class="item" :class="{'show': listType == '2'}" @click="onTabs('2')">代金券</view>
|
||||
<view class="item" :class="{'show': listType == '3'}" @click="onTabs('3')">提货券</view>
|
||||
</view>
|
||||
<view class="tabs-type">
|
||||
<view class="item" :class="{'show': tabsType == ''}" @click="onTabsType('')">全部</view>
|
||||
<view class="item" :class="{'show': tabsType == 'shown'}" @click="onTabsType('shown')">已上架</view>
|
||||
<view class="item" :class="{'show': tabsType == 'unshown'}" @click="onTabsType('unshown')">已下架</view>
|
||||
<view class="item" :class="{'show': tabsType == 'expire'}" @click="onTabsType('expire')">即将过期</view>
|
||||
<view class="item" :class="{'show': tabsType == 'over'}" @click="onTabsType('over')">已过期</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="coupons.length > 0">
|
||||
<view class="coupons">
|
||||
<view class="coupons-flex" v-for="(item, index) in coupons" :key="index" @click="$Router.push({name: 'magDetails', params: {couponId: item.coupon_id}})">
|
||||
<view class="item cover">
|
||||
<view v-if="item.type.value === 2">
|
||||
<view class="cover-price">{{item.price || 0}}<text>元</text></view>
|
||||
<view class="cover-subtitle">代金券</view>
|
||||
</view>
|
||||
<image v-else class="cover-img" :src="item.cover" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<view class="item mian">
|
||||
<view class="title nowrap">{{item.title}}</view>
|
||||
<view class="time nowrap">
|
||||
<block v-if="item.time_type.value == 1">{{item.start_at}}至{{item.end_at}}</block>
|
||||
<block v-if="item.time_type.value == 2">领取后{{item.days}}天内有效</block>
|
||||
</view>
|
||||
<view class="tags nowrap">
|
||||
<text>已{{item.status.text}}</text>
|
||||
<text>{{item.goods_count}}商品可用</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="arrowright">
|
||||
<uni-icons type="arrowright" size="16" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="list-null">
|
||||
<view class="sub-title">暂无相关优惠券</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { toolsCoupons } from '@/apis/interfaces/coupons'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
listType: '',
|
||||
tabsType: '',
|
||||
coupons : [],
|
||||
pages : {}
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getCoupons()
|
||||
},
|
||||
methods:{
|
||||
// 选择类型
|
||||
onTabs(value){
|
||||
if(value == this.listType) return
|
||||
this.listType = value
|
||||
this.getCoupons()
|
||||
},
|
||||
// 状态筛选
|
||||
onTabsType(val){
|
||||
if(this.tabsType === val) return
|
||||
this.tabsType = val
|
||||
this.getCoupons()
|
||||
},
|
||||
// 数据列表
|
||||
getCoupons(){
|
||||
toolsCoupons({
|
||||
type : this.listType,
|
||||
status : this.tabsType
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
this.coupons = res.lists.data
|
||||
this.pages = res.lists.page
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
this.$Router.push({name: 'couponsAdd'})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// tabs
|
||||
.header{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
.tabs{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: white;
|
||||
padding: 15rpx 0;
|
||||
font-size: $title-size-lg;
|
||||
color: $text-gray;
|
||||
.item{
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
&.show{
|
||||
color: $text-price;
|
||||
border-bottom: solid 4rpx $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 类型
|
||||
.tabs-type{
|
||||
display: flex;
|
||||
padding: 20rpx 30rpx;
|
||||
background: white;
|
||||
.item{
|
||||
font-size: $title-size-sm;
|
||||
height: 46rpx;
|
||||
line-height: 46rpx;
|
||||
border-radius: 23rpx;
|
||||
padding: 0 ($padding - 10);
|
||||
background: white;
|
||||
margin-right: $margin/2;
|
||||
color: $text-gray;
|
||||
&.show{
|
||||
background-color: rgba($color: $text-price, $alpha: .1);
|
||||
color: $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 空提示
|
||||
.list-null{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
@extend .vertical;
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.icon{
|
||||
width: 288rpx;
|
||||
}
|
||||
}
|
||||
// 订单管理
|
||||
.coupons{
|
||||
padding-top: 180rpx;
|
||||
@extend .ios-bottom;
|
||||
.coupons-flex{
|
||||
position: relative;
|
||||
background: white;
|
||||
margin: $margin;
|
||||
border-radius: $radius/2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: $padding 70rpx $padding 0;
|
||||
.item{
|
||||
position: relative;
|
||||
padding: 0 $padding;
|
||||
}
|
||||
.arrowright{
|
||||
position: absolute;
|
||||
right: $margin;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@extend .vertical
|
||||
}
|
||||
.cover{
|
||||
position: relative;
|
||||
border-right: dashed 3rpx $border-color;
|
||||
width: 148rpx;
|
||||
text-align: center;
|
||||
.cover-img{
|
||||
width: 148rpx;
|
||||
height: 148rpx;
|
||||
border-radius: $radius/2;
|
||||
vertical-align: top;
|
||||
background: $border-color-lg;
|
||||
border:solid 1rpx $border-color;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cover-price{
|
||||
padding-top: 24rpx;
|
||||
font-weight: bold;
|
||||
line-height: 58rpx;
|
||||
font-size: $title-size + 10;
|
||||
color: $text-price;
|
||||
text{
|
||||
font-size: 70%;
|
||||
padding-left: 5rpx;
|
||||
}
|
||||
}
|
||||
.cover-subtitle{
|
||||
padding-bottom: 24rpx;
|
||||
line-height: 40rpx;
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
}
|
||||
&::after,&::before{
|
||||
position: absolute;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background: #f8f8f8;
|
||||
content: " ";
|
||||
right: -16rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&::after{
|
||||
top: -($padding + 15);
|
||||
}
|
||||
&::before{
|
||||
bottom: -($padding + 15);
|
||||
}
|
||||
}
|
||||
.mian{
|
||||
justify-content: center;
|
||||
width: calc(100% - 148rpx - #{$padding*2});
|
||||
box-sizing: border-box;
|
||||
@extend .vertical;
|
||||
.title{
|
||||
font-size: $title-size-lg;
|
||||
line-height: 50rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.time, .tags{
|
||||
color: $text-gray-m;
|
||||
font-size: $title-size-m;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
.tags{
|
||||
margin-top: 10rpx;
|
||||
text{
|
||||
background: $border-color-lg;
|
||||
color: $text-gray;
|
||||
padding: 0 ($padding/2);
|
||||
margin-right: ($margin/2);
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
243
pages/coupons/selectGoods.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 商品列表 -->
|
||||
<view class="lists">
|
||||
<view class="goods-item" v-for="(item, index) in goods" :key="index">
|
||||
<checkbox class="checkbox" :checked="item.isSelect" @click="onSelect(index)"/>
|
||||
<view class="mian">
|
||||
<image class="cover" :src="item.cover" mode="aspectFill" />
|
||||
<view class="title">{{item.title}}</view>
|
||||
<view class="subtitle">{{item.description}}</view>
|
||||
<view class="mian-flex">
|
||||
<view class="price"><text>¥</text>{{item.price}}</view>
|
||||
<view class="inventory">权证剩余{{item.stock}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
</view>
|
||||
<!-- footer -->
|
||||
<view class="footer">
|
||||
<view class="footer-flex">
|
||||
<view class="flex-checkbox">
|
||||
<checkbox class="checkbox" :checked="allSelect" @click="onAllSelect"/>
|
||||
<label for="all">
|
||||
<view class="text">全选</view>
|
||||
<view class="sub-text">已选{{selectGoods.length}}件</view>
|
||||
</label>
|
||||
</view>
|
||||
<view class="flex-button" @click="setGoods">确定</view>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { couponsGoods, couponsAddgoods } from '@/apis/interfaces/coupons'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
goods : [],
|
||||
selectGoods : [],
|
||||
allSelect : false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
couponsGoods({
|
||||
type: this.$Route.query.type
|
||||
}).then(res => {
|
||||
let coupongoodsIds = this.$store.getters.getCoupongoods,
|
||||
goodsArr = res
|
||||
for(let id of coupongoodsIds){
|
||||
let selectIndex = goodsArr.findIndex(val => val.goods_sku_id === id)
|
||||
goodsArr[selectIndex].isSelect = true
|
||||
}
|
||||
this.goods = goodsArr
|
||||
this.selectNumber()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 全选产品
|
||||
onAllSelect(){
|
||||
for(let val of this.goods){
|
||||
val.isSelect = !this.allSelect
|
||||
}
|
||||
this.selectNumber()
|
||||
},
|
||||
// 选择产品
|
||||
onSelect(index){
|
||||
const goodsItem = this.goods[index]
|
||||
goodsItem.isSelect = !goodsItem.isSelect
|
||||
this.$set(this.goods, index, goodsItem)
|
||||
this.selectNumber()
|
||||
},
|
||||
// 计算产品数量
|
||||
selectNumber(){
|
||||
let selectArr = [];
|
||||
for(let val of this.goods){
|
||||
if(val.isSelect) selectArr.push(val.goods_sku_id)
|
||||
}
|
||||
this.selectGoods = selectArr
|
||||
if(selectArr.length == this.goods.length && this.goods.length != 0) this.allSelect = true
|
||||
else this.allSelect = false
|
||||
},
|
||||
// 添加设置产品
|
||||
setGoods(){
|
||||
if(this.selectGoods.length <= 0){
|
||||
uni.showToast({
|
||||
title: '请选择优惠券关联商品',
|
||||
icon : 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
this.$store.commit('setCoupongoods', this.selectGoods)
|
||||
this.$Router.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 列表
|
||||
.lists{
|
||||
padding-bottom: ($padding + 10) + 70;
|
||||
.goods-item{
|
||||
background: white;
|
||||
padding: $padding $padding $padding ($padding + 70);
|
||||
position: relative;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
.checkbox{
|
||||
left: $padding;
|
||||
}
|
||||
.mian{
|
||||
position: relative;
|
||||
padding-left: $padding + 168;
|
||||
min-height: 168rpx;
|
||||
.cover{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 168rpx;
|
||||
height: 168rpx;
|
||||
}
|
||||
.title{
|
||||
font-size: $title-size-lg;
|
||||
line-height: 40rpx;
|
||||
height: 48rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.subtitle{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
height: 80rpx;
|
||||
line-height: 40rpx;
|
||||
margin-bottom: 8rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.mian-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.price{
|
||||
width: 50%;
|
||||
font-weight: bold;
|
||||
color: $text-price;
|
||||
font-size: $title-size;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
.inventory{
|
||||
width: 50%;
|
||||
text-align: right;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// footer
|
||||
.footer{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: white;
|
||||
padding: ($padding - 10) $padding;
|
||||
z-index: 99;
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||
.footer-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.flex-checkbox{
|
||||
position: relative;
|
||||
width: 50%;
|
||||
padding-right: $padding;
|
||||
padding-left: 70rpx;
|
||||
box-sizing: border-box;
|
||||
.text{
|
||||
font-size: $title-size-lg;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
color: $text-color;
|
||||
}
|
||||
.sub-text{
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
line-height: 40rpx;
|
||||
@extend .nowrap;
|
||||
}
|
||||
}
|
||||
.flex-button{
|
||||
background: $text-price;
|
||||
color: white;
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
border-radius: $radius/2;
|
||||
font-size: $title-size;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
// checkbox
|
||||
.checkbox{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -28rpx;
|
||||
.uni-checkbox-input{
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 50%;
|
||||
width: 46rpx;
|
||||
height: 46rpx;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
.uni-checkbox-input.uni-checkbox-input-checked{
|
||||
border: none;
|
||||
background: $text-price;
|
||||
}
|
||||
.uni-checkbox-input.uni-checkbox-input-checked::before{
|
||||
border-radius: 50%;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
color:#fff;
|
||||
background: transparent;
|
||||
transform:translate(-50%, -50%) scale(1);
|
||||
-webkit-transform:translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,19 +1,17 @@
|
||||
<template>
|
||||
<view>
|
||||
发现更多
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
<template>
|
||||
<view class="crystal">
|
||||
发现更多
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
37
pages/found/task.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<view>
|
||||
<task-list :taskArr= 'taskArr' />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { task } from '@/apis/interfaces/crystal'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
taskArr: []
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 获取列表
|
||||
this.taskInfo();
|
||||
},
|
||||
methods: {
|
||||
// 列表
|
||||
taskInfo() {
|
||||
// 领取水晶
|
||||
thawlog().then(res => {
|
||||
console.log(res)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err
|
||||
})
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
627
pages/goods/add.vue
Normal file
@@ -0,0 +1,627 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 商品图片 -->
|
||||
<view class="form-block">
|
||||
<view class="form-upd">
|
||||
<view class="form-title">商品轮播图<text>(首图封面图,点击预览,长按删除)</text></view>
|
||||
<view class="form-imgs">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in pictures"
|
||||
:key="index"
|
||||
@click="openImg(index, 'pictures')"
|
||||
@longpress="removeImg(index, 'pictures')"
|
||||
>
|
||||
<image class="item-cover" :src="item.showpath" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="item item-add" @click="updCover('pictures')">
|
||||
<image class="item-cover" src="@/static/icons/add-icon.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品基本信息 -->
|
||||
<view class="form-block">
|
||||
<view class="form-box inputs-flex">
|
||||
<label class="form-label">商品标题</label>
|
||||
<input type="text" v-model="name" placeholder="输入商品标题"/>
|
||||
</view>
|
||||
<view class="form-box inputs-flex">
|
||||
<label class="form-label">商品描述</label>
|
||||
<input type="text" v-model="description" placeholder="输入商品描述"/>
|
||||
</view>
|
||||
<view class="form-box inputs-flex">
|
||||
<label class="form-label">规格单位</label>
|
||||
<input type="text" v-model="skus_unit" placeholder="输入规格单位 如:件"/>
|
||||
</view>
|
||||
<view class="form-upd">
|
||||
<view class="form-title">商品详情(点击预览,长按删除)</view>
|
||||
<view class="form-imgs">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in content"
|
||||
:key="index"
|
||||
@click="openImg(index, 'content')"
|
||||
@longpress="removeImg(index, 'content')"
|
||||
>
|
||||
<image class="item-cover" :src="item.showpath" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="item item-add" @click="updCover('content')">
|
||||
<image class="item-cover" src="@/static/icons/add-icon.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品价格 -->
|
||||
<view class="form-block">
|
||||
<view class="form-box inputs-flex input-unit">
|
||||
<label class="form-label">市场价格</label>
|
||||
<input type="digit" v-model="skus_cost" placeholder="0.00"/>
|
||||
<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
|
||||
</view>
|
||||
<view class="form-box inputs-flex input-unit">
|
||||
<label class="form-label">销售价格</label>
|
||||
<input type="digit" v-model="skus_price" placeholder="0.00"/>
|
||||
<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
|
||||
</view>
|
||||
<view class="form-box inputs-flex input-unit">
|
||||
<label class="form-label">分销佣金</label>
|
||||
<input type="digit" v-model="skus_charge" placeholder="0.00"/>
|
||||
<text class="units">元{{skus_unit != '' ? '/' + skus_unit : ''}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品详情介绍 -->
|
||||
<view class="form-block">
|
||||
<view class="form-box picker-flex">
|
||||
<label class="form-label">支持易货</label>
|
||||
<view class="picker-switch">
|
||||
<switch :checked="isChange" color="#e93340" @change="pickerChange($event, 'isChange')"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-box inputs-flex" v-if="isChange">
|
||||
<label class="form-label">最低易货量</label>
|
||||
<input type="number" v-model="skus_number" placeholder="输入最低易货量"/>
|
||||
</view>
|
||||
<view class="form-box inputs-flex">
|
||||
<label class="form-label">发行权证数</label>
|
||||
<input type="number" v-model="skus_stock" placeholder="输入商品发行权证数"/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 售后服务 -->
|
||||
<view class="form-block">
|
||||
<view class="form-box picker-flex">
|
||||
<label class="form-label">配送方式</label>
|
||||
<picker :range="logisticArr" range-key="text" :value="logisticType" @change="pickerChange($event, 'logisticType')">
|
||||
<view class="picker-text">
|
||||
{{logisticArr[logisticType].text}}
|
||||
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-box picker-flex" v-if="logisticType === 1">
|
||||
<label class="form-label">关联店铺</label>
|
||||
<view class="picker-text" @click="opnePopup('storePopup')">
|
||||
已关联{{stores.length}}家店铺<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-box picker-flex">
|
||||
<label class="form-label">允许售后</label>
|
||||
<view class="picker-switch">
|
||||
<switch :checked="isPostSale" color="#e93340" @change="pickerChange($event, 'isPostSale')"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-box picker-flex">
|
||||
<label class="form-label">可选服务</label>
|
||||
<view class="picker-text" @click="opnePopup('categoryPopup')">
|
||||
已选{{services.length}}项服务<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 售后服务 -->
|
||||
<view class="form-block" v-if="type == 2">
|
||||
<view class="form-box picker-flex">
|
||||
<label class="form-label">到期时间</label>
|
||||
<picker mode="date" :value="expiriedAt" @change="pickerChange($event, 'expiriedAt')">
|
||||
<view class="picker-text">
|
||||
{{expiriedAt || '选择服务到期时间'}}
|
||||
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 可选服务 -->
|
||||
<uni-popup ref="categoryPopup">
|
||||
<view class="category-popup">
|
||||
<view class="header">
|
||||
<view class="title">选择商品服务</view>
|
||||
</view>
|
||||
<view class="category-flex">
|
||||
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in servicesArr" :key="index" @click="item.check = !item.check">
|
||||
<view class="category-name">{{item.name}}</view>
|
||||
<view class="category-content">{{item.content}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button type="default" size="default" @click="affirmCategory('services', 'categoryPopup')">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 选择店铺 -->
|
||||
<uni-popup ref="storePopup">
|
||||
<view class="category-popup">
|
||||
<view class="header">
|
||||
<view class="title">选择店铺</view>
|
||||
</view>
|
||||
<view class="category-flex">
|
||||
<view class="category-flex-item" :class="{'show' : item.check}" v-for="(item, index) in storesArr" :key="index" @click="item.check = !item.check">
|
||||
<view class="category-name">{{item.name}}</view>
|
||||
<view class="category-content">{{item.address}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button type="default" size="default" @click="affirmCategory('stores', 'storePopup')">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
<!-- 安全区 -->
|
||||
<view class="ios-bottom"></view>
|
||||
<!-- footer -->
|
||||
<view class="footer">
|
||||
<button class="footer-btn" type="default" @click="submitAdd">{{type == 2 ? '发布': '发布并认证'}}</button>
|
||||
<view class="ios-bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { managesGoodsCreate, managesCreate, managesGoodsEdit, managesGoodsPut } from '@/apis/interfaces/goods'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
categoryId : '', // 一级分类
|
||||
categoryCid : '', // 二级分类
|
||||
name : '', // 标题
|
||||
pictures : [], // 轮播图
|
||||
content : [], // 详情图
|
||||
description : '', // 商品描述
|
||||
isPostSale : false, // 是否允许售后
|
||||
services : [], // 商品服务
|
||||
skus_cost : '', // 市场价格
|
||||
skus_price : '', // 销售价格
|
||||
skus_number : 1, // 易货起购数量
|
||||
skus_unit : '件', // 规格文字
|
||||
skus_charge : '', // 分销佣金
|
||||
skus_stock : '', // 库存
|
||||
isChange : false, // 是否支持易货
|
||||
stores : [], // 关联店铺
|
||||
expiriedAt : '', // 活动到期时间
|
||||
logisticType: 0, // 配送方式
|
||||
logisticArr : [
|
||||
{text: '快递', type: 1},
|
||||
{text: '自提', type: 2}
|
||||
],
|
||||
// 配置信息
|
||||
storesArr : [], // 可选店铺
|
||||
tags : [], // 可选商品标签
|
||||
tagsIndex : 0, // 选择标签的下标
|
||||
servicesArr : [], // 可选服务
|
||||
type : 1, // 1为商品,2为服务
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// 编辑状态信息
|
||||
if(this.$Route.query.type && this.$Route.query.type === 'edit'){
|
||||
managesGoodsEdit(this.$Route.query.id).then(res => {
|
||||
let services = [], stores = []
|
||||
let servicesArr = res.services.map(val => {
|
||||
let check = (res.data.services.findIndex(obj => obj.service_id === val.service_id)) >= 0
|
||||
if(check){
|
||||
services.push(val.service_id)
|
||||
}
|
||||
return{
|
||||
check,
|
||||
...val
|
||||
}
|
||||
})
|
||||
let storesArr = res.stores.map(val => {
|
||||
let check = (res.data.stores.findIndex(obj => obj.store_id === val.store_id)) >= 0
|
||||
if(check){
|
||||
stores.push(val.store_id)
|
||||
}
|
||||
return {
|
||||
check,
|
||||
...val
|
||||
}
|
||||
})
|
||||
this.categoryId = res.data.category.category_id
|
||||
this.categoryCid = res.data.category_sub.category_id
|
||||
this.name = res.data.name
|
||||
this.content = res.data.content
|
||||
this.description = res.data.description
|
||||
this.pictures = res.data.pictures
|
||||
this.skus_cost = res.data.skus[0].cost
|
||||
this.skus_price = res.data.skus[0].price
|
||||
this.skus_number = res.data.skus[0].number
|
||||
this.skus_unit = res.data.skus[0].unit
|
||||
this.skus_charge = res.data.skus[0].charge
|
||||
this.skus_stock = res.data.skus[0].stock
|
||||
this.isPostSale = res.data.is_post_sale == 0
|
||||
this.isChange = res.data.is_change == 0
|
||||
this.logisticType= this.logisticArr.findIndex(val => val.type === res.data.logistic_type)
|
||||
this.servicesArr = servicesArr
|
||||
this.storesArr = storesArr
|
||||
this.services = services
|
||||
this.stores = stores
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
return
|
||||
}
|
||||
// 添加配置信息
|
||||
managesCreate({
|
||||
category_cid: this.$Route.query.cid
|
||||
}).then(res => {
|
||||
res.services = res.services.map(val => {
|
||||
return {
|
||||
check: false,
|
||||
...val
|
||||
}
|
||||
})
|
||||
res.stores = res.stores.map(val => {
|
||||
return {
|
||||
check: false,
|
||||
...val
|
||||
}
|
||||
})
|
||||
this.storesArr = res.stores
|
||||
this.tags = res.tags
|
||||
this.servicesArr= res.services
|
||||
this.type = res.type
|
||||
this.categoryId = this.$Route.query.id
|
||||
this.categoryCid= this.$Route.query.cid
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 选择商品服务
|
||||
opnePopup(key){
|
||||
this.$refs[key].open('bottom')
|
||||
},
|
||||
// 确认选择商品服务
|
||||
affirmCategory(key, popupKey){
|
||||
let keyArr = key == 'services' ? 'servicesArr' : 'storesArr'
|
||||
this[key] = []
|
||||
for(let val of this[keyArr]){
|
||||
if(val.check){
|
||||
this[key].push(val.service_id || val.store_id)
|
||||
}
|
||||
}
|
||||
this.$refs[popupKey].close()
|
||||
},
|
||||
// picker选择
|
||||
pickerChange(e, key){
|
||||
this[key] = e.detail.value
|
||||
},
|
||||
// 图片预览
|
||||
openImg(index, key){
|
||||
let paths = this[key].map(val => {
|
||||
return val.showpath
|
||||
})
|
||||
uni.previewImage({
|
||||
urls : paths,
|
||||
current : index,
|
||||
indicator: 'number'
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
removeImg(index, key){
|
||||
this[key].splice(index, 1)
|
||||
},
|
||||
// 上传图片
|
||||
updCover(key){
|
||||
uni.chooseImage({
|
||||
success : res => {
|
||||
let path = res.tempFiles.map((val, index) => {
|
||||
return {
|
||||
name: 'uploads' + index,
|
||||
uri : val.path
|
||||
}
|
||||
})
|
||||
uploads(path).then(updRes => {
|
||||
for(let i in updRes.path){
|
||||
this[key].push({
|
||||
path : updRes.path[i],
|
||||
showpath: updRes.url[i]
|
||||
})
|
||||
}
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 发布产品
|
||||
submitAdd(){
|
||||
let pictures = this.pictures.map(val => {return val.path}),
|
||||
content = this.content.map(val => {return val.path})
|
||||
|
||||
let submitData = {
|
||||
name : this.name,
|
||||
cover : this.pictures[0].path,
|
||||
category_id : this.categoryId,
|
||||
category_cid : this.categoryCid,
|
||||
pictures : pictures,
|
||||
content : content,
|
||||
description : this.description,
|
||||
is_post_sale : this.isPostSale ? 0 : 1,
|
||||
services : this.services,
|
||||
skus_cost : this.skus_cost,
|
||||
skus_price : this.skus_price,
|
||||
skus_number : this.skus_number,
|
||||
skus_unit : this.skus_unit,
|
||||
skus_charge : this.skus_charge,
|
||||
skus_stock : this.skus_stock,
|
||||
is_change : this.isChange ? 0 : 1,
|
||||
logistic_type: this.logisticArr[this.logisticType].type,
|
||||
stores : this.stores,
|
||||
expiried_at : this.expiriedAt
|
||||
}
|
||||
|
||||
let submitFund = this.$Route.query.type === 'edit' ? managesGoodsPut(this.$Route.query.id, submitData) : managesGoodsCreate(submitData)
|
||||
submitFund.then(res => {
|
||||
if(this.type === 2){
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '商品权证已发布,请耐心等待平台审核',
|
||||
showCancel : false,
|
||||
success : res => {
|
||||
if(res.confirm){
|
||||
this.$Router.back(this.$Route.query.type === 'edit' ? 1 : 2)
|
||||
}
|
||||
}
|
||||
})
|
||||
return
|
||||
}
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : this.$Route.query.type === 'edit' ? '商品权证已更新,是否立即补充产品附加信息认证?' : '商品权证已发布,是否立即补充产品附加信息认证?',
|
||||
cancelText : '稍后认证',
|
||||
confirmText : '立即认证',
|
||||
success : res => {
|
||||
if(res.cancel){
|
||||
this.$Router.back(this.$Route.query.type === 'edit' ? 1 : 2)
|
||||
}
|
||||
if(res.confirm){
|
||||
let goodsId = this.$Route.query.type === 'edit' ? this.$Route.query.id : res
|
||||
this.$Router.push({name: 'goodsAuth', params: { id: goodsId , type: 'goodsAdd', edit: this.$Route.query.type === 'edit'}})
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
padding-bottom: 150rpx;
|
||||
}
|
||||
// 表单
|
||||
.form-block{
|
||||
background: white;
|
||||
margin-top: $margin - 10;
|
||||
.form-box{
|
||||
position: relative;
|
||||
padding-left: 240rpx;
|
||||
padding-right: $padding;
|
||||
font-size: $title-size-lg;
|
||||
min-height: 80rpx;
|
||||
&::after{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: $margin;
|
||||
right: 0;
|
||||
height: 1rpx;
|
||||
content: " ";
|
||||
background: $border-color;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
.form-label{
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
line-height: 80rpx;
|
||||
top: 0;
|
||||
width: calc(240rpx - #{$margin});
|
||||
}
|
||||
}
|
||||
.inputs-flex{
|
||||
input{
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
.input-unit{
|
||||
padding-right: 200rpx;
|
||||
.units{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 200rpx;
|
||||
padding-right: $padding;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.picker-flex{
|
||||
.picker-text{
|
||||
position: relative;
|
||||
line-height: 80rpx;
|
||||
min-height: 80rpx;
|
||||
padding-right: 80rpx;
|
||||
@extend .nowrap;
|
||||
.picker-icon{
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.picker-switch{
|
||||
line-height: 80rpx;
|
||||
min-height: 80rpx;
|
||||
text-align: right;
|
||||
margin-right: -15rpx;
|
||||
switch{
|
||||
transform:scale(0.7)
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-upd{
|
||||
.form-title{
|
||||
font-size: $title-size-lg;
|
||||
line-height: 80rpx;
|
||||
padding: 0 $padding;
|
||||
text{
|
||||
font-size: 80%;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
.form-imgs{
|
||||
margin-top: -($margin/3);
|
||||
padding: 0 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
width: calc(20% - 14rpx);
|
||||
padding-top: calc(20% - 14rpx);
|
||||
margin: 7rpx;
|
||||
position: relative;
|
||||
.item-cover{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-add{
|
||||
border: dashed 2rpx $border-color;
|
||||
box-sizing: border-box;
|
||||
.item-cover{
|
||||
top: calc(15% - 2rpx);
|
||||
left: calc(15% - 2rpx);
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 发布
|
||||
.footer{
|
||||
background: white;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx $padding;
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||
z-index: 9;
|
||||
.footer-btn{
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: $text-price;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 可选服务
|
||||
.category-popup{
|
||||
background: #F5F5F5;
|
||||
padding: 0 $padding * 2 $padding * 2 $padding * 2;
|
||||
.header{
|
||||
padding: $padding*2 0;
|
||||
box-sizing: border-box;
|
||||
@extend .vertical;
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: $title-size + 14;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.subtitle{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.category-flex{
|
||||
max-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
.category-flex-item{
|
||||
margin-bottom: $margin;
|
||||
padding: $padding;
|
||||
background: white;
|
||||
border:solid 1rpx white;
|
||||
box-sizing: border-box;
|
||||
.category-name{
|
||||
padding-bottom: $padding/2;
|
||||
font-weight: bold;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.category-content{
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
@extend .ellipsis;
|
||||
}
|
||||
&.show{
|
||||
color: $text-price;
|
||||
border:solid 1rpx $text-price;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
padding-top: $padding * 2;
|
||||
button{
|
||||
background: $text-price;
|
||||
border-radius: 0;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
101
pages/goods/addClassify.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<template>
|
||||
<view class="content-flex" v-if="!loding">
|
||||
<scroll-view class="stair" scroll-y>
|
||||
<view class="stair-item" :class="{'show': stairIndex == index}" v-for="(item, index) in category" :key="index" @click="stairIndex = index">{{item.name}}</view>
|
||||
<view class="ios-bottom"></view>
|
||||
</scroll-view>
|
||||
<scroll-view class="second" scroll-y>
|
||||
<view class="second-item" v-for="(item, index) in category[stairIndex].children" :key="index" @click="onCategory(item.category_id)">
|
||||
{{item.name}}<uni-icons class="arrow-icon" type="arrowright" color="#999" size="14"></uni-icons>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { managesCategory } from '@/apis/interfaces/goods'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loding : true,
|
||||
category : [],
|
||||
stairIndex : 0,
|
||||
secondIndex : 0
|
||||
};
|
||||
},
|
||||
created() {
|
||||
managesCategory().then(res => {
|
||||
console.log(res)
|
||||
this.loding = false
|
||||
this.category = res
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 选择分类
|
||||
onCategory(cid){
|
||||
this.$Router.push({name: 'GoodsMagAdd', params: {cid, id: this.category[this.stairIndex].category_id}})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-flex{
|
||||
background-color: white;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
font-size: $title-size-m;
|
||||
.stair{
|
||||
background: #F5F5F5;
|
||||
width: 240rpx;
|
||||
.stair-item{
|
||||
text-align: center;
|
||||
padding: 0 $padding;
|
||||
line-height: 90rpx;
|
||||
color: $text-gray;
|
||||
@extend .nowrap;
|
||||
&.show{
|
||||
position: relative;
|
||||
background: white;
|
||||
color: $text-price;
|
||||
font-weight: bold;
|
||||
&::before{
|
||||
position: absolute;
|
||||
height: 40rpx;
|
||||
width: 5rpx;
|
||||
background: $text-price;
|
||||
content: " ";
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.second{
|
||||
width: calc(100% - 240rpx);
|
||||
.second-item{
|
||||
position: relative;
|
||||
padding: 0 ($padding + 80) 0 $padding;
|
||||
line-height: 90rpx;
|
||||
color: $text-gray;
|
||||
.arrow-icon{
|
||||
position: absolute;
|
||||
right: $padding;
|
||||
}
|
||||
&::after{
|
||||
position: absolute;
|
||||
height: 1rpx;
|
||||
content: ' ';
|
||||
background: $border-color;
|
||||
left: $padding;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
&:first-child::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
375
pages/goods/goodsAuth.vue
Normal file
@@ -0,0 +1,375 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="form-block">
|
||||
<view class="form-upd">
|
||||
<view class="form-title">产品实物图片<text>(点击预览,长按删除)</text></view>
|
||||
<view class="form-imgs">
|
||||
<view
|
||||
class="item"
|
||||
v-if="extendCover.length > 0"
|
||||
@click="openImg"
|
||||
@longpress="extendCover = []"
|
||||
>
|
||||
<image class="item-cover" :src="extendCover[0].showpath" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="item item-add" v-else @click="updCover">
|
||||
<image class="item-cover" src="@/static/icons/add-icon.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 商品基本信息 -->
|
||||
<view class="form-block">
|
||||
<view class="form-box picker-flex">
|
||||
<label class="form-label">生产日期</label>
|
||||
<picker mode="date" :value="productedAt" @change="pickerChange($event, 'productedAt')">
|
||||
<view class="picker-text">
|
||||
{{productedAt || '选择商品生产日期'}}
|
||||
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-box picker-flex">
|
||||
<label class="form-label">过期时间</label>
|
||||
<picker mode="date" :value="expiriedAt" @change="pickerChange($event, 'expiriedAt')">
|
||||
<view class="picker-text">
|
||||
{{expiriedAt || '选择商品过期时间'}}
|
||||
<uni-icons class="picker-icon" type="arrowright" color="#999"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="form-box inputs-flex">
|
||||
<label class="form-label">生产商名称</label>
|
||||
<input type="text" v-model="productName" placeholder="输入商品生产商名称"/>
|
||||
</view>
|
||||
<view class="form-box inputs-flex">
|
||||
<label class="form-label">生产许可证号</label>
|
||||
<input type="text" v-model="lisence" placeholder="输入商品生产许可证号"/>
|
||||
</view>
|
||||
|
||||
<view class="form-box inputs-flex">
|
||||
<label class="form-label">生产商地址</label>
|
||||
<input type="text" v-model="productAddress" placeholder="输入商品生产商地址"/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 安全区 -->
|
||||
<view class="ios-bottom"></view>
|
||||
<!-- footer -->
|
||||
<view class="footer">
|
||||
<button class="footer-btn" type="default" @click="submitAdd">提交认证审核</button>
|
||||
<view class="ios-bottom"></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { managesGoodsAuth, managesGoodsExtends } from '@/apis/interfaces/goods'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
productedAt : '', // 生产日期
|
||||
expiriedAt : '', // 过期时间
|
||||
lisence : '', // 生产许可证号
|
||||
productName : '', // 生产商名称
|
||||
productAddress : '', // 生产商地址
|
||||
extendCover : [] // 实物图片
|
||||
};
|
||||
},
|
||||
created() {
|
||||
if(this.$Route.query.edit == 'true'){
|
||||
managesGoodsExtends(this.$Route.query.id).then(res => {
|
||||
this.productedAt = res.producted_at
|
||||
this.expiriedAt = res.expiried_at
|
||||
this.lisence = res.lisence
|
||||
this.productName = res.product_name
|
||||
this.productAddress = res.product_address
|
||||
this.extendCover = [{...res.cover}]
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// picker选择
|
||||
pickerChange(e, key){
|
||||
this[key] = e.detail.value
|
||||
},
|
||||
// 图片预览
|
||||
openImg(){
|
||||
let paths = this.extendCover.map(val => {
|
||||
return val.showpath
|
||||
})
|
||||
uni.previewImage({
|
||||
urls : paths,
|
||||
current : 0,
|
||||
indicator: 'number'
|
||||
})
|
||||
},
|
||||
// 上传图片
|
||||
updCover(){
|
||||
uni.chooseImage({
|
||||
count : 1,
|
||||
success : res => {
|
||||
uploads([{
|
||||
uri : res.tempFilePaths[0]
|
||||
}]).then(updRes => {
|
||||
this.extendCover.push({
|
||||
path : updRes.path[0],
|
||||
showpath: updRes.url[0]
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 发布产品
|
||||
submitAdd(){
|
||||
let submitData = {
|
||||
producted_at : this.productedAt,
|
||||
expiried_at : this.expiriedAt,
|
||||
lisence : this.lisence,
|
||||
product_name : this.productName,
|
||||
product_address : this.productAddress,
|
||||
extend_cover : this.extendCover[0].path
|
||||
}
|
||||
let submitFund = managesGoodsAuth(this.$Route.query.id, submitData)
|
||||
submitFund.then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '商品权证认证信息已提交,请耐心等待平台审核',
|
||||
showCancel : false,
|
||||
success : res => {
|
||||
if(res.confirm){
|
||||
if(this.$Route.query.type == 'goodsAdd'){
|
||||
this.$Router.back(this.$Route.query.edit == 'true' ? 2 : 3)
|
||||
}else{
|
||||
this.$Router.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
padding-bottom: 150rpx;
|
||||
}
|
||||
// 表单
|
||||
.form-block{
|
||||
background: white;
|
||||
margin-top: $margin - 10;
|
||||
.form-box{
|
||||
position: relative;
|
||||
padding-left: 240rpx;
|
||||
padding-right: $padding;
|
||||
font-size: $title-size-lg;
|
||||
min-height: 80rpx;
|
||||
&::after{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: $margin;
|
||||
right: 0;
|
||||
height: 1rpx;
|
||||
content: " ";
|
||||
background: $border-color;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
.form-label{
|
||||
position: absolute;
|
||||
left: $margin;
|
||||
line-height: 80rpx;
|
||||
top: 0;
|
||||
width: calc(240rpx - #{$margin});
|
||||
}
|
||||
}
|
||||
.inputs-flex{
|
||||
input{
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
}
|
||||
.input-unit{
|
||||
padding-right: 200rpx;
|
||||
.units{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
line-height: 80rpx;
|
||||
height: 80rpx;
|
||||
width: 200rpx;
|
||||
padding-right: $padding;
|
||||
text-align: right;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
.picker-flex{
|
||||
.picker-text{
|
||||
position: relative;
|
||||
line-height: 80rpx;
|
||||
min-height: 80rpx;
|
||||
padding-right: 80rpx;
|
||||
@extend .nowrap;
|
||||
.picker-icon{
|
||||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.picker-switch{
|
||||
line-height: 80rpx;
|
||||
min-height: 80rpx;
|
||||
text-align: right;
|
||||
margin-right: -15rpx;
|
||||
switch{
|
||||
transform:scale(0.7)
|
||||
}
|
||||
}
|
||||
}
|
||||
.form-upd{
|
||||
.form-title{
|
||||
font-size: $title-size-lg;
|
||||
line-height: 80rpx;
|
||||
padding: 0 $padding;
|
||||
text{
|
||||
font-size: 80%;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
.form-imgs{
|
||||
margin-top: -($margin/3);
|
||||
padding: 0 20rpx 20rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
width: calc(20% - 14rpx);
|
||||
padding-top: calc(20% - 14rpx);
|
||||
margin: 7rpx;
|
||||
position: relative;
|
||||
.item-cover{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.item-add{
|
||||
border: dashed 2rpx $border-color;
|
||||
box-sizing: border-box;
|
||||
.item-cover{
|
||||
top: calc(15% - 2rpx);
|
||||
left: calc(15% - 2rpx);
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 发布
|
||||
.footer{
|
||||
background: white;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20rpx $padding;
|
||||
box-shadow: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .02);
|
||||
z-index: 9;
|
||||
.footer-btn{
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: $text-price;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 可选服务
|
||||
.category-popup{
|
||||
background: #F5F5F5;
|
||||
padding: 0 $padding * 2 $padding * 2 $padding * 2;
|
||||
.header{
|
||||
padding: $padding*2 0;
|
||||
box-sizing: border-box;
|
||||
@extend .vertical;
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: $title-size + 14;
|
||||
font-weight: bold;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
.subtitle{
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.category-flex{
|
||||
max-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
.category-flex-item{
|
||||
margin-bottom: $margin;
|
||||
padding: $padding;
|
||||
background: white;
|
||||
border:solid 1rpx white;
|
||||
box-sizing: border-box;
|
||||
.category-name{
|
||||
padding-bottom: $padding/2;
|
||||
font-weight: bold;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
.category-content{
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
@extend .ellipsis;
|
||||
}
|
||||
&.show{
|
||||
color: $text-price;
|
||||
border:solid 1rpx $text-price;
|
||||
}
|
||||
&:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns{
|
||||
padding-top: $padding * 2;
|
||||
button{
|
||||
background: $text-price;
|
||||
border-radius: 0;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
260
pages/goods/management.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 分类 -->
|
||||
<view class="tabs">
|
||||
<view class="item" :class="{'show': status == '0'}" @click="onTabs('0')">已发布</view>
|
||||
<view class="item" :class="{'show': status == '1'}" @click="onTabs('1')">待认证</view>
|
||||
<view class="item" :class="{'show': status == '2'}" @click="onTabs('2')">审核中</view>
|
||||
<view class="item" :class="{'show': status == '3'}" @click="onTabs('3')">已驳回</view>
|
||||
</view>
|
||||
<!-- 优选商品 -->
|
||||
<goodsList :list="goods" priceType="CNY" :status='status' toast="暂无产品权证">
|
||||
<template v-slot:statistics="goods">
|
||||
<view>库存{{goods.value.stock}}</view>
|
||||
</template>
|
||||
<template v-slot:footer="goods">
|
||||
<view class="footer-btns">
|
||||
<block v-if="status == '0'">
|
||||
<button class="button-item" size="mini" @click="openLay(goods.value, 'goodsBurn')">燃烧</button>
|
||||
<button class="button-item" size="mini" @click="openLay(goods.value, 'goodsMint')">增发</button>
|
||||
</block>
|
||||
<block v-if="status == '1'">
|
||||
<button class="button-item" size="mini" @click="goodsAuth(goods.value.goods_id)">认证</button>
|
||||
<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
|
||||
</block>
|
||||
<block v-if="status == '2'">
|
||||
<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
|
||||
</block>
|
||||
<block v-if="status == '3'">
|
||||
<button class="button-item" size="mini" @click="goodsPut(goods.value.goods_id, goods.value.reason)">驳回原因</button>
|
||||
<button class="button-item" size="mini" @click="goodsRemove(goods.value.goods_id)">删除</button>
|
||||
</block>
|
||||
</view>
|
||||
</template>
|
||||
</goodsList>
|
||||
<!-- 燃烧 增发 弹窗 -->
|
||||
<uni-popup ref="popupLay" :safe-area="true" background-color="#ffffff">
|
||||
<view class="popup">
|
||||
<view class="title">库存{{stockType == 'goodsMint' ? '增发': '燃烧'}}</view>
|
||||
<view class="des">
|
||||
剩余库存
|
||||
<text>{{itemGoods.stock}}</text>
|
||||
</view>
|
||||
<view class="des">
|
||||
数量
|
||||
<uni-number-box v-model='stock' :min="1" :max="stockType == 'goodsBurn' ? itemGoods.stock : 9999"></uni-number-box>
|
||||
</view>
|
||||
<view class="btn" @click="additionalOrBurning">确认</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { managesGoodsIndex, managesGoodsDelete, managesGoodsBurn, managesGoodsMint, managesGoodsCreateBefore } from '@/apis/interfaces/goods'
|
||||
import goodsList from '@/components/goods-list/goods-list'
|
||||
export default {
|
||||
components: {
|
||||
goodsList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status : 0,
|
||||
goods : [],
|
||||
pages : {},
|
||||
itemGoods : {},
|
||||
stock : 1,
|
||||
stockType : ''
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
// tabs
|
||||
onTabs(value){
|
||||
if(value == this.status) return
|
||||
this.goods = []
|
||||
this.status = value
|
||||
this.getList()
|
||||
},
|
||||
// 权证列表
|
||||
getList(){
|
||||
managesGoodsIndex({
|
||||
status: this.status
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
this.goods = res.data
|
||||
this.pages = res.page
|
||||
})
|
||||
},
|
||||
// 修改产品
|
||||
goodsPut(id, text){
|
||||
uni.showModal({
|
||||
title : '驳回原因',
|
||||
content : text,
|
||||
confirmText : '编辑',
|
||||
cancelText : '确定',
|
||||
success : res => {
|
||||
if(res.confirm){
|
||||
this.$Router.push({name: 'GoodsMagAdd', params: {type: 'edit', id}})
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 商品认证
|
||||
goodsAuth(id){
|
||||
this.$Router.push({name: 'goodsAuth', params: {id, type: 'magList'}})
|
||||
},
|
||||
// 燃烧,增发
|
||||
openLay(item, type){
|
||||
this.itemGoods = item
|
||||
this.stockType = type
|
||||
this.stock = 1
|
||||
this.$refs.popupLay.open('bottom')
|
||||
},
|
||||
// 提交燃烧,增发
|
||||
additionalOrBurning(){
|
||||
let data = {
|
||||
id : this.itemGoods.goods_id,
|
||||
stock: this.stock
|
||||
}
|
||||
switch (this.stockType){
|
||||
case 'goodsBurn':
|
||||
managesGoodsBurn({...data}).then(res => {
|
||||
let goodsIndex = this.goods.findIndex(val => val.goods_id === this.itemGoods.goods_id)
|
||||
this.itemGoods.stock -= data.stock
|
||||
this.$refs.popupLay.close()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
break;
|
||||
case 'goodsMint':
|
||||
managesGoodsMint({...data}).then(res => {
|
||||
let goodsIndex = this.goods.findIndex(val => val.goods_id === this.itemGoods.goods_id)
|
||||
this.itemGoods.stock += data.stock
|
||||
this.$refs.popupLay.close()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
break;
|
||||
default:
|
||||
uni.showToast({
|
||||
title: '类型错误',
|
||||
icon : 'none'
|
||||
})
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 移出删除商品
|
||||
goodsRemove(id){
|
||||
let index = this.goods.findIndex(val => val.goods_id == id)
|
||||
managesGoodsDelete(id).then(res => {
|
||||
this.goods.splice(index,1)
|
||||
if(this.goods.length === 0) this.getList()
|
||||
uni.showToast({
|
||||
title: '商品权证已删除',
|
||||
icon : 'none'
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon: 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap() {
|
||||
this.$Router.push({name: 'addClassify'})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
padding-top: 90rpx;
|
||||
}
|
||||
// tabs
|
||||
.tabs{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 99;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background: white;
|
||||
padding: 15rpx 0;
|
||||
font-size: $title-size-lg;
|
||||
color: $text-gray;
|
||||
.item{
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
&.show{
|
||||
color: $text-price;
|
||||
border-bottom: solid 4rpx $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 按钮组
|
||||
.footer-btns{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: $padding/2;
|
||||
margin-left: -10rpx;
|
||||
margin-right: -10rpx;
|
||||
.button-item[size='mini']{
|
||||
padding: 0;
|
||||
margin: 0 10rpx;
|
||||
height: 60rpx;
|
||||
line-height: 60rpx;
|
||||
border-radius: 0;
|
||||
flex: 1;
|
||||
background: $border-color-lg;
|
||||
color: $text-gray;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 增发燃烧弹窗
|
||||
.popup {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
padding-bottom: $padding;
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
text-align: center;
|
||||
padding: 50rpx 30rpx 30rpx 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn {
|
||||
background-color: $text-price;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
margin: $padding * 2;
|
||||
}
|
||||
.des {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: $padding $padding * 2;
|
||||
color: $text-gray;
|
||||
text{
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
173
pages/index/deal.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="deal-back"></view>
|
||||
<!-- 区块信息 -->
|
||||
<view class="block-shadow chian-hash">
|
||||
<view class="title">区块HASH</view>
|
||||
<view class="hash">{{info.hash || '-'}}</view>
|
||||
<view class="button" @click="copyHash">复制</view>
|
||||
<view class="chian-info">
|
||||
<view class="item-flex">
|
||||
<view class="label webkit-box">交易数据</view>
|
||||
<view class="ellipsis">
|
||||
{{ info.tx_count || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-flex">
|
||||
<view class="label webkit-box">区块高度</view>
|
||||
<view class="ellipsis">
|
||||
{{ info.height || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-flex">
|
||||
<view class="label webkit-box">时间</view>
|
||||
<view class="ellipsis">
|
||||
{{ info.block_time || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-flex webkit-box">
|
||||
<view class="label">上一块</view>
|
||||
<view class="ellipsis">
|
||||
{{ info.parent_hash || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-flex webkit-box">
|
||||
<view class="label">区块难度</view>
|
||||
<view class="ellipsis">
|
||||
{{ info.difficulty || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-flex webkit-box">
|
||||
<view class="label">默克尔跟</view>
|
||||
<view class="ellipsis">
|
||||
{{ info.tx_hash || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-flex">
|
||||
<view class="label">状态哈希</view>
|
||||
<view class="ellipsis">
|
||||
{{ info.state_hash || '-' }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 交易记录 -->
|
||||
<view class="deals">
|
||||
<view class="title">交易记录</view>
|
||||
<deal-list :list="deal" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { hash } from '@/apis/interfaces/chain'
|
||||
import dealList from '@/components/chain/deal'
|
||||
export default {
|
||||
components:{
|
||||
dealList
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
info: {},
|
||||
deal: [],
|
||||
}
|
||||
},
|
||||
onLoad(e){
|
||||
// 交易详情
|
||||
if(e.hash && e.hash != '') hash(e.hash).then(res=>{
|
||||
this.info = res.head
|
||||
this.deal = res.trades
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '错误 22 line in chain/deal'
|
||||
})
|
||||
})
|
||||
else uni.showToast({
|
||||
icon: 'none',
|
||||
title: 'hash值不存在,系统错误'
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
copyHash(){
|
||||
if(this.info.hash) uni.setClipboardData({
|
||||
data: this.info.hash
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.block-shadow{
|
||||
box-shadow: 0 0 2rpx 2rpx rgba($color: #000000, $alpha: .02);
|
||||
}
|
||||
// 背景
|
||||
.deal-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to bottom, #009B69, #00562d);
|
||||
}
|
||||
// 区块详情
|
||||
.chian-hash{
|
||||
margin: $margin + ($margin/2);
|
||||
background-color: white;
|
||||
padding: ($padding * 3) ($padding * 2);
|
||||
border-radius: $radius;
|
||||
text-align: center;
|
||||
.title{
|
||||
font-size: $title-size + 8;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
}
|
||||
.hash{
|
||||
padding: $padding 0 ($padding*2) 0;
|
||||
word-wrap: break-word;
|
||||
color: $text-gray;
|
||||
}
|
||||
.button{
|
||||
background-color: $red-color;
|
||||
width: 50%;
|
||||
display: inline-block;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
color: white;
|
||||
font-size: $title-size;
|
||||
border-radius: 45rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.chian-info{
|
||||
margin-top: $margin * 2;
|
||||
background-color: $border-color-lg;
|
||||
padding: $padding;
|
||||
.item-flex{
|
||||
padding-left: 220rpx;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
line-height: 70rpx;
|
||||
min-height: 70rpx;
|
||||
.label{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 200rpx;
|
||||
text-align: left;
|
||||
color: $text-gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 区块交易信息
|
||||
.deals{
|
||||
padding: $padding;
|
||||
.title{
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
font-size: $title-size;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="content">
|
||||
发现能量
|
||||
</view>
|
||||
</template>
|
||||
@@ -15,5 +15,5 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
209
pages/index/info.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 区块信息 -->
|
||||
<view class="info-back"></view>
|
||||
<view class="info-list">
|
||||
<view class="flex" v-for="(item, index) in assetsList" :key="index">
|
||||
<view class="item-name ellipsis">
|
||||
<image class="icon" :src="item.icon" mode="widthFix" />
|
||||
{{ item.name || '-' }}
|
||||
</view>
|
||||
<view class="item-label">
|
||||
<view class="number ellipsis">{{ item.balance || '0.00' }}</view>
|
||||
<view class="unit ellipsis">{{ item.symbol || '-' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 区块链变化 -->
|
||||
<view class="movements">
|
||||
<view class="title">区块链变化</view>
|
||||
<view class="chart">
|
||||
<l-f2 ref="chartChange"></l-f2>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 区块记录 -->
|
||||
<view class="chain-record">
|
||||
<view class="title">区块记录</view>
|
||||
<chain-list :list="chainList" @onChain="chainInfo"/>
|
||||
</view>
|
||||
<!-- 底部安全区 -->
|
||||
<view class="ios-bottom"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chain, situation } from '@/apis/interfaces/chain'
|
||||
import chainList from '@/components/chain/chain'
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||||
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||
export default {
|
||||
components: {
|
||||
chainList,
|
||||
lF2
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [{
|
||||
time: '2021-08-08 00:00:00',
|
||||
value: 30
|
||||
}, {
|
||||
time: '2021-08-09 00:10:00',
|
||||
value: 36
|
||||
}, {
|
||||
time: '2021-08-10 00:12:00',
|
||||
value: 38
|
||||
}, {
|
||||
time: '2021-08-11 10:32:00',
|
||||
value: 40
|
||||
}, {
|
||||
time: '2021-08-13 12:30:00',
|
||||
value: 40
|
||||
}, {
|
||||
time: '2021-08-14 11:02:00',
|
||||
value: 41
|
||||
}, {
|
||||
time: '2021-08-15 10:02:00',
|
||||
value: 41
|
||||
}],
|
||||
assetsList: [],
|
||||
chainList: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
Promise.all([chain(), situation()]).then(res => {
|
||||
this.chainList = res[0]
|
||||
this.assetsList = res[1].assets
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: 'err in chain/info.vue ' + err
|
||||
})
|
||||
})
|
||||
this.$refs.chartChange.init(config => {
|
||||
const chart = new F2.Chart(config);
|
||||
chart.source(this.data, {
|
||||
time: {
|
||||
type: 'timeCat',
|
||||
tickCount: 3,
|
||||
range: [ 0, 1 ]
|
||||
},
|
||||
value: {
|
||||
tickCount: 5,
|
||||
min: 0
|
||||
}
|
||||
});
|
||||
chart.axis('time', {
|
||||
label: function label(text, index, total) {
|
||||
const textCfg = {};
|
||||
if (index === 0) {
|
||||
textCfg.textAlign = 'left';
|
||||
} else if (index === total - 1) {
|
||||
textCfg.textAlign = 'right';
|
||||
}
|
||||
return textCfg;
|
||||
}
|
||||
});
|
||||
chart.tooltip({
|
||||
showCrosshairs: true
|
||||
});
|
||||
chart.area()
|
||||
.position('time*value')
|
||||
.color('l(90) 0:#009b69 1:#f7f7f7')
|
||||
.shape('smooth');
|
||||
chart.line()
|
||||
.position('time*value')
|
||||
.color('l(90) 0:#009b69 1:#f7f7f7')
|
||||
.shape('smooth');
|
||||
chart.render();
|
||||
return chart;
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
// 区块详情
|
||||
chainInfo(e){
|
||||
uni.navigateTo({
|
||||
url: './deal?hash=' + e.hash
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 背景
|
||||
.info-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to bottom, #009B69, #00562d);
|
||||
}
|
||||
|
||||
// 区块信息
|
||||
.info-list {
|
||||
padding: 0 $padding;
|
||||
|
||||
.flex {
|
||||
margin: $margin * 2 $margin/2;
|
||||
background-color: white;
|
||||
border-radius: $radius;
|
||||
padding: $padding * 2;
|
||||
box-shadow: 0 0 2rpx 2rpx rgba($color: #000000, $alpha: .02);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.item-name {
|
||||
width: 50%;
|
||||
font-size: $title-size;
|
||||
|
||||
.icon {
|
||||
width: 38rpx;
|
||||
height: 38rpx;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 5rpx;
|
||||
margin-right: $margin;
|
||||
}
|
||||
}
|
||||
|
||||
.item-label {
|
||||
width: 50%;
|
||||
padding-left: $padding;
|
||||
text-align: right;
|
||||
|
||||
.number {
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 区块链信息
|
||||
.chain-record,
|
||||
.movements {
|
||||
padding: $padding;
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-size: $title-size;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
}
|
||||
|
||||
.movements {
|
||||
.chart {
|
||||
background-color: white;
|
||||
margin: $margin/2;
|
||||
height: 350rpx;
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
pages/index/kline.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view class="kline">
|
||||
<l-f2 ref="chart"></l-f2>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
||||
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
||||
export default {
|
||||
components: {
|
||||
lF2,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
let data = await this.getData()
|
||||
// 绘制K线
|
||||
this.$refs.chart.init(config => {
|
||||
data = data.slice(0, 150);
|
||||
const BASIC_PRICE = 6.95;
|
||||
data.sort(function(obj1, obj2) {
|
||||
return obj1.time > obj2.time ? 1 : -1;
|
||||
});
|
||||
data.forEach(function(obj) {
|
||||
obj.range = [obj.start, obj.end, obj.max, obj.min];
|
||||
obj.trend = obj.start <= obj.end ? 0 : 1;
|
||||
});
|
||||
const chart = new F2.Chart(Object.assign(config));
|
||||
chart.source(data, {
|
||||
range: {
|
||||
tickCount: 5,
|
||||
formatter: function formatter(val) {
|
||||
return val.toFixed(2);
|
||||
}
|
||||
},
|
||||
time: {
|
||||
tickCount: 3
|
||||
}
|
||||
});
|
||||
chart.tooltip({
|
||||
showCrosshairs: true,
|
||||
showXTip: true,
|
||||
showYTip: true,
|
||||
crosshairsType: 'xy',
|
||||
custom: true,
|
||||
yTip: function yTip(val) {
|
||||
return {
|
||||
text: val.toFixed(2),
|
||||
fill: '#333',
|
||||
fontSize: 10
|
||||
};
|
||||
},
|
||||
|
||||
xTip: {
|
||||
fill: '#333',
|
||||
fontSize: 10
|
||||
},
|
||||
xTipBackground: {
|
||||
fill: '#EDF2FE'
|
||||
},
|
||||
yTipBackground: {
|
||||
fill: '#EDF2FE'
|
||||
},
|
||||
crosshairsStyle: {
|
||||
stroke: '#0F8DE8'
|
||||
}
|
||||
});
|
||||
chart.axis('range', {
|
||||
grid: {
|
||||
stroke: '#ddd',
|
||||
lineWidth: 1,
|
||||
lineDash: null
|
||||
},
|
||||
label: {
|
||||
fill: '#999'
|
||||
}
|
||||
});
|
||||
chart.axis('time', {
|
||||
label: function label(text, index, total) {
|
||||
const textCfg = {
|
||||
fill: '#999'
|
||||
};
|
||||
if (index === 0) {
|
||||
textCfg.textAlign = 'left';
|
||||
}
|
||||
if (index === total - 1) {
|
||||
textCfg.textAlign = 'right';
|
||||
}
|
||||
return textCfg;
|
||||
},
|
||||
|
||||
grid: {
|
||||
lineWidth: 1,
|
||||
stroke: '#ddd'
|
||||
}
|
||||
});
|
||||
chart.guide().line({
|
||||
start: ['min', BASIC_PRICE],
|
||||
end: ['max', BASIC_PRICE],
|
||||
style: {
|
||||
lineDash: [8],
|
||||
stroke: '#F68300'
|
||||
}
|
||||
});
|
||||
chart.guide().text({
|
||||
position: ['min', BASIC_PRICE],
|
||||
content: BASIC_PRICE,
|
||||
style: {
|
||||
fill: '#808080',
|
||||
textAlign: 'start',
|
||||
textBaseline: 'bottom',
|
||||
fontSize: 10,
|
||||
fontWeight: 'bold'
|
||||
},
|
||||
offsetX: 2
|
||||
});
|
||||
chart.guide().rect({
|
||||
start: ['0%', '0%'],
|
||||
end: ['100%', '100%'],
|
||||
style: {
|
||||
stroke: '#ddd',
|
||||
lineWidth: 1,
|
||||
fill: '#fff',
|
||||
opacity: 1,
|
||||
fillOpacity: 0
|
||||
}
|
||||
});
|
||||
chart.schema()
|
||||
.position('time*range')
|
||||
.color('trend', function(trend) {
|
||||
return ['#F4333C', '#1CA93D'][trend];
|
||||
})
|
||||
.shape('candle');
|
||||
chart.render();
|
||||
return chart;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
// plus.screen.lockOrientation('landscape-primary')
|
||||
return new Promise((resolve) => {
|
||||
uni.request({
|
||||
url: 'https://gw.alipayobjects.com/os/antfincdn/c4ROEPcthk/candle-sticks.json',
|
||||
success: (res) => {
|
||||
resolve(res.data)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onUnload() {
|
||||
console.log('222')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.kline{
|
||||
}
|
||||
</style>
|
||||
525
pages/instrument/basics.vue
Normal file
@@ -0,0 +1,525 @@
|
||||
<template>
|
||||
<view class="ios-bottom">
|
||||
<view class="info">
|
||||
<view class="item info-logo" @click="updImg('logo', '')">
|
||||
<label>企业LOGO</label>
|
||||
<image :src="logo" mode="aspectFill"></image>
|
||||
<uni-icons class="icon" color="#999" size="18" type="arrowright"></uni-icons>
|
||||
</view>
|
||||
<view class="item info-text">
|
||||
<label>企业简介</label>
|
||||
<textarea v-model="description" placeholder="输入企业简介" />
|
||||
</view>
|
||||
<view class="item info-text">
|
||||
<label>企业地址</label>
|
||||
<input v-model="address" placeholder="输入企业地址" />
|
||||
</view>
|
||||
</view>
|
||||
<block v-for="(module, moduleIndex) in modules" :key="moduleIndex">
|
||||
<view class="module-item" v-if="module.type === 1">
|
||||
<view class="module-title">
|
||||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||
</view>
|
||||
<view class="module-textarea">
|
||||
<textarea placeholder="输入文字内容" v-model="module.content.content" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="module-item" v-if="module.type === 2">
|
||||
<view class="module-title">
|
||||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||
</view>
|
||||
<view class="module-imgs">
|
||||
<view
|
||||
class="item"
|
||||
v-for="(item, index) in module.content.image"
|
||||
:key="index"
|
||||
>
|
||||
<image
|
||||
class="cover"
|
||||
:src="item.showpath"
|
||||
mode="aspectFill"
|
||||
@click="openImg(module.content.image, index, 'imgs')"
|
||||
@longpress="removeImg('imgs', moduleIndex, index)"
|
||||
/>
|
||||
<view class="item-input">
|
||||
<input type="text" v-model="item.title" placeholder="输入标题" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item" @click="updImgs(moduleIndex)">
|
||||
<view class="item-upd cover">
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<view>上传图片</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="module-hint">点击查看图片,长按删除图片</view>
|
||||
</view>
|
||||
<view class="module-item" v-if="module.type === 3">
|
||||
<view class="module-title">
|
||||
<input class="title-input" type="text" v-model="module.title" placeholder="输入标题" />
|
||||
<view class="remove-btn" @click="removeModule(moduleIndex)">删除</view>
|
||||
</view>
|
||||
<view class="module-videos">
|
||||
<view class="item">
|
||||
<block v-if="module.content.video_image.showpath != ''">
|
||||
<image
|
||||
class="cover"
|
||||
:src="module.content.video_image.showpath"
|
||||
mode="aspectFill"
|
||||
@click="openImg([module.content.video_image.showpath], 0, 'videos')"
|
||||
@longpress="removeImg('videoCover', moduleIndex, '')"
|
||||
/>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="item-upd" @click="updImg('videoCover', moduleIndex)">
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<view>上传视频封面</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="item">
|
||||
<video
|
||||
class="cover"
|
||||
v-if="module.content.video_url.showpath != ''"
|
||||
:src="module.content.video_url.showpath"
|
||||
@longpress="removeImg('video', moduleIndex, '')"
|
||||
/>
|
||||
<view class="item-upd" @click="updImg('video', moduleIndex)" v-else>
|
||||
<uni-icons type="plus" size="20" color="#999"/>
|
||||
<view>上传视频</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="module-hint">点击查看封面/视频,长按删除封面/视频</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="add-modules" @click="addModule">
|
||||
<uni-icons class="icon" type="plus" size="18" color="#c82626"/> 添加展示模块
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { basicsInfo, basicsConfig } from '@/apis/interfaces/store'
|
||||
import { uploads } from '@/apis/interfaces/uploading'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
logo : '',
|
||||
description : '',
|
||||
address : '',
|
||||
modules : [],
|
||||
modulesType : []
|
||||
};
|
||||
},
|
||||
created() {
|
||||
Promise.all([basicsInfo('GET', {}), basicsConfig()]).then(res => {
|
||||
console.log(res)
|
||||
|
||||
let info = res[0]
|
||||
this.logo = info.base.cover
|
||||
this.description = info.base.description
|
||||
this.modules = info.extends
|
||||
this.address = info.info.address
|
||||
this.modulesType = res[1]
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 图片预览
|
||||
openImg(paths, index, type){
|
||||
if(type === 'imgs'){
|
||||
paths = paths.map(val => {
|
||||
return val.showpath
|
||||
})
|
||||
}
|
||||
uni.previewImage({
|
||||
urls : paths,
|
||||
current : index,
|
||||
indicator: 'number'
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
removeImg(type, moduleIndex, index){
|
||||
let modulesObj = this.modules[moduleIndex]
|
||||
if(type === 'videoCover'){
|
||||
modulesObj.content.video_image.showpath = ''
|
||||
modulesObj.content.video_image.path = ''
|
||||
}
|
||||
if(type === 'imgs'){
|
||||
modulesObj.content.image.splice(index, 1)
|
||||
}
|
||||
if(type === 'video'){
|
||||
modulesObj.content.video_url.showpath = ''
|
||||
modulesObj.content.video_url.path = ''
|
||||
}
|
||||
this.$set(this.modules, moduleIndex, modulesObj)
|
||||
},
|
||||
// 单图上传
|
||||
updImg(type, index){
|
||||
switch(type){
|
||||
case 'logo':
|
||||
uni.chooseImage({
|
||||
crop: {width: 300, height: 300},
|
||||
success: path=> {
|
||||
uploads([{
|
||||
name: 'logo',
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
this.logo = res.url[0]
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
break
|
||||
case 'videoCover':
|
||||
uni.chooseImage({
|
||||
crop: {width: 500, height: 350},
|
||||
success: path=> {
|
||||
uploads([{
|
||||
name: 'logo',
|
||||
uri : path.tempFilePaths[0]
|
||||
}]).then(res => {
|
||||
let modulesObj = this.modules[index]
|
||||
modulesObj.content.video_image.showpath = res.url[0]
|
||||
modulesObj.content.video_image.path = res.path[0]
|
||||
this.$set(this.modules, index, modulesObj)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
break
|
||||
case 'video':
|
||||
uni.chooseVideo({
|
||||
success: path=> {
|
||||
uploads([{
|
||||
name: 'video',
|
||||
uri : path.tempFilePath
|
||||
}]).then(res => {
|
||||
let modulesObj = this.modules[index]
|
||||
modulesObj.content.video_url.showpath = res.url[0]
|
||||
modulesObj.content.video_url.path = res.path[0]
|
||||
this.$set(this.modules, index, modulesObj)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
break
|
||||
}
|
||||
},
|
||||
// 批量上传图片
|
||||
updImgs(index){
|
||||
uni.chooseImage({
|
||||
success: res=>{
|
||||
let path = res.tempFiles.map((val, index) => {
|
||||
return {
|
||||
name: 'uploads' + index,
|
||||
uri : val.path
|
||||
}
|
||||
})
|
||||
uploads(path).then(pathRes => {
|
||||
let modulesObj = this.modules[index],
|
||||
paths = []
|
||||
for(let i in pathRes.path){
|
||||
paths.push({
|
||||
showpath: pathRes.url[i],
|
||||
path : pathRes.path[i],
|
||||
title : ''
|
||||
})
|
||||
}
|
||||
modulesObj.content.image = [...modulesObj.content.image, ...paths]
|
||||
this.$set(this.modules, index, modulesObj)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 添加展示模块
|
||||
addModule(){
|
||||
let modulesList = this.modulesType.map(val => {
|
||||
return val.value
|
||||
})
|
||||
|
||||
uni.showActionSheet({
|
||||
itemList: modulesList,
|
||||
success : res => {
|
||||
let content
|
||||
switch(this.modulesType[res.tapIndex].id){
|
||||
case 1:
|
||||
content = {
|
||||
content: ''
|
||||
}
|
||||
break
|
||||
case 2:
|
||||
content = {
|
||||
image: [{
|
||||
showpath: '',
|
||||
path : '',
|
||||
title : ''
|
||||
}]
|
||||
}
|
||||
break
|
||||
case 3:
|
||||
content = {
|
||||
video_image: {
|
||||
showpath: '',
|
||||
path : ''
|
||||
},
|
||||
video_url : {
|
||||
showpath: '',
|
||||
path : ''
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
|
||||
this.modules.push({
|
||||
type : this.modulesType[res.tapIndex].id,
|
||||
title : '',
|
||||
content : content
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 删除展示模块
|
||||
removeModule(index){
|
||||
this.modules.splice(index, 1)
|
||||
},
|
||||
|
||||
// 保存基础信息
|
||||
onNavigationBarButtonTap(e){
|
||||
basicsInfo('PUT', {
|
||||
cover : this.logo,
|
||||
description : this.description,
|
||||
address : this.address,
|
||||
extends : this.modules
|
||||
}).then(res => {
|
||||
uni.showModal({
|
||||
title : '提示',
|
||||
content : '基本信息已保存',
|
||||
showCancel : false,
|
||||
success : modalRes=> {
|
||||
if(modalRes.confirm){
|
||||
this.$Router.back()
|
||||
}
|
||||
}
|
||||
})
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 基础信息
|
||||
.info{
|
||||
background: white;
|
||||
padding: 0 $padding;
|
||||
.item{
|
||||
position: relative;
|
||||
padding: $padding 0 $padding 200rpx;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: -$padding;
|
||||
content: " ";
|
||||
height: 1rpx;
|
||||
background: #eee;
|
||||
}
|
||||
&:last-child::after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.info-logo{
|
||||
text-align: right;
|
||||
padding-right: 40rpx;
|
||||
label{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
}
|
||||
image{
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
background: $border-color-lg;
|
||||
}
|
||||
.icon{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
}
|
||||
}
|
||||
.info-text{
|
||||
label{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
textarea{
|
||||
line-height: 40rpx;
|
||||
width: 100%;
|
||||
height: 160rpx;
|
||||
}
|
||||
input{
|
||||
height: 40rpx;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
// 模块
|
||||
.add-modules{
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
color: $text-price;
|
||||
background: white;
|
||||
margin-top: $margin;
|
||||
.icon{
|
||||
vertical-align: middle;
|
||||
margin-right: $margin/3;
|
||||
}
|
||||
}
|
||||
// 展示模块
|
||||
.module-item{
|
||||
background: white;
|
||||
padding: $padding/2 $padding;
|
||||
margin-top: $margin;
|
||||
.module-title{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: $padding/2;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
.title-input{
|
||||
width: calc(100% - 150rpx);
|
||||
height: 70rpx;
|
||||
font-size: $title-size;
|
||||
}
|
||||
.remove-btn{
|
||||
line-height: 70rpx;
|
||||
color: $text-price;
|
||||
text-align: right;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
}
|
||||
.module-textarea{
|
||||
padding: $padding 0 $padding/2;
|
||||
width: 100%;
|
||||
font-size: $title-size;
|
||||
line-height: 50rpx;
|
||||
height: 200rpx;
|
||||
}
|
||||
.module-imgs{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: $padding/2;
|
||||
margin-left: -10rpx;
|
||||
margin-right: -10rpx;
|
||||
.item{
|
||||
position: relative;
|
||||
background: #F8F8F8;
|
||||
width: calc(25% - 20rpx);
|
||||
padding-top: calc(25% - 20rpx);
|
||||
margin: 10rpx;
|
||||
.cover{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.item-input{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba($color: #000000, $alpha: .7);
|
||||
input{
|
||||
height: 50rpx;
|
||||
line-height: 50rpx;
|
||||
font-size: 28rpx;
|
||||
text-align: center;
|
||||
z-index: 4;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.item-upd{
|
||||
@extend .vertical;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
}
|
||||
}
|
||||
}
|
||||
.module-hint{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
padding: $padding/2 0;
|
||||
line-height: 50rpx;
|
||||
}
|
||||
.module-videos{
|
||||
display: flex;
|
||||
padding: $padding 0 ($padding/2);
|
||||
margin-left: -10rpx;
|
||||
margin-right: -10rpx;
|
||||
.item{
|
||||
position: relative;
|
||||
width: calc(50% - #{$margin/2});
|
||||
padding-top: calc(35% - #{$margin/2});
|
||||
background: #f8f8f8;
|
||||
margin: 0 10rpx;
|
||||
.item-upd{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray-m;
|
||||
line-height: 40rpx;
|
||||
@extend .vertical;
|
||||
}
|
||||
.cover{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
364
pages/instrument/customer.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- tabs -->
|
||||
<view class="tabs">
|
||||
<view class="item" :class="{'show': tabsIndex == 'day'}" @click="onTbas('day')">日成交</view>
|
||||
<view class="item" :class="{'show': tabsIndex == 'month'}" @click="onTbas('month')">月成交</view>
|
||||
<view class="item" :class="{'show': tabsIndex == 'year'}" @click="onTbas('year')">年成交</view>
|
||||
</view>
|
||||
<!-- 统计信息 -->
|
||||
<view class="statistics">
|
||||
<view class="statistics-flex">
|
||||
<picker mode="date" :fields="tabsIndex" :value="dateValue" :end="endDate" @change="pickerDate">
|
||||
<view class="statistics-date">
|
||||
{{dateValue}}<uni-icons class="arrowdown" type="arrowdown" color="#555"></uni-icons>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="statistics-lay" :class="{ 'show' : sort != '' || payType != '' || channel != ''}" @click="onScreening">
|
||||
筛选 <uni-icons class="arrowdown" type="settings" color="gray"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<view class="statistics-text">
|
||||
<text>成交产品数量 {{visitor.goods_count}} 人</text>
|
||||
<text>成交产品金额 {{visitor.total}} 元</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 数据列表 -->
|
||||
<view class="lists">
|
||||
<block v-if="orders.length > 0">
|
||||
<view class="item" v-for="(item, index) in orders" :key="index">
|
||||
<image class="cover" :src="item.user.avatar" mode="aspectFill"></image>
|
||||
<view class="title nowrap">
|
||||
{{item.user.nickname}}
|
||||
<view class="type">{{item.amount}}</view>
|
||||
</view>
|
||||
<view class="sub-title nowrap">订单号码: {{item.order_no}}</view>
|
||||
<view class="sub-title nowrap">订单时间: {{item.created_at}}</view>
|
||||
<view class="sub-tabs">
|
||||
<text>{{item.driver}}</text>
|
||||
<text>{{item.channel}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 分页 -->
|
||||
<uni-load-more :status="pageStatus" :iconSize="16"></uni-load-more>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="list-null">
|
||||
<image class="icon" src="@/static/icons/listnull-icon.png" mode="widthFix"></image>
|
||||
<view class="sub-title">暂无相关成交客户记录</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 列表筛选 -->
|
||||
<uni-popup ref="settingsPopup" background-color="#FFFFFF" @maskClick="onReset">
|
||||
<view class="popup-content">
|
||||
<view class="title">排序方式</view>
|
||||
<view class="popup-choose-flex">
|
||||
<view class="item" :class="{'show' : sort == 'money_asc'}" @click="sort = 'money_asc'">金额从低到高</view>
|
||||
<view class="item" :class="{'show' : sort == 'money_desc'}" @click="sort = 'money_desc'">金额从高到低</view>
|
||||
<view class="item" :class="{'show' : sort == 'sold_asc'}" @click="sort = 'sold_asc'">销量从低到高</view>
|
||||
<view class="item" :class="{'show' : sort == 'sold_desc'}" @click="sort = 'sold_desc'">销量从高到低</view>
|
||||
</view>
|
||||
<view class="title">支付方式</view>
|
||||
<view class="popup-choose-flex">
|
||||
<view class="item" :class="{'show' : payType == 'eb'}" @click="payType = 'eb'">易币交易</view>
|
||||
<view class="item" :class="{'show' : payType == 'money'}" @click="payType = 'money'">现金交易</view>
|
||||
</view>
|
||||
<view class="title">成交渠道</view>
|
||||
<view class="popup-choose-flex">
|
||||
<view class="item" :class="{'show' : channel == 'app'}" @click="channel = 'app'">APP</view>
|
||||
<view class="item" :class="{'show' : channel == 'mini'}" @click="channel = 'mini'">自媒体</view>
|
||||
</view>
|
||||
<view class="popup-btns">
|
||||
<view class="item" @click="onReset">重置</view>
|
||||
<view class="item" @click="onSettings">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="ios-bottom"></view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import getDate from '@/public/date'
|
||||
import { orderUsers } from '@/apis/interfaces/store'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tabsIndex : 'day',
|
||||
dateValue : '',
|
||||
endDate : '',
|
||||
visitor : {
|
||||
day: 0,
|
||||
all: 0
|
||||
},
|
||||
orders : [],
|
||||
sort : '',
|
||||
payType : '',
|
||||
channel : '',
|
||||
// 分页
|
||||
pageStatus : '',
|
||||
page : 1
|
||||
};
|
||||
},
|
||||
created() {
|
||||
getDate().then(res => {
|
||||
this.dateValue = res
|
||||
this.endDate = res
|
||||
this.getLists()
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// tabs筛选
|
||||
onTbas(type){
|
||||
getDate(type).then(res => {
|
||||
this.tabsIndex = type
|
||||
this.dateValue = res
|
||||
this.page = 1
|
||||
this.getLists()
|
||||
})
|
||||
},
|
||||
onReset(){
|
||||
this.sort = ''
|
||||
this.payType = ''
|
||||
this.channel = ''
|
||||
},
|
||||
onSettings(){
|
||||
this.getLists()
|
||||
this.$refs.settingsPopup.close()
|
||||
},
|
||||
// 日期筛选
|
||||
pickerDate(e){
|
||||
let dateValue = e.detail.value
|
||||
this.dateValue = dateValue
|
||||
this.getLists()
|
||||
},
|
||||
// 列表筛选
|
||||
onScreening(){
|
||||
this.$refs.settingsPopup.open('bottom')
|
||||
},
|
||||
// 获取列表
|
||||
getLists(){
|
||||
orderUsers({
|
||||
type : this.tabsIndex,
|
||||
date : this.dateValue,
|
||||
sort : this.sort,
|
||||
pay_type : this.payType,
|
||||
channel : this.channel,
|
||||
page : this.page
|
||||
}).then(res => {
|
||||
if(res.orders.page.current === 1){
|
||||
this.orders = []
|
||||
}
|
||||
this.visitor = res.visitor
|
||||
this.orders = this.orders.concat(res.orders.data)
|
||||
this.page = res.orders.page.current
|
||||
this.pageStatus = res.orders.page.has_more ? 'more': 'noMore'
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon : 'none'
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if(this.pageStatus == 'more'){
|
||||
this.pageStatus = 'loading'
|
||||
this.page += 1
|
||||
this.getLists()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 筛选层
|
||||
.popup-content{
|
||||
padding: $padding * 2;
|
||||
.title{
|
||||
font-weight: bold;
|
||||
font-size: $title-size;
|
||||
color: $text-color;
|
||||
margin-top: $margin;
|
||||
}
|
||||
.popup-choose-flex{
|
||||
padding: $padding /2 0;
|
||||
margin: 0 -($margin - 20rpx);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.item{
|
||||
width: calc(33.33% - #{$margin - 10});
|
||||
font-size: $title-size-sm;
|
||||
text-align: center;
|
||||
background: $border-color-lg;
|
||||
line-height: 68rpx;
|
||||
margin: $margin - 20;
|
||||
color: $text-gray;
|
||||
border:solid 1rpx $border-color-lg;
|
||||
box-sizing: border-box;
|
||||
&.show{
|
||||
border:solid 1rpx $text-price;
|
||||
color: $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
.popup-btns{
|
||||
padding-top: $padding*2;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 -$margin/2;
|
||||
.item{
|
||||
margin: $margin/2;
|
||||
color: $text-price;
|
||||
background: rgba($color: $text-price, $alpha: .1);
|
||||
width: calc(50% - #{$margin});
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
&:last-child{
|
||||
background-color: $text-price;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 空提示
|
||||
.list-null{
|
||||
width: 100vw;
|
||||
height: 40vh;
|
||||
background: white;
|
||||
text-align: center;
|
||||
@extend .vertical;
|
||||
.sub-title{
|
||||
color: $text-gray;
|
||||
font-size: $title-size-m;
|
||||
}
|
||||
.icon{
|
||||
width: 288rpx;
|
||||
}
|
||||
}
|
||||
// content
|
||||
.content{
|
||||
padding-top: 80rpx;
|
||||
}
|
||||
// tabs
|
||||
.tabs{
|
||||
position: fixed;
|
||||
z-index: 99;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background: white;
|
||||
justify-content: space-around;
|
||||
line-height: 80rpx;
|
||||
font-size: $title-size-m;
|
||||
color: $text-gray;
|
||||
.item.show{
|
||||
color: $text-price;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
// 统计信息
|
||||
.statistics{
|
||||
margin-top: $margin;
|
||||
background-color: white;
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
padding: $padding;
|
||||
.statistics-flex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.statistics-date{
|
||||
font-size: $title-size + 4;
|
||||
font-weight: bold;
|
||||
line-height: 60rpx;
|
||||
.arrowdown{
|
||||
margin-left: $margin/2;
|
||||
}
|
||||
}
|
||||
.statistics-lay{
|
||||
font-size: $title-size-sm;;
|
||||
color: gray;
|
||||
line-height: 50rpx;
|
||||
&.show{
|
||||
color: $text-price;
|
||||
}
|
||||
.arrowdown{
|
||||
margin-left: $margin/2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.statistics-text{
|
||||
font-size: $title-size-sm;
|
||||
color: gray;
|
||||
line-height: 50rpx;
|
||||
text{
|
||||
margin-left: $margin;
|
||||
&:first-child{
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 客户列表
|
||||
.lists{
|
||||
padding: $padding/2 0;
|
||||
background: white;
|
||||
.item{
|
||||
padding: ($padding - 10) $padding ($padding - 10) ($padding*2 + 68);
|
||||
position: relative;
|
||||
min-height: 68rpx;
|
||||
&::after{
|
||||
position: absolute;
|
||||
left: $padding*2 + 68;
|
||||
top: 0;
|
||||
right: 0;
|
||||
content: ' ';
|
||||
border-bottom: solid 1rpx $border-color;
|
||||
}
|
||||
&:first-child::after{
|
||||
display: none;
|
||||
}
|
||||
.cover{
|
||||
position: absolute;
|
||||
left: $padding;
|
||||
top: $padding - 10;
|
||||
width: 68rpx;
|
||||
height: 68rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #eee;
|
||||
}
|
||||
.title{
|
||||
padding-right: 200rpx;
|
||||
position: relative;
|
||||
line-height: 58rpx;
|
||||
font-size: $title-size-lg;
|
||||
.type{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 180rpx;
|
||||
text-align: right;
|
||||
color: $text-price;
|
||||
}
|
||||
}
|
||||
.sub-title{
|
||||
line-height: 40rpx;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
}
|
||||
.sub-tabs{
|
||||
padding-top: $padding/2;
|
||||
font-size: $title-size-sm;
|
||||
text{
|
||||
margin-right: $margin - 10;
|
||||
background: $border-color-lg;
|
||||
color: $text-gray;
|
||||
padding: 0 ($padding/2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
204
pages/login/login.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="title">易品新境</view>
|
||||
<view class="inputs phone">
|
||||
<label class="label">+86</label>
|
||||
<input type="number" placeholder="输入您的手机号码" v-model="phone"/>
|
||||
</view>
|
||||
<view class="inputs sms">
|
||||
<input type="number" placeholder="输入短信验证码" v-model="code"/>
|
||||
<button
|
||||
class="sms-btn"
|
||||
type="default"
|
||||
size="mini"
|
||||
:disabled="phone == '' || getSms"
|
||||
@click="getPhoneCode"
|
||||
>{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
|
||||
</view>
|
||||
<button class="btn" type="default" :disabled="phone == '' || code == ''" @click="login">登录</button>
|
||||
<!-- 快捷登录 -->
|
||||
<view class="quick">
|
||||
<view class="quick-title">快捷登录</view>
|
||||
<view class="quick-box">
|
||||
<image class="quick-icon" src="@/static/icons/wechat.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 用户登录注册协议 -->
|
||||
<view class="agreement">未注册的手机号验证后将自动创建账号,登录即表示同意接收<navigator url="">用户隐私规格</navigator>和<navigator url="">用户服务协议</navigator></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getSms, smsAuth } from '@/apis/interfaces/auth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone : "18245180131",
|
||||
code : "",
|
||||
smsTime : 60,
|
||||
getSms : false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 用户登录
|
||||
login(){
|
||||
smsAuth({
|
||||
mobileNo: this.phone,
|
||||
code : this.code
|
||||
}).then(res => {
|
||||
this.$store.commit('setToken', res.token_type + ' ' + res.access_token)
|
||||
if(!res.is_company){
|
||||
this.$Router.replace({name: "Registered"})
|
||||
return
|
||||
}
|
||||
this.$Router.back()
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : "none"
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取验证码
|
||||
getPhoneCode(){
|
||||
let outTime
|
||||
getSms({
|
||||
mobileNo: this.phone
|
||||
}).then(res => {
|
||||
uni.showToast({
|
||||
title: res,
|
||||
icon : "none"
|
||||
})
|
||||
this.getSms = true
|
||||
outTime = setInterval(()=>{
|
||||
if(this.smsTime <= 1){
|
||||
this.getSms = false
|
||||
this.smsTime = 60
|
||||
clearInterval('outTime')
|
||||
}
|
||||
this.smsTime -= 1
|
||||
},1000)
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err.message,
|
||||
icon : "none"
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
padding: $padding * 3;
|
||||
box-sizing: border-box;
|
||||
background: white;
|
||||
.inputs{
|
||||
background: $border-color-lg;
|
||||
border: solid 1rpx $border-color;
|
||||
position: relative;
|
||||
margin-top: $margin;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
input{
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
padding: 0 $padding;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
&.phone{
|
||||
padding-left: 120rpx;
|
||||
.label{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 120rpx;
|
||||
text-align: center;
|
||||
border-right: solid 1rpx $border-color;
|
||||
font-size: $title-size-lg;
|
||||
}
|
||||
}
|
||||
&.sms{
|
||||
padding-right: 200rpx;
|
||||
.sms-btn[size='mini']{
|
||||
width: 200rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-left: solid 1rpx $border-color;
|
||||
color: $text-price;
|
||||
font-size: $title-size-lg;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
&[disabled]{
|
||||
color: rgba($color: $text-price, $alpha: .6);
|
||||
background: $border-color-lg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.title{
|
||||
text-align: center;
|
||||
font-size: $title-size + 6;
|
||||
font-weight: bold;
|
||||
color: $text-color;
|
||||
margin-bottom: 100rpx;
|
||||
}
|
||||
.btn{
|
||||
background: $text-price;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
margin-top: $margin;
|
||||
font-size: $title-size;
|
||||
line-height: 90rpx;
|
||||
height: 90rpx;
|
||||
font-weight: bold;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
&[disabled]{
|
||||
background: rgba($color: $text-price, $alpha: .6);
|
||||
}
|
||||
}
|
||||
.quick{
|
||||
padding-top: $padding * 3;
|
||||
text-align: center;
|
||||
.quick-title{
|
||||
text-align: center;
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
padding-bottom: $padding;
|
||||
}
|
||||
.quick-box{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.quick-icon{
|
||||
width: 78rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.agreement{
|
||||
padding-top: $padding * 4;
|
||||
font-size: $title-size-sm;
|
||||
color: $text-gray;
|
||||
navigator{
|
||||
color: $text-price;
|
||||
display: inline-block;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,13 @@
|
||||
<template>
|
||||
<view>
|
||||
节点中心
|
||||
<view class="btns">
|
||||
<view class="item" @click="$Router.push({name: 'instrumentBasics'})">基础信息</view>
|
||||
<view class="item" @click="$Router.push({name: 'goodsManagement'})">商品权证</view>
|
||||
<view class="item" @click="$Router.push({name: 'instrumentBasics'})">优惠券管理</view>
|
||||
<view class="item" @click="$Router.push({name: 'instrumentBasics'})">店员管理</view>
|
||||
<view class="item" @click="$Router.push({name: 'instrumentCustomer'})">成交客户</view>
|
||||
<view class="item" @click="$Router.push({name: 'instrumentBasics'})">店员管理</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -15,5 +22,15 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.btns{
|
||||
padding: 30rpx 0;
|
||||
.item{
|
||||
background: white;
|
||||
margin: $margin;
|
||||
border-radius: $radius/2;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
517
pages/verification/history.vue
Normal file
@@ -0,0 +1,517 @@
|
||||
<template>
|
||||
<view class="Record" v-if="loaded">
|
||||
<view class="record-top">
|
||||
<image src="/static/images/ver-bg.png" mode="widthFix" class="record-bg" />
|
||||
<view class="record-top-nav">
|
||||
<view :class="['record-top-item',type==='year'?'selectTopItem':'']" @click="selectType('year')">按年
|
||||
</view>
|
||||
<view :class="['record-top-item',type==='month'?'selectTopItem':'']" @click="selectType('month')">按月
|
||||
</view>
|
||||
<view :class="['record-top-item',type==='day'?'selectTopItem':'']" @click="selectType('day')">按日</view>
|
||||
</view>
|
||||
<view class="record-mouth-year">
|
||||
<view class="record-type-left">
|
||||
<u-picker mode="time" v-model="show" :params="params" @confirm='confirm' title='筛选日期'
|
||||
start-year='2021' :end-year='currentYear' />
|
||||
<view @click="show = true">
|
||||
{{date?date:'选择日期'}}
|
||||
<uni-icons type="arrowdown" color="#fff" size="12" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-type-right">
|
||||
<view :class="['pay_type_item',scantype==='goods'?'pay_type_item_select':'']"
|
||||
@click="selectCoinType('goods')">权证</view>
|
||||
<view :class="['pay_type_item',scantype==='coupons'?'pay_type_item_select':'']"
|
||||
@click="selectCoinType('coupons')">优惠券</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="record-title">核销总数 ( 件 ) </view>
|
||||
<view class="record-money"><span></span>{{account}}
|
||||
<span></span>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="boss" v-if="isBos">
|
||||
<view class="boss-left">
|
||||
<image src="/static/images/boss.png" mode="mode" class="boss-img">我是BOSS
|
||||
</view>
|
||||
<view class="boss-right" @click="shopShow = true">
|
||||
<u-select v-model="shopShow" :list="ShopList" @confirm="shopConfirm" value-name='store_id'
|
||||
label-name='name' />
|
||||
门店:<u-icon name="arrow-down" color="#606266" label-color='#606266' margin-right='10' label-pos='left'
|
||||
:label='store_id?store_name:"全部门店"' size="28" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 列表。。。 -->
|
||||
<view class="lists" v-if="lists.length>0">
|
||||
<view class="list-item" v-for="(item,index) in lists" :key='index'>
|
||||
|
||||
<view class="list-item-title">
|
||||
<view class="left">
|
||||
<view class="tags">{{scantype === 'goods'?'权证核销':'优惠券核销'}}</view>
|
||||
<view class='title' v-if="scantype === 'goods'">{{item.goods_sku.goods_name}}</view>
|
||||
<view class='title' v-else>{{item.coupon.title}}</view>
|
||||
</view>
|
||||
<!-- <view class="right"> -->
|
||||
<!-- <u-icon name="checkmark-circle-fill" size='50' color='#e93340' /> -->
|
||||
<!-- </view> -->
|
||||
</view>
|
||||
|
||||
<view class="list-item-content" v-if='scantype === "goods"'>
|
||||
<image class="good-img" :src="item.goods_sku.cover" mode="aspectFill" />
|
||||
<view class="list-item-right">
|
||||
<view class="content-item">核销商品数量:X {{item.qty}} </view>
|
||||
<view class="content-item">核销商品规格:{{item.goods_sku.unit || '通用规格'}}</view>
|
||||
<view class="content-item">核销时间:{{item.used_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-item-content" v-else>
|
||||
<image class="good-img" v-if='item.source.type ==="goods"' :src="item.source.cover"
|
||||
mode="aspectFill" />
|
||||
<view class="list-item-right">
|
||||
<view class="content-item" v-if='item.source.type ==="goods"'>兑换商品名称:{{item.source.name}}
|
||||
</view>
|
||||
<view class="content-item"> 优惠券规格:满 {{item.coupon.full}} 减 {{item.coupon.price}} </view>
|
||||
<view class="content-item">优惠券类型:{{item.coupon.type.text}}</view>
|
||||
<view class="content-item">核销时间:{{item.used_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="person">
|
||||
<image class="avatar" :src="item.clerk.avatar" mode="aspectFill" />
|
||||
{{item.clerk.nickname}}
|
||||
<view class="shop-name">{{item.store.name}}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- 无列表 -->
|
||||
<no-list v-if="lists.length === 0 && scantype === 'goods'" name='no-in' txt="没有任何权证核销记录" />
|
||||
<no-list v-if="lists.length === 0 && scantype === 'coupons'" name='no-out' txt="没有任何优惠券核销记录" />
|
||||
|
||||
<!-- <u-toast ref="uToast" /> -->
|
||||
<u-toast ref="uToast" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
scanList
|
||||
} from '@/apis/interfaces/scan';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lists: [],
|
||||
has_more: true,
|
||||
page: 1,
|
||||
type: 'year', // 统计类型day日,month月,year年
|
||||
scantype: 'goods', // goods 数权核销 coupons 优惠券核销
|
||||
date: new Date().toISOString().slice(0, 4), // 日:Y-m-d,月Y-m,年Y
|
||||
params: {
|
||||
year: true,
|
||||
month: true,
|
||||
day: true
|
||||
},
|
||||
show: false, // 显示
|
||||
currentDay: new Date().toISOString().slice(0, 10),
|
||||
currentMonth: new Date().toISOString().slice(0, 7),
|
||||
currentYear: new Date().toISOString().slice(0, 4),
|
||||
account: '',
|
||||
loaded: false,
|
||||
shopShow: false,
|
||||
ShopList: [],
|
||||
store_name: '',
|
||||
store_id: '',
|
||||
isBos:false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getList()
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.has_more) {
|
||||
this.page = this.page + 1
|
||||
this.getList()
|
||||
} else {
|
||||
this.$refs.uToast.show({
|
||||
title: '吼吼吼~我是有底的~',
|
||||
type: 'error',
|
||||
icon: false,
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 获取列表
|
||||
getList() {
|
||||
let data = {
|
||||
page: this.page,
|
||||
date_type: this.type,
|
||||
date: this.date,
|
||||
store_id:this.store_id
|
||||
}
|
||||
let apiUrl = ''
|
||||
if (this.scantype === 'goods') {
|
||||
apiUrl = 'manages/warrants/logs'
|
||||
} else {
|
||||
apiUrl = 'coupons/verify/logs/coupons'
|
||||
}
|
||||
|
||||
scanList(apiUrl, data).then(res => {
|
||||
console.log(res)
|
||||
this.account = res.all
|
||||
this.lists = this.lists.concat(res.lists.data)
|
||||
this.has_more = res.lists.page.has_more
|
||||
this.loaded = true
|
||||
this.ShopList = [{name:'全部',store_id:''},...res.stores]
|
||||
this.isBos = res.isBos
|
||||
}).catch(err => {
|
||||
this.$refs.uToast.show({
|
||||
title: err.message,
|
||||
type: 'error',
|
||||
icon: false,
|
||||
duration: 3000
|
||||
})
|
||||
})
|
||||
},
|
||||
selectCoinType(type) {
|
||||
if (this.scantype !== type) {
|
||||
this.scantype = type
|
||||
this.store_id = ''
|
||||
this.reset()
|
||||
}
|
||||
},
|
||||
// 重置
|
||||
reset() {
|
||||
this.page = 1
|
||||
this.lists = []
|
||||
this.has_more = true
|
||||
this.getList()
|
||||
},
|
||||
// 选择 年 月 日 切换要重置数据
|
||||
selectType(type) {
|
||||
console.log(type, typeof type)
|
||||
if (this.type !== type) {
|
||||
switch (type) {
|
||||
case 'year':
|
||||
this.type = type
|
||||
this.params = {
|
||||
year: true,
|
||||
month: false,
|
||||
day: false
|
||||
}
|
||||
this.date = this.currentYear
|
||||
this.store_id = ''
|
||||
this.reset()
|
||||
break;
|
||||
case 'month':
|
||||
this.type = type
|
||||
this.params = {
|
||||
year: true,
|
||||
month: true,
|
||||
day: false
|
||||
}
|
||||
this.date = this.currentMonth
|
||||
this.store_id = ''
|
||||
this.reset()
|
||||
break;
|
||||
case 'day':
|
||||
this.type = type
|
||||
this.params = {
|
||||
year: true,
|
||||
month: false,
|
||||
day: false
|
||||
}
|
||||
this.date = this.currentDay
|
||||
this.store_id = ''
|
||||
this.reset()
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击确认按钮年月日
|
||||
confirm(e) {
|
||||
let type = this.type
|
||||
switch (type) {
|
||||
case 'year':
|
||||
this.date = e.year
|
||||
this.reset()
|
||||
break;
|
||||
case 'month':
|
||||
this.date = e.year + '-' + e.month
|
||||
this.reset()
|
||||
break;
|
||||
case 'day':
|
||||
this.date = e.year + '-' + e.month + '-' + e.day
|
||||
this.reset()
|
||||
break;
|
||||
}
|
||||
},
|
||||
// 筛选门店信息
|
||||
shopConfirm(e) {
|
||||
this.store_id = e[0].value
|
||||
this.store_name = e[0].label
|
||||
this.reset()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Record {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding-top: 30rpx;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.record-top {
|
||||
width: calc(100% - 60rpx);
|
||||
height: 360rpx;
|
||||
background-image: linear-gradient(to left, #076cff, #076cff);
|
||||
box-shadow: 0 10rpx 20rpx 0rpx rgba($color: $main-color, $alpha: 0.4);
|
||||
margin: 0 30rpx;
|
||||
border-radius: 20rpx;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
padding: 10rpx 50rpx 20rpx 50rpx;
|
||||
z-index: 1;
|
||||
|
||||
.record-bg {
|
||||
position: absolute;
|
||||
width: 230rpx;
|
||||
bottom: 0;
|
||||
right: 30rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.record-top-nav {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.record-top-item {
|
||||
margin: 40rpx 20rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.selectTopItem {
|
||||
border-bottom: solid 4rpx #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.record-mouth-year {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
font-size: 30rpx;
|
||||
|
||||
.record-type-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
uni-icons {
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.record-type-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
|
||||
.pay_type_item {
|
||||
margin: 0 10rpx;
|
||||
padding: 2rpx 20rpx;
|
||||
border-radius: 30rpx;
|
||||
border: solid 1rpx rgba($color: #000000, $alpha: 0);
|
||||
}
|
||||
|
||||
.pay_type_item_select {
|
||||
border: solid 1rpx #f7f7f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.record-title {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.record-money {
|
||||
color: #fff;
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boss {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.boss-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.boss-right {
|
||||
font-size: 28rpx;
|
||||
|
||||
u-icon {
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.boss-img {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 列表
|
||||
.lists {
|
||||
// box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #000, $alpha: 0.4);
|
||||
padding: 20rpx;
|
||||
|
||||
.list-item {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 20rpx;
|
||||
padding: 20rpx;
|
||||
|
||||
.list-item-title {
|
||||
width: 100%;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 20rpx 0;
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
width: 520rpx;
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
margin-left: 12rpx;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tags {
|
||||
padding: 4rpx 10rpx;
|
||||
border-radius: 20rpx 0 20rpx 0;
|
||||
background-color: #076cff;
|
||||
font-size: 26rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// .right{
|
||||
// padding: 20rpx 30rpx;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
.list-item-content {
|
||||
width: 100%;
|
||||
color: #999;
|
||||
padding: 20rpx 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
border-bottom: solid 1rpx #f7f7f7;
|
||||
|
||||
.good-img {
|
||||
margin-right: 20rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.list-item-right {
|
||||
flex: 1;
|
||||
|
||||
.content-item {
|
||||
padding: 10rpx 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.person {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
padding: 20rpx 0 0 0;
|
||||
font-weight: bold;
|
||||
|
||||
.avatar {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.shop-name {
|
||||
background-color: #076cff;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
padding: 4rpx 20rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
409
pages/verification/index.vue
Normal file
@@ -0,0 +1,409 @@
|
||||
<template>
|
||||
<view class="Verification">
|
||||
<image class="top-img" src="/static/images/hexiao_bg.png" mode="widthFix" />
|
||||
<view class="txt">
|
||||
<view class="title">扫描券码和权证 一键核销</view>
|
||||
<view class="des">降低核销门槛 <span class='dian'>·</span>低成本留存优质客户</view>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<view class="goods" @click="scanCode('goods','get')"> 权证核销 </view>
|
||||
<view class="coupons" @click="scanCode('coupons','get')"> 优惠券核销 </view>
|
||||
</view>
|
||||
<view class="history" @click="goHistory">核销记录</view>
|
||||
<u-toast ref="uToast" />
|
||||
|
||||
<!-- 二维码展示动画效果 -->
|
||||
<view class="showCode " v-if="showCode">
|
||||
<view class="showCodeBg" @click="showCode = false"></view>
|
||||
<view :class="['showCodeContent', showCode?'showCodeContentSelect':'showCodeContentSelectNo']">
|
||||
<view class="showCodeTitle"> {{scanType === 'goods'?'确认核销该权证':'确认核销该优惠券'}}</view>
|
||||
<view class="goodsInfo" v-if="scanType === 'goods'">
|
||||
<image class="left" :src="info.goods.cover" mode="widthFix" />
|
||||
<view class="right">
|
||||
<view class="title ellipsis-2">{{info.goods.goods_name}}</view>
|
||||
<view class="number">核销数量: X {{info.qty}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goodsInfo" v-else>
|
||||
<view class="right">
|
||||
<view class="title ellipsis-2">优惠券名称:‘ {{info.coupon.title}} ’</view>
|
||||
<view class="number">
|
||||
优惠券类型:{{info.coupon.type.text}}
|
||||
<span style='padding-left: 20rpx;'>数量:1</span>
|
||||
</view>
|
||||
<view class="number">备注:{{info.coupon.remark}}</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="sureVer" @click="scanInfo(code,'post',)">确认核销</view>
|
||||
<view class="showCodeDes">请谨慎核销,操作成功后无法撤回</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
scanInfo
|
||||
} from '@/apis/interfaces/scan'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scanType: 'goods', // coupons 优惠券核销 goods 权证核销
|
||||
showCode: false,
|
||||
info: '', // 权证核销返回前置
|
||||
code: '', // 扫码返回的code
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
uni.hideLoading()
|
||||
},
|
||||
methods: {
|
||||
scanCode(e) {
|
||||
console.log(e)
|
||||
this.scanType = e
|
||||
uni.scanCode({
|
||||
success: (res) => {
|
||||
console.log('条码类型:' + res.scanType);
|
||||
console.log('条码内容:' + res.result);
|
||||
// uni.showLoading({
|
||||
// title: '核销请求中..'
|
||||
// })
|
||||
this.code = res.result
|
||||
this.scanInfo(res.result, 'get')
|
||||
}
|
||||
});
|
||||
},
|
||||
// 请求核销前置,优惠券前置和权证前置(get) post 是核销
|
||||
scanInfo(token, method) {
|
||||
console.log(token, this.scanType)
|
||||
let apiUrl = ''
|
||||
let data = {
|
||||
code: token
|
||||
}
|
||||
if (this.scanType === 'goods') {
|
||||
console.log('权证核销')
|
||||
apiUrl = 'manages/warrants/verification'
|
||||
} else {
|
||||
console.log('优惠券核销!')
|
||||
apiUrl = 'coupons/verify/coupon'
|
||||
}
|
||||
scanInfo(apiUrl, data, method).then(res => {
|
||||
if (this.scanType === 'goods') {
|
||||
uni.hideLoading()
|
||||
if (method === 'post') {
|
||||
this.showCode = false
|
||||
this.$refs.uToast.show({
|
||||
title: '权证核销成功',
|
||||
type: 'error',
|
||||
icon: false,
|
||||
duration: 3000
|
||||
})
|
||||
} else {
|
||||
this.showCode = true
|
||||
this.info = res
|
||||
}
|
||||
} else {
|
||||
console.log('优惠券核销 有商品跳转优惠券详情页面,没有商品直接弹出核销页面!')
|
||||
console.log(res, 'res')
|
||||
if (method === 'post') {
|
||||
this.showCode = false
|
||||
this.$refs.uToast.show({
|
||||
title: '优惠券核销成功',
|
||||
type: 'error',
|
||||
icon: false,
|
||||
duration: 3000
|
||||
})
|
||||
} else {
|
||||
if (res.goods.length > 0) {
|
||||
uni.showModal({
|
||||
title: '温馨提示',
|
||||
content: '该优惠券下绑定了商品,是否勾选相应商品',
|
||||
success: (res1) => {
|
||||
if (res1.confirm) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/property/coupon/canUseList?code=' +
|
||||
this.code
|
||||
})
|
||||
} else {
|
||||
this.showCode = true
|
||||
this.info = res.info
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.showCode = true
|
||||
this.info = res.info
|
||||
}
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$refs.uToast.show({
|
||||
title: err.message,
|
||||
type: 'error',
|
||||
icon: false,
|
||||
duration: 3000
|
||||
})
|
||||
this.showCode = false
|
||||
})
|
||||
},
|
||||
// 核销记录
|
||||
goHistory() {
|
||||
uni.navigateTo({
|
||||
url:'/pages/verification/history'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.Verification {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.top-img {
|
||||
margin-top: 100rpx;
|
||||
}
|
||||
|
||||
.txt {
|
||||
padding-top: 120rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 42rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.des {
|
||||
font-size: 34rpx;
|
||||
color: rgba($color: #255a7c, $alpha: .4);
|
||||
padding-top: 20rpx;
|
||||
font-weight: bold;
|
||||
|
||||
.dian {
|
||||
color: #039bfe;
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
margin-top: 140rpx;
|
||||
|
||||
.goods,
|
||||
.coupons {
|
||||
width: 310rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 8rpx;
|
||||
border: solid 1rpx #039bfe;
|
||||
color: #039bfe;
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.coupons {
|
||||
background-color: #039bfe;
|
||||
color: #fff;
|
||||
margin-left: 30rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.history {
|
||||
text-align: center;
|
||||
padding: $padding;
|
||||
width: 100%;
|
||||
color: #cacaca;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画效果
|
||||
.showCode {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
|
||||
.showCodeBg {
|
||||
background-color: rgba($color:#000, $alpha: 0.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.showCodeContentSelect {
|
||||
animation: sk-foldCubeAngle .6s linear both;
|
||||
}
|
||||
|
||||
.showCodeContentSelectNo {
|
||||
animation: sk-foldCubeAngleNo .6s linear both;
|
||||
}
|
||||
|
||||
.showCodeContent {
|
||||
padding: 50rpx 30rpx 30rpx 30rpx;
|
||||
width: 640rpx;
|
||||
min-height: 500rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
z-index: 199;
|
||||
|
||||
image {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.showCodeTitle {
|
||||
font-weight: bold;
|
||||
padding-bottom: 20rpx;
|
||||
font-size: 40rpx;
|
||||
margin-bottom: 20rpx;
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
|
||||
.goodsInfo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
margin: $margin;
|
||||
|
||||
// background-color:red;
|
||||
.left {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 2rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.number {
|
||||
padding-top: 10rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sureVer {
|
||||
background-color: #039bfe;
|
||||
width: 500rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 8rpx;
|
||||
color: #fff;
|
||||
margin: 30rpx 0;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
}
|
||||
|
||||
.showCodeDes {
|
||||
padding: 20rpx 0 20rpx 0;
|
||||
color: gray;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-foldCubeAngle {
|
||||
0% {
|
||||
-webkit-transform: perspective(140px) rotateX(-180deg);
|
||||
transform: perspective(140px) rotateX(-180deg);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: perspective(140px) rotateX(0deg);
|
||||
transform: perspective(140px) rotateX(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sk-foldCubeAngleNo {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes turn {
|
||||
0% {
|
||||
-webkit-transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25% {
|
||||
-webkit-transform: rotate(90deg);
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg);
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
75% {
|
||||
-webkit-transform: rotate(270deg);
|
||||
opacity: .9;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
30
public/date.js
Normal file
@@ -0,0 +1,30 @@
|
||||
|
||||
/**
|
||||
* Web唐明明
|
||||
* 匆匆数载恍如梦,岁月迢迢华发增。
|
||||
* 碌碌无为枉半生,一朝惊醒万事空。
|
||||
* moduleName: 日期
|
||||
*/
|
||||
|
||||
export default getDate = (type) =>{
|
||||
return new Promise((resolve, reject) => {
|
||||
const date = new Date()
|
||||
const year = date.getFullYear()
|
||||
const month = (date.getMonth() + 1) <= 9 ? '0' + (date.getMonth() + 1) : date.getMonth()
|
||||
const day = date.getDate()
|
||||
|
||||
switch(type){
|
||||
case 'day':
|
||||
resolve(year + '-' + month + '-' + day)
|
||||
break
|
||||
case 'month':
|
||||
resolve(year + '-' + month)
|
||||
break
|
||||
case 'year':
|
||||
resolve(year)
|
||||
break
|
||||
default:
|
||||
resolve(year + '-' + month + '-' + day)
|
||||
}
|
||||
})
|
||||
}
|
||||
135
public/userAuth.js
Normal file
@@ -0,0 +1,135 @@
|
||||
|
||||
/**
|
||||
* Web唐明明
|
||||
* 匆匆数载恍如梦,岁月迢迢华发增。
|
||||
* 碌碌无为枉半生,一朝惊醒万事空。
|
||||
* moduleName: 登录
|
||||
*/
|
||||
|
||||
import { router } from '../router'
|
||||
import { keyAuth } from '../apis/interfaces/auth'
|
||||
import store from '../store'
|
||||
|
||||
class userAuth {
|
||||
constructor() {
|
||||
this.univerfyConfig = {
|
||||
fullScreen : true,
|
||||
authButton: {
|
||||
'title': '一键登录',
|
||||
'normalColor': '#c82626',
|
||||
'highlightColor': '#a61010',
|
||||
'disabledColor': '#d86767',
|
||||
'borderRadius': '0'
|
||||
},
|
||||
otherLoginButton: {
|
||||
'title': '其他手机号码',
|
||||
'borderColor': '#c82626',
|
||||
'borderRadius': '0',
|
||||
'textColor': '#c82626'
|
||||
},
|
||||
privacyTerms: {
|
||||
'checkedImage': '/static/icons/checked-icon.png',
|
||||
'uncheckedImage': '/static/icons/unchecked-icon.png',
|
||||
'textColor': '#555555',
|
||||
'termsColor': '#c82626',
|
||||
'suffix': '并使用本机号码登录/注册',
|
||||
'privacyItems': [{
|
||||
'url': 'https://www.baidu.com',
|
||||
'title': '用户隐私规格'
|
||||
},{
|
||||
'url': 'https://www.baidu.com',
|
||||
'title': '用户服务协议'
|
||||
}]
|
||||
},
|
||||
buttons: {
|
||||
'iconWidth': '45px',
|
||||
'list': [{
|
||||
"provider": '微信登录',
|
||||
"iconPath": '/static/icons/wechat.png',
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
// 预登录
|
||||
Login(){
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.showLoading({
|
||||
title: '加载中',
|
||||
mask : true
|
||||
})
|
||||
uni.preLogin({
|
||||
provider: 'univerify',
|
||||
success : res=> {
|
||||
this.keyLogin().then(() => {
|
||||
resolve({
|
||||
auth: true
|
||||
})
|
||||
}).catch(errMsg => {
|
||||
reject(errMsg)
|
||||
})
|
||||
},
|
||||
fail : err=> {
|
||||
router.push({name: 'Login'})
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 一键登录
|
||||
keyLogin(){
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.login({
|
||||
provider : 'univerify',
|
||||
univerifyStyle : {...this.univerfyConfig},
|
||||
success: authResult => {
|
||||
keyAuth({
|
||||
access_token: authResult.authResult.access_token,
|
||||
openid : authResult.authResult.openid
|
||||
}).then(res => {
|
||||
uni.closeAuthView()
|
||||
store.commit('setToken', res.token_type + ' ' + res.access_token)
|
||||
resolve()
|
||||
if(!res.is_company){
|
||||
router.push({name: "Registered"})
|
||||
return
|
||||
}
|
||||
}).catch(err => {
|
||||
reject(err)
|
||||
})
|
||||
},
|
||||
fail : err => {
|
||||
uni.closeAuthView()
|
||||
switch(err.code){
|
||||
case 30002:
|
||||
router.push({name: "Login"})
|
||||
break
|
||||
case 30008:
|
||||
this.wechatAuth()
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 微信登录
|
||||
*/
|
||||
wechatAuth(){
|
||||
uni.showToast({
|
||||
title: '微信登录',
|
||||
icon : 'none'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 处理登录状态维护
|
||||
*/
|
||||
updAuthToken(){
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
export default userAuth
|
||||
@@ -9,9 +9,7 @@
|
||||
$text-color: #333;
|
||||
$text-gray: #555;
|
||||
$text-gray-m: #999;
|
||||
$text-price: #e93340;
|
||||
$main-color: #e93340;
|
||||
$main-color-light: #e93340;
|
||||
$text-price: #8b64fd;
|
||||
|
||||
// 边框颜色
|
||||
$border-color: #ddd;
|
||||
@@ -111,7 +109,6 @@ $padding: 30rpx;
|
||||
-webkit-line-clamp: 5;
|
||||
}
|
||||
|
||||
|
||||
// 修改nvtab
|
||||
$mainColor: white;
|
||||
|
||||
|
||||
BIN
static/icons/add-icon.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/icons/approve-icon.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
static/icons/audit-icon.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
static/icons/checked-icon.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/icons/e-logo-white.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/icons/e-logo.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
static/icons/equity_arrow_icon.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
static/icons/equity_arrow_right.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
static/icons/equity_arrow_up.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/icons/equity_coupons_01.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/icons/equity_coupons_02.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
static/icons/equity_coupons_03.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/icons/equity_nav.png
Normal file
|
After Width: | Height: | Size: 7.8 KiB |
BIN
static/icons/fire.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/icons/goods_buy.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/icons/goods_close.png
Normal file
|
After Width: | Height: | Size: 558 B |
BIN
static/icons/goods_row.png
Normal file
|
After Width: | Height: | Size: 686 B |
BIN
static/icons/goods_spot.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
static/icons/listnull-icon.png
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
static/icons/login-icon.png
Normal file
|
After Width: | Height: | Size: 8.7 KiB |
BIN
static/icons/market_icon_high.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/icons/market_icon_low.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/icons/order-null.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
static/icons/order_icon_00.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/icons/order_icon_01.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
static/icons/order_icon_02.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
static/icons/order_icon_03.png
Normal file
|
After Width: | Height: | Size: 2.1 KiB |
BIN
static/icons/order_icon_04.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
static/icons/payWay_icon_00.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
static/icons/payWay_icon_01.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
static/icons/property_icon_00.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
static/icons/property_icon_01.png
Normal file
|
After Width: | Height: | Size: 9.8 KiB |
BIN
static/icons/property_poster.png
Normal file
|
After Width: | Height: | Size: 585 B |
BIN
static/icons/search-icon.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
static/icons/store_codeBack.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
static/icons/store_contBack.png
Normal file
|
After Width: | Height: | Size: 24 KiB |
BIN
static/icons/store_down.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
static/icons/store_downBack.png
Normal file
|
After Width: | Height: | Size: 3.2 KiB |
BIN
static/icons/store_icon_icon.png
Normal file
|
After Width: | Height: | Size: 2.3 KiB |
BIN
static/icons/store_icon_pen.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/icons/store_icon_row.png
Normal file
|
After Width: | Height: | Size: 1.4 KiB |
BIN
static/icons/store_icon_vip.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
static/icons/store_logistic.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
static/icons/ticket-icon.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
static/icons/tool_icon_00.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
static/icons/tool_icon_01.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/icons/tool_icon_02.png
Normal file
|
After Width: | Height: | Size: 3.5 KiB |
BIN
static/icons/tool_icon_03.png
Normal file
|
After Width: | Height: | Size: 3.3 KiB |
BIN
static/icons/tool_icon_04.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
static/icons/tool_icon_05.png
Normal file
|
After Width: | Height: | Size: 2.8 KiB |
BIN
static/icons/tool_icon_06.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
static/icons/tool_icon_07.png
Normal file
|
After Width: | Height: | Size: 3.4 KiB |
BIN
static/icons/tool_icon_08.png
Normal file
|
After Width: | Height: | Size: 3.1 KiB |
BIN
static/icons/unchecked-icon.png
Normal file
|
After Width: | Height: | Size: 944 B |
BIN
static/icons/user_icon_00.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
static/icons/user_icon_01.png
Normal file
|
After Width: | Height: | Size: 9.6 KiB |
BIN
static/icons/user_icon_02.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
static/icons/user_icon_03.png
Normal file
|
After Width: | Height: | Size: 9.5 KiB |
BIN
static/icons/user_icon_04.png
Normal file
|
After Width: | Height: | Size: 9.2 KiB |
BIN
static/icons/vip_icon.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/icons/vip_pay_title.png
Normal file
|
After Width: | Height: | Size: 4.7 KiB |
BIN
static/icons/vip_privilege_tips.png
Normal file
|
After Width: | Height: | Size: 1.9 KiB |
BIN
static/icons/vip_privilege_tittle.png
Normal file
|
After Width: | Height: | Size: 5.1 KiB |
BIN
static/icons/vip_yearsIcon.png
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
static/icons/wechat.png
Normal file
|
After Width: | Height: | Size: 4.0 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 3.5 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 2.8 KiB |