框架搭建
This commit is contained in:
commit
f1f7fa2673
|
|
@ -0,0 +1,31 @@
|
|||
/*
|
||||
* Eslint config file
|
||||
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||
* Install the Eslint extension before using this feature.
|
||||
*/
|
||||
module.exports = {
|
||||
env: {
|
||||
es6: true,
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
ecmaFeatures: {
|
||||
modules: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018,
|
||||
sourceType: 'module',
|
||||
},
|
||||
globals: {
|
||||
wx: true,
|
||||
App: true,
|
||||
Page: true,
|
||||
getCurrentPages: true,
|
||||
getApp: true,
|
||||
Component: true,
|
||||
requirePlugin: true,
|
||||
requireMiniProgram: true,
|
||||
},
|
||||
// extends: 'eslint:recommended',
|
||||
rules: {},
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
# Windows
|
||||
[Dd]esktop.ini
|
||||
Thumbs.db
|
||||
$RECYCLE.BIN/
|
||||
node_modules/
|
||||
miniprogram_npm/
|
||||
|
||||
# macOS
|
||||
.DS_Store
|
||||
.fseventsd
|
||||
.Spotlight-V100
|
||||
.TemporaryItems
|
||||
.Trashes
|
||||
|
||||
# Node.js
|
||||
node_modules/
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// app.js
|
||||
App({
|
||||
onLaunch() {
|
||||
// 展示本地存储能力
|
||||
const logs = wx.getStorageSync('logs') || []
|
||||
logs.unshift(Date.now())
|
||||
wx.setStorageSync('logs', logs)
|
||||
|
||||
// 登录
|
||||
wx.login({
|
||||
success: res => {
|
||||
console.log(res);
|
||||
wx.request({
|
||||
url: 'https://www.umayle.com/weixin_api/API/Wx/User/GetUserInfo.ashx?appName=Inland&code='+res.code,
|
||||
method: 'POST',
|
||||
success:(_res)=>{
|
||||
console.log(_res);
|
||||
let openId = _res.data.openid;
|
||||
this.globalData.openId = openId
|
||||
console.log('openid',openId);
|
||||
wx.request({
|
||||
url: 'https://www.umayle.com/inland/Api/GetUserInfo.ashx?openId='+openId,
|
||||
method: 'POST',
|
||||
success:(_res_)=>{
|
||||
console.log(_res_,',,,res');
|
||||
this.globalData.userInfo = _res_.data.data
|
||||
if(_res_.data.code == 0 && _res_.data.message == '获取成功'){
|
||||
//跳转到列表页面
|
||||
setTimeout(() => {
|
||||
wx.redirectTo({
|
||||
url:'/pages/list/list'
|
||||
// url:'/pages/register/register'
|
||||
})
|
||||
}, 2000);
|
||||
|
||||
}else{
|
||||
//跳转到注册页面
|
||||
setTimeout(() => {
|
||||
wx.redirectTo({
|
||||
url:'/pages/register/register'
|
||||
// url:'/pages/list/list'
|
||||
})
|
||||
}, 2000);
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// 发送 res.code 到后台换取 openId, sessionKey, unionId
|
||||
}
|
||||
})
|
||||
},
|
||||
globalData: {
|
||||
userInfo: null,
|
||||
openId:null
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"pages": [
|
||||
"pages/start/start",
|
||||
"pages/index/index",
|
||||
"pages/list/list"
|
||||
],
|
||||
"window": {
|
||||
"backgroundTextStyle": "light",
|
||||
"navigationBarBackgroundColor": "#3669f8",
|
||||
"navigationBarTitleText": "桥梁空间智慧监管试点平台",
|
||||
"navigationBarTextStyle": "white"
|
||||
},
|
||||
"sitemapLocation": "sitemap.json",
|
||||
"lazyCodeLoading": "requiredComponents"
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/**app.wxss**/
|
||||
page{
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
Component({
|
||||
properties: {
|
||||
options: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
defaultOption: {
|
||||
type: Object,
|
||||
value: {
|
||||
id: '000',
|
||||
name: '全部城市'
|
||||
}
|
||||
},
|
||||
key: {
|
||||
type: String,
|
||||
value: 'id'
|
||||
},
|
||||
text: {
|
||||
type: String,
|
||||
value: 'name'
|
||||
}
|
||||
},
|
||||
data: {
|
||||
result: [],
|
||||
isShow: false,
|
||||
current: {}
|
||||
},
|
||||
methods: {
|
||||
optionTap(e) {
|
||||
let dataset = e.target.dataset
|
||||
this.setData({
|
||||
current: dataset,
|
||||
isShow: false
|
||||
});
|
||||
|
||||
// 调用父组件方法，并传参
|
||||
this.triggerEvent("change", { ...dataset })
|
||||
},
|
||||
openClose() {
|
||||
this.setData({
|
||||
isShow: !this.data.isShow
|
||||
})
|
||||
},
|
||||
|
||||
// 此方法供父组件调用
|
||||
close() {
|
||||
this.setData({
|
||||
isShow: false
|
||||
})
|
||||
}
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
// 属性名称转换, 如果不是 { id: '', name:'' } 格式，则转为 { id: '', name:'' } 格式
|
||||
let result = []
|
||||
if (this.data.key !== 'id' || this.data.text !== 'name') {
|
||||
for (let item of this.data.options) {
|
||||
let { [this.data.key]: id, [this.data.text]: name } = item
|
||||
result.push({ id, name })
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
current: Object.assign({}, this.data.defaultOption),
|
||||
result: result
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<view class="select-box">
|
||||
<view class="select-current" catchtap="openClose">
|
||||
<text class="current-name">{{current.name}}</text>
|
||||
</view>
|
||||
<view class="option-list" wx:if="{{isShow}}" catchtap="optionTap">
|
||||
<text class="option"
|
||||
data-id="{{defaultOption.id}}"
|
||||
data-name="{{defaultOption.name}}">{{defaultOption.name}}
|
||||
</text>
|
||||
<text class="option"
|
||||
wx:for="{{result}}"
|
||||
wx:key="{{item.id}}"
|
||||
data-id="{{item.id}}"
|
||||
data-name="{{item.name}}">{{item.name}}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
.select-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.select-current {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 0 10rpx;
|
||||
line-height: 70rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
border-radius: 6rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.select-current::after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
right: 16rpx;
|
||||
top: 30rpx;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 10rpx solid transparent;
|
||||
border-top: 10rpx solid #999;
|
||||
}
|
||||
|
||||
.current-name {
|
||||
display: block;
|
||||
width: 85%;
|
||||
height: 100%;
|
||||
word-wrap: normal;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.option-list {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 76rpx;
|
||||
width: 100%;
|
||||
padding: 12rpx 20rpx 10rpx 20rpx;
|
||||
border-radius: 6rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
box-shadow: 0rpx 0rpx 1rpx 1rpx rgba(0, 0, 0, 0.2) inset;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 70rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.option:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "inlandvessel-app",
|
||||
"version": "1.0.0",
|
||||
"main": "app.js",
|
||||
"dependencies": {
|
||||
"chokidar": "^3.5.3",
|
||||
"miniprogram-computed": "^4.4.0",
|
||||
"miniprogram-sm-crypto": "^0.3.10",
|
||||
"node-sass": "^7.0.1",
|
||||
"vant-weapp": "^0.5.29",
|
||||
"weui-miniprogram": "^1.2.3"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "http://git.umayle.com:2022/lgzn/inlandVessel-app.git"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"keywords": [],
|
||||
"description": ""
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
// index.js
|
||||
// 获取应用实例
|
||||
const app = getApp()
|
||||
|
||||
Page({
|
||||
data: {
|
||||
openId:'',
|
||||
page:'',
|
||||
url:'',
|
||||
motto: 'Hello World',
|
||||
userInfo: {},
|
||||
hasUserInfo: false,
|
||||
canIUse: wx.canIUse('button.open-type.getUserInfo'),
|
||||
canIUseGetUserProfile: false,
|
||||
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
|
||||
},
|
||||
// 事件处理函数
|
||||
bindViewTap() {
|
||||
wx.navigateTo({
|
||||
url: '../logs/logs'
|
||||
})
|
||||
},
|
||||
onLoad(options) {
|
||||
if (wx.getUserProfile) {
|
||||
//https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/dist/index.html
|
||||
//let url = 'https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/dist/index.html?openId='+options.openId+'&page='+options.page;
|
||||
let url = 'https://www.umayle.com/inland/dist/index.html?openId='+options.openId+'&page='+options.page;
|
||||
console.log(url);
|
||||
this.setData({
|
||||
openId: options.openId,
|
||||
page: options.page,
|
||||
url: url,
|
||||
canIUseGetUserProfile: true
|
||||
})
|
||||
}
|
||||
},
|
||||
getUserProfile(e) {
|
||||
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
|
||||
wx.getUserProfile({
|
||||
desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
|
||||
success: (res) => {
|
||||
console.log(res)
|
||||
this.setData({
|
||||
userInfo: res.userInfo,
|
||||
hasUserInfo: true
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getUserInfo(e) {
|
||||
// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
|
||||
console.log(e)
|
||||
this.setData({
|
||||
userInfo: e.detail.userInfo,
|
||||
hasUserInfo: true
|
||||
})
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<!--index.wxml-->
|
||||
<view class="container">
|
||||
<web-view src='{{url}}'></web-view>
|
||||
</view>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
/**index.wxss**/
|
||||
.userinfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.userinfo-avatar {
|
||||
overflow: hidden;
|
||||
width: 128rpx;
|
||||
height: 128rpx;
|
||||
margin: 20rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.usermotto {
|
||||
margin-top: 200px;
|
||||
}
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
// pages/list/list.js
|
||||
let app = getApp()
|
||||
// const computedBehavior = require('miniprogram-computed')
|
||||
// behaviors: [computedBehavior],
|
||||
Page({
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
options: [
|
||||
{
|
||||
value: "1",
|
||||
label: "全部",
|
||||
},
|
||||
{
|
||||
value: "油船",
|
||||
label: "油船",
|
||||
},
|
||||
{
|
||||
value: "危化品船",
|
||||
label: "危化品船",
|
||||
},
|
||||
],
|
||||
optionsweight: [
|
||||
{
|
||||
value: "1",
|
||||
label: "全部",
|
||||
},
|
||||
{
|
||||
value: "1000吨以上",
|
||||
label: "1000吨以上",
|
||||
},
|
||||
{
|
||||
value: "1000吨以下",
|
||||
label: "1000吨以下",
|
||||
},
|
||||
],
|
||||
optionsWork: [
|
||||
{
|
||||
value: "1",
|
||||
label: "全部",
|
||||
},
|
||||
{
|
||||
value: "结构认知",
|
||||
label: "结构认知",
|
||||
},
|
||||
{
|
||||
value: "消防演习",
|
||||
label: "消防演习",
|
||||
},
|
||||
{
|
||||
value: "装货作业",
|
||||
label: "装货作业",
|
||||
},
|
||||
{
|
||||
value: "卸货作业",
|
||||
label: "卸货作业",
|
||||
},
|
||||
{
|
||||
value: "溢油演习",
|
||||
label: "溢油演习",
|
||||
},
|
||||
{
|
||||
value: "洗舱作业",
|
||||
label: "洗舱作业",
|
||||
},
|
||||
{
|
||||
value: "密闭空间",
|
||||
label: "密闭空间",
|
||||
},
|
||||
],
|
||||
modelShow: false,
|
||||
video: "1",
|
||||
videoSrc: "",
|
||||
dataList: [],
|
||||
showPicker:true,
|
||||
ship: 0,//默认显示位置
|
||||
weight: 0,//默认显示位置
|
||||
type: 0,//默认显示位置
|
||||
},
|
||||
filterFunc(val, target, filterArr) {
|
||||
// 参数不存在或为空时，就相当于查询全部
|
||||
if (val == undefined || val == '1') {
|
||||
return filterArr;
|
||||
}
|
||||
return filterArr.filter((p) => p[target].indexOf(val) > -1);
|
||||
},
|
||||
bindPickerChange2: function (e) {
|
||||
this.setData({
|
||||
ship: e.detail.value
|
||||
})
|
||||
this.handleList()
|
||||
},
|
||||
bindPickerweight: function (e) {
|
||||
this.setData({
|
||||
weight: e.detail.value
|
||||
})
|
||||
this.handleList()
|
||||
},
|
||||
bindPickerwork: function (e) {
|
||||
this.setData({
|
||||
type: e.detail.value
|
||||
})
|
||||
this.handleList()
|
||||
},
|
||||
handleModel:function(item) {
|
||||
console.log(item);
|
||||
wx.request({
|
||||
url: 'https://www.umayle.com/inland/Api/VideoController.ashx',
|
||||
data:{
|
||||
openId: app.globalData.openId, videoId: item.currentTarget.dataset.id
|
||||
},
|
||||
method: 'get',
|
||||
success:(_res_)=>{
|
||||
if (_res_.data.code == 1) {
|
||||
this.setData({
|
||||
modelShow : true,
|
||||
video : "1"
|
||||
})
|
||||
} else {
|
||||
this.setData({
|
||||
modelShow : true,
|
||||
video : "2",
|
||||
videoSrc :item.currentTarget.dataset.video
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.setData({
|
||||
modelShow : false,
|
||||
})
|
||||
},
|
||||
handleList(){
|
||||
let objVal = {};
|
||||
objVal.ship = this.data.options[this.data.ship].value
|
||||
objVal.weight = this.data.optionsweight[this.data.weight].value
|
||||
objVal.type = this.data.optionsWork[this.data.type].value
|
||||
wx.request({
|
||||
url: 'https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/data.json',
|
||||
method: 'get',
|
||||
success:(_res_)=>{
|
||||
let arr = _res_.data.data;
|
||||
Object.keys(objVal).forEach((e) => {
|
||||
// 调用自己定义好的筛选方法
|
||||
arr = this.filterFunc(objVal[e], e, arr);
|
||||
});
|
||||
this.setData({
|
||||
dataList: arr
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
wx.request({
|
||||
url: 'https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/data.json',
|
||||
method: 'get',
|
||||
success:(_res_)=>{
|
||||
this.setData({
|
||||
dataList:_res_.data.data
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
wx.hideHomeButton();
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"usingComponents": {
|
||||
"van-icon":"../../miniprogram_npm/vant-weapp/icon/index"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
.list{width:100%;height:100%;display:flex;flex-flow:row wrap;justify-content:center;background:url("https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/%E5%9C%A8%E7%BA%BF%E5%AD%A6%E4%B9%A0-%E8%83%8C%E6%99%AF.png") no-repeat;background-size:100% auto}.list .top{width:686rpx;height:100rpx;display:flex;flex-flow:row nowrap;justify-content:space-between;align-items:center}.list .top picker{width:30%}.list .top .search-input{position:relative;width:100%;height:68rpx;-webkit-overflow-scrolling:touch;background:#fff;border-radius:22rpx;font-size:24rpx;color:#1f272a;padding-left:36rpx;box-sizing:border-box}.list .top .search-placeholder{font-size:28rpx}.list .top .phcolor{color:#999;font-size:14px}.list .top .select{width:100%;height:35px;background:#ffffff;border-radius:20px;text-indent:26px}.list .content{width:686rpx;height:calc(100% - 140rpx);margin-top:20rpx;overflow-y:scroll;overflow-x:hidden}.list .content::-webkit-scrollbar{width:0}.list .content>view{width:100%;height:516rpx;background:#ffffff;border-radius:40rpx;margin-bottom:40rpx;overflow:hidden;box-shadow:1px 1px 1px 1px #c6cae9,-1px 0px 1px 1px #c6cae9}.list .content>view .bgpic{width:100%;height:400rpx}.list .content>view .bgpic image{width:100%;height:100%}.list .content>view .bottom{height:116rpx;width:100%;display:flex;flex-flow:row nowrap;justify-content:space-between;padding:0 10rpx;align-items:center;box-sizing:border-box}.list .content>view .bottom .left{width:70%;display:flex;flex-flow:row nowrap;align-items:center}.list .content>view .bottom .left .logo{width:80rpx;height:84rpx;background:url("https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/-e-icon.png") no-repeat;background-size:100% 100%}.list .content>view .bottom .left .title{margin-left:20rpx;width:fit-content;font-size:32rpx}.list .content>view .bottom .right{font-size:32rpx;color:#5187fd}.list .model{width:100%;height:100%;position:fixed;top:0;left:0}.list .model .contents{width:80%;padding:0 20rpx;box-sizing:border-box;height:540rpx;background:#ffffff;border-radius:40rpx;position:absolute;top:calc(50% - 270rpx);left:10%;display:flex;flex-flow:row wrap;justify-content:center;align-items:flex-start}.list .model .contents .title{width:100%;height:30px;text-align:center;font-size:40rpx;margin-top:20rpx}.list .model .contents .text{width:80%;height:80rpx;line-height:40rpx;font-size:32rpx}.list .model .contents .people{width:80%;height:60rpx;display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between}.list .model .contents .people .name{width:35%;display:flex;flex-flow:row nowrap;align-items:center}.list .model .contents .people .name .icon{font-size:32rpx;color:#3669f8;padding-top:10rpx}.list .model .contents .people .name span{font-size:28rpx;margin-left:10rpx}.list .model .contents .people .phone{flex:1;text-align:left;font-size:28rpx;color:#2b61f8}.list .model .contents .handleTrue{width:80%;height:80rpx;text-align:center;line-height:80rpx;font-size:34rpx;letter-spacing:4rpx;color:#ffffff;font-weight:600;background:#3669f8;border-radius:60rpx}.list .model .video{width:90%;height:480rpx;position:absolute;top:calc(50% - 290rpx);left:5%}.list .model .video .top{width:100%;height:40rpx;display:flex;flex-flow:row wrap;justify-content:flex-end;padding-right:10rpx}.list .model .video .top .icon{font-size:36rpx;font-weight:700;color:rgba(255,255,255,0.8)}.list .model .video video{width:100%;height:calc(100% - 40rpx);object-fit:cover}
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
.list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
background: url("https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/%E5%9C%A8%E7%BA%BF%E5%AD%A6%E4%B9%A0-%E8%83%8C%E6%99%AF.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
.top {
|
||||
width: 686rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
picker{
|
||||
width: 30%;
|
||||
}
|
||||
.search-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 68rpx;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: #fff;
|
||||
border-radius: 22rpx;
|
||||
font-size: 24rpx;
|
||||
color: #1f272a;
|
||||
padding-left: 36rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
//自定义样式
|
||||
.search-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.phcolor {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
text-indent: 26px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 686rpx;
|
||||
height: calc(100% - 140rpx);
|
||||
margin-top: 20rpx;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
&::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
& > view {
|
||||
width: 100%;
|
||||
height: 516rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 1px 1px 1px 1px rgb(198, 202, 233),
|
||||
-1px 0px 1px 1px rgb(198, 202, 233);
|
||||
.bgpic {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
height: 116rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 10rpx;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
.left {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 84rpx;
|
||||
background: url("https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/-e-icon.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.title {
|
||||
margin-left: 20rpx;
|
||||
width: fit-content;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
font-size: 32rpx;
|
||||
color: rgb(81, 135, 253);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.model {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.contents {
|
||||
width: 80%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
height: 540rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 40rpx;
|
||||
position: absolute;
|
||||
top: calc(50% - 270rpx);
|
||||
left: 10%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
.text {
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.people {
|
||||
width: 80%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.name {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
.icon {
|
||||
font-size: 32rpx;
|
||||
color: rgb(54, 105, 248);
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
span {
|
||||
font-size: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: rgb(43, 97, 248);
|
||||
}
|
||||
}
|
||||
.handleTrue {
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
font-size: 34rpx;
|
||||
letter-spacing: 4rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
background: rgb(54, 105, 248);
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
}
|
||||
.video {
|
||||
width: 90%;
|
||||
height: 480rpx;
|
||||
position: absolute;
|
||||
top: calc(50% - 290rpx);
|
||||
left: 5%;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end;
|
||||
padding-right: 10rpx;
|
||||
.icon {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
}
|
||||
video {
|
||||
width: 100%;
|
||||
height: calc(100% - 40rpx);
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<view class="container list">
|
||||
<view class="top">
|
||||
<picker bindchange="bindPickerChange2" value="{{ship}}" range="{{options}}" range-key="label">
|
||||
<view class="picker">
|
||||
<input class="search-input" disabled="true" value="{{options[ship].label}}" bindinput="bindKeyInput" placeholder-class="search-placeholder" />
|
||||
</view>
|
||||
</picker>
|
||||
<picker bindchange="bindPickerweight" value="{{weight}}" range="{{optionsweight}}" range-key="label">
|
||||
<view class="picker">
|
||||
<input class="search-input" disabled="true" value="{{optionsweight[weight].label}}" bindinput="bindKeyInput" placeholder-class="search-placeholder" />
|
||||
</view>
|
||||
</picker>
|
||||
<picker bindchange="bindPickerwork" value="{{type}}" range="{{optionsWork}}" range-key="label">
|
||||
<view class="picker">
|
||||
<input class="search-input" disabled="true" value="{{optionsWork[type].label}}" bindinput="bindKeyInput" placeholder-class="search-placeholder" />
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
<view class="content">
|
||||
<view
|
||||
class="datalist"
|
||||
data-id="{{item.id}}"
|
||||
data-video="{{item.video}}"
|
||||
wx:for="{{dataList}}" wx:key="index" bindtap='handleModel'
|
||||
>
|
||||
<view class="bgpic">
|
||||
<image mode="aspectFill" src="{{item.cover}}"></image>
|
||||
</view>
|
||||
<view class="bottom">
|
||||
<view class="left">
|
||||
<view class="logo"></view>
|
||||
<view class="title">{{ index + 1 }}.{{ item.name }}</view>
|
||||
</view>
|
||||
<view class="right" wx:if="{{false}}">已观看45%</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="model"
|
||||
wx:if="{{modelShow}}"
|
||||
style="background:{{ video == '1' ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 1)'}}"
|
||||
>
|
||||
<view class="contents" wx:if="{{video == '1' ? true : false}}">
|
||||
<view class="title">提示</view>
|
||||
<view class="text">
|
||||
您的观看次数以达到限制，如需要解锁更多视频请联系：
|
||||
</view>
|
||||
<view class="people">
|
||||
<view class="name">
|
||||
<van-icon name="phone-o" class="icon" />
|
||||
<span>沈健</span>
|
||||
</view>
|
||||
<text decode="true" class="phone">187 0255 8956</text>
|
||||
</view>
|
||||
<view class="people">
|
||||
<view class="name">
|
||||
<van-icon name="phone-o" class="icon" />
|
||||
<span>钱春和</span>
|
||||
</view>
|
||||
<text class="phone" decode="true">181 0159 8061</text>
|
||||
</view>
|
||||
<view class="handleTrue" bindtap="handleClose">确认</view>
|
||||
</view>
|
||||
<view class="video" wx:else>
|
||||
<view class="top">
|
||||
<van-icon name="close" class="icon" bindtap="handleClose" />
|
||||
</view>
|
||||
<video src="{{videoSrc}}" controls autoplay></video>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
.list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
background: url("https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/%E5%9C%A8%E7%BA%BF%E5%AD%A6%E4%B9%A0-%E8%83%8C%E6%99%AF.png") no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.list .top {
|
||||
width: 686rpx;
|
||||
height: 100rpx;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list .top picker {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.list .top .search-input {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 68rpx;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: #fff;
|
||||
border-radius: 22rpx;
|
||||
font-size: 24rpx;
|
||||
color: #1f272a;
|
||||
padding-left: 36rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list .top .search-placeholder {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.list .top .phcolor {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.list .top .select {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
text-indent: 26px;
|
||||
}
|
||||
|
||||
.list .content {
|
||||
width: 686rpx;
|
||||
height: calc(100% - 140rpx);
|
||||
margin-top: 20rpx;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.list .content::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.list .content > view {
|
||||
width: 100%;
|
||||
height: 516rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 1px 1px 1px 1px #c6cae9, -1px 0px 1px 1px #c6cae9;
|
||||
}
|
||||
|
||||
.list .content > view .bgpic {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
}
|
||||
|
||||
.list .content > view .bgpic image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list .content > view .bottom {
|
||||
height: 116rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-between;
|
||||
padding: 0 10rpx;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.list .content > view .bottom .left {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list .content > view .bottom .left .logo {
|
||||
width: 80rpx;
|
||||
height: 84rpx;
|
||||
background: url("https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/-e-icon.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.list .content > view .bottom .left .title {
|
||||
margin-left: 20rpx;
|
||||
width: fit-content;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.list .content > view .bottom .right {
|
||||
font-size: 32rpx;
|
||||
color: #5187fd;
|
||||
}
|
||||
|
||||
.list .model {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.list .model .contents {
|
||||
width: 80%;
|
||||
padding: 0 20rpx;
|
||||
box-sizing: border-box;
|
||||
height: 540rpx;
|
||||
background: #ffffff;
|
||||
border-radius: 40rpx;
|
||||
position: absolute;
|
||||
top: calc(50% - 270rpx);
|
||||
left: 10%;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.list .model .contents .title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.list .model .contents .text {
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
line-height: 40rpx;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.list .model .contents .people {
|
||||
width: 80%;
|
||||
height: 60rpx;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.list .model .contents .people .name {
|
||||
width: 35%;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list .model .contents .people .name .icon {
|
||||
font-size: 32rpx;
|
||||
color: #3669f8;
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
|
||||
.list .model .contents .people .name span {
|
||||
font-size: 28rpx;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.list .model .contents .people .phone {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
font-size: 28rpx;
|
||||
color: #2b61f8;
|
||||
}
|
||||
|
||||
.list .model .contents .handleTrue {
|
||||
width: 80%;
|
||||
height: 80rpx;
|
||||
text-align: center;
|
||||
line-height: 80rpx;
|
||||
font-size: 34rpx;
|
||||
letter-spacing: 4rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
background: #3669f8;
|
||||
border-radius: 60rpx;
|
||||
}
|
||||
|
||||
.list .model .video {
|
||||
width: 90%;
|
||||
height: 480rpx;
|
||||
position: absolute;
|
||||
top: calc(50% - 290rpx);
|
||||
left: 5%;
|
||||
}
|
||||
|
||||
.list .model .video .top {
|
||||
width: 100%;
|
||||
height: 40rpx;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-end;
|
||||
padding-right: 10rpx;
|
||||
}
|
||||
|
||||
.list .model .video .top .icon {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.list .model .video video {
|
||||
width: 100%;
|
||||
height: calc(100% - 40rpx);
|
||||
object-fit: cover;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
var app = getApp()
|
||||
|
||||
// pages/start.js
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function (options) {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function () {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function () {
|
||||
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"usingComponents": {},
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<view class="container start">
|
||||
<text class="bottomText">技术支持单位：南京智工达信息科技有限公司</text>
|
||||
</view>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
/* pages/start.wxss */
|
||||
.start {
|
||||
background-color: rgb(52, 51, 255);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
/* background-image: url(https://download-1300932214.cos.ap-nanjing.myqcloud.com/inlandVessel/start.jpg); */
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position-x: center;
|
||||
}
|
||||
|
||||
.bottomText{
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-size: small;
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
{
|
||||
"description": "项目配置文件，详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"packOptions": {
|
||||
"ignore": [
|
||||
{
|
||||
"value": ".eslintrc.js",
|
||||
"type": "file"
|
||||
}
|
||||
],
|
||||
"include": []
|
||||
},
|
||||
"setting": {
|
||||
"bundle": false,
|
||||
"userConfirmedBundleSwitch": false,
|
||||
"urlCheck": true,
|
||||
"scopeDataCheck": false,
|
||||
"coverView": true,
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"compileHotReLoad": true,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"minified": true,
|
||||
"autoAudits": false,
|
||||
"newFeature": false,
|
||||
"uglifyFileName": false,
|
||||
"uploadWithSourceMap": true,
|
||||
"useIsolateContext": true,
|
||||
"nodeModules": false,
|
||||
"enhance": true,
|
||||
"useMultiFrameRuntime": true,
|
||||
"useApiHook": true,
|
||||
"useApiHostProcess": true,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"packNpmManually": false,
|
||||
"enableEngineNative": false,
|
||||
"packNpmRelationList": [
|
||||
{
|
||||
"packageJsonPath": "./package.json",
|
||||
"miniprogramNpmDistDir": "./miniprogram/"
|
||||
}
|
||||
],
|
||||
"minifyWXSS": true,
|
||||
"showES6CompileOption": false,
|
||||
"minifyWXML": true,
|
||||
"useStaticServer": true,
|
||||
"checkInvalidKey": true,
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"disableUseStrict": false,
|
||||
"useCompilerPlugins": false
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"libVersion": "2.19.4",
|
||||
"appid": "wxbc46632cc8f89fbb",
|
||||
"projectname": "inlandVessel-app",
|
||||
"condition": {},
|
||||
"editorSetting": {
|
||||
"tabIndent": "insertSpaces",
|
||||
"tabSize": 2
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"projectname": "inlandVessel-app",
|
||||
"setting": {
|
||||
"compileHotReLoad": true
|
||||
},
|
||||
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
|
||||
"libVersion": "2.25.1"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
Loading…
Reference in New Issue