Skip to content

S
SuperMan
Commit 8220e751 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent 48dac3de
Show whitespace changes
Inline Side-by-side
Showing with 0 additions and 520 deletions
src/components/mall/goodlist.vue
View file @ 8220e751
<style scope>
.circle {
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
background: grey;
border-radius: 20px;
margin-right: 5px;
}
.circle.red {
background: #fe4433;
}
.circle.green {
background: green;
}
.circle.black {
background: black;
}
.remark {
margin-right: 20px;
font-size: 12px;
display: inline-block;
vertical-align: text-top;
}
.wd100 {
width: 100% !important;
}
.el-tag+.el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
.goodlist .checkSpec {
border: 1px solid red !important;
}
</style>
<template>
<div class="flexOne goodlist">
<div class="query-box">
<ul>
<li>
<span>
<em>商品分类</em>
<el-select v-model="showCategoryName" placeholder="请选择" multiple clearable collapse-tags
@change="selectChange">
<el-option :value="chooseCategroyArray" style="height: auto">
<el-tree :data="CategoryList" show-checkbox node-key="Id" ref="tree" highlight-current
:props="defaultProps" @check-change="categoryCheckChange"></el-tree>
</el-option>
</el-select>
</span>
</li>
<li>
<span>
<em>商品名称</em>
<el-input v-model="msg.Name" class="w150" clearable></el-input>
</span>
</li>
<li>
<input type="button" class="hollowFixedBtn" value="查询" @click="resetPageIndex" /> &nbsp;
</li>
</ul>
</div>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total">
</el-pagination>
<table v-loading="loading">
<thead>
<tr>
<th style="width:100px;">编号</th>
<th>分类</th>
<th style="width:250px;">
商品名称
</th>
<th style="width:150px;">
库存
</th>
<th style="width:150px;">
售价
</th>
<th>
分享赚
</th>
<th>
购买省
</th>
<th style="width:200px;">
操作
</th>
</tr>
</thead>
<tbody v-for="(item,index) in DataList" :key="index">
<tr>
<td>
{{item.id}}
</td>
<td>
<template
v-if="item.erpgoodobj&&item.erpgoodobj.goods&&item.erpgoodobj.goods.cats&&item.erpgoodobj.goods.cats.length>0">
<span v-for="(subItem,subIndex) in item.erpgoodobj.goods.cats" :key="subIndex">{{subItem.CategoryName}}
</span>
</template>
</td>
<td>
{{item.name}}
</td>
<td>
{{item.goods_stock}}
</td>
<td>
{{item.price}} 起
</td>
<td>
<template v-if="item.erpgoodobj&&item.erpgoodobj.goods">
{{item.erpgoodobj.goods.share}} 元
</template>
</td>
<td>
<template v-if="item.erpgoodobj&&item.erpgoodobj.goods">
{{item.erpgoodobj.goods.myBuyCommission}} 元
</template>
</td>
<td>
<el-popover placement="left" width="450" trigger="click">
<table>
<thead>
<tr>
<td colspan="2">
{{item.name}}
</td>
</tr>
</thead>
<tbody v-for="(subItem,subIndex) in item.attr_groups" :key="subIndex">
<tr>
<td colspan="2">
{{subItem.attr_group_name}}
</td>
</tr>
<tr>
<td colspan="2">
<span
style="cursor:pointer;border:1px solid #dcdfe6;margin-left:5px;padding:4px;border-radius:5px"
v-for="(childItem,childIndex) in subItem.attr_list" :key="childIndex"
@click="chooseSpec(subIndex,childIndex),calcTotalPrice()"
:class="{'checkSpec':subItem.checkId==childIndex}">
{{childItem.attr_name}}_
{{subItem.checkId}}_
{{childIndex}}
</span>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
购买数量:
</td>
<td>
<el-input-number @change="calcTotalPrice()" v-model="orderMsg.Number" :min="1" :max="10"
label="请输入购买数量"></el-input-number>
</td>
</tr>
<tr>
<td>
选择用户:
</td>
<td>
<el-select v-model="orderMsg.mallUserId" filterable remote reserve-keyword placeholder="请输入微信昵称"
:remote-method="getWechatData" @change="weChatChange">
<el-option v-for="wItem in weChatData" :key="wItem.Id" :label="wItem.Name" :value="wItem.Id">
<span style="float: left">{{ wItem.Name }}
<template v-if="wItem.ShopId>0">
<span style="color:red;">【{{ wItem.ShopName }}】</span>
</template>
</span>
</el-option>
</el-select>
</td>
</tr>
<tr>
<td>
收货地址:
</td>
<td>
<el-select v-model="orderMsg.AddressId" placeholder="请选择" @change="ChangeAddress">
<el-option v-for="aItem in addressList" :key="aItem.Id" :label="aItem.Name" :value="aItem.Id">
<span style="float: left">{{ aItem.Name }}【{{aItem.DistrictAddress}}{{aItem.Address}}】</span>
</el-option>
</el-select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
价格:
</td>
<td>
￥ {{orderMsg.TotalPrice}} 元
</td>
</tr>
</tfoot>
</table>
<p class="alcenter mt10">
<input type="button" :value="$t('pub.saveBtn')" @click="SaveOrder()" class="normalBtn" />
</p>
<el-button type="primary" icon="iconfont icon-beizhu" slot="reference"
style="background:#AD9AF6; border-color:#AD9AF6; border-radius: 0;"
@click="clreaMsg(),currentGoodsObj={},currentGoodsObj=item">下单
</el-button>
</el-popover>
</td>
</tr>
</tbody>
</table>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.currentPage"
layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="msg.total">
</el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
statusValue: 0, //请选择
//数据列表
DataList: [],
CategoryList: [], //分类列表
loading: false,
showCategoryName: "",
chooseCategroyArray: [],
//默认属性
defaultProps: {
children: 'ChildList',
label: 'Name'
},
//查询参数
msg: {
currentPage: 1,
//总条数
total: 0,
pageIndex: 1,
pageSize: 10,
Name: "优质", //商品名称
CategoryIds: "", //商品分类
IsGetShare: 1, //获取分销
ERPUserId: 0, //商城用户Id
ERPSmallShopId: 0, //用户店铺Id
},
weChatData: [], //微信用户列表
addressList: [], //收货地址列表
orderMsg: {
GoodsId: 0, //商品编号
Number: 1, //商品数量
SpecificationSort: "", //规格
mallUserId: "", //用户Id
AddressId: 0, //收货地址Id
TotalPrice: 0, //总价格
specificationNameList: [], //规格列表
},
//当前选中商品
currentGoodsObj: {},
chooseAddressObj: {}, //选中的地址
};
},
methods: {
//清空数据
clreaMsg() {
this.orderMsg.GoodsId = 0;
this.orderMsg.Number = 1;
this.orderMsg.SpecificationSort = "";
this.orderMsg.mallUserId = "";
this.orderMsg.AddressId = 0;
this.orderMsg.TotalPrice = 0;
this.orderMsg.specificationNameList = [];
//清空临时对象
this.currentGoodsObj = {};
this.chooseAddressObj = {};
this.weChatData = [];
this.addressList = [];
},
//选择规格
chooseSpec(index, subIndex) {
var tempObj = this.currentGoodsObj.attr_groups[index].attr_list[subIndex];
if (this.currentGoodsObj.attr_groups[index].checkId != tempObj.attr_id) {
this.currentGoodsObj.attr_groups[index].checkId = tempObj.attr_id;
this.currentGoodsObj.attr_groups[index].checkName = tempObj.attr_name;
} else {
this.currentGoodsObj.attr_groups[index].checkId = 0;
this.currentGoodsObj.attr_groups[index].checkName = this.currentGoodsObj.attr_groups[index]
.attr_group_name;
}
},
//计算总价格
calcTotalPrice() {
let sign = '';
let specificationNameList = [];
var tempSku = {};
if (this.currentGoodsObj.attr_groups && this.currentGoodsObj.attr_groups.length > 0) {
this.currentGoodsObj.attr_groups.forEach(specItem => {
if (specItem.checkId != -1) {
sign += (sign == '' ? '' : ':') + specItem.checkId;
var subName = specItem.attr_group_name + ":" + specItem.checkName;
specificationNameList.push(subName);
}
});
}
if (this.currentGoodsObj.attr && this.currentGoodsObj.attr.length) {
this.currentGoodsObj.attr.forEach(specValue => {
if (specValue.sign_id == sign) {
tempSku = specValue;
}
});
}
if (tempSku != null && tempSku.price) {
this.orderMsg.GoodsId = this.currentGoodsObj.id;
this.orderMsg.SpecificationSort = tempSku.sign_id;
this.orderMsg.specificationNameList = specificationNameList;
this.orderMsg.TotalPrice = (parseFloat(tempSku.price) * parseFloat(this.orderMsg.Number)).toFixed(2);
}
},
//商品分类下拉框改变
selectChange(e) {
var arrNew = [];
var dataLength = this.chooseCategroyArray.length;
var eleng = e.length;
for (let i = 0; i < dataLength; i++) {
for (let j = 0; j < eleng; j++) {
if (e[j] === this.chooseCategroyArray[i].Name) {
arrNew.push(this.chooseCategroyArray[i])
}
}
}
this.$refs.tree.setCheckedNodes(arrNew); //设置勾选的值
},
//商品分类选中
categoryCheckChange() {
//这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
let res = this.$refs.tree.getCheckedNodes(true, true);
let arrLabel = [];
let arr = [];
res.forEach(item => {
arrLabel.push(item.Name);
arr.push(item);
});
this.chooseCategroyArray = arr;
this.showCategoryName = arrLabel;
},
//获取商品分类列表
getCategroy() {
let msg1 = {
Id: 0,
Name: '',
Tier: 0,
ParentId: 0,
Enabled: 1,
IsShow: 1,
}
this.mallapipost("/api/AppletGoods/GetProductCategoryTreeList", msg1, res => {
if (res.data.resultCode == 1) {
let pageData = res.data.data;
this.CategoryList = pageData;
}
})
},
//获取商品列表
getGoodList() {
this.msg.CategoryIds = "";
var tempCategory = "";
if (this.chooseCategroyArray && this.chooseCategroyArray.length > 0) {
this.chooseCategroyArray.forEach(item => {
tempCategory += item.Id + ",";
})
}
this.msg.CategoryIds = tempCategory.substring(0, tempCategory.lastIndexOf(','));
if (this.getLocalStorage().MallUserId) {
this.msg.ERPUserId = this.getLocalStorage().MallUserId;
}
if (this.getLocalStorage().MallSmallShopsId) {
this.msg.ERPSmallShopId = this.getLocalStorage().MallSmallShopsId;
}
this.loading = true;
this.DataList = [];
this.mallapipost(
"/api/AppletGoods/GetAppletGoodsPageListForZY",
this.msg,
res => {
this.loading = false;
if (res.data.resultCode == 1) {
var tempArray = res.data.data.pageData;
if (tempArray && tempArray.length > 0) {
tempArray.forEach(item => {
if (item.attr_groups && item.attr_groups.length > 0) {
item.attr_groups.forEach(specItem => {
specItem.checkId = 0; //选择的规格索引
specItem.checkName = ""; //选择的规格名称
})
}
})
}
this.DataList = tempArray;
this.msg.total = res.data.data.count;
}
});
},
//分页
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getGoodList();
},
//重新查询
resetPageIndex() {
this.msg.pageIndex = 1;
this.msg.currentPage = 1;
this.getGoodList();
},
//获取微信用户列表
getWechatData(keyWords) {
this.weChatData = [];
this.addressList = [];
var qMsg = {
Name: keyWords
};
this.mallapipost(
"/api/User/GetMemberUserListExt",
qMsg,
res => {
if (res.data.resultCode == 1) {
this.weChatData = res.data.data;
}
});
},
//获取用户收货地址
weChatChange() {
this.addressList = [];
this.mallapipost(
"/api/User/GetShippingAddressList", {
NewUserId: this.orderMsg.mallUserId
},
res => {
if (res.data.resultCode == 1) {
this.addressList = res.data.data;
}
});
},
//切换收货地址
ChangeAddress() {
let addressObj = this.addressList.find(item => {
return item.Id === this.orderMsg.AddressId; //筛选出匹配数据
});
this.chooseAddressObj = addressObj;
},
//下单
SaveOrder() {
var DetailList = [{
SpecificationSort: this.orderMsg.SpecificationSort,
Number: this.orderMsg.Number,
GoodsId: this.orderMsg.GoodsId,
SpecificationList: this.orderMsg.specificationNameList
}];
let orderData = {
Consignee: this.chooseAddressObj.Name,
Mobile: this.chooseAddressObj.Mobile,
Province: this.chooseAddressObj.Province,
City: this.chooseAddressObj.City,
District: this.chooseAddressObj.District,
ShoppingAddress: this.chooseAddressObj.Address,
BuyerMessage: "", //买家留言
DeliveryMethod: 1, //1-快递配送，2-到店自提，3-同城配送
DetailList: DetailList,
User_Coupon_Id: 0,
CouponMoney: 0, //优惠金额
FreightMoney: 0, //运费
Income: this.orderMsg.TotalPrice,
IsFormShoppingCart: 2,
Use_Integral: 0,
ShoppingCartIdList: [], //购物车编号
AnchorName: "", //主播名称
NewUserId: this.orderMsg.mallUserId,
NewShopId: this.getLocalStorage().MallSmallShopsId
}
this.mallapipost("/api/AppletOrder/SetERPGoodsOrderInfo", orderData, res => {
if (res.data.resultCode == 1) {
this.Success("下单成功!");
this.clreaMsg();
this.getGoodList();
} else {
this.Error(res.data.message);
}
})
}
},
mounted() {
this.getCategroy();
this.getGoodList();
}
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment