new-mshop-view/pages/agent/invite/index.vue

1196 lines
38 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="main-content">
<!--标题-->
<view class="title">
{{ page_title }}
<view class="record-btn" @click="applyRecord">
申请记录 <text class="iconfont icon-xiangyou"></text>
</view>
</view>
<!--表单-->
<view class="form-content">
<view class="line">
<view class="line-content">
<view class="title">邀请人</view>
<view class="right">
<view class="user-content" v-if="invite_agent_info.uid > 0">
<image class="image-img-image" :src="invite_agent_info.user.avatar" mode="widthFix"></image>
<view class="user-info">
<view class="nickname">{{ invite_agent_info.user.nickname}}</view>
<view class="uid">UID{{ invite_agent_info.user.uid}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="line">
<view class="line-content">
<view class="title">负责人姓名</view>
<input type="text" v-model="apply_info.contact_name" maxlength="15" placeholder="请输入负责人姓名" />
</view>
</view>
<view class="line">
<view class="line-content">
<view class="title">负责人电话</view>
<input type="text" v-model="apply_info.contact_phone" maxlength="20" placeholder="请输入负责人电话" />
</view>
</view>
<!-- 地区选择仅【2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅】显示 -->
<!-- 市、区县 仅【5=区县运营商,6=区县合伙人,7=餐厅】显示 -->
<!-- 镇/街道 仅【7=餐厅】显示 -->
<block v-if="['5','6','7'].includes(String(agent_type))">
<view class="line">
<view class="line-content">
<view class="title">地区选择</view>
<input :value="address" type="text" placeholder="点击选择地区信息" readonly disabled @click="areaPopupChange" />
</view>
</view>
</block>
<!-- 仅餐厅 显示详细地址、定位 商户名称、行业分类、商户类型、营业执照及行业相关资质证明图片 -->
<block v-if="agent_type == 7">
<view class="line">
<view class="line-content">
<view class="title">详细地址</view>
<input type="text" v-model="apply_info.address" maxlength="130" placeholder="请输入详细地址" />
</view>
</view>
<view class="line">
<view class="line-content">
<view class="title">品牌名称</view>
<input type="text" v-model="apply_info.mer_name" maxlength="130" placeholder="请输入品牌名称" />
</view>
</view>
<view class="line">
<view class="line-content">
<view class="title">企业名称</view>
<input type="text" v-model="apply_info.enterprise_name" maxlength="130" placeholder="请输入企业名称" />
</view>
</view>
<view class="line">
<view class="line-content">
<view class="title">行业分类</view>
<view class="right">
<picker @change="merChangeClass" :value="mer_cate_index" :range="mer_cate_list" range-key="category_name">
<input placeholder="请选择行业分类" type="text" readonly disabled v-model="mer_class_name">
</picker>
</view>
</view>
</view>
<view class="line">
<view class="line-content">
<view class="title">店铺类型</view>
<view class="right">
<picker @change="merChangeType" :value="mer_type_index" :range="mer_type_list" range-key="type_name">
<input placeholder="请选择店铺类型" type="text" disabled readonly v-model="mer_type_name">
</picker>
</view>
</view>
</view>
<view class="line">
<view class="item-title">请上传营业执照及行业相关资质证明图片</view>
<view class="item-desc">(图片最多可上传10张,图片格式支持JPG、PNG、JPEG)</view>
<view class="upload">
<view class='pictrue' v-for="(item,index) in apply_info.mer_images" :key="index" :data-index="index">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click="delPic(index)"></text>
</view>
<view v-else class='pictrue acea-row row-center-wrapper row-column' v-if="Object.values(apply_info.mer_images).length < 10" @click="uploadPic()">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
</block>
<!-- 仅烟酒代销商 凭证图片(支持多图) -->
<block v-if="agent_type == 11">
<view class="line">
<view class="item-title">请上传相关凭证</view>
<view class="item-desc">(图片最多可上传10张,图片格式支持JPG、PNG、JPEG)</view>
<view class="upload">
<view class='pictrue' v-for="(item,index) in apply_info.mer_images" :key="index" :data-index="index">
<image :src='item'></image>
<text class='iconfont icon-guanbi1' @click="delPic(index)"></text>
</view>
<view v-else class='pictrue acea-row row-center-wrapper row-column' v-if="Object.values(apply_info.mer_images).length < 10" @click="uploadPic()">
<text class='iconfont icon-icon25201'></text>
<view>上传图片</view>
</view>
</view>
</view>
</block>
<!--选择支付方式-->
<view class="pay-type" v-if="Number(pay_money) > 0 && Number(apply_info_id) <= 0">
<!-- 支付类型 定金 or 全额-->
<view class="pay-money-type">
<view class="left">
<view class="current-pay-info">
<view class="label-text">{{ Number(pay_money) === Number(current_set.total_money) ? '全额' : '定金' }}</view>
<view class="label-price">
<text class="unit">¥</text>{{ pay_money }}
</view>
</view>
<view class="arrears" v-if="Number(pay_money) < Number(current_set.total_money)">
剩余尾款{{ Number(current_set.total_money - pay_money).toFixed(2) }}元
</view>
</view>
<view class="change-btn" v-if="Object.values(deposit_list).length > 0" @click="showChangePopup">切换</view>
</view>
<!--支付组件-->
<pay :payType="pay_info.pay_type" @change="changePayType"></pay>
</view>
<!--提交按钮-->
<view class="group-btn">
<view v-if="Number(apply_info_id) <= 0" class="add-btn" @click="submitInfo">
{{ Number(pay_money) > 0 ? '去支付 ¥' + pay_money : '提交资料' }}
</view>
<view v-else class="add-btn" @click="submitInfo">提交编辑</view>
</view>
</view>
<!-- 地区选择器 -->
<areaSelect
:isShow="area_status"
:is_show_province="['2','3','4','5','6','7'].includes(String(agent_type))"
:is_show_city="['5','6','7'].includes(String(agent_type))"
:is_show_area="['5','6','7'].includes(String(agent_type))"
:is_show_street="['7'].includes(String(agent_type))"
@close="areaPopupChange(false)"
@changeAddress="areaChange"
></areaSelect>
<!-- 授权登录 -->
<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authClose"></authorize>
<!-- 定金选择 -->
<uni-popup ref="paymentListPopup" type="bottom">
<view class="payment-list-content">
<view class="list">
<view class="box">
<view class="left">
<view class="price">¥{{ Number(current_set.total_money).toFixed(2) }}</view>
</view>
<view class="selected-btn" @click="changePayment(-1)">选中</view>
</view>
<view class="box" v-for="(item,index) in deposit_list" :key="index">
<view class="left">
<view class="price">¥{{ Number(item.deposit_price).toFixed(2) }}</view>
<view class="arrears" v-if="Number(item.surplus_price) > 0">
剩余尾款{{ Number(item.surplus_price).toFixed(2) }}元
</view>
</view>
<view class="selected-btn" @click="changePayment(index)">选中</view>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {mapGetters} from "vuex";
import authorize from '@/components/Authorize';
import areaSelect from '@/components/areaSelect';
import {getSingleAgentInfo,getAgentConfig,submitAgentApplyInfo,agentApplyInfo} from "@/api/agent";
import { merClassifly,getStoreTypeApi } from '@/api/store.js';
import pay from "@/components/payment/pay";
export default {
name: 'business',
components: {
authorize,
areaSelect,
pay
},
computed: {
...mapGetters(['isLogin', 'uid', 'userInfo', 'viewColor'])
},
data() {
return {
page_title: '修改申请信息',
config: {},
agent_base_set: {},
current_set: {},
deposit_list: {},
deposit_index: -1,
pay_money: 0,// 支付金额
// 登录相关
isAuto: false, //没有授权的不会自动授权
isShowAuth: false,//是否隐藏授权
// 邀请信息
invite_agent_info: {},
agent_type: 0,// 申请入驻类型 类型2=省公司,3=省合伙人(外勤),4=省合伙人(内勤),5=区县运营商,6=区县合伙人,7=餐厅,8=配送商
agent_id: 0,// 邀请人代理id
apply_info_id: 0,// 申请信息id
apply_info:{
pid: 0,
mer_images: {},
},
// 地区选择器
area_value:[],
area_status: false,
address: '',
// 商户相关
mer_cate_list: [{
category_name: '',
mer_class_id: ''
}],
mer_cate_index: 0,
mer_class_name: '',
mer_type_list: [{
category_name: '',
mer_type_id: ''
}],
mer_type_index: 0,
mer_type_name: '',
//支付方式
pay_info: {
pay_type: 'weixin',
// #ifdef H5
return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
// #endif
},
}
},
onLoad(options) {
let _this = this;
if(options.scene){
console.log('转换前参数:',options.scene)
let scene = _this.$util.getUrlParams(decodeURIComponent(options.scene));
// console.log("接收参数",scene)
_this.agent_id = scene.aid || 0;
_this.agent_type = scene.lv || 0;
}
// 申请信息ID
this.apply_info_id = options.apply_id || 0;
// 判断agent_id <= 0 抛出错误,返回个人中心
if(Number(_this.agent_id) <= 0 && Number(this.apply_info_id) <= 0){
_this.$util.Tips({
title: '非法访问,无邀请人!',
},{tab:1,url:'/pages/user/index'});
}
// 判断:是否登录
if (!this.isLogin) {
// 未登录 授权登录
this.isAuto = true;
this.isShowAuth = true
}else{
// 已登录 获取信息
if(Number(this.apply_info_id) > 0) this.getApplyInfo();
else this.init();
}
},
methods: {
// 授权回调
onLoadFun() {
if(this.isLogin){
this.isShowAuth = false;
this.init();
}
},
// 授权关闭
authClose(e) {
this.isShowAuth = e
},
// 授权成功 初始化
init () {
this.getInviteAgentInfo()
this.generatePageTitle();
this.getConfig();
this.getMerClass();
this.getMerType();
},
// 获取邀请人信息
getInviteAgentInfo(){
let _this = this;
getSingleAgentInfo(_this.agent_id).then(res => {
if (res.status == 200) {
let data = res.data || {};
if(Number(data.id) <= 0){
_this.$util.Tips({
title: '非法访问,无有效邀请人!'
},{tab:1,url:'/pages/user/index'});
return false;
}else{
_this.invite_agent_info = data || {};
}
}
}).catch(err => {
this.$util.Tips({title: err});
});
},
// 生成页面标题
generatePageTitle(){
let _this = this;
let title = '修改申请信息';
// 不是修改信息 生成对应标题
if(Number(_this.apply_info_id) <= 0){
title = '申请成为';
switch (Number(_this.agent_type)) {
case 2: title += '省公司';break;
case 3: title += '外勤';break;
case 4: title += '内勤';break;
case 5: title += '运营商';break;
case 6: title += '合伙人';break;
case 7:
// title += '餐厅';
title = '商户入驻';
break;
case 8: title += '配送商';break;
case 9: title += '总部外勤';break;
case 10: title += '总部内勤';break;
case 11: title += '烟酒代销商';break;
}
}
// 设置页面标题
uni.setNavigationBarTitle({
title: title
});
_this.page_title = title;
},
// 获取配置信息
getConfig(){
let _this = this;
getAgentConfig().then(res => {
if (Number(res.status) === 200) {
_this.config = res.data || {};
_this.agent_base_set = _this.config.agent_base_set || {};
_this.current_set = _this.agent_base_set[_this.agent_type] || {};
_this.deposit_list = _this.current_set.deposit_list|| {};
let totalMoney = _this.current_set.total_money || 0;
if(Object.values(_this.deposit_list).length > 0 && Number(totalMoney) > 0){
_this.deposit_index = 0;
_this.pay_money = _this.deposit_list[_this.deposit_index].deposit_price || 0;
}else{
_this.deposit_index = -1;
_this.pay_money = totalMoney || 0;
}
}
}).catch(err => {
this.$util.Tips({title: err});
});
},
// 地区选择器 - 显示/关闭 弹框
areaPopupChange(status = true){
this.area_status = status;
},
// 地区选择器 - 地区改变
areaChange(data){
let type = data.type || '';
let value = data.value || {};
switch (type) {
case 'province':
this.apply_info.province_id = value.id || 0;
this.apply_info.province_name = value.name || '';
break;
case 'city':
this.apply_info.city_id = value.id || 0;
this.apply_info.city_name = value.name || '';
break;
case 'area':
this.apply_info.area_id = value.id || 0;
this.apply_info.area_name = value.name || '';
break;
case 'street':
this.apply_info.street_id = value.id || 0;
this.apply_info.street_name = value.name || '';
break;
}
// 地址拼接
let provinceName = this.apply_info.province_name || '';
let cityName = this.apply_info.city_name || '';
let areaName = this.apply_info.area_name || '';
let streetName = this.apply_info.street_name || '';
this.address = provinceName + cityName + areaName + streetName;
},
// 商户相关 - 获取分类列表
getMerClass() {
let _this = this;
merClassifly().then(res => {
_this.mer_cate_list = res.data
if(Number(_this.apply_info_id) > 0){
Object.values(res.data).forEach(function(item, index) {
if (item.merchant_category_id == _this.apply_info.mer_class_id) {
_this.mer_cate_index = index;
_this.mer_class_name = item.category_name
}
});
}
}).catch(res => {
this.$util.Tips({
title: res
});
});
},
// 商户相关 - 获取类型列表
getMerType() {
let _this = this;
getStoreTypeApi().then(res => {
_this.mer_type_list = res.data
if(Number(_this.apply_info_id) > 0){
Object.values(res.data).forEach(function(item, index) {
if (item.mer_type_id == _this.apply_info.mer_type_id) {
_this.mer_type_index = index;
_this.mer_type_name = item.type_name
}
});
}
}).catch(res => {
this.$util.Tips({
title: res
});
});
},
// 商户相关 - 分类选中
merChangeClass(e) {
this.mer_cate_index = e.detail.value || e.target.value
this.apply_info.mer_class_id = this.mer_cate_list[this.mer_cate_index]['merchant_category_id']
this.mer_class_name = this.mer_cate_list[this.mer_cate_index]['category_name']
},
// 商户相关 - 类型选中
merChangeType(e) {
this.mer_type_index = e.detail.value || e.target.value
this.apply_info.mer_type_id = this.mer_type_list[this.mer_type_index]['mer_type_id']
this.mer_type_name = this.mer_type_list[this.mer_type_index]['type_name']
},
// 图片上传 - 点击上传图片
uploadPic() {
let _this = this;
_this.$util.uploadImageOne('upload/image', function(res) {
if(res.status == 200){
let data = res.data || {};
let images = _this.apply_info.mer_images || {};
let pics = Object.values(images);
pics[Object.values(pics).length] = data.path || '';
_this.$set(_this.apply_info, 'mer_images', pics);
}
});
},
// 图片生成 - 删除图片
delPic(index){
let _this = this;
let pics = Object.values(_this.apply_info.mer_images);
pics.splice(index, 1);
_this.$set(_this.apply_info, 'mer_images', pics);
},
// 提交申请信息
submitInfo(){
let _this = this;
let applyInfo = Object.assign({}, _this.apply_info);
let payInfo = Object.assign({}, _this.pay_info);
applyInfo.pid = _this.agent_id;
applyInfo.agent_type = _this.agent_type;
if (payInfo.pay_type == 'weixin') {
// #ifdef H5
payInfo.pay_type = _this.$wechat.isWeixin() ? 'weixin' : 'h5'
// #endif
// #ifdef MP
payInfo.pay_type = 'routine'
// #endif
// #ifdef APP-PLUS
payInfo.pay_type = 'weixin'
// #endif
}
applyInfo.pay_type = payInfo.pay_type
applyInfo.return_url = payInfo.return_url
applyInfo.deposit_index = _this.deposit_index || 0;
// 提交申请
submitAgentApplyInfo(applyInfo).then(res => {
if (res.status == 200) {
if(Number(_this.pay_money) > 0 && Number(_this.apply_info_id) <= 0){
let status = res.data.status,
orderId = res.data.result.order_id,
callback_key = res.data.result.pay_key,
jsConfig = res.data.result.config;
// let goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message;
let goPages = '/pages/agent/invite/record';
switch (status) {
case 'ORDER_EXIST':
case 'EXTEND_ORDER':
case 'PAY_ERROR':
case 'error':
return _this.$util.Tips({
title: res.message
}, {
tab: 5,
url: goPages
});
break;
case 'success':
return _this.$util.Tips({
title: res.message,
icon: 'success'
}, {
tab: 5,
url: goPages
});
break;
case 'alipay':
case "alipayQr":
uni.navigateTo({
url: '/pages/order_pay_back/index?keyCode=' + callback_key + '&url=' +
jsConfig
})
return;
break;
// #ifndef MP
case "wechat":
case "weixin":
case "weixinApp":
jsConfig.timeStamp = jsConfig.timestamp;
// #ifndef APP-PLUS
this.$wechat.pay(jsConfig).then(res => {
return _this.$util.Tips({
title: res.message,
icon: 'success'
}, {
tab: 4,
url: goPages
});
}).catch(res => {
if (res.errMsg == 'chooseWXPay:cancel') return _this.$util.Tips({
title: '取消支付'
}, {
tab: 5,
url: goPages + '&status=0'
});
})
// #endif
// #ifdef APP-PLUS
let mp_pay_name=''
if(uni.requestOrderPayment){
mp_pay_name='requestOrderPayment'
}else{
mp_pay_name='requestPayment'
}
uni[mp_pay_name]({
provider: 'wxpay',
orderInfo: jsConfig,
success: (e) => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付成功';
let url = '/pages/agent/invite/record';
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 4,
url: url
});
},
fail: (e) => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
let url = '/pages/agent/invite/record';
return _this.$util.Tips({
title: '取消支付',
}, {
tab: 4,
url: url
});
},
complete: () => {
// let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
let url = '/pages/agent/invite/record';
return _this.$util.Tips({
title: '',
}, {
tab: 4,
url: url
});
},
});
// #endif
break;
// #endif
// #ifdef MP
case "routine":
jsConfig.timeStamp = jsConfig.timestamp;
_this.toPay = true;
let mp_pay_name=''
if(uni.requestOrderPayment){
mp_pay_name='requestOrderPayment'
}else{
mp_pay_name='requestPayment'
}
uni[mp_pay_name]({
...jsConfig,
success: function(res) {
uni.hideLoading();
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 5,
url: goPages
});
},
fail: function(e) {
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
let pages = '/pages/agent/invite/record';
return _this.$util.Tips({
title: '取消支付'
}, {
tab: 5,
// url: pages + '&status=0'
url: pages
});
},
})
break;
// #endif
case "balance":
//余额
return _this.$util.Tips({
title: res.msg
}, {
tab: 5,
url: goPages + '&status=1'
});
break;
// #ifdef H5
case 'h5':
let host = window.location.protocol + "//" + window.location.host;
// let url = `${host}/pages/order_pay_status/index?order_id=${orderId}&msg=${res.message}`
let url = '/pages/agent/invite/record';
let eUrl = encodeURIComponent(url)
let jsurl = jsConfig.mweb_url || jsConfig.h5_url
let locations = `${jsurl}&redirect_url=${eUrl}`
setTimeout(() => {
location.href = locations;
}, 100);
break;
// #endif
// #ifdef APP-PLUS
case 'alipayApp':
uni.requestPayment({
provider: 'alipay',
orderInfo: jsConfig,
success: (e) => {
return _this.$util.Tips({
title: '支付成功',
icon: 'success'
}, {
tab: 5,
url: goPages
});
},
fail: (e) => {
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付失败'
let pages = '/pages/agent/invite/record';
return _this.$util.Tips({
title: '支付失败'
}, {
tab: 5,
url: pages
});
},
complete: () => {
uni.hideLoading();
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
let pages = '/pages/agent/invite/record';
return _this.$util.Tips({
title: ''
}, {
tab: 5,
url: pages
});
},
});
break;
// #endif
default:
// let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
let pages = '/pages/agent/invite/record';
return _this.$util.Tips({
title: '取消支付'
}, {
tab: 5,
// url: pages + '&status=0'
url: pages
});
}
}else{
_this.$util.Tips({
title: '操作成功!',
},{
tab: 4,
url: '/pages/agent/invite/record'
});
}
}
}).catch(err => {
this.$util.Tips({title: err});
});
},
// 修改支付方式
changePayType(value){
this.pay_info.pay_type = value;
},
// 查看申请记录
applyRecord(){
uni.navigateTo({
url: `/pages/agent/invite/record`
})
},
// 获取申请信息
getApplyInfo(){
let _this = this;
agentApplyInfo({ apply_id: _this.apply_info_id }).then(res => {
if (res.status == 200) {
let data = res.data || {};
_this.apply_info = data || {};
_this.agent_type = data.agent_type;
_this.agent_id = data.pid;
_this.areaChange({});
_this.init();
}
}).catch(err => {
this.$util.Tips({title: err});
});
},
// 点击显示切换支付项弹框
showChangePopup(){
this.$refs.paymentListPopup.open('bottom');
},
// 点击切换支付项
changePayment(index){
let _this = this;
_this.deposit_index = index;
if(Number(index) === Number(-1)){
_this.pay_money = _this.current_set.total_money || 0;
}else{
let info = _this.deposit_list[_this.deposit_index] || {};
_this.pay_money = info.deposit_price || 0;
}
_this.$refs.paymentListPopup.close();
},
}
}
</script>
<style scoped lang="scss">
.main-content{
width: 100vw!important;
min-height: 100vh!important;
background: #F6F6F6;
padding: 0 20rpx 100rpx 20rpx;
.title{
height: 100rpx;
line-height: 100rpx;
font-size: 32rpx;
width: 100%;
text-align: center;
font-weight: bold;
.record-btn{
position: absolute;
display: flex;
align-items: center;
top: 30rpx;
right: 0;
color: #fff;
font-size: 22rpx;
background-color: rgba(0, 0, 0, 0.3);
padding: 8rpx 18rpx;
border-radius: 20px 0px 0px 20px;
height: 45rpx;
line-height: 45rpx;
.icon-xiangyou{
font-size: 22rpx!important;
margin-left: 10rpx;
}
}
}
.form-content{
background: #FFFFFF;
border-radius: 20rpx!important;
padding: 20rpx!important;
.line{
width: 100%;
.line-content{
width: 100%;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
.title{
font-size: 28rpx;
width: 150rpx;
text-align: right;
}
input{
width: calc(100% - 165rpx) !important;
}
.right{
width: calc(100% - 165rpx) !important;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
.right-btn{
color: #fff;
background-color: #409eff;
border-color: #409eff;
width: 150rpx;
text-align: center;
height: 50rpx;
line-height: 50rpx;
border-radius: 10rpx;
}
.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;
}
}
}
input{
width: 100%!important;
}
}
}
.user-content{
width: 100%;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
.image-img-image{
width: 80rpx!important;
height: 80rpx!important;
border-radius: 50% !important;
margin-right: 15rpx!important;
}
.user-info{
width: calc(100% - 100rpx);
.nickname{
height: 40rpx;
line-height: 40rpx;
font-size: 28rpx;
font-weight: bold;
}
.uid{
height: 40rpx;
line-height: 40rpx;
font-size: 26rpx;
}
}
}
.item-title{
color: #666666;
font-size: 28rpx;
display: block;
}
.item-desc{
color: #B2B2B2;
font-size: 22rpx;
display: block;
margin-top: 8rpx;
line-height: 36rpx;
}
.upload{
margin-top: 20rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
.pictrue {
width: 130rpx;
height: 130rpx;
position: relative;
font-size: 11px;
color: #bbb;
margin-right: 15rpx;
margin-bottom: 15rpx;
&:nth-child(4n) {
margin-right: 0;
}
&:nth-last-child(1) {
border: 0.5px solid #ddd;
box-sizing: border-box;
}
uni-image, image {
width: 100%;
height: 100%;
border-radius: 1px;
img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
display: block;
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
}
}
.icon-guanbi1 {
font-size: 33rpx;
position: absolute;
top: -10px;
right: -10px;
}
}
}
}
.group-btn{
margin-top: 80rpx!important;
width: 100%;
display: inline-flex;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
flex-direction: row;
.add-btn{
height: 80rpx;
line-height: 80rpx;
width: 100%;
text-align: center;
font-size: 30rpx;
color: #fff;
background-color: #409eff;
border-color: #409eff;
border-radius: 15rpx;
}
}
}
}
// 支付方式
.pay-type{
//支付类型
.pay-money-type{
height: 120rpx;
padding: 20rpx;
width: 100%;
border: 2rpx solid #d9dce4;
border-radius: 15rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
.left{
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
.current-pay-info{
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.label-text{
font-size: 32rpx;
font-weight: bold;
}
.label-price{
color: #E93323;
font-size: 38rpx;
font-weight: bold;
.unit{
font-size: 28rpx;
margin-right: 5rpx;
}
}
}
.arrears{
font-size: 26rpx;
height: 40rpx;
line-height: 40rpx;
color: #aaa;
}
}
.change-btn{
font-size: 26rpx;
border-radius: 40rpx;
color: #fff;
background-color: #409eff;
border-color: #409eff;
height: 46rpx;
line-height: 46rpx;
padding: 0px 30rpx;
}
}
.box-title{
margin: 30rpx 0;
height: 50rpx;
line-height: 50rpx;
font-size: 28rpx;
padding-left: 20rpx;
font-weight: bold;
position: relative;
}
.box-title:after{
content: "";
position: absolute;
left: 0;
top: calc((50rpx - 30rpx) / 2);
width: 10rpx;
height: 30rpx;
background: #1777ff;
}
.box-content{
.pay-label:not(:last-child){
margin-bottom: 20rpx;
}
.pay-item{
height: 120rpx;
padding: 20rpx;
width: 100%;
border: 2rpx solid #d9dce4;
border-radius: 15rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-around;
.left{
width: calc(100% - 80rpx);
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
.animated{
width: 44rpx;
height: 44rpx;
border-radius: 50%;
text-align: center;
line-height: 44rpx;
background-color: #fe960f;
color: #fff;
font-size: 30rpx;
margin-right: 15rpx;
}
.icon-weixin2 {
background-color: #41b035;
}
.icon-icon34 {
background-color: #4295D5;
}
.pay-item-info{
.pay-name{
text-align: left;
border-right: 1px solid #eee;
justify-content: left;
}
.tip{
text-align: left;
font-size: 26rpx;
color: #aaa;
}
}
}
.right{
width: 80rpx;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
}
}
}
}
.payment-list-content{
background: #FFFFFF;
width: 100vw!important;
height: 80vh!important;
padding: 15rpx;
border-top-right-radius: 20rpx;
border-top-left-radius: 20rpx;
.list{
overflow: auto;
height: calc(100% - 60rpx);
.box{
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
padding: 20rpx 0;
width: 100%;
.left{
width: calc(100% - 110rpx);
display: inline-flex;
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
justify-content: flex-start;
.price{
width: 100%;
font-size: 36rpx;
height: 70rpx;
line-height: 70rpx;
color: #fb0000;
}
.arrears{
font-size: 26rpx;
height: 40rpx;
line-height: 40rpx;
color: #aaa;
}
}
.selected-btn{
width: 100rpx;
height: 50rpx;
line-height: 50rpx;
text-align: center;
font-size: 26rpx;
color: #fff;
background-color: #409eff;
border-color: #409eff;
border-radius: 50rpx;
}
}
.box:not(:last-child){
border-bottom: 2rpx solid #f6f6f6;
}
}
}
</style>