feat(uniapp_v2): 二开功能迁移与小程序主包优化
- 从 uniapp 迁移 HJF 页面、API、组件及用户/订单相关改动 - queue、assets 使用独立分包以降低主包体积 - 修复首页单根节点与支付结果页 v-if 链 - 关闭 HjfDemoPanel 全局注册；uniNoticeBar 注释 $getAppWebview 避免 __webviewId__ 报错 - 配置域名与 manifest 应用名称；cache/store 防御性处理 Made-with: Cursor
This commit is contained in:
apple
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<!-- 日期组件 -->
|
||||
<view>
|
||||
<view class="dataList">
|
||||
<view class="times">
|
||||
<view class="item" :class="time == 'all' ? 'on' : ''" @click="setTime('all')">全部</view>
|
||||
<view class="item" :class="time == 'today' ? 'on' : ''" @click="setTime('today')">今日</view>
|
||||
<view class="item" :class="time == 'yesterday' ? 'on' : ''" @click="setTime('yesterday')">昨日</view>
|
||||
<view class="item" :class="time == 'seven' ? 'on' : ''" @click="setTime('seven')">近7日</view>
|
||||
</view>
|
||||
<view class="item" :class="time == 'date' ? 'on' : ''" @click="dateTitle">自定义时间 <text
|
||||
class="iconfont icon-ic_downarrow downarrow"></text></view>
|
||||
</view>
|
||||
<uni-calendar ref="calendar" :date="info.date" :insert="info.insert" :lunar="info.lunar"
|
||||
:startDate="info.startDate" :endDate="info.endDate" :range="info.range" @confirm="confirm"
|
||||
:showMonth="info.showMonth" />
|
||||
<view class="mask" @touchmove.prevent v-show="current === true" @click="close"></view>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading from '@/components/Loading/index.vue'
|
||||
import uniCalendar from '../uni-calendar/uni-calendar.vue'
|
||||
const year = new Date().getFullYear();
|
||||
const month = new Date().getMonth() + 1;
|
||||
const day = new Date().getDate();
|
||||
export default {
|
||||
components: {
|
||||
uniCalendar,
|
||||
Loading
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time:'all',
|
||||
current: false,
|
||||
loaded: false,
|
||||
loading: false,
|
||||
info: {
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
lunar: false,
|
||||
range: true,
|
||||
insert: false,
|
||||
selected: [],
|
||||
showMonth: false
|
||||
},
|
||||
where: {
|
||||
start: "",
|
||||
stop: "",
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close() {
|
||||
this.current = false;
|
||||
},
|
||||
// 日历确定
|
||||
confirm(e) {
|
||||
let self = this
|
||||
let star, stop;
|
||||
if (e.range.after && e.range.before) {
|
||||
if (e.range.before > e.range.after) {
|
||||
star = new Date(e.range.after + ' 00:00:00').getTime() / 1000
|
||||
stop = new Date(e.range.before + ' 23:59:59').getTime() / 1000
|
||||
} else {
|
||||
star = new Date(e.range.before + ' 00:00:00').getTime() / 1000
|
||||
stop = new Date(e.range.after + ' 23:59:59').getTime() / 1000
|
||||
}
|
||||
self.where.start = star
|
||||
self.where.stop = stop
|
||||
self.loaded = false;
|
||||
self.loading = false;
|
||||
// Promise.all();
|
||||
this.$emit('changeTime', this.where)
|
||||
}else{
|
||||
star = new Date(e.fulldate + ' 00:00:00').getTime() / 1000
|
||||
stop = new Date(e.fulldate + ' 23:59:59').getTime() / 1000
|
||||
self.where.start = star
|
||||
self.where.stop = stop
|
||||
self.loaded = false;
|
||||
self.loading = false;
|
||||
this.$emit('changeTime', this.where)
|
||||
}
|
||||
},
|
||||
dateTitle() {
|
||||
this.$refs.calendar.open()
|
||||
this.time = 'date'
|
||||
},
|
||||
setTime(time) {
|
||||
let self = this
|
||||
this.time = time;
|
||||
var year = new Date().getFullYear(),
|
||||
month = new Date().getMonth() + 1,
|
||||
day = new Date().getDate();
|
||||
this.tip = 1
|
||||
this.loaded = false;
|
||||
this.loading = false;
|
||||
switch (time) {
|
||||
case "all":
|
||||
this.where.start = 0
|
||||
this.where.stop = 0
|
||||
this.title = "全部";
|
||||
this.$emit('changeTime', this.where)
|
||||
break;
|
||||
case "today":
|
||||
this.where.start =
|
||||
new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
|
||||
1000;
|
||||
this.where.stop =
|
||||
new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
|
||||
1000 +
|
||||
24 * 60 * 60 -
|
||||
1;
|
||||
this.title = "今日";
|
||||
this.$emit('changeTime', this.where)
|
||||
break;
|
||||
case "yesterday":
|
||||
this.where.start =
|
||||
new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
|
||||
1000 -
|
||||
24 * 60 * 60;
|
||||
this.where.stop =
|
||||
new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
|
||||
1000 -
|
||||
1;
|
||||
this.title = "昨日";
|
||||
this.$emit('changeTime', this.where)
|
||||
break;
|
||||
case "month":
|
||||
this.where.start =
|
||||
new Date(year, new Date().getMonth(), 1).getTime() / 1000;
|
||||
this.where.stop = new Date(year, month, 1).getTime() / 1000 - 1;
|
||||
this.title = "本月";
|
||||
this.$emit('changeTime', this.where)
|
||||
break;
|
||||
case "seven":
|
||||
this.where.start =
|
||||
new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
|
||||
1000 +
|
||||
24 * 60 * 60 -
|
||||
7 * 3600 * 24;
|
||||
this.where.stop =
|
||||
new Date(Date.parse(year + "/" + month + "/" + day)).getTime() /
|
||||
1000 +
|
||||
24 * 60 * 60 -
|
||||
1;
|
||||
this.title = "七日";
|
||||
this.$emit('changeTime', this.where)
|
||||
break;
|
||||
// #ifdef MP
|
||||
case "date":
|
||||
let star = new Date(self.before).getTime() / 1000
|
||||
let stop = new Date(self.after).getTime() / 1000
|
||||
self.where.start = star
|
||||
self.where.stop = stop
|
||||
Promise.all([self.getList()]);
|
||||
this.$emit('changeTime', this.where)
|
||||
break;
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.dataList {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 24rpx 20rpx;
|
||||
background-color: #fff;
|
||||
color: #999;
|
||||
font-size: 24rpx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
.times {
|
||||
display: flex;
|
||||
|
||||
.item {
|
||||
margin-right: 20rpx;
|
||||
background: #F5F5F5;
|
||||
padding: 8rpx 24rpx;
|
||||
border-radius: 30rpx;
|
||||
|
||||
}
|
||||
|
||||
.item.on {
|
||||
color: #E93323;
|
||||
background-color: #FCEAE9;
|
||||
}
|
||||
}
|
||||
.item{
|
||||
padding: 10rpx 0rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.downarrow {
|
||||
padding-left: 10rpx;
|
||||
font-size: 26rpx !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,546 @@
|
||||
/**
|
||||
* @1900-2100区间内的公历、农历互转
|
||||
* @charset UTF-8
|
||||
* @github https://github.com/jjonline/calendar.js
|
||||
* @Author Jea杨(JJonline@JJonline.Cn)
|
||||
* @Time 2014-7-21
|
||||
* @Time 2016-8-13 Fixed 2033hex、Attribution Annals
|
||||
* @Time 2016-9-25 Fixed lunar LeapMonth Param Bug
|
||||
* @Time 2017-7-24 Fixed use getTerm Func Param Error.use solar year,NOT lunar year
|
||||
* @Version 1.0.3
|
||||
* @公历转农历：calendar.solar2lunar(1987,11,01); //[you can ignore params of prefix 0]
|
||||
* @农历转公历：calendar.lunar2solar(1987,09,10); //[you can ignore params of prefix 0]
|
||||
*/
|
||||
/* eslint-disable */
|
||||
var calendar = {
|
||||
|
||||
/**
|
||||
* 农历1900-2100的润大小信息表
|
||||
* @Array Of Property
|
||||
* @return Hex
|
||||
*/
|
||||
lunarInfo: [0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2, // 1900-1909
|
||||
0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977, // 1910-1919
|
||||
0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970, // 1920-1929
|
||||
0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950, // 1930-1939
|
||||
0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557, // 1940-1949
|
||||
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, // 1950-1959
|
||||
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, // 1960-1969
|
||||
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, // 1970-1979
|
||||
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, // 1980-1989
|
||||
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x05ac0, 0x0ab60, 0x096d5, 0x092e0, // 1990-1999
|
||||
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, // 2000-2009
|
||||
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, // 2010-2019
|
||||
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, // 2020-2029
|
||||
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, // 2030-2039
|
||||
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, // 2040-2049
|
||||
/** Add By JJonline@JJonline.Cn**/
|
||||
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, // 2050-2059
|
||||
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, // 2060-2069
|
||||
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, // 2070-2079
|
||||
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, // 2080-2089
|
||||
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, // 2090-2099
|
||||
0x0d520], // 2100
|
||||
|
||||
/**
|
||||
* 公历每个月份的天数普通表
|
||||
* @Array Of Property
|
||||
* @return Number
|
||||
*/
|
||||
solarMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
|
||||
|
||||
/**
|
||||
* 天干地支之天干速查表
|
||||
* @Array Of Property trans["甲","乙","丙","丁","戊","己","庚","辛","壬","癸"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Gan: ['\u7532', '\u4e59', '\u4e19', '\u4e01', '\u620a', '\u5df1', '\u5e9a', '\u8f9b', '\u58ec', '\u7678'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表
|
||||
* @Array Of Property
|
||||
* @trans["子","丑","寅","卯","辰","巳","午","未","申","酉","戌","亥"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Zhi: ['\u5b50', '\u4e11', '\u5bc5', '\u536f', '\u8fb0', '\u5df3', '\u5348', '\u672a', '\u7533', '\u9149', '\u620c', '\u4ea5'],
|
||||
|
||||
/**
|
||||
* 天干地支之地支速查表<=>生肖
|
||||
* @Array Of Property
|
||||
* @trans["鼠","牛","虎","兔","龙","蛇","马","羊","猴","鸡","狗","猪"]
|
||||
* @return Cn string
|
||||
*/
|
||||
Animals: ['\u9f20', '\u725b', '\u864e', '\u5154', '\u9f99', '\u86c7', '\u9a6c', '\u7f8a', '\u7334', '\u9e21', '\u72d7', '\u732a'],
|
||||
|
||||
/**
|
||||
* 24节气速查表
|
||||
* @Array Of Property
|
||||
* @trans["小寒","大寒","立春","雨水","惊蛰","春分","清明","谷雨","立夏","小满","芒种","夏至","小暑","大暑","立秋","处暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"]
|
||||
* @return Cn string
|
||||
*/
|
||||
solarTerm: ['\u5c0f\u5bd2', '\u5927\u5bd2', '\u7acb\u6625', '\u96e8\u6c34', '\u60ca\u86f0', '\u6625\u5206', '\u6e05\u660e', '\u8c37\u96e8', '\u7acb\u590f', '\u5c0f\u6ee1', '\u8292\u79cd', '\u590f\u81f3', '\u5c0f\u6691', '\u5927\u6691', '\u7acb\u79cb', '\u5904\u6691', '\u767d\u9732', '\u79cb\u5206', '\u5bd2\u9732', '\u971c\u964d', '\u7acb\u51ac', '\u5c0f\u96ea', '\u5927\u96ea', '\u51ac\u81f3'],
|
||||
|
||||
/**
|
||||
* 1900-2100各年的24节气日期速查表
|
||||
* @Array Of Property
|
||||
* @return 0x string For splice
|
||||
*/
|
||||
sTermInfo: ['9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f',
|
||||
'97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f', 'b027097bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd0b06bdb0722c965ce1cfcc920f',
|
||||
'b027097bd097c36b0b6fc9274c91aa', '9778397bd19801ec9210c965cc920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2', '9778397bd197c36c9210c9274c91aa',
|
||||
'97b6b97bd19801ec95f8c965cc920e', '97bd09801d98082c95f8e1cfcc920f', '97bd097bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec95f8c965cc920e', '97bcf97c3598082c95f8e1cfcc920f',
|
||||
'97bd097bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c3598082c95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f',
|
||||
'97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf97c359801ec95f8c965cc920f', '97bd097bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf97c359801ec95f8c965cc920f', '97bd097bd07f595b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c8dc2', '9778397bd19801ec9210c9274c920e', '97b6b97bd19801ec95f8c965cc920f',
|
||||
'97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b97bd19801ec95f8c965cc920f', '97bd07f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36c9210c9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bd07f1487f595b0b0bc920fb0722',
|
||||
'7f0e397bd097c36b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e', '97bcf7f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b97bd19801ec9210c965cc920e',
|
||||
'97bcf7f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b97bd19801ec9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b97bd197c36c9210c9274c920e', '97bcf7f0e47f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '9778397bd097c36c9210c9274c920e',
|
||||
'97b6b7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c36b0b6fc9210c8dc2',
|
||||
'9778397bd097c36b0b70c9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f595b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc920fb0722', '9778397bd097c36b0b6fc9274c91aa', '97b6b7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9274c91aa',
|
||||
'97b6b7f0e47f531b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'9778397bd097c36b0b6fc9210c91aa', '97b6b7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '9778397bd097c36b0b6fc9210c8dc2', '977837f0e37f149b0723b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f5307f595b0b0bc920fb0722', '7f0e397bd097c35b0b6fc9210c8dc2',
|
||||
'977837f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e37f1487f595b0b0bb0b6fb0722',
|
||||
'7f0e397bd097c35b0b6fc9210c8dc2', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd097c35b0b6fc920fb0722',
|
||||
'977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0b0bb0b6fb0722', '7f0e397bd07f595b0b0bc920fb0722',
|
||||
'977837f0e37f14998082b0723b06bd', '7f07e7f0e37f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e397bd07f595b0b0bc920fb0722', '977837f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f595b0b0bb0b6fb0722', '7f0e37f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e37f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e37f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e37f14898082b072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f149b0723b0787b0721',
|
||||
'7f0e27f1487f531b0b0bb0b6fb0722', '7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14998082b0723b06bd',
|
||||
'7f07e7f0e47f149b0723b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722', '7f0e37f0e366aa89801eb072297c35',
|
||||
'7ec967f0e37f14998082b0723b06bd', '7f07e7f0e37f14998083b0787b0721', '7f0e27f0e47f531b0723b0b6fb0722',
|
||||
'7f0e37f0e366aa89801eb072297c35', '7ec967f0e37f14898082b0723b02d5', '7f07e7f0e37f14998082b0787b0721',
|
||||
'7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66aa89801e9808297c35', '665f67f0e37f14898082b0723b02d5',
|
||||
'7ec967f0e37f14998082b0787b0721', '7f07e7f0e47f531b0723b0b6fb0722', '7f0e36665b66a449801e9808297c35',
|
||||
'665f67f0e37f14898082b0723b02d5', '7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721',
|
||||
'7f0e36665b66a449801e9808297c35', '665f67f0e37f14898082b072297c35', '7ec967f0e37f14998082b0787b06bd',
|
||||
'7f07e7f0e47f531b0723b0b6fb0721', '7f0e26665b66a449801e9808297c35', '665f67f0e37f1489801eb072297c35',
|
||||
'7ec967f0e37f14998082b0787b06bd', '7f07e7f0e47f531b0723b0b6fb0721', '7f0e27f1487f531b0b0bb0b6fb0722'],
|
||||
|
||||
/**
|
||||
* 数字转中文速查表
|
||||
* @Array Of Property
|
||||
* @trans ['日','一','二','三','四','五','六','七','八','九','十']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr1: ['\u65e5', '\u4e00', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341'],
|
||||
|
||||
/**
|
||||
* 日期转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['初','十','廿','卅']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr2: ['\u521d', '\u5341', '\u5eff', '\u5345'],
|
||||
|
||||
/**
|
||||
* 月份转农历称呼速查表
|
||||
* @Array Of Property
|
||||
* @trans ['正','一','二','三','四','五','六','七','八','九','十','冬','腊']
|
||||
* @return Cn string
|
||||
*/
|
||||
nStr3: ['\u6b63', '\u4e8c', '\u4e09', '\u56db', '\u4e94', '\u516d', '\u4e03', '\u516b', '\u4e5d', '\u5341', '\u51ac', '\u814a'],
|
||||
|
||||
/**
|
||||
* 返回农历y年一整年的总天数
|
||||
* @param lunar Year
|
||||
* @return Number
|
||||
* @eg:var count = calendar.lYearDays(1987) ;//count=387
|
||||
*/
|
||||
lYearDays: function (y) {
|
||||
var i; var sum = 348
|
||||
for (i = 0x8000; i > 0x8; i >>= 1) { sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0 }
|
||||
return (sum + this.leapDays(y))
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月是哪个月；若y年没有闰月 则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0-12)
|
||||
* @eg:var leapMonth = calendar.leapMonth(1987) ;//leapMonth=6
|
||||
*/
|
||||
leapMonth: function (y) { // 闰字编码 \u95f0
|
||||
return (this.lunarInfo[y - 1900] & 0xf)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年闰月的天数 若该年没有闰月则返回0
|
||||
* @param lunar Year
|
||||
* @return Number (0、29、30)
|
||||
* @eg:var leapMonthDay = calendar.leapDays(1987) ;//leapMonthDay=29
|
||||
*/
|
||||
leapDays: function (y) {
|
||||
if (this.leapMonth(y)) {
|
||||
return ((this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29)
|
||||
}
|
||||
return (0)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回农历y年m月（非闰月）的总天数，计算m为闰月时的天数请使用leapDays方法
|
||||
* @param lunar Year
|
||||
* @return Number (-1、29、30)
|
||||
* @eg:var MonthDay = calendar.monthDays(1987,9) ;//MonthDay=29
|
||||
*/
|
||||
monthDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 }// 月份参数从1至12，参数错误返回-1
|
||||
return ((this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29)
|
||||
},
|
||||
|
||||
/**
|
||||
* 返回公历(!)y年m月的天数
|
||||
* @param solar Year
|
||||
* @return Number (-1、28、29、30、31)
|
||||
* @eg:var solarMonthDay = calendar.leapDays(1987) ;//solarMonthDay=30
|
||||
*/
|
||||
solarDays: function (y, m) {
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var ms = m - 1
|
||||
if (ms == 1) { // 2月份的闰平规律测算后确认返回28或29
|
||||
return (((y % 4 == 0) && (y % 100 != 0) || (y % 400 == 0)) ? 29 : 28)
|
||||
} else {
|
||||
return (this.solarMonth[ms])
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 农历年份转换为干支纪年
|
||||
* @param lYear 农历年的年份数
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhiYear: function (lYear) {
|
||||
var ganKey = (lYear - 3) % 10
|
||||
var zhiKey = (lYear - 3) % 12
|
||||
if (ganKey == 0) ganKey = 10// 如果余数为0则为最后一个天干
|
||||
if (zhiKey == 0) zhiKey = 12// 如果余数为0则为最后一个地支
|
||||
return this.Gan[ganKey - 1] + this.Zhi[zhiKey - 1]
|
||||
},
|
||||
|
||||
/**
|
||||
* 公历月、日判断所属星座
|
||||
* @param cMonth [description]
|
||||
* @param cDay [description]
|
||||
* @return Cn string
|
||||
*/
|
||||
toAstro: function (cMonth, cDay) {
|
||||
var s = '\u9b54\u7faf\u6c34\u74f6\u53cc\u9c7c\u767d\u7f8a\u91d1\u725b\u53cc\u5b50\u5de8\u87f9\u72ee\u5b50\u5904\u5973\u5929\u79e4\u5929\u874e\u5c04\u624b\u9b54\u7faf'
|
||||
var arr = [20, 19, 21, 21, 21, 22, 23, 23, 23, 23, 22, 22]
|
||||
return s.substr(cMonth * 2 - (cDay < arr[cMonth - 1] ? 2 : 0), 2) + '\u5ea7'// 座
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入offset偏移量返回干支
|
||||
* @param offset 相对甲子的偏移量
|
||||
* @return Cn string
|
||||
*/
|
||||
toGanZhi: function (offset) {
|
||||
return this.Gan[offset % 10] + this.Zhi[offset % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入公历(!)y年获得该年第n个节气的公历日期
|
||||
* @param y公历年(1900-2100)；n二十四节气中的第几个节气(1~24)；从n=1(小寒)算起
|
||||
* @return day Number
|
||||
* @eg:var _24 = calendar.getTerm(1987,3) ;//_24=4;意即1987年2月4日立春
|
||||
*/
|
||||
getTerm: function (y, n) {
|
||||
if (y < 1900 || y > 2100) { return -1 }
|
||||
if (n < 1 || n > 24) { return -1 }
|
||||
var _table = this.sTermInfo[y - 1900]
|
||||
var _info = [
|
||||
parseInt('0x' + _table.substr(0, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(5, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(10, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(15, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(20, 5)).toString(),
|
||||
parseInt('0x' + _table.substr(25, 5)).toString()
|
||||
]
|
||||
var _calday = [
|
||||
_info[0].substr(0, 1),
|
||||
_info[0].substr(1, 2),
|
||||
_info[0].substr(3, 1),
|
||||
_info[0].substr(4, 2),
|
||||
|
||||
_info[1].substr(0, 1),
|
||||
_info[1].substr(1, 2),
|
||||
_info[1].substr(3, 1),
|
||||
_info[1].substr(4, 2),
|
||||
|
||||
_info[2].substr(0, 1),
|
||||
_info[2].substr(1, 2),
|
||||
_info[2].substr(3, 1),
|
||||
_info[2].substr(4, 2),
|
||||
|
||||
_info[3].substr(0, 1),
|
||||
_info[3].substr(1, 2),
|
||||
_info[3].substr(3, 1),
|
||||
_info[3].substr(4, 2),
|
||||
|
||||
_info[4].substr(0, 1),
|
||||
_info[4].substr(1, 2),
|
||||
_info[4].substr(3, 1),
|
||||
_info[4].substr(4, 2),
|
||||
|
||||
_info[5].substr(0, 1),
|
||||
_info[5].substr(1, 2),
|
||||
_info[5].substr(3, 1),
|
||||
_info[5].substr(4, 2)
|
||||
]
|
||||
return parseInt(_calday[n - 1])
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历数字月份返回汉语通俗表示法
|
||||
* @param lunar month
|
||||
* @return Cn string
|
||||
* @eg:var cnMonth = calendar.toChinaMonth(12) ;//cnMonth='腊月'
|
||||
*/
|
||||
toChinaMonth: function (m) { // 月 => \u6708
|
||||
if (m > 12 || m < 1) { return -1 } // 若参数错误 返回-1
|
||||
var s = this.nStr3[m - 1]
|
||||
s += '\u6708'// 加上月字
|
||||
return s
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历日期数字返回汉字表示法
|
||||
* @param lunar day
|
||||
* @return Cn string
|
||||
* @eg:var cnDay = calendar.toChinaDay(21) ;//cnMonth='廿一'
|
||||
*/
|
||||
toChinaDay: function (d) { // 日 => \u65e5
|
||||
var s
|
||||
switch (d) {
|
||||
case 10:
|
||||
s = '\u521d\u5341'; break
|
||||
case 20:
|
||||
s = '\u4e8c\u5341'; break
|
||||
break
|
||||
case 30:
|
||||
s = '\u4e09\u5341'; break
|
||||
break
|
||||
default :
|
||||
s = this.nStr2[Math.floor(d / 10)]
|
||||
s += this.nStr1[d % 10]
|
||||
}
|
||||
return (s)
|
||||
},
|
||||
|
||||
/**
|
||||
* 年份转生肖[!仅能大致转换] => 精确划分生肖分界线是“立春”
|
||||
* @param y year
|
||||
* @return Cn string
|
||||
* @eg:var animal = calendar.getAnimal(1987) ;//animal='兔'
|
||||
*/
|
||||
getAnimal: function (y) {
|
||||
return this.Animals[(y - 4) % 12]
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入阳历年月日获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y solar year
|
||||
* @param m solar month
|
||||
* @param d solar day
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.solar2lunar(1987,11,01));
|
||||
*/
|
||||
solar2lunar: function (y, m, d) { // 参数区间1900.1.31~2100.12.31
|
||||
// 年份限定、上限
|
||||
if (y < 1900 || y > 2100) {
|
||||
return -1// undefined转换为数字变为NaN
|
||||
}
|
||||
// 公历传参最下限
|
||||
if (y == 1900 && m == 1 && d < 31) {
|
||||
return -1
|
||||
}
|
||||
// 未传参 获得当天
|
||||
if (!y) {
|
||||
var objDate = new Date()
|
||||
} else {
|
||||
var objDate = new Date(y, parseInt(m) - 1, d)
|
||||
}
|
||||
var i; var leap = 0; var temp = 0
|
||||
// 修正ymd参数
|
||||
var y = objDate.getFullYear()
|
||||
var m = objDate.getMonth() + 1
|
||||
var d = objDate.getDate()
|
||||
var offset = (Date.UTC(objDate.getFullYear(), objDate.getMonth(), objDate.getDate()) - Date.UTC(1900, 0, 31)) / 86400000
|
||||
for (i = 1900; i < 2101 && offset > 0; i++) {
|
||||
temp = this.lYearDays(i)
|
||||
offset -= temp
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; i--
|
||||
}
|
||||
|
||||
// 是否今天
|
||||
var isTodayObj = new Date()
|
||||
var isToday = false
|
||||
if (isTodayObj.getFullYear() == y && isTodayObj.getMonth() + 1 == m && isTodayObj.getDate() == d) {
|
||||
isToday = true
|
||||
}
|
||||
// 星期几
|
||||
var nWeek = objDate.getDay()
|
||||
var cWeek = this.nStr1[nWeek]
|
||||
// 数字表示周几顺应天朝周一开始的惯例
|
||||
if (nWeek == 0) {
|
||||
nWeek = 7
|
||||
}
|
||||
// 农历年
|
||||
var year = i
|
||||
var leap = this.leapMonth(i) // 闰哪个月
|
||||
var isLeap = false
|
||||
|
||||
// 效验闰月
|
||||
for (i = 1; i < 13 && offset > 0; i++) {
|
||||
// 闰月
|
||||
if (leap > 0 && i == (leap + 1) && isLeap == false) {
|
||||
--i
|
||||
isLeap = true; temp = this.leapDays(year) // 计算农历闰月天数
|
||||
} else {
|
||||
temp = this.monthDays(year, i)// 计算农历普通月天数
|
||||
}
|
||||
// 解除闰月
|
||||
if (isLeap == true && i == (leap + 1)) { isLeap = false }
|
||||
offset -= temp
|
||||
}
|
||||
// 闰月导致数组下标重叠取反
|
||||
if (offset == 0 && leap > 0 && i == leap + 1) {
|
||||
if (isLeap) {
|
||||
isLeap = false
|
||||
} else {
|
||||
isLeap = true; --i
|
||||
}
|
||||
}
|
||||
if (offset < 0) {
|
||||
offset += temp; --i
|
||||
}
|
||||
// 农历月
|
||||
var month = i
|
||||
// 农历日
|
||||
var day = offset + 1
|
||||
// 天干地支处理
|
||||
var sm = m - 1
|
||||
var gzY = this.toGanZhiYear(year)
|
||||
|
||||
// 当月的两个节气
|
||||
// bugfix-2017-7-24 11:03:38 use lunar Year Param `y` Not `year`
|
||||
var firstNode = this.getTerm(y, (m * 2 - 1))// 返回当月「节」为几日开始
|
||||
var secondNode = this.getTerm(y, (m * 2))// 返回当月「节」为几日开始
|
||||
|
||||
// 依据12节气修正干支月
|
||||
var gzM = this.toGanZhi((y - 1900) * 12 + m + 11)
|
||||
if (d >= firstNode) {
|
||||
gzM = this.toGanZhi((y - 1900) * 12 + m + 12)
|
||||
}
|
||||
|
||||
// 传入的日期的节气与否
|
||||
var isTerm = false
|
||||
var Term = null
|
||||
if (firstNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 2]
|
||||
}
|
||||
if (secondNode == d) {
|
||||
isTerm = true
|
||||
Term = this.solarTerm[m * 2 - 1]
|
||||
}
|
||||
// 日柱 当月一日与 1900/1/1 相差天数
|
||||
var dayCyclical = Date.UTC(y, sm, 1, 0, 0, 0, 0) / 86400000 + 25567 + 10
|
||||
var gzD = this.toGanZhi(dayCyclical + d - 1)
|
||||
// 该日期所属的星座
|
||||
var astro = this.toAstro(m, d)
|
||||
|
||||
return { 'lYear': year, 'lMonth': month, 'lDay': day, 'Animal': this.getAnimal(year), 'IMonthCn': (isLeap ? '\u95f0' : '') + this.toChinaMonth(month), 'IDayCn': this.toChinaDay(day), 'cYear': y, 'cMonth': m, 'cDay': d, 'gzYear': gzY, 'gzMonth': gzM, 'gzDay': gzD, 'isToday': isToday, 'isLeap': isLeap, 'nWeek': nWeek, 'ncWeek': '\u661f\u671f' + cWeek, 'isTerm': isTerm, 'Term': Term, 'astro': astro }
|
||||
},
|
||||
|
||||
/**
|
||||
* 传入农历年月日以及传入的月份是否闰月获得详细的公历、农历object信息 <=>JSON
|
||||
* @param y lunar year
|
||||
* @param m lunar month
|
||||
* @param d lunar day
|
||||
* @param isLeapMonth lunar month is leap or not.[如果是农历闰月第四个参数赋值true即可]
|
||||
* @return JSON object
|
||||
* @eg:console.log(calendar.lunar2solar(1987,9,10));
|
||||
*/
|
||||
lunar2solar: function (y, m, d, isLeapMonth) { // 参数区间1900.1.31~2100.12.1
|
||||
var isLeapMonth = !!isLeapMonth
|
||||
var leapOffset = 0
|
||||
var leapMonth = this.leapMonth(y)
|
||||
var leapDay = this.leapDays(y)
|
||||
if (isLeapMonth && (leapMonth != m)) { return -1 }// 传参要求计算该闰月公历 但该年得出的闰月与传参的月份并不同
|
||||
if (y == 2100 && m == 12 && d > 1 || y == 1900 && m == 1 && d < 31) { return -1 }// 超出了最大极限值
|
||||
var day = this.monthDays(y, m)
|
||||
var _day = day
|
||||
// bugFix 2016-9-25
|
||||
// if month is leap, _day use leapDays method
|
||||
if (isLeapMonth) {
|
||||
_day = this.leapDays(y, m)
|
||||
}
|
||||
if (y < 1900 || y > 2100 || d > _day) { return -1 }// 参数合法性效验
|
||||
|
||||
// 计算农历的时间差
|
||||
var offset = 0
|
||||
for (var i = 1900; i < y; i++) {
|
||||
offset += this.lYearDays(i)
|
||||
}
|
||||
var leap = 0; var isAdd = false
|
||||
for (var i = 1; i < m; i++) {
|
||||
leap = this.leapMonth(y)
|
||||
if (!isAdd) { // 处理闰月
|
||||
if (leap <= i && leap > 0) {
|
||||
offset += this.leapDays(y); isAdd = true
|
||||
}
|
||||
}
|
||||
offset += this.monthDays(y, i)
|
||||
}
|
||||
// 转换闰月农历 需补充该年闰月的前一个月的时差
|
||||
if (isLeapMonth) { offset += day }
|
||||
// 1900年农历正月一日的公历时间为1900年1月30日0时0分0秒(该时间也是本农历的最开始起始点)
|
||||
var stmap = Date.UTC(1900, 1, 30, 0, 0, 0)
|
||||
var calObj = new Date((offset + d - 31) * 86400000 + stmap)
|
||||
var cY = calObj.getUTCFullYear()
|
||||
var cM = calObj.getUTCMonth() + 1
|
||||
var cD = calObj.getUTCDate()
|
||||
|
||||
return this.solar2lunar(cY, cM, cD)
|
||||
}
|
||||
}
|
||||
|
||||
export default calendar
|
||||
@@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<view class="uni-calendar-item__weeks-box" :class="{
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||
'uni-calendar-item--checked':(calendar.fullDate === weeks.fullDate && !weeks.isDay) ,
|
||||
'uni-calendar-item--multiple': weeks.multiple
|
||||
}"
|
||||
@click="choiceDate(weeks)">
|
||||
<view class="uni-calendar-item__weeks-box-item">
|
||||
<text v-if="selected&&weeks.extraInfo" class="uni-calendar-item__weeks-box-circle"></text>
|
||||
<text class="uni-calendar-item__weeks-box-text" :class="{
|
||||
'uni-calendar-item--isDay-text': weeks.isDay,
|
||||
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
}">{{weeks.date}}</text>
|
||||
<text v-if="!lunar&&!weeks.extraInfo && weeks.isDay" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
}">今天</text>
|
||||
<text v-if="lunar&&!weeks.extraInfo" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
}">{{weeks.isDay?'今天': (weeks.lunar.IDayCn === '初一'?weeks.lunar.IMonthCn:weeks.lunar.IDayCn)}}</text>
|
||||
<text v-if="weeks.extraInfo&&weeks.extraInfo.info" class="uni-calendar-item__weeks-lunar-text" :class="{
|
||||
'uni-calendar-item--extra':weeks.extraInfo.info,
|
||||
'uni-calendar-item--isDay-text':weeks.isDay,
|
||||
'uni-calendar-item--isDay':calendar.fullDate === weeks.fullDate && weeks.isDay,
|
||||
'uni-calendar-item--checked':calendar.fullDate === weeks.fullDate && !weeks.isDay,
|
||||
'uni-calendar-item--multiple': weeks.multiple,
|
||||
'uni-calendar-item--disable':weeks.disable,
|
||||
}">{{weeks.extraInfo.info}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
weeks: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
calendar: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
selected: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
},
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
choiceDate(weeks) {
|
||||
this.$emit('change', weeks)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-calendar-item__weeks-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-text {
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-lunar-text {
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-item {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
.uni-calendar-item__weeks-box-circle {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 8px;
|
||||
background-color: $uni-color-error;
|
||||
|
||||
}
|
||||
|
||||
.uni-calendar-item--disable {
|
||||
background-color: rgba(249, 249, 249, $uni-opacity-disabled);
|
||||
color: $uni-text-color-disable;
|
||||
}
|
||||
|
||||
.uni-calendar-item--isDay-text {
|
||||
color: $uni-color-primary;
|
||||
}
|
||||
|
||||
.uni-calendar-item--isDay {
|
||||
background-color: $uni-color-primary;
|
||||
opacity: 0.8;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar-item--extra {
|
||||
color: $uni-color-error;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.uni-calendar-item--checked {
|
||||
background-color: $uni-color-primary;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.uni-calendar-item--multiple {
|
||||
background-color: $uni-color-primary;
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,435 @@
|
||||
<template>
|
||||
<view class="uni-calendar" @touchmove.stop.prevent="clean">
|
||||
<view v-if="!insert&&show" class="uni-calendar__mask" :class="{'uni-calendar--mask-show':aniMaskShow}" @click="close"></view>
|
||||
<view v-if="insert || show" class="uni-calendar__content" :class="{'uni-calendar--fixed':!insert,'uni-calendar--ani-show':aniMaskShow}">
|
||||
<view v-if="!insert" class="uni-calendar__header uni-calendar--fixed-top">
|
||||
<view class="uni-calendar__header-btn-box" @click="close">
|
||||
<text class="uni-calendar__header-text uni-calendar--fixed-width">取消</text>
|
||||
</view>
|
||||
<view class="uni-calendar__header-btn-box" @click="confirm">
|
||||
<text class="uni-calendar__header-text uni-calendar--fixed-width">确定</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-calendar__header">
|
||||
<view class="uni-calendar__header-btn-box" @click="pre">
|
||||
<view class="iconfont icon-ic_leftarrow"></view>
|
||||
</view>
|
||||
<text class="uni-calendar__header-text">{{ (nowDate.year||'') +'年'+( nowDate.month||'') +'月'}}</text>
|
||||
<view class="uni-calendar__header-btn-box" @click="next">
|
||||
<view class="iconfont icon-ic_rightarrow"></view>
|
||||
</view>
|
||||
<text class="uni-calendar__backtoday" @click="backtoday">回到今天</text>
|
||||
</view>
|
||||
<view class="uni-calendar__box">
|
||||
<view v-if="showMonth" class="uni-calendar__box-bg">
|
||||
<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks">
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">日</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">一</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">二</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">三</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">四</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">五</text>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks-day">
|
||||
<text class="uni-calendar__weeks-day-text">六</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-calendar__weeks" v-for="(item,weekIndex) in weeks" :key="weekIndex">
|
||||
<view class="uni-calendar__weeks-item" v-for="(weeks,weeksIndex) in item" :key="weeksIndex">
|
||||
<uni-calendar-item :weeks="weeks" :calendar="calendar" :selected="selected" :lunar="lunar" @change="choiceDate"></uni-calendar-item>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Calendar from './util.js';
|
||||
import uniCalendarItem from './uni-calendar-item.vue'
|
||||
export default {
|
||||
components: {
|
||||
uniCalendarItem
|
||||
},
|
||||
props: {
|
||||
/**
|
||||
* 当前日期
|
||||
*/
|
||||
date: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 打点日期
|
||||
*/
|
||||
selected: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 是否开启阴历日期
|
||||
*/
|
||||
lunar: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 开始时间
|
||||
*/
|
||||
startDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 结束时间
|
||||
*/
|
||||
endDate: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 范围
|
||||
*/
|
||||
range: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 插入
|
||||
*/
|
||||
insert: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 是否显示月份背景
|
||||
*/
|
||||
showMonth: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
weeks: [],
|
||||
calendar: {},
|
||||
nowDate: '',
|
||||
aniMaskShow: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selected(newVal) {
|
||||
this.cale.setSelectInfo(this.nowDate.fullDate, newVal)
|
||||
this.weeks = this.cale.weeks
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 获取日历方法实例
|
||||
this.cale = new Calendar({
|
||||
date: this.date,
|
||||
selected: this.selected,
|
||||
startDate: this.startDate,
|
||||
endDate: this.endDate,
|
||||
range: this.range,
|
||||
})
|
||||
this.init(this.cale.date.fullDate)
|
||||
},
|
||||
methods: {
|
||||
// 取消穿透
|
||||
clean() {},
|
||||
init(date) {
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.calendar = this.cale.getInfo(date)
|
||||
},
|
||||
open() {
|
||||
this.show = true
|
||||
this.$nextTick(() => {
|
||||
setTimeout(()=>{
|
||||
this.aniMaskShow = true
|
||||
},50)
|
||||
})
|
||||
},
|
||||
close() {
|
||||
this.aniMaskShow = false
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.show = false
|
||||
}, 300)
|
||||
})
|
||||
},
|
||||
confirm() {
|
||||
this.setEmit('confirm')
|
||||
this.close()
|
||||
},
|
||||
change() {
|
||||
if (!this.insert) return
|
||||
this.setEmit('change')
|
||||
},
|
||||
monthSwitch() {
|
||||
let {
|
||||
year,
|
||||
month
|
||||
} = this.nowDate
|
||||
this.$emit('monthSwitch', {
|
||||
year,
|
||||
month: Number(month)
|
||||
})
|
||||
},
|
||||
setEmit(name) {
|
||||
let {
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fullDate,
|
||||
lunar,
|
||||
extraInfo
|
||||
} = this.calendar
|
||||
this.$emit(name, {
|
||||
range: this.cale.multipleStatus,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
fulldate: fullDate,
|
||||
lunar,
|
||||
extraInfo: extraInfo || {}
|
||||
})
|
||||
},
|
||||
choiceDate(weeks) {
|
||||
if (weeks.disable) return
|
||||
this.calendar = weeks
|
||||
// 设置多选
|
||||
this.cale.setMultiple(this.calendar.fullDate)
|
||||
this.weeks = this.cale.weeks
|
||||
this.change()
|
||||
},
|
||||
backtoday() {
|
||||
this.cale.setMultiple('')
|
||||
this.cale.setDate(this.date)
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.calendar = this.cale.getInfo(this.date)
|
||||
this.change()
|
||||
},
|
||||
pre() {
|
||||
const preDate = this.cale.getDate(this.nowDate.fullDate, -1, 'month').fullDate
|
||||
this.setDate(preDate)
|
||||
this.monthSwitch()
|
||||
|
||||
},
|
||||
next() {
|
||||
const nextDate = this.cale.getDate(this.nowDate.fullDate, +1, 'month').fullDate
|
||||
this.setDate(nextDate)
|
||||
this.monthSwitch()
|
||||
},
|
||||
setDate(date) {
|
||||
this.cale.setDate(date)
|
||||
this.weeks = this.cale.weeks
|
||||
this.nowDate = this.cale.getInfo(date)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.uni-calendar {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.uni-calendar__mask {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: $uni-bg-color-mask;
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.3s;
|
||||
opacity: 0;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar--mask-show {
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
.uni-calendar--fixed {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transition-property: transform;
|
||||
transition-duration: 0.3s;
|
||||
transform: translateY(460px);
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-calendar--ani-show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.uni-calendar__content {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-calendar__header {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 50px;
|
||||
border-bottom-color: $uni-border-color;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar--fixed-top {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
border-top-color: $uni-border-color;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-calendar--fixed-width {
|
||||
width: 50px;
|
||||
// padding: 0 15px;
|
||||
}
|
||||
|
||||
.uni-calendar__backtoday {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 25rpx;
|
||||
padding: 0 5px;
|
||||
padding-left: 10px;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
font-size: 12px;
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
color: $uni-text-color;
|
||||
background-color: $uni-bg-color-hover;
|
||||
}
|
||||
|
||||
.uni-calendar__header-text {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.uni-calendar__header-btn-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.uni-calendar__header-btn {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-left-color: $uni-text-color-placeholder;
|
||||
border-left-style: solid;
|
||||
border-left-width: 2px;
|
||||
border-top-color: $uni-color-subtitle;
|
||||
border-top-style: solid;
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.uni-calendar--left {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.uni-calendar--right {
|
||||
transform: rotate(135deg);
|
||||
}
|
||||
|
||||
|
||||
.uni-calendar__weeks {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-item {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.uni-calendar__weeks-day {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
border-bottom-color: #F5F5F5;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.uni-calendar__weeks-day-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.uni-calendar__box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-calendar__box-bg {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.uni-calendar__box-bg-text {
|
||||
font-size: 200px;
|
||||
font-weight: bold;
|
||||
color: $uni-text-color-grey;
|
||||
opacity: 0.1;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
line-height: 1;
|
||||
/* #endif */
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,327 @@
|
||||
import CALENDAR from './calendar.js'
|
||||
|
||||
class Calendar {
|
||||
constructor({
|
||||
date,
|
||||
selected,
|
||||
startDate,
|
||||
endDate,
|
||||
range
|
||||
} = {}) {
|
||||
// 当前日期
|
||||
this.date = this.getDate(date) // 当前初入日期
|
||||
// 打点信息
|
||||
this.selected = selected || [];
|
||||
// 范围开始
|
||||
this.startDate = startDate
|
||||
// 范围结束
|
||||
this.endDate = endDate
|
||||
this.range = range
|
||||
// 多选状态
|
||||
this.multipleStatus = {
|
||||
before: '',
|
||||
after: '',
|
||||
data: []
|
||||
}
|
||||
// 每周日期
|
||||
this.weeks = {}
|
||||
|
||||
this._getWeek(this.date.fullDate)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取任意时间
|
||||
*/
|
||||
getDate(date, AddDayCount = 0, str = 'day') {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
if (typeof date !== 'object') {
|
||||
date = date.replace(/-/g, '/')
|
||||
}
|
||||
const dd = new Date(date)
|
||||
switch (str) {
|
||||
case 'day':
|
||||
dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
break
|
||||
case 'month':
|
||||
if (dd.getDate() === 31) {
|
||||
dd.setDate(dd.getDate() + AddDayCount)
|
||||
} else {
|
||||
dd.setMonth(dd.getMonth() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
}
|
||||
break
|
||||
case 'year':
|
||||
dd.setFullYear(dd.getFullYear() + AddDayCount) // 获取AddDayCount天后的日期
|
||||
break
|
||||
}
|
||||
const y = dd.getFullYear()
|
||||
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
|
||||
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
|
||||
return {
|
||||
fullDate: y + '-' + m + '-' + d,
|
||||
year: y,
|
||||
month: m,
|
||||
date: d,
|
||||
day: dd.getDay()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取上月剩余天数
|
||||
*/
|
||||
_getLastMonthDays(firstDay, full) {
|
||||
let dateArr = []
|
||||
for (let i = firstDay; i > 0; i--) {
|
||||
const beforeDate = new Date(full.year, full.month - 1, -i + 1).getDate()
|
||||
dateArr.push({
|
||||
date: beforeDate,
|
||||
month: full.month - 1,
|
||||
lunar: this.getlunar(full.year, full.month - 1, beforeDate),
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取本月天数
|
||||
*/
|
||||
_currentMonthDys(dateData, full) {
|
||||
let dateArr = []
|
||||
let fullDate = this.date.fullDate
|
||||
for (let i = 1; i <= dateData; i++) {
|
||||
let isinfo = false
|
||||
let nowDate = full.year + '-' + (full.month < 10 ?
|
||||
full.month : full.month) + '-' + (i < 10 ?
|
||||
'0' + i : i)
|
||||
// 是否今天
|
||||
let isDay = fullDate === nowDate
|
||||
// 获取打点信息
|
||||
let info = this.selected && this.selected.find((item) => {
|
||||
if (this.dateEqual(nowDate, item.date)) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
// 日期禁用
|
||||
let disableBefore = true
|
||||
let disableAfter = true
|
||||
if (this.startDate) {
|
||||
let dateCompBefore = this.dateCompare(this.startDate, fullDate)
|
||||
disableBefore = this.dateCompare(dateCompBefore ? this.startDate : fullDate, nowDate)
|
||||
}
|
||||
|
||||
if (this.endDate) {
|
||||
let dateCompAfter = this.dateCompare(fullDate, this.endDate)
|
||||
disableAfter = this.dateCompare(nowDate, dateCompAfter ? this.endDate : fullDate)
|
||||
}
|
||||
|
||||
let multiples = this.multipleStatus.data
|
||||
let checked = false
|
||||
let multiplesStatus = -1
|
||||
if (this.range) {
|
||||
if (multiples) {
|
||||
multiplesStatus = multiples.findIndex((item) => {
|
||||
return this.dateEqual(item, nowDate)
|
||||
})
|
||||
}
|
||||
if (multiplesStatus !== -1) {
|
||||
checked = true
|
||||
}
|
||||
}
|
||||
|
||||
let data = {
|
||||
fullDate: nowDate,
|
||||
year: full.year,
|
||||
date: i,
|
||||
multiple: this.range ? checked : false,
|
||||
month: full.month,
|
||||
lunar: this.getlunar(full.year, full.month, i),
|
||||
disable: !disableBefore || !disableAfter,
|
||||
isDay
|
||||
}
|
||||
if (info) {
|
||||
data.extraInfo = info
|
||||
}
|
||||
|
||||
dateArr.push(data)
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 获取下月天数
|
||||
*/
|
||||
_getNextMonthDays(surplus, full) {
|
||||
let dateArr = []
|
||||
for (let i = 1; i < surplus + 1; i++) {
|
||||
dateArr.push({
|
||||
date: i,
|
||||
month: Number(full.month) + 1,
|
||||
lunar: this.getlunar(full.year, Number(full.month) + 1, i),
|
||||
disable: true
|
||||
})
|
||||
}
|
||||
return dateArr
|
||||
}
|
||||
/**
|
||||
* 设置日期
|
||||
* @param {Object} date
|
||||
*/
|
||||
setDate(date) {
|
||||
this._getWeek(date)
|
||||
}
|
||||
/**
|
||||
* 获取当前日期详情
|
||||
* @param {Object} date
|
||||
*/
|
||||
getInfo(date) {
|
||||
if (!date) {
|
||||
date = new Date()
|
||||
}
|
||||
const dateInfo = this.canlender.find(item => item.fullDate === this.getDate(date).fullDate)
|
||||
return dateInfo
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较时间大小
|
||||
*/
|
||||
dateCompare(startDate, endDate) {
|
||||
// 计算截止时间
|
||||
startDate = new Date(startDate.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
endDate = new Date(endDate.replace('-', '/').replace('-', '/'))
|
||||
if (startDate <= endDate) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 比较时间是否相等
|
||||
*/
|
||||
dateEqual(before, after) {
|
||||
// 计算截止时间
|
||||
before = new Date(before.replace('-', '/').replace('-', '/'))
|
||||
// 计算详细项的截止时间
|
||||
after = new Date(after.replace('-', '/').replace('-', '/'))
|
||||
if (before.getTime() - after.getTime() === 0) {
|
||||
return true
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 获取日期范围内所有日期
|
||||
* @param {Object} begin
|
||||
* @param {Object} end
|
||||
*/
|
||||
geDateAll(begin, end) {
|
||||
var arr = []
|
||||
var ab = begin.split('-')
|
||||
var ae = end.split('-')
|
||||
var db = new Date()
|
||||
db.setFullYear(ab[0], ab[1] - 1, ab[2])
|
||||
var de = new Date()
|
||||
de.setFullYear(ae[0], ae[1] - 1, ae[2])
|
||||
var unixDb = db.getTime() - 24 * 60 * 60 * 1000
|
||||
var unixDe = de.getTime() - 24 * 60 * 60 * 1000
|
||||
for (var k = unixDb; k <= unixDe;) {
|
||||
k = k + 24 * 60 * 60 * 1000
|
||||
arr.push(this.getDate(new Date(parseInt(k))).fullDate)
|
||||
}
|
||||
return arr
|
||||
}
|
||||
/**
|
||||
* 计算阴历日期显示
|
||||
*/
|
||||
getlunar(year, month, date) {
|
||||
return CALENDAR.solar2lunar(year, month, date)
|
||||
}
|
||||
/**
|
||||
* 设置打点
|
||||
*/
|
||||
setSelectInfo(data, value) {
|
||||
this.selected = value
|
||||
this._getWeek(data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取多选状态
|
||||
*/
|
||||
setMultiple(fullDate) {
|
||||
let {
|
||||
before,
|
||||
after
|
||||
} = this.multipleStatus
|
||||
if (!this.range) return
|
||||
if (before && after) {
|
||||
this.multipleStatus.before = ''
|
||||
this.multipleStatus.after = ''
|
||||
this.multipleStatus.data = []
|
||||
this._getWeek(fullDate)
|
||||
} else {
|
||||
if (!before) {
|
||||
this.multipleStatus.before = fullDate
|
||||
} else {
|
||||
this.multipleStatus.after = fullDate
|
||||
if (this.dateCompare(this.multipleStatus.before, this.multipleStatus.after)) {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.before, this.multipleStatus.after);
|
||||
} else {
|
||||
this.multipleStatus.data = this.geDateAll(this.multipleStatus.after, this.multipleStatus.before);
|
||||
}
|
||||
this._getWeek(fullDate)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取每周数据
|
||||
* @param {Object} dateData
|
||||
*/
|
||||
_getWeek(dateData) {
|
||||
const {
|
||||
fullDate,
|
||||
year,
|
||||
month,
|
||||
date,
|
||||
day
|
||||
} = this.getDate(dateData)
|
||||
let firstDay = new Date(year, month - 1, 1).getDay()
|
||||
let currentDay = new Date(year, month, 0).getDate()
|
||||
let dates = {
|
||||
lastMonthDays: this._getLastMonthDays(firstDay, this.getDate(dateData)), // 上个月末尾几天
|
||||
currentMonthDys: this._currentMonthDys(currentDay, this.getDate(dateData)), // 本月天数
|
||||
nextMonthDays: [], // 下个月开始几天
|
||||
weeks: []
|
||||
}
|
||||
let canlender = []
|
||||
const surplus = 42 - (dates.lastMonthDays.length + dates.currentMonthDys.length)
|
||||
dates.nextMonthDays = this._getNextMonthDays(surplus, this.getDate(dateData))
|
||||
canlender = canlender.concat(dates.lastMonthDays, dates.currentMonthDys, dates.nextMonthDays)
|
||||
let weeks = {}
|
||||
// 拼接数组 上个月开始几天 + 本月天数+ 下个月开始几天
|
||||
for (let i = 0; i < canlender.length; i++) {
|
||||
if (i % 7 === 0) {
|
||||
weeks[parseInt(i / 7)] = new Array(7)
|
||||
}
|
||||
weeks[parseInt(i / 7)][i % 7] = canlender[i]
|
||||
}
|
||||
this.canlender = canlender
|
||||
this.weeks = weeks
|
||||
}
|
||||
|
||||
//静态方法
|
||||
// static init(date) {
|
||||
// if (!this.instance) {
|
||||
// this.instance = new Calendar(date);
|
||||
// }
|
||||
// return this.instance;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
export default Calendar
|
||||
457
pro_v3.5.1/view/uniapp_v2/pages/annex/offline_pay/index.vue
Normal file
457
pro_v3.5.1/view/uniapp_v2/pages/annex/offline_pay/index.vue
Normal file
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<form class="form" @submit="checkForm">
|
||||
<view class="input-section">
|
||||
<view class="section-hd">支付金额</view>
|
||||
<view class="section-bd">
|
||||
<view class="input-group">
|
||||
￥
|
||||
<input v-model.number="money" class="input" name="money" type="digit" placeholder="0.00" />
|
||||
</view>
|
||||
<view v-if="payPrice" class="discount">会员优惠价：￥{{ payPrice }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="radio-section">
|
||||
<view class="section-hd">支付方式</view>
|
||||
<radio-group class="section-bd" name="method">
|
||||
<label class="item" v-if="yuePay">
|
||||
<text class="iconfont icon-yue"></text>
|
||||
<text class="name">
|
||||
余额抵扣
|
||||
<text class="money">可用余额:{{ now_money || 0 }}￥</text>
|
||||
</text>
|
||||
<radio value="yue" :checked="payType === 'yue'" />
|
||||
</label>
|
||||
<label v-if="wxpay" class="item">
|
||||
<text class="iconfont icon-weixinzhifu"></text>
|
||||
<text class="name">微信支付</text>
|
||||
<radio value="weixin" :checked="payType === 'weixin'" />
|
||||
</label>
|
||||
</radio-group>
|
||||
</view>
|
||||
<button class="button" form-type="submit">确认</button>
|
||||
<view class="alipay" v-html="alipayHtml"></view>
|
||||
<home></home>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
offlineCheckPrice,
|
||||
offlineCreate,
|
||||
orderOfflinePayType
|
||||
} from '@/api/order.js';
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
const app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
money: '',
|
||||
payPrice: '',
|
||||
payType: 'weixin',
|
||||
alipayHtml: '',
|
||||
alipay: false,
|
||||
wxpay: false,
|
||||
yuePay: false,
|
||||
paying: false,
|
||||
now_money: 0,
|
||||
isWeixin: false,
|
||||
site_name: '',
|
||||
isCommitted: false,
|
||||
isShowAuth: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
money(newValue, oldValue) {
|
||||
if (newValue && typeof newValue === 'number') {
|
||||
this.checkPrice();
|
||||
} else {
|
||||
this.payPrice = '';
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
onLoad(options) {
|
||||
// #ifdef H5
|
||||
if (options.code) {
|
||||
let spid = app.globalData.spid ? app.globalData.spid : '';
|
||||
wechatAuthV2(options.code, spid).then(res => {
|
||||
location.href = decodeURIComponent(
|
||||
decodeURIComponent(options.back_url)
|
||||
)
|
||||
})
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.getPayType();
|
||||
}else{
|
||||
toLogin()
|
||||
}
|
||||
//#ifdef H5
|
||||
this.isWeixin = this.$wechat.isWeixin();
|
||||
//#endif
|
||||
},
|
||||
methods: {
|
||||
getPayType() {
|
||||
orderOfflinePayType()
|
||||
.then(res => {
|
||||
const {
|
||||
ali_pay_status,
|
||||
pay_weixin_open,
|
||||
yue_pay_status,
|
||||
offline_pay_status,
|
||||
site_name,
|
||||
now_money
|
||||
} = res.data;
|
||||
this.alipay = ali_pay_status === '1' ? true : false;
|
||||
this.wxpay = pay_weixin_open === 1 ? true : false;
|
||||
this.yuePay = yue_pay_status === 1 ? true : false;
|
||||
this.now_money = now_money;
|
||||
this.site_name = site_name;
|
||||
if (!offline_pay_status) {
|
||||
uni.showModal({
|
||||
title: '支付提醒',
|
||||
content: '线下支付已关闭，请点击确认按钮返回主页',
|
||||
showCancel: false,
|
||||
success() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
if (site_name) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: site_name
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
checkForm(e) {
|
||||
const {
|
||||
money,
|
||||
method
|
||||
} = e.detail.value;
|
||||
if (money) {
|
||||
this.combData(method);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '请输入支付金额',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
},
|
||||
// 优惠价
|
||||
checkPrice() {
|
||||
offlineCheckPrice({
|
||||
pay_price: this.money
|
||||
})
|
||||
.then(res => {
|
||||
this.payPrice = res.data.pay_price;
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
// 组合数据
|
||||
combData(payType) {
|
||||
let data = {
|
||||
type: 3,
|
||||
pay_type: payType,
|
||||
from: 'weixinh5',
|
||||
price: this.payPrice || this.money,
|
||||
money: this.money
|
||||
};
|
||||
|
||||
// #ifdef H5
|
||||
if (this.isWeixin) {
|
||||
data.from = 'weixin';
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
data.from = 'routine';
|
||||
// #endif
|
||||
if (this.paying) {
|
||||
return;
|
||||
}
|
||||
this.paying = true;
|
||||
uni.showLoading({
|
||||
title: '正在确认…'
|
||||
});
|
||||
offlineCreate(data)
|
||||
.then(res => {
|
||||
uni.hideLoading();
|
||||
this.callPay(res);
|
||||
})
|
||||
.catch(err => {
|
||||
this.paying = false;
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
// 调用支付
|
||||
callPay(res) {
|
||||
const {
|
||||
status,
|
||||
result
|
||||
} = res.data, {
|
||||
orderId,
|
||||
jsConfig
|
||||
} = result,
|
||||
goPages = '/pages/annex/offline_result/index?site_name=' + this.site_name;
|
||||
switch (status) {
|
||||
case 'ORDER_EXIST':
|
||||
case 'EXTEND_ORDER':
|
||||
case 'PAY_ERROR':
|
||||
this.paying = false;
|
||||
this.$util.Tips({
|
||||
title: res.msg
|
||||
}, {
|
||||
tab: 5,
|
||||
url: goPages
|
||||
});
|
||||
break;
|
||||
case 'SUCCESS':
|
||||
this.paying = false;
|
||||
this.money = '';
|
||||
this.$util.Tips({
|
||||
title: res.msg,
|
||||
icon: 'success'
|
||||
}, {
|
||||
tab: 5,
|
||||
url: goPages
|
||||
});
|
||||
break;
|
||||
case 'WECHAT_PAY':
|
||||
// #ifdef MP
|
||||
let that = this;
|
||||
let mp_pay_name=''
|
||||
if(uni.requestOrderPayment){
|
||||
mp_pay_name='requestOrderPayment'
|
||||
}else{
|
||||
mp_pay_name='requestPayment'
|
||||
}
|
||||
uni[mp_pay_name]({
|
||||
timeStamp: jsConfig.timestamp,
|
||||
nonceStr: jsConfig.nonceStr,
|
||||
package: jsConfig.package,
|
||||
signType: jsConfig.signType,
|
||||
paySign: jsConfig.paySign,
|
||||
success: function(res) {
|
||||
that.$util.Tips({
|
||||
title: '支付成功',
|
||||
icon: 'success'
|
||||
}, {
|
||||
tab: 5,
|
||||
url: '/pages/annex/offline_result/index'
|
||||
});
|
||||
},
|
||||
fail: function() {
|
||||
uni.showToast({
|
||||
title: '取消支付',
|
||||
icon: 'none',
|
||||
success: function() {
|
||||
that.paying = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
complete: function() {
|
||||
that.paying = false;
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifndef MP
|
||||
this.$wechat
|
||||
.pay(result.jsConfig)
|
||||
.then(res => {
|
||||
this.paying = false;
|
||||
this.$util.Tips({
|
||||
title: '支付成功',
|
||||
icon: 'success'
|
||||
}, {
|
||||
tab: 5,
|
||||
url: '/pages/annex/offline_result/index'
|
||||
});
|
||||
})
|
||||
.catch(err => {
|
||||
this.paying = false;
|
||||
if (err.errMsg == 'chooseWXPay:cancel') {
|
||||
uni.showToast({
|
||||
title: '取消支付',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
break;
|
||||
case 'PAY_DEFICIENCY':
|
||||
this.paying = false;
|
||||
this.$util.Tips({
|
||||
title: res.msg
|
||||
});
|
||||
break;
|
||||
case 'WECHAT_H5_PAY':
|
||||
this.paying = false;
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
success() {
|
||||
location.href = jsConfig.mweb_url;
|
||||
}
|
||||
});
|
||||
break;
|
||||
case 'ALIPAY_PAY':
|
||||
this.paying = false;
|
||||
// #ifdef H5
|
||||
if (this.$wechat.isWeixin()) {
|
||||
uni.showToast({
|
||||
title: '微信公众号不支持支付宝支付'
|
||||
})
|
||||
} else {
|
||||
this.alipayHtml = jsConfig;
|
||||
this.$nextTick(() => {
|
||||
document.getElementById('alipaysubmit').submit();
|
||||
});
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
uni.showToast({
|
||||
title: '微信小程序不支持支付宝支付'
|
||||
})
|
||||
// #endif
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/uni-radio .uni-radio-input.uni-radio-input-checked {
|
||||
border: 1px solid #FDC383 !important;
|
||||
background-color: #FDC383 !important;
|
||||
}
|
||||
.input-section {
|
||||
.section-hd {
|
||||
padding: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.section-bd {
|
||||
padding-right: 30rpx;
|
||||
padding-left: 30rpx;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
padding: 45rpx 20rpx 47rpx;
|
||||
font-size: 80rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 110rpx;
|
||||
margin-left: 15rpx;
|
||||
font-size: 100rpx;
|
||||
color: #282828;
|
||||
}
|
||||
|
||||
.discount {
|
||||
padding: 27rpx 20rpx;
|
||||
border-top: 1rpx solid #eeeeee;
|
||||
font-size: 28rpx;
|
||||
color: #e93323;
|
||||
}
|
||||
}
|
||||
|
||||
.radio-section {
|
||||
border-top: 20rpx solid #f5f5f5;
|
||||
|
||||
.section-hd {
|
||||
padding: 30rpx;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
}
|
||||
|
||||
.section-bd {
|
||||
padding-left: 50rpx;
|
||||
}
|
||||
|
||||
.item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
padding-bottom: 30rpx;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 44rpx;
|
||||
}
|
||||
|
||||
.icon-yue {
|
||||
color: #fe960f;
|
||||
}
|
||||
|
||||
.icon-weixinzhifu {
|
||||
color: #41b035;
|
||||
}
|
||||
|
||||
.icon-zhifubao {
|
||||
color: #099bdf;
|
||||
}
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
margin-left: 30rpx;
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.money {
|
||||
float: right;
|
||||
padding-right: 20rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 86rpx;
|
||||
border-radius: 43rpx;
|
||||
margin: 114rpx 30rpx 30rpx;
|
||||
background: linear-gradient(90deg, #FEE2B7 0%, #FDC383 100%);
|
||||
font-size: 30rpx;
|
||||
line-height: 86rpx;
|
||||
color: #5D3324;
|
||||
}
|
||||
.alipay {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="result">
|
||||
<view class="image-wrap">
|
||||
<image class="image" :src="imgHost + '/statics/images/offline-result.png'" ></image>
|
||||
</view>
|
||||
<view class="text">支付成功</view>
|
||||
</view>
|
||||
<navigator class="link" url="/pages/index/index" open-type="switchTab">进入商城</navigator>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {HTTP_REQUEST_URL} from '@/config/app.js';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
imgHost:HTTP_REQUEST_URL,
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
let site_name = options.site_name || '';
|
||||
if (site_name) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: site_name
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.result {
|
||||
margin-top: 200rpx;
|
||||
|
||||
.image-wrap {
|
||||
width: 267rpx;
|
||||
height: 223rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 46rpx;
|
||||
font-size: 34rpx;
|
||||
text-align: center;
|
||||
color: #282828;
|
||||
}
|
||||
}
|
||||
|
||||
.link {
|
||||
width: 560rpx;
|
||||
height: 86rpx;
|
||||
border: 1rpx solid #F19D2F;
|
||||
border-radius: 43rpx;
|
||||
margin: 90rpx auto 0;
|
||||
font-size: 30rpx;
|
||||
line-height: 86rpx;
|
||||
text-align: center;
|
||||
color: #F19D2F;
|
||||
}
|
||||
</style>
|
||||
201
pro_v3.5.1/view/uniapp_v2/pages/annex/record_list/index.vue
Normal file
201
pro_v3.5.1/view/uniapp_v2/pages/annex/record_list/index.vue
Normal file
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<view class="record" :style="colorStyle">
|
||||
<timeSlot @changeTime="changeTime"></timeSlot>
|
||||
<view class="list" v-if="list.length">
|
||||
<view class="item acea-row row-between row-top" v-for="(item,index) in list" :key="index">
|
||||
<view class="acea-row row-top">
|
||||
<text class="icon iconfont icon-xiaofeijilu1" v-if="item.type==1"></text>
|
||||
<text class="icon iconfont icon-fufeihuiyuan1" v-else-if="item.type==7"></text>
|
||||
<text class="icon iconfont icon-xiaofeijilu-rongcuo" v-else></text>
|
||||
<view class="txt">
|
||||
<view class="line1">{{item.title}}</view>
|
||||
<view class="exp record">{{item.type_name}}</view>
|
||||
<view class="time">{{item.day}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num">-{{item.price}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list" v-else>
|
||||
<emptyPage title="暂无消费记录～"></emptyPage>
|
||||
</view>
|
||||
<view class='loadingicon acea-row row-center-wrapper' v-if="list.length">
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
||||
</view>
|
||||
<home></home>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
toLogin
|
||||
} from '@/libs/login.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import {
|
||||
moneyList
|
||||
} from '@/api/user.js';
|
||||
import emptyPage from '@/components/emptyPage.vue'
|
||||
import timeSlot from '../components/timeSlot/index.vue';
|
||||
import colors from '@/mixins/color.js';
|
||||
export default {
|
||||
components: {
|
||||
timeSlot,
|
||||
emptyPage
|
||||
},
|
||||
mixins: [colors],
|
||||
computed: mapGetters(['isLogin']),
|
||||
data(){
|
||||
return {
|
||||
page: 1,
|
||||
limit: 15,
|
||||
start: 0,
|
||||
stop: 0,
|
||||
loading: false,
|
||||
loadend: false,
|
||||
loadTitle: '加载更多',
|
||||
list:[],
|
||||
isShowAuth: false
|
||||
}
|
||||
},
|
||||
onLoad(){
|
||||
if (this.isLogin) {
|
||||
this.getUserBillList();
|
||||
}
|
||||
},
|
||||
onShow(){
|
||||
if(!this.isLogin){
|
||||
toLogin()
|
||||
}
|
||||
},
|
||||
onPageScroll(object) {
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
methods:{
|
||||
onLoadFun(){
|
||||
this.getUserBillList();
|
||||
this.isShowAuth = false;
|
||||
},
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e
|
||||
},
|
||||
changeTime(time) {
|
||||
this.start = time.start
|
||||
this.stop = time.stop
|
||||
this.page = 1;
|
||||
this.loadend = false;
|
||||
this.list = [];
|
||||
this.getUserBillList()
|
||||
},
|
||||
getUserBillList(){
|
||||
let that = this;
|
||||
if (that.loading) return;
|
||||
if (that.loadend) return;
|
||||
that.loading = true;
|
||||
that.loadTitle = '';
|
||||
moneyList({
|
||||
page: this.page,
|
||||
limit: this.limit,
|
||||
start: this.start,
|
||||
stop: this.stop
|
||||
},9).then(res=>{
|
||||
let list = res.data.list;
|
||||
let loadend = list.length < that.limit;
|
||||
that.list = that.$util.SplitArray(list, that.list);
|
||||
that.$set(that, 'list', that.list);
|
||||
that.loadend = loadend;
|
||||
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
|
||||
that.page = that.page + 1;
|
||||
that.loading = false;
|
||||
}).catch(err=>{
|
||||
that.loading = false;
|
||||
that.loadTitle = '加载更多';
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom: function() {
|
||||
this.getUserBillList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.record{
|
||||
.list{
|
||||
width: 690rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 14rpx;
|
||||
margin: 20rpx auto 0 auto;
|
||||
padding-top: 42rpx;
|
||||
.item{
|
||||
padding: 0 24rpx 26rpx 24rpx;
|
||||
position: relative;
|
||||
margin-bottom: 34rpx;
|
||||
.icon{
|
||||
font-size: 72rpx;
|
||||
color: #E7C993;
|
||||
}
|
||||
.num{
|
||||
color: #282828;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
.pictrue{
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
background-color: #FDF8EE;
|
||||
border-radius: 50%;
|
||||
.iconfont{
|
||||
color: #F7B942;
|
||||
}
|
||||
}
|
||||
.txt{
|
||||
font-weight: 400;
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
margin-left: 24rpx;
|
||||
.line1{
|
||||
width: 320rpx;
|
||||
}
|
||||
.exp{
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
margin-top: 2rpx;
|
||||
&.record{
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
image{
|
||||
color: #999999;
|
||||
margin-right: 10rpx;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
}
|
||||
.time{
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
.bnt{
|
||||
width: 112rpx;
|
||||
height: 44rpx;
|
||||
background: #F4DBAB;
|
||||
border-radius: 26rpx;
|
||||
color: #755214;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
&::before{
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 542rpx;
|
||||
height: 1px;
|
||||
background: #EEEEEE;
|
||||
bottom: 0rpx;
|
||||
right: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
733
pro_v3.5.1/view/uniapp_v2/pages/annex/special/index.vue
Normal file
733
pro_v3.5.1/view/uniapp_v2/pages/annex/special/index.vue
Normal file
@@ -0,0 +1,733 @@
|
||||
<template>
|
||||
<view v-if="pageShow" class="page"
|
||||
:class="bgTabVal==2?'fullsize noRepeat':bgTabVal==1?'repeat ysize':'noRepeat ysize'" :style="[pageStyle]">
|
||||
<view :style="colorStyle">
|
||||
<view class="index">
|
||||
<!-- 自定义样式 -->
|
||||
<block v-for="(item, index) in styleConfig" :key="index">
|
||||
<homeComb v-if="item.name == 'homeComb'" :dataConfig="item" @bindSortId="bindSortId"
|
||||
:isScrolled="isScrolled"></homeComb>
|
||||
<headerSerch v-if="item.name == 'headerSerch'" :dataConfig="item"></headerSerch>
|
||||
<userInfor v-if="item.name == 'userInfor'" :dataConfig="item" @changeLogin="changeLogin">
|
||||
</userInfor>
|
||||
<newVip v-if="item.name == 'newVip'" :dataConfig="item"></newVip>
|
||||
<!-- 文章列表 -->
|
||||
<articleList v-if="item.name == 'articleList'" :dataConfig="item"></articleList>
|
||||
<bargain v-if="item.name == 'bargain'" :dataConfig="item" @changeBarg="changeBarg"></bargain>
|
||||
<blankPage v-if="item.name == 'blankPage'" :dataConfig="item"></blankPage>
|
||||
<combination v-if="item.name == 'combination'" :dataConfig="item">
|
||||
</combination>
|
||||
<!-- 优惠券 -->
|
||||
<coupon v-if="item.name == 'coupon'" :dataConfig="item" @changeLogin="changeLogin"></coupon>
|
||||
<!-- 客户服务 -->
|
||||
<customerService v-if="item.name == 'customerService'" :dataConfig="item">
|
||||
</customerService>
|
||||
<!-- 商品列表 -->
|
||||
<goodList v-if="item.name == 'goodList'" :dataConfig="item" @detail="goDetail"></goodList>
|
||||
<guide v-if="item.name == 'guide'" :dataConfig="item"></guide>
|
||||
<!-- 直播模块 -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<liveBroadcast v-if="item.name == 'liveBroadcast'" :dataConfig="item"></liveBroadcast>
|
||||
<!-- #endif -->
|
||||
<menus v-if="item.name == 'menus'" :dataConfig="item"></menus>
|
||||
<!-- 实时消息 -->
|
||||
<news v-if="item.name == 'news'" :dataConfig="item"></news>
|
||||
<!-- 图片库 -->
|
||||
<pictureCube v-if="item.name == 'pictureCube'" :dataConfig="item">
|
||||
</pictureCube>
|
||||
<!-- 促销列表 -->
|
||||
<promotionList v-if="item.name == 'promotionList'" :dataConfig="item" @detail="goDetail"
|
||||
:productVideoStatus='product_video_status'>
|
||||
</promotionList>
|
||||
<richText v-if="item.name == 'richText'" :dataConfig="item"></richText>
|
||||
<seckill v-if="item.name == 'seckill'" :dataConfig="item"></seckill>
|
||||
<!-- 轮播图-->
|
||||
<swiperBg v-if="item.name == 'swiperBg'" :dataConfig="item"></swiperBg>
|
||||
<swipers v-if="item.name == 'swipers'" :dataConfig="item"></swipers>
|
||||
<!-- 顶部选项卡 -->
|
||||
<tabNav v-if="item.name == 'tabNav'" :dataConfig="item" @bindHeight="bindHeighta"
|
||||
@bindSortId="bindSortId" :isFixed="isFixed"></tabNav>
|
||||
<!-- 标题 -->
|
||||
<titles v-if="item.name == 'titles'" :dataConfig="item"></titles>
|
||||
<ranking v-if="item.name == 'ranking'" :dataConfig="item"></ranking>
|
||||
<presale v-if="item.name == 'presale'" :dataConfig="item"></presale>
|
||||
<pointsMall v-if="item.name == 'pointsMall'" :dataConfig="item"></pointsMall>
|
||||
<videos v-if="item.name == 'videos'" :dataConfig="item"></videos>
|
||||
<signIn v-if="item.name == 'signIn'" :dataConfig="item"></signIn>
|
||||
<hotspot v-if="item.name == 'hotspot'" :dataConfig="item"></hotspot>
|
||||
<follow v-if="item.name == 'follow'" :dataConfig="item"></follow>
|
||||
<community v-if="item.name == 'community'" :dataConfig="item"></community>
|
||||
</block>
|
||||
<!-- 分类商品模块 -->
|
||||
<!-- #ifndef APP-PLUS -->
|
||||
<view class="sort-product px-20">
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<!-- 商品排序 -->
|
||||
<view class="sort-product px-20" :style="{ marginTop: sortMpTop + 'px' }">
|
||||
<!-- #endif -->
|
||||
<waterfallsFlow ref="waterfallsFlow" :wfList="goodList" @itemTap="goDetail"></waterfallsFlow>
|
||||
<Loading :loaded="loaded" :loading="loading"></Loading>
|
||||
<view v-if="goodList.length == 0 && loaded" class="sort-scroll rd-16rpx">
|
||||
<view class="empty-box pb-24">
|
||||
<image :src="imgHost + '/statics/images/no-thing.png'"></image>
|
||||
<view class="tips">暂无商品，去看点别的吧</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pb-safe">
|
||||
<view class="h-100"></view>
|
||||
</view>
|
||||
<pageFooter :isTabBar="false" :configData="tabBarData"></pageFooter>
|
||||
</view>
|
||||
</view>
|
||||
<activityModal :pageIndex="6" :pageId="pageId"></activityModal>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
import colors from "@/mixins/color";
|
||||
import couponWindow from '@/components/couponWindow/index'
|
||||
import {
|
||||
getCouponV2,
|
||||
getCouponNewUser
|
||||
} from '@/api/api.js'
|
||||
import {
|
||||
getShare
|
||||
} from '@/api/public.js';
|
||||
// #ifdef H5
|
||||
import {
|
||||
silenceAuth
|
||||
} from '@/api/public.js';
|
||||
// #endif
|
||||
|
||||
import userInfor from '@/pages/index/components/userInfor';
|
||||
import homeComb from '@/pages/index/components/homeComb';
|
||||
import newVip from '@/pages/index/components/newVip';
|
||||
import headerSerch from '@/pages/index/components/headerSerch';
|
||||
import swipers from '@/pages/index/components/swipers';
|
||||
import coupon from '@/pages/index/components/coupon';
|
||||
import articleList from '@/pages/index/components/articleList';
|
||||
import bargain from '@/pages/index/components/bargain';
|
||||
import blankPage from '@/pages/index/components/blankPage';
|
||||
import combination from '@/pages/index/components/combination';
|
||||
import customerService from '@/pages/index/components/customerService';
|
||||
import goodList from '@/pages/index/components/goodList';
|
||||
import guide from '@/pages/index/components/guide';
|
||||
import liveBroadcast from '@/pages/index/components/liveBroadcast';
|
||||
import menus from '@/pages/index/components/menus';
|
||||
import news from '@/pages/index/components/news';
|
||||
import pictureCube from '@/pages/index/components/pictureCube';
|
||||
import promotionList from '@/pages/index/components/promotionList';
|
||||
import richText from '@/pages/index/components/richText';
|
||||
import seckill from '@/pages/index/components/seckill';
|
||||
import swiperBg from '@/pages/index/components/swiperBg';
|
||||
import tabNav from '@/pages/index/components/tabNav';
|
||||
import titles from '@/pages/index/components/titles';
|
||||
import ranking from '@/pages/index/components/ranking';
|
||||
import presale from '@/pages/index/components/presale'
|
||||
import pointsMall from '@/pages/index/components/pointsMall';
|
||||
import videos from '@/pages/index/components/videos';
|
||||
import signIn from '@/pages/index/components/signIn';
|
||||
import hotspot from '@/pages/index/components/hotspot';
|
||||
import follow from '@/pages/index/components/follow';
|
||||
import community from '@/pages/index/components/community'
|
||||
import waterfallsFlow from "@/components/WaterfallsFlow/WaterfallsFlow.vue";
|
||||
import activityModal from "@/components/activityModal/index.vue";
|
||||
// #ifdef MP
|
||||
import {getTemlIds} from '@/api/api.js';
|
||||
import {SUBSCRIBE_MESSAGE,TIPS_KEY} from '@/config/cache';
|
||||
// #endif
|
||||
import {mapGetters} from 'vuex';
|
||||
import {getDiy,getDiyVersion} from '@/api/api.js';
|
||||
import {
|
||||
getCategoryList,
|
||||
getProductslist,
|
||||
getProductHot,
|
||||
} from '@/api/store.js';
|
||||
import { goShopDetail } from '@/libs/order.js';
|
||||
import { toLogin } from '@/libs/login.js';
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import pageFooter from '@/components/pageFooter/index.vue'
|
||||
import recommend from '@/components/recommend';
|
||||
import Loading from '@/components/Loading/index.vue';
|
||||
export default {
|
||||
computed: {
|
||||
pageStyle() {
|
||||
return {
|
||||
backgroundColor: this.bgColor,
|
||||
backgroundImage: this.bgPic ? `url(${this.bgPic})` : '',
|
||||
minHeight: this.windowHeight + 'px'
|
||||
}
|
||||
},
|
||||
...mapGetters(['isLogin', 'uid']),
|
||||
},
|
||||
mixins: [colors],
|
||||
components: {
|
||||
recommend,
|
||||
Loading,
|
||||
pageFooter,
|
||||
couponWindow,
|
||||
homeComb,
|
||||
newVip,
|
||||
userInfor,
|
||||
headerSerch,
|
||||
swipers,
|
||||
coupon,
|
||||
articleList,
|
||||
bargain,
|
||||
blankPage,
|
||||
combination,
|
||||
customerService,
|
||||
goodList,
|
||||
guide,
|
||||
liveBroadcast,
|
||||
menus,
|
||||
pictureCube,
|
||||
news,
|
||||
promotionList,
|
||||
richText,
|
||||
seckill,
|
||||
swiperBg,
|
||||
tabNav,
|
||||
titles,
|
||||
ranking,
|
||||
presale,
|
||||
pointsMall,
|
||||
videos,
|
||||
signIn,
|
||||
hotspot,
|
||||
follow,
|
||||
waterfallsFlow,
|
||||
community,
|
||||
activityModal
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
styleConfig: [],
|
||||
loading: false,
|
||||
loadend: false,
|
||||
loadTitle: '加载更多', //提示语
|
||||
page: 1,
|
||||
limit: this.$config.LIMIT,
|
||||
numConfig: 0,
|
||||
code: '',
|
||||
isCouponShow: false,
|
||||
couponObj: {},
|
||||
couponObjs: {},
|
||||
shareInfo: {},
|
||||
footConfig: {},
|
||||
pageId: '',
|
||||
sortMpTop: 0,
|
||||
bgColor: '',
|
||||
bgPic: '',
|
||||
bgTabVal: '',
|
||||
pageShow: true,
|
||||
windowHeight: 0,
|
||||
isShowAuth: false,
|
||||
isScrolled: false,
|
||||
sortList: '',
|
||||
sortAll: [],
|
||||
isSortType: 0,
|
||||
hostProduct: [],
|
||||
hotScroll: false,
|
||||
hotPage: 1,
|
||||
hotLimit: 10,
|
||||
curSort: 0,
|
||||
loaded: false,
|
||||
goodPage: 1,
|
||||
goodList: [],
|
||||
sid: 0,
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
product_video_status: false,
|
||||
tabBarData:{},
|
||||
};
|
||||
},
|
||||
onLoad(options) {
|
||||
let that = this
|
||||
this.$nextTick(function() {
|
||||
uni.getSystemInfo({
|
||||
success: function(res) {
|
||||
that.windowHeight = res.windowHeight;
|
||||
}
|
||||
});
|
||||
})
|
||||
const {
|
||||
state,
|
||||
scope
|
||||
} = options;
|
||||
this.pageId = options.id
|
||||
// #ifdef MP
|
||||
if (options.scene) {
|
||||
let value = that.$util.getUrlParams(decodeURIComponent(options.scene));
|
||||
this.pageId = value.id
|
||||
}
|
||||
// #endif
|
||||
uni.setNavigationBarTitle({
|
||||
title: '专题栏'
|
||||
});
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
this.sortMpTop = -50
|
||||
// #endif
|
||||
this.getDiyData();
|
||||
// #ifdef H5
|
||||
this.setOpenShare();
|
||||
// #endif
|
||||
// #ifdef MP || APP-PLUS
|
||||
this.getTemlIds();
|
||||
// #endif
|
||||
getShare().then(res => {
|
||||
this.shareInfo = res.data;
|
||||
})
|
||||
},
|
||||
onUnload() {
|
||||
// 清除监听
|
||||
uni.$off('activeFn');
|
||||
},
|
||||
watch: {
|
||||
isLogin: {
|
||||
deep: true, //深度监听设置为 true
|
||||
handler: function(newV, oldV) {
|
||||
// 优惠券弹窗
|
||||
var newDates = new Date().toLocaleDateString();
|
||||
if (newV) {
|
||||
try {
|
||||
var oldDate = uni.getStorageSync('oldDate') || ''
|
||||
} catch {}
|
||||
if (oldDate != newDates) {
|
||||
this.getCoupon();
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
uni.removeStorageSync('form_type_cart');
|
||||
// 优惠券弹窗
|
||||
var newDates = new Date().toLocaleDateString();
|
||||
if (this.isLogin) {
|
||||
try {
|
||||
var oldDate = uni.getStorageSync('oldDate') || ''
|
||||
} catch {}
|
||||
if (oldDate != newDates) {
|
||||
this.getCoupon();
|
||||
}
|
||||
let oldUser = uni.getStorageSync('oldUser') || 0;
|
||||
if (!oldUser) {
|
||||
this.getCouponOnce();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 分类点击
|
||||
changeSort(item, index) {
|
||||
if (this.curSort == index) return;
|
||||
this.curSort = index;
|
||||
this.sid = item.id;
|
||||
this.goodList = [];
|
||||
this.goodPage = 1;
|
||||
this.loaded = false;
|
||||
this.getGoodsList();
|
||||
},
|
||||
/**
|
||||
* @param data {
|
||||
classPage: 0 分类id
|
||||
microPage: 0 微页面id
|
||||
type: 1 0 商品分类 1 微页面
|
||||
}*/
|
||||
bindSortId(data) {
|
||||
this.styleConfig = [];
|
||||
if (data.type == 1) {
|
||||
this.getProductList(data.classPage);
|
||||
} else {
|
||||
this.sortList = [];
|
||||
this.getMicroPage(data.microPage, true);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 获取DIY
|
||||
* @param {number} id
|
||||
* @param {boolean} type 区分是否是微页面
|
||||
*/
|
||||
getMicroPage(id, type) {
|
||||
let that = this;
|
||||
that.styleConfig = []
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
getDiy(id).then(res => {
|
||||
uni.hideLoading();
|
||||
let data = res.data;
|
||||
that.styleConfig = that.objToArr(res.data.value);
|
||||
that.styleConfig.forEach((item, index) => {
|
||||
if (['headerSerch', 'homeComb'].includes(item.name)) {
|
||||
that.styleConfig.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
getProductList(data) {
|
||||
this.curSort = 0;
|
||||
this.loaded = false;
|
||||
if (this.sortAll.length > 0) {
|
||||
this.sortAll.forEach((el, index) => {
|
||||
if (el.id == data) {
|
||||
this.$set(this, 'sortList', el);
|
||||
this.sid = el.children.length ? el.children[0].id : '';
|
||||
}
|
||||
});
|
||||
this.goodList = [];
|
||||
this.goodPage = 1;
|
||||
this.$nextTick(() => {
|
||||
if (this.sortList != '') this.getGoodsList();
|
||||
});
|
||||
} else {
|
||||
getCategoryList().then(res => {
|
||||
this.sortAll = res.data;
|
||||
res.data.forEach((el, index) => {
|
||||
if (el.id == data) {
|
||||
this.sortList = el;
|
||||
this.sid = el.children.length ? el.children[0].id : '';
|
||||
}
|
||||
});
|
||||
this.goodList = [];
|
||||
this.goodPage = 1;
|
||||
this.$nextTick(() => {
|
||||
if (this.sortList != '') this.getGoodsList();
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
// 商品列表
|
||||
getGoodsList() {
|
||||
if (this.loading || this.loaded) return;
|
||||
this.loading = true;
|
||||
getProductslist({
|
||||
sid: this.sid,
|
||||
keyword: '',
|
||||
priceOrder: '',
|
||||
salesOrder: '',
|
||||
news: 0,
|
||||
page: this.goodPage,
|
||||
limit: 10,
|
||||
cid: this.sortList.id
|
||||
}).then(res => {
|
||||
this.loading = false;
|
||||
this.loaded = res.data.length < 10;
|
||||
this.goodPage++;
|
||||
this.goodList = this.goodList.concat(res.data);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取我的推荐
|
||||
*/
|
||||
get_host_product: function() {
|
||||
let that = this;
|
||||
if (that.hotScroll) return;
|
||||
getProductHot(that.hotPage, that.hotLimit).then(res => {
|
||||
that.hotPage++;
|
||||
that.hotScroll = res.data.length < that.hotLimit;
|
||||
that.hostProduct = that.hostProduct.concat(res.data);
|
||||
});
|
||||
},
|
||||
// 新用户优惠券
|
||||
getCouponOnce() {
|
||||
getCouponNewUser().then(res => {
|
||||
this.couponObjs = res.data;
|
||||
});
|
||||
},
|
||||
couponCloses() {
|
||||
this.couponObjs.show = false;
|
||||
try {
|
||||
uni.setStorageSync('oldUser', 1);
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
},
|
||||
// 优惠券弹窗
|
||||
getCoupon() {
|
||||
getCouponV2().then(res => {
|
||||
this.couponObj = res.data
|
||||
if (res.data.list.length > 0) {
|
||||
this.isCouponShow = true
|
||||
}
|
||||
})
|
||||
},
|
||||
// 优惠券弹窗关闭
|
||||
couponClose() {
|
||||
this.isCouponShow = false
|
||||
try {
|
||||
uni.setStorageSync('oldDate', new Date().toLocaleDateString());
|
||||
} catch {}
|
||||
},
|
||||
// #ifdef H5
|
||||
// 获取url后面的参数
|
||||
getQueryString(name) {
|
||||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||||
var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
|
||||
var r = window.location.search.substr(1).match(reg);
|
||||
var q = window.location.pathname.substr(1).match(reg_rewrite);
|
||||
if (r != null) {
|
||||
return unescape(r[2]);
|
||||
} else if (q != null) {
|
||||
return unescape(q[2]);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
|
||||
// #ifdef MP || APP-PLUS
|
||||
getTemlIds() {
|
||||
let messageTmplIds = wx.getStorageSync(SUBSCRIBE_MESSAGE);
|
||||
if (!messageTmplIds) {
|
||||
getTemlIds().then(res => {
|
||||
if (res.data) wx.setStorageSync(SUBSCRIBE_MESSAGE, JSON.stringify(res.data));
|
||||
});
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
// 对象转数组
|
||||
objToArr(data) {
|
||||
const keys = Object.keys(data)
|
||||
keys.sort((a, b) => a - b)
|
||||
const m = keys.map(key => data[key]);
|
||||
return m;
|
||||
},
|
||||
getDiyData() {
|
||||
getDiy(this.pageId).then(res => {
|
||||
// uni.setStorageSync('specialDiyData', JSON.stringify(res.data));
|
||||
// this.setDiyData(res.data);
|
||||
let data = res.data;
|
||||
if (data.is_bg_color) {
|
||||
this.bgColor = data.color_picker
|
||||
}
|
||||
if (data.is_bg_pic) {
|
||||
this.bgPic = data.bg_pic
|
||||
this.bgTabVal = data.bg_tab_val
|
||||
}
|
||||
this.pageShow = data.is_show
|
||||
uni.setNavigationBarTitle({
|
||||
title: data.title
|
||||
})
|
||||
let temp = []
|
||||
let lastArr = this.objToArr(data.value)
|
||||
lastArr.forEach((item, index, arr) => {
|
||||
if (item.isHide !== '1') {
|
||||
temp.push(item);
|
||||
}
|
||||
if (item.name == 'pageFoot') {
|
||||
this.tabBarData = item;
|
||||
}
|
||||
});
|
||||
this.styleConfig = temp;
|
||||
});
|
||||
},
|
||||
changeBarg(item) {
|
||||
if (!this.isLogin) {
|
||||
toLogin()
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_bargain_details/index?id=${item.id}&spid=${this.uid}`
|
||||
});
|
||||
}
|
||||
},
|
||||
goDetail(item) {
|
||||
goShopDetail(item, this.uid).then(res => {
|
||||
uni.navigateTo({
|
||||
url: `/pages/goods_details/index?id=${item.id}`
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
// #ifdef H5
|
||||
// 微信分享；
|
||||
setOpenShare: function() {
|
||||
let that = this;
|
||||
if (that.$wechat.isWeixin()) {
|
||||
getShare().then(res => {
|
||||
let data = res.data.data;
|
||||
let configAppMessage = {
|
||||
desc: data.synopsis,
|
||||
title: data.title,
|
||||
link: location.href,
|
||||
imgUrl: data.img
|
||||
};
|
||||
that.$wechat.wechatEvevt(['updateAppMessageShareData', 'updateTimelineShareData'],
|
||||
configAppMessage);
|
||||
});
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
},
|
||||
onReachBottom: function() {},
|
||||
onPageScroll(e) {
|
||||
if (e.scrollTop > 10) {
|
||||
this.isScrolled = true;
|
||||
} else {
|
||||
this.isScrolled = false;
|
||||
}
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
//#ifdef MP || APP-PLUS
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: this.shareInfo.title,
|
||||
path: '/pages/index/index',
|
||||
imageUrl: this.storeInfo.img,
|
||||
};
|
||||
},
|
||||
//#endif
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sort-scroll {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
text-align: center;
|
||||
padding-top: 50rpx;
|
||||
|
||||
.tips {
|
||||
color: #aaa;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 414rpx;
|
||||
height: 304rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sort-product {
|
||||
margin-top: 20rpx;
|
||||
|
||||
.sort-box {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx 0;
|
||||
|
||||
.sort-item {
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.txt {
|
||||
color: #272727;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 140rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pictrues {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background: #f8f8f8;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.icon-gengduo1 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
&.on {
|
||||
.txt {
|
||||
color: #fc4141;
|
||||
}
|
||||
|
||||
image {
|
||||
border: 1px solid #fc4141;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 20rpx;
|
||||
|
||||
.product-item {
|
||||
position: relative;
|
||||
width: 344rpx;
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.pictrue {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 344rpx;
|
||||
border-radius: 10rpx 10rpx 0 0;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 14rpx 16rpx;
|
||||
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.price-box {
|
||||
font-size: 34rpx;
|
||||
font-weight: 700;
|
||||
margin-top: 8px;
|
||||
color: #fc4141;
|
||||
|
||||
text {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ysize {
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.fullsize {
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.repeat {
|
||||
background-repeat: repeat;
|
||||
}
|
||||
|
||||
.noRepeat {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/active-zs.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/active-zs.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/big-bg.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/big-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/exp.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/exp.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 456 B |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/grade-bg.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/grade-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/left.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 B |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/member-font.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/member-font.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/member-wang.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/member-wang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1009 B |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/vip-paid-active.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/vip-paid-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/vip-paid.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/vip-paid.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/vipBg.png
Normal file
BIN
pro_v3.5.1/view/uniapp_v2/pages/annex/static/vipBg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
255
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_active/index.vue
Normal file
255
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_active/index.vue
Normal file
File diff suppressed because one or more lines are too long
57
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_clause/index.vue
Normal file
57
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_clause/index.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="title">{{agreement.title}}</view>
|
||||
<view class="cont" v-html="agreement.content"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
memberCard
|
||||
} from '@/api/user.js';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
agreement: ''
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.memberCard();
|
||||
},
|
||||
methods: {
|
||||
memberCard() {
|
||||
uni.showLoading({
|
||||
title: '加载中'
|
||||
});
|
||||
memberCard().then(res => {
|
||||
uni.hideLoading();
|
||||
const {
|
||||
member_explain
|
||||
} = res.data;
|
||||
this.agreement = member_explain;
|
||||
}).catch(err => {
|
||||
uni.hideLoading();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
padding-top: 60rpx;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cont {
|
||||
padding: 50rpx 30rpx;
|
||||
}
|
||||
</style>
|
||||
368
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_coupon/index.vue
Normal file
368
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_coupon/index.vue
Normal file
@@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="coupon-list" v-if="couponsList.length">
|
||||
<view class="item-group" v-for="(item,index) in couponsList" :key="item.id">
|
||||
<view class="item acea-row" :class="{ disabled: item.is_use && item.used && item.used.is_fail }">
|
||||
<view class='money' :class="{ moneyGray: item.used && item.used.is_fail }">
|
||||
<view>
|
||||
<text v-if="item.coupon_type == 1">￥</text>
|
||||
<text class='num'>{{item.coupon_type == 1?item.coupon_price:parseFloat(item.coupon_price)/10}}</text>
|
||||
<text v-if="item.coupon_type == 2">折</text>
|
||||
</view>
|
||||
<view class="pic-num" v-if="item.use_min_price > 0">满{{ item.use_min_price | money }}元可用</view>
|
||||
<view class="pic-num" v-else>无门槛券</view>
|
||||
</view>
|
||||
<view class="text-wrap acea-row row-middle">
|
||||
<view class="text">
|
||||
<view class="condition">
|
||||
<view class="name line2">
|
||||
<text>{{item.coupon_title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class='data acea-row row-between-wrapper'>
|
||||
<view v-if="item.coupon_time">领取后{{item.coupon_time}}天内有效</view>
|
||||
<view v-else>{{item.start_use_time}}-{{item.end_use_time}}</view>
|
||||
</view>
|
||||
<view class="look-wrap">
|
||||
<view class="look" @click="openRule(index)">
|
||||
{{ item.applicable_type ? (item.applicable_type == 1 ? '品类' : '商品') : '通用' }}优惠券<text v-if="item.rule">丨查看用券规则</text>
|
||||
<text v-if="item.rule" :class="['iconfont', item.ruleShow ? 'icon-ic_uparrow' : 'icon-ic_downarrow']"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- is_fail:1为失效；0为可用 -->
|
||||
<view v-if="userInfo.pay_vip_status">
|
||||
<view class="bnt" v-if="!item.is_use" @click="setCouponReceive(item.id)">立即领取</view>
|
||||
<view class="bnt" v-else-if="item.used && item.used.is_fail">已失效</view>
|
||||
<view class="bnt" v-else @click="useCoupon(item)">去使用</view>
|
||||
</view>
|
||||
<view class="bnt opacity-50" v-else>立即领取</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.ruleShow" class="rules">
|
||||
<view v-for="(ruleItem, idx) in item.rules" :key="idx">{{ ruleItem }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='px-20 mt-20' v-if="!couponsList.length && !loading">
|
||||
<emptyPage title="暂无优惠券，去看点别的吧～" src="/statics/images/noCoupon.gif"></emptyPage>
|
||||
</view>
|
||||
<home></home>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { memberCouponsList, getUserInfo } from '@/api/user.js';
|
||||
import { setCouponReceive } from '@/api/api.js';
|
||||
import { toLogin} from '@/libs/login.js';
|
||||
import colors from '@/mixins/color.js';
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import { mapGetters } from "vuex";
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
export default {
|
||||
components: {
|
||||
emptyPage
|
||||
},
|
||||
mixins: [colors],
|
||||
data() {
|
||||
return {
|
||||
couponsList: [],
|
||||
loading: false,
|
||||
isAuto: false, //没有授权的不会自动授权
|
||||
isShowAuth: false, //是否隐藏授权
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
page: 1,
|
||||
limit: 15,
|
||||
loadend: false,
|
||||
userInfo:{
|
||||
pay_vip_status: false,
|
||||
}
|
||||
};
|
||||
},
|
||||
filters: {
|
||||
money(value) {
|
||||
if (!value) return '0'
|
||||
return parseFloat(value);
|
||||
}
|
||||
},
|
||||
computed: mapGetters(['isLogin']),
|
||||
watch: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
// #ifndef MP
|
||||
this.getUseCoupons();
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
if (this.isLogin) {
|
||||
this.getUserInfo();
|
||||
this.getUseCoupons();
|
||||
}else{
|
||||
toLogin()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getUserInfo: function() {
|
||||
getUserInfo().then(res => {
|
||||
this.$set(this, 'userInfo', res.data);
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 获取领取优惠券列表
|
||||
*/
|
||||
getUseCoupons: function() {
|
||||
let that = this;
|
||||
if (this.loadend) {
|
||||
return;
|
||||
}
|
||||
memberCouponsList(this.page, this.limit).then(res => {
|
||||
that.loading = true;
|
||||
res.data.forEach(item => {
|
||||
item.ruleShow = false;
|
||||
// item.rules = item.rule.split('\n');
|
||||
});
|
||||
this.page += 1;
|
||||
this.loadend = res.data.length < this.limit;
|
||||
this.couponsList = [...this.couponsList, ...res.data];
|
||||
})
|
||||
},
|
||||
// 领取优惠券
|
||||
setCouponReceive(id) {
|
||||
setCouponReceive(id).then(res => {
|
||||
this.$util.Tips({
|
||||
title: '领取成功'
|
||||
});
|
||||
for (let i = 0; i < this.couponsList.length; i++) {
|
||||
if (this.couponsList[i].id == id) {
|
||||
this.couponsList[i].is_use = true;
|
||||
}
|
||||
}
|
||||
}).catch(err => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
useCoupon(item) {
|
||||
let url = '';
|
||||
// 通用券
|
||||
if (item.category_id == 0 && item.product_id == '' && item.brand_id == 0) {
|
||||
url = '/pages/goods/goods_list/index?title=默认'
|
||||
}
|
||||
// 品类券
|
||||
if (item.category_id != 0) {
|
||||
if (item.category_type == 1) {
|
||||
url = '/pages/goods/goods_list/index?cid=' + item.category_id + '&title=' + item.category_name
|
||||
} else {
|
||||
url = '/pages/goods/goods_list/index?sid=' + item.category_id + '&title=' + item.category_name
|
||||
}
|
||||
}
|
||||
//商品券
|
||||
if (item.product_id != '') {
|
||||
let arr = item.product_id.split(',');
|
||||
let num = arr.length;
|
||||
if (num == 1) {
|
||||
url = '/pages/goods_details/index?id=' + item.product_id
|
||||
} else {
|
||||
url = '/pages/goods/goods_list/index?productId=' + item.product_id + '&title=默认'
|
||||
}
|
||||
}
|
||||
//品牌券
|
||||
if (item.brand_id != 0) {
|
||||
url = '/pages/goods/goods_list/index?brandId=' + item.brand_id + '&title=默认'
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
},
|
||||
openRule(index) {
|
||||
this.couponsList[index].ruleShow = !this.couponsList[index].ruleShow
|
||||
},
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getUseCoupons();
|
||||
},
|
||||
onPageScroll(object) {
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.coupon-list .moneyGray.item .text .data .bnt {
|
||||
background: #B5B5B5;
|
||||
}
|
||||
|
||||
.coupon-list .moneyGray.item .money {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
.coupon-list .moneyGray.item .text {
|
||||
background: linear-gradient(-90deg, #DADADA 0%, #E9E9E9 100%);
|
||||
}
|
||||
|
||||
.coupon-list .moneyGray.item .text .condition {
|
||||
border-color: #F0F0F0;
|
||||
}
|
||||
|
||||
.coupon-list .moneyGray.item .text .condition {
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
.coupon-list .moneyGray.item .text .data {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.moneyGray .condition .line-title {
|
||||
border-color: #7D7D7D;
|
||||
background: #EFEFEF;
|
||||
color: #7D7D7D;
|
||||
}
|
||||
|
||||
.coupon-list .item-group {
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.coupon-list .item-group .rules {
|
||||
padding: 42rpx 24rpx 24rpx;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
margin-top: -18rpx;
|
||||
background: linear-gradient(180deg, #F7F7F7 0%, #FFFFFF 100%);
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.coupon-list .item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.coupon-list .item .money {
|
||||
position: relative;
|
||||
border-radius: 24rpx 0 0 24rpx;
|
||||
background-image: radial-gradient(circle at left, #F5F5F5 16rpx, #32302D 0, #584834 100%);
|
||||
font-family: Regular;
|
||||
}
|
||||
|
||||
.coupon-list .item .money::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 6rpx;
|
||||
background-image: radial-gradient(circle at 6rpx, #FFFFFF 6rpx, transparent 6rpx);
|
||||
background-size: 6rpx 18rpx;
|
||||
}
|
||||
|
||||
.coupon-list .item.disabled .money {
|
||||
background-image: radial-gradient(circle at left, #F5F5F5 16rpx, #CCCCCC 0);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.coupon-list .item.disabled .bnt {
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.money {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pic-num {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.coupon-list .item {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.coupon-list .item .text-wrap {
|
||||
flex: 1;
|
||||
padding-right: 20rpx;
|
||||
border-radius: 0 24rpx 24rpx 0;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition .name {
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.coupon-list .item .text .condition .pic {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
display: block;
|
||||
margin-right: 10rpx;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.condition .line-title {
|
||||
width: 70rpx;
|
||||
height: 32rpx !important;
|
||||
line-height: 30rpx;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
background: #FEF7EC;
|
||||
border: 1px solid #EEC181;
|
||||
opacity: 1;
|
||||
border-radius: 20rpx;
|
||||
font-size: 18rpx !important;
|
||||
color: #EEC181;
|
||||
margin-right: 12rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.condition .line-title.bg-color-huic {
|
||||
border-color: #BBB;
|
||||
color: #bbb;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.coupon-list .item .bnt {
|
||||
background: linear-gradient(90deg, #584834 0%, #32302D 100%);
|
||||
}
|
||||
|
||||
.coupon-list .item.disabled .bnt {
|
||||
background: #CCCCCC;
|
||||
}
|
||||
|
||||
.look-wrap {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.look-wrap .look {
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.look-wrap .look {
|
||||
font-size: 20rpx;
|
||||
line-height: 28rpx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.look-wrap .look .iconfont {
|
||||
margin-left: 6rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
.opacity-50{
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
603
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_grade/index.vue
Normal file
603
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_grade/index.vue
Normal file
@@ -0,0 +1,603 @@
|
||||
<template>
|
||||
<view class="vipGrade">
|
||||
<view class="headerBg">
|
||||
<view class="header">
|
||||
<view class="top acea-row row-between-wrapper">
|
||||
<view class="acea-row row-middle">
|
||||
<view class="pictrue">
|
||||
<image :src="user_info.avatar"></image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="acea-row row-middle">
|
||||
<view class="nickname line1">{{ user_info.nickname }}</view>
|
||||
<view class="name" v-if="level_info.name">{{ level_info.name }}</view>
|
||||
<image :src="level_info.icon" class="levelImage" v-if="level_info.icon"></image>
|
||||
</view>
|
||||
<view class="acea-row row-middle">
|
||||
<view class="progress">
|
||||
<view
|
||||
class="bg-reds"
|
||||
:style="
|
||||
'width:' +
|
||||
(level_info.exp > level_info.next_exp
|
||||
? 100
|
||||
: $util.$h.Div(parseInt(level_info.exp), level_info.next_exp) >= 5
|
||||
? $util.$h.Div(parseInt(level_info.exp), level_info.next_exp)
|
||||
: 5) +
|
||||
'%;'
|
||||
"
|
||||
></view>
|
||||
</view>
|
||||
<view class="percent">{{ level_info.exp ? level_info.exp.split('.')[0] : 0 }}/{{ level_info.next_exp || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="code" @click="tapQrCode">
|
||||
<view class="iconfont icon-erweima3"></view>
|
||||
<view>会员码</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="bottom acea-row row-middle">
|
||||
<view class="item">
|
||||
<view>积分</view>
|
||||
<view class="num">{{ user_info.integral || 0 }}</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view>余额</view>
|
||||
<view class="num" v-if="user_info.now_money">
|
||||
{{ user_info.now_money.split('.')[0] || 0 }}
|
||||
<text class="numSp" v-if="user_info.now_money.split('.')[1] > 0">.{{ user_info.now_money.split('.')[1] }}</text>
|
||||
</view>
|
||||
<view class="num" v-else>0</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view>优惠券</view>
|
||||
<view class="num">{{ user_info.couponCount || 0 }}</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view>折扣</view>
|
||||
<view class="num">{{ level_info.discount / 10 || 0 }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="equity">
|
||||
<view class="title acea-row row-between-wrapper">
|
||||
<view>{{ level_info.name || '' }}会员尊享权益</view>
|
||||
<view class="more" @click="more">
|
||||
查看更多
|
||||
<text class="iconfont icon-jinru2"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list acea-row row-around row-middle">
|
||||
<view class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="imgHost + '/statics/images/userVip1.png'"></image>
|
||||
</view>
|
||||
<view>购物折扣</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="imgHost + '/statics/images/userVip2.png'"></image>
|
||||
</view>
|
||||
<view>专属徽章</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="imgHost + '/statics/images/userVip3.png'"></image>
|
||||
</view>
|
||||
<view>经验累积</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="pictrue">
|
||||
<image :src="imgHost + '/statics/images/userVip4.png'"></image>
|
||||
</view>
|
||||
<view>尊享客服</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="task">
|
||||
<view class="title acea-row row-between-wrapper">
|
||||
<view>成长任务</view>
|
||||
<view class="more" @click="more">
|
||||
查看更多
|
||||
<text class="iconfont icon-jinru2"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view class="acea-row row-middle">
|
||||
<view class="pictrue acea-row row-center-wrapper">
|
||||
<text class="iconfont icon-meiriqiandao"></text>
|
||||
</view>
|
||||
<view class="txt">
|
||||
<view>每日签到</view>
|
||||
<view class="exp acea-row row-middle">
|
||||
<image src="../static/exp.png"></image>
|
||||
经验值+{{ task_info.sign }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator class="bnt acea-row row-center-wrapper" url="/pages/users/user_sgin/index" hover-class="none">去完成</navigator>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view class="acea-row row-middle">
|
||||
<view class="pictrue acea-row row-center-wrapper">
|
||||
<text class="iconfont icon-goumaishangpin"></text>
|
||||
</view>
|
||||
<view class="txt">
|
||||
<view>购买商品</view>
|
||||
<view class="exp acea-row row-middle">
|
||||
<image src="../static/exp.png"></image>
|
||||
经验值+{{ task_info.order }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator class="bnt acea-row row-center-wrapper" open-type="switchTab" url="/pages/goods_cate/goods_cate" hover-class="none">去完成</navigator>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view class="acea-row row-middle">
|
||||
<view class="pictrue acea-row row-center-wrapper">
|
||||
<text class="iconfont icon-yaoqinghaoyou2"></text>
|
||||
</view>
|
||||
<view class="txt">
|
||||
<view>邀请好友</view>
|
||||
<view class="exp acea-row row-middle">
|
||||
<image src="../static/exp.png"></image>
|
||||
经验值+{{ task_info.invite }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<navigator class="bnt acea-row row-center-wrapper" url="/pages/users/user_spread_code/index" hover-class="none">去完成</navigator>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="task on">
|
||||
<view class="title acea-row row-between-wrapper">
|
||||
<view>消费记录</view>
|
||||
<view class="more" @click="record">
|
||||
查看更多
|
||||
<text class="iconfont icon-jinru2"></text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item acea-row row-between row-top" v-for="(item, index) in list" :key="index">
|
||||
<view class="acea-row row-top">
|
||||
<text class="icon iconfont icon-xiaofeijilu1" v-if="item.type == 1"></text>
|
||||
<text class="icon iconfont icon-fufeihuiyuan1" v-else-if="item.type == 7"></text>
|
||||
<text class="icon iconfont icon-xiaofeijilu-rongcuo" v-else></text>
|
||||
<view class="txt">
|
||||
<view class="line1">{{ item.title }}</view>
|
||||
<view class="exp record">{{ item.type_name }}</view>
|
||||
<view class="time">{{ item.day }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="num">-{{ item.price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="codePopup" v-show="isCode" @touchmove.stop.prevent="moveHandle">
|
||||
<view class="header acea-row row-between-wrapper">
|
||||
<view class="title" :class="{ on: codeIndex == index, onLeft: codeIndex == 1 }" v-for="(item, index) in codeList" :key="index" @click="tapCode(index)">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="acea-row row-center-wrapper">
|
||||
<w-barcode :options="config.bar"></w-barcode>
|
||||
</view>
|
||||
<view class="acea-row row-center-wrapper" style="margin-top: 35rpx">
|
||||
<w-qrcode :options="config.qrc" @generate="hello"></w-qrcode>
|
||||
</view>
|
||||
<view class="codeNum">{{ config.bar.code }}</view>
|
||||
<view class="tip">如遇到扫码失败请将屏幕调至最亮重新扫码</view>
|
||||
</view>
|
||||
<view class="iconfont icon-guanbi2" @click="closeCode"></view>
|
||||
</view>
|
||||
<view class="mark" v-if="isCode" @touchmove.stop.prevent="moveHandle"></view>
|
||||
<home></home>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||||
import { getlevelInfo, moneyList, getRandCode } from '@/api/user.js';
|
||||
import { mapGetters } from 'vuex';
|
||||
import { toLogin } from '@/libs/login.js';
|
||||
export default {
|
||||
computed: mapGetters(['isLogin']),
|
||||
data() {
|
||||
return {
|
||||
config: {
|
||||
bar: {
|
||||
code: '',
|
||||
color: ['#000'],
|
||||
bgColor: '#FFFFFF', // 背景色
|
||||
width: 480, // 宽度
|
||||
height: 110 // 高度
|
||||
},
|
||||
qrc: {
|
||||
code: '',
|
||||
size: 380, // 二维码大小
|
||||
level: 3, //等级 0～4
|
||||
bgColor: '#FFFFFF', //二维码背景色 默认白色
|
||||
border: {
|
||||
color: ['#eee', '#eee'], //边框颜色支持渐变色
|
||||
lineWidth: 3 //边框宽度
|
||||
},
|
||||
// img: '/static/logo.png', //图片
|
||||
// iconSize: 40, //二维码图标的大小
|
||||
color: ['#333', '#333'] //边框颜色支持渐变色
|
||||
}
|
||||
},
|
||||
codeList: [
|
||||
{
|
||||
name: '会员码'
|
||||
},
|
||||
{
|
||||
name: '付款码'
|
||||
}
|
||||
],
|
||||
codeIndex: 0,
|
||||
isCode: false,
|
||||
imgHost: HTTP_REQUEST_URL,
|
||||
level_info: {},
|
||||
user_info: {},
|
||||
task_info: {},
|
||||
list: [],
|
||||
isShowAuth: false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.levelInfo();
|
||||
this.getUserBillList();
|
||||
},
|
||||
onPageScroll(object) {
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 授权回调
|
||||
*/
|
||||
onLoadFun: function () {
|
||||
this.isShowAuth = false;
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function (e) {
|
||||
this.isShowAuth = e;
|
||||
},
|
||||
more() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/users/user_vip/index'
|
||||
});
|
||||
},
|
||||
record() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/annex/record_list/index'
|
||||
});
|
||||
},
|
||||
hello(res) {
|
||||
// console.log(321,res)
|
||||
},
|
||||
getCode() {
|
||||
getRandCode()
|
||||
.then((res) => {
|
||||
let code = res.data.code;
|
||||
this.config.bar.code = code;
|
||||
this.config.qrc.code = code;
|
||||
})
|
||||
.catch((err) => {
|
||||
return this.$util.Tips(err);
|
||||
});
|
||||
},
|
||||
tapQrCode() {
|
||||
if (this.isLogin) {
|
||||
this.isCode = true;
|
||||
this.codeIndex = 0;
|
||||
this.$nextTick(function () {
|
||||
let code = this.user_info.bar_code;
|
||||
this.config.bar.code = code;
|
||||
this.config.qrc.code = code;
|
||||
});
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
closeCode() {
|
||||
this.isCode = false;
|
||||
},
|
||||
tapCode(index) {
|
||||
this.codeIndex = index;
|
||||
if (index == 1) {
|
||||
this.getCode();
|
||||
} else {
|
||||
let code = this.user_info.bar_code;
|
||||
this.config.bar.code = code;
|
||||
this.config.qrc.code = code;
|
||||
}
|
||||
},
|
||||
levelInfo() {
|
||||
getlevelInfo()
|
||||
.then((res) => {
|
||||
this.user_info = res.data.user;
|
||||
this.task_info = res.data.task;
|
||||
this.level_info = res.data.level_info;
|
||||
res.data.level_list.forEach((item) => {
|
||||
if (item.name === res.data.level_info.name) {
|
||||
this.level_info.next_exp = item.next_exp_num;
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
getUserBillList() {
|
||||
moneyList(
|
||||
{
|
||||
page: 1,
|
||||
limit: 5
|
||||
},
|
||||
9
|
||||
)
|
||||
.then((res) => {
|
||||
this.list = res.data.list;
|
||||
})
|
||||
.catch((err) => {
|
||||
this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
moveHandle() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.vipGrade {
|
||||
.mark {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 50;
|
||||
}
|
||||
.codePopup .header .title.on {
|
||||
background-color: #f7b942 !important;
|
||||
}
|
||||
.headerBg {
|
||||
background: url('../static/big-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 100%;
|
||||
height: 276rpx;
|
||||
padding-top: 1rpx;
|
||||
.header {
|
||||
width: 690rpx;
|
||||
height: 318rpx;
|
||||
background: url('../static/grade-bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 18rpx auto 0 auto;
|
||||
padding-top: 40rpx;
|
||||
.top {
|
||||
margin: 0 30rpx 70rpx 30rpx;
|
||||
.progress {
|
||||
overflow: hidden;
|
||||
background-color: #eeeeee;
|
||||
width: 200rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 7rpx;
|
||||
position: relative;
|
||||
margin-right: 6rpx;
|
||||
.bg-reds {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition: width 0.6s ease;
|
||||
background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(255, 137, 51, 1) 100%);
|
||||
}
|
||||
}
|
||||
.percent {
|
||||
font-size: 20rpx;
|
||||
color: #463b26;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.code {
|
||||
color: #333333;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
.icon-erweima3 {
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
}
|
||||
.pictrue {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border: 2rpx solid #9a8661;
|
||||
border-radius: 50%;
|
||||
margin-right: 22rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
max-width: 220rpx;
|
||||
}
|
||||
.name {
|
||||
font-size: 20rpx;
|
||||
color: #e8c891;
|
||||
font-weight: 500;
|
||||
background: #333333;
|
||||
border-radius: 6rpx;
|
||||
padding: 0 6rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
.levelImage {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
padding-left: 30rpx;
|
||||
.item {
|
||||
flex: 1;
|
||||
padding: 0 10rpx;
|
||||
color: #333333;
|
||||
font-size: 24rpx;
|
||||
.num {
|
||||
font-weight: 600;
|
||||
font-size: 36rpx;
|
||||
margin-top: 6rpx;
|
||||
.numSp {
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.equity {
|
||||
margin: 82rpx auto 0 auto;
|
||||
width: 690rpx;
|
||||
height: 300rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 14rpx;
|
||||
.title {
|
||||
padding: 28rpx 24rpx 0 24rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
font-size: 34rpx;
|
||||
.more {
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
.iconfont {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
margin-top: 44rpx;
|
||||
.item {
|
||||
color: #282828;
|
||||
font-size: 26rpx;
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 12rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.task {
|
||||
width: 690rpx;
|
||||
height: 524rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 14rpx;
|
||||
margin: 20rpx auto 0 auto;
|
||||
&.on {
|
||||
height: unset;
|
||||
}
|
||||
.title {
|
||||
padding: 34rpx 24rpx 46rpx 24rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 30rpx;
|
||||
.more {
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
font-size: 24rpx;
|
||||
.iconfont {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.list {
|
||||
.item {
|
||||
.icon {
|
||||
font-size: 72rpx;
|
||||
color: #e7c993;
|
||||
}
|
||||
.num {
|
||||
color: #282828;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
padding: 0 24rpx 26rpx 24rpx;
|
||||
position: relative;
|
||||
margin-bottom: 34rpx;
|
||||
.pictrue {
|
||||
width: 76rpx;
|
||||
height: 76rpx;
|
||||
background-color: #fdf8ee;
|
||||
border-radius: 50%;
|
||||
.iconfont {
|
||||
color: #f7b942;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.txt {
|
||||
font-weight: 400;
|
||||
color: #282828;
|
||||
font-size: 28rpx;
|
||||
margin-left: 24rpx;
|
||||
.line1 {
|
||||
width: 320rpx;
|
||||
}
|
||||
.exp {
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
margin-top: 2rpx;
|
||||
&.record {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
image {
|
||||
color: #999999;
|
||||
margin-right: 10rpx;
|
||||
width: 22rpx;
|
||||
height: 22rpx;
|
||||
}
|
||||
}
|
||||
.time {
|
||||
color: #999999;
|
||||
font-size: 22rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
.bnt {
|
||||
width: 112rpx;
|
||||
height: 44rpx;
|
||||
background: #f4dbab;
|
||||
border-radius: 26rpx;
|
||||
color: #755214;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 542rpx;
|
||||
height: 1px;
|
||||
background: #eeeeee;
|
||||
bottom: 0rpx;
|
||||
right: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
481
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_grade_active/index.vue
Normal file
481
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_grade_active/index.vue
Normal file
File diff suppressed because one or more lines are too long
983
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_paid/index.vue
Normal file
983
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_paid/index.vue
Normal file
File diff suppressed because one or more lines are too long
196
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_paid_active/index.vue
Normal file
196
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_paid_active/index.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<view>
|
||||
<image src="../static/vip-paid-active.png" class="w-full h-710"></image>
|
||||
<!-- #ifndef MP -->
|
||||
<view class="page-back flex-center" @click="jumpBack">
|
||||
<text class="iconfont icon-ic_left"></text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<form class="form" @submit="checkForm">
|
||||
<input v-model="account" class="input" name="account" type="text" placeholder="请输入卡号" placeholder-style="color:#CCCCCC" />
|
||||
<input v-model="password" :cursor-spacing="85" class="input" name="password" type="text" placeholder="请输入卡密" placeholder-style="color:#CCCCCC" password />
|
||||
<button class="button" form-type="submit">确认激活</button>
|
||||
<view class="look"><text class="link" @click="goPaidRights">查看会员权益</text></view>
|
||||
</form>
|
||||
<view class="activate" v-if="showActive">
|
||||
<view class="zs-bg"></view>
|
||||
<view class="active-card flex-center relative">
|
||||
<view class="yuan flex-center">
|
||||
<text class="iconfont icon-ic_complete fs-60 text--w111-fff"></text>
|
||||
</view>
|
||||
<view class="w-430 fs-34 flex-x-center">亲爱的 {{ userInfo.nickname }}</view>
|
||||
</view>
|
||||
<view class="w-full active-success text-center fs-44 fw-500">激活成功</view>
|
||||
<view class="active-btn h-88 rd-44rpx flex-center fs-28 fw-500" @tap="activeConfirm">开始使用</view>
|
||||
</view>
|
||||
<home></home>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { memberCardDraw } from '@/api/user.js';
|
||||
import { USER_INFO } from '@/config/cache';
|
||||
import Cache from '@/utils/cache';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
account: '',
|
||||
password: '',
|
||||
showActive: false,
|
||||
userInfo: JSON.parse(Cache.get(USER_INFO))
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
checkForm(e) {
|
||||
let formData = e.detail.value,
|
||||
data = {
|
||||
member_card_code: '',
|
||||
member_card_pwd: '',
|
||||
from: 'H5 '
|
||||
};
|
||||
if (!formData.account) {
|
||||
return this.$util.Tips({
|
||||
title: '请输入卡号'
|
||||
});
|
||||
}
|
||||
if (!formData.password) {
|
||||
return this.$util.Tips({
|
||||
title: '请输入卡密'
|
||||
});
|
||||
}
|
||||
data.member_card_code = formData.account;
|
||||
data.member_card_pwd = formData.password;
|
||||
// #ifdef H5
|
||||
let ua = navigator.userAgent.toLowerCase();
|
||||
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
|
||||
data.from = 'weixin';
|
||||
}
|
||||
// #endif
|
||||
// #ifdef MP
|
||||
data.from = 'routine';
|
||||
// #endif
|
||||
uni.showLoading({
|
||||
title: '激活中'
|
||||
});
|
||||
memberCardDraw(data)
|
||||
.then((res) => {
|
||||
let that = this;
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: 'none'
|
||||
});
|
||||
this.showActive = true;
|
||||
})
|
||||
.catch((err) => {
|
||||
return this.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
});
|
||||
},
|
||||
goPaidRights() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/annex/vip_paid_rights/index'
|
||||
});
|
||||
},
|
||||
activeConfirm() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
jumpBack() {
|
||||
uni.navigateBack();
|
||||
}
|
||||
},
|
||||
onPageScroll(object) {
|
||||
uni.$emit('scroll');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background: #f3ece4;
|
||||
}
|
||||
|
||||
.form {
|
||||
.input {
|
||||
height: 88rpx;
|
||||
padding: 0 24rpx;
|
||||
border: 1rpx solid rgba(126, 75, 6, 0.5);
|
||||
border-radius: 16rpx;
|
||||
margin: 32rpx 40rpx;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
font-size: 30rpx;
|
||||
color: #333333;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
height: 88rpx;
|
||||
border-radius: 44rpx;
|
||||
margin: 56rpx 40rpx 40rpx;
|
||||
background: #333333;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
line-height: 88rpx;
|
||||
color: #facc7d;
|
||||
}
|
||||
|
||||
.look {
|
||||
text-align: center;
|
||||
line-height: 42rpx;
|
||||
}
|
||||
|
||||
.link {
|
||||
font-size: 26rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
.activate {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg, #312b23 0%, #19140e 100%);
|
||||
z-index: 5;
|
||||
}
|
||||
.zs-bg {
|
||||
position: absolute;
|
||||
top: 276rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 443rpx;
|
||||
height: 392rpx;
|
||||
background-image: url('../static/active-zs.png');
|
||||
background-size: cover;
|
||||
}
|
||||
.active-card {
|
||||
width: 516rpx;
|
||||
height: 298rpx;
|
||||
background: linear-gradient(270deg, #ecd8c8 0%, #dbbea2 100%);
|
||||
border-radius: 24rpx;
|
||||
margin: 314rpx auto 0;
|
||||
}
|
||||
.yuan {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid #fff;
|
||||
background-color: #f0ca86;
|
||||
position: absolute;
|
||||
top: -60rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.active-success {
|
||||
margin: 140rpx auto 48rpx;
|
||||
color: #facc7d;
|
||||
}
|
||||
.active-btn {
|
||||
width: 516rpx;
|
||||
background-color: #facc7d;
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
154
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_paid_rights/index.vue
Normal file
154
pro_v3.5.1/view/uniapp_v2/pages/annex/vip_paid_rights/index.vue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<scroll-view class="rights-container" scroll-y="true">
|
||||
<!-- #ifdef MP -->
|
||||
<NavBar titleText="会员权益" :iconColor="iconColor" :textColor="iconColor" :isScrolling="isScrolling" showBack></NavBar>
|
||||
<!-- #endif -->
|
||||
<view class="header acea-row">
|
||||
<view v-for="(item, index) in memberRights" :key="item.id" class="item acea-row row-column row-middle" :class="{ on: currentIndex == index }" @click="currentIndex = index">
|
||||
<view class="image-wrap acea-row row-center-wrapper">
|
||||
<image :src="item.pic" class="image"></image>
|
||||
</view>
|
||||
<view>{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<swiper class="swiper" :current="currentIndex" :interval="3000" :duration="1000" previous-margin="58rpx" next-margin="58rpx" @change="swiperChange">
|
||||
<swiper-item v-for="(item, index) in memberRights" :key="item.id">
|
||||
<view class="swiper-item acea-row row-column" :class="{ on: currentIndex == index }">
|
||||
<view class="title">{{ item.explain }}</view>
|
||||
<scroll-view class="scroll-view" scroll-y="true">
|
||||
<view v-html="item.content || ''"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<home></home>
|
||||
</scroll-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
memberCard,
|
||||
} from '@/api/user.js';
|
||||
import NavBar from '@/components/NavBar.vue';
|
||||
export default {
|
||||
components: {
|
||||
NavBar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// #ifdef MP
|
||||
iconColor: '#FFFFFF',
|
||||
isScrolling: false,
|
||||
// #endif
|
||||
memberRights: [],
|
||||
currentIndex: 0,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.memberCard();
|
||||
},
|
||||
methods: {
|
||||
memberCard() {
|
||||
uni.showLoading({
|
||||
title: '正在加载…'
|
||||
});
|
||||
memberCard().then(res => {
|
||||
uni.hideLoading();
|
||||
const {
|
||||
member_rights,
|
||||
} = res.data;
|
||||
this.memberRights = member_rights;
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: 'none'
|
||||
});
|
||||
});
|
||||
},
|
||||
swiperChange(e) {
|
||||
this.currentIndex = e.detail.current;
|
||||
},
|
||||
},
|
||||
onPageScroll(object) {
|
||||
uni.$emit('scroll');
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rights-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(180deg, #312B23 0%, #19140E 100%);
|
||||
|
||||
.header {
|
||||
.item {
|
||||
flex: 1;
|
||||
padding: 48rpx 0 56rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 34rpx;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
|
||||
&.on {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
.image {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrap {
|
||||
position: relative;
|
||||
width: 88rpx;
|
||||
height: 88rpx;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 28rpx;
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 2%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 1090rpx;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
height: 100%;
|
||||
transform: scale(0.9);
|
||||
transition: 0.3s;
|
||||
|
||||
&.on {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 42rpx 0 40rpx;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
background-color: #FFEBC7;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 48rpx;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
30
pro_v3.5.1/view/uniapp_v2/pages/annex/web_view/index.vue
Normal file
30
pro_v3.5.1/view/uniapp_v2/pages/annex/web_view/index.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<web-view class="web-view" :webview-styles="webviewStyles" :src="url" :style="{width: windowW + 'px', height: windowH + 'px'}"></web-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
windowH: 0,
|
||||
windowW: 0,
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: 'transparent'
|
||||
}
|
||||
},
|
||||
url: ''
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
this.url = decodeURIComponent(option.url);
|
||||
try {
|
||||
const res = uni.getWindowInfo();
|
||||
this.windowW = res.windowWidth;
|
||||
this.windowH = res.windowHeight;
|
||||
} catch (e) {
|
||||
// error
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user