14 changed files with 1089 additions and 103 deletions
Split View
Diff Options
-
+24 -0api/api.js
-
+0 -1components/list/dynamic/dynamicItem.vue
-
+5 -2components/user/sharePopup.vue
-
+1 -1config.js
-
+3 -0pages.json
-
+61 -10pages/index/center.vue
-
+12 -0pages/index/index.vue
-
+2 -1pages_order/auth/wxUserInfo.vue
-
+325 -0pages_order/components/screen/screenRen.vue
-
+17 -9pages_order/mine/fans.vue
-
+279 -0pages_order/mine/promotion.vue
-
+332 -77pages_order/post/postDetail.vue
-
+20 -0pages_order/renting/rentingList.vue
-
+8 -2store/store.js
+ 24
- 0
api/api.js
View File
+ 0
- 1
components/list/dynamic/dynamicItem.vue
View File
+ 5
- 2
components/user/sharePopup.vue
View File
+ 1
- 1
config.js
View File
+ 3
- 0
pages.json
View File
+ 61
- 10
pages/index/center.vue
View File
+ 12
- 0
pages/index/index.vue
View File
+ 2
- 1
pages_order/auth/wxUserInfo.vue
View File
+ 325
- 0
pages_order/components/screen/screenRen.vue
View File
| @ -0,0 +1,325 @@ | |||
| <template> | |||
| <view class="page"> | |||
| <uv-drop-down ref="dropDown" | |||
| sign="dropDown_1" | |||
| text-active-color="#3796F8" | |||
| :extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}" | |||
| :extra-active-icon="{name:'arrow-up-fill',color:'#3796F8',size:'26rpx'}" | |||
| :defaultValue="defaultValue" | |||
| :custom-style="{padding: '0 30rpx'}" | |||
| @click="selectMenu"> | |||
| <uv-drop-down-item name="area" type="2" | |||
| :label="dropItem('area').label" | |||
| :value="dropItem('area').value"> | |||
| </uv-drop-down-item> | |||
| <uv-drop-down-item | |||
| name="price" type="2" | |||
| :label="dropItem('price').label" | |||
| :value="dropItem('price').value"> | |||
| </uv-drop-down-item> | |||
| <!-- <uv-drop-down-item | |||
| name="vip_type" | |||
| type="1" | |||
| label='智能推荐' | |||
| :value="0"> | |||
| </uv-drop-down-item> --> | |||
| </uv-drop-down> | |||
| <uv-drop-down-popup | |||
| sign="dropDown_1" | |||
| :click-overlay-on-close="true" | |||
| :currentDropItem="currentDropItem" | |||
| @clickItem="clickItem" | |||
| @popupChange="change"></uv-drop-down-popup> | |||
| <uv-popup ref="popup" :round="30" | |||
| :safeAreaInsetBottom="false"> | |||
| <view class="popup"> | |||
| <view class="list"> | |||
| <view class="item" | |||
| v-for="(item, index) in list" | |||
| :key="index"> | |||
| <view class="title"> | |||
| {{ item.title }} | |||
| </view> | |||
| <view class="tagList"> | |||
| <view | |||
| :class="{act : i == item.index}" | |||
| @click="clickTag(item, i)" | |||
| v-for="(t, i) in item.tag" | |||
| :key="t"> | |||
| {{ t.label }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view class="btn" @click="submit"> | |||
| <button class="a">提交</button> | |||
| </view> | |||
| </view> | |||
| </uv-popup> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { | |||
| mapState, | |||
| } from 'vuex' | |||
| export default { | |||
| data() { | |||
| return { | |||
| // 表示value等于这些值，就属于默认值 | |||
| defaultValue: [0, 'all', 'all'], | |||
| // 筛选结果 | |||
| result: [], | |||
| activeName: 'area', | |||
| area: { | |||
| label: '地区', | |||
| value: 0, | |||
| activeIndex: 0, | |||
| color: '#333', | |||
| activeColor: '#3796F8', | |||
| child: [ | |||
| { | |||
| label: '全部', | |||
| value: 0, | |||
| }, | |||
| ] | |||
| }, | |||
| price: { | |||
| label: '价格', | |||
| value: 'all', | |||
| activeIndex: 0, | |||
| color: '#333', | |||
| activeColor: '#3796F8', | |||
| child: [ | |||
| { | |||
| label: '全部', | |||
| value: 'all' | |||
| }, | |||
| { | |||
| label: '500以下', | |||
| value: 500 | |||
| }, | |||
| { | |||
| label: '1000以下', | |||
| value: 1000 | |||
| }, | |||
| { | |||
| label: '1500以下', | |||
| value: 1500 | |||
| }, | |||
| { | |||
| label: '2000以下', | |||
| value: 2000 | |||
| }, | |||
| { | |||
| label: '2500以下', | |||
| value: 2500 | |||
| }, | |||
| { | |||
| label: '3000以下', | |||
| value: 3000 | |||
| }, | |||
| { | |||
| label: '5000以下', | |||
| value: 5000 | |||
| }, | |||
| { | |||
| label: '8000以下', | |||
| value: 8000 | |||
| }, | |||
| ] | |||
| }, | |||
| list : [ | |||
| // { | |||
| // title : '您目前所属的年龄段', | |||
| // tag : ['18岁～35岁', '35岁～45岁', '45岁～50岁', '50岁以上'], | |||
| // index : 0, | |||
| // }, | |||
| { | |||
| title : '您希望从事的工种', | |||
| tag : ['电工', '焊工', '叉车', '其他'], | |||
| index : 0, | |||
| }, | |||
| { | |||
| title : '您希望从事的工作性质', | |||
| tag : ['全职', '临时工',], | |||
| index : 0, | |||
| }, | |||
| ] | |||
| } | |||
| }, | |||
| computed : { | |||
| dropItem(name) { | |||
| return (name) => { | |||
| const result = {}; | |||
| const find = this.result.find(item => item.name === name); | |||
| if (find) { | |||
| result.label = find.label; | |||
| result.value = find.value; | |||
| } else { | |||
| result.label = this[name].label; | |||
| result.value = this[name].value; | |||
| } | |||
| return result; | |||
| } | |||
| }, | |||
| // 获取当前下拉筛选项 | |||
| currentDropItem() { | |||
| return this[this.activeName]; | |||
| }, | |||
| ...mapState(['cityList']), | |||
| }, | |||
| mounted() { | |||
| //价格 | |||
| // this.jobTypeList.forEach(n => { | |||
| // this.price.child.push({ | |||
| // label: n.name, | |||
| // value: n.id, | |||
| // }) | |||
| // }) | |||
| // 地区 | |||
| this.cityList.forEach(n => { | |||
| this.area.child.push({ | |||
| label: n.name, | |||
| value: n.id, | |||
| }) | |||
| }) | |||
| }, | |||
| methods: { | |||
| clickTag(item, i){ | |||
| console.log(i); | |||
| item.index = i | |||
| }, | |||
| change(e) {}, | |||
| /** | |||
| * 点击每个筛选项回调 | |||
| * @param {Object} e { name, active, type } = e | |||
| */ | |||
| selectMenu(e) { | |||
| const { | |||
| name, | |||
| active, | |||
| type | |||
| } = e; | |||
| this.activeName = name; | |||
| if(type == 1){ | |||
| this.$refs.popup.open() | |||
| return | |||
| } | |||
| const find = this.result.find(item => item.name == this.activeName); | |||
| if (find) { | |||
| const findIndex = this[this.activeName] | |||
| .child.findIndex(item => item.label == find.label && item | |||
| .value == find.value); | |||
| this[this.activeName].activeIndex = findIndex; | |||
| } else { | |||
| this[this.activeName].activeIndex = 0; | |||
| } | |||
| }, | |||
| /** | |||
| * 点击菜单回调处理 | |||
| * @param {Object} item 选中项 { label,value } = e | |||
| */ | |||
| clickItem(e) { | |||
| // 下面有重新赋值，所以用let | |||
| let { | |||
| label, | |||
| value | |||
| } = e; | |||
| const findIndex = this.result.findIndex(item => item.name == this.activeName); | |||
| if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) { | |||
| label = this[this.activeName].label; | |||
| } | |||
| // 已经存在筛选项 | |||
| if (findIndex > -1) { | |||
| this.$set(this.result, findIndex, { | |||
| name: this.activeName, | |||
| label, | |||
| value | |||
| }) | |||
| } else { | |||
| this.result.push({ | |||
| name: this.activeName, | |||
| label, | |||
| value | |||
| }); | |||
| } | |||
| this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1); | |||
| this.$emit('clickItem', this.result) | |||
| }, | |||
| submit(){ | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style scoped lang="scss"> | |||
| .page{ | |||
| .popup{ | |||
| width: 80vw; | |||
| padding: 40rpx; | |||
| .list{ | |||
| .item{ | |||
| margin-top: 20rpx; | |||
| .title{ | |||
| font-weight: 900; | |||
| font-size: 30rpx; | |||
| } | |||
| .tagList{ | |||
| display: flex; | |||
| flex-wrap: wrap; | |||
| padding: 10rpx 0; | |||
| view{ | |||
| background: rgba($uni-color, 0.1); | |||
| padding: 10rpx 20rpx; | |||
| margin: 10rpx; | |||
| border-radius: 10rpx; | |||
| font-size: 26rpx; | |||
| } | |||
| .act{ | |||
| color: #fff; | |||
| background: $uni-color; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| .btn { | |||
| display: flex; | |||
| justify-content: center; | |||
| width: 100%; | |||
| margin-top: 20rpx; | |||
| .a { | |||
| display: flex; | |||
| justify-content: center; | |||
| align-items: center; | |||
| width: 90%; | |||
| color: #FFF; | |||
| background-color: $uni-color; | |||
| border: 1px solid rgba($uni-color, 0.2); | |||
| border-radius: 100rpx; | |||
| font-size: 30rpx; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| </style> | |||
+ 17
- 9
pages_order/mine/fans.vue
View File
+ 279
- 0
pages_order/mine/promotion.vue
View File
| @ -0,0 +1,279 @@ | |||
| <template> | |||
| <view class="promotion"> | |||
| <navbar title="二维码" leftClick @leftClick="$utils.navigateBack" /> | |||
| <view class="promotion-card"> | |||
| <!-- <view class="user-info"> --> | |||
| <!-- <image class="image" :src="userInfo.headImage" mode="widthFix"></image> --> | |||
| <!-- <image class="image" src="../../static/logo.png" mode="widthFix"></image> --> | |||
| <!-- <view class="user-name">{{ userInfo.nickName }}</view> --> | |||
| <!-- <view class="user-name">湖南第一深情</view> --> | |||
| <!-- </view> --> | |||
| <!-- <view class="invitation-code-img"> | |||
| <image | |||
| style="width: 400rpx;" | |||
| :src="imagePath" mode="widthFix"></image> | |||
| </view> --> | |||
| <image style="width: 100%;" :src="imagePath" mode="widthFix"></image> | |||
| <!-- <view class="invitation-code">加油站: {{ title }}</view> --> | |||
| <canvas id="myCanvas" type="2d" canvas-id="firstCanvas1"></canvas> | |||
| </view> | |||
| <view class="btns"> | |||
| <view class="btn" | |||
| @click="preservationImg(imagePath)">保存</view> | |||
| <!-- <view class="btn">立即邀请</view> --> | |||
| </view> | |||
| </view> | |||
| </template> | |||
| <script> | |||
| import { | |||
| mapState | |||
| } from 'vuex' | |||
| export default { | |||
| name: 'Promotion', | |||
| computed: { | |||
| ...mapState(['userInfo']), | |||
| }, | |||
| data() { | |||
| return { | |||
| url: '', | |||
| title: '123123', | |||
| baseUrl: 'https://dianpin-img.xzaiyp.top/', | |||
| canvas: {}, | |||
| imagePath: '', | |||
| } | |||
| }, | |||
| onShow() { | |||
| this.getQrCode() | |||
| this.$store.commit('getUserInfo') | |||
| }, | |||
| methods: { | |||
| getQrCode() { | |||
| this.$api('getQrCode', res => { | |||
| if (res.code == 200) { | |||
| this.url = res.result.url | |||
| this.title = res.result.name | |||
| this.draw() | |||
| } | |||
| }) | |||
| }, | |||
| draw() { | |||
| uni.showLoading({ | |||
| title: "拼命绘画中..." | |||
| }) | |||
| wx.createSelectorQuery() | |||
| .select('#myCanvas') // 绘制的canvas的id | |||
| .fields({ | |||
| node: true, | |||
| size: true | |||
| }) | |||
| .exec((res) => { | |||
| const canvas = res[0].node | |||
| // 渲染上下文 | |||
| const ctx = canvas.getContext('2d') | |||
| // Canvas 画布的实际绘制宽高 | |||
| const width = res[0].width | |||
| const height = res[0].height | |||
| // 初始化画布大小 | |||
| const dpr = wx.getWindowInfo().pixelRatio | |||
| //根据dpr调整 | |||
| // dpr 2 4 | |||
| // 3 6 | |||
| let Ratio = dpr * 2 | |||
| console.log("bug", dpr) | |||
| canvas.width = width * dpr | |||
| canvas.height = height * dpr | |||
| this.canvas = canvas | |||
| ctx.scale(dpr, dpr) | |||
| ctx.clearRect(0, 0, width, height) | |||
| ctx.fillStyle = '#fff' | |||
| ctx.fillRect(0, 0, canvas.width, canvas.height) | |||
| //用户图片 | |||
| // const image = canvas.createImage() | |||
| // image.onload = () => { | |||
| // ctx.drawImage(image, 30, 18, 40, 40) | |||
| // } | |||
| // image.src = '/public/img/wechar_1.png' | |||
| // image.src = this.userInfo.headImage | |||
| ctx.fillStyle = 'black' | |||
| ctx.font = '22px PingFangSC-regular'; | |||
| let s = this.title || '加油站' | |||
| ctx.fillText(s, canvas.width / Ratio - s.length * 11, 50); | |||
| //二维码图片 | |||
| const coderImage = canvas.createImage() | |||
| coderImage.src = this.baseUrl + this.url | |||
| coderImage.onload = () => { | |||
| ctx.drawImage(coderImage, | |||
| canvas.width / Ratio - 240 / 2, 100, 240, 240) | |||
| } | |||
| // 绘制完成后存储路径 | |||
| setTimeout(() => { | |||
| wx.canvasToTempFilePath({ | |||
| x: 0, | |||
| y: 0, | |||
| width: this.canvas.width, | |||
| height: this.canvas.height, | |||
| canvas, | |||
| success: (res) => { | |||
| var tempFilePath = res.tempFilePath; | |||
| this.imagePath = tempFilePath | |||
| uni.hideLoading() | |||
| } | |||
| }); | |||
| }, 600); | |||
| }) | |||
| }, | |||
| back() { | |||
| uni.navigateBack(-1) | |||
| }, | |||
| preservationImg(img) { | |||
| let that = this | |||
| uni.authorize({ | |||
| /* scope.writePhotosAlbum 类型是保存到相册 */ | |||
| scope: 'scope.writePhotosAlbum', | |||
| success() { | |||
| /* 已授权进入 */ | |||
| /* 保存图片到相册方法方法 */ | |||
| that.imgApi(img); | |||
| }, | |||
| complete(res) { | |||
| /* 判断如果没有授权就打开设置选项让用户重新授权 */ | |||
| uni.getSetting({ | |||
| success(res) { | |||
| if (!res.authSetting['scope.writePhotosAlbum']) { | |||
| /* 打开设置的方法 */ | |||
| that.openInstall(); | |||
| } | |||
| } | |||
| }); | |||
| } | |||
| }); | |||
| }, | |||
| imgApi(image) { | |||
| /* 获取图片的信息 */ | |||
| uni.getImageInfo({ | |||
| src: image, | |||
| success: function(image) { | |||
| /* 保存图片到手机相册 */ | |||
| uni.saveImageToPhotosAlbum({ | |||
| filePath: image.path, | |||
| success: function() { | |||
| uni.showModal({ | |||
| title: '保存成功', | |||
| content: '图片已成功保存到相册', | |||
| showCancel: false | |||
| }); | |||
| }, | |||
| complete(res) { | |||
| console.log(res); | |||
| } | |||
| }); | |||
| } | |||
| }); | |||
| }, | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .promotion { | |||
| .promotion-card { | |||
| width: 90%; | |||
| margin: 100rpx auto 0rpx auto; | |||
| box-shadow: 0rpx 0rpx 15rpx rgba(0, 0, 0, .2); | |||
| border-radius: 15rpx; | |||
| padding: 40rpx 30rpx; | |||
| box-sizing: border-box; | |||
| .user-info { | |||
| display: flex; | |||
| align-items: center; | |||
| .image { | |||
| width: 80rpx; | |||
| height: 80rpx; | |||
| border-radius: 50%; | |||
| margin-right: 10rpx; | |||
| } | |||
| .user-name { | |||
| font-size: 30rpx; | |||
| } | |||
| } | |||
| .invitation-code-img { | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| margin: 100rpx 0rpx; | |||
| .image { | |||
| width: 30%; | |||
| border-radius: 50%; | |||
| } | |||
| } | |||
| .invitation-code { | |||
| text-align: center; | |||
| color: #818181; | |||
| font-size: 28rpx; | |||
| } | |||
| } | |||
| .btns { | |||
| position: fixed; | |||
| left: 0; | |||
| bottom: 0; | |||
| width: 100%; | |||
| height: 120rpx; | |||
| display: flex; | |||
| background: #00aaff; | |||
| color: white; | |||
| font-size: 28rpx; | |||
| .btn { | |||
| flex: 1; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
| &:nth-child(2) { | |||
| background: orange; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| #myCanvas { | |||
| position: fixed; | |||
| left: 100%; | |||
| /* visibility: hidden */ | |||
| /* visibility: hidden; */ | |||
| /* margin-top: 100rpx; */ | |||
| margin: 68rpx auto; | |||
| width: 750rpx; | |||
| height: 750rpx; | |||
| /* line-height: 20px; */ | |||
| background-color: rgba(255, 255, 255, 1); | |||
| text-align: center; | |||
| } | |||
| </style> | |||