Skip to content

S
SuperMan
Commit 03f0ebbc authored by zhengke's avatar zhengke
Browse files
Options

修改

parent d30ab812
Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 70 deletions
src/components/mall/goodlist.vue
View file @ 03f0ebbc
<style scope>
.gd_Item{
cursor:pointer;
border:1px solid #dcdfe6;
margin:0 0 5px 5px;
padding:0px 8px;
border-radius:5px;
font-size:12px;
.gd_Item {
cursor: pointer;
border: 1px solid #dcdfe6;
margin: 0 0 5px 5px;
padding: 0px 8px;
border-radius: 5px;
font-size: 12px;
line-height: 24px;
display: inline-block;
}
.goodLisPopver .checkSpec {
.order_Dialog .checkSpec {
border: 1px solid red !important;
}
.goodLisPopver .el-input__inner{
height:32px!important;
.order_Dialog .el-input__inner {
height: 32px !important;
}
.goodAddress {
font-size: 13px;
color: #409EFF;
cursor: pointer;
}
</style>
<template>
<div class="flexOne goodlist">
......@@ -104,60 +113,10 @@
</template>
</td>
<td>
<el-popover placement="left" width="450" popper-class="goodLisPopver" trigger="click">
<div style="margin-bottom:20px;">
{{item.name}}
</div>
<el-form label-width="80px" size="small">
<template v-for="(subItem,subIndex) in item.attr_groups">
<el-form-item :key="subIndex" :label="subItem.attr_group_name" style="line-height:25px;">
<span class="gd_Item" 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>
</el-form-item>
</template>
<el-form-item label="购买数量" size="small">
<el-input-number @change="calcTotalPrice()" size="small" style="height:32px;" v-model="orderMsg.Number" :min="1" :max="10"
label="请输入购买数量"></el-input-number>
</el-form-item>
<el-form-item label="选择用户" size="small">
<el-select size="small" 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>
</el-form-item>
<el-form-item label="收货地址" size="small">
<el-select size="small" 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>
</el-form-item>
<el-form-item label="运费" size="small">
{{orderMsg.FreightMoney}}
</el-form-item>
<el-form-item label="价格" size="small">
￥{{orderMsg.TotalPrice}}元
</el-form-item>
</el-form>
<p class="alcenter mt10">
<input type="button" :value="$t('pub.saveBtn')" @click="SaveOrder()" class="normalBtn" />
</p>
<el-button type="primary" size="small" icon="iconfont icon-beizhu" slot="reference"
<el-button type="primary" size="small" icon="iconfont icon-beizhu"
style="background:#AD9AF6; border-color:#AD9AF6; border-radius: 0;padding:4px;"
@click="clreaMsg(),currentGoodsObj={},currentGoodsObj=item,calcTotalPrice()"> 下单
@click="clreaMsg(),currentGoodsObj={},currentGoodsObj=item,calcTotalPrice(),orderDialog=true;"> 下单
</el-button>
</el-popover>
</td>
</tr>
</tbody>
......@@ -165,6 +124,77 @@
<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>
<el-dialog title="下单" :visible.sync="orderDialog" custom-class="order_Dialog" width="400px">
<div style="margin-bottom:20px;">
{{currentGoodsObj.name}}
</div>
<el-form label-width="80px" size="small">
<template v-for="(subItem,subIndex) in currentGoodsObj.attr_groups">
<el-form-item :key="subIndex" :label="subItem.attr_group_name" style="line-height:25px;">
<span class="gd_Item" v-for="(childItem,childIndex) in subItem.attr_list" :key="childIndex"
@click="chooseSpec(subIndex,childIndex),calcTotalPrice()"
:class="{'checkSpec':subItem.checkId==childItem.attr_id}">
{{childItem.attr_name}}
</span>
</el-form-item>
</template>
<el-form-item label="购买数量" size="small">
<el-input-number @change="calcTotalPrice()" size="small" style="height:32px;" v-model="orderMsg.Number"
:min="1" :max="10" label="请输入购买数量"></el-input-number>
</el-form-item>
<el-form-item label="选择用户" size="small">
<el-select size="small" 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>
</el-form-item>
<el-form-item label="收货地址" size="small">
<el-select size="small" 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>
<span class="goodAddress" @click="addAddress()">新增</span>
</el-form-item>
<el-form-item label="运费" size="small">
￥<span style="color:red">{{orderMsg.FreightMoney}}</span>元
</el-form-item>
<el-form-item label="价格" size="small">
￥<span style="color:red">{{orderMsg.TotalPrice}}</span>元
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="orderDialog = false">取 消</el-button>
<el-button size="small" type="danger" @click="SaveOrder()">确 定</el-button>
</span>
</el-dialog>
<el-dialog title="新增地址" :visible.sync="goodVisible" width="600px">
<el-form ref="AddressMsg" :model="AddressMsg" :rules="rules" label-width="100px">
<el-form-item label="收货人" prop="Name">
<el-input class="w300" v-model="AddressMsg.Name"></el-input>
</el-form-item>
<el-form-item label="联系电话" prop="Mobile">
<el-input class="w300" v-model="AddressMsg.Mobile"></el-input>
</el-form-item>
<el-form-item label="省市区" prop="position">
<el-cascader class="w300" v-model="AddressMsg.position" :placeholder="addressName" :options="provinceList"
@active-item-change="handleItemChange" :props="props"></el-cascader>
</el-form-item>
<el-form-item label="详细地址" prop="Address">
<el-input v-model="AddressMsg.Address" placeholder="请输入详细地址" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="goodVisible = false">取 消</el-button>
<el-button size="small" type="danger" @click="saveInfo('AddressMsg')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
......@@ -211,6 +241,49 @@
//当前选中商品
currentGoodsObj: {},
chooseAddressObj: {}, //选中的地址
//新增地址msg
AddressMsg: {
Id: 0,
Name: '',
Mobile: '',
Province: '',
City: '',
District: '',
Address: '',
NewUserId: 0,
position: [],
},
addressName: '请选择',
provinceList: [], //省市县列表
props: {
value: 'value',
children: 'cities'
},
rules: {
Name: [{
required: true,
message: "请输入收件人姓名",
trigger: "blur"
}],
Mobile: [{
required: true,
message: "请输入联系方式",
trigger: "blur"
}],
Address: [{
required: true,
message: "请输入详细地址",
trigger: "blur"
}],
position: [{
type: 'array',
required: true,
message: '请选择省市区',
trigger: 'change'
}],
},
orderDialog:false,
goodVisible: false,
};
},
methods: {
......@@ -341,6 +414,7 @@
res => {
this.loading = false;
if (res.data.resultCode == 1) {
console.log(res,'数据');
var tempArray = res.data.data.pageData;
if (tempArray && tempArray.length > 0) {
tempArray.forEach(item => {
......@@ -375,14 +449,16 @@
var qMsg = {
Name: keyWords
};
this.mallapipost(
"/api/User/GetMemberUserListExt",
qMsg,
res => {
if (res.data.resultCode == 1) {
this.weChatData = res.data.data;
}
});
if (keyWords && keyWords != '') {
this.mallapipost(
"/api/User/GetMemberUserListExt",
qMsg,
res => {
if (res.data.resultCode == 1) {
this.weChatData = res.data.data;
}
});
}
},
//获取用户收货地址
weChatChange() {
......@@ -438,15 +514,114 @@
this.Success("下单成功!");
this.clreaMsg();
this.getGoodList();
this.orderDialog=false;
} else {
this.Error(res.data.message);
}
})
},
handleItemChange(val) {
this.getPosition(val)
},
getPosition(val, cb) {
let vm = this; //查询省市县
let params = {};
if (!val) { //初始化加载 获取所有省份数据
params = {
Id: 1
}
} else if (val.length === 1) { //加载二级 获取市级数据
params = {
Id: val[0]
}
} else { //加载3级 获取县级数据
params = {
Id: val[1]
}
}
this.mallapipost("/api/Destination/GetChildList", params, res => {
if (res.data.resultCode == 1) {
if (!val) { //初始化加载 查询省份数据
vm.provinceList = res.data.data.map((e) => {
return {
value: e.ID,
label: e.Name,
cities: []
}
});
} else if (val.length === 1) { //加载二级 查询该省下市级数据
vm.provinceList.map((item) => {
if (item.value === val[0]) {
item.cities = res.data.data.map((e) => {
return {
value: e.ID,
label: e.Name,
cities: []
}
})
}
})
} else { //加载3级 查询该省市下县级数据
vm.provinceList.map((item) => {
if (item.value === val[0]) {
item.cities.map((value) => {
if (value.value === val[1]) {
value.cities = res.data.data.map((e) => {
return {
value: e.ID,
label: e.Name
}
})
}
})
}
})
}
cb && cb(res);
} else {
// this.Info(res.data.message);
}
})
},
//点击新增
addAddress() {
if (this.orderMsg.mallUserId == '') {
this.Error('请选择用户');
} else {
this.goodVisible = true;
}
},
//新增
saveInfo(formName) {
this.AddressMsg.Province = this.AddressMsg.position[0];
this.AddressMsg.City = this.AddressMsg.position[1];
this.AddressMsg.District = this.AddressMsg.position[2];
this.AddressMsg.NewUserId = this.orderMsg.mallUserId
this.$refs[formName].validate((valid) => {
if (valid) {
delete this.AddressMsg.position //删除position 不传到后台
this.mallapipost("/api/AppletUser/SetUserShippingAddress", this.AddressMsg, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.goodVisible = false;
this.weChatChange();
} else {
this.Error(res.data.message);
}
})
} else {
return false;
}
});
}
},
mounted() {
this.getCategroy();
this.getGoodList();
this.getPosition(null)
}
};
......
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