yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ 分销提现：基本接入 50%

pull/36/MERGE
YunaiV 2024-01-05 22:02:59 +08:00
parent ab48b4d640
commit bc6ac22ce2
5 changed files with 578 additions and 647 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/pay/components/account-info-modal.vue
View File

@ -106,7 +106,7 @@
</template> </template>
<script setup> <script setup>
import { ref, reactive, unref, watchPostEffect, watch } from 'vue'; import { ref, reactive, unref, watch } from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { realName, bankName, bankCode, alipayAccount } from '@/sheep/validate/form'; import { realName, bankName, bankCode, alipayAccount } from '@/sheep/validate/form';

91
pages/pay/components/account-type-select.vue
View File

@ -6,16 +6,21 @@
</view> </view>
<view class="modal-content ss-flex-1 ss-p-b-100"> <view class="modal-content ss-flex-1 ss-p-b-100">
<radio-group @change="onChange"> <radio-group @change="onChange">
<label class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center" <label
v-for="(item, index) in typeList" :key="index"> class="container-list ss-p-l-34 ss-p-r-24 ss-flex ss-col-center ss-row-center"
v-for="(item, index) in typeList"
:key="index"
>
<view class="container-icon ss-flex ss-m-r-20"> <view class="container-icon ss-flex ss-m-r-20">
<image :src="sheep.$url.static(item.icon)" /> <image :src="sheep.$url.static(item.icon)" />
</view> </view>
<view class="ss-flex-1">{{ item.title }}</view> <view class="ss-flex-1">{{ item.title }}</view>
<radio
<radio :value="item.value" color="var(--ui-BG-Main)" :value="item.value"
:checked="item.value === state.currentValue" /> color="var(--ui-BG-Main)"
<!-- :disabled="!methods.includes(item.value)" --> :checked="item.value === state.currentValue"
:disabled="!methods.includes(parseInt(item.value))"
/>
</label> </label>
</radio-group> </radio-group>
</view> </view>
@ -27,72 +32,50 @@
</template> </template>
<script setup> <script setup>
import { import { reactive } from 'vue';
reactive,
onBeforeMount,
nextTick,
ref
} from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Object, type: Object,
default () {}, default() {},
}, },
show: { show: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
methods: { methods: { // 开启的提现方式
type: Array, type: Array,
default: [], default: [],
}, },
}); });
const emits = defineEmits(['update:modelValue', 'change', 'close']); const emits = defineEmits(['update:modelValue', 'change', 'close']);
const state = reactive({ const state = reactive({
currentValue: '0', currentValue: '',
}); });
const typeList = reactive([{
// icon: '/static/img/shop/pay/wechat.png', const typeList = [
title: '工商银行',
value: '0',
},
{ {
// icon: '/static/img/shop/pay/alipay.png', // icon: '/static/img/shop/pay/wechat.png', // TODO 芋艿：后续给个 icon
title: '建设银行', title: '钱包余额',
value: '1', value: '1',
}, },
{ {
// icon: '/static/img/shop/pay/bank.png', icon: '/static/img/shop/pay/wechat.png',
title: '农业', title: '微信零钱',
value: '2', value: '2',
}, },
]) {
const getWalletAccountInfo = async () => { icon: '/static/img/shop/pay/alipay.png',
return new Promise(async (resolve, reject) => { title: '支付宝账户',
let res = await sheep.$api.user.account.info({ value: '3',
type: state.currentValue, },
}); {
if (res.error === 0) { icon: '/static/img/shop/pay/bank.png',
if (!props.methods.includes(res.data.type)) { title: '银行卡转账',
return; value: '4',
} },
state.currentValue = res.data.type; ];
emits('update:modelValue', {
type: res.data.type,
account_header: res.data.account_header,
account_name: res.data.account_name,
account_no: res.data.account_no,
});
} else {
emits('update:modelValue', {
type: state.currentValue,
});
}
resolve();
});
};
function onChange(e) { function onChange(e) {
state.currentValue = e.detail.value; state.currentValue = e.detail.value;
@ -103,17 +86,17 @@
sheep.$helper.toast('请选择提现方式'); sheep.$helper.toast('请选择提现方式');
return; return;
} }
await getWalletAccountInfo(); // 赋值
emits('update:modelValue', {
type: state.currentValue
});
// 关闭弹窗
emits('close'); emits('close');
}; };
const hideModal = () => { const hideModal = () => {
emits('close'); emits('close');
}; };
onBeforeMount(async () => {
await getWalletAccountInfo();
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

360
pages/pay/withdraw.vue
View File

@ -1,71 +1,119 @@
<template> <template>
<s-layout title="申请提现" class="withdraw-wrap" navbar="inner"> <s-layout title="申请提现" class="withdraw-wrap" navbar="inner">
<!-- <view class="page-bg"></view> --> <view class="page-bg"></view>
<!-- <view class="wallet-num-box ss-flex ss-col-center ss-row-between" :style="[ <view
class="wallet-num-box ss-flex ss-col-center ss-row-between"
:style="[
{ {
marginTop: '-' + Number(statusBarHeight + 88) + 'rpx', marginTop: '-' + Number(statusBarHeight + 88) + 'rpx',
paddingTop: Number(statusBarHeight + 108) + 'rpx', paddingTop: Number(statusBarHeight + 108) + 'rpx',
}, },
]"> ]"
>
<view class=""> <view class="">
<view class="num-title">可提现金额（元）</view> <view class="num-title">可提现金额（元）</view>
<view class="wallet-num">{{ userInfo.commission }}</view> <view class="wallet-num">{{ fen2yuan(state.brokerageInfo.brokeragePrice) }}</view>
</view>
<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/withdraw-log')">
提现记录
</button>
</view> </view>
<button class="ss-reset-button log-btn" @tap="sheep.$router.go('/pages/pay/withdraw-log')">提现记录</button>
</view> -->
<!-- 提现输入卡片--> <!-- 提现输入卡片-->
<view class="draw-card"> <view class="draw-card">
<view class="bank-box ss-flex ss-col-center ss-row-between ss-m-b-30">
<view class="name">提现至</view>
<view class="bank-list ss-flex ss-col-center" @tap="onAccountSelect(true)">
<view v-if="!state.accountInfo.type" class="empty-text">请选择提现方式</view>
<view v-if="state.accountInfo.type === '1'" class="empty-text">钱包余额</view>
<view v-if="state.accountInfo.type === '2'" class="empty-text">微信零钱</view>
<view v-if="state.accountInfo.type === '3'" class="empty-text">支付宝账户</view>
<view v-if="state.accountInfo.type === '4'" class="empty-text">银行卡转账</view>
<text class="cicon-forward" />
</view>
</view>
<!-- 提现金额 -->
<view class="card-title">提现金额</view> <view class="card-title">提现金额</view>
<view class="input-box ss-flex ss-col-center border-bottom"> <view class="input-box ss-flex ss-col-center border-bottom">
<view class="unit">￥</view> <view class="unit">￥</view>
<uni-easyinput :inputBorder="false" class="ss-flex-1 ss-p-l-10" v-model="state.amount" type="number" <uni-easyinput
placeholder="请输入提现金额" /> :inputBorder="false"
class="ss-flex-1 ss-p-l-10"
v-model="state.accountInfo.price"
type="number"
placeholder="请输入提现金额"
/>
</view> </view>
<view class="card-title" v-show='txfag==1'>持卡人</view> <!-- 提现账号 -->
<view class="input-box ss-flex ss-col-center border-bottom" v-show='txfag==1'> <view class="card-title" v-show="['2', '3', '4'].includes(state.accountInfo.type)">
<view class="unit"></view> 提现账号
<uni-easyinput :inputBorder="false" class="ss-flex-1 ss-p-l-10" v-model="state.name"
placeholder="请输入持卡人姓名" />
</view> </view>
<view class="card-title" v-show='txfag==1'>卡号</view> <view
<view class="input-box ss-flex ss-col-center border-bottom" v-show='txfag==1'> class="input-box ss-flex ss-col-center border-bottom"
<view class="unit"></view> v-show="['2', '3', '4'].includes(state.accountInfo.type)"
<uni-easyinput :inputBorder="false" class="ss-flex-1 ss-p-l-10" v-model="state.accountNo" >
placeholder="请输卡号" /> <view class="unit" />
<uni-easyinput
:inputBorder="false"
class="ss-flex-1 ss-p-l-10"
v-model="state.accountInfo.accountNo"
placeholder="请输入提现账号"
/>
</view> </view>
<view class="card-title">收款码</view> <!-- TODO 芋艿： -->
<view class="input-box ss-flex ss-col-center border-bottom"> <view class="card-title" v-show="['2', '3'].includes(state.accountInfo.type)">收款码</view>
<view class="unit"></view> <view
<uni-easyinput :inputBorder="false" class="ss-flex-1 ss-p-l-10" v-model="state.accountQrCodeUrl" class="input-box ss-flex ss-col-center border-bottom"
placeholder="请输收款码地址" /> v-show="['2', '3'].includes(state.accountInfo.type)"
>
<view class="unit" />
<uni-easyinput
:inputBorder="false"
class="ss-flex-1 ss-p-l-10"
v-model="state.accountInfo.accountQrCodeUrl"
placeholder="请输收款码地址"
/>
</view> </view>
<!-- 持卡人姓名 -->
<view class="bank-box ss-flex ss-col-center ss-row-between ss-m-b-30" style='display:block'> <view class="card-title" v-show="state.accountInfo.type === '4'">持卡人</view>
<view class="name">选择提现方式：</view> <view
<!-- <view class="bank-list ss-flex ss-col-center" style="margin-left:auto" > class="input-box ss-flex ss-col-center border-bottom"
<view class="empty-text">请选择提现方式</view> v-show="state.accountInfo.type === '4'"
<text class="cicon-forward"></text> >
</view> --> <view class="unit" />
<uni-section title="单选" type="line"> <uni-easyinput
<view class="uni-px-5 uni-pb-5" style='font-size:28rpx'> :inputBorder="false"
<uni-data-checkbox v-model="txfag" :localdata="txList"></uni-data-checkbox> class="ss-flex-1 ss-p-l-10"
v-model="state.accountInfo.name"
placeholder="请输入持卡人姓名"
/>
</view> </view>
</uni-section> <!-- 提现银行 -->
</view> <view class="card-title" v-show="state.accountInfo.type === '4'">提现银行</view>
<view class="bank-box ss-flex ss-col-center ss-row-between ss-m-b-30" v-show='txfag==1'> <view
<view class="name">选择银行</view> class="input-box ss-flex ss-col-center border-bottom"
<view class="bank-list ss-flex ss-col-center" @tap="onAccountSelect(true)"> v-show="state.accountInfo.type === '4'"
<view v-if="!state.accountInfo.type" class="empty-text">请选择提现方式</view> >
<view v-if="state.accountInfo.type === '0'" class="empty-text">工商银行</view> <view class="unit" />
<view v-if="state.accountInfo.type === '1'" class="empty-text">建设银行</view> <uni-easyinput
<view v-if="state.accountInfo.type === '2'" class="empty-text">农业银行</view> :inputBorder="false"
<text class="cicon-forward"></text> class="ss-flex-1 ss-p-l-10"
</view> v-model="state.accountInfo.bankName"
</view> placeholder="请输入提现银行"
<view class="bind-box ss-flex ss-col-center ss-row-between" v-if="state.accountInfo.type"> />
<view class="placeholder-text" v-if="state.accountInfo.account_name">
{{ state.accountInfo.account_header }}|{{ state.accountInfo.account_name }}
</view> </view>
<!-- 开户地址 -->
<view class="card-title" v-show="state.accountInfo.type === '4'">开户地址</view>
<view
class="input-box ss-flex ss-col-center border-bottom"
v-show="state.accountInfo.type === '4'"
>
<view class="unit" />
<uni-easyinput
:inputBorder="false"
class="ss-flex-1 ss-p-l-10"
v-model="state.accountInfo.bankAddress"
placeholder="请输入开户地址"
/>
</view> </view>
<button class="ss-reset-button save-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm"> <button class="ss-reset-button save-btn ui-BG-Main-Gradient ui-Shadow-Main" @tap="onConfirm">
确认提现 确认提现
@ -75,178 +123,128 @@
<!-- 提现说明 --> <!-- 提现说明 -->
<view class="draw-notice"> <view class="draw-notice">
<view class="title ss-m-b-30">提现说明</view> <view class="title ss-m-b-30">提现说明</view>
<!-- <view class="draw-list" v-for="(rule, index) in state.rulesList" :key="index"> <view class="draw-list"> 最低提现金额 {{ fen2yuan(state.minPrice) }} 元 </view>
{{ index + 1 }}.{{ rule }}
</view>-->
<view class="draw-list"> <view class="draw-list">
当前可提现金额：<text>￥{{state.userGet.brokeragePrice}}</text> 冻结佣金：<text>￥{{ fen2yuan(state.brokerageInfo.frozenPrice) }}</text>
</view> （每笔佣金的冻结期为 {{ state.frozenDays }} 天，到期后可提现）
<view class="draw-list">
冻结佣金：<text>￥{{state.userGet.frozenPrice}}</text>
</view>
<view class="draw-list">
说明：每笔佣金冻结期为0天，到期后可提现
</view> </view>
</view> </view>
<!-- 选择提现账户 --> <!-- 选择提现账户 -->
<account-type-select :show="state.accountSelect" @close="onAccountSelect(false)" round="10" <account-type-select
v-model="state.accountInfo" :methods="state.rules.methods" /> :show="state.accountSelect"
<!-- 编辑账户信息 --> @close="onAccountSelect(false)"
<account-info-modal v-if="state.accountInfo.type" v-model="state.accountInfo" :show="state.accountEdit" round="10"
@close="onAccountEdit(false)" round="10" /> v-model="state.accountInfo"
:methods="state.withdrawTypes"
/>
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import { import { computed, reactive, onBeforeMount, ref } from 'vue';
computed,
reactive,
onBeforeMount,ref
} from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import accountTypeSelect from './components/account-type-select.vue'; import accountTypeSelect from './components/account-type-select.vue';
import accountInfoModal from './components/account-info-modal.vue'; import { fen2yuan } from '@/sheep/hooks/useGoods';
import { import TradeConfigApi from '@/sheep/api/trade/config';
onPageScroll import BrokerageApi from '@/sheep/api/trade/brokerage';
} from '@dcloudio/uni-app';
const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png'); const headerBg = sheep.$url.css('/static/img/shop/user/withdraw_bg.png');
onPageScroll(() => {});
const statusBarHeight = sheep.$platform.device.statusBarHeight * 2; const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
function filterRules(rules) {
let list = [];
let str1 = '';
if (rules.min_amount > 0) {
str1 += `最少 ${rules.min_amount}元; `;
}
if (rules.max_amount > 0) {
str1 += `最多 ${rules.max_amount}元;`;
}
if (str1 !== '') {
list.push('单次提现金额 ' + str1);
}
if (rules.max_num > 0) {
list.push(`每${rules.num_unit === 'day' ? '天' : '月'}最多可提现 ${rules.max_num} 次;`);
}
if (rules.charge_rate_format > 0) {
list.push(`每次收取提现手续费 ${rules.charge_rate_format}%;`);
}
list.push(
`提现申请后将${rules.auto_arrival ? '自动' : '审核后'}到账, 到账结果请查收对应渠道服务通知;`,
);
list.push('如有疑问请及时联系客服.');
return list;
}
let txfag=ref(1)
const txList=[{text:'银行卡提现',value:1},{text:'微信提现',value:2},{text:'支付宝提现',value:3}]
function tixian(v){
console.log(v)
}
const userStore = sheep.$store('user'); const userStore = sheep.$store('user');
const userInfo = computed(() => userStore.userInfo); const userInfo = computed(() => userStore.userInfo);
const state = reactive({ const state = reactive({
userGet: {}, accountInfo: {
accountNo: '', // 提现表单
name: '', type: undefined,
amount: '', accountNo: undefined,
type: '', accountQrCodeUrl: undefined,
accountInfo: {}, name: undefined,
accountSelect: false, bankName: undefined,
accountEdit: false, bankAddress: undefined,
rules: {
min_amount: 0,
max_amount: 0,
max_num: 0,
num_unit: 0,
charge_rate_format: 0,
charge_rate: 0,
methods: [],
}, },
rulesList: [],
accountQrCodeUrl:'' accountSelect: false,
brokerageInfo: {}, // 分销信息
frozenDays: 0, // 冻结天数
minPrice: 0, // 最低提现金额
withdrawTypes: [], // 提现方式
}); });
const onAccountEdit = (e) => { // 打开提现方式的弹窗
state.accountEdit = e;
};
const onAccountSelect = (e) => { const onAccountSelect = (e) => {
state.accountSelect = e; state.accountSelect = e;
}; };
// 提交提现
const onConfirm = async () => { const onConfirm = async () => {
let payload = { // 参数校验
accountNo: state.accountNo, debugger;
name: state.name, if (
bankName: state.accountInfo.type, !state.accountInfo.price ||
type: txfag.value, state.accountInfo.price > state.brokerageInfo.price ||
price: state.amount * 100, state.accountInfo.price <= 0
accountQrCodeUrl:state.accountQrCodeUrl ) {
}; sheep.$helper.toast('请输入正确的提现金额');
console.log(payload); return;
// return;
// if (payload.money > userInfo.commission || payload.money <= 0) {
// sheep.$helper.toast('请输入正确的提现金额');
// return;
// }
// if (!payload.type) {
// sheep.$helper.toast('请选择提现方式');
// return;
// }
// if (!payload.account_name || !payload.account_header || !payload.account_no) {
// sheep.$helper.toast('请完善您的账户信息');
// return;
// }
// if (sheep.$platform.name === 'H5' && payload.type === 'wechat') {
// sheep.$helper.toast('请使用微信浏览器操作');
// return;
// }
let {
code,
msg,
data
} = await sheep.$api.pay.withdraw.apply(payload);
if (code === -1) {
sheep.$platform.useProvider('wechat').bind();
} }
if (code === 0) { if (!state.accountInfo.type) {
userStore.getInfo(); sheep.$helper.toast('请选择提现方式');
return;
}
// 提交请求
let { code } = await BrokerageApi.createBrokerageWithdraw({
...state.accountInfo,
price: state.accountInfo.price * 100,
});
if (code !== 0) {
return;
}
// 提示
uni.showModal({ uni.showModal({
title: '操作成功', title: '操作成功',
content: '您的提现申请已成功提交', content: '您的提现申请已成功提交',
cancelText: '继续提现', cancelText: '继续提现',
confirmText: '查看记录', confirmText: '查看记录',
success: function(res) { success: (res) => {
res.confirm && sheep.$router.go('/pages/pay/withdraw-log'); if (res.confirm) {
}, sheep.$router.go('/pages/pay/withdraw-log')
}); return;
} }
getBrokerageUser();
state.accountInfo = {};
}
});
}; };
// 获得分销配置
async function getWithdrawRules() { async function getWithdrawRules() {
let { let { code, data } = await TradeConfigApi.getTradeConfig();
error, if (code !== 0) {
data return;
} = await sheep.$api.pay.withdraw.rules(); }
if (error === 0) { if (data) {
state.rules = data; state.minPrice = data.brokerageWithdrawMinPrice || 0;
state.rulesList = filterRules(state.rules); state.frozenDays = data.brokerageFrozenDays || 0;
state.withdrawTypes = data.brokerageWithdrawTypes;
} }
} }
onBeforeMount(async () => { // 获得分销信息
async function getBrokerageUser() {
const { data, code } = await BrokerageApi.getBrokerageUser();
if (code === 0) {
state.brokerageInfo = data;
}
}
onBeforeMount(() => {
getWithdrawRules(); getWithdrawRules();
let res = await sheep.$api.pay.withdraw.userGet(); getBrokerageUser()
state.userGet = res.data })
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

44
sheep/api/pay.js
View File

@ -1,44 +0,0 @@
import request from '@/sheep/request';
export default {
// 发起提现
withdraw: {
list: (params) =>
request({
url: 'withdraw',
method: 'GET',
params,
custom: {
auth: true,
},
}),
rules: () =>
request({
url: 'withdraw/rules',
method: 'GET',
custom: {
auth: true,
},
}),
apply: (data) =>
request({
url: '/app-api/trade/brokerage-withdraw/create',
method: 'POST',
data,
custom: {
loadingMsg: '申请中',
// auth: true,
},
}),
userGet: (params) =>
request({
url: '/app-api/trade/brokerage-user/get',
method: 'GET',
params,
// custom: {
// loadingMsg: '申请中',
// auth: true,
// },
}),
},
};

94
uni_modules/uni-data-checkbox/components/uni-data-checkbox/uni-data-checkbox.vue
View File

@ -154,20 +154,18 @@
}, },
value(newVal) { value(newVal) {
this.dataList = this.getDataList(newVal) this.dataList = this.getDataList(newVal)
// TODO @芋艿：这块可能被错误的注释了，需要跟进下
// fix by mehaotian is_reset 在 uni-forms 中定义 // fix by mehaotian is_reset 在 uni-forms 中定义
// if(!this.is_reset){ if(!this.is_reset){
// this.is_reset = false this.is_reset = false
// this.formItem && this.formItem.setValue(newVal) this.formItem && this.formItem.setValue(newVal)
// } }
}, },
modelValue(newVal) { modelValue(newVal) {
this.dataList = this.getDataList(newVal); this.dataList = this.getDataList(newVal);
// TODO @芋艿：这块可能被错误的注释了，需要跟进下 if(!this.is_reset){
// if(!this.is_reset){ this.is_reset = false
// this.is_reset = false this.formItem && this.formItem.setValue(newVal)
// this.formItem && this.formItem.setValue(newVal) }
// }
} }
}, },
data() { data() {
@ -195,22 +193,22 @@
} }
}, },
created() { created() {
// this.form = this.getForm('uniForms') this.form = this.getForm('uniForms')
// this.formItem = this.getForm('uniFormsItem') this.formItem = this.getForm('uniFormsItem')
// this.formItem && this.formItem.setValue(this.value) // this.formItem && this.formItem.setValue(this.value)
// if (this.formItem) { if (this.formItem) {
// this.isTop = 6 this.isTop = 6
// if (this.formItem.name) { if (this.formItem.name) {
// // 如果存在name添加默认值,否则formData 中不存在这个字段不校验 // 如果存在name添加默认值,否则formData 中不存在这个字段不校验
// if(!this.is_reset){ if(!this.is_reset){
// this.is_reset = false this.is_reset = false
// this.formItem.setValue(this.dataValue) this.formItem.setValue(this.dataValue)
// } }
// this.rename = this.formItem.name this.rename = this.formItem.name
// this.form.inputChildrens.push(this) this.form.inputChildrens.push(this)
// } }
// } }
if (this.localdata && this.localdata.length !== 0) { if (this.localdata && this.localdata.length !== 0) {
this.isLocal = true this.isLocal = true
@ -275,7 +273,7 @@
} }
} }
} }
// this.formItem && this.formItem.setValue(detail.value) this.formItem && this.formItem.setValue(detail.value)
// TODO 兼容 vue2 // TODO 兼容 vue2
this.$emit('input', detail.value); this.$emit('input', detail.value);
// // TOTO 兼容 vue3 // // TOTO 兼容 vue3
@ -377,7 +375,7 @@
selectedArr.push(item[this.map.value]) selectedArr.push(item[this.map.value])
} }
}) })
return this.dataValue.length > 0 ? this.dataValue : selectedArr return this.dataValue && this.dataValue.length > 0 ? this.dataValue : selectedArr
}, },
/** /**
@ -386,14 +384,12 @@
setStyleBackgroud(item) { setStyleBackgroud(item) {
let styles = {} let styles = {}
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
if (this.selectedColor) {
if (this.mode !== 'list') { if (this.mode !== 'list') {
styles['border-color'] = item.selected?selectedColor:'#DCDFE6' styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
} }
if (this.mode === 'tag') { if (this.mode === 'tag') {
styles['background-color'] = item.selected? selectedColor:'#f5f5f5' styles['background-color'] = item.selected? selectedColor:'#f5f5f5'
} }
}
let classles = '' let classles = ''
for (let i in styles) { for (let i in styles) {
classles += `${i}:${styles[i]};` classles += `${i}:${styles[i]};`
@ -403,7 +399,6 @@
setStyleIcon(item) { setStyleIcon(item) {
let styles = {} let styles = {}
let classles = '' let classles = ''
if (this.selectedColor) {
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
styles['background-color'] = item.selected?selectedColor:'#fff' styles['background-color'] = item.selected?selectedColor:'#fff'
styles['border-color'] = item.selected?selectedColor:'#DCDFE6' styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
@ -412,7 +407,7 @@
styles['background-color'] = '#F2F6FC' styles['background-color'] = '#F2F6FC'
styles['border-color'] = item.selected?selectedColor:'#DCDFE6' styles['border-color'] = item.selected?selectedColor:'#DCDFE6'
} }
}
for (let i in styles) { for (let i in styles) {
classles += `${i}:${styles[i]};` classles += `${i}:${styles[i]};`
} }
@ -421,7 +416,6 @@
setStyleIconText(item) { setStyleIconText(item) {
let styles = {} let styles = {}
let classles = '' let classles = ''
if (this.selectedColor) {
let selectedColor = this.selectedColor?this.selectedColor:'#2979ff' let selectedColor = this.selectedColor?this.selectedColor:'#2979ff'
if (this.mode === 'tag') { if (this.mode === 'tag') {
styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666' styles.color = item.selected?(this.selectedTextColor?this.selectedTextColor:'#fff'):'#666'
@ -431,7 +425,7 @@
if(!item.selected && item.disabled){ if(!item.selected && item.disabled){
styles.color = '#999' styles.color = '#999'
} }
}
for (let i in styles) { for (let i in styles) {
classles += `${i}:${styles[i]};` classles += `${i}:${styles[i]};`
} }
@ -454,7 +448,7 @@
</script> </script>
<style lang="scss"> <style lang="scss">
$uni-primary: #2979ff !default; $checked-color: #2979ff;
$border-color: #DCDFE6; $border-color: #DCDFE6;
$disable:0.4; $disable:0.4;
@ -620,8 +614,8 @@
// 选中 // 选中
&.is-checked { &.is-checked {
.checkbox__inner { .checkbox__inner {
border-color: $uni-primary; border-color: $checked-color;
background-color: $uni-primary; background-color: $checked-color;
.checkbox__inner-icon { .checkbox__inner-icon {
opacity: 1; opacity: 1;
@ -629,14 +623,14 @@
} }
} }
.radio__inner { .radio__inner {
border-color: $uni-primary; border-color: $checked-color;
.radio__inner-icon { .radio__inner-icon {
opacity: 1; opacity: 1;
background-color: $uni-primary; background-color: $checked-color;
} }
} }
.checklist-text { .checklist-text {
color: $uni-primary; color: $checked-color;
} }
// 选中禁用 // 选中禁用
&.is-disable { &.is-disable {
@ -689,10 +683,10 @@
} }
&.is-checked { &.is-checked {
border-color: $uni-primary; border-color: $checked-color;
.checkbox__inner { .checkbox__inner {
border-color: $uni-primary; border-color: $checked-color;
background-color: $uni-primary; background-color: $checked-color;
.checkbox__inner-icon { .checkbox__inner-icon {
opacity: 1; opacity: 1;
transform: rotate(45deg); transform: rotate(45deg);
@ -700,16 +694,16 @@
} }
.radio__inner { .radio__inner {
border-color: $uni-primary; border-color: $checked-color;
.radio__inner-icon { .radio__inner-icon {
opacity: 1; opacity: 1;
background-color: $uni-primary; background-color: $checked-color;
} }
} }
.checklist-text { .checklist-text {
color: $uni-primary; color: $checked-color;
} }
// 选中禁用 // 选中禁用
@ -741,8 +735,8 @@
} }
&.is-checked { &.is-checked {
background-color: $uni-primary; background-color: $checked-color;
border-color: $uni-primary; border-color: $checked-color;
.checklist-text { .checklist-text {
color: #fff; color: #fff;
@ -781,8 +775,8 @@
&.is-checked { &.is-checked {
.checkbox__inner { .checkbox__inner {
border-color: $uni-primary; border-color: $checked-color;
background-color: $uni-primary; background-color: $checked-color;
.checkbox__inner-icon { .checkbox__inner-icon {
opacity: 1; opacity: 1;
@ -795,13 +789,13 @@
} }
} }
.checklist-text { .checklist-text {
color: $uni-primary; color: $checked-color;
} }
.checklist-content { .checklist-content {
.checkobx__list { .checkobx__list {
opacity: 1; opacity: 1;
border-color: $uni-primary; border-color: $checked-color;
} }
} }