init project
This commit is contained in:
commit
975944b1ae
|
|
@ -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*
|
||||
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
# star-store
|
||||
|
||||
## Project setup
|
||||
```
|
||||
yarn install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
yarn serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
yarn build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
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}`
|
||||
}
|
||||
}
|
||||
])
|
||||
})
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@vue/app',
|
||||
{
|
||||
modules: 'commonjs',
|
||||
useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry'
|
||||
}
|
||||
]
|
||||
],
|
||||
plugins
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,106 @@
|
|||
{
|
||||
"name": "star-store",
|
||||
"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: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: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-plus": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-h5": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-helper-json": "*",
|
||||
"@dcloudio/uni-i18n": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-360": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-alipay": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-baidu": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-jd": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-kuaishou": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-lark": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-qq": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-toutiao": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-vue": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-mp-weixin": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-quickapp-native": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-quickapp-webview": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-stat": "^2.0.1-33920220314002",
|
||||
"@vue/shared": "^3.0.0",
|
||||
"core-js": "^3.6.5",
|
||||
"flyio": "^0.6.2",
|
||||
"regenerator-runtime": "^0.12.1",
|
||||
"uview-ui": "^2.0.29",
|
||||
"vue": "^2.6.11",
|
||||
"vuex": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/runtime": "~7.12.0",
|
||||
"@dcloudio/types": "*",
|
||||
"@dcloudio/uni-automator": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-cli-i18n": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-cli-shared": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-migration": "^2.0.1-33920220314002",
|
||||
"@dcloudio/uni-template-compiler": "^2.0.1-33920220314002",
|
||||
"@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.1-33920220314002",
|
||||
"@dcloudio/vue-cli-plugin-uni": "^2.0.1-33920220314002",
|
||||
"@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.1-33920220314002",
|
||||
"@dcloudio/webpack-uni-mp-loader": "^2.0.1-33920220314002",
|
||||
"@dcloudio/webpack-uni-pages-loader": "^2.0.1-33920220314002",
|
||||
"@vue/cli-plugin-babel": "~4.5.13",
|
||||
"@vue/cli-service": "~4.5.13",
|
||||
"babel-plugin-import": "^1.11.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"jest": "^25.4.0",
|
||||
"mini-types": "*",
|
||||
"miniprogram-api-typings": "*",
|
||||
"node-sass": "^4.14.1",
|
||||
"postcss-comment": "^2.0.0",
|
||||
"sass-loader": "^10.0.1",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"browserslist": [
|
||||
"Android >= 4.4",
|
||||
"ios >= 9"
|
||||
],
|
||||
"uni-app": {
|
||||
"scripts": {}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
const path = require('path')
|
||||
module.exports = {
|
||||
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')
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
|
||||
})
|
||||
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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<script>
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log("App Launch");
|
||||
},
|
||||
onShow: function () {
|
||||
console.log("App Show");
|
||||
},
|
||||
onHide: function () {
|
||||
console.log("App Hide");
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
@import "uview-ui/index.scss";
|
||||
// 公共样式
|
||||
|
||||
page {
|
||||
color: #251b1d;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-size: 14px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.overflowEllipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.status_bar {
|
||||
height: var(--status-bar-height);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.moreEllipsis {
|
||||
letter-spacing: 0;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
/*要显示的行数*/
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<view class="search">
|
||||
<image src="../../static/icon9.png" mode="" class="searchIcon"></image>
|
||||
<input type="text" v-model="value" placeholder="请输入搜索内容" placeholder-class="plClass" class="searchInput" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "search",
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search {
|
||||
height: 36px;
|
||||
background: #F8F8F8;
|
||||
border-radius: 6px 6px 6px 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.searchIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.plClass {
|
||||
color: #AFADB0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<view class="tabbar">
|
||||
<view class="tabbar-item" @click="cliTabbar(1)">
|
||||
<image src="../../static/tabbar/homeSelected.png" v-if="tabbarId=='1'" mode="" class="img"></image>
|
||||
<image src="../../static/tabbar/home.png" mode="" v-else class="img"></image>
|
||||
<text class="label" :class="tabbarId=='1' ? 'selected' : ''">首页</text>
|
||||
</view>
|
||||
<view class="tabbar-item" @click="cliTabbar(2)">
|
||||
<image src="../../static/tabbar/activitySelected.png" v-if="tabbarId=='2'" mode="" class="img"></image>
|
||||
<image src="../../static/tabbar/activity.png" mode="" v-else class="img"></image>
|
||||
<text class="label" :class="tabbarId=='2' ? 'selected' : ''">动态</text>
|
||||
</view>
|
||||
<view class="tabbar-item midButton" @click="cliTabbar(3)">
|
||||
<image src="../../static/tabbar/middle.png" mode="" class="img"></image>
|
||||
</view>
|
||||
<view class="tabbar-item" @click="cliTabbar(4)">
|
||||
<image src="../../static/tabbar/shopSelected.png" v-if="tabbarId=='4'" mode="" class="img"></image>
|
||||
<image src="../../static/tabbar/shop.png" mode="" v-else class="img"></image>
|
||||
<text class="label" :class="tabbarId=='4' ? 'selected' : ''">商城</text>
|
||||
</view>
|
||||
|
||||
<view class="tabbar-item" @click="cliTabbar(5)">
|
||||
<image src="../../static/tabbar/mySelected.png" v-if="tabbarId=='5'" mode="" class="img"></image>
|
||||
<image src="../../static/tabbar/my.png" mode="" v-else class="img"></image>
|
||||
<text class="label" :class="tabbarId=='5' ? 'selected' : ''">我的</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tabbar",
|
||||
props: {
|
||||
tabbarId: {
|
||||
required: true,
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
created() {},
|
||||
methods: {
|
||||
cliTabbar(val) {
|
||||
if (val == '1') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/pageHome/pageHome'
|
||||
});
|
||||
return
|
||||
} else if (val == '2') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/activity/activity'
|
||||
});
|
||||
return
|
||||
} else if (val == '3') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/PublishWorks/PublishWorks'
|
||||
});
|
||||
return
|
||||
} else if (val == '4') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/shop/Shop'
|
||||
});
|
||||
return
|
||||
} else if (val == '5') {
|
||||
uni.reLaunch({
|
||||
url: '/pages/my/My'
|
||||
});
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.1);
|
||||
z-index:999;
|
||||
.tabbar-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
&.midButton {
|
||||
.img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: #AFADB0;
|
||||
|
||||
&.selected {
|
||||
color: #251B1D;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App'
|
||||
|
||||
|
||||
import uView from "uview-ui";
|
||||
Vue.use(uView);
|
||||
|
||||
//公共方法
|
||||
import "@/utils/utils.js"
|
||||
|
||||
|
||||
//组件
|
||||
import tabbar from "@/components/tabbar/tabbar.vue"
|
||||
Vue.component('tabbar',tabbar)
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
|
||||
App.mpType = 'app'
|
||||
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
app.$mount()
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
{
|
||||
"name" : "艺象心",
|
||||
"appid" : "__UNI__9AD4766",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
"app-plus" : {
|
||||
/* 5+App特有相关 */
|
||||
"usingComponents" : true,
|
||||
"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" : "wx79d2c832590cc08c",
|
||||
"setting" : {
|
||||
"urlCheck" : false,
|
||||
"minified" : true
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-qq" : {
|
||||
"usingComponents" : true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
{
|
||||
"easycom": {
|
||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||
},
|
||||
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
|
||||
{
|
||||
"path": "pages/pageHome/pageHome",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/enjoy/enjoy",
|
||||
"style": {
|
||||
"navigationBarTitleText": "每日一赏",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mediaProp/mediaProp",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/literHelp/literHelp",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/literFamily/literFamily",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/activity/activity",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
"path": "pages/moreFun/moreFun",
|
||||
"style": {
|
||||
"navigationBarTitleText": "更多功能",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "中间按钮"
|
||||
}
|
||||
}, {
|
||||
"path": "pages/shop/Shop",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
// 政策速通
|
||||
, {
|
||||
"path": "pages/PolicyExpress/PolicyExpress",
|
||||
"style": {
|
||||
"navigationBarTitleText": "政策速通",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
// 文艺作品
|
||||
, {
|
||||
"path": "pages/ArtWorks/ArtWorks",
|
||||
"style": {
|
||||
"navigationBarTitleText": "文艺作品",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
// 文艺活动
|
||||
, {
|
||||
"path": "pages/ArtActivities/ArtActivities",
|
||||
"style": {
|
||||
"navigationBarTitleText": "文艺活动",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
},
|
||||
// 活动详情
|
||||
{
|
||||
"path": "pages/ActivitiesDetail/ActivitiesDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "活动详情",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
}
|
||||
// 我的页面
|
||||
, {
|
||||
"path": "pages/my/My",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
},
|
||||
// 我的积分
|
||||
{
|
||||
"path": "pages/MyPoints/MyPoints",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的积分",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
// 订单详情
|
||||
{
|
||||
"path": "pages/OrderDetail/OrderDetail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/famousArts/famousArts",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/SelectId/SelectId",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle":"custom"
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/improveData/improveData",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "完善资料",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
,{
|
||||
"path" : "pages/PublishWorks/PublishWorks",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "发布作品",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/PublishWorks/PublishWorksNext",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "发布作品",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/DataSearch/DataSearch",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "资料查找",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
,{
|
||||
"path" : "pages/folderDetail/folderDetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/AwardWinningWork/AwardWinningWork",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "艺起战疫获奖作品",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/ArtRace/ArtRace",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "文艺比赛",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/ArtRace/ArtRaceDetail",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle":"custom"
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/ArtRace/ThrowWork",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "投稿",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/MyOrder/MyOrder",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle":"custom"
|
||||
}
|
||||
|
||||
}
|
||||
,{
|
||||
"path" : "pages/ConfirmOrder/ConfirmOrder",
|
||||
"style" :
|
||||
{
|
||||
"navigationBarTitleText": "确认订单",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black", //导航栏标题颜色及状态栏前景颜色，仅支持 black/white
|
||||
"navigationBarBackgroundColor": "#FFFFFF", //导航栏背景颜色（同状态栏背景色）
|
||||
"backgroundColor": "#F8F8F8" //下拉显示出来的窗口的背景色
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="help_bg_box">
|
||||
<view class=" bg_img_box">
|
||||
<image style="height: 352rpx; width: 100%; " src="../../static/orderDetail.png"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="header">
|
||||
<view class="title">{{serveList.title}} 文化凝聚</view>
|
||||
<view class="details">{{serveList.activityText}} 象山县第界</view>
|
||||
</view>
|
||||
<view class="activityDetails">
|
||||
|
||||
<view class="item_ul">
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/actDetails/actTime.png" mode="scaleToFill"></image>
|
||||
<text>活动时间</text>
|
||||
</view>
|
||||
<view class="content">{{serveList.address}} 2021/12/12~2022/02/02</view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
|
||||
<text>活动地点</text>
|
||||
</view>
|
||||
<view class="content"> 象山文化活动中心 </view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
|
||||
<text>活动类型</text>
|
||||
</view>
|
||||
<view class="content"> 摄影 </view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
|
||||
<text>活动报名时间</text>
|
||||
</view>
|
||||
<view class="content"> 2021/12/12~2022/02/02 </view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/actDetails/actPeople.png" mode="scaleToFill"></image>
|
||||
<text> 活动人数</text>
|
||||
</view>
|
||||
<view class="content"> 60/<text style=" color: #AFADB0;">120</text> </view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
|
||||
<text>志愿者报名时间</text>
|
||||
</view>
|
||||
<view class="content"> 2021/12/12~2022/02/02 </view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/actDetails/actPeople.png" mode="scaleToFill"></image>
|
||||
<text>志愿者招募数量</text>
|
||||
</view>
|
||||
<view class="content">{{serveList.maxCount}} 60/<text style=" color: #AFADB0;">120</text> </view>
|
||||
</view>
|
||||
<view class="item_li">
|
||||
<view class="standard">
|
||||
<image class="icon" src="../../static/actDetails/actAddr.png" mode="scaleToFill"></image>
|
||||
<text>冠名申请时间</text>
|
||||
</view>
|
||||
<view class="content"> 2021/12/12~2022/02/02 </view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="operation">
|
||||
<button type="default" class="apply" @click="baoMing()">活动报名</button>
|
||||
<button type="default" class="collection">志愿者报名</button>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
serveList: [],
|
||||
img: [],
|
||||
activityId: '',
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options) {
|
||||
// this.id = 'e98c24e3eb47db31f89cb1071a30fec4'
|
||||
// this.id = options.id
|
||||
console.log(options.id);
|
||||
},
|
||||
/*
|
||||
onShow() {
|
||||
this.getList()
|
||||
}, */
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
getList() {
|
||||
this.http.request('/activity/details', {
|
||||
id: this.id
|
||||
}, "GET").then(res => {
|
||||
this.serveList = res.data
|
||||
this.img = res.data.images.split(',')
|
||||
this.activityId = res.data.id
|
||||
})
|
||||
},
|
||||
baoMing() {
|
||||
this.$refs.popup.open()
|
||||
},
|
||||
close() {
|
||||
this.$refs.popup.close()
|
||||
},
|
||||
confirm() {
|
||||
this.http.request('/activityUser/addActivity?activityId=' + this.id, {}, "POST").then(res => {
|
||||
uni.showToast({
|
||||
title: '报名成功',
|
||||
icon: "none",
|
||||
});
|
||||
this.getList()
|
||||
}).catch(e => {
|
||||
uni.showToast({
|
||||
title: e.data.message,
|
||||
icon: "none",
|
||||
});
|
||||
})
|
||||
this.$refs.popup.close()
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
|
||||
.help_bg_box {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 40rpx 32rpx 32rpx;
|
||||
border-bottom: 16rpx solid #F8F8F8;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.details {
|
||||
font-size: 24rpx;
|
||||
color: #8E8F9E;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.activityDetails {
|
||||
padding: 32rpx;
|
||||
margin-bottom: 160rpx;
|
||||
|
||||
.title {
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.item_ul {
|
||||
.item_li {
|
||||
padding-bottom: 32rpx;
|
||||
margin-bottom: 32rpx;
|
||||
border-bottom: 2rpx solid #F1F1F1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.standard {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.icon {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
display: none;
|
||||
}
|
||||
|
||||
text {
|
||||
font-size: 24rpx;
|
||||
// color: #251B1D;
|
||||
color: $gray;
|
||||
margin-left: 8rpx;
|
||||
line-height: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
font-size: 24rpx;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
// justify-content: space-between;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
|
||||
.collection {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid #99241B;
|
||||
color: #99241B;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.apply {
|
||||
flex: 1;
|
||||
background-color: $red;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<view class="art_act_itm" v-for="(v,i) in 3" :key="i" @click="goActDeat(i)">
|
||||
<image src="../../static/artWork.png" mode=""></image>
|
||||
<view class="title">
|
||||
露凝而白｜鸿雁来清秋满怀
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
goActDeat(id){
|
||||
uni.navigateTo({
|
||||
url:`/pages/ActivitiesDetail/ActivitiesDetail?id=${id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
width: calc(100% - 32px);
|
||||
margin: 0px 16px;
|
||||
}
|
||||
image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.art_act_itm{
|
||||
margin-top: 12px;
|
||||
height: 164px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparnt;
|
||||
position: relative;
|
||||
.title{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
background: #000000;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
opacity: 0.3;
|
||||
height: 44px;
|
||||
color: #FFFFFF;
|
||||
line-height: 44px;
|
||||
font-size: 14px;
|
||||
padding-left: 12px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="art_race_itm" v-for="(v,i) in 6" @click="goRaceDetail(i)">
|
||||
<image style="width: 100%; height: 296rpx;" src="../../static/artRace/race1.png" mode=""></image>
|
||||
<view class="art_race_bot">
|
||||
<text class="art_title">艺起战疫</text>
|
||||
<text class="art_race_con u-line-2">寒冬虽冷，美术工作者们以画传心，心是热的；疫情虽紧，艺术家们以笔 墨为歌，信心是充足的。在市委宣传部和市递正能量，吹响新时代的...</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
goRaceDetail(id){
|
||||
console.log(id);
|
||||
uni.navigateTo({
|
||||
url:"/pages/ArtRace/ArtRaceDetail?id="+String(id),
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
.art_race_itm{
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 64rpx);
|
||||
margin: 24rpx auto;
|
||||
|
||||
.art_race_bot{
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #FFFFFF;
|
||||
.art_title{
|
||||
font-weight: 600;
|
||||
}
|
||||
.art_race_con{
|
||||
font-size: 20rpx;
|
||||
color: $gray;
|
||||
margin-bottom: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/blackArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!--导航栏ed -->
|
||||
|
||||
<view class="art_race_itm">
|
||||
<image style="width: 100%; height: 440rpx;" src="../../static/artRace/race1.png" mode=""></image>
|
||||
<view class="art_race_bot">
|
||||
<text class="art_title">艺起战疫</text>
|
||||
<text class="art_race_con ">寒冬虽冷，美术工作者们以画传心，心是热的；疫情虽紧，艺术家们以笔 墨为歌，信心是充足的。在市委宣传部和市递正能量，吹响新时代的...</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="race_itm_con">
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">比赛类型:</text>
|
||||
<text class="race_type_con">书画</text>
|
||||
</view>
|
||||
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">比赛形式:</text>
|
||||
<text class="race_type_con">线上投稿</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">投稿开始时间:</text>
|
||||
<text class="race_type_con">2021-02-02</text>
|
||||
</view>
|
||||
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">投稿结束时间:</text>
|
||||
<text class="race_type_con">2021-02-02</text>
|
||||
</view>
|
||||
<view class="race_type_box">
|
||||
<text class="race_type_titl">审评结束时间:</text>
|
||||
<text class="race_type_con">2021-02-02</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 红色按钮 -->
|
||||
<view class="operation">
|
||||
<button type="default" class="next" @click="throwWork">立即投稿</button>
|
||||
</view>
|
||||
<!-- 红色按钮ed -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
throwWork() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/ArtRace/ThrowWork"
|
||||
})
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
//除了小程序
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
},
|
||||
onLoad(opt) {
|
||||
console.log(opt.id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.art_race_itm {
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
|
||||
.art_race_bot {
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.art_title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.art_race_con {
|
||||
font-size: 20rpx;
|
||||
color: $gray;
|
||||
margin-bottom: 24rpx;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.race_itm_con {
|
||||
height: 1000rpx;
|
||||
margin-top: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.race_type_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px;
|
||||
|
||||
.race_type_titl {
|
||||
color: $gray;
|
||||
}
|
||||
|
||||
.race_type_con {}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.backImg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
|
||||
.next {
|
||||
width: calc(100% - 48rpx);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
background-color: #99241B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
border: none;
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<template>
|
||||
<view>
|
||||
<u--form :model="model2" :rules="rules" ref="form2">
|
||||
<u-form-item prop="userInfo.name" ref="item2" class="data_itm"></u-form-item>
|
||||
</u--form>
|
||||
|
||||
<u--input style="padding: 32rpx;" placeholder="请输入作品名称" border="none" clearable></u--input>
|
||||
|
||||
|
||||
<u--textarea style="padding: 32rpx; height: 200rpx;" v-model="value" placeholder="请输入作品说明" border="none"></u--textarea>
|
||||
<view class="gap">
|
||||
作品内容可上传图片/视频/音频等
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<u-upload class="upload" accept="media" width="172rpx" height="172rpx" :fileList="fileList3"
|
||||
@afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="2">
|
||||
<image style="width: 172rpx;height: 172rpx;" src="../../static/improveData/jia.png"></image>
|
||||
</u-upload>
|
||||
|
||||
|
||||
<view class="operation">
|
||||
<button type="default" class="next" @click="throwMyWork">投稿</button>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="zhanwei">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
fileList3: [],
|
||||
model2:{
|
||||
workName:'',
|
||||
workDesc:''
|
||||
},
|
||||
rules:{
|
||||
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
throwMyWork() {
|
||||
uni.showToast({
|
||||
title:"投稿作品"
|
||||
})
|
||||
/* uni.navigateTo({
|
||||
url: "/pages/PublishWorks/PublishWorksNext"
|
||||
}) */
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
formData: {
|
||||
user: 'test'
|
||||
},
|
||||
success: (res) => {
|
||||
setTimeout(() => {
|
||||
resolve(res.data.data)
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.gap {
|
||||
font-size: 24rpx;
|
||||
|
||||
color: #AFADB0;
|
||||
height: 80rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
line-height: 80rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.upload {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
|
||||
.next {
|
||||
width: calc(100% - 48rpx);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
background-color: #99241B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
border: none;
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zhanwei {
|
||||
height: 460rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<view>
|
||||
<u-search height=42 margin="12px 0" searchIconColor="#251B1D" shape="square" :showAction="false"
|
||||
v-model="artValue" placeholder="请输入名家名称"></u-search>
|
||||
|
||||
|
||||
<u-tabs :scrollable="false" :list="list1" :activeStyle="{
|
||||
color: '#251B1D',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.05)'
|
||||
}" :inactiveStyle="{
|
||||
color: '#AFADB0 ',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle=" height: 50px; ">
|
||||
</u-tabs>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="artworks">
|
||||
<view class="art_item" v-for="(v,i) in isLoveList" :key="i">
|
||||
<view class="art_item_top">
|
||||
<image src="../../static/artWork.png" mode=""></image>
|
||||
<view class="like" @click="like(i)">
|
||||
<view :class=" isLoveList[i] ? 'img_selected' : 'img'">
|
||||
<!-- 红心 -->
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=" art_item_bott">
|
||||
<view class="title">
|
||||
摄影作品自由生活向美而生作品
|
||||
</view>
|
||||
<view class="sub_title">
|
||||
摄影作品
|
||||
</view>
|
||||
<view class="img_box">
|
||||
<view class=" puber">
|
||||
<view class="avtor">
|
||||
<image src="../../static/artWork.png" mode=""></image>
|
||||
</view>
|
||||
<view class="autor">
|
||||
谢xx
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="time">
|
||||
58分钟前
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoveList:[true,false,true,false],
|
||||
artValue: '',
|
||||
list1: [{
|
||||
name: '全部',
|
||||
}, {
|
||||
name: '书法',
|
||||
}, {
|
||||
name: '绘画'
|
||||
}, {
|
||||
name: '雕刻'
|
||||
}, {
|
||||
name: '摄影'
|
||||
}, {
|
||||
name: '其他'
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
like(i){
|
||||
|
||||
this.$set(this.isLoveList, i,!this.isLoveList[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/deep/ .u-tabs__wrapper__nav__item__text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
/deep/ .u-tabs__wrapper__nav__line {
|
||||
height: 14px!important;
|
||||
width: 40px!important;
|
||||
background-image: url(../../static/scrollLine.png);
|
||||
background-color:transparent!important;
|
||||
bottom: 2px!important;
|
||||
}
|
||||
page {
|
||||
width: calc(100% - 32px);
|
||||
margin: 0 16px ;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.art_item {
|
||||
margin-top: 16px;
|
||||
border: 1px solid transparent;
|
||||
.art_item_top {
|
||||
position: relative;
|
||||
height: 192px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
|
||||
.like {
|
||||
position: absolute;
|
||||
top: calc(100% - 40px);
|
||||
left: calc(100% - 40px);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: white;
|
||||
z-index: 10;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.img{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background:url(../../static/spaceHeart.png) center/100% no-repeat ;
|
||||
|
||||
|
||||
}
|
||||
.img_selected{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background:url(../../static/redHerart.png) center/100% no-repeat ;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art_item_bott {
|
||||
.title {
|
||||
margin-top: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #251B1D;
|
||||
}
|
||||
|
||||
.sub_title {
|
||||
font-size: 12px;
|
||||
color: #AFADB0;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.img_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.puber {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avtor {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.autor {
|
||||
color: #251B1D;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #AFADB0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<view class="reward">
|
||||
|
||||
<view class="reward_itm" v-for="(v,i) in fightVirusList" :key="i">
|
||||
<view class="reward_top">
|
||||
<image class="reward_work_img" :src="v.workImgUrl" mode="">
|
||||
</image>
|
||||
</view>
|
||||
<view class="reward_bottm">
|
||||
<text class="rewardWorkTitle">{{v.workTitle}}</text>
|
||||
<view class="avator_box">
|
||||
<image class="avator_img_small" :src="v.avatorUrl" mode="">
|
||||
</image>
|
||||
<text class="autor_name">{{v.author}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fightVirusList: [{
|
||||
id: 1,
|
||||
author: "谢万里",
|
||||
workImgUrl: '../../static/RewardWork/fightVirus.png',
|
||||
avatorUrl: '../../static/RewardWork/avator.png',
|
||||
workTitle: '致敬英雄'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
author: "谢万里",
|
||||
workImgUrl: '../../static/RewardWork/fightVirus1.png',
|
||||
avatorUrl: '../../static/RewardWork/avator.png',
|
||||
workTitle: '致敬英雄'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
author: "谢万里",
|
||||
workImgUrl: '../../static/RewardWork/fightVirus1.png',
|
||||
avatorUrl: '../../static/RewardWork/avator.png',
|
||||
workTitle: '致敬英雄'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
author: "谢万里",
|
||||
workImgUrl: '../../static/RewardWork/fightVirus.png',
|
||||
avatorUrl: '../../static/RewardWork/avator.png',
|
||||
workTitle: '致敬英雄'
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad(opt) {
|
||||
console.log(opt.id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.reward {
|
||||
padding: 24rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
.reward_itm {
|
||||
margin-top: 20rpx;
|
||||
box-sizing: border-box;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.reward_top {
|
||||
.reward_work_img {
|
||||
width: 344rpx;
|
||||
height: 344rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.reward_bottm {
|
||||
padding-left: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.rewardWorkTitle {
|
||||
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.avator_box {
|
||||
padding: 20rpx 0rpx;
|
||||
|
||||
.avator_img_small {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.autor_name {
|
||||
color: #AFADB0;
|
||||
font-size: 20rpx;
|
||||
margin-left: 4rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="person_des bg_col_cirle_margin">
|
||||
<image style="width: 46rpx; height: 46rpx;" src="../../static/DataSearch/Delet.png" mode=""></image>
|
||||
<view class="person_con">
|
||||
<view class="person_con_t">
|
||||
<view class="info_txt">
|
||||
<text>王文瑞</text> <text>18733663311</text>
|
||||
</view>
|
||||
<image style="width: 46rpx; height: 46rpx;" src="../../static/rightArrow.png" mode=""></image>
|
||||
</view>
|
||||
<view class="addr">
|
||||
高新产业园
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="goods_box bg_col_cirle_margin">
|
||||
<view class="goods_itm">
|
||||
<view class="goods_itm_top">
|
||||
<image style="width: 46rpx; height: 46rpx;" src="../../static/DataSearch/Delet.png" mode=""></image>
|
||||
<text class="goods_itm_top_title">周科</text>
|
||||
</view>
|
||||
<view class="goods_itm_bott">
|
||||
<image style="width: 148rpx; height: 156rpx;" src="../../static/DataSearch/TxtImg.png" mode="">
|
||||
</image>
|
||||
<view class="goods_itm_bott_left">
|
||||
<text style="font-weight: 600;">绘画作品</text>
|
||||
<view class="goods_itm_bott_left_count">
|
||||
<text>x1</text> <text>￥80</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="price_box bg_col_cirle_margin">
|
||||
<view class="price_tit">
|
||||
价格明细
|
||||
</view>
|
||||
<view class="price_total">
|
||||
<text>商品总价</text>
|
||||
<text>￥80</text>
|
||||
</view>
|
||||
<view class="express_price">
|
||||
<text>快递费</text>
|
||||
<text>￥8</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="pay_methods bg_col_cirle_margin">
|
||||
<text>支付方式</text>
|
||||
<view class="pay_right">
|
||||
<image style="width: 32rpx; height: 32rpx;" src="../../static/DataSearch/Delet.png" mode=""></image>
|
||||
<text>微信支付</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bottom_opration">
|
||||
<view class="txt">
|
||||
<text>合计 :</text> <text class="total_prc_color">￥88</text>
|
||||
</view>
|
||||
<view class="pay_button">
|
||||
立即支付
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
image{
|
||||
vertical-align: middle;
|
||||
}
|
||||
.person_des {
|
||||
|
||||
display: flex;
|
||||
|
||||
.person_con {
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
|
||||
.person_con_t {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.info_txt{
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.goods_box {
|
||||
|
||||
.goods_itm {
|
||||
.goods_itm_top{
|
||||
.goods_itm_top_title{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.goods_itm_bott{
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
.goods_itm_bott_left{
|
||||
flex: 1;
|
||||
margin-left: 16rpx;
|
||||
.goods_itm_bott_left_count{
|
||||
color: $gray;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price_box{
|
||||
background-color: #FFFFFF;
|
||||
.price_tit{
|
||||
font-weight: 600;
|
||||
border-bottom: 1rpx #E0E0E0 solid;
|
||||
padding-bottom: 32rpx;
|
||||
}
|
||||
.price_total{
|
||||
padding: 24rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.express_price{
|
||||
padding: 24rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.pay_methods{
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
// 辅助
|
||||
.bg_col_cirle_margin{
|
||||
background-color: #FFFFFF;
|
||||
margin-top: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
width: calc(100% - 64rpx);
|
||||
margin: 16rpx auto;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.bottom_opration{
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 32rpx;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 166rpx;
|
||||
.txt{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.total_prc_color{
|
||||
font-weight: 600;
|
||||
color: #FF6600;
|
||||
font-size: 44rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.pay_button{
|
||||
background-color: $red;
|
||||
color: #FFFFFF;
|
||||
width: 284rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,320 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<view class="search_box">
|
||||
<u-search height=42 margin="12px 0" searchIconColor="black" bgColor="#f8f8f8" searchIconSize="40rpx"
|
||||
shape="square" :showAction="false" v-model="dataVal" placeholder="请输入资料名称"></u-search>
|
||||
<view class="car_box" v-if="false">
|
||||
<image src="../../static/DataSearch/chexboxs.png" mode=""></image>
|
||||
<text style="font-size: 20rpx;">选择</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="itm" v-for="(v,i) in folderList" :key="i">
|
||||
<view class="fileImg">
|
||||
<image src="../../static/DataSearch/Floder.png" mode=""></image>
|
||||
</view>
|
||||
<view class="data_detail_box" @click="GofileDetail(i)">
|
||||
|
||||
<view class="file_title">
|
||||
{{v.folderName}}
|
||||
</view>
|
||||
<view class="file_time">
|
||||
2021-12-18 17:08
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="moreImg" @click="clickDot(i)" style="position: relative;" :ref="'tankuang'+String(i)">
|
||||
<image src="../../static/DataSearch/moreFCUN.png" mode=""></image>
|
||||
<view class="poup_edit_box" v-if="i===dotNum">
|
||||
<view class="poup_edit" @click="editDir">
|
||||
<image style="width: 32rpx;height: 32rpx; margin-right: 4rpx;"
|
||||
src="../../static/DataSearch/dirEdit.png" mode="">
|
||||
</image> 编辑目录
|
||||
</view>
|
||||
<view class="poup_del" @click="delDir">
|
||||
<image style="width: 32rpx; height: 32rpx;margin-right: 4rpx;"
|
||||
src="../../static/DataSearch/dirDel.png" mode="">
|
||||
</image> 删除目录
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="moreImg" v-if="false">
|
||||
<image src="../../static/DataSearch/radioImg.png" v-if="false" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="bottm" @click="show=!show">
|
||||
<image src="../../static/DataSearch/zhanKai.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
<!-- 加号弹出框 -->
|
||||
|
||||
<u-popup :show="show" closeOnClickOverlay @close="() => show = false" @open="open" round=5>
|
||||
<view class="tan_con">
|
||||
<view class="tit">
|
||||
上传文件
|
||||
</view>
|
||||
<view class="up_itm_box">
|
||||
|
||||
<view class="img_itm">
|
||||
<view class="img">
|
||||
<image src="../../static/DataSearch/UploadImg.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Up_tit">
|
||||
上传图片
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="img_itm">
|
||||
<view class="img">
|
||||
<image src="../../static/DataSearch/uploadDoc.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Up_tit">
|
||||
上传文档
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="img_itm">
|
||||
<view class="img">
|
||||
<image src="../../static/DataSearch/UploadVideo.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Up_tit">
|
||||
上传视频
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="img_itm">
|
||||
<view class="img">
|
||||
<image src="../../static/DataSearch/UploadMusic.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Up_tit">
|
||||
上传音频
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 加号 ed -->
|
||||
<!-- 三个点 中 删除目录 的弹出确认删除 -->
|
||||
<u-modal width="550rpx" confirmText="确认删除" confirmColor='#E34D59' :show="showModel" showCancelButton
|
||||
@confirm="confirmModel" @cancel="() => showModel = false">
|
||||
<text style="font-size: 32rpx; font-weight: 600;color: #251B1D;margin: 25rpx 0;">确认删除目录</text>
|
||||
</u-modal>
|
||||
|
||||
<!-- 三个点ed -->
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tempNum: '',
|
||||
dataVal: "",
|
||||
show: false,
|
||||
dotNum: '',
|
||||
showModel: false,
|
||||
folderList: [{
|
||||
id: 1,
|
||||
folderName: "资料查找"
|
||||
}, {
|
||||
id: 2,
|
||||
folderName: "珍贵资料"
|
||||
}, {
|
||||
id: 3,
|
||||
folderName: "影音文件夹"
|
||||
}, {
|
||||
id: 4,
|
||||
folderName: "怀旧文件夹"
|
||||
}, {
|
||||
id: 5,
|
||||
folderName: "资料查找"
|
||||
}]
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
confirmModel() {
|
||||
this.showModel = false;
|
||||
console.log("++++++",this);
|
||||
// this 打印不出来 ref 无法用
|
||||
},
|
||||
clickDot(num) {
|
||||
this.dotNum = num
|
||||
this.tempNum = Number(num)
|
||||
},
|
||||
editDir() {
|
||||
|
||||
uni.showToast({
|
||||
title: "编辑目录"
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
delDir() {
|
||||
|
||||
this.showModel = true
|
||||
},
|
||||
GofileDetail(id) {
|
||||
|
||||
uni.navigateTo({
|
||||
url: "/pages/folderDetail/folderDetail?id=" + String(id)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search_box {
|
||||
padding: 32rpx;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.car_box {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.itm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
height: 140rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.fileImg {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.data_detail_box {
|
||||
flex: 1;
|
||||
|
||||
.file_title {
|
||||
color: $black;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.file_time {
|
||||
color: $gray;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.moreImg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
|
||||
.poup_edit_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
position: absolute;
|
||||
top: calc(50% + 20rpx);
|
||||
right: calc(50% - 20rpx);
|
||||
width: 260rpx;
|
||||
height: 168rpx;
|
||||
background: #FFFFFF;
|
||||
|
||||
box-shadow: 0px 4px 20px 1px rgba(0, 0, 0, 0.12);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
z-index: 99;
|
||||
box-sizing: border-box;
|
||||
padding: 24rpx;
|
||||
|
||||
.poup_edit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.poup_del {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottm {
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
position: fixed;
|
||||
bottom: 160rpx;
|
||||
left: calc(100% - 122rpx);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.tan_con {
|
||||
padding: 32rpx;
|
||||
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
color: #251B1D;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.up_itm_box {
|
||||
margin: 50rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.img_itm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.Up_tit {
|
||||
font-size: 12px;
|
||||
color: #251B1D;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/blackArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
<u-search height=42 margin="12px 0" searchIconColor="#251B1D" shape="square" :showAction="false"
|
||||
v-model="searcOrderValue" placeholder="搜素我的订单"></u-search>
|
||||
<view class="zz" :style="{'width':jiWidth+'px'}">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--导航栏ed -->
|
||||
<view class="zhan" :style="{'height':(statusHeight+titleHeight+10)+'px'}">
|
||||
|
||||
</view>
|
||||
|
||||
<view class="top_tab_box" >
|
||||
|
||||
<view class="top_two_box">
|
||||
<text>我买到的</text>
|
||||
<text>我卖出的</text>
|
||||
</view>
|
||||
|
||||
<u-tabs :scrollable="false" lineWidth="50rpx" lineColor="#99241B" :list="list1" :activeStyle="{
|
||||
color: '#251B1D',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.05)'
|
||||
}" :inactiveStyle="{
|
||||
color: '#AFADB0 ',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle=" height: 50px; ">
|
||||
|
||||
</u-tabs>
|
||||
</view>
|
||||
|
||||
<view class="order_box" v-for="(v,i) in 3">
|
||||
<view class="order_itm_box">
|
||||
<view class="order_itm_top" style="display: flex; justify-content: space-between;">
|
||||
<view class="order_itm_top_left">
|
||||
<image style="width: 36rpx; height: 36rpx;" src="../../static/DataSearch/Delet.png" mode="">
|
||||
</image> <text>周科</text>
|
||||
</view>
|
||||
<text style="color: #FF6600;">买家已付款</text>
|
||||
</view>
|
||||
|
||||
<view class="order_itm_botm">
|
||||
<image src="../../static/artRace/race2.png" style="width: 148rpx; height: 148rpx;" mode=""></image>
|
||||
<view class="work_desc">
|
||||
<view class="tit">
|
||||
乡间小路
|
||||
</view>
|
||||
<view class="count">
|
||||
<text style="color:#AFADB0;">x1</text>
|
||||
<view class="ss">
|
||||
<text style="color:#AFADB0;">合计</text>￥88
|
||||
</view>
|
||||
</view>
|
||||
<view class="opt_box">
|
||||
<u-button style="width: 100rpx;" shape="circle" size="mini" plain type="success">退款
|
||||
</u-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
jiWidth: 0,
|
||||
list1: [{
|
||||
name: '全部',
|
||||
}, {
|
||||
name: '待付款',
|
||||
}, {
|
||||
name: '待发货'
|
||||
}, {
|
||||
name: '已完成'
|
||||
}],
|
||||
searcOrderValue: ''
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.jiWidth = menuButtonInfo.width
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
//除了小程序
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.backImg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top_tab_box {
|
||||
.top_two_box {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
}
|
||||
|
||||
.order_box {
|
||||
.order_itm_box {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
margin: 32rpx 32rpx 0rpx 32rpx;
|
||||
border: 1px solid #FFFFFF;
|
||||
|
||||
.order_itm_top {
|
||||
|
||||
.order_itm_top_left {}
|
||||
}
|
||||
|
||||
.order_itm_botm {
|
||||
margin-top: 16rpx;
|
||||
display: flex;
|
||||
|
||||
.work_desc {
|
||||
flex: 1;
|
||||
|
||||
.tit {}
|
||||
|
||||
.count {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.opt_box {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,301 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar" >
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/orderLeftArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
<view class="barLabel">
|
||||
我的积分
|
||||
</view>
|
||||
<view class="zhan">
|
||||
<!-- 占位 -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!--导航栏ed -->
|
||||
|
||||
<!-- 顶部背景区 -->
|
||||
<view class="point_top">
|
||||
<image style="width: 100%; height: 100%;" src="../../static/Mypoints/PointsBg.png" mode=""></image>
|
||||
|
||||
<view class="points_count"
|
||||
>
|
||||
<view class="points_count_itm">
|
||||
<view class="tt1" >
|
||||
可用积分
|
||||
</view>
|
||||
<view class="tt2" >
|
||||
586
|
||||
</view>
|
||||
</view>
|
||||
<view class="points_count_itm" style="margin-left:200rpx ;">
|
||||
<view class="tt1" >
|
||||
年度积分总量
|
||||
</view>
|
||||
<view class="tt2" >
|
||||
6853
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mult">
|
||||
|
||||
<!-- 限时任务区 -->
|
||||
<view class="pointBox">
|
||||
<view class="P_title">
|
||||
<text class="L_title">限时任务</text>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="piont_itm">
|
||||
<view class="piont_itm_L">
|
||||
<image style="width: 64rpx; height: 64rpx; " src="../../static/Mypoints/cloud.png" mode="">
|
||||
</image>
|
||||
<view class="content">
|
||||
<view class="tit">
|
||||
浏览每一日
|
||||
</view>
|
||||
<view class="con">
|
||||
+3积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="operation">
|
||||
<u-button type="default" plain size="small" color="#99241B"> 去完成</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 积分任务区 -->
|
||||
<view class="pointBox">
|
||||
<view class="P_title">
|
||||
<text class="L_title">积分任务</text>
|
||||
<view class="right_arr_box" style="color: gray; display: flex;align-items: center;">
|
||||
|
||||
<image class="R_arr" src="../../static/Mypoints/rightArrow.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="piont_itm" v-for="(v,i) in 5" :key="i">
|
||||
<view class="piont_itm_L">
|
||||
<image style="width: 64rpx; height: 64rpx; " src="../../static/Mypoints/cloud.png" mode="">
|
||||
</image>
|
||||
<view class="content">
|
||||
<view class="tit">
|
||||
浏览每一日
|
||||
</view>
|
||||
<view class="con">
|
||||
+3积分
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="operation">
|
||||
<u-button v-if="i==0||i==1||i==2" type="default" plain size="small" color="#AFADB0"> 已完成
|
||||
</u-button>
|
||||
<u-button v-if="i==3||i==4" type="default" plain size="small" color="#99241B "> 去完成</u-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 积分明细区 -->
|
||||
<view class="pointBox">
|
||||
|
||||
<view class="P_title">
|
||||
<text class="L_title">积分明细</text>
|
||||
<view class="right_arr_box" style="color: gray; display: flex;align-items: center;">
|
||||
<text>点击查看明细</text>
|
||||
<image class="R_arr" src="../../static/Mypoints/rightArrow.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
back(){
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
//除了小程序
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F8F8F8;
|
||||
}
|
||||
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
|
||||
color: #FFFFFF;
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.backImg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
|
||||
.barLabel {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.zhan{
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.point_top {
|
||||
height: 560rpx;
|
||||
position: relative;
|
||||
|
||||
.return {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 64rpx);
|
||||
margin: 0 32rpx;
|
||||
|
||||
.Nav_title {
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
.points_count{
|
||||
display: flex; position: absolute;bottom: 240rpx; border: 1px solid transparnet; width:calc(100% - 80rpx) ; margin: 0 40rpx;
|
||||
.points_count_itm{
|
||||
.tt1{color: #ACAEB7; font-size: 32rpx;}
|
||||
.tt2{
|
||||
color: #FFFFFF; font-size: 48rpx; margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mult {
|
||||
position: absolute;
|
||||
top: 400rpx;
|
||||
width: calc(100% - 64rpx);
|
||||
margin: 0 32rpx;
|
||||
|
||||
.pointBox {
|
||||
margin-bottom: 24rpx;
|
||||
padding: 24rpx;
|
||||
border: 1px solid transparnet;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
|
||||
.P_title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.piont_itm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 40rpx;
|
||||
|
||||
.piont_itm_L {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.content {
|
||||
margin-left: 24rpx;
|
||||
|
||||
.tit {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.con {
|
||||
color: $gray;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operation {}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.R_arr {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.L_title {
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,267 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="page-section">
|
||||
<view class="page-section-spacing">
|
||||
<swiper class="swiper" :autoplay="autoplay" :interval="interval" indicator-dots :duration="duration">
|
||||
<swiper-item v-for="(v,i) in img" :key="i">
|
||||
<view class="swiper_box">
|
||||
<image class="swiper_img" :src='img[i]' mode="aspectFill"></image>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="return" @click="back()">
|
||||
|
||||
<image src="../../static/orderLeftArrow.png" mode="scaleToFill"></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<!-- 定位卡片 -->
|
||||
<view class="positon_box">
|
||||
|
||||
<!-- 顶部卡片 -->
|
||||
|
||||
<view class="topcard">
|
||||
<view class="free_box">
|
||||
<view style="font-weight: bold;font-size: 44rpx;color: #FF6600;">
|
||||
<!-- {{serveList.type}} -->
|
||||
25 <text style="font-size: 24rpx;">积分</text>
|
||||
</view>
|
||||
<view class="" style="display: flex; align-items: center; justify-content: center;">
|
||||
<!-- <image src="../../static/DunIcon.png" style="width: 32rpx;height: 32rpx;" mode=""></image> -->
|
||||
<view class="sale_count" style="color: gray; font-size: 12px;">
|
||||
月销量48
|
||||
</view>
|
||||
|
||||
<text style="font-weight: 400; font-size: 24rpx;color: #AFADB0;">
|
||||
{{serveList.score}}
|
||||
</text>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="guandao">
|
||||
{{serveList.title}}
|
||||
</view>
|
||||
<view style="font-size: 24rpx; margin-bottom: 16rpx;">
|
||||
<text style="color: #AFADB0;">作者：</text>
|
||||
<text>{{serveList.publisher}} 周科</text>
|
||||
</view>
|
||||
<view style="font-size: 24rpx;">
|
||||
<text style="color: #AFADB0;">上传时间：</text>
|
||||
<text>{{serveList.createdAt}} 2021-02-24 </text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 服务卡片 -->
|
||||
<view class=" serve_card">
|
||||
<view class="serve_ind">
|
||||
作品详情
|
||||
</view>
|
||||
<view class="serve_dec">
|
||||
{{serveList.content}}
|
||||
象山全域旅游摄影图片征集活动获奖照片，全面展示象山岁月 沧桑和现代时尚之美
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="operation">
|
||||
<view class="start_icon" style="width: 60rpx;height: 80rpx; ">
|
||||
<view style="width: 40rpx; height: 40rpx;" class="col_icon ">
|
||||
<image style="width: 100%; height: 100%;" src="../../static/star.png"></image>
|
||||
</view>
|
||||
|
||||
<view class="col_txt" style="font-size: 20rpx; width: 60rpx;">
|
||||
收藏
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn_contain" style="display: flex;">
|
||||
<button type="default" class="addCar" @click="colection()">加入购物车</button>
|
||||
<button type="default" class="buy" @click="appointment()">立即购买</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: '',
|
||||
indicatorDots: true,
|
||||
autoplay: true,
|
||||
interval: 5000,
|
||||
duration: 500,
|
||||
serveList: [],
|
||||
img: ["../../static/orderDetail.png", "../../static/orderDetail.png"],
|
||||
bookId: '',
|
||||
collId: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option.id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/deep/ uni-swiper .uni-swiper-dots-horizontal {
|
||||
bottom: 120rpx;
|
||||
}
|
||||
|
||||
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.positon_box {
|
||||
position: fixed;
|
||||
top: 400rpx;
|
||||
padding: 0 24rpx;
|
||||
width: calc(100% - 48rpx);
|
||||
|
||||
.topcard {
|
||||
border: 2rpx solid #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
|
||||
.free_box {
|
||||
border: 2rpx solid #FFFFFF;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.guandao {
|
||||
font-size: 36rpx;
|
||||
color: #251B1D;
|
||||
font-weight: 600;
|
||||
margin-top: 28rpx;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.serve_card {
|
||||
border: 1rpx solid #FFFFFF;
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
box-sizing: border-box;
|
||||
padding: 32rpx 24rpx;
|
||||
margin-top: 24rpx;
|
||||
|
||||
.serve_ind {
|
||||
color: #251B1D;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.serve_dec {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #AFADB0;
|
||||
margin-top: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.page-section {
|
||||
position: relative;
|
||||
|
||||
.return {
|
||||
position: absolute;
|
||||
left: 24rpx;
|
||||
top: 110rpx;
|
||||
|
||||
image {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
|
||||
swiper {
|
||||
height: 500rpx;
|
||||
|
||||
.swiper_box {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 500rpx;
|
||||
|
||||
.swiper_img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// position: absolute;
|
||||
// left: 50%;
|
||||
// top: 50%;
|
||||
// transform: translate(-50%,-50%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
|
||||
|
||||
.addCar {
|
||||
width: 284rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
// flex: 0 0 240rpx;
|
||||
margin-right: 24rpx;
|
||||
background-color: #F1F7FF;
|
||||
color: #99241B;
|
||||
font-size: 24rpx;
|
||||
font-weight: bold;
|
||||
border: 1px solid #99241B;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.buy {
|
||||
width: 284rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
// flex: 1;
|
||||
background-color: #99241B;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
// font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<template>
|
||||
<view >
|
||||
<view class="express_contain" v-for="(v,i) in 5" :key="i">
|
||||
<view class="express_contain_content">
|
||||
关于启动2021年 度区上规模民营企业调查及拟推荐“民 营企业500强”的通知
|
||||
</view>
|
||||
<view class="express_contain_sub">
|
||||
区工商联办 2021/04/12
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.express_contain {
|
||||
padding: 20px 16px;
|
||||
.express_contain_content {
|
||||
color: #32333B;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
font-family: PingFang SC-Semibold, PingFang SC;
|
||||
|
||||
}
|
||||
|
||||
.express_contain_sub {
|
||||
margin-top: 12px;
|
||||
font-weight: 500;
|
||||
color: #8E8F9E;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,157 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 发布作品 -->
|
||||
|
||||
<u--input style="padding: 32rpx;" placeholder="请输入作品名称" border="bottom" clearable></u--input>
|
||||
<u--input style="padding: 32rpx;" placeholder="请选择作品类型" border="bottom" clearable>
|
||||
<u-icon slot="suffix" name="arrow-right"></u-icon>
|
||||
</u--input>
|
||||
|
||||
<u--textarea style="padding: 32rpx;" v-model="value" placeholder="请输入作品说明" border="none"></u--textarea>
|
||||
<view class="gap">
|
||||
作品内容可上传图片/视频/音频等
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<u-upload class="upload" accept="media" width="172rpx" height="172rpx" :fileList="fileList3"
|
||||
@afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="2">
|
||||
<image style="width: 172rpx;height: 172rpx;" src="../../static/improveData/jia.png"></image>
|
||||
</u-upload>
|
||||
|
||||
|
||||
<view class="operation">
|
||||
<button type="default" class="next" @click="next">下一步</button>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="zhanwei">
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
fileList3: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/PublishWorks/PublishWorksNext"
|
||||
})
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
formData: {
|
||||
user: 'test'
|
||||
},
|
||||
success: (res) => {
|
||||
setTimeout(() => {
|
||||
resolve(res.data.data)
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.gap {
|
||||
font-size: 24rpx;
|
||||
|
||||
color: #AFADB0;
|
||||
height: 80rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
opacity: 1;
|
||||
line-height: 80rpx;
|
||||
padding: 0 32rpx;
|
||||
}
|
||||
|
||||
.upload {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
|
||||
.next {
|
||||
width: calc(100% - 48rpx);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
background-color: #99241B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
border: none;
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zhanwei {
|
||||
height: 460rpx;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,185 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="bg">
|
||||
<image src="../../static/puplishBG.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="rightBox" @click="showSex=true">
|
||||
<text class="right_titl" style="color: #251B1D; font-weight: 600;margin-left: 32rpx;"> 作品使用权限</text>
|
||||
<u--input fontSize="28rpx" border="none" readonly v-model="v1" disabledColor="#ffffff"
|
||||
placeholder="请选择作品使用权限" inputAlign="right">
|
||||
<u-icon slot="suffix" name="arrow-right"></u-icon>
|
||||
</u--input>
|
||||
</view>
|
||||
|
||||
<view class="sub_ti_box" v-if="v1=='付费购买'" >
|
||||
<text class="right_titl">使用费用</text>
|
||||
<u--input placeholder="请输入使用费用" inputAlign="right" border="none" type="number" value=""></u--input> <text
|
||||
style="margin-left: 16rpx;">元</text>
|
||||
</view>
|
||||
|
||||
<view class="sub_ti_box" v-if="v1=='积分购买'" >
|
||||
<text class="right_titl">使用积分</text>
|
||||
<u--input placeholder="请输入使用积分" inputAlign="right" type="number" border="none" value=""></u--input> <text style="margin-left: 16rpx;">积分</text>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<u-popup :show="showSex" @close="close" @open="open" closeOnClickOverlay :round="5"
|
||||
customStyle="padding: 16px;">
|
||||
<u-radio-group @change="selectForm" v-model="radiovalue7" :borderBottom="true" placement="column"
|
||||
iconPlacement="right">
|
||||
<u-radio :customStyle="{marginBottom: '16px' }" v-for="(item, index) in radiolist7" :key="index"
|
||||
:label="item.name" labelSize="28rpx" labelColor="#231F1C" :name="item.name" activeColor="#99241B ">
|
||||
</u-radio>
|
||||
<u-button class="custom-style" style="background-color:#99241B ; color: #FFFFFF; margin-top: 32rpx;"
|
||||
type="default" @click="showSex=false">确认</u-button>
|
||||
</u-radio-group>
|
||||
</u-popup>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="operation">
|
||||
<button type="default" class="collection" @click="goPre">上一步</button>
|
||||
<button type="default" class="apply" @click="cfmPub()">确认发布</button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showSex: false,
|
||||
v1: "",
|
||||
radiovalue7: '',
|
||||
|
||||
|
||||
|
||||
radiolist7: [{
|
||||
name: '免费使用',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '付费购买',
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
name: '积分购买',
|
||||
disabled: false
|
||||
},
|
||||
|
||||
{
|
||||
name: '面议',
|
||||
disabled: false
|
||||
}
|
||||
],
|
||||
radio: '',
|
||||
switchVal: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goPre() {
|
||||
uni.navigateTo({
|
||||
url: "/pages/PublishWorks/PublishWorks"
|
||||
})
|
||||
},
|
||||
cfmPub() {
|
||||
|
||||
uni.showToast({
|
||||
title: '确认发布',
|
||||
duration: 2000
|
||||
});
|
||||
},
|
||||
sexSelect(e) {
|
||||
this.model1.userInfo.rights = e.name
|
||||
|
||||
} ,
|
||||
selectForm(form) {
|
||||
|
||||
this.v1 = form
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bg {
|
||||
height: 520rpx;
|
||||
}
|
||||
|
||||
.rightBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 104rpx;
|
||||
border: 1px solid transparent;
|
||||
margin-top: 16rpx;
|
||||
|
||||
}
|
||||
.sub_ti_box{
|
||||
display: flex; align-items: center; margin: 0 32rpx;
|
||||
padding: 32rpx 0;
|
||||
.right_titl{
|
||||
font-weight: 600;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
|
||||
.collection {
|
||||
|
||||
flex: 1;
|
||||
margin-right: 24rpx;
|
||||
background-color: #F5F5F5;
|
||||
color: #251B1D;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.apply {
|
||||
flex: 1;
|
||||
|
||||
background-color: $red;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
border: none;
|
||||
}
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ff {
|
||||
padding-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<view class="navbar">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/blackArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
</view>
|
||||
</view>
|
||||
<!--导航栏ed -->
|
||||
|
||||
<view class="select_bg">
|
||||
<image src="../../static/selectID/selectIdBG.png" mode=""></image>
|
||||
<view class="tips">
|
||||
<view class="selct_tips">
|
||||
请选择您的身份
|
||||
</view>
|
||||
|
||||
<view class="select_sm_tips">
|
||||
选择身份后不能修改哦！
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="itm_id_contain" v-for="(v,i) in selectList" :key="i">
|
||||
<view :class=" id === i ? ' itm_id_selected' :'itm_id'" @click="confirm_id(i)">
|
||||
<view>
|
||||
<!-- 政协委员 -->
|
||||
{{v}}
|
||||
</view>
|
||||
<view class="gou">
|
||||
<image src="../../static/selectID/gouXuan.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="operation">
|
||||
<button type="default" class="next" @click="next">下一步</button>
|
||||
</view>
|
||||
|
||||
<view class="zhan">
|
||||
<!-- zhanwei -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id:8,
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
selectList: ["协会会员", "文艺人才", "文艺志愿者", "服务商", ]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
next() {
|
||||
console.log("下一步");
|
||||
if(this.id<8){
|
||||
var that=this
|
||||
uni.navigateTo({
|
||||
url:`/pages/improveData/improveData?id=${that.id}`
|
||||
})
|
||||
}else{
|
||||
|
||||
uni.showToast({
|
||||
title: '请选择身份',
|
||||
duration: 2000,
|
||||
icon:'error'
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
},
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
},
|
||||
confirm_id(id){
|
||||
this.id=id
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
//除了小程序
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.zhan{
|
||||
height: 160rpx;
|
||||
}
|
||||
.select_bg {
|
||||
height: 408rpx;
|
||||
position: relative;
|
||||
|
||||
.tips {
|
||||
position: absolute;
|
||||
bottom: 100rpx;
|
||||
left: 32rpx;
|
||||
|
||||
.selct_tips {
|
||||
color: $black;
|
||||
font-size: 48rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.select_sm_tips {
|
||||
margin-top: 16rpx;
|
||||
color: #868785;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.itm_id_contain {
|
||||
|
||||
padding: 32rpx;
|
||||
|
||||
.itm_id {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 180rpx;
|
||||
background-color: #FAFAFA;
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 36rpx;
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
|
||||
.gou {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.itm_id_selected {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 600;
|
||||
color: $red;
|
||||
background-color: #FBF0EF;
|
||||
border: 1px solid #99241B;
|
||||
height: 180rpx;
|
||||
padding: 24rpx;
|
||||
border-radius: 16rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
|
||||
.gou {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
|
||||
.next {
|
||||
width: calc(100% - 48rpx);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
background-color: #99241B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
border: none;
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 32rpx;
|
||||
|
||||
.backImg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
margin-right: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<template>
|
||||
<view class="page">
|
||||
<view class="pageTtitle">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
动态
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{'height':zwHeight+'px'}"></view>
|
||||
<view class="activity" v-for="(v,i) in num" :key="i">
|
||||
<view class="left">
|
||||
<view class="content">
|
||||
<view class="title">
|
||||
<text class="zd">置顶</text>
|
||||
送万福、进万家文艺惠民 暖人心嫁得好风扇电机接收到删掉就惊世毒妃
|
||||
</view>
|
||||
</view>
|
||||
<view class="clidate">
|
||||
<view class="cliNum">点击量:15万</view>
|
||||
<view class="date">2022-01-11</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<image src="../../static/icon12.jpg" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<tabbar tabbarId='2'></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
zwHeight: 0,
|
||||
num:4
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
this.zwHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
//除了微信小程序
|
||||
this.zwHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.zd {
|
||||
width: 30px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
margin-right: 4px;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
background: #F57369;
|
||||
color: #FFFFFF;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.page {
|
||||
padding:0 16px;
|
||||
padding-bottom:55px;
|
||||
.pageTtitle {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
padding: 0 16px;
|
||||
z-index: 999;
|
||||
box-sizing:border-box;
|
||||
.apptitle {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.activity {
|
||||
display: flex;
|
||||
padding-top:10px;
|
||||
padding-bottom:10px;
|
||||
border-bottom:1px solid #F5F5F5;
|
||||
&:last-of-type{
|
||||
border-bottom:none;
|
||||
}
|
||||
.left {
|
||||
flex: 1;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content:space-between;
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.clidate {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #8E8F9E;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
|
||||
image {
|
||||
width: 124px;
|
||||
height: 93px;
|
||||
border-radius:4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<view class="layout">
|
||||
<search></search>
|
||||
<view class="screen">
|
||||
<view class="date" @click="show = true">
|
||||
<text>{{dateTime}}</text>
|
||||
<u-icon name="arrow-down-fill" size="10" color="#007aff"></u-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 年月日 -->
|
||||
<u-datetime-picker ref="datetimePicker" :formatter="formatter" :show="show" v-model="defaultTime" mode="date"
|
||||
@confirm="confirmDate" @cancel="show = false" :closeOnClickOverlay="true" @close="show = false">
|
||||
</u-datetime-picker>
|
||||
<view class="shelves">
|
||||
<view class="shelves-item">
|
||||
<image src="../../static/icon12.jpg" mode="widthFix" class="shelves-img"></image>
|
||||
<view class="name">作品名称</view>
|
||||
</view>
|
||||
<view class="" style="width:16px;"></view>
|
||||
<view class="shelves-item">
|
||||
<image src="../../static/icon12.jpg" mode="widthFix" class="shelves-img"></image>
|
||||
<view class="name">作品名称</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import search from "@/components/search/search.vue"
|
||||
|
||||
export default {
|
||||
components: {
|
||||
search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dateTime: '',
|
||||
defaultTime: Number(new Date()),
|
||||
show: false,
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
let date = new Date()
|
||||
let Y = date.getFullYear()
|
||||
let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
|
||||
let D = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
|
||||
this.dateTime = Y + '-' + M + '-' + D
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序设置格式
|
||||
this.$refs.datetimePicker.setFormatter(this.formatter)
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
confirmDate(val) {
|
||||
let date = new Date(val.value)
|
||||
var Y = date.getFullYear()
|
||||
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
|
||||
const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
|
||||
this.dateTime = Y + '-' + M + '-' + D
|
||||
this.show = false
|
||||
},
|
||||
formatter(type, value) {
|
||||
if (type === 'year') {
|
||||
return `${value}年`
|
||||
}
|
||||
if (type === 'month') {
|
||||
return `${value}月`
|
||||
}
|
||||
if (type === 'day') {
|
||||
return `${value}日`
|
||||
}
|
||||
return value
|
||||
},
|
||||
},
|
||||
onLoad(option){
|
||||
console.log(option.id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.layout {
|
||||
padding: 8px 16px;
|
||||
|
||||
.screen {
|
||||
margin-top:12px;
|
||||
display: flex;
|
||||
.date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #007aff;
|
||||
padding: 2px 10px;
|
||||
border: 1px solid #007aff;
|
||||
border-radius: 24px;
|
||||
.text {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shelves {
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
|
||||
.shelves-item {
|
||||
width: 50%;
|
||||
margin-top: 16px;
|
||||
|
||||
.shelves-img {
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.name {
|
||||
font-weight: 800;
|
||||
font-size: 16px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,243 @@
|
|||
<template>
|
||||
<view class="famous_arts">
|
||||
<view class="ding">
|
||||
<view class="top">
|
||||
|
||||
<view class="left">
|
||||
<view class="avator">
|
||||
<image src="../../static/MoneyIco.png"></image>
|
||||
</view>
|
||||
<view class="people">
|
||||
<view class="art_name">
|
||||
吕茂盛
|
||||
</view>
|
||||
<view class="aer_Staff">
|
||||
书法家
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="talk" @click="goTalk">
|
||||
<image class="concat_ico" src="../../static/FamousArts/Talk.png" mode=""></image>
|
||||
发起聊天
|
||||
</view>
|
||||
</view>
|
||||
<!-- tabs -->
|
||||
<u-tabs @click="clickTab" :scrollable="false" :list="list1" :activeStyle="{
|
||||
color: '#251B1D',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.05)'
|
||||
}" :inactiveStyle="{
|
||||
color: '#AFADB0 ',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle=" height: 50px; ">
|
||||
</u-tabs>
|
||||
<!-- tabs ed -->
|
||||
</view>
|
||||
|
||||
<view class="famous_bot" v-show="id=='1'">
|
||||
<view class="famous_bot_itm" v-for="(v,i) in 5" :key="i">
|
||||
<view class="ico">
|
||||
<image src="../../static/FamousArts/redStart.png"></image>
|
||||
</view>
|
||||
<view class="con">
|
||||
中国书法作家协会
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="famous_bot" v-show="id=='2'">
|
||||
<view class="famous_bot_itm" v-for="(v,i) in 5" :key="i">
|
||||
<view class="ico" style="padding-right: 8rpx;">
|
||||
<image style="width: 32rpx; height: 32rpx; vertical-align: bottom;"
|
||||
src="../../static/FamousArts/goldCup.png"></image>
|
||||
</view>
|
||||
<view class="con" style="line-height: 50rpx;">
|
||||
省文联主办的“与党同心庆祝十八大——全党党 外知识分子书画摄影作品展”获优秀作品奖
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="famous_bot" style="" v-show="id=='3'">
|
||||
<view class="famous_bot_itm" style="display: block;" v-for="(v,i) in 5" :key="i">
|
||||
<view class="works">
|
||||
<image src="../../static/maqian.png" mode=""></image>
|
||||
</view>
|
||||
<view class="works_name">
|
||||
司马迁书信
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
id: "3",
|
||||
list1: [{
|
||||
name: '艺术成就',
|
||||
id: '1'
|
||||
}, {
|
||||
name: '荣誉奖项',
|
||||
id: '2'
|
||||
}, {
|
||||
name: '代表作',
|
||||
id: '3'
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
clickTab(itm) {
|
||||
this.id = itm.id
|
||||
},
|
||||
goTalk(){
|
||||
uni.showToast({
|
||||
title:"发起聊天"
|
||||
})
|
||||
}
|
||||
},
|
||||
onLoad(option) {
|
||||
console.log(option.id);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/deep/ .u-tabs__wrapper__nav__item__text {
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
/deep/ .u-tabs__wrapper__nav__line {
|
||||
height: 14px !important;
|
||||
width: 40px !important;
|
||||
background-image: url(../../static/scrollLine.png);
|
||||
background-color: transparent !important;
|
||||
bottom: 2px !important;
|
||||
}
|
||||
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.ding {
|
||||
background-color: #FFFFFF;
|
||||
border: 1px solid transparnt;
|
||||
padding: 32rpx;
|
||||
|
||||
.top {
|
||||
border: 1px solid transparnt;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 32px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.avator {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.people {
|
||||
margin-left: 16rpx;
|
||||
|
||||
.art_name {
|
||||
font-weight: 600;
|
||||
color: #000000;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.aer_Staff {
|
||||
margin-top: 16rpx;
|
||||
color: #000000;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.talk {
|
||||
border: 1px solid #99241B;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
border-radius: 10rpx;
|
||||
color: #99241B;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.concat_ico {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.famous_bot {
|
||||
padding: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #FFFFFF;
|
||||
width: calc(100% - 64rpx);
|
||||
margin: 24rpx 32rpx 0 32rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.famous_bot_itm {
|
||||
display: flex;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.ico {
|
||||
width: 24rpx;
|
||||
height: 24rpx;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
.con {
|
||||
margin-left: 8rpx;
|
||||
color: $black;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.works {
|
||||
height: 380rpx;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.works_name {
|
||||
font-size: 32rpx;
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
margin: 32rpx 0rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,519 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<view class="search_box">
|
||||
|
||||
<u-search height=42 margin="12px 0" searchIconColor="black" bgColor="#f8f8f8" searchIconSize="40rpx"
|
||||
shape="square" :showAction="false" v-model="dataVal" placeholder="请输入资料名称"></u-search>
|
||||
<view class="car_box " @click="isSelect=false">
|
||||
<view class="dd" v-if="isSelect">
|
||||
<image src="../../static/DataSearch/chexboxs.png" mode=""></image>
|
||||
<text style="font-size: 20rpx;">选择</text>
|
||||
</view>
|
||||
<view class="dd" v-if="!isSelect" @click="moreSelected">
|
||||
|
||||
<checkbox-group @change="allChoose">
|
||||
<label class="wr" style="display: flex; flex-direction: column;align-items: center; justify-content: space-around;">
|
||||
<checkbox value="all" :checked="allChecked?true:false" />
|
||||
<text style="font-size: 15rpx;margin-top: 8rpx;">全选</text>
|
||||
</label>
|
||||
</checkbox-group>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<checkbox-group @change="changeCheckbox">
|
||||
<view class="itm" v-for="(item,index) in checkboxData" :key="item.value">
|
||||
<view class="fileImg">
|
||||
<image src="../../static/DataSearch/musicImg.png" mode=""></image>
|
||||
</view>
|
||||
<view class="data_detail_box">
|
||||
|
||||
<view class="file_title">
|
||||
<!-- 资料查找 -->
|
||||
{{item.label}}
|
||||
</view>
|
||||
<view class="file_time">
|
||||
2021-12-18 17:08 220KB
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="moreImg" v-if="isSelect" @click="delFile(index)">
|
||||
<image src="../../static/DataSearch/dirDel.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
<view class="moreImg" style="width: 32rpx;height: 32rpx;" v-if="!isSelect">
|
||||
|
||||
<label class="wr">
|
||||
<checkbox :value="String(item.value)" :checked="checkedArr.includes(String(item.value))" />
|
||||
</label>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</checkbox-group>
|
||||
|
||||
|
||||
<!-- 底部对文件的操作栏 -->
|
||||
<view class="bottom_tab" v-if="!isSelect">
|
||||
|
||||
<view class="bottom_wx" v-if="checkedArr.length > 0 ? false: true">
|
||||
<view class="bottom_tab_itm">
|
||||
<view class="bottom_tab_itm_img">
|
||||
<image src="../../static/DataSearch/dowm.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bottom_tab_itm_txt">
|
||||
下载
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bottom_tab_itm">
|
||||
<view class="bottom_tab_itm_img">
|
||||
<image src="../../static/DataSearch/share.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bottom_tab_itm_txt">
|
||||
分享
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom_tab_itm">
|
||||
<view class="bottom_tab_itm_img">
|
||||
<image src="../../static/DataSearch/Delet.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bottom_tab_itm_txt">
|
||||
删除
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bottom_yx" v-if="checkedArr.length > 0">
|
||||
<view class="bottom_tab_itm">
|
||||
<view class="bottom_tab_itm_img">
|
||||
<image src="../../static/DataSearch/dowmSelected.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bottom_tab_itm_txt">
|
||||
下载
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bottom_tab_itm">
|
||||
<view class="bottom_tab_itm_img">
|
||||
<image src="../../static/DataSearch/shareSelected.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bottom_tab_itm_txt">
|
||||
分享
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="bottom_tab_itm">
|
||||
<view class="bottom_tab_itm_img">
|
||||
<image src="../../static/DataSearch/Deletselected.png" mode=""></image>
|
||||
</view>
|
||||
<view class="bottom_tab_itm_txt">
|
||||
删除
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部对文件的操作栏 ed -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="bottm" @click="zhanKai">
|
||||
<image src="../../static/DataSearch/zhanKai.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
<!-- 弹出框 加号的弹出框-->
|
||||
|
||||
<u-popup :show="show" closeOnClickOverlay @close="() => show = false" @open="open" round=5>
|
||||
<view class="tan_con">
|
||||
<view class="tit">
|
||||
上传文件
|
||||
</view>
|
||||
<view class="up_itm_box">
|
||||
|
||||
<view class="img_itm">
|
||||
<view class="img">
|
||||
<image src="../../static/DataSearch/UploadImg.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Up_tit">
|
||||
上传图片
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="img_itm">
|
||||
<view class="img">
|
||||
<image src="../../static/DataSearch/uploadDoc.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Up_tit">
|
||||
上传文档
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="img_itm">
|
||||
<view class="img">
|
||||
<image src="../../static/DataSearch/UploadVideo.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Up_tit">
|
||||
上传视频
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="img_itm">
|
||||
<view class="img">
|
||||
<image src="../../static/DataSearch/UploadMusic.png" mode=""></image>
|
||||
</view>
|
||||
<view class="Up_tit">
|
||||
上传音频
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
<!-- 弹出框 底部 加号的弹出框 ed-->
|
||||
<!-- 删除 标 删除文件 的弹出确认删除 -->
|
||||
<u-modal width="550rpx" confirmText="确认删除" confirmColor='#E34D59' :show="showModel" showCancelButton
|
||||
@confirm="fileOprModelConfirm" @cancel="() => showModel = false">
|
||||
<text style="font-size: 32rpx; font-weight: 600;color: #251B1D;margin: 25rpx 0;">确认删除文件</text>
|
||||
</u-modal>
|
||||
|
||||
<!-- 三个点ed -->
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tempNum: '',
|
||||
dataVal: "",
|
||||
isSelect: true,
|
||||
show: false,
|
||||
showModel: false,
|
||||
allSelect: true,
|
||||
checkboxData: [{
|
||||
'value': 0,
|
||||
'label': '选项一'
|
||||
},
|
||||
{
|
||||
'value': 1,
|
||||
'label': '选项二'
|
||||
},
|
||||
{
|
||||
'value': 2,
|
||||
'label': '选项三'
|
||||
},
|
||||
{
|
||||
'value': 3,
|
||||
'label': '选项四'
|
||||
},
|
||||
{
|
||||
'value': 4,
|
||||
'label': '选项五'
|
||||
},
|
||||
{
|
||||
'value': 5,
|
||||
'label': '选项六'
|
||||
},
|
||||
{
|
||||
'value': 6,
|
||||
'label': '选项七'
|
||||
},
|
||||
{
|
||||
'value': 7,
|
||||
'label': '选项八'
|
||||
},
|
||||
{
|
||||
'value': 8,
|
||||
'label': '选项九'
|
||||
},
|
||||
{
|
||||
'value': 9,
|
||||
'label': '选项十'
|
||||
}
|
||||
],
|
||||
allChecked: false,
|
||||
checkedArr: [], //复选框选中的值
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
delFile(index) {
|
||||
console.log(index);
|
||||
this.tempNum = Number(index)
|
||||
this.showModel = true
|
||||
|
||||
|
||||
},
|
||||
fileOprModelConfirm() {
|
||||
this.showModel = false;
|
||||
var num = this.tempNum
|
||||
this.checkboxData.splice(num, 1)
|
||||
},
|
||||
zhanKai() {
|
||||
console.log("展开");
|
||||
// this.allChecked=false
|
||||
this.isSelect = true
|
||||
this.show = true
|
||||
this.checkedArr = []
|
||||
this.allChecked = false
|
||||
},
|
||||
moreSelected() {
|
||||
this.allSelect = !this.allSelect
|
||||
},
|
||||
checkboxChange(e) {
|
||||
console.log(e.detail.value);
|
||||
|
||||
},
|
||||
// 多选复选框改变事件
|
||||
changeCheckbox(e) {
|
||||
this.checkedArr = e.detail.value;
|
||||
// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
|
||||
if (this.checkedArr.length > 0 && this.checkedArr.length == this.checkboxData.length) {
|
||||
this.allChecked = true;
|
||||
} else {
|
||||
this.allChecked = false;
|
||||
}
|
||||
},
|
||||
// 全选事件
|
||||
allChoose(e) {
|
||||
let chooseItem = e.detail.value;
|
||||
// 全选
|
||||
if (chooseItem[0] == 'all') {
|
||||
this.allChecked = true;
|
||||
for (let item of this.checkboxData) {
|
||||
let itemVal = String(item.value);
|
||||
if (!this.checkedArr.includes(itemVal)) {
|
||||
this.checkedArr.push(itemVal);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 取消全选
|
||||
this.allChecked = false;
|
||||
this.checkedArr = [];
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
onLoad(opt) {
|
||||
console.log(opt.id);
|
||||
},
|
||||
options: {
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.wr {
|
||||
/deep/ .uni-checkbox-input {
|
||||
border-radius: 50% !important;
|
||||
color: #4CD964 !important;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
|
||||
}
|
||||
checkbox{
|
||||
border-radius: 50% !important;
|
||||
color: #4CD964 !important;
|
||||
width: 32rpx!important;
|
||||
height: 32rpx!important;
|
||||
|
||||
}
|
||||
}
|
||||
/* #ifdef MP-WEIXIN */
|
||||
checkbox .wx-checkbox-input {
|
||||
border-radius: 50% !important;
|
||||
color: #ffffff !important;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
}
|
||||
|
||||
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
color: #fff;
|
||||
background: #4CD964;
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
|
||||
}
|
||||
|
||||
/* .wx-checkbox-input.wx-checkbox-input-checked {
|
||||
border: none !important;
|
||||
} */
|
||||
|
||||
/* #endif*/
|
||||
|
||||
|
||||
/deep/ .uni-checkbox-input-checked::before {
|
||||
background-color: #4CD964!important ;
|
||||
color: #FFFFFF!important;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.search_box {
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.car_box {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-left: 24rpx;
|
||||
|
||||
.dd {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.itm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 48rpx;
|
||||
height: 140rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.fileImg {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.data_detail_box {
|
||||
flex: 1;
|
||||
|
||||
.file_title {
|
||||
color: $black;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.file_time {
|
||||
color: $gray;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.moreImg {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_tab {
|
||||
height: 170rpx;
|
||||
// border: 1px solid red;
|
||||
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
|
||||
.bottom_wx {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
color: #AFADB0;
|
||||
background-color: #F7F7F7;
|
||||
height: 170rpx;
|
||||
|
||||
.bottom_tab_itm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bottom_tab_itm_img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_yx {
|
||||
color: $black;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #F7F7F7;
|
||||
height: 170rpx;
|
||||
|
||||
.bottom_tab_itm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.bottom_tab_itm_img {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.tan_con {
|
||||
padding: 32rpx;
|
||||
|
||||
.tit {
|
||||
font-size: 32rpx;
|
||||
color: #251B1D;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.up_itm_box {
|
||||
margin: 50rpx;
|
||||
padding: 32rpx;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
.img_itm {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.img {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.Up_tit {
|
||||
font-size: 12px;
|
||||
color: #251B1D;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.bottm {
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
width: 96rpx;
|
||||
height: 96rpx;
|
||||
position: fixed;
|
||||
bottom: 160rpx;
|
||||
right: 32rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,429 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<u--form :model="model1" ref="form1">
|
||||
|
||||
<!-- 完善资料 -->
|
||||
<!-- 这里加了 v-for 导致 ref 失效 -->
|
||||
<view class="data_itm_box" >
|
||||
|
||||
<u-form-item prop="userInfo.name" ref="item1" class="data_itm">
|
||||
<text class="label_t">姓名</text>
|
||||
<u--input style="padding: 32rpx;" placeholder="请填写姓名" inputAlign="right" clearable
|
||||
v-model="model1.userInfo.name" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item prop="userInfo.sex" ref="item1" @click="showSex=true" class="data_itm">
|
||||
<text class="label_t">性别</text>
|
||||
<u--input style="padding: 32rpx;" placeholder="请填选择性别" v-model="model1.userInfo.sex" readonly
|
||||
inputAlign="right" border="none">
|
||||
<u-icon slot="suffix" name="arrow-right"></u-icon>
|
||||
</u--input>
|
||||
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item ref="item1" @click="showBirthday=true" class="data_itm">
|
||||
<text class="label_t">出生日期</text>
|
||||
<u--input style="padding: 32rpx;" placeholder="请填选择出生日期" v-model="model1.userInfo.birthday" readonly
|
||||
inputAlign="right" border="none">
|
||||
<u-icon slot="suffix" name="calendar"></u-icon>
|
||||
</u--input>
|
||||
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item prop="userInfo.idCOde" ref="item1" class="data_itm">
|
||||
<text class="label_t">身份证号</text>
|
||||
<u--input style="padding: 32rpx;" placeholder="请输入身份证号码" inputAlign="right" clearable
|
||||
v-model="model1.userInfo.idCOde" border="none"></u--input>
|
||||
</u-form-item>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="data_itm_box">
|
||||
|
||||
|
||||
|
||||
<u-form-item ref="item1" @click="zuShow=true" class="data_itm">
|
||||
<text class="label_t">民族</text>
|
||||
<u--input style="padding: 32rpx;" placeholder="请选择民族" v-model="zuValue" readonly inputAlign="right"
|
||||
border="none">
|
||||
<u-icon slot="suffix" name="arrow-right"></u-icon>
|
||||
</u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item ref="item1" @click="jigaunShow=true" class="data_itm">
|
||||
<text class="label_t">籍贯</text>
|
||||
<u--input style="padding: 32rpx;" placeholder="请选择籍贯" v-model="jiguan" readonly inputAlign="right"
|
||||
border="none">
|
||||
<u-icon slot="suffix" name="arrow-right"></u-icon>
|
||||
</u--input>
|
||||
</u-form-item>
|
||||
|
||||
<u-form-item ref="item1" @click="zhengzhiShow=true" class="data_itm">
|
||||
<text class="label_t">政治面貌</text>
|
||||
<u--input style="padding: 32rpx;" placeholder="请选择政治面貌" v-model="zhengzhiValue" readonly
|
||||
inputAlign="right" border="none">
|
||||
<u-icon slot="suffix" name="arrow-right"></u-icon>
|
||||
</u--input>
|
||||
</u-form-item>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="data_itm_box">
|
||||
<u-form-item prop="userInfo.phoneNum" ref="item1" class="data_itm">
|
||||
<text class="label_t">联系电话</text>
|
||||
<u--input style="padding: 32rpx;" placeholder="请输入联系电话" inputAlign="right" clearable
|
||||
v-model="model1.userInfo.phoneNum" border="none"></u--input>
|
||||
</u-form-item>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="data_itm_box">
|
||||
|
||||
|
||||
|
||||
<view class="data_itm">
|
||||
<view class="data_itm_key label_t">
|
||||
照片上传
|
||||
</view>
|
||||
</view>
|
||||
<u-upload class="upload" accept="image" width="172rpx" height="172rpx" :fileList="fileList3"
|
||||
@afterRead="afterRead" @delete="deletePic" name="3" multiple :maxCount="2">
|
||||
<image style="width: 172rpx;height: 172rpx;" src="../../static/improveData/jia.png"></image>
|
||||
</u-upload>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<view class="operation">
|
||||
<button type="default" class="next" @click="submit">登录</button>
|
||||
</view>
|
||||
|
||||
</u--form>
|
||||
<!-- form ed -->
|
||||
<!-- 性别弹框区 -->
|
||||
<u-popup :show="showSex" @close="close" @open="open" closeOnClickOverlay :round="5"
|
||||
customStyle="padding: 16px;">
|
||||
<u-radio-group @change="selectForm" v-model="radiovalue7" :borderBottom="true" placement="column"
|
||||
iconPlacement="right">
|
||||
<u-radio :customStyle="{marginBottom: '16px' }" v-for="(item, index) in radiolist7" :key="index+100*2"
|
||||
:label="item.name" labelSize="28rpx" labelColor="#231F1C" :name="item.name" activeColor="#99241B ">
|
||||
</u-radio>
|
||||
<u-button class="custom-style" style="background-color:#99241B ; color: #FFFFFF; margin-top: 32rpx;"
|
||||
type="default" @click="showSex=false">确认</u-button>
|
||||
</u-radio-group>
|
||||
</u-popup>
|
||||
<!-- 弹框区 ed -->
|
||||
<!-- 日期选择器 -->
|
||||
<u-datetime-picker confirmColor="#99241B" :minDate="-2207520000000" :show="showBirthday"
|
||||
:value="model1.userInfo.birthday" mode="date" closeOnClickOverlay @confirm="birthdayConfirm"
|
||||
@cancel="birthdayClose" @close="birthdayClose"></u-datetime-picker>
|
||||
<!-- 日期选择器ed -->
|
||||
<!-- 民族选择器 -->
|
||||
<u-picker :show="zuShow" confirmColor="#99241B" @change="selctZU" @confirm="confimZu" immediateChange
|
||||
:columns="Zucolumns"></u-picker>
|
||||
<!-- 民族选择器 ed-->
|
||||
<!-- 政治面貌选择器 -->
|
||||
<u-picker :show="zhengzhiShow" confirmColor="#99241B" @change="selctZU" @confirm="confimZheng" immediateChange
|
||||
:columns="Zhengcolumns"></u-picker>
|
||||
<!-- 政治面貌选择器 ed-->
|
||||
|
||||
<!-- 籍贯面貌选择器 -->
|
||||
<u-picker :show="jigaunShow" confirmColor="#99241B" @change="selctJi" @confirm="confimJi" immediateChange
|
||||
:columns="Jicolumns"></u-picker>
|
||||
<!-- 籍贯面貌选择器 ed-->
|
||||
<view class="zhan_w">
|
||||
<!-- zhanwei -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
zhengzhiShow: false,
|
||||
zhengzhiValue: '',
|
||||
zuValue: "",
|
||||
zuShow: false,
|
||||
Zucolumns: [
|
||||
["汉族", "朝鲜族"],
|
||||
],
|
||||
Zhengcolumns: [
|
||||
["群众", "党员", '共青团员'],
|
||||
],
|
||||
|
||||
Jicolumns: [
|
||||
["河南", "浙江", '上海'],
|
||||
],
|
||||
|
||||
fileList3: [],
|
||||
|
||||
jiguan: '',
|
||||
jigaunShow: false,
|
||||
showBirthday: false,
|
||||
sex: '',
|
||||
showSex: false,
|
||||
radiovalue7: '',
|
||||
radiolist7: [{
|
||||
name: '男'
|
||||
}, {
|
||||
name: '女'
|
||||
}],
|
||||
model1: {
|
||||
userInfo: {
|
||||
name: '',
|
||||
sex: '',
|
||||
birthday: "",
|
||||
idCOde: '',
|
||||
zuValue: '',
|
||||
zhengzhiValue: '',
|
||||
phoneNum: '',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
'userInfo.name': [{
|
||||
type: 'string',
|
||||
required: true,
|
||||
message: '请填写姓名',
|
||||
trigger: ['blur', 'change']
|
||||
}, {
|
||||
// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
|
||||
validator: (rule, value, callback) => {
|
||||
// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
|
||||
return uni.$u.test.chinese(value);
|
||||
},
|
||||
message: "姓名必须为中文",
|
||||
// 触发器可以同时用blur和change，二者之间用英文逗号隔开
|
||||
trigger: ["change", "blur"],
|
||||
}],
|
||||
'userInfo.sex': {
|
||||
type: 'string',
|
||||
max: 1,
|
||||
required: true,
|
||||
message: '请选择男或女',
|
||||
trigger: ['blur', 'change']
|
||||
},
|
||||
'userInfo.idCOde': [{
|
||||
required: true,
|
||||
message: '请输入身份证号号',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
{
|
||||
// 自定义验证函数，见上说明
|
||||
validator: (rule, value, callback) => {
|
||||
return uni.$u.test.idCard(value);
|
||||
},
|
||||
message: '身份证号码格式不正确',
|
||||
|
||||
trigger: ['change', 'blur'],
|
||||
}
|
||||
],
|
||||
"userInfo.phoneNum": [{
|
||||
required: true,
|
||||
message: '请输入联系电话',
|
||||
trigger: ['change', 'blur'],
|
||||
},
|
||||
{
|
||||
|
||||
validator: (rule, value, callback) => {
|
||||
return uni.$u.test.mobile(value);
|
||||
},
|
||||
message: '手机号码不正确',
|
||||
trigger: ['change', 'blur'],
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
},onLoad(option) {
|
||||
console.log(option.id);
|
||||
},
|
||||
|
||||
onReady() {
|
||||
|
||||
this.$refs.form1.setRules(this.rules);
|
||||
},
|
||||
|
||||
methods: {
|
||||
sexSelect(e) {
|
||||
this.model1.userInfo.sex = e.name
|
||||
// this.$refs.form1.validateField('userInfo.sex')
|
||||
},
|
||||
selectForm(sex) {
|
||||
|
||||
this.model1.userInfo.sex = sex
|
||||
},
|
||||
birthdayConfirm(e) {
|
||||
this.showBirthday = false
|
||||
this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
||||
// this.$refs.form1.validateField('userInfo.birthday')
|
||||
},
|
||||
birthdayClose() {
|
||||
this.showBirthday = false
|
||||
// this.$refs.form1.validateField('userInfo.birthday')
|
||||
},
|
||||
selctZU(e) {
|
||||
console.log(e);
|
||||
},
|
||||
selctJi(e) {
|
||||
console.log(e);
|
||||
},
|
||||
confimZu(e) {
|
||||
this.zuShow = false
|
||||
this.zuValue = e.value[0]
|
||||
// console.log(e.value[0]);
|
||||
},
|
||||
confimZheng(e) {
|
||||
this.zhengzhiShow = false
|
||||
this.zhengzhiValue = e.value[0]
|
||||
},
|
||||
confimJi(e) {
|
||||
this.jigaunShow = false
|
||||
this.jiguan = e.value[0]
|
||||
},
|
||||
// 删除图片
|
||||
deletePic(event) {
|
||||
this[`fileList${event.name}`].splice(event.index, 1)
|
||||
},
|
||||
// 新增图片
|
||||
async afterRead(event) {
|
||||
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
|
||||
let lists = [].concat(event.file)
|
||||
let fileListLen = this[`fileList${event.name}`].length
|
||||
lists.map((item) => {
|
||||
this[`fileList${event.name}`].push({
|
||||
...item,
|
||||
status: 'uploading',
|
||||
message: '上传中'
|
||||
})
|
||||
})
|
||||
for (let i = 0; i < lists.length; i++) {
|
||||
const result = await this.uploadFilePromise(lists[i].url)
|
||||
let item = this[`fileList${event.name}`][fileListLen]
|
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
||||
status: 'success',
|
||||
message: '',
|
||||
url: result
|
||||
}))
|
||||
fileListLen++
|
||||
}
|
||||
},
|
||||
uploadFilePromise(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
let a = uni.uploadFile({
|
||||
url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
||||
filePath: url,
|
||||
name: 'file',
|
||||
formData: {
|
||||
user: 'test'
|
||||
},
|
||||
success: (res) => {
|
||||
setTimeout(() => {
|
||||
resolve(res.data.data)
|
||||
}, 1000)
|
||||
}
|
||||
});
|
||||
})
|
||||
},
|
||||
submit() {
|
||||
this.$refs.form1.validate().then(res => {
|
||||
uni.$u.toast('Thanks your helping')
|
||||
}).catch(errors => {
|
||||
uni.$u.toast('您的资料还未补充完整')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload {
|
||||
padding-top: 32rpx;
|
||||
}
|
||||
|
||||
.data_itm_box {
|
||||
margin-bottom: 16rpx;
|
||||
border: 1px solid transparent;
|
||||
padding: 0 32rpx;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.data_itm {
|
||||
.label_t {
|
||||
font-size: 28rpx;
|
||||
color: $black;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.upload_box {
|
||||
width: 166rpx;
|
||||
height: 166rpx;
|
||||
margin-left: 32rpx;
|
||||
position: relative;
|
||||
background-color: #F8F8F8;
|
||||
margin-bottom: 64rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.operation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 32rpx 32rpx 48rpx;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0px -4px 10px 1px rgba(192, 192, 192, 0.12);
|
||||
z-index: 99;
|
||||
|
||||
.next {
|
||||
width: calc(100% - 48rpx);
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
background-color: #99241B;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
|
||||
border: none;
|
||||
|
||||
button {
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.zhan_w {
|
||||
height: 160rpx;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<view class="content">
|
||||
<u-button type="primary" text="确定"></u-button>
|
||||
<tabbar tabbarId='3'></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: 'Hello'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin: 200rpx auto 50rpx auto;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,248 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="navbar" v-show="opCalue>0" :style="{'opacity':opCalue}">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/blackArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
<view class="barLabel">
|
||||
文艺之家
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<u-swiper :list="list" indicator indicatorMode="dot" circular height="240"></u-swiper>
|
||||
<view class="layout">
|
||||
<view class="activityColumn">
|
||||
<view class="banEle">
|
||||
<view class="title">
|
||||
文创展厅
|
||||
</view>
|
||||
<text class="more">
|
||||
更多
|
||||
</text>
|
||||
</view>
|
||||
<u-scroll-list :indicator="false">
|
||||
<view class="scroll-list">
|
||||
<view class="scroll-list__goods-item" v-for="(item, index) in list2" :key="index"
|
||||
:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']" @click="GoWorksShow(index)">
|
||||
<image class="scroll-list__goods-item__image" :src="item.image"></image>
|
||||
<view class="scroll-list__goods-item__view overEllipsis">{{ item.title }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
<view class="activityColumn">
|
||||
<view class="banEle">
|
||||
<view class="title">
|
||||
活动剪影
|
||||
</view>
|
||||
<!-- <text class="more">
|
||||
更多
|
||||
</text> -->
|
||||
</view>
|
||||
<view class="activity" v-for="(v,i) in num" :key="i">
|
||||
<view class="left">
|
||||
<view class="content">
|
||||
<view class="title">
|
||||
送万福、进万家文艺惠民 暖人心嫁得好风扇电机接收到删掉就惊世毒妃
|
||||
</view>
|
||||
</view>
|
||||
<view class="clidate">
|
||||
<view class="cliNum">点击量:15万</view>
|
||||
<view class="date">2022-01-11</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<image src="../../static/icon12.jpg" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
opCalue:0,
|
||||
list: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png'
|
||||
],
|
||||
list2: [{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
title: '艺起战疫获奖作品展示',
|
||||
}, {
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
title: '嘉禾'
|
||||
}],
|
||||
num: 4
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
back(){
|
||||
uni.navigateBack()
|
||||
},
|
||||
GoWorksShow(id){
|
||||
uni.navigateTo({
|
||||
url:"/pages/AwardWinningWork/AwardWinningWork?id="+String(id)
|
||||
})
|
||||
}
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let scrollTop = e.scrollTop
|
||||
this.opCalue = (scrollTop - 60) / 100
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
this.zwHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
.backImg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.barLabel {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout {
|
||||
padding: 0 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.activityColumn {
|
||||
margin-top: 20px;
|
||||
|
||||
.banEle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.more {
|
||||
font-size: 12px;
|
||||
color: #AFADB0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-scroll-list {
|
||||
padding-bottom: 0 !important;
|
||||
|
||||
.scroll-list {
|
||||
display: flex;
|
||||
|
||||
&__goods-item {
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
&__image {
|
||||
width: 200px;
|
||||
height: 139px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__view {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
color: #FFFFFF;
|
||||
border-radius: 0px 0px 8px 8px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.activity {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.clidate {
|
||||
margin-top: 6px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: #8E8F9E;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
|
||||
image {
|
||||
width: 124px;
|
||||
height: 93px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,228 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="navbar" :style="{'opacity':opCalue}">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/blackArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
<view class="barLabel">
|
||||
{{pageTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liter">
|
||||
<view class="abnavbar">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/leftArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
<view class="barLabel">
|
||||
{{pageTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image src="../../static/help/helpBg.png" mode="" class="helpBg"></image>
|
||||
<view class="group" :style="{'top':topHeight+'px'}">
|
||||
<view class="group-item" v-for="(v,i) in list">
|
||||
<image :src="v.imgUrl" mode="" class="itemImg"></image>
|
||||
<view class="word">
|
||||
<view class="title">
|
||||
{{v.title}}
|
||||
</view>
|
||||
<view class="remark">
|
||||
{{v.remark}}
|
||||
</view>
|
||||
</view>
|
||||
<image src="../../static/rightArrow.png" mode="" class="rightArrow"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
topHeight: 0,
|
||||
opCalue:0,
|
||||
pageTitle:"文艺援助",
|
||||
list: [{
|
||||
id: 1,
|
||||
imgUrl: '../../static/help/help1.png',
|
||||
title: '文艺维权',
|
||||
remark: '文艺维权'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgUrl: '../../static/help/help5.png',
|
||||
title: '就业创业',
|
||||
remark: '就业创业'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imgUrl: '../../static/help/help2.png',
|
||||
title: '职称评审',
|
||||
remark: '职称评审'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imgUrl: '../../static/help/help4.png',
|
||||
title: '艺术考级',
|
||||
remark: '艺术考级'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
imgUrl: '../../static/help/help3.png',
|
||||
title: '会员培训',
|
||||
remark: '会员培训'
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let scrollTop = e.scrollTop
|
||||
console.log(scrollTop)
|
||||
this.opCalue = (scrollTop - 20) / 40
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
//除了小程序
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
},
|
||||
methods:{
|
||||
back(){
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
.backImg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.barLabel {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.liter {
|
||||
position: relative;
|
||||
.abnavbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
.backImg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.barLabel {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helpBg {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.group {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
.group-item {
|
||||
margin-top: 12px;
|
||||
padding:24px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
|
||||
.itemImg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.word {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
|
||||
.title {
|
||||
color: #2E3221;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.remark {
|
||||
margin-top: 8px;
|
||||
color: #AFADB0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.rightArrow {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="navbar" :style="{'opacity':opCalue}">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/blackArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
<view class="barLabel">
|
||||
{{pageTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="liter">
|
||||
<view class="abnavbar">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/leftArrow.png" mode="" class="backImg" @click="back"></image>
|
||||
<view class="barLabel">
|
||||
{{pageTitle}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image src="../../static/help/helpBg.png" mode="" class="helpBg"></image>
|
||||
<view class="group" :style="{'top':topHeight+'px'}">
|
||||
<view class="group-item">
|
||||
<view class="codeTitle">公众号链接/二维码</view>
|
||||
<view class="codeImg">
|
||||
<view class="codeEle">
|
||||
<image src="../../static/icon12.jpg" mode="" class="code"></image>
|
||||
</view>
|
||||
<view class="remark">
|
||||
识别二维码跳转至公众号
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group-item">
|
||||
<view class="codeTitle">自媒体链接/二维码</view>
|
||||
<view class="codeImg">
|
||||
<view class="codeEle">
|
||||
<image src="../../static/icon12.jpg" mode="" class="code"></image>
|
||||
</view>
|
||||
<view class="remark">
|
||||
识别二维码跳转至自媒体
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
topHeight: 0,
|
||||
opCalue: 0,
|
||||
pageTitle: "媒体宣传",
|
||||
list: [{
|
||||
id: 1,
|
||||
imgUrl: '../../static/help/help1.png',
|
||||
title: '文艺维权',
|
||||
remark: '文艺维权'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgUrl: '../../static/help/help5.png',
|
||||
title: '就业创业',
|
||||
remark: '就业创业'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imgUrl: '../../static/help/help2.png',
|
||||
title: '职称评审',
|
||||
remark: '职称评审'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imgUrl: '../../static/help/help4.png',
|
||||
title: '艺术考级',
|
||||
remark: '艺术考级'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
imgUrl: '../../static/help/help3.png',
|
||||
title: '会员培训',
|
||||
remark: '会员培训'
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
let scrollTop = e.scrollTop
|
||||
// console.log(scrollTop)
|
||||
this.opCalue = (scrollTop - 20) / 40
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
//除了小程序
|
||||
this.topHeight = this.statusHeight + this.titleHeight
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
back() {
|
||||
uni.navigateBack()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
box-sizing: border-box;
|
||||
background-color: #FFFFFF;
|
||||
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
.backImg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.barLabel {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.liter {
|
||||
position: relative;
|
||||
|
||||
.abnavbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
|
||||
.backImg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.barLabel {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helpBg {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.group {
|
||||
padding: 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
|
||||
.group-item {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
.codeTitle {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px dashed #DBDBDB;
|
||||
}
|
||||
|
||||
.codeImg {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
|
||||
.codeEle {
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
background: #f6f6f6;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px 2px 2px 2px;
|
||||
padding: 6px;
|
||||
|
||||
.code {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.remark {
|
||||
font-size: 14px;
|
||||
color: #AFADB0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="fun">
|
||||
<view class="fun-Item" v-for="(v,i) in list" :key="i" @click="SwitchPage(i)">
|
||||
|
||||
<image :src="v.imgUrl" mode=""></image>
|
||||
<view class="label">{{v.label}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
imgUrl: '../../static/moreFun/moreFun5.png',
|
||||
label: '文艺活动'
|
||||
},
|
||||
{
|
||||
imgUrl: '../../static/moreFun/moreFun6.png',
|
||||
label: '积分使用'
|
||||
},
|
||||
{
|
||||
imgUrl: '../../static/moreFun/moreFun7.png',
|
||||
label: '文艺商城'
|
||||
},
|
||||
{
|
||||
imgUrl: '../../static/moreFun/moreFun8.png',
|
||||
label: '文艺之家'
|
||||
},
|
||||
{
|
||||
imgUrl: '../../static/moreFun/moreFun9.png',
|
||||
label: '文艺援助'
|
||||
},
|
||||
{
|
||||
imgUrl: '../../static/moreFun/moreFun1.png',
|
||||
label: '媒体宣传'
|
||||
},
|
||||
{
|
||||
imgUrl: '../../static/moreFun/moreFun3.png',
|
||||
label: '机构设置'
|
||||
},
|
||||
{
|
||||
imgUrl: '../../static/moreFun/moreFun4.png',
|
||||
label: '资料查找'
|
||||
},
|
||||
{
|
||||
imgUrl: '../../static/moreFun/moreFun2.png',
|
||||
label: '驾驶舱'
|
||||
}, {
|
||||
imgUrl: '../../static/icon13.png',
|
||||
label: '文艺比赛'
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
SwitchPage(id) {
|
||||
switch (id) {
|
||||
case 0:
|
||||
uni.navigateTo({
|
||||
url: "/pages/ArtActivities/ArtActivities"
|
||||
})
|
||||
break;
|
||||
case 1:
|
||||
uni.navigateTo({
|
||||
url: "/pages/MyPoints/MyPoints"
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
uni.navigateTo({
|
||||
url: "/pages/shop/Shop"
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
uni.navigateTo({
|
||||
url: "/pages/literFamily/literFamily"
|
||||
})
|
||||
break;
|
||||
case 4:
|
||||
uni.navigateTo({
|
||||
url: "/pages/literHelp/literHelp"
|
||||
})
|
||||
break;
|
||||
case 5:
|
||||
uni.navigateTo({
|
||||
url: "/pages/mediaProp/mediaProp"
|
||||
})
|
||||
break;
|
||||
case 6:
|
||||
uni.navigateTo({
|
||||
url: "/pages/mediaProp/mediaProp"
|
||||
})
|
||||
break;
|
||||
case 7:
|
||||
uni.navigateTo({
|
||||
url: "/pages/DataSearch/DataSearch"
|
||||
})
|
||||
break;
|
||||
case 8:
|
||||
uni.navigateTo({
|
||||
url: "/pages/DataSearch/DataSearch"
|
||||
})
|
||||
break;
|
||||
case 9:
|
||||
uni.navigateTo({
|
||||
url: "/pages/ArtRace/ArtRace"
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #F4F5F7;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fun {
|
||||
background: #FFFFFF;
|
||||
border-radius: 8px 8px 8px 8px;
|
||||
padding: 0 16px;
|
||||
padding-bottom: 16px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.fun-Item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
|
||||
image {
|
||||
margin-top: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.label {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="top">
|
||||
<image class="bg" src="../../static/MyBg.png" mode=""></image>
|
||||
<view class="avator_box">
|
||||
<view class="tou">
|
||||
<image class="avtor" src="../../static/MoneyIco.png" mode=""></image>
|
||||
</view>
|
||||
<view class="user_name">
|
||||
<view class="user_name_de">
|
||||
谢加息
|
||||
</view>
|
||||
<view class="words">
|
||||
学而不思则罔,思不学则殆
|
||||
</view>
|
||||
</view>
|
||||
<view class="arrow">
|
||||
<image src="../../static/rightArrow.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 内容区 -->
|
||||
<view class="content_area">
|
||||
<view class="fans_box">
|
||||
<view class="fans_itm">
|
||||
<view class="nums">
|
||||
568
|
||||
</view>
|
||||
<view class="itms_name">
|
||||
关注
|
||||
</view>
|
||||
</view>
|
||||
<view class="fans_itm">
|
||||
<view class="nums">
|
||||
568
|
||||
</view>
|
||||
<view class="itms_name">
|
||||
收藏
|
||||
</view>
|
||||
</view>
|
||||
<view class="fans_itm">
|
||||
<view class="nums">
|
||||
568
|
||||
</view>
|
||||
<view class="itms_name">
|
||||
粉丝
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="jifen_box">
|
||||
<view class="jifen_box_itm">
|
||||
<view class="ji_ico">
|
||||
<image src="../../static/MoneyIco.png" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="ji_word_box" @click="gopointsPg">
|
||||
<view class="ji_word_title">
|
||||
积分
|
||||
</view>
|
||||
<view class="ji_con">
|
||||
积分 686
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="jifen_box_itm">
|
||||
<view class="ji_ico">
|
||||
<image src="../../static/DunIcon.png" mode=""></image>
|
||||
</view>
|
||||
<view class="ji_word_box" @click="goOrderDetails">
|
||||
<view class="ji_word_title">
|
||||
我的交易
|
||||
</view>
|
||||
<view class="ji_con">
|
||||
作品交易订单
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<view class="content_bott">
|
||||
<view class="content_bott_itm" v-for="(v,i) in itmes" :key="i">
|
||||
<view class="content_bott_wods">
|
||||
<!-- 我的作品 -->
|
||||
{{v}}
|
||||
</view>
|
||||
<view class="content_bott_arrow">
|
||||
<image src="../../static/rightArrow.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
<tabbar tabbarId='5'></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
itmes:["我的作品","活动管理","消息","设置"]
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
gopointsPg(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/MyPoints/MyPoints"
|
||||
})
|
||||
},
|
||||
goOrderDetails(){
|
||||
uni.navigateTo({
|
||||
url:"/pages/OrderDetail/OrderDetail"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page{
|
||||
background-color: #F4F5F7 ;
|
||||
}
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.top {
|
||||
height: 192px;
|
||||
border: 1px solid transparent;
|
||||
position: relative;
|
||||
|
||||
.avator_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 80px;
|
||||
border: 1px solid transparent;
|
||||
width: 100%;
|
||||
padding: 2px 16px;
|
||||
|
||||
.tou {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.user_name {
|
||||
flex-grow: 1;
|
||||
|
||||
margin-left: 12px;
|
||||
|
||||
.user_name_de {
|
||||
color: #251B1D;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
.words {
|
||||
margin-top: 8px;
|
||||
color: #AFADB0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.arrow {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.content_area{
|
||||
padding: 0 16px;
|
||||
.fans_box{
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
background-color: #FFFFFF;
|
||||
.fans_itm{
|
||||
.nums{ color: #251B1D ; font-weight: bold; font-family: DIN-Bold, DIN; font-size: 16px;}
|
||||
.itms_name{color: #AFADB0 ; font-size: 12px; margin-top: 8px;}
|
||||
}
|
||||
}
|
||||
.jifen_box{
|
||||
|
||||
padding: 16px 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.jifen_box_itm{
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
width: 166px;
|
||||
height: 68px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
.ji_ico{
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ji_word_box{
|
||||
margin-left: 8px;
|
||||
.ji_word_title{font-size: 14px;
|
||||
color: #251B1D;
|
||||
font-weight: 600;}
|
||||
.ji_con{ color: #AFADB0 ; font-size: 12px; font-weight: 400; margin-top: 4px;}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content_bott{
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 8px;
|
||||
.content_bott_itm{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 26px 0px;
|
||||
.content_bott_wods{
|
||||
font-size: 14px;
|
||||
color: #251B1D;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content_bott_arrow{
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<view class="layout">
|
||||
<view class="status_bar" :style="{'height':statusHeight+'px'}"></view>
|
||||
<view class="apptitle" :style="{'height':titleHeight+'px'}">
|
||||
<image src="../../static/icon10.png" mode="" class="logo"></image>
|
||||
<image src="../../static/icon11.png" mode="" class="appname"></image>
|
||||
</view>
|
||||
<view style="padding:12px 0;">
|
||||
<search></search>
|
||||
</view>
|
||||
<u-swiper :list="list" indicator indicatorMode="line" circular></u-swiper>
|
||||
<view class="menus">
|
||||
<u-grid :border="false" col="4">
|
||||
<u-grid-item v-for="(listItem,listIndex) in menus" @click="cliGridItem" :name="listItem.id"
|
||||
:key="listIndex">
|
||||
<image :src="listItem.imgUrl" mode="" class="menusImg"></image>
|
||||
<text class="grid-text">{{listItem.title}}</text>
|
||||
</u-grid-item>
|
||||
</u-grid>
|
||||
</view>
|
||||
<view class="group">
|
||||
<view class="groupTitle">
|
||||
<view class="title">
|
||||
每日一赏
|
||||
</view>
|
||||
<view class="more" @click="navigateToFun('/pages/enjoy/enjoy')">
|
||||
更多
|
||||
</view>
|
||||
</view>
|
||||
<view class="remark">
|
||||
为您推荐最优秀的作品
|
||||
</view>
|
||||
<view class="scrollEle">
|
||||
<u-scroll-list :indicator="false">
|
||||
<view class="scroll-list">
|
||||
<view class="scroll-list__goods-item" v-for="(item, index) in enjoyList" :key="index"
|
||||
:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']" @click="ToEnjoy(index)">
|
||||
<image class="scroll-list__goods-item__image" :src="item.thumb"></image>
|
||||
<text class="scroll-list__goods-item__text">{{ item.labelName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group">
|
||||
<view class="groupTitle">
|
||||
<view class="title">
|
||||
文艺名家
|
||||
</view>
|
||||
<view class="more">
|
||||
更多
|
||||
</view>
|
||||
</view>
|
||||
<view class="remark">
|
||||
象山县著名艺术家
|
||||
</view>
|
||||
<view class="scrollEle">
|
||||
<u-scroll-list :indicator="false">
|
||||
<view class="scroll-list">
|
||||
<view class="scroll-list__goods-item" v-for="(item, index) in writerList" :key="index"
|
||||
:class="[(index === 9) && 'scroll-list__goods-item--no-margin-right']" @click="famouserDetaol(index)" >
|
||||
<image class="scroll-list__goods-item__image" :src="item.thumb"></image>
|
||||
<text class="scroll-list__goods-item__text">{{ item.labelName }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</u-scroll-list>
|
||||
</view>
|
||||
</view>
|
||||
<view class="group">
|
||||
<view class="groupTitle">
|
||||
<view class="title">
|
||||
热门活动
|
||||
</view>
|
||||
<view class="more">
|
||||
更多
|
||||
</view>
|
||||
</view>
|
||||
<view class="remark">
|
||||
最精彩的文艺活动
|
||||
</view>
|
||||
<view class="scrollEle">
|
||||
<u-swiper :list="list2" keyName="image" showTitle :autoplay="false" circular></u-swiper>
|
||||
</view>
|
||||
</view>
|
||||
<u-gap height="5" bgColor="#ffffff"></u-gap>
|
||||
<tabbar tabbarId='1'></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import search from "@/components/search/search.vue"
|
||||
export default {
|
||||
components: {
|
||||
search
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusHeight: 0,
|
||||
titleHeight: 50,
|
||||
list: [
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
|
||||
'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
],
|
||||
list2: [{
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
|
||||
title: '昨夜星辰昨夜风，画楼西畔桂堂东',
|
||||
}, {
|
||||
image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
|
||||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||||
}],
|
||||
menus: [{
|
||||
id: 1,
|
||||
imgUrl: '../../static/icon2.png',
|
||||
title: '政策速递'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
imgUrl: '../../static/icon4.png',
|
||||
title: '文艺活动'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
imgUrl: '../../static/icon3.png',
|
||||
title: '文艺作品'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
imgUrl: '../../static/icon5.png',
|
||||
title: '积分使用'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
imgUrl: '../../static/icon6.png',
|
||||
title: '文艺之家'
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
imgUrl: '../../static/icon7.png',
|
||||
title: '文艺援助'
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
imgUrl: '../../static/icon8.png',
|
||||
title: '媒体宣传'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
imgUrl: '../../static/icon1.png',
|
||||
title: '更多功能'
|
||||
},
|
||||
],
|
||||
enjoyList: [{
|
||||
labelName: '策马崩腾',
|
||||
thumb: '../../static/icon12.jpg'
|
||||
}, {
|
||||
labelName: '潇潇洒洒',
|
||||
thumb: '../../static/icon12.jpg'
|
||||
},
|
||||
{
|
||||
labelName: '小燕子',
|
||||
thumb: '../../static/icon12.jpg'
|
||||
}
|
||||
],
|
||||
writerList: [{
|
||||
labelName: '张三',
|
||||
thumb: '../../static/icon12.jpg'
|
||||
}, {
|
||||
labelName: '李四',
|
||||
thumb: '../../static/icon12.jpg'
|
||||
},
|
||||
{
|
||||
labelName: '小燕子',
|
||||
thumb: '../../static/icon12.jpg'
|
||||
}
|
||||
],
|
||||
};
|
||||
},
|
||||
onReady() {
|
||||
const systemMsg = uni.getSystemInfoSync();
|
||||
this.statusHeight = systemMsg.statusBarHeight
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect() //胶囊
|
||||
this.titleHeight = menuButtonInfo.height + (menuButtonInfo.top - systemMsg.statusBarHeight) * 2
|
||||
// #endif
|
||||
},
|
||||
methods: {
|
||||
navigateToFun(url){
|
||||
uni.navigateTo({
|
||||
url
|
||||
});
|
||||
},
|
||||
cliGridItem(name) {
|
||||
|
||||
switch (name) {
|
||||
case 1:
|
||||
uni.navigateTo({
|
||||
url: "/pages/PolicyExpress/PolicyExpress"
|
||||
})
|
||||
break;
|
||||
case 2:
|
||||
uni.navigateTo({
|
||||
url: "/pages/ArtActivities/ArtActivities"
|
||||
})
|
||||
break;
|
||||
case 3:
|
||||
uni.navigateTo({
|
||||
url: "/pages/ArtWorks/ArtWorks"
|
||||
})
|
||||
break;
|
||||
case 4:
|
||||
uni.navigateTo({
|
||||
url: "/pages/MyPoints/MyPoints"
|
||||
})
|
||||
break;
|
||||
case 5:
|
||||
uni.navigateTo({
|
||||
url: "/pages/literFamily/literFamily"
|
||||
})
|
||||
break;
|
||||
case 6:
|
||||
uni.navigateTo({
|
||||
url: "/pages/literHelp/literHelp"
|
||||
})
|
||||
break;
|
||||
case 7:
|
||||
uni.navigateTo({
|
||||
url: "/pages/mediaProp/mediaProp"
|
||||
})
|
||||
break;
|
||||
case 8:
|
||||
uni.navigateTo({
|
||||
url: "/pages/moreFun/moreFun"
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
,famouserDetaol(id){
|
||||
uni.navigateTo({
|
||||
url:"/pages/famousArts/famousArts?id="+String(id)
|
||||
})
|
||||
|
||||
}
|
||||
,ToEnjoy(id){
|
||||
uni.navigateTo({
|
||||
url:"/pages/enjoy/enjoy?id="+String(id)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.layout {
|
||||
padding: 0 16px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.apptitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.appname {
|
||||
height: 17px;
|
||||
width: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
.menus {
|
||||
.menusImg {
|
||||
margin-top: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.grid-text {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
padding-top: 20px;
|
||||
|
||||
.groupTitle {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.more {
|
||||
color: #AFADB0;
|
||||
font-size: 12px;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.remark {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #AFADB0;
|
||||
}
|
||||
|
||||
.scrollEle {
|
||||
padding-top: 14px;
|
||||
|
||||
.u-scroll-list {
|
||||
padding-bottom: 0;
|
||||
|
||||
.scroll-list {
|
||||
display: flex;
|
||||
|
||||
&__goods-item {
|
||||
margin-right: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&__image {
|
||||
width: 139px;
|
||||
height: 139px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&__text {
|
||||
text-align: center;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="search_box">
|
||||
<u-search height=42 margin="12px 0" searchIconColor="#251B1D" shape="square" :showAction="false"
|
||||
v-model="artValue" placeholder="请输入名家名称"></u-search>
|
||||
<view class="car_box">
|
||||
<image src="../../static/shop/car.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<u-tabs :scrollable="false" :list="list1" :activeStyle="{
|
||||
color: '#251B1D',
|
||||
fontWeight: 'bold',
|
||||
transform: 'scale(1.05)'
|
||||
}" :inactiveStyle="{
|
||||
color: '#AFADB0 ',
|
||||
transform: 'scale(1)'
|
||||
}" itemStyle=" height: 50px; ">
|
||||
<view slot="right" class="filter_icon" style="width: 40rpx; height: 40rpx; flex-shrink: 0;"
|
||||
@click="Clickfilter">
|
||||
<image src="../../static/shop/filter.png" mode=""></image>
|
||||
</view>
|
||||
</u-tabs>
|
||||
|
||||
|
||||
|
||||
|
||||
<view class="artworks">
|
||||
<view class="art_item" v-for="(v,i) in isLoveList" :key="i" @click="goOrderDet(i)">
|
||||
<view class="art_item_top">
|
||||
<image src="../../static/shop/picture.png" mode=""></image>
|
||||
|
||||
</view>
|
||||
|
||||
<view class=" art_item_bott">
|
||||
<view class="title">
|
||||
摄影作品自由生活向美而生作品
|
||||
</view>
|
||||
|
||||
<view class="img_box">
|
||||
<view class=" puber">
|
||||
|
||||
<view class="txt">
|
||||
<text class="txt1">100</text> <text>积分</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="time">
|
||||
12人已购
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</view>
|
||||
<tabbar tabbarId='4'></tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isLoveList: [true, false, true, false],
|
||||
artValue: '',
|
||||
list1: [{
|
||||
name: '全部',
|
||||
}, {
|
||||
name: '书法',
|
||||
}, {
|
||||
name: '绘画'
|
||||
}, {
|
||||
name: '雕刻'
|
||||
}, {
|
||||
name: '摄影'
|
||||
}, {
|
||||
name: '其他'
|
||||
}]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
Clickfilter() {
|
||||
console.log("触发筛选");
|
||||
},
|
||||
goOrderDet(id){
|
||||
uni.navigateTo({
|
||||
url:`/pages/OrderDetail/OrderDetail?id=${id}`
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.search_box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.car_box {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .u-tabs__wrapper__nav__item__text {
|
||||
font-size: 24rpx;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/deep/ .u-tabs__wrapper__nav__line {
|
||||
height: 14px !important;
|
||||
width: 40px !important;
|
||||
background-image: url(../../static/scrollLine.png);
|
||||
background-color: transparent !important;
|
||||
bottom: 2px !important;
|
||||
}
|
||||
|
||||
page {
|
||||
width: calc(100% - 32px);
|
||||
margin: 0 16px;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.artworks {
|
||||
|
||||
.art_item {
|
||||
margin-top: 16px;
|
||||
border: 1px solid transparent;
|
||||
width: calc(50% - 16px);
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
|
||||
.art_item_top {
|
||||
|
||||
position: relative;
|
||||
height: 192px;
|
||||
overflow: hidden;
|
||||
border-radius: 8px 8px 0px 0px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.art_item_bott {
|
||||
padding: 12px;
|
||||
|
||||
.title {
|
||||
// margin-top: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #32333B;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.img_box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16px;
|
||||
|
||||
.puber {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
|
||||
|
||||
.txt {
|
||||
font-size: 10px;
|
||||
font-family: PingFang SC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #8E8F9E;
|
||||
|
||||
.txt1 {
|
||||
color: #32333B;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
font-family: DIN Alternate-Bold, DIN Alternate;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #AFADB0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 481 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 908 B |
Binary file not shown.
|
After Width: | Height: | Size: 560 B |
Binary file not shown.
|
After Width: | Height: | Size: 673 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 370 B |
Binary file not shown.
|
After Width: | Height: | Size: 339 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 937 B |
Binary file not shown.
|
After Width: | Height: | Size: 501 B |
Binary file not shown.
|
After Width: | Height: | Size: 511 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 933 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 904 B |
Binary file not shown.
|
After Width: | Height: | Size: 340 B |
Binary file not shown.
|
After Width: | Height: | Size: 595 B |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 310 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 378 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue