zhangxiong
/
kxmh-xhs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

commit something

Browse Source
master
张雄 2 years ago
commit bd78d7f345
176 changed files with 64183 additions and 0 deletions
Show Stats Download Patch File Download Diff File

23
.gitignore vendored
Unescape View File

@ -0,0 +1,23 @@
.DS_Store
node_modules/
unpackage/
dist/
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.project
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

16
.hbuilderx/launch.json
Unescape View File

@ -0,0 +1,16 @@
{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}

19
README.md
Unescape View File

@ -0,0 +1,19 @@
# kxmh-xhs
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

77
babel.config.js
Unescape View File

@ -0,0 +1,77 @@
const webpack = require('webpack')
const plugins = []
if (process.env.UNI_OPT_TREESHAKINGNG) {
plugins.push(require('@dcloudio/vue-cli-plugin-uni-optimize/packages/babel-plugin-uni-api/index.js'))
}
if (
(
process.env.UNI_PLATFORM === 'app-plus' &&
process.env.UNI_USING_V8
) ||
(
process.env.UNI_PLATFORM === 'h5' &&
process.env.UNI_H5_BROWSER === 'builtin'
)
) {
const path = require('path')
const isWin = /^win/.test(process.platform)
const normalizePath = path => (isWin ? path.replace(/\\/g, '/') : path)
const input = normalizePath(process.env.UNI_INPUT_DIR)
try {
plugins.push([
require('@dcloudio/vue-cli-plugin-hbuilderx/packages/babel-plugin-console'),
{
file (file) {
file = normalizePath(file)
if (file.indexOf(input) === 0) {
return path.relative(input, file)
}
return false
}
}
])
} catch (e) { }
}
process.UNI_LIBRARIES = process.UNI_LIBRARIES || ['@dcloudio/uni-ui']
process.UNI_LIBRARIES.forEach(libraryName => {
plugins.push([
'import',
{
'libraryName': libraryName,
'customName': (name) => {
return `${libraryName}/lib/${name}/${name}`
}
}
])
})
const config = {
presets: [
[
'@vue/app',
{
modules: webpack.version[0] > 4 ? 'auto' : 'commonjs',
useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry'
}
]
],
plugins
}
const UNI_H5_TEST = '**/@dcloudio/uni-h5/dist/index.umd.min.js'
if (process.env.NODE_ENV === 'production') {
config.overrides = [{
test: UNI_H5_TEST,
compact: true,
}]
} else {
config.ignore = [UNI_H5_TEST]
}
module.exports = config

9
jsconfig.json
Unescape View File

@ -0,0 +1,9 @@
{
"compilerOptions": {
"types": [
"@dcloudio/types",
"miniprogram-api-typings",
"mini-types"
]
}
}

37799
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

114
package.json
Unescape View File

@ -0,0 +1,114 @@
{
"name": "kxmh-xhs",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "npm run dev:h5",
"build": "npm run build:h5",
"build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
"build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
"build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
"build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
"build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
"build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
"build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
"build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
"build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
"build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
"build:mp-xhs": "cross-env NODE_ENV=production UNI_PLATFORM=mp-xhs vue-cli-service uni-build",
"build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
"build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
"build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
"build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
"dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
"dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
"dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
"dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
"dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
"dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
"dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
"dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
"dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
"dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
"dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
"dev:mp-xhs": "cross-env NODE_ENV=development UNI_PLATFORM=mp-xhs vue-cli-service uni-build --watch",
"dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
"dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
"dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
"dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
"info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
"serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
"test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
"test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
"test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
"test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
"test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
},
"dependencies": {
"@dcloudio/uni-app": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-app-plus": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-h5": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-helper-json": "*",
"@dcloudio/uni-i18n": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-360": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-alipay": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-baidu": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-jd": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-kuaishou": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-lark": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-qq": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-toutiao": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-vue": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-weixin": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-mp-xhs": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-quickapp-native": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-quickapp-webview": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-stacktracey": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-stat": "^2.0.1-alpha-36820221027001",
"@vue/shared": "^3.0.0",
"core-js": "^3.8.3",
"flyio": "^0.6.2",
"regenerator-runtime": "^0.12.1",
"uview-ui": "^2.0.35",
"vue": "^2.6.14",
"vuex": "^3.2.0"
},
"devDependencies": {
"@babel/runtime": "~7.17.9",
"@dcloudio/types": "^3.0.4",
"@dcloudio/uni-automator": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-cli-i18n": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-cli-shared": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-migration": "^2.0.1-alpha-36820221027001",
"@dcloudio/uni-template-compiler": "^2.0.1-alpha-36820221027001",
"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.1-alpha-36820221027001",
"@dcloudio/vue-cli-plugin-uni": "^2.0.1-alpha-36820221027001",
"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.1-alpha-36820221027001",
"@dcloudio/webpack-uni-mp-loader": "^2.0.1-alpha-36820221027001",
"@dcloudio/webpack-uni-pages-loader": "^2.0.1-alpha-36820221027001",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"babel-plugin-import": "^1.11.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"cross-env": "^7.0.2",
"jest": "^25.4.0",
"mini-types": "*",
"miniprogram-api-typings": "*",
"postcss-comment": "^2.0.0",
"sass": "^1.55.0",
"vue-template-compiler": "^2.6.14"
},
"browserslist": [
"Android >= 4.4",
"ios >= 9"
],
"resolutions": {
"@babel/runtime": "~7.17.9"
},
"uni-app": {
"scripts": {}
}
}

27
postcss.config.js
Unescape View File

@ -0,0 +1,27 @@
const path = require('path')
const webpack = require('webpack')
const config = {
parser: require('postcss-comment'),
plugins: [
require('postcss-import')({
resolve (id, basedir, importOptions) {
if (id.startsWith('~@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
} else if (id.startsWith('@/')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
} else if (id.startsWith('/') && !id.startsWith('//')) {
return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
}
return id
}
}),
require('autoprefixer')({
remove: process.env.UNI_PLATFORM !== 'h5'
}),
require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
]
}
if (webpack.version[0] > 4) {
delete config.parser
}
module.exports = config

11
project.config.json
Unescape View File

@ -0,0 +1,11 @@
{
"description": "项目配置文件",
"setting": {
"urlCheck": true,
"minified": true
},
"compileType": "miniprogram",
"libVersion": "3.34.2",
"appid": "63427b653abf67000102aea8",
"projectname": "kxmh-xhs"
}

25
public/index.html
Unescape View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

10
sfc.d.ts vendored
Unescape View File

@ -0,0 +1,10 @@
import Vue from 'vue'
declare module "vue/types/options" {
type Hooks = App.AppInstance & Page.PageInstance;
interface ComponentOptions<V extends Vue> extends Hooks {
/**
* 组件类型
*/
mpType?: string;
}
}

4
shime-vue.d.ts vendored
Unescape View File

@ -0,0 +1,4 @@
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}

128
src/App.vue
Unescape View File

@ -0,0 +1,128 @@
<script>
// app.js
// require('./page-extend');
export default {
data() {
return {};
},
onLaunch() {
var that = this;
uni.getSystemInfo({
success(res) {
//获取屏幕的宽成功
that.globalData.screenWidth = res.screenWidth;
that.globalData.screenHeight = res.screenHeight;
// #ifdef MP-ALIPAY
that.globalData.screenWidth = res.windowWidth;
that.globalData.screenHeight = res.windowHeight;
// #endif
that.globalData.statusBarHeight = res.statusBarHeight;
}
});
let userInfo = uni.getStorageSync('userInfo') || null;
if (userInfo) {
this.globalData.token = userInfo.token;
this.globalData.uid = userInfo.uid;
this.globalData.userInfo = userInfo;
}
},
globalData: {
userInfo: null,
token: null,
uid: null
}
};
</script>
<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-ui/index.scss";
rich-text {
word-break: break-all;
}
page {
background-color: #fafafa;
font-family: PingFangSC-Medium, PingFang SC;
color: #181818;
-webkit-text-size-adjust: none;
width: 100%;
overflow-x: hidden;
height: 100%;
font-size: 32rpx;
}
.flex {
display: flex;
}
.flexA {
display: flex;
align-items: center;
justify-content: space-between;
}
.flexB {
display: flex;
align-items: center;
}
.flexC {
display: flex;
justify-content: space-between;
}
.jc-sa {
justify-content: space-around;
}
.jc-sb {
justify-content: space-between;
}
.jc-c {
justify-content: center;
}
.fd-col {
flex-direction: column;
}
.vt-al-md {
vertical-align: middle;
}
button::after {
border: none !important;
}
/* view{
background-color: #fff;
} */
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/* 无内容提示 */
.no_content {
text-align: center;
}
.no_content .img {
width: 130px;
height: 89px;
margin: 180rpx auto 60rpx auto;
}
.no_content .warn {
font-size: 16px;
color: #7b7b7b;
}
</style>

7
src/Gdata.js
Unescape View File

@ -0,0 +1,7 @@
// 测试
// const host ='https://mini.kaixinguopiao.cn'
// 正式
const host ='https://mm.kaixinguopiao.com'
module.exports={
host
}

523
src/components/calendar/calendar.vue
Unescape View File

@ -0,0 +1,523 @@
<template name="calendar">
<view class="calendar">
<view class="title flex">
<view class="flex">
<picker :value="selectDay.year + '-' + selectDay.month" @change="editMonth" mode="date" fields="month" class="year-month">
<view>
{{ selectDay.year }}.{{ selectDay.month > 9 ? selectDay.month : '0' + selectDay.month }}
</view>
</picker>
<view class="icon" @tap="lastMonth" style="transform: rotateY(180deg)">
<view class="iconfont icon-playfill"></view>
</view>
<view class="icon" @tap="nextMonth">
<view class="iconfont icon-playfill"></view>
</view>
</view>
<view @tap.stop.prevent="openChange" class="flex open">
<view>{{ open ? '收起' : '展开' }}</view>
<view style="margin-left: 6rpx; font-size: 20rpx" :class="'iconfont icon-' + (open ? 'fold' : 'unfold')"></view>
</view>
</view>
<!-- 日历头部 -->
<view class="flex-around calendar-week">
<view class="view">日</view>
<view class="view">一</view>
<view class="view">二</view>
<view class="view">三</view>
<view class="view">四</view>
<view class="view">五</view>
<view class="view">六</view>
</view>
<!-- 日历主体 -->
<!-- <view class="flex-start flex-wrap calendar-main" :style="'height:' + (dateList.length / 7) * 72 + 'rpx'"> -->
<view class="flex-start flex-wrap calendar-main" :style="'height:' + calendarMainHeight + 'rpx'">
<view class="day" v-for="(item, index) in dateList" :key="item.dateList">
<view
:class="'bg ' + (item.year === selectDay.year && item.month === selectDay.month ? (item.day === selectDay.day ? 'select' : '') : 'other-month')"
@tap.stop.prevent="selectChange"
:data-day="item.day"
:data-year="item.year"
:data-month="item.month"
:data-date-string="item.dateString"
>
{{ item.day }}
</view>
<view class="spot" v-if="item.spot"></view>
</view>
</view>
</view>
</template>
<script>
// components/calendar/calendar.js
export default {
name: 'calendar',
data() {
return {
open: false,
dateList: [],
//日历主体渲染数组
selectDay: {
year: '',
month: '',
day: ''
} //选中时间
};
}
/**
* 组件的属性列表
*/,
props: {
spot: {
type: Array,
default: () => []
},
defaultTime: {
type: String,
default: null
}
},
/**
* 组件的方法列表
*/
methods: {
/**
* 时间戳转化为年 月 日 时 分 秒
* time: 需要被格式化的时间，可以被new Date()解析即可
* format：格式化之后返回的格式，年月日时分秒分别为Y, M, D, h, m, s，这个参数不填的话则显示多久前
*/
formatTime(time, format) {
function formatNumber(n) {
n = n.toString();
return n[1] ? n : '0' + n;
}
function getDate(time, format) {
const formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
const returnArr = [];
const date = new Date(time);
returnArr.push(date.getFullYear());
returnArr.push(formatNumber(date.getMonth() + 1));
returnArr.push(formatNumber(date.getDate()));
returnArr.push(formatNumber(date.getHours()));
returnArr.push(formatNumber(date.getMinutes()));
returnArr.push(formatNumber(date.getSeconds()));
for (const i in returnArr) {
format = format.replace(formateArr[i], returnArr[i]);
}
return format;
}
function getDateDiff(time) {
let r = '';
const ft = new Date(time);
const nt = new Date();
const nd = new Date(nt);
nd.setHours(23);
nd.setMinutes(59);
nd.setSeconds(59);
nd.setMilliseconds(999);
const d = parseInt((nd - ft) / 86400000);
switch (true) {
case d === 0:
const t = parseInt(nt / 1000) - parseInt(ft / 1000);
switch (true) {
case t < 60:
r = '刚刚';
break;
case t < 3600:
r = parseInt(t / 60) + '分钟前';
break;
default:
r = parseInt(t / 3600) + '小时前';
}
break;
case d === 1:
r = '昨天';
break;
case d === 2:
r = '前天';
break;
case d > 2 && d < 30:
r = d + '天前';
break;
default:
r = getDate(time, 'Y-M-D');
}
return r;
}
if (!format) {
return getDateDiff(time);
} else {
return getDate(time, format);
}
},
//picker设置月份
editMonth(e) {
const arr = e.detail.value.split('-');
const year = parseInt(arr[0]);
const month = parseInt(arr[1]);
this.setMonth(year, month);
},
//上月切换按钮点击
lastMonth() {
const lastMonth = new Date(this.selectDay.year, this.selectDay.month - 2);
const year = lastMonth.getFullYear();
const month = lastMonth.getMonth() + 1;
this.setMonth(year, month);
},
//下月切换按钮点击
nextMonth() {
const nextMonth = new Date(this.selectDay.year, this.selectDay.month);
const year = nextMonth.getFullYear();
const month = nextMonth.getMonth() + 1;
this.setMonth(year, month);
},
//设置月份
setMonth(setYear, setMonth, setDay) {
if (this.selectDay.year !== setYear || this.selectDay.month !== setMonth) {
const day = Math.min(new Date(setYear, setMonth, 0).getDate(), this.selectDay.day);
const time = new Date(setYear, setMonth - 1, setDay ? setDay : day);
const data = {
selectDay: {
year: setYear,
month: setMonth,
day: setDay ? setDay : day,
dateString: this.formatTime(time, 'Y-M-D')
}
};
if (!setDay) {
data.open = true;
}
this.setData(data);
this.dateInit(setYear, setMonth);
this.setSpot();
this.$emit('change', {
detail: this.selectDay
});
}
},
//展开收起
openChange() {
this.setData({
open: !this.open
});
this.$emit('aaa', {
detail: {
a: 0
}
});
this.dateInit();
this.setSpot();
},
//设置日历底下是否展示小圆点
setSpot() {
const timeArr = this.spot.map((item) => {
return this.formatTime(item, 'Y-M-D');
});
this.dateList.forEach((item) => {
if (timeArr.indexOf(item.dateString) !== -1) {
item.spot = true;
} else {
item.spot = false;
}
});
this.setData({
dateList: this.dateList
});
},
//日历主体的渲染方法
dateInit(setYear = this.selectDay.year, setMonth = this.selectDay.month) {
let dateList = []; //需要遍历的日历数组数据
let now = new Date(setYear, setMonth - 1); //当前月份的1号
let startWeek = now.getDay(); //目标月1号对应的星期
let dayNum = new Date(setYear, setMonth, 0).getDate(); //当前月有多少天
let forNum = Math.ceil((startWeek + dayNum) / 7) * 7; //当前月跨越的周数
if (this.open) {
//展开状态，需要渲染完整的月份
for (let i = 0; i < forNum; i++) {
const now2 = new Date(now);
now2.setDate(i - startWeek + 1);
let obj = {};
obj = {
day: now2.getDate(),
month: now2.getMonth() + 1,
year: now2.getFullYear(),
dateString: this.formatTime(now2, 'Y-M-D')
};
dateList[i] = obj;
}
} else {
//非展开状态，只需要渲染当前周
for (let i = 0; i < 7; i++) {
const now2 = new Date(now); //当前周的7天
now2.setDate(Math.ceil((this.selectDay.day + startWeek) / 7) * 7 - 6 - startWeek + i);
let obj = {};
obj = {
day: now2.getDate(),
month: now2.getMonth() + 1,
year: now2.getFullYear(),
dateString: this.formatTime(now2, 'Y-M-D')
};
dateList[i] = obj;
}
}
this.setData({
dateList: dateList,
calendarMainHeight:(dateList.length / 7) * 72
});
},
//一天被点击时
selectChange(e) {
const year = e.currentTarget.dataset.year;
const month = e.currentTarget.dataset.month;
const day = e.currentTarget.dataset.day;
const dateString = e.currentTarget.dataset.dateString;
const selectDay = {
year: year,
month: month,
day: day,
dateString: dateString
};
if (this.selectDay.year !== year || this.selectDay.month !== month) {
this.setMonth(year, month, day);
} else {
if (this.selectDay.day !== day) {
this.setData({
selectDay: selectDay
});
this.$emit('change', {
detail: this.selectDay
});
}
}
}
},
beforeMount() {
let now = this.defaultTime ? new Date(this.defaultTime) : new Date();
let selectDay = {
year: now.getFullYear(),
month: now.getMonth() + 1,
day: now.getDate(),
dateString: this.formatTime(now, 'Y-M-D')
};
this.setMonth(selectDay.year, selectDay.month, selectDay.day);
},
watch: {
spot: {
handler: function (spot) {
this.setSpot();
},
immediate: true,
deep: true
}
}
};
</script>
<style>
@font-face {
font-family: 'iconfont';
/* IE9 */
src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAL8AAsAAAAABxQAAAKvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqBVIFEATYCJAMQCwoABCAFhG0HQhswBsgekiRFQgQU8AMAmmCIh3/HXu9L8hFVWwXoyALpqqoqwAEfD6g66abEPBux/13TPwBUeZ0lAldI75LS0ctlzLY8NwVk3NQm5Co3lqhaWPE+z+X0pi+Q1bez3MZatCYtPuoFGAcU4F7UiyIroBPkltpFHBi88q89JtA0p1jEYe/wNMQryKpAPHbYMMT3CooStetCdeZgEd9U1NPX9ADgQf8+/kFlxJNUMrLx5LpHhPaf+GUsavP/JpxJQpHgHq8gYx0oxO1s41yUiMQoTWOibQN1dYmf+Dn0MhYO2zgfttC/PEKSiSrS3QabXjPzE3ON4GdII/FrrEsGhPjr/dYGcOyzM56gg6PM1BXvcbZIxY7zzRyS4znJs/m2VmjuRNq9edF1kcx9FbW85/nRgbXX6s5q/AX+vsGh/kBhUUHAYszwFx4acaAA6l7k9bgjo8Vbue4acDcbCqFqcBru+htf4l/I4EnzzQAa8lT+kNoAyG/TJuTdyDcsG+NB4r05rfm73irgx/jRrw4XMB+gyga24dQGHCqlg8RKyZ3cWuWLEWhFQlMTmOwwFLrCPwH3E+omB/I1sy2yunmysOuoaNlEVd0Omtb0HW8ZYaJEaWDVnoPQd4ek6zuyvkeysE+omPpCVT+i0HQaWRe2LIYjsYsRzImIrEvIIagKZQmeaHoniW1Owqzr0NIsYbqjjCpKy4ftPqIQdsUWfd5WyTlFlKky6nWeI5KkIo2pTiLwUjvnWmNZGZ37UKmgypDoAENgHCFCrJYgDgKVgsrxXOLo+5MImzkSjK3oFuazCEbnmB6pUKocQPZ5FZDuV97RzbOpxHEUQjEqGdLrzCMkEhWizc9zIgRcKfuBmqZRGR1Fod7S5/3yH56AJnJDiRQ5SlRU3yhUlcRoMStek/ASdUgSAAA=')
format('woff2');
/* iOS 4.1- */
}
.iconfont {
font-family: 'iconfont' !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 1;
font-weight: normal;
}
.icon-unfold:before {
content: '\e661';
}
.icon-fold:before {
content: '\e6de';
}
.icon-playfill:before {
content: '\e74f';
}
.flex {
display: flex;
justify-content: space-between;
align-items: center;
}
.direction-column {
flex-direction: column;
}
.flex1 {
flex: 1;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.flex-start {
display: flex;
justify-content: flex-start;
align-items: center;
}
.flex-end {
display: flex;
justify-content: flex-end;
align-items: center;
}
.flex-around {
display: flex;
justify-content: space-around;
align-items: center;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.align-stretch {
align-items: stretch;
}
.calendar {
background-color: #fff;
}
.calendar .title {
font-size: 40rpx;
color: #333;
padding: 30rpx;
line-height: 60rpx;
}
.calendar .title .year-month {
margin-right: 20rpx;
}
.calendar .title .icon {
padding: 0 16rpx;
font-size: 32rpx;
color: #999;
}
.calendar .title .open {
background-color: #f6f6f6;
color: #999;
font-size: 22rpx;
line-height: 36rpx;
border-radius: 18rpx;
padding: 0 14rpx;
}
.calendar .calendar-week {
line-height: 40rpx;
padding: 0 25rpx;
font-size: 28rpx;
color: #999;
}
.calendar .calendar-week .view {
width: 100rpx;
text-align: center;
}
.calendar .calendar-main {
padding: 30rpx 25rpx;
transition: height 0.3s;
align-content: flex-start;
overflow: hidden;
}
.calendar .calendar-main .day {
position: relative;
width: 100rpx;
color: #666;
text-align: center;
height: 72rpx;
}
.calendar .calendar-main .day .bg {
height: 56rpx;
line-height: 56rpx;
font-size: 28rpx;
color: #333;
font-weight: bold;
}
.calendar .calendar-main .day .select {
width: 56rpx;
border-radius: 50%;
text-align: center;
color: #fff;
background: linear-gradient(-60deg, #0fdac5, #1bc7b0);
box-shadow: 0px 5px 16px 0px #c6f3ed;
margin: 0 auto;
}
.calendar .calendar-main .day .other-month {
color: #ccc;
}
.calendar .calendar-main .day .spot {
width: 8rpx;
height: 8rpx;
background-color: #1dcdb8;
border-radius: 50%;
margin: 6rpx auto 0;
}
</style>

166
src/components/modal/modal.vue
Unescape View File

@ -0,0 +1,166 @@
<template>
<view class="mask" v-if="showClone" @tap="clickMask">
<view class="modal-content">
<scroll-view scroll-y class="main-content">
<view class="title" v-if="title">{{ title }}</view>
<slot></slot>
</scroll-view>
<view v-if="showCancel" class="modal-btn-wrapper">
<button class="cancel-btn" style="color: rgba(7, 17, 27, 0.6)" @tap="cancel">{{ cancelButtonText }}</button>
<button class="confirm-btn" style="color: #13b5f5" :open-type="confirmButtonOpenType" @getphonenumber="onGetPhoneNumber" @tap="confirm">
{{ confirmButtonText }}
</button>
</view>
<view v-else class="modal-btn-wrapper">
<button class="confirm-btn" style="color: #13b5f5" @tap="confirm">{{ confirmButtonText }}</button>
</view>
</view>
</view>
</template>
<script>
/**
* 自定义modal浮层
* 使用方法：
* <modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
<view>你自己需要展示的内容</view>
</modal>
属性说明：
show： 控制modal显示与隐藏
height：modal的高度
bindcancel：点击取消按钮的回调函数
bindconfirm：点击确定按钮的回调函数
使用模块：
场馆 -> 发布 -> 选择使用物品
*/
export default {
name:'modal',
data() {
return {};
},
/**
* 组件的属性列表
*/
props: {
//是否显示modal
show: {
type: Boolean,
default: false
},
title: {
type: String,
default: null
},
cancelButtonText: {
type: String,
default: '取消'
},
confirmButtonText: {
type: String,
default: '确定'
},
showCancel: {
type: Boolean,
default: false
},
confirmButtonOpenType: String
},
/**
* 组件的方法列表
*/
methods: {
clickMask() {
// this.setData({show: false})
},
cancel() {
this.setData({
showClone: false
});
this.$emit('cancel');
},
onGetPhoneNumber: function (event) {
this.$emit('getphonenumber', {
detail: event.detail
});
},
confirm() {
this.setData({
showClone: false
});
this.$emit('confirm');
}
},
watch: {
show: {
handler: function (newVal, oldVal) {
this.showClone = newVal;
},
immediate: true
}
}
};
</script>
<style>
.mask {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.4);
z-index: 2229999;
}
.title {
margin: 40rpx 0 20rpx 0;
text-align: center;
font-size: 16px;
font-weight: 500;
color: #3a3a3a;
}
.modal-content {
display: flex;
flex-direction: column;
width: 90%;
/* height: 80%; */
background-color: #fff;
border-radius: 10rpx;
position: fixed;
}
.modal-btn-wrapper {
display: flex;
flex-direction: row;
height: 100rpx;
line-height: 100rpx;
border-top: 2rpx solid rgba(7, 17, 27, 0.1);
}
.cancel-btn,
.confirm-btn {
flex: 1;
height: 100rpx;
line-height: 100rpx;
text-align: center;
font-size: 32rpx;
background: #fff;
}
.cancel-btn {
border-right: 2rpx solid rgba(7, 17, 27, 0.1);
}
.main-content {
flex: 1;
height: 100%;
overflow-y: hidden;
}
</style>

121
src/components/popup/popup.vue
Unescape View File

@ -0,0 +1,121 @@
<template>
<view class="half-screen">
<!--屏幕背景变暗的背景 -->
<view class="background_screen" @tap="hideModal" v-if="showModalStatus"></view>
<!--弹出框 -->
<scroll-view scroll-y :animation="animationData" class="attr_box boxClass" v-if="showModalStatus">
<slot />
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
//弹窗显示控制
showModalStatus: false,
animationData: ''
};
},
/**
* 组件的属性列表
*/
props: {
title: {
type: String,
default: '标题'
}
},
externalClasses: ['boxClass'],
/**
* 组件的方法列表
*/
methods: {
//点击显示底部弹出
changeRange: function () {
this.showModal();
},
onClose() {
this.hideModal();
},
//底部弹出框
showModal: function () {
// 背景遮罩层
var animation = uni.createAnimation({
duration: 200,
timingFunction: 'linear',
delay: 0
}); //this.animation = animation
animation.translateY(300).step();
this.setData({
animationData: animation.export(),
showModalStatus: true
});
setTimeout(
function () {
animation.translateY(0).step();
this.setData({
animationData: animation.export()
});
}.bind(this),
200
);
},
//点击背景面任意一处时，弹出框隐藏
hideModal: function () {
//弹出框消失动画
var animation = uni.createAnimation({
duration: 200,
timingFunction: 'linear',
delay: 0
}); //this.animation = animation
animation.translateY(300).step();
this.setData({
animationData: animation.export()
});
setTimeout(
function () {
animation.translateY(0).step();
this.setData({
animationData: animation.export(),
showModalStatus: false
});
}.bind(this),
200
);
}
}
};
</script>
<style>
/*使屏幕变暗 */
.background_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.2;
overflow: hidden;
z-index: 1000;
color: #fff;
}
/*对话框 */
.attr_box {
width: 100%;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
z-index: 2000;
background: #fff;
border-radius: 32rpx 32rpx 0 0;
}
</style>

232
src/components/stepper/stepper.vue
Unescape View File

@ -0,0 +1,232 @@
<template>
<view class="cl-stepper" :data-index="index">
<view :class="'cl-stepper__minus ' + (disabled || min >= value ? 'cl-stepper__minus--disabled' : '')" @tap="reduce"></view>
<input type="number" :disabled="inputDisabled" class="cl-stepper__input" @blur="blur" :value="value" />
<view :class="'cl-stepper__plus ' + (disabled || value >= max ? 'cl-stepper__minus--disabled' : '')" @tap="plus"></view>
</view>
</template>
<script>
export default {
data() {
return {};
},
props: {
value: {
type: Number,
default: 0
},
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 10000
},
step: {
type: Number,
default: 1
},
disabled: {
type: Boolean,
default: false
},
inputDisabled: {
type: Boolean,
default: true
},
index: {
type: Number,
default: 0
}
},
methods: {
//通过step属性设置每次点击增加或减少按钮时变化的值，默认为1
getScale() {
let scale = 1;
if (this.step != parseInt(this.step)) {
//微信小程序的小数计算会出现偏差导致产生很长的无限循环的数，在这块处理一下。
scale = Math.pow(10, (this.step + '').split('.')[1].length);
}
return scale;
},
//输入操作处理
blur: function (e) {
let value = e.detail.value;
if (value) {
value = +value;
if (value > this.max) {
value = this.max;
} else {
if (value < this.min) {
value = this.min;
}
}
} else {
value = this.min;
}
if (value != this.value) {
this.setData({
valueClone: value
});
}
this.handleChange(value, 'blur');
},
calcNum: function (type) {
if (this.disabled) {
return;
}
const scale = this.getScale();
let num = this.value * scale;
let step = this.step * scale;
if (type === 'reduce') {
num -= step;
} else {
if (type === 'plus') {
num += step;
}
}
let value = num / scale;
if (type === 'plus' && value < this.min) {
value = this.min;
} else {
if (type === 'reduce' && value > this.max) {
value = this.max;
}
}
if (value < this.min || value > this.max) {
return;
}
this.handleChange(value, type);
},
//增加按钮处理
plus: function () {
this.calcNum('plus');
},
//减少按钮处理
reduce: function () {
this.calcNum('reduce');
},
//事件绑定，返回值有三个，value:值 type:类型（输入，增加，减少） index（当前组件的索引）
handleChange(value, type) {
if (this.disabled) {
return;
}
this.$emit('change', {
detail: {
value: value,
type: type,
index: this.index
}
});
}
},
};
</script>
<style>
.cl-stepper {
font-size: 0;
}
.cl-stepper__minus,
.cl-stepper__plus {
position: relative;
display: inline-block;
box-sizing: border-box;
margin: 0;
padding: 0;
vertical-align: middle;
border: 0;
background-color: #f7f8fa;
color: #666;
width: 42rpx;
height: 42rpx;
border-radius: 10rpx;
}
.cl-stepper__minus:before,
.cl-stepper__plus:before {
width: 10px;
height: 2px;
}
.cl-stepper__minus:after,
.cl-stepper__plus:after {
width: 2px;
height: 10px;
}
.cl-stepper__minus:after,
.cl-stepper__minus:before,
.cl-stepper__plus:after,
.cl-stepper__plus:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background-color: currentColor;
content: '';
}
.cl-stepper__minus:active,
.cl-stepper__plus:active {
background-color: #e5e5e5;
}
.cl-stepper__minus--disabled,
.cl-stepper__plus--disabled {
color: #b2b2b2;
background-color: #f7f8fa;
}
.cl-stepper__minus--disabled,
.cl-stepper__minus--disabled.cl-stepper__minus--hover,
.cl-stepper__minus--disabled.cl-stepper__plus--hover,
.cl-stepper__plus--disabled,
.cl-stepper__plus--disabled.cl-stepper__minus--hover,
.cl-stepper__plus--disabled.cl-stepper__plus--hover {
background-color: #f7f8fa;
}
.cl-stepper__minus:after {
display: none;
}
.cl-stepper__input {
display: inline-block;
box-sizing: border-box;
min-height: 0;
margin: 1px;
padding: 1px;
text-align: center;
vertical-align: middle;
border: 0;
border-width: 1px 0;
border-radius: 0;
-webkit-appearance: none;
font-size: 14px;
color: #333333;
width: 32px;
height: 28px;
}
.cl-stepper__input--disabled {
color: #c8c9cc;
background-color: #f2f3f5;
}
</style>

85
src/components/u-modal-extra/props.js
Unescape View File

@ -0,0 +1,85 @@
export default {
props: {
// 是否展示modal
show: {
type: Boolean,
default: uni.$u.props.modal.show
},
// 标题
title: {
type: [String],
default: uni.$u.props.modal.title
},
// 弹窗内容
content: {
type: String,
default: uni.$u.props.modal.content
},
// 确认文案
confirmText: {
type: String,
default: uni.$u.props.modal.confirmText
},
// 取消文案
cancelText: {
type: String,
default: uni.$u.props.modal.cancelText
},
// 是否显示确认按钮
showConfirmButton: {
type: Boolean,
default: uni.$u.props.modal.showConfirmButton
},
// 是否显示取消按钮
showCancelButton: {
type: Boolean,
default: uni.$u.props.modal.showCancelButton
},
// 确认按钮颜色
confirmColor: {
type: String,
default: uni.$u.props.modal.confirmColor
},
// 取消文字颜色
cancelColor: {
type: String,
default: uni.$u.props.modal.cancelColor
},
// 对调确认和取消的位置
buttonReverse: {
type: Boolean,
default: uni.$u.props.modal.buttonReverse
},
// 是否开启缩放效果
zoom: {
type: Boolean,
default: uni.$u.props.modal.zoom
},
// 是否异步关闭，只对确定按钮有效
asyncClose: {
type: Boolean,
default: uni.$u.props.modal.asyncClose
},
// 是否允许点击遮罩关闭modal
closeOnClickOverlay: {
type: Boolean,
default: uni.$u.props.modal.closeOnClickOverlay
},
// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
negativeTop: {
type: [String, Number],
default: uni.$u.props.modal.negativeTop
},
// modal宽度，不支持百分比，可以数值，px，rpx单位
width: {
type: [String, Number],
default: uni.$u.props.modal.width
},
// 确认按钮的样式，circle-圆形，square-方形，如设置，将不会显示取消按钮
confirmButtonShape: {
type: String,
default: uni.$u.props.modal.confirmButtonShape
},
confirmButtonOpenType: String
}
}

207
src/components/u-modal-extra/u-modal-extra.vue
Unescape View File

@ -0,0 +1,207 @@
<template>
<u-popup mode="center" :zoom="zoom" :show="show" :customStyle="{
borderRadius: '6px',
overflow: 'hidden',
marginTop: `-${$u.addUnit(negativeTop)}`
}" :closeOnClickOverlay="closeOnClickOverlay" :safeAreaInsetBottom="false" :duration="400" @click="clickHandler">
<view class="u-modal" :style="{
width: $u.addUnit(width),
}">
<text class="u-modal__title" v-if="title">{{ title }}</text>
<view class="u-modal__content" :style="{
paddingTop: `${title ? 12 : 25}px`
}">
<slot>
<text class="u-modal__content__text">{{ content }}</text>
</slot>
</view>
<view class="u-modal__button-group--confirm-button" v-if="$slots.confirmButton">
<slot name="confirmButton"></slot>
</view>
<template v-else>
<u-line></u-line>
<view class="u-modal__button-group" :style="{
flexDirection: buttonReverse ? 'row-reverse' : 'row'
}">
<button class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
style=" background: #fff;border: none;border-left: 1px solid #e3e3e3;" :hover-stay-time="150"
hover-class="u-modal__button-group__wrapper--hover"
:class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
v-if="showCancelButton" @tap="cancelHandler">
<text class="u-modal__button-group__wrapper__text" :style="{
color: cancelColor
}">{{ cancelText }}</text>
</button>
<u-line direction="column" v-if="showConfirmButton && showCancelButton"></u-line>
<!-- #ifndef MP-ALIPAY -->
<button class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
style=" background: #fff;border: none;" :hover-stay-time="150"
hover-class="u-modal__button-group__wrapper--hover"
:class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
v-if="showConfirmButton" :open-type="confirmButtonOpenType" @getphonenumber="onGetPhoneNumber"
@tap="confirmHandler">
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<button class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
style=" background: #fff;border: none;" :hover-stay-time="150"
hover-class="u-modal__button-group__wrapper--hover"
:class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
v-if="showConfirmButton" open-type="getAuthorize" @getAuthorize="onGetPhoneNumber"
onError="onAuthError" scope='phoneNumber' @tap="confirmHandler">
<!-- #endif -->
<u-loading-icon v-if="loading"></u-loading-icon>
<text v-else class="u-modal__button-group__wrapper__text" :style="{
color: confirmColor
}">{{ confirmText }}</text>
</button>
</view>
</template>
</view>
</u-popup>
</template>
<script>
import props from './props.js';
/**
* Modal 模态框
* @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
* @tutorial https://www.uviewui.com/components/modul.html
* @property {Boolean} show 是否显示模态框，请赋值给show （默认 false ）
* @property {String} title 标题内容
* @property {String} content 模态框内容，如传入slot内容，则此参数无效
* @property {String} confirmText 确认按钮的文字 （默认 '确认' ）
* @property {String} cancelText 取消按钮的文字 （默认 '取消' ）
* @property {Boolean} showConfirmButton 是否显示确认按钮 （默认 true ）
* @property {Boolean} showCancelButton 是否显示取消按钮 （默认 false ）
* @property {String} confirmColor 确认按钮的颜色 （默认 '#2979ff' ）
* @property {String} cancelColor 取消按钮的颜色 （默认 '#606266' ）
* @property {Boolean} buttonReverse 对调确认和取消的位置 （默认 false ）
* @property {Boolean} zoom 是否开启缩放模式 （默认 true ）
* @property {Boolean} asyncClose 是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭Modal （默认 false ）
* @property {String | Number} negativeTop 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
* @property {String | Number} width modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
* @property {String} confirmButtonShape 确认按钮的样式,如设置，将不会显示取消按钮
* @event {Function} confirm 点击确认按钮时触发
* @event {Function} cancel 点击取消按钮时触发
* @event {Function} close 点击遮罩关闭出发，closeOnClickOverlay为true有效
* @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
*/
export default {
name: 'uModalExtra',
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
data() {
return {
loading: false
}
},
watch: {
show(n) {
// 为了避免第一次打开modal，又使用了异步关闭的loading
// 第二次打开modal时，loading依然存在的情况
if (n && this.loading) this.loading = false
}
},
methods: {
// 点击确定按钮
confirmHandler() {
// 如果配置了异步关闭，将按钮值为loading状态
if (this.asyncClose) {
this.loading = true;
}
this.$emit('confirm')
},
// 点击取消按钮
cancelHandler() {
this.$emit('cancel')
},
// 点击遮罩
// 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩
// 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中
// 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
// 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
clickHandler() {
if (this.closeOnClickOverlay) {
this.$emit('close')
}
},
onGetPhoneNumber: function(event) {
this.$emit('getphonenumber', {
detail: event.detail
});
},
onGetAuthorize: function(event) {
this.$emit('onGetAuthorize', {
detail: event.detail
});
},
}
}
</script>
<style lang="scss" scoped>
$u-modal-border-radius: 6px;
.u-modal {
width: 650rpx;
border-radius: $u-modal-border-radius;
overflow: hidden;
&__title {
font-size: 16px;
font-weight: bold;
color: $u-content-color;
text-align: center;
padding-top: 25px;
}
&__content {
padding: 12px 25px 25px 25px;
@include flex;
justify-content: center;
&__text {
font-size: 15px;
color: $u-content-color;
flex: 1;
}
}
&__button-group {
@include flex;
&--confirm-button {
flex-direction: column;
padding: 0px 25px 15px 25px;
}
&__wrapper {
flex: 1;
@include flex;
justify-content: center;
align-items: center;
height: 48px;
&--confirm,
&--only-cancel {
border-bottom-right-radius: $u-modal-border-radius;
}
&--cancel,
&--only-confirm {
border-bottom-left-radius: $u-modal-border-radius;
}
&--hover {
background-color: $u-bg-color;
}
&__text {
color: $u-content-color;
font-size: 16px;
text-align: center;
}
}
}
}
</style>

145
src/config.js
Unescape View File

@ -0,0 +1,145 @@
const router_list = [
{
id: 1,
router_name: "pages/index/index/index",
},
{
id: 2,
router_name: "pages/user/login/login",
},
{
id: 3,
router_name: "pages/user/user_index/user",
},
{
id: 4,
router_name: "pages/opera/activity_topics/topics",
},
{
id: 5,
router_name: "pages/make_order/choose_sit/choose_sit",
},
{
id: 6,
router_name: "pages/make_order/coupon/coupon",
},
{
id: 7,
router_name: "pages/opera/opera/opera_IP",
},
{
id: 8,
router_name: "pages/user/my_show/finished_show/finished_show",
},
{
id: 9,
router_name: "pages/user/my_show/wanted_show/wanted_show",
},
{
id: 10,
router_name: "pages/user/my_order/my_order",
},
{
id: 11,
router_name: "pages/user/order_detail/order_detail",
},
{
id: 12,
router_name: "pages/opera/IP_more/IP_more",
},
{
id: 13,
router_name: "pages/opera/IP_detail/IP_detail",
},
{
id: 14,
router_name: "pages/make_order/make_order/make_order",
},
{
id: 15,
router_name: "pages/make_order/random_sit/random_sit",
},
{
id: 16,
router_name: "pages/opera/show/show_detail",
},
{
id: 17,
router_name: "pages/index/search/search",
},
{
id: 18,
router_name: "pages/user/invoice/invoice_index/invoice_index",
},
{
id: 19,
router_name: "pages/user/invoice/invoice_edit/invoice_edit_newMake",
},
{
id: 20,
router_name: "pages/user/invoice/invoice_edit/invoice_edit_content",
},
{
id: 21,
router_name: "pages/user/invoice/invoice_edit/invoice_edit",
},
{
id: 22,
router_name: "pages/user/invoice/invoice_history/invoice_history",
},
{
id: 23,
router_name: "pages/user/invoice/my_invoice/my_invoice",
},
{
id: 24,
router_name: "pages/user/invoice/make_invoice/make_invoice",
},
{
id: 25,
router_name: "pages/user/discount/discount/discount",
},
{
id: 26,
router_name: "pages/user/discount/coupons/coupons",
},
{
id: 27,
router_name: "pages/user/discount/discount_ex/discount_ex",
},
{
id: 28,
router_name: "pages/user/discount/discount_avilable/discount_avilable",
},
{
id: 29,
router_name: "pages/user/auto_service/auto_service",
},
{
id: 30,
router_name: "pages/user/wallet/wallet/wallet",
},
{
id: 31,
router_name: "pages/user/wallet/code_exchange/code_exchange",
},
{
id: 32,
router_name: "pages/user/viewer_list/viewer_list",
},
{
id: 33,
router_name: "pages/index/calendar/calendar",
},
{
id: 34,
router_name: "pages/index/city/selectcity"
},
]
module.exports = {
router_list
}

23
src/main.js
Unescape View File

@ -0,0 +1,23 @@
import Vue from 'vue'
import App from './App'
// Api函数polyfill（目前为实验版本，如不需要，可删除！）';
import Polyfill from './polyfill/polyfill';
Polyfill.init();
// 全局mixins，用于实现setData等功能，请勿删除！';
import Mixin from './polyfill/mixins';
Vue.mixin(Mixin);
// uView引入
import uView from "uview-ui";
Vue.use(uView);
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()

84
src/manifest.json
Unescape View File

@ -0,0 +1,84 @@
{
"name" : "kxmh-xhs",
"appid" : "__UNI__4631F68",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
"app-plus" : {
/* 5+App特有相关 */
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
"modules" : {},
/* 模块配置 */
"distribute" : {
/* 应用发布信息 */
"android" : {
/* android打包配置 */
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
"ios" : {},
/* ios打包配置 */
"sdkConfigs" : {}
}
},
/* SDK配置 */
"quickapp" : {},
/* 快应用特有相关 */
"mp-weixin" : {
/* 微信小程序特有相关 */
"appid" : "wx35bc60d481961c1d",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"mp-qq" : {
"usingComponents" : true
},
"mp-xhs" : {
"usingComponents" : true,
"appid" : "63427b653abf67000102aea8"
},
"locale" : "auto",
"fallbackLocale" : "en"
}

109
src/page-extend.js
Unescape View File

@ -0,0 +1,109 @@
/**
*
* Page扩展函数
*
* @param {*} Page 原生Page
*/
import { http, httpUtil, getRouter, location_city } from './utils/util';
const pageExtend = (Page) => {
return (object) => {
// 导出原生Page传入的object参数中的生命周期函数
// 由于命名冲突，所以将onLoad生命周期函数命名成了onLoaded
const { onLoad } = object; // 公共的onLoad生命周期函数
object.onLoad = function (options) {
if (uni.getStorageSync('xid')) {
('');
} else {
this.getxid();
}
if (!getApp().globalData.city_id) {
location_city().then((res) => {
this.getroutermi(options, res.city_info.city_id);
});
} else {
this.getroutermi(options, getApp().globalData.city_id);
} // 在onLoad中执行的代码
console.log(getCurrentPages()[getCurrentPages().length - 1].route, '拦截页面参数：');
console.log(options);
if (options.cps) {
let cps = uni.getStorageSync('cps') || null;
if (cps == null || options.cps !== cps.value) {
let vTime = new Date().getTime() + 1000 * 60 * 60 * 24 * 2;
let cps = Object.assign(
{
value: options.cps
},
{
vTime: vTime
}
);
if (getApp().globalData.uid) {
http('/api/v1/save-cps', 'get', {
cps: options.cps,
route: getCurrentPages()[getCurrentPages().length - 1].route
}).then((res) => {
uni.setStorageSync('cps', cps);
});
} else {
httpUtil('/api/v1/save-cps', 'get', {
cps: options.cps,
route: getCurrentPages()[getCurrentPages().length - 1].route
}).then((res) => {
uni.setStorageSync('cps', cps);
});
}
}
} // 执行onLoaded生命周期函数
if (typeof onLoad === 'function') {
onLoad.call(this, options);
}
};
object.getroutermi = function (option, cityId) {
let xid = uni.getStorageSync('xid');
if (new Date().getTime() > xid.substring(0, xid.length - 4) - 0 + 1200000) {
this.getxid();
}
let action_id = getRouter(getCurrentPages()[getCurrentPages().length - 1].route);
if (action_id == 34) {
option = [];
} else {
('');
}
let data = {
xid: uni.getStorageSync('xid'),
action_id: getRouter(getCurrentPages()[getCurrentPages().length - 1].route),
city_id: cityId - 0,
mini_type: 1,
...option
};
http('/api/v1/user-behavior', 'post', data).then((res) => {
console.log(res, 'res');
});
};
object.getxid = function () {
// console.log(new Date().getTime(),'min');
// console.log(new Date().getTime()+(Math.floor(Math.random()*(9999-1000))+1000).toString(),'min');
let xid = new Date().getTime() + (Math.floor(Math.random() * (9999 - 1000)) + 1000).toString();
uni.setStorageSync('xid', xid);
};
return Page(object);
};
}; // 获取原生Page
const originalPage = Page; // 定义一个新的Page，将原生Page传入Page扩展函数
Page = pageExtend(originalPage);

268
src/pages.json
Unescape View File

@ -0,0 +1,268 @@
{
"easycom": {
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
},
"pages": [
{
"path": "pages/index/index/index",
"style": {
"enablePullDownRefresh": false,
"mp-alipay": {
"allowsBounceVertical": "NO"
}
}
},
{
"path": "pages/user/login/login",
"style": {
"navigationBarTitleText": "开心麻花登录"
}
},
{
"path": "pages/opera/activity_topics/topics",
"style": {}
},
{
"path": "pages/user/user_index/user",
"style": {
"navigationBarTitleText": "个人中心",
"navigationStyle": "custom",
"disableScroll": true,
"transparentTitle": "auto"
}
},
{
"path": "pages/user/order_detail/order_detail",
"style": {
"navigationBarTitleText": "订单详情"
}
},
{
"path": "pages/user/my_order/my_order",
"style": {
"navigationBarTitleText": "我的订单"
}
},
{
"path": "pages/make_order/random_sit/random_sit",
"style": {
"navigationBarTitleText": "选择票档",
"enablePullDownRefresh": false
}
},
{
"path": "pages/make_order/make_order/make_order",
"style": {
"navigationBarTitleText": "确认订单",
"enablePullDownRefresh": false
}
},
{
"path": "pages/make_order/choose_sit/choose_sit",
"style": {
"navigationBarTitleText": "选择座位",
"enablePullDownRefresh": false,
"mp-alipay": {
"allowsBounceVertical": "NO"
}
}
},
{
"path": "pages/make_order/coupon/coupon",
"style": {
"navigationBarTitleText": "使用优惠券"
}
},
{
"path": "pages/opera/opera/opera_IP",
"style": {
}
},
{
"path": "pages/user/my_show/finished_show/finished_show",
"style": {
"navigationBarTitleText": "看过的演出"
}
},
{
"path": "pages/user/my_show/wanted_show/wanted_show",
"style": {
"navigationBarTitleText": "想看的演出"
}
},
{
"path": "pages/opera/IP_more/IP_more",
"style": {
"navigationBarTitleText": "大戏"
}
},
{
"path": "pages/opera/IP_detail/IP_detail",
"style": {}
},
{
"path": "pages/opera/show/show_detail",
"style": {
"navigationBarTitleText": "开心麻花",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/search/search",
"style": {
"navigationBarTitleText": "搜索",
"enablePullDownRefresh": false
}
},
{
"path": "pages/user/invoice/invoice_index/invoice_index",
"style": {
"navigationBarTitleText": "我的发票"
}
},
{
"path": "pages/user/invoice/invoice_edit/invoice_edit_newMake",
"style": {
"navigationBarTitleText": "新建发票抬头"
}
},
{
"path": "pages/user/invoice/invoice_edit/invoice_edit_content",
"style": {
"navigationBarTitleText": "发票抬头信息"
}
},
{
"path": "pages/user/invoice/invoice_edit/invoice_edit",
"style": {
"navigationBarTitleText": "发票抬头信息"
}
},
{
"path": "pages/user/invoice/invoice_history/invoice_history",
"style": {
"navigationBarTitleText": "开票历史"
}
},
{
"path": "pages/user/invoice/my_invoice/my_invoice",
"style": {
"navigationBarTitleText": "我的发票"
}
},
{
"path": "pages/user/invoice/make_invoice/make_invoice",
"style": {
"navigationBarTitleText": "确认开票"
}
},
{
"path": "pages/user/discount/discount/discount",
"style": {
"navigationBarTitleText": "我的优惠券"
}
},
{
"path": "pages/user/discount/coupons/coupons",
"style": {
"navigationBarTitleText": "使用优惠券"
}
},
{
"path": "pages/user/discount/discount_ex/discount_ex",
"style": {
"navigationBarTitleText": "兑换优惠券"
}
},
{
"path": "pages/user/discount/discount_avilable/discount_avilable",
"style": {
"navigationBarTitleText": "可用剧目"
}
},
{
"path": "pages/user/auto_service/auto_service",
"style": {
"navigationBarTitleText": "联系客服"
}
},
{
"path": "pages/user/viewer_list/viewer_list",
"style": {
"navigationBarTitleText": "观演人列表"
}
},
{
"path": "pages/index/calendar/calendar",
"style": {
"navigationBarTitleText": "演出日历",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/city/selectcity",
"style": {
"navigationBarTitleText": "选择城市",
"enablePullDownRefresh": false
}
},
{
"path": "pages/opera/stage/stage_photo",
"style": {
"navigationBarTitleText": "分享剧照"
}
},
{
"path": "pages/user/discount/answer_topic/answer_topic",
"style": {
"navigationBarTitleText": "测测我的本命消费人格",
"enablePullDownRefresh": false,
"disableScroll": true
}
},
{
"path": "pages/special/straddlen/new_years",
"style": {
"navigationBarTitleText": "开心麻花有笑跨年攻略"
}
}
],
"tabBar": {
"color": "#7F8389",
"selectedColor": "#FF1D42",
"backgroundColor": "#FFFFFF",
"borderStyle": "black",
"position": "bottom",
"list": [{
"iconPath": "static/images/ui/index.png",
"selectedIconPath": "static/images/ui/indexS.png",
"pagePath": "pages/index/index/index",
"text": "首页"
},
{
"iconPath": "static/images/ui/IP.png",
"selectedIconPath": "static/images/ui/IPS.png",
"pagePath": "pages/opera/opera/opera_IP",
"text": "剧目精选"
},
{
"iconPath": "static/images/ui/me.png",
"selectedIconPath": "static/images/ui/meS.png",
"pagePath": "pages/user/user_index/user",
"text": "我的"
}
]
},
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序获取城市剧场信息"
}
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "开心麻花",
"navigationBarBackgroundColor": "#ffffff"
}
}

234
src/pages/index/calendar/calendar.vue
Unescape View File

@ -0,0 +1,234 @@
<template>
<view>
<calendar @change="dateChange" :spot="spot" :defaultTime="today_"></calendar>
<view class="_title">
<view class="_icon" />
演出详情
</view>
<view class="_view">
<navigator class="list" :url="'/pages/opera/show/show_detail?cycle_id=' + item.cycle_id" v-for="(item, index) in show_today" :key="index">
<image class="img" :src="item.show_pic" />
<view class="info">
<view class="_top">
<view class="title">{{ item.show_name }}</view>
<view class="loc">{{ item.city_name }}｜{{ item.theater_name }}</view>
</view>
<view class="_bottom">
<view class="_left">
<view v-if="item.brief" class="brief">{{ item.brief }}</view>
<view class="price">
<text style="font-size: 32rpx">¥</text>
<text style="margin: 0 2rpx">{{ item.lowest_price }}</text>
<text style="font-size: 12px; color: #7b7b7b">起</text>
</view>
</view>
<view class="_right">
<view class="time" v-for="(time, index1) in item.show_time" :key="index1">
<image src="/static/images/ui/clock.png" />
<text :decode="true">&nbsp;{{ time }}</text>
</view>
</view>
</view>
</view>
</navigator>
</view>
</view>
</template>
<script>
import calendar from '@/components/calendar/calendar';
const { httpUtil, formatTime } = require('../../../utils/util'); // pages/index/calendar/calendar.js
export default {
components: {
calendar
},
data() {
return {
show_list: [],
dateString: '',
today_: null,
show_today: [],
spot: [],
time: ''
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var city_id = options.city_id;
let cur_date = new Date();
let cur_day = cur_date.getDate();
let cur_month = cur_date.getMonth() + 1;
let cur_year = cur_date.getFullYear();
let today_ = cur_year + '/' + cur_month + '/' + cur_day;
let show_today = [];
httpUtil('/api/v1/lately-show' + '?city_id=' + city_id, 'get').then((res) => {
let show_list = res.show_list;
let spot = [];
for (let item of show_list) {
let d = item.year + '/' + item.month + '/' + item.day;
if (cur_year == item.year && cur_month == item.month && cur_day == item.day) {
show_today.push(item);
}
spot.push(d);
}
spot = Array.from(new Set(spot));
that.setData({
show_list,
today_,
show_today,
spot
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
dateChange(e) {
let day = e.detail.day;
let month = e.detail.month;
let year = e.detail.year;
let show_today = [];
for (let item of this.show_list) {
if (day == item.day && month == item.month && year == item.year) {
show_today.push(item);
// break;
}
}
this.setData({
show_today
});
}
}
};
</script>
<style>
._title {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #181818;
margin-top: 40rpx;
background-color: #fff;
padding: 30rpx 0 0 30rpx;
}
._title ._icon {
width: 8rpx;
height: 36rpx;
background: #ff446b;
border-radius: 4rpx;
margin: 0 20rpx 0 0;
}
._view {
background: #fff;
}
._view .list {
display: flex;
margin: 0 30rpx;
padding: 30rpx 0;
border-bottom: 2rpx solid #dddddd;
}
._view .list .img {
width: 204rpx;
height: 306rpx;
background: #d8d8d8;
border-radius: 16rpx;
}
._view .list .info {
flex: 1;
padding: 8rpx 0 8rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
._view .list .info ._top .title {
font-size: 28rpx;
font-weight: bold;
color: #181818;
margin-bottom: 20rpx;
}
._view .list .info ._top .loc {
font-size: 20rpx;
color: #7b7b7b;
}
._view .list .info ._bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
._view .list .info ._bottom ._left .brief {
font-size: 20rpx;
color: #ff1d42;
/* line-height: 36rpx;
display: inline; */
border-radius: 8rpx;
border: 2rpx solid #ff1d42;
padding: 3rpx 10rpx;
}
._view .list .info ._bottom ._left .price {
font-size: 44rpx;
font-weight: bold;
color: #ff1d42;
margin-top: 20rpx;
margin-top: 20rpx;
}
._view .list .info ._bottom ._right image {
width: 28rpx;
height: 28rpx;
}
._view .list .info ._bottom ._right .time {
align-items: center;
display: flex;
font-size: 20rpx;
color: #181818;
padding-top: 10rpx;
}
/* #ifdef MP-ALIPAY */
._view .list .info ._bottom ._right .time text{
margin-left: 10rpx;
}
/* #endif */
</style>

1421
src/pages/index/city/city.js
View File

File diff suppressed because it is too large Load Diff

275
src/pages/index/city/selectcity.vue
Unescape View File

@ -0,0 +1,275 @@
<template>
<view>
<view class="list_con">
<text>{{ current_city }}</text>
<image src="/static/images/ui/location1.png" />
</view>
<scroll-view :scroll-y="true" :style="'height: ' + winHeight + 'px;'" :scroll-into-view="scrollTopId"
class="city_list">
<block v-for="(cityName, idx) in city" :key="idx">
<text :id="idx" class="list_tit">{{ idx }}</text>
<block v-for="(item, index) in cityName" :key="index">
<view class="list_con" :data-city="item" @tap="bindCity">{{ item.city_name }}</view>
</block>
</block>
</scroll-view>
<!--城市选择列表-->
<view class="scroll_list" @touchstart="chStart" @touchend="chEnd" @touchmove.stop.prevent="chMove"
:style="'background: rgba(0,0,0,' + trans + ');'">
<block v-for="(cityName, idx) in city" :key="idx">
<block v-if="idx != '热门城市'">
<view :id="idx" class="scroll_list_chi"
:style="'line-height:' + lineHeight + 'px ; height:' + lineHeight + 'px ;font-size:' + lineHeight / 1.7 + 'px;'"
@touchstart="getWords" @touchend="setWords">
{{ idx }}
</view>
</block>
</block>
</view>
<!--选择显示-->
<view v-if="!word_hidden" class="showwords">
{{ showwords }}
</view>
</view>
</template>
<script>
//先引用城市数据文件
var city = require('./city.js');
var lineHeight = 0;
var endWords = '';
var isNum;
export default {
data() {
return {
word_hidden: true,
current_city: '',
//获取选中的城市名
city_list: [],
city: '',
winHeight: '',
lineHeight: '',
trans: '',
scrollTopId: '',
showwords: '',
show_list: [],
swith_area: 0,
city_id: '',
cityName: []
};
},
onLoad: function(options) {
console.log(options);
if ('undefined' != options.city_list && options.city_list != "") {
var city_list = JSON.parse(options.city_list);
this.setData({
current_city: city_list.current.city_name,
city_list
});
} else {
uni.navigateBack();
} // 生命周期函数--监听页面加载
},
onReady: function() {
// 生命周期函数--监听页面初次渲染完成
//var cityChild = city.City[0];
// console.log(cityChild)
var cityChild = this.city_list.list;
var that = this;
uni.getSystemInfo({
success: function(res) {
lineHeight = (res.windowHeight - 100) / 22; // console.log(res.windowHeight - 100)
that.setData({
city: cityChild,
winHeight: res.windowHeight - 40,
lineHeight: lineHeight
});
}
});
},
onShow: function() {
// 生命周期函数--监听页面显示
},
onHide: function() {
// 生命周期函数--监听页面隐藏
},
onUnload: function() {
// 生命周期函数--监听页面卸载
},
methods: {
//触发全部开始选择
chStart: function() {
this.setData({
trans: '.3',
word_hidden: false
});
},
//触发结束选择
chEnd: function() {
this.setData({
trans: '0',
word_hidden: true,
scrollTopId: this.endWords
});
},
//获取文字信息
getWords: function(e) {
var id = e.target.id;
this.endWords = id;
isNum = id;
this.setData({
showwords: this.endWords
});
},
//设置文字信息
setWords: function(e) {
var id = e.target.id;
this.setData({
scrollTopId: id
});
},
// 滑动选择城市
chMove: function(e) {
var y = e.touches[0].clientY;
var offsettop = e.currentTarget.offsetTop;
var height = 0;
var that = this;
var cityarr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S',
'T', 'W', 'X', 'Y', 'Z'
]; // 获取y轴最大值
uni.getSystemInfo({
success: function(res) {
height = res.windowHeight - 10;
}
}); //判断选择区域,只有在选择区才会生效
if (y > offsettop && y < height) {
// console.log((y-offsettop)/lineHeight)
var num = parseInt((y - offsettop) / lineHeight);
endWords = cityarr[num]; // 这里 把endWords 绑定到this 上，是为了手指离开事件获取值
that.endWords = endWords;
} //去除重复，为了防止每次移动都赋值 ,这里限制值有变化后才会有赋值操作，
//DOTO 这里暂时还有问题，还是比较卡，待优化
if (isNum != num) {
// console.log(isNum);
isNum = num;
that.setData({
showwords: that.endWords
});
}
},
//选择城市，并让选中的值显示在文本框里
bindCity: function(e) {
var cityName = e.currentTarget.dataset.city.city_name;
var city_id = e.currentTarget.dataset.city.city_id;
var pages = getCurrentPages();
var prevPage = pages[pages.length - 2]; //上一个页面
//直接调用上一个页面的setData()方法，把数据存到上一个页面中去
prevPage.setData({
city_id
});
uni.navigateBack({})
getApp().globalData.city_id = city_id;
// uni.switchTab({
// url:'/pages/index/index/index'
// })
}
}
};
</script>
<style>
/*城市列表*/
.city_list {
position: relative;
}
/*城市选择头部*/
.list_tit {
display: block;
line-height: 80rpx;
height: 80rpx;
padding-left: 30rpx;
font-size: 32rpx;
color: #666;
}
.list_con {
height: 80rpx;
background: #ffffff;
line-height: 80rpx;
font-size: 32rpx;
padding-left: 30rpx;
}
.list_con::before {
content: ' ';
height: 2rpx;
border-top: 2rpx #f5f5f5 solid;
position: absolute;
width: 100%;
}
.list_con::before:nth-child(1) {
border: none;
}
.list_con text {
vertical-align: middle;
}
.list_con image {
width: 26rpx;
height: 32rpx;
vertical-align: middle;
}
/*城市选择 右边*/
.scroll_list {
background: rgba(0, 0, 0, 0);
position: absolute;
height: calc(100% - 100px);
width: 50rpx;
top: 180rpx;
right: 20rpx;
}
.scroll_list_chi {
/*border: 1px blue solid;*/
text-align: center;
font-size: 32rpx;
}
/*显示框*/
.showwords {
width: 160rpx;
height: 160rpx;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
line-height: 160rpx;
text-align: center;
font-size: 10vw;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
</style>

765
src/pages/index/index/index.vue
Unescape View File

@ -0,0 +1,765 @@
<template>
<view>
<!-- 开屏广告 -->
<view class="markinfo" v-if="isActionMarkShow" @touchstart="buttonStart" @touchmove.stop.prevent="buttonMove">
<view class="fiexbox">
<view class="box" @tap="onlinkurl" :data-id="screen_list.id" :data-link_url="screen_list.link_url">
<image :src="screen_list.img_url"></image>
</view>
<view class="btn" @tap.stop.prevent="cancle_mark" :data-id="screen_list.id">×</view>
</view>
</view>
<!-- 礼物弹窗 -->
<view class="surprise" @tap="advertisementMark_show" v-if="isGiftMarkShow">
<view class="img"></view>
</view>
<!-- 轮播图 -->
<view class="banner">
<swiper class="swiper" :autoplay="true" interval="2000" duration="500" previous-margin="20px"
next-margin="20px" circular @change="bindchange">
<swiper-item class="swiper_item" v-for="(item, index) in banner_list" :key="index">
<image lazy-load :class="'img ' + (swiperIdx == index ? 'active' : 'quiet')" :src="item.pic"
:data-key="item.route_path + item.key" @tap="banner_nav"></image>
<view class="shadow" />
</swiper-item>
</swiper>
<view class="indicator_dsn">
<view :class="'dot ' + (swiperIdx == index ? 'active' : 'quiet')" v-for="(item, index) in banner_list"
:key="index"></view>
</view>
</view>
<!-- 搜索栏 -->
<view class="search_area">
<view class="cal">
<image src="/static/images/ui/calendar.png" @tap="calendar_nav" />
</view>
<view class="_search">
<view class="_search1">
<text @tap="area_nav">{{ city }}</text>
<text v-if="city" style="color: #ff446b" :decode="true">&nbsp;&nbsp;｜&nbsp;&nbsp;</text>
<!-- <input placeholder="开心麻花" placeholder-style="color: #ACACAC;" bindinput="write_in" bindconfirm="search"
type="text" confirm-type="search" /> -->
<!-- <input class="input" :placeholder="placeholder" disabled placeholder-style="color: #ACACAC;"
@input="write_in" @tap="search1" type="text" confirm-type="search" /> -->
<view @tap="search1" style="flex:1;color: #ACACAC;">{{placeholder}}</view>
</view>
<image src="/static/images/ui/search.png" @tap="search1" />
</view>
</view>
<!-- 列表 -->
<view class="line">
<view :class="'topLine ' + (swith_area == index ? 'active' : ' ')" :data-index="index" @tap="swith_tab"
v-for="(item, index) in swich_space" :key="index">
{{ item }}
</view>
</view>
<view class="_list">
<view class="_demo" :data-cycle_id="item.cycle_id" @tap="show_detail" v-for="(item, index) in current_list"
:key="index">
<image :lazy-load="true" :src="item.show_pic" class="list_img" />
<view class="_ln flexC fd-col">
<view>
<view class="_ln1">
<text>{{ item.start_date }}-{{ item.end_date }}</text>
<image src="/static/images/ui/low_price.png" v-if="item.is_discount == 1" />
</view>
<view class="_ln2">
<text>{{ item.show_name }}</text>
</view>
</view>
<view class="_ln3">
<view class="_ln4">
<text style="font-size: 24rpx; color: #ff1d42">¥</text>
<text
style="font-size: 36rpx; font-weight: bold; color: #ff1d42; margin: 0 2rpx">{{ item.lowest_price }}</text>
<text style="font-size: 20rpx; color: #7b7b7b">起</text>
</view>
<button class="_detail" :data-cycle_id="item.cycle_id">详情</button>
</view>
</view>
</view>
</view>
<view class="more" v-if="no_more">别滑了，已经到底啦～</view>
</view>
</template>
<script>
// pages/index/index.js
import {
httpUtil,
location_city
} from '../../../utils/util';
export default {
data() {
return {
latitude: '',
longitude: '',
city: '',
swiperIdx: 0,
swith_area: 0,
swich_space: ['综合排序', '近期上演', '限时钜惠'],
screen_list: [], //开屏广告信息
// screen_imgUrl: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61382ab58bf84d41d8cd98f00b204e9800998ecf8427e.jpg',
isActionMarkShow: false, //开屏广告
isGiftMarkShow: false, //首页弹窗
show: true,
show_list: [{
sort_type: '1',
list: 'newMake',
page: '1',
has_more: 'false'
},
{
sort_type: '2',
list: 'newMake',
page: '1',
has_more: 'false'
},
{
sort_type: '3',
list: 'newMake',
page: '1',
has_more: 'false'
}
],
current_list: '',
no_more: '',
keyword: '',
banner_list: '',
placeholder: '',
city_list: null,
city_id: ''
};
},
onLoad: function(options) {
if (!getApp().globalData.city_id) {
// 默认北京写法
//location_city("beijing").then(res=>{
location_city().then((res) => {
var city = res.city_info.city_name;
var city_id = res.city_info.city_id;
getApp().globalData.city_id = city_id;
this.refresh_info(city_id);
}).catch(rej=>{
if(rej==='定位未开启'){
getApp().globalData.locationPermise =false
location_city("beijing").then((res) => {
var city = res.city_info.city_name;
var city_id = res.city_info.city_id;
getApp().globalData.city_id = city_id;
this.refresh_info(city_id);
})
}
})
} else {
this.refresh_info(getApp().globalData.city_id);
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
var curPage = getCurrentPages()[getCurrentPages().length - 1]
if (curPage.data.city_id && curPage.data.city_id != this.city_id) {
this.setData({
show_list: [{
sort_type: '1',
list: 'newMake',
page: '1',
has_more: 'false'
},
{
sort_type: '2',
list: 'newMake',
page: '1',
has_more: 'false'
},
{
sort_type: '3',
list: 'newMake',
page: '1',
has_more: 'false'
}
],
swith_area: 0,
})
this.refresh_info(curPage.data.city_id)
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
uni.reLaunch({
url: '/pages/index/index/index'
});
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
let show_list = this.show_list;
let current = show_list[this.swith_area];
if (current.has_more) {
uni.showNavigationBarLoading(); //在标题栏中显示加载图标
let page = parseInt(current.page) + 1;
let city_id = this.city_id;
let sort_type = current.sort_type;
httpUtil('/api/v1/show-list', 'get', {
city_id,
page,
sort_type
}).then((res) => {
uni.hideNavigationBarLoading(); //完成停止加载图标
show_list[this.swith_area].list = current.list.concat(res.show_list);
show_list[this.swith_area].page = page;
show_list[this.swith_area].has_more = res.has_more;
this.setData({
show_list,
current_list: show_list[this.swith_area].list,
no_more: !res.has_more
});
});
} else {
this.setData({
no_more: true
});
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
return {
title: '开心麻花小程序 - 优惠购票',
path: '/pages/index/index/index',
imageUrl: 'https://mahuaimage.oss-cn-qingdao.aliyuncs.com/mini_app/share/home-share.png'
};
},
methods: {
// 轮播图
bindchange(e) {
this.setData({
swiperIdx: e.detail.current
});
},
swith_tab: function(e) {
let swith_area = e.currentTarget.dataset.index;
this.setData({
swith_area
});
if ('newMake' == this.show_list[swith_area].list) {
this.get_show_list(this.city_id, swith_area + 1, 1);
} else {
this.setData({
current_list: this.show_list[swith_area].list,
no_more: !this.show_list[swith_area].has_more
});
}
},
write_in(e) {
this.setData({
keyword: e.detail.value
});
},
search(e) {
this.setData({
keyword: e.detail.value
});
uni.navigateTo({
url: '/pages/index/search/search?city_id=' + this.city_id + '&keyword=' + e.detail.value
});
},
search1() {
uni.navigateTo({
url: '/pages/index/search/search?city_id=' + this.city_id + '&keyword=' + this.keyword
});
},
// 封装 获取banner｜获取城市列表｜获取演出列表
// 方便刷新全局数据
refresh_info: function(city_id) {
var that = this; // 获取banner列表
httpUtil('/api/v1/banner-list', 'get', {
city_id
},false).then((res) => {
if (0 != res.banner_list.length) {
let banner_list = res.banner_list.filter(item => {
return item.show_type.indexOf('8') !== -1
})
that.setData({
banner_list
});
}
}); // 获取search关键词
httpUtil('/api/v1/hot-search', 'get').then((res) => {
that.setData({
placeholder: res.keyword
});
}); // 获取演出城市列表
httpUtil('/api/v1/city-list', 'get', {
city_id
},false).then((res2) => {
that.setData({
city_list: res2,
city_id: res2.current.city_id,
city: res2.current.city_name
});
}); // 获取演出列表
let sort_type = 1;
let page = 1;
this.get_show_list(city_id, sort_type, page);
// 获取开屏广告
httpUtil("/api/v1/home-promotion", "get", {
city_id
},false).then(res => {
if (res.length == 0) {
return
}
let key = uni.getStorageSync('key')
if (key.indexOf(res.id) != -1) {
this.setData({
screen_list: res,
isGiftMarkShow: !this.isActionMarkShow
})
return
}
this.setData({
screen_list: res,
isActionMarkShow: true,
})
})
},
// 获取演出列表方法封装
get_show_list(city_id, sort_type, page) {
httpUtil('/api/v1/show-list', 'get', {
city_id,
sort_type,
page
},false).then((res) => {
let show_list = this.show_list;
show_list[sort_type - 1].list = res.show_list;
show_list[sort_type - 1].has_more = res.has_more;
this.setData({
show_list,
current_list: res.show_list,
no_more: !res.has_more
});
});
},
banner_nav: function(e) {
let url = e.currentTarget.dataset.key;
console.log('前往地址：', url);
uni.navigateTo({
// url: '/pages/opera/show/show_detail'+e.currentTarget.dataset.key,
url
});
},
calendar_nav: function() {
uni.navigateTo({
url: '/pages/index/calendar/calendar?city_id=' + this.city_id
});
},
area_nav: function() {
if (!this.city_list) {
httpUtil('/api/v1/city-list', 'get', {
city_id:52
}).then((res) => {
uni.navigateTo({
url: '/pages/index/city/selectcity?city_list=' + JSON.stringify(res)
})
})
} else {
uni.navigateTo({
url: '/pages/index/city/selectcity?city_list=' + JSON.stringify(this
.city_list)
})
}
},
show_detail: function(e) {
uni.navigateTo({
url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id
});
},
// 关闭广告
cancle_mark(e) {
let id = e.currentTarget.dataset.id
let key = wx.getStorageSync('key')
if (key.indexOf(id) == -1) {
wx.setStorageSync('key', [...key, id])
}
this.setData({
isActionMarkShow: false,
isGiftMarkShow: true
})
},
// 礼物图标
advertisementMark_show() {
this.setData({
isActionMarkShow: true,
isGiftMarkShow: false
})
},
onlinkurl(e) {
this.cancle_mark(e)
let link_url = e.currentTarget.dataset.link_url
wx.navigateTo({
url: link_url
})
},
}
};
</script>
<style>
/* .pageBox .swiperClass {margin: 0;margin-top: 40px;height: 608rpx;}
.pageBox .slide-image {width: 320px;
height: 250px;border-radius: 10px;position: relative;box-shadow: 0 0 10rpx rgba(0, 0, 0, .8)}
.pageBox image.active {transform: none;transition: all 0.2s ease-in 0s;}
.pageBox image.quiet {transform: scale(0.8333333);transition: all 0.2s ease-in 0s;} */
.banner {
/* #ifdef MP-ALIPAY */
position: relative;
/* #endif */
}
.banner .swiper {
text-align: center;
margin-top: 40rpx;
height: 560rpx !important;
display: flex;
align-items: center;
}
.banner .shadow {
width: 550rpx;
height: 212rpx;
background: #7b7b7b;
border-radius: 8rpx;
opacity: 0.3;
filter: blur(12px);
position: absolute;
left: 60rpx;
top: 310rpx;
z-index: -1;
}
.banner .swiper .swiper_item .img {
width: 640rpx;
height: 500rpx;
border-radius: 16rpx;
box-shadow: 0 4rpx 20rpx 0 #f3f3f3;
}
.banner .indicator_dsn {
display: flex;
justify-content: center;
/* margin: 20rpx 0 40rpx 0; */
position: absolute;
top: 560rpx;
/* #ifdef MP-ALIPAY */
top: 520rpx;
/* #endif */
left: 50%;
transform: translate(-50%);
}
.banner .indicator_dsn .dot {
width: 8rpx;
height: 8rpx;
margin: 0 10rpx;
border-radius: 8rpx;
background-color: #ffffff;
}
.banner .indicator_dsn .dot.active {
width: 32rpx;
background-color: #ff446b;
}
.search_area {
display: flex;
padding: 0 20rpx 20rpx 20rpx;
align-items: center;
}
.search_area .cal {
width: 60rpx;
height: 60rpx;
margin: 0 26rpx 0 6rpx;
background: #ffffff;
box-shadow: 0 4rpx 20rpx 0 #f3f3f3;
border: 2rpx solid #e9e9e9;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.search_area .cal image {
width: 28rpx;
height: 32rpx;
}
.search_area ._search {
display: flex;
flex: 1;
background-color: #ffffff;
border-radius: 60rpx;
justify-content: space-between;
align-items: center;
box-shadow: 0 4rpx 20rpx 0 #f3f3f3;
font-size: 24rpx;
height: 64rpx;
padding: 0 20rpx;
margin-right: 10rpx;
border: 2rpx solid #ebebeb;
}
.search_area ._search image {
width: 28rpx;
height: 28rpx;
}
.search_area ._search ._search1 {
display: flex;
align-items: center;
width: 100%;
}
.search_area ._search ._search1 .input {
flex: 1;
}
.line {
display: flex;
margin-bottom: 20rpx;
}
.line .topLine {
width: 33%;
text-align: center;
margin: 20rpx;
color: #7b7b7b;
}
.line .topLine.active {
position: relative;
color: #181818;
font-weight: bold;
}
.line .topLine.active:after {
content: ' ';
width: 1rem;
height: 0.12rem;
/* #ifdef MP-ALIPAY */
width: 0.4rem;
height: 0.04rem;
/* #endif */
background: #fff;
position: absolute;
/* bottom: -0.1rem; */
bottom: -0.2rem;
left: 50%;
transform: translateX(-50%);
background-color: #ff446b;
border-radius: 0.12rem;
}
._list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
._list ._demo {
margin: 0 0 40rpx 26rpx;
width: 336rpx;
background: #fff;
border-radius: 16rpx;
overflow: auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
._list ._demo .list_img {
width: 336rpx;
height: 504rpx;
}
._list ._demo ._ln {
margin: 4rpx 10rpx 12rpx 12rpx;
flex: 1;
}
._list ._demo ._ln1 {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 20rpx;
color: #7b7b7b;
}
._list ._demo ._ln1 image {
width: 36rpx;
height: 28rpx;
}
._list ._demo ._ln2 {
margin: 5rpx 0;
font-size: 28rpx;
font-weight: bold;
color: #181818;
}
._list ._demo ._ln3 {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16rpx;
}
._list ._demo ._ln3 ._ln4 {
display: flex;
align-items: center;
}
._list ._demo ._ln3 ._detail {
font-size: 24rpx;
white-space: nowrap;
border-radius: 22rpx;
text-align: center;
margin: 0;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
color: #fff;
line-height: 42rpx;
/* #ifdef MP-ALIPAY */
line-height: 0.45rem;
height: 0.45rem;
width: 1.04rem;
/* #endif */
}
.more {
color: #7b7b7b;
text-align: center;
margin: 70rpx 0 40rpx 0;
}
.fiexbox {
width: 400rpx;
border-radius: 4rpx;
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 0;
margin: auto;
z-index: 100;
height: 700rpx;
}
.fiexbox .box image {
width: 100%;
height: 100%;
border-radius: 4px;
}
.fiexbox .box {
width: 400rpx;
height: 600rpx;
margin-bottom: 10px;
border-radius: 4rpx;
}
.fiexbox .btn {
margin-top: 10px;
border-radius: 50%;
border: 1px solid #fffaf0;
color: #fffaf0;
width: 50rpx;
height: 50rpx;
text-align: center;
line-height: 50rpx;
margin: 0 auto;
background: rgba(228, 220, 220, 0.3) !important;
}
.markinfo {
width: 100%;
height: 100%;
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: rgba(0, 0, 0, 0.64) !important;
z-index: 100;
}
.surprise {
position: fixed;
right: 10rpx;
bottom: 0rpx;
z-index: 100;
}
.surprise .img {
width: 150rpx;
height: 150rpx;
text-align: center;
line-height: 150rpx;
background: url('https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61415f6cf0837b03af37cc5d456f21c901e1413071d7f.png');
background-size: 150rpx 150rpx;
}
.surprise .img image {
width: 100%;
height: 100%;
}
.cton {
background: yellow;
color: #ccc;
border-radius: 8rpx;
width: 50rpx;
/* margin: 0 auto; */
text-align: center;
}
</style>

373
src/pages/index/index/mina-touch.js
Unescape View File

@ -0,0 +1,373 @@
const DEFAULT_OPTIONS = {
touchStart: function () {},
touchMove: function () {},
touchEnd: function () {},
touchCancel: function () {},
multipointStart: function () {},
multipointEnd: function () {},
tap: function () {},
doubleTap: function () {},
longTap: function () {},
singleTap: function () {},
rotate: function () {},
pinch: function () {},
pressMove: function () {},
swipe: function () {}
};
export default class MinaTouch {
constructor(_page, name, option = {}) {
this.preV = {
x: null,
y: null
};
this.pinchStartLen = null;
this.scale = 1;
this.isDoubleTap = false;
this.delta = null;
this.last = null;
this.now = null;
this.tapTimeout = null;
this.singleTapTimeout = null;
this.longTapTimeout = null;
this.swipeTimeout = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
this.preTapPosition = {
x: null,
y: null
};
this.lastZoom = 1;
this.tempZoom = 1;
try {
if (this._checkBeforeCreate(_page, name)) {
this._name = name;
this._option = { ...DEFAULT_OPTIONS, ...option };
_page[name] = this;
this._bindFunc(_page);
}
} catch (error) {
console.error(error);
}
}
_checkBeforeCreate(_page, name) {
if (!_page || !name) {
throw new Error('MinaTouch实例化时，必须传入page对象和引用名');
}
if (_page[name]) {
throw new Error('MinaTouch实例化error： ' + name + ' 已经存在page中');
}
return true;
}
_bindFunc(_page) {
let funcNames = ['start', 'move', 'end', 'cancel'];
for (let funcName of funcNames) {
_page[this._name + '.' + funcName] = this[funcName].bind(this);
}
}
start(evt) {
if (!evt.touches) {
return;
}
this.now = Date.now();
if (evt.touches[0].pageX == null) {
this.x1 = evt.touches[0].x;
} else {
this.x1 = evt.touches[0].pageX;
}
if (evt.touches[0].pageY == null) {
this.y1 = evt.touches[0].y;
} else {
this.y1 = evt.touches[0].pageY;
}
this.delta = this.now - (this.last || this.now);
this._option.touchStart(evt);
if (this.preTapPosition.x !== null) {
this.isDoubleTap = this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30;
}
this.preTapPosition.x = this.x1;
this.preTapPosition.y = this.y1;
this.last = this.now;
let preV = this.preV;
let len = evt.touches.length;
if (len > 1) {
this._cancelLongTap();
this._cancelSingleTap();
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = {
x: otx - this.x1,
y: oty - this.y1
};
preV.x = v.x;
preV.y = v.y;
this.pinchStartLen = getLen(preV);
this._option.multipointStart(evt);
}
this.longTapTimeout = setTimeout(
function () {
evt.type = 'longTap';
this._option.longTap(evt);
}.bind(this),
750
);
}
move(evt) {
if (!evt.touches) {
return;
}
let preV = this.preV;
let len = evt.touches.length;
let currentX = evt.touches[0].pageX == null ? evt.touches[0].x : evt.touches[0].pageX;
let currentY = evt.touches[0].pageY == null ? evt.touches[0].y : evt.touches[0].pageY;
this.isDoubleTap = false;
if (len > 1) {
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = {
x: otx - currentX,
y: oty - currentY
};
if (preV.x !== null) {
if (this.pinchStartLen > 0) {
evt.singleZoom = getLen(v) / this.pinchStartLen;
evt.zoom = evt.singleZoom * this.lastZoom;
this.tempZoom = evt.zoom;
evt.type = 'pinch';
this._option.pinch(evt);
}
evt.angle = getRotateAngle(v, preV);
evt.type = 'rotate';
this._option.rotate(evt);
}
preV.x = v.x;
preV.y = v.y;
} else {
if (this.x2 !== null) {
evt.deltaX = currentX - this.x2;
evt.deltaY = currentY - this.y2;
} else {
evt.deltaX = 0;
evt.deltaY = 0;
}
this._option.pressMove(evt);
}
this._option.touchMove(evt);
this._cancelLongTap();
this.x2 = currentX;
this.y2 = currentY;
if (len > 1) {
// evt.preventDefault();
}
}
end(evt) {
if (!evt.changedTouches) {
return;
}
this._cancelLongTap();
let self = this;
evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2); //在结束钩子都加入方向判断，但触发swipe瞬时必须位移大于30
if (evt.touches.length < 2) {
this.lastZoom = this.tempZoom;
this._option.multipointEnd(evt);
}
this._option.touchEnd(evt); //swipe
if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) || (this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
// evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
this.swipeTimeout = setTimeout(function () {
evt.type = 'swipe';
self._option.swipe(evt);
}, 0);
} else {
this.tapTimeout = setTimeout(function () {
evt.type = 'tap';
self._option.tap(evt); // trigger double tap immediately
if (self.isDoubleTap) {
evt.type = 'doubleTap';
self._option.doubleTap(evt);
clearTimeout(self.singleTapTimeout);
self.isDoubleTap = false;
}
}, 0);
if (!self.isDoubleTap) {
self.singleTapTimeout = setTimeout(function () {
self._option.singleTap(evt);
}, 250);
}
}
this.preV.x = 0;
this.preV.y = 0;
this.scale = 1;
this.pinchStartLen = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
}
cancel(evt) {
clearTimeout(this.singleTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.longTapTimeout);
clearTimeout(this.swipeTimeout);
this._option.touchCancel(evt);
}
_cancelLongTap() {
clearTimeout(this.longTapTimeout);
}
_cancelSingleTap() {
clearTimeout(this.singleTapTimeout);
}
_swipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : y1 - y2 > 0 ? 'Up' : 'Down';
}
destroy() {
if (this.singleTapTimeout) {
clearTimeout(this.singleTapTimeout);
}
if (this.tapTimeout) {
clearTimeout(this.tapTimeout);
}
if (this.longTapTimeout) {
clearTimeout(this.longTapTimeout);
}
if (this.swipeTimeout) {
clearTimeout(this.swipeTimeout);
}
this._option.rotate = null;
this._option.touchStart = null;
this._option.multipointStart = null;
this._option.multipointEnd = null;
this._option.pinch = null;
this._option.swipe = null;
this._option.tap = null;
this._option.doubleTap = null;
this._option.longTap = null;
this._option.singleTap = null;
this._option.pressMove = null;
this._option.touchMove = null;
this._option.touchEnd = null;
this._option.touchCancel = null;
this.preV =
this.pinchStartLen =
this.scale =
this.isDoubleTap =
this.delta =
this.last =
this.now =
this.tapTimeout =
this.singleTapTimeout =
this.longTapTimeout =
this.swipeTimeout =
this.x1 =
this.x2 =
this.y1 =
this.y2 =
this.preTapPosition =
this.rotate =
this.touchStart =
this.multipointStart =
this.multipointEnd =
this.pinch =
this.swipe =
this.tap =
this.doubleTap =
this.longTap =
this.singleTap =
this.pressMove =
this.touchMove =
this.touchEnd =
this.touchCancel =
null;
return null;
}
}
function getLen(v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function getAngle(v1, v2) {
let mr = getLen(v1) * getLen(v2);
if (mr === 0) {
return 0;
}
let r = dot(v1, v2) / mr;
if (r > 1) {
r = 1;
}
return Math.acos(r);
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function getRotateAngle(v1, v2) {
let angle = getAngle(v1, v2);
if (cross(v1, v2) > 0) {
angle *= -1;
}
return (angle * 180) / Math.PI;
}

144
src/pages/index/index/seatImg.js
Unescape View File

@ -0,0 +1,144 @@
const seatImg = {
'00': {
name: 'default',
url: '/static/images/seats/00.png',
color:'#D8D8D8'
},
'01': {
name: 'checked',
url: '/static/images/seats/01.png',
color:'#007800'
},
A: {
name: 'A',
url: '/static/images/seats/A.png',
color:'#ff3b30'
},
B: {
name: 'B',
url: '/static/images/seats/B.png',
color:'#fe9400'
},
C: {
name: 'C',
url: '/static/images/seats/C.png',
color:'#f6eb77'
},
D: {
name: 'D',
url: '/static/images/seats/D.png',
color:'#4bd863'
},
E: {
name: 'E',
url: '/static/images/seats/E.png',
color:'#0079fe'
},
F: {
name: 'F',
url: '/static/images/seats/F.png',
color:'#e6109b'
},
G: {
name: 'G',
url: '/static/images/seats/G.png',
color:'#ebddd5'
},
H: {
name: 'H',
url: '/static/images/seats/H.png',
color:'#ff403a'
},
I: {
name: 'I',
url: '/static/images/seats/I.png',
color:'#f5a433'
},
J: {
name: 'J',
url: '/static/images/seats/J.png',
color:'#e8ff8c'
},
K: {
name: 'K',
url: '/static/images/seats/K.png',
color:'#bad4aa'
},
L: {
name: 'L',
url: '/static/images/seats/L.png',
color:'#abe0ff'
},
M: {
name: 'M',
url: '/static/images/seats/M.png',
color:'#e5daf9'
},
N: {
name: 'N',
url: '/static/images/seats/N.png',
color:'#b3907d'
},
O: {
name: 'O',
url: '/static/images/seats/O.png',
color:'#f45c93'
},
P: {
name: 'P',
url: '/static/images/seats/P.png',
color:'#db5200'
},
Q: {
name: 'Q',
url: '/static/images/seats/Q.png',
color:'#e8e363'
},
R: {
name: 'R',
url: '/static/images/seats/R.png',
color:'#2db3a0'
},
S: {
name: 'S',
url: '/static/images/seats/S.png',
color:'#bff1ff'
},
T: {
name: 'T',
url: '/static/images/seats/T.png',
color:'#ffe3fb'
},
U: {
name: 'U',
url: '/static/images/seats/U.png',
color:'#a60040'
},
V: {
name: 'V',
url: '/static/images/seats/V.png',
color:'#ffdec9'
},
W: {
name: 'W',
url: '/static/images/seats/W.png',
color:'#f6ffe3'
},
X: {
name: 'X',
url: '/static/images/seats/X.png',
color:'#8ab4e8'
},
Y: {
name: 'Y',
url: '/static/images/seats/Y.png',
color:'#ebf5df'
},
Z: {
name: 'Z',
url: '/static/images/seats/Z.png',
color:'#a82f5a'
}
};
module.exports = seatImg

515
src/pages/index/search/search.vue
Unescape View File

@ -0,0 +1,515 @@
<template>
<view>
<view class="_search">
<input class="input" :placeholder="placeholder" :value="keyword" @input="write_in" @confirm="search" type="text" confirm-type="search" />
<view class="imgButton" @tap="search1">
<image src="/static/images/ui/search.png" />
</view>
</view>
<block v-if="searching && keyword">
<block v-if="cancel_noContWarn && !ip_info.abb_id && !search_list[0].cycle_id">
<view class="more">没有搜索到相关信息～</view>
</block>
<block v-if="ip_info && ip_info.abb_id">
<view class="_item" :data-abb_id="ip_info.abb_id" @tap="nav">
<view class="shadow" />
<image class="img" :src="ip_info.pic" />
<view class="_title">{{ ip_info.show_name }}</view>
<view>
<view class="_below">
{{ ip_info.follow_total == 0 ? 0 : ip_info.follow_total }}人想看｜
<text style="color: #ff1d42">{{ ip_info.show_total }}</text>
个剧场在售
</view>
<view class="_home">
前往主页
<image src="/static/images/ui/right.png" style="margin-left: 10rpx" />
</view>
</view>
</view>
</block>
<block v-if="search_list.length">
<view style="margin-bottom: 40rpx">
<view class="list_item" :data-cycle_id="item.cycle_id" @tap="nav1" v-for="(item, index) in search_list" :key="index">
<view class="img_area">
<image class="img" :src="item.show_pic" />
</view>
<view class="info">
<view class="top">
<view class="title">{{ item.show_name }}</view>
<view class="area">{{ item.city_name }}｜{{ item.theater_name }}</view>
</view>
<view class="bottom">
<view class="price">
<text style="font-size: 32rpx">¥</text>
<text style="margin: 0 2rpx">{{ item.lowest_price }}</text>
<text style="font-size: 24rpx; color: #7b7b7b">起</text>
</view>
<button class="_detail" :data-cycle_id="item.cycle_id" @tap="show_detail">详情</button>
</view>
</view>
</view>
</view>
</block>
<block v-if="suggest_list.length">
<view class="suggest">
<view class="_title">
<view class="_icon" />
推荐剧目
</view>
<view class="list_item" :data-cycle_id="item.cycle_id" @tap="nav1" v-for="(item, index) in suggest_list" :key="index">
<view class="img_area">
<image class="img" :src="item.show_pic" />
</view>
<view class="info">
<view class="top">
<view class="title">{{ item.show_name }}</view>
<view class="area">
<view style="margin-bottom: 8rpx">{{ item.start_date }}-{{ item.end_date }}</view>
<view>{{ item.city_name }}｜{{ item.theater_name }}</view>
</view>
</view>
<view class="b">
<view class="brief">{{ item.brief }}</view>
<view class="bottom">
<view class="price">
<text style="font-size: 32rpx">¥</text>
<text style="margin: 0 2rpx">{{ item.lowest_price }}</text>
<text style="font-size: 24rpx; color: #7b7b7b">起</text>
</view>
<button class="_detail" :data-cycle_id="item.cycle_id" @tap="show_detail">详情</button>
</view>
</view>
</view>
</view>
</view>
</block>
</block>
<block v-else>
<view class="his_show">
<view class="line">
<view style="font-weight: bold">历史记录</view>
<image src="/static/images/ui/delete1.png" @tap="deleteFun" />
</view>
<view class="his_item">
<view class="his_keyword" :data-keyword="item" @tap="research" v-for="(item, index) in search_his" :key="index">{{ item }}</view>
</view>
</view>
</block>
</view>
</template>
<script>
// pages/index/search/search.js
import { httpUtil, location_city } from '../../../utils/util';
export default {
data() {
return {
placeholder: '',
city_id: '',
search_his: '',
keyword: '',
searching: false,
ip_info: {
abb_id: '',
pic: '',
show_name: '',
show_total: ''
},
cancel_noContWarn: false,
search_list: {
cycle_id: '',
length: ''
},
suggest_list: {
length: ''
}
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
let city_id; // 获取search关键词
httpUtil('/api/v1/hot-search', 'get').then((res) => {
this.setData({
placeholder: res.keyword
});
});
if ('undefined' == options.city_id) {
location_city().then((res) => {
city_id = res.city_info.city_id;
});
} else {
if (options.city_id) {
city_id = options.city_id;
} else {
uni.switchTab({
url: '/pages/index/index/index'
});
}
}
this.setData({
city_id,
search_his: uni.getStorageSync('search_his') || []
});
if (options.keyword) {
this.search_(options.keyword, options.city_id);
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
search_(keyword, city_id) {
const search_his = uni.getStorageSync('search_his') || [];
if ((keyword && 'undefined' !== keyword) || this.placeholder) {
if (!keyword) {
keyword = this.placeholder;
}
for (var i = 0; i < search_his.length; i++) {
if (keyword == search_his[i]) {
// 相同的全部删除
search_his.splice(i, 1); // 删除该元素
i--;
}
}
search_his.unshift(keyword);
this.setData({
keyword,
searching: true
});
httpUtil('/api/v1/search', 'get', {
keyword,
city_id
}).then((res) => {
this.setData({
ip_info: res.ip_info,
cancel_noContWarn: true,
search_list: res.search_list,
suggest_list: res.suggest_list
});
});
}
this.setData({
search_his
});
uni.setStorageSync('search_his', search_his);
},
write_in(e) {
this.setData({
keyword: e.detail.value
});
if (this.keyword == '') {
this.setData({
searching: false
});
}
},
search(e) {
this.setData({
keyword: e.detail.value
});
this.search_(e.detail.value, this.city_id);
},
search1() {
this.search_(this.keyword, this.city_id);
},
deleteFun() {
var that = this;
uni.showModal({
title: '提示',
content: '是否删除搜索缓存',
success(res) {
if (res.confirm) {
console.log('用户点击确定');
uni.removeStorageSync('search_his');
that.setData({
search_his: null
});
} else {
if (res.cancel) {
console.log('用户点击取消');
}
}
}
});
},
research(e) {
this.search_(e.currentTarget.dataset.keyword, this.city_id);
},
nav(e) {
uni.navigateTo({
url: '/pages/opera/IP_detail/IP_detail?abb_id=' + e.currentTarget.dataset.abb_id
});
},
nav1(e) {
uni.navigateTo({
url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id
});
},
show_detail() {
console.log('占位：函数 show_detail 未声明');
}
}
};
</script>
<style>
._search {
display: flex;
background-color: #ffffff;
border-radius: 40rpx;
justify-content: space-between;
align-items: center;
margin: 40rpx;
padding: 20rpx 60rpx;
box-shadow: 0 4rpx 20rpx 0 #f3f3f3;
}
._search .input {
font-size: 24rpx;
width: 100%;
}
._search image {
width: 40rpx;
height: 40rpx;
}
.his_show .line {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20rpx 40rpx 20rpx 40rpx;
}
.his_show .line image {
width: 30rpx;
height: 32rpx;
}
.his_show .his_item {
display: flex;
flex-wrap: wrap;
margin: 0 40rpx;
}
.his_show .his_item .his_keyword {
width: 240rpx;
height: 60rpx;
background: #f6f6f6;
border-radius: 8rpx;
margin: 0 20rpx 20rpx 0;
text-align: center;
line-height: 60rpx;
font-size: 24rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
._item {
height: 260rpx;
margin: 100rpx 30rpx 100rpx 30rpx;
position: relative;
background: #fff9f9;
box-shadow: 0 12rpx 8rpx 0 rgba(108, 106, 106, 0);
border-radius: 8rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
._item .shadow {
width: 720rpx;
height: 212rpx;
background: #1c1c1c;
border-radius: 8rpx;
opacity: 0.19;
filter: blur(10px);
position: absolute;
left: -20rpx;
top: 70rpx;
z-index: -1;
}
._item .img {
width: 204rpx;
height: 306rpx;
border-radius: 16rpx;
position: absolute;
right: 30rpx;
bottom: 20rpx;
}
._item ._title {
margin: 20rpx 30rpx;
font-size: 14px;
font-weight: bold;
width: 392rpx;
}
._item ._below {
font-size: 24rpx;
margin: 0 30rpx;
}
._item ._home {
font-size: 24rpx;
font-weight: bold;
margin: 20rpx 30rpx 40rpx 30rpx;
display: flex;
align-items: center;
}
._item ._home image {
width: 26rpx;
height: 26rpx;
}
.list_item {
display: flex;
padding: 30rpx 30rpx 20rpx 30rpx;
background: #fff;
border-radius: 12px 12px 0px 0px;
position: relative;
}
.list_item .img_area {
background: #d8d8d8;
width: 204rpx;
height: 306rpx;
border-radius: 16rpx;
position: relative;
}
.list_item .img_area .img {
width: 204rpx;
height: 306rpx;
border-radius: 16rpx;
position: absolute;
right: 4rpx;
bottom: 4rpx;
}
.list_item .info {
padding: 0 8rpx 0 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.list_item .info .top .title {
font-size: 32rpx;
font-weight: bold;
}
.list_item .info .top .area {
margin: 20rpx 0;
font-size: 24rpx;
color: #7b7b7b;
}
.list_item .info .bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.list_item .info .bottom .price {
font-size: 44rpx;
font-weight: bold;
color: #ff1d42;
}
.list_item .info .bottom ._detail {
font-size: 24rpx;
width: 96rpx;
height: 42rpx;
white-space: nowrap;
border-radius: 22rpx;
text-align: center;
margin: 0;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
color: #fff;
line-height: 42rpx;
}
.suggest {
margin-bottom: 30rpx;
}
.suggest ._title {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #181818;
padding: 30rpx 30rpx 0 30rpx;
background: #fff;
}
.suggest ._title ._icon {
width: 8rpx;
height: 36rpx;
background: #ff446b;
border-radius: 4rpx;
margin: 0 20rpx 0 0;
}
.suggest .list_item {
padding: 30rpx;
}
.brief {
font-size: 20rpx;
color: #ff1d42;
line-height: 36rpx;
border-radius: 8rpx;
border: 2rpx solid #ff1d42;
display: inline;
padding: 3rpx 10rpx;
}
.more {
color: #7b7b7b;
text-align: center;
margin: 70rpx 0 40rpx 0;
}
</style>

713
src/pages/make_order/choose_sit/choose_sit.vue
Unescape View File

@ -0,0 +1,713 @@
<template>
<view>
<view style="background: #fff; position: fixed; top: 0; width: 100%; z-index: 1">
<view class="drma_title" style="font-size: 28rpx; color: #181818; padding: 20rpx 20rpx 0">
<view class="pic" @tap="getdrama_list" :data-drama_id="seat_data.prev_show">
<image
:src="'/static/images/ui/' +(seat_data.prev_show !== 0 ? 'dram_activeleft.png' : 'dram_left.png')"
alt="" />
</view>
<view>{{ seat_data.show_info.show_date }}</view>
<view class="pic" @tap="getdrama_list" :data-drama_id="seat_data.next_show">
<image
:src="'/static/images/ui/' +(seat_data.next_show !== 0 ? 'dram_activeright.png' : 'dram_right.png')"
alt="" />
</view>
</view>
<view class="seat_grade">
<view
:class="'seat_grade_info ' + (item.tkt_num == 0 ? 'null_tic' : '') + ' ' + (select_grade == item.grade ? 'select' : '')"
:data-num="item.tkt_num" :data-select_grade="item.grade" @tap="select_gradeFun"
v-for="(item, index) in seat_data.grade_list" :key="index">
<image :src="'/static/images/seats/' + item.grade + '.png'"
style="width:12px;height:12px;margin-left: 20rpx;"></image>
<view style="margin: 0 10rpx 0 10rpx">¥{{ item.price }}</view>
</view>
</view>
<view class="direction">
<view style="margin-top: -35rpx">舞台方向</view>
</view>
</view>
<view class="canvasView" @touchstart.stop.prevent="touch1.start" @touchmove.stop.prevent="touch1.move"
@touchend.stop.prevent="touch1.end" @touchcancel.stop.prevent="touch1.end">
<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
<canvas id="myCanvas" type="2d"
:style="'height:'+maxCanvasH* scaleNum+'px;width:'+ maxCanvasW* scaleNum +'px;left:'+(move.x)+'px;top:'+(move.y+canvasTopGap)+'px;'"></canvas>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY || MP-BAIDU -->
<canvas id="myCanvas" canvas-id="myCanvas" :width="maxCanvasW" :height="maxCanvasH"
:style="'height:'+maxCanvasH * scaleNum +'px;width:'+ maxCanvasW * scaleNum +'px;left:'+(move.x)+'px;top:'+(move.y+canvasTopGap)+'px;'"></canvas>
<!-- #endif -->
</view>
<view class="bottom">
<view class="seat_tips" v-if="selected_seats.length">
<view class="loc" v-for="(item, index) in selected_seats" :key="index">
<view class="info">
<image :src="'/static/images/seats/' + item.grade + '.png'" style="width: 16px;height: 16px;">
</image>
<text :decode="true" style="font-size: 24rpx">&nbsp;{{ item.seat_info }}</text>
</view>
<image :data-ticket_id="item.ticket_id" src="/static/images/ui/close.png"
style="width: 16px;height: 16px;" @click="cancel_sel" />
</view>
</view>
<view class="submit">
<view class="cacu" v-if="total_price">
<view class="text">共计</view>
<view class="info">
<view class="price">
¥
<text style="font-size: 44rpx; font-weight: bold">{{ total_price }}.00</text>
</view>
<view class="num" v-if="selected_seats.length">已选择{{ selected_seats.length }}个座位</view>
</view>
</view>
<button class="button" :disabled="!total_price" @tap="make_order">下一步</button>
</view>
</view>
</view>
</template>
<script>
// pages/make_order/choose_sit/choose_sit.js
import {
httpUtil,
http
} from '../../../utils/util.js';
import MinaTouch from './mina-touch';
import seatImg from './seatImg.js';
export default {
data() {
return {
drama_id: null,
screenWidth: 375,
screenHeight: 764,
canvasTopGap: 175,
canvasBottomGap: 64,
ctx: null,
canvasImg: null,
select_grade: '',
selected_seats: [],
total_price: '',
max_select: 6,
//缩放比例（画布宽度适应屏幕）
scaleNum: 1,
// 二次放大比例(适应座位位置)
scaleNumTwice: 1,
//手动挪动偏移距离
move: {
x: 0,
y: 0
},
scaleShift: {
x: 0,
y: 0
},
tapTimeGap: true,
timer: 0,
};
}
/**
* 生命周期函数--监听页面加载
*/
,
async onLoad(options) {
let that = this
uni.getSystemInfo({
success(res) {
//获取屏幕的宽成功
that.screenWidth = res.screenWidth
that.screenHeight = res.screenHeight
// #ifdef MP-ALIPAY
that.screenWidth = res.windowWidth
that.screenHeight = res.windowHeight
// #endif
}
});
await this.initData(options.drama_id)
this.initTouch()
},
methods: {
async initData(drama_id) {
let seat_data = await httpUtil('/api/v1/seat-list', 'get', {
drama_id
})
let maxCanvasW = 60 * (seat_data.max_x + 1)
let maxCanvasH = 60 * (seat_data.max_y + 1)
if (this.screenWidth < maxCanvasW) {
this.scaleNum = (this.screenWidth / maxCanvasW).toFixed(3) //缩放比例
this.scaleNumTwice = (this.screenWidth / 60 / 20).toFixed(3)
}
await this.setData({
drama_id,
seat_data,
maxCanvasW,
maxCanvasH,
selected_seats: [],
total_price: '',
select_grade: ''
})
this.creatCanvas()
},
async creatCanvas() {
// #ifdef MP-WEIXIN || MP-TOUTIAO
if (this.ctx) {
this.initCanvas(this.ctx)
return
}
wx.createSelectorQuery().select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
canvas.width = this.maxCanvasW
canvas.height = this.maxCanvasH
this.setData({
ctx: ctx
})
this.initCanvas(ctx)
})
// #endif
// #ifdef MP-ALIPAY || MP-BAIDU
let ctx = this.ctx || uni.createCanvasContext('myCanvas')
// #ifdef MP-BAIDU
ctx.save()
ctx.scale(this.scaleNum, this.scaleNum)
// #endif
this.setData({
ctx: ctx
})
ctx.width = this.maxCanvasW
ctx.height = this.maxCanvasH
this.initCanvas(ctx)
// #endif
},
async initCanvas(ctx) {
let that = this
ctx.clearRect(0, 0, this.maxCanvasW, this.maxCanvasH)
this.seat_data.seat_list.forEach((item) => {
if (this.select_grade != '') {
if (item.ticket_status === 0 && this.select_grade === item.grade) {
this.drawSeat(ctx, item.x * 60, item.y * 60, seatImg[item.grade].color)
} else {
this.drawSeat(ctx, item.x * 60, item.y * 60, seatImg['00'].color)
}
} else {
if (item.ticket_status === 0) {
this.drawSeat(ctx, item.x * 60, item.y * 60, seatImg[item.grade].color)
} else {
this.drawSeat(ctx, item.x * 60, item.y * 60, seatImg['00'].color)
}
}
})
if (this.selected_seats.length > 0) {
this.selected_seats.forEach((v, k) => {
ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
this.drawSeat(this.ctx, v.x * 60, v.y * 60, seatImg['01'].color)
// #ifndef MP-WEIXIN || MP-TOUTIAO
ctx.draw(true)
// #endif
})
}
// #ifndef MP-WEIXIN || MP-TOUTIAO
setTimeout(() => {
ctx.restore()
ctx.draw(true);
}, 200)
// #endif
},
drawSeat(ctx, x, y, fillColor) {
ctx.beginPath()
// #ifdef MP-WEIXIN || MP-TOUTIAO
ctx.fillStyle = fillColor
ctx.lineWidth = 0.1
// #endif
// #ifdef MP-ALIPAY
ctx.setFillStyle(fillColor)
ctx.setLineWidth(0.1)
// #endif
// #ifdef MP-BAIDU
ctx.setFillStyle(fillColor)
// ctx.setLineWidth(0.1)
// #endif
ctx.arc(20 + x, 10 + y, 10, Math.PI, 1.5 * Math.PI)
ctx.lineTo(40 + x, y)
ctx.arc(40 + x, 10 + y, 10, 1.5 * Math.PI, 2 * Math.PI)
ctx.lineTo(50 + x, 20 + y)
ctx.arc(50 + x, 25 + y, 5, 1.5 * Math.PI, 2 * Math.PI)
ctx.lineTo(55 + x, 45 + y)
ctx.arc(47 + x, 45 + y, 8, 0, 0.5 * Math.PI)
ctx.lineTo(13 + x, 53 + y)
ctx.arc(13 + x, 45 + y, 8, 0.5 * Math.PI, Math.PI)
ctx.lineTo(5 + x, 25 + y)
ctx.arc(10 + x, 25 + y, 5, Math.PI, 1.5 * Math.PI)
ctx.lineTo(10 + x, 10 + y)
ctx.fill()
ctx.arc(10 + x, 25 + y, 5, 1.5 * Math.PI, 2 * Math.PI)
ctx.lineTo(15 + x, 41 + y)
ctx.arc(17 + x, 41 + y, 2, Math.PI, 0.5 * Math.PI, true)
ctx.lineTo(43 + x, 43 + y)
ctx.arc(43 + x, 41 + y, 2, 0.5 * Math.PI, 0, true)
ctx.lineTo(45 + x, 25 + y)
ctx.arc(50 + x, 25 + y, 5, Math.PI, 1.5 * Math.PI)
// #ifdef MP-WEIXIN || MP-TOUTIAO
ctx.strokeStyle = '#333333'
// #endif
// #ifndef MP-WEIXIN || MP-TOUTIAO
ctx.setStrokeStyle('#333333')
// #endif
ctx.stroke()
},
canvasToImg() {
let that = this
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: that.maxCanvasW,
height: that.maxCanvasH,
destWidth: that.maxCanvasW * that.scaleNum,
destHeight: that.maxCanvasW * that.scaleNum,
canvasId: 'myCanvas',
success: function(res) {
that.canvasImg = res.tempFilePath
}
})
},
cancel_sel(e) {
let ticket_id = e.currentTarget.dataset.ticket_id
this.selected_seats.find((v, k) => {
if (v.ticket_id === ticket_id) {
this.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
if (this.select_grade != '' && v.grade != this.select_grade) {
this.drawSeat(this.ctx, v.x * 60, v.y * 60, seatImg['00'].color)
} else {
this.drawSeat(this.ctx, v.x * 60, v.y * 60, seatImg[v.grade].color)
}
// #ifndef MP-WEIXIN || MP-TOUTIAO
this.ctx.draw(true)
// #endif
this.selected_seats.splice(k, 1)
return true
}
})
this.price_cac(this.selected_seats);
},
initTouch() {
let that = this
new MinaTouch(this, 'touch1', {
touchStart: function() {},
touchMove: function() {},
touchEnd: function() {},
touchCancel: function() {},
//一个手指以上触摸屏幕触发
multipointStart: function() {
console.log('multipointStart');
// clearTimeout(this.timer)
that.setData({
scaleListen: true
})
},
//当手指离开，屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
multipointEnd: function() {
console.log('multipointEnd');
that.setData({
scaleListen: false
})
},
//点按触发，覆盖下方3个点击事件，doubleTap时触发2次
tap: function() {
console.log('Tap');
},
//双击屏幕触发
doubleTap: function() {
console.log('doubleTap');
// that.scaleNum = (that.scaleNum * 1.3).toFixed(3)
// that.move = {
// x: that.move.x *1.3- that.screenWidth / 2 * (1.3 - 1) ,
// y: that.move.y *1.3- (that.screenHeight/ 2 - that.canvasTopGap) * (1.3 - 1)
// }
if (that.scaleNum.fixed(1) === that.scaleNumTwice.fixed(1)) {
return
}
let singleZoom = that.scaleNumTwice / that.scaleNum
that.scaleNum = that.scaleNumTwice
that.move = {
x: that.move.x * singleZoom - that.screenWidth / 2 * (singleZoom - 1),
y: that.move.y * singleZoom - (that.screenHeight / 2 - that.canvasTopGap) * (
singleZoom - 1)
}
},
//长按屏幕750ms触发
longTap: function() {
// console.log('longTap');
// if (that.maxCanvasW * that.scaleNum > that.screenWidth * 5) {
// return
// }
// that.scaleNum = that.scaleNum * 2
},
//单击屏幕触发，包括长按
singleTap: function(e) {
console.log('singleTap');
if (!that.tapTimeGap) {
return
}
// #ifdef MP-ALIPAY
let select_position = {
x: e.changedTouches[0].x || e.changedTouches[0].pageX,
y: e.changedTouches[0].y || e.changedTouches[0].pageY
}
// #endif
// #ifndef MP-ALIPAY
let select_position = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
}
// #endif
let cur_seat = {
x: Math.floor((select_position.x - that.move.x) / 60 / that.scaleNum),
y: Math.floor((select_position.y - that.canvasTopGap - that.move.y) / 60 / that
.scaleNum)
}
if (that.selected_seats.find((v, k) => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
// #ifdef MP-BAIDU
that.ctx.save()
that.ctx.scale(that.scaleNum, that.scaleNum)
// #endif
that.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
if (that.select_grade != '' && v.grade != that.select_grade) {
that.drawSeat(that.ctx, v.x * 60, v.y * 60, seatImg['00'].color)
} else {
that.drawSeat(that.ctx, v.x * 60, v.y * 60, seatImg[v.grade].color)
}
that.ctx.restore()
// #ifndef MP-WEIXIN || MP-TOUTIAO
that.ctx.draw(true)
// #endif
that.selected_seats.splice(k, 1)
return true
}
})) {
that.price_cac(that.selected_seats)
return
}
that.seat_data.seat_list.find(v => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
// 判断是否超过最大可选
if (that.selected_seats.length >= that.max_select) {
uni.showToast({
title: '单次最多选座6个',
icon: 'fail',
duration: 500
})
return
}
that.selected_seats.push(v);
// #ifdef MP-BAIDU
that.ctx.save()
that.ctx.scale(that.scaleNum, that.scaleNum)
// #endif
that.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
that.drawSeat(that.ctx, v.x * 60, v.y * 60, seatImg['01'].color)
that.ctx.restore()
// #ifndef MP-WEIXIN || MP-TOUTIAO
that.ctx.draw(true)
// #endif
return true
}
})
that.price_cac(that.selected_seats)
},
//evt.angle代表两个手指旋转的角度
rotate: function(evt) {
console.log('rotate:' + evt.angle);
},
//evt.zoom代表两个手指缩放的比例(多次缩放的累计值),evt.singleZoom代表单次回调中两个手指缩放的比例
pinch: function(evt) {
console.log('singleZoom,' + evt.singleZoom);
that.tapTimeGap = false
let singleZoom = Math.sqrt(Math.sqrt(evt.singleZoom));
if (singleZoom > 1.6 || singleZoom < 0.6) {
return
}
if (singleZoom < 1 && that.maxCanvasW * that.scaleNum < that.screenWidth * 7 / 8) {
return
} else
if (singleZoom > 1 && that.maxCanvasW * that.scaleNum > that.screenWidth * 5) {
return
}
that.scaleNum = (that.scaleNum * singleZoom).toFixed(3)
that.move = {
x: that.move.x * singleZoom - that.screenWidth / 2 * (singleZoom - 1),
y: that.move.y * singleZoom - (that.screenHeight / 2 - that.canvasTopGap) * (
singleZoom - 1)
}
this.timer = setTimeout(() => {
that.tapTimeGap = true
}, 1000)
},
//evt.deltaX和evt.deltaY代表在屏幕上移动的距离,evt.target可以用来判断点击的对象
pressMove: function(evt) {
if (evt.deltaX > 100 || evt.deltaY > 100) {
return
}
if (that.move.x > that.screenWidth / 2 && evt.deltaX > 0) {
return
} else
if (that.move.x < 0 && (that.maxCanvasW * that.scaleNum + that.move.x) < that
.screenWidth / 2 && evt.deltaX < 0) {
return
}
if ((that.move.y + that.canvasBottomGap) > that.screenHeight / 2 && evt.deltaY > 0) {
return
} else
if (that.move.y < 0 && (that.maxCanvasH * that.scaleNum + that.move.y + that
.canvasTopGap) < that
.screenHeight / 2 && evt.deltaY < 0) {
return
}
that.setData({
move: {
x: that.move.x + evt.deltaX,
y: that.move.y + evt.deltaY
}
})
},
//在touch结束触发，evt.direction代表滑动的方向 ['Up','Right','Down','Left']
swipe: function(evt) {
console.log('swipe:' + evt.direction);
}
});
},
select_gradeFun(e) {
if (e.currentTarget.dataset.num !== 0) {
this.select_grade = (this.select_grade === e.currentTarget.dataset.select_grade) ? '' : e.currentTarget
.dataset.select_grade
this.initCanvas(this.ctx)
this.scaleNum = (this.screenWidth / this.maxCanvasW).toFixed(3)
this.move = {
x: 0,
y: 0
}
}
},
// 计算票总价 '含多买折扣'
price_cac(selected_seats) {
const p = [];
const grade_price = [];
grade_price.push(this.seat_data.grade_price);
for (var x in grade_price[0]) {
let a = 0;
let arr = [];
for (let i of selected_seats) {
if (i.grade == x) {
a++;
arr.push({
row: i.row,
col: i.col,
floor: i.floor
});
}
}
if (grade_price[0][x][a]) {
p.push({
tkt_grade: x,
tkt_num: a,
tkt_pirce: grade_price[0][x][a],
tkt_loc: arr
});
}
}
let ii = 0;
for (let i in p) {
ii += parseInt(p[i].tkt_pirce);
}
this.setData({
total_price: ii
});
},
getdrama_list(e) {
let drama_id = e.currentTarget.dataset.drama_id;
if (drama_id == 0) {
return
}
this.initData(drama_id);
},
make_order() {
var selected_seats = this.selected_seats;
var tid = '';
selected_seats.forEach((v, k) => {
tid = tid + ',' + String(v.ticket_id);
});
tid = tid.substring(1);
uni.navigateTo({
url: '/pages/make_order/make_order/make_order?tid=' + tid + '&drama_id=' + this.drama_id
});
},
}
};
</script>
<style>
.canvasView {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
#myCanvas {
position: absolute;
/* border: 1px solid red; */
}
#myCanvas:hover {
/* border: 1px solid #ffffff; */
}
page {
width: 100%;
overflow: hidden;
}
.seat_grade {
display: flex;
flex-wrap: wrap;
color: #7b7b7b;
font-size: 24rpx;
padding: 40rpx 20rpx;
}
.seat_grade .seat_grade_info {
width: 20%;
margin: 10rpx;
display: flex;
padding: 10rpx 5rpx;
border-radius: 52rpx;
border: 2rpx solid #d2d2d2;
}
.seat_grade .null_tic {
background: #dddddd;
border: 2rpx solid #dddddd;
color: #ffffff;
}
.seat_grade .select {
background: #ffffff;
border: 2rpx solid #ff1d42;
color: #181818;
}
.direction {
width: 200rpx;
margin: 0 auto;
height: 0;
border-top: 37rpx solid #dddddd;
border-radius: 0 0 60rpx 60rpx;
/* border-right: 74rpx solid transparent;
border-left: 74rpx solid transparent; */
text-align: center;
font-size: 24rpx;
color: #f8f8f7;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
}
.bottom .seat_tips {
display: flex;
flex-wrap: wrap;
padding: 10rpx 20rpx;
background: #f8f8f7;
}
.bottom .seat_tips .loc {
width: 260rpx;
height: 50rpx;
background: #ffeef3;
border-radius: 26rpx;
display: flex;
justify-content: space-around;
align-items: center;
margin: 10rpx;
}
.bottom .seat_tips .loc .info {
display: flex;
align-items: center;
}
.bottom .submit {
border-top: 2rpx solid #dddddd;
display: flex;
height: 128rpx;
align-items: center;
background: #fff;
}
.bottom .submit .cacu {
display: flex;
align-items: center;
}
.bottom .submit .cacu .text {
font-size: 36rpx;
margin: 0 20rpx 0 30rpx;
}
.bottom .submit .cacu .info {}
.bottom .submit .cacu .info .price {
color: #ff1d42;
font-size: 32rpx;
}
.bottom .submit .cacu .info .num {
color: #1394f2;
font-size: 20rpx;
}
.bottom .submit .button {
width: 240rpx;
height: 72rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
margin-left: auto;
margin-right: 30rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #ffffff;
}
.drma_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.drma_title .pic {
width: 60rpx;
height: 60rpx;
}
.drma_title .pic image {
width: 100%;
height: 100%;
}
</style>

1086
src/pages/make_order/choose_sit/choose_sit1.vue
View File

File diff suppressed because one or more lines are too long

638
src/pages/make_order/choose_sit/choose_sit2.vue
Unescape View File

@ -0,0 +1,638 @@
<template>
<view>
<view style="background: #fff">
<view style="font-size: 28rpx; color: #181818; padding: 20rpx 0 0 40rpx">场次：{{ data1.show_info.show_date }}</view>
<view class="seat_grade">
<view
:class="'seat_grade_info ' + (item.tkt_num == 0 ? 'null_tic' : '') + ' ' + (select_grade == item.grade ? 'select' : '')"
:data-num="item.tkt_num"
:data-select_grade="item.grade"
@tap="select_gradeFun"
v-for="(item, index) in data1.grade_list"
:key="index"
>
<image :src="'/images/seats/' + item.grade + '/static/pages/make_order/choose_sit/.png'" custom-style="margin-left: 10rpx;" />
<view style="margin: 0 10rpx 0 10rpx">¥{{ item.price }}</view>
</view>
</view>
</view>
<!--
<canvas disable-scroll="true" bindtouchstart="b" bindtouchmove="c" bindtouchend="d" canvas-id="myCanvas" style="height:{{screenHeight-200}}px;width:1500rpx;"></canvas> -->
<view
:style="'background:yellow; left: ' + move.x + 'px;top:' + (200 + move.y) + 'px; position: fixed;'"
@touchstart.stop.prevent="touch1.start"
@touchmove.stop.prevent="touch1.move"
@touchend.stop.prevent="touch1.end"
@touchcancel.stop.prevent="touch1.cancel"
>
<canvas
:disable-scroll="true"
canvas-id="myCanvas"
:style="'height:' + maxCanvasH * scaleNum * newScale + 'px;width:' + maxCanvasW * scaleNum * newScale + 'px;'"
></canvas>
</view>
<view class="bottom">
<!-- <view v-if="{{ !sel_ticket.length }}">一次最多选6个座位</view> -->
<view class="seat_tips" v-if="!!sel_ticket.length">
<view class="loc" v-for="(item, index) in sel_ticket" :key="index">
<view class="info">
<image src="/static/images/seats/00.png" />
<text :decode="true" style="font-size: 24rpx">&nbsp;{{ item.seat_info }}</text>
</view>
<text :data-ticket_id="item.ticket_id" @tap="cancel_sel">x</text>
</view>
</view>
<view class="submit">
<view class="cacu" v-if="total_price">
<view class="text">共计</view>
<view class="info">
<view class="price">
¥
<text style="font-size: 44rpx; font-weight: bold">{{ total_price }}.00</text>
</view>
<view class="num" v-if="sel_ticket.length">已选择{{ sel_ticket.length }}个座位</view>
</view>
</view>
<button class="button" :disabled="!total_price" @tap="make_order">下一步</button>
</view>
</view>
</view>
</template>
<script>
// pages/make_order/choose_sit/choose_sit.js
import { httpUtil, http } from '../../../utils/util';
import MinaTouch from './mina-touch'; // 1. 引入mina-touch
export default {
data() {
return {
selected_seats: [],
max_select: 6,
baseSpace: {
x: 10,
y: 10
},
//座位间的距离
baseSize: {
x: 22,
y: 20
},
//图片默认尺寸
scaleNum: 1,
//默认缩放比例（画布宽度适应屏幕）
newScale: 1,
//手动缩放比例
//手动挪动偏移距离
move: {
x: 0,
y: 0
},
drama_id: '',
data1: {
show_info: {
show_date: ''
},
grade_list: []
},
scaleListen: false,
select_grade: '',
total_price_list: '',
total_price: '',
maxCanvasW: '',
maxCanvasH: '',
sel_ticket: {
length: ''
}
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
let drama_id = options.drama_id;
let that = this;
uni.getSystemInfo({
success(res) {
//获取屏幕的宽成功
that.screenWidth = res.screenWidth;
that.screenHeight = res.screenHeight;
}
});
this.setData({
drama_id
});
httpUtil('/api/v1/seat-list', 'get', {
drama_id: 75787
}).then((res) => {
this.setData({
data1: res
});
this.init1();
}); // 2. onload实例化mina-touch
//会创建this.touch1指向实例对象
new MinaTouch(this, 'touch1', {
touchStart: function () {},
touchMove: function () {},
touchEnd: function () {},
touchCancel: function () {},
multipointStart: function () {
console.log('multipointStart');
that.setData({
scaleListen: true
});
},
//一个手指以上触摸屏幕触发
multipointEnd: function () {
console.log('multipointEnd');
let newScale = that.newScale;
if (that.scaleListen == 1) {
debugger;
newScale = newScale + 1;
} else {
if (that.scaleListen == -1) {
debugger;
newScale = newScale - 1;
}
}
that.setData({
scaleListen: false
});
if (newScale >= 1) {
that.setData({
newScale
});
}
},
//当手指离开，屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
tap: function () {
console.log('Tap');
},
//点按触发，覆盖下方3个点击事件，doubleTap时触发2次
doubleTap: function () {
// _this.setData({scaleNum:2})
console.log('doubleTap');
},
//双击屏幕触发
longTap: function () {
console.log('longTap');
},
//长按屏幕750ms触发
singleTap: function (e) {
console.log('singleTap：选座');
let seat_list = that.data1.seat_list;
let selected_seats = that.selected_seats;
let scaleNum = that.scaleNum;
let newScale = that.newScale;
let move = that.move;
let maxCanvasW = that.maxCanvasW;
let maxCanvasH = that.maxCanvasH;
let baseSize = that.baseSize;
let baseSpace = that.baseSpace;
let max_select = that.max_select;
let select_position = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
};
let x = (select_position.x - move.x) / scaleNum;
let y = (select_position.y - move.y - 200) / scaleNum;
let cur_seat = {
x: Math.floor(x / (baseSize.x + baseSpace.x)),
y: Math.floor(y / (baseSize.y + baseSpace.y))
};
/* 选座 */
// 判断是否已选中
let a = 0;
selected_seats.forEach((v, k) => {
if (cur_seat.x == v.x && cur_seat.y == v.y) {
selected_seats.splice(k, 1);
v.select = 0;
a = 1;
return;
}
});
if (a == 0) {
// 将坐标放入选中座位的数组中
seat_list.forEach((v, k) => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status == 0) {
// 判断是否超过最大可选
if (selected_seats.length >= max_select) {
selected_seats.splice(max_select);
uni.showToast({
title: '单次最多选座6个',
icon: 'fail',
duration: 1000
});
} else {
selected_seats.push(v);
v.select = 1;
}
return;
}
});
}
that.price_cac(selected_seats);
that.init1();
},
//单击屏幕触发，包括长按
rotate: function (evt) {
//evt.angle代表两个手指旋转的角度
console.log('rotate:' + evt.angle);
},
pinch: function (evt) {
//evt.zoom代表两个手指缩放的比例(多次缩放的累计值),evt.singleZoom代表单次回调中两个手指缩放的比例
console.log('singleZoom,' + evt.singleZoom);
let singleZoom = evt.singleZoom;
let newScale = that.newScale;
if (that.scaleListen == true) {
if (singleZoom > 1.6) {
debugger;
that.scaleListen = 1;
} else {
if (singleZoom < 0.6) {
debugger;
that.scaleListen = -1;
}
}
}
},
pressMove: function (evt) {
//evt.deltaX和evt.deltaY代表在屏幕上移动的距离,evt.target可以用来判断点击的对象
that.setData({
move: {
x: that.move.x + evt.deltaX,
y: that.move.y + evt.deltaY
}
});
},
swipe: function (evt) {
//在touch结束触发，evt.direction代表滑动的方向 ['Up','Right','Down','Left']
console.log('swipe:' + evt.direction);
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
select_gradeFun(e) {
if (e.currentTarget.dataset.num !== 0) {
if (this.select_grade == e.currentTarget.dataset.select_grade) {
this.setData({
select_grade: ''
});
} else {
this.setData({
select_grade: e.currentTarget.dataset.select_grade
});
}
}
this.init1();
},
// 计算票总价 '含多买折扣'
price_cac(selected_seats) {
const p = [];
const grade_price = [];
grade_price.push(this.data1.grade_price); // Object.prototype.fun = () => {};
// console.log(Object.values(grade_price[0]))
for (var x in grade_price[0]) {
let a = 0;
let arr = [];
for (let i of selected_seats) {
if (i.grade == x) {
a++;
arr.push({
row: i.row,
col: i.col,
floor: i.floor
});
}
}
if (grade_price[0][x][a]) {
p.push({
tkt_grade: x,
tkt_num: a,
tkt_pirce: grade_price[0][x][a],
tkt_loc: arr
});
}
}
let ii = 0;
for (let i in p) {
ii += parseInt(p[i].tkt_pirce);
}
this.setData({
total_price_list: p,
total_price: ii
});
},
init1() {
const ctx = uni.createCanvasContext('myCanvas');
const baseSpace = this.baseSpace;
const baseSize = this.baseSize;
const maxCanvasW = (baseSize.x + baseSpace.x) * (this.data1.max_x + 1); //画布最大宽度
const maxCanvasH = (baseSize.y + baseSpace.y) * (this.data1.max_y + 1); //画布最大高度
this.setData({
maxCanvasW,
maxCanvasH
});
if (this.screenWidth < maxCanvasW) {
var scaleNum = this.screenWidth / maxCanvasW; //缩放比例
this.setData({
scaleNum
});
ctx.scale(scaleNum, scaleNum);
}
const img = {
'00': {
name: 'default',
url: '/static/images/seats/00.png'
},
'01': {
name: 'checked',
url: '/static/images/seats/01.png'
},
A: {
name: 'A',
url: '/static/images/seats/A.png'
},
B: {
name: 'B',
url: '/static/images/seats/B.png'
},
C: {
name: 'C',
url: '/static/images/seats/C.png'
},
D: {
name: 'D',
url: '/static/images/seats/D.png'
},
E: {
name: 'E',
url: '/static/images/seats/E.png'
},
F: {
name: 'F',
url: '/static/images/seats/F.png'
},
G: {
name: 'G',
url: '/static/images/seats/G.png'
},
H: {
name: 'H',
url: '/static/images/seats/H.png'
},
I: {
name: 'I',
url: '/static/images/seats/I.png'
},
J: {
name: 'J',
url: '/static/images/seats/J.png'
},
K: {
name: 'K',
url: '/static/images/seats/K.png'
},
L: {
name: 'L',
url: '/static/images/seats/L.png'
},
M: {
name: 'M',
url: '/static/images/seats/M.png'
},
N: {
name: 'N',
url: '/static/images/seats/N.png'
},
O: {
name: 'O',
url: '/static/images/seats/O.png'
},
P: {
name: 'P',
url: '/static/images/seats/P.png'
},
Q: {
name: 'Q',
url: '/static/images/seats/Q.png'
},
R: {
name: 'R',
url: '/static/images/seats/R.png'
},
S: {
name: 'S',
url: '/static/images/seats/S.png'
},
T: {
name: 'T',
url: '/static/images/seats/T.png'
},
U: {
name: 'U',
url: '/static/images/seats/U.png'
},
V: {
name: 'V',
url: '/static/images/seats/V.png'
},
W: {
name: 'W',
url: '/static/images/seats/W.png'
},
X: {
name: 'X',
url: '/static/images/seats/X.png'
},
Y: {
name: 'Y',
url: '/static/images/seats/Y.png'
},
Z: {
name: 'Z',
url: '/static/images/seats/Z.png'
}
}; //默认图片
ctx.scale(this.newScale, this.newScale);
this.data1.seat_list.forEach((item) => {
// 可售座位颜色处理
if (this.select_grade) {
if (item.select == 1) {
ctx.drawImage(
img['01'].url,
0,
0,
baseSize.x,
baseSize.y,
item.x * (baseSize.x + baseSpace.x),
item.y * (baseSize.y + baseSpace.y),
baseSize.x,
baseSize.y
);
} else {
if (item.grade == this.select_grade) {
if (item.ticket_status === 0) {
ctx.drawImage(
img[item.grade].url,
0,
0,
baseSize.x,
baseSize.y,
item.x * (baseSize.x + baseSpace.x),
item.y * (baseSize.y + baseSpace.y),
baseSize.x,
baseSize.y
);
} else {
ctx.drawImage(
img['00'].url,
0,
0,
baseSize.x,
baseSize.y,
item.x * (baseSize.x + baseSpace.x),
item.y * (baseSize.y + baseSpace.y),
baseSize.x,
baseSize.y
);
}
}
}
} else {
if (item.select == 1) {
ctx.drawImage(
img['01'].url,
0,
0,
baseSize.x,
baseSize.y,
item.x * (baseSize.x + baseSpace.x),
item.y * (baseSize.y + baseSpace.y),
baseSize.x,
baseSize.y
);
} else {
if (item.ticket_status === 0) {
ctx.drawImage(
img[item.grade].url,
0,
0,
baseSize.x,
baseSize.y,
item.x * (baseSize.x + baseSpace.x),
item.y * (baseSize.y + baseSpace.y),
baseSize.x,
baseSize.y
);
} else {
ctx.drawImage(
img['00'].url,
0,
0,
baseSize.x,
baseSize.y,
item.x * (baseSize.x + baseSpace.x),
item.y * (baseSize.y + baseSpace.y),
baseSize.x,
baseSize.y
);
}
}
}
/* if (this.data.selected_seats) {
this.data.selected_seats.forEach((item) => {
ctx.drawImage(img["01"].url, 0, 0, baseSize.x, baseSize.y, item.x * (baseSize.x + baseSpace.x) - maxCanvasW / 2, item.y * (baseSize.y + baseSpace.y) - maxCanvasH / 2,
baseSize.x, baseSize.y);
// ( Math.floor( item.x / ( baseSize.x + baseSpace.x ) ) + Math.floor( maxCanvasW / 2 * ( 1 - 1 / this.data.newScale ) / ( baseSize.x + baseSpace.x ) ) ) *(baseSize.x+baseSpace.x)-maxCanvasW/2
})
} */
});
ctx.draw();
},
make_order() {
var selected_seats = this.selected_seats;
var tid = '';
selected_seats.forEach((v, k) => {
tid = tid + ',' + String(v.ticket_id);
});
tid = tid.substring(1);
uni.navigateTo({
url: '../make_order/make_order?tid=' + tid + '&drama_id=' + this.drama_id
});
},
cancel_sel() {
console.log('占位：函数 cancel_sel 未声明');
}
}
};
</script>
<style></style>

1055
src/pages/make_order/choose_sit/choose_sit3.vue
View File

File diff suppressed because one or more lines are too long

647
src/pages/make_order/choose_sit/choose_sit_alipay.vue
Unescape View File

@ -0,0 +1,647 @@
<template>
<view>
<view style="background: #fff; position: fixed; top: 0; width: 100%; z-index: 1">
<view class="drma_title" style="font-size: 28rpx; color: #181818; padding: 20rpx 20rpx 0">
<view class="pic" @tap="getdrama_list" :data-drama_id="seat_data.prev_show">
<image
:src="'/static/images/ui/' +(seat_data.prev_show !== 0 ? 'dram_activeleft.png' : 'dram_left.png')"
alt="" />
</view>
<view>{{ seat_data.show_info.show_date }}</view>
<view class="pic" @tap="getdrama_list" :data-drama_id="seat_data.next_show">
<image
:src="'/static/images/ui/' +(seat_data.next_show !== 0 ? 'dram_activeright.png' : 'dram_right.png')"
alt="" />
</view>
</view>
<view class="seat_grade">
<view
:class="'seat_grade_info ' + (item.tkt_num == 0 ? 'null_tic' : '') + ' ' + (select_grade == item.grade ? 'select' : '')"
:data-num="item.tkt_num" :data-select_grade="item.grade" @tap="select_gradeFun"
v-for="(item, index) in seat_data.grade_list" :key="index">
<image :src="'/static/images/seats/' + item.grade + '.png'"
style="width:12px;height:12px;margin-left: 20rpx;"></image>
<view style="margin: 0 10rpx 0 10rpx">¥{{ item.price }}</view>
</view>
</view>
<view class="direction">
<view style="margin-top: -35rpx">舞台方向</view>
</view>
</view>
<view class="canvasView" @touchstart.stop.prevent="touch1.start" @touchmove.stop.prevent="touch1.move"
@touchend.stop.prevent="touch1.end" @touchcancel.stop.prevent="touch1.end">
<!-- #ifdef MP-ALIPAY || MP-BAIDU -->
<canvas id="myCanvas" canvas-id="myCanvas" :width="maxCanvasW" :height="maxCanvasH"
:style="'height:'+maxCanvasH * scaleNum +'px;width:'+ maxCanvasW * scaleNum +'px;left:'+(move.x)+'px;top:'+(move.y+canvasTopGap)+'px;'"></canvas>
<!-- #endif -->
</view>
<view class="bottom">
<view class="seat_tips" v-if="selected_seats.length">
<view class="loc" v-for="(item, index) in selected_seats" :key="index">
<view class="info">
<image :src="'/static/images/seats/' + item.grade + '.png'" style="width: 16px;height: 16px;">
</image>
<text :decode="true" style="font-size: 24rpx">&nbsp;{{ item.seat_info }}</text>
</view>
<image :data-ticket_id="item.ticket_id" src="/static/images/ui/close.png"
style="width: 16px;height: 16px;" @click="cancel_sel" />
</view>
</view>
<view class="submit">
<view class="cacu" v-if="total_price">
<view class="text">共计</view>
<view class="info">
<view class="price">
¥
<text style="font-size: 44rpx; font-weight: bold">{{ total_price }}.00</text>
</view>
<view class="num" v-if="selected_seats.length">已选择{{ selected_seats.length }}个座位</view>
</view>
</view>
<button class="button" :disabled="!total_price" @tap="make_order">下一步</button>
</view>
</view>
</view>
</template>
<script>
// pages/make_order/choose_sit/choose_sit.js
import {
httpUtil,
http
} from '../../../utils/util';
import MinaTouch from './mina-touch';
import seatImg from './seatImg.js';
export default {
data() {
return {
drama_id: null,
screenWidth: 375,
screenHeight: 764,
canvasTopGap: 175,
canvasBottomGap: 64,
ctx: null,
canvasImg: null,
select_grade: '',
selected_seats: [],
total_price: '',
max_select: 6,
//缩放比例（画布宽度适应屏幕）
scaleNum: 1,
// 二次放大比例(适应座位位置)
scaleNumTwice: 1,
//手动挪动偏移距离
move: {
x: 0,
y: 0
},
scaleShift: {
x: 0,
y: 0
},
tapTimeGap: true,
timer: 0,
};
}
/**
* 生命周期函数--监听页面加载
*/
,
async onLoad(options) {
let that = this
uni.getSystemInfo({
success(res) {
//获取屏幕的宽成功
that.screenWidth = res.screenWidth
that.screenHeight = res.screenHeight
// #ifdef MP-ALIPAY
that.screenWidth = res.windowWidth
that.screenHeight = res.windowHeight
// #endif
}
});
await this.initData(options.drama_id)
this.initTouch()
},
methods: {
async initData(drama_id) {
let seat_data = await httpUtil('/api/v1/seat-list', 'get', {
drama_id
})
let maxCanvasW = 26 * (seat_data.max_x)
let maxCanvasH = 26 * (seat_data.max_y)
if (this.screenWidth < maxCanvasW) {
this.scaleNum = (this.screenWidth / maxCanvasW).toFixed(3) //缩放比例
this.scaleNumTwice = (this.screenWidth / 60 / 20).toFixed(3)
}
await this.setData({
drama_id,
seat_data,
maxCanvasW,
maxCanvasH,
selected_seats: [],
total_price: '',
select_grade: ''
})
this.creatCanvas()
},
async creatCanvas() {
// #ifdef MP-ALIPAY || MP-BAIDU
var ctx = this.ctx || uni.createCanvasContext('myCanvas')
// #ifdef MP-BAIDU
ctx.save()
// ctx.scale(this.scaleNum, this.scaleNum)
// #endif
ctx.alpha = false;
this.setData({
ctx: ctx
})
// ctx.width = this.maxCanvasW
// ctx.height = this.maxCanvasH
this.initCanvas(ctx)
// #endif
},
async initCanvas(ctx) {
ctx.clearRect(0, 0, this.maxCanvasW, this.maxCanvasH)
ctx.beginPath();
this.seat_data.seat_list.forEach((item) => {
if((this.select_grade!=''&&item.ticket_status===0&&this.select_grade===item.grade)
||(this.select_grade==''&&item.ticket_status===0)) {
this.drawSeat(ctx, item.x * 25, item.y * 25, seatImg[item.grade].color)
} else {
this.drawSeat(ctx, item.x * 25, item.y * 25, seatImg['00'].color)
}
})
if (this.selected_seats.length > 0) {
this.selected_seats.forEach((v, k) => {
// ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
this.drawSeat(this.ctx, v.x * 25, v.y * 25, seatImg['01'].color)
})
}
// #ifndef MP-WEIXIN || MP-TOUTIAO
setTimeout(() => {
// ctx.restore()
ctx.draw(true);
}, 200)
// #endif
},
drawSeat(ctx, x, y, fillColor) {
// #ifdef MP-WEIXIN || MP-TOUTIAO
ctx.fillStyle = fillColor
// #endif
// #ifdef MP-ALIPAY
ctx.setFillStyle(fillColor)
// #endif
ctx.fillRect(x, y, 20, 20);
// ctx.stroke();
},
// canvasToImg() {
// let that = this
// uni.canvasToTempFilePath({
// x: 0,
// y: 0,
// width: that.maxCanvasW,
// height: that.maxCanvasH,
// destWidth: that.maxCanvasW * that.scaleNum,
// destHeight: that.maxCanvasW * that.scaleNum,
// canvasId: 'myCanvas',
// success: function(res) {
// that.canvasImg = res.tempFilePath
// }
// })
// },
cancel_sel(e) {
let ticket_id = e.currentTarget.dataset.ticket_id
this.selected_seats.find((v, k) => {
if (v.ticket_id === ticket_id) {
// this.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
if (this.select_grade != '' && v.grade != this.select_grade) {
this.drawSeat(this.ctx, v.x * 25, v.y * 25, seatImg['00'].color)
} else {
this.drawSeat(this.ctx, v.x * 25, v.y * 25, seatImg[v.grade].color)
}
// #ifndef MP-WEIXIN || MP-TOUTIAO
this.ctx.draw(true)
// #endif
this.selected_seats.splice(k, 1)
return true
}
})
this.price_cac(this.selected_seats);
},
initTouch() {
let that = this
new MinaTouch(this, 'touch1', {
touchStart: function() {},
touchMove: function() {},
touchEnd: function() {},
touchCancel: function() {},
//一个手指以上触摸屏幕触发
multipointStart: function() {
// clearTimeout(this.timer)
that.setData({
scaleListen: true
})
},
//当手指离开，屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
multipointEnd: function() {
that.setData({
scaleListen: false
})
},
//点按触发，覆盖下方3个点击事件，doubleTap时触发2次
tap: function() {
},
//双击屏幕触发
doubleTap: function() {
// that.scaleNum = (that.scaleNum * 1.3).toFixed(3)
// that.move = {
// x: that.move.x *1.3- that.screenWidth / 2 * (1.3 - 1) ,
// y: that.move.y *1.3- (that.screenHeight/ 2 - that.canvasTopGap) * (1.3 - 1)
// }
if (that.scaleNum.fixed(1) === that.scaleNumTwice.fixed(1)) {
return
}
let singleZoom = that.scaleNumTwice / that.scaleNum
that.scaleNum = that.scaleNumTwice
that.move = {
x: that.move.x * singleZoom - that.screenWidth / 2 * (singleZoom - 1),
y: that.move.y * singleZoom - (that.screenHeight / 2 - that.canvasTopGap) * (
singleZoom - 1)
}
},
//长按屏幕750ms触发
longTap: function() {
// if (that.maxCanvasW * that.scaleNum > that.screenWidth * 5) {
// return
// }
// that.scaleNum = that.scaleNum * 2
},
//单击屏幕触发，包括长按
singleTap: function(e) {
if (!that.tapTimeGap) {
return
}
// #ifdef MP-ALIPAY
let select_position = {
x: e.changedTouches[0].x || e.changedTouches[0].pageX,
y: e.changedTouches[0].y || e.changedTouches[0].pageY
}
// #endif
// #ifndef MP-ALIPAY
let select_position = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
}
// #endif
let cur_seat = {
x: Math.floor((select_position.x - that.move.x) / 25 / that.scaleNum),
y: Math.floor((select_position.y - that.canvasTopGap - that.move.y) / 25 / that
.scaleNum)
}
if (that.selected_seats.find((v, k) => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
// #ifdef MP-BAIDU
// that.ctx.save()
// that.ctx.scale(that.scaleNum, that.scaleNum)
// #endif
// that.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
if (that.select_grade != '' && v.grade != that.select_grade) {
that.drawSeat(that.ctx, v.x * 25, v.y * 25, seatImg['00'].color)
} else {
that.drawSeat(that.ctx, v.x * 25, v.y * 25, seatImg[v.grade].color)
}
// that.ctx.restore()
// #ifndef MP-WEIXIN || MP-TOUTIAO
that.ctx.draw(true)
// #endif
that.selected_seats.splice(k, 1)
return true
}
})) {
that.price_cac(that.selected_seats)
return
}
// 判断是否超过最大可选
if (that.selected_seats.length >= that.max_select) {
uni.showToast({
title: '单次最多选座6个',
icon: 'fail',
duration: 500
})
return
}
that.seat_data.seat_list.find(v => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
that.selected_seats.push(v);
// that.ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
that.drawSeat(that.ctx, v.x * 25, v.y * 25, seatImg['01'].color)
// that.ctx.restore()
// #ifndef MP-WEIXIN || MP-TOUTIAO
that.ctx.draw(true)
// #endif
return true
}
})
that.price_cac(that.selected_seats)
},
//evt.angle代表两个手指旋转的角度
rotate: function(evt) {
},
//evt.zoom代表两个手指缩放的比例(多次缩放的累计值),evt.singleZoom代表单次回调中两个手指缩放的比例
pinch: function(evt) {
that.tapTimeGap = false
let singleZoom = Math.sqrt(Math.sqrt(evt.singleZoom));
if (singleZoom > 1.6 || singleZoom < 0.6) {
return
}
if (singleZoom < 1 && that.maxCanvasW * that.scaleNum < that.screenWidth * 7 / 8) {
return
} else
if (singleZoom > 1 && that.maxCanvasW * that.scaleNum > that.screenWidth * 5) {
return
}
that.scaleNum = (that.scaleNum * singleZoom).toFixed(3)
that.move = {
x: that.move.x * singleZoom - that.screenWidth / 2 * (singleZoom - 1),
y: that.move.y * singleZoom - (that.screenHeight / 2 - that.canvasTopGap) * (
singleZoom - 1)
}
this.timer = setTimeout(() => {
that.tapTimeGap = true
}, 1000)
},
//evt.deltaX和evt.deltaY代表在屏幕上移动的距离,evt.target可以用来判断点击的对象
pressMove: function(evt) {
if (evt.deltaX > 100 || evt.deltaY > 100) {
return
}
if (that.move.x > that.screenWidth / 2 && evt.deltaX > 0) {
return
} else
if (that.move.x < 0 && (that.maxCanvasW * that.scaleNum + that.move.x) < that
.screenWidth / 2 && evt.deltaX < 0) {
return
}
if ((that.move.y + that.canvasBottomGap) > that.screenHeight / 2 && evt.deltaY > 0) {
return
} else
if (that.move.y < 0 && (that.maxCanvasH * that.scaleNum + that.move.y + that
.canvasTopGap) < that
.screenHeight / 2 && evt.deltaY < 0) {
return
}
that.setData({
move: {
x: that.move.x + evt.deltaX,
y: that.move.y + evt.deltaY
}
})
},
//在touch结束触发，evt.direction代表滑动的方向 ['Up','Right','Down','Left']
swipe: function(evt) {
}
});
},
select_gradeFun(e) {
if (e.currentTarget.dataset.num !== 0) {
this.select_grade = (this.select_grade === e.currentTarget.dataset.select_grade) ? '' : e.currentTarget
.dataset.select_grade
// this.initCanvas(this.ctx)
if (this.selected_seats.length > 0) {
this.selected_seats.forEach((v, k) => {
// ctx.clearRect(v.x * 60, v.y * 60, 60, 50)
this.drawSeat(this.ctx, v.x * 25, v.y * 25, seatImg['01'].color)
})
}
// #ifndef MP-WEIXIN || MP-TOUTIAO
setTimeout(() => {
ctx.restore()
ctx.draw(true);
}, 200)
// #endif
this.scaleNum = (this.screenWidth / this.maxCanvasW).toFixed(3)
this.move = {
x: 0,
y: 0
}
}
},
// 计算票总价 '含多买折扣'
price_cac(selected_seats) {
const p = [];
const grade_price = [];
grade_price.push(this.seat_data.grade_price);
for (var x in grade_price[0]) {
let a = 0;
let arr = [];
for (let i of selected_seats) {
if (i.grade == x) {
a++;
arr.push({
row: i.row,
col: i.col,
floor: i.floor
});
}
}
if (grade_price[0][x][a]) {
p.push({
tkt_grade: x,
tkt_num: a,
tkt_pirce: grade_price[0][x][a],
tkt_loc: arr
});
}
}
let ii = 0;
for (let i in p) {
ii += parseInt(p[i].tkt_pirce);
}
this.setData({
total_price: ii
});
},
getdrama_list(e) {
let drama_id = e.currentTarget.dataset.drama_id;
if (drama_id == 0) {
return
}
this.initData(drama_id);
},
make_order() {
var selected_seats = this.selected_seats;
var tid = '';
selected_seats.forEach((v, k) => {
tid = tid + ',' + String(v.ticket_id);
});
tid = tid.substring(1);
uni.navigateTo({
url: '/pages/make_order/make_order/make_order?tid=' + tid + '&drama_id=' + this.drama_id
});
},
}
};
</script>
<style>
.canvasView {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
#myCanvas {
position: absolute;
/* border: 1px solid red; */
}
#myCanvas:hover {
/* border: 1px solid #ffffff; */
}
page {
width: 100%;
overflow: hidden;
}
.seat_grade {
display: flex;
flex-wrap: wrap;
color: #7b7b7b;
font-size: 24rpx;
padding: 40rpx 20rpx;
}
.seat_grade .seat_grade_info {
width: 20%;
margin: 10rpx;
display: flex;
padding: 10rpx 5rpx;
border-radius: 52rpx;
border: 2rpx solid #d2d2d2;
}
.seat_grade .null_tic {
background: #dddddd;
border: 2rpx solid #dddddd;
color: #ffffff;
}
.seat_grade .select {
background: #ffffff;
border: 2rpx solid #ff1d42;
color: #181818;
}
.direction {
width: 200rpx;
margin: 0 auto;
height: 0;
border-top: 37rpx solid #dddddd;
border-radius: 0 0 60rpx 60rpx;
/* border-right: 74rpx solid transparent;
border-left: 74rpx solid transparent; */
text-align: center;
font-size: 24rpx;
color: #f8f8f7;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
}
.bottom .seat_tips {
display: flex;
flex-wrap: wrap;
padding: 10rpx 20rpx;
background: #f8f8f7;
}
.bottom .seat_tips .loc {
width: 260rpx;
height: 50rpx;
background: #ffeef3;
border-radius: 26rpx;
display: flex;
justify-content: space-around;
align-items: center;
margin: 10rpx;
}
.bottom .seat_tips .loc .info {
display: flex;
align-items: center;
}
.bottom .submit {
border-top: 2rpx solid #dddddd;
display: flex;
height: 128rpx;
align-items: center;
background: #fff;
}
.bottom .submit .cacu {
display: flex;
align-items: center;
}
.bottom .submit .cacu .text {
font-size: 36rpx;
margin: 0 20rpx 0 30rpx;
}
.bottom .submit .cacu .info {}
.bottom .submit .cacu .info .price {
color: #ff1d42;
font-size: 32rpx;
}
.bottom .submit .cacu .info .num {
color: #1394f2;
font-size: 20rpx;
}
.bottom .submit .button {
width: 240rpx;
height: 72rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
margin-left: auto;
margin-right: 30rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #ffffff;
}
.drma_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.drma_title .pic {
width: 60rpx;
height: 60rpx;
}
.drma_title .pic image {
width: 100%;
height: 100%;
}
</style>

846
src/pages/make_order/choose_sit/choose_sit_baidu.vue
View File

File diff suppressed because one or more lines are too long

649
src/pages/make_order/choose_sit/choose_sit_toutiao.vue
Unescape View File

@ -0,0 +1,649 @@
<template>
<view>
<view style="background: #fff; position: fixed; top: 0; width: 100%; z-index: 1">
<view class="drma_title" style="font-size: 28rpx; color: #181818; padding: 20rpx 20rpx 0">
<view class="pic" @tap="getdrama_list" :data-drama_id="seat_data.prev_show">
<image
:src="'/static/images/ui/' +(seat_data.prev_show !== 0 ? 'dram_activeleft.png' : 'dram_left.png')"
alt="" />
</view>
<view>{{ seat_data.show_info.show_date }}</view>
<view class="pic" @tap="getdrama_list" :data-drama_id="seat_data.next_show">
<image
:src="'/static/images/ui/' +(seat_data.next_show !== 0 ? 'dram_activeright.png' : 'dram_right.png')"
alt="" />
</view>
</view>
<view class="seat_grade">
<view
:class="'seat_grade_info ' + (item.tkt_num == 0 ? 'null_tic' : '') + ' ' + (select_grade == item.grade ? 'select' : '')"
:data-num="item.tkt_num" :data-select_grade="item.grade" @tap="select_gradeFun"
v-for="(item, index) in seat_data.grade_list" :key="index">
<image :src="'/static/images/seats/' + item.grade + '.png'"
style="width:12px;height:12px;margin-left: 20rpx;"></image>
<view style="margin: 0 10rpx 0 10rpx">¥{{ item.price }}</view>
</view>
</view>
<view class="direction">
<view style="margin-top: -35rpx">舞台方向</view>
</view>
</view>
<view class="canvasView" @touchstart.stop.prevent="touch1.start" @touchmove.stop.prevent="touch1.move"
@touchend.stop.prevent="touch1.end" @touchcancel.stop.prevent="touch1.end">
<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
<canvas id="myCanvas" type="2d"
:style="'height:'+maxCanvasH* scaleNum+'px;width:'+ maxCanvasW* scaleNum +'px;left:'+(move.x)+'px;top:'+(move.y+canvasTopGap)+'px;'"></canvas>
<!-- #endif -->
</view>
<view class="bottom">
<view class="seat_tips" v-if="selected_seats.length">
<view class="loc" v-for="(item, index) in selected_seats" :key="index">
<view class="info">
<image :src="'/static/images/seats/' + item.grade + '.png'" style="width: 16px;height: 16px;">
</image>
<text :decode="true" style="font-size: 24rpx">&nbsp;{{ item.seat_info }}</text>
</view>
<image :data-ticket_id="item.ticket_id" src="/static/images/ui/close.png"
style="width: 16px;height: 16px;" @click="cancel_sel" />
</view>
</view>
<view class="submit">
<view class="cacu" v-if="total_price">
<view class="text">共计</view>
<view class="info">
<view class="price">
¥
<text style="font-size: 44rpx; font-weight: bold">{{ total_price }}.00</text>
</view>
<view class="num" v-if="selected_seats.length">已选择{{ selected_seats.length }}个座位</view>
</view>
</view>
<button class="button" :disabled="!total_price" @tap="make_order">下一步</button>
</view>
</view>
</view>
</template>
<script>
// pages/make_order/choose_sit/choose_sit.js
import {
httpUtil,
http
} from '../../../utils/util';
import MinaTouch from './mina-touch';
import seatImg from './seatImg.js';
export default {
data() {
return {
drama_id: null,
screenWidth: 375,
screenHeight: 764,
canvasTopGap: 175,
canvasBottomGap: 64,
ctx: null,
canvasImg: null,
select_grade: '',
selected_seats: [],
total_price: '',
max_select: 6,
//缩放比例（画布宽度适应屏幕）
scaleNum: 1,
// 二次放大比例(适应座位位置)
scaleNumTwice: 1,
//手动挪动偏移距离
move: {
x: 0,
y: 0
},
scaleShift: {
x: 0,
y: 0
},
tapTimeGap: true,
timer: 0,
};
}
/**
* 生命周期函数--监听页面加载
*/
,
async onLoad(options) {
let that = this
uni.getSystemInfo({
success(res) {
//获取屏幕的宽成功
that.screenWidth = res.screenWidth
that.screenHeight = res.screenHeight
// #ifdef MP-ALIPAY
that.screenWidth = res.windowWidth
that.screenHeight = res.windowHeight
// #endif
}
});
this.initData(options.drama_id)
this.initTouch();
},
onShow() {
this.initData(this.drama_id)
},
methods: {
async initData(drama_id) {
let seat_data = await httpUtil('/api/v1/seat-list', 'get', {
drama_id
})
let maxCanvasW = 25 * (seat_data.max_x + 1)
let maxCanvasH = 25 * (seat_data.max_y + 1)
if (this.screenWidth < maxCanvasW) {
this.scaleNum = (this.screenWidth / maxCanvasW).toFixed(3) //缩放比例
this.scaleNumTwice = (this.screenWidth / 60 / 20).toFixed(3)
}
this.setData({
drama_id,
seat_data,
maxCanvasW,
maxCanvasH,
selected_seats: [],
total_price: '',
select_grade: ''
})
this.creatCanvas()
},
async creatCanvas() {
// #ifdef MP-WEIXIN || MP-TOUTIAO
if (this.ctx) {
this.initCanvas(this.ctx)
return
}
wx.createSelectorQuery().select('#myCanvas')
.fields({
node: true,
size: true
})
.exec((res) => {
const canvas = res[0].node
const ctx = canvas.getContext('2d')
canvas.width = this.maxCanvasW
canvas.height = this.maxCanvasH
this.setData({
ctx: ctx
})
this.initCanvas(ctx)
})
// #endif
},
async initCanvas(ctx) {
ctx.clearRect(0, 0, this.maxCanvasW, this.maxCanvasH)
ctx.beginPath();
this.seat_data.seat_list.forEach((item) => {
if (this.select_grade != '') {
if (item.ticket_status === 0 && this.select_grade === item.grade) {
this.drawSeat(ctx, item.x * 25, item.y * 25, seatImg[item.grade].color)
} else {
this.drawSeat(ctx, item.x * 25, item.y * 25, seatImg['00'].color)
}
} else {
if (item.ticket_status === 0) {
this.drawSeat(ctx, item.x * 25, item.y * 25, seatImg[item.grade].color)
} else {
this.drawSeat(ctx, item.x * 25, item.y * 25, seatImg['00'].color)
}
}
})
if (this.selected_seats.length > 0) {
this.selected_seats.forEach((v, k) => {
ctx.clearRect(v.x * 25, v.y * 25, 20, 20)
this.drawSeat(this.ctx, v.x * 25, v.y * 25, seatImg['01'].color)
})
}
ctx.stroke();
// #ifndef MP-WEIXIN || MP-TOUTIAO
setTimeout(() => {
// ctx.restore()
ctx.draw(true);
}, 200)
// #endif
},
drawSeat(ctx, x, y, fillColor) {
// #ifdef MP-WEIXIN || MP-TOUTIAO
ctx.fillStyle = fillColor
// #endif
// #ifdef MP-ALIPAY
ctx.setFillStyle(fillColor)
// #endif
ctx.fillRect(x, y, 20, 20);
// ctx.stroke();
},
cancel_sel(e) {
let ticket_id = e.currentTarget.dataset.ticket_id
this.selected_seats.find((v, k) => {
if (v.ticket_id === ticket_id) {
this.ctx.clearRect(v.x * 25, v.y * 25, 20, 20)
if (this.select_grade != '' && v.grade != this.select_grade) {
this.drawSeat(this.ctx, v.x * 25, v.y * 25, seatImg['00'].color)
} else {
this.drawSeat(this.ctx, v.x * 25, v.y * 25, seatImg[v.grade].color)
}
// #ifndef MP-WEIXIN || MP-TOUTIAO
this.ctx.draw(true)
// #endif
this.selected_seats.splice(k, 1)
return true
}
})
this.price_cac(this.selected_seats);
},
initTouch() {
let that = this
new MinaTouch(this, 'touch1', {
touchStart: function() {},
touchMove: function() {},
touchEnd: function() {},
touchCancel: function() {},
//一个手指以上触摸屏幕触发
multipointStart: function() {
// clearTimeout(this.timer)
that.setData({
scaleListen: true
})
},
//当手指离开，屏幕只剩一个手指或零个手指触发(一开始只有一根手指也会触发)
multipointEnd: function() {
that.setData({
scaleListen: false
})
},
//点按触发，覆盖下方3个点击事件，doubleTap时触发2次
tap: function() {
},
//双击屏幕触发
doubleTap: function() {
// that.scaleNum = (that.scaleNum * 1.3).toFixed(3)
// that.move = {
// x: that.move.x *1.3- that.screenWidth / 2 * (1.3 - 1) ,
// y: that.move.y *1.3- (that.screenHeight/ 2 - that.canvasTopGap) * (1.3 - 1)
// }
if (that.scaleNum.fixed(1) === that.scaleNumTwice.fixed(1)) {
return
}
let singleZoom = that.scaleNumTwice / that.scaleNum
that.scaleNum = that.scaleNumTwice
that.move = {
x: that.move.x * singleZoom - that.screenWidth / 2 * (singleZoom - 1),
y: that.move.y * singleZoom - (that.screenHeight / 2 - that.canvasTopGap) * (
singleZoom - 1)
}
},
//长按屏幕750ms触发
longTap: function() {
// if (that.maxCanvasW * that.scaleNum > that.screenWidth * 5) {
// return
// }
// that.scaleNum = that.scaleNum * 2
},
//单击屏幕触发，包括长按
singleTap: function(e) {
if (!that.tapTimeGap) {
return
}
// #ifdef MP-ALIPAY
let select_position = {
x: e.changedTouches[0].x || e.changedTouches[0].pageX,
y: e.changedTouches[0].y || e.changedTouches[0].pageY
}
// #endif
// #ifndef MP-ALIPAY
let select_position = {
x: e.changedTouches[0].pageX,
y: e.changedTouches[0].pageY
}
// #endif
let cur_seat = {
x: Math.floor((select_position.x - that.move.x) / 25 / that.scaleNum),
y: Math.floor((select_position.y - that.canvasTopGap - that.move.y) / 25 / that
.scaleNum)
}
if (that.selected_seats.find((v, k) => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
// #ifdef MP-BAIDU
// that.ctx.save()
// that.ctx.scale(that.scaleNum, that.scaleNum)
// #endif
that.ctx.clearRect(v.x * 25, v.y * 25, 20, 20)
if (that.select_grade != '' && v.grade != that.select_grade) {
that.drawSeat(that.ctx, v.x * 25, v.y * 25, seatImg['00'].color)
} else {
that.drawSeat(that.ctx, v.x * 25, v.y * 25, seatImg[v.grade].color)
}
// that.ctx.restore()
// #ifndef MP-WEIXIN || MP-TOUTIAO
that.ctx.draw(true)
// #endif
that.selected_seats.splice(k, 1)
return true
}
})) {
that.price_cac(that.selected_seats)
return
}
// 判断是否超过最大可选
if (that.selected_seats.length >= that.max_select) {
uni.showToast({
title: '单次最多选座6个',
icon: 'fail',
duration: 500
})
return
}
that.seat_data.seat_list.find(v => {
if (cur_seat.x == v.x && cur_seat.y == v.y && v.ticket_status === 0) {
that.selected_seats.push(v);
that.ctx.clearRect(v.x * 25, v.y * 25, 20, 20)
that.drawSeat(that.ctx, v.x * 25, v.y * 25, seatImg['01'].color)
// that.ctx.restore()
// #ifndef MP-WEIXIN || MP-TOUTIAO
that.ctx.draw(true)
// #endif
return true
}
})
that.price_cac(that.selected_seats)
},
//evt.angle代表两个手指旋转的角度
rotate: function(evt) {
},
//evt.zoom代表两个手指缩放的比例(多次缩放的累计值),evt.singleZoom代表单次回调中两个手指缩放的比例
pinch: function(evt) {
that.tapTimeGap = false
let singleZoom = Math.sqrt(Math.sqrt(evt.singleZoom));
if (singleZoom > 1.6 || singleZoom < 0.6) {
return
}
if (singleZoom < 1 && that.maxCanvasW * that.scaleNum < that.screenWidth * 7 / 8) {
return
} else
if (singleZoom > 1 && that.maxCanvasW * that.scaleNum > that.screenWidth * 5) {
return
}
that.scaleNum = (that.scaleNum * singleZoom).toFixed(3)
that.move = {
x: that.move.x * singleZoom - that.screenWidth / 2 * (singleZoom - 1),
y: that.move.y * singleZoom - (that.screenHeight / 2 - that.canvasTopGap) * (
singleZoom - 1)
}
this.timer = setTimeout(() => {
that.tapTimeGap = true
}, 1000)
},
//evt.deltaX和evt.deltaY代表在屏幕上移动的距离,evt.target可以用来判断点击的对象
pressMove: function(evt) {
if (evt.deltaX > 100 || evt.deltaY > 100) {
return
}
if (that.move.x > that.screenWidth / 2 && evt.deltaX > 0) {
return
} else
if (that.move.x < 0 && (that.maxCanvasW * that.scaleNum + that.move.x) < that
.screenWidth / 2 && evt.deltaX < 0) {
return
}
if ((that.move.y + that.canvasBottomGap) > that.screenHeight / 2 && evt.deltaY > 0) {
return
} else
if (that.move.y < 0 && (that.maxCanvasH * that.scaleNum + that.move.y + that
.canvasTopGap) < that
.screenHeight / 2 && evt.deltaY < 0) {
return
}
that.setData({
move: {
x: that.move.x + evt.deltaX,
y: that.move.y + evt.deltaY
}
})
},
//在touch结束触发，evt.direction代表滑动的方向 ['Up','Right','Down','Left']
swipe: function(evt) {
}
});
},
select_gradeFun(e) {
if (e.currentTarget.dataset.num !== 0) {
this.select_grade = (this.select_grade === e.currentTarget.dataset.select_grade) ? '' : e.currentTarget
.dataset.select_grade
// this.initCanvas(this.ctx)
if (this.selected_seats.length > 0) {
this.selected_seats.forEach((v, k) => {
ctx.clearRect(v.x * 25, v.y * 25, 20, 20)
this.drawSeat(this.ctx, v.x * 25, v.y * 25, seatImg['01'].color)
})
}
// #ifndef MP-WEIXIN || MP-TOUTIAO
setTimeout(() => {
ctx.restore()
ctx.draw(true);
}, 200)
// #endif
this.scaleNum = (this.screenWidth / this.maxCanvasW).toFixed(3)
this.move = {
x: 0,
y: 0
}
}
},
// 计算票总价 '含多买折扣'
price_cac(selected_seats) {
const p = [];
const grade_price = [];
grade_price.push(this.seat_data.grade_price);
for (var x in grade_price[0]) {
let a = 0;
let arr = [];
for (let i of selected_seats) {
if (i.grade == x) {
a++;
arr.push({
row: i.row,
col: i.col,
floor: i.floor
});
}
}
if (grade_price[0][x][a]) {
p.push({
tkt_grade: x,
tkt_num: a,
tkt_pirce: grade_price[0][x][a],
tkt_loc: arr
});
}
}
let ii = 0;
for (let i in p) {
ii += parseInt(p[i].tkt_pirce);
}
this.setData({
total_price: ii
});
},
getdrama_list(e) {
let drama_id = e.currentTarget.dataset.drama_id;
if (drama_id == 0) {
return
}
this.initData(drama_id);
},
make_order() {
var selected_seats = this.selected_seats;
var tid = '';
selected_seats.forEach((v, k) => {
tid = tid + ',' + String(v.ticket_id);
});
tid = tid.substring(1);
uni.navigateTo({
url: '/pages/make_order/make_order/make_order?tid=' + tid + '&drama_id=' + this.drama_id
});
},
}
};
</script>
<style>
.canvasView {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}
#myCanvas {
position: absolute;
/* border: 1px solid red; */
}
#myCanvas:hover {
/* border: 1px solid #ffffff; */
}
page {
width: 100%;
overflow: hidden;
}
.seat_grade {
display: flex;
flex-wrap: wrap;
color: #7b7b7b;
font-size: 24rpx;
padding: 40rpx 20rpx;
}
.seat_grade .seat_grade_info {
width: 20%;
margin: 10rpx;
display: flex;
padding: 10rpx 5rpx;
border-radius: 52rpx;
border: 2rpx solid #d2d2d2;
}
.seat_grade .null_tic {
background: #dddddd;
border: 2rpx solid #dddddd;
color: #ffffff;
}
.seat_grade .select {
background: #ffffff;
border: 2rpx solid #ff1d42;
color: #181818;
}
.direction {
width: 200rpx;
margin: 0 auto;
height: 0;
border-top: 37rpx solid #dddddd;
border-radius: 0 0 60rpx 60rpx;
/* border-right: 74rpx solid transparent;
border-left: 74rpx solid transparent; */
text-align: center;
font-size: 24rpx;
color: #f8f8f7;
}
.bottom {
position: fixed;
bottom: 0;
width: 100%;
}
.bottom .seat_tips {
display: flex;
flex-wrap: wrap;
padding: 10rpx 20rpx;
background: #f8f8f7;
}
.bottom .seat_tips .loc {
width: 260rpx;
height: 50rpx;
background: #ffeef3;
border-radius: 26rpx;
display: flex;
justify-content: space-around;
align-items: center;
margin: 10rpx;
}
.bottom .seat_tips .loc .info {
display: flex;
align-items: center;
}
.bottom .submit {
border-top: 2rpx solid #dddddd;
display: flex;
height: 128rpx;
align-items: center;
background: #fff;
}
.bottom .submit .cacu {
display: flex;
align-items: center;
}
.bottom .submit .cacu .text {
font-size: 36rpx;
margin: 0 20rpx 0 30rpx;
}
.bottom .submit .cacu .info {}
.bottom .submit .cacu .info .price {
color: #ff1d42;
font-size: 32rpx;
}
.bottom .submit .cacu .info .num {
color: #1394f2;
font-size: 20rpx;
}
.bottom .submit .button {
width: 240rpx;
height: 72rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
margin-left: auto;
margin-right: 30rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #ffffff;
}
.drma_title {
display: flex;
justify-content: space-between;
align-items: center;
}
.drma_title .pic {
width: 60rpx;
height: 60rpx;
}
.drma_title .pic image {
width: 100%;
height: 100%;
}
</style>

393
src/pages/make_order/choose_sit/mina-touch.js
Unescape View File

@ -0,0 +1,393 @@
const DEFAULT_OPTIONS = {
touchStart: function () {},
touchMove: function () {},
touchEnd: function () {},
touchCancel: function () {},
multipointStart: function () {},
multipointEnd: function () {},
tap: function () {},
doubleTap: function () {},
longTap: function () {},
singleTap: function () {},
rotate: function () {},
pinch: function () {},
pressMove: function () {},
swipe: function () {}
};
export default class MinaTouch {
constructor(_page, name, option = {}) {
this.preV = {
x: null,
y: null
};
this.pinchStartLen = null;
this.scale = 1;
this.isDoubleTap = false;
this.delta = null;
this.last = null;
this.now = null;
this.tapTimeout = null;
this.singleTapTimeout = null;
this.longTapTimeout = null;
this.swipeTimeout = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
this.preTapPosition = {
x: null,
y: null
};
this.lastZoom = 1;
this.tempZoom = 1;
try {
if (this._checkBeforeCreate(_page, name)) {
this._name = name;
this._option = { ...DEFAULT_OPTIONS, ...option };
_page[name] = this;
this._bindFunc(_page);
}
} catch (error) {
console.error(error);
}
}
_checkBeforeCreate(_page, name) {
if (!_page || !name) {
throw new Error('MinaTouch实例化时，必须传入page对象和引用名');
}
if (_page[name]) {
throw new Error('MinaTouch实例化error： ' + name + ' 已经存在page中');
}
return true;
}
_bindFunc(_page) {
let funcNames = ['start', 'move', 'end', 'cancel'];
for (let funcName of funcNames) {
_page[this._name + '.' + funcName] = this[funcName].bind(this);
}
}
start(evt) {
if (!evt.touches) {
return;
}
this.now = Date.now();
if (evt.touches[0].pageX == null) {
this.x1 = evt.touches[0].x;
} else {
this.x1 = evt.touches[0].pageX;
}
if (evt.touches[0].pageY == null) {
this.y1 = evt.touches[0].y;
} else {
this.y1 = evt.touches[0].pageY;
}
this.delta = this.now - (this.last || this.now);
this._option.touchStart(evt);
if (this.preTapPosition.x !== null) {
this.isDoubleTap = this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30;
}
this.preTapPosition.x = this.x1;
this.preTapPosition.y = this.y1;
this.last = this.now;
let preV = this.preV;
let len = evt.touches.length;
if (len > 1) {
this._cancelLongTap();
this._cancelSingleTap();
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = {
x: otx - this.x1,
y: oty - this.y1
};
preV.x = v.x;
preV.y = v.y;
this.pinchStartLen = getLen(preV);
this._option.multipointStart(evt);
}
this.longTapTimeout = setTimeout(
function () {
evt.type = 'longTap';
this._option.longTap(evt);
}.bind(this),
750
);
}
move(evt) {
if (!evt.touches) {
return;
}
let preV = this.preV;
let len = evt.touches.length;
let currentX = evt.touches[0].pageX == null ? evt.touches[0].x : evt.touches[0].pageX;
let currentY = evt.touches[0].pageY == null ? evt.touches[0].y : evt.touches[0].pageY;
this.isDoubleTap = false;
if (len > 1) {
// #ifdef MP-TOUTIAO
if(!this.toutuaoMultipointStart){
this._cancelLongTap();
this._cancelSingleTap();
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = {
x: otx - currentX,
y: oty - currentX
};
preV.x = v.x;
preV.y = v.y;
this.pinchStartLen = getLen(preV);
this._option.multipointStart(evt);
this.toutuaoMultipointStart = true
}
// #endif
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = {
x: otx - currentX,
y: oty - currentY
};
if (preV.x !== null) {
if (this.pinchStartLen > 0) {
evt.singleZoom = getLen(v) / this.pinchStartLen;
evt.zoom = evt.singleZoom * this.lastZoom;
this.tempZoom = evt.zoom;
evt.type = 'pinch';
this._option.pinch(evt);
}
evt.angle = getRotateAngle(v, preV);
evt.type = 'rotate';
this._option.rotate(evt);
}
preV.x = v.x;
preV.y = v.y;
} else {
if (this.x2 !== null) {
evt.deltaX = currentX - this.x2;
evt.deltaY = currentY - this.y2;
} else {
evt.deltaX = 0;
evt.deltaY = 0;
}
this._option.pressMove(evt);
}
this._option.touchMove(evt);
this._cancelLongTap();
this.x2 = currentX;
this.y2 = currentY;
if (len > 1) {
// evt.preventDefault();
}
}
end(evt) {
if (!evt.changedTouches) {
return;
}
this._cancelLongTap();
let self = this;
evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2); //在结束钩子都加入方向判断，但触发swipe瞬时必须位移大于30
if (evt.touches.length < 2) {
this.lastZoom = this.tempZoom;
this._option.multipointEnd(evt);
this.toutuaoMultipointStart = false
}
this._option.touchEnd(evt); //swipe
if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) || (this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
// evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
this.swipeTimeout = setTimeout(function () {
evt.type = 'swipe';
self._option.swipe(evt);
}, 0);
} else {
this.tapTimeout = setTimeout(function () {
evt.type = 'tap';
self._option.tap(evt); // trigger double tap immediately
if (self.isDoubleTap) {
evt.type = 'doubleTap';
self._option.doubleTap(evt);
clearTimeout(self.singleTapTimeout);
self.isDoubleTap = false;
}
}, 0);
if (!self.isDoubleTap) {
self.singleTapTimeout = setTimeout(function () {
self._option.singleTap(evt);
}, 250);
}
}
this.preV.x = 0;
this.preV.y = 0;
this.scale = 1;
this.pinchStartLen = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
}
cancel(evt) {
clearTimeout(this.singleTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.longTapTimeout);
clearTimeout(this.swipeTimeout);
this._option.touchCancel(evt);
}
_cancelLongTap() {
clearTimeout(this.longTapTimeout);
}
_cancelSingleTap() {
clearTimeout(this.singleTapTimeout);
}
_swipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : y1 - y2 > 0 ? 'Up' : 'Down';
}
destroy() {
if (this.singleTapTimeout) {
clearTimeout(this.singleTapTimeout);
}
if (this.tapTimeout) {
clearTimeout(this.tapTimeout);
}
if (this.longTapTimeout) {
clearTimeout(this.longTapTimeout);
}
if (this.swipeTimeout) {
clearTimeout(this.swipeTimeout);
}
this._option.rotate = null;
this._option.touchStart = null;
this._option.multipointStart = null;
this._option.multipointEnd = null;
this._option.pinch = null;
this._option.swipe = null;
this._option.tap = null;
this._option.doubleTap = null;
this._option.longTap = null;
this._option.singleTap = null;
this._option.pressMove = null;
this._option.touchMove = null;
this._option.touchEnd = null;
this._option.touchCancel = null;
this.preV =
this.pinchStartLen =
this.scale =
this.isDoubleTap =
this.delta =
this.last =
this.now =
this.tapTimeout =
this.singleTapTimeout =
this.longTapTimeout =
this.swipeTimeout =
this.x1 =
this.x2 =
this.y1 =
this.y2 =
this.preTapPosition =
this.rotate =
this.touchStart =
this.multipointStart =
this.multipointEnd =
this.pinch =
this.swipe =
this.tap =
this.doubleTap =
this.longTap =
this.singleTap =
this.pressMove =
this.touchMove =
this.touchEnd =
this.touchCancel =
null;
return null;
}
}
function getLen(v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function getAngle(v1, v2) {
let mr = getLen(v1) * getLen(v2);
if (mr === 0) {
return 0;
}
let r = dot(v1, v2) / mr;
if (r > 1) {
r = 1;
}
return Math.acos(r);
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function getRotateAngle(v1, v2) {
let angle = getAngle(v1, v2);
if (cross(v1, v2) > 0) {
angle *= -1;
}
return (angle * 180) / Math.PI;
}

144
src/pages/make_order/choose_sit/seatImg.js
Unescape View File

@ -0,0 +1,144 @@
const seatImg = {
'00': {
name: 'default',
url: '/static/images/seats/00.png',
color:'#D8D8D8'
},
'01': {
name: 'checked',
url: '/static/images/seats/01.png',
color:'#007800'
},
A: {
name: 'A',
url: '/static/images/seats/A.png',
color:'#ff3b30'
},
B: {
name: 'B',
url: '/static/images/seats/B.png',
color:'#fe9400'
},
C: {
name: 'C',
url: '/static/images/seats/C.png',
color:'#f6eb77'
},
D: {
name: 'D',
url: '/static/images/seats/D.png',
color:'#4bd863'
},
E: {
name: 'E',
url: '/static/images/seats/E.png',
color:'#0079fe'
},
F: {
name: 'F',
url: '/static/images/seats/F.png',
color:'#e6109b'
},
G: {
name: 'G',
url: '/static/images/seats/G.png',
color:'#ebddd5'
},
H: {
name: 'H',
url: '/static/images/seats/H.png',
color:'#ff403a'
},
I: {
name: 'I',
url: '/static/images/seats/I.png',
color:'#f5a433'
},
J: {
name: 'J',
url: '/static/images/seats/J.png',
color:'#e8ff8c'
},
K: {
name: 'K',
url: '/static/images/seats/K.png',
color:'#bad4aa'
},
L: {
name: 'L',
url: '/static/images/seats/L.png',
color:'#abe0ff'
},
M: {
name: 'M',
url: '/static/images/seats/M.png',
color:'#e5daf9'
},
N: {
name: 'N',
url: '/static/images/seats/N.png',
color:'#b3907d'
},
O: {
name: 'O',
url: '/static/images/seats/O.png',
color:'#f45c93'
},
P: {
name: 'P',
url: '/static/images/seats/P.png',
color:'#db5200'
},
Q: {
name: 'Q',
url: '/static/images/seats/Q.png',
color:'#e8e363'
},
R: {
name: 'R',
url: '/static/images/seats/R.png',
color:'#2db3a0'
},
S: {
name: 'S',
url: '/static/images/seats/S.png',
color:'#bff1ff'
},
T: {
name: 'T',
url: '/static/images/seats/T.png',
color:'#ffe3fb'
},
U: {
name: 'U',
url: '/static/images/seats/U.png',
color:'#a60040'
},
V: {
name: 'V',
url: '/static/images/seats/V.png',
color:'#ffdec9'
},
W: {
name: 'W',
url: '/static/images/seats/W.png',
color:'#f6ffe3'
},
X: {
name: 'X',
url: '/static/images/seats/X.png',
color:'#8ab4e8'
},
Y: {
name: 'Y',
url: '/static/images/seats/Y.png',
color:'#ebf5df'
},
Z: {
name: 'Z',
url: '/static/images/seats/Z.png',
color:'#a82f5a'
}
};
module.exports = seatImg

184
src/pages/make_order/coupon/coupon.vue
View File

File diff suppressed because one or more lines are too long

778
src/pages/make_order/make_order/make_order.vue
Unescape View File

@ -0,0 +1,778 @@
<template>
<view>
<view :class="fee_detail ? 'shadow' : ''">
<view class="_container">
<view class="play_info">
<view class="_top">
<image class="img" :src="_info.show_info.show_pic" />
<view class="info">
<view class="title">{{ _info.show_info.show_name }}</view>
<view>
<view class="line">{{ _info.show_info.show_date }}</view>
<view class="line">{{ _info.show_info.city_name }}｜{{ _info.show_info.theater_name }}
</view>
</view>
<view class="line">
<image src="/static/images/ui/passedGreen.png" />
<text>不支持退票</text>
<block v-if="_info.show_info.is_invoice == 0">
<image src="/static/images/ui/closeRed.png" />
<text>不可开发票</text>
</block>
<block v-else-if="_info.show_info.is_invoice == 1">
<image src="/static/images/ui/passedGreen.png" />
<text>可开发票</text>
</block>
</view>
</view>
</view>
<view class="split-line"></view>
<view class="_bottom">
<view class="_ticket" v-for="(ticket_list, index) in _info.ticket_info" :key="index">
<view class="sit_info">¥{{ ticket_list.price }}*{{ ticket_list.tkt_num }}张</view>
<view style="display: flex; flex-wrap: wrap">
<view class="sit_info1" v-for="(item, index1) in ticket_list.list" :key="index1">
{{ item.seat_info }}
</view>
</view>
</view>
<view class="line1">
<navigator open-type="navigateBack" style="font-size: 24rpx; color: #999999">重新选座
</navigator>
<view style="font-size: 36rpx">
共
<text style="color: #ff1d42; font-weight: bold">¥{{ tprice }}</text>
</view>
</view>
</view>
</view>
</view>
<view class="cell">
<view class="line1">
<view class="title">取票方式</view>
<view class="value">短信票码</view>
</view>
</view>
<view class="cell">
<view class="line1">
<view class="title">取票人</view>
<view class="value">{{ _info.order_info.mobile }}</view>
</view>
<view class="tips">支付成功后，凭短信票码到剧场兑换纸质票入场，或直接入场</view>
</view>
<view style="background: #fff; margin-bottom: 20rpx">
<view class="cell cell1" v-if="_info.show_info.is_real_name == 1 || _info.show_info.is_real_name == 2">
<view class="line1">
<view style="display: flex; align-items: center">
<view style="width: 160rpx">观演人</view>
<view class="tips" style="margin: 0">
{{ _info.show_info.is_real_name == 2 ? '一证即可观演' : '一人一票实名观影，入场需携带对应证件' }}
</view>
</view>
<image src="/static/images/ui/add.png" style="width: 34rpx; height: 34rpx" @tap="viewer_nav" />
</view>
</view>
<radio-group v-if="_info.show_info.is_real_name == 2" class="checkboxGroup" @change="viewer_sel1">
<label v-for="(item, index) in viewer_info" :key="index" style="width: 100%;">
<view v-if="rolled ? index < 6 : true" class="line1" style="margin: 15rpx 0">
<view style="display: flex; align-items: center; font-size: 12px">
<view style="width: 160rpx">{{ item.name }}</view>
<view>{{ item.id_card }}</view>
</view>
<radio style="transform: scale(0.7)" :value="item.viewer_id" :checked="item.checked" />
<!-- <icon size="16" color="{{item.checked?'#07C160':'#CACACA'}}" type="success" /> -->
</view>
</label>
</radio-group>
<checkbox-group v-else-if="_info.show_info.is_real_name == 1" class="checkboxGroup"
@change="viewer_sel">
<label v-for="(item, index) in viewer_info" :key="index" style="width: 100%;">
<view v-if="rolled ? index < 6 : true" class="line1" style="margin: 15rpx 0">
<view style="display: flex; align-items: center; font-size: 12px">
<view style="width: 160rpx">{{ item.name }}</view>
<view>{{ item.id_card }}</view>
</view>
<checkbox style="transform: scale(0.7)" :value="item.viewer_id" :checked="item.checked" />
<!-- <icon size="16" color="{{item.checked?'#07C160':'#CACACA'}}" type="success" /> -->
</view>
</label>
</checkbox-group>
<view v-if="_info.viewer_info.length >= 6" class="roll" @tap="rolled=!rolled">
{{ rolled ? '展开观演人列表' : '收起观演人列表' }}
</view>
</view>
<view class="cell">
<view class="line1">
<view class="title">票价优惠</view>
<view class="value">-¥{{ _info.order_info.discount_price }}</view>
</view>
</view>
<navigator :url="'/pages/make_order/coupon/coupon?tid=' + tid + '&drama_id=' + drama_id" class="cell"
style="border: none">
<view class="line1">
<view class="title">优惠券</view>
<view class="value" style="display: flex; align-items: center">
<text v-if="coupon">-¥{{ coupon.subtract }}</text>
<image src="/static/images/ui/right1.png" style="width: 26rpx; height: 26rpx" />
</view>
</view>
</navigator>
<view style="margin-top: 400rpx; height: 2rpx" />
</view>
<view class="submit" style="border-radius: none">
<view v-if="!fee_detail">
<view style="display: flex; align-items: center; margin: 10px 20px">
<!-- #ifndef MP-ALIPAY || MP-BAIDU -->
<checkbox class="checkBox" :checked="agreementChecked" @tap="agreementChecked=!agreementChecked"></checkbox>
<!-- #endif -->
<!-- #ifdef MP-BAIDU -->
<checkbox class="checkBox" @tap="agreementChecked=!agreementChecked" :value="agreementChecked"></checkbox>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<checkbox class="checkBox" :checked="agreementChecked" @change="agreementChecked=!agreementChecked"></checkbox>
<!-- #endif -->
<text class="check">购票须先同意</text>
<view @tap="agreement" style="color: #1394f2; font-size: 28rpx">《服务条款》</view>
</view>
</view>
<view v-else class="fee_detail">
<view class="title">费用明细</view>
<view class="ln" style="font-weight: normal; font-size: 24rpx"
v-for="(item, index) in _info.ticket_info" :key="index">
<view class="text l">¥{{ item.price }}</view>
<view class="line"></view>
<view class="text r">{{ item.tkt_num }}张</view>
</view>
<view class="ln">
<view class="text l">商品合计</view>
<view class="line"></view>
<view class="text r">¥{{ tprice }}</view>
</view>
<view class="ln">
<view class="text l">票价优惠</view>
<view class="line"></view>
<view class="text r">-¥{{ _info.order_info.discount_price }}</view>
</view>
<view class="ln" v-if="coupon">
<view class="text l">优惠券</view>
<view class="line"></view>
<view class="text r">{{ coupon.subtract }}</view>
</view>
</view>
<view style="display: flex; height: 128rpx; align-items: center; border-top: 1px solid #dddddd">
<view class="cacu">
<text class="text">实付款</text>
<!-- #ifdef MP-ALIPAY -->
<view style="margin: 0 5px;display: flex;align-items: center;">
<!-- #endif -->
<text :decode="true" class="fee">&nbsp;&nbsp;¥</text>
<text :decode="true" class="fee1">
{{
coupon
? _info.order_info.order_price - coupon.subtract >= 0
? _info.order_info.order_price - coupon.subtract
: 0
: _info.order_info.order_price
}}&nbsp;&nbsp;
</text>
<!-- #ifdef MP-ALIPAY -->
</view>
<!-- #endif -->
<text class="detail" @tap="fee_detail=!fee_detail">明细{{ fee_detail ? '▼' : '▲' }}</text>
</view>
<button class="button" @tap="onSubmit">提交订单</button>
</view>
</view>
<!-- #ifndef MP-BAIDU -->
<u-modal title="服务条款" :show="show1" @confirm="show1=false">
<view class="slot-content" style="margin: 40rpx 20rpx; font-size: 24rpx; color: #565656">
我已确认购票场次及价位，完全知悉并接收如下约定：话剧演出性质特殊且具有时效性，演出票一经售出不退不换
</view>
</u-modal>
<!-- #endif -->
<u-modal :show="show" title="确认支付" showCancelButton @confirm="pay" @cancel="show=false">
<view class="slot-content pay_detail">
<view class="ln">
<view>演出场馆：</view>
<view>{{ _info.show_info.city_name }}｜{{ _info.show_info.theater_name }}</view>
</view>
<view class="ln">
<view>演出时间：</view>
<view>{{ _info.show_info.show_date }}</view>
</view>
<view class="ln">
<view>支付金额：</view>
<view>
¥{{
coupon
? _info.order_info.order_price - coupon.subtract >= 0
? _info.order_info.order_price - coupon.subtract
: 0
: _info.order_info.order_price
}}
</view>
</view>
<view class="ln">
<view>购票数：</view>
<view>{{ _info.order_info.tkt_num }}张</view>
</view>
</view>
</u-modal>
</view>
</template>
<script>
// pages/user/make_order/make_order.js
import {
httpUtil,
http,
orderSubmit
} from '../../../utils/util';
export default {
data() {
return {
rolled: true,
agreementChecked: false,
show: false,
viewer_info: [],
max_viewer_num: 6,
tprice: '',
tid: '',
drama_id: '',
fee_detail: '',
show1: false,
viewer_id: '',
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let tid = options.tid;
let drama_id = options.drama_id;
http('/api/v1/order-confirm', 'post', {
tid
}).then((res) => {
let _info = res;
/* ？？？？？？自己算总价？？？？？？？？ */
let tprice = 0;
for (let i in _info.ticket_info) {
tprice += _info.ticket_info[i].price * _info.ticket_info[i].tkt_num;
}
this.getRecommendCoupons(options.drama_id, options.tid);
this.setData({
_info,
viewer_info: _info.viewer_info,
tprice,
tid,
drama_id
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
var curPage = getCurrentPages()[getCurrentPages().length - 1]
// #ifdef MP-BAIDU
if(curPage.data.more_viewer_info){
this.viewer_info.push(curPage.data.more_viewer_info)
}
// #endif
if (curPage.data.coupon) {
this.setData({
coupon: curPage.data.coupon
})
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
methods: {
agreement() {
this.show1 = true
// #ifdef MP-BAIDU
swan.showModal({
title: '服务条款',
content: '我已确认购票场次及价位，完全知悉并接收如下约定：话剧演出性质特殊且具有时效性，演出票一经售出不退不换',
showCancel:false
});
// #endif
},
viewer_nav() {
uni.navigateTo({
url: '/pages/user/viewer_list/viewer_list?situationAdd=1'
});
},
viewer_sel1(e) {
this.setData({
viewer_id: e.detail.value
});
},
viewer_sel(e) {
var items = this.viewer_info;
var values = e.detail.value;
for (var i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].viewer_id == values[j]) {
items[i].checked = true;
break;
}
}
}
var arr = '';
for (var i in items) {
if (items[i].checked) {
arr += ',' + items[i].viewer_id;
}
}
this.setData({
viewer_info: items,
viewer_id: arr.substring(1)
});
},
onSubmit() {
if (this._info.show_info.is_real_name == 1) {
var tid = this.tid;
var viewer_id = this.viewer_id;
if (viewer_id && tid.split(',').length == viewer_id.split(',').length) {
if (this.agreementChecked) {
this.setData({
show: true
});
} else {
uni.showToast({
title: '请勾选服务条款',
icon: 'none',
duration: 2000
});
}
} else {
uni.showToast({
title: '观演人数和座位数不符',
icon: 'none',
duration: 2000
});
}
} else {
if (this._info.show_info.is_real_name == 2) {
var tid = this.tid;
var viewer_id = this.viewer_id;
if (viewer_id) {
if (this.agreementChecked) {
this.setData({
show: true
});
} else {
uni.showToast({
title: '请勾选服务条款',
icon: 'none',
duration: 2000
});
}
} else {
uni.showToast({
title: '观演人数和座位数不符',
icon: 'none',
duration: 2000
});
}
} else {
if (this.agreementChecked) {
this.setData({
show: true
});
} else {
uni.showToast({
title: '请勾选服务条款',
icon: 'none',
duration: 2000
});
}
}
}
},
pay() {
if (this.show) {
this.setData({
show: false
});
var tid = this.tid;
var viewer_id = this.viewer_id;
let coupon = this.coupon;
let order_data = {
tid,
viewer_id
}
if (coupon && coupon.coupon_id && 'underfined' !== coupon.coupon_id) {
order_data.coupon_id = coupon.coupon_id
}
orderSubmit(order_data)
}
},
// 使用最大减免优惠券
getRecommendCoupons(drama_id, tid) {
http('/api/v1/coupon-list', 'post', {
drama_id: drama_id ? drama_id : this.data.drama_id,
tid,
mode: 1
}).then((Response) => {
if (Response.coupon_list.length > 0) {
let coupon_list = Response.coupon_list; // 去除日期格式
let a = [];
coupon_list.forEach((item) => {
if (item.status == 1) {
item.end_date = item.end_date.replace(/[\u4e00-\u9fa5]/g, '');
a.push(item);
}
});
coupon_list = a; // 优惠券筛选策略
function couponSort(list, params) {
let descList;
if (arguments[2] == 'asc') {
descList = list.sort((a, b) => {
return a[params] - b[params];
});
} else {
descList = list.sort((a, b) => {
return b[params] - a[params];
});
}
let l = [];
l.push(descList[0]);
descList.forEach((item, index) => {
if (index != 0 && item[params] == l[0][params]) {
l.push(item);
}
});
return l;
}
let recommendCoupons = couponSort(couponSort(couponSort(coupon_list, 'subtract'), 'full'),
'end_date', 'asc');
if (recommendCoupons && recommendCoupons.length > 0) {
this.setData({
coupon: recommendCoupons[0]
});
}
}
});
}
},
};
</script>
<style>
.line {
display: flex;
align-items: center;
}
.line1 {
display: flex;
justify-content: space-between;
align-items: center;
}
.shadow {
z-index: 99;
opacity: 0.6;
filter: alpha(opacity=60);
}
._container {
background-color: #ff446b;
padding: 30rpx 20rpx;
}
.play_info {
background-color: #ffffff;
border-radius: 10rpx;
}
.split-line {
position: relative;
flex: 0 0 0;
border-top: 2rpx dashed #eee;
}
.split-line:before,
.split-line:after {
content: '';
position: absolute;
width: 16rpx;
height: 32rpx;
background: #ff446b;
top: -18rpx;
z-index: 1;
}
.split-line:before {
border-radius: 0 32rpx 32rpx 0;
left: 0;
}
.split-line::after {
border-radius: 32rpx 0 0 32rpx;
right: 0;
}
._top {
display: flex;
padding: 20rpx;
}
._top .img {
background: #d8d8d8;
border-radius: 16rpx;
width: 168rpx;
height: 252rpx;
}
._top .info {
padding-left: 20rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
._top .info .title {
font-size: 32rpx;
font-weight: bold;
line-height: 48rpx;
}
._top .info .line {
font-size: 24rpx;
line-height: 48rpx;
display: flex;
align-items: center;
}
._top .info .line image {
width: 28rpx;
height: 28rpx;
}
._top .info .line text {
margin: 0 20rpx 0 10rpx;
}
._bottom {
padding: 20rpx 30rpx;
}
._bottom ._ticket {
font-size: 28rpx;
margin-bottom: 20rpx;
}
._bottom ._ticket .sit_info {
font-weight: bold;
}
._bottom ._ticket .sit_info1 {
font-size: 24rpx;
color: #7b7b7b;
width: 33%;
}
.cell {
padding: 40rpx;
border-bottom: 1rpx solid #dddddd;
font-size: 28rpx;
background: #fff;
color: #181818;
}
.cell .tips {
font-size: 24rpx;
color: #7b7b7b;
margin-top: 10rpx;
}
.cell1 {
padding: 40rpx 0;
margin: 0 40rpx;
}
.checkboxGroup {
margin: 15rpx 40rpx;
}
.roll {
text-align: center;
font-size: 24rpx;
color: #1394f2;
padding: 10rpx 0 30rpx 0;
}
.clp_item_dsn {
margin: 20rpx;
color: #323233;
}
.margin_top_bottom {
margin: 20rpx 0;
}
.submit {
position: fixed;
width: 100%;
bottom: 0;
background: #ffffff;
z-index: 99;
}
.checkBox {
transform: scale(0.7);
}
.check {
font-size: 28rpx;
}
.submit .fee_detail {}
.submit .fee_detail .title {
margin-top: 30rpx;
font-weight: bold;
text-align: center;
}
.submit .fee_detail .ln {
display: flex;
text-align: center;
margin: 20rpx 0;
font-size: 28rpx;
font-weight: bold;
}
.submit .fee_detail .ln .text {
width: 15%;
margin: 0 40rpx;
white-space: nowrap;
}
.l {
text-align: left;
}
.r {
text-align: right;
}
.submit .fee_detail .ln .line {
flex: 1;
border-bottom: 2rpx dashed #dddddd;
margin: auto;
}
.submit .cacu {
display: flex;
align-items: center;
margin: 0 40rpx;
}
.submit .cacu .text {
font-size: 28rpx;
font-weight: bold;
}
.submit .cacu .fee {
color: #ff1d42;
}
.submit .cacu .fee1 {
color: #ff1d42;
font-size: 44rpx;
font-weight: bold;
}
.submit .cacu .detail {
color: #1394f2;
font-size: 28rpx;
}
.submit .button {
width: 240rpx;
height: 72rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
margin-right: 30rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #ffffff;
/* #ifdef MP-ALIPAY */
margin-left: auto;
/* #endif */
}
.pay_detail {
margin: 40rpx 30rpx;
color: #333333;
font-size: 24rpx;
}
.pay_detail .ln {
display: flex;
justify-content: space-between;
line-height: 40rpx;
}
</style>

288
src/pages/make_order/random_sit/random_sit.vue
Unescape View File

@ -0,0 +1,288 @@
<template>
<view>
<view class="info">
<view class="title">{{info.show_info.show_name }}</view>
<view class="line">{{ info.show_info.city_name }}｜{{info.show_info.theater_name }}</view>
<view class="line">{{ info.show_info.show_date }}</view>
</view>
<view class="sit_sel">
<view class="sit_warning">《温馨提示：各票档分区，不对号入座，请确认后购买》</view>
<view class="title">选择票档</view>
<view class="selecter" v-for="(item, index) in grade_list">
<view class="price">¥{{ item.price }}</view>
<stepper :value="item.value"
:max="item.tkt_num > able_select ? (item.value ? able_select + item.value : able_select) : item.tkt_num"
@change="change($event,index)" />
<text v-if="item.tkt_num == 0">售罄</text>
</view>
</view>
<view class="submit" style="display: flex; height: 128rpx; align-items: center">
<view class="cacu" v-if="total">
<text class="text">合计：</text>
<text :decode="true" class="fee">&nbsp;&nbsp;¥</text>
<text :decode="true" class="fee1">{{ total }}&nbsp;&nbsp;</text>
</view>
<button class="button" :disabled="!total" @tap="onSubmit">下一步</button>
</view>
</view>
</template>
<script>
import stepper from '@/components/stepper/stepper';
// pages/make_order/random_sit/random_sit.js
import {
http,
httpUtil
} from '../../../utils/util';
export default {
components: {
stepper
},
data() {
return {
grade_list: [],
max_select: 6,
able_select: 6,
grade_seat: [],
drama_id: '',
info: [],
total: '',
tid: '',
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let drama_id = options.drama_id;
let that = this
this.setData({
drama_id
});
httpUtil('/api/v1/no-seat-list', 'get', {
drama_id
}).then((res) => {
that.setData({
info: res,
grade_list: res.grade_list
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
methods: {
change(e, index) {
let value = e.detail.value
let grade_list = this.grade_list;
grade_list[index].value = value;
let a = 0;
grade_list.forEach((v, i) => {
if (v.value && v.value !== 0) {
a = a + v.value;
}
});
this.setData({
grade_list,
able_select: this.max_select - a
});
let grade_price = this.info.grade_price;
let grade_seat = this.grade_seat;
let total = 0;
let none = true;
for (var grade in grade_price) {
if (grade_list[index].grade == grade) {
var price = grade_list[index].price;
grade_list[index].sub_price = grade_price[grade][value];
for (var i in grade_seat) {
if (grade_seat[i].grade == grade) {
grade_seat[i].tkt_num = value;
none = false;
this.setData({
grade_seat
});
}
}
if (none) {
grade_seat.push({
grade,
price,
tkt_num: value
});
this.setData({
grade_seat
});
}
}
}
for (var i in grade_list) {
if (grade_list[i].sub_price) {
total += parseInt(grade_list[i].sub_price);
}
}
this.setData({
total
});
},
onSubmit() {
let data = {
drama_id: this.info.show_info.drama_id,
grade_seat: JSON.stringify(this.grade_seat)
};
http('/api/v1/no-seat-ticket', 'post', data).then((res) => {
this.setData({
tid: res.tid
});
var tid = '';
res.tid.forEach((v, k) => {
tid = tid + ',' + String(v);
});
tid = tid.substring(1);
uni.navigateTo({
url: '/pages/make_order/make_order/make_order?tid=' + tid + '&drama_id=' + this
.drama_id
});
});
}
},
};
</script>
<style>
.info {
background: #fff;
padding: 20rpx 40rpx;
color: #181818;
}
.info .title {
font-size: 32rpx;
font-weight: bold;
}
.info .line {
font-size: 24rpx;
margin-top: 10rpx;
}
.sit_sel {
margin: 20rpx 0;
background-color: #fff;
padding: 0 40rpx;
}
.sit_warning {
text-align: center;
font-size: 24rpx;
color: #ff1d42;
line-height: 64rpx;
}
.sit_sel .title {
font-size: 28rpx;
font-weight: bold;
line-height: 64rpx;
}
.sit_sel .selecter {
display: flex;
justify-content: flex-start;
align-items: center;
line-height: 80rpx;
}
.sit_sel .selecter .price {
width: 200rpx;
font-size: 14px;
}
.sit_sel .selecter text {
margin-left: 60rpx;
font-size: 14px;
color: #ff1d42;
}
.submit {
position: fixed;
width: 100%;
bottom: 0;
border-top: 2rpx solid #dddddd;
background: #ffffff;
box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.2);
z-index: 99;
border-radius: 10px 10px 0px 0px;
}
.submit .cacu {
display: flex;
align-items: center;
margin: 0 30rpx;
}
.submit .cacu .text {
font-size: 28rpx;
font-weight: bold;
}
.submit .cacu .fee {
/* #ifdef MP-ALIPAY */
margin-left: 20rpx;
/* #endif */
color: #ff1d42;
}
.submit .cacu .fee1 {
color: #ff1d42;
font-size: 44rpx;
font-weight: bold;
}
.submit .button {
width: 240rpx;
height: 72rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
margin-left: auto;
margin-right: 30rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28rpx;
color: #ffffff;
}
</style>

458
src/pages/opera/IP_detail/IP_detail.vue
Unescape View File

@ -0,0 +1,458 @@
<template>
<view>
<image class="img" :src="IP_detail.ip_info.background_pic" mode="widthFix" style="width: 750rpx" />
<view class="front">
<view class="title">{{ IP_detail.ip_info.show_name }}</view>
<view class="_row">
<view style="width: 20%"></view>
<view style="color: #7b7b7b; font-size: 28rpx">
<text style="color: #1394f2">{{ IP_detail.ip_info.follow_total }}</text>
人想看
</view>
<view style="width: 20%; display: flex; justify-content: space-around; align-items: center">
<button @tap="_like" style="border: none;">
<image class="icon" :src="'/static/images/ui/' + (IP_detail.ip_info.is_follow ? 'liked' : 'like') + '.png'" />
</button>
<button open-type="share" style="border: none;">
<image class="icon" src="/static/images/ui/share.png" />
</button>
</view>
</view>
</view>
<view class="_block">
<view class="_title">
<view class="_icon" />
本剧亮点
</view>
<view class="_text">
<text>{{ IP_detail.ip_info.describe }}</text>
</view>
</view>
<view class="_block">
<view class="_title">
<view class="_icon" />
精彩现场
</view>
<scroll-view class="_flex" :scroll-x="true">
<block v-for="(item, index) in IP_detail.wonderful_list" :key="index">
<block v-if="item.type == 'image'">
<image class="_img" :src="item.url" :data-index="index" @tap="previewMedia" />
</block>
<!-- <block v-if="item.type == 'video'"><video class="_img" :src="item.url" @play="bindPlayCallBack" :id="'video_' + index" /></block> -->
</block>
</scroll-view>
</view>
<view class="_block" style="padding-bottom: 300rpx">
<view class="_title">
<view class="_icon" />
演出详情
</view>
<view class="img1">
<view class="img_cac" :style="rolled ? (IP_detail.show_detail[0].url ? 'height:1000rpx;overflow: hidden;' : '') : ''">
<block v-for="(item, index) in IP_detail.show_detail" :key="index">
<image class="img1_list" :src="item.url" mode="widthFix" />
</block>
</view>
<view class="roll" @tap="roll_spread">{{ rolled ? '展开演出详情' : '收起演出详情' }}</view>
</view>
</view>
<view class="_bottom">
<view class="_tip">
目前有
<text style="color: #ff425c" :decode="true">&nbsp;{{ IP_detail.show_total }}&nbsp;</text>
个剧场演出
</view>
<button :class="'_button ' + (IP_detail.show_total ? '' : 'disabled_')" :disabled="!IP_detail.show_total" @tap="show=true">
{{ IP_detail.show_total ? '查看演出计划' : '暂无演出计划' }}
</button>
</view>
<u-popup :round="10" :show="show" @close="show=false">
<view class="pop_title">{{ IP_detail.show_total }}个剧场在演</view>
<view style="height: 400px;overflow: auto;">
<view class="pop_row" v-for="(item, index) in IP_detail.show_list" :key="index">
<view class="_month">{{ item.month }}</view>
<view class="_city">
<view>{{ item.city_name }}</view>
<view class="dot" v-for="item in [1,2,3,4,5,6]"></view>
</view>
<view class="_content">
<view>
<image src="/static/images/ui/time.png" style="width: 24rpx; height: 24rpx; vertical-align: middle" />
<text style="vertical-align: middle;margin-left: 2px;">{{ item.show_date }}</text>
</view>
<view>
<image src="/static/images/ui/location2.png" style="width: 22rpx; height: 26rpx; vertical-align: middle" />
<text style="vertical-align: middle;margin-left: 2px;">{{ item.theater_name }}</text>
</view>
</view>
<button class="pop_button" :data-cycle_id="item.cycle_id" @tap="nav">¥{{ item.lowest_price }}起</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
// pages/opera/IP_detail/IP_detail.js
import { httpUtil, http, login_check } from '../../../utils/util';
export default {
data() {
return {
show: false,
rolled: true,
IP_detail: {
ip_info: {
background_pic: '',
show_name: '',
follow_total: '',
is_follow: false,
describe: ''
},
wonderful_list: [],
show_detail: [
{
url: false
}
],
show_total: '',
show_list: []
}
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let abb_id = options.abb_id;
http('/api/v1/ip-info', 'get', {
abb_id
}).then((res) => {
uni.setNavigationBarTitle({
title: res.ip_info.title_name
});
this.setData({
IP_detail: res
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
var that = this;
return {
//自定义转发内容
title: that.IP_detail.ip_info.show_name,
//自定义转发标题
imageUrl: that.IP_detail.ip_info.background_pic //不设置此字段时，默认截取当前页面作为展示的图片
};
},
methods: {
bindPlayCallBack: function (e) {
console.log('当前视频', e.target.id);
var current_video = e.target.id;
var that = this;
let video = that.IP_detail.wonderful_list;
for (var i in video) {
var index_video = 'video_' + i;
var videoContextPrev = uni.createVideoContext(index_video);
if (current_video != index_video) {
// 暂停其他的
videoContextPrev.pause();
}
}
},
_like() {
if (login_check()) {
let status;
if (this.IP_detail.ip_info.is_follow) {
status = 0;
} else {
if (!this.IP_detail.ip_info.is_follow) {
status = 1;
}
}
http('/api/v1/follow', 'get', {
abb_id: this.IP_detail.ip_info.abb_id,
status
}).then((res) => {
if (status == 1) {
uni.showToast({
icon: 'success',
title: '已添加到想看的演出列表',
duration: 2000
});
} else {
if (status == 0) {
uni.showToast({
icon: 'success',
title: '已取消想看',
duration: 2000
});
}
}
let IP_detail = this.IP_detail;
IP_detail.ip_info.is_follow = !IP_detail.ip_info.is_follow;
this.setData({
IP_detail
});
});
}
},
nav(e) {
let cycle_id = e.currentTarget.dataset.cycle_id;
uni.navigateTo({
url: '/pages/opera/show/show_detail?cycle_id=' + cycle_id
});
},
roll_spread() {
this.setData({
rolled: !this.rolled
});
},
previewMedia(e) {
let mediaList = this.IP_detail.wonderful_list;
let imageList = [];
let current = e.currentTarget.dataset.index;
let errorMedia = 0;
mediaList.forEach((e) => {
if (e.type !== 'image') {
errorMedia = errorMedia + 1;
} else {
imageList.push(e.url);
}
});
uni.previewImage({
urls: imageList,
current: imageList[current - errorMedia]
});
},
}
};
</script>
<style>
.front {
background-color: #fff;
margin-bottom: 20rpx;
padding: 20rpx 0;
display: flex;
flex-direction: column;
align-items: center;
}
.front .title {
font-size: 32rpx;
font-weight: bold;
}
._row {
margin-top: 20rpx;
display: flex;
width: 100%;
justify-content: space-between;
}
._row button::after {
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.icon {
width: 32rpx;
height: 32rpx;
}
._row button {
background-color: transparent !important;
padding: 0 !important;
line-height: inherit !important;
margin: 0 !important;
width: auto !important;
font-weight: 500 !important;
border-radius: none !important;
}
._block {
background: #fff;
margin-bottom: 20rpx;
}
._block ._title {
display: flex;
align-items: center;
font-size: 32rpx;
font-weight: bold;
color: #181818;
padding: 30rpx;
}
._block ._title ._icon {
width: 8rpx;
height: 36rpx;
background: #ff446b;
border-radius: 4rpx;
margin: 0 20rpx 0 0;
}
._block ._flex {
white-space: nowrap;
margin: 0 30rpx;
/* #ifndef MP-ALIPAY */
display: flex;
width: 690rpx;
/* #endif */
}
._block ._text {
padding: 0 48rpx 30rpx 68rpx;
font-size: 28rpx;
color: #363636;
}
._block ._flex ._img {
border-radius: 8rpx;
width: 540rpx;
height: 360rpx;
margin: 0 10rpx;
/* #ifdef MP-BAIDU || MP-ALIPAY */
display: inline-block !important;
flex-shrink: 0;
/* object-fit: fill !important; */
/* #endif */
}
._block .img1 {
margin: 0 30rpx;
display: flex;
flex-direction: column;
}
._block .img1 .img1_list {
width: 690rpx;
vertical-align: top;
margin-top: -1rpx;
}
._block .img1 .roll {
text-align: center;
margin: 20rpx 0;
font-size: 24rpx;
color: #1394f2;
}
._bottom {
display: flex;
align-items: center;
position: fixed;
bottom: 0;
width: 100%;
height: 128rpx;
background: #ffffff;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
}
._tip {
font-size: 28rpx;
color: #181818;
flex: 1;
margin: 0 40rpx;
}
._button {
width: 240rpx;
height: 72rpx;
line-height: 72rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
font-size: 28rpx;
color: #fff;
margin: 0 40rpx;
}
.disabled_ {
background: #d0d0d0 !important;
}
.pop_title {
font-size: 32rpx;
display: flex;
justify-content: center;
font-weight: bold;
margin: 30rpx;
}
.pop_row {
display: flex;
}
._month {
font-size: 24rpx;
color: #181818;
margin: 5rpx 10rpx 0 20rpx;
width: 42rpx;
white-space: nowrap;
}
._city {
font-size: 28rpx;
font-weight: bold;
color: #181818;
display: flex;
flex-direction: column;
align-items: center;
margin: 3rpx 10rpx 0 10rpx;
}
.dot {
width: 4rpx;
height: 4rpx;
background: #d8d8d8;
margin: 5rpx;
border-radius: 50%;
}
._content {
flex: 1;
margin: 0 10rpx;
font-size: 24rpx;
color: #181818;
}
.pop_button {
width: 128rpx;
height: 44rpx;
line-height: 44rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
font-size: 20rpx;
color: #ffffff;
margin: 0 20rpx 0 20rpx;
}
</style>

157
src/pages/opera/IP_more/IP_more.vue
Unescape View File

@ -0,0 +1,157 @@
<template>
<view>
<!-- <scroll-view scroll-y="{{true}}" style=" height: {{screenHeight*10}}px;"> -->
<block v-for="(item, index) in ip_list" :key="index">
<view class="_item" :data-abb_id="item.abb_id" @tap="nav">
<view class="shadow" />
<image class="img" :src="item.pic" />
<view class="_title">{{ item.show_name }}</view>
<view>
<view class="_below">
<text>{{ item.follow_total == 0 ? 0 : item.follow_total }}</text>
人想看｜
<text style="color: #ff1d42">{{ item.show_total }}</text>
个剧场在售
</view>
<view class="_home">
前往主页
<image src="/static/images/ui/right.png" style="margin-left: 10rpx" />
</view>
</view>
</view>
</block>
<view style="height: 100rpx; width: 100%"></view>
<!-- </scroll-view> -->
</view>
</template>
<script>
// pages/opera/IP_more/IP_more.js
import { httpUtil } from '../../../utils/util';
export default {
data() {
return {
screenHeight: '',
ip_list: ''
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
let title = options.title;
wx.setNavigationBarTitle({
title
});
this.setData({
screenHeight: getApp().globalData.screenHeight
});
let category = options.category;
httpUtil('/api/v1/ip-more', 'get', {
category
}).then((res) => {
console.log(res);
this.setData({
ip_list: res.ip_list
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
nav(e) {
uni.navigateTo({
url: '/pages/opera/IP_detail/IP_detail?abb_id=' + e.currentTarget.dataset.abb_id
});
}
}
};
</script>
<style>
page {
width: 100%;
overflow-x: hidden;
}
._item {
height: 260rpx;
margin: 100rpx 30rpx 0 30rpx;
position: relative;
background: #fff9f9;
box-shadow: 0 12rpx 8rpx 0 rgba(108, 106, 106, 0);
border-radius: 8rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
}
._item .shadow {
width: 690rpx;
height: 212rpx;
background: #1c1c1c;
border-radius: 8rpx;
opacity: 0.1;
filter: blur(10px);
position: absolute;
top: 70rpx;
z-index: -1;
}
._item .img {
width: 204rpx;
height: 306rpx;
border-radius: 16rpx;
position: absolute;
right: 30rpx;
bottom: 20rpx;
}
._title {
margin: 20rpx 30rpx;
font-size: 28rpx;
font-weight: bold;
width: 392rpx;
}
._below {
font-size: 24rpx;
margin: 0 30rpx;
}
._home {
font-size: 24rpx;
font-weight: bold;
margin: 20rpx 30rpx 40rpx 30rpx;
display: flex;
align-items: center;
}
._home image {
width: 26rpx;
height: 26rpx;
}
</style>

108
src/pages/opera/activity_topics/topics.vue
Unescape View File

@ -0,0 +1,108 @@
<template>
<!--pages/activity_topics/topics.wxml-->
<!-- <text>活动专题</text> -->
<view class="activity_topics">
<view class="image" v-for="(item,index) in topic_list" @tap="onChange" :data-route="item.route">
<image :src="item.pic" mode="widthFix"></image>
</view>
</view>
</template>
<script>
// pages/activity_topics/topics.js
import { httpUtil } from '../../../utils/util.js';
export default {
data() {
return {
topic_list: [],
//图片列表
topic_info: [] //分享标题和图片
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
let mini_activity_id = options.mini_activity_id;
httpUtil('/api/v1/topic-detail', 'get', {
mini_activity_id
}).then((res) => {
this.setData({
topic_list: res.topic_detail,
topic_info: res.topic_info
});
if (!res.topic_info.topic_title) {
return;
}
uni.setNavigationBarTitle({
title: res.topic_info.topic_title
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function (e) {
let title = this.topic_info.topic_title;
let imageUrl = this.topic_info.share_pic;
return {
//自定义转发内容
title,
imageUrl //不设置此字段时，默认截取当前页面作为展示的图片
};
},
methods: {
onChange(e) {
let url = e.currentTarget.dataset.route;
if (!url) {
return;
}
uni.navigateTo({
url
});
}
}
};
</script>
<style>
/* pages/activity_topics/topics.wxss */
.activity_topics {
height: 100%;
}
.image {
}
.activity_topics .image image {
width: 100%;
display: block;
margin-top: -1rpx;
}
</style>

693
src/pages/opera/opera/opera_IP.vue
Unescape View File

@ -0,0 +1,693 @@
<template>
<view>
<!-- 轮播图 -->
<!-- #ifdef MP-ALIPAY -->
<scroll-view scroll-y :enhanced="true" :bounces="false">
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<scroll-view scroll-y :enhanced="true" :bounces="false" style="height: 5000px;">
<!-- #endif -->
<view class="selection_cards" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"
style="width: 100%; overflow-x: hidden;">
<view v-if="!(index===0||index===6)" class="selection_cards_item" :data-abb_id="item.abb_id"
@tap="detail" :style="
'left:' +
item.style.left +
'px; z-index:' +
item.style.zIndex +
';transform:' +
item.style.transform +
';opacity:' +
(item.style.opacity == 0.4 ? '0.2' : item.style.opacity == 0.8 ? '0.6' : item.style.opacity) +
';transition:' +
(!isTouch ? '0.1s' : 0) +
';background-image: url(' +
item.backimage +
');'
" v-for="(item, index) in list" :key="index">
</view>
<!-- <view class="bac" :style="'left:' + item.style.left + 'px; transform:' + item.style.transform + ';'" v-for="(item, index) in list" :key="index"></view> -->
<view class="white_area"
:style="(white_area ? '' : 'display:none;') + 'left:' + white_area_left + 'px;'">
<view class="title">{{ cname }}</view>
<view class="des">{{ ctitle }}</view>
</view>
<view class="shadow" />
</view>
<view class="item" v-for="(i, index) in lists.other">
<view class="line">
<view class="_title">
<!-- <view class="_icon" />{{index}} -->
<view class="_icon"></view>
{{ i.title }}
</view>
<navigator :url="'/pages/opera/IP_more/IP_more?category=' + i.category + '&title=' + i.title">
<text class="more">查看更多</text>
<image class="iconPic" src="/static/images/ui/ellipsis.png" />
</navigator>
</view>
<scroll-view class="scroll-view_H" :scroll-x="true">
<image :lazy-load="true" class="scroll-item" :data-abb_id="item.abb_id" :src="item.pic"
@tap="detail" v-for="(item, index1) in i.list" :key="index1"></image>
</scroll-view>
</view>
</scroll-view>
</view>
</template>
<script>
// pages/opera/opera_IP.js
import {
httpUtil,
location_city
} from '../../../utils/util';
export default {
data() {
return {
cardNumber: 7,
indexArr: [-3, -2, -1, 0, 1, 2, 3],
list: [],
listArr: [],
startPageX: 0,
cardWidth: 0,
screenWidth: 0,
isTouch: false,
white_area: true,
cname: '',
ctitle: '',
city_id: null,
lists: {
other: []
},
swith_area: '',
white_area_left: '',
clone_li: {
id: '',
category: '',
title: '',
list: []
}
};
}
/**
* 生命周期函数--监听页面加载
*/
,
onLoad: function(options) {
this.setData({
list: [],
listArr: [],
cname: '',
ctitle: ''
});
let that = this;
if (!getApp().globalData.city_id) {
// 默认北京写法
//location_city("beijing").then(res=>{
location_city().then((res) => {
console.log(res);
var city = res.city_info.city_name;
var city_id = res.city_info.city_id;
getApp().globalData.city_id = city_id;
httpUtil('/api/v1/ip-index', 'get', {
city_id: getApp().globalData.city_id
}).then((res) => {
console.log(city_id);
that.init(res);
that.setData({
lists: res,
city_id
});
});
});
} else {
let city_id = getApp().globalData.city_id
httpUtil('/api/v1/ip-index', 'get', {
city_id
}).then((res) => {
that.init(res);
that.setData({
lists: res,
city_id
});
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
if (this.city_id && getApp().globalData.city_id && getApp().globalData.city_id != this.city_id) {
let city_id = getApp().globalData.city_id
httpUtil('/api/v1/ip-index', 'get', {
city_id
}).then((res) => {
this.init(res);
this.setData({
lists: res,
city_id
});
});
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
methods: {
detail(e) {
uni.navigateTo({
url: '/pages/opera/IP_detail/IP_detail?abb_id=' + e.currentTarget.dataset.abb_id
});
},
// 轮播图
/*触摸开始*/
touchstart(e) {
//console.log(e.changedTouches[0].pageX);
this.setData({
startPageX: e.changedTouches[0].pageX,
isTouch: true //开始触摸
});
},
/*触摸移动*/
touchmove(e) {
let _this = this;
let pageX = e.changedTouches[0].pageX;
let move = pageX - _this.startPageX; //正数，向右滑动；负数，向左滑动
let list = JSON.parse(JSON.stringify(_this.list));
let len = list.length; //console.log(move);
if (move > 0) {
//向右滑
for (let i = 0; i < len; i++) {
list[i].style.left = list[i].left + move * 0.521;
if (_this.indexArr[i] < 0) {
list[i].style.transform = 'scale(' + (list[i].scale + move * 0.0021) + ')';
list[i].style.zIndex = list[i].zIndex + 1; //if (_this.data.indexArr[i] >= -3) {
list[i].style.opacity = 1; // }
} else {
list[i].style.transform = 'scale(' + (list[i].scale - move * 0.0021) + ')';
list[i].style.zIndex = list[i].zIndex - 1;
if (_this.indexArr[i] >= 2) {
list[i].style.opacity = 0;
}
}
} //检查是否，向右
if (list[2].style.left >= list[3].left) {
let newArr = [];
for (let i = 0; i < len; i++) {
let index = i; //当前将要变成哪一个坐标元素的位置
if (i + 1 != len) {
index = i + 1;
} else {
//最后一个元素到第一个元素的位置
index = 0;
}
let current_option = list[i].option; // console.log('current_option',current_option);
// console.log('list[i].option',list[i].option);
let item = _this.listArr[index];
item.option = current_option;
item.backimage = list[i].backimage;
item.abb_id = list[i].abb_id;
item.show_name = list[i].show_name;
item.f_title = list[i].f_title;
newArr[index] = item;
} // console.log('old', list);
// console.log('new', newArr);
list = newArr;
_this.setData({
startPageX: pageX
});
}
_this.setData({
white_area: false,
list
});
} else {
//向左滑
for (let i = 0; i < len; i++) {
list[i].style.left = list[i].left + move * 0.521;
if (_this.indexArr[i] <= 0) {
list[i].style.transform = 'scale(' + (list[i].scale - Math.abs(move * 0.0021)) + ')';
list[i].style.zIndex = list[i].zIndex - 1;
if (_this.indexArr[i] <= -2) {
list[i].style.opacity = 0;
}
} else {
list[i].style.transform = 'scale(' + (list[i].scale + Math.abs(move * 0.0021)) + ')';
list[i].style.zIndex = list[i].zIndex + 1; // if (_this.data.indexArr[i] >= 2) {
list[i].style.opacity = 1; // }
}
} //检查，向左
if (list[3].style.left <= list[2].left) {
let newArr = [];
for (let i = 0; i < len; i++) {
let index = i;
if (i == 0) {
index = len - 1;
} else {
index = i - 1;
}
let current_option = list[i].option; // console.log('current_option',current_option);
// console.log('list[i].option',list[i].option);
let item = _this.listArr[index];
item.option = current_option;
item.backimage = list[i].backimage;
item.abb_id = list[i].abb_id;
item.show_name = list[i].show_name;
item.f_title = list[i].f_title;
newArr[index] = item;
} // console.log('old', list);
// console.log('new', newArr);
list = newArr;
_this.setData({
startPageX: pageX
});
}
_this.setData({
white_area: false,
list
});
}
},
/*触摸结束*/
touchend(e) {
console.log('触摸结束');
let _this = this;
let list = JSON.parse(JSON.stringify(_this.list));
let len = list.length;
_this.setData({
isTouch: false //关闭触摸
}); // if (list[2].style.zIndex >= (list[3].zIndex)) {
if (list[3].style.left > list[3].left) {
let newArr = [];
for (let i = 0; i < len; i++) {
let index = i; //当前将要变成哪一个坐标元素的位置
if (i + 1 != len) {
index = i + 1;
} else {
//最后一个元素到第一个元素的位置
index = 0;
}
let current_option = list[i].option; // console.log('current_option',current_option);
// console.log('list[i].option',list[i].option);
let item = _this.listArr[index];
item.option = current_option;
item.backimage = list[i].backimage;
item.abb_id = list[i].abb_id;
item.show_name = list[i].show_name;
item.f_title = list[i].f_title;
newArr[index] = item;
if (list[i].style.zIndex == 3) {
this.setData({
cname: list[i].show_name,
ctitle: list[i].f_title
});
}
}
list = newArr;
_this.setData({
white_area: true,
list
});
} else {
// if ((list[4].style.zIndex) >= list[3].zIndex) {
if (list[3].style.left < list[3].left) {
let newArr = [];
for (let i = 0; i < len; i++) {
let index = i;
if (i == 0) {
index = len - 1;
} else {
index = i - 1;
}
let current_option = list[i].option; // console.log('current_option',current_option);
// console.log('list[i].option',list[i].option);
let item = _this.listArr[index];
item.option = current_option;
item.backimage = list[i].backimage;
item.abb_id = list[i].abb_id;
item.show_name = list[i].show_name;
item.f_title = list[i].f_title;
newArr[index] = item;
if (list[i].style.zIndex == 3) {
this.setData({
cname: list[i].show_name,
ctitle: list[i].f_title
});
}
}
list = newArr;
_this.setData({
white_area: true,
list
});
} else {
//移动的距离不够
let newArr = [];
for (let i = 0; i < len; i++) {
let index = i; //当前将要变成哪一个坐标元素的位置
let current_option = list[i].option; // console.log('current_option',current_option);
// console.log('list[i].option',list[i].option);
let item = _this.listArr[index];
item.option = current_option;
item.backimage = list[i].backimage;
item.abb_id = list[i].abb_id;
item.show_name = list[i].show_name;
item.f_title = list[i].f_title;
newArr[index] = item;
if (list[i].style.zIndex == 3) {
this.setData({
cname: list[i].show_name,
ctitle: list[i].f_title
});
}
}
list = newArr;
_this.setData({
white_area: true,
list
});
/* for (let i = 0; i < len; i++) {
list[i].style.left = list[i].left;
list[i].style.zIndex = list[i].zIndex;
list[i].style.transform = "scale(" + list[i].scale + ")";
list[i].style.opacity = (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0
// list[i].style.opacity =(3 - Math.abs(_this.data.indexArr[i])) * 0.3
if(list[i].style.zIndex==3){
this.setData({cname:list[i].show_name,ctitle:list[i].f_title})}
}
_this.setData({white_area:true,
list
}) */
}
}
if (this.list[3].zIndex != this.list[3].style.zIndex) {
this.touchend(e);
}
},
swith_tab: function(e) {
this.setData({
swith_area: e.currentTarget.dataset.index
});
},
/*层叠轮播图初始化*/
init: function(l) {
let that = this;
uni.getSystemInfo({
success(res) {
//获取屏幕的宽成功
let arr = [];
let len = that.cardNumber;
let cardWidth = (res.screenWidth / 750) * 120;
// #ifdef MP-ALIPAY
cardWidth = (res.windowWidth / 750) * 120;
// #endif
that.setData({
white_area_left: 3 * (cardWidth / 2) - 40
});
for (let i = 0; i < len; i++) {
let item = {
option: 0,
//自定义选项
left: i * (cardWidth / 2) - 40,
// scale: (3 - Math.abs(_this.data.indexArr[i])) * 0.4,
scale: (3 - Math.abs(that.indexArr[i])) * 0.1 + 0.7,
zIndex: 3 - Math.abs(that.indexArr[i]),
style: {
left: i * (cardWidth / 2) - 40,
transition: 0,
zIndex: 3 - Math.abs(that.indexArr[i]),
// transform: "scale(" + ((3 - Math.abs(_this.data.indexArr[i])) * 0.4) + ")",
transform: 'scale(' + ((3 - Math.abs(that.indexArr[i])) * 0.1 + 0.7) +
')',
// opacity: (3 - Math.abs(_this.data.indexArr[i]) != 0) ? 1 : 0
opacity: (3 - Math.abs(that.indexArr[i])) * 0.4
},
backimage: ''
};
item.option = i;
arr.push(item);
}
for (var a = 0; a < 7; a++) {
if (a <= 3) {
if (a >= l.banner.list.length) {
let i = 3 - (a - l.banner.list.length);
arr[a + 3].backimage = l.banner.list[i].pic;
arr[a + 3].abb_id = l.banner.list[i].abb_id;
arr[a + 3].show_name = l.banner.list[i].show_name;
arr[a + 3].f_title = l.banner.list[i].f_title;
} else {
arr[a + 3].backimage = l.banner.list[a].pic;
arr[a + 3].abb_id = l.banner.list[a].abb_id;
arr[a + 3].show_name = l.banner.list[a].show_name;
arr[a + 3].f_title = l.banner.list[a].f_title;
}
}
if (a > 3) {
if (a >= l.banner.list.length) {
let i = 3 - (a - l.banner.list.length);
arr[a - 4].backimage = l.banner.list[i].pic;
arr[a - 4].abb_id = l.banner.list[i].abb_id;
arr[a - 4].show_name = l.banner.list[i].show_name;
arr[a - 4].f_title = l.banner.list[i].f_title;
} else {
arr[a - 4].backimage = l.banner.list[a].pic;
arr[a - 4].abb_id = l.banner.list[a].abb_id;
arr[a - 4].show_name = l.banner.list[a].show_name;
arr[a - 4].f_title = l.banner.list[a].f_title;
}
}
}
that.setData({
screenWidth: res.screenWidth,
cardWidth,
list: arr,
listArr: arr,
cname: arr[3].show_name,
ctitle: arr[3].f_title
});
}
});
}
}
};
</script>
<style>
page {
width: 100%;
overflow: hidden;
}
.selection_cards {
width: 100%;
/* height: 400rpx;
position: relative; */
margin-top: 920rpx;
margin-bottom: 80rpx;
z-index: 99;
}
.selection_cards_item {
/* width: 194rpx;
height:350rpx; */
width: 550rpx;
height: 840rpx;
background-size: 100%;
/* overflow: hidden; */
border-radius: 40rpx;
position: absolute;
top: 40rpx;
color: white;
font-size: 100rpx;
box-sizing: border-box;
}
.bac {
width: 550rpx;
height: 840rpx;
background-size: 100%;
border-radius: 40rpx;
position: absolute;
top: 40rpx;
color: white;
background: #fff;
box-sizing: border-box;
}
.white_area {
width: 550rpx;
position: absolute;
top: 743rpx;
border-radius: 0 0 40rpx 40rpx;
background: #fff;
height: 100rpx;
z-index: 99;
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0;
color: #333333;
}
.white_area .title {
font-size: 36rpx;
font-weight: bold;
}
.white_area .des {
font-size: 28rpx;
}
.shadow {
width: 550rpx;
height: 212rpx;
background: #7b7b7b;
border-radius: 8rpx;
opacity: 0.3;
filter: blur(60px);
position: absolute;
left: 100rpx;
top: 710rpx;
z-index: -1;
}
.item {
margin-bottom: 20rpx;
background: #fff;
}
.item .line {
padding: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
.item .line ._title {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #181818;
}
.item .line ._title ._icon {
width: 8rpx;
height: 36rpx;
background: #ff446b;
border-radius: 4rpx;
margin: 0 20rpx 0 0;
}
.item .more {
font-size: 28rpx;
color: #666666;
vertical-align: middle;
}
.item .iconPic {
width: 32rpx;
height: 26rpx;
vertical-align: middle;
}
.item .scroll-view_H {
padding: 0 20rpx 30rpx 20rpx;
width: 710rpx;
background-color: #ffffff;
white-space: nowrap;
}
.item .scroll-view_H .scroll-item {
width: 200rpx;
height: 200rpx;
margin: 0 10rpx;
border-radius: 16rpx;
}
</style>

934
src/pages/opera/show/show_detail.vue
Unescape View File

@ -0,0 +1,934 @@
<template>
<view>
<!-- <scroll-view style="height:{{windowHeight?windowHeight:''}}px;" scroll-y="{{!show}}"> -->
<view v-if="nav_show" class="nav_show">
<view :class="'topLine ' + (swith_area == index ? 'active' : ' ')" :data-index="index" @tap="swith_tab"
v-for="(item, index) in ['简介', '详情', '剧照', '须知']" :key="index">
{{ item }}
</view>
</view>
<view class="topView">
<image class="image" id="nav0" :src="show_detail.background_pic" mode="widthFix" style="width: 750rpx" />
<view class="list">
<image class="img" :src="show_detail.show_pic" />
<view class="info">
<view class="title">{{ show_detail.show_name }}</view>
<view class="des">
<view class="des_title">演出时段</view>
<view class="des_info">{{ show_detail.start_date }}-{{ show_detail.end_date }}</view>
</view>
<view class="des">
<view class="des_title">演出时长</view>
<view class="des_info">约{{ show_detail.show_length }}分钟（以现场为准）</view>
</view>
<view class="price">
<text style="font-size: 32rpx">¥</text>
<text style="margin: 0 2rpx">{{ show_detail.lowest_price }}</text>
<text style="font-size: 24rpx">起</text>
</view>
</view>
</view>
<view class="_area">
<view class="info">
<view class="text1">{{ show_detail.city_name }}｜{{ show_detail.theater_name }}</view>
<view class="text2">地址：{{ show_detail.traffic_info }}</view>
</view>
<image src="/static/images/ui/location.png" :data-longitude="show_detail.longitude"
:data-latitude="show_detail.latitude" @tap="loc" />
</view>
<view class="_block" id="nav1">
<view class="_title">
<view class="_icon" />
演出详情
</view>
<view class="img1">
<view class="img_cac"
:style="rolled ? (show_detail.detail_pic[0] ? 'height:1000rpx;overflow: hidden;' : '') : ''">
<block v-for="i in show_detail.detail_pic" :key="i">
<image class="img1_list" :src="i" mode="widthFix" />
</block>
</view>
<view class="roll" @tap="roll_spread">{{ rolled ? '展开演出详情' : '收起演出详情' }}</view>
</view>
</view>
<view class="_block" id="nav2">
<view class="_title">
<view class="_icon" />
精彩现场
</view>
<scroll-view class="_flex" :scroll-x="true">
<block v-for="(item, index) in show_detail.wonderful_list" :key="index">
<block v-if="item.type == 'image'">
<image class="_img" :src="item.url" :data-index="index" @tap="previewMedia" />
</block>
<block v-if="item.type == 'video'">
<!-- #ifndef MP-ALIPAY -->
<video class="_img" :src="item.url" @play="bindPlayCallBack" :id="'video_' + index" />
<!-- #endif -->
</block>
</block>
</scroll-view>
<view class="roll" @tap="stage_click" v-if="!show_detail.wonderful_list.length<=0">查看更多</view>
</view>
<view class="_block" id="nav3">
<view class="_title">
<view class="_icon" />
购票须知
</view>
<view class="warning">
<view class="dot_icon">
<view class="dot" />
</view>
<view class="text">
<text>温馨提示：由于票品特殊性，出售后不退不换！
1.请在指定购票渠道购票，否则出现不良后果（如假票等），由购票者自行承担。门票售出，恕不退换。门票售出后因严重自然灾害、洪水、地震等不可抗力因素造成的演出票时间推移、延时或无法演出，主办方将提前通知；如特殊原因演出取消，购票者可获得的所有赔偿仅限于不高于票面价格的购票票款补偿。开心果票务网仅为本演出/赛事/活动的票务代理，其时间变更及取消等责任由主办方负责。
2.每票一人，对号入座，进门一次有效，无副券作废，请观众着装整洁，服从现场工作人员管理，依序入场。
3.剧院演出1.2米以下儿童谢绝入场（儿童专场除外），1.2米以上儿童请在家长的带领下，凭票入场。
4.请勿在条码及其周围1厘米内涂写、折叠、损坏，否侧造成条码无法识别不能入场，由购票者自行承担责任。
5.具体入场时间以场馆规定为准。
6.请自觉接受安全检查。严禁携带枪支、弹药、管制刀具等违禁物品；严禁携带打火机等易燃易爆物品；严禁携带液态物品入场。
7.请勿带包。请勿携带专业摄影、摄像器材，未经许可，现场禁止录音、录像及照相；场内禁止吸烟、禁止踩踏座椅、禁止投掷物品、禁止翻阅隔离设施。
8.迟到的观众请适时入场，请勿妨碍他人观看演出，请勿在通道内滞留。请勿在场内大声喧哗。请将手机等响闹装置置于静音状态。
9.剧照仅供参考，演员阵容以现场为准。
10.观看结束后，请观众有序退场，请勿滞留。
11.以上规定如与个别活动要求发生冲突时，以活动要求为准。
12.任何购买、持有或使用门票的人均被认为已经阅读、理解并接受以上条款。</text>
</view>
</view>
</view>
</view>
<!-- </scroll-view> -->
<view class="bottom_area" :class="safeAreaHeight===0?'safeAreaBottom':''">
<view class="tips">* {{ show_detail.brief }}</view>
<view class="bottom">
<button class="iconButton" @tap="_like">
<image class="icon"
:src="'/static/images/ui/' + (show_detail.is_follow ? 'liked' : 'like') + '.png'" />
<view class="text">想看</view>
</button>
<button class="iconButton" open-type="share">
<image class="icon" src="/static/images/ui/share.png" />
<view class="text">分享</view>
</button>
<button class="button" :class="'btn'+show_detail.is_end"
style="background:linear-gradient(90deg, #CCC 0%, #CCC 100%);"
v-if="show_detail.is_end==1">演出结束</button>
<button class="button" style="background:linear-gradient(90deg, #FF4284 0%, #FF1D42 100%);" v-else
@tap="changeRange">立即购买</button>
</view>
</view>
<u-popup :show="show" @close="onClose" @open="open" :round="10">
<view class="drama_list">
<view class="title">{{ Xshow_detail.show_name }}</view>
<view class="area">{{ Xshow_detail.city_name }}｜{{ Xshow_detail.theater_name }}</view>
<view class="select">
请选择场次
<text class="_select">场次时间均为演出当地时间</text>
</view>
<scroll-view :scroll-y="true" class="scroll" :show-scrollbar="false" catchtouchmove>
<view :data-index="index"
:class="'sel_area ' + (current == index ? '_selected' : '_not_sel') + ' ' + (item.tkt_num == 0 ? 'null_tkt' : '')"
@tap="_cur" v-for="(item, index) in drama_list" :key="index">
{{ item.show_date }}
<view class="tags" v-if="item.tkt_num == 0">售罄</view>
</view>
<view style="height: 1rpx"></view>
</scroll-view>
</view>
<view class="_bottom">
<button class="selector_dsn" :data-cur_drama="current" @tap="_next">
{{ Xshow_detail.tickets_status == 0 ? '选座购票' : '立即购买' }}
</button>
</view>
</u-popup>
</view>
</template>
<script>
import {
httpUtil,
http,
login_check
} from '../../../utils/util';
export default {
data() {
return {
current: 0,
rolled: true,
swith_area: 0,
safeAreaHeight: 0,
windowHeight: '',
drama_list: '',
Xshow_detail: {
show_name: '',
city_name: '',
theater_name: '',
tickets_status: 0
},
show_detail: {
background_pic: '',
show_pic: '',
show_name: '',
start_date: '',
end_date: '',
show_length: '',
lowest_price: '',
city_name: '',
theater_name: '',
traffic_info: '',
longitude: '',
latitude: '',
detail_pic: false,
wonderful_list: [],
brief: '',
is_follow: false
},
suggest_show: '',
nav_show: false,
show: false
};
},
/**
* 生命周期函数--监听页面加载
*/
onShow: function(options) {
// 是否为全面屏手机留出安全距离
const safeAreaHeight = () => {
console.log(uni.getSystemInfoSync());
if (!uni.getSystemInfoSync().safeAreaInsets) {
return 0;
}
return uni.getSystemInfoSync().safeAreaInsets.bottom
};
this.setData({
safeAreaHeight: safeAreaHeight()
});
var that = this;
uni.getSystemInfo({
success(res) {
that.setData({
windowHeight: res.windowHeight
});
}
});
let cycle_id = options.cycle_id;
http('/api/v1/drama-list', 'get', {
cycle_id
}).then((res) => {
this.setData({
drama_list: res.drama_list,
Xshow_detail: res.show_detail
});
});
if (cycle_id) {
http('/api/v1/show-detail', 'get', {
cycle_id
}).then((res) => {
this.setData({
show_detail: res.show_info,
suggest_show: res.suggest_show
});
});
} else {
uni.showToast({
title: '未传入轮次id',
icon: 'fail',
duration: 2000
});
}
},
onPageScroll: function(ev) {
let windowHeight = this.windowHeight;
let arr;
let a;
let query = uni.createSelectorQuery();
for (var i = 0; i < 4; i++) {
query.select('#nav' + i).boundingClientRect();
}
query.exec((res) => {
arr = [res[0].top, res[1].top, res[2].top, res[3].top];
for (var i = 0; i < 4; i++) {
if (arr[i] < 20) {
a = i;
}
}
if (a) {
this.setData({
swith_area: a
});
}
});
if (ev.scrollTop > windowHeight) {
this.setData({
nav_show: true
});
} else {
if (ev.scrollTop < windowHeight) {
this.setData({
nav_show: false
});
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
uni.stopPullDownRefresh();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function(res) {
var that = this;
return {
//自定义转发内容
title: that.show_detail.show_name,
//自定义转发标题
imageUrl: that.show_detail.background_pic //不设置此字段时，默认截取当前页面作为展示的图片
};
},
methods: {
bindPlayCallBack: function(e) {
console.log('当前视频', e.target.id);
var current_video = e.target.id;
var that = this;
let video = that.show_detail.wonderful_list;
for (var i in video) {
var index_video = 'video_' + i;
var videoContextPrev = uni.createVideoContext(index_video);
if (current_video != index_video) {
// 暂停其他的
videoContextPrev.pause();
}
}
},
previewMedia(e) {
let mediaList = this.show_detail.wonderful_list;
let imageList = [];
let current = e.currentTarget.dataset.index;
let errorMedia = 0;
mediaList.forEach((e) => {
if (e.type !== 'image') {
errorMedia = errorMedia + 1;
} else {
imageList.push(e.url);
}
});
uni.previewImage({
urls: imageList,
current: imageList[current - errorMedia]
});
},
stage_click() {
let {
abb_id
} = this.Xshow_detail
uni.navigateTo({
url: '/pages/opera/stage/stage_photo?abb_id=' + abb_id+"&show_title="+this.show_detail.show_name,
})
},
roll_spread() {
this.setData({
rolled: !this.rolled
});
},
changeRange() {
uni.setNavigationBarTitle({
title: '选择场次'
});
var that = this;
if (login_check()) {
let cycle_id = that.show_detail.cycle_id;
httpUtil('/api/v1/drama-list', 'get', {
cycle_id
}).then((res) => {
that.setData({
drama_list: res.drama_list,
Xshow_detail: res.show_detail,
show: true
});
// this.popup.changeRange();
this.show = true
});
}
},
onClose() {
this.setData({
show: false
});
uni.setNavigationBarTitle({
title: '开心麻花'
});
},
_cur(e) {
this.setData({
current: e.currentTarget.dataset.index
});
},
_like() {
if (login_check()) {
let status;
let follow = false;
if ('undefined' !== typeof this.show_detail.is_follow) {
follow = this.show_detail.is_follow;
}
let abb_id = this.show_detail.abb_id;
if (follow) {
status = 0;
} else {
if (!follow) {
status = 1;
}
}
http('/api/v1/follow', 'get', {
abb_id: this.show_detail.abb_id,
status
}).then((res) => {
if (status == 1) {
uni.showToast({
icon: 'success',
title: '已添加到想看的演出列表',
duration: 2000
});
} else {
if (status == 0) {
uni.showToast({
icon: 'success',
title: '已取消想看',
duration: 2000
});
}
}
let show_detail = this.show_detail;
show_detail.is_follow = !show_detail.is_follow;
this.setData({
show_detail
});
});
}
},
_next(e) {
if (this.Xshow_detail.tickets_status == 0) {
let url = '/pages/make_order/choose_sit/choose_sit?drama_id=' + this.drama_list[e.currentTarget.dataset.cur_drama].drama_id
// #ifdef MP-BAIDU
url = '/pages/make_order/choose_sit/choose_sit_baidu?drama_id=' + this.drama_list[e.currentTarget.dataset.cur_drama].drama_id
// #endif
// #ifdef MP-ALIPAY
url = '/pages/make_order/choose_sit/choose_sit_alipay?drama_id=' + this.drama_list[e.currentTarget.dataset.cur_drama].drama_id
// #endif
// #ifdef MP-TOUTIAO
url = '/pages/make_order/choose_sit/choose_sit_toutiao?drama_id=' + this.drama_list[e.currentTarget.dataset.cur_drama].drama_id
// #endif
uni.navigateTo({
url
});
} else {
if (this.Xshow_detail.tickets_status == 1) {
uni.navigateTo({
url: '/pages/make_order/random_sit/random_sit?drama_id=' + this.drama_list[e
.currentTarget.dataset.cur_drama].drama_id
});
}
}
},
loc(e) {
if (e.currentTarget.dataset.longitude && e.currentTarget.dataset.latitude) {
uni.openLocation({
latitude: e.currentTarget.dataset.latitude,
longitude: e.currentTarget.dataset.longitude,
name: this.show_detail.theater_name,
address: this.show_detail.traffic_info
});
} else {
uni.showToast({
title: '地址信息错误',
icon: 'fail',
duration: 2000
});
}
},
open() {},
swith_tab: function(e) {
let swith_area = e.currentTarget.dataset.index;
let seleted_id = '#nav' +
swith_area; // tt.createSelectorQuery().select(seleted_id).boundingClientRect(function(rect){console.log(rect)}).exec()
uni.createSelectorQuery()
.select(seleted_id)
.boundingClientRect()
.selectViewport()
.scrollOffset()
.exec(function(res) {
uni.pageScrollTo({
scrollTop: res[0].top + res[1].scrollTop,
duration: 300
});
});
this.setData({
swith_area
});
}
}
};
</script>
<style>
/* 隐藏pop层中场次选择的滚轮 */
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.nav_show {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
background: #fff;
box-shadow: 0 4rpx 8rpx 0 #dbdbdb;
border-top: 2rpx solid #f8f8f7;
border-bottom: 2rpx solid #f8f8f7;
z-index: 99;
}
.topLine {
text-align: center;
margin: 20rpx;
color: #7b7b7b;
}
.topLine.active {
position: relative;
color: #181818;
font-weight: bold;
}
.topLine.active:after {
content: ' ';
width: 1rem;
height: 0.12rem;
bottom: 0;
/* #ifdef MP-ALIPAY */
width: 0.4rem;
height: 0.04rem;
bottom: 0.5rem;
/* #endif */
background: #fff;
position: absolute;
/* bottom: -0.1rem; */
left: 50%;
transform: translateX(-50%);
background-color: #ff446b;
border-radius: 0.12rem;
}
.topView {
padding-bottom: 500rpx;
position: relative;
}
.image {
position: absolute;
top: -480rpx;
}
.list {
display: flex;
padding: 20rpx 30rpx;
background: #fff;
border-radius: 24rpx 24rpx 0 0;
position: relative;
margin-top: 480rpx;
}
.list .img {
width: 204rpx;
height: 306rpx;
background: #d8d8d8;
border-radius: 16rpx;
}
.list .info {
padding: 0 8rpx 0 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.list .info .title {
font-size: 32rpx;
font-weight: bold;
color: #181818;
}
.list .info .des {
font-size: 24rpx;
color: #7b7b7b;
}
.list .info .des .des_title {
font-size: 24rpx;
color: #7b7b7b;
}
.list .info .des .des_info {
color: #181818;
}
.list .info .price {
font-size: 44rpx;
font-weight: bold;
color: #ff1d42;
}
._area {
margin: 20rpx 0;
padding: 20rpx 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
}
._area image {
width: 60rpx;
height: 60rpx;
}
._area .info .text1 {
font-size: 28rpx;
}
._area .info .text2 {
font-size: 24rpx;
margin-top: 4rpx;
color: #7b7b7b;
}
._block {
background: #fff;
margin-bottom: 20rpx;
}
._block ._title {
display: flex;
align-items: center;
font-size: 16px;
font-weight: bold;
color: #181818;
padding: 30rpx;
}
._block ._title ._icon {
width: 8rpx;
height: 36rpx;
background: #ff446b;
border-radius: 4rpx;
margin: 0 20rpx 0 0;
}
._block ._flex {
white-space: nowrap;
margin: 0 30rpx;
/* #ifndef MP-ALIPAY */
display: flex;
width: 690rpx;
/* #endif */
}
._block ._flex ._img {
border-radius: 8rpx;
width: 540rpx;
height: 360rpx;
margin: 0 10rpx;
/* #ifdef MP-BAIDU || MP-ALIPAY */
display: inline-block !important;
flex-shrink: 0;
object-fit: fill !important;
/* #endif */
}
._block .img1 {
margin: 0 auto 0 30rpx;
display: flex;
flex-direction: column;
}
._block .img1 .img1_list {
width: 690rpx;
vertical-align: top;
margin-top: -1rpx;
}
._block .roll {
text-align: center;
padding: 20rpx 0;
font-size: 24rpx;
color: #1394f2;
}
._block .warning {
background: #fff;
padding-bottom: 20rpx;
display: flex;
}
._block .warning .dot_icon {
width: 8rpx;
margin: 0 20rpx 0 30rpx;
height: 36rpx;
align-items: center;
display: flex;
}
._block .warning .dot_icon .dot {
width: 8rpx;
height: 8rpx;
background: #7b7b7b;
border-radius: 50%;
}
._block .warning .text {
font-size: 24rpx;
color: #181818;
margin-right: 40rpx;
}
.bottom_area {
position: fixed;
bottom: 0;
width: 100%;
}
.safeAreaBottom{
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: constant(safe-area-inset-bottom);
}
.bottom_area .tips {
height: 74rpx;
background: #fff0f5;
color: #ff446b;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
}
.bottom_area .bottom {
display: flex;
align-items: center;
background: #fff;
padding: 28rpx 0;
}
.bottom_area .bottom .iconButton {
background-color: transparent !important;
padding: 0 !important;
line-height: inherit !important;
margin: 0 0 0 60rpx !important;
width: auto !important;
font-weight: 500 !important;
border-radius: none !important;
display: flex;
flex-direction: column;
/* #ifdef MP-ALIPAY */
border: none;
height: auto;
/* #endif */
}
.bottom_area .bottom .iconButton .icon {
width: 40rpx;
height: 40rpx;
}
.bottom_area .bottom .iconButton .text {
font-size: 20rpx;
color: #181818;
margin-top: 6rpx;
}
/* #ifdef MP-ALIPAY */
.bottom_area .bottom .iconButton .text text {
line-height: 0.32rem;
}
/* #endif */
.bottom_area .bottom .button {
width: 400rpx;
height: 72rpx;
line-height: 72rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
font-size: 28rpx;
color: #ffffff;
margin-right: 40rpx;
/* #ifdef MP-ALIPAY */
margin-left: auto;
/* #endif */
}
.bottom_area .bottom .btn1 {
pointer-events: none;
}
.drama_list {
padding: 30rpx;
}
.drama_list .title {
font-size: 36rpx;
font-weight: bold;
color: #181818;
}
.drama_list .area {
font-size: 24rpx;
color: #7b7b7b;
margin: 10rpx 0 30rpx 0;
}
.drama_list .select {
font-size: 24rpx;
font-weight: bold;
color: #181818;
}
.drama_list ._select {
margin-left: 30rpx;
color: #7b7b7b;
}
.drama_list .scroll {
height: 400rpx;
width: 80%;
margin: 20rpx 0 100rpx 0;
}
.drama_list .scroll .sel_area {
margin: 10rpx 0;
padding: 10rpx 30rpx;
display: inline-block;
border-radius: 8rpx;
font-size: 24rpx;
color: #181818;
position: relative;
width: 288rpx;
text-align: center;
white-space: nowrap;
}
.drama_list .scroll ._selected {
border: 1rpx solid red;
}
.drama_list .scroll ._not_sel {
border: 1rpx solid #808080;
color: #808080;
}
.drama_list .scroll .null_tkt {
background: #dddddd;
color: #ffffff;
border: 2rpx solid #dddddd;
}
.drama_list .scroll .tags {
position: absolute;
color: #ff1d42;
position: absolute;
padding: 0 5rpx;
border-radius: 4rpx;
border: 2rpx solid #ff1d42;
top: -12rpx;
right: -40rpx;
}
._bottom {
margin-top: 20rpx;
border-top: 3px solid #dddddd;
}
._bottom .selector_dsn {
margin: 30rpx 25% 0 25%;
/* #ifdef MP-BAIDU */
margin: 30rpx 25%;
/* #endif */
width: 50%;
height: 72rpx;
line-height: 72rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
font-size: 28rpx;
color: #ffffff;
}
</style>

114
src/pages/opera/stage/stage_photo.vue
Unescape View File

@ -0,0 +1,114 @@
<template>
<view class="stage_photo">
<view class="no" v-if="picture_list.length <= 0">暂无数据</view>
<view class="stage_list">
<view class="image" v-for="(item, index) in picture_list" :key="index">
<image :src="item.url" :data-index="index" @tap="previewMedia"></image>
</view>
</view>
</view>
</template>
<script>
// pages/opera/stage/stage_photo.js
import { httpUtil, http, login_check } from '../../../utils/util';
export default {
data() {
return {
picture_list: [],
show_title: '开心麻花',
abb_id: ''
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
console.log(options);
this.setData({
show_title: options.show_title,
abb_id: options.abb_id
});
http('/api/v1/share-picture-list', 'get', {
abb_id: options.abb_id
}).then((res) => {
this.setData({
picture_list: res.picture_list
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
let url = 'https://mahuaimage.oss-cn-qingdao.aliyuncs.com/mini_app/share/home-share.png';
return {
title: this.show_title,
path: '/pages/opera/stage/stage_photo?abb_id=' + this.abb_id + '&show_title=' + this.show_title,
imageUrl: this.picture_list.length > 0 ? '' : url
};
},
methods: {
previewMedia(e) {
let imageList = []
this.picture_list.forEach((e) => {
imageList.push(e.url);
});
uni.previewImage({
urls: imageList,
current: e.currentTarget.dataset.index
});
}
}
};
</script>
<style>
/* pages/opera/stage/stage_photo.wxss */
.no {
text-align: center;
line-height: 300rpx;
}
.stage_photo {
padding: 0 20rpx;
}
.stage_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.stage_list .image {
border-radius: 8rpx;
width: 330rpx;
height: 240rpx;
margin: 0rpx 10rpx 10rpx;
overflow: hidden;
}
image {
width: 100%;
height: 100%;
}
</style>

350
src/pages/special/straddlen/new_years.vue
Unescape View File

@ -0,0 +1,350 @@
<template>
<view class="new_years">
<view class="img" @tap="onChange" :data-router="item.router_path" v-for="(item, index) in straddlen_list" :key="index">
<image :src="item.url" mode="widthFix"></image>
</view>
<view class="img positRel">
<image mode="widthFix" src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61ca7d5d743994756ea894f7ac294c303a549f3eaf4c0.jpg"></image>
<view class="input input1" :style="'top:' + input1_top + 'rpx'">
<input type="text" class="input1" @input="bindUserName" />
<!-- <input type="text" class="input2" bindinput='bindNumber' />
<textarea name="" id="" cols="30" class="input3" rows="10" bindinput='bindOpinion'></textarea> -->
</view>
<view class="input input2" :style="'top:' + input2_top + 'rpx'">
<input type="text" class="input2" @input="bindNumber" />
</view>
<view class="input input3">
<textarea name="" class="text3" @input="bindOpinion"></textarea>
</view>
<image
src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61ca7e7498337f91897c7e1bd41041b3c57643d4da926.png"
class="submit"
@tap.stop.prevent="onSubmit"
mode="widthFix"
/>
</view>
</view>
</template>
<script>
const app = getApp();
import { http, httpUtil, login_check } from '../../../utils/util';
import { host } from '../../../Gdata';
export default {
data() {
return {
straddlen_list: [
{
id: 1,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ad5dd76ec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
},
{
id: 2,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ad9b188ec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
},
{
id: 3,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6adc235bec9ccbf0d9d2160aa9df5baed8fd5236.jpg',
router_path: '/pages/opera/show/show_detail?cycle_id=4266'
},
{
id: 4,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6adf10ecec9ccbf0d9d2160aa9df5baed8fd5236.jpg'
},
{
id: 5,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae147744ea45ce96dac01e01bd1272c5e0a212d.jpg',
router_path: '/pages/opera/show/show_detail?cycle_id=4191'
},
{
id: 6,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae3fe584ea45ce96dac01e01bd1272c5e0a212d.jpg'
},
{
id: 7,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae5bfb74ea45ce96dac01e01bd1272c5e0a212d.jpg',
router_path: '/pages/opera/show/show_detail?cycle_id=4265'
},
{
id: 8,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6ae9b83c4ea45ce96dac01e01bd1272c5e0a212d.jpg'
},
{
id: 9,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6aeb107a4ea45ce96dac01e01bd1272c5e0a212d.jpg',
router_path: '/pages/opera/show/show_detail?cycle_id=4239'
},
{
id: 10,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6aee19f54ea45ce96dac01e01bd1272c5e0a212d.jpg'
},
{
id: 11,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af04e4abcbc9f3782865f83b94490981e992789.jpg',
router_path: '/pages/opera/show/show_detail?cycle_id=4296'
},
{
id: 12,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af30d73bcbc9f3782865f83b94490981e992789.jpg'
},
{
id: 13,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af47235bcbc9f3782865f83b94490981e992789.jpg',
router_path: '/pages/opera/show/show_detail?cycle_id=4276'
},
{
id: 14,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af7c267bcbc9f3782865f83b94490981e992789.jpg'
},
{
id: 15,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6af99dacbcbc9f3782865f83b94490981e992789.jpg',
router_path: '/pages/opera/show/show_detail?cycle_id=4301'
},
{
id: 16,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6afd5a84bcbc9f3782865f83b94490981e992789.jpg'
},
{
id: 17,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6afec8efbcbc9f3782865f83b94490981e992789.jpg',
router_path: '/pages/opera/show/show_detail?cycle_id=4306'
},
{
id: 18,
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cac6b01ff896db52cca6602afb21f90def085ebe24c.jpg'
}
],
form_list: {
activity_id: 37,
name: '',
mobile: '',
content: ''
},
input1_top: 100,
input2_top: 176
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
let iphone_width = app.globalData.screenWidth;
console.log(iphone_width, '屏幕宽度');
if (iphone_width <= 320) {
console.log(320);
this.setData({
input1_top: 96,
input2_top: 166
});
} else {
if (iphone_width > 320 && iphone_width <= 375) {
console.log('320-375');
this.setData({
input1_top: 96,
input2_top: 172
});
} else {
if (iphone_width > 375 && iphone_width < 400) {
console.log('375-400');
this.setData({
input1_top: 102,
input2_top: 170
});
}
}
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
let title = '开心麻花有笑跨年攻略';
let imageUrl = 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61cad2bba6e2b2fc1d12ae96520a9bbc7181b00e43c8b.jpg';
return {
//自定义转发内容
title,
imageUrl //不设置此字段时，默认截取当前页面作为展示的图片
};
},
methods: {
onChange(e) {
// console.log(e.currentTarget.dataset.router);
let url = e.currentTarget.dataset.router;
if (!url) {
return;
}
console.log(url);
uni.navigateTo({
url
});
},
bindUserName(e) {
console.log(e, 'bindUserName'); // let username=e.detail.value
this.form_list.name = e.detail.value;
},
bindNumber(e) {
console.log(e, 'bindNumber');
this.form_list.mobile = e.detail.value;
},
bindOpinion(e) {
console.log(e, 'bindOpinion');
this.form_list.content = e.detail.value;
},
onSubmit() {
if (!login_check()) {
return;
}
let { name, mobile, content } = this.form_list;
if (!name) {
uni.showToast({
title: '请输入姓名',
icon: 'none',
mask: true
});
return;
}
if (!mobile) {
uni.showToast({
title: '请填写手机号',
icon: 'none',
mask: true
});
return;
}
var myreg = /^1[3456789]\d{9}$/;
if (!myreg.test(mobile)) {
uni.showToast({
title: '手机号错误',
icon: 'none',
mask: true
});
return;
}
if (!content) {
uni.showToast({
title: '请填写你想说的话',
icon: 'none',
mask: true
});
return;
}
http('/api/v1/topic-reply', 'post', { ...this.form_list }).then((res) => {
uni.showToast({
title: '提交成功',
icon: 'none',
mask: true
});
}); // console.log(this.data.form_list, '111111');
}
}
};
</script>
<style>
/* pages/special/straddlen/new_years.wxss */
.img image {
width: 100%;
display: block;
margin-top: -1rpx;
}
.positRel {
position: relative;
}
.input {
/* transform: rotate(-3deg); */
}
.input input {
font-size: 28rpx;
line-height: 28rpx;
/* border: 1px solid red; */
height: 40rpx;
}
.input.input1 {
width: 120rpx;
/* height: 75rpx; */
/* margin-bottom: 38rpx; */
/* margin-left: 68rpx; */
text-align: center;
position: absolute;
left: 236rpx;
top: 100rpx;
transform: rotate(-3deg);
}
.input.input2 {
width: 300rpx;
position: absolute;
left: 236rpx;
top: 175rpx;
/* padding-left: 10rpx; */
transform: rotate(-3deg);
text-align: center;
}
.input.input3 {
position: absolute;
left: 230rpx;
top: 330rpx;
}
.text3 {
width: 330rpx;
height: 110rpx;
/* border: 1px solid red; */
font-size: 28rpx;
line-height: 28rpx;
transform: rotate(-5deg);
}
.img .submit {
position: absolute;
right: 60rpx;
bottom: 270rpx;
width: 160rpx;
height: 80rpx;
z-index: 10;
}
</style>

190
src/pages/user/auto_service/auto_service.vue
Unescape View File

@ -0,0 +1,190 @@
<template>
<view>
<view class="warning" style="padding-top: 30rpx">如您对开心麻花有建议或意见，</view>
<view class="warning" style="padding-bottom: 30rpx">请在工作时间拨打下方您所属地区的指定电话</view>
<view class="line" :data-tel="item.tel" @tap="tel" v-for="(item, index) in service_list" :key="index">
<view class="area">{{ item.city }}</view>
<view class="tel">
{{ item.tel }}
<image class="custom-icon" src="/static/images/ui/call.png" />
</view>
</view>
</view>
</template>
<script>
// pages/user/auto_service/auto_service.js
export default {
data() {
return {
service_list: [
{
city: '北京',
tel: '010-51261058'
},
{
city: '天津',
tel: '022-58015757'
},
{
city: '太原',
tel: '13821809829'
},
{
city: '青岛',
tel: '15963223329'
},
{
city: '济南',
tel: '15269289598'
},
{
city: '郑州',
tel: '17561670037'
},
{
city: '唐山',
tel: '13932088436 '
},
{
city: '沈阳/大连',
tel: '15840406629'
},
{
city: '石家庄',
tel: '13833191514'
},
{
city: '南京/合肥',
tel: '025-52608651 '
},
{
city: '南京/合肥',
tel: '15210740520'
},
{
city: '武汉',
tel: '027-85497758'
},
{
city: '长沙',
tel: '027-85497758'
},
{
city: '成都',
tel: '028-84400172'
},
{
city: '深圳',
tel: '0755-25589333 '
},
{
city: '广州',
tel: '020-88525813'
},
{
city: '上海',
tel: '021-32556698 '
},
{
city: '上海剧院',
tel: '021-69112921'
},
{
city: '上海剧院',
tel: '15810204940'
},
{
city: '西安',
tel: '17802900856'
},
{
city: '银川',
tel: '17802900856 '
},
{
city: '杭州',
tel: '0571-87979007'
},
{
city: '杭州开心麻花剧场',
tel: '0571-88112730'
}
]
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
tel: function (e) {
var tel = e.currentTarget.dataset.tel;
uni.makePhoneCall({
phoneNumber: tel,
success: function () {
console.log('拨号成功！');
},
fail: function () {
console.log('拨号失败！');
}
});
}
}
};
</script>
<style>
.warning {
text-align: center;
font-size: 28rpx;
color: #181818;
}
.line {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 30rpx;
padding: 30rpx 0;
border-bottom: 1px solid #eeeeee;
color: #333333;
}
.line .tel {
display: flex;
align-items: center;
}
.line .tel .custom-icon {
padding-left: 20rpx;
width: 24rpx;
height: 24rpx;
}
</style>

670
src/pages/user/discount/answer_topic/answer_topic.vue
Unescape View File

@ -0,0 +1,670 @@
<template>
<view class="answer_topic">
<view class="topic_index" v-if="step == 0" @tap="get_step" data-step="0">
<image src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b1d53bcff59c953320c562670249f6bb94574e2764f.jpg"></image>
</view>
<view class="topic_answer" v-if="step == 1" @tap="" data-step="1">
<view class="pop">
<image class="title" :src="answer_list.title_url" mode="widthFix"></image>
<image class="ans answer1" :src="answer_list.btn1.url" :data-id="answer_list.btn1.id" @tap="next" mode="widthFix"></image>
<image class="ans answer2" :src="answer_list.btn2.url" :data-id="answer_list.btn2.id" @tap="next" mode="widthFix"></image>
</view>
</view>
<view class="topic_last" v-if="step == 2">
<view class="last_pic">
<view class="pic1">
<image mode="" :src="answer_piclist[answer_piclist_index].url"></image>
</view>
<view class="pic2">
<image mode="" @tap="ontab" src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b30b8c57b8e17be00c1823b5dbda3f316c041ef5226.png"></image>
<view class="last_btn" :style="'top:' + btn_top + 'rpx'">
<view class="img maRight" @tap="cancel">
<image
class=""
src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b1bc3f6cb4b3c6db67097e4dc8d5e75d1a08539b953.png"
mode="widthFix"
></image>
</view>
<view class="img maRight">
<!-- <button data-id="shareBtn" open-type="share" plain="true" class="share_btn "> -->
<image
@tap="look"
src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b1bc3f5538f3c6db67097e4dc8d5e75d1a08539b953.png"
mode="widthFix"
></image>
<!-- </button> -->
</view>
<view class="img" @tap="oncouon">
<image src="https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b1bc3f049cc3c6db67097e4dc8d5e75d1a08539b953.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
// pages/user/discount/answer_topic/answer_topic.js
const app = getApp();
export default {
data() {
return {
// iphone_height:app.globalData.screenHeight,
step: 0,
//0首页1答题2结果页
pic_list: [
{
title_url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b1ada37868a134ab219c9b2cf7fb7bfbf0e4e9da768.png',
btn1: {
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f86adf1cc3e07c3d5e38ef85a276c10e5ddc860.png',
id: '1'
},
btn2: {
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f8a0a04cc3e07c3d5e38ef85a276c10e5ddc860.png',
id: '2'
}
},
{
title_url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f8599a1cc3e07c3d5e38ef85a276c10e5ddc860.png',
btn1: {
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f8cc676cc3e07c3d5e38ef85a276c10e5ddc860.png',
id: '3'
},
btn2: {
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f7d01f20410f96c90f22a6a6ee4c1b64851ab55.png',
id: '4'
}
},
{
title_url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f832aaacc3e07c3d5e38ef85a276c10e5ddc860.png',
btn1: {
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f8af5bccc3e07c3d5e38ef85a276c10e5ddc860.png',
id: '5'
},
btn2: {
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f84ab10cc3e07c3d5e38ef85a276c10e5ddc860.png',
id: '6'
}
},
{
title_url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f87ca49cc3e07c3d5e38ef85a276c10e5ddc860.png',
btn1: {
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f8bd3d4cc3e07c3d5e38ef85a276c10e5ddc860.png',
id: '7'
},
btn2: {
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b195f8daf18cc3e07c3d5e38ef85a276c10e5ddc860.png',
id: '8'
}
}
],
//全部选择题
answer_list: [],
//第几道选择题列表
answer_index: 0,
//第几道选择题下标
last_answer: [],
//选择题结果数组
answer_piclist: [
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b83808e8b8a79bfe7ee712784b5de25c88f71deab.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b8388773a8a79bfe7ee712784b5de25c88f71deab.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b838cbb4f8a79bfe7ee712784b5de25c88f71deab.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b8390cb7f73e3272c120072d298474562fb4c9375.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b307103744f5f39b6f781012e2af323ca4f0eecf111.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b8397b7c673e3272c120072d298474562fb4c9375.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b839a8ba773e3272c120072d298474562fb4c9375.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b839da45873e3272c120072d298474562fb4c9375.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b83a1e1ff4d106694ea02244bd19b4a64e16f138d.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b83abc2704d106694ea02244bd19b4a64e16f138d.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b83aedb904d106694ea02244bd19b4a64e16f138d.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b83b45c94ae1a07efdb41747558031b8715bdc618.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b83bd4878ae1a07efdb41747558031b8715bdc618.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b83c136f1f34ea660275bb582f6c355f0a20f625a.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b3047a97f83788ba5f76578f12c69c7e700b2359e8a.png'
},
{
url: 'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2b83c7f7dbf34ea660275bb582f6c355f0a20f625a.png'
}
],
//上半截图片
answer_piclist_index: 0,
//当前呈现下标
picurl: '',
previewImage: [
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6a8bbaad6ce2999e3f480cc263f9ae23dbd36da1.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6a921de19154e0ca4f47047df7f3b84d8eed1d27.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6a97bf399154e0ca4f47047df7f3b84d8eed1d27.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6aa3da9aadfa53d230af143cfa4f485b10219eda.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b3070fe27da69a26c94f09e59eecb5db9a36a56b041.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6abeb72601118e9b6b50f202bf29176e7d951eec.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6ac88549510ff769aeb84272eb112d3eb03b6fd3.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6ad58eeef5811a201efe472044297e3456b90e0a.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6ae54229fc30d50537c9ebdc257f0aae66708ee8.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6afdcec6f41a59769b0ed61302345e344157f6e5.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6b076335b702113774d34aacc39d6290f16b3dae.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6b0db9e9b702113774d34aacc39d6290f16b3dae.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6b1800ea9862ac348bba5b9b263f84f76bcfea7e.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6b243d5343f15ebaa119bfc38a3d770a6e3860fa.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b31e041b3b888b557d0677ee5bf6be3a38e1d9a7dd9.jpg',
'https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b2c6b3c7c15796790e23af5f83470f34eb2aee0f0d2.jpg'
],
//完整结果图片
//btn按钮top
btn_top: 10,
url: '',
id: ''
};
},
onLoad: function (options) {
let iphone_height = app.globalData.screenHeight;
console.log(iphone_height);
if (iphone_height <= 600) {
this.setData({
btn_top: 0
});
} else {
if (iphone_height >= 600 && iphone_height <= 700) {
this.setData({
btn_top: 4
});
} else {
if (iphone_height >= 700 && iphone_height <= 800) {
this.setData({
btn_top: 8
});
} else {
if (iphone_height >= 800 && iphone_height <= 850) {
this.setData({
btn_top: 10
});
} else {
if (iphone_height >= 850) {
this.setData({
btn_top: 14
});
}
}
}
}
}
this.setData({
step: 0,
answer_index: 0,
answer_list: [],
last_answer: []
});
uni.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
methods: {
/**
* 生命周期函数--监听页面加载
*/
oncouon() {
let activity_id = ['3425,3426,3427,3428'];
uni.navigateTo({
url: '/pages/user/discount/coupons/coupons?activity_id=' + activity_id
});
},
cancel() {
uni.showToast({
title: '重新测试',
icon: 'loading',
mask: true,
duration: 800
});
setTimeout(() => {
this.setData({
step: 1,
answer_index: 0,
answer_list: this.pic_list[0],
last_answer: []
});
}, 800);
},
look(e) {
uni.previewImage({
urls: [this.previewImage[this.answer_piclist_index]]
});
},
next(e) {
let id = e.currentTarget.dataset.id;
this.last_answer.push(id);
if (this.answer_index >= 3) {
console.log(this.last_answer, 'last_answer');
uni.showLoading({
title: '正在生成',
mask: true
});
let abswer_arr = this.last_answer;
if(abswer_arr[0] == '1') {
if(abswer_arr[1] == '3') {
if(abswer_arr[2] == '5') {
if(abswer_arr[3] == '7') {
this.setData({
answer_piclist_index: 0
});
} else {
this.setData({
answer_piclist_index: 1,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
}
} else {
if(abswer_arr[3] == '7') {
this.setData({
answer_piclist_index: 2,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
} else {
this.setData({
answer_piclist_index: 3,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
}
}
} else {
if(abswer_arr[2] == '5') {
if(abswer_arr[3] == '7') {
this.setData({
answer_piclist_index: 4,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
} else {
this.setData({
answer_piclist_index: 5,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
}
} else {
if(abswer_arr[3] == '7') {
this.setData({
answer_piclist_index: 6,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
} else {
this.setData({
answer_piclist_index: 7,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
}
}
}
} else {
if(abswer_arr[1] == '3') {
if(abswer_arr[2] == '5') {
if(abswer_arr[3] == '7') {
this.setData({
answer_piclist_index: 8,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
} else {
this.setData({
answer_piclist_index: 9,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
}
} else {
if(abswer_arr[3] == '7') {
this.setData({
answer_piclist_index: 10,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
} else {
this.setData({
answer_piclist_index: 11,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
}
}
} else {
if(abswer_arr[2] == '5') {
if(abswer_arr[3] == '7') {
this.setData({
answer_piclist_index: 12,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
} else {
this.setData({
answer_piclist_index: 13,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
}
} else {
if(abswer_arr[3] == '7') {
this.setData({
answer_piclist_index: 14,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
} else {
this.setData({
answer_piclist_index: 15,
picurl: this.answer_piclist[this.answer_piclist_index].url
});
}
}
}
}
// if (abswer_arr[0] == '1' && abswer_arr[1] == '3' && abswer_arr[2] == '5' && abswer_arr[3] == '7') {
// this.setData({
// answer_piclist_index: 0
// });
// } else {
// if (abswer_arr[0] == '1' && abswer_arr[1] == '3' && abswer_arr[2] == '5' && abswer_arr[3] == '8') {
// this.setData({
// answer_piclist_index: 1,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '1' && abswer_arr[1] == '3' && abswer_arr[2] == '6' && abswer_arr[3] == '7') {
// this.setData({
// answer_piclist_index: 2,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '1' && abswer_arr[1] == '3' && abswer_arr[2] == '6' && abswer_arr[3] == '8') {
// this.setData({
// answer_piclist_index: 3,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '1' && abswer_arr[1] == '4' && abswer_arr[2] == '5' && abswer_arr[3] == '7') {
// this.setData({
// answer_piclist_index: 4,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '1' && abswer_arr[1] == '4' && abswer_arr[2] == '5' && abswer_arr[3] == '8') {
// this.setData({
// answer_piclist_index: 5,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '1' && abswer_arr[1] == '4' && abswer_arr[2] == '6' && abswer_arr[3] == '7') {
// this.setData({
// answer_piclist_index: 6,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '1' && abswer_arr[1] == '4' && abswer_arr[2] == '6' && abswer_arr[3] == '8') {
// this.setData({
// answer_piclist_index: 7,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '2' && abswer_arr[1] == '3' && abswer_arr[2] == '5' && abswer_arr[3] == '7') {
// this.setData({
// answer_piclist_index: 8,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '2' && abswer_arr[1] == '3' && abswer_arr[2] == '5' && abswer_arr[3] == '8') {
// this.setData({
// answer_piclist_index: 9,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '2' && abswer_arr[1] == '3' && abswer_arr[2] == '6' && abswer_arr[3] == '7') {
// this.setData({
// answer_piclist_index: 10,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '2' && abswer_arr[1] == '3' && abswer_arr[2] == '6' && abswer_arr[3] == '8') {
// this.setData({
// answer_piclist_index: 11,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '2' && abswer_arr[1] == '4' && abswer_arr[2] == '5' && abswer_arr[3] == '7') {
// this.setData({
// answer_piclist_index: 12,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '2' && abswer_arr[1] == '4' && abswer_arr[2] == '5' && abswer_arr[3] == '8') {
// this.setData({
// answer_piclist_index: 13,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '2' && abswer_arr[1] == '4' && abswer_arr[2] == '6' && abswer_arr[3] == '7') {
// this.setData({
// answer_piclist_index: 14,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// } else {
// if (abswer_arr[0] == '2' && abswer_arr[1] == '4' && abswer_arr[2] == '6' && abswer_arr[3] == '8') {
// this.setData({
// answer_piclist_index: 15,
// picurl: this.answer_piclist[this.answer_piclist_index].url
// });
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
// }
setTimeout(() => {
uni.hideLoading();
this.setData({
step: 2
});
}, 1000);
return;
}
let answer_index = this.answer_index + 1;
console.log(answer_index);
this.setData({
answer_index,
answer_list: this.pic_list[answer_index]
});
},
get_step(e) {
// console.log(e);
let step = e.currentTarget.dataset.step;
this.setData({
answer_list: this.pic_list[0],
step: 1
});
},
getshare() {
this.onShareAppMessage(1);
uni.showShareMenu();
},
ontab() {
console.log('占位：函数 ontab 未声明');
}
}
};
</script>
<style>
.topic_index {
height: 100%;
}
.topic_index image {
width: 100%;
height: 100%;
position: absolute;
vertical-align: middle;
}
.answer1 {
margin-top: 100rpx;
}
.answer2 {
margin-top: 40rpx;
}
.topic_answer {
width: 100%;
height: 100vh;
background: url('https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b17100c71a32d5df7e5374efc99918f632401e19f77.jpg');
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
}
.pop {
width: 75%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pop image {
/* width: 200rpx;
height: 200rpx; */
/* display: block; */
vertical-align: middle;
}
.pop .ans {
}
.answer_topic {
width: 100%;
height: 100vh;
}
.topic_answer .di {
width: 100%;
height: 100vh;
}
.topic_last {
/* width: 100%;
height: 100vh;
background: url("https://mahuaimage2.oss-cn-qingdao.aliyuncs.com/mini_app/video/61b1bd95440f58318553fb8add327f558e5508d778756.jpg");
background-size: 100% 100%; */
/* position: relative; */
}
.last_pic {
}
.last_pic image {
width: 100%;
height: 100%;
vertical-align: middle;
}
.last_pic .pic1 {
height: 74vh;
margin-top: -1rpx;
}
.last_pic .pic2 {
margin-top: -1rpx;
height: 26vh;
position: relative;
}
.last_btn {
display: flex;
justify-content: space-between;
position: absolute;
top: 10rpx;
left: 176rpx;
}
.last_btn .img image {
width: 100%;
height: 100%;
vertical-align: middle;
}
.last_btn .img {
width: 128rpx;
height: 43rpx;
}
.maRight {
margin-right: 12rpx;
}
.share_btn {
border: 0 !important;
height: 43rpx;
line-height: 43rpx;
padding: 0;
vertical-align: middle;
}
</style>

224
src/pages/user/discount/coupons/coupons.vue
View File

File diff suppressed because one or more lines are too long

282
src/pages/user/discount/discount/discount.vue
View File

File diff suppressed because one or more lines are too long

165
src/pages/user/discount/discount_avilable/discount_avilable.vue
Unescape View File

@ -0,0 +1,165 @@
<template>
<view>
<view class="list_item" :data-cycle_id="item.cycle_id" @tap="nav1" v-for="(item, index) in IP_list" :key="index">
<view class="img_area">
<image class="img" :src="item.pic_url" />
</view>
<view class="info">
<view class="top">
<view class="title">{{ item.f_title }}</view>
<view class="area">
<view style="margin-bottom: 8rpx">{{ item.start_time }}-{{ item.end_time }}</view>
<view>{{ item.city_name }}｜{{ item.theater_name }}</view>
</view>
</view>
<view class="b">
<view class="bottom">
<view class="price">
<text style="font-size: 32rpx">¥</text>
<text style="margin: 0 2rpx">{{ item.lowest_price }}</text>
<text style="font-size: 24rpx; color: #7b7b7b">起</text>
</view>
<button class="_detail" :data-cycle_id="item.cycle_id" @tap="show_detail">去使用</button>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { http,location_city} from '../../../../utils/util';
export default {
data() {
return {
IP_list: ''
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
let coupon_id = options.coupon_id;
let city_id = getApp().globalData.city_id;
if (!city_id) {
// 默认北京写法
location_city().then(res => {
let city_id = res.city_info.city_id
getApp().globalData.city_id = city_id
this.getip_list(coupon_id, city_id)
})
return
}
this.getip_list(coupon_id, city_id)
},
getip_list(coupon_id, city_id) {
http("/api/v1/coupon-cycle", "post", { coupon_id, city_id }).then(res => {
this.setData({ IP_list: res })
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
nav1(e) {
uni.navigateTo({
url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id
});
},
show_detail() {
console.log('占位：函数 show_detail 未声明');
}
}
};
</script>
<style>
.list_item {
display: flex;
padding: 30rpx 30rpx 20rpx 30rpx;
background: #fff;
border-radius: 12px 12px 0px 0px;
position: relative;
}
.list_item .img_area {
background: #d8d8d8;
width: 204rpx;
height: 306rpx;
border-radius: 16rpx;
position: relative;
}
.list_item .img_area .img {
width: 204rpx;
height: 306rpx;
border-radius: 16rpx;
position: absolute;
right: 4rpx;
bottom: 4rpx;
}
.list_item .info {
padding: 0 8rpx 0 30rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
.list_item .info .top .title {
font-size: 32rpx;
font-weight: bold;
}
.list_item .info .top .area {
margin: 20rpx 0;
font-size: 24rpx;
color: #7b7b7b;
}
.list_item .info .bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.list_item .info .bottom .price {
font-size: 44rpx;
font-weight: bold;
color: #ff1d42;
}
.list_item .info .bottom ._detail {
font-size: 24rpx;
width: 120rpx;
height: 42rpx;
white-space: nowrap;
border-radius: 22rpx;
text-align: center;
margin: 0;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
color: #fff;
line-height: 42rpx;
}
</style>

201
src/pages/user/discount/discount_ex/discount_ex.vue
Unescape View File

@ -0,0 +1,201 @@
<template>
<view>
<view class="line">
<view :class="'topLine ' + (swith_area == index ? 'active' : ' ')" :data-index="index" @tap="swith_tab" v-for="(item, index) in switch_space" :key="index">
{{ item }}
</view>
</view>
<view class="code">
<view style="text-align: center"><input type="text" :value="code" placeholder="请输入兑换码" @input="handleInput" class="input" /></view>
<button class="_button" :data-index="swith_area" @tap="ex">立即兑换</button>
</view>
</view>
</template>
<script>
// pages/user/discount/discount_ex/discount_ex.js
import { http } from '../../../../utils/util';
import { host } from '../../../../Gdata';
export default {
data() {
return {
switch_space: ['优惠券', '文惠券', '观剧卡'],
swith_area: 0,
code: ''
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
swith_tab: function (e) {
let swith_area = e.currentTarget.dataset.index;
this.setData({
swith_area
});
},
handleInput(event) {
const value = event.detail.value;
this.setData({
code: value
});
},
ex(e) {
let token = getApp().globalData.token;
let uid = getApp().globalData.uid;
let url = ['/api/v1/coupon-exchange', '/api/v1/wenhui-exchange', '/api/v1/card-exchange'];
if (e.currentTarget.dataset.index == 2) {
uni.request({
url: host + url[e.currentTarget.dataset.index],
data: {
card_sn: this.code
},
method: 'post',
header: {
token: token,
uid: uid
},
success: (res) => {
if (200 == res.data.status) {
this.setData({
code: null
});
uni.showToast({
title: '兑换成功',
icon: 'success',
duration: 2000
});
} else {
uni.showToast({
title: '兑换码错误',
icon: 'fail',
duration: 2000
});
}
}
});
} else {
uni.request({
url: host + url[e.currentTarget.dataset.index],
data: {
coupon_sn: this.code
},
method: 'post',
header: {
token: token,
uid: uid
},
success: (res) => {
if (200 == res.data.status) {
this.setData({
code: null
});
uni.showToast({
title: '兑换成功',
icon: 'success',
duration: 2000
});
} else {
uni.showToast({
title: '兑换码错误',
icon: 'fail',
duration: 2000
});
}
}
});
}
}
}
};
</script>
<style>
.line {
display: flex;
}
.line .topLine {
width: 33%;
text-align: center;
padding: 20rpx;
color: #7b7b7b;
}
.line .topLine.active {
position: relative;
color: #181818;
font-weight: bold;
background: #fff;
}
.line .topLine.active:after {
content: ' ';
width: 1rem;
height: 0.12rem;
/* #ifdef MP-ALIPAY */
width: 0.4rem;
height: 0.04rem;
/* #endif */
background: #fff;
position: absolute;
/* bottom: -0.1rem; */
bottom: -0.2rem;
left: 50%;
transform: translateX(-50%);
background-color: #ff446b;
border-radius: 0.12rem;
}
.code {
height: 552rpx;
background: #ffffff;
padding: 200rpx 0 40rpx 0;
}
.code .input {
width: 60%;
margin: 0 20% 100px 20%;
border-bottom: 2rpx solid #ff455b;
}
._button {
width: 312rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #fff;
font-size: 28rpx;
margin-bottom: 80rpx;
margin: auto;
}
</style>

118
src/pages/user/invoice/invoice_edit/invoice_edit.vue
Unescape View File

@ -0,0 +1,118 @@
<template>
<view>
<view v-if="'' == invoice_info.is_company" class="no_content">
<image class="img" src="/static/images/ui/none.png" />
<view class="warn">您目前还没有添加任何发票抬头信息</view>
</view>
<view class="_container" v-else>
<view class="nav" :data-current_item="invoice_info" @tap="_edit">
{{ invoice_info.invoice_title }}
<image src="/static/images/ui/right1.png" />
</view>
</view>
<button class="_button" @tap="_new">新建发票信息</button>
</view>
</template>
<script>
// pages/user/invoice/invoice_edit/invoice_edit.js
import { http } from '../../../../utils/util';
export default {
data() {
return {
show: false,
invoice_info: {
is_company: ''
}
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
http('/api/v1/invoice-title', 'post').then((res) => {
this.setData({
invoice_info: res
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
_edit: function (e) {
uni.navigateTo({
url: '/pages/user/invoice/invoice_edit/invoice_edit_content?current_item=' + JSON.stringify(e.currentTarget.dataset.current_item)
});
},
_new() {
uni.navigateTo({
url: '/pages/user/invoice/invoice_edit/invoice_edit_newMake'
});
}
}
};
</script>
<style>
.no_content_warning {
position: fixed;
top: 30%;
width: 100%;
text-align: center;
color: #999;
}
._container {
margin: 20rpx 0;
}
._container .nav {
background: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30rpx;
font-size: 28rpx;
}
._container .nav image {
width: 26rpx;
height: 26rpx;
margin-right: 12rpx;
}
._button {
position: fixed;
bottom: 100rpx;
width: 312rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #fff;
font-size: 28rpx;
left: 50%;
transform: translate(-50%, 0);
}
</style>

234
src/pages/user/invoice/invoice_edit/invoice_edit_content.vue
Unescape View File

@ -0,0 +1,234 @@
<template>
<view>
<view class="inputField">
<view class="title">抬头类型</view>
<input
type="text"
disabled
:placeholder="is_company == 1 ? '企业单位' : '个人/非企业单位'"
:value="is_company == 1 ? '企业单位' : '个人/非企业单位'"
@input="titleInput"
/>
</view>
<view class="line">
<view class="inputField">
<view class="title">抬头名称</view>
<input type="text" :placeholder="invoice_title" :value="invoice_title" @input="titleInput" />
</view>
<view class="inputField" v-if="is_company">
<view class="title">纳税人识别号</view>
<input type="text" :placeholder="nsrsbh" :value="nsrsbh" @input="nsrsbhInput" />
</view>
<view class="inputField" style="border: none">
<view class="title">发票接收邮箱</view>
<input type="text" :placeholder="email" :value="email" @input="emailInput" />
</view>
</view>
<view class="_conf">
<button class="_button" :disabled="!_edit" @tap="_conf">修改信息</button>
<view class="_b" @tap="_delete">删除信息</view>
</view>
</view>
</template>
<script>
// pages/user/invoice/invoice_edit/invoice_eidt_content.js
import { http } from '../../../../utils/util';
export default {
data() {
return {
edit: false,
is_company: '',
invoice_title: '',
nsrsbh: '',
email: ''
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (options.current_item) {
let info = JSON.parse(options.current_item);
this.setData({
is_company: info.is_company,
invoice_title: info.invoice_title,
nsrsbh: info.nsrsbh,
email: info.email
});
} else {
uni.navigateTo({
url: '/pages/user/invoice/invoice_edit/invoice_edit'
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
titleInput(event) {
const value = event.detail.value;
this.setData({
invoice_title: value,
_edit: true
});
},
nsrsbhInput(event) {
const value = event.detail.value;
this.setData({
nsrsbh: value,
_edit: true
});
},
emailInput(event) {
const value = event.detail.value;
this.setData({
email: value,
_edit: true
});
},
_conf: function () {
let data1 = {};
if (this.is_company == 1 && this.nsrsbh && this.invoice_title && this.email) {
data1 = {
is_company: 1,
invoice_title: this.invoice_title,
nsrsbh: this.nsrsbh,
email: this.email
};
http('/api/v1/invoice-save-title', 'post', data1).then((res) => {
uni.navigateBack();
var pages = getCurrentPages(); //获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2]; //调用上一个页面的onShow方法
prePage.onLoad({});
}
});
} else {
if (this.is_company == 0 && this.invoice_title && this.email) {
data1 = {
is_company: 0,
invoice_title: this.invoice_title,
email: this.email
};
http('/api/v1/invoice-save-title', 'post', data1).then((res) => {
uni.navigateBack();
var pages = getCurrentPages(); //获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2]; //调用上一个页面的onShow方法
prePage.onLoad({});
}
});
} else {
uni.showToast({
title: '请输入完整信息！',
icon: 'fail',
duration: 2000
});
}
}
},
_delete: function () {
uni.showModal({
content: '是否删除这条发票信息',
success(res) {
if (res.confirm) {
console.log('用户点击确定');
http('/api/v1/invoice-title-delete', 'post').then(() => {
uni.navigateBack();
var pages = getCurrentPages(); //获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2]; //调用上一个页面的onShow方法
prePage.onLoad({});
}
});
} else {
if (res.cancel) {
console.log('用户点击取消');
}
}
}
});
}
}
};
</script>
<style>
.inputField {
display: flex;
align-items: center;
width: 100%;
font-size: 28rpx;
color: #333333;
border-bottom: 1rpx solid #eeeeee;
padding: 30rpx;
}
.inputField .title {
width: 200rpx;
}
.inputField input {
width: 100%;
flex: 1;
}
._conf {
position: fixed;
bottom: 15%;
text-align: center;
width: 40%;
left: 30%;
}
._button {
width: 312rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #fff;
font-size: 28rpx;
}
._b {
font-size: small;
color: red;
padding-top: 20rpx;
}
</style>

201
src/pages/user/invoice/invoice_edit/invoice_edit_newMake.vue
Unescape View File

@ -0,0 +1,201 @@
<template>
<view>
<view class="_l">
<view class="title">抬头类型</view>
<view class="content">
<view @tap="_A">
<icon size="16" :color="is_company ? '#FF1D42' : '#DFDFDF'" type="success" />
企业单位
</view>
<view @tap="_B">
<icon size="16" type="success" :color="is_company ? '#DFDFDF' : '#FF1D42'" />
个人/非企业单位
</view>
</view>
</view>
<view class="line">
<view class="inputField">
<view class="title">抬头名称</view>
<input type="text" placeholder="请输入公司名称" :value="title" @input="titleInput" />
</view>
<view class="inputField" v-if="is_company">
<view class="title">纳税人识别号</view>
<input type="text" placeholder="请填写纳税人识别号" :value="nsrsbh" @input="nsrsbhInput" />
</view>
<view class="inputField" style="border: none">
<view class="title">发票接收邮箱</view>
<input type="text" placeholder="请填写电子发票接收邮箱" :value="email" @input="emailInput" />
</view>
</view>
<button class="_button" @tap="save">保存信息</button>
</view>
</template>
<script>
// pages/user/invoice/invoice_edit/invoice_edit_newMake.js
import { http } from '../../../../utils/util';
export default {
data() {
return {
is_company: true,
invoice_title: '',
nsrsbh: '',
email: '',
title: ''
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
_A: function () {
this.setData({
is_company: true
});
},
_B: function () {
this.setData({
is_company: false
});
},
titleInput(event) {
const value = event.detail.value;
this.setData({
invoice_title: value
});
},
nsrsbhInput(event) {
const value = event.detail.value;
this.setData({
nsrsbh: value
});
},
emailInput(event) {
const value = event.detail.value;
this.setData({
email: value
});
},
save() {
let data = {};
console.log(this);
if (1 == this.is_company) {
data = {
is_company: 1,
invoice_title: this.invoice_title,
nsrsbh: this.nsrsbh,
email: this.email
};
} else {
if (0 == this.is_company) {
data = {
is_company: 0,
invoice_title: this.invoice_title,
email: this.email
};
}
}
http('/api/v1/invoice-save-title', 'post', data).then((res) => {
uni.navigateBack();
var pages = getCurrentPages(); //获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2]; //调用上一个页面的onShow方法
prePage.onLoad(prePage.options)
}
});
}
}
};
</script>
<style>
._l {
margin: 20rpx 0;
padding: 30rpx;
display: flex;
align-items: center;
font-size: 28rpx;
background: #fff;
}
._l .title {
width: 200rpx;
}
._l .content {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
flex: 1;
}
.line {
background: #fff;
}
.inputField {
display: flex;
align-items: center;
width: 100%;
font-size: 28rpx;
color: #333333;
border-bottom: 1rpx solid #eeeeee;
padding: 30rpx;
}
.line .inputField .title {
width: 200rpx;
}
.line .inputField input {
width: 100%;
flex: 1;
}
._button {
position: fixed;
bottom: 100rpx;
width: 312rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #fff;
font-size: 28rpx;
left: 50%;
transform: translate(-50%, 0);
}
</style>

152
src/pages/user/invoice/invoice_history/invoice_history.vue
Unescape View File

@ -0,0 +1,152 @@
<template>
<view>
<view v-if="!invoiced_list[0].id" class="no_content">
<image class="img" src="/static/images/ui/none.png" />
<view class="warn">没有查询到您的开票历史</view>
</view>
<view v-else class="_container" v-for="(item, index) in invoiced_list" :key="index">
<view class="invoice_info">
<view class="_left">
<view class="_t">开票时间：{{ item.add_time }}</view>
<view class="_b">{{ item.invoice_type }}</view>
</view>
<view class="_right">¥{{ item.total_price }}</view>
</view>
<view class="invoice_status" @tap="get_download" data-url="item.invoice_url" v-if="item.invoice_url">立即下载
</view>
<view v-else class="invoice_status">{{item.invoice_status}}</view>
</view>
</view>
</template>
<script>
// pages/user/invoice/invoice_history/invoice_history.js
import {
http
} from '../../../../utils/util';
export default {
data() {
return {
invoiced_list: {
id: ''
}
};
}
/**
* 生命周期函数--监听页面加载
*/
,
onLoad: function(options) {
http('/api/v1/invoiced-list', 'post').then((res) => {
this.setData({
invoiced_list: res
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
methods: {
get_download(e) {
// console.log(e);
uni.showLoading({
title: '正在加载',
mask: true
});
let url = e.currentTarget.dataset.url;
uni.downloadFile({
url,
header: {
'content-type': 'application/json'
},
success: function(res) {
let filePath = res.tempFilePath;
uni.openDocument({
filePath: filePath,
fileType: 'pdf',
showMenu: true,
success: function(res) {
console.log('打开文档成功');
}
});
}
});
setTimeout(() => {
uni.hideLoading();
}, 1000);
}
}
};
</script>
<style>
._container {
margin: 20rpx;
background-color: #fff;
padding: 10rpx;
border-radius: 10rpx;
}
.invoice_info {
border-bottom: 1rpx dashed #dddddd;
display: flex;
align-items: center;
margin: 0 20rpx;
padding: 20rpx 0;
justify-content: space-between;
}
._t {
margin-bottom: 10rpx;
font-size: 28rpx;
color: #181818;
}
._b {
width: 100rpx;
height: 32rpx;
line-height: 32rpx;
background: #e2f3ff;
border-radius: 6rpx;
border: 2rpx solid #22c0ff;
font-size: 22rpx;
color: #22c0ff;
text-align: center;
}
.invoice_status {
padding: 20rpx;
font-size: 26rpx;
color: #22C0FF;
}
._right {
font-size: 40rpx;
color: #181818;
}
</style>

79
src/pages/user/invoice/invoice_index/invoice_index.vue
Unescape View File

@ -0,0 +1,79 @@
<template>
<view>
<navigator
:url="item.url"
class="nav"
v-for="(item, index) in [
{ title: '开具发票', url: '/pages/user/invoice/my_invoice/my_invoice' },
{ title: '开票历史', url: '/pages/user/invoice/invoice_history/invoice_history' },
{ title: '发票抬头信息', url: '/pages/user/invoice/invoice_edit/invoice_edit' }
]"
:key="index"
>
{{ item.title }}
<image src="/static/images/ui/right1.png" />
</navigator>
</view>
</template>
<script>
// pages/user/invoice/invoice_index/invoice_index.js
import { login_check } from '../../../../utils/util';
export default {
data() {
return {};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
login_check(1);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {}
};
</script>
<style>
.nav {
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #dddddd;
align-items: center;
padding: 30rpx 0;
margin: 0 30rpx;
font-size: 28rpx;
}
.nav image {
width: 26rpx;
height: 26rpx;
margin-right: 12rpx;
}
</style>

159
src/pages/user/invoice/make_invoice/make_invoice.vue
Unescape View File

@ -0,0 +1,159 @@
<template>
<view>
<view v-if="'' == invoice_info.is_company" class="no_content">
<image class="img" src="/static/images/ui/none.png" />
<view class="warn">您目前还没有添加任何发票抬头信息</view>
<button class="_button" @tap="_nav">前往填写开票信息</button>
</view>
<block wx:else>
<view class="_container">
<view class="line">
<view class="title">发票抬头</view>
<view class="content"></view>
{{ invoice_info.invoice_title }}
</view>
<view class="line" v-if="invoice_info.is_company == 1">
<view class="title">纳税人识别号</view>
<view class="content"></view>
{{ invoice_info.nsrsbh }}
</view>
<view class="line">
<view class="title">发票接收邮箱</view>
<view class="content"></view>
{{ invoice_info.email }}
</view>
</view>
<button class="_button" @tap="_confirm">确认开票</button>
</block>
</view>
</template>
<script>
// pages/user/invoice/make_invoice/make_invoice.js
import { http } from '../../../../utils/util';
export default {
data() {
return {
invoice_info: {
is_company: ''
}
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
let order_no = options.order_no;
http('/api/v1/invoice-title', 'post').then((res) => {
res.order_no = order_no;
this.setData({
invoice_info: res
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
_nav() {
wx.navigateTo({
url: '/pages/user/invoice/invoice_edit/invoice_edit_newMake'
});
},
_confirm: function () {
let data1 = this.invoice_info;
if (data1.is_company == 0) {
data1 = {
is_company: data1.is_company,
invoice_title: data1.invoice_title,
email: data1.email,
order_no: data1.order_no
};
}
uni.showModal({
content: '是否确认开票',
confirmColor:"#FF333",
success(res) {
if (res.confirm) {
http('/api/v1/invoice-add', 'post', data1).then((res) => {
uni.navigateBack();
var pages = getCurrentPages(); //获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2]; //调用上一个页面的onShow方法
prePage.onLoad({});
}
uni.showToast({
title: '开票成功',
icon: 'success',
duration: 2000
});
});
} else {
if (res.cancel) {
// console.log('用户点击取消')
}
}
}
});
}
}
};
</script>
<style>
._container {
background: #fff;
}
._container .line {
display: flex;
justify-content: space-between;
border-bottom: 2rpx solid #dddddd;
align-items: center;
padding: 30rpx 0;
margin: 0 30rpx;
font-size: 28rpx;
}
._button {
position: fixed;
bottom: 100rpx;
width: 312rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #fff;
font-size: 28rpx;
left: 50%;
transform: translate(-50%, 0);
}
</style>

156
src/pages/user/invoice/my_invoice/my_invoice.vue
Unescape View File

@ -0,0 +1,156 @@
<template>
<view>
<view class="_warning">温馨提示：部分剧目无法开具电子发票，需联系客服索取纸质发票，具体以页面提示为准。</view>
<view v-if="invoice_list.length == 0" class="no_content">
<image class="img" src="/static/images/ui/none.png" />
<view class="warn">没有查询到可以开票的信息</view>
</view>
<view v-else class="list" v-for="(item, index) in invoice_list" :key="index">
<view class="item">
<view class="info">
<view class="title">{{ item.name }}</view>
<view class="text">
<view style="margin-bottom: 8rpx">{{ item.show_time }} {{ item.city_name }}</view>
<view>订单号：{{ item.order_no }}</view>
</view>
<view class="price">¥{{ item.order_price }}</view>
</view>
<view class="_b" :data-order_no="item.order_no" @tap="make_invoice">开具发票</view>
</view>
</view>
<view class="puzzle" @tap="show=true">无法开票原因？</view>
<u-modal :show="show" title="无法开票原因" @confirm="show=false">
<view class="slot-content message">
<text :decode="true">
1、您没有填写有效的发票抬头信息。\n 2、2017年1月1日起实行，订单支付后一个月内 \n &nbsp;&nbsp;&nbsp;
可以索取电子发票，超期不可索取！\n3、您可索取的发票金额等于0元。
</text>
</view>
</u-modal>
</view>
</template>
<script>
// pages/user/invoice/invoice/invoice.js
import { http } from '../../../../utils/util';
export default {
data() {
return {
show: false,
invoice_list: {
length: 0
}
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
http('/api/v1/invoice-list', 'post').then((res) => {
this.setData({
invoice_list: res
});
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
make_invoice(e) {
uni.navigateTo({
url: '../make_invoice/make_invoice?order_no=' + e.currentTarget.dataset.order_no
});
},
confirm(e) {
console.log(e);
this.show = false;
}
}
};
</script>
<style>
._warning {
font-size: 24rpx;
color: #ff1d42;
background-color: #fff0f5;
padding: 20rpx;
}
.list {
margin: 30rpx;
color: #181818;
}
.list .item {
display: flex;
background: #ffffff;
box-shadow: 0 4rpx 8rpx 0 rgba(109, 109, 109, 0.2);
border-radius: 8rpx;
}
.list .item .info {
padding: 30rpx;
flex: 1;
}
.list .item .info .title {
font-size: 28rpx;
font-weight: bold;
}
.list .item .info .text {
font-size: 24rpx;
margin: 20rpx 0;
}
.list .item .info .price {
font-size: 32rpx;
}
._b {
font-size: 28rpx;
color: #ff1d42;
border-radius: 8rpx;
border: 2rpx solid #ff1d42;
margin: auto 30rpx auto 0;
padding: 6rpx 20rpx;
white-space: nowrap;
}
.puzzle {
position: absolute;
bottom: 15%;
width: 100%;
text-align: center;
color: #808080;
}
.message {
font-size: 24rpx;
color: #565656;
margin: 20rpx auto 40rpx 80rpx;
}
</style>

278
src/pages/user/login/login(ditched).vue
Unescape View File

@ -0,0 +1,278 @@
<template>
<view style="text-align: center;">
<!--pages/user/login/login.wxml-->
<image class="logo" src="/static/images/ui/KXMH_icon.png" />
<!-- #ifndef MP-ALIPAY -->
<button class="login" @getphonenumber="getPhoneNumber" open-type="getPhoneNumber">授权登录</button>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<!-- <button class="login" open-type="getAuthorize" @getAuthorize="onGetAuthorize" onError="onAuthError"
scope='phoneNumber'>
授权手机号
</button> -->
<button class="login" @click="getUserInfo">
授权手机号
</button>
<!-- #endif -->
<uModalExtra :show="show" showCancelButton @getphonenumber='getPhoneNumber' @onGetAuthorize="onGetAuthorize"
confirm-button-open-type="getPhoneNumber" @cancel="show=false">
<view class="slot-content dialog_content">
<view class="flex jc-c">
<u-icon name="checkmark-circle" color="green" size="120rpx" />
</view>
<view class="_l">用户信息授权成功</view>
<view>授权绑定你的手机号</view>
</view>
</uModalExtra>
</view>
</template>
<script>
// pages/user/login/login.js
import uModalExtra from '@/components/u-modal-extra/u-modal-extra';
const app = getApp();
import {
httpUtil,
http
} from '../../../utils/util';
export default {
components: {
uModalExtra
},
data() {
return {
code: '',
userInfo: null,
show: false
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
methods: {
getUserInfo(e) {
uni.showLoading({
title: '加载...',
mask: true
});
var that = this;
// #ifdef MP-WEIXIN
wx.getUserProfile({
// #endif
// #ifndef MP-WEIXIN
uni.getUserInfo({
// #endif
desc: '展示用户信息',
// 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
// #ifndef MP-ALIPAY
that.userInfo = res.userInfo;
// #endif
uni.login({
success: (res) => {
console.log(res)
let code = res.code
app.globalData.code = code;
this.setData({
code,
show: true
});
},
fail: (res) => {
uni.showToast({
title: '调用login失败' // 内容
});
},
complete: (res) => {
uni.hideLoading();
}
});
},
fail: (res) => {
uni.showToast({
title: '调用用户信息失败' // 内容
});
}
});
},
// #ifndef MP-ALIPAY
getPhoneNumber(e) {
console.log(e);
this.setData({
show: false
})
if (e.detail.encryptedData || e.detail.iv) {
let encryptedData = e.detail.encryptedData
let iv = e.detail.iv
if (getApp().globalData.code) {
let code = getApp().globalData.code;
this.tokenAndLogin(code, encryptedData, iv)
} else {
console.log('调用login出错或者code失效');
}
} else {
console.log('获取用户手机号被拒！');
uni.showToast({
title: '请绑定手机号',
// 内容
success: (res) => {}
});
}
},
// #endif
// #ifdef MP-ALIPAY
onGetAuthorize(e) {
this.setData({
show: false
})
my.getOpenUserInfo({
fail: (res) => {},
success: (res) => {
let userInfo = JSON.parse(res.response).response
this.userInfo = userInfo;
console.log("ali userInfo", userInfo);
},
})
my.getPhoneNumber({
success: (res) => {
let encryptedData = res.response;
console.log(res);
if (getApp().globalData.code) {
let code = getApp().globalData.code;
this.tokenAndLogin(code, encryptedData)
} else {
console.log('调用login出错或者code失效');
}
},
fail: (res) => {
console.log(res);
console.log('getPhoneNumber_fail');
},
});
},
// #endif
tokenAndLogin(code, encryptedData, iv) {
let getTokenUrl = ''
let loginUrl = ''
// #ifdef MP-WEIXIN
getTokenUrl = '/api/v1/get-token'
loginUrl = '/api/v1/login'
// #endif
// #ifdef MP-TOUTIAO
getTokenUrl = '/api/v1/dy-get-token'
loginUrl = '/api/v1/dy-login'
// #endif
// #ifdef MP-ALIPAY
getTokenUrl = '/api/v1/ali/get-token'
loginUrl = '/api/v1/ali/login'
// #endif
httpUtil(getTokenUrl, 'get', {
code
}).then((res) => {
if (res.token) {
app.globalData.code = null;
// #ifndef MP-ALIPAY
let data = {
token: res.token,
encryptedData,
iv
}
// #endif
// #ifdef MP-ALIPAY
let data = {
token: res.token,
encryptedData
}
// #endif
httpUtil(loginUrl, 'post', data).then((res1) => {
console.log(this.userInfo)
let userInfo = this.userInfo
// #ifndef MP-ALIPAY
userInfo.avatarUrl = userInfo.avatarUrl.replace("/132", "/0")
// #endif
wx.setStorageSync('userInfo', Object.assign(res1, userInfo))
app.globalData.token = res1.token
app.globalData.uid = res1.uid
app.globalData.userInfo = userInfo
setTimeout(() => {
uni.showToast({
title: '登录成功！'
});
uni.navigateBack();
var pages = getCurrentPages(); //获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2];
prePage.onLoad(prePage.options);
}
}, 1000);
});
} else {
console.log('token获取异常！');
}
});
},
}
};
</script>
<style>
/* pages/user/login/login.wxss */
.logo {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 100px 0 50px 0;
}
.login {
width: 500rpx;
margin: auto;
height: 80rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #fff;
font-size: 36rpx;
line-height: 80rpx;
}
</style>

171
src/pages/user/login/login.vue
Unescape View File

@ -0,0 +1,171 @@
<template>
<view style="text-align: center;">
<!--pages/user/login/login.wxml-->
<image class="logo" src="/static/images/ui/KXMH_icon.png" />
<!-- #ifndef MP-ALIPAY || MP-BAIDU -->
<button class="login" @tap="getUserInfo">授权登录</button>
<!-- #endif -->
<!-- #ifdef MP-BAIDU -->
<button class="login" open-type="getUserInfo" @getuserinfo="getUserInfo">授权登录</button>
<!-- #endif -->
<!-- #ifdef MP-ALIPAY -->
<button class="login" open-type="getAuthorize" @getAuthorize="getUserInfo" onError="onAuthError"
scope='userInfo'>
授权登录
</button>
<!-- #endif -->
<uModalExtra :show="show" showCancelButton @getphonenumber='getPhoneNumber' @onGetAuthorize="onGetAuthorize"
confirm-button-open-type="getPhoneNumber" @cancel="show=false">
<view class="slot-content dialog_content">
<view class="flex jc-c">
<u-icon name="checkmark-circle" color="green" size="120rpx" />
</view>
<view class="_l">用户信息授权成功</view>
<view>授权绑定你的手机号</view>
</view>
</uModalExtra>
</view>
</template>
<script>
// pages/user/login/login.js
import uModalExtra from '@/components/u-modal-extra/u-modal-extra';
const app = getApp();
import {
httpUtil,
http,
getUserInfoUtil,
tokenAndLogin
} from '../../../utils/util';
export default {
components: {
uModalExtra
},
data() {
return {
code: '',
userInfo: null,
show: false
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
methods: {
async getUserInfo(e) {
let res = await getUserInfoUtil(e)
if (res.code) {
let code = res.code
app.globalData.code = code;
this.userInfoX = res.userInfo
this.show = true
}
},
async getPhoneNumber(e) {
this.setData({
show: false
})
if (!getApp().globalData.code) {
uni.showToast({
title: '获取手机号被拒'
})
return
}
let res = null
// #ifndef MP-ALIPAY
if (!e.detail.encryptedData || !e.detail.iv) {
uni.showToast({
title: '请绑定手机号'
})
return
}
res = tokenAndLogin(this.userInfoX, getApp().globalData.code, e.detail.encryptedData, e.detail.iv)
// #endif
// #ifdef MP-ALIPAY
let res1 = await uni.getPhoneNumber()
if (!res1) {
uni.showToast({
title: '手机号获取失败'
})
return
}
res = await tokenAndLogin(this.userInfoX, getApp().globalData.code, res1[1].response)
// #endif
if(!res){
uni.showToast({
title: '登录接口失效！'
});
return
}
setTimeout(() => {
uni.showToast({
title: '登录成功！'
});
uni.$emit('initData');
uni.navigateBack();
var pages = getCurrentPages(); //获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length - 2];
prePage.onLoad(prePage.options);
}
}, 1000);
},
}
};
</script>
<style>
/* pages/user/login/login.wxss */
.logo {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 100px 0 50px 0;
}
.login {
width: 500rpx;
margin: auto;
height: 80rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #fff;
font-size: 36rpx;
line-height: 80rpx;
}
</style>

440
src/pages/user/my_order/my_order.vue
Unescape View File

@ -0,0 +1,440 @@
<template>
<view>
<!-- 切换平台 -->
<view class="line tabs">
<view :class="'topLine ' + (swith_area == index ? 'active' : ' ')" :data-index="index" @tap="swith_tab"
v-for="(item, index) in switch_space" :key="index">
{{ item }}
</view>
</view>
<view v-if="order_list.length == 0" class="no_content">
<image class="img" src="/static/images/ui/none.png" />
<view class="warn">还未查询到您的观看记录</view>
</view>
<view v-else class="order_list" :data-order_no="item.order_no" @tap="detail" v-for="(item, index) in order_list"
:key="index">
<view class="order_status_info">
<view class="title">
<text style="font-weight: bold">订单号：</text>
{{ item.order_no }}
</view>
<view :class="'value ' + (item.order_status == 2 ? 'value1' : item.order_status == 1 ? 'value2' : '')">
{{ order_status[item.order_status] }}
</view>
</view>
<view class="_top">
<image class="img" :src="item.order_pic" />
<view class="info">
<view class="title">{{ item.show_name }}</view>
<view class="_desc">
<view class="left_inf">
<view class="_time">{{ item.show_date }}</view>
<view class="_field">{{ item.city_name }}｜{{ item.theater_name }}</view>
</view>
<view class="right_inf">
<view class="_text">实付款</view>
<view
:class="'_amount ' + (item.order_status == 2 || item.order_status == 1 ? '_amount1' : '_amount2')">
<view style="font-size: 32rpx">¥</view>
<view style="font-weight: bold">{{ item.order_price }}</view>
</view>
</view>
</view>
</view>
</view>
<view v-if="item.order_status == 2" class="_footer">
<view class="_cancel" :data-order_no="item.order_no" @tap.stop.prevent="cancel">取消订单</view>
<view class="_confirm" :data-order_no="item.order_no" @tap.stop.prevent="pay">立即支付</view>
</view>
<view v-if="item.order_status==12||item.order_status==15" class="_footer">
<view class="_confirm" :data-order_no="item.order_no" @tap.stop.prevent="dele">删除订单</view>
</view>
</view>
<view class="more" v-if="order_list.length >= 6 && !has_more" @tap="goTop">别滑了，已经到底啦～</view>
</view>
</template>
<script>
// pages/my_order/my_order.js
import {
http,
login_check
} from '../../../utils/util';
export default {
data() {
return {
order_status: [null, '已支付', '待支付', '客服取消', null, null, '已打票', null, null, '重打申请中', '重打申请通过', '重打申请不通过',
'已完成', null, null, '已过期'
],
switch_space: ['麻花官网', '第三方平台'],
swith_area: 0,
page: 1,
order_list: {
length: 0
},
has_more: '',
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
if (login_check(1)) {
this.init_order(1);
}
uni.$on('initData',() => {
this.init_order(1);
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
if (this.has_more) {
uni.showNavigationBarLoading(); //在标题栏中显示加载图标
let page = this.page + 1;
let _data = {
type: this._type,
page
};
http('/api/v1/order-list', 'get', _data).then((res) => {
uni.hideNavigationBarLoading(); //完成停止加载图标
this.setData({
order_list: this.order_list.concat(res.order_list),
has_more: res.has_more,
page
});
});
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
methods: {
//回到顶部
goTop: function(e) {
// 一键回到顶部
if (uni.pageScrollTo) {
uni.pageScrollTo({
scrollTop: 0
});
}
},
swith_tab: function(e) {
let swith_area = e.currentTarget.dataset.index;
this.init_order(swith_area + 1);
this.setData({
swith_area
});
},
init_order(type) {
http('/api/v1/order-list', 'get', {
type
}).then((res) => {
this.setData({
order_list: res.order_list,
_type: res.type,
has_more: res.has_more
});
});
},
detail(e) {
uni.navigateTo({
url: '/pages/user/order_detail/order_detail?order_no=' + e.currentTarget.dataset.order_no +
'&_type=' + this._type
});
},
pay(e) {
uni.navigateTo({
url: '/pages/user/order_detail/order_detail?order_no=' + e.currentTarget.dataset.order_no +
'&_type=' + this._type
});
},
cancel(e) {
var that = this;
uni.showModal({
content: '是否取消订单',
success(res) {
if (res.confirm) {
http('/api/v1/order-cancel', 'post', {
order_no: e.currentTarget.dataset.order_no
}).then((res) => {
uni.showToast({
title: '取消订单成功！',
duration: 2000
});
that.init_order(1);
});
}
}
});
},
dele(e) {
console.log(e);
var that = this
uni.showModal({
content: '订单删除不可恢复，是否删除?',
success(res) {
if (res.confirm) {
http("/api/v1/order-delete", "get", {
order_no: e.currentTarget.dataset.order_no
}).then(res => {
uni.showToast({
title: '删除成功！',
duration: 1000
})
setTimeout(() => {
that.init_order(1)
}, 200);
})
}
}
})
},
},
};
</script>
<style>
/* pages/my_order/my_order.ttss */
.line {
display: flex;
margin-bottom: 20rpx;
}
.tabs {
background-color: #fff;
font-size: 14px;
}
.line .topLine {
width: 50%;
text-align: center;
margin: 20rpx;
color: #7b7b7b;
}
.line .topLine.active {
position: relative;
color: #181818;
font-weight: bold;
}
.line .topLine.active:after {
content: ' ';
width: 1rem;
height: 0.12rem;
/* #ifdef MP-ALIPAY */
width: 0.4rem;
height: 0.04rem;
/* #endif */
background: #fff;
position: absolute;
/* bottom: -0.1rem; */
bottom: -0.2rem;
left: 50%;
transform: translateX(-50%);
background-color: #ff446b;
border-radius: 0.12rem;
}
.order_list {
margin: 20rpx 30rpx;
background: #fff;
border-radius: 12rpx;
box-shadow: 0px 2px 4px 0px rgba(140, 137, 137, 0.2);
}
.order_list .order_status_info {
display: flex;
justify-content: space-between;
padding: 20rpx 0;
margin: 0 30rpx;
border-bottom: 1px solid #dddddd;
}
.order_list .title {
font-size: 24rpx;
white-space: nowrap;
}
.order_list .value {
font-weight: bold;
font-size: 24rpx;
color: #999999;
}
.order_list .value1 {
color: #ff446b;
}
.order_list .value2 {
color: #22c0ff;
}
.split-line {
position: relative;
flex: 0 0 0;
border-top: 2rpx dashed #eee;
}
._top {
display: flex;
padding: 20rpx 30rpx;
}
._top .img {
background: #d8d8d8;
border-radius: 16rpx;
width: 148rpx;
height: 222rpx;
flex-shrink: 0;
}
._top .info {
padding-left: 20rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
._top .info .title {
font-size: 28rpx;
font-weight: bold;
white-space: normal;
}
._top .info .text {
font-size: 20rpx;
}
._top .info .text2 {
font-size: 20rpx;
margin-top: 8rpx;
color: #7b7b7b;
}
._top .info .line image {
width: 28rpx;
height: 28rpx;
}
._top .info .line text {
margin: 0 20rpx 0 10rpx;
}
._bottom {
padding: 20rpx 30rpx;
}
._bottom ._ticket {
font-size: 28rpx;
margin-bottom: 20rpx;
}
._bottom ._ticket .sit_info {
font-weight: bold;
}
._bottom ._ticket .sit_info1 {
font-size: 24rpx;
color: #7b7b7b;
width: 33%;
}
._desc {
display: flex;
justify-content: space-between;
align-items: center;
}
._desc .left_inf {
font-size: 20rpx;
}
._desc .left_inf ._field {
color: #7b7b7b;
}
._desc .right_inf ._text {
text-align: end;
font-size: 12px;
color: #181818;
}
._desc .right_inf ._amount {
font-size: 44rpx;
display: flex;
align-items: center;
}
._desc .right_inf ._amount1 {
color: #ff1d42;
}
._desc .right_inf ._amount2 {
color: #999999;
}
.order_list ._footer {
display: flex;
border-top: 2rpx dashed #dddddd;
justify-content: flex-end;
padding: 20rpx 0;
margin: 0 30rpx;
font-size: 32rpx;
}
.order_list ._footer ._cancel {
color: #999999;
}
.order_list ._footer ._confirm {
font-weight: bold;
padding-left: 100rpx;
color: #ff1d42;
}
.more {
color: #7b7b7b;
text-align: center;
margin: 70rpx 0 120rpx 0;
}
</style>

162
src/pages/user/my_show/finished_show/finished_show.vue
Unescape View File

@ -0,0 +1,162 @@
<template>
<view>
<view v-if="show_list.length == 0" class="no_content">
<image class="img" src="/static/images/ui/none.png" />
<view class="warn">没有查询到您的观看记录</view>
</view>
<view v-else class="year_item" v-for="(year_item, index) in show_list" :key="index">
<view class="year">
{{ index }}
</view>
<view style="padding: 30rpx 30rpx 30rpx 20rpx; background: #fff">
<view class="month_item" v-for="(month_item, index1) in year_item" :key="index1">
<view class="month">{{ index1 }}</view>
<view style="width: 100%">
<view class="show_list" v-for="(item, index2) in month_item" :key="index2">
<view class="split-line" />
<view class="dot" />
<view class="info">
<view class="time">{{ item.show_date }}</view>
<view class="title">{{ item.show_name }}</view>
<view class="loc">
<view>{{ item.city_name }}</view>
<view>{{ item.theater_name }}</view>
</view>
</view>
<image class="img" :src="item.pic" />
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
// pages/user/my_show/finished_show/finished_show.js
import { http, login_check } from '../../../../utils/util';
export default {
data() {
return {
show_list: {
},
year_item: [],
month_item: []
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
if (login_check(1)) {
http('/api/v1/seen-list', 'get').then((res) => {
this.setData({
show_list: res.show_list
});
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {}
};
</script>
<style>
.year {
margin: 20rpx 0 10rpx 20rpx;
font-size: 36rpx;
font-weight: bold;
}
.month_item {
display: flex;
}
.month_item .month {
width: 80rpx;
}
.show_list {
flex: 1;
display: flex;
position: relative;
}
.show_list .split-line {
position: absolute;
flex: 0 0 0;
margin: 35rpx 0 0 2rpx;
border-left: 4rpx dashed #dddddd;
left: 7rpx;
height: 270rpx;
}
.show_list .dot {
width: 22rpx;
height: 22rpx;
background: #e7e7e7;
position: absolute;
top: 11rpx;
border-radius: 50%;
}
.show_list .info {
font-size: 28rpx;
flex: 1;
margin-left: 40rpx;
}
.show_list .info .time {
margin-bottom: 20rpx;
font-weight: bold;
}
.show_list .info .title {
margin-bottom: 20rpx;
}
.show_list .info .loc {
color: #7b7b7b;
font-size: 24rpx;
}
.show_list .img {
width: 180rpx;
height: 270rpx;
float: right;
margin-bottom: 40rpx;
margin-left: auto;
}
</style>

230
src/pages/user/my_show/wanted_show/wanted_show.vue
Unescape View File

@ -0,0 +1,230 @@
<template>
<view>
<view v-if="follow_list.length == 0" class="no_content">
<image class="img" src="/static/images/ui/none.png" />
<view class="warn">还未查询到您想看的演出</view>
</view>
<view v-else class="list" v-for="(item, index) in follow_list" :key="index">
<view class="abb_detail" :data-abb_id="item.abb_id" @tap="nav">
<image class="img" :src="item.background_pic" mode="aspectFit"/>
<view class="title">{{ item.show_name }}</view>
<view class="line">
<view class="left">
<text style="color: #ff1e43" :decode="true">{{ item.show_total }}&nbsp;</text>
个剧场在演
</view>
<view class="right">
<text :decode="true">{{ item.follow_total }}人想看&nbsp;&nbsp;</text>
<image :src="'/images/ui/' + (true ? 'liked' : 'like') + '/static/pages/user/my_show/wanted_show/.png'" style="width: 30rpx; height: 28rpx" />
</view>
</view>
</view>
<view class="show_detail" v-if="item.show_list[0].cycle_id">
<view style="padding: 20rpx 0; background: #fff; margin: 0 20rpx">
<view class="item" :data-cycle_id="show_item.cycle_id" @tap="nav1" v-for="(show_item, index1) in item.show_list" :key="index1">
<view class="vitr">
<view class="month">{{ show_item.month }}</view>
<view class="dot" />
</view>
<view class="info">
<view class="line" />
<view class="city">{{ show_item.city_name }}</view>
<view class="time">{{ show_item.show_date }}</view>
<view class="area">{{ show_item.theater_name }}</view>
</view>
</view>
</view>
</view>
</view>
<view class="more"></view>
</view>
</template>
<script>
// pages/user/my_show/wanted_show/wanted_show.js
import { http, login_check } from '../../../../utils/util';
export default {
data() {
return {
follow_list: {
length: 0
},
show_item: {
cycle_id: '',
month: '',
city_name: '',
show_date: '',
theater_name: ''
}
};
}
/**
* 生命周期函数--监听页面加载
*/,
onLoad: function (options) {
if (login_check(1)) {
http('/api/v1/follow-list', 'get').then((res) => {
this.setData({
follow_list: res.follow_list
});
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
nav(e) {
uni.navigateTo({
url: '/pages/opera/IP_detail/IP_detail?abb_id=' + e.currentTarget.dataset.abb_id
});
},
nav1(e) {
uni.navigateTo({
url: '/pages/opera/show/show_detail?cycle_id=' + e.currentTarget.dataset.cycle_id
});
}
}
};
</script>
<style>
.list {
}
.list .abb_detail {
margin: 60rpx 30rpx 0 30rpx;
position: relative;
box-shadow: 0 12rpx 12rpx 0 rgba(154, 154, 154, 0.2);
}
.list .abb_detail:after {
content: '';
position: absolute;
width: 32rpx;
height: 16rpx;
/* background:#9A9A9A;
opacity: 0.39; */
z-index: -1;
border-radius: 32rpx 32rpx 0 0;
bottom: 0;
left: 359rpx;
}
.list .abb_detail .img {
width: 690rpx;
/* height: 460rpx; */
}
.list .abb_detail .title {
text-align: center;
padding: 10rpx 0;
line-height: 48rpx;
font-weight: bold;
border-bottom: 2rpx dashed #dddddd;
}
.list .abb_detail .line {
display: flex;
padding: 20rpx 0;
color: #363636;
font-size: 24rpx;
background: radial-gradient(circle at 50% 100%, transparent 10px, #fff 0) no-repeat;
filter: drop-shadow(6px 6px 6px rgba(154, 154, 154, 0.2));
}
.list .abb_detail .line .left {
width: 50%;
margin-left: 60rpx;
}
.list .abb_detail .line .right {
width: 50%;
margin-right: 20rpx;
display: flex;
justify-content: flex-end;
align-items: center;
}
.list .show_detail {
width: 690rpx;
background: #e6e6e6;
opacity: 0.59;
margin: 0 30rpx;
padding-bottom: 20rpx;
}
.list .show_detail .item {
width: 650rpx;
background: #fff;
display: flex;
font-size: 28rpx;
}
.list .show_detail .item .vitr {
display: flex;
align-items: center;
height: min-content;
width: 33%;
justify-content: flex-end;
}
.list .show_detail .item .vitr .month {
font-weight: bold;
color: #181818;
}
.list .show_detail .item .vitr .dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background: #e7e7e7;
margin: 0 20rpx;
}
.list .show_detail .item .info {
position: relative;
}
.list .show_detail .item .info .line {
position: absolute;
height: 75rpx;
border: 1rpx dashed #dddddd;
left: -31rpx;
bottom: 13rpx;
}
.list .show_detail .item .info .city {
font-weight: bold;
}
.list .show_detail .item .info .time {
font-size: 24rpx;
margin: 10rpx 0;
}
.list .show_detail .item .info .area {
font-size: 24rpx;
margin-bottom: 10rpx;
}
.more {
color: #7b7b7b;
text-align: center;
margin: 70rpx 0 40rpx 0;
}
</style>

662
src/pages/user/order_detail/order_detail.vue
Unescape View File

@ -0,0 +1,662 @@
<template>
<view>
<view class="_container" :style="order_info.order_status !== 2 && order_info.order_status !== 1 ? 'padding-top:20rpx;' : ''">
<view v-if="order_info.order_status == 2" class="pay_status">
<view class="warn">
<view class="text1">待支付</view>
<view class="text2">若超时未支付，订单将自动取消</view>
</view>
<view class="cut_down">剩余 {{ countDownNum }}</view>
</view>
<view class="_succ" v-else-if="order_info.order_status == 1">
<view class="text1">支付成功！</view>
<view class="text2">请注意节目开始时间，提前进场。</view>
</view>
<view class="play_info">
<view class="_top">
<image class="img" :src="order_info.order_pic" />
<view class="info">
<view class="title">{{ show_info.show_name }}</view>
<view>
<view class="line">{{ show_info.show_date }}</view>
<view class="line">{{ show_info.city_name }}｜{{ show_info.theater_name }}</view>
</view>
<view class="line" style="font-weight: normal">
<image src="/static/images/ui/passed.png" />
<text>不支持退票</text>
<block v-if="show_info.is_invoice == 0">
<image src="/static/images/ui/closeRed.png" />
<text>不可开发票</text>
</block>
<block v-else-if="show_info.is_invoice == 1">
<image src="/static/images/ui/passedGreen.png" />
<text>可开发票</text>
</block>
</view>
</view>
</view>
<view class="split-line"></view>
<view class="_bottom">
<view class="_ticket" v-for="(ticket_list, index) in ticket_info" :key="index">
<view class="sit_info">¥{{ ticket_list.price }}*{{ ticket_list.tkt_num }}张</view>
<view style="display: flex; flex-wrap: wrap">
<view class="sit_info1" v-for="(item, index1) in ticket_list.list" :key="index1">{{ item.seat_info }}</view>
</view>
</view>
</view>
</view>
</view>
<!-- 订票人信息 -->
<view class="cellgroup">
<view class="cell" style="border-bottom: 1px dashed #dddddd">
<view class="title">取票手机</view>
<view class="value">{{ order_info.mobile }}</view>
</view>
<view class="cell" style="padding: 20rpx 0 0 0">
<view class="title">观演人</view>
<view class="value">
<view style="padding-bottom: 20rpx" v-for="(item, index) in viewer_info" :key="index">{{ item.name }} {{ item.id_card }}</view>
</view>
</view>
</view>
<!-- 地址信息 -->
<view class="cellgroup">
<view class="cell cell1">
<view class="title" style="width: 70%">
<view class="t">{{ show_info.city_name }}｜{{ show_info.theater_name }}</view>
<view class="b">地址：{{ show_info.traffic_info }}</view>
</view>
<image src="/static/images/ui/location.png" :data-longitude="show_info.longitude" :data-latitude="show_info.latitude" @tap="loc" />
</view>
</view>
<!-- 订单信息 -->
<view class="cellgroup">
<view class="cell" style="padding: 30rpx 0 0 0">
<view class="title">订单信息</view>
<view class="value"></view>
</view>
<view class="cell cell1" style="border-bottom: 1px solid #ebedf0">
<view class="title">支付金额</view>
<view class="value">
¥{{ order_info.order_price }}
<image src="/static/images/ui/arrow_right.png" style="width: 40rpx; height: 40rpx" />
</view>
</view>
<view class="cell cell1" style="border-bottom: 1px solid #ebedf0">
<view class="title">订单号</view>
<view class="value">{{ order_info.order_no }}</view>
</view>
<view class="cell cell1" style="margin-bottom: 10rpx">
<view class="title">下单时间</view>
<view class="value">{{ order_info.create_time }}</view>
</view>
</view>
<view style="height: 500rpx; width: 100%"></view>
<!-- 底栏 -->
<view class="bottom_selector" v-if="order_info.order_status == 2">
<view class="_sel">
<button class="_cancel" @tap="cancel">取消订单</button>
<button class="_confirm" @tap="pay">订单无误，立即支付</button>
</view>
</view>
<view class="bottom_selector" v-else-if="order_info.order_status == 1 || order_info.order_status == 6 || order_info.order_status == 12">
<view class="statement_inf">
<view class="shaky">换票券码：{{ order_info.electronic_code }}（凭此码在取票机兑换票据）</view>
</view>
<view class="_b">
<button @tap="show=true" class="selector_dsn">查看电子票码</button>
</view>
</view>
<!-- 底部弹出层 -->
<u-popup :round="10" :show="show" @close="show=false">
<view v-for="(item, index) in a" :key="index" class="popup_dsn">
<view v-if="index == a_id" class="sit_info1">
<view class="code_preview">
<image src="/static/images/ui/arrow_left.png" style="width: 40px; height: 40px" :data-a_id="index" @tap="sub" />
<image :src="item.qr_code" style="width: 128px; height: 128px" />
<image src="/static/images/ui/arrow_right.png" style="width: 40px; height: 40px" :data-a_id="index" @tap="plus" />
</view>
<view>{{ item.seat_info }}</view>
<view>{{ item.price }}元</view>
<view>识别码：{{ item.ticket_code }}</view>
<button @tap="show=false" class="selector_dsn" style="margin: 40rpx auto">知道了</button>
</view>
</view>
</u-popup>
</view>
</template>
<script>
// pages/order_detail/order_detail.js
import { http ,orderNoPay} from '../../../utils/util';
export default {
data() {
return {
// checked: false,
show: false,
a_id: 0,
order_no: '',
clone_type: '',
order_info: {
order_status: 0,
order_pic: '',
mobile: '',
order_no: '',
create_time: '',
electronic_code: ''
},
show_info: {
show_name: '',
show_date: '',
city_name: '',
theater_name: '',
is_invoice: 0,
traffic_info: '',
longitude: '',
latitude: ''
},
ticket_info: '',
viewer_info: '',
a: '',
countDownNum: '',
timer: '',
ticket_list: {
price: '',
tkt_num: '',
list: []
}
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let order_no = options.order_no;
let _type = options._type;
this.setData({
order_no,
clone_type: _type
});
if (order_no && _type) {
http('/api/v1/order-detail', 'get', {
order_no,
type: _type
}).then((res) => {
this.countDown(res.order_info.timeout);
this.setData({
order_info: res.order_info,
show_info: res.show_info,
ticket_info: res.ticket_info,
viewer_info: res.viewer_info
});
let arr = res.ticket_info;
let a = [];
for (let x in arr) {
for (let i in arr[x].list) {
arr[x].list[i].price = arr[x].price;
a.push(arr[x].list[i]);
}
}
this.setData({
a
});
});
} else {
uni.showToast({
title: '未正常传入订单号',
icon: 'fail',
duration: 2000
});
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
sub(e) {
let a_id = e.currentTarget.dataset.a_id;
console.log(a_id);
if (a_id == 0) {
a_id = this.a.length - 1;
} else {
a_id = a_id - 1;
}
this.setData({
a_id
});
},
plus(e) {
let a_id = e.currentTarget.dataset.a_id;
console.log(a_id);
if (a_id == this.a.length - 1) {
a_id = 0;
} else {
a_id = a_id + 1;
}
this.setData({
a_id
});
},
/* check(event) {
this.setData({
checked: event.detail,
});
},
agreement() {
this.setData({
show1: true
})
}, */
loc(e) {
if (e.currentTarget.dataset.longitude && e.currentTarget.dataset.latitude) {
uni.openLocation({
latitude: e.currentTarget.dataset.latitude,
longitude: e.currentTarget.dataset.longitude,
name: this.show_info.theater_name,
address: this.show_info.traffic_info
});
} else {
uni.showToast({
title: '地址信息错误',
icon: 'fail',
duration: 2000
});
}
},
cancel(e) {
let that = this;
uni.showModal({
content: '是否取消订单',
success(res) {
if (res.confirm) {
http('/api/v1/order-cancel', 'post', {
order_no: that.order_no
}).then((res) => {
uni.showToast({
title: '取消订单成功！',
duration: 2000
});
if(getCurrentPages().length === 1){
uni.reLaunch({
url: '/pages/user/my_order/my_order'
})
return
}
uni.$emit('initData');
uni.navigateBack();
});
}
}
});
},
pay() {
orderNoPay(this.order_no)
},
//定时器
countDown: function (timeout) {
let that = this;
let countDownNum = timeout; //获取倒计时初始值
let formatTime = that.getFormat(countDownNum);
let countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;
that.setData({
countDownNum: countDown
}); //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
that.setData({
timer: setInterval(function () {
//这里把setInterval赋值给变量名为timer的变量
//每隔一秒countDownNum就减一，实现同步
countDownNum--;
let formatTime = that.getFormat(countDownNum);
let countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`; //然后把countDownNum存进data，好让用户知道时间在倒计着
that.setData({
countDownNum: countDown
}); //在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
if (countDownNum == 0) {
//这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
//因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
clearInterval(that.timer);
typeNum = 1;
cardOption.answers = 0;
cardOption.success = false;
cardOption.answer = '';
that.save(cardOption); //关闭定时器之后，可作其他处理codes go here
}
}, 1000)
});
},
/**
* 格式化时间
*/
getFormat: function (ss) {
let mm = 0;
let hh = 0;
if (ss > 60) {
mm = parseInt(ss / 60);
ss = parseInt(ss % 60);
if (mm > 60) {
hh = parseInt(mm / 60);
mm = parseInt(mm % 60);
}
}
if (ss > 9) {
ss = ss;
} else {
ss = `0${ss}`;
}
if (mm > 9) {
mm = mm;
} else {
mm = `0${mm}`;
}
if (hh > 9) {
hh = hh;
} else {
hh = `0${hh}`;
}
return {
ss,
mm,
hh
};
}
},
watch: {
_type: {
handler: function (newVal, oldVal) {
this.clone_type = newVal;
},
immediate: true
}
}
};
</script>
<style>
@import '/utils/shaky.css';
._container {
background-color: #ff446b;
padding: 0 30rpx 20rpx 30rpx;
}
/* 顶部支付提示区域 */
.pay_status {
background-color: #ff446b;
display: flex;
padding: 20rpx 10rpx;
}
.pay_status .warn {
color: #ffffff;
line-height: 48rpx;
}
.pay_status .cut_down {
margin: 0 10rpx 0 auto;
display: flex;
align-items: center;
color: #ffffff;
font-size: 28rpx;
}
._succ {
text-align: center;
padding: 20rpx;
color: #fff;
line-height: 24px;
}
.text1 {
font-size: 36rpx;
font-weight: bold;
}
.text2 {
font-size: 24rpx;
}
.play_info {
background-color: #ffffff;
border-radius: 20rpx;
}
._top {
display: flex;
padding: 20rpx;
}
._top .img {
background: #d8d8d8;
border-radius: 16rpx;
width: 168rpx;
height: 252rpx;
}
._top .info {
padding-left: 20rpx;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
._top .info .title {
font-size: 32rpx;
font-weight: bold;
line-height: 48rpx;
}
._top .info .line {
font-size: 24rpx;
line-height: 48rpx;
display: flex;
align-items: center;
}
._top .info .line image {
width: 28rpx;
height: 28rpx;
}
._top .info .line text {
margin: 0 20rpx 0 10rpx;
}
._bottom {
padding: 20rpx 30rpx;
}
._bottom ._ticket {
font-size: 28rpx;
margin-bottom: 20rpx;
}
._bottom ._ticket .sit_info {
font-weight: bold;
}
._bottom ._ticket .sit_info1 {
font-size: 24rpx;
color: #7b7b7b;
width: 33%;
}
.split-line {
position: relative;
flex: 0 0 0;
border-top: 2rpx dashed #eee;
}
.split-line:before,
.split-line:after {
content: '';
position: absolute;
width: 16rpx;
height: 32rpx;
background: #ff446b;
top: -18rpx;
z-index: 1;
}
.split-line:before {
border-radius: 0 32rpx 32rpx 0;
left: 0;
}
.split-line::after {
border-radius: 32rpx 0 0 32rpx;
right: 0;
}
.cellgroup {
background: #fff;
margin-bottom: 20rpx;
}
.cell {
display: flex;
margin: 0 30px;
padding: 10px 0;
color: #181818;
}
.cell .title {
font-size: 14px;
font-weight: bold;
width: 30%;
}
.cell .value {
font-size: 12px;
display: flex;
align-items: center;
}
.cell1 {
justify-content: space-between;
align-items: center;
}
.cell .title .t {
}
.cell .title .b {
font-size: 12px;
color: #7b7b7b;
}
.cell image {
width: 60rpx;
height: 60rpx;
}
.bottom_selector {
position: fixed;
bottom: 0;
width: 100%;
}
.statement_inf {
font-size: 24rpx;
color: #ff446b;
height: 80rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff0f5;
}
._b {
background: #fff;
padding: 30rpx 0;
}
.selector_dsn {
width: 400rpx;
margin:auto;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #ffffff;
font-size: 28rpx;
}
.popup_dsn {
text-align: center;
}
.code_preview {
display: flex;
justify-content: space-around;
align-items: center;
width: 60%;
margin: 40rpx auto;
}
._sel {
width: 100%;
background-color: #ffffff;
padding: 30rpx 0;
display: flex;
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2);
/* #ifdef MP-ALIPAY */
justify-content: space-between;
/* #endif */
}
._cancel {
color: #acacac;
font-size: 28rpx;
border-radius: 44rpx;
background: #ffffff;
border: 2rpx solid #acacac;
width: 27%;
margin-left: 4%;
/* #ifdef MP-ALIPAY */
height: 90rpx;
line-height: 90rpx;
/* #endif */
}
._confirm {
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
font-size: 28rpx;
width: 54%;
color: #ffffff;
margin-right: 4%;
/* #ifdef MP-ALIPAY */
height: 90rpx;
line-height: 90rpx;
/* #endif */
}
</style>

449
src/pages/user/user_index/user.vue
View File

File diff suppressed because one or more lines are too long

429
src/pages/user/viewer_list/viewer_list.vue
Unescape View File

@ -0,0 +1,429 @@
<template>
<view>
<view v-if="!situationAdd">
<view v-if="viewer_list.length == 0" class="no_content">
<image class="img" src="/static/images/ui/none.png" />
<view class="warn">您目前还没有添加任何观演人</view>
</view>
<block v-else>
<view class="_container" v-if="0 !== viewer_list.length" v-for="(item, index) in viewer_list"
:key="index">
<view class="_left">
<view class="_l">姓名</view>
<view>身份证</view>
</view>
<view class="_middle">
<view class="_l">{{ item.name }}</view>
<view>{{ item.id_card }}</view>
</view>
<image class="_right" src="/static/images/ui/delete.png" :data-viewer_id="item.viewer_id"
@tap="_delete" />
</view>
</block>
</view>
<view class="input_area" v-else-if="situationAdd">
<view class="input" style="margin-bottom: 20rpx">
<view class="label">姓名</view>
<input :value="name" type="text" placeholder="请输入观演人姓名" @input="handleInput1" />
</view>
<view class="input">
<view class="label">身份证</view>
<input :value="id_card" type="number" placeholder="请输入观演人身份证" @input="handleInput2" />
</view>
</view>
<button class="_button" v-if="!situationAdd" @tap="swith">添加观演人</button>
<button class="_button" v-else-if="situationAdd" @tap="save">保存观演人</button>
</view>
</template>
<script>
// pages/user/identity_list/identity_list.js
import {
http,
login_check
} from '../../../utils/util';
export default {
data() {
return {
situationAdd: false,
name: null,
id_card: null,
name_waring_text: null,
id_waring_text: null,
navBack: 0,
viewer_list: {
length: 0
}
};
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
uni.$on('initData',() => {
this.onLoadClone3389(options);
})
this.onLoadClone3389(options);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {},
methods: {
/**
* 生命周期函数--监听页面加载
*/
onLoadClone3389: function(options) {
/* 跳转来自下单页面 */
if (options.situationAdd == 1) {
this.setData({
situationAdd: true,
navBack: 1
});
} else {
if (login_check(1)) {
http('/api/v1/viewer-list', 'get').then((res) => {
this.setData({
viewer_list: res.viewer_list
});
});
}
}
},
swith() {
this.setData({
situationAdd: !this.situationAdd
});
},
_delete(e) {
var that = this;
uni.showModal({
content: '是否删除这条信息',
success(res) {
if (res.confirm) {
http('/api/v1/delete-viewer', 'post', {
viewer_id: e.currentTarget.dataset.viewer_id
}).then((res) => {
uni.showToast({
title: '删除成功！',
icon: 'none',
duration: 2000,
success(res) {
that.onLoadClone3389({
situationAdd: 0
}, {});
}
});
});
}
}
});
},
handleInput1(event) {
this.setData({
name: event.detail.value
});
},
handleInput2(event) {
const value = event.detail.value;
this.setData({
id_card: value
});
},
save() {
var that = this;
let name = this.name;
let id_card = this.id_card;
if (name && id_card) {
Promise.all([this.check_name(name), this.check_id_code(id_card)]).then((res) => {
let allow_name = res[0].allow_name;
let name_waring_text = res[0].name_waring_text;
let allow_id = res[1].allow_id;
let id_waring_text = res[1].id_waring_text;
if (allow_name && allow_id) {
http('/api/v1/add-viewer', 'post', {
name,
id_card
}).then((res1) => {
uni.showToast({
title: '添加成功！',
icon: 'none',
duration: 2000,
success(res) {
if (that.navBack == 1) {
uni.navigateBack();
var pages = getCurrentPages(); //获取页面栈
if (pages.length > 1) {
//上一个页面实例对象
var prePage = pages[pages.length -2]
// #ifdef MP-BAIDU
prePage.data.more_viewer_info = res1.viewer_info
// #endif
prePage.onLoad({
tid: prePage.data.tid
});
}
} else {
that.onLoadClone3389({
situationAdd: 0
}, {});
that.setData({
situationAdd: !that.situationAdd,
name: null,
id_card: null
});
}
}
});
});
} else {
if (name_waring_text != null) {
uni.showToast({
title: name_waring_text,
icon: 'none',
duration: 500
});
return;
}
if (id_waring_text != null) {
uni.showToast({
title: id_waring_text,
icon: 'none',
duration: 500
});
return;
}
}
this.setData({
name_waring_text,
id_waring_text
});
});
} else {
uni.showToast({
title: '请完善信息！',
icon: 'none',
duration: 500
});
}
},
check_name: function(name) {
return new Promise((resolve, reject) => {
var ts = this;
var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,6}$/;
if (name.match(reg)) {
resolve({
allow_name: true,
name_waring_text: null
});
} else {
resolve({
allow_name: false,
name_waring_text: '请填写真实姓名'
});
}
});
},
check_id_code: function(code) {
return new Promise((resolve, reject) => {
var ts = this; //身份证号合法性验证
//支持15位和18位身份证号
//支持地址编码、出生日期、校验位验证
var city = {
11: '北京',
12: '天津',
13: '河北',
14: '山西',
15: '内蒙古',
21: '辽宁',
22: '吉林',
23: '黑龙江 ',
31: '上海',
32: '江苏',
33: '浙江',
34: '安徽',
35: '福建',
36: '江西',
37: '山东',
41: '河南',
42: '湖北 ',
43: '湖南',
44: '广东',
45: '广西',
46: '海南',
50: '重庆',
51: '四川',
52: '贵州',
53: '云南',
54: '西藏 ',
61: '陕西',
62: '甘肃',
63: '青海',
64: '宁夏',
65: '新疆',
71: '台湾',
81: '香港',
82: '澳门',
91: '国外 '
};
var tip = '';
var pass = true;
var reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
if (!code || !code.match(reg)) {
tip = '身份证号格式错误';
pass = false;
} else {
if (!city[code.substr(0, 2)]) {
tip = '地址编码错误';
pass = false;
} else {
//18位身份证需要验证最后一位校验位
if (code.length == 18) {
code = code.split(''); //∑(ai×Wi)(mod 11)
//加权因子
var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]; //校验位
var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
var sum = 0;
var ai = 0;
var wi = 0;
for (var i = 0; i < 17; i++) {
ai = code[i];
wi = factor[i];
sum += ai * wi;
}
var last = parity[sum % 11];
if (parity[sum % 11] != code[17]) {
tip = '校验位错误';
pass = false;
}
}
}
}
if (pass) {
resolve({
allow_id: true,
id_waring_text: null
});
}
if (!pass) {
resolve({
allow_id: false,
id_waring_text: tip
});
}
});
}
},
};
</script>
<style>
._container {
margin: 20rpx 30rpx;
padding: 40rpx;
background-color: #fff;
display: flex;
align-items: center;
flex-direction: row;
font-size: 28rpx;
}
._l {
margin-bottom: 30rpx;
}
._left {
width: 20%;
}
._middle {
flex: 1;
}
._container ._right {
width: 32rpx;
height: 32rpx;
}
.input_area {
background-color: #fff;
margin: 20rpx 30rpx;
padding: 40rpx;
font-size: 28rpx;
}
.input_area .input {
display: flex;
align-items: center;
width: 100%;
}
.input_area .input .label {
width: 140rpx;
}
._button {
position: fixed;
bottom: 100rpx;
width: 312rpx;
background: linear-gradient(90deg, #ff4284 0%, #ff1d42 100%);
border-radius: 44rpx;
color: #fff;
font-size: 28rpx;
left: 50%;
transform: translate(-50%, 0);
}
</style>

35
src/polyfill/README.md
Unescape View File

@ -0,0 +1,35 @@
# 关于polyfill目录
用于抹平各平台差异化，使小程序转换uniapp项目后，能尽可能的少报错，尽可能的先运行起来。
## 文件结构
### base64Binary.js
用于 base64ToArrayBuffer, arrayBufferToBase64 两个函数的polyfill，因为这两函数仅app与微信小程序支持，特意制作此polyfill。
主要用于polyfill.js文件。
### mixins.js
有两个用途：
一是在使用富文本时，可以将后台传入的富文本字符串里面的转义符转换为普通字符，与mp-html插件配合使用。
二是this.setData()函数的polyfill，使转换后的uniapp项目，可以直接使用setData函数。
### polyfill.js
此文件，对大量api进行判断，如果在当前平台，不支持此函数，将会创建一个空函数，并输出一条提示，提示开发者，这个api需针对性的进行兼容处理。
如果不处理的话，会直接进行报错，并影响流程的运行，对转换者的心理有一定的影响。
因此制作此polyfill，让项目能先运行起来~
## 注意
如果觉得这些文件不需要想删除它，请一定要先阅读关于每个文件的说明，明白它的作用，再进行删除，以免项目运行报错，感谢合作~
如有不明白的地方，请联系作者(375890534@qq.com)或qq群(780359397、361784059、603659851)进行交流~
zhangdaren 2021-07-21

95
src/polyfill/base64Binary.js
Unescape View File

@ -0,0 +1,95 @@
/*
* @Author: zhang peng
* @Date: 2021-08-03 10:57:51
* @LastEditTime: 2021-08-16 17:25:43
* @LastEditors: zhang peng
* @Description:
* @FilePath: \miniprogram-to-uniapp2\src\project\template\polyfill\base64Binary.js
*
* 借鉴自：https://github.com/dankogai/js-base64/blob/main/base64.js
* 因uniapp没有window，也无法使用Buffer，因此直接使用polyfill
*
*/
const b64ch = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
const b64chs = [...b64ch]
const b64re = /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/
const b64tab = ((a) => {
let tab = {}
a.forEach((c, i) => tab[c] = i)
return tab
})(b64chs)
const _fromCC = String.fromCharCode.bind(String)
/**
* polyfill version of `btoa`
*/
const btoaPolyfill = (bin) => {
// console.log('polyfilled');
let u32, c0, c1, c2, asc = ''
const pad = bin.length % 3
for (let i = 0;i < bin.length;) {
if ((c0 = bin.charCodeAt(i++)) > 255 ||
(c1 = bin.charCodeAt(i++)) > 255 ||
(c2 = bin.charCodeAt(i++)) > 255)
throw new TypeError('invalid character found')
u32 = (c0 << 16) | (c1 << 8) | c2
asc += b64chs[u32 >> 18 & 63]
+ b64chs[u32 >> 12 & 63]
+ b64chs[u32 >> 6 & 63]
+ b64chs[u32 & 63]
}
return pad ? asc.slice(0, pad - 3) + "===".substring(pad) : asc
}
/**
* polyfill version of `atob`
*/
const atobPolyfill = (asc) => {
// console.log('polyfilled');
asc = asc.replace(/\s+/g, '')
if (!b64re.test(asc))
throw new TypeError('malformed base64.')
asc += '=='.slice(2 - (asc.length & 3))
let u24, bin = '', r1, r2
for (let i = 0;i < asc.length;) {
u24 = b64tab[asc.charAt(i++)] << 18
| b64tab[asc.charAt(i++)] << 12
| (r1 = b64tab[asc.charAt(i++)]) << 6
| (r2 = b64tab[asc.charAt(i++)])
bin += r1 === 64 ? _fromCC(u24 >> 16 & 255)
: r2 === 64 ? _fromCC(u24 >> 16 & 255, u24 >> 8 & 255)
: _fromCC(u24 >> 16 & 255, u24 >> 8 & 255, u24 & 255)
}
return bin
}
/**
* base64转ArrayBuffer
*/
function base64ToArrayBuffer (base64) {
const binaryStr = atobPolyfill(base64)
const byteLength = binaryStr.length
const bytes = new Uint8Array(byteLength)
for (let i = 0;i < byteLength;i++) {
bytes[i] = binary.charCodeAt(i)
}
return bytes.buffer
}
/**
* ArrayBuffer转base64
*/
function arrayBufferToBase64 (buffer) {
let binaryStr = ""
const bytes = new Uint8Array(buffer)
var len = bytes.byteLength
for (let i = 0;i < len;i++) {
binaryStr += String.fromCharCode(bytes[i])
}
return btoaPolyfill(binaryStr)
}
module.exports = {
base64ToArrayBuffer,
arrayBufferToBase64,
}

145
src/polyfill/mixins.js
Unescape View File

@ -0,0 +1,145 @@
/*
* @Author: zhang peng
* @Date: 2021-08-03 10:57:51
* @LastEditTime: 2021-10-15 20:27:53
* @LastEditors: zhang peng
* @Description:
* @FilePath: \miniprogram-to-uniapp2\src\project\template\polyfill\mixins.js
*
* 如果你想删除本文件，请先确认它使用的范围，感谢合作~
* 如有疑问，请直接联系: 375890534@qq.com
*/
export default {
methods: {
/**
* 转义符换成普通字符
* @param {*} str
* @returns
*/
escape2Html (str) {
if (!str) return str
var arrEntities = {
'lt': '<',
'gt': '>',
'nbsp': ' ',
'amp': '&',
'quot': '"'
}
return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
return arrEntities[t]
})
},
/**
* 普通字符转换成转义符
* @param {*} sHtml
* @returns
*/
html2Escape (sHtml) {
if (!sHtml) return sHtml
return sHtml.replace(/[<>&"]/g, function (c) {
return {
'<': '&lt;',
'>': '&gt;',
'&': '&amp;',
'"': '&quot;'
}[c]
})
},
/**
* setData polyfill 勿删!!!
* 用于转换后的uniapp的项目能直接使用this.setData()函数
* @param {*} obj
* @param {*} callback
*/
setData: function (obj, callback) {
let that = this
const handleData = (tepData, tepKey, afterKey) => {
var tepData2 = tepData
tepKey = tepKey.split('.')
tepKey.forEach(item => {
if (tepData[item] === null || tepData[item] === undefined) {
let reg = /^[0-9]+$/
tepData[item] = reg.test(afterKey) ? [] : {}
tepData2 = tepData[item]
} else {
tepData2 = tepData[item]
}
})
return tepData2
}
const isFn = function (value) {
return typeof value == 'function' || false
}
Object.keys(obj).forEach(function (key) {
let val = obj[key]
key = key.replace(/\]/g, '').replace(/\[/g, '.')
let front, after
let index_after = key.lastIndexOf('.')
if (index_after != -1) {
after = key.slice(index_after + 1)
front = handleData(that, key.slice(0, index_after), after)
} else {
after = key
front = that
}
if (front.$data && front.$data[after] === undefined) {
Object.defineProperty(front, after, {
get () {
return front.$data[after]
},
set (newValue) {
front.$data[after] = newValue
that.hasOwnProperty("$forceUpdate") && that.$forceUpdate()
},
enumerable: true,
configurable: true
})
front[after] = val
} else {
that.$set(front, after, val)
}
})
// this.$forceUpdate();
isFn(callback) && this.$nextTick(callback)
},
/**
* 解析事件里的动态函数名，这种没有()的函数名，在uniapp不被执行
* 比如：<view bindtap="{{openId==undefined?'denglu':'hy_to'}}">立即</view>
* @param {*} exp
*/
parseEventDynamicCode (exp) {
if (typeof (eval("this." + exp)) === 'function') {
eval("this." + exp + '()')
}
},
/**
* 用于处理对props进行赋值的情况
* //简单处理一下就行了
*
* @param {*} target
* @returns
*/
deepClone (target) {
//判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
// const toString = Object.prototype.toString
// toString.call(obj) === '[object Array]' ? clone = clone || [] : clone = clone || {}
// for (const i in obj) {
// if (typeof obj[i] === 'object' && obj[i]!==null) {
// // 要考虑深复制问题了
// if (Array.isArray(obj[i])) {
// // 这是数组
// clone[i] = []
// } else {
// // 这是对象
// clone[i] = {}
// }
// deepClone(obj[i], clone[i])
// } else {
// clone[i] = obj[i]
// }
// }
// return clone
return JSON.parse(JSON.stringify(obj))
}
}
}

1073
src/polyfill/polyfill.js
View File

File diff suppressed because it is too large Load Diff

BIN
src/static/images/seats/0.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
src/static/images/seats/00.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/static/images/seats/01.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
src/static/images/seats/A.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/static/images/seats/B.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/C.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/D.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/E.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/F.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/G.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
src/static/images/seats/H.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
src/static/images/seats/I.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/J.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/static/images/seats/K.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/static/images/seats/L.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/static/images/seats/M.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/static/images/seats/N.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/O.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/P.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/Q.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/R.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 KiB

BIN
src/static/images/seats/S.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/static/images/seats/T.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
src/static/images/seats/U.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

Some files were not shown because too many files have changed in this diff Show More

Write Preview
Loading…
Cancel
Save