1
This commit is contained in:
Vinjor
parent
0a602fe036
commit
735cdf7a0a
18
pages.json
18
pages.json
@ -125,6 +125,24 @@
|
||||
"navigationBarTitleText": "会员中心",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "set/suggest",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "set/my-suggest",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "set/black-list",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
}],
|
||||
|
||||
@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<view class="about-container">
|
||||
<view class="header-section text-center">
|
||||
<image style="width: 150rpx;height: 150rpx;" src="/static/logo200.png" mode="widthFix">
|
||||
</image>
|
||||
<uni-title type="h2" title="若依移动端"></uni-title>
|
||||
</view>
|
||||
|
||||
<view class="content-section">
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>版本信息</view>
|
||||
<view class="text-right">v{{version}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>官方邮箱</view>
|
||||
<view class="text-right">ruoyi@xx.com</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>服务热线</view>
|
||||
<view class="text-right">400-999-9999</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>公司网站</view>
|
||||
<view class="text-right">
|
||||
<uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="copyright">
|
||||
<view>Copyright © 2022 ruoyi.vip All Rights Reserved.</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
url: getApp().globalData.config.appInfo.site_url,
|
||||
version: getApp().globalData.config.appInfo.version
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
display: flex;
|
||||
padding: 30rpx 0 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="my-card-box">
|
||||
<navigation-bar-vue title="地址详情" style="width: 100%;" background-color="#ffffff"
|
||||
title-color="#000000"></navigation-bar-vue>
|
||||
<view class="card-detail">
|
||||
<view class="title">地址信息</view>
|
||||
<view class="item-field">
|
||||
@ -24,8 +26,8 @@
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<uni-data-picker placeholder="请选择" popup-title="请选择收件地址" :localdata="dataTree"
|
||||
v-model="dataObj.cityId" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened"
|
||||
@popupclosed="onpopupclosed">
|
||||
v-model="dataObj.cityId" @change="onchange" @nodeclick="onnodeclick"
|
||||
@popupopened="onpopupopened" @popupclosed="onpopupclosed">
|
||||
</uni-data-picker>
|
||||
<textarea style="margin-top: 10rpx;" v-model="dataObj.detail" placeholder="请输入详细地址" />
|
||||
</view>
|
||||
@ -46,11 +48,22 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||||
import config from '@/config'
|
||||
import {treeCity} from '@/api/business/base.js'
|
||||
import {saveAddress,getById} from '@/api/business/member.js'
|
||||
import {toast} from '@/utils/common.js'
|
||||
import {
|
||||
treeCity
|
||||
} from '@/api/business/base.js'
|
||||
import {
|
||||
saveAddress,
|
||||
getById
|
||||
} from '@/api/business/member.js'
|
||||
import {
|
||||
toast
|
||||
} from '@/utils/common.js'
|
||||
export default {
|
||||
components: {
|
||||
navigationBarVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 单选数据源
|
||||
@ -61,7 +74,7 @@
|
||||
text: '否',
|
||||
value: "0"
|
||||
}],
|
||||
//城市树结构
|
||||
//城市树结构
|
||||
dataTree: [],
|
||||
//名片数据对象
|
||||
dataObj: {
|
||||
@ -74,83 +87,85 @@
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options){
|
||||
this.initData(options.id,options.isCopy);
|
||||
},
|
||||
onLoad(options) {
|
||||
this.initData(options.id, options.isCopy);
|
||||
},
|
||||
|
||||
onShow(options) {
|
||||
this.initAddress();
|
||||
},
|
||||
onShow(options) {
|
||||
this.initAddress();
|
||||
},
|
||||
methods: {
|
||||
|
||||
/**初始化界面*/
|
||||
initData(id,isCopy){
|
||||
if (id) {
|
||||
getById({id:id}).then(res =>{
|
||||
this.dataObj = res.data
|
||||
if (isCopy){
|
||||
this.dataObj.id = null
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.dataObj = {
|
||||
name: "",
|
||||
tel: "",
|
||||
cityId: "",
|
||||
detail: "",
|
||||
isDefault: "0"
|
||||
}
|
||||
}
|
||||
},
|
||||
/**初始化界面*/
|
||||
initData(id, isCopy) {
|
||||
if (id) {
|
||||
getById({
|
||||
id: id
|
||||
}).then(res => {
|
||||
this.dataObj = res.data
|
||||
if (isCopy) {
|
||||
this.dataObj.id = null
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.dataObj = {
|
||||
name: "",
|
||||
tel: "",
|
||||
cityId: "",
|
||||
detail: "",
|
||||
isDefault: "0"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**初始化树结构*/
|
||||
initAddress(){
|
||||
treeCity().then(res => {
|
||||
this.dataTree = res.data
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**初始化树结构*/
|
||||
initAddress() {
|
||||
treeCity().then(res => {
|
||||
this.dataTree = res.data
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
/**提交*/
|
||||
submitForm(){
|
||||
if (this.dataObj.name == null || this.dataObj.name == ""){
|
||||
toast("收件人姓名不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.tel == null || this.dataObj.tel == ""){
|
||||
toast("联系电话不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.cityId == null || this.dataObj.cityId == ""){
|
||||
toast("收件地址不能为空")
|
||||
return
|
||||
}
|
||||
saveAddress(this.dataObj).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
duration: 2000,
|
||||
title: '保存成功'
|
||||
});
|
||||
uni.navigateBack()
|
||||
}
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**提交*/
|
||||
submitForm() {
|
||||
if (this.dataObj.name == null || this.dataObj.name == "") {
|
||||
toast("收件人姓名不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.tel == null || this.dataObj.tel == "") {
|
||||
toast("联系电话不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.cityId == null || this.dataObj.cityId == "") {
|
||||
toast("收件地址不能为空")
|
||||
return
|
||||
}
|
||||
saveAddress(this.dataObj).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
duration: 2000,
|
||||
title: '保存成功'
|
||||
});
|
||||
uni.navigateBack()
|
||||
}
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
onnodeclick(e) {
|
||||
console.log(e,135);
|
||||
console.log(e, 135);
|
||||
},
|
||||
onpopupopened(e) {
|
||||
console.log('popupopened');
|
||||
@ -170,8 +185,9 @@
|
||||
|
||||
<style lang="scss">
|
||||
.my-card-box {
|
||||
padding-top: calc(90rpx + var(--status-bar-height));
|
||||
border-top: 1rpx solid #F4F4F4;
|
||||
padding: 30rpx;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 30rpx;
|
||||
@ -183,14 +199,16 @@
|
||||
position: relative;
|
||||
|
||||
.card-detail {
|
||||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: white;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
|
||||
@ -1,631 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body uni-content-info">
|
||||
<view class='cropper-content'>
|
||||
<view v-if="isShowImg" class="uni-corpper" :style="'width:'+cropperInitW+'px;height:'+cropperInitH+'px;background:#000'">
|
||||
<view class="uni-corpper-content" :style="'width:'+cropperW+'px;height:'+cropperH+'px;left:'+cropperL+'px;top:'+cropperT+'px'">
|
||||
<image :src="imageSrc" :style="'width:'+cropperW+'px;height:'+cropperH+'px'"></image>
|
||||
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove" @touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
|
||||
:style="'left:'+cutL+'px;top:'+cutT+'px;right:'+cutR+'px;bottom:'+cutB+'px'">
|
||||
<view class="uni-cropper-view-box">
|
||||
<view class="uni-cropper-dashed-h"></view>
|
||||
<view class="uni-cropper-dashed-v"></view>
|
||||
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
|
||||
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-rb" data-drag="rightBottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart" @touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
|
||||
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
|
||||
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cropper-config'>
|
||||
<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
|
||||
<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
|
||||
</view>
|
||||
<canvas canvas-id="myCanvas" :style="'position:absolute;border: 1px solid red; width:'+imageW+'px;height:'+imageH+'px;top:-9999px;left:-9999px;'"></canvas>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
import store from "@/store"
|
||||
import { uploadAvatar } from "@/api/system/user"
|
||||
|
||||
const baseUrl = config.baseUrl
|
||||
let sysInfo = uni.getSystemInfoSync()
|
||||
let SCREEN_WIDTH = sysInfo.screenWidth
|
||||
let PAGE_X, // 手按下的x位置
|
||||
PAGE_Y, // 手按下y的位置
|
||||
PR = sysInfo.pixelRatio, // dpi
|
||||
T_PAGE_X, // 手移动的时候x的位置
|
||||
T_PAGE_Y, // 手移动的时候Y的位置
|
||||
CUT_L, // 初始化拖拽元素的left值
|
||||
CUT_T, // 初始化拖拽元素的top值
|
||||
CUT_R, // 初始化拖拽元素的
|
||||
CUT_B, // 初始化拖拽元素的
|
||||
CUT_W, // 初始化拖拽元素的宽度
|
||||
CUT_H, // 初始化拖拽元素的高度
|
||||
IMG_RATIO, // 图片比例
|
||||
IMG_REAL_W, // 图片实际的宽度
|
||||
IMG_REAL_H, // 图片实际的高度
|
||||
DRAFG_MOVE_RATIO = 1, //移动时候的比例,
|
||||
INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
|
||||
DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
|
||||
|
||||
export default {
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data() {
|
||||
return {
|
||||
imageSrc: store.getters.avatar,
|
||||
isShowImg: false,
|
||||
// 初始化的宽高
|
||||
cropperInitW: SCREEN_WIDTH,
|
||||
cropperInitH: SCREEN_WIDTH,
|
||||
// 动态的宽高
|
||||
cropperW: SCREEN_WIDTH,
|
||||
cropperH: SCREEN_WIDTH,
|
||||
// 动态的left top值
|
||||
cropperL: 0,
|
||||
cropperT: 0,
|
||||
|
||||
transL: 0,
|
||||
transT: 0,
|
||||
|
||||
// 图片缩放值
|
||||
scaleP: 0,
|
||||
imageW: 0,
|
||||
imageH: 0,
|
||||
|
||||
// 裁剪框 宽高
|
||||
cutL: 0,
|
||||
cutT: 0,
|
||||
cutB: SCREEN_WIDTH,
|
||||
cutR: '100%',
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: DRAFG_MOVE_RATIO
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
this.loadImage()
|
||||
},
|
||||
methods: {
|
||||
setData: function (obj) {
|
||||
let that = this
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
that.$set(that.$data, key, obj[key])
|
||||
})
|
||||
},
|
||||
getImage: function () {
|
||||
var _this = this
|
||||
uni.chooseImage({
|
||||
success: function (res) {
|
||||
_this.setData({
|
||||
imageSrc: res.tempFilePaths[0],
|
||||
})
|
||||
_this.loadImage()
|
||||
},
|
||||
})
|
||||
},
|
||||
loadImage: function () {
|
||||
var _this = this
|
||||
|
||||
uni.getImageInfo({
|
||||
src: _this.imageSrc,
|
||||
success: function success(res) {
|
||||
IMG_RATIO = 1 / 1
|
||||
if (IMG_RATIO >= 1) {
|
||||
IMG_REAL_W = SCREEN_WIDTH
|
||||
IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
|
||||
} else {
|
||||
IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
|
||||
IMG_REAL_H = SCREEN_WIDTH
|
||||
}
|
||||
let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
|
||||
INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
|
||||
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
|
||||
if (IMG_RATIO >= 1) {
|
||||
let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2)
|
||||
let cutB = cutT
|
||||
let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2)
|
||||
let cutR = cutL
|
||||
_this.setData({
|
||||
cropperW: SCREEN_WIDTH,
|
||||
cropperH: SCREEN_WIDTH / IMG_RATIO,
|
||||
// 初始化left right
|
||||
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
|
||||
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
|
||||
cutL: cutL,
|
||||
cutT: cutT,
|
||||
cutR: cutR,
|
||||
cutB: cutB,
|
||||
// 图片缩放值
|
||||
imageW: IMG_REAL_W,
|
||||
imageH: IMG_REAL_H,
|
||||
scaleP: IMG_REAL_W / SCREEN_WIDTH,
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: IMG_RATIO
|
||||
})
|
||||
} else {
|
||||
let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2)
|
||||
let cutR = cutL
|
||||
let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2)
|
||||
let cutB = cutT
|
||||
_this.setData({
|
||||
cropperW: SCREEN_WIDTH * IMG_RATIO,
|
||||
cropperH: SCREEN_WIDTH,
|
||||
// 初始化left right
|
||||
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
|
||||
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
|
||||
|
||||
cutL: cutL,
|
||||
cutT: cutT,
|
||||
cutR: cutR,
|
||||
cutB: cutB,
|
||||
// 图片缩放值
|
||||
imageW: IMG_REAL_W,
|
||||
imageH: IMG_REAL_H,
|
||||
scaleP: IMG_REAL_W / SCREEN_WIDTH,
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: IMG_RATIO
|
||||
})
|
||||
}
|
||||
_this.setData({
|
||||
isShowImg: true
|
||||
})
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 拖动时候触发的touchStart事件
|
||||
contentStartMove(e) {
|
||||
PAGE_X = e.touches[0].pageX
|
||||
PAGE_Y = e.touches[0].pageY
|
||||
},
|
||||
|
||||
// 拖动时候触发的touchMove事件
|
||||
contentMoveing(e) {
|
||||
var _this = this
|
||||
var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
// 左移
|
||||
if (dragLengthX > 0) {
|
||||
if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
|
||||
} else {
|
||||
if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
|
||||
}
|
||||
|
||||
if (dragLengthY > 0) {
|
||||
if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
|
||||
} else {
|
||||
if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
|
||||
}
|
||||
this.setData({
|
||||
cutL: this.cutL - dragLengthX,
|
||||
cutT: this.cutT - dragLengthY,
|
||||
cutR: this.cutR + dragLengthX,
|
||||
cutB: this.cutB + dragLengthY
|
||||
})
|
||||
|
||||
PAGE_X = e.touches[0].pageX
|
||||
PAGE_Y = e.touches[0].pageY
|
||||
},
|
||||
|
||||
contentTouchEnd() {
|
||||
|
||||
},
|
||||
|
||||
// 获取图片
|
||||
getImageInfo() {
|
||||
var _this = this
|
||||
uni.showLoading({
|
||||
title: '图片生成中...',
|
||||
})
|
||||
// 将图片写入画布
|
||||
const ctx = uni.createCanvasContext('myCanvas')
|
||||
ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H)
|
||||
ctx.draw(true, () => {
|
||||
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
|
||||
var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W
|
||||
var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H
|
||||
var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W
|
||||
var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H
|
||||
uni.canvasToTempFilePath({
|
||||
x: canvasL,
|
||||
y: canvasT,
|
||||
width: canvasW,
|
||||
height: canvasH,
|
||||
destWidth: canvasW,
|
||||
destHeight: canvasH,
|
||||
quality: 0.5,
|
||||
canvasId: 'myCanvas',
|
||||
success: function (res) {
|
||||
uni.hideLoading()
|
||||
let data = {name: 'avatarfile', filePath: res.tempFilePath}
|
||||
uploadAvatar(data).then(response => {
|
||||
store.commit('SET_AVATAR', baseUrl + response.imgUrl)
|
||||
uni.showToast({ title: "修改成功", icon: 'success' })
|
||||
uni.navigateBack()
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 设置大小的时候触发的touchStart事件
|
||||
dragStart(e) {
|
||||
T_PAGE_X = e.touches[0].pageX
|
||||
T_PAGE_Y = e.touches[0].pageY
|
||||
CUT_L = this.cutL
|
||||
CUT_R = this.cutR
|
||||
CUT_B = this.cutB
|
||||
CUT_T = this.cutT
|
||||
},
|
||||
|
||||
// 设置大小的时候触发的touchMove事件
|
||||
dragMove(e) {
|
||||
var _this = this
|
||||
var dragType = e.target.dataset.drag
|
||||
switch (dragType) {
|
||||
case 'right':
|
||||
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
if (CUT_R + dragLength < 0) dragLength = -CUT_R
|
||||
this.setData({
|
||||
cutR: CUT_R + dragLength
|
||||
})
|
||||
break
|
||||
case 'left':
|
||||
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
if (CUT_L - dragLength < 0) dragLength = CUT_L
|
||||
if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
|
||||
this.setData({
|
||||
cutL: CUT_L - dragLength
|
||||
})
|
||||
break
|
||||
case 'top':
|
||||
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
if (CUT_T - dragLength < 0) dragLength = CUT_T
|
||||
if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
|
||||
this.setData({
|
||||
cutT: CUT_T - dragLength
|
||||
})
|
||||
break
|
||||
case 'bottom':
|
||||
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
if (CUT_B + dragLength < 0) dragLength = -CUT_B
|
||||
this.setData({
|
||||
cutB: CUT_B + dragLength
|
||||
})
|
||||
break
|
||||
case 'rightBottom':
|
||||
var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
|
||||
if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
|
||||
if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
|
||||
let cutB = CUT_B + dragLengthY
|
||||
let cutR = CUT_R + dragLengthX
|
||||
|
||||
this.setData({
|
||||
cutB: cutB,
|
||||
cutR: cutR
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* pages/uni-cropper/index.wxss */
|
||||
|
||||
.uni-content-info {
|
||||
/* position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
align-items: center;
|
||||
flex-direction: column; */
|
||||
}
|
||||
|
||||
.cropper-config {
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
|
||||
.cropper-content {
|
||||
min-height: 750rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-corpper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-corpper-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-corpper-content image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0 !important;
|
||||
max-width: none !important;
|
||||
height: 100%;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
image-orientation: 0deg !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* 移动图片效果 */
|
||||
|
||||
.uni-cropper-drag-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: move;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1;
|
||||
}
|
||||
/* 内部的信息 */
|
||||
|
||||
.uni-corpper-crop-box {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.uni-corpper-crop-box .uni-cropper-view-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
outline: 1rpx solid #69f;
|
||||
outline-color: rgba(102, 153, 255, .75)
|
||||
}
|
||||
/* 横向虚线 */
|
||||
|
||||
.uni-cropper-dashed-h {
|
||||
position: absolute;
|
||||
top: 33.33333333%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 33.33333333%;
|
||||
border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
/* 纵向虚线 */
|
||||
|
||||
.uni-cropper-dashed-v {
|
||||
position: absolute;
|
||||
left: 33.33333333%;
|
||||
top: 0;
|
||||
width: 33.33333333%;
|
||||
height: 100%;
|
||||
border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
/* 四个方向的线 为了之后的拖动事件*/
|
||||
|
||||
.uni-cropper-line-t {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1rpx;
|
||||
opacity: 0.1;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-t::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0rpx;
|
||||
width: 100%;
|
||||
-webkit-transform: translate3d(0, -50%, 0);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
bottom: 0;
|
||||
height: 41rpx;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-r {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
right: 0rpx;
|
||||
width: 1rpx;
|
||||
opacity: 0.1;
|
||||
height: 100%;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-r::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 41rpx;
|
||||
-webkit-transform: translate3d(-50%, 0, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-b {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #69f;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1rpx;
|
||||
opacity: 0.1;
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-b::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0rpx;
|
||||
width: 100%;
|
||||
-webkit-transform: translate3d(0, -50%, 0);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
bottom: 0;
|
||||
height: 41rpx;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-l {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1rpx;
|
||||
opacity: 0.1;
|
||||
height: 100%;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-l::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 41rpx;
|
||||
-webkit-transform: translate3d(-50%, 0, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-point {
|
||||
width: 5rpx;
|
||||
height: 5rpx;
|
||||
background-color: #69f;
|
||||
opacity: .75;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.point-t {
|
||||
top: -3rpx;
|
||||
left: 50%;
|
||||
margin-left: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-tr {
|
||||
top: -3rpx;
|
||||
left: 100%;
|
||||
margin-left: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-r {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-rb {
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
cursor: n-resize;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background-color: #69f;
|
||||
position: absolute;
|
||||
z-index: 1112;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.point-b {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-bl {
|
||||
left: 0%;
|
||||
top: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-l {
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-lt {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
/* 裁剪框预览内容 */
|
||||
|
||||
.uni-cropper-viewer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-cropper-viewer image {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
<view class="my-card-box">
|
||||
<navigation-bar-vue title="地址详情" style="width: 100%;" background-color="#ffffff"
|
||||
title-color="#000000"></navigation-bar-vue>
|
||||
<view class="card-detail">
|
||||
<view class="title">名片信息</view>
|
||||
<view class="item-field">
|
||||
@ -12,22 +14,22 @@
|
||||
:imgCode="dataObj.platformCode"></uni-data-select>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>平台账号
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.accountNumber" type="text" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>平台昵称
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.accountName" type="text" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>平台账号
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.accountNumber" type="text" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>平台昵称
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<input class="uni-input" v-model="dataObj.accountName" type="text" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>粉丝数
|
||||
@ -48,11 +50,10 @@
|
||||
<view class="item-lable is-required">
|
||||
<image src="@/static/mine/required.png" mode="aspectFit"></image>收货地址
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<uni-data-select v-model="dataObj.addrId" :localdata="addressList"
|
||||
@change="change($event,'addrId')" :clear="false"
|
||||
:imgCode="dataObj.addrId"></uni-data-select>
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<uni-data-select v-model="dataObj.addrId" :localdata="addressList" @change="change($event,'addrId')"
|
||||
:clear="false" :imgCode="dataObj.addrId"></uni-data-select>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable">
|
||||
@ -87,12 +88,24 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||||
import config from '@/config'
|
||||
import upload from '@/utils/upload'
|
||||
import {toast} from '@/utils/common.js'
|
||||
import { getBusiCardById, applyBusiCard, uniSelectList} from '@/api/business/member.js'
|
||||
import { uniListByParentCode} from '@/api/system/config.js'
|
||||
import upload from '@/utils/upload'
|
||||
import {
|
||||
toast
|
||||
} from '@/utils/common.js'
|
||||
import {
|
||||
getBusiCardById,
|
||||
applyBusiCard,
|
||||
uniSelectList
|
||||
} from '@/api/business/member.js'
|
||||
import {
|
||||
uniListByParentCode
|
||||
} from '@/api/system/config.js'
|
||||
export default {
|
||||
components: {
|
||||
navigationBarVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
//所有可选的平台
|
||||
@ -100,137 +113,141 @@
|
||||
sizeType: ['compressed'],
|
||||
//图片数组
|
||||
fileList: [],
|
||||
//地址集合
|
||||
addressList:[],
|
||||
//地址集合
|
||||
addressList: [],
|
||||
//名片数据对象
|
||||
dataObj: {
|
||||
platformCode: "xiaohongshu",
|
||||
accountName:null,
|
||||
accountNumber:null,
|
||||
accountName: null,
|
||||
accountNumber: null,
|
||||
fansNum: null,
|
||||
tel: null,
|
||||
addrId:null,
|
||||
price:null,
|
||||
content:null,
|
||||
addrId: null,
|
||||
price: null,
|
||||
content: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(options){
|
||||
this.initData(options.id)
|
||||
},
|
||||
onShow(){
|
||||
this.initAddress()
|
||||
this.initPlatForm()
|
||||
},
|
||||
onLoad(options) {
|
||||
this.initData(options.id)
|
||||
},
|
||||
onShow() {
|
||||
this.initAddress()
|
||||
this.initPlatForm()
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
||||
/**初始化数据*/
|
||||
initData(id){
|
||||
if (id){
|
||||
getBusiCardById({id:id}).then(res => {
|
||||
console.log(res.data,133)
|
||||
this.dataObj = res.data
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
} else {
|
||||
this.dataObj = {
|
||||
platformCode: "xiaohongshu",
|
||||
accountName:null,
|
||||
accountNumber:null,
|
||||
fansNum: null,
|
||||
tel: null,
|
||||
addrId:null,
|
||||
price:null,
|
||||
content:null,
|
||||
}
|
||||
}
|
||||
},
|
||||
/**初始化数据*/
|
||||
initData(id) {
|
||||
if (id) {
|
||||
getBusiCardById({
|
||||
id: id
|
||||
}).then(res => {
|
||||
console.log(res.data, 133)
|
||||
this.dataObj = res.data
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
} else {
|
||||
this.dataObj = {
|
||||
platformCode: "xiaohongshu",
|
||||
accountName: null,
|
||||
accountNumber: null,
|
||||
fansNum: null,
|
||||
tel: null,
|
||||
addrId: null,
|
||||
price: null,
|
||||
content: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**初始化分类*/
|
||||
initPlatForm(){
|
||||
uniListByParentCode({code:"dl_platform"}).then(res=>{
|
||||
this.range = res.data
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**初始化分类*/
|
||||
initPlatForm() {
|
||||
uniListByParentCode({
|
||||
code: "dl_platform"
|
||||
}).then(res => {
|
||||
this.range = res.data
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
/**查询当前登录用户的地址*/
|
||||
initAddress(){
|
||||
uniSelectList().then(res => {
|
||||
this.addressList = res.data
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**查询当前登录用户的地址*/
|
||||
initAddress() {
|
||||
uniSelectList().then(res => {
|
||||
this.addressList = res.data
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
//改变选中值
|
||||
change(e, type) {},
|
||||
//改变选中值
|
||||
change(e, type) {},
|
||||
|
||||
/**选择收货地址*/
|
||||
chooseAddr() {
|
||||
/**选择收货地址*/
|
||||
chooseAddr() {
|
||||
|
||||
},
|
||||
},
|
||||
|
||||
/**提交*/
|
||||
submitForm(){
|
||||
if (this.dataObj.platformCode == null || this.dataObj.platformCode == ""){
|
||||
toast("平台不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.accountNumber == null || this.dataObj.accountNumber == ""){
|
||||
toast("平台账号不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.accountName == null || this.dataObj.accountName == ""){
|
||||
toast("平台昵称不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.fansNum == null || this.dataObj.fansNum == ""){
|
||||
toast("粉丝数不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.tel == null || this.dataObj.tel == ""){
|
||||
toast("电话不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.addrId == null || this.dataObj.addrId == ""){
|
||||
toast("收货地址不能为空")
|
||||
return
|
||||
}
|
||||
// console.log(this.fileList,'fileList')
|
||||
applyBusiCard(this.dataObj).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
duration: 2000,
|
||||
title: '保存成功'
|
||||
});
|
||||
uni.navigateBack()
|
||||
}
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
/**提交*/
|
||||
submitForm() {
|
||||
if (this.dataObj.platformCode == null || this.dataObj.platformCode == "") {
|
||||
toast("平台不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.accountNumber == null || this.dataObj.accountNumber == "") {
|
||||
toast("平台账号不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.accountName == null || this.dataObj.accountName == "") {
|
||||
toast("平台昵称不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.fansNum == null || this.dataObj.fansNum == "") {
|
||||
toast("粉丝数不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.tel == null || this.dataObj.tel == "") {
|
||||
toast("电话不能为空")
|
||||
return
|
||||
}
|
||||
if (this.dataObj.addrId == null || this.dataObj.addrId == "") {
|
||||
toast("收货地址不能为空")
|
||||
return
|
||||
}
|
||||
// console.log(this.fileList,'fileList')
|
||||
applyBusiCard(this.dataObj).then(res => {
|
||||
if (res.code == 200) {
|
||||
uni.showToast({
|
||||
icon: 'success',
|
||||
duration: 2000,
|
||||
title: '保存成功'
|
||||
});
|
||||
uni.navigateBack()
|
||||
}
|
||||
}).catch((e) => {
|
||||
uni.showToast({
|
||||
icon: 'error',
|
||||
duration: 2000,
|
||||
title: e
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
afterRead(file) {
|
||||
|
||||
@ -239,11 +256,11 @@
|
||||
url: '',
|
||||
filePath: file.tempFilePaths[i]
|
||||
}).then((res) => {
|
||||
console.log(res,'215')
|
||||
console.log(res, '215')
|
||||
this.fileList.push({
|
||||
url: config.baseUrl + res.data
|
||||
})
|
||||
console.log(this.fileList,'fileList')
|
||||
console.log(this.fileList, 'fileList')
|
||||
})
|
||||
}
|
||||
},
|
||||
@ -257,8 +274,11 @@
|
||||
|
||||
<style lang="scss">
|
||||
.my-card-box {
|
||||
padding-top: calc(90rpx + var(--status-bar-height));
|
||||
border-top: 1rpx solid #F4F4F4;
|
||||
padding: 30rpx;
|
||||
background-color: white;
|
||||
padding-left: 30rpx;
|
||||
padding-right: 30rpx;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 30rpx;
|
||||
@ -266,10 +286,12 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
justify-content: start;
|
||||
position: relative;
|
||||
|
||||
.card-detail {
|
||||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
background-color: white;
|
||||
@ -277,7 +299,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
justify-content: start;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
|
||||
@ -315,7 +315,6 @@
|
||||
|
||||
.my-card-box {
|
||||
padding-top: calc(90rpx + var(--status-bar-height));
|
||||
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
|
||||
@ -1,112 +0,0 @@
|
||||
<template>
|
||||
<view class="help-container">
|
||||
<view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
|
||||
<view class="text-title">
|
||||
<view :class="item.icon"></view>{{ item.title }}
|
||||
</view>
|
||||
<view class="childList">
|
||||
<view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover"
|
||||
@click="handleText(child)">
|
||||
<view class="text-item">{{ child.title }}</view>
|
||||
<view class="line" v-if="zindex !== item.childList.length - 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
icon: 'iconfont icon-github',
|
||||
title: '若依问题',
|
||||
childList: [{
|
||||
title: '若依开源吗？',
|
||||
content: '开源'
|
||||
}, {
|
||||
title: '若依可以商用吗？',
|
||||
content: '可以'
|
||||
}, {
|
||||
title: '若依官网地址多少？',
|
||||
content: 'http://ruoyi.vip'
|
||||
}, {
|
||||
title: '若依文档地址多少？',
|
||||
content: 'http://doc.ruoyi.vip'
|
||||
}]
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-help',
|
||||
title: '其他问题',
|
||||
childList: [{
|
||||
title: '如何退出登录？',
|
||||
content: '请点击[我的] - [应用设置] - [退出登录]即可退出登录',
|
||||
}, {
|
||||
title: '如何修改用户头像？',
|
||||
content: '请点击[我的] - [选择头像] - [点击提交]即可更换用户头像',
|
||||
}, {
|
||||
title: '如何修改登录密码？',
|
||||
content: '请点击[我的] - [应用设置] - [修改密码]即可修改登录密码',
|
||||
}]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleText(item) {
|
||||
this.$tab.navigateTo(`/pages/common/textview/index?title=${item.title}&content=${item.content}`)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.help-container {
|
||||
margin-bottom: 100rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.childList {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
|
||||
border-radius: 16rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
color: #303133;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 16px;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text-item {
|
||||
font-size: 28rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.question {
|
||||
color: #606266;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
@ -1,127 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="example">
|
||||
<uni-forms ref="form" :model="user" labelWidth="80px">
|
||||
<uni-forms-item label="用户昵称" name="nickName">
|
||||
<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号码" name="phonenumber">
|
||||
<uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="邮箱" name="email">
|
||||
<uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="性别" name="sex" required>
|
||||
<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button type="primary" @click="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserProfile } from "@/api/system/user"
|
||||
import { updateUserProfile } from "@/api/system/user"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
nickName: "",
|
||||
phonenumber: "",
|
||||
email: "",
|
||||
sex: ""
|
||||
},
|
||||
sexs: [{
|
||||
text: '男',
|
||||
value: "0"
|
||||
}, {
|
||||
text: '女',
|
||||
value: "1"
|
||||
}],
|
||||
rules: {
|
||||
nickName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '用户昵称不能为空'
|
||||
}]
|
||||
},
|
||||
phonenumber: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '手机号码不能为空'
|
||||
}, {
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
errorMessage: '请输入正确的手机号码'
|
||||
}]
|
||||
},
|
||||
email: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '邮箱地址不能为空'
|
||||
}, {
|
||||
format: 'email',
|
||||
errorMessage: '请输入正确的邮箱地址'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUser()
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
this.user = response.data
|
||||
})
|
||||
},
|
||||
submit(ref) {
|
||||
this.$refs.form.validate().then(res => {
|
||||
updateUserProfile(this.user).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-list>
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
|
||||
</uni-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserProfile } from "@/api/system/user"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {},
|
||||
roleGroup: "",
|
||||
postGroup: ""
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUser()
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
this.user = response.data
|
||||
this.roleGroup = response.roleGroup
|
||||
this.postGroup = response.postGroup
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
@ -122,6 +122,12 @@
|
||||
<view class="text-dom">名片</view>
|
||||
<uni-icons type="right" color="#623109" size="12"></uni-icons>
|
||||
</view>
|
||||
<view class="menu-item" v-if="'02'==localUserType" @click="goBlackList()">
|
||||
<!-- <image src="@/static/mine/mingpian.png" mode="aspectFit"></image> -->
|
||||
<image src="@/static/mine/caise/mingpian.png" mode="aspectFit"></image>
|
||||
<view class="text-dom">名片</view>
|
||||
<uni-icons type="right" color="#623109" size="12"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -149,7 +155,7 @@
|
||||
<image src="@/static/mine/caise/shequ.png" mode="aspectFit"></image>
|
||||
<view>加入社区</view>
|
||||
</view>
|
||||
<view class="menu-item">
|
||||
<view class="menu-item" @click="goSuggest()">
|
||||
<!-- <image src="@/static/mine/yijianfankui.png" mode="aspectFit"></image> -->
|
||||
<image src="@/static/mine/caise/yijian.png" mode="aspectFit"></image>
|
||||
<view>意见反馈</view>
|
||||
@ -243,6 +249,18 @@
|
||||
goMyCard() {
|
||||
this.$tab.navigateTo('/pages/mine/card/my-card')
|
||||
},
|
||||
/**
|
||||
* 跳转黑名单列表
|
||||
*/
|
||||
goBlackList() {
|
||||
this.$tab.navigateTo('/pages/mine/set/black-list')
|
||||
},
|
||||
/**
|
||||
* 跳转建议列表
|
||||
*/
|
||||
goSuggest() {
|
||||
this.$tab.navigateTo('/pages/mine/set/suggest')
|
||||
},
|
||||
/**
|
||||
* 跳转地址列表
|
||||
*/
|
||||
|
||||
@ -1,85 +0,0 @@
|
||||
<template>
|
||||
<view class="pwd-retrieve-container">
|
||||
<uni-forms ref="form" :value="user" labelWidth="80px">
|
||||
<uni-forms-item name="oldPassword" label="旧密码">
|
||||
<uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="newPassword" label="新密码">
|
||||
<uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="confirmPassword" label="确认密码">
|
||||
<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
|
||||
</uni-forms-item>
|
||||
<button type="primary" @click="submit">提交</button>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateUserPwd } from "@/api/system/user"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
},
|
||||
rules: {
|
||||
oldPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '旧密码不能为空'
|
||||
}]
|
||||
},
|
||||
newPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '新密码不能为空',
|
||||
},
|
||||
{
|
||||
minLength: 6,
|
||||
maxLength: 20,
|
||||
errorMessage: '长度在 6 到 20 个字符'
|
||||
}
|
||||
]
|
||||
},
|
||||
confirmPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '确认密码不能为空'
|
||||
}, {
|
||||
validateFunction: (rule, value, data) => data.newPassword === value,
|
||||
errorMessage: '两次输入的密码不一致'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs.form.validate().then(res => {
|
||||
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
|
||||
this.$modal.msgSuccess("修改成功")
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.pwd-retrieve-container {
|
||||
padding-top: 36rpx;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
225
pages/mine/set/black-list.vue
Normal file
225
pages/mine/set/black-list.vue
Normal file
@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<view class="my-card-box">
|
||||
<navigation-bar-vue title="我的黑名单" style="width: 100%;" background-color="#ffffff"
|
||||
title-color="#000000"></navigation-bar-vue>
|
||||
<view class="addr-list-box">
|
||||
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
|
||||
@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
|
||||
<view class="user-image-box" v-for="(item,index) in dataList">
|
||||
<view class="dl-image-box">
|
||||
<image v-if="!item.avatar" class="touxiang" src="@/static/images/profile.jpg" mode="aspectFit">
|
||||
</image>
|
||||
<image v-else class="touxiang" :src="item.avatar" mode="aspectFit"></image>
|
||||
<image class="sex" src="@/static/mine/sex_girl.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="name-box">
|
||||
<view class="title-box">
|
||||
{{item.nickName || ''}}
|
||||
</view>
|
||||
<view class="bottom-box">
|
||||
<view class="fans-box">
|
||||
<view class="fans-num">{{item.createTime}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="edit-box" @click="remove(item.id)">
|
||||
<view class="move-button">移除</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center" v-if="dataList.length==0">
|
||||
<image class="" src="@/static/images/nothing.png"></image>
|
||||
</view>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||||
export default {
|
||||
components: {
|
||||
navigationBarVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [{
|
||||
nickName: "李林",
|
||||
createTime: "2024-02-10 12:22:44",
|
||||
}, {
|
||||
nickName: "李林",
|
||||
createTime: "2024-02-10 12:22:44",
|
||||
}],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0,
|
||||
//下来刷新状态
|
||||
isTriggered: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 上滑加载数据
|
||||
*/
|
||||
onReachBottomCus() {
|
||||
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
||||
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
|
||||
toast("没有更多数据了")
|
||||
return
|
||||
}
|
||||
//页码+1,调用获取数据的方法获取第二页数据
|
||||
this.queryParams.pageNum++
|
||||
},
|
||||
/**
|
||||
* 下拉刷新数据
|
||||
*/
|
||||
onRefresherrefresh() {
|
||||
this.isTriggered = true
|
||||
this.queryParams.pageNum = 1
|
||||
this.total = 0
|
||||
},
|
||||
remove(id) {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-card-box {
|
||||
padding-top: calc(90rpx + var(--status-bar-height));
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 32rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.addr-list-box {
|
||||
background-color: #F6F6F6;
|
||||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 91rpx);
|
||||
overflow-y: scroll;
|
||||
padding: 0 30rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
.user-image-box {
|
||||
width: 100%;
|
||||
background-color: white;
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.dl-image-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100rpx;
|
||||
position: relative;
|
||||
|
||||
.touxiang {
|
||||
border-radius: 50%;
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
|
||||
.sex {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
position: absolute;
|
||||
bottom: 0rpx;
|
||||
right: 0rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.name-box {
|
||||
display: flex;
|
||||
padding-left: 20rpx;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
image {
|
||||
margin-left: 10rpx;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.fans-box {
|
||||
max-width: 200rpx;
|
||||
margin-right: 10rpx;
|
||||
font-size: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5rpx 10rpx;
|
||||
color: #929292;
|
||||
|
||||
image {
|
||||
height: 20rpx;
|
||||
width: 20rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.member-box {
|
||||
flex: 1;
|
||||
font-size: 18rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #FC1F3E;
|
||||
color: white;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.fans-num {}
|
||||
}
|
||||
|
||||
.edit-box {
|
||||
color: #929292;
|
||||
text-align: right;
|
||||
padding-right: 20rpx;
|
||||
font-size: 22rpx;
|
||||
width: 130rpx;
|
||||
|
||||
.move-button {
|
||||
color: #FC405B;
|
||||
text-align: center;
|
||||
padding: 8rpx 20rpx;
|
||||
background-color: white;
|
||||
border-radius: 25rpx;
|
||||
border: 1rpx solid #FC405B;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
pages/mine/set/my-suggest.vue
Normal file
148
pages/mine/set/my-suggest.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="my-card-box">
|
||||
<navigation-bar-vue title="我的反馈" style="width: 100%;" background-color="#ffffff"
|
||||
title-color="#000000"></navigation-bar-vue>
|
||||
<view class="addr-list-box">
|
||||
<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
|
||||
@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
|
||||
<view v-for="(item,index) in dataList" class="addr-item-box">
|
||||
<view class="addr-item-top">
|
||||
{{item.content}}
|
||||
</view>
|
||||
<view class="addr-item-opt">
|
||||
<uni-file-picker samll="true" :value="item.imagesList" readonly="true"
|
||||
limit="9"></uni-file-picker>
|
||||
</view>
|
||||
<view class="addr-bottom">
|
||||
{{item.createTime}}
|
||||
</view>
|
||||
</view>
|
||||
<view style="text-align: center" v-if="dataList.length==0">
|
||||
<image class="" src="@/static/images/nothing.png"></image>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||||
export default {
|
||||
components: {
|
||||
navigationBarVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataList: [{
|
||||
createTime: "2024-02-10 12:22:44",
|
||||
content: "我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见我的意见",
|
||||
images: "",
|
||||
imagesList: [
|
||||
'/profile/upload/2025/03/18/f936812fd66e18007385b187cc6b12c_20250318105540A001.png',
|
||||
'/profile/upload/2025/03/18/5_20250318172439A002.png'
|
||||
],
|
||||
backContent: "反馈内容",
|
||||
backImages: [],
|
||||
backTime: "2024-02-10 12:22:44",
|
||||
}],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0,
|
||||
//下来刷新状态
|
||||
isTriggered: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 上滑加载数据
|
||||
*/
|
||||
onReachBottomCus() {
|
||||
//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
|
||||
if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
|
||||
toast("没有更多数据了")
|
||||
return
|
||||
}
|
||||
//页码+1,调用获取数据的方法获取第二页数据
|
||||
this.queryParams.pageNum++
|
||||
},
|
||||
/**
|
||||
* 下拉刷新数据
|
||||
*/
|
||||
onRefresherrefresh() {
|
||||
this.isTriggered = true
|
||||
this.queryParams.pageNum = 1
|
||||
this.total = 0
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.my-card-box {
|
||||
padding-top: calc(90rpx + var(--status-bar-height));
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 32rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.addr-list-box {
|
||||
background-color: #F6F6F6;
|
||||
height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 91rpx);
|
||||
overflow-y: scroll;
|
||||
padding: 0 30rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 20rpx;
|
||||
justify-content: start;
|
||||
|
||||
.addr-item-box {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
margin-top: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 1rpx solid #F2F2F2;
|
||||
|
||||
.addr-item-top {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.addr-item-opt {
|
||||
width: 100%;
|
||||
padding-top: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
}
|
||||
|
||||
.addr-bottom {
|
||||
padding-top: 20rpx;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 22rpx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
177
pages/mine/set/suggest.vue
Normal file
177
pages/mine/set/suggest.vue
Normal file
@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view class="suggest-content">
|
||||
<navigation-bar-vue title="意见反馈" style="width: 100%;" background-color="#ffffff"
|
||||
title-color="#000000"></navigation-bar-vue>
|
||||
<view class="card-detail">
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
写下你的建议
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<textarea v-model="dataObj.content" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field">
|
||||
<view class="item-lable is-required">
|
||||
上传材料
|
||||
</view>
|
||||
<view class="item-value">
|
||||
<uni-file-picker :value="fileList" :sizeType="sizeType" @select="afterRead" @delete="deleteFile"
|
||||
limit="9"></uni-file-picker>
|
||||
</view>
|
||||
</view>
|
||||
<view class="item-field" style="align-items: center;">
|
||||
<view class="submit-box" @click="submitForm">提交</view>
|
||||
</view>
|
||||
<view class="item-field" style="align-items: center;">
|
||||
<view class="my-suggest-dom" @click="goMySuggest()">
|
||||
<text>我的反馈</text>
|
||||
<uni-icons type="right" color="#623109" size="12"></uni-icons>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import navigationBarVue from '@/components/navigation/navigationBar.vue';
|
||||
export default {
|
||||
components: {
|
||||
navigationBarVue
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataObj: {
|
||||
content: ""
|
||||
},
|
||||
sizeType: ['compressed'],
|
||||
//图片数组
|
||||
fileList: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
afterRead(file) {
|
||||
for (let i = 0; i < file.tempFilePaths.length; i++) {
|
||||
upload({
|
||||
url: '',
|
||||
filePath: file.tempFilePaths[i]
|
||||
}).then((res) => {
|
||||
console.log(res, '215')
|
||||
this.fileList.push({
|
||||
url: config.baseUrl + res.data
|
||||
})
|
||||
console.log(this.fileList, 'fileList')
|
||||
})
|
||||
}
|
||||
},
|
||||
deleteFile(file, index) {
|
||||
console.log('删除文件');
|
||||
this.fileList.splice(index, 1);
|
||||
},
|
||||
/**提交*/
|
||||
submitForm() {},
|
||||
/**
|
||||
* 去我的建议列表
|
||||
*/
|
||||
goMySuggest() {
|
||||
this.$tab.navigateTo('/pages/mine/set/my-suggest')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.suggest-content {
|
||||
padding-top: calc(90rpx + var(--status-bar-height));
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
color: #363636;
|
||||
font-size: 32rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.card-detail {
|
||||
border-top: 1rpx solid #F2F2F2;
|
||||
width: 100%;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: white;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.item-field {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: self-start;
|
||||
justify-content: center;
|
||||
|
||||
.item-lable {
|
||||
padding: 15rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
.item-value {
|
||||
width: 100%;
|
||||
|
||||
input {
|
||||
padding-left: 20rpx;
|
||||
line-height: 1;
|
||||
height: 70rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.choose-add {
|
||||
color: #686868;
|
||||
padding: 10rpx 0 10rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: 150rpx;
|
||||
color: #686868;
|
||||
padding: 10rpx 0 10rpx 20rpx;
|
||||
border: 1rpx solid #dcdfe6;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.submit-box {
|
||||
padding: 15rpx 0;
|
||||
background-color: #FC1F3E;
|
||||
color: white;
|
||||
width: 70%;
|
||||
border-radius: 10rpx;
|
||||
margin-top: 80rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.my-suggest-dom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,78 +0,0 @@
|
||||
<template>
|
||||
<view class="setting-container" :style="{height: `${windowHeight}px`}">
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToPwd">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-password menu-icon"></view>
|
||||
<view>修改密码</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleToUpgrade">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-refresh menu-icon"></view>
|
||||
<view>检查更新</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleCleanTmp">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-clean menu-icon"></view>
|
||||
<view>清理缓存</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu">
|
||||
<view class="cu-item item-box">
|
||||
<view class="content text-center" @click="handleLogout">
|
||||
<text class="text-black">退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
windowHeight: uni.getSystemInfoSync().windowHeight
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleToPwd() {
|
||||
this.$tab.navigateTo('/pages/mine/pwd/index')
|
||||
},
|
||||
handleToUpgrade() {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
},
|
||||
handleCleanTmp() {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
},
|
||||
handleLogout() {
|
||||
this.$modal.confirm('确定注销并退出系统吗？').then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
this.$tab.reLaunch('/pages/index')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
background-color: #FFFFFF;
|
||||
margin: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
color: #303133;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<text class="text">用户管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
data: [{
|
||||
image: '/static/images/banner/banner01.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner02.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner03.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBannerItem(item) {
|
||||
console.info(item)
|
||||
},
|
||||
changeSwiper(e) {
|
||||
this.current = e.detail.current
|
||||
},
|
||||
changeGrid(e) {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,183 +0,0 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<text class="text">用户管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
swiperDotIndex: 0,
|
||||
data: [{
|
||||
image: '/static/images/banner/banner01.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner02.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner03.jpg'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickBannerItem(item) {
|
||||
console.info(item)
|
||||
},
|
||||
changeSwiper(e) {
|
||||
this.current = e.detail.current
|
||||
},
|
||||
changeGrid(e) {
|
||||
this.$modal.showToast('模块建设中~')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
<text class="file-title">{{ title }}</text>
|
||||
<text class="file-count">{{ filesList.length }}/{{ limitLength }}</text>
|
||||
</view>
|
||||
<upload-image v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly"
|
||||
<upload-image :samll="samll" v-if="fileMediatype === 'image' && showType === 'grid'" :readonly="readonly"
|
||||
:image-styles="imageStyles" :files-list="filesList" :limit="limitLength" :disablePreview="disablePreview"
|
||||
:delIcon="delIcon" @uploadFiles="uploadFiles" @choose="choose" @delFile="delFile">
|
||||
<slot>
|
||||
@ -115,6 +115,10 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
samll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
delIcon: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
@ -189,7 +193,7 @@
|
||||
sourceType: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['album', 'camera']
|
||||
return ['album', 'camera']
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -290,19 +294,19 @@
|
||||
return this.uploadFiles(files)
|
||||
},
|
||||
async setValue(newVal, oldVal) {
|
||||
const newData = async (v) => {
|
||||
const newData = async (v) => {
|
||||
const reg = /cloud:\/\/([\w.]+\/?)\S*/
|
||||
let url = ''
|
||||
if(v.fileID){
|
||||
if (v.fileID) {
|
||||
url = v.fileID
|
||||
}else{
|
||||
} else {
|
||||
url = v.url
|
||||
}
|
||||
if (reg.test(url)) {
|
||||
v.fileID = url
|
||||
v.url = await this.getTempFileURL(url)
|
||||
}
|
||||
if(v.url) v.path = v.url
|
||||
if (v.url) v.path = v.url
|
||||
return v
|
||||
}
|
||||
if (this.returnType === 'object') {
|
||||
@ -313,13 +317,13 @@
|
||||
}
|
||||
} else {
|
||||
if (!newVal) newVal = []
|
||||
for(let i =0 ;i < newVal.length ;i++){
|
||||
for (let i = 0; i < newVal.length; i++) {
|
||||
let v = newVal[i]
|
||||
await newData(v)
|
||||
}
|
||||
}
|
||||
this.localValue = newVal
|
||||
if (this.form && this.formItem &&!this.is_reset) {
|
||||
if (this.form && this.formItem && !this.is_reset) {
|
||||
this.is_reset = false
|
||||
this.formItem.setValue(this.localValue)
|
||||
}
|
||||
@ -464,7 +468,7 @@
|
||||
const reg = /cloud:\/\/([\w.]+\/?)\S*/
|
||||
if (reg.test(item.url)) {
|
||||
this.files[index].url = await this.getTempFileURL(item.url)
|
||||
}else{
|
||||
} else {
|
||||
this.files[index].url = item.url
|
||||
}
|
||||
|
||||
@ -552,7 +556,7 @@
|
||||
let data = []
|
||||
if (this.returnType === 'object') {
|
||||
data = this.backObject(this.files)[0]
|
||||
this.localValue = data?data:null
|
||||
this.localValue = data ? data : null
|
||||
} else {
|
||||
data = this.backObject(this.files)
|
||||
if (!this.localValue) {
|
||||
@ -582,12 +586,12 @@
|
||||
name: v.name,
|
||||
path: v.path,
|
||||
size: v.size,
|
||||
fileID:v.fileID,
|
||||
fileID: v.fileID,
|
||||
url: v.url,
|
||||
// 修改删除一个文件后不能再上传的bug, #694
|
||||
uuid: v.uuid,
|
||||
status: v.status,
|
||||
cloudPath: v.cloudPath
|
||||
uuid: v.uuid,
|
||||
status: v.status,
|
||||
cloudPath: v.cloudPath
|
||||
})
|
||||
})
|
||||
return newFilesData
|
||||
@ -664,4 +668,4 @@
|
||||
position: absolute;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
@ -2,14 +2,16 @@
|
||||
<view class="uni-file-picker__container">
|
||||
<view class="file-picker__box" v-for="(item,index) in filesList" :key="index" :style="boxStyle">
|
||||
<view class="file-picker__box-content" :style="borderStyle">
|
||||
<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)"></image>
|
||||
<image class="file-image" :src="item.url" mode="aspectFill" @click.stop="prviewImage(item,index)">
|
||||
</image>
|
||||
<view v-if="delIcon && !readonly" class="icon-del-box" @click.stop="delFile(index)">
|
||||
<view class="icon-del"></view>
|
||||
<view class="icon-del rotate"></view>
|
||||
</view>
|
||||
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 " class="file-picker__progress">
|
||||
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress" stroke-width="4"
|
||||
:backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
|
||||
<view v-if="(item.progress && item.progress !== 100) ||item.progress===0 "
|
||||
class="file-picker__progress">
|
||||
<progress class="file-picker__progress-item" :percent="item.progress === -1?0:item.progress"
|
||||
stroke-width="4" :backgroundColor="item.errMsg?'#ff5a5f':'#EBEBEB'" />
|
||||
</view>
|
||||
<view v-if="item.errMsg" class="file-picker__mask" @click.stop="uploadFiles(item,index)">
|
||||
点击重试
|
||||
@ -30,7 +32,7 @@
|
||||
<script>
|
||||
export default {
|
||||
name: "uploadImage",
|
||||
emits:['uploadFiles','choose','delFile'],
|
||||
emits: ['uploadFiles', 'choose', 'delFile'],
|
||||
props: {
|
||||
filesList: {
|
||||
type: Array,
|
||||
@ -38,7 +40,11 @@
|
||||
return []
|
||||
}
|
||||
},
|
||||
disabled:{
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
samll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
@ -64,9 +70,9 @@
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
readonly:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -100,15 +106,21 @@
|
||||
if (height !== 'auto') {
|
||||
obj.width = this.value2px(height)
|
||||
} else {
|
||||
obj.width = '33.3%'
|
||||
if (true == this.samll) {
|
||||
obj.width = '25%'
|
||||
obj['padding-top'] = '25%'
|
||||
} else {
|
||||
obj.width = '33.3%'
|
||||
}
|
||||
|
||||
}
|
||||
} else {
|
||||
obj.width = this.value2px(width)
|
||||
}
|
||||
|
||||
let classles = ''
|
||||
for(let i in obj){
|
||||
classles+= `${i}:${obj[i]};`
|
||||
for (let i in obj) {
|
||||
classles += `${i}:${obj[i]};`
|
||||
}
|
||||
return classles
|
||||
},
|
||||
@ -134,8 +146,8 @@
|
||||
}
|
||||
}
|
||||
let classles = ''
|
||||
for(let i in obj){
|
||||
classles+= `${i}:${obj[i]};`
|
||||
for (let i in obj) {
|
||||
classles += `${i}:${obj[i]};`
|
||||
}
|
||||
return classles
|
||||
}
|
||||
@ -152,10 +164,10 @@
|
||||
},
|
||||
prviewImage(img, index) {
|
||||
let urls = []
|
||||
if(Number(this.limit) === 1&&this.disablePreview&&!this.disabled){
|
||||
if (Number(this.limit) === 1 && this.disablePreview && !this.disabled) {
|
||||
this.$emit("choose")
|
||||
}
|
||||
if(this.disablePreview) return
|
||||
if (this.disablePreview) return
|
||||
this.filesList.forEach(i => {
|
||||
urls.push(i.url)
|
||||
})
|
||||
@ -289,4 +301,4 @@
|
||||
background-color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user