938 lines
35 KiB
Vue
938 lines
35 KiB
Vue
<script setup>
|
||
import { nextTick, onMounted, onUnmounted, ref } from "vue";
|
||
import { useUserStore } from "@/store/user.js";
|
||
import { ElMessage } from "element-plus";
|
||
import { useRouter } from "vue-router";
|
||
import mitt from "@/utils/mitt.js";
|
||
import payUser from "@/components/payUser.vue";
|
||
import { userAddressDetailApi, userAddressEditApi, userDetailApi } from "@/api/user"
|
||
import { userProductStorageApi, userProductStorageSupplyApi } from "@/api/store"
|
||
import { apiProvince, apiCity, apiArea, apiStreet, apiVillage, apiBrigade } from '@/api/public'
|
||
import { userShipApi, userShipUpdateApi, userLabelListApi, userLabelUpdateApi, userRechargeListApi } from "@/api/user"
|
||
import authCode from "@/components/authCode.vue";
|
||
|
||
const userStore = useUserStore();
|
||
const router = useRouter();
|
||
|
||
const formData = ref({
|
||
id: "",
|
||
});
|
||
|
||
const payInfo = ref({
|
||
price: '',
|
||
type: 1,
|
||
})
|
||
|
||
const payRef = ref(null);
|
||
const toPay = () => {
|
||
if (payInfo.value.type == 1) payInfo.value.price = '1000';
|
||
else if (payInfo.value.type == 2) payInfo.value.price = '2000';
|
||
else if (payInfo.value.type == 3) payInfo.value.price = '5000';
|
||
// if (Number(payInfo.value.price) < 1000 && formData.value.user_ship != 1) return ElMessage.error('至少购买1000元礼包');
|
||
if (payInfo.value.type == 0) payInfo.value.price = Number(payInfo.value.price).toFixed(2);
|
||
console.log('支付', payInfo.value);
|
||
payRef.value.setForm({
|
||
data: {
|
||
uid: formData.value.id,
|
||
price: payInfo.value.price,
|
||
user_ship: formData.value.user_ship
|
||
}
|
||
});
|
||
payRef.value.drawer = true;
|
||
}
|
||
const paySuccess = (e = null) => {
|
||
getUserInfo();
|
||
// mitt.emit('re-load-user-list', e ? true : false);
|
||
}
|
||
|
||
const updateShip = ref(false);
|
||
const userShip = ref([]);
|
||
const getUserShip = () => {
|
||
userShipApi({
|
||
type_id: 4
|
||
}).then(res => {
|
||
userShip.value = res.data.lists;
|
||
})
|
||
}
|
||
getUserShip()
|
||
const updateUserShip = () => {
|
||
userShipUpdateApi({
|
||
id: formData.value.id,
|
||
user_ship: formData.value.user_ship
|
||
}).then(res => {
|
||
ElMessage.success('修改成功');
|
||
formData.value.user_ship_name = userShip.value.find(item => item.id == formData.value.user_ship)?.title;
|
||
updateShip.value = false;
|
||
})
|
||
}
|
||
const cancelUserShip = () => {
|
||
updateShip.value = false;
|
||
}
|
||
|
||
// const updateLable = ref(false);
|
||
// const userLable = ref([]);
|
||
// const getLableList = () => {
|
||
// userLabelListApi().then(res => {
|
||
// userLable.value = res.data.lists;
|
||
// })
|
||
// }
|
||
// getLableList()
|
||
// const updateUserLable = () => {
|
||
// userLabelUpdateApi({
|
||
// id: formData.value.id,
|
||
// label_id: formData.value.label_id
|
||
// }).then(res => {
|
||
// ElMessage.success('修改成功');
|
||
// formData.value.label_name = userLable.value.find(item => item.label_id == formData.value.label_id)?.label_name;
|
||
// updateLable.value = false;
|
||
// })
|
||
// }
|
||
// const cancelLable = () => {
|
||
// updateLable.value = false;
|
||
// }
|
||
|
||
const userRechargeList = ref([]);
|
||
const getUserRechargeList = () => {
|
||
userRechargeListApi().then(res => {
|
||
userRechargeList.value = res.data;
|
||
console.log(res);
|
||
})
|
||
}
|
||
getUserRechargeList()
|
||
|
||
const addressInfo = ref({
|
||
id: '',
|
||
province: '',
|
||
city: '',
|
||
area: '',
|
||
street: '',
|
||
brigade: ''
|
||
})
|
||
const selectedValues = ref([])
|
||
const selectedEd = ref([])
|
||
const getAddress = () => {
|
||
userAddressDetailApi({
|
||
uid: formData.value.id
|
||
}).then(res => {
|
||
if (res.data?.village) {
|
||
selectedValues.value = [res.data.city, res.data.area, res.data.street, res.data.village, +res.data.brigade];
|
||
selectedEd.value = JSON.parse(JSON.stringify(selectedValues.value));
|
||
addressInfo.value = res.data;
|
||
}
|
||
else {
|
||
selectedValues.value = [];
|
||
selectedEd.value = [];
|
||
addressInfo.value = {
|
||
id: '',
|
||
province: '',
|
||
city: '',
|
||
area: '',
|
||
street: '',
|
||
brigade: ''
|
||
}
|
||
}
|
||
}).catch(err => {
|
||
selectedValues.value = [];
|
||
selectedEd.value = [];
|
||
addressInfo.value = {
|
||
id: '',
|
||
province: '',
|
||
city: '',
|
||
area: '',
|
||
street: '',
|
||
brigade: ''
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
const options = ref([]);
|
||
// 异步加载数据的方法
|
||
const loadOptions = async (node, resolve) => {
|
||
const level = node.level;
|
||
let response;
|
||
if (level !== 0 && !node.data.code) return resolve([]);
|
||
// if (level === 0) {
|
||
// response = await apiProvince();
|
||
// response = response.data.map((item) => {
|
||
// return {
|
||
// code: item.province_code,
|
||
// name: item.province_name
|
||
// }
|
||
// })
|
||
// } else
|
||
if (level === 0) {
|
||
response = await apiCity({
|
||
province_code: 510000 // 四川省
|
||
});
|
||
response = response.data.map((item) => {
|
||
return {
|
||
code: item.city_code,
|
||
name: item.city_name
|
||
}
|
||
})
|
||
} else if (level === 1) {
|
||
response = await apiArea({
|
||
city_code: node.data.code
|
||
});
|
||
response = response.data.map((item) => {
|
||
return {
|
||
code: item.area_code,
|
||
name: item.area_name
|
||
}
|
||
})
|
||
}
|
||
else if (level === 2) {
|
||
response = await apiStreet({
|
||
area_code: node.data.code
|
||
});
|
||
response = response.data.map((item) => {
|
||
return {
|
||
code: item.street_code,
|
||
name: item.street_name,
|
||
}
|
||
})
|
||
}
|
||
else if (level === 3) {
|
||
response = await apiVillage({
|
||
street_code: node.data.code
|
||
});
|
||
response = response.data.map((item) => {
|
||
return {
|
||
code: item.village_code,
|
||
name: item.village_name,
|
||
}
|
||
})
|
||
}
|
||
else if (level === 4) {
|
||
response = await apiBrigade({
|
||
village_code: node.data.code
|
||
});
|
||
response = response.data.map((item) => {
|
||
return {
|
||
code: item.id,
|
||
name: item.brigade_name,
|
||
leaf: true
|
||
}
|
||
})
|
||
}
|
||
|
||
resolve(response);
|
||
};
|
||
const props = {
|
||
value: 'code',
|
||
label: 'name',
|
||
children: 'children',
|
||
multiple: false,
|
||
lazy: true,
|
||
lazyLoad: loadOptions
|
||
};
|
||
|
||
const updateAddress = async () => {
|
||
addressInfo.value.city = selectedValues.value[0]
|
||
addressInfo.value.area = selectedValues.value[1]
|
||
addressInfo.value.street = selectedValues.value[2]
|
||
addressInfo.value.village = selectedValues.value[3]
|
||
addressInfo.value.brigade = selectedValues.value[4]
|
||
if (!addressInfo.value.phone) addressInfo.value.phone = formData.value.account;
|
||
if (!addressInfo.value.real_name) addressInfo.value.real_name = formData.value.real_name || formData.value.nickname;
|
||
userAddressEditApi({
|
||
...addressInfo.value,
|
||
uid: formData.value.id
|
||
}).then(res => {
|
||
selectedEd.value = JSON.parse(JSON.stringify(selectedValues.value))
|
||
ElMessage.success('编辑成功');
|
||
isDisabled.value = true;
|
||
}).catch(err => {
|
||
cancelUpdate();
|
||
})
|
||
}
|
||
|
||
const cancelUpdate = () => {
|
||
selectedValues.value = JSON.parse(JSON.stringify(selectedEd.value))
|
||
if (selectedEd.value.length > 0) {
|
||
addressInfo.value.city = selectedEd.value[0]
|
||
addressInfo.value.area = selectedEd.value[1]
|
||
addressInfo.value.street = selectedEd.value[2]
|
||
addressInfo.value.village = selectedEd.value[3]
|
||
addressInfo.value.brigade = selectedEd.value[4]
|
||
}
|
||
isDisabled.value = true;
|
||
}
|
||
|
||
const isDisabled = ref(true);
|
||
|
||
const activeStore = ref(0);
|
||
// const activeStoreList = ref(["基本信息"]);
|
||
const activeStoreList = ref(["基本信息", "用户资产"]);
|
||
|
||
const isOut = ref(false); // 是否为出库状态
|
||
const productList = ref([]); // 商品列表
|
||
const whereProduct = ref({
|
||
page_no: 1,
|
||
page_size: 10,
|
||
loading: false,
|
||
loadend: false
|
||
})
|
||
let info = []; // 出库列表
|
||
const initProduct = (re = false) => {
|
||
if (re) {
|
||
productList.value = [];
|
||
whereProduct.value.page_no = 1;
|
||
whereProduct.value.loadend = false;
|
||
}
|
||
if (whereProduct.value.loadend || whereProduct.value.loading) return;
|
||
whereProduct.value.loading = true;
|
||
userProductStorageApi({
|
||
uid: formData.value.id,
|
||
page_no: whereProduct.value.page_no,
|
||
page_size: whereProduct.value.page_size
|
||
}).then(res => {
|
||
productList.value = [...productList.value, ...res.data.lists];
|
||
whereProduct.value.loading = false;
|
||
whereProduct.value.page_no++;
|
||
if (res.data.lists.length < whereProduct.value.page_size) {
|
||
whereProduct.value.loadend = true;
|
||
}
|
||
})
|
||
}
|
||
|
||
const outForm = ref({
|
||
mobile: '',
|
||
code: ''
|
||
})
|
||
const dialogFormVisible = ref(false);
|
||
// 预出库
|
||
const onOutAll = () => {
|
||
outForm.value.mobile = formData.value.phone;
|
||
outForm.value.code = '';
|
||
info = productList.value.filter(item => item.n_num).map(item => {
|
||
return {
|
||
product_id: item.product_id,
|
||
nums: item.n_num
|
||
}
|
||
})
|
||
if (info.length == 0) return ElMessage.error("请选择商品");
|
||
dialogFormVisible.value = true;
|
||
// onOutPut();
|
||
}
|
||
// 发送短信验证码
|
||
const onSendCode = () => {
|
||
console.log('发送短信验证码');
|
||
ElMessage.success("验证码已发送");
|
||
}
|
||
|
||
// 出库
|
||
const onOutPut = () => {
|
||
if (outForm.value.code == '') return ElMessage.error("请输入验证码")
|
||
userProductStorageSupplyApi({
|
||
uid: formData.value.id,
|
||
info: info
|
||
}).then(res => {
|
||
isOut.value = false;
|
||
ElMessage.success("出库成功");
|
||
dialogFormVisible.value = false;
|
||
initProduct(true);
|
||
})
|
||
}
|
||
|
||
const getUserInfo = () => {
|
||
userDetailApi({
|
||
id: formData.value.id
|
||
}).then(({ data }) => {
|
||
data.phone = data.mobile + '';
|
||
delete data.mobile;
|
||
formData.value = Object.assign(formData.value, data);
|
||
})
|
||
}
|
||
|
||
// 成为会员
|
||
const dialogFormShip = ref(false);
|
||
const shipForm = ref({
|
||
user_ship: '',
|
||
user_ship_name: '',
|
||
limit: '',
|
||
money: '',
|
||
type: '',
|
||
})
|
||
const onUpdateShip = () => {
|
||
shipForm.value.money = Number(shipForm.value.money).toFixed(2);
|
||
if (+shipForm.value.money < +shipForm.value.limit || +shipForm.value.money > 10000) {
|
||
+shipForm.value.limit > 0 ? shipForm.value.money = shipForm.value.limit : shipForm.value.money = '';
|
||
// return ElMessage.error(`该类型至少需要充值${shipForm.value.limit}元`)
|
||
}
|
||
}
|
||
const changeShip = (e) => {
|
||
if (shipForm.value.type == 'add') {
|
||
let t = userShip.value.find(item => item.id == e);
|
||
if (t) {
|
||
shipForm.value.limit = t.limit;
|
||
shipForm.value.user_ship_name = t.title;
|
||
shipForm.value.money = t.limit;
|
||
}
|
||
}
|
||
}
|
||
const shipRecharge = () => {
|
||
if (shipForm.value.user_ship === '' || shipForm.value.user_ship === null || shipForm.value.user_ship === undefined || shipForm.value.user_ship === 0 || shipForm.value.user_ship === 4) return ElMessage.error("请选择会员类型");
|
||
if (shipForm.value.money == 0 || shipForm.value.money == '') return ElMessage.error(shipForm.value.type == 'add' ? "请输入充值金额" : "请选择金额");
|
||
if (shipForm.value.type == 'add' && (+shipForm.value.money < +shipForm.value.limit || +shipForm.value.money > 10000)) {
|
||
+shipForm.value.limit > 0 ? shipForm.value.money = shipForm.value.limit : shipForm.value.money = '';
|
||
return ElMessage.error(`该类型至少需要充值${shipForm.value.limit}元`)
|
||
}
|
||
payRef.value.setForm({
|
||
data: {
|
||
uid: formData.value.id,
|
||
price: shipForm.value.money,
|
||
user_ship: shipForm.value.user_ship,
|
||
village: addressInfo.value.village,
|
||
brigade: addressInfo.value.brigade
|
||
}
|
||
});
|
||
payRef.value.drawer = true;
|
||
nextTick(() => {
|
||
dialogFormShip.value = false;
|
||
})
|
||
}
|
||
const rechargeMoney = (type) => {
|
||
if (selectedEd.value.length == 0) return ElMessage.error("请先选择用户地址");
|
||
shipForm.value.type = type;
|
||
if (type == 'add') {
|
||
shipForm.value.user_ship = formData.value.user_ship;
|
||
shipForm.value.user_ship_name = formData.value.user_ship_name;
|
||
changeShip(shipForm.value.user_ship);
|
||
}
|
||
dialogFormShip.value = true;
|
||
}
|
||
|
||
onMounted(() => {
|
||
mitt.on("set-user-detail", (res) => {
|
||
formData.value = res;
|
||
isOut.value = false;
|
||
userDetailApi({
|
||
id: formData.value.id
|
||
}).then(({ data }) => {
|
||
data.phone = data.mobile + '';
|
||
delete data.mobile;
|
||
formData.value = Object.assign(res, data);
|
||
// console.log(formData.value);
|
||
})
|
||
selectedValues.value = [];
|
||
selectedEd.value = [];
|
||
getAddress();
|
||
initProduct(true);
|
||
shipForm.value = {
|
||
user_ship: '',
|
||
user_ship_name: '',
|
||
limit: '',
|
||
money: '',
|
||
type: ''
|
||
}
|
||
});
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
mitt.off("set-user-detail");
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="my-order">
|
||
<div class="header-nav">
|
||
<div v-for="(item, index) in activeStoreList" :key="index" class="nav-item" :class="{
|
||
'nav-item-active': activeStore == index,
|
||
'nav-item-radius1': activeStore == index + 1,
|
||
'nav-item-radius2': activeStore == index - 1,
|
||
}" @click="activeStore = index">
|
||
{{ item }}
|
||
</div>
|
||
<div class="nav-item" :class="{
|
||
'nav-item-radius2': activeStore == activeStoreList.length - 1,
|
||
}" style="flex: 1"></div>
|
||
</div>
|
||
<div class="detail" v-if="formData.id && activeStore == 0">
|
||
<div class="table">
|
||
<div class="table-title">用户信息</div>
|
||
<div class="table-info">
|
||
<div class="info-item">
|
||
<div class="info-item-title">用户余额:</div>
|
||
<div class="info-item-info red">¥{{ formData.now_money }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">采购款:</div>
|
||
<div class="info-item-info red">¥{{ formData.purchase_funds }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">返还金:</div>
|
||
<div class="info-item-info red">¥{{ formData.return_money?.toFixed(2) }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">头像:</div>
|
||
<div class="info-item-info">
|
||
<el-avatar style="width: 4rem;height: 4rem;" :src="formData.avatar" />
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">礼品券:</div>
|
||
<div class="info-item-info red">¥{{ formData.integral }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">冻结礼品券:</div>
|
||
<div class="info-item-info red">¥{{ formData.get_frozen }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">ID:</div>
|
||
<div class="info-item-info">{{ formData.id }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">用户昵称:</div>
|
||
<div class="info-item-info">{{ formData.nickname }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">用户电话:</div>
|
||
<div class="info-item-info">{{ formData.phone }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">用户账号:</div>
|
||
<div class="info-item-info">{{ formData.account }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">真实姓名:</div>
|
||
<div class="info-item-info">{{ formData.real_name }}</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<div class="info-item-title">创建时间:</div>
|
||
<div class="info-item-info">{{ formData.create_time }}</div>
|
||
</div>
|
||
<div class="info-item" style="width: 100%;flex-shrink: 0;align-items: center;">
|
||
<div class="info-item-title">用户类型:</div>
|
||
<div class="info-item-info">
|
||
<template v-if="updateShip == false">
|
||
<el-tag type="primary" size="large"
|
||
v-if="formData.user_ship == 0 || formData.user_ship == 4">{{
|
||
formData.user_ship_name
|
||
}}</el-tag>
|
||
<el-tag type="success" size="large" v-else>{{ formData.user_ship_name }}</el-tag>
|
||
<el-button type="primary" v-if="formData.user_ship == 0 || formData.user_ship == 4"
|
||
style="margin-left: 1rem;" @click="updateShip = true">修改</el-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-select v-model="formData.user_ship" placeholder="请选择用户类型" style="width: 10rem;">
|
||
<el-option v-for="item in userShip" :key="item.id" :label="item.title"
|
||
:value="item.id" :disabled="item.id != 0 && item.id != 4" />
|
||
</el-select>
|
||
<el-button type="primary" style="margin-left: 1rem;"
|
||
@click="updateUserShip">确认</el-button>
|
||
<el-button style="margin-left: 1rem;" @click="cancelUserShip">取消</el-button>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="info-item" v-if="formData.user_ship == 1"
|
||
style="width: 100%;flex-shrink: 0;align-items: center;">
|
||
<div class="info-item-title">用户标签:</div>
|
||
<div class="info-item-info">
|
||
<template v-if="updateLable == false">
|
||
<el-tag type="primary" size="large" v-if="formData.label_name">{{ formData.label_name
|
||
}}</el-tag>
|
||
<el-button type="primary" v-if="formData.label_name" style="margin-left: 1rem;"
|
||
@click="updateLable = true">修改</el-button>
|
||
<el-button type="primary" v-else style="margin-left: 1rem;"
|
||
@click="formData.label_id = ''; updateLable = true;">添加</el-button>
|
||
</template>
|
||
<template v-else>
|
||
<el-select v-model="formData.label_id" placeholder="请选择用户类型" style="width: 10rem;">
|
||
<el-option v-for="item in userLable" :key="item.label_id" :label="item.label_name"
|
||
:value="item.label_id" />
|
||
</el-select>
|
||
<el-button type="primary" style="margin-left: 1rem;"
|
||
@click="updateUserLable">确认</el-button>
|
||
<el-button style="margin-left: 1rem;" @click="cancelLable">取消</el-button>
|
||
</template>
|
||
</div>
|
||
</div> -->
|
||
<div class="info-item" style="width: 100%;flex-shrink: 0;align-items: center;">
|
||
<div class="info-item-title">用户地址:</div>
|
||
<el-cascader :key="formData.id" style="flex: 1;" v-model="selectedValues" :options="options"
|
||
:props="props" :load="loadOptions" class="w-full" :disabled="isDisabled" />
|
||
<el-button v-if="isDisabled && !selectedEd.length" type="primary" style="margin-left: 1rem;"
|
||
@click="isDisabled = false">修改</el-button>
|
||
<el-button v-if="!isDisabled" type="primary" style="margin-left: 1rem;"
|
||
@click="updateAddress">确认</el-button>
|
||
<el-button v-if="!isDisabled" style="margin-left: 1rem;" @click="cancelUpdate">取消</el-button>
|
||
</div>
|
||
<el-button v-if="formData.user_ship != 0 && formData.user_ship != 4" type="success" class="big-btn"
|
||
size="large" @click="rechargeMoney('add')">增加经营资金</el-button>
|
||
<el-button v-else type="primary" class="big-btn" size="large"
|
||
@click="rechargeMoney('recharge')">成为会员</el-button>
|
||
</div>
|
||
<!-- <div class="table-title" v-if="formData.user_ship != 0 && formData.user_ship != 4">供销经营礼包</div>
|
||
<div class="table-info" v-if="formData.user_ship != 0 && formData.user_ship != 4">
|
||
<div class="pay-btn">
|
||
<div class="pay-item" :class="{ 'pay-item-active': payInfo.type == 1 }"
|
||
@click="payInfo.type = 1">
|
||
<div>¥1000.00</div>
|
||
</div>
|
||
<div class="pay-item" :class="{ 'pay-item-active': payInfo.type == 2 }"
|
||
@click="payInfo.type = 2">
|
||
<div>¥2000.00</div>
|
||
</div>
|
||
<div class="pay-item" :class="{ 'pay-item-active': payInfo.type == 3 }"
|
||
@click="payInfo.type = 3">
|
||
<div>¥5000.00</div>
|
||
</div>
|
||
<div class="pay-item" :class="{ 'pay-item-active': payInfo.type == 0 }"
|
||
@click="payInfo.type = 0">
|
||
<input type="number" class="input" v-model="payInfo.price" placeholder="自定义金额">
|
||
</div>
|
||
</div>
|
||
<el-button type="primary" size="large" class="pay" @click="toPay">立即支付</el-button>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="detail" v-if="formData.id && activeStore == 1" v-loading="whereProduct.loading">
|
||
<div class="table" v-infinite-scroll="initProduct" :infinite-scroll-distance="300"
|
||
:infinite-scroll-delay="300" style="overflow: auto" :infinite-scroll-immediate="false">
|
||
<el-table :data="productList">
|
||
<el-table-column label="商品信息">
|
||
<template #default="{ row }">
|
||
<div style="display: flex; align-items: center">
|
||
<el-image style="height: 3rem; width: 3rem;flex-shrink: 0;" :src="row.image"></el-image>
|
||
<span style="margin-left: 0.5rem">{{ row.store_name }}</span>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="price" label="单价" :width="isOut ? 130 : 200" />
|
||
<el-table-column prop="nums" label="存量" :width="isOut ? 100 : 200" />
|
||
<el-table-column prop="nums" v-if="isOut" label="出库量" width="250">
|
||
<template #default="{ row }">
|
||
<div style="display: flex; align-items: center" v-if="row.nums">
|
||
<el-input-number v-model="row.n_num" step-strictly :min="0" :max="row.nums" />
|
||
<el-button type="primary" style="margin-left: 1rem;"
|
||
@click="row.n_num = row.nums">全部</el-button>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column prop="pay_price" label="总价" width="150" /> -->
|
||
</el-table>
|
||
</div>
|
||
<div class="footer">
|
||
<div v-if="!isOut">
|
||
<el-button type="warning" size="large" @click="isOut = true"
|
||
:disabled="productList.length == 0">商品出库</el-button>
|
||
<!-- <el-button type="primary" size="large" @click="onOutAll">全部出库</el-button> -->
|
||
</div>
|
||
<div v-else>
|
||
<el-button type="primary" size="large" @click="onOutAll">确认出库</el-button>
|
||
<el-button size="large" @click="isOut = false">取消</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else>
|
||
<el-empty></el-empty>
|
||
</div>
|
||
<payUser ref="payRef" @paySuccess="paySuccess"></payUser>
|
||
<el-dialog v-model="dialogFormVisible" title="出库验证" width="500">
|
||
<el-form :model="outForm">
|
||
<el-form-item label="手机号:">
|
||
<el-input v-model="outForm.mobile" autocomplete="off" readonly />
|
||
</el-form-item>
|
||
<el-form-item label="验证码:">
|
||
<el-input v-model="outForm.code" autocomplete="off" placeholder="请输入验证码" style="flex: 1;" />
|
||
<authCode style="margin-left: 1rem;" @sendCode="onSendCode" :key="outForm.mobile"></authCode>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="dialogFormVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="onOutPut">
|
||
确认
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
<el-dialog v-model="dialogFormShip" :title="shipForm.type == 'add' ? '增加经营资金' : '成为会员'" width="500">
|
||
<el-form :model="shipForm" label-width="100px">
|
||
<el-form-item label="手机号:">
|
||
<el-input v-model="formData.phone" autocomplete="off" readonly />
|
||
</el-form-item>
|
||
<el-form-item label="会员类型:" v-if="shipForm.type == 'add'">
|
||
<el-input v-model="shipForm.user_ship_name" autocomplete="off" readonly />
|
||
</el-form-item>
|
||
<el-form-item label="会员类型:" v-else required>
|
||
<el-select v-model="shipForm.user_ship" placeholder="请选择用户类型" style="flex: 1" @change="changeShip">
|
||
<el-option v-for="item in userShip" :key="item.id" :label="item.title" :value="item.id"
|
||
:disabled="item.id == 0 || item.id == 4" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="充值金额:" required v-if="shipForm.type == 'add'">
|
||
<!-- <input type="number" class="ship-input" v-model="payInfo.price" placeholder="自定义金额"> -->
|
||
<el-input v-model="shipForm.money" type="number" @blur="onUpdateShip" @focus="shipForm.money = ''"
|
||
autocomplete="off">
|
||
<template #prepend>￥</template>
|
||
<template #append>元</template>
|
||
</el-input>
|
||
<div v-if="shipForm.limit">{{ `${shipForm.user_ship_name}角色至少要充值${shipForm.limit}元, 最大不超过10000元` }}
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="充值金额:" required v-else>
|
||
<div class="ship-money-list">
|
||
<div class="ship-money-item" :class="{ 'ship-money-item-active': item.money == shipForm.money }"
|
||
@click="shipForm.money = item.money" v-for="(item, index) in userRechargeList" :key="index">
|
||
<div class="item1">{{ item.money }}{{ item.money_string }}</div>
|
||
<div class="item2">送{{ item.send }}{{ item.send_string }}</div>
|
||
</div>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="dialog-footer">
|
||
<el-button @click="dialogFormShip = false">取消</el-button>
|
||
<el-button type="primary" @click="shipRecharge">
|
||
确认
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.my-order {
|
||
border-radius: 1.2rem;
|
||
height: 100%;
|
||
flex: 1;
|
||
background-color: #fff;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
.header-nav {
|
||
display: flex;
|
||
background: linear-gradient(to bottom,
|
||
#f5f5f5 50%,
|
||
#fff 50%);
|
||
|
||
/* 创建渐变背景 */
|
||
.nav-item {
|
||
height: 4rem;
|
||
width: 8rem;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.2rem;
|
||
background-color: #f5f5f5;
|
||
border-radius: 1rem 1rem 0 0;
|
||
}
|
||
|
||
.nav-item-active {
|
||
background-color: #fff;
|
||
position: relative;
|
||
transition: 300ms;
|
||
}
|
||
|
||
.nav-item-radius1 {
|
||
border-radius: 0 0 1rem 0;
|
||
}
|
||
|
||
.nav-item-radius2 {
|
||
border-radius: 0 0 0 1rem;
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
height: calc(100% - 4rem);
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
.table {
|
||
padding: 1rem;
|
||
padding-bottom: 7rem;
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
|
||
.table-title {
|
||
font-weight: bold;
|
||
|
||
.tips {
|
||
font-weight: 400;
|
||
color: #999;
|
||
font-size: 0.8rem;
|
||
margin-left: 1rem;
|
||
}
|
||
}
|
||
|
||
.table-info {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
color: #777;
|
||
font-size: 0.9rem;
|
||
padding-bottom: 1rem;
|
||
margin-bottom: 1rem;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.info-item {
|
||
width: 33%;
|
||
display: flex;
|
||
padding-top: 1rem;
|
||
|
||
.red {
|
||
color: #ff4a00;
|
||
}
|
||
|
||
.info-item-title {
|
||
flex-shrink: 0;
|
||
padding-right: 1rem;
|
||
}
|
||
}
|
||
|
||
.pay-btn {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 1rem;
|
||
|
||
.pay-item {
|
||
flex: 1;
|
||
min-width: 10rem;
|
||
margin: 1rem 0.5rem 0 0.5rem;
|
||
height: 5rem;
|
||
background-color: rgba($color: #67c23a, $alpha: 0.1);
|
||
color: #67c23a;
|
||
border-radius: 1rem;
|
||
border: 2px solid #67c23a;
|
||
cursor: pointer;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 1.5rem;
|
||
font-size: 1.5rem;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.input {
|
||
font-size: 1.5rem;
|
||
width: 100%;
|
||
height: 100%;
|
||
text-align: center;
|
||
color: #67c23a;
|
||
}
|
||
|
||
&-active {
|
||
background-color: #67c23a;
|
||
color: #fff;
|
||
|
||
.input {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.pay {
|
||
width: 100%;
|
||
border-radius: 3rem;
|
||
margin: 0.5rem;
|
||
}
|
||
}
|
||
|
||
.big-btn {
|
||
margin-top: 1rem;
|
||
width: 100%;
|
||
border-radius: 3rem;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
position: absolute;
|
||
z-index: 1000;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 6rem;
|
||
box-sizing: border-box;
|
||
background-color: #fff;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding: 0 2rem;
|
||
border-top: 1px solid #eee;
|
||
}
|
||
}
|
||
|
||
input[type="number"] {
|
||
/* 移除边框 */
|
||
border: none;
|
||
/* 移除内边距 */
|
||
padding: 0;
|
||
/* 移除默认背景颜色 */
|
||
background-color: transparent;
|
||
/* 移除聚焦时的轮廓 */
|
||
outline: none;
|
||
/* 重置文本填充色，防止某些浏览器对自动填充的文本颜色有特殊样式 */
|
||
-webkit-text-fill-color: inherit;
|
||
/* 适用于Webkit内核浏览器 */
|
||
-webkit-appearance: none;
|
||
/* 针对Webkit内核，移除一些特殊样式 */
|
||
/* 防止输入框在聚焦时出现阴影或特殊样式 */
|
||
box-shadow: none;
|
||
}
|
||
|
||
.ship-input {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 2rem;
|
||
border: 0.2rem solid #67c23a !important;
|
||
padding: 1rem 0 !important;
|
||
color: #67c23a;
|
||
border-radius: 0.5rem;
|
||
}
|
||
|
||
.ship-money-list {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
|
||
.ship-money-item {
|
||
width: 10rem;
|
||
height: 5rem;
|
||
margin: 0 1rem 1rem 0;
|
||
background-color: rgba(#67c23a, 0.1);
|
||
border: 2px solid #67c23a;
|
||
border-radius: 0.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.item1 {
|
||
font-size: 1.1rem;
|
||
font-weight: bold;
|
||
color: #67c23a;
|
||
}
|
||
|
||
.item2 {
|
||
font-size: 0.8rem;
|
||
line-height: 1rem;
|
||
}
|
||
|
||
&-active {
|
||
background-color: #67c23a;
|
||
color: #fff !important;
|
||
|
||
.item1 {
|
||
color: #fff !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|