477 lines
13 KiB
Vue
477 lines
13 KiB
Vue
<template>
|
||
<view class="custom-content">
|
||
<!--顶部搜索框-->
|
||
<view class="search-content">
|
||
<view class="search-box">
|
||
<text class="iconfont icon-sousuo" @click="searchCustom()"></text>
|
||
<input class="search-input" type='number' placeholder='请输入会员昵称' v-model="search.nickname" @input="searchCustom()" />
|
||
</view>
|
||
</view>
|
||
<!-- 客户列表 -->
|
||
<view class="custom-list">
|
||
<view class="list-item" v-for="(item,index) in list" :key="index">
|
||
<view class="left-avatar">
|
||
<image v-if="item.avatar.length > 10" :src="item.avatar" mode="widthFix"/>
|
||
</view>
|
||
<view class="center-info">
|
||
<view class="info-top">
|
||
<view class="nickname">{{ item.nickname }}</view>
|
||
<view class="custom-id">{{ item.uid }}</view>
|
||
</view>
|
||
<view class="info-bottom">积分：{{ item.merchant_integral }}</view>
|
||
</view>
|
||
<view class="right-btn">
|
||
<view class="give-btn" @click="showIntegralChangePopup(item)">赠送积分</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 积分变更弹框 -->
|
||
<uni-popup ref="integralChangePopup">
|
||
<view class="integral-change">
|
||
<view class="integral-change-content">
|
||
<view class="title">赠送积分</view>
|
||
<view class="form-content">
|
||
<view class="form-content-box">
|
||
<view class="box-title">变更数量：</view>
|
||
<view class="box-value">
|
||
<input type='number' placeholder='输入变更数量' v-model="integral_change.number"/>
|
||
</view>
|
||
</view>
|
||
<view class="form-content-box">
|
||
<view class="box-title">变更凭证：</view>
|
||
<view class="box-value">
|
||
<!--图片内容-->
|
||
<view class="image-img image-size-set" v-if="integral_change.voucher_image" @click="uploadImage">
|
||
<image class="image-img-image" :src="integral_change.voucher_image" mode="widthFix"></image>
|
||
<view class="change-image-btn">替换图片</view>
|
||
</view>
|
||
<!--上传图片按钮-->
|
||
<view class="upload-btn-box image-size-set" v-else @click="uploadImage">
|
||
<image class="upload-btn-icon" src="@/static/images/custom/creamer.png" mode="widthFix"></image>
|
||
上传凭证
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="submit-button">
|
||
<view class="submit-btn" @click="submitIntegralChange">提交</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<!-- 图片上传 -->
|
||
<avatar @upload="doUpload" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></avatar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import avatar from "@/components/yq-avatar/yq-avatar.vue";
|
||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||
import { getCustomList,customIntegralChange } from "@/api/user.js";
|
||
export default {
|
||
name: 'custom',
|
||
components: {
|
||
avatar
|
||
},
|
||
data() {
|
||
return {
|
||
mer_id: 0,
|
||
list: [],
|
||
search:{
|
||
page: 1,
|
||
limit: 20,
|
||
nickname: '',
|
||
},
|
||
// 积分改变
|
||
integral_change:{
|
||
uid: 0,
|
||
pm: 1,// 0 = 支出 1 = 获得
|
||
number: '',// 变更数量
|
||
voucher_image: '',// 积分变更凭证
|
||
},
|
||
imgName: ""
|
||
}
|
||
},
|
||
computed: { },
|
||
onLoad: function(options) {
|
||
this.mer_id = options.mer_id || 0;
|
||
if(this.mer_id <= 0){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '非法访问，参数不明确！',
|
||
success: function success(res) {
|
||
uni.navigateBack();
|
||
}
|
||
});
|
||
}
|
||
// 获取用户列表
|
||
this.getCustom();
|
||
},
|
||
methods: {
|
||
// 获取用户列表
|
||
getCustom(isRefresh = false) {
|
||
let _this = this;
|
||
// 是否为刷新
|
||
if(isRefresh) {
|
||
_this.search.page = 1;
|
||
_this.list = [];
|
||
}
|
||
// 发起请求
|
||
getCustomList(_this.mer_id, _this.search).then(res => {
|
||
let list = res.data.list || {};
|
||
if(Object.values(list).length > 0){
|
||
// 数据接收
|
||
_this.list = _this.list.concat(list);
|
||
_this.search.page++;
|
||
}
|
||
}).catch(err => {
|
||
console.log("错误 catch：",err);
|
||
})
|
||
},
|
||
// 搜索
|
||
searchCustom(){
|
||
this.$nextTick(()=>{
|
||
this.getCustom(true);
|
||
});
|
||
},
|
||
// 赠送积分 - 初始化并且显示弹框
|
||
showIntegralChangePopup(item){
|
||
let _this = this;
|
||
_this.integral_change = _this.$options.data().integral_change;
|
||
_this.integral_change.uid = item.uid;
|
||
_this.$refs.integralChangePopup.open('center');
|
||
},
|
||
// 图片上传 - 触发上传
|
||
uploadImage() {
|
||
let avatar = this.$refs.avatar;
|
||
avatar.fChooseImg(1,{selWidth: '350upx', selHeight: '350upx', inner: true});
|
||
},
|
||
// 图片上传 - 上传
|
||
doUpload(rsp) {
|
||
let _this = this
|
||
uni.uploadFile({
|
||
url: HTTP_REQUEST_URL + '/api/upload/image/field',
|
||
filePath: rsp.path,
|
||
name: 'field',
|
||
formData: {
|
||
'filename': rsp.path,
|
||
'name': _this.imgName
|
||
},
|
||
header: {
|
||
// #ifdef MP
|
||
"Content-Type": "multipart/form-data",
|
||
// #endif
|
||
// [TOKENNAME]: 'Bearer ' + store.state.app.token
|
||
},
|
||
success: (uploadFileRes) => {
|
||
let imgData = JSON.parse(uploadFileRes.data)
|
||
// console.log(imgData.data);
|
||
_this.integral_change.voucher_image = imgData.data.path || '';
|
||
}
|
||
});
|
||
},
|
||
// 提交赠送积分请求
|
||
submitIntegralChange(){
|
||
let _this = this;
|
||
// 数据验证
|
||
let integralChangeInfo = Object.assign({},_this.integral_change);
|
||
let number = isNaN(parseFloat(integralChangeInfo.number)) ? 0 : parseFloat(integralChangeInfo.number);
|
||
if(number <= 0) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请输入正确的变更数量！',
|
||
});
|
||
return false;
|
||
}
|
||
if(integralChangeInfo.voucher_image.length <= 0){
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '请上传凭证！',
|
||
});
|
||
return false;
|
||
}
|
||
// 发起请求
|
||
customIntegralChange(_this.mer_id, integralChangeInfo).then(res => {
|
||
// 关闭弹框
|
||
_this.$refs.integralChangePopup.close();
|
||
// 刷新
|
||
_this.getCustom(true);
|
||
// 提示
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: res.message,
|
||
});
|
||
}).catch(err => {
|
||
console.log("错误 catch：",err);
|
||
})
|
||
},
|
||
// 加载动画
|
||
loadingModel(){
|
||
uni.showLoading({
|
||
title: '加载中...',
|
||
mask: true
|
||
});
|
||
}
|
||
},
|
||
onReachBottom() {
|
||
this.getCustom()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.custom-content{
|
||
// 搜索框
|
||
.search-content{
|
||
width: 100vw;
|
||
background: url("@/static/images/custom/custom_top_bg.jpg") no-repeat;
|
||
padding: 20rpx 30rpx;
|
||
|
||
.search-box{
|
||
width: 100%;
|
||
height: 70rpx;
|
||
padding: 10rpx 15rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
|
||
.icon-sousuo{
|
||
width: calc(70rpx - 15rpx);
|
||
padding-right: 15rpx;
|
||
height: calc(70rpx - (10rpx * 2));
|
||
line-height: calc(70rpx - (10rpx * 2));
|
||
text-align: center;
|
||
}
|
||
.search-input{
|
||
width: calc(100% - 70rpx + 15rpx);
|
||
height: calc(70rpx - (10rpx * 2));
|
||
}
|
||
}
|
||
}
|
||
|
||
// 客户列表
|
||
.custom-list{
|
||
width: 100vw;
|
||
background: #FFFFFF;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
.list-item:not(:last-child){
|
||
border-bottom: 2rpx solid #f6f6f6;
|
||
}
|
||
.list-item{
|
||
--item-height-value-: 100rpx;
|
||
|
||
width: 100vw;
|
||
padding: 20rpx 30rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
.left-avatar{
|
||
width: 100rpx;
|
||
height: var(--item-height-value-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
image{
|
||
width: 80rpx !important;
|
||
height: 80rpx !important;
|
||
border-radius: 50% !important;
|
||
}
|
||
}
|
||
.center-info{
|
||
width: calc(100% - 100rpx - 150rpx);
|
||
height: var(--item-height-value-);
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
padding-left: 10rpx;
|
||
.info-top{
|
||
width: 100%;
|
||
height: calc(100rpx - 40rpx);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
.nickname{
|
||
font-size: 28rpx;
|
||
}
|
||
.custom-id{
|
||
background: #ffeed5;
|
||
padding: 0rpx 8rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 23rpx;
|
||
color: #f8cc88;
|
||
width: max-content;
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
margin-left: 10rpx;
|
||
}
|
||
}
|
||
.info-bottom{
|
||
width: 100%;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
font-size: 26rpx;
|
||
color: #9e9e9e;
|
||
}
|
||
}
|
||
.right-btn{
|
||
width: 150rpx;
|
||
height: var(--item-height-value-);
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.give-btn{
|
||
background: #ea9a1f;
|
||
padding: 6rpx 15rpx;
|
||
border-radius: 50rpx;
|
||
font-size: 26rpx;
|
||
color: #FFFFFF;
|
||
width: max-content;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 积分变更弹框
|
||
.integral-change{
|
||
width: 100vw;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
.integral-change-content{
|
||
width: calc(100vw - (20rpx * 2) - (30rpx * 2));
|
||
background: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
padding: 20rpx;
|
||
|
||
.title{
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
height: 60rpx;
|
||
line-height: 45rpx;
|
||
margin-bottom: 35rpx;
|
||
}
|
||
.form-content{
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
flex-wrap: nowrap;
|
||
align-items: flex-start;
|
||
.form-content-box:not(:last-child){
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.form-content-box{
|
||
--box-width-: 180rpx;
|
||
|
||
width: 100%;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
line-height: 60rpx;
|
||
.box-title{
|
||
width: var(--box-width-);
|
||
text-align: right;
|
||
font-size: 28rpx;
|
||
}
|
||
.box-value{
|
||
width: calc(100% - var(--box-width-));
|
||
|
||
.image-size-set{
|
||
width: 210rpx;
|
||
height: 210rpx;
|
||
border: 2rpx solid #dddddd;
|
||
border-radius: 8rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
|
||
image{
|
||
max-width: 100% !important;
|
||
max-height: 100% !important;
|
||
}
|
||
}
|
||
|
||
.upload-btn-box{
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
display: inline-flex;
|
||
flex-direction: column!important;
|
||
justify-content: center;
|
||
flex-wrap: nowrap;
|
||
align-items: center;
|
||
.upload-btn-icon{
|
||
width: 45rpx !important;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
}
|
||
.image-img{
|
||
position: relative;
|
||
border: unset!important;
|
||
.change-image-btn{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 24rpx!important;
|
||
height: 40rpx;
|
||
line-height: 40rpx;
|
||
background: rgba(0,0,0,.5);
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
.submit-button{
|
||
width: 100%;
|
||
margin-top: 60rpx;
|
||
display: inline-flex;
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.submit-btn{
|
||
color: #fff;
|
||
background-color: #437ffd;
|
||
border-color: #437ffd;
|
||
padding: 10rpx 25rpx;
|
||
font-size: 24rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
</style>
|